@alexgorbatchev/shadcn 0.0.37 → 0.0.41

package/dist/theme.css

@@ -10,6 +10,11 @@
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
@@ -104,6 +109,11 @@
     --success-foreground: #00210f;
     --warning: #ffb224;
     --warning-foreground: #231500;
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
     --border: #353b44;
     --input: #6f7783;
     --ring: #ff5cd6;
@@ -138,6 +148,11 @@
     --success-foreground: #00210f;
     --warning: #ffb224;
     --warning-foreground: #231500;
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
     --border: #353b44;
     --input: #6f7783;
     --ring: #ff5cd6;
@@ -172,6 +187,11 @@
     --success-foreground: #ffffff;
     --warning: #a35400;
     --warning-foreground: #ffffff;
+    --chart-1: #2a78d6;
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
     --border: #c7ccd4;
     --input: #747c88;
     --ring: #b8168c;

package/licenses/commander-MIT.txt

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2011 TJ Holowaychuk <tj@vision-media.ca>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/llms/components/forms/NativeSelect.md

@@ -69,6 +69,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### CompactSmall
+
+```tsx
+{
+    args: { density: "compact", size: "sm" }
+}
+```
+
 ### Disabled
 
 ```tsx

package/llms/setup.md

@@ -194,6 +194,40 @@ Override tokens after the theme imports. This example uses the existing success
 }
 ```
 
+# Local React Prototypes
+
+The package includes `shadcn-prototype`, a local runner for editable React mockups. Its generated workspace includes a preview host and complete dashboard, editable project directory, and settings recipes. Helpers and sample data are included; the recipes do not import Storybook files.
+
+1. Create a workspace using Bun:
+
+   ```sh
+   bunx --bun --package @alexgorbatchev/shadcn shadcn-prototype workspace create ./mockups
+   ```
+
+2. Install its declared dependencies and start the preview:
+
+   ```sh
+   cd mockups
+   bun install
+   bun node_modules/.bin/shadcn-prototype workspace start .
+   ```
+
+3. Edit a recipe under `src/prototypes/`, or copy a recipe folder and update its `prototype.ts`. The preview discovers each folder automatically. Use the workbench controls for scenarios, themes, density, viewport sizes, and reset. Open screen gives a direct URL to the canvas.
+
+4. Run `just check` in the generated workspace to typecheck and build. `dist/` contains the static site. Preview requires Bun; the `just` recipes require [just](https://just.systems).
+
+The runner creates a new directory and rejects existing destinations. It does not install dependencies automatically. The generated manifest pins this package to the runner's version and declares the libraries used by the recipes and preview. The component package's dependency-installation contract is unchanged. State is in memory and resets when the canvas reloads; the recipes do not contact real services.
+
+| Command                        | Options                                            | Behavior                                                                            |
+| ------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `workspace create <directory>` | `-h, --help`                                       | Write a complete workspace to a new directory.                                      |
+| `workspace start [directory]`  | `-p, --port <number>` (default 5173), `-h, --help` | Run the local preview; directory defaults to `.`. Port 0 chooses an available port. |
+| `workspace build [directory]`  | `-h, --help`                                       | Build static output; directory defaults to `.`.                                     |
+| `skill`                        | `-h, --help`                                       | Print the agent skill installation instructions.                                    |
+| Root                           | `-V, --version`, `-h, --help`                      | Show the package version or command tree.                                           |
+
+Use `AGENT=1` for concise agent output. Read the [prototype agent skill](https://github.com/alexgorbatchev/shadcn/blob/main/skills/shadcn-prototype/SKILL.md) for the complete workflow, URL parameters, environment, and error handling. The generated recipes are runnable consumer examples; the Storybook excerpts below remain component references.
+
 # LLM Documentation
 
 Storybook serves a generated `llms.txt` index at its site root, with linked setup instructions and a reference page for each story file. Pages contain public package imports, documented story controls, default args, and Storybook CSF examples with interaction tests omitted. The excerpts can depend on local helpers and fixtures; each page links to its full source. Story controls describe the configured controls, rather than the complete TypeScript props API.

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.37",
+  "version": "0.0.41",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alexgorbatchev/shadcn.git"
   },
+  "bin": {
+    "shadcn-prototype": "dist/prototype.js"
+  },
   "files": [
     "dist",
     "llms",
@@ -15,7 +18,8 @@
     "LICENSE",
     "THIRD_PARTY_NOTICES.md",
     "assistant-ui-catalog.json",
-    "licenses"
+    "licenses",
+    "templates/prototype"
   ],
   "type": "module",
   "sideEffects": [
@@ -1050,12 +1054,13 @@
     "test": "vitest run --config .storybook/vitest.config.ts && bun run test:native && bun run test:package",
     "test:package": "bun run build && bun test scripts/__tests__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
     "test:preview": "bun test scripts/storybookPreview.test.ts",
+    "test:prototype": "bun test --config=./cli/bunfig.toml --coverage cli && vitest run --config .storybook/vitest.prototype.config.ts --coverage",
     "test:native": "vitest run --config .storybook/vitest.native.config.ts",
     "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
     "test:contrast": "vitest run --config .storybook/vitest.contrast.config.ts",
     "build": "bun scripts/build.ts",
     "typecheck": "tsc --noEmit",
-    "lint": "oxlint --deny-warnings src .storybook scripts && oxfmt --check . && bun run lint:unused",
+    "lint": "oxlint --deny-warnings src .storybook scripts cli templates/prototype/src templates/prototype/vite.config.ts && oxfmt --check . && bun run lint:unused",
     "lint:unused": "ts-unused check tsconfig.json",
     "storybook": "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
     "build-storybook": "bun scripts/buildLlmDocs.ts && storybook build",
@@ -1118,6 +1123,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colorjs.io": "0.7.1",
+    "commander": "^15.0.0",
     "cssesc": "3.0.0",
     "date-fns": "4.4.0",
     "diff": "9.0.0",

package/templates/prototype/AGENTS.md

@@ -0,0 +1,23 @@
+# Prototype workspace
+
+Build interactive React screens using the installed `@alexgorbatchev/shadcn` package.
+
+## Commands
+
+- Install: `just setup`
+- Local preview: `just run`
+- Agent preview: `just run-ai`
+- Typecheck and production build: `just check`
+- Static output: `just build` writes `dist/`
+
+Read `node_modules/@alexgorbatchev/shadcn/llms.txt` before using components. Resolve its relative links from the package directory.
+
+## Authoring
+
+- Each folder under `src/prototypes/` has a `prototype.ts` default export containing a title, description, and React component. The folder name is the prototype identifier. Copy a recipe folder to add a screen; Vite discovers it automatically.
+- Keep components under the recipe's `components/` directory and sample data beside them. Shared host components and scenario rendering live in `src/components/`; all helpers are included locally.
+- Compose the package's public components and semantic tokens. Install optional feature peers before importing their entry points. Keep reusable component capabilities in the library instead of overriding its internals.
+- `PrototypeProps.scenario` selects populated, empty, loading, or error. Extend the example state handling to match the requested flow. Implement controls and state transitions; declare any simulated backend behavior in the delivery notes.
+- The host renders each screen in an iframe so responsive styles and portals use its actual viewport. Open screen exposes a direct URL. Use one ThemeProvider per document; the host supplies theme and density to the canvas.
+- Recipe state is in memory. Reset data, changing preview settings, or reloading the canvas restores the fixtures. Implement persistence only when required by the prototype.
+- Validate primary interactions, form errors, empty/loading/error states, light/dark themes, both densities, and mobile sizing in a browser. Run `just check` before delivery and report any failures or unverified behavior.

package/templates/prototype/gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.env.local
+.tmp/
+.cache/

package/templates/prototype/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Prototype workbench</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/prototype/justfile

@@ -0,0 +1,18 @@
+default:
+    @just --list
+
+setup:
+    bun install
+
+run:
+    bun node_modules/.bin/shadcn-prototype workspace start .
+
+run-ai:
+    AGENT=1 bun node_modules/.bin/shadcn-prototype workspace start .
+
+build:
+    bun node_modules/.bin/shadcn-prototype workspace build .
+
+check:
+    bun node_modules/.bin/tsc --noEmit
+    just build

package/templates/prototype/src/components/ScenarioContent.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement, ReactNode } from "react";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  Spinner,
+} from "@alexgorbatchev/shadcn";
+import type { Scenario } from "../types";
+
+type ScenarioContentProps = { scenario: Scenario; children: ReactNode };
+
+export function ScenarioContent({ scenario, children }: ScenarioContentProps): ReactElement {
+  if (scenario === "loading")
+    return (
+      <div role="status" className="flex items-center gap-2">
+        <Spinner />
+        Loading sample data…
+      </div>
+    );
+  if (scenario === "error")
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>Unable to load data</AlertTitle>
+        <AlertDescription>This is the error scenario. Choose Populated to recover.</AlertDescription>
+      </Alert>
+    );
+  if (scenario === "empty")
+    return (
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle>No data yet</EmptyTitle>
+          <EmptyDescription>This is the empty scenario. Choose Populated to explore the recipe.</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  return <>{children}</>;
+}

package/templates/prototype/src/components/Workbench.tsx

@@ -0,0 +1,132 @@
+import { useState, type ReactElement } from "react";
+import {
+  Button,
+  DensityProvider,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  NativeSelect,
+  NativeSelectOption,
+  ThemeProvider,
+} from "@alexgorbatchev/shadcn";
+import type { PrototypeDefinition, Scenario } from "../types";
+
+const prototypes = Object.entries(
+  import.meta.glob<PrototypeDefinition>("../prototypes/*/prototype.ts", { eager: true, import: "default" }),
+).map(([path, definition]) => ({ ...definition, id: path.split("/").at(-2) ?? "" }));
+
+export function Workbench(): ReactElement {
+  const parameters = new URLSearchParams(window.location.search);
+  const [selected, setSelected] = useState(parameters.get("prototype") ?? "dashboard");
+  const [scenario, setScenario] = useState<Scenario>(() => {
+    const value = parameters.get("scenario");
+    return value === "empty" || value === "loading" || value === "error" ? value : "populated";
+  });
+  const [theme, setTheme] = useState<"light" | "dark">(parameters.get("theme") === "light" ? "light" : "dark");
+  const [density, setDensity] = useState<"comfortable" | "compact">(
+    parameters.get("density") === "compact" ? "compact" : "comfortable",
+  );
+  const [viewport, setViewport] = useState("responsive");
+  const [revision, setRevision] = useState(0);
+  const definition = prototypes.find((prototype) => prototype.id === selected);
+  const canvasParameters = new URLSearchParams({ canvas: "1", prototype: selected, scenario, theme, density });
+  const Component = definition?.component;
+  const isCanvas = parameters.get("canvas") === "1";
+
+  return (
+    <ThemeProvider forcedTheme={theme}>
+      <DensityProvider density={density}>
+        {isCanvas ? (
+          Component ? (
+            <Component scenario={scenario} />
+          ) : (
+            <p role="alert">Unknown prototype: {selected}</p>
+          )
+        ) : (
+          <div className="flex h-dvh flex-col" data-scroll="none">
+            <header className="shrink-0 border-b border-border p-4" data-scroll="none">
+              <h1 className="mb-3 text-lg font-semibold">Prototype workbench</h1>
+              <FieldGroup>
+                <div className="grid grid-cols-2 items-end gap-4 md:grid-cols-4 xl:grid-cols-7">
+                  <Field>
+                    <FieldLabel htmlFor="prototype">Prototype</FieldLabel>
+                    <NativeSelect id="prototype" value={selected} onChange={(event) => setSelected(event.target.value)}>
+                      {prototypes.map((prototype) => (
+                        <NativeSelectOption key={prototype.id} value={prototype.id}>
+                          {prototype.title}
+                        </NativeSelectOption>
+                      ))}
+                    </NativeSelect>
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="scenario">Scenario</FieldLabel>
+                    <NativeSelect
+                      id="scenario"
+                      value={scenario}
+                      onChange={(event) => {
+                        const value = event.target.value;
+                        if (value === "populated" || value === "empty" || value === "loading" || value === "error")
+                          setScenario(value);
+                      }}
+                    >
+                      <NativeSelectOption value="populated">Populated</NativeSelectOption>
+                      <NativeSelectOption value="empty">Empty</NativeSelectOption>
+                      <NativeSelectOption value="loading">Loading</NativeSelectOption>
+                      <NativeSelectOption value="error">Error</NativeSelectOption>
+                    </NativeSelect>
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="theme">Theme</FieldLabel>
+                    <NativeSelect
+                      id="theme"
+                      value={theme}
+                      onChange={(event) => setTheme(event.target.value === "light" ? "light" : "dark")}
+                    >
+                      <NativeSelectOption value="dark">Dark</NativeSelectOption>
+                      <NativeSelectOption value="light">Light</NativeSelectOption>
+                    </NativeSelect>
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="density">Density</FieldLabel>
+                    <NativeSelect
+                      id="density"
+                      value={density}
+                      onChange={(event) => setDensity(event.target.value === "compact" ? "compact" : "comfortable")}
+                    >
+                      <NativeSelectOption value="comfortable">Comfortable</NativeSelectOption>
+                      <NativeSelectOption value="compact">Compact</NativeSelectOption>
+                    </NativeSelect>
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="viewport">Viewport</FieldLabel>
+                    <NativeSelect id="viewport" value={viewport} onChange={(event) => setViewport(event.target.value)}>
+                      <NativeSelectOption value="responsive">Responsive</NativeSelectOption>
+                      <NativeSelectOption value="390">Mobile · 390px</NativeSelectOption>
+                      <NativeSelectOption value="1280">Desktop · 1280px</NativeSelectOption>
+                    </NativeSelect>
+                  </Field>
+                  <Button onClick={() => setRevision((value) => value + 1)}>Reset data</Button>
+                  <a className="text-sm underline" href={`?${canvasParameters}`} target="_blank" rel="noreferrer">
+                    Open screen
+                  </a>
+                </div>
+              </FieldGroup>
+              <p className="mt-3 text-sm text-muted-foreground">
+                {definition?.description ?? "Choose a prototype"} · Reset or reload restores sample data.
+              </p>
+            </header>
+            <main className="min-h-0 flex-1 overflow-auto p-4" aria-label="Preview viewport">
+              <iframe
+                key={revision}
+                title="Prototype preview"
+                src={`?${canvasParameters}`}
+                className="mx-auto block h-full min-h-96 outline outline-border"
+                style={{ width: viewport === "responsive" ? "100%" : `${viewport}px` }}
+              />
+            </main>
+          </div>
+        )}
+      </DensityProvider>
+    </ThemeProvider>
+  );
+}

package/templates/prototype/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Workbench } from "./components/Workbench";
+import "./styles.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing application root");
+createRoot(root).render(
+  <StrictMode>
+    <Workbench />
+  </StrictMode>,
+);

package/templates/prototype/src/prototypes/dashboard/components/Dashboard.tsx

@@ -0,0 +1,80 @@
+import { useState, type ReactElement } from "react";
+import {
+  AppShell,
+  Badge,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  NativeSelect,
+  NativeSelectOption,
+  PageHeader,
+  StatCard,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@alexgorbatchev/shadcn";
+import type { PrototypeProps } from "../../../types";
+import { ScenarioContent } from "../../../components/ScenarioContent";
+import { deliveries } from "../data";
+
+export function Dashboard({ scenario }: PrototypeProps): ReactElement {
+  const [team, setTeam] = useState("All teams");
+  const visible = deliveries.filter((delivery) => team === "All teams" || delivery.team === team);
+  return (
+    <AppShell brand="Northstar" header="Overview" navigation={[]}>
+      <PageHeader title="Delivery overview" description="A shared view of the work moving this week." />
+      <ScenarioContent scenario={scenario}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="team">Team</FieldLabel>
+            <NativeSelect id="team" value={team} onChange={(event) => setTeam(event.target.value)}>
+              <NativeSelectOption>All teams</NativeSelectOption>
+              <NativeSelectOption>Product</NativeSelectOption>
+              <NativeSelectOption>Engineering</NativeSelectOption>
+            </NativeSelect>
+          </Field>
+        </FieldGroup>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <StatCard label="Active projects" value={visible.length} />
+          <StatCard label="Ready for review" value={visible.filter((delivery) => delivery.status === "Ready").length} />
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Delivery queue</CardTitle>
+            <CardDescription>Projects for {team.toLowerCase()}.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Project</TableHead>
+                  <TableHead>Team</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {visible.map((delivery) => (
+                  <TableRow key={delivery.name}>
+                    <TableCell>{delivery.name}</TableCell>
+                    <TableCell>{delivery.team}</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{delivery.status}</Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </ScenarioContent>
+    </AppShell>
+  );
+}

package/templates/prototype/src/prototypes/dashboard/data.ts

@@ -0,0 +1,5 @@
+export const deliveries = [
+  { name: "Onboarding redesign", team: "Product", status: "In progress" },
+  { name: "Usage reporting", team: "Engineering", status: "Ready" },
+  { name: "Customer interviews", team: "Product", status: "Ready" },
+];

package/templates/prototype/src/prototypes/dashboard/prototype.ts

@@ -0,0 +1,9 @@
+import type { PrototypeDefinition } from "../../types";
+import { Dashboard } from "./components/Dashboard";
+
+const prototype: PrototypeDefinition = {
+  title: "Dashboard",
+  description: "Review activity and filter a delivery dashboard.",
+  component: Dashboard,
+};
+export default prototype;