create-kerf-component 5.0.0-beta.7 → 5.0.0-beta.70

package/index.js

@@ -17,8 +17,18 @@
 // kerf-component` alone just works. No third-party dependencies — the
 // initializer is plain Node so `npm create` runs it with zero install latency.
 
-import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
+import {
+  copyFileSync,
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  writeFileSync,
+} from 'node:fs';
 import { basename, dirname, join, resolve } from 'node:path';
+import process from 'node:process';
 import { createInterface } from 'node:readline/promises';
 import { fileURLToPath } from 'node:url';
 
@@ -41,7 +51,9 @@ const USAGE =
 async function promptForTarget() {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
-    const answer = await rl.question(`Directory (\`.\` for current) [${DEFAULT_NAME}]: `);
+    const answer = await rl.question(
+      `Directory (\`.\` for current) [${DEFAULT_NAME}]: `,
+    );
     return answer.trim() || DEFAULT_NAME;
   } finally {
     rl.close();
@@ -117,6 +129,19 @@ async function main(argv) {
   // verbatim (`_gitignore` → `.gitignore`).
   mkdirSync(targetDir, { recursive: true });
   cpSync(TEMPLATE_DIR, targetDir, { recursive: true });
+  mkdirSync(join(targetDir, 'scripts'), { recursive: true });
+  copyFileSync(
+    join(dirname(fileURLToPath(import.meta.url)), 'catalog.js'),
+    join(targetDir, 'scripts', 'kerf-component-catalog.mjs'),
+  );
+  for (const schema of [
+    'component-metadata.schema.json',
+    'component-composition.schema.json',
+  ])
+    copyFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), schema),
+      join(targetDir, 'scripts', schema),
+    );
 
   for (const file of walk(targetDir)) {
     const text = readFileSync(file, 'utf8');
@@ -136,8 +161,10 @@ async function main(argv) {
       cdHint +
       '  npm install\n' +
       '  npm run build      # tsup → ESM + .d.ts (kerfjs stays external)\n' +
+      '  npm run catalog:check # verify AI metadata and public exports\n' +
+      '  npm run check:styles  # each component styles only itself (kerf-ui-analyze)\n' +
       '  npm run typecheck\n\n' +
-      'Edit src/counter.tsx, then publish with `npm publish --access public`.\n',
+      'Edit src/counter.tsx, src/counter.css, and kerf.components.json, then publish with `npm publish --access public`.\n',
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kerf-component",
-  "version": "5.0.0-beta.7",
+  "version": "5.0.0-beta.70",
   "description": "Scaffold a publishable kerf component package that already follows kerf's hard packaging rules.",
   "type": "module",
   "license": "MIT",
@@ -26,15 +26,22 @@
     "node": ">=18.0.0"
   },
   "bin": {
-    "create-kerf-component": "index.js"
+    "create-kerf-component": "index.js",
+    "kerf-component-catalog": "catalog.js"
   },
   "files": [
     "index.js",
+    "catalog.js",
+    "component-metadata.schema.json",
+    "component-composition.schema.json",
     "template",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
     "test": "node --test tests/*.test.js"
+  },
+  "dependencies": {
+    "typescript": "^5.0.0 || ^6.0.0"
   }
 }

package/template/README.md

@@ -1,4 +1,4 @@
-# __PKG_NAME__
+# **PKG_NAME**
 
 A reusable [kerf](https://github.com/brianwestphal/kerf) component package,
 scaffolded with `create-kerf-component`.
@@ -7,8 +7,10 @@ scaffolded with `create-kerf-component`.
 
 ```bash
 npm install
-npm run build       # tsup → dist/ (ESM + .d.ts); kerfjs stays external
+npm run build # tsup → dist/ (ESM + .d.ts); kerfjs stays external
 npm run typecheck
+npm run catalog:check # verify component-composition.json is current
+npm run check:styles # each component styles only itself (kerf-ui-analyze)
 ```
 
 ## Use it
@@ -17,13 +19,14 @@ A kerf app that already has `jsxImportSource: "kerfjs"` configured can import an
 render the component like any local function — there's no extra toolchain:
 
 ```tsx
-import { mount } from 'kerfjs';
-import { Counter, createCounter, wireCounter } from '__PKG_NAME__';
+import { mount } from "kerfjs";
+import { Counter, createCounter, wireCounter } from "__PKG_NAME__";
+import "__PKG_NAME__/counter.css";
 
-const counter = createCounter(0);          // per-instance state (a factory)
-const root = document.getElementById('app')!;
+const counter = createCounter(0); // per-instance state (a factory)
+const root = document.getElementById("app")!;
 
-mount(root, () => <Counter store={counter} label="Clicks" />);
+mount(root, () => <Counter store={counter} label="Clicks" size="compact" />);
 
 const dispose = wireCounter(root, counter); // delegation disposer (call on teardown)
 ```
@@ -31,7 +34,7 @@ const dispose = wireCounter(root, counter); // delegation disposer (call on tear
 ## The rules this package follows
 
 These are kerf's hard packaging rules (see the kerf docs,
-*Building reusable component packages*). The scaffold encodes them so you don't
+_Building reusable component packages_). The scaffold encodes them so you don't
 have to:
 
 - **`kerfjs` is a `peerDependency` and is `external` in the build — never
@@ -43,9 +46,17 @@ have to:
 - **No inline JSX event handlers.** Components are pure `(props) => SafeHtml`
   string-builders; emit `data-action` hooks and let the host wire events with
   `delegate()` (see `wireCounter`), which returns a disposer.
+- **Each component owns its styles; configure, never override.** `counter.css`
+  styles only `.kerf-counter` and its own internals and writes only
+  `--_kerf-counter-*` private variables (context it provides is named after
+  Counter). Consumers configure it through props (`size`) and its public token
+  (`--kerf-counter-gap`); when it must adapt inside a parent, Counter does so
+  in its own stylesheet (`.kui-toolbar .kerf-counter`). A needed variation with
+  no prop is a gap to add here, not an override for consumers.
+  `npm run check:styles` enforces this with `kerf-ui-analyze`.
 - **Build emits ESM + `.d.ts`; `tsconfig` sets `jsxImportSource: "kerfjs"`.**
 - **Never import `kerfjs/dev`.** kerf's dev diagnostics install global hooks, so
-  installing them is the consuming *app's* call, not a library's — the app
+  installing them is the consuming _app's_ call, not a library's — the app
   writes `if (import.meta.env.DEV) await import('kerfjs/dev')` in its own entry.
   To get the diagnostics while developing this package, add that line to your own
   test harness or demo page instead (it belongs to the harness, not to `src/`).
@@ -56,4 +67,36 @@ have to:
 npm publish --access public
 ```
 
-`prepublishOnly` runs the build first; `files` ships only `dist/` + docs.
+`prepublishOnly` checks the catalog and runs the build; `files` ships `dist/`,
+the metadata/catalog pair, the README, and the license.
+
+## AI component metadata
+
+`kerf.components.json` is the author-owned source for the component's purpose,
+public exports, composition rules, geometry ownership, tokens, accessibility,
+and source links. `boundaries.rootClass` explicitly names the public class that
+owns runtime geometry (or is `null` when none does); `publicClasses` order has no
+semantic meaning. Every public class is the component's rendered anatomy unless
+`boundaries.placeableClasses` lists it: once an app's `.kerf-ui-profile.json`
+declares this package's catalog under `catalogs`, `eslint-plugin-kerfjs`
+reports an app that writes `kerf-counter` onto its own `<div>` (`KUI-L103`) and
+tells it to render `Counter` instead. List a class there only when apps may legitimately
+place it themselves (a layout utility, item geometry on another carrier), and
+add `rootElement` when the component itself renders those classes on that tag.
+Keep decisions explicit: the generator deliberately does not
+derive semantic or geometry ownership from rendered appearance. It validates
+both this source and the generated catalog against the schema copies beside the
+checker, including rejection of unknown fields. Named exports must exist in
+the TypeScript/TSX syntax tree; JSX text, nested scopes, comments, and literals
+are not exports. The checker uses this package's installed TypeScript compiler,
+so run `npm install` before the first local catalog command.
+
+```bash
+npm run catalog:generate # write component-composition.json
+npm run catalog:check    # no writes; fail when metadata, source, or output drift
+```
+
+The generated catalog ships with the package. AI tools join each entry to
+Kerf's catalog by its `package:id` key, search this package first for
+application-specific concepts, and retain both packages' identities when
+following cross-catalog composition references.

package/template/component-composition.json

@@ -0,0 +1,144 @@
+{
+  "$schema": "https://raw.githubusercontent.com/brianwestphal/kerf/main/ui/ai/component-composition-extension.schema.json",
+  "schemaVersion": 1,
+  "package": "__PKG_NAME__",
+  "compatibility": {
+    "componentCatalog": "not-applicable",
+    "identity": "package:id"
+  },
+  "entries": [
+    {
+      "key": "__PKG_NAME__:counter",
+      "package": "__PKG_NAME__",
+      "id": "counter",
+      "name": "Counter",
+      "kind": "component",
+      "purpose": "Render a controlled counter with delegated increment and decrement actions.",
+      "publicExports": [
+        {
+          "name": "Counter",
+          "subpath": "."
+        },
+        {
+          "name": "CounterProps",
+          "subpath": "."
+        },
+        {
+          "name": "CounterState",
+          "subpath": "."
+        },
+        {
+          "name": "CounterStore",
+          "subpath": "."
+        },
+        {
+          "name": "createCounter",
+          "subpath": "."
+        },
+        {
+          "name": "wireCounter",
+          "subpath": "."
+        },
+        {
+          "name": "Counter",
+          "subpath": "./counter"
+        },
+        {
+          "name": "CounterProps",
+          "subpath": "./counter"
+        },
+        {
+          "name": "CounterState",
+          "subpath": "./counter"
+        },
+        {
+          "name": "CounterStore",
+          "subpath": "./counter"
+        },
+        {
+          "name": "createCounter",
+          "subpath": "./counter"
+        },
+        {
+          "name": "wireCounter",
+          "subpath": "./counter"
+        }
+      ],
+      "sourceLinks": [
+        "README.md#use-it",
+        "src/counter.tsx"
+      ],
+      "source": "src/counter.tsx",
+      "parents": {
+        "mode": "any",
+        "entries": []
+      },
+      "contexts": [
+        "controlled-counter"
+      ],
+      "zones": [],
+      "children": {
+        "mode": "listed",
+        "concepts": [
+          "decrement-control",
+          "value",
+          "increment-control"
+        ],
+        "requiredConcepts": [
+          "decrement-control",
+          "value",
+          "increment-control"
+        ]
+      },
+      "state": [
+        {
+          "id": "count",
+          "owner": "controlled",
+          "required": true
+        }
+      ],
+      "wiring": {
+        "required": true,
+        "helpers": [
+          "wireCounter"
+        ],
+        "obligations": [
+          "Retain and call the disposer returned by wireCounter."
+        ]
+      },
+      "responsive": {
+        "owner": "not-applicable",
+        "behaviors": []
+      },
+      "layout": {
+        "roles": [
+          "counter"
+        ],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "none"
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Keep increment and decrement controls named and expose the current count as output."
+        ]
+      },
+      "boundaries": {
+        "rootClass": "kerf-counter",
+        "publicClasses": [
+          "kerf-counter"
+        ],
+        "publicTokens": [
+          "--kerf-counter-gap"
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "README.md#use-it",
+        "composition": "README.md#the-rules-this-package-follows"
+      }
+    }
+  ]
+}

package/template/kerf.components.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://raw.githubusercontent.com/brianwestphal/kerf/main/create-kerf-component/component-metadata.schema.json",
+  "schemaVersion": 1,
+  "componentCatalog": "not-applicable",
+  "components": [
+    {
+      "id": "counter",
+      "name": "Counter",
+      "kind": "component",
+      "purpose": "Render a controlled counter with delegated increment and decrement actions.",
+      "source": "src/counter.tsx",
+      "publicExports": [
+        { "name": "Counter", "subpath": "." },
+        { "name": "CounterProps", "subpath": "." },
+        { "name": "CounterState", "subpath": "." },
+        { "name": "CounterStore", "subpath": "." },
+        { "name": "createCounter", "subpath": "." },
+        { "name": "wireCounter", "subpath": "." },
+        { "name": "Counter", "subpath": "./counter" },
+        { "name": "CounterProps", "subpath": "./counter" },
+        { "name": "CounterState", "subpath": "./counter" },
+        { "name": "CounterStore", "subpath": "./counter" },
+        { "name": "createCounter", "subpath": "./counter" },
+        { "name": "wireCounter", "subpath": "./counter" }
+      ],
+      "sourceLinks": ["README.md#use-it", "src/counter.tsx"],
+      "composition": {
+        "parents": { "mode": "any", "entries": [] },
+        "contexts": ["controlled-counter"],
+        "zones": [],
+        "children": {
+          "mode": "listed",
+          "concepts": ["decrement-control", "value", "increment-control"],
+          "requiredConcepts": [
+            "decrement-control",
+            "value",
+            "increment-control"
+          ]
+        },
+        "state": [{ "id": "count", "owner": "controlled", "required": true }],
+        "wiring": {
+          "required": true,
+          "helpers": ["wireCounter"],
+          "obligations": [
+            "Retain and call the disposer returned by wireCounter."
+          ]
+        },
+        "responsive": { "owner": "not-applicable", "behaviors": [] },
+        "layout": {
+          "roles": ["counter"],
+          "geometry": { "margin": "none", "border": "none", "padding": "none" }
+        }
+      },
+      "boundaries": {
+        "rootClass": "kerf-counter",
+        "publicClasses": ["kerf-counter"],
+        "publicTokens": ["--kerf-counter-gap"]
+      },
+      "accessibility": {
+        "obligations": [
+          "Keep increment and decrement controls named and expose the current count as output."
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "README.md#use-it",
+        "composition": "README.md#the-rules-this-package-follows"
+      }
+    }
+  ]
+}

package/template/package.json

@@ -12,23 +12,35 @@
     "./counter": {
       "types": "./dist/counter.d.ts",
       "import": "./dist/counter.js"
-    }
+    },
+    "./counter.css": "./src/counter.css"
   },
   "files": [
     "dist",
+    "src/counter.css",
+    "component-composition.json",
+    "kerf.components.json",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
     "build": "tsup",
+    "catalog:generate": "node scripts/kerf-component-catalog.mjs --write",
+    "catalog:check": "node scripts/kerf-component-catalog.mjs --check",
+    "check:styles": "kerf-ui-analyze --root . src",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run catalog:check && npm run check:styles && npm run build"
+  },
+  "kerfComponentCatalog": {
+    "source": "./kerf.components.json",
+    "output": "./component-composition.json"
   },
   "peerDependencies": {
     "kerfjs": "^5.0.0-0"
   },
   "devDependencies": {
-    "kerfjs": "^5.0.0-beta.7",
+    "kerfjs": "^5.0.0-beta.70",
+    "@kerfjs/ui": "^5.0.0-beta.70",
     "tsup": "^8",
     "typescript": "^5 || ^6"
   }

package/template/src/counter.css

@@ -0,0 +1,38 @@
+/*
+ * Counter owns this stylesheet, and this stylesheet styles only Counter.
+ *
+ * - It selects `.kerf-counter` and Counter's own internals, never another
+ *   component's class, `[data-component]` root, `wa-*` element, or `::part()`.
+ * - It writes only Counter's own `--_kerf-counter-*` private variables. The
+ *   context Counter hands its buttons is named after Counter, the provider.
+ * - Consumers configure Counter through its typed props (`size`) and its one
+ *   public theme token (`--kerf-counter-gap`), never by restyling
+ *   `.kerf-counter` from their own CSS. A need with no prop is a gap to add to
+ *   Counter, not an override for the consumer to write.
+ */
+.kerf-counter {
+  --_kerf-counter-gap: var(--kerf-counter-gap, 0.5rem);
+  --_kerf-counter-control-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_kerf-counter-gap);
+}
+
+.kerf-counter[data-size="compact"] {
+  --_kerf-counter-control-size: 1.5rem;
+}
+
+.kerf-counter > button {
+  inline-size: var(--_kerf-counter-control-size);
+  block-size: var(--_kerf-counter-control-size);
+}
+
+/*
+ * Parent context: when a Counter sits in a Kerf UI Toolbar, Counter adapts
+ * itself here, in its own stylesheet. The parent appears only as an ancestor
+ * and Counter stays the subject, so the Toolbar never styles Counter and
+ * Counter never styles the Toolbar.
+ */
+.kui-toolbar .kerf-counter {
+  --_kerf-counter-control-size: 1.75rem;
+}

package/template/src/counter.tsx

@@ -28,6 +28,11 @@ export type CounterStore = ReturnType<typeof createCounter>;
 export interface CounterProps {
   store: CounterStore;
   label?: string;
+  /**
+   * Control density. A typed prop is how consumers configure the component's
+   * look; they never restyle `.kerf-counter` from their own CSS.
+   */
+  size?: 'standard' | 'compact';
 }
 
 /**
@@ -35,10 +40,17 @@ export interface CounterProps {
  * `data-action` hooks instead of inline event handlers — inline `onClick={...}`
  * handlers don't survive kerf's morph (and the `no-inline-jsx-event-handlers`
  * lint rule flags them). The host wires the events; see `wireCounter` below.
+ *
+ * Its look lives in `counter.css` (the `./counter.css` export), which styles
+ * only Counter; `size` is the configuration consumers use instead of CSS.
  */
-export function Counter({ store, label = 'Count' }: CounterProps): SafeHtml {
+export function Counter({
+  store,
+  label = 'Count',
+  size = 'standard',
+}: CounterProps): SafeHtml {
   return (
-    <div class="kerf-counter">
+    <div class="kerf-counter" data-size={size}>
       <button type="button" data-action="counter:dec" aria-label="Decrement">
         −
       </button>
@@ -61,7 +73,10 @@ export function Counter({ store, label = 'Count' }: CounterProps): SafeHtml {
  * single listener survives every re-render. Returns the disposer `delegate()`
  * hands back — call it when the host unmounts.
  */
-export function wireCounter(root: HTMLElement, store: CounterStore): () => void {
+export function wireCounter(
+  root: HTMLElement,
+  store: CounterStore,
+): () => void {
   return delegate(root, 'click', '[data-action^="counter:"]', (_event, el) => {
     const action = el.getAttribute('data-action');
     if (action === 'counter:inc') store.actions.inc();