@box-kite/react 2.0.0 → 2.1.0

package/mcp/src/vocabulary.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Every key a Box takes that is *not* one of the 221 style props: the nesting keys, and the four
+ * reserved names. Imported from the engine's own records rather than listed here, so a key added to
+ * the library is in the MCP server the same day — the whole reason this package lives in this repo.
+ */
+/** What a nesting key is for, in one line — the engine's records carry the selector, not the reason. */
+declare const KINDS: {
+    readonly pseudoClass: "a state of this element";
+    readonly pseudoElement: "a pseudo-element of this element (one per Box)";
+    readonly breakpoint: "a viewport width, min-width and up";
+    readonly media: "a reader preference or input device";
+    readonly container: "the width of the nearest query container";
+    readonly variant: "an attribute or position on this element's own selector";
+    readonly group: "an ancestor's or a preceding sibling's state";
+    readonly theme: "one named theme";
+    readonly startingStyle: "what these props start from, the first time the element is styled";
+};
+export type NestingKind = keyof typeof KINDS;
+export interface NestingKey {
+    key: string;
+    kind: NestingKind;
+    /** What it compiles to — a selector fragment, an at-rule prelude, or a width in px. */
+    compiles: string;
+    deprecated: boolean;
+}
+/** Every nesting key the engine dispatches on, in the order a reader meets them. */
+export declare const nestingKeys: readonly NestingKey[];
+export declare const nestingKey: (key: string) => NestingKey | undefined;
+export declare const nestingKindLabel: (kind: NestingKind) => string;
+/**
+ * The four names a Box takes that are neither a style prop nor a nesting key. `props` is the one an
+ * agent gets wrong most often: an HTML attribute written at the top level typechecks and is dropped.
+ */
+export declare const reservedProps: Readonly<Record<string, string>>;
+/**
+ * HTML attributes an agent most often writes at the top level, where Box drops them. Names the engine
+ * already claims are filtered out rather than listed away: `checked` and `placeholder` are nesting
+ * keys on a Box, and a hint that contradicted the engine would be worse than no hint.
+ */
+export declare const attributeNames: ReadonlySet<string>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -34,6 +34,21 @@
       "import": "./anchor.mjs",
       "require": "./anchor.cjs"
     },
+    "./catalog": {
+      "types": "./catalog.d.ts",
+      "import": "./catalog.mjs",
+      "require": "./catalog.cjs"
+    },
+    "./interop": {
+      "types": "./interop.d.ts",
+      "import": "./interop.mjs",
+      "require": "./interop.cjs"
+    },
+    "./spec": {
+      "types": "./spec.d.ts",
+      "import": "./spec.mjs",
+      "require": "./spec.cjs"
+    },
     "./ssg": {
       "types": "./ssg.d.ts",
       "import": "./ssg.mjs",
@@ -59,6 +74,7 @@
     "preview": "vite preview ./pages --config ./pages.vite.config.ts --outDir ../dist-pages",
     "build": "npm run build:core && vite build",
     "build:core": "vite build --config vite.core.config.ts && node scripts/postbuild-core.mjs",
+    "build:mcp": "vite build --config vite.mcp.config.ts && node scripts/postbuild-mcp.mjs",
     "postbuild": "node scripts/postbuild.mjs",
     "build:bridge": "node scripts/build-bridge.mjs",
     "build:dev": "npm run build:core && vite build --mode dev",
@@ -75,10 +91,17 @@
     "docs:props": "node scripts/check-props-api.mjs --fix",
     "check:components": "node scripts/check-components-api.mjs",
     "docs:components": "node scripts/check-components-api.mjs --fix",
+    "check:catalog": "node scripts/check-catalog-api.mjs",
+    "docs:catalog": "node scripts/check-catalog-api.mjs --fix",
     "check:conventions": "node scripts/check-component-conventions.mjs",
     "check:agents": "node scripts/check-agent-files.mjs",
     "docs:agents": "node scripts/check-agent-files.mjs --fix",
     "check:package": "publint dist && attw --pack dist --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-core && attw --pack dist-core --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error",
+    "bench": "node bench/run.mjs",
+    "compare": "node dev/compare/report.mjs",
+    "compare:tailwind": "node dev/compare/report.mjs tailwind",
+    "compare:radix": "node dev/compare/report.mjs radix",
+    "compare:grid": "node dev/compare/report.mjs grid",
     "size": "size-limit",
     "size:published": "node dev/published-size.mjs",
     "release": "node scripts/release.mjs"
@@ -92,7 +115,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "30.40 KB"
+      "limit": "32.63 KB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -102,7 +125,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "28.90 KB"
+      "limit": "31.17 KB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -124,11 +147,41 @@
       "gzip": true,
       "limit": "2.25 KB"
     },
+    {
+      "name": "Component catalog (catalog entry)",
+      "path": "dist/catalog.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "50.72 KB"
+    },
+    {
+      "name": "Spec renderer (spec entry)",
+      "path": "dist/spec.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "4.7 KB"
+    },
+    {
+      "name": "Ecosystem interop (interop entry)",
+      "path": "dist/interop.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "4 KB"
+    },
     {
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "28.17 KB"
+      "limit": "31.96 KB"
     },
     {
       "name": "Dialog",
@@ -138,7 +191,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "32.55 KB"
+      "limit": "34.76 KB"
     },
     {
       "name": "Popover",
@@ -148,7 +201,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "34.02 KB"
+      "limit": "36.24 KB"
     },
     {
       "name": "Menu",
@@ -158,7 +211,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "36.27 KB"
+      "limit": "38.5 KB"
     },
     {
       "name": "Accordion",
@@ -168,7 +221,37 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "31.76 KB"
+      "limit": "33.96 KB"
+    },
+    {
+      "name": "Agent",
+      "path": "dist/components/agent.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "34.69 KB"
+    },
+    {
+      "name": "Markdown",
+      "path": "dist/components/markdown.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "33.24 KB"
+    },
+    {
+      "name": "Skeleton",
+      "path": "dist/components/skeleton.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "32.55 KB"
     },
     {
       "name": "Tabs",
@@ -178,7 +261,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "32.96 KB"
+      "limit": "35.2 KB"
     },
     {
       "name": "Slider",
@@ -188,7 +271,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "32.12 KB"
+      "limit": "34.34 KB"
     },
     {
       "name": "Progress",
@@ -198,7 +281,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "30.28 KB"
+      "limit": "32.51 KB"
     },
     {
       "name": "Toaster",
@@ -208,7 +291,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "33.77 KB"
+      "limit": "36.0 KB"
     },
     {
       "name": "Combobox",
@@ -218,7 +301,17 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "39.54 KB"
+      "limit": "41.73 KB"
+    },
+    {
+      "name": "Dashboard",
+      "path": "dist/components/dashboard.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "38.2 KB"
     },
     {
       "name": "DataGrid",
@@ -228,7 +321,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "74.86 KB"
+      "limit": "79.67 KB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -248,7 +341,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "96.82 KB"
+      "limit": "111.25 KB"
     }
   ],
   "repository": {
@@ -282,18 +375,29 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.0.0",
+    "@box-kite/core": "2.1.0",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@assistant-ui/core": "^0.3.20",
+    "@copilotkit/a2ui-renderer": "^1.73.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@eslint/js": "^10.0.1",
     "@iconify-json/simple-icons": "^1.2.94",
     "@iconify/react": "^6.0.2",
+    "@json-render/core": "^0.20.0",
+    "@json-render/react": "^0.20.0",
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "@mui/material": "^9.4.0",
+    "@mui/x-data-grid": "^9.14.0",
     "@size-limit/preset-small-lib": "^13.0.3",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
+    "@tanstack/react-table": "^9.2.4",
+    "@tanstack/react-virtual": "^3.14.13",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
@@ -305,6 +409,8 @@
     "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.11",
+    "ag-grid-community": "^36.2.0",
+    "ag-grid-react": "^36.2.0",
     "axe-core": "^4.13.0",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
@@ -330,6 +436,7 @@
     "unplugin-icons": "^23.0.1",
     "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "zod": "^4.6.5"
   }
 }

package/react/spec/renderSpec.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { SpecIssue } from '../../utils/spec/specTypes';
+import { SpecRegistry } from './specRegistry';
+/** What a bound event hands the host. Everything about where it came from, and nothing about what to do. */
+export interface SpecActionDetails {
+    /** What the spec sent with the action, resolved against the data the way a prop is. */
+    payload?: unknown;
+    /** The arguments the component called its handler with. */
+    args: unknown[];
+    /** The event prop that fired. */
+    prop: string;
+    component: string;
+    path: string;
+}
+export type SpecActionHandler = (action: string, details: SpecActionDetails) => void;
+export interface SpecRenderOptions {
+    /** What the spec may name, and what each name renders. */
+    registry: SpecRegistry;
+    /** What `{ $data: … }` reads from. */
+    data?: unknown;
+    /** Every action the spec binds arrives here. The host decides what any of them mean. */
+    onAction?: SpecActionHandler;
+    /** What stands in for a node that could not render. Nothing, unless the app says otherwise. */
+    fallback?: (issue: SpecIssue) => ReactNode;
+    /** A tree bigger than this stops rendering — a generated spec has no author to notice a runaway one. */
+    maxNodes?: number;
+    maxDepth?: number;
+    /** A node that threw renders its fallback until this changes: the next spec is a fresh chance. */
+    resetKey?: unknown;
+    /** A node that threw during a *commit*, which is after this function has returned. */
+    onError?: (issue: SpecIssue) => void;
+    /**
+     * The last value each node was given for a prop it cannot render without. A stream is not monotone —
+     * a column's `align` passes through `"e"` on its way to `"end"`, which fails its own schema and takes
+     * the whole `def` with it — so without this a grid on screen is unmounted and rebuilt several times
+     * in the last moments of a spec. `<SpecRenderer>` keeps one; a one-shot render needs none.
+     */
+    memory?: SpecMemory;
+}
+/** Keyed by a node's path and component: a different component at that path remembers nothing. */
+export type SpecMemory = Map<string, Record<string, unknown>>;
+export interface SpecRenderResult {
+    element: ReactNode;
+    /** Everything that did not render, and why. Advisory — the tree renders around every one of them. */
+    issues: SpecIssue[];
+}
+/**
+ * The spec as React elements, and everything that did not render. No hook in it, so a static spec
+ * renders on a server and a test can assert the issues without mounting anything.
+ */
+export declare function renderSpec(spec: unknown, options: SpecRenderOptions): SpecRenderResult;

package/react/spec/specBoundary.d.ts

@@ -0,0 +1,25 @@
+import { Component, ReactNode } from 'react';
+import { SpecIssue } from '../../utils/spec/specTypes';
+export interface SpecBoundaryProps {
+    /** Where the node sits in the spec, for the issue this reports. */
+    path: string;
+    component: string;
+    /** A new spec resets the boundary: the next version of a node deserves its own chance to render. */
+    resetKey: unknown;
+    fallback: (issue: SpecIssue) => ReactNode;
+    onError?: (issue: SpecIssue) => void;
+    children: ReactNode;
+}
+interface SpecBoundaryState {
+    message: string | null;
+    resetKey: unknown;
+}
+export default class SpecBoundary extends Component<SpecBoundaryProps, SpecBoundaryState> {
+    state: SpecBoundaryState;
+    static getDerivedStateFromProps(props: SpecBoundaryProps, state: SpecBoundaryState): Partial<SpecBoundaryState> | null;
+    static getDerivedStateFromError(error: unknown): Partial<SpecBoundaryState>;
+    componentDidCatch(error: unknown): void;
+    private issue;
+    render(): ReactNode;
+}
+export {};

package/react/spec/specRegistry.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType } from 'react';
+import { CatalogSchema } from '@box-kite/core';
+import { SpecRules } from '../../utils/spec/specTypes';
+/** A component the catalog does not describe, or one whose rules the app wants to narrow. */
+export interface SpecComponent {
+    component: ComponentType<any>;
+    /** What its props may be, as JSON Schema. Without one, a spec may set none of them. */
+    props?: CatalogSchema;
+    /** Where children may go. `['default']` unless the catalog says otherwise. */
+    slots?: string[];
+    /** The props a spec may bind an action to — the only props that can ever become a function. */
+    events?: string[];
+    description?: string;
+}
+export interface SpecRegistryEntry extends SpecRules {
+    component: ComponentType<any>;
+}
+export interface SpecRegistry {
+    /** Every component a spec may name, in the order they were registered. */
+    readonly names: string[];
+    /** The rules alone, which is what `specSchema()` takes: registry in, the model's constraint out. */
+    readonly components: Record<string, SpecRules>;
+    get(type: string): SpecRegistryEntry | undefined;
+}
+/** What a `catalog()` result carries per component. Structural, so the catalog entry is not imported. */
+interface CatalogSource {
+    components: Record<string, {
+        description?: string;
+        props?: CatalogSchema;
+        slots?: string[];
+        events?: string[];
+    }>;
+}
+export interface SpecRegistryOptions {
+    /** The implementations, by the name a spec writes. A bare component takes its rules from the catalog. */
+    components: Record<string, ComponentType<any> | SpecComponent>;
+    /** `catalog()`, narrowed however the app narrowed it. Anything it describes needs no rules of its own. */
+    catalog?: CatalogSource;
+}
+/** The registry a `<SpecRenderer>` renders against. */
+export declare function createSpecRegistry(options: SpecRegistryOptions): SpecRegistry;
+export default createSpecRegistry;

package/react/spec/specRenderer.d.ts

@@ -0,0 +1,10 @@
+import { SpecIssue } from '../../utils/spec/specTypes';
+import { SpecRenderOptions } from './renderSpec';
+export interface SpecRendererProps extends Omit<SpecRenderOptions, 'onError' | 'resetKey' | 'memory'> {
+    /** Whatever arrived. Every field of it is checked, so a partial object from a stream is welcome. */
+    spec: unknown;
+    /** Called after each render whose issues changed, and again when a node throws during a commit. */
+    onIssues?: (issues: SpecIssue[]) => void;
+}
+/** A generated spec, rendered against what the app allows. */
+export default function SpecRenderer({ spec, onIssues, ...options }: SpecRendererProps): import('react').ReactNode;

package/registry/blocks/dashboard-shell/dashboard-shell.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * The frame an admin app hangs off: a sidebar, a header with search, a theme toggle and an account
+ * menu, and the page itself. The sidebar sticks to the top of its column and folds away below the `md`
+ * breakpoint; nothing here is measured or positioned by script.
+ *
+ * `Box.Theme` is `use="local"` here, so the theme lands on this element and the block can sit inside a
+ * page that has its own. Move it to your root layout as `use="global"` for an app-wide switch.
+ */
+export interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: ReactElement;
+}
+export interface DashboardShellProps {
+    /** The heading above the page, and the `id` of the nav item that is marked as current. */
+    title: string;
+    current?: string;
+    children: ReactNode;
+}
+export default function DashboardShell({ title, current, children }: DashboardShellProps): import("react").JSX.Element;

package/registry/blocks/dashboard-shell/dashboard-stats.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The row of tiles above a dashboard. The shapes are `components/chart` primitives — an SVG each, no
+ * chart library — and there is no `'use client'` here on purpose: nothing in this file holds state, so
+ * it renders in a Server Component, styles and all.
+ */
+export interface Stat {
+    label: string;
+    value: string;
+    delta: string;
+    up: boolean;
+    trend: number[];
+}
+export default function DashboardStats(): import("react").JSX.Element;

package/registry/blocks/data-grid/invoice-rows.d.ts

@@ -0,0 +1,15 @@
+/** The rows the block is wired to. Replace this file with your own fetch — the grid reads plain objects. */
+export interface Invoice {
+    id: number;
+    reference: string;
+    customer: string;
+    team: string;
+    status: 'paid' | 'pending' | 'overdue';
+    amount: number;
+    issued: string;
+}
+/**
+ * Two hundred invoices generated from the index, so the block has something to sort, filter, group and
+ * total without shipping a data file — and every reload shows the same table.
+ */
+export declare const invoices: Invoice[];

package/registry/blocks/data-grid/invoices-grid.d.ts

@@ -0,0 +1 @@
+export default function InvoicesGrid(): import("react").JSX.Element;

package/registry/blocks/settings-form/settings-form.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A settings panel: text fields, a searchable select, a radio group, a slider and a switch, each a real
+ * form control. `Form` reads its own fields when it submits, so none of this needs state — `values` is
+ * built from the elements carrying a `name`.
+ *
+ * `<Toaster />` has to be mounted once near the root of the app for the confirmation to show.
+ */
+export interface Settings {
+    name: string;
+    email: string;
+    bio: string;
+    timezone: string;
+    theme: string;
+    density: string;
+    notify: boolean;
+}
+export default function SettingsForm(): import("react").JSX.Element;

package/spec.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./effects.cjs"),t=require("./specSchema.cjs"),n=require("./specData.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(function(e){let t=[`__proto__`,`constructor`,`prototype`],n=new Map;function r(e){if(!n.has(e))try{n.set(e,new RegExp(e))}catch{n.set(e,null)}return n.get(e)??null}function i(e){return!t.includes(e)}e.isSafeKey=i;function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}e.isPlainObject=a;function o(e,t){if(!e.$ref)return e;let n=e.$ref.startsWith(`#/$defs/`)?e.$ref.slice(8):null,r=n?t.$defs?.[n]:void 0;return r?o(r,t):null}function s(e,t,n){return!a(t)||e.required?.some(e=>!(e in t))?!1:Object.keys(t).every(r=>{let a=e.properties?.[r];return a?i(r)&&c(a,t[r],n):e.additionalProperties!==!1&&i(r)})}function c(e,t,n=e){let i=o(e,n);if(!i)return!1;if(i.anyOf)return i.anyOf.some(e=>c(e,t,n));if(i.enum&&!i.enum.includes(t))return!1;switch(i.type){case`string`:return typeof t==`string`?!i.pattern||(r(i.pattern)?.test(t)??!1):!1;case`number`:return typeof t==`number`&&Number.isFinite(t);case`integer`:return typeof t==`number`&&Number.isInteger(t);case`boolean`:return typeof t==`boolean`;case`array`:return Array.isArray(t)&&(!i.items||t.every(e=>c(i.items,e,n)));case`object`:return s(i,t,n);default:return t!==void 0}}e.matches=c})(a||={});var o=a,s;(function(e){function t(e){let t=JSON.stringify(e)??`undefined`;return t.length>40?`${t.slice(0,39)}…`:t}function r(e,t){return typeof e==`string`?{action:e}:!o.isPlainObject(e)||typeof e.action!=`string`?null:{action:e.action,payload:n.t.deep(e.payload,t)}}function i(e,i,a,s){let c=typeof e.type==`string`?e.type:void 0,l=[],u={},d={},f=i.props,p=f?.properties;if(o.isPlainObject(e.props))for(let[r,i]of Object.entries(e.props)){let e=`${s}.props.${r}`;if(!o.isSafeKey(r)){l.push({code:`unknown-prop`,path:e,component:c,prop:r,message:`${r} is not a prop a spec can set.`});continue}let d=p?.[r];if(!d&&(!f||f.additionalProperties===!1)){l.push({code:`unknown-prop`,path:e,component:c,prop:r,message:`${c??`The component`} has no ${r} prop.`});continue}let m=null,h=n.t.deep(i,a,e=>{m??=e});if(m){l.push({code:`unresolved-data`,path:e,component:c,prop:r,message:`${m} resolved to nothing.`});continue}if(d&&!o.matches(d,h,f)){l.push({code:`invalid-prop`,path:e,component:c,prop:r,message:`${t(h)} is not a value ${r} takes.`});continue}u[r]=h}if(o.isPlainObject(e.on))for(let[t,n]of Object.entries(e.on)){let e=`${s}.on.${t}`,o=i.events.includes(t)?r(n,a):null;if(!o){l.push({code:`unknown-event`,path:e,component:c,prop:t,message:`${c??`The component`} has no ${t} event.`});continue}d[t]=o}return{props:u,actions:d,issues:l,missing:(f?.required??[]).filter(e=>!(e in u))}}e.resolve=i})(s||={});var c=s,l=class extends r.Component{state={message:null,resetKey:this.props.resetKey};static getDerivedStateFromProps(e,t){return e.resetKey===t.resetKey?null:{message:null,resetKey:e.resetKey}}static getDerivedStateFromError(e){return{message:e instanceof Error?e.message:String(e)}}componentDidCatch(e){this.props.onError?.(this.issue(e instanceof Error?e.message:String(e)))}issue(e){return{code:`render-error`,path:this.props.path,component:this.props.component,message:e}}render(){return this.state.message===null?this.props.children:this.props.fallback(this.issue(this.state.message))}},u=1e3,d=32;function f(e,t){e.issues.push(t)}function p(e,t,n){f(e,t);let i=e.fallback(t);return n===void 0||i==null?i??null:(0,r.createElement)(r.Fragment,{key:n},i)}function m(e,t,r,i,a){if(e==null||typeof e==`boolean`)return null;if(typeof e==`string`||typeof e==`number`)return e;if(Array.isArray(e))return e.map((e,n)=>m(e,t,r,`${i}.${n}`,a));if(n.t.isRef(e)){let a=n.t.resolve(e,r);return a.found?a.value===null||a.value===void 0||typeof a.value==`boolean`?null:typeof a.value==`string`||typeof a.value==`number`?a.value:(f(t,{code:`invalid-child`,path:i,message:`${n.t.pathOf(e)} is not text.`}),null):(f(t,{code:`unresolved-data`,path:i,message:`${n.t.pathOf(e)} resolved to nothing.`}),null)}return o.isPlainObject(e)?`type`in e?typeof e.type==`string`?e.type===``?null:g(e,t,r,i,a,e.type):(f(t,{code:`invalid-child`,path:i,message:"A node names its component in `type`."}),null):null:(f(t,{code:`invalid-child`,path:i,message:`A child is a node, text, or a reference to text.`}),null)}function h(e,t,r,i,a,o){let s=e.repeat;if(!n.t.isRef(s))return p(t,{code:`invalid-repeat`,path:`${i}.repeat`,component:o,message:`A repeat is a reference to an array.`});let c=n.t.resolve(s,r);if(!c.found)return f(t,{code:`unresolved-data`,path:`${i}.repeat`,component:o,message:`${n.t.pathOf(s)} resolved to nothing.`}),null;if(!Array.isArray(c.value))return p(t,{code:`invalid-repeat`,path:`${i}.repeat`,component:o,message:`${n.t.pathOf(s)} is not an array.`});let l=typeof e.key==`string`?e.key:i;return c.value.map((n,s)=>_(e,t,{data:r.data,item:n,index:s,repeating:!0},i,a,o,`${l}#${s}`))}function g(e,t,n,r,i,a){return i>t.maxDepth?p(t,{code:`too-deep`,path:r,component:a,message:`Nested deeper than the ${t.maxDepth} levels allowed.`}):e.repeat===void 0?_(e,t,n,r,i,a,typeof e.key==`string`?e.key:r):h(e,t,n,r,i,a)}function _(e,t,n,a,s,u,d){if(t.nodes+=1,t.nodes>t.maxNodes)return t.overflowed||(t.overflowed=!0,f(t,{code:`too-many-nodes`,path:a,component:u,message:`More than the ${t.maxNodes} nodes allowed.`})),null;let h=t.registry.get(u);if(!h)return p(t,{code:`unknown-component`,path:a,component:u,message:`${u} is not a component this app allows.`},d);let g=c.resolve(e,h,n,a),_={...g.props};t.issues.push(...g.issues);let v=t.memory?.get(`${a}:${u}`);if(g.missing.length){if(!(v&&g.missing.every(e=>e in v))){let e=g.missing.join(`, `);return p(t,{code:`missing-prop`,path:a,component:u,prop:g.missing[0],message:`${u} cannot render without ${e}.`},d)}for(let e of g.missing)_[e]=v[e]}if(t.memory){let e=h.props?.required??[];e.length&&t.memory.set(`${a}:${u}`,Object.fromEntries(e.map(e=>[e,_[e]])))}for(let[e,n]of Object.entries(g.actions))_[e]=(...r)=>t.onAction?.(n.action,{payload:n.payload,args:r,prop:e,component:u,path:a});if(e.children!==void 0&&(h.slots.includes(`default`)?_.children=m(e.children,t,n,`${a}.children`,s+1):f(t,{code:`unknown-slot`,path:`${a}.children`,component:u,message:`${u} takes no children.`})),o.isPlainObject(e.slots))for(let[r,i]of Object.entries(e.slots)){let e=`${a}.slots.${r}`;if(!o.isSafeKey(r)||!h.slots.includes(r)){f(t,{code:`unknown-slot`,path:e,component:u,message:`${u} has no ${r} slot.`});continue}_[r==="default"?`children`:r]=m(i,t,n,e,s+1)}return(0,i.jsx)(l,{path:a,component:u,resetKey:t.resetKey,fallback:t.fallback,onError:t.onError,children:(0,r.createElement)(h.component,_)},d)}function v(e,t){let n={registry:t.registry,data:t.data,onAction:t.onAction,onError:t.onError,fallback:t.fallback??(()=>null),maxNodes:t.maxNodes??u,maxDepth:t.maxDepth??d,resetKey:t.resetKey,memory:t.memory,issues:[],nodes:0,overflowed:!1};return{element:m(e,n,{data:t.data},`spec`,0),issues:n.issues}}function y(t){let n=(0,r.useRef)(t);return e.n(()=>{n.current=t}),n}function b({spec:e,onIssues:t,...n}){let[i]=(0,r.useState)(()=>new Map),{element:a,issues:o}=v(e,{...n,memory:i,resetKey:e,onError:e=>t?.([e])}),s=y(t),c=y(o),l=o.map(e=>`${e.code} ${e.path} ${e.message}`).join(`
+`);return(0,r.useEffect)(()=>{s.current?.(c.current)},[l,c,s]),a}function x(e){return typeof e==`object`&&!!e&&`component`in e}function S(e,t,n){let r=x(t)?t:{component:t},i=n?.components[e];return{component:r.component,props:r.props??i?.props,slots:r.slots??i?.slots??[`default`],events:r.events??i?.events??[],description:r.description??i?.description}}function C(e){let t=Object.keys(e.components),n=new Map(t.map(t=>[t,S(t,e.components[t],e.catalog)]));return{names:t,components:Object.fromEntries([...n].map(([e,{component:t,...n}])=>[e,n])),get:e=>n.get(e)}}var w=o.matches;exports.SpecRenderer=b,exports.default=b,exports.createSpecRegistry=C,exports.matchesSchema=w,exports.renderSpec=v,exports.specSchema=t.t;

package/spec.d.ts

@@ -0,0 +1,12 @@
+import { default as SpecValidate } from './utils/spec/specValidate';
+export { default, default as SpecRenderer } from './react/spec/specRenderer';
+export type { SpecRendererProps } from './react/spec/specRenderer';
+export { renderSpec } from './react/spec/renderSpec';
+export type { SpecActionDetails, SpecActionHandler, SpecRenderOptions, SpecRenderResult } from './react/spec/renderSpec';
+export { default as createSpecRegistry } from './react/spec/specRegistry';
+export type { SpecComponent, SpecRegistry, SpecRegistryEntry, SpecRegistryOptions } from './react/spec/specRegistry';
+export { default as specSchema } from './utils/spec/specSchema';
+export type { SpecSchemaComponent, SpecSchemaOptions, SpecSchemaSource } from './utils/spec/specSchema';
+export type { SpecAction, SpecChild, SpecDataRef, SpecIndexRef, SpecIssue, SpecIssueCode, SpecItemRef, SpecNode, SpecRef, SpecRules, } from './utils/spec/specTypes';
+/** Whether a value is one a catalog schema allows: the check the renderer makes, for a host wanting it first. */
+export declare const matchesSchema: typeof SpecValidate.matches;