@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/source-diff-viewer/source-diff-viewer.css

@@ -0,0 +1,129 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-source-diff-viewer {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-relaxed);
+  }
+
+  .cinder-source-diff-viewer__empty {
+    margin: 0;
+    padding: var(--cinder-space-4);
+    color: var(--cinder-text-muted);
+    font-family: var(--cinder-font-sans);
+  }
+
+  .cinder-source-diff-viewer__notice {
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-color-warning-bg);
+    color: var(--cinder-color-warning-fg);
+    font-family: var(--cinder-font-sans);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-source-diff-viewer__file + .cinder-source-diff-viewer__file {
+    border-top: 1px solid var(--cinder-border);
+  }
+
+  .cinder-source-diff-viewer__file-header {
+    display: flex;
+    align-items: center;
+    min-block-size: 2rem;
+    padding: var(--cinder-space-1-5) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-surface-raised);
+  }
+
+  .cinder-source-diff-viewer__file-path {
+    overflow-wrap: anywhere;
+    color: var(--cinder-text);
+    font-weight: var(--cinder-font-medium);
+    white-space: break-spaces;
+  }
+
+  .cinder-source-diff-viewer__metadata {
+    display: grid;
+    gap: var(--cinder-space-0-5);
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+    color: var(--cinder-text-muted);
+    background: var(--cinder-surface-inset);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-source-diff-viewer__metadata code {
+    font: inherit;
+    overflow-wrap: anywhere;
+    white-space: break-spaces;
+  }
+
+  .cinder-source-diff-viewer__hunk + .cinder-source-diff-viewer__hunk {
+    border-top: 1px solid var(--cinder-border-muted);
+  }
+
+  .cinder-source-diff-viewer__hunk-header {
+    padding: var(--cinder-space-1) var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    overflow-wrap: anywhere;
+    white-space: break-spaces;
+  }
+
+  .cinder-source-diff-viewer__lines {
+    display: grid;
+  }
+
+  .cinder-source-diff-viewer__line {
+    display: grid;
+    grid-template-columns: 4.5ch 4.5ch minmax(0, 1fr);
+    min-inline-size: 100%;
+    border-top: 1px solid transparent;
+    font-variant-ligatures: none;
+  }
+
+  .cinder-source-diff-viewer__line:first-child {
+    border-top: 0;
+  }
+
+  .cinder-source-diff-viewer__line[data-cinder-line-kind='addition'] {
+    background: var(--cinder-color-success-bg);
+  }
+
+  .cinder-source-diff-viewer__line[data-cinder-line-kind='removal'] {
+    background: var(--cinder-color-danger-bg);
+  }
+
+  .cinder-source-diff-viewer__line[data-cinder-line-kind='context'],
+  .cinder-source-diff-viewer__line[data-cinder-line-kind='metadata'] {
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-source-diff-viewer__line-number {
+    padding: 0 var(--cinder-space-2);
+    border-inline-end: 1px solid var(--cinder-border-muted);
+    color: var(--cinder-text-muted);
+    text-align: end;
+    user-select: none;
+  }
+
+  .cinder-source-diff-viewer__line-code {
+    padding: 0 var(--cinder-space-3);
+    overflow-wrap: anywhere;
+    white-space: break-spaces;
+    color: var(--cinder-text);
+    font: inherit;
+  }
+
+  .cinder-source-diff-viewer__line:not(:has(.cinder-source-diff-viewer__line-number)) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/components/source-diff-viewer/source-diff-viewer.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/source-diff-viewer/source-diff-viewer.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/source-diff-viewer/source-diff-viewer.schema.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/source-diff-viewer/source-diff-viewer.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    patch: {
+      type: "string",
+      description: "Unified patch text to parse and render."
+    },
+    ariaLabel: {
+      type: "string",
+      description: "Accessible label for the diff region."
+    },
+    maxLines: {
+      type: "integer",
+      description: "Maximum number of diff rows to render before truncating.",
+      minimum: 0,
+      default: 1000
+    },
+    lineNumbers: {
+      type: "boolean",
+      description: "Whether old and new line-number gutters are rendered.",
+      default: true
+    },
+    emptyMessage: {
+      type: "string",
+      description: "Message shown when the patch is empty or contains no diffable rows.",
+      default: "No patch lines to display."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes merged with `.cinder-source-diff-viewer`."
+    }
+  },
+  additionalProperties: false,
+  required: ["patch"]
+};
+var source_diff_viewer_schema_default = schema;
+export {
+  source_diff_viewer_schema_default as default
+};
+
+//# debugId=6D1C99910FC22B4D64756E2164756E21

package/dist/components/source-diff-viewer/source-diff-viewer.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status beta
+ * @purpose Lightweight unified-patch viewer for source-code and operational diffs with file headers, hunk headers, line state styling, and bounded rendering.
+ * @tag diff
+ * @tag source
+ * @tag code
+ * @useWhen Rendering source-code unified patches from agent output, Git operations, workspace changes, or review systems.
+ * @useWhen Showing operational patch output where file and hunk structure matters more than Markdown front matter or word-level prose review.
+ * @avoidWhen Comparing two Markdown documents with normalization, front-matter handling, and revert affordances. | diff-viewer
+ * @avoidWhen Showing syntax-highlighted code samples rather than patch output. | code-block
+ * @related diff-viewer, diff-statistics, code-block
+ */
+export type { SourceDiffFile, SourceDiffHunk, SourceDiffLine, SourceDiffLineKind, SourceDiffParseResult, SourceDiffViewerProps, } from './source-diff-viewer.types.ts';
+export { getSourceDiffFileLabel, getSourceDiffLineLabel, parseUnifiedPatch, } from './source-diff-viewer.utilities.ts';
+import type { SourceDiffViewerProps } from './source-diff-viewer.types.ts';
+declare const SourceDiffViewer: import("svelte").Component<SourceDiffViewerProps, {}, "">;
+type SourceDiffViewer = ReturnType<typeof SourceDiffViewer>;
+export default SourceDiffViewer;

package/dist/components/source-diff-viewer/source-diff-viewer.types.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type SourceDiffLineKind = 'addition' | 'removal' | 'context' | 'metadata';
+export type SourceDiffLine = {
+    kind: SourceDiffLineKind;
+    content: string;
+    oldLineNumber: number | null;
+    newLineNumber: number | null;
+    metadataPrefix?: '\\';
+};
+export type SourceDiffHunk = {
+    header: string;
+    oldStart: number | null;
+    oldCount: number | null;
+    newStart: number | null;
+    newCount: number | null;
+    lines: SourceDiffLine[];
+};
+export type SourceDiffFile = {
+    oldPath: string | null;
+    newPath: string | null;
+    header: string | null;
+    metadata: string[];
+    hunks: SourceDiffHunk[];
+};
+export type SourceDiffParseResult = {
+    files: SourceDiffFile[];
+    totalLineCount: number;
+    renderedLineCount: number;
+    truncated: boolean;
+};
+export type SourceDiffViewerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** Unified patch text to parse and render. */
+    patch: string;
+    /** Accessible label for the diff region. */
+    ariaLabel?: string;
+    /** Maximum number of diff rows to render before truncating. */
+    maxLines?: number;
+    /** Whether old and new line-number gutters are rendered. */
+    lineNumbers?: boolean;
+    /** Message shown when the patch is empty or contains no diffable rows. */
+    emptyMessage?: string;
+    /** Additional CSS classes merged with `.cinder-source-diff-viewer`. */
+    class?: string;
+};

package/dist/components/source-diff-viewer/source-diff-viewer.utilities.d.ts

@@ -0,0 +1,6 @@
+import type { SourceDiffFile, SourceDiffLine, SourceDiffParseResult } from './source-diff-viewer.types.ts';
+export declare function getSourceDiffFileLabel(file: SourceDiffFile): string;
+export declare function getSourceDiffLineLabel(line: SourceDiffLine): string;
+export declare function parseUnifiedPatch(patch: string, options?: {
+    maxLines?: number;
+}): SourceDiffParseResult;

package/dist/components/source-diff-viewer/source-diff-viewer.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/source-diff-viewer/source-diff-viewer.variables.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/source-diff-viewer/source-diff-viewer.variables.ts
+var variables = [];
+var source_diff_viewer_variables_default = variables;
+export {
+  source_diff_viewer_variables_default as default
+};
+
+//# debugId=89F7E32CCD244DAC64756E2164756E21

package/dist/components/sparkbar/index.js

@@ -64,24 +64,25 @@ function classNames(...parts) {
 }
 
 // src/components/sparkbar/sparkbar.svelte
-var root_1 = $.from_html(`<span class="cinder-sparkbar__trailing"> </span>`);
-var root = $.from_html(`<div><div class="cinder-sparkbar__row"><span class="cinder-sparkbar__label"> </span> <!></div> <div class="cinder-sparkbar__track" aria-hidden="true"><div class="cinder-sparkbar__fill"></div></div></div>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "max",
+  "label",
+  "trailing",
+  "size",
+  "variant",
+  "ariaLabel",
+  "ariaValueText",
+  "class"
+]);
+var root = $.from_html(`<span class="cinder-sparkbar__trailing"> </span>`);
+var root_1 = $.from_html(`<div><div class="cinder-sparkbar__row"><span class="cinder-sparkbar__label"> </span> <!></div> <div class="cinder-sparkbar__track" aria-hidden="true"><div class="cinder-sparkbar__fill"></div></div></div>`);
 function Sparkbar($$anchor, $$props) {
   $.push($$props, true);
-  let max = $.prop($$props, "max", 3, 1), size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "accent"), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "max",
-    "label",
-    "trailing",
-    "size",
-    "variant",
-    "ariaLabel",
-    "ariaValueText",
-    "class"
-  ]);
+  let max = $.prop($$props, "max", 3, 1), size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "accent"), rest = $.rest_props($$props, rest_excludes);
   const effectiveMax = $.derived(() => Number.isFinite(max()) && max() > 0 ? max() : 1);
   const clampedValue = $.derived(() => Number.isFinite($$props.value) ? Math.max(0, Math.min($.get(effectiveMax), $$props.value)) : 0);
   const percent = $.derived(() => Math.round($.get(clampedValue) / $.get(effectiveMax) * 100));
@@ -90,7 +91,7 @@ function Sparkbar($$anchor, $$props) {
   const normalizedAriaValueText = $.derived(() => $$props.ariaValueText?.trim() || undefined);
   const accessibleName = $.derived(() => $.get(normalizedAriaLabel) ?? `${$$props.label}, ${$.get(percent)}%`);
   const accessibleValueText = $.derived(() => $.get(normalizedAriaValueText) ?? $.get(normalizedTrailing));
-  var div = root();
+  var div = root_1();
   $.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
@@ -110,7 +111,7 @@ function Sparkbar($$anchor, $$props) {
   var node = $.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var span_1 = root_1();
+      var span_1 = root();
       var text_1 = $.child(span_1, true);
       $.reset(span_1);
       $.template_effect(() => $.set_text(text_1, $.get(normalizedTrailing)));
@@ -144,4 +145,4 @@ export {
   Sparkbar
 };
 
-//# debugId=5F47506FA597864064756E2164756E21
+//# debugId=426931D99A8E75E164756E2164756E21

package/dist/components/spectrogram/index.js

@@ -839,39 +839,39 @@ function useResizeObserver(onResize, options = {}) {
 }
 
 // src/components/spectrogram/spectrogram.svelte
-var root_1 = $2.from_html(`<p class="cinder-spectrogram__description"> </p>`);
-var root_2 = $2.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
-var root_5 = $2.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
-var root_8 = $2.from_svg(`<title> </title>`);
-var root_11 = $2.from_svg(`<rect class="cinder-spectrogram__cell" aria-hidden="true"></rect>`);
-var root_13 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
-var root_15 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
-var root_9 = $2.from_svg(`<g><!><!><!></g>`);
-var root_17 = $2.from_html(`<th scope="col"> </th>`);
-var root_19 = $2.from_html(`<td> </td>`);
-var root_18 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
-var root_16 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency bin</th><!></tr></thead><tbody></tbody></table>`);
-var root = $2.from_html(`<figure><!> <div class="cinder-spectrogram__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "label",
+  "description",
+  "frames",
+  "frequencyLabels",
+  "height",
+  "loading",
+  "dataTableVisibility",
+  "dataTableCaption",
+  "class",
+  "empty",
+  "loadingContent",
+  "id"
+]);
+var root = $2.from_html(`<p class="cinder-spectrogram__description"> </p>`);
+var root_1 = $2.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
+var root_2 = $2.from_svg(`<title> </title>`);
+var root_3 = $2.from_svg(`<rect class="cinder-spectrogram__cell" aria-hidden="true"></rect>`);
+var root_4 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
+var root_5 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_6 = $2.from_svg(`<g><!><!><!></g>`);
+var root_7 = $2.from_html(`<th scope="col"> </th>`);
+var root_8 = $2.from_html(`<td> </td>`);
+var root_9 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
+var root_10 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency bin</th><!></tr></thead><tbody></tbody></table>`);
+var root_11 = $2.from_html(`<figure><!> <div class="cinder-spectrogram__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Spectrogram($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
-  let height = $2.prop($$props, "height", 3, 200), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "label",
-    "description",
-    "frames",
-    "frequencyLabels",
-    "height",
-    "loading",
-    "dataTableVisibility",
-    "dataTableCaption",
-    "class",
-    "empty",
-    "loadingContent",
-    "id"
-  ]);
+  let height = $2.prop($$props, "height", 3, 200), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, rest_excludes);
   const rootId = $2.derived(() => $$props.id ?? generatedId);
   const descriptionId = $2.derived(() => $$props.description ? `${$2.get(rootId)}-description` : undefined);
   const marginTop = 8;
@@ -920,7 +920,7 @@ function Spectrogram($$anchor, $$props) {
       return "—";
     return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(value);
   }
-  var figure = root();
+  var figure = root_11();
   $2.attribute_effect(figure, ($0) => ({
     ...rest,
     id: $2.get(rootId),
@@ -931,7 +931,7 @@ function Spectrogram($$anchor, $$props) {
   var node = $2.child(figure);
   {
     var consequent = ($$anchor2) => {
-      var p = root_1();
+      var p = root();
       var text2 = $2.child(p, true);
       $2.reset(p);
       $2.template_effect(() => {
@@ -950,7 +950,7 @@ function Spectrogram($$anchor, $$props) {
   var node_1 = $2.child(div);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_1 = root_2();
+      var div_1 = root_1();
       var node_2 = $2.child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
@@ -974,7 +974,7 @@ function Spectrogram($$anchor, $$props) {
       $2.append($$anchor2, div_1);
     };
     var consequent_4 = ($$anchor2) => {
-      var div_2 = root_5();
+      var div_2 = root_1();
       var node_4 = $2.child(div_2);
       {
         var consequent_3 = ($$anchor3) => {
@@ -1008,7 +1008,7 @@ function Spectrogram($$anchor, $$props) {
   var node_6 = $2.child(svg);
   {
     var consequent_5 = ($$anchor2) => {
-      var title = root_8();
+      var title = root_2();
       var text_3 = $2.child(title, true);
       $2.reset(title);
       $2.template_effect(() => {
@@ -1025,14 +1025,14 @@ function Spectrogram($$anchor, $$props) {
   var node_7 = $2.sibling(node_6);
   {
     var consequent_8 = ($$anchor2) => {
-      var g = root_9();
+      var g = root_6();
       $2.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
       var node_8 = $2.child(g);
       $2.each(node_8, 17, () => $$props.frames, $2.index, ($$anchor3, _frame, frameIndex) => {
         var fragment_2 = $2.comment();
         var node_9 = $2.first_child(fragment_2);
         $2.each(node_9, 16, () => $2.get(binIndices), (binIndex) => binIndex, ($$anchor4, binIndex) => {
-          var rect = root_11();
+          var rect = root_3();
           $2.template_effect(($0, $1) => {
             $2.set_attribute(rect, "x", frameIndex * $2.get(cellWidth));
             $2.set_attribute(rect, "y", $0);
@@ -1053,7 +1053,7 @@ function Spectrogram($$anchor, $$props) {
         var node_11 = $2.first_child(fragment_3);
         {
           var consequent_6 = ($$anchor4) => {
-            var text_4 = root_13();
+            var text_4 = root_4();
             $2.set_attribute(text_4, "x", -6);
             var text_5 = $2.child(text_4, true);
             $2.reset(text_4);
@@ -1076,7 +1076,7 @@ function Spectrogram($$anchor, $$props) {
         var node_13 = $2.first_child(fragment_4);
         {
           var consequent_7 = ($$anchor4) => {
-            var text_6 = root_15();
+            var text_6 = root_5();
             var text_7 = $2.child(text_6, true);
             $2.reset(text_6);
             $2.template_effect(() => {
@@ -1106,7 +1106,7 @@ function Spectrogram($$anchor, $$props) {
   var node_14 = $2.sibling(div, 2);
   {
     var consequent_9 = ($$anchor2) => {
-      var table = root_16();
+      var table = root_10();
       var caption = $2.child(table);
       var text_8 = $2.child(caption, true);
       $2.reset(caption);
@@ -1114,7 +1114,7 @@ function Spectrogram($$anchor, $$props) {
       var tr = $2.child(thead);
       var node_15 = $2.sibling($2.child(tr));
       $2.each(node_15, 17, () => $2.get(tableFrames), (entry) => entry.frameIndex, ($$anchor3, entry) => {
-        var th = root_17();
+        var th = root_7();
         var text_9 = $2.child(th, true);
         $2.reset(th);
         $2.template_effect(() => $2.set_text(text_9, $2.get(entry).frame.label));
@@ -1124,13 +1124,13 @@ function Spectrogram($$anchor, $$props) {
       $2.reset(thead);
       var tbody = $2.sibling(thead);
       $2.each(tbody, 20, () => $2.get(tableBinIndices), (binIndex) => binIndex, ($$anchor3, binIndex) => {
-        var tr_1 = root_18();
+        var tr_1 = root_9();
         var th_1 = $2.child(tr_1);
         var text_10 = $2.child(th_1, true);
         $2.reset(th_1);
         var node_16 = $2.sibling(th_1);
         $2.each(node_16, 17, () => $2.get(tableFrames), (entry) => entry.frameIndex, ($$anchor4, entry) => {
-          var td = root_19();
+          var td = root_8();
           var text_11 = $2.child(td, true);
           $2.reset(td);
           $2.template_effect(($0) => $2.set_text(text_11, $0), [
@@ -1175,4 +1175,4 @@ export {
   Spectrogram
 };
 
-//# debugId=F2D4BD174B92D59664756E2164756E21
+//# debugId=B910728B0321267A64756E2164756E21