designsource 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Karo Muradyan
+
+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/README.md

@@ -0,0 +1,111 @@
+<p align="center">
+  <img src="https://designsource.app/designsource/cover.png" alt="designsource — your design system, in your code" width="100%">
+</p>
+
+# designsource
+
+The command line for a [DS source](https://designsource.app) design system. Two things it does:
+
+- **`integrate`** — add the design system to the app you already have: a `design-system/` folder with your tokens as CSS variables, a prompt that tells your coding agent how to wire them in, and the component kit as reference. Vue, Svelte, Angular or plain CSS.
+- **`create`** — start a new Next.js project from it: tokens, all 28 components and your mockup page, running after `pnpm install && pnpm dev`.
+
+```sh
+npx designsource integrate
+```
+
+```sh
+npx designsource create my-app
+```
+
+Works the same with `pnpm dlx designsource …`, `yarn dlx designsource …` and `bunx designsource …`. Installed globally (`npm i -g designsource`) it is also available as **`dss`**.
+
+<p align="center">
+  <img src="https://designsource.app/designsource/demo.gif" alt="Terminal demo: pick what to do with the arrow keys, paste the project token, files are written" width="100%">
+</p>
+
+## How it works
+
+1. Design your system at [designsource.app](https://designsource.app) — colours, radii, shadows, typography, three tiers of tokens, a component kit and an AI-generated mockup page.
+2. Run the command. It asks with the arrow keys where there is a list to pick from, asks for a folder, and asks for your **project token** (workbench → Project settings). The token is typed hidden, sent once as a bearer header, and never written to disk or printed.
+3. Your app has the system in it: every colour, radius and shadow on screen is a token from your design system.
+
+## `integrate` — add to an existing app
+
+```sh
+npx designsource integrate [folder] [--framework vue|svelte|angular|css] [--token <project token>] [--api <origin>] [--force]
+```
+
+Writes `design-system/` into the folder (default: the current one). Refuses when that folder already has one, unless `--force`.
+
+| File | What it is |
+| --- | --- |
+| `tokens.css` | Every token as plain CSS custom properties, light and dark (`[data-theme="dark"]` plus a guarded `prefers-color-scheme` block). |
+| `tokens.json` | The canonical export, with references. |
+| `page.json` | Your mockup page as a layout spec, when the project has one. |
+| `PROMPT.md` | Paste into your coding agent: where to import `tokens.css` for your framework, how to wire an existing theme toggle, how to port the components idiomatically, and how to migrate the styles you already have. |
+| `reference/` | The component kit, renderer and page schema as annotated React source ("port, do not run") plus `components.md`, an index of every variable each component reads. |
+
+## `create` — a new Next.js project
+
+```sh
+npx designsource create [folder] [--token <project token>] [--api <origin>] [--force]
+```
+
+Writes a runnable Next.js app into a new or empty folder (default `my-design-system`): Tailwind v4 with the shadcn theme CSS built from your tokens, 28 UI components under `components/ui`, your mockup page on `/`, a component gallery on `/components`, light and dark via `next-themes`. Next steps print in the dialect of the runner you used (`pnpm`, `npm`, `yarn` or `bun`); a pnpm run pins `packageManager`.
+
+<p align="center">
+  <img src="https://designsource.app/designsource/starter-dark-home.png" alt="Generated Next.js starter, home page, dark" width="49%">
+  <img src="https://designsource.app/designsource/starter-light-home.png" alt="Generated Next.js starter, home page, light" width="49%">
+</p>
+<p align="center">
+  <img src="https://designsource.app/designsource/starter-dark-components.png" alt="Component gallery, dark" width="49%">
+  <img src="https://designsource.app/designsource/starter-light-components.png" alt="Component gallery, light" width="49%">
+</p>
+
+## Options
+
+| Flag | What it does |
+| --- | --- |
+| `folder` | Target folder. `integrate` defaults to `.`, `create` to `my-design-system`. |
+| `--framework` | `integrate` only. Skip the picker: `vue`, `svelte`, `angular` or `css`. |
+| `--token` | The project token, or set `DS_SYNC_TOKEN` for scripts. Asked hidden when neither is given. |
+| `--api` | API origin. Default `https://designsource.app`; point it at a self-hosted instance. |
+| `--force` | Overwrite files that already exist. Without it the command refuses rather than touching them. |
+
+Outside a terminal (CI, pipes) the pickers become numbered prompts, and `designsource` with no command prints usage instead of the menu. Ctrl+C or Esc in a picker exits 130 with nothing written.
+
+## Safety
+
+- Every write is contained to the target folder. On any failure the command removes what it created, restores what it overwrote, and says so in one line.
+- The project token authorises read-only access to one project. Regenerate it in Project settings to revoke it; the command never stores it.
+- Zero runtime dependencies. Node 20 or newer.
+
+## Local development
+
+From the [design-system](https://github.com/KaroMourad/design-system) repo, against a dev server:
+
+```sh
+pnpm --filter designsource build
+pnpm --filter designsource start -- integrate --framework vue --api http://localhost:3001
+pnpm --filter designsource start -- create my-app --api http://localhost:3001
+```
+
+`pnpm --filter designsource test` builds and runs the unit tests plus an end-to-end run of the binary against a throwaway local HTTP server, asserting the token never reaches stdout or stderr.
+
+## Publishing
+
+Manual, by the maintainer, from this folder. Nothing in the repo publishes.
+
+1. `npm login` (npm requires 2FA to publish).
+2. `pnpm version patch|minor` — every publish needs a bump.
+3. `pnpm publish --dry-run --access public` and check the tarball is `dist/index.js`, `LICENSE`, `README.md`, `package.json`. `prepublishOnly` rebuilds `dist/` first, so a stale or missing build cannot ship.
+4. `pnpm publish --access public`.
+5. Verify from an empty folder: `npx designsource@latest --help`.
+
+The README's images live in the web app at `apps/web/public/designsource/` and are served from `designsource.app`; ship image changes there before the npm publish that references them. Their sources are in `assets/` here (`cover.html`, `make-gif.mjs`).
+
+`create-ds-app` was this package's first name (0.1.x). It is deprecated on npm, pointing here: `npm deprecate create-ds-app@"*" "Moved to designsource: npx designsource create my-app"`.
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,524 @@
+#!/usr/bin/env node
+
+// src/args.ts
+var FRAMEWORKS = ["next", "vue", "svelte", "angular", "css"];
+var INTEGRATE_FRAMEWORKS = ["vue", "svelte", "angular", "css"];
+var DEFAULT_API_ORIGIN = "https://designsource.app";
+var CREATE_DEFAULT_FOLDER = "my-design-system";
+var INTEGRATE_DEFAULT_FOLDER = ".";
+var USAGE = `designsource <command> [options]        (also installed as: dss)
+
+Commands
+  integrate [folder]   add the design system to an existing app \u2014 writes design-system/ (default folder: .)
+  create [folder]      new Next.js project with the tokens, every component and your mockup page (default folder: ${CREATE_DEFAULT_FOLDER})
+
+Run a command with --help for its options. In a terminal, no command shows a menu.
+`;
+var TOKEN_LINE = "  --token       the project token (workbench \u2192 Project settings); or DS_SYNC_TOKEN";
+var API_LINE = `  --api         API origin (default ${DEFAULT_API_ORIGIN})`;
+var CREATE_USAGE = `designsource create [folder] [--token <project token>] [--api <origin>] [--force]
+
+Writes a runnable Next.js project from your design system. Asks for anything not given.
+  folder        target folder (default ${CREATE_DEFAULT_FOLDER}); must be new or empty
+${TOKEN_LINE}
+${API_LINE}
+  --force       overwrite files the starter writes in a non-empty folder
+`;
+var INTEGRATE_USAGE = `designsource integrate [folder] [--framework vue|svelte|angular|css] [--token <project token>] [--api <origin>] [--force]
+
+Adds a design-system/ folder to an existing app: tokens, a prompt for your coding agent, the component kit as reference. Asks for anything not given.
+  folder        the app's folder (default ${INTEGRATE_DEFAULT_FOLDER}); must not already contain design-system/
+  --framework   picked with the arrow keys when omitted
+${TOKEN_LINE}
+${API_LINE}
+  --force       overwrite files the bundle writes when design-system/ already exists
+`;
+function usageFor(verb) {
+  return verb === "create" ? CREATE_USAGE : verb === "integrate" ? INTEGRATE_USAGE : USAGE;
+}
+var ArgsError = class extends Error {
+  constructor(message, usage) {
+    super(message);
+    this.usage = usage;
+  }
+};
+function baseArgs(env) {
+  const args = { api: DEFAULT_API_ORIGIN, force: false };
+  if (env.DS_SYNC_TOKEN) args.token = env.DS_SYNC_TOKEN;
+  return args;
+}
+var HELP = /* @__PURE__ */ new Set(["--help", "-h", "help"]);
+function parseArgs(argv, env) {
+  const [first, ...rest] = argv;
+  if (first === void 0) return { kind: "menu" };
+  if (HELP.has(first)) return { kind: "help", verb: void 0 };
+  if (first === "create" || first === "integrate") return parseVerb(first, rest, env);
+  if (first.startsWith("-")) throw new ArgsError("Missing command. Use integrate or create.", USAGE);
+  throw new ArgsError(`Unknown command "${first}". Use integrate or create.`, USAGE);
+}
+function parseVerb(verb, argv, env) {
+  const usage = usageFor(verb);
+  const args = baseArgs(env);
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") return { kind: "help", verb };
+    if (arg === "--force") {
+      args.force = true;
+      continue;
+    }
+    if (arg.startsWith("--")) {
+      const eq = arg.indexOf("=");
+      const key = eq === -1 ? arg.slice(2) : arg.slice(2, eq);
+      const value = eq === -1 ? argv[++i] : arg.slice(eq + 1);
+      const needs = () => {
+        if (value === void 0) throw new ArgsError(`Option --${key} needs a value`, usage);
+      };
+      if (key === "framework" && verb === "integrate") {
+        needs();
+        if (!INTEGRATE_FRAMEWORKS.includes(value)) {
+          throw new ArgsError(`Unknown framework "${value}" \u2014 one of ${INTEGRATE_FRAMEWORKS.join(", ")}`, usage);
+        }
+        args.framework = value;
+      } else if (key === "token") {
+        needs();
+        args.token = value;
+      } else if (key === "api") {
+        needs();
+        const origin = value.replace(/\/+$/, "");
+        let parsed;
+        try {
+          parsed = new URL(origin);
+        } catch {
+        }
+        if (!parsed || !parsed.host) {
+          throw new ArgsError(`Option --api needs a full origin such as http://localhost:3001 (got "${value}")`, usage);
+        }
+        args.api = origin;
+      } else throw new ArgsError(`Unknown option --${key}`, usage);
+      continue;
+    }
+    if (arg.startsWith("-")) throw new ArgsError(`Unknown option ${arg}`, usage);
+    if (args.folder !== void 0) throw new ArgsError("Expected one folder argument", usage);
+    args.folder = arg;
+  }
+  if (verb === "create") {
+    const { framework: _drop, ...common } = args;
+    return { kind: "create", args: common };
+  }
+  return { kind: "integrate", args };
+}
+
+// src/errors.ts
+var CliError = class extends Error {
+  constructor(message, exitCode = 1) {
+    super(message);
+    this.exitCode = exitCode;
+  }
+};
+var CANCELLED = "Cancelled.";
+var TOKEN_MESSAGE = "Project token not recognised. In the workbench open Project settings and copy the project token.";
+var UNREACHABLE = (api) => `Could not reach ${api}.`;
+var UPDATE_MESSAGE = "This design system needs a newer designsource CLI. Update it (for example `npx designsource@latest`) and run again.";
+function messageForResponse(status, body, api) {
+  if (status === 401) return TOKEN_MESSAGE;
+  const serverMessage = typeof body === "object" && body !== null && typeof body.error === "string" ? body.error : null;
+  if (status === 400) return serverMessage ?? `${api} rejected the request (400).`;
+  return `${api} answered ${status}.`;
+}
+
+// src/manifest.ts
+var malformed = () => new CliError("Unexpected response from the API \u2014 not a starter manifest.");
+function validateManifest(json) {
+  if (typeof json !== "object" || json === null) throw malformed();
+  const m = json;
+  if (typeof m.version !== "number") throw malformed();
+  if (m.version !== 1) throw new CliError(UPDATE_MESSAGE);
+  if (typeof m.framework !== "string" || !FRAMEWORKS.includes(m.framework)) throw malformed();
+  if (typeof m.name !== "string" || !Array.isArray(m.files) || !Array.isArray(m.nextSteps)) throw malformed();
+  for (const f of m.files) {
+    if (typeof f !== "object" || f === null) throw malformed();
+    const { path, contents } = f;
+    if (typeof path !== "string" || typeof contents !== "string") throw malformed();
+  }
+  if (!m.nextSteps.every((s) => typeof s === "string")) throw malformed();
+  return { version: 1, framework: m.framework, name: m.name, files: m.files, nextSteps: m.nextSteps };
+}
+
+// src/fetch-manifest.ts
+async function fetchManifest(opts, fetchImpl = fetch) {
+  const url = new URL("/api/starter", `${opts.api}/`);
+  url.searchParams.set("framework", opts.framework);
+  if (opts.name) url.searchParams.set("name", opts.name);
+  let res;
+  try {
+    res = await fetchImpl(url.toString(), { headers: { Authorization: `Bearer ${opts.token}`, Accept: "application/json" } });
+  } catch {
+    throw new CliError(UNREACHABLE(opts.api));
+  }
+  const body = await res.json().catch(() => null);
+  if (!res.ok) throw new CliError(messageForResponse(res.status, body, opts.api));
+  return validateManifest(body);
+}
+
+// src/package-name.ts
+function packageNameFor(folder) {
+  const trimmed = folder.replace(/[\\/]+$/, "");
+  const segments = trimmed.split(/[\\/]/).filter((p) => p !== "" && p !== ".");
+  const last = segments[segments.length - 1];
+  if (!last) return void 0;
+  const slug = last.normalize("NFKD").replace(new RegExp("\\p{M}", "gu"), "").toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^[-._]+/, "").replace(/[-._]+$/, "").slice(0, 214).replace(/[-._]+$/, "");
+  return slug || void 0;
+}
+
+// src/prompts.ts
+import { createInterface } from "node:readline";
+var shared;
+var closed = false;
+var queued = [];
+var waiting = [];
+var EOF_MESSAGE = "No more input. Pass the answer as a flag (for example --token or DS_SYNC_TOKEN) when running without a terminal.";
+function iface() {
+  if (shared) return shared;
+  const r = createInterface({ input: process.stdin, output: process.stdout, terminal: process.stdin.isTTY === true });
+  r.on("line", (line) => {
+    const next = waiting.shift();
+    if (next) next.resolve(line);
+    else queued.push(line);
+  });
+  r.on("close", () => {
+    closed = true;
+    while (waiting.length) waiting.shift().reject(new CliError(EOF_MESSAGE));
+  });
+  if (process.stdin.isTTY === true) {
+    r.on("SIGINT", () => {
+      process.stdout.write("\n");
+      closed = true;
+      while (waiting.length) waiting.shift().reject(new CliError(CANCELLED, 130));
+      r.close();
+    });
+  }
+  shared = r;
+  return r;
+}
+function hasInterface() {
+  return shared !== void 0;
+}
+function nextLine() {
+  iface();
+  const line = queued.shift();
+  if (line !== void 0) return Promise.resolve(line);
+  if (closed) return Promise.reject(new CliError(EOF_MESSAGE));
+  process.stdin.ref?.();
+  return new Promise((resolve3, reject) => waiting.push({
+    resolve: (line2) => {
+      process.stdin.unref?.();
+      resolve3(line2);
+    },
+    reject: (err) => {
+      process.stdin.unref?.();
+      reject(err);
+    }
+  }));
+}
+function promptLine(promptText, fallback) {
+  const r = iface();
+  r.setPrompt(promptText);
+  r.prompt();
+  return nextLine().then((a) => a.trim() || fallback);
+}
+function ask(question, fallback) {
+  return promptLine(`${question} (${fallback}) `, fallback);
+}
+async function askChoice(question, options, defaultIndex) {
+  const list = options.map((o, i) => `  ${i + 1}) ${o}${i === defaultIndex ? "  (default)" : ""}`).join("\n");
+  process.stdout.write(`${question}
+${list}
+`);
+  for (; ; ) {
+    const answer = await ask("Choice", String(defaultIndex + 1));
+    const idx = Number(answer) - 1;
+    const byName = options.indexOf(answer);
+    if (byName !== -1) return options[byName];
+    if (Number.isInteger(idx) && options[idx] !== void 0) return options[idx];
+    process.stdout.write(`Pick 1-${options.length}.
+`);
+  }
+}
+async function askHidden(question) {
+  const r = iface();
+  const original = typeof r._writeToOutput === "function" ? r._writeToOutput.bind(r) : void 0;
+  if (!original) {
+    throw new CliError("Cannot hide input on this terminal. Pass --token or set DS_SYNC_TOKEN instead.");
+  }
+  let muted = false;
+  r._writeToOutput = (s) => {
+    if (!muted) original(s);
+  };
+  r.setPrompt(`${question} `);
+  r.prompt();
+  muted = true;
+  try {
+    const a = await nextLine();
+    return a.trim();
+  } finally {
+    muted = false;
+    original("\n");
+    r._writeToOutput = original;
+  }
+}
+
+// src/runner.ts
+function detectRunner(userAgent) {
+  const match = userAgent?.match(/^(pnpm|npm|yarn|bun)\/(\S+)/);
+  if (!match) return { runner: "pnpm" };
+  return { runner: match[1], version: match[2] };
+}
+var INSTALL = { pnpm: "pnpm install", npm: "npm install", yarn: "yarn", bun: "bun install" };
+var DEV = { pnpm: "pnpm dev", npm: "npm run dev", yarn: "yarn dev", bun: "bun dev" };
+function nextStepsText({ runner, framework, folder, created }) {
+  const lines = ["Next steps:"];
+  if (framework === "next") {
+    if (created) lines.push(`  cd ${folder}`);
+    lines.push(`  ${INSTALL[runner]}`, `  ${DEV[runner]}`);
+  } else if (folder === ".") {
+    lines.push("  Open design-system/PROMPT.md and paste it into your coding agent.");
+  } else {
+    lines.push(`  Open ${folder}/design-system/PROMPT.md and paste it into your coding agent, run from ${folder}.`);
+  }
+  return `${lines.join("\n")}
+`;
+}
+
+// src/write.ts
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { dirname, resolve as resolve2 } from "node:path";
+
+// src/paths.ts
+import { isAbsolute, resolve, sep } from "node:path";
+function resolveInside(root, relPath) {
+  const escapes = (why) => new CliError(`Manifest path "${relPath}" is outside the target folder (${why}).`);
+  if (!relPath) throw escapes("empty");
+  if (isAbsolute(relPath) || /^[a-zA-Z]:[\\/]/.test(relPath) || relPath.startsWith("\\")) throw escapes("absolute");
+  if (relPath.split(/[\\/]/).includes("..")) throw escapes("..");
+  const abs = resolve(root, relPath);
+  if (abs === root || !abs.startsWith(root.endsWith(sep) ? root : root + sep)) throw escapes("resolves above it");
+  return abs;
+}
+
+// src/write.ts
+function planTarget(cwd, folder, framework, force) {
+  const root = resolve2(cwd, folder);
+  if (!existsSync(root)) return { root, created: true };
+  if (!statSync(root).isDirectory()) throw new CliError(`${folder} exists and is not a folder.`);
+  if (framework === "next") {
+    if (readdirSync(root).length > 0 && !force) throw new CliError(`Folder ${folder} is not empty. Pick another name, or pass --force to overwrite the files the starter writes.`);
+  } else if (existsSync(resolve2(root, "design-system")) && !force) {
+    throw new CliError(`${folder}/design-system/ already exists. Remove it, or pass --force to overwrite the files the bundle writes.`);
+  }
+  return { root, created: false };
+}
+function writeFiles(root, files, opts) {
+  const targets = files.map((f) => ({ file: f, abs: resolveInside(root, f.path) }));
+  if (!opts.force) {
+    const clash = targets.find((t) => existsSync(t.abs));
+    if (clash) throw new CliError(`${clash.file.path} already exists. Pass --force to overwrite the files the starter writes.`);
+  }
+  const written = [];
+  const previous = /* @__PURE__ */ new Map();
+  let failingPath;
+  try {
+    for (const { file, abs } of targets) {
+      failingPath = file.path;
+      if (!previous.has(file.path)) previous.set(file.path, existsSync(abs) ? readFileSync(abs) : void 0);
+      mkdirSync(dirname(abs), { recursive: true });
+      writeFileSync(abs, file.path === "package.json" && opts.packageManager ? withPackageManager(file.contents, opts.packageManager) : file.contents);
+      written.push(file.path);
+    }
+  } catch (e) {
+    const code2 = e?.code ?? e.message;
+    if (opts.created) {
+      rmSync(root, { recursive: true, force: true });
+      throw new CliError(`Could not write ${failingPath} (${code2}). Removed ${root} again; nothing was left behind.`);
+    }
+    let restored = 0;
+    let removed = 0;
+    for (const p of written) {
+      const abs = resolveInside(root, p);
+      const before = previous.get(p);
+      if (before === void 0) {
+        rmSync(abs, { force: true });
+        removed++;
+      } else {
+        writeFileSync(abs, before);
+        restored++;
+      }
+    }
+    throw new CliError(`Could not write ${failingPath} (${code2}). Restored ${restored} file(s) and removed ${removed} new file(s); the folder is as it was.`);
+  }
+  return { written };
+}
+function withPackageManager(contents, packageManager) {
+  const pkg = JSON.parse(contents);
+  return `${JSON.stringify({ ...pkg, packageManager }, null, 2)}
+`;
+}
+
+// src/commands/scaffold.ts
+function askFolder(fallback) {
+  return process.stdin.isTTY === true ? ask("Folder", fallback) : Promise.resolve(fallback);
+}
+async function requireToken(given) {
+  const token = given ?? await askHidden("Project token (workbench \u2192 Project settings):");
+  if (!token) throw new CliError("A project token is required. In the workbench open Project settings and copy the project token.");
+  return token;
+}
+async function scaffold(input, env, io) {
+  const { folder, framework, token, api, force } = input;
+  const { root, created } = planTarget(io.cwd, folder, framework, force);
+  const manifest = await fetchManifest({ api, token, framework, name: packageNameFor(folder) }, io.fetchImpl);
+  const { runner, version } = detectRunner(env.npm_config_user_agent);
+  const packageManager = runner === "pnpm" && version ? `pnpm@${version}` : void 0;
+  const { written } = writeFiles(root, manifest.files, { force, created, packageManager });
+  io.stdout(`${created ? "Created" : "Wrote into"} ${folder} (${written.length} files):
+${written.map((p) => `  ${p}`).join("\n")}
+
+`);
+  io.stdout(nextStepsText({ runner, framework, folder, created }));
+}
+
+// src/commands/create.ts
+async function runCreate(args, env, io) {
+  const folder = args.folder ?? await askFolder(CREATE_DEFAULT_FOLDER);
+  const token = await requireToken(args.token);
+  await scaffold({ folder, framework: "next", token, api: args.api, force: args.force }, env, io);
+}
+
+// src/picker.ts
+import { emitKeypressEvents } from "node:readline";
+function pick(question, options, defaultIndex = 0) {
+  const stdin = process.stdin;
+  const stdout = process.stdout;
+  const tty = stdin.isTTY === true && stdout.isTTY === true && typeof stdin.setRawMode === "function" && !hasInterface();
+  if (!tty) return askChoice(question, options.map((o) => o.value), defaultIndex);
+  return pickTty(question, options, defaultIndex, stdin, stdout);
+}
+function pickTty(question, options, start, stdin, stdout) {
+  const color = !process.env.NO_COLOR;
+  const bold = (s) => color ? `\x1B[1m${s}\x1B[22m` : s;
+  const dim = (s) => color ? `\x1B[2m${s}\x1B[22m` : s;
+  const n = options.length;
+  let index = start;
+  const rows = () => options.map((o, i) => {
+    const label = i === index ? bold(o.label) : o.label;
+    return `${i === index ? "\u276F" : " "} ${label}${o.hint ? `  ${dim(o.hint)}` : ""}`;
+  });
+  const draw = (lines) => stdout.write(lines.map((l) => `\r\x1B[2K${l}`).join("\n") + "\n");
+  const up = () => stdout.write(`\x1B[${n + 1}A`);
+  emitKeypressEvents(stdin);
+  stdin.setRawMode(true);
+  stdin.resume();
+  stdout.write("\x1B[?25l");
+  draw([question, ...rows()]);
+  return new Promise((resolve3, reject) => {
+    const finish = (after) => {
+      stdin.off("keypress", onKey);
+      stdin.setRawMode(false);
+      stdin.pause();
+      after();
+      stdout.write("\x1B[?25h");
+    };
+    const onKey = (str, key = {}) => {
+      if (key.ctrl && key.name === "c" || key.name === "escape") {
+        finish(() => stdout.write("\n"));
+        reject(new CliError(CANCELLED, 130));
+        return;
+      }
+      if (key.name === "return" || key.name === "enter") {
+        const chosen = options[index];
+        finish(() => {
+          up();
+          stdout.write(`\r\x1B[J${question}  ${chosen.label}
+`);
+        });
+        resolve3(chosen.value);
+        return;
+      }
+      if (key.name === "up" || str === "k") index = (index - 1 + n) % n;
+      else if (key.name === "down" || str === "j") index = (index + 1) % n;
+      else if (str && /^[1-9]$/.test(str) && Number(str) <= n) index = Number(str) - 1;
+      else return;
+      up();
+      draw([question, ...rows()]);
+    };
+    stdin.on("keypress", onKey);
+  });
+}
+
+// src/commands/integrate.ts
+var INTEGRATE_OPTIONS = [
+  { value: "vue", label: "Vue", hint: "Vite, Nuxt" },
+  { value: "svelte", label: "Svelte", hint: "SvelteKit" },
+  { value: "angular", label: "Angular" },
+  { value: "css", label: "Plain CSS", hint: "any other stack" }
+];
+async function runIntegrate(args, env, io) {
+  const framework = args.framework ?? await pick("Framework", INTEGRATE_OPTIONS, 0);
+  const folder = args.folder ?? await askFolder(INTEGRATE_DEFAULT_FOLDER);
+  const token = await requireToken(args.token);
+  await scaffold({ folder, framework, token, api: args.api, force: args.force }, env, io);
+}
+
+// src/index.ts
+var MENU = [
+  { value: "integrate", label: "Add to an existing project", hint: "writes design-system/ \u2014 tokens, prompt, reference kit" },
+  { value: "create", label: "Create a new project", hint: "a Next.js app with every component and your mockup page" }
+];
+async function main(argv, env, io) {
+  let command;
+  try {
+    command = parseArgs(argv, env);
+  } catch (e) {
+    if (e instanceof ArgsError) {
+      io.stderr(`${e.message}
+
+${e.usage}`);
+      return 1;
+    }
+    throw e;
+  }
+  if (command.kind === "help") {
+    io.stdout(usageFor(command.verb));
+    return 0;
+  }
+  try {
+    if (command.kind === "menu") {
+      if (process.stdin.isTTY !== true || process.stdout.isTTY !== true) {
+        io.stderr(`Missing command. Use integrate or create.
+
+${USAGE}`);
+        return 1;
+      }
+      const verb = await pick("What do you want to do?", MENU, 0);
+      command = verb === "create" ? { kind: "create", args: baseArgs(env) } : { kind: "integrate", args: baseArgs(env) };
+    }
+    if (command.kind === "create") await runCreate(command.args, env, io);
+    else await runIntegrate(command.args, env, io);
+    return 0;
+  } catch (e) {
+    if (e instanceof CliError) {
+      io.stderr(`${e.message}
+`);
+      return e.exitCode;
+    }
+    throw e;
+  }
+}
+var code = await main(process.argv.slice(2), process.env, {
+  stdout: (s) => process.stdout.write(s),
+  stderr: (s) => process.stderr.write(s),
+  cwd: process.cwd()
+});
+process.exitCode = code;
+export {
+  main
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "designsource",
+  "version": "0.2.0",
+  "description": "The DS source CLI: add a design system to an existing app (integrate) or start a new Next.js project from it (create) — tokens, every component and your mockup page.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KaroMourad/design-system.git",
+    "directory": "apps/designsource"
+  },
+  "homepage": "https://designsource.app",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "cli",
+    "scaffold",
+    "nextjs",
+    "tailwind",
+    "shadcn",
+    "vue",
+    "svelte",
+    "angular"
+  ],
+  "type": "module",
+  "bin": {
+    "designsource": "dist/index.js",
+    "dss": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "node esbuild.mjs",
+    "prepublishOnly": "node esbuild.mjs",
+    "start": "node dist/index.js",
+    "test": "node esbuild.mjs && vitest run"
+  },
+  "devDependencies": {
+    "@types/node": "^26",
+    "esbuild": "^0.24.0",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.10"
+  }
+}