@ship-it-ui/ui 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -105,6 +105,7 @@ __export(index_exports, {
   LargeTitle: () => LargeTitle,
   Lightbox: () => Lightbox,
   ListingCard: () => ListingCard,
+  ListingDetail: () => ListingDetail,
   MenuCheckboxItem: () => MenuCheckboxItem,
   MenuItem: () => MenuItem,
   MenuSeparator: () => MenuSeparator,
@@ -343,11 +344,13 @@ function useOutsideClick(ref, handler, enabled = true) {
 var import_react7 = require("react");
 function useTheme() {
   const [theme, setThemeState] = (0, import_react7.useState)("dark");
+  const internalMutation = (0, import_react7.useRef)(false);
   const setTheme = (0, import_react7.useCallback)((next) => {
     if (typeof document === "undefined") {
       setThemeState(next);
       return;
     }
+    internalMutation.current = true;
     if (next === "light") {
       document.documentElement.setAttribute("data-theme", "light");
     } else {
@@ -362,6 +365,10 @@ function useTheme() {
     const initial = document.documentElement.getAttribute("data-theme");
     setThemeState(initial === "light" ? "light" : "dark");
     const observer = new MutationObserver(() => {
+      if (internalMutation.current) {
+        internalMutation.current = false;
+        return;
+      }
       const attr = document.documentElement.getAttribute("data-theme");
       setThemeState(attr === "light" ? "light" : "dark");
     });
@@ -1741,6 +1748,53 @@ AccordionContent.displayName = "AccordionContent";
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_react28 = require("react");
 
+// src/utils/color-override.ts
+var HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var FUNCTIONAL = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^()]*(?:\([^()]*\)[^()]*)*\)$/;
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "red",
+  "green",
+  "blue",
+  "black",
+  "white",
+  "gray",
+  "grey",
+  "orange",
+  "yellow",
+  "purple",
+  "pink",
+  "brown",
+  "cyan",
+  "magenta"
+]);
+var isValid = (value) => {
+  const v = value.trim();
+  if (!v) return false;
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("color", v);
+  }
+  return HEX.test(v) || FUNCTIONAL.test(v) || KEYWORDS.has(v);
+};
+var warnIfInvalidColor = (value, component) => {
+  if (isValid(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[${component}] Invalid color value "${value}". Falling back to the default variant. Use a hex, rgb/rgba, hsl, oklch, lab/lch, color(), color-mix(), or a CSS color keyword.`
+    );
+  }
+  return false;
+};
+var tintStyle = (color) => ({
+  background: `color-mix(in oklab, ${color}, transparent 85%)`,
+  color
+});
+
 // src/components/StatusDot/StatusDot.tsx
 var import_react27 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -1768,13 +1822,14 @@ var stateLabel = {
   sync: "Syncing",
   accent: "Active"
 };
-var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok", color, label, pulse, size = 8, className, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "StatusDot");
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "span",
     {
       ref,
       role: label ? "status" : "img",
-      "aria-label": !label ? stateLabel[state] : void 0,
+      "aria-label": !label ? useColor ? "Status" : stateLabel[state] : void 0,
       className: cn("inline-flex items-center gap-[6px]", className),
       ...props,
       children: [
@@ -1783,11 +1838,15 @@ var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok
           {
             className: cn(
               "inline-block rounded-full",
-              stateColor[state],
-              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
-              stateText[state]
+              !useColor && stateColor[state],
+              !useColor && stateText[state],
+              pulse && "animate-[ship-pulse-ring_1.6s_infinite]"
             ),
-            style: { width: size, height: size }
+            style: {
+              width: size,
+              height: size,
+              ...useColor ? { backgroundColor: color, color } : {}
+            }
           }
         ),
         label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-text-muted text-[12px]", children: label })
@@ -1822,10 +1881,12 @@ function hashHue(str) {
   for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
   return h;
 }
-var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src, size = "md", status, initials, color, className, style, ...props }, ref) {
   const dim = sizePx[size];
   const hue = hashHue(name);
   const computedInitials = initials ?? initialsFor(name);
+  const useColor = color && warnIfInvalidColor(color, "Avatar");
+  const fallbackBg = useColor ? color : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "span",
     {
@@ -1839,7 +1900,7 @@ var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src,
           {
             className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
             style: {
-              background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
+              background: src ? void 0 : fallbackBg
             },
             children: [
               src && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
@@ -1907,6 +1968,16 @@ AvatarGroup.displayName = "AvatarGroup";
 var import_class_variance_authority6 = require("class-variance-authority");
 var import_react30 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var badgeStructural = (0, import_class_variance_authority6.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+  variants: {
+    size: {
+      sm: "h-[18px] px-[6px] py-[1px] text-[10px] gap-1 rounded-full",
+      md: "h-[22px] px-2 py-[2px] text-[11px] gap-[5px] rounded-full",
+      lg: "h-[26px] px-[10px] py-[3px] text-[12px] gap-[6px] rounded-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
 var badgeStyles = (0, import_class_variance_authority6.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
   variants: {
     variant: {
@@ -1940,20 +2011,53 @@ var dotColorClass = {
   solid: "bg-bg"
 };
 var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
-var Badge = (0, import_react30.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+var Badge = (0, import_react30.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, color, style, ...props }, ref) {
   const sz = size ?? "md";
-  const v = variant ?? "neutral";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const useColor = color && warnIfInvalidColor(color, "Badge");
+  if (useColor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "span",
       {
-        "aria-hidden": true,
-        className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+        ref,
+        className: cn(badgeStructural({ size }), className),
+        style: { ...tintStyle(color), ...style },
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("inline-block rounded-full", dotSize[sz]),
+              style: { background: color }
+            }
+          ),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
+          children
+        ]
       }
-    ),
-    icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
-    children
-  ] });
+    );
+  }
+  const v = variant ?? "neutral";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "span",
+    {
+      ref,
+      className: cn(badgeStyles({ variant, size }), className),
+      style,
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+          }
+        ),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
+        children
+      ]
+    }
+  );
 });
 Badge.displayName = "Badge";
 
@@ -2101,18 +2205,23 @@ StatCard.displayName = "StatCard";
 // src/components/Chip/Chip.tsx
 var import_react33 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Chip = (0, import_react33.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
+var Chip = (0, import_react33.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", color, className, children, style, ...props }, ref) {
   const isTouch = density === "touch";
+  const useColor = color && warnIfInvalidColor(color, "Chip");
+  const structural = cn(
+    "inline-flex items-center gap-[6px] font-sans rounded-full border",
+    isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]"
+  );
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] font-sans",
-        isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]",
-        "bg-panel-2 text-text border-border rounded-full border",
-        className
-      ),
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
@@ -2176,8 +2285,10 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
   readOnly = false,
   className,
   "aria-label": ariaLabel,
+  color,
   ...props
 }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Rating");
   const [current, setCurrent] = useControllableState({
     value,
     defaultValue: defaultValue ?? 0,
@@ -2231,10 +2342,19 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
+              "data-filled-stars": true,
               className: "pointer-events-none absolute inset-0 inline-flex items-center gap-0.5 overflow-hidden",
-              style: { width: `${fillPct}%` },
+              style: { width: `${fillPct}%`, ...useColor ? { color } : {} },
               "aria-hidden": true,
-              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons4.IconGlyph, { name: "star", size: px, className: "text-rating shrink-0" }, i))
+              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_icons4.IconGlyph,
+                {
+                  name: "star",
+                  size: px,
+                  className: cn("shrink-0", !useColor && "text-rating")
+                },
+                i
+              ))
             }
           )
         ]
@@ -2249,6 +2369,7 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
       "aria-label": ariaLabel ?? "Rating",
       tabIndex: -1,
       className: cn("inline-flex items-center gap-0.5", className),
+      style: useColor ? { color } : void 0,
       onKeyDown: handleKey,
       ...props,
       children: Array.from({ length: max }).map((_, i) => {
@@ -2272,8 +2393,8 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
               "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
               "transition-colors duration-(--duration-micro)",
-              filled ? "text-rating" : "text-rating-dim",
-              "hover:text-rating"
+              useColor ? filled ? "" : "opacity-30" : filled ? "text-rating" : "text-rating-dim",
+              !useColor && "hover:text-rating"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons4.IconGlyph, { name: "star", size: px })
           },
@@ -2399,17 +2520,20 @@ SkeletonGroup.displayName = "SkeletonGroup";
 // src/components/Tag/Tag.tsx
 var import_react38 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Tag = (0, import_react38.forwardRef)(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+var Tag = (0, import_react38.forwardRef)(function Tag2({ onRemove, icon, size = 22, color, className, children, style, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Tag");
+  const structural = "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px] rounded-xs border";
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px]",
-        "bg-panel-2 text-text border-border rounded-xs border",
-        className
-      ),
-      style: { height: size },
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        height: size,
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-text-dim inline-flex", children: icon }),
@@ -2538,18 +2662,25 @@ var DialogContent = (0, import_react40.forwardRef)(function DialogContent2({ cla
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogContent, { width, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      RadixDialog.Title,
-      {
-        className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
-    children,
-    footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    DialogContent,
+    {
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          RadixDialog.Title,
+          {
+            className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+        children,
+        footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+      ]
+    }
+  ) });
 }
 
 // src/components/Dialog/Drawer.tsx
@@ -2667,7 +2798,13 @@ var AlertDialog = (0, import_react43.forwardRef)(function AlertDialog2({ title,
               children: title
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }) : (
+            // Radix AlertDialog requires a description for screen-reader users
+            // and warns in dev mode when one is missing. When the caller opts
+            // out of a visible description, fall back to the title text in a
+            // visually-hidden Description so the a11y contract is still met.
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "sr-only", children: title })
+          ),
           children,
           footer && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
@@ -3682,7 +3819,7 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { ref, className: cn("relative w-full border-collapse text-[12px]", className), children: [
     caption && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("caption", { className: "sr-only", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("tr", { children: [
       selectable && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -4357,10 +4494,31 @@ Lightbox.displayName = "Lightbox";
 
 // src/patterns/ListingCard/ListingCard.tsx
 var import_icons8 = require("@ship-it-ui/icons");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_react60 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
+var hoverVariants = (0, import_class_variance_authority11.cva)("", {
+  variants: {
+    hoverEffect: {
+      lift: "transition-[transform,box-shadow,border-color] duration-(--duration-micro) hover:-translate-y-px hover:shadow hover:border-border-strong",
+      glow: "transition-[box-shadow,border-color] duration-(--duration-micro) hover:ring-[3px] hover:ring-accent-dim hover:border-accent",
+      none: ""
+    }
+  }
+});
+var flagToneClass = {
+  accent: "bg-accent-dim text-accent",
+  purple: "bg-[color-mix(in_oklab,var(--color-purple),transparent_75%)] text-purple",
+  pink: "bg-[color-mix(in_oklab,var(--color-pink),transparent_75%)] text-pink",
+  ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_75%)] text-ok",
+  warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_75%)] text-warn"
+};
 var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
+  variant = "default",
   photos,
+  renderPhoto,
+  onClick,
+  hoverEffect,
   title,
   eyebrow,
   rating,
@@ -4368,31 +4526,50 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
   price,
   priceUnit = "/day",
   originalPrice,
+  pricePrefix,
   host,
   distance,
   verified,
   href,
   onFavorite,
   favorited,
-  width = 280,
+  width = variant === "spec" ? 320 : 280,
+  flag,
+  category,
+  meta,
+  specs,
+  cta,
+  hidePhotoCounter,
+  classNames: cls = {},
   className,
   ...props
 }, ref) {
+  const [photoIndex, setPhotoIndex] = (0, import_react60.useState)(0);
+  const isSpec = variant === "spec";
+  const stretchedLinkSupported = !isSpec || !cta && !!href;
+  const isInteractive = Boolean(onClick) || Boolean(href);
+  const effectiveHover = hoverEffect ?? (isInteractive ? "lift" : "none");
+  const hoverClass = hoverVariants({ hoverEffect: effectiveHover });
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     Card,
     {
       ref,
-      className: cn("relative overflow-hidden !p-0", className),
+      className: cn("relative isolate overflow-hidden !p-0", hoverClass, cls.root, className),
       style: { width },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("relative", cls.photos), children: [
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Carousel,
             {
               items: photos,
+              ...isSpec ? {
+                index: photoIndex,
+                onIndexChange: setPhotoIndex,
+                showDots: false
+              } : {},
               "aria-label": typeof title === "string" ? `${title} photos` : "Listing photos",
-              renderItem: (src) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              renderItem: (src, i) => renderPhoto ? renderPhoto(src, i) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "img",
                 {
                   src,
@@ -4403,15 +4580,133 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
               )
             }
           ),
-          verified && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "pointer-events-none absolute top-3 left-3 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Badge, { variant: "ok", size: "sm", children: [
+          !isSpec && verified && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "pointer-events-none absolute top-3 left-3 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Badge, { variant: "ok", size: "sm", children: [
             /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons8.IconGlyph, { name: "verified", size: 11 }),
             " Verified host"
-          ] }) })
+          ] }) }),
+          isSpec && flag && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "pointer-events-none absolute top-3 left-3 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium backdrop-blur",
+                flagToneClass[flag.tone ?? "accent"],
+                cls.flag
+              ),
+              children: [
+                flag.icon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons8.IconGlyph, { name: flag.icon, size: 11 }),
+                flag.label
+              ]
+            }
+          ) }),
+          isSpec && !hidePhotoCounter && photos.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute top-3 right-3 z-10 rounded-full bg-black/55 px-2.5 py-1 font-mono text-[11px] text-white backdrop-blur",
+                cls.photoCounter
+              ),
+              children: [
+                photoIndex + 1,
+                " / ",
+                photos.length
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-1 p-3", children: [
-          eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: eyebrow }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text text-[14px] leading-snug font-semibold", children: title }),
+        isSpec ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex flex-col", cls.body), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex flex-col gap-2 p-4 pb-3", cls.header), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text text-[15px] leading-snug font-semibold", cls.title), children: title }),
+              category && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "border-border bg-panel-2 text-text-muted shrink-0 rounded-full border px-2 py-0.5 text-[10px] tracking-wide uppercase",
+                    cls.category
+                  ),
+                  children: category
+                }
+              )
+            ] }),
+            meta && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text-dim font-mono text-[11px] tracking-wide", cls.meta), children: meta }),
+            specs && specs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "dl",
+              {
+                className: cn(
+                  "border-border mt-1 grid gap-2 border-t pt-3",
+                  specs.length === 2 && "grid-cols-2",
+                  specs.length === 3 && "grid-cols-3",
+                  specs.length >= 4 && "grid-cols-4",
+                  cls.specs
+                ),
+                children: specs.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex flex-col gap-0.5", cls.specCell), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    "dt",
+                    {
+                      className: cn(
+                        "text-text-dim text-[10px] tracking-wider uppercase",
+                        cls.specLabel
+                      ),
+                      children: s.label
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("dd", { className: cn("text-text text-[13px] font-medium", cls.specValue), children: s.value })
+                ] }, i))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+            "div",
+            {
+              className: cn(
+                "border-border bg-panel-2 relative z-10 flex items-center justify-between gap-2 border-t px-4 py-3",
+                cls.footer
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-col leading-tight", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-baseline gap-1.5", children: [
+                  pricePrefix && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim text-[11px]", children: pricePrefix }),
+                  originalPrice && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim decoration-sale text-[11px] line-through", children: originalPrice }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text text-[15px] font-semibold", cls.price), children: price }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text-dim text-[11px]", cls.priceUnit), children: priceUnit })
+                ] }) }),
+                cta && (cta.href ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  Button,
+                  {
+                    asChild: true,
+                    variant: "primary",
+                    size: "sm",
+                    disabled: cta.disabled,
+                    className: cls.cta,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("a", { href: cta.href, onClick: cta.onClick, children: cta.label })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: cta.onClick,
+                    disabled: cta.disabled,
+                    className: cls.cta,
+                    children: cta.label
+                  }
+                ))
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex flex-col gap-1 p-3", cls.body), children: [
+          eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            "span",
+            {
+              className: cn(
+                "text-text-dim font-mono text-[10px] tracking-wide uppercase",
+                cls.eyebrow
+              ),
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex items-start justify-between gap-2", cls.header), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text text-[14px] leading-snug font-semibold", cls.title), children: title }),
             rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-1 text-[12px]", children: [
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons8.IconGlyph, { name: "star", size: 12, className: "text-rating" }),
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text font-medium", children: rating.toFixed(1) }),
@@ -4422,19 +4717,29 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
               ] })
             ] })
           ] }),
-          (host || distance) && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "text-text-dim flex items-center gap-2 text-[12px]", children: [
+          (host || distance) && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("text-text-dim flex items-center gap-2 text-[12px]", cls.meta), children: [
             host && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: host }),
             host && distance && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, children: "\xB7" }),
             distance && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: distance })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mt-2 flex items-baseline gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("mt-2 flex items-baseline gap-2", cls.footer), children: [
             originalPrice && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim decoration-sale text-[12px] line-through", children: originalPrice }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text text-[15px] font-semibold", children: price }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim text-[12px]", children: priceUnit })
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text text-[15px] font-semibold", cls.price), children: price }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("text-text-dim text-[12px]", cls.priceUnit), children: priceUnit })
           ] }),
-          rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Rating, { value: rating, max: 5, precision: "half", size: "sm", readOnly: true, className: "sr-only" })
+          rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            Rating,
+            {
+              value: rating,
+              max: 5,
+              precision: "half",
+              size: "sm",
+              readOnly: true,
+              className: "sr-only"
+            }
+          )
         ] }),
-        href && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        href && stretchedLinkSupported && !onClick && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "a",
           {
             href,
@@ -4442,7 +4747,16 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
             className: "absolute inset-0 z-0 no-underline"
           }
         ),
-        onFavorite && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        onClick && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick,
+            "aria-label": typeof title === "string" ? `View ${title}` : "View listing",
+            className: "focus-visible:ring-accent-dim absolute inset-0 z-0 cursor-pointer bg-transparent outline-none focus-visible:ring-[3px]"
+          }
+        ),
+        !isSpec && onFavorite && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "button",
           {
             type: "button",
@@ -4452,7 +4766,8 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
             className: cn(
               "absolute top-3 right-3 z-20 inline-grid h-8 w-8 cursor-pointer place-items-center rounded-full",
               "bg-panel/85 hover:bg-panel border-border border shadow-sm backdrop-blur",
-              favorited ? "text-err" : "text-text-dim hover:text-text"
+              favorited ? "text-err" : "text-text-dim hover:text-text",
+              cls.favorite
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons8.IconGlyph, { name: "heart", size: 16 })
           }
@@ -4463,8 +4778,355 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
 });
 ListingCard.displayName = "ListingCard";
 
-// src/patterns/PhoneInput/PhoneInput.tsx
+// src/patterns/ListingDetail/ListingDetail.tsx
+var RadixDialog6 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_icons9 = require("@ship-it-ui/icons");
 var import_react61 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function renderAction(action, variant) {
+  if (action.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { asChild: true, variant, disabled: action.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("a", { href: action.href, onClick: action.onClick, children: action.label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { variant, onClick: action.onClick, disabled: action.disabled, children: action.label });
+}
+var flagToneClass2 = {
+  accent: "bg-accent-dim text-accent",
+  purple: "bg-[color-mix(in_oklab,var(--color-purple),transparent_75%)] text-purple",
+  pink: "bg-[color-mix(in_oklab,var(--color-pink),transparent_75%)] text-pink",
+  ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_75%)] text-ok",
+  warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_75%)] text-warn"
+};
+var ListingDetail = (0, import_react61.forwardRef)(function ListingDetail2({
+  variant = "default",
+  open,
+  defaultOpen,
+  onOpenChange,
+  photos,
+  renderPhoto,
+  title,
+  eyebrow,
+  description,
+  rating,
+  reviewCount,
+  price,
+  priceUnit = "/day",
+  originalPrice,
+  pricePrefix,
+  host,
+  features,
+  primaryAction,
+  secondaryAction,
+  flag,
+  category,
+  meta,
+  specs,
+  cta,
+  hidePhotoCounter,
+  classNames: cls = {}
+}, ref) {
+  const [galleryIndex, setGalleryIndex] = (0, import_react61.useState)(0);
+  const [lightboxOpen, setLightboxOpen] = (0, import_react61.useState)(false);
+  const isSpec = variant === "spec";
+  const lightboxTitle = typeof title === "string" ? `${title} photos` : "Listing photos";
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(RadixDialog6.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(RadixDialog6.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        RadixDialog6.Overlay,
+        {
+          className: cn(
+            "z-overlay fixed inset-0 bg-black/55 backdrop-blur-[4px]",
+            "data-[state=open]:animate-[ship-fade-in_150ms_ease]",
+            cls.overlay
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        RadixDialog6.Content,
+        {
+          ref,
+          ...description ? {} : { "aria-describedby": void 0 },
+          className: cn(
+            "z-modal fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "w-[calc(100%-32px)] max-w-[960px]",
+            "max-h-[min(92vh,820px)] overflow-hidden",
+            "bg-panel border-border-strong rounded-lg border shadow-lg outline-none",
+            "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]",
+            "flex flex-col",
+            cls.content
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-1 gap-6 overflow-y-auto p-6 md:grid-cols-[1.1fr_1fr]",
+                  isSpec && cta && "pb-4",
+                  cls.grid
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("flex flex-col gap-3", cls.photos), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative overflow-hidden rounded-md", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        Carousel,
+                        {
+                          items: photos,
+                          index: galleryIndex,
+                          onIndexChange: setGalleryIndex,
+                          ...isSpec ? { showDots: false } : {},
+                          "aria-label": typeof title === "string" ? `${title} photos` : "Listing photos",
+                          renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "gallery") : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            "img",
+                            {
+                              src,
+                              alt: "",
+                              className: "block h-full w-full object-cover",
+                              loading: "lazy"
+                            }
+                          )
+                        }
+                      ),
+                      isSpec && flag ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-none absolute top-3 left-3 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "span",
+                        {
+                          className: cn(
+                            "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium backdrop-blur",
+                            flagToneClass2[flag.tone ?? "accent"],
+                            cls.flag
+                          ),
+                          children: [
+                            flag.icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: flag.icon, size: 11 }),
+                            flag.label
+                          ]
+                        }
+                      ) }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setLightboxOpen(true),
+                          "aria-label": "Open photo viewer",
+                          className: cn(
+                            "bg-panel/85 hover:bg-panel border-border text-text-muted hover:text-text focus-visible:ring-accent-dim absolute z-10 inline-grid h-8 w-8 cursor-pointer place-items-center rounded-full border shadow-sm backdrop-blur outline-none focus-visible:ring-[3px]",
+                            isSpec ? "right-3 bottom-3" : "top-3 left-3"
+                          ),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: "maximize", size: 14 })
+                        }
+                      ),
+                      isSpec && !hidePhotoCounter && photos.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none absolute top-3 right-3 z-10 rounded-full bg-black/55 px-2.5 py-1 font-mono text-[11px] text-white backdrop-blur",
+                            cls.photoCounter
+                          ),
+                          children: [
+                            galleryIndex + 1,
+                            " / ",
+                            photos.length
+                          ]
+                        }
+                      )
+                    ] }),
+                    !isSpec && features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: cn("flex flex-wrap gap-2", cls.features), children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                      "li",
+                      {
+                        className: "border-border bg-panel-2 text-text-muted inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px]",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: f.icon, size: 12 }),
+                          f.label
+                        ]
+                      },
+                      i
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("flex flex-col gap-4", cls.info), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("header", { className: cn("flex flex-col gap-1.5", cls.header), children: [
+                      eyebrow && !isSpec && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: eyebrow }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixDialog6.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          "h2",
+                          {
+                            className: cn("text-text text-[22px] leading-tight font-semibold", cls.title),
+                            children: title
+                          }
+                        ) }),
+                        isSpec && category && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "border-border bg-panel-2 text-text-muted mt-1 shrink-0 rounded-full border px-2 py-0.5 text-[10px] tracking-wide uppercase",
+                              cls.category
+                            ),
+                            children: category
+                          }
+                        )
+                      ] }),
+                      isSpec && meta && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "span",
+                        {
+                          className: cn("text-text-dim font-mono text-[12px] tracking-wide", cls.meta),
+                          children: meta
+                        }
+                      ),
+                      rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "text-text-muted mt-1 flex items-center gap-2 text-[13px]", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: "star", size: 13, className: "text-rating" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text font-medium", children: rating.toFixed(2) }),
+                        reviewCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { children: [
+                          "(",
+                          reviewCount,
+                          " reviews)"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Rating,
+                          {
+                            value: rating,
+                            max: 5,
+                            precision: "half",
+                            size: "sm",
+                            readOnly: true,
+                            className: "sr-only"
+                          }
+                        )
+                      ] })
+                    ] }),
+                    isSpec && specs && specs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "dl",
+                      {
+                        className: cn(
+                          "border-border grid grid-cols-2 gap-3 border-t pt-4 sm:grid-cols-3",
+                          cls.specs
+                        ),
+                        children: specs.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("flex flex-col gap-0.5", cls.specCell), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            "dt",
+                            {
+                              className: cn(
+                                "text-text-dim text-[10px] tracking-wider uppercase",
+                                cls.specLabel
+                              ),
+                              children: s.label
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("dd", { className: cn("text-text text-[15px] font-semibold", cls.specValue), children: s.value })
+                        ] }, i))
+                      }
+                    ),
+                    host && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                      "div",
+                      {
+                        className: cn("border-border flex items-center gap-3 border-t pt-4", cls.host),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            Avatar,
+                            {
+                              size: "md",
+                              name: typeof host.name === "string" ? host.name : "Host",
+                              src: host.avatarUrl
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "text-text inline-flex items-center gap-1.5 text-[13px] font-medium", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { children: [
+                                "Hosted by ",
+                                host.name
+                              ] }),
+                              host.verified && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Badge, { variant: "ok", size: "sm", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: "verified", size: 11 }),
+                                " Verified"
+                              ] })
+                            ] }),
+                            host.meta && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim text-[12px]", children: host.meta })
+                          ] })
+                        ]
+                      }
+                    ),
+                    description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixDialog6.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: cn("text-text-muted text-[13px] leading-[1.6]", cls.description), children: description }) }),
+                    !isSpec && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                      "div",
+                      {
+                        className: cn(
+                          "border-border mt-auto flex flex-col gap-3 border-t pt-4",
+                          cls.footer
+                        ),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+                            originalPrice && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim decoration-sale text-[13px] line-through", children: originalPrice }),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-text text-[22px] font-semibold", cls.price), children: price }),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-text-dim text-[13px]", cls.priceUnit), children: priceUnit })
+                          ] }),
+                          (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end", children: [
+                            secondaryAction && renderAction(secondaryAction, "ghost"),
+                            primaryAction && renderAction(primaryAction, "primary")
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            isSpec && (cta || price) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "border-border bg-panel-2 flex items-center justify-between gap-3 border-t px-6 py-4",
+                  cls.footer
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+                    pricePrefix && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim text-[12px]", children: pricePrefix }),
+                    originalPrice && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim decoration-sale text-[13px] line-through", children: originalPrice }),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-text text-[20px] font-semibold", cls.price), children: price }),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-text-dim text-[13px]", cls.priceUnit), children: priceUnit })
+                  ] }),
+                  cta && (cta.href ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { asChild: true, variant: "primary", disabled: cta.disabled, className: cls.cta, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("a", { href: cta.href, onClick: cta.onClick, children: cta.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    Button,
+                    {
+                      variant: "primary",
+                      onClick: cta.onClick,
+                      disabled: cta.disabled,
+                      className: cls.cta,
+                      children: cta.label
+                    }
+                  ))
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixDialog6.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close listing details",
+                className: cn(
+                  "bg-panel-2 hover:bg-panel-2/80 text-text-muted hover:text-text border-border focus-visible:ring-accent-dim absolute top-3 right-3 inline-grid h-9 w-9 cursor-pointer place-items-center rounded-full border outline-none focus-visible:ring-[3px]",
+                  cls.close
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons9.IconGlyph, { name: "close", size: 16 })
+              }
+            ) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      Lightbox,
+      {
+        open: lightboxOpen,
+        onOpenChange: setLightboxOpen,
+        items: photos,
+        index: galleryIndex,
+        onIndexChange: setGalleryIndex,
+        title: lightboxTitle,
+        renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "lightbox") : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("img", { src, alt: "", className: "max-h-[88vh] max-w-[92vw] object-contain" })
+      }
+    )
+  ] });
+});
+ListingDetail.displayName = "ListingDetail";
+
+// src/patterns/PhoneInput/PhoneInput.tsx
+var import_react62 = require("react");
 
 // src/patterns/PhoneInput/countries.ts
 var phoneCountries = [
@@ -4508,7 +5170,7 @@ var phoneCountries = [
 ];
 
 // src/patterns/PhoneInput/PhoneInput.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function parseE164(value, list) {
   if (!value.startsWith("+")) return null;
   const digits = value.slice(1);
@@ -4522,7 +5184,7 @@ function toE164(country, national) {
   if (cleaned.length === 0) return "";
   return `+${country.dialCode}${cleaned}`;
 }
-var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
+var PhoneInput = (0, import_react62.forwardRef)(function PhoneInput2({
   value,
   defaultValue,
   onValueChange,
@@ -4537,13 +5199,13 @@ var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
     defaultValue: defaultValue ?? "",
     onChange: onValueChange
   });
-  const parsed = (0, import_react61.useMemo)(() => parseE164(committed ?? "", countries), [committed, countries]);
-  const [country, setCountry] = (0, import_react61.useState)(
+  const parsed = (0, import_react62.useMemo)(() => parseE164(committed ?? "", countries), [committed, countries]);
+  const [country, setCountry] = (0, import_react62.useState)(
     parsed?.country ?? countries.find((c) => c.code === defaultCountry) ?? countries[0]
   );
-  const [national, setNational] = (0, import_react61.useState)(parsed?.national ?? "");
-  const lastEmittedRef = (0, import_react61.useRef)(committed ?? "");
-  (0, import_react61.useEffect)(() => {
+  const [national, setNational] = (0, import_react62.useState)(parsed?.national ?? "");
+  const lastEmittedRef = (0, import_react62.useRef)(committed ?? "");
+  (0, import_react62.useEffect)(() => {
     const current = committed ?? "";
     if (current === lastEmittedRef.current) return;
     lastEmittedRef.current = current;
@@ -4568,14 +5230,14 @@ var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
     lastEmittedRef.current = emitted;
     setCommitted(emitted);
   };
-  const selectOptions = (0, import_react61.useMemo)(
+  const selectOptions = (0, import_react62.useMemo)(
     () => countries.map((c) => ({
       value: c.code,
       label: `${c.flag} +${c.dialCode}`
     })),
     [countries]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       className: cn(
@@ -4584,7 +5246,7 @@ var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
         disabled && "opacity-50"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Select,
           {
             options: selectOptions,
@@ -4594,7 +5256,7 @@ var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
             "aria-label": "Country"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "input",
           {
             ref,
@@ -4616,8 +5278,8 @@ var PhoneInput = (0, import_react61.forwardRef)(function PhoneInput2({
 PhoneInput.displayName = "PhoneInput";
 
 // src/patterns/PriceBreakdown/PriceBreakdown.tsx
-var import_react62 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function PriceBreakdownRoot({
   items,
   total,
@@ -4627,30 +5289,30 @@ function PriceBreakdownRoot({
   children,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
-    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PriceBreakdownLine, { ...item }, i)),
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
+    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PriceBreakdownLine, { ...item }, i)),
     children,
-    total !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "border-border mt-2 flex items-baseline justify-between border-t pt-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text text-[14px] font-semibold", children: totalLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-text text-[16px] font-semibold", children: [
+    total !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "border-border mt-2 flex items-baseline justify-between border-t pt-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text text-[14px] font-semibold", children: totalLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "text-text text-[16px] font-semibold", children: [
         total,
-        currency && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text-dim ml-1 text-[12px] font-normal", children: currency })
+        currency && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim ml-1 text-[12px] font-normal", children: currency })
       ] })
     ] })
   ] });
 }
-var PriceBreakdown = (0, import_react62.forwardRef)(PriceBreakdownRoot);
+var PriceBreakdown = (0, import_react63.forwardRef)(PriceBreakdownRoot);
 PriceBreakdown.displayName = "PriceBreakdown";
-var PriceBreakdownLine = (0, import_react62.forwardRef)(
+var PriceBreakdownLine = (0, import_react63.forwardRef)(
   function PriceBreakdownLine2({ label, subLabel, amount, originalAmount, discount, className }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: cn("flex items-baseline justify-between gap-3", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text text-[13px]", children: label }),
-        subLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text-dim text-[11px]", children: subLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: cn("flex items-baseline justify-between gap-3", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text text-[13px]", children: label }),
+        subLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim text-[11px]", children: subLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "inline-flex shrink-0 items-baseline gap-2", children: [
-        originalAmount && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text-dim decoration-sale text-[12px] line-through", children: originalAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "inline-flex shrink-0 items-baseline gap-2", children: [
+        originalAmount && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim decoration-sale text-[12px] line-through", children: originalAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "span",
           {
             className: cn("text-[13px] font-medium", discount ? "text-sale-text" : "text-text"),
@@ -4665,19 +5327,19 @@ PriceBreakdownLine.displayName = "PriceBreakdownLine";
 PriceBreakdown.Line = PriceBreakdownLine;
 
 // src/patterns/ReviewCard/ReviewCard.tsx
-var import_icons9 = require("@ship-it-ui/icons");
-var import_react63 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var ReviewCard = (0, import_react63.forwardRef)(function ReviewCard2({ author, authorAvatar, rating, date, body, photos, verified, subtitle, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+var import_icons10 = require("@ship-it-ui/icons");
+var import_react64 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var ReviewCard = (0, import_react64.forwardRef)(function ReviewCard2({ author, authorAvatar, rating, date, body, photos, verified, subtitle, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "article",
     {
       ref,
       className: cn("border-border bg-panel flex flex-col gap-3 rounded-md border p-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("header", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("header", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Avatar,
             {
               src: authorAvatar,
@@ -4685,24 +5347,24 @@ var ReviewCard = (0, import_react63.forwardRef)(function ReviewCard2({ author, a
               size: "md"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text text-[14px] leading-tight font-semibold", children: author }),
-              verified && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Badge, { variant: "ok", size: "sm", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons9.IconGlyph, { name: "verified", size: 11 }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text text-[14px] leading-tight font-semibold", children: author }),
+              verified && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "ok", size: "sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons10.IconGlyph, { name: "verified", size: 11 }),
                 " Verified trip"
               ] })
             ] }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim text-[11px]", children: subtitle }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Rating, { value: rating, max: 5, precision: "half", size: "sm", readOnly: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim text-[11px]", children: "\xB7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("time", { className: "text-text-dim text-[11px]", children: date })
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text-dim text-[11px]", children: subtitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Rating, { value: rating, max: 5, precision: "half", size: "sm", readOnly: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text-dim text-[11px]", children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("time", { className: "text-text-dim text-[11px]", children: date })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-text text-[13px] leading-relaxed", children: body }),
-        photos && photos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: photos.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-text text-[13px] leading-relaxed", children: body }),
+        photos && photos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: photos.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "img",
           {
             src,
@@ -4719,11 +5381,11 @@ var ReviewCard = (0, import_react63.forwardRef)(function ReviewCard2({ author, a
 ReviewCard.displayName = "ReviewCard";
 
 // src/patterns/Dots/Dots.tsx
-var import_react64 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var Dots = (0, import_react64.forwardRef)(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+var import_react65 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Dots = (0, import_react65.forwardRef)(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
   const interactive = typeof onChange === "function";
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "nav",
     {
       ref,
@@ -4737,7 +5399,7 @@ var Dots = (0, import_react64.forwardRef)(function Dots2({ total, current, onCha
           isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
         );
         if (interactive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             "button",
             {
               type: "button",
@@ -4754,7 +5416,7 @@ var Dots = (0, import_react64.forwardRef)(function Dots2({ total, current, onCha
             i
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "aria-hidden": true, className: sharedClass }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: sharedClass }, i);
       })
     }
   );
@@ -4762,13 +5424,13 @@ var Dots = (0, import_react64.forwardRef)(function Dots2({ total, current, onCha
 Dots.displayName = "Dots";
 
 // src/patterns/Dropzone/Dropzone.tsx
-var import_react65 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react66 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function listToArray(list) {
   if (!list) return [];
   return Array.from(list);
 }
-var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
+var Dropzone = (0, import_react66.forwardRef)(function Dropzone2({
   onFiles,
   accept,
   multiple = true,
@@ -4779,7 +5441,7 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
   className,
   ...props
 }, ref) {
-  const [isDragging, setIsDragging] = (0, import_react65.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react66.useState)(false);
   const onDragOver = (e) => {
     if (disabled) return;
     e.preventDefault();
@@ -4793,7 +5455,7 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
     const files = listToArray(e.dataTransfer.files);
     if (files.length) onFiles?.(files);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "label",
     {
       ref,
@@ -4810,7 +5472,7 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "input",
           {
             type: "file",
@@ -4826,7 +5488,7 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -4834,8 +5496,8 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
             children: icon
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mb-1 text-[13px] font-medium", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-text-dim text-[11px]", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mb-1 text-[13px] font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-text-dim text-[11px]", children: description })
       ]
     }
   );
@@ -4843,10 +5505,10 @@ var Dropzone = (0, import_react65.forwardRef)(function Dropzone2({
 Dropzone.displayName = "Dropzone";
 
 // src/patterns/EmptyState/EmptyState.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_react66 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var plateStyles = (0, import_class_variance_authority11.cva)("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_react67 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var plateStyles = (0, import_class_variance_authority12.cva)("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
   variants: {
     tone: {
       neutral: "bg-panel-2 text-text-muted",
@@ -4858,8 +5520,8 @@ var plateStyles = (0, import_class_variance_authority11.cva)("grid h-12 w-12 pla
   },
   defaultVariants: { tone: "neutral" }
 });
-var EmptyState = (0, import_react66.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+var EmptyState = (0, import_react67.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       ref,
@@ -4869,10 +5531,10 @@ var EmptyState = (0, import_react66.forwardRef)(function EmptyState2({ icon, tit
       ),
       ...props,
       children: [
-        icon != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-[14px] font-medium", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
-        chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "button",
           {
             type: "button",
@@ -4894,18 +5556,18 @@ var EmptyState = (0, import_react66.forwardRef)(function EmptyState2({ icon, tit
 EmptyState.displayName = "EmptyState";
 
 // src/patterns/FileChip/FileChip.tsx
-var import_react67 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_react68 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function deriveExt(name) {
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "FILE";
   return name.slice(dot + 1).slice(0, 4).toUpperCase();
 }
-var FileChip = (0, import_react67.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+var FileChip = (0, import_react68.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
   const ext = deriveExt(name);
   const showProgress = typeof progress === "number";
   const isComplete = showProgress && progress >= 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ref,
@@ -4915,7 +5577,7 @@ var FileChip = (0, import_react67.forwardRef)(function FileChip2({ name, size, p
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -4923,17 +5585,17 @@ var FileChip = (0, import_react67.forwardRef)(function FileChip2({ name, size, p
             children: icon ?? ext
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
             size,
-            showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { children: [
+            showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { children: [
               " \xB7 ",
               Math.round(progress),
               "%"
             ] })
           ] }),
-          showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "div",
             {
               className: cn(
@@ -4944,7 +5606,7 @@ var FileChip = (0, import_react67.forwardRef)(function FileChip2({ name, size, p
             }
           ) })
         ] }),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "button",
           {
             type: "button",
@@ -4964,10 +5626,10 @@ var FileChip = (0, import_react67.forwardRef)(function FileChip2({ name, size, p
 FileChip.displayName = "FileChip";
 
 // src/patterns/FilterPanel/FilterPanel.tsx
-var import_react68 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var EMPTY = Object.freeze({});
-var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
+var FilterPanel = (0, import_react69.forwardRef)(function FilterPanel2({
   facets,
   value,
   defaultValue,
@@ -4985,7 +5647,7 @@ var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
     onChange: onValueChange
   });
   const total = facets.reduce((sum, facet) => sum + (selection[facet.id]?.length ?? 0), 0);
-  const toggle = (0, import_react68.useCallback)(
+  const toggle = (0, import_react69.useCallback)(
     (facetId, optionValue, next) => {
       setSelection((prev) => {
         const current = prev?.[facetId] ?? [];
@@ -4996,11 +5658,11 @@ var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
     },
     [setSelection]
   );
-  const handleReset = (0, import_react68.useCallback)(() => {
+  const handleReset = (0, import_react69.useCallback)(() => {
     setSelection(EMPTY);
     onReset?.();
   }, [setSelection, onReset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
       ref,
@@ -5012,10 +5674,10 @@ var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-text-dim font-mono text-[10px] tracking-[1.4px] uppercase", children: title }),
-          total > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Badge, { size: "sm", variant: "accent", children: total }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-text-dim font-mono text-[10px] tracking-[1.4px] uppercase", children: title }),
+          total > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Badge, { size: "sm", variant: "accent", children: total }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             Button,
             {
               type: "button",
@@ -5028,7 +5690,7 @@ var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
             }
           )
         ] }),
-        facets.map((facet) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        facets.map((facet) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           FilterFacetGroup,
           {
             facet,
@@ -5045,12 +5707,12 @@ var FilterPanel = (0, import_react68.forwardRef)(function FilterPanel2({
 FilterPanel.displayName = "FilterPanel";
 function FilterFacetGroup({ facet, selected, counts, onToggle }) {
   const collapsible = facet.collapsible ?? true;
-  const [open, setOpen] = (0, import_react68.useState)(facet.defaultOpen ?? true);
+  const [open, setOpen] = (0, import_react69.useState)(facet.defaultOpen ?? true);
   const isOpen = !collapsible || open;
   const selectedCount = selected.length;
   const headingClass = "text-text-muted flex items-center gap-[6px] font-mono text-[10px] tracking-[1.4px] uppercase";
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { className: "flex flex-col gap-1", children: [
-    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: "flex flex-col gap-1", children: [
+    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       "button",
       {
         type: "button",
@@ -5063,20 +5725,20 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
           "hover:text-text"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex-1 text-left", children: facet.label }),
-          selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1 text-left", children: facet.label }),
+          selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn(headingClass, "px-1 py-[2px]"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex-1", children: facet.label }),
-      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn(headingClass, "px-1 py-[2px]"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1", children: facet.label }),
+      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { className: "m-0 flex list-none flex-col gap-[2px] p-0", children: facet.options.map((option) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "m-0 flex list-none flex-col gap-[2px] p-0", children: facet.options.map((option) => {
       const isSelected = selected.includes(option.value);
       const count = counts?.[option.value];
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("li", { className: "flex items-center gap-2 px-1 py-[3px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { className: "flex items-center gap-2 px-1 py-[3px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           Checkbox,
           {
             checked: isSelected,
@@ -5084,25 +5746,25 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
             label: option.label
           }
         ),
-        typeof count === "number" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[10px] tabular-nums", children: count })
+        typeof count === "number" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[10px] tabular-nums", children: count })
       ] }, option.value);
     }) })
   ] });
 }
 
 // src/patterns/HealthScore/HealthScore.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/patterns/RadialProgress/RadialProgress.tsx
-var import_react69 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react70 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var toneStrokeClass = {
   accent: "stroke-accent",
   ok: "stroke-ok",
   warn: "stroke-warn",
   err: "stroke-err"
 };
-var RadialProgress = (0, import_react69.forwardRef)(
+var RadialProgress = (0, import_react70.forwardRef)(
   function RadialProgress2({
     value,
     max = 100,
@@ -5120,7 +5782,7 @@ var RadialProgress = (0, import_react69.forwardRef)(
     const c = 2 * Math.PI * r;
     const dash = pct / 100 * c;
     const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
         ref,
@@ -5133,8 +5795,8 @@ var RadialProgress = (0, import_react69.forwardRef)(
         style: { width: size, height: size },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -5145,7 +5807,7 @@ var RadialProgress = (0, import_react69.forwardRef)(
                 className: "stroke-panel-2"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -5163,7 +5825,7 @@ var RadialProgress = (0, import_react69.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
         ]
       }
     );
@@ -5172,7 +5834,7 @@ var RadialProgress = (0, import_react69.forwardRef)(
 RadialProgress.displayName = "RadialProgress";
 
 // src/patterns/HealthScore/HealthScore.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function deltaTone(delta) {
   if (delta > 0) return "ok";
   if (delta < 0) return "err";
@@ -5189,7 +5851,7 @@ var toneTextClass = {
   warn: "text-warn",
   err: "text-err"
 };
-var HealthScore = (0, import_react70.forwardRef)(function HealthScore2({
+var HealthScore = (0, import_react71.forwardRef)(function HealthScore2({
   value,
   max = 100,
   delta,
@@ -5204,7 +5866,7 @@ var HealthScore = (0, import_react70.forwardRef)(function HealthScore2({
   const pct = max > 0 ? Math.round(Math.min(max, Math.max(0, value)) / max * 100) : 0;
   const resolvedTone = tone ?? (pct >= 80 ? "ok" : pct >= 50 ? "accent" : "warn");
   const indicatorTone = typeof delta === "number" ? deltaTone(delta) : "accent";
-  const core = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  const core = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "div",
     {
       ref,
@@ -5212,10 +5874,10 @@ var HealthScore = (0, import_react70.forwardRef)(function HealthScore2({
       "aria-label": ariaLabel ?? `${pct}% health`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(RadialProgress, { value, max, size, tone: resolvedTone }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-text-muted mt-1 text-[12px] leading-tight", children: label }),
-        typeof delta === "number" && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("font-mono text-[11px] tabular-nums", toneTextClass[indicatorTone]), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": true, children: deltaGlyph(delta) }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RadialProgress, { value, max, size, tone: resolvedTone }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "text-text-muted mt-1 text-[12px] leading-tight", children: label }),
+        typeof delta === "number" && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: cn("font-mono text-[11px] tabular-nums", toneTextClass[indicatorTone]), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { "aria-hidden": true, children: deltaGlyph(delta) }),
           " ",
           Math.abs(delta)
         ] })
@@ -5225,15 +5887,15 @@ var HealthScore = (0, import_react70.forwardRef)(function HealthScore2({
   if (!breakdown || breakdown.length === 0) {
     return core;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     HoverCard,
     {
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "inline-flex", children: core }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-[180px] flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: "Breakdown" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-[12px]", children: breakdown.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-text-muted flex-1 truncate", children: entry.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "inline-flex", children: core }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex min-w-[180px] flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: "Breakdown" }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-[12px]", children: breakdown.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-text-muted flex-1 truncate", children: entry.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "span",
             {
               className: cn(
@@ -5251,21 +5913,21 @@ var HealthScore = (0, import_react70.forwardRef)(function HealthScore2({
 HealthScore.displayName = "HealthScore";
 
 // src/patterns/LargeTitle/LargeTitle.tsx
-var import_react71 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var LargeTitle = (0, import_react71.forwardRef)(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+var import_react72 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var LargeTitle = (0, import_react72.forwardRef)(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "header",
     {
       ref,
       className: cn("px-screen flex items-end justify-between gap-3 py-3 pb-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          eyebrow && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          eyebrow && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
         ] }),
-        trailing && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "shrink-0", children: trailing })
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "shrink-0", children: trailing })
       ]
     }
   );
@@ -5274,10 +5936,10 @@ LargeTitle.displayName = "LargeTitle";
 
 // src/patterns/Menubar/Menubar.tsx
 var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
-var import_react72 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Menubar = (0, import_react72.forwardRef)(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var import_react73 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var Menubar = (0, import_react73.forwardRef)(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     RadixMenubar.Root,
     {
       ref,
@@ -5291,9 +5953,9 @@ var Menubar = (0, import_react72.forwardRef)(function Menubar2({ className, ...p
 });
 Menubar.displayName = "Menubar";
 var MenubarMenu = RadixMenubar.Menu;
-var MenubarTrigger = (0, import_react72.forwardRef)(
+var MenubarTrigger = (0, import_react73.forwardRef)(
   function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       RadixMenubar.Trigger,
       {
         ref,
@@ -5310,9 +5972,9 @@ var MenubarTrigger = (0, import_react72.forwardRef)(
   }
 );
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = (0, import_react72.forwardRef)(
+var MenubarContent = (0, import_react73.forwardRef)(
   function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       RadixMenubar.Content,
       {
         ref,
@@ -5334,24 +5996,24 @@ var itemBase3 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenubarItem = (0, import_react72.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+var MenubarItem = (0, import_react73.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     RadixMenubar.Item,
     {
       ref,
       className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenubarItem.displayName = "MenubarItem";
-var MenubarSeparator = (0, import_react72.forwardRef)(
+var MenubarSeparator = (0, import_react73.forwardRef)(
   function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       RadixMenubar.Separator,
       {
         ref,
@@ -5365,13 +6027,13 @@ MenubarSeparator.displayName = "MenubarSeparator";
 
 // src/patterns/NavBar/NavBar.tsx
 var RadixNav = __toESM(require("@radix-ui/react-navigation-menu"), 1);
-var import_react74 = require("react");
+var import_react75 = require("react");
 
 // src/patterns/Sidebar/Sidebar.tsx
-var import_react73 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var Sidebar = (0, import_react73.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var import_react74 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Sidebar = (0, import_react74.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "aside",
     {
       ref,
@@ -5385,12 +6047,12 @@ var Sidebar = (0, import_react73.forwardRef)(function Sidebar2({ width = 240, cl
   );
 });
 Sidebar.displayName = "Sidebar";
-var NavItem = (0, import_react73.forwardRef)(
+var NavItem = (0, import_react74.forwardRef)(
   function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
-    const inner = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1 truncate", children: label }),
-      badge != null && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    const inner = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex-1 truncate", children: label }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         "span",
         {
           className: cn(
@@ -5411,7 +6073,7 @@ var NavItem = (0, import_react73.forwardRef)(
     );
     if (href) {
       const anchorProps = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         "a",
         {
           ref,
@@ -5425,7 +6087,7 @@ var NavItem = (0, import_react73.forwardRef)(
       );
     }
     const buttonProps = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "button",
       {
         ref,
@@ -5440,7 +6102,7 @@ var NavItem = (0, import_react73.forwardRef)(
   }
 );
 NavItem.displayName = "NavItem";
-var NavSection = (0, import_react73.forwardRef)(function NavSection2({
+var NavSection = (0, import_react74.forwardRef)(function NavSection2({
   label,
   icon,
   action,
@@ -5454,16 +6116,16 @@ var NavSection = (0, import_react73.forwardRef)(function NavSection2({
   ...props
 }, ref) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react73.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react74.useState)(defaultOpen);
   const isOpen = !collapsible || (isControlled ? open : internalOpen);
-  const toggle = (0, import_react73.useCallback)(() => {
+  const toggle = (0, import_react74.useCallback)(() => {
     const next = !isOpen;
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   }, [isOpen, isControlled, onOpenChange]);
   const eyebrowClass = "text-text-dim flex items-center gap-[6px] px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase";
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       "button",
       {
         type: "button",
@@ -5476,18 +6138,18 @@ var NavSection = (0, import_react73.forwardRef)(function NavSection2({
           "hover:text-text-muted"
         ),
         children: [
-          icon != null && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1 text-left", children: label }),
+          icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex-1 text-left", children: label }),
           action,
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: eyebrowClass, children: [
-      icon != null && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1", children: label }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: eyebrowClass, children: [
+      icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex-1", children: label }),
       action
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "div",
       {
         className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
@@ -5500,12 +6162,12 @@ var NavSection = (0, import_react73.forwardRef)(function NavSection2({
 NavSection.displayName = "NavSection";
 
 // src/patterns/NavBar/NavBar.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function isActiveTree(item, activeId) {
   if (item.id === activeId) return true;
   return item.children?.some((c) => isActiveTree(c, activeId)) ?? false;
 }
-var NavBar = (0, import_react74.forwardRef)(function NavBar2({
+var NavBar = (0, import_react75.forwardRef)(function NavBar2({
   orientation = "horizontal",
   items,
   brand,
@@ -5519,17 +6181,17 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
   ...props
 }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react74.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react75.useState)(defaultValue);
   const activeId = isControlled ? value : internalValue;
-  const [drawerOpen, setDrawerOpen] = (0, import_react74.useState)(false);
-  const select = (0, import_react74.useCallback)(
+  const [drawerOpen, setDrawerOpen] = (0, import_react75.useState)(false);
+  const select = (0, import_react75.useCallback)(
     (id) => {
       if (!isControlled) setInternalValue(id);
       onValueChange?.(id);
     },
     [isControlled, onValueChange]
   );
-  const handleItemActivate = (0, import_react74.useCallback)(
+  const handleItemActivate = (0, import_react75.useCallback)(
     (id) => {
       select(id);
       setDrawerOpen(false);
@@ -5541,7 +6203,7 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
     // drawer is open on a viewport that's resizing past `md`, both navs can
     // sit in the DOM together. Identical accessible names would trip axe's
     // `landmark-unique` rule.
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       VerticalItem,
       {
         item,
@@ -5551,14 +6213,14 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
       item.id
     )) })
   );
-  const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       className: cn(
         "border-border bg-panel z-overlay sticky top-0 flex h-[52px] items-center gap-4 border-b px-5 md:hidden"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "button",
           {
             type: "button",
@@ -5568,15 +6230,15 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
             children: "\u2630"
           }
         ),
-        brand && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex items-center gap-3", children: actions })
+        brand && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex items-center gap-3", children: actions })
       ]
     }
   ) : null;
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
       mobileBar,
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "header",
         {
           ref,
@@ -5587,10 +6249,10 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
           ),
           ...props,
           children: [
-            brand && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.List, { className: "m-0! flex list-none! items-center gap-1 p-0! [&_li]:m-0!", children: items.map(
-                (item) => item.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            brand && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.List, { className: "m-0! flex list-none! items-center gap-1 p-0! [&_li]:m-0!", children: items.map(
+                (item) => item.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                   HorizontalDropdown,
                   {
                     item,
@@ -5599,7 +6261,7 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
                     onActivate: handleItemActivate
                   },
                   item.id
-                ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                   HorizontalLink,
                   {
                     item,
@@ -5608,13 +6270,13 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
                   }
                 ) }, item.id)
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
             ] }),
-            actions && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex items-center gap-3", children: actions })
+            actions && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex items-center gap-3", children: actions })
           ]
         }
       ),
-      responsive && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      responsive && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         Drawer,
         {
           open: drawerOpen,
@@ -5627,9 +6289,9 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
     mobileBar,
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "aside",
       {
         ref,
@@ -5642,8 +6304,8 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
         ),
         ...props,
         children: [
-          brand && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          brand && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             VerticalItem,
             {
               item,
@@ -5652,11 +6314,11 @@ var NavBar = (0, import_react74.forwardRef)(function NavBar2({
             },
             item.id
           )) }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
+          actions && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
         ]
       }
     ),
-    responsive && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    responsive && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Drawer,
       {
         open: drawerOpen,
@@ -5685,13 +6347,13 @@ function HorizontalLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: item.label }),
-    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "a",
       {
         href: item.href,
@@ -5703,7 +6365,7 @@ function HorizontalLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "button",
     {
       type: "button",
@@ -5716,8 +6378,8 @@ function HorizontalLink({ item, active, onActivate }) {
   ) });
 }
 function HorizontalDropdown({ item, active, activeId, onActivate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(RadixNav.Item, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(RadixNav.Item, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       RadixNav.Trigger,
       {
         className: cn(
@@ -5729,9 +6391,9 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ),
         disabled: item.disabled,
         children: [
-          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -5742,7 +6404,7 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
   ] });
 }
 function DropdownLink({ item, active, onActivate }) {
@@ -5759,13 +6421,13 @@ function DropdownLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex-1", children: item.label }),
-    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "flex-1", children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "a",
       {
         href: item.href,
@@ -5777,7 +6439,7 @@ function DropdownLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "button",
     {
       type: "button",
@@ -5792,9 +6454,9 @@ function DropdownLink({ item, active, onActivate }) {
 function VerticalItem({ item, activeId, onActivate }) {
   const hasChildren = (item.children?.length ?? 0) > 0;
   const treeActive = isActiveTree(item, activeId);
-  const [open, setOpen] = (0, import_react74.useState)(treeActive);
-  const prevTreeActive = (0, import_react74.useRef)(treeActive);
-  (0, import_react74.useEffect)(() => {
+  const [open, setOpen] = (0, import_react75.useState)(treeActive);
+  const prevTreeActive = (0, import_react75.useRef)(treeActive);
+  (0, import_react75.useEffect)(() => {
     if (treeActive && !prevTreeActive.current) setOpen(true);
     prevTreeActive.current = treeActive;
   }, [treeActive]);
@@ -5806,7 +6468,7 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
       onActivate(item.id);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       NavItem,
       {
         icon: item.icon,
@@ -5819,8 +6481,8 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "button",
       {
         type: "button",
@@ -5836,18 +6498,18 @@ function VerticalItem({ item, activeId, onActivate }) {
           item.disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex-1 truncate", children: item.label }),
-          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
   ] });
 }
 function ItemBadge({ active, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "span",
     {
       className: cn(
@@ -5860,8 +6522,8 @@ function ItemBadge({ active, children }) {
 }
 
 // src/patterns/OnboardingChecklist/OnboardingChecklist.tsx
-var import_react75 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var statusDot = {
   pending: "off",
   "in-progress": "sync",
@@ -5872,11 +6534,11 @@ var labelStateClass = {
   "in-progress": "text-text",
   done: "text-text-dim line-through"
 };
-var OnboardingChecklist = (0, import_react75.forwardRef)(
+var OnboardingChecklist = (0, import_react76.forwardRef)(
   function OnboardingChecklist2({ items, onItemClick, title = "Get started", progressLabel, hideProgress, className, ...props }, ref) {
     const total = items.length;
     const done = items.filter((i) => i.status === "done").length;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "section",
       {
         ref,
@@ -5887,11 +6549,11 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("header", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-[14px] font-medium", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("header", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-[14px] font-medium", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
           ] }),
-          !hideProgress && total > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          !hideProgress && total > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             "div",
             {
               role: "progressbar",
@@ -5900,7 +6562,7 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
               "aria-valuenow": done,
               "aria-label": typeof title === "string" ? `${title} progress` : "Setup progress",
               className: "bg-panel-2 h-[3px] w-full overflow-hidden rounded-full",
-              children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 "span",
                 {
                   "aria-hidden": true,
@@ -5913,10 +6575,10 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
             const interactive = typeof onItemClick === "function";
-            const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 StatusDot,
                 {
                   state: statusDot[item.status],
@@ -5925,17 +6587,17 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
                   className: "mt-[3px]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
-                item.description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
+                item.description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
               ] })
             ] });
             const labelRegionClass = cn(
               "flex flex-1 items-start gap-3 rounded-md px-2 py-2 text-left transition-colors duration-(--duration-micro)",
               interactive && "cursor-pointer outline-none hover:bg-panel-2 focus-visible:ring-[3px] focus-visible:ring-accent-dim"
             );
-            return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("li", { className: "flex items-start gap-2", children: [
-              interactive ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("li", { className: "flex items-start gap-2", children: [
+              interactive ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5944,8 +6606,8 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
                   className: labelRegionClass,
                   children: labelBlock
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: labelRegionClass, children: labelBlock }),
-              item.action && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "shrink-0 self-center", children: item.action })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: labelRegionClass, children: labelBlock }),
+              item.action && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "shrink-0 self-center", children: item.action })
             ] }, item.id);
           }) })
         ]
@@ -5956,8 +6618,8 @@ var OnboardingChecklist = (0, import_react75.forwardRef)(
 OnboardingChecklist.displayName = "OnboardingChecklist";
 
 // src/patterns/Pagination/Pagination.tsx
-var import_react76 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react77 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -5970,9 +6632,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = (0, import_react77.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "nav",
     {
       ref,
@@ -5980,7 +6642,7 @@ var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, tot
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           IconButton,
           {
             size: "sm",
@@ -5993,7 +6655,7 @@ var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, tot
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -6004,7 +6666,7 @@ var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, tot
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "button",
             {
               type: "button",
@@ -6022,7 +6684,7 @@ var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, tot
             item
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           IconButton,
           {
             size: "sm",
@@ -6040,10 +6702,10 @@ var Pagination = (0, import_react76.forwardRef)(function Pagination2({ page, tot
 Pagination.displayName = "Pagination";
 
 // src/patterns/Progress/Progress.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_react77 = require("react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var trackStyles = (0, import_class_variance_authority12.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react78 = require("react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var trackStyles = (0, import_class_variance_authority13.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
       sm: "h-[3px]",
@@ -6053,7 +6715,7 @@ var trackStyles = (0, import_class_variance_authority12.cva)("w-full rounded-ful
   },
   defaultVariants: { size: "md" }
 });
-var fillStyles = (0, import_class_variance_authority12.cva)("h-full rounded-full transition-[width] duration-(--duration-step)", {
+var fillStyles = (0, import_class_variance_authority13.cva)("h-full rounded-full transition-[width] duration-(--duration-step)", {
   variants: {
     tone: {
       accent: "bg-accent",
@@ -6064,7 +6726,7 @@ var fillStyles = (0, import_class_variance_authority12.cva)("h-full rounded-full
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = (0, import_react77.forwardRef)(function Progress2({
+var Progress = (0, import_react78.forwardRef)(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -6078,15 +6740,15 @@ var Progress = (0, import_react77.forwardRef)(function Progress2({
   const clamped = Math.min(max, Math.max(0, value));
   const pct = max > 0 ? clamped / max * 100 : 0;
   const display = Math.round(pct);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         role: "progressbar",
@@ -6095,7 +6757,7 @@ var Progress = (0, import_react77.forwardRef)(function Progress2({
         "aria-valuenow": indeterminate ? void 0 : display,
         "aria-label": typeof label === "string" ? label : void 0,
         className: trackStyles({ size }),
-        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -6105,7 +6767,7 @@ var Progress = (0, import_react77.forwardRef)(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
       }
     )
   ] });
@@ -6113,18 +6775,18 @@ var Progress = (0, import_react77.forwardRef)(function Progress2({
 Progress.displayName = "Progress";
 
 // src/patterns/PullToRefresh/PullToRefresh.tsx
-var import_react78 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_react79 = require("react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var labels = {
   idle: "Pull to refresh",
   pulling: "Pull to refresh",
   ready: "Release to refresh",
   loading: "Refreshing\u2026"
 };
-var PullToRefresh = (0, import_react78.forwardRef)(function PullToRefresh2({ state = "idle", label, className, ...props }, ref) {
+var PullToRefresh = (0, import_react79.forwardRef)(function PullToRefresh2({ state = "idle", label, className, ...props }, ref) {
   const isLoading = state === "loading";
   const transform = state === "ready" ? "rotate(180deg)" : state === "pulling" ? "rotate(90deg)" : "rotate(0deg)";
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     "div",
     {
       ref,
@@ -6134,7 +6796,7 @@ var PullToRefresh = (0, import_react78.forwardRef)(function PullToRefresh2({ sta
       className: cn("text-text-muted flex flex-col items-center gap-[6px] py-3", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -6150,7 +6812,7 @@ var PullToRefresh = (0, import_react78.forwardRef)(function PullToRefresh2({ sta
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
       ]
     }
   );
@@ -6158,8 +6820,8 @@ var PullToRefresh = (0, import_react78.forwardRef)(function PullToRefresh2({ sta
 PullToRefresh.displayName = "PullToRefresh";
 
 // src/patterns/Sparkline/Sparkline.tsx
-var import_react79 = require("react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_react80 = require("react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -6178,7 +6840,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = (0, import_react79.forwardRef)(function Sparkline2({
+var Sparkline = (0, import_react80.forwardRef)(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -6189,8 +6851,8 @@ var Sparkline = (0, import_react79.forwardRef)(function Sparkline2({
   "aria-label": ariaLabel = "Trend",
   ...props
 }, ref) {
-  const { line, area } = (0, import_react79.useMemo)(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  const { line, area } = (0, import_react80.useMemo)(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "svg",
     {
       ref,
@@ -6202,8 +6864,8 @@ var Sparkline = (0, import_react79.forwardRef)(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        fill && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "path",
           {
             d: line,
@@ -6221,16 +6883,16 @@ var Sparkline = (0, import_react79.forwardRef)(function Sparkline2({
 Sparkline.displayName = "Sparkline";
 
 // src/patterns/Spinner/Spinner.tsx
-var import_react80 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react81 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var sizes = {
   sm: { box: "h-3 w-3", border: "border-[2px]" },
   md: { box: "h-4 w-4", border: "border-[2px]" },
   lg: { box: "h-5 w-5", border: "border-[2px]" }
 };
-var Spinner2 = (0, import_react80.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = (0, import_react81.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "span",
     {
       ref,
@@ -6238,7 +6900,7 @@ var Spinner2 = (0, import_react80.forwardRef)(function Spinner3({ size = "md", l
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -6255,8 +6917,8 @@ var Spinner2 = (0, import_react80.forwardRef)(function Spinner3({ size = "md", l
 Spinner2.displayName = "Spinner";
 
 // src/patterns/Stepper/Stepper.tsx
-var import_react81 = require("react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_react82 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
 var dotStateClass = {
   done: "bg-accent text-on-accent border-accent",
@@ -6273,8 +6935,8 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = (0, import_react81.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+var Stepper = (0, import_react82.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "ol",
     {
       ref,
@@ -6286,19 +6948,19 @@ var Stepper = (0, import_react81.forwardRef)(function Stepper2({ steps, current,
         const id = typeof step === "string" ? void 0 : step.id;
         const state = stateFor(i, current);
         const connectorActive = i < current;
-        return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_react81.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_react82.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -6313,13 +6975,13 @@ var Stepper = (0, import_react81.forwardRef)(function Stepper2({ steps, current,
 Stepper.displayName = "Stepper";
 
 // src/patterns/TabBar/TabBar.tsx
-var import_react82 = require("react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
+var import_react83 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var TabBar = (0, import_react83.forwardRef)(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react82.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react83.useState)(defaultValue);
   const activeId = isControlled ? value : internalValue;
-  const handleSelect = (0, import_react82.useCallback)(
+  const handleSelect = (0, import_react83.useCallback)(
     (id, e) => {
       if (!isControlled) setInternalValue(id);
       onValueChange?.(id);
@@ -6327,7 +6989,7 @@ var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, def
     },
     [isControlled, onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "nav",
     {
       ref,
@@ -6342,7 +7004,7 @@ var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, def
       children: items.map((item) => {
         const isActive = item.id === activeId;
         if (item.elevated) {
-          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "grid place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "grid place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
             "button",
             {
               type: "button",
@@ -6358,13 +7020,13 @@ var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, def
                 "disabled:cursor-not-allowed disabled:opacity-40"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { "aria-hidden": true, children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { "aria-hidden": true, children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "sr-only", children: item.label })
               ]
             }
           ) }, item.id);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
           "button",
           {
             type: "button",
@@ -6379,9 +7041,9 @@ var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, def
               isActive ? "text-accent-text" : "text-text-muted hover:text-text"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "relative inline-flex", "aria-hidden": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "relative inline-flex", "aria-hidden": true, children: [
                 item.icon,
-                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                   "span",
                   {
                     className: cn(
@@ -6392,9 +7054,9 @@ var TabBar = (0, import_react82.forwardRef)(function TabBar2({ items, value, def
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "text-[10px] font-medium tracking-tight", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "text-[10px] font-medium tracking-tight", children: [
                 item.label,
-                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "sr-only", children: [
+                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "sr-only", children: [
                   ", ",
                   item.badge,
                   " unread"
@@ -6412,11 +7074,11 @@ TabBar.displayName = "TabBar";
 
 // src/patterns/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_react83 = require("react");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var TabsVariantContext = (0, import_react83.createContext)("underline");
-var tabsListStyles = (0, import_class_variance_authority13.cva)("", {
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_react84 = require("react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var TabsVariantContext = (0, import_react84.createContext)("underline");
+var tabsListStyles = (0, import_class_variance_authority14.cva)("", {
   variants: {
     variant: {
       underline: "flex gap-6 border-b border-border",
@@ -6424,7 +7086,7 @@ var tabsListStyles = (0, import_class_variance_authority13.cva)("", {
     }
   }
 });
-var tabsTriggerStyles = (0, import_class_variance_authority13.cva)(
+var tabsTriggerStyles = (0, import_class_variance_authority14.cva)(
   "cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
   {
     variants: {
@@ -6445,8 +7107,8 @@ var tabsTriggerStyles = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var Tabs = (0, import_react83.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+var Tabs = (0, import_react84.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     RadixTabs.Root,
     {
       ref,
@@ -6456,14 +7118,14 @@ var Tabs = (0, import_react83.forwardRef)(function Tabs2({ variant = "underline"
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = (0, import_react83.forwardRef)(function TabsList2({ className, ...props }, ref) {
-  const variant = (0, import_react83.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+var TabsList = (0, import_react84.forwardRef)(function TabsList2({ className, ...props }, ref) {
+  const variant = (0, import_react84.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = (0, import_react83.forwardRef)(function Tab2({ className, ...props }, ref) {
-  const variant = (0, import_react83.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+var Tab = (0, import_react84.forwardRef)(function Tab2({ className, ...props }, ref) {
+  const variant = (0, import_react84.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     RadixTabs.Trigger,
     {
       ref,
@@ -6473,9 +7135,9 @@ var Tab = (0, import_react83.forwardRef)(function Tab2({ className, ...props },
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = (0, import_react83.forwardRef)(
+var TabsContent = (0, import_react84.forwardRef)(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       RadixTabs.Content,
       {
         ref,
@@ -6491,8 +7153,8 @@ var TabsContent = (0, import_react83.forwardRef)(
 TabsContent.displayName = "TabsContent";
 
 // src/patterns/Timeline/Timeline.tsx
-var import_react84 = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_react85 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -6500,8 +7162,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = (0, import_react84.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+var Timeline = (0, import_react85.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "ol",
     {
       ref,
@@ -6511,14 +7173,14 @@ var Timeline = (0, import_react84.forwardRef)(function Timeline2({ events, class
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = (0, import_react84.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+var TimelineItem = (0, import_react85.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -6528,15 +7190,15 @@ var TimelineItem = (0, import_react84.forwardRef)(function TimelineItem2({ tone
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
 
 // src/patterns/Timeline/ActivityTimeline.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/patterns/Timeline/formatRelative.ts
 var SECOND = 1e3;
@@ -6571,7 +7233,7 @@ function formatRelative(input, now = /* @__PURE__ */ new Date()) {
 }
 
 // src/patterns/Timeline/ActivityTimeline.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var ringClass2 = {
   accent: "border-accent",
   ok: "border-ok",
@@ -6579,10 +7241,10 @@ var ringClass2 = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var ActivityTimeline = (0, import_react85.forwardRef)(
+var ActivityTimeline = (0, import_react86.forwardRef)(
   function ActivityTimeline2({ events, relativeNow, className, ...props }, ref) {
     const now = relativeNow ?? /* @__PURE__ */ new Date();
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "ol",
       {
         ref,
@@ -6595,8 +7257,8 @@ var ActivityTimeline = (0, import_react85.forwardRef)(
         children: events.map((event) => {
           const tone = event.tone ?? "accent";
           const time = formatRelative(event.at, now);
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("li", { className: "relative mb-4 last:mb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("li", { className: "relative mb-4 last:mb-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -6606,16 +7268,16 @@ var ActivityTimeline = (0, import_react85.forwardRef)(
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-              event.icon && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-[13px] font-medium", children: event.title }),
-              time && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+              event.icon && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "text-[13px] font-medium", children: event.title }),
+              time && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
             ] }),
-            event.actor && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
-              event.actor.avatar && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: event.actor.name })
+            event.actor && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
+              event.actor.avatar && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: event.actor.name })
             ] }),
-            event.payload && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "border-border bg-panel-2 mt-2 rounded-md border px-3 py-2 font-mono text-[11px] leading-[1.5]", children: event.payload })
+            event.payload && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "border-border bg-panel-2 mt-2 rounded-md border px-3 py-2 font-mono text-[11px] leading-[1.5]", children: event.payload })
           ] }, event.id);
         })
       }
@@ -6625,9 +7287,9 @@ var ActivityTimeline = (0, import_react85.forwardRef)(
 ActivityTimeline.displayName = "ActivityTimeline";
 
 // src/patterns/Topbar/Topbar.tsx
-var import_react86 = require("react");
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var Topbar = (0, import_react86.forwardRef)(function Topbar2({
+var import_react87 = require("react");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var Topbar = (0, import_react87.forwardRef)(function Topbar2({
   title,
   eyebrow,
   leading,
@@ -6641,7 +7303,7 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
 }, ref) {
   const isTouch = density === "touch";
   const backHandler = typeof back === "function" ? back : back ? onBack : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "header",
     {
       ref,
@@ -6652,7 +7314,7 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
       ),
       ...props,
       children: [
-        isTouch && back && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        isTouch && back && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "button",
           {
             type: "button",
@@ -6666,7 +7328,7 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
               "hover:bg-panel-2 h-touch w-touch",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
               "svg",
               {
                 width: "20",
@@ -6676,15 +7338,15 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
                 stroke: "currentColor",
                 strokeWidth: "2",
                 "aria-hidden": true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "m15 18-6-6 6-6" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "m15 18-6-6 6-6" })
               }
             )
           }
         ),
         leading,
-        (title || isTouch && eyebrow) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
-          isTouch && eyebrow && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        (title || isTouch && eyebrow) && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
+          isTouch && eyebrow && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "div",
             {
               className: cn(
@@ -6694,8 +7356,8 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
             }
           )
         ] }),
-        !isTouch && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
+        !isTouch && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
         children
       ]
     }
@@ -6704,8 +7366,9 @@ var Topbar = (0, import_react86.forwardRef)(function Topbar2({
 Topbar.displayName = "Topbar";
 
 // src/patterns/Tree/Tree.tsx
-var import_react87 = require("react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react88 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
   for (const item of items) {
@@ -6716,7 +7379,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
     }
   }
 }
-var Tree = (0, import_react87.forwardRef)(function Tree2({
+var Tree = (0, import_react88.forwardRef)(function Tree2({
   items,
   expanded: expandedProp,
   defaultExpanded,
@@ -6739,24 +7402,24 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
     onChange: onValueChange
   });
   const expandedSet = expanded ?? EMPTY_SET2;
-  const flatVisible = (0, import_react87.useMemo)(() => {
+  const flatVisible = (0, import_react88.useMemo)(() => {
     const out = [];
     flattenVisible(items, expandedSet, 1, null, out);
     return out;
   }, [items, expandedSet]);
-  const [activeId, setActiveId] = (0, import_react87.useState)(null);
-  (0, import_react87.useEffect)(() => {
+  const [activeId, setActiveId] = (0, import_react88.useState)(null);
+  (0, import_react88.useEffect)(() => {
     if (activeId && !flatVisible.some((f) => f.id === activeId)) {
       setActiveId(null);
     }
   }, [activeId, flatVisible]);
-  const tabStopId = (0, import_react87.useMemo)(() => {
+  const tabStopId = (0, import_react88.useMemo)(() => {
     if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
     if (value && flatVisible.some((f) => f.id === value)) return value;
     return flatVisible[0]?.id ?? null;
   }, [activeId, flatVisible, value]);
-  const listRef = (0, import_react87.useRef)(null);
-  const setRefs = (0, import_react87.useCallback)(
+  const listRef = (0, import_react88.useRef)(null);
+  const setRefs = (0, import_react88.useCallback)(
     (node) => {
       listRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -6764,20 +7427,20 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
     },
     [ref]
   );
-  const focusItem = (0, import_react87.useCallback)((id) => {
+  const focusItem = (0, import_react88.useCallback)((id) => {
     const root = listRef.current;
     if (!root) return;
     const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
     el?.focus();
   }, []);
-  const moveActive = (0, import_react87.useCallback)(
+  const moveActive = (0, import_react88.useCallback)(
     (id) => {
-      setActiveId(id);
-      queueMicrotask(() => focusItem(id));
+      (0, import_react_dom.flushSync)(() => setActiveId(id));
+      focusItem(id);
     },
     [focusItem]
   );
-  const toggle = (0, import_react87.useCallback)(
+  const toggle = (0, import_react88.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const next = new Set(prev ?? EMPTY_SET2);
@@ -6788,7 +7451,7 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const expand = (0, import_react87.useCallback)(
+  const expand = (0, import_react88.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -6800,7 +7463,7 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const collapse = (0, import_react87.useCallback)(
+  const collapse = (0, import_react88.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -6812,13 +7475,13 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const selectItem = (0, import_react87.useCallback)(
+  const selectItem = (0, import_react88.useCallback)(
     (id) => {
       setValue(id);
     },
     [setValue]
   );
-  const handleKeyDown = (0, import_react87.useCallback)(
+  const handleKeyDown = (0, import_react88.useCallback)(
     (e) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
@@ -6898,7 +7561,7 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
       toggle
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "ul",
     {
       ref: setRefs,
@@ -6906,7 +7569,7 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
       className: cn("flex flex-col gap-px text-[12px]", className),
       onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         TreeItemRow,
         {
           item,
@@ -6941,8 +7604,8 @@ function TreeItemRow({
   const isExpanded = hasChildren && expanded.has(item.id);
   const isSelected = selected === item.id;
   const isTabStop = tabStopId === item.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("li", { role: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("li", { role: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "div",
       {
         role: "treeitem",
@@ -6965,14 +7628,14 @@ function TreeItemRow({
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "flex-1 truncate", children: item.label }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       TreeItemRow,
       {
         item: child,
@@ -6990,10 +7653,10 @@ function TreeItemRow({
 }
 
 // src/patterns/WizardDialog/WizardDialog.tsx
-var RadixDialog6 = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_react88 = require("react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var WizardDialog = (0, import_react88.forwardRef)(function WizardDialog2({
+var RadixDialog7 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react89 = require("react");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var WizardDialog = (0, import_react89.forwardRef)(function WizardDialog2({
   open,
   defaultOpen,
   onOpenChange,
@@ -7009,19 +7672,19 @@ var WizardDialog = (0, import_react88.forwardRef)(function WizardDialog2({
   cancelLabel,
   onCancel
 }, ref) {
-  const [current, setCurrent] = (0, import_react88.useState)(initialStep);
+  const [current, setCurrent] = (0, import_react89.useState)(initialStep);
   const total = steps.length;
   const safeCurrent = Math.min(current, Math.max(0, total - 1));
   const step = steps[safeCurrent];
-  const goTo = (0, import_react88.useCallback)(
+  const goTo = (0, import_react89.useCallback)(
     (index) => {
       setCurrent(Math.min(Math.max(0, index), Math.max(0, total - 1)));
     },
     [total]
   );
-  const goNext = (0, import_react88.useCallback)(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
-  const goBack = (0, import_react88.useCallback)(() => setCurrent((c) => Math.max(c - 1, 0)), []);
-  const ctx = (0, import_react88.useMemo)(
+  const goNext = (0, import_react89.useCallback)(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
+  const goBack = (0, import_react89.useCallback)(() => setCurrent((c) => Math.max(c - 1, 0)), []);
+  const ctx = (0, import_react89.useMemo)(
     () => ({
       current: safeCurrent,
       total,
@@ -7033,7 +7696,7 @@ var WizardDialog = (0, import_react88.forwardRef)(function WizardDialog2({
     }),
     [safeCurrent, total, goNext, goBack, goTo]
   );
-  const stepperSteps = (0, import_react88.useMemo)(() => steps.map((s) => ({ id: s.id, label: s.label })), [steps]);
+  const stepperSteps = (0, import_react89.useMemo)(() => steps.map((s) => ({ id: s.id, label: s.label })), [steps]);
   if (!step) return null;
   const canAdvance = step.canAdvance ? step.canAdvance(ctx) : true;
   const body = typeof step.content === "function" ? step.content(ctx) : step.content;
@@ -7044,23 +7707,36 @@ var WizardDialog = (0, import_react88.forwardRef)(function WizardDialog2({
       goNext();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(DialogContent, { ref, width, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardTitle, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardDescription, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: body }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+    DialogContent,
+    {
+      ref,
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WizardTitle, { children: title }) : (
+          // Radix Dialog requires a Title for assistive tech and warns in dev
+          // mode without one. Fall back to a visually-hidden generic title so
+          // the contract is met even when no title prop is supplied.
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RadixDialog7.Title, { className: "sr-only", children: "Wizard" })
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WizardDescription, { children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "mb-5", children: body }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex justify-end gap-2", children: [
+          cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
+        ] })
+      ]
+    }
+  ) });
 });
 function WizardTitle({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(RadixDialog6.Title, { className: "mb-2 text-[16px] font-medium", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RadixDialog7.Title, { className: "mb-2 text-[16px] font-medium", children });
 }
 function WizardDescription({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(RadixDialog6.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RadixDialog7.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
 }
 WizardDialog.displayName = "WizardDialog";
 // Annotate the CommonJS export names for ESM import in node:
@@ -7138,6 +7814,7 @@ WizardDialog.displayName = "WizardDialog";
   LargeTitle,
   Lightbox,
   ListingCard,
+  ListingDetail,
   MenuCheckboxItem,
   MenuItem,
   MenuSeparator,