makersclaw 0.7.0 → 0.8.0

package/templates/next/files/components/ui/index.js

@@ -48,6 +48,7 @@ export { Stat, StatGroup, Delta, StatusDot, Legend, Meter } from "./stat";
 export { Steps } from "./steps";
 export { Separator, Kbd, KbdGroup, AspectRatio } from "./separator";
 export { ScrollArea } from "./scroll-area";
+export { AppLayout, DocumentLayout } from "./layout";
 export { Slider } from "./slider";
 export { InputGroup, PasswordInput } from "./input-group";
 export { Image } from "./image";

package/templates/next/files/components/ui/layout.jsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { cx } from "./cx";
+import { Button, IconButton } from "./button";
+import { Sheet } from "./sheet";
+
+// Layouts — who owns the window's height, and who scrolls.
+//
+// Every design-first build of 2026-10-07 shipped a shell of `min-h-dvh`
+// that grew with its content: the page itself scrolled, no pane scrolled
+// on its own, and a footer, an inspector or a button below a long
+// article sat past the end of the iframe, where nothing could reach it.
+// So the kit owns the window's height, once, and the app's code never
+// sizes anything by the window (`npm run check` refuses min-h-dvh,
+// h-screen, 100vh, h-[80vh]… outside the kit, rule 12).
+//
+// AppLayout — the app frame. Exactly one owns the viewport: the
+// outermost. A layout inside another fills the slot it is in instead,
+// whatever `height` says, so there is never a second viewport owner. The
+// shell (app/shell.jsx) is the outermost one in every app the template
+// lays; a surface that needs an inspector or a fill of its own returns
+// an AppLayout as its outermost element, and it fills the shell's
+// content edge to edge (the content's padding drops for it).
+//
+//   header         the top bar, always in view (title, the surface's
+//                  commands). The bar draws its own bottom border
+//   navigation     the surfaces, a page tree: a rail beside the content
+//                  from md (768px); below md a Sheet from the leading
+//                  edge, opened by the menu button in the top bar. A
+//                  press on a link or a button inside closes it
+//   navigationLabel  the Sheet's title and the menu button's words
+//                  ("Navigation")
+//   navigationWidth  the rail, in px (176; 160 to 320)
+//   children       the content. It scrolls inside its own region
+//   contentMode    scroll (the default): the content region scrolls ·
+//                  fill: the region is a bounded flex column and the
+//                  child owns its own scrolling (a canvas, a grid, a
+//                  spreadsheet, an editor that scrolls itself)
+//   contentLabel   the content region's name for a screen reader ("Content")
+//   contentClassName  spacing and token backgrounds for the content
+//                  region (p-4 sm:p-6, bg-card). Never a height or an
+//                  overflow: the layout owns those
+//   scrollKey      when it changes the content scrolls back to its top
+//                  and the navigation Sheet closes: pass the route
+//                  (usePathname()), since the frame stays mounted while
+//                  the surfaces change inside it
+//   inspector      the details, review or feedback panel beside the
+//                  content, scrolling on its own
+//   inspectorLabel the inspector region's name ("Details")
+//   inspectorWidth in px (360; 240 to 560). Builds have needed 300 and 440
+//   inspectorAt    md · lg (the default) · xl: the width from which the
+//                  inspector sits beside the content
+//   footer         under the content, always in view (the save state,
+//                  the composer, the commands for what is above)
+//   height         viewport (the default): the frame is the window's
+//                  height · parent: it fills a bounded parent. Nested,
+//                  it is parent whatever this says
+//   className      the frame's own tokens; never a height or an overflow
+//
+// Below `inspectorAt`, where there is no room for two columns:
+//   - contentMode scroll: the content and the inspector share ONE scroll
+//     region, the inspector after the content. Everything is reachable
+//     by scrolling, and nothing is hidden behind a button.
+//   - contentMode fill: the content keeps the room and the inspector is
+//     a bounded pane under it (at most 45% of the height), scrolling on
+//     its own. A fill child has no flow to stack into, and a pane with
+//     no bound under it is cut off (workspace-layout's fault, 2026-10-07).
+//   The footer stays under both, in view.
+//
+// In print the frame lets go: no bound, no overflow, no navigation, no
+// header, inspector or footer; the content flows onto pages. A page meant
+// for print or export is a DocumentLayout inside the content.
+
+const Nested = createContext(false);
+
+const px = (value, fallback, min, max) => {
+  const n = Number(value);
+  return `${Number.isFinite(n) && n > 0 ? Math.min(max, Math.max(min, Math.round(n))) : fallback}px`;
+};
+
+// Tailwind reads class names whole from the source, so every breakpoint
+// is written out.
+const BESIDE = {
+  md: {
+    main: "md:grid md:grid-cols-[minmax(0,1fr)_var(--app-inspector)] md:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "md:contents",
+    content: "md:col-start-1 md:row-start-1",
+    scrolls: "md:min-h-0 md:overflow-y-auto md:overscroll-contain",
+    inspector: "md:col-start-2 md:row-span-2 md:row-start-1 md:max-h-none md:min-h-0 md:overflow-y-auto md:border-l md:border-t-0",
+    footer: "md:col-start-1 md:row-start-2",
+  },
+  lg: {
+    main: "lg:grid lg:grid-cols-[minmax(0,1fr)_var(--app-inspector)] lg:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "lg:contents",
+    content: "lg:col-start-1 lg:row-start-1",
+    scrolls: "lg:min-h-0 lg:overflow-y-auto lg:overscroll-contain",
+    inspector: "lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:max-h-none lg:min-h-0 lg:overflow-y-auto lg:border-l lg:border-t-0",
+    footer: "lg:col-start-1 lg:row-start-2",
+  },
+  xl: {
+    main: "xl:grid xl:grid-cols-[minmax(0,1fr)_var(--app-inspector)] xl:grid-rows-[minmax(0,1fr)_auto]",
+    flow: "xl:contents",
+    content: "xl:col-start-1 xl:row-start-1",
+    scrolls: "xl:min-h-0 xl:overflow-y-auto xl:overscroll-contain",
+    inspector: "xl:col-start-2 xl:row-span-2 xl:row-start-1 xl:max-h-none xl:min-h-0 xl:overflow-y-auto xl:border-l xl:border-t-0",
+    footer: "xl:col-start-1 xl:row-start-2",
+  },
+};
+
+const REGION = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+const LETS_GO = "print:block print:h-auto print:min-h-0 print:overflow-visible";
+
+export function AppLayout({
+  header,
+  navigation,
+  navigationLabel = "Navigation",
+  navigationWidth,
+  children,
+  contentMode = "scroll",
+  contentLabel = "Content",
+  contentClassName,
+  scrollKey,
+  inspector,
+  inspectorLabel = "Details",
+  inspectorWidth,
+  inspectorAt = "lg",
+  footer,
+  height = "viewport",
+  className,
+}) {
+  const nested = useContext(Nested);
+  const bounded = nested || height === "parent";
+  const fill = contentMode === "fill";
+  const at = BESIDE[inspectorAt] ?? BESIDE.lg;
+  const hasInspector = inspector != null && inspector !== false;
+  const hasNavigation = navigation != null && navigation !== false;
+  const shared = hasInspector && !fill; // below `at`: content and inspector in one scroll region
+  const [open, setOpen] = useState(false);
+  const flowRef = useRef(null);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    if (flowRef.current) flowRef.current.scrollTop = 0;
+    if (contentRef.current) contentRef.current.scrollTop = 0;
+    setOpen(false);
+  }, [scrollKey]);
+
+  return (
+    <Nested.Provider value={true}>
+      <div
+        data-app-layout={bounded ? "parent" : "viewport"}
+        style={{ "--app-nav": px(navigationWidth, 176, 160, 320), "--app-inspector": px(inspectorWidth, 360, 240, 560) }}
+        className={cx(
+          "flex min-w-0 flex-col overflow-hidden bg-background text-foreground",
+          bounded ? "h-full min-h-0 flex-1" : "h-dvh",
+          LETS_GO,
+          className,
+        )}
+      >
+        {header != null && header !== false ? (
+          <div data-layout-header className="flex shrink-0 items-center gap-1 border-b border-border print:hidden">
+            {hasNavigation ? (
+              <IconButton icon="menu" label={`Open ${navigationLabel.toLowerCase()}`} onClick={() => setOpen(true)} className="ml-1 md:hidden" />
+            ) : null}
+            <div className="min-w-0 flex-1">{header}</div>
+          </div>
+        ) : hasNavigation ? (
+          <div data-layout-header className="flex shrink-0 items-center border-b border-border px-1 py-1 md:hidden print:hidden">
+            <Button variant="quiet" size="sm" icon="menu" onClick={() => setOpen(true)}>
+              {navigationLabel}
+            </Button>
+          </div>
+        ) : null}
+
+        {hasNavigation ? (
+          <Sheet open={open} onClose={() => setOpen(false)} title={navigationLabel} side="start">
+            {open ? (
+              <div
+                onClick={(e) => {
+                  if (e.target instanceof Element && e.target.closest("a,button")) setOpen(false);
+                }}
+              >
+                {navigation}
+              </div>
+            ) : null}
+          </Sheet>
+        ) : null}
+
+        <div data-layout-body className={cx("flex min-h-0 min-w-0 flex-1", LETS_GO)}>
+          {hasNavigation ? (
+            <div
+              data-layout-navigation
+              className="hidden shrink-0 flex-col overflow-y-auto overscroll-contain border-r border-border md:flex md:w-(--app-nav) print:hidden"
+            >
+              {navigation}
+            </div>
+          ) : null}
+
+          <div data-layout-main className={cx("flex min-h-0 min-w-0 flex-1 flex-col", hasInspector && at.main, LETS_GO)}>
+            <div
+              ref={flowRef}
+              data-layout-flow
+              className={cx(
+                "flex min-h-0 min-w-0 flex-1 flex-col",
+                shared && "overflow-y-auto overscroll-contain",
+                hasInspector && at.flow,
+                LETS_GO,
+              )}
+            >
+              <div
+                ref={contentRef}
+                data-layout-content
+                role="region"
+                aria-label={contentLabel}
+                tabIndex={0}
+                className={cx(
+                  "flex min-w-0 flex-col",
+                  REGION,
+                  fill
+                    ? "min-h-0 flex-1 overflow-hidden"
+                    : shared
+                      ? cx("shrink-0", at.scrolls)
+                      : "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+                  hasInspector && at.content,
+                  LETS_GO,
+                  contentClassName,
+                  // A surface that is a frame of its own runs to the edges.
+                  "has-[>[data-app-layout]]:p-0",
+                )}
+              >
+                {children}
+              </div>
+              {hasInspector ? (
+                <div
+                  data-layout-inspector
+                  role="region"
+                  aria-label={inspectorLabel}
+                  tabIndex={0}
+                  className={cx(
+                    "min-w-0 shrink-0 border-t border-border print:hidden",
+                    REGION,
+                    fill && "max-h-[45%] overflow-y-auto overscroll-contain",
+                    at.inspector,
+                  )}
+                >
+                  {inspector}
+                </div>
+              ) : null}
+            </div>
+            {footer != null && footer !== false ? (
+              <div data-layout-footer className={cx("shrink-0 border-t border-border print:hidden", hasInspector && at.footer)}>
+                {footer}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </Nested.Provider>
+  );
+}
+
+// DocumentLayout — a page that flows: a report, an invoice, an article
+// meant for print or export. It owns no height and scrolls nothing; it
+// sits in the AppLayout's content (contentMode scroll), which scrolls it,
+// and in print the frame lets go and it flows onto pages.
+//
+//   children   the document
+//   toolbar    a bar held at the top while the document scrolls under it
+//              (Print, Export, the zoom); never printed
+//   width      prose (the default: a measure for reading) · page (A4,
+//              210mm) · letter (8.5in) · full. In print it is the paper's
+//   paper      true: drawn as a sheet on the desk on screen (bg-card, a
+//              hairline, padding); plain in print
+//   align      start (the default) · center
+//   label      the document's name for a screen reader ("Document")
+//   className  the document's own spacing and tokens; never a height
+const WIDTHS = {
+  prose: "max-w-prose",
+  page: "max-w-[210mm]",
+  letter: "max-w-[8.5in]",
+  full: "max-w-none",
+};
+
+export function DocumentLayout({ children, toolbar, width = "prose", paper = false, align = "start", label = "Document", className }) {
+  return (
+    <div data-document-layout className="flex min-w-0 flex-col">
+      {toolbar != null && toolbar !== false ? (
+        <div data-document-toolbar className="sticky top-0 z-10 border-b border-border bg-background print:hidden">
+          {toolbar}
+        </div>
+      ) : null}
+      <article
+        aria-label={label}
+        className={cx(
+          "w-full min-w-0 print:max-w-none",
+          WIDTHS[width] ?? WIDTHS.prose,
+          align === "center" && "mx-auto",
+          paper && "my-6 rounded-lg border border-border bg-card p-8 text-card-foreground shadow-sm print:my-0 print:rounded-none print:border-0 print:p-0 print:shadow-none",
+          className,
+        )}
+      >
+        {children}
+      </article>
+    </div>
+  );
+}

package/templates/next/files/lib/claw.js

@@ -18,7 +18,10 @@
 // lib/platform.js wraps them as ask / requests / stopRequest and
 // lib/hooks.js as useJob and useRequests. `chat` and `cancel` are the
 // 0.3.x door to the same work, streamed into the app (startJob /
-// cancelJob): kept for a claw that has no `ask` yet. What an app still
+// cancelJob): kept for a claw that has no `ask` yet. `llm` (0.8.0) is one
+// shot of model work answered in the page, not asking an agent: lib/
+// platform.js wraps it as llm and lib/hooks.js as useLlm, and the check
+// refuses a screen that names its path. What an app still
 // never calls is monitoring: the OS draws Agent, Runs and Activity as
 // tabs on its window. The rest of the gateway's routes (§5) stay
 // reachable through claw() / clawStream() for a surface that has a real

package/templates/next/files/lib/hooks.js

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { claw, publishDesk, publishStatus } from "./claw";
-import { ask, cancelJob, openRequest, requests as readRequests, startJob, stopRequest } from "./platform";
+import { ask, cancelJob, llm, openRequest, requests as readRequests, startJob, stopRequest } from "./platform";
 
 // The React side of the _claw API, without any look: fetching, polling,
 // streaming and cleanup. A surface renders what comes back and owns every
@@ -17,7 +17,9 @@ import { ask, cancelJob, openRequest, requests as readRequests, startJob, stopRe
 // a request: the conversation lives in the desk's agent column, and the
 // app follows only its status. `useRequests` is the same requests seen
 // from a surface: the asks in flight on this app, so an empty table can
-// show the work coming instead of a blank.
+// show the work coming instead of a blank. `useLlm` (0.8.0) is neither:
+// one call to a model, answered in the page, for text work on what the
+// screen holds — nothing to follow, nothing on the desk.
 //
 // While the gateway has no _claw routes yet (`unavailable`), polls back
 // off to once a minute so a preview that is still being wired does not
@@ -672,3 +674,70 @@ export function useJob() {
 
   return { ...state, start, cancel, reset, open };
 }
+
+/** What useLlm shows with no call in flight and nothing to show. */
+const QUIET = { loading: false, result: null, error: null, unavailable: false };
+
+/**
+ * One model call from a component (lib/platform.js, llm). `run(input,
+ * opts)` takes llm()'s arguments and resolves llm()'s answer, so a caller
+ * that needs the refusal's `code` reads it there; the state is for the
+ * screen:
+ *
+ *   loading  a call is out
+ *   result   the answer when it was ok: { ok: true, text } or { ok: true,
+ *            data } (null while loading and after a failure)
+ *   error    the failure's words (null while loading, after an answer,
+ *            and on a claw with no door)
+ *   unavailable  the platform has no model door yet (a claw from before
+ *            it) or there is no network: show the quiet "not connected
+ *            yet", as for useClaw's `unavailable`. Then `error` stays
+ *            null, so a refusal and a missing door are never both set
+ *
+ * A run supersedes the one before it: that one is aborted, resolves
+ * { ok: false, aborted: true } and changes nothing, so a slow answer never
+ * lands over a newer one. The hook owns the signal (one in opts is
+ * replaced). Unmounting aborts the call in flight. Nothing is called until
+ * `run` is.
+ *
+ *   const { run, loading, result, error, unavailable } = useLlm();
+ *   run(`Translate to French: ${text}`, { task: "translate" });
+ *   …{loading ? <Spinner /> : result?.text}
+ */
+export function useLlm() {
+  const [state, setState] = useState(QUIET);
+  const abortRef = useRef(null);
+  const runRef = useRef(0); // the run that owns the state
+  const aliveRef = useRef(true);
+
+  // React runs this cleanup and mounts the hook again in development (its
+  // double mount; a fast refresh does the same): a call cut off by that
+  // cleanup is closed quietly in run(), below, once the answer comes back.
+  useEffect(() => {
+    aliveRef.current = true;
+    return () => {
+      aliveRef.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  const run = useCallback(async (input, opts) => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const mine = ++runRef.current;
+    setState({ loading: true, result: null, error: null, unavailable: false });
+    const answer = await llm(input, { ...opts, signal: controller.signal });
+    if (runRef.current !== mine || !aliveRef.current) return answer; // a newer run owns the state, or the page is gone
+    if (controller.signal.aborted) {
+      setState(QUIET); // cut off by an unmount the hook came back from, with nothing started since
+      return answer;
+    }
+    if (answer.ok) setState({ loading: false, result: answer, error: null, unavailable: false });
+    else if (answer.unavailable) setState({ loading: false, result: null, error: null, unavailable: true });
+    else setState({ loading: false, result: null, error: answer.error || "the model did not answer", unavailable: false });
+    return answer;
+  }, []);
+
+  return { ...state, run };
+}

package/templates/next/files/lib/platform.js

@@ -8,7 +8,9 @@ import { claw, clawBasePath, clawStream, openInDesk, publishDesk, reportError }
 // unavailable, code? }; nothing throws. `unavailable: true` (404 or no
 // network) means the gateway has no such route yet — render a quiet "not
 // connected yet" state, not an error. `code` names a refusal a caller
-// can act on (`not_your_thread`, `needs_answer`, `queue_full`).
+// can act on (`not_your_thread`, `needs_answer`, `queue_full`). `llm` is
+// the one that resolves the platform's answer as it is — { ok: true, text }
+// or { ok: true, data } — with no { status, data } around it.
 //
 // What lives here: who the app is (`me`), the error relay
 // (`reportError`), and ASKING — a screen asks its agent for work with a
@@ -20,8 +22,12 @@ import { claw, clawBasePath, clawStream, openInDesk, publishDesk, reportError }
 // Activity as tabs on the window, and nothing here lists chats, runs or
 // activity. `startJob` / `cancelJob` are the 0.3.x door to the same work,
 // streamed into the app; they stay for a claw that has no _claw/ask yet.
-// `claw(path, opts)` and `clawStream` in lib/claw.js are the generic
-// doors for the rest of §5.
+// And CALLING A MODEL (0.8.0): `llm` is one shot of text work on what is
+// on screen — sort these, draft that, translate this — answered in the
+// page, with no thread, no tools and no request on the desk. It is the
+// opposite of `ask`, which hands work to the app's agent. `claw(path,
+// opts)` and `clawStream` in lib/claw.js are the generic doors for the
+// rest of §5.
 
 /** GET _claw/me → { artifact: { id, name, vehicle, status, home },
  *  user: { id, email }, blueprint, desk_origin } */
@@ -150,8 +156,91 @@ export function cancelJob(sessionId) {
   return claw("cancel", { method: "POST", body: { session_id: sessionId } });
 }
 
+/**
+ * Call a model: POST _claw/llm. One shot of text work on what the screen
+ * holds — sort, draft, translate, summarise, pull a field out — answered
+ * here and now. Work that needs tools, the workspace or more than one
+ * step is `ask()`'s: that is the app's agent. The app never names a model
+ * (`tier` picks the size) and never holds a key; the platform meters the
+ * call to the member who made it.
+ *
+ *   input      what to work on: a string, or a conversation, [{ role:
+ *              "user" | "assistant", content }] — at most 100 messages,
+ *              none empty, the last one the user's (required)
+ *   system     how to go about it (at most 8,000 characters)
+ *   schema     a JSON Schema for the answer (an object, at most 16 KB
+ *              serialised): the answer comes back as `data`, checked
+ *              against it, not as `text`. A miss is sent back to the
+ *              model once; a second is `schema_mismatch`. No `pattern`,
+ *              `patternProperties`, `$ref`, `$defs` or `definitions`
+ *              (bad_input); nesting at most 20 levels (bad_input); at
+ *              most 1,000 parts, each object, `enum` value and listed
+ *              type (too_large). A reply too large to check against the
+ *              schema is a miss. `data` keeps keys the schema does not
+ *              name
+ *   maxTokens  the answer's ceiling, a whole number (default 1,024; over
+ *              4,096 is cut to 4,096). Sent as `max_tokens`
+ *   tier       "fast" (the default) or "smart", for the harder job
+ *   task       a short label for the usage line, /^[a-z0-9-]{1,40}$/
+ *   signal     an AbortSignal (an abort resolves { ok: false, aborted:
+ *              true })
+ *
+ * → { ok: true, text }          no schema
+ *   { ok: true, data }          with a schema
+ *   { ok: false, error, code }  a refusal, passed through as the platform
+ *     sent it (`status` and `unavailable: false` come with it). `code` is
+ *     one of, with its status:
+ *       for the member (show `error` as it is) —
+ *         no_credits 402 (the workspace wallet, a suspension, or the
+ *         Free plan's daily limit), member_cap 402 (the member's monthly
+ *         cap), app_cap 402 (the app's weekly cap), rate_limited 429
+ *         (30 calls a minute per member), model_failed 502, timeout 504
+ *         (60 s, a schema retry included; a call the clock cuts is still
+ *         charged), try_again 503, failed 500, no_member_identity 401,
+ *         not_a_member 403;
+ *       for the developer (`error` is not for the member) —
+ *         bad_input 400, too_large 413 (the body over 128 KB, or a field
+ *         over its cap), schema_mismatch 422, cross_origin 403,
+ *         not_configured 503
+ *   { ok: false, unavailable: true }  a claw from before this door (a 404
+ *     that names no refusal) or no network: render a quiet "not
+ *     connected yet", as for every door
+ *
+ * Nothing throws. An empty input asks nothing of the platform.
+ */
+export async function llm(input, opts) {
+  const { system, schema, maxTokens, tier, task, signal } = opts ?? {};
+  const said = typeof input === "string" ? input.trim() !== "" : Array.isArray(input) && input.length > 0;
+  if (!said) return refused("nothing to send");
+  const body = {
+    input,
+    system: typeof system === "string" && system ? system : undefined,
+    schema: schema && typeof schema === "object" ? schema : undefined,
+    max_tokens: typeof maxTokens === "number" ? maxTokens : undefined,
+    tier: tier || undefined,
+    task: task || undefined,
+  };
+  // claw() would read a body it cannot serialise as "not reachable".
+  try {
+    JSON.stringify(body);
+  } catch {
+    return refused("that cannot be sent as JSON");
+  }
+  const r = await claw("llm", { method: "POST", body, signal });
+  if (!r.ok) return r;
+  const answer = r.data;
+  if (answer && typeof answer === "object" && !Array.isArray(answer) && typeof answer.ok === "boolean") return answer;
+  return { ok: false, status: r.status, error: "the platform answered something unexpected", unavailable: false };
+}
+
+/** What llm() resolves for an input it will not send: the platform's own
+ *  word for it, with no request made. */
+function refused(error) {
+  return { ok: false, status: 0, error, code: "bad_input", unavailable: false };
+}
+
 export { reportError };
 
-export const platform = { me, ask, requests, stopRequest, openRequest, surfaceOfPath, startJob, cancelJob, reportError };
+export const platform = { me, ask, llm, requests, stopRequest, openRequest, surfaceOfPath, startJob, cancelJob, reportError };
 
 export default platform;

package/templates/next/template.json

@@ -32,7 +32,8 @@
   "modes": {
     "browser": {
       "overlay": "browser",
-      "drop": ["proxy.js", "app/claw-alive/route.js", "lib/db.js", "lib/brain-server.js"]
+      "drop": ["proxy.js", "app/claw-alive/route.js", "lib/db.js", "lib/brain-server.js"],
+      "dropScripts": ["start"]
     }
   },
   "components": [
@@ -332,6 +333,14 @@
       "tags": ["scroll", "scroll area", "overflow", "list", "carousel", "rail"],
       "files": ["components/ui/scroll-area.jsx"]
     },
+    {
+      "name": "layout",
+      "type": "component",
+      "title": "AppLayout, DocumentLayout",
+      "description": "Who owns the window's height, and who scrolls. AppLayout is the app frame, the one viewport owner (the outermost; one inside another fills its slot instead): header (the top bar, in view), navigation (a rail from md, navigationWidth px, 176; below md a Sheet behind the menu button, navigationLabel), the content (contentMode scroll: its region scrolls · fill: a bounded column for a canvas or a grid that scrolls itself; contentLabel, contentClassName for spacing, scrollKey = the route to scroll back to the top), inspector (beside the content from inspectorAt md · lg · xl, inspectorWidth px, 360, 240 to 560; below it the content and the inspector share one scroll in scroll mode, and in fill mode the inspector is a bounded pane under the content), footer (under the content, in view), height viewport · parent. In print it lets go. DocumentLayout is a page that flows, for print and export: toolbar (held at the top, never printed), width prose · page (A4) · letter · full, paper, align start · center. Nothing in an app sizes itself by the window: npm run check refuses min-h-dvh, h-screen, 100vh and h-[80vh] outside the kit.",
+      "tags": ["layout", "app frame", "shell", "viewport", "scroll", "inspector", "sidebar", "navigation", "footer", "fill", "canvas", "document", "print", "export", "page"],
+      "files": ["components/ui/layout.jsx"]
+    },
     {
       "name": "toast",
       "type": "component",