@photon-ai/pho-ui 4.7.1 → 4.9.0

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

@@ -1,5 +1,5 @@
-import { ComponentProps, PointerEvent, ReactNode, RefObject } from 'react';
-/** The inner box the marks draw in, once the axes have taken their bands. */
+import { ComponentProps, ReactNode, RefObject } from 'react';
+/** The bands around the plot, and the inner box the marks draw in. */
 export interface ChartLayout {
     width: number;
     height: number;
@@ -9,6 +9,13 @@ export interface ChartLayout {
     bottom: number;
     innerWidth: number;
     innerHeight: number;
+    /** The same bands in the shape visx takes. */
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
 }
 /** The plot's box for a measured width and the y-axis labels it must fit. */
 export declare function chartLayout(width: number, height: number, yLabels: ReadonlyArray<string>): ChartLayout;
@@ -18,25 +25,25 @@ export interface ChartShellProps extends Omit<ComponentProps<"div">, "children">
     /** The figure's spoken summary. */
     description: string;
     height: number;
-    /** The measured width; 0 before the browser has measured. */
-    width: number;
     containerRef: RefObject<HTMLDivElement | null>;
     legend?: ReactNode;
-    tooltip?: ReactNode;
     loading?: boolean;
     empty?: ReactNode;
     /** The frame says `empty` instead of drawing. */
     showEmpty?: boolean;
-    /** The pointer over the plot — the chart snaps to the nearest bucket. */
-    onPlotPointerMove?: (event: PointerEvent<SVGSVGElement>) => void;
-    onPlotPointerLeave?: () => void;
+    /** What stands in for the plot while the first data is on its way. */
+    placeholder?: ReactNode;
+    /**
+     * The figure itself — the svg and its tooltip. Presentational to
+     * assistive tech: the frame's label and description speak for it.
+     */
     children?: ReactNode;
 }
 /**
  * The frame every chart draws in: a fixed-height plot box holding the
- * SVG (`role="img"`, labelled and described for assistive tech), the
- * tooltip layer over it, the legend on its own line below. Width comes
- * from the parent; `height` covers the plot and the x-axis band, so a
- * card never grows a nested scroll.
+ * figure (`role="img"`, labelled and described for assistive tech), the
+ * legend on its own line below. Width comes from the parent; `height`
+ * covers the plot and the x-axis band, so a card never grows a nested
+ * scroll.
  */
-export declare function ChartShell({ label, description, height, width, containerRef, legend, tooltip, loading, empty, showEmpty, onPlotPointerMove, onPlotPointerLeave, className, children, ...props }: ChartShellProps): import("react").JSX.Element;
+export declare function ChartShell({ label, description, height, containerRef, legend, loading, empty, showEmpty, placeholder, className, children, ...props }: ChartShellProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { ChartLayout } from './shell';
+/**
+ * Bones in the shape of a chart, for a first load with nothing to hold:
+ * the frame's own coordinate system — hairline rows, a baseline, a label
+ * bone at every row on the left and a few along the bottom — with a
+ * dozen columns standing on the baseline in the plot's box. A refetch
+ * never shows this; the chart keeps its last render at half opacity.
+ */
+export declare function ChartSkeleton({ layout }: {
+    layout: ChartLayout;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { XYChartTheme } from '@visx/xychart';
+/**
+ * The visx theme for a chart's furniture: gridlines one step off the
+ * surface, description-ink ticks, and the series colours in part order
+ * as the fallback palette. Everything is a CSS custom property, so the
+ * theme follows light and dark without a second copy.
+ */
+export declare function buildPhoTheme(colors: ReadonlyArray<string>): XYChartTheme;

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

@@ -12,7 +12,7 @@ export interface ChartBreakdownItem {
 }
 /**
  * One bucket on the time axis. Series values sit beside `x` under the
- * keys the `series` name — `{ x, inbound: 12, outbound: 4 }`.
+ * keys the series name — `{ x, inbound: 12, outbound: 4 }`.
  */
 export interface ChartDatum {
     /** When the bucket starts: a `Date` or epoch milliseconds. */
@@ -27,6 +27,8 @@ export interface ChartDatum {
 export type ChartValueKey<T> = {
     [K in keyof T]-?: K extends "x" | "breakdown" ? never : T[K] extends number | null | undefined ? K : never;
 }[keyof T] & string;
+/** Straight segments, or a monotone curve that never overshoots a sample. */
+export type ChartCurve = "linear" | "monotone";
 export interface ChartSeries<T extends ChartDatum = ChartDatum> {
     /** The field of each datum this series plots. */
     key: ChartValueKey<T>;
@@ -65,7 +67,7 @@ export interface ChartBaseProps<T extends ChartDatum> extends Omit<ComponentProp
     locale?: string;
     /** Show the legend. On for two or more series; a lone series is named by its title. */
     legend?: boolean;
-    /** Where the y-axis starts: at zero, or at the data's low end. @default "zero" */
+    /** Where the y-axis starts: at zero, or at the data's low end. Bars always start at zero. @default "zero" */
     baseline?: "zero" | "auto";
     /** A heading over a datum's `breakdown` list in the tooltip. */
     breakdownTitle?: ReactNode;
@@ -74,3 +76,38 @@ export interface ChartBaseProps<T extends ChartDatum> extends Omit<ComponentProp
     /** What the frame says with no buckets to draw. */
     empty?: ReactNode;
 }
+/**
+ * The composable root: the frame, the scales, the axes, the tooltip and
+ * the legend, drawn around whatever `Chart.Bar` and `Chart.Line` parts
+ * it is given.
+ */
+export interface ChartProps<T extends ChartDatum> extends Omit<ChartBaseProps<T>, "series"> {
+    /** The series: `Chart.Bar` and `Chart.Line` parts, in drawing (and legend) order. */
+    children?: ReactNode;
+    /** Stack the bar parts in one column per bucket, first part at the bottom. */
+    stacked?: boolean;
+}
+/** One bar series: the field it plots and its name. */
+export interface ChartBarProps {
+    /** The field of each datum this series plots. */
+    dataKey: string;
+    /** The name in the legend and the tooltip. */
+    label: string;
+    /** Defaults to the next categorical slot, in part order. */
+    color?: ChartColor;
+}
+/** One line series: the field it plots, its name, and how it is drawn. */
+export interface ChartLineProps {
+    /** The field of each datum this series plots. */
+    dataKey: string;
+    /** The name in the legend and the tooltip. */
+    label: string;
+    /** Defaults to the next categorical slot, in part order. */
+    color?: ChartColor;
+    /** A dashed stroke — a min / max beside an average. */
+    dashed?: boolean;
+    /** @default "linear" */
+    curve?: ChartCurve;
+    /** A soft fill under the line, at 10% of its colour. */
+    area?: boolean;
+}

package/dist/src/components/chart/use-measure.d.ts

@@ -1,4 +1,5 @@
-import { RefObject } from 'react';
+import { useEffect, RefObject } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 /**
  * The width of the element the ref lands on, kept current through a
  * ResizeObserver. Nothing runs on the server: the first render is 0 wide

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

@@ -1,7 +1,8 @@
 import { ComponentProps, ReactNode, Ref } from 'react';
+import { CodeBlockLanguage } from './languages';
 /**
  * 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 expand,
+ * event's JSON, an install command. 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"`).
@@ -10,19 +11,30 @@ import { ComponentProps, ReactNode, Ref } from 'react';
  * - Wide lines scroll sideways inside the panel; the page never does.
  *   Wrapping is a toggle (`wrap` / `defaultWrap`), off by default so a
  *   body reads the way it was sent.
- * - `language="json"` colors keys, strings, numbers, and keywords with a
- *   built-in tokenizer — no highlighter library at runtime — on the
- *   `--color-pho-code-*` tokens, which carry light and dark.
+ * - `language` colors the text with Shiki's grammar for it, fetched on
+ *   first use, on the `--color-pho-code-*` tokens, which carry light and
+ *   dark. JSON has a synchronous face too — a built-in tokenizer paints
+ *   it in the first render, and the grammar agrees with it — so a body
+ *   never flashes plain. Other languages read plain for the frame their
+ *   grammar takes to arrive.
+ * - Without a `title` there is no title row: the controls float over the
+ *   panel's top-right corner, the way a snippet on a page wears a copy
+ *   button.
  * - 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;
-    /** `json` colors the text; `text` leaves it plain. @default "text" */
+    /**
+     * What the text is, so the panel can color it: `json`, `typescript`,
+     * `bash`, `python`, … or `text` for none. @default "text"
+     */
     language?: CodeBlockLanguage;
-    /** The title row's words — "Request body", "Response". */
+    /**
+     * The title row's words — "Request body", "Response". Without one the
+     * row goes and the controls float over the top-right corner.
+     */
     title?: ReactNode;
     /** Past this many lines the panel folds or clips. @default 30 */
     maxLines?: number;
@@ -38,9 +50,9 @@ export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "c
     /** 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 */
+    /** The expand toggle when `overflow` is `scroll`. @default true */
     expandToggle?: boolean;
-    /** The wrap toggle in the title row. @default true */
+    /** The wrap toggle. @default true */
     wrapToggle?: boolean;
     /**
      * A gutter of line numbers. Off by default; turn on for a long
@@ -48,11 +60,11 @@ export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "c
      * @default false
      */
     lineNumbers?: boolean;
-    /** The copy control in the title row. @default true */
+    /** The copy control. @default true */
     copy?: boolean;
     /** What the panel says with no code. @default "Nothing to show." */
     empty?: ReactNode;
-    /** More controls in the title row, before the built-in ones. */
+    /** More controls beside the built-in ones, before them. */
     actions?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -0,0 +1,24 @@
+import { CodeLine } from './tokens';
+/** Fetch a language's grammar ahead of the first body that needs it. */
+export declare function preloadLanguage(language: string): Promise<void>;
+/** Whether `language` can be tokenized right now, without waiting. */
+export declare function isLanguageReady(language: string): boolean;
+/**
+ * Tokenize a body with a grammar that is already loaded. `null` when the
+ * language is plain text or its grammar is not here yet — see
+ * `preloadLanguage` / `highlight`.
+ */
+export declare function highlightSync(code: string, language: string): CodeLine[] | null;
+/** Plain lines — what a body reads as with no grammar. */
+export declare function plainLines(code: string): CodeLine[];
+/**
+ * Tokenize a body, fetching the highlighter and the grammar first if
+ * need be. A language the panel does not know resolves to plain lines.
+ */
+export declare function highlight(code: string, language: string): Promise<CodeLine[]>;
+/**
+ * The highlighted lines of a body, or `null` while its grammar is on the
+ * way (and always for plain text). A grammar already here highlights in
+ * the same render, no flash.
+ */
+export declare function useHighlight(code: string, language: string): CodeLine[] | null;

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

@@ -1,2 +1,5 @@
-export { CodeBlock, type CodeBlockProps, type CodeBlockLanguage, type CodeBlockOverflow, } from './code-block';
+export { CodeBlock, type CodeBlockProps, type CodeBlockOverflow, } from './code-block';
+export { CODE_GRAMMARS, LANGUAGE_ALIASES, resolveGrammar, type CodeBlockLanguage, type CodeGrammar, type CodeLanguageAlias, } from './languages';
+export { highlight, highlightSync, isLanguageReady, preloadLanguage, useHighlight, } from './highlight';
+export { CODE_TOKEN_CLASS, type CodeLine, type CodeToken, type CodeTokenType, } from './tokens';
 export { tokenizeJson, type JsonToken, type JsonTokenType, } from './tokenize-json';

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

@@ -0,0 +1,64 @@
+/**
+ * The languages a code panel can color, each a grammar fetched on first
+ * use — a page that shows JSON never downloads the TypeScript grammar.
+ * Keyed by the name Shiki knows the grammar by; `LANGUAGE_ALIASES` lets a
+ * panel say `ts` or `sh`.
+ */
+export declare const CODE_GRAMMARS: {
+    json: () => Promise<typeof import("@shikijs/langs/json")>;
+    jsonc: () => Promise<typeof import("@shikijs/langs/jsonc")>;
+    javascript: () => Promise<typeof import("@shikijs/langs/javascript")>;
+    typescript: () => Promise<typeof import("@shikijs/langs/typescript")>;
+    jsx: () => Promise<typeof import("@shikijs/langs/jsx")>;
+    tsx: () => Promise<typeof import("@shikijs/langs/tsx")>;
+    shellscript: () => Promise<typeof import("@shikijs/langs/shellscript")>;
+    python: () => Promise<typeof import("@shikijs/langs/python")>;
+    swift: () => Promise<typeof import("@shikijs/langs/swift")>;
+    go: () => Promise<typeof import("@shikijs/langs/go")>;
+    ruby: () => Promise<typeof import("@shikijs/langs/ruby")>;
+    php: () => Promise<typeof import("@shikijs/langs/php")>;
+    java: () => Promise<typeof import("@shikijs/langs/java")>;
+    kotlin: () => Promise<typeof import("@shikijs/langs/kotlin")>;
+    csharp: () => Promise<typeof import("@shikijs/langs/csharp")>;
+    rust: () => Promise<typeof import("@shikijs/langs/rust")>;
+    html: () => Promise<typeof import("@shikijs/langs/html")>;
+    css: () => Promise<typeof import("@shikijs/langs/css")>;
+    xml: () => Promise<typeof import("@shikijs/langs/xml")>;
+    yaml: () => Promise<typeof import("@shikijs/langs/yaml")>;
+    toml: () => Promise<typeof import("@shikijs/langs/toml")>;
+    dotenv: () => Promise<typeof import("@shikijs/langs/dotenv")>;
+    sql: () => Promise<typeof import("@shikijs/langs/sql")>;
+    graphql: () => Promise<typeof import("@shikijs/langs/graphql")>;
+    http: () => Promise<typeof import("@shikijs/langs/http")>;
+    markdown: () => Promise<typeof import("@shikijs/langs/markdown")>;
+    diff: () => Promise<typeof import("@shikijs/langs/diff")>;
+};
+export type CodeGrammar = keyof typeof CODE_GRAMMARS;
+/** Shorter names, and the ones people reach for first. */
+export declare const LANGUAGE_ALIASES: {
+    readonly js: "javascript";
+    readonly ts: "typescript";
+    readonly bash: "shellscript";
+    readonly sh: "shellscript";
+    readonly shell: "shellscript";
+    readonly zsh: "shellscript";
+    readonly py: "python";
+    readonly rb: "ruby";
+    readonly kt: "kotlin";
+    readonly cs: "csharp";
+    readonly rs: "rust";
+    readonly yml: "yaml";
+    readonly md: "markdown";
+    readonly htm: "html";
+};
+export type CodeLanguageAlias = keyof typeof LANGUAGE_ALIASES;
+/**
+ * What `language` accepts: a grammar, an alias, or `text` for none. Plain
+ * text is the default — a panel colors only what it is told the shape of.
+ */
+export type CodeBlockLanguage = "text" | CodeGrammar | CodeLanguageAlias;
+/**
+ * The grammar behind a `language`, or `null` for plain text and names the
+ * panel does not know (which read as text instead of throwing).
+ */
+export declare function resolveGrammar(language: string): CodeGrammar | null;

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

@@ -0,0 +1,18 @@
+import { ThemeRegistrationRaw } from 'shiki/core';
+import { CodeTokenType } from './tokens';
+/**
+ * Pho's Shiki theme — not a palette but a routing table. Every TextMate
+ * scope resolves to one of the panel's token kinds, and each kind's
+ * "color" is the design token's own variable, so the theme has no light
+ * and dark of its own: the `--color-pho-code-*` tokens carry both, and
+ * the renderer turns each color back into the kind's class. Only the
+ * kinds a body needs to read — keys, strings, numbers, keywords,
+ * punctuation, comments, calls, types. Operators, variables, and
+ * everything else stay in the panel's ink.
+ */
+export declare const PHO_THEME_NAME = "pho";
+/** The color a token kind "has" in the theme: its token's variable. */
+export declare function tokenColor(type: Exclude<CodeTokenType, "plain">): string;
+/** The token kind behind a Shiki color, or `plain` for the panel's ink. */
+export declare function tokenTypeOf(color: string | undefined): CodeTokenType;
+export declare const phoTheme: ThemeRegistrationRaw;

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

@@ -0,0 +1,14 @@
+/**
+ * The token vocabulary a code panel colors with — one class per kind, on
+ * the `--color-pho-code-*` tokens, which carry light and dark. The JSON
+ * tokenizer speaks the first five; Shiki's grammars reach the rest.
+ */
+export type CodeTokenType = "key" | "string" | "number" | "keyword" | "punctuation" | "comment" | "function" | "type" | "plain";
+export interface CodeToken {
+    type: CodeTokenType;
+    text: string;
+}
+/** One line of a highlighted body. */
+export type CodeLine = CodeToken[];
+/** The class a token kind wears; `plain` wears the panel's own ink. */
+export declare const CODE_TOKEN_CLASS: Record<CodeTokenType, string | undefined>;

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

@@ -0,0 +1,25 @@
+/**
+ * The table chrome `DataTable` and `Trace.Logs` share, kept apart from
+ * `data-table.tsx` so a consumer of the classes alone (the trace's log
+ * list) does not carry the table engine into its chunk.
+ *
+ * - The frame is `BasicPage.Card`'s box minus its dividers; rows draw
+ *   their own.
+ * - A header cell is description ink at the row's size, regular weight,
+ *   40px tall on every size: a label row, not a banner. Its padding is the
+ *   cell's own (`px-5` in a table, the row's in a grid), so it stays out.
+ * - The body's top border is the line under the header; the rows divide
+ *   themselves.
+ */
+/** Same chrome as `BasicPage.Card`, minus its dividers — rows draw their own. */
+export declare const DATA_TABLE_SURFACE = "rounded-base border border-pho-secondary bg-pho-primary";
+/** A header cell: ink, height, weight. Pad it where it sits. */
+export declare const DATA_TABLE_HEADER_CELL = "text-pho-description h-10 text-left align-middle font-normal whitespace-nowrap";
+/** The body: the line under the header, and one between every two rows. */
+export declare const DATA_TABLE_BODY = "divide-pho-secondary border-pho-secondary divide-y border-t";
+export type DataTableSize = "sm" | "base" | "lg";
+/**
+ * The type each size sets on the table, so cells and header move together:
+ * 13px dense, the body's 14px, 16px for rows that carry two lines.
+ */
+export declare const DATA_TABLE_TEXT: Record<DataTableSize, string>;

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

@@ -1,5 +1,6 @@
 import { ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
 import { ColumnDef, RowData, SortingState } from '@tanstack/react-table';
+import { DATA_TABLE_SURFACE } from './chrome';
 /**
  * DataTable — a table of records with column semantics: sortable headers,
  * aligned cells, rows that are links into a subpage. TanStack Table (v9)
@@ -265,7 +266,5 @@ export interface TableSearchStore {
 export declare function createTableSearchStore(): TableSearchStore;
 export declare const TableSearchContext: import('react').Context<TableSearchStore | null>;
 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, 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 };

package/dist/src/components/line-chart/line-chart.d.ts

@@ -1,11 +1,20 @@
-import { ChartBaseProps, ChartDatum } from '../chart/types';
+import { ChartBaseProps, ChartCurve, ChartDatum } from '../chart/types';
+/**
+ * LineChart — series over time as lines: latency percentiles, one line
+ * per destination, a min / average / max where the bounds are dashed.
+ *
+ * A preset on `Chart`: the `series` array becomes one `Chart.Line` per
+ * entry, in order; `curve` applies to every line and `area` washes the
+ * surface under the first. The marks, axes, tooltip and legend are the
+ * root's.
+ */
 export interface LineChartProps<T extends ChartDatum> extends ChartBaseProps<T> {
     /** Straight segments, or a monotone curve that never overshoots a sample. @default "linear" */
-    curve?: "linear" | "monotone";
+    curve?: ChartCurve;
     /** A soft fill under the first series (a lone one, as a rule). */
     area?: boolean;
 }
-export declare function LineChart<T extends ChartDatum>({ data, series, label, description, height, width: fixedWidth, valueFormat, timeFormat, locale, legend, baseline, curve, area, breakdownTitle, loading, empty, className, ...props }: LineChartProps<T>): import("react").JSX.Element;
+export declare function LineChart<T extends ChartDatum>({ series, curve, area, ...props }: LineChartProps<T>): import("react").JSX.Element;
 export declare namespace LineChart {
     var displayName: string;
 }

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

@@ -94,16 +94,27 @@ export interface TraceLogsProps extends Omit<ComponentProps<"section">, "childre
     logs?: readonly TraceLog[] | null;
     /** The spans, to name the one each line was written in. */
     spans?: readonly Pick<TraceWaterfallSpan, "id" | "name">[];
-    /** @default "Logs" */
+    /**
+     * Lines not here yet: the header over bone rows, `true` for five or a
+     * count. The list is `aria-busy` meanwhile.
+     */
+    loading?: boolean | number;
+    /**
+     * @deprecated The card head this named is gone — `DataTable`'s header
+     * row replaced it. Kept so an existing caller still compiles; renders
+     * as a visually-hidden caption instead of disappearing.
+     */
     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.
+ * start, in the mono face, under `DataTable`'s header row (its `sm`
+ * size: description ink, regular weight, 40px on one baseline). 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;
+declare function Logs({ logs, spans, loading, title, className, ...props }: TraceLogsProps): import("react").JSX.Element | null;
 export declare const Trace: {
     Waterfall: typeof Waterfall & {
         Footer: typeof WaterfallFooter;

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

@@ -88,6 +88,12 @@ export declare const EASE_STACK = "cubic-bezier(0.22, 1, 0.36, 1)";
 export declare const RISE_PX = 12;
 /** Rise distance for the condensed bar — it comes from nearer still. */
 export declare const BAR_RISE_PX = -8;
+/**
+ * How far a view that widens starts inside its frame, and one that
+ * narrows starts outside it — a chart's range switch. A tenth: enough to
+ * read as the picture opening or closing, never as a zoom.
+ */
+export declare const SPAN_SCALE = 0.9;
 /** Press depth for small controls. */
 export declare const PRESS_SCALE = 0.96;
 /** Press depth for rows and full-size surfaces — shallower. */

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

@@ -2,6 +2,7 @@ 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';
+import { CodeBlock } from '../../components/code-block';
 /**
  * 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
@@ -1051,6 +1052,7 @@ export declare const BasicPage: {
     Aside: typeof Aside;
     Search: typeof Search;
     Table: typeof DataTable;
+    Code: typeof CodeBlock;
     CondenseScope: typeof CondenseScope;
     Breadcrumbs: typeof Breadcrumbs;
     Crumb: typeof Crumb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "4.7.1",
+  "version": "4.9.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -501,7 +501,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "@shikijs/langs": "4.4.3",
     "@tanstack/react-table": "^9.2.3",
+    "@visx/xychart": "^4.0.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "country-flag-icons": "^1.6.20",
@@ -511,6 +513,7 @@
     "libphonenumber-js": "^1.13.11",
     "motion": "^13.1.0",
     "react-day-picker": "^10.0.1",
+    "shiki": "4.4.3",
     "tailwind-merge": "^3.6.0"
   },
   "scripts": {

package/src/styles/theme.css

@@ -488,13 +488,16 @@
     }
   }
 
-  /* ============================ Code (logs) ============================ */
-  /* logs: the read-only code panel (CodeBlock) and its JSON tokens. The
+  /* ============================== Code ============================== */
+  /* The read-only code panel (CodeBlock) and its syntax 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. */
+     body reads at the mono size in both. Eight kinds and no more — key,
+     string, number, keyword, punctuation, comment, function, type — so a
+     body reads as prose with a few things picked out, not as confetti;
+     Shiki's grammars route every scope to one of them. `--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(
@@ -517,4 +520,14 @@
     oklch(0 0 0 / 0.55),
     oklch(1 0 0 / 0.55)
   );
+  /* A comment steps back further than punctuation: read it on purpose. */
+  --color-pho-code-comment: light-dark(
+    oklch(0 0 0 / 0.42),
+    oklch(1 0 0 / 0.42)
+  );
+  /* Calls in the olive of a function name (the yellow, grounded for
+     white); types in a teal off the sky. Both one step quieter than the
+     keys and keywords around them. */
+  --color-pho-code-function: light-dark(oklch(0.5 0.1 90), oklch(0.86 0.1 105));
+  --color-pho-code-type: light-dark(oklch(0.52 0.09 215), oklch(0.8 0.1 200));
 }

package/dist/chunks/IconArrowsMinimize-BfPUGuCB.js

@@ -1,75 +0,0 @@
-"use client";
-import { t as e } from "./createReactComponent-BqCmnqfX.js";
-var a = [
-  ["path", {
-    d: "M16 4l4 0l0 4",
-    key: "svg-0"
-  }],
-  ["path", {
-    d: "M14 10l6 -6",
-    key: "svg-1"
-  }],
-  ["path", {
-    d: "M8 20l-4 0l0 -4",
-    key: "svg-2"
-  }],
-  ["path", {
-    d: "M4 20l6 -6",
-    key: "svg-3"
-  }],
-  ["path", {
-    d: "M16 20l4 0l0 -4",
-    key: "svg-4"
-  }],
-  ["path", {
-    d: "M14 14l6 6",
-    key: "svg-5"
-  }],
-  ["path", {
-    d: "M8 4l-4 0l0 4",
-    key: "svg-6"
-  }],
-  ["path", {
-    d: "M4 4l6 6",
-    key: "svg-7"
-  }]
-], t = e("outline", "arrows-maximize", "ArrowsMaximize", a), l = [
-  ["path", {
-    d: "M5 9l4 0l0 -4",
-    key: "svg-0"
-  }],
-  ["path", {
-    d: "M3 3l6 6",
-    key: "svg-1"
-  }],
-  ["path", {
-    d: "M5 15l4 0l0 4",
-    key: "svg-2"
-  }],
-  ["path", {
-    d: "M3 21l6 -6",
-    key: "svg-3"
-  }],
-  ["path", {
-    d: "M19 9l-4 0l0 -4",
-    key: "svg-4"
-  }],
-  ["path", {
-    d: "M15 9l6 -6",
-    key: "svg-5"
-  }],
-  ["path", {
-    d: "M19 15l-4 0l0 4",
-    key: "svg-6"
-  }],
-  ["path", {
-    d: "M15 15l6 6",
-    key: "svg-7"
-  }]
-], i = e("outline", "arrows-minimize", "ArrowsMinimize", l);
-export {
-  t as n,
-  i as t
-};
-
-//# sourceMappingURL=IconArrowsMinimize-BfPUGuCB.js.map

package/dist/chunks/IconArrowsMinimize-BfPUGuCB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconArrowsMinimize-BfPUGuCB.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.46.0_react@19.2.8/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowsMaximize.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.46.0_react@19.2.8/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowsMinimize.mjs"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.46.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M16 4l4 0l0 4\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M14 10l6 -6\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M8 20l-4 0l0 -4\", \"key\": \"svg-2\" }], [\"path\", { \"d\": \"M4 20l6 -6\", \"key\": \"svg-3\" }], [\"path\", { \"d\": \"M16 20l4 0l0 -4\", \"key\": \"svg-4\" }], [\"path\", { \"d\": \"M14 14l6 6\", \"key\": \"svg-5\" }], [\"path\", { \"d\": \"M8 4l-4 0l0 4\", \"key\": \"svg-6\" }], [\"path\", { \"d\": \"M4 4l6 6\", \"key\": \"svg-7\" }]];\nconst IconArrowsMaximize = createReactComponent(\"outline\", \"arrows-maximize\", \"ArrowsMaximize\", __iconNode);\n\nexport { __iconNode, IconArrowsMaximize as default };\n//# sourceMappingURL=IconArrowsMaximize.mjs.map\n","/**\n * @license @tabler/icons-react v3.46.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M5 9l4 0l0 -4\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M3 3l6 6\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M5 15l4 0l0 4\", \"key\": \"svg-2\" }], [\"path\", { \"d\": \"M3 21l6 -6\", \"key\": \"svg-3\" }], [\"path\", { \"d\": \"M19 9l-4 0l0 -4\", \"key\": \"svg-4\" }], [\"path\", { \"d\": \"M15 9l6 -6\", \"key\": \"svg-5\" }], [\"path\", { \"d\": \"M19 15l-4 0l0 4\", \"key\": \"svg-6\" }], [\"path\", { \"d\": \"M15 15l6 6\", \"key\": \"svg-7\" }]];\nconst IconArrowsMinimize = createReactComponent(\"outline\", \"arrows-minimize\", \"ArrowsMinimize\", __iconNode);\n\nexport { __iconNode, IconArrowsMinimize as default };\n//# sourceMappingURL=IconArrowsMinimize.mjs.map\n"],"x_google_ignoreList":[0,1],"mappings":";;AASA,IAAMA,IAAa;AAAA,EAAC,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAiB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAe,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAmB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAmB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAiB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAY,KAAO;AAAA,EAAQ,CAAC;AAAC,GACna,IAAqB,EAAqB,WAAW,mBAAmB,kBAAkBA,CAAU,GCDpG,IAAa;AAAA,EAAC,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAiB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAY,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAiB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAmB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAmB,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAC,GACla,IAAqB,EAAqB,WAAW,mBAAmB,kBAAkB,CAAU"}