init: arcadia-admin — admin webapp for arcadia-core, cloned from vibespace

Initial commit. Spun up via the docs/STARTER.md recipe: cp from vibespace, reset git, rename package, set brand to "Arcadia Admin" with Shield icon in app/lib/identity.ts. Inherits the full Crema sibling-lib wiring including @crema/arcadia-client (typed HTTP + Phoenix Channels realtime against arcadia-core) and @crema/arcadia-auth-ui (login/signup/password-reset/2FA forms). The /login route already renders <LoginForm>; <ArcadiaProvider> in app/root.tsx reads VITE_ARCADIA_URL (default localhost:4000) and VITE_ARCADIA_TENANT (default "default"). CLAUDE.md and README rewritten to frame this as the admin app for arcadia-core. docs/STARTER.md removed — arcadia-admin is a leaf consumer, not a downstream starter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 21:28:39 +10:00
commit f8cbf142b5
108 changed files with 23740 additions and 0 deletions
--- a/app/components/layout/surface-picker.tsx
+++ b/app/components/layout/surface-picker.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react"
+import { Check, Layers } from "lucide-react"
+
+import { Button } from "~/components/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "~/components/ui/popover"
+import { cn } from "~/lib/utils"
+
+export const surfaces = [
+  { id: "default", label: "Default" },
+  { id: "snow", label: "Snow" },
+  { id: "stone", label: "Stone" },
+  { id: "sage", label: "Sage" },
+  { id: "slate", label: "Slate" },
+] as const
+
+export type SurfaceId = (typeof surfaces)[number]["id"]
+
+const STORAGE_KEY = "crema-surface"
+const DEFAULT_SURFACE: SurfaceId = "default"
+
+function isSurfaceId(value: string | null): value is SurfaceId {
+  return !!value && surfaces.some((s) => s.id === value)
+}
+
+function applySurface(id: SurfaceId) {
+  if (id === "default") {
+    delete document.body.dataset.surface
+  } else {
+    document.body.dataset.surface = id
+  }
+}
+
+export function SurfacePicker() {
+  const [current, setCurrent] = useState<SurfaceId>(DEFAULT_SURFACE)
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    const next = isSurfaceId(stored) ? stored : DEFAULT_SURFACE
+    setCurrent(next)
+    applySurface(next)
+  }, [])
+
+  const select = (id: SurfaceId) => {
+    setCurrent(id)
+    applySurface(id)
+    localStorage.setItem(STORAGE_KEY, id)
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            data-action="appbar-surface"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Change surface tint"
+          >
+            <Layers />
+          </Button>
+        }
+      />
+      <PopoverContent align="end" className="w-56">
+        <PopoverHeader>
+          <PopoverTitle>Surface</PopoverTitle>
+          <PopoverDescription>Tint of cards and the sidebar.</PopoverDescription>
+        </PopoverHeader>
+        <div className="flex flex-col gap-1">
+          {surfaces.map((s) => {
+            const active = current === s.id
+            return (
+              <button
+                key={s.id}
+                type="button"
+                onClick={() => select(s.id)}
+                aria-pressed={active}
+                className={cn(
+                  "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none",
+                  active && "bg-accent text-accent-foreground"
+                )}
+              >
+                <span className="flex items-center gap-2.5">
+                  <span
+                    aria-hidden
+                    className={cn(
+                      "size-5 rounded-md ring-1 ring-border",
+                      `surface-swatch-${s.id}`
+                    )}
+                  />
+                  <span className="text-sm">{s.label}</span>
+                </span>
+                {active && <Check className="size-4 text-primary" />}
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}