@tiniestcloud/create 0.0.0-stage → 0.1.6

package/skills/tiny-design/website.md

@@ -0,0 +1,53 @@
+# Designing a website — pages people read
+
+> If the person has design standards of their own — a design system, components, a brand guide, an app or site to match — follow those, and use this playbook only for what they leave open. If they gave none, follow it all.
+
+A landing page, a portfolio, a small business, an event, docs or a blog: people arrive from a
+link, decide in seconds whether it is for them, read, and maybe act once. Build it on the site
+starter (Astro), so every page arrives as finished HTML that search engines and link previews
+can read.
+
+## Shape by purpose
+
+- **Landing page:** a hero that says what it is and for whom → proof (logos, numbers, a quote)
+  → how it works in three steps → what you get → questions → one clear final call to action.
+- **Small business:** what, where and when first — hours, location, the menu or services, how
+  to book or call — then the story and the photos.
+- **Portfolio:** the work first, big; a short line about the person; each project with the
+  problem, the result and the images.
+- **Event:** name, date, place and the register button above the fold; schedule, speakers,
+  getting there, questions.
+- **Docs or blog:** a reading layout — a narrow column (about 65 characters), a table of
+  contents, clear headings, code and images that fit the column.
+
+## The hero
+
+Open with the most characteristic thing in the subject's world: the product in use, the dish,
+the building, the work itself — not a gradient with three statistics. A headline under about
+ten words that says what it is and for whom; one primary action and at most one secondary.
+
+## Craft
+
+- Rhythm: generous vertical space between sections (80px or more on desktop), content width
+  capped (around 1100–1200px), prose narrower. Sections use that width — features side by
+  side, work or photos in a grid — rather than one narrow column all the way down. Vary section treatments sparingly — a band of
+  colour, a full-bleed image — so the page has a beat without looking like a template.
+- Type can be more expressive than in an app: a display face for headlines, a calm text face
+  at 17–19px with a line height around 1.6; `text-wrap: balance` on headings.
+- Images: real photographs or screenshots with one consistent treatment; width and height set,
+  lazy below the fold, compressed (WebP or AVIF), alt text that says what is shown.
+- Motion: one orchestrated entrance for the hero, at most a gentle reveal as sections scroll
+  in. Never hijack scrolling.
+- Navigation: a header that stays at the top as you scroll (it may shrink), a real menu on
+  a phone, a footer with contact and the essentials.
+- Every page has its own title and description, one `h1`, headings in order, and an image for
+  link previews.
+- One form (a sign-up, a booking request) follows the form playbook; the site adds the SDK tag
+  only for it.
+
+## Checks
+
+- In five seconds a stranger can say what this is, who it is for and what to do next.
+- It reads well on a phone first; tap targets are big enough and nothing scrolls sideways.
+- The page loads fast: self-hosted fonts, sized images, little JavaScript.
+- Then the general checklist, "Before you call it done".

package/templates/app/AGENTS.md

@@ -0,0 +1,41 @@
+# This app runs on Tiniest Cloud
+
+React, TypeScript, Vite, Tailwind CSS and shadcn/ui, deployed to Tiniest Cloud as a static build.
+
+- Sign-in, data, files and AI come from the global `tiny` (the `<script src="/sdk.js">` tag in
+  index.html; types in src/tiny.d.ts; React hooks in src/lib/tiny.tsx). Do not use localStorage,
+  write a login flow, or add a server of your own. The Tiniest Cloud guide has the whole SDK.
+- Server logic — anything the person using the app must not be able to change, like a price or a
+  booking — is a backend function: `public/_functions/<name>.ts` exporting
+  `default async (input, tiny: Tiny.Server) => value`, called from the page with
+  `await tiny.call("<name>", input)`. The build copies it into `dist/_functions/`; it runs on
+  Tiniest Cloud and is never served.
+- `npm run dev` shows a notice instead of the app: `tiny` only exists on Tiniest Cloud. To see the
+  app working, run `npm run build` and deploy this folder with `dist` built inside (no
+  node_modules, no .env files): `dist` is served, and the rest is kept as the project's source.
+- Where files go, so every project reads the same way in Tiniest Cloud's Code tab:
+  - `src/pages/` — one file per screen (`home.tsx`, `orders.tsx`). App.tsx frames them; with
+    more than one, it routes to each with React Router, whose browser routes work as-is (the
+    platform answers every path with index.html). Keep Vite's default `base`.
+  - `src/components/` — pieces the screens share; `src/components/ui/` for shadcn components.
+  - `src/hooks/` — the app's own `useSomething` hooks. The SDK's hooks stay in src/lib/tiny.tsx.
+  - `src/lib/` — plain code: helpers, formatting, types (`types.ts`), calculations.
+  - `public/` — files served as they are (images, icons), plus `_functions/`, `tiny.rules.json`
+    and `tiny.brand.json`.
+  - A file past about 300 lines is doing too much: move its parts into components and hooks.
+- Components: `npx shadcn@latest add <name>` adds one to src/components/ui. They are a starting
+  point: restyle them to fit this app (radius, size, colour, spacing) in src/components/ui.
+- Design: before the first screen, read the tiny-design skill — `.agents/skills/tiny-design/`
+  (the same files are in `.claude/skills/` for Claude Code): SKILL.md, then app.md. Where that
+  folder is missing, `tiny_guide` with topic `app` returns the same. Write what you decide in
+  DESIGN.md.
+- Look: give the app its own palette in src/index.css (the `:root` and `.dark` blocks) that suits
+  what it is and who uses it — never ship the default grey. Lay each screen out for what it
+  holds (a sidebar, a grid of cards, a table, a list beside its detail); the frame in App.tsx and
+  the first screen in src/pages/home.tsx are placeholders, and a narrow centred column suits only
+  one focused task. Light, dark and "match
+  device" are chosen with `ThemeToggle` (src/components/theme-toggle.tsx); keep both themes
+  looking right.
+- Their own components or brand: if the person points at a folder, a style guide or another app,
+  that is the design — reuse their components and bring their colours, fonts and logo into this
+  project (copied in, never linked to a path on their computer).

package/templates/app/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/app/README.md

@@ -0,0 +1,10 @@
+# App
+
+Built with React, TypeScript, Vite, Tailwind CSS and shadcn/ui, and hosted on Tiniest Cloud.
+
+    npm install
+    npm run build     # the site is in dist/
+
+Deploy this folder, with `dist` built inside, to Tiniest Cloud: `dist` is served, and the rest is
+kept as the project's source. `npm run dev` only shows a notice: sign-in and data
+come from the platform, so the app runs once it is deployed.

package/templates/app/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "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": {}
+}

package/templates/app/gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/templates/app/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>App</title>
+    <!-- The saved theme (src/lib/theme.ts), applied before anything draws so a dark page never flashes white. -->
+    <script>
+      (function () {
+        var saved = document.cookie.match(/(?:^|; )theme=(light|dark)/);
+        var dark = saved ? saved[1] === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.classList.toggle("dark", dark);
+        document.documentElement.style.colorScheme = dark ? "dark" : "light";
+      })();
+    </script>
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/_pwa/apple-touch-icon.png" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <!-- Tiniest Cloud's SDK: the global `tiny` (sign-in, data, AI, files). Served by the platform; vite-ignore leaves it as written. -->
+    <script src="/sdk.js" vite-ignore></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@tailwindcss/vite": "^4",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.4.0",
+    "lucide-react": "^1.48.0",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "shadcn": "^4.21.0",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6",
+    "typescript": "~6",
+    "vite": "^8"
+  }
+}

package/templates/app/src/App.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { useMe } from "@/lib/tiny"
+import Home from "@/pages/home"
+
+export default function App() {
+  const me = useMe()
+  if (me === undefined) return null
+
+  return (
+    <div className="flex min-h-svh flex-col">
+      <header className="sticky top-0 z-40 border-b bg-background">
+        <div className="mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
+          <h1 className="text-base font-medium">App</h1>
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            {me ? (
+              <div className="flex min-w-0 items-center gap-3 text-sm text-muted-foreground">
+                <span className="hidden truncate sm:inline">{me.email}</span>
+                <Button variant="outline" size="sm" onClick={() => tiny.logout()}>
+                  Sign out
+                </Button>
+              </div>
+            ) : (
+              <Button size="sm" onClick={() => tiny.login()}>
+                Sign in
+              </Button>
+            )}
+          </div>
+        </div>
+      </header>
+      {/* A placeholder frame around the screens in src/pages. With more than one screen, add
+          React Router here: a route per page, the header shared by all of them. */}
+      <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">
+        <Home />
+      </main>
+    </div>
+  )
+}

package/templates/app/src/components/theme-toggle.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+import { Monitor, Moon, Sun } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { getTheme, setTheme, type Theme } from "@/lib/theme"
+
+const CHOICES: Array<{ value: Theme; label: string; Icon: typeof Sun }> = [
+  { value: "light", label: "Light", Icon: Sun },
+  { value: "dark", label: "Dark", Icon: Moon },
+  { value: "system", label: "Match device", Icon: Monitor },
+]
+
+/** Light, dark or the device's setting, as three small buttons with styled tooltips. Restyle it to fit the app. */
+export function ThemeToggle({ className }: { className?: string }) {
+  const [theme, setCurrent] = useState<Theme>(getTheme)
+
+  useEffect(() => {
+    const sync = () => setCurrent(getTheme())
+    window.addEventListener("themechange", sync)
+    return () => window.removeEventListener("themechange", sync)
+  }, [])
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div
+        role="radiogroup"
+        aria-label="Theme"
+        className={cn("inline-flex items-center gap-0.5 rounded-full border bg-muted/50 p-0.5", className)}
+      >
+        {CHOICES.map(({ value, label, Icon }) => (
+          <Tooltip key={value}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                role="radio"
+                aria-checked={theme === value}
+                aria-label={label}
+                onClick={() => setTheme(value)}
+                className={cn(
+                  "flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors duration-200",
+                  "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  theme === value && "bg-background text-foreground shadow-sm"
+                )}
+              >
+                <Icon className="size-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>
+              {label}
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  )
+}

package/templates/app/src/components/ui/button.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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 bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] 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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"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}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/templates/app/src/components/ui/tooltip.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  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 TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  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>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/templates/app/src/index.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist 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);
+}
+
+: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.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --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.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --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.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --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.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}

package/templates/app/src/lib/theme.ts

@@ -0,0 +1,39 @@
+/**
+ * Light, dark, or whatever the device prefers — chosen by the person using the app and
+ * remembered on this device.
+ *
+ * Kept in a cookie rather than localStorage: it is a display preference, not data, and
+ * Tiniest Cloud flags localStorage in a deploy because that is where apps wrongly keep data.
+ * index.html reads the same cookie before anything draws, so a dark page never flashes white.
+ */
+export type Theme = "light" | "dark" | "system"
+
+const device = window.matchMedia("(prefers-color-scheme: dark)")
+
+export function getTheme(): Theme {
+  const match = document.cookie.match(/(?:^|; )theme=(light|dark)/)
+  return match ? (match[1] as Theme) : "system"
+}
+
+function apply(theme: Theme) {
+  const dark = theme === "dark" || (theme === "system" && device.matches)
+  document.documentElement.classList.toggle("dark", dark)
+  document.documentElement.style.colorScheme = dark ? "dark" : "light"
+}
+
+export function setTheme(theme: Theme) {
+  document.cookie =
+    theme === "system"
+      ? "theme=; path=/; max-age=0; samesite=lax"
+      : `theme=${theme}; path=/; max-age=31536000; samesite=lax`
+  apply(theme)
+  window.dispatchEvent(new Event("themechange"))
+}
+
+/** Apply the saved choice now, and follow the device while the choice is "system". */
+export function startTheme() {
+  apply(getTheme())
+  device.addEventListener("change", () => {
+    if (getTheme() === "system") apply("system")
+  })
+}