@photon-ai/pho-ui 2.13.0 → 2.15.0

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

@@ -158,7 +158,9 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
      * the two form one upward stream and never overlap. Combines with
      * `morphId` for a mid-level page (a list that is itself a subpage): the
      * word rises in when the page is entered from its parent and flies in
-     * from the back link when returned to from its own subpage. Skipped
+     * from the back link when returned to from its own subpage. Played once
+     * per visit: a title taking over from a loading page already on screen
+     * (its skeleton's, or the one painted before React) stays put. Skipped
      * under reduced motion.
      */
     enter?: boolean;
@@ -181,15 +183,16 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
  * `shrink-0` siblings of a `min-w-0 truncate` label inside a `flex min-w-0`
  * row so they stay visible.
  */
-declare function Title({ id, morphId, enter, trailing, className, children, ...props }: BasicPageTitleProps): import("react").JSX.Element;
+declare function Title({ id, morphId, enter: enterProp, trailing, className, children, ...props }: BasicPageTitleProps): import("react").JSX.Element;
 export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
     /**
-     * Play the page entrance on mount (the default). `false` renders the
-     * stack at rest, for a loading state that is already on screen — painted
-     * as static HTML before the bundle, re-rendered as-is on React's first
-     * commit, then shown by the page until its data arrives — so that none of
-     * those mounts moves it; the real stack, with its entrance, takes over
-     * with the data.
+     * Whether mounting plays the page entrance. Left unset, the stack decides
+     * from what is on screen: it enters unless a loading stack — one marked
+     * `aria-busy`, or inside an `aria-busy` region — is already there, in
+     * which case the skeleton was the page's entrance and this stack takes
+     * its place at rest, values filling in. `true` always enters; `false`
+     * never does (static markup React re-renders as-is on its first commit
+     * has nothing to arrive from).
      */
     enter?: boolean;
     ref?: Ref<HTMLDivElement>;
@@ -199,21 +202,26 @@ export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealM
  * each block lays out its children with `gap-3`.
  *
  * Mounting plays the page entrance: the stack rises 12px and fades in on the
- * Card-shell / Command spring while `Title` / `Back` above stay put. What
+ * Card-shell / Command spring while `Title` / `Back` above stay put. The
+ * entrance is the page's, played once per visit by whatever the page first
+ * shows; a stack that takes over from a loading one appears at rest. What
  * that means per state:
  *
  * - **Entering the page** — whatever the page first shows (skeleton
  *   included) rides in with its stack.
- * - **Skeleton in a separate component** — swapping it for the loaded
- *   return mounts a fresh stack, so the entrance replays as the
- *   data-arrival animation. That's the right feel for shapes the skeleton
- *   couldn't predict (lists of unknown length).
- * - **1:1 skeleton** — keep ONE stack mounted and branch its children
- *   (`{pending ? bones : content}`): values then fill in place with no
- *   motion.
- * - **Skeleton that is already on screen** (server-painted, then hydrated,
- *   then shown by the page) — `enter={false}`: the stack renders at rest and
- *   the entrance is the loaded stack's alone.
+ * - **Skeleton, then the data** — a skeleton is a stack under `aria-busy`
+ *   (its own, or a wrapper's). The loaded stack mounting in its place
+ *   finds it on screen and renders at rest: the shape was already there,
+ *   the values fill in. Whether the skeleton is a separate component
+ *   (swapped for the loaded return) or one stack branching its children
+ *   (`{pending ? bones : content}`) makes no difference to the motion.
+ * - **Skeleton that is already on screen before React** (rendered to a
+ *   string, painted before the bundle, re-rendered as-is on React's first
+ *   commit) — static markup never enters, and the twin finds the static
+ *   one in the document and stays put on its own; `enter={false}` says so
+ *   outright for markup that must never move.
+ * - **A region the skeleton couldn't predict** (a list of unknown length)
+ *   — `Reveal` rises that region in once its shape is known.
  *
  * Static under reduced motion.
  */
@@ -227,18 +235,20 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
      * Rise this header into place on mount — the Header flavor of `Title`'s
      * `enter`, for a subpage title that carries a description: the pair
      * floats up from below the departing morph word as one block. Put `enter`
-     * here and NOT on the `Title` inside. Skipped under reduced motion.
+     * here and NOT on the `Title` inside. As for `Title`, stays put when it
+     * takes over from a loading page already on screen. Skipped under
+     * reduced motion.
      */
     enter?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
-declare function Header({ enter, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
+declare function Header({ enter: enterProp, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
 /**
  * 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.13.0",
+  "version": "2.15.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -423,6 +423,30 @@
     "./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": {

package/src/styles/theme.css

@@ -487,4 +487,34 @@
       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)
+  );
 }