@montytools/cli 0.5.5 → 0.5.6

package/skills/monty-design/SKILL.md

@@ -1,45 +1,92 @@
 ---
 name: monty-design
-description: Design Monty app pages — Lyra shadcn styling (borderless, sharp-cornered, stock components only), dark-only theming, and the Monty chart language (square marks on real axes). Use whenever building or restyling UI in a Monty app; pages, dashboards, charts, stat tiles, KPI rows, tables, or any prompt about how a Monty app should look.
+description: Design Monty app pages — the Monty design tokens (type ladder, radius policy, elevation), Lyra shadcn styling (sharp surfaces, stock components only), dark-only theming, and the Monty chart language (square marks on real axes). Use whenever building or restyling UI in a Monty app; pages, dashboards, charts, stat tiles, KPI rows, tables, or any prompt about how a Monty app should look.
 ---
 
 # Designing Monty pages
 
 Monty is a B2B work OS. Apps render inside the platform shell, so a page is
-"designed" when it looks native to Monty: quiet, rectilinear, data-forward.
-The design system is already installed — your job is to NOT fight it.
-
-## The one law: stock Lyra, nothing invented
-
-Every app ships shadcn preset `radix-lyra` (see `components.json`). Lyra
-surfaces are **borderless and sharp-cornered**: `Card` is `rounded-none`,
-no border, a `bg-card` fill with a hairline `ring-1 ring-foreground/10`.
-
-- Use the components as they come: `Card`/`CardHeader`/`CardTitle`/
-  `CardDescription`/`CardContent`, `Table`, `Badge`, … Never rebuild a
-  surface as a styled `div` — a hand-rolled `rounded-xl border bg-…` card is
-  the canonical mistake.
-- Never invent tokens or raw colors. Semantic tokens only (`bg-background`,
-  `text-muted-foreground`, `border-border`, `var(--chart-2)`, …).
-- Sanctioned overrides are content-level only: e.g. `text-2xl tabular-nums`
-  on a stat value, a width on a label column. If an override styles a
+"designed" when it is indistinguishable from the shell around it: quiet,
+rectilinear, data-forward. The design system is already installed — the shell
+and every app share ONE token sheet (`@montytools/sdk/tokens.css`, imported
+by `src/index.css`) and one component surface. Your job is to NOT fight it.
+
+## The one law: tokens and stock components, nothing invented
+
+- Use components as they come: `Card`/`CardHeader`/`CardTitle`/
+  `CardDescription`/`CardContent`, `Table`, `Badge`, `Button`, … Never
+  rebuild a surface as a styled `div` — a hand-rolled `rounded-xl border`
+  card is the canonical mistake.
+- Never write a raw value the tokens already name: no hex/oklch colors, no
+  `text-[13px]`, no `rounded-[10px]`, no hand-written `shadow-[…]`.
+  Semantic utilities only (`bg-background`, `text-muted-foreground`,
+  `var(--chart-2)`, `shadow-control`, …).
+- Sanctioned overrides are content-level only: `tabular-nums` on values, a
+  width on a label column, `capitalize` on an enum. If an override styles a
   SURFACE, you are off the system.
 
+## The type ladder — six styles, and fewer is better
+
+One class per role; each carries its size, line-height, weight, and
+tracking. **Hierarchy comes from weight and ink, never from inventing
+sizes.**
+
+| Class | Size | Use |
+|---|---|---|
+| `text-tick` | 10/12 | chart axis ticks ONLY |
+| `text-meta` | 12/16 | column headers, chips, captions, timestamps, secondary values |
+| `text-body` | 13/20 | THE DEFAULT — content, controls, table cells (already on `body`) |
+| `text-title` | 14/20 · 500 | card titles, page-header titles, nav rows |
+| `text-heading` | 18/24 · 600 | page-level headings (rare — `PageHeader` owns page tops) |
+| `text-stat` | 24/32 · 600 | stat-tile values, always with `tabular-nums` |
+
+A typical page uses three: `text-body` (inherited — write nothing),
+`text-meta` for secondary lines, `text-stat` on tile values. Reach for the
+others only when the role in the table matches. Weights: default 400,
+`font-medium` for titled/interactive text; 600 arrives only via
+`text-heading`/`text-stat`. Never `font-bold`, never `text-xs/sm/lg/2xl` —
+those sizes exist for legacy chrome, not for pages.
+
+## Radius policy — sharp, everywhere
+
+Lyra is rectilinear: surfaces, controls, and overlays are ALL square-
+cornered. Cards/tables/tiles/chips are `rounded-none` with `bg-card ring-1
+ring-foreground/10` hairlines, never borders; buttons, inputs, dialogs, and
+popovers come sharp from the stock components. Elevation and hierarchy come
+from hairlines and the three shadows, never from softened corners.
+`rounded-full` (avatars, status dots) is the ONE exception — write no other
+`rounded-*` class yourself; the semantic names the chrome uses
+(`rounded-control`, `rounded-overlay`) resolve to 0 by policy.
+
+## Color and status
+
+The palette is the platform's; you never pick colors. Ground `bg-background`,
+surface `bg-card`, ink `text-foreground`/`text-muted-foreground`, quiet fill
+`bg-accent`, the one accent `bg-primary`, links `text-link`. Status is a
+**dot + muted text**, never a colored pill: `text-success`, `text-warning`,
+`text-destructive` for the dot/figure, label in `text-muted-foreground`.
+Elevation: `shadow-control` on rest-state controls, `shadow-btn-primary` on
+the one primary action, `shadow-menu` on overlays — never `shadow-md/lg/xl`.
+
+## Spacing — the 4px grid, three names
+
+Page bodies are `p-page` (24px); cards pad themselves; card grids are
+`gap-3` (12px); control rows `gap-2`. Stay on the default Tailwind steps
+(`p-1`…`p-6`); if you're typing an arbitrary value like `p-[18px]`, the
+layout is wrong, not the scale.
+
 ## Dark-only, in the shell's palette
 
-The Monty shell is dark-only; a light page inside it reads as broken. The
-app theme's `.dark` tokens mirror the shell palette (#101112 ground,
-#17181A cards, #266DF0 primary) so embedded pages are seamless — never
-retheme or hand-pick your own dark colors. Until
-the template ships dark by default: `class="dark"` on `<html>` in
-`index.html`, and any boot-splash background set to the dark `--background`
-value. Verify your page against the shell, not in isolation.
+Monty is dark-only; the tokens ship the shell palette (#101112 ground) and
+`index.html` carries `class="dark"` plus the dark boot splash. Never
+retheme, never hand-pick a dark color, and verify your page against the
+shell (`/apps/<slug>/…`), not the bare dev port.
 
 ## Page anatomy
 
 Every page opens with the platform chrome from `@montytools/sdk/ui` — the
-SAME components the shell renders system table views with, so a custom page
-is indistinguishable from a record page. Never hand-roll the header bar.
+SAME components the shell renders system table views with. Never hand-roll
+the header bar.
 
 ```tsx
 import { PageHeader, PageHeaderButton } from "@montytools/sdk/ui";
@@ -50,7 +97,7 @@ import { PageHeader, PageHeaderButton } from "@montytools/sdk/ui";
     <PageHeaderButton primary onClick={main}><Plus className="size-3.5" /> New</PageHeaderButton>
   </PageHeader>
   <div className="min-h-0 flex-1 overflow-auto">
-    <div className="flex flex-col gap-3 p-6 pt-4">
+    <div className="flex flex-col gap-3 p-page pt-4">
       {/* KPI row */}
       <div className="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-3">…</div>
       {/* section cards */}
@@ -72,36 +119,35 @@ A stat tile is a stock Card, nothing more:
 <Card size="sm">
   <CardHeader>
     <CardDescription>Leads added</CardDescription>
-    <CardTitle className="text-2xl tabular-nums">{value}</CardTitle>
-    <div className="text-xs text-muted-foreground">{delta or context}</div>
+    <CardTitle className="text-stat tabular-nums">{value}</CardTitle>
+    <div className="text-meta text-muted-foreground">{delta or context}</div>
   </CardHeader>
 </Card>
 ```
 
 ## Charts: sharp marks on real axes
 
-Chart marks are **sharp rectangles — no rounded corners, ever** (matches the
-Lyra rectilinear look). The three failure modes to avoid: pill "track+fill"
-bars (read as progress bars), rounded caps (misstate where a value ends),
-and floating bars with no axis (nothing anchors the eye).
+Chart marks are **sharp rectangles — no rounded corners, ever**. The three
+failure modes to avoid: pill "track+fill" bars (read as progress bars),
+rounded caps (misstate where a value ends), and floating bars with no axis
+(nothing anchors the eye).
 
 - **Horizontal bars**: grow from a left hairline baseline
   (`border-l border-foreground/25`) over quarter gridlines
   (`absolute left-1/4|1/2|3/4 border-l border-foreground/10` —
   foreground-alpha so hairlines read on any surface), bar `h-4`,
-  fill `var(--chart-2)`. Label left in `text-muted-foreground`
-  (fixed-width, truncate); count right in `font-medium tabular-nums`,
-  zero values muted with no fill.
+  fill `var(--chart-2)`. Label left in `text-body text-muted-foreground`
+  (fixed-width, truncate); count right in `text-body font-medium
+  tabular-nums`, zero values muted with no fill.
 - **Columns**: a value axis with a baseline (`border-foreground/25`) plus
-  hairline gridlines (`border-foreground/10`) and tiny tabular tick labels (10px, muted,
-  right-aligned in a left gutter). Round the axis top to a "nice" integer
-  (≤4 exact; else the next multiple of 5/10/50) so ticks stay honest.
-  Direct value labels above non-zero columns.
-- **Color**: one accent ramp from the Monty palette — `var(--chart-2)` for
-  the emphasized series (today, the selection), `var(--chart-5)` for
-  context. The values are the platform's (Attio-blue family, matching the
-  shell); never restate them as hex, never a hue per category, and text
-  never wears the data color.
+  hairline gridlines (`border-foreground/10`) and `text-tick` tabular tick
+  labels (muted, right-aligned in a left gutter). Round the axis top to a
+  "nice" integer (≤4 exact; else the next multiple of 5/10/50) so ticks
+  stay honest. Direct `text-tick` value labels above non-zero columns.
+- **Color**: one accent ramp — `var(--chart-2)` for the emphasized series
+  (today, the selection), `var(--chart-5)` for context. Never restate the
+  values as hex, never a hue per category, and text never wears the data
+  color.
 - **Numbers**: `tabular-nums` everywhere values align; money via
   `toLocaleString(undefined, { style: "currency", currency: "USD" })`
   (compact notation on tiles, full in tables).
@@ -109,15 +155,18 @@ and floating bars with no axis (nothing anchors the eye).
   muted line ("No activity logged on this day.") — structure stays, zeros
   carry meaning.
 
-Reference implementations: `ColumnChart` and `BarRow` in
-`demos/crm/src/routes/stats.tsx` (day-selector columns, status bars) and
-`demos/crm-v2/src/routes/stats.tsx` (money detail on bars, top-deals table).
+Reference implementations: `demos/crm-v2/src/routes/stats.tsx` (KPI tiles,
+day-selector columns, status bars, top-deals table) and
+`demos/crm-v2/src/routes/reports.tsx` (stat tiles over live records).
 
 ## Checklist before you call a page done
 
-1. No `border`/`rounded-*` on any surface you authored — surfaces are stock
-   Lyra components.
-2. No rounded corners on any chart mark; every bar/column sits on an axis.
-3. Dark: the page blends into the shell with no light seams.
-4. Values in tabular figures; labels in text tokens; one accent hue.
-5. Screenshot it inside the shell (`/apps/<slug>/…`), not just the dev port.
+1. No `border`/`rounded-*` anywhere you authored (`rounded-full` on dots
+   and avatars is the one exception) — surfaces and controls are stock
+   components, sharp by policy.
+2. No text class outside the six ladder styles; no arbitrary values
+   (`text-[…]`, `bg-[#…]`, `rounded-[…]`, `shadow-[…]`).
+3. No rounded corners on any chart mark; every bar/column sits on an axis.
+4. Dark: the page blends into the shell with no light seams.
+5. Values in tabular figures; status as dot + muted text, never a pill.
+6. Screenshot it inside the shell (`/apps/<slug>/…`), not just the dev port.

package/template/AGENTS.md

@@ -10,7 +10,7 @@ logic.** Everything below is the complete contract.
 
 | File | What it is |
 |---|---|
-| `monty.config.ts` | Your data schema — plain zod. The ONLY place data shapes are defined. Also `name` + `icon` (any [Tabler](https://tabler.io/icons) icon name, e.g. `"receipt"`, `"users"`) — Monty renders your app's logo tile from it. |
+| `src/monty.gen.ts` | The app's schema, GENERATED from the workspace config — never edit it (it is overwritten on every sync). Import `{ app }` from it for typed hooks. Change the schema with `monty schema set` (read it first with `monty schema`); a running `monty dev` regenerates this file within a heartbeat. |
 | `src/routes/` | Your UI — TanStack Router file routes (`index.tsx` = `/`). The starter `index.tsx` is a blank-canvas placeholder — replace it with the real app. |
 | `src/main.tsx` | Wiring. Do not edit. |
 
@@ -31,16 +31,26 @@ logic.** Everything below is the complete contract.
    `monty components docs <name>` shows a component's source before installing.
    Icons from `lucide-react`. Don't install other component libraries or
    write raw-color CSS — use semantic tokens (`bg-background`,
-   `text-muted-foreground`, …). Don't edit `src/index.css` theme tokens.
-   The look is Lyra: surfaces are stock components — borderless,
-   sharp-cornered — never hand-styled divs; chart marks are sharp
+   `text-muted-foreground`, …). Don't edit `src/index.css`; the design
+   tokens come from `@montytools/sdk/tokens.css` — the same sheet the Monty
+   shell runs on, so styling with tokens IS what makes the app look native.
+   Text is the six-step ladder (`text-tick/meta/body/title/heading/stat`);
+   `text-body` is the default and already on `body`, so most text needs NO
+   size class at all — the fewer styles a page states, the more native it
+   looks. Never arbitrary values (`text-[15px]`, `bg-[#…]`, `rounded-[…]`).
+   The look is Lyra: rectilinear — surfaces AND controls are stock
+   components, sharp-cornered by policy (`rounded-full` on dots/avatars is
+   the one exception), never hand-styled divs; chart marks are sharp
    rectangles on real axes. The `monty-design` skill is the full spec.
-4. **Schema changes = edit `monty.config.ts` and save.** Types update
-   immediately. Prefer additive changes; give new fields `.optional()` or
-   `.default(...)` so existing records stay readable. Describe fields for
-   the next agent that fills them in: `.describe("what this holds")` on any
-   field, and `montySelect`/`montyMultiSelect` instead of bare `z.enum` so
-   every option says WHEN it applies, not what the word means.
+4. **Schema changes go through the door, never a file.** Read the config
+   with `monty schema` (pure JSON on stdout), edit it, write it back whole
+   with `monty schema set '<json>'` (or pipe: `monty schema set -`) —
+   validated, CAS-guarded, live in the workspace within seconds, and
+   `src/monty.gen.ts` (your typed view) regenerates automatically while
+   `monty dev` runs. Prefer additive changes; give new fields defaults or
+   mark them optional so existing records stay readable. Describe fields
+   for the next agent that fills them in (`description` on the field spec;
+   enum options say WHEN they apply, not what the word means).
 5. **You are not done until the work is saved.** After every meaningful
    change verified in dev, run `monty save "<what changed>"` — it builds,
    typechecks, and pushes the working copy to the cloud copy, like
@@ -48,8 +58,12 @@ logic.** Everything below is the complete contract.
 
 ## Data: define, then use
 
+`src/monty.gen.ts` mirrors the workspace config as exactly this shape —
+zod tables wrapped in `defineApp` — so this is what your typed `app`
+object looks like (generated; declare the real thing via `monty schema set`):
+
 ```ts
-// monty.config.ts
+// src/monty.gen.ts (GENERATED — read, never edit)
 import { defineApp, montyFileSchema, montySelect } from "@montytools/sdk";
 import { z } from "zod";
 
@@ -73,7 +87,7 @@ export const app = defineApp({
 
 ```tsx
 import { useList, useRecord, useInsert, useUpdate, useRemove, useMembers, useUploadFile, useFileUrl } from "@montytools/sdk/react";
-import { app } from "../../monty.config";
+import { app } from "../monty.gen";
 
 const { data, status, loadMore } = useList(app, "expenses", {
   filter: { status: "submitted" },   // equality on schema fields only
@@ -181,14 +195,14 @@ Rules that matter:
   ```tsx
   import { PageHeader, PageHeaderButton } from "@montytools/sdk/ui";
 
-  <div className="flex h-full min-h-dvh flex-col">
+  <div className="flex h-full min-h-dvh flex-col bg-background">
     <PageHeader icon={ChartColumn} title="Reports" meta="42 rows">
       <PageHeaderButton onClick={exportCsv}>Export</PageHeaderButton>
       <PageHeaderButton primary onClick={openNew}>
         <Plus className="size-3.5" /> New
       </PageHeaderButton>
     </PageHeader>
-    <main className="min-h-0 flex-1 overflow-auto p-6">…</main>
+    <main className="min-h-0 flex-1 overflow-auto p-page">…</main>
   </div>
   ```
 
@@ -235,7 +249,7 @@ Every platform error is one line shaped like:
 | Code | Meaning |
 |---|---|
 | `VALIDATION` | Payload doesn't match your zod schema (unknown fields are also an error) — fix the payload or the schema. |
-| `UNKNOWN_TABLE` | Table name not in `monty.config.ts` `tables`. |
+| `UNKNOWN_TABLE` | Table name not in the workspace config's `tables` (`monty schema` shows it). |
 | `NOT_FOUND` | Stale, foreign, or WRONG-TABLE record id — ids come from `useList`/`useRecord` on the same table; never hard-code or mix them. |
 | `INVALID_SCHEMA` | A table field uses a reserved name (`_*`, `updatedAt`, `createdBy`) — rename it. |
 | `SCHEMA_DRIFT` (warning) | Stored rows predate your latest schema change; nothing crashes, but make changed fields `.optional()`/`.default(...)`. |
@@ -243,7 +257,7 @@ Every platform error is one line shaped like:
 | `UNAUTHENTICATED` / `NO_ACTIVE_WORKSPACE` | App isn't running through the Monty host/dev shell. |
 | `MISSING_ENV` / `NO_PROVIDER` | `.env.local` or the `<MontyProvider>` in `main.tsx` was removed. |
 
-## Server code (optional): functions, public endpoints, schedules
+## Server code (optional): functions, shared addresses, clock rules
 
 When logic must not run in the browser (private tables, third-party APIs with
 secret keys, webhooks, clocks), create `server/index.ts` with named async
@@ -254,7 +268,7 @@ tables, including ones the UI never exposes), `ctx.files` (platform file
 storage: `upload(data, {name?, contentType?}) → MontyFile`,
 `download(fileOrId) → Blob`, `remove(fileOrId)` — same descriptors as the
 `useUploadFile` hook, 10MB cap), `ctx.secrets` (see below), `ctx.viewer`
-(who called: member session/visitor/schedule/none), and `ctx.track()`
+(who called: member session/visitor/rule/none), and `ctx.track()`
 (emit an event).
 
 ```ts
@@ -267,8 +281,10 @@ export async function score(args: { sessionId: string }, ctx: MontyFnContext) {
   return { verdict: weights.length > 0 ? "ok" : "empty" };
 }
 
-// 2) PUBLIC endpoint — declared in monty.config.ts `publicFns: ["stripe"]`,
-// then ANYONE on the internet can call GET/POST /__monty/public/stripe.
+// 2) SHARED OUTWARD — after `monty save` ships it, run
+// `monty public set stripe` (the whole list; it replaces) and ANYONE on
+// the internet can call GET/POST /__monty/public/stripe — instantly, no
+// second save.
 // Verify a signature from ctx.secrets against the RAW req.body before
 // trusting anything; return { status, body?, contentType? } to control the
 // response (or return data for 200 JSON, or nothing for {"ok":true}).
@@ -280,10 +296,12 @@ export async function stripe(req: MontyPublicRequest, ctx: MontyFnContext) {
   return { status: 200, body: "ok" };
 }
 
-// 3) SCHEDULED — declared in monty.config.ts `schedule: { digest: "0 9 * * *" }`
-// (5-field cron, UTC; max 3). Runs as digest({}, ctx) with
-// ctx.viewer = { lane: "schedule", cron }. Make it idempotent — re-runs happen.
-export async function digest(_args: Record<string, unknown>, ctx: MontyFnContext) { /* … */ }
+// 3) ON THE CLOCK — wire an `every` rule after the save ships the function
+// (rules door / MCP rules_update): { name: "daily-digest", on: "every",
+// cron: "0 9 * * *", run: "digest" } (5-field cron, UTC; max 3 every
+// rules). The platform fires it as digest({ event }, ctx) with
+// event = { type: "every", cron }. Make it idempotent — re-runs happen.
+export async function digest(args: { event?: { cron?: string } }, ctx: MontyFnContext) { /* … */ }
 
 // 4) onEvent — reserved name: the platform calls it after every accepted
 // track() event. Forward to Slack/Meta/PostHog/your CRM here, with your keys.
@@ -291,16 +309,17 @@ export async function onEvent(event: { name: string }, ctx: MontyFnContext) { /*
 ```
 
 From the UI: `const score = useServerFn<Result>(app, "score"); await score({ sessionId })`.
-Public functions are NOT callable through `useServerFn` — only at their
-`/__monty/public/<name>` URL (and vice versa: undeclared functions are never
-public).
+Shared (public) functions are NOT callable through `useServerFn` — only at
+their `/__monty/public/<name>` URL (and vice versa: unshared functions are
+never public). `monty public` lists what is shared.
 
 **Secrets:** `monty secret set STRIPE_KEY` stores a key for Live (write-only,
 never in code or config). In a dev session, put the same names in the
 gitignored `.monty/secrets.json`. Both arrive as `ctx.secrets.STRIPE_KEY`.
 
-**Session behavior:** `monty dev` runs your schedules for real (a `cron:` line
-prints per firing, UTC) and serves public functions at
+**Session behavior:** while `monty dev` runs, the platform dispatches your
+`every` rules to this session (each firing journals in the app's rule runs)
+and serves shared functions at
 `http://localhost:<port>/__monty/public/<name>` — curl them to test.
 
 ## Dev loop

package/template/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,13 +9,13 @@
     <div id="root">
       <!-- Boot splash: the first paint, shown while the JS loads. React
            replaces it with the SDK's identical MontySplash, so a cold open
-           is one continuous visual. If you theme the app dark-only, change
-           the background below to match. -->
+           is one continuous visual. The background matches the platform's
+           dark --background (raw hex is unavoidable pre-CSS). -->
       <style>
         @keyframes monty-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
       </style>
-      <div style="display: grid; place-items: center; min-height: 100vh; background: oklch(1 0 0)">
-        <div style="width: 10px; height: 10px; border-radius: 999px; background: #999; animation: monty-pulse 1.2s ease-in-out infinite"></div>
+      <div style="display: grid; place-items: center; min-height: 100vh; background: #101112">
+        <div style="width: 10px; height: 10px; border-radius: 999px; background: #666; animation: monty-pulse 1.2s ease-in-out infinite"></div>
       </div>
     </div>
     <script type="module" src="/src/main.tsx"></script>

package/template/package.json

@@ -9,8 +9,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@fontsource-variable/roboto": "^5.2.10",
-    "@montytools/sdk": "^0.2.5",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@montytools/sdk": "^0.2.6",
     "@tanstack/react-router": "1.170.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/template/src/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 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-none border border-transparent px-2 py-0.5 text-xs 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-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-meta 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-3!",
   {
     variants: {
       variant: {

package/template/src/components/ui/button.tsx

@@ -5,13 +5,13 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 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-1 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",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-control border border-transparent bg-clip-padding text-body font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 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-1 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",
+        default: "bg-primary text-primary-foreground shadow-btn-primary hover:bg-primary/90",
         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",
+          "border-transparent bg-background shadow-control hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
         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:
@@ -23,12 +23,12 @@ const buttonVariants = cva(
       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-none px-2 text-xs 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-none px-2.5 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-6 gap-1 rounded-control-sm px-2 text-meta 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-control px-2.5 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-none [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-7 rounded-none",
+        "icon-xs": "size-6 rounded-control-sm [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-control",
         "icon-lg": "size-9",
       },
     },

package/template/src/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-none bg-card py-(--card-spacing) text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-none bg-card py-(--card-spacing) text-body text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-sm font-medium group-data-[size=sm]/card:text-sm",
+        "font-heading text-title group-data-[size=sm]/card:text-title",
         className
       )}
       {...props}
@@ -50,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      className={cn("text-meta text-muted-foreground", className)}
       {...props}
     />
   )

package/template/src/components/ui/empty.tsx

@@ -59,7 +59,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-title"
-      className={cn("font-heading text-sm font-medium", className)}
+      className={cn("font-heading text-title", className)}
       {...props}
     />
   )
@@ -70,7 +70,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-meta text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="empty-content"
       className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance",
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-body text-balance",
         className
       )}
       {...props}

package/template/src/components/ui/field.tsx

@@ -28,7 +28,7 @@ function FieldLegend({
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        "mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm",
+        "mb-2.5 font-medium data-[variant=label]:text-meta data-[variant=legend]:text-title",
         className
       )}
       {...props}
@@ -118,7 +118,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-body group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
@@ -131,7 +131,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-left text-meta leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
@@ -153,7 +153,7 @@ function FieldSeparator({
       data-slot="field-separator"
       data-content={!!children}
       className={cn(
-        "relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2",
+        "relative -my-2 h-5 text-meta group-data-[variant=outline]/field-group:-mb-2",
         className
       )}
       {...props}
@@ -214,7 +214,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-xs font-normal text-destructive", className)}
+      className={cn("text-meta font-normal text-destructive", className)}
       {...props}
     >
       {content}

package/template/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-control border border-input bg-transparent px-2.5 py-1 text-body transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-body file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-body dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/template/src/components/ui/label.tsx

@@ -11,7 +11,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-meta leading-none 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}