@bridger-kr/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2532 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useImperativeHandle, useEffect, useRef, useId, Fragment as Fragment$1 } from 'react';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var TONE_CLASS = {
+  neutral: "badge",
+  accent: "badge badge-accent",
+  info: "badge badge-info",
+  success: "badge badge-success",
+  warning: "badge badge-warning",
+  danger: "badge badge-danger"
+};
+function Badge({ children, tone = "neutral", dot = false, style, ...rest }) {
+  const cls = TONE_CLASS[tone] ?? TONE_CLASS.neutral;
+  return /* @__PURE__ */ jsxs("span", { className: cls, style, ...rest, children: [
+    dot ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          background: "currentColor",
+          display: "inline-block"
+        }
+      }
+    ) : null,
+    children
+  ] });
+}
+var SIZE = {
+  sm: { height: 36, padding: "0 14px", fontSize: 13 },
+  md: { height: 40, padding: "0 16px", fontSize: 14 },
+  lg: { height: 48, padding: "0 20px", fontSize: 15 }
+};
+var VARIANT_CLASS = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost"
+};
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  type = "button",
+  onClick,
+  style,
+  ...rest
+}) {
+  const cls = VARIANT_CLASS[variant] ?? VARIANT_CLASS.primary;
+  const s = SIZE[size] ?? SIZE.md;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: cls,
+      disabled,
+      onClick,
+      style: {
+        height: s.height,
+        padding: s.padding,
+        fontSize: s.fontSize,
+        opacity: disabled ? 0.55 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: icon }) : null,
+        children,
+        iconRight ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: iconRight }) : null
+      ]
+    }
+  );
+}
+var CardTone = {
+  Default: "default",
+  Muted: "muted",
+  Raised: "raised",
+  Panel: "panel"
+};
+var VARIANT_STYLE = {
+  default: { background: "var(--dt-surface)", boxShadow: "var(--dt-card-rest)" },
+  muted: { background: "var(--dt-surface-sunken)" },
+  raised: { background: "var(--dt-surface-raised)", boxShadow: "var(--dt-card-float)" },
+  panel: { background: "var(--dt-surface)", boxShadow: "var(--dt-shadow-xs)" }
+};
+function Card({
+  children,
+  variant,
+  tone,
+  interactive = false,
+  padding = 20,
+  className,
+  style,
+  ...rest
+}) {
+  const selectedTone = tone ?? variant ?? CardTone.Default;
+  const v = VARIANT_STYLE[selectedTone] ?? VARIANT_STYLE[CardTone.Default];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(interactive && "dt-card-interactive", className),
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        color: "var(--dt-ink)",
+        padding,
+        transition: "box-shadow var(--dt-motion), background-color var(--dt-motion)",
+        ...v,
+        ...style
+      },
+      ...rest,
+      children: [
+        children,
+        interactive ? /* @__PURE__ */ jsx("style", { children: ".dt-card-interactive:hover{box-shadow:var(--dt-card-hover)}" }) : null
+      ]
+    }
+  );
+}
+function FilterChip({ label, count, active = false, removable = false, onToggle, onRemove, icon, style }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-pressed": active,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 7,
+        height: 30,
+        padding: "0 10px",
+        borderRadius: "var(--dt-radius-sm)",
+        cursor: "pointer",
+        fontFamily: "var(--dt-font-sans)",
+        fontSize: 13,
+        fontWeight: active ? 650 : 500,
+        background: active ? "var(--dt-tint-accent)" : "var(--dt-surface)",
+        color: active ? "var(--dt-accent)" : "var(--dt-muted-strong)",
+        boxShadow: `inset 0 0 0 1px ${active ? "color-mix(in srgb, var(--dt-accent) 40%, transparent)" : "var(--dt-border-strong)"}`,
+        transition: "background-color var(--dt-motion-fast), box-shadow var(--dt-motion-fast)",
+        ...style
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", color: active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { children: label }),
+        count != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, fontWeight: 600, color: active ? "var(--dt-accent)" : "var(--dt-muted)", fontVariantNumeric: "tabular-nums" }, children: count }) : null,
+        removable ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "button",
+            "aria-label": "\uC81C\uAC70",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove?.();
+            },
+            style: { display: "inline-flex", marginRight: -2, color: active ? "var(--dt-accent)" : "var(--dt-muted)" },
+            children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Input({
+  label,
+  hint,
+  mono = false,
+  id,
+  type = "text",
+  prefix = null,
+  invalid = false,
+  style,
+  ...rest
+}) {
+  const inputId = id || (label ? `in-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8 }, children: [
+    label ? /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" },
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: invalid ? "dt-field dt-field-invalid" : "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "0 12px"
+        },
+        children: [
+          prefix ? /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)", display: "inline-flex" }, children: prefix }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type,
+              style: {
+                flex: 1,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                color: "var(--dt-ink-strong)",
+                padding: "11px 0",
+                fontFamily: mono ? "var(--dt-font-mono)" : "var(--dt-font-sans)",
+                fontSize: mono ? 13 : 14,
+                ...style
+              },
+              ...rest
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+var STATUS = {
+  connected: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  success: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  reconnecting: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  warning: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  disconnected: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  danger: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  info: { bg: "var(--dt-tint-cobalt)", fg: "var(--dt-info)" },
+  idle: { bg: "var(--dt-tint-muted)", fg: "var(--dt-muted-strong)" }
+};
+function StatusPill({ status = "idle", children, pulse = false, style, ...rest }) {
+  const tone = STATUS[status] ?? STATUS.idle;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: "var(--dt-radius-full)",
+        background: tone.bg,
+        padding: "4px 10px",
+        fontSize: 12,
+        fontWeight: 600,
+        color: tone.fg,
+        ...style
+      },
+      ...rest,
+      children: [
+        pulse ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: "9999px",
+              background: tone.fg,
+              animation: "dt-status-pulse 1.6s var(--dt-ease) infinite"
+            }
+          }
+        ) : null,
+        children,
+        /* @__PURE__ */ jsx("style", { children: "@keyframes dt-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}" })
+      ]
+    }
+  );
+}
+var SurfaceTone = {
+  Default: "default",
+  Raised: "raised",
+  Sunken: "sunken"
+};
+var MetricAccent = {
+  Accent: "accent",
+  Success: "success",
+  Info: "info"
+};
+var surfaceToneClass = {
+  [SurfaceTone.Default]: "bg-[var(--dt-surface)]",
+  [SurfaceTone.Raised]: "bg-[var(--dt-surface-raised)]",
+  [SurfaceTone.Sunken]: "bg-[var(--dt-surface-sunken)]"
+};
+var metricAccentClass = {
+  [MetricAccent.Accent]: "text-[var(--dt-accent)]",
+  [MetricAccent.Success]: "text-[var(--dt-success)]",
+  [MetricAccent.Info]: "text-[var(--dt-info)]"
+};
+function Panel({ tone = SurfaceTone.Default, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cx(
+        "rounded-dtLg border border-[var(--dt-border)] px-5 py-5 md:px-6 md:py-6",
+        surfaceToneClass[tone],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function metricAccentColor(accent) {
+  return metricAccentClass[accent];
+}
+function Tabs({ tabs = [], value, defaultValue, onChange, style }) {
+  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.id);
+  const active = value !== void 0 ? value : internal;
+  const select = (id) => {
+    if (value === void 0) setInternal(id);
+    onChange?.(id);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "flex",
+        gap: 4,
+        borderBottom: "1px solid var(--dt-border)",
+        ...style
+      },
+      children: tabs.map((tab) => {
+        const isActive = tab.id === active;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": isActive,
+            type: "button",
+            onClick: () => select(tab.id),
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 7,
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "10px 12px",
+              marginBottom: -1,
+              fontSize: 13,
+              fontWeight: 600,
+              color: isActive ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              borderBottom: `2px solid ${isActive ? "var(--dt-accent)" : "transparent"}`,
+              transition: "color var(--dt-motion-fast)"
+            },
+            children: [
+              tab.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: tab.icon }) : null,
+              tab.label,
+              tab.count != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: tab.count }) : null
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
+}
+function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }) {
+  const cbId = id || (label ? `cb-${String(label).replace(/\s+/g, "-")}` : void 0);
+  const [internal, setInternal] = useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: cbId,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 9,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: cbId,
+            type: "checkbox",
+            checked: isOn,
+            onChange: toggle,
+            disabled,
+            style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 18,
+              height: 18,
+              flex: "0 0 auto",
+              borderRadius: 5,
+              display: "grid",
+              placeItems: "center",
+              background: isOn ? "var(--dt-accent)" : "var(--dt-surface)",
+              border: `1.5px solid ${isOn ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+              transition: "background-color 130ms, border-color 130ms"
+            },
+            children: isOn ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M5 12l4.5 4.5L19 7",
+                stroke: "var(--dt-accent-ink)",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) : null
+          }
+        ),
+        label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label }) : null
+      ]
+    }
+  );
+}
+function Combobox({
+  label,
+  hint,
+  options = [],
+  value,
+  onChange,
+  placeholder = "\uAC80\uC0C9\u2026",
+  emptyText = "\uACB0\uACFC \uC5C6\uC74C",
+  id,
+  style
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const rootRef = useRef(null);
+  const cbId = id || (label ? `cb-${label.replace(/\s+/g, "-")}` : void 0);
+  const selected = options.find((o) => o.value === value) || null;
+  useEffect(() => {
+    const onDoc = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  const q = query.trim().toLowerCase();
+  const filtered = q ? options.filter((o) => (o.label + " " + (o.meta || "")).toLowerCase().includes(q)) : options;
+  const commit = (o) => {
+    onChange?.(o.value);
+    setOpen(false);
+    setQuery("");
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setOpen(true);
+      setActive((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && open && filtered[active]) {
+      e.preventDefault();
+      commit(filtered[active]);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, style: { display: "grid", gap: 7, position: "relative", ...style }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: cbId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          height: 44,
+          padding: "0 12px",
+          boxShadow: open ? "var(--dt-shadow-focus)" : void 0,
+          background: open ? "var(--dt-surface)" : "var(--dt-surface-sunken)"
+        },
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              "aria-hidden": "true",
+              style: { color: "var(--dt-muted)", flex: "0 0 auto" },
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M21 21l-4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: cbId,
+              value: open ? query : selected ? selected.label : "",
+              placeholder: selected && !open ? selected.label : placeholder,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOpen(true);
+                setActive(0);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown: onKey,
+              style: {
+                flex: 1,
+                minWidth: 0,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontSize: 14,
+                fontFamily: "inherit",
+                color: "var(--dt-ink-strong)"
+              }
+            }
+          ),
+          selected && !open ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: selected.meta }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        style: {
+          position: "absolute",
+          top: "calc(100% + 6px)",
+          left: 0,
+          right: 0,
+          zIndex: 20,
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-md)",
+          maxHeight: 240,
+          overflowY: "auto",
+          padding: 4
+        },
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "12px 12px", fontSize: 13, color: "var(--dt-muted)" }, children: emptyText }) : filtered.map((o, i) => {
+          const isActive = i === active;
+          const isSel = o.value === value;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "option",
+              "aria-selected": isSel,
+              onMouseEnter: () => setActive(i),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                commit(o);
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "9px 10px",
+                borderRadius: "var(--dt-radius-md)",
+                cursor: "pointer",
+                background: isActive ? "var(--dt-surface-sunken)" : "transparent"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      fontSize: 13.5,
+                      fontWeight: isSel ? 600 : 500,
+                      color: "var(--dt-ink-strong)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: o.label
+                  }
+                ),
+                o.meta ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--dt-font-mono)",
+                      fontSize: 11,
+                      color: "var(--dt-muted)",
+                      flex: "0 0 auto"
+                    },
+                    children: o.meta
+                  }
+                ) : null,
+                isSel ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "15",
+                    height: "15",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    style: { color: "var(--dt-accent)", flex: "0 0 auto" },
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M20 6L9 17l-5-5",
+                        stroke: "currentColor",
+                        strokeWidth: "2.2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ) : null,
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+function fmtSize(bytes) {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function FileUpload({
+  label,
+  accept = ".json,.yaml,.yml",
+  hint = "OpenAPI \uC2A4\uD399 \xB7 JSON \uB610\uB294 YAML",
+  file,
+  onFiles,
+  onRemove,
+  id,
+  style
+}) {
+  const [drag, setDrag] = useState(false);
+  const inputRef = useRef(null);
+  const fId = id || "fu";
+  const handle = (files) => {
+    if (files && files.length) onFiles?.(files);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7, ...style }, children: [
+    label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    file ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "12px 14px",
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 34,
+                height: 34,
+                flex: "0 0 auto",
+                display: "grid",
+                placeItems: "center",
+                borderRadius: "var(--dt-radius-md)",
+                background: "var(--dt-tint-accent)",
+                color: "var(--dt-accent)"
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx("path", { d: "M14 2v6h6", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: "var(--dt-font-mono)",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: "var(--dt-ink-strong)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: file.name
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", marginTop: 2 }, children: [
+              fmtSize(file.size),
+              " \xB7 \uC5C5\uB85C\uB4DC \uC644\uB8CC"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": "\uC81C\uAC70",
+              style: {
+                flex: "0 0 auto",
+                width: 30,
+                height: 30,
+                display: "grid",
+                placeItems: "center",
+                border: "none",
+                background: "var(--dt-surface-sunken)",
+                borderRadius: "var(--dt-radius-sm)",
+                color: "var(--dt-muted-strong)",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: fId,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDrag(true);
+        },
+        onDragLeave: () => setDrag(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDrag(false);
+          handle(e.dataTransfer.files);
+        },
+        style: {
+          display: "grid",
+          placeItems: "center",
+          gap: 8,
+          padding: "26px 20px",
+          textAlign: "center",
+          cursor: "pointer",
+          borderRadius: "var(--dt-radius-lg)",
+          border: `1.5px dashed ${drag ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+          background: drag ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+          transition: "background-color var(--dt-motion-fast), border-color var(--dt-motion-fast)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: drag ? "var(--dt-accent)" : "var(--dt-muted)" }, children: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M12 16V4m0 0L7 9m5-5l5 5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 13.5, color: "var(--dt-ink-strong)" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--dt-accent)" }, children: "\uD30C\uC77C \uC120\uD0DD" }),
+            " \uB610\uB294 \uB04C\uC5B4\uB2E4 \uB193\uAE30"
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: hint }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: fId,
+              type: "file",
+              accept,
+              onChange: (e) => handle(e.target.files),
+              style: { display: "none" }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function RadioGroup({ name, options = [], value, defaultValue, onChange, disabled, style }) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const generatedName = useId();
+  const groupName = name || generatedName;
+  const select = (v) => {
+    if (disabled) return;
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", style: { display: "grid", gap: 10, ...style }, children: options.map((o) => {
+    const opt = typeof o === "string" ? { value: o, label: o } : o;
+    const on = opt.value === current;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 10,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.55 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: groupName,
+              checked: on,
+              onChange: () => select(opt.value),
+              disabled,
+              style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 18,
+                height: 18,
+                marginTop: 1,
+                flex: "0 0 auto",
+                borderRadius: 9999,
+                display: "grid",
+                placeItems: "center",
+                background: "var(--dt-surface)",
+                border: `1.5px solid ${on ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+                transition: "border-color 130ms"
+              },
+              children: on ? /* @__PURE__ */ jsx("span", { style: { width: 9, height: 9, borderRadius: 9999, background: "var(--dt-accent)" } }) : null
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { display: "grid", gap: 2 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)", lineHeight: 1.3 }, children: opt.label }),
+            opt.hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: opt.hint }) : null
+          ] })
+        ]
+      },
+      opt.value
+    );
+  }) });
+}
+function SegmentedControl({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  style
+}) {
+  const firstOption = typeof options[0] === "string" ? options[0] : options[0]?.value;
+  const [internal, setInternal] = useState(defaultValue ?? firstOption);
+  const current = value !== void 0 ? value : internal;
+  const select = (v) => {
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  const pad = size === "sm" ? "5px 11px" : "7px 14px";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        padding: 3,
+        gap: 2,
+        background: "var(--dt-surface-sunken)",
+        borderRadius: "var(--dt-radius-md)",
+        ...style
+      },
+      children: options.map((o) => {
+        const opt = typeof o === "string" ? { value: o, label: o } : o;
+        const on = opt.value === current;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => select(opt.value),
+            style: {
+              border: "none",
+              cursor: "pointer",
+              padding: pad,
+              borderRadius: "var(--dt-radius-sm)",
+              fontSize: size === "sm" ? 12 : 13,
+              fontWeight: 600,
+              fontFamily: "inherit",
+              whiteSpace: "nowrap",
+              color: on ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              background: on ? "var(--dt-surface)" : "transparent",
+              boxShadow: on ? "var(--dt-ring), var(--dt-shadow-xs)" : "none",
+              transition: "color 130ms, background-color 130ms"
+            },
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+function Select({ label, hint, options = [], value, defaultValue, onChange, placeholder, disabled, id, style }) {
+  const selId = id || (label ? `sel-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: selId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex" }, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: selId,
+          className: "dt-field",
+          value,
+          defaultValue,
+          disabled,
+          onChange: (e) => onChange?.(e.target.value),
+          style: {
+            appearance: "none",
+            WebkitAppearance: "none",
+            width: "100%",
+            padding: "10px 36px 10px 13px",
+            fontSize: 14,
+            fontFamily: "inherit",
+            color: "var(--dt-ink-strong)",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.55 : 1,
+            ...style
+          },
+          children: [
+            placeholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+            options.map((o) => {
+              const opt = typeof o === "string" ? { value: o, label: o } : o;
+              return /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value);
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            right: 11,
+            top: "50%",
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            color: "var(--dt-muted)"
+          },
+          children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    ] }),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+function Slider({
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onChange,
+  unit = "",
+  hint,
+  id,
+  style
+}) {
+  const [internal, setInternal] = useState(defaultValue ?? min);
+  const v = value != null ? value : internal;
+  const trackRef = useRef(null);
+  const sId = id || (label ? `sl-${label.replace(/\s+/g, "-")}` : void 0);
+  const pct = (v - min) / (max - min) * 100;
+  const set = (nv) => {
+    const clamped = Math.min(max, Math.max(min, Math.round(nv / step) * step));
+    if (value == null) setInternal(clamped);
+    onChange?.(clamped);
+  };
+  const fromClientX = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
+    return min + ratio * (max - min);
+  };
+  const onPointerDown = (e) => {
+    e.preventDefault();
+    set(fromClientX(e.clientX));
+    const move = (ev) => set(fromClientX(ev.clientX));
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      set(v + step);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      set(v - step);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 9, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between" }, children: [
+      label ? /* @__PURE__ */ jsx("label", { htmlFor: sId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: [
+            v,
+            unit ? /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)", fontWeight: 400 }, children: unit }) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        id: sId,
+        role: "slider",
+        tabIndex: 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": v,
+        onPointerDown,
+        onKeyDown: onKey,
+        style: { position: "relative", height: 20, display: "flex", alignItems: "center", cursor: "pointer", outline: "none" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                height: 4,
+                borderRadius: 2,
+                background: "var(--dt-surface-sunken)",
+                boxShadow: "inset 0 0 0 1px var(--dt-border-strong)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: "var(--dt-accent)" } }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${pct}%`,
+                transform: "translateX(-50%)",
+                width: 16,
+                height: 16,
+                borderRadius: "var(--dt-radius-sm)",
+                background: "var(--dt-surface)",
+                boxShadow: "0 0 0 1.5px var(--dt-accent)",
+                border: "3px solid var(--dt-surface)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+function Switch({ checked, defaultChecked, onChange, disabled, label, style }) {
+  const [internal, setInternal] = useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  const sw = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      disabled,
+      onClick: toggle,
+      style: {
+        width: 38,
+        height: 22,
+        flex: "0 0 auto",
+        borderRadius: 9999,
+        border: "none",
+        padding: 2,
+        background: isOn ? "var(--dt-accent)" : "var(--dt-border-strong)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        transition: "background-color 160ms var(--dt-ease)",
+        display: "inline-flex"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 18,
+            height: 18,
+            borderRadius: 9999,
+            background: "#fff",
+            boxShadow: "0 1px 2px rgba(0,0,0,0.25)",
+            transform: isOn ? "translateX(16px)" : "translateX(0)",
+            transition: "transform 160ms var(--dt-ease)"
+          }
+        }
+      )
+    }
+  );
+  if (!label) return sw;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 10,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      children: [
+        sw,
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label })
+      ]
+    }
+  );
+}
+function ToggleSwitch({
+  checked,
+  label,
+  onChange,
+  disabled = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${checked ? "border-success/40 bg-success/80" : "border-line-strong bg-raised"} ${className}`,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: `inline-block h-4 w-4 transform rounded-full bg-surface shadow-dtSubtle transition-transform ${checked ? "translate-x-6" : "translate-x-1"}`
+        }
+      )
+    }
+  );
+}
+function Textarea({ label, hint, rows = 4, mono = false, id, style, ...rest }) {
+  const taId = id || (label ? `ta-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: taId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: taId,
+        rows,
+        className: "dt-field",
+        style: {
+          width: "100%",
+          resize: "vertical",
+          padding: "11px 13px",
+          fontSize: mono ? 13 : 14,
+          fontFamily: mono ? "var(--dt-font-mono)" : "inherit",
+          lineHeight: 1.55,
+          color: "var(--dt-ink-strong)",
+          ...style
+        },
+        ...rest
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+var AlertTone = {
+  Info: "info",
+  Success: "success",
+  Warning: "warning",
+  Danger: "danger"
+};
+var AlertMotion = {
+  None: "none",
+  Subtle: "subtle",
+  Pulse: "pulse"
+};
+var TONE_BACKGROUND = {
+  info: "var(--dt-status-cobalt)",
+  success: "var(--dt-status-success)",
+  warning: "var(--dt-status-warning)",
+  danger: "var(--dt-status-danger)"
+};
+function Alert({
+  tone = AlertTone.Info,
+  title,
+  children,
+  icon,
+  action,
+  motion = AlertMotion.None,
+  onDismiss,
+  className,
+  style,
+  ...rest
+}) {
+  const background = TONE_BACKGROUND[tone] ?? TONE_BACKGROUND[AlertTone.Info];
+  const motionClass = motion === AlertMotion.None ? void 0 : `dt-alert-motion-${motion}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cx("dt-alert", motionClass, className),
+      style: {
+        alignItems: "flex-start",
+        background,
+        borderRadius: "20px",
+        color: "var(--dt-alert-ink)",
+        display: "flex",
+        gap: 12,
+        minHeight: 62,
+        overflow: "clip",
+        padding: "13px 15px",
+        position: "relative",
+        transition: "filter var(--dt-motion-fast), transform var(--dt-motion-fast)",
+        width: "min(100%, 380px)",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { color: "currentColor", display: "inline-flex", flex: "0 0 auto", marginTop: 1 }, children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { flex: "1 0 0", minWidth: 1, overflow: "clip", wordBreak: "break-word" }, children: [
+          title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600, lineHeight: "normal" }, children: title }) : null,
+          children ? /* @__PURE__ */ jsx("div", { style: { marginTop: title ? 3 : 0, fontSize: 13, fontWeight: 400, lineHeight: "normal" }, children }) : null,
+          action ? /* @__PURE__ */ jsx("div", { style: { marginTop: 10 }, children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "currentColor", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+      ]
+    }
+  );
+}
+function Dialog({ open, onClose, title, description, children, footer, "aria-label": ariaLabel, width = 460 }) {
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { onClick: onClose, style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    display: "grid",
+    placeItems: "center",
+    padding: 20,
+    background: "color-mix(in srgb, var(--dt-ink-strong) 32%, transparent)",
+    backdropFilter: "blur(2px)",
+    animation: "dt-fade 160ms var(--dt-ease)"
+  }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: (event) => event.stopPropagation(),
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        style: {
+          width: "100%",
+          maxWidth: width,
+          background: "var(--dt-surface)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-xl)",
+          animation: "dt-pop 200ms var(--dt-ease)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { padding: "22px 24px" }, children: [
+            title ? /* @__PURE__ */ jsx("h3", { id: titleId, style: { fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            description ? /* @__PURE__ */ jsx("p", { style: { marginTop: 8, fontSize: 14, lineHeight: 1.55, color: "var(--dt-muted-strong)" }, children: description }) : null,
+            children ? /* @__PURE__ */ jsx("div", { style: { marginTop: title || description ? 16 : 0 }, children }) : null
+          ] }),
+          footer ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, padding: "14px 24px", background: "var(--dt-surface-sunken)" }, children: footer }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `@keyframes dt-fade{from{opacity:0}}@keyframes dt-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}` })
+  ] });
+}
+function Drawer({ open = false, side = "right", title, children, footer, onClose, width = 420, style, "aria-label": ariaLabel }) {
+  const titleId = useId();
+  if (!open) return null;
+  const fromRight = side === "right";
+  return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, zIndex: 40, display: "flex", justifyContent: fromRight ? "flex-end" : "flex-start" }, children: [
+    /* @__PURE__ */ jsx("div", { onClick: onClose, style: { position: "absolute", inset: 0, background: "rgba(24,22,18,0.32)" } }),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel || "pane",
+        style: {
+          position: "relative",
+          width,
+          maxWidth: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: "var(--dt-surface)",
+          boxShadow: "var(--dt-shadow-xl)",
+          borderLeft: fromRight ? "1px solid var(--dt-border-strong)" : "none",
+          borderRight: fromRight ? "none" : "1px solid var(--dt-border-strong)",
+          fontFamily: "var(--dt-font-sans)",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: [
+            title ? /* @__PURE__ */ jsx("h3", { id: titleId, style: { margin: 0, flex: 1, minWidth: 0, fontSize: 16, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "\uB2EB\uAE30",
+                style: { flex: "0 0 auto", width: 30, height: 30, display: "grid", placeItems: "center", border: "none", background: "var(--dt-surface-sunken)", borderRadius: "var(--dt-radius-sm)", color: "var(--dt-muted-strong)", cursor: "pointer" },
+                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: 18 }, children }),
+          footer ? /* @__PURE__ */ jsx("footer", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+function EmptyState({ icon, title, description, action, style }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "grid",
+    placeItems: "center",
+    gap: 10,
+    textAlign: "center",
+    padding: "40px 24px",
+    borderRadius: "var(--dt-radius-lg)",
+    background: "var(--dt-surface-sunken)",
+    ...style
+  }, children: [
+    icon ? /* @__PURE__ */ jsx("span", { style: {
+      display: "inline-flex",
+      width: 44,
+      height: 44,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "var(--dt-radius-md)",
+      background: "var(--dt-surface)",
+      color: "var(--dt-muted)",
+      boxShadow: "var(--dt-ring), var(--dt-shadow-xs)"
+    }, children: icon }) : null,
+    title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+    description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted)", maxWidth: 320 }, children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { style: { marginTop: 6 }, children: action }) : null
+  ] });
+}
+function Skeleton({ width = "100%", height = 14, radius = "var(--dt-radius-sm)", style }) {
+  return /* @__PURE__ */ jsx("span", { className: "dt-skeleton", style: {
+    display: "block",
+    width,
+    height,
+    borderRadius: radius,
+    background: "var(--dt-surface-sunken)",
+    ...style
+  } });
+}
+function Spinner({ size = 18, stroke = 2, color = "var(--dt-accent)", style }) {
+  useId();
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", ...style }, role: "status", "aria-label": "\uB85C\uB529 \uC911", children: /* @__PURE__ */ jsxs("svg", { className: "dt-spinner-svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: stroke, style: { color: "var(--dt-border-strong)", opacity: 0.5 } }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 1 9 9", stroke: color, strokeWidth: stroke, strokeLinecap: "round" })
+  ] }) });
+}
+var DOT = { info: "var(--dt-cobalt)", success: "var(--dt-success)", warning: "var(--dt-warning)", danger: "var(--dt-danger)" };
+function Toast({ tone = "success", title, message, action, onDismiss, style }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "dt-toast", style: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 11,
+    width: 340,
+    maxWidth: "90vw",
+    padding: "13px 15px",
+    background: "var(--dt-surface)",
+    borderRadius: "var(--dt-radius-md)",
+    boxShadow: "var(--dt-shadow-lg)",
+    ...style
+  }, children: [
+    /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, marginTop: 5, flex: "0 0 auto", background: DOT[tone] ?? DOT.success } }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+      message ? /* @__PURE__ */ jsx("div", { style: { marginTop: title ? 2 : 0, fontSize: 13, lineHeight: 1.5, color: "var(--dt-muted-strong)" }, children: message }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null,
+    onDismiss ? /* @__PURE__ */ jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "var(--dt-muted)", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+  ] });
+}
+function Tooltip({ label, position = "top", children }) {
+  const tooltipId = useId();
+  const [show, setShow] = useState(false);
+  const pos = {
+    top: { bottom: "100%", left: "50%", transform: "translateX(-50%) translateY(-7px)" },
+    bottom: { top: "100%", left: "50%", transform: "translateX(-50%) translateY(7px)" },
+    left: { right: "100%", top: "50%", transform: "translateY(-50%) translateX(-7px)" },
+    right: { left: "100%", top: "50%", transform: "translateY(-50%) translateX(7px)" }
+  }[position];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(false),
+      onFocus: () => setShow(true),
+      onBlur: () => setShow(false),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-describedby": show ? tooltipId : void 0, children }),
+        /* @__PURE__ */ jsx("span", { id: tooltipId, role: "tooltip", style: {
+          position: "absolute",
+          zIndex: 60,
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          opacity: show ? 1 : 0,
+          visibility: show ? "visible" : "hidden",
+          padding: "6px 9px",
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: 1.2,
+          color: "var(--dt-paper)",
+          background: "var(--dt-ink-strong)",
+          borderRadius: "var(--dt-radius-sm)",
+          boxShadow: "var(--dt-shadow-md)",
+          transition: "opacity var(--dt-motion-fast), visibility var(--dt-motion-fast)",
+          ...pos
+        }, children: label })
+      ]
+    }
+  );
+}
+var SIZE2 = { sm: 26, md: 34, lg: 44 };
+function Avatar({ name = "", src, size = "md", status, square = true, style, ...rest }) {
+  const px = typeof size === "number" ? size : SIZE2[size] ?? SIZE2.md;
+  const initials = name.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join("").toUpperCase() || "\xB7";
+  const radius = square ? Math.round(px * 0.28) : px;
+  const statusColor = status ? { online: "var(--dt-success)", busy: "var(--dt-danger)", away: "var(--dt-warning)", offline: "var(--dt-muted)" }[status] ?? void 0 : void 0;
+  return /* @__PURE__ */ jsxs("span", { ...rest, style: { position: "relative", display: "inline-flex", flex: "0 0 auto", ...style }, children: [
+    src ? /* @__PURE__ */ jsx("img", { src, alt: name, width: px, height: px, style: { borderRadius: radius, objectFit: "cover", boxShadow: "var(--dt-ring)" } }) : /* @__PURE__ */ jsx("span", { style: {
+      width: px,
+      height: px,
+      borderRadius: radius,
+      display: "grid",
+      placeItems: "center",
+      background: "var(--dt-tint-accent)",
+      color: "var(--dt-accent)",
+      fontSize: px * 0.38,
+      fontWeight: 700,
+      letterSpacing: "-0.02em"
+    }, children: initials }),
+    statusColor ? /* @__PURE__ */ jsx("span", { style: {
+      position: "absolute",
+      right: -1,
+      bottom: -1,
+      width: px * 0.3,
+      height: px * 0.3,
+      borderRadius: 9999,
+      background: statusColor,
+      boxShadow: "0 0 0 2px var(--dt-surface)"
+    } }) : null
+  ] });
+}
+function highlight(line) {
+  const out = [];
+  const re = /("(?:[^"\\]|\\.)*"\s*:)|("(?:[^"\\]|\\.)*")|(\b-?\d+(?:\.\d+)?\b)|(\b(?:true|false|null|GET|POST|PUT|DELETE)\b)|([{}[\],:])/g;
+  let last = 0;
+  let match;
+  while ((match = re.exec(line)) !== null) {
+    if (match.index > last) out.push({ t: line.slice(last, match.index), c: "plain" });
+    if (match[1]) out.push({ t: match[1], c: "key" });
+    else if (match[2]) out.push({ t: match[2], c: "str" });
+    else if (match[3]) out.push({ t: match[3], c: "num" });
+    else if (match[4]) out.push({ t: match[4], c: "kw" });
+    else if (match[5]) out.push({ t: match[5], c: "pun" });
+    last = re.lastIndex;
+  }
+  if (last < line.length) out.push({ t: line.slice(last), c: "plain" });
+  return out;
+}
+var COLOR = { plain: "#cdd0d8", key: "#7fd1c0", str: "#e0a96d", num: "#8fb3ff", kw: "#c98aff", pun: "#8a91a3" };
+function CodeBlock({ code = "", label, language = "json", showLineNumbers = true, copyable = true, style, ...rest }) {
+  const [copied, setCopied] = useState(false);
+  const lines = String(code).replace(/\n$/, "").split("\n");
+  const copy = () => {
+    try {
+      navigator.clipboard?.writeText(code);
+    } catch {
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: {
+    background: "var(--dt-code-bg)",
+    border: "1px solid var(--dt-code-border)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: [
+    label || copyable ? /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: "9px 12px",
+      borderBottom: "1px solid var(--dt-code-border)"
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "#8a91a3" }, children: label || language }),
+      copyable ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: copy,
+          style: {
+            marginLeft: "auto",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "transparent",
+            color: copied ? "#34d399" : "#8a91a3",
+            cursor: "pointer",
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            padding: 0
+          },
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            "\uBCF5\uC0AC\uB428"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+            ] }),
+            "\uBCF5\uC0AC"
+          ] })
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { style: { padding: "12px 0", overflowX: "auto" }, children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: showLineNumbers ? "38px 1fr" : "1fr", fontFamily: "var(--dt-font-mono)", fontSize: 12.5, lineHeight: 1.75 }, children: [
+      showLineNumbers ? /* @__PURE__ */ jsx("span", { style: { textAlign: "right", paddingRight: 14, color: "#5a6273", userSelect: "none" }, children: index + 1 }) : null,
+      /* @__PURE__ */ jsx("code", { style: { color: COLOR.plain, whiteSpace: "pre", paddingRight: 14 }, children: highlight(line).map((segment, segmentIndex) => /* @__PURE__ */ jsx("span", { style: { color: COLOR[segment.c] }, children: segment.t }, segmentIndex)) })
+    ] }, index)) })
+  ] });
+}
+function KeyValue({ items = [], columns = 1, style, ...rest }) {
+  return /* @__PURE__ */ jsx("dl", { ...rest, style: {
+    margin: 0,
+    display: "grid",
+    gridTemplateColumns: columns === 2 ? "1fr 1fr" : "1fr",
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: items.map((item, index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const isLastRow = row === Math.floor((items.length - 1) / columns);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: 14,
+          padding: "11px 14px",
+          borderBottom: isLastRow ? "none" : "1px solid var(--dt-border)",
+          borderRight: columns === 2 && col === 0 ? "1px solid var(--dt-border)" : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx("dt", { style: { fontSize: 12.5, color: "var(--dt-muted)", flex: "0 0 auto" }, children: item.key }),
+          /* @__PURE__ */ jsx("dd", { style: {
+            margin: 0,
+            textAlign: "right",
+            minWidth: 0,
+            fontFamily: item.mono ? "var(--dt-font-mono)" : "inherit",
+            fontSize: item.mono ? 12.5 : 13,
+            fontWeight: 600,
+            color: item.accent ? "var(--dt-accent)" : "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: item.value })
+        ]
+      },
+      index
+    );
+  }) });
+}
+var LEVEL = {
+  ok: { dot: "var(--dt-success)", text: "var(--dt-success)", label: "OK" },
+  warn: { dot: "var(--dt-warning)", text: "var(--dt-warning)", label: "WARN" },
+  error: { dot: "var(--dt-danger)", text: "var(--dt-danger)", label: "ERR" },
+  info: { dot: "var(--dt-muted)", text: "var(--dt-muted-strong)", label: "INFO" }
+};
+function LogRow({ entries = [], style, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, style: {
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    background: "var(--dt-surface)",
+    fontVariantNumeric: "tabular-nums",
+    ...style
+  }, children: entries.map((entry, index) => {
+    const level = LEVEL[entry.level] || LEVEL.info;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "auto 14px 1fr auto",
+          alignItems: "center",
+          gap: 12,
+          padding: "9px 14px",
+          borderTop: index === 0 ? "none" : "1px solid var(--dt-border)",
+          fontFamily: "var(--dt-font-mono)",
+          fontSize: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)" }, children: entry.time }),
+          /* @__PURE__ */ jsx("span", { style: { width: 7, height: 7, borderRadius: 9999, background: level.dot, justifySelf: "center" } }),
+          /* @__PURE__ */ jsxs("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-ink-strong)", fontWeight: 600 }, children: entry.tool }),
+            entry.message ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--dt-muted-strong)" }, children: [
+              "  ",
+              entry.message
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { color: entry.latency ? "var(--dt-muted-strong)" : level.text, fontWeight: 600 }, children: entry.latency || level.label })
+        ]
+      },
+      index
+    );
+  }) });
+}
+function Pagination({ page = 1, pageCount = 1, onChange, style, ...rest }) {
+  const go = (targetPage) => {
+    if (targetPage >= 1 && targetPage <= pageCount && targetPage !== page) onChange?.(targetPage);
+  };
+  const pages = [];
+  const add = (targetPage) => pages.push(targetPage);
+  if (pageCount <= 7) {
+    for (let i = 1; i <= pageCount; i += 1) add(i);
+  } else {
+    add(1);
+    if (page > 3) add("\u2026");
+    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i += 1) add(i);
+    if (page < pageCount - 2) add("\u2026");
+    add(pageCount);
+  }
+  const cell = (active) => ({
+    minWidth: 32,
+    height: 32,
+    padding: "0 8px",
+    borderRadius: "var(--dt-radius-sm)",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 600,
+    fontVariantNumeric: "tabular-nums",
+    background: active ? "var(--dt-accent)" : "transparent",
+    color: active ? "var(--dt-accent-ink)" : "var(--dt-muted-strong)"
+  });
+  const arrow = (disabled) => ({ ...cell(false), opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" });
+  return /* @__PURE__ */ jsxs("nav", { ...rest, style: { display: "inline-flex", alignItems: "center", gap: 2, ...style }, "aria-label": "\uD398\uC774\uC9C0", children: [
+    /* @__PURE__ */ jsx("button", { style: arrow(page <= 1), onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    pages.map((pageItem, index) => pageItem === "\u2026" ? /* @__PURE__ */ jsx("span", { style: { minWidth: 22, textAlign: "center", color: "var(--dt-muted)" }, children: "\u2026" }, `e${index}`) : /* @__PURE__ */ jsx("button", { style: cell(pageItem === page), onClick: () => go(pageItem), "aria-current": pageItem === page ? "page" : void 0, children: pageItem }, pageItem)),
+    /* @__PURE__ */ jsx("button", { style: arrow(page >= pageCount), onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+  ] });
+}
+function StatTile({ label, value, delta, deltaTone = "neutral", hint, style, ...rest }) {
+  const tone = { up: "var(--dt-success)", down: "var(--dt-danger)", neutral: "var(--dt-muted)" }[deltaTone];
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { padding: 18, minWidth: 0, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 650, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--dt-muted)" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 8, fontSize: 25, fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: value }),
+    delta || hint ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 6, display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--dt-muted)" }, children: [
+      delta ? /* @__PURE__ */ jsx("span", { style: { color: tone, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: delta }) : null,
+      hint ? /* @__PURE__ */ jsx("span", { children: hint }) : null
+    ] }) : null
+  ] });
+}
+function Table({ columns = [], rows = [], rowKey, onRowClick, empty, style, ...rest }) {
+  if (!rows.length && empty) return empty;
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { overflowX: "auto", borderRadius: "var(--dt-radius-lg)", background: "var(--dt-surface)", boxShadow: "var(--dt-ring), var(--dt-shadow-xs)", ...style }, children: [
+    /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", color: "var(--dt-ink)" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { style: { background: "var(--dt-surface-muted)" }, children: columns.map((column) => /* @__PURE__ */ jsx("th", { style: {
+        textAlign: column.align || "left",
+        padding: "11px 18px",
+        fontFamily: "var(--dt-font-mono)",
+        fontSize: 11,
+        fontWeight: 600,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        color: "var(--dt-muted)",
+        borderBottom: "1px solid var(--dt-divider)",
+        whiteSpace: "nowrap"
+      }, children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          className: "dt-tr",
+          style: { cursor: onRowClick ? "pointer" : "default" },
+          children: columns.map((column) => /* @__PURE__ */ jsx("td", { style: {
+            textAlign: column.align || "left",
+            padding: "13px 18px",
+            fontSize: 13,
+            borderBottom: "1px solid var(--dt-divider)",
+            whiteSpace: column.nowrap ? "nowrap" : "normal"
+          }, children: column.render ? column.render(row[column.key], row) : row[column.key] }, column.key))
+        },
+        rowKey ? rowKey(row, rowIndex) : rowIndex
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `.dt-tr{transition:background-color 130ms}.dt-tr:hover{background:var(--dt-surface-muted)}tbody tr:last-child td{border-bottom:0}` })
+  ] });
+}
+function UsageMeter({ label, value = 0, max = 100, unit = "", hint, style, ...rest }) {
+  const pct = Math.min(100, Math.max(0, value / max * 100));
+  const fill = pct >= 90 ? "var(--dt-danger)" : pct >= 75 ? "var(--dt-warning)" : "var(--dt-accent)";
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { display: "grid", gap: 8, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }, children: [
+      label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 12.5, color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: [
+        /* @__PURE__ */ jsx("b", { style: { fontWeight: 700 }, children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxs("span", { style: { color: "var(--dt-muted)" }, children: [
+          " / ",
+          max.toLocaleString(),
+          unit
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 8, borderRadius: "var(--dt-radius-sm)", background: "var(--dt-surface-sunken)", boxShadow: "inset 0 0 0 1px var(--dt-border-strong)", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, width: `${pct}%`, background: fill, borderRadius: "var(--dt-radius-sm)", transition: "width var(--dt-motion)" } }) }),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+function Breadcrumb({ items = [], style, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...rest,
+      "aria-label": "breadcrumb",
+      style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", ...style },
+      children: items.map((it, i) => {
+        const last = i === items.length - 1;
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          last ? /* @__PURE__ */ jsx("span", { "aria-current": "page", style: { fontSize: 13, fontWeight: 600, color: "var(--dt-ink-strong)" }, children: it.label }) : /* @__PURE__ */ jsx("a", { href: it.href || "#", style: { fontSize: 13, fontWeight: 500, color: "var(--dt-muted)", textDecoration: "none" }, children: it.label }),
+          !last ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: "var(--dt-border-strong)" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+function CommandPalette({ open = true, query = "", onQueryChange, groups = [], footerHint = "\u2191\u2193 \uC774\uB3D9 \xB7 \u21B5 \uC2E4\uD589 \xB7 esc \uB2EB\uAE30", onSelect, style, ...rest }) {
+  const [activeIndex, setActiveIndex] = useState([0, 0]);
+  const [isOpen, setIsOpen] = useState(open);
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  if (!isOpen) return null;
+  const handleKeyDown = (_e) => {
+    if (_e.key === "ArrowDown") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        const group = groups[groupIdx];
+        if (!group) return prev;
+        if (itemIdx < group.items.length - 1) return [groupIdx, itemIdx + 1];
+        const nextGroupIdx = (groupIdx + 1) % groups.length;
+        const nextGroup = groups[nextGroupIdx];
+        if (nextGroup && nextGroup.items.length > 0) return [nextGroupIdx, 0];
+        return prev;
+      });
+    } else if (_e.key === "ArrowUp") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        if (itemIdx > 0) return [groupIdx, itemIdx - 1];
+        const prevGroupIdx = (groupIdx - 1 + groups.length) % groups.length;
+        const prevGroup = groups[prevGroupIdx];
+        if (prevGroup && prevGroup.items.length > 0) return [prevGroupIdx, prevGroup.items.length - 1];
+        return prev;
+      });
+    } else if (_e.key === "Enter") {
+      _e.preventDefault();
+      const [gi, ii] = activeIndex;
+      const group = groups[gi];
+      if (group && group.items[ii]) onSelect?.(group.items[ii]);
+    } else if (_e.key === "Escape") {
+      _e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: "listbox",
+      onKeyDown: handleKeyDown,
+      style: {
+        width: 520,
+        maxWidth: "100%",
+        background: "var(--dt-surface)",
+        border: "1px solid var(--dt-border-strong)",
+        borderRadius: "var(--dt-radius-xl)",
+        boxShadow: "var(--dt-shadow-xl)",
+        overflow: "hidden",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 11, padding: "14px 16px", borderBottom: "1px solid var(--dt-border)" }, children: [
+          /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", style: { color: "var(--dt-muted)", flex: "0 0 auto" }, children: [
+            /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M21 21l-4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (e) => onQueryChange?.(e.target.value),
+              placeholder: "\uB3C4\uAD6C \xB7 \uC561\uC158 \uAC80\uC0C9\u2026",
+              style: { flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15, fontFamily: "inherit", color: "var(--dt-ink-strong)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("kbd", { style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            color: "var(--dt-muted)",
+            border: "1px solid var(--dt-border-strong)",
+            borderRadius: "var(--dt-radius-sm)",
+            padding: "2px 7px"
+          }, children: "\u2318K" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { maxHeight: 320, overflowY: "auto", padding: 6 }, children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
+          g.heading ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "8px 10px 5px" }, children: g.heading }) : null,
+          g.items.map((it, ii) => {
+            const isActive = activeIndex[0] === gi && activeIndex[1] === ii;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isActive,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onSelect?.(it);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 11,
+                  padding: "9px 10px",
+                  borderRadius: "var(--dt-radius-md)",
+                  cursor: "pointer",
+                  background: isActive ? "var(--dt-tint-accent)" : "transparent",
+                  border: "none",
+                  outline: "none"
+                },
+                children: [
+                  it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: isActive ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                  /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: isActive ? 600 : 500, color: isActive ? "var(--dt-accent)" : "var(--dt-ink-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    it.label,
+                    it.meta ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", fontWeight: 400, marginLeft: 8 }, children: it.meta }) : null
+                  ] }),
+                  it.shortcut ? /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted-strong)", border: "1px solid var(--dt-border-strong)", borderRadius: "var(--dt-radius-sm)", padding: "1px 6px" }, children: it.shortcut }) : null
+                ]
+              },
+              ii
+            );
+          })
+        ] }, gi)) }),
+        footerHint ? /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--dt-border)", padding: "8px 14px", fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: footerHint }) : null
+      ]
+    }
+  );
+}
+function Menu({ trigger, items = [], align = "left", width = 200, style, ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDoc);
+    return () => window.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen((v) => !v);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const firstItem = ref.current?.querySelector('button[role="menuitem"]');
+      firstItem?.focus();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick();
+      setOpen(false);
+    }
+  };
+  const handleTriggerClick = () => {
+    setOpen((v) => !v);
+  };
+  return /* @__PURE__ */ jsxs("span", { ...rest, ref, style: { position: "relative", display: "inline-flex", ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        style: { display: "inline-flex", cursor: "pointer", border: "none", background: "transparent", padding: 0, fontSize: "inherit", fontFamily: "inherit" },
+        children: trigger
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { role: "menu", "aria-orientation": "vertical", style: {
+      position: "absolute",
+      top: "100%",
+      [align]: 0,
+      marginTop: 6,
+      zIndex: 80,
+      width,
+      padding: 5,
+      background: "var(--dt-surface)",
+      borderRadius: "var(--dt-radius-md)",
+      boxShadow: "var(--dt-shadow-lg)",
+      animation: "dt-menu 130ms var(--dt-ease)"
+    }, children: [
+      items.map((it, i) => it.divider ? /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--dt-border)", margin: "5px 0" } }, `d${i}`) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "menuitem",
+          onClick: () => handleItemClick(it),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 9,
+            width: "100%",
+            textAlign: "left",
+            padding: "8px 10px",
+            border: "none",
+            borderRadius: "var(--dt-radius-sm)",
+            cursor: "pointer",
+            background: "transparent",
+            fontSize: 13.5,
+            fontWeight: 500,
+            fontFamily: "inherit",
+            color: it.danger ? "var(--dt-danger)" : "var(--dt-ink)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = it.danger ? "var(--dt-tint-danger)" : "var(--dt-surface-sunken)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "transparent";
+          },
+          children: [
+            it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", color: it.danger ? "var(--dt-danger)" : "var(--dt-muted-strong)" }, children: it.icon }) : null,
+            it.label
+          ]
+        },
+        i
+      )),
+      /* @__PURE__ */ jsx("style", { children: `@keyframes dt-menu{from{opacity:0;transform:translateY(-4px)}}` })
+    ] }) : null
+  ] });
+}
+function Sidebar({ brand, sections = [], footer, width = 232, style, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ...rest,
+      style: {
+        width,
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--dt-surface)",
+        borderRight: "1px solid var(--dt-border-strong)",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        brand ? /* @__PURE__ */ jsx("div", { style: { padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: brand }) : null,
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "grid", gap: 16, alignContent: "start" }, children: sections.map((sec, si) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 2 }, children: [
+          sec.heading ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "4px 10px 6px" }, children: sec.heading }) : null,
+          sec.items.map((it, ii) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: it.href || "#",
+              "aria-current": it.active ? "page" : void 0,
+              style: {
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                gap: 11,
+                padding: "8px 10px 8px 12px",
+                borderRadius: "var(--dt-radius-md)",
+                textDecoration: "none",
+                fontSize: 13.5,
+                fontWeight: it.active ? 600 : 500,
+                color: it.active ? "var(--dt-accent)" : "var(--dt-muted-strong)",
+                background: it.active ? "var(--dt-tint-accent)" : "transparent"
+              },
+              children: [
+                it.active ? /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: 0, top: 7, bottom: 7, width: 3, borderRadius: 2, background: "var(--dt-accent)" } }) : null,
+                it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: it.active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.label }),
+                it.badge != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: it.active ? "var(--dt-accent)" : "var(--dt-muted)", fontVariantNumeric: "tabular-nums" }, children: it.badge }) : null
+              ]
+            },
+            ii
+          ))
+        ] }, si)) }),
+        footer ? /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+      ]
+    }
+  );
+}
+function Stepper({ steps = [], current = 0, orientation = "horizontal", style, ...rest }) {
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        alignItems: vertical ? "stretch" : "flex-start",
+        gap: 0,
+        ...style
+      },
+      children: steps.map((s, i) => {
+        const done = i < current, active = i === current;
+        const accent = done || active;
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: vertical ? "row" : "column", alignItems: vertical ? "flex-start" : "stretch", flex: vertical ? "none" : 1, minWidth: 0, gap: vertical ? 12 : 0 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: vertical ? "column" : "row", alignItems: "center", gap: vertical ? 6 : 10, ...vertical ? {} : { width: "100%" } }, children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              flex: "0 0 auto",
+              width: 26,
+              height: 26,
+              display: "grid",
+              placeItems: "center",
+              borderRadius: "var(--dt-radius-sm)",
+              fontFamily: "var(--dt-font-mono)",
+              fontSize: 12,
+              fontWeight: 700,
+              background: done ? "var(--dt-accent)" : active ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+              color: done ? "#fff" : active ? "var(--dt-accent)" : "var(--dt-muted)",
+              boxShadow: active ? "inset 0 0 0 1.5px var(--dt-accent)" : done ? "none" : "inset 0 0 0 1px var(--dt-border-strong)"
+            }, children: done ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) }) : i + 1 }),
+            i < steps.length - 1 ? /* @__PURE__ */ jsx("span", { style: {
+              background: done ? "var(--dt-accent)" : "var(--dt-border-strong)",
+              ...vertical ? { width: 2, minHeight: 22, flex: 1, marginTop: 2 } : { height: 2, flex: 1 }
+            } }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { padding: vertical ? "2px 0 16px" : "10px 14px 0 0" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13.5, fontWeight: accent ? 650 : 500, color: accent ? "var(--dt-ink-strong)" : "var(--dt-muted)" }, children: s.label }),
+            s.description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--dt-muted)", marginTop: 3, lineHeight: 1.45 }, children: s.description }) : null
+          ] })
+        ] }, i);
+      })
+    }
+  );
+}
+var BRAND_LOGO_LANGUAGE = {
+  Korean: "ko",
+  English: "en"
+};
+var BRAND_LOGO_SIZE = {
+  sm: 20,
+  md: 28,
+  lg: 56,
+  xl: 76
+};
+var BRAND_WORDMARK = "Bridger";
+var BRAND_LOGO_LABEL = {
+  [BRAND_LOGO_LANGUAGE.Korean]: "\uBE0C\uB9BF\uC800",
+  [BRAND_LOGO_LANGUAGE.English]: BRAND_WORDMARK
+};
+function playMark(setArmed) {
+  const scheduleFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (callback) => setTimeout(callback, 0);
+  setArmed(false);
+  scheduleFrame(
+    () => scheduleFrame(() => setArmed(true))
+  );
+}
+var BrandLogo = forwardRef(function BrandLogo2({
+  size = "md",
+  autoplay = false,
+  loop = false,
+  lang = BRAND_LOGO_LANGUAGE.Korean,
+  style
+}, ref) {
+  const fontSize = typeof size === "number" ? size : BRAND_LOGO_SIZE[size] ?? BRAND_LOGO_SIZE.md;
+  const [armed, setArmed] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      play() {
+        playMark(setArmed);
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (!autoplay) return;
+    const timeout = setTimeout(() => playMark(setArmed), 200);
+    return () => clearTimeout(timeout);
+  }, [autoplay]);
+  useEffect(() => {
+    if (!loop) return;
+    let alive = true;
+    const interval = setInterval(() => {
+      if (!alive) return;
+      playMark((value) => {
+        if (alive) setArmed(value);
+      });
+    }, 7e3);
+    return () => {
+      alive = false;
+      clearInterval(interval);
+    };
+  }, [loop]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": BRAND_LOGO_LABEL[lang],
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.38em",
+        fontFamily: "var(--dt-font-sans)",
+        fontWeight: 760,
+        fontSize,
+        letterSpacing: 0,
+        lineHeight: 1,
+        color: "var(--dt-ink-strong)",
+        userSelect: "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "2.306em",
+            height: "1.24em",
+            viewBox: "0 0 44 24",
+            "aria-hidden": "true",
+            focusable: "false",
+            style: { flex: "0 0 auto", overflow: "visible" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: BRAND_WORDMARK }),
+        /* @__PURE__ */ jsx("style", { children: "@keyframes dt-brand-logo-line-draw{from{opacity:.45;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.dt-brand-logo-line{animation:none!important}}" })
+      ]
+    }
+  );
+});
+var PRODUCT_ACTION_PILL_VARIANT = {
+  Default: "default",
+  Accent: "accent",
+  Outline: "outline"
+};
+var PRODUCT_ACTION_PILL_SIZE = {
+  Compact: "compact",
+  Figma: "figma"
+};
+var VARIANT_CLASS2 = {
+  [PRODUCT_ACTION_PILL_VARIANT.Default]: "dt-product-action-pill-default",
+  [PRODUCT_ACTION_PILL_VARIANT.Accent]: "dt-product-action-pill-accent",
+  [PRODUCT_ACTION_PILL_VARIANT.Outline]: "dt-product-action-pill-outline"
+};
+var SIZE_CLASS = {
+  [PRODUCT_ACTION_PILL_SIZE.Compact]: "dt-product-action-pill-compact",
+  [PRODUCT_ACTION_PILL_SIZE.Figma]: "dt-product-action-pill-figma"
+};
+function productActionPillClassName({
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  className
+} = {}) {
+  return cx("dt-product-action-pill", VARIANT_CLASS2[variant], SIZE_CLASS[size], className);
+}
+function ProductActionPill({
+  as,
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  leadingIcon,
+  trailingIcon,
+  children,
+  className,
+  ...rest
+}) {
+  const Component = as ?? "a";
+  return /* @__PURE__ */ jsxs(Component, { className: productActionPillClassName({ variant, size, className }), ...rest, children: [
+    leadingIcon ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-icon", children: leadingIcon }) : null,
+    children ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-label", children }) : null,
+    trailingIcon ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-icon", children: trailingIcon }) : null
+  ] });
+}
+var PRODUCT_SHELL_TONE = {
+  Cinematic: "cinematic",
+  Console: "console"
+};
+var SHELL_TONE_CLASS = {
+  [PRODUCT_SHELL_TONE.Cinematic]: "dt-product-shell-cinematic",
+  [PRODUCT_SHELL_TONE.Console]: "dt-product-shell-console"
+};
+function ProductShell({ tone = PRODUCT_SHELL_TONE.Cinematic, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("dt-product-shell", SHELL_TONE_CLASS[tone], className), ...rest, children });
+}
+function ProductCinematicBackdrop({
+  animated = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("dt-product-cinematic-backdrop", animated && "dt-product-cinematic-backdrop-animated", className),
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "dt-product-cinematic-wash" }),
+        /* @__PURE__ */ jsxs("svg", { className: "dt-product-cinematic-lines", viewBox: "0 0 1440 720", preserveAspectRatio: "xMidYMid slice", children: [
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-a", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-b", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-c", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" })
+        ] })
+      ]
+    }
+  );
+}
+function ProductMotionField({
+  gridSrc,
+  label = "Live API routing motion",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("dt-product-motion-field", className), "aria-label": label, ...rest, children: [
+    gridSrc ? /* @__PURE__ */ jsx("img", { className: "dt-product-motion-grid", src: gridSrc, alt: "", "aria-hidden": "true", loading: "lazy" }) : null,
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-a", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-b", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-axis", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-copy", children: "API" })
+  ] });
+}
+function ProductSideRail({ items, label, className, ...rest }) {
+  return /* @__PURE__ */ jsx("aside", { className: cx("dt-product-side-rail", className), "aria-label": label, ...rest, children: items.map((item) => /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }, item.key)) });
+}
+function ProductPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: cx("dt-product-page-header", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-copy", children: [
+        eyebrow ? /* @__PURE__ */ jsx("span", { className: "dt-product-page-header-eyebrow", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-text", children: [
+          /* @__PURE__ */ jsx("h1", { children: title }),
+          description ? /* @__PURE__ */ jsx("p", { children: description }) : null
+        ] })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "dt-product-page-header-actions", children: actions }) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "dt-product-page-header-content", children }) : null
+  ] });
+}
+function SectionCard({
+  eyebrow,
+  title,
+  description,
+  action,
+  children,
+  contentClassName,
+  style,
+  ...rest
+}) {
+  const hasHeader = Boolean(eyebrow || title || description || action);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rest,
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        background: "var(--dt-surface)",
+        boxShadow: "var(--dt-ring), var(--dt-shadow-xs)",
+        padding: "var(--dt-space-4)",
+        ...style
+      },
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "var(--dt-space-3)",
+              marginBottom: children ? "var(--dt-space-3)" : 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                eyebrow ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      marginBottom: 6,
+                      fontSize: 12,
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      color: "var(--dt-muted)"
+                    },
+                    children: eyebrow
+                  }
+                ) : null,
+                title ? /* @__PURE__ */ jsx("h3", { style: { fontSize: 18, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+                description ? /* @__PURE__ */ jsx("p", { style: { marginTop: 6, fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted-strong)", maxWidth: 560 }, children: description }) : null
+              ] }),
+              action ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: cx(contentClassName), children })
+      ]
+    }
+  );
+}
+var STATE_COLOR = {
+  available: "var(--dt-success)",
+  managed: "var(--dt-success)",
+  locked: "var(--dt-warning)"
+};
+function ToolCard({
+  name,
+  method = "GET",
+  category,
+  description = "\uC124\uBA85 \uC5C6\uC74C",
+  path = "/",
+  state = "available",
+  stateLabel,
+  style,
+  ...rest
+}) {
+  const cat = category ?? (name ? name.split("_")[0] : "etc");
+  const labels = { available: "\uC0AC\uC6A9 \uAC00\uB2A5", managed: "\uAD00\uB9AC\uD615 \uD0A4", locked: "\uD0A4 \uB4F1\uB85D" };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "dt-tool-card",
+      ...rest,
+      style: {
+        borderRadius: "var(--dt-radius-md)",
+        background: "var(--dt-surface)",
+        boxShadow: "var(--dt-ring), var(--dt-shadow-xs)",
+        padding: "16px 18px",
+        transition: "box-shadow var(--dt-motion), background-color var(--dt-motion)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: [
+              /* @__PURE__ */ jsx("span", { className: "dt-chip dt-chip-muted", children: cat }),
+              /* @__PURE__ */ jsx("span", { className: "dt-chip dt-chip-accent", children: method })
+            ] }),
+            /* @__PURE__ */ jsx("h4", { style: { marginTop: 11, fontSize: 15, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)", wordBreak: "break-all" }, children: name })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, flex: "0 0 auto", fontSize: 12, fontWeight: 600, color: STATE_COLOR[state] }, children: [
+            /* @__PURE__ */ jsx("span", { style: { width: 6, height: 6, borderRadius: "9999px", background: STATE_COLOR[state] } }),
+            stateLabel ?? labels[state]
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: {
+          marginTop: 12,
+          fontSize: 13,
+          lineHeight: 1.5,
+          color: "var(--dt-muted-strong)",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden"
+        }, children: description }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: 14, paddingTop: 13, borderTop: "1px solid var(--dt-divider)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 12, color: "var(--dt-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: path }) }),
+        /* @__PURE__ */ jsx("style", { children: ".dt-tool-card:hover{box-shadow:var(--dt-ring), var(--dt-shadow-md)}.dt-chip{font-family:var(--dt-font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:var(--dt-radius-sm);background:var(--dt-surface-sunken)}.dt-chip-muted{color:var(--dt-muted-strong)}.dt-chip-accent{color:var(--dt-accent)" })
+      ]
+    }
+  );
+}
+
+export { Alert, AlertMotion, AlertTone, Avatar, BRAND_LOGO_LANGUAGE, Badge, BrandLogo, Breadcrumb, Button, Card, CardTone, Checkbox, CodeBlock, Combobox, CommandPalette, Dialog, Drawer, EmptyState, FileUpload, FilterChip, Input, KeyValue, LogRow, Menu, MetricAccent, PRODUCT_ACTION_PILL_SIZE, PRODUCT_ACTION_PILL_VARIANT, PRODUCT_SHELL_TONE, Pagination, Panel, ProductActionPill, ProductCinematicBackdrop, ProductMotionField, ProductPageHeader, ProductShell, ProductSideRail, RadioGroup, SectionCard, SegmentedControl, Select, Sidebar, Skeleton, Slider, Spinner, StatTile, StatusPill, Stepper, SurfaceTone, Switch, Table, Tabs, Textarea, Toast, ToggleSwitch, ToolCard, Tooltip, UsageMeter, cx, metricAccentColor, productActionPillClassName };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map