@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/spectrogram/index.js

@@ -0,0 +1,1156 @@
+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/spectrogram/index.ts
+import"@lostgradient/cinder/spectrogram/styles";
+
+// src/components/spectrogram/spectrogram.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/_internal/chart/chart-utilities.ts
+var chartPalette = [
+  "var(--cinder-chart-series-1)",
+  "var(--cinder-chart-series-2)",
+  "var(--cinder-chart-series-3)",
+  "var(--cinder-chart-series-4)",
+  "var(--cinder-chart-series-5)",
+  "var(--cinder-chart-series-6)",
+  "var(--cinder-chart-series-7)",
+  "var(--cinder-chart-series-8)"
+];
+function chartPaletteColor(index) {
+  return chartPalette[index % chartPalette.length] ?? "var(--cinder-chart-series-1)";
+}
+function assertValidChartNumber(componentId, rule, value, label) {
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new Error(`[cinder/${componentId}] rule=${rule} ${label}="${value}": expected a positive finite number.`);
+  }
+}
+function assertValidNonNegativeInteger(componentId, rule, value, label) {
+  if (!Number.isInteger(value) || value < 0) {
+    throw new Error(`[cinder/${componentId}] rule=${rule} ${label}="${value}": expected a non-negative integer.`);
+  }
+}
+function assertValidTickCount(componentId, axis) {
+  if (axis?.tickCount === undefined)
+    return;
+  if (!Number.isInteger(axis.tickCount) || axis.tickCount <= 0) {
+    throw new Error(`[cinder/${componentId}] rule=invalid-tick-count tickCount="${axis.tickCount}": expected a positive integer.`);
+  }
+}
+function dataTableClass(visibility) {
+  return visibility === "screen-reader-only" ? "cinder-sr-only" : undefined;
+}
+function formatXValue(value, axis, context) {
+  return axis?.format ? axis.format(value.raw, context) : value.label;
+}
+function formatNumericValue(value, axis, formatter, context) {
+  if (formatter)
+    return formatter(value, context);
+  if (axis?.format)
+    return axis.format(value, context);
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+}
+function normalizeXValue(value) {
+  if (value instanceof Date) {
+    const comparable = value.getTime();
+    return {
+      raw: value,
+      key: `date:${comparable}`,
+      label: value.toISOString(),
+      comparable,
+      kind: "date"
+    };
+  }
+  if (typeof value === "number") {
+    return {
+      raw: value,
+      key: `number:${value}`,
+      label: String(value),
+      comparable: value,
+      kind: "number"
+    };
+  }
+  return { raw: value, key: `string:${value}`, label: value, comparable: value, kind: "string" };
+}
+function assertUniqueSeriesIds(componentId, series) {
+  const seen = new Set;
+  for (const item of series) {
+    if (seen.has(item.id)) {
+      throw new Error(`[cinder/${componentId}] rule=duplicate-series-id series="${item.id}": duplicate series ids are not supported.`);
+    }
+    seen.add(item.id);
+  }
+}
+function toggleSeriesId(hiddenSeriesIds, seriesId) {
+  return hiddenSeriesIds.includes(seriesId) ? hiddenSeriesIds.filter((id) => id !== seriesId) : [...hiddenSeriesIds, seriesId];
+}
+function createCartesianModel(options) {
+  const {
+    componentId,
+    series,
+    hiddenSeriesIds,
+    width,
+    height,
+    xAxis,
+    yAxis,
+    stackedArea = false
+  } = options;
+  assertUniqueSeriesIds(componentId, series);
+  assertValidChartNumber(componentId, "invalid-height", height, "height");
+  assertValidTickCount(componentId, xAxis);
+  assertValidTickCount(componentId, yAxis);
+  const geometry = createGeometry(width, height);
+  const allKinds = new Set;
+  const xValuesByKey = new Map;
+  const normalizedSeries = series.map((item, seriesIndex) => {
+    const seenX = new Set;
+    const color = item.color ?? chartPaletteColor(seriesIndex);
+    const points = item.data.map((point, pointIndex) => {
+      const x = normalizeXValue(point.x);
+      allKinds.add(x.kind);
+      if (seenX.has(x.key)) {
+        throw new Error(`[cinder/${componentId}] rule=duplicate-x series="${item.id}" x="${x.label}": duplicate x values are not supported.`);
+      }
+      seenX.add(x.key);
+      xValuesByKey.set(x.key, x);
+      const y = normalizeNumericValue(componentId, item.id, x.label, point.y);
+      return {
+        seriesId: item.id,
+        seriesLabel: item.label,
+        color,
+        x,
+        y,
+        originalY: point.y,
+        index: pointIndex
+      };
+    });
+    return { id: item.id, label: item.label, color, points };
+  });
+  if (allKinds.size > 1) {
+    throw new Error(`[cinder/${componentId}] rule=mixed-x-domain-kind: all x values must share one domain kind.`);
+  }
+  if (stackedArea) {
+    for (const item of normalizedSeries) {
+      for (const point of item.points) {
+        if ((point.y ?? 0) < 0) {
+          throw new Error(`[cinder/${componentId}] rule=negative-stacked-area series="${item.id}" x="${point.x.label}": stacked areas do not support negative values.`);
+        }
+      }
+    }
+  }
+  const sortedXValues = sortXValues([...xValuesByKey.values()]);
+  const orderByKey = new Map(sortedXValues.map((value, index) => [value.key, index]));
+  const visibleNumericValues = [];
+  for (const item of normalizedSeries) {
+    if (hiddenSeriesIds.includes(item.id))
+      continue;
+    for (const point of item.points) {
+      if (point.y !== null)
+        visibleNumericValues.push(point.y);
+    }
+  }
+  const stackedTotalsByKey = new Map(sortedXValues.map((value) => [value.key, 0]));
+  if (stackedArea) {
+    for (const item of normalizedSeries) {
+      if (hiddenSeriesIds.includes(item.id))
+        continue;
+      for (const point of item.points) {
+        if (point.y === null)
+          continue;
+        stackedTotalsByKey.set(point.x.key, (stackedTotalsByKey.get(point.x.key) ?? 0) + point.y);
+      }
+    }
+  }
+  const domainValues = stackedArea ? [0, ...stackedTotalsByKey.values()] : visibleNumericValues;
+  const [yMinimum, yMaximum] = createPaddedDomain(domainValues);
+  const xStringScale = sortedXValues[0]?.kind === "string" ? createPointScale(sortedXValues.map((value) => value.key), [0, geometry.plotWidth], 0.5) : undefined;
+  const xNumericScale = sortedXValues[0] && sortedXValues[0].kind !== "string" ? createLinearScale(createNumericDomain(sortedXValues), [0, geometry.plotWidth]) : undefined;
+  const yScale = createLinearScale([yMinimum, yMaximum], [geometry.plotHeight, 0]);
+  function scaleX(value) {
+    if (value.kind === "string")
+      return xStringScale?.(value.key) ?? 0;
+    return xNumericScale?.(Number(value.comparable)) ?? 0;
+  }
+  const tickCount = xAxis?.tickCount ?? sortedXValues.length;
+  const xTicks = buildXAxisTicks(sortedXValues, tickCount, xAxis, scaleX);
+  const targets = [];
+  const tableRows = [];
+  const stackedOffsetsByKey = new Map(sortedXValues.map((value) => [value.key, 0]));
+  const renderedSeries = normalizedSeries.map((item) => {
+    const hidden = hiddenSeriesIds.includes(item.id);
+    const points = item.points.filter((point) => point.y !== null).toSorted((a, b) => (orderByKey.get(a.x.key) ?? 0) - (orderByKey.get(b.x.key) ?? 0));
+    const placedPoints = points.map((point) => {
+      const lowerValue = stackedArea ? stackedOffsetsByKey.get(point.x.key) ?? 0 : 0;
+      const upperValue = lowerValue + (point.y ?? 0);
+      return {
+        ...point,
+        pixelX: scaleX(point.x),
+        pixelY: yScale(stackedArea ? upperValue : point.y ?? 0)
+      };
+    });
+    const coordinates = placedPoints.map((placed) => ({
+      x: placed.pixelX,
+      y: placed.pixelY,
+      y0: yScale(stackedArea ? stackedOffsetsByKey.get(placed.x.key) ?? 0 : 0)
+    }));
+    if (!hidden) {
+      for (const placed of placedPoints) {
+        const xLabel = formatXValue(placed.x, xAxis, {
+          seriesId: item.id,
+          seriesLabel: item.label,
+          index: placed.index
+        });
+        const valueLabel = formatNumericValue(placed.y ?? 0, yAxis, series.find((entry) => entry.id === item.id)?.valueFormatter, { seriesId: item.id, seriesLabel: item.label, index: placed.index });
+        targets.push({
+          id: `${item.id}-${placed.x.key}`,
+          seriesId: item.id,
+          seriesLabel: item.label,
+          xLabel,
+          valueLabel,
+          x: placed.pixelX,
+          y: placed.pixelY,
+          color: item.color
+        });
+        tableRows.push({
+          id: `${item.id}-${placed.x.key}`,
+          seriesLabel: item.label,
+          xLabel,
+          valueLabel
+        });
+      }
+      if (stackedArea) {
+        for (const placed of placedPoints) {
+          stackedOffsetsByKey.set(placed.x.key, (stackedOffsetsByKey.get(placed.x.key) ?? 0) + (placed.y ?? 0));
+        }
+      }
+    }
+    return {
+      ...item,
+      hidden,
+      points: hidden ? [] : placedPoints,
+      path: hidden ? "" : createLinePath(coordinates),
+      areaPath: hidden ? "" : createAreaPath(coordinates, stackedArea ? undefined : geometry.plotHeight)
+    };
+  });
+  targets.sort((a, b) => a.x - b.x);
+  return {
+    geometry,
+    xTicks,
+    yTicks: yScale.ticks(yAxis?.tickCount ?? 5),
+    normalizedSeries: renderedSeries,
+    tableRows,
+    targets,
+    empty: targets.length === 0,
+    yDomain: [yMinimum, yMaximum]
+  };
+}
+function buildXAxisTicks(sortedXValues, tickCount, xAxis, scaleX) {
+  if (sortedXValues.length === 0)
+    return [];
+  const safeTickCount = Math.max(1, Math.min(tickCount, sortedXValues.length));
+  if (safeTickCount >= sortedXValues.length) {
+    return sortedXValues.map((value, index) => ({
+      label: formatXValue(value, xAxis, { index }),
+      x: scaleX(value)
+    }));
+  }
+  if (safeTickCount === 1) {
+    const value = sortedXValues[0];
+    return value ? [{ label: formatXValue(value, xAxis, { index: 0 }), x: scaleX(value) }] : [];
+  }
+  const step = (sortedXValues.length - 1) / (safeTickCount - 1);
+  const ticks = [];
+  for (let i = 0;i < safeTickCount; i++) {
+    const sourceIndex = Math.round(i * step);
+    const value = sortedXValues[sourceIndex];
+    if (!value)
+      continue;
+    ticks.push({
+      label: formatXValue(value, xAxis, { index: i }),
+      x: scaleX(value)
+    });
+  }
+  return ticks;
+}
+function createBarModel(options) {
+  const {
+    data,
+    categoryKey,
+    series,
+    hiddenSeriesIds,
+    width,
+    height,
+    orientation,
+    mode,
+    xAxis,
+    yAxis
+  } = options;
+  assertUniqueSeriesIds("bar-chart", series);
+  assertValidChartNumber("bar-chart", "invalid-height", height, "height");
+  assertValidTickCount("bar-chart", xAxis);
+  assertValidTickCount("bar-chart", yAxis);
+  const geometry = createGeometry(width, height);
+  const categories = [];
+  const seenCategories = new Set;
+  const categoryKinds = new Set;
+  const visibleSeries = series.filter((item) => !hiddenSeriesIds.includes(item.id));
+  const visibleValues = [0];
+  const datumByKey = new Map;
+  for (const datum of data) {
+    if (!(categoryKey in datum)) {
+      throw new Error(`[cinder/bar-chart] rule=invalid-bar-category key="${categoryKey}": category key is missing.`);
+    }
+    const rawCategory = datum[categoryKey];
+    if (!(typeof rawCategory === "string" || typeof rawCategory === "number" || rawCategory instanceof Date)) {
+      throw new Error(`[cinder/bar-chart] rule=invalid-bar-category key="${categoryKey}": category must be string, number, or Date.`);
+    }
+    const category = normalizeXValue(rawCategory);
+    categoryKinds.add(category.kind);
+    if (seenCategories.has(category.key)) {
+      throw new Error(`[cinder/bar-chart] rule=duplicate-category key="${categoryKey}" category="${category.label}": duplicate categories are not supported.`);
+    }
+    seenCategories.add(category.key);
+    categories.push(category);
+    datumByKey.set(category.key, datum);
+    for (const item of series) {
+      if (!(item.valueKey in datum)) {
+        throw new Error(`[cinder/bar-chart] rule=missing-bar-value-key key="${item.valueKey}": value key is missing.`);
+      }
+      const value = datum[item.valueKey];
+      if (!(typeof value === "number" || value === null || value === undefined)) {
+        throw new Error(`[cinder/bar-chart] rule=invalid-bar-value key="${item.valueKey}" category="${category.label}": value must be number, null, or undefined.`);
+      }
+      const numericValue = normalizeNumericValue("bar-chart", item.id, category.label, value);
+      if (numericValue !== null && !hiddenSeriesIds.includes(item.id))
+        visibleValues.push(numericValue);
+    }
+  }
+  if (categoryKinds.size > 1) {
+    throw new Error(`[cinder/bar-chart] rule=mixed-bar-category-kind key="${categoryKey}": category values must share one domain kind.`);
+  }
+  const sortedCategories = sortXValues(categories);
+  const valueDomain = createPaddedDomain(mode === "stacked" ? createStackedBarDomainValues(datumByKey, sortedCategories, visibleSeries) : visibleValues);
+  const valueScale = createLinearScale(valueDomain, orientation === "vertical" ? [geometry.plotHeight, 0] : [0, geometry.plotWidth]);
+  const categoryScale = createBandScale(sortedCategories.map((category) => category.key), orientation === "vertical" ? [0, geometry.plotWidth] : [0, geometry.plotHeight], 0.18);
+  const groupScale = createBandScale(visibleSeries.map((item) => item.id), [0, categoryScale.bandwidth()], 0.12);
+  const categoryTicks = sortedCategories.map((category, index) => {
+    const categoryPosition = categoryScale(category.key) ?? 0;
+    return {
+      categoryKey: category.key,
+      label: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, { index }),
+      x: orientation === "vertical" ? categoryPosition + categoryScale.bandwidth() / 2 : -8,
+      y: orientation === "vertical" ? geometry.plotHeight + 20 : categoryPosition + categoryScale.bandwidth() / 2
+    };
+  });
+  const bars = [];
+  const targets = [];
+  const tableRows = [];
+  for (const [categoryIndex, category] of sortedCategories.entries()) {
+    const datum = datumByKey.get(category.key);
+    if (!datum)
+      continue;
+    let positiveOffset = 0;
+    let negativeOffset = 0;
+    const rowValues = [];
+    visibleSeries.forEach((item) => {
+      const rawValue = datum[item.valueKey];
+      if (typeof rawValue !== "number")
+        return;
+      const value = rawValue;
+      const seriesColorIndex = Math.max(0, series.findIndex((entry) => entry.id === item.id));
+      const color = item.color ?? chartPaletteColor(seriesColorIndex);
+      const categoryPosition = categoryScale(category.key) ?? 0;
+      let x = 0;
+      let y = 0;
+      let barWidth = 0;
+      let barHeight = 0;
+      if (orientation === "vertical") {
+        const groupX = mode === "grouped" ? groupScale(item.id) ?? 0 : 0;
+        const start = mode === "stacked" ? value >= 0 ? positiveOffset : negativeOffset : 0;
+        const end = start + value;
+        if (mode === "stacked") {
+          if (value >= 0)
+            positiveOffset = end;
+          else
+            negativeOffset = end;
+        }
+        const y0 = valueScale(start);
+        const y1 = valueScale(end);
+        x = categoryPosition + groupX;
+        y = Math.min(y0, y1);
+        barWidth = mode === "grouped" ? groupScale.bandwidth() : categoryScale.bandwidth();
+        barHeight = Math.abs(y1 - y0);
+      } else {
+        const groupY = mode === "grouped" ? groupScale(item.id) ?? 0 : 0;
+        const start = mode === "stacked" ? value >= 0 ? positiveOffset : negativeOffset : 0;
+        const end = start + value;
+        if (mode === "stacked") {
+          if (value >= 0)
+            positiveOffset = end;
+          else
+            negativeOffset = end;
+        }
+        const x0 = valueScale(start);
+        const x1 = valueScale(end);
+        x = Math.min(x0, x1);
+        y = categoryPosition + groupY;
+        barWidth = Math.abs(x1 - x0);
+        barHeight = mode === "grouped" ? groupScale.bandwidth() : categoryScale.bandwidth();
+      }
+      const valueLabel = formatNumericValue(value, orientation === "vertical" ? yAxis : xAxis, item.valueFormatter, { seriesId: item.id, seriesLabel: item.label, index: categoryIndex });
+      const categoryLabel = formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
+        seriesId: item.id,
+        seriesLabel: item.label,
+        index: categoryIndex
+      });
+      rowValues.push({ seriesId: item.id, seriesLabel: item.label, valueLabel });
+      const bar = {
+        id: `${item.id}-${category.key}`,
+        seriesId: item.id,
+        seriesLabel: item.label,
+        categoryLabel,
+        valueLabel,
+        x,
+        y,
+        width: barWidth,
+        height: barHeight,
+        color,
+        hidden: false
+      };
+      bars.push(bar);
+      targets.push({ ...bar, x: x + barWidth / 2, y: y + barHeight / 2, xLabel: categoryLabel });
+    });
+    if (rowValues.length > 0) {
+      tableRows.push({
+        categoryKey: category.key,
+        categoryLabel: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
+          index: tableRows.length
+        }),
+        values: rowValues
+      });
+    }
+  }
+  targets.sort((a, b) => orientation === "vertical" ? a.x - b.x : a.y - b.y);
+  return {
+    geometry,
+    categories: sortedCategories,
+    yTicks: valueScale.ticks((orientation === "vertical" ? yAxis : xAxis)?.tickCount ?? 5),
+    categoryTicks,
+    bars,
+    tableRows,
+    targets,
+    empty: targets.length === 0,
+    valueDomain
+  };
+}
+function nearestTarget(targets, x, y, axis = "x") {
+  if (targets.length === 0)
+    return;
+  if (targets.length === 1)
+    return targets[0];
+  const pointerKey = axis === "x" ? x : y;
+  let low = 0;
+  let high = targets.length - 1;
+  while (low < high) {
+    const mid = low + high >> 1;
+    const midKey = axis === "x" ? targets[mid]?.x ?? 0 : targets[mid]?.y ?? 0;
+    if (midKey < pointerKey)
+      low = mid + 1;
+    else
+      high = mid;
+  }
+  const candidates = [];
+  function addBucket(start) {
+    const target = targets[start];
+    if (!target)
+      return;
+    const bucketKey = axis === "x" ? target.x : target.y;
+    for (let index = start;index >= 0; index--) {
+      const candidate = targets[index];
+      if (!candidate)
+        continue;
+      const candidateKey = axis === "x" ? candidate.x : candidate.y;
+      if (candidateKey !== bucketKey)
+        break;
+      candidates.push(candidate);
+    }
+    for (let index = start + 1;index < targets.length; index++) {
+      const candidate = targets[index];
+      if (!candidate)
+        continue;
+      const candidateKey = axis === "x" ? candidate.x : candidate.y;
+      if (candidateKey !== bucketKey)
+        break;
+      candidates.push(candidate);
+    }
+  }
+  addBucket(low);
+  if (low > 0) {
+    let previous = low - 1;
+    const lowTarget = targets[low];
+    const lowKey = lowTarget ? axis === "x" ? lowTarget.x : lowTarget.y : undefined;
+    while (previous > 0) {
+      const previousTarget = targets[previous];
+      if (!previousTarget)
+        break;
+      const previousKey = axis === "x" ? previousTarget.x : previousTarget.y;
+      if (previousKey !== lowKey)
+        break;
+      previous--;
+    }
+    addBucket(previous);
+  }
+  return candidates.reduce((nearest, target) => {
+    if (!nearest)
+      return target;
+    const targetDistance = Math.hypot(target.x - x, target.y - y);
+    const nearestDistance = Math.hypot(nearest.x - x, nearest.y - y);
+    return targetDistance < nearestDistance ? target : nearest;
+  }, undefined);
+}
+function legendVisible(legendPosition, seriesCount) {
+  return legendPosition !== "none" && seriesCount > 0;
+}
+function createGeometry(width, height) {
+  const marginTop = 16;
+  const marginRight = 16;
+  const marginBottom = 36;
+  const marginLeft = 48;
+  return {
+    plotWidth: Math.max(1, width - marginLeft - marginRight),
+    plotHeight: Math.max(1, height - marginTop - marginBottom),
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft
+  };
+}
+function normalizeNumericValue(componentId, seriesId, xLabel, value) {
+  if (value === null || value === undefined)
+    return null;
+  if (!Number.isFinite(value)) {
+    throw new Error(`[cinder/${componentId}] rule=non-finite-y series="${seriesId}" x="${xLabel}": y values must be finite numbers.`);
+  }
+  return value;
+}
+function sortXValues(values) {
+  if (values[0]?.kind === "string")
+    return values;
+  return [...values].toSorted((a, b) => Number(a.comparable) - Number(b.comparable));
+}
+function createPaddedDomain(values) {
+  if (values.length === 0)
+    return [-1, 1];
+  let minimum = values[0];
+  let maximum = values[0];
+  for (let index = 1;index < values.length; index++) {
+    const value = values[index];
+    if (value < minimum)
+      minimum = value;
+    if (value > maximum)
+      maximum = value;
+  }
+  if (minimum === maximum)
+    return [minimum - 1, maximum + 1];
+  return [Math.min(0, minimum), Math.max(0, maximum)];
+}
+function createLinearScale(domain, range) {
+  const [domainMinimum, domainMaximum] = domain[0] === domain[1] ? [domain[0] - 1, domain[1] + 1] : domain;
+  const [rangeMinimum, rangeMaximum] = range;
+  const domainSpan = domainMaximum - domainMinimum;
+  const rangeSpan = rangeMaximum - rangeMinimum;
+  const scale = Object.assign((value) => rangeMinimum + (value - domainMinimum) / domainSpan * rangeSpan, {
+    ticks: (count) => createTicks([domainMinimum, domainMaximum], count)
+  });
+  return scale;
+}
+function createPointScale(domain, range, padding) {
+  const positions = new Map;
+  if (domain.length === 0)
+    return () => {
+      return;
+    };
+  const [rangeMinimum, rangeMaximum] = range;
+  if (domain.length === 1) {
+    positions.set(domain[0] ?? "", rangeMinimum + (rangeMaximum - rangeMinimum) / 2);
+  } else {
+    const step = (rangeMaximum - rangeMinimum) / Math.max(1, domain.length - 1 + padding * 2);
+    const start = rangeMinimum + step * padding;
+    domain.forEach((value, index) => positions.set(value, start + step * index));
+  }
+  return (value) => positions.get(value);
+}
+function createBandScale(domain, range, padding) {
+  const positions = new Map;
+  const [rangeMinimum, rangeMaximum] = range;
+  const availableSize = Math.max(0, rangeMaximum - rangeMinimum);
+  const step = domain.length === 0 ? 0 : availableSize / Math.max(1, domain.length + padding * (domain.length - 1));
+  const bandWidth = Math.max(0, step * (1 - padding));
+  domain.forEach((value, index) => positions.set(value, rangeMinimum + step * index));
+  const scale = Object.assign((value) => positions.get(value), {
+    bandwidth: () => bandWidth
+  });
+  return scale;
+}
+function createNumericDomain(values) {
+  if (values.length === 0)
+    return [0, 1];
+  let minimum = Number(values[0].comparable);
+  let maximum = minimum;
+  for (let index = 1;index < values.length; index++) {
+    const numeric = Number(values[index].comparable);
+    if (numeric < minimum)
+      minimum = numeric;
+    if (numeric > maximum)
+      maximum = numeric;
+  }
+  return minimum === maximum ? [minimum - 1, maximum + 1] : [minimum, maximum];
+}
+function createTicks(domain, count) {
+  const safeCount = Math.max(1, Math.floor(count));
+  if (safeCount === 1)
+    return [domain[0]];
+  const step = (domain[1] - domain[0]) / (safeCount - 1);
+  return Array.from({ length: safeCount }, (_, index) => domain[0] + step * index);
+}
+function createLinePath(points) {
+  if (points.length === 0)
+    return "";
+  const [firstPoint, ...remainingPoints] = points;
+  return [
+    `M${formatPathNumber(firstPoint?.x ?? 0)},${formatPathNumber(firstPoint?.y ?? 0)}`,
+    ...remainingPoints.map((point) => `L${formatPathNumber(point.x)},${formatPathNumber(point.y)}`)
+  ].join("");
+}
+function createAreaPath(points, baseline) {
+  if (points.length === 0)
+    return "";
+  const firstPoint = points[0];
+  const lastPoint = points.at(-1);
+  if (!firstPoint || !lastPoint)
+    return "";
+  const lowerPoints = points.toReversed().map((point) => `L${formatPathNumber(point.x)},${formatPathNumber(point.y0 ?? baseline ?? 0)}`);
+  return [
+    `M${formatPathNumber(firstPoint.x)},${formatPathNumber(firstPoint.y0 ?? baseline ?? 0)}`,
+    `L${formatPathNumber(firstPoint.x)},${formatPathNumber(firstPoint.y)}`,
+    ...points.slice(1).map((point) => `L${formatPathNumber(point.x)},${formatPathNumber(point.y)}`),
+    ...lowerPoints,
+    "Z"
+  ].join("");
+}
+function createStackedBarDomainValues(datumByKey, categories, series) {
+  const values = [0];
+  for (const category of categories) {
+    const datum = datumByKey.get(category.key);
+    if (!datum)
+      continue;
+    let positiveTotal = 0;
+    let negativeTotal = 0;
+    for (const item of series) {
+      const value = datum[item.valueKey];
+      if (typeof value !== "number")
+        continue;
+      if (value >= 0)
+        positiveTotal += value;
+      else
+        negativeTotal += value;
+    }
+    values.push(positiveTotal, negativeTotal);
+  }
+  return values;
+}
+function formatPathNumber(value) {
+  return Number(value.toFixed(3)).toString();
+}
+
+// src/_internal/chart/heatmap-utilities.ts
+function toFiniteOrNull(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function heatmapDomain(values) {
+  let min = Infinity;
+  let max = -Infinity;
+  let count = 0;
+  for (const value of values) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+      if (value < min)
+        min = value;
+      if (value > max)
+        max = value;
+      count += 1;
+    }
+  }
+  if (count === 0)
+    return { min: 0, max: 1, isEmpty: true };
+  return { min, max, isEmpty: false };
+}
+function heatmapDomainOfRows(rows) {
+  let min = Infinity;
+  let max = -Infinity;
+  let count = 0;
+  for (const row of rows) {
+    for (const value of row) {
+      if (typeof value === "number" && Number.isFinite(value)) {
+        if (value < min)
+          min = value;
+        if (value > max)
+          max = value;
+        count += 1;
+      }
+    }
+  }
+  if (count === 0)
+    return { min: 0, max: 1, isEmpty: true };
+  return { min, max, isEmpty: false };
+}
+function normalizeHeatmapValue(value, domain, scale = "sequential") {
+  if (!Number.isFinite(value))
+    return 0.5;
+  if (scale === "diverging") {
+    const bound = Math.max(Math.abs(domain.min), Math.abs(domain.max));
+    if (bound === 0)
+      return 0.5;
+    return clamp01(0.5 + value / (2 * bound));
+  }
+  const range = domain.max - domain.min;
+  if (range === 0)
+    return 0.5;
+  return clamp01((value - domain.min) / range);
+}
+function clamp01(value) {
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+}
+function heatmapCellFill(value, domain, scale = "sequential") {
+  if (value === null)
+    return "var(--cinder-surface-inset)";
+  const normalized = normalizeHeatmapValue(value, domain, scale);
+  if (scale === "diverging") {
+    if (normalized < 0.5) {
+      const ratio2 = (0.5 - normalized) * 2;
+      return `color-mix(in oklch, var(--cinder-chart-series-5) ${Math.round(ratio2 * 100)}%, var(--cinder-surface-inset))`;
+    }
+    const ratio = (normalized - 0.5) * 2;
+    return `color-mix(in oklch, var(--cinder-chart-series-3) ${Math.round(ratio * 100)}%, var(--cinder-surface-inset))`;
+  }
+  return `color-mix(in oklch, var(--cinder-chart-series-1) ${Math.round(normalized * 100)}%, var(--cinder-surface-inset))`;
+}
+function heatmapLabelFill(value, domain, scale = "sequential") {
+  if (value === null)
+    return "var(--cinder-text-muted)";
+  const intensity = scale === "diverging" ? Math.abs(normalizeHeatmapValue(value, domain, scale) - 0.5) * 2 : normalizeHeatmapValue(value, domain, scale);
+  return intensity > 0.5 ? "var(--cinder-surface)" : "var(--cinder-text)";
+}
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/spectrogram/spectrogram.svelte
+var root_1 = $.from_html(`<p class="cinder-spectrogram__description"> </p>`);
+var root_2 = $.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
+var root_5 = $.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
+var root_8 = $.from_svg(`<title> </title>`);
+var root_11 = $.from_svg(`<rect class="cinder-spectrogram__cell" aria-hidden="true"></rect>`);
+var root_13 = $.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
+var root_15 = $.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_9 = $.from_svg(`<g><!><!><!></g>`);
+var root_17 = $.from_html(`<th scope="col"> </th>`);
+var root_19 = $.from_html(`<td> </td>`);
+var root_18 = $.from_html(`<tr><th scope="row"> </th><!></tr>`);
+var root_16 = $.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency bin</th><!></tr></thead><tbody></tbody></table>`);
+var root = $.from_html(`<figure><!> <div class="cinder-spectrogram__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+function Spectrogram($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  let height = $.prop($$props, "height", 3, 200), loading = $.prop($$props, "loading", 3, false), dataTableVisibility = $.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "label",
+    "description",
+    "frames",
+    "frequencyLabels",
+    "height",
+    "loading",
+    "dataTableVisibility",
+    "dataTableCaption",
+    "class",
+    "empty",
+    "loadingContent",
+    "id"
+  ]);
+  const rootId = $.derived(() => $$props.id ?? generatedId);
+  const descriptionId = $.derived(() => $$props.description ? `${$.get(rootId)}-description` : undefined);
+  const marginTop = 8;
+  const marginRight = 16;
+  const marginBottom = 32;
+  const marginLeft = 60;
+  let measuredWidth = $.state(400);
+  let rootElement = $.state(undefined);
+  $.user_effect(() => {
+    const element = $.get(rootElement);
+    if (!element)
+      return;
+    if (typeof ResizeObserver === "undefined") {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0)
+        $.set(measuredWidth, rect.width, true);
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0)
+        $.set(measuredWidth, entry.contentRect.width, true);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  });
+  const plotWidth = $.derived(() => Math.max(1, $.get(measuredWidth) - marginLeft - marginRight));
+  const plotHeight = $.derived(() => Math.max(1, height() - marginTop - marginBottom));
+  const binCount = $.derived(() => $$props.frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
+  const binIndices = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => index2));
+  const isEmpty = $.derived(() => $$props.frames.length === 0 || $.get(binCount) === 0);
+  const cellWidth = $.derived(() => $$props.frames.length > 0 ? $.get(plotWidth) / $$props.frames.length : 0);
+  const cellHeight = $.derived(() => $.get(binCount) > 0 ? $.get(plotHeight) / $.get(binCount) : 0);
+  function binValueAt(frameIndex, binIndex) {
+    return toFiniteOrNull($$props.frames[frameIndex]?.bins[binIndex]);
+  }
+  const domain = $.derived(() => heatmapDomainOfRows($$props.frames.map((frame) => frame.bins)));
+  function cellFill(value) {
+    return heatmapCellFill(value, $.get(domain), "sequential");
+  }
+  function binY(binIndex) {
+    return $.get(plotHeight) - (binIndex + 1) * $.get(cellHeight);
+  }
+  const yLabels = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => $$props.frequencyLabels?.[index2] ?? String(index2)));
+  const maxYLabels = 8;
+  const yLabelStep = $.derived(() => Math.max(1, Math.ceil($.get(binCount) / maxYLabels)));
+  const maxXLabels = 10;
+  const xLabelStep = $.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxXLabels)));
+  const hasDataTable = $.derived(() => dataTableVisibility() !== "hidden");
+  const maxTableFrames = 10;
+  const maxTableBins = 10;
+  const tableFrameStep = $.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxTableFrames)));
+  const tableBinStep = $.derived(() => Math.max(1, Math.ceil($.get(binCount) / maxTableBins)));
+  const tableFrames = $.derived(() => $$props.frames.map((frame, frameIndex) => ({ frame, frameIndex })).filter((_, index2) => index2 % $.get(tableFrameStep) === 0).slice(0, maxTableFrames));
+  const tableBinIndices = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => index2).filter((index2) => index2 % $.get(tableBinStep) === 0).slice(0, maxTableBins).reverse());
+  const isTruncated = $.derived(() => $$props.frames.length > maxTableFrames || $.get(binCount) > maxTableBins);
+  const tableCaption = $.derived(() => $.get(isTruncated) ? `${$$props.dataTableCaption ?? $$props.label} (showing ${$.get(tableFrames).length} of ${$$props.frames.length} frames, ${$.get(tableBinIndices).length} of ${$.get(binCount)} bins)` : $$props.dataTableCaption ?? $$props.label);
+  function formatValue(value) {
+    if (value === null)
+      return "—";
+    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(value);
+  }
+  var figure = root();
+  $.attribute_effect(figure, ($0) => ({
+    ...rest,
+    id: $.get(rootId),
+    class: $0,
+    "aria-label": $$props.label,
+    "aria-describedby": $.get(descriptionId)
+  }), [() => classNames("cinder-spectrogram", $$props.class)]);
+  var node = $.child(figure);
+  {
+    var consequent = ($$anchor2) => {
+      var p = root_1();
+      var text2 = $.child(p, true);
+      $.reset(p);
+      $.template_effect(() => {
+        $.set_attribute(p, "id", $.get(descriptionId));
+        $.set_text(text2, $$props.description);
+      });
+      $.append($$anchor2, p);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.description)
+        $$render(consequent);
+    });
+  }
+  var div = $.sibling(node, 2);
+  let styles;
+  var node_1 = $.child(div);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_1 = root_2();
+      var node_2 = $.child(div_1);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment = $.comment();
+          var node_3 = $.first_child(fragment);
+          $.snippet(node_3, () => $$props.loadingContent);
+          $.append($$anchor3, fragment);
+        };
+        var alternate = ($$anchor3) => {
+          var text_1 = $.text("Loading…");
+          $.append($$anchor3, text_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($$props.loadingContent)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $.reset(div_1);
+      $.append($$anchor2, div_1);
+    };
+    var consequent_4 = ($$anchor2) => {
+      var div_2 = root_5();
+      var node_4 = $.child(div_2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var fragment_1 = $.comment();
+          var node_5 = $.first_child(fragment_1);
+          $.snippet(node_5, () => $$props.empty);
+          $.append($$anchor3, fragment_1);
+        };
+        var alternate_1 = ($$anchor3) => {
+          var text_2 = $.text("No spectrogram data");
+          $.append($$anchor3, text_2);
+        };
+        $.if(node_4, ($$render) => {
+          if ($$props.empty)
+            $$render(consequent_3);
+          else
+            $$render(alternate_1, -1);
+        });
+      }
+      $.reset(div_2);
+      $.append($$anchor2, div_2);
+    };
+    $.if(node_1, ($$render) => {
+      if (loading())
+        $$render(consequent_2);
+      else if ($.get(isEmpty))
+        $$render(consequent_4, 1);
+    });
+  }
+  var svg = $.sibling(node_1, 2);
+  var node_6 = $.child(svg);
+  {
+    var consequent_5 = ($$anchor2) => {
+      var title = root_8();
+      var text_3 = $.child(title, true);
+      $.reset(title);
+      $.template_effect(() => {
+        $.set_attribute(title, "id", `${$.get(rootId) ?? ""}-svg-title`);
+        $.set_text(text_3, $$props.label);
+      });
+      $.append($$anchor2, title);
+    };
+    $.if(node_6, ($$render) => {
+      if (!loading() && !$.get(isEmpty))
+        $$render(consequent_5);
+    });
+  }
+  var node_7 = $.sibling(node_6);
+  {
+    var consequent_8 = ($$anchor2) => {
+      var g = root_9();
+      $.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
+      var node_8 = $.child(g);
+      $.each(node_8, 17, () => $$props.frames, $.index, ($$anchor3, _frame, frameIndex) => {
+        var fragment_2 = $.comment();
+        var node_9 = $.first_child(fragment_2);
+        $.each(node_9, 16, () => $.get(binIndices), (binIndex) => binIndex, ($$anchor4, binIndex) => {
+          var rect_1 = root_11();
+          $.template_effect(($0, $1) => {
+            $.set_attribute(rect_1, "x", frameIndex * $.get(cellWidth));
+            $.set_attribute(rect_1, "y", $0);
+            $.set_attribute(rect_1, "width", $.get(cellWidth));
+            $.set_attribute(rect_1, "height", $.get(cellHeight));
+            $.set_attribute(rect_1, "fill", $1);
+          }, [
+            () => binY(binIndex),
+            () => cellFill(binValueAt(frameIndex, binIndex))
+          ]);
+          $.append($$anchor4, rect_1);
+        });
+        $.append($$anchor3, fragment_2);
+      });
+      var node_10 = $.sibling(node_8);
+      $.each(node_10, 17, () => $.get(yLabels), $.index, ($$anchor3, yLabel, index2) => {
+        var fragment_3 = $.comment();
+        var node_11 = $.first_child(fragment_3);
+        {
+          var consequent_6 = ($$anchor4) => {
+            var text_4 = root_13();
+            $.set_attribute(text_4, "x", -6);
+            var text_5 = $.child(text_4, true);
+            $.reset(text_4);
+            $.template_effect(($0) => {
+              $.set_attribute(text_4, "y", $0);
+              $.set_text(text_5, $.get(yLabel));
+            }, [() => binY(index2) + $.get(cellHeight) / 2]);
+            $.append($$anchor4, text_4);
+          };
+          $.if(node_11, ($$render) => {
+            if (index2 % $.get(yLabelStep) === 0)
+              $$render(consequent_6);
+          });
+        }
+        $.append($$anchor3, fragment_3);
+      });
+      var node_12 = $.sibling(node_10);
+      $.each(node_12, 17, () => $$props.frames, $.index, ($$anchor3, frame, index2) => {
+        var fragment_4 = $.comment();
+        var node_13 = $.first_child(fragment_4);
+        {
+          var consequent_7 = ($$anchor4) => {
+            var text_6 = root_15();
+            var text_7 = $.child(text_6, true);
+            $.reset(text_6);
+            $.template_effect(() => {
+              $.set_attribute(text_6, "x", index2 * $.get(cellWidth) + $.get(cellWidth) / 2);
+              $.set_attribute(text_6, "y", $.get(plotHeight) + 16);
+              $.set_text(text_7, $.get(frame).label);
+            });
+            $.append($$anchor4, text_6);
+          };
+          $.if(node_13, ($$render) => {
+            if (index2 % $.get(xLabelStep) === 0)
+              $$render(consequent_7);
+          });
+        }
+        $.append($$anchor3, fragment_4);
+      });
+      $.reset(g);
+      $.append($$anchor2, g);
+    };
+    $.if(node_7, ($$render) => {
+      if (!loading() && !$.get(isEmpty))
+        $$render(consequent_8);
+    });
+  }
+  $.reset(svg);
+  $.reset(div);
+  var node_14 = $.sibling(div, 2);
+  {
+    var consequent_9 = ($$anchor2) => {
+      var table = root_16();
+      var caption = $.child(table);
+      var text_8 = $.child(caption, true);
+      $.reset(caption);
+      var thead = $.sibling(caption);
+      var tr = $.child(thead);
+      var node_15 = $.sibling($.child(tr));
+      $.each(node_15, 17, () => $.get(tableFrames), (entry) => entry.frameIndex, ($$anchor3, entry) => {
+        var th = root_17();
+        var text_9 = $.child(th, true);
+        $.reset(th);
+        $.template_effect(() => $.set_text(text_9, $.get(entry).frame.label));
+        $.append($$anchor3, th);
+      });
+      $.reset(tr);
+      $.reset(thead);
+      var tbody = $.sibling(thead);
+      $.each(tbody, 20, () => $.get(tableBinIndices), (binIndex) => binIndex, ($$anchor3, binIndex) => {
+        var tr_1 = root_18();
+        var th_1 = $.child(tr_1);
+        var text_10 = $.child(th_1, true);
+        $.reset(th_1);
+        var node_16 = $.sibling(th_1);
+        $.each(node_16, 17, () => $.get(tableFrames), (entry) => entry.frameIndex, ($$anchor4, entry) => {
+          var td = root_19();
+          var text_11 = $.child(td, true);
+          $.reset(td);
+          $.template_effect(($0) => $.set_text(text_11, $0), [
+            () => formatValue(binValueAt($.get(entry).frameIndex, binIndex))
+          ]);
+          $.append($$anchor4, td);
+        });
+        $.reset(tr_1);
+        $.template_effect(() => $.set_text(text_10, $.get(yLabels)[binIndex] ?? binIndex));
+        $.append($$anchor3, tr_1);
+      });
+      $.reset(tbody);
+      $.reset(table);
+      $.template_effect(($0) => {
+        $.set_class(table, 1, $0);
+        $.set_text(text_8, $.get(tableCaption));
+      }, [() => $.clsx(dataTableClass(dataTableVisibility()))]);
+      $.append($$anchor2, table);
+    };
+    $.if(node_14, ($$render) => {
+      if ($.get(hasDataTable))
+        $$render(consequent_9);
+    });
+  }
+  $.reset(figure);
+  $.bind_this(figure, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
+  $.template_effect(() => {
+    $.set_attribute(div, "data-cinder-loading", loading() || undefined);
+    styles = $.set_style(div, "", styles, { height: `${height() ?? ""}px` });
+    $.set_attribute(svg, "viewBox", `0 0 ${$.get(measuredWidth)} ${height()}`);
+    $.set_attribute(svg, "aria-hidden", loading() || $.get(isEmpty) ? "true" : undefined);
+    $.set_attribute(svg, "aria-labelledby", !loading() && !$.get(isEmpty) ? `${$.get(rootId)}-svg-title` : undefined);
+  });
+  $.append($$anchor, figure);
+  $.pop();
+}
+
+// src/components/spectrogram/index.ts
+var spectrogram_default = Spectrogram;
+export {
+  spectrogram_default as default,
+  Spectrogram
+};
+
+//# debugId=1F2AF74D97A6B91064756E2164756E21