@trypattern/sdk 0.1.9 → 0.1.10

package/README.md

@@ -80,7 +80,11 @@ export default createServer({ tables, admins })
   `id` and `createdAt` that Pattern sets. Every table declares `access` (`anyone`, `signedIn`,
   `owner`, `admin` or `server` for read, create, update and delete) and `writes` (`optimistic` or
   `confirmed`), and may add `owned: true` (an `ownerId` the server fills), `public` columns (a
-  read-only `public<Table>` store) and `unique` column sets (a 409 `conflict`). `src/access.ts` is
+  read-only `public<Table>` store) and `unique` column sets (a 409 `conflict`). `media` is Pattern's
+  own table of photos (`key`, `width`, `height`, `placeholder`, `alt`, `type`, `bytes`): an app
+  that shows photos adds it to its tables (`{ ...defineTables({ … }), media }`), binds an R2
+  bucket as `MEDIA` in `wrangler.jsonc` with `"/media/*"` in `run_worker_first`, and stores the
+  media row's `id` in its own columns. Anyone reads it; only the server creates rows. `src/access.ts` is
   the one rule engine; the Worker and the flow runner's memory API both use it, and
   `accessFlows({ App })` from `@trypattern/sdk/flows` checks every table's rules against the seed.
   Store writes return `'saved' | 'conflict' | 'forbidden' | 'missing' | 'failed'`. Safe to import
@@ -89,16 +93,41 @@ export default createServer({ tables, admins })
   auth.trypattern.ai (Google, and emailed 6-digit codes; locally the code prints in the dev log),
   dev sign-in, sessions, `/api/me` and every table under `/api/tables`. A deployed app holds one
   `AUTH_SECRET` that Pattern's deploy sets, and no Google secrets. Also `users`, `sessions`,
+  With `media` in its tables it also serves `POST /api/media` (admins only, a form with `file`
+  and `alt`, up to 10 MB of JPEG, PNG, WebP, GIF or AVIF; HEIC is refused): it reads the size from
+  the file's header (EXIF rotation included), stores it in `MEDIA` as `images/<sha256-16>.<ext>`,
+  asks the zone's image transformations for a 24-pixel JPEG placeholder (skipped in dev, so it is
+  `null` locally) and adds the row; and `GET /media/<key>`, immutable with an ETag. With
+  `pages` (`definePages(tables, { '/': head, '/items/:itemId': { head, paths } })` in
+  `server/pages.ts`) it renders the `<head>` of public pages: each `head` reads tables anyone may
+  read (`rows`, `row`, `photoUrl`) and returns `{ title, description, image, hero, jsonLd, data }`
+  (or `null` for a 404). The Worker puts the title, description, canonical link, `og:*` (the image
+  at 1200×630 with `fit=cover`), `twitter:card`, JSON-LD, a preload of the `hero` with `Image`'s
+  srcset, and `data` as `<script type="application/json" id="pattern-data">` into the built
+  `index.html`, and the table stores start from those rows; `sitemap.xml` (with `<image:image>`
+  and the alt as caption) and `robots.txt` come from the same list (`paths` lists a pattern's
+  params). It needs `"binding": "ASSETS"` and the page paths, `/sitemap.xml` and `/robots.txt` in
+  `run_worker_first`; other paths still get the built files. `localBusiness({ … })` and
+  `product({ … })` write the JSON-LD. Also `users`, `sessions`,
   `sqlTables`, `seedSql`, the sign-in wire schemas (`verifiedIdentity`, `exchangeRequest`,
   `exchangeReply`, `sendCodeRequest`, `sendCodeReply`, `verifyCodeRequest`, `verifyCodeReply`) and
-  the Worker type `D1Database`.
+  the Worker types `D1Database` and `R2Bucket`.
 - `@trypattern/sdk/react`: `AppProvider` and `useModel`, and the primitives every app draws
   with. The frame: `AppFrame`, `Screen`, `SignInScreen`, `CommandPalette`, `Toaster`,
   `CommandMenu`. Layout:
-  `Content`, `Stack`, `Row`, `Card`, `Divider`, `SettingsRow`, `PropertyRow`, `ListRow`, `LoadingRows`, `EmptyState`, `Form`.
-  Words: `Text` and `Link`. Controls: `Button` (or a link to a page with `to`), `AppearancePicker`, `IconButton`, `TextField`, `Select`, `Switch`,
-  `SegmentedControl`, `Menu`, `ContextMenu`, `Dialog`, `Tooltip`, `Kbd`, `ScrollArea`, `Avatar`,
-  `Badge`, `Skeleton`, `Spinner`, `Icon`. Types: `IconName`, `MenuEntry`, `SidebarLink`,
+  `Content`, `Stack`, `Row`, `Card` (with `to`, `href` or `onClick` the whole card is a link or a
+  button, with the focus ring and a raised shadow on hover), `Divider`, `SettingsRow`, `PropertyRow`, `ListRow`, `LoadingRows`, `EmptyState`, `Form`.
+  Words: `Text` and `Link`. Controls: `Button` (or a link to a page with `to`), `AppearancePicker`, `IconButton`, `TextField`
+  (`multiline` with `rows` for a few lines), `Select`, `Switch`,
+  `SegmentedControl`, `ChoiceGroup` (a wrapping radio group of `Choice` children, each with a
+  `title`, `subline`, `isDisabled` or any children such as an `Image` with a `label`; the chosen
+  one is ringed, the others fade, arrow keys move between them), `Menu`, `ContextMenu`, `Dialog`, `Tooltip`, `Kbd`, `ScrollArea`, `Avatar`,
+  `Badge`, `Skeleton`, `Spinner`, `Icon`. Photos: `Image` (`image` is a media row, `sizes` is
+  required, `priority` for the first photo on a page only, `aspect` crops with `fit=cover`): it
+  reserves the size from the row's `width` and `height`, offers 320 to 1920 pixel widths (never
+  wider than the original) through `/cdn-cgi/image/…` (plain `/media/<key>` on localhost), lazy-loads
+  unless `priority`, shows the blurred placeholder and fades the photo in over 200 ms unless it was
+  already loaded or motion is reduced, and shows a neutral block when the photo is missing or fails. Types: `IconName`, `MenuEntry`, `SidebarLink`,
   `Toast`, `SelectOption`, `SegmentedOption`, `CommandMenuItem`, `SpaceName` and `Placement`.
   Everything takes closed choices (`variant`, `tone`, `size`, `gap`, `width`) and a `style`
   limited to placement, and every interactive primitive reports to `startApp`'s `onInteraction`.
@@ -121,8 +150,8 @@ export default createServer({ tables, admins })
   `size` and layout choices it is used with, the app's own drawn pieces and the tokens they read,
   and its icons. Pattern's dashboard renders the design system from it.
 - `@trypattern/sdk/tsconfig/app.json` and `/tsconfig/server.json`: the presets project tsconfigs extend.
-- The `app` command: start, check, fix, reset, migration, build, send, screenshot, test, sign-in,
-  setup.
+- The `app` command: start, check, fix, reset, migration, media (`app media add photo.jpg --alt "…"`
+  uploads to the dev server as the first admin), build, send, screenshot, test, sign-in, setup.
 
 Published to npm as `@trypattern/sdk`, compiled to `dist/`; in this repo the blueprint runs the
 source directly. Still to come: payments, workflows and blocks.

package/dist/app.d.ts

@@ -44,6 +44,7 @@ export type AppDependencies<Api> = {
     cache: Cache;
     gate: Gate;
     clock?: Clock;
+    inline?: Readonly<Record<string, unknown>> | undefined;
 };
 export type RunningApp<Command, Snapshot extends {
     readonly path: string;

package/dist/app.js

@@ -15,7 +15,7 @@ import { assertNotBuilding, snapshotsOf } from "./store.js";
 import { ModelBase, command, createModels, modelSnapshotsOf, parseMessage, sendMessage } from "./model.js";
 import { isRoutedPath, pageIds, registerRoutes } from "./routes.js";
 import { PublicTableStore, TableStore, publicStoreName } from "./tables.js";
-function dataStores(tables, api, cache, viewer) {
+function dataStores(tables, api, cache, viewer, inline = {}) {
     const stores = { tables: {}, publicViews: {} };
     for (const [key, table] of Object.entries(tables)) {
         const found = Reflect.get(api, key);
@@ -31,6 +31,7 @@ function dataStores(tables, api, cache, viewer) {
                 api: tableApi,
                 cache,
                 viewer,
+                inline: inline[key],
                 ...(publicView === undefined ? {} : { publicView })
             });
         }
@@ -81,7 +82,7 @@ export function defineApp(definition) {
         #failures = [];
         #path;
         #user;
-        constructor(router, { api, cache, gate, clock = realClock() }) {
+        constructor(router, { api, cache, gate, clock = realClock(), inline }) {
             this.router = router;
             this.#cache = cache;
             this.#gate = gate;
@@ -91,7 +92,7 @@ export function defineApp(definition) {
                 api: api.app,
                 remembered: cache.scope('app.title', z.string())
             });
-            const data = dataStores(definition.tables, api.tables, cache, () => viewerOf(session.state.user));
+            const data = dataStores(definition.tables, api.tables, cache, () => viewerOf(session.state.user), inline);
             const custom = Object.fromEntries(Object.entries(definition.stores ?? {}).map(([key, Store]) => [
                 key,
                 new Store(cache.persisted(`stores.${key}`), api.services)

package/dist/cli/app.js

@@ -10,10 +10,12 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
 import { spawn, spawnSync } from 'node:child_process';
 import { chmodSync, closeSync, existsSync, mkdirSync, openSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { homedir } from 'node:os';
-import { delimiter, dirname, extname, join, relative, resolve } from 'node:path';
+import { basename, delimiter, dirname, extname, join, relative, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { createHash } from 'node:crypto';
 import { z } from 'zod';
+import { MEDIA_LIMIT_BYTES } from "../media.js";
+import { isHeic } from "../server/imageHeader.js";
 import { resetLocalDatabase } from "../vite/localWorker.js";
 import { login, publish, pull, restore, versions as listVersions } from "./publishing.js";
 import { toolBin } from "./tools.js";
@@ -79,8 +81,19 @@ const VALUE_FLAGS = new Set([
     '--name',
     '--as',
     '--code',
-    '--message'
+    '--message',
+    '--alt'
 ]);
+const PHOTO_TYPES = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif',
+    '.avif': 'image/avif'
+};
+const HEIC_EXTENSIONS = new Set(['.heic', '.heif']);
+const MEDIA_USAGE = '  usage  app media add photo.jpg --alt "Pink peonies in a glass vase"';
 const SHIM_SOURCE = `#!/bin/sh
 ${SHIM_MARKER_LINE}
 dir=$PWD
@@ -195,6 +208,22 @@ migrations to the local database. Prints "No schema changes" when the migrations
         run: migration,
         takesArgument: true
     },
+    media: {
+        summary: 'Add a photo to the media table: app media add photo.jpg --alt "…"',
+        details: `app media add photo.jpg --alt "Pink peonies in a glass vase"
+Sends the photo to the dev server's POST /api/media, signed in as the first email in admins in
+schema.ts (dev sign-in, so this adds to the local database and the local MEDIA bucket). The server
+reads its width and height, stores it as images/<hash>.<ext> and adds a row to the media table;
+this prints the row. Show it with <Image image={row} sizes="…" />.
+--alt is required: describe the photo for someone who can't see it.
+JPEG, PNG, WebP, GIF or AVIF, up to 10 MB. iPhone HEIC photos are refused: convert one first with
+sips -s format jpeg photo.heic --out photo.jpg. The app's tables must include media from
+@trypattern/sdk/schema, and wrangler.jsonc must bind an R2 bucket as MEDIA and keep "/media/*" in
+run_worker_first. Uses the running dev server, or starts one and stops it afterwards.`,
+        run: (_argument, options, rest) => addMedia(rest, options),
+        argumentCount: 2,
+        flags: ['--alt']
+    },
     build: {
         summary: 'Build the app for production into dist/',
         details: 'Runs vite build: the browser app and the Cloudflare Worker that serves /api.',
@@ -324,7 +353,7 @@ existing ${SHIM_PATH} that was not installed by Pattern.`,
     },
     help: {
         summary: 'Show this help (`app <command> --help` for details)',
-        details: 'Lists commands. Flags: --json (machine-readable stdout), --help, --no-open (start only), --visual (test only), --commands, --name, --as and --signed-out (screenshot only).',
+        details: 'Lists commands. Flags: --json (machine-readable stdout), --help, --no-open (start only), --visual (test only), --commands, --name, --as and --signed-out (screenshot only), --alt (media only).',
         run: help
     }
 };
@@ -1214,6 +1243,90 @@ function ownerBackfillWarning(name) {
         return undefined;
     return `${file} adds owner_id to ${tables.join(', ')}, which may already have rows. Backfill owner_id in this migration before the NOT NULL constraint, or reset the table.`;
 }
+function mediaRefusal(text, code = 1) {
+    return { code, data: { error: text }, text: `✗ ${text}` };
+}
+function replyError(reply) {
+    const error = Reflect.get(Object(reply), 'error');
+    return typeof error === 'string' ? error : undefined;
+}
+async function firstAdmin() {
+    const admins = await importExport('schema.ts', 'admins');
+    const first = Array.isArray(admins) ? admins[0] : undefined;
+    return typeof first === 'string' ? first : undefined;
+}
+async function addMedia(args, options) {
+    const [action, file] = args;
+    if (action !== 'add' || file === undefined) {
+        return mediaRefusal(`Say which photo to add\n${MEDIA_USAGE}`, 2);
+    }
+    const alt = options.get('--alt');
+    if (typeof alt !== 'string' || alt.trim() === '') {
+        return mediaRefusal(`--alt is required: describe this photo for someone who can't see it\n${MEDIA_USAGE}`, 2);
+    }
+    const path = resolve(process.cwd(), file);
+    if (!existsSync(path))
+        return mediaRefusal(`There is no file at ${file}`);
+    const bytes = readFileSync(path);
+    const extension = extname(path).toLowerCase();
+    if (HEIC_EXTENSIONS.has(extension) || isHeic(bytes)) {
+        return mediaRefusal(`${file} is an iPhone HEIC photo, which browsers can't show. Convert it to JPEG, then add the JPEG:\n  sips -s format jpeg ${file} --out ${file.replace(/\.[^.]+$/, '')}-converted.jpg`);
+    }
+    const type = PHOTO_TYPES[extension];
+    if (type === undefined) {
+        return mediaRefusal(`${file} is not a photo the web can show: use JPEG, PNG, WebP, GIF or AVIF`);
+    }
+    if (bytes.byteLength > MEDIA_LIMIT_BYTES) {
+        return mediaRefusal(`${file} is over 10 MB: export it smaller first`);
+    }
+    const admin = await firstAdmin();
+    if (admin === undefined) {
+        return mediaRefusal("Only an admin can add photos: put the owner's email in admins in schema.ts");
+    }
+    return withDevServer(async (url) => {
+        const origin = new URL(url).origin;
+        const signedIn = await fetch(new URL('/api/auth/dev-sign-in', url), {
+            method: 'POST',
+            headers: { origin, 'content-type': 'application/json' },
+            body: JSON.stringify({ email: admin })
+        });
+        if (!signedIn.ok) {
+            return mediaRefusal(`Could not sign in as ${admin} (HTTP ${signedIn.status})`);
+        }
+        const cookie = signedIn.headers
+            .getSetCookie()
+            .map((line) => line.split(';')[0])
+            .join('; ');
+        const form = new FormData();
+        form.set('file', new Blob([bytes], { type }), basename(path));
+        form.set('alt', alt.trim());
+        const response = await fetch(new URL('/api/media', url), {
+            method: 'POST',
+            headers: { origin, cookie },
+            body: form
+        });
+        const reply = await response.json().catch(() => undefined);
+        if (response.status === 404) {
+            return mediaRefusal("This app has no media table: add media from '@trypattern/sdk/schema' to tables in schema.ts, run app migration add_media, and bind an R2 bucket as MEDIA in wrangler.jsonc");
+        }
+        if (!response.ok) {
+            return mediaRefusal(`Could not add ${file}: ${replyError(reply) ?? `HTTP ${response.status}`}`);
+        }
+        const row = Object(reply);
+        return {
+            code: 0,
+            data: { media: row },
+            text: [
+                `✓ Added ${file} to media`,
+                `  id    ${String(row['id'])}`,
+                `  key   ${String(row['key'])}`,
+                `  size  ${String(row['width'])}×${String(row['height'])}`,
+                `  alt   ${String(row['alt'])}`,
+                '  show  <Image image={row} sizes="…" /> with that media row'
+            ].join('\n')
+        };
+    });
+}
 async function build() {
     let vite;
     try {
@@ -1328,7 +1441,7 @@ async function setup() {
 function help() {
     const width = Math.max(...Object.keys(COMMANDS).map((n) => n.length));
     const lines = Object.entries(COMMANDS).map(([name, cmd]) => `app ${name.padEnd(width)}  ${cmd.summary}`);
-    lines.push('Flags: --json (machine-readable stdout), <command> --help (details and its own flags: start --no-open, test --visual, screenshot --commands --name --as --signed-out, pull --code, publish --message)');
+    lines.push('Flags: --json (machine-readable stdout), <command> --help (details and its own flags: start --no-open, test --visual, screenshot --commands --name --as --signed-out, pull --code, publish --message, media --alt)');
     return {
         code: 0,
         data: {
@@ -1378,7 +1491,7 @@ async function main(argv) {
     const allowedFlags = [...GLOBAL_FLAGS, ...(command?.flags ?? [])];
     const unknownFlags = [...options.keys()].filter((f) => !allowedFlags.includes(f));
     let outcome;
-    const allowedPositionals = command?.takesArgument === true ? 2 : 1;
+    const allowedPositionals = 1 + (command?.argumentCount ?? (command?.takesArgument === true ? 1 : 0));
     if (command === undefined ||
         positional.length > allowedPositionals ||
         unknownFlags.length > 0 ||
@@ -1412,7 +1525,7 @@ async function main(argv) {
         };
     }
     else {
-        outcome = await command.run(positional[1], options);
+        outcome = await command.run(positional[1], options, positional.slice(1));
     }
     if (jsonMode) {
         const payload = {

package/dist/cli/publishing.js

@@ -412,6 +412,8 @@ function uploadForm(root, io, isStarter) {
     const form = new FormData();
     form.append(UPLOAD.compatibilityDate, String(Reflect.get(Object(wrangler), 'compatibility_date') ?? ''));
     form.append(UPLOAD.sdkVersion, io.sdkVersion);
+    const assets = Reflect.get(Object(wrangler), 'assets');
+    form.append(UPLOAD.runWorkerFirst, JSON.stringify(Reflect.get(Object(assets), 'run_worker_first') ?? []));
     for (const file of readdirSync(worker)) {
         if (!file.endsWith('.js') || isPrivatePath(file))
             continue;

package/dist/components/AppFrame.d.ts

@@ -1,15 +1,18 @@
 import type { ReactNode } from 'react';
+import type { FrameLook } from './frame.ts';
 import type { MenuEntry } from './MenuItems.tsx';
 import type { SidebarLink } from './Sidebar.tsx';
 type AppFrameProps = {
+    look?: FrameLook;
     workspace?: string;
     links: readonly SidebarLink[];
     workspaceMenu?: readonly MenuEntry[];
+    accountMenu?: readonly MenuEntry[];
     isSidebarToggled: boolean;
     onToggleSidebar: () => void;
     onCloseSidebar: () => void;
     onSearch?: () => void;
     children: ReactNode;
 };
-export declare function AppFrame({ workspace, links, workspaceMenu, isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }: AppFrameProps): import("react").JSX.Element;
+export declare function AppFrame({ look, workspace, links, workspaceMenu, accountMenu, isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }: AppFrameProps): import("react").JSX.Element;
 export {};

package/dist/components/AppFrame.js

@@ -3,10 +3,11 @@ import * as stylex from '@stylexjs/stylex';
 import { breakpoints, colors, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { useModel } from "../hooks/appContext.js";
 import { FrameContext } from "./frame.js";
+import { PlainSidebar } from "./PlainSidebar.js";
 import { Scrim } from "./Scrim.js";
 import { Sidebar } from "./Sidebar.js";
 import { useAnimatesOnChange } from "../hooks/useAnimatesOnChange.js";
-export function AppFrame({ workspace, links, workspaceMenu = [], isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }) {
+export function AppFrame({ look = 'shell', workspace, links, workspaceMenu = [], accountMenu = [], isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }) {
     const appSettings = useModel('appSettings');
     const account = useModel('account');
     const menu = account.user === null
@@ -16,13 +17,19 @@ export function AppFrame({ workspace, links, workspaceMenu = [], isSidebarToggle
             ...(workspaceMenu.length > 0 ? ['separator'] : []),
             { id: 'signOut', label: 'Log out', onSelect: account.signOut }
         ];
+    const accountEntries = [
+        ...accountMenu,
+        ...(accountMenu.length > 0 ? ['separator'] : []),
+        { id: 'signOut', label: 'Log out', onSelect: account.signOut }
+    ];
+    const search = onSearch === undefined
+        ? undefined
+        : () => {
+            onCloseSidebar();
+            onSearch();
+        };
     const isSidebarAnimating = useAnimatesOnChange(isSidebarToggled, SIDEBAR_ANIMATION_MS);
-    return (_jsx(FrameContext, { value: { onToggleSidebar }, children: _jsxs("div", { ...stylex.props(styles.frame), children: [_jsx(Sidebar, { workspace: workspace ?? appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
-                        ? undefined
-                        : () => {
-                            onCloseSidebar();
-                            onSearch();
-                        } }), _jsx(Scrim, { label: "Close sidebar", isOpen: isSidebarToggled, isAnimating: isSidebarAnimating, onClose: onCloseSidebar }), _jsx("main", { ...stylex.props(styles.panel, isSidebarToggled && styles.panelAlone), children: children })] }) }));
+    return (_jsx(FrameContext, { value: { look, onToggleSidebar }, children: _jsxs("div", { ...stylex.props(styles.frame, look === 'plain' && styles.plain), children: [look === 'plain' ? (_jsx(PlainSidebar, { title: workspace ?? appSettings.title, user: account.user, accountMenu: accountEntries, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: search })) : (_jsx(Sidebar, { workspace: workspace ?? appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: search })), _jsx(Scrim, { label: "Close sidebar", isOpen: isSidebarToggled, isAnimating: isSidebarAnimating, onClose: onCloseSidebar }), _jsx("main", { ...stylex.props(look === 'plain' ? styles.plainPanel : styles.panel, look === 'shell' && isSidebarToggled && styles.panelAlone), children: children })] }) }));
 }
 const SIDEBAR_ANIMATION_MS = 400;
 const styles = stylex.create({
@@ -55,6 +62,17 @@ const styles = stylex.create({
             [breakpoints.compact]: null
         }
     },
+    plain: {
+        backgroundColor: colors.page
+    },
+    plainPanel: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0,
+        overflow: 'hidden',
+        backgroundColor: colors.page
+    },
     panelAlone: {
         marginInlineStart: {
             default: space.xs,

package/dist/components/Card.d.ts

@@ -1,12 +1,17 @@
 import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
 import type { Placement } from './Placement.ts';
 type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type CardSurface = 'subtle' | 'strong' | 'container';
 type CardProps = {
     children: ReactNode;
-    surface?: 'subtle' | 'strong' | 'container';
+    surface?: CardSurface;
     padding?: CardPadding;
     paddingBlock?: CardPadding;
+    to?: AppPath;
+    href?: string;
+    onClick?: () => void;
     style?: Placement;
 };
-export declare function Card({ children, surface, padding, paddingBlock, style }: CardProps): import("react").JSX.Element;
+export declare function Card({ children, surface, padding, paddingBlock, to, href, onClick, style }: CardProps): import("react").JSX.Element;
 export {};

package/dist/components/Card.js

@@ -1,8 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
-import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
-export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, style }) {
-    return (_jsx("div", { ...stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], style), children: children }));
+import { Link as RouterLink } from 'react-router';
+import { colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact, textOf } from "./interaction.js";
+export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, style }) {
+    const isInteractive = to !== undefined || href !== undefined || onClick !== undefined;
+    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && hovers[surface], isInteractive && focusRing.visible, style).className;
+    const report = (event) => {
+        interact({
+            primitive: 'Card',
+            event,
+            label: textOf(children) || (href ?? to ?? '')
+        });
+        onClick?.();
+    };
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: () => report('open'), className: className, children: children }));
+    }
+    if (to !== undefined) {
+        return (_jsx(RouterLink, { to: to, onClick: () => report('navigate'), className: className, children: children }));
+    }
+    if (onClick !== undefined) {
+        return (_jsx(BaseButton, { nativeButton: false, render: _jsx("div", {}), onClick: () => report('click'), className: className, children: children }));
+    }
+    return _jsx("div", { className: className, children: children });
 }
 const styles = stylex.create({
     card: {
@@ -11,6 +34,19 @@ const styles = stylex.create({
         overflow: 'hidden',
         borderRadius: radii.xxl,
         boxShadow: shadows.default
+    },
+    interactive: {
+        color: 'inherit',
+        textAlign: 'start',
+        textDecoration: 'none',
+        outlineOffset: 0,
+        boxShadow: {
+            default: shadows.default,
+            ':hover': shadows.large
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, box-shadow'
     }
 });
 const surfaces = stylex.create({
@@ -24,6 +60,26 @@ const surfaces = stylex.create({
         backgroundColor: colors.container
     }
 });
+const hovers = stylex.create({
+    subtle: {
+        backgroundColor: {
+            default: colors.componentOnContainerSubtle,
+            ':hover': colors.componentOnContainerSubtleHover
+        }
+    },
+    strong: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    container: {
+        backgroundColor: {
+            default: colors.container,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    }
+});
 const paddings = stylex.create({
     none: { padding: 0 },
     sm: { padding: space.sm },

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import type { Placement } from './Placement.ts';
+type CheckboxProps = {
+    label: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+    style?: Placement;
+};
+export declare function Checkbox({ label, checked, disabled, onChange, style }: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/Checkbox.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, iconSizes, motion, radii, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact } from "./interaction.js";
+export function Checkbox({ label, checked, disabled = false, onChange, style }) {
+    return (_jsx(BaseCheckbox.Root, { "aria-label": label, checked: checked, disabled: disabled, onCheckedChange: (next) => {
+            interact({ primitive: 'Checkbox', event: 'change', label });
+            onChange(next);
+        }, className: (state) => stylex.props(styles.box, state.checked ? styles.on : styles.off, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(BaseCheckbox.Indicator, { className: stylex.props(styles.indicator).className, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.tick), children: _jsx("path", { d: "M5 12.5 9.5 17 19 7.5" }) }) }) }));
+}
+const styles = stylex.create({
+    box: {
+        position: 'relative',
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        padding: 0,
+        color: colors.onInvertedForeground,
+        outlineOffset: borders.thin,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, box-shadow',
+        '::before': {
+            position: 'absolute',
+            inset: `calc(-1 * ${space.xs})`,
+            content: '""',
+            borderRadius: radii.full
+        }
+    },
+    off: {
+        backgroundColor: 'transparent',
+        boxShadow: `0 0 0 ${borders.thin} ${colors.borderStrong} inset, 0 ${borders.thin} ${borders.thin} ${colors.borderSubtle}`
+    },
+    on: {
+        backgroundColor: colors.invertedSolid,
+        backgroundImage: `linear-gradient(180deg, color-mix(in oklab, ${colors.whiteFill} 15%, transparent), transparent)`,
+        boxShadow: `0 ${borders.thin} 0 color-mix(in oklab, ${colors.whiteFill} 15%, transparent) inset, 0 ${borders.thin} 2px color-mix(in oklab, ${colors.blackFill} 20%, transparent), 0 0 0 ${borders.hairline} color-mix(in oklab, ${colors.blackFill} 40%, transparent)`
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        backgroundImage: 'none',
+        boxShadow: 'none'
+    },
+    indicator: {
+        display: 'grid',
+        placeItems: 'center'
+    },
+    tick: {
+        display: 'block',
+        width: `calc(${iconSizes.md} * 9 / 16)`,
+        height: `calc(${iconSizes.md} * 9 / 16)`
+    }
+});

package/dist/components/Choice.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type ChoiceProps = {
+    value: string;
+    subline?: string;
+    isDisabled?: boolean;
+    children?: ReactNode;
+} & ({
+    title: string;
+    label?: string;
+} | {
+    title?: never;
+    label: string;
+});
+export declare function Choice({ value, title, label, subline, isDisabled, children }: ChoiceProps): import("react").JSX.Element;
+export {};