Compare commits

..

1 Commits

Author SHA1 Message Date
81b32ed576 fix: add --host to admin dashboard dev server
Bind Vite to all interfaces so port forwarding works in
Ona environments.

Co-authored-by: Ona <no-reply@ona.com>
2026-03-24 22:10:09 +00:00
134 changed files with 11398 additions and 6170 deletions

View File

@@ -11,7 +11,7 @@
"dockerfile": "Dockerfile"
},
"postCreateCommand": "bun install",
"postStartCommand": "./scripts/setup-git.sh && ./scripts/setup-nvim.sh && ./scripts/setup-tailscale.sh",
"postStartCommand": "./scripts/setup-git.sh && ./scripts/setup-nvim.sh",
// Features add additional features to your environment. See https://containers.dev/features
// Beware: features are not supported on all platforms and may have unintended side-effects.
"features": {

View File

@@ -1 +0,0 @@
bunx lint-staged

View File

@@ -25,13 +25,7 @@ services:
- manual
commands:
start: |
gitpod --context environment environment port open 3000 --name "Aelis Backend" --protocol http
TS_IP=$(tailscale ip -4)
echo ""
echo "------------------ Bun Debugger ------------------"
echo "https://debug.bun.sh/#${TS_IP}:6499"
echo "------------------ Bun Debugger ------------------"
echo ""
gitpod --context environment environment port open 3000 --name "Aelis Backend" --protocol https
cd apps/aelis-backend && bun run dev
admin-dashboard:
@@ -41,5 +35,5 @@ services:
- manual
commands:
start: |
gitpod --context environment environment port open 5174 --name "Admin Dashboard" --protocol http
gitpod --context environment environment port open 5174 --name "Admin Dashboard" --protocol https
cd apps/admin-dashboard && bun run dev --host

View File

@@ -8,5 +8,5 @@
"ignoreCase": true,
"newlinesBetween": true
},
"ignorePatterns": [".claude", ".ona", "drizzle", "fixtures"]
"ignorePatterns": [".claude", "fixtures"]
}

View File

@@ -1,3 +0,0 @@
{
"js/ts.experimental.useTsgo": true
}

View File

@@ -0,0 +1,7 @@
node_modules/
coverage/
.pnpm-store/
pnpm-lock.yaml
package-lock.json
pnpm-lock.yaml
yarn.lock

View File

@@ -0,0 +1,11 @@
{
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "src/index.css",
"tailwindFunctions": ["cn", "cva"]
}

View File

@@ -1,25 +1,25 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "radix-mira",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"rtl": false,
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"menuColor": "default",
"menuAccent": "subtle",
"registries": {}
"$schema": "https://ui.shadcn.com/schema.json",
"style": "radix-mira",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"rtl": false,
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"menuColor": "default",
"menuAccent": "subtle",
"registries": {}
}

View File

@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])

View File

@@ -1,13 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View File

@@ -1,40 +1,48 @@
{
"name": "admin-dashboard",
"version": "0.0.1",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "oxlint .",
"format": "oxfmt --write .",
"typecheck": "tsc --noEmit",
"preview": "vite preview"
},
"dependencies": {
"@fontsource-variable/inter": "^5.2.8",
"@tailwindcss/vite": "^4.1.17",
"@tanstack/react-query": "^5.95.0",
"@tanstack/react-router": "^1.168.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.577.0",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"shadcn": "^4.0.8",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.1.17",
"tw-animate-css": "^1.4.0"
},
"devDependencies": {
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"typescript": "^6",
"vite": "^7.2.4"
}
"name": "admin-dashboard",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"format": "prettier --write \"**/*.{ts,tsx}\"",
"typecheck": "tsc --noEmit",
"preview": "vite preview"
},
"dependencies": {
"@fontsource-variable/inter": "^5.2.8",
"@tailwindcss/vite": "^4.1.17",
"@tanstack/react-query": "^5.95.0",
"@tanstack/react-router": "^1.168.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.577.0",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"shadcn": "^4.0.8",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.1.17",
"tw-animate-css": "^1.4.0"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"prettier": "^3.8.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "^7.2.4"
}
}

View File

@@ -1,25 +1,25 @@
import { useQueryClient, type QueryClient } from "@tanstack/react-query"
import { createRouter, RouterProvider } from "@tanstack/react-router"
import { useQueryClient, type QueryClient } from "@tanstack/react-query"
import { routeTree } from "./route-tree.gen"
const router = createRouter({
routeTree,
defaultPreload: "intent",
context: {
queryClient: undefined! as QueryClient,
},
routeTree,
defaultPreload: "intent",
context: {
queryClient: undefined! as QueryClient,
},
})
declare module "@tanstack/react-router" {
interface Register {
router: typeof router
}
interface Register {
router: typeof router
}
}
export function App() {
const queryClient = useQueryClient()
return <RouterProvider router={router} context={{ queryClient }} />
const queryClient = useQueryClient()
return <RouterProvider router={router} context={{ queryClient }} />
}
export default App

View File

@@ -1,144 +1,146 @@
import { useQuery } from "@tanstack/react-query"
import { Loader2, RefreshCw, TriangleAlert } from "lucide-react"
import { useState } from "react"
import { Loader2, RefreshCw, TriangleAlert } from "lucide-react"
import type { FeedItem } from "@/lib/api"
import { fetchFeed } from "@/lib/api"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { fetchFeed } from "@/lib/api"
export function FeedPanel() {
const {
data: feed,
error: feedError,
isFetching,
refetch,
} = useQuery({
queryKey: ["feed"],
queryFn: fetchFeed,
enabled: false,
})
const {
data: feed,
error: feedError,
isFetching,
refetch,
} = useQuery({
queryKey: ["feed"],
queryFn: fetchFeed,
enabled: false,
})
const error = feedError?.message ?? null
const error = feedError?.message ?? null
return (
<div className="mx-auto max-w-2xl space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="space-y-1">
<h2 className="text-lg font-semibold tracking-tight">Feed</h2>
<p className="text-sm text-muted-foreground">Query the feed as the current user.</p>
</div>
<Button onClick={() => refetch()} disabled={isFetching} size="sm">
{isFetching ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<RefreshCw className="size-3.5" />
)}
{feed ? "Refresh" : "Fetch"}
</Button>
</div>
return (
<div className="mx-auto max-w-2xl space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="space-y-1">
<h2 className="text-lg font-semibold tracking-tight">Feed</h2>
<p className="text-sm text-muted-foreground">
Query the feed as the current user.
</p>
</div>
<Button onClick={() => refetch()} disabled={isFetching} size="sm">
{isFetching ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<RefreshCw className="size-3.5" />
)}
{feed ? "Refresh" : "Fetch"}
</Button>
</div>
{error && (
<Card className="-mx-4 border-destructive">
<CardContent className="flex items-center gap-2 text-sm text-destructive">
<TriangleAlert className="size-4 shrink-0" />
{error}
</CardContent>
</Card>
)}
{error && (
<Card className="-mx-4 border-destructive">
<CardContent className="flex items-center gap-2 text-sm text-destructive">
<TriangleAlert className="size-4 shrink-0" />
{error}
</CardContent>
</Card>
)}
{feed && feed.errors.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-3">
<CardTitle className="text-sm">Source Errors</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{feed.errors.map((e) => (
<div key={e.sourceId} className="flex items-start gap-2 text-sm">
<Badge variant="outline" className="shrink-0 font-mono text-xs">
{e.sourceId}
</Badge>
<span className="select-text text-muted-foreground">{e.error}</span>
</div>
))}
</CardContent>
</Card>
)}
{feed && feed.errors.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-3">
<CardTitle className="text-sm">Source Errors</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{feed.errors.map((e) => (
<div key={e.sourceId} className="flex items-start gap-2 text-sm">
<Badge variant="outline" className="shrink-0 font-mono text-xs">
{e.sourceId}
</Badge>
<span className="select-text text-muted-foreground">{e.error}</span>
</div>
))}
</CardContent>
</Card>
)}
{feed && (
<div className="space-y-3">
<p className="text-xs text-muted-foreground">
{feed.items.length} {feed.items.length === 1 ? "item" : "items"}
</p>
{feed.items.length === 0 && (
<p className="text-sm text-muted-foreground">No items in feed.</p>
)}
{feed.items.map((item) => (
<FeedItemCard key={item.id} item={item} />
))}
</div>
)}
</div>
)
{feed && (
<div className="space-y-3">
<p className="text-xs text-muted-foreground">
{feed.items.length} {feed.items.length === 1 ? "item" : "items"}
</p>
{feed.items.length === 0 && (
<p className="text-sm text-muted-foreground">No items in feed.</p>
)}
{feed.items.map((item) => (
<FeedItemCard key={item.id} item={item} />
))}
</div>
)}
</div>
)
}
function FeedItemCard({ item }: { item: FeedItem }) {
const [expanded, setExpanded] = useState(false)
const [expanded, setExpanded] = useState(false)
return (
<Card className="-mx-4">
<CardHeader className="pb-3">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<CardTitle className="text-sm">{item.type}</CardTitle>
<Badge variant="secondary" className="font-mono text-xs">
{item.sourceId}
</Badge>
</div>
<div className="flex items-center gap-2">
{item.signals?.timeRelevance && (
<Badge variant="outline" className="text-xs">
{item.signals.timeRelevance}
</Badge>
)}
{item.signals?.urgency !== undefined && (
<Badge variant="outline" className="text-xs">
urgency: {item.signals.urgency}
</Badge>
)}
</div>
</div>
<p className="select-text font-mono text-xs text-muted-foreground">{item.id}</p>
</CardHeader>
<CardContent className="space-y-3">
{item.slots && Object.keys(item.slots).length > 0 && (
<div className="space-y-1.5">
{Object.entries(item.slots).map(([name, slot]) => (
<div key={name} className="text-sm">
<span className="font-medium">{name}: </span>
<span className="select-text text-muted-foreground">
{slot.content ?? <span className="italic">pending</span>}
</span>
</div>
))}
</div>
)}
<Button
variant="ghost"
size="sm"
className="h-auto px-0 text-xs text-muted-foreground"
onClick={() => setExpanded(!expanded)}
>
{expanded ? "Hide" : "Show"} raw data
</Button>
{expanded && (
<pre className="select-text overflow-auto rounded-md bg-muted p-3 font-mono text-xs">
{JSON.stringify(item.data, null, 2)}
</pre>
)}
</CardContent>
</Card>
)
return (
<Card className="-mx-4">
<CardHeader className="pb-3">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<CardTitle className="text-sm">{item.type}</CardTitle>
<Badge variant="secondary" className="font-mono text-xs">
{item.sourceId}
</Badge>
</div>
<div className="flex items-center gap-2">
{item.signals?.timeRelevance && (
<Badge variant="outline" className="text-xs">
{item.signals.timeRelevance}
</Badge>
)}
{item.signals?.urgency !== undefined && (
<Badge variant="outline" className="text-xs">
urgency: {item.signals.urgency}
</Badge>
)}
</div>
</div>
<p className="select-text font-mono text-xs text-muted-foreground">{item.id}</p>
</CardHeader>
<CardContent className="space-y-3">
{item.slots && Object.keys(item.slots).length > 0 && (
<div className="space-y-1.5">
{Object.entries(item.slots).map(([name, slot]) => (
<div key={name} className="text-sm">
<span className="font-medium">{name}: </span>
<span className="select-text text-muted-foreground">
{slot.content ?? <span className="italic">pending</span>}
</span>
</div>
))}
</div>
)}
<Button
variant="ghost"
size="sm"
className="h-auto px-0 text-xs text-muted-foreground"
onClick={() => setExpanded(!expanded)}
>
{expanded ? "Hide" : "Show"} raw data
</Button>
{expanded && (
<pre className="select-text overflow-auto rounded-md bg-muted p-3 font-mono text-xs">
{JSON.stringify(item.data, null, 2)}
</pre>
)}
</CardContent>
</Card>
)
}

View File

@@ -1,70 +1,75 @@
import { useQuery } from "@tanstack/react-query"
import { CircleCheck, CircleX, Loader2 } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getServerUrl } from "@/lib/server-url"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
async function checkHealth(serverUrl: string): Promise<boolean> {
const res = await fetch(`${serverUrl}/health`)
if (!res.ok) throw new Error(`HTTP ${res.status}`)
const data = (await res.json()) as { status: string }
if (data.status !== "ok") throw new Error("Unexpected response")
return true
const res = await fetch(`${serverUrl}/health`)
if (!res.ok) throw new Error(`HTTP ${res.status}`)
const data = (await res.json()) as { status: string }
if (data.status !== "ok") throw new Error("Unexpected response")
return true
}
export function GeneralSettingsPanel() {
const serverUrl = getServerUrl()
const serverUrl = getServerUrl()
const { isLoading, isError, error } = useQuery({
queryKey: ["health", serverUrl],
queryFn: () => checkHealth(serverUrl),
})
const { isLoading, isError, error } = useQuery({
queryKey: ["health", serverUrl],
queryFn: () => checkHealth(serverUrl),
})
const status = isLoading ? "checking" : isError ? "error" : "ok"
const errorMsg = error instanceof Error ? error.message : null
const status = isLoading ? "checking" : isError ? "error" : "ok"
const errorMsg = error instanceof Error ? error.message : null
return (
<div className="mx-auto max-w-xl space-y-6">
<div className="space-y-1">
<h2 className="text-lg font-semibold tracking-tight">General</h2>
<p className="text-sm text-muted-foreground">Backend server information.</p>
</div>
return (
<div className="mx-auto max-w-xl space-y-6">
<div className="space-y-1">
<h2 className="text-lg font-semibold tracking-tight">General</h2>
<p className="text-sm text-muted-foreground">
Backend server information.
</p>
</div>
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Server</CardTitle>
<CardDescription>Connected backend instance.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3 text-sm">
<div className="flex items-center justify-between gap-4">
<span className="shrink-0 text-muted-foreground">URL</span>
<span className="select-text truncate font-mono text-xs">{serverUrl}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Status</span>
{status === "checking" && (
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<Loader2 className="size-3 animate-spin" />
Checking
</span>
)}
{status === "ok" && (
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<CircleCheck className="size-3.5 text-primary" />
Connected
</span>
)}
{status === "error" && (
<span className="flex items-center gap-1.5 text-xs text-destructive">
<CircleX className="size-3.5" />
{errorMsg ?? "Unreachable"}
</span>
)}
</div>
</div>
</CardContent>
</Card>
</div>
)
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Server</CardTitle>
<CardDescription>
Connected backend instance.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3 text-sm">
<div className="flex items-center justify-between gap-4">
<span className="shrink-0 text-muted-foreground">URL</span>
<span className="select-text truncate font-mono text-xs">{serverUrl}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Status</span>
{status === "checking" && (
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<Loader2 className="size-3 animate-spin" />
Checking
</span>
)}
{status === "ok" && (
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<CircleCheck className="size-3.5 text-primary" />
Connected
</span>
)}
{status === "error" && (
<span className="flex items-center gap-1.5 text-xs text-destructive">
<CircleX className="size-3.5" />
{errorMsg ?? "Unreachable"}
</span>
)}
</div>
</div>
</CardContent>
</Card>
</div>
)
}

View File

@@ -1,98 +1,100 @@
import { useMutation } from "@tanstack/react-query"
import { Loader2, Settings2 } from "lucide-react"
import { useState } from "react"
import { Loader2, Settings2 } from "lucide-react"
import { toast } from "sonner"
import type { AuthSession } from "@/lib/auth"
import { signIn } from "@/lib/auth"
import { getServerUrl, setServerUrl } from "@/lib/server-url"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { signIn } from "@/lib/auth"
import { getServerUrl, setServerUrl } from "@/lib/server-url"
interface LoginPageProps {
onLogin: (session: AuthSession) => void
onLogin: (session: AuthSession) => void
}
export function LoginPage({ onLogin }: LoginPageProps) {
const [serverUrlInput, setServerUrlInput] = useState(getServerUrl)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [serverUrlInput, setServerUrlInput] = useState(getServerUrl)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const loginMutation = useMutation({
mutationFn: async () => {
setServerUrl(serverUrlInput)
return signIn(email, password)
},
onSuccess(session) {
onLogin(session)
},
onError(err) {
toast.error(err.message)
},
})
const loginMutation = useMutation({
mutationFn: async () => {
setServerUrl(serverUrlInput)
return signIn(email, password)
},
onSuccess(session) {
onLogin(session)
},
onError(err) {
toast.error(err.message)
},
})
function handleSubmit(e: React.FormEvent) {
e.preventDefault()
loginMutation.mutate()
}
function handleSubmit(e: React.FormEvent) {
e.preventDefault()
loginMutation.mutate()
}
const loading = loginMutation.isPending
const loading = loginMutation.isPending
return (
<div className="flex min-h-svh items-center justify-center bg-background p-4">
<Card className="w-full max-w-sm">
<CardHeader className="text-center">
<div className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-primary/10">
<Settings2 className="size-5 text-primary" />
</div>
<CardTitle>Admin Dashboard</CardTitle>
<CardDescription>Sign in to manage source configuration.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="server-url">Server URL</Label>
<Input
id="server-url"
type="url"
value={serverUrlInput}
onChange={(e) => setServerUrlInput(e.target.value)}
placeholder="http://localhost:3000"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="admin@aelis.local"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
return (
<div className="flex min-h-svh items-center justify-center bg-background p-4">
<Card className="w-full max-w-sm">
<CardHeader className="text-center">
<div className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-primary/10">
<Settings2 className="size-5 text-primary" />
</div>
<CardTitle>Admin Dashboard</CardTitle>
<CardDescription>Sign in to manage source configuration.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="server-url">Server URL</Label>
<Input
id="server-url"
type="url"
value={serverUrlInput}
onChange={(e) => setServerUrlInput(e.target.value)}
placeholder="http://localhost:3000"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="admin@aelis.local"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<Button type="submit" className="w-full" disabled={loading}>
{loading && <Loader2 className="size-4 animate-spin" />}
{loading ? "Signing in…" : "Sign in"}
</Button>
</form>
</CardContent>
</Card>
</div>
)
<Button type="submit" className="w-full" disabled={loading}>
{loading && <Loader2 className="size-4 animate-spin" />}
{loading ? "Signing in…" : "Sign in"}
</Button>
</form>
</CardContent>
</Card>
</div>
)
}

View File

@@ -1,9 +1,10 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { Info, Loader2, MapPin, Trash2 } from "lucide-react"
import { useState } from "react"
import { Info, Loader2, MapPin, Trash2 } from "lucide-react"
import { toast } from "sonner"
import type { ConfigFieldDef, SourceDefinition } from "@/lib/api"
import { fetchSourceConfig, pushLocation, replaceSource, updateProviderConfig } from "@/lib/api"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
@@ -11,494 +12,453 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { fetchSourceConfig, pushLocation, replaceSource, updateProviderConfig } from "@/lib/api"
interface SourceConfigPanelProps {
source: SourceDefinition
onUpdate: () => void
source: SourceDefinition
onUpdate: () => void
}
export function SourceConfigPanel({ source, onUpdate }: SourceConfigPanelProps) {
const queryClient = useQueryClient()
const [dirty, setDirty] = useState<Record<string, unknown>>({})
const queryClient = useQueryClient()
const [dirty, setDirty] = useState<Record<string, unknown>>({})
const { data: serverConfig, isLoading } = useQuery({
queryKey: ["sourceConfig", source.id],
queryFn: () => fetchSourceConfig(source.id),
})
const { data: serverConfig, isLoading } = useQuery({
queryKey: ["sourceConfig", source.id],
queryFn: () => fetchSourceConfig(source.id),
})
const enabled = serverConfig?.enabled ?? false
const serverValues = buildInitialValues(source.fields, serverConfig?.config)
const formValues = { ...serverValues, ...dirty }
const enabled = serverConfig?.enabled ?? false
const serverValues = buildInitialValues(source.fields, serverConfig?.config)
const formValues = { ...serverValues, ...dirty }
function isCredentialField(field: ConfigFieldDef): boolean {
return !!(field.secret && field.required)
}
function isCredentialField(field: ConfigFieldDef): boolean {
return !!(field.secret && field.required)
}
function getUserConfig(): Record<string, unknown> {
const result: Record<string, unknown> = {}
for (const [name, value] of Object.entries(formValues)) {
const field = source.fields[name]
if (field && !isCredentialField(field)) {
result[name] = value
}
}
return result
}
function getUserConfig(): Record<string, unknown> {
const result: Record<string, unknown> = {}
for (const [name, value] of Object.entries(formValues)) {
const field = source.fields[name]
if (field && !isCredentialField(field)) {
result[name] = value
}
}
return result
}
function getCredentialFields(): Record<string, unknown> {
const creds: Record<string, unknown> = {}
for (const [name, value] of Object.entries(formValues)) {
const field = source.fields[name]
if (field && isCredentialField(field)) {
creds[name] = value
}
}
return creds
}
function getCredentialFields(): Record<string, unknown> {
const creds: Record<string, unknown> = {}
for (const [name, value] of Object.entries(formValues)) {
const field = source.fields[name]
if (field && isCredentialField(field)) {
creds[name] = value
}
}
return creds
}
function invalidate() {
queryClient.invalidateQueries({ queryKey: ["sourceConfig", source.id] })
queryClient.invalidateQueries({ queryKey: ["configs"] })
onUpdate()
}
function invalidate() {
queryClient.invalidateQueries({ queryKey: ["sourceConfig", source.id] })
queryClient.invalidateQueries({ queryKey: ["configs"] })
onUpdate()
}
const saveMutation = useMutation({
mutationFn: async () => {
const credentialFields = getCredentialFields()
const hasCredentials = Object.values(credentialFields).some(
(v) => typeof v === "string" && v.length > 0,
)
const saveMutation = useMutation({
mutationFn: async () => {
const promises: Promise<void>[] = [
replaceSource(source.id, { enabled, config: getUserConfig() }),
]
const body: Parameters<typeof replaceSource>[1] = {
enabled,
config: getUserConfig(),
}
if (hasCredentials && source.perUserCredentials) {
body.credentials = credentialFields
}
await replaceSource(source.id, body)
const credentialFields = getCredentialFields()
const hasCredentials = Object.values(credentialFields).some(
(v) => typeof v === "string" && v.length > 0,
)
if (hasCredentials) {
promises.push(
updateProviderConfig(source.id, { credentials: credentialFields }),
)
}
// For non-per-user credentials (provider-level), still use the admin endpoint.
if (hasCredentials && !source.perUserCredentials) {
await updateProviderConfig(source.id, { credentials: credentialFields })
}
},
onSuccess() {
setDirty({})
invalidate()
toast.success("Configuration saved")
},
onError(err) {
toast.error(err.message)
},
})
await Promise.all(promises)
},
onSuccess() {
setDirty({})
invalidate()
toast.success("Configuration saved")
},
onError(err) {
toast.error(err.message)
},
})
const toggleMutation = useMutation({
mutationFn: (checked: boolean) =>
replaceSource(source.id, { enabled: checked, config: getUserConfig() }),
onSuccess(_data, checked) {
invalidate()
toast.success(`Source ${checked ? "enabled" : "disabled"}`)
},
onError(err) {
toast.error(err.message)
},
})
const toggleMutation = useMutation({
mutationFn: (checked: boolean) =>
replaceSource(source.id, { enabled: checked, config: getUserConfig() }),
onSuccess(_data, checked) {
invalidate()
toast.success(`Source ${checked ? "enabled" : "disabled"}`)
},
onError(err) {
toast.error(err.message)
},
})
const deleteMutation = useMutation({
mutationFn: () => replaceSource(source.id, { enabled: false, config: {} }),
onSuccess() {
setDirty({})
invalidate()
toast.success("Configuration deleted")
},
onError(err) {
toast.error(err.message)
},
})
const deleteMutation = useMutation({
mutationFn: () => replaceSource(source.id, { enabled: false, config: {} }),
onSuccess() {
setDirty({})
invalidate()
toast.success("Configuration deleted")
},
onError(err) {
toast.error(err.message)
},
})
function handleFieldChange(fieldName: string, value: unknown) {
setDirty((prev) => ({ ...prev, [fieldName]: value }))
}
function handleFieldChange(fieldName: string, value: unknown) {
setDirty((prev) => ({ ...prev, [fieldName]: value }))
}
const fieldEntries = Object.entries(source.fields)
const hasFields = fieldEntries.length > 0
const busy = saveMutation.isPending || toggleMutation.isPending || deleteMutation.isPending
const fieldEntries = Object.entries(source.fields)
const hasFields = fieldEntries.length > 0
const busy = saveMutation.isPending || toggleMutation.isPending || deleteMutation.isPending
const requiredFields = fieldEntries.filter(([, f]) => f.required)
const optionalFields = fieldEntries.filter(([, f]) => !f.required)
const requiredFields = fieldEntries.filter(([, f]) => f.required)
const optionalFields = fieldEntries.filter(([, f]) => !f.required)
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
)
}
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
)
}
return (
<div className="mx-auto max-w-xl space-y-6">
{/* Header */}
<div className="flex items-center justify-between gap-4">
<div className="space-y-1">
<div className="flex items-center gap-3">
<h2 className="text-lg font-semibold tracking-tight">{source.name}</h2>
{source.alwaysEnabled ? (
<Badge variant="secondary">Always on</Badge>
) : enabled ? (
<Badge className="bg-primary/10 text-primary">Enabled</Badge>
) : (
<Badge variant="outline">Disabled</Badge>
)}
</div>
<p className="text-sm text-muted-foreground">{source.description}</p>
</div>
{!source.alwaysEnabled && (
<Switch
checked={enabled}
onCheckedChange={(checked) => toggleMutation.mutate(checked)}
disabled={busy}
/>
)}
</div>
return (
<div className="mx-auto max-w-xl space-y-6">
{/* Header */}
<div className="flex items-center justify-between gap-4">
<div className="space-y-1">
<div className="flex items-center gap-3">
<h2 className="text-lg font-semibold tracking-tight">{source.name}</h2>
{source.alwaysEnabled ? (
<Badge variant="secondary">Always on</Badge>
) : enabled ? (
<Badge className="bg-primary/10 text-primary">Enabled</Badge>
) : (
<Badge variant="outline">Disabled</Badge>
)}
{/* Config form */}
{hasFields && !source.alwaysEnabled && (
<>
{/* Required fields */}
{requiredFields.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Credentials</CardTitle>
<CardDescription>Required fields to connect this source.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{requiredFields.map(([name, field]) => (
<FieldInput
key={name}
name={name}
field={field}
value={formValues[name]}
onChange={(v) => handleFieldChange(name, v)}
disabled={busy}
/>
))}
</CardContent>
</Card>
)}
</div>
<p className="text-sm text-muted-foreground">{source.description}</p>
</div>
{!source.alwaysEnabled && (
<Switch
checked={enabled}
onCheckedChange={(checked) => toggleMutation.mutate(checked)}
disabled={busy}
/>
)}
</div>
{/* Optional fields */}
{optionalFields.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Options</CardTitle>
<CardDescription>Optional configuration for this source.</CardDescription>
</CardHeader>
<CardContent>
<div className={`grid gap-4 ${optionalFields.length > 1 ? "grid-cols-2" : ""}`}>
{optionalFields.map(([name, field]) => (
<FieldInput
key={name}
name={name}
field={field}
value={formValues[name]}
onChange={(v) => handleFieldChange(name, v)}
disabled={busy}
/>
))}
</div>
</CardContent>
</Card>
)}
{/* Config form */}
{hasFields && !source.alwaysEnabled && (
<>
{/* Required fields */}
{requiredFields.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Credentials</CardTitle>
<CardDescription>Required fields to connect this source.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{requiredFields.map(([name, field]) => (
<FieldInput
key={name}
name={name}
field={field}
value={formValues[name]}
onChange={(v) => handleFieldChange(name, v)}
disabled={busy}
/>
))}
</CardContent>
</Card>
)}
{/* Actions */}
<div className="flex items-center justify-end gap-3">
{serverConfig && (
<Button
onClick={() => deleteMutation.mutate()}
disabled={busy}
variant="outline"
className="text-destructive hover:text-destructive"
>
{deleteMutation.isPending ? (
<Loader2 className="size-4 animate-spin" />
) : (
<Trash2 className="size-4" />
)}
{deleteMutation.isPending ? "Deleting…" : "Delete configuration"}
</Button>
)}
<Button onClick={() => saveMutation.mutate()} disabled={busy}>
{saveMutation.isPending && <Loader2 className="size-4 animate-spin" />}
{saveMutation.isPending ? "Saving…" : "Save configuration"}
</Button>
</div>
</>
)}
{/* Optional fields */}
{optionalFields.length > 0 && (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Options</CardTitle>
<CardDescription>Optional configuration for this source.</CardDescription>
</CardHeader>
<CardContent>
<div className={`grid gap-4 ${optionalFields.length > 1 ? "grid-cols-2" : ""}`}>
{optionalFields.map(([name, field]) => (
<FieldInput
key={name}
name={name}
field={field}
value={formValues[name]}
onChange={(v) => handleFieldChange(name, v)}
disabled={busy}
/>
))}
</div>
</CardContent>
</Card>
)}
{/* Always-on sources */}
{source.alwaysEnabled && source.id !== "aelis.location" && (
<>
<Separator />
<p className="text-sm text-muted-foreground">
This source is always enabled and requires no configuration.
</p>
</>
)}
{/* Actions */}
<div className="flex items-center justify-end gap-3">
{serverConfig && (
<Button
onClick={() => deleteMutation.mutate()}
disabled={busy}
variant="outline"
className="text-destructive hover:text-destructive"
>
{deleteMutation.isPending ? (
<Loader2 className="size-4 animate-spin" />
) : (
<Trash2 className="size-4" />
)}
{deleteMutation.isPending ? "Deleting…" : "Delete configuration"}
</Button>
)}
<Button onClick={() => saveMutation.mutate()} disabled={busy}>
{saveMutation.isPending && <Loader2 className="size-4 animate-spin" />}
{saveMutation.isPending ? "Saving…" : "Save configuration"}
</Button>
</div>
</>
)}
{source.id === "aelis.location" && <LocationCard />}
</div>
)
{/* Always-on sources */}
{source.alwaysEnabled && source.id !== "aelis.location" && (
<>
<Separator />
<p className="text-sm text-muted-foreground">
This source is always enabled and requires no configuration.
</p>
</>
)}
{source.id === "aelis.location" && <LocationCard />}
</div>
)
}
function LocationCard() {
const [lat, setLat] = useState("")
const [lng, setLng] = useState("")
const [lat, setLat] = useState("")
const [lng, setLng] = useState("")
const locationMutation = useMutation({
mutationFn: (coords: { lat: number; lng: number }) =>
pushLocation({ lat: coords.lat, lng: coords.lng, accuracy: 10 }),
onSuccess() {
toast.success("Location updated")
},
onError(err) {
toast.error(err.message)
},
})
const locationMutation = useMutation({
mutationFn: (coords: { lat: number; lng: number }) =>
pushLocation({ lat: coords.lat, lng: coords.lng, accuracy: 10 }),
onSuccess() {
toast.success("Location updated")
},
onError(err) {
toast.error(err.message)
},
})
function handlePush() {
const latNum = parseFloat(lat)
const lngNum = parseFloat(lng)
if (isNaN(latNum) || isNaN(lngNum)) return
locationMutation.mutate({ lat: latNum, lng: lngNum })
}
function handlePush() {
const latNum = parseFloat(lat)
const lngNum = parseFloat(lng)
if (isNaN(latNum) || isNaN(lngNum)) return
locationMutation.mutate({ lat: latNum, lng: lngNum })
}
function handleUseDevice() {
navigator.geolocation.getCurrentPosition(
(pos) => {
setLat(String(pos.coords.latitude))
setLng(String(pos.coords.longitude))
locationMutation.mutate({
lat: pos.coords.latitude,
lng: pos.coords.longitude,
})
},
(err) => {
locationMutation.reset()
alert(`Geolocation error: ${err.message}`)
},
)
}
function handleUseDevice() {
navigator.geolocation.getCurrentPosition(
(pos) => {
setLat(String(pos.coords.latitude))
setLng(String(pos.coords.longitude))
locationMutation.mutate({
lat: pos.coords.latitude,
lng: pos.coords.longitude,
})
},
(err) => {
locationMutation.reset()
alert(`Geolocation error: ${err.message}`)
},
)
}
return (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Push Location</CardTitle>
<CardDescription>Send a location update to the backend.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="loc-lat" className="text-xs font-medium">
Latitude
</Label>
<Input
id="loc-lat"
type="number"
step="any"
value={lat}
onChange={(e) => setLat(e.target.value)}
placeholder="51.5074"
disabled={locationMutation.isPending}
/>
</div>
<div className="space-y-2">
<Label htmlFor="loc-lng" className="text-xs font-medium">
Longitude
</Label>
<Input
id="loc-lng"
type="number"
step="any"
value={lng}
onChange={(e) => setLng(e.target.value)}
placeholder="-0.1278"
disabled={locationMutation.isPending}
/>
</div>
</div>
return (
<Card className="-mx-4">
<CardHeader className="pb-4">
<CardTitle className="text-sm">Push Location</CardTitle>
<CardDescription>Send a location update to the backend.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="loc-lat" className="text-xs font-medium">Latitude</Label>
<Input
id="loc-lat"
type="number"
step="any"
value={lat}
onChange={(e) => setLat(e.target.value)}
placeholder="51.5074"
disabled={locationMutation.isPending}
/>
</div>
<div className="space-y-2">
<Label htmlFor="loc-lng" className="text-xs font-medium">Longitude</Label>
<Input
id="loc-lng"
type="number"
step="any"
value={lng}
onChange={(e) => setLng(e.target.value)}
placeholder="-0.1278"
disabled={locationMutation.isPending}
/>
</div>
</div>
<div className="flex items-center gap-3">
<Button
size="sm"
variant="outline"
onClick={handleUseDevice}
disabled={locationMutation.isPending}
>
<MapPin className="size-3.5" />
Use device location
</Button>
<Button
size="sm"
onClick={handlePush}
disabled={locationMutation.isPending || !lat || !lng}
>
{locationMutation.isPending && <Loader2 className="size-3.5 animate-spin" />}
Push
</Button>
</div>
</CardContent>
</Card>
)
<div className="flex items-center gap-3">
<Button
size="sm"
variant="outline"
onClick={handleUseDevice}
disabled={locationMutation.isPending}
>
<MapPin className="size-3.5" />
Use device location
</Button>
<Button
size="sm"
onClick={handlePush}
disabled={locationMutation.isPending || !lat || !lng}
>
{locationMutation.isPending && <Loader2 className="size-3.5 animate-spin" />}
Push
</Button>
</div>
</CardContent>
</Card>
)
}
function FieldInput({
name,
field,
value,
onChange,
disabled,
name,
field,
value,
onChange,
disabled,
}: {
name: string
field: ConfigFieldDef
value: unknown
onChange: (value: unknown) => void
disabled?: boolean
name: string
field: ConfigFieldDef
value: unknown
onChange: (value: unknown) => void
disabled?: boolean
}) {
const labelContent = (
<div className="flex items-center gap-1.5">
<span>{field.label}</span>
{field.required && <span className="text-destructive">*</span>}
{field.description && (
<Tooltip>
<TooltipTrigger asChild>
<Info className="size-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs text-xs">
{field.description}
</TooltipContent>
</Tooltip>
)}
</div>
)
const labelContent = (
<div className="flex items-center gap-1.5">
<span>{field.label}</span>
{field.required && <span className="text-destructive">*</span>}
{field.description && (
<Tooltip>
<TooltipTrigger asChild>
<Info className="size-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs text-xs">
{field.description}
</TooltipContent>
</Tooltip>
)}
</div>
)
if (field.type === "select" && field.options) {
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Select value={String(value ?? "")} onValueChange={onChange} disabled={disabled}>
<SelectTrigger id={name}>
<SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
</SelectTrigger>
<SelectContent>
{field.options.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)
}
if (field.type === "select" && field.options) {
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Select value={String(value ?? "")} onValueChange={onChange} disabled={disabled}>
<SelectTrigger id={name}>
<SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
</SelectTrigger>
<SelectContent>
{field.options.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)
}
if (field.type === "multiselect" && field.options) {
const selected = Array.isArray(value) ? (value as string[]) : []
if (field.type === "number") {
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Input
id={name}
type="number"
value={value === undefined || value === null ? "" : String(value)}
onChange={(e) => {
const v = e.target.value
onChange(v === "" ? undefined : Number(v))
}}
placeholder={field.defaultValue !== undefined ? String(field.defaultValue) : undefined}
disabled={disabled}
/>
</div>
)
}
function toggle(optValue: string) {
const next = selected.includes(optValue)
? selected.filter((v) => v !== optValue)
: [...selected, optValue]
onChange(next)
}
return (
<div className="space-y-2">
<Label className="text-xs font-medium">{labelContent}</Label>
<div className="flex flex-wrap gap-1.5">
{field.options!.map((opt) => {
const isSelected = selected.includes(opt.value)
return (
<Badge
key={opt.value}
variant={isSelected ? "default" : "outline"}
className={`cursor-pointer select-none ${isSelected ? "" : "opacity-60 hover:opacity-100"}`}
onClick={() => !disabled && toggle(opt.value)}
>
{opt.label}
</Badge>
)
})}
</div>
</div>
)
}
if (field.type === "number") {
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Input
id={name}
type="number"
value={value === undefined || value === null ? "" : String(value)}
onChange={(e) => {
const v = e.target.value
onChange(v === "" ? undefined : Number(v))
}}
placeholder={field.defaultValue !== undefined ? String(field.defaultValue) : undefined}
disabled={disabled}
/>
</div>
)
}
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Input
id={name}
type={field.secret ? "password" : "text"}
value={String(value ?? "")}
onChange={(e) => onChange(e.target.value)}
placeholder={field.defaultValue !== undefined ? String(field.defaultValue) : undefined}
disabled={disabled}
/>
</div>
)
return (
<div className="space-y-2">
<Label htmlFor={name} className="text-xs font-medium">
{labelContent}
</Label>
<Input
id={name}
type={field.secret ? "password" : "text"}
value={String(value ?? "")}
onChange={(e) => onChange(e.target.value)}
placeholder={field.defaultValue !== undefined ? String(field.defaultValue) : undefined}
disabled={disabled}
/>
</div>
)
}
function buildInitialValues(
fields: Record<string, ConfigFieldDef>,
saved: Record<string, unknown> | undefined,
fields: Record<string, ConfigFieldDef>,
saved: Record<string, unknown> | undefined,
): Record<string, unknown> {
const values: Record<string, unknown> = {}
for (const [name, field] of Object.entries(fields)) {
if (saved && name in saved) {
values[name] = saved[name]
} else if (field.defaultValue !== undefined) {
values[name] = field.defaultValue
} else if (field.type === "multiselect") {
values[name] = []
} else {
values[name] = field.type === "number" ? undefined : ""
}
}
return values
const values: Record<string, unknown> = {}
for (const [name, field] of Object.entries(fields)) {
if (saved && name in saved) {
values[name] = saved[name]
} else if (field.defaultValue !== undefined) {
values[name] = field.defaultValue
} else {
values[name] = field.type === "number" ? undefined : ""
}
}
return values
}

View File

@@ -5,219 +5,226 @@ type Theme = "dark" | "light" | "system"
type ResolvedTheme = "dark" | "light"
type ThemeProviderProps = {
children: React.ReactNode
defaultTheme?: Theme
storageKey?: string
disableTransitionOnChange?: boolean
children: React.ReactNode
defaultTheme?: Theme
storageKey?: string
disableTransitionOnChange?: boolean
}
type ThemeProviderState = {
theme: Theme
setTheme: (theme: Theme) => void
theme: Theme
setTheme: (theme: Theme) => void
}
const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
const THEME_VALUES: Theme[] = ["dark", "light", "system"]
const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>(undefined)
const ThemeProviderContext = React.createContext<
ThemeProviderState | undefined
>(undefined)
function isTheme(value: string | null): value is Theme {
if (value === null) {
return false
}
if (value === null) {
return false
}
return THEME_VALUES.includes(value as Theme)
return THEME_VALUES.includes(value as Theme)
}
function getSystemTheme(): ResolvedTheme {
if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
return "dark"
}
if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
return "dark"
}
return "light"
return "light"
}
function disableTransitionsTemporarily() {
const style = document.createElement("style")
style.appendChild(
document.createTextNode(
"*,*::before,*::after{-webkit-transition:none!important;transition:none!important}",
),
)
document.head.appendChild(style)
const style = document.createElement("style")
style.appendChild(
document.createTextNode(
"*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
)
)
document.head.appendChild(style)
return () => {
window.getComputedStyle(document.body)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
style.remove()
})
})
}
return () => {
window.getComputedStyle(document.body)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
style.remove()
})
})
}
}
function isEditableTarget(target: EventTarget | null) {
if (!(target instanceof HTMLElement)) {
return false
}
if (!(target instanceof HTMLElement)) {
return false
}
if (target.isContentEditable) {
return true
}
if (target.isContentEditable) {
return true
}
const editableParent = target.closest("input, textarea, select, [contenteditable='true']")
if (editableParent) {
return true
}
const editableParent = target.closest(
"input, textarea, select, [contenteditable='true']"
)
if (editableParent) {
return true
}
return false
return false
}
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "theme",
disableTransitionOnChange = true,
...props
children,
defaultTheme = "system",
storageKey = "theme",
disableTransitionOnChange = true,
...props
}: ThemeProviderProps) {
const [theme, setThemeState] = React.useState<Theme>(() => {
const storedTheme = localStorage.getItem(storageKey)
if (isTheme(storedTheme)) {
return storedTheme
}
const [theme, setThemeState] = React.useState<Theme>(() => {
const storedTheme = localStorage.getItem(storageKey)
if (isTheme(storedTheme)) {
return storedTheme
}
return defaultTheme
})
return defaultTheme
})
const setTheme = React.useCallback(
(nextTheme: Theme) => {
localStorage.setItem(storageKey, nextTheme)
setThemeState(nextTheme)
},
[storageKey],
)
const setTheme = React.useCallback(
(nextTheme: Theme) => {
localStorage.setItem(storageKey, nextTheme)
setThemeState(nextTheme)
},
[storageKey]
)
const applyTheme = React.useCallback(
(nextTheme: Theme) => {
const root = document.documentElement
const resolvedTheme = nextTheme === "system" ? getSystemTheme() : nextTheme
const restoreTransitions = disableTransitionOnChange ? disableTransitionsTemporarily() : null
const applyTheme = React.useCallback(
(nextTheme: Theme) => {
const root = document.documentElement
const resolvedTheme =
nextTheme === "system" ? getSystemTheme() : nextTheme
const restoreTransitions = disableTransitionOnChange
? disableTransitionsTemporarily()
: null
root.classList.remove("light", "dark")
root.classList.add(resolvedTheme)
root.classList.remove("light", "dark")
root.classList.add(resolvedTheme)
if (restoreTransitions) {
restoreTransitions()
}
},
[disableTransitionOnChange],
)
if (restoreTransitions) {
restoreTransitions()
}
},
[disableTransitionOnChange]
)
React.useEffect(() => {
applyTheme(theme)
React.useEffect(() => {
applyTheme(theme)
if (theme !== "system") {
return undefined
}
if (theme !== "system") {
return undefined
}
const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
const handleChange = () => {
applyTheme("system")
}
const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
const handleChange = () => {
applyTheme("system")
}
mediaQuery.addEventListener("change", handleChange)
mediaQuery.addEventListener("change", handleChange)
return () => {
mediaQuery.removeEventListener("change", handleChange)
}
}, [theme, applyTheme])
return () => {
mediaQuery.removeEventListener("change", handleChange)
}
}, [theme, applyTheme])
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.repeat) {
return
}
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.repeat) {
return
}
if (event.metaKey || event.ctrlKey || event.altKey) {
return
}
if (event.metaKey || event.ctrlKey || event.altKey) {
return
}
if (isEditableTarget(event.target)) {
return
}
if (isEditableTarget(event.target)) {
return
}
if (event.key.toLowerCase() !== "d") {
return
}
if (event.key.toLowerCase() !== "d") {
return
}
setThemeState((currentTheme) => {
const nextTheme =
currentTheme === "dark"
? "light"
: currentTheme === "light"
? "dark"
: getSystemTheme() === "dark"
? "light"
: "dark"
setThemeState((currentTheme) => {
const nextTheme =
currentTheme === "dark"
? "light"
: currentTheme === "light"
? "dark"
: getSystemTheme() === "dark"
? "light"
: "dark"
localStorage.setItem(storageKey, nextTheme)
return nextTheme
})
}
localStorage.setItem(storageKey, nextTheme)
return nextTheme
})
}
window.addEventListener("keydown", handleKeyDown)
window.addEventListener("keydown", handleKeyDown)
return () => {
window.removeEventListener("keydown", handleKeyDown)
}
}, [storageKey])
return () => {
window.removeEventListener("keydown", handleKeyDown)
}
}, [storageKey])
React.useEffect(() => {
const handleStorageChange = (event: StorageEvent) => {
if (event.storageArea !== localStorage) {
return
}
React.useEffect(() => {
const handleStorageChange = (event: StorageEvent) => {
if (event.storageArea !== localStorage) {
return
}
if (event.key !== storageKey) {
return
}
if (event.key !== storageKey) {
return
}
if (isTheme(event.newValue)) {
setThemeState(event.newValue)
return
}
if (isTheme(event.newValue)) {
setThemeState(event.newValue)
return
}
setThemeState(defaultTheme)
}
setThemeState(defaultTheme)
}
window.addEventListener("storage", handleStorageChange)
window.addEventListener("storage", handleStorageChange)
return () => {
window.removeEventListener("storage", handleStorageChange)
}
}, [defaultTheme, storageKey])
return () => {
window.removeEventListener("storage", handleStorageChange)
}
}, [defaultTheme, storageKey])
const value = React.useMemo(
() => ({
theme,
setTheme,
}),
[theme, setTheme],
)
const value = React.useMemo(
() => ({
theme,
setTheme,
}),
[theme, setTheme]
)
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
)
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
)
}
export const useTheme = () => {
const context = React.useContext(ThemeProviderContext)
const context = React.useContext(ThemeProviderContext)
if (context === undefined) {
throw new Error("useTheme must be used within a ThemeProvider")
}
if (context === undefined) {
throw new Error("useTheme must be used within a ThemeProvider")
}
return context
return context
}

View File

@@ -1,84 +1,84 @@
"use client"
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { Accordion as AccordionPrimitive } from "radix-ui"
import * as React from "react"
import { Accordion as AccordionPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return (
<AccordionPrimitive.Root
data-slot="accordion"
className={cn("flex w-full flex-col overflow-hidden rounded-md border", className)}
{...props}
/>
)
function Accordion({
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return (
<AccordionPrimitive.Root
data-slot="accordion"
className={cn(
"flex w-full flex-col overflow-hidden rounded-md border",
className
)}
{...props}
/>
)
}
function AccordionItem({
className,
...props
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("not-last:border-b data-open:bg-muted/50", className)}
{...props}
/>
)
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("not-last:border-b data-open:bg-muted/50", className)}
{...props}
/>
)
}
function AccordionTrigger({
className,
children,
...props
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
className,
)}
{...props}
>
{children}
<ChevronDownIcon
data-slot="accordion-trigger-icon"
className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
/>
<ChevronUpIcon
data-slot="accordion-trigger-icon"
className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
className
)}
{...props}
>
{children}
<ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
<ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
}
function AccordionContent({
className,
children,
...props
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="overflow-hidden px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up"
{...props}
>
<div
className={cn(
"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className,
)}
>
{children}
</div>
</AccordionPrimitive.Content>
)
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="overflow-hidden px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up"
{...props}
>
<div
className={cn(
"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className
)}
>
{children}
</div>
</AccordionPrimitive.Content>
)
}
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

View File

@@ -1,73 +1,76 @@
import { cva, type VariantProps } from "class-variance-authority"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
},
},
defaultVariants: {
variant: "default",
},
},
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Alert({
className,
variant,
...props
className,
variant,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
)
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
)
}
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-title"
className={cn(
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
className,
)}
{...props}
/>
)
return (
<div
data-slot="alert-title"
className={cn(
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
className
)}
{...props}
/>
)
}
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className,
)}
{...props}
/>
)
function AlertDescription({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className
)}
{...props}
/>
)
}
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-action"
className={cn("absolute top-1.5 right-2", className)}
{...props}
/>
)
return (
<div
data-slot="alert-action"
className={cn("absolute top-1.5 right-2", className)}
{...props}
/>
)
}
export { Alert, AlertTitle, AlertDescription, AlertAction }

View File

@@ -1,46 +1,49 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import * as React from "react"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
outline:
"border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
variant: "default",
},
},
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
outline:
"border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost:
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot.Root : "span"
className,
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot.Root : "span"
return (
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
return (
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }

View File

@@ -1,65 +1,65 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import * as React from "react"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
"icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
"icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
"icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
"icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
"icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
"icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot.Root : "button"
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot.Root : "button"
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }

View File

@@ -3,81 +3,98 @@ import * as React from "react"
import { cn } from "@/lib/utils"
function Card({
className,
size = "default",
...props
className,
size = "default",
...props
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
return (
<div
data-slot="card"
data-size={size}
className={cn(
"group/card flex flex-col gap-4 overflow-hidden rounded-lg bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
className,
)}
{...props}
/>
)
return (
<div
data-slot="card"
data-size={size}
className={cn(
"group/card flex flex-col gap-4 overflow-hidden rounded-lg bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
className
)}
{...props}
/>
)
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
className,
)}
{...props}
/>
)
return (
<div
data-slot="card-header"
className={cn(
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
className
)}
{...props}
/>
)
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="card-title" className={cn("text-sm font-medium", className)} {...props} />
return (
<div
data-slot="card-title"
className={cn("text-sm font-medium", className)}
{...props}
/>
)
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-xs/relaxed text-muted-foreground", className)}
{...props}
/>
)
return (
<div
data-slot="card-description"
className={cn("text-xs/relaxed text-muted-foreground", className)}
{...props}
/>
)
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
{...props}
/>
)
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
)
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
{...props}
/>
)
return (
<div
data-slot="card-content"
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
{...props}
/>
)
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn(
"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3",
className,
)}
{...props}
/>
)
return (
<div
data-slot="card-footer"
className={cn(
"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3",
className
)}
{...props}
/>
)
}
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
}

View File

@@ -2,20 +2,32 @@
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}
function CollapsibleTrigger({
...props
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
)
}
function CollapsibleContent({
...props
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
)
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

View File

@@ -3,17 +3,17 @@ import * as React from "react"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
type={type}
data-slot="input"
className={cn(
"h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
className,
)}
{...props}
/>
)
return (
<input
type={type}
data-slot="input"
className={cn(
"h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
className
)}
{...props}
/>
)
}
export { Input }

View File

@@ -1,19 +1,22 @@
import { Label as LabelPrimitive } from "radix-ui"
import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-xs/relaxed leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className,
)}
{...props}
/>
)
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-xs/relaxed leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...props}
/>
)
}
export { Label }

View File

@@ -1,183 +1,193 @@
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
import { Select as SelectPrimitive } from "radix-ui"
import * as React from "react"
import { Select as SelectPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />
}
function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
return (
<SelectPrimitive.Group
data-slot="select-group"
className={cn("scroll-my-1 p-1", className)}
{...props}
/>
)
function SelectGroup({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return (
<SelectPrimitive.Group
data-slot="select-group"
className={cn("scroll-my-1 p-1", className)}
{...props}
/>
)
}
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />
}
function SelectTrigger({
className,
size = "default",
children,
...props
className,
size = "default",
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
size?: "sm" | "default"
size?: "sm" | "default"
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
className,
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
)
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
)
}
function SelectContent({
className,
children,
position = "item-aligned",
align = "center",
...props
className,
children,
position = "item-aligned",
align = "center",
...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
data-slot="select-content"
data-align-trigger={position === "item-aligned"}
className={cn(
"relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
align={align}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
data-position={position}
className={cn(
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
position === "popper" && "",
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
)
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
data-slot="select-content"
data-align-trigger={position === "item-aligned"}
className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
position={position}
align={align}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
data-position={position}
className={cn(
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
position === "popper" && ""
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
)
}
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
{...props}
/>
)
function SelectLabel({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
{...props}
/>
)
}
function SelectItem({
className,
children,
...props
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className,
)}
{...props}
>
<span className="pointer-events-none absolute right-2 flex items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="pointer-events-none" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
)
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
<span className="pointer-events-none absolute right-2 flex items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="pointer-events-none" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
)
}
function SelectSeparator({
className,
...props
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border/50", className)}
{...props}
/>
)
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn(
"pointer-events-none -mx-1 my-1 h-px bg-border/50",
className
)}
{...props}
/>
)
}
function SelectScrollUpButton({
className,
...props
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
className,
)}
{...props}
>
<ChevronUpIcon />
</SelectPrimitive.ScrollUpButton>
)
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
className
)}
{...props}
>
<ChevronUpIcon
/>
</SelectPrimitive.ScrollUpButton>
)
}
function SelectScrollDownButton({
className,
...props
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
className,
)}
{...props}
>
<ChevronDownIcon />
</SelectPrimitive.ScrollDownButton>
)
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
className
)}
{...props}
>
<ChevronDownIcon
/>
</SelectPrimitive.ScrollDownButton>
)
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
}

View File

@@ -1,26 +1,26 @@
import { Separator as SeparatorPrimitive } from "radix-ui"
import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className,
)}
{...props}
/>
)
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
)}
{...props}
/>
)
}
export { Separator }

View File

@@ -1,128 +1,142 @@
import { XIcon } from "lucide-react"
import { Dialog as SheetPrimitive } from "radix-ui"
import * as React from "react"
import { Dialog as SheetPrimitive } from "radix-ui"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { XIcon } from "lucide-react"
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />
return <SheetPrimitive.Root data-slot="sheet" {...props} />
}
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}
function SheetOverlay({
className,
...props
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
className,
)}
{...props}
/>
)
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
className
)}
{...props}
/>
)
}
function SheetContent({
className,
children,
side = "right",
showCloseButton = true,
...props
className,
children,
side = "right",
showCloseButton = true,
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left"
showCloseButton?: boolean
side?: "top" | "right" | "bottom" | "left"
showCloseButton?: boolean
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
data-side={side}
className={cn(
"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
className,
)}
{...props}
>
{children}
{showCloseButton && (
<SheetPrimitive.Close data-slot="sheet-close" asChild>
<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm">
<XIcon />
<span className="sr-only">Close</span>
</Button>
</SheetPrimitive.Close>
)}
</SheetPrimitive.Content>
</SheetPortal>
)
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
data-side={side}
className={cn(
"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
className
)}
{...props}
>
{children}
{showCloseButton && (
<SheetPrimitive.Close data-slot="sheet-close" asChild>
<Button
variant="ghost"
className="absolute top-4 right-4"
size="icon-sm"
>
<XIcon
/>
<span className="sr-only">Close</span>
</Button>
</SheetPrimitive.Close>
)}
</SheetPrimitive.Content>
</SheetPortal>
)
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-6", className)}
{...props}
/>
)
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-6", className)}
{...props}
/>
)
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-6", className)}
{...props}
/>
)
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-6", className)}
{...props}
/>
)
}
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-sm font-medium text-foreground", className)}
{...props}
/>
)
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-sm font-medium text-foreground", className)}
{...props}
/>
)
}
function SheetDescription({
className,
...props
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-xs/relaxed text-muted-foreground", className)}
{...props}
/>
)
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-xs/relaxed text-muted-foreground", className)}
{...props}
/>
)
}
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,13 +1,13 @@
import { cn } from "@/lib/utils"
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
)
return (
<div
data-slot="skeleton"
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
)
}
export { Skeleton }

View File

@@ -1,46 +1,49 @@
"use client"
import {
CircleCheckIcon,
InfoIcon,
TriangleAlertIcon,
OctagonXIcon,
Loader2Icon,
} from "lucide-react"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { useTheme } from "@/components/theme-provider"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
success: <CircleCheckIcon className="size-4" />,
info: <InfoIcon className="size-4" />,
warning: <TriangleAlertIcon className="size-4" />,
error: <OctagonXIcon className="size-4" />,
loading: <Loader2Icon className="size-4 animate-spin" />,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast: "cn-toast",
},
}}
{...props}
/>
)
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
success: (
<CircleCheckIcon className="size-4" />
),
info: (
<InfoIcon className="size-4" />
),
warning: (
<TriangleAlertIcon className="size-4" />
),
error: (
<OctagonXIcon className="size-4" />
),
loading: (
<Loader2Icon className="size-4 animate-spin" />
),
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast: "cn-toast",
},
}}
{...props}
/>
)
}
export { Toaster }

View File

@@ -1,33 +1,33 @@
"use client"
import { Switch as SwitchPrimitive } from "radix-ui"
import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Switch({
className,
size = "default",
...props
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
size?: "sm" | "default"
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
className,
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
/>
</SwitchPrimitive.Root>
)
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
/>
</SwitchPrimitive.Root>
)
}
export { Switch }

View File

@@ -1,53 +1,57 @@
"use client"
import { Tooltip as TooltipPrimitive } from "radix-ui"
import * as React from "react"
import { Tooltip as TooltipPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function TooltipProvider({
delayDuration = 0,
...props
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
className,
sideOffset = 0,
children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
className,
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
className
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
}
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

View File

@@ -3,17 +3,17 @@ import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return !!isMobile
return !!isMobile
}

View File

@@ -6,124 +6,124 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.511 0.096 186.391);
--primary-foreground: oklch(0.984 0.014 180.72);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.855 0.138 181.071);
--chart-2: oklch(0.704 0.14 182.503);
--chart-3: oklch(0.6 0.118 184.704);
--chart-4: oklch(0.511 0.096 186.391);
--chart-5: oklch(0.437 0.078 188.216);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.6 0.118 184.704);
--sidebar-primary-foreground: oklch(0.984 0.014 180.72);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.511 0.096 186.391);
--primary-foreground: oklch(0.984 0.014 180.72);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.855 0.138 181.071);
--chart-2: oklch(0.704 0.14 182.503);
--chart-3: oklch(0.6 0.118 184.704);
--chart-4: oklch(0.511 0.096 186.391);
--chart-5: oklch(0.437 0.078 188.216);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.6 0.118 184.704);
--sidebar-primary-foreground: oklch(0.984 0.014 180.72);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.437 0.078 188.216);
--primary-foreground: oklch(0.984 0.014 180.72);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.855 0.138 181.071);
--chart-2: oklch(0.704 0.14 182.503);
--chart-3: oklch(0.6 0.118 184.704);
--chart-4: oklch(0.511 0.096 186.391);
--chart-5: oklch(0.437 0.078 188.216);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.704 0.14 182.503);
--sidebar-primary-foreground: oklch(0.277 0.046 192.524);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.437 0.078 188.216);
--primary-foreground: oklch(0.984 0.014 180.72);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.855 0.138 181.071);
--chart-2: oklch(0.704 0.14 182.503);
--chart-3: oklch(0.6 0.118 184.704);
--chart-4: oklch(0.511 0.096 186.391);
--chart-5: oklch(0.437 0.078 188.216);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.704 0.14 182.503);
--sidebar-primary-foreground: oklch(0.277 0.046 192.524);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@theme inline {
--font-sans: "Inter Variable", sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
--font-sans: 'Inter Variable', sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground select-none;
}
html {
@apply font-sans;
}
}
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground select-none;
}
html {
@apply font-sans;
}
}

View File

@@ -1,273 +1,164 @@
import { getServerUrl } from "./server-url"
function apiBase() {
return `${getServerUrl()}/api/admin`
return `${getServerUrl()}/api/admin`
}
function serverBase() {
return `${getServerUrl()}/api`
return `${getServerUrl()}/api`
}
export interface ConfigFieldDef {
type: "string" | "number" | "select" | "multiselect"
label: string
required?: boolean
description?: string
secret?: boolean
defaultValue?: string | number | string[]
options?: { label: string; value: string }[]
type: "string" | "number" | "select"
label: string
required?: boolean
description?: string
secret?: boolean
defaultValue?: string | number
options?: { label: string; value: string }[]
}
export interface SourceDefinition {
id: string
name: string
description: string
alwaysEnabled?: boolean
/** When true, secret fields are stored as per-user credentials via /api/sources/:id/credentials. */
perUserCredentials?: boolean
fields: Record<string, ConfigFieldDef>
id: string
name: string
description: string
alwaysEnabled?: boolean
fields: Record<string, ConfigFieldDef>
}
export interface SourceConfig {
sourceId: string
enabled: boolean
config: Record<string, unknown>
sourceId: string
enabled: boolean
config: Record<string, unknown>
}
const sourceDefinitions: SourceDefinition[] = [
{
id: "aelis.location",
name: "Location",
description: "Device location provider. Always enabled as a dependency for other sources.",
alwaysEnabled: true,
fields: {},
},
{
id: "aelis.weather",
name: "WeatherKit",
description: "Apple WeatherKit weather data. Requires Apple Developer credentials.",
fields: {
privateKey: {
type: "string",
label: "Private Key",
required: true,
secret: true,
description: "Apple WeatherKit private key (PEM format)",
},
keyId: { type: "string", label: "Key ID", required: true, secret: true },
teamId: { type: "string", label: "Team ID", required: true, secret: true },
serviceId: { type: "string", label: "Service ID", required: true, secret: true },
units: {
type: "select",
label: "Units",
options: [
{ label: "Metric", value: "metric" },
{ label: "Imperial", value: "imperial" },
],
defaultValue: "metric",
},
hourlyLimit: {
type: "number",
label: "Hourly Forecast Limit",
defaultValue: 12,
description: "Number of hourly forecasts to include",
},
dailyLimit: {
type: "number",
label: "Daily Forecast Limit",
defaultValue: 7,
description: "Number of daily forecasts to include",
},
},
},
{
id: "aelis.caldav",
name: "CalDAV",
description: "Calendar events from any CalDAV server (Nextcloud, Radicale, Baikal, etc.).",
perUserCredentials: true,
fields: {
serverUrl: {
type: "string",
label: "Server URL",
required: true,
secret: false,
description: "CalDAV server URL (e.g. https://nextcloud.example.com/remote.php/dav)",
},
username: {
type: "string",
label: "Username",
required: true,
secret: false,
},
password: {
type: "string",
label: "Password",
required: true,
secret: true,
},
lookAheadDays: {
type: "number",
label: "Look-ahead Days",
defaultValue: 0,
description: "Number of additional days beyond today to fetch events for",
},
timeZone: {
type: "string",
label: "Timezone",
description: 'IANA timezone for determining "today" (e.g. Europe/London). Defaults to UTC.',
},
},
},
{
id: "aelis.tfl",
name: "TfL",
description: "Transport for London tube line status alerts.",
fields: {
lines: {
type: "multiselect",
label: "Lines",
description: "Lines to monitor. Leave empty for all lines.",
defaultValue: [],
options: [
{ label: "Bakerloo", value: "bakerloo" },
{ label: "Central", value: "central" },
{ label: "Circle", value: "circle" },
{ label: "District", value: "district" },
{ label: "Hammersmith & City", value: "hammersmith-city" },
{ label: "Jubilee", value: "jubilee" },
{ label: "Metropolitan", value: "metropolitan" },
{ label: "Northern", value: "northern" },
{ label: "Piccadilly", value: "piccadilly" },
{ label: "Victoria", value: "victoria" },
{ label: "Waterloo & City", value: "waterloo-city" },
{ label: "Lioness", value: "lioness" },
{ label: "Mildmay", value: "mildmay" },
{ label: "Windrush", value: "windrush" },
{ label: "Weaver", value: "weaver" },
{ label: "Suffragette", value: "suffragette" },
{ label: "Liberty", value: "liberty" },
{ label: "Elizabeth", value: "elizabeth" },
],
},
},
},
{
id: "aelis.location",
name: "Location",
description: "Device location provider. Always enabled as a dependency for other sources.",
alwaysEnabled: true,
fields: {},
},
{
id: "aelis.weather",
name: "WeatherKit",
description: "Apple WeatherKit weather data. Requires Apple Developer credentials.",
fields: {
privateKey: { type: "string", label: "Private Key", required: true, secret: true, description: "Apple WeatherKit private key (PEM format)" },
keyId: { type: "string", label: "Key ID", required: true, secret: true },
teamId: { type: "string", label: "Team ID", required: true, secret: true },
serviceId: { type: "string", label: "Service ID", required: true, secret: true },
units: { type: "select", label: "Units", options: [{ label: "Metric", value: "metric" }, { label: "Imperial", value: "imperial" }], defaultValue: "metric" },
hourlyLimit: { type: "number", label: "Hourly Forecast Limit", defaultValue: 12, description: "Number of hourly forecasts to include" },
dailyLimit: { type: "number", label: "Daily Forecast Limit", defaultValue: 7, description: "Number of daily forecasts to include" },
},
},
]
export function fetchSources(): Promise<SourceDefinition[]> {
return Promise.resolve(sourceDefinitions)
return Promise.resolve(sourceDefinitions)
}
export async function fetchSourceConfig(sourceId: string): Promise<SourceConfig | null> {
const res = await fetch(`${serverBase()}/sources/${sourceId}`, {
credentials: "include",
})
if (res.status === 404) return null
if (!res.ok) throw new Error(`Failed to fetch source config: ${res.status}`)
const data = (await res.json()) as { enabled: boolean; config: Record<string, unknown> }
return { sourceId, enabled: data.enabled, config: data.config }
export async function fetchSourceConfig(
sourceId: string,
): Promise<SourceConfig | null> {
const res = await fetch(`${serverBase()}/sources/${sourceId}`, {
credentials: "include",
})
if (res.status === 404) return null
if (!res.ok) throw new Error(`Failed to fetch source config: ${res.status}`)
const data = (await res.json()) as { enabled: boolean; config: Record<string, unknown> }
return { sourceId, enabled: data.enabled, config: data.config }
}
export async function fetchConfigs(): Promise<SourceConfig[]> {
const results = await Promise.all(sourceDefinitions.map((s) => fetchSourceConfig(s.id)))
return results.filter((c): c is SourceConfig => c !== null)
const results = await Promise.all(
sourceDefinitions.map((s) => fetchSourceConfig(s.id)),
)
return results.filter((c): c is SourceConfig => c !== null)
}
export async function replaceSource(
sourceId: string,
body: { enabled: boolean; config: unknown; credentials?: Record<string, unknown> },
sourceId: string,
body: { enabled: boolean; config: unknown },
): Promise<void> {
const res = await fetch(`${serverBase()}/sources/${sourceId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(body),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to replace source config: ${res.status}`)
}
const res = await fetch(`${serverBase()}/sources/${sourceId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(body),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to replace source config: ${res.status}`)
}
}
export async function updateProviderConfig(
sourceId: string,
body: Record<string, unknown>,
sourceId: string,
body: Record<string, unknown>,
): Promise<void> {
const res = await fetch(`${apiBase()}/${sourceId}/config`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(body),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to update provider config: ${res.status}`)
}
}
export async function updateSourceCredentials(
sourceId: string,
credentials: Record<string, unknown>,
): Promise<void> {
const res = await fetch(`${serverBase()}/sources/${sourceId}/credentials`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(credentials),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to update credentials: ${res.status}`)
}
const res = await fetch(`${apiBase()}/${sourceId}/config`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(body),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to update provider config: ${res.status}`)
}
}
export interface LocationInput {
lat: number
lng: number
accuracy: number
lat: number
lng: number
accuracy: number
}
export async function pushLocation(location: LocationInput): Promise<void> {
const res = await fetch(`${serverBase()}/location`, {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({
...location,
timestamp: new Date().toISOString(),
}),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to push location: ${res.status}`)
}
const res = await fetch(`${serverBase()}/location`, {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({
...location,
timestamp: new Date().toISOString(),
}),
})
if (!res.ok) {
const data = (await res.json()) as { error?: string }
throw new Error(data.error ?? `Failed to push location: ${res.status}`)
}
}
export interface FeedItemSlot {
description: string
content: string | null
description: string
content: string | null
}
export interface FeedItem {
id: string
sourceId: string
type: string
timestamp: string
data: Record<string, unknown>
signals?: {
urgency?: number
timeRelevance?: string
}
slots?: Record<string, FeedItemSlot>
ui?: unknown
id: string
sourceId: string
type: string
timestamp: string
data: Record<string, unknown>
signals?: {
urgency?: number
timeRelevance?: string
}
slots?: Record<string, FeedItemSlot>
ui?: unknown
}
export interface FeedResponse {
items: FeedItem[]
errors: { sourceId: string; error: string }[]
items: FeedItem[]
errors: { sourceId: string; error: string }[]
}
export async function fetchFeed(): Promise<FeedResponse> {
const res = await fetch(`${serverBase()}/feed`, { credentials: "include" })
if (!res.ok) throw new Error(`Failed to fetch feed: ${res.status}`)
return res.json() as Promise<FeedResponse>
const res = await fetch(`${serverBase()}/feed`, { credentials: "include" })
if (!res.ok) throw new Error(`Failed to fetch feed: ${res.status}`)
return res.json() as Promise<FeedResponse>
}

View File

@@ -1,47 +1,47 @@
import { getServerUrl } from "./server-url"
function authBase() {
return `${getServerUrl()}/api/auth`
return `${getServerUrl()}/api/auth`
}
export interface AuthUser {
id: string
name: string
email: string
image: string | null
id: string
name: string
email: string
image: string | null
}
export interface AuthSession {
user: AuthUser
session: { id: string; token: string }
user: AuthUser
session: { id: string; token: string }
}
export async function getSession(): Promise<AuthSession | null> {
const res = await fetch(`${authBase()}/get-session`, {
credentials: "include",
})
if (!res.ok) return null
const data = (await res.json()) as AuthSession | null
return data
const res = await fetch(`${authBase()}/get-session`, {
credentials: "include",
})
if (!res.ok) return null
const data = (await res.json()) as AuthSession | null
return data
}
export async function signIn(email: string, password: string): Promise<AuthSession> {
const res = await fetch(`${authBase()}/sign-in/email`, {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ email, password }),
})
if (!res.ok) {
const data = (await res.json()) as { message?: string }
throw new Error(data.message ?? `Sign in failed: ${res.status}`)
}
return (await res.json()) as AuthSession
const res = await fetch(`${authBase()}/sign-in/email`, {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ email, password }),
})
if (!res.ok) {
const data = (await res.json()) as { message?: string }
throw new Error(data.message ?? `Sign in failed: ${res.status}`)
}
return (await res.json()) as AuthSession
}
export async function signOut(): Promise<void> {
await fetch(`${authBase()}/sign-out`, {
method: "POST",
credentials: "include",
})
await fetch(`${authBase()}/sign-out`, {
method: "POST",
credentials: "include",
})
}

View File

@@ -2,9 +2,9 @@ const STORAGE_KEY = "aelis-server-url"
const DEFAULT_URL = "https://3000--019cf276-6ed6-7529-a425-210182693908.eu-runner.flex.doptig.cloud"
export function getServerUrl(): string {
return localStorage.getItem(STORAGE_KEY) ?? DEFAULT_URL
return localStorage.getItem(STORAGE_KEY) ?? DEFAULT_URL
}
export function setServerUrl(url: string): void {
localStorage.setItem(STORAGE_KEY, url.replace(/\/+$/, ""))
localStorage.setItem(STORAGE_KEY, url.replace(/\/+$/, ""))
}

View File

@@ -2,5 +2,5 @@ import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs))
}

View File

@@ -3,27 +3,26 @@ import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import "./index.css"
import App from "./App.tsx"
import { ThemeProvider } from "@/components/theme-provider.tsx"
import { Toaster } from "@/components/ui/sonner.tsx"
import App from "./App.tsx"
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},
})
createRoot(document.getElementById("root")!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<App />
<Toaster />
</ThemeProvider>
</QueryClientProvider>
</StrictMode>,
<StrictMode>
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<App />
<Toaster />
</ThemeProvider>
</QueryClientProvider>
</StrictMode>
)

View File

@@ -1,11 +1,15 @@
import { Route as rootRoute } from "./routes/__root"
import { Route as dashboardRoute } from "./routes/_dashboard"
import { Route as dashboardFeedRoute } from "./routes/_dashboard/feed"
import { Route as dashboardIndexRoute } from "./routes/_dashboard/index"
import { Route as dashboardSourceRoute } from "./routes/_dashboard/sources.$sourceId"
import { Route as loginRoute } from "./routes/login"
import { Route as dashboardRoute } from "./routes/_dashboard"
import { Route as dashboardIndexRoute } from "./routes/_dashboard/index"
import { Route as dashboardFeedRoute } from "./routes/_dashboard/feed"
import { Route as dashboardSourceRoute } from "./routes/_dashboard/sources.$sourceId"
export const routeTree = rootRoute.addChildren([
loginRoute,
dashboardRoute.addChildren([dashboardIndexRoute, dashboardFeedRoute, dashboardSourceRoute]),
loginRoute,
dashboardRoute.addChildren([
dashboardIndexRoute,
dashboardFeedRoute,
dashboardSourceRoute,
]),
])

View File

@@ -1,15 +1,13 @@
import type { QueryClient } from "@tanstack/react-query"
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router"
import type { QueryClient } from "@tanstack/react-query"
import { TooltipProvider } from "@/components/ui/tooltip"
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
component: function RootLayout() {
return (
<TooltipProvider>
<Outlet />
</TooltipProvider>
)
},
component: function RootLayout() {
return (
<TooltipProvider>
<Outlet />
</TooltipProvider>
)
},
})

View File

@@ -1,219 +1,206 @@
import { createRoute, Outlet, redirect, useMatchRoute, useNavigate, Link } from "@tanstack/react-router"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import {
createRoute,
Outlet,
redirect,
useMatchRoute,
useNavigate,
Link,
} from "@tanstack/react-router"
import {
Calendar,
CalendarDays,
CircleDot,
CloudSun,
Loader2,
TrainFront,
LogOut,
MapPin,
Rss,
Server,
TriangleAlert,
Calendar,
CalendarDays,
CircleDot,
CloudSun,
Loader2,
LogOut,
MapPin,
Rss,
Server,
TriangleAlert,
} from "lucide-react"
import { fetchConfigs, fetchSources } from "@/lib/api"
import { getSession, signOut } from "@/lib/auth"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar"
import { fetchConfigs, fetchSources } from "@/lib/api"
import { getSession, signOut } from "@/lib/auth"
import { Route as rootRoute } from "./__root"
const SOURCE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
"aelis.location": MapPin,
"aelis.weather": CloudSun,
"aelis.caldav": CalendarDays,
"aelis.google-calendar": Calendar,
"aelis.tfl": TrainFront,
"aelis.location": MapPin,
"aelis.weather": CloudSun,
"aelis.caldav": CalendarDays,
"aelis.google-calendar": Calendar,
}
export const Route = createRoute({
getParentRoute: () => rootRoute,
id: "dashboard",
beforeLoad: async ({ context }) => {
let session: Awaited<ReturnType<typeof getSession>> | null = null
try {
session = await context.queryClient.ensureQueryData({
queryKey: ["session"],
queryFn: getSession,
})
} catch {
throw redirect({ to: "/login" })
}
if (!session?.user) {
throw redirect({ to: "/login" })
}
return { user: session.user }
},
component: DashboardLayout,
pendingComponent: () => (
<div className="flex min-h-svh items-center justify-center">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
),
getParentRoute: () => rootRoute,
id: "dashboard",
beforeLoad: async ({ context }) => {
let session: Awaited<ReturnType<typeof getSession>> | null = null
try {
session = await context.queryClient.ensureQueryData({
queryKey: ["session"],
queryFn: getSession,
})
} catch {
throw redirect({ to: "/login" })
}
if (!session?.user) {
throw redirect({ to: "/login" })
}
return { user: session.user }
},
component: DashboardLayout,
pendingComponent: () => (
<div className="flex min-h-svh items-center justify-center">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
),
})
function DashboardLayout() {
const { user } = Route.useRouteContext()
const navigate = useNavigate()
const queryClient = useQueryClient()
const matchRoute = useMatchRoute()
const { user } = Route.useRouteContext()
const navigate = useNavigate()
const queryClient = useQueryClient()
const matchRoute = useMatchRoute()
const { data: sources = [] } = useQuery({
queryKey: ["sources"],
queryFn: fetchSources,
})
const { data: sources = [] } = useQuery({
queryKey: ["sources"],
queryFn: fetchSources,
})
const {
data: configs = [],
error: configsError,
refetch: refetchConfigs,
} = useQuery({
queryKey: ["configs"],
queryFn: fetchConfigs,
})
const {
data: configs = [],
error: configsError,
refetch: refetchConfigs,
} = useQuery({
queryKey: ["configs"],
queryFn: fetchConfigs,
})
const logoutMutation = useMutation({
mutationFn: signOut,
onSuccess() {
queryClient.setQueryData(["session"], null)
queryClient.clear()
navigate({ to: "/login" })
},
})
const logoutMutation = useMutation({
mutationFn: signOut,
onSuccess() {
queryClient.setQueryData(["session"], null)
queryClient.clear()
navigate({ to: "/login" })
},
})
const error = configsError?.message ?? null
const configMap = new Map(configs.map((c) => [c.sourceId, c]))
const error = configsError?.message ?? null
const configMap = new Map(configs.map((c) => [c.sourceId, c]))
return (
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<div className="flex items-center justify-between px-2 py-1">
<div className="min-w-0">
<p className="truncate text-sm font-medium">{user.name}</p>
<p className="truncate text-xs text-muted-foreground">{user.email}</p>
</div>
<Button
variant="ghost"
size="icon"
className="size-7 shrink-0"
onClick={() => logoutMutation.mutate()}
>
<LogOut className="size-3.5" />
</Button>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>General</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive={!!matchRoute({ to: "/" })} asChild>
<Link to="/">
<Server className="size-4" />
<span>Server</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton isActive={!!matchRoute({ to: "/feed" })} asChild>
<Link to="/feed">
<Rss className="size-4" />
<span>Feed</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
return (
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<div className="flex items-center justify-between px-2 py-1">
<div className="min-w-0">
<p className="truncate text-sm font-medium">{user.name}</p>
<p className="truncate text-xs text-muted-foreground">{user.email}</p>
</div>
<Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={() => logoutMutation.mutate()}>
<LogOut className="size-3.5" />
</Button>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>General</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
isActive={!!matchRoute({ to: "/" })}
asChild
>
<Link to="/">
<Server className="size-4" />
<span>Server</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton
isActive={!!matchRoute({ to: "/feed" })}
asChild
>
<Link to="/feed">
<Rss className="size-4" />
<span>Feed</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Sources</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{sources.map((source) => {
const Icon = SOURCE_ICONS[source.id] ?? CircleDot
const cfg = configMap.get(source.id)
const isEnabled = source.alwaysEnabled || cfg?.enabled
return (
<SidebarMenuItem key={source.id}>
<SidebarMenuButton
isActive={
!!matchRoute({
to: "/sources/$sourceId",
params: { sourceId: source.id },
})
}
asChild
>
<Link to="/sources/$sourceId" params={{ sourceId: source.id }}>
<Icon className="size-4" />
<span>{source.name}</span>
</Link>
</SidebarMenuButton>
{isEnabled && (
<SidebarMenuBadge>
<CircleDot className="size-2.5 text-primary" />
</SidebarMenuBadge>
)}
</SidebarMenuItem>
)
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarGroup>
<SidebarGroupLabel>Sources</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{sources.map((source) => {
const Icon = SOURCE_ICONS[source.id] ?? CircleDot
const cfg = configMap.get(source.id)
const isEnabled = source.alwaysEnabled || cfg?.enabled
return (
<SidebarMenuItem key={source.id}>
<SidebarMenuButton
isActive={!!matchRoute({ to: "/sources/$sourceId", params: { sourceId: source.id } })}
asChild
>
<Link to="/sources/$sourceId" params={{ sourceId: source.id }}>
<Icon className="size-4" />
<span>{source.name}</span>
</Link>
</SidebarMenuButton>
{isEnabled && (
<SidebarMenuBadge>
<CircleDot className="size-2.5 text-primary" />
</SidebarMenuBadge>
)}
</SidebarMenuItem>
)
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 !h-4" />
</header>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 !h-4" />
</header>
<main className="flex-1 p-6">
{error && (
<Alert variant="destructive" className="mb-6">
<TriangleAlert className="size-4" />
<AlertDescription className="flex items-center justify-between">
<span>{error}</span>
<Button variant="ghost" size="sm" onClick={() => refetchConfigs()}>
Retry
</Button>
</AlertDescription>
</Alert>
)}
<main className="flex-1 p-6">
{error && (
<Alert variant="destructive" className="mb-6">
<TriangleAlert className="size-4" />
<AlertDescription className="flex items-center justify-between">
<span>{error}</span>
<Button variant="ghost" size="sm" onClick={() => refetchConfigs()}>
Retry
</Button>
</AlertDescription>
</Alert>
)}
<Outlet />
</main>
</SidebarInset>
</SidebarProvider>
)
<Outlet />
</main>
</SidebarInset>
</SidebarProvider>
)
}

View File

@@ -1,11 +1,10 @@
import { createRoute } from "@tanstack/react-router"
import { FeedPanel } from "@/components/feed-panel"
import { Route as dashboardRoute } from "../_dashboard"
export const Route = createRoute({
getParentRoute: () => dashboardRoute,
path: "/feed",
component: FeedPanel,
getParentRoute: () => dashboardRoute,
path: "/feed",
component: FeedPanel,
})

View File

@@ -1,11 +1,10 @@
import { createRoute } from "@tanstack/react-router"
import { GeneralSettingsPanel } from "@/components/general-settings-panel"
import { Route as dashboardRoute } from "../_dashboard"
export const Route = createRoute({
getParentRoute: () => dashboardRoute,
path: "/",
component: GeneralSettingsPanel,
getParentRoute: () => dashboardRoute,
path: "/",
component: GeneralSettingsPanel,
})

View File

@@ -1,35 +1,34 @@
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { createRoute } from "@tanstack/react-router"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { SourceConfigPanel } from "@/components/source-config-panel"
import { fetchSources } from "@/lib/api"
import { SourceConfigPanel } from "@/components/source-config-panel"
import { Route as dashboardRoute } from "../_dashboard"
export const Route = createRoute({
getParentRoute: () => dashboardRoute,
path: "/sources/$sourceId",
component: SourceRoute,
getParentRoute: () => dashboardRoute,
path: "/sources/$sourceId",
component: SourceRoute,
})
function SourceRoute() {
const { sourceId } = Route.useParams()
const queryClient = useQueryClient()
const { data: sources = [] } = useQuery({
queryKey: ["sources"],
queryFn: fetchSources,
})
const source = sources.find((s) => s.id === sourceId)
const { sourceId } = Route.useParams()
const queryClient = useQueryClient()
const { data: sources = [] } = useQuery({
queryKey: ["sources"],
queryFn: fetchSources,
})
const source = sources.find((s) => s.id === sourceId)
if (!source) {
return <p className="text-sm text-muted-foreground">Source not found.</p>
}
if (!source) {
return <p className="text-sm text-muted-foreground">Source not found.</p>
}
return (
<SourceConfigPanel
key={source.id}
source={source}
onUpdate={() => queryClient.invalidateQueries({ queryKey: ["configs"] })}
/>
)
return (
<SourceConfigPanel
key={source.id}
source={source}
onUpdate={() => queryClient.invalidateQueries({ queryKey: ["configs"] })}
/>
)
}

View File

@@ -1,24 +1,22 @@
import { useQueryClient } from "@tanstack/react-query"
import { createRoute, useNavigate } from "@tanstack/react-router"
import { useQueryClient } from "@tanstack/react-query"
import type { AuthSession } from "@/lib/auth"
import { LoginPage } from "@/components/login-page"
import { Route as rootRoute } from "./__root"
export const Route = createRoute({
getParentRoute: () => rootRoute,
path: "/login",
component: function LoginRoute() {
const navigate = useNavigate()
const queryClient = useQueryClient()
getParentRoute: () => rootRoute,
path: "/login",
component: function LoginRoute() {
const navigate = useNavigate()
const queryClient = useQueryClient()
function handleLogin(session: AuthSession) {
queryClient.setQueryData(["session"], session)
navigate({ to: "/" })
}
function handleLogin(session: AuthSession) {
queryClient.setQueryData(["session"], session)
navigate({ to: "/" })
}
return <LoginPage onLogin={handleLogin} />
},
return <LoginPage onLogin={handleLogin} />
},
})

View File

@@ -1,29 +1,32 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM"],
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}

View File

@@ -1,9 +1,13 @@
{
"files": [],
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

View File

@@ -1,24 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"types": ["node"],
"skipLibCheck": true,
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"types": ["node"],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

View File

@@ -1,18 +1,18 @@
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import path from "path"
import { defineConfig } from "vite"
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 5174,
allowedHosts: true,
},
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 5174,
allowedHosts: true,
},
})

View File

@@ -5,7 +5,7 @@ DATABASE_URL=postgresql://user:password@localhost:5432/aris
BETTER_AUTH_SECRET=
# Encryption key for source credentials at rest (32 bytes, generate with: openssl rand -base64 32)
CREDENTIAL_ENCRYPTION_KEY=
CREDENTIALS_ENCRYPTION_KEY=
# Base URL of the backend
BETTER_AUTH_URL=http://localhost:3000

View File

@@ -4,7 +4,7 @@
"type": "module",
"main": "src/server.ts",
"scripts": {
"dev": "bun run --watch --inspect=0.0.0.0:6499 src/server.ts",
"dev": "bun run --watch src/server.ts",
"start": "bun run src/server.ts",
"test": "bun test src/",
"db:generate": "bunx drizzle-kit generate",

View File

@@ -1,5 +1,5 @@
import { describe, expect, test } from "bun:test"
import { Hono } from "hono"
import { describe, expect, test } from "bun:test"
import type { Auth } from "./index.ts"
import type { AuthSession, AuthUser } from "./session.ts"

View File

@@ -1,85 +0,0 @@
import { describe, expect, test } from "bun:test"
import { CalDavSourceProvider } from "./provider.ts"
describe("CalDavSourceProvider", () => {
const provider = new CalDavSourceProvider()
test("sourceId is aelis.caldav", () => {
expect(provider.sourceId).toBe("aelis.caldav")
})
test("throws when credentials are null", async () => {
const config = { serverUrl: "https://caldav.icloud.com", username: "user@icloud.com" }
await expect(provider.feedSourceForUser("user-1", config, null)).rejects.toThrow(
"No CalDAV credentials configured",
)
})
test("throws when credentials are missing password", async () => {
const config = { serverUrl: "https://caldav.icloud.com", username: "user@icloud.com" }
await expect(provider.feedSourceForUser("user-1", config, {})).rejects.toThrow(
"password must be a string",
)
})
test("throws when config is missing serverUrl", async () => {
const credentials = { password: "app-specific-password" }
await expect(
provider.feedSourceForUser("user-1", { username: "user@icloud.com" }, credentials),
).rejects.toThrow("Invalid CalDAV config")
})
test("throws when config is missing username", async () => {
const credentials = { password: "app-specific-password" }
await expect(
provider.feedSourceForUser("user-1", { serverUrl: "https://caldav.icloud.com" }, credentials),
).rejects.toThrow("Invalid CalDAV config")
})
test("throws when config has extra keys", async () => {
const config = {
serverUrl: "https://caldav.icloud.com",
username: "user@icloud.com",
extra: true,
}
const credentials = { password: "app-specific-password" }
await expect(provider.feedSourceForUser("user-1", config, credentials)).rejects.toThrow(
"Invalid CalDAV config",
)
})
test("throws when credentials have extra keys", async () => {
const config = { serverUrl: "https://caldav.icloud.com", username: "user@icloud.com" }
const credentials = { password: "app-specific-password", extra: true }
await expect(provider.feedSourceForUser("user-1", config, credentials)).rejects.toThrow(
"extra must be removed",
)
})
test("returns CalDavSource with valid config and credentials", async () => {
const config = {
serverUrl: "https://caldav.icloud.com",
username: "user@icloud.com",
lookAheadDays: 3,
timeZone: "Europe/London",
}
const credentials = { password: "app-specific-password" }
const source = await provider.feedSourceForUser("user-1", config, credentials)
expect(source).toBeDefined()
expect(source.id).toBe("aelis.caldav")
})
test("returns CalDavSource with minimal config", async () => {
const config = {
serverUrl: "https://caldav.icloud.com",
username: "user@icloud.com",
}
const credentials = { password: "app-specific-password" }
const source = await provider.feedSourceForUser("user-1", config, credentials)
expect(source).toBeDefined()
expect(source.id).toBe("aelis.caldav")
})
})

View File

@@ -1,53 +0,0 @@
import { CalDavSource } from "@aelis/source-caldav"
import { type } from "arktype"
import type { FeedSourceProvider } from "../session/feed-source-provider.ts"
import { InvalidSourceCredentialsError } from "../sources/errors.ts"
const caldavConfig = type({
"+": "reject",
serverUrl: "string",
username: "string",
"lookAheadDays?": "number",
"timeZone?": "string",
})
const caldavCredentials = type({
"+": "reject",
password: "string",
})
export class CalDavSourceProvider implements FeedSourceProvider {
readonly sourceId = "aelis.caldav"
readonly configSchema = caldavConfig
async feedSourceForUser(
_userId: string,
config: unknown,
credentials: unknown,
): Promise<CalDavSource> {
const parsed = caldavConfig(config)
if (parsed instanceof type.errors) {
throw new Error(`Invalid CalDAV config: ${parsed.summary}`)
}
if (!credentials) {
throw new InvalidSourceCredentialsError("aelis.caldav", "No CalDAV credentials configured")
}
const creds = caldavCredentials(credentials)
if (creds instanceof type.errors) {
throw new InvalidSourceCredentialsError("aelis.caldav", creds.summary)
}
return new CalDavSource({
serverUrl: parsed.serverUrl,
authMethod: "basic",
username: parsed.username,
password: creds.password,
lookAheadDays: parsed.lookAheadDays,
timeZone: parsed.timeZone,
})
}
}

View File

@@ -1,12 +1,9 @@
import type { PgDatabase } from "drizzle-orm/pg-core"
import { SQL } from "bun"
import { drizzle, type BunSQLQueryResultHKT } from "drizzle-orm/bun-sql"
import { drizzle, type BunSQLDatabase } from "drizzle-orm/bun-sql"
import * as schema from "./schema.ts"
/** Covers both the top-level drizzle instance and transaction handles. */
export type Database = PgDatabase<BunSQLQueryResultHKT, typeof schema>
export type Database = BunSQLDatabase<typeof schema>
export interface DatabaseConnection {
db: Database

View File

@@ -47,3 +47,5 @@ export function createFeedEnhancer(config: FeedEnhancerConfig): FeedEnhancer {
return mergeEnhancement(items, result, currentTime)
}
}

View File

@@ -4,7 +4,7 @@ import type { EnhancementResult } from "./schema.ts"
import { enhancementResultJsonSchema, parseEnhancementResult } from "./schema.ts"
const DEFAULT_MODEL = "z-ai/glm-4.7-flash"
const DEFAULT_MODEL = "openai/gpt-4.1-mini"
const DEFAULT_TIMEOUT_MS = 30_000
export interface LlmClientConfig {
@@ -46,7 +46,7 @@ export function createLlmClient(config: LlmClientConfig): LlmClient {
type: "json_schema" as const,
jsonSchema: {
name: "enhancement_result",
strict: false,
strict: true,
schema: enhancementResultJsonSchema,
},
},

View File

@@ -36,7 +36,8 @@ export function buildPrompt(
for (const item of items) {
const hasUnfilledSlots =
item.slots && Object.values(item.slots).some((slot) => slot.content === null)
item.slots &&
Object.values(item.slots).some((slot) => slot.content === null)
if (hasUnfilledSlots) {
enhanceItems.push({
@@ -78,7 +79,9 @@ export function buildPrompt(
*/
export function hasUnfilledSlots(items: FeedItem[]): boolean {
return items.some(
(item) => item.slots && Object.values(item.slots).some((slot) => slot.content === null),
(item) =>
item.slots &&
Object.values(item.slots).some((slot) => slot.content === null),
)
}
@@ -126,20 +129,7 @@ function extractCalendarEntry(item: FeedItem): CalendarEntry | null {
}
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const
const MONTHS = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
] as const
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const
function pad2(n: number): string {
return n.toString().padStart(2, "0")
@@ -154,11 +144,7 @@ function formatDayShort(date: Date): string {
}
function formatDayLabel(date: Date, currentTime: Date): string {
const currentDay = Date.UTC(
currentTime.getUTCFullYear(),
currentTime.getUTCMonth(),
currentTime.getUTCDate(),
)
const currentDay = Date.UTC(currentTime.getUTCFullYear(), currentTime.getUTCMonth(), currentTime.getUTCDate())
const targetDay = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
const diffDays = Math.round((targetDay - currentDay) / (1000 * 60 * 60 * 24))

View File

@@ -135,7 +135,9 @@ describe("schema sync", () => {
// JSON Schema structure matches
const jsonSchema = enhancementResultJsonSchema
expect(Object.keys(jsonSchema.properties).sort()).toEqual(Object.keys(payload).sort())
expect(Object.keys(jsonSchema.properties).sort()).toEqual(
Object.keys(payload).sort(),
)
expect([...jsonSchema.required].sort()).toEqual(Object.keys(payload).sort())
// syntheticItems item schema has the right required fields
@@ -164,8 +166,11 @@ describe("schema sync", () => {
expect(parseEnhancementResult(JSON.stringify(bad))).toBeNull()
// JSON Schema only allows string or null for slot values
const slotValueSchema =
enhancementResultJsonSchema.properties.slotFills.additionalProperties.additionalProperties
expect(slotValueSchema.anyOf).toEqual([{ type: "string" }, { type: "null" }])
const slotValueTypes =
enhancementResultJsonSchema.properties.slotFills.additionalProperties
.additionalProperties.type
expect(slotValueTypes).toContain("string")
expect(slotValueTypes).toContain("null")
expect(slotValueTypes).not.toContain("number")
})
})

View File

@@ -31,7 +31,7 @@ export const enhancementResultJsonSchema = {
additionalProperties: {
type: "object",
additionalProperties: {
anyOf: [{ type: "string" }, { type: "null" }],
type: ["string", "null"],
},
},
},

View File

@@ -1,5 +1,5 @@
import { describe, expect, test } from "bun:test"
import { randomBytes } from "node:crypto"
import { describe, expect, test } from "bun:test"
import { CredentialEncryptor } from "./crypto.ts"

View File

@@ -5,11 +5,7 @@ import type { FeedSourceProvider } from "../session/feed-source-provider.ts"
export class LocationSourceProvider implements FeedSourceProvider {
readonly sourceId = "aelis.location"
async feedSourceForUser(
_userId: string,
_config: unknown,
_credentials: unknown,
): Promise<LocationSource> {
async feedSourceForUser(_userId: string, _config: unknown): Promise<LocationSource> {
return new LocationSource()
}
}

View File

@@ -6,17 +6,14 @@ import { createRequireAdmin } from "./auth/admin-middleware.ts"
import { registerAuthHandlers } from "./auth/http.ts"
import { createAuth } from "./auth/index.ts"
import { createRequireSession } from "./auth/session-middleware.ts"
import { CalDavSourceProvider } from "./caldav/provider.ts"
import { createDatabase } from "./db/index.ts"
import { registerFeedHttpHandlers } from "./engine/http.ts"
import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
import { createLlmClient } from "./enhancement/llm-client.ts"
import { CredentialEncryptor } from "./lib/crypto.ts"
import { registerLocationHttpHandlers } from "./location/http.ts"
import { LocationSourceProvider } from "./location/provider.ts"
import { UserSessionManager } from "./session/index.ts"
import { registerSourcesHttpHandlers } from "./sources/http.ts"
import { TflSourceProvider } from "./tfl/provider.ts"
import { WeatherSourceProvider } from "./weather/provider.ts"
function main() {
@@ -36,20 +33,9 @@ function main() {
console.warn("[enhancement] OPENROUTER_API_KEY not set — feed enhancement disabled")
}
const credentialEncryptionKey = process.env.CREDENTIAL_ENCRYPTION_KEY
const credentialEncryptor = credentialEncryptionKey
? new CredentialEncryptor(credentialEncryptionKey)
: null
if (!credentialEncryptor) {
console.warn(
"[credentials] CREDENTIAL_ENCRYPTION_KEY not set — per-user credential storage disabled",
)
}
const sessionManager = new UserSessionManager({
db,
providers: [
new CalDavSourceProvider(),
new LocationSourceProvider(),
new WeatherSourceProvider({
credentials: {
@@ -59,10 +45,8 @@ function main() {
serviceId: process.env.WEATHERKIT_SERVICE_ID!,
},
}),
new TflSourceProvider({ apiKey: process.env.TFL_API_KEY! }),
],
feedEnhancer,
credentialEncryptor,
})
const app = new Hono()

View File

@@ -8,5 +8,5 @@ export interface FeedSourceProvider {
readonly sourceId: string
/** Arktype schema for validating user-provided config. Omit if the source has no config. */
readonly configSchema?: ConfigSchema
feedSourceForUser(userId: string, config: unknown, credentials: unknown): Promise<FeedSource>
feedSourceForUser(userId: string, config: unknown): Promise<FeedSource>
}

View File

@@ -7,12 +7,6 @@ import { beforeEach, describe, expect, mock, spyOn, test } from "bun:test"
import type { Database } from "../db/index.ts"
import type { FeedSourceProvider } from "./feed-source-provider.ts"
import { CredentialEncryptor } from "../lib/crypto.ts"
import {
CredentialStorageUnavailableError,
InvalidSourceCredentialsError,
} from "../sources/errors.ts"
import { SourceNotFoundError } from "../sources/errors.ts"
import { UserSessionManager } from "./user-session-manager.ts"
/**
@@ -44,13 +38,6 @@ function getEnabledSourceIds(userId: string): string[] {
*/
let mockFindResult: unknown | undefined
/**
* Spy for `updateCredentials` calls. Tests can inspect calls via
* `mockUpdateCredentialsCalls` or override behavior.
*/
const mockUpdateCredentialsCalls: Array<{ sourceId: string; credentials: Buffer }> = []
let mockUpdateCredentialsError: Error | null = null
// Mock the sources module so UserSessionManager's DB query returns controlled data.
mock.module("../sources/user-sources.ts", () => ({
sources: (_db: Database, userId: string) => ({
@@ -81,39 +68,10 @@ mock.module("../sources/user-sources.ts", () => ({
updatedAt: now,
}
},
async findForUpdate(sourceId: string) {
// Delegates to find — row locking is a no-op in tests.
if (mockFindResult !== undefined) return mockFindResult
const now = new Date()
return {
id: crypto.randomUUID(),
userId,
sourceId,
enabled: true,
config: {},
credentials: null,
createdAt: now,
updatedAt: now,
}
},
async updateConfig(_sourceId: string, _update: { enabled?: boolean; config?: unknown }) {
// no-op for tests
},
async upsertConfig(_sourceId: string, _data: { enabled: boolean; config: unknown }) {
// no-op for tests
},
async updateCredentials(sourceId: string, credentials: Buffer) {
if (mockUpdateCredentialsError) {
throw mockUpdateCredentialsError
}
mockUpdateCredentialsCalls.push({ sourceId, credentials })
},
}),
}))
const fakeDb = {
transaction: <T>(fn: (tx: unknown) => Promise<T>) => fn(fakeDb),
} as unknown as Database
const fakeDb = {} as Database
function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
return {
@@ -135,11 +93,8 @@ function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
function createStubProvider(
sourceId: string,
factory: (
userId: string,
config: Record<string, unknown>,
credentials: unknown,
) => Promise<FeedSource> = async () => createStubSource(sourceId),
factory: (userId: string, config: Record<string, unknown>) => Promise<FeedSource> = async () =>
createStubSource(sourceId),
): FeedSourceProvider {
return { sourceId, feedSourceForUser: factory }
}
@@ -161,8 +116,6 @@ const weatherProvider: FeedSourceProvider = {
beforeEach(() => {
enabledByUser.clear()
mockFindResult = undefined
mockUpdateCredentialsCalls.length = 0
mockUpdateCredentialsError = null
})
describe("UserSessionManager", () => {
@@ -728,240 +681,3 @@ describe("UserSessionManager.replaceProvider", () => {
expect(feedAfter.items[0]!.data.version).toBe(1)
})
})
const TEST_ENCRYPTION_KEY = "/bv1nbzC4ozZkT/pcv5oQfl+JAMuMZDUSVDesG2dur8="
const testEncryptor = new CredentialEncryptor(TEST_ENCRYPTION_KEY)
describe("UserSessionManager.updateSourceCredentials", () => {
test("encrypts and persists credentials", async () => {
setEnabledSources(["test"])
const provider = createStubProvider("test")
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
await manager.updateSourceCredentials("user-1", "test", { token: "secret-123" })
expect(mockUpdateCredentialsCalls).toHaveLength(1)
expect(mockUpdateCredentialsCalls[0]!.sourceId).toBe("test")
// Verify the persisted buffer decrypts to the original credentials
const decrypted = JSON.parse(testEncryptor.decrypt(mockUpdateCredentialsCalls[0]!.credentials))
expect(decrypted).toEqual({ token: "secret-123" })
})
test("throws CredentialStorageUnavailableError when encryptor is not configured", async () => {
setEnabledSources(["test"])
const provider = createStubProvider("test")
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
// no credentialEncryptor
})
await expect(
manager.updateSourceCredentials("user-1", "test", { token: "x" }),
).rejects.toBeInstanceOf(CredentialStorageUnavailableError)
})
test("throws SourceNotFoundError for unknown source", async () => {
setEnabledSources([])
const manager = new UserSessionManager({
db: fakeDb,
providers: [],
credentialEncryptor: testEncryptor,
})
await expect(
manager.updateSourceCredentials("user-1", "unknown", { token: "x" }),
).rejects.toBeInstanceOf(SourceNotFoundError)
})
test("propagates InvalidSourceCredentialsError from provider", async () => {
setEnabledSources(["test"])
let callCount = 0
const provider: FeedSourceProvider = {
sourceId: "test",
async feedSourceForUser(_userId: string, _config: unknown, _credentials: unknown) {
callCount++
// Succeed on first call (session creation), throw on refresh
if (callCount > 1) {
throw new InvalidSourceCredentialsError("test", "bad credentials")
}
return createStubSource("test")
},
}
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
// Create a session first so the refresh path is exercised
await manager.getOrCreate("user-1")
await expect(
manager.updateSourceCredentials("user-1", "test", { token: "bad" }),
).rejects.toBeInstanceOf(InvalidSourceCredentialsError)
// Credentials should still have been persisted before the provider threw
expect(mockUpdateCredentialsCalls).toHaveLength(1)
})
test("refreshes source in active session after credential update", async () => {
setEnabledSources(["test"])
let receivedCredentials: unknown = null
const provider = createStubProvider("test", async (_userId, _config, credentials) => {
receivedCredentials = credentials
return createStubSource("test")
})
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
await manager.getOrCreate("user-1")
await manager.updateSourceCredentials("user-1", "test", { token: "refreshed" })
expect(receivedCredentials).toEqual({ token: "refreshed" })
})
test("persists credentials without session refresh when no active session", async () => {
setEnabledSources(["test"])
const factory = mock(async () => createStubSource("test"))
const provider: FeedSourceProvider = { sourceId: "test", feedSourceForUser: factory }
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
// No session created — just update credentials
await manager.updateSourceCredentials("user-1", "test", { token: "stored" })
expect(mockUpdateCredentialsCalls).toHaveLength(1)
// feedSourceForUser should not have been called (no session to refresh)
expect(factory).not.toHaveBeenCalled()
})
})
describe("UserSessionManager.saveSourceConfig", () => {
test("upserts config without credentials (existing behavior)", async () => {
setEnabledSources(["test"])
const factory = mock(async () => createStubSource("test"))
const provider: FeedSourceProvider = { sourceId: "test", feedSourceForUser: factory }
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
// Create a session first so we can verify the source is refreshed
await manager.getOrCreate("user-1")
await manager.saveSourceConfig("user-1", "test", {
enabled: true,
config: { key: "value" },
})
// feedSourceForUser called once for session creation, once for upsert refresh
expect(factory).toHaveBeenCalledTimes(2)
// No credentials should have been persisted
expect(mockUpdateCredentialsCalls).toHaveLength(0)
})
test("upserts config with credentials — persists both and passes credentials to source", async () => {
setEnabledSources(["test"])
let receivedCredentials: unknown = null
const factory = mock(async (_userId: string, _config: unknown, creds: unknown) => {
receivedCredentials = creds
return createStubSource("test")
})
const provider: FeedSourceProvider = { sourceId: "test", feedSourceForUser: factory }
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
// Create a session so the source refresh path runs
await manager.getOrCreate("user-1")
const creds = { username: "alice", password: "s3cret" }
await manager.saveSourceConfig("user-1", "test", {
enabled: true,
config: { serverUrl: "https://example.com" },
credentials: creds,
})
// Credentials were encrypted and persisted
expect(mockUpdateCredentialsCalls).toHaveLength(1)
const decrypted = JSON.parse(testEncryptor.decrypt(mockUpdateCredentialsCalls[0]!.credentials))
expect(decrypted).toEqual(creds)
// feedSourceForUser received the provided credentials (not null)
expect(receivedCredentials).toEqual(creds)
})
test("upserts config with credentials adds source to session when not already present", async () => {
// Start with no enabled sources so the session is empty
setEnabledSources([])
const factory = mock(async () => createStubSource("test"))
const provider: FeedSourceProvider = { sourceId: "test", feedSourceForUser: factory }
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
credentialEncryptor: testEncryptor,
})
const session = await manager.getOrCreate("user-1")
expect(session.hasSource("test")).toBe(false)
// Set mockFindResult to undefined so find() returns a row (simulating the row was just created by upsertConfig)
await manager.saveSourceConfig("user-1", "test", {
enabled: true,
config: {},
credentials: { token: "abc" },
})
// Source should now be in the session
expect(session.hasSource("test")).toBe(true)
expect(mockUpdateCredentialsCalls).toHaveLength(1)
})
test("throws CredentialStorageUnavailableError when credentials provided without encryptor", async () => {
setEnabledSources(["test"])
const provider = createStubProvider("test")
const manager = new UserSessionManager({
db: fakeDb,
providers: [provider],
// No credentialEncryptor
})
await expect(
manager.saveSourceConfig("user-1", "test", {
enabled: true,
config: {},
credentials: { token: "abc" },
}),
).rejects.toBeInstanceOf(CredentialStorageUnavailableError)
})
test("throws SourceNotFoundError for unknown provider", async () => {
const manager = new UserSessionManager({
db: fakeDb,
providers: [],
credentialEncryptor: testEncryptor,
})
await expect(
manager.saveSourceConfig("user-1", "unknown", {
enabled: true,
config: {},
}),
).rejects.toBeInstanceOf(SourceNotFoundError)
})
})

View File

@@ -5,14 +5,9 @@ import merge from "lodash.merge"
import type { Database } from "../db/index.ts"
import type { FeedEnhancer } from "../enhancement/enhance-feed.ts"
import type { CredentialEncryptor } from "../lib/crypto.ts"
import type { FeedSourceProvider } from "./feed-source-provider.ts"
import {
CredentialStorageUnavailableError,
InvalidSourceConfigError,
SourceNotFoundError,
} from "../sources/errors.ts"
import { InvalidSourceConfigError, SourceNotFoundError } from "../sources/errors.ts"
import { sources } from "../sources/user-sources.ts"
import { UserSession } from "./user-session.ts"
@@ -20,7 +15,6 @@ export interface UserSessionManagerConfig {
db: Database
providers: FeedSourceProvider[]
feedEnhancer?: FeedEnhancer | null
credentialEncryptor?: CredentialEncryptor | null
}
export class UserSessionManager {
@@ -29,7 +23,7 @@ export class UserSessionManager {
private readonly db: Database
private readonly providers = new Map<string, FeedSourceProvider>()
private readonly feedEnhancer: FeedEnhancer | null
private readonly encryptor: CredentialEncryptor | null
private readonly db: Database
constructor(config: UserSessionManagerConfig) {
this.db = config.db
@@ -37,7 +31,7 @@ export class UserSessionManager {
this.providers.set(provider.sourceId, provider)
}
this.feedEnhancer = config.feedEnhancer ?? null
this.encryptor = config.credentialEncryptor ?? null
this.db = config.db
}
getProvider(sourceId: string): FeedSourceProvider | undefined {
@@ -126,29 +120,26 @@ export class UserSessionManager {
return
}
// Use a transaction with SELECT FOR UPDATE to prevent lost updates
// when concurrent PATCH requests merge config against the same base.
const { existingRow, mergedConfig } = await this.db.transaction(async (tx) => {
const existingRow = await sources(tx, userId).findForUpdate(sourceId)
// When config is provided, fetch existing to deep-merge before validating.
// NOTE: find + updateConfig is not atomic. A concurrent update could
// read stale config. Use SELECT FOR UPDATE or atomic jsonb merge if
// this becomes a problem.
let mergedConfig: Record<string, unknown> | undefined
if (update.config !== undefined && provider.configSchema) {
const existing = await sources(this.db, userId).find(sourceId)
const existingConfig = (existing?.config ?? {}) as Record<string, unknown>
mergedConfig = merge({}, existingConfig, update.config)
let mergedConfig: Record<string, unknown> | undefined
if (update.config !== undefined && provider.configSchema) {
const existingConfig = (existingRow?.config ?? {}) as Record<string, unknown>
mergedConfig = merge({}, existingConfig, update.config)
const validated = provider.configSchema(mergedConfig)
if (validated instanceof type.errors) {
throw new InvalidSourceConfigError(sourceId, validated.summary)
}
const validated = provider.configSchema(mergedConfig)
if (validated instanceof type.errors) {
throw new InvalidSourceConfigError(sourceId, validated.summary)
}
}
// Throws SourceNotFoundError if the row doesn't exist
await sources(tx, userId).updateConfig(sourceId, {
enabled: update.enabled,
config: mergedConfig,
})
return { existingRow, mergedConfig }
// Throws SourceNotFoundError if the row doesn't exist
await sources(this.db, userId).updateConfig(sourceId, {
enabled: update.enabled,
config: mergedConfig,
})
// Refresh the specific source in the active session instead of
@@ -158,10 +149,7 @@ export class UserSessionManager {
if (update.enabled === false) {
session.removeSource(sourceId)
} else {
const credentials = existingRow?.credentials
? this.decryptCredentials(existingRow.credentials)
: null
const source = await provider.feedSourceForUser(userId, mergedConfig ?? {}, credentials)
const source = await provider.feedSourceForUser(userId, mergedConfig ?? {})
session.replaceSource(sourceId, source)
}
}
@@ -173,18 +161,13 @@ export class UserSessionManager {
* inserts a new row if one doesn't exist and fully replaces config
* (no merge).
*
* When `credentials` is provided, they are encrypted and persisted
* alongside the config in the same flow, avoiding the race condition
* of separate config + credential requests.
*
* @throws {SourceNotFoundError} if the sourceId has no registered provider
* @throws {InvalidSourceConfigError} if config fails schema validation
* @throws {CredentialStorageUnavailableError} if credentials are provided but no encryptor is configured
*/
async saveSourceConfig(
async upsertSourceConfig(
userId: string,
sourceId: string,
data: { enabled: boolean; config?: unknown; credentials?: unknown },
data: { enabled: boolean; config?: unknown },
): Promise<void> {
const provider = this.providers.get(sourceId)
if (!provider) {
@@ -198,28 +181,10 @@ export class UserSessionManager {
}
}
if (data.credentials !== undefined && !this.encryptor) {
throw new CredentialStorageUnavailableError()
}
const config = data.config ?? {}
// Run the upsert + credential update atomically so a failure in
// either step doesn't leave the row in an inconsistent state.
const existingRow = await this.db.transaction(async (tx) => {
const existing = await sources(tx, userId).find(sourceId)
await sources(tx, userId).upsertConfig(sourceId, {
enabled: data.enabled,
config,
})
if (data.credentials !== undefined && this.encryptor) {
const encrypted = this.encryptor.encrypt(JSON.stringify(data.credentials))
await sources(tx, userId).updateCredentials(sourceId, encrypted)
}
return existing
await sources(this.db, userId).upsertConfig(sourceId, {
enabled: data.enabled,
config,
})
const session = this.sessions.get(userId)
@@ -227,14 +192,7 @@ export class UserSessionManager {
if (!data.enabled) {
session.removeSource(sourceId)
} else {
// Prefer the just-provided credentials over what was in the DB.
let credentials: unknown = null
if (data.credentials !== undefined) {
credentials = data.credentials
} else if (existingRow?.credentials) {
credentials = this.decryptCredentials(existingRow.credentials)
}
const source = await provider.feedSourceForUser(userId, config, credentials)
const source = await provider.feedSourceForUser(userId, config)
if (session.hasSource(sourceId)) {
session.replaceSource(sourceId, source)
} else {
@@ -244,44 +202,6 @@ export class UserSessionManager {
}
}
/**
* Validates, encrypts, and persists per-user credentials for a source,
* then refreshes the active session.
*
* @throws {SourceNotFoundError} if the source row doesn't exist or has no registered provider
* @throws {CredentialStorageUnavailableError} if no CredentialEncryptor is configured
*/
async updateSourceCredentials(
userId: string,
sourceId: string,
credentials: unknown,
): Promise<void> {
const provider = this.providers.get(sourceId)
if (!provider) {
throw new SourceNotFoundError(sourceId, userId)
}
if (!this.encryptor) {
throw new CredentialStorageUnavailableError()
}
const encrypted = this.encryptor.encrypt(JSON.stringify(credentials))
await sources(this.db, userId).updateCredentials(sourceId, encrypted)
// Refresh the source in the active session.
// If feedSourceForUser throws (e.g. provider rejects the credentials),
// the DB already has the new credentials but the session keeps the old
// source. The next session creation will pick up the persisted credentials.
const session = this.sessions.get(userId)
if (session && session.hasSource(sourceId)) {
const row = await sources(this.db, userId).find(sourceId)
if (row?.enabled) {
const source = await provider.feedSourceForUser(userId, row.config ?? {}, credentials)
session.replaceSource(sourceId, source)
}
}
}
/**
* Replaces a provider and updates all active sessions.
* The new provider must have the same sourceId as an existing one.
@@ -334,12 +254,7 @@ export class UserSessionManager {
const row = await sources(this.db, session.userId).find(provider.sourceId)
if (!row?.enabled) return
const credentials = row.credentials ? this.decryptCredentials(row.credentials) : null
const newSource = await provider.feedSourceForUser(
session.userId,
row.config ?? {},
credentials,
)
const newSource = await provider.feedSourceForUser(session.userId, row.config ?? {})
session.replaceSource(provider.sourceId, newSource)
} catch (err) {
console.error(
@@ -356,8 +271,7 @@ export class UserSessionManager {
for (const row of enabledRows) {
const provider = this.providers.get(row.sourceId)
if (provider) {
const credentials = row.credentials ? this.decryptCredentials(row.credentials) : null
promises.push(provider.feedSourceForUser(userId, row.config ?? {}, credentials))
promises.push(provider.feedSourceForUser(userId, row.config ?? {}))
}
}
@@ -388,19 +302,4 @@ export class UserSessionManager {
return new UserSession(userId, feedSources, this.feedEnhancer)
}
/**
* Decrypts a credentials buffer from the DB, returning parsed JSON or null.
* Returns null (with a warning) if decryption or parsing fails — e.g. due to
* key rotation, data corruption, or malformed JSON.
*/
private decryptCredentials(credentials: Buffer): unknown {
if (!this.encryptor) return null
try {
return JSON.parse(this.encryptor.decrypt(credentials))
} catch (err) {
console.warn("[UserSessionManager] Failed to decrypt credentials:", err)
return null
}
}
}

View File

@@ -24,26 +24,3 @@ export class InvalidSourceConfigError extends Error {
this.sourceId = sourceId
}
}
/**
* Thrown by providers when credentials fail validation.
*/
export class InvalidSourceCredentialsError extends Error {
readonly sourceId: string
constructor(sourceId: string, summary: string) {
super(summary)
this.name = "InvalidSourceCredentialsError"
this.sourceId = sourceId
}
}
/**
* Thrown when credential storage is not configured (missing encryption key).
*/
export class CredentialStorageUnavailableError extends Error {
constructor() {
super("Credential storage is not configured")
this.name = "CredentialStorageUnavailableError"
}
}

View File

@@ -7,11 +7,10 @@ import type { Database } from "../db/index.ts"
import type { ConfigSchema, FeedSourceProvider } from "../session/feed-source-provider.ts"
import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
import { CredentialEncryptor } from "../lib/crypto.ts"
import { UserSessionManager } from "../session/user-session-manager.ts"
import { tflConfig } from "../tfl/provider.ts"
import { weatherConfig } from "../weather/provider.ts"
import { InvalidSourceCredentialsError, SourceNotFoundError } from "./errors.ts"
import { SourceNotFoundError } from "./errors.ts"
import { registerSourcesHttpHandlers } from "./http.ts"
// ---------------------------------------------------------------------------
@@ -40,7 +39,7 @@ function createStubProvider(sourceId: string, configSchema?: ConfigSchema): Feed
return {
sourceId,
configSchema,
async feedSourceForUser(_userId: string, _config: unknown, _credentials: unknown) {
async feedSourceForUser() {
return createStubSource(sourceId)
},
}
@@ -80,9 +79,6 @@ function createInMemoryStore() {
async find(sourceId: string) {
return rows.get(key(userId, sourceId))
},
async findForUpdate(sourceId: string) {
return rows.get(key(userId, sourceId))
},
async updateConfig(sourceId: string, update: { enabled?: boolean; config?: unknown }) {
const existing = rows.get(key(userId, sourceId))
if (!existing) {
@@ -109,12 +105,6 @@ function createInMemoryStore() {
})
}
},
async updateCredentials(sourceId: string, _credentials: Buffer) {
const existing = rows.get(key(userId, sourceId))
if (!existing) {
throw new SourceNotFoundError(sourceId, userId)
}
},
}
},
}
@@ -128,9 +118,7 @@ mock.module("../sources/user-sources.ts", () => ({
},
}))
const fakeDb = {
transaction: <T>(fn: (tx: unknown) => Promise<T>) => fn(fakeDb),
} as unknown as Database
const fakeDb = {} as Database
function createApp(providers: FeedSourceProvider[], userId?: string) {
const sessionManager = new UserSessionManager({ providers, db: fakeDb })
@@ -154,30 +142,6 @@ function get(app: Hono, sourceId: string) {
return app.request(`/api/sources/${sourceId}`, { method: "GET" })
}
const TEST_ENCRYPTION_KEY = "/bv1nbzC4ozZkT/pcv5oQfl+JAMuMZDUSVDesG2dur8="
function createAppWithEncryptor(providers: FeedSourceProvider[], userId?: string) {
const sessionManager = new UserSessionManager({
providers,
db: fakeDb,
credentialEncryptor: new CredentialEncryptor(TEST_ENCRYPTION_KEY),
})
const app = new Hono()
registerSourcesHttpHandlers(app, {
sessionManager,
authSessionMiddleware: mockAuthSessionMiddleware(userId),
})
return { app, sessionManager }
}
function putCredentials(app: Hono, sourceId: string, body: unknown) {
return app.request(`/api/sources/${sourceId}/credentials`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
})
}
function put(app: Hono, sourceId: string, body: unknown) {
return app.request(`/api/sources/${sourceId}`, {
method: "PUT",
@@ -743,123 +707,4 @@ describe("PUT /api/sources/:sourceId", () => {
expect(res.status).toBe(204)
})
test("returns 204 when credentials are included alongside config", async () => {
activeStore = createInMemoryStore()
const { app } = createAppWithEncryptor(
[createStubProvider("aelis.weather", weatherConfig)],
MOCK_USER_ID,
)
const res = await put(app, "aelis.weather", {
enabled: true,
config: { units: "metric" },
credentials: { apiKey: "secret123" },
})
expect(res.status).toBe(204)
const row = activeStore.rows.get(`${MOCK_USER_ID}:aelis.weather`)
expect(row).toBeDefined()
expect(row!.enabled).toBe(true)
expect(row!.config).toEqual({ units: "metric" })
})
test("returns 503 when credentials are provided but no encryptor is configured", async () => {
activeStore = createInMemoryStore()
// createApp does NOT configure an encryptor
const { app } = createApp([createStubProvider("aelis.weather", weatherConfig)], MOCK_USER_ID)
const res = await put(app, "aelis.weather", {
enabled: true,
config: { units: "metric" },
credentials: { apiKey: "secret123" },
})
expect(res.status).toBe(503)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("not configured")
})
})
describe("PUT /api/sources/:sourceId/credentials", () => {
test("returns 401 without auth", async () => {
activeStore = createInMemoryStore()
const { app } = createAppWithEncryptor([createStubProvider("aelis.location")])
const res = await putCredentials(app, "aelis.location", { token: "x" })
expect(res.status).toBe(401)
})
test("returns 404 for unknown source", async () => {
activeStore = createInMemoryStore()
const { app } = createAppWithEncryptor([createStubProvider("aelis.location")], MOCK_USER_ID)
const res = await putCredentials(app, "unknown.source", { token: "x" })
expect(res.status).toBe(404)
})
test("returns 400 for invalid JSON", async () => {
activeStore = createInMemoryStore()
activeStore.seed(MOCK_USER_ID, "aelis.location")
const { app } = createAppWithEncryptor([createStubProvider("aelis.location")], MOCK_USER_ID)
const res = await app.request("/api/sources/aelis.location/credentials", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: "not-json",
})
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toBe("Invalid JSON")
})
test("returns 204 and persists credentials", async () => {
activeStore = createInMemoryStore()
activeStore.seed(MOCK_USER_ID, "aelis.location")
const { app } = createAppWithEncryptor([createStubProvider("aelis.location")], MOCK_USER_ID)
const res = await putCredentials(app, "aelis.location", { token: "secret" })
expect(res.status).toBe(204)
})
test("returns 400 when provider throws InvalidSourceCredentialsError", async () => {
activeStore = createInMemoryStore()
activeStore.seed(MOCK_USER_ID, "test.creds")
let callCount = 0
const provider: FeedSourceProvider = {
sourceId: "test.creds",
async feedSourceForUser(_userId: string, _config: unknown, _credentials: unknown) {
callCount++
if (callCount > 1) {
throw new InvalidSourceCredentialsError("test.creds", "invalid token format")
}
return createStubSource("test.creds")
},
}
const { app, sessionManager } = createAppWithEncryptor([provider], MOCK_USER_ID)
await sessionManager.getOrCreate(MOCK_USER_ID)
const res = await putCredentials(app, "test.creds", { token: "bad" })
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("invalid token format")
})
test("returns 503 when credential encryption is not configured", async () => {
activeStore = createInMemoryStore()
activeStore.seed(MOCK_USER_ID, "aelis.location")
const { app } = createApp([createStubProvider("aelis.location")], MOCK_USER_ID)
const res = await putCredentials(app, "aelis.location", { token: "x" })
expect(res.status).toBe(503)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("not configured")
})
})

View File

@@ -6,12 +6,7 @@ import { createMiddleware } from "hono/factory"
import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
import type { UserSessionManager } from "../session/index.ts"
import {
CredentialStorageUnavailableError,
InvalidSourceConfigError,
InvalidSourceCredentialsError,
SourceNotFoundError,
} from "./errors.ts"
import { InvalidSourceConfigError, SourceNotFoundError } from "./errors.ts"
type Env = {
Variables: {
@@ -34,13 +29,11 @@ const ReplaceSourceConfigRequestBody = type({
"+": "reject",
enabled: "boolean",
config: "unknown",
"credentials?": "unknown",
})
const ReplaceSourceConfigNoConfigRequestBody = type({
"+": "reject",
enabled: "boolean",
"credentials?": "unknown",
})
export function registerSourcesHttpHandlers(
@@ -55,12 +48,6 @@ export function registerSourcesHttpHandlers(
app.get("/api/sources/:sourceId", inject, authSessionMiddleware, handleGetSource)
app.patch("/api/sources/:sourceId", inject, authSessionMiddleware, handleUpdateSource)
app.put("/api/sources/:sourceId", inject, authSessionMiddleware, handleReplaceSource)
app.put(
"/api/sources/:sourceId/credentials",
inject,
authSessionMiddleware,
handleUpdateCredentials,
)
}
async function handleGetSource(c: Context<Env>) {
@@ -163,15 +150,14 @@ async function handleReplaceSource(c: Context<Env>) {
return c.json({ error: parsed.summary }, 400)
}
const { enabled, credentials } = parsed
const { enabled } = parsed
const config = "config" in parsed ? parsed.config : undefined
const user = c.get("user")!
try {
await sessionManager.saveSourceConfig(user.id, sourceId, {
await sessionManager.upsertSourceConfig(user.id, sourceId, {
enabled,
config,
credentials,
})
} catch (err) {
if (err instanceof SourceNotFoundError) {
@@ -180,49 +166,6 @@ async function handleReplaceSource(c: Context<Env>) {
if (err instanceof InvalidSourceConfigError) {
return c.json({ error: err.message }, 400)
}
if (err instanceof CredentialStorageUnavailableError) {
return c.json({ error: err.message }, 503)
}
throw err
}
return c.body(null, 204)
}
async function handleUpdateCredentials(c: Context<Env>) {
const sourceId = c.req.param("sourceId")
if (!sourceId) {
return c.body(null, 404)
}
const sessionManager = c.get("sessionManager")
const provider = sessionManager.getProvider(sourceId)
if (!provider) {
return c.json({ error: `Source "${sourceId}" not found` }, 404)
}
let body: unknown
try {
body = await c.req.json()
} catch {
return c.json({ error: "Invalid JSON" }, 400)
}
const user = c.get("user")!
try {
await sessionManager.updateSourceCredentials(user.id, sourceId, body)
} catch (err) {
if (err instanceof SourceNotFoundError) {
return c.json({ error: err.message }, 404)
}
if (err instanceof InvalidSourceCredentialsError) {
return c.json({ error: err.message }, 400)
}
if (err instanceof CredentialStorageUnavailableError) {
return c.json({ error: err.message }, 503)
}
throw err
}

View File

@@ -26,18 +26,6 @@ export function sources(db: Database, userId: string) {
return rows[0]
},
/** Like find(), but acquires a row lock to prevent concurrent modifications. Must be called inside a transaction. */
async findForUpdate(sourceId: string) {
const rows = await db
.select()
.from(userSources)
.where(and(eq(userSources.userId, userId), eq(userSources.sourceId, sourceId)))
.limit(1)
.for("update")
return rows[0]
},
/** Enables a source for the user. Throws if the source row doesn't exist. */
async enableSource(sourceId: string) {
const rows = await db

View File

@@ -23,11 +23,7 @@ export class TflSourceProvider implements FeedSourceProvider {
this.client = "client" in options ? options.client : undefined
}
async feedSourceForUser(
_userId: string,
config: unknown,
_credentials: unknown,
): Promise<TflSource> {
async feedSourceForUser(_userId: string, config: unknown): Promise<TflSource> {
const parsed = tflConfig(config)
if (parsed instanceof type.errors) {
throw new Error(`Invalid TFL config: ${parsed.summary}`)

View File

@@ -26,11 +26,7 @@ export class WeatherSourceProvider implements FeedSourceProvider {
this.client = options.client
}
async feedSourceForUser(
_userId: string,
config: unknown,
_credentials: unknown,
): Promise<WeatherSource> {
async feedSourceForUser(_userId: string, config: unknown): Promise<WeatherSource> {
const parsed = weatherConfig(config)
if (parsed instanceof type.errors) {
throw new Error(`Invalid weather config: ${parsed.summary}`)

View File

@@ -55,112 +55,44 @@
"fontFamily": "Inter",
"fontDefinitions": [
{ "path": "./assets/fonts/Inter_100Thin.ttf", "weight": 100 },
{
"path": "./assets/fonts/Inter_100Thin_Italic.ttf",
"weight": 100,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_100Thin_Italic.ttf", "weight": 100, "style": "italic" },
{ "path": "./assets/fonts/Inter_200ExtraLight.ttf", "weight": 200 },
{
"path": "./assets/fonts/Inter_200ExtraLight_Italic.ttf",
"weight": 200,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_200ExtraLight_Italic.ttf", "weight": 200, "style": "italic" },
{ "path": "./assets/fonts/Inter_300Light.ttf", "weight": 300 },
{
"path": "./assets/fonts/Inter_300Light_Italic.ttf",
"weight": 300,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_300Light_Italic.ttf", "weight": 300, "style": "italic" },
{ "path": "./assets/fonts/Inter_400Regular.ttf", "weight": 400 },
{
"path": "./assets/fonts/Inter_400Regular_Italic.ttf",
"weight": 400,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_400Regular_Italic.ttf", "weight": 400, "style": "italic" },
{ "path": "./assets/fonts/Inter_500Medium.ttf", "weight": 500 },
{
"path": "./assets/fonts/Inter_500Medium_Italic.ttf",
"weight": 500,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_500Medium_Italic.ttf", "weight": 500, "style": "italic" },
{ "path": "./assets/fonts/Inter_600SemiBold.ttf", "weight": 600 },
{
"path": "./assets/fonts/Inter_600SemiBold_Italic.ttf",
"weight": 600,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_600SemiBold_Italic.ttf", "weight": 600, "style": "italic" },
{ "path": "./assets/fonts/Inter_700Bold.ttf", "weight": 700 },
{
"path": "./assets/fonts/Inter_700Bold_Italic.ttf",
"weight": 700,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_700Bold_Italic.ttf", "weight": 700, "style": "italic" },
{ "path": "./assets/fonts/Inter_800ExtraBold.ttf", "weight": 800 },
{
"path": "./assets/fonts/Inter_800ExtraBold_Italic.ttf",
"weight": 800,
"style": "italic"
},
{ "path": "./assets/fonts/Inter_800ExtraBold_Italic.ttf", "weight": 800, "style": "italic" },
{ "path": "./assets/fonts/Inter_900Black.ttf", "weight": 900 },
{
"path": "./assets/fonts/Inter_900Black_Italic.ttf",
"weight": 900,
"style": "italic"
}
{ "path": "./assets/fonts/Inter_900Black_Italic.ttf", "weight": 900, "style": "italic" }
]
},
{
"fontFamily": "Source Serif 4",
"fontDefinitions": [
{ "path": "./assets/fonts/SourceSerif4_200ExtraLight.ttf", "weight": 200 },
{
"path": "./assets/fonts/SourceSerif4_200ExtraLight_Italic.ttf",
"weight": 200,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_200ExtraLight_Italic.ttf", "weight": 200, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_300Light.ttf", "weight": 300 },
{
"path": "./assets/fonts/SourceSerif4_300Light_Italic.ttf",
"weight": 300,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_300Light_Italic.ttf", "weight": 300, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_400Regular.ttf", "weight": 400 },
{
"path": "./assets/fonts/SourceSerif4_400Regular_Italic.ttf",
"weight": 400,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_400Regular_Italic.ttf", "weight": 400, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_500Medium.ttf", "weight": 500 },
{
"path": "./assets/fonts/SourceSerif4_500Medium_Italic.ttf",
"weight": 500,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_500Medium_Italic.ttf", "weight": 500, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_600SemiBold.ttf", "weight": 600 },
{
"path": "./assets/fonts/SourceSerif4_600SemiBold_Italic.ttf",
"weight": 600,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_600SemiBold_Italic.ttf", "weight": 600, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_700Bold.ttf", "weight": 700 },
{
"path": "./assets/fonts/SourceSerif4_700Bold_Italic.ttf",
"weight": 700,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_700Bold_Italic.ttf", "weight": 700, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_800ExtraBold.ttf", "weight": 800 },
{
"path": "./assets/fonts/SourceSerif4_800ExtraBold_Italic.ttf",
"weight": 800,
"style": "italic"
},
{ "path": "./assets/fonts/SourceSerif4_800ExtraBold_Italic.ttf", "weight": 800, "style": "italic" },
{ "path": "./assets/fonts/SourceSerif4_900Black.ttf", "weight": 900 },
{
"path": "./assets/fonts/SourceSerif4_900Black_Italic.ttf",
"weight": 900,
"style": "italic"
}
{ "path": "./assets/fonts/SourceSerif4_900Black_Italic.ttf", "weight": 900, "style": "italic" }
]
}
]

View File

@@ -55,6 +55,6 @@
"eas-cli": "^18.0.1",
"eslint": "^9.25.0",
"eslint-config-expo": "~10.0.0",
"typescript": "^6"
"typescript": "~5.9.2"
}
}

View File

@@ -27,8 +27,8 @@ export class ApiClient {
(prevInit, middleware) => middleware(url, prevInit),
init,
)
return fetch(this.baseUrl ? new URL(url.toString(), this.baseUrl) : url, finalInit).then(
(res) => Promise.all([Promise.resolve(res), res.json()]),
return fetch(this.baseUrl ? new URL(url.toString(), this.baseUrl) : url, finalInit).then((res) =>
Promise.all([Promise.resolve(res), res.json()]),
)
}
}

View File

@@ -3,13 +3,13 @@ import { useEffect } from "react"
import { ScrollView, View } from "react-native"
import tw from "twrnc"
import { type Showcase } from "@/components/showcase"
import { buttonShowcase } from "@/components/ui/button.showcase"
import { feedCardShowcase } from "@/components/ui/feed-card.showcase"
import { monospaceTextShowcase } from "@/components/ui/monospace-text.showcase"
import { SansSerifText } from "@/components/ui/sans-serif-text"
import { sansSerifTextShowcase } from "@/components/ui/sans-serif-text.showcase"
import { serifTextShowcase } from "@/components/ui/serif-text.showcase"
import { type Showcase } from "@/components/showcase"
import { SansSerifText } from "@/components/ui/sans-serif-text"
const showcases: Record<string, Showcase> = {
button: buttonShowcase,
@@ -41,10 +41,7 @@ export default function ComponentDetailScreen() {
const ShowcaseComponent = showcase.component
return (
<ScrollView
style={tw`bg-stone-100 dark:bg-stone-900 flex-1`}
contentContainerStyle={tw`px-5 pb-10 pt-4 gap-6`}
>
<ScrollView style={tw`bg-stone-100 dark:bg-stone-900 flex-1`} contentContainerStyle={tw`px-5 pb-10 pt-4 gap-6`}>
<ShowcaseComponent />
</ScrollView>
)

View File

@@ -15,9 +15,7 @@ const components = [
export default function ComponentsScreen() {
return (
<View style={tw`flex-1`}>
<View
style={tw`mx-4 mt-4 rounded-xl border border-stone-200 dark:border-stone-800 overflow-hidden`}
>
<View style={tw`mx-4 mt-4 rounded-xl border border-stone-200 dark:border-stone-800 overflow-hidden`}>
<FlatList
data={components}
keyExtractor={(item) => item.name}

View File

@@ -1,8 +1,8 @@
import { View } from "react-native"
import tw from "twrnc"
import { type Showcase, Section } from "../showcase"
import { Button } from "./button"
import { type Showcase, Section } from "../showcase"
function ButtonShowcase() {
return (
@@ -11,7 +11,11 @@ function ButtonShowcase() {
<Button style={tw`self-start`} label="Press me" />
</Section>
<Section title="Leading icon">
<Button style={tw`self-start`} label="Add item" leadingIcon={<Button.Icon name="plus" />} />
<Button
style={tw`self-start`}
label="Add item"
leadingIcon={<Button.Icon name="plus" />}
/>
</Section>
<Section title="Trailing icon">
<Button

View File

@@ -23,11 +23,7 @@ type ButtonProps = Omit<PressableProps, "children"> & {
export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
const hasIcons = leadingIcon != null || trailingIcon != null
const textElement = (
<SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>
{label}
</SansSerifText>
)
const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
return (
<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>

View File

@@ -1,11 +1,11 @@
import { View } from "react-native"
import tw from "twrnc"
import { type Showcase, Section } from "../showcase"
import { Button } from "./button"
import { FeedCard } from "./feed-card"
import { SansSerifText } from "./sans-serif-text"
import { SerifText } from "./serif-text"
import { type Showcase, Section } from "../showcase"
function FeedCardShowcase() {
return (

View File

@@ -2,10 +2,5 @@ import { View, type ViewProps } from "react-native"
import tw from "twrnc"
export function FeedCard({ style, ...props }: ViewProps) {
return (
<View
style={[tw`border border-stone-200 dark:border-stone-800 rounded-lg`, style]}
{...props}
/>
)
return <View style={[tw`border border-stone-200 dark:border-stone-800 rounded-lg`, style]} {...props} />
}

View File

@@ -1,8 +1,8 @@
import { View } from "react-native"
import tw from "twrnc"
import { type Showcase, Section } from "../showcase"
import { MonospaceText } from "./monospace-text"
import { type Showcase, Section } from "../showcase"
function MonospaceTextShowcase() {
return (

View File

@@ -3,10 +3,7 @@ import tw from "twrnc"
export function MonospaceText({ children, style, ...props }: TextProps) {
return (
<Text
style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Menlo" }, style]}
{...props}
>
<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Menlo" }, style]} {...props}>
{children}
</Text>
)

View File

@@ -1,8 +1,8 @@
import { View } from "react-native"
import tw from "twrnc"
import { type Showcase, Section } from "../showcase"
import { SansSerifText } from "./sans-serif-text"
import { type Showcase, Section } from "../showcase"
function SansSerifTextShowcase() {
return (

View File

@@ -3,10 +3,7 @@ import tw from "twrnc"
export function SansSerifText({ children, style, ...props }: TextProps) {
return (
<Text
style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Inter" }, style]}
{...props}
>
<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Inter" }, style]} {...props}>
{children}
</Text>
)

View File

@@ -1,8 +1,8 @@
import { View } from "react-native"
import tw from "twrnc"
import { type Showcase, Section } from "../showcase"
import { SerifText } from "./serif-text"
import { type Showcase, Section } from "../showcase"
function SerifTextShowcase() {
return (

View File

@@ -3,10 +3,7 @@ import tw from "twrnc"
export function SerifText({ children, style, ...props }: TextProps) {
return (
<Text
style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Source Serif 4" }, style]}
{...props}
>
<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Source Serif 4" }, style]} {...props}>
{children}
</Text>
)

View File

@@ -30,8 +30,7 @@ export const catalog = defineCatalog(schema, {
style: z.string().nullable(),
}),
slots: ["default"],
description:
"Bordered card container for feed content. The style prop accepts a twrnc class string.",
description: "Bordered card container for feed content. The style prop accepts a twrnc class string.",
example: { style: "p-4 gap-2" },
},
SansSerifText: {

View File

@@ -14,20 +14,12 @@ type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
export const { registry } = defineRegistry(catalog, {
components: {
View: ({ props, children }) => (
<View style={props.style ? tw`${props.style}` : undefined}>{children}</View>
),
View: ({ props, children }) => <View style={props.style ? tw`${props.style}` : undefined}>{children}</View>,
Button: ({ props, emit }) => (
<Button
label={props.label}
leadingIcon={
props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined
}
trailingIcon={
props.trailingIcon ? (
<Button.Icon name={props.trailingIcon as ButtonIconName} />
) : undefined
}
leadingIcon={props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined}
trailingIcon={props.trailingIcon ? <Button.Icon name={props.trailingIcon as ButtonIconName} /> : undefined}
onPress={() => emit("press")}
/>
),
@@ -35,17 +27,13 @@ export const { registry } = defineRegistry(catalog, {
<FeedCard style={props.style ? tw`${props.style}` : undefined}>{children}</FeedCard>
),
SansSerifText: ({ props }) => (
<SansSerifText style={props.style ? tw`${props.style}` : undefined}>
{props.text}
</SansSerifText>
<SansSerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SansSerifText>
),
SerifText: ({ props }) => (
<SerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SerifText>
),
MonospaceText: ({ props }) => (
<MonospaceText style={props.style ? tw`${props.style}` : undefined}>
{props.text}
</MonospaceText>
<MonospaceText style={props.style ? tw`${props.style}` : undefined}>{props.text}</MonospaceText>
),
},
})

View File

@@ -1,131 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 7,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 53] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 122] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{ "ty": "el", "p": { "a": 0, "k": [160, 53] }, "s": { "a": 0, "k": [320, 106] } },
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": { "a": 0, "k": [160, 53] },
"p": { "a": 0, "k": [200.5, 200] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-30], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 6, "s": [-10], "h": 1 }
]
}
},
"ip": 0,
"op": 7,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 7,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 53] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 122] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{ "ty": "el", "p": { "a": 0, "k": [160, 53] }, "s": { "a": 0, "k": [320, 106] } },
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": { "a": 0, "k": [160, 53] },
"p": { "a": 0, "k": [200.594, 200.176] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [30], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 6, "s": [10], "h": 1 }
]
}
},
"ip": 0,
"op": 7,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 7, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 7, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 6,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[-10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":7,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":7,"st":0}],"meta":{"g":"https://jitter.video"},"op":6,"v":"5.7.4","w":400}

View File

@@ -1,131 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 7,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 53] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 122] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{ "ty": "el", "p": { "a": 0, "k": [160, 53] }, "s": { "a": 0, "k": [320, 106] } },
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": { "a": 0, "k": [160, 53] },
"p": { "a": 0, "k": [200.5, 200] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-30], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 6, "s": [-10], "h": 1 }
]
}
},
"ip": 0,
"op": 7,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 7,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 53] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 122] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{ "ty": "el", "p": { "a": 0, "k": [160, 53] }, "s": { "a": 0, "k": [320, 106] } },
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": { "a": 0, "k": [160, 53] },
"p": { "a": 0, "k": [200.594, 200.176] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [30], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 6, "s": [10], "h": 1 }
]
}
},
"ip": 0,
"op": 7,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 7, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 7, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 6,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[-10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":7,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":7,"st":0}],"meta":{"g":"https://jitter.video"},"op":6,"v":"5.7.4","w":400}

View File

@@ -1,281 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 61,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 1],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [320, 1],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [320, 106],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200, 200.014] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-90], "h": 1 },
{ "t": 8.4, "s": [-90], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 30, "s": [0], "h": 1 },
{ "t": 37.8, "s": [0], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 60, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 61,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 61,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 1],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.094, 200.19] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-90], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 30, "s": [0], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 60, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 61,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 61, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 61, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 60,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200,200.014]},"r":{"a":1,"k":[{"t":0,"s":[-90],"h":1},{"t":8.4,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"h":1},{"t":37.8,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.094,200.19]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":61,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":61,"st":0}],"meta":{"g":"https://jitter.video"},"op":60,"v":"5.7.4","w":400}

View File

@@ -1,281 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 61,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 1],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [320, 1],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [320, 106],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 8.4,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 37.8,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200, 200.014] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-90], "h": 1 },
{ "t": 8.4, "s": [-90], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 30, "s": [0], "h": 1 },
{ "t": 37.8, "s": [0], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 60, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 61,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 61,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 1],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 0.5],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{
"t": 30,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 1] },
"o": { "x": [0, 0.5], "y": [0, 0] }
},
{ "t": 60, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.094, 200.19] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-90], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 30, "s": [0], "i": { "x": 0, "y": 1 }, "o": { "x": 0.5, "y": 0 } },
{ "t": 60, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 61,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 61, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 61, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 60,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200,200.014]},"r":{"a":1,"k":[{"t":0,"s":[-90],"h":1},{"t":8.4,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"h":1},{"t":37.8,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.094,200.19]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":61,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":61,"st":0}],"meta":{"g":"https://jitter.video"},"op":60,"v":"5.7.4","w":400}

View File

@@ -1,224 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 31,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [160, 53],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 106],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [320, 106],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [160, 53],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.5, 200] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-30], "h": 1 },
{ "t": 5.28, "s": [-30], "i": { "x": 0.001, "y": 0.998 }, "o": { "x": 0.349, "y": 0 } },
{ "t": 30, "s": [-90], "h": 1 }
]
}
},
"ip": 0,
"op": 31,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 31,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.906, 0.898, 0.894] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.594, 200.176] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [30], "i": { "x": 0, "y": 0.999 }, "o": { "x": 0.348, "y": 0 } },
{ "t": 30, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 31,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 31, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 31, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 30,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[320,106],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"h":1},{"t":5.28,"s":[-30],"i":{"x":0.001,"y":0.998},"o":{"x":0.349,"y":0}},{"t":30,"s":[-90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":0.999},"o":{"x":0.348,"y":0}},{"t":30,"s":[90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":31,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":31,"st":0}],"meta":{"g":"https://jitter.video"},"op":30,"v":"5.7.4","w":400}

View File

@@ -1,224 +1 @@
{
"fr": 60,
"h": 400,
"ip": 0,
"layers": [
{
"ind": 3,
"ty": 4,
"parent": 2,
"ks": {},
"ip": 0,
"op": 31,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [160, 53],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 106],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [320, 106],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 2,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 1], "y": [1, 1] },
"o": { "x": [0, 0], "y": [0, 0] }
},
{
"t": 5.28,
"s": [160, 53],
"i": { "x": [1, 0.001], "y": [1, 0.998] },
"o": { "x": [0, 0.349], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.5, 200] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [-30], "h": 1 },
{ "t": 5.28, "s": [-30], "i": { "x": 0.001, "y": 0.998 }, "o": { "x": 0.349, "y": 0 } },
{ "t": 30, "s": [-90], "h": 1 }
]
}
},
"ip": 0,
"op": 31,
"st": 0
},
{
"ind": 5,
"ty": 4,
"parent": 4,
"ks": {},
"ip": 0,
"op": 31,
"st": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"p": { "a": 0, "k": [160, 26.75] },
"r": { "a": 0, "k": 0 },
"s": { "a": 0, "k": [336, 174.5] }
},
{ "ty": "fl", "c": { "a": 0, "k": [0, 0, 0, 0] }, "o": { "a": 0, "k": 0 } },
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
},
{
"ty": "gr",
"it": [
{
"ty": "el",
"p": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"s": {
"a": 1,
"k": [
{
"t": 0,
"s": [320, 106],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [320, 1], "h": 1 }
]
}
},
{
"ty": "st",
"c": { "a": 0, "k": [0.11, 0.098, 0.09] },
"lc": 1,
"lj": 1,
"ml": 10,
"o": { "a": 0, "k": 100 },
"w": { "a": 0, "k": 16 }
},
{ "ty": "tr", "o": { "a": 0, "k": 100 } }
]
}
]
},
{
"ind": 4,
"ty": 3,
"parent": 1,
"ks": {
"a": {
"a": 1,
"k": [
{
"t": 0,
"s": [160, 53],
"i": { "x": [1, 0], "y": [1, 0.999] },
"o": { "x": [0, 0.348], "y": [0, 0] }
},
{ "t": 30, "s": [160, 0.5], "h": 1 }
]
},
"p": { "a": 0, "k": [200.594, 200.176] },
"r": {
"a": 1,
"k": [
{ "t": 0, "s": [30], "i": { "x": 0, "y": 0.999 }, "o": { "x": 0.348, "y": 0 } },
{ "t": 30, "s": [90], "h": 1 }
]
}
},
"ip": 0,
"op": 31,
"st": 0
},
{ "ind": 1, "ty": 3, "parent": 0, "ks": {}, "ip": 0, "op": 31, "st": 0 },
{ "ind": 0, "ty": 3, "ks": {}, "ip": 0, "op": 31, "st": 0 }
],
"meta": { "g": "https://jitter.video" },
"op": 30,
"v": "5.7.4",
"w": 400
}
{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[320,106],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"h":1},{"t":5.28,"s":[-30],"i":{"x":0.001,"y":0.998},"o":{"x":0.349,"y":0}},{"t":30,"s":[-90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":0.999},"o":{"x":0.348,"y":0}},{"t":30,"s":[90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":31,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":31,"st":0}],"meta":{"g":"https://jitter.video"},"op":30,"v":"5.7.4","w":400}

View File

@@ -9,14 +9,14 @@ primary_region = 'lhr'
[build]
[http_service]
internal_port = 3000
force_https = true
auto_stop_machines = 'stop'
auto_start_machines = true
min_machines_running = 0
processes = ['app']
internal_port = 3000
force_https = true
auto_stop_machines = 'stop'
auto_start_machines = true
min_machines_running = 0
processes = ['app']
[[vm]]
memory = '1gb'
cpus = 1
memory_mb = 1024
memory = '1gb'
cpus = 1
memory_mb = 1024

View File

@@ -30,7 +30,7 @@
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"tailwindcss": "^4.1.13",
"typescript": "^6",
"typescript": "^5.9.2",
"vite": "^7.1.7",
"vite-tsconfig-paths": "^5.1.4"
}

View File

@@ -1,16 +1,18 @@
{
"include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
"compilerOptions": {
"lib": ["DOM", "ES2022"],
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["node", "vite/client"],
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"rootDirs": [".", "./.react-router/types"],
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
"esModuleInterop": true,
"verbatimModuleSyntax": true,
"noEmit": true,
"resolveJsonModule": true,

Some files were not shown because too many files have changed in this diff Show More