@siyahi/ui 0.1.8-next.3 → 0.1.9-next.1

package/README.md

@@ -75,8 +75,12 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
 - **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
   (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
-  map; hover or tap a tile for its figures), `LocalTime` (a time in the configured zone with the viewer's own clock
-  in a tooltip) and `SiyahiProvider`.
+  map; hover or tap a tile for its figures) with `TreemapLegend` (its colour
+  scale), `LocalTime` (a time in the configured zone with the viewer's own clock
+  in a tooltip), `ToneProgress` (Progress in a meaning colour), the page parts
+  `PageSection`, `PageSubheading`, `DataList` and `InlineCode`, the data table
+  parts `DataTableSortHeader` (sorts on one click) and `DataTableRowCount`
+  ("12 of 48"), and `SiyahiProvider`.
 - **Cards and badges as installed**: every `Card`, stat tiles included, keeps
   luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
@@ -84,7 +88,7 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   (header under 24rem, so any phone) a header action such as a toggle drops
   under the title and description, left-aligned; a stat tile's badge stays
   top right.
-- **Formatters**: `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
+- **Formatters**: `count`, `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
   for the same bound to the provider's locale.
   `useFormat().time(value, { withDate: true })` (or
   `time(value, locale, { withDate: true })`) and `<LocalTime withDate>` write
@@ -94,20 +98,28 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 ## Which component
 
-| Need                                                                    | Component                                                   |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------- |
-| Values over time or another ordered axis (months, hours, price buckets) | `BarChartCard`, `AreaChartCard` or `LineChartCard`          |
-| Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total |
-| A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                             |
-| Series compared point by point, such as a return against an index       | `LineChartCard`                                             |
-| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`                                                   |
-| Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                |
-| One instrument's price history                                          | `PriceChart`                                                |
-| Holdings sized by weight and coloured by change                         | `Treemap`                                                   |
-| Activity by day, by weekday and hour, or a status over time             | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap`        |
-| Rows to sort and filter                                                 | `DataTable`, inside a `Card`                                |
-| A signed figure (a gain, a loss, a change)                              | `Delta`                                                     |
-| A time, with the viewer's own clock on hover                            | `LocalTime`                                                 |
+| Need                                                                    | Component                                                           |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| Values over time or another ordered axis (months, hours, price buckets) | `BarChartCard`, `AreaChartCard` or `LineChartCard`                  |
+| Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total         |
+| A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                                     |
+| Series compared point by point, such as a return against an index       | `LineChartCard`                                                     |
+| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`                                                           |
+| Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                        |
+| One instrument's price history                                          | `PriceChart`                                                        |
+| Holdings sized by weight and coloured by change                         | `Treemap`                                                           |
+| Activity by day, by weekday and hour, or a status over time             | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap`                |
+| Rows to sort and filter                                                 | `DataTable`, inside a `Card`                                        |
+| A column that sorts on one click; a search and an "n of m" count        | `DataTableSortHeader`; `DataTableSearchFilter`, `DataTableRowCount` |
+| Stat tiles that pick a scope for the page                               | `SectionCards` with `selected` and `onSelect`                       |
+| A share or a part of a whole, coloured as a gain or a loss              | `ToneProgress`                                                      |
+| The colour scale under a `Treemap`                                      | `TreemapLegend`, with the map's `range`                             |
+| One part of a long page: rule, eyebrow, heading, lead, action           | `PageSection`, with `PageSubheading` inside                         |
+| Label and value pairs, such as a record's fields                        | `DataList` and `DataListItem`                                       |
+| A command or file to copy, wrapped or scrolling                         | `CodeBlock` with `CodeBlockCopyButton`                              |
+| A command, file or identifier inside prose                              | `InlineCode`                                                        |
+| A signed figure (a gain, a loss, a change)                              | `Delta`                                                             |
+| A time, with the viewer's own clock on hover                            | `LocalTime`                                                         |
 
 The three chart cards take the rows, the field the x axis reads and the series,
 and own everything else: the card and its header action (a range or mode

package/THIRD_PARTY_NOTICES.md

@@ -8,16 +8,16 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## Copied into `@siyahi/ui`
 
-| What                                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                      | Licence                                                                             |
-| ------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| shadcn/ui core components (installed with `shadcn add`, never edited)                 | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                             | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn `tailwind.css` (variants and utilities the components use)                     | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                   | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `sidebar-07`                                                             | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `dashboard-01`, `SectionCards` only                                      | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                  | MIT, Copyright (c) 2023 shadcn                                                      |
-| Heatmaps: calendar, weekday by hour, status timeline                                  | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                               | MIT, Copyright (c) 2026 ChingRu                                                     |
-| niko-table data table on TanStack Table                                               | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
-| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple` | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                 | MIT, Copyright (c) 2023 shadcn                                                      |
-| dashboardcn ranked list (`BarList`)                                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| What                                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| shadcn/ui core components (installed with `shadcn add`, never edited)                 | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn `tailwind.css` (variants and utilities the components use)                     | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `sidebar-07`                                                             | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `dashboard-01`, `SectionCards` only                                      | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
+| Heatmaps: calendar, weekday by hour, status timeline                                  | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
+| niko-table data table on TanStack Table                                               | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple` | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
+| dashboardcn ranked list (`BarList`)                                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
 
 ## Runtime dependencies with attribution terms
 

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -11,7 +11,12 @@ export interface SectionCard {
   /** Muted second footer line. */
   detail?: React$1.ReactNode;
 }
-export declare function SectionCards({ items }: {
+export interface SectionCardsProps {
   items: SectionCard[];
-}): React$1.JSX.Element;
+  /** The label of the picked tile. */
+  selected?: string;
+  /** Makes each tile one button, so keep tile content non-interactive; gets the label of the tile picked. */
+  onSelect?: (label: string) => void;
+}
+export declare function SectionCards({ items, selected, onSelect }: SectionCardsProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/dashboard-01/section-cards.js

@@ -12,33 +12,43 @@ const COLUMNS = {
 	5: "@3xl/main:grid-cols-3 @7xl/main:grid-cols-5",
 	6: "@3xl/main:grid-cols-3"
 };
-function SectionCards({ items }) {
+function SectionCards({ items, selected, onSelect }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "@container/main",
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("grid grid-cols-1 gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
 			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
-				className: "@container/card",
-				children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-					/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
-					/* @__PURE__ */ jsx(CardTitle, {
-						className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
-						children: item.value
+				className: cn("@container/card", onSelect && "relative", item.label === selected && "ring-2 ring-primary!"),
+				children: [
+					onSelect && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": item.label,
+						"aria-pressed": item.label === selected,
+						onClick: () => onSelect(item.label),
+						className: "absolute inset-0 z-10 rounded-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 					}),
-					item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-						variant: "outline",
-						children: item.badge
-					}) })
-				] }), (item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-					className: "flex-col items-start gap-1.5 text-sm",
-					children: [item.headline && /* @__PURE__ */ jsx("div", {
-						className: "line-clamp-1 flex gap-2 font-medium",
-						children: item.headline
-					}), item.detail && /* @__PURE__ */ jsx("div", {
-						className: "text-muted-foreground",
-						children: item.detail
-					})]
-				})]
+					/* @__PURE__ */ jsxs(CardHeader, { children: [
+						/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
+						/* @__PURE__ */ jsx(CardTitle, {
+							className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
+							children: item.value
+						}),
+						item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							children: item.badge
+						}) })
+					] }),
+					(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
+						className: "flex-col items-start gap-1.5 text-sm",
+						children: [item.headline && /* @__PURE__ */ jsx("div", {
+							className: "line-clamp-1 flex gap-2 font-medium",
+							children: item.headline
+						}), item.detail && /* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground",
+							children: item.detail
+						})]
+					})
+				]
 			}, item.label))
 		})
 	});

package/dist/components/registry/niko-table/components/data-table-search-filter.d.ts

@@ -0,0 +1,35 @@
+import { TableSearchFilterProps } from "../filters/table-search-filter.js";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-search-filter.d.ts
+type DataTableSearchFilterProps<TData extends RowData> = Omit<TableSearchFilterProps<TData>, "table">;
+/**
+ * A search filter component for DataTable.
+ * Can be used in controlled or uncontrolled mode.
+ *
+ * @example
+ * // Uncontrolled (manages its own state)
+ * <DataTableSearchFilter placeholder="Search products..." />
+ *
+ * @example
+ * // Controlled (you manage the state)
+ * const [search, setSearch] = useState("")
+ * <DataTableSearchFilter
+ *   value={search}
+ *   onChange={setSearch}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // With nuqs for URL state
+ * const [search, setSearch] = useQueryState('search')
+ * <DataTableSearchFilter
+ *   value={search ?? ""}
+ *   onChange={setSearch}
+ * />
+ */
+export declare function DataTableSearchFilter<TData extends RowData>(props: DataTableSearchFilterProps<TData>): import("react").JSX.Element;
+export declare namespace DataTableSearchFilter {
+  var displayName: string;
+}
+//#endregion
+export {};

package/dist/components/registry/niko-table/components/data-table-search-filter.js

@@ -0,0 +1,44 @@
+"use client";
+import { useDataTable } from "../core/data-table-context.js";
+import { TableSearchFilter } from "../filters/table-search-filter.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/components/data-table-search-filter.tsx
+/**
+* A search filter component for DataTable.
+* Can be used in controlled or uncontrolled mode.
+*
+* @example
+* // Uncontrolled (manages its own state)
+* <DataTableSearchFilter placeholder="Search products..." />
+*
+* @example
+* // Controlled (you manage the state)
+* const [search, setSearch] = useState("")
+* <DataTableSearchFilter
+*   value={search}
+*   onChange={setSearch}
+*   placeholder="Search..."
+* />
+*
+* @example
+* // With nuqs for URL state
+* const [search, setSearch] = useQueryState('search')
+* <DataTableSearchFilter
+*   value={search ?? ""}
+*   onChange={setSearch}
+* />
+*/
+function DataTableSearchFilter(props) {
+	const { table } = useDataTable();
+	return /* @__PURE__ */ jsx(TableSearchFilter, {
+		table,
+		...props
+	});
+}
+/**
+* @required displayName is required for auto feature detection
+* @see "feature-detection.ts"
+*/
+DataTableSearchFilter.displayName = "DataTableSearchFilter";
+//#endregion
+export { DataTableSearchFilter };

package/dist/components/registry/niko-table/filters/table-search-filter.d.ts

@@ -0,0 +1,38 @@
+import { DataTableInstance } from "../types/index.js";
+import * as React$1 from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/filters/table-search-filter.d.ts
+export interface TableSearchFilterProps<TData extends RowData> {
+  table: DataTableInstance<TData>;
+  className?: string;
+  placeholder?: string;
+  /** The field's accessible name, such as "Filter holdings". */
+  label?: string;
+  showClearButton?: boolean;
+  onChange?: (value: string) => void;
+  value?: string;
+  /**
+   * Debounce ms before pushing the typed value into table state. The
+   * input reflects keystrokes immediately; only the call to
+   * `table.setGlobalFilter` (and the supplied `onChange`) is delayed.
+   * Useful for client-side filtering of larger fully-loaded datasets
+   * (e.g. 1k+ rows) where each keystroke would otherwise re-walk the
+   * row model synchronously.
+   *
+   * Server-driven search (small `data` array, infinite-query-backed)
+   * usually wants this OFF because the network request is already
+   * the natural rate limiter — keep at the default.
+   *
+   * Only applies in uncontrolled mode (when neither `value` nor
+   * `onChange` is supplied). In controlled mode, debounce in the
+   * consumer's `onChange` instead.
+   *
+   * @default 0
+   */
+  debounceMs?: number;
+}
+export declare function TableSearchFilter<TData extends RowData>({ table, className, placeholder, label, showClearButton, onChange, value, debounceMs }: TableSearchFilterProps<TData>): React$1.JSX.Element;
+export declare namespace TableSearchFilter {
+  var displayName: string;
+}
+//#endregion

package/dist/components/registry/niko-table/filters/table-search-filter.js

@@ -0,0 +1,103 @@
+import { Button } from "../../../ui/button.js";
+import { Input } from "../../../ui/input.js";
+import { cn } from "../../../../lib/utils.js";
+import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/registry/niko-table/filters/table-search-filter.tsx
+function TableSearchFilter({ table, className, placeholder = "Search...", label = "Search table", showClearButton = true, onChange, value, debounceMs = 0 }) {
+	const isControlled = value !== void 0;
+	const tableGlobalFilter = table.state.globalFilter;
+	const globalFilterValue = typeof tableGlobalFilter === "string" ? tableGlobalFilter : "";
+	const debounceEnabled = !isControlled && debounceMs > 0;
+	const [pendingValue, setPendingValue] = React$1.useState(globalFilterValue);
+	const debounceTimerRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (debounceTimerRef.current) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		if (!debounceEnabled) return;
+		setPendingValue(globalFilterValue);
+	}, [globalFilterValue, debounceEnabled]);
+	React$1.useEffect(() => {
+		return () => {
+			if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		};
+	}, []);
+	const currentValue = isControlled ? value : debounceEnabled ? pendingValue : globalFilterValue;
+	const handleClear = React$1.useCallback(() => {
+		const emptyValue = "";
+		if (debounceTimerRef.current) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		if (debounceEnabled) setPendingValue(emptyValue);
+		table.setGlobalFilter(emptyValue);
+		onChange?.(emptyValue);
+	}, [
+		table,
+		onChange,
+		debounceEnabled
+	]);
+	const handleChange = React$1.useCallback((event) => {
+		const newValue = event.target.value;
+		if (!debounceEnabled) {
+			table.setGlobalFilter(newValue);
+			onChange?.(newValue);
+			return;
+		}
+		setPendingValue(newValue);
+		if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = setTimeout(() => {
+			debounceTimerRef.current = null;
+			table.setGlobalFilter(newValue);
+			onChange?.(newValue);
+		}, debounceMs);
+	}, [
+		table,
+		onChange,
+		debounceEnabled,
+		debounceMs
+	]);
+	const hasValue = currentValue.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 items-center", className),
+		role: "search",
+		children: [
+			/* @__PURE__ */ jsx(Search, {
+				className: "absolute left-3 h-4 w-4 text-muted-foreground",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				placeholder,
+				value: currentValue,
+				onChange: handleChange,
+				className: "pr-9 pl-9",
+				"aria-label": label
+			}),
+			hasValue && showClearButton && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: handleClear,
+				className: "absolute right-1 h-7 w-7 p-0 hover:bg-muted",
+				type: "button",
+				"aria-label": "Clear search",
+				children: [/* @__PURE__ */ jsx(X, {
+					className: "h-3 w-3",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Clear search"
+				})]
+			})
+		]
+	});
+}
+/**
+* @required displayName is required for auto feature detection
+* @see src/components/niko-table/config/feature-detection.ts
+*/
+TableSearchFilter.displayName = "TableSearchFilter";
+//#endregion
+export { TableSearchFilter };

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

@@ -0,0 +1,14 @@
+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;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export interface DataListItemProps {
+  /** A short muted label; may hold a badge beside the words. */
+  label: ReactNode;
+  children: ReactNode;
+}
+export declare function DataListItem({ label, children }: DataListItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-list.js

@@ -0,0 +1,25 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-list.tsx
+/** Label and value pairs, such as a record's fields in a card. */
+function DataList({ className, children }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn("flex flex-col gap-4", className),
+		children
+	});
+}
+function DataListItem({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-list-item",
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataList, DataListItem };

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

@@ -0,0 +1,11 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-row-count.d.ts
+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;
+}
+/** 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;
+//#endregion

package/dist/components/siyahi/data-table-row-count.js

@@ -0,0 +1,18 @@
+import { useFormat } from "../../lib/format.js";
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-row-count.tsx
+/** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
+function DataTableRowCount({ unit, total }) {
+	const { table } = useDataTable();
+	const { count } = useFormat();
+	const all = total ?? table.getCoreRowModel().rows.length;
+	const shown = table.getFilteredRowModel().rows.length;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-row-count",
+		className: "ml-auto text-sm text-muted-foreground tabular-nums",
+		children: shown === all ? `${count(all)} ${unit}` : `${count(shown)} of ${count(all)}`
+	});
+}
+//#endregion
+export { DataTableRowCount };

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

@@ -0,0 +1,15 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-sort-header.d.ts
+/**
+ * A column header that sorts on one click, largest (or Z) first, as shadcn's
+ * data table guide draws it: a ghost button with the direction's arrow. The
+ * column menu takes two clicks for the same. Use it as a column's `header`:
+ * `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+ */
+export declare function DataTableSortHeader<TData extends RowData>({ title }: {
+  title?: string;
+}): import("react").JSX.Element;
+export declare namespace DataTableSortHeader {
+  var displayName: string;
+}
+//#endregion

package/dist/components/siyahi/data-table-sort-header.js

@@ -0,0 +1,36 @@
+import { Button } from "../ui/button.js";
+import { DataTableColumnHeader, useColumnHeaderContext } from "../registry/niko-table/components/data-table-column-header.js";
+import { useDerivedColumnTitle } from "../registry/niko-table/hooks/use-derived-column-title.js";
+import { registerComponentFeatures } from "../registry/niko-table/config/feature-detection.js";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-sort-header.tsx
+/**
+* A column header that sorts on one click, largest (or Z) first, as shadcn's
+* data table guide draws it: a ghost button with the direction's arrow. The
+* column menu takes two clicks for the same. Use it as a column's `header`:
+* `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+*/
+function DataTableSortHeader({ title }) {
+	const { column } = useColumnHeaderContext(true);
+	const label = useDerivedColumnTitle(column, column.id, title);
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsx(DataTableColumnHeader, { children: /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-ml-2",
+		onClick: () => column.toggleSorting(sorted !== "desc"),
+		children: [
+			label,
+			/* @__PURE__ */ jsx(sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon, { "aria-hidden": "true" }),
+			sorted && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [", sorted ", sorted === "asc" ? "ascending" : "descending"]
+			})
+		]
+	}) });
+}
+DataTableSortHeader.displayName = "DataTableSortHeader";
+registerComponentFeatures(DataTableSortHeader.displayName, { enableSorting: true });
+//#endregion
+export { DataTableSortHeader };

package/dist/components/siyahi/inline-code.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/inline-code.d.ts
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+export declare function InlineCode({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/inline-code.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/inline-code.tsx
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+function InlineCode({ children }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: "rounded-sm bg-muted px-1 font-mono",
+		children
+	});
+}
+//#endregion
+export { InlineCode };

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

@@ -0,0 +1,21 @@
+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;
+  /** Small muted line above the title, such as "Part 2". */
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  /** Muted prose under the title: a sentence, or several paragraphs as elements. */
+  lead?: ReactNode;
+  /** A control for the whole section, such as a copy or mode toggle; it sits right, beside the heading. */
+  action?: ReactNode;
+  children?: ReactNode;
+}
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
+/** A heading inside a PageSection, one level under its title. */
+export declare function PageSubheading({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/page-section.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/page-section.tsx
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+function PageSection({ id, eyebrow, title, lead, action, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"data-slot": "page-section",
+		className: "flex scroll-mt-6 flex-col gap-6 border-t pt-10",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-end justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					eyebrow && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: eyebrow
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: title
+					}),
+					lead && /* @__PURE__ */ jsx("div", {
+						className: "flex max-w-prose flex-col gap-2 text-muted-foreground",
+						children: lead
+					})
+				]
+			}), action]
+		}), children]
+	});
+}
+/** A heading inside a PageSection, one level under its title. */
+function PageSubheading({ children }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: "text-lg font-semibold tracking-tight",
+		children
+	});
+}
+//#endregion
+export { PageSection, PageSubheading };

package/dist/components/siyahi/tone-progress.d.ts

@@ -0,0 +1,15 @@
+import { Progress } from "../ui/progress.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/tone-progress.d.ts
+declare const TONE: {
+  readonly positive: "**:data-[slot=progress-indicator]:bg-positive";
+  readonly negative: "**:data-[slot=progress-indicator]:bg-negative";
+};
+export interface ToneProgressProps extends ComponentProps<typeof Progress> {
+  /** The meaning colour of the bar: a gain's share in --positive, a loss's in --negative. */
+  tone: keyof typeof TONE;
+}
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+export declare function ToneProgress({ tone, className, ...props }: ToneProgressProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/tone-progress.js

@@ -0,0 +1,18 @@
+import { Progress } from "../ui/progress.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/tone-progress.tsx
+const TONE = {
+	positive: "**:data-[slot=progress-indicator]:bg-positive",
+	negative: "**:data-[slot=progress-indicator]:bg-negative"
+};
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+function ToneProgress({ tone, className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress, {
+		"data-tone": tone,
+		className: cn(TONE[tone], className),
+		...props
+	});
+}
+//#endregion
+export { ToneProgress };

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

@@ -28,4 +28,11 @@ export interface TreemapProps<T extends TreemapItem> {
 }
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
+export interface TreemapLegendProps {
+  /** The Treemap's own range, so each swatch matches its tiles. */
+  range?: number;
+  className?: string;
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+export declare function TreemapLegend({ range, className }: TreemapLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,5 +1,6 @@
 import { useFormat } from "../../lib/format.js";
-import { heat, layout } from "../../lib/treemap.js";
+import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
+import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
@@ -96,5 +97,71 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+function Swatch({ label, fill }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "treemap-legend-swatch",
+		className: "h-3 flex-1",
+		children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			rx: 2,
+			style: { fill }
+		})]
+	});
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+function TreemapLegend({ range, className }) {
+	const { pct } = useFormat();
+	const step = heatRange(range) / 5;
+	const digits = Number.isInteger(Math.round(step * 1e6) / 1e4) ? 0 : 1;
+	const over = pct(step * 4, digits);
+	const swatch = (side, n) => {
+		const word = side === "positive" ? "up" : "down";
+		const label = n === 5 ? `${word} over ${over}` : `${word} ${pct(step * (n - 1), digits)}–${pct(step * n, digits)}`;
+		return /* @__PURE__ */ jsx(Swatch, {
+			label,
+			fill: heatFill(side, n)
+		}, `${side}-${n}`);
+	};
+	const steps = Array.from({ length: 5 }, (_, i) => i + 1);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "treemap-legend",
+		className: cn("flex w-full max-w-xs flex-col gap-1 text-xs text-muted-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-0.5",
+				"aria-hidden": "true",
+				children: [
+					steps.toReversed().map((n) => swatch("negative", n)),
+					/* @__PURE__ */ jsx(Swatch, {
+						label: "no change, or unknown",
+						fill: heat(null)
+					}),
+					steps.map((n) => swatch("positive", n))
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between gap-2 tabular-nums",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
+					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "sr-only",
+				children: [
+					"Tile colours run in ",
+					5,
+					" steps of ",
+					pct(step, digits),
+					" each way, deepest over ",
+					over,
+					"; a muted tile is no change or unknown."
+				]
+			})
+		]
+	});
+}
 //#endregion
-export { Treemap };
+export { Treemap, TreemapLegend };

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,28 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/code-block.d.ts
+declare const codeBlockVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlock({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof codeBlockVariants> & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockCopyButton({ value, variant, size, className, onClick, ...props }: React$1.ComponentProps<typeof Button> & {
+  value: string;
+}): React$1.JSX.Element;
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: React$1.ComponentProps<"pre"> & {
+  wrap?: boolean;
+  lineNumbers?: boolean;
+  startLine?: number;
+}): React$1.JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+  variant?: "added" | "default" | "highlighted" | "removed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlockLine({ className, variant, children, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>): React$1.JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/components/ui/code-block.js

@@ -0,0 +1,122 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/code-block.tsx
+const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/30 data-[size=sm]:rounded-xl data-[size=sm]:text-xs", {
+	variants: { variant: {
+		default: "bg-muted text-foreground ring-1 ring-foreground/5 dark:ring-foreground/10",
+		destructive: "bg-destructive/5 text-destructive ring-1 ring-destructive/15 dark:bg-destructive/10 dark:ring-destructive/20"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(codeBlockVariants({ variant }), className),
+		...props
+	});
+}
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-header",
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-5 pt-5 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
+		...props
+	});
+}
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-title",
+		className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/code-block:[&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
+		...props
+	});
+}
+function CodeBlockActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-actions",
+		className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 *:data-[slot=button]:hover:bg-foreground/5 dark:*:data-[slot=button]:hover:bg-foreground/10 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-4 [[data-slot=code-block]>&]:top-4 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
+		...props
+	});
+}
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", className, onClick, ...props }) {
+	const [copied, setCopied] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (!copied) return;
+		const timeout = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timeout);
+	}, [copied]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		"data-slot": "code-block-copy-button",
+		"data-copied": copied || void 0,
+		variant,
+		size,
+		"aria-label": copied ? "Copied" : "Copy",
+		className: cn("hover:bg-foreground/5 dark:hover:bg-foreground/10", className),
+		onClick: (event) => {
+			onClick?.(event);
+			navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
+		},
+		...props,
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		className: "sr-only",
+		children: copied ? "Copied" : ""
+	})] });
+}
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+	return /* @__PURE__ */ jsx("pre", {
+		"data-slot": "code-block-content",
+		"data-wrap": wrap || void 0,
+		"data-numbered": lineNumbers || void 0,
+		dir: "ltr",
+		tabIndex: 0,
+		style: {
+			counterReset: `line ${startLine - 1}`,
+			...style
+		},
+		className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-5 py-5 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
+		...props,
+		children: /* @__PURE__ */ jsx("code", {
+			"data-slot": "code-block-code",
+			className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0",
+			children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ jsx(CodeBlockLine, { children: line }, index)) : children
+		})
+	});
+}
+const codeBlockLineVariants = cva("relative -mx-5 block min-h-lh px-5 group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+	variants: { variant: {
+		default: "",
+		added: "bg-foreground/5 after:content-['+']",
+		removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+		highlighted: "bg-foreground/5"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+	const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "code-block-line",
+		"data-variant": variant,
+		className: cn(codeBlockLineVariants({ variant }), className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "code-block-line-content",
+			className: "min-w-0",
+			children: empty ? "\n" : children
+		})
+	});
+}
+function CodeBlockFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-footer",
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-5 pb-5 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3", className),
+		...props
+	});
+}
+//#endregion
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ChartColor, ChartSeries, ChartSeriesItem, SeriesChartProps } from "./li
 import { AreaChartCard, AreaChartCardProps } from "./components/registry/charts/area-chart-card.js";
 import { BarChartCard, BarChartCardProps } from "./components/registry/charts/bar-chart-card.js";
 import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
-import { SectionCard, SectionCards } from "./components/registry/dashboard-01/section-cards.js";
+import { SectionCard, SectionCards, SectionCardsProps } from "./components/registry/dashboard-01/section-cards.js";
 import { BarList, BarListItem, BarListProps } from "./components/registry/dashboardcn/bar-list.js";
 import { Activity, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, ColorConfig, Labels } from "./components/registry/heatmap/calendar-heatmap.js";
 import { StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue } from "./components/registry/heatmap/status-heatmap.js";
@@ -24,6 +24,8 @@ import { DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, resolveR
 import { DataTableRowContextMenu, DataTableRowContextMenuProps } from "./components/registry/niko-table/components/data-table-row-context-menu.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
 import { DataTableRowMenuScope, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, useDataTableRow } from "./components/registry/niko-table/components/data-table-row-menu.js";
+import { TableSearchFilter, TableSearchFilterProps } from "./components/registry/niko-table/filters/table-search-filter.js";
+import { DataTableSearchFilter } from "./components/registry/niko-table/components/data-table-search-filter.js";
 import { DataTableToolbarSection, DataTableToolbarSectionProps } from "./components/registry/niko-table/components/data-table-toolbar-section.js";
 import { ActiveCell, ActiveSelection, ColumnResizeInfo, DataTableActions, DataTableContext, DataTableContextState, DataTableProvider, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, ScrollAlign, ScrollRowIntoView, flashCellKey, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter } from "./components/registry/niko-table/core/data-table-context.js";
 import { DataTableErrorBoundary, DataTableErrorBoundaryProps } from "./components/registry/niko-table/core/data-table-error-boundary.js";
@@ -42,12 +44,19 @@ import { Separator } from "./components/ui/separator.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./components/ui/sidebar.js";
 import { AppSidebar, AppSidebarProps } from "./components/registry/sidebar-07/app-sidebar.js";
+import { DataList, DataListItem, DataListItemProps } from "./components/siyahi/data-list.js";
+import { DataTableRowCount, DataTableRowCountProps } from "./components/siyahi/data-table-row-count.js";
+import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { Delta, DeltaProps } from "./components/siyahi/delta.js";
+import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime, LocalTimeProps } from "./components/siyahi/local-time.js";
+import { PageSection, PageSectionProps, PageSubheading } from "./components/siyahi/page-section.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, SiyahiProviderProps, useLocale } from "./components/siyahi/siyahi-provider.js";
-import { Treemap, TreemapItem, TreemapProps } from "./components/siyahi/treemap.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./components/ui/progress.js";
+import { ToneProgress, ToneProgressProps } from "./components/siyahi/tone-progress.js";
+import { Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps } from "./components/siyahi/treemap.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
@@ -56,13 +65,13 @@ import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, Breadcr
 import { Calendar, CalendarDayButton } from "./components/ui/calendar.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
 import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./components/ui/chart.js";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "./components/ui/code-block.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/ui/command.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/ui/context-menu.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/ui/input-group.js";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./components/ui/popover.js";
-import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./components/ui/progress.js";
 import { ScrollArea, ScrollBar } from "./components/ui/scroll-area.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/ui/sheet.js";
@@ -73,6 +82,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./co
 import { Textarea } from "./components/ui/textarea.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
-import { Formatters, TimeOptions, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
+import { Formatters, TimeOptions, count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartColor, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowMenuScope, DataTableSkeleton, DataTableSkeletonProps, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LineChartCard, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartColor, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LineChartCard, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, PageSection, PageSectionProps, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, XAxis, YAxis, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/index.js

@@ -7,6 +7,7 @@ import { Button, buttonVariants } from "./components/ui/button.js";
 import { Calendar, CalendarDayButton } from "./components/ui/calendar.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./components/ui/chart.js";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "./components/ui/code-block.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
 import { Input } from "./components/ui/input.js";
@@ -35,7 +36,7 @@ import { AreaChartCard } from "./components/registry/charts/area-chart-card.js";
 import { BarChartCard } from "./components/registry/charts/bar-chart-card.js";
 import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
 import { SectionCards } from "./components/registry/dashboard-01/section-cards.js";
-import { money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
+import { count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { BarList } from "./components/registry/dashboardcn/bar-list.js";
 import { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat } from "./components/registry/heatmap/calendar-heatmap.js";
 import { StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat } from "./components/registry/heatmap/status-heatmap.js";
@@ -56,6 +57,8 @@ import { DataTableGroupRowProvider, DataTableGroupedRows, resolveGroupedRowsSlot
 import { DataTableRowContextMenuSlot, resolveRowContextMenuRenderer, useResolvedRowContextMenuRenderer } from "./components/registry/niko-table/components/data-table-row-context-menu-slot.js";
 import { DataTableRowMenuScope, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, useDataTableRow } from "./components/registry/niko-table/components/data-table-row-menu.js";
 import { DataTableRowContextMenu } from "./components/registry/niko-table/components/data-table-row-context-menu.js";
+import { TableSearchFilter } from "./components/registry/niko-table/filters/table-search-filter.js";
+import { DataTableSearchFilter } from "./components/registry/niko-table/components/data-table-search-filter.js";
 import { DataTableToolbarSection } from "./components/registry/niko-table/components/data-table-toolbar-section.js";
 import { DataTableErrorBoundary } from "./components/registry/niko-table/core/data-table-error-boundary.js";
 import { DataTableGroupedRowCells, GroupedBodyRow } from "./components/registry/niko-table/core/data-table-grouped-row.js";
@@ -67,9 +70,15 @@ import { NavProjects } from "./components/registry/sidebar-07/nav-projects.js";
 import { NavUser } from "./components/registry/sidebar-07/nav-user.js";
 import { TeamSwitcher } from "./components/registry/sidebar-07/team-switcher.js";
 import { AppSidebar } from "./components/registry/sidebar-07/app-sidebar.js";
+import { DataList, DataListItem } from "./components/siyahi/data-list.js";
+import { DataTableRowCount } from "./components/siyahi/data-table-row-count.js";
+import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { Delta } from "./components/siyahi/delta.js";
+import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime } from "./components/siyahi/local-time.js";
+import { PageSection, PageSubheading } from "./components/siyahi/page-section.js";
 import { PriceChart } from "./components/siyahi/price-chart.js";
-import { Treemap } from "./components/siyahi/treemap.js";
+import { ToneProgress } from "./components/siyahi/tone-progress.js";
+import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, Area, AreaChart, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowMenuScope, DataTableSkeleton, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Line, LineChart, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, Area, AreaChart, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Line, LineChart, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, PageSection, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, XAxis, YAxis, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/lib/format.d.ts

@@ -9,6 +9,8 @@ export declare function money(value: number, locale?: SiyahiLocale, fractionDigi
  * `Delta`, which adds the arrow.
  */
 export declare function moneyCompact(value: number, locale?: SiyahiLocale): string;
+/** A whole count with the locale's grouping: 1,53,110 in en-IN. */
+export declare function count(value: number, locale?: SiyahiLocale): string;
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 export declare function pct(value: number, locale?: SiyahiLocale, fractionDigits?: number): string;
 export interface TimeOptions {
@@ -18,6 +20,7 @@ export interface TimeOptions {
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 export declare function time(value: Date | number | string, locale?: SiyahiLocale, { withDate }?: TimeOptions): string;
 export interface Formatters {
+  count: (value: number) => string;
   money: (value: number, fractionDigits?: number) => string;
   moneyCompact: (value: number) => string;
   pct: (value: number, fractionDigits?: number) => string;

package/dist/lib/format.js

@@ -26,6 +26,10 @@ function moneyCompact(value, locale = defaultLocale) {
 		maximumFractionDigits: 1
 	}).format(value);
 }
+/** A whole count with the locale's grouping: 1,53,110 in en-IN. */
+function count(value, locale = defaultLocale) {
+	return new Intl.NumberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
+}
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 function pct(value, locale = defaultLocale, fractionDigits = 1) {
 	return new Intl.NumberFormat(locale.numberLocale, {
@@ -54,6 +58,7 @@ function time(value, locale = defaultLocale, { withDate = false } = {}) {
 function useFormat() {
 	const locale = useLocale();
 	return useMemo(() => ({
+		count: (value) => count(value, locale),
 		money: (value, fractionDigits) => money(value, locale, fractionDigits),
 		moneyCompact: (value) => moneyCompact(value, locale),
 		pct: (value, fractionDigits) => pct(value, locale, fractionDigits),
@@ -61,4 +66,4 @@ function useFormat() {
 	}), [locale]);
 }
 //#endregion
-export { money, moneyCompact, pct, time, useFormat };
+export { count, money, moneyCompact, pct, time, useFormat };

package/dist/lib/treemap.d.ts

@@ -18,6 +18,10 @@ export declare function layout<T extends {
   weight: number;
   group?: string;
 }>(items: T[], width: number, height: number): Layout<T>;
+export declare const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+export declare const heatRange: (range?: number) => number;
+export declare const heatFill: (side: "positive" | "negative", step: number) => string;
 export declare function heat(change: number | null, range?: number): string;
 //#endregion
 export {};

package/dist/lib/treemap.js

@@ -31,10 +31,15 @@ function layout(items, width, height) {
 		}])
 	};
 }
-function heat(change, range = .05) {
+const DEFAULT_RANGE = .05;
+const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
+const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) ${step * 12}%, var(--card))`;
+function heat(change, range) {
 	if (!change) return "var(--muted)";
-	const mix = Math.min(5, Math.ceil(Math.abs(change) / (Number.isFinite(range) && range > 0 ? range : .05) * 5)) * 12;
-	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
+	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
+	return heatFill(change > 0 ? "positive" : "negative", step);
 }
 //#endregion
-export { heat, layout };
+export { HEAT_STEPS, heat, heatFill, heatRange, layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.8-next.3",
+  "version": "0.1.9-next.1",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/registry.lock.json

@@ -153,6 +153,14 @@
       "copied": "2026-10-20",
       "sha256": "8b0c9768a5f1b90d7b4e2bf467a32ca86a43d5d546653f3a64d7abea277aa68b"
     },
+    {
+      "file": "src/components/registry/niko-table/components/data-table-search-filter.tsx",
+      "registry": "@niko-table/data-table-search-filter",
+      "origin": "https://niko-table.com/r/data-table-search-filter.json",
+      "licence": "MIT, Copyright (c) 2025 Semir N., original work (c) 2025 WebDevSimplified, https://github.com/Semkoo/niko-table-registry/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "5aeb91ef34ff0dd87a92f1ad7ebd4500e8733b8ae30ecf836eae78304a10fad0"
+    },
     {
       "file": "src/components/registry/niko-table/components/data-table-toolbar-section.tsx",
       "registry": "@niko-table/data-table",
@@ -257,6 +265,14 @@
       "copied": "2026-10-20",
       "sha256": "dba551593726fa342b8c61daf5e5b9c79125df391af8ed31504e7dfedf7a71ba"
     },
+    {
+      "file": "src/components/registry/niko-table/filters/table-search-filter.tsx",
+      "registry": "@niko-table/data-table-search-filter",
+      "origin": "https://niko-table.com/r/data-table-search-filter.json",
+      "licence": "MIT, Copyright (c) 2025 Semir N., original work (c) 2025 WebDevSimplified, https://github.com/Semkoo/niko-table-registry/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "c672763c02894a579f6cc7cddbe5fc17149b1eef484f992b9a35441b4e3b1c42"
+    },
     {
       "file": "src/components/registry/niko-table/hooks/use-derived-column-title.ts",
       "registry": "@niko-table/data-table",