@sdd-method/maintain-cli 0.0.0-stage → 0.1.0

package/dist/lib/catalogue/archetype/maps/web-generic.yaml

@@ -0,0 +1,86 @@
+# Default archetype map — web-generic (ADR 0169 §4.2). Method-owned.
+#
+# Keys off component NAMES (which the builder already parses), not design-system source.
+# Vendor-standard / common-DS tokens ONLY — never an adopter's bespoke vocabulary.
+# Resolution order (ADR 0169 §4.3): adopter overlay override -> by_token -> by_suffix_heuristic -> default.
+# Selected per screen by `platform: web-generic` (or web) frontmatter.
+
+map_version: "1.0.0"
+platform: web-generic
+
+# Stripped (case-insensitive) before token lookup, so `MuiButton`/`ChButton` -> `Button`.
+strip_prefixes: [Mui, Ch, Ds, Ui, App, Base, Core, V]
+
+by_token:
+  Container: grid
+  Grid: grid
+  Row: row
+  Col: col
+  Column: col
+  Stack: stack
+  Flex: row
+  Scroll: scroll
+  ScrollArea: scroll
+  Tabs: tab-strip
+  Tab: tab
+  TabPanel: pane
+  Table: table
+  DataGrid: table
+  List: list
+  ListItem: list-item
+  Menu: list
+  Card: card
+  Panel: panel
+  Dialog: modal
+  Modal: modal
+  Popup: modal
+  Popover: modal
+  Drawer: sidebar
+  SidePanel: sidebar
+  Sidebar: sidebar
+  Nav: nav-bar
+  Navbar: nav-bar
+  AppBar: app-bar
+  Header: app-bar
+  Toolbar: app-bar
+  Alert: banner
+  Banner: banner
+  Toast: banner
+  Snackbar: banner
+  Sheet: sheet
+  BottomSheet: sheet
+  Btn: button
+  Button: button
+  IconButton: button
+  Fab: fab
+  ButtonGroup: button-group
+  SegmentedControl: segmented-control
+  Stat: text
+  StatCard: card
+  KpiBar: kpi-bar
+  Text: text
+  Typography: text
+  Label: text
+  Heading: text
+  Image: image
+  Img: image
+  Avatar: image
+  Icon: image
+
+# Applied when no token matches. First matching suffix wins.
+by_suffix_heuristic:
+  Button: button
+  Bar: app-bar
+  List: list
+  Grid: grid
+  Card: card
+  Panel: panel
+  Dialog: modal
+  Modal: modal
+  Layout: stack
+  Container: grid
+  Text: text
+  Image: image
+  Icon: image
+
+default: panel

package/dist/lib/catalogue/archetype/openui-archetype-vocabulary.yaml

@@ -0,0 +1,46 @@
+# OpenUI Archetype Vocabulary — method-owned (ADR 0169 §4.1)
+#
+# A closed, platform-tagged superset of visual archetypes. An archetype assigns a
+# component a VISUAL SHAPE + slots/orientation — never geometry or styling (stays inside
+# the compose-only boundary, ADR 0166 §3). Default archetype maps
+# (archetype-maps/*.yaml) resolve adopter component NAMES to entries here; the
+# render-screen-wireframe skill lowers a resolved tree to SVG using `render`.
+#
+# `is_container` feeds ADR 0168 §4.1 isContainer when a resolved map is present.
+
+vocabulary_version: "1.0.0"
+
+archetypes:
+
+  # --- structural containers -------------------------------------------------
+  scaffold:        { is_container: true,  render: { slots: [header, main, footer], orientation: vertical } }
+  app-bar:         { is_container: true,  render: { shape: bar, position: top } }
+  nav-bar:         { is_container: true,  render: { shape: bar, position: top } }
+  tab-bar:         { is_container: true,  render: { shape: bar, position: bottom } }
+  sidebar:         { is_container: true,  render: { shape: rail, position: left } }
+  stack:           { is_container: true,  render: { orientation: vertical } }
+  row:             { is_container: true,  render: { orientation: horizontal } }
+  col:             { is_container: true,  render: { orientation: vertical } }
+  grid:            { is_container: true,  render: { shape: grid } }
+  scroll:          { is_container: true,  render: { orientation: vertical, scroll: true } }
+  list:            { is_container: true,  render: { orientation: vertical, repeat: true } }
+  table:           { is_container: true,  render: { shape: grid, header_row: true } }
+  card:            { is_container: true,  render: { shape: card } }
+  panel:           { is_container: true,  render: { shape: panel } }          # opaque fallback
+  paged-panes:     { is_container: true,  render: { shape: paged, active_first: true } }
+  pane:            { is_container: true,  render: { shape: panel } }
+  tab-strip:       { is_container: true,  render: { orientation: horizontal, shape: chips } }
+  button-group:    { is_container: true,  render: { orientation: horizontal } }
+  segmented-control: { is_container: true, render: { orientation: horizontal, shape: chips } }
+  kpi-bar:         { is_container: true,  render: { orientation: horizontal, shape: chips } }
+  modal:           { is_container: true,  render: { shape: floating, overlay: true } }
+  sheet:           { is_container: true,  render: { shape: floating, position: bottom } }
+  banner:          { is_container: true,  render: { shape: bar } }
+
+  # --- leaves ----------------------------------------------------------------
+  tab:             { is_container: false, render: { shape: chip } }
+  list-item:       { is_container: false, render: { shape: row } }
+  button:          { is_container: false, render: { shape: button } }
+  fab:             { is_container: false, render: { shape: circle, position: bottom-right } }
+  text:            { is_container: false, render: { shape: text } }
+  image:           { is_container: false, render: { shape: image } }

package/dist/lib/catalogue/archetype/resolver.js

@@ -0,0 +1,103 @@
+// OpenUI archetype resolver (per ADR 0169).
+//
+// Binds an adopter component NAME to a visual ARCHETYPE via a method-shipped
+// platform default map plus an optional adopter overlay. The binding is what
+// makes a shape-blind openui-lang block renderable as a wireframe, and it
+// supplies the container/leaf classification the ADR 0168 `screen-root-is-leaf`
+// check consumes (isContainerArchetype).
+//
+// Resolution order (ADR 0169 §4.3): adopter override -> default by_token (after
+// stripping a vendor prefix) -> by_suffix_heuristic -> default (panel).
+//
+// The vocabulary + the four default maps are method-owned reference data,
+// VENDORED from sdd-method (docs/method/methods/guides/openui-archetype-*.yaml /
+// archetype-maps/) — the same vendoring relationship as canonical-schema.yaml.
+// They use vendor-standard names only; never an adopter's bespoke vocabulary.
+// copy-yaml-assets.mjs copies them next to the compiled JS at build time.
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { parse as parseYaml } from "yaml";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PLATFORMS = new Set(["web-generic", "android", "swiftui", "uikit"]);
+const FALLBACK_ARCHETYPE = "panel";
+// Loaded once, cached. Reference data is immutable at runtime.
+let vocabularyCache;
+const mapCache = new Map();
+function loadVocabulary() {
+    if (vocabularyCache === undefined) {
+        const raw = readFileSync(join(__dirname, "openui-archetype-vocabulary.yaml"), "utf-8");
+        const parsed = parseYaml(raw);
+        vocabularyCache = { archetypes: parsed?.archetypes ?? {} };
+    }
+    return vocabularyCache;
+}
+function loadMap(platform) {
+    let m = mapCache.get(platform);
+    if (m === undefined) {
+        const raw = readFileSync(join(__dirname, "maps", `${platform}.yaml`), "utf-8");
+        m = parseYaml(raw) ?? {};
+        mapCache.set(platform, m);
+    }
+    return m;
+}
+/** True when `platform` has a method-shipped default map. */
+export function isKnownPlatform(platform) {
+    return platform !== undefined && PLATFORMS.has(platform);
+}
+function stripPrefix(name, prefixes) {
+    for (const p of prefixes ?? []) {
+        if (name.length > p.length && name.startsWith(p))
+            return name.slice(p.length);
+    }
+    return name;
+}
+/**
+ * Resolve a component name to a visual archetype for a platform, honouring an
+ * optional adopter overlay. Always resolves (panel fallback) — never throws.
+ */
+export function resolveArchetype(name, platform, overlay) {
+    const override = overlay?.overrides?.[name];
+    if (override !== undefined)
+        return { archetype: override, provenance: "override" };
+    const map = loadMap(platform);
+    const token = stripPrefix(name, map.strip_prefixes);
+    const byToken = map.by_token?.[token] ?? map.by_token?.[name];
+    if (byToken !== undefined)
+        return { archetype: byToken, provenance: "default" };
+    // First suffix the name ends with wins.
+    for (const [suffix, archetype] of Object.entries(map.by_suffix_heuristic ?? {})) {
+        if (name.endsWith(suffix))
+            return { archetype, provenance: "heuristic" };
+    }
+    return { archetype: map.default ?? FALLBACK_ARCHETYPE, provenance: "fallback" };
+}
+/**
+ * Whether a component classifies as a container archetype for a platform.
+ * Used by ADR 0168 §4.1 isContainer to refine the appears-with-children
+ * heuristic. Returns undefined when the platform has no map (caller falls back
+ * to the heuristic) so an absent map never mis-classifies a known container.
+ */
+export function isContainerArchetype(name, platform, overlay) {
+    if (!isKnownPlatform(platform))
+        return undefined;
+    const { archetype } = resolveArchetype(name, platform, overlay);
+    return loadVocabulary().archetypes[archetype]?.is_container === true;
+}
+/**
+ * The vendor name prefixes the platform's default map strips (e.g. `UI`/`NS` for
+ * uikit, `Mui`/`Ch`/… for web-generic). The renderer combines these with the
+ * adopter overlay's `strip_prefixes` to humanise component names into labels.
+ * Returns `[]` for an unknown platform.
+ */
+export function mapStripPrefixes(platform) {
+    if (!isKnownPlatform(platform))
+        return [];
+    return loadMap(platform).strip_prefixes ?? [];
+}
+/** Vocabulary metadata for an archetype: container flag + render hints. */
+export function archetypeInfo(archetype) {
+    const entry = loadVocabulary().archetypes[archetype];
+    return { isContainer: entry?.is_container === true, render: entry?.render ?? {} };
+}
+//# sourceMappingURL=resolver.js.map

package/dist/lib/catalogue/archetype/wireframe.js

@@ -0,0 +1,418 @@
+// Deterministic structural-wireframe renderer (ADR 0169 §4.4).
+//
+// Lowers a screen's openui-lang block to an SVG wireframe: parse the block into
+// a composition tree, resolve each node to a visual archetype, and lay it out
+// driven by the archetype's render hints — orientation, shape (bar / chips /
+// grid / card / floating / paged / leaf shapes), slots, overlay, active_first,
+// header_row. Each node is drawn as its archetype's visual SHAPE (an app-bar is
+// a band, a tab-strip is a row of chips, a paged-panes shows the active pane and
+// collapses the rest, a table has a header row, a modal floats), labelled with
+// the component name + resolved archetype and shaded by resolution provenance so
+// low-confidence inferences stay visible. A structural wireframe, not a pixel
+// design; parameterised entirely by the archetype map (adopter-agnostic — no
+// component vocabulary, no adopter knowledge).
+//
+// Deterministic companion to the LLM-driven render-screen-wireframe skill.
+import { buildCompositionTree, stripBlockComments } from "../builders/screen-tree.js";
+import { archetypeInfo, isKnownPlatform, mapStripPrefixes, resolveArchetype, } from "./resolver.js";
+// --- geometry constants ----------------------------------------------------
+const PAD = 8;
+const GAP = 6;
+const LABEL_H = 16; // container label strip
+const TITLE_H = 26;
+const TABLE_HDR_H = 20;
+const COLLAPSE_H = 22; // collapsed (inactive) paged pane row
+const SHADOW = 4; // floating/card drop-shadow offset
+const GRID_COLS = 2;
+/** Render an openui-lang block to a structural wireframe SVG string. */
+export function renderWireframe(input) {
+    const tree = buildCompositionTree(stripBlockComments(input.block));
+    if (tree === null) {
+        return emptySvg(input.title, "empty composition — no statements");
+    }
+    const platform = isKnownPlatform(input.platform) ? input.platform : undefined;
+    const prefixes = [...(input.overlay?.strip_prefixes ?? []), ...mapStripPrefixes(platform)];
+    const root = measure(shape(tree, platform, input.overlay, prefixes));
+    const titleOffset = input.title ? TITLE_H : 0;
+    const width = root.w + PAD * 2;
+    const height = root.h + PAD * 2 + titleOffset;
+    const body = [];
+    if (input.title)
+        body.push(text(PAD, 17, escapeXml(input.title), "title"));
+    emit(root, PAD, PAD + titleOffset, body);
+    return svg(width, height, body.join("\n"));
+}
+// --- shape: resolve archetype + classify a render mode per node ------------
+const LEAF_SHAPES = new Set(["button", "chip", "text", "image", "circle", "row"]);
+function shape(node, platform, overlay, prefixes) {
+    const children = node.children.map((c) => shape(c, platform, overlay, prefixes));
+    const isContainer = children.length > 0;
+    linkPagedTabs(children, prefixes);
+    if (node.component === "" || platform === undefined) {
+        return base("", "none", isContainer ? "stack" : "leaf", "box");
+    }
+    const { archetype, provenance } = resolveArchetype(node.component, platform, overlay);
+    const r = archetypeInfo(archetype).render;
+    const sh = r.shape ?? "";
+    if (!isContainer) {
+        const leafShape = LEAF_SHAPES.has(sh) ? sh : "box";
+        return base(archetype, provenance, "leaf", leafShape);
+    }
+    let mode;
+    if (sh === "bar")
+        mode = "bar";
+    else if (sh === "chips")
+        mode = "chips";
+    else if (sh === "grid")
+        mode = r.header_row ? "table" : "grid";
+    else if (sh === "paged")
+        mode = "paged";
+    else if (sh === "card")
+        mode = "card";
+    else if (sh === "floating")
+        mode = "floating";
+    else
+        mode = r.orientation === "horizontal" ? "row" : "stack";
+    return base(archetype, provenance, mode, "box");
+    function base(archetype, provenance, mode, leafShape) {
+        return { node, archetype, provenance, mode, leafShape, children, stripPrefixes: prefixes, derivedLabel: "", w: 0, h: 0 };
+    }
+}
+/**
+ * Derive tab labels from windowed content (deterministic, spec-faithful): when a
+ * sibling group holds a tab-strip and a paged-panes with the SAME pane count, and
+ * the tabs carry no authored label, label each tab from its corresponding pane's
+ * content component name. Reads only names already in the spec — no fabrication.
+ */
+function linkPagedTabs(siblings, prefixes) {
+    const strip = siblings.find((s) => s.archetype === "tab-strip");
+    const paged = siblings.find((s) => s.archetype === "paged-panes");
+    if (!strip || !paged)
+        return;
+    if (strip.children.length === 0 || strip.children.length !== paged.children.length)
+        return;
+    strip.children.forEach((tab, i) => {
+        if (tab.node.args.length > 0 || tab.derivedLabel)
+            return; // authored label wins
+        const pane = paged.children[i];
+        const contentName = pane.children[0]?.node.component || pane.node.component;
+        if (contentName)
+            tab.derivedLabel = humaniseName(contentName, prefixes);
+    });
+}
+// --- measure: size every node bottom-up ------------------------------------
+function leafSize(shapeName, lbl) {
+    switch (shapeName) {
+        case "button": return { w: Math.max(84, lbl.length * 6 + 16), h: 26 };
+        case "chip": return { w: Math.max(56, lbl.length * 6 + 14), h: 22 };
+        case "text": return { w: Math.max(120, lbl.length * 6 + 12), h: 28 };
+        case "image": return { w: 72, h: 54 };
+        case "circle": return { w: 44, h: 44 };
+        case "row": return { w: Math.max(200, lbl.length * 6 + 24), h: 26 };
+        default: return { w: Math.max(120, lbl.length * 6.2 + 12), h: 40 };
+    }
+}
+function measure(s) {
+    if (s.mode === "leaf") {
+        const { w, h } = leafSize(s.leafShape, labelPlain(s));
+        s.w = w;
+        s.h = h;
+        return s;
+    }
+    s.children.forEach(measure);
+    const cs = s.children;
+    let innerW;
+    let innerH;
+    switch (s.mode) {
+        case "row":
+        case "bar":
+        case "chips": {
+            innerW = cs.reduce((a, c) => a + c.w, 0) + GAP * (cs.length - 1);
+            innerH = Math.max(...cs.map((c) => c.h));
+            break;
+        }
+        case "grid": {
+            const colW = Math.max(...cs.map((c) => c.w));
+            const rowH = Math.max(...cs.map((c) => c.h));
+            const rows = Math.ceil(cs.length / GRID_COLS);
+            const cols = Math.min(GRID_COLS, cs.length);
+            innerW = cols * colW + GAP * (cols - 1);
+            innerH = rows * rowH + GAP * (rows - 1);
+            break;
+        }
+        case "table": {
+            innerW = Math.max(180, ...cs.map((c) => c.w));
+            innerH = TABLE_HDR_H + GAP + cs.reduce((a, c) => a + c.h, 0) + GAP * (cs.length - 1);
+            break;
+        }
+        case "paged": {
+            const active = cs[0];
+            const restN = cs.length - 1;
+            innerW = Math.max(160, active.w);
+            innerH = active.h + (restN > 0 ? GAP + restN * COLLAPSE_H + GAP * (restN - 1) : 0);
+            break;
+        }
+        default: {
+            // stack / card / floating
+            innerW = Math.max(...cs.map((c) => c.w));
+            innerH = cs.reduce((a, c) => a + c.h, 0) + GAP * (cs.length - 1);
+        }
+    }
+    s.w = innerW + PAD * 2;
+    s.h = LABEL_H + innerH + PAD * 2;
+    return s;
+}
+// --- emit: place + draw top-down -------------------------------------------
+function emit(s, x, y, out) {
+    if (s.mode === "leaf") {
+        drawLeaf(s, x, y, out);
+        return;
+    }
+    drawContainer(s, x, y, out);
+    const cx0 = x + PAD;
+    const cy0 = y + LABEL_H + PAD;
+    const cs = s.children;
+    switch (s.mode) {
+        case "row":
+        case "bar":
+        case "chips": {
+            const rowH = Math.max(...cs.map((c) => c.h));
+            let cx = cx0;
+            for (const c of cs) {
+                emit(c, cx, cy0 + (rowH - c.h) / 2, out);
+                cx += c.w + GAP;
+            }
+            break;
+        }
+        case "grid": {
+            const colW = Math.max(...cs.map((c) => c.w));
+            const rowH = Math.max(...cs.map((c) => c.h));
+            cs.forEach((c, i) => {
+                const col = i % GRID_COLS;
+                const row = Math.floor(i / GRID_COLS);
+                emit(c, cx0 + col * (colW + GAP), cy0 + row * (rowH + GAP), out);
+            });
+            break;
+        }
+        case "table": {
+            const innerW = s.w - PAD * 2;
+            out.push(rect(cx0, cy0, innerW, TABLE_HDR_H, "none", true, "#e2e8f0"));
+            for (let i = 1; i < 4; i++) {
+                const lx = cx0 + (innerW * i) / 4;
+                out.push(line(lx, cy0, lx, cy0 + TABLE_HDR_H));
+            }
+            let ry = cy0 + TABLE_HDR_H + GAP;
+            for (const c of cs) {
+                emit(c, cx0, ry, out);
+                ry += c.h + GAP;
+            }
+            break;
+        }
+        case "paged": {
+            const active = cs[0];
+            emit(active, cx0, cy0, out);
+            let ry = cy0 + active.h + GAP;
+            for (const c of cs.slice(1)) {
+                out.push(rect(cx0, ry, s.w - PAD * 2, COLLAPSE_H, c.provenance, false, "#f1f5f9"));
+                out.push(text(cx0 + 6, ry + 15, "▸ " + collapsedPaneLabel(c), "dim"));
+                ry += COLLAPSE_H + GAP;
+            }
+            break;
+        }
+        default: {
+            let cy = cy0;
+            for (const c of cs) {
+                emit(c, cx0, cy, out);
+                cy += c.h + GAP;
+            }
+        }
+    }
+}
+// --- drawing primitives ----------------------------------------------------
+const DARK_BARS = new Set(["app-bar", "nav-bar"]);
+function drawContainer(s, x, y, out) {
+    const dark = DARK_BARS.has(s.archetype);
+    let fill = "#f8fafc";
+    if (s.archetype === "banner")
+        fill = "#fef3c7";
+    else if (s.archetype === "tab-bar")
+        fill = "#eef2ff";
+    else if (s.mode === "card" || s.mode === "floating")
+        fill = "#ffffff";
+    else if (dark)
+        fill = "#1f2937";
+    if (s.mode === "floating" || s.mode === "card") {
+        out.push(`<rect x="${x + SHADOW}" y="${y + SHADOW}" width="${s.w}" height="${s.h}" rx="4" fill="#0f172a" opacity="0.12"/>`);
+    }
+    out.push(rect(x, y, s.w, s.h, s.provenance, true, fill));
+    out.push(text(x + PAD, y + 12, labelMarkup(s), dark ? "lblw" : "lbl"));
+}
+function drawLeaf(s, x, y, out) {
+    const lbl = labelMarkup(s);
+    switch (s.leafShape) {
+        case "button":
+            out.push(`<rect x="${x}" y="${y}" width="${s.w}" height="${s.h}" rx="13" fill="#dbeafe" stroke="#3b82f6"${dash(s.provenance)}/>`);
+            out.push(text(x + 10, y + s.h / 2 + 4, lbl, "btn"));
+            break;
+        case "chip":
+            out.push(`<rect x="${x}" y="${y}" width="${s.w}" height="${s.h}" rx="11" fill="#e2e8f0" stroke="#94a3b8"${dash(s.provenance)}/>`);
+            out.push(text(x + 9, y + s.h / 2 + 4, lbl, "lbl"));
+            break;
+        case "circle": {
+            const r = s.w / 2;
+            out.push(`<circle cx="${x + r}" cy="${y + r}" r="${r}" fill="#dbeafe" stroke="#3b82f6"${dash(s.provenance)}/>`);
+            out.push(text(x + 6, y + r + 4, lbl, "dim"));
+            break;
+        }
+        case "image":
+            out.push(rect(x, y, s.w, s.h, s.provenance, false, "#f1f5f9"));
+            out.push(line(x, y, x + s.w, y + s.h));
+            out.push(line(x + s.w, y, x, y + s.h));
+            out.push(text(x + 4, y + s.h - 4, lbl, "dim"));
+            break;
+        case "text":
+            out.push(text(x, y + 12, lbl, "lbl"));
+            out.push(`<rect x="${x}" y="${y + 16}" width="${s.w}" height="5" rx="2" fill="#cbd5e1"/>`);
+            out.push(`<rect x="${x}" y="${y + 24}" width="${s.w * 0.66}" height="5" rx="2" fill="#e2e8f0"/>`);
+            break;
+        case "row":
+            out.push(rect(x, y, s.w, s.h, s.provenance, false, "#ffffff"));
+            out.push(`<circle cx="${x + 11}" cy="${y + s.h / 2}" r="5" fill="#cbd5e1"/>`);
+            out.push(text(x + 24, y + s.h / 2 + 4, lbl, "lbl"));
+            break;
+        default:
+            out.push(rect(x, y, s.w, s.h, s.provenance, false, "#fdfdfe"));
+            out.push(text(x + 6, y + s.h / 2 + 4, lbl, "lbl"));
+    }
+}
+// --- label derivation ------------------------------------------------------
+/** The primary human label for a node, derived only from tokens in the spec. */
+function primaryLabel(s) {
+    if (s.node.args.length > 0)
+        return s.node.args[0]; // authored positional label
+    if (s.mode === "leaf" && s.node.actions.length > 0 && (s.archetype === "button" || s.archetype === "fab"))
+        return humaniseAction(s.node.actions[0]); // CTA from action=
+    if (s.derivedLabel)
+        return s.derivedLabel; // windowed-pane tab label
+    const comp = s.node.component;
+    if (!comp)
+        return s.node.id;
+    // A `default` resolution is a recognised standard widget — its short vendor name
+    // reads fine as-is; bespoke names (override / heuristic / fallback) humanise better.
+    return s.provenance === "default" || s.provenance === "none" ? comp : humaniseName(comp, s.stripPrefixes);
+}
+function archMark(prov) {
+    return prov === "fallback" ? "?" : prov === "heuristic" ? "~" : "";
+}
+/** Plain text label (for width measurement): primary + archetype annotation. */
+function labelPlain(s) {
+    const primary = primaryLabel(s);
+    if (s.archetype === "" || s.provenance === "none")
+        return primary;
+    return `${primary} :${s.archetype}${archMark(s.provenance)}`;
+}
+/**
+ * Collapsed paged-pane label: a wrapper pane often has a generic name (its
+ * content carries the identity), so prefer the content component's label when
+ * the pane itself has no authored label of its own. Spec-faithful — the content
+ * name is already in the block.
+ */
+function collapsedPaneLabel(s) {
+    const content = s.children[0];
+    if (s.node.args.length === 0 && !s.derivedLabel && content && content.node.component) {
+        const lbl = escapeXml(primaryLabel(content));
+        return s.archetype === "" ? lbl : `${lbl} <tspan class="arch">:${escapeXml(s.archetype)}</tspan>`;
+    }
+    return labelMarkup(s);
+}
+/** SVG markup label (for emission): primary text + a small dim `:archetype` tspan. */
+function labelMarkup(s) {
+    const primary = escapeXml(primaryLabel(s));
+    if (s.archetype === "" || s.provenance === "none")
+        return primary;
+    return `${primary} <tspan class="arch">:${escapeXml(s.archetype)}${archMark(s.provenance)}</tspan>`;
+}
+// --- humanisation (deterministic, adopter-agnostic) ------------------------
+const HUMANISE_SUFFIXES = [
+    "Component", "Container", "Controller", "Activity", "Fragment", "Section",
+    "Layout", "Panel", "Popup", "Dialog", "Modal", "Widget", "View", "Screen",
+    "Page", "Table", "List", "Card", "Item",
+];
+/** Strip a vendor prefix + a trailing archetype-ish suffix, split camelCase, Title Case. */
+function humaniseName(name, prefixes) {
+    let s = name;
+    for (const p of prefixes) {
+        // Strip only at a PascalCase boundary (next char uppercase) so a short prefix
+        // like "St" peels "StLayout" → "Layout" but never "Status" → "atus".
+        if (s.length > p.length && s.startsWith(p) && /[A-Z]/.test(s.charAt(p.length))) {
+            s = s.slice(p.length);
+            break;
+        }
+    }
+    for (const suf of HUMANISE_SUFFIXES) {
+        if (s.length > suf.length && s.endsWith(suf)) {
+            s = s.slice(0, -suf.length);
+            break;
+        }
+    }
+    const words = splitWords(s);
+    if (words.length === 0)
+        return titleCaseWords(splitWords(name)); // prefix/suffix ate the whole name
+    return titleCaseWords(words);
+}
+/** Humanise an action token, prefixing create/add/new verbs with "+ ". */
+function humaniseAction(action) {
+    const human = titleCaseWords(splitWords(action));
+    return /^(new|add|create)([^a-z]|$)/i.test(action) ? `+ ${human}` : human;
+}
+function splitWords(s) {
+    return s
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+        .replace(/[_\-.]+/g, " ")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+}
+function titleCaseWords(words) {
+    return words.map((w) => (w === w.toUpperCase() ? w : w.charAt(0).toUpperCase() + w.slice(1))).join(" ");
+}
+function dash(prov) {
+    return prov === "heuristic" ? ' stroke-dasharray="5 3"' : prov === "fallback" ? ' stroke-dasharray="1 4"' : "";
+}
+function rect(x, y, w, h, prov, container, fill) {
+    const f = fill ?? (container ? "#f4f6f8" : "#fdfdfe");
+    return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="3" fill="${f}" stroke="#64748b" stroke-width="1"${dash(prov)}/>`;
+}
+function line(x1, y1, x2, y2) {
+    return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#cbd5e1" stroke-width="1"/>`;
+}
+function text(x, y, content, cls) {
+    return `<text x="${x}" y="${y}" class="${cls}">${content}</text>`;
+}
+function svg(width, height, body) {
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+        `<style>text{font-family:ui-monospace,monospace;font-size:11px;fill:#334155}.title{font-size:13px;font-weight:600;fill:#0f172a}.lbl{fill:#334155}.lblw{fill:#f8fafc}.dim{fill:#94a3b8}.btn{fill:#1e40af;font-weight:600}.arch{font-size:9px;fill:#a8b3c2}</style>`,
+        `<rect width="${width}" height="${height}" fill="#fff"/>`,
+        body,
+        `</svg>`,
+    ].join("\n");
+}
+function emptySvg(title, message) {
+    const body = [
+        title ? text(PAD, 16, escapeXml(title), "title") : "",
+        text(PAD, title ? 36 : 16, escapeXml(message), "lbl"),
+    ]
+        .filter(Boolean)
+        .join("\n");
+    return svg(240, title ? 48 : 28, body);
+}
+function escapeXml(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+//# sourceMappingURL=wireframe.js.map