@photon-ai/pho-ui 1.2.1 → 1.4.0

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

@@ -1,6 +1,14 @@
 import { ComponentProps } from 'react';
-/** Size axis — padding, gap, and label size. */
+/**
+ * Size axis — fixed heights on a 4px step (16 / 20 / 24) so the ladder stays
+ * proportional. Horizontal padding and type scale with each step; vertical
+ * centering comes from `items-center` on the base (no `py`).
+ */
 export declare const BADGE_SIZES: {
+    xs: {
+        classes: string;
+        description: string;
+    };
     sm: {
         classes: string;
         description: string;
@@ -10,40 +18,58 @@ export declare const BADGE_SIZES: {
         description: string;
     };
 };
-/** Color axis — a closed semantic set; each key tints text, fill, and ring. */
+/**
+ * Color axis — a closed semantic set with one recipe per contrast. `high`
+ * fills with the state ink (text flips with it per mode); `low` tints text
+ * only and lets `LOW_MATERIAL` derive fill and ring from it.
+ */
 export declare const BADGE_COLORS: {
     gray: {
-        classes: string;
+        high: string;
+        low: string;
+        description: string;
+    };
+    muted: {
+        high: string;
+        low: string;
         description: string;
     };
     brand: {
-        classes: string;
+        high: string;
+        low: string;
         description: string;
     };
     success: {
-        classes: string;
+        high: string;
+        low: string;
         description: string;
     };
     warning: {
-        classes: string;
+        high: string;
+        low: string;
         description: string;
     };
     error: {
-        classes: string;
+        high: string;
+        low: string;
         description: string;
     };
 };
 export type BadgeSize = keyof typeof BADGE_SIZES;
 export type BadgeColor = keyof typeof BADGE_COLORS;
+export type BadgeContrast = "high" | "low";
 /** Compose the full class string for a badge — exported for reuse/testing. */
 export declare function badgeVariants(opts?: {
     color?: BadgeColor;
+    contrast?: BadgeContrast;
     size?: BadgeSize;
     className?: string;
 }): string;
 interface BadgeBaseProps {
     /** Semantic color. @default "gray" */
     color?: BadgeColor;
+    /** Solid state fill (`high`) or the soft currentColor tint (`low`). @default "high" */
+    contrast?: BadgeContrast;
     /** Size variant. @default "md" */
     size?: BadgeSize;
 }
@@ -56,7 +82,7 @@ export interface BadgeProps extends BadgeBaseProps, Omit<ComponentProps<"span">,
  * for a standalone action use a `Button`. Let `color` carry the meaning and keep
  * the label to a word or two.
  */
-export declare function Badge({ color, size, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ color, contrast, size, className, children, ...props }: BadgeProps): import("react").JSX.Element;
 export declare namespace Badge {
     var displayName: string;
 }

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

@@ -1 +1 @@
-export { Badge, badgeVariants, BADGE_SIZES, BADGE_COLORS, type BadgeProps, type BadgeSize, type BadgeColor, } from './badge';
+export { Badge, badgeVariants, BADGE_SIZES, BADGE_COLORS, type BadgeProps, type BadgeSize, type BadgeColor, type BadgeContrast, } from './badge';

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

@@ -48,8 +48,8 @@ declare function Footer({ className, ...props }: ComponentProps<"div"> & {
 /**
  * Card — a bordered content panel: header (title + description), body,
  * optional footer. It's static chrome with no interactivity of its own.
- * For a settings label/control list use `Settings.Card`; for a featured
- * block on the page surface use `Settings.Callout`.
+ * For a label/control list use `BasicPage.Card`; for a featured
+ * block on the page surface use `BasicPage.Callout`.
  *
  * ```tsx
  * <Card.Root>

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

@@ -44,6 +44,21 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
     title?: ReactNode;
     /** Supporting text under the title. */
     description?: ReactNode;
+    /**
+     * Consequence bullets rendered as a list at the top of the body — one item
+     * per outcome (what is deleted, what survives, who loses access). Use on
+     * destructive confirms where the one-line description undersells the
+     * impact; keep each item to a single short sentence. Wrap the load-bearing
+     * figure in `<strong>` ("<strong>3 members</strong> lose access") — the
+     * list styles it (secondary ink, medium weight); no classes needed.
+     */
+    consequences?: ReactNode[];
+    /**
+     * Final cautionary line under `consequences` — error ink at description
+     * size (e.g. "It cannot be undone. Please be certain."). Reserve it for
+     * irreversible actions; keep it short.
+     */
+    warning?: ReactNode;
     /**
      * Footer action row (Cancel / Confirm, etc.). Iron rule: when `actions` is
      * set, the header close button is never shown — dismiss via the actions.
@@ -62,7 +77,7 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
  * full control, compose the parts directly (`Dialog.Portal` /
  * `Dialog.Backdrop` / `Dialog.Popup`).
  */
-declare function Content({ title, description, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+declare function Content({ title, description, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
 /**
  * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via
  * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`). `Dialog.Action`

package/dist/src/components/status-view/index.d.ts

@@ -0,0 +1 @@
+export { StatusView, STATUS_VIEW, STATUS_VIEW_COPY, STATUS_VIEW_SIZES, type StatusViewProps, type StatusViewSize, } from './status-view';

package/dist/src/components/status-view/status-view.d.ts

@@ -0,0 +1,74 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Hugs its content (`w-fit`) and centers itself in the host (`mx-auto`); text
+ * stays start-aligned so the icon / title / description share one left edge.
+ * `max-w-lg` only caps long prose at Dialog width before it wraps.
+ */
+export declare const STATUS_VIEW = "mx-auto flex w-fit max-w-lg min-w-0 flex-col items-start justify-center text-left";
+/** Title + description group — flex column; gap comes from the size axis. */
+export declare const STATUS_VIEW_COPY = "flex flex-col";
+/**
+ * Size axis — retunes every slot. Title + description share Dialog's
+ * `font-display` ladder: `base` matches Dialog (`gap-1`); `sm` steps one rung
+ * down (`gap-0`) for cards and panels.
+ */
+export declare const STATUS_VIEW_SIZES: {
+    sm: {
+        description: string;
+        classes: {
+            root: string;
+            icon: string;
+            copy: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+    base: {
+        description: string;
+        classes: {
+            root: string;
+            icon: string;
+            copy: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+};
+export type StatusViewSize = keyof typeof STATUS_VIEW_SIZES;
+interface StatusViewBaseProps {
+    /** Decorative glyph above the title, usually a Tabler icon. Sized by the view (`*:size-*`), inked `text-pho-secondary`. */
+    icon?: ReactNode;
+    /** One short line naming the state ("No API keys yet", "Page not found"). */
+    title: ReactNode;
+    /** Supporting prose — what it means or what to do next. */
+    description?: ReactNode;
+    /** Optional action row (buttons / links). Empty states usually omit it. */
+    actions?: ReactNode;
+    /** Size variant. @default "base" */
+    size?: StatusViewSize;
+}
+export interface StatusViewProps extends StatusViewBaseProps, Omit<ComponentProps<"div">, keyof StatusViewBaseProps | "children"> {
+}
+/**
+ * StatusView — the standing-in view for a region with nothing to show or
+ * nothing that worked: icon over title over description, with an optional
+ * action row. The block shrink-wraps and centers itself while its text stays
+ * left-aligned; the host owns the footprint (a card body, or a `min-h-screen`
+ * flex-centered page). Use `size="sm"` inside cards, the default `base` for
+ * whole pages.
+ *
+ * Empty and error states share this one component — they differ only in what
+ * you pass:
+ *
+ * - **Empty** — usually no `icon` and no `actions`; the create affordance
+ *   lives elsewhere on the page.
+ * - **Error** — pass a warning `icon`, `role="alert"` so it announces, and
+ *   `actions` offering a way out (retry, reload, a route back).
+ */
+export declare function StatusView({ icon, title, description, actions, size, className, ...props }: StatusViewProps): import("react").JSX.Element;
+export declare namespace StatusView {
+    var displayName: string;
+}
+export {};

package/dist/src/index.d.ts

@@ -11,5 +11,6 @@ export * from './components/input';
 export * from './components/input-group';
 export * from './components/card';
 export * from './components/dialog';
+export * from './components/status-view';
 export * from './sections/sidebar';
-export * from './sections/settings';
+export * from './sections/basic-page';

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

@@ -0,0 +1,332 @@
+import { AnchorHTMLAttributes, ComponentProps, ReactNode, Ref } from 'react';
+import { ButtonLinkProps } from '../../components/button';
+/**
+ * BasicPage — Pho's standard content page: a page title, section titles, and
+ * bordered cards of label/control rows. Settings, billing, members — any
+ * single-column management surface.
+ *
+ * Spacing: wrap the page in `Root` (a 42rem column with `px-5` gutters,
+ * vertical padding). `Stack` separates blocks (`gap-10`). Inside a block,
+ * children share `gap-3`. Wrap a section title + description in `Header`
+ * (`gap-0.5`) so that pair stays tight — don't put them as loose siblings.
+ * Parts already carry `px-5`.
+ *
+ * Navigation: pages may drill into subpages. `RowLink` is a whole-row link
+ * (trailing chevron) and `Back` returns to the parent — both render through
+ * the host's `LinkProvider`; the URL itself stays the router's job. `Back`
+ * floats in `Root`'s top padding, so `Title` never moves between pages that
+ * have a back link and pages that don't.
+ */
+/** Bordered card that stacks rows with hairline dividers. */
+export declare const BASIC_PAGE_CARD = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary";
+/**
+ * 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 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
+/**
+ * One row — label (+ optional description) left, control right.
+ * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
+ * than a comfortable touch target.
+ */
+export declare const BASIC_PAGE_ROW = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
+/**
+ * One card row that can host subviews. Same padding rhythm as a plain row —
+ * an optional trailing `ItemPanel` breaks out of it on its own.
+ */
+export declare const BASIC_PAGE_ITEM = "flex flex-col gap-3 px-5 py-4";
+/**
+ * Secondary strip closing an `Item` that is last in its card. Negative
+ * margins escape the item's `px-5 pb-4` so the gray sheet runs edge-to-edge
+ * and owns the row's bottom padding. The body above stays square and the
+ * sheet's top is flush against it; only the bottom rounds, nesting into the
+ * card's 12px corner (11px inside the 1px border). Content lands back on the
+ * item's left gutter.
+ */
+export declare const BASIC_PAGE_ITEM_PANEL = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5";
+/**
+ * Mid-list variant — the full-bleed sheet only reads well against the card's
+ * bottom corner, so when later rows follow, the panel becomes an inset chip
+ * instead: fully rounded at the small-control radius, overhanging the text
+ * gutter by 8px per side (content stays aligned with the body above), and
+ * leaving the row's own bottom padding and the card's hairline divider alone.
+ * `-mt-1.5` collapses the item's `gap-3` (12px) to an effective `gap-1.5` (6px).
+ */
+export declare const BASIC_PAGE_ITEM_PANEL_DIVIDED = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5";
+/**
+ * Page chrome — centered column at the standard content width. Hosts
+ * `Title` + `Stack` (and any route-level siblings). Prefer this over
+ * ad-hoc `max-w-*` wrappers in the app shell.
+ *
+ * `44.5rem` = the 42rem (`2xl`) content column plus the two `px-5` gutters,
+ * so wide viewports render exactly as before while narrow ones keep a 20px
+ * breathing edge instead of running content into the viewport.
+ *
+ * `relative` anchors `Back`, which floats in the top padding — the reserved
+ * zone that keeps `Title` at the same position on every page.
+ */
+declare function Root({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * 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.
+ */
+declare function Title({ id, className, children, ...props }: ComponentProps<"h1"> & {
+    ref?: Ref<HTMLHeadingElement>;
+}): import("react").JSX.Element;
+/**
+ * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;
+ * each block lays out its children with `gap-3`.
+ */
+declare function Stack({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so
+ * the block's `gap-3` only applies between this header and the card.
+ */
+declare function Header({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * Section heading — same padding as the page title, smaller type. Hashable via
+ * slug `id` (not a link).
+ */
+declare function SectionTitle({ id, className, children, ...props }: ComponentProps<"h2"> & {
+    ref?: Ref<HTMLHeadingElement>;
+}): import("react").JSX.Element;
+/**
+ * Supporting copy under a section title. Same display step as the title;
+ * color + normal weight keep it secondary. Always wrap with `Header`.
+ */
+declare function Description({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+/**
+ * Optional caption below a section's `Card` (outside the card). One step
+ * smaller than `Description` (`text-xs`). Not the card-internal dirty-state
+ * `Footer`.
+ */
+declare function SectionFooter({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+/** Bordered card that stacks rows with hairline dividers. */
+declare function Card({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * One card row that can host subviews. Padding matches a plain row, so use it
+ * for any row that may grow an `ItemPanel` — primary content goes straight in
+ * as children; the panel, when present, is the last child.
+ *
+ * ```tsx
+ * <BasicPage.Card>
+ *   <BasicPage.Item>
+ *     …name, meta, actions…
+ *     <BasicPage.ItemPanel divided>…secret / expanded content…</BasicPage.ItemPanel>
+ *   </BasicPage.Item>
+ *   …later siblings (pass `divided` on the panel above)…
+ * </BasicPage.Card>
+ * ```
+ */
+declare function Item({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export interface BasicPageItemPanelProps extends ComponentProps<"div"> {
+    /**
+     * Set when later card rows follow this item. The panel then renders as an
+     * inset rounded chip (keeping the card's own divider) instead of the
+     * full-bleed bottom sheet, which only reads well against the card's corner.
+     * @default false
+     */
+    divided?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Secondary strip at the end of an `Item`. When the item closes the card,
+ * it's a gray sheet flush under the body, full-bleed and owning the row's
+ * bottom padding, rounding only into the card's bottom corner. Pass `divided`
+ * when later card rows follow — the panel becomes an inset rounded chip and
+ * the card's hairline divider stays in charge. Content is already a centered
+ * flex row either way.
+ */
+declare function ItemPanel({ divided, className, ...props }: BasicPageItemPanelProps): import("react").JSX.Element;
+/**
+ * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and
+ * optional actions) for a featured block — e.g. an invite form. Do not wrap
+ * in `Card`; this is already the outer surface.
+ */
+declare function Callout({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/** Callout heading — same type as `SectionTitle`. Hashable via slug `id`. */
+declare function CalloutTitle({ id, className, children, ...props }: ComponentProps<"h2"> & {
+    ref?: Ref<HTMLHeadingElement>;
+}): import("react").JSX.Element;
+/** Supporting copy under a callout title. */
+declare function CalloutDescription({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+export interface BasicPageRowProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Left-side field name. */
+    label: string;
+    /** Optional helper under the label. */
+    description?: ReactNode;
+    /** Associates the label with a control id. When omitted, the label is not a `<label>`. */
+    htmlFor?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * One row: label (+ optional description) left, control right.
+ * Pass `htmlFor` when the row wraps a labelled input; omit it for display/
+ * action rows (avatar, danger-zone delete).
+ */
+declare function Row({ label, description, htmlFor, className, children, ...props }: BasicPageRowProps): import("react").JSX.Element;
+/** Read-only value on the right side of a row (email, etc.). */
+declare function Value({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+/**
+ * Inline error under a row (still inside the card). Matches card horizontal
+ * padding so hosts don't re-apply `px-5`.
+ */
+declare function Alert({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+export interface BasicPageFooterProps extends ComponentProps<"div"> {
+    /**
+     * Animated presence for dirty-state bars: the card glides open/closed on a
+     * height spring while the content fades. Omit for a static, always-visible
+     * footer (no animation). No reveal plays on first mount — only on flips.
+     */
+    show?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Trailing bar inside a card — typically a save status + submit button that
+ * appears after the form is dirty. Same horizontal/vertical padding as a row.
+ * Pass `show` (instead of conditional rendering) to animate the bar in and
+ * out following the onboarding card's motion language.
+ */
+declare function Footer({ show, className, ...props }: BasicPageFooterProps): import("react").JSX.Element;
+export interface BasicPageBackProps extends Omit<ButtonLinkProps, "variant" | "size" | "shape" | "prefix" | "suffix" | "svgOnly" | "href"> {
+    /** Parent destination — rendered through the host's `LinkProvider`. */
+    href: string;
+    /** Label — name the parent page. @default "Back" */
+    children?: ReactNode;
+}
+/**
+ * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,
+ * before `Title`. It floats in `Root`'s reserved top padding (vertically
+ * centered in the 48px zone) instead of taking layout space, so `Title` sits
+ * at exactly the same position whether or not a page has one.
+ *
+ * The offsets align the *label* glyph with the title glyph. Title text sits
+ * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button
+ * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at
+ * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is
+ * the 10.25px difference. `top-2` centers the 32px button in the 48px
+ * reserved zone. The chevron and the ghost hover pill hang in the padding —
+ * the usual optical alignment for borderless controls.
+ */
+declare function Back({ href, className, children, ...props }: BasicPageBackProps): import("react").JSX.Element;
+export interface BasicPageRowLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "title"> {
+    /** Left-side field name — plain text, or compose with a trailing badge. */
+    label: ReactNode;
+    /** Optional helper under the label. */
+    description?: ReactNode;
+    /** Optional media left of the label (e.g. project avatar). */
+    leading?: ReactNode;
+    /** Subpage destination — rendered through the host's `LinkProvider`. */
+    href: string;
+    /** Optional trailing value before the chevron (compose with `Value`). */
+    children?: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * A row that navigates — the whole row is one link into a subpage, with a
+ * trailing chevron cue. Same geometry as `Row`; hover lifts the row, and
+ * first/last rows follow the card's corner radius.
+ */
+declare function RowLink({ label, description, leading, href, className, children, ...props }: BasicPageRowLinkProps): import("react").JSX.Element;
+/**
+ * Basic page layout. One stack, one gap rhythm — only title scale differs:
+ *
+ * ```tsx
+ * <BasicPage.Root>
+ *   <BasicPage.Title>Profile</BasicPage.Title>
+ *   <BasicPage.Stack>
+ *     <form>
+ *       <BasicPage.Card>
+ *         <BasicPage.Row label="Name" htmlFor="first-name">
+ *           <Input id="first-name" size="sm" />
+ *         </BasicPage.Row>
+ *       </BasicPage.Card>
+ *     </form>
+ *     <form>
+ *       <BasicPage.Header>
+ *         <BasicPage.SectionTitle>Agent profile</BasicPage.SectionTitle>
+ *         <BasicPage.Description>…</BasicPage.Description>
+ *       </BasicPage.Header>
+ *       <BasicPage.Card>…</BasicPage.Card>
+ *     </form>
+ *     <div>
+ *       <BasicPage.SectionTitle>Danger zone</BasicPage.SectionTitle>
+ *       <BasicPage.Card>
+ *         <BasicPage.Row label="Delete account" description="…">
+ *           <Button color="destructive" size="sm">Delete</Button>
+ *         </BasicPage.Row>
+ *       </BasicPage.Card>
+ *     </div>
+ *     <BasicPage.Callout>
+ *       <BasicPage.Header>
+ *         <BasicPage.CalloutTitle>Invitations</BasicPage.CalloutTitle>
+ *         <BasicPage.CalloutDescription>…</BasicPage.CalloutDescription>
+ *       </BasicPage.Header>
+ *       …invite form…
+ *     </BasicPage.Callout>
+ *   </BasicPage.Stack>
+ * </BasicPage.Root>
+ * ```
+ *
+ * Subpage — `Back` above the title, `RowLink` rows to drill in:
+ *
+ * ```tsx
+ * <BasicPage.Root>
+ *   <BasicPage.Back href="/settings">Settings</BasicPage.Back>
+ *   <BasicPage.Title>Billing</BasicPage.Title>
+ *   <BasicPage.Stack>
+ *     <div>
+ *       <BasicPage.Card>
+ *         <BasicPage.RowLink label="Invoices" href="/settings/invoices">
+ *           <BasicPage.Value>12 documents</BasicPage.Value>
+ *         </BasicPage.RowLink>
+ *       </BasicPage.Card>
+ *     </div>
+ *   </BasicPage.Stack>
+ * </BasicPage.Root>
+ * ```
+ */
+export declare const BasicPage: {
+    Root: typeof Root;
+    Back: typeof Back;
+    Title: typeof Title;
+    Stack: typeof Stack;
+    Header: typeof Header;
+    SectionTitle: typeof SectionTitle;
+    Description: typeof Description;
+    SectionFooter: typeof SectionFooter;
+    Card: typeof Card;
+    Item: typeof Item;
+    ItemPanel: typeof ItemPanel;
+    Callout: typeof Callout;
+    CalloutTitle: typeof CalloutTitle;
+    CalloutDescription: typeof CalloutDescription;
+    Row: typeof Row;
+    RowLink: typeof RowLink;
+    Value: typeof Value;
+    Alert: typeof Alert;
+    Footer: typeof Footer;
+};
+export {};

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

@@ -0,0 +1 @@
+export { BasicPage, BASIC_PAGE_CARD, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageFooterProps, type BasicPageItemPanelProps, } from './basic-page';

package/dist/src/sections/sidebar/sidebar.d.ts

@@ -31,7 +31,7 @@ export declare const SIDEBAR_HEADER_INSET: {
 };
 export type SidebarInset = keyof typeof SIDEBAR_ROOT_INSET;
 /** A nav row at rest and on hover. Active/inactive inks split below. */
-export declare const SIDEBAR_ITEM = "outline-pho-brand flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1";
+export declare const SIDEBAR_ITEM = "outline-pho-brand flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1";
 /**
  * Selected row — lifted onto the primary surface with the site hairline.
  * The icon carries the same ink as the label so the pair reads as one unit.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -201,6 +201,10 @@
       "types": "./dist/src/components/spinner/index.d.ts",
       "import": "./dist/components/spinner.js"
     },
+    "./components/status-view": {
+      "types": "./dist/src/components/status-view/index.d.ts",
+      "import": "./dist/components/status-view.js"
+    },
     "./components/notification": {
       "types": "./dist/src/components/notification/index.d.ts",
       "import": "./dist/components/notification.js"
@@ -209,9 +213,9 @@
       "types": "./dist/src/sections/sidebar/index.d.ts",
       "import": "./dist/sections/sidebar.js"
     },
-    "./sections/settings": {
-      "types": "./dist/src/sections/settings/index.d.ts",
-      "import": "./dist/sections/settings.js"
+    "./sections/basic-page": {
+      "types": "./dist/src/sections/basic-page/index.d.ts",
+      "import": "./dist/sections/basic-page.js"
     },
     "./icons": {
       "types": "./dist/src/icons/index.d.ts",

package/src/styles/theme.css

@@ -245,6 +245,20 @@
     oklch(0.619 0.152 149.3),
     oklch(0.72 0.162 149.5)
   );
+  /* Solid state fills — the state text inks reused as fills (high-contrast
+     Badge). Pair with text-pho-on-brand, which flips with them per mode. */
+  --background-color-pho-success-ink: light-dark(
+    oklch(0.549 0.136 149.3),
+    oklch(0.735 0.162 150.5)
+  );
+  --background-color-pho-warning-ink: light-dark(
+    oklch(0.572 0.125 69.8),
+    oklch(0.804 0.162 71.4)
+  );
+  --background-color-pho-error-ink: light-dark(
+    oklch(0.565 0.212 20.2),
+    oklch(0.696 0.198 14.9)
+  );
   --background-color-pho-error-primary: light-dark(
     oklch(0.642 0.245 21.5 / 0.08),
     oklch(0.642 0.245 21.5 / 0.15)
@@ -266,6 +280,9 @@
     oklch(0 0 0 / 0.15),
     oklch(1 0 0 / 0.15)
   );
+  /* Full primary ink — emphasized card edges that should read as solid
+     black/white, not the soft 15% primary hairline above. */
+  --border-color-pho-ink: light-dark(oklch(0 0 0), oklch(1 0 0));
   /* Hairline card stroke — the site's "BG/Card Stroke". */
   --border-color-pho-secondary: light-dark(oklch(0.949 0 0), oklch(0.244 0 0));
   --border-color-pho-tertiary: light-dark(
@@ -297,6 +314,9 @@
     oklch(0 0 0 / 0.15),
     oklch(1 0 0 / 0.15)
   );
+  /* Full primary ink — outlined control hover edges that should read as
+     solid black/white, not the soft 15% primary hairline above. */
+  --ring-color-pho-ink: light-dark(oklch(0 0 0), oklch(1 0 0));
   --ring-color-pho-secondary: light-dark(oklch(0.949 0 0), oklch(0.244 0 0));
   --ring-color-pho-brand: light-dark(oklch(0 0 0 / 0.4), oklch(1 0 0 / 0.4));
   --ring-color-pho-error: oklch(0.642 0.245 21.5);