@misoto22/folio 0.0.0 → 0.17.0

package/dist/charts/lib/figure.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ChartEmptyProps } from './empty.js';
+
+interface ChartColumn {
+    /** The row field this column reads. */
+    key: string;
+    /** What the column is called in the table header. */
+    label: ReactNode;
+}
+interface ChartDataTableProps {
+    caption: string;
+    rows: Record<string, unknown>[];
+    columns: ChartColumn[];
+    /** The field naming each row — the category, the date, the bucket. */
+    rowKey?: string;
+}
+/**
+ * The chart's data, as a table, for a reader who cannot see the chart.
+ *
+ * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard
+ * cursor and announces one point at a time, which is navigation rather than
+ * access to the figures. This is the table view — visually hidden, in the
+ * accessibility tree, and generated from the same rows the marks are drawn
+ * from, so the two cannot disagree.
+ *
+ * `sr-only` rather than `hidden`: `display: none` removes it from the
+ * accessibility tree as well as from the page, which would defeat the purpose.
+ */
+declare function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps): react.JSX.Element | null;
+interface ChartFigureProps {
+    /**
+     * What the chart shows, in a sentence a reader could act on — "Visitors per
+     * month, 2026" rather than "Chart".
+     *
+     * Required, and required for the same reason `Table.caption` and
+     * `Progress.label` are: a plot with no name announces nothing, and it is not
+     * a thing a call site can be trusted to remember. Hidden by default, because
+     * most call sites already print a heading above the chart; `showTitle` puts
+     * it back when they do not.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    className?: string;
+    children: ReactNode;
+    /** The table view. Omit and it is generated; `false` opts out. */
+    table?: Omit<ChartDataTableProps, 'caption'> | false;
+    /**
+     * Whether there is nothing to draw. The plot is replaced by `empty` when it
+     * is true.
+     *
+     * Named as a question rather than derived from `table.rows`, because a chart
+     * mid-load has no rows either and wants its skeleton, not a message.
+     */
+    isEmpty?: boolean;
+    /**
+     * What stands in for the plot when there is nothing to draw. `false` keeps
+     * the plot, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * The figure a chart is rendered inside: its name, its plot, and its data as a
+ * table.
+ *
+ * Every chart root in the package wraps itself in this, so "the chart is
+ * announced and its numbers are reachable" is a property of the system rather
+ * than something each call site has to remember to add.
+ *
+ * The empty state is here for the same reason. Seven of the twenty charts had
+ * no `empty` at all — zero rows drew a named figure over a blank box, and
+ * `ChartDataTable` renders nothing below one row, so the picture and its text
+ * equivalent went silent together and the reader could not tell "no data" from
+ * "failed to load". A chart that forgets it now has to forget it here, once.
+ */
+declare function ChartFigure({ title, showTitle, description, className, children, table, isEmpty, empty, }: ChartFigureProps): react.JSX.Element;
+
+export { type ChartColumn, ChartDataTable, type ChartDataTableProps, ChartFigure, type ChartFigureProps };

package/dist/charts/lib/figure.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { ChartEmpty } from "./empty.js";
+function ChartDataTable({ caption, rows, columns, rowKey }) {
+  if (rows.length === 0 || columns.length === 0) return null;
+  return /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+    /* @__PURE__ */ jsx("caption", { children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      rowKey && /* @__PURE__ */ jsx("th", { scope: "col", children: rowKey }),
+      columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column.label }, column.key))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      rowKey && /* @__PURE__ */ jsx("th", { scope: "row", children: cellText(row[rowKey]) || String(index + 1) }),
+      columns.map((column) => /* @__PURE__ */ jsx("td", { children: cellText(row[column.key]) }, column.key))
+    ] }, index)) })
+  ] });
+}
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number") return value.toLocaleString();
+  if (typeof value === "string" || typeof value === "boolean") return String(value);
+  return "";
+}
+function ChartFigure({
+  title,
+  showTitle = false,
+  description,
+  className,
+  children,
+  table,
+  isEmpty = false,
+  empty
+}) {
+  const captionId = `chart-title-${useId().replace(/:/g, "")}`;
+  return (
+    // Named explicitly rather than relying on the caption. A `<figcaption>` IS
+    // the figure's accessible name per the spec, but support for deriving it is
+    // uneven across assistive technology — and a chart whose name resolves in
+    // only some screen readers is a chart with no name.
+    /* @__PURE__ */ jsxs("figure", { "aria-labelledby": captionId, className: cn("flex min-h-0 w-full flex-col", className), children: [
+      /* @__PURE__ */ jsxs(
+        "figcaption",
+        {
+          id: captionId,
+          className: cn(!showTitle && "sr-only", showTitle && "mb-3 flex flex-col gap-1"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(showTitle && "font-heading text-[length:var(--fs-item)] text-(--ink)"), children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: cn(showTitle && "mono-meta text-(--ink-3-aa)"), children: description })
+          ]
+        }
+      ),
+      isEmpty && empty !== false ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : children,
+      table && /* @__PURE__ */ jsx(ChartDataTable, { caption: title, ...table })
+    ] })
+  );
+}
+export {
+  ChartDataTable,
+  ChartFigure
+};
+//# sourceMappingURL=figure.js.map

package/dist/charts/lib/figure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/figure.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { ChartEmpty, type ChartEmptyProps } from './empty'\n\nexport interface ChartColumn {\n  /** The row field this column reads. */\n  key: string\n  /** What the column is called in the table header. */\n  label: ReactNode\n}\n\nexport interface ChartDataTableProps {\n  caption: string\n  rows: Record<string, unknown>[]\n  columns: ChartColumn[]\n  /** The field naming each row — the category, the date, the bucket. */\n  rowKey?: string\n}\n\n/**\n * The chart's data, as a table, for a reader who cannot see the chart.\n *\n * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard\n * cursor and announces one point at a time, which is navigation rather than\n * access to the figures. This is the table view — visually hidden, in the\n * accessibility tree, and generated from the same rows the marks are drawn\n * from, so the two cannot disagree.\n *\n * `sr-only` rather than `hidden`: `display: none` removes it from the\n * accessibility tree as well as from the page, which would defeat the purpose.\n */\nexport function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps) {\n  if (rows.length === 0 || columns.length === 0) return null\n\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {rowKey && <th scope=\"col\">{rowKey}</th>}\n          {columns.map((column) => (\n            <th key={column.key} scope=\"col\">\n              {column.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row, index) => (\n          <tr key={index}>\n            {rowKey && <th scope=\"row\">{cellText(row[rowKey]) || String(index + 1)}</th>}\n            {columns.map((column) => (\n              <td key={column.key}>{cellText(row[column.key])}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return value.toLocaleString()\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\nexport interface ChartFigureProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on — \"Visitors per\n   * month, 2026\" rather than \"Chart\".\n   *\n   * Required, and required for the same reason `Table.caption` and\n   * `Progress.label` are: a plot with no name announces nothing, and it is not\n   * a thing a call site can be trusted to remember. Hidden by default, because\n   * most call sites already print a heading above the chart; `showTitle` puts\n   * it back when they do not.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  className?: string\n  children: ReactNode\n  /** The table view. Omit and it is generated; `false` opts out. */\n  table?: Omit<ChartDataTableProps, 'caption'> | false\n  /**\n   * Whether there is nothing to draw. The plot is replaced by `empty` when it\n   * is true.\n   *\n   * Named as a question rather than derived from `table.rows`, because a chart\n   * mid-load has no rows either and wants its skeleton, not a message.\n   */\n  isEmpty?: boolean\n  /**\n   * What stands in for the plot when there is nothing to draw. `false` keeps\n   * the plot, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * The figure a chart is rendered inside: its name, its plot, and its data as a\n * table.\n *\n * Every chart root in the package wraps itself in this, so \"the chart is\n * announced and its numbers are reachable\" is a property of the system rather\n * than something each call site has to remember to add.\n *\n * The empty state is here for the same reason. Seven of the twenty charts had\n * no `empty` at all — zero rows drew a named figure over a blank box, and\n * `ChartDataTable` renders nothing below one row, so the picture and its text\n * equivalent went silent together and the reader could not tell \"no data\" from\n * \"failed to load\". A chart that forgets it now has to forget it here, once.\n */\nexport function ChartFigure({\n  title,\n  showTitle = false,\n  description,\n  className,\n  children,\n  table,\n  isEmpty = false,\n  empty,\n}: ChartFigureProps) {\n  const captionId = `chart-title-${useId().replace(/:/g, '')}`\n\n  return (\n    // Named explicitly rather than relying on the caption. A `<figcaption>` IS\n    // the figure's accessible name per the spec, but support for deriving it is\n    // uneven across assistive technology — and a chart whose name resolves in\n    // only some screen readers is a chart with no name.\n    <figure aria-labelledby={captionId} className={cn('flex min-h-0 w-full flex-col', className)}>\n      <figcaption\n        id={captionId}\n        className={cn(!showTitle && 'sr-only', showTitle && 'mb-3 flex flex-col gap-1')}\n      >\n        <span className={cn(showTitle && 'font-heading text-[length:var(--fs-item)] text-(--ink)')}>{title}</span>\n        {description && (\n          <span className={cn(showTitle && 'mono-meta text-(--ink-3-aa)')}>{description}</span>\n        )}\n      </figcaption>\n      {isEmpty && empty !== false ? <ChartEmpty {...(empty || {})} /> : children}\n      {table && <ChartDataTable caption={title} {...table} />}\n    </figure>\n  )\n}\n"],"mappings":"AAoCM,cAEE,YAFF;AApCN,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,kBAAwC;AA6B1C,SAAS,eAAe,EAAE,SAAS,MAAM,SAAS,OAAO,GAAwB;AACtF,MAAI,KAAK,WAAW,KAAK,QAAQ,WAAW,EAAG,QAAO;AAEtD,SACE,qBAAC,WAAM,WAAU,WACf;AAAA,wBAAC,aAAS,mBAAQ;AAAA,IAClB,oBAAC,WACC,+BAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,kBAAO;AAAA,MAClC,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAoB,OAAM,OACxB,iBAAO,SADD,OAAO,GAEhB,CACD;AAAA,OACH,GACF;AAAA,IACA,oBAAC,WACE,eAAK,IAAI,CAAC,KAAK,UACd,qBAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,mBAAS,IAAI,MAAM,CAAC,KAAK,OAAO,QAAQ,CAAC,GAAE;AAAA,MACtE,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAqB,mBAAS,IAAI,OAAO,GAAG,CAAC,KAArC,OAAO,GAAgC,CACjD;AAAA,SAJM,KAKT,CACD,GACH;AAAA,KACF;AAEJ;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,eAAe;AAC3D,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,SAAO;AACT;AAmDO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,YAAY,eAAe,MAAM,EAAE,QAAQ,MAAM,EAAE,CAAC;AAE1D;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,YAAO,mBAAiB,WAAW,WAAW,GAAG,gCAAgC,SAAS,GACzF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW,GAAG,CAAC,aAAa,WAAW,aAAa,0BAA0B;AAAA,UAE9E;AAAA,gCAAC,UAAK,WAAW,GAAG,aAAa,wDAAwD,GAAI,iBAAM;AAAA,YAClG,eACC,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,GAAI,uBAAY;AAAA;AAAA;AAAA,MAElF;AAAA,MACC,WAAW,UAAU,QAAQ,oBAAC,cAAY,GAAI,SAAS,CAAC,GAAI,IAAK;AAAA,MACjE,SAAS,oBAAC,kBAAe,SAAS,OAAQ,GAAG,OAAO;AAAA,OACvD;AAAA;AAEJ;","names":[]}

package/dist/charts/lib/format.d.ts

@@ -0,0 +1,46 @@
+/**
+ * How a number is written on a chart.
+ *
+ * `compact` is the one an axis almost always wants and almost never gets:
+ * an axis reading 1,200,000 spends four characters saying "this is a big
+ * number" and pushes the plot inward to do it, where 1.2M says the same thing
+ * in four characters total. Every other option here exists because a bare
+ * `toLocaleString` cannot say what the number IS — a share, a price, a span.
+ */
+type NumberStyle = 'plain' | 'compact' | 'percent' | 'currency' | 'duration' | 'bytes';
+interface NumberFormatOptions {
+    style?: NumberStyle;
+    /** BCP 47 tag. Omit and the reader's own locale decides. */
+    locale?: string;
+    /** ISO 4217, for `currency`. */
+    currency?: string;
+    /** Digits after the point. Defaults to what the style needs. */
+    fractionDigits?: number;
+    /** Written after the number — "req/s", "kB", "°C". Ignored by `currency`. */
+    unit?: string;
+}
+/**
+ * A formatter for one axis, one tooltip, or one label.
+ *
+ * Returns a function rather than a string so it can be handed straight to
+ * Recharts' `tickFormatter`, which is called once per tick and must not
+ * rebuild an `Intl.NumberFormat` each time — constructing one is expensive
+ * enough that doing it per tick shows up on a chart with a brush.
+ *
+ * @example
+ * <BarChart.YAxis tickFormatter={formatNumber({ style: 'compact' })} />
+ * @example
+ * <LineChart.YAxis tickFormatter={formatNumber({ style: 'currency', currency: 'AUD' })} />
+ */
+declare function formatNumber(options?: NumberFormatOptions): (value: number) => string;
+/**
+ * The default a chart uses when nothing is said: compact above four digits,
+ * plain below it.
+ *
+ * The threshold is where an axis starts costing the plot real width. Below it,
+ * "9,400" is more precise and no wider than "9.4K"; above it, the compact form
+ * wins on both counts.
+ */
+declare const defaultTick: (value: number) => string;
+
+export { type NumberFormatOptions, type NumberStyle, defaultTick, formatNumber };

package/dist/charts/lib/format.js

@@ -0,0 +1,56 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+const BYTE_STEPS = ["B", "kB", "MB", "GB", "TB", "PB"];
+function duration(seconds) {
+  const sign = seconds < 0 ? "-" : "";
+  const total = Math.abs(seconds);
+  if (total < MINUTE) return `${sign}${Math.round(total)}s`;
+  if (total < HOUR) {
+    const minutes = Math.floor(total / MINUTE);
+    const rest = Math.round(total % MINUTE);
+    return rest === 0 ? `${sign}${minutes}m` : `${sign}${minutes}m ${rest}s`;
+  }
+  if (total < DAY) {
+    const hours2 = Math.floor(total / HOUR);
+    const minutes = Math.round(total % HOUR / MINUTE);
+    return minutes === 0 ? `${sign}${hours2}h` : `${sign}${hours2}h ${minutes}m`;
+  }
+  const days = Math.floor(total / DAY);
+  const hours = Math.round(total % DAY / HOUR);
+  return hours === 0 ? `${sign}${days}d` : `${sign}${days}d ${hours}h`;
+}
+function bytes(value, fractionDigits, locale) {
+  const sign = value < 0 ? "-" : "";
+  let size = Math.abs(value);
+  let step = 0;
+  while (size >= 1024 && step < BYTE_STEPS.length - 1) {
+    size /= 1024;
+    step += 1;
+  }
+  const digits = fractionDigits ?? (step === 0 || size >= 100 ? 0 : 1);
+  return `${sign}${size.toLocaleString(locale, { maximumFractionDigits: digits })} ${BYTE_STEPS[step]}`;
+}
+function formatNumber(options = {}) {
+  const { style = "plain", locale, currency = "USD", fractionDigits, unit } = options;
+  if (style === "duration") return (value) => duration(value);
+  if (style === "bytes") return (value) => bytes(value, fractionDigits, locale);
+  const intl = new Intl.NumberFormat(locale, {
+    notation: style === "compact" ? "compact" : "standard",
+    compactDisplay: "short",
+    style: style === "percent" ? "percent" : style === "currency" ? "currency" : "decimal",
+    currency: style === "currency" ? currency : void 0,
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits ?? (style === "compact" ? 1 : void 0)
+  });
+  if (!unit || style === "currency") return (value) => intl.format(value);
+  return (value) => `${intl.format(value)} ${unit}`;
+}
+const defaultTick = (value) => Math.abs(value) >= 1e4 ? COMPACT(value) : PLAIN(value);
+const COMPACT = formatNumber({ style: "compact" });
+const PLAIN = formatNumber({ style: "plain" });
+export {
+  defaultTick,
+  formatNumber
+};
+//# sourceMappingURL=format.js.map

package/dist/charts/lib/format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/format.ts"],"sourcesContent":["/**\n * How a number is written on a chart.\n *\n * `compact` is the one an axis almost always wants and almost never gets:\n * an axis reading 1,200,000 spends four characters saying \"this is a big\n * number\" and pushes the plot inward to do it, where 1.2M says the same thing\n * in four characters total. Every other option here exists because a bare\n * `toLocaleString` cannot say what the number IS — a share, a price, a span.\n */\nexport type NumberStyle = 'plain' | 'compact' | 'percent' | 'currency' | 'duration' | 'bytes'\n\nexport interface NumberFormatOptions {\n  style?: NumberStyle\n  /** BCP 47 tag. Omit and the reader's own locale decides. */\n  locale?: string\n  /** ISO 4217, for `currency`. */\n  currency?: string\n  /** Digits after the point. Defaults to what the style needs. */\n  fractionDigits?: number\n  /** Written after the number — \"req/s\", \"kB\", \"°C\". Ignored by `currency`. */\n  unit?: string\n}\n\nconst MINUTE = 60\nconst HOUR = 3600\nconst DAY = 86_400\n\n/** 1024-based steps, because a byte count is not a decimal quantity. */\nconst BYTE_STEPS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'] as const\n\n/**\n * Seconds as a span a person reads — \"1h 12m\", not \"4320\".\n *\n * Two units at most on purpose: \"1h 12m 30s\" is three facts where the reader\n * asked for one, and the third is never the one that mattered.\n */\nfunction duration(seconds: number): string {\n  const sign = seconds < 0 ? '-' : ''\n  const total = Math.abs(seconds)\n\n  if (total < MINUTE) return `${sign}${Math.round(total)}s`\n  if (total < HOUR) {\n    const minutes = Math.floor(total / MINUTE)\n    const rest = Math.round(total % MINUTE)\n    return rest === 0 ? `${sign}${minutes}m` : `${sign}${minutes}m ${rest}s`\n  }\n  if (total < DAY) {\n    const hours = Math.floor(total / HOUR)\n    const minutes = Math.round((total % HOUR) / MINUTE)\n    return minutes === 0 ? `${sign}${hours}h` : `${sign}${hours}h ${minutes}m`\n  }\n  const days = Math.floor(total / DAY)\n  const hours = Math.round((total % DAY) / HOUR)\n  return hours === 0 ? `${sign}${days}d` : `${sign}${days}d ${hours}h`\n}\n\nfunction bytes(value: number, fractionDigits: number | undefined, locale?: string): string {\n  const sign = value < 0 ? '-' : ''\n  let size = Math.abs(value)\n  let step = 0\n  while (size >= 1024 && step < BYTE_STEPS.length - 1) {\n    size /= 1024\n    step += 1\n  }\n  const digits = fractionDigits ?? (step === 0 || size >= 100 ? 0 : 1)\n  // A maximum without a minimum: 2048 bytes is \"2 kB\", not \"2.0 kB\". A\n  // trailing zero on a size claims a precision the step conversion does not\n  // have.\n  return `${sign}${size.toLocaleString(locale, { maximumFractionDigits: digits })} ${BYTE_STEPS[step]}`\n}\n\n/**\n * A formatter for one axis, one tooltip, or one label.\n *\n * Returns a function rather than a string so it can be handed straight to\n * Recharts' `tickFormatter`, which is called once per tick and must not\n * rebuild an `Intl.NumberFormat` each time — constructing one is expensive\n * enough that doing it per tick shows up on a chart with a brush.\n *\n * @example\n * <BarChart.YAxis tickFormatter={formatNumber({ style: 'compact' })} />\n * @example\n * <LineChart.YAxis tickFormatter={formatNumber({ style: 'currency', currency: 'AUD' })} />\n */\nexport function formatNumber(options: NumberFormatOptions = {}): (value: number) => string {\n  const { style = 'plain', locale, currency = 'USD', fractionDigits, unit } = options\n\n  if (style === 'duration') return (value) => duration(value)\n  if (style === 'bytes') return (value) => bytes(value, fractionDigits, locale)\n\n  const intl = new Intl.NumberFormat(locale, {\n    notation: style === 'compact' ? 'compact' : 'standard',\n    compactDisplay: 'short',\n    style: style === 'percent' ? 'percent' : style === 'currency' ? 'currency' : 'decimal',\n    currency: style === 'currency' ? currency : undefined,\n    minimumFractionDigits: fractionDigits,\n    maximumFractionDigits: fractionDigits ?? (style === 'compact' ? 1 : undefined),\n  })\n\n  if (!unit || style === 'currency') return (value) => intl.format(value)\n  // A plain space, not a thin one: U+2009 is invisible in a diff and the\n  // linter flags it, and at 11px on an axis the two are indistinguishable.\n  return (value) => `${intl.format(value)} ${unit}`\n}\n\n/**\n * The default a chart uses when nothing is said: compact above four digits,\n * plain below it.\n *\n * The threshold is where an axis starts costing the plot real width. Below it,\n * \"9,400\" is more precise and no wider than \"9.4K\"; above it, the compact form\n * wins on both counts.\n */\nexport const defaultTick = (value: number): string =>\n  Math.abs(value) >= 10_000 ? COMPACT(value) : PLAIN(value)\n\nconst COMPACT = formatNumber({ style: 'compact' })\nconst PLAIN = formatNumber({ style: 'plain' })\n"],"mappings":"AAuBA,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,MAAM;AAGZ,MAAM,aAAa,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAQrD,SAAS,SAAS,SAAyB;AACzC,QAAM,OAAO,UAAU,IAAI,MAAM;AACjC,QAAM,QAAQ,KAAK,IAAI,OAAO;AAE9B,MAAI,QAAQ,OAAQ,QAAO,GAAG,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AACtD,MAAI,QAAQ,MAAM;AAChB,UAAM,UAAU,KAAK,MAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,KAAK,MAAM,QAAQ,MAAM;AACtC,WAAO,SAAS,IAAI,GAAG,IAAI,GAAG,OAAO,MAAM,GAAG,IAAI,GAAG,OAAO,KAAK,IAAI;AAAA,EACvE;AACA,MAAI,QAAQ,KAAK;AACf,UAAMA,SAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,UAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,MAAM;AAClD,WAAO,YAAY,IAAI,GAAG,IAAI,GAAGA,MAAK,MAAM,GAAG,IAAI,GAAGA,MAAK,KAAK,OAAO;AAAA,EACzE;AACA,QAAM,OAAO,KAAK,MAAM,QAAQ,GAAG;AACnC,QAAM,QAAQ,KAAK,MAAO,QAAQ,MAAO,IAAI;AAC7C,SAAO,UAAU,IAAI,GAAG,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,KAAK;AACnE;AAEA,SAAS,MAAM,OAAe,gBAAoC,QAAyB;AACzF,QAAM,OAAO,QAAQ,IAAI,MAAM;AAC/B,MAAI,OAAO,KAAK,IAAI,KAAK;AACzB,MAAI,OAAO;AACX,SAAO,QAAQ,QAAQ,OAAO,WAAW,SAAS,GAAG;AACnD,YAAQ;AACR,YAAQ;AAAA,EACV;AACA,QAAM,SAAS,mBAAmB,SAAS,KAAK,QAAQ,MAAM,IAAI;AAIlE,SAAO,GAAG,IAAI,GAAG,KAAK,eAAe,QAAQ,EAAE,uBAAuB,OAAO,CAAC,CAAC,IAAI,WAAW,IAAI,CAAC;AACrG;AAeO,SAAS,aAAa,UAA+B,CAAC,GAA8B;AACzF,QAAM,EAAE,QAAQ,SAAS,QAAQ,WAAW,OAAO,gBAAgB,KAAK,IAAI;AAE5E,MAAI,UAAU,WAAY,QAAO,CAAC,UAAU,SAAS,KAAK;AAC1D,MAAI,UAAU,QAAS,QAAO,CAAC,UAAU,MAAM,OAAO,gBAAgB,MAAM;AAE5E,QAAM,OAAO,IAAI,KAAK,aAAa,QAAQ;AAAA,IACzC,UAAU,UAAU,YAAY,YAAY;AAAA,IAC5C,gBAAgB;AAAA,IAChB,OAAO,UAAU,YAAY,YAAY,UAAU,aAAa,aAAa;AAAA,IAC7E,UAAU,UAAU,aAAa,WAAW;AAAA,IAC5C,uBAAuB;AAAA,IACvB,uBAAuB,mBAAmB,UAAU,YAAY,IAAI;AAAA,EACtE,CAAC;AAED,MAAI,CAAC,QAAQ,UAAU,WAAY,QAAO,CAAC,UAAU,KAAK,OAAO,KAAK;AAGtE,SAAO,CAAC,UAAU,GAAG,KAAK,OAAO,KAAK,CAAC,IAAI,IAAI;AACjD;AAUO,MAAM,cAAc,CAAC,UAC1B,KAAK,IAAI,KAAK,KAAK,MAAS,QAAQ,KAAK,IAAI,MAAM,KAAK;AAE1D,MAAM,UAAU,aAAa,EAAE,OAAO,UAAU,CAAC;AACjD,MAAM,QAAQ,aAAa,EAAE,OAAO,QAAQ,CAAC;","names":["hours"]}

package/dist/charts/lib/legend.d.ts

@@ -0,0 +1,45 @@
+import * as recharts from 'recharts';
+import { DefaultLegendContentProps } from 'recharts';
+import * as react from 'react';
+
+/**
+ * The shape of a legend's series mark.
+ *
+ * Seven, because the mark is doing more work here than in a chromatic system:
+ * with the monochrome ramp, a bar-shaped swatch beside a bar chart and a
+ * dot-shaped one beside a scatter is often the fastest way a reader ties the
+ * key to the plot.
+ */
+type ChartLegendVariant = 'square' | 'circle' | 'circle-outline' | 'rounded-square' | 'rounded-square-outline' | 'vertical-bar' | 'horizontal-bar';
+/** Where the legend sits along the inline axis. Recharts' own vocabulary. */
+type ChartLegendAlign = 'left' | 'center' | 'right';
+interface ChartLegendContentProps extends DefaultLegendContentProps {
+    className?: string;
+    /** Suppresses a config `icon`, falling back to the shape swatch. */
+    hideIcon?: boolean;
+    /** The row field holding a series name, when it is not the `dataKey`. */
+    nameKey?: string;
+    /** The chart's selected series, or null when the whole plot is lit. */
+    selected?: string | null;
+    /** Makes each entry a control that toggles its series. */
+    isClickable?: boolean;
+    onSelectChange?: (selected: string | null) => void;
+    variant?: ChartLegendVariant;
+}
+/**
+ * The key to a plot's series.
+ *
+ * Required above one series and not decorative: the monochrome ramp separates
+ * two series by a step of grey and a texture, and neither is self-describing.
+ * The chroma palette does not change that — three of its light steps sit below
+ * 3:1 on paper, and the legend is the documented relief.
+ *
+ * When `isClickable` is set each entry is a real `<button>` with `aria-pressed`
+ * rather than a `<div>` with a click handler. That is the difference between a
+ * filter a keyboard can reach and one it cannot, and it is why the entry is not
+ * simply styled to look pressable.
+ */
+declare function ChartLegendContent({ className, hideIcon, nameKey, payload, verticalAlign, align, selected, onSelectChange, isClickable, variant, }: ChartLegendContentProps): react.JSX.Element | null;
+declare const ChartLegend: react.MemoExoticComponent<(outsideProps: recharts.LegendProps) => React.ReactPortal | null>;
+
+export { ChartLegend, type ChartLegendAlign, ChartLegendContent, type ChartLegendContentProps, type ChartLegendVariant };

package/dist/charts/lib/legend.js

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Legend as RechartsLegend } from "recharts";
+import { cn } from "../../lib/cn.js";
+import { colorStops, cssName, seriesFromPayload, useChart } from "./chart.js";
+const ALIGN = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  nameKey,
+  payload,
+  verticalAlign,
+  align = "right",
+  selected,
+  onSelectChange,
+  isClickable,
+  variant = "rounded-square"
+}) {
+  const { config } = useChart();
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "m-0 flex list-none items-center gap-4 p-0 select-none",
+        ALIGN[align],
+        verticalAlign === "top" ? "pb-4" : "pt-4",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item) => {
+        const named = nameKey && item.payload ? item.payload[nameKey] : void 0;
+        const key = `${named ?? item.value ?? item.dataKey ?? "value"}`;
+        const series = seriesFromPayload(config, item, key);
+        const isLit = selected === null || selected === void 0 || selected === key;
+        const stops = series ? colorStops(series) : 1;
+        const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+          series?.icon && !hideIcon ? /* @__PURE__ */ jsx(series.icon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(LegendSwatch, { variant, seriesKey: key, stops }),
+          series?.label ?? key
+        ] });
+        const shared = cn(
+          "flex items-center gap-1.5 text-(--ink-2) transition-opacity duration-(--duration-fast) [&>svg]:size-3 [&>svg]:text-(--ink-3-aa)",
+          !isLit && "opacity-30"
+        );
+        return /* @__PURE__ */ jsx("li", { children: isClickable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": selected === key,
+            onClick: () => onSelectChange?.(selected === key ? null : key),
+            className: cn(
+              shared,
+              "cursor-pointer rounded-(--radius-sm) hover:text-(--ink)"
+            ),
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: shared, children: body }) }, key);
+      })
+    }
+  );
+}
+function LegendSwatch({
+  variant,
+  seriesKey,
+  stops
+}) {
+  const fill = paintStyle(seriesKey, stops);
+  const outline = { ...fill, ...MASK };
+  switch (variant) {
+    case "square":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0", style: fill });
+    case "circle":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-(--radius-pill)", style: fill });
+    case "circle-outline":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "size-2.5 shrink-0 rounded-(--radius-pill) p-[1.5px]",
+          style: outline
+        }
+      );
+    case "vertical-bar":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-3 w-1 shrink-0 rounded-[2px]", style: fill });
+    case "horizontal-bar":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1 w-3 shrink-0 rounded-[2px]", style: fill });
+    case "rounded-square-outline":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px] p-[1.5px]", style: outline });
+    case "rounded-square":
+    default:
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: fill });
+  }
+}
+const MASK = {
+  WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+  WebkitMaskComposite: "xor",
+  mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+  maskComposite: "exclude"
+};
+function paintStyle(seriesKey, stops) {
+  const name = cssName(seriesKey);
+  if (stops <= 1) return { backgroundColor: `var(--color-${name}-0)` };
+  const gradient = Array.from({ length: stops }, (_, index) => {
+    const offset = index / (stops - 1) * 100;
+    return `var(--color-${name}-${index}) ${offset}%`;
+  }).join(", ");
+  return { background: `linear-gradient(to right, ${gradient})` };
+}
+const ChartLegend = RechartsLegend;
+export {
+  ChartLegend,
+  ChartLegendContent
+};
+//# sourceMappingURL=legend.js.map

package/dist/charts/lib/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/legend.tsx"],"sourcesContent":["'use client'\n\nimport type { CSSProperties } from 'react'\nimport { Legend as RechartsLegend } from 'recharts'\nimport type { DefaultLegendContentProps } from 'recharts'\nimport { cn } from '../../lib/cn'\nimport { colorStops, cssName, seriesFromPayload, useChart } from './chart'\n\n/**\n * The shape of a legend's series mark.\n *\n * Seven, because the mark is doing more work here than in a chromatic system:\n * with the monochrome ramp, a bar-shaped swatch beside a bar chart and a\n * dot-shaped one beside a scatter is often the fastest way a reader ties the\n * key to the plot.\n */\nexport type ChartLegendVariant =\n  | 'square'\n  | 'circle'\n  | 'circle-outline'\n  | 'rounded-square'\n  | 'rounded-square-outline'\n  | 'vertical-bar'\n  | 'horizontal-bar'\n\n/** Where the legend sits along the inline axis. Recharts' own vocabulary. */\nexport type ChartLegendAlign = 'left' | 'center' | 'right'\n\nconst ALIGN: Record<ChartLegendAlign, string> = {\n  left: 'justify-start',\n  center: 'justify-center',\n  right: 'justify-end',\n}\n\nexport interface ChartLegendContentProps extends DefaultLegendContentProps {\n  className?: string\n  /** Suppresses a config `icon`, falling back to the shape swatch. */\n  hideIcon?: boolean\n  /** The row field holding a series name, when it is not the `dataKey`. */\n  nameKey?: string\n  /** The chart's selected series, or null when the whole plot is lit. */\n  selected?: string | null\n  /** Makes each entry a control that toggles its series. */\n  isClickable?: boolean\n  onSelectChange?: (selected: string | null) => void\n  variant?: ChartLegendVariant\n}\n\n/**\n * The key to a plot's series.\n *\n * Required above one series and not decorative: the monochrome ramp separates\n * two series by a step of grey and a texture, and neither is self-describing.\n * The chroma palette does not change that — three of its light steps sit below\n * 3:1 on paper, and the legend is the documented relief.\n *\n * When `isClickable` is set each entry is a real `<button>` with `aria-pressed`\n * rather than a `<div>` with a click handler. That is the difference between a\n * filter a keyboard can reach and one it cannot, and it is why the entry is not\n * simply styled to look pressable.\n */\nexport function ChartLegendContent({\n  className,\n  hideIcon = false,\n  nameKey,\n  payload,\n  verticalAlign,\n  align = 'right',\n  selected,\n  onSelectChange,\n  isClickable,\n  variant = 'rounded-square',\n}: ChartLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) return null\n\n  return (\n    <ul\n      className={cn(\n        'm-0 flex list-none items-center gap-4 p-0 select-none',\n        ALIGN[align],\n        verticalAlign === 'top' ? 'pb-4' : 'pt-4',\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== 'none')\n        .map((item) => {\n          const named =\n            nameKey && item.payload ? (item.payload as Record<string, unknown>)[nameKey] : undefined\n          const key = `${named ?? item.value ?? item.dataKey ?? 'value'}`\n          const series = seriesFromPayload(config, item, key)\n          const isLit = selected === null || selected === undefined || selected === key\n          const stops = series ? colorStops(series) : 1\n\n          const body = (\n            <>\n              {series?.icon && !hideIcon ? (\n                <series.icon aria-hidden />\n              ) : (\n                <LegendSwatch variant={variant} seriesKey={key} stops={stops} />\n              )}\n              {series?.label ?? key}\n            </>\n          )\n\n          const shared = cn(\n            'flex items-center gap-1.5 text-(--ink-2) transition-opacity duration-(--duration-fast) [&>svg]:size-3 [&>svg]:text-(--ink-3-aa)',\n            !isLit && 'opacity-30',\n          )\n\n          return (\n            <li key={key}>\n              {isClickable ? (\n                <button\n                  type=\"button\"\n                  aria-pressed={selected === key}\n                  onClick={() => onSelectChange?.(selected === key ? null : key)}\n                  className={cn(\n                    shared,\n                    'cursor-pointer rounded-(--radius-sm) hover:text-(--ink)',\n                  )}\n                >\n                  {body}\n                </button>\n              ) : (\n                <span className={shared}>{body}</span>\n              )}\n            </li>\n          )\n        })}\n    </ul>\n  )\n}\n\n/**\n * The swatch itself. Each variant is its own branch rather than a size lookup,\n * because the outline forms are built differently from the filled ones and a\n * shared branch would have to carry both.\n */\nfunction LegendSwatch({\n  variant,\n  seriesKey,\n  stops,\n}: {\n  variant: ChartLegendVariant\n  seriesKey: string\n  stops: number\n}) {\n  const fill = paintStyle(seriesKey, stops)\n  const outline = { ...fill, ...MASK }\n\n  switch (variant) {\n    case 'square':\n      return <span aria-hidden className=\"size-2 shrink-0\" style={fill} />\n    case 'circle':\n      return <span aria-hidden className=\"size-2 shrink-0 rounded-(--radius-pill)\" style={fill} />\n    case 'circle-outline':\n      return (\n        <span\n          aria-hidden\n          className=\"size-2.5 shrink-0 rounded-(--radius-pill) p-[1.5px]\"\n          style={outline}\n        />\n      )\n    case 'vertical-bar':\n      return <span aria-hidden className=\"h-3 w-1 shrink-0 rounded-[2px]\" style={fill} />\n    case 'horizontal-bar':\n      return <span aria-hidden className=\"h-1 w-3 shrink-0 rounded-[2px]\" style={fill} />\n    case 'rounded-square-outline':\n      return <span aria-hidden className=\"size-2.5 shrink-0 rounded-[3px] p-[1.5px]\" style={outline} />\n    case 'rounded-square':\n    default:\n      return <span aria-hidden className=\"size-2 shrink-0 rounded-[2px]\" style={fill} />\n  }\n}\n\n/**\n * Punches the middle out of a filled swatch, leaving its border.\n *\n * `border-color` cannot take a gradient, and a swatch whose series is painted\n * with several stops has to show them. Two masks composited with `exclude`\n * leave only the padding box — which follows the border radius, which a border\n * approximated with an inset box-shadow would not.\n */\nconst MASK: CSSProperties = {\n  WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n  WebkitMaskComposite: 'xor',\n  mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n  maskComposite: 'exclude',\n}\n\n/** A swatch's paint: the series colour, or its gradient across the swatch. */\nfunction paintStyle(seriesKey: string, stops: number): CSSProperties {\n  const name = cssName(seriesKey)\n  if (stops <= 1) return { backgroundColor: `var(--color-${name}-0)` }\n\n  const gradient = Array.from({ length: stops }, (_, index) => {\n    const offset = (index / (stops - 1)) * 100\n    return `var(--color-${name}-${index}) ${offset}%`\n  }).join(', ')\n\n  return { background: `linear-gradient(to right, ${gradient})` }\n}\n\nexport const ChartLegend = RechartsLegend\n"],"mappings":"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","names":[]}

package/dist/charts/lib/loading.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+
+/** The key the skeleton series is drawn from. Never a real series name. */
+declare const LOADING_KEY = "loading";
+/** Rows for the skeleton plot: one field, values inside a plausible band. */
+declare function loadingRows(points?: number, salt?: number, min?: number, max?: number): {
+    loading: number;
+}[];
+/**
+ * The skeleton's rows, re-rolled each time the shimmer leaves the plot.
+ *
+ * The swap is driven by the shimmer's own position rather than by a timer: an
+ * interval drifts against the animation and eventually re-rolls the data in
+ * full view, which reads as the chart glitching rather than as it loading.
+ */
+declare function useLoadingRows(isLoading: boolean, points?: number): {
+    rows: {
+        loading: number;
+    }[];
+    onShimmerExit: () => void;
+};
+/**
+ * The badge over a loading plot.
+ *
+ * Sits above the skeleton rather than replacing it, so the chart keeps its
+ * measured height and the page does not jump when the data lands.
+ */
+declare function LoadingIndicator({ isLoading }: {
+    isLoading: boolean;
+}): react.JSX.Element | null;
+/**
+ * The travelling mask that makes the skeleton read as "working" rather than as
+ * "broken".
+ *
+ * The plot is normalised to 0–1 and the pattern is three times that wide, so
+ * the highlight has a full plot-width of runway on each side. `onShimmerExit`
+ * fires as it crosses the far edge — off-screen — which is where the rows are
+ * re-rolled, so the loop has no visible seam.
+ *
+ * With `prefers-reduced-motion` the whole travelling layer is dropped for a
+ * flat wash: the skeleton still says "not yet", without anything moving.
+ */
+declare function LoadingShimmer({ id, onShimmerExit }: {
+    id: string;
+    onShimmerExit: () => void;
+}): react.JSX.Element;
+
+export { LOADING_KEY, LoadingIndicator, LoadingShimmer, loadingRows, useLoadingRows };

package/dist/charts/lib/loading.js

@@ -0,0 +1,105 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+const LOADING_KEY = "loading";
+const SHIMMER_SECONDS = 2;
+function noise(index, salt) {
+  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+function loadingRows(points = 14, salt = 0, min = 0, max = 70) {
+  return Array.from({ length: points }, (_, index) => ({
+    [LOADING_KEY]: Math.floor(noise(index, salt) * (max - min)) + min
+  }));
+}
+function useLoadingRows(isLoading, points = 14) {
+  const [salt, setSalt] = useState(0);
+  const onShimmerExit = useCallback(() => {
+    if (isLoading) setSalt((previous) => previous + 1);
+  }, [isLoading]);
+  const rows = useMemo(() => loadingRows(points, salt), [points, salt]);
+  return { rows, onShimmerExit };
+}
+function LoadingIndicator({ isLoading }) {
+  if (!isLoading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-(--z-rule) flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+    "output",
+    {
+      className: "flex items-center gap-2 rounded-(--radius) border border-(--rule) bg-(--chart-surface) px-2.5 py-1 mono-meta text-(--ink-2)",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-folio-animated": true,
+            className: "size-3 rounded-(--radius-pill) border border-(--rule-2) border-t-(--ink) motion-safe:animate-[folio-spin_0.8s_linear_infinite]"
+          }
+        ),
+        "Loading"
+      ]
+    }
+  ) });
+}
+function shimmerStops(steps = 17, min = 0.05, max = 0.9) {
+  return Array.from({ length: steps }, (_, index) => {
+    const t = index / (steps - 1);
+    const eased = Math.sin(t * Math.PI) ** 2;
+    return {
+      offset: `${Math.round(t * 100)}%`,
+      opacity: Number((min + eased * (max - min)).toFixed(3))
+    };
+  });
+}
+function LoadingShimmer({ id, onShimmerExit }) {
+  const reduceMotion = useReducedMotion();
+  const stops = shimmerStops();
+  const lastX = useRef(-1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("linearGradient", { id: `${id}-loading-gradient`, x1: "0", y1: "0", x2: "1", y2: "0", children: stops.map(({ offset, opacity }) => /* @__PURE__ */ jsx("stop", { offset, stopColor: "white", stopOpacity: opacity }, offset)) }),
+    /* @__PURE__ */ jsx("mask", { id: `${id}-loading-mask`, maskUnits: "userSpaceOnUse", children: reduceMotion ? /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white", fillOpacity: 0.55 }) : /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-loading-pattern)` }) }),
+    !reduceMotion && /* @__PURE__ */ jsx(
+      "pattern",
+      {
+        id: `${id}-loading-pattern`,
+        patternUnits: "objectBoundingBox",
+        patternContentUnits: "objectBoundingBox",
+        patternTransform: "rotate(25)",
+        width: 3,
+        height: "1",
+        x: "0",
+        y: "0",
+        children: /* @__PURE__ */ jsx(
+          motion.rect,
+          {
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${id}-loading-gradient)`,
+            initial: { x: -1 },
+            animate: { x: 2 },
+            transition: {
+              duration: SHIMMER_SECONDS,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            },
+            onUpdate: (latest) => {
+              const x = typeof latest.x === "number" ? latest.x : -1;
+              if (x >= 1 && lastX.current < 1) onShimmerExit();
+              lastX.current = x;
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  LOADING_KEY,
+  LoadingIndicator,
+  LoadingShimmer,
+  loadingRows,
+  useLoadingRows
+};
+//# sourceMappingURL=loading.js.map

package/dist/charts/lib/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/loading.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport { motion, useReducedMotion } from 'motion/react'\n\n/** The key the skeleton series is drawn from. Never a real series name. */\nexport const LOADING_KEY = 'loading'\n\n/** One shimmer pass, in seconds. */\nconst SHIMMER_SECONDS = 2\n\n/**\n * A deterministic pseudo-random sequence, seeded by index.\n *\n * The shape this was ported from called `Math.random()` inside a `useMemo`,\n * which runs during render — so the server rendered one skeleton, the client\n * rendered a different one, and React logged a hydration mismatch for every\n * chart on the page. A hash of the index gives the same jagged, un-patterned\n * silhouette on both sides of the wire, which is the only property the\n * skeleton actually needs from randomness.\n */\nfunction noise(index: number, salt: number): number {\n  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453\n  return x - Math.floor(x)\n}\n\n/** Rows for the skeleton plot: one field, values inside a plausible band. */\nexport function loadingRows(points = 14, salt = 0, min = 0, max = 70) {\n  return Array.from({ length: points }, (_, index) => ({\n    [LOADING_KEY]: Math.floor(noise(index, salt) * (max - min)) + min,\n  }))\n}\n\n/**\n * The skeleton's rows, re-rolled each time the shimmer leaves the plot.\n *\n * The swap is driven by the shimmer's own position rather than by a timer: an\n * interval drifts against the animation and eventually re-rolls the data in\n * full view, which reads as the chart glitching rather than as it loading.\n */\nexport function useLoadingRows(isLoading: boolean, points = 14) {\n  const [salt, setSalt] = useState(0)\n\n  const onShimmerExit = useCallback(() => {\n    if (isLoading) setSalt((previous) => previous + 1)\n  }, [isLoading])\n\n  const rows = useMemo(() => loadingRows(points, salt), [points, salt])\n\n  return { rows, onShimmerExit }\n}\n\n/**\n * The badge over a loading plot.\n *\n * Sits above the skeleton rather than replacing it, so the chart keeps its\n * measured height and the page does not jump when the data lands.\n */\nexport function LoadingIndicator({ isLoading }: { isLoading: boolean }) {\n  if (!isLoading) return null\n\n  return (\n    <div className=\"pointer-events-none absolute inset-0 z-(--z-rule) flex items-center justify-center\">\n      <output\n        className=\"flex items-center gap-2 rounded-(--radius) border border-(--rule) bg-(--chart-surface) px-2.5 py-1 mono-meta text-(--ink-2)\"\n      >\n        <span\n          aria-hidden\n          data-folio-animated\n          className=\"size-3 rounded-(--radius-pill) border border-(--rule-2) border-t-(--ink) motion-safe:animate-[folio-spin_0.8s_linear_infinite]\"\n        />\n        Loading\n      </output>\n    </div>\n  )\n}\n\n/** Bell-curve opacity stops, so the shimmer has no hard edge at either end. */\nfunction shimmerStops(steps = 17, min = 0.05, max = 0.9) {\n  return Array.from({ length: steps }, (_, index) => {\n    const t = index / (steps - 1)\n    const eased = Math.sin(t * Math.PI) ** 2\n    return {\n      offset: `${Math.round(t * 100)}%`,\n      opacity: Number((min + eased * (max - min)).toFixed(3)),\n    }\n  })\n}\n\n/**\n * The travelling mask that makes the skeleton read as \"working\" rather than as\n * \"broken\".\n *\n * The plot is normalised to 0–1 and the pattern is three times that wide, so\n * the highlight has a full plot-width of runway on each side. `onShimmerExit`\n * fires as it crosses the far edge — off-screen — which is where the rows are\n * re-rolled, so the loop has no visible seam.\n *\n * With `prefers-reduced-motion` the whole travelling layer is dropped for a\n * flat wash: the skeleton still says \"not yet\", without anything moving.\n */\nexport function LoadingShimmer({ id, onShimmerExit }: { id: string; onShimmerExit: () => void }) {\n  const reduceMotion = useReducedMotion()\n  const stops = shimmerStops()\n  const lastX = useRef(-1)\n\n  return (\n    <>\n      <linearGradient id={`${id}-loading-gradient`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n        {stops.map(({ offset, opacity }) => (\n          <stop key={offset} offset={offset} stopColor=\"white\" stopOpacity={opacity} />\n        ))}\n      </linearGradient>\n      <mask id={`${id}-loading-mask`} maskUnits=\"userSpaceOnUse\">\n        {reduceMotion ? (\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" fillOpacity={0.55} />\n        ) : (\n          <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-loading-pattern)`} />\n        )}\n      </mask>\n      {!reduceMotion && (\n        <pattern\n          id={`${id}-loading-pattern`}\n          patternUnits=\"objectBoundingBox\"\n          patternContentUnits=\"objectBoundingBox\"\n          patternTransform=\"rotate(25)\"\n          width={3}\n          height=\"1\"\n          x=\"0\"\n          y=\"0\"\n        >\n          <motion.rect\n            y=\"0\"\n            width=\"1\"\n            height=\"1\"\n            fill={`url(#${id}-loading-gradient)`}\n            initial={{ x: -1 }}\n            animate={{ x: 2 }}\n            transition={{\n              duration: SHIMMER_SECONDS,\n              ease: 'linear',\n              repeat: Infinity,\n              repeatType: 'loop',\n            }}\n            onUpdate={(latest) => {\n              const x = typeof latest.x === 'number' ? latest.x : -1\n              if (x >= 1 && lastX.current < 1) onShimmerExit()\n              lastX.current = x\n            }}\n          />\n        </pattern>\n      )}\n    </>\n  )\n}\n"],"mappings":"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","names":[]}