@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/thumb-kit.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Thumb drawing kit (mos-qkpva) — the shared vocabulary of the per-block
+ * thumbnail composers (blocks/<type>/thumb.ts) and their dispatcher
+ * (thumbnail-visual.ts).
+ *
+ * PURE and node-importable (the one-off backfill runs this chain straight
+ * from node): no svelte, no DOM, no `#lib/server`. The types are structural,
+ * not zod — each drawer validates its own block params against its block's
+ * schema before drawing, exactly like its Svelte component does.
+ *
+ * Colors are CONCRETE CSS values, not token classes: a thumbnail renders
+ * inside `<img src=data:…>` where no stylesheet exists. Opacity is a separate
+ * presentation attribute (fill-opacity / stroke-opacity), never color-mix,
+ * so the string rasterizes identically everywhere. They are resolved from
+ * the team's active theme (theme_settings light overrides) over the app.css
+ * default palette — see buildThumbPalette.
+ */
+/** The palette a thumb composer draws with. Values are raw CSS color strings
+ * (hex or oklch) written into presentation attributes. */
+export interface ThumbPalette {
+    /** base-100 — the frame's ground. */
+    bg: string;
+    /** base-content — text and strong strokes. */
+    ink: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    neutral: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    /** The --chart-series-1..6 contract (src/lib/theme-bridge/layerchart.css):
+     * series identity colors in the chart's order. */
+    series: string[];
+}
+/**
+ * The default (app.css light theme) palette, mirrored as concrete values.
+ * thumbnail-visual.test.ts asserts parity with src/app.css through the
+ * machine reader (scripts/lib/parse-app-css-theme.mjs) — edit app.css and
+ * the test fails until this table follows.
+ */
+export declare const DEFAULT_THUMB_PALETTE: ThumbPalette;
+/** Tone token → palette color (the blocks' shared toneSchema vocabulary);
+ * an unknown token lands on neutral, like the components' static maps. */
+export declare function toneColor(palette: ThumbPalette, tone?: string): string;
+/**
+ * Extract the light-mode override block from a stored theme_settings.overrides
+ * value. The runtime contract (themeCache.ts, the email themeResolver) keys
+ * overrides WITHOUT the leading `--`, grouped under light/dark — the same
+ * shape both callers of the composers read. Anything malformed yields {}.
+ */
+export declare function extractLightOverrides(raw: unknown): Record<string, string>;
+/**
+ * The palette a team's artifacts draw with: the active theme's light values
+ * over the app.css defaults. Never throws; a missing or non-color token
+ * (empty, or one that could break the XML — a quote or angle bracket) keeps
+ * the default. A broken theme must never take a publish down.
+ */
+export declare function buildThumbPalette(overrides?: Record<string, string>): ThumbPalette;
+/** The thumbnail frame (the task's fixed small size; the list cell is 64×40
+ * at the same 1.6:1 ratio, so object-fit: cover shows it uncropped). */
+export declare const THUMB_W = 320;
+export declare const THUMB_H = 200;
+/** Round to one decimal — same convention as the block components. */
+export declare const r1: (n: number) => number;
+/** XML-escape text content / attribute values. */
+export declare function escXml(s: string): string;
+export interface TextOpts {
+    size: number;
+    fill: string;
+    opacity?: number;
+    weight?: number;
+    anchor?: "start" | "middle" | "end";
+}
+/** A plain <text> element. Presentation attributes only — no style attr
+ * (the SVG sanitizer forbids style; see sanitizeSvg). */
+export declare function thumbText(x: number, y: number, s: string, o: TextOpts): string;
+/** Clamp text to n characters with an ellipsis (labels are decorative here). */
+export declare function thumbTruncate(s: string, n: number): string;

package/dist/artifact-blocks/thumb-kit.js

@@ -0,0 +1,149 @@
+/**
+ * Thumb drawing kit (mos-qkpva) — the shared vocabulary of the per-block
+ * thumbnail composers (blocks/<type>/thumb.ts) and their dispatcher
+ * (thumbnail-visual.ts).
+ *
+ * PURE and node-importable (the one-off backfill runs this chain straight
+ * from node): no svelte, no DOM, no `#lib/server`. The types are structural,
+ * not zod — each drawer validates its own block params against its block's
+ * schema before drawing, exactly like its Svelte component does.
+ *
+ * Colors are CONCRETE CSS values, not token classes: a thumbnail renders
+ * inside `<img src=data:…>` where no stylesheet exists. Opacity is a separate
+ * presentation attribute (fill-opacity / stroke-opacity), never color-mix,
+ * so the string rasterizes identically everywhere. They are resolved from
+ * the team's active theme (theme_settings light overrides) over the app.css
+ * default palette — see buildThumbPalette.
+ */
+/**
+ * The default (app.css light theme) palette, mirrored as concrete values.
+ * thumbnail-visual.test.ts asserts parity with src/app.css through the
+ * machine reader (scripts/lib/parse-app-css-theme.mjs) — edit app.css and
+ * the test fails until this table follows.
+ */
+export const DEFAULT_THUMB_PALETTE = {
+    bg: "#fefbf6",
+    ink: "#180042",
+    primary: "#180042",
+    secondary: "#c7b9f8",
+    accent: "#db2777",
+    neutral: "#180042",
+    info: "oklch(70% 0.2 220)",
+    success: "#37d399",
+    warning: "oklch(80% 0.25 80)",
+    error: "#f77272",
+    series: [
+        "#180042", // --chart-series-1: primary
+        "#c7b9f8", // --chart-series-2: secondary
+        "#db2777", // --chart-series-3: accent
+        "oklch(70% 0.2 220)", // --chart-series-4: info
+        "#37d399", // --chart-series-5: success
+        "oklch(80% 0.25 80)", // --chart-series-6: warning
+    ],
+};
+/** Tone token → palette color (the blocks' shared toneSchema vocabulary);
+ * an unknown token lands on neutral, like the components' static maps. */
+export function toneColor(palette, tone) {
+    switch (tone) {
+        case "primary":
+        case "secondary":
+        case "accent":
+        case "info":
+        case "success":
+        case "warning":
+        case "error":
+            return palette[tone];
+        default:
+            return palette.neutral;
+    }
+}
+/**
+ * Extract the light-mode override block from a stored theme_settings.overrides
+ * value. The runtime contract (themeCache.ts, the email themeResolver) keys
+ * overrides WITHOUT the leading `--`, grouped under light/dark — the same
+ * shape both callers of the composers read. Anything malformed yields {}.
+ */
+export function extractLightOverrides(raw) {
+    if (typeof raw !== "object" || raw === null || Array.isArray(raw))
+        return {};
+    const light = raw.light;
+    if (typeof light !== "object" || light === null || Array.isArray(light))
+        return {};
+    const out = {};
+    for (const [k, v] of Object.entries(light)) {
+        if (typeof v === "string" && v.trim())
+            out[k] = v.trim();
+    }
+    return out;
+}
+/**
+ * The palette a team's artifacts draw with: the active theme's light values
+ * over the app.css defaults. Never throws; a missing or non-color token
+ * (empty, or one that could break the XML — a quote or angle bracket) keeps
+ * the default. A broken theme must never take a publish down.
+ */
+export function buildThumbPalette(overrides) {
+    const ov = overrides ?? {};
+    const get = (key, fallback) => {
+        const v = ov[key];
+        if (typeof v === "string" && v && !/["'<>]/.test(v))
+            return v;
+        return fallback;
+    };
+    const primary = get("color-primary", DEFAULT_THUMB_PALETTE.primary);
+    const secondary = get("color-secondary", DEFAULT_THUMB_PALETTE.secondary);
+    const accent = get("color-accent", DEFAULT_THUMB_PALETTE.accent);
+    const info = get("color-info", DEFAULT_THUMB_PALETTE.info);
+    const success = get("color-success", DEFAULT_THUMB_PALETTE.success);
+    const warning = get("color-warning", DEFAULT_THUMB_PALETTE.warning);
+    return {
+        bg: get("color-base-100", DEFAULT_THUMB_PALETTE.bg),
+        ink: get("color-base-content", DEFAULT_THUMB_PALETTE.ink),
+        primary,
+        secondary,
+        accent,
+        neutral: get("color-neutral", DEFAULT_THUMB_PALETTE.neutral),
+        info,
+        success,
+        warning,
+        error: get("color-error", DEFAULT_THUMB_PALETTE.error),
+        // layerchart.css maps series 1..6 → primary/secondary/accent/info/success/warning
+        series: [primary, secondary, accent, info, success, warning],
+    };
+}
+// ── drawing primitives ─────────────────────────────────────────────────────
+/** The thumbnail frame (the task's fixed small size; the list cell is 64×40
+ * at the same 1.6:1 ratio, so object-fit: cover shows it uncropped). */
+export const THUMB_W = 320;
+export const THUMB_H = 200;
+/** Round to one decimal — same convention as the block components. */
+export const r1 = (n) => Math.round(n * 10) / 10;
+/** XML-escape text content / attribute values. */
+export function escXml(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+/** A plain <text> element. Presentation attributes only — no style attr
+ * (the SVG sanitizer forbids style; see sanitizeSvg). */
+export function thumbText(x, y, s, o) {
+    const attrs = [
+        `x="${r1(x)}"`,
+        `y="${r1(y)}"`,
+        `font-size="${o.size}"`,
+        `fill="${o.fill}"`,
+        o.opacity !== undefined ? `fill-opacity="${r1(o.opacity)}"` : "",
+        o.weight ? `font-weight="${o.weight}"` : "",
+        o.anchor ? `text-anchor="${o.anchor}"` : "",
+        `font-family="ui-sans-serif, system-ui, sans-serif"`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return `<text ${attrs}>${escXml(s)}</text>`;
+}
+/** Clamp text to n characters with an ellipsis (labels are decorative here). */
+export function thumbTruncate(s, n) {
+    return s.length > n ? `${s.slice(0, Math.max(1, n - 1))}…` : s;
+}