jssm 5.159.0 → 5.159.1

package/dist/deno/jssm_viz.d.ts

@@ -65,6 +65,24 @@ declare function vc(col: string): string;
  *  @internal
  */
 declare function doublequote(txt: string): string;
+/**
+ *  Reverse {@link doublequote}: turn DOT's `\"` escape back into the literal
+ *  `"` that graphviz renders into SVG `<text>` content.  Used by
+ *  {@link state_svg_label_texts} to reconstruct a node's on-screen label from
+ *  the DOT label it was handed, so the fence renderer keys against exactly what
+ *  was drawn.
+ *
+ *  ```typescript
+ *  undoublequote('a\\"b');  // 'a"b'
+ *  undoublequote('safe');   // 'safe'
+ *  ```
+ *
+ *  @param txt A DOT-escaped attribute string (as produced by `doublequote`).
+ *  @returns The string with every `\"` collapsed back to `"`.
+ *
+ *  @internal
+ */
+declare function undoublequote(txt: string): string;
 /**
  *  Convert a state name into a URL-friendly slug suitable for use as the
  *  body of a dot/SVG node identifier.  The transformation is:
@@ -459,6 +477,50 @@ declare type VizRenderOpts = {
  *  @internal
  */
 declare function node_block_for<T>(u_jssm: jssm.Machine<T>, l_states: string[], state_index: Map<string, string>, state_kinds: Map<string, StateKind>, hide_labels: boolean, mode: RenderGroups): string;
+/**
+ *  The per-state group-chip map that {@link node_block_for} appends to labels
+ *  in a given render mode.  Mirrors that function's mode dispatch and calls the
+ *  very same chip sources — {@link chips_for_all_groups} for `'chips'`,
+ *  {@link plan_cluster_groups} (with identical inputs) for `'cluster'` — so a
+ *  reconstructed label can never disagree with the one graphviz was handed.
+ *  `'off'`, and any machine that declares no groups, yields an empty map.
+ *
+ *  @internal
+ */
+declare function chips_for_render_mode<T>(u_jssm: jssm.Machine<T>, l_states: string[], mode: RenderGroups): Map<string, string[]>;
+/**
+ *  The exact text graphviz places in each state's SVG `<text>` element(s) when
+ *  a machine is rendered via {@link machine_to_dot} / {@link fsl_to_svg_string}:
+ *  the state's display text plus any group chips the node builder appends, with
+ *  DOT's `\"` escaping undone (SVG carries the literal character).  A label that
+ *  wraps across lines becomes several `<text>` elements; this returns the lines
+ *  joined by `\n`, exactly how {@link extract_state_fills} reads them back — so
+ *  the derived key and the extracted key meet at the same string.
+ *
+ *  This is the single source of truth the static fence renderer keys its
+ *  highlight and recolor lookups against, so those lookups can never drift from
+ *  what was actually drawn — plain labels, group chips, and multi-line wraps
+ *  alike.  It is built by running the node builder's own
+ *  `label_with_chips(doublequote(display_text), chips)` and inverting the one
+ *  escaping step, so it follows any change to the label format for free.
+ *
+ *  @param u_jssm The machine being rendered.
+ *  @param opts Render flags; only `render_groups` affects the label text
+ *  (default `'cluster'`, matching `fsl_to_svg_string`).
+ *  @returns A map from each state name to its rendered SVG label text.
+ *
+ *  ```typescript
+ *  import { sm } from 'jssm';
+ *  import { state_svg_label_texts } from 'jssm/viz';
+ *
+ *  // a state in two groups renders a chip suffix in its node label
+ *  state_svg_label_texts(sm`&g1 : [a b]; &g2 : [a]; a -> b;`).get('a');  // 'a [g1]'
+ *  state_svg_label_texts(sm`a -> b;`).get('a');                          // 'a'
+ *  ```
+ *
+ *  @see extract_state_fills
+ */
+declare function state_svg_label_texts<T>(u_jssm: jssm.Machine<T>, opts?: VizRenderOpts): Map<string, string>;
 /**
  *  Render a {@link jssm.Machine} as a graphviz dot string.
  *
@@ -578,7 +640,7 @@ declare function machine_to_svg_element<T>(u_jssm: jssm.Machine<T>, opts?: VizRe
  *  @deprecated Use {@link machine_to_dot} instead.
  */
 declare function dot<T>(machine: jssm.Machine<T>): string;
-export { configure, dot, dot_to_svg, fsl_to_dot, fsl_to_svg_string, fsl_to_svg_element, machine_to_dot, machine_to_svg_string, machine_to_svg_element, version, build_time };
+export { configure, dot, dot_to_svg, fsl_to_dot, fsl_to_svg_string, fsl_to_svg_element, machine_to_dot, machine_to_svg_string, machine_to_svg_element, state_svg_label_texts, version, build_time };
 export type { VizRenderOpts, RenderGroups };
 /** @internal — test-only access to private helpers. */
 export declare const _test: {
@@ -594,6 +656,7 @@ export declare const _test: {
     style_for_state: typeof style_for_state;
     cluster_id_for: typeof cluster_id_for;
     label_with_chips: typeof label_with_chips;
+    undoublequote: typeof undoublequote;
     group_parent_map: typeof group_parent_map;
     group_ancestry: typeof group_ancestry;
     primary_group_for: typeof primary_group_for;
@@ -601,6 +664,7 @@ export declare const _test: {
     groups_to_subgraph_string: typeof groups_to_subgraph_string;
     chips_for_all_groups: typeof chips_for_all_groups;
     node_block_for: typeof node_block_for;
+    chips_for_render_mode: typeof chips_for_render_mode;
     edge_attr_for: typeof edge_attr_for;
     edge_defaults_body: typeof edge_defaults_body;
     graph_attr_for: typeof graph_attr_for;

package/dist/fence/fence.js

@@ -23789,7 +23789,7 @@ function fslSemanticSpans(text) {
  *  Useful for runtime diagnostics and for embedding in serialized machine
  *  snapshots so that deserializers can detect version-skew.
  */
-const version = "5.159.0";
+const version = "5.159.1";
 
 /**
  *  The FSL Markdown fence convention parser — pure, host-agnostic logic that
@@ -29474,6 +29474,26 @@ function vc(col) {
 function doublequote(txt) {
     return txt.replace(/"/g, '\\"');
 }
+/**
+ *  Reverse {@link doublequote}: turn DOT's `\"` escape back into the literal
+ *  `"` that graphviz renders into SVG `<text>` content.  Used by
+ *  {@link state_svg_label_texts} to reconstruct a node's on-screen label from
+ *  the DOT label it was handed, so the fence renderer keys against exactly what
+ *  was drawn.
+ *
+ *  ```typescript
+ *  undoublequote('a\\"b');  // 'a"b'
+ *  undoublequote('safe');   // 'safe'
+ *  ```
+ *
+ *  @param txt A DOT-escaped attribute string (as produced by `doublequote`).
+ *  @returns The string with every `\"` collapsed back to `"`.
+ *
+ *  @internal
+ */
+function undoublequote(txt) {
+    return txt.replace(/\\"/g, '"');
+}
 /**
  *  Convert a state name into a URL-friendly slug suitable for use as the
  *  body of a dot/SVG node identifier.  The transformation is:
@@ -30357,6 +30377,71 @@ function node_block_for(u_jssm, l_states, state_index, state_kinds, hide_labels,
     const { clusters, ungrouped_nodes } = groups_to_subgraph_string(u_jssm, l_states, state_index, state_kinds, hide_labels);
     return `${clusters}${(clusters && ungrouped_nodes) ? ' ' : ''}${ungrouped_nodes}`;
 }
+/**
+ *  The per-state group-chip map that {@link node_block_for} appends to labels
+ *  in a given render mode.  Mirrors that function's mode dispatch and calls the
+ *  very same chip sources — {@link chips_for_all_groups} for `'chips'`,
+ *  {@link plan_cluster_groups} (with identical inputs) for `'cluster'` — so a
+ *  reconstructed label can never disagree with the one graphviz was handed.
+ *  `'off'`, and any machine that declares no groups, yields an empty map.
+ *
+ *  @internal
+ */
+function chips_for_render_mode(u_jssm, l_states, mode) {
+    if ((mode === 'off') || (u_jssm.groups().length === 0)) {
+        return new Map();
+    }
+    if (mode === 'chips') {
+        return chips_for_all_groups(u_jssm, l_states);
+    }
+    const order = u_jssm.groups();
+    const parents = group_parent_map(u_jssm._group_registry, order);
+    return plan_cluster_groups(u_jssm, l_states, order, parents).chips;
+}
+/**
+ *  The exact text graphviz places in each state's SVG `<text>` element(s) when
+ *  a machine is rendered via {@link machine_to_dot} / {@link fsl_to_svg_string}:
+ *  the state's display text plus any group chips the node builder appends, with
+ *  DOT's `\"` escaping undone (SVG carries the literal character).  A label that
+ *  wraps across lines becomes several `<text>` elements; this returns the lines
+ *  joined by `\n`, exactly how {@link extract_state_fills} reads them back — so
+ *  the derived key and the extracted key meet at the same string.
+ *
+ *  This is the single source of truth the static fence renderer keys its
+ *  highlight and recolor lookups against, so those lookups can never drift from
+ *  what was actually drawn — plain labels, group chips, and multi-line wraps
+ *  alike.  It is built by running the node builder's own
+ *  `label_with_chips(doublequote(display_text), chips)` and inverting the one
+ *  escaping step, so it follows any change to the label format for free.
+ *
+ *  @param u_jssm The machine being rendered.
+ *  @param opts Render flags; only `render_groups` affects the label text
+ *  (default `'cluster'`, matching `fsl_to_svg_string`).
+ *  @returns A map from each state name to its rendered SVG label text.
+ *
+ *  ```typescript
+ *  import { sm } from 'jssm';
+ *  import { state_svg_label_texts } from 'jssm/viz';
+ *
+ *  // a state in two groups renders a chip suffix in its node label
+ *  state_svg_label_texts(sm`&g1 : [a b]; &g2 : [a]; a -> b;`).get('a');  // 'a [g1]'
+ *  state_svg_label_texts(sm`a -> b;`).get('a');                          // 'a'
+ *  ```
+ *
+ *  @see extract_state_fills
+ */
+function state_svg_label_texts(u_jssm, opts = {}) {
+    var _a, _b;
+    const l_states = u_jssm.states();
+    const mode = (_a = opts.render_groups) !== null && _a !== void 0 ? _a : 'cluster';
+    const chips = chips_for_render_mode(u_jssm, l_states, mode);
+    const out = new Map();
+    for (const s of l_states) {
+        const dot_label = label_with_chips(doublequote(u_jssm.display_text(s)), (_b = chips.get(s)) !== null && _b !== void 0 ? _b : []);
+        out.set(s, undoublequote(dot_label));
+    }
+    return out;
+}
 /**
  *  Render a {@link jssm.Machine} as a graphviz dot string.
  *
@@ -30473,6 +30558,17 @@ async function fsl_to_svg_string(fsl, opts = {}) {
     return dot_to_svg(fsl_to_dot(fsl, opts), opts);
 }
 
+/**
+ * The render targets supported in v1, in canonical order (the CLI `--target`
+ * enum and `--help` list order).  This tuple is the single runtime source of
+ * truth: both the {@link RenderTarget} type and the `fsl-render` CLI's
+ * `--target` enum derive from it, so a new target is declared in exactly one
+ * place.  Future targets (mermaid, plantuml, scxml, ascii, fsl) land here in
+ * v0.2+.
+ *
+ * @example
+ * RENDER_TARGETS.includes('gif' as RenderTarget);  // true
+ */
 /**
  * Base error class for render-time failures.
  */
@@ -31330,8 +31426,22 @@ function xml_unescape(s) {
 }
 /** Match one graphviz node group; capture [1] the group body. @internal */
 const NODE_GROUP_RE = /<g[^>]*\bclass="node"[^>]*>([\s\S]*?)<\/g>/g;
-const TEXT_RE = /<text[^>]*>([\s\S]*?)<\/text>/;
+const TEXT_RE_G = /<text[^>]*>([\s\S]*?)<\/text>/g;
 const SHAPE_FILL_RE = /(<(?:ellipse|polygon|path)\b[^>]*\bfill=")([^"]*)(")/;
+/**
+ *  The state key for one node group: the XML-unescaped content of *every* one
+ *  of its `<text>` elements, joined by `\n`.  Graphviz splits a label that
+ *  wraps across lines into one `<text>` per line, so reading only the first
+ *  would key on a truncated string; joining the lines with `\n` reconstructs
+ *  the machine's display text exactly (matching `state_svg_label_texts`).
+ *  Returns `null` for a node group carrying no `<text>` element at all.
+ *
+ *  @internal
+ */
+function node_label_text(body) {
+    const lines = [...body.matchAll(TEXT_RE_G)].map(m => xml_unescape(m[1]));
+    return lines.length === 0 ? null : lines.join('\n');
+}
 /**
  *  Read each state's current fill color out of a graphviz-rendered machine
  *  SVG, keyed by state name.  States whose shape carries no `fill` attribute
@@ -31348,13 +31458,10 @@ function extract_state_fills(svg) {
     const out = new Map();
     for (const group of svg.matchAll(NODE_GROUP_RE)) {
         const body = group[1];
-        const text = body.match(TEXT_RE);
+        const label = node_label_text(body);
         const shape = body.match(SHAPE_FILL_RE);
-        if (shape !== null && text !== null) {
-            const state_name = xml_unescape(text[1]);
-            if (state_name) {
-                out.set(state_name, shape[2]);
-            }
+        if (shape !== null && label !== null && label !== '') {
+            out.set(label, shape[2]);
         }
     }
     return out;
@@ -31379,11 +31486,11 @@ function patch_state_fill(svg, state, fill) {
         if (done) {
             return whole;
         }
-        const text = body.match(TEXT_RE);
-        if (text === null) {
+        const label = node_label_text(body);
+        if (label === null) {
             return whole;
         }
-        if (xml_unescape(text[1]) !== state) {
+        if (label !== state) {
             return whole;
         }
         // Function-form replacements: `fill` is caller-supplied and may itself
@@ -48858,7 +48965,8 @@ function quantize(rgba, max_colors = 256) {
         throw new JssmError(undefined, 'quantize: max_colors must be 2..256');
     }
     const pixel_count = rgba.length / 4;
-    // composite over white, build histogram of packed rgb keys
+    // composite over white, build histogram of packed rgb keys (packed[] retained
+    // so the per-pixel index step below need not recompute the keys)
     const packed = new Uint32Array(pixel_count);
     const histogram = new Map();
     for (let i = 0; i < pixel_count; ++i) {
@@ -48866,6 +48974,48 @@ function quantize(rgba, max_colors = 256) {
         packed[i] = key;
         histogram.set(key, ((_a = histogram.get(key)) !== null && _a !== void 0 ? _a : 0) + 1);
     }
+    const { palette, palette_count, index_of } = palette_from_histogram(histogram, max_colors);
+    const indices = new Uint8Array(pixel_count);
+    for (let i = 0; i < pixel_count; ++i) {
+        indices[i] = index_of.get(packed[i]);
+    }
+    return { palette, palette_count, indices };
+}
+/**
+ *  Accumulate one RGBA frame's composited-over-white colors into a shared
+ *  packed-rgb histogram, so an animation's union palette can be built by
+ *  streaming frame-by-frame instead of concatenating every frame's pixels into
+ *  one buffer first.  Iterating frames in order reproduces the exact key/count
+ *  sequence a concatenated buffer would yield, so the resulting palette is
+ *  byte-identical to quantizing the concatenation.
+ *
+ *  @param rgba - Straight RGBA bytes; length must be a multiple of 4.
+ *  @param histogram - Packed 0xRRGGBB key → count, mutated in place.
+ *
+ *  @example
+ *  const h = new Map<number, number>();
+ *  accumulate_histogram(new Uint8Array([255,0,0,255]), h);  // h: { 0xff0000 => 1 }
+ *
+ *  @internal
+ */
+function accumulate_histogram(rgba, histogram) {
+    var _a;
+    const pixel_count = rgba.length / 4;
+    for (let i = 0; i < pixel_count; ++i) {
+        const key = packed_over_white(rgba, i);
+        histogram.set(key, ((_a = histogram.get(key)) !== null && _a !== void 0 ? _a : 0) + 1);
+    }
+}
+/**
+ *  Derive a color palette from a packed-rgb histogram: when the histogram holds
+ *  `max_colors` or fewer distinct colors they are preserved exactly (in
+ *  insertion order); otherwise a median-cut partition supplies the palette.
+ *  Returned alongside the palette is `index_of`, mapping each source color key
+ *  to its palette slot, so callers can translate their own pixels.
+ *
+ *  @internal
+ */
+function palette_from_histogram(histogram, max_colors) {
     const distinct = [...histogram.keys()];
     if (distinct.length <= max_colors) {
         const index_of = new Map();
@@ -48876,13 +49026,9 @@ function quantize(rgba, max_colors = 256) {
             palette[i * 3 + 1] = (key >> 8) & 0xff;
             palette[i * 3 + 2] = key & 0xff;
         });
-        const indices = new Uint8Array(pixel_count);
-        for (let i = 0; i < pixel_count; ++i) {
-            indices[i] = index_of.get(packed[i]);
-        }
-        return { palette, palette_count: distinct.length, indices };
+        return { palette, palette_count: distinct.length, index_of };
     }
-    return median_cut(packed, histogram, max_colors);
+    return median_cut_palette(histogram, max_colors);
 }
 /** Channel extractors for packed 0xRRGGBB keys. @internal */
 const CHANNELS = [
@@ -48891,13 +49037,15 @@ const CHANNELS = [
     key => key & 0xff,
 ];
 /**
- *  Median-cut quantization over a pre-built histogram.  Splits the box with
- *  the widest channel range at its count-weighted median until `max_colors`
- *  boxes exist, then averages each box into a palette entry.
+ *  Median-cut palette over a pre-built histogram.  Splits the box with the
+ *  widest channel range at its count-weighted median until `max_colors` boxes
+ *  exist, then averages each box into a palette entry.  Returns the palette and
+ *  the color→slot map only; per-pixel indices are the caller's concern (the
+ *  animation encoder maps each frame separately, so it never needs them here).
  *
  *  @internal
  */
-function median_cut(packed, histogram, max_colors) {
+function median_cut_palette(histogram, max_colors) {
     const boxes = [[...histogram.keys()]];
     while (boxes.length < max_colors) {
         // pick the box with the widest single-channel range
@@ -48954,11 +49102,7 @@ function median_cut(packed, histogram, max_colors) {
         palette[bi * 3 + 1] = Math.round(g / n);
         palette[bi * 3 + 2] = Math.round(b / n);
     });
-    const indices = new Uint8Array(packed.length);
-    for (let i = 0; i < packed.length; ++i) {
-        indices[i] = index_of.get(packed[i]);
-    }
-    return { palette, palette_count: boxes.length, indices };
+    return { palette, palette_count: boxes.length, index_of };
 }
 /**
  *  GIF-variant LZW compression: emits a leading clear code, grows code width
@@ -49036,8 +49180,9 @@ function lzw_encode(indices, min_code_size) {
  *  @param frames - At least one frame; all with identical width/height and
  *  `rgba.length === 4 · width · height`.
  *
- *  @throws {JssmError} on zero frames, mismatched dimensions, or an rgba
- *  buffer whose length contradicts its stated dimensions.
+ *  @throws {JssmError} on zero frames, a zero-width or zero-height frame,
+ *  mismatched dimensions, or an rgba buffer whose length contradicts its
+ *  stated dimensions.
  *
  *  @example
  *  const red = { rgba: new Uint8Array([255,0,0,255]), width: 1, height: 1 };
@@ -49050,6 +49195,12 @@ function encode_gif(frames, opts = {}) {
         throw new JssmError(undefined, 'encode_gif: at least one frame is required');
     }
     const { width, height } = frames[0];
+    if (width === 0 || height === 0) {
+        // A 0×0 (or 0×h / w×0) frame passes the `4·w·h === rgba.length` check with
+        // an empty buffer, then reaches lzw_encode where `indices[0]!` coerces
+        // undefined into a bogus code 0 — a silently-corrupt GIF. Fail loudly here.
+        throw new JssmError(undefined, `encode_gif: frame dimensions must be non-zero (got ${width}x${height})`);
+    }
     for (const f of frames) {
         if (f.width !== width || f.height !== height) {
             throw new JssmError(undefined, `encode_gif: frame dimensions differ (${f.width}x${f.height} vs ${width}x${height})`);
@@ -49060,25 +49211,30 @@ function encode_gif(frames, opts = {}) {
     }
     const delay_cs = (_a = opts.delay_cs) !== null && _a !== void 0 ? _a : 70;
     const loop = (_b = opts.loop) !== null && _b !== void 0 ? _b : 0;
-    // global palette from all frames combined; when few distinct colors exist, preserve all exactly
-    const combined = new Uint8Array(frames.reduce((sum, f) => sum + f.rgba.length, 0));
-    let pos = 0;
+    // Global palette over the UNION of every frame, built by streaming each
+    // frame's histogram rather than concatenating all frames into one buffer
+    // first (64 frames × w×h×4 can reach hundreds of MB on a big machine).
+    // Frames are visited in order, so the key/count sequence — and therefore the
+    // palette — is byte-identical to quantizing the concatenation.
+    const union_histogram = new Map();
     for (const f of frames) {
-        combined.set(f.rgba, pos);
-        pos += f.rgba.length;
+        accumulate_histogram(f.rgba, union_histogram);
     }
-    const quantized = quantize(combined, 256);
-    const gct_bits = Math.max(1, Math.ceil(Math.log2(Math.max(2, quantized.palette_count))));
+    const { palette, palette_count } = palette_from_histogram(union_histogram, 256);
+    const gct_bits = Math.max(1, Math.ceil(Math.log2(Math.max(2, palette_count))));
     const gct_size = 1 << gct_bits;
     const min_code_size = Math.max(2, gct_bits);
-    /** Map a frame's pixels to nearest entries of the union-quantized global palette. @internal */
+    // One nearest-color cache for the whole encode: the global palette is
+    // identical across frames, so a color's best index never changes frame to
+    // frame — rebuilding the cache per frame only re-did the same work.
+    const palette_cache = new Map();
+    /** Map a frame's pixels to nearest entries of the union global palette. @internal */
     const map_to_palette = (rgba) => {
         const n = rgba.length / 4;
         const out = new Uint8Array(n);
-        const cache = new Map();
         for (let i = 0; i < n; ++i) {
             const key = packed_over_white(rgba, i);
-            const hit = cache.get(key);
+            const hit = palette_cache.get(key);
             if (hit !== undefined) {
                 out[i] = hit;
                 continue;
@@ -49087,67 +49243,83 @@ function encode_gif(frames, opts = {}) {
             const g = (key >> 8) & 0xff;
             const b = key & 0xff;
             let best = 0, best_d = Infinity;
-            for (let p = 0; p < quantized.palette_count; ++p) {
-                const dr = r - quantized.palette[p * 3];
-                const dg = g - quantized.palette[p * 3 + 1];
-                const db = b - quantized.palette[p * 3 + 2];
+            for (let p = 0; p < palette_count; ++p) {
+                const dr = r - palette[p * 3];
+                const dg = g - palette[p * 3 + 1];
+                const db = b - palette[p * 3 + 2];
                 const d = dr * dr + dg * dg + db * db;
                 if (d < best_d) {
                     best_d = d;
                     best = p;
                 }
             }
-            cache.set(key, best);
+            palette_cache.set(key, best);
             out[i] = best;
         }
         return out;
     };
-    const bytes = [];
-    const push_u16 = (v) => { bytes.push(v & 0xff, (v >> 8) & 0xff); };
+    // Output accumulates into a growable Uint8Array (doubling on demand) rather
+    // than a boxed-integer number[]; the final GIF is `out.subarray(0, len)`.
+    let out = new Uint8Array(1024);
+    let len = 0;
+    const need = (extra) => {
+        if (len + extra > out.length) {
+            const bigger = new Uint8Array(Math.max(out.length * 2, len + extra));
+            bigger.set(out.subarray(0, len));
+            out = bigger;
+        }
+    };
+    const push = (...vals) => {
+        need(vals.length);
+        for (let k = 0; k < vals.length; ++k) {
+            out[len++] = vals[k] & 0xff;
+        }
+    };
+    const push_u16 = (v) => { push(v & 0xff, (v >> 8) & 0xff); };
     // header + logical screen descriptor
-    bytes.push(0x47, 0x49, 0x46, 0x38, 0x39, 0x61); // "GIF89a"
+    push(0x47, 0x49, 0x46, 0x38, 0x39, 0x61); // "GIF89a"
     push_u16(width);
     push_u16(height);
-    bytes.push(0x80 | 0x70 | (gct_bits - 1)); // GCT present, color res 8-bit, size
-    bytes.push(0, 0); // background index, aspect
+    push(0x80 | 0x70 | (gct_bits - 1)); // GCT present, color res 8-bit, size
+    push(0, 0); // background index, aspect
     // global color table, padded to 2^gct_bits entries
     for (let p = 0; p < gct_size; ++p) {
-        if (p < quantized.palette_count) {
-            bytes.push(quantized.palette[p * 3], quantized.palette[p * 3 + 1], quantized.palette[p * 3 + 2]);
+        if (p < palette_count) {
+            push(palette[p * 3], palette[p * 3 + 1], palette[p * 3 + 2]);
         }
         else {
-            bytes.push(0, 0, 0);
+            push(0, 0, 0);
         }
     }
     // Netscape looping extension
-    bytes.push(0x21, 0xFF, 0x0B);
-    bytes.push(...'NETSCAPE2.0'.split('').map(c => c.charCodeAt(0)));
-    bytes.push(0x03, 0x01);
+    push(0x21, 0xFF, 0x0B);
+    push(...'NETSCAPE2.0'.split('').map(c => c.charCodeAt(0)));
+    push(0x03, 0x01);
     push_u16(loop);
-    bytes.push(0x00);
+    push(0x00);
     for (let fi = 0; fi < frames.length; ++fi) {
         // graphics control extension: disposal 1 (leave in place), no transparency
-        bytes.push(0x21, 0xF9, 0x04, 0x04);
+        push(0x21, 0xF9, 0x04, 0x04);
         push_u16(delay_cs);
-        bytes.push(0x00, 0x00);
+        push(0x00, 0x00);
         // image descriptor: full frame, no local color table
-        bytes.push(0x2C);
+        push(0x2C);
         push_u16(0);
         push_u16(0);
         push_u16(width);
         push_u16(height);
-        bytes.push(0x00);
+        push(0x00);
         const indices = map_to_palette(frames[fi].rgba);
-        const packed = lzw_encode(indices, min_code_size);
-        bytes.push(min_code_size);
-        for (let at = 0; at < packed.length; at += 255) {
-            const chunk = packed.slice(at, at + 255);
-            bytes.push(chunk.length, ...chunk);
+        const packed_lzw = lzw_encode(indices, min_code_size);
+        push(min_code_size);
+        for (let at = 0; at < packed_lzw.length; at += 255) {
+            const chunk = packed_lzw.slice(at, at + 255);
+            push(chunk.length, ...chunk);
         }
-        bytes.push(0x00); // block terminator
+        push(0x00); // block terminator
     }
-    bytes.push(0x3B); // trailer
-    return new Uint8Array(bytes);
+    push(0x3B); // trailer
+    return out.slice(0, len);
 }
 
 /**
@@ -49178,32 +49350,33 @@ function error_box(source, message) {
 /** Note comment, invisible but inspectable. @internal */
 const note_comment = (note) => `<!-- fsl-fence: ${escape_html(note)} -->`;
 /**
- *  Remap a display-text-keyed fill map (as produced by
- *  {@link extract_state_fills} from a rendered SVG) to be keyed by state
- *  NAME instead. Graphviz nodes are labeled with each state's display text
- *  (`label ?? name` — the same derivation `jssm_viz.ts`'s `state_node_line`
- *  uses via `machine.display_text(s)`), but `highlight_fsl_html`'s
- *  `state_colors` option is keyed by the state's own name (the code
- *  highlighter's semantic spans carry names, not labels). Without this
- *  remap, any labeled state's diagram color silently fails to reach its
- *  code span.
- *
- *  Handles the simple one-label-per-state case only; group-chip-suffixed
- *  labels (`label_with_chips` in jssm_viz.ts) render extra text after the
- *  label that this remap does not account for — filed as a follow-up.
- *
- *  @param machine - The constructed machine the fills were rendered from.
- *  @param fills - Display-text-keyed fills, from `extract_state_fills`.
+ *  Remap an SVG-label-keyed fill map (as produced by
+ *  {@link extract_state_fills} from a rendered SVG) to be keyed by state NAME
+ *  instead. Graphviz labels each node with its full rendered label text —
+ *  display text, plus any group chips, plus any multi-line wrap — while
+ *  `highlight_fsl_html`'s `state_colors` option is keyed by the state's own
+ *  name (the code highlighter's semantic spans carry names, not labels).
+ *  Without this remap, any state whose label diverges from its name silently
+ *  fails to carry its diagram color to its code span.
+ *
+ *  Both sides of the join derive the SVG label text from the same source:
+ *  `label_texts` comes from {@link state_svg_label_texts} (the viz's own label
+ *  builder) and `fills`'s keys are read straight off the SVG, so group chips
+ *  and multi-line labels are handled without either side drifting.
+ *
+ *  @param label_texts - State name → its rendered SVG label text, from
+ *  `state_svg_label_texts`.
+ *  @param fills - SVG-label-keyed fills, from `extract_state_fills`.
  *  @returns Fills re-keyed by state name; states with no matching fill are omitted.
  *
  *  @internal
  */
-function state_colors_by_name(machine, fills) {
+function state_colors_by_name(label_texts, fills) {
     const out = new Map();
-    for (const s of machine.states()) {
-        const fill = fills.get(machine.display_text(s));
+    for (const [state, label] of label_texts) {
+        const fill = fills.get(label);
         if (fill !== undefined) {
-            out.set(s, fill);
+            out.set(state, fill);
         }
     }
     return out;
@@ -49246,7 +49419,7 @@ async function render_fence_html(source, info, opts = {}) {
     }
     const svg = await fsl_to_svg_string(source);
     const fills = extract_state_fills(svg);
-    const state_colors = state_colors_by_name(machine, fills);
+    const state_colors = state_colors_by_name(state_svg_label_texts(machine), fills);
     const chunks = desc.notes.map(note_comment);
     for (const part of desc.parts) {
         if (INTERACTIVE_PARTS.has(part)) {
@@ -49381,14 +49554,15 @@ async function render_fence_gif(source, opts = {}) {
     const base_svg = await fsl_to_svg_string(source);
     const highlight = (_b = opts.highlight_fill) !== null && _b !== void 0 ? _b : '#ff9930';
     const scale = (_c = opts.scale) !== null && _c !== void 0 ? _c : 100;
+    const label_texts = state_svg_label_texts(machine);
     const frames = [];
     for (const state of walk) {
-        // base_svg's nodes are labeled with display text (label ?? name; the
-        // same `machine.display_text(s)` derivation jssm_viz.ts's
-        // state_node_line uses), not the walk's state NAME — patch by that or
-        // a labeled state's frame silently no-ops (see state_colors_by_name for
-        // the render_fence_html analog of this same fix).
-        const patched = patch_state_fill(base_svg, machine.display_text(state), highlight);
+        // base_svg's nodes are labeled with their full SVG label text (display
+        // text + any group chips + any multi-line wrap), not the walk's state
+        // NAME — patch by the shared derivation or a labeled/chipped/wrapped
+        // state's frame silently no-ops. `walk` is drawn from the machine's own
+        // states, so every entry has a label_texts key.
+        const patched = patch_state_fill(base_svg, label_texts.get(state), highlight);
         const raster = await rasterizeRgba(patched, { scale });
         frames.push({ rgba: raster.rgba, width: raster.width, height: raster.height });
     }