velloo 0.4.1 → 0.6.0

package/pkgs/provider-none/src/manifest.ts

@@ -14,7 +14,9 @@ const PRIMITIVE_DESCRIPTORS: ComponentDescriptor[] = [
     id: "Box",
     category: "ui",
     source: "velloo",
+    plainElement: true,
     props: [
+      { name: "as", type: "string", optional: true, control: "string" },
       {
         name: "className",
         type: "string | undefined",

package/pkgs/schema/src/annotation.ts

@@ -100,11 +100,14 @@ export const CanvasNoteSchema = z
      */
     x: z.number().optional(),
     y: z.number().optional(),
+    /** User-resizable width. */
+    width: z.number().positive(),
     /**
-     * User-resizable width. Height is always derived from content (notes
-     * never scroll; the box expands downward).
+     * The height the author drew or resized the note to. Absent, the note is
+     * exactly as tall as its text; set, it is this tall, and text that runs
+     * past it scrolls inside the note.
      */
-    width: z.number().positive(),
+    height: z.number().positive().optional(),
     /** Markdown body. */
     body: z.string(),
     /** Present when the note is about a specific node rather than the board. */

package/pkgs/schema/src/comment.ts

@@ -116,4 +116,13 @@ export type CommentAnchorState =
   | { status: "attached"; resolvedPath: number[] }
   | { status: "stale" };
 
-export type CommentThreadView = CommentThread & { anchorState: CommentAnchorState };
+export type CommentThreadView = CommentThread & {
+  anchorState: CommentAnchorState;
+  /**
+   * False when the viewer can read the thread but not resolve or delete it — a
+   * cloud thread on a link they no longer manage. Absent means they can.
+   */
+  manage?: false;
+  /** The git branch a cloud thread's link was last published from, where known. */
+  branch?: string;
+};

package/pkgs/schema/src/config.ts

@@ -28,7 +28,7 @@ export const LibrarySchema = z.object({
    * Component provider id. The server's provider loader maps ids to
    * factories; `"shadcn-upstream"` is the default for new folders.
    */
-  id: z.enum(["shadcn-upstream", "none", "mui", "antd", "chakra"]),
+  id: z.enum(["shadcn-upstream", "none", "html", "mui", "antd", "chakra"]),
   version: z.string().min(1),
   source: z.enum(["binary", "cache", "in-repo"]),
   /** Where the components live, relative to the design folder root. */
@@ -50,6 +50,19 @@ const CodegenConfigSchema = z.object({
 
 export type CodegenConfig = z.infer<typeof CodegenConfigSchema>;
 
+/**
+ * A path inside the host app, relative to its root. The config is committed
+ * with the repo and the agents are told to open what it names, so a cloned
+ * repo must not be able to aim it anywhere else: absolute paths and `..`
+ * segments make the file invalid rather than being resolved.
+ */
+const AppRelativePathSchema = z
+  .string()
+  .min(1)
+  .refine((path) => !/^(?:[\\/~]|[A-Za-z]:)/.test(path) && !path.split(/[\\/]/).includes(".."), {
+    message: "must be relative to the app root, with no absolute path or `..` segment",
+  });
+
 /**
  * Where the host app lives, used by the live-island bundler to resolve
  * a `render:"live"` extension's `importPath` (and its dependencies, e.g.
@@ -73,6 +86,11 @@ export const HostAppSchema = z.object({
    * built-in framework recipe, then no wrapper.
    */
   preview: z.string().min(1).optional(),
+  /**
+   * The app's stylesheets an HTML design is styled by, in cascade order. The
+   * design keeps copies of them under `assets/host/` (`store_host_files`).
+   */
+  stylesheets: z.array(z.string().regex(/^(?:\/(?!\/)|https:\/\/)/)).optional(),
   /**
    * Bounds repository-component discovery beyond what the app's entries and
    * routes import: `include` adds component roots (files or directories,
@@ -171,6 +189,20 @@ export const ConfigSchema = z
     styling: z.object({ framework: z.enum(["tailwind", "none"]) }).optional(),
     /** Host app location for the live-island bundler. See `HostAppSchema`. */
     hostApp: HostAppSchema.optional(),
+    /**
+     * A design-system document this folder follows — normally the repo's
+     * `DESIGN.md`.
+     *
+     * A path, never a copy. The file belongs to the repo and goes on being
+     * edited there; a copy inside the design folder would drift away from the
+     * rules it was supposed to state, which is the one thing a design system
+     * must not do. Relative to the host app root, so the usual value is
+     * `DESIGN.md`.
+     *
+     * Optional because the folder also finds one by convention — this records
+     * a file somewhere unconventional, or pins the choice when several exist.
+     */
+    designSystem: z.object({ path: AppRelativePathSchema }).optional(),
     /**
      * Named host apps for monorepos — the multi-app twin of `hostApp`, keyed
      * by a short app name (`"web"`, `"admin"`; `init`'s multi-app scan uses

package/pkgs/schema/src/css-declarations.ts

@@ -0,0 +1,41 @@
+const CSS_PROPERTY = /^(--[\w-]+|-?[a-z][a-z-]*)$/;
+
+/**
+ * CSS declaration text as a React style object (`background-size` ⇒
+ * `backgroundSize`, custom properties kept), or null when the text is not a
+ * declaration list — a class string, say. Semicolons inside `url(…)` or quotes
+ * do not split.
+ */
+export function styleObjectFromCss(text: string): Record<string, string> | null {
+  const declarations: string[] = [];
+  let depth = 0;
+  let quote: string | null = null;
+  let start = 0;
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    if (quote) {
+      if (char === quote) quote = null;
+    } else if (char === '"' || char === "'") quote = char;
+    else if (char === "(") depth++;
+    else if (char === ")") depth = Math.max(0, depth - 1);
+    else if (char === ";" && depth === 0) {
+      declarations.push(text.slice(start, i));
+      start = i + 1;
+    }
+  }
+  declarations.push(text.slice(start));
+  const style: Record<string, string> = {};
+  for (const declaration of declarations) {
+    if (declaration.trim() === "") continue;
+    const colon = declaration.indexOf(":");
+    if (colon < 0) return null;
+    const property = declaration.slice(0, colon).trim().toLowerCase();
+    const value = declaration.slice(colon + 1).trim();
+    if (!CSS_PROPERTY.test(property) || value === "") return null;
+    const key = property.startsWith("--")
+      ? property
+      : property.replace(/^-(ms)-/, "$1-").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+    style[key] = value;
+  }
+  return Object.keys(style).length > 0 ? style : null;
+}

package/pkgs/schema/src/index.ts

@@ -56,6 +56,7 @@ export {
   type ViewportPreset,
   ViewportPresetSchema,
 } from "./config.ts";
+export { styleObjectFromCss } from "./css-declarations.ts";
 export {
   isCssIdent,
   neutralizeCssText,
@@ -93,6 +94,7 @@ export {
 } from "./migrate.ts";
 export {
   type ComponentNode,
+  type EmitAsRef,
   isComponentNode,
   isParamRef,
   isRepoNode,
@@ -109,6 +111,17 @@ export {
   repoKey,
   type SnippetInstance,
 } from "./node.ts";
+export {
+  type EmitAsNode,
+  isNode,
+  isSyntheticRef,
+  type NodeShape,
+  nodeShape,
+  PARAM_TAG_REF,
+  type RepoNode,
+  STATIC_REF,
+  type SyntheticRef,
+} from "./node-identity.ts";
 export {
   DesignNameSchema,
   designNameIssue,
@@ -139,6 +152,8 @@ export {
   ColorsSchema,
   type LooseTokenGroup,
   resolveColors,
+  spacingCssTokens,
+  TAILWIND_SIZE_NAMES,
   type Theme,
   ThemeSchema,
   TypographySchema,
@@ -173,7 +188,7 @@ export {
   typesetSizePx,
   typesetThemeTokens,
   typesetUtilityClasses,
-  typesetV3FontSize,
+  typesetV3Theme,
   typesetVars,
 } from "./typeset.ts";
 export { type DuplicateId, findDuplicateIds } from "./validate-ids.ts";

package/pkgs/schema/src/node-identity.ts

@@ -0,0 +1,92 @@
+import {
+  type ComponentNode,
+  type EmitAsRef,
+  isComponentNode,
+  isParamRef,
+  isSnippetInstance,
+  type Node,
+  type ParamRef,
+  type RepoComponentRef,
+  type SnippetInstance,
+} from "./node.ts";
+
+/**
+ * A `$ref` the renderer resolves itself rather than through any registry.
+ * Synthetic refs are never persisted — a preview synthesizes them — and every
+ * provider has to be able to draw them, so they can't be library components
+ * (a `none` folder has no `Badge` to draw a param slot with).
+ */
+export const PARAM_TAG_REF = "velloo:param-tag";
+
+/**
+ * The ref a node serializes to when the canvas bundle has no browser source
+ * for it and the client must drop in its server render instead.
+ */
+export const STATIC_REF = "velloo:static";
+
+export type SyntheticRef = typeof PARAM_TAG_REF | typeof STATIC_REF;
+
+const SYNTHETIC_REFS: readonly SyntheticRef[] = [PARAM_TAG_REF, STATIC_REF];
+
+export function isSyntheticRef(ref: string): ref is SyntheticRef {
+  return (SYNTHETIC_REFS as readonly string[]).includes(ref);
+}
+
+/** A component node carrying a repository identity (see {@link ComponentNode.$repo}). */
+export type RepoNode = ComponentNode & { $repo: RepoComponentRef };
+
+/** A component node carrying an emit-time host facade (see {@link ComponentNode.$emitAs}). */
+export type EmitAsNode = ComponentNode & { $emitAs: EmitAsRef };
+
+/**
+ * What a node's own fields say it is. Purely structural: no registry, no
+ * catalog, no I/O — a `named` shape is as far as the node alone can go, and
+ * `resolveNodeIdentity` in `@velloo/provider` takes it from there.
+ *
+ * The order of the `$`-keys is the contract, stated here once and nowhere
+ * else: `$snippet`, then `$param`, then a component — where an identity
+ * (`$repo`) beats an emit-time facade (`$emitAs`) beats a synthetic ref beats
+ * a plain name. A malformed value carrying both `$snippet` and `$ref` is a
+ * snippet instance, as every walker has always read it.
+ */
+export type NodeShape =
+  | { kind: "repo"; node: RepoNode; ref: string; repo: RepoComponentRef }
+  | { kind: "emit-as"; node: EmitAsNode; ref: string; emitAs: EmitAsRef }
+  | { kind: "synthetic"; node: ComponentNode; ref: SyntheticRef }
+  | { kind: "named"; node: ComponentNode; ref: string }
+  | { kind: "snippet"; node: SnippetInstance }
+  | { kind: "param"; node: ParamRef }
+  /** Not a node at all — a raw scalar or object sitting in a node position. */
+  | { kind: "invalid"; value: unknown };
+
+/** Discriminate a value by its own fields. Accepts `unknown`: node positions are a trust boundary. */
+export function nodeShape(value: unknown): NodeShape {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return { kind: "invalid", value };
+  }
+  const node = value as Node;
+  if (isSnippetInstance(node)) return { kind: "snippet", node };
+  if (isParamRef(node)) return { kind: "param", node };
+  if (isComponentNode(node)) {
+    if (node.$repo !== undefined) {
+      return { kind: "repo", node: node as RepoNode, ref: node.$ref, repo: node.$repo };
+    }
+    if (node.$emitAs !== undefined) {
+      return { kind: "emit-as", node: node as EmitAsNode, ref: node.$ref, emitAs: node.$emitAs };
+    }
+    if (isSyntheticRef(node.$ref)) {
+      return { kind: "synthetic", node, ref: node.$ref };
+    }
+    return { kind: "named", node, ref: node.$ref };
+  }
+  return { kind: "invalid", value };
+}
+
+/**
+ * Whether a raw JSON value is itself a node. The check every walker needs when
+ * it meets a *prop* value — a `children` prop carrying inline rich text, a slot
+ * prop holding an icon — where a node and a plain value are both legal.
+ */
+export function isNode(value: unknown): value is Node {
+  return nodeShape(value).kind !== "invalid";
+}

package/pkgs/schema/src/node.ts

@@ -46,18 +46,27 @@ export type ComponentNode = {
    * subtree — preserving the app's real component identity through
    * capture → design → emit. Absent ⇒ the node emits as itself.
    */
-  $emitAs?: { name: string; importPath: string } | undefined;
+  $emitAs?: EmitAsRef | undefined;
   /**
    * Repository component identity: this node IS a component the host app
    * imports (a package export such as Mantine's `Tabs`, or the app's own
    * `StatCard`), not a library component. `$ref` stays the JSX name codegen
-   * prints; the identity decides rendering and imports. Takes precedence over
-   * any provider component or extension of the same name, so shadowing is
-   * explicit on the node rather than a registry-order accident.
+   * prints; the identity decides rendering and imports. Where it sits against
+   * the node's other keys is `nodeShape`'s to say (`./node-identity.ts`).
    */
   $repo?: RepoComponentRef | undefined;
 };
 
+/**
+ * A host component a node emits *as*, in place of its own subtree. Superseded
+ * in practice by {@link RepoComponentRef}, which renders for real; kept because
+ * design folders carry it.
+ */
+export type EmitAsRef = {
+  name: string;
+  importPath: string;
+};
+
 /**
  * Where a repository component comes from. The import form is kept exactly as
  * code generation must print it; the resolved file is runtime cache data and

package/pkgs/schema/src/theme.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { isCssIdent } from "./css-sanitize.ts";
 
 const NumOrCssLen = z.union([z.number(), z.string().min(1)]);
 
@@ -56,6 +57,45 @@ export type Colors = z.infer<typeof ColorsSchema>;
  */
 export type ColorsOverride = { [K in keyof Colors]?: Colors[K] | undefined };
 
+/**
+ * Spacing names Tailwind v4 already reads as a size scale. Its `max-w-*`,
+ * `w-*` and `min-w-*` utilities resolve a `--spacing-<name>` ahead of
+ * `--container-<name>`, so a design system's t-shirt spacing (`xl: 1.5rem`)
+ * emitted under one of these names turns every `max-w-xl` into 24px and a
+ * paragraph into one word per line.
+ */
+export const TAILWIND_SIZE_NAMES: ReadonlySet<string> = new Set([
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "prose",
+]);
+
+/**
+ * The named spacing tokens that become `--spacing-<name>` in CSS. Numeric
+ * steps are Tailwind's built-in scale and names Tailwind reads as sizes stay
+ * in the theme only; the canvas stylesheet and the emitted globals.css both
+ * come from this list, so they cannot disagree.
+ */
+export function spacingCssTokens(spacing: Theme["spacing"]): Array<[string, string | number]> {
+  const out: Array<[string, string | number]> = [];
+  for (const [name, value] of Object.entries(spacing ?? {})) {
+    if (!Number.isNaN(Number(name)) || !isCssIdent(name) || TAILWIND_SIZE_NAMES.has(name)) continue;
+    if (typeof value === "string" || typeof value === "number") out.push([name, value]);
+  }
+  return out;
+}
+
 /**
  * The effective colors for a mode: `colors`, with `colorsDark` layered on when
  * rendering dark.
@@ -91,7 +131,12 @@ export function resolveColors(theme: Theme, dark = false): Colors {
  * CSS-safe ident so they can't inject into the emitted stylesheet.
  */
 const PaletteSchema = z.record(
-  z.string().regex(/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/),
+  z
+    .string()
+    .regex(
+      /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/,
+      'palette keys are lowercase kebab-case, letter first — "primary-soft", "success-500", "border-primary-300"',
+    ),
   z.string().min(1),
 );
 

package/pkgs/schema/src/typeset.ts

@@ -287,24 +287,31 @@ export function typesetUtilityClasses(): string[] {
 }
 
 /**
- * The scale as a Tailwind v3 `theme.extend.fontSize` map. Each entry carries its
- * paired leading and tracking, and every value is a `var()` into the typeset
- * sheet — so a v3 app re-derives inside a `.typeset-<preset>` region exactly
- * like a v4 one.
+ * The scale as Tailwind v3 `theme.extend` maps. `fontSize` carries each role's
+ * paired leading and tracking (so `text-h1` alone sets all three), and
+ * `lineHeight` / `letterSpacing` make the standalone `leading-<role>` /
+ * `tracking-<role>` utilities exist — v3 derives no utility from a fontSize
+ * tuple's extras, and `TYPESET_CLASSES` spells all three. Every value is a
+ * `var()` into the typeset sheet, so a v3 app re-derives inside a
+ * `.typeset-<preset>` region exactly like a v4 one.
  */
-export function typesetV3FontSize(): Record<
-  string,
-  [string, { lineHeight: string; letterSpacing: string }]
-> {
-  return Object.fromEntries(
-    TYPESET_SCALE_NAMES.map((role) => [
-      role,
-      [
-        `var(--text-${role})`,
-        { lineHeight: `var(--leading-${role})`, letterSpacing: `var(--tracking-${role})` },
-      ],
-    ]),
-  );
+export function typesetV3Theme(): {
+  fontSize: Record<string, [string, { lineHeight: string; letterSpacing: string }]>;
+  lineHeight: Record<string, string>;
+  letterSpacing: Record<string, string>;
+} {
+  const fontSize: Record<string, [string, { lineHeight: string; letterSpacing: string }]> = {};
+  const lineHeight: Record<string, string> = {};
+  const letterSpacing: Record<string, string> = {};
+  for (const role of TYPESET_SCALE_NAMES) {
+    fontSize[role] = [
+      `var(--text-${role})`,
+      { lineHeight: `var(--leading-${role})`, letterSpacing: `var(--tracking-${role})` },
+    ];
+    lineHeight[role] = `var(--leading-${role})`;
+    letterSpacing[role] = `var(--tracking-${role})`;
+  }
+  return { fontSize, lineHeight, letterSpacing };
 }
 
 /**

package/pkgs/shadcn-snapshot/dist/manifest.json

@@ -460,6 +460,7 @@
     "group": "layout",
     "family": "Box",
     "source": "velloo",
+    "plainElement": true,
     "props": [
       {
         "name": "as",

package/pkgs/shadcn-snapshot/src/components/ui/alert.tsx

@@ -1,11 +1,9 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/alert).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 const alertVariants = cva(

package/pkgs/shadcn-snapshot/src/components/ui/aspect-ratio.tsx

@@ -1,7 +1,6 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/aspect-ratio).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 "use client";
 
 import { AspectRatio as AspectRatioPrimitive } from "radix-ui";

package/pkgs/shadcn-snapshot/src/components/ui/attachment.tsx

@@ -1,13 +1,12 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/attachment).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
+
 import { Button } from "./button.tsx";
 
 const attachmentVariants = cva(

package/pkgs/shadcn-snapshot/src/components/ui/avatar.tsx

@@ -1,12 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/avatar).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 "use client";
 
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 function Avatar({

package/pkgs/shadcn-snapshot/src/components/ui/badge.tsx

@@ -1,12 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/badge).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 const badgeVariants = cva(

package/pkgs/shadcn-snapshot/src/components/ui/breadcrumb.tsx

@@ -1,12 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/breadcrumb).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { Slot } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {

package/pkgs/shadcn-snapshot/src/components/ui/bubble.tsx

@@ -1,12 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/bubble).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {

package/pkgs/shadcn-snapshot/src/components/ui/button-group.tsx

@@ -1,11 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/button-group).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
-
 import { cn } from "../../lib/utils.ts";
+
 import { Separator } from "./separator.tsx";
 
 const buttonGroupVariants = cva(

package/pkgs/shadcn-snapshot/src/components/ui/button.tsx

@@ -1,12 +1,10 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/button).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 const buttonVariants = cva(

package/pkgs/shadcn-snapshot/src/components/ui/card.tsx

@@ -1,9 +1,7 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/card).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 import type * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
 
 function Card({

package/pkgs/shadcn-snapshot/src/components/ui/carousel.tsx

@@ -1,14 +1,13 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/carousel).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 "use client";
 
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import * as React from "react";
-
 import { cn } from "../../lib/utils.ts";
+
 import { Button } from "./button.tsx";
 
 type CarouselApi = UseEmblaCarouselType[1];

package/pkgs/shadcn-snapshot/src/components/ui/chart.tsx

@@ -1,4 +1,4 @@
-// Velloo-flavored Chart. shadcn's `chart` is a recharts wrapper that needs a
+// Canvas-safe: Velloo-flavored Chart. shadcn's `chart` is a recharts wrapper that needs a
 // measured DOM (ResponsiveContainer), so it renders nothing under the
 // renderer's static SSR. We render a realistic preview server-side via
 // echarts' headless SSR-to-SVG mode (see chart-option.ts) — bar/line/area/

package/pkgs/shadcn-snapshot/src/components/ui/direction.tsx

@@ -1,7 +1,6 @@
 // Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/direction).
-// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
-// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
-// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+// Design-mode fork for the Velloo canvas — not the shadcn the IDE chrome renders.
+// Regenerate with `bun run vendor` — the pipeline is scripts/vendor-shadcn/.
 "use client";
 
 import { Direction } from "radix-ui";