@photon-ai/pho-ui 2.16.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.
@@ -94,6 +98,13 @@ export interface BasicPageRootProps extends ComponentProps<"div"> {
      */
     prerendered?: boolean;
 }
+/** 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.
@@ -268,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>;
@@ -852,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;
 }
 /**
@@ -868,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.
@@ -930,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;
@@ -941,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.16.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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"}