@siyahi/ui 0.1.9-next.33 → 0.1.9-next.35

package/DESIGN.md

@@ -24,7 +24,9 @@ a meaning:
   inside a 1px border of the same colour all round. Large marks follow the same
   rule: every bar is a tint inside a 1px full-colour edge, not a solid slab.
   A bar is read by its edge, which reaches 3:1 against the card; the tint is a
-  fill carried by that edge.
+  fill carried by that edge: half its colour (`--bar-tint`, 50%), strong
+  enough that a thin stacked segment, mostly edge, still shows its colour
+  against the next, and a pale slot's bar does not read as the card.
 - **Never a stripe down one side.** Do not mark a notice, card, row or quote
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
@@ -83,10 +85,16 @@ mono face and the link colour, so the text can point to one.
 ## Shape
 
 - **Square corners everywhere**: panels, cards, buttons, fields, badges,
-  toggles, menus, and bars and tracks (data bars, progress) alike (`--radius`
-  is 0). Only a dot, an avatar, a slider, a spinner or a scrollbar is round;
-  the stock chart tooltip's colour chips keep shadcn's 2px. Never add a
-  `rounded-*` class to a box.
+  toggles, menus, bars and tracks (data bars, progress, a slider's track and
+  thumb, a scrollbar's thumb), heatmap cells, treemap tiles and the colour
+  chips of charts and legends alike (`--radius` is 0). Only what is round by
+  nature stays round: an avatar, a radio, a status dot, a line's end dot, a
+  spinner, and a signed calendar heatmap's loss day, whose shape carries its
+  sign. The theme squares every other rounding, on any component.
+  Never add a `rounded-*` class to a box.
+- **Floating surfaces lie flat.** Nothing casts a drop shadow: a menu, a
+  list, a popover, a dialog, a sheet, a hover card and a chart's tooltip take
+  the card's hairline for their edge, so they read as a sheet of the page.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
 - **A code block's copy button sits in a header row** (`CodeBlockHeader`),
@@ -97,7 +105,7 @@ mono face and the link colour, so the text can point to one.
 
 ## Page header
 
-An app page opens on its masthead, `PageHero`: a small mark and eyebrow in the
+An app page opens on its masthead, `PageHeader`: a small mark and eyebrow in the
 mono face and link colour, the title, one muted line saying what the page is,
 the actions at the right, and a hairline under it. One per page; no hero card.
 
@@ -186,7 +194,8 @@ from the catalogue.
 
 - **Labels are small monospaced capitals**: a stat tile's label and footer
   lines, a `MetricStrip` label, a table's column heads, a sidebar group's
-  label, and a form field's label (muted, above the field). The components and
+  label, a group's label in a menu, a select's list or the command palette,
+  and a form field's label (muted, above the field). The components and
   the theme set them; never set a label in this style by hand elsewhere, and
   never set a figure or a title in it.
 - **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
@@ -211,6 +220,11 @@ from the catalogue.
   a stack's grey bands read in the legend's order, bottom to top.
 - **No fill under overlapping areas**: from three series on, fills bury each
   other. A stack fills each band with a flat tint, never a gradient.
+- **The value axis just covers the data.** Unless the page fixes it, it ends
+  on the round tick just past what is drawn (a 46,800 peak at 50,000, by
+  10,000s), a stack's totals for a stack. Bars and stacks reach zero, since
+  their length is the value; lines and overlapping areas need not, so a
+  revenue line from ₹38L to ₹45L fills the plot rather than its top fifth.
 - **Forecast and today.** `forecastFrom` dashes every line from that point,
   hatches the stretch faintly behind lines on card-coloured halos, labels it
   FORECAST and hollows the end dots (a stack keeps solid edges and no hatching:

package/README.md

@@ -58,8 +58,8 @@ createRoot(root).render(
 
 `preloadFonts()` loads Geist and Geist Mono with the scripts. Add `lucide-react`
 only when your own code imports icons. Next.js compiles the stylesheet through
-`@tailwindcss/postcss` instead of the Vite plugin. Static HTML reports inline the
-package's `report.css` and follow `agents/report-rules.json`.
+`@tailwindcss/postcss` instead of the Vite plugin. To host one page as a single
+HTML file, build it with `siyahi-page` from `@siyahi/tools`.
 
 If npm is unreachable, both package tarballs are attached to
 [GitHub releases](https://github.com/jatinbansal1998/siyahi/releases).
@@ -136,8 +136,8 @@ Set `color-scheme` on `<html>` as well so native controls match.
 ## Tools
 
 `@siyahi/tools` provides theme lint rules, font preload, layout screenshots
-(`siyahi-shots`), loading-shift checks (`siyahi-cls`) and contrast checks
-(`siyahi-contrast`). See the
+(`siyahi-shots`), loading-shift checks (`siyahi-cls`), contrast checks
+(`siyahi-contrast`) and a one-file page build (`siyahi-page`). See the
 [tools guide](https://github.com/jatinbansal1998/siyahi/blob/main/packages/tools/README.md)
 for configuration and commands.
 
@@ -146,7 +146,7 @@ for configuration and commands.
 ```sh
 pnpm install
 pnpm --filter @siyahi/tools exec playwright install chromium
-pnpm check
+pnpm check:static   # the full suite runs on each pull request's CI
 pnpm dev
 ```
 

package/agents/examples/app-sidebar.tsx

@@ -3,7 +3,6 @@ import {
   BlocksIcon,
   ChartAreaIcon,
   CodeIcon,
-  FileTextIcon,
   HouseIcon,
   LayersIcon,
   PaletteIcon,
@@ -18,7 +17,6 @@ const views = [
   { title: "Inputs and overlays", url: "#/inputs", icon: <SlidersHorizontalIcon /> },
   { title: "Data", url: "#/data", icon: <ChartAreaIcon /> },
   { title: "Blocks", url: "#/blocks", icon: <BlocksIcon />, isActive: true },
-  { title: "Reports", url: "#/reports", icon: <FileTextIcon /> },
   // linkProps go onto the anchor: here a new tab, in an app often onMouseEnter to prefetch the view's data.
   {
     title: "Source",

package/agents/examples/chart-panels-three.tsx

@@ -0,0 +1,51 @@
+import { AreaChartCard, BarChartCard, LineChartCard, PanelGrid, useFormat } from "@siyahi/ui";
+
+// One fund over six months: its month-end growth, its value and what was added each month.
+const months = [
+  { month: "May", growth: 0, value: 410000, added: 20000 },
+  { month: "Jun", growth: 0.025, value: 432000, added: 15000 },
+  { month: "Jul", growth: 0.061, value: 455000, added: 10000 },
+  { month: "Aug", growth: 0.047, value: 461000, added: 25000 },
+  { month: "Sep", growth: 0.11, value: 498000, added: 15000 },
+  { month: "Oct", growth: 0.156, value: 527000, added: 20000 },
+];
+
+// Three short panels in a reading column about as wide as an article (max-w-4xl, 56rem): three across from 42rem.
+export default function ChartPanelsThreeExample() {
+  const { pct, money, moneyCompact } = useFormat();
+  return (
+    <div className="max-w-4xl">
+      <PanelGrid columns={3}>
+        <LineChartCard
+          title="Growth"
+          description="Since May, month-end"
+          data={months}
+          xKey="month"
+          series={[{ key: "growth", label: "Growth", color: "var(--chart-1)" }]}
+          valueFormatter={pct}
+          height={160}
+        />
+        <AreaChartCard
+          title="Value"
+          description="Month-end, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "value", label: "Value", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+        <BarChartCard
+          title="Added"
+          description="Each month, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "added", label: "Added", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+      </PanelGrid>
+    </div>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -1,16 +1,26 @@
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuTrigger,
+} from "@siyahi/ui";
 
 export default function ContextMenuExample() {
   return (
     <ContextMenu>
       <ContextMenuTrigger className="w-full">
-        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+        <div className="flex h-24 items-center justify-center border text-muted-foreground">
           Right-click or long-press here
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem>Copy order number</ContextMenuItem>
-        <ContextMenuItem>Open order</ContextMenuItem>
+        <ContextMenuGroup>
+          <ContextMenuLabel>Order</ContextMenuLabel>
+          <ContextMenuItem>Copy order number</ContextMenuItem>
+          <ContextMenuItem>Open order</ContextMenuItem>
+        </ContextMenuGroup>
       </ContextMenuContent>
     </ContextMenu>
   );

package/agents/examples/overview-dashboard.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
   Delta,
   Input,
-  PageHero,
+  PageHeader,
   PanelGrid,
   StatusBadge,
   Table,
@@ -126,7 +126,7 @@ export default function OverviewDashboard() {
   const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
   return (
     <div className="flex flex-col gap-6">
-      <PageHero
+      <PageHeader
         mark={<InkDrop />}
         eyebrow="The Book"
         title="Holdings"

package/agents/examples/{page-hero.tsx → page-header.tsx}

@@ -1,7 +1,7 @@
-import { Button, PageHero } from "@siyahi/ui";
+import { Button, PageHeader } from "@siyahi/ui";
 import { ArrowRightIcon } from "lucide-react";
 
-// The catalogue's own ink drop, painted with currentColor so the hero tints it.
+// The catalogue's own ink drop, painted with currentColor so the header tints it.
 function InkDrop() {
   return (
     <svg viewBox="0 0 16 16">
@@ -14,9 +14,9 @@ function InkDrop() {
   );
 }
 
-export default function PageHeroExample() {
+export default function PageHeaderExample() {
   return (
-    <PageHero
+    <PageHeader
       eyebrow="@siyahi/ui"
       title="Siyahi"
       lead="Ink for numbers. A design system for pages people read figures from: dashboards, ledgers, reports."

package/agents/examples/select.tsx

@@ -1,4 +1,4 @@
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@siyahi/ui";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@siyahi/ui";
 
 const stores = [
   { label: "All stores", value: "all" },
@@ -15,6 +15,7 @@ export default function SelectExample() {
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
+          <SelectLabel>Sales channel</SelectLabel>
           {stores.map((store) => (
             <SelectItem key={store.value} value={store.value}>
               {store.label}

package/agents/manifest.json

@@ -4,8 +4,6 @@
   "props": "dist/index.d.ts",
   "setup": "README.md#install",
   "layout": "README.md#surfaces",
-  "report": "report.css",
-  "reportRules": "agents/report-rules.json",
   "recipes": {
     "dashboard": "agents/examples/surfaces.tsx",
     "table": "agents/examples/data-table.tsx",
@@ -671,6 +669,16 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/chart-panels-three.tsx",
+      "components": [
+        "AreaChartCard",
+        "BarChartCard",
+        "LineChartCard",
+        "PanelGrid",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-panels.tsx",
       "components": [
@@ -717,7 +725,9 @@
       "components": [
         "ContextMenu",
         "ContextMenuContent",
+        "ContextMenuGroup",
         "ContextMenuItem",
+        "ContextMenuLabel",
         "ContextMenuTrigger"
       ]
     },
@@ -1038,7 +1048,7 @@
         "CardTitle",
         "Delta",
         "Input",
-        "PageHero",
+        "PageHeader",
         "PanelGrid",
         "StatusBadge",
         "Table",
@@ -1054,10 +1064,10 @@
       ]
     },
     {
-      "file": "agents/examples/page-hero.tsx",
+      "file": "agents/examples/page-header.tsx",
       "components": [
         "Button",
-        "PageHero"
+        "PageHeader"
       ]
     },
     {
@@ -1208,6 +1218,7 @@
         "SelectContent",
         "SelectGroup",
         "SelectItem",
+        "SelectLabel",
         "SelectTrigger",
         "SelectValue"
       ]

package/dist/components/registry/charts/area-chart-card.js

@@ -18,6 +18,7 @@ function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		logBlocked: stacked ? "Log cannot show stacked areas" : void 0,
+		stackOffset: stacked ? "none" : void 0,
 		endLabels: !stacked,
 		forecastHatch: !stacked,
 		curve,

package/dist/components/registry/charts/bar-chart-card.js

@@ -3,13 +3,11 @@ import { ChartFrame, barFill, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
-const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...props,
-		yDomain: props.yDomain ?? (props.data.some((row) => props.series.some(({ key }) => Number(row[key]) > 0)) ? void 0 : DOWN_FROM_ZERO),
 		stackOffset: stacked ? "sign" : void 0,
 		onClick: onSelect ? ({ activeTooltipIndex, isTooltipActive }) => {
 			if (!isTooltipActive || activeTooltipIndex == null) return;

package/dist/components/registry/heatmap/calendar-heatmap.js

@@ -226,7 +226,7 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels(), yearTicks = f
 * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
 * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
 */
-const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 0, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
 	const [rootRef, rootWidth] = useElementWidth();
 	const dataWithLevels = useMemo(() => {

package/dist/components/registry/heatmap/status-heatmap.js

@@ -109,7 +109,7 @@ const useStatusHeatmap = () => {
 * @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
 * @param colors - Custom colors for critical, degraded, and healthy states
 */
-const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
+const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 0, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
 	0,
 	1,
 	2,

package/dist/components/registry/heatmap/weekday-heatmap.js

@@ -89,7 +89,7 @@ const useWeekdayHeatmap = () => {
 * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
 * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
 */
-const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
+const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 0, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
 	const [rootRef, rootWidth] = useElementWidth();
 	const weekdays = useMemo(() => displayedWeekdays ?? Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7), [displayedWeekdays, weekStart]);

package/dist/components/registry/niko-table/core/data-table-error-boundary.js

@@ -1,6 +1,6 @@
 "use client";
-import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { Button } from "../../../ui/button.js";
+import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { AlertCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/components/registry/niko-table/core/data-table-structure.js

@@ -19,6 +19,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { flexRender } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/core/data-table-structure.tsx
+const ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
 const DataTableHeader = React.memo(function DataTableHeader({ className, sticky = true }) {
 	const { table, headerMinWidths, setColumnResizePreview, isCompact } = useDataTable();
 	const resizing = table?.options.enableColumnResizing ?? false;
@@ -39,8 +43,10 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 				}),
 				...getCommonPinningStyles(header.column, true, !isCompact)
 			};
+			const sorted = !header.isPlaceholder && header.column.getSortIndex() === 0 && header.column.getIsSorted();
 			return /* @__PURE__ */ jsxs(TableHead, {
 				"data-col-id": header.column.id,
+				"aria-sort": sorted ? ARIA_SORT[sorted] : void 0,
 				"data-numeric": header.column.columnDef.meta?.variant === "number" || void 0,
 				style: headerStyle,
 				className: cn(!isCompact && header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),

package/dist/components/registry/niko-table/core/data-table.js

@@ -117,7 +117,7 @@ function DataTable({ children, className, height, maxHeight, "aria-label": label
 		"aria-label": labelledBy ? void 0 : label,
 		"aria-labelledby": labelledBy,
 		tabIndex: 0,
-		className: cn("relative isolate w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
+		className: cn("relative isolate w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
 		style: {
 			height: finalHeight,
 			maxHeight: finalMaxHeight

package/dist/components/registry/niko-table/filters/table-column-sort.js

@@ -82,7 +82,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("span", { children: "Column Sort" }), showSortBadge && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					render: /* @__PURE__ */ jsx("span", { className: "flex size-4 cursor-help items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground" }),
+					render: /* @__PURE__ */ jsx("span", { className: "flex size-4 cursor-help items-center justify-center bg-primary text-[10px] font-medium text-primary-foreground" }),
 					children: sortIndex + 1
 				}), /* @__PURE__ */ jsx(TooltipContent, {
 					side: "right",
@@ -159,7 +159,7 @@ function TableColumnSortMenu({ column, table: propTable, variant: propVariant, c
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative flex items-center justify-center",
 			children: [/* @__PURE__ */ jsx(SortIcon, { className: "size-4" }), showSortBadge && /* @__PURE__ */ jsx("span", {
-				className: "absolute -top-1 -right-2 flex size-3 items-center justify-center rounded-full bg-primary text-[9px] text-primary-foreground",
+				className: "absolute -top-1 -right-2 flex size-3 items-center justify-center bg-primary text-[9px] text-primary-foreground",
 				children: sortIndex + 1
 			})]
 		}), /* @__PURE__ */ jsx("span", {

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

@@ -1,8 +1,8 @@
 "use client";
-import { Badge } from "../../../ui/badge.js";
 import { Button } from "../../../ui/button.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
+import { Badge } from "../../../ui/badge.js";
 import { Separator } from "../../../ui/separator.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";
@@ -107,7 +107,7 @@ function TableFacetedFilter({ column, title, options = [], multiple, onValueChan
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger || /* @__PURE__ */ jsxs(Button, {
 			variant: "outline",
 			size: "sm",
-			className: "h-8 border-dashed",
+			className: "h-8",
 			children: [
 				selectedValues?.size > 0 ? /* @__PURE__ */ jsx("div", {
 					role: "button",

package/dist/components/registry/niko-table/lib/column-resize-handle.js

@@ -168,7 +168,7 @@ function DataTableColumnResizeHandle({ header, isFlex = false, setResizePreview
 			}
 		},
 		className: "group/resize absolute top-0 right-0 z-10 flex h-full w-2 cursor-col-resize touch-none justify-end outline-none select-none",
-		children: /* @__PURE__ */ jsx("div", { className: cn("my-1.5 w-px rounded bg-border opacity-0 transition-all", "group-hover/resize:my-0 group-hover/resize:w-0.5 group-hover/resize:bg-primary group-hover/resize:opacity-100", "group-focus-visible/resize:my-0 group-focus-visible/resize:w-0.5 group-focus-visible/resize:bg-primary group-focus-visible/resize:opacity-100", isResizing && "my-0 w-0.5 bg-primary opacity-100") })
+		children: /* @__PURE__ */ jsx("div", { className: cn("my-1.5 w-px bg-border opacity-0 transition-all", "group-hover/resize:my-0 group-hover/resize:w-0.5 group-hover/resize:bg-primary group-hover/resize:opacity-100", "group-focus-visible/resize:my-0 group-focus-visible/resize:w-0.5 group-focus-visible/resize:bg-primary group-focus-visible/resize:opacity-100", isResizing && "my-0 w-0.5 bg-primary opacity-100") })
 	});
 }
 //#endregion

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

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

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

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

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

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

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

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

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

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

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

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