@photon-ai/pho-ui 2.12.0 → 2.14.0

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

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+import { TraceSpan } from './layout';
+export interface TraceRootProps extends Omit<ComponentProps<"div">, "children" | "onSelect" | "title"> {
+    spans: readonly TraceSpan[];
+    /** The span whose details are open — it keeps the wash. */
+    selectedId?: string | null;
+    /** Rows select on click when given. */
+    onSelect?: (id: string) => void;
+    /** Spans folded at first (uncontrolled). */
+    defaultCollapsed?: readonly string[];
+    /** Spans folded (controlled). */
+    collapsed?: readonly string[];
+    onCollapsedChange?: (ids: string[]) => void;
+    /** A title row above the axis — "Waterfall". Omit for none. */
+    title?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Root({ spans, selectedId, onSelect, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, title, className, ...props }: TraceRootProps): import("react").JSX.Element;
+export type TraceLogLevel = "debug" | "info" | "warn" | "error";
+export interface TraceLog {
+    id?: string;
+    /** When, in ms after the trace's start. */
+    offsetMs: number;
+    level?: TraceLogLevel;
+    message: string;
+    /** The span it was written in, when known — its name shows after. */
+    spanId?: string;
+}
+export interface TraceLogsProps extends Omit<ComponentProps<"section">, "children" | "title"> {
+    logs?: readonly TraceLog[] | null;
+    /** The spans, to name the one each line was written in. */
+    spans?: readonly TraceSpan[];
+    /** @default "Logs" */
+    title?: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * The log lines that belong to the trace, each at its offset from the
+ * start, in the mono face. Renders nothing when there are none — a
+ * trace with no logs shows no empty block.
+ */
+declare function Logs({ logs, spans, title, className, ...props }: TraceLogsProps): import("react").JSX.Element | null;
+/**
+ * ```tsx
+ * <Trace.Root spans={spans} selectedId={id} onSelect={setId} title="Waterfall" />
+ * <Trace.Logs logs={logs} spans={spans} />
+ * ```
+ */
+export declare const Trace: {
+    Root: typeof Root;
+    Logs: typeof Logs;
+};
+export {};

package/dist/src/index.d.ts

@@ -16,3 +16,13 @@ export * from './components/status-view';
 export * from './components/error';
 export * from './sections/sidebar';
 export * from './sections/basic-page';
+export * from './components/chart';
+export * from './components/stat';
+export * from './components/bar-chart';
+export * from './components/line-chart';
+export * from './components/copy-button';
+export * from './components/filter-bar';
+export * from './components/log-list';
+export * from './components/description-list';
+export * from './components/code-block';
+export * from './components/trace';

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

@@ -236,9 +236,9 @@ declare function Header({ enter, className, ...props }: BasicPageHeaderProps): i
 /**
  * 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 title row, flush with the card edge below. Put it inside
- * `Header` after the text; with a `Search` present it stands to the
- * search's right.
+ * 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.
  */
 declare function HeaderAction({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;

package/dist/src/utils/index.d.ts

@@ -3,3 +3,4 @@ export { isReactComponent } from './is-react-component';
 export { resolveVariant, type VariantDef, type VariantMap, } from './resolve-variant';
 export { LinkProvider, useLinkComponent, type LinkComponent, } from './link-provider';
 export { usePressPulse, CONTROL_PRESS_SCALE, CONTROL_PRESS_SPRING, } from './use-press-pulse';
+export { useCopy, COPY_FEEDBACK_MS } from './use-copy';

package/dist/src/utils/use-copy.d.ts

@@ -0,0 +1,14 @@
+/** How long a copy control reads "Copied" before it settles back. */
+export declare const COPY_FEEDBACK_MS = 1500;
+/**
+ * Copy text to the clipboard and remember, briefly, that it happened —
+ * the state behind every copy affordance in Pho (the id in a log row,
+ * the value in a description list, a code panel's button). `copy`
+ * resolves to whether the write landed; `copied` holds for
+ * `COPY_FEEDBACK_MS` so the control can swap its glyph and its live
+ * region can announce. SSR-safe: the clipboard is only touched on call.
+ */
+export declare function useCopy(resetMs?: number): {
+    copied: boolean;
+    copy: (text: string) => Promise<boolean>;
+};

package/dist/utils.js

@@ -3,14 +3,17 @@ import { t as r } from "./chunks/cn-ChIgwEl3.js";
 import { t } from "./chunks/is-react-component-DSnjtBmo.js";
 import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
 import { n as i, t as n } from "./chunks/link-provider-DXzDQ08N.js";
-import { n as P, r as R, t as S } from "./chunks/use-press-pulse-IbNstUT0.js";
+import { n as C, r as P, t as S } from "./chunks/use-press-pulse-IbNstUT0.js";
+import { n as R, t as _ } from "./chunks/use-copy-D6JwKUll.js";
 export {
   S as CONTROL_PRESS_SCALE,
-  P as CONTROL_PRESS_SPRING,
+  C as CONTROL_PRESS_SPRING,
+  _ as COPY_FEEDBACK_MS,
   n as LinkProvider,
   r as cn,
   t as isReactComponent,
   m as resolveVariant,
+  R as useCopy,
   i as useLinkComponent,
-  R as usePressPulse
+  P as usePressPulse
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -407,6 +407,46 @@
     "./primitives/tooltip": {
       "types": "./dist/src/primitives/tooltip.d.ts",
       "import": "./dist/primitives/tooltip.js"
+    },
+    "./components/chart": {
+      "types": "./dist/src/components/chart/index.d.ts",
+      "import": "./dist/components/chart.js"
+    },
+    "./components/stat": {
+      "types": "./dist/src/components/stat/index.d.ts",
+      "import": "./dist/components/stat.js"
+    },
+    "./components/bar-chart": {
+      "types": "./dist/src/components/bar-chart/index.d.ts",
+      "import": "./dist/components/bar-chart.js"
+    },
+    "./components/line-chart": {
+      "types": "./dist/src/components/line-chart/index.d.ts",
+      "import": "./dist/components/line-chart.js"
+    },
+    "./components/copy-button": {
+      "types": "./dist/src/components/copy-button/index.d.ts",
+      "import": "./dist/components/copy-button.js"
+    },
+    "./components/filter-bar": {
+      "types": "./dist/src/components/filter-bar/index.d.ts",
+      "import": "./dist/components/filter-bar.js"
+    },
+    "./components/log-list": {
+      "types": "./dist/src/components/log-list/index.d.ts",
+      "import": "./dist/components/log-list.js"
+    },
+    "./components/description-list": {
+      "types": "./dist/src/components/description-list/index.d.ts",
+      "import": "./dist/components/description-list.js"
+    },
+    "./components/code-block": {
+      "types": "./dist/src/components/code-block/index.d.ts",
+      "import": "./dist/components/code-block.js"
+    },
+    "./components/trace": {
+      "types": "./dist/src/components/trace/index.d.ts",
+      "import": "./dist/components/trace.js"
     }
   },
   "peerDependencies": {
@@ -420,6 +460,9 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.5",
+    "@types/d3-array": "3.2.2",
+    "@types/d3-shape": "3.2.0",
+    "@types/d3-time": "3.0.4",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -442,6 +485,9 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "country-flag-icons": "^1.6.20",
+    "d3-array": "3.2.4",
+    "d3-shape": "3.2.0",
+    "d3-time": "3.1.0",
     "libphonenumber-js": "^1.13.11",
     "motion": "^13.1.0",
     "tailwind-merge": "^3.6.0"

package/src/styles/theme.css

@@ -436,4 +436,85 @@
       opacity: 0.45;
     }
   }
+
+  /* ============================== Charts ============================== */
+  /* charts — series colours for BarChart / LineChart. An ORDERED set:
+     assign slot 1, 2, 3… in series order and never cycle past 6 (fold the
+     tail into "Other"). Validated with the dataviz six checks in both modes
+     against the card (#111) and page (#000 / #fff) surfaces: lightness band,
+     chroma floor, adjacent-pair CVD ΔE ≥ 8, normal-vision ΔE ≥ 15, 3:1 on
+     the surface. Slots 1–2 are the site's sky and orange (orange stepped
+     from L 0.70 to 0.66 so a bar clears 3:1 on white); 3–6 are purple,
+     olive, magenta, indigo. Dark values are the same hues re-stepped into
+     the dark band (L 0.48–0.67), not a flip. */
+  --color-pho-chart-1: light-dark(
+    oklch(0.6 0.101 239.2),
+    oklch(0.66 0.11 239.2)
+  );
+  --color-pho-chart-2: oklch(0.66 0.15 57.8);
+  --color-pho-chart-3: light-dark(oklch(0.62 0.2 307.5), oklch(0.66 0.2 307.5));
+  --color-pho-chart-4: oklch(0.66 0.14 106);
+  --color-pho-chart-5: light-dark(oklch(0.62 0.2 350), oklch(0.65 0.2 350));
+  --color-pho-chart-6: oklch(0.639 0.146 269.6);
+  /* Status series — successful vs failed. The state text inks, so a failed
+     segment is the same red as a Failed badge. Reserved: a series wears
+     these only when it MEANS good / bad, never as "series 4". */
+  --color-pho-chart-success: light-dark(
+    oklch(0.549 0.136 149.3),
+    oklch(0.735 0.162 150.5)
+  );
+  --color-pho-chart-error: light-dark(
+    oklch(0.565 0.212 20.2),
+    oklch(0.696 0.198 14.9)
+  );
+  /* The monochrome series — a one-series chart on the site's black/white. */
+  --color-pho-chart-ink: light-dark(oklch(0 0 0 / 0.8), oklch(1 0 0 / 0.8));
+  /* Chart furniture: gridlines one step off the surface, the crosshair and
+     baseline a touch stronger. Hairlines, solid, recessive. */
+  --color-pho-chart-grid: light-dark(oklch(0 0 0 / 0.06), oklch(1 0 0 / 0.08));
+  --color-pho-chart-crosshair: light-dark(
+    oklch(0 0 0 / 0.2),
+    oklch(1 0 0 / 0.25)
+  );
+
+  /* ==================== Animation: chart mount ==================== */
+  /* A chart surfaces once on mount — opacity only, nothing moves. The
+     global reduced-motion guard in pho.css collapses it. */
+  --animate-pho-chart-in: pho-chart-in 300ms ease-out both;
+
+  @keyframes pho-chart-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  /* ============================ Code (logs) ============================ */
+  /* logs: the read-only code panel (CodeBlock) and its JSON tokens. The
+     surface is a well one step off the card: the page gray in light, a
+     step below the card in dark. Syntax inks come from the accent set
+     above, darkened for white and lifted (and softened) for dark so a
+     body reads at the mono size in both. `--color-*` so text-, bg-, and
+     border- utilities all exist. */
+  --color-pho-code-bg: light-dark(oklch(0.985 0 0), oklch(0.13 0 0));
+  --color-pho-code-fg: light-dark(oklch(0 0 0 / 0.85), oklch(1 0 0 / 0.85));
+  --color-pho-code-key: light-dark(
+    oklch(0.499 0.142 263.2),
+    oklch(0.74 0.11 263.2)
+  );
+  --color-pho-code-string: light-dark(
+    oklch(0.52 0.13 149.2),
+    oklch(0.78 0.13 149.2)
+  );
+  --color-pho-code-number: light-dark(
+    oklch(0.58 0.15 57.8),
+    oklch(0.8 0.13 71.4)
+  );
+  --color-pho-code-keyword: light-dark(
+    oklch(0.55 0.19 307.5),
+    oklch(0.78 0.15 307.5)
+  );
+  --color-pho-code-punctuation: light-dark(
+    oklch(0 0 0 / 0.55),
+    oklch(1 0 0 / 0.55)
+  );
 }