@ripple-ui/svelte 0.8.2 → 0.9.0-next.0

package/dist/discover/whatsapp-card.js

@@ -0,0 +1,226 @@
+// discover/whatsapp-card.ts — the WhatsApp QR card (WhatsAppQrCard) as pure logic,
+// shared by the app's /discover hero and the public Discover page:
+//   - the calling codes offered (sorted by country name), the default country from
+//     the browser's languages (en-GB → GB, else India), and the country a pasted
+//     international number starts with (longest code wins; a code several countries
+//     share, like +1, keeps the country already picked);
+//   - the number: a pasted "+44 7700 900123" or "0044…" splits into country and
+//     number; separators and trunk zeros go; the whole E.164 number is 8-15 digits;
+//   - the wa.me link (with the optional pre-filled message), the line printed under
+//     the shop name, and the download file names;
+//   - the printed card: a 148 × 105 mm counter card laid out once in millimetres
+//     (cardLayout) and drawn from that layout as SVG (cardSvg) and print page
+//     (cardPrintHtml) here, and as a PNG by ./whatsapp-card-export. The card is
+//     always dark ink on white paper, whatever the host theme.
+// Nothing here touches the DOM, so it runs on the server too.
+import { qrPath } from './whatsapp-qr.js';
+export const DIAL_CODES = [
+    { iso: 'AF', name: 'Afghanistan', code: '93' },
+    { iso: 'DZ', name: 'Algeria', code: '213' },
+    { iso: 'AR', name: 'Argentina', code: '54' },
+    { iso: 'AU', name: 'Australia', code: '61' },
+    { iso: 'AT', name: 'Austria', code: '43' },
+    { iso: 'BH', name: 'Bahrain', code: '973' },
+    { iso: 'BD', name: 'Bangladesh', code: '880' },
+    { iso: 'BE', name: 'Belgium', code: '32' },
+    { iso: 'BR', name: 'Brazil', code: '55' },
+    { iso: 'CA', name: 'Canada', code: '1' },
+    { iso: 'CL', name: 'Chile', code: '56' },
+    { iso: 'CN', name: 'China', code: '86' },
+    { iso: 'CO', name: 'Colombia', code: '57' },
+    { iso: 'CZ', name: 'Czechia', code: '420' },
+    { iso: 'DK', name: 'Denmark', code: '45' },
+    { iso: 'EG', name: 'Egypt', code: '20' },
+    { iso: 'ET', name: 'Ethiopia', code: '251' },
+    { iso: 'FI', name: 'Finland', code: '358' },
+    { iso: 'FR', name: 'France', code: '33' },
+    { iso: 'DE', name: 'Germany', code: '49' },
+    { iso: 'GH', name: 'Ghana', code: '233' },
+    { iso: 'GR', name: 'Greece', code: '30' },
+    { iso: 'HK', name: 'Hong Kong', code: '852' },
+    { iso: 'HU', name: 'Hungary', code: '36' },
+    { iso: 'IN', name: 'India', code: '91' },
+    { iso: 'ID', name: 'Indonesia', code: '62' },
+    { iso: 'IQ', name: 'Iraq', code: '964' },
+    { iso: 'IE', name: 'Ireland', code: '353' },
+    { iso: 'IL', name: 'Israel', code: '972' },
+    { iso: 'IT', name: 'Italy', code: '39' },
+    { iso: 'JP', name: 'Japan', code: '81' },
+    { iso: 'JO', name: 'Jordan', code: '962' },
+    { iso: 'KE', name: 'Kenya', code: '254' },
+    { iso: 'KW', name: 'Kuwait', code: '965' },
+    { iso: 'LB', name: 'Lebanon', code: '961' },
+    { iso: 'MY', name: 'Malaysia', code: '60' },
+    { iso: 'MX', name: 'Mexico', code: '52' },
+    { iso: 'MA', name: 'Morocco', code: '212' },
+    { iso: 'NP', name: 'Nepal', code: '977' },
+    { iso: 'NL', name: 'Netherlands', code: '31' },
+    { iso: 'NZ', name: 'New Zealand', code: '64' },
+    { iso: 'NG', name: 'Nigeria', code: '234' },
+    { iso: 'NO', name: 'Norway', code: '47' },
+    { iso: 'OM', name: 'Oman', code: '968' },
+    { iso: 'PK', name: 'Pakistan', code: '92' },
+    { iso: 'PE', name: 'Peru', code: '51' },
+    { iso: 'PH', name: 'Philippines', code: '63' },
+    { iso: 'PL', name: 'Poland', code: '48' },
+    { iso: 'PT', name: 'Portugal', code: '351' },
+    { iso: 'QA', name: 'Qatar', code: '974' },
+    { iso: 'RO', name: 'Romania', code: '40' },
+    { iso: 'RU', name: 'Russia', code: '7' },
+    { iso: 'SA', name: 'Saudi Arabia', code: '966' },
+    { iso: 'SG', name: 'Singapore', code: '65' },
+    { iso: 'ZA', name: 'South Africa', code: '27' },
+    { iso: 'KR', name: 'South Korea', code: '82' },
+    { iso: 'ES', name: 'Spain', code: '34' },
+    { iso: 'LK', name: 'Sri Lanka', code: '94' },
+    { iso: 'SE', name: 'Sweden', code: '46' },
+    { iso: 'CH', name: 'Switzerland', code: '41' },
+    { iso: 'TW', name: 'Taiwan', code: '886' },
+    { iso: 'TZ', name: 'Tanzania', code: '255' },
+    { iso: 'TH', name: 'Thailand', code: '66' },
+    { iso: 'TR', name: 'Türkiye', code: '90' },
+    { iso: 'UG', name: 'Uganda', code: '256' },
+    { iso: 'UA', name: 'Ukraine', code: '380' },
+    { iso: 'AE', name: 'United Arab Emirates', code: '971' },
+    { iso: 'GB', name: 'United Kingdom', code: '44' },
+    { iso: 'US', name: 'United States', code: '1' },
+    { iso: 'VN', name: 'Vietnam', code: '84' },
+    { iso: 'ZW', name: 'Zimbabwe', code: '263' },
+];
+export const DEFAULT_DIAL_ISO = 'IN';
+export const dialCodeFor = (iso) => DIAL_CODES.find((d) => d.iso === iso) ?? DIAL_CODES.find((d) => d.iso === DEFAULT_DIAL_ISO);
+/** The first browser language with a region we list (en-GB → GB), else India. */
+export function defaultDialIso(languages) {
+    for (const tag of languages ?? []) {
+        const region = tag.split(/[-_]/)[1]?.toUpperCase();
+        if (region && DIAL_CODES.some((d) => d.iso === region))
+            return region;
+    }
+    return DEFAULT_DIAL_ISO;
+}
+/** The listed country an international number's digits start with, longest code
+ *  first; `current` wins among countries that share the matched code. */
+export function matchDialCode(digits, current) {
+    for (let len = 3; len >= 1; len--) {
+        const code = digits.slice(0, len);
+        const hits = DIAL_CODES.filter((d) => d.code === code);
+        if (hits.length)
+            return hits.find((d) => d.iso === current) ?? hits[0];
+    }
+    return null;
+}
+// ── The number and the link ─────────────────────────────────────────────────
+export const SHOP_MAX = 28;
+export const MESSAGE_MAX = 200;
+export const DEFAULT_SHOP = 'Sharma Sweets';
+export const DEFAULT_MESSAGE = "Hi! I'd like to place an order.";
+/** The example number the server renders, so a page with JS off shows a real card. */
+export const EXAMPLE_PHONE = '98765 43210';
+/** E.164 allows at most 15 digits; below 8 no real number is complete. */
+export const E164_MIN = 8;
+export const E164_MAX = 15;
+/** The national part as digits: separators dropped, trunk zeros dropped. */
+export const nationalDigits = (raw) => raw.replace(/\D/g, '').replace(/^0+/, '');
+/** A pasted international number ("+44 7700 900123", "0044 7700 900123") split into
+ *  the listed country it starts with and the rest. Null for a national number, or an
+ *  international one whose code we don't list. */
+export function splitInternational(raw, currentIso) {
+    const t = raw.trim();
+    if (!t.startsWith('+') && !t.startsWith('00'))
+        return null;
+    const digits = t.replace(/\D/g, '').replace(/^00/, '');
+    const match = matchDialCode(digits, currentIso);
+    if (!match)
+        return null;
+    return { iso: match.iso, national: nationalDigits(digits.slice(match.code.length)) };
+}
+/** "+91 98765 43210": ten-digit numbers split 5 + 5, others in fours from the end. */
+export function formatLine(code, national) {
+    const groups = national.length === 10 ? [national.slice(0, 5), national.slice(5)] : (national.match(/\d{1,4}(?=(\d{4})*$)/g) ?? []);
+    return `+${code} ${groups.join(' ')}`;
+}
+export function checkPhone(code, raw) {
+    const national = nationalDigits(raw);
+    if (!national)
+        return { ok: false, error: raw.trim() ? 'Enter the number in digits.' : null };
+    const total = code.length + national.length;
+    if (total < E164_MIN || national.length < 4)
+        return { ok: false, error: 'That number looks too short.' };
+    if (total > E164_MAX)
+        return { ok: false, error: 'That number is too long.' };
+    return { ok: true, digits: code + national, line: formatLine(code, national) };
+}
+/** https://wa.me/<digits>, with ?text= when there is a message. */
+export function waLink(digits, message) {
+    const text = message.trim().slice(0, MESSAGE_MAX);
+    return `https://wa.me/${digits}${text ? `?text=${encodeURIComponent(text)}` : ''}`;
+}
+/** `<shop>-whatsapp-qr.<ext>`, slugified; `whatsapp-qr.<ext>` for a name with no letters. */
+export function cardFilename(shop, ext) {
+    const slug = shop
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 50);
+    return `${slug ? `${slug}-` : ''}whatsapp-qr.${ext}`;
+}
+// ── The printed card ────────────────────────────────────────────────────────
+export const CARD_MM = { width: 148, height: 105 };
+export const PNG_DPI = 300;
+/** Pixels per millimetre at the PNG's resolution. */
+export const PX_PER_MM = PNG_DPI / 25.4;
+/** 148 × 105 mm at 300 dpi. */
+export const CARD_PX = {
+    width: Math.round(CARD_MM.width * PX_PER_MM),
+    height: Math.round(CARD_MM.height * PX_PER_MM),
+};
+export const CARD_INK = '#111111';
+export const CARD_PAPER = '#ffffff';
+export const CARD_MUTED = '#555555';
+export const CARD_EDGE = '#d4d4d4';
+export const CARD_FONT = 'Helvetica, Arial, sans-serif';
+export const CARD_CTA = 'Scan to order on WhatsApp →';
+export const DEFAULT_BRAND = 'Paw';
+/** The small print at the card's foot, naming the host's product. */
+export const cardFooter = (brand = DEFAULT_BRAND) => `Made with ${brand} · pocketpaw.xyz`;
+const MARGIN = 10;
+const QR_SIDE = 56;
+const COLUMN = CARD_MM.width - MARGIN * 3 - QR_SIDE;
+/** A rough average glyph width for a bold sans, as a share of the font size. */
+const BOLD_GLYPH = 0.6;
+export function cardLayout(input) {
+    const shop = input.shop.trim() || 'Your shop';
+    const shopSize = Math.min(10, COLUMN / (BOLD_GLYPH * Math.max(1, shop.length)));
+    return {
+        width: CARD_MM.width,
+        height: CARD_MM.height,
+        texts: [
+            { text: shop, x: MARGIN, y: 34, size: shopSize, weight: 700, color: CARD_INK, maxWidth: COLUMN },
+            { text: input.line, x: MARGIN, y: 46, size: 5, weight: 400, color: CARD_INK, maxWidth: COLUMN },
+            { text: CARD_CTA, x: MARGIN, y: 62, size: 3.6, weight: 700, color: CARD_INK, maxWidth: COLUMN },
+            { text: cardFooter(input.brand), x: MARGIN, y: CARD_MM.height - MARGIN, size: 3, weight: 400, color: CARD_MUTED, maxWidth: COLUMN },
+        ],
+        qr: { x: CARD_MM.width - MARGIN - QR_SIDE, y: (CARD_MM.height - QR_SIDE) / 2, size: QR_SIDE, path: qrPath(input.link) },
+    };
+}
+const xml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const n = (v) => String(Math.round(v * 1000) / 1000);
+/** The card as a standalone SVG document, sized in millimetres for print. */
+export function cardSvg(layout) {
+    const { qr } = layout;
+    const texts = layout.texts
+        .map((t) => `<text x="${n(t.x)}" y="${n(t.y)}" font-family="${CARD_FONT}" font-size="${n(t.size)}" font-weight="${t.weight}" fill="${t.color}">${xml(t.text)}</text>`)
+        .join('');
+    return (`<svg xmlns="http://www.w3.org/2000/svg" width="${layout.width}mm" height="${layout.height}mm" viewBox="0 0 ${layout.width} ${layout.height}">` +
+        `<rect x="0.15" y="0.15" width="${n(layout.width - 0.3)}" height="${n(layout.height - 0.3)}" rx="3" fill="${CARD_PAPER}" stroke="${CARD_EDGE}" stroke-width="0.3"/>` +
+        texts +
+        `<g transform="translate(${n(qr.x)} ${n(qr.y)}) scale(${n(qr.size / qr.path.size)})"><path d="${qr.path.d}" fill="${CARD_INK}" shape-rendering="crispEdges"/></g>` +
+        `</svg>`);
+}
+/** The print document: one card on a 148 × 105 mm page, nothing else. */
+export function cardPrintHtml(layout, title) {
+    const safeTitle = title.replace(/[<&]/g, '');
+    return (`<!doctype html><html><head><meta charset="utf-8"><title>${safeTitle}</title>` +
+        `<style>@page{size:148mm 105mm;margin:0}html,body{margin:0;padding:0;background:${CARD_PAPER}}svg{display:block;width:148mm;height:105mm}</style>` +
+        `</head><body>${cardSvg(layout)}</body></html>`);
+}

package/dist/discover/whatsapp-qr.d.ts

@@ -0,0 +1,7 @@
+export interface QrPath {
+    /** Modules per side. */
+    size: number;
+    /** SVG path data in module units. */
+    d: string;
+}
+export declare function qrPath(text: string): QrPath;

package/dist/discover/whatsapp-qr.js

@@ -0,0 +1,20 @@
+// discover/whatsapp-qr.ts — the one QR encoder behind WhatsAppQrCard: text in, an
+// SVG path out (one 1×1 square per dark module, in module units, no quiet zone). The
+// same path draws the on-screen preview, the downloadable SVG and, through Path2D,
+// the PNG, so all three come from the same code. Synchronous and DOM-free, so a
+// $derived can call it and the server renders a real QR.
+//
+// Uses the package's existing `qrcode-svg` dependency for the module matrix only
+// (its own SVG writer is not used), error correction M. Its matrix is indexed
+// [row][col]; the path draws x = col, y = row (qrcode-svg's own writer transposes).
+import QRCode from 'qrcode-svg';
+export function qrPath(text) {
+    const modules = new QRCode({ content: text, ecl: 'M', padding: 0 }).qrcode.modules;
+    let d = '';
+    for (let r = 0; r < modules.length; r++) {
+        for (let c = 0; c < modules.length; c++)
+            if (modules[r][c])
+                d += `M${c} ${r}h1v1h-1z`;
+    }
+    return { size: modules.length, d };
+}

package/dist/figures/bike-gears/figure.js

@@ -24,6 +24,7 @@
 // `scripts/capture-figure.ts` and `scripts/score-figure.ts` read.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { clampParams, crankSpeedOf, describe, poseAt, poseOf, ratioOf, readoutsOf, ringTeethAt, teethAt, CASSETTE, RINGS } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -584,12 +585,7 @@ function anchorPoints() {
 const STYLE_ID = 'ripple-iso-bike-css';
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + BIKE_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + BIKE_CSS);
     let params = clampParams(initial);
     const svg = doc.importNode(new DOMParser().parseFromString(bikeSvg(params), 'image/svg+xml').documentElement, true);
     el.classList.add('iso');

package/dist/figures/fission-reactor/figure.js

@@ -21,6 +21,7 @@
 // No DOM or work at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { clampParams, describe, readoutsOf, stateOf } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -685,12 +686,7 @@ const SPIN = { pump: 5, turbine: 6, fan: 2.4 };
 const DASH = 7;
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + REACTOR_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + REACTOR_CSS);
     let params = clampParams(initial);
     const svg = doc.importNode(new DOMParser().parseFromString(reactorSvg(params), 'image/svg+xml').documentElement, true);
     el.classList.add('iso');

package/dist/figures/heart/figure.js

@@ -15,6 +15,7 @@
 // oxygen-poor, red oxygen-rich). No DOM at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { clampParams, describe, readoutsOf, stateAt, stillTime, timingOf } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -442,12 +443,7 @@ const STYLE_ID = 'ripple-iso-heart-css';
 const FLOW_PX = 0.22; // dash px per ml/s
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + HEART_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + HEART_CSS);
     let params = clampParams(initial);
     const parsed = new DOMParser().parseFromString(heartSvg(params), 'image/svg+xml').documentElement;
     const svg = doc.importNode(parsed, true);

package/dist/figures/ion-thruster/figure.js

@@ -20,6 +20,7 @@
 // work at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { beamSpeedOf, clampParams, densityOf, describe, readoutsOf, thrustOf, DRIFT, STILL_T } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -529,12 +530,7 @@ const STYLE_ID = 'ripple-iso-ion-thruster-css';
 const XENON_PX = 5; // dash px a second per mg/s
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + ION_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + ION_CSS);
     let params = clampParams(initial);
     const svg = doc.importNode(new DOMParser().parseFromString(ionSvg(params), 'image/svg+xml').documentElement, true);
     el.classList.add('iso');

package/dist/figures/particle-collider/figure.js

@@ -20,6 +20,7 @@
 // work at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { bunchesAt, burstsAt, clampParams, describe, fieldOf, readoutsOf, stillTime } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -669,12 +670,7 @@ function anchorPoints() {
 const STYLE_ID = 'ripple-iso-collider-css';
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + COLLIDER_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + COLLIDER_CSS);
     let params = clampParams(initial);
     const win = doc.defaultView;
     const still = win?.matchMedia?.('(prefers-reduced-motion: reduce)');

package/dist/figures/rocket-engine/figure.js

@@ -19,6 +19,7 @@
 // needle, and moves the flow dashes. No DOM or work at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { clampParams, describe, plumeOf, readoutsOf, shaftSpeedOf, stateOf } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -766,12 +767,7 @@ const STYLE_ID = 'ripple-iso-rocket-css';
 const FLOW_PX = 0.08; // dash px a second per kg/s
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + ENGINE_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + ENGINE_CSS);
     let params = clampParams(initial);
     const svg = doc.importNode(new DOMParser().parseFromString(engineSvg(params), 'image/svg+xml').documentElement, true);
     el.classList.add('iso');

package/dist/figures/style.d.ts

@@ -0,0 +1,2 @@
+/** Adds `css` as `<style id={id}>` to the root `el` renders in, unless that root already has it. */
+export declare function addFigureStyle(el: HTMLElement, id: string, css: string): void;

package/dist/figures/style.js

@@ -0,0 +1,18 @@
+// figures/style.ts: puts a figure's stylesheet where the figure can see it. A
+// figure inside a shadow root (the @ripple-ui/embed card) never reads
+// document.head, so its <style> goes into that shadow root; anywhere else it
+// goes into the document head. One copy per root, keyed by the style id, so two
+// embeds on a page each get their own. The embed's destroy() empties its root,
+// which takes the copy with it; the next mount adds it back.
+/** Adds `css` as `<style id={id}>` to the root `el` renders in, unless that root already has it. */
+export function addFigureStyle(el, id, css) {
+    const doc = el.ownerDocument;
+    const root = el.getRootNode();
+    const shadow = root instanceof ShadowRoot ? root : null;
+    if ((shadow ?? doc).getElementById(id))
+        return;
+    const style = doc.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    (shadow ?? doc.head).appendChild(style);
+}

package/dist/figures/tokamak/figure.js

@@ -26,6 +26,7 @@
 // from the model's temperature. No DOM or work at module top level.
 import * as k from '@ripple-ui/core/iso';
 import { frameOf, framed, percentIn } from '../frame.js';
+import { addFigureStyle } from '../style.js';
 import { beamSpeedOf, clampParams, describe, glowOf, readoutsOf, solve, streamSpeedOf, twistAt } from './model.js';
 export const WIDTH = 640;
 export const HEIGHT = 420;
@@ -667,12 +668,7 @@ function anchorPoints() {
 const STYLE_ID = 'ripple-iso-tokamak-css';
 export function mount(el, { theme = 'dark', params: initial, onReadout } = {}) {
     const doc = el.ownerDocument;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = k.ISO_CSS + TOKAMAK_CSS;
-        doc.head.appendChild(style);
-    }
+    addFigureStyle(el, STYLE_ID, k.ISO_CSS + TOKAMAK_CSS);
     let params = clampParams(initial);
     const svg = doc.importNode(new DOMParser().parseFromString(tokamakSvg(params), 'image/svg+xml').documentElement, true);
     el.classList.add('iso');

package/dist/manifest/entries/chart.js

@@ -7,7 +7,7 @@ export const chartEntry = {
         type: { type: '"bar" | "line" | "area" | "pie" | "donut" | "candlestick" | "sparkline" | "heatmap" | "gauge" | "radar"', required: false, description: 'Chart type. Default "bar".' },
         title: { type: 'string', required: false, description: 'Chart title.' },
         height: { type: 'number', required: false, description: 'Height in px. Default 200.' },
-        colors: { type: 'string[]', required: false, description: 'Palette in order: one per series when points carry `series`, one per slice on pie/donut. On one series (bar, line) every point wears the first colour; give two or more to colour points individually. Default palette is categorical, no status colours.' },
+        colors: { type: 'string[]', required: false, description: 'Palette in order: one per series when points carry `series`, one per slice on pie/donut. On one series (bar, line) every point wears the first colour; give two or more to colour points individually. Default palette is the theme\'s chart-1 to chart-5 (brand blue first), then categorical; no status colours.' },
         reference: { type: 'string | string[]', required: false, description: 'Series keys that are a reference, not data (a target, plan or benchmark): drawn muted and dashed, outside the palette order.' },
         tooltip: { type: 'boolean', required: false, description: 'Show tooltip on hover. Default true.' },
     },

package/dist/manifest/entries/markdown.js

@@ -1,9 +1,9 @@
 export const markdownEntry = {
     type: 'markdown',
     category: 'display',
-    description: 'Render markdown with GFM support (tables, strikethrough, autolinks, task lists).',
+    description: 'Render markdown with GFM (tables, strikethrough, autolinks, task lists), LaTeX math and mermaid diagrams.',
     props: {
-        content: { type: 'string', required: false, description: 'Markdown source.' },
+        content: { type: 'string', required: false, description: 'Markdown source. Math: $x$ inline, $$x$$ on its own lines for display; a bare number like $5 stays text. A ```mermaid fence draws as a diagram.' },
         text: { type: 'string', required: false, description: 'Alias for content.' },
         gfm: { type: 'boolean', required: false, description: 'Enable GitHub-Flavored Markdown. Default true.' },
     },

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "schema": "ripple.manifest/v1",
-  "version": "0.8.2",
-  "generatedAt": "2026-10-28T15:31:10.672Z",
+  "version": "0.9.0-next.0",
+  "generatedAt": "2026-10-31T10:56:56.990Z",
   "spec": {
     "uiField": "ui",
     "stateField": "state",
@@ -1907,7 +1907,7 @@
         "colors": {
           "type": "string[]",
           "required": false,
-          "description": "Palette in order: one per series when points carry `series`, one per slice on pie/donut. On one series (bar, line) every point wears the first colour; give two or more to colour points individually. Default palette is categorical, no status colours."
+          "description": "Palette in order: one per series when points carry `series`, one per slice on pie/donut. On one series (bar, line) every point wears the first colour; give two or more to colour points individually. Default palette is the theme's chart-1 to chart-5 (brand blue first), then categorical; no status colours."
         },
         "reference": {
           "type": "string | string[]",
@@ -8287,12 +8287,12 @@
     {
       "type": "markdown",
       "category": "display",
-      "description": "Render markdown with GFM support (tables, strikethrough, autolinks, task lists).",
+      "description": "Render markdown with GFM (tables, strikethrough, autolinks, task lists), LaTeX math and mermaid diagrams.",
       "props": {
         "content": {
           "type": "string",
           "required": false,
-          "description": "Markdown source."
+          "description": "Markdown source. Math: $x$ inline, $$x$$ on its own lines for display; a bare number like $5 stays text. A ```mermaid fence draws as a diagram."
         },
         "text": {
           "type": "string",

package/dist/styles.css

@@ -90,11 +90,12 @@
   --border: hsl(0 0% 89.8%);
   --input: hsl(0 0% 89.8%);
   --ring: hsl(0 0% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
+  /* Brand-led categorical slots: Paw blue first, then teal, amber, violet, slate. */
+  --chart-1: #1877f2;
+  --chart-2: #0d9488;
+  --chart-3: #d97706;
+  --chart-4: #7c3aed;
+  --chart-5: #64748b;
   --radius: 0.625rem;
   --sidebar-background: hsl(0 0% 98%);
   --sidebar-foreground: hsl(240 5.3% 26.1%);
@@ -130,11 +131,11 @@
   --border: hsl(0 0% 14.9%);
   --input: hsl(0 0% 14.9%);
   --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
+  --chart-1: #4c96ff;
+  --chart-2: #2dd4bf;
+  --chart-3: #fbbf24;
+  --chart-4: #a78bfa;
+  --chart-5: #94a3b8;
   --sidebar-background: hsl(240 5.9% 10%);
   --sidebar-foreground: hsl(240 4.8% 95.9%);
   --sidebar-primary: hsl(224.3 76.3% 48%);

package/dist/utils/markdown-ext.d.ts

@@ -0,0 +1,6 @@
+import type { MarkedExtension } from 'marked';
+export declare const MATH_CLASS = "ripple-math";
+export declare const escapeHtml: (s: string) => string;
+export declare function markedMath(): MarkedExtension;
+/** Wrap ```mermaid fences for the widget to draw; every other fence renders as usual. */
+export declare function markedMermaid(): MarkedExtension;

package/dist/utils/markdown-ext.js

@@ -0,0 +1,68 @@
+export const MATH_CLASS = 'ripple-math';
+export const escapeHtml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const INLINE = [
+    [/^\$\$((?:\\[\s\S]|[^\\$])+?)\$\$/, true],
+    [/^\$(?![\s$])((?:\\.|[^\\$\n])+?)(?<!\s)\$(?!\d)/, false],
+    [/^\\\(([\s\S]+?)\\\)/, false]
+];
+const BLOCK = /^(?:\$\$([\s\S]+?)\$\$|\\\[([\s\S]+?)\\\])[ \t]*(?:\n+|$)/;
+const PLAIN_NUMBER = /^[\d\s.,]+$/;
+function placeholder(token, tag) {
+    const { tex, display, raw } = token;
+    const cls = display ? `${MATH_CLASS} ${MATH_CLASS}-display` : MATH_CLASS;
+    return `<${tag} class="${cls}" data-tex="${escapeHtml(tex)}"${display ? ' data-display=""' : ''}>${escapeHtml(raw.trim())}</${tag}>${tag === 'div' ? '\n' : ''}`;
+}
+export function markedMath() {
+    return {
+        extensions: [
+            {
+                name: 'mathBlock',
+                level: 'block',
+                start: (src) => src.match(/^ {0,3}(?:\$\$|\\\[)/m)?.index,
+                tokenizer(src) {
+                    const m = BLOCK.exec(src);
+                    if (!m)
+                        return undefined;
+                    const tex = (m[1] ?? m[2]).trim();
+                    if (!tex)
+                        return undefined;
+                    return { type: 'mathBlock', raw: m[0], tex, display: true };
+                },
+                renderer: (token) => placeholder(token, 'div')
+            },
+            {
+                name: 'mathInline',
+                level: 'inline',
+                start(src) {
+                    const m = /(?<!\\)(?:\$|\\\()/.exec(src);
+                    return m?.index;
+                },
+                tokenizer(src) {
+                    for (const [re, display] of INLINE) {
+                        const m = re.exec(src);
+                        if (!m)
+                            continue;
+                        const tex = m[1].trim();
+                        if (!tex || PLAIN_NUMBER.test(tex))
+                            return undefined;
+                        return { type: 'mathInline', raw: m[0], tex, display };
+                    }
+                    return undefined;
+                },
+                renderer: (token) => placeholder(token, 'span')
+            }
+        ]
+    };
+}
+/** Wrap ```mermaid fences for the widget to draw; every other fence renders as usual. */
+export function markedMermaid() {
+    return {
+        renderer: {
+            code({ text, lang }) {
+                if ((lang ?? '').split(/\s/)[0] !== 'mermaid')
+                    return false;
+                return `<div class="ripple-diagram"><pre><code class="language-mermaid">${escapeHtml(text)}</code></pre></div>\n`;
+            }
+        }
+    };
+}