@zovaris/sephiro 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,11 +1,60 @@
-// src/atoms/Badge/index.tsx
+// src/atoms/Avatar/index.tsx
 import { cn } from "cn";
+import { useState } from "react";
 
 // src/lib/node.ts
 var node = (value) => value;
 
+// src/atoms/Avatar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function initialsOf(name) {
+  if (!name) return "?";
+  const words = name.trim().split(/\s+/).slice(0, 2);
+  return words.map((word) => word[0]?.toUpperCase() ?? "").join("") || "?";
+}
+function Avatar({
+  src,
+  name,
+  size = "md",
+  status,
+  className,
+  ...props
+}) {
+  const [failed, setFailed] = useState(false);
+  const showImage = Boolean(src) && !failed;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...node(props),
+      className: cn("sph-avatar", className),
+      "data-size": size,
+      title: name,
+      children: [
+        showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "sph-avatar__image",
+            src,
+            alt: name ?? "",
+            onError: () => setFailed(true)
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "sph-avatar__initials", "aria-hidden": "true", children: initialsOf(name) }),
+        status !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "sph-avatar__status",
+            "data-status": status,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/atoms/Badge/index.tsx
-import { jsx } from "react/jsx-runtime";
+import { cn as cn2 } from "cn";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Badge({
   variant = "neutral",
   size = "sm",
@@ -13,11 +62,11 @@ function Badge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       ...node(props),
-      className: cn("sph-badge", className),
+      className: cn2("sph-badge", className),
       "data-variant": variant,
       "data-size": size,
       children: node(children)
@@ -26,22 +75,22 @@ function Badge({
 }
 
 // src/atoms/Button/index.tsx
-import { cn as cn3 } from "cn";
+import { cn as cn4 } from "cn";
 
 // src/atoms/Spinner/index.tsx
-import { cn as cn2 } from "cn";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { cn as cn3 } from "cn";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Spinner({
   size = "md",
   label,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ...node(props),
-      className: cn2("sph-spinner", `sph-spinner--${size}`, className),
+      className: cn3("sph-spinner", `sph-spinner--${size}`, className),
       role: label ? "status" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true
@@ -50,7 +99,7 @@ function Spinner({
 }
 
 // src/atoms/Button/index.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Button({
   variant = "secondary",
   size = "md",
@@ -62,11 +111,11 @@ function Button({
   "aria-busy": ariaBusy,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       type,
-      className: cn3("sph-button", className),
+      className: cn4("sph-button", className),
       "data-variant": variant,
       "data-size": size,
       "data-loading": loading || void 0,
@@ -74,8 +123,8 @@ function Button({
       ...node(props),
       "aria-busy": ariaBusy ?? (loading || void 0),
       children: [
-        loading && /* @__PURE__ */ jsx3(Spinner, { size: "sm" }),
-        /* @__PURE__ */ jsx3("span", { className: "sph-button__label", children: node(children) })
+        loading && /* @__PURE__ */ jsx4(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx4("span", { className: "sph-button__label", children: node(children) })
       ]
     }
   );
@@ -83,8 +132,8 @@ function Button({
 
 // src/atoms/Checkbox/index.tsx
 import { CheckIcon } from "@phosphor-icons/react";
-import { cn as cn4 } from "cn";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { cn as cn5 } from "cn";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Checkbox({
   label,
   size = "md",
@@ -92,7 +141,7 @@ function Checkbox({
   className,
   ...props
 }) {
-  const control = /* @__PURE__ */ jsx4(
+  const control = /* @__PURE__ */ jsx5(
     "input",
     {
       ...node(props),
@@ -103,16 +152,16 @@ function Checkbox({
     }
   );
   if (label === void 0) return control;
-  return /* @__PURE__ */ jsxs2("label", { className: cn4("sph-checkbox", className), "data-size": size, children: [
+  return /* @__PURE__ */ jsxs3("label", { className: cn5("sph-checkbox", className), "data-size": size, children: [
     control,
-    /* @__PURE__ */ jsx4("span", { className: "sph-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(CheckIcon, { className: "sph-checkbox__check" }) }),
-    /* @__PURE__ */ jsx4("span", { className: "sph-checkbox__label", children: node(label) })
+    /* @__PURE__ */ jsx5("span", { className: "sph-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(CheckIcon, { className: "sph-checkbox__check" }) }),
+    /* @__PURE__ */ jsx5("span", { className: "sph-checkbox__label", children: node(label) })
   ] });
 }
 
 // src/atoms/IconButton/index.tsx
-import { cn as cn5 } from "cn";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { cn as cn6 } from "cn";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function IconButton({
   icon,
   label,
@@ -124,26 +173,26 @@ function IconButton({
   type = "button",
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       ...node(props),
       type,
-      className: cn5("sph-icon-button", className),
+      className: cn6("sph-icon-button", className),
       "data-size": size,
       "data-variant": variant,
       "data-loading": loading || void 0,
       "aria-label": label,
       "aria-busy": loading ? true : props["aria-busy"],
       disabled: disabled || loading,
-      children: loading ? /* @__PURE__ */ jsx5(Spinner, { size: size === "lg" ? "md" : "sm" }) : node(icon)
+      children: loading ? /* @__PURE__ */ jsx6(Spinner, { size: size === "lg" ? "md" : "sm" }) : node(icon)
     }
   );
 }
 
 // src/atoms/Input/index.tsx
-import { cn as cn6 } from "cn";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { cn as cn7 } from "cn";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Input({
   invalid = false,
   size = "md",
@@ -151,31 +200,95 @@ function Input({
   "aria-invalid": ariaInvalid,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "input",
     {
       ...node(props),
-      className: cn6("sph-input", className),
+      className: cn7("sph-input", className),
       "data-size": size,
       "aria-invalid": ariaInvalid ?? (invalid || void 0)
     }
   );
 }
 
+// src/atoms/Kbd/index.tsx
+import { cn as cn8 } from "cn";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Kbd({ keys, className }) {
+  const caps = Array.isArray(keys) ? keys : [keys];
+  return /* @__PURE__ */ jsx8("kbd", { className: cn8("sph-kbd", className), children: caps.map((cap, index) => /* @__PURE__ */ jsx8("kbd", { className: "sph-kbd__key", children: node(cap) }, index)) });
+}
+
+// src/atoms/Progress/index.tsx
+import { cn as cn9 } from "cn";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Progress({
+  value,
+  label,
+  size = "md",
+  className,
+  ...props
+}) {
+  const determinate = typeof value === "number" && Number.isFinite(value);
+  const clamped = determinate ? Math.min(Math.max(value, 0), 100) : void 0;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ...node(props),
+      className: cn9("sph-progress", className),
+      "data-size": size,
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": determinate ? 0 : void 0,
+      "aria-valuemax": determinate ? 100 : void 0,
+      "aria-valuenow": clamped,
+      "aria-valuetext": clamped !== void 0 ? `${Math.round(clamped)}%` : void 0,
+      children: /* @__PURE__ */ jsx9("span", { className: "sph-progress__track", children: /* @__PURE__ */ jsx9(
+        "span",
+        {
+          className: "sph-progress__bar",
+          "data-indeterminate": determinate ? void 0 : "true",
+          style: determinate ? { width: `${clamped}%` } : void 0
+        }
+      ) })
+    }
+  );
+}
+
+// src/atoms/ScrollArea/index.tsx
+import { cn as cn10 } from "cn";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ScrollArea({
+  orientation = "vertical",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ...node(props),
+      className: cn10("sph-scroll-area", className),
+      "data-orientation": orientation,
+      children: node(children)
+    }
+  );
+}
+
 // src/atoms/Separator/index.tsx
-import { cn as cn7 } from "cn";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { cn as cn11 } from "cn";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Separator({
   orientation = "horizontal",
   decorative = true,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "hr",
     {
       ...node(props),
-      className: cn7("sph-separator", className),
+      className: cn11("sph-separator", className),
       "data-orientation": orientation,
       role: decorative ? "presentation" : "separator",
       "aria-orientation": decorative ? void 0 : orientation
@@ -184,8 +297,8 @@ function Separator({
 }
 
 // src/atoms/Skeleton/index.tsx
-import { cn as cn8 } from "cn";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { cn as cn12 } from "cn";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Skeleton({
   width,
   height,
@@ -194,11 +307,11 @@ function Skeleton({
   "aria-label": ariaLabel,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
       ...node(props),
-      className: cn8("sph-skeleton", className),
+      className: cn12("sph-skeleton", className),
       style: { ...style, width, height },
       "aria-hidden": ariaLabel ? void 0 : true
     }
@@ -206,9 +319,9 @@ function Skeleton({
 }
 
 // src/atoms/Slider/index.tsx
-import { cn as cn9 } from "cn";
+import { cn as cn13 } from "cn";
 import { useId } from "react";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 function Slider({
   value,
   onValueChange,
@@ -236,17 +349,17 @@ function Slider({
     ...style,
     "--sph-slider-progress": `${progress}%`
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: cn9("sph-slider", className),
+      className: cn13("sph-slider", className),
       "data-size": size,
       "data-disabled": disabled || void 0,
       "data-invalid": invalid || void 0,
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "sph-slider__head", children: [
-          /* @__PURE__ */ jsx9("label", { className: "sph-slider__label", htmlFor: inputId, children: node(label) }),
-          valueLabel !== void 0 && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs4("div", { className: "sph-slider__head", children: [
+          /* @__PURE__ */ jsx13("label", { className: "sph-slider__label", htmlFor: inputId, children: node(label) }),
+          valueLabel !== void 0 && /* @__PURE__ */ jsx13(
             "output",
             {
               className: "sph-slider__value",
@@ -256,7 +369,7 @@ function Slider({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             ...node(props),
@@ -281,8 +394,8 @@ function Slider({
 }
 
 // src/atoms/Surface/index.tsx
-import { cn as cn10 } from "cn";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { cn as cn14 } from "cn";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Surface({
   tone = "base",
   padding = "md",
@@ -290,11 +403,11 @@ function Surface({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ...node(props),
-      className: cn10("sph-surface", className),
+      className: cn14("sph-surface", className),
       "data-tone": tone,
       "data-padding": padding,
       children: node(children)
@@ -303,8 +416,8 @@ function Surface({
 }
 
 // src/atoms/Textarea/index.tsx
-import { cn as cn11 } from "cn";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { cn as cn15 } from "cn";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Textarea({
   invalid = false,
   size = "md",
@@ -312,11 +425,11 @@ function Textarea({
   "aria-invalid": ariaInvalid,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx15(
     "textarea",
     {
       ...node(props),
-      className: cn11("sph-textarea", className),
+      className: cn15("sph-textarea", className),
       "data-size": size,
       "aria-invalid": ariaInvalid ?? (invalid || void 0)
     }
@@ -324,8 +437,8 @@ function Textarea({
 }
 
 // src/atoms/Toggle/index.tsx
-import { cn as cn12 } from "cn";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { cn as cn16 } from "cn";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
 function Toggle({
   checked,
   onCheckedChange,
@@ -338,7 +451,7 @@ function Toggle({
   "aria-label": ariaLabel = label,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
@@ -346,7 +459,7 @@ function Toggle({
       "aria-checked": ariaChecked ?? checked,
       "aria-label": ariaLabel ?? label,
       disabled,
-      className: cn12("sph-toggle", className),
+      className: cn16("sph-toggle", className),
       "data-state": checked ? "checked" : "unchecked",
       "data-size": size,
       onClick: (event) => {
@@ -354,20 +467,77 @@ function Toggle({
         if (!event.defaultPrevented) onCheckedChange(!checked);
       },
       ...node(props),
-      children: /* @__PURE__ */ jsx12("span", { className: "sph-toggle__track", children: /* @__PURE__ */ jsx12("span", { className: "sph-toggle__thumb" }) })
+      children: [
+        " ",
+        /* @__PURE__ */ jsx16("span", { className: "sph-toggle__track", children: /* @__PURE__ */ jsx16("span", { className: "sph-toggle__thumb" }) })
+      ]
     }
   );
 }
 
+// src/lib/presence.ts
+import { useEffect, useRef, useState as useState2 } from "react";
+var SPEED_TOKEN = {
+  fast: "--sph-motion-fast",
+  normal: "--sph-motion-normal",
+  slow: "--sph-motion-slow"
+};
+var EXIT_FRAME_BUDGET = 40;
+function parseDurationMs(value) {
+  const match = value.trim().match(/^(\d+(?:\.\d+)?)(ms|s)?$/);
+  if (!match) return 0;
+  const amount = Number.parseFloat(match[1]);
+  if (!Number.isFinite(amount) || amount <= 0) return 0;
+  return match[2] === "s" ? amount * 1e3 : amount;
+}
+function motionDurationMs(element, speed) {
+  if (typeof window === "undefined" || typeof getComputedStyle !== "function")
+    return 0;
+  const source = element ?? document.documentElement;
+  const raw = getComputedStyle(source).getPropertyValue(SPEED_TOKEN[speed]);
+  return Math.min(parseDurationMs(raw || "0ms"), 1200);
+}
+function usePresence(open, speed = "normal") {
+  const ref = useRef(null);
+  const [present, setPresent] = useState2(open);
+  const [leaving, setLeaving] = useState2(false);
+  useEffect(() => {
+    if (open) {
+      setLeaving(false);
+      setPresent(true);
+      return;
+    }
+    if (!present) return;
+    const duration = motionDurationMs(ref.current, speed);
+    if (duration <= 0) {
+      setPresent(false);
+      return;
+    }
+    setLeaving(true);
+    const timer = setTimeout(() => {
+      setPresent(false);
+      setLeaving(false);
+    }, duration + EXIT_FRAME_BUDGET);
+    return () => clearTimeout(timer);
+  }, [open, present, speed]);
+  return {
+    present,
+    leaving,
+    state: leaving ? "closed" : "open",
+    ref
+  };
+}
+
 // src/molecules/Alert/index.tsx
 import { CheckIcon as CheckIcon2, InfoIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
-import { cn as cn13 } from "cn";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { cn as cn17 } from "cn";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var alertIcons = {
-  info: /* @__PURE__ */ jsx13(InfoIcon, { size: 16 }),
-  success: /* @__PURE__ */ jsx13(CheckIcon2, { size: 16 }),
-  warning: /* @__PURE__ */ jsx13(WarningIcon, { size: 16 }),
-  danger: /* @__PURE__ */ jsx13(XIcon, { size: 16 })
+  info: /* @__PURE__ */ jsx17(InfoIcon, { size: 16 }),
+  success: /* @__PURE__ */ jsx17(CheckIcon2, { size: 16 }),
+  warning: /* @__PURE__ */ jsx17(WarningIcon, { size: 16 }),
+  danger: /* @__PURE__ */ jsx17(XIcon, { size: 16 })
 };
 function Alert({
   variant = "info",
@@ -379,29 +549,53 @@ function Alert({
   role,
   ...props
 }) {
+  const rootRef = useRef2(null);
+  const timerRef = useRef2(void 0);
+  const [dismissing, setDismissing] = useState3(false);
+  useEffect2(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const requestDismiss = () => {
+    if (onDismiss === void 0 || dismissing) return;
+    const duration = motionDurationMs(rootRef.current, "fast");
+    if (duration <= 0) {
+      onDismiss();
+      return;
+    }
+    setDismissing(true);
+    timerRef.current = setTimeout(() => {
+      setDismissing(false);
+      onDismiss();
+    }, duration + 40);
+  };
   if (title === void 0 && children === void 0) return null;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
+      ref: rootRef,
       ...node(props),
-      className: cn13("sph-alert", className),
+      className: cn17("sph-alert", className),
       "data-variant": variant,
+      "data-state": dismissing ? "closed" : "open",
       role: role ?? (variant === "danger" ? "alert" : "status"),
       "aria-live": role ? void 0 : variant === "danger" ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ jsx13("span", { className: "sph-alert__icon", "aria-hidden": "true", children: alertIcons[variant] }),
-        /* @__PURE__ */ jsxs4("div", { className: "sph-alert__body", children: [
-          title !== void 0 && /* @__PURE__ */ jsx13("p", { className: "sph-alert__title", children: node(title) }),
-          children !== void 0 && /* @__PURE__ */ jsx13("div", { className: "sph-alert__content", children: node(children) })
+        /* @__PURE__ */ jsx17("span", { className: "sph-alert__icon", "aria-hidden": "true", children: alertIcons[variant] }),
+        /* @__PURE__ */ jsxs6("div", { className: "sph-alert__body", children: [
+          title !== void 0 && /* @__PURE__ */ jsx17("p", { className: "sph-alert__title", children: node(title) }),
+          children !== void 0 && /* @__PURE__ */ jsx17("div", { className: "sph-alert__content", children: node(children) })
         ] }),
-        dismissible && /* @__PURE__ */ jsx13(
+        dismissible && /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
             className: "sph-alert__dismiss",
             "aria-label": "Dismiss notification",
-            onClick: onDismiss,
-            children: /* @__PURE__ */ jsx13(XIcon, { size: 12, "aria-hidden": "true" })
+            onClick: requestDismiss,
+            children: /* @__PURE__ */ jsx17(XIcon, { size: 12, "aria-hidden": "true" })
           }
         )
       ]
@@ -410,9 +604,39 @@ function Alert({
 }
 var Notice = Alert;
 
+// src/molecules/AvatarGroup/index.tsx
+import { cn as cn18 } from "cn";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+function AvatarGroup({
+  avatars,
+  max = 4,
+  size = "md",
+  className,
+  ...props
+}) {
+  const shown = avatars.slice(0, Math.max(max, 1));
+  const overflow = avatars.length - shown.length;
+  return /* @__PURE__ */ jsxs7("span", { ...node(props), className: cn18("sph-avatar-group", className), children: [
+    shown.map((avatar, index) => /* @__PURE__ */ jsx18(
+      Avatar,
+      {
+        src: avatar.src,
+        name: avatar.name,
+        status: avatar.status,
+        size
+      },
+      `${avatar.src ?? avatar.name ?? "avatar"}-${index}`
+    )),
+    overflow > 0 && /* @__PURE__ */ jsxs7("span", { className: "sph-avatar sph-avatar--overflow", "data-size": size, children: [
+      "+",
+      overflow
+    ] })
+  ] });
+}
+
 // src/molecules/Card/index.tsx
-import { cn as cn14 } from "cn";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { cn as cn19 } from "cn";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 function Card({
   title,
   description,
@@ -425,62 +649,707 @@ function Card({
   ...props
 }) {
   const hasHeader = header !== void 0 || title !== void 0 || description !== void 0;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "article",
     {
       ...node(props),
-      className: cn14("sph-card", className),
+      className: cn19("sph-card", className),
       "data-interactive": interactive || void 0,
       "data-selected": selected || void 0,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs5("header", { className: "sph-card__header", children: [
+        hasHeader && /* @__PURE__ */ jsxs8("header", { className: "sph-card__header", children: [
           node(header),
-          title !== void 0 && /* @__PURE__ */ jsx14("h3", { className: "sph-card__title", children: node(title) }),
-          description !== void 0 && /* @__PURE__ */ jsx14("p", { className: "sph-card__description", children: node(description) })
+          title !== void 0 && /* @__PURE__ */ jsx19("h3", { className: "sph-card__title", children: node(title) }),
+          description !== void 0 && /* @__PURE__ */ jsx19("p", { className: "sph-card__description", children: node(description) })
         ] }),
-        children !== void 0 && /* @__PURE__ */ jsx14("div", { className: "sph-card__content", children: node(children) }),
-        footer !== void 0 && /* @__PURE__ */ jsx14("footer", { className: "sph-card__footer", children: node(footer) })
+        children !== void 0 && /* @__PURE__ */ jsx19("div", { className: "sph-card__content", children: node(children) }),
+        footer !== void 0 && /* @__PURE__ */ jsx19("footer", { className: "sph-card__footer", children: node(footer) })
       ]
     }
   );
 }
 
-// src/molecules/Dialog/index.tsx
-import { XIcon as XIcon2 } from "@phosphor-icons/react";
-import { cn as cn15 } from "cn";
-import { useEffect, useId as useId2, useRef } from "react";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-function Dialog({
-  open,
-  onClose,
-  title,
-  description,
+// src/molecules/Collapsible/index.tsx
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { cn as cn20 } from "cn";
+import { useId as useId2, useState as useState4 } from "react";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function Collapsible({
+  trigger,
   children,
-  footer,
-  closeLabel = "Close dialog",
-  closeOnOverlayClick = true,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  className,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = useState4(defaultOpen);
+  const isOpen = open ?? uncontrolled;
+  const contentId = `${useId2()}-content`;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ...node(props),
+      className: cn20("sph-collapsible", className),
+      "data-state": isOpen ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            className: "sph-collapsible__trigger",
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            disabled,
+            onClick: toggle,
+            children: [
+              /* @__PURE__ */ jsx20("span", { className: "sph-collapsible__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(CaretRightIcon, { size: 13, weight: "bold" }) }),
+              node(trigger)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx20("div", { className: "sph-collapsible__body", id: contentId, children: /* @__PURE__ */ jsx20("div", { className: "sph-collapsible__inner", children: node(children) }) })
+      ]
+    }
+  );
+}
+
+// src/molecules/Combobox/index.tsx
+import {
+  CaretDownIcon,
+  CheckIcon as CheckIcon3,
+  MagnifyingGlassIcon,
+  XIcon as XIcon2
+} from "@phosphor-icons/react";
+import { cn as cn21 } from "cn";
+import { useEffect as useEffect4, useId as useId3, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import { createPortal } from "react-dom";
+
+// src/lib/filter.ts
+function matchText(text, query) {
+  const needle = query.trim().toLowerCase();
+  if (needle.length === 0) return { score: 0, indexes: [] };
+  const haystack = text.toLowerCase();
+  const indexes = [];
+  let score = 0;
+  let cursor = 0;
+  for (const char of needle) {
+    if (char === " ") continue;
+    const found = haystack.indexOf(char, cursor);
+    if (found < 0) return null;
+    indexes.push(found);
+    if (found === 0) score += 6;
+    const previous = found > 0 ? haystack[found - 1] : "";
+    const previousIsBoundary = previous === "" || !/[a-z0-9]/.test(previous);
+    if (previousIsBoundary) score += 4;
+    if (found === cursor && indexes.length > 1) score += 2;
+    score += 1;
+    cursor = found + 1;
+  }
+  score -= Math.min(haystack.length - needle.length, 10) * 0.1;
+  return { score, indexes };
+}
+function filterItems(items, query, read) {
+  const trimmed = query.trim();
+  if (trimmed.length === 0) return items.map((item) => ({ item, indexes: [] }));
+  const results = [];
+  for (const item of items) {
+    const { label, keywords } = read(item);
+    const onLabel = matchText(label, trimmed);
+    if (onLabel) {
+      results.push({ item, indexes: onLabel.indexes });
+      continue;
+    }
+    if (keywords && matchText(keywords, trimmed)) {
+      results.push({ item, indexes: [] });
+    }
+  }
+  return results;
+}
+
+// src/lib/highlight.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Highlight({
+  text,
+  indexes
+}) {
+  if (indexes.length === 0) return node(text);
+  const parts = [];
+  let cursor = 0;
+  for (const position of indexes) {
+    if (position > cursor) parts.push(text.slice(cursor, position));
+    parts.push(
+      /* @__PURE__ */ jsx21("mark", { className: "sph-match", children: text.slice(position, position + 1) }, position)
+    );
+    cursor = position + 1;
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return node(parts);
+}
+
+// src/lib/overlay.ts
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState5 } from "react";
+var useIsoLayoutEffect = typeof document === "undefined" ? useEffect3 : useLayoutEffect;
+function clamp(value, min, max) {
+  const low = Math.min(min, max);
+  const high = Math.max(min, max);
+  return Math.min(Math.max(value, low), high);
+}
+function resolvePlacement(trigger, content, viewport, placement) {
+  const { side: wanted, align, offset, padding } = placement;
+  let side = wanted;
+  if (side === "left" || side === "right") {
+    const need = content.width + offset + padding;
+    const roomLeft = trigger.left - padding;
+    const roomRight = viewport.width - trigger.right - padding;
+    if (side === "left" && roomLeft < need && roomRight > roomLeft)
+      side = "right";
+    else if (side === "right" && roomRight < need && roomLeft > roomRight)
+      side = "left";
+  } else {
+    const need = content.height + offset + padding;
+    const roomBelow = viewport.height - trigger.bottom - padding;
+    const roomAbove = trigger.top - padding;
+    if (side === "bottom" && roomBelow < need && roomAbove > roomBelow)
+      side = "top";
+    else if (side === "top" && roomAbove < need && roomBelow > roomAbove)
+      side = "bottom";
+  }
+  let left;
+  let top;
+  if (side === "bottom" || side === "top") {
+    top = side === "bottom" ? trigger.bottom + offset : trigger.top - content.height - offset;
+    left = align === "start" ? trigger.left : align === "end" ? trigger.right - content.width : trigger.left + (trigger.width - content.width) / 2;
+  } else {
+    left = side === "right" ? trigger.right + offset : trigger.left - content.width - offset;
+    top = trigger.top + (trigger.height - content.height) / 2;
+  }
+  left = clamp(left, padding, viewport.width - content.width - padding);
+  top = clamp(top, padding, viewport.height - content.height - padding);
+  return { left: Math.round(left), top: Math.round(top), side };
+}
+function overlayOrigin(side, align) {
+  if (side === "left") return "right center";
+  if (side === "right") return "left center";
+  const edge = side === "bottom" ? "top" : "bottom";
+  if (align === "center") return `${edge} center`;
+  return `${edge} ${align === "start" ? "left" : "right"}`;
+}
+function usePortaled() {
+  const [portaled, setPortaled] = useState5(false);
+  useIsoLayoutEffect(() => {
+    setPortaled(true);
+  }, []);
+  return portaled;
+}
+function useOverlayPosition(triggerRef, contentRef, active, placement = {}) {
+  const {
+    side = "bottom",
+    align = "start",
+    offset = 4,
+    padding = 8,
+    matchWidth = false
+  } = placement;
+  const frameRef = useRef3(null);
+  useIsoLayoutEffect(() => {
+    if (!active) return;
+    const update = () => {
+      frameRef.current = null;
+      const trigger = triggerRef.current;
+      const content = contentRef.current;
+      if (!trigger || !content) return;
+      const triggerRect = trigger.getBoundingClientRect();
+      if (matchWidth)
+        content.style.width = `${Math.round(triggerRect.width)}px`;
+      content.style.position = "fixed";
+      const contentSize = {
+        width: content.offsetWidth,
+        height: content.offsetHeight
+      };
+      const resolved = resolvePlacement(
+        triggerRect,
+        contentSize,
+        { width: window.innerWidth, height: window.innerHeight },
+        { side, align, offset, padding }
+      );
+      const style = content.style;
+      style.left = `${resolved.left}px`;
+      style.top = `${resolved.top}px`;
+      style.right = "auto";
+      style.bottom = "auto";
+      style.translate = "none";
+      style.transformOrigin = overlayOrigin(resolved.side, align);
+      content.dataset.side = resolved.side;
+    };
+    const schedule = () => {
+      if (frameRef.current === null)
+        frameRef.current = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("resize", schedule);
+    document.addEventListener("scroll", schedule, {
+      capture: true,
+      passive: true
+    });
+    return () => {
+      window.removeEventListener("resize", schedule);
+      document.removeEventListener("scroll", schedule, { capture: true });
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    };
+  }, [
+    active,
+    align,
+    matchWidth,
+    offset,
+    padding,
+    side,
+    contentRef,
+    triggerRef
+  ]);
+}
+
+// src/molecules/Combobox/index.tsx
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+function readableLabel(option) {
+  return typeof option.label === "string" ? option.label : "";
+}
+function resolveActive(options, wanted) {
+  if (options.length === 0) return -1;
+  const start = Math.min(Math.max(wanted, 0), options.length - 1);
+  const enabled = (index) => !options[index]?.option.disabled;
+  if (enabled(start)) return start;
+  for (let index = start + 1; index < options.length; index += 1)
+    if (enabled(index)) return index;
+  for (let index = 0; index < start; index += 1)
+    if (enabled(index)) return index;
+  return start;
+}
+function Combobox({
+  options,
+  value,
+  values,
+  onValueChange,
+  onValuesChange,
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
+  emptyMessage = "No matches.",
+  disabled = false,
+  size = "md",
+  id,
+  ariaLabel,
   className
 }) {
-  const id = useId2();
-  const titleId = `${id}-title`;
-  const descriptionId = description ? `${id}-description` : void 0;
-  const dialogRef = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const dialog = dialogRef.current;
-    const focusable = () => Array.from(
-      dialog?.querySelectorAll(
-        "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
-      ) ?? []
-    ).filter((element) => !element.hasAttribute("disabled"));
-    requestAnimationFrame(() => focusable()[0]?.focus());
+  const generatedId = useId3();
+  const controlId = id ?? `sph-combobox-${generatedId}`;
+  const listId = `${controlId}-list`;
+  const rootRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const listRef = useRef4(null);
+  const inputRef = useRef4(null);
+  const [open, setOpen] = useState6(false);
+  const [query, setQuery] = useState6("");
+  const [activeState, setActive] = useState6(0);
+  const multiple = values !== void 0;
+  const selectedValues = multiple ? values ?? [] : value ? [value] : [];
+  const {
+    present,
+    state,
+    ref: presenceRef
+  } = usePresence(open, "fast");
+  const portaled = usePortaled();
+  const visible = present && portaled;
+  useOverlayPosition(triggerRef, presenceRef, visible, {
+    side: "bottom",
+    align: "start",
+    offset: 4,
+    matchWidth: true
+  });
+  const sections = useMemo(() => {
+    const read = (option) => ({
+      label: readableLabel(option),
+      keywords: option.keywords
+    });
+    const filtered = filterItems(options, query, read);
+    const ungrouped = filtered.filter(
+      (entry) => entry.item.group === void 0
+    );
+    const groupNames = [
+      ...new Set(
+        filtered.map((entry) => entry.item.group).filter((name) => name !== void 0)
+      )
+    ];
+    const raw = [
+      ...ungrouped.length > 0 ? [{ heading: void 0, entries: ungrouped }] : [],
+      ...groupNames.map((name) => ({
+        heading: name,
+        entries: filtered.filter((entry) => entry.item.group === name)
+      }))
+    ];
+    let order = 0;
+    const built = raw.map((section) => ({
+      heading: section.heading,
+      entries: section.entries.map((entry) => ({
+        option: entry.item,
+        indexes: entry.indexes,
+        activeId: `${listId}-option-${order}`,
+        index: order++
+      }))
+    }));
+    return built;
+  }, [listId, options, query]);
+  const flat = sections.flatMap((section) => section.entries);
+  const active = resolveActive(flat, activeState);
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+  };
+  const toggleValue = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const next = selectedValues.includes(option.value) ? selectedValues.filter((entry) => entry !== option.value) : [...selectedValues, option.value];
+      onValuesChange?.(next);
+      setQuery("");
+      setActive(0);
+      return;
+    }
+    onValueChange?.(option.value);
+    close();
+  };
+  const removeValue = (entry) => {
+    onValuesChange?.(selectedValues.filter((item) => item !== entry));
+  };
+  const activate = (index) => {
+    const option = flat[index]?.option;
+    if (!option) return;
+    toggleValue(option);
+  };
+  const move = (direction) => {
+    if (flat.length === 0) return;
+    let index = active < 0 ? 0 : active;
+    for (let step = 0; step < flat.length; step += 1) {
+      index = (index + direction + flat.length) % flat.length;
+      if (!flat[index]?.option.disabled) {
+        setActive(index);
+        return;
+      }
+    }
+  };
+  useEffect4(() => {
+    if (!open) setQuery("");
+  }, [open]);
+  useEffect4(() => {
+    setActive(0);
+  }, [query]);
+  useEffect4(() => {
+    if (!visible) return;
+    inputRef.current?.setAttribute("spellcheck", "false");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, [visible]);
+  useEffect4(() => {
+    if (!visible) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
-        onClose();
-        return;
+        event.preventDefault();
+        close();
       }
+    };
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !presenceRef.current?.contains(target))
+        close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  });
+  useEffect4(() => {
+    if (!visible || active < 0) return;
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active, visible]);
+  const handleInputKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setActive(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setActive(flat.length - 1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      if (active >= 0) activate(active);
+    }
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!disabled) setOpen(true);
+    }
+  };
+  const labelOf = (entry) => readableLabel(
+    options.find((option) => option.value === entry) ?? {
+      value: entry,
+      label: entry
+    }
+  );
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: rootRef,
+      className: cn21("sph-combobox", className),
+      "data-size": size,
+      "data-open": open || void 0,
+      children: [
+        multiple ? /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: "sph-combobox__control",
+            onClick: () => {
+              if (!disabled) setOpen((current) => !current);
+            },
+            children: [
+              /* @__PURE__ */ jsxs10("div", { className: "sph-combobox__chips", children: [
+                selectedValues.map((entry) => /* @__PURE__ */ jsxs10("span", { className: "sph-combobox__chip", children: [
+                  /* @__PURE__ */ jsx22("span", { className: "sph-combobox__chip-label", children: labelOf(entry) }),
+                  /* @__PURE__ */ jsx22(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sph-combobox__chip-remove",
+                      "aria-label": `Remove ${labelOf(entry)}`,
+                      disabled,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        removeValue(entry);
+                      },
+                      children: /* @__PURE__ */ jsx22(XIcon2, { size: 10, "aria-hidden": "true" })
+                    }
+                  )
+                ] }, entry)),
+                selectedValues.length === 0 && /* @__PURE__ */ jsx22("span", { className: "sph-combobox__placeholder", children: node(placeholder) })
+              ] }),
+              /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  type: "button",
+                  ref: triggerRef,
+                  className: "sph-combobox__toggle",
+                  "aria-label": ariaLabel ?? "Open suggestions",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  "aria-controls": open ? listId : void 0,
+                  disabled,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    if (!disabled) setOpen((current) => !current);
+                  },
+                  onKeyDown: handleTriggerKeyDown,
+                  children: /* @__PURE__ */ jsx22(
+                    CaretDownIcon,
+                    {
+                      className: "sph-combobox__caret",
+                      size: 13,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            ref: triggerRef,
+            className: "sph-combobox__control sph-combobox__control--button",
+            "aria-label": ariaLabel,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            disabled,
+            onClick: () => {
+              if (!disabled) setOpen((current) => !current);
+            },
+            onKeyDown: handleTriggerKeyDown,
+            children: [
+              /* @__PURE__ */ jsx22(
+                "span",
+                {
+                  className: selectedValues.length > 0 ? "sph-combobox__value" : "sph-combobox__placeholder",
+                  children: selectedValues.length > 0 ? node(
+                    options.find((option) => option.value === value)?.label ?? value
+                  ) : node(placeholder)
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                CaretDownIcon,
+                {
+                  className: "sph-combobox__caret",
+                  size: 13,
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        visible && createPortal(
+          /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              ref: presenceRef,
+              className: "sph-combobox__panel",
+              "data-state": state,
+              children: [
+                /* @__PURE__ */ jsxs10("div", { className: "sph-combobox__search", children: [
+                  /* @__PURE__ */ jsx22(
+                    MagnifyingGlassIcon,
+                    {
+                      className: "sph-combobox__search-icon",
+                      size: 14,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx22(
+                    "input",
+                    {
+                      ref: inputRef,
+                      className: "sph-combobox__input",
+                      type: "text",
+                      role: "combobox",
+                      "aria-expanded": true,
+                      "aria-controls": listId,
+                      "aria-activedescendant": active >= 0 ? flat[active]?.activeId : void 0,
+                      "aria-autocomplete": "list",
+                      "aria-label": searchPlaceholder,
+                      placeholder: searchPlaceholder,
+                      value: query,
+                      autoComplete: "off",
+                      onChange: (event) => setQuery(event.currentTarget.value),
+                      onKeyDown: handleInputKeyDown
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs10(
+                  "div",
+                  {
+                    ref: listRef,
+                    className: "sph-combobox__list",
+                    id: listId,
+                    role: "listbox",
+                    "aria-label": ariaLabel ?? searchPlaceholder,
+                    "aria-multiselectable": multiple || void 0,
+                    children: [
+                      flat.length === 0 && /* @__PURE__ */ jsx22("div", { className: "sph-combobox__empty", role: "status", children: node(emptyMessage) }),
+                      sections.map((section) => /* @__PURE__ */ jsxs10(
+                        "div",
+                        {
+                          className: "sph-combobox__group",
+                          role: "group",
+                          "aria-labelledby": section.heading !== void 0 ? `${listId}-group-${section.heading}` : void 0,
+                          children: [
+                            section.heading !== void 0 && /* @__PURE__ */ jsx22(
+                              "div",
+                              {
+                                className: "sph-combobox__heading",
+                                id: `${listId}-group-${section.heading}`,
+                                children: section.heading
+                              }
+                            ),
+                            section.entries.map((entry) => {
+                              const option = entry.option;
+                              const isSelected = selectedValues.includes(option.value);
+                              return /* @__PURE__ */ jsxs10(
+                                "div",
+                                {
+                                  id: entry.activeId,
+                                  className: "sph-combobox__option",
+                                  role: "option",
+                                  "data-index": entry.index,
+                                  "data-active": entry.index === active ? "true" : void 0,
+                                  "data-disabled": option.disabled || void 0,
+                                  "aria-selected": isSelected,
+                                  "aria-disabled": option.disabled || void 0,
+                                  onPointerEnter: () => {
+                                    if (!option.disabled) setActive(entry.index);
+                                  },
+                                  onPointerDown: (event) => event.preventDefault(),
+                                  onClick: () => activate(entry.index),
+                                  children: [
+                                    /* @__PURE__ */ jsx22(
+                                      "span",
+                                      {
+                                        className: "sph-combobox__check",
+                                        "data-checked": isSelected || void 0,
+                                        "aria-hidden": "true",
+                                        children: isSelected && /* @__PURE__ */ jsx22(CheckIcon3, { size: 13, weight: "bold" })
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx22("span", { className: "sph-combobox__label", children: typeof option.label === "string" ? /* @__PURE__ */ jsx22(
+                                      Highlight,
+                                      {
+                                        text: option.label,
+                                        indexes: entry.indexes
+                                      }
+                                    ) : node(option.label) })
+                                  ]
+                                },
+                                option.value
+                              );
+                            })
+                          ]
+                        },
+                        section.heading ?? "section-root"
+                      ))
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+
+// src/molecules/Dialog/index.tsx
+import { XIcon as XIcon3 } from "@phosphor-icons/react";
+import { cn as cn22 } from "cn";
+import { useEffect as useEffect6, useId as useId4 } from "react";
+
+// src/lib/focus.ts
+import { useEffect as useEffect5 } from "react";
+var FOCUSABLE_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])";
+function focusable(container) {
+  return Array.from(
+    container?.querySelectorAll(FOCUSABLE_SELECTOR) ?? []
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
+function useFocusTrap(ref, active, initial) {
+  useEffect5(() => {
+    if (!active) return;
+    requestAnimationFrame(() => {
+      const target = initial?.current ?? focusable(ref.current)[0];
+      target?.focus();
+    });
+    const handleKeyDown = (event) => {
       if (event.key !== "Tab") return;
-      const elements = focusable();
+      const elements = focusable(ref.current);
       if (elements.length === 0) {
         event.preventDefault();
         return;
@@ -497,45 +1366,154 @@ function Dialog({
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, initial, ref]);
+}
+
+// src/molecules/Dialog/index.tsx
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  closeLabel = "Close dialog",
+  closeOnOverlayClick = true,
+  className
+}) {
+  const id = useId4();
+  const titleId = `${id}-title`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const { present, state, ref: dialogRef } = usePresence(open);
+  useFocusTrap(dialogRef, open);
+  useEffect6(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose, open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsx15(
+  if (!present) return null;
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: "sph-dialog__backdrop",
+      "data-state": state,
       role: "presentation",
       onMouseDown: (event) => {
         if (closeOnOverlayClick && event.target === event.currentTarget)
           onClose();
       },
-      children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs11(
         "section",
         {
           ref: dialogRef,
-          className: cn15("sph-dialog", className),
+          className: cn22("sph-dialog", className),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": titleId,
           "aria-describedby": descriptionId,
           children: [
-            /* @__PURE__ */ jsxs6("header", { className: "sph-dialog__header", children: [
-              /* @__PURE__ */ jsxs6("div", { className: "sph-dialog__heading", children: [
-                /* @__PURE__ */ jsx15("h2", { id: titleId, className: "sph-dialog__title", children: node(title) }),
-                description !== void 0 && /* @__PURE__ */ jsx15("p", { id: descriptionId, className: "sph-dialog__description", children: node(description) })
+            /* @__PURE__ */ jsxs11("header", { className: "sph-dialog__header", children: [
+              /* @__PURE__ */ jsxs11("div", { className: "sph-dialog__heading", children: [
+                /* @__PURE__ */ jsx23("h2", { id: titleId, className: "sph-dialog__title", children: node(title) }),
+                description !== void 0 && /* @__PURE__ */ jsx23("p", { id: descriptionId, className: "sph-dialog__description", children: node(description) })
               ] }),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx23(
                 "button",
                 {
                   type: "button",
                   className: "sph-dialog__close",
                   "aria-label": closeLabel,
                   onClick: onClose,
-                  children: /* @__PURE__ */ jsx15(XIcon2, { size: 14, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx23(XIcon3, { size: 14, "aria-hidden": "true" })
                 }
               )
             ] }),
-            children !== void 0 && /* @__PURE__ */ jsx15("div", { className: "sph-dialog__content", children: node(children) }),
-            footer !== void 0 && /* @__PURE__ */ jsx15("footer", { className: "sph-dialog__footer", children: node(footer) })
+            children !== void 0 && /* @__PURE__ */ jsx23("div", { className: "sph-dialog__content", children: node(children) }),
+            footer !== void 0 && /* @__PURE__ */ jsx23("footer", { className: "sph-dialog__footer", children: node(footer) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/molecules/Drawer/index.tsx
+import { XIcon as XIcon4 } from "@phosphor-icons/react";
+import { cn as cn23 } from "cn";
+import { useEffect as useEffect7, useId as useId5 } from "react";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  size = "md",
+  closeLabel = "Close panel",
+  closeOnOverlayClick = true,
+  className
+}) {
+  const id = useId5();
+  const titleId = `${id}-title`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const { present, state, ref: drawerRef } = usePresence(open);
+  useFocusTrap(drawerRef, open);
+  useEffect7(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, open]);
+  if (!present) return null;
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: "sph-drawer__backdrop",
+      "data-state": state,
+      "data-side": side,
+      role: "presentation",
+      onMouseDown: (event) => {
+        if (closeOnOverlayClick && event.target === event.currentTarget)
+          onClose();
+      },
+      children: /* @__PURE__ */ jsxs12(
+        "section",
+        {
+          ref: drawerRef,
+          className: cn23("sph-drawer", className),
+          "data-side": side,
+          "data-size": size,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          children: [
+            /* @__PURE__ */ jsxs12("header", { className: "sph-drawer__header", children: [
+              /* @__PURE__ */ jsxs12("div", { className: "sph-drawer__heading", children: [
+                /* @__PURE__ */ jsx24("h2", { id: titleId, className: "sph-drawer__title", children: node(title) }),
+                description !== void 0 && /* @__PURE__ */ jsx24("p", { id: descriptionId, className: "sph-drawer__description", children: node(description) })
+              ] }),
+              /* @__PURE__ */ jsx24(
+                "button",
+                {
+                  type: "button",
+                  className: "sph-drawer__close",
+                  "aria-label": closeLabel,
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx24(XIcon4, { size: 14, "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            children !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-drawer__content", children: node(children) }),
+            footer !== void 0 && /* @__PURE__ */ jsx24("footer", { className: "sph-drawer__footer", children: node(footer) })
           ]
         }
       )
@@ -544,12 +1522,12 @@ function Dialog({
 }
 
 // src/molecules/Field/index.tsx
-import { cn as cn17 } from "cn";
-import { useId as useId3 } from "react";
+import { cn as cn25 } from "cn";
+import { useId as useId6 } from "react";
 
 // src/molecules/FieldMessage/index.tsx
-import { cn as cn16 } from "cn";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { cn as cn24 } from "cn";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function FieldMessage({
   variant = "hint",
   className,
@@ -557,11 +1535,11 @@ function FieldMessage({
   ...props
 }) {
   if (children === void 0 || children === null) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx25(
     "p",
     {
       ...node(props),
-      className: cn16("sph-field-message", className),
+      className: cn24("sph-field-message", className),
       "data-variant": variant,
       role: variant === "error" ? "alert" : void 0,
       children: node(children)
@@ -570,7 +1548,7 @@ function FieldMessage({
 }
 
 // src/molecules/Field/index.tsx
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function Field({
   label,
   htmlFor,
@@ -581,24 +1559,145 @@ function Field({
   className,
   children
 }) {
-  const generatedId = useId3();
+  const generatedId = useId6();
   const descriptionId = description ? `${generatedId}-description` : void 0;
   const messageId = message ? `${generatedId}-message` : void 0;
-  return /* @__PURE__ */ jsxs7("div", { className: cn17("sph-field", className), children: [
-    label !== void 0 && /* @__PURE__ */ jsxs7("label", { className: "sph-field__label", htmlFor, children: [
-      /* @__PURE__ */ jsx17("span", { children: node(label) }),
-      required && /* @__PURE__ */ jsx17("span", { className: "sph-field__required", children: "Required" })
+  return /* @__PURE__ */ jsxs13("div", { className: cn25("sph-field", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsxs13("label", { className: "sph-field__label", htmlFor, children: [
+      /* @__PURE__ */ jsx26("span", { children: node(label) }),
+      required && /* @__PURE__ */ jsx26("span", { className: "sph-field__required", children: "Required" })
     ] }),
-    description !== void 0 && description !== null && /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "sph-field__description", children: node(description) }),
-    /* @__PURE__ */ jsx17("div", { className: "sph-field__control", children: node(children) }),
-    message !== void 0 && message !== null && /* @__PURE__ */ jsx17(FieldMessage, { id: messageId, variant: messageType, children: node(message) })
+    description !== void 0 && description !== null && /* @__PURE__ */ jsx26("p", { id: descriptionId, className: "sph-field__description", children: node(description) }),
+    /* @__PURE__ */ jsx26("div", { className: "sph-field__control", children: node(children) }),
+    message !== void 0 && message !== null && /* @__PURE__ */ jsx26(FieldMessage, { id: messageId, variant: messageType, children: node(message) })
   ] });
 }
 
+// src/molecules/HoverCard/index.tsx
+import { cn as cn26 } from "cn";
+import { useEffect as useEffect8, useId as useId7, useRef as useRef5, useState as useState7 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function HoverCard({
+  trigger,
+  children,
+  openDelay = 180,
+  closeDelay = 140,
+  placement = "bottom",
+  ariaLabel = "Hover card",
+  className
+}) {
+  const id = useId7();
+  const rootRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const timers = useRef5({});
+  const [open, setOpen] = useState7(false);
+  const {
+    present,
+    state,
+    ref: contentRef
+  } = usePresence(open, "fast");
+  const portaled = usePortaled();
+  useOverlayPosition(triggerRef, contentRef, present && portaled, {
+    side: placement,
+    align: "start",
+    offset: 6
+  });
+  const clearTimers = () => {
+    if (timers.current.open !== void 0)
+      window.clearTimeout(timers.current.open);
+    if (timers.current.close !== void 0)
+      window.clearTimeout(timers.current.close);
+    timers.current = {};
+  };
+  const requestOpen = () => {
+    clearTimers();
+    timers.current.open = window.setTimeout(() => setOpen(true), openDelay);
+  };
+  const requestClose = () => {
+    clearTimers();
+    timers.current.close = window.setTimeout(() => setOpen(false), closeDelay);
+  };
+  useEffect8(() => clearTimers, []);
+  useEffect8(() => {
+    if (!present || !portaled) return;
+    const closeNow = () => {
+      clearTimers();
+      setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") closeNow();
+    };
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !contentRef.current?.contains(target))
+        closeNow();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [contentRef, present, portaled]);
+  const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    if (next && (rootRef.current?.contains(next) || contentRef.current?.contains(next)))
+      return;
+    clearTimers();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref: rootRef,
+      className: cn26("sph-hover-card", className),
+      "data-open": open || void 0,
+      onPointerEnter: requestOpen,
+      onPointerLeave: requestClose,
+      onBlur: handleBlur,
+      children: [
+        /* @__PURE__ */ jsx27(
+          "button",
+          {
+            type: "button",
+            ref: triggerRef,
+            className: "sph-hover-card__trigger",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": open ? id : void 0,
+            onFocus: requestOpen,
+            children: node(trigger)
+          }
+        ),
+        present && portaled && createPortal2(
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              id,
+              ref: contentRef,
+              className: "sph-hover-card__content",
+              "data-state": state,
+              role: "dialog",
+              "aria-label": ariaLabel,
+              onPointerEnter: clearTimers,
+              onPointerLeave: requestClose,
+              onBlur: handleBlur,
+              children: node(children)
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+
 // src/molecules/Menu/index.tsx
-import { cn as cn18 } from "cn";
-import { useEffect as useEffect2, useId as useId4, useRef as useRef2, useState } from "react";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { cn as cn27 } from "cn";
+import { useEffect as useEffect9, useId as useId8, useRef as useRef6, useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function Menu({
   trigger,
   items,
@@ -608,18 +1707,32 @@ function Menu({
   disabled = false,
   className
 }) {
-  const rootRef = useRef2(null);
-  const menuId = useId4();
-  const [open, setOpen] = useState(false);
+  const rootRef = useRef6(null);
+  const triggerRef = useRef6(null);
+  const menuId = useId8();
+  const [open, setOpen] = useState8(false);
+  const {
+    present,
+    state,
+    ref: contentRef
+  } = usePresence(open, "fast");
+  const portaled = usePortaled();
+  useOverlayPosition(triggerRef, contentRef, present && portaled, {
+    side: "bottom",
+    align,
+    offset: 4
+  });
   const enabledIndexes = items.flatMap(
     (item, index) => !item.separator && !item.disabled ? [index] : []
   );
   const close = () => setOpen(false);
   const focusItem = (index) => document.getElementById(`${menuId}-${index}`)?.focus();
-  useEffect2(() => {
+  useEffect9(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
-      if (!rootRef.current?.contains(event.target)) close();
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !contentRef.current?.contains(target))
+        close();
     };
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
@@ -661,58 +1774,75 @@ function Menu({
     const nextIndex = enabledIndexes[nextPosition];
     if (nextIndex !== void 0) focusItem(nextIndex);
   };
-  return /* @__PURE__ */ jsxs8("div", { id: menuId, ref: rootRef, className: cn18("sph-menu", className), children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs15("div", { id: menuId, ref: rootRef, className: cn27("sph-menu", className), children: [
+    /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
+        ref: triggerRef,
         className: "sph-menu__trigger",
         "aria-label": label,
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        "aria-controls": open ? `${menuId}-menu` : void 0,
         disabled,
         onClick: () => setOpen((current) => !current),
         onKeyDown: handleKeyDown,
         children: node(trigger)
       }
     ),
-    open && /* @__PURE__ */ jsx18("div", { className: "sph-menu__content", "data-align": align, role: "menu", children: items.map(
-      (item, index) => item.separator ? /* @__PURE__ */ jsx18(
+    present && portaled && createPortal3(
+      /* @__PURE__ */ jsx28(
         "div",
         {
-          className: "sph-menu__separator",
-          role: "separator"
-        },
-        `separator-${index}`
-      ) : /* @__PURE__ */ jsxs8(
-        "button",
-        {
-          id: `${menuId}-${index}`,
-          type: "button",
-          role: "menuitem",
-          className: "sph-menu__item",
-          "data-danger": item.danger || void 0,
-          disabled: item.disabled,
-          onClick: () => choose(item),
-          onKeyDown: (event) => handleItemKeyDown(event, index),
-          children: [
-            /* @__PURE__ */ jsxs8("span", { className: "sph-menu__item-label", children: [
-              node(item.icon),
-              /* @__PURE__ */ jsx18("span", { children: node(item.label) })
-            ] }),
-            item.shortcut !== void 0 && /* @__PURE__ */ jsx18("span", { className: "sph-menu__shortcut", children: node(item.shortcut) })
-          ]
-        },
-        item.value ?? `item-${index}`
-      )
-    ) })
+          id: `${menuId}-menu`,
+          ref: contentRef,
+          className: "sph-menu__content",
+          "data-align": align,
+          "data-state": state,
+          role: "menu",
+          children: items.map(
+            (item, index) => item.separator ? /* @__PURE__ */ jsx28(
+              "div",
+              {
+                className: "sph-menu__separator",
+                role: "separator"
+              },
+              `separator-${index}`
+            ) : /* @__PURE__ */ jsxs15(
+              "button",
+              {
+                id: `${menuId}-${index}`,
+                type: "button",
+                role: "menuitem",
+                className: "sph-menu__item",
+                "data-danger": item.danger || void 0,
+                disabled: item.disabled,
+                onClick: () => choose(item),
+                onKeyDown: (event) => handleItemKeyDown(event, index),
+                children: [
+                  /* @__PURE__ */ jsxs15("span", { className: "sph-menu__item-label", children: [
+                    node(item.icon),
+                    /* @__PURE__ */ jsx28("span", { children: node(item.label) })
+                  ] }),
+                  item.shortcut !== void 0 && /* @__PURE__ */ jsx28("span", { className: "sph-menu__shortcut", children: node(item.shortcut) })
+                ]
+              },
+              item.value ?? `item-${index}`
+            )
+          )
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
 // src/molecules/Popover/index.tsx
-import { cn as cn19 } from "cn";
-import { useEffect as useEffect3, useId as useId5, useRef as useRef3, useState as useState2 } from "react";
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { cn as cn28 } from "cn";
+import { useEffect as useEffect10, useId as useId9, useRef as useRef7, useState as useState9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function Popover({
   trigger,
   children,
@@ -724,18 +1854,32 @@ function Popover({
   disabled = false,
   className
 }) {
-  const id = useId5();
-  const rootRef = useRef3(null);
-  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const id = useId9();
+  const rootRef = useRef7(null);
+  const triggerRef = useRef7(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState9(defaultOpen);
   const isOpen = open ?? uncontrolledOpen;
+  const {
+    present,
+    state,
+    ref: contentRef
+  } = usePresence(isOpen, "fast");
+  const portaled = usePortaled();
+  useOverlayPosition(triggerRef, contentRef, present && portaled, {
+    side: "bottom",
+    align: placement,
+    offset: 6
+  });
   const setOpen = (next) => {
     setUncontrolledOpen(next);
     onOpenChange?.(next);
   };
-  useEffect3(() => {
+  useEffect10(() => {
     if (!isOpen) return;
     const handlePointerDown = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !contentRef.current?.contains(target))
+        setOpen(false);
     };
     const handleKeyDown = (event) => {
       if (event.key === "Escape") setOpen(false);
@@ -753,17 +1897,18 @@ function Popover({
       setOpen(true);
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: rootRef,
-      className: cn19("sph-popover", className),
+      className: cn28("sph-popover", className),
       "data-open": isOpen || void 0,
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx29(
           "button",
           {
             type: "button",
+            ref: triggerRef,
             className: "sph-popover__trigger",
             "aria-haspopup": "dialog",
             "aria-expanded": isOpen,
@@ -774,16 +1919,21 @@ function Popover({
             children: node(trigger)
           }
         ),
-        isOpen && /* @__PURE__ */ jsx19(
-          "div",
-          {
-            id,
-            className: "sph-popover__content",
-            "data-placement": placement,
-            role: "dialog",
-            "aria-label": ariaLabel,
-            children: node(children)
-          }
+        present && portaled && createPortal4(
+          /* @__PURE__ */ jsx29(
+            "div",
+            {
+              id,
+              ref: contentRef,
+              className: "sph-popover__content",
+              "data-placement": placement,
+              "data-state": state,
+              role: "dialog",
+              "aria-label": ariaLabel,
+              children: node(children)
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -791,9 +1941,9 @@ function Popover({
 }
 
 // src/molecules/RadioGroup/index.tsx
-import { cn as cn20 } from "cn";
-import { useId as useId6 } from "react";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cn as cn29 } from "cn";
+import { useId as useId10 } from "react";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function RadioGroup({
   value,
   options,
@@ -806,29 +1956,29 @@ function RadioGroup({
   disabled = false,
   className
 }) {
-  const groupId = useId6();
+  const groupId = useId10();
   const descriptionId = description ? `${groupId}-description` : void 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs17(
     "fieldset",
     {
-      className: cn20("sph-radio-group", className),
+      className: cn29("sph-radio-group", className),
       "data-size": size,
       "data-orientation": orientation,
       disabled,
       "aria-describedby": descriptionId,
       children: [
-        label !== void 0 && /* @__PURE__ */ jsx20("legend", { className: "sph-radio-group__legend", children: node(label) }),
-        description !== void 0 && /* @__PURE__ */ jsx20("p", { id: descriptionId, className: "sph-radio-group__description", children: node(description) }),
-        /* @__PURE__ */ jsx20("div", { className: "sph-radio-group__options", children: options.map((option, index) => {
+        label !== void 0 && /* @__PURE__ */ jsx30("legend", { className: "sph-radio-group__legend", children: node(label) }),
+        description !== void 0 && /* @__PURE__ */ jsx30("p", { id: descriptionId, className: "sph-radio-group__description", children: node(description) }),
+        /* @__PURE__ */ jsx30("div", { className: "sph-radio-group__options", children: options.map((option, index) => {
           const optionId = `${groupId}-${index}`;
           const optionDescriptionId = option.description ? `${optionId}-description` : void 0;
-          return /* @__PURE__ */ jsxs10(
+          return /* @__PURE__ */ jsxs17(
             "label",
             {
               className: "sph-radio-group__option",
               "data-disabled": option.disabled || void 0,
               children: [
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx30(
                   "input",
                   {
                     id: optionId,
@@ -841,10 +1991,10 @@ function RadioGroup({
                     onChange: () => onValueChange(option.value)
                   }
                 ),
-                /* @__PURE__ */ jsx20("span", { className: "sph-radio-group__control", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxs10("span", { className: "sph-radio-group__content", children: [
-                  /* @__PURE__ */ jsx20("span", { className: "sph-radio-group__label", children: node(option.label) }),
-                  option.description !== void 0 && /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx30("span", { className: "sph-radio-group__control", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs17("span", { className: "sph-radio-group__content", children: [
+                  /* @__PURE__ */ jsx30("span", { className: "sph-radio-group__label", children: node(option.label) }),
+                  option.description !== void 0 && /* @__PURE__ */ jsx30(
                     "span",
                     {
                       id: optionDescriptionId,
@@ -864,10 +2014,11 @@ function RadioGroup({
 }
 
 // src/molecules/Select/index.tsx
-import { CaretDownIcon, CaretUpIcon, CheckIcon as CheckIcon3 } from "@phosphor-icons/react";
-import { cn as cn21 } from "cn";
-import { useEffect as useEffect4, useId as useId7, useRef as useRef4, useState as useState3 } from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { CaretDownIcon as CaretDownIcon2, CheckIcon as CheckIcon4 } from "@phosphor-icons/react";
+import { cn as cn30 } from "cn";
+import { useEffect as useEffect11, useId as useId11, useRef as useRef8, useState as useState10 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 function nextEnabled(options, start, direction) {
   if (options.length === 0) return -1;
   for (let step = 1; step <= options.length; step += 1) {
@@ -888,25 +2039,40 @@ function Select({
   disabled = false,
   size = "md"
 }) {
-  const generatedId = useId7();
+  const generatedId = useId11();
   const triggerId = id ?? `sph-select-${generatedId}`;
   const listboxId = `${triggerId}-listbox`;
-  const rootRef = useRef4(null);
+  const rootRef = useRef8(null);
+  const triggerRef = useRef8(null);
   const selectedIndex = options.findIndex((option) => option.value === value);
   const firstEnabled2 = options.findIndex((option) => !option.disabled);
-  const [open, setOpen] = useState3(false);
-  const [activeIndex, setActiveIndex] = useState3(
+  const [open, setOpen] = useState10(false);
+  const {
+    present,
+    state,
+    ref: listboxRef
+  } = usePresence(open, "fast");
+  const portaled = usePortaled();
+  useOverlayPosition(triggerRef, listboxRef, present && portaled, {
+    side: "bottom",
+    align: "start",
+    offset: 4,
+    matchWidth: true
+  });
+  const [activeIndex, setActiveIndex] = useState10(
     selectedIndex >= 0 ? selectedIndex : firstEnabled2
   );
-  useEffect4(() => {
+  useEffect11(() => {
     if (!open) return;
     const close = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !listboxRef.current?.contains(target))
+        setOpen(false);
     };
     document.addEventListener("pointerdown", close);
     return () => document.removeEventListener("pointerdown", close);
   }, [open]);
-  useEffect4(() => {
+  useEffect11(() => {
     if (!open)
       setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabled2);
   }, [firstEnabled2, open, selectedIndex]);
@@ -946,12 +2112,13 @@ function Select({
     }
   }
   const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
-  return /* @__PURE__ */ jsxs11("div", { ref: rootRef, className: cn21("sph-select", className), "data-size": size, children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: cn30("sph-select", className), "data-size": size, children: [
+    /* @__PURE__ */ jsxs18(
       "button",
       {
         id: triggerId,
         type: "button",
+        ref: triggerRef,
         className: "sph-select__trigger",
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
@@ -963,37 +2130,57 @@ function Select({
         onClick: () => setOpen((current) => !current),
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx21("span", { className: "sph-select__value", children: node(selected?.label ?? placeholder) }),
-          open ? /* @__PURE__ */ jsx21(CaretUpIcon, { className: "sph-select__caret", "aria-hidden": "true" }) : /* @__PURE__ */ jsx21(CaretDownIcon, { className: "sph-select__caret", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx31("span", { className: "sph-select__value", children: node(selected?.label ?? placeholder) }),
+          /* @__PURE__ */ jsx31(
+            CaretDownIcon2,
+            {
+              className: "sph-select__caret",
+              style: { transform: open ? "rotate(180deg)" : void 0 },
+              "aria-hidden": "true"
+            }
+          )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx21("div", { id: listboxId, role: "listbox", className: "sph-select__listbox", children: options.map((option, index) => /* @__PURE__ */ jsxs11(
-      "button",
-      {
-        id: `${listboxId}-${index}`,
-        type: "button",
-        role: "option",
-        "aria-selected": index === selectedIndex,
-        disabled: option.disabled,
-        className: "sph-select__option",
-        "data-active": index === activeIndex || void 0,
-        onPointerMove: () => !option.disabled && setActiveIndex(index),
-        onClick: () => choose(index),
-        children: [
-          /* @__PURE__ */ jsx21("span", { children: node(option.label) }),
-          index === selectedIndex && /* @__PURE__ */ jsx21(CheckIcon3, { className: "sph-select__check", "aria-hidden": "true" })
-        ]
-      },
-      option.value
-    )) })
+    present && portaled && createPortal5(
+      /* @__PURE__ */ jsx31(
+        "div",
+        {
+          id: listboxId,
+          ref: listboxRef,
+          role: "listbox",
+          className: "sph-select__listbox",
+          "data-state": state,
+          children: options.map((option, index) => /* @__PURE__ */ jsxs18(
+            "button",
+            {
+              id: `${listboxId}-${index}`,
+              type: "button",
+              role: "option",
+              "aria-selected": index === selectedIndex,
+              disabled: option.disabled,
+              className: "sph-select__option",
+              "data-active": index === activeIndex || void 0,
+              onPointerMove: () => !option.disabled && setActiveIndex(index),
+              onClick: () => choose(index),
+              children: [
+                /* @__PURE__ */ jsx31("span", { children: node(option.label) }),
+                index === selectedIndex && /* @__PURE__ */ jsx31(CheckIcon4, { className: "sph-select__check", "aria-hidden": "true" })
+              ]
+            },
+            option.value
+          ))
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
 // src/molecules/Tabs/index.tsx
-import { cn as cn22 } from "cn";
-import { useId as useId8, useState as useState4 } from "react";
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { cn as cn31 } from "cn";
+import { useId as useId12, useState as useState11 } from "react";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function firstEnabled(items) {
   return items.find((item) => !item.disabled)?.value;
 }
@@ -1007,8 +2194,8 @@ function Tabs({
   orientation = "horizontal",
   className
 }) {
-  const generatedId = useId8();
-  const [uncontrolledValue, setUncontrolledValue] = useState4(
+  const generatedId = useId12();
+  const [uncontrolledValue, setUncontrolledValue] = useState11(
     defaultValue ?? firstEnabled(items) ?? ""
   );
   const activeValue = value ?? uncontrolledValue;
@@ -1036,8 +2223,8 @@ function Tabs({
     }
   };
   const panelId = `${generatedId}-panel`;
-  return /* @__PURE__ */ jsxs12("div", { className: cn22("sph-tabs", className), "data-orientation": orientation, children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs19("div", { className: cn31("sph-tabs", className), "data-orientation": orientation, children: [
+    /* @__PURE__ */ jsx32(
       "div",
       {
         className: "sph-tabs__list",
@@ -1046,7 +2233,7 @@ function Tabs({
         "aria-orientation": orientation,
         children: items.map((item, index) => {
           const selected = item.value === activeValue;
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx32(
             "button",
             {
               id: `${generatedId}-${index}`,
@@ -1067,7 +2254,7 @@ function Tabs({
         })
       }
     ),
-    activeItem && (activeItem.content !== void 0 || children !== void 0) && /* @__PURE__ */ jsx22(
+    activeItem && (activeItem.content !== void 0 || children !== void 0) && /* @__PURE__ */ jsx32(
       "div",
       {
         id: panelId,
@@ -1075,25 +2262,26 @@ function Tabs({
         role: "tabpanel",
         "aria-labelledby": `${generatedId}-${activeIndex}`,
         children: node(activeItem.content ?? children)
-      }
+      },
+      activeItem.content !== void 0 ? activeValue : "static"
     )
   ] });
 }
 
 // src/molecules/Toast/index.tsx
-import { CheckIcon as CheckIcon4, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
-import { cn as cn23 } from "cn";
-import { useEffect as useEffect5 } from "react";
+import { CheckIcon as CheckIcon5, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon5 } from "@phosphor-icons/react";
+import { cn as cn32 } from "cn";
+import { useEffect as useEffect12 } from "react";
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var toastIcons = {
-  success: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(CheckIcon4, { size: 20 }) }),
-  info: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(InfoIcon2, { size: 20 }) }),
-  warning: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(WarningIcon2, { size: 20 }) }),
-  error: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(XIcon3, { size: 20 }) })
+  success: /* @__PURE__ */ jsx33("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx33(CheckIcon5, { size: 20 }) }),
+  info: /* @__PURE__ */ jsx33("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx33(InfoIcon2, { size: 20 }) }),
+  warning: /* @__PURE__ */ jsx33("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx33(WarningIcon2, { size: 20 }) }),
+  error: /* @__PURE__ */ jsx33("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx33(XIcon5, { size: 20 }) })
 };
 function Toast({
   open = true,
@@ -1106,7 +2294,7 @@ function Toast({
   closeButton = true,
   className
 }) {
-  useEffect5(() => {
+  useEffect12(() => {
     if (!open) return;
     const options = {
       id,
@@ -1114,7 +2302,7 @@ function Toast({
       closeButton,
       description: node(description),
       duration,
-      className: cn23("sph-toast", className),
+      className: cn32("sph-toast", className),
       unstyled: true
     };
     const toastId = variant === "success" ? toast.success(node(title), options) : variant === "warning" ? toast.warning(node(title), options) : variant === "danger" ? toast.error(node(title), options) : toast(node(title), options);
@@ -1134,7 +2322,7 @@ function ToastViewport({
   expand = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx33(
     SonnerToaster,
     {
       ...node(props),
@@ -1144,12 +2332,12 @@ function ToastViewport({
       icons: toastIcons,
       containerAriaLabel: label,
       expand,
-      className: cn23("sph-toast-viewport", className),
+      className: cn32("sph-toast-viewport", className),
       toastOptions: {
         ...toastOptions,
         closeButton: toastOptions?.closeButton ?? closeButton,
         closeButtonAriaLabel: toastOptions?.closeButtonAriaLabel ?? "Dismiss notification",
-        className: cn23("sph-toast", toastOptions?.className),
+        className: cn32("sph-toast", toastOptions?.className),
         unstyled: true
       }
     }
@@ -1157,8 +2345,8 @@ function ToastViewport({
 }
 
 // src/molecules/Toolbar/index.tsx
-import { cn as cn24 } from "cn";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { cn as cn33 } from "cn";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function Toolbar({
   label = "Toolbar",
   orientation = "horizontal",
@@ -1169,29 +2357,30 @@ function Toolbar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       ...node(props),
-      className: cn24("sph-toolbar", className),
+      className: cn33("sph-toolbar", className),
       "data-orientation": orientation,
       "data-size": size,
       role: "toolbar",
       "aria-label": label,
       "aria-orientation": orientation,
       children: [
-        start !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__start", children: node(start) }),
-        children !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__content", children: node(children) }),
-        end !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__end", children: node(end) })
+        start !== void 0 && /* @__PURE__ */ jsx34("div", { className: "sph-toolbar__start", children: node(start) }),
+        children !== void 0 && /* @__PURE__ */ jsx34("div", { className: "sph-toolbar__content", children: node(children) }),
+        end !== void 0 && /* @__PURE__ */ jsx34("div", { className: "sph-toolbar__end", children: node(end) })
       ]
     }
   );
 }
 
 // src/molecules/Tooltip/index.tsx
-import { cn as cn25 } from "cn";
-import { useId as useId9, useRef as useRef5, useState as useState5 } from "react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { cn as cn34 } from "cn";
+import { useId as useId13, useRef as useRef9, useState as useState12 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 function Tooltip({
   content,
   children,
@@ -1200,9 +2389,21 @@ function Tooltip({
   disabled = false,
   className
 }) {
-  const id = useId9();
-  const timerRef = useRef5(void 0);
-  const [visible, setVisible] = useState5(false);
+  const id = useId13();
+  const timerRef = useRef9(void 0);
+  const triggerRef = useRef9(null);
+  const [visible, setVisible] = useState12(false);
+  const {
+    present,
+    state,
+    ref: contentRef
+  } = usePresence(visible, "fast");
+  const portaled = usePortaled();
+  useOverlayPosition(triggerRef, contentRef, present && portaled, {
+    side,
+    align: "center",
+    offset: 6
+  });
   const show = () => {
     if (disabled) return;
     timerRef.current = setTimeout(() => setVisible(true), delay);
@@ -1211,45 +2412,522 @@ function Tooltip({
     if (timerRef.current) clearTimeout(timerRef.current);
     setVisible(false);
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs21(
     "span",
     {
-      className: cn25("sph-tooltip", className),
+      className: cn34("sph-tooltip", className),
       onMouseEnter: show,
       onMouseLeave: hide,
       onFocus: show,
       onBlur: hide,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx35(
           "span",
           {
+            ref: triggerRef,
             className: "sph-tooltip__trigger",
             "aria-describedby": visible ? id : void 0,
             children: node(children)
           }
         ),
-        /* @__PURE__ */ jsx25(
-          "span",
-          {
-            id,
-            className: "sph-tooltip__content",
-            "data-side": side,
-            "data-visible": visible || void 0,
-            role: "tooltip",
-            hidden: !visible,
-            children: node(content)
-          }
+        present && portaled && createPortal6(
+          /* @__PURE__ */ jsx35(
+            "span",
+            {
+              id,
+              ref: contentRef,
+              className: "sph-tooltip__content",
+              "data-side": side,
+              "data-state": state,
+              role: "tooltip",
+              children: node(content)
+            }
+          ),
+          document.body
         )
       ]
     }
   );
 }
 
+// src/organisms/CommandPalette/index.tsx
+import { CaretRightIcon as CaretRightIcon2, MagnifyingGlassIcon as MagnifyingGlassIcon2 } from "@phosphor-icons/react";
+import { cn as cn35 } from "cn";
+import { useEffect as useEffect13, useId as useId14, useMemo as useMemo2, useRef as useRef10, useState as useState13 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+function replay(element, className) {
+  if (!element) return;
+  element.classList.remove(className);
+  void element.offsetWidth;
+  element.classList.add(className);
+}
+function readableLabel2(item) {
+  return typeof item.label === "string" ? item.label : "";
+}
+function crumbLabel(item, fallback) {
+  const label = readableLabel2(item);
+  if (label) return label;
+  if (typeof item.value === "string" && item.value) return item.value;
+  return fallback;
+}
+function resolveActive2(options, wanted) {
+  if (options.length === 0) return -1;
+  const start = Math.min(Math.max(wanted, 0), options.length - 1);
+  const enabled = (index) => !options[index]?.item.disabled;
+  if (enabled(start)) return start;
+  for (let index = start + 1; index < options.length; index += 1)
+    if (enabled(index)) return index;
+  for (let index = 0; index < start; index += 1)
+    if (enabled(index)) return index;
+  return start;
+}
+function CommandPalette({
+  open,
+  onOpenChange,
+  items,
+  onSelect,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results.",
+  homeLabel = "Home",
+  ariaLabel = "Command palette",
+  hotkey = false,
+  className
+}) {
+  const listId = useId14();
+  const rootRef = useRef10(null);
+  const panelRef = useRef10(null);
+  const bodyRef = useRef10(null);
+  const innerRef = useRef10(null);
+  const trackRef = useRef10(null);
+  const indicatorRef = useRef10(null);
+  const inputRef = useRef10(null);
+  const previousPathLength = useRef10(null);
+  const heightCleanup = useRef10(null);
+  const [path, setPath] = useState13([]);
+  const [query, setQuery] = useState13("");
+  const [activeState, setActive] = useState13(0);
+  const {
+    present,
+    state,
+    ref: backdropRef
+  } = usePresence(open, "normal");
+  const portaled = usePortaled();
+  const visible = present && portaled;
+  useFocusTrap(rootRef, visible, inputRef);
+  const levelItems = path.length > 0 ? path[path.length - 1]?.children ?? [] : items;
+  const { sections, options } = useMemo2(() => {
+    const read = (item) => ({
+      label: readableLabel2(item),
+      keywords: [
+        item.keywords ?? "",
+        ...(item.children ?? []).map((child) => readableLabel2(child))
+      ].filter(Boolean).join(" ")
+    });
+    const filtered = filterItems(levelItems, query, read);
+    const ungrouped = filtered.filter(
+      (entry) => entry.item.group === void 0
+    );
+    const groupNames = [
+      ...new Set(
+        filtered.map((entry) => entry.item.group).filter((name) => name !== void 0)
+      )
+    ];
+    const grouped = groupNames.map((name) => ({
+      heading: name,
+      entries: filtered.filter((entry) => entry.item.group === name)
+    }));
+    const raw = [
+      ...ungrouped.length > 0 ? [{ heading: void 0, entries: ungrouped }] : [],
+      ...grouped
+    ];
+    let order = 0;
+    const built = raw.map((section) => ({
+      heading: section.heading,
+      entries: section.entries.map((entry) => ({
+        item: entry.item,
+        indexes: entry.indexes,
+        activeId: `${listId}-option-${order}`,
+        index: order++
+      }))
+    }));
+    return { sections: built, options: built.flatMap((s) => s.entries) };
+  }, [levelItems, listId, query]);
+  const active = resolveActive2(options, activeState);
+  const close = () => onOpenChange(false);
+  const back = () => {
+    if (query) setQuery("");
+    else if (path.length > 0) setPath(path.slice(0, -1));
+    else close();
+  };
+  const activate = (index) => {
+    const item = options[index]?.item;
+    if (!item || item.disabled) return;
+    if (item.children && item.children.length > 0) {
+      setPath([...path, item]);
+      setQuery("");
+      return;
+    }
+    onSelect?.(item);
+    close();
+  };
+  const move = (direction) => {
+    if (options.length === 0) return;
+    let index = active < 0 ? 0 : active;
+    for (let step = 0; step < options.length; step += 1) {
+      index = (index + direction + options.length) % options.length;
+      if (!options[index]?.item.disabled) {
+        setActive(index);
+        return;
+      }
+    }
+  };
+  const goToLevel = (length) => {
+    setPath(path.slice(0, length));
+    setQuery("");
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setActive(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setActive(options.length - 1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      if (active >= 0) activate(active);
+    }
+  };
+  useEffect13(() => {
+    if (!open) {
+      setPath([]);
+      setQuery("");
+      setActive(0);
+    }
+  }, [open]);
+  useEffect13(() => {
+    inputRef.current?.setAttribute("spellcheck", "false");
+  }, [visible]);
+  useEffect13(() => {
+    setActive(0);
+  }, [path, query]);
+  useEffect13(() => {
+    if (!hotkey) return;
+    const handleHotkey = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    document.addEventListener("keydown", handleHotkey);
+    return () => document.removeEventListener("keydown", handleHotkey);
+  }, [hotkey, onOpenChange, open]);
+  useEffect13(() => {
+    if (!visible) return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      if (query) setQuery("");
+      else if (path.length > 0) setPath(path.slice(0, -1));
+      else close();
+    };
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target)) close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [onOpenChange, path, query, visible]);
+  useEffect13(() => {
+    if (!visible || active < 0) return;
+    const option = trackRef.current?.querySelector(
+      '[data-active="true"]'
+    );
+    option?.scrollIntoView({ block: "nearest" });
+  }, [active, visible]);
+  useIsoLayoutEffect(() => {
+    const indicator = indicatorRef.current;
+    const track = trackRef.current;
+    if (!visible || !indicator || !track || active < 0) return;
+    const option = track.querySelector(`[data-index="${active}"]`);
+    if (!option) return;
+    const trackRect = track.getBoundingClientRect();
+    const optionRect = option.getBoundingClientRect();
+    const first = !indicator.style.width;
+    if (first) indicator.style.transition = "none";
+    indicator.style.opacity = "1";
+    indicator.style.width = `${optionRect.width}px`;
+    indicator.style.height = `${optionRect.height}px`;
+    indicator.style.transform = `translate(${optionRect.left - trackRect.left}px, ${optionRect.top - trackRect.top}px)`;
+    if (first)
+      requestAnimationFrame(() => {
+        indicator.style.transition = "";
+      });
+  }, [active, options, present, portaled]);
+  useIsoLayoutEffect(() => {
+    const body = bodyRef.current;
+    const inner = innerRef.current;
+    if (!visible || !body || !inner) return;
+    heightCleanup.current?.();
+    heightCleanup.current = null;
+    const duration = motionDurationMs(body, "fast");
+    if (duration <= 0) {
+      body.style.height = "";
+      return;
+    }
+    const current = body.style.height ? Number.parseFloat(body.style.height) : body.getBoundingClientRect().height;
+    if (!body.style.height) {
+      body.style.height = `${current}px`;
+      return;
+    }
+    const target = inner.getBoundingClientRect().height;
+    if (Math.abs(current - target) < 1) {
+      body.style.height = `${target}px`;
+      return;
+    }
+    body.style.transition = "none";
+    body.style.height = `${current}px`;
+    void body.offsetHeight;
+    body.style.transition = `height ${duration}ms var(--sph-ease-standard)`;
+    body.style.height = `${target}px`;
+    const settle = () => {
+      body.style.transition = "";
+      heightCleanup.current = null;
+    };
+    body.addEventListener("transitionend", settle, { once: true });
+    heightCleanup.current = () => body.removeEventListener("transitionend", settle);
+  }, [path, present, portaled, query, visible]);
+  useIsoLayoutEffect(() => {
+    if (!visible) {
+      previousPathLength.current = null;
+      return;
+    }
+    const previous = previousPathLength.current;
+    previousPathLength.current = path.length;
+    if (previous === null || previous === path.length) return;
+    replay(panelRef.current, "sph-level-pulse");
+    replay(trackRef.current, "sph-level-fade");
+  }, [path, visible]);
+  if (!visible) return null;
+  return createPortal7(
+    /* @__PURE__ */ jsx36(
+      "div",
+      {
+        ref: backdropRef,
+        className: "sph-palette__backdrop",
+        "data-state": state,
+        role: "presentation",
+        children: /* @__PURE__ */ jsx36(
+          "section",
+          {
+            ref: rootRef,
+            className: cn35("sph-palette", className),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            children: /* @__PURE__ */ jsxs22("div", { ref: panelRef, className: "sph-palette__panel", children: [
+              /* @__PURE__ */ jsxs22("nav", { className: "sph-palette__crumbs", "aria-label": "Breadcrumb", children: [
+                " ",
+                /* @__PURE__ */ jsx36(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sph-palette__crumb sph-motion-in sph-motion-in--blur",
+                    "data-current": path.length === 0 || void 0,
+                    onClick: () => goToLevel(0),
+                    children: homeLabel
+                  }
+                ),
+                path.flatMap((entry, index) => [
+                  /* @__PURE__ */ jsx36(
+                    "span",
+                    {
+                      className: "sph-palette__crumb-sep",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx36(CaretRightIcon2, { size: 11, weight: "bold" })
+                    },
+                    `sep-${index}`
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sph-palette__crumb sph-motion-in sph-motion-in--blur",
+                      "data-current": index === path.length - 1 || void 0,
+                      onClick: () => goToLevel(index + 1),
+                      children: crumbLabel(entry, homeLabel)
+                    },
+                    `crumb-${index}`
+                  )
+                ])
+              ] }),
+              /* @__PURE__ */ jsxs22("div", { className: "sph-palette__search", children: [
+                /* @__PURE__ */ jsx36(
+                  MagnifyingGlassIcon2,
+                  {
+                    className: "sph-palette__search-icon",
+                    size: 15,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx36(
+                  "input",
+                  {
+                    ref: inputRef,
+                    className: "sph-palette__input",
+                    type: "text",
+                    role: "combobox",
+                    "aria-expanded": true,
+                    "aria-controls": listId,
+                    "aria-activedescendant": active >= 0 ? options[active]?.activeId : void 0,
+                    "aria-autocomplete": "list",
+                    "aria-label": ariaLabel,
+                    placeholder,
+                    value: query,
+                    autoComplete: "off",
+                    onChange: (event) => setQuery(event.currentTarget.value),
+                    onKeyDown: handleInputKeyDown
+                  }
+                ),
+                /* @__PURE__ */ jsx36(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sph-kbd sph-palette__escape",
+                    "aria-label": "Close command palette",
+                    onClick: close,
+                    children: /* @__PURE__ */ jsx36("span", { className: "sph-kbd__key", children: "Esc" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx36("div", { className: "sph-palette__body", ref: bodyRef, children: /* @__PURE__ */ jsx36(
+                "div",
+                {
+                  className: "sph-palette__list",
+                  ref: innerRef,
+                  id: listId,
+                  role: "listbox",
+                  "aria-label": ariaLabel,
+                  children: /* @__PURE__ */ jsxs22("div", { className: "sph-palette__track", ref: trackRef, children: [
+                    /* @__PURE__ */ jsx36(
+                      "span",
+                      {
+                        className: "sph-palette__indicator",
+                        ref: indicatorRef,
+                        role: "presentation"
+                      }
+                    ),
+                    options.length === 0 && /* @__PURE__ */ jsx36("div", { className: "sph-palette__empty", role: "status", children: node(emptyMessage) }),
+                    sections.map((section) => /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "sph-palette__group",
+                        role: "group",
+                        "aria-labelledby": section.heading !== void 0 ? `${listId}-group-${section.heading}` : void 0,
+                        children: [
+                          section.heading !== void 0 && /* @__PURE__ */ jsx36(
+                            "div",
+                            {
+                              className: "sph-palette__heading",
+                              id: `${listId}-group-${section.heading}`,
+                              children: section.heading
+                            }
+                          ),
+                          section.entries.map((option) => {
+                            const item = option.item;
+                            const index = option.index;
+                            return /* @__PURE__ */ jsxs22(
+                              "div",
+                              {
+                                id: option.activeId,
+                                className: "sph-palette__option",
+                                role: "option",
+                                "data-index": index,
+                                "data-active": index === active ? "true" : void 0,
+                                "data-disabled": item.disabled || void 0,
+                                "aria-selected": index === active,
+                                "aria-disabled": item.disabled || void 0,
+                                onPointerEnter: () => {
+                                  if (!item.disabled) setActive(index);
+                                },
+                                onPointerDown: (event) => event.preventDefault(),
+                                onClick: () => activate(index),
+                                children: [
+                                  item.icon !== void 0 && /* @__PURE__ */ jsx36(
+                                    "span",
+                                    {
+                                      className: "sph-palette__icon",
+                                      "aria-hidden": "true",
+                                      children: node(item.icon)
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx36("span", { className: "sph-palette__label", children: typeof item.label === "string" ? /* @__PURE__ */ jsx36(
+                                    Highlight,
+                                    {
+                                      text: item.label,
+                                      indexes: option.indexes
+                                    }
+                                  ) : node(item.label) }),
+                                  item.badge !== void 0 && /* @__PURE__ */ jsx36("span", { className: "sph-palette__badge", children: node(item.badge) }),
+                                  item.children && item.children.length > 0 ? /* @__PURE__ */ jsx36(
+                                    "span",
+                                    {
+                                      className: "sph-palette__more",
+                                      "aria-hidden": "true",
+                                      children: /* @__PURE__ */ jsx36(CaretRightIcon2, { size: 13, weight: "bold" })
+                                    }
+                                  ) : item.hint !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "sph-palette__hint", children: node(item.hint) }) : item.shortcut !== void 0 && /* @__PURE__ */ jsx36(Kbd, { keys: item.shortcut })
+                                ]
+                              },
+                              item.id ?? `${readableLabel2(item)}-${index}`
+                            );
+                          })
+                        ]
+                      },
+                      section.heading ?? "section-root"
+                    ))
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs22("footer", { className: "sph-palette__footer", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsxs22("span", { className: "sph-palette__hintrow", children: [
+                  /* @__PURE__ */ jsx36(Kbd, { keys: "\u2191" }),
+                  /* @__PURE__ */ jsx36(Kbd, { keys: "\u2193" }),
+                  "navigate"
+                ] }),
+                /* @__PURE__ */ jsxs22("span", { className: "sph-palette__hintrow", children: [
+                  /* @__PURE__ */ jsx36(Kbd, { keys: "\u21B5" }),
+                  "select"
+                ] }),
+                /* @__PURE__ */ jsxs22("span", { className: "sph-palette__hintrow", children: [
+                  /* @__PURE__ */ jsx36(Kbd, { keys: "esc" }),
+                  path.length > 0 || query ? "back" : "close"
+                ] })
+              ] })
+            ] })
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
 // src/organisms/EmptyState/index.tsx
 import { TrayIcon } from "@phosphor-icons/react";
-import { cn as cn26 } from "cn";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
-var emptyStateDefaultIcon = /* @__PURE__ */ jsx26(TrayIcon, { size: 20 });
+import { cn as cn36 } from "cn";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+var emptyStateDefaultIcon = /* @__PURE__ */ jsx37(TrayIcon, { size: 20 });
 function EmptyState({
   title,
   description,
@@ -1259,25 +2937,429 @@ function EmptyState({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs23(
     "section",
     {
       ...node(props),
-      className: cn26("sph-empty-state", className),
+      className: cn36("sph-empty-state", className),
       "data-compact": compact || void 0,
       children: [
-        /* @__PURE__ */ jsx26("div", { className: "sph-empty-state__icon", "aria-hidden": "true", children: node(icon) }),
-        /* @__PURE__ */ jsx26("h2", { className: "sph-empty-state__title", children: node(title) }),
-        description !== void 0 && /* @__PURE__ */ jsx26("p", { className: "sph-empty-state__description", children: node(description) }),
-        action !== void 0 && /* @__PURE__ */ jsx26("div", { className: "sph-empty-state__action", children: node(action) })
+        /* @__PURE__ */ jsx37("div", { className: "sph-empty-state__icon", "aria-hidden": "true", children: node(icon) }),
+        /* @__PURE__ */ jsx37("h2", { className: "sph-empty-state__title", children: node(title) }),
+        description !== void 0 && /* @__PURE__ */ jsx37("p", { className: "sph-empty-state__description", children: node(description) }),
+        action !== void 0 && /* @__PURE__ */ jsx37("div", { className: "sph-empty-state__action", children: node(action) })
+      ]
+    }
+  );
+}
+
+// src/organisms/MagneticDropzone/index.tsx
+import { cn as cn37 } from "cn";
+import { useRef as useRef11, useState as useState14 } from "react";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+function MagneticDropzone({
+  children,
+  activeContent,
+  onFiles,
+  accept,
+  multiple = true,
+  disabled = false,
+  className,
+  ...props
+}) {
+  const zoneRef = useRef11(null);
+  const inputRef = useRef11(null);
+  const [dragging, setDragging] = useState14(false);
+  const pull = (event) => {
+    const zone = zoneRef.current;
+    if (!zone) return;
+    const rect = zone.getBoundingClientRect();
+    const x = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
+    const y = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
+    zone.style.setProperty("--sph-pull-x", `${(x * 10).toFixed(1)}px`);
+    zone.style.setProperty("--sph-pull-y", `${(y * 8).toFixed(1)}px`);
+  };
+  const reset = () => {
+    const zone = zoneRef.current;
+    if (!zone) return;
+    zone.style.setProperty("--sph-pull-x", "0px");
+    zone.style.setProperty("--sph-pull-y", "0px");
+  };
+  const handleDragOver = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    if (!dragging) setDragging(true);
+    pull(event);
+  };
+  const handleDragLeave = (event) => {
+    const next = event.relatedTarget;
+    if (next && zoneRef.current?.contains(next)) return;
+    setDragging(false);
+    reset();
+  };
+  const handleDrop = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setDragging(false);
+    reset();
+    const files = Array.from(event.dataTransfer?.files ?? []);
+    if (files.length > 0) onFiles?.(multiple ? files : files.slice(0, 1));
+  };
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      ...node(props),
+      ref: zoneRef,
+      className: cn37("sph-dropzone", className),
+      "data-active": dragging || void 0,
+      "data-disabled": disabled || void 0,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: openPicker,
+      children: [
+        /* @__PURE__ */ jsx38("div", { className: "sph-dropzone__content", children: node(
+          dragging && activeContent !== void 0 ? activeContent : children
+        ) }),
+        /* @__PURE__ */ jsx38(
+          "input",
+          {
+            ref: inputRef,
+            className: "sph-dropzone__input",
+            type: "file",
+            accept,
+            multiple,
+            "aria-hidden": "true",
+            tabIndex: -1,
+            disabled,
+            onChange: (event) => {
+              const files = Array.from(event.currentTarget.files ?? []);
+              if (files.length > 0) onFiles?.(multiple ? files : files.slice(0, 1));
+              event.currentTarget.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/organisms/ReasoningSteps/index.tsx
+import { cn as cn38 } from "cn";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+function ReasoningSteps({
+  steps,
+  label = "Reasoning",
+  open,
+  defaultOpen = true,
+  onOpenChange,
+  className
+}) {
+  const activeCount = steps.filter((step) => step.status === "active").length;
+  return /* @__PURE__ */ jsx39("div", { className: cn38("sph-reasoning", className), children: /* @__PURE__ */ jsx39(
+    Collapsible,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      trigger: /* @__PURE__ */ jsxs25("span", { className: "sph-reasoning__trigger", children: [
+        /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__label", children: node(label) }),
+        /* @__PURE__ */ jsxs25("span", { className: "sph-reasoning__meta", children: [
+          activeCount > 0 && /* @__PURE__ */ jsxs25("span", { className: "sph-typing", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx39("i", {}),
+            /* @__PURE__ */ jsx39("i", {}),
+            /* @__PURE__ */ jsx39("i", {})
+          ] }),
+          /* @__PURE__ */ jsxs25("span", { className: "sph-reasoning__count", children: [
+            steps.length,
+            " ",
+            steps.length === 1 ? "step" : "steps"
+          ] })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsx39("ol", { className: "sph-reasoning__list", children: steps.map((step, index) => /* @__PURE__ */ jsxs25(
+        "li",
+        {
+          className: "sph-reasoning__step",
+          "data-status": step.status ?? "done",
+          style: { animationDelay: `${index * 26}ms` },
+          children: [
+            /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__marker", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__dot" }) }),
+            /* @__PURE__ */ jsxs25("span", { className: "sph-reasoning__body", children: [
+              /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__title", children: node(step.title) }),
+              step.detail !== void 0 && /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__detail", children: node(step.detail) })
+            ] }),
+            /* @__PURE__ */ jsx39("span", { className: "sph-reasoning__status", children: step.status === "active" ? "thinking" : step.status === "pending" ? "queued" : "done" })
+          ]
+        },
+        step.id ?? index
+      )) })
+    }
+  ) });
+}
+
+// src/organisms/Resizable/index.tsx
+import { cn as cn39 } from "cn";
+import { useMemo as useMemo3, useRef as useRef12, useState as useState15 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+function clamp2(value, low, high) {
+  return Math.min(Math.max(value, low), high);
+}
+function Resizable({
+  panes,
+  direction = "horizontal",
+  sizes,
+  defaultSizes,
+  onSizesChange,
+  min = 10,
+  handleLabel = "Resize panels",
+  className,
+  ...props
+}) {
+  const rootRef = useRef12(null);
+  const [uncontrolled, setUncontrolled] = useState15(
+    () => defaultSizes ?? []
+  );
+  const [dragIndex, setDragIndex] = useState15(null);
+  const drag = useRef12(null);
+  const even = useMemo3(
+    () => panes.map(() => 100 / Math.max(panes.length, 1)),
+    [panes.length]
+  );
+  const candidate = sizes ?? uncontrolled;
+  const active = candidate.length === panes.length && panes.length > 0 ? candidate : even;
+  const commit = (next) => {
+    setUncontrolled(next);
+    onSizesChange?.(next);
+  };
+  const startDrag = (event, index) => {
+    if (event.button !== 0) return;
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = {
+      index,
+      pointer: { x: event.clientX, y: event.clientY },
+      sizes: [...active],
+      extent: direction === "horizontal" ? rect.width : rect.height
+    };
+    setDragIndex(index);
+  };
+  const moveDrag = (event) => {
+    const state = drag.current;
+    if (!state || state.extent <= 0) return;
+    const position = direction === "horizontal" ? event.clientX : event.clientY;
+    const origin = direction === "horizontal" ? state.pointer.x : state.pointer.y;
+    const delta = (position - origin) / state.extent * 100;
+    const next = [...state.sizes];
+    const before = next[state.index] ?? 0;
+    const after = next[state.index + 1] ?? 0;
+    const span = before + after;
+    const moved = clamp2(before + delta, min, span - min);
+    next[state.index] = moved;
+    next[state.index + 1] = span - moved;
+    commit(next);
+  };
+  const endDrag = (event) => {
+    if (drag.current === null) return;
+    drag.current = null;
+    setDragIndex(null);
+    if (event.pointerId !== void 0) {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+  };
+  const handleKeyDown = (event, index) => {
+    const step = (event.shiftKey ? 10 : 2) * (direction === "horizontal" ? event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0 : event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0);
+    if (step === 0) return;
+    event.preventDefault();
+    const next = [...active];
+    const before = next[index] ?? 0;
+    const after = next[index + 1] ?? 0;
+    const span = before + after;
+    const moved = clamp2(before + step, min, span - min);
+    next[index] = moved;
+    next[index + 1] = span - moved;
+    commit(next);
+  };
+  return /* @__PURE__ */ jsx40(
+    "div",
+    {
+      ...node(props),
+      ref: rootRef,
+      className: cn39("sph-resizable", className),
+      "data-direction": direction,
+      children: panes.flatMap((pane, index) => {
+        const items = [
+          /* @__PURE__ */ jsx40(
+            "div",
+            {
+              className: "sph-resizable__pane",
+              style: {
+                flexGrow: active[index] ?? even[index] ?? 1,
+                flexBasis: 0,
+                minWidth: 0,
+                minHeight: 0
+              },
+              children: node(pane)
+            },
+            `pane-${index}`
+          )
+        ];
+        if (index < panes.length - 1) {
+          items.push(
+            /* @__PURE__ */ jsx40(
+              "div",
+              {
+                role: "separator",
+                tabIndex: 0,
+                "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+                "aria-valuenow": Math.round(active[index] ?? 0),
+                "aria-label": handleLabel,
+                className: "sph-resizable__handle",
+                "data-dragging": dragIndex === index || void 0,
+                onPointerDown: (event) => startDrag(event, index),
+                onPointerMove: moveDrag,
+                onPointerUp: endDrag,
+                onPointerCancel: endDrag,
+                onKeyDown: (event) => handleKeyDown(event, index)
+              },
+              `handle-${index}`
+            )
+          );
+        }
+        return items;
+      })
+    }
+  );
+}
+
+// src/organisms/Sidebar/index.tsx
+import { cn as cn40 } from "cn";
+import { useId as useId15, useState as useState16 } from "react";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+function Sidebar({
+  sections,
+  value,
+  defaultValue,
+  onSelect,
+  header,
+  footer,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  ariaLabel = "Primary",
+  className,
+  ...props
+}) {
+  const listId = useId15();
+  const [uncontrolled, setUncontrolled] = useState16(defaultCollapsed);
+  const isCollapsed = collapsed ?? uncontrolled;
+  const active = value ?? defaultValue;
+  const toggleCollapsed = () => {
+    const next = !isCollapsed;
+    setUncontrolled(next);
+    onCollapsedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs26(
+    "aside",
+    {
+      ...node(props),
+      className: cn40("sph-sidebar", className),
+      "data-collapsed": isCollapsed || void 0,
+      children: [
+        header !== void 0 && /* @__PURE__ */ jsx41("div", { className: "sph-sidebar__header", children: node(header) }),
+        /* @__PURE__ */ jsxs26("nav", { className: "sph-sidebar__nav", "aria-label": ariaLabel, children: [
+          sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs26(
+            "div",
+            {
+              className: "sph-sidebar__section",
+              children: [
+                section.title !== void 0 && /* @__PURE__ */ jsx41("div", { className: "sph-sidebar__section-title", "aria-hidden": "true", children: section.title }),
+                section.items.map((item) => {
+                  const isActive = item.value === active;
+                  return /* @__PURE__ */ jsxs26(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sph-sidebar__item",
+                      "data-active": isActive || void 0,
+                      "aria-current": isActive ? "page" : void 0,
+                      disabled: item.disabled,
+                      title: isCollapsed && typeof item.label === "string" ? item.label : void 0,
+                      onClick: () => onSelect?.(item.value),
+                      children: [
+                        item.icon !== void 0 && /* @__PURE__ */ jsx41("span", { className: "sph-sidebar__icon", "aria-hidden": "true", children: node(item.icon) }),
+                        /* @__PURE__ */ jsx41("span", { className: "sph-sidebar__label", children: node(item.label) }),
+                        item.badge !== void 0 && /* @__PURE__ */ jsx41("span", { className: "sph-sidebar__badge", children: node(item.badge) })
+                      ]
+                    },
+                    item.value
+                  );
+                })
+              ]
+            },
+            section.title ?? `section-${sectionIndex}`
+          )),
+          /* @__PURE__ */ jsx41("span", { id: `${listId}-hint`, className: "sph-visually-hidden", children: isCollapsed ? "Sidebar collapsed" : "Sidebar expanded" })
+        ] }),
+        (footer !== void 0 || collapsible) && /* @__PURE__ */ jsxs26("div", { className: "sph-sidebar__footer", children: [
+          footer !== void 0 && /* @__PURE__ */ jsx41("div", { className: "sph-sidebar__footer-content", children: node(footer) }),
+          collapsible && /* @__PURE__ */ jsx41(
+            "button",
+            {
+              type: "button",
+              className: "sph-sidebar__toggle",
+              "aria-expanded": !isCollapsed,
+              "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+              onClick: toggleCollapsed,
+              children: /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", children: isCollapsed ? "\xBB" : "\xAB" })
+            }
+          )
+        ] })
       ]
     }
   );
 }
 
+// src/organisms/StreamingText/index.tsx
+import { cn as cn41 } from "cn";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function StreamingText({
+  text,
+  speed = 30,
+  animated = true,
+  className,
+  ...props
+}) {
+  const tokens = text.split(/(\s+)/);
+  let wordIndex = -1;
+  return /* @__PURE__ */ jsx42("div", { ...node(props), className: cn41("sph-stream", className), children: tokens.map((token, index) => {
+    if (token.trim().length === 0) return token;
+    wordIndex += 1;
+    const delay = animated ? wordIndex * speed : 0;
+    return /* @__PURE__ */ jsx42(
+      "span",
+      {
+        className: "sph-stream__word",
+        "data-animated": animated || void 0,
+        style: { animationDelay: `${delay}ms` },
+        children: token
+      },
+      index
+    );
+  }) });
+}
+
 // src/organisms/Table/index.tsx
-import { cn as cn27 } from "cn";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { cn as cn42 } from "cn";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 function Table({
   columns,
   rows,
@@ -1290,7 +3372,7 @@ function Table({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn27("sph-table-wrap", className), children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx43("div", { className: cn42("sph-table-wrap", className), children: /* @__PURE__ */ jsxs27(
     "table",
     {
       ...node(props),
@@ -1299,8 +3381,8 @@ function Table({
       "data-striped": striped || void 0,
       "data-sticky-header": stickyHeader || void 0,
       children: [
-        caption !== void 0 && /* @__PURE__ */ jsx27("caption", { children: node(caption) }),
-        /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsx27("tr", { children: columns.map((column) => /* @__PURE__ */ jsx27(
+        caption !== void 0 && /* @__PURE__ */ jsx43("caption", { children: node(caption) }),
+        /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43(
           "th",
           {
             scope: "col",
@@ -1310,7 +3392,7 @@ function Table({
           },
           column.key
         )) }) }),
-        /* @__PURE__ */ jsx27("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx27("tr", { children: /* @__PURE__ */ jsx27("td", { className: "sph-table__empty", colSpan: columns.length, children: node(emptyMessage) }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx27("tr", { children: columns.map((column) => /* @__PURE__ */ jsx27("td", { "data-align": column.align ?? "start", children: node(
+        /* @__PURE__ */ jsx43("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { className: "sph-table__empty", colSpan: columns.length, children: node(emptyMessage) }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43("td", { "data-align": column.align ?? "start", children: node(
           column.render ? column.render(row, rowIndex) : row[column.key]
         ) }, column.key)) }, rowKey ? String(row[rowKey]) : rowIndex)) })
       ]
@@ -1319,25 +3401,40 @@ function Table({
 }
 export {
   Alert,
+  Avatar,
+  AvatarGroup,
   Badge,
   Button,
   Card,
   Checkbox,
+  Collapsible,
+  Combobox,
+  CommandPalette,
   Dialog,
+  Drawer,
   EmptyState,
   Field,
   FieldMessage,
+  HoverCard,
   IconButton,
   Input,
+  Kbd,
+  MagneticDropzone,
   Menu,
   Notice,
   Popover,
+  Progress,
   RadioGroup,
+  ReasoningSteps,
+  Resizable,
+  ScrollArea,
   Select,
   Separator,
+  Sidebar,
   Skeleton,
   Slider,
   Spinner,
+  StreamingText,
   Surface,
   Table,
   Tabs,
@@ -1347,6 +3444,9 @@ export {
   Toggle,
   Toolbar,
   Tooltip,
-  toast
+  motionDurationMs,
+  parseDurationMs,
+  toast,
+  usePresence
 };
 //# sourceMappingURL=index.js.map