@photon-ai/pho-ui 4.11.0 → 4.13.0

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

@@ -5,7 +5,17 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
     className?: string;
 };
 declare function Root({ className, ...props }: StyledProps<typeof BaseField.Root>): import("react").JSX.Element;
-declare function Label({ className, ...props }: StyledProps<typeof BaseField.Label>): import("react").JSX.Element;
+/**
+ * The field's label. `required` marks it the way `Input required` marks
+ * its own: a brand-coloured star after the words. A form marks every
+ * required field or none, so a field built from parts (a `Select`, a
+ * `PhoneInput`, a pair of inputs under one label) takes `required` here to
+ * match the `Input`s beside it.
+ */
+declare function Label({ className, required, children, ...props }: StyledProps<typeof BaseField.Label> & {
+    /** Mark the field required: a star after the label's words. */
+    required?: boolean;
+}): import("react").JSX.Element;
 declare function Control({ className, ...props }: StyledProps<typeof BaseField.Control>): import("react").JSX.Element;
 /**
  * Several controls under one label: the lines of an address, first and

package/dist/src/components/input-group/box-search.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * The quiet focus of a search riding on a list or table. The field keeps
+ * its resting hairline when it takes focus: the list it narrows is where
+ * the eye goes, and a ring would box the field off from it. Focus shows
+ * in the caret and in the magnifier, which takes the primary ink. Put it
+ * on the field's surface after the surface's own classes (an `Input`'s
+ * `wrapperClassName`, an `InputGroup.Root`'s `className`): tailwind-merge
+ * keeps the ring at its rest width and ink.
+ */
+export declare const QUIET_SEARCH_FOCUS = "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-pho-primary has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-pho-primary";
+export interface BoxSearchProps extends Omit<ComponentProps<"input">, "type" | "size" | "children"> {
+    /**
+     * Empties the query from the field's own clear button, shown while the
+     * field holds text; focus stays in the field. Without it, no button.
+     */
+    onClear?: () => void;
+    /** Quiet words at the field's end, before the clear button — a count. */
+    trailing?: ReactNode;
+    /** Classes for the field's surface: its width, its place in a row. */
+    className?: string;
+}
+/**
+ * The boxed search over a list or table — an `sm` field with the
+ * magnifier leading, a `trailing` slot, and a clear button. Its focus is
+ * quiet (see `QUIET_SEARCH_FOCUS`). Shared by `BasicPage.Search`,
+ * `FilterBar`, and `Scope`; the boxless face is `GhostSearch`.
+ */
+export declare function BoxSearch({ className, onClear, trailing, value, onChange, disabled, ref, ...props }: BoxSearchProps): import("react").JSX.Element;

package/dist/src/components/radio-group/radio-card.d.ts

@@ -8,14 +8,21 @@ export interface RadioCardProps extends Omit<ComponentProps<typeof BaseRadio.Roo
     description?: ReactNode;
     /** Glyph stacked above the title. When set, it replaces the radio dot. */
     icon?: ReactNode;
+    /**
+     * Glyph at the end of the title row in place of the radio dot, for a
+     * choice that adds something rather than picks it — a plus on "New
+     * brand". The tile's ring still shows it chosen. For tiles without an
+     * `icon` (those have no dot to replace).
+     */
+    trailing?: ReactNode;
 }
 /**
  * A `Radio` styled as a bordered, selectable tile — title, optional
- * description, and either a stacked icon above them or the radio dot at
- * the end of the title row. The tile *is* the radio (see `usePressPulse`);
- * an inner glyph is decorative.
+ * description, and either a stacked icon above them or, at the end of the
+ * title row, the radio dot (or a `trailing` glyph in its place). The tile
+ * *is* the radio (see `usePressPulse`); an inner glyph is decorative.
  */
-export declare function RadioCard({ className, title, description, icon, disabled, ...props }: RadioCardProps): import("react").JSX.Element;
+export declare function RadioCard({ className, title, description, icon, trailing, disabled, ...props }: RadioCardProps): import("react").JSX.Element;
 export declare namespace RadioCard {
     var displayName: string;
 }

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

@@ -0,0 +1 @@
+export { Scope, type ScopeProps, type ScopeItem, type ScopeAll } from './scope';

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

@@ -0,0 +1,98 @@
+import { ComponentProps, Ref } from 'react';
+/**
+ * Scope — pick what something covers out of a catalog: the events a webhook
+ * destination receives, the permissions an app or key holds. A searchable,
+ * grouped checklist with a catch-all row; `collapsible` folds it to a
+ * two-line summary for a resource that already exists, opening on click.
+ */
+export interface ScopeItem {
+    /**
+     * What the selection holds — an event type, a permission id. It is also
+     * the row's name unless `label` says otherwise.
+     */
+    value: string;
+    /** The row's name, when it shouldn't be the value itself. */
+    label?: string;
+    /** One line on what it covers. Searched along with the name. */
+    description?: string;
+    /**
+     * The group it files under — the resource, the namespace. Groups keep
+     * the order they first appear in; items without one come first.
+     */
+    group?: string;
+}
+export interface ScopeAll {
+    /** The row's name — `All events`. */
+    label: string;
+    /** What choosing it means — `Every current and future event.` */
+    description?: string;
+    /**
+     * A wildcard the selection holds in place of the items — `*`. With it,
+     * the row stands for every item, now and later: choosing it sets the
+     * selection to `[value]`, and leaving it spells every item out by name so
+     * the reader prunes from there, never from nothing. Without it, the row
+     * selects every item listed.
+     */
+    value?: string;
+}
+export interface ScopeProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> {
+    /** The catalog — everything that can be picked, in display order. */
+    items: readonly ScopeItem[];
+    /** The selected values, controlled. */
+    value?: readonly string[];
+    /** The selected values at first, uncontrolled. */
+    defaultValue?: readonly string[];
+    /**
+     * Called with the next selection, in catalog order (values no longer in
+     * the catalog follow in the order they were held).
+     */
+    onValueChange?: (value: string[]) => void;
+    /** The catch-all row at the top. Leave it out for no such row. */
+    all?: ScopeAll;
+    /** The search field's placeholder, which also names it. @default "Search" */
+    placeholder?: string;
+    /**
+     * Fold to a two-line summary of the selection, opening to the full list
+     * on click — for a resource that already exists, where the scope is read
+     * far more often than it changes. The page saves the change (its "Save
+     * changes" below the card) and folds the list through `open`; the ✕ in
+     * the search row, or `Escape` on an empty search, drops the edit: the
+     * selection goes back to what it was when the list opened, and folds.
+     */
+    collapsible?: boolean;
+    /** Whether the collapsible list is open, controlled. */
+    open?: boolean;
+    /** Whether the collapsible list starts open. @default false */
+    defaultOpen?: boolean;
+    /** Called when the collapsible list opens or folds. */
+    onOpenChange?: (open: boolean) => void;
+    /** The catalog is on its way: bones in place of rows. */
+    loading?: boolean;
+    /**
+     * Read-only: the list can be searched but not changed, and a folded one
+     * stays folded. Held open by `open` (a save in flight), nothing in it
+     * changes the selection, the ✕ and Escape included.
+     */
+    disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A searchable, grouped checklist for choosing what something covers.
+ *
+ * Every row is one line on a wide card — the name, then its description in
+ * a second column that opens whole on hover when it doesn't fit. Groups are
+ * thin tinted bands carrying a checkbox for the whole group (mixed when
+ * partly chosen). The search matches names, descriptions, and group names,
+ * word by word; while it holds a query the catch-all row steps aside and a
+ * group's checkbox covers the rows it shows.
+ *
+ * With `collapsible`, the card rests as a summary — whole groups by name,
+ * the rest by item, over a count — and opens in place, the search taking
+ * focus, when clicked; its ✕ drops the edit and folds it back, the page's
+ * own save below the card commits it. Values the catalog no longer offers keep a row
+ * under "No longer offered": they can be removed, never added in bulk.
+ */
+export declare function Scope({ items, value: valueProp, defaultValue, onValueChange, all, placeholder, collapsible, open: openProp, defaultOpen, onOpenChange, loading, disabled, className, ref, ...props }: ScopeProps): import("react").JSX.Element;
+export declare namespace Scope {
+    var displayName: string;
+}

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

@@ -128,6 +128,58 @@ export declare function fadeThroughBlur(reduceMotion?: boolean | null): {
         readonly duration: 0;
     };
 };
+/**
+ * The presence recipe — `BasicPage.Reveal`'s: a block opens from no height
+ * on `SPRING_ENTRANCE` while `FADE_ENTRANCE` brings the ink, and closes the
+ * same way. Spread onto a keyed motion element inside `AnimatePresence`,
+ * clipped while it moves so what hasn't opened stays out of sight:
+ *
+ *     <motion.div {...revealIn(reduceMotion)} />
+ *
+ * `collapseGap` is a flex gap the block trades against its height (a
+ * negative margin as it closes), so neighbours glide to where they end up
+ * instead of snapping by the gap when it unmounts. Under reduced motion the
+ * block snaps.
+ */
+export declare function revealIn(reduceMotion?: boolean | null, collapseGap?: string): {
+    readonly initial: {
+        readonly height: 0;
+        readonly opacity: 0;
+        readonly marginTop: string;
+    };
+    readonly animate: {
+        readonly height: "auto";
+        readonly opacity: 1;
+        readonly marginTop: 0;
+    };
+    readonly exit: {
+        readonly height: 0;
+        readonly opacity: 0;
+        readonly marginTop: string;
+    };
+    readonly transition: {
+        readonly duration: 0;
+        readonly height?: undefined;
+        readonly marginTop?: undefined;
+        readonly opacity?: undefined;
+    } | {
+        readonly height: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 40;
+        };
+        readonly marginTop: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 40;
+        };
+        readonly opacity: {
+            readonly duration: 0.25;
+            readonly ease: "easeOut";
+        };
+        readonly duration?: undefined;
+    };
+};
 /**
  * The entrance recipe — rise `RISE_PX` on `SPRING_ENTRANCE` while
  * `FADE_ENTRANCE` brings the ink. What `Stack` and `Reveal` do; spread it

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

@@ -8,12 +8,12 @@ import { CodeBlock } from '../../components/code-block';
  * 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";
+export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary [--choice-card-inset:0.75rem] 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.
  */
-export declare const BASIC_PAGE_CALLOUT = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
+export declare const BASIC_PAGE_CALLOUT = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5 [--choice-card-inset:0.75rem]";
 /**
  * One row — label (+ optional description) left, control right.
  * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
@@ -227,6 +227,25 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
     trailing?: ReactNode;
     ref?: Ref<HTMLHeadingElement>;
 }
+export interface BasicPageTitleAccessoryProps {
+    /**
+     * Whether it goes with the words into the condensed bar once the title
+     * has scrolled away. A status the name can't be read without does (a
+     * badge); an action on the page doesn't (a Rename pencil): the bar is a
+     * way back and a name, not a toolbar.
+     * @default true
+     */
+    inBar?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A part of the title beside its words — a badge, a status, an action on
+ * the page itself — that says whether it follows the words into the
+ * condensed bar (`Root condense`). Put it inside `Title` after the words.
+ * Everything in a title's children goes into the bar unless it says
+ * otherwise; `Title`'s `trailing` never does.
+ */
+declare function TitleAccessory({ inBar, children, }: BasicPageTitleAccessoryProps): import("react").JSX.Element | null;
 /**
  * Page title — largest heading on the surface. Plain-text children get a slug
  * `id` for hash targets (`#profile`); the heading itself is not a link.
@@ -308,11 +327,12 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
 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 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`
+ * the `Header` grid the way `Search` is, 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. It centers on the text block whichever is taller: beside a
+ * description that wraps to a third line it stays on the block's middle,
+ * and 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"> & {
@@ -425,6 +445,16 @@ declare function CalloutDescription({ className, ...props }: ComponentProps<"p">
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
 export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
+    /**
+     * One page per step, the steps in a row above it, instead of the card
+     * with the step at hand folded open — for a setup whose steps are
+     * pages of their own: a registration that asks who is registering,
+     * then for the brand, then for the campaign. Each `Step`'s children are
+     * its page (a `Stack`, or a `Form` around one), and the paged `Onboard`
+     * stands where the page's `Stack` would, under the `Title`. The rest of
+     * the props go to the row, the ordered list of steps.
+     */
+    paged?: boolean;
     ref?: Ref<HTMLOListElement>;
 }
 /**
@@ -438,30 +468,40 @@ export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
  * with a check and what they came to, the waiting ones muted. A step
  * finishing folds closed as the next opens, on the Accordion's spring.
  * When the last step is done the service is on — render the page in its
- * place.
+ * place. `paged` turns the card into a row of steps over the page at
+ * hand (see `PagedOnboard`).
  */
-declare function Onboard({ className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
+declare function Onboard({ paged, className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
 export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title"> {
     /**
      * Decorative glyph for the step at hand, top-right of its body the way a
      * `Callout`'s is — typically a Tabler outline icon at stroke 1.25. It is
      * aria-hidden (keep the meaning in the title) and folds away with the
-     * body: a done or waiting step shows none.
+     * body: a done or waiting step shows none. In a paged list it is what a
+     * done step came to, drawn in its ring in place of the check — the
+     * choice a step made, say — and a step without one keeps the check.
      */
     icon?: ReactNode;
     /**
      * Something to look at beside the step at hand — a code to scan, with
      * its caption — in the corner where the `icon` would be, its top on the
      * title's, holding still as the fold opens beside it. It takes the
-     * icon's place when both are given, and folds away with the body.
+     * icon's place when both are given, and folds away with the body. Not
+     * shown in a paged list.
      */
     aside?: ReactNode;
-    /** The title: a verb and its object — "Choose a number". */
+    /**
+     * The title: a verb and its object — "Choose a number". In a paged
+     * list, the step's name in the row, a word or two — "Brand" — which a
+     * done step may trade for what it came to ("Business"); the row
+     * crossfades it.
+     */
     title: ReactNode;
     /**
      * The line under the title while the step is at hand: what it involves,
      * or, while it waits, how long. Folded away with the rest once the step
-     * is done or before its turn.
+     * is done or before its turn. Not shown in a paged list; the page says
+     * it in its own `Header`.
      */
     description?: ReactNode;
     /**
@@ -486,11 +526,95 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
     /**
      * At hand: the step's action — a small `Button` or `ButtonLink` — under
      * its line. Done: what it came to — a `Value` — at the title's end.
-     * Waiting its turn: not shown.
+     * Waiting its turn: not shown. In a paged list, the step's page — a
+     * `Stack`, or a `Form` around one — shown under the row while the step
+     * is at hand.
      */
     children?: ReactNode;
     ref?: Ref<HTMLLIElement>;
 }
+/**
+ * Where a check stands. As `Step`'s: `done` draws the check, `working`
+ * spins while Photon is at it, `pending` is dashed while it waits on
+ * someone else (a carrier, a DNS host, the visitor), `upcoming` is faint
+ * while it waits its turn. `failed` trades the ring for an X and says so.
+ */
+export type BasicPageCheckState = "done" | "working" | "pending" | "upcoming" | "failed";
+/**
+ * A list of checks Photon reports on, one line each: DNS records found, a
+ * registration's stages. Not steps someone takes (that is `Onboard`), and
+ * not a percentage (that is `Progress`). It speaks the `Onboard` ring's
+ * language at the line's size. The check where the list stands, whatever
+ * came of it, is its current step: its label one weight up, and
+ * `aria-current` for assistive tech. Put it in a `Card`'s `Item`, and say
+ * when it was last checked, if that matters, in a `SectionFooter`.
+ */
+declare function Checklist({ className, children, ...props }: ComponentProps<"ul"> & {
+    ref?: Ref<HTMLUListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageCheckProps extends Omit<ComponentProps<"li">, "value"> {
+    /** @default "upcoming" */
+    state?: BasicPageCheckState;
+    /**
+     * What the check came to, at the line's end in description ink: the
+     * date it passed, a count.
+     */
+    value?: ReactNode;
+    /**
+     * A line (or a few) right under the label, on its start edge, at
+     * `text-xs`: why a failed check failed, in error ink with no surface of
+     * its own (the X already marks it); otherwise what the check waits on,
+     * in description ink. Several reasons are several block children.
+     */
+    description?: ReactNode;
+    /**
+     * What a failed check's failure is called, beside its label in error
+     * ink: "Rejected", "Suspended". Read only when `state` is `failed`.
+     * @default "Failed"
+     */
+    failure?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One check: its ring, its label, its `value` at the line's end, and its
+ * `description` under the label. The ring is `Step`'s at the text's size;
+ * a check that turns done draws its mark on, one that loads done shows it
+ * drawn. The list says which check is current; its label and a failed
+ * one's "Failed" go one weight up.
+ */
+declare function Check({ state, value, description, failure, className, children, ...props }: BasicPageCheckProps): import("react").JSX.Element;
+/**
+ * What happened, in order: a registration's reviews, a domain's checks
+ * over time, a key's uses. One event per `TimelineItem`, newest first
+ * unless the page says otherwise, each on the checklist's mark with a
+ * faint line down to the next. Where `Checklist` is where things stand
+ * now, a timeline is how they got there. Put it in a `Card`'s `Item`.
+ */
+declare function Timeline({ className, ...props }: ComponentProps<"ol"> & {
+    ref?: Ref<HTMLOListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageTimelineItemProps extends Omit<ComponentProps<"li">, "title"> {
+    /** What came of the event, on the checklist's mark. @default "done" */
+    state?: BasicPageCheckState;
+    /** The event, in words: "Carrier review failed". */
+    title: ReactNode;
+    /** When it happened, under the title in description ink. */
+    time?: ReactNode;
+    /**
+     * What there is to say about it, under the time at `text-xs` in
+     * description ink: a reviewer's reasons, a note. A record, not an alarm:
+     * a failure's mark says it failed, and the page's current state says
+     * what to do about it.
+     */
+    children?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One event: its mark on the rail, a line from it down to the next
+ * event's, and beside it the title, the time and the details. The mark
+ * sits on the title's line; the last event draws no line.
+ */
+declare function TimelineItem({ state, title, time, className, children, ...props }: BasicPageTimelineItemProps): import("react").JSX.Element;
 /**
  * One step of an `Onboard`, left to right: the ring, the words, the
  * corner. The ring and the title share one row and center on each
@@ -503,7 +627,8 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
  * does; the others stay on the card's white. The title and the line wear the
  * section's type — `SectionTitle` over `Description`, both
  * `text-display-xs`. Its standing comes from the list; on its own it is
- * the step at hand.
+ * the step at hand. In a paged list it is its place in the row instead
+ * (`StepInRow`), and the list shows its children as the page.
  */
 declare function Step({ icon, aside, title, description, done, working, pending, className, children, ...props }: BasicPageStepProps): import("react").JSX.Element;
 export interface BasicPageRowProps extends Omit<ComponentProps<"div">, "title" | RevealMotionConflicts> {
@@ -1139,6 +1264,7 @@ export declare const BasicPage: {
     Crumb: typeof Crumb;
     Back: typeof Back;
     Title: typeof Title;
+    TitleAccessory: typeof TitleAccessory;
     Stack: typeof Stack;
     Columns: typeof Columns;
     Header: typeof Header;
@@ -1155,6 +1281,10 @@ export declare const BasicPage: {
     CalloutDescription: typeof CalloutDescription;
     Onboard: typeof Onboard;
     Step: typeof Step;
+    Checklist: typeof Checklist;
+    Check: typeof Check;
+    Timeline: typeof Timeline;
+    TimelineItem: typeof TimelineItem;
     Row: typeof Row;
     RowLink: typeof RowLink;
     Value: typeof Value;

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

@@ -1,3 +1,3 @@
-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, type BasicPageReceiptProps, type BasicPageReceiptGroupProps, type BasicPageReceiptLineProps, type BasicPageReceiptTotalProps, } 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, type BasicPageTitleAccessoryProps, type BasicPageCheckProps, type BasicPageCheckState, type BasicPageTimelineItemProps, type BasicPageReceiptProps, type BasicPageReceiptGroupProps, type BasicPageReceiptLineProps, type BasicPageReceiptTotalProps, } from './basic-page';
 export { createColumns, type DataTableColumn, type DataTableColumnMeta, type DataTableProps, type SortingState, } from '../../components/data-table';
 export { type DescriptionListRootProps as BasicPageMetaProps, type DescriptionListItemProps as BasicPageMetaItemProps, type DescriptionListLayout as BasicPageMetaLayout, } from '../../components/description-list';

package/dist/src/utils/animated-height.d.ts

@@ -1,15 +1,24 @@
-import { ReactNode } from 'react';
-import { ValueAnimationTransition } from 'motion/react';
+import { ReactNode, RefObject } from 'react';
+import { MotionValue, ValueAnimationTransition } from 'motion/react';
 /**
- * Animates its own height to follow the measured height of `children`, so
- * content swaps (search filtering, skeleton → data) glide instead of jumping.
- * Honors `prefers-reduced-motion` by snapping height with no spring.
+ * Keeps a container's size on one axis following the measured size of its
+ * content on a spring — the core of `AnimatedHeight`, and of any part whose
+ * box should glide as its content changes (a paged `Onboard`'s step titles
+ * follow their words' width this way). Returns the motion value to put on
+ * the container's `style`. Reduced motion snaps it.
  *
  * The container clips only while the spring is in flight. ResizeObserver
  * callbacks run after layout but before paint, so the clip lands before the
  * swap frame can show; once the spring settles it is lifted again, so a focus
- * ring, an effect button's rim, or any other overhang on the last row paints
- * normally at rest instead of being cut off at the container's edge.
+ * ring, an effect button's rim, or any other overhang paints normally at
+ * rest instead of being cut off at the container's edge.
+ */
+export declare function useSizeFollow(axis: "height" | "width", containerRef: RefObject<HTMLElement | null>, contentRef: RefObject<HTMLElement | null>, transition: ValueAnimationTransition<number | "auto">): MotionValue<number | "auto">;
+/**
+ * Animates its own height to follow the measured height of `children`, so
+ * content swaps (search filtering, skeleton → data) glide instead of jumping.
+ * Honors `prefers-reduced-motion` by snapping height with no spring. Clips
+ * only while the spring is in flight (see `useSizeFollow`).
  */
 export declare function AnimatedHeight({ className, transition, children, }: {
     className?: string;

package/dist/src/utils/choice-card.d.ts

@@ -4,8 +4,15 @@ import { Transition } from 'motion/react';
  * tile. Applied to the radio/checkbox root itself so the whole tile is the
  * hit target. Hover fills (`bg-pho-ghost-hover`); selected uses the brand
  * ring. Press feedback lives on this surface (see `usePressPulse`).
+ *
+ * The side padding is `--choice-card-inset`, 12px unless the page says
+ * otherwise, and the padding above and below is three quarters of it: a
+ * `BasicPage.Stack` sets it to the page's text edge (20px), so tiles
+ * standing on the page as its surfaces reach the column's edge as a card
+ * does and start their words on the headings' line; a card, sheet or
+ * callout sets it back, so tiles inside one stay compact.
  */
-export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base p-3 text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
+export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base px-[var(--choice-card-inset,0.75rem)] py-[calc(var(--choice-card-inset,0.75rem)*0.75)] text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
 /** Stacked icon above the copy — tighter than the checkbox/radio row gap. */
 export declare const CHOICE_CARD_WITH_ICON = "flex-col gap-1.5";
 /** Same press as Select's default trigger — field-sized, not Button's whileTap. */

package/dist/src/utils/ghost-search.d.ts

@@ -1,11 +1,27 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 export interface GhostSearchProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "type" | "children"> {
     value: string;
     onChange: (value: string) => void;
+    /**
+     * Empties the query from the field's own clear button, shown while it
+     * holds text; focus stays in the field. Without it, the browser's own
+     * clear glyph stays.
+     */
+    onClear?: () => void;
+    /** Quiet words at the field's end, before the clear button — a count. */
+    trailing?: ReactNode;
 }
 /**
  * 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.
+ * search, a `Trace.Waterfall`'s, a `Scope`'s first row). Quiet ink, and no
+ * ring on focus either: a ring would draw the box the face exists not to
+ * have. Focus shows in the caret and in the magnifier, which takes the
+ * primary ink while the field holds focus.
+ *
+ * The query is the list's, not a form's: its change stops at the field, so
+ * an enclosing form that saves on change (BasicPage `Form autoSave`) or
+ * shows a save row once dirty never hears it. The type is an `sm` field's:
+ * 16px on small viewports, where iOS zooms into anything smaller.
  */
-export declare function GhostSearch({ value, onChange, className, ...props }: GhostSearchProps): import("react").JSX.Element;
+export declare function GhostSearch({ value, onChange, onClear, trailing, className, ref, ...props }: GhostSearchProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -85,6 +85,10 @@
       "types": "./dist/src/components/checkbox/index.d.ts",
       "import": "./dist/components/checkbox.js"
     },
+    "./components/scope": {
+      "types": "./dist/src/components/scope/index.d.ts",
+      "import": "./dist/components/scope.js"
+    },
     "./components/radio-group": {
       "types": "./dist/src/components/radio-group/index.d.ts",
       "import": "./dist/components/radio-group.js"

package/dist/chunks/animated-height-I44sUq0n.js

@@ -1,48 +0,0 @@
-"use client";
-import { SPRING_SETTLE as b } from "../motion.js";
-import { useEffect as R, useRef as m } from "react";
-import { jsx as d } from "react/jsx-runtime";
-import { animate as x, motion as S, useMotionValue as g, useReducedMotion as w } from "motion/react";
-var y = b;
-function G({ className: p, transition: s, children: v }) {
-  const i = m(null), c = m(null), t = g("auto"), l = w();
-  return R(() => {
-    const o = i.current, n = c.current;
-    if (!o || !n) return;
-    let e = null;
-    const u = new ResizeObserver((h) => {
-      const f = h[0]?.borderBoxSize?.[0], r = f ? f.blockSize : n.offsetHeight, a = t.get();
-      if (a === "auto" || l) {
-        e?.stop(), e = null, o.style.overflow = "", t.set(r);
-        return;
-      }
-      !e && Math.abs(a - r) < 0.5 || (o.style.overflow = "hidden", e?.stop(), e = x(t, r, {
-        ...s ?? y,
-        onComplete: () => {
-          e = null, o.style.overflow = "";
-        }
-      }));
-    });
-    return u.observe(n), () => {
-      u.disconnect(), e?.stop();
-    };
-  }, [
-    t,
-    l,
-    s
-  ]), /* @__PURE__ */ d(S.div, {
-    ref: i,
-    className: "min-h-0",
-    style: { height: t },
-    children: /* @__PURE__ */ d("div", {
-      ref: c,
-      className: p,
-      children: v
-    })
-  });
-}
-export {
-  G as t
-};
-
-//# sourceMappingURL=animated-height-I44sUq0n.js.map