@siyahi/ui 0.1.9-next.21 → 0.1.9-next.22

package/DESIGN.md

@@ -13,7 +13,9 @@ a meaning:
 - **Ink indigo** is the accent: links, focus rings, the selected sidebar item,
   the first chart series and an `accent` `Callout`. Buttons, badges and toggles
   stay monochrome.
-- **Green and red** mean a gain and a loss, always with ▲ or ▼ (`Delta`).
+- **Green and red** mean a gain and a loss. A signed figure is `Delta`: the figure in the text colour with its
+  `+` or `−`, and only a small trend icon in green or red. In plain text (labels, tooltips) write the sign; never
+  colour a run of figures green and red.
   **Amber** means caution. None of them decorates.
 - **Emphasis tints the whole surface.** A caution is `WarningAlert`; a point set
   apart is `Callout` (`neutral`, `accent`, `warning`, `positive`,
@@ -25,6 +27,16 @@ a meaning:
   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
   are fine.
+- **Edges that matter reach 3:1; the rest stay faint.** A field's edge (input,
+  textarea, select, input group, the command search) is `--input`, at 3:1 on the
+  canvas and the card; dividers, card rings, gridlines and the outlines of
+  buttons, toggles and code blocks are the faint `--border`. Focus is an opaque
+  `--ring`, or the opaque destructive red on a destructive control. A selected
+  toggle or pill tab fills with the foreground. A chart bar that a selection
+  dims keeps its full-colour outline and fades only inside.
+- **Destructive is not loss.** `--destructive` (delete, an invalid field) is a
+  deeper red than `--negative` (a loss figure), so its label reads on its own
+  tint; never use one for the other.
 - Categories (a broker, a sector, an asset class) stay neutral: outline badges,
   never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
   colour, not separate hues.

package/agents/examples/app-sidebar.tsx

@@ -32,7 +32,9 @@ export default function AppSidebarExample() {
   return (
     // In an app, AppSidebar sits fixed at the edge; collapsible="none" draws it in place here.
     <SidebarProvider className="min-h-0">
-      <AppSidebar collapsible="none" navMain={views} navLabel="Views" className="rounded-lg border" />
+      <div className="flex overflow-hidden rounded-lg border">
+        <AppSidebar collapsible="none" navMain={views} navLabel="Views" />
+      </div>
     </SidebarProvider>
   );
 }

package/agents/examples/bar-list-sides.tsx

@@ -23,14 +23,16 @@ export default function BarListSidesExample() {
       </CardHeader>
       {/* Each list is a column of its own, headed and ruled off, with its figures at its own right edge, so a
           gain's figure never reads as the label of the loss beside it. */}
-      <CardContent className="grid gap-6 md:grid-cols-2 md:gap-0 md:divide-x">
-        <div className="md:pr-6">
-          <h3 className="text-muted-foreground mb-2 text-xs font-medium">Gains</h3>
-          <BarList data={gains} max={max} color="var(--positive)" valueFormatter={(v) => money(v)} />
-        </div>
-        <div className="md:pl-6">
-          <h3 className="text-muted-foreground mb-2 text-xs font-medium">Losses</h3>
-          <BarList data={losses} max={max} color="var(--negative)" valueFormatter={(v) => money(v)} />
+      <CardContent>
+        <div className="grid gap-6 md:grid-cols-2 md:gap-0 md:divide-x">
+          <div className="md:pr-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Gains</h3>
+            <BarList data={gains} max={max} color="var(--positive)" valueFormatter={(v) => money(v)} />
+          </div>
+          <div className="md:pl-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Losses</h3>
+            <BarList data={losses} max={max} color="var(--negative)" valueFormatter={(v) => money(v)} />
+          </div>
         </div>
       </CardContent>
     </Card>

package/agents/examples/calendar.tsx

@@ -4,12 +4,8 @@ import { useState } from "react";
 export default function CalendarExample() {
   const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 20));
   return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      defaultMonth={new Date(2026, 9, 1)}
-      className="w-fit rounded-lg border"
-    />
+    <div className="w-fit rounded-lg border">
+      <Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 9, 1)} />
+    </div>
   );
 }

package/agents/examples/card.tsx

@@ -28,7 +28,9 @@ export default function CardExample() {
       <CardContent>
         <p className="text-3xl font-semibold">{money(4512300)}</p>
       </CardContent>
-      <CardFooter className="text-muted-foreground">Updated after the market close</CardFooter>
+      <CardFooter>
+        <p className="text-muted-foreground">Updated after the market close</p>
+      </CardFooter>
     </Card>
   );
 }

package/agents/examples/collapsible.tsx

@@ -8,8 +8,8 @@ export default function CollapsibleExample() {
         <ChevronsUpDownIcon />
         How lots are matched
       </CollapsibleTrigger>
-      <CollapsibleContent className="text-muted-foreground">
-        Sells are matched to the oldest buy first, as the tax rules require.
+      <CollapsibleContent>
+        <p className="text-muted-foreground">Sells are matched to the oldest buy first, as the tax rules require.</p>
       </CollapsibleContent>
     </Collapsible>
   );

package/agents/examples/command.tsx

@@ -3,25 +3,27 @@ import { ChartLineIcon, LandmarkIcon, WalletIcon } from "lucide-react";
 
 export default function CommandExample() {
   return (
-    <Command className="rounded-lg border">
-      <CommandInput placeholder="Jump to a page" />
-      <CommandList>
-        <CommandEmpty>No page matches.</CommandEmpty>
-        <CommandGroup heading="Pages">
-          <CommandItem>
-            <WalletIcon />
-            Holdings
-          </CommandItem>
-          <CommandItem>
-            <ChartLineIcon />
-            Realized
-          </CommandItem>
-          <CommandItem>
-            <LandmarkIcon />
-            Cash flow
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
+    <div className="overflow-hidden rounded-lg border">
+      <Command>
+        <CommandInput placeholder="Jump to a page" />
+        <CommandList>
+          <CommandEmpty>No page matches.</CommandEmpty>
+          <CommandGroup heading="Pages">
+            <CommandItem>
+              <WalletIcon />
+              Holdings
+            </CommandItem>
+            <CommandItem>
+              <ChartLineIcon />
+              Realized
+            </CommandItem>
+            <CommandItem>
+              <LandmarkIcon />
+              Cash flow
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
   );
 }

package/agents/examples/context-menu.tsx

@@ -3,8 +3,10 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger }
 export default function ContextMenuExample() {
   return (
     <ContextMenu>
-      <ContextMenuTrigger className="flex h-24 w-full items-center justify-center rounded-lg border border-dashed text-muted-foreground">
-        Right-click or long-press here
+      <ContextMenuTrigger className="w-full">
+        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+          Right-click or long-press here
+        </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuItem>Copy symbol</ContextMenuItem>

package/agents/examples/distribution-bar-tug.tsx

@@ -33,28 +33,30 @@ export default function DistributionBarTugExample() {
         <CardTitle>The tug-of-war</CardTitle>
         <CardDescription>Each closed position, losses left of break-even and gains right</CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-col gap-2">
-        <DistributionBar
-          min={-reach}
-          max={reach}
-          showLegend={false}
-          markers={[{ at: 0 }]}
-          highlighted={focus?.name ?? null}
-          onHover={setFocus}
-          segments={positions.map(({ name, value }) => ({
-            name,
-            value,
-            color: value > 0 ? "var(--positive)" : "var(--negative)",
-          }))}
-        />
-        <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
-          <span>
-            losers <Delta value={lost} format="money" />
-          </span>
-          <span className="text-center">break-even</span>
-          <span className="text-right">
-            winners <Delta value={won} format="money" />
-          </span>
+      <CardContent>
+        <div className="flex flex-col gap-2">
+          <DistributionBar
+            min={-reach}
+            max={reach}
+            showLegend={false}
+            markers={[{ at: 0 }]}
+            highlighted={focus?.name ?? null}
+            onHover={setFocus}
+            segments={positions.map(({ name, value }) => ({
+              name,
+              value,
+              color: value > 0 ? "var(--positive)" : "var(--negative)",
+            }))}
+          />
+          <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
+            <span>
+              losers <Delta value={lost} format="money" />
+            </span>
+            <span className="text-center">break-even</span>
+            <span className="text-right">
+              winners <Delta value={won} format="money" />
+            </span>
+          </div>
         </div>
       </CardContent>
       <CardFooter className="min-h-12" aria-live="polite">

package/agents/examples/heatmap-calendar.tsx

@@ -45,13 +45,15 @@ export default function HeatmapCalendarExample() {
               />
             )}
           </CalendarHeatmapBody>
-          <CalendarHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
-            <p aria-live="polite" className="text-sm">
-              {picked
-                ? `${picked.date}: ${count(picked.value)} trades`
-                : "Select a day for its trade count. Use arrow keys to move between days."}
-            </p>
-            <CalendarHeatmapLegend labels={{ less: "0 trades", more: `${count(busiest)} trades` }} />
+          <CalendarHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${count(picked.value)} trades`
+                  : "Select a day for its trade count. Use arrow keys to move between days."}
+              </p>
+              <CalendarHeatmapLegend labels={{ less: "0 trades", more: `${count(busiest)} trades` }} />
+            </div>
           </CalendarHeatmapFooter>
         </CalendarHeatmap>
       </CardContent>

package/agents/examples/heatmap-status.tsx

@@ -41,14 +41,16 @@ export default function HeatmapStatusExample() {
               />
             )}
           </StatusHeatmapBody>
-          <StatusHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
-            <p aria-live="polite" className="text-sm">
-              {picked
-                ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
-                : "Select a day for its health. Use arrow keys to move between days."}
-            </p>
-            {/* No day lacks data, so the legend leaves out "No Data". */}
-            <StatusHeatmapLegend className="gap-3" />
+          <StatusHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
+                  : "Select a day for its health. Use arrow keys to move between days."}
+              </p>
+              {/* No day lacks data, so the legend leaves out "No Data". */}
+              <StatusHeatmapLegend />
+            </div>
           </StatusHeatmapFooter>
         </StatusHeatmap>
       </CardContent>

package/agents/examples/heatmap-weekday.tsx

@@ -39,34 +39,31 @@ export default function HeatmapWeekdayExample() {
       {/* Seven hours by five days is a small grid: capped, it keeps square cells, and the legend and the answer
           sit beside it instead of a wide empty card. */}
       <CardContent>
-        <WeekdayHeatmap
-          data={data}
-          hours={[9, 10, 11, 12, 13, 14, 15]}
-          weekdays={[1, 2, 3, 4, 5]}
-          className="gap-4 lg:flex-row lg:items-center lg:gap-8"
-        >
-          <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
-            {({ activity }) => (
-              <WeekdayHeatmapBlock
-                activity={activity}
-                selected={isPicked(activity)}
-                onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+        <WeekdayHeatmap data={data} hours={[9, 10, 11, 12, 13, 14, 15]} weekdays={[1, 2, 3, 4, 5]}>
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-8">
+            <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
+              {({ activity }) => (
+                <WeekdayHeatmapBlock
+                  activity={activity}
+                  selected={isPicked(activity)}
+                  onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+                />
+              )}
+            </WeekdayHeatmapBody>
+            <div className="flex flex-col items-start gap-3 text-sm">
+              <WeekdayHeatmapLegend
+                className="ml-0"
+                labels={{ less: "0 orders", more: `${count(busiest.value)} orders an hour` }}
               />
-            )}
-          </WeekdayHeatmapBody>
-          <div className="flex flex-col items-start gap-3 text-sm">
-            <WeekdayHeatmapLegend
-              className="ml-0"
-              labels={{ less: "0 orders", more: `${count(busiest.value)} orders an hour` }}
-            />
-            <p>
-              Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
-            </p>
-            <p aria-live="polite" className="text-muted-foreground">
-              {picked
-                ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
-                : "Select a cell for its order count. Use arrow keys to move between cells."}
-            </p>
+              <p>
+                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
+              </p>
+              <p aria-live="polite" className="text-muted-foreground">
+                {picked
+                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
+                  : "Select a cell for its order count. Use arrow keys to move between cells."}
+              </p>
+            </div>
           </div>
         </WeekdayHeatmap>
       </CardContent>

package/agents/examples/price-chart.tsx

@@ -16,8 +16,8 @@ export default function PriceChartExample() {
       <CardContent>
         <PriceChart data={data} height={256} />
       </CardContent>
-      <CardFooter className="text-xs text-muted-foreground">
-        <span>
+      <CardFooter>
+        <span className="text-xs text-muted-foreground">
           Chart by{" "}
           <a
             className="text-link underline-offset-4 hover:underline"

package/agents/examples/range-position.tsx

@@ -25,28 +25,30 @@ export default function RangePositionExample() {
         <CardTitle>HDFCBANK sits {f.pct((close - low) / (high - low), 0)} of the way up its 52-week range</CardTitle>
         <CardDescription>The last close against the year's lowest and highest close</CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-col gap-8 @xl/range:flex-row @xl/range:items-end">
-        <DataList className="@xl/range:w-56 @xl/range:shrink-0">
-          <DataListItem label="52-week low, 7 months ago">
-            <span className="tabular-nums">{price(low)}</span>
-          </DataListItem>
-          <DataListItem label="52-week high, 11 weeks ago">
-            <span className="tabular-nums">{price(high)}</span>
-          </DataListItem>
-          <DataListItem label="Last close">
-            <span className="tabular-nums">{price(close)}</span>
-          </DataListItem>
-        </DataList>
-        <RangePosition
-          low={low}
-          high={high}
-          value={close}
-          lowLabel="52-week low"
-          highLabel="52-week high"
-          caption="of the way up the 52-week range"
-          valueFormatter={price}
-          className="@xl/range:flex-1"
-        />
+      <CardContent>
+        <div className="flex flex-col gap-8 @xl/range:flex-row @xl/range:items-end">
+          <DataList className="@xl/range:w-56 @xl/range:shrink-0">
+            <DataListItem label="52-week low, 7 months ago">
+              <span className="tabular-nums">{price(low)}</span>
+            </DataListItem>
+            <DataListItem label="52-week high, 11 weeks ago">
+              <span className="tabular-nums">{price(high)}</span>
+            </DataListItem>
+            <DataListItem label="Last close">
+              <span className="tabular-nums">{price(close)}</span>
+            </DataListItem>
+          </DataList>
+          <RangePosition
+            low={low}
+            high={high}
+            value={close}
+            lowLabel="52-week low"
+            highLabel="52-week high"
+            caption="of the way up the 52-week range"
+            valueFormatter={price}
+            className="@xl/range:flex-1"
+          />
+        </div>
       </CardContent>
     </Card>
   );

package/agents/examples/scroll-area.tsx

@@ -6,15 +6,17 @@ const months = Array.from({ length: 24 }, (_, i) =>
 
 export default function ScrollAreaExample() {
   return (
-    <ScrollArea className="h-48 w-56 rounded-lg border">
-      <div className="p-4">
-        {months.map((month) => (
-          <div key={month}>
-            <div className="text-sm">{month}</div>
-            <Separator className="my-2" />
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
+    <div className="h-48 w-56 overflow-hidden rounded-lg border">
+      <ScrollArea className="h-full">
+        <div className="p-4">
+          {months.map((month) => (
+            <div key={month}>
+              <div className="text-sm">{month}</div>
+              <Separator className="my-2" />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
   );
 }

package/agents/examples/surfaces.tsx

@@ -75,8 +75,10 @@ function Dashboard() {
               <TableBody>
                 {holdings.map((row) => (
                   <TableRow key={row.symbol}>
-                    <TableCell className="font-mono">{row.symbol}</TableCell>
-                    <TableCell className="tabular-nums">{money(row.value)}</TableCell>
+                    <TableCell>
+                      <span className="font-mono">{row.symbol}</span>
+                    </TableCell>
+                    <TableCell>{money(row.value)}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>

package/agents/examples/target-rows.tsx

@@ -59,11 +59,13 @@ export default function TargetRowsExample() {
         <CardTitle>Debt is 5.6 points under its target</CardTitle>
         <CardDescription>Each sleeve's share of the portfolio against the plan, on one 0–50% scale</CardDescription>
       </CardHeader>
-      <CardContent className="grid gap-2">
-        <p className="text-sm text-muted-foreground">
-          Bar: today's weight. Tall tick: the target. Shading: within 5 points of it, darker within 2.
-        </p>
-        <TargetRows rows={rows} domain={[0, 0.5]} valueFormatter={(value) => f.pct(value)} />
+      <CardContent>
+        <div className="grid gap-2">
+          <p className="text-sm text-muted-foreground">
+            Bar: today's weight. Tall tick: the target. Shading: within 5 points of it, darker within 2.
+          </p>
+          <TargetRows rows={rows} domain={[0, 0.5]} valueFormatter={(value) => f.pct(value)} />
+        </div>
       </CardContent>
     </Card>
   );

package/agents/examples/treemap.tsx

@@ -57,16 +57,18 @@ export default function TreemapExample() {
               onSelect={setSelected}
             />
           </TooltipTrigger>
-          <TooltipContent side="bottom" className="flex-col items-start gap-0 tabular-nums">
-            {hovered && (
-              <>
-                <span className="font-medium">
-                  {hovered.name} · {hovered.broker}
-                </span>
-                <span>{hovered.group}</span>
-                <span>{figures(hovered)}</span>
-              </>
-            )}
+          <TooltipContent side="bottom">
+            <div className="flex flex-col items-start">
+              {hovered && (
+                <>
+                  <span className="font-medium">
+                    {hovered.name} · {hovered.broker}
+                  </span>
+                  <span>{hovered.group}</span>
+                  <span>{figures(hovered)}</span>
+                </>
+              )}
+            </div>
           </TooltipContent>
         </Tooltip>
         <TreemapLegend range={0.6} className="mt-3 ml-auto" />

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

@@ -42,9 +42,13 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
 					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
 						fill: signedFill(tone, isSelected),
-						stroke: dimUnselected(tone, isSelected),
+						stroke: tone,
 						strokeWidth: 1.5
-					}, i) : /* @__PURE__ */ jsx(Cell, { fill: dimUnselected(tone, isSelected) }, i);
+					}, i) : /* @__PURE__ */ jsx(Cell, {
+						fill: dimUnselected(tone, isSelected),
+						stroke: tone,
+						strokeWidth: 1.5
+					}, i);
 				})
 			}, key);
 		})

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

@@ -31,7 +31,7 @@ function SectionCards({ items, selected, onSelect }) {
 							"aria-pressed": item.label === selected,
 							disabled: item.disabled,
 							onClick: () => onSelect(item.label),
-							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
 						}),
 						/* @__PURE__ */ jsxs(CardHeader, { children: [
 							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -66,12 +66,14 @@ function DistributionBar({ segments, valueFormatter, showLegend = true, showValu
 					onMouseLeave: onHover ? () => onHover(null) : void 0,
 					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "distribution-segment",
-						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,background-color] duration-300",
 						style: {
 							left: `${segment.left}%`,
 							width: `${segment.width}%`,
-							backgroundColor: segment.color,
-							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+							...highlighted === null || highlighted === segment.key ? { backgroundColor: segment.color } : {
+								backgroundColor: `color-mix(in oklab, ${segment.color} 35%, var(--card))`,
+								boxShadow: `inset 0 0 0 1px ${segment.color}`
+							}
 						},
 						onMouseEnter: onHover ? () => onHover(segment) : void 0
 					}, segment.key) : null)

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

@@ -322,7 +322,7 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "status-heatmap-legend",
 		"aria-label": labels.legendLabel ?? "Status legend",
-		className: cn("ml-auto flex items-center gap-1", className),
+		className: cn("ml-auto flex items-center gap-3", className),
 		...props,
 		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({
 			value: status.value,

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

@@ -5,6 +5,10 @@ export interface DeltaProps {
   format?: "pct" | "money";
   className?: string;
 }
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+/**
+ * A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or
+ * --negative. The sign and the icon's shape carry the direction, so colour is never the only cue, and a column of
+ * changes reads as figures rather than a wall of red and green.
+ */
 export declare function Delta({ value, format, className }: DeltaProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/delta.js

@@ -1,24 +1,29 @@
 import { useFormat } from "../../lib/format.js";
 import { cn } from "cn";
+import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/delta.tsx
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+const MINUS = "−";
+/**
+* A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or
+* --negative. The sign and the icon's shape carry the direction, so colour is never the only cue, and a column of
+* changes reads as figures rather than a wall of red and green.
+*/
 function Delta({ value, format = "pct", className }) {
 	const f = useFormat();
 	const size = format === "money" ? f.money(Math.abs(value)) : f.pct(Math.abs(value));
-	const direction = value > 0 ? "up" : value < 0 ? "down" : null;
+	const direction = value > 0 ? "up" : value < 0 ? "down" : "none";
+	const Icon = direction === "up" ? TrendingUpIcon : direction === "down" ? TrendingDownIcon : MinusIcon;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "delta",
-		className: cn("inline-flex items-center gap-1 tabular-nums", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === null && "text-muted-foreground", className),
+		"data-direction": direction,
+		className: cn("inline-flex items-center gap-1 whitespace-nowrap", className),
 		children: [
-			direction && /* @__PURE__ */ jsx("span", {
+			/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				children: direction === "up" ? "▲" : "▼"
-			}),
-			direction && /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: direction
+				className: cn("size-3.5 shrink-0", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
 			}),
+			direction === "up" ? "+" : direction === "down" ? MINUS : "",
 			size
 		]
 	});

package/dist/components/siyahi/treemap.js

@@ -27,7 +27,7 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		height
 	]);
 	const focusKey = tiles.some(({ item }) => (item.key ?? item.name) === focusedKey) ? focusedKey : tiles[0]?.item.key ?? tiles[0]?.item.name;
-	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
+	const change = (value) => value === null ? "—" : `${value > 0 ? "+" : value < 0 ? "−" : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "treemap",
@@ -193,9 +193,9 @@ function TreemapLegend({ range, className }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex justify-between gap-2 tabular-nums",
 				children: [
-					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: ["down over ", over] }),
 					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
-					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+					/* @__PURE__ */ jsxs("span", { children: ["up over ", over] })
 				]
 			}),
 			/* @__PURE__ */ jsxs("p", {

package/dist/lib/format.d.ts

@@ -6,7 +6,7 @@ export declare function money(value: number, locale?: SiyahiLocale, fractionDigi
  * A short amount: ₹2.4L and ₹40Cr in en-IN, $2.4M in en-US. Indian readers
  * count in thousands up to a lakh, so in an Indian-region locale amounts under
  * one lakh print in full (₹99,999), never as ₹99.9K. Signed figures belong in
- * `Delta`, which adds the arrow.
+ * `Delta`, which adds the sign and a trend icon.
  *
  * Give `scale`, the largest amount on the same axis, and every tick takes that
  * amount's unit, to two decimals so close ticks stay apart: ₹1.5L, ₹0.75L,

package/dist/lib/format.js

@@ -34,7 +34,7 @@ const NUMBER = /* @__PURE__ */ new Set([
 * A short amount: ₹2.4L and ₹40Cr in en-IN, $2.4M in en-US. Indian readers
 * count in thousands up to a lakh, so in an Indian-region locale amounts under
 * one lakh print in full (₹99,999), never as ₹99.9K. Signed figures belong in
-* `Delta`, which adds the arrow.
+* `Delta`, which adds the sign and a trend icon.
 *
 * Give `scale`, the largest amount on the same axis, and every tick takes that
 * amount's unit, to two decimals so close ticks stay apart: ₹1.5L, ₹0.75L,

package/package.json

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

package/report.css

@@ -5,7 +5,7 @@
  */
 :root {
   color-scheme: light dark;
-  --radius: 0.625rem;
+  --radius: 0.45rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -17,24 +17,24 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.51 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.49 0.19 27.325);
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  --input: oklch(0.64 0 0);
   --ring: oklch(0.62 0.16 275);
-  --positive: oklch(0.527 0.154 150.069);
+  --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
-  --negative: oklch(0.577 0.245 27.325);
+  --negative: oklch(0.577 0.235 27.325);
   --negative-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.555 0.163 48.998);
+  --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
   --chart-3: oklch(0.38 0.13 335);
-  --chart-4: oklch(0.66 0.11 235);
+  --chart-4: oklch(0.65 0.11 235);
   --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
@@ -62,17 +62,17 @@
     --muted-foreground: oklch(0.74 0 0);
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.922 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
+    --destructive: oklch(0.8 0.1 22.216);
     --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
+    --input: oklch(0.62 0 0);
     --ring: oklch(0.6 0.14 275);
-    --positive: oklch(0.74 0.16 151.711);
+    --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
-    --negative: oklch(0.704 0.191 22.216);
+    --negative: oklch(0.704 0.187 22.216);
     --negative-foreground: oklch(0.145 0 0);
-    --warning: oklch(0.828 0.189 84.429);
+    --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
-    --link: oklch(0.75 0.13 275);
+    --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
     --chart-3: oklch(0.58 0.16 335);

package/styles/siyahi.css

@@ -83,7 +83,8 @@
 
 :root {
   color-scheme: light dark;
-  --radius: 0.625rem;
+  /* shadcn's "small": crisper than its 0.625rem default, still not square. Cards 10px, buttons 7px. */
+  --radius: 0.45rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -95,24 +96,27 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* Below shadcn's 0.556, so muted text keeps 4.5:1 on the muted fill and on every Callout's tint. */
+  --muted-foreground: oklch(0.51 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  /* Deeper than the loss red, so a destructive button's label reads on its own red tint, hovered too. */
+  --destructive: oklch(0.49 0.19 27.325);
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  /* The edge of a field (input, textarea, select, input group) at 3:1: --border stays faint for dividers. */
+  --input: oklch(0.64 0 0);
   --ring: oklch(0.62 0.16 275);
-  /* Tailwind green-700, red-600, amber-700, blue-600. */
-  --positive: oklch(0.527 0.154 150.069);
+  /* Tailwind green-700, red-600, amber-700, with their chroma lowered to the sRGB edge. */
+  --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
-  --negative: oklch(0.577 0.245 27.325);
+  --negative: oklch(0.577 0.235 27.325);
   --negative-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.555 0.163 48.998);
+  --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
-   * gain or a loss. Each slot reaches 3:1 against the card and against the
+   * gain or a loss. Each slot reaches 3:1 against the canvas, the card and the
    * slots next to it, which only lightness can give, so indigo, plum and teal
    * are the deep members and amber and sky the pale ones, in both schemes: a
    * pale indigo in dark read as lavender and lost the accent. Slots two apart
@@ -123,7 +127,7 @@
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
   --chart-3: oklch(0.38 0.13 335);
-  --chart-4: oklch(0.66 0.11 235);
+  --chart-4: oklch(0.65 0.11 235);
   --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
@@ -159,18 +163,23 @@
     --muted-foreground: oklch(0.74 0 0);
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.922 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
+    /* Paler and calmer than the loss red, so a destructive label reads on its red tint over the card, hovered too. */
+    --destructive: oklch(0.8 0.1 22.216);
     --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
+    --input: oklch(0.62 0 0);
     --ring: oklch(0.6 0.14 275);
-    /* Green toned down from Tailwind green-400 to the lightness and calm of red-400 beside it, so gains do not shout; amber-400. */
-    --positive: oklch(0.74 0.16 151.711);
+    /*
+     * Green toned down from Tailwind green-400, below red-400's lightness so a
+     * treemap's deepest green tile keeps its light label at 4.5:1; amber-400.
+     * Red, amber and the link sit at the sRGB edge.
+     */
+    --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
-    --negative: oklch(0.704 0.191 22.216);
+    --negative: oklch(0.704 0.187 22.216);
     --negative-foreground: oklch(0.145 0 0);
-    --warning: oklch(0.828 0.189 84.429);
+    --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
-    --link: oklch(0.75 0.13 275);
+    --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
     --chart-3: oklch(0.58 0.16 335);
@@ -213,15 +222,78 @@
 /*
  * Every selected toggle, a view switch or a filter chip alike, fills with the
  * foreground, black on white and white on black, so the reader sees at once
- * what is on; stock shadcn marks it with a faint grey. Unlayered, to outrank
- * the stock aria-pressed:bg-muted.
+ * what is on; stock shadcn marks it with a faint grey. A default (pill) tab
+ * selects the same way: stock fills it with the canvas colour, 1.05:1 against
+ * its grey list. Unlayered, to outrank the stock aria-pressed:bg-muted.
  */
-:is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]) {
+:is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]),
+[data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active] {
   background-color: var(--foreground);
   color: var(--background);
   border-color: var(--foreground);
 }
 
+/*
+ * --input is the edge of a field, where the reader types or picks. A button,
+ * a toggle and a code block are framed by their label or their content, so
+ * their outline stays the faint divider colour; scoping the variable keeps
+ * the fill each derives from it faint too.
+ */
+:is([data-slot="button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
+  --input: var(--border);
+}
+
+/*
+ * The command palette's search field is a field: the --input edge on a muted
+ * fill, and the muted placeholder every other field uses (stock leaves it at
+ * Tailwind's half-strength text, 3.7:1).
+ */
+[data-slot="command-input-wrapper"] > [data-slot="input-group"] {
+  border-color: var(--input);
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+[data-slot="command-input"]::placeholder {
+  color: var(--muted-foreground);
+}
+
+/*
+ * Focus is opaque wherever the ring is the only sign of it: stock draws the
+ * ring at half strength (under 2:1 on the canvas) and relies on an opaque
+ * border these controls do not have. The slider's thumb is a div around a
+ * hidden range input, so it shows the input's focus.
+ */
+:is([data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="scroll-area-viewport"]):focus-visible,
+[data-slot="button"][data-day]:focus-visible {
+  --tw-ring-color: var(--ring);
+}
+[data-slot="slider-thumb"]:has(input:focus-visible) {
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+/*
+ * A destructive control focuses, and an invalid field is edged, in the full
+ * destructive colour; stock fades both to 40-50%, under 3:1.
+ */
+[data-slot="button"][class~="text-destructive"]:focus-visible,
+[data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
+:is(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="button"]
+)[aria-invalid="true"],
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+  border-color: var(--destructive);
+}
+
+/*
+ * A slider's unfilled track is outlined in the field edge, so its extent reads
+ * at 3:1; the muted track alone is 1.05:1 on the canvas.
+ */
+[data-slot="slider-track"] {
+  box-shadow: inset 0 0 0 1px var(--input);
+}
+
 /*
  * A number column (meta.variant "number") right-aligns its head and cells, so
  * figures line up by their units down the column, as a ledger reads.