@reopt-ai/opt-ui 1.4.1

package/dist/chunk-QWBHD54V.js

@@ -0,0 +1,3218 @@
+"use client";
+import {
+  Alert,
+  Badge,
+  Checkbox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPopover,
+  ComboboxRoot,
+  Composite,
+  CompositeItem,
+  CompositeProvider,
+  CompositeRow,
+  DialogDescription,
+  DialogHeading,
+  DialogPanel,
+  DialogRoot,
+  DisclosureContent,
+  DisclosureRoot,
+  DisclosureTrigger,
+  EmptyState,
+  FormCheckbox,
+  FormError,
+  FormInput,
+  FormLabel,
+  FormRadio,
+  FormRadioGroup,
+  FormRoot,
+  FormSelect,
+  FormSelectItem,
+  FormSelectPopover,
+  FormSubmit,
+  FormSwitch,
+  FormTextarea,
+  Kbd,
+  MenuButtonArrow,
+  MenuItem,
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuPopover,
+  MenuRoot,
+  MenuSeparator,
+  MenuTrigger,
+  MenubarContainer,
+  MenubarRoot,
+  OPT_ACTIVE_ITEM,
+  OPT_ANIMATE_ENTER_EXIT,
+  OPT_BADGE_BLUE,
+  OPT_BADGE_GREEN,
+  OPT_BADGE_NEUTRAL,
+  OPT_BADGE_RED,
+  OPT_BADGE_YELLOW,
+  OPT_BORDER,
+  OPT_DISCLOSURE_CONTENT,
+  OPT_DISCLOSURE_TRIGGER,
+  OPT_DIVIDER,
+  OPT_DOT_GREEN,
+  OPT_DOT_RED,
+  OPT_DOT_YELLOW,
+  OPT_FOCUS,
+  OPT_FOCUS_VISIBLE,
+  OPT_INPUT,
+  OPT_ITEM_BASE,
+  OPT_SURFACE_POPOVER,
+  OPT_TABLE_ROW_ACTIVE,
+  OPT_TD,
+  OPT_TD_MUTED,
+  OPT_TEXT_LABEL,
+  OPT_TEXT_PRIMARY,
+  OPT_TEXT_SECONDARY,
+  OPT_TEXT_TERTIARY,
+  OPT_TH,
+  Pagination,
+  SelectItem,
+  SelectLabel,
+  SelectPopover,
+  SelectRoot,
+  SelectTrigger,
+  Spinner,
+  StatCard,
+  Tab,
+  TabList,
+  TabPanel,
+  TabsRoot,
+  TagInput,
+  ToolbarButton,
+  ToolbarContainer,
+  ToolbarRoot,
+  ToolbarSeparator,
+  Tooltip,
+  TooltipAnchor,
+  TooltipProvider,
+  cn,
+  useFormStore
+} from "./chunk-RBM2RNC2.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-3GWWZKX7.js";
+
+// src/core/command.tsx
+import { SearchIcon } from "lucide-react";
+import {
+  CommandRoot as PrimCommandRoot,
+  CommandInput as PrimCommandInput,
+  CommandList as PrimCommandList,
+  CommandEmpty as PrimCommandEmpty,
+  CommandGroup as PrimCommandGroup,
+  CommandSeparator as PrimCommandSeparator,
+  CommandItem as PrimCommandItem
+} from "@reopt-ai/opt-ui-primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Command(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandRoot,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "bg-surface text-text-primary flex w-full flex-col overflow-hidden rounded-xl",
+        className
+      )
+    }, props), {
+      "data-opt-id": "4FYBW",
+      "data-opt-slug": "command.Command"
+    })
+  );
+}
+function CommandDialog({
+  open,
+  onOpenChange,
+  title = "Command Palette",
+  description = "\uAC80\uC0C9 \uD6C4 Enter \uB610\uB294 \uD074\uB9AD\uC73C\uB85C \uBA85\uB839\uC744 \uC2E4\uD589\uD558\uC138\uC694.",
+  className,
+  commandClassName,
+  shouldFilter,
+  filter,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogRoot,
+    {
+      open,
+      onOpenChange,
+      "data-opt-id": "DVRSX",
+      "data-opt-slug": "command.CommandDialog",
+      children: /* @__PURE__ */ jsxs(
+        DialogPanel,
+        {
+          className: cn(
+            "top-[20%] left-1/2 -translate-x-1/2",
+            "w-full max-w-lg overflow-hidden p-0 shadow-2xl",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(DialogHeading, { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
+            /* @__PURE__ */ jsx(
+              Command,
+              {
+                shouldFilter,
+                filter,
+                className: commandClassName,
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function CommandInput(_a) {
+  var _b = _a, {
+    className,
+    trailing,
+    wrapperClassName,
+    placeholder,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "className",
+    "trailing",
+    "wrapperClassName",
+    "placeholder",
+    "aria-label"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: cn(
+        "border-border-subtle gap-element flex h-12 items-center border-b px-3",
+        wrapperClassName
+      ),
+      "data-opt-id": "HB1K3",
+      "data-opt-slug": "command.CommandInput",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": true, className: "text-text-tertiary size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          PrimCommandInput,
+          __spreadValues({
+            className: cn(
+              // cmdk 컨벤션 — input 자체는 ring 없이 자연스러운 검색 경험.
+              // 포커스 표시는 wrapper(border-b)가 시각적 컨텍스트로 제공.
+              "text-text-primary placeholder:text-text-tertiary flex h-full w-full bg-transparent text-sm outline-none focus-visible:ring-0 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            placeholder,
+            "aria-label": ariaLabel != null ? ariaLabel : typeof placeholder === "string" ? placeholder : "Command search"
+          }, props)
+        ),
+        trailing
+      ]
+    }
+  );
+}
+function CommandList(_a) {
+  var _b = _a, {
+    className,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "className",
+    "aria-label"
+  ]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandList,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1",
+        className
+      ),
+      "aria-label": ariaLabel != null ? ariaLabel : "Commands"
+    }, props), {
+      "data-opt-id": "NPXC5",
+      "data-opt-slug": "command.CommandList"
+    })
+  );
+}
+function CommandEmpty(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandEmpty,
+    __spreadProps(__spreadValues({
+      className: cn("text-text-tertiary py-6 text-center text-sm", className)
+    }, props), {
+      "data-opt-id": "A8BZM",
+      "data-opt-slug": "command.CommandEmpty"
+    })
+  );
+}
+function CommandGroup(_a) {
+  var _b = _a, {
+    className,
+    heading
+  } = _b, props = __objRest(_b, [
+    "className",
+    "heading"
+  ]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandGroup,
+    __spreadProps(__spreadValues({
+      heading: heading != null ? /* @__PURE__ */ jsx("div", { className: "text-text-tertiary px-2 py-1.5 text-xs font-medium", children: heading }) : void 0,
+      className: cn("py-1", className)
+    }, props), {
+      "data-opt-id": "JPK1Y",
+      "data-opt-slug": "command.CommandGroup"
+    })
+  );
+}
+function CommandSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandSeparator,
+    __spreadProps(__spreadValues({
+      className: cn("bg-border-subtle -mx-1 my-1 h-px", className)
+    }, props), {
+      "data-opt-id": "10P0E",
+      "data-opt-slug": "command.CommandSeparator"
+    })
+  );
+}
+function CommandItem(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    PrimCommandItem,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "text-text-primary flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm select-none",
+        "data-[active-item]:bg-accent data-[active-item]:text-accent-fg",
+        "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props), {
+      "data-opt-id": "K674W",
+      "data-opt-slug": "command.CommandItem"
+    })
+  );
+}
+function CommandShortcut(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadProps(__spreadValues({
+      "data-slot": "command-shortcut",
+      className: cn(
+        "text-text-tertiary ml-auto text-xs tracking-widest",
+        "data-[active-item]:text-accent-fg/80",
+        className
+      )
+    }, props), {
+      "data-opt-id": "75CQK",
+      "data-opt-slug": "command.CommandShortcut"
+    })
+  );
+}
+
+// src/shells/command-palette.tsx
+import { useMemo } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  title: "Command Palette",
+  description: "\uAC80\uC0C9 \uD6C4 Enter \uB610\uB294 \uD074\uB9AD\uC73C\uB85C \uBA85\uB839\uC744 \uC2E4\uD589\uD558\uC138\uC694.",
+  input: "\uBA85\uB839\uC5B4 \uAC80\uC0C9",
+  placeholder: "\uBA85\uB839\uC5B4\uB97C \uAC80\uC0C9\uD558\uC138\uC694...",
+  list: "\uBA85\uB839\uC5B4 \uBAA9\uB85D",
+  empty: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  escape: "ESC"
+};
+function CommandPalette({
+  commands,
+  open,
+  onOpenChange,
+  onSelect,
+  inline = false,
+  labels,
+  footer,
+  empty,
+  inputTrailing,
+  className
+}) {
+  const resolvedLabels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
+  const hasCommands = commands.length > 0;
+  const grouped = useMemo(() => {
+    var _a;
+    const map = /* @__PURE__ */ new Map();
+    for (const cmd of commands) {
+      const list = (_a = map.get(cmd.group)) != null ? _a : [];
+      list.push(cmd);
+      map.set(cmd.group, list);
+    }
+    return map;
+  }, [commands]);
+  const handleSelect = (cmdId) => {
+    const cmd = commands.find((c) => c.id === cmdId);
+    if (!cmd) return;
+    onSelect == null ? void 0 : onSelect(cmd);
+    onOpenChange(false);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Escape" && !inline) {
+      e.preventDefault();
+      onOpenChange(false);
+    }
+  };
+  const body = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      CommandInput,
+      {
+        "aria-label": resolvedLabels.input,
+        placeholder: resolvedLabels.placeholder,
+        onKeyDown: handleInputKeyDown,
+        trailing: inputTrailing != null ? inputTrailing : !inline ? /* @__PURE__ */ jsx2(Kbd, { children: resolvedLabels.escape }) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs2(CommandList, { "aria-label": resolvedLabels.list, children: [
+      /* @__PURE__ */ jsx2(CommandEmpty, { children: empty != null ? empty : resolvedLabels.empty }),
+      hasCommands ? Array.from(grouped.entries()).map(([group, items]) => /* @__PURE__ */ jsx2(CommandGroup, { heading: group, children: items.map((cmd) => /* @__PURE__ */ jsxs2(
+        CommandItem,
+        {
+          value: cmd.id,
+          keywords: [
+            cmd.label,
+            cmd.group,
+            ...cmd.shortcut ? [cmd.shortcut] : []
+          ],
+          onSelect: handleSelect,
+          children: [
+            /* @__PURE__ */ jsx2("span", { children: cmd.label }),
+            cmd.shortcut && /* @__PURE__ */ jsx2(CommandShortcut, { children: cmd.shortcut })
+          ]
+        },
+        cmd.id
+      )) }, group)) : null
+    ] }),
+    footer
+  ] });
+  if (inline) {
+    if (!open) return null;
+    return /* @__PURE__ */ jsx2(
+      Command,
+      {
+        className: cn(
+          "border-border bg-surface w-full max-w-lg border shadow-lg",
+          className
+        ),
+        "data-opt-id": "ATTF5",
+        "data-opt-slug": "command-palette.CommandPalette",
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    CommandDialog,
+    {
+      open,
+      onOpenChange,
+      title: resolvedLabels.title,
+      description: resolvedLabels.description,
+      className,
+      "data-opt-id": "ATTF5",
+      "data-opt-slug": "command-palette.CommandPalette",
+      children: body
+    }
+  );
+}
+
+// src/shells/command-palette-trigger.tsx
+import { useCallback, useEffect, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CommandPaletteTrigger({
+  commands,
+  onSelect,
+  labels
+}) {
+  if (commands.length === 0) return null;
+  const [open, setOpen] = useState(false);
+  const handleKeyDown = useCallback((e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  return /* @__PURE__ */ jsx3(
+    CommandPalette,
+    {
+      commands,
+      open,
+      onOpenChange: setOpen,
+      onSelect,
+      labels,
+      "data-opt-id": "4FCDB",
+      "data-opt-slug": "command-palette-trigger.CommandPaletteTrigger"
+    }
+  );
+}
+
+// src/shells/dashboard-grid.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var defaultLabels = {
+  ariaLabel: "\uB300\uC2DC\uBCF4\uB4DC \uD1B5\uACC4"
+};
+var MIN_DASHBOARD_COLUMNS = 1;
+var MAX_DASHBOARD_COLUMNS = 12;
+function normalizeDashboardColumns(columns) {
+  if (!Number.isFinite(columns)) return MIN_DASHBOARD_COLUMNS;
+  return Math.min(
+    MAX_DASHBOARD_COLUMNS,
+    Math.max(MIN_DASHBOARD_COLUMNS, Math.floor(columns))
+  );
+}
+function DashboardGrid({
+  stats,
+  columns = 3,
+  labels: customLabels
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels), customLabels);
+  const columnCount = normalizeDashboardColumns(columns);
+  const rowStyle = {
+    "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))`
+  };
+  const rows = [];
+  for (let i = 0; i < stats.length; i += columnCount) {
+    rows.push(stats.slice(i, i + columnCount));
+  }
+  return /* @__PURE__ */ jsx4(
+    CompositeProvider,
+    {
+      focusLoop: true,
+      focusWrap: true,
+      "data-opt-id": "BM7NA",
+      "data-opt-slug": "dashboard-grid.DashboardGrid",
+      children: /* @__PURE__ */ jsx4(
+        Composite,
+        {
+          role: "grid",
+          "aria-label": labels.ariaLabel,
+          className: "gap-group flex flex-col",
+          children: rows.map((row, ri) => /* @__PURE__ */ jsx4(
+            CompositeRow,
+            {
+              className: "gap-group grid grid-cols-1 sm:[grid-template-columns:var(--opt-dashboard-grid-columns)]",
+              style: rowStyle,
+              children: row.map((stat) => /* @__PURE__ */ jsx4(
+                CompositeItem,
+                {
+                  className: "data-[active-item]:ring-ring data-[active-item]:ring-offset-ring-offset data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-ring-offset rounded-xl outline-none data-[active-item]:ring-2 data-[active-item]:ring-offset-2 data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2",
+                  render: /* @__PURE__ */ jsx4("div", { role: "gridcell" }),
+                  children: /* @__PURE__ */ jsx4(StatCard, __spreadValues({}, stat))
+                },
+                stat.id
+              ))
+            },
+            ri
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/shells/search-combobox.tsx
+import { matchSorter } from "match-sorter";
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultLabels2 = {
+  noResults: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  loading: "Loading\u2026"
+};
+function SearchCombobox({
+  items,
+  placeholder = "\uAC80\uC0C9...",
+  label = "\uAC80\uC0C9",
+  onSelect,
+  labels: customLabels,
+  async: isAsync = false,
+  onSearch,
+  debounceMs = 300
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels2), customLabels);
+  const inputId = useId();
+  const [query, setQuery] = useState2("");
+  const [asyncResults, setAsyncResults] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const timerRef = useRef(void 0);
+  const searchGenerationRef = useRef(0);
+  const syncMatches = useMemo2(() => {
+    if (isAsync) return [];
+    if (!query) return items;
+    return matchSorter(items, query);
+  }, [query, items, isAsync]);
+  const handleInput = (event) => {
+    searchGenerationRef.current += 1;
+    setQuery(event.currentTarget.value);
+  };
+  const handleValueChange = (item) => {
+    searchGenerationRef.current += 1;
+    setQuery(item);
+    onSelect == null ? void 0 : onSelect(item);
+  };
+  useEffect2(() => {
+    const generation = ++searchGenerationRef.current;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (!isAsync || !onSearch) {
+      setLoading(false);
+      return;
+    }
+    if (!query) {
+      setAsyncResults([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    timerRef.current = setTimeout(async () => {
+      try {
+        const results = await onSearch(query);
+        if (searchGenerationRef.current !== generation) {
+          return;
+        }
+        setAsyncResults(results);
+      } finally {
+        if (searchGenerationRef.current === generation) {
+          setLoading(false);
+        }
+      }
+    }, debounceMs);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [query, isAsync, onSearch, debounceMs]);
+  const matches = isAsync ? asyncResults : syncMatches;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: "gap-element flex flex-col",
+      "data-opt-id": "KH4TQ",
+      "data-opt-slug": "search-combobox.SearchCombobox",
+      children: /* @__PURE__ */ jsxs3(ComboboxRoot, { onValueChange: handleValueChange, children: [
+        /* @__PURE__ */ jsx5("label", { htmlFor: inputId, className: OPT_TEXT_LABEL, children: label }),
+        /* @__PURE__ */ jsx5(
+          ComboboxInput,
+          {
+            id: inputId,
+            placeholder,
+            className: "max-w-xs",
+            "aria-busy": loading || void 0,
+            onInput: handleInput
+          }
+        ),
+        /* @__PURE__ */ jsx5(ComboboxPopover, { className: "max-w-xs", children: isAsync && loading ? /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "text-text-secondary gap-element flex items-center px-3 py-2 text-sm",
+            role: "status",
+            "aria-live": "polite",
+            "aria-busy": "true",
+            children: [
+              /* @__PURE__ */ jsx5(Spinner, { size: "sm", "aria-hidden": "true" }),
+              labels.loading
+            ]
+          }
+        ) : matches.length === 0 ? /* @__PURE__ */ jsx5(ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ jsx5(ComboboxItem, { value: item, children: item }, item)) })
+      ] })
+    }
+  );
+}
+
+// src/shells/status-select.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultLabels3 = {
+  selectLabel: "\uC0C1\uD0DC",
+  emptyMessage: "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uC0C1\uD0DC \uC635\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
+};
+function StatusSelect({
+  options,
+  value: controlledValue,
+  onChange,
+  label,
+  labels: customLabels
+}) {
+  var _a, _b;
+  const labels = __spreadValues(__spreadValues({}, defaultLabels3), customLabels);
+  const resolvedLabel = label != null ? label : labels.selectLabel;
+  const [internalValue, setInternalValue] = useState3((_b = (_a = options[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  const value = controlledValue != null ? controlledValue : internalValue;
+  const selected = options.find((s) => s.value === value);
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "gap-element flex flex-col",
+        "data-opt-id": "R46E6",
+        "data-opt-slug": "status-select.StatusSelect",
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: OPT_TEXT_LABEL, children: resolvedLabel }),
+          /* @__PURE__ */ jsx6("span", { className: "text-text-tertiary text-sm", children: labels.emptyMessage })
+        ]
+      }
+    );
+  }
+  const handleChange = (v) => {
+    var _a2;
+    const next = Array.isArray(v) ? (_a2 = v[0]) != null ? _a2 : "" : v;
+    if (onChange) onChange(next);
+    else setInternalValue(next);
+  };
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "gap-element flex flex-col",
+      "data-opt-id": "R46E6",
+      "data-opt-slug": "status-select.StatusSelect",
+      children: /* @__PURE__ */ jsxs4(SelectRoot, { value, onValueChange: handleChange, children: [
+        /* @__PURE__ */ jsx6(SelectLabel, { className: OPT_TEXT_LABEL, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs4(
+          SelectTrigger,
+          {
+            className: `${OPT_INPUT} max-w-xs items-center justify-between ${OPT_FOCUS}`,
+            children: [
+              /* @__PURE__ */ jsxs4("span", { className: "gap-element flex items-center", children: [
+                (selected == null ? void 0 : selected.color) && /* @__PURE__ */ jsx6("span", { className: `h-2 w-2 rounded-full ${selected.color}` }),
+                selected == null ? void 0 : selected.label
+              ] }),
+              /* @__PURE__ */ jsx6(
+                "svg",
+                {
+                  className: "text-text-tertiary h-4 w-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx6(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          SelectPopover,
+          {
+            className: `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
+            children: options.map((option) => /* @__PURE__ */ jsxs4(SelectItem, { value: option.value, children: [
+              option.color && /* @__PURE__ */ jsx6("span", { className: `h-2 w-2 rounded-full ${option.color}` }),
+              option.label
+            ] }, option.value))
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/shells/app-menubar.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultLabels4 = {
+  ariaLabel: "Application menu"
+};
+function MenuSection({ menu }) {
+  return /* @__PURE__ */ jsxs5(MenuRoot, { children: [
+    /* @__PURE__ */ jsxs5(MenuTrigger, { children: [
+      menu.label,
+      /* @__PURE__ */ jsx7(MenuButtonArrow, {})
+    ] }),
+    /* @__PURE__ */ jsx7(MenuPopover, { children: menu.items.map((item, i) => {
+      var _a, _b, _c, _d;
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsx7(MenuSeparator, {}, `sep-${i}`);
+      }
+      if (item.type === "checkbox") {
+        return /* @__PURE__ */ jsx7(
+          MenuItemCheckbox,
+          {
+            name: (_a = item.name) != null ? _a : item.id,
+            value: (_b = item.value) != null ? _b : item.id,
+            checked: item.checked,
+            onChange: item.onChange,
+            children: /* @__PURE__ */ jsxs5("span", { className: "gap-element flex items-center", children: [
+              /* @__PURE__ */ jsx7("span", { className: "w-4 text-center", children: item.checked ? "\u2713" : "" }),
+              item.label
+            ] })
+          },
+          item.id
+        );
+      }
+      if (item.type === "radio") {
+        return /* @__PURE__ */ jsx7(
+          MenuItemRadio,
+          {
+            name: (_c = item.name) != null ? _c : "",
+            value: (_d = item.value) != null ? _d : "",
+            checked: item.checked,
+            onChange: item.onChange,
+            children: /* @__PURE__ */ jsxs5("span", { className: "gap-element flex items-center", children: [
+              /* @__PURE__ */ jsx7("span", { className: "w-4 text-center", children: item.checked ? "\u25CF" : "" }),
+              item.label
+            ] })
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsxs5(MenuItem, { onClick: item.onClick, children: [
+        /* @__PURE__ */ jsx7("span", { children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx7(Kbd, { children: item.shortcut })
+      ] }, item.id);
+    }) })
+  ] });
+}
+function AppMenubar({ menus, labels: customLabels }) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels4), customLabels);
+  if (menus.length === 0) return null;
+  return /* @__PURE__ */ jsx7(MenubarRoot, { "data-opt-id": "BGKHW", "data-opt-slug": "app-menubar.AppMenubar", children: /* @__PURE__ */ jsx7(MenubarContainer, { "aria-label": labels.ariaLabel, children: menus.map((menu) => /* @__PURE__ */ jsx7(MenuSection, { menu }, menu.id)) }) });
+}
+AppMenubar.displayName = "AppMenubar";
+
+// src/shells/sidebar-nav.tsx
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var NAV_ID_PREFIX = "sidebar-nav-";
+function domId(id) {
+  return `${NAV_ID_PREFIX}${id}`;
+}
+var sectionStyles = {
+  // 한글 키
+  \uC2DC\uC791\uD558\uAE30: "text-accent",
+  "\uD575\uC2EC \uAC1C\uB150": "text-info-fg",
+  "\uAD6C\uCD95\xB7\uC6B4\uC601": "text-success-fg",
+  \uB3C4\uAD6C: "text-warning-fg",
+  DataGrid: "text-accent",
+  "\uCEF4\uD3EC\uB10C\uD2B8 \xB7 Core": "text-accent",
+  "\uCEF4\uD3EC\uB10C\uD2B8 \xB7 Visuals": "text-success-fg",
+  "\uCEF4\uD3EC\uB10C\uD2B8 \xB7 Shells": "text-warning-fg",
+  "\uCEF4\uD3EC\uB10C\uD2B8 \xB7 Surfaces": "text-info-fg",
+  "\uAE30\uBCF8 \uCEF4\uD3EC\uB10C\uD2B8": "text-accent",
+  "\uBE14\uB85D \uCEF4\uD3EC\uB10C\uD2B8": "text-info-fg",
+  "\uC870\uD569 \uCEF4\uD3EC\uB10C\uD2B8": "text-warning-fg",
+  \uD15C\uD50C\uB9BF: "text-text-tertiary",
+  \uB9B4\uB9AC\uC988: "text-text-tertiary",
+  // 영문 키 (하위 호환)
+  Primitives: "text-accent",
+  Blocks: "text-info-fg",
+  Compositions: "text-warning-fg",
+  Templates: "text-text-tertiary"
+};
+var defaultSectionStyle = "text-text-secondary";
+var defaultLabels5 = {
+  ariaLabel: "\uBB38\uC11C \uB124\uBE44\uAC8C\uC774\uC158"
+};
+function SidebarNav({ items, labels: customLabels }) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels5), customLabels);
+  if (items.length === 0) {
+    return null;
+  }
+  const pathname = usePathname();
+  const activeItem = items.find((item) => item.href === pathname);
+  const [activeId, setActiveId] = useState4(
+    activeItem ? domId(activeItem.id) : void 0
+  );
+  useEffect3(() => {
+    const match = items.find((item) => item.href === pathname);
+    if (match) {
+      setActiveId(domId(match.id));
+    }
+  }, [pathname, items]);
+  return /* @__PURE__ */ jsx8(
+    CompositeProvider,
+    {
+      focusLoop: true,
+      orientation: "vertical",
+      activeId,
+      onActiveIdChange: setActiveId,
+      "data-opt-id": "1FZNH",
+      "data-opt-slug": "sidebar-nav.SidebarNav",
+      children: /* @__PURE__ */ jsx8(
+        Composite,
+        {
+          role: "navigation",
+          "aria-label": labels.ariaLabel,
+          className: "flex flex-col",
+          children: items.map((item, index) => {
+            var _a, _b;
+            const isSelected = pathname === item.href;
+            const isFirstItem = index === 0;
+            const sectionTextStyle = item.sectionLabel ? (_a = sectionStyles[item.sectionLabel]) != null ? _a : defaultSectionStyle : defaultSectionStyle;
+            return /* @__PURE__ */ jsxs6("div", { children: [
+              item.separator && /* @__PURE__ */ jsx8("div", { className: cn("mb-2 pt-2", !isFirstItem && "mt-7"), children: /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  className: cn(
+                    "px-2 text-[11px] font-semibold tracking-wider uppercase",
+                    sectionTextStyle
+                  ),
+                  children: (_b = item.sectionLabel) != null ? _b : ""
+                }
+              ) }),
+              /* @__PURE__ */ jsxs6(
+                CompositeItem,
+                {
+                  id: domId(item.id),
+                  render: /* @__PURE__ */ jsx8(
+                    Link,
+                    {
+                      href: item.href,
+                      className: cn(
+                        // Base styles
+                        "group relative block rounded-md px-2 py-1.5 text-[13px] leading-snug outline-none",
+                        "transition-all duration-150",
+                        // Default state
+                        !isSelected && [
+                          "text-text-secondary",
+                          // Hover
+                          "hover:bg-bg-subtle hover:text-text-primary"
+                        ],
+                        // Selected (current page)
+                        isSelected && [
+                          "bg-bg-subtle text-text-primary font-medium"
+                        ],
+                        // Keyboard navigation focus (roving tabindex active)
+                        "data-[active-item]:bg-accent-subtle data-[active-item]:text-accent",
+                        // Focus visible (actual keyboard focus indicator)
+                        "data-[focus-visible]:ring-ring data-[focus-visible]:ring-2",
+                        "data-[focus-visible]:ring-offset-ring-offset data-[focus-visible]:ring-offset-2",
+                        // Combined: selected + keyboard active
+                        isSelected && [
+                          "data-[active-item]:bg-accent-subtle data-[active-item]:text-accent"
+                        ]
+                      )
+                    }
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "span",
+                      {
+                        className: cn(
+                          "absolute top-1/2 left-0 h-4 w-0.5 -translate-y-1/2 rounded-full transition-all duration-150",
+                          // Selected: solid accent bar
+                          isSelected && "bg-accent",
+                          // Keyboard active (not selected): lighter bar
+                          !isSelected && "group-data-[active-item]:bg-accent bg-transparent",
+                          // Focus visible: ensure bar is visible
+                          "group-data-[focus-visible]:bg-accent"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("span", { className: "pl-2", children: item.label })
+                  ]
+                }
+              )
+            ] }, item.id);
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/shells/editor-toolbar.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var defaultLabels6 = {
+  ariaLabel: "\uD14D\uC2A4\uD2B8 \uD3B8\uC9D1\uAE30 \uD234\uBC14"
+};
+function ToolbarButtonWithTooltip({
+  button,
+  active,
+  onAction
+}) {
+  return /* @__PURE__ */ jsxs7(TooltipProvider, { children: [
+    /* @__PURE__ */ jsx9(TooltipAnchor, { children: /* @__PURE__ */ jsx9(
+      ToolbarButton,
+      {
+        className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
+        onClick: () => onAction == null ? void 0 : onAction(button.id),
+        children: button.icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(Tooltip, { children: button.label })
+  ] });
+}
+function EditorToolbar({
+  buttons,
+  onAction,
+  activeButtons = [],
+  labels: customLabels
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels6), customLabels);
+  const groups = [];
+  let current = [];
+  for (const btn of buttons) {
+    if (btn.separator) {
+      groups.push(current);
+      current = [];
+    }
+    current.push(btn);
+  }
+  if (current.length) groups.push(current);
+  return /* @__PURE__ */ jsx9(
+    ToolbarRoot,
+    {
+      "data-opt-id": "Z73K6",
+      "data-opt-slug": "editor-toolbar.EditorToolbar",
+      children: /* @__PURE__ */ jsx9(ToolbarContainer, { "aria-label": labels.ariaLabel, children: groups.map((group, gi) => /* @__PURE__ */ jsxs7("span", { className: "contents", children: [
+        gi > 0 && /* @__PURE__ */ jsx9(ToolbarSeparator, {}),
+        group.map((item) => {
+          if (item === "separator") return null;
+          const btn = item;
+          return /* @__PURE__ */ jsx9(
+            ToolbarButtonWithTooltip,
+            {
+              button: btn,
+              active: activeButtons.includes(btn.id),
+              onAction
+            },
+            btn.id
+          );
+        })
+      ] }, gi)) })
+    }
+  );
+}
+
+// src/shells/content-tabs.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultLabels7 = {
+  ariaLabel: "\uCF58\uD150\uCE20 \uD0ED",
+  emptyMessage: "\uD45C\uC2DC\uD560 \uD0ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
+};
+function ContentTabs({
+  tabs,
+  defaultTabId,
+  labels: customLabels
+}) {
+  var _a, _b;
+  const labels = __spreadValues(__spreadValues({}, defaultLabels7), customLabels);
+  if (tabs.length === 0) {
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "text-text-secondary text-sm",
+        "data-opt-id": "9W97K",
+        "data-opt-slug": "content-tabs.ContentTabs",
+        children: labels.emptyMessage
+      }
+    );
+  }
+  const [selectedTabId, setSelectedTabId] = useState5(
+    defaultTabId != null ? defaultTabId : (_a = tabs[0]) == null ? void 0 : _a.id
+  );
+  const handleSelectedTabId = (nextId) => {
+    var _a2;
+    setSelectedTabId(nextId != null ? nextId : (_a2 = tabs[0]) == null ? void 0 : _a2.id);
+  };
+  const activeTab = (_b = tabs.find((tab) => tab.id === selectedTabId)) != null ? _b : tabs[0];
+  return /* @__PURE__ */ jsxs8(
+    TabsRoot,
+    {
+      selectedId: selectedTabId,
+      onSelectedIdChange: handleSelectedTabId,
+      "data-opt-id": "9W97K",
+      "data-opt-slug": "content-tabs.ContentTabs",
+      children: [
+        /* @__PURE__ */ jsx10(TabList, { "aria-label": labels.ariaLabel, children: tabs.map((tab) => /* @__PURE__ */ jsx10(Tab, { id: tab.id, children: tab.label }, tab.id)) }),
+        activeTab && /* @__PURE__ */ jsx10(TabPanel, { tabId: activeTab.id, children: activeTab.content })
+      ]
+    }
+  );
+}
+
+// src/shells/faq-accordion.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var defaultLabels8 = {
+  ariaLabel: "\uC790\uC8FC \uBB3B\uB294 \uC9C8\uBB38",
+  emptyMessage: "\uB4F1\uB85D\uB41C FAQ\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+};
+function FaqAccordion({
+  items,
+  labels: customLabels
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels8), customLabels);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "text-text-secondary text-sm",
+        "data-opt-id": "QRBHV",
+        "data-opt-slug": "faq-accordion.FaqAccordion",
+        children: labels.emptyMessage
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    CompositeProvider,
+    {
+      focusLoop: true,
+      orientation: "vertical",
+      "data-opt-id": "QRBHV",
+      "data-opt-slug": "faq-accordion.FaqAccordion",
+      children: /* @__PURE__ */ jsx11(
+        Composite,
+        {
+          role: "region",
+          "aria-label": labels.ariaLabel,
+          className: "divide-border-subtle border-border divide-y rounded-lg border",
+          children: items.map((faq) => /* @__PURE__ */ jsx11(DisclosureRoot, { children: /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsxs9(CompositeItem, { render: /* @__PURE__ */ jsx11(DisclosureTrigger, {}), children: [
+              faq.question,
+              /* @__PURE__ */ jsx11(
+                "svg",
+                {
+                  className: "text-text-tertiary h-4 w-4 shrink-0 transition-transform [[data-open]>&]:rotate-180",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx11(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx11(DisclosureContent, { children: /* @__PURE__ */ jsx11("p", { className: "text-text-secondary px-4 pt-2 pb-4 text-sm", children: faq.answer }) })
+          ] }) }, faq.id))
+        }
+      )
+    }
+  );
+}
+
+// src/shells/settings-form.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var defaultLabels9 = {
+  formAriaLabel: "\uC124\uC815 \uD3FC",
+  submitButton: "\uC800\uC7A5",
+  successMessage: "\uC124\uC815\uC774 \uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4."
+};
+function SettingsForm({
+  fields,
+  onSubmit,
+  labels: customLabels
+}) {
+  var _a;
+  const labels = __spreadValues(__spreadValues({}, defaultLabels9), customLabels);
+  const [submitted, setSubmitted] = useState6(false);
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsx12(
+      EmptyState,
+      {
+        title: "\uC124\uC815 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+        description: "\uD45C\uC2DC\uD560 \uC124\uC815 \uD544\uB4DC\uB97C \uCD94\uAC00\uD558\uBA74 \uC774 \uD3FC\uC774 \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.",
+        "data-opt-id": "9TEEJ",
+        "data-opt-slug": "settings-form.SettingsForm"
+      }
+    );
+  }
+  const defaultValues = {};
+  for (const field of fields) {
+    defaultValues[field.name] = (_a = field.defaultValue) != null ? _a : field.type === "switch" || field.type === "checkbox" ? false : field.type === "tags" ? [] : "";
+  }
+  const form = useFormStore({
+    defaultValues,
+    validate: (values) => {
+      var _a2;
+      const errors = {};
+      for (const field of fields) {
+        if (field.required) {
+          const value = values[field.name];
+          if (!value || typeof value === "string" && !value.trim()) {
+            errors[field.name] = (_a2 = field.requiredMessage) != null ? _a2 : `${field.label}\uC744(\uB97C) \uC785\uB825\uD574\uC8FC\uC138\uC694.`;
+          }
+        }
+        if (field.validate) {
+          const value = values[field.name];
+          const error = field.validate(value);
+          if (error) {
+            errors[field.name] = error;
+          }
+        }
+      }
+      return errors;
+    },
+    onSubmit: (values) => {
+      setSubmitted(true);
+      onSubmit == null ? void 0 : onSubmit(values);
+    }
+  });
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: "gap-group flex flex-col",
+      "data-opt-id": "9TEEJ",
+      "data-opt-slug": "settings-form.SettingsForm",
+      children: [
+        /* @__PURE__ */ jsxs10(FormRoot, { store: form, "aria-label": labels.formAriaLabel, children: [
+          fields.map((field) => {
+            var _a2, _b, _c, _d, _e;
+            if (field.visible !== void 0) {
+              const currentValues = form.getValues();
+              const isVisible = typeof field.visible === "function" ? field.visible(currentValues) : field.visible;
+              if (!isVisible) return null;
+            }
+            if (field.type === "tags") {
+              const rawValue = form.getValue(field.name);
+              const tags = Array.isArray(rawValue) ? rawValue : [];
+              return /* @__PURE__ */ jsxs10("div", { className: "gap-element flex flex-col", children: [
+                /* @__PURE__ */ jsx12(FormLabel, { name: field.name, children: field.label }),
+                /* @__PURE__ */ jsx12(
+                  TagInput,
+                  {
+                    value: tags,
+                    onChange: (next) => form.setValue(field.name, next),
+                    placeholder: field.placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx12(FormError, { name: field.name })
+              ] }, field.name);
+            }
+            if (field.type === "radio") {
+              return /* @__PURE__ */ jsxs10("fieldset", { className: "gap-element flex flex-col", children: [
+                /* @__PURE__ */ jsx12("legend", { className: "text-text-primary text-sm font-medium", children: field.label }),
+                /* @__PURE__ */ jsx12(FormRadioGroup, { children: /* @__PURE__ */ jsx12("div", { className: "gap-group flex", children: (_a2 = field.options) == null ? void 0 : _a2.map((option) => /* @__PURE__ */ jsxs10(
+                  "label",
+                  {
+                    className: "text-text-primary gap-element flex items-center text-sm",
+                    children: [
+                      /* @__PURE__ */ jsx12(FormRadio, { name: field.name, value: option.value }),
+                      option.label
+                    ]
+                  },
+                  option.value
+                )) }) }),
+                /* @__PURE__ */ jsx12(FormError, { name: field.name })
+              ] }, field.name);
+            }
+            if (field.type === "checkbox") {
+              return /* @__PURE__ */ jsxs10("div", { className: "gap-element flex flex-col", children: [
+                /* @__PURE__ */ jsxs10("label", { className: "text-text-primary gap-element flex items-center text-sm", children: [
+                  /* @__PURE__ */ jsx12(FormCheckbox, { name: field.name }),
+                  /* @__PURE__ */ jsx12("span", { children: field.label })
+                ] }),
+                /* @__PURE__ */ jsx12(FormError, { name: field.name })
+              ] }, field.name);
+            }
+            if (field.type === "textarea") {
+              return /* @__PURE__ */ jsxs10("div", { className: "gap-element flex flex-col", children: [
+                /* @__PURE__ */ jsx12(FormLabel, { name: field.name, children: field.label }),
+                /* @__PURE__ */ jsx12(
+                  FormTextarea,
+                  {
+                    name: field.name,
+                    placeholder: field.placeholder,
+                    rows: (_b = field.rows) != null ? _b : 4,
+                    resize: (_c = field.resize) != null ? _c : "vertical",
+                    className: field.font === "mono" ? "font-mono text-sm" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx12(FormError, { name: field.name })
+              ] }, field.name);
+            }
+            if (field.type === "select") {
+              return /* @__PURE__ */ jsxs10("div", { className: "gap-element flex flex-col", children: [
+                /* @__PURE__ */ jsx12(FormLabel, { name: field.name, children: field.label }),
+                /* @__PURE__ */ jsx12(FormSelect, { name: field.name, placeholder: field.placeholder, children: /* @__PURE__ */ jsx12(FormSelectPopover, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ jsx12(FormSelectItem, { value: option.value, children: option.label }, option.value)) }) }),
+                /* @__PURE__ */ jsx12(FormError, { name: field.name })
+              ] }, field.name);
+            }
+            if (field.type === "switch") {
+              return /* @__PURE__ */ jsxs10("label", { className: "gap-group flex items-center", children: [
+                /* @__PURE__ */ jsx12(FormSwitch, { name: field.name }),
+                /* @__PURE__ */ jsxs10("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx12("span", { className: "text-text-primary text-sm font-medium", children: field.label }),
+                  field.description && /* @__PURE__ */ jsx12("span", { className: "text-text-secondary text-sm", children: field.description })
+                ] })
+              ] }, field.name);
+            }
+            return /* @__PURE__ */ jsxs10("div", { className: "gap-element flex flex-col", children: [
+              /* @__PURE__ */ jsx12(FormLabel, { name: field.name, children: field.label }),
+              /* @__PURE__ */ jsx12(
+                FormInput,
+                {
+                  name: field.name,
+                  type: (_e = field.type) != null ? _e : "text",
+                  placeholder: field.placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx12(FormError, { name: field.name })
+            ] }, field.name);
+          }),
+          /* @__PURE__ */ jsx12(FormSubmit, { children: labels.submitButton })
+        ] }),
+        submitted && /* @__PURE__ */ jsx12("div", { className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm", children: labels.successMessage })
+      ]
+    }
+  );
+}
+
+// src/shells/deployment-timeline.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var statusIcon = {
+  success: "\u25CF",
+  pending: "\u25CC",
+  running: "\u27F3",
+  error: "\u2717",
+  skipped: "\u25CB"
+};
+var statusColor = {
+  success: "text-success-fg",
+  pending: OPT_TEXT_TERTIARY,
+  running: "text-accent",
+  error: "text-danger-fg",
+  skipped: "text-text-tertiary"
+};
+var statusBadge = {
+  success: OPT_BADGE_GREEN,
+  pending: OPT_BADGE_NEUTRAL,
+  running: "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-info-subtle text-info-fg",
+  error: OPT_BADGE_RED,
+  skipped: OPT_BADGE_NEUTRAL
+};
+var statusLabel = {
+  success: "\uC131\uACF5",
+  pending: "\uB300\uAE30",
+  running: "\uC2E4\uD589 \uC911",
+  error: "\uC5D0\uB7EC",
+  skipped: "\uAC74\uB108\uB700"
+};
+function DeploymentTimeline({
+  steps,
+  title = "\uBC30\uD3EC \uD0C0\uC784\uB77C\uC778"
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "gap-group flex flex-col",
+      "data-opt-id": "XXVQ2",
+      "data-opt-slug": "deployment-timeline.DeploymentTimeline",
+      children: [
+        title && /* @__PURE__ */ jsx13("h3", { className: `text-sm font-semibold ${OPT_TEXT_PRIMARY}`, children: title }),
+        /* @__PURE__ */ jsx13(CompositeProvider, { focusLoop: true, orientation: "vertical", children: /* @__PURE__ */ jsx13(Composite, { role: "list", "aria-label": title, className: "relative", children: steps.map((step, i) => {
+          const isLast = i === steps.length - 1;
+          return /* @__PURE__ */ jsxs11(
+            CompositeItem,
+            {
+              className: `group gap-group relative flex w-full scroll-m-2 rounded-lg px-3 py-2 ${OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+              role: "listitem",
+              children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center", children: [
+                  /* @__PURE__ */ jsx13(
+                    "span",
+                    {
+                      className: `text-lg leading-none ${statusColor[step.status]}`,
+                      "aria-label": statusLabel[step.status],
+                      children: statusIcon[step.status]
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx13("div", { className: "bg-border-subtle mt-1 w-px flex-1" })
+                ] }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex-1 pb-3", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "gap-element flex items-center", children: [
+                    /* @__PURE__ */ jsx13("span", { className: `text-sm font-medium ${OPT_TEXT_PRIMARY}`, children: step.name }),
+                    /* @__PURE__ */ jsx13("span", { className: statusBadge[step.status], children: statusLabel[step.status] }),
+                    step.duration && /* @__PURE__ */ jsx13("span", { className: `text-xs ${OPT_TEXT_TERTIARY}`, children: step.duration })
+                  ] }),
+                  step.detail && /* @__PURE__ */ jsx13("p", { className: `mt-0.5 text-xs ${OPT_TEXT_SECONDARY}`, children: step.detail })
+                ] })
+              ]
+            },
+            step.id
+          );
+        }) }) })
+      ]
+    }
+  );
+}
+
+// src/shells/project-switcher.tsx
+import { matchSorter as matchSorter2 } from "match-sorter";
+import { useMemo as useMemo3, useState as useState7 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var statusDot = {
+  active: OPT_DOT_GREEN,
+  paused: OPT_DOT_YELLOW,
+  error: OPT_DOT_RED
+};
+function ProjectSwitcher({
+  projects,
+  value,
+  onChange,
+  placeholder = "\uD504\uB85C\uC81D\uD2B8 \uAC80\uC0C9..."
+}) {
+  const [search, setSearch] = useState7("");
+  const matches = useMemo3(() => {
+    if (!search) return projects;
+    return matchSorter2(projects, search, { keys: ["name", "framework"] });
+  }, [search, projects]);
+  const selected = projects.find((p) => p.id === value);
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: "gap-element flex flex-col",
+      "data-opt-id": "5R3AG",
+      "data-opt-slug": "project-switcher.ProjectSwitcher",
+      children: /* @__PURE__ */ jsxs12(ComboboxRoot, { onValueChange: setSearch, children: [
+        /* @__PURE__ */ jsx14("label", { className: OPT_TEXT_LABEL, children: "\uD504\uB85C\uC81D\uD2B8" }),
+        /* @__PURE__ */ jsx14(
+          ComboboxInput,
+          {
+            placeholder: selected ? selected.name : placeholder,
+            className: OPT_INPUT
+          }
+        ),
+        /* @__PURE__ */ jsxs12(ComboboxPopover, { className: "max-h-72 overflow-y-auto", children: [
+          matches.length === 0 && /* @__PURE__ */ jsx14("p", { className: `py-6 text-center text-sm ${OPT_TEXT_SECONDARY}`, children: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+          matches.map((project) => /* @__PURE__ */ jsxs12(
+            ComboboxItem,
+            {
+              value: project.name,
+              onClick: () => onChange == null ? void 0 : onChange(project.id),
+              className: `gap-element flex scroll-m-2 items-center ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`,
+              children: [
+                /* @__PURE__ */ jsx14("span", { className: `shrink-0 ${statusDot[project.status]}` }),
+                /* @__PURE__ */ jsx14("span", { className: "flex-1 truncate font-medium", children: project.name }),
+                /* @__PURE__ */ jsx14("span", { className: OPT_BADGE_NEUTRAL, children: project.framework }),
+                project.domain && /* @__PURE__ */ jsx14(
+                  "span",
+                  {
+                    className: `truncate text-xs ${OPT_TEXT_SECONDARY} data-[active-item]:text-accent-fg/70`,
+                    children: project.domain
+                  }
+                )
+              ]
+            },
+            project.id
+          ))
+        ] })
+      ] })
+    }
+  );
+}
+ProjectSwitcher.displayName = "ProjectSwitcher";
+
+// src/shells/env-panel.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var defaultLabels10 = {
+  varCount: (count) => `${count}\uAC1C \uBCC0\uC218`,
+  envVarsLabel: (env) => `${env} \uD658\uACBD \uBCC0\uC218`,
+  secretBadge: "secret"
+};
+var envDot = {
+  Production: OPT_DOT_RED,
+  Preview: OPT_DOT_YELLOW,
+  Development: OPT_DOT_GREEN
+};
+function EnvPanel({ groups, labels: customLabels }) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels10), customLabels);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: `rounded-lg ${OPT_BORDER} divide-y ${OPT_DIVIDER} bg-surface`,
+      "data-opt-id": "ZBDWK",
+      "data-opt-slug": "env-panel.EnvPanel",
+      children: groups.map((group) => {
+        var _a;
+        return /* @__PURE__ */ jsx15(
+          DisclosureRoot,
+          {
+            defaultOpen: group.env === "Production",
+            children: /* @__PURE__ */ jsxs13("div", { children: [
+              /* @__PURE__ */ jsxs13(DisclosureTrigger, { className: OPT_DISCLOSURE_TRIGGER, children: [
+                /* @__PURE__ */ jsxs13("span", { className: "gap-element flex items-center", children: [
+                  /* @__PURE__ */ jsx15(
+                    "span",
+                    {
+                      className: (_a = envDot[group.env]) != null ? _a : "bg-bg-muted h-2 w-2 rounded-full"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx15("span", { className: "font-medium", children: group.env }),
+                  /* @__PURE__ */ jsx15("span", { className: `text-xs ${OPT_TEXT_TERTIARY}`, children: labels.varCount(group.vars.length) })
+                ] }),
+                /* @__PURE__ */ jsx15(
+                  "svg",
+                  {
+                    className: "text-text-tertiary h-4 w-4 shrink-0 transition-transform [[data-open]>&]:rotate-180",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx15(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx15(DisclosureContent, { className: OPT_DISCLOSURE_CONTENT, children: /* @__PURE__ */ jsx15(CompositeProvider, { focusLoop: true, orientation: "vertical", children: /* @__PURE__ */ jsx15(
+                Composite,
+                {
+                  role: "list",
+                  "aria-label": labels.envVarsLabel(group.env),
+                  className: "px-4 pb-3",
+                  children: group.vars.map((v) => /* @__PURE__ */ jsxs13(
+                    CompositeItem,
+                    {
+                      role: "listitem",
+                      className: `gap-group flex scroll-m-2 items-center rounded px-2 py-1.5 text-sm ${OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+                      children: [
+                        /* @__PURE__ */ jsx15(
+                          "span",
+                          {
+                            className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${OPT_TEXT_PRIMARY}`,
+                            children: v.key
+                          }
+                        ),
+                        /* @__PURE__ */ jsx15(
+                          "span",
+                          {
+                            className: `flex-1 truncate font-mono text-xs ${OPT_TEXT_SECONDARY}`,
+                            children: v.isSecret ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : v.value
+                          }
+                        ),
+                        v.isSecret && /* @__PURE__ */ jsx15("span", { className: OPT_BADGE_NEUTRAL, children: labels.secretBadge })
+                      ]
+                    },
+                    v.key
+                  ))
+                }
+              ) }) })
+            ] })
+          },
+          group.env
+        );
+      })
+    }
+  );
+}
+
+// src/shells/branch-select.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var defaultLabels11 = {
+  selectLabel: "\uBE0C\uB79C\uCE58",
+  emptySelectionLabel: "\uC120\uD0DD...",
+  emptyMessage: "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uBE0C\uB79C\uCE58\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  defaultBadge: "default"
+};
+function BranchSelect({
+  branches,
+  value: controlledValue,
+  onChange,
+  label,
+  labels: customLabels
+}) {
+  var _a, _b, _c, _d;
+  const labels = __spreadValues(__spreadValues({}, defaultLabels11), customLabels);
+  const resolvedLabel = label != null ? label : labels.selectLabel;
+  const defaultBranch = branches.find((b) => b.isDefault);
+  const [internalValue, setInternalValue] = useState8(
+    (_c = (_b = defaultBranch == null ? void 0 : defaultBranch.name) != null ? _b : (_a = branches[0]) == null ? void 0 : _a.name) != null ? _c : ""
+  );
+  const value = controlledValue != null ? controlledValue : internalValue;
+  const selected = branches.find((b) => b.name === value);
+  if (branches.length === 0) {
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: "gap-element flex flex-col",
+        "data-opt-id": "7EDEP",
+        "data-opt-slug": "branch-select.BranchSelect",
+        children: [
+          /* @__PURE__ */ jsx16("span", { className: OPT_TEXT_LABEL, children: resolvedLabel }),
+          /* @__PURE__ */ jsx16("span", { className: OPT_TEXT_TERTIARY, children: labels.emptyMessage })
+        ]
+      }
+    );
+  }
+  const handleChange = (v) => {
+    var _a2;
+    const next = Array.isArray(v) ? (_a2 = v[0]) != null ? _a2 : "" : v;
+    if (onChange) onChange(next);
+    else setInternalValue(next);
+  };
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: "gap-element flex flex-col",
+      "data-opt-id": "7EDEP",
+      "data-opt-slug": "branch-select.BranchSelect",
+      children: /* @__PURE__ */ jsxs14(SelectRoot, { value, onValueChange: handleChange, children: [
+        /* @__PURE__ */ jsx16(SelectLabel, { className: OPT_TEXT_LABEL, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs14(
+          SelectTrigger,
+          {
+            className: `${OPT_INPUT} max-w-xs items-center justify-between gap-1`,
+            children: [
+              /* @__PURE__ */ jsxs14("span", { className: "gap-element flex items-center truncate", children: [
+                /* @__PURE__ */ jsx16(
+                  "svg",
+                  {
+                    className: "text-text-tertiary h-4 w-4 shrink-0",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx16(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx16("span", { className: "truncate", children: (_d = selected == null ? void 0 : selected.name) != null ? _d : labels.emptySelectionLabel }),
+                (selected == null ? void 0 : selected.isDefault) && /* @__PURE__ */ jsx16("span", { className: OPT_BADGE_BLUE, children: labels.defaultBadge })
+              ] }),
+              /* @__PURE__ */ jsx16(
+                "svg",
+                {
+                  className: "text-text-tertiary h-4 w-4 shrink-0",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx16(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx16(SelectPopover, { className: "max-w-xs", children: branches.map((branch) => /* @__PURE__ */ jsxs14(
+          SelectItem,
+          {
+            value: branch.name,
+            className: `gap-element flex scroll-m-2 items-center ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`,
+            children: [
+              /* @__PURE__ */ jsx16("span", { className: "flex-1 truncate", children: branch.name }),
+              branch.isDefault && /* @__PURE__ */ jsx16("span", { className: "bg-accent-subtle text-accent data-[active-item]:bg-accent-fg/20 data-[active-item]:text-accent-fg rounded-full px-2 py-0.5 text-[11px] font-medium", children: labels.defaultBadge }),
+              branch.lastCommit && /* @__PURE__ */ jsx16(
+                "span",
+                {
+                  className: `font-mono text-xs ${OPT_TEXT_TERTIARY} data-[active-item]:text-accent-fg/60`,
+                  children: branch.lastCommit
+                }
+              ),
+              branch.author && /* @__PURE__ */ jsx16(
+                "span",
+                {
+                  className: `text-xs ${OPT_TEXT_TERTIARY} data-[active-item]:text-accent-fg/60`,
+                  children: branch.author
+                }
+              )
+            ]
+          },
+          branch.name
+        )) })
+      ] })
+    }
+  );
+}
+BranchSelect.displayName = "BranchSelect";
+
+// src/shells/domain-table.tsx
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var defaultLabels12 = {
+  domain: "Domain",
+  status: "Status",
+  ssl: "SSL",
+  redirect: "Redirect",
+  added: "Added",
+  emptyMessage: "No domains configured"
+};
+var statusBadge2 = {
+  active: OPT_BADGE_GREEN,
+  pending: OPT_BADGE_YELLOW,
+  error: OPT_BADGE_RED
+};
+var sslBadge = {
+  valid: OPT_BADGE_GREEN,
+  pending: OPT_BADGE_YELLOW,
+  expired: OPT_BADGE_RED
+};
+var statusLabel2 = {
+  active: "Active",
+  pending: "Pending",
+  error: "Error"
+};
+var sslLabel = {
+  valid: "Valid",
+  pending: "Pending",
+  expired: "Expired"
+};
+function DomainTable({
+  domains,
+  title = "\uB3C4\uBA54\uC778",
+  labels: customLabels
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels12), customLabels);
+  if (domains.length === 0) {
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: "gap-group flex flex-col",
+        "data-opt-id": "A7SRM",
+        "data-opt-slug": "domain-table.DomainTable",
+        children: [
+          title && /* @__PURE__ */ jsx17("h3", { className: `text-sm font-semibold ${OPT_TEXT_PRIMARY}`, children: title }),
+          /* @__PURE__ */ jsx17(
+            "div",
+            {
+              className: `rounded-lg px-4 py-6 text-sm ${OPT_BORDER} ${OPT_TEXT_SECONDARY} bg-surface`,
+              children: labels.emptyMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: "gap-group flex flex-col",
+      "data-opt-id": "A7SRM",
+      "data-opt-slug": "domain-table.DomainTable",
+      children: [
+        title && /* @__PURE__ */ jsx17("h3", { className: `text-sm font-semibold ${OPT_TEXT_PRIMARY}`, children: title }),
+        /* @__PURE__ */ jsx17("div", { className: `overflow-x-auto rounded-lg ${OPT_BORDER} bg-surface`, children: /* @__PURE__ */ jsx17(CompositeProvider, { focusLoop: true, focusWrap: true, children: /* @__PURE__ */ jsxs15(
+          Composite,
+          {
+            role: "grid",
+            "aria-label": title,
+            className: "w-full",
+            render: /* @__PURE__ */ jsx17("table", {}),
+            children: [
+              /* @__PURE__ */ jsx17("thead", { className: "border-border-subtle bg-surface-inset border-b", children: /* @__PURE__ */ jsxs15("tr", { children: [
+                /* @__PURE__ */ jsx17("th", { className: OPT_TH, children: labels.domain }),
+                /* @__PURE__ */ jsx17("th", { className: OPT_TH, children: labels.status }),
+                /* @__PURE__ */ jsx17("th", { className: OPT_TH, children: labels.ssl }),
+                /* @__PURE__ */ jsx17("th", { className: OPT_TH, children: labels.redirect }),
+                /* @__PURE__ */ jsx17("th", { className: OPT_TH, children: labels.added })
+              ] }) }),
+              /* @__PURE__ */ jsx17("tbody", { className: `divide-y ${OPT_DIVIDER}`, children: domains.map((d) => {
+                var _a, _b;
+                return /* @__PURE__ */ jsxs15(CompositeRow, { render: /* @__PURE__ */ jsx17("tr", {}), children: [
+                  /* @__PURE__ */ jsx17(
+                    CompositeItem,
+                    {
+                      render: /* @__PURE__ */ jsx17(
+                        "td",
+                        {
+                          className: `${OPT_TD} font-mono font-medium`,
+                          role: "gridcell"
+                        }
+                      ),
+                      className: OPT_TABLE_ROW_ACTIVE,
+                      children: d.domain
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    CompositeItem,
+                    {
+                      render: /* @__PURE__ */ jsx17("td", { className: OPT_TD, role: "gridcell" }),
+                      className: OPT_TABLE_ROW_ACTIVE,
+                      children: /* @__PURE__ */ jsx17("span", { className: statusBadge2[d.status], children: statusLabel2[d.status] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    CompositeItem,
+                    {
+                      render: /* @__PURE__ */ jsx17("td", { className: OPT_TD, role: "gridcell" }),
+                      className: OPT_TABLE_ROW_ACTIVE,
+                      children: /* @__PURE__ */ jsx17("span", { className: sslBadge[d.ssl], children: sslLabel[d.ssl] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    CompositeItem,
+                    {
+                      render: /* @__PURE__ */ jsx17("td", { className: OPT_TD, role: "gridcell" }),
+                      className: OPT_TABLE_ROW_ACTIVE,
+                      children: (_a = d.redirect) != null ? _a : "\u2014"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    CompositeItem,
+                    {
+                      render: /* @__PURE__ */ jsx17("td", { className: OPT_TD_MUTED, role: "gridcell" }),
+                      className: OPT_TABLE_ROW_ACTIVE,
+                      children: (_b = d.addedAt) != null ? _b : "\u2014"
+                    }
+                  )
+                ] }, d.domain);
+              }) })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/shells/data-table.tsx
+import {
+  useState as useState9,
+  useMemo as useMemo4,
+  useCallback as useCallback2,
+  Fragment as Fragment2
+} from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var MIN_COLUMN_WIDTH = 40;
+var DEFAULT_COLUMN_RESIZE_MAX = 1200;
+var alignmentClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function getCellValue(row, accessor) {
+  if (typeof accessor === "function") {
+    try {
+      return accessor(row);
+    } catch (e) {
+      return "\u2014";
+    }
+  }
+  const value = row[accessor];
+  if (value === null || value === void 0 || typeof value === "number" && !Number.isFinite(value)) {
+    return "\u2014";
+  }
+  return String(value);
+}
+function getRawValue(row, accessor) {
+  if (typeof accessor === "function") {
+    return accessor(row);
+  }
+  return row[accessor];
+}
+function isMissingSortValue(value) {
+  return value == null || typeof value === "number" && !Number.isFinite(value);
+}
+function compareSortValues(aVal, bVal, dir) {
+  const aMissing = isMissingSortValue(aVal);
+  const bMissing = isMissingSortValue(bVal);
+  if (aMissing && bMissing) return 0;
+  if (aMissing) return 1;
+  if (bMissing) return -1;
+  const cmp = typeof aVal === "number" && typeof bVal === "number" ? aVal - bVal : String(aVal).localeCompare(String(bVal));
+  return dir === "desc" ? -cmp : cmp;
+}
+function clampPercent(ratio) {
+  if (!Number.isFinite(ratio)) return 0;
+  return Math.min(100, Math.max(0, Math.round(ratio * 100)));
+}
+function getResizeHandleValue(currentWidth, configuredWidth) {
+  if (typeof currentWidth === "number" && Number.isFinite(currentWidth)) {
+    return Math.max(MIN_COLUMN_WIDTH, Math.round(currentWidth));
+  }
+  const pxWidth = configuredWidth == null ? void 0 : configuredWidth.trim().match(/^(\d+(?:\.\d+)?)px$/);
+  if (pxWidth) {
+    return Math.max(MIN_COLUMN_WIDTH, Math.round(Number(pxWidth[1])));
+  }
+  return MIN_COLUMN_WIDTH;
+}
+function DataTableProgressBar({
+  value,
+  barColor,
+  label
+}) {
+  const percent = clampPercent(value);
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: "bg-bg-subtle mt-1 h-1.5 w-full overflow-hidden rounded-full",
+      role: "progressbar",
+      "aria-valuenow": percent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": `${percent}%`,
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: cn("h-full rounded-full transition-all", barColor),
+          style: { width: `${percent}%` }
+        }
+      )
+    }
+  );
+}
+function DataTable({
+  data,
+  columns,
+  keyExtractor,
+  title = "Data Table",
+  onRowClick,
+  emptyMessage = "No data available",
+  activeRowId,
+  sortable = false,
+  selectable = false,
+  selectedKeys,
+  onSelectionChange,
+  expandable = false,
+  renderExpanded,
+  pageSize,
+  stickyHeader = false,
+  resizableColumns = false,
+  onSort: onSortExternal,
+  className
+}) {
+  const [sortCol, setSortCol] = useState9(null);
+  const [sortDir, setSortDir] = useState9(null);
+  const [expandedKeys, setExpandedKeys] = useState9(/* @__PURE__ */ new Set());
+  const [page, setPage] = useState9(0);
+  const [colWidths, setColWidths] = useState9({});
+  const sortedData = useMemo4(() => {
+    if (!sortable || !sortCol || !sortDir) return data;
+    const col = columns.find((c) => c.id === sortCol);
+    if (!col) return data;
+    return [...data].sort((a, b) => {
+      const aVal = getRawValue(a, col.accessor);
+      const bVal = getRawValue(b, col.accessor);
+      return compareSortValues(aVal, bVal, sortDir);
+    });
+  }, [data, sortable, sortCol, sortDir, columns]);
+  const totalPages = pageSize ? Math.ceil(sortedData.length / pageSize) : 1;
+  const pagedData = pageSize ? sortedData.slice(page * pageSize, (page + 1) * pageSize) : sortedData;
+  const handleSort = useCallback2(
+    (colId) => {
+      if (!sortable) return;
+      let nextDir;
+      if (sortCol === colId) {
+        nextDir = sortDir === "asc" ? "desc" : sortDir === "desc" ? null : "asc";
+        setSortDir(nextDir);
+        if (nextDir === null) setSortCol(null);
+      } else {
+        setSortCol(colId);
+        setSortDir("asc");
+        nextDir = "asc";
+      }
+      setPage(0);
+      if (onSortExternal) {
+        onSortExternal(colId, nextDir);
+      }
+    },
+    [sortable, sortCol, sortDir, onSortExternal]
+  );
+  const toggleExpand = useCallback2((key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const selected = selectedKeys != null ? selectedKeys : [];
+  const selectedSet = useMemo4(
+    () => new Set(selectedKeys != null ? selectedKeys : []),
+    [selectedKeys]
+  );
+  const allKeys = data.map(keyExtractor);
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
+  const toggleSelectAll = useCallback2(() => {
+    if (!onSelectionChange) return;
+    onSelectionChange(allSelected ? [] : allKeys);
+  }, [allSelected, allKeys, onSelectionChange]);
+  const toggleSelectRow = useCallback2(
+    (key) => {
+      if (!onSelectionChange) return;
+      onSelectionChange(
+        selectedSet.has(key) ? selected.filter((k) => k !== key) : [...selected, key]
+      );
+    },
+    [selected, selectedSet, onSelectionChange]
+  );
+  const sortIndicator = (colId) => {
+    if (sortCol !== colId) return null;
+    return sortDir === "asc" ? " \u25B2" : sortDir === "desc" ? " \u25BC" : null;
+  };
+  const colCount = columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0);
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: cn("gap-group flex flex-col", className),
+      "data-opt-id": "J1KN4",
+      "data-opt-slug": "data-table.DataTable",
+      children: [
+        title && /* @__PURE__ */ jsx18("h3", { className: cn("text-sm font-semibold", OPT_TEXT_PRIMARY), children: title }),
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: cn("overflow-x-auto rounded-lg", OPT_BORDER, "bg-surface"),
+            children: data.length === 0 ? /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: cn("px-4 py-8 text-center text-sm", OPT_TEXT_SECONDARY),
+                children: emptyMessage
+              }
+            ) : /* @__PURE__ */ jsx18(CompositeProvider, { focusLoop: true, focusWrap: true, children: /* @__PURE__ */ jsxs16(
+              Composite,
+              {
+                role: "grid",
+                "aria-label": title,
+                className: "w-full",
+                render: /* @__PURE__ */ jsx18("table", {}),
+                children: [
+                  /* @__PURE__ */ jsx18(
+                    "thead",
+                    {
+                      className: cn(
+                        "border-border-subtle bg-surface-inset border-b",
+                        stickyHeader && "sticky top-0 z-10"
+                      ),
+                      children: /* @__PURE__ */ jsxs16("tr", { children: [
+                        selectable && /* @__PURE__ */ jsx18("th", { className: cn(OPT_TH, "w-10"), children: /* @__PURE__ */ jsx18(
+                          Checkbox,
+                          {
+                            checked: allSelected,
+                            onChange: toggleSelectAll,
+                            "aria-label": "Select all"
+                          }
+                        ) }),
+                        expandable && /* @__PURE__ */ jsx18("th", { className: cn(OPT_TH, "w-10") }),
+                        columns.map((col) => {
+                          var _a;
+                          const isSortable = sortable && col.sortable !== false;
+                          const resizeValue = getResizeHandleValue(
+                            colWidths[col.id],
+                            col.width
+                          );
+                          const resizeMax = Math.max(
+                            DEFAULT_COLUMN_RESIZE_MAX,
+                            resizeValue
+                          );
+                          return /* @__PURE__ */ jsxs16(
+                            "th",
+                            {
+                              className: cn(
+                                OPT_TH,
+                                "relative",
+                                alignmentClass[(_a = col.align) != null ? _a : "left"],
+                                isSortable && "hover:text-text-primary cursor-pointer select-none"
+                              ),
+                              style: {
+                                width: colWidths[col.id] || col.width || void 0
+                              },
+                              onClick: isSortable ? () => handleSort(col.id) : void 0,
+                              "aria-sort": sortCol === col.id && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+                              children: [
+                                /* @__PURE__ */ jsxs16("span", { className: "flex items-center", children: [
+                                  col.header,
+                                  sortIndicator(col.id)
+                                ] }),
+                                resizableColumns && /* @__PURE__ */ jsx18(
+                                  "span",
+                                  {
+                                    role: "separator",
+                                    "aria-orientation": "vertical",
+                                    "aria-label": `Resize ${col.header}`,
+                                    "aria-valuemin": MIN_COLUMN_WIDTH,
+                                    "aria-valuemax": resizeMax,
+                                    "aria-valuenow": resizeValue,
+                                    tabIndex: 0,
+                                    className: "bg-border absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 hover:opacity-100",
+                                    onKeyDown: (e) => {
+                                      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") {
+                                        return;
+                                      }
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      const delta = e.shiftKey ? 40 : 10;
+                                      const direction = e.key === "ArrowRight" ? 1 : -1;
+                                      setColWidths((prev) => {
+                                        const current = getResizeHandleValue(
+                                          prev[col.id],
+                                          col.width
+                                        );
+                                        return __spreadProps(__spreadValues({}, prev), {
+                                          [col.id]: Math.max(
+                                            MIN_COLUMN_WIDTH,
+                                            current + direction * delta
+                                          )
+                                        });
+                                      });
+                                    },
+                                    onMouseDown: (e) => {
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      const startX = e.clientX;
+                                      const th = e.target.parentElement;
+                                      const startW = th.offsetWidth;
+                                      const onMove = (ev) => {
+                                        const newW = Math.max(
+                                          MIN_COLUMN_WIDTH,
+                                          startW + ev.clientX - startX
+                                        );
+                                        setColWidths((prev) => __spreadProps(__spreadValues({}, prev), {
+                                          [col.id]: newW
+                                        }));
+                                      };
+                                      const onUp = () => {
+                                        document.removeEventListener(
+                                          "mousemove",
+                                          onMove
+                                        );
+                                        document.removeEventListener("mouseup", onUp);
+                                      };
+                                      document.addEventListener("mousemove", onMove);
+                                      document.addEventListener("mouseup", onUp);
+                                    }
+                                  }
+                                )
+                              ]
+                            },
+                            col.id
+                          );
+                        })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx18("tbody", { className: cn("divide-y", OPT_DIVIDER), children: pagedData.map((row) => {
+                    const key = keyExtractor(row);
+                    const isExpanded = expandedKeys.has(key);
+                    const isSelected = selectedSet.has(key);
+                    const isActive = activeRowId === key;
+                    return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+                      /* @__PURE__ */ jsxs16(
+                        CompositeRow,
+                        {
+                          render: /* @__PURE__ */ jsx18(
+                            "tr",
+                            {
+                              className: cn(
+                                onRowClick ? "cursor-pointer" : void 0,
+                                (isSelected || isActive) && "bg-accent-subtle"
+                              ),
+                              onClick: onRowClick ? () => onRowClick(row) : void 0
+                            }
+                          ),
+                          children: [
+                            selectable && /* @__PURE__ */ jsx18(
+                              CompositeItem,
+                              {
+                                render: /* @__PURE__ */ jsx18(
+                                  "td",
+                                  {
+                                    className: cn(OPT_TD, "w-10"),
+                                    role: "gridcell"
+                                  }
+                                ),
+                                className: OPT_TABLE_ROW_ACTIVE,
+                                children: /* @__PURE__ */ jsx18(
+                                  Checkbox,
+                                  {
+                                    checked: isSelected,
+                                    onChange: () => toggleSelectRow(key),
+                                    "aria-label": `Select row ${key}`
+                                  }
+                                )
+                              }
+                            ),
+                            expandable && /* @__PURE__ */ jsx18(
+                              CompositeItem,
+                              {
+                                render: /* @__PURE__ */ jsx18(
+                                  "td",
+                                  {
+                                    className: cn(OPT_TD, "w-10"),
+                                    role: "gridcell"
+                                  }
+                                ),
+                                className: OPT_TABLE_ROW_ACTIVE,
+                                children: /* @__PURE__ */ jsx18(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      toggleExpand(key);
+                                    },
+                                    className: cn(
+                                      "rounded p-0.5 text-sm transition-transform",
+                                      OPT_TEXT_SECONDARY,
+                                      OPT_FOCUS_VISIBLE,
+                                      isExpanded && "rotate-90"
+                                    ),
+                                    "aria-expanded": isExpanded,
+                                    "aria-label": "Expand row",
+                                    children: "\u25B6"
+                                  }
+                                )
+                              }
+                            ),
+                            columns.map((col, colIndex) => {
+                              var _a, _b;
+                              return /* @__PURE__ */ jsxs16(
+                                CompositeItem,
+                                {
+                                  render: /* @__PURE__ */ jsx18(
+                                    "td",
+                                    {
+                                      className: cn(
+                                        OPT_TD,
+                                        alignmentClass[(_a = col.align) != null ? _a : "left"],
+                                        colIndex === 0 ? "font-medium" : ""
+                                      ),
+                                      role: "gridcell"
+                                    }
+                                  ),
+                                  className: OPT_TABLE_ROW_ACTIVE,
+                                  children: [
+                                    getCellValue(row, col.accessor),
+                                    col.bar && /* @__PURE__ */ jsx18(
+                                      DataTableProgressBar,
+                                      {
+                                        value: col.bar(row),
+                                        barColor: (_b = col.barColor) != null ? _b : "bg-accent",
+                                        label: col.header
+                                      }
+                                    )
+                                  ]
+                                },
+                                col.id
+                              );
+                            })
+                          ]
+                        }
+                      ),
+                      expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx18("tr", { children: /* @__PURE__ */ jsx18(
+                        "td",
+                        {
+                          colSpan: colCount,
+                          className: "border-border-subtle bg-surface-inset border-t px-4 py-3",
+                          children: renderExpanded(row)
+                        }
+                      ) })
+                    ] }, key);
+                  }) })
+                ]
+              }
+            ) })
+          }
+        ),
+        pageSize && totalPages > 1 && /* @__PURE__ */ jsx18(
+          Pagination,
+          {
+            totalItems: sortedData.length,
+            pageSize,
+            currentPage: page + 1,
+            onPageChange: (p) => setPage(p - 1)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/shells/notification-toast.tsx
+import {
+  createContext,
+  useCallback as useCallback3,
+  useContext,
+  useEffect as useEffect4,
+  useRef as useRef2,
+  useState as useState10,
+  useSyncExternalStore
+} from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var toastCounter = 0;
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+function emitChange() {
+  for (const l of listeners) l();
+}
+var toastStore = {
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot() {
+    return toasts;
+  },
+  add(input) {
+    var _a;
+    const id = `toast-${++toastCounter}`;
+    toasts = [...toasts, __spreadValues({ id, variant: (_a = input.variant) != null ? _a : "info" }, input)];
+    emitChange();
+    return id;
+  },
+  dismiss(id) {
+    const next = toasts.filter((t) => t.id !== id);
+    if (next.length !== toasts.length) {
+      toasts = next;
+      emitChange();
+    }
+  },
+  clear() {
+    if (toasts.length) {
+      toasts = [];
+      emitChange();
+    }
+  }
+};
+function makeVariant(variant) {
+  return (message, options) => toastStore.add(__spreadProps(__spreadValues({}, options), { message, variant }));
+}
+var toast = Object.assign(
+  (options) => toastStore.add(options),
+  {
+    info: makeVariant("info"),
+    success: makeVariant("success"),
+    warning: makeVariant("warning"),
+    error: makeVariant("error"),
+    dismiss: (id) => toastStore.dismiss(id),
+    clear: () => toastStore.clear()
+  }
+);
+var ToastContext = createContext(null);
+var positionStyles = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4"
+};
+function ToastProvider({
+  children,
+  position = "top-right",
+  defaultDuration = 5e3,
+  stackLimit = 5
+}) {
+  const allToasts = useSyncExternalStore(
+    toastStore.subscribe,
+    toastStore.getSnapshot,
+    toastStore.getSnapshot
+  );
+  const visibleToasts = allToasts.length > stackLimit ? allToasts.slice(-stackLimit) : allToasts;
+  const addToast = useCallback3(
+    (t) => toastStore.add(t),
+    []
+  );
+  const removeToast = useCallback3((id) => toastStore.dismiss(id), []);
+  return /* @__PURE__ */ jsxs17(
+    ToastContext.Provider,
+    {
+      value: { toasts: visibleToasts, addToast, removeToast },
+      children: [
+        children,
+        /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: cn(
+              "gap-element fixed z-50 flex flex-col",
+              positionStyles[position]
+            ),
+            role: "region",
+            "aria-label": "Notifications",
+            "data-opt-id": "M0KTS",
+            "data-opt-slug": "notification-toast.ToastProvider",
+            children: visibleToasts.map((t) => /* @__PURE__ */ jsx19(
+              NotificationToast,
+              {
+                toast: t,
+                defaultDuration,
+                onDismiss: () => toastStore.dismiss(t.id)
+              },
+              t.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+function NotificationToast({
+  toast: toast2,
+  onDismiss,
+  defaultDuration = 5e3
+}) {
+  var _a;
+  const duration = (_a = toast2.duration) != null ? _a : defaultDuration;
+  const isUrgent = toast2.variant === "error" || toast2.variant === "warning";
+  const onDismissRef = useRef2(onDismiss);
+  const dismissedRef = useRef2(false);
+  const timerStartedAtRef = useRef2(null);
+  const remainingDurationRef = useRef2(duration);
+  const [paused, setPaused] = useState10(false);
+  useEffect4(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  const dismissOnce = useCallback3(() => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    onDismissRef.current();
+  }, []);
+  useEffect4(() => {
+    dismissedRef.current = false;
+    remainingDurationRef.current = duration;
+  }, [toast2.id, duration]);
+  useEffect4(() => {
+    if (!duration || duration <= 0 || paused || dismissedRef.current) {
+      return;
+    }
+    timerStartedAtRef.current = Date.now();
+    const timer = setTimeout(() => {
+      dismissOnce();
+    }, remainingDurationRef.current);
+    return () => {
+      clearTimeout(timer);
+      if (timerStartedAtRef.current !== null) {
+        const elapsed = Date.now() - timerStartedAtRef.current;
+        remainingDurationRef.current = Math.max(
+          0,
+          remainingDurationRef.current - elapsed
+        );
+        timerStartedAtRef.current = null;
+      }
+    };
+  }, [dismissOnce, duration, paused]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: "animate-in slide-in-from-right-full fade-in w-80 duration-200",
+      role: isUrgent ? "alert" : "status",
+      "aria-live": isUrgent ? "assertive" : "polite",
+      "aria-atomic": "true",
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setPaused(false);
+        }
+      },
+      "data-opt-id": "26YVM",
+      "data-opt-slug": "notification-toast.NotificationToast",
+      children: /* @__PURE__ */ jsxs17(
+        Alert,
+        {
+          variant: toast2.variant,
+          title: toast2.title,
+          dismissible: true,
+          onDismiss: dismissOnce,
+          children: [
+            toast2.message,
+            toast2.actions && toast2.actions.length > 0 && /* @__PURE__ */ jsx19("div", { className: "gap-element mt-2 flex", children: toast2.actions.map((action) => /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                onClick: action.onClick,
+                className: "text-xs font-medium underline hover:no-underline",
+                children: action.label
+              },
+              action.label
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/shells/failure-list.tsx
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var defaultLabels13 = {
+  title: "\uCD5C\uADFC \uC2E4\uD328",
+  emptyMessage: "\uC2E4\uD328 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+  moreItems: "{count}\uAC1C \uB354 \uBCF4\uAE30",
+  severityLabels: {
+    critical: "\uC2EC\uAC01",
+    error: "\uC624\uB958",
+    warning: "\uACBD\uACE0"
+  },
+  timeAgo: {
+    justNow: "\uBC29\uAE08 \uC804",
+    minutesAgo: "{minutes}\uBD84 \uC804",
+    hoursAgo: "{hours}\uC2DC\uAC04 \uC804",
+    daysAgo: "{days}\uC77C \uC804"
+  }
+};
+var severityVariant = {
+  critical: "error",
+  error: "error",
+  warning: "warning"
+};
+var severityBorder = {
+  critical: "border-l-2 border-l-danger",
+  error: "border-l-2 border-l-danger",
+  warning: "border-l-2 border-l-warning"
+};
+function formatRelativeTime(timestamp, timeLabels, locale) {
+  const now = /* @__PURE__ */ new Date();
+  const date = new Date(timestamp);
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return timeLabels.justNow;
+  if (diffMins < 60)
+    return timeLabels.minutesAgo.replace("{minutes}", String(diffMins));
+  if (diffHours < 24)
+    return timeLabels.hoursAgo.replace("{hours}", String(diffHours));
+  if (diffDays < 7)
+    return timeLabels.daysAgo.replace("{days}", String(diffDays));
+  return date.toLocaleDateString(locale);
+}
+function groupBy(items, key) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const k = key(item);
+    const existing = map.get(k);
+    if (existing) {
+      existing.push(item);
+    } else {
+      map.set(k, [item]);
+    }
+  }
+  return map;
+}
+function FailureItemRow({
+  failure,
+  isLast,
+  onFailureClick,
+  renderActions,
+  mergedSeverityLabels,
+  mergedTimeAgo,
+  locale
+}) {
+  const itemId = `failure-${failure.id}`;
+  const handleKeyDown = (event) => {
+    if (!onFailureClick) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onFailureClick(failure);
+  };
+  return /* @__PURE__ */ jsxs18(
+    CompositeItem,
+    {
+      render: /* @__PURE__ */ jsx20("article", {}),
+      role: "article",
+      "aria-labelledby": itemId,
+      className: cn(
+        "group gap-group relative flex w-full items-start p-3",
+        OPT_FOCUS_VISIBLE,
+        "data-[active-item]:bg-accent-subtle",
+        onFailureClick && "cursor-pointer",
+        !isLast && "border-border-subtle border-b",
+        severityBorder[failure.severity]
+      ),
+      onClick: () => onFailureClick == null ? void 0 : onFailureClick(failure),
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "gap-element flex items-center", children: [
+            /* @__PURE__ */ jsx20(Badge, { variant: severityVariant[failure.severity], size: "sm", children: mergedSeverityLabels[failure.severity] }),
+            /* @__PURE__ */ jsx20(
+              "span",
+              {
+                id: itemId,
+                className: `text-sm font-medium ${OPT_TEXT_PRIMARY} truncate`,
+                children: failure.title
+              }
+            )
+          ] }),
+          failure.message && /* @__PURE__ */ jsx20("p", { className: `mt-1 text-xs ${OPT_TEXT_SECONDARY} line-clamp-2`, children: failure.message }),
+          /* @__PURE__ */ jsx20(
+            "time",
+            {
+              dateTime: failure.timestamp,
+              className: `mt-1 block text-xs ${OPT_TEXT_TERTIARY}`,
+              children: formatRelativeTime(failure.timestamp, mergedTimeAgo, locale)
+            }
+          )
+        ] }),
+        renderActions && /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 items-center gap-1", children: renderActions(failure) })
+      ]
+    },
+    failure.id
+  );
+}
+function FailureList({
+  failures,
+  title,
+  maxItems,
+  grouped = false,
+  onFailureClick,
+  onShowMore,
+  labels: customLabels,
+  locale = "ko-KR",
+  loading = false,
+  renderActions,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const mergedTimeAgo = {
+    justNow: (_b = (_a = customLabels == null ? void 0 : customLabels.timeAgo) == null ? void 0 : _a.justNow) != null ? _b : defaultLabels13.timeAgo.justNow,
+    minutesAgo: (_d = (_c = customLabels == null ? void 0 : customLabels.timeAgo) == null ? void 0 : _c.minutesAgo) != null ? _d : defaultLabels13.timeAgo.minutesAgo,
+    hoursAgo: (_f = (_e = customLabels == null ? void 0 : customLabels.timeAgo) == null ? void 0 : _e.hoursAgo) != null ? _f : defaultLabels13.timeAgo.hoursAgo,
+    daysAgo: (_h = (_g = customLabels == null ? void 0 : customLabels.timeAgo) == null ? void 0 : _g.daysAgo) != null ? _h : defaultLabels13.timeAgo.daysAgo
+  };
+  const mergedSeverityLabels = {
+    critical: (_j = (_i = customLabels == null ? void 0 : customLabels.severityLabels) == null ? void 0 : _i.critical) != null ? _j : defaultLabels13.severityLabels.critical,
+    error: (_l = (_k = customLabels == null ? void 0 : customLabels.severityLabels) == null ? void 0 : _k.error) != null ? _l : defaultLabels13.severityLabels.error,
+    warning: (_n = (_m = customLabels == null ? void 0 : customLabels.severityLabels) == null ? void 0 : _m.warning) != null ? _n : defaultLabels13.severityLabels.warning
+  };
+  const labels = {
+    title: (_o = customLabels == null ? void 0 : customLabels.title) != null ? _o : defaultLabels13.title,
+    emptyMessage: (_p = customLabels == null ? void 0 : customLabels.emptyMessage) != null ? _p : defaultLabels13.emptyMessage,
+    moreItems: (_q = customLabels == null ? void 0 : customLabels.moreItems) != null ? _q : defaultLabels13.moreItems
+  };
+  const displayTitle = title != null ? title : labels.title;
+  const allItems = maxItems ? failures.slice(0, maxItems) : failures;
+  const remainingCount = maxItems ? Math.max(0, failures.length - maxItems) : 0;
+  const rowProps = {
+    onFailureClick,
+    renderActions,
+    mergedSeverityLabels,
+    mergedTimeAgo,
+    locale
+  };
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className,
+      "data-opt-id": "ZAM3R",
+      "data-opt-slug": "failure-list.FailureList",
+      children: /* @__PURE__ */ jsxs18("div", { className: "gap-group flex flex-col", children: [
+        displayTitle && /* @__PURE__ */ jsx20("h3", { className: `text-sm font-semibold ${OPT_TEXT_PRIMARY}`, children: displayTitle }),
+        failures.length === 0 ? /* @__PURE__ */ jsx20(
+          "div",
+          {
+            role: "status",
+            className: `py-8 text-center text-sm ${OPT_TEXT_SECONDARY}`,
+            children: labels.emptyMessage
+          }
+        ) : /* @__PURE__ */ jsx20(CompositeProvider, { focusLoop: true, orientation: "vertical", children: /* @__PURE__ */ jsx20(
+          Composite,
+          {
+            role: "feed",
+            "aria-label": displayTitle,
+            "aria-busy": loading,
+            className: `rounded-lg ${OPT_BORDER} bg-surface`,
+            children: grouped ? renderGrouped(
+              allItems,
+              remainingCount,
+              rowProps,
+              labels,
+              onShowMore
+            ) : renderFlat(
+              allItems,
+              remainingCount,
+              rowProps,
+              labels,
+              onShowMore
+            )
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function renderFlat(items, remainingCount, rowProps, labels, onShowMore) {
+  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
+    items.map((failure, index) => /* @__PURE__ */ jsx20(
+      FailureItemRow,
+      __spreadValues({
+        failure,
+        isLast: index === items.length - 1 && remainingCount === 0
+      }, rowProps),
+      failure.id
+    )),
+    remainingCount > 0 && /* @__PURE__ */ jsx20(
+      CompositeItem,
+      {
+        render: /* @__PURE__ */ jsx20("button", { type: "button" }),
+        onClick: onShowMore,
+        className: `border-border-subtle w-full border-t p-3 text-center text-xs font-medium ${OPT_TEXT_SECONDARY} ${OPT_FOCUS} hover:text-accent data-[active-item]:bg-accent-subtle transition-colors`,
+        "aria-label": `${remainingCount}\uAC1C\uC758 \uC2E4\uD328 \uB354 \uBCF4\uAE30`,
+        children: labels.moreItems.replace("{count}", String(remainingCount))
+      }
+    )
+  ] });
+}
+function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
+  const groups = groupBy(items, (f) => {
+    var _a;
+    return (_a = f.group) != null ? _a : "";
+  });
+  const groupEntries = Array.from(groups.entries());
+  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
+    groupEntries.map(([groupName, groupItems], groupIndex) => {
+      const isLastGroup = groupIndex === groupEntries.length - 1 && remainingCount === 0;
+      return /* @__PURE__ */ jsxs18("div", { children: [
+        groupName && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: cn(
+              `px-3 py-2 text-xs font-semibold ${OPT_TEXT_TERTIARY} tracking-wider uppercase`,
+              groupIndex > 0 && "border-border-subtle border-t"
+            ),
+            children: groupName
+          }
+        ),
+        groupItems.map((failure, index) => /* @__PURE__ */ jsx20(
+          FailureItemRow,
+          __spreadValues({
+            failure,
+            isLast: isLastGroup && index === groupItems.length - 1
+          }, rowProps),
+          failure.id
+        ))
+      ] }, groupName || "__ungrouped__");
+    }),
+    remainingCount > 0 && /* @__PURE__ */ jsx20(
+      CompositeItem,
+      {
+        render: /* @__PURE__ */ jsx20("button", { type: "button" }),
+        onClick: onShowMore,
+        className: `border-border-subtle w-full border-t p-3 text-center text-xs font-medium ${OPT_TEXT_SECONDARY} ${OPT_FOCUS} hover:text-accent data-[active-item]:bg-accent-subtle transition-colors`,
+        "aria-label": `${remainingCount}\uAC1C\uC758 \uC2E4\uD328 \uB354 \uBCF4\uAE30`,
+        children: labels.moreItems.replace("{count}", String(remainingCount))
+      }
+    )
+  ] });
+}
+
+// src/shells/key-value-editor.tsx
+import { useState as useState11, useCallback as useCallback4, useRef as useRef3 } from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var defaultLabels14 = {
+  keyPlaceholder: "\uD0A4",
+  valuePlaceholder: "\uAC12",
+  addButton: "\uCD94\uAC00",
+  removeAriaLabel: "\uD56D\uBAA9 \uC0AD\uC81C",
+  toggleSecretAriaLabel: "\uBE44\uBC00\uAC12 \uD1A0\uAE00",
+  emptyMessage: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uCD94\uAC00 \uBC84\uD2BC\uC744 \uB20C\uB7EC\uC8FC\uC138\uC694."
+};
+var idCounter = 0;
+function generateId() {
+  return `kv-${++idCounter}`;
+}
+function KeyValueEditor({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  showSecretToggle = false,
+  maxEntries,
+  readOnly = false,
+  labels: customLabels,
+  renderActions,
+  validateKey,
+  className
+}) {
+  const labels = __spreadValues(__spreadValues({}, defaultLabels14), customLabels);
+  const [internalEntries, setInternalEntries] = useState11(
+    () => defaultValue != null ? defaultValue : []
+  );
+  const entries = controlledValue != null ? controlledValue : internalEntries;
+  const keyInputRef = useRef3(null);
+  const updateEntries = useCallback4(
+    (next) => {
+      if (!controlledValue) {
+        setInternalEntries(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    },
+    [controlledValue, onChange]
+  );
+  const addEntry = useCallback4(() => {
+    if (maxEntries && entries.length >= maxEntries) return;
+    const newEntry = {
+      id: generateId(),
+      key: "",
+      value: "",
+      isSecret: false
+    };
+    updateEntries([...entries, newEntry]);
+    requestAnimationFrame(() => {
+      var _a, _b, _c;
+      (_c = (_b = (_a = keyInputRef.current) == null ? void 0 : _a.closest("[data-kv-list]")) == null ? void 0 : _b.querySelector(
+        `[data-kv-id="${newEntry.id}"] [data-kv-key]`
+      )) == null ? void 0 : _c.focus();
+    });
+  }, [entries, maxEntries, updateEntries]);
+  const removeEntry = useCallback4(
+    (id) => {
+      updateEntries(entries.filter((e) => e.id !== id));
+    },
+    [entries, updateEntries]
+  );
+  const updateEntry = useCallback4(
+    (id, field, val) => {
+      updateEntries(
+        entries.map((e) => e.id === id ? __spreadProps(__spreadValues({}, e), { [field]: val }) : e)
+      );
+    },
+    [entries, updateEntries]
+  );
+  const toggleSecret = useCallback4(
+    (id) => {
+      updateEntries(
+        entries.map((e) => e.id === id ? __spreadProps(__spreadValues({}, e), { isSecret: !e.isSecret }) : e)
+      );
+    },
+    [entries, updateEntries]
+  );
+  const canAdd = !readOnly && (!maxEntries || entries.length < maxEntries);
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: cn("gap-group flex flex-col", className),
+      "data-opt-id": "NCBWA",
+      "data-opt-slug": "key-value-editor.KeyValueEditor",
+      children: [
+        entries.length === 0 ? /* @__PURE__ */ jsx21("p", { className: "text-text-tertiary py-4 text-center text-sm", children: labels.emptyMessage }) : /* @__PURE__ */ jsx21("div", { className: "gap-element flex flex-col", "data-kv-list": true, children: entries.map((entry, index) => {
+          const keyError = validateKey == null ? void 0 : validateKey(entry.key, entries);
+          return /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              "data-kv-id": entry.id,
+              className: cn(
+                "gap-element flex items-start",
+                "border-border rounded-lg border p-3",
+                "bg-surface"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx21(
+                    "input",
+                    {
+                      "data-kv-key": true,
+                      ref: index === entries.length - 1 ? keyInputRef : void 0,
+                      type: "text",
+                      value: entry.key,
+                      onChange: (e) => updateEntry(entry.id, "key", e.target.value),
+                      placeholder: labels.keyPlaceholder,
+                      readOnly,
+                      "aria-label": `${labels.keyPlaceholder} ${index + 1}`,
+                      className: cn(
+                        "border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm",
+                        "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1",
+                        readOnly && "cursor-default opacity-70",
+                        keyError && "border-error"
+                      )
+                    }
+                  ),
+                  keyError && /* @__PURE__ */ jsx21("span", { className: "text-error text-xs", children: keyError })
+                ] }),
+                /* @__PURE__ */ jsx21("span", { className: "text-text-tertiary px-1 py-1.5", children: "=" }),
+                /* @__PURE__ */ jsx21("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx21(
+                  "input",
+                  {
+                    type: entry.isSecret ? "password" : "text",
+                    value: entry.value,
+                    onChange: (e) => updateEntry(entry.id, "value", e.target.value),
+                    placeholder: labels.valuePlaceholder,
+                    readOnly,
+                    "aria-label": `${labels.valuePlaceholder} ${index + 1}`,
+                    className: cn(
+                      "border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm",
+                      "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1",
+                      readOnly && "cursor-default opacity-70"
+                    )
+                  }
+                ) }),
+                showSecretToggle && !readOnly && /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleSecret(entry.id),
+                    "aria-label": labels.toggleSecretAriaLabel,
+                    "aria-pressed": entry.isSecret,
+                    className: "text-text-tertiary hover:text-text-primary shrink-0 rounded p-1.5 transition-colors",
+                    children: entry.isSecret ? /* @__PURE__ */ jsx21(
+                      "svg",
+                      {
+                        className: "size-4",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx21(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                          }
+                        )
+                      }
+                    ) : /* @__PURE__ */ jsxs19(
+                      "svg",
+                      {
+                        className: "size-4",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx21(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx21(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                renderActions == null ? void 0 : renderActions(entry, index),
+                !readOnly && /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeEntry(entry.id),
+                    "aria-label": labels.removeAriaLabel,
+                    className: "text-text-tertiary hover:text-error shrink-0 rounded p-1.5 transition-colors",
+                    children: /* @__PURE__ */ jsx21(
+                      "svg",
+                      {
+                        className: "size-4",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx21(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            entry.id
+          );
+        }) }),
+        canAdd && /* @__PURE__ */ jsx21(
+          "button",
+          {
+            type: "button",
+            onClick: addEntry,
+            className: cn(
+              "border-border text-text-secondary rounded-lg border border-dashed px-4 py-2 text-sm transition-colors",
+              "hover:border-accent hover:text-accent"
+            ),
+            children: labels.addButton
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/shells/workflow-canvas.tsx
+import * as React from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+var statusVariant = {
+  idle: "default",
+  running: "info",
+  success: "success",
+  error: "error"
+};
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function WorkflowCanvas({
+  steps,
+  connections = [],
+  rows = 9,
+  cols = 9,
+  cellSize = 72,
+  gap = 12,
+  title = "Workflow Canvas",
+  emptyMessage = "No workflow steps",
+  selectedStepId,
+  onSelectStep,
+  onStepMove,
+  renderStep,
+  className
+}) {
+  const stepMap = React.useMemo(
+    () => new Map(steps.map((step) => [step.id, step])),
+    [steps]
+  );
+  const width = cols * cellSize + (cols - 1) * gap;
+  const height = rows * cellSize + (rows - 1) * gap;
+  const renderDefaultStep = React.useCallback(
+    (step, selected) => /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelectStep == null ? void 0 : onSelectStep(step),
+        className: cn(
+          "group absolute flex h-full w-full flex-col justify-between rounded-lg border p-2 text-left transition-colors",
+          selected ? "border-accent bg-accent-subtle" : "border-border bg-surface hover:bg-bg-subtle"
+        ),
+        children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-text-primary truncate text-xs font-medium", children: step.title }),
+          step.status && /* @__PURE__ */ jsx22(
+            Badge,
+            {
+              variant: statusVariant[step.status],
+              size: "sm",
+              className: "w-fit",
+              children: step.status
+            }
+          )
+        ]
+      }
+    ),
+    [onSelectStep]
+  );
+  const handleStepKeyDown = React.useCallback(
+    (event, step) => {
+      if (!onStepMove) {
+        return;
+      }
+      let nextRow = step.row;
+      let nextCol = step.col;
+      switch (event.key) {
+        case "ArrowUp":
+          nextRow -= 1;
+          break;
+        case "ArrowDown":
+          nextRow += 1;
+          break;
+        case "ArrowLeft":
+          nextCol -= 1;
+          break;
+        case "ArrowRight":
+          nextCol += 1;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      onStepMove(
+        step.id,
+        clamp(nextRow, 0, rows - 1),
+        clamp(nextCol, 0, cols - 1)
+      );
+    },
+    [onStepMove, rows, cols]
+  );
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: cn("gap-group flex flex-col", className),
+      "data-opt-id": "4TX11",
+      "data-opt-slug": "workflow-canvas.WorkflowCanvas",
+      children: [
+        /* @__PURE__ */ jsx22("h3", { className: "text-text-primary text-sm font-semibold", children: title }),
+        steps.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "text-text-secondary border-border rounded-lg border border-dashed p-8 text-center text-sm", children: emptyMessage }) : /* @__PURE__ */ jsx22("div", { className: "border-border bg-bg-subtle relative overflow-auto rounded-lg border p-3", children: /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            role: "grid",
+            "aria-label": title,
+            className: "relative",
+            style: { width, height },
+            children: [
+              /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: "grid",
+                  style: {
+                    gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
+                    gridTemplateRows: `repeat(${rows}, ${cellSize}px)`,
+                    gap
+                  },
+                  children: Array.from({ length: rows * cols }, (_, i) => /* @__PURE__ */ jsx22(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "border-border-subtle bg-surface/30 rounded-md border border-dashed"
+                    },
+                    i
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                "svg",
+                {
+                  className: "pointer-events-none absolute inset-0",
+                  width,
+                  height,
+                  "aria-hidden": "true",
+                  children: connections.map((connection) => {
+                    const from = stepMap.get(connection.from);
+                    const to = stepMap.get(connection.to);
+                    if (!from || !to) {
+                      return null;
+                    }
+                    const x1 = from.col * (cellSize + gap) + cellSize / 2;
+                    const y1 = from.row * (cellSize + gap) + cellSize / 2;
+                    const x2 = to.col * (cellSize + gap) + cellSize / 2;
+                    const y2 = to.row * (cellSize + gap) + cellSize / 2;
+                    return /* @__PURE__ */ jsxs20("g", { children: [
+                      /* @__PURE__ */ jsx22(
+                        "line",
+                        {
+                          x1,
+                          y1,
+                          x2,
+                          y2,
+                          stroke: "currentColor",
+                          strokeOpacity: "0.35",
+                          strokeWidth: "2"
+                        }
+                      ),
+                      connection.label && /* @__PURE__ */ jsx22(
+                        "text",
+                        {
+                          x: (x1 + x2) / 2,
+                          y: (y1 + y2) / 2 - 4,
+                          textAnchor: "middle",
+                          className: "fill-text-secondary text-[10px]",
+                          children: connection.label
+                        }
+                      )
+                    ] }, `${connection.from}-${connection.to}`);
+                  })
+                }
+              ),
+              steps.map((step) => {
+                const selected = selectedStepId === step.id;
+                return /* @__PURE__ */ jsx22(
+                  "div",
+                  {
+                    role: "gridcell",
+                    tabIndex: 0,
+                    "aria-selected": selected,
+                    "aria-label": `${step.title} (${step.row + 1}, ${step.col + 1})`,
+                    onKeyDown: (event) => handleStepKeyDown(event, step),
+                    className: "focus-visible:ring-ring absolute focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none",
+                    style: {
+                      width: cellSize,
+                      height: cellSize,
+                      left: step.col * (cellSize + gap),
+                      top: step.row * (cellSize + gap)
+                    },
+                    children: renderStep ? renderStep(step, selected) : renderDefaultStep(step, selected)
+                  },
+                  step.id
+                );
+              })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+WorkflowCanvas.displayName = "WorkflowCanvas";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+  CommandShortcut,
+  CommandPalette,
+  CommandPaletteTrigger,
+  DashboardGrid,
+  SearchCombobox,
+  StatusSelect,
+  AppMenubar,
+  SidebarNav,
+  EditorToolbar,
+  ContentTabs,
+  FaqAccordion,
+  SettingsForm,
+  DeploymentTimeline,
+  ProjectSwitcher,
+  EnvPanel,
+  BranchSelect,
+  DomainTable,
+  DataTable,
+  toast,
+  ToastProvider,
+  useToast,
+  NotificationToast,
+  FailureList,
+  KeyValueEditor,
+  WorkflowCanvas
+};