@m0saic/templates 0.2.0

package/dist/m0saic/dsl-tutorial/v1/panels/dsl-string/v1/dsl-string.js

@@ -0,0 +1,366 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/dsl-tutorial/string/v1 — live DSL-string panel (internal)
+ * ============================================================================
+ *
+ * Renders the m0 source string as a syntax-highlighted glyph strip with a
+ * STEPPING caret that rides the active character (a soft wash behind the glyph +
+ * an underline beneath it), a faint position ruler above, OR the narration
+ * banner that reads out what the active symbol does — selected by `part`
+ * ("strip" | "narration"), the same split-by-part idiom the chrome uses.
+ *
+ * Depth-safe: the glyph / caret / ruler cells are SIBLINGS in a colSplit (1:1
+ * aligned, no overlay stacking); each glyph cell nests at most a wash under its
+ * glyph (depth 2). The narration banner stacks one enable-gated line per distinct
+ * narration — isolated in its own child document. Everything keys off the global
+ * clock via the projection exprs (see pipeline/dslString.ts).
+ *
+ * Width-fitted (gate 33): a glyph column's font is bounded by the WIDEST glyph
+ * in the string under the m0 glyph model (`>` is .86em; the old flat 1.6·cellW
+ * cap let it overlap its neighbours and clip at the panel edges), and the
+ * narration font fits its LONGEST line — portrait canvases used to run the
+ * banner off the right edge. Narration is tagged for the parent's contract.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DslString = void 0;
+exports.fitNarrationLines = fitNarrationLines;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const node_kit_1 = require("../../../_shared/node-kit");
+const tokens_1 = require("../../../theme/tokens");
+const text_fit_1 = require("../../../_shared/text-fit");
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    part: {
+        type: "string",
+        required: false,
+        description: 'Which part to render: "strip" (glyph strip + caret + ruler) or "narration".',
+        meta: { constraints: { oneOf: ["strip", "narration"] } },
+    },
+    preset: { type: "string", required: false, description: "Theme preset." },
+    glyphs: { type: "json", required: false, description: "Classified m0 glyphs." },
+    caretEnable: { type: "json", required: false, description: "Per-glyph caret enable exprs." },
+    caretSteps: { type: "json", required: false, description: "Raw per-step caret timeline (scroll math)." },
+    narration: { type: "json", required: false, description: "Enable-gated narration lines." },
+});
+/** Target on-screen width per character (px) before the strip starts scrolling.
+ *  cap = how many characters fit at this width → the hard visible-char limit. */
+const TARGET_CHAR_PX = 18;
+/** Fraction of a glyph column the widest glyph's modelled ink may fill. The strip
+ *  spans the full panel width (pitch = W / n is fixed), so "characters closer
+ *  together" = bigger glyphs whose ink eats the whitespace — but a glyph wider
+ *  than its column overlaps its neighbours and, in the first/last column, CLIPS
+ *  at the panel edge. So the font is bounded per string by its widest glyph
+ *  (`cellW · GLYPH_FILL / widestEm`): a digit-heavy string still reaches
+ *  ~1.4·cellW (tight, ~touching), a `>`-heavy one stays inside its columns. The
+ *  glyph band is given most of the strip HEIGHT so the font can reach the cap. */
+const GLYPH_FILL = 0.96;
+/** Narration floor before lines ellipsize (px). */
+const NARRATION_MIN_PX = 10;
+/** Narration text spans the middle 94/100 of the band (see buildNarration). */
+const NARRATION_TEXT_FRAC = 0.94;
+/** Font bound for one glyph per column: the widest glyph's ink fills at most
+ *  `GLYPH_FILL` of the column. */
+function glyphColumnFont(glyphChars, cellW) {
+    return (cellW * GLYPH_FILL) / (0, text_fit_1.widestM0GlyphEm)(glyphChars);
+}
+/** Ruler labels (`0`, `5`, `10`, …, `·`) are m0-model digits: bound the ruler font
+ *  the same way, by the widest label. */
+function rulerFontBound(labels, cellW) {
+    let widest = 0.42;
+    for (const l of labels) {
+        let em = 0;
+        for (const ch of l)
+            em += (0, text_fit_1.m0GlyphEm)(ch);
+        widest = Math.max(widest, em);
+    }
+    return (cellW * GLYPH_FILL) / widest;
+}
+/** Fixed-strip vertical bands (ruler · gap · glyphs · caret), summing to BAND_TOTAL.
+ *  The glyph band takes the lion's share so the font can grow tall enough to hit
+ *  the GLYPH_FILL bound — that's what actually tightens the inter-character spacing. */
+const RULER_BAND = 3;
+const GAP_BAND = 1;
+const GLYPH_BAND = 19;
+const CARET_BAND = 1;
+const BAND_TOTAL = RULER_BAND + GAP_BAND + GLYPH_BAND + CARET_BAND;
+const f3 = (n) => n.toFixed(3);
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+/** ONE text source whose LAYERS are the strip's glyphs — each positioned at its
+ *  column centre via `xExpr` and coloured by syntax type — so the whole strip is
+ *  a single `drawtext` CHAIN (one input, one image) instead of N sibling text
+ *  cells (the ~one-image-per-character breadth cost that made root:1 the render
+ *  bottleneck). `cx` is the column centre in px. Commas are nudged toward the
+ *  baseline: centre-aligned they read too high, since a comma's ink sits low in
+ *  the em box. Static text → renders as one image (no per-frame work). */
+function glyphStripSource(cells, font) {
+    const commaDrop = (font * 0.32).toFixed(1); // push ',' down toward the baseline
+    return {
+        type: "text",
+        visual: { backgroundColor: "black@0" },
+        layers: cells.map((c) => ({
+            content: { kind: "literal", text: c.text.trim() === "" ? " " : c.text },
+            style: { fontSize: font, fontColor: c.color },
+            // Absolute per-glyph placement in the strip's own rect: centre horizontally
+            // on the column (xExpr over text_w), vertically centred (yExpr over text_h);
+            // commas drop toward the baseline so they read like real commas.
+            placement: {
+                xExpr: `${c.cx.toFixed(1)}-text_w/2`,
+                yExpr: c.text === "," ? `(h-text_h)/2+${commaDrop}` : "(h-text_h)/2",
+            },
+        })),
+    };
+}
+/** ONE lavfi drawbox source for the caret machinery — a gated box per active
+ *  glyph — collapsing N gated overlay cells into a single source + one overlay
+ *  (the canvas cursor-track idiom). `box(i)` is the box rect in the track's own
+ *  pixel space; `caretEnable[i]` gates it (commas inside the gte/lt exprs are
+ *  backslash-escaped for the lavfi filtergraph parser). Returns null when no
+ *  glyph is ever active, so the caller can drop the layer entirely. */
+function caretTrackSource(caretEnable, color, alpha, box) {
+    const col = typeof color === "string" ? color : "#7C5CFF";
+    const a = alpha.toFixed(2);
+    const boxes = [];
+    for (let i = 0; i < caretEnable.length; i++) {
+        const en = caretEnable[i];
+        if (!en)
+            continue;
+        const b = box(i);
+        boxes.push(`drawbox=x=${Math.round(b.x)}:y=${Math.round(b.y)}:w=${Math.max(1, Math.round(b.w))}:` +
+            `h=${Math.max(1, Math.round(b.h))}:color=${col}@${a}:t=fill:replace=1:enable=${en.replace(/,/g, "\\,")}`);
+    }
+    if (boxes.length === 0)
+        return null;
+    return { type: "lavfi", lavfi: ["color=black@0", ...boxes].join(",") };
+}
+/** Dispatch: a short string fits on one screen (positioned glyph strip); a long
+ *  one exceeds the char cap, so it PAGES — a window that follows the parse. */
+function buildStrip(glyphs, caretEnable, caretSteps, theme, W, H) {
+    const cap = Math.max(8, Math.floor(W / TARGET_CHAR_PX));
+    return glyphs.length <= cap
+        ? buildFixedStrip(glyphs, caretEnable, theme, W, H)
+        : buildPagedStrip(glyphs, caretEnable, caretSteps, theme, W, H, cap);
+}
+/** The fits-in-one-screen strip: ruler + glyph rows each a SINGLE positioned text
+ *  source; the caret wash + underline each a SINGLE gated lavfi track. So the
+ *  whole strip is ~4 sources regardless of length — no per-character cells, no
+ *  input-count chunking. */
+function buildFixedStrip(glyphs, caretEnable, theme, W, H) {
+    const n = Math.max(1, glyphs.length);
+    const cellW = W / n; // full width — the strip spans the entire panel
+    const syntax = theme.syntax;
+    const cx = (i) => (i + 0.5) * cellW;
+    // Vertical budget: a TALL glyph band so the characters render big and tight;
+    // the widest glyph in the string bounds the font horizontally (no overlap, no
+    // edge clip — see GLYPH_FILL).
+    const glyphRowH = (GLYPH_BAND / BAND_TOTAL) * H;
+    const caretRowH = (CARET_BAND / BAND_TOTAL) * H;
+    const glyphChars = glyphs.map((g) => g.ch);
+    const glyphFont = clamp(Math.min(glyphColumnFont(glyphChars, cellW), glyphRowH * 0.9), 9, 220);
+    const rulerLabels = glyphs.map((_, i) => (i % 5 === 0 ? String(i) : "·"));
+    const rulerFont = clamp(Math.min(cellW * 0.5, rulerFontBound(rulerLabels, cellW), H * 0.11), 7, 60);
+    // Ruler: faint position gutter — index every 5th glyph, a dot otherwise.
+    const rulerRow = (0, node_kit_1.paint)(glyphStripSource(rulerLabels.map((text, i) => ({ text, color: theme.muted, cx: cx(i) })), rulerFont));
+    // Glyph strip (one source) with the caret WASH behind it (one gated lavfi track).
+    const glyphStrip = (0, node_kit_1.paint)(glyphStripSource(glyphs.map((g, i) => ({ text: g.ch, color: syntax[g.type], cx: cx(i) })), glyphFont));
+    const wash = caretTrackSource(caretEnable, theme.accent, 0.2, (i) => ({
+        x: i * cellW, y: 0, w: cellW, h: glyphRowH,
+    }));
+    const glyphRow = wash ? (0, node_kit_1.overlay)([(0, node_kit_1.paint)(wash), glyphStrip]) : glyphStrip;
+    // Caret underline: a short accent bar beneath the active glyph (one lavfi track).
+    const underline = caretTrackSource(caretEnable, theme.accent, 1, (i) => {
+        const bw = cellW * 0.6;
+        const bh = Math.max(2, caretRowH * 0.4);
+        return { x: i * cellW + (cellW - bw) / 2, y: (caretRowH - bh) / 2, w: bw, h: bh };
+    });
+    const caretRow = underline ? (0, node_kit_1.paint)(underline) : node_kit_1.EMPTY;
+    // Ruler is FLUSH to the top of the panel rect (lines up with the inspector +
+    // canvas tops); the glyph band dominates so the characters render big + tight.
+    return (0, node_kit_1.rowSplit)([
+        { weight: RULER_BAND, node: rulerRow },
+        { weight: GAP_BAND, node: node_kit_1.EMPTY },
+        { weight: GLYPH_BAND, node: glyphRow },
+        { weight: CARET_BAND, node: caretRow },
+    ]);
+}
+/** AND `enableExpr` into every source of a node (gates a whole sub-tree's
+ *  visibility). Used to show/hide a full page of the strip on the global clock. */
+function gateNode(node, enableExpr) {
+    var _a;
+    var _b;
+    for (const s of node.sources) {
+        const o = ((_a = (_b = s).overlay) !== null && _a !== void 0 ? _a : (_b.overlay = {}));
+        o.enable = o.enable ? `(${o.enable})*(${enableExpr})` : enableExpr;
+    }
+    return node;
+}
+/** One page of the strip: `cap` fixed slots (the slice fills the first, the rest
+ *  pad empty so char width is uniform across pages), with global ruler indices. */
+function buildPageStrip(slice, sliceCaret, startIndex, cap, theme, W, H) {
+    const cellW = W / cap; // fixed cap slots → uniform char width across pages
+    const syntax = theme.syntax;
+    const cx = (j) => (j + 0.5) * cellW;
+    const glyphChars = slice.map((g) => g.ch);
+    const glyphFont = clamp(Math.min(cellW * 0.82, glyphColumnFont(glyphChars, cellW), H * 0.34), 9, 220);
+    const rulerLabels = slice.map((_, j) => ((startIndex + j) % 5 === 0 ? String(startIndex + j) : "·"));
+    const rulerFont = clamp(Math.min(cellW * 0.5, rulerFontBound(rulerLabels, cellW), H * 0.12), 7, 60);
+    // Band heights within this page's rowSplit (weights 4/1/13/3/3 → sum 24).
+    const glyphRowH = (13 / 24) * H;
+    const caretRowH = (3 / 24) * H;
+    // Only the filled slots get a layer; the rest of the page pads empty.
+    const rulerRow = (0, node_kit_1.paint)(glyphStripSource(rulerLabels.map((text, j) => ({ text, color: theme.muted, cx: cx(j) })), rulerFont));
+    const glyphStrip = (0, node_kit_1.paint)(glyphStripSource(slice.map((g, j) => ({ text: g.ch, color: syntax[g.type], cx: cx(j) })), glyphFont));
+    const wash = caretTrackSource(sliceCaret, theme.accent, 0.2, (j) => ({
+        x: j * cellW, y: 0, w: cellW, h: glyphRowH,
+    }));
+    const glyphRow = wash ? (0, node_kit_1.overlay)([(0, node_kit_1.paint)(wash), glyphStrip]) : glyphStrip;
+    const underline = caretTrackSource(sliceCaret, theme.accent, 1, (j) => {
+        const bw = cellW * 0.6;
+        const bh = Math.max(2, caretRowH * 0.4);
+        return { x: j * cellW + (cellW - bw) / 2, y: (caretRowH - bh) / 2, w: bw, h: bh };
+    });
+    const caretRow = underline ? (0, node_kit_1.paint)(underline) : node_kit_1.EMPTY;
+    // Ruler is FLUSH to the top of the panel rect (lines up with the inspector +
+    // canvas tops); the bottom keeps a small pad under the caret.
+    return (0, node_kit_1.rowSplit)([
+        { weight: 4, node: rulerRow },
+        { weight: 1, node: node_kit_1.EMPTY },
+        { weight: 13, node: glyphRow },
+        { weight: 3, node: caretRow },
+        { weight: 3, node: node_kit_1.EMPTY },
+    ]);
+}
+/** The long-string strip: a WINDOW of `cap` characters that follows the parse.
+ *
+ *  Smooth pixel-scroll isn't available crisply with the engine's text primitives
+ *  (drawtext rasterizes only to its cell width — content positioned beyond it is
+ *  never drawn, so a source-level `overlay.xExpr` scroll reveals blank; per-layer
+ *  `xExpr` is static; the camera upscales rasterized pixels → blur). So the
+ *  window PAGES: the string is cut into `cap`-char pages, each a crisp fixed
+ *  strip, stacked as enable-gated layers — only the page holding the caret shows,
+ *  and it advances as the parse crosses a page boundary. Depth = page count
+ *  (fine for hundreds of chars; thousands would need a different mechanism). */
+function buildPagedStrip(glyphs, caretEnable, caretSteps, theme, W, H, cap) {
+    const total = glyphs.length;
+    const pages = Math.ceil(total / cap);
+    // Per-page visibility: the union of step windows whose caret sits on that page.
+    const pageWin = Array.from({ length: pages }, () => []);
+    for (const s of caretSteps) {
+        const p = Math.floor(s.charIndex / cap);
+        if (p < 0 || p >= pages)
+            continue;
+        const list = pageWin[p];
+        const last = list[list.length - 1];
+        if (last && Math.abs(last.b - s.startSec) < 1e-6)
+            last.b = s.endSec;
+        else
+            list.push({ a: s.startSec, b: s.endSec });
+    }
+    // Page 0 shows from t=0 (covers the lead before step 1, so the strip isn't blank).
+    if (pageWin[0].length > 0)
+        pageWin[0][0].a = 0;
+    const pageEnable = pageWin.map((list) => list.length ? list.map((r) => `(gte(t,${f3(r.a)})*lt(t,${f3(r.b)}))`).join("+") : "0");
+    const pageNodes = Array.from({ length: pages }, (_v, p) => {
+        const start = p * cap;
+        const end = Math.min(total, start + cap);
+        const node = buildPageStrip(glyphs.slice(start, end), caretEnable.slice(start, end), start, cap, theme, W, H);
+        return gateNode(node, pageEnable[p]);
+    });
+    return (0, node_kit_1.overlay)(pageNodes);
+}
+/** ONE narration font for every line: the band height picks it, the LONGEST line
+ *  under the width model caps it; lines that still overflow at the floor
+ *  end-ellipsize. Exported for the gate-33 locks. */
+function fitNarrationLines(labels, W, H) {
+    const maxPx = clamp(Math.round(H * 0.34), 12, 60);
+    const availW = (0, text_fit_1.fitBudget)(W * NARRATION_TEXT_FRAC);
+    let fontSize = maxPx;
+    for (const l of labels)
+        fontSize = Math.min(fontSize, (0, text_fit_1.fitFontPx)(l, availW, maxPx, NARRATION_MIN_PX, text_fit_1.PROSE_EM));
+    const texts = labels.map((l) => (0, text_fit_1.textWidthPx)(l, fontSize, text_fit_1.PROSE_EM) <= availW ? l : (0, text_fit_1.fitLine)(l, availW, fontSize, fontSize, text_fit_1.PROSE_EM).text);
+    return { texts, fontSize };
+}
+/** The narration banner — one enable-gated line lit at a time.
+ *
+ *  COLLAPSE: all N narration lines live as enable-gated LAYERS of ONE text
+ *  source, NOT as N stacked overlay sources. The engine renders enable-gated
+ *  text layers as a single `drawtext` CHAIN on one input (see
+ *  buildTextRenderCommand) — so the banner costs one text render + one overlay
+ *  regardless of line count, instead of N inputs + N full-band overlay
+ *  composites. The old `overlay(lines)` form was the ~24s root:2 bottleneck on a
+ *  dense walk; only one layer is ever visible at a time, so stacking them at the
+ *  same placement is free. */
+function buildNarration(narration, theme, W, H) {
+    const variants = narration !== null && narration !== void 0 ? narration : [];
+    const lines = fitNarrationLines(variants.map((v) => v.label || " "), W, H);
+    const textStack = variants.length
+        ? (0, node_kit_1.paint)((0, template_utils_1.tag)({
+            type: "text",
+            // VIDEO render: the per-layer `enable=between(t,…)` gates each drawtext
+            // per FRAME, so the source must be time-varying (a static image would
+            // freeze every layer at t=0). One .mov carries the whole gated chain.
+            renderMode: { kind: "video" },
+            visual: { backgroundColor: "black@0" },
+            layers: variants.map((v, i) => ({
+                content: { kind: "literal", text: lines.texts[i] },
+                style: { fontSize: lines.fontSize, fontColor: theme.label },
+                placement: { fit: "contain", hAlign: "left", vAlign: "middle" },
+                overlay: { enable: v.enableExpr },
+            })),
+        }, "narration"))
+        : node_kit_1.EMPTY;
+    // No bullet marker — the narration text spans the full width of the band.
+    const row = (0, node_kit_1.colSplit)([
+        { weight: 3, node: node_kit_1.EMPTY },
+        { weight: 94, node: textStack },
+        { weight: 3, node: node_kit_1.EMPTY },
+    ]);
+    // Flush to the top of the band (consistent with the strip + inspector tops).
+    return (0, node_kit_1.rowSplit)([
+        { weight: 5, node: row },
+        { weight: 1, node: node_kit_1.EMPTY },
+    ]);
+}
+exports.DslString = {
+    id: (0, types_1.asTemplateId)("@m0saic/dsl-tutorial/string/v1"),
+    label: "DSL Tutorial — String",
+    version: 1,
+    description: "Internal: live syntax-highlighted m0 string with a stepping caret + ruler, or the narration banner, for dsl-tutorial.",
+    capabilities: { tier: "core" },
+    tags: ["developer", "dsl-tutorial", "internal", "string"],
+    internal: true,
+    outputHints: { width: 1280, height: 150, fps: 30, durationMs: 12000, note: "Live DSL string strip / narration banner." },
+    propsSchema,
+    defaultProps: { part: "strip", preset: "dark" },
+    render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const theme = (0, tokens_1.dslTutorialTheme)(props.preset);
+        const W = ctx.target.width;
+        const H = ctx.target.height;
+        const part = (_a = props.part) !== null && _a !== void 0 ? _a : "strip";
+        // Internal template: glyphs / narration are injected by the dsl-tutorial
+        // parent. Invoked standalone with neither → the strip would emit text
+        // sources with EMPTY layers[] (a plan-validation error). Render the
+        // usage-card placeholder instead, same pattern as screencap_grid.
+        const hasContent = part === "narration"
+            ? ((_b = props.narration) !== null && _b !== void 0 ? _b : []).length > 0
+            : ((_c = props.glyphs) !== null && _c !== void 0 ? _c : []).length > 0;
+        if (!hasContent) {
+            return Promise.resolve((0, template_utils_1.makeErrorMosaic)(`${part === "narration" ? "narration[]" : "glyphs[]"} is required — injected by the dsl-tutorial parent template`, { title: `${this.id} props`, width: Math.max(1, Math.round(W)), height: Math.max(1, Math.round(H)) }));
+        }
+        const root = part === "narration"
+            ? buildNarration((_d = props.narration) !== null && _d !== void 0 ? _d : [], theme, W, H)
+            : buildStrip((_e = props.glyphs) !== null && _e !== void 0 ? _e : [], (_f = props.caretEnable) !== null && _f !== void 0 ? _f : [], (_g = props.caretSteps) !== null && _g !== void 0 ? _g : [], theme, W, H);
+        return Promise.resolve({
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: (0, dsl_stdlib_1.toM0String)(root.m0, "DslString"),
+            sources: root.sources,
+            backgroundColor: theme.surface,
+        });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.DslString);

package/dist/m0saic/dsl-tutorial/v1/panels/inspector/v1/dsl-inspector.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ============================================================================
+ * @m0saic/dsl-tutorial/inspector/v1 — live geometry inspector (internal)
+ * ============================================================================
+ *
+ * The IDE's right-hand inspector: the active node's Kind/Status chips over a
+ * grid of X/Y/W/H/Z fields whose values MUTATE as the parser walks — driven by
+ * per-field `%{eif:…}` exprs on the global clock (see pipeline/inspector.ts), so
+ * they move in lockstep with the canvas highlight + camera + step pill.
+ *
+ * Each field that changes on a step gets a git-diff "just changed" pulse: a soft
+ * positive-coloured pill behind the value, flashing once and decaying. Depth-safe
+ * by construction — one text layer per value (not one per step), a few
+ * enable-gated chip variants, one pulse layer per row.
+ *
+ * Width-fitted (gate 33): every font is picked from the row height AND capped by
+ * its cell under the CLI width model — the value cell by the LONGEST value the
+ * walk ever shows, the chips by the longest chip label ("Overlay"), the captions
+ * by their cells — so a narrow (portrait) panel shrinks its type instead of
+ * clipping "1080" to "80". Rows are capped to the panel WIDTH (a tall portrait
+ * panel keeps proportionate rows + bottom slack, not 140px rows), and the
+ * section rule is sized in px so a tiny panel never quantizes it to a 0-size
+ * frame (the 480×270 crash). Text sources are tagged for the parent's contract.
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import type { DslTutorialPreset } from "../../../theme/tokens";
+import type { InspectorFieldExpr, ChipVariant } from "../../../pipeline/inspector";
+export type DslInspectorProps = {
+    preset?: DslTutorialPreset;
+    /** Per-field value + change-pulse exprs (global clock). */
+    fields?: InspectorFieldExpr[];
+    /** Enable-gated Kind chip variants. */
+    kindVariants?: ChipVariant[];
+    /** Enable-gated Status chip variants. */
+    statusVariants?: ChipVariant[];
+    /** Enable-gated "cols"/"rows" variants — tags the N (arity) row. */
+    axisVariants?: ChipVariant[];
+};
+/**
+ * The inspector's type ramp, WIDTH-FITTED: each size starts from the row height
+ * (the design) and is capped by its cell + the longest string it must hold under
+ * the CLI width model. Exported for the gate-33 locks.
+ */
+export declare function inspectorTypeRamp(W: number, rowH: number, fields: ReadonlyArray<InspectorFieldExpr>, chips: ReadonlyArray<ChipVariant>): {
+    titleFont: number;
+    chipFont: number;
+    labelFont: number;
+    valueFont: number;
+    sectionFont: number;
+    titleW: number;
+    sectionW: number;
+};
+export declare const DslInspector: MosaicTemplate<DslInspectorProps>;