@photon-ai/pho-ui 2.15.0 → 2.17.0

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -2,8 +2,12 @@ import { AnchorHTMLAttributes, ComponentProps, ReactNode, Ref } from 'react';
 import { ButtonLinkProps, ButtonProps } from '../../components/button';
 import { Form as FormElement } from '../../components/form';
 import { DataTable } from '../../components/data-table';
-/** Bordered card that stacks rows with hairline dividers. */
-export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0";
+/**
+ * Bordered card that stacks rows with hairline dividers. `gap-0` is the
+ * card's own: Stack used to force `gap-3` onto a bare Card and open 12px
+ * bands between `divide-y` rows. The marker below lets Stack skip it.
+ */
+export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0 gap-0";
 /**
  * Standalone callout surface — featured block (invite form, notice, etc.).
  * Don't wrap in `Card`; this is the outer chrome.
@@ -82,8 +86,26 @@ export interface BasicPageRootProps extends ComponentProps<"div"> {
      * space is margin, not content width.
      */
     width?: "base" | "wide";
+    /**
+     * This page was painted before React — rendered to a string and inlined
+     * ahead of the bundle (a boot skeleton), or the React twin re-rendering
+     * that markup as-is on its first commit. Marks the root with
+     * `data-basic-page-prerendered`. Nothing inside it plays the entrance,
+     * an explicit `enter` included: the page is already on screen, and
+     * starting values would blink it out. The React page taking over from
+     * it stays put too — it finds the marker in the document at its first
+     * render, while the twin is still there.
+     */
+    prerendered?: boolean;
 }
-declare function Root({ condense, width, className, children, ref, ...props }: BasicPageRootProps): import("react").JSX.Element;
+/** How wide the panel is, once the pane is wide enough to host it. */
+export type BasicPageAsideWidth = "default" | "wide";
+/**
+ * How an open `Aside` shows its subpage: a `panel` beside the page, or as
+ * the `page` itself, the list stepping aside.
+ */
+export type BasicPageAsidePresentation = "panel" | "page";
+declare function Root({ condense, width, prerendered, className, children, ref, ...props }: BasicPageRootProps): import("react").JSX.Element;
 /**
  * Condensing header — the page's way back once the title has scrolled away.
  * `Root condense` renders a sticky bar in the reserved top zone; `Title` and
@@ -126,8 +148,9 @@ declare function CondenseScope({ adopt, children, }: {
 export declare function useCondense(): BasicPageCondense;
 /**
  * The condensed bar's motion, exported for a shell that adopts the bar
- * (`CondenseScope`) so its swap moves the same way: 0.2s ease-out, dropping
- * in from 8px above and leaving the same way.
+ * (`CondenseScope`) so its swap moves the same way: 0.2s ease-out. The bar
+ * fades in place; its page name rises in from 8px below and leaves the
+ * same way.
  */
 export declare const CONDENSE_BAR_ENTER: {
     readonly duration: 0.2;
@@ -143,6 +166,10 @@ export declare const CONDENSE_BAR_TRAVEL: {
     readonly duration: 0.2;
     readonly ease: "linear";
 };
+/**
+ * The bar's rise distance, signed as "from above": the page name comes
+ * from below, so it starts at `-CONDENSE_BAR_RISE_PX`.
+ */
 export declare const CONDENSE_BAR_RISE_PX = -8;
 export interface BasicPageTitleProps extends ComponentProps<"h1"> {
     /**
@@ -159,9 +186,9 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
      * `morphId` for a mid-level page (a list that is itself a subpage): the
      * word rises in when the page is entered from its parent and flies in
      * from the back link when returned to from its own subpage. Played once
-     * per visit: a title taking over from a loading page already on screen
-     * (its skeleton's, or the one painted before React) stays put. Skipped
-     * under reduced motion.
+     * per visit: a title taking over from a loading part in this page's
+     * `Root` (its skeleton's), or from a prerendered page anywhere (the one
+     * painted before React), stays put. Skipped under reduced motion.
      */
     enter?: boolean;
     /**
@@ -187,12 +214,15 @@ declare function Title({ id, morphId, enter: enterProp, trailing, className, chi
 export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
     /**
      * Whether mounting plays the page entrance. Left unset, the stack decides
-     * from what is on screen: it enters unless a loading stack — one marked
-     * `aria-busy`, or inside an `aria-busy` region — is already there, in
-     * which case the skeleton was the page's entrance and this stack takes
-     * its place at rest, values filling in. `true` always enters; `false`
-     * never does (static markup React re-renders as-is on its first commit
-     * has nothing to arrive from).
+     * from what is on screen: it enters unless it is taking over from a
+     * loading part in this page's `Root` — a stack marked `aria-busy`, or
+     * inside an `aria-busy` region — or a prerendered page is anywhere in
+     * the document. In the first case the skeleton was the page's entrance
+     * and this stack takes its place at rest, values filling in; in the
+     * second the page was painted before React and is already there. A
+     * loading part in some other page (one still on screen while this one
+     * mounts) does not count. `true` always enters, except inside a
+     * `Root prerendered`; `false` never does.
      */
     enter?: boolean;
     ref?: Ref<HTMLDivElement>;
@@ -210,16 +240,19 @@ export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealM
  * - **Entering the page** — whatever the page first shows (skeleton
  *   included) rides in with its stack.
  * - **Skeleton, then the data** — a skeleton is a stack under `aria-busy`
- *   (its own, or a wrapper's). The loaded stack mounting in its place
- *   finds it on screen and renders at rest: the shape was already there,
- *   the values fill in. Whether the skeleton is a separate component
- *   (swapped for the loaded return) or one stack branching its children
- *   (`{pending ? bones : content}`) makes no difference to the motion.
+ *   (its own, or a wrapper's). The loaded stack mounting in its place, in
+ *   the same `Root`, finds it there and renders at rest: the shape was
+ *   already there, the values fill in. Whether the skeleton is a separate
+ *   component (swapped for the loaded return) or one stack branching its
+ *   children (`{pending ? bones : content}`) makes no difference to the
+ *   motion. Only this page's `Root` counts: a skeleton still on screen in
+ *   the page being left does not hold the next page at rest.
  * - **Skeleton that is already on screen before React** (rendered to a
  *   string, painted before the bundle, re-rendered as-is on React's first
- *   commit) — static markup never enters, and the twin finds the static
- *   one in the document and stays put on its own; `enter={false}` says so
- *   outright for markup that must never move.
+ *   commit) — its `Root` says `prerendered`: static markup never enters,
+ *   nothing inside that root does either, and the React page taking over
+ *   finds the marker in the document and stays put on its own;
+ *   `enter={false}` says so outright for markup that must never move.
  * - **A region the skeleton couldn't predict** (a list of unknown length)
  *   — `Reveal` rises that region in once its shape is known.
  *
@@ -236,8 +269,8 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
      * `enter`, for a subpage title that carries a description: the pair
      * floats up from below the departing morph word as one block. Put `enter`
      * here and NOT on the `Title` inside. As for `Title`, stays put when it
-     * takes over from a loading page already on screen. Skipped under
-     * reduced motion.
+     * takes over from a loading part in this page's `Root`, or from a
+     * prerendered page anywhere. Skipped under reduced motion.
      */
     enter?: boolean;
     ref?: Ref<HTMLDivElement>;
@@ -246,9 +279,11 @@ declare function Header({ enter: enterProp, className, ...props }: BasicPageHead
 /**
  * An action at the header row's end — a small button (or two) seated in
  * the `Header` grid the way `Search` is: top-right of the block, its top
- * edge on the header's top, flush with the card edge below; text shorter
- * than it centers against it. Put it inside `Header` after the text; with
- * a `Search` present it stands to the search's right.
+ * edge on the header's top, its right edge on the title / card-content
+ * inset (`mr-5` matching `SectionTitle`'s `px-5`). A callout already
+ * carries `p-5` and its title has no `px-5`, so the inset drops there.
+ * Text shorter than the seat centers against it. Put it inside `Header`
+ * after the text; with a `Search` present it stands to the search's right.
  */
 declare function HeaderAction({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
@@ -830,6 +865,37 @@ export interface BasicPageAsideProps {
      * panel's corner calls it. A page with a `Back` closes through that link.
      */
     onClose?: () => void;
+    /**
+     * How wide the panel is on a pane that can host it. `default` (unsaid)
+     * is two fifths of the pane, 20–28rem. `wide` is half the pane, 25–40rem
+     * — a request body or a waterfall. Below `md` the subpage is the page
+     * and this does not apply.
+     */
+    width?: BasicPageAsideWidth;
+    /**
+     * How the open subpage shows, controlled: `panel` beside the page, or
+     * `page` — the list steps aside and the subpage takes the pane, the way
+     * it does on a narrow pane. Pair with `onPresentationChange`; the
+     * panel's Expand and the page's Show as panel ask through it. A narrow
+     * pane (under `md`) is the page whatever this says.
+     */
+    presentation?: BasicPageAsidePresentation;
+    /**
+     * The presentation the subpage opens with, when uncontrolled. Unsaid,
+     * the aside decides from how it was reached: a subpage already open
+     * when the aside mounts arrived by URL — a deep link, a refresh — and
+     * is the page; one that opens later was opened from the list and is a
+     * panel. The choice resets each time the aside closes.
+     */
+    defaultPresentation?: BasicPageAsidePresentation;
+    /** The reader pressed Expand or Show as panel. */
+    onPresentationChange?: (presentation: BasicPageAsidePresentation) => void;
+    /**
+     * Whether the panel wears an Expand beside its close, and the expanded
+     * page a Show as panel in its corner. On by default; `false` leaves the
+     * presentation to the pane and to whoever controls it.
+     */
+    expandable?: boolean;
     children?: ReactNode;
 }
 /**
@@ -846,9 +912,19 @@ export interface BasicPageAsideProps {
  * steps aside, the subpage takes the pane with its own `Back` — so one
  * subpage component serves both. Works under either `Root` width: the
  * page keeps its own column cap beside the panel, and leftover space is
- * margin.
+ * margin. `width="wide"` opens the panel itself (half the pane, up to
+ * 40rem); the page's column cap does not follow.
+ *
+ * Panel or page is presentation, not routing: the URL is the subpage's
+ * either way. Left to itself the aside reads how it was reached — a
+ * subpage open at mount arrived by URL (deep link, refresh) and is the
+ * page; one that opens later was opened from the list and is a panel —
+ * and the panel's Expand turns it into the page at the same URL. The
+ * page's own `Back` is the way to the list; Show as panel in its corner
+ * folds it back beside the list. `presentation` / `onPresentationChange`
+ * take the choice over; `defaultPresentation` seeds it.
  */
-declare function Aside({ open, variant, modal, placeholder, onClose, children, }: BasicPageAsideProps): import("react").JSX.Element | null;
+declare function Aside({ open, variant, modal, placeholder, onClose, width, presentation, defaultPresentation, onPresentationChange, expandable, children, }: BasicPageAsideProps): import("react").JSX.Element | null;
 /**
  * Controlled, the query and its setter come together: a `value` with no
  * way to change it would be a field that silently ignores typing.
@@ -908,6 +984,39 @@ interface BasicPageSearchOwnProps extends ComponentProps<"div"> {
  * `search` is on the page.
  */
 declare function Search({ variant, fold, value, onValueChange, placeholder, label, className, ...props }: BasicPageSearchProps): import("react").JSX.Element;
+/**
+ * Two-column body on a wide page. The side column is floored at 29rem —
+ * a `pho_res_` + 26-character resource id sits whole beside its label in
+ * a card row — and capped at 32rem so it stays a facts column, not a
+ * second reading measure. The main column takes the rest.
+ *
+ * Pair with `Root width="wide"` so the canvas can host both columns.
+ * `Columns` brings its own `@container`: two columns only when the
+ * container can hold the 42rem reading column, a 2.5rem gutter, and the
+ * 29rem side (73.5rem). Below that the page is one 42rem reading column,
+ * source order main → side → foot. Leave `side` out and it stays that
+ * reading column at every width.
+ *
+ * Each slot is a `Stack`. The grid owns the seams between them (16px
+ * row gap + a 24px stack seat = 40px, the block rhythm), so hosts never
+ * put `mt-*` on a stack. `enter` is the stacks' — see `Stack`.
+ */
+export interface BasicPageColumnsProps {
+    /** The page's `Title` or `Header`, across the top of both columns. */
+    header?: ReactNode;
+    /** The primary column. Left; first in one column. */
+    main: ReactNode;
+    /**
+     * The facts and offers. Right, 29–32rem; first after `main` in one
+     * column. Left out, the page stays one reading column.
+     */
+    side?: ReactNode;
+    /** What ends the page. Under `side` on the right; last in one column. */
+    foot?: ReactNode;
+    /** Whether the stacks play the page entrance — see `Stack`. */
+    enter?: boolean;
+}
+declare function Columns({ header, main, side, foot, enter }: BasicPageColumnsProps): import("react").JSX.Element;
 export declare const BasicPage: {
     Root: typeof Root;
     Aside: typeof Aside;
@@ -919,6 +1028,7 @@ export declare const BasicPage: {
     Back: typeof Back;
     Title: typeof Title;
     Stack: typeof Stack;
+    Columns: typeof Columns;
     Header: typeof Header;
     HeaderAction: typeof HeaderAction;
     SectionTitle: typeof SectionTitle;

package/dist/src/sections/basic-page/index.d.ts

@@ -1,2 +1,2 @@
-export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageAsideProps, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, } from './basic-page';
+export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageColumnsProps, type BasicPageAsideProps, type BasicPageAsideWidth, type BasicPageAsidePresentation, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, } from './basic-page';
 export { createColumns, type DataTableColumn, type DataTableColumnMeta, type DataTableProps, type SortingState, } from '../../components/data-table';

package/dist/src/sections/sidebar/index.d.ts

@@ -1 +1 @@
-export { Sidebar, SIDEBAR_ROOT, SIDEBAR_ROOT_BASE, SIDEBAR_ROOT_INSET, SIDEBAR_HEADER_INSET, SIDEBAR_ITEM, SIDEBAR_ITEM_ACTIVE, SIDEBAR_ITEM_INACTIVE, type SidebarInset, type SidebarItemProps, type SidebarItemLinkProps, type SidebarItemButtonProps, type SidebarAccountRowProps, } from './sidebar';
+export { Sidebar, SIDEBAR_ROOT, SIDEBAR_ROOT_BASE, SIDEBAR_ROOT_INSET, SIDEBAR_HEADER_INSET, SIDEBAR_ITEM, SIDEBAR_ITEM_ACTIVE, SIDEBAR_ITEM_INACTIVE, SIDEBAR_SUBMENU_TRIGGER_CHILD_ACTIVE, SIDEBAR_SUBMENU_CHEVRON, SIDEBAR_SUBMENU_LIST_INDENT, type SidebarInset, type SidebarItemProps, type SidebarItemLinkProps, type SidebarItemButtonProps, type SidebarSubmenuProps, type SidebarAccountRowProps, } from './sidebar';

package/dist/src/sections/sidebar/sidebar.d.ts

@@ -44,6 +44,28 @@ export declare const SIDEBAR_ITEM_ACTIVE = "bg-pho-primary text-pho-primary ring
  * on `pho-page`. Icon tracks the label's ink at every state.
  */
 export declare const SIDEBAR_ITEM_INACTIVE: string;
+/**
+ * A submenu's parent row while one of its children is the current page —
+ * primary ink on label and icon, but no surface or ring: the child row
+ * carries the full active chip, the parent only points at it.
+ */
+export declare const SIDEBAR_SUBMENU_TRIGGER_CHILD_ACTIVE = "text-pho-primary *:data-icon:text-pho-primary";
+/**
+ * The trailing chevron on a submenu row — points right at rest, rotates to
+ * point down while the panel is open. Base UI sets `data-panel-open` on the
+ * trigger; the global reduced-motion guard collapses the rotation.
+ */
+export declare const SIDEBAR_SUBMENU_CHEVRON = "ml-auto size-4 shrink-0 transition-transform duration-150 ease-out";
+/**
+ * Indent for a submenu's rows so their labels line up with the parent's
+ * label: parent padding (8px) + icon (16px) + gap (8px) = 32px, minus the
+ * child row's own 8px padding. Without a parent icon the label sits at 8px,
+ * so children step in by one row padding only.
+ */
+export declare const SIDEBAR_SUBMENU_LIST_INDENT: {
+    readonly withIcon: "pl-6";
+    readonly withoutIcon: "pl-4";
+};
 interface RootProps extends ComponentProps<"aside"> {
     /** Outer padding + header spacing. Defaults to `base`. */
     inset?: SidebarInset;
@@ -129,6 +151,51 @@ export type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps;
  * primary surface; `external` opens a new tab and appends a ↗ cue.
  */
 declare function Item({ icon, active, className, children, href, external, ...rest }: SidebarItemProps): import("react").JSX.Element;
+export interface SidebarSubmenuProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | MotionHandlerConflicts> {
+    /** The parent row's label. */
+    label: ReactNode;
+    /** Slot before the label — a component (`IconBook`) or element. */
+    icon?: Slottable;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Called with the next open state on every toggle (user or auto-open). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Open the panel whenever a child row becomes `active`, so a route-based
+     * rail expands the right group on load and on navigation. Defaults to
+     * `true`. The user can still collapse the group afterwards.
+     */
+    openWhenChildActive?: boolean;
+    /**
+     * Force the parent's child-active ink. Normally derived from the
+     * children's `active` flags — set this when the current destination lives
+     * under the group but has no row of its own.
+     */
+    active?: boolean;
+    /** The nested rows — `Sidebar.Item`s, no icon needed. */
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * A nav row that folds open to reveal child rows — `<Item>` metrics on the
+ * trigger, a trailing chevron that turns as the panel opens, and the nested
+ * list indented to the parent's label. Built on `Collapsible`, so the
+ * height animation (and its reduced-motion collapse) is the library's own.
+ *
+ * Children are ordinary `Sidebar.Item`s: they report `active` upward, so the
+ * parent takes primary ink while a child is current and, with
+ * `openWhenChildActive` (default), opens on load without a flash.
+ *
+ * ```tsx
+ * <Sidebar.Submenu label="Platforms" icon={IconMessage}>
+ *   <Sidebar.Item href="/platforms/sms" active>SMS</Sidebar.Item>
+ *   <Sidebar.Item href="/platforms/imessage">iMessage</Sidebar.Item>
+ * </Sidebar.Submenu>
+ * ```
+ */
+declare function Submenu({ label, icon, open: openProp, defaultOpen, onOpenChange, openWhenChildActive, active: activeProp, className, children, ...rest }: SidebarSubmenuProps): import("react").JSX.Element;
 export interface SidebarAccountRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | MotionHandlerConflicts> {
     /** Display name — also the source for fallback initials. */
     name: string;
@@ -165,6 +232,10 @@ declare function AccountRow({ name, avatarSrc, initials, className, ...props }:
  *         <Sidebar.Item href="/" icon={IconHome} active>
  *           Overview
  *         </Sidebar.Item>
+ *         <Sidebar.Submenu label="Platforms" icon={IconMessage}>
+ *           <Sidebar.Item href="/platforms/sms">SMS</Sidebar.Item>
+ *           <Sidebar.Item href="/platforms/email">Email</Sidebar.Item>
+ *         </Sidebar.Submenu>
  *       </Sidebar.List>
  *     </Sidebar.Group>
  *   </Sidebar.Nav>
@@ -186,6 +257,7 @@ export declare const Sidebar: {
     GroupLabel: typeof GroupLabel;
     List: typeof List;
     Item: typeof Item;
+    Submenu: typeof Submenu;
     Footer: typeof Footer;
     AccountRow: typeof AccountRow;
 };

package/dist/src/utils/ghost-search.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+export interface GhostSearchProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "type" | "children"> {
+    value: string;
+    onChange: (value: string) => void;
+}
+/**
+ * A search box with no box: the glyph and the text on the surface's own
+ * line, the way a toolbar band inside a card carries it (a `DataTable`'s
+ * search, a `Trace.Waterfall`'s). Quiet ink, no ring until focus.
+ */
+export declare function GhostSearch({ value, onChange, className, ...props }: GhostSearchProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -37,6 +37,10 @@
       "types": "./dist/src/components/data-table/index.d.ts",
       "import": "./dist/components/data-table.js"
     },
+    "./components/date-range-picker": {
+      "types": "./dist/src/components/date-range-picker/index.d.ts",
+      "import": "./dist/components/date-range-picker.js"
+    },
     "./components/input": {
       "types": "./dist/src/components/input/index.d.ts",
       "import": "./dist/components/input.js"

package/dist/chunks/bar-chart-BJfr3eyd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bar-chart-BJfr3eyd.js","names":[],"sources":["../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":["import { useMemo, useState, type PointerEvent } from \"react\";\nimport { XAxis, YAxis } from \"../chart/axes\";\nimport { chartColor } from \"../chart/color\";\nimport { describeChart, numberFormatter, readValue } from \"../chart/format\";\nimport { ChartLegend } from \"../chart/legend\";\nimport {\n  bucketSpan,\n  bucketTimeFormatter,\n  linearScale,\n  nearestIndex,\n  niceLinearDomain,\n  thinTicks,\n  timeAxisTicks,\n  timeTickFormatter,\n  toTime,\n} from \"../chart/scale\";\nimport { ChartShell, chartLayout } from \"../chart/shell\";\nimport { ChartTooltip } from \"../chart/tooltip\";\nimport type { ChartBaseProps, ChartDatum } from \"../chart/types\";\nimport { useMeasuredWidth } from \"../chart/use-measure\";\n\n/**\n * BarChart — buckets over time as columns: messages a day, requests an\n * hour, deliveries. One series, several side by side, or `stacked` for\n * parts of a whole (inbound / outbound, successful / failed).\n *\n * Design notes:\n * - Marks are thin: a column never fills its slot and never runs past\n *   24px; the leftover is air. The data end is rounded (4px), the\n *   baseline end square — in a stack only the top segment gets the\n *   corners, and a 2px gap in the surface colour separates segments\n *   instead of a stroke.\n * - Gridlines are hairlines one step off the surface; the zero line a\n *   touch stronger. Axis text is description ink at 11px; the y-axis\n *   labels thin themselves to three to five round numbers, the x-axis to\n *   the round times that fit.\n * - Hover lifts the bucket with the ghost wash and opens the tooltip on\n *   it: the bucket's time, every series' value, and the bucket's\n *   `breakdown` when it has one (errors by route).\n * - The figure is `role=\"img\"` with the `label` and a spoken summary; the\n *   legend is real text below the plot, present for two or more series.\n */\n\nconst BAR_MAX = 24;\nconst RADIUS = 4;\n\nexport interface BarChartProps<T extends ChartDatum> extends ChartBaseProps<T> {\n  /** Stack the series in one column per bucket, first series at the bottom. */\n  stacked?: boolean;\n}\n\n/** A column with its data end rounded and its baseline end square. */\nfunction barPath(\n  x: number,\n  top: number,\n  width: number,\n  height: number,\n  end: \"top\" | \"bottom\",\n): string {\n  const r = Math.min(RADIUS, width / 2, height);\n  const bottom = top + height;\n  if (r <= 0) return `M${x},${top}h${width}v${height}h${-width}Z`;\n  if (end === \"top\") {\n    return `M${x},${bottom}v${-(height - r)}a${r},${r} 0 0 1 ${r},${-r}h${width - 2 * r}a${r},${r} 0 0 1 ${r},${r}v${height - r}Z`;\n  }\n  return `M${x},${top}h${width}v${height - r}a${r},${r} 0 0 1 ${-r},${r}h${-(width - 2 * r)}a${r},${r} 0 0 1 ${-r},${-r}Z`;\n}\n\nexport function BarChart<T extends ChartDatum>({\n  data,\n  series,\n  label,\n  description,\n  height = 200,\n  width: fixedWidth,\n  valueFormat,\n  timeFormat,\n  locale,\n  legend,\n  baseline = \"zero\",\n  stacked = false,\n  breakdownTitle,\n  loading,\n  empty = \"Nothing here yet.\",\n  className,\n  ...props\n}: BarChartProps<T>) {\n  const [containerRef, width] = useMeasuredWidth<HTMLDivElement>(fixedWidth);\n  const [hovered, setHovered] = useState<number | null>(null);\n\n  const model = useMemo(() => {\n    const colors = series.map((s, index) => chartColor(s.color, index));\n    const times = data.map((d) => toTime(d.x));\n    const span = bucketSpan(times);\n    const axisFormat = valueFormat ?? numberFormatter(locale, true);\n    const fullFormat = valueFormat ?? numberFormatter(locale);\n    const headingFormat = timeFormat ?? bucketTimeFormatter(locale, span);\n    // Per bucket, per series: the value and, when stacked, where it sits.\n    const columns = data.map((d) => {\n      let positive = 0;\n      let negative = 0;\n      return series.map((s) => {\n        const value = readValue(d, s.key);\n        if (!stacked) return { value, from: 0, to: value ?? 0 };\n        if (value == null || value === 0) {\n          return { value, from: value ?? 0, to: value ?? 0 };\n        }\n        if (value > 0) {\n          const from = positive;\n          positive += value;\n          return { value, from, to: positive };\n        }\n        const from = negative;\n        negative += value;\n        return { value, from, to: negative };\n      });\n    });\n    let min = Infinity;\n    let max = -Infinity;\n    for (const column of columns) {\n      for (const segment of column) {\n        if (segment.value == null) continue;\n        min = Math.min(min, segment.from, segment.to);\n        max = Math.max(max, segment.from, segment.to);\n      }\n    }\n    if (min === Infinity) {\n      min = 0;\n      max = 0;\n    }\n    if (baseline === \"zero\") {\n      min = Math.min(0, min);\n      max = Math.max(0, max);\n    }\n    const y = niceLinearDomain(min, max);\n    const yLabels = y.ticks.map(axisFormat);\n    return {\n      colors,\n      times,\n      span,\n      axisFormat,\n      fullFormat,\n      headingFormat,\n      columns,\n      y,\n      yLabels,\n      described:\n        description ??\n        describeChart({\n          data,\n          series,\n          kind: \"bar\",\n          valueFormat: fullFormat,\n          timeFormat: headingFormat,\n        }),\n    };\n  }, [\n    data,\n    series,\n    stacked,\n    baseline,\n    valueFormat,\n    timeFormat,\n    locale,\n    description,\n  ]);\n\n  const layout = chartLayout(width, height, model.yLabels);\n  const n = data.length;\n  // Buckets are centred in equal bands; positions come from the time\n  // scale so a missing bucket leaves its hole rather than closing up.\n  const halfSpan = model.span > 0 ? model.span / 2 : 1;\n  const t0 = (model.times[0] ?? 0) - halfSpan;\n  const t1 = (model.times[n - 1] ?? 0) + halfSpan;\n  const { left, right } = layout;\n  const xScale = useMemo(\n    () => linearScale([t0, t1], [left, right]),\n    [t0, t1, left, right],\n  );\n  const yScale = linearScale(model.y.domain, [layout.bottom, layout.top]);\n  const band = n > 0 ? layout.innerWidth / n : 0;\n  const gap = band >= 6 ? 2 : band >= 3 ? 1 : 0;\n  const slot = Math.max(1, Math.min(BAR_MAX, band - gap));\n  const groups = stacked ? 1 : series.length;\n  const barWidth = Math.max(\n    1,\n    (slot - (groups - 1) * Math.min(2, gap)) / groups,\n  );\n  const centers = useMemo(\n    () => model.times.map((t) => xScale(t)),\n    [model.times, xScale],\n  );\n\n  const xTicks = useMemo(() => {\n    const innerWidth = right - left;\n    if (n === 0 || innerWidth <= 0) return [];\n    const format = timeTickFormatter(locale);\n    const ticks = timeAxisTicks(\n      model.times[0]!,\n      model.times[n - 1]!,\n      innerWidth,\n    );\n    return thinTicks(ticks, format, innerWidth).map((tick) => ({\n      x: xScale(tick.getTime()),\n      label: format(tick),\n    }));\n  }, [n, model.times, left, right, xScale, locale]);\n\n  const onPointerMove = (event: PointerEvent<SVGSVGElement>) => {\n    if (n === 0) return;\n    const rect = event.currentTarget.getBoundingClientRect();\n    const scale = rect.width > 0 ? width / rect.width : 1;\n    const px = (event.clientX - rect.left) * scale;\n    setHovered(nearestIndex(centers, px));\n  };\n\n  const hoveredDatum = hovered != null ? data[hovered] : undefined;\n  const showLegend = legend ?? series.length > 1;\n  const zeroY = yScale(0);\n\n  return (\n    <ChartShell\n      label={label}\n      description={model.described}\n      height={height}\n      width={width}\n      containerRef={containerRef}\n      loading={loading}\n      empty={empty}\n      showEmpty={n === 0 && !loading}\n      onPlotPointerMove={onPointerMove}\n      onPlotPointerLeave={() => setHovered(null)}\n      className={className}\n      legend={\n        showLegend ? (\n          <ChartLegend\n            items={series.map((s, index) => ({\n              label: s.label,\n              color: model.colors[index]!,\n              kind: \"rect\",\n            }))}\n          />\n        ) : null\n      }\n      tooltip={\n        hovered != null && hoveredDatum != null ? (\n          <ChartTooltip\n            x={centers[hovered]!}\n            width={width}\n            top={layout.top}\n            heading={model.headingFormat(new Date(hoveredDatum.x))}\n            rows={series.map((s, index) => {\n              const value = model.columns[hovered]![index]!.value;\n              return {\n                label: s.label,\n                value: value == null ? \"No data\" : model.fullFormat(value),\n                color: model.colors[index]!,\n                kind: \"rect\",\n              };\n            })}\n            breakdown={hoveredDatum.breakdown}\n            breakdownTitle={breakdownTitle}\n            valueFormat={model.fullFormat}\n          />\n        ) : null\n      }\n      {...props}\n    >\n      <YAxis\n        layout={layout}\n        ticks={model.y.ticks}\n        labels={model.yLabels}\n        scale={yScale}\n      />\n      <XAxis layout={layout} ticks={xTicks} />\n      {hovered != null && hoveredDatum != null && (\n        <rect\n          x={centers[hovered]! - band / 2}\n          y={layout.top}\n          width={band}\n          height={layout.innerHeight}\n          fill=\"var(--background-color-pho-ghost-hover)\"\n        />\n      )}\n      <g data-bars=\"\">\n        {model.columns.map((column, i) => {\n          const cx = centers[i]!;\n          // The topmost drawn segment in each direction gets the corners.\n          let lastPositive = -1;\n          let lastNegative = -1;\n          column.forEach((segment, index) => {\n            if (segment.value == null || segment.value === 0) return;\n            if (segment.value > 0) lastPositive = index;\n            else lastNegative = index;\n          });\n          return column.map((segment, index) => {\n            const { value } = segment;\n            if (value == null || value === 0) return null;\n            const x = stacked\n              ? cx - slot / 2\n              : cx - slot / 2 + index * (barWidth + Math.min(2, gap));\n            const w = stacked ? slot : barWidth;\n            const yFrom = yScale(segment.from);\n            const yTo = yScale(segment.to);\n            let top = Math.min(yFrom, yTo);\n            let h = Math.abs(yFrom - yTo);\n            const positive = value > 0;\n            // Side by side, every column is its own and gets the corners.\n            const outer =\n              !stacked ||\n              (positive ? index === lastPositive : index === lastNegative);\n            // The 2px surface gap: shave 1px off each side of a boundary\n            // between two segments, when the segment can spare it.\n            if (stacked && h > 3) {\n              if (!outer) {\n                if (positive) top += 1;\n                h -= 1;\n              }\n              if (segment.from !== 0) {\n                if (!positive) top += 1;\n                h -= 1;\n              }\n            }\n            return (\n              <path\n                key={series[index]!.key}\n                d={\n                  outer\n                    ? barPath(x, top, w, h, positive ? \"top\" : \"bottom\")\n                    : `M${x},${top}h${w}v${h}h${-w}Z`\n                }\n                fill={model.colors[index]}\n                data-series={series[index]!.key}\n              />\n            );\n          });\n        })}\n      </g>\n      {model.y.domain[0] < 0 && model.y.domain[1] > 0 ? null : (\n        <line\n          x1={layout.left}\n          x2={layout.right}\n          y1={zeroY}\n          y2={zeroY}\n          stroke=\"var(--color-pho-chart-crosshair)\"\n        />\n      )}\n    </ChartShell>\n  );\n}\n\nBarChart.displayName = \"BarChart\";\n"],"mappings":"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"}