@orbitlabsui/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1299 @@
+import { createContext, forwardRef, useState, useEffect, useCallback, useMemo, useContext, useId, useRef, Children, isValidElement, cloneElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { EyeOffIcon, EyeIcon, BanIcon, ScanSearchIcon, Clock4Icon, ArchiveIcon, CircleDotIcon, CheckCircle2Icon, CircleDashedIcon, PlayCircleIcon, SunIcon, MoonIcon, MonitorIcon, GithubIcon, ExternalLinkIcon, CopyIcon, PlusIcon, XIcon, Loader2Icon, CheckIcon, AlertTriangleIcon, ChevronDownIcon, SearchIcon, InfoIcon, XCircleIcon } from 'lucide-react';
+import { FloatingOverlay, useFloating, autoUpdate, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, useHover, useFocus, size } from '@floating-ui/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import toast, { Toaster } from 'react-hot-toast';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// src/theme/theme.ts
+var THEME_STORAGE_KEY = "orbit-theme";
+var CHOICES = ["light", "dark", "system"];
+function resolveTheme(choice, prefersDark) {
+  if (choice === "system") return prefersDark ? "dark" : "light";
+  return choice;
+}
+function getStoredTheme() {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored && CHOICES.includes(stored)) return stored;
+  } catch {
+  }
+  return "system";
+}
+function storeTheme(choice) {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, choice);
+  } catch {
+  }
+}
+function systemPrefersDark() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyThemeClass(resolved) {
+  const root = document.documentElement;
+  root.classList.toggle("dark", resolved === "dark");
+  root.style.colorScheme = resolved;
+  const bg = getComputedStyle(root).getPropertyValue("--color-bg").trim();
+  if (bg) root.style.backgroundColor = bg;
+}
+var ThemeContext = createContext(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState(() => getStoredTheme());
+  const [prefersDark, setPrefersDark] = useState(() => systemPrefersDark());
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = (e) => setPrefersDark(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  const resolvedTheme = resolveTheme(theme, prefersDark);
+  useEffect(() => {
+    applyThemeClass(resolvedTheme);
+  }, [resolvedTheme]);
+  const setTheme = useCallback((choice) => {
+    storeTheme(choice);
+    setThemeState(choice);
+  }, []);
+  const value = useMemo(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}
+var OPTIONS = [
+  { value: "light", label: "Light", Icon: SunIcon },
+  { value: "dark", label: "Dark", Icon: MoonIcon },
+  { value: "system", label: "System", Icon: MonitorIcon }
+];
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Theme",
+      className: "flex items-center gap-0.5 rounded-md border border-border-strong bg-surface-raised p-0.5",
+      children: OPTIONS.map(({ value, label, Icon }) => {
+        const active = theme === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            "aria-label": label,
+            title: label,
+            onClick: () => setTheme(value),
+            className: `flex h-6 w-6 items-center justify-center rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${active ? "bg-surface text-fg shadow-sm" : "text-muted hover:text-fg"}`,
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5", strokeWidth: 1.75, "aria-hidden": "true" })
+          },
+          value
+        );
+      })
+    }
+  );
+}
+var ICONS = {
+  plus: PlusIcon,
+  copy: CopyIcon,
+  "external-link": ExternalLinkIcon,
+  github: GithubIcon
+};
+function Button({
+  children,
+  variant = "primary",
+  icon,
+  iconPosition = "none",
+  onClick,
+  disabled = false,
+  fullWidth = false
+}) {
+  const Icon = icon ? ICONS[icon] : null;
+  const showLeading = Icon && iconPosition === "leading";
+  const showTrailing = Icon && iconPosition === "trailing";
+  const base = `${fullWidth ? "flex w-full" : "inline-flex"} h-[38px] items-center justify-center gap-2.5 rounded px-3.5 font-condensed text-sm font-medium leading-[17.5px] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60`;
+  const variants = {
+    primary: "bg-accent text-on-accent hover:bg-accent-hover focus-visible:ring-accent shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.12)]",
+    secondary: "bg-surface text-fg border border-border-strong hover:bg-surface-raised focus-visible:ring-accent",
+    // destructive stays hardcoded — themed in a later pass (see plan Global Constraints).
+    destructive: "bg-[#DC2626] text-white hover:bg-[#B91C1C] focus-visible:ring-[#DC2626] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.12)]"
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: `${base} ${variants[variant]}`,
+      children: [
+        showLeading && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.33, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children }),
+        showTrailing && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.33, "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+var MotionFloatingOverlay = motion(FloatingOverlay);
+var CONTAINER = {
+  center: "items-center justify-center p-4",
+  right: "justify-end",
+  left: "justify-start"
+};
+var PANEL = {
+  center: "max-h-[85vh] w-full rounded-lg border-[0.5px] border-border-strong shadow-lg",
+  right: "h-full w-full border-l-[0.5px] border-border-strong shadow-xl",
+  left: "h-full w-full border-r-[0.5px] border-border-strong shadow-xl"
+};
+var PANEL_MOTION = {
+  center: { from: { scale: 0.96, y: 8 }, to: { scale: 1, y: 0 } },
+  right: { from: { x: "100%" }, to: { x: 0 } },
+  left: { from: { x: "-100%" }, to: { x: 0 } }
+};
+function Overlay({
+  open,
+  onClose,
+  position,
+  widthClassName,
+  title,
+  description,
+  footer,
+  hideCloseButton = false,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  children
+}) {
+  const titleId = useId();
+  const { refs, context } = useFloating({
+    open,
+    onOpenChange: (next) => {
+      if (!next) onClose();
+    },
+    whileElementsMounted: autoUpdate
+  });
+  const dismiss = useDismiss(context, {
+    outsidePress: closeOnBackdrop,
+    escapeKey: closeOnEsc
+  });
+  const role = useRole(context, { role: "dialog" });
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+  const panelMotion = PANEL_MOTION[position];
+  const hasHeader = Boolean(title) || !hideCloseButton;
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+    MotionFloatingOverlay,
+    {
+      lockScroll: true,
+      className: `fixed inset-0 z-50 flex bg-black/40 ${CONTAINER[position]}`,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2, ease: "easeOut" },
+      children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: true, children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          ref: refs.setFloating,
+          ...getFloatingProps(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          className: `relative flex flex-col overflow-hidden bg-surface font-sans ${PANEL[position]} ${widthClassName}`,
+          initial: panelMotion.from,
+          animate: panelMotion.to,
+          exit: panelMotion.from,
+          transition: { duration: 0.2, ease: "easeOut" },
+          children: [
+            hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-start justify-between gap-4 border-b-[0.5px] border-border-strong px-6 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                title && /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: titleId,
+                    className: "font-sans text-lg font-semibold text-fg",
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsx("p", { className: "mt-1 font-sans text-sm text-muted", children: description })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  className: "-mr-1.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded text-muted transition-colors hover:bg-surface-raised hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-5", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t-[0.5px] border-border-strong px-6 py-4", children: footer })
+          ]
+        }
+      ) })
+    }
+  ) }) });
+}
+var SIZES = {
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-7 w-7 text-[11px]",
+  lg: "h-9 w-9 text-sm"
+};
+var GRAY = {
+  bg: "var(--color-surface-avatar)",
+  color: "var(--color-text-secondary)"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
+  return ((parts[0]?.[0] ?? "") + (parts[parts.length - 1]?.[0] ?? "")).toUpperCase();
+}
+function Avatar({
+  name,
+  initials,
+  size: size2 = "md",
+  className = ""
+}) {
+  const label = initials ?? getInitials(name);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex flex-shrink-0 items-center justify-center rounded-full font-medium ${SIZES[size2]} ${className}`,
+      style: {
+        backgroundColor: GRAY.bg,
+        color: GRAY.color
+      },
+      "aria-hidden": "true",
+      title: name,
+      children: label
+    }
+  );
+}
+var Input = forwardRef(
+  ({
+    label,
+    helperText,
+    error,
+    icon: Icon,
+    type = "text",
+    className = "",
+    disabled,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === "password";
+    const inputType = isPassword ? showPassword ? "text" : "password" : type;
+    return /* @__PURE__ */ jsxs("div", { className: `flex w-full flex-col gap-1.5 ${className}`, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "font-sans text-sm font-medium text-fg", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        Icon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 text-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: inputType,
+            disabled,
+            className: `w-full rounded border bg-surface px-3 py-2 font-sans text-sm text-fg placeholder:text-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-surface-raised disabled:text-muted ${Icon ? "pl-9" : ""} ${isPassword ? "pr-9" : ""} ${error ? "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500" : "border-border hover:border-border-strong focus-visible:border-accent focus-visible:ring-accent"}`,
+            ...props
+          }
+        ),
+        isPassword && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword(!showPassword),
+            disabled,
+            className: "absolute right-3 text-muted hover:text-fg focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4", strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4", strokeWidth: 1.5 })
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `font-sans text-xs ${error ? "text-red-500" : "text-muted"}`,
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = forwardRef(
+  ({ label, helperText, error, className = "", disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: `flex w-full flex-col gap-1.5 ${className}`, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "font-sans text-sm font-medium text-fg", children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          disabled,
+          className: `min-h-[80px] w-full rounded border bg-surface px-3 py-2 font-sans text-sm text-fg placeholder:text-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-surface-raised disabled:text-muted ${error ? "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500" : "border-border hover:border-border-strong focus-visible:border-accent focus-visible:ring-accent"}`,
+          ...props
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `font-sans text-xs ${error ? "text-red-500" : "text-muted"}`,
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+function Code({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("span", { className: `font-condensed text-muted ${className}`, children });
+}
+function Tooltip({ label, children, placement = "top", block }) {
+  const [open, setOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate
+  });
+  const hover = useHover(context, { delay: { open: 250, close: 0 }, move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions(
+    [
+      hover,
+      focus,
+      dismiss,
+      role
+    ]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: block ? "block min-w-0 truncate" : "inline-flex",
+        children
+      }
+    ),
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: "z-[60] max-w-xs rounded-md bg-black px-2.5 py-1.5 font-sans text-xs font-medium leading-snug text-white shadow-lg",
+        children: label
+      }
+    ) })
+  ] });
+}
+function Tabs({ items, value, onChange, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: `flex items-center gap-1 border-b border-border-strong ${className}`,
+      children: items.map((item) => {
+        const Icon = item.icon;
+        const active = item.id === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(item.id),
+            className: `-mb-px flex items-center gap-2 border-b-2 px-3 py-2.5 font-sans text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${active ? "border-accent text-accent" : "border-transparent text-muted hover:text-fg"}`,
+            children: [
+              Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.75 }),
+              item.label
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var VARIANT = {
+  success: {
+    Icon: CheckCircle2Icon,
+    fill: "var(--color-success-bg)",
+    border: "var(--color-success-border)",
+    color: "var(--color-success)"
+  },
+  error: {
+    Icon: XCircleIcon,
+    fill: "var(--color-danger-bg)",
+    border: "var(--color-danger-border)",
+    color: "var(--color-danger)"
+  },
+  info: {
+    Icon: InfoIcon,
+    fill: "var(--color-info-bg)",
+    border: "var(--color-info-border)",
+    color: "var(--color-info)"
+  },
+  warning: {
+    Icon: AlertTriangleIcon,
+    fill: "var(--color-warning-bg)",
+    border: "var(--color-warning-border)",
+    color: "var(--color-warning)"
+  }
+};
+function ToastCard({
+  t,
+  variant,
+  title,
+  description
+}) {
+  const { Icon, fill, border, color } = VARIANT[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-lg border border-border-strong bg-surface px-4 py-3 font-sans shadow-lg transition-all duration-200 ${t.visible ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"}`,
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full border",
+            style: { backgroundColor: fill, borderColor: border, color },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.5 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-sans text-sm font-semibold text-fg", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 font-sans text-sm leading-snug text-fg-secondary", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => toast.dismiss(t.id),
+            "aria-label": "Dismiss",
+            className: "-mr-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-muted transition-colors hover:bg-surface-raised hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "h-3.5 w-3.5", strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+function show(variant, title, options = {}) {
+  return toast.custom(
+    (t) => /* @__PURE__ */ jsx(
+      ToastCard,
+      {
+        t,
+        variant,
+        title,
+        description: options.description
+      }
+    ),
+    { duration: options.duration }
+  );
+}
+var notify = {
+  success: (title, options) => show("success", title, options),
+  error: (title, options) => show("error", title, options),
+  info: (title, options) => show("info", title, options),
+  warning: (title, options) => show("warning", title, options),
+  dismiss: (id) => toast.dismiss(id)
+};
+function AppToaster() {
+  return /* @__PURE__ */ jsx(
+    Toaster,
+    {
+      position: "bottom-right",
+      gutter: 12,
+      toastOptions: { duration: 4e3 }
+    }
+  );
+}
+var STATUS_CONFIG = {
+  backlog: {
+    label: "Backlog",
+    Icon: Clock4Icon,
+    fill: "var(--color-neutral-bg)",
+    border: "var(--color-neutral-border)",
+    color: "var(--color-neutral)"
+  },
+  ready: {
+    label: "Ready",
+    Icon: PlayCircleIcon,
+    fill: "var(--color-info-bg)",
+    border: "var(--color-info-border)",
+    color: "var(--color-info)"
+  },
+  "in-progress": {
+    label: "In progress",
+    Icon: CircleDashedIcon,
+    fill: "var(--color-warning-bg)",
+    border: "var(--color-warning-border)",
+    color: "var(--color-warning)"
+  },
+  "in-review": {
+    label: "In Review",
+    Icon: ScanSearchIcon,
+    fill: "var(--color-review-bg)",
+    border: "var(--color-review-border)",
+    color: "var(--color-review)"
+  },
+  blocked: {
+    label: "Blocked",
+    Icon: BanIcon,
+    fill: "var(--color-danger-bg)",
+    border: "var(--color-danger-border)",
+    color: "var(--color-danger)"
+  },
+  completed: {
+    label: "Completed",
+    Icon: CheckCircle2Icon,
+    fill: "var(--color-success-bg)",
+    border: "var(--color-success-border)",
+    color: "var(--color-success)"
+  }
+};
+var PROJECT_STATUS_CONFIG = {
+  active: {
+    label: "Active",
+    Icon: CircleDotIcon,
+    fill: "var(--color-success-bg)",
+    border: "var(--color-success-border)",
+    color: "var(--color-success)"
+  },
+  archived: {
+    label: "Archived",
+    Icon: ArchiveIcon,
+    fill: "var(--color-neutral-bg)",
+    border: "var(--color-neutral-border)",
+    color: "var(--color-neutral)"
+  }
+};
+var PLAN_STATUS_CONFIG = {
+  backlog: {
+    label: "Backlog",
+    Icon: Clock4Icon,
+    fill: "var(--color-neutral-bg)",
+    border: "var(--color-neutral-border)",
+    color: "var(--color-neutral)"
+  },
+  scoped: {
+    label: "Scoped",
+    Icon: ScanSearchIcon,
+    fill: "var(--color-info-bg)",
+    border: "var(--color-info-border)",
+    color: "var(--color-info)"
+  },
+  cancelled: {
+    label: "Cancelled",
+    Icon: BanIcon,
+    fill: "var(--color-danger-bg)",
+    border: "var(--color-danger-border)",
+    color: "var(--color-danger)"
+  }
+};
+var PLAN_STATUS_ORDER = ["backlog", "scoped", "cancelled"];
+var ALL_STATUS_CONFIG = { ...STATUS_CONFIG, ...PROJECT_STATUS_CONFIG, ...PLAN_STATUS_CONFIG };
+function StatusBadge({ status }) {
+  const { label, Icon, fill, border, color } = ALL_STATUS_CONFIG[status];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-1.5 rounded border px-2 py-1 font-condensed text-xs font-medium leading-[15px]",
+      style: {
+        backgroundColor: fill,
+        borderColor: border,
+        color
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5", strokeWidth: 1.5, "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
+}
+var NEUTRAL_TONE = {
+  bg: "var(--color-surface-strong)",
+  border: "var(--color-border-strong)",
+  color: "var(--color-text-muted)"
+};
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  tone = NEUTRAL_TONE,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-full min-h-[360px] w-full flex-col items-center justify-center px-6 py-12 text-center ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-5 flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute h-20 w-20 rounded-3xl opacity-60",
+              style: { backgroundColor: tone.bg },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative flex h-14 w-14 items-center justify-center rounded-2xl border shadow-[0px_1px_2px_rgba(0,0,0,0.06)]",
+              style: {
+                backgroundColor: "var(--color-surface)",
+                borderColor: tone.border,
+                color: tone.color
+              },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6", strokeWidth: 1.5 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "font-sans text-lg font-semibold tracking-tight text-fg", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-sm font-sans text-sm leading-relaxed text-muted", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-6", children: action })
+      ]
+    }
+  );
+}
+function FormSection({
+  title,
+  description,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: `flex flex-col gap-4 ${className}`, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "font-sans text-sm font-semibold text-fg", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 font-sans text-sm text-muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children })
+  ] });
+}
+function Field({ label, htmlFor, help, error, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor,
+        className: "font-sans text-sm font-medium text-fg",
+        children: label
+      }
+    ),
+    children,
+    error ? /* @__PURE__ */ jsx("span", { className: "font-sans text-xs text-red-500", children: error }) : help ? /* @__PURE__ */ jsx("span", { className: "font-sans text-xs text-muted", children: help }) : null
+  ] });
+}
+var CONFIG = {
+  clean: null,
+  dirty: { label: "Unsaved changes", className: "text-warning" },
+  saving: { label: "Saving\u2026", className: "text-muted" },
+  saved: { label: "Saved", className: "text-success" }
+};
+function DirtyStateIndicator({ state }) {
+  const config = CONFIG[state];
+  if (!config) return null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `flex items-center gap-1.5 font-sans text-xs font-medium ${config.className}`,
+      "aria-live": "polite",
+      children: [
+        state === "saving" && /* @__PURE__ */ jsx(Loader2Icon, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 2 }),
+        state === "saved" && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5", strokeWidth: 2.5 }),
+        state === "dirty" && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-warning", "aria-hidden": "true" }),
+        config.label
+      ]
+    }
+  );
+}
+function RowActions({ actions }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-0.5", children: actions.map((a) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": a.label,
+      title: a.label,
+      onClick: (e) => {
+        e.stopPropagation();
+        a.onClick();
+      },
+      className: `rounded p-1.5 text-muted transition-colors ${a.danger ? "hover:bg-danger-bg hover:text-danger" : "hover:bg-surface-raised hover:text-fg"}`,
+      children: /* @__PURE__ */ jsx(a.icon, { className: "h-4 w-4", strokeWidth: 1.75 })
+    },
+    a.label
+  )) });
+}
+function Markdown({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "font-sans text-[15px] leading-7 text-fg-secondary",
+        "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "[&_p]:my-3",
+        "[&_h1]:mb-3 [&_h1]:mt-8 [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:leading-snug [&_h1]:text-fg",
+        "[&_h2]:mb-2.5 [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-fg",
+        "[&_h3]:mb-2 [&_h3]:mt-6 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-fg",
+        "[&_ul]:my-3.5 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-3.5 [&_ol]:list-decimal [&_ol]:pl-6",
+        "[&_li]:my-1.5 [&_li]:pl-1.5 [&_li>p]:my-0",
+        "[&_a]:text-accent [&_a]:underline [&_a]:underline-offset-2 [&_strong]:font-semibold [&_strong]:text-fg",
+        "[&_blockquote]:my-4 [&_blockquote]:border-l-2 [&_blockquote]:border-accent [&_blockquote]:pl-4 [&_blockquote]:text-fg-secondary",
+        "[&_code]:rounded [&_code]:bg-surface-strong [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[13px] [&_code]:text-fg-secondary",
+        "[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface-raised [&_pre]:p-4 [&_pre_code]:bg-transparent [&_pre_code]:p-0",
+        "[&_hr]:my-7 [&_hr]:border-border-strong",
+        "[&_table]:my-4 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border-strong [&_td]:px-3 [&_td]:py-1.5 [&_th]:border [&_th]:border-border-strong [&_th]:bg-surface-raised [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-semibold"
+      ].join(" "),
+      children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children })
+    }
+  );
+}
+var SIZES2 = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl"
+};
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  size: size2 = "md",
+  hideCloseButton,
+  closeOnBackdrop,
+  closeOnEsc,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      open,
+      onClose,
+      position: "center",
+      widthClassName: SIZES2[size2],
+      title,
+      description,
+      footer,
+      hideCloseButton,
+      closeOnBackdrop,
+      closeOnEsc,
+      children
+    }
+  );
+}
+var SIZES3 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg"
+};
+function Drawer({
+  open,
+  onClose,
+  side = "right",
+  title,
+  description,
+  footer,
+  size: size2 = "md",
+  hideCloseButton,
+  closeOnBackdrop,
+  closeOnEsc,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      open,
+      onClose,
+      position: side,
+      widthClassName: SIZES3[size2],
+      title,
+      description,
+      footer,
+      hideCloseButton,
+      closeOnBackdrop,
+      closeOnEsc,
+      children
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  variant = "default",
+  loading = false
+}) {
+  const destructive = variant === "destructive";
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      size: "sm",
+      title,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, disabled: loading, children: cancelLabel }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: destructive ? "destructive" : "primary",
+            onClick: onConfirm,
+            disabled: loading,
+            children: loading ? "Working\u2026" : confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        destructive && /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-danger-bg text-danger", children: /* @__PURE__ */ jsx(
+          AlertTriangleIcon,
+          {
+            className: "h-5 w-5",
+            strokeWidth: 2,
+            "aria-hidden": "true"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "font-sans text-sm leading-relaxed text-fg-secondary", children: message })
+      ] })
+    }
+  );
+}
+function SaveBar({
+  dirty,
+  onSave,
+  onDiscard,
+  state,
+  saveLabel = "Save",
+  discardLabel = "Discard"
+}) {
+  const resolvedState = state ?? (dirty ? "dirty" : "clean");
+  return /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-10 flex items-center justify-between gap-4 border-t border-border-strong bg-surface px-1 py-3 backdrop-blur", children: [
+    /* @__PURE__ */ jsx(DirtyStateIndicator, { state: resolvedState }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onDiscard, disabled: !dirty, children: discardLabel }),
+      /* @__PURE__ */ jsx(Button, { onClick: onSave, disabled: !dirty, children: saveLabel })
+    ] })
+  ] });
+}
+var activeClose = null;
+function usePopover({
+  open,
+  onOpenChange,
+  placement = "bottom-start",
+  gap = 6,
+  matchWidth = false,
+  role = "menu"
+}) {
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange,
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(gap),
+      flip({ padding: 8 }),
+      shift({ padding: 8 }),
+      size({
+        padding: 8,
+        apply({ availableHeight, rects, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${Math.max(160, availableHeight)}px`,
+            ...matchWidth ? { width: `${rects.reference.width}px` } : {}
+          });
+        }
+      })
+    ]
+  });
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const closeSelfRef = useRef();
+  if (!closeSelfRef.current) {
+    closeSelfRef.current = () => onOpenChangeRef.current(false);
+  }
+  useEffect(() => {
+    if (!open) return;
+    if (activeClose && activeClose !== closeSelfRef.current) {
+      activeClose();
+    }
+    activeClose = closeSelfRef.current;
+    return () => {
+      if (activeClose === closeSelfRef.current) activeClose = null;
+    };
+  }, [open]);
+  const dismiss = useDismiss(context, { outsidePress: true });
+  const roleInteraction = useRole(context, { role });
+  const { getReferenceProps, getFloatingProps } = useInteractions(
+    [
+      dismiss,
+      roleInteraction
+    ]
+  );
+  return {
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps
+  };
+}
+function Dropdown({
+  trigger,
+  children,
+  align = "left",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context, getReferenceProps, getFloatingProps } = usePopover({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: align === "right" ? "bottom-end" : "bottom-start",
+    role: "menu"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-block text-left ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setReference,
+        ...getReferenceProps({
+          onClick: () => setIsOpen((o) => !o)
+        }),
+        className: "inline-block",
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: "z-50",
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              opacity: 0,
+              y: -4,
+              scale: 0.98
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            exit: {
+              opacity: 0,
+              y: -4,
+              scale: 0.98
+            },
+            transition: {
+              duration: 0.15,
+              ease: "easeOut"
+            },
+            className: "min-w-[200px] overflow-auto rounded-md border border-border bg-surface py-1 shadow-lg",
+            children: Children.map(children, (child) => {
+              if (isValidElement(child)) {
+                return cloneElement(child, {
+                  onClick: (e) => {
+                    if (child.props.onClick) child.props.onClick(e);
+                    setIsOpen(false);
+                  }
+                });
+              }
+              return child;
+            })
+          }
+        )
+      }
+    ) }) })
+  ] });
+}
+function DropdownItem({
+  children,
+  icon: Icon,
+  danger,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: `flex w-full items-center gap-2 px-4 py-2 text-left font-sans text-sm transition-colors hover:bg-surface-raised focus:bg-surface-raised focus:outline-none ${danger ? "text-red-600" : "text-fg"} ${className}`,
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.5 }),
+        children
+      ]
+    }
+  );
+}
+function Select({
+  label,
+  placeholder = "Select an option",
+  options,
+  value,
+  onChange,
+  error,
+  helperText,
+  disabled,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, getReferenceProps, getFloatingProps } = usePopover({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "bottom-start",
+    matchWidth: true,
+    role: "listbox"
+  });
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const handleSelect = (val) => {
+    onChange?.(val);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex w-full flex-col gap-1.5 ${className}`, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "font-sans text-sm font-medium text-fg", children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: refs.setReference,
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        ...getReferenceProps({
+          onClick: () => !disabled && setIsOpen((o) => !o),
+          onKeyDown: handleKeyDown
+        }),
+        className: `flex w-full items-center justify-between rounded border bg-surface px-3 py-2 text-left font-sans text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-surface-raised disabled:text-muted ${error ? "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500" : "border-border hover:border-border-strong focus-visible:border-accent focus-visible:ring-accent"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-fg" : "text-muted", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: `h-4 w-4 text-muted transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+              strokeWidth: 1.5
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: "z-50",
+        children: /* @__PURE__ */ jsx(
+          motion.ul,
+          {
+            role: "listbox",
+            initial: {
+              opacity: 0,
+              y: -4,
+              scale: 0.98
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            exit: {
+              opacity: 0,
+              y: -4,
+              scale: 0.98
+            },
+            transition: {
+              duration: 0.15,
+              ease: "easeOut"
+            },
+            className: "overflow-auto rounded-md border border-border bg-surface py-1 shadow-lg focus:outline-none",
+            children: options.map(
+              (option) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": value === option.value,
+                  onClick: () => handleSelect(option.value),
+                  className: `relative flex cursor-pointer select-none items-center py-2 pl-3 pr-9 font-sans text-sm transition-colors hover:bg-surface-raised ${value === option.value ? "bg-surface-raised font-medium text-accent" : "text-fg"}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                    value === option.value && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-accent", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4", strokeWidth: 2 }) })
+                  ]
+                },
+                option.value
+              )
+            )
+          }
+        )
+      }
+    ) }) }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `font-sans text-xs ${error ? "text-red-500" : "text-muted"}`,
+        children: helperText
+      }
+    )
+  ] });
+}
+function Combobox({
+  label,
+  placeholder = "Search...",
+  options,
+  value,
+  onChange,
+  error,
+  helperText,
+  disabled,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  const { refs, floatingStyles, getReferenceProps, getFloatingProps } = usePopover({
+    open: isOpen,
+    onOpenChange: (next) => {
+      setIsOpen(next);
+      if (!next) setQuery("");
+    },
+    placement: "bottom-start",
+    matchWidth: true,
+    role: "listbox"
+  });
+  useEffect(() => {
+    if (isOpen) inputRef.current?.focus();
+  }, [isOpen]);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const filteredOptions = query === "" ? options : options.filter(
+    (option) => option.label.toLowerCase().includes(query.toLowerCase())
+  );
+  const handleSelect = (val) => {
+    onChange?.(val);
+    setIsOpen(false);
+    setQuery("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex w-full flex-col gap-1.5 ${className}`, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "font-sans text-sm font-medium text-fg", children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: refs.setReference,
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        ...getReferenceProps({
+          onClick: () => !disabled && setIsOpen((o) => !o)
+        }),
+        className: `flex w-full items-center justify-between rounded border bg-surface px-3 py-2 text-left font-sans text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-surface-raised disabled:text-muted ${error ? "border-red-500 focus-visible:ring-red-500" : "border-border hover:border-border-strong focus-visible:border-accent focus-visible:ring-accent"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-fg" : "text-muted", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: `h-4 w-4 text-muted transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+              strokeWidth: 1.5
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: "z-50",
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: -4, scale: 0.98 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            exit: { opacity: 0, y: -4, scale: 0.98 },
+            transition: { duration: 0.15, ease: "easeOut" },
+            className: "overflow-hidden rounded-md border border-border bg-surface shadow-lg",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "h-4 w-4 flex-shrink-0 text-muted", strokeWidth: 1.5 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    className: "w-full bg-transparent p-0 font-sans text-sm text-fg placeholder:text-muted focus:outline-none",
+                    placeholder,
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 font-sans text-sm text-muted", children: "No results found." }) : filteredOptions.map(
+                (option) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    role: "option",
+                    "aria-selected": value === option.value,
+                    onClick: () => handleSelect(option.value),
+                    className: `relative flex cursor-pointer select-none items-center py-2 pl-3 pr-9 font-sans text-sm transition-colors hover:bg-surface-raised ${value === option.value ? "bg-surface-raised font-medium text-accent" : "text-fg"}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                      value === option.value && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-accent", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4", strokeWidth: 2 }) })
+                    ]
+                  },
+                  option.value
+                )
+              ) })
+            ]
+          }
+        )
+      }
+    ) }) }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `font-sans text-xs ${error ? "text-red-500" : "text-muted"}`,
+        children: helperText
+      }
+    )
+  ] });
+}
+
+export { AppToaster, Avatar, Button, Code, Combobox, ConfirmDialog, DirtyStateIndicator, Drawer, Dropdown, DropdownItem, EmptyState, Field, FormSection, Input, Markdown, Modal, Overlay, PLAN_STATUS_CONFIG, PLAN_STATUS_ORDER, PROJECT_STATUS_CONFIG, RowActions, STATUS_CONFIG, SaveBar, Select, StatusBadge, THEME_STORAGE_KEY, Tabs, Textarea, ThemeProvider, ThemeToggle, Tooltip, applyThemeClass, getStoredTheme, notify, resolveTheme, storeTheme, systemPrefersDark, usePopover, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map