Add wippy/wc-content-kit module — auto-registered mermaid / markdown / chartjs web components

[AndrewKirkovski]

Summary

Adds a new framework module wippy/wc-content-kit that ships three auto-registered Wippy web components for content rendering in chat / artifacts / pages:

• <wippy-mermaid> — any Mermaid v11 diagram via the definition attribute (flowchart, sequence, class, state, ER, gantt, pie, mindmap, gitGraph, +12 more)
• <wippy-markdown> — GitHub-Flavored Markdown rendered through markdown-it + sanitize-html
• <wippy-chartjs> — universal Chart.js v4 wrapper supporting all 8 chart types (line / bar / doughnut / pie / radar / polarArea / scatter / bubble) from a single tag

An integrator drops the dependency in once and gets all three tags auto-registered everywhere chat content is rendered — no copy-paste, no per-app wiring:

- name: wc-content-kit
  kind: ns.dependency
  component: wippy/wc-content-kit
  version: '>=v0.1.0'
  parameters:
    - name: server
      value: app:gateway

Why this module exists

Today every Wippy-hosted app that wants Mermaid diagrams, rich Markdown, or Chart.js charts in chat content has to copy-paste three component packages out of app-template/frontend/web-components/ and wire them into its own static-build pipeline. Every version bump means re-syncing each integrator. The components themselves are stable, generic, and reusable — they just lived in the wrong place.

This is the first of an expected wc-*-kit family pattern (next likely siblings: wc-form-kit, wc-data-kit, …) — each kit groups related web components by domain, distinguished from backend modules by the wc- prefix.

What's in the module

src/wc-content-kit/
├─ wippy.yaml            organization/module/embed declaration
├─ _index.yaml           ns.requirement (server) + http.static
│                        (/wippy/wc-content-kit/) + 3× registry.entry
│                        with full props schemas + AI-ready descriptions
├─ Makefile              build / clean / per-component targets
├─ README.md             7-section reference (integration, per-tag
│                        attribute tables, 8-9 examples each, AI
│                        prompting notes, build instructions)
├─ frontend/
│   ├─ mermaid/          Vue 3 + Vite source (battle-tested copy)
│   ├─ markdown/         Vue 3 + Vite source (battle-tested copy)
│   └─ chartjs/          Vue 3 + Vite source (extended for universal use)
└─ public/
    ├─ mermaid/          pre-built bundles (committed; ship-ready)
    ├─ markdown/
    └─ chartjs/

Mermaid + markdown source carried over byte-identical from the battle-tested app-template/frontend/web-components/{mermaid,markdown}/ templates. Chartjs extended from chart-circle/ (single-purpose doughnut) into a universal Chart.js wrapper that:

• Registers all controllers, scales, elements via Chart.register(...registerables) (with idempotency guard)
• Falls back to the host CSS palette (--p-primary-500, --p-danger-500, --p-warn-500, --p-secondary-500, --p-accent-500 + 300 tones) when datasets omit backgroundColor
• Reads theme vars from the shadow root host (not document.documentElement)
• Renders inline error banners on JSON parse / Chart.js construction failures (host never throws)
• Defaults to responsive: true + maintainAspectRatio: false so charts fill host-sized wrappers

How auto-registration works

After the module is consumed via ns.dependency, on the next host start:

1. GET /api/public/components/list?auto_register=true includes the three new entries
2. The host injects a <script type=\"module\" src=\".../wippy/wc-content-kit/{name}/index.js?declare-tag=wippy-{name}\"> per component at boot
3. The bundle's define(import.meta.url, …) reads the ?declare-tag= query and calls customElements.define(…)
4. The host's chat sanitizer is fed each component's prop names from the manifest, so authored tags survive sanitization

Verification (live integration test)

Verified end-to-end in a real Wippy host running app-template:

• ✅ All three tags exposed via GET /api/public/components/list with auto_register: true and correct base URLs under /wippy/wc-content-kit/{name}/
• ✅ Bundles serve HTTP 200 from the http.static entry
• ✅ Custom elements registered, mounted in Shadow DOM, render expected content (SVGs / canvases / sanitized HTML)
• ✅ Theme palette inheritance works for chartjs (proper indigo / red / amber / slate / accent colors)
• ✅ Custom-color override per dataset works (backgroundColor: '#hex', rgba(...) for transparency, per-data-point color arrays)
• ✅ Error path produces inline banners instead of crashing (e.g. data='not-json' → Invalid data JSON: ...)
• ✅ Multi-instance rendering on the same page works (no Chart.register duplicate warnings, no Mermaid theme contamination in normal use)

Build

cd src/wc-content-kit
make build              # build all three components
make clean              # remove node_modules + dist + public
make clean-build        # full rebuild
make build-{mermaid|markdown|chartjs}   # per-component

Build outputs land in public/{name}/. The http.static entry serves them at /wippy/wc-content-kit/{name}/.