@tmorrow/cre8-wc 2.1.1 → 2.2.2

package/a2ui/catalog.compact.json

@@ -1,8 +1,8 @@
 {
   "contractVersion": 1,
-  "sourceCatalog": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.1.1",
-  "libraryVersion": "2.1.1",
-  "componentCount": 85,
+  "sourceCatalog": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.2.0",
+  "libraryVersion": "2.2.0",
+  "componentCount": 86,
   "components": [
     {
       "name": "cre8-accordion",
@@ -887,6 +887,30 @@
         "bottom"
       ]
     },
+    {
+      "name": "cre8-form",
+      "category": "Forms",
+      "props": {
+        "novalidate": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "controls": {
+          "type": "string"
+        },
+        "values": {
+          "type": "string"
+        }
+      },
+      "acceptsChildren": true,
+      "events": [
+        "form-submit",
+        "form-reset",
+        "form-invalid"
+      ]
+    },
     {
       "name": "cre8-global-nav",
       "category": "Navigation",

package/a2ui/catalog.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.1.1",
+  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.2.0",
   "title": "cre8-wc A2UI Catalog",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "x-native-events": [
@@ -54,7 +54,7 @@
   "x-a2ui": {
     "catalogId": "cre8-wc",
     "library": "@tmorrow/cre8-wc",
-    "libraryVersion": "2.1.1",
+    "libraryVersion": "2.2.0",
     "tagPrefix": "cre8",
     "framework": "Lit 3.3.1"
   },
@@ -188,6 +188,9 @@
         {
           "$ref": "#/$defs/components/cre8-field-note"
         },
+        {
+          "$ref": "#/$defs/components/cre8-form"
+        },
         {
           "$ref": "#/$defs/components/cre8-multi-select"
         },
@@ -4102,6 +4105,89 @@
         },
         "additionalProperties": false
       },
+      "cre8-form": {
+        "type": "object",
+        "title": "cre8-form",
+        "x-category": "Forms",
+        "description": "The form component groups form-associated Cre8 controls, aggregates their\nvalidation on submit, and orchestrates submit and reset.\n\n# How to Use\n1. Place any Cre8 form controls inside `cre8-form`. They may be nested inside\n   layout components such as `cre8-grid` or `cre8-layout`.\n2. Add a `cre8-button` with `type=\"submit\"` to submit the form.\n3. Listen for `form-submit` to receive the collected `FormData`.\n\nNote: this component renders to light DOM. A form-associated control's form\nowner is the nearest `<form>` in its own node tree, so a shadow-DOM `<form>`\nwould own nothing and `new FormData(form)` would come back empty.",
+        "required": [
+          "component"
+        ],
+        "properties": {
+          "component": {
+            "const": "cre8-form",
+            "description": "Component tag name"
+          },
+          "props": {
+            "type": "object",
+            "additionalProperties": false,
+            "properties": {
+              "novalidate": {
+                "description": "Skips aggregate validation on submit.",
+                "type": "boolean",
+                "x-kind": "attribute"
+              },
+              "disabled": {
+                "description": "Disables every control in the form, for example while submitting.",
+                "type": "boolean",
+                "x-kind": "attribute"
+              },
+              "controls": {
+                "description": "Every form-associated Cre8 control owned by this form, in document order.\nReaches through layout components because slotting does not move nodes\nout of the light-DOM tree.",
+                "type": "string",
+                "x-tsType": "Cre8FormElement[]",
+                "x-kind": "property"
+              },
+              "values": {
+                "description": "The form's current values, derived from FormData.",
+                "type": "string",
+                "x-tsType": "Record<string, FormDataEntryValue | FormDataEntryValue[]>",
+                "x-kind": "property"
+              }
+            }
+          },
+          "children": {
+            "type": "array",
+            "description": "The form's controls and layout.",
+            "items": {
+              "$ref": "#/$defs/Child"
+            }
+          },
+          "events": {
+            "type": "object",
+            "description": "Event bindings. Each key is an event name; the value names the handler to emit.",
+            "propertyNames": {
+              "anyOf": [
+                {
+                  "$ref": "#/$defs/NativeEventName"
+                },
+                {
+                  "enum": [
+                    "form-invalid",
+                    "form-reset",
+                    "form-submit"
+                  ]
+                }
+              ]
+            },
+            "additionalProperties": {
+              "$ref": "#/$defs/EventBinding"
+            }
+          }
+        },
+        "additionalProperties": false,
+        "x-events": {
+          "form-submit": {
+            "detail": {}
+          },
+          "form-reset": {
+            "detail": {}
+          },
+          "form-invalid": {
+            "detail": {}
+          }
+        }
+      },
       "cre8-multi-select": {
         "type": "object",
         "title": "cre8-multi-select",

package/a2ui/demo.html

@@ -8,13 +8,22 @@
       rel="stylesheet"
       href="../design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600&display=swap"
+    />
+
     <style>
       html,
       body {
         margin: 0;
         font-family:
-          system-ui,
-          -apple-system,
+          'Plus Jakarta Sans',
+          'Open Sans',
           sans-serif;
         height: 100vh;
       }

package/a2ui/generate-catalog-kg.mjs

@@ -0,0 +1,122 @@
+/**
+ * Generates catalog-kg.json - the knowledge-graph projection of the a2ui
+ * catalog that cre8-mcp's KG-backed handlers serve.
+ *
+ * Deterministic: same catalog.json in, same graph out. Runs after
+ * generate-catalog.mjs (which derives catalog.json from mcp-manifest.json),
+ * so `build:a2ui` keeps manifest -> catalog -> catalog-kg aligned.
+ *
+ * Graph shape (consumed by packages/cre8-mcp/src/handlers.ts and
+ * surface-routes.ts):
+ *   nodes: category (cat:<Name>), component (<tag>), slot (slot:<tag>:<name>),
+ *          enum_prop (prop:<tag>:<prop>)
+ *   edges: BELONGS_TO, HAS_SLOT, HAS_ENUM_PROP
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const catalogPath = resolve(__dirname, 'catalog.json');
+const pkgPath = resolve(__dirname, '..', 'package.json');
+const outPath = resolve(__dirname, 'catalog-kg.json');
+
+const catalog = JSON.parse(readFileSync(catalogPath, 'utf8'));
+const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+
+const components = catalog.$defs?.components ?? {};
+
+/** Collapses whitespace/newlines and truncates with an ellipsis. */
+const summarize = (text, max) => {
+    if (text == null) return null;
+    const flat = String(text).replace(/\s+/g, ' ').trim();
+    return flat.length > max ? `${flat.slice(0, max)}…` : flat;
+};
+
+const nodes = [];
+const edges = [];
+
+// Category nodes, alphabetical. Components without x-category land in Other.
+const categories = new Set();
+for (const def of Object.values(components)) {
+    categories.add(def['x-category'] || 'Other');
+}
+for (const label of [...categories].sort()) {
+    nodes.push({ id: `cat:${label}`, type: 'category', label });
+}
+
+// Component, slot, and enum-prop nodes in catalog order.
+for (const [tag, def] of Object.entries(components)) {
+    const category = def['x-category'] || 'Other';
+    const propDefs = def.properties?.props?.properties ?? {};
+    const slotNames = Object.keys(def.properties?.slots?.properties ?? {});
+    const slotDescriptions = def['x-slot-descriptions'] ?? {};
+
+    const props = {};
+    for (const [name, p] of Object.entries(propDefs)) {
+        props[name] = {
+            type: p.type ?? null,
+            enum: p.enum ?? null,
+            default: p.default ?? null,
+            description: summarize(p.description, 80),
+            'x-kind': p['x-kind'] ?? null,
+        };
+    }
+
+    nodes.push({
+        id: tag,
+        type: 'component',
+        category,
+        description: summarize(def.description, 120),
+        props,
+        slots: slotNames,
+        accepts_children: Boolean(def.properties?.children),
+    });
+    edges.push({ from: tag, to: `cat:${category}`, rel: 'BELONGS_TO' });
+
+    for (const slotName of slotNames) {
+        const id = `slot:${tag}:${slotName}`;
+        nodes.push({
+            id,
+            type: 'slot',
+            name: slotName,
+            component: tag,
+            description: slotDescriptions[slotName] ?? null,
+        });
+        edges.push({ from: tag, to: id, rel: 'HAS_SLOT' });
+    }
+
+    for (const [propName, p] of Object.entries(propDefs)) {
+        if (!Array.isArray(p.enum) || p.enum.length === 0) continue;
+        const id = `prop:${tag}:${propName}`;
+        nodes.push({
+            id,
+            type: 'enum_prop',
+            name: propName,
+            component: tag,
+            enum: p.enum,
+            description: summarize(p.description, 80),
+        });
+        edges.push({ from: tag, to: id, rel: 'HAS_ENUM_PROP' });
+    }
+}
+
+const kg = {
+    meta: {
+        generated_from: 'catalog.json',
+        catalog_id: 'cre8-wc',
+        library: pkg.name,
+        library_version: pkg.version,
+        total_nodes: nodes.length,
+        total_edges: edges.length,
+    },
+    nodes,
+    edges,
+};
+
+writeFileSync(outPath, `${JSON.stringify(kg, null, 2)}\n`, 'utf8');
+console.log(
+    `catalog-kg.json: ${nodes.length} nodes, ${edges.length} edges `
+  + `(${Object.keys(components).length} components, ${categories.size} categories)`,
+);