@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/sortable-list/sortable-list.svelte

@@ -1,150 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Keyboard-and-pointer reorderable list that emits onreorder when the user drags or arrow-keys an item into a new position with announcer feedback.
-   * @tag data-display
-   * @tag reorder
-   * @useWhen Letting users manually reorder a small to medium list of items via drag handle or keyboard.
-   * @useWhen Surfacing live region announcements during a reorder for accessible feedback.
-   * @avoidWhen Showing a read-only list with no reorder affordance — use grid-list instead.
-   * @avoidWhen Sorting by a column or computed key — sort the source array and rerender.
-   * @related grid-list
-   */
-  export type { SortableListProps } from './sortable-list.types.ts';
-</script>
-
-<script lang="ts" generics="Item">
-  import { untrack } from 'svelte';
-  import { classNames } from '../../utilities/class-names.ts';
-  import {
-    SortableController,
-    setSortableContext,
-    reorder,
-  } from '../../utilities/sortable-controller.svelte.ts';
-  import { useAnnouncer } from '../../utilities/use-announcer.svelte.ts';
-  import SortableItem from '../_sortable-item.svelte';
-  import type { SortableListProps } from './sortable-list.types.ts';
-
-  let {
-    items,
-    getKey,
-    getItemLabel,
-    formatHandleLabel = (label) => `Reorder ${label}`,
-    handle,
-    onreorder,
-    announcements,
-    children: renderRow,
-    label,
-    class: className,
-  }: SortableListProps<Item> = $props();
-
-  const announcer = useAnnouncer({ clearDelay: 5000 });
-  const controller = new SortableController<Item>(
-    untrack(() => ({
-      announce: (msg: string) => announcer.announce(msg),
-      ...(announcements !== undefined ? { announcements } : {}),
-    })),
-  );
-
-  const instructionsId = $props.id();
-
-  // Derived visual order — pure read of controller state, no side effects.
-  const visualItems = $derived.by(() => {
-    if (controller.phase !== 'lifted' || controller.liftedKey === null) return items;
-    const from = items.findIndex((it) => getKey(it) === controller.liftedKey);
-    if (from < 0) return items;
-    return reorder(items, from, controller.liftedTo);
-  });
-
-  // Stable key → original-index map, rebuilt only when `items` (or `getKey`)
-  // changes. The each block consults this in O(1) instead of `items.indexOf`,
-  // which was O(n) per row and O(n²) per drag frame (the each block re-renders
-  // on every pointer-move step while lifted).
-  const originalIndexByKey = $derived.by(() => {
-    const lookup = new Map<ReturnType<typeof getKey>, number>();
-    items.forEach((item, index) => lookup.set(getKey(item), index));
-    return lookup;
-  });
-
-  // Reconcile lifted key when items changes externally during a lift.
-  // Reading each key forces deep tracking so in-place array mutations are caught.
-  $effect(() => {
-    items.forEach((it) => getKey(it));
-    controller.reconcileLiftedKey(items, getKey);
-  });
-
-  // Command bag passed to each SortableItem via context.
-  setSortableContext({
-    get controller() {
-      return controller as SortableController<unknown>;
-    },
-    commitDrop(_itemKey, itemLabel) {
-      const result = controller.drop(items, itemLabel);
-      if (result) {
-        onreorder(result.nextItems, result.change);
-      }
-    },
-    cancel(itemLabel) {
-      controller.cancel(itemLabel);
-    },
-    lift(key, fromIndex, itemLabel, total) {
-      controller.lift(key, fromIndex, itemLabel, total);
-    },
-    move(toIndex, itemLabel, total) {
-      controller.move(toIndex, itemLabel, total);
-    },
-  });
-
-  // Window-level Escape handler: cancels the lift regardless of which element has focus.
-  // This covers the case where focus moved off the handle during a lift (pointer drag,
-  // programmatic focus change, etc.). The item-level Escape handler also calls cancel
-  // when the handle is focused, but the controller guard (phase !== 'lifted') makes
-  // double-cancel safe.
-  function handleWindowKeydown(event: KeyboardEvent): void {
-    if (controller.phase === 'lifted' && event.key === 'Escape') {
-      event.preventDefault();
-      controller.cancel();
-    }
-  }
-</script>
-
-<svelte:window onkeydown={handleWindowKeydown} />
-
-<ul class={classNames('cinder-sortable-list', className)} role="list" aria-label={label}>
-  <!--
-    Instructions live inside the <ul> as a visually hidden <li> so the element is
-    present in the DOM before any handle buttons that reference it via aria-describedby.
-    role="presentation" removes the implicit listitem role so this element does not
-    count toward the list's item count. cinder-sr-only visually hides it with the
-    clip pattern (not display:none), so browsers resolve its id for aria-describedby.
-  -->
-  <li role="presentation" id={instructionsId} class="cinder-sr-only">
-    Press Space to lift, then arrow keys to move, Space to drop, Escape to cancel.
-  </li>
-
-  {#each visualItems as rowItem, visualIndex (getKey(rowItem))}
-    {@const originalIndex = originalIndexByKey.get(getKey(rowItem)) ?? -1}
-    {@const rowItemLabel = getItemLabel(rowItem, originalIndex >= 0 ? originalIndex : visualIndex)}
-    <SortableItem
-      item={rowItem}
-      itemKey={getKey(rowItem)}
-      index={visualIndex}
-      itemLabel={rowItemLabel}
-      {formatHandleLabel}
-      {...handle !== undefined ? { handle } : {}}
-      {instructionsId}
-      total={visualItems.length}
-    >
-      {#snippet children(ctx)}
-        {@render renderRow(rowItem, ctx)}
-      {/snippet}
-    </SortableItem>
-  {/each}
-</ul>
-
-<!-- Live region — role="alert" (implicit assertive) avoids role/aria-live conflict -->
-<div role="alert" aria-atomic="true" class="cinder-sr-only">
-  {announcer.message}
-</div>

package/src/components/sortable-list/sortable-list.types.ts

@@ -1,41 +0,0 @@
-import type { Snippet } from 'svelte';
-export type {
-  SortableAnnouncements,
-  SortableItemContext,
-  SortableReorderChange,
-} from '../../utilities/sortable-controller.types.ts';
-/** Props for the SortableList component. */
-export type SortableListProps<Item> = {
-  /** The list of items to render. */
-  items: Item[];
-  /** Returns a stable key for each item. Must not change across reorders. */
-  getKey: (item: Item) => string | number;
-  /**
-   * Returns an accessible label for each item (e.g., "Buy milk").
-   * The second argument is the item's original index in the `items` array
-   * (not its current visual position during a drag).
-   * Used in handle aria-label and announcements.
-   */
-  getItemLabel: (item: Item, originalIndex: number) => string;
-  /** Optional formatter for the drag handle's accessible name. Default: "Reorder {itemLabel}". */
-  formatHandleLabel?: (itemLabel: string) => string;
-  /** Optional snippet rendered inside the drag-handle button. Receives { pressed, label }. */
-  handle?: Snippet<[{ pressed: boolean; label: string }]>;
-  /** Fires with the full reordered array and change metadata on drop. */
-  onreorder: (
-    nextItems: Item[],
-    change: import('../../utilities/sortable-controller.types.ts').SortableReorderChange,
-  ) => void;
-  /** Optional overrides for announcement strings. */
-  announcements?: Partial<
-    import('../../utilities/sortable-controller.types.ts').SortableAnnouncements
-  >;
-  /** Row content snippet. Receives the item and a per-row context. */
-  children: Snippet<
-    [Item, import('../../utilities/sortable-controller.types.ts').SortableItemContext]
-  >;
-  /** Accessible name for the list (applied as aria-label on the list root). */
-  label?: string;
-  /** Additional class merged onto the `.cinder-sortable-list` root element. */
-  class?: string;
-};

package/src/components/sparkbar/index.ts

@@ -1,6 +0,0 @@
-import './sparkbar.css';
-import Sparkbar from './sparkbar.svelte';
-
-export default Sparkbar;
-export type { SparkbarProps, SparkbarSize, SparkbarVariant } from './sparkbar.types.ts';
-export { Sparkbar };

package/src/components/sparkbar/sparkbar.svelte

@@ -1,72 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Compact labeled meter with a thin horizontal fill bar for inline cost, token, budget, or quota breakdowns.
-   * @tag sparkbar
-   * @tag meter
-   * @tag cost
-   * @useWhen Comparing several bounded values in dense rows, such as per-step spend, token usage, or budget consumption.
-   * @avoidWhen Showing task completion or loading progress. | progress
-   * @avoidWhen Rendering a full cartesian chart with axes, scales, or multiple series. | bar-chart
-   * @related meter, progress, bar-chart
-   */
-  export type { SparkbarProps, SparkbarSize, SparkbarVariant } from './sparkbar.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { SparkbarProps } from './sparkbar.types.ts';
-
-  let {
-    value,
-    max = 1,
-    label,
-    trailing,
-    size = 'md',
-    variant = 'accent',
-    ariaLabel,
-    ariaValueText,
-    class: customClassName,
-    ...rest
-  }: SparkbarProps = $props();
-
-  const effectiveMax = $derived(Number.isFinite(max) && max > 0 ? max : 1);
-  const clampedValue = $derived(
-    Number.isFinite(value) ? Math.max(0, Math.min(effectiveMax, value)) : 0,
-  );
-  const percent = $derived(Math.round((clampedValue / effectiveMax) * 100));
-  const normalizedAriaLabel = $derived(ariaLabel?.trim() || undefined);
-  const normalizedTrailing = $derived(trailing?.trim() || undefined);
-  const normalizedAriaValueText = $derived(ariaValueText?.trim() || undefined);
-  const accessibleName = $derived(normalizedAriaLabel ?? `${label}, ${percent}%`);
-  const accessibleValueText = $derived(normalizedAriaValueText ?? normalizedTrailing);
-</script>
-
-<div
-  {...rest}
-  class={classNames('cinder-sparkbar', customClassName)}
-  role="meter"
-  aria-label={accessibleName}
-  aria-valuemin={0}
-  aria-valuemax={effectiveMax}
-  aria-valuenow={clampedValue}
-  aria-valuetext={accessibleValueText}
-  data-cinder-size={size}
-  data-cinder-variant={variant}
->
-  <div class="cinder-sparkbar__row">
-    <span class="cinder-sparkbar__label">{label}</span>
-    {#if normalizedTrailing}
-      <span class="cinder-sparkbar__trailing">{normalizedTrailing}</span>
-    {/if}
-  </div>
-  <div class="cinder-sparkbar__track" aria-hidden="true">
-    <div
-      class="cinder-sparkbar__fill"
-      style:--_cinder-sparkbar-progress={clampedValue / effectiveMax}
-    ></div>
-  </div>
-</div>

package/src/components/sparkbar/sparkbar.types.ts

@@ -1,48 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type SparkbarSize = 'sm' | 'md' | 'lg';
-export type SparkbarVariant = 'accent' | 'success' | 'warning';
-
-/** Props for the Sparkbar component. */
-export type SparkbarProps = HTMLAttributes<HTMLDivElement> & {
-  /** Current bounded value. */
-  value: number;
-  /** Upper bound for the range. Defaults to `1` for fractional values. */
-  max?: number;
-  /** Visible label for the measured row. */
-  label: string;
-  /** Optional trailing value such as a cost, token count, or percentage. */
-  trailing?: string;
-  /** Track thickness and text scale. Default `md`. */
-  size?: SparkbarSize;
-  /** Fill color intent. Default `accent`. */
-  variant?: SparkbarVariant;
-  /** Accessible name override. Defaults to `${label}, ${percentage}%`. */
-  ariaLabel?: string;
-  /** Accessible value text override. Defaults to the trimmed trailing value when provided. */
-  ariaValueText?: string;
-  /** Custom class merged with `.cinder-sparkbar`. */
-  class?: string;
-};
-
-/** Schema generator surface for JSON-safe Sparkbar props. */
-export type SparkbarSchemaProps = {
-  /** Current bounded value. */
-  value: number;
-  /** Upper bound for the range. Defaults to `1` for fractional values. */
-  max?: number;
-  /** Visible label for the measured row. */
-  label: string;
-  /** Optional trailing value such as a cost, token count, or percentage. */
-  trailing?: string;
-  /** Track thickness and text scale. Default `md`. */
-  size?: SparkbarSize;
-  /** Fill color intent. Default `accent`. */
-  variant?: SparkbarVariant;
-  /** Accessible name override. Defaults to `${label}, ${percentage}%`. */
-  ariaLabel?: string;
-  /** Accessible value text override. Defaults to the trimmed trailing value when provided. */
-  ariaValueText?: string;
-  /** Custom class merged with `.cinder-sparkbar`. */
-  class?: string;
-};

package/src/components/spectrogram/index.ts

@@ -1,10 +0,0 @@
-import './spectrogram.css';
-import Spectrogram from './spectrogram.svelte';
-
-export default Spectrogram;
-export type {
-  SpectrogramFrame,
-  SpectrogramProps,
-  SpectrogramSchemaProps,
-} from './spectrogram.types.ts';
-export { Spectrogram };

package/src/components/spectrogram/spectrogram.svelte

@@ -1,272 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status alpha
-   * @purpose Responsive SVG time × frequency heatmap for visualizing audio spectrogram data.
-   * @tag chart
-   * @tag spectrogram
-   * @tag signal
-   * @tag audio
-   * @useWhen Visualizing how frequency content of a signal changes over time (time × frequency heatmap).
-   * @useWhen Displaying pre-computed spectrogram frames from an FFT or short-time Fourier transform.
-   * @avoidWhen Only a single spectrum snapshot is needed — use spectrum-chart instead.
-   * @avoidWhen Real-time live audio spectrogram is needed — feed frames as props yourself.
-   * @avoidWhen A categorical × categorical heatmap without a time axis is needed — use matrix-chart instead.
-   * @related spectrum-chart, waveform, matrix-chart
-   */
-  export type {
-    SpectrogramFrame,
-    SpectrogramProps,
-    SpectrogramSchemaProps,
-  } from './spectrogram.types.ts';
-</script>
-
-<script lang="ts">
-  import { dataTableClass } from '../../_internal/chart/chart-utilities.ts';
-  import {
-    heatmapCellFill,
-    heatmapDomainOfRows,
-    toFiniteOrNull,
-  } from '../../_internal/chart/heatmap-utilities.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { useResizeObserver } from '../../utilities/use-resize-observer.svelte.ts';
-  import type { SpectrogramProps } from './spectrogram.types.ts';
-
-  let {
-    label,
-    description,
-    frames,
-    frequencyLabels,
-    height = 200,
-    loading = false,
-    dataTableVisibility = 'screen-reader-only',
-    dataTableCaption,
-    class: customClassName,
-    empty,
-    loadingContent,
-    id,
-    ...rest
-  }: SpectrogramProps = $props();
-
-  const generatedId = $props.id();
-  const rootId = $derived(id ?? generatedId);
-  const descriptionId = $derived(description ? `${rootId}-description` : undefined);
-
-  const marginTop = 8;
-  const marginRight = 16;
-  const marginBottom = 32;
-  const marginLeft = 60;
-
-  let measuredWidth = $state(400);
-
-  const observeResize = useResizeObserver((entries) => {
-    const entry = entries[0];
-    // Ignore zero-width measurements (hidden / display:none) so the last good
-    // width is kept rather than collapsing the geometry.
-    if (entry && entry.contentRect.width > 0) measuredWidth = entry.contentRect.width;
-  });
-
-  const plotWidth = $derived(Math.max(1, measuredWidth - marginLeft - marginRight));
-  const plotHeight = $derived(Math.max(1, height - marginTop - marginBottom));
-
-  // Frequency-bin count is the MAX across frames so ragged input renders a full
-  // rectangular grid: shorter frames leave explicit missing cells rather than
-  // overflowing the plot or silently dropping rows.
-  const binCount = $derived(frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
-
-  // The bin-index list [0, 1, …, binCount-1], computed once and reused for every
-  // frame's column rather than rebuilding an Array.from() per frame in the render
-  // loop.
-  const binIndices = $derived(Array.from({ length: binCount }, (_, index) => index));
-
-  // A frame with zero bins contributes no usable data; the chart is "empty" when
-  // there are no frames OR no frequency bins anywhere.
-  const isEmpty = $derived(frames.length === 0 || binCount === 0);
-
-  // Cell dimensions
-  const cellWidth = $derived(frames.length > 0 ? plotWidth / frames.length : 0);
-  const cellHeight = $derived(binCount > 0 ? plotHeight / binCount : 0);
-
-  // Read a frame's bin as a finite value or null (missing). Non-finite values
-  // (NaN/Infinity) and out-of-range indices (ragged frames) are missing.
-  function binValueAt(frameIndex: number, binIndex: number): number | null {
-    return toFiniteOrNull(frames[frameIndex]?.bins[binIndex]);
-  }
-
-  // Global color domain over the finite values only (shared with MatrixChart).
-  // Computed in a single nested pass over the frames so a large frames × bins
-  // grid never materializes a full flattened copy of every bin.
-  const domain = $derived(heatmapDomainOfRows(frames.map((frame) => frame.bins)));
-
-  function cellFill(value: number | null): string {
-    return heatmapCellFill(value, domain, 'sequential');
-  }
-
-  // Convert a bin index to a y-coordinate. Frequency increases UPWARD (the audio
-  // convention): bin 0 (lowest frequency) sits at the BOTTOM of the plot.
-  function binY(binIndex: number): number {
-    return plotHeight - (binIndex + 1) * cellHeight;
-  }
-
-  // Frequency axis labels, one per bin index. A PARTIAL `frequencyLabels` is
-  // honoured per-index — a provided label is used where present, and bins beyond
-  // its length fall back to the numeric index (rather than discarding all of the
-  // provided labels just because later/ragged frames added extra bins).
-  const yLabels = $derived.by(() =>
-    Array.from({ length: binCount }, (_, index) => frequencyLabels?.[index] ?? String(index)),
-  );
-
-  // Show a subset of y-axis labels
-  const maxYLabels = 8;
-  const yLabelStep = $derived(Math.max(1, Math.ceil(binCount / maxYLabels)));
-
-  // Show a subset of x-axis (time) labels
-  const maxXLabels = 10;
-  const xLabelStep = $derived(Math.max(1, Math.ceil(frames.length / maxXLabels)));
-
-  const hasDataTable = $derived(dataTableVisibility !== 'hidden');
-
-  // Table rows: each frame is a column; rows are frequency bins.
-  // For accessibility, sample every-Nth frame and bin so the full range is represented
-  // rather than silently truncating to first-N.
-  const maxTableFrames = 10;
-  const maxTableBins = 10;
-  const tableFrameStep = $derived(Math.max(1, Math.ceil(frames.length / maxTableFrames)));
-  const tableBinStep = $derived(Math.max(1, Math.ceil(binCount / maxTableBins)));
-  const tableFrames = $derived(
-    frames
-      .map((frame, frameIndex) => ({ frame, frameIndex }))
-      .filter((_, index) => index % tableFrameStep === 0)
-      .slice(0, maxTableFrames),
-  );
-  // Bins listed top-to-bottom to MATCH the visual: the SVG places bin 0 (lowest
-  // frequency) at the bottom, so the table's first row is the highest sampled
-  // bin and the last row is bin 0 — a screen-reader user reads the same vertical
-  // frequency order they would see.
-  const tableBinIndices = $derived(
-    Array.from({ length: binCount }, (_, index) => index)
-      .filter((index) => index % tableBinStep === 0)
-      .slice(0, maxTableBins)
-      .reverse(),
-  );
-  const isTruncated = $derived(frames.length > maxTableFrames || binCount > maxTableBins);
-  const tableCaption = $derived(
-    isTruncated
-      ? `${dataTableCaption ?? label} (showing ${tableFrames.length} of ${frames.length} frames, ${tableBinIndices.length} of ${binCount} bins)`
-      : (dataTableCaption ?? label),
-  );
-
-  function formatValue(value: number | null): string {
-    if (value === null) return '—';
-    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(value);
-  }
-</script>
-
-<figure
-  {...rest}
-  {@attach observeResize}
-  id={rootId}
-  class={classNames('cinder-spectrogram', customClassName)}
-  aria-label={label}
-  aria-describedby={descriptionId}
->
-  {#if description}
-    <p id={descriptionId} class="cinder-spectrogram__description">{description}</p>
-  {/if}
-  <div
-    class="cinder-spectrogram__viewport"
-    style:height="{height}px"
-    data-cinder-loading={loading || undefined}
-  >
-    {#if loading}
-      <div class="cinder-spectrogram__state">
-        {#if loadingContent}{@render loadingContent()}{:else}Loading…{/if}
-      </div>
-    {:else if isEmpty}
-      <div class="cinder-spectrogram__state">
-        {#if empty}{@render empty()}{:else}No spectrogram data{/if}
-      </div>
-    {/if}
-    <svg
-      role="img"
-      viewBox={`0 0 ${measuredWidth} ${height}`}
-      aria-hidden={loading || isEmpty ? 'true' : undefined}
-      aria-labelledby={!loading && !isEmpty ? `${rootId}-svg-title` : undefined}
-    >
-      {#if !loading && !isEmpty}
-        <title id="{rootId}-svg-title">{label}</title>
-      {/if}
-      <!-- The plot only renders with data and when not loading — otherwise the
-           cells/labels would draw under the loading or empty overlay (frames may
-           be present while loading, so isEmpty alone is not enough). -->
-      {#if !loading && !isEmpty}
-        <g transform={`translate(${marginLeft}, ${marginTop})`}>
-          <!-- Frequency cells: a full frames × binCount rectangular grid. Ragged or
-               non-finite cells render as the "missing" fill. Low frequency (bin 0)
-               is at the bottom. -->
-          {#each frames as _frame, frameIndex (frameIndex)}
-            {#each binIndices as binIndex (binIndex)}
-              <rect
-                class="cinder-spectrogram__cell"
-                x={frameIndex * cellWidth}
-                y={binY(binIndex)}
-                width={cellWidth}
-                height={cellHeight}
-                fill={cellFill(binValueAt(frameIndex, binIndex))}
-                aria-hidden="true"
-              />
-            {/each}
-          {/each}
-          <!-- Y-axis frequency labels (bin 0 / lowest frequency at the bottom) -->
-          {#each yLabels as yLabel, index (index)}
-            {#if index % yLabelStep === 0}
-              <text
-                class="cinder-spectrogram__tick-label"
-                x={-6}
-                y={binY(index) + cellHeight / 2}
-                text-anchor="end"
-                dominant-baseline="middle">{yLabel}</text
-              >
-            {/if}
-          {/each}
-          <!-- X-axis time labels -->
-          {#each frames as frame, index (index)}
-            {#if index % xLabelStep === 0}
-              <text
-                class="cinder-spectrogram__tick-label"
-                x={index * cellWidth + cellWidth / 2}
-                y={plotHeight + 16}
-                text-anchor="middle"
-                dominant-baseline="auto">{frame.label}</text
-              >
-            {/if}
-          {/each}
-        </g>
-      {/if}
-    </svg>
-  </div>
-  {#if hasDataTable}
-    <table class={dataTableClass(dataTableVisibility)}>
-      <caption>{tableCaption}</caption>
-      <thead>
-        <tr>
-          <th scope="col">Frequency bin</th>
-          {#each tableFrames as entry (entry.frameIndex)}
-            <th scope="col">{entry.frame.label}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each tableBinIndices as binIndex (binIndex)}
-          <tr>
-            <th scope="row">{yLabels[binIndex] ?? binIndex}</th>
-            {#each tableFrames as entry (entry.frameIndex)}
-              <td>{formatValue(binValueAt(entry.frameIndex, binIndex))}</td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {/if}
-</figure>

package/src/components/spectrogram/spectrogram.types.ts

@@ -1,74 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ChartDataTableVisibility } from '../chart.types.ts';
-
-/**
- * A single time-frame of frequency-bin magnitudes.
- * `label` identifies the time point (e.g. '0 ms', '10 ms').
- * `bins` is an ordered array of frequency-bin magnitudes, one per column.
- *
- * @schemaObject
- */
-export type SpectrogramFrame = {
-  /** Time-axis label for this frame, e.g. '0 ms' or 't=0'. */
-  label: string;
-  /**
-   * Magnitude values per frequency bin. A consistent length across frames is
-   * preferred, but ragged frames are supported: the grid uses the maximum bin
-   * count across all frames and renders any missing bins in shorter frames as
-   * "missing" cells. Non-finite values (NaN/Infinity) also render as missing.
-   */
-  bins: number[];
-};
-
-export type SpectrogramProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
-  /** Accessible label for the chart. Required for screen readers. */
-  label: string;
-  /** Optional description rendered below the label. */
-  description?: string;
-  /**
-   * Ordered sequence of time-indexed frames. Each frame contains a label and an
-   * array of per-frequency-bin magnitudes.
-   */
-  frames: SpectrogramFrame[];
-  /**
-   * Optional frequency-bin labels for the y-axis (e.g. ['100 Hz', '200 Hz', …]).
-   * When omitted, bins are labelled by index.
-   */
-  frequencyLabels?: string[];
-  /** Pixel height of the chart. Default `200`. */
-  height?: number;
-  /** Whether the chart is in a loading state. */
-  loading?: boolean;
-  /** Controls data table visibility. Default `screen-reader-only`. */
-  dataTableVisibility?: ChartDataTableVisibility;
-  /** Custom data table caption; falls back to `label`. */
-  dataTableCaption?: string;
-  /** Custom class applied to the root element. */
-  class?: string;
-  /** Snippet rendered when there are no frames. */
-  empty?: Snippet;
-  /** Snippet rendered while loading. */
-  loadingContent?: Snippet;
-};
-
-export type SpectrogramSchemaProps = {
-  /** Accessible label for the chart. Required for screen readers. */
-  label: string;
-  /** Optional description rendered below the label. */
-  description?: string;
-  /** Ordered sequence of time-indexed frames. Each frame contains a label and an array of per-frequency-bin magnitudes. */
-  frames: SpectrogramFrame[];
-  /** Optional frequency-bin labels for the y-axis (e.g. ['100 Hz', '200 Hz', …]). When omitted, bins are labelled by index. */
-  frequencyLabels?: string[];
-  /** Pixel height of the chart. Default `200`. */
-  height?: number;
-  /** Whether the chart is in a loading state. Default `false`. */
-  loading?: boolean;
-  /** Controls data table visibility. Default `screen-reader-only`. */
-  dataTableVisibility?: ChartDataTableVisibility;
-  /** Custom data table caption; falls back to `label`. */
-  dataTableCaption?: string;
-  /** Custom class applied to the root element. */
-  class?: string;
-};