@photon-ai/pho-ui 2.16.0 → 3.0.0

package/dist/index.js

@@ -1,140 +1,183 @@
 "use client";
 import { t as s } from "./chunks/cn-ChIgwEl3.js";
 import { t as r } from "./chunks/is-react-component-DSnjtBmo.js";
-import { t as E } from "./chunks/resolve-variant-CcD8iG5l.js";
-import { n as _, t as i } from "./chunks/link-provider-DXzDQ08N.js";
-import { BAR_RISE_PX as e, BLUR_PX as A, EASE_POP as n, EASE_STACK as T, FADE_ENTRANCE as R, FADE_SWAP as I, PRESS_SCALE as p, PRESS_SCALE_ROW as C, RISE_PX as P, SPRING_ENTRANCE as f, SPRING_PRESS as B, SPRING_PRESS_INLINE as N, SPRING_PRESS_QUICK as u, SPRING_SETTLE as O, TRAVEL_LINEAR as L, fadeThroughBlur as l, riseIn as D } from "./motion.js";
-import { n as V, r as G, t as U } from "./chunks/use-press-pulse-IbNstUT0.js";
-import { n as h, t as F } from "./chunks/use-copy-D6JwKUll.js";
+import { t as e } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as E, t as S } from "./chunks/link-provider-DXzDQ08N.js";
+import { BAR_RISE_PX as n, BLUR_PX as m, EASE_POP as I, EASE_STACK as T, FADE_ENTRANCE as p, FADE_SWAP as A, PRESS_SCALE as R, PRESS_SCALE_ROW as l, RISE_PX as C, SPRING_ENTRANCE as B, SPRING_PRESS as f, SPRING_PRESS_INLINE as N, SPRING_PRESS_QUICK as P, SPRING_SETTLE as u, TRAVEL_LINEAR as L, fadeThroughBlur as D, riseIn as c } from "./motion.js";
+import { n as V, r as d, t as U } from "./chunks/use-press-pulse-IbNstUT0.js";
+import { n as F, t as b } from "./chunks/use-copy-D6JwKUll.js";
 import "./utils.js";
-import { a as k, c as b, d as W, i as X, l as Y, n as Z, o as v, r as w, s as y, t as H, u as K } from "./chunks/button-CdqS_t5a.js";
-import { a as z, c as J, i as Q, l as j, n as q, o as $, r as aa, s as sa, t as ta } from "./chunks/error-D0yoFxCv.js";
-import { o as oa } from "./chunks/data-table-CHLJfGkS.js";
-import { n as Sa, t as _a } from "./chunks/copy-button-B_B15mEi.js";
-import { a as ma, c as ea, i as Aa, n as na, o as Ta, r as Ra, s as Ia, t as pa } from "./chunks/sidebar-DVzZsCts.js";
-import { t as Pa } from "./chunks/input-DjvZoF8v.js";
-import { i as Ba, n as Na, r as ua, t as Oa } from "./chunks/filter-bar-Cjjq38xo.js";
-import { n as la, t as Da } from "./chunks/code-block-CdozzaHM.js";
-import { n as Va, t as Ga } from "./chunks/stat-hnNqjWVG.js";
-import { t as da } from "./chunks/close-button-GvqWbLl0.js";
-import { t as Fa } from "./chunks/input-group-fc9_jD4d.js";
-import { n as Ma, t as ka } from "./chunks/card-DSW3Uhag.js";
-import { n as Wa, t as Xa } from "./chunks/dialog-BxKACOj5.js";
-import { i as Za, n as va, r as wa, t as ya } from "./chunks/status-view-C8tabjDu.js";
-import { a as Ka, c as xa, d as za, f as Ja, i as Qa, l as ja, m as qa, n as $a, o as as, p as ss, r as ts, s as rs, t as os, u as Es } from "./chunks/basic-page-CMJuM5iA.js";
-import { i as _s, n as is, r as ms, t as es } from "./chunks/legend-C0mU7dqd.js";
+import { a as h, c as v, d as k, i as w, l as W, n as x, o as H, r as z, s as K, t as y, u as X } from "./chunks/button-CdqS_t5a.js";
+import { a as Z, c as j, i as J, l as Q, n as q, o as $, r as aa, s as sa, t as ta } from "./chunks/error-BAQgnde7.js";
+import { A as oa, B as ea, C as ia, D as Ea, E as Sa, F as _a, I as na, L as ma, M as Ia, N as Ta, O as pa, P as Aa, R as Ra, S as la, T as Ca, _ as Ba, a as fa, b as Na, c as Pa, d as ua, f as La, g as Da, h as ca, i as Oa, j as Va, k as da, l as Ua, m as Ga, n as Fa, o as ba, p as Ma, r as ga, s as ha, t as va, u as ka, v as wa, w as Wa, x as xa, y as Ha, z as za } from "./chunks/trace-Ba1RMBfk.js";
+import { n as ya, t as Xa } from "./chunks/date-picker-Bwa6J4ik.js";
+import { n as Za, t as ja } from "./chunks/copy-button-B_B15mEi.js";
+import { a as Qa, c as qa, d as $a, i as as, l as ss, n as ts, o as rs, r as os, s as es, t as is, u as Es } from "./chunks/sidebar-DRPe5CAh.js";
+import { t as _s } from "./chunks/input-DjvZoF8v.js";
+import { i as ms, n as Is, r as Ts, t as ps } from "./chunks/filter-bar-D9lBBr4z.js";
+import { a as Rs } from "./chunks/data-table-DcwCgXJU.js";
+import { n as Cs, t as Bs } from "./chunks/code-block-BuDIo8Q0.js";
+import { n as Ns, t as Ps } from "./chunks/stat-hnNqjWVG.js";
+import { t as Ls } from "./chunks/calendar-4OFiCLAv.js";
+import { t as cs } from "./chunks/close-button-GvqWbLl0.js";
+import { t as Vs } from "./chunks/input-group-fc9_jD4d.js";
+import { n as Us, t as Gs } from "./chunks/card-DhDwtSi9.js";
+import { n as bs, t as Ms } from "./chunks/dialog-BwfUFn6B.js";
+import { i as hs, n as vs, r as ks, t as ws } from "./chunks/status-view-C8tabjDu.js";
+import { a as xs, c as Hs, d as zs, f as Ks, i as ys, l as Xs, m as Ys, n as Zs, o as js, p as Js, r as Qs, s as qs, t as $s, u as at } from "./chunks/basic-page-CYDwfVjO.js";
+import { i as tt, n as rt, r as ot, t as et } from "./chunks/legend-C0mU7dqd.js";
 import "./components/chart.js";
-import { t as Ts } from "./chunks/bar-chart-BJfr3eyd.js";
-import { t as Is } from "./chunks/line-chart-CUR3AxrR.js";
-import { i as Cs, n as Ps, r as fs, t as Bs } from "./chunks/log-list-0AXnjFrk.js";
-import { t as us } from "./chunks/description-list-C-mwe4ki.js";
-import { a as Ls, i as ls, n as Ds, r as cs, t as Vs } from "./chunks/trace-CbH0IohX.js";
+import { t as St } from "./chunks/bar-chart-DIALC2_z.js";
+import { t as nt } from "./chunks/line-chart-VuMYKzW3.js";
+import { i as It, n as Tt, r as pt, t as At } from "./chunks/log-list-BERiO4UJ.js";
+import { t as lt } from "./chunks/description-list-C-mwe4ki.js";
 export {
-  os as AUTO_SAVE_DELAY_MS,
-  e as BAR_RISE_PX,
-  $a as BASIC_PAGE_CALLOUT,
-  ts as BASIC_PAGE_CARD,
-  Qa as BASIC_PAGE_ITEM,
-  Ka as BASIC_PAGE_ITEM_PANEL,
-  as as BASIC_PAGE_ITEM_PANEL_DIVIDED,
-  rs as BASIC_PAGE_ROW,
-  A as BLUR_PX,
-  H as BUTTON_COLORS,
-  Z as BUTTON_SHAPES,
-  w as BUTTON_SIZES,
-  X as BUTTON_VARIANTS,
-  Ts as BarChart,
-  xa as BasicPage,
-  k as Button,
-  v as ButtonLink,
-  ka as CARD_SURFACE,
-  ms as CHART_SLOTS,
-  ja as CONDENSE_BAR_ENTER,
-  Es as CONDENSE_BAR_RISE_PX,
-  za as CONDENSE_BAR_TRAVEL,
+  $s as AUTO_SAVE_DELAY_MS,
+  n as BAR_RISE_PX,
+  Zs as BASIC_PAGE_CALLOUT,
+  Qs as BASIC_PAGE_CARD,
+  ys as BASIC_PAGE_ITEM,
+  xs as BASIC_PAGE_ITEM_PANEL,
+  js as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  qs as BASIC_PAGE_ROW,
+  m as BLUR_PX,
+  y as BUTTON_COLORS,
+  x as BUTTON_SHAPES,
+  z as BUTTON_SIZES,
+  w as BUTTON_VARIANTS,
+  St as BarChart,
+  Hs as BasicPage,
+  h as Button,
+  H as ButtonLink,
+  Gs as CARD_SURFACE,
+  ot as CHART_SLOTS,
+  Xs as CONDENSE_BAR_ENTER,
+  at as CONDENSE_BAR_RISE_PX,
+  zs as CONDENSE_BAR_TRAVEL,
   U as CONTROL_PRESS_SCALE,
   V as CONTROL_PRESS_SPRING,
-  _a as COPY_BUTTON_SIZES,
-  F as COPY_FEEDBACK_MS,
-  Ma as Card,
-  es as ChartLegend,
-  is as ChartSwatch,
-  da as CloseButton,
-  Da as CodeBlock,
-  Sa as CopyButton,
-  us as DescriptionList,
-  Xa as Dialog,
-  n as EASE_POP,
+  ja as COPY_BUTTON_SIZES,
+  b as COPY_FEEDBACK_MS,
+  Ls as Calendar,
+  Us as Card,
+  et as ChartLegend,
+  rt as ChartSwatch,
+  cs as CloseButton,
+  Bs as CodeBlock,
+  Za as CopyButton,
+  Xa as DatePicker,
+  lt as DescriptionList,
+  Ms as Dialog,
+  I as EASE_POP,
   T as EASE_STACK,
-  y as EFFECT_BUTTON_SIZES,
-  b as EffectButton,
-  Y as EffectButtonLink,
+  K as EFFECT_BUTTON_SIZES,
+  v as EffectButton,
+  W as EffectButtonLink,
   ta as Error,
   q as ErrorView,
-  R as FADE_ENTRANCE,
-  I as FADE_SWAP,
-  Oa as FILTER_DATE_PRESETS,
-  Na as FilterBar,
+  p as FADE_ENTRANCE,
+  A as FADE_SWAP,
+  ps as FILTER_DATE_PRESETS,
+  la as FULL_VIEW,
+  Is as FilterBar,
   aa as GENERIC_ERROR_TITLE,
-  Pa as Input,
-  Fa as InputGroup,
-  Is as LineChart,
-  i as LinkProvider,
-  Bs as LogList,
-  p as PRESS_SCALE,
-  C as PRESS_SCALE_ROW,
-  P as RISE_PX,
-  pa as SIDEBAR_HEADER_INSET,
-  na as SIDEBAR_ITEM,
-  Ra as SIDEBAR_ITEM_ACTIVE,
-  Aa as SIDEBAR_ITEM_INACTIVE,
-  ma as SIDEBAR_ROOT,
-  Ta as SIDEBAR_ROOT_BASE,
-  Ia as SIDEBAR_ROOT_INSET,
-  f as SPRING_ENTRANCE,
-  B as SPRING_PRESS,
+  La as GEN_AI_KINDS,
+  _s as Input,
+  Vs as InputGroup,
+  nt as LineChart,
+  S as LinkProvider,
+  At as LogList,
+  ia as MIN_VIEW_WIDTH,
+  R as PRESS_SCALE,
+  l as PRESS_SCALE_ROW,
+  C as RISE_PX,
+  is as SIDEBAR_HEADER_INSET,
+  ts as SIDEBAR_ITEM,
+  os as SIDEBAR_ITEM_ACTIVE,
+  as as SIDEBAR_ITEM_INACTIVE,
+  Qa as SIDEBAR_ROOT,
+  rs as SIDEBAR_ROOT_BASE,
+  es as SIDEBAR_ROOT_INSET,
+  qa as SIDEBAR_SUBMENU_CHEVRON,
+  ss as SIDEBAR_SUBMENU_LIST_INDENT,
+  Es as SIDEBAR_SUBMENU_TRIGGER_CHILD_ACTIVE,
+  B as SPRING_ENTRANCE,
+  f as SPRING_PRESS,
   N as SPRING_PRESS_INLINE,
-  u as SPRING_PRESS_QUICK,
-  O as SPRING_SETTLE,
-  ya as STATUS_VIEW,
-  va as STATUS_VIEW_COPY,
-  wa as STATUS_VIEW_SIZES,
-  ea as Sidebar,
-  Ga as Stat,
-  Va as StatGroup,
-  Za as StatusView,
+  P as SPRING_PRESS_QUICK,
+  u as SPRING_SETTLE,
+  ws as STATUS_VIEW,
+  vs as STATUS_VIEW_COPY,
+  ks as STATUS_VIEW_SIZES,
+  $a as Sidebar,
+  Ha as SpanPrimitive,
+  Ps as Stat,
+  Ns as StatGroup,
+  hs as StatusView,
   L as TRAVEL_LINEAR,
-  Vs as Trace,
-  K as buttonVariants,
-  Q as capitalizeFirst,
-  _s as chartColor,
+  va as Trace,
+  Wa as allCollapsed,
+  Ca as ancestorIds,
+  Ma as attribute,
+  Ga as attributeText,
+  Oa as axisTicks,
+  fa as barGeometry,
+  Sa as buildSpanTree,
+  X as buttonVariants,
+  J as capitalizeFirst,
+  tt as chartColor,
+  Ea as clampView,
   s as cn,
-  oa as createColumns,
-  z as describeError,
-  W as effectButtonVariants,
-  l as fadeThroughBlur,
-  Ja as formToasts,
-  Ds as formatDuration,
-  ua as formatFilterValue,
-  cs as formatTick,
+  pa as collapseAllIds,
+  da as collapseOneLevel,
+  Rs as createColumns,
+  oa as deriveSpanTree,
+  Z as describeError,
+  k as effectButtonVariants,
+  Va as expandOneLevel,
+  D as fadeThroughBlur,
+  Ia as filterSpans,
+  Fa as footerTotals,
+  Ks as formToasts,
+  ya as formatDateLabel,
+  ba as formatDuration,
+  Ts as formatFilterValue,
+  ha as formatTick,
+  ca as genAIKind,
   $ as httpReasonPhrase,
   sa as httpStatusExplanation,
-  Ba as isFilterSet,
-  J as isProblem,
+  ms as isFilterSet,
+  Ta as isFullView,
+  j as isProblem,
   r as isReactComponent,
-  ls as layoutTrace,
-  Ps as logStatusColor,
-  fs as logStatusLabel,
-  Ls as niceStep,
-  j as parseProblem,
-  E as resolveVariant,
-  D as riseIn,
-  la as tokenizeJson,
-  Cs as truncateMiddle,
-  ss as useAutoSave,
-  qa as useCondense,
-  h as useCopy,
-  Wa as useDialogPending,
-  _ as useLinkComponent,
-  G as usePressPulse
+  Pa as labeledTicks,
+  Tt as logStatusColor,
+  pt as logStatusLabel,
+  Ua as niceStep,
+  ka as normalizeSpans,
+  Aa as panView,
+  Q as parseProblem,
+  Da as peerService,
+  e as resolveVariant,
+  c as riseIn,
+  Ba as spanDecorationIcon,
+  ua as spanDuration,
+  wa as spanPills,
+  _a as spanTimelineBarVars,
+  Cs as tokenizeJson,
+  ga as traceBulletInset,
+  na as traceRange,
+  It as truncateMiddle,
+  Js as useAutoSave,
+  Ys as useCondense,
+  F as useCopy,
+  bs as useDialogPending,
+  E as useLinkComponent,
+  d as usePressPulse,
+  Na as useSpan,
+  xa as useSpanTree,
+  ma as viewFraction,
+  Ra as viewToRange,
+  za as visibleSpans,
+  ea as zoomView
 };

package/dist/primitives.js

@@ -40,24 +40,24 @@ import "./primitives/toggle.js";
 import "./primitives/toggle-group.js";
 import "./primitives/toolbar.js";
 import "./primitives/tooltip.js";
+export * from "@base-ui/react/popover";
 export * from "@base-ui/react/field";
 export * from "@base-ui/react/separator";
 export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/scroll-area";
-export * from "@base-ui/react/popover";
+export * from "@base-ui/react/collapsible";
 export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/form";
 export * from "@base-ui/react/menu";
 export * from "@base-ui/react/checkbox";
 export * from "@base-ui/react/checkbox-group";
-export * from "@base-ui/react/toast";
 export * from "@base-ui/react/tooltip";
+export * from "@base-ui/react/toast";
 export * from "@base-ui/react/toggle";
 export * from "@base-ui/react/accordion";
 export * from "@base-ui/react/alert-dialog";
 export * from "@base-ui/react/autocomplete";
 export * from "@base-ui/react/button";
-export * from "@base-ui/react/collapsible";
 export * from "@base-ui/react/combobox";
 export * from "@base-ui/react/context-menu";
 export * from "@base-ui/react/csp-provider";

package/dist/sections/basic-page.js

@@ -1,20 +1,20 @@
 "use client";
-import { o as s } from "../chunks/data-table-CHLJfGkS.js";
-import { a as E, c as a, d as C, f as S, i as o, l as I, m as e, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-CMJuM5iA.js";
+import { a as s } from "../chunks/data-table-DcwCgXJU.js";
+import { a as E, c as a, d as C, f as S, i as I, l as e, m as o, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-CYDwfVjO.js";
 export {
   D as AUTO_SAVE_DELAY_MS,
   B as BASIC_PAGE_CALLOUT,
   r as BASIC_PAGE_CARD,
-  o as BASIC_PAGE_ITEM,
+  I as BASIC_PAGE_ITEM,
   E as BASIC_PAGE_ITEM_PANEL,
   P as BASIC_PAGE_ITEM_PANEL_DIVIDED,
   t as BASIC_PAGE_ROW,
   a as BasicPage,
-  I as CONDENSE_BAR_ENTER,
+  e as CONDENSE_BAR_ENTER,
   R as CONDENSE_BAR_RISE_PX,
   C as CONDENSE_BAR_TRAVEL,
   s as createColumns,
   S as formToasts,
   N as useAutoSave,
-  e as useCondense
+  o as useCondense
 };

package/dist/sections/sidebar.js

@@ -1,12 +1,15 @@
 "use client";
-import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-DVzZsCts.js";
+import { a as I, c as _, d as S, i as R, l as A, n as B, o as T, r as a, s, t as D, u as N } from "../chunks/sidebar-DRPe5CAh.js";
 export {
-  T as SIDEBAR_HEADER_INSET,
-  R as SIDEBAR_ITEM,
+  D as SIDEBAR_HEADER_INSET,
+  B as SIDEBAR_ITEM,
   a as SIDEBAR_ITEM_ACTIVE,
-  A as SIDEBAR_ITEM_INACTIVE,
+  R as SIDEBAR_ITEM_INACTIVE,
   I as SIDEBAR_ROOT,
-  S as SIDEBAR_ROOT_BASE,
+  T as SIDEBAR_ROOT_BASE,
   s as SIDEBAR_ROOT_INSET,
-  _ as Sidebar
+  _ as SIDEBAR_SUBMENU_CHEVRON,
+  A as SIDEBAR_SUBMENU_LIST_INDENT,
+  N as SIDEBAR_SUBMENU_TRIGGER_CHILD_ACTIVE,
+  S as Sidebar
 };

package/dist/src/components/calendar/calendar.d.ts

@@ -0,0 +1,36 @@
+import { DayPickerProps } from 'react-day-picker';
+export type CalendarProps = DayPickerProps & {
+    /**
+     * The word on the button back to today, used as its label and its tooltip.
+     * @default "Today"
+     */
+    todayLabel?: string;
+};
+/**
+ * Calendar built on React DayPicker — a month of days to read or to choose
+ * from. Pass `mode` to make it selectable (`single`, `multiple`, `range`);
+ * without one it is a static month. Every DayPicker prop passes through, so
+ * `numberOfMonths`, `disabled`, `startMonth` / `endMonth`, `captionLayout`,
+ * and the locale props all work as documented upstream.
+ *
+ * Pho supplies the whole class map, so the library's stylesheet is neither
+ * imported nor needed. `classNames` and `components` merge over Pho's,
+ * element by element.
+ *
+ * The caption is clickable: month and year each open a jump list, so a date
+ * two years out is two taps rather than twenty-four. Pass
+ * `captionLayout="label"` for a caption that only reads, and `startMonth` /
+ * `endMonth` to say how far the year list should reach. Between the month
+ * arrows sits a way back to today's month.
+ *
+ * Selection follows DayPicker's own contract: hand it `onSelect` and the
+ * calendar is controlled, so `selected` has to come with it. Leave both off
+ * and it keeps the selection itself.
+ *
+ * For a calendar behind a field — a trigger that shows the chosen date and
+ * opens this in a popover — use `DatePicker`.
+ */
+export declare function Calendar({ className, classNames, components, showOutsideDays, captionLayout, startMonth, endMonth, todayLabel, ...props }: CalendarProps): import("react").JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}

package/dist/src/components/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { Calendar, type CalendarProps } from './calendar';
+export type { DateRange, Matcher } from 'react-day-picker';

package/dist/src/components/card/card.d.ts

@@ -9,7 +9,11 @@ import { ComponentProps, Ref } from 'react';
  *   than the control default (`base`).
  * - Vertical rhythm: `pt-5` / `pb-4`, `gap-4` between parts. Parts carry
  *   `px-5`, so a child without padding (an image, a table, a `Separator`)
- *   runs edge-to-edge on its own.
+ *   runs edge-to-edge on its own. A `Stat` / `Stat.Group` already pads
+ *   its tiles — when it is the first or last child the matching inset
+ *   drops so the row sits flush on the card edge. A chart as the first
+ *   child drops the top inset the same way; the plot keeps its own
+ *   bottom band.
  * - No size or color axes. A card is chrome, not a signal — content sets the
  *   tone. Sizing belongs to the layout that places the card.
  */

package/dist/src/components/chart/scale.d.ts

@@ -5,8 +5,13 @@ export declare function linearScale(domain: readonly [number, number], range: re
 /**
  * A y domain on round numbers with three to five ticks, the last tick on
  * or above the data's high end so the top of the plot is labelled.
+ *
+ * When `integer` is set — or when both ends are whole numbers — the step
+ * stays ≥ 1 so a count axis never labels 0.5 / 1.5.
  */
-export declare function niceLinearDomain(min: number, max: number): {
+export declare function niceLinearDomain(min: number, max: number, options?: {
+    integer?: boolean;
+}): {
     domain: [number, number];
     ticks: number[];
 };

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

@@ -1,9 +1,10 @@
 import { ComponentProps, ReactNode, Ref } from 'react';
 /**
  * Code Block — a read-only panel for a request body, a response, an
- * event's JSON. Mono text on the code surface, a title row with a wrap
- * toggle and a copy control, and past `maxLines` a fold that shows the
- * first lines with a button for the rest.
+ * event's JSON. Mono text on the code surface, a title row with expand,
+ * wrap, and copy controls. Past `maxLines` the body either scrolls
+ * inside that height (`overflow="scroll"`, the default) or folds with a
+ * footer button (`overflow="expand"`).
  *
  * Design notes:
  * - Wide lines scroll sideways inside the panel; the page never does.
@@ -15,6 +16,7 @@ import { ComponentProps, ReactNode, Ref } from 'react';
  * - A body that isn't a string (an object) is pretty-printed as JSON.
  */
 export type CodeBlockLanguage = "json" | "text";
+export type CodeBlockOverflow = "scroll" | "expand";
 export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "children"> {
     /** The text. An object is pretty-printed as JSON (two-space indent). */
     code?: string | object | null;
@@ -22,13 +24,30 @@ export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "c
     language?: CodeBlockLanguage;
     /** The title row's words — "Request body", "Response". */
     title?: ReactNode;
-    /** Past this many lines the panel folds. @default 30 */
+    /** Past this many lines the panel folds or clips. @default 30 */
     maxLines?: number;
+    /**
+     * How a long body is shown past `maxLines`. `scroll` clips to that
+     * height and scrolls inside, with an expand toggle in the title row.
+     * `expand` folds and shows a footer button.
+     * @default "scroll"
+     */
+    overflow?: CodeBlockOverflow;
     /** Wrap long lines (controlled). */
     wrap?: boolean;
     /** Wrap long lines at first (uncontrolled). @default false */
     defaultWrap?: boolean;
     onWrapChange?: (wrap: boolean) => void;
+    /** The expand toggle in the title row when `overflow` is `scroll`. @default true */
+    expandToggle?: boolean;
+    /** The wrap toggle in the title row. @default true */
+    wrapToggle?: boolean;
+    /**
+     * A gutter of line numbers. Off by default; turn on for a long
+     * payload (about twenty lines or more).
+     * @default false
+     */
+    lineNumbers?: boolean;
     /** The copy control in the title row. @default true */
     copy?: boolean;
     /** What the panel says with no code. @default "Nothing to show." */
@@ -37,7 +56,7 @@ export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "c
     actions?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function CodeBlock({ code, language, title, maxLines, wrap: wrapProp, defaultWrap, onWrapChange, copy, empty, actions, className, ...props }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, title, maxLines, overflow, wrap: wrapProp, defaultWrap, onWrapChange, expandToggle, wrapToggle, lineNumbers, copy, empty, actions, className, ...props }: CodeBlockProps): import("react").JSX.Element;
 export declare namespace CodeBlock {
     var displayName: string;
 }

package/dist/src/components/code-block/index.d.ts

@@ -1,2 +1,2 @@
-export { CodeBlock, type CodeBlockProps, type CodeBlockLanguage, } from './code-block';
+export { CodeBlock, type CodeBlockProps, type CodeBlockLanguage, type CodeBlockOverflow, } from './code-block';
 export { tokenizeJson, type JsonToken, type JsonTokenType, } from './tokenize-json';

package/dist/src/components/data-table/data-table.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode, Ref } from 'react';
+import { ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
 import { ColumnDef, RowData, SortingState } from '@tanstack/react-table';
 /**
  * DataTable — a table of records with column semantics: sortable headers,
@@ -32,6 +32,10 @@ import { ColumnDef, RowData, SortingState } from '@tanstack/react-table';
  *   `contain: inline-size` keeps the table's intrinsic width out of the
  *   page's — a host that sizes to content (a scroll area's fit-content
  *   pane, a grid's auto column) would otherwise grow to the widest row.
+ *   Left with no width of its own, the frame takes its container's
+ *   (`w-full`); a shrink-to-fit host (a flex row) would collapse it.
+ *   `layout="fixed"` is the other way out: columns size from the frame,
+ *   and a long cell truncates instead of stretching the table.
  *
  * Reach for it when a list needs column semantics — sorting, aligned
  * figures, several fields side by side. A list where each row is one
@@ -41,6 +45,13 @@ import { ColumnDef, RowData, SortingState } from '@tanstack/react-table';
 export interface DataTableColumnMeta {
     /** Cell alignment — `end` for figures (right-aligned, tabular). */
     align?: "start" | "end";
+    /**
+     * Extra classes on every `th` and `td` in this column. With
+     * `layout="fixed"`, size a short column here (`w-24`) and leave the
+     * flexible ones unsaid — they share what remains. Prefer this over
+     * `nth-child` width hacks on the table's `className`.
+     */
+    className?: string;
 }
 /**
  * The feature set every `DataTable` runs on — sorting with the stock sort
@@ -66,6 +77,22 @@ declare const features: {
     columnMeta: DataTableColumnMeta;
 };
 export type DataTableFeatures = typeof features;
+/** Body row height — header stays `h-10` on every size. */
+export declare const DATA_TABLE_SIZES: {
+    sm: {
+        classes: string;
+        description: string;
+    };
+    md: {
+        classes: string;
+        description: string;
+    };
+    lg: {
+        classes: string;
+        description: string;
+    };
+};
+export type DataTableSize = keyof typeof DATA_TABLE_SIZES;
 /** A column definition for a `DataTable` of `TData` rows. */
 export type DataTableColumn<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>;
 /**
@@ -114,6 +141,12 @@ export interface DataTableProps<TData extends RowData> extends Omit<ComponentPro
      * still in flight) and that row stays plain.
      */
     rowHref?: (row: TData) => string | null | undefined;
+    /**
+     * A click on the row (not on a link, button, or other control). The
+     * table still activates `rowHref` unless the handler calls
+     * `preventDefault`.
+     */
+    onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement> | KeyboardEvent<HTMLTableRowElement>) => void;
     /** The row whose page is open (its id) — it keeps the wash. */
     current?: string | null;
     /**
@@ -173,6 +206,24 @@ export interface DataTableProps<TData extends RowData> extends Omit<ComponentPro
     loading?: boolean | number;
     /** What the body says when there are no rows. */
     empty?: ReactNode;
+    /**
+     * How columns take width. `auto` (the default) sizes them from their
+     * content — a long cell grows the table and the frame scrolls sideways.
+     * `fixed` sizes them from the table's width (`table-layout: fixed`):
+     * short columns take a width hint on `meta.className`, the rest share
+     * what remains, and cells get `min-w-0` so an inner `truncate` can
+     * shrink. `width: 0` (`w-0`) is not a content-size hint here — fixed
+     * layout treats it as a real zero — so give a short column a real
+     * width (`w-24`) rather than the auto-layout shrink-wrap trick.
+     */
+    layout?: "auto" | "fixed";
+    /**
+     * Body row height. `md` (the default) is 48px — one line of body type.
+     * `sm` is 40px, the header's own height, for a dense list scanned more
+     * than read. `lg` is 56px, for a two-line cell (a number and a caption)
+     * that would crowd `md`. The header row stays 40px on every size.
+     */
+    size?: DataTableSize;
     ref?: Ref<HTMLDivElement>;
 }
 /**
@@ -211,18 +262,8 @@ export interface TableSearchStore {
 }
 export declare function createTableSearchStore(): TableSearchStore;
 export declare const TableSearchContext: import('react').Context<TableSearchStore | null>;
-export interface GhostSearchProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "type" | "children"> {
-    value: string;
-    onChange: (value: string) => void;
-}
-/**
- * The search's ghost face — a magnifier and a bare field, quiet ink on a
- * text line, no box around it. What a table wears in its own toolbar
- * band; `BasicPage.Search variant="ghost"` is the same face wherever a
- * page wants it. Presentational: hand it the value and the setter.
- */
-export declare function GhostSearch({ value, onChange, className, ...props }: GhostSearchProps): import("react").JSX.Element;
+export { GhostSearch, type GhostSearchProps } from '../../utils/ghost-search';
 /** Same chrome as `BasicPage.Card`, minus its dividers — rows draw their own. */
 declare const DATA_TABLE_SURFACE = "rounded-base border border-pho-secondary bg-pho-primary";
-declare function DataTable<TData extends RowData>({ columns, data, getRowId, rowHref, current, selected, onSelectedChange, defaultSort, sort, onSortChange, search, toolbar, group, animateHeight, loading, empty, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, getRowId, rowHref, onRowClick, current, selected, onSelectedChange, defaultSort, sort, onSortChange, search, toolbar, group, animateHeight, loading, empty, layout, size, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;
 export { DataTable, DATA_TABLE_SURFACE };