@siyahi/ui 0.1.9-next.32 → 0.1.9-next.34

package/dist/components/registry/niko-table/types/index.d.ts

@@ -5,8 +5,8 @@ import { Cell, Column, ColumnDef, Header, ReactTable, Row, RowData, TableFeature
 //#region src/components/registry/niko-table/types/index.d.ts
 declare module "@tanstack/react-table" {
   interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
-    label?: string;
-    placeholder?: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
     /**
      * Which column absorbs the leftover row width when column resizing is on
      * (needs `<DataTableColumnResize />`). Filling is ON BY DEFAULT — the first
@@ -22,7 +22,7 @@ declare module "@tanstack/react-table" {
      * persistence side effects. Turn filling off for a whole table with
      * `TableMeta.disableFlexFill`.
      */
-    flex?: boolean;
+    flex?: boolean | undefined;
     /**
      * Never hide this column to fit. Once any column sets it, a table whose
      * columns do not fit its width hides the others, rightmost first, until
@@ -31,39 +31,39 @@ declare module "@tanstack/react-table" {
      * its result. Read `useDataTable().compactColumns?.hidden` in a cell to
      * fold a hidden figure under a kept one.
      */
-    compact?: boolean;
-    variant?: FilterVariant;
-    options?: Option[];
-    range?: [number, number];
+    compact?: boolean | undefined;
+    variant?: FilterVariant | undefined;
+    options?: Option[] | undefined;
+    range?: [number, number] | undefined;
     /**
      * Automatically generate options for select/multiSelect columns if not provided.
      * When true and no static `options` exist, generation logic (wrappers / hooks) may supply them.
      */
-    autoOptions?: boolean;
+    autoOptions?: boolean | undefined;
     /** Whether to automatically rename option labels using formatLabel. When false, uses raw value as label. */
-    autoOptionsFormat?: boolean;
+    autoOptionsFormat?: boolean | undefined;
     /**
      * Per-column label formatter applied when options are auto-derived from
      * row data. Receives the stringified row value and returns the display
      * label. Wins over `autoOptionsFormat` when present. Ignored when the
      * caller passes explicit `options`.
      */
-    formatOptionLabel?: (value: string) => string;
+    formatOptionLabel?: ((value: string) => string) | undefined;
     /** Per-column override for showing counts (falls back to wrapper prop). */
-    showCounts?: boolean;
+    showCounts?: boolean | undefined;
     /** Per-column override for using filtered rows for counts (falls back to wrapper prop). */
-    dynamicCounts?: boolean;
+    dynamicCounts?: boolean | undefined;
     /** Merge strategy override: preserve | augment | replace (falls back to wrapper prop). */
-    mergeStrategy?: "preserve" | "augment" | "replace";
-    unit?: string;
+    mergeStrategy?: "preserve" | "augment" | "replace" | undefined;
+    unit?: string | undefined;
     icon?: React$1.ComponentType<{
-      className?: string;
-    }>;
-    expandedContent?: (row: TData) => React$1.ReactNode;
+      className?: string | undefined;
+    }> | undefined;
+    expandedContent?: ((row: TData) => React$1.ReactNode) | undefined;
   }
   interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
-    joinOperator?: JoinOperator;
-    hasIndividualJoinOperators?: boolean;
+    joinOperator?: JoinOperator | undefined;
+    hasIndividualJoinOperators?: boolean | undefined;
     /**
      * Turn off default flex fill for the whole table, so columns size to their
      * own widths and the table scrolls horizontally instead of stretching to
@@ -73,16 +73,16 @@ declare module "@tanstack/react-table" {
      * — it's read when table options are built, so toggling it at runtime
      * alone won't re-apply until another table state change rebuilds them.
      */
-    disableFlexFill?: boolean;
+    disableFlexFill?: boolean | undefined;
   }
 }
 export interface Option {
   label: string;
   value: string;
-  count?: number;
+  count?: number | undefined;
   icon?: React$1.ComponentType<{
-    className?: string;
-  }>;
+    className?: string | undefined;
+  }> | undefined;
 }
 export type FilterVariant = FilterVariant$1;
 export type FilterOperator = FilterOperator$1;
@@ -96,7 +96,7 @@ export interface ExtendedColumnFilter<TData> {
   variant: FilterVariant;
   operator: FilterOperator;
   filterId: string;
-  joinOperator?: JoinOperator;
+  joinOperator?: JoinOperator | undefined;
 }
 /** Global filter type */
 export type GlobalFilter = string | Record<string, unknown>;
@@ -111,11 +111,11 @@ export interface ExtendedColumnSort<TData> {
  * Query keys for URL state management
  */
 export interface QueryKeys {
-  page?: string;
-  perPage?: string;
-  sort?: string;
-  filters?: string;
-  joinOperator?: string;
+  page?: string | undefined;
+  perPage?: string | undefined;
+  sort?: string | undefined;
+  filters?: string | undefined;
+  joinOperator?: string | undefined;
 }
 /**
  * Extended column definition for data table

package/dist/components/registry/sidebar-07/app-sidebar.d.ts

@@ -1,3 +1,4 @@
+import { Optional } from "../../../lib/optional.js";
 import { NavMain } from "./nav-main.js";
 import { NavProjects } from "./nav-projects.js";
 import { NavUser } from "./nav-user.js";
@@ -5,14 +6,14 @@ import { TeamSwitcher } from "./team-switcher.js";
 import { Sidebar } from "../../ui/sidebar.js";
 import * as React$1 from "react";
 //#region src/components/registry/sidebar-07/app-sidebar.d.ts
-export interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
+export interface AppSidebarProps extends Optional<React$1.ComponentProps<typeof Sidebar>> {
   navMain: React$1.ComponentProps<typeof NavMain>["items"];
-  navLabel?: string;
+  navLabel?: string | undefined;
   /** Shown at the top instead of the team switcher. */
   header?: React$1.ReactNode;
-  teams?: React$1.ComponentProps<typeof TeamSwitcher>["teams"];
-  projects?: React$1.ComponentProps<typeof NavProjects>["projects"];
-  user?: React$1.ComponentProps<typeof NavUser>["user"];
+  teams?: React$1.ComponentProps<typeof TeamSwitcher>["teams"] | undefined;
+  projects?: React$1.ComponentProps<typeof NavProjects>["projects"] | undefined;
+  user?: React$1.ComponentProps<typeof NavUser>["user"] | undefined;
 }
 export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, className, ...props }: AppSidebarProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/sidebar-07/nav-main.d.ts

@@ -5,13 +5,13 @@ export declare function NavMain({ items, label }: {
     title: string;
     url: string;
     icon: React.ReactNode;
-    isActive?: boolean;
-    linkProps?: Omit<React.ComponentProps<"a">, "href">;
+    isActive?: boolean | undefined;
+    linkProps?: Omit<React.ComponentProps<"a">, "href"> | undefined;
     items?: {
       title: string;
       url: string;
-      isActive?: boolean;
-    }[];
+      isActive?: boolean | undefined;
+    }[] | undefined;
   }[];
 }): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/sidebar-07/nav-user.js

@@ -1,5 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../ui/sidebar.js";
 import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,25 +34,22 @@ function NavUser({ user }) {
 		align: "end",
 		sideOffset: 4,
 		children: [
-			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "p-0 font-normal",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
-					children: [/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
-						src: user.avatar,
-						alt: user.name
-					}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }), /* @__PURE__ */ jsxs("div", {
-						className: "grid flex-1 text-left text-sm leading-tight",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate font-medium",
-							children: user.name
-						}), /* @__PURE__ */ jsx("span", {
-							className: "truncate text-xs",
-							children: user.email
-						})]
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
+				children: [/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
+					src: user.avatar,
+					alt: user.name
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }), /* @__PURE__ */ jsxs("div", {
+					className: "grid flex-1 text-left text-sm leading-tight",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium",
+						children: user.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs",
+						children: user.email
 					})]
-				})
-			}) }),
+				})]
+			}),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(SparklesIcon, {}), "Upgrade to Pro"] }) }),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),

package/dist/components/siyahi/callout.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps, ReactNode } from "react";
 //#region src/components/siyahi/callout.d.ts
 export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
   /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
-  tone?: Tone;
+  tone?: Tone | undefined;
   /** A lucide icon, drawn in the tone's colour. */
   icon?: ReactNode;
   title?: ReactNode;

package/dist/components/siyahi/change-bar.d.ts

@@ -9,9 +9,9 @@ export interface ChangeBarProps {
    * Draws the bar from a centre line, losses leftward and gains rightward. Pass it when the column holds both signs:
    * rows.some((row) => row.change < 0) && rows.some((row) => row.change > 0).
    */
-  diverging?: boolean;
-  format?: DeltaProps["format"];
-  className?: string;
+  diverging?: boolean | undefined;
+  format?: DeltaProps["format"] | undefined;
+  className?: string | undefined;
 }
 /**
  * A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so

package/dist/components/siyahi/change-grid.d.ts

@@ -4,23 +4,23 @@ export interface ChangeGridRow {
   /** One figure per column, in column order; null where there is none, such as a month still to come. NaN counts as none. */
   values: readonly (number | null)[];
   /** The row's total as the page works it out: monthly returns compound rather than add. Leave it out for no total. */
-  total?: number | null;
+  total?: number | null | undefined;
   /** Unique key when labels repeat. Defaults to `label`. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface ChangeGridProps {
   /** The column heads, such as the months of a financial year. */
   columns: readonly string[];
   rows: readonly ChangeGridRow[];
   /** "pct" takes fractions, 0.025 for 2.5%; "money" takes amounts, written short in one unit. */
-  format?: "pct" | "money";
+  format?: "pct" | "money" | undefined;
   /** The change that takes the deepest tint, as a size. Defaults to the grid's largest, totals aside. */
-  range?: number;
+  range?: number | undefined;
   /** Heads the total column, which draws when any row has a total. */
-  totalLabel?: string;
+  totalLabel?: string | undefined;
   /** Names the table for a screen reader, such as "Monthly sales growth by year". */
   label: string;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size

package/dist/components/siyahi/data-bar.d.ts

@@ -5,10 +5,10 @@ export interface DataBarProps {
   /** The value a full bar stands for, usually the column's largest: Math.max(...rows.map((row) => row.value)). */
   max: number;
   /** "sign" draws a gain in --positive and a loss in --negative; by default every bar is --chart-1. */
-  tone?: "chart" | "sign";
+  tone?: "chart" | "sign" | undefined;
   /** The figure, as the page formats it. */
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.

package/dist/components/siyahi/data-list.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 //#region src/components/siyahi/data-list.d.ts
 /** Label and value pairs, such as a record's fields in a card. */
 export declare function DataList({ className, children }: {
-  className?: string;
+  className?: string | undefined;
   children: ReactNode;
 }): import("react").JSX.Element;
 export interface DataListItemProps {

package/dist/components/siyahi/data-table-row-count.d.ts

@@ -4,7 +4,7 @@ export interface DataTableRowCountProps {
   /** What a row is, plural: "positions" prints "48 positions" while nothing is filtered. */
   unit: string;
   /** Rows before any filter. Defaults to the table's data; pass it when the page narrowed the data before the table. */
-  total?: number;
+  total?: number | undefined;
 }
 /** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
 export declare function DataTableRowCount<TData extends RowData>({ unit, total }: DataTableRowCountProps): import("react").JSX.Element;

package/dist/components/siyahi/data-table-sort-header.d.ts

@@ -7,7 +7,7 @@ import { RowData } from "@tanstack/react-table";
  * `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
  */
 export declare function DataTableSortHeader<TData extends RowData>({ title }: {
-  title?: string;
+  title?: string | undefined;
 }): import("react").JSX.Element;
 export declare namespace DataTableSortHeader {
   var displayName: string;

package/dist/components/siyahi/delta.d.ts

@@ -2,8 +2,8 @@
 export interface DeltaProps {
   /** The signed change. For `pct`, a fraction: 0.025 is 2.5%. */
   value: number;
-  format?: "pct" | "money";
-  className?: string;
+  format?: "pct" | "money" | undefined;
+  className?: string | undefined;
 }
 /**
  * A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or

package/dist/components/siyahi/drawdown-chart.d.ts

@@ -21,9 +21,9 @@ export interface DrawdownChartCardProps<T extends object, K extends keyof T> ext
   /** The field holding the level, such as the day's cash balance or a fund's value. */
   levelKey: NumericKey<T>;
   /** Writes the level and the peak in the tooltip. Defaults to useFormat().money. */
-  levelFormatter?: (value: number) => string;
+  levelFormatter?: ((value: number) => string) | undefined;
   /** Names the fall in the legend and tooltip. */
-  label?: string;
+  label?: string | undefined;
 }
 /**
  * How far a level sits below the highest it had reached, over time: a fund's or a cash balance's fall from its

package/dist/components/siyahi/histogram-chart.d.ts

@@ -38,15 +38,15 @@ export interface HistogramChartCardProps extends Pick<SeriesChartProps<Histogram
   /** The raw values, one per item, such as each request's response time. */
   values: readonly number[];
   /** About how many buckets; the width is rounded, so the count varies a little. */
-  bins?: number;
+  bins?: number | undefined;
   /** Writes the bucket edges and the marks, such as (v) => `${v} ms`. Defaults to the locale's numbers. */
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: ((value: number) => string) | undefined;
   /** The bucket edges under the axis, when they should be shorter than valueFormatter: 1,000 against 1,000 ms. */
-  tickFormatter?: (value: number) => string;
+  tickFormatter?: ((value: number) => string) | undefined;
   /** What is counted, in the legend and tooltip, such as "Requests". */
-  countLabel?: string;
+  countLabel?: string | undefined;
   /** Percentiles to mark with a line at their bucket; their exact values are written under the chart. */
-  marks?: readonly HistogramMark[];
+  marks?: readonly HistogramMark[] | undefined;
 }
 /**
  * How values spread: counts in buckets of one round width, such as response times by 50 ms, with the median or a

package/dist/components/siyahi/local-time.d.ts

@@ -2,7 +2,7 @@
 export interface LocalTimeProps {
   value: Date | number | string;
   /** Write the date, in the same zone, before the time: 20 Oct 2026, 14:30 IST. */
-  withDate?: boolean;
+  withDate?: boolean | undefined;
 }
 /** A time in the configured zone (14:30 IST), with the viewer's own clock in a tooltip. */
 export declare function LocalTime({ value, withDate }: LocalTimeProps): import("react").JSX.Element;

package/dist/components/siyahi/{page-hero.d.ts → page-header.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-//#region src/components/siyahi/page-hero.d.ts
-export interface PageHeroProps {
+//#region src/components/siyahi/page-header.d.ts
+export interface PageHeaderProps {
   /** A short line above the title in the mono face and the link colour, such as the app or a section name. */
   eyebrow?: ReactNode;
   /** The page's h1. */
@@ -19,5 +19,5 @@ export interface PageHeroProps {
  * the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
  * PageSection.
  */
-export declare function PageHero({ eyebrow, title, lead, detail, actions, mark }: PageHeroProps): import("react").JSX.Element;
+export declare function PageHeader({ eyebrow, title, lead, detail, actions, mark }: PageHeaderProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/{page-hero.js → page-header.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/siyahi/page-hero.tsx
+//#region src/components/siyahi/page-header.tsx
 /**
 * The masthead at the top of a page: a small mark and eyebrow, the title, one muted line saying what the page is,
 * the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
 * PageSection.
 */
-function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
+function PageHeader({ eyebrow, title, lead, detail, actions, mark }) {
 	return /* @__PURE__ */ jsxs("header", {
-		"data-slot": "page-hero",
+		"data-slot": "page-header",
 		className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3 border-b pb-4",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1",
@@ -40,4 +40,4 @@ function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
 	});
 }
 //#endregion
-export { PageHero };
+export { PageHeader };

package/dist/components/siyahi/page-section.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 //#region src/components/siyahi/page-section.d.ts
 export interface PageSectionProps {
   /** Anchor for a table of contents; the section scrolls in with room above it. */
-  id?: string;
+  id?: string | undefined;
   /** Small muted line above the title, such as "Part 2". */
   eyebrow?: ReactNode;
   title: ReactNode;

package/dist/components/siyahi/page-toc.d.ts

@@ -7,9 +7,9 @@ export interface PageTocItem {
 export interface PageTocProps {
   items: PageTocItem[];
   /** Names the navigation for screen readers. */
-  label?: string;
+  label?: string | undefined;
   /** Layout only, such as `top-14` under a sticky page header. */
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,

package/dist/components/siyahi/panel-grid.d.ts

@@ -3,14 +3,17 @@ import { ReactNode } from "react";
 declare const COLUMNS: {
   readonly 1: "";
   readonly 2: "@2xl/panels:grid-cols-2";
-  readonly 3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3";
+  readonly 3: "@2xl/panels:grid-cols-3";
   readonly 4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4";
 };
 export interface PanelGridProps {
-  /** Blocks across on a wide page; two on a medium one, and one on a phone. */
-  columns?: keyof typeof COLUMNS;
+  /**
+   * Blocks across from a 42rem grid, so three short ones fit a reading column (an article's 55rem); 4 goes two across
+   * there and four from 64rem. Below 42rem they sit one under another.
+   */
+  columns?: keyof typeof COLUMNS | undefined;
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled

package/dist/components/siyahi/panel-grid.js

@@ -6,7 +6,7 @@ import { Children } from "react";
 const COLUMNS = {
 	1: "",
 	2: "@2xl/panels:grid-cols-2",
-	3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3",
+	3: "@2xl/panels:grid-cols-3",
 	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
 };
 /**

package/dist/components/siyahi/price-chart.d.ts

@@ -5,7 +5,7 @@ export interface PriceChartProps {
   /** Fixed height in pixels. */
   height: number;
   /** TradingView's licence asks for a credit on the page; turn it off on the second chart. */
-  credit?: boolean;
+  credit?: boolean | undefined;
 }
 /** A TradingView Lightweight Charts price chart in the theme's colours, redrawn when the scheme changes. */
 export declare function PriceChart({ data, height, credit }: PriceChartProps): import("react").JSX.Element;

package/dist/components/siyahi/range-position.d.ts

@@ -5,15 +5,15 @@ export interface RangePositionProps {
   high: number;
   value: number;
   /** Names the low end: "52-week low". */
-  lowLabel?: string;
-  highLabel?: string;
+  lowLabel?: string | undefined;
+  highLabel?: string | undefined;
   /** Follows the percentage in the full variant: "of the way up the 52-week range". */
   caption?: ReactNode;
   /** Writes low, high and value; useFormat().money by default. */
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: ((value: number) => string) | undefined;
   /** compact fits a table cell: the ends' figures either side of the track, nothing above it. */
-  variant?: "full" | "compact";
-  className?: string;
+  variant?: "full" | "compact" | undefined;
+  className?: string | undefined;
 }
 /**
  * How far a value sits between a low and a high, such as a price in its 52-week range: a track filled to the value

package/dist/components/siyahi/range-position.js

@@ -26,7 +26,7 @@ function RangePosition({ low, high, value, lowLabel = "Low", highLabel = "High",
 			style: { width: at }
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "range-thumb",
-			className: cn("absolute top-1/2 -translate-1/2 rounded-full border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
+			className: cn("absolute top-1/2 -translate-1/2 border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
 			style: { left: at }
 		})]
 	});

package/dist/components/siyahi/scale-toggle.d.ts

@@ -7,11 +7,11 @@ export interface ScaleToggleProps {
   /** The group's accessible name, such as "Share of book scale". */
   label: string;
   /** The axis' name shown before the buttons, for a card with a toggle on each axis. */
-  caption?: string;
+  caption?: string | undefined;
   value: AxisScale;
   onValueChange: (scale: AxisScale) => void;
   /** Why log cannot draw this data, such as a value at or below zero: Log is disabled and this shows beside it. */
-  logBlocked?: string;
+  logBlocked?: string | undefined;
 }
 /** Linear and Log buttons for one chart axis, in the header's toggle style. */
 export declare function ScaleToggle({ label, caption, value, onValueChange, logBlocked }: ScaleToggleProps): import("react").JSX.Element;

package/dist/components/siyahi/scatter-chart.d.ts

@@ -9,12 +9,12 @@ export interface ScatterPoint {
   /** Up. `null` when unknown: the point is not drawn, so say on the page how many are missing. */
   y: number | null;
   /** Unique key when names repeat, such as one product sold in two regions. Defaults to `name`. */
-  key?: string;
+  key?: string | undefined;
   /**
    * A weight, such as a holding's value: the dot's area follows it. Give every point a size, or none. A size that is
    * not a positive number draws the smallest dot and leaves the others' sizes as they are.
    */
-  size?: number;
+  size?: number | undefined;
 }
 /** One tooltip row: a label and its figure, such as ["Sales", "₹9.8L"]. */
 export type ScatterDetail = readonly [label: string, value: string];
@@ -35,33 +35,33 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
    * "log" spreads values across powers of ten, for sizes that run from tiny to large. With xScaleToggle it is the
    * first selection. Log draws only when every x is above zero; otherwise the axis is linear.
    */
-  xScale?: AxisScale;
+  xScale?: AxisScale | undefined;
   /** Linear and Log buttons for the x axis in the header, so a reader can switch. */
-  xScaleToggle?: boolean;
+  xScaleToggle?: boolean | undefined;
   /** As xScale, for the y axis: log draws only when every y is above zero. */
-  yScale?: AxisScale;
+  yScale?: AxisScale | undefined;
   /** Linear and Log buttons for the y axis in the header. */
-  yScaleToggle?: boolean;
+  yScaleToggle?: boolean | undefined;
   /** The x ticks and the tooltip's x figure. Defaults to the locale's numbers. */
-  xFormatter?: (value: number) => string;
+  xFormatter?: ((value: number) => string) | undefined;
   /** The y ticks and the tooltip's y figure. Defaults to the locale's numbers. */
-  yFormatter?: (value: number) => string;
+  yFormatter?: ((value: number) => string) | undefined;
   /** How many points get their name beside the dot, at most; a name with no free spot is left to the tooltip. */
-  labels?: number;
+  labels?: number | undefined;
   /** The tooltip's rows under the point's name, and what a screen reader hears. Defaults to the two axes' figures. */
-  details?: (point: T) => readonly ScatterDetail[];
+  details?: ((point: T) => readonly ScatterDetail[]) | undefined;
   /** The point that carries a ring, matched by key; pass back what onSelect gave. */
-  selected?: T | null;
+  selected?: T | null | undefined;
   /** Gets a tapped or keyed point, and null on a second tap, Escape or a tap on the plot. */
-  onSelect?: (point: T | null) => void;
+  onSelect?: ((point: T | null) => void) | undefined;
   /** Lines under the chart, such as a caption or how many points are not drawn. */
   footer?: ReactNode;
   /** Dashed lines at a value on each axis, splitting the plot into four, and the corners' names. */
-  quadrants?: ScatterQuadrants;
+  quadrants?: ScatterQuadrants | undefined;
   /** Names the size in the tooltip, such as "Value". Defaults to "Size". */
-  sizeLabel?: string;
+  sizeLabel?: string | undefined;
   /** The tooltip's size figure. Defaults to the locale's numbers. */
-  sizeFormatter?: (value: number) => string;
+  sizeFormatter?: ((value: number) => string) | undefined;
 }
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
 export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;

package/dist/components/siyahi/scatter-chart.js

@@ -3,6 +3,7 @@ import { ChartContainer } from "../ui/chart.js";
 import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
 import { useLocale } from "./siyahi-provider.js";
 import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { fontLoads, useRenderWhenFontsLoad } from "../../lib/use-render-when-fonts-load.js";
 import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -43,6 +44,10 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 	const formatY = useMemo(() => yFormatter ?? new Intl.NumberFormat(numberLocale).format, [yFormatter, numberLocale]);
 	const formatSize = useMemo(() => sizeFormatter ?? new Intl.NumberFormat(numberLocale).format, [sizeFormatter, numberLocale]);
 	const drawn = useMemo(() => points.filter((p) => p.y !== null && Number.isFinite(p.y) && Number.isFinite(p.x)), [points]);
+	useRenderWhenFontsLoad(() => {
+		const { measure } = labelType();
+		return [...labels > 0 ? drawn.map(({ name }) => name) : [], ...Object.values(quadrants?.labels ?? {})].map((name) => name ? measure(name) : 0).join();
+	});
 	const both = xScaleToggle && yScaleToggle;
 	const across = useAxisScale({
 		initial: xScale,
@@ -297,8 +302,12 @@ function Dot({ cx, cy, payload, index, "data-recharts-item-id": itemId, selected
 		strokeWidth: RING
 	}), dot] });
 }
-/** A name's width in the labels' type, measured on a canvas once per font and name. */
+/**
+* A name's width in the labels' type, measured on a canvas once per font and name, and again after each font load:
+* the font string is the same before and after Geist arrives, and a width measured before was the fallback's.
+*/
 const widths = /* @__PURE__ */ new Map();
+let widthsAfter = 0;
 let canvas;
 /** The labels' type as the page sets it: text-xs is three quarters of the root size, which a reader may enlarge. */
 function labelType() {
@@ -309,6 +318,10 @@ function labelType() {
 	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) * .75;
 	const font = `500 ${size}px ${getComputedStyle(document.body).fontFamily}`;
 	canvas ??= document.createElement("canvas").getContext("2d");
+	if (fontLoads() !== widthsAfter) {
+		widths.clear();
+		widthsAfter = fontLoads();
+	}
 	const measure = (text) => {
 		const id = `${font}\n${text}`;
 		let width = widths.get(id);