@vegastack/design 0.7.53 → 0.7.55

package/bin/doctor.mjs

@@ -18,6 +18,10 @@
 // renders as body text. The Regent consumer carried 338 such classes past every other check
 // (2026-09-23), which is why this is a failing check and not a guide section.
 //
+// And it holds pages to the one page layout: an `AppShellPage` picks its width with `size`
+// (`prose` · `default` · `full`) and pads with the shared page gutter, so a `max-w-*`, `mx-*`,
+// `w-*` or padding class on one is a page choosing its own width or gutter, and fails.
+//
 // Read-only: it never writes, installs, or edits. Exit 0 = all good, 1 = a real problem,
 // so it composes into CI as `vegastack-design doctor`.
 
@@ -48,7 +52,8 @@ Usage: vegastack-design doctor [options]
 
 Checks a consuming project's VegaStack setup and reports what is wrong and how to fix it.
 Also scans the project's own source (not node_modules, build output, or the components.json
-\`ui\` alias directory) for vocabulary the shadcn reset retired, and reports each as file:line.
+\`ui\` alias directory) for vocabulary the shadcn reset retired, and for an AppShellPage that sets
+its own width or gutter, and reports each as file:line.
 
 Options:
   --dir <path>   Project root to inspect (default: the current directory)
@@ -584,6 +589,58 @@ export function scanRetiredVocabulary(
   };
 }
 
+// ---- page layout -----------------------------------------------------------------------------
+
+/**
+ * A class on an `AppShellPage` that picks the page's width or gutter — which `size` and the page
+ * gutter own. `pb-*` stays legal: room at the bottom for a docked save bar is not a gutter.
+ */
+const PAGE_OVERRIDE =
+  /(?<![\w-])(?:[\w@\[\]()/.:-]*:)?(?:max-w|min-w|w|mx|ms|me|px|ps|pe|p|py|pt)-[^\s"'`]+/g;
+
+/**
+ * Every `AppShellPage` in the project's own source that sets its own width or gutter (a failure)
+ * or still says `size="narrow"` (a warning — `prose` is its name now).
+ */
+export function scanPageLayout(root, { skipDirs = [] } = {}) {
+  const skip = new Set(skipDirs.map((d) => resolve(d)));
+  const findings = [];
+  const deprecated = [];
+  const walk = (dir) => {
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const e of entries) {
+      if (e.name.startsWith(".") || SCAN_SKIP_DIRS.has(e.name)) continue;
+      const full = join(dir, e.name);
+      if (e.isDirectory()) {
+        if (!skip.has(resolve(full))) walk(full);
+        continue;
+      }
+      if (!e.isFile() || !/\.[jt]sx$/.test(e.name)) continue;
+      const src = readIfExists(full);
+      if (src == null || !src.includes("<AppShellPage")) continue;
+      const file = relative(root, full).split(sep).join("/");
+      for (const tag of src.matchAll(/<AppShellPage\b(?:[^>{]|\{[^}]*\})*>/g)) {
+        const line = src.slice(0, tag.index).split("\n").length;
+        const cls = /\bclassName=(?:"([^"]*)"|\{([\s\S]*?)\}(?=\s|\/?>))/.exec(
+          tag[0],
+        );
+        const text = cls ? (cls[1] ?? cls[2] ?? "") : "";
+        for (const m of text.matchAll(PAGE_OVERRIDE))
+          findings.push({ file, line, match: m[0] });
+        if (/\bsize=(?:"narrow"|\{\s*["']narrow["']\s*\})/.test(tag[0]))
+          deprecated.push({ file, line, match: 'size="narrow"' });
+      }
+    }
+  };
+  walk(root);
+  return { findings, deprecated };
+}
+
 export function main(argv = []) {
   if (argv.includes("-h") || argv.includes("--help")) {
     console.log(USAGE);
@@ -802,6 +859,29 @@ export function main(argv = []) {
     });
   }
 
+  // ---- 8. every page takes its width from AppShellPage's size ------------------------------
+  const layout = scanPageLayout(root, { skipDirs });
+  if (layout.findings.length > 0) {
+    results.push({
+      level: "fail",
+      name: "page layout",
+      detail: `${layout.findings.length} class(es) on AppShellPage set the page's own width or gutter`,
+      fix: "delete them — pick the width with size (prose · default · full) from the route map; the gutter is --page-gutter (https://design.vegastack.com/docs/foundations/page-layout)",
+      findings: layout.findings.map((f) => `${f.file}:${f.line}  ${f.match}`),
+    });
+  } else {
+    ok("page layout", "no AppShellPage sets its own width or gutter");
+  }
+  if (layout.deprecated.length > 0) {
+    results.push({
+      level: "warn",
+      name: "page width names",
+      detail: `${layout.deprecated.length} AppShellPage(s) still say size="narrow"`,
+      fix: 'rename to size="prose" — narrow is removed in the next minor',
+      findings: layout.deprecated.map((f) => `${f.file}:${f.line}  ${f.match}`),
+    });
+  }
+
   // ---- report -------------------------------------------------------------------------------
   const glyph = { ok: "✓", warn: "!", fail: "✗" };
   console.log("");

package/dist/{chunk-MJM6KH7P.js → chunk-5YMLB7DY.js}

@@ -74,11 +74,18 @@ var prose = {
   pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
   preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
   hr: "[&_hr]:my-4 [&_hr]:border-border",
-  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
-  // the table in an `overflow-x-auto` div); these are the cell and rule tokens. Cells take
+  // GFM tables, Notion's simple table: a rounded outer border, a rule between every cell, and a
+  // header row on a subtle muted ground at medium weight. The scroll container is structural and
+  // belongs to the consumer (MarkdownView and TextEdit each wrap the table in an `overflow-x-auto`
+  // box); these are the cell and rule tokens. `border-separate` with zero spacing is what lets the
+  // table itself take the radius (a collapsed table cannot); each cell draws only its bottom and
+  // end rule, the last row and column drop theirs against the outer border, and the corner cells
+  // take the radius so a header or selected fill never pokes past the curve. Cells take
   // `break-word`, not the root's `anywhere`, so a column keeps its words whole and the table scrolls
   // in its box rather than crushing to one character per line.
-  table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word",
+  table: "[&_table]:w-full [&_table]:border-separate [&_table]:border-spacing-0 [&_table]:rounded-lg [&_table]:border [&_table]:border-border",
+  tableRules: "[&_th]:border-e [&_th]:border-b [&_th]:border-border [&_td]:border-e [&_td]:border-b [&_td]:border-border [&_tr>*:last-child]:border-e-0 [&_tbody>tr:last-child>*]:border-b-0 [&_tr:first-child>*:first-child]:rounded-ss-lg [&_tr:first-child>*:last-child]:rounded-se-lg [&_tbody>tr:last-child>*:first-child]:rounded-es-lg [&_tbody>tr:last-child>*:last-child]:rounded-ee-lg",
+  tableCells: "[&_th]:bg-muted/50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:align-top [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word",
   img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
 };
 var proseClassName = Object.values(prose).join(" ");

package/dist/create-animated-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-MJM6KH7P.js";
+} from "./chunk-5YMLB7DY.js";
 
 // src/icons/create-animated-icon.tsx
 import * as React from "react";

package/dist/icons/index.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "../chunk-MJM6KH7P.js";
+} from "../chunk-5YMLB7DY.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -103,11 +103,18 @@ var prose = {
   pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
   preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
   hr: "[&_hr]:my-4 [&_hr]:border-border",
-  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
-  // the table in an `overflow-x-auto` div); these are the cell and rule tokens. Cells take
+  // GFM tables, Notion's simple table: a rounded outer border, a rule between every cell, and a
+  // header row on a subtle muted ground at medium weight. The scroll container is structural and
+  // belongs to the consumer (MarkdownView and TextEdit each wrap the table in an `overflow-x-auto`
+  // box); these are the cell and rule tokens. `border-separate` with zero spacing is what lets the
+  // table itself take the radius (a collapsed table cannot); each cell draws only its bottom and
+  // end rule, the last row and column drop theirs against the outer border, and the corner cells
+  // take the radius so a header or selected fill never pokes past the curve. Cells take
   // `break-word`, not the root's `anywhere`, so a column keeps its words whole and the table scrolls
   // in its box rather than crushing to one character per line.
-  table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word",
+  table: "[&_table]:w-full [&_table]:border-separate [&_table]:border-spacing-0 [&_table]:rounded-lg [&_table]:border [&_table]:border-border",
+  tableRules: "[&_th]:border-e [&_th]:border-b [&_th]:border-border [&_td]:border-e [&_td]:border-b [&_td]:border-border [&_tr>*:last-child]:border-e-0 [&_tbody>tr:last-child>*]:border-b-0 [&_tr:first-child>*:first-child]:rounded-ss-lg [&_tr:first-child>*:last-child]:rounded-se-lg [&_tbody>tr:last-child>*:first-child]:rounded-es-lg [&_tbody>tr:last-child>*:last-child]:rounded-ee-lg",
+  tableCells: "[&_th]:bg-muted/50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:align-top [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word",
   img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
 };
 var proseClassName = Object.values(prose).join(" ");

package/dist/index.d.cts

@@ -81,7 +81,9 @@ declare const prose: {
     readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";
     readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
     readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
-    readonly table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word";
+    readonly table: "[&_table]:w-full [&_table]:border-separate [&_table]:border-spacing-0 [&_table]:rounded-lg [&_table]:border [&_table]:border-border";
+    readonly tableRules: "[&_th]:border-e [&_th]:border-b [&_th]:border-border [&_td]:border-e [&_td]:border-b [&_td]:border-border [&_tr>*:last-child]:border-e-0 [&_tbody>tr:last-child>*]:border-b-0 [&_tr:first-child>*:first-child]:rounded-ss-lg [&_tr:first-child>*:last-child]:rounded-se-lg [&_tbody>tr:last-child>*:first-child]:rounded-es-lg [&_tbody>tr:last-child>*:last-child]:rounded-ee-lg";
+    readonly tableCells: "[&_th]:bg-muted/50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:align-top [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word";
     readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
 };
 /** The element roles the prose recipe covers. */

package/dist/index.d.ts

@@ -81,7 +81,9 @@ declare const prose: {
     readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";
     readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
     readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
-    readonly table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word";
+    readonly table: "[&_table]:w-full [&_table]:border-separate [&_table]:border-spacing-0 [&_table]:rounded-lg [&_table]:border [&_table]:border-border";
+    readonly tableRules: "[&_th]:border-e [&_th]:border-b [&_th]:border-border [&_td]:border-e [&_td]:border-b [&_td]:border-border [&_tr>*:last-child]:border-e-0 [&_tbody>tr:last-child>*]:border-b-0 [&_tr:first-child>*:first-child]:rounded-ss-lg [&_tr:first-child>*:last-child]:rounded-se-lg [&_tbody>tr:last-child>*:first-child]:rounded-es-lg [&_tbody>tr:last-child>*:last-child]:rounded-ee-lg";
+    readonly tableCells: "[&_th]:bg-muted/50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:align-top [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_td_p]:my-0 [&_th_p]:my-0 [&_th]:wrap-break-word [&_td]:wrap-break-word";
     readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
 };
 /** The element roles the prose recipe covers. */

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   mergeRefs,
   prose,
   proseClassName
-} from "./chunk-MJM6KH7P.js";
+} from "./chunk-5YMLB7DY.js";
 export {
   FLOATING,
   TIMINGS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.53",
+  "version": "0.7.55",
   "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
   "license": "MIT",
   "repository": {

package/skills/vegastack-design-system/SKILL.md

@@ -149,8 +149,10 @@ A component's name undersells it. Before composing something by hand, check this
 
 ### Which component for X
 
-- **A page** → `AppShell` › `AppShellContent` › `AppShellPage` (`size`: `narrow` for forms and
-  settings, `default`, `full`) › `PageHeader` › `FilterBar` › `DataList` (or
+- **A page** → `AppShell` › `AppShellContent` › `AppShellPage` (`size`: `prose` for forms and
+  settings, `default` for lists and record pages, `full` for boards and canvases — picked per route
+  from one `definePageWidths` map, never a `max-w-*` or padding class; see
+  <https://design.vegastack.com/docs/foundations/page-layout>) › `PageHeader` › `FilterBar` › `DataList` (or
   `DataGrid`) › the `Empty` tier that fits. The spacing between them is the page-rhythm recipe
   (<https://design.vegastack.com/docs/foundations/spacing#page-rhythm>).
 - **Inline editing** → `EditableCell` with `onSave` returning a promise: `variant="cell"` inside a

package/skills/vegastack-design-system/references/components.md

@@ -3,7 +3,7 @@
 <!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
      which is the authority for membership and counts. -->
 
-**133 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 11 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 4 data libs (`date-time`, `geo-data`, `emoji-data`, `drag-item`) — 696 registry items in total.
+**134 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 11 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 6 data libs (`date-time`, `geo-data`, `emoji-data`, `drag-item`, `page-layout`, `tile-overlay`) — 699 registry items in total.
 
 Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
 `@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
@@ -186,3 +186,4 @@ starts with `icon-` is a component and never an icon.
 ## forms
 
 - **`avatar-picker`** — A person's avatar that opens a dialog to upload, change or remove their photo — the file is staged in a 128px drop circle and saved only on Update.
+- **`upload-dialog`** — The "Add files" modal: a drop zone and the staged files (thumbnail or icon, name, size, remove), then an optional per-file details view the host renders, and Add. It stages files only; the host uploads them.