@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/tree-radial.js

@@ -0,0 +1,209 @@
+const TAU = Math.PI * 2;
+function walk(input, depth, parentId) {
+  return {
+    input,
+    depth,
+    parentId,
+    children: (input.children ?? []).map((child) => walk(child, depth + 1, input.id)),
+    lo: 0,
+    hi: 0
+  };
+}
+function flatten(root) {
+  const out = [];
+  const visit = (node) => {
+    out.push(node);
+    for (const child of node.children) visit(child);
+  };
+  visit(root);
+  return out;
+}
+function spanLeaves(root) {
+  let next = 0;
+  const visit = (node) => {
+    if (node.children.length === 0) {
+      node.lo = next;
+      node.hi = next;
+      next += 1;
+      return;
+    }
+    for (const child of node.children) visit(child);
+    node.lo = node.children[0].lo;
+    node.hi = node.children[node.children.length - 1].hi;
+  };
+  visit(root);
+  return next;
+}
+function polar(angle, radius) {
+  return { x: radius * Math.sin(angle), y: -radius * Math.cos(angle) };
+}
+function radialTreeLayout(root, { levelGap = 96, siblingGap = 10, startAngle = 0, sweep = TAU } = {}) {
+  const tree = walk(root, 0, null);
+  const leaves = Math.max(1, spanLeaves(tree));
+  const all = flatten(tree);
+  const maxDepth = Math.max(...all.map((node) => node.depth));
+  const full = sweep >= TAU - 1e-6;
+  const slot = (index) => startAngle + (index + 0.5) / leaves * sweep;
+  const angleOf = (node) => node.children.length === 0 ? slot(node.lo) : (slot(node.lo) + slot(node.hi)) / 2;
+  const radii = [0];
+  const placed = [
+    { x: 0, y: 0, width: tree.input.width, height: tree.input.height }
+  ];
+  const touches = (a, b) => Math.abs(a.x - b.x) < (a.width + b.width) / 2 + siblingGap && Math.abs(a.y - b.y) < (a.height + b.height) / 2 + siblingGap;
+  for (let depth = 1; depth <= maxDepth; depth += 1) {
+    const ring = all.filter((node) => node.depth === depth);
+    const arc = Math.max(
+      ...ring.map((node) => Math.max(node.input.height, node.input.width * 0.55))
+    );
+    const needed = ring.length * (arc + siblingGap) / (full ? TAU : sweep);
+    let radius = Math.max(radii[depth - 1] + levelGap, needed * 0.6);
+    const fits = (candidate) => {
+      const boxes = ring.map((node) => {
+        const point = polar(angleOf(node), candidate);
+        return { ...point, width: node.input.width, height: node.input.height };
+      });
+      return boxes.every(
+        (box, index) => !placed.some((other) => touches(box, other)) && !boxes.some((other, otherIndex) => otherIndex > index && touches(box, other))
+      );
+    };
+    for (let guard = 0; guard < 4e3 && !fits(radius); guard += 1) radius += 2;
+    radii[depth] = radius;
+    for (const node of ring) {
+      const point = polar(angleOf(node), radius);
+      placed.push({ ...point, width: node.input.width, height: node.input.height });
+    }
+  }
+  const nodes = all.map((node) => {
+    const angle = angleOf(node);
+    const radius = radii[node.depth];
+    const point = polar(angle, radius);
+    return {
+      id: node.input.id,
+      parentId: node.parentId,
+      depth: node.depth,
+      x: point.x,
+      y: point.y,
+      width: node.input.width,
+      height: node.input.height,
+      angle
+    };
+  });
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.x - node.width / 2);
+    maxX = Math.max(maxX, node.x + node.width / 2);
+    minY = Math.min(minY, node.y - node.height / 2);
+    maxY = Math.max(maxY, node.y + node.height / 2);
+  }
+  for (const node of nodes) {
+    node.x -= minX;
+    node.y -= minY;
+  }
+  return {
+    nodes,
+    width: maxX - minX,
+    height: maxY - minY,
+    center: { x: -minX, y: -minY }
+  };
+}
+function dendrogramLayout(root, { direction = "top", siblingGap = 20, levelGap = 48 } = {}) {
+  const vertical = direction === "top" || direction === "bottom";
+  const tree = walk(root, 0, null);
+  const all = flatten(tree);
+  const maxDepth = Math.max(...all.map((node) => node.depth));
+  const breadthOf = (node) => vertical ? node.input.width : node.input.height;
+  const alongOf = (node) => vertical ? node.input.height : node.input.width;
+  const centre = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  const place = (node) => {
+    if (node.children.length === 0) {
+      const size = breadthOf(node);
+      centre.set(node, cursor + size / 2);
+      cursor += size + siblingGap;
+      return;
+    }
+    for (const child of node.children) place(child);
+    const first = centre.get(node.children[0]);
+    const last = centre.get(node.children[node.children.length - 1]);
+    centre.set(node, (first + last) / 2);
+  };
+  place(tree);
+  const levelOf = (node) => node.children.length === 0 ? maxDepth : node.depth;
+  const levelSize = [];
+  for (const node of all) {
+    const level = levelOf(node);
+    levelSize[level] = Math.max(levelSize[level] ?? 0, alongOf(node));
+  }
+  const levelStart = [0];
+  for (let level = 1; level <= maxDepth; level += 1) {
+    levelStart[level] = levelStart[level - 1] + (levelSize[level - 1] ?? 0) + levelGap;
+  }
+  const flip = direction === "bottom" || direction === "right" ? -1 : 1;
+  const nodes = all.map((node) => {
+    const level = levelOf(node);
+    const along = (levelStart[level] + (levelSize[level] ?? 0) / 2) * flip;
+    const across = centre.get(node);
+    return {
+      id: node.input.id,
+      parentId: node.parentId,
+      depth: node.depth,
+      x: vertical ? across : along,
+      y: vertical ? along : across,
+      width: node.input.width,
+      height: node.input.height
+    };
+  });
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.x - node.width / 2);
+    maxX = Math.max(maxX, node.x + node.width / 2);
+    minY = Math.min(minY, node.y - node.height / 2);
+    maxY = Math.max(maxY, node.y + node.height / 2);
+  }
+  for (const node of nodes) {
+    node.x -= minX;
+    node.y -= minY;
+  }
+  return { nodes, width: maxX - minX, height: maxY - minY };
+}
+function toPolar(point, center) {
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  return { angle: Math.atan2(dx, -dy), radius: Math.hypot(dx, dy) };
+}
+function radialEdgePath(parent, child, center, style = "curved") {
+  const a = toPolar(parent, center);
+  const b = toPolar(child, center);
+  const r = (n) => Math.round(n * 100) / 100;
+  const at = (angle, radius) => {
+    const p = polar(angle, radius);
+    return { x: center.x + p.x, y: center.y + p.y };
+  };
+  const from = at(a.angle, a.radius);
+  const to = at(b.angle, b.radius);
+  if (style === "straight" || a.radius < 1)
+    return `M${r(from.x)},${r(from.y)}L${r(to.x)},${r(to.y)}`;
+  const mid = (a.radius + b.radius) / 2;
+  if (style === "curved") {
+    const c1 = at(a.angle, mid);
+    const c2 = at(b.angle, mid);
+    return `M${r(from.x)},${r(from.y)}C${r(c1.x)},${r(c1.y)} ${r(c2.x)},${r(c2.y)} ${r(to.x)},${r(to.y)}`;
+  }
+  const out = at(a.angle, mid);
+  const into = at(b.angle, mid);
+  const delta = ((b.angle - a.angle) % TAU + TAU + Math.PI) % TAU - Math.PI;
+  const sweepFlag = delta > 0 ? 1 : 0;
+  return `M${r(from.x)},${r(from.y)}L${r(out.x)},${r(out.y)}A${r(mid)},${r(mid)} 0 0 ${sweepFlag} ${r(into.x)},${r(into.y)}L${r(to.x)},${r(to.y)}`;
+}
+export {
+  dendrogramLayout,
+  radialEdgePath,
+  radialTreeLayout,
+  toPolar
+};

package/dist/charts/core/types.d.ts

@@ -0,0 +1,106 @@
+import type { ValueFormat } from "./format.js";
+import type { ChartTone } from "./palette.js";
+import type { ChartPattern } from "./patterns.js";
+/** A category or time stamp on the category axis. */
+export type XValue = string | number | Date;
+export interface ChartSeries {
+    /** Stable identity, used for keys and legend toggling. */
+    id: string;
+    /** Visible name in the legend, tooltip and data table. */
+    name: string;
+    /** One value per category; `null` leaves a gap. */
+    data: ReadonlyArray<number | null>;
+    /** CSS color, e.g. `var(--chart-cat-3)`. Defaults to the palette slot of the series. */
+    color?: string;
+    /** Dashed stroke (lines) or hatched look, e.g. for a forecast or last year. */
+    dashed?: boolean;
+    /** Overrides the chart `valueFormat` for this series. */
+    format?: ValueFormat;
+    /** Fills bars with an SVG pattern (stripes, dots, ...) in the series color, for color-blind friendly charts. */
+    pattern?: ChartPattern;
+}
+/** Visible strings. English defaults; pass Spanish (or any language) from the app. */
+export interface ChartLabels {
+    empty: string;
+    loading: string;
+    resetZoom: string;
+    total: string;
+    /** Accessible name of the keyboard-explorable plot. */
+    explore: string;
+    /** Accessible name of the brush (range selector). */
+    brush: string;
+    /** Header of the category column in the hidden data table. */
+    category: string;
+    /** Header of the value column in the hidden data table (single-series charts). */
+    value: string;
+    /** Header and tooltip label of a share of the total. */
+    share: string;
+}
+export declare const DEFAULT_LABELS: ChartLabels;
+export declare function resolveLabels(labels?: Partial<ChartLabels>): ChartLabels;
+interface AnnotationBase {
+    label?: string;
+    /** Extra sentence shown in a tooltip when the pointer is near a `point` or `text` mark. */
+    tooltip?: string;
+    /** Color family, `neutral` by default. */
+    tone?: ChartTone;
+}
+/**
+ * Reference marks. `axis: "y"` is the value axis (a threshold such as a daily
+ * goal); `axis: "x"` is the category axis (a date or a category). In horizontal
+ * bar charts the value axis runs left to right, so "y" lines are drawn vertical.
+ */
+export type ChartAnnotation = (AnnotationBase & {
+    type: "line";
+    axis: "y";
+    value: number;
+    yAxis?: string;
+}) | (AnnotationBase & {
+    type: "range";
+    axis: "y";
+    from: number;
+    to: number;
+    yAxis?: string;
+}) | (AnnotationBase & {
+    type: "line";
+    axis: "x";
+    value: XValue;
+}) | (AnnotationBase & {
+    type: "range";
+    axis: "x";
+    from: XValue;
+    to: XValue;
+})
+/** Dot at a data coordinate (category `x`, value `y`) with an optional label pill. */
+ | (AnnotationBase & {
+    type: "point";
+    x: XValue;
+    y: number;
+    yAxis?: string;
+})
+/** Free text anchored at a data coordinate. */
+ | (AnnotationBase & {
+    type: "text";
+    x: XValue;
+    y: number;
+    yAxis?: string;
+});
+export interface ValueAxisOptions {
+    /** Fixed lower bound; by default the data decides (bars and areas start at 0). */
+    min?: number;
+    /** Fixed upper bound. */
+    max?: number;
+    /** Approximate number of ticks; derived from the height by default. */
+    tickCount?: number;
+    /** Tick format; defaults to a short form of the chart `valueFormat`. */
+    format?: ValueFormat;
+    /** Short axis title drawn above the ticks, e.g. "S/" or "Citas". */
+    title?: string;
+    /** Logarithmic scale (line charts only, positive values). */
+    scale?: "linear" | "log";
+    /** Force zero into the domain (lines default to "auto": only when data sits near zero). */
+    zero?: boolean;
+    /** Flips the axis: values grow downwards (or to the left), bars hang from the top (or the right). */
+    reversed?: boolean;
+}
+export {};

package/dist/charts/core/types.js

@@ -0,0 +1,18 @@
+const DEFAULT_LABELS = {
+  empty: "No data to show",
+  loading: "Loading chart",
+  resetZoom: "Reset zoom",
+  total: "Total",
+  explore: "Data points. Use the arrow keys to move between them.",
+  brush: "Visible range",
+  category: "Category",
+  value: "Value",
+  share: "Share"
+};
+function resolveLabels(labels) {
+  return labels ? { ...DEFAULT_LABELS, ...labels } : DEFAULT_LABELS;
+}
+export {
+  DEFAULT_LABELS,
+  resolveLabels
+};

package/dist/charts/core/unit-glyph.d.ts

@@ -0,0 +1,40 @@
+import type { ResolvedUnitShape } from "./unit-icons.js";
+export interface UnitGlyphProps {
+    shape: ResolvedUnitShape;
+    /** Top-left corner of the square cell, in pixels. */
+    x: number;
+    y: number;
+    /** Side of the square cell. */
+    size: number;
+    /** 0 to 1: how much of the unit is filled (the rest shows the track). */
+    fill: number;
+    color: string;
+    /** Draw the unfilled part in the track color. */
+    track?: boolean;
+    /** Unique id for the clip of a partial unit. */
+    clipId: string;
+    /** Partial units fill left to right ("right") or bottom to top ("up"). */
+    direction?: "right" | "up";
+}
+/**
+ * One icon of a unit chart, centered in a square cell. A partial unit draws
+ * the track silhouette and clips the colored copy, so 0.6 of a person is
+ * exactly 60% of its width. The outer group carries `data-unit` and a
+ * fill-box origin, so entry animations can scale it in place.
+ */
+export declare const UnitGlyph: import("react").NamedExoticComponent<UnitGlyphProps>;
+/**
+ * Unit charts make their frame a named container, so the HTML around the
+ * drawing follows the chart width instead of the viewport.
+ */
+export declare const UNIT_FRAME_CLASS = "@container/units";
+/** Legend under the drawing in narrow containers, at its requested place from `@sm` up. */
+export declare const UNIT_LEGEND_CLASS = "order-last @sm/units:order-none";
+/**
+ * Pops every `[data-unit]` in document order: a short scale-and-fade with a
+ * stagger that keeps the whole sequence under about a second.
+ */
+export declare function popUnits(root: Element, { duration, budget }?: {
+    duration?: number | undefined;
+    budget?: number | undefined;
+}): void;

package/dist/charts/core/unit-glyph.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { EASE_OUT } from "./motion.js";
+const UnitGlyph = memo(function UnitGlyph2({
+  shape,
+  x,
+  y,
+  size,
+  fill,
+  color,
+  track = true,
+  clipId,
+  direction = "right"
+}) {
+  const scale = size / Math.max(shape.width, shape.height);
+  const dx = x + (size - shape.width * scale) / 2;
+  const dy = y + (size - shape.height * scale) / 2;
+  const amount = Math.min(1, Math.max(0, fill));
+  const partial = amount > 0 && amount < 1;
+  return /* @__PURE__ */ jsx("g", { "data-unit": "", style: { transformBox: "fill-box", transformOrigin: "center" }, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${dx} ${dy}) scale(${scale})`, children: [
+    partial ? /* @__PURE__ */ jsx("clipPath", { id: clipId, children: direction === "up" ? /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: 0,
+        y: shape.height * (1 - amount),
+        width: shape.width,
+        height: shape.height * amount
+      }
+    ) : /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: shape.width * amount, height: shape.height }) }) : null,
+    track && amount < 1 ? /* @__PURE__ */ jsx("path", { d: shape.path, style: { fill: "var(--track)", fillRule: shape.fillRule } }) : null,
+    amount > 0 ? /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: shape.path,
+        clipPath: partial ? `url(#${clipId})` : void 0,
+        style: { fill: color, fillRule: shape.fillRule }
+      }
+    ) : null
+  ] }) });
+});
+const UNIT_FRAME_CLASS = "@container/units";
+const UNIT_LEGEND_CLASS = "order-last @sm/units:order-none";
+function popUnits(root, { duration = 420, budget = 900 } = {}) {
+  const units = root.querySelectorAll("[data-unit]");
+  const step = units.length > 1 ? Math.min(28, budget / units.length) : 0;
+  units.forEach((unit, index) => {
+    unit.animate(
+      [
+        { transform: "scale(0.3)", opacity: 0 },
+        { transform: "scale(1)", opacity: 1 }
+      ],
+      { duration, delay: index * step, easing: EASE_OUT, fill: "backwards" }
+    );
+  });
+}
+export {
+  UNIT_FRAME_CLASS,
+  UNIT_LEGEND_CLASS,
+  UnitGlyph,
+  popUnits
+};

package/dist/charts/core/unit-icons.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Built-in silhouettes for unit charts, drawn on a 24 x 24 grid as solid
+ * shapes (so a partial unit can be clipped). Any SVG path can be used instead:
+ * pass the `d` string (24 x 24 box assumed) or a `UnitShape` with its own box.
+ */
+export interface UnitShape {
+    /** SVG path data. */
+    path: string;
+    /** Size of the drawing box; 24 x 24 by default. */
+    width?: number;
+    height?: number;
+    fillRule?: "nonzero" | "evenodd";
+    /** Optional stroked detail drawn over the shape (e.g. the rings of a target). */
+    detail?: string;
+    /** Direction a fill-gauge liquid rises: "up" (default) or "right" (a battery). */
+    fill?: "up" | "right";
+    /** Vertical position of a fill-gauge label in shape units; the middle by default. */
+    labelY?: number;
+}
+export interface ResolvedUnitShape {
+    path: string;
+    width: number;
+    height: number;
+    fillRule: "nonzero" | "evenodd";
+    detail?: string;
+    fill: "up" | "right";
+    labelY: number;
+}
+export declare const UNIT_ICONS: {
+    readonly person: {
+        readonly path: "M12 2.5a4 4 0 1 1 0 8a4 4 0 1 1 0-8zM4.5 21.5v-2.8c0-3.6 3.3-6.2 7.5-6.2s7.5 2.6 7.5 6.2v2.8z";
+        readonly labelY: 17.5;
+    };
+    readonly scissors: {
+        readonly path: string;
+    };
+    readonly chair: {
+        readonly path: string;
+    };
+    readonly star: {
+        readonly path: string;
+    };
+    readonly calendar: {
+        readonly fillRule: "evenodd";
+        readonly path: string;
+    };
+    readonly bottle: {
+        readonly labelY: 14.5;
+        readonly path: string;
+    };
+    readonly battery: {
+        readonly path: "M2.5 7.5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2zM20.5 9.5h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1z";
+        readonly fill: "right";
+    };
+    readonly droplet: {
+        readonly path: "M12 1.8c3.9 4.8 7.5 9 7.5 13a7.5 7.5 0 0 1-15 0c0-4 3.6-8.2 7.5-13z";
+    };
+    readonly target: {
+        readonly path: "M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0z";
+        readonly detail: "M5.5 12a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0-13 0zM9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0z";
+    };
+    readonly shield: {
+        readonly path: "M12 1.8l8.5 3.2v6.4c0 5.4-3.6 9.5-8.5 11.1c-4.9-1.6-8.5-5.7-8.5-11.1V5z";
+    };
+    readonly woman: {
+        readonly path: "M12 0.9a3.4 3.4 0 1 1 0 6.8a3.4 3.4 0 1 1 0-6.8zM9 9h6l4.5 10h-15zM9.8 19h1.9v4h-1.9zM12.3 19h1.9v4h-1.9z";
+        readonly labelY: 15;
+    };
+    readonly child: {
+        readonly path: "M12 5.4a3.2 3.2 0 1 1 0 6.4a3.2 3.2 0 1 1 0-6.4zM6.8 21.5v-2.2c0-2.9 2.3-5 5.2-5s5.2 2.1 5.2 5v2.2z";
+        readonly labelY: 18;
+    };
+    readonly heart: {
+        readonly path: "M12 21.2C5.6 16.1 2.5 12.6 2.5 8.6A5 5 0 0 1 12 6.4a5 5 0 0 1 9.5 2.2c0 4-3.1 7.5-9.5 12.6z";
+        readonly labelY: 11.5;
+    };
+    readonly tree: {
+        readonly path: "M12 1.8L18 9.5H15.2L19.5 15.5H4.5L8.8 9.5H6zM10.8 15.5h2.4V22h-2.4z";
+        readonly labelY: 11;
+    };
+    readonly house: {
+        readonly path: "M12 2.2L21.5 10.6H18.9V21H13.7V15H10.3V21H5.1V10.6H2.5z";
+        readonly labelY: 12;
+    };
+    readonly car: {
+        readonly fillRule: "evenodd";
+        readonly path: string;
+    };
+    readonly drop: {
+        readonly path: "M12 1.8c3.9 4.8 7.5 9 7.5 13a7.5 7.5 0 0 1-15 0c0-4 3.6-8.2 7.5-13z";
+    };
+    readonly clock: {
+        readonly fillRule: "evenodd";
+        readonly path: "M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM11 6h2v6.3l4 2.3-1 1.7-5-3z";
+    };
+    readonly pin: {
+        readonly fillRule: "evenodd";
+        readonly path: "M12 1.8a7.5 7.5 0 0 0-7.5 7.5c0 5.4 7.5 12.9 7.5 12.9s7.5-7.5 7.5-12.9A7.5 7.5 0 0 0 12 1.8zM12 6.7a2.6 2.6 0 1 1 0 5.2a2.6 2.6 0 1 1 0-5.2z";
+        readonly labelY: 9.3;
+    };
+    readonly mustache: {
+        readonly path: "M12 9.2C10.6 7.4 8.6 6.4 6.4 6.4C3.8 6.4 1.9 8 1.5 10.6C3.2 9.6 4.9 9.6 6.4 10.7C8.1 12 9.9 13.4 12 13.4C14.1 13.4 15.9 12 17.6 10.7C19.1 9.6 20.8 9.6 22.5 10.6C22.1 8 20.2 6.4 17.6 6.4C15.4 6.4 13.4 7.4 12 9.2Z";
+        readonly labelY: 10;
+    };
+    readonly comb: {
+        readonly path: "M3 4h18a1 1 0 0 1 1 1v4H2V5a1 1 0 0 1 1-1zM3 10h1.6v10H3zM6.2 10h1.6v10H6.2zM9.4 10h1.6v10H9.4zM12.6 10h1.6v10h-1.6zM15.8 10h1.6v10h-1.6zM19 10h1.6v10H19z";
+        readonly labelY: 7;
+    };
+    readonly pole: {
+        readonly fillRule: "evenodd";
+        readonly path: "M8 1.5h8v2.5H8zM8.5 4h7v16h-7zM8 20h8v2.5H8zM8.5 7.5l7-2.5v3l-7 2.5zM8.5 13.5l7-2.5v3l-7 2.5z";
+    };
+};
+export type UnitIconName = keyof typeof UNIT_ICONS;
+/** Human figures and everyday silhouettes for pictograms, in gallery order. */
+export declare const PICTOGRAM_SILHOUETTES: readonly ["person", "woman", "child", "heart", "tree", "house", "car", "star", "drop", "clock", "pin"];
+/** Barbershop silhouettes drawn for this library. */
+export declare const BARBER_SILHOUETTES: readonly ["scissors", "comb", "mustache", "pole", "chair", "bottle"];
+/** A built-in name, a raw path (24 x 24 box) or a full shape definition. */
+export type UnitIcon = UnitIconName | UnitShape | (string & {});
+export declare function isUnitIconName(value: unknown): value is UnitIconName;
+export declare function resolveUnitShape(icon: UnitIcon): ResolvedUnitShape;
+/** A category of a unit chart: one color, optionally its own icon. */
+export interface UnitCategory {
+    id: string;
+    name: string;
+    value: number;
+    /** CSS color; the palette slot of the category by default. */
+    color?: string;
+    /** Icon of this category; the chart `icon` by default. */
+    icon?: UnitIcon;
+}