@photon-ai/pho-ui 1.4.0 → 2.0.0

package/dist/components/popover.js

@@ -1,46 +1,5 @@
 "use client";
-import { t as e } from "../chunks/cn-DTiB6ek_.js";
-import "react";
-import { jsx as a } from "react/jsx-runtime";
-import { Popover as t } from "@base-ui/react/popover";
-var n = t.Root, s = t.Trigger, p = t.Portal, c = t.Close;
-function m({ className: r, sideOffset: o = 8, ...i }) {
-  return /* @__PURE__ */ a(t.Positioner, {
-    sideOffset: o,
-    className: e("z-50", r),
-    ...i
-  });
-}
-function l({ className: r, ...o }) {
-  return /* @__PURE__ */ a(t.Popup, {
-    className: e("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-w-[calc(100vw-2rem)] origin-[var(--transform-origin)] p-4 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
-    ...o
-  });
-}
-function u({ className: r, ...o }) {
-  return /* @__PURE__ */ a(t.Title, {
-    className: e("text-pho-primary text-base font-medium", r),
-    ...o
-  });
-}
-function g({ className: r, ...o }) {
-  return /* @__PURE__ */ a(t.Description, {
-    className: e("text-pho-description mt-1 text-base", r),
-    ...o
-  });
-}
-var P = {
-  Root: n,
-  Trigger: s,
-  Portal: p,
-  Positioner: m,
-  Popup: l,
-  Title: u,
-  Description: g,
-  Close: c
-};
+import { t as e } from "../chunks/popover-EL1SE1kj.js";
 export {
-  P as Popover
+  e as Popover
 };
-
-//# sourceMappingURL=popover.js.map

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../src/components/toast/toast.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseToast.Provider;\nconst Portal = BaseToast.Portal;\nconst Action = BaseToast.Action;\n\n/** Imperative toast API: `const toast = useToastManager(); toast.add({ title })`. */\nconst useToastManager = BaseToast.useToastManager;\nconst createToastManager = BaseToast.createToastManager;\n\nfunction Viewport({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Viewport>) {\n  return (\n    <BaseToast.Viewport\n      className={cn(\n        \"fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToast.Root>) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        // Floating layer: keeps its elevation shadow, sits on the card surface\n        // with the site hairline (ring-pho-secondary).\n        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base relative w-full ring-1 select-none ring-inset\",\n        \"[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out\",\n        \"data-[starting-style]:translate-x-full data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:translate-x-full data-[ending-style]:opacity-0\",\n        \"data-[swiping]:duration-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Content({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Content>) {\n  return (\n    <BaseToast.Content\n      className={cn(\"flex flex-col gap-1 p-4 pr-10\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BaseToast.Title>) {\n  return (\n    <BaseToast.Title\n      className={cn(\"text-pho-primary text-base font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Description>) {\n  return (\n    <BaseToast.Description\n      className={cn(\"text-pho-description text-base\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Close({ className, ...props }: StyledProps<typeof BaseToast.Close>) {\n  return (\n    <BaseToast.Close\n      className={cn(\n        \"text-pho-secondary hover:text-pho-secondary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-sm transition focus-visible:outline-2 [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toast built on Base UI `Toast` — a transient, non-blocking notification.\n * Wrap your app in `Toast.Provider`, render a `Toast.Portal` → `Viewport` that\n * maps `useToastManager().toasts` to `Toast.Root`s, then call\n * `useToastManager().add({ title, description })` to show one. Use a toast for\n * confirmation of a background action; for a choice the user must make, use\n * `AlertDialog`.\n */\nexport const Toast = {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Close,\n  Action,\n  useToastManager,\n  createToastManager,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAU,UACrB,IAAS,EAAU,QACnB,IAAS,EAAU,QAGnB,IAAkB,EAAU,iBAC5B,IAAqB,EAAU;AAErC,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAU,UAAX;AAAA,IACE,WAAW,EACT,mGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EAGT,+HACA,kHACA,0EACA,sEACA,6BACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAAG,iCAAiC,CAAS;AAAA,IACxD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,kCAAkC,CAAS;AAAA,IACzD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,+OACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAUA,IAAa,IAAQ;AAAA,EACnB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AACF"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/components/toast/toast.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseToast.Provider;\nconst Portal = BaseToast.Portal;\nconst Action = BaseToast.Action;\n\n/** Imperative toast API: `const toast = useToastManager(); toast.add({ title })`. */\nconst useToastManager = BaseToast.useToastManager;\nconst createToastManager = BaseToast.createToastManager;\n\nfunction Viewport({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Viewport>) {\n  return (\n    <BaseToast.Viewport\n      className={cn(\n        \"fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToast.Root>) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        // Floating layer: keeps its elevation shadow, sits on the card surface\n        // with the site hairline (ring-pho-secondary).\n        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base relative w-full ring-1 select-none ring-inset\",\n        \"[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out\",\n        \"data-[starting-style]:translate-x-full data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:translate-x-full data-[ending-style]:opacity-0\",\n        \"data-[swiping]:duration-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Content({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Content>) {\n  return (\n    <BaseToast.Content\n      className={cn(\"flex flex-col gap-1 p-4 pr-10\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BaseToast.Title>) {\n  return (\n    <BaseToast.Title\n      className={cn(\"text-pho-primary text-base font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Description>) {\n  return (\n    <BaseToast.Description\n      className={cn(\"text-pho-description text-base\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Close({ className, ...props }: StyledProps<typeof BaseToast.Close>) {\n  return (\n    <BaseToast.Close\n      className={cn(\n        \"text-pho-secondary hover:text-pho-secondary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-sm transition focus-visible:outline-2 [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toast built on Base UI `Toast` — a transient, non-blocking notification.\n * Wrap your app in `Toast.Provider`, render a `Toast.Portal` → `Viewport` that\n * maps `useToastManager().toasts` to `Toast.Root`s, then call\n * `useToastManager().add({ title, description })` to show one. Use a toast for\n * confirmation of a background action; for a choice the user must make, use\n * `Dialog`.\n */\nexport const Toast = {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Close,\n  Action,\n  useToastManager,\n  createToastManager,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAU,UACrB,IAAS,EAAU,QACnB,IAAS,EAAU,QAGnB,IAAkB,EAAU,iBAC5B,IAAqB,EAAU;AAErC,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAU,UAAX;AAAA,IACE,WAAW,EACT,mGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EAGT,+HACA,kHACA,0EACA,sEACA,6BACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAAG,iCAAiC,CAAS;AAAA,IACxD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,kCAAkC,CAAS;AAAA,IACzD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,+OACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAUA,IAAa,IAAQ;AAAA,EACnB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AACF"}

package/dist/index.js

@@ -1,61 +1,73 @@
 "use client";
 import { t as s } from "./chunks/cn-DTiB6ek_.js";
-import { n as o, r as E, t as _ } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as S } from "./chunks/resolve-variant-CcD8iG5l.js";
-import { n as I, r as T, t as i } from "./chunks/use-press-pulse-8iorQPsh.js";
+import { n as r, r as o, t as E } from "./chunks/link-provider-9TFNyDqO.js";
+import { t as i } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as I, r as n, t as A } from "./chunks/use-press-pulse-8iorQPsh.js";
 import "./utils.js";
-import { a as B, c as e, d as R, f as C, i as O, l as f, n as p, o as P, r as u, s as D, t as N, u as L } from "./chunks/close-button-B8gF5UNk.js";
-import { a as U, c, i as G, n as l, o as M, r as d, s as g, t as k } from "./chunks/sidebar-DGpEKxOn.js";
-import { a as F, i as Z, n as b, o as v, r as H, s as w, t as x } from "./chunks/basic-page-4_GZOvRr.js";
-import { t as h } from "./chunks/input-CxS7ndpb.js";
-import { t as q } from "./chunks/input-group-D6dlma8k.js";
-import { n as z, t as J } from "./chunks/card-9cGnv-VD.js";
-import { n as Q, t as X } from "./chunks/dialog-Ba0UUE5g.js";
-import { i as aa, n as sa, r as ta, t as oa } from "./chunks/status-view-CcbctPqR.js";
+import { a as e, c as R, d as p, i as B, l as C, n as O, o as P, r as f, s as u, t as D, u as N } from "./chunks/button-X5wsWvRa.js";
+import { a as c, c as l, i as V, l as U, n as G, o as d, r as M, s as b, t as g } from "./chunks/error-DR6G2LmG.js";
+import { a as F, i as W, n as h, o as Z, r as v, s as w, t as x } from "./chunks/basic-page-D1zm81YS.js";
+import { a as z, c as Y, i as j, n as q, o as y, r as J, s as K, t as Q } from "./chunks/sidebar-DDJC1MeD.js";
+import { t as $ } from "./chunks/input-D3XQcC4J.js";
+import { t as sa } from "./chunks/close-button-xadxp0j8.js";
+import { t as ra } from "./chunks/input-group-D6dlma8k.js";
+import { n as Ea, t as _a } from "./chunks/card-9cGnv-VD.js";
+import { n as Sa, t as Ia } from "./chunks/dialog-Caze1vkf.js";
+import { i as Aa, n as Ta, r as ma, t as ea } from "./chunks/status-view-CcbctPqR.js";
+import "./components/status-view.js";
 export {
   x as BASIC_PAGE_CALLOUT,
-  b as BASIC_PAGE_CARD,
-  H as BASIC_PAGE_ITEM,
-  Z as BASIC_PAGE_ITEM_PANEL,
+  h as BASIC_PAGE_CARD,
+  v as BASIC_PAGE_ITEM,
+  W as BASIC_PAGE_ITEM_PANEL,
   F as BASIC_PAGE_ITEM_PANEL_DIVIDED,
-  v as BASIC_PAGE_ROW,
-  p as BUTTON_COLORS,
-  u as BUTTON_SHAPES,
-  O as BUTTON_SIZES,
+  Z as BASIC_PAGE_ROW,
+  D as BUTTON_COLORS,
+  O as BUTTON_SHAPES,
+  f as BUTTON_SIZES,
   B as BUTTON_VARIANTS,
   w as BasicPage,
-  P as Button,
-  D as ButtonLink,
-  J as CARD_SURFACE,
-  i as CONTROL_PRESS_SCALE,
+  e as Button,
+  P as ButtonLink,
+  _a as CARD_SURFACE,
+  A as CONTROL_PRESS_SCALE,
   I as CONTROL_PRESS_SPRING,
-  z as Card,
-  N as CloseButton,
-  X as Dialog,
-  e as EFFECT_BUTTON_SIZES,
-  f as EffectButton,
-  L as EffectButtonLink,
-  h as Input,
-  q as InputGroup,
-  _ as LinkProvider,
-  k as SIDEBAR_HEADER_INSET,
-  l as SIDEBAR_ITEM,
-  d as SIDEBAR_ITEM_ACTIVE,
-  G as SIDEBAR_ITEM_INACTIVE,
-  U as SIDEBAR_ROOT,
-  M as SIDEBAR_ROOT_BASE,
-  g as SIDEBAR_ROOT_INSET,
-  oa as STATUS_VIEW,
-  sa as STATUS_VIEW_COPY,
-  ta as STATUS_VIEW_SIZES,
-  c as Sidebar,
-  aa as StatusView,
-  R as buttonVariants,
+  Ea as Card,
+  sa as CloseButton,
+  Ia as Dialog,
+  u as EFFECT_BUTTON_SIZES,
+  R as EffectButton,
+  C as EffectButtonLink,
+  g as Error,
+  G as ErrorView,
+  M as GENERIC_ERROR_TITLE,
+  $ as Input,
+  ra as InputGroup,
+  E as LinkProvider,
+  Q as SIDEBAR_HEADER_INSET,
+  q as SIDEBAR_ITEM,
+  J as SIDEBAR_ITEM_ACTIVE,
+  j as SIDEBAR_ITEM_INACTIVE,
+  z as SIDEBAR_ROOT,
+  y as SIDEBAR_ROOT_BASE,
+  K as SIDEBAR_ROOT_INSET,
+  ea as STATUS_VIEW,
+  Ta as STATUS_VIEW_COPY,
+  ma as STATUS_VIEW_SIZES,
+  Y as Sidebar,
+  Aa as StatusView,
+  N as buttonVariants,
+  V as capitalizeFirst,
   s as cn,
-  C as effectButtonVariants,
-  E as isReactComponent,
-  S as resolveVariant,
-  Q as useDialogPending,
-  o as useLinkComponent,
-  T as usePressPulse
+  c as describeError,
+  p as effectButtonVariants,
+  d as httpReasonPhrase,
+  b as httpStatusExplanation,
+  l as isProblem,
+  o as isReactComponent,
+  U as parseProblem,
+  i as resolveVariant,
+  Sa as useDialogPending,
+  r as useLinkComponent,
+  n as usePressPulse
 };

package/dist/primitives.js

@@ -43,6 +43,7 @@ import "./primitives/tooltip.js";
 export * from "@base-ui/react/field";
 export * from "@base-ui/react/separator";
 export * from "@base-ui/react/dialog";
+export * from "@base-ui/react/popover";
 export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/accordion";
 export * from "@base-ui/react/alert-dialog";
@@ -65,7 +66,6 @@ export * from "@base-ui/react/meter";
 export * from "@base-ui/react/navigation-menu";
 export * from "@base-ui/react/number-field";
 export * from "@base-ui/react/otp-field";
-export * from "@base-ui/react/popover";
 export * from "@base-ui/react/preview-card";
 export * from "@base-ui/react/progress";
 export * from "@base-ui/react/radio";

package/dist/sections/basic-page.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-4_GZOvRr.js";
+import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-D1zm81YS.js";
 export {
   C as BASIC_PAGE_CALLOUT,
   I as BASIC_PAGE_CARD,

package/dist/sections/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-DGpEKxOn.js";
+import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-DDJC1MeD.js";
 export {
   T as SIDEBAR_HEADER_INSET,
   R as SIDEBAR_ITEM,

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

@@ -0,0 +1,114 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { Dialog as PhoDialog } from '../dialog';
+declare function Root({ className, children, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
+/**
+ * The input row — a bottom hairline separates it from the list. Position
+ * leading icons absolutely and pad the input (`pl-9`), mirroring
+ * `Autocomplete.InputGroup`.
+ */
+declare function InputGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function Input({ className, value, ref: consumerRef, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react").JSX.Element;
+declare function List({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+declare function Empty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
+/**
+ * Row layout mode:
+ * - `item` / `subitem` / `subsubitem` — idle hierarchy (icon column + indent)
+ * - `result` — flat search hit (breadcrumb + trailing scope)
+ */
+export type CommandItemLevel = "item" | "subitem" | "subsubitem" | "result";
+type ItemPrimitiveProps = ComponentProps<typeof CommandPrimitive.Item>;
+export interface CommandItemProps extends Omit<ItemPrimitiveProps, "children" | "title"> {
+    /**
+     * Row depth / mode in the palette:
+     * - `item` — page / top destination (icon + title)
+     * - `subitem` — section under an item (label aligns with the item title)
+     * - `subsubitem` — row under a section (one step deeper)
+     * - `result` — flat search hit (`title` + `path` crumbs + `scope`)
+     */
+    level?: CommandItemLevel;
+    /**
+     * Leading glyph. On idle `item` rows (and reserved for sub-levels). On
+     * `result` rows, pass the resolved icon (self → parent → grandparent).
+     */
+    icon?: ReactNode;
+    /**
+     * When `level="result"`, force the icon column so labels align across the
+     * list even if this row's `icon` is empty. Set true when any sibling result
+     * has an icon; omit when the whole result set is icon-less.
+     */
+    iconSlot?: boolean;
+    /** Primary label. Prefer this over free-form children for the shared layout. */
+    title?: ReactNode;
+    /**
+     * Ancestors after `title` for `level="result"` — parent → page
+     * (e.g. `["Agent profile", "Settings"]` → `Name < Agent profile < Settings`).
+     */
+    path?: ReactNode[];
+    /**
+     * Trailing scope for `level="result"` — `Project` vs `Personal`, not a nav group.
+     */
+    scope?: ReactNode;
+    /** Shows a trailing external-link glyph (opens outside the app). */
+    external?: boolean;
+    /**
+     * Free-form content. When `title` is set, rendered after the label stack.
+     * When `title` is omitted, becomes the row body (legacy / simple items).
+     */
+    children?: ReactNode;
+}
+/** Leading icon column — `size-4`, secondary ink. */
+declare function ItemIcon({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** Primary label — medium + primary ink on `item` rows. */
+declare function ItemTitle({ className, level, ...props }: ComponentProps<"span"> & {
+    level?: CommandItemLevel;
+}): import("react").JSX.Element;
+declare function Item({ className, level, icon, iconSlot, title, path, scope, external, children, value, ...props }: CommandItemProps): import("react").JSX.Element;
+declare function Separator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
+declare function Loading({ className, ...props }: ComponentProps<typeof CommandPrimitive.Loading>): import("react").JSX.Element;
+type DialogRootProps = ComponentProps<typeof PhoDialog.Root>;
+interface CommandDialogProps extends ComponentProps<typeof CommandPrimitive> {
+    /** Controlled dialog state — pass straight through to `Dialog.Root`. */
+    open?: DialogRootProps["open"];
+    onOpenChange?: DialogRootProps["onOpenChange"];
+    /** Accessible name for the palette (dialog and command menu). */
+    label?: string;
+    /** Extra classes for the dialog panel (not the command root). */
+    className?: string;
+}
+/**
+ * A command palette in a modal — Pho's `Dialog` overlay (Base UI) around a
+ * `Command.Root`, raised above center. We deliberately skip cmdk's own
+ * `Command.Dialog` (Radix) so overlays stay on one primitive stack.
+ *
+ * List height springs via `AnimatedHeight` (same feel as the Card shell on
+ * onboarding / invite) — the input row stays put while results resize.
+ */
+declare function Dialog({ open, onOpenChange, label, className, children, ...props }: CommandDialogProps): import("react").JSX.Element;
+/**
+ * Command menu built on `cmdk` — a filterable list of actions driven from a
+ * single input, keyboard-first. Compose inline (`Command.Root`) or as a
+ * ⌘K-style modal palette (`Command.Dialog`, which owns the overlay). By
+ * default cmdk filters and ranks items for you; pass `shouldFilter={false}`
+ * to render your own result set (e.g. hierarchy-preserving navigation).
+ *
+ * Rows share one layout via `Command.Item` `level` — idle
+ * `item` → `subitem` → `subsubitem`, or flat `result` while searching.
+ */
+export declare const Command: {
+    Root: typeof Root;
+    InputGroup: typeof InputGroup;
+    Input: typeof Input;
+    List: typeof List;
+    Empty: typeof Empty;
+    Group: typeof Group;
+    Item: typeof Item;
+    ItemIcon: typeof ItemIcon;
+    ItemTitle: typeof ItemTitle;
+    Separator: typeof Separator;
+    Loading: typeof Loading;
+    Dialog: typeof Dialog;
+};
+/** Re-export of cmdk's state selector hook (search, value, filtered counts). */
+export { useCommandState };

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

@@ -0,0 +1 @@
+export { Command, useCommandState, type CommandItemLevel, type CommandItemProps, } from './command';

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

@@ -40,6 +40,12 @@ declare function Popup({ className, ...props }: StyledProps<typeof BaseDialog.Po
 declare function Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>): import("react").JSX.Element;
 declare function Description({ className, ...props }: StyledProps<typeof BaseDialog.Description>): import("react").JSX.Element;
 interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /**
+     * Decorative icon above the title — typically a Tabler outline icon.
+     * Rendered aria-hidden in secondary ink at 32px (`[&>svg]:size-8`). Pass a
+     * styled node to override the ink; the size is owned by the slot.
+     */
+    icon?: ReactNode;
     /** Heading rendered in the panel header. */
     title?: ReactNode;
     /** Supporting text under the title. */
@@ -77,7 +83,85 @@ 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, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+declare function Content({ icon, title, description, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+/**
+ * Near-fullscreen popup — the viewport minus a breathing ring, floating over
+ * a backdrop (the page stays visible through the gap, so it dims like any
+ * floating layer). Still a card: border, elevation, rounded corners; the
+ * scale gesture stays but shrinks to 98% — at this size 95% reads like a jump.
+ */
+declare function InsetPopup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+interface InsetContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /** Decorative icon above the title — same treatment as `Content`. */
+    icon?: ReactNode;
+    /** Heading rendered in the panel header. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    /**
+     * Bottom action row. Iron rule as `Content`: when `actions` is set, the
+     * header close button is never shown — dismiss via the actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Header close control. Only applies when `actions` is absent.
+     * @default true
+     */
+    showClose?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Convenience near-fullscreen panel: header pinned on top, body filling and
+ * scrolling on its own, optional action row pinned at the bottom. Sits
+ * between `Content` (a focused card) and `FullscreenContent` (a page
+ * takeover): use it for roomy working surfaces — pickers, editors, previews —
+ * that still want the page peeking through an edge.
+ */
+declare function InsetContent({ icon, title, description, actions, showClose, children, className, ...props }: InsetContentProps): import("react").JSX.Element;
+/**
+ * Full-viewport popup — a page-surface takeover instead of a floating card.
+ * No backdrop: the popup itself is the layer. Fade only; scale is a floating-
+ * card gesture and reads wrong at viewport size.
+ */
+declare function FullscreenPopup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+interface FullscreenContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /**
+     * Decorative icon above the title — same chrome as `Content`, but 48px
+     * (`size-12`) for viewport-scale gates.
+     */
+    icon?: ReactNode;
+    /** Heading of the takeover. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    /**
+     * Action row under the body. Iron rule as `Content`: when `actions` is set,
+     * the corner close button is never shown — dismiss via the actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Corner close control. Only applies when `actions` is absent.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Classes on the viewport-centering frame (the `min-h-full` flex host).
+     * Use to drop the default optical `pb-20` when the stack grows (e.g. a
+     * captcha) so true center stays put: `frameClassName="pb-6"`.
+     */
+    frameClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * Convenience full-screen panel: the whole viewport becomes the dialog, with
+ * a centered column at the standalone-flow width (28rem — the same measure as
+ * onboarding / invite cards). Column height follows its content through
+ * `AnimatedHeight` (same spring as the Card shell), so step swaps — phone →
+ * OTP → captcha — glide instead of jumping. Use for gates the visitor must
+ * deal with before the page behind makes sense (e.g. binding a phone number);
+ * prefer `Content` for everything conversational.
+ */
+declare function FullscreenContent({ icon, title, description, actions, showClose, frameClassName, children, className, ...props }: FullscreenContentProps): import("react").JSX.Element;
 /**
  * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via
  * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`). `Dialog.Action`
@@ -90,10 +174,14 @@ export declare const Dialog: {
     Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Backdrop: typeof Backdrop;
     Popup: typeof Popup;
+    InsetPopup: typeof InsetPopup;
+    FullscreenPopup: typeof FullscreenPopup;
     Title: typeof Title;
     Description: typeof Description;
     Close: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
     Action: typeof Action;
     Content: typeof Content;
+    InsetContent: typeof InsetContent;
+    FullscreenContent: typeof FullscreenContent;
 };
 export {};

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

@@ -13,8 +13,8 @@ declare function Description({ className, ...props }: StyledProps<typeof BaseDra
 /**
  * Drawer built on Base UI `Drawer` — a panel that slides in from the edge
  * (here, the right) with swipe-to-dismiss. Use it for secondary tasks and
- * navigation that should keep page context; for a forced decision use
- * `AlertDialog`, and for a centered modal use `Dialog`. Compose `Drawer.Portal`
+ * navigation that should keep page context; for a decision or a centered modal
+ * use `Dialog`. Compose `Drawer.Portal`
  * → `Backdrop` → `Viewport` → `Popup` → `Content`.
  */
 export declare const Drawer: {

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

@@ -0,0 +1,56 @@
+import { ComponentProps, ReactNode } from 'react';
+import { StatusViewSize } from '../status-view/status-view';
+interface ErrorBaseProps {
+    /** The caught value — a problem body, an `Error` wrapping one, or unknown. */
+    error?: unknown;
+    /** Override the derived message. */
+    children?: ReactNode;
+}
+export interface ErrorProps extends ErrorBaseProps, Omit<ComponentProps<"div">, keyof ErrorBaseProps> {
+}
+/**
+ * Error — one line of red ink naming a server failure (4xx / 5xx), placed
+ * inline: under a form, in a card, beside the action that failed. Give it the
+ * caught value and it renders the problem's `detail` (falling back to `title`,
+ * then to a generic line), plus a docs link when the problem carries one.
+ * Renders nothing while `error` is nullish, so it can stay mounted.
+ *
+ * For a region or page that failed to load, use {@link ErrorView}.
+ */
+export declare function Error({ error, children, className, ...props }: ErrorProps): import("react").JSX.Element | null;
+export declare namespace Error {
+    var displayName: string;
+}
+interface ErrorViewBaseProps {
+    /** The caught value — a problem body, an `Error` wrapping one, or unknown. */
+    error?: unknown;
+    /** Override the derived title. */
+    title?: ReactNode;
+    /** Override the derived description. */
+    description?: ReactNode;
+    /** Override the warning glyph. */
+    icon?: ReactNode;
+    /** Offer a retry — renders a "Try again" button. */
+    onRetry?: () => void;
+    /** Replace the built-in action row entirely. */
+    actions?: ReactNode;
+    /** Size variant — StatusView's axis. @default "base" */
+    size?: StatusViewSize;
+}
+export interface ErrorViewProps extends ErrorViewBaseProps, Omit<ComponentProps<"div">, keyof ErrorViewBaseProps | "children"> {
+}
+/**
+ * ErrorView — the failed state of a region or page, built on StatusView:
+ * warning icon over the problem's `title`, its `detail` and remediation
+ * below, an action row (`onRetry` and the problem's docs link), and the
+ * request id as a footnote for support. Announces via `role="alert"`.
+ *
+ * Use `size="sm"` inside cards and panels, the default `base` for whole
+ * pages. Renders nothing while `error` is nullish (unless given a static
+ * `title`), so it can sit unconditionally next to a query.
+ */
+export declare function ErrorView({ error, title, description, icon, onRetry, actions, size, ...props }: ErrorViewProps): import("react").JSX.Element | null;
+export declare namespace ErrorView {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export * from './problem';
+export * from './error';

package/dist/src/components/error/problem.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Client-side mirror of the `@photon-hq/error` response contract — the
+ * RFC 9457 Problem Details body every Photon service returns for 4xx / 5xx.
+ * Machine logic branches on `code`; `title` / `detail` / `remediation` are
+ * the human-readable copy, already reviewed server-side and safe to render.
+ *
+ * Fetch layers may also hand us a thin status-only shape when the response
+ * was not ok but the body was not a contract problem — `title` + `status`
+ * still count so the UI can disclose the HTTP code we already know.
+ */
+export interface ProblemRemediation {
+    /** What the user can do about it — a full sentence. */
+    action?: string;
+    /** Docs URL explaining the problem. */
+    documentation?: string;
+}
+export interface Problem {
+    /** Stable machine-readable key (`RATE_LIMITED`) — the field to branch on. */
+    code?: string;
+    /** Human summary of the problem type ("Too Many Requests"). */
+    title: string;
+    /** HTTP status (4xx / 5xx). */
+    status: number;
+    /** Problem type URI (`urn:photon:problem:*` or an https URL). */
+    type?: string;
+    /** Occurrence-specific human sentence. */
+    detail?: string;
+    /** Correlation id for support (`X-Request-ID`). */
+    requestId?: string;
+    remediation?: ProblemRemediation;
+    /** RFC 9457 extensions (`issues`, `actualVersion`, …). */
+    [extension: string]: unknown;
+}
+/** Structural check: `title` + a 4xx/5xx status. `code` is optional. */
+export declare function isProblem(value: unknown): value is Problem;
+/**
+ * Find the problem a caught value carries — the value itself, one typed onto
+ * an error as a `problem` field (dashboard's `ApiError` shape), or one
+ * wrapped in an `Error` `cause` chain (how fetch layers usually rethrow a
+ * parsed body). Returns `null` when there is none.
+ */
+export declare function parseProblem(error: unknown): Problem | null;
+export interface ErrorDescription {
+    /** Short name of the failure — the problem `title`, or a generic fallback. */
+    title: string;
+    /** Sentence(s) to show — `detail` and `remediation.action` joined. */
+    description?: string;
+    /** Docs URL from `remediation.documentation`. */
+    documentation?: string;
+    /** Correlation id for support. */
+    requestId?: string;
+    /** The matched problem, when the input carried one. */
+    problem?: Problem;
+}
+/**
+ * Anything that isn't a problem renders as this — raw `Error` messages are
+ * not contract copy and never shown (the same fail-closed stance as the
+ * server side of `@photon-hq/error`). Always a full sentence (trailing
+ * period).
+ */
+export declare const GENERIC_ERROR_TITLE = "Something went wrong.";
+/** Reason phrase for a status — map first, then a non-generic `problem.title`. */
+export declare function httpReasonPhrase(status: number, fallbackTitle?: string): string | undefined;
+/** Human sentence for a bare HTTP status, when the body carried no copy. */
+export declare function httpStatusExplanation(status: number): string;
+/**
+ * Sentence-case the first character. Server `detail` / `title` sometimes
+ * arrive fully lowercase; UI copy always leads with a capital.
+ */
+export declare function capitalizeFirst(text: string): string;
+/**
+ * Turn a caught value into displayable copy. `Error` and `ErrorView` call
+ * this internally; use it directly for other surfaces (a toast, a banner).
+ *
+ * Status-only failures (HTTP not ok, but no contract `code` / copy) still
+ * keep `problem` so the details panel can show the status. Title becomes the
+ * reason phrase (e.g. "Bad Gateway"); description is a short explanation —
+ * not just the numeric code.
+ */
+export declare function describeError(error: unknown): ErrorDescription;

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

@@ -65,7 +65,7 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * {@link Toast} — render it as the child of a `Toast.Root` whose own surface you
  * neutralize (`className="bg-transparent p-0 shadow-none ring-0"`) so the
  * manager owns motion and swipe while this card owns the look. For a choice the
- * user must make, use `AlertDialog` instead.
+ * user must make, use `Dialog` instead.
  */
 export declare function Notification({ color, title, description, confirmLabel, onConfirm, dismissLabel, onClose, icon, className, ref, ...props }: NotificationProps): import("react").JSX.Element;
 export declare namespace Notification {