pinfold 0.0.1 → 0.1.0

package/lib/mcp.mjs

@@ -0,0 +1,124 @@
+/**
+ * `npx pinfold mcp`: a local Model Context Protocol server over stdio
+ * (newline-delimited JSON-RPC 2.0). It answers from the installed
+ * @pinfold/core meta, so the docs always match the installed version and
+ * nothing is hosted.
+ *
+ *   { "mcpServers": { "pinfold": { "command": "npx", "args": ["pinfold", "mcp"] } } }
+ */
+import { createInterface } from 'node:readline';
+import { componentMetas, metaToMarkdown, toJsonSchema, validateConfig } from '@pinfold/core/meta';
+
+const VERSION = '0.1.0';
+const byName = (name) => componentMetas.find((m) => m.name === name);
+const names = () => componentMetas.map((m) => m.name);
+const nameArg = { type: 'object', properties: { name: { type: 'string', enum: names() } }, required: ['name'] };
+
+const TOOLS = [
+  {
+    name: 'list_components',
+    description: 'List every Pinfold component with its import path and one-line description.',
+    inputSchema: { type: 'object', properties: {} },
+    run: () => componentMetas.map((m) => `- ${m.name}: ${m.description} Import \`${m.importPath}\`.`).join('\n'),
+  },
+  {
+    name: 'get_component',
+    description: 'Full reference for one component: usage (client hook and Server Component), every option with defaults, rows, slots, keyboard, ARIA.',
+    inputSchema: nameArg,
+    run: ({ name }) => metaToMarkdown(required(name)),
+  },
+  {
+    name: 'get_schema',
+    description: "JSON Schema of a component's config. Use it to generate or check config objects.",
+    inputSchema: nameArg,
+    run: ({ name }) => JSON.stringify(toJsonSchema(required(name)), null, 2),
+  },
+  {
+    name: 'validate_config',
+    description: 'Check a config object for a component: missing required keys, unknown keys (with did-you-mean), wrong types, bad enum values.',
+    inputSchema: {
+      type: 'object',
+      properties: { name: { type: 'string', enum: names() }, config: { type: 'object' } },
+      required: ['name', 'config'],
+    },
+    run: ({ name, config }) => {
+      const problems = validateConfig(required(name), config);
+      return problems.length ? problems.map((p) => `- ${p.message}`).join('\n') : 'Valid: no problems found.';
+    },
+  },
+  {
+    name: 'get_install_steps',
+    description: 'How to add Pinfold (optionally one component) to a project.',
+    inputSchema: { type: 'object', properties: { name: { type: 'string' } } },
+    run: ({ name } = {}) =>
+      [
+        '1. `npx pinfold init` (detects Next.js/Vite/React Router, TS or JS, Tailwind; writes config, theme, CSS imports). Non-interactive: `--yes`.',
+        `2. \`npx pinfold add ${name ?? '<component>'}\` writes components/ui/${name ?? '<component>'}.tsx (or .jsx) and its CSS import.`,
+        '3. Client Component: `const X = use<Name>({ items }); return <X />`. Server Component: `define<Name>({ items })`.',
+        '4. `npx pinfold doctor` checks the setup.',
+      ].join('\n'),
+  },
+];
+
+function required(name) {
+  const meta = byName(name);
+  if (!meta) throw new Error(`Unknown component "${name}". Known: ${names().join(', ')}.`);
+  return meta;
+}
+
+/** One JSON-RPC request in, one response out (null for notifications). */
+export function handle(message) {
+  const { id, method, params = {} } = message;
+  const reply = (result) => (id === undefined ? null : { jsonrpc: '2.0', id, result });
+  const fail = (code, msg) => (id === undefined ? null : { jsonrpc: '2.0', id, error: { code, message: msg } });
+
+  switch (method) {
+    case 'initialize':
+      return reply({
+        protocolVersion: params.protocolVersion ?? '2025-06-18',
+        capabilities: { tools: {}, resources: {} },
+        serverInfo: { name: 'pinfold', version: VERSION },
+        instructions: 'Pinfold UI reference. Call list_components, then get_component before writing Pinfold code; validate_config to check a config.',
+      });
+    case 'ping':
+      return reply({});
+    case 'tools/list':
+      return reply({ tools: TOOLS.map(({ run, ...tool }) => tool) });
+    case 'tools/call': {
+      const tool = TOOLS.find((t) => t.name === params.name);
+      if (!tool) return fail(-32602, `Unknown tool ${params.name}`);
+      try {
+        return reply({ content: [{ type: 'text', text: tool.run(params.arguments ?? {}) }] });
+      } catch (error) {
+        return reply({ content: [{ type: 'text', text: error.message }], isError: true });
+      }
+    }
+    case 'resources/list':
+      return reply({
+        resources: componentMetas.map((m) => ({ uri: `pinfold://components/${m.name}`, name: m.displayName, mimeType: 'text/markdown', description: m.description })),
+      });
+    case 'resources/read': {
+      const meta = byName(String(params.uri ?? '').replace('pinfold://components/', ''));
+      if (!meta) return fail(-32602, `Unknown resource ${params.uri}`);
+      return reply({ contents: [{ uri: params.uri, mimeType: 'text/markdown', text: metaToMarkdown(meta) }] });
+    }
+    default:
+      if (method?.startsWith('notifications/')) return null;
+      return fail(-32601, `Method not found: ${method}`);
+  }
+}
+
+export function serve(input = process.stdin, output = process.stdout) {
+  const rl = createInterface({ input });
+  rl.on('line', (line) => {
+    if (!line.trim()) return;
+    let response;
+    try {
+      response = handle(JSON.parse(line));
+    } catch {
+      response = { jsonrpc: '2.0', id: null, error: { code: -32700, message: 'Parse error' } };
+    }
+    if (response) output.write(JSON.stringify(response) + '\n');
+  });
+  return new Promise((done) => rl.on('close', done));
+}

package/lib/plan.mjs

@@ -0,0 +1,170 @@
+/**
+ * Every command describes its changes as a plan first. The plan is what the
+ * safety rules hang on: nothing is written until it is printed (and, when
+ * interactive, confirmed); `--dry-run` stops after printing; existing files are
+ * only ever merged into, never replaced; and a plan whose files already say the
+ * right thing is empty, which is what makes every command idempotent.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+export class Plan {
+  constructor(cwd) {
+    this.cwd = cwd;
+    /** path -> { before: string | null, after: string } */
+    this.changes = new Map();
+    this.notes = [];
+  }
+
+  /** Current content: planned, else on disk, else null. */
+  read(path) {
+    if (this.changes.has(path)) return this.changes.get(path).after;
+    const file = join(this.cwd, path);
+    return existsSync(file) ? readFileSync(file, 'utf8') : null;
+  }
+
+  /** Merge into a file (or create it). Records nothing when the result is unchanged. */
+  update(path, transform) {
+    const current = this.read(path);
+    const next = transform(current ?? '');
+    if (next === current) return false;
+    const before = this.changes.has(path) ? this.changes.get(path).before : current;
+    if (next === before) this.changes.delete(path);
+    else this.changes.set(path, { before, after: next });
+    return true;
+  }
+
+  /** Create a file the developer will own. An existing file is never overwritten. */
+  create(path, content) {
+    const current = this.read(path);
+    if (current === null) return this.update(path, () => content);
+    if (current !== content) this.notes.push(`kept ${path} (exists; yours to edit)`);
+    return false;
+  }
+
+  /** Write a file Pinfold owns and regenerates (the theme CSS). */
+  generate(path, content) {
+    return this.update(path, () => content);
+  }
+
+  note(message) {
+    this.notes.push(message);
+  }
+
+  get empty() {
+    return this.changes.size === 0;
+  }
+
+  /** A compact diff: new files by line count, edited files by their added and removed lines. */
+  describe(color) {
+    const out = [];
+    for (const [path, { before, after }] of this.changes) {
+      if (before === null) {
+        out.push(`  ${color.ok('create')}  ${path} ${color.dim(`(${after.split('\n').length} lines)`)}`);
+        continue;
+      }
+      out.push(`  ${color.warn('update')}  ${path}`);
+      const was = before.split('\n');
+      const now = after.split('\n');
+      for (const line of now) if (!was.includes(line)) out.push(color.ok(`          + ${line}`));
+      for (const line of was) if (!now.includes(line)) out.push(color.err(`          - ${line}`));
+    }
+    for (const note of this.notes) out.push(color.dim(`  ${note}`));
+    return out.join('\n');
+  }
+
+  apply() {
+    for (const [path, { after }] of this.changes) {
+      const file = join(this.cwd, path);
+      mkdirSync(dirname(file), { recursive: true });
+      writeFileSync(file, after);
+    }
+  }
+}
+
+/* --------------------------------------------------------- source edits */
+
+/** Quote style of the file's existing imports, so inserted lines match. */
+const quoteOf = (src) => (/^import\s.*"/m.test(src) && !/^import\s.*'/m.test(src) ? '"' : "'");
+
+/**
+ * Add side-effect imports (`import 'x';`) that are missing, in the given
+ * order, after the file's last top-level import (after any directive).
+ */
+export function addImports(src, specs) {
+  const q = quoteOf(src);
+  const missing = specs.filter((s) => !new RegExp(`['"]${escape(s)}['"]`).test(src));
+  if (!missing.length) return src;
+  // A CommonJS entry gets require() calls, after its last top-level require.
+  if (/\brequire\(/.test(src) && !/^import\s/m.test(src)) {
+    const lines = src.split('\n');
+    let at = -1;
+    lines.forEach((line, i) => {
+      if (/^(const|let|var)\s.*=\s*require\(|^require\(/.test(line.trim())) at = i;
+    });
+    lines.splice(at + 1, 0, missing.map((s) => `require(${q}${s}${q});`).join('\n'));
+    return lines.join('\n');
+  }
+  const block = missing.map((s) => `import ${q}${s}${q};`).join('\n');
+  return insertAfterImports(src, block);
+}
+
+/** Add a named import line unless the binding is already imported from that module. */
+export function addNamedImport(src, name, from, isDefault = false) {
+  if (new RegExp(`import[^;]*\\b${name}\\b[^;]*from\\s*['"]${escape(from)}['"]`).test(src)) return src;
+  const q = quoteOf(src);
+  return insertAfterImports(src, `import ${isDefault ? name : `{ ${name} }`} from ${q}${from}${q};`);
+}
+
+function insertAfterImports(src, block) {
+  const lines = src.split('\n');
+  let at = -1;
+  let inImport = false;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (inImport) {
+      if (/from\s*['"].*['"];?$|^['"].*['"];?$/.test(line)) {
+        inImport = false;
+        at = i;
+      }
+      continue;
+    }
+    if (/^import\s/.test(line)) {
+      at = i;
+      if (!/['"];?$/.test(line)) inImport = true;
+    } else if (/^['"]use (client|server)['"];?$/.test(line) && at === -1) {
+      at = i;
+    } else if (line && !line.startsWith('//') && !line.startsWith('/*') && !line.startsWith('*') && at !== -1) {
+      break;
+    }
+  }
+  lines.splice(at + 1, 0, block);
+  return lines.join('\n');
+}
+
+/** Tailwind v4: `@import "<spec>";` after the stylesheet's last @import. */
+export function addCssImport(css, spec) {
+  if (css.includes(spec)) return css;
+  const lines = css.split('\n');
+  let at = -1;
+  lines.forEach((line, i) => {
+    if (/^@import\s/.test(line.trim())) at = i;
+  });
+  lines.splice(at + 1, 0, `@import "${spec}";`);
+  return lines.join('\n');
+}
+
+/** Tailwind v3: add the preset to `presets`, without reformatting the rest. */
+export function addTailwindPreset(src) {
+  if (src.includes('@pinfold/css/tailwind')) return src;
+  const esm = /export\s+default/.test(src);
+  const ref = esm ? 'pinfoldPreset' : "require('@pinfold/css/tailwind')";
+  let out = src;
+  if (/presets\s*:\s*\[/.test(out)) out = out.replace(/presets\s*:\s*\[/, (m) => `${m}${ref}, `);
+  else if (/(module\.exports\s*=\s*\{|export\s+default\s*\{|defineConfig\(\s*\{)/.test(out))
+    out = out.replace(/(module\.exports\s*=\s*\{|export\s+default\s*\{|defineConfig\(\s*\{)/, (m) => `${m}\n  presets: [${ref}],`);
+  else return src;
+  return esm ? addNamedImport(out, 'pinfoldPreset', '@pinfold/css/tailwind', true) : out;
+}
+
+const escape = (s) => s.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');

package/package.json

@@ -1,13 +1,45 @@
 {
   "name": "pinfold",
-  "version": "0.0.1",
-  "description": "CLI for Pinfold, a hooks-first, config-driven React UI library. Pre-release placeholder; the real CLI ships as 0.1.0.",
+  "version": "0.1.0",
+  "description": "Pinfold CLI: set up, add components, generate themes and check a project.",
   "author": "Indranil Bhattacharya",
+  "keywords": [
+    "pinfold",
+    "cli",
+    "ui",
+    "react",
+    "design-system"
+  ],
   "license": "MIT",
   "homepage": "https://pinfold.indranildev.in",
-  "repository": { "type": "git", "url": "git+https://github.com/IndranilBhattacharya/pinfold.git", "directory": "packages/cli" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IndranilBhattacharya/pinfold.git",
+    "directory": "packages/cli"
+  },
   "bugs": "https://github.com/IndranilBhattacharya/pinfold/issues",
-  "keywords": ["pinfold", "react", "ui", "cli", "design-system"],
-  "bin": { "pinfold": "bin/pinfold.js" },
-  "files": ["bin"]
+  "type": "module",
+  "bin": {
+    "pinfold": "bin/pinfold.mjs"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "templates",
+    "registry.json"
+  ],
+  "scripts": {
+    "build": "node -e \"process.exit(0)\"",
+    "start": "node bin/pinfold.mjs"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1",
+    "@pinfold/core": "0.1.0"
+  }
 }

package/registry.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://pinfold.indranildev.in/registry.schema.json",
+  "version": 1,
+  "core": {
+    "packages": ["@pinfold/react", "@pinfold/css"],
+    "styles": "@pinfold/css/core.css"
+  },
+  "components": [
+    {
+      "name": "accordion",
+      "import": "@pinfold/react/accordion",
+      "styles": "@pinfold/css/accordion.css",
+      "status": "stable",
+      "description": "Collapsible disclosure rows. WAI-ARIA accordion pattern.",
+      "variants": ["solid", "outline", "separated", "filled", "ghost"],
+      "hook": "useAccordion",
+      "snippet": "<Accordion items={[{ title: 'Shipping', content: 'Ships in 2 days.' }]} />"
+    }
+  ],
+  "planned": ["tabs", "dialog", "select", "combobox", "data-grid", "calendar", "date-picker", "toast", "tooltip", "command", "form", "tree"]
+}

package/templates/component/css/__NAME__.css.tmpl

@@ -0,0 +1,101 @@
+/* Pinfold — __NAME__.
+   Two-layer variables: [data-size] writes the `*-base` preset, `dimensions`
+   writes --pinfold-__NAME__-* which wins through the var() fallback.
+   Every value resolves to a core token — a literal colour here would be
+   invisible to the palette, to dark mode and to consumer overrides, and the
+   conformance suite fails the build if one appears. */
+
+@layer pinfold.components {
+
+  .pinfold-__NAME__ {
+    --pinfold-__CAMEL__-pad-x-base: var(--pinfold-space-4);
+    --pinfold-__CAMEL__-pad-y-base: var(--pinfold-space-2);
+    --pinfold-__CAMEL__-font-base: var(--pinfold-text-md);
+    --pinfold-__CAMEL__-radius-base: var(--pinfold-radius-md);
+    --pinfold-__CAMEL__-gap-base: var(--pinfold-space-2);
+
+    --pinfold-__CAMEL__-pad-x: var(--pinfold-__NAME__-padding-x, var(--pinfold-__CAMEL__-pad-x-base));
+    --pinfold-__CAMEL__-pad-y: var(--pinfold-__NAME__-padding-y, var(--pinfold-__CAMEL__-pad-y-base));
+    --pinfold-__CAMEL__-font: var(--pinfold-__NAME__-font-size, var(--pinfold-__CAMEL__-font-base));
+    --pinfold-__CAMEL__-radius: var(--pinfold-__NAME__-radius, var(--pinfold-__CAMEL__-radius-base));
+    --pinfold-__CAMEL__-gap: var(--pinfold-__NAME__-gap, var(--pinfold-__CAMEL__-gap-base));
+    --pinfold-__CAMEL__-border: var(--pinfold-__NAME__-border-width, 1px);
+    --pinfold-__CAMEL__-duration: var(--pinfold-__NAME__-duration, var(--pinfold-duration-fast));
+    --pinfold-__CAMEL__-accent: var(--pinfold-color-accent);
+
+    display: flex;
+    gap: var(--pinfold-__CAMEL__-gap);
+    width: var(--pinfold-__NAME__-width, auto);
+    max-width: var(--pinfold-__NAME__-max-width, none);
+    font-size: var(--pinfold-__CAMEL__-font);
+    color: var(--pinfold-color-text);
+  }
+
+  .pinfold-__NAME__[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* ------------------------------------------------------------------ sizes */
+  .pinfold-__NAME__[data-size='sm'] {
+    --pinfold-__CAMEL__-pad-x-base: var(--pinfold-space-3);
+    --pinfold-__CAMEL__-pad-y-base: var(--pinfold-space-1);
+    --pinfold-__CAMEL__-font-base: var(--pinfold-text-sm);
+  }
+  .pinfold-__NAME__[data-size='lg'] {
+    --pinfold-__CAMEL__-pad-x-base: var(--pinfold-space-5);
+    --pinfold-__CAMEL__-pad-y-base: var(--pinfold-space-3);
+    --pinfold-__CAMEL__-font-base: var(--pinfold-text-lg);
+  }
+
+  /* ------------------------------------------------------------------ tones */
+  .pinfold-__NAME__[data-tone='neutral'] { --pinfold-__CAMEL__-accent: var(--pinfold-color-text); }
+  .pinfold-__NAME__[data-tone='success'] { --pinfold-__CAMEL__-accent: var(--pinfold-success-500); }
+  .pinfold-__NAME__[data-tone='warning'] { --pinfold-__CAMEL__-accent: var(--pinfold-warning-500); }
+  .pinfold-__NAME__[data-tone='danger'] { --pinfold-__CAMEL__-accent: var(--pinfold-danger-500); }
+  .pinfold-__NAME__[data-tone='info'] { --pinfold-__CAMEL__-accent: var(--pinfold-info-500); }
+
+  /* ------------------------------------------------------------------- item */
+  .pinfold-__NAME____item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--pinfold-space-2);
+    padding: var(--pinfold-__CAMEL__-pad-y) var(--pinfold-__CAMEL__-pad-x);
+    font-weight: var(--pinfold-weight-medium);
+    color: var(--pinfold-color-text-muted);
+    border-radius: var(--pinfold-__CAMEL__-radius);
+    transition: background-color var(--pinfold-__CAMEL__-duration) var(--pinfold-ease),
+      color var(--pinfold-__CAMEL__-duration) var(--pinfold-ease);
+  }
+
+  .pinfold-__NAME__[data-variant='outline'] .pinfold-__NAME____item {
+    border: var(--pinfold-__CAMEL__-border) solid var(--pinfold-color-border);
+  }
+
+  .pinfold-__NAME____item:hover {
+    background: var(--pinfold-color-surface-hover);
+    color: var(--pinfold-color-text);
+  }
+
+  .pinfold-__NAME____item[data-state='selected'] {
+    color: var(--pinfold-__CAMEL__-accent);
+    background: var(--pinfold-color-surface-selected);
+  }
+
+  .pinfold-__NAME____item[data-disabled] {
+    color: var(--pinfold-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .pinfold-__NAME____item[data-disabled]:hover {
+    background: none;
+  }
+
+  .pinfold-__NAME____item:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+
+  .pinfold-__NAME____label {
+    min-width: 0;
+  }
+
+}

package/templates/component/react/__NAME__.test.tsx.tmpl

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describePinfoldConformance } from '@pinfold/testing';
+import { __PASCAL__ } from './__PASCAL__';
+import { use__PASCAL__ } from './use__PASCAL__';
+
+const items = [
+  { id: 'a', label: 'First' },
+  { id: 'b', label: 'Second' },
+  { id: 'c', label: 'Third', disabled: true },
+];
+
+const buttons = () => screen.getAllByRole('button');
+
+describe('__PASCAL__', () => {
+  it('renders as a component returned from the hook', () => {
+    function Demo() {
+      const Thing = use__PASCAL__({ items, defaultValue: 'a' });
+      return <Thing className="layout-class" />;
+    }
+    render(<Demo />);
+    expect(buttons()[0]).toHaveAttribute('data-state', 'selected');
+  });
+
+  it('selects on click and reports the change', () => {
+    const onValueChange = vi.fn();
+    render(<__PASCAL__ items={items} onValueChange={onValueChange} />);
+
+    fireEvent.click(buttons()[1]);
+    expect(onValueChange).toHaveBeenLastCalledWith('b');
+  });
+
+  it('ignores disabled items but keeps them focusable', () => {
+    render(<__PASCAL__ items={items} />);
+    const third = buttons()[2];
+
+    expect(third).toHaveAttribute('aria-disabled', 'true');
+    expect(third).not.toHaveAttribute('disabled');
+    fireEvent.click(third);
+    expect(third).toHaveAttribute('data-state', 'idle');
+  });
+
+  it('moves focus with the arrow keys', () => {
+    render(<__PASCAL__ items={items} />);
+    const [first, second] = buttons();
+
+    first.focus();
+    fireEvent.keyDown(first, { key: 'ArrowRight' });
+    expect(document.activeElement).toBe(second);
+
+    fireEvent.keyDown(second, { key: 'Home' });
+    expect(document.activeElement).toBe(first);
+  });
+
+  // TODO: add the keyboard map and roles your WAI-ARIA pattern requires.
+});
+
+describePinfoldConformance({
+  name: '__NAME__',
+  slots: ['root', 'item', 'label'],
+  dimension: { key: 'paddingX', value: 24 },
+  cssFile: 'packages/css/src/__NAME__.css',
+  hook: { use: use__PASCAL__ as any, config: { items } },
+  render: (config) => <__PASCAL__ items={items} defaultValue="a" {...config} />,
+});

package/templates/component/react/__PASCAL__.tsx.tmpl

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import { use__PASCAL__ } from './use__PASCAL__';
+import type { __PASCAL__Config } from './types';
+
+/**
+ * Thin JSX wrapper over `use__PASCAL__().render()`, for people who prefer a
+ * tag. It adds nothing the hook does not already do.
+ */
+export function __PASCAL__(config: __PASCAL__Config): React.ReactElement {
+  return use__PASCAL__(config).render();
+}
+
+__PASCAL__.displayName = '__PASCAL__';

package/templates/component/react/__PASCAL__View.tsx.tmpl

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { cn, dimensionVars, mergeProps, resolveNode } from '@pinfold/core';
+import { renderSlot, slotProps } from '../slots';
+import type {
+  Resolved__PASCAL__Appearance,
+  __PASCAL__Api,
+  __PASCAL__Config,
+  __PASCAL__ItemState,
+  __PASCAL__Node,
+  __PASCAL__RootProps,
+  __PASCAL__Slot,
+} from './types';
+
+const B = 'pinfold-__NAME__';
+
+/**
+ * Everything the markup needs, gathered once per render.
+ *
+ * These are plain functions rather than components on purpose: the hook owns
+ * rendering, so `use__PASCAL__()` can hand back a component instead of being
+ * called by one.
+ */
+export interface ViewContext {
+  api: __PASCAL__Api;
+  config: __PASCAL__Config;
+  a: Resolved__PASCAL__Appearance;
+}
+
+/** Component class, unless the consumer opted out of our stylesheet. */
+const cls = (ctx: ViewContext, name: string) => (ctx.a.unstyled ? undefined : name);
+
+/**
+ * Fold three layers of overrides into one props bag, in ascending priority:
+ * the component's own class, the root config's slot overrides, then the row's
+ * own overrides.
+ */
+function slot<S extends __PASCAL__Slot>(
+  ctx: ViewContext,
+  name: S,
+  base: Record<string, any>,
+  item?: __PASCAL__ItemState,
+): Record<string, any> {
+  const merged = slotProps<__PASCAL__Slot, __PASCAL__ItemState>(ctx.config, name, base);
+
+  const perItem = item?.config;
+  if (!perItem?.classNames?.[name] && !perItem?.styles?.[name]) return merged;
+
+  return mergeProps(merged, {
+    className: perItem.classNames?.[name],
+    style: perItem.styles?.[name],
+  });
+}
+
+export function renderRoot(ctx: ViewContext, rootProps?: __PASCAL__RootProps): React.ReactElement {
+  const { api, config, a } = ctx;
+
+  const props = api.getRootProps(
+    mergeProps(
+      slot(ctx, 'root', {
+        className: a.unstyled ? config.className : cn('pinfold', B, config.className),
+        style: { ...dimensionVars('__NAME__', config.dimensions), ...config.style },
+        'data-variant': a.variant,
+        'data-size': a.size,
+        'data-tone': a.tone,
+        'data-pinfold-radius': a.radius,
+        'data-animate': a.animate ? '' : undefined,
+        'data-unstyled': a.unstyled ? '' : undefined,
+      }),
+      rootProps as Record<string, any>,
+    ),
+  );
+
+  return <div {...props}>{api.items.map((item) => renderItem(ctx, item))}</div>;
+}
+
+export function renderItem(
+  ctx: ViewContext,
+  item: __PASCAL__ItemState,
+  extra?: Record<string, any>,
+): React.ReactElement {
+  const { api, config } = ctx;
+
+  const props = api.getItemProps(
+    item,
+    mergeProps(slot(ctx, 'item', { className: cls(ctx, `${B}__item`) }, item), extra ?? {}),
+  );
+
+  const label = (
+    <span {...slot(ctx, 'label', { className: cls(ctx, `${B}__label`) }, item)}>
+      {resolveNode(item.config.label as __PASCAL__Node, item)}
+    </span>
+  );
+
+  if (config.renderItem) {
+    return (
+      <React.Fragment key={item.id}>
+        {config.renderItem({ state: item, props, children: label })}
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <React.Fragment key={item.id}>
+      {renderSlot<__PASCAL__Slot, __PASCAL__ItemState>(
+        config,
+        'item',
+        props,
+        item,
+        label,
+        (p, children) => <button {...p}>{children}</button>,
+      )}
+    </React.Fragment>
+  );
+}