@montytools/cli 0.5.4 → 0.5.6

package/template/AGENTS.md

@@ -4,13 +4,13 @@ Monty is a work OS: your app runs inside a team's workspace, on shared reactive
 data, with auth and deployment handled by the platform. **You only write product
 logic.** Everything below is the complete contract.
 
-Folders are managed for you: this app lives in `~/Monty/<slug>`. `monty current` confirms where you are; `cd "$(monty select <slug>)"` jumps to any app; never create app folders by hand.
+`monty current` confirms which app folder you are in. Never create app folders by hand — `monty create` and `monty connect` do it.
 
 ## The three files that matter
 
 | 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. |
 
@@ -24,22 +24,33 @@ Folders are managed for you: this app lives in `~/Monty/<slug>`. `monty current`
 3. **UI is shadcn/ui, preconfigured — never build components from scratch.**
    Before building any UI piece, run `monty components`. If the capability is
    listed (data tables, kanban, calendar, combobox, file upload, rich text,
-   charts, …) install the curated implementation with `monty add <name>`;
-   core shadcn components install by bare name (`monty add dialog tabs`).
-   Everything lands in `src/components/ui/*` already carrying the Monty
-   theme. `monty docs <name>` shows a component's source before installing.
+   charts, …) install the curated implementation with
+   `monty components add <name>`; core shadcn components install by bare
+   name (`monty components add dialog tabs`). Everything lands in
+   `src/components/ui/*` already carrying the Monty theme.
+   `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
@@ -47,8 +58,12 @@ Folders are managed for you: this app lives in `~/Monty/<slug>`. `monty current`
 
 ## 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";
 
@@ -72,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
@@ -180,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>
   ```
 
@@ -234,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(...)`. |
@@ -242,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
@@ -253,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
@@ -266,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}).
@@ -279,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.
@@ -290,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.4",
+    "@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}

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

@@ -44,7 +44,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-control border border-input bg-transparent py-2 pr-2 pl-2.5 text-body whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-control *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -69,7 +69,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-overlay bg-popover text-popover-foreground shadow-menu duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
         align={align}
         {...props}
@@ -97,7 +97,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("px-2 py-2 text-xs text-muted-foreground", className)}
+      className={cn("px-2 py-2 text-meta text-muted-foreground", className)}
       {...props}
     />
   )
@@ -112,7 +112,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-body outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}

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

@@ -10,7 +10,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
     >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-xs", className)}
+        className={cn("w-full caption-bottom text-body", className)}
         {...props}
       />
     </div>
@@ -68,7 +68,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle text-meta font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -96,7 +96,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("mt-4 text-xs text-muted-foreground", className)}
+      className={cn("mt-4 text-meta text-muted-foreground", className)}
       {...props}
     />
   )

package/template/src/index.css

@@ -1,138 +1,27 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/roboto";
+@import "@fontsource-variable/inter";
+/* The Monty design tokens — colors, type ladder, radius policy, elevation.
+   The ONE place style values live; nothing in an app restates them. */
+@import "@montytools/sdk/tokens.css";
 
 /* Shared platform chrome (@montytools/sdk/ui) ships Tailwind classes in its
    dist — scan it so they compile. */
-@source "../node_modules/@montytools/sdk/dist/ui.js";
+@source "../node_modules/@montytools/sdk/dist";
 
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: 'Roboto 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.153 0.006 107.1);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.153 0.006 107.1);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.153 0.006 107.1);
-    --primary: oklch(0.511 0.096 186.391);
-    --primary-foreground: oklch(0.984 0.014 180.72);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.966 0.005 106.5);
-    --muted-foreground: oklch(0.58 0.031 107.3);
-    --accent: oklch(0.966 0.005 106.5);
-    --accent-foreground: oklch(0.228 0.013 107.4);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.93 0.007 106.5);
-    --input: oklch(0.93 0.007 106.5);
-    --ring: oklch(0.737 0.021 106.9);
-    --chart-1: oklch(0.855 0.138 181.071);
-    --chart-2: oklch(0.704 0.14 182.503);
-    --chart-3: oklch(0.6 0.118 184.704);
-    --chart-4: oklch(0.511 0.096 186.391);
-    --chart-5: oklch(0.437 0.078 188.216);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.988 0.003 106.5);
-    --sidebar-foreground: oklch(0.153 0.006 107.1);
-    --sidebar-primary: oklch(0.6 0.118 184.704);
-    --sidebar-primary-foreground: oklch(0.984 0.014 180.72);
-    --sidebar-accent: oklch(0.966 0.005 106.5);
-    --sidebar-accent-foreground: oklch(0.228 0.013 107.4);
-    --sidebar-border: oklch(0.93 0.007 106.5);
-    --sidebar-ring: oklch(0.737 0.021 106.9);
-}
-
-.dark {
-    --background: #101112;
-    --foreground: #F1F2F3;
-    --card: #17181A;
-    --card-foreground: #F1F2F3;
-    --popover: #17181A;
-    --popover-foreground: #F1F2F3;
-    --primary: #266DF0;
-    --primary-foreground: #FFFFFF;
-    --secondary: rgb(255 255 255 / 0.05);
-    --secondary-foreground: #F1F2F3;
-    --muted: rgb(255 255 255 / 0.05);
-    --muted-foreground: rgb(255 255 255 / 0.6);
-    --accent: rgb(255 255 255 / 0.05);
-    --accent-foreground: #F1F2F3;
-    --destructive: oklch(0.68 0.19 25);
-    --border: #1B1C1F;
-    --input: #212224;
-    --ring: #266DF0;
-    --chart-1: #266DF0;
-    --chart-2: #4E8CFC;
-    --chart-3: #9B69FF;
-    --chart-4: #6EA5F7;
-    --chart-5: #2D3A55;
-    --sidebar: #101112;
-    --sidebar-foreground: #F1F2F3;
-    --sidebar-primary: #266DF0;
-    --sidebar-primary-foreground: #FFFFFF;
-    --sidebar-accent: rgb(255 255 255 / 0.05);
-    --sidebar-accent-foreground: #F1F2F3;
-    --sidebar-border: #1B1C1F;
-    --sidebar-ring: #266DF0;
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
     }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-sans text-body text-foreground;
+    -webkit-font-smoothing: antialiased;
     }
   button:not(:disabled), [role="button"]:not(:disabled) {
     cursor: pointer;
     }
-  html {
-    @apply font-sans;
-    }
 }

package/template/src/main.tsx

@@ -4,7 +4,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { MontyProvider, MontySplash } from "@montytools/sdk/react";
 
 import "./index.css";
-import { app } from "../monty.config";
+import { app } from "./monty.gen";
 import { routeTree } from "./routeTree.gen";
 
 // defaultPendingComponent: lazy route chunks show the same splash the rest

package/template/src/monty.gen.ts

@@ -0,0 +1,16 @@
+import { defineApp } from "@montytools/sdk";
+
+// GENERATED by Monty from the app's config stored in the workspace.
+// DO NOT EDIT: edits here never land anywhere, and this file is
+// overwritten on every sync (a running `monty dev` regenerates it within
+// a heartbeat of a remote change; `monty save` and `monty schema pull`
+// refresh it too). Change the app through the doors instead:
+// `monty schema set`, the MCP schema_update tool, or Configuration.
+// Import { app } from it for typed SDK hooks — that part is yours.
+export const app = defineApp({
+  slug: "new-app",
+  name: "New app",
+  icon: "layout-grid",
+  tables: {},
+});
+export type App = typeof app;