react-os-shell 3.3.2 → 3.6.1

package/dist/index.js

@@ -1,24 +1,24 @@
-import { subscribePomo, getPomoSnapshot } from './chunk-6VMTAVUD.js';
-export { setShellTodoProvider } from './chunk-6VMTAVUD.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-HM2POVAI.js';
-export { Breadcrumbs } from './chunk-HM2POVAI.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-L7B66ALK.js';
+export { setShellTodoProvider } from './chunk-L7B66ALK.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-W75O4R5Y.js';
+export { Breadcrumbs } from './chunk-W75O4R5Y.js';
 import { SidebarLayout } from './chunk-VGTEM5RZ.js';
 export { SidebarLayout } from './chunk-VGTEM5RZ.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-export { ImageAnnotator_default as ImageAnnotator } from './chunk-4J4V7FLN.js';
+export { ImageAnnotator_default as ImageAnnotator } from './chunk-O3BLL2WA.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-export { EditableGrid } from './chunk-ZDTM7HX6.js';
+export { EditableGrid } from './chunk-UNSKKZIK.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
-import { APP_VERSION } from './chunk-GLKDDFJL.js';
-export { VERSION } from './chunk-GLKDDFJL.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-6OWYD4O6.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-6OWYD4O6.js';
+import { APP_VERSION } from './chunk-H4NP7TMW.js';
+export { VERSION } from './chunk-H4NP7TMW.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-S22GZ4OQ.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-S22GZ4OQ.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-ZF6AYO4G.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-ZF6AYO4G.js';
-import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, lazy, forwardRef, useCallback, useState, useRef, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, Children, useId, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -568,6 +568,14 @@ function useClickOutside(ref, onClose) {
     return () => document.removeEventListener("mousedown", handler);
   }, [ref, onClose]);
 }
+
+// src/forms/styles.ts
+var INPUT_BASE = "block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
+var INPUT_INVALID = "border-red-300 focus:border-red-400 focus:ring-red-400/30";
+var INPUT_DISABLED = "disabled:cursor-not-allowed disabled:opacity-60";
+function inputClasses(opts) {
+  return [INPUT_BASE, opts?.invalid ? INPUT_INVALID : "", INPUT_DISABLED, opts?.className ?? ""].filter(Boolean).join(" ");
+}
 function useDropdownAlignment(triggerRef, open, maxWidth) {
   const [alignRight, setAlignRight] = useState(false);
   useLayoutEffect(() => {
@@ -594,7 +602,6 @@ function ClearButton({ onClear, ariaLabel = "Clear selection" }) {
     }
   );
 }
-var INPUT_BASE = "block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
 function SearchableSelect({
   value,
   onChange,
@@ -6153,6 +6160,1176 @@ function useSort(defaultField, defaultDir = "asc") {
   const ordering = sort.direction === "desc" ? `-${sort.field}` : sort.field;
   return { sort, onSort, ordering };
 }
+function buildPages(page, pageCount, sibling) {
+  const wanted = /* @__PURE__ */ new Set([1, pageCount]);
+  for (let i = page - sibling; i <= page + sibling; i++) {
+    if (i >= 1 && i <= pageCount) wanted.add(i);
+  }
+  const sorted = [...wanted].sort((a, b) => a - b);
+  const out = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (prev && p - prev > 1) out.push("\u2026");
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+var BTN = "inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40";
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  showEdges = false,
+  className = ""
+}) {
+  if (pageCount <= 1) return null;
+  const pages = buildPages(page, pageCount, siblingCount);
+  const go = (p) => {
+    if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
+  };
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: `flex items-center gap-1 ${className}`.trim(), children: [
+    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "First page", disabled: page === 1, onClick: () => go(1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xAB" }),
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous page", disabled: page === 1, onClick: () => go(page - 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u2039" }),
+    pages.map(
+      (p, i) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-gray-400", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-current": p === page ? "page" : void 0,
+          onClick: () => go(p),
+          className: `${BTN} ${p === page ? "bg-blue-600 font-medium text-white" : "text-gray-700 hover:bg-gray-100"}`,
+          children: p
+        },
+        p
+      )
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next page", disabled: page === pageCount, onClick: () => go(page + 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u203A" }),
+    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Last page", disabled: page === pageCount, onClick: () => go(pageCount), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xBB" })
+  ] });
+}
+var BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60";
+var VARIANTS = {
+  primary: "bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:ring-blue-400/40",
+  secondary: "border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-blue-400/30",
+  ghost: "text-gray-700 hover:bg-gray-100 focus:ring-blue-400/30",
+  danger: "bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-400/40"
+};
+var SIZES = {
+  sm: "gap-1 px-2.5 py-1 text-xs",
+  md: "gap-1.5 px-3 py-1.5 text-sm"
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+  ] });
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  leftIcon,
+  rightIcon,
+  block = false,
+  disabled,
+  type = "button",
+  children,
+  className = "",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: [BASE, VARIANTS[variant], SIZES[size], block ? "w-full" : "", className].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
+        children,
+        !loading && rightIcon
+      ]
+    }
+  );
+});
+var Button_default = Button;
+var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, className = "", ...rest }, ref) {
+  const pad = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
+  const field = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: inputClasses({ invalid, className: [pad, className].filter(Boolean).join(" ") }),
+      ...rest
+    }
+  );
+  if (!leftIcon && !rightAdornment) return field;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: leftIcon }),
+    field,
+    rightAdornment && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: rightAdornment })
+  ] });
+});
+var Input_default = Input;
+var Textarea = forwardRef(function Textarea2({ invalid, autoGrow, className = "", onInput, rows = 3, ...rest }, ref) {
+  const handleInput = useCallback((e) => {
+    if (autoGrow) {
+      const el = e.currentTarget;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }
+    onInput?.(e);
+  }, [autoGrow, onInput]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows,
+      onInput: handleInput,
+      className: inputClasses({ invalid, className: `${autoGrow ? "resize-none overflow-hidden" : ""} ${className}`.trim() }),
+      ...rest
+    }
+  );
+});
+var Textarea_default = Textarea;
+var Select = forwardRef(function Select2({ value, onChange, options, placeholder, invalid, className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      ref,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: inputClasses({ invalid, className: `pr-8 ${className}`.trim() }),
+      ...rest,
+      children: [
+        placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+        options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+      ]
+    }
+  );
+});
+var Select_default = Select;
+var BOX = "h-4 w-4 shrink-0 rounded border-gray-300 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400/30 disabled:cursor-not-allowed disabled:opacity-60";
+var Checkbox = forwardRef(function Checkbox2({ checked, onChange, label, description, disabled, className = "", ...rest }, ref) {
+  if (!label && !description) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        className: `${BOX} ${className}`.trim(),
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("label", { className: `flex items-start gap-2 ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        className: `${BOX} mt-0.5`,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-sm leading-tight", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-gray-500", children: description })
+    ] })
+  ] });
+});
+var Checkbox_default = Checkbox;
+var DOT = "h-4 w-4 shrink-0 border-gray-300 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400/30 disabled:cursor-not-allowed disabled:opacity-60";
+var Radio = forwardRef(function Radio2({ checked, onChange, label, description, disabled, className = "", ...rest }, ref) {
+  if (!label && !description) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "radio",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        className: `${DOT} ${className}`.trim(),
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("label", { className: `flex items-start gap-2 ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "radio",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        className: `${DOT} mt-0.5`,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-sm leading-tight", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-gray-500", children: description })
+    ] })
+  ] });
+});
+var Radio_default = Radio;
+function FormField({
+  label,
+  htmlFor,
+  hint,
+  error,
+  required,
+  className = "",
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor, className: "mb-1 block text-xs font-medium text-gray-600", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+    ] }),
+    children,
+    error ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
+  ] });
+}
+function Label({ required, children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: `mb-1 block text-xs font-medium text-gray-600 ${className}`.trim(), ...rest, children: [
+    children,
+    required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+  ] });
+}
+function Card({ children, header, footer, padded = true, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-gray-200 bg-white shadow-sm ${className}`.trim(), children: [
+    header && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-100 px-4 py-3 text-sm font-semibold text-gray-900", children: header }),
+    /* @__PURE__ */ jsx("div", { className: padded ? "p-4" : "", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-100 px-4 py-3", children: footer })
+  ] });
+}
+function StatCard({ label, value, icon, delta, className = "" }) {
+  const deltaColor = delta?.direction === "up" ? "text-green-600" : delta?.direction === "down" ? "text-red-600" : "text-gray-500";
+  const arrow = delta?.direction === "up" ? "\u25B2" : delta?.direction === "down" ? "\u25BC" : "\u2192";
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-gray-200 bg-white p-4 shadow-sm ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-500", children: label }),
+      icon && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: icon })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900", children: value }),
+      delta && /* @__PURE__ */ jsxs("span", { className: `text-xs font-medium ${deltaColor}`, children: [
+        arrow,
+        " ",
+        delta.value
+      ] })
+    ] })
+  ] });
+}
+var SIZE_PX = { xs: 24, sm: 32, md: 40, lg: 56 };
+var STATUS_COLOR = {
+  online: "bg-green-500",
+  offline: "bg-gray-400",
+  busy: "bg-red-500",
+  away: "bg-amber-500"
+};
+function initials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0][0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+  return (first + last).toUpperCase() || "?";
+}
+function Avatar({ src, name, size = "md", status, className = "" }) {
+  const px = SIZE_PX[size];
+  const dot = Math.max(8, Math.round(px * 0.28));
+  return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex shrink-0 ${className}`.trim(), style: { width: px, height: px }, children: [
+    src ? /* @__PURE__ */ jsx("img", { src, alt: name ?? "", className: "h-full w-full rounded-full object-cover" }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex h-full w-full items-center justify-center rounded-full bg-gray-100 font-medium text-gray-600",
+        style: { fontSize: Math.round(px * 0.4) },
+        children: initials(name)
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `absolute bottom-0 right-0 rounded-full ring-2 ring-white ${STATUS_COLOR[status]}`,
+        style: { width: dot, height: dot }
+      }
+    )
+  ] });
+}
+function AvatarGroup({ children, max, size = "md", className = "" }) {
+  const items = Children.toArray(children);
+  const shown = max ? items.slice(0, max) : items;
+  const overflow = max ? items.length - shown.length : 0;
+  const px = SIZE_PX[size];
+  const overlap = Math.round(px * 0.3);
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center ${className}`.trim(), children: [
+    shown.map((child, i) => /* @__PURE__ */ jsx("span", { className: "rounded-full ring-2 ring-white", style: { marginLeft: i === 0 ? 0 : -overlap }, children: child }, i)),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "flex items-center justify-center rounded-full bg-gray-200 font-medium text-gray-600 ring-2 ring-white",
+        style: { width: px, height: px, marginLeft: -overlap, fontSize: Math.round(px * 0.36) },
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+var TONE = {
+  info: { box: "bg-blue-50 border-blue-200", icon: "text-blue-600" },
+  success: { box: "bg-green-50 border-green-200", icon: "text-green-600" },
+  warning: { box: "bg-amber-50 border-amber-200", icon: "text-amber-600" },
+  danger: { box: "bg-red-50 border-red-200", icon: "text-red-600" }
+};
+function ToneIcon({ tone }) {
+  const common = { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": true };
+  switch (tone) {
+    case "success":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.7-9.3a1 1 0 00-1.4-1.4L9 10.6 7.7 9.3a1 1 0 00-1.4 1.4l2 2a1 1 0 001.4 0l4-4z", clipRule: "evenodd" }) });
+    case "warning":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.3 2.8a2 2 0 013.4 0l6 10A2 2 0 0116 16H4a2 2 0 01-1.7-3.2l6-10zM10 7a1 1 0 00-1 1v3a1 1 0 102 0V8a1 1 0 00-1-1zm0 7a1 1 0 100 2 1 1 0 000-2z", clipRule: "evenodd" }) });
+    case "danger":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.7 7.3a1 1 0 00-1.4 1.4L8.6 10l-1.3 1.3a1 1 0 101.4 1.4L10 11.4l1.3 1.3a1 1 0 001.4-1.4L11.4 10l1.3-1.3a1 1 0 10-1.4-1.4L10 8.6 8.7 7.3z", clipRule: "evenodd" }) });
+    default:
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z", clipRule: "evenodd" }) });
+  }
+}
+function Banner({ tone = "info", title, children, icon, onDismiss, className = "" }) {
+  const t = TONE[tone];
+  return /* @__PURE__ */ jsxs("div", { role: tone === "danger" ? "alert" : "status", className: `flex items-start gap-3 rounded-lg border px-4 py-3 ${t.box} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx("span", { className: `mt-0.5 shrink-0 ${t.icon}`, children: icon ?? /* @__PURE__ */ jsx(ToneIcon, { tone }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-sm", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-900", children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: `text-gray-700 ${title ? "mt-0.5" : ""}`.trim(), children })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: "shrink-0 text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) }) })
+  ] });
+}
+function Tabs({ items, value, onChange, variant = "underline", className = "" }) {
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsx("div", { role: "tablist", className: `inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1 ${className}`.trim(), children: items.map((t) => {
+      const active = t.id === value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": active,
+          tabIndex: active ? 0 : -1,
+          disabled: t.disabled,
+          onClick: () => onChange(t.id),
+          className: `inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "bg-blue-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+          children: [
+            t.icon,
+            t.label
+          ]
+        },
+        t.id
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: `flex items-center gap-1 border-b border-gray-200 ${className}`.trim(), children: items.map((t) => {
+    const active = t.id === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        tabIndex: active ? 0 : -1,
+        disabled: t.disabled,
+        onClick: () => onChange(t.id),
+        className: `-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "border-blue-600 text-blue-600" : "border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-900"}`,
+        children: [
+          t.icon,
+          t.label
+        ]
+      },
+      t.id
+    );
+  }) });
+}
+function Accordion({
+  items,
+  defaultOpenIds = [],
+  openIds,
+  onOpenChange,
+  allowMultiple = false,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultOpenIds);
+  const open = openIds ?? internal;
+  const toggle = (id) => {
+    const isOpen = open.includes(id);
+    const next = isOpen ? open.filter((x) => x !== id) : allowMultiple ? [...open, id] : [id];
+    if (openIds === void 0) setInternal(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsx("div", { className: `divide-y divide-gray-100 overflow-hidden rounded-lg border border-gray-200 ${className}`.trim(), children: items.map((item) => {
+    const isOpen = open.includes(item.id);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: item.disabled,
+          "aria-expanded": isOpen,
+          onClick: () => toggle(item.id),
+          className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-gray-900 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.title }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: `h-4 w-4 shrink-0 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`,
+                viewBox: "0 0 20 20",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4", strokeLinecap: "round", strokeLinejoin: "round" })
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3 text-sm text-gray-600", children: item.content })
+    ] }, item.id);
+  }) });
+}
+var SIDE_POS = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+};
+function Tooltip({ content, side = "top", delay = 200, children }) {
+  const [show, setShow] = useState(false);
+  const timer = useRef(void 0);
+  const id = useId();
+  const open = () => {
+    timer.current = window.setTimeout(() => setShow(true), delay);
+  };
+  const close = () => {
+    window.clearTimeout(timer.current);
+    setShow(false);
+  };
+  useEffect(() => () => window.clearTimeout(timer.current), []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative inline-flex",
+      "aria-describedby": show ? id : void 0,
+      onMouseEnter: open,
+      onMouseLeave: close,
+      onFocus: open,
+      onBlur: close,
+      children: [
+        children,
+        show && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            className: `pointer-events-none absolute z-[300] whitespace-nowrap rounded-md px-2 py-1 text-xs text-gray-800 ${SIDE_POS[side]}`,
+            style: glassStyle(),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+function Sparkline({
+  data,
+  width = 120,
+  height = 32,
+  stroke = "currentColor",
+  fill,
+  strokeWidth = 1.5,
+  showDots = false,
+  className,
+  style
+}) {
+  if (data.length === 0) return null;
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const span = max - min || 1;
+  const pad = strokeWidth + (showDots ? 2 : 0);
+  const y = (v) => height - pad - (v - min) / span * (height - pad * 2);
+  const pts = data.length === 1 ? [[0, height / 2], [width, height / 2]] : data.map((v, i) => [i * width / (data.length - 1), y(v)]);
+  const line = pts.map(([x, yy], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${yy.toFixed(2)}`).join(" ");
+  const area = `${line} L${width.toFixed(2)},${height} L0,${height} Z`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      style,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      role: "img",
+      "aria-hidden": "true",
+      children: [
+        fill && /* @__PURE__ */ jsx("path", { d: area, fill, stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke, strokeWidth, strokeLinejoin: "round", strokeLinecap: "round" }),
+        showDots && pts.map(([x, yy], i) => /* @__PURE__ */ jsx("circle", { cx: x, cy: yy, r: strokeWidth + 0.5, fill: stroke }, i))
+      ]
+    }
+  );
+}
+function BarChart({
+  data,
+  labels,
+  height = 120,
+  color = "currentColor",
+  colors,
+  max,
+  gap = 6,
+  className,
+  style
+}) {
+  if (data.length === 0) return null;
+  const peak = max ?? (Math.max(...data, 0) || 1);
+  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-end", style: { height, gap }, children: data.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col justify-end", style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full rounded-t",
+        style: {
+          height: `${Math.max(0, v / peak * 100)}%`,
+          minHeight: v > 0 ? 2 : 0,
+          backgroundColor: colors?.[i] ?? color
+        },
+        title: labels?.[i] != null ? `${labels[i]}: ${v}` : String(v)
+      }
+    ) }, i)) }),
+    labels && /* @__PURE__ */ jsx("div", { className: "mt-1 flex", style: { gap }, children: labels.map((l, i) => /* @__PURE__ */ jsx("div", { className: "flex-1 truncate text-center text-[10px] text-gray-400", children: l }, i)) })
+  ] });
+}
+var PALETTE = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#6366f1", "#14b8a6", "#a855f7", "#64748b"];
+function DonutChart({ segments, size = 120, thickness = 16, centerLabel, className, style }) {
+  const total = segments.reduce((s, x) => s + Math.max(0, x.value), 0) || 1;
+  const r = (size - thickness) / 2;
+  const c = size / 2;
+  const circ = 2 * Math.PI * r;
+  let offset = 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative inline-flex items-center justify-center ${className ?? ""}`.trim(),
+      style: { width: size, height: size, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-hidden": "true", style: { transform: "rotate(-90deg)" }, children: [
+          /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "rgba(148,163,184,0.25)", strokeWidth: thickness }),
+          segments.map((s, i) => {
+            const len = Math.max(0, s.value) / total * circ;
+            const el = /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: c,
+                cy: c,
+                r,
+                fill: "none",
+                stroke: s.color ?? PALETTE[i % PALETTE.length],
+                strokeWidth: thickness,
+                strokeDasharray: `${len} ${circ - len}`,
+                strokeDashoffset: -offset
+              },
+              i
+            );
+            offset += len;
+            return el;
+          })
+        ] }),
+        centerLabel != null && /* @__PURE__ */ jsx("div", { className: "absolute text-center text-sm font-semibold text-gray-900", children: centerLabel })
+      ]
+    }
+  );
+}
+var STATUS_GROUPS = {
+  paid: "success",
+  shipped: "active",
+  processing: "queued",
+  refunded: "neutral",
+  overdue: "danger"
+};
+var REVENUE = [12, 18, 14, 22, 19, 27, 24, 31, 28, 35, 30, 38];
+var MONTHS = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
+var ORDERS = [
+  { id: "#3201", customer: "Alice Nguyen", total: "$1,204", status: "paid" },
+  { id: "#3202", customer: "Marco Reyes", total: "$642", status: "shipped" },
+  { id: "#3203", customer: "Priya Patel", total: "$2,980", status: "processing" },
+  { id: "#3204", customer: "Tom Becker", total: "$318", status: "overdue" },
+  { id: "#3205", customer: "Sara Lind", total: "$540", status: "refunded" }
+];
+function DashboardTemplate() {
+  return /* @__PURE__ */ jsx(StatusBadgeProvider, { groups: STATUS_GROUPS, children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Dashboard" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Overview of your store this month" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", children: "Export" }),
+        /* @__PURE__ */ jsx(Button_default, { size: "sm", children: "New report" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(StatCard, { label: "Revenue", value: "$38.2k", delta: { value: "12%", direction: "up" } }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Orders", value: "1,204", delta: { value: "4%", direction: "up" } }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Customers", value: "892", delta: { value: "2%", direction: "down" } }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Refunds", value: "$1.1k", delta: { value: "0%", direction: "flat" } })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(Card, { header: "Revenue", className: "lg:col-span-2", children: /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: /* @__PURE__ */ jsx(BarChart, { data: REVENUE, labels: MONTHS, height: 160 }) }) }),
+      /* @__PURE__ */ jsx(Card, { header: "Traffic sources", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          DonutChart,
+          {
+            size: 120,
+            segments: [
+              { label: "Direct", value: 45 },
+              { label: "Search", value: 30 },
+              { label: "Social", value: 15 },
+              { label: "Email", value: 10 }
+            ],
+            centerLabel: /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: "100%" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5 text-sm text-gray-600", children: [
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Dot, { c: "#3b82f6" }),
+            "Direct \xB7 45%"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Dot, { c: "#22c55e" }),
+            "Search \xB7 30%"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Dot, { c: "#f59e0b" }),
+            "Social \xB7 15%"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Dot, { c: "#ef4444" }),
+            "Email \xB7 10%"
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { header: "Recent orders", padded: false, children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-100 text-left text-xs uppercase tracking-wide text-gray-400", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Order" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Customer" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Total" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: ORDERS.map((o) => /* @__PURE__ */ jsxs("tr", { className: "text-gray-700", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-2 font-mono text-xs text-gray-500", children: o.id }),
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "xs", name: o.customer }),
+          o.customer
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: o.total }),
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx(StatusBadge, { status: o.status }) })
+      ] }, o.id)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs text-gray-400", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-emerald-600", children: /* @__PURE__ */ jsx(Sparkline, { data: REVENUE, width: 80, height: 20 }) }),
+      "Trending up 12% vs last month"
+    ] })
+  ] }) }) });
+}
+function Dot({ c }) {
+  return /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { backgroundColor: c } });
+}
+var GROUPS = {
+  active: "success",
+  invited: "queued",
+  suspended: "danger",
+  pending: "pending"
+};
+var ROWS = [
+  { name: "Alice Nguyen", email: "alice@acme.co", role: "Admin", status: "active" },
+  { name: "Marco Reyes", email: "marco@acme.co", role: "Editor", status: "invited" },
+  { name: "Priya Patel", email: "priya@acme.co", role: "Editor", status: "active" },
+  { name: "Tom Becker", email: "tom@acme.co", role: "Viewer", status: "suspended" },
+  { name: "Sara Lind", email: "sara@acme.co", role: "Viewer", status: "pending" },
+  { name: "Yuki Tanaka", email: "yuki@acme.co", role: "Editor", status: "active" }
+];
+function DataTablePage() {
+  const [page, setPage] = useState(1);
+  const [role, setRole] = useState("");
+  const [query, setQuery] = useState("");
+  return /* @__PURE__ */ jsx(StatusBadgeProvider, { groups: GROUPS, children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Members" }),
+      /* @__PURE__ */ jsx(Button_default, { size: "sm", children: "Invite member" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { padded: false, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-gray-100 p-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-48 flex-1", children: /* @__PURE__ */ jsx(Input_default, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search members\u2026", leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}) }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsx(
+          Select_default,
+          {
+            value: role,
+            onChange: setRole,
+            placeholder: "All roles",
+            options: [
+              { value: "admin", label: "Admin" },
+              { value: "editor", label: "Editor" },
+              { value: "viewer", label: "Viewer" }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", children: "Filter" })
+      ] }),
+      /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-100 text-left text-xs uppercase tracking-wide text-gray-400", children: [
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Name" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Role" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium", children: "Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-2 font-medium text-right", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: ROWS.map((r) => /* @__PURE__ */ jsxs("tr", { className: "text-gray-700 hover:bg-gray-50", children: [
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-2.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: r.name }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400", children: r.email })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5", children: r.role }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", children: "Edit" }) })
+        ] }, r.email)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-gray-100 p-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Showing 1\u20136 of 48" }),
+        /* @__PURE__ */ jsx(Pagination, { page, pageCount: 8, onPageChange: setPage, showEdges: true })
+      ] })
+    ] })
+  ] }) }) });
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "6" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 14l3 3", strokeLinecap: "round" })
+  ] });
+}
+function FormLayoutPage() {
+  const [plan, setPlan] = useState("pro");
+  const [newsletter, setNewsletter] = useState(true);
+  const [country, setCountry] = useState("us");
+  return /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("form", { className: "mx-auto max-w-2xl space-y-5", onSubmit: (e) => e.preventDefault(), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Account settings" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Update your profile and preferences." })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { header: "Profile", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "First name", htmlFor: "fn", required: true, children: /* @__PURE__ */ jsx(Input_default, { id: "fn", defaultValue: "Alice" }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Last name", htmlFor: "ln", required: true, children: /* @__PURE__ */ jsx(Input_default, { id: "ln", defaultValue: "Nguyen" }) })
+      ] }),
+      /* @__PURE__ */ jsx(FormField, { label: "Email", htmlFor: "email", hint: "We'll never share your email.", children: /* @__PURE__ */ jsx(Input_default, { id: "email", type: "email", defaultValue: "alice@acme.co" }) }),
+      /* @__PURE__ */ jsx(FormField, { label: "Bio", htmlFor: "bio", hint: "Brief description for your profile.", children: /* @__PURE__ */ jsx(Textarea_default, { id: "bio", autoGrow: true, defaultValue: "Product designer at Acme." }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { header: "Preferences", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Country", htmlFor: "country", children: /* @__PURE__ */ jsx(
+          Select_default,
+          {
+            value: country,
+            onChange: setCountry,
+            options: [
+              { value: "us", label: "United States" },
+              { value: "de", label: "Germany" },
+              { value: "jp", label: "Japan" }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Plan", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-1", children: [
+          /* @__PURE__ */ jsx(Radio_default, { name: "plan", checked: plan === "free", onChange: () => setPlan("free"), label: "Free" }),
+          /* @__PURE__ */ jsx(Radio_default, { name: "plan", checked: plan === "pro", onChange: () => setPlan("pro"), label: "Pro" }),
+          /* @__PURE__ */ jsx(Radio_default, { name: "plan", checked: plan === "team", onChange: () => setPlan("team"), label: "Team" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(Checkbox_default, { checked: newsletter, onChange: setNewsletter, label: "Email me product updates", description: "Occasional news \u2014 no more than once a month." })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button_default, { variant: "secondary", children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button_default, { type: "submit", children: "Save changes" })
+    ] })
+  ] }) });
+}
+var ITEMS = [
+  { name: "Mechanical keyboard", qty: 1, price: 129 },
+  { name: "USB-C cable (2m)", qty: 2, price: 12 },
+  { name: "Laptop stand", qty: 1, price: 48 }
+];
+function CheckoutTemplate() {
+  const [sameAddress, setSameAddress] = useState(true);
+  const [country, setCountry] = useState("us");
+  const subtotal = ITEMS.reduce((s, i) => s + i.qty * i.price, 0);
+  const shipping = 9;
+  const total = subtotal + shipping;
+  return /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-5", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Checkout" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("form", { className: "space-y-5 lg:col-span-2", onSubmit: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ jsx(Card, { header: "Contact", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(FormField, { label: "Email", htmlFor: "ck-email", required: true, children: /* @__PURE__ */ jsx(Input_default, { id: "ck-email", type: "email", placeholder: "you@example.com" }) }) }) }),
+        /* @__PURE__ */ jsx(Card, { header: "Shipping address", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(FormField, { label: "First name", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "Alice" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Last name", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "Nguyen" }) })
+          ] }),
+          /* @__PURE__ */ jsx(FormField, { label: "Address", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "123 Market St" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+            /* @__PURE__ */ jsx(FormField, { label: "City", children: /* @__PURE__ */ jsx(Input_default, { placeholder: "San Francisco" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "ZIP", children: /* @__PURE__ */ jsx(Input_default, { placeholder: "94103" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Country", children: /* @__PURE__ */ jsx(
+              Select_default,
+              {
+                value: country,
+                onChange: setCountry,
+                options: [
+                  { value: "us", label: "United States" },
+                  { value: "de", label: "Germany" },
+                  { value: "jp", label: "Japan" }
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Checkbox_default, { checked: sameAddress, onChange: setSameAddress, label: "Billing address same as shipping" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Card, { header: "Payment", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Card number", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "1234 5678 9012 3456" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(FormField, { label: "Expiry", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "MM / YY" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "CVC", required: true, children: /* @__PURE__ */ jsx(Input_default, { placeholder: "123" }) })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs(Card, { header: "Order summary", children: [
+          /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm", children: ITEMS.map((i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2 text-gray-700", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              i.name,
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+                "\xD7",
+                i.qty
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "$",
+              i.qty * i.price
+            ] })
+          ] }, i.name)) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1.5 border-t border-gray-100 pt-3 text-sm text-gray-600", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Subtotal" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "$",
+                subtotal
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Shipping" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "$",
+                shipping
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-base font-semibold text-gray-900", children: [
+              /* @__PURE__ */ jsx("span", { children: "Total" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "$",
+                total
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Button_default, { block: true, className: "mt-4", children: [
+            "Pay $",
+            total
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Banner, { tone: "success", title: "Promo applied", children: "Free returns within 30 days." })
+      ] })
+    ] })
+  ] }) });
+}
+var FOLDERS = [
+  { id: "inbox", label: "Inbox", count: 12 },
+  { id: "starred", label: "Starred", count: 3 },
+  { id: "sent", label: "Sent" },
+  { id: "drafts", label: "Drafts", count: 1 },
+  { id: "archive", label: "Archive" },
+  { id: "trash", label: "Trash" }
+];
+var MESSAGES = [
+  { id: 1, from: "Marco Reyes", subject: "Q3 roadmap review", preview: "Sharing the deck ahead of Thursday \u2014 let me know\u2026", time: "9:14", unread: true },
+  { id: 2, from: "Priya Patel", subject: "Design handoff", preview: "The Figma file is ready for engineering. I exported\u2026", time: "8:02", unread: true },
+  { id: 3, from: "GitHub", subject: "[acme/web] PR #482 merged", preview: "Your pull request was merged into main by\u2026", time: "Yest" },
+  { id: 4, from: "Sara Lind", subject: "Lunch Friday?", preview: "A few of us are heading to the new place on 5th\u2026", time: "Yest" }
+];
+function EmailTemplate() {
+  const [active, setActive] = useState(1);
+  const selected = MESSAGES.find((m) => m.id === active) ?? MESSAGES[0];
+  return /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsx(
+    SidebarLayout,
+    {
+      side: "left",
+      defaultWidth: 200,
+      sidebar: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-2", children: [
+        /* @__PURE__ */ jsx(Button_default, { block: true, className: "mb-2", children: "Compose" }),
+        FOLDERS.map((f, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `flex items-center justify-between rounded-md px-3 py-2 text-left text-sm ${i === 0 ? "bg-blue-50 font-medium text-blue-700" : "text-gray-700 hover:bg-gray-100"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: f.label }),
+              f.count != null && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: f.count })
+            ]
+          },
+          f.id
+        ))
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-72 shrink-0 overflow-auto border-r border-gray-200", children: MESSAGES.map((m) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActive(m.id),
+            className: `block w-full border-b border-gray-100 px-4 py-3 text-left hover:bg-gray-50 ${m.id === active ? "bg-blue-50/50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: `truncate text-sm ${m.unread ? "font-semibold text-gray-900" : "text-gray-700"}`, children: m.from }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-gray-400", children: m.time })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: `truncate text-sm ${m.unread ? "text-gray-800" : "text-gray-600"}`, children: m.subject }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-gray-400", children: m.preview })
+            ]
+          },
+          m.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 p-4", children: [
+            /* @__PURE__ */ jsx("h2", { className: "truncate text-base font-semibold text-gray-900", children: selected.subject }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 gap-1.5", children: [
+              /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", children: "Archive" }),
+              /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", children: "Reply" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 p-4", children: [
+            /* @__PURE__ */ jsx(Avatar, { name: selected.from }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900", children: selected.from }),
+              /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-400", children: [
+                "to me \xB7 ",
+                selected.time
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4 text-sm leading-relaxed text-gray-700", children: [
+            /* @__PURE__ */ jsx("p", { children: "Hi," }),
+            /* @__PURE__ */ jsxs("p", { children: [
+              selected.preview,
+              " The full details are attached \u2014 happy to walk through anything on a quick call."
+            ] }),
+            /* @__PURE__ */ jsxs("p", { children: [
+              "Best,",
+              /* @__PURE__ */ jsx("br", {}),
+              selected.from
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}
+var CONVOS = [
+  { id: 1, name: "Priya Patel", last: "Sounds good \u2014 shipping it now", time: "9:41", status: "online" },
+  { id: 2, name: "Design team", last: "Marco: updated the tokens", time: "9:12", status: "away" },
+  { id: 3, name: "Tom Becker", last: "Thanks!", time: "Yest", status: "offline" },
+  { id: 4, name: "Sara Lind", last: "See you Friday \u{1F389}", time: "Yest", status: "busy" }
+];
+var THREAD = [
+  { mine: false, text: "Hey! Did the latest build go out?" },
+  { mine: true, text: "Just merged \u2014 deploying now." },
+  { mine: false, text: "Nice. Any breaking changes for the portal?" },
+  { mine: true, text: "Nope, fully additive. New components only." },
+  { mine: false, text: "Sounds good \u2014 shipping it now" }
+];
+function ChatTemplate() {
+  const [active, setActive] = useState(1);
+  const convo = CONVOS.find((c) => c.id === active) ?? CONVOS[0];
+  return /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsx(
+    SidebarLayout,
+    {
+      side: "left",
+      defaultWidth: 260,
+      sidebar: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: CONVOS.map((c) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setActive(c.id),
+          className: `flex w-full items-center gap-3 border-b border-gray-100 px-3 py-3 text-left hover:bg-gray-50 ${c.id === active ? "bg-blue-50/50" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { name: c.name, status: c.status }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900", children: c.name }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-gray-400", children: c.time })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-gray-500", children: c.last })
+            ] })
+          ]
+        },
+        c.id
+      )) }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-gray-200 p-3", children: [
+          /* @__PURE__ */ jsx(Avatar, { name: convo.name, status: convo.status, size: "sm" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900", children: convo.name }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400 capitalize", children: convo.status })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2 overflow-auto bg-gray-50 p-4", children: THREAD.map((m, i) => /* @__PURE__ */ jsx("div", { className: `flex ${m.mine ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { maxWidth: "75%" },
+            className: `rounded-2xl px-3 py-2 text-sm ${m.mine ? "bg-blue-600 text-white" : "bg-white text-gray-800 shadow-sm"}`,
+            children: m.text
+          }
+        ) }, i)) }),
+        /* @__PURE__ */ jsxs("form", { className: "flex items-center gap-2 border-t border-gray-200 p-3", onSubmit: (e) => e.preventDefault(), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input_default, { placeholder: "Type a message\u2026" }) }),
+          /* @__PURE__ */ jsx(Button_default, { type: "submit", children: "Send" })
+        ] })
+      ] })
+    }
+  ) });
+}
+var GROUPS2 = { featured: "success", new: "active", draft: "draft" };
+var GRADIENTS = [
+  "linear-gradient(135deg,#60a5fa,#a78bfa)",
+  "linear-gradient(135deg,#34d399,#10b981)",
+  "linear-gradient(135deg,#fbbf24,#f59e0b)",
+  "linear-gradient(135deg,#f472b6,#ec4899)",
+  "linear-gradient(135deg,#38bdf8,#6366f1)",
+  "linear-gradient(135deg,#fb7185,#ef4444)",
+  "linear-gradient(135deg,#4ade80,#22c55e)",
+  "linear-gradient(135deg,#c084fc,#8b5cf6)"
+];
+var ITEMS2 = GRADIENTS.map((g, i) => ({
+  id: i,
+  title: ["Sunrise", "Forest", "Desert", "Bloom", "Ocean", "Ember", "Meadow", "Dusk"][i],
+  tag: ["featured", "new", "draft"][i % 3],
+  bg: g
+}));
+function GalleryTemplate() {
+  const [filter, setFilter] = useState("all");
+  const shown = filter === "all" ? ITEMS2 : ITEMS2.filter((i) => i.tag === filter);
+  return /* @__PURE__ */ jsx(StatusBadgeProvider, { groups: GROUPS2, children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Gallery" }),
+      /* @__PURE__ */ jsx(Button_default, { size: "sm", children: "Upload" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: filter,
+        onChange: setFilter,
+        variant: "pill",
+        items: [
+          { id: "all", label: "All" },
+          { id: "featured", label: "Featured" },
+          { id: "new", label: "New" },
+          { id: "draft", label: "Drafts" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: shown.map((item) => /* @__PURE__ */ jsxs(Card, { padded: false, className: "overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative h-28", style: { background: item.bg }, children: /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(StatusBadge, { status: item.tag }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 p-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900", children: item.title }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "2.4 MB" })
+      ] })
+    ] }, item.id)) })
+  ] }) }) });
+}
+var COPY = {
+  login: { title: "Welcome back", subtitle: "Sign in to your account", cta: "Sign in" },
+  register: { title: "Create your account", subtitle: "Start your 14-day free trial", cta: "Create account" },
+  forgot: { title: "Reset password", subtitle: "We'll email you a reset link", cta: "Send reset link" }
+};
+function AuthScreen({ mode = "login" }) {
+  const [remember, setRemember] = useState(true);
+  const c = COPY[mode];
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center overflow-auto bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-sm font-bold text-white", children: "A" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900", children: c.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: c.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit: (e) => e.preventDefault(), children: [
+      mode === "register" && /* @__PURE__ */ jsx(FormField, { label: "Name", htmlFor: "au-name", children: /* @__PURE__ */ jsx(Input_default, { id: "au-name", placeholder: "Alice Nguyen" }) }),
+      /* @__PURE__ */ jsx(FormField, { label: "Email", htmlFor: "au-email", children: /* @__PURE__ */ jsx(Input_default, { id: "au-email", type: "email", placeholder: "you@example.com" }) }),
+      mode !== "forgot" && /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Password",
+          htmlFor: "au-pass",
+          hint: mode === "register" ? "At least 8 characters." : void 0,
+          children: /* @__PURE__ */ jsx(Input_default, { id: "au-pass", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })
+        }
+      ),
+      mode === "login" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(Checkbox_default, { checked: remember, onChange: setRemember, label: "Remember me" }),
+        /* @__PURE__ */ jsx("a", { href: "#", className: "text-sm text-blue-600 hover:underline", children: "Forgot?" })
+      ] }),
+      /* @__PURE__ */ jsx(Button_default, { type: "submit", block: true, children: c.cta })
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-4 text-center text-sm text-gray-500", children: mode === "register" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Already have an account? ",
+      /* @__PURE__ */ jsx("a", { href: "#", className: "text-blue-600 hover:underline", children: "Sign in" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "New here? ",
+      /* @__PURE__ */ jsx("a", { href: "#", className: "text-blue-600 hover:underline", children: "Create an account" })
+    ] }) })
+  ] }) });
+}
+var COPY2 = {
+  403: { title: "Access denied", body: "You don't have permission to view this page." },
+  404: { title: "Page not found", body: "The page you're looking for doesn't exist or was moved." },
+  500: { title: "Something went wrong", body: "An unexpected error occurred. Please try again." }
+};
+function ErrorPage({ code = 404 }) {
+  const c = COPY2[code];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center bg-gray-50 p-6 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-7xl font-bold tracking-tight text-gray-400", children: code }),
+    /* @__PURE__ */ jsx("h1", { className: "mt-2 text-xl font-semibold text-gray-900", children: c.title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-gray-500", children: c.body }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button_default, { variant: "secondary", children: "Go back" }),
+      /* @__PURE__ */ jsx(Button_default, { children: "Take me home" })
+    ] })
+  ] });
+}
 var EntityFetcherContext = createContext(null);
 function ShellEntityFetcherProvider({
   value,
@@ -6199,6 +7376,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, SearchableSelect, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, formatDate, isDevEnv, isMac, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EntityList, ErrorPage, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, MOD, Markdown, NotificationBell, Pagination, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, formatDate, inputClasses, isDevEnv, isMac, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map