npm - @tmorrow/cre8-wc - Versions diffs - 2.0.2 → 2.0.4 - Mend

@tmorrow/cre8-wc 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/a2ui/catalog.json +5622 -0
package/a2ui/demo.html +287 -0
package/a2ui/generate-catalog.mjs +243 -0
package/a2ui/index.d.ts +4 -0
package/a2ui/index.js +2 -0
package/a2ui/index.ts +12 -0
package/a2ui/registry.d.ts +3 -0
package/a2ui/registry.js +166 -0
package/a2ui/registry.ts +182 -0
package/a2ui/renderer.d.ts +7 -0
package/a2ui/renderer.js +108 -0
package/a2ui/renderer.ts +156 -0
package/a2ui/smoke-test.mjs +238 -0
package/a2ui/types.d.ts +75 -0
package/a2ui/types.js +1 -0
package/a2ui/types.ts +80 -0
package/cdn/cre8-wc.esm.js +3363 -2861
package/cdn/cre8-wc.esm.js.map +1 -1
package/cdn/cre8-wc.min.js +765 -262
package/cdn/cre8-wc.min.js.map +1 -1
package/lib/a2ui/index.d.ts +5 -0
package/lib/a2ui/index.d.ts.map +1 -0
package/lib/a2ui/index.js +3 -0
package/lib/a2ui/index.js.map +1 -0
package/lib/a2ui/registry.d.ts +4 -0
package/lib/a2ui/registry.d.ts.map +1 -0
package/lib/a2ui/registry.js +167 -0
package/lib/a2ui/registry.js.map +1 -0
package/lib/a2ui/renderer.d.ts +8 -0
package/lib/a2ui/renderer.d.ts.map +1 -0
package/lib/a2ui/renderer.js +109 -0
package/lib/a2ui/renderer.js.map +1 -0
package/lib/a2ui/types.d.ts +76 -0
package/lib/a2ui/types.d.ts.map +1 -0
package/lib/a2ui/types.js +2 -0
package/lib/a2ui/types.js.map +1 -0
package/lib/components/icon/icon.d.ts +2 -1
package/lib/components/icon/icon.d.ts.map +1 -1
package/lib/components/icon/icon.js +56 -55
package/lib/components/icon/icon.js.map +1 -1
package/lib/vite.config.cdn.js +1 -1
package/lib/vite.config.cdn.js.map +1 -1
package/lib/vite.config.js +1 -1
package/lib/vite.config.js.map +1 -1
package/mcp-manifest.json +2 -2
package/package.json +15 -1

package/a2ui/demo.html ADDED Viewed

@@ -0,0 +1,287 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>cre8-wc A2UI renderer demo</title>
+    <link
+      rel="stylesheet"
+      href="../design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.css"
+    />
+    <style>
+      html,
+      body {
+        margin: 0;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        height: 100vh;
+      }
+      body {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+      }
+      header {
+        padding: 12px 20px;
+        border-bottom: 1px solid #e1e4e8;
+        display: flex;
+        align-items: baseline;
+        gap: 16px;
+      }
+      header h1 {
+        font-size: 16px;
+        margin: 0;
+      }
+      header .status {
+        font-size: 12px;
+        color: #6a737d;
+      }
+      main {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        overflow: hidden;
+      }
+      .panel {
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #e1e4e8;
+        overflow: hidden;
+      }
+      .panel:last-child {
+        border-right: none;
+      }
+      .panel h2 {
+        margin: 0;
+        padding: 10px 16px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #586069;
+        background: #f6f8fa;
+        border-bottom: 1px solid #e1e4e8;
+      }
+      .panel-body {
+        flex: 1;
+        padding: 16px;
+        overflow: auto;
+      }
+      textarea {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #d1d5da;
+        border-radius: 4px;
+        padding: 10px;
+        font-family: ui-monospace, 'SF Mono', monospace;
+        font-size: 12px;
+        line-height: 1.5;
+        resize: none;
+        box-sizing: border-box;
+      }
+      button {
+        padding: 6px 14px;
+        font-size: 13px;
+        border: 1px solid #d1d5da;
+        background: #fafbfc;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button:hover {
+        background: #f3f4f6;
+      }
+      .toolbar {
+        padding: 8px 16px;
+        display: flex;
+        gap: 8px;
+        border-bottom: 1px solid #e1e4e8;
+      }
+      .error {
+        color: #d73a49;
+        font-size: 12px;
+        padding: 8px 16px;
+        background: #ffeef0;
+        border-bottom: 1px solid #f97583;
+        white-space: pre-wrap;
+        font-family: ui-monospace, monospace;
+        display: none;
+      }
+      .error.visible {
+        display: block;
+      }
+      #event-log {
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .event-entry {
+        padding: 6px 0;
+        border-bottom: 1px dashed #e1e4e8;
+      }
+      .event-entry .evt-name {
+        color: #0366d6;
+        font-weight: 600;
+      }
+      .event-entry .evt-handler {
+        color: #22863a;
+      }
+      .event-entry .evt-path {
+        color: #6a737d;
+      }
+      .event-entry .evt-detail {
+        color: #24292e;
+      }
+      #output {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>cre8-wc A2UI renderer demo</h1>
+      <span class="status" id="status">loading…</span>
+    </header>
+    <main>
+      <section class="panel">
+        <h2>Spec (JSON)</h2>
+        <div class="toolbar">
+          <button id="render-btn">Render →</button>
+          <button id="reset-btn">Reset</button>
+        </div>
+        <div class="error" id="error"></div>
+        <div class="panel-body">
+          <textarea id="spec" spellcheck="false"></textarea>
+        </div>
+      </section>
+      <section class="panel">
+        <h2>Rendered output</h2>
+        <div class="panel-body" id="output"></div>
+      </section>
+      <section class="panel">
+        <h2>Events (onEvent callback)</h2>
+        <div class="panel-body" id="event-log">
+          <em style="color: #6a737d; font-size: 12px">
+            Interact with the rendered components to emit events.
+          </em>
+        </div>
+      </section>
+    </main>
+    <script type="module" src="../cdn/cre8-wc.esm.js"></script>
+    <script type="module">
+      import { registerCatalog, render } from './index.js';
+      const DEFAULT_SPEC = {
+        component: 'cre8-card',
+        slots: {
+          header: [
+            {
+              component: 'cre8-heading',
+              props: { type: 'headline-default', tagVariant: 'h2' },
+              children: ['Card heading'],
+            },
+          ],
+          default: [
+            {
+              component: 'cre8-alert',
+              props: { status: 'info', headerText: 'Heads up', ctaBody: 'Review your settings before saving.' },
+            },
+            {
+              component: 'cre8-button-group',
+              children: [
+                {
+                  component: 'cre8-button',
+                  props: { text: 'Save', variant: 'primary' },
+                  events: { click: 'save' },
+                },
+                {
+                  component: 'cre8-button',
+                  props: { text: 'Cancel', variant: 'tertiary' },
+                  events: { click: 'cancel' },
+                },
+              ],
+            },
+          ],
+        },
+      };
+      const $status = document.getElementById('status');
+      const $spec = document.getElementById('spec');
+      const $output = document.getElementById('output');
+      const $log = document.getElementById('event-log');
+      const $error = document.getElementById('error');
+      const $renderBtn = document.getElementById('render-btn');
+      const $resetBtn = document.getElementById('reset-btn');
+      $spec.value = JSON.stringify(DEFAULT_SPEC, null, 2);
+      let catalog;
+      try {
+        const schema = await fetch('./catalog.json').then((r) => r.json());
+        catalog = registerCatalog(schema);
+        $status.textContent = `catalog "${catalog.id}" · ${catalog.components.size} components`;
+      } catch (e) {
+        $status.textContent = 'failed to load catalog';
+        showError(e.message);
+        throw e;
+      }
+      function showError(msg) {
+        $error.textContent = msg;
+        $error.classList.add('visible');
+      }
+      function clearError() {
+        $error.textContent = '';
+        $error.classList.remove('visible');
+      }
+      function logEvent(e) {
+        const placeholder = $log.querySelector('em');
+        if (placeholder) placeholder.remove();
+        const entry = document.createElement('div');
+        entry.className = 'event-entry';
+        entry.innerHTML = `
+          <div><span class="evt-name">${escape(e.event)}</span> → <span class="evt-handler">${escape(e.handler)}</span></div>
+          <div class="evt-path">${escape(e.path)} <em>(${escape(e.component)})</em></div>
+          ${e.detail ? `<div class="evt-detail">detail: ${escape(JSON.stringify(e.detail))}</div>` : ''}
+        `;
+        $log.prepend(entry);
+      }
+      function escape(s) {
+        return String(s).replace(
+          /[&<>"']/g,
+          (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]
+        );
+      }
+      function doRender() {
+        clearError();
+        let spec;
+        try {
+          spec = JSON.parse($spec.value);
+        } catch (e) {
+          showError('JSON parse error: ' + e.message);
+          return;
+        }
+        try {
+          render(spec, catalog, { root: $output, onEvent: logEvent });
+        } catch (e) {
+          showError(e.message);
+        }
+      }
+      $renderBtn.addEventListener('click', doRender);
+      $resetBtn.addEventListener('click', () => {
+        $spec.value = JSON.stringify(DEFAULT_SPEC, null, 2);
+        doRender();
+      });
+      doRender();
+    </script>
+  </body>
+</html>

package/a2ui/generate-catalog.mjs ADDED Viewed

@@ -0,0 +1,243 @@
+#!/usr/bin/env node
+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 manifestPath = resolve(__dirname, '..', 'mcp-manifest.json');
+const outPath = resolve(__dirname, 'catalog.json');
+const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+const QUOTED_LITERAL = /^"([^"]*)"$/;
+const SELECT_OPTION_SCHEMA = {
+  type: 'object',
+  required: ['label', 'value'],
+  additionalProperties: false,
+  properties: {
+    label: { type: 'string' },
+    value: { type: ['string', 'number'] },
+  },
+};
+const SELECT_OPTION_GROUP_SCHEMA = {
+  type: 'object',
+  required: ['optGroupLabel', 'options'],
+  additionalProperties: false,
+  properties: {
+    optGroupLabel: { type: 'string' },
+    options: { type: 'array', items: SELECT_OPTION_SCHEMA },
+  },
+};
+const TS_TYPE_RESOLVERS = {
+  Cre8ChartType: {
+    type: 'string',
+    enum: ['line', 'bar', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter'],
+  },
+  Color: { type: 'string', enum: ['neutral', 'branded', 'neutral-hybrid'] },
+  Shape: { type: 'string', enum: ['round', 'square'] },
+  status: { type: 'string', enum: ['error', 'warning', 'success'] },
+  '(Cre8SelectOption | Cre8SelectOptionGroup)[]': {
+    type: 'array',
+    items: { oneOf: [SELECT_OPTION_SCHEMA, SELECT_OPTION_GROUP_SCHEMA] },
+  },
+};
+const PROP_OVERRIDES = {
+  'cre8-heading.type': {
+    type: 'string',
+    enum: [
+      'display-default',
+      'display-small',
+      'headline-large',
+      'headline-default',
+      'headline-small',
+      'title-xlarge',
+      'title-large',
+      'title-default',
+      'title-small',
+      'label-large',
+      'label',
+      'label-small',
+      'meta-large',
+      'meta-default',
+      'meta-small',
+    ],
+  },
+};
+function mapAttr(attr, componentName, propName, kind) {
+  const overrideKey = `${componentName}.${propName}`;
+  let out;
+  if (PROP_OVERRIDES[overrideKey]) {
+    out = { ...PROP_OVERRIDES[overrideKey] };
+    if (attr.description) out.description = attr.description.trim();
+    if (attr.default !== undefined) out.default = attr.default;
+  } else if (typeof attr.type === 'string' && TS_TYPE_RESOLVERS[attr.type]) {
+    out = { ...TS_TYPE_RESOLVERS[attr.type] };
+    if (attr.description) out.description = attr.description.trim();
+    if (attr.default !== undefined) out.default = attr.default;
+  } else {
+    out = mapAttrPlain(attr);
+  }
+  out['x-kind'] = kind;
+  return out;
+}
+function mapAttrPlain(attr) {
+  const schema = {};
+  if (attr.description) schema.description = attr.description.trim();
+  if (attr.default !== undefined) schema.default = attr.default;
+  if (Array.isArray(attr.values) && attr.values.length) {
+    schema.type = 'string';
+    schema.enum = attr.values;
+    return schema;
+  }
+  const t = attr.type;
+  if (t === 'boolean') { schema.type = 'boolean'; return schema; }
+  if (t === 'number') { schema.type = 'number'; return schema; }
+  if (t === 'string') { schema.type = 'string'; return schema; }
+  if (t === 'string[]') { schema.type = 'array'; schema.items = { type: 'string' }; return schema; }
+  if (t === 'string | number') { schema.type = ['string', 'number']; return schema; }
+  const lit = typeof t === 'string' ? t.match(QUOTED_LITERAL) : null;
+  if (lit) { schema.type = 'string'; schema.const = lit[1]; return schema; }
+  if (typeof t === 'string' && t.includes('|')) {
+    const parts = t.split('|').map((s) => s.trim());
+    const literals = parts.map((p) => p.match(QUOTED_LITERAL)?.[1]).filter(Boolean);
+    if (literals.length === parts.length) {
+      schema.type = 'string';
+      schema.enum = literals;
+      return schema;
+    }
+  }
+  schema.type = 'string';
+  schema['x-tsType'] = t;
+  return schema;
+}
+const SLOT_OVERRIDES = {
+  'cre8-card': { body: 'default' },
+};
+function normalizeSlotName(name, componentName) {
+  const unquoted = typeof name === 'string' ? name.replace(/^"|"$/g, '') : name;
+  const base = unquoted === '' ? 'default' : unquoted;
+  const override = componentName && SLOT_OVERRIDES[componentName]?.[base];
+  return override ?? base;
+}
+function buildComponent(c) {
+  const attrs = c.attributes || {};
+  const propsSchema = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {},
+  };
+  for (const [name, attr] of Object.entries(attrs)) {
+    propsSchema.properties[name] = mapAttr(attr, c.name, name, 'attribute');
+  }
+  for (const [name, attr] of Object.entries(c.properties || {})) {
+    if (propsSchema.properties[name]) continue;
+    propsSchema.properties[name] = mapAttr(attr, c.name, name, 'property');
+  }
+  const rawSlots = c.slots || {};
+  const slotNames = Object.keys(rawSlots).map((n) => normalizeSlotName(n, c.name));
+  const hasSlots = slotNames.length > 0;
+  const onlyDefault = slotNames.length === 1 && slotNames[0] === 'default';
+  const events = {};
+  for (const [name, evt] of Object.entries(c.events || {})) {
+    events[name] = { detail: evt.detail || {} };
+  }
+  const def = {
+    type: 'object',
+    title: c.name,
+    'x-category': c.category,
+    description: (c.description || '').trim(),
+    required: ['component'],
+    properties: {
+      component: { const: c.name, description: 'Component tag name' },
+      props: propsSchema,
+    },
+    additionalProperties: false,
+  };
+  if (onlyDefault) {
+    def.properties.children = {
+      type: 'array',
+      description: (rawSlots.default?.description || '').trim() || 'Child instances rendered into the default slot.',
+      items: { $ref: '#/$defs/Component' },
+    };
+  } else if (hasSlots) {
+    const slotProps = {};
+    const slotDescriptions = {};
+    for (const [rawName, slot] of Object.entries(rawSlots)) {
+      const name = normalizeSlotName(rawName, c.name);
+      slotProps[name] = {
+        type: 'array',
+        description: (slot.description || '').trim(),
+        items: { $ref: '#/$defs/Component' },
+      };
+      slotDescriptions[name] = (slot.description || '').trim();
+    }
+    def.properties.slots = {
+      type: 'object',
+      description: 'Named slot content. Each key is a slot name; value is an array of component instances rendered into that slot.',
+      additionalProperties: false,
+      properties: slotProps,
+    };
+    def['x-slot-descriptions'] = slotDescriptions;
+  }
+  if (Object.keys(events).length) def['x-events'] = events;
+  return def;
+}
+const components = {};
+const componentRefs = [];
+for (const c of manifest.components) {
+  components[c.name] = buildComponent(c);
+  componentRefs.push({ $ref: `#/$defs/components/${c.name}` });
+}
+const catalog = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  $id: `https://cre8.dev/a2ui/catalogs/cre8-wc/${manifest.version}`,
+  title: 'cre8-wc A2UI Catalog',
+  description: manifest.description,
+  'x-a2ui': {
+    catalogId: 'cre8-wc',
+    library: manifest.library,
+    libraryVersion: manifest.version,
+    tagPrefix: manifest.tagPrefix,
+    framework: manifest.framework,
+  },
+  type: 'object',
+  required: ['root'],
+  properties: {
+    root: { $ref: '#/$defs/Component' },
+  },
+  $defs: {
+    Component: {
+      description: 'A component instance in the cre8-wc catalog.',
+      oneOf: componentRefs,
+    },
+    components,
+  },
+};
+writeFileSync(outPath, JSON.stringify(catalog, null, 2) + '\n');
+console.log(
+  `Wrote ${outPath} (${manifest.components.length} components, ${(JSON.stringify(catalog).length / 1024).toFixed(1)} KB)`
+);

package/a2ui/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { CatalogComponentDef, CatalogSchema, ComponentSpec, EmittedEvent, EventBinding, PropSchema, RegisteredCatalog, } from './types.js';
+export { registerCatalog, validateSpec } from './registry.js';
+export { render } from './renderer.js';
+export type { RenderOptions } from './renderer.js';

package/a2ui/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { registerCatalog, validateSpec } from './registry.js';
2	+ export { render } from './renderer.js';

package/a2ui/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export type {
+  CatalogComponentDef,
+  CatalogSchema,
+  ComponentSpec,
+  EmittedEvent,
+  EventBinding,
+  PropSchema,
+  RegisteredCatalog,
+} from './types.js';
+export { registerCatalog, validateSpec } from './registry.js';
+export { render } from './renderer.js';
+export type { RenderOptions } from './renderer.js';

package/a2ui/registry.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { CatalogSchema, ComponentSpec, RegisteredCatalog } from './types.js';
+export declare function registerCatalog(schema: CatalogSchema): RegisteredCatalog;
+export declare function validateSpec(spec: unknown, catalog: RegisteredCatalog, path?: string): asserts spec is ComponentSpec;