@reqvire-org/ads 0.0.0-stage → 0.2.9

package/dist/skills/ads-designer/assets/bootstrap-ds/README.md

@@ -0,0 +1,98 @@
+# Empty native design system
+
+This private React/TypeScript workspace contains semantic CSS tokens, an empty
+public barrel, Linaria extraction and a project preview compiler adapter. It has
+no components, patterns, icons, fonts or example screens. The minimal showcase
+shell and MCP client come from ADS tooling.
+
+Read the local [contract](ADS.md) and the
+[architecture](https://github.com/reqvire-org/design-system/blob/main/docs/ARCHITECTURE.md).
+
+## Start
+
+Copy the contents of `bootstrap-ds/`, including dotfiles, into a new project.
+The installed `ads-designer` skill contains the same files in
+`assets/bootstrap-ds/`. Set the project name in `package.json`. Use Node 22.12 or
+newer and ADS 0.3 or later for the shared-resource preview compiler.
+
+```sh
+npx @reqvire-org/ads init --framework react
+npm install
+npm run build
+npm run dev:showcase
+```
+
+For unreleased tooling, run init using the real local package:
+
+```sh
+ads_tool_package="/absolute/path/to/reqvire-org-ads-0.3.0.tgz"
+npx --yes --package "$ads_tool_package" ads init --framework react --tool-package "$ads_tool_package"
+npm install
+npm run build
+```
+
+For a new Bun workspace, declare Bun in `packageManager`, omit the copied npm
+lockfile and translate nested npm scripts to `bun run`. Init detects existing
+Bun projects and preserves their scripts/lockfiles. Use `bun install` and
+`bun run build`/`bun run dev:showcase`. The supplied preview watcher launches Node
+directly and runs the project's installed checks.
+
+For an existing application, merge only the ADS source and required extraction,
+aliases and preview adapter. Preserve its framework, entry points and build.
+The starter declares `"framework": "react"` in `ds.config.json`. For an existing
+native Preact app without a saved ADS framework, use `ads init --framework preact`.
+Init records that choice and generates native hook imports without migrating the
+app or rewriting its compiler. Subsequent init runs reuse the saved choice.
+Init adds missing foundation files and connects architectural checks; it does
+not configure Linaria or generate component source. Generated `.ds/` files are
+ignored; original artwork and provenance belong in `assets/brand/`.
+
+## Inspect and add UI
+
+When an agent already runs `ads mcp`, open its `ads_status.showcaseUrl`. MCP starts
+the website automatically. Otherwise `npm run dev:showcase` runs `ads showcase`.
+Its shell is minimal: tabs, collapsible left menu, theme switch and App slot.
+Its MCP client discovers entries, invokes preview tools and follows notifications.
+There are no required TokensPage/ComponentsPage/PatternsPage/CompositionPage
+files, and no separate project browser app to implement or rebuild.
+
+The existing `tokens/Foundation.scenario.tsx` and colocated fixture inspect all
+starter token values. Add/remove fixture names alongside token definitions;
+`ads check` rejects missing coverage and invented names. Styled token samples
+belong to your public review patterns and mount through the same scenario pipeline.
+
+Create a component under `design-system/components/`, export it through `@ds`,
+and colocate `Scenario.tsx` plus `fixture.ts` (or `<Owner>.scenario.tsx` and
+`<Owner>.fixture.ts`). Reusable compositions belong under `patterns/`; larger
+scenarios live under `composition/`. Each entry mounts independently with its
+fixture inputs and state/callback adapter. Use public ADS APIs and owned Linaria
+styles, keeping business data/services in the application.
+
+`ds.config.json` configures the supplied Vite watcher. It builds all discovered
+scenarios into one shared resource graph on first demand and watches owner code,
+styles, fixtures and assets. The App loads the selected dependency closure and
+reuses unchanged runtime/CSS/font resources across selections. The MCP client
+refreshes successful revisions inside that App; failures show diagnostics and
+stale retained output. Switching or rebuilding a scenario unmounts its previous
+state. `showcase/mcp/main.tsx` exports `mountScenario(Scenario, container)` and
+returns an unmount callback; it is not the shell. Keep the saved `framework`,
+compiler and mount adapter consistent.
+
+The application and previews use the same foundation CSS and Linaria pipeline.
+The source barrel loads the foundation once. The private `build:lib` script uses
+Vite library mode plus declarations as a source compile check; this is not a
+published UI library. General CSS checks use pinned Biome; architectural and
+registered component checks come from initialized ADS tooling.
+
+Detailed public API, behavior, tokens, tests, credits and notices belong in each
+owner's local README. The starter values and system fonts are defaults; the
+receiving project owns their identity. Import/adapt additional source explicitly
+from a user-selected external repository, preserving revisions and licenses.
+
+## Validation
+
+`npm run build` runs lint, type checking and the public-source compile check.
+`npm run build:showcase` optionally prebuilds the shared preview graph; normal
+inspection builds it automatically, then loads selected entries. Browser review
+still checks layout, accessibility, keyboard/focus, states, themes and motion. A clean
+build or delivered HTML alone does not establish those behaviors.

package/dist/skills/ads-designer/assets/bootstrap-ds/biome.css.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
+  "files": {
+    "includes": ["design-system/**/*.css"]
+  },
+  "formatter": { "enabled": false },
+  "assist": { "enabled": false },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "none",
+      "suspicious": {
+        "noDuplicateFontNames": "error",
+        "noDuplicateProperties": "error"
+      },
+      "nursery": {
+        "noDuplicateSelectors": "error"
+      }
+    }
+  }
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/assets/brand/README.md

@@ -0,0 +1,28 @@
+# Project branding
+
+Keep original logos, app icons, and artwork variants here. This starter contains
+no artwork. Record each asset's purpose, suitable backgrounds, usage, source
+credits, and applicable licenses when adding it.
+
+UI branding uses the fixed ADS token names in `tokens/`: change values such as
+`--accent`, `--font-sans`, and `--radius-md`. Components own `--ds-*` variables;
+patterns own `--ux-*`; the showcase owns `--showcase-*`. Do not introduce a
+brand-prefixed token vocabulary or override component state variables.
+
+Put licensed font files in `assets/fonts/` and their declarations in
+`tokens/fonts.css`. Keep that optional import first in `styles.css`.
+
+To generate web icons, set `assets.iconSource` in the project's `ds.config.json`
+to the SVG path relative to the ADS folder, for example:
+
+```json
+{ "assets": { "iconSource": "assets/brand/app-icon.svg" } }
+```
+
+After `ads init`, the normal npm or Bun build generates `favicon.svg`,
+`favicon.ico` (16/32/48), `apple-touch-icon.png` (180), `icon-192.png`, and
+`icon-512.png` in ignored `.ds/assets/`. Run `ads assets` to regenerate manually.
+Outputs retain the artwork's colors and transparent background; provide an
+appropriate source background if a platform needs one. Mount this directory
+through the application's existing bundler and keep app manifest metadata in
+the application. Edit the original SVG, never generated variants.

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/index.ts

@@ -0,0 +1,5 @@
+// Load local foundation styles; the compile check also extracts dist/styles.css.
+import "./styles.css";
+
+// Add public component and pattern exports here as they are implemented.
+export {};

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ADS scenario</title><style>html,body,#root{height:100%}body{overflow:hidden}</style></head><body><div id="root"></div><script type="module" src="./main.tsx"></script></body></html>

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/main.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import type { ComponentType } from "react";
+import "@ds";
+export function mountScenario(Scenario: ComponentType, container: HTMLElement) {
+  const root = createRoot(container);
+  root.render(<Scenario />);
+  return () => root.unmount();
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/styles.css

@@ -0,0 +1,5 @@
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/spacing.css";
+@import "./tokens/elevation.css";
+@import "./tokens/base.css";

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.fixture.ts

@@ -0,0 +1,47 @@
+export const fixture = {
+  "title": "Foundation",
+  "tokens": [
+    "--accent",
+    "--accent-fg",
+    "--accent-hover",
+    "--bg-canvas",
+    "--bg-hover",
+    "--bg-surface",
+    "--border-default",
+    "--border-focus",
+    "--border-w",
+    "--dur-fast",
+    "--dur-normal",
+    "--ease-standard",
+    "--focus-offset",
+    "--focus-w",
+    "--font-mono",
+    "--font-sans",
+    "--leading-normal",
+    "--leading-tight",
+    "--radius-lg",
+    "--radius-md",
+    "--radius-sm",
+    "--shadow-raised",
+    "--shadow-xs",
+    "--space-0",
+    "--space-12",
+    "--space-16",
+    "--space-2",
+    "--space-4",
+    "--space-6",
+    "--space-8",
+    "--text-base",
+    "--text-body",
+    "--text-inverse",
+    "--text-lg",
+    "--text-muted",
+    "--text-sm",
+    "--text-strong",
+    "--text-xl",
+    "--weight-medium",
+    "--weight-normal",
+    "--weight-semibold",
+    "--z-overlay"
+  ]
+} as const;

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import { fixture } from "./Foundation.fixture";
+export const scenario = { title: fixture.title, covers: [], tokens: fixture.tokens };
+export default function Scenario() {
+  const [values, setValues] = useState<Record<string, string>>({});
+  useEffect(() => {
+    const read = () => { const style = getComputedStyle(document.documentElement); setValues(Object.fromEntries(fixture.tokens.map(name => [name, style.getPropertyValue(name).trim()]))); };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.documentElement, {attributes: true, attributeFilter: ["data-theme"]});
+    return () => observer.disconnect();
+  }, []);
+  return <section><h1>{fixture.title}</h1><dl>{fixture.tokens.map(name => <div key={name}><dt><code>{name}</code></dt><dd>{values[name]}</dd></div>)}</dl></section>;
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/base.css

@@ -0,0 +1,27 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: var(--space-0);
+  background: var(--bg-canvas);
+  color: var(--text-body);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-normal);
+  line-height: var(--leading-normal);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+:focus-visible {
+  outline: var(--focus-w) solid var(--border-focus);
+  outline-offset: var(--focus-offset);
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/colors.css

@@ -0,0 +1,29 @@
+:root {
+  color-scheme: light;
+  --bg-canvas: #faf9f6;
+  --bg-surface: #fff;
+  --bg-hover: #f1efea;
+  --text-strong: #1e293b;
+  --text-body: #334155;
+  --text-muted: #64748b;
+  --text-inverse: #fff;
+  --border-default: #d6d3cc;
+  --accent: #c62648;
+  --accent-hover: #a91c3a;
+  --accent-fg: #fff;
+  --border-focus: var(--accent);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg-canvas: #17191e;
+  --bg-surface: #20232a;
+  --bg-hover: #2c3039;
+  --text-strong: #f8fafc;
+  --text-body: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border-default: #3b414c;
+  --accent: #fb7185;
+  --accent-hover: #fda4af;
+  --accent-fg: #17191e;
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/elevation.css

@@ -0,0 +1,15 @@
+:root {
+  --shadow-xs: 0 1px 2px rgb(15 23 42 / 8%);
+  --shadow-raised: 0 4px 12px rgb(15 23 42 / 12%);
+  --dur-fast: 120ms;
+  --dur-normal: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --z-overlay: 1000;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-fast: 0ms;
+    --dur-normal: 0ms;
+  }
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/spacing.css

@@ -0,0 +1,15 @@
+:root {
+  --space-0: 0;
+  --space-2: 4px;
+  --space-4: 8px;
+  --space-6: 12px;
+  --space-8: 16px;
+  --space-12: 24px;
+  --space-16: 32px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --border-w: 1px;
+  --focus-w: 2px;
+  --focus-offset: 2px;
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/typography.css

@@ -0,0 +1,13 @@
+:root {
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --text-sm: 13px;
+  --text-base: 14px;
+  --text-lg: 17px;
+  --text-xl: 21px;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/ds.config.json

@@ -0,0 +1,13 @@
+{
+  "framework": "react",
+  "mcp": {
+    "previewManifest": ".ds/preview/manifest.json",
+    "previewWatch": {
+      "command": "node",
+      "args": [
+        "scripts/build-mcp-previews.mjs",
+        "--watch"
+      ]
+    }
+  }
+}

package/dist/skills/ads-designer/assets/bootstrap-ds/gitignore.template

@@ -0,0 +1,8 @@
+node_modules/
+.ds/
+dist/
+dist-showcase/
+.vite/
+coverage/
+*.local
+*.log