@vegastack/design 0.7.42 → 0.7.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/{chunk-ZSXJC3TJ.js → chunk-MJM6KH7P.js} +15 -5
  2. package/dist/create-animated-icon.js +1 -1
  3. package/dist/icons/index.js +1 -1
  4. package/dist/index.cjs +15 -5
  5. package/dist/index.d.cts +8 -3
  6. package/dist/index.d.ts +8 -3
  7. package/dist/index.js +1 -1
  8. package/package.json +2 -2
  9. package/skills/vegastack-consume/SKILL.md +14 -0
  10. package/skills/vegastack-design-system/references/components.md +5 -4
package/dist/{chunk-ZSXJC3TJ.js → chunk-MJM6KH7P.js} RENAMED
@@ -18,8 +18,13 @@ var prose = {
18
18
  * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
19
19
  * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
20
20
  * still says so on the root, where it reads as a decision.
21
+ *
22
+ * `min-w-0 wrap-anywhere` is the no-horizontal-overflow contract (2026-09-26): a long word, URL
23
+ * or inline code run breaks inside the line instead of widening the page, and `anywhere` (not
24
+ * `break-word`) also lowers the min-content width, so a prose root inside a flex item shrinks.
25
+ * Fenced code (`white-space: pre`) and tables keep their lines and scroll inside their own box.
21
26
  */
22
- root: "font-sans text-sm font-normal text-foreground",
27
+ root: "font-sans text-sm font-normal text-foreground min-w-0 wrap-anywhere",
23
28
  // Headings follow the app's type scale (design.md §Headings), not a document scale: the page
24
29
  // title is the only `text-2xl`, so a heading inside rendered text stops at `text-lg` for `#`,
25
30
  // the section size (`text-base`) for `##`, and body size for everything below — weight carries
@@ -54,8 +59,11 @@ var prose = {
54
59
  // `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
55
60
  // `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
56
61
  // renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
57
- // under the body in view and edit alike.
58
- taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
62
+ // under the body in view and edit alike. The checkbox's hit area is trimmed to exactly 24px tall
63
+ // here (`after:-inset-y-1.25` — the pseudo insets from inside the 1px border — not its own 30px) and items sit 26px apart (`mt-1.5`), so each
64
+ // checkbox owns a whole 24px target with a hair to spare instead of reaching into its
65
+ // neighbour's.
66
+ taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:mt-1.5 [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_li[data-type=taskItem]_[data-slot=checkbox]]:after:-inset-y-1.25 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
59
67
  blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3",
60
68
  // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
61
69
  // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
@@ -67,8 +75,10 @@ var prose = {
67
75
  preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
68
76
  hr: "[&_hr]:my-4 [&_hr]:border-border",
69
77
  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
70
- // the table in an `overflow-x-auto` div); these are the cell and rule tokens.
71
- 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",
78
+ // the table in an `overflow-x-auto` div); these are the cell and rule tokens. Cells take
79
+ // `break-word`, not the root's `anywhere`, so a column keeps its words whole and the table scrolls
80
+ // in its box rather than crushing to one character per line.
81
+ 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",
72
82
  img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
73
83
  };
74
84
  var proseClassName = Object.values(prose).join(" ");
package/dist/create-animated-icon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  cn
4
- } from "./chunk-ZSXJC3TJ.js";
4
+ } from "./chunk-MJM6KH7P.js";
5
5
 
6
6
  // src/icons/create-animated-icon.tsx
7
7
  import * as React from "react";
package/dist/icons/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "../chunk-ZSXJC3TJ.js";
3
+ } from "../chunk-MJM6KH7P.js";
4
4
 
5
5
  // src/icons/icon.tsx
6
6
  import "react";
package/dist/index.cjs CHANGED
@@ -47,8 +47,13 @@ var prose = {
47
47
  * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
48
48
  * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
49
49
  * still says so on the root, where it reads as a decision.
50
+ *
51
+ * `min-w-0 wrap-anywhere` is the no-horizontal-overflow contract (2026-09-26): a long word, URL
52
+ * or inline code run breaks inside the line instead of widening the page, and `anywhere` (not
53
+ * `break-word`) also lowers the min-content width, so a prose root inside a flex item shrinks.
54
+ * Fenced code (`white-space: pre`) and tables keep their lines and scroll inside their own box.
50
55
  */
51
- root: "font-sans text-sm font-normal text-foreground",
56
+ root: "font-sans text-sm font-normal text-foreground min-w-0 wrap-anywhere",
52
57
  // Headings follow the app's type scale (design.md §Headings), not a document scale: the page
53
58
  // title is the only `text-2xl`, so a heading inside rendered text stops at `text-lg` for `#`,
54
59
  // the section size (`text-base`) for `##`, and body size for everything below — weight carries
@@ -83,8 +88,11 @@ var prose = {
83
88
  // `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
84
89
  // `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
85
90
  // renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
86
- // under the body in view and edit alike.
87
- taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
91
+ // under the body in view and edit alike. The checkbox's hit area is trimmed to exactly 24px tall
92
+ // here (`after:-inset-y-1.25` — the pseudo insets from inside the 1px border — not its own 30px) and items sit 26px apart (`mt-1.5`), so each
93
+ // checkbox owns a whole 24px target with a hair to spare instead of reaching into its
94
+ // neighbour's.
95
+ taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:mt-1.5 [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_li[data-type=taskItem]_[data-slot=checkbox]]:after:-inset-y-1.25 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
88
96
  blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3",
89
97
  // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
90
98
  // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
@@ -96,8 +104,10 @@ var prose = {
96
104
  preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
97
105
  hr: "[&_hr]:my-4 [&_hr]:border-border",
98
106
  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
99
- // the table in an `overflow-x-auto` div); these are the cell and rule tokens.
100
- 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",
107
+ // the table in an `overflow-x-auto` div); these are the cell and rule tokens. Cells take
108
+ // `break-word`, not the root's `anywhere`, so a column keeps its words whole and the table scrolls
109
+ // in its box rather than crushing to one character per line.
110
+ 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",
101
111
  img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
102
112
  };
103
113
  var proseClassName = Object.values(prose).join(" ");
package/dist/index.d.cts CHANGED
@@ -54,8 +54,13 @@ declare const prose: {
54
54
  * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
55
55
  * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
56
56
  * still says so on the root, where it reads as a decision.
57
+ *
58
+ * `min-w-0 wrap-anywhere` is the no-horizontal-overflow contract (2026-09-26): a long word, URL
59
+ * or inline code run breaks inside the line instead of widening the page, and `anywhere` (not
60
+ * `break-word`) also lowers the min-content width, so a prose root inside a flex item shrinks.
61
+ * Fenced code (`white-space: pre`) and tables keep their lines and scroll inside their own box.
57
62
  */
58
- readonly root: "font-sans text-sm font-normal text-foreground";
63
+ readonly root: "font-sans text-sm font-normal text-foreground min-w-0 wrap-anywhere";
59
64
  readonly h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
60
65
  readonly h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
61
66
  readonly h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";
@@ -70,13 +75,13 @@ declare const prose: {
70
75
  readonly ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none";
71
76
  readonly ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal";
72
77
  readonly li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0";
73
- readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
78
+ readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:mt-1.5 [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_li[data-type=taskItem]_[data-slot=checkbox]]:after:-inset-y-1.25 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
74
79
  readonly blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3";
75
80
  readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
76
81
  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";
77
82
  readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
78
83
  readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
79
- 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";
84
+ 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";
80
85
  readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
81
86
  };
82
87
  /** The element roles the prose recipe covers. */
package/dist/index.d.ts CHANGED
@@ -54,8 +54,13 @@ declare const prose: {
54
54
  * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
55
55
  * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
56
56
  * still says so on the root, where it reads as a decision.
57
+ *
58
+ * `min-w-0 wrap-anywhere` is the no-horizontal-overflow contract (2026-09-26): a long word, URL
59
+ * or inline code run breaks inside the line instead of widening the page, and `anywhere` (not
60
+ * `break-word`) also lowers the min-content width, so a prose root inside a flex item shrinks.
61
+ * Fenced code (`white-space: pre`) and tables keep their lines and scroll inside their own box.
57
62
  */
58
- readonly root: "font-sans text-sm font-normal text-foreground";
63
+ readonly root: "font-sans text-sm font-normal text-foreground min-w-0 wrap-anywhere";
59
64
  readonly h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
60
65
  readonly h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
61
66
  readonly h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";
@@ -70,13 +75,13 @@ declare const prose: {
70
75
  readonly ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none";
71
76
  readonly ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal";
72
77
  readonly li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0";
73
- readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
78
+ readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:mt-1.5 [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_li[data-type=taskItem]_[data-slot=checkbox]]:after:-inset-y-1.25 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
74
79
  readonly blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3";
75
80
  readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
76
81
  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";
77
82
  readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
78
83
  readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
79
- 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";
84
+ 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";
80
85
  readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
81
86
  };
82
87
  /** The element roles the prose recipe covers. */
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  mergeRefs,
6
6
  prose,
7
7
  proseClassName
8
- } from "./chunk-ZSXJC3TJ.js";
8
+ } from "./chunk-MJM6KH7P.js";
9
9
  export {
10
10
  FLOATING,
11
11
  TIMINGS,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vegastack/design",
3
- "version": "0.7.42",
3
+ "version": "0.7.44",
4
4
  "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -70,7 +70,7 @@
70
70
  "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs && node test/doctor.test.mjs"
71
71
  },
72
72
  "dependencies": {
73
- "@vegastack/design-tokens": "^0.7.33",
73
+ "@vegastack/design-tokens": "^0.7.43",
74
74
  "clsx": "^2.1.1",
75
75
  "tailwind-merge": "^3.6.0",
76
76
  "tsconfig-paths": "^4.2.0",
package/skills/vegastack-consume/SKILL.md CHANGED
@@ -79,6 +79,20 @@ content. Get it from `@vegastack/design/base.css` (which sets `body { isolation:
79
79
  putting `className="isolate"` on your `<body>` yourself. Without it, popups can render _under_ app
80
80
  chrome or mis-position in stacking-context-heavy layouts.
81
81
 
82
+ **Stop iOS focus zoom.** iOS Safari zooms into any focused field under 16px. `base.css` renders
83
+ text-entry controls at 16px on touch pointers, and the viewport should cap the scale as well, which
84
+ stops focus zoom while pinch-zoom keeps working on iOS. In Next.js, in the root layout:
85
+
86
+ ```tsx
87
+ import type { Viewport } from "next";
88
+
89
+ export const viewport: Viewport = {
90
+ width: "device-width",
91
+ initialScale: 1,
92
+ maximumScale: 1,
93
+ };
94
+ ```
95
+
82
96
  ## 4. Configure registry access
83
97
 
84
98
  Components come from a private registry behind Cloudflare Access service tokens.
package/skills/vegastack-design-system/references/components.md CHANGED
@@ -3,7 +3,7 @@
3
3
  <!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
4
4
  which is the authority for membership and counts. -->
5
5
 
6
- **127 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 3 data libs (`date-time`, `geo-data`, `drag-item`) — 689 registry items in total.
6
+ **128 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`) — 691 registry items in total.
7
7
 
8
8
  Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
9
9
  `@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
@@ -29,7 +29,7 @@ starts with `icon-` is a component and never an icon.
29
29
  - **`date-picker`** — Pick a single date or a date range from a calendar popover — token-styled, keyboard-navigable, with optional quick presets.
30
30
  - **`dropzone`** — File acquisition surface — drop, click-to-browse, and paste — as a thin shell over use-file-drop; the surface is the named focusable control over a hidden picker-bridge input; data-dragging/data-drag-invalid styling flags.
31
31
  - **`editable-cell`** — Inline-editable value whose edit mode looks like view — same box, inherited type, no border — with optimistic saves, a delayed spinner, rollback plus a Retry toast on failure, required, multiline, table-cell and heading variants, and a typed text/select/custom editor registry.
32
- - **`emoji-picker`** — A popover with a searchable, category-grouped grid of emoji that returns the selected character via onValueChange (curated set, not full Unicode).
32
+ - **`emoji-picker`** — A popover with a quick row, search, a category bar, recents and a category-grouped grid of emoji that returns the selected character via onValueChange (curated set, loaded lazily).
33
33
  - **`field`** — The form-field scaffold — label, description, error, legend, separator and choice-card layouts.
34
34
  - **`input`** — A styled Base UI input for every text-entry type: a bordered default with the focus border tint (FOC-3), or a borderless ghost title field tinted on hover and focus; sm, default and lg sizes.
35
35
  - **`input-group`** — An input or textarea with addons — icons, text, buttons, kbd hints and spinners on one surface.
@@ -52,8 +52,9 @@ starts with `icon-` is a component and never an icon.
52
52
 
53
53
  - **`chip`** — The one labelled pill primitive — 10 decorative hues, two tiers, an optional selection rung, and a real 24x24 remove control. Behind Tag and FilterChip; ComboboxChip is Base UI's own chip, not this primitive.
54
54
  - **`code-block`** — A code panel with a language header and copy affordance — the shared code surface for chat transcripts, docs, and examples.
55
- - **`comments`** — A record's comments: a list with a count, Load earlier, skeleton and empty states, comments with edit/delete/copy link, and a composer.
55
+ - **`comments`** — A record's comments: a list with a count, Load earlier, skeleton and empty states, comments with edit/delete/copy link and emoji reactions, and a composer.
56
56
  - **`meta-line`** — An icon + text meta line under a record title: wrapping facts such as type, date and time, duration and owner, in the muted ink.
57
+ - **`reactions`** — Slack-style emoji reactions: pills with counts that toggle, a hover card naming who reacted, and an add-reaction button with quick reactions.
57
58
  - **`stat`** — A labelled value block — muted label over a value, honest faint empty state, optional delta line. Two scales.
58
59
  - **`tag-group`** — Hue-tinted label chips on the 10-hue tag palette, with +N overflow collapsing and removable tags.
59
60
 
@@ -157,7 +158,7 @@ starts with `icon-` is a component and never an icon.
157
158
 
158
159
  ## Rich text
159
160
 
160
- - **`text-edit`** — A Tiptap-based, markdown-first rich-text editor with no toolbar: a slash menu for blocks and a bubble menu for inline marks, a hover/focus tint, and one onCommit path.
161
+ - **`text-edit`** — A Tiptap-based, markdown-first rich-text editor with no toolbar and no fill: a slash menu for blocks, a bubble menu for marks and block types, GFM tables with a menu and drag grips, block drag handles, portaled menus, and one onCommit path.
161
162
 
162
163
  ## Chat
163
164