@madebywild/wvk 0.1.0 → 0.1.2

package/README.md

@@ -2,6 +2,19 @@
 
 Wireframe kit — accessible React components, 183 icons, and design tokens that map 1:1 to the wild Wireframe Kit Figma library.
 
+## Quick start (new project)
+
+Scaffold a fresh Next.js 16 / React 19 / Tailwind v4 app that ships with `@madebywild/wvk` already wired up — `ThemeProvider`, design tokens, the package stylesheet, and a small `Header` composition:
+
+```bash
+npx @madebywild/wvk create-next-app my-wvk-app
+cd my-wvk-app
+npm install
+npm run dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000). The scaffold also writes an `AGENTS.md` so your agent harness (Claude Code, Cursor, Copilot, etc.) picks up the wvk authoring rules — pass `--no-agents` to skip that, or `--force` to scaffold into a non-empty directory.
+
 ## Install
 
 ```bash

package/bin/wvk.mjs

@@ -1,19 +1,24 @@
 #!/usr/bin/env node
 import { createHash } from "node:crypto";
 import {
+  cpSync,
   existsSync,
   mkdirSync,
   readFileSync,
+  readdirSync,
+  renameSync,
   statSync,
+  unlinkSync,
   writeFileSync,
 } from "node:fs";
-import { dirname, relative, resolve } from "node:path";
+import { basename, dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const PKG_NAME = "@madebywild/wvk";
 const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = resolve(SCRIPT_DIR, "..");
 const SOURCE = resolve(PKG_ROOT, "AGENTS.md");
+const TEMPLATES_ROOT = resolve(PKG_ROOT, "templates");
 const PKG_JSON = JSON.parse(
   readFileSync(resolve(PKG_ROOT, "package.json"), "utf8"),
 );
@@ -25,6 +30,9 @@ const BEGIN_RE = new RegExp(
 );
 const END_MARK = `<!-- END ${PKG_NAME} AGENTS.md -->`;
 
+// Valid npm package name per https://github.com/npm/validate-npm-package-name
+const NAME_RE = /^(?:@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+
 function escapeRegex(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -33,19 +41,28 @@ function usage() {
   return `wvk — ${PKG_NAME} CLI
 
 Usage:
+  wvk create-next-app <name> [--force] [--no-agents]
   wvk copy-harness [--force] [--append] [--out <path>]
   wvk --help
   wvk --version
 
 Commands:
-  copy-harness    Copy this package's AGENTS.md into your project so your
-                  agent harness picks up the wvk authoring rules.
+  create-next-app  Scaffold a new Next.js 16 / React 19 app preconfigured with
+                   ${PKG_NAME}, Tailwind v4, ThemeProvider, and a Header. Drops
+                   the package's AGENTS.md into the new project so a consumer's
+                   agent harness picks up the wvk authoring rules.
+  copy-harness     Copy this package's AGENTS.md into your project so your
+                   agent harness picks up the wvk authoring rules.
 
 Options:
-  --out <path>    Destination path (default: ./AGENTS.md). Parent dirs are created.
-  --force         Overwrite the destination if it exists. Mutually exclusive with --append.
-  --append        Merge the rules into the destination as a delimited, idempotent block.
-                  Re-running is safe: the block is replaced in place, never duplicated.
+  --out <path>     (copy-harness) Destination path (default: ./AGENTS.md). Parent dirs are created.
+  --force          Overwrite an existing destination. For create-next-app, allow
+                   scaffolding into an existing non-empty directory.
+                   Mutually exclusive with --append on copy-harness.
+  --append         (copy-harness) Merge the rules into the destination as a
+                   delimited, idempotent block. Re-running is safe: the block is
+                   replaced in place, never duplicated.
+  --no-agents      (create-next-app) Skip writing AGENTS.md into the new project.
 `;
 }
 
@@ -55,11 +72,12 @@ function fail(msg, code = 1) {
 }
 
 function parseArgs(argv) {
-  const args = { _: [], force: false, append: false, out: null };
+  const args = { _: [], force: false, append: false, out: null, noAgents: false };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "--force") args.force = true;
     else if (a === "--append") args.append = true;
+    else if (a === "--no-agents") args.noAgents = true;
     else if (a === "--out") {
       const v = argv[++i];
       if (!v) fail("--out requires a path");
@@ -172,6 +190,110 @@ function report(destRel, mode) {
   }
 }
 
+function isDirEmpty(dir) {
+  try {
+    return readdirSync(dir).length === 0;
+  } catch {
+    return true;
+  }
+}
+
+function createNextApp(args) {
+  if (args.append) {
+    fail("--append is not supported for create-next-app");
+  }
+  const name = args._[1];
+  if (!name) {
+    fail("create-next-app requires a project name. Example: wvk create-next-app my-app");
+  }
+  if (!NAME_RE.test(name) && name !== ".") {
+    fail(
+      `invalid project name: ${name}\n` +
+        `wvk: must be a valid npm package name (lowercase, no spaces, may start with @scope/).`,
+    );
+  }
+  const templateRoot = resolve(TEMPLATES_ROOT, "next-app");
+  if (!existsSync(templateRoot)) {
+    fail(`scaffolding template missing in package at ${templateRoot}`);
+  }
+
+  const targetDir =
+    name === "." ? process.cwd() : resolve(process.cwd(), name);
+  const targetRel = relative(process.cwd(), targetDir) || ".";
+  const projectName = name === "." ? basename(targetDir) : name;
+  if (!NAME_RE.test(projectName)) {
+    fail(
+      `derived project name "${projectName}" is not a valid npm package name. ` +
+        `Pass an explicit name: wvk create-next-app <name>`,
+    );
+  }
+
+  if (existsSync(targetDir)) {
+    if (!statSync(targetDir).isDirectory()) {
+      fail(`${targetRel} exists and is not a directory`);
+    }
+    if (!isDirEmpty(targetDir) && !args.force) {
+      fail(
+        `${targetRel} is not empty. Re-run with --force to scaffold into it anyway ` +
+          `(existing files with the same name will be overwritten).`,
+      );
+    }
+  } else {
+    mkdirSync(targetDir, { recursive: true });
+  }
+
+  // Copy every file from the template tree. cpSync with recursive copies
+  // directories without descending into anything that doesn't exist.
+  cpSync(templateRoot, targetDir, { recursive: true, force: true });
+
+  // npm strips a literal `.gitignore` from packed tarballs (it's renamed to
+  // `.npmignore`). The template ships it as `gitignore`; rename on copy. If
+  // the caller already had a `.gitignore` (only possible with --force), keep
+  // theirs and drop ours so we don't leave an orphan `gitignore` lying around.
+  const giSrc = join(targetDir, "gitignore");
+  const giDst = join(targetDir, ".gitignore");
+  if (existsSync(giSrc)) {
+    if (existsSync(giDst)) {
+      unlinkSync(giSrc);
+    } else {
+      renameSync(giSrc, giDst);
+    }
+  }
+
+  // Set the `name` field in the new app's package.json to the requested name.
+  const targetPkgPath = join(targetDir, "package.json");
+  if (existsSync(targetPkgPath)) {
+    const pkg = JSON.parse(readFileSync(targetPkgPath, "utf8"));
+    pkg.name = projectName;
+    writeFileSync(targetPkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+  }
+
+  // Drop the package's AGENTS.md into the project so the consumer's agent
+  // harness picks up the wvk authoring rules. Sourced from PKG_ROOT (same
+  // file `wvk copy-harness` writes), not from the template, so the two
+  // never drift. Opt out with --no-agents.
+  if (!args.noAgents) {
+    if (!existsSync(SOURCE)) {
+      fail(`source AGENTS.md missing in package at ${SOURCE}`);
+    }
+    const agentsBody = readFileSync(SOURCE, "utf8");
+    writeFileSync(join(targetDir, "AGENTS.md"), agentsBody);
+  }
+
+  process.stdout.write(`wvk: scaffolded ${PKG_NAME} Next.js app in ${targetRel}\n`);
+  if (!args.noAgents) {
+    process.stdout.write(
+      `wvk: wrote AGENTS.md so your agent harness picks up the wvk authoring rules\n`,
+    );
+  }
+  process.stdout.write(`wvk: next steps:\n`);
+  if (targetRel !== ".") {
+    process.stdout.write(`  cd ${targetRel}\n`);
+  }
+  process.stdout.write(`  npm install   # or pnpm install\n`);
+  process.stdout.write(`  npm run dev   # then open http://localhost:3000\n`);
+}
+
 function main() {
   const args = parseArgs(process.argv.slice(2));
   if (args.help) {
@@ -191,6 +313,10 @@ function main() {
     copyHarness(args);
     return;
   }
+  if (cmd === "create-next-app") {
+    createNextApp(args);
+    return;
+  }
   process.stderr.write(`wvk: unknown command: ${cmd}\n\n${usage()}`);
   process.exit(1);
 }

package/dist/index.cjs

@@ -4958,7 +4958,7 @@ BottomTabBarItem.displayName = "BottomTabBarItem";
 
 // src/components/ui/button.tsx
 var React3 = __toESM(require("react"), 1);
-var import_use_render = require("@base-ui-components/react/use-render");
+var import_use_render = require("@base-ui/react/use-render");
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime186 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
@@ -5045,7 +5045,7 @@ Button.displayName = "Button";
 
 // src/components/ui/checkbox.tsx
 var React4 = __toESM(require("react"), 1);
-var import_checkbox = require("@base-ui-components/react/checkbox");
+var import_checkbox = require("@base-ui/react/checkbox");
 var import_framer_motion2 = require("framer-motion");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime187 = require("react/jsx-runtime");
@@ -5153,7 +5153,7 @@ var React6 = __toESM(require("react"), 1);
 
 // src/components/ui/tooltip.tsx
 var React5 = __toESM(require("react"), 1);
-var import_tooltip = require("@base-ui-components/react/tooltip");
+var import_tooltip = require("@base-ui/react/tooltip");
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 var tooltipVariants = (0, import_class_variance_authority4.cva)("relative rounded-[var(--radius-md)] w-max", {
@@ -5772,7 +5772,7 @@ VideoControls.displayName = "VideoControls";
 
 // src/components/ui/menu.tsx
 var React12 = __toESM(require("react"), 1);
-var import_menu = require("@base-ui-components/react/menu");
+var import_menu = require("@base-ui/react/menu");
 var import_jsx_runtime196 = require("react/jsx-runtime");
 var Menu2 = import_menu.Menu.Root;
 var MenuTrigger = import_menu.Menu.Trigger;
@@ -5876,8 +5876,8 @@ Pagination.displayName = "Pagination";
 
 // src/components/ui/progress-bar.tsx
 var React14 = __toESM(require("react"), 1);
-var import_progress = require("@base-ui-components/react/progress");
-var import_meter = require("@base-ui-components/react/meter");
+var import_progress = require("@base-ui/react/progress");
+var import_meter = require("@base-ui/react/meter");
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var ProgressBar = React14.forwardRef(
   ({ className, value = 0, ...props }, ref) => {
@@ -5912,8 +5912,8 @@ Meter.displayName = "Meter";
 
 // src/components/ui/radio.tsx
 var React15 = __toESM(require("react"), 1);
-var import_radio = require("@base-ui-components/react/radio");
-var import_radio_group = require("@base-ui-components/react/radio-group");
+var import_radio = require("@base-ui/react/radio");
+var import_radio_group = require("@base-ui/react/radio-group");
 var import_framer_motion4 = require("framer-motion");
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime199 = require("react/jsx-runtime");
@@ -6046,8 +6046,8 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 // src/components/ui/segmented-control.tsx
 var React16 = __toESM(require("react"), 1);
-var import_toggle_group = require("@base-ui-components/react/toggle-group");
-var import_toggle = require("@base-ui-components/react/toggle");
+var import_toggle_group = require("@base-ui/react/toggle-group");
+var import_toggle = require("@base-ui/react/toggle");
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime200 = require("react/jsx-runtime");
 var controlVariants = (0, import_class_variance_authority11.cva)(
@@ -6226,7 +6226,7 @@ SegmentedControlTrigger.displayName = "SegmentedControlTrigger";
 
 // src/components/ui/select.tsx
 var React17 = __toESM(require("react"), 1);
-var import_select = require("@base-ui-components/react/select");
+var import_select = require("@base-ui/react/select");
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_jsx_runtime201 = require("react/jsx-runtime");
 var selectShellVariants = (0, import_class_variance_authority12.cva)(
@@ -6520,7 +6520,7 @@ SelectSeparator.displayName = "SelectSeparator";
 
 // src/components/ui/slider.tsx
 var React18 = __toESM(require("react"), 1);
-var import_slider = require("@base-ui-components/react/slider");
+var import_slider = require("@base-ui/react/slider");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var thumbClass = "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-[var(--radius-full)] bg-white border-2 border-primary cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-primary-foreground";
 var Slider = React18.forwardRef(
@@ -6738,7 +6738,7 @@ StarRating.displayName = "StarRating";
 
 // src/components/ui/tabs.tsx
 var React21 = __toESM(require("react"), 1);
-var import_tabs = require("@base-ui-components/react/tabs");
+var import_tabs = require("@base-ui/react/tabs");
 var import_class_variance_authority14 = require("class-variance-authority");
 var import_jsx_runtime205 = require("react/jsx-runtime");
 var tabListVariants = (0, import_class_variance_authority14.cva)(
@@ -6987,7 +6987,7 @@ Tag2.displayName = "Tag";
 
 // src/components/ui/text-area.tsx
 var React23 = __toESM(require("react"), 1);
-var import_field = require("@base-ui-components/react/field");
+var import_field = require("@base-ui/react/field");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime207 = require("react/jsx-runtime");
 var textAreaShellVariants = (0, import_class_variance_authority16.cva)(
@@ -7169,7 +7169,7 @@ TextArea.displayName = "TextArea";
 
 // src/components/ui/text-input.tsx
 var React24 = __toESM(require("react"), 1);
-var import_input = require("@base-ui-components/react/input");
+var import_input = require("@base-ui/react/input");
 var import_class_variance_authority17 = require("class-variance-authority");
 var import_jsx_runtime208 = require("react/jsx-runtime");
 var textInputShellVariants = (0, import_class_variance_authority17.cva)(
@@ -7311,6 +7311,9 @@ var TextInput = React24.forwardRef(
         "data-wvk-input": "shell",
         style: { cursor: disabled ? "not-allowed" : "var(--wvk-cursor-text)" },
         className: cn(textInputShellVariants({ inputStyle, size }), className),
+        onClick: () => {
+          if (!disabled) innerRef.current?.focus();
+        },
         children: [
           leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
             "span",
@@ -7382,7 +7385,7 @@ TextInput.displayName = "TextInput";
 
 // src/components/ui/toggle-switch.tsx
 var React25 = __toESM(require("react"), 1);
-var import_switch = require("@base-ui-components/react/switch");
+var import_switch = require("@base-ui/react/switch");
 var import_framer_motion5 = require("framer-motion");
 var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime209 = require("react/jsx-runtime");