@vegastack/design 0.7.58 → 0.7.60

package/bin/check-updates.mjs

@@ -5,7 +5,8 @@
 //
 // HOW IT WORKS (one index request + bounded item requests for installed copies):
 //   1. Resolve the @vegastack registry url + auth headers from components.json (or env).
-//   2. Scan the components dir for files carrying the provenance header the registry stamps:
+//   2. Scan the components dir — plus `aliases.lib` / `aliases.hooks` for `@lib/…` and `@hooks/…`
+//      targets such as `date-time` — for files carrying the provenance header the registry stamps:
 //        // @vegastack <name>@<version> sha256-<integrity>
 //      That header IS the version pin recorded at copy-in time.
 //   3. Fetch the registry INDEX once (…/registry.json) — every item carries meta.version + meta.integrity.
@@ -357,10 +358,8 @@ function indexUrl(urlTemplate) {
 }
 
 // ── components dir + scan ──────────────────────────────────────────────────────────────────────
-function resolveComponentsDir(cwd, dirFlag, componentsJson) {
-  if (dirFlag) return resolve(cwd, dirFlag);
-  const ui = componentsJson?.aliases?.ui;
-  const rel = ui ? ui.replace(/^@\//, "").replace(/^~\//, "") : "components/ui";
+function resolveAliasDir(cwd, alias, fallback) {
+  const rel = alias ? alias.replace(/^@\//, "").replace(/^~\//, "") : fallback;
   const direct = resolve(cwd, rel); // assumes @/ = project root
   if (existsSync(direct)) return direct;
   const srcVariant = resolve(cwd, "src", rel); // common alias: @/* -> src/*
@@ -368,6 +367,35 @@ function resolveComponentsDir(cwd, dirFlag, componentsJson) {
   return direct; // documented default; "none found" message hints --dir
 }
 
+function resolveComponentsDir(cwd, dirFlag, componentsJson) {
+  if (dirFlag) return resolve(cwd, dirFlag);
+  return resolveAliasDir(cwd, componentsJson?.aliases?.ui, "components/ui");
+}
+
+/**
+ * Where registry files land besides the components dir: `@lib/…` targets (e.g. `date-time`,
+ * `page-layout`) under `aliases.lib`, `@hooks/…` under `aliases.hooks`. Scanned only when
+ * components.json names the alias and the directory exists — so a locally edited lib file is
+ * drift exactly like an edited component.
+ */
+function resolveExtraRoots(cwd, componentsJson, uiDir) {
+  const roots = [];
+  for (const kind of ["lib", "hooks"]) {
+    const alias = componentsJson?.aliases?.[kind];
+    if (!alias) continue;
+    const dir = resolveAliasDir(cwd, alias, kind);
+    if (!existsSync(dir)) continue;
+    const overlaps = [uiDir, ...roots.map((r) => r.dir)].some(
+      (other) =>
+        dir === other ||
+        dir.startsWith(other + sep) ||
+        other.startsWith(dir + sep),
+    );
+    if (!overlaps) roots.push({ kind, dir });
+  }
+  return roots;
+}
+
 function walk(dir, out = [], isRoot = true) {
   let rootStat;
   try {
@@ -410,7 +438,7 @@ function walk(dir, out = [], isRoot = true) {
 // pipeline strips leading comments during its transform, so most consumer copies have NO
 // header. Headerless files are identified by filename against the registry index and compared
 // by alias-normalized CONTENT instead (see `normalizeForCompare`).
-function readInstalled(file, root) {
+function readInstalled(file, root, kind = "ui") {
   let content;
   try {
     content = readFileSync(file, "utf8");
@@ -423,7 +451,7 @@ function readInstalled(file, root) {
   );
   const m = PROVENANCE_RE.exec(firstLine);
   const name = basename(file).replace(/\.tsx?$/, "");
-  const relativePath = relative(root, file).split(sep).join("/");
+  const relativePath = `${kind}/${relative(root, file).split(sep).join("/")}`;
   return m
     ? {
         file,
@@ -464,10 +492,19 @@ function expectedVariantsForCompare(content, label, aliases, fileType) {
   return new Set([exact, stripped]);
 }
 
-function uiTargetPath(file) {
-  return typeof file?.target === "string" && file.target.startsWith("@ui/")
-    ? file.target.slice("@ui/".length)
-    : undefined;
+const TARGET_ROOTS = [
+  ["@ui/", "ui"],
+  ["@lib/", "lib"],
+  ["@hooks/", "hooks"],
+];
+
+/** A registry file's install location as `<root kind>/<path>`, or undefined for other targets. */
+function targetPath(file) {
+  if (typeof file?.target !== "string") return undefined;
+  for (const [prefix, kind] of TARGET_ROOTS)
+    if (file.target.startsWith(prefix))
+      return `${kind}/${file.target.slice(prefix.length)}`;
+  return undefined;
 }
 
 async function mapLimit(values, limit, fn) {
@@ -611,7 +648,7 @@ export async function main(argv) {
     }
     remote.set(item.name, item);
     for (const file of item.files) {
-      const target = uiTargetPath(file);
+      const target = targetPath(file);
       if (!target) continue;
       if (targetOwners.has(target)) {
         console.error(
@@ -630,15 +667,19 @@ export async function main(argv) {
   //  - headerless files NOT in the index are skipped (they're the consumer's own components)
   let installedFiles;
   try {
-    installedFiles = walk(dir);
+    installedFiles = [
+      ...walk(dir).map((file) => readInstalled(file, dir, "ui")),
+      ...(opts.dir ? [] : resolveExtraRoots(cwd, componentsJson, dir)).flatMap(
+        ({ kind, dir: extra }) =>
+          walk(extra).map((file) => readInstalled(file, extra, kind)),
+      ),
+    ];
   } catch (err) {
     console.error(`✗ ${terminalText(err.message)}`);
     return 2;
   }
   const grouped = new Map();
-  for (const installedFile of installedFiles
-    .map((file) => readInstalled(file, dir))
-    .filter(Boolean)) {
+  for (const installedFile of installedFiles.filter(Boolean)) {
     const itemName = installedFile.header
       ? installedFile.name
       : targetOwners.get(installedFile.relativePath);
@@ -708,7 +749,7 @@ export async function main(argv) {
         status: "missing",
       };
 
-    const expectedTargets = (r.files ?? []).map(uiTargetPath).filter(Boolean);
+    const expectedTargets = (r.files ?? []).map(targetPath).filter(Boolean);
     const installedByTarget = new Map(
       group.files.map((file) => [file.relativePath, file]),
     );
@@ -735,7 +776,7 @@ export async function main(argv) {
       if (item.name !== group.name || !Array.isArray(item.files)) {
         throw new Error("registry item identity/files contract mismatch");
       }
-      const fetchedTargets = item.files.map(uiTargetPath).filter(Boolean);
+      const fetchedTargets = item.files.map(targetPath).filter(Boolean);
       const sortedFetchedTargets = [...fetchedTargets].sort();
       const sortedExpectedTargets = [...expectedTargets].sort();
       if (
@@ -751,7 +792,7 @@ export async function main(argv) {
       }
       if (
         item.files.some(
-          (entry) => uiTargetPath(entry) && typeof entry.content !== "string",
+          (entry) => targetPath(entry) && typeof entry.content !== "string",
         )
       ) {
         throw new Error("registry item contains a non-string component file");
@@ -765,7 +806,7 @@ export async function main(argv) {
       }
       let same = true;
       for (const entry of item.files ?? []) {
-        const target = uiTargetPath(entry);
+        const target = targetPath(entry);
         if (!target) continue;
         const local = installedByTarget.get(target);
         const expectedVariants = expectedVariantsForCompare(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.58",
+  "version": "0.7.60",
   "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/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. -->
 
-**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.
+**136 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`), 12 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `command-search-01`, `list-page-01`, `library-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 9 data libs (`date-time`, `geo-data`, `emoji-data`, `drag-item`, `text-anchor`, `text-anchor-doc`, `file-kind`, `page-layout`, `tile-overlay`) — 705 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
@@ -72,7 +72,7 @@ starts with `icon-` is a component and never an icon.
 - **`empty`** — A zero-data placeholder — always an icon (the icon prop, Inbox by default), title, description and a content slot, with a compact sm size for inline empties. The one empty-state markup: DataList's emptyState and noResults (SearchX, "No matches", Clear filters) are built on it.
 - **`item`** — A composable row for list and feed content — media, title, description, actions — with a highlighted flash for a just-changed row.
 - **`kbd`** — A keyboard-key chip, and a group that lays several of them out inline.
-- **`markdown-view`** — Render a markdown string to safe, token-styled HTML — headings, lists, code, blockquotes, links, GFM tables — XSS-safe, no raw HTML.
+- **`markdown-view`** — Render a markdown string to safe, token-styled HTML — headings (with optional ids), lists, code, blockquotes, links, GFM tables, mention and file chips, callouts and toggles — XSS-safe, no raw HTML.
 - **`priority-icon`** — A flag marking priority — urgent, high, medium, low, none — each in a semantic color with filled, outline or dashed fill.
 - **`relative-time`** — One Intl-based dates & times module — formatRelative, formatDuration, formatDate, formatDateTime, formatDateRange, formatTimeOfDay, formatDueLabel, groupByDay, time-zone cookie + provider — and the RelativeTime, DateTime, Duration and DueLabel components with absolute-time tooltips.
 - **`status-icon`** — A small status indicator icon — todo, in progress, blocked, done, cancelled — each mapping to a lucide icon and semantic color.
@@ -118,6 +118,7 @@ starts with `icon-` is a component and never an icon.
 
 - **`breadcrumb`** — A hierarchical navigation trail — links, separators, the current page, and ellipsis collapse for long paths.
 - **`command`** — A searchable command palette — filtered, grouped items with keyboard navigation, optionally inside a ⌘K dialog.
+- **`folder-tree`** — A Notion-style navigation tree for a file library — sections of folders, pages and files; folders that load their children on first open with loading, error, empty and Show all rows; one tab stop with tree arrow keys and typeahead; a ⋯ menu per row; pointer drag into a folder or section; and a folders-only picker mode for Move dialogs.
 - **`menubar`** — A persistent horizontal bar of menus — application-style File / Edit / View navigation.
 - **`multi-step-form`** — A guarded, branching flow around a Stepper — conditional steps, sync and async advance guards, locking, reachability-derived deep links and resume, and a phone layout chosen from the same predicate. Owns no fields and no validator.
 - **`navigation-menu`** — A collection of links for navigating websites — triggers that open one shared panel, and plain links styled to match.
@@ -162,7 +163,8 @@ starts with `icon-` is a component and never an icon.
 
 ## Rich text
 
-- **`text-edit`** — A Tiptap-based, markdown-first rich-text editor with no toolbar and no fill — caret-only as a document, or boxed with a subtle focus border: 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.
+- **`template-editor`** — A plain-paragraph editor for text with placeholders: typing @ or {{ opens a searchable list of tokens, the one picked becomes an atomic inline chip, and the value is plain text with {{id}} tokens.
+- **`text-edit`** — A Tiptap-based, markdown-first rich-text editor with no toolbar and no fill — caret-only as a document, or boxed with a subtle focus border: a slash menu for blocks, a bubble menu for marks and block types, GFM tables with a menu and drag grips, block drag handles, callouts and toggles, @ mentions, image and file uploads, a heading outline, comment highlights, portaled menus, and one onCommit path.
 
 ## Chat