@nexub/patterns 1.5.1 → 1.7.0

package/dist/{chunk-Y3TNGDKC.js → chunk-5IORYY2L.js}

@@ -10,8 +10,8 @@ var NotificationItem = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-start gap-3 p-3 rounded-lg transition-colors hover:bg-[var(--color-bg-subtle)]",
-        !read && "bg-[var(--color-bg-subtle)]",
+        "nx-state-layer flex items-start gap-3 p-3 rounded-shape-container",
+        !read && "bg-[var(--color-surface-container-low)]",
         className
       ),
       ...props,
@@ -19,15 +19,16 @@ var NotificationItem = React.forwardRef(
         !read && /* @__PURE__ */ jsx(
           "span",
           {
-            className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[var(--color-brand-primary-500)]",
+            className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[var(--color-primary)]",
+            role: "img",
             "aria-label": "Unread"
           }
         ),
         icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 mt-0.5", children: icon }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 line-clamp-2", children: description }),
-          timestamp && /* @__PURE__ */ jsx("time", { className: "text-xs text-[var(--color-text-muted)] mt-1 block", children: timestamp })
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-on-surface)] truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)] mt-0.5 line-clamp-2", children: description }),
+          timestamp && /* @__PURE__ */ jsx("time", { className: "text-xs text-[var(--color-on-surface-muted)] mt-1 block", children: timestamp })
         ] }),
         onDismiss && /* @__PURE__ */ jsx(
           "button",
@@ -35,7 +36,7 @@ var NotificationItem = React.forwardRef(
             type: "button",
             onClick: onDismiss,
             "aria-label": "Dismiss notification",
-            className: "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] p-1 rounded",
+            className: "shrink-0 text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] p-1 rounded-shape-control",
             children: "\xD7"
           }
         )

package/dist/{chunk-TLOLIMPY.js → chunk-5JU6HUVJ.js}

@@ -29,7 +29,7 @@ var ListDetail = React.forwardRef(
         "aria-label": listLabel,
         className: cn(
           "min-h-0 w-full shrink-0 flex-col overflow-y-auto",
-          "[@container(min-width:720px)]:flex [@container(min-width:720px)]:border-r [@container(min-width:720px)]:border-[var(--color-outline-variant)]",
+          "[@container(min-width:720px)]:flex [@container(min-width:720px)]:border-e [@container(min-width:720px)]:border-[var(--color-outline-variant)]",
           widths[listWidth],
           showDetail ? "hidden" : "flex"
         ),
@@ -46,7 +46,7 @@ var ListDetail = React.forwardRef(
           showDetail ? "flex" : "hidden"
         ),
         children: [
-          onBack && /* @__PURE__ */ jsx("div", { className: "p-2 [@container(min-width:720px)]:hidden", children: /* @__PURE__ */ jsx(IconButton, { label: backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ArrowLeft, { size: "md", "aria-hidden": "true" }) }) }),
+          onBack && /* @__PURE__ */ jsx("div", { className: "p-2 [@container(min-width:720px)]:hidden", children: /* @__PURE__ */ jsx(IconButton, { label: backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ArrowLeft, { size: "md", "aria-hidden": "true", className: "rtl:-scale-x-100" }) }) }),
           detail
         ]
       }

package/dist/{chunk-AEYLZU3F.js → chunk-7NYGYETG.js}

@@ -21,7 +21,7 @@ var UserCard = React.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-center gap-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4",
+          "flex items-center gap-3 rounded-shape-container border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] bg-[var(--color-surface-elevated)] p-4",
           className
         ),
         ...props,
@@ -36,9 +36,9 @@ var UserCard = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-text-primary)] truncate", children: name }),
-            role && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)] truncate", children: role }),
-            email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: email })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-on-surface)] truncate", children: name }),
+            role && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-on-surface-muted)] truncate", children: role }),
+            email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-on-surface-variant)] truncate", children: email })
           ] }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
         ]

package/dist/{chunk-ZFHA46UX.js → chunk-H5UTW5ML.js}

@@ -16,12 +16,12 @@ function AppIcon({ app }) {
         alt: "",
         width: 40,
         height: 40,
-        className: "h-10 w-10 rounded-xl object-cover",
+        className: "h-10 w-10 rounded-[12px] object-cover",
         onError: () => setFailed(true)
       }
     );
   }
-  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-xl", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-[12px]", "aria-hidden": "true" });
 }
 var AppLauncher = React.forwardRef(
   ({ apps, onNavigate, surface = "solid", label = "Nexub apps", className }, ref) => {
@@ -75,9 +75,9 @@ var AppLauncher = React.forwardRef(
               "aria-current": app.current ? "page" : void 0,
               onClick: (e) => onClick(e, app),
               className: cn(
-                "flex flex-col items-center gap-1.5 rounded-lg px-1 py-3 text-center text-xs text-[var(--color-text-primary)] transition-colors",
-                "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-                app.current && "bg-[var(--color-bg-subtle)] font-semibold"
+                "flex flex-col items-center gap-1.5 rounded-[8px] px-1 py-3 text-center text-xs text-[var(--color-on-surface)] transition-colors",
+                "hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+                app.current && "bg-[var(--color-surface-container-low)] font-semibold"
               ),
               children: [
                 /* @__PURE__ */ jsx(AppIcon, { app }),

package/dist/{chunk-AOE6GQSH.js → chunk-HMJRSNJD.js}

@@ -22,11 +22,11 @@ function AuthCard({
       children: [
         logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-center", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--color-text-primary)]", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--color-on-surface)]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-6 flex flex-col gap-4", children }),
-        footer && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-[var(--color-text-muted)]", children: footer })
+        /* @__PURE__ */ jsx("div", { className: "rounded-shape-container border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] bg-[var(--color-surface-elevated)] shadow-elevation-1 p-6 flex flex-col gap-4", children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-[var(--color-on-surface-muted)]", children: footer })
       ]
     }
   );

package/dist/{chunk-YX7UO577.js → chunk-HYC5N5MO.js}

@@ -9,9 +9,8 @@ var Root = React.forwardRef(
     "ul",
     {
       ref,
-      role: "feed",
       "aria-label": "Activity feed",
-      className: cn("flex flex-col divide-y divide-[var(--color-border-default)]", className),
+      className: cn("flex flex-col divide-y divide-[var(--color-outline-variant)]", className),
       ...props,
       children
     }
@@ -21,10 +20,10 @@ Root.displayName = "ActivityFeed.Root";
 var Item = ({ avatar, title, description, timestamp, className }) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3 py-3", className), children: [
   avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0 mt-0.5", children: avatar }),
   /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description })
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-on-surface)]", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)] mt-0.5", children: description })
   ] }),
-  timestamp && /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs text-[var(--color-text-muted)]", children: timestamp })
+  timestamp && /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs text-[var(--color-on-surface-muted)]", children: timestamp })
 ] });
 Item.displayName = "ActivityFeed.Item";
 var ActivityFeed = { Root, Item };

package/dist/{chunk-7GYTYFUD.js → chunk-K5EFLRKU.js}

@@ -2,7 +2,7 @@
 
 // src/components/StatCard/StatCard.tsx
 import * as React from "react";
-import { cn } from "@nexub/react";
+import { cn, NumberTicker } from "@nexub/react";
 import { TrendingUp, TrendingDown, Minus } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var StatCard = React.forwardRef(
@@ -13,32 +13,32 @@ var StatCard = React.forwardRef(
     deltaType = "neutral",
     icon,
     description,
+    animate = false,
     className,
     ...props
   }, ref) => {
-    const deltaColor = deltaType === "increase" ? "var(--color-success-500)" : deltaType === "decrease" ? "var(--color-error-500)" : "var(--color-text-muted)";
+    const deltaColor = deltaType === "increase" ? "text-[var(--color-success)]" : deltaType === "decrease" ? "text-[var(--color-error)]" : "text-[var(--color-on-surface-muted)]";
     const DeltaIcon = deltaType === "increase" ? TrendingUp : deltaType === "decrease" ? TrendingDown : Minus;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-6 flex flex-col gap-3",
+          "rounded-shape-container border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] bg-[var(--color-surface-elevated)] p-6 flex flex-col gap-3",
           className
         ),
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-text-muted)]", children: label }),
-            icon && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-muted)]", children: icon })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-on-surface-muted)]", children: label }),
+            icon && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight text-[var(--color-text-primary)]", children: value }),
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight tabular-nums text-[var(--color-on-surface)]", children: animate && (typeof value === "number" || typeof value === "string") ? /* @__PURE__ */ jsx(NumberTicker, { value, "aria-live": "polite" }) : value }),
           (delta || description) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             delta && /* @__PURE__ */ jsxs(
               "span",
               {
-                className: "inline-flex items-center gap-1 text-xs font-medium",
-                style: { color: deltaColor },
+                className: cn("inline-flex items-center gap-1 text-xs font-medium", deltaColor),
                 "data-delta-type": deltaType,
                 children: [
                   /* @__PURE__ */ jsx(DeltaIcon, { size: "xs", "aria-hidden": "true" }),
@@ -46,7 +46,7 @@ var StatCard = React.forwardRef(
                 ]
               }
             ),
-            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
+            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-on-surface-muted)]", children: description })
           ] })
         ]
       }

package/dist/{chunk-MXPRKZPB.js → chunk-L456OB3Q.js}

@@ -12,7 +12,7 @@ var StepIndicator = React.forwardRef(
       index < steps.length - 1 && /* @__PURE__ */ jsx(
         "div",
         {
-          className: "absolute left-4 top-8 h-full w-px bg-[var(--color-border-default)]",
+          className: "absolute start-4 top-8 h-full w-px bg-[var(--color-outline-variant)]",
           "aria-hidden": "true"
         }
       ),
@@ -21,17 +21,17 @@ var StepIndicator = React.forwardRef(
         {
           className: cn(
             "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
-            status === "complete" && "bg-[var(--color-fill-primary)] text-white",
-            status === "current" && "border-2 border-[var(--color-brand-primary-500)] text-[var(--color-brand-primary-500)] bg-[var(--color-bg-default)]",
-            status === "upcoming" && "border-2 border-[var(--color-border-default)] text-[var(--color-text-muted)] bg-[var(--color-bg-default)]"
+            status === "complete" && "bg-[var(--color-primary)] text-[var(--color-on-primary)]",
+            status === "current" && "border-2 border-[var(--color-primary)] text-[var(--color-primary)] bg-[var(--color-surface)]",
+            status === "upcoming" && "border-2 border-[var(--color-outline-variant)] text-[var(--color-on-surface-muted)] bg-[var(--color-surface)]"
           ),
           "aria-current": status === "current" ? "step" : void 0,
           children: status === "complete" ? /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) : index + 1
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 pt-0.5", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: step.label }),
-        step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-muted)]", children: step.description })
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-on-surface)]", children: step.label }),
+        step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: step.description })
       ] })
     ] }, step.label);
   }) })

package/dist/{chunk-OYSWFXRD.js → chunk-LAYYOVIK.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   AppLauncher
-} from "./chunk-ZFHA46UX.js";
+} from "./chunk-H5UTW5ML.js";
 
 // src/components/AppHeader/AppHeader.tsx
 import * as React from "react";
@@ -19,7 +19,6 @@ import {
 import { Building2, ChevronDown, Moon, Search, Sun } from "@nexub/icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SEARCH_DEBOUNCE_MS = 200;
-var focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]";
 var isPlainClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
 var isTextField = (t) => t instanceof HTMLElement && (t.isContentEditable || t.matches("input, textarea, select"));
 function HeaderSearch({
@@ -99,13 +98,10 @@ function HeaderSearch({
       {
         type: "button",
         ...triggerProps,
-        className: cn(
-          "hidden h-9 w-full max-w-xl items-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-subtle)] px-3 text-sm text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-muted)] md:flex",
-          focusRing
-        ),
+        className: "nx-state-layer hidden h-9 w-full max-w-xl items-center gap-2 rounded-shape-field border border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] px-3 text-sm text-[var(--color-on-surface-muted)] md:flex",
         children: [
           /* @__PURE__ */ jsx(Search, { size: "sm", "aria-hidden": "true", className: "shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: placeholder }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-start", children: placeholder }),
           /* @__PURE__ */ jsx(Kbd, { "aria-hidden": "true", className: "shrink-0", children: isMac ? "\u2318K" : "Ctrl K" })
         ]
       }
@@ -122,7 +118,7 @@ function HeaderSearch({
         children: [
           /* @__PURE__ */ jsx(CommandPalette.Input, { placeholder, value: query, onValueChange: setQuery }),
           /* @__PURE__ */ jsxs(CommandPalette.List, { children: [
-            loading && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-2 text-sm text-[var(--color-text-muted)]", children: "Searching\u2026" }),
+            loading && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-2 text-sm text-[var(--color-on-surface-muted)]", children: "Searching\u2026" }),
             !loading && /* @__PURE__ */ jsx(CommandPalette.Empty, { children: failed ? "Search failed. Try again." : query ? `No results for \u201C${query}\u201D` : "Type to search" }),
             groups.map((group) => /* @__PURE__ */ jsx(CommandPalette.Group, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
               CommandPalette.Item,
@@ -134,9 +130,9 @@ function HeaderSearch({
                   item.onSelect();
                 },
                 children: [
-                  item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mr-2 flex shrink-0 text-[var(--color-text-muted)]", children: item.icon }),
+                  item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "me-2 flex shrink-0 text-[var(--color-on-surface-muted)]", children: item.icon }),
                   /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label }),
-                  item.hint && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 pl-3 text-xs text-[var(--color-text-muted)]", children: item.hint })
+                  item.hint && /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0 ps-3 text-xs text-[var(--color-on-surface-muted)]", children: item.hint })
                 ]
               },
               item.id
@@ -156,7 +152,7 @@ function OrgSwitcher({
   const current = orgs.find((o) => o.id === currentOrgId) ?? orgs[0];
   if (!current) return null;
   if (orgs.length === 1) {
-    return /* @__PURE__ */ jsx("span", { title: current.name, className: cn("px-2 text-sm font-medium text-[var(--color-text-secondary)]", orgLabelClass), children: current.name });
+    return /* @__PURE__ */ jsx("span", { title: current.name, className: cn("px-2 text-sm font-medium text-[var(--color-on-surface-variant)]", orgLabelClass), children: current.name });
   }
   return (
     // modal={false}: Radix's modal menu injects a <style> scroll lock (strict CSP).
@@ -167,14 +163,11 @@ function OrgSwitcher({
           type: "button",
           "aria-label": `${current.name}, switch organization`,
           title: current.name,
-          className: cn(
-            "inline-flex h-9 min-w-0 shrink-0 items-center gap-1 rounded-md px-2 text-sm sm:shrink font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)]",
-            focusRing
-          ),
+          className: "nx-state-layer inline-flex h-9 min-w-0 shrink-0 items-center gap-1 rounded-shape-control px-2 text-sm sm:shrink font-medium text-[var(--color-on-surface)]",
           children: [
             /* @__PURE__ */ jsx(Building2, { size: "md", "aria-hidden": "true", className: "shrink-0 sm:hidden" }),
             /* @__PURE__ */ jsx("span", { className: cn("hidden sm:inline", orgLabelClass), children: current.name }),
-            /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-text-muted)]" })
+            /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-on-surface-muted)]" })
           ]
         }
       ) }),
@@ -231,7 +224,7 @@ function AccountMenu({
   return (
     // modal={false}: Radix's modal menu injects a <style> scroll lock (strict CSP).
     /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Account: ${user.name}`, className: cn("ml-1 shrink-0 rounded-full", focusRing), children: /* @__PURE__ */ jsx(Avatar, { name: user.name, src: user.avatarUrl, size: "sm", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Account: ${user.name}`, className: "ms-1 shrink-0 rounded-full", children: /* @__PURE__ */ jsx(Avatar, { name: user.name, src: user.avatarUrl, size: "sm", "aria-hidden": "true" }) }) }),
       /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", className: "w-72 max-w-[calc(100vw-1rem)]", children: [
         /* @__PURE__ */ jsxs(DropdownMenu.Label, { className: "flex flex-col gap-0.5 py-2", children: [
           /* @__PURE__ */ jsx("span", { className: "truncate text-title-sm text-[var(--color-on-surface)]", children: user.name }),
@@ -268,6 +261,7 @@ var AppHeader = React.forwardRef(
     onSignOut,
     accountMenuItems,
     surface = "solid",
+    condense = false,
     className,
     ...props
   }, ref) => {
@@ -279,6 +273,7 @@ var AppHeader = React.forwardRef(
           ref,
           role: "banner",
           surface,
+          "data-condense": condense ? "" : void 0,
           className: cn("fixed inset-x-0 top-0 h-[var(--app-header-height,64px)] px-2 sm:px-4", className),
           ...props,
           children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-1 sm:gap-2", children: [
@@ -293,11 +288,11 @@ var AppHeader = React.forwardRef(
                     onNavigate(homeHref);
                   }
                 },
-                className: cn("flex min-w-0 shrink items-center rounded-md p-1", focusRing),
+                className: "flex min-w-0 shrink items-center rounded-shape-min p-1",
                 children: /* @__PURE__ */ jsx(Logo, { size: "sm", product: productName })
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 md:ml-0 md:min-w-0 md:flex-1 md:justify-center md:px-2 lg:px-4", children: (onSearch || searchItems) && /* @__PURE__ */ jsx(HeaderSearch, { placeholder, items: searchItems, onSearch }) }),
+            /* @__PURE__ */ jsx("div", { className: "ms-auto flex shrink-0 md:ms-0 md:min-w-0 md:flex-1 md:justify-center md:px-2 lg:px-4", children: (onSearch || searchItems) && /* @__PURE__ */ jsx(HeaderSearch, { placeholder, items: searchItems, onSearch }) }),
             /* @__PURE__ */ jsxs("nav", { "aria-label": "Account and apps", className: "flex shrink-0 items-center gap-0.5 sm:gap-1", children: [
               orgs.length > 0 && /* @__PURE__ */ jsx(OrgSwitcher, { orgs, currentOrgId, onOrgChange }),
               showThemeSwitch && /* @__PURE__ */ jsx(ThemeSwitch, {}),

package/dist/chunk-RWPFCNMJ.js

@@ -0,0 +1,75 @@
+'use client';
+
+// src/components/ErrorSummary/ErrorSummary.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorSummary = React.forwardRef(
+  ({ errors, title = "There is a problem", onFocusField, className, ...props }, forwardedRef) => {
+    const ref = React.useRef(null);
+    const headingId = React.useId();
+    React.useEffect(() => {
+      if (errors.length) ref.current?.focus();
+    }, [errors]);
+    if (!errors.length) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          ref.current = node;
+          if (typeof forwardedRef === "function") forwardedRef(node);
+          else if (forwardedRef) forwardedRef.current = node;
+        },
+        role: "alert",
+        "aria-labelledby": headingId,
+        tabIndex: -1,
+        className: cn(
+          "w-full rounded-shape-container border-s-4 border-s-[var(--color-error)] p-4",
+          "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: headingId, className: "text-title-md font-semibold", children: title }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-1 text-body-md", children: errors.map((error) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${error.id}`,
+              className: "underline underline-offset-[0.2em]",
+              onClick: (e) => {
+                const field = document.getElementById(error.id);
+                if (!field) return;
+                e.preventDefault();
+                field.scrollIntoView({ block: "center" });
+                field.focus({ preventScroll: true });
+                onFocusField?.(error.id);
+              },
+              children: error.message
+            }
+          ) }, error.id)) })
+        ]
+      }
+    );
+  }
+);
+ErrorSummary.displayName = "ErrorSummary";
+function useFormErrors(map) {
+  const errors = React.useMemo(
+    () => Object.entries(map).flatMap(([id, message]) => message ? [{ id, message }] : []),
+    [map]
+  );
+  return {
+    errors,
+    fieldProps: (id) => ({
+      id,
+      "aria-invalid": map[id] ? true : void 0,
+      "aria-describedby": map[id] ? `${id}-error` : void 0
+    }),
+    errorProps: (id) => ({ id: `${id}-error` })
+  };
+}
+
+export {
+  ErrorSummary,
+  useFormErrors
+};

package/dist/{chunk-OTNHVOPC.js → chunk-U3FT7XAU.js}

@@ -7,8 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SettingsSection = React.forwardRef(
   ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-8", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:gap-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "md:w-1/3 flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-on-surface)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: description })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4", children: [
       children,

package/dist/{chunk-5QFC4WFD.js → chunk-WIHNK7RT.js}

@@ -36,8 +36,8 @@ var Root = React.forwardRef(
       }
       setMenuOpen(false);
     };
-    const menuButton = /* @__PURE__ */ jsx(IconButton, { label: `Open ${navLabel.toLowerCase()} menu`, className: "-ml-2 md:hidden", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Menu, { size: "md", "aria-hidden": "true" }) });
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-h-screen flex-col bg-[var(--color-bg-default)]", className), ...props, children: [
+    const menuButton = /* @__PURE__ */ jsx(IconButton, { label: `Open ${navLabel.toLowerCase()} menu`, className: "-ms-2 md:hidden", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Menu, { size: "md", "aria-hidden": "true" }) });
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-h-screen flex-col bg-[var(--color-surface)]", className), ...props, children: [
       header ? header(menuButton) : /* @__PURE__ */ jsxs(TopNav.Root, { className: "h-[var(--app-header-height,64px)]", children: [
         menuButton,
         logo && /* @__PURE__ */ jsx(TopNav.Logo, { className: "min-w-0 shrink", children: logo }),
@@ -56,8 +56,8 @@ var Root = React.forwardRef(
         ),
         /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 px-4 py-6 md:px-8 md:py-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: [
           (title || description) && /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
-            title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+            title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-on-surface)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: description })
           ] }),
           children
         ] }) })
@@ -66,7 +66,7 @@ var Root = React.forwardRef(
         /* @__PURE__ */ jsx(Sheet.Overlay, { className: "md:hidden" }),
         /* @__PURE__ */ jsxs(Sheet.Content, { side: "left", "aria-describedby": void 0, className: "md:hidden", children: [
           /* @__PURE__ */ jsx(Sheet.Title, { className: "px-5 pb-2 pt-5 text-base", children: navLabel }),
-          /* @__PURE__ */ jsx(SectionNav, { items, activeId, onChoose, label: navLabel, className: "w-full border-r-0" })
+          /* @__PURE__ */ jsx(SectionNav, { items, activeId, onChoose, label: navLabel, className: "w-full border-e-0" })
         ] })
       ] }) })
     ] });
@@ -75,9 +75,9 @@ var Root = React.forwardRef(
 Root.displayName = "SettingsLayout";
 var Section = React.forwardRef(
   ({ title, description, className, children, ...props }, ref) => /* @__PURE__ */ jsx(Card, { asChild: true, className: cn("px-5 py-1", className), children: /* @__PURE__ */ jsxs("section", { ref, ...props, children: [
-    (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-b border-[var(--color-border-default)] pb-4 pt-4", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-b border-[var(--color-outline-variant)] pb-4 pt-4", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-on-surface)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: description })
     ] }),
     children
   ] }) })
@@ -89,16 +89,16 @@ var SettingsRow = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex flex-col gap-2 border-t border-[var(--color-border-default)] py-4 first:border-t-0 sm:flex-row sm:items-center sm:gap-4",
+        "flex flex-col gap-2 border-t border-[var(--color-outline-variant)] py-4 first:border-t-0 sm:flex-row sm:items-center sm:gap-4",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 sm:w-1/3 sm:shrink-0", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label }),
-          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-on-surface)]", children: label }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-on-surface-muted)]", children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm text-[var(--color-text-secondary)]", children: value }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm text-[var(--color-on-surface-variant)]", children: value }),
         action && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })
       ]
     }

package/dist/{chunk-74JVLMLE.js → chunk-WPNT5JOU.js}

@@ -9,7 +9,7 @@ var Root = React.forwardRef(
     "dl",
     {
       ref,
-      className: cn("divide-y divide-[var(--color-border-default)]", className),
+      className: cn("divide-y divide-[var(--color-outline-variant)]", className),
       ...props,
       children
     }
@@ -17,8 +17,8 @@ var Root = React.forwardRef(
 );
 Root.displayName = "InfoList.Root";
 var Item = ({ label, value, className }) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between py-3 gap-4", className), children: [
-  /* @__PURE__ */ jsx("dt", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: label }),
-  /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium text-[var(--color-text-primary)] text-right", children: value })
+  /* @__PURE__ */ jsx("dt", { className: "text-sm text-[var(--color-on-surface-muted)] shrink-0", children: label }),
+  /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium text-[var(--color-on-surface)] text-end", children: value })
 ] });
 Item.displayName = "InfoList.Item";
 var InfoList = { Root, Item };

package/dist/chunk-WRP73TXG.js

@@ -0,0 +1,109 @@
+'use client';
+
+// src/components/Conversation/Conversation.tsx
+import * as React from "react";
+import { Button, cn, useNexubMessages } from "@nexub/react";
+import { ArrowDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var fallbackMessages = {
+  jumpToLatest: "Jump to latest",
+  conversation: "Conversation"
+};
+var STICK_THRESHOLD = 48;
+function atBottom(el) {
+  return el.scrollHeight - el.scrollTop - el.clientHeight <= STICK_THRESHOLD;
+}
+var Conversation = React.forwardRef(
+  ({ children, composer, autoScroll = true, announce = false, messages, className, ...props }, ref) => {
+    const provided = useNexubMessages();
+    const m = {
+      jumpToLatest: messages?.jumpToLatest ?? provided.jumpToLatest ?? fallbackMessages.jumpToLatest,
+      conversation: messages?.conversation ?? provided.conversation ?? fallbackMessages.conversation
+    };
+    const scrollRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const pinnedRef = React.useRef(true);
+    const lastTop = React.useRef(0);
+    const [pinned, setPinned] = React.useState(true);
+    const setPin = React.useCallback((value) => {
+      pinnedRef.current = value;
+      setPinned(value);
+    }, []);
+    React.useEffect(() => {
+      const scroller = scrollRef.current;
+      const content = contentRef.current;
+      if (!autoScroll || !scroller || !content) return;
+      const follow = () => {
+        if (pinnedRef.current) scroller.scrollTop = scroller.scrollHeight;
+        lastTop.current = scroller.scrollTop;
+      };
+      follow();
+      const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(follow) : void 0;
+      ro?.observe(content);
+      const mo = new MutationObserver(follow);
+      mo.observe(content, { childList: true, subtree: true, characterData: true });
+      return () => {
+        ro?.disconnect();
+        mo.disconnect();
+      };
+    }, [autoScroll]);
+    const onScroll = () => {
+      const el = scrollRef.current;
+      if (!el) return;
+      if (atBottom(el)) {
+        if (!pinnedRef.current) setPin(true);
+      } else if (el.scrollTop < lastTop.current && pinnedRef.current) {
+        setPin(false);
+      }
+      lastTop.current = el.scrollTop;
+    };
+    const jump = () => {
+      const el = scrollRef.current;
+      if (!el) return;
+      setPin(true);
+      const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      const top = el.scrollHeight;
+      if (typeof el.scrollTo === "function") el.scrollTo({ top, behavior: reduce ? "auto" : "smooth" });
+      else el.scrollTop = top;
+    };
+    const live = announce ? { role: "log", "aria-live": "polite", "aria-relevant": "additions" } : { role: "region" };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex h-full min-h-0 flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            onScroll,
+            "aria-label": m.conversation,
+            tabIndex: 0,
+            ...live,
+            className: cn(
+              "h-full overflow-y-auto",
+              composer && "[-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%-24px),transparent)] [mask-image:linear-gradient(to_bottom,black_calc(100%-24px),transparent)]"
+            ),
+            children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 pb-8 pt-6", children })
+          }
+        ),
+        autoScroll && !pinned && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-4 flex justify-center", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "tonal",
+            size: "sm",
+            "data-state": "open",
+            onClick: jump,
+            leadingIcon: /* @__PURE__ */ jsx(ArrowDown, { size: "sm", "aria-hidden": "true" }),
+            className: "nx-motion nx-pop pointer-events-auto shadow-elevation-2",
+            children: m.jumpToLatest
+          }
+        ) })
+      ] }),
+      composer && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-4 pb-4", children: composer })
+    ] });
+  }
+);
+Conversation.displayName = "Conversation";
+
+export {
+  Conversation
+};

package/dist/chunk-WZTDCJYP.js

@@ -0,0 +1,23 @@
+'use client';
+
+// src/components/BentoGrid/BentoGrid.tsx
+import * as React from "react";
+import { Card, cn } from "@nexub/react";
+import { jsx } from "react/jsx-runtime";
+var BentoGrid = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("[container-type:inline-size]", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "grid grid-flow-row-dense auto-rows-[minmax(10rem,auto)] grid-cols-1 gap-4 [@container(min-width:480px)]:grid-cols-2 [@container(min-width:768px)]:grid-cols-4", children }) }));
+BentoGrid.displayName = "BentoGrid";
+var sizes = {
+  "1x1": "",
+  "2x1": "[@container(min-width:480px)]:col-span-2",
+  "1x2": "row-span-2",
+  "2x2": "[@container(min-width:480px)]:col-span-2 row-span-2"
+};
+var BentoTile = React.forwardRef(
+  ({ size = "1x1", className, ...props }, ref) => /* @__PURE__ */ jsx(Card, { ref, variant: "surface", className: cn("min-w-0 p-4", sizes[size], className), "data-size": size, ...props })
+);
+BentoTile.displayName = "BentoTile";
+
+export {
+  BentoGrid,
+  BentoTile
+};

package/dist/{chunk-QMYBXQG4.js → chunk-YB7G4YBU.js}

@@ -23,27 +23,27 @@ var PlanCard = React.forwardRef(
     {
       ref,
       className: cn(
-        "relative flex flex-col gap-6 rounded-xl border bg-[var(--color-bg-default)] p-6",
-        highlighted ? "border-[var(--color-brand-primary-500)] shadow-lg ring-1 ring-[var(--color-brand-primary-500)]" : "border-[var(--color-border-default)]",
+        "relative flex flex-col gap-6 rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] p-6",
+        highlighted ? "border-2 border-[var(--color-primary)] shadow-elevation-2" : "border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] shadow-elevation-1",
         className
       ),
       ...props,
       children: [
         badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge, { tone: "info", children: badge }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-[var(--color-on-surface)]", children: name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold text-[var(--color-text-primary)]", children: price }),
-            period && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: period })
+            /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold text-[var(--color-on-surface)]", children: price }),
+            period && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-on-surface-muted)]", children: period })
           ] }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: description })
         ] }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: features.map((feature) => /* @__PURE__ */ jsxs(
           "li",
           {
-            className: "flex items-center gap-2 text-sm text-[var(--color-text-secondary)]",
+            className: "flex items-center gap-2 text-sm text-[var(--color-on-surface-variant)]",
             children: [
-              /* @__PURE__ */ jsx(Check, { size: "xs", className: "text-[var(--color-success-500)] shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(Check, { size: "xs", className: "text-[var(--color-success)] shrink-0", "aria-hidden": "true" }),
               feature
             ]
           },

package/dist/{chunk-EOA5C3Q4.js → chunk-Z6VMCMSW.js}

@@ -13,11 +13,11 @@ var FilterBar = React.forwardRef(
         placeholder: searchPlaceholder ?? "Search\u2026",
         value: searchValue,
         onChange: (e) => onSearch?.(e.target.value),
-        className: "h-9 rounded-md border border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-3 py-2 text-sm placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary-500)] w-full sm:w-64"
+        className: "h-9 rounded-shape-field border border-[var(--color-outline-variant)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-sm text-[var(--color-on-surface)] placeholder:text-[var(--color-on-surface-muted)] w-full sm:w-64"
       }
     ),
     filters && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: filters }),
-    actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ jsx("div", { className: "ms-auto flex items-center gap-2", children: actions })
   ] })
 );
 FilterBar.displayName = "FilterBar";

package/dist/components/ActivityFeed/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   ActivityFeed
-} from "../../chunk-YX7UO577.js";
+} from "../../chunk-HYC5N5MO.js";
 export {
   ActivityFeed
 };

package/dist/components/AppHeader/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   AppHeader
-} from "../../chunk-OYSWFXRD.js";
-import "../../chunk-ZFHA46UX.js";
+} from "../../chunk-LAYYOVIK.js";
+import "../../chunk-H5UTW5ML.js";
 export {
   AppHeader
 };

package/dist/components/AppLauncher/index.js

@@ -2,7 +2,7 @@
 import "../../chunk-VYMTTYPR.js";
 import {
   AppLauncher
-} from "../../chunk-ZFHA46UX.js";
+} from "../../chunk-H5UTW5ML.js";
 export {
   AppLauncher
 };

package/dist/components/AuthCard/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   AuthCard
-} from "../../chunk-AOE6GQSH.js";
+} from "../../chunk-HMJRSNJD.js";
 export {
   AuthCard
 };

package/dist/components/BentoGrid/index.js

@@ -0,0 +1,9 @@
+'use client';
+import {
+  BentoGrid,
+  BentoTile
+} from "../../chunk-WZTDCJYP.js";
+export {
+  BentoGrid,
+  BentoTile
+};

package/dist/components/Conversation/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  Conversation
+} from "../../chunk-WRP73TXG.js";
+export {
+  Conversation
+};

package/dist/components/ErrorSummary/index.js

@@ -0,0 +1,9 @@
+'use client';
+import {
+  ErrorSummary,
+  useFormErrors
+} from "../../chunk-RWPFCNMJ.js";
+export {
+  ErrorSummary,
+  useFormErrors
+};

package/dist/components/FilterBar/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   FilterBar
-} from "../../chunk-EOA5C3Q4.js";
+} from "../../chunk-Z6VMCMSW.js";
 export {
   FilterBar
 };

package/dist/components/InfoList/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   InfoList
-} from "../../chunk-74JVLMLE.js";
+} from "../../chunk-WPNT5JOU.js";
 export {
   InfoList
 };

package/dist/components/ListDetail/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   ListDetail
-} from "../../chunk-TLOLIMPY.js";
+} from "../../chunk-5JU6HUVJ.js";
 export {
   ListDetail
 };

package/dist/components/NotificationItem/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   NotificationItem
-} from "../../chunk-Y3TNGDKC.js";
+} from "../../chunk-5IORYY2L.js";
 export {
   NotificationItem
 };

package/dist/components/PlanCard/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   PlanCard
-} from "../../chunk-QMYBXQG4.js";
+} from "../../chunk-YB7G4YBU.js";
 export {
   PlanCard
 };

package/dist/components/SettingsLayout/index.js

@@ -2,7 +2,7 @@
 import {
   SettingsLayout,
   SettingsRow
-} from "../../chunk-5QFC4WFD.js";
+} from "../../chunk-WIHNK7RT.js";
 export {
   SettingsLayout,
   SettingsRow

package/dist/components/SettingsSection/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   SettingsSection
-} from "../../chunk-OTNHVOPC.js";
+} from "../../chunk-U3FT7XAU.js";
 export {
   SettingsSection
 };

package/dist/components/StatCard/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   StatCard
-} from "../../chunk-7GYTYFUD.js";
+} from "../../chunk-K5EFLRKU.js";
 export {
   StatCard
 };

package/dist/components/StepIndicator/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   StepIndicator
-} from "../../chunk-MXPRKZPB.js";
+} from "../../chunk-L456OB3Q.js";
 export {
   StepIndicator
 };

package/dist/components/UserCard/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   UserCard
-} from "../../chunk-AEYLZU3F.js";
+} from "../../chunk-7NYGYETG.js";
 export {
   UserCard
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { CardProps } from '@nexub/react';
 
 interface ActivityItemProps {
     avatar?: React.ReactNode;
@@ -11,7 +11,7 @@ interface ActivityItemProps {
 declare const ActivityFeed: {
     Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
     Item: {
-        ({ avatar, title, description, timestamp, className }: ActivityItemProps): react_jsx_runtime.JSX.Element;
+        ({ avatar, title, description, timestamp, className }: ActivityItemProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -32,6 +32,8 @@ interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
     deltaType?: 'increase' | 'decrease' | 'neutral';
     icon?: React.ReactNode;
     description?: string;
+    /** Roll digits when a number/string `value` changes (NumberTicker); announced politely. */
+    animate?: boolean;
 }
 declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -54,7 +56,7 @@ interface AuthCardProps {
     footer?: React.ReactNode;
     className?: string;
 }
-declare function AuthCard({ logo, title, description, children, footer, className, }: AuthCardProps): react_jsx_runtime.JSX.Element;
+declare function AuthCard({ logo, title, description, children, footer, className, }: AuthCardProps): React.JSX.Element;
 declare namespace AuthCard {
     var displayName: string;
 }
@@ -78,7 +80,7 @@ interface InfoListItemProps {
 declare const InfoList: {
     Root: React.ForwardRefExoticComponent<InfoListRootProps & React.RefAttributes<HTMLDListElement>>;
     Item: {
-        ({ label, value, className }: InfoListItemProps): react_jsx_runtime.JSX.Element;
+        ({ label, value, className }: InfoListItemProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -264,6 +266,8 @@ interface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'childr
     surface?: 'solid' | 'glass';
     /** `soft`: page content dissolves under the header instead of meeting a divider. */
     scrollEdge?: 'soft' | 'hard';
+    /** Shrink 64 → 52px and lift onto elevation 1 over the first 64px of page scroll (CSS scroll timeline; static where unsupported). */
+    condense?: boolean;
 }
 /**
  * The one top header every Nexub app shares. Fixed to the top; renders a
@@ -271,4 +275,83 @@ interface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'childr
  */
 declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;
 
-export { ActivityFeed, type ActivityItemProps, AppHeader, type AppHeaderOrg, type AppHeaderProps, type AppHeaderSearchGroup, type AppHeaderSearchItem, type AppHeaderUser, AppLauncher, type AppLauncherApp, type AppLauncherProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, ListDetail, type ListDetailProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsLayout, type SettingsLayoutItem, type SettingsLayoutProps, type SettingsLayoutSectionProps, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };
+interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * A bento grid that responds to its *own* width (container query): 1 column,
+ * 2 at 480px, 4 at 768px. Dense packing back-fills gaps left by large tiles.
+ */
+declare const BentoGrid: React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>>;
+type BentoTileSize = '1x1' | '2x1' | '1x2' | '2x2';
+interface BentoTileProps extends Omit<CardProps, 'variant'> {
+    /** @default '1x1' */
+    size?: BentoTileSize;
+}
+/** A Card-styled cell of a BentoGrid. */
+declare const BentoTile: React.ForwardRefExoticComponent<BentoTileProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ErrorSummaryItem {
+    /** The field's DOM id (the link target). */
+    id: string;
+    message: string;
+}
+interface ErrorSummaryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    errors: ErrorSummaryItem[];
+    /** @default 'There is a problem' */
+    title?: React.ReactNode;
+    /** Called after a link moves focus to its field. */
+    onFocusField?: (id: string) => void;
+}
+/**
+ * Lists a form's errors after a failed submit (GOV.UK pattern). It takes focus
+ * whenever it receives a new `errors` array with entries, so pass a new array per
+ * submit (not per keystroke). Each link focuses its field.
+ */
+declare const ErrorSummary: React.ForwardRefExoticComponent<ErrorSummaryProps & React.RefAttributes<HTMLDivElement>>;
+type FormErrorMap = Record<string, string | null | undefined | false>;
+/**
+ * Turns `{ fieldId: message }` into the ErrorSummary list plus the ARIA wiring
+ * for each field and its inline message (`${id}-error`, the same id
+ * FormField.Error uses).
+ */
+declare function useFormErrors(map: FormErrorMap): {
+    errors: ErrorSummaryItem[];
+    fieldProps: (id: string) => {
+        id: string;
+        'aria-invalid': true | undefined;
+        'aria-describedby': string | undefined;
+    };
+    errorProps: (id: string) => {
+        id: string;
+    };
+};
+
+interface ConversationMessages {
+    /** Floating button shown when the reader has scrolled up. */
+    jumpToLatest: string;
+    /** Accessible name of the message list. */
+    conversation: string;
+}
+interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The messages. */
+    children?: React.ReactNode;
+    /** Sticky composer slot under the list, e.g. a PromptInput. */
+    composer?: React.ReactNode;
+    /** Keep the view pinned to the newest content while the reader is at the bottom. @default true */
+    autoScroll?: boolean;
+    /**
+     * Make the list a polite live log (role="log"). Off by default: token streaming
+     * would announce every chunk. Turn on for whole-message updates only.
+     * @default false
+     */
+    announce?: boolean;
+    messages?: Partial<ConversationMessages>;
+}
+/**
+ * Chat layout: a scrolling message list (max-w-3xl, centred) with a sticky
+ * composer at the bottom. Sticks to the bottom as content streams in while the
+ * reader is there; scrolling up stops following and offers "Jump to latest".
+ */
+declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ActivityFeed, type ActivityItemProps, AppHeader, type AppHeaderOrg, type AppHeaderProps, type AppHeaderSearchGroup, type AppHeaderSearchItem, type AppHeaderUser, AppLauncher, type AppLauncherApp, type AppLauncherProps, AuthCard, type AuthCardProps, BentoGrid, type BentoGridProps, BentoTile, type BentoTileProps, type BentoTileSize, Conversation, type ConversationMessages, type ConversationProps, ErrorSummary, type ErrorSummaryItem, type ErrorSummaryProps, FilterBar, type FilterBarProps, type FormErrorMap, InfoList, type InfoListItemProps, type InfoListRootProps, ListDetail, type ListDetailProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsLayout, type SettingsLayoutItem, type SettingsLayoutProps, type SettingsLayoutSectionProps, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps, useFormErrors };

package/dist/index.js

@@ -1,53 +1,68 @@
 'use client';
+import {
+  StepIndicator
+} from "./chunk-L456OB3Q.js";
+import {
+  UserCard
+} from "./chunk-7NYGYETG.js";
+import {
+  FilterBar
+} from "./chunk-Z6VMCMSW.js";
+import {
+  InfoList
+} from "./chunk-WPNT5JOU.js";
+import {
+  ListDetail
+} from "./chunk-5JU6HUVJ.js";
 import {
   NotificationItem
-} from "./chunk-Y3TNGDKC.js";
+} from "./chunk-5IORYY2L.js";
 import {
   PlanCard
-} from "./chunk-QMYBXQG4.js";
+} from "./chunk-YB7G4YBU.js";
 import {
   SettingsLayout,
   SettingsRow
-} from "./chunk-5QFC4WFD.js";
+} from "./chunk-WIHNK7RT.js";
 import {
   SettingsSection
-} from "./chunk-OTNHVOPC.js";
+} from "./chunk-U3FT7XAU.js";
 import {
   StatCard
-} from "./chunk-7GYTYFUD.js";
+} from "./chunk-K5EFLRKU.js";
 import {
-  StepIndicator
-} from "./chunk-MXPRKZPB.js";
-import {
-  UserCard
-} from "./chunk-AEYLZU3F.js";
+  ActivityFeed
+} from "./chunk-HYC5N5MO.js";
 import {
   AppHeader
-} from "./chunk-OYSWFXRD.js";
-import {
-  ActivityFeed
-} from "./chunk-YX7UO577.js";
+} from "./chunk-LAYYOVIK.js";
 import "./chunk-VYMTTYPR.js";
 import {
   AppLauncher
-} from "./chunk-ZFHA46UX.js";
+} from "./chunk-H5UTW5ML.js";
 import {
   AuthCard
-} from "./chunk-AOE6GQSH.js";
+} from "./chunk-HMJRSNJD.js";
 import {
-  FilterBar
-} from "./chunk-EOA5C3Q4.js";
+  BentoGrid,
+  BentoTile
+} from "./chunk-WZTDCJYP.js";
 import {
-  InfoList
-} from "./chunk-74JVLMLE.js";
+  Conversation
+} from "./chunk-WRP73TXG.js";
 import {
-  ListDetail
-} from "./chunk-TLOLIMPY.js";
+  ErrorSummary,
+  useFormErrors
+} from "./chunk-RWPFCNMJ.js";
 export {
   ActivityFeed,
   AppHeader,
   AppLauncher,
   AuthCard,
+  BentoGrid,
+  BentoTile,
+  Conversation,
+  ErrorSummary,
   FilterBar,
   InfoList,
   ListDetail,
@@ -58,5 +73,6 @@ export {
   SettingsSection,
   StatCard,
   StepIndicator,
-  UserCard
+  UserCard,
+  useFormErrors
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "Composite UI patterns for Nexub Design System — pre-built, production-ready layouts and widgets built on @nexub/react.",
   "type": "module",
   "license": "MIT",
@@ -36,9 +36,9 @@
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/react": "^1.5.1",
-    "@nexub/icons": "^1.5.1",
-    "@nexub/tokens": "^1.5.1"
+    "@nexub/icons": "^1.7.0",
+    "@nexub/react": "^1.7.0",
+    "@nexub/tokens": "^1.7.0"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -49,18 +49,19 @@
     }
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "jsdom": "^25.0.1",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.8",
-    "@nexub/icons": "1.5.1",
-    "@nexub/react": "1.5.1",
-    "@nexub/tokens": "1.5.1"
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.7",
+    "vitest": "^5.0.5",
+    "@nexub/icons": "1.7.0",
+    "@nexub/react": "1.7.0",
+    "@nexub/tokens": "1.7.0"
   },
   "scripts": {
     "build": "tsup",