@etamong-playground/ui 0.34.2

package/dist/index.js

@@ -0,0 +1,3585 @@
+"use client";
+import { createContext, useState, useCallback, useEffect, useRef, useId, useContext, useMemo, useSyncExternalStore } from 'react';
+import { Command } from 'cmdk';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/CommandPalette.tsx
+
+// src/keywords.ts
+function crossLocaleKeywords(dicts, getter) {
+  return dicts.map(getter).filter(Boolean).join(" ");
+}
+function isInputTarget(e) {
+  const t = e.target;
+  if (!t) return false;
+  return t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable;
+}
+var CODE_TO_KEY = {
+  Slash: "/",
+  KeyG: "g",
+  KeyH: "h",
+  KeyK: "k",
+  KeyS: "s",
+  KeyN: "n",
+  KeyT: "t",
+  KeyM: "m",
+  KeyP: "p"
+};
+function shortcutKey(e) {
+  const isAscii = e.key === "/" || e.key === "?" || /^[a-z]$/.test(e.key);
+  return isAscii ? e.key : CODE_TO_KEY[e.code] ?? e.key;
+}
+var COMMAND_PALETTE_OPEN_EVENT = "command-palette:open";
+function openCommandPalette() {
+  document.dispatchEvent(new CustomEvent(COMMAND_PALETTE_OPEN_EVENT));
+}
+var DEFAULT_LABELS = {
+  placeholder: "Type a command or search\u2026",
+  noResults: "No results.",
+  searchHeading: "Search"
+};
+function CommandPalette({
+  sections,
+  searchActions,
+  onNavigate,
+  isAdmin = false,
+  labels,
+  openOnSlash = true,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const setOpen = useCallback(
+    (next) => {
+      if (!next) setSearch("");
+      if (isControlled) onOpenChange?.(next);
+      else setUncontrolledOpen(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  useEffect(() => {
+    function onKeyDown(e) {
+      if (e.repeat) return;
+      const key = shortcutKey(e);
+      if ((e.metaKey || e.ctrlKey) && key === "k") {
+        e.preventDefault();
+        setOpen(!open);
+        return;
+      }
+      if (openOnSlash && key === "/" && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey && !isInputTarget(e)) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    }
+    function onOpenEvent() {
+      setOpen(true);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener(COMMAND_PALETTE_OPEN_EVENT, onOpenEvent);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener(COMMAND_PALETTE_OPEN_EVENT, onOpenEvent);
+    };
+  }, [open, openOnSlash, setOpen]);
+  const select = useCallback(
+    (item) => {
+      setOpen(false);
+      if (item.onSelect) item.onSelect();
+      else if (item.href) onNavigate?.(item.href);
+    },
+    [onNavigate, setOpen]
+  );
+  const runSearch = useCallback(
+    (action) => {
+      setOpen(false);
+      action.run(search.trim());
+    },
+    [search, setOpen]
+  );
+  const visibleSections = sections.map((s) => ({
+    ...s,
+    items: s.items.filter((i) => !i.adminOnly || isAdmin)
+  })).filter((s) => s.forceMount || s.items.length > 0);
+  return /* @__PURE__ */ jsxs(
+    Command.Dialog,
+    {
+      open,
+      onOpenChange: setOpen,
+      className: "etu-cmdk",
+      overlayClassName: "etu-cmdk-overlay",
+      contentClassName: "etu-cmdk-content",
+      shouldFilter: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          Command.Input,
+          {
+            value: search,
+            onValueChange: setSearch,
+            placeholder: text.placeholder,
+            className: "etu-cmdk-input",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxs(Command.List, { className: "etu-cmdk-list", children: [
+          /* @__PURE__ */ jsx(Command.Empty, { className: "etu-cmdk-empty", children: text.noResults }),
+          visibleSections.map((section) => /* @__PURE__ */ jsx(
+            Command.Group,
+            {
+              heading: section.heading,
+              forceMount: section.forceMount,
+              children: section.items.map((item) => /* @__PURE__ */ jsxs(
+                Command.Item,
+                {
+                  value: item.keywords || item.label,
+                  onSelect: () => select(item),
+                  className: "etu-cmdk-item",
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", { className: "etu-cmdk-item-icon", children: item.icon }) : null,
+                    /* @__PURE__ */ jsx("span", { className: "etu-cmdk-item-label", children: item.label }),
+                    item.sublabel ? /* @__PURE__ */ jsx("span", { className: "etu-cmdk-item-sub", children: item.sublabel }) : null
+                  ]
+                },
+                item.id
+              ))
+            },
+            section.id
+          )),
+          searchActions && searchActions.length > 0 ? /* @__PURE__ */ jsx(
+            Command.Group,
+            {
+              heading: text.searchHeading,
+              forceMount: true,
+              className: "etu-cmdk-search",
+              children: searchActions.map((action) => /* @__PURE__ */ jsxs(
+                Command.Item,
+                {
+                  value: `__search__ ${action.keywords || action.label}`,
+                  onSelect: () => runSearch(action),
+                  className: "etu-cmdk-item etu-cmdk-item-search",
+                  children: [
+                    action.icon ? /* @__PURE__ */ jsx("span", { className: "etu-cmdk-item-icon", children: action.icon }) : null,
+                    /* @__PURE__ */ jsx("span", { className: "etu-cmdk-item-label", children: action.label }),
+                    search.trim() ? /* @__PURE__ */ jsxs("span", { className: "etu-cmdk-item-sub", children: [
+                      '"',
+                      search.trim(),
+                      '"'
+                    ] }) : null
+                  ]
+                },
+                action.id
+              ))
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "etu-cmdk-footer", children: [
+          /* @__PURE__ */ jsx("kbd", { className: "etu-cmdk-kbd", children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx("kbd", { className: "etu-cmdk-kbd", children: "\u21B5" }),
+          /* @__PURE__ */ jsx("kbd", { className: "etu-cmdk-kbd", children: "esc" })
+        ] })
+      ]
+    }
+  );
+}
+function CommandPaletteTrigger({ label = "Search\u2026", className }) {
+  const [isMac, setIsMac] = useState(false);
+  useEffect(() => {
+    const p = (navigator.platform || navigator.userAgent || "").toLowerCase();
+    setIsMac(/mac|iphone|ipad|ipod/.test(p));
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => openCommandPalette(),
+      className: "etu-palette-trigger" + (className ? " " + className : ""),
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "etu-palette-trigger-icon",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+              /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "etu-palette-trigger-label", children: label }),
+        /* @__PURE__ */ jsxs("kbd", { className: "etu-palette-trigger-kbd", children: [
+          isMac ? "\u2318" : "Ctrl+",
+          "K"
+        ] })
+      ]
+    }
+  );
+}
+function useGoToShortcuts(routes, onNavigate, options = {}) {
+  const { isAdmin = false, timeoutMs = 1500 } = options;
+  const [pending, setPending] = useState(null);
+  const pendingRef = useRef(null);
+  const timerRef = useRef(void 0);
+  const routesRef = useRef(routes);
+  const navRef = useRef(onNavigate);
+  const adminRef = useRef(isAdmin);
+  routesRef.current = routes;
+  navRef.current = onNavigate;
+  adminRef.current = isAdmin;
+  useEffect(() => {
+    function clearPending() {
+      clearTimeout(timerRef.current);
+      pendingRef.current = null;
+      setPending(null);
+    }
+    function onKeyDown(e) {
+      if (e.repeat || isInputTarget(e)) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const key = shortcutKey(e);
+      if (key === "g" && !e.shiftKey && !pendingRef.current) {
+        e.preventDefault();
+        pendingRef.current = "g";
+        setPending("g");
+        timerRef.current = setTimeout(clearPending, timeoutMs);
+        return;
+      }
+      if (pendingRef.current === "g" && !e.shiftKey) {
+        const route = routesRef.current.find((r) => r.key === key);
+        if (route && (!route.adminOnly || adminRef.current)) {
+          e.preventDefault();
+          navRef.current(route.href);
+        }
+        clearPending();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      clearTimeout(timerRef.current);
+    };
+  }, [timeoutMs]);
+  return pending;
+}
+
+// src/theme.ts
+function storageKey(appKey) {
+  return `${appKey}-theme`;
+}
+function noFlashThemeScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey(appKey))};var s=localStorage.getItem(k);var d=s;if(d!=="light"&&d!=="dark"){d=(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches)?"light":"dark";}document.documentElement.setAttribute("data-theme",d);}catch(e){}})();`;
+}
+function getTheme(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey(appKey));
+    if (saved === "light" || saved === "dark") return saved;
+  } catch {
+  }
+  if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+    return "light";
+  }
+  return "dark";
+}
+function setTheme(appKey, theme) {
+  try {
+    localStorage.setItem(storageKey(appKey), theme);
+  } catch {
+  }
+  document.documentElement.setAttribute("data-theme", theme);
+}
+var items = [];
+var listeners = /* @__PURE__ */ new Set();
+var nextId = 1;
+function emit() {
+  for (const l of listeners) l(items);
+}
+function toast(message, kind = "ok", durationMs = 3200) {
+  const id = nextId++;
+  items = [...items, { id, message, kind }];
+  emit();
+  if (durationMs > 0) {
+    setTimeout(() => dismissToast(id), durationMs);
+  }
+  return id;
+}
+function dismissToast(id) {
+  items = items.filter((t) => t.id !== id);
+  emit();
+}
+function Toaster() {
+  const [list, setList] = useState(items);
+  useEffect(() => {
+    listeners.add(setList);
+    setList(items);
+    return () => {
+      listeners.delete(setList);
+    };
+  }, []);
+  if (list.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "etu-toaster", role: "status", "aria-live": "polite", children: list.map((t) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `etu-toast etu-toast-${t.kind}`,
+      onClick: () => dismissToast(t.id),
+      children: t.message
+    },
+    t.id
+  )) });
+}
+var current = null;
+var listeners2 = /* @__PURE__ */ new Set();
+function setReq(r) {
+  current = r;
+  for (const l of listeners2) l(r);
+}
+function uiConfirm(opts) {
+  return new Promise((resolve) => setReq({ kind: "confirm", ...opts, resolve }));
+}
+function uiPrompt(opts) {
+  return new Promise((resolve) => setReq({ kind: "prompt", ...opts, resolve }));
+}
+function DialogHost() {
+  const [req, setLocalReq] = useState(current);
+  const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    listeners2.add(setLocalReq);
+    return () => {
+      listeners2.delete(setLocalReq);
+    };
+  }, []);
+  useEffect(() => {
+    if (req?.kind === "prompt") {
+      setValue(req.defaultValue ?? "");
+      const t = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(t);
+    }
+  }, [req]);
+  if (!req) return null;
+  const cancel = () => {
+    if (req.kind === "prompt") req.resolve(null);
+    else req.resolve(false);
+    setReq(null);
+  };
+  const confirm = () => {
+    if (req.kind === "prompt") req.resolve(value);
+    else req.resolve(true);
+    setReq(null);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancel();
+    } else if (e.key === "Enter" && req.kind === "confirm") {
+      e.preventDefault();
+      confirm();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "etu-dialog-overlay",
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) cancel();
+      },
+      onKeyDown,
+      children: /* @__PURE__ */ jsxs("div", { className: "etu-dialog", role: "dialog", "aria-modal": "true", children: [
+        req.title ? /* @__PURE__ */ jsx("div", { className: "etu-dialog-title", children: req.title }) : null,
+        req.body ? /* @__PURE__ */ jsx("div", { className: "etu-dialog-body", children: req.body }) : null,
+        req.kind === "prompt" ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "etu-dialog-input",
+            value,
+            placeholder: req.placeholder,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                confirm();
+              }
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "etu-dialog-actions", children: [
+          /* @__PURE__ */ jsx("button", { className: "etu-dialog-btn", onClick: cancel, children: req.cancelLabel ?? "Cancel" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "etu-dialog-btn etu-dialog-btn-primary" + (req.kind === "confirm" && req.danger ? " etu-dialog-btn-danger" : ""),
+              onClick: confirm,
+              children: req.confirmLabel ?? "OK"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function toDate(when) {
+  if (when instanceof Date) return Number.isNaN(when.getTime()) ? null : when;
+  if (typeof when === "number") {
+    const d = new Date(when);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  if (typeof when === "string") {
+    const d = new Date(when);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}
+var REL_STEPS = [
+  ["second", 60],
+  ["minute", 60],
+  ["hour", 24],
+  ["day", 30],
+  ["month", 12],
+  ["year", Infinity]
+];
+function formatRelTime(when, opts = {}) {
+  const d = toDate(when);
+  if (!d) return "";
+  const nowDate = opts.now !== void 0 ? toDate(opts.now) : /* @__PURE__ */ new Date();
+  if (!nowDate) return "";
+  const diffSec = (d.getTime() - nowDate.getTime()) / 1e3;
+  const rtf = new Intl.RelativeTimeFormat(opts.locale, {
+    numeric: opts.numeric ?? "auto"
+  });
+  let value = diffSec;
+  for (const [unit, step] of REL_STEPS) {
+    if (Math.abs(value) < step) return rtf.format(Math.round(value), unit);
+    value /= step;
+  }
+  return rtf.format(Math.round(value), "year");
+}
+var STYLE_PRESETS = {
+  date: { year: "numeric", month: "2-digit", day: "2-digit" },
+  time: { hour: "2-digit", minute: "2-digit", hour12: false },
+  datetime: {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  },
+  "datetime-seconds": {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }
+};
+var ZONE_SUFFIX_LABELS = {
+  "Asia/Seoul": "KST",
+  UTC: "UTC"
+};
+function formatAbsTime(when, opts = {}) {
+  const d = toDate(when);
+  if (!d) return "";
+  const timeZone = opts.timeZone ?? "Asia/Seoul";
+  const locale = opts.locale ?? "ko-KR";
+  const options = {
+    timeZone,
+    ...opts.formatOptions ?? STYLE_PRESETS[opts.style ?? "datetime"]
+  };
+  const out = new Intl.DateTimeFormat(locale, options).format(d);
+  if (!opts.withZoneSuffix) return out;
+  const suffix = ZONE_SUFFIX_LABELS[timeZone] ?? timeZone;
+  return out + " " + suffix;
+}
+function refreshIntervalMs(diffMs) {
+  const abs = Math.abs(diffMs);
+  if (abs < 6e4) return 15e3;
+  if (abs < 36e5) return 6e4;
+  return 10 * 6e4;
+}
+function RelTime({
+  when,
+  locale,
+  numeric,
+  absoluteOptions,
+  as = "time",
+  className
+}) {
+  const d = toDate(when);
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (!d) return;
+    const id = window.setInterval(() => {
+      setTick((t) => t + 1);
+    }, refreshIntervalMs(d.getTime() - Date.now()));
+    return () => window.clearInterval(id);
+  }, [d?.getTime()]);
+  if (!d) return null;
+  const rel = formatRelTime(d, { locale, numeric });
+  const abs = formatAbsTime(d, { withZoneSuffix: true, ...absoluteOptions });
+  if (as === "span") {
+    return /* @__PURE__ */ jsx("span", { title: abs, className, "data-tick": tick, children: rel });
+  }
+  return /* @__PURE__ */ jsx("time", { dateTime: d.toISOString(), title: abs, className, "data-tick": tick, children: rel });
+}
+function DeployInfo({ version, builtAt, label = "deployed", href, className }) {
+  if (!version && !builtAt) return null;
+  const short = version ? version.slice(0, 7) : null;
+  const rel = builtAt ? formatRelTime(builtAt) : null;
+  const title = [
+    version && `commit ${version}`,
+    builtAt && `built ${formatAbsTime(builtAt, { withZoneSuffix: true })}`
+  ].filter(Boolean).join("\n");
+  return /* @__PURE__ */ jsxs("span", { className: "etu-deploy-info" + (className ? " " + className : ""), title: title || void 0, children: [
+    /* @__PURE__ */ jsx("span", { className: "etu-deploy-info-label", children: label }),
+    short && (href ? /* @__PURE__ */ jsx("a", { className: "etu-deploy-info-ver", href, target: "_blank", rel: "noreferrer", children: short }) : /* @__PURE__ */ jsx("code", { className: "etu-deploy-info-ver", children: short })),
+    rel && /* @__PURE__ */ jsxs("span", { className: "etu-deploy-info-time", children: [
+      "\xB7 ",
+      rel
+    ] })
+  ] });
+}
+var DEFAULTS = {
+  label: "\uD648 \uD654\uBA74\uC5D0 \uCD94\uAC00\uD558\uBA74 \uB354 \uBE60\uB974\uAC8C!",
+  iosHint: '\uACF5\uC720 \u2192 "\uD648 \uD654\uBA74\uC5D0 \uCD94\uAC00"\uB85C \uC124\uCE58\uD558\uC138\uC694',
+  installLabel: "\uC124\uCE58",
+  dismissLabel: "\uB2EB\uAE30",
+  cooldownMs: 3 * 24 * 60 * 60 * 1e3,
+  // 3 days
+  maxDismiss: 3,
+  storageKey: "etu-install-banner"
+};
+function readState(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return { count: 0, last: 0 };
+    const p = JSON.parse(raw);
+    if (Number.isFinite(p.count) && Number.isFinite(p.last)) return p;
+  } catch {
+  }
+  return { count: 0, last: 0 };
+}
+function saveState(key, s) {
+  try {
+    localStorage.setItem(key, JSON.stringify(s));
+  } catch {
+  }
+}
+function isStandalone() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia("(display-mode: standalone)").matches) return true;
+    return "standalone" in navigator && navigator.standalone === true;
+  } catch {
+    return false;
+  }
+}
+function isIOS() {
+  if (typeof navigator === "undefined") return false;
+  try {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window);
+  } catch {
+    return false;
+  }
+}
+function useInstallPrompt() {
+  const [canPrompt, setCanPrompt] = useState(false);
+  const [iosFlag, setIos] = useState(false);
+  const [standalone, setStandalone] = useState(false);
+  const evtRef = useRef(null);
+  useEffect(() => {
+    setIos(isIOS());
+    setStandalone(isStandalone());
+    const onPrompt = (e) => {
+      e.preventDefault();
+      evtRef.current = e;
+      setCanPrompt(true);
+    };
+    const onInstalled = () => {
+      evtRef.current = null;
+      setCanPrompt(false);
+      setStandalone(true);
+    };
+    window.addEventListener("beforeinstallprompt", onPrompt);
+    window.addEventListener("appinstalled", onInstalled);
+    return () => {
+      window.removeEventListener("beforeinstallprompt", onPrompt);
+      window.removeEventListener("appinstalled", onInstalled);
+    };
+  }, []);
+  async function promptInstall() {
+    const evt = evtRef.current;
+    if (!evt) return "unsupported";
+    await evt.prompt();
+    const { outcome } = await evt.userChoice;
+    evtRef.current = null;
+    setCanPrompt(false);
+    return outcome;
+  }
+  return { canPrompt, promptInstall, isIOS: iosFlag, isStandalone: standalone };
+}
+function DefaultIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" }) });
+}
+function InstallBanner({
+  label = DEFAULTS.label,
+  iosHint = DEFAULTS.iosHint,
+  installLabel = DEFAULTS.installLabel,
+  dismissLabel = DEFAULTS.dismissLabel,
+  icon,
+  cooldownMs = DEFAULTS.cooldownMs,
+  maxDismiss = DEFAULTS.maxDismiss,
+  storageKey: storageKey3 = DEFAULTS.storageKey,
+  className
+}) {
+  const { canPrompt, promptInstall, isIOS: iosFlag, isStandalone: standalone } = useInstallPrompt();
+  const [allowed, setAllowed] = useState(false);
+  const [closed, setClosed] = useState(false);
+  useEffect(() => {
+    if (standalone) return;
+    const { count, last } = readState(storageKey3);
+    if (count >= maxDismiss) return;
+    const remaining = Math.max(0, last + cooldownMs - Date.now());
+    const t = setTimeout(() => setAllowed(true), remaining);
+    return () => clearTimeout(t);
+  }, [standalone, storageKey3, cooldownMs, maxDismiss]);
+  if (closed || standalone || !allowed) return null;
+  if (!iosFlag && !canPrompt) return null;
+  function dismiss() {
+    const prev = readState(storageKey3);
+    saveState(storageKey3, { count: prev.count + 1, last: Date.now() });
+    setClosed(true);
+  }
+  async function install() {
+    const outcome = await promptInstall();
+    if (outcome !== "unsupported") setClosed(true);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "etu-install-banner" + (className ? " " + className : ""), children: [
+    /* @__PURE__ */ jsx("div", { className: "etu-install-banner-icon", children: icon ?? /* @__PURE__ */ jsx(DefaultIcon, {}) }),
+    /* @__PURE__ */ jsx("p", { className: "etu-install-banner-body", children: iosFlag ? iosHint : label }),
+    !iosFlag && /* @__PURE__ */ jsx("button", { type: "button", className: "etu-install-banner-cta", onClick: install, children: installLabel }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "etu-install-banner-close",
+        onClick: dismiss,
+        "aria-label": dismissLabel,
+        children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+      }
+    )
+  ] });
+}
+var DEFAULT_ENDPOINT = "/.well-known/maintenance.json";
+var DEFAULT_POLL_MS = 6e4;
+function useStatusBanner(opts = {}) {
+  const endpoint = opts.endpoint ?? DEFAULT_ENDPOINT;
+  const pollMs = opts.pollMs ?? DEFAULT_POLL_MS;
+  const [data, setData] = useState(null);
+  const abortRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    let timer = null;
+    const tick = async () => {
+      abortRef.current?.abort();
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+      try {
+        const res = await fetch(endpoint, { credentials: "omit", signal: ctrl.signal });
+        if (!res.ok) {
+          if (!cancelled) setData(null);
+          return;
+        }
+        const body = await res.json();
+        if (cancelled) return;
+        setData({
+          enabled: !!body.enabled,
+          severity: body.severity ?? null,
+          message_ko: body.message_ko ?? "",
+          message_en: body.message_en ?? "",
+          eta_iso: body.eta_iso ?? null,
+          retry_after_seconds: body.retry_after_seconds ?? null,
+          tags: Array.isArray(body.tags) ? body.tags : [],
+          updated_at: body.updated_at ?? null
+        });
+      } catch {
+      }
+    };
+    const schedule = () => {
+      timer = setTimeout(async () => {
+        if (cancelled) return;
+        if (typeof document === "undefined" || !document.hidden) {
+          await tick();
+        }
+        schedule();
+      }, pollMs);
+    };
+    const onVisible = () => {
+      if (typeof document !== "undefined" && !document.hidden) void tick();
+    };
+    void tick();
+    schedule();
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisible);
+    }
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      abortRef.current?.abort();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisible);
+      }
+    };
+  }, [endpoint, pollMs]);
+  return data;
+}
+var SEVERITY_LABEL = {
+  outage: { ko: "\uC7A5\uC560", en: "Outage" },
+  degraded: { ko: "\uC77C\uBD80 \uC7A5\uC560", en: "Degraded" },
+  maintenance: { ko: "\uC810\uAC80 \uC911", en: "Maintenance" }
+};
+var pickLang = (override) => {
+  if (override) return override;
+  if (typeof document === "undefined") return "en";
+  return (document.documentElement.lang || "").toLowerCase().startsWith("ko") ? "ko" : "en";
+};
+var sessionKey = (severity, updatedAt) => `etu-status-banner-dismissed:${severity}:${updatedAt ?? ""}`;
+function StatusBanner({
+  endpoint,
+  pollMs,
+  lang,
+  className,
+  dismissible = true
+}) {
+  const data = useStatusBanner({ endpoint, pollMs });
+  const [dismissed, setDismissed] = useState(false);
+  const sev = data?.severity;
+  const updatedAt = data?.updated_at ?? null;
+  useEffect(() => {
+    if (!data || !data.enabled || !sev) return;
+    try {
+      const seen = sessionStorage.getItem(sessionKey(sev, updatedAt));
+      setDismissed(seen === "1");
+    } catch {
+      setDismissed(false);
+    }
+  }, [data, sev, updatedAt]);
+  if (!data || !data.enabled || !sev || sev === "outage" || dismissed) return null;
+  const effLang = pickLang(lang);
+  const label = SEVERITY_LABEL[sev][effLang];
+  const message = (effLang === "ko" ? data.message_ko : data.message_en) || (effLang === "ko" ? data.message_en : data.message_ko);
+  const eta = data.eta_iso ? new Date(data.eta_iso) : null;
+  const etaText = eta && !isNaN(eta.getTime()) ? effLang === "ko" ? `\uBCF5\uAD6C \uC608\uC815: ${eta.toLocaleString("ko-KR", { hour12: false })}` : `ETA: ${eta.toLocaleString(void 0, { hour12: false })}` : null;
+  const onDismiss = () => {
+    setDismissed(true);
+    try {
+      sessionStorage.setItem(sessionKey(sev, updatedAt), "1");
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: ["etu-status-banner", `etu-status-banner-${sev}`, className].filter(Boolean).join(" "),
+      "data-severity": sev,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "etu-status-banner-label", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "etu-status-banner-msg", children: message }),
+        etaText && /* @__PURE__ */ jsx("span", { className: "etu-status-banner-eta", children: etaText }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "etu-status-banner-close",
+            "aria-label": effLang === "ko" ? "\uB2EB\uAE30" : "Dismiss",
+            onClick: onDismiss,
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULTS2 = {
+  title: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694",
+  description: "\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694. \uAC19\uC740 \uBB38\uC81C\uAC00 \uACC4\uC18D\uB418\uBA74 \uC544\uB798 \uCF54\uB4DC\uB97C \uC54C\uB824\uC8FC\uC138\uC694.",
+  retry: "\uB2E4\uC2DC \uC2DC\uB3C4",
+  home: "\uD648\uC73C\uB85C",
+  refLabel: "ref"
+};
+function DefaultIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "42",
+      height: "42",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+      ]
+    }
+  );
+}
+function ErrorPage({
+  title = DEFAULTS2.title,
+  description = DEFAULTS2.description,
+  refCode,
+  onRetry,
+  onHome,
+  labels,
+  icon,
+  className
+}) {
+  const retryLabel = labels?.retry ?? DEFAULTS2.retry;
+  const homeLabel = labels?.home ?? DEFAULTS2.home;
+  const refLabel = labels?.refLabel ?? DEFAULTS2.refLabel;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: "etu-error-page" + (className ? " " + className : ""),
+      children: /* @__PURE__ */ jsxs("div", { className: "etu-error-page-card", children: [
+        /* @__PURE__ */ jsx("div", { className: "etu-error-page-icon", children: icon ?? /* @__PURE__ */ jsx(DefaultIcon2, {}) }),
+        /* @__PURE__ */ jsx("h1", { className: "etu-error-page-title", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "etu-error-page-body", children: description }),
+        (onRetry || onHome) && /* @__PURE__ */ jsxs("div", { className: "etu-error-page-actions", children: [
+          onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "etu-error-page-cta", onClick: onRetry, children: retryLabel }),
+          onHome && /* @__PURE__ */ jsx("button", { type: "button", className: "etu-error-page-secondary", onClick: onHome, children: homeLabel })
+        ] }),
+        refCode && /* @__PURE__ */ jsxs("p", { className: "etu-error-page-ref", children: [
+          /* @__PURE__ */ jsxs("span", { className: "etu-error-page-ref-label", children: [
+            refLabel,
+            ":"
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "etu-error-page-ref-code", children: refCode })
+        ] })
+      ] })
+    }
+  );
+}
+var defaultSerialize = (v) => JSON.stringify(v);
+var defaultDeserialize = (raw) => JSON.parse(raw);
+function readQueryParam(key) {
+  if (typeof window === "undefined") return null;
+  const search = new URLSearchParams(window.location.search);
+  if (search.has(key)) return search.get(key);
+  const hash = window.location.hash;
+  const hq = hash.indexOf("?");
+  if (hq >= 0) {
+    const hashParams = new URLSearchParams(hash.slice(hq + 1));
+    if (hashParams.has(key)) return hashParams.get(key);
+  }
+  return null;
+}
+function writeQueryParam(key, value, replace) {
+  if (typeof window === "undefined") return;
+  const hash = window.location.hash;
+  const hq = hash.indexOf("?");
+  const useHashQuery = hash.startsWith("#") && hq >= 0;
+  if (useHashQuery) {
+    const base = hash.slice(0, hq);
+    const params2 = new URLSearchParams(hash.slice(hq + 1));
+    if (value === null) params2.delete(key);
+    else params2.set(key, value);
+    const next2 = params2.toString();
+    const newHash = next2 ? `${base}?${next2}` : base;
+    const url2 = window.location.pathname + window.location.search + newHash;
+    apply(url2, replace);
+    return;
+  }
+  const params = new URLSearchParams(window.location.search);
+  if (value === null) params.delete(key);
+  else params.set(key, value);
+  const next = params.toString();
+  const url = window.location.pathname + (next ? "?" + next : "") + window.location.hash;
+  apply(url, replace);
+}
+function apply(url, replace) {
+  if (replace) window.history.replaceState(window.history.state, "", url);
+  else window.history.pushState(null, "", url);
+  window.dispatchEvent(new Event("etu:route-state"));
+}
+function useRouteState(key, initial, opts = {}) {
+  const serialize = opts.serialize ?? defaultSerialize;
+  const deserialize = opts.deserialize ?? defaultDeserialize;
+  const replace = opts.replace ?? true;
+  const read = useCallback(() => {
+    const raw = readQueryParam(key);
+    if (raw === null) return initial;
+    try {
+      return deserialize(raw);
+    } catch {
+      return initial;
+    }
+  }, [key, initial, deserialize]);
+  const [value, setLocal] = useState(read);
+  useEffect(() => {
+    setLocal(read());
+    const onChange = () => setLocal(read());
+    window.addEventListener("popstate", onChange);
+    window.addEventListener("hashchange", onChange);
+    window.addEventListener("etu:route-state", onChange);
+    return () => {
+      window.removeEventListener("popstate", onChange);
+      window.removeEventListener("hashchange", onChange);
+      window.removeEventListener("etu:route-state", onChange);
+    };
+  }, [read]);
+  const set = useCallback(
+    (next) => {
+      setLocal((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        try {
+          writeQueryParam(key, serialize(resolved), replace);
+        } catch {
+        }
+        return resolved;
+      });
+    },
+    [key, serialize, replace]
+  );
+  return [value, set];
+}
+function useSessionState(key, initial, opts = {}) {
+  const serialize = opts.serialize ?? defaultSerialize;
+  const deserialize = opts.deserialize ?? defaultDeserialize;
+  const scopeRef = useRef(opts.scope);
+  scopeRef.current = opts.scope;
+  const storageKey3 = useCallback(() => {
+    const scope = scopeRef.current ?? (typeof window !== "undefined" ? window.location.pathname + window.location.hash : "");
+    return `etu:ss:${scope}::${key}`;
+  }, [key]);
+  const read = useCallback(() => {
+    if (typeof window === "undefined") return initial;
+    try {
+      const raw = window.sessionStorage.getItem(storageKey3());
+      if (raw === null) return initial;
+      return deserialize(raw);
+    } catch {
+      return initial;
+    }
+  }, [initial, deserialize, storageKey3]);
+  const [value, setLocal] = useState(read);
+  useEffect(() => {
+    setLocal(read());
+    const onNav = () => setLocal(read());
+    window.addEventListener("popstate", onNav);
+    window.addEventListener("hashchange", onNav);
+    window.addEventListener("etu:route-state", onNav);
+    return () => {
+      window.removeEventListener("popstate", onNav);
+      window.removeEventListener("hashchange", onNav);
+      window.removeEventListener("etu:route-state", onNav);
+    };
+  }, [read]);
+  const set = useCallback(
+    (next) => {
+      setLocal((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        try {
+          window.sessionStorage.setItem(storageKey3(), serialize(resolved));
+        } catch {
+        }
+        return resolved;
+      });
+    },
+    [storageKey3, serialize]
+  );
+  return [value, set];
+}
+function currentDepth() {
+  if (typeof window === "undefined") return 0;
+  const s = window.history.state ?? {};
+  return s.etuInApp ? s.etuDepth ?? 0 : 0;
+}
+function writeEntry(url, depth, replace) {
+  if (typeof window === "undefined") return;
+  const next = { etuInApp: true, etuDepth: depth };
+  if (replace) window.history.replaceState(next, "", url);
+  else window.history.pushState(next, "", url);
+  window.dispatchEvent(new Event("etu:in-app-nav"));
+}
+function runInAppBackFallback(fallback) {
+  if (typeof window === "undefined") return;
+  if (typeof fallback === "function") {
+    fallback();
+    return;
+  }
+  window.history.pushState(null, "", fallback);
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+function useInAppBack(opts = {}) {
+  const { fallback, onExit } = opts;
+  const [depth, setDepth] = useState(() => currentDepth());
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const s = window.history.state ?? {};
+    if (!s.etuInApp) {
+      window.history.replaceState(
+        { ...s, etuInApp: true, etuDepth: 0 },
+        "",
+        window.location.href
+      );
+    }
+    const sync = () => setDepth(currentDepth());
+    sync();
+    window.addEventListener("popstate", sync);
+    window.addEventListener("etu:in-app-nav", sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener("etu:in-app-nav", sync);
+    };
+  }, []);
+  const push = useCallback((url) => {
+    writeEntry(url, currentDepth() + 1, false);
+  }, []);
+  const replace = useCallback((url) => {
+    writeEntry(url, currentDepth(), true);
+  }, []);
+  const goBack = useCallback(() => {
+    if (currentDepth() > 0) {
+      window.history.back();
+      return;
+    }
+    if (fallback !== void 0) {
+      runInAppBackFallback(fallback);
+      return;
+    }
+    if (onExit) onExit();
+  }, [fallback, onExit]);
+  return { canGoBack: depth > 0, goBack, push, replace };
+}
+function DefaultIcon3() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "16",
+      height: "16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+    }
+  );
+}
+function BackButton({
+  canGoBack,
+  goBack,
+  onClick,
+  fallback,
+  label = "\uB4A4\uB85C",
+  icon,
+  className,
+  alwaysShow
+}) {
+  const internal = useInAppBack({ fallback });
+  const effectiveCanGoBack = canGoBack ?? internal.canGoBack;
+  const handler = onClick ?? goBack ?? internal.goBack;
+  const visible = alwaysShow || effectiveCanGoBack || !!onClick || fallback !== void 0;
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "etu-back-button" + (className ? " " + className : ""),
+      onClick: handler,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "etu-back-button-icon", children: icon ?? /* @__PURE__ */ jsx(DefaultIcon3, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "etu-back-button-label", children: label })
+      ]
+    }
+  );
+}
+
+// src/createFetch.ts
+var HttpError = class extends Error {
+  constructor(status, url, body) {
+    const msg = typeof body === "object" && body?.error || `HTTP ${status}` + (typeof body === "object" && body?.ref ? ` (ref=${body.ref})` : "");
+    super(msg);
+    this.name = "HttpError";
+    this.status = status;
+    this.url = url;
+    this.body = body;
+    if (typeof body === "object" && body?.ref) this.ref = body.ref;
+  }
+};
+function defaultAuthRedirect() {
+  if (typeof window === "undefined") return;
+  const rd = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash);
+  window.location.href = "/oauth2/start?rd=" + rd;
+}
+function buildUrl(base, path, query) {
+  let url = path;
+  if (base && !/^https?:/.test(path)) url = base.replace(/\/$/, "") + (path.startsWith("/") ? path : "/" + path);
+  if (query) {
+    const params = new URLSearchParams();
+    for (const [k, v] of Object.entries(query)) {
+      if (v === void 0 || v === null) continue;
+      params.set(k, String(v));
+    }
+    const q = params.toString();
+    if (q) url += (url.includes("?") ? "&" : "?") + q;
+  }
+  return url;
+}
+function isPlainObject(v) {
+  if (v === null || typeof v !== "object") return false;
+  const proto = Object.getPrototypeOf(v);
+  return proto === Object.prototype || proto === null;
+}
+function createFetch(opts = {}) {
+  const base = opts.baseUrl ?? "";
+  const onAuthError = opts.onAuthError ?? defaultAuthRedirect;
+  const onError = opts.onError;
+  const fetchImpl = opts.fetchImpl ?? (typeof fetch !== "undefined" ? fetch : void 0);
+  async function request(method, path, ro = {}) {
+    if (!fetchImpl) throw new Error("createFetch: no fetch impl available");
+    const url = buildUrl(base, path, ro.query);
+    const headers = new Headers();
+    const factory = typeof opts.headers === "function" ? opts.headers() : opts.headers;
+    if (factory) new Headers(factory).forEach((v, k) => headers.set(k, v));
+    if (ro.headers) new Headers(ro.headers).forEach((v, k) => headers.set(k, v));
+    let body;
+    if (ro.body !== void 0 && ro.body !== null) {
+      if (isPlainObject(ro.body) || Array.isArray(ro.body)) {
+        body = JSON.stringify(ro.body);
+        if (!headers.has("Content-Type")) headers.set("Content-Type", "application/json");
+      } else {
+        body = ro.body;
+      }
+    }
+    if (!headers.has("Accept")) headers.set("Accept", "application/json");
+    const res = await fetchImpl(url, { method, headers, body, signal: ro.signal, credentials: "same-origin" });
+    if (res.status === 401) {
+      onAuthError();
+      const err = new HttpError(401, url, await safeParse(res));
+      if (onError) onError(err);
+      throw err;
+    }
+    if (!res.ok) {
+      const parsed = await safeParse(res);
+      const err = new HttpError(res.status, url, parsed);
+      if (onError) onError(err);
+      throw err;
+    }
+    if (ro.raw) return res;
+    if (res.status === 204 || res.headers.get("Content-Length") === "0") {
+      return void 0;
+    }
+    const ct = res.headers.get("Content-Type") || "";
+    if (ct.includes("application/json")) return await res.json();
+    return await res.text();
+  }
+  return {
+    request,
+    get: (p, o) => request("GET", p, o),
+    post: (p, body, o) => request("POST", p, { ...o, body }),
+    put: (p, body, o) => request("PUT", p, { ...o, body }),
+    patch: (p, body, o) => request("PATCH", p, { ...o, body }),
+    delete: (p, o) => request("DELETE", p, o)
+  };
+}
+async function safeParse(res) {
+  try {
+    const ct = res.headers.get("Content-Type") || "";
+    if (ct.includes("application/json")) return await res.json();
+    const text = await res.text();
+    return text || void 0;
+  } catch {
+    return void 0;
+  }
+}
+var REFRESH_EVENT = "etu:me-refresh";
+async function defaultFetcher(endpoint, treat401) {
+  if (typeof fetch === "undefined") throw new Error("useMe: no fetch impl available");
+  const res = await fetch(endpoint, {
+    credentials: "same-origin",
+    headers: { Accept: "application/json" }
+  });
+  if (res.status === 401 && treat401) return null;
+  if (!res.ok) throw new Error("useMe: " + res.status);
+  return await res.json();
+}
+function useMe(opts = {}) {
+  const { endpoint = "/api/me", fetcher, treat401AsAnonymous = true } = opts;
+  const [me, setMe] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchMe = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const value = fetcher ? await fetcher() : await defaultFetcher(endpoint, treat401AsAnonymous);
+      setMe(value);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setLoading(false);
+    }
+  }, [endpoint, fetcher, treat401AsAnonymous]);
+  useEffect(() => {
+    fetchMe();
+    if (typeof window === "undefined") return;
+    const onRefresh = () => fetchMe();
+    window.addEventListener(REFRESH_EVENT, onRefresh);
+    return () => window.removeEventListener(REFRESH_EVENT, onRefresh);
+  }, [fetchMe]);
+  const refresh = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event(REFRESH_EVENT));
+    } else {
+      fetchMe();
+    }
+  }, [fetchMe]);
+  return { me, loading, error, refresh };
+}
+function currentRd() {
+  if (typeof window === "undefined") return "/";
+  return window.location.pathname + window.location.search + window.location.hash;
+}
+function signInUrl(rd) {
+  return "/oauth2/start?rd=" + encodeURIComponent(rd ?? currentRd());
+}
+function signOutUrl(rd) {
+  return "/oauth2/sign_out?rd=" + encodeURIComponent(rd ?? "/");
+}
+function signIn(rd) {
+  if (typeof window !== "undefined") window.location.href = signInUrl(rd);
+}
+function signOut(rd) {
+  if (typeof window !== "undefined") window.location.href = signOutUrl(rd);
+}
+function DefaultIcon4() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "38",
+      height: "38",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 7l9-4 9 4" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 7v10l9 4 9-4V7" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 11v10" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 7l9 4 9-4" })
+      ]
+    }
+  );
+}
+function EmptyState({
+  title,
+  description,
+  action,
+  icon,
+  compact,
+  className
+}) {
+  const cls = [
+    "etu-empty-state",
+    compact ? "etu-empty-state--compact" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const showIcon = icon !== null;
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: cls, children: [
+    showIcon && /* @__PURE__ */ jsx("div", { className: "etu-empty-state-icon", children: icon ?? /* @__PURE__ */ jsx(DefaultIcon4, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "etu-empty-state-title", children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: "etu-empty-state-body", children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: "etu-empty-state-actions", children: action })
+  ] });
+}
+async function writeClipboard(value) {
+  if (typeof window === "undefined") return false;
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch {
+    }
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "absolute";
+    ta.style.left = "-9999px";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function useClipboard(opts = {}) {
+  const { resetMs = 1500, toastOnSuccess = "\uBCF5\uC0AC\uB428", toastOnError = "\uBCF5\uC0AC \uC2E4\uD328" } = opts;
+  const [copied, setCopied] = useState(false);
+  const copy = useCallback(
+    async (value) => {
+      const ok = await writeClipboard(value);
+      if (ok) {
+        setCopied(true);
+        if (toastOnSuccess) toast(toastOnSuccess, "ok");
+        window.setTimeout(() => setCopied(false), resetMs);
+      } else {
+        if (toastOnError) toast(toastOnError, "err");
+      }
+      return ok;
+    },
+    [resetMs, toastOnSuccess, toastOnError]
+  );
+  return { copied, copy };
+}
+function DefaultCopyIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+    }
+  );
+}
+function CopyButton({
+  value,
+  label = "\uBCF5\uC0AC",
+  successLabel = "\uBCF5\uC0AC\uB428",
+  icon,
+  className,
+  iconOnly,
+  ariaLabel,
+  resetMs,
+  toastOnSuccess,
+  toastOnError
+}) {
+  const { copied, copy } = useClipboard({ resetMs, toastOnSuccess, toastOnError });
+  const cls = [
+    "etu-copy-button",
+    copied ? "etu-copy-button--copied" : "",
+    iconOnly ? "etu-copy-button--icon-only" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const showIcon = icon !== null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cls,
+      onClick: () => copy(value),
+      "aria-label": iconOnly ? ariaLabel ?? label : void 0,
+      "data-copied": copied || void 0,
+      children: [
+        showIcon && /* @__PURE__ */ jsx("span", { className: "etu-copy-button-icon", children: icon ?? (copied ? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsx(DefaultCopyIcon, {})) }),
+        !iconOnly && /* @__PURE__ */ jsx("span", { className: "etu-copy-button-label", children: copied ? successLabel : label })
+      ]
+    }
+  );
+}
+function DefaultExternalIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 3h7v7" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 14L21 3" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" })
+      ]
+    }
+  );
+}
+function OpenInBrowserButton({
+  href,
+  label = "\uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C \uC5F4\uAE30",
+  icon,
+  iconOnly,
+  ariaLabel,
+  variant = "ghost",
+  className,
+  ...rest
+}) {
+  const cls = [
+    "etu-open-in-browser-button",
+    `etu-open-in-browser-button--${variant}`,
+    iconOnly ? "etu-open-in-browser-button--icon-only" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const showIcon = icon !== null;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...rest,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cls,
+      "aria-label": iconOnly ? ariaLabel ?? label : rest["aria-label"],
+      children: [
+        showIcon && /* @__PURE__ */ jsx("span", { className: "etu-open-in-browser-button-icon", children: icon ?? /* @__PURE__ */ jsx(DefaultExternalIcon, {}) }),
+        !iconOnly && /* @__PURE__ */ jsx("span", { className: "etu-open-in-browser-button-label", children: label })
+      ]
+    }
+  );
+}
+
+// src/serviceWorker.ts
+var DEFAULT_INTERVAL_MS = 2 * 60 * 1e3;
+var DEFAULT_TOAST_TEXT = "\uC0C8 \uBC84\uC804\uC774 \uC900\uBE44\uB410\uC5B4\uC694. \uC0C8\uB85C\uACE0\uCE68\uD560\uAE4C\uC694?";
+function isDevBuild() {
+  try {
+    const proc = globalThis.process;
+    if (proc?.env?.NODE_ENV === "production") return false;
+  } catch {
+  }
+  return true;
+}
+function hashStr(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24)) >>> 0;
+  }
+  return h.toString(16);
+}
+var SW_STALENESS_STORAGE = "@etamong-playground/ui:sw-staleness";
+async function assertSwChangesAcrossBuilds(url, currentBuild) {
+  let body;
+  try {
+    const res = await fetch(url, { cache: "no-store", credentials: "same-origin" });
+    if (!res.ok) return;
+    body = await res.text();
+  } catch {
+    return;
+  }
+  const swHash = hashStr(body);
+  let prev = null;
+  try {
+    const raw = localStorage.getItem(SW_STALENESS_STORAGE);
+    if (raw) prev = JSON.parse(raw);
+  } catch {
+  }
+  if (prev && prev.url === url && prev.build !== currentBuild && prev.swHash === swHash) {
+    console.warn(
+      `[@etamong-playground/ui] registerServiceWorker: build SHA changed (${prev.build.slice(0, 8)} \u2192 ${currentBuild.slice(0, 8)}) but ${url} is byte-identical. Browsers won't roll over to the new SW \u2014 installed PWAs (esp. iOS) will keep serving the old shell. Stamp the SW source with the build SHA (Vite: __BUILD_ID__ + define; static sw.js: generate at build time). See wiki/concepts/pwa-cache-and-ios-shell.`
+    );
+  }
+  try {
+    localStorage.setItem(
+      SW_STALENESS_STORAGE,
+      JSON.stringify({
+        url,
+        swHash,
+        build: currentBuild,
+        observedAt: Date.now()
+      })
+    );
+  } catch {
+  }
+}
+function registerServiceWorker(url, opts = {}) {
+  const {
+    notifyOnUpdate = true,
+    autoReloadOnUpdate = false,
+    updateToastText = DEFAULT_TOAST_TEXT,
+    updateIntervalMs = DEFAULT_INTERVAL_MS,
+    registerOptions,
+    onActivate,
+    currentBuild
+  } = opts;
+  let registration = null;
+  let hasUpdate = false;
+  let intervalId;
+  let reloading = false;
+  const handle = {
+    get registration() {
+      return registration;
+    },
+    get hasUpdate() {
+      return hasUpdate;
+    },
+    applyUpdate() {
+      const waiting = registration?.waiting;
+      if (waiting) waiting.postMessage({ type: "SKIP_WAITING" });
+    },
+    async checkForUpdate() {
+      if (registration) await registration.update();
+    },
+    async unregister() {
+      if (!registration) return false;
+      const ok = await registration.unregister();
+      registration = null;
+      if (intervalId) window.clearInterval(intervalId);
+      return ok;
+    }
+  };
+  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+    return handle;
+  }
+  navigator.serviceWorker.addEventListener("controllerchange", () => {
+    if (reloading) return;
+    reloading = true;
+    onActivate?.();
+    window.location.reload();
+  });
+  function watchWaiting(reg) {
+    const waiting = reg.waiting;
+    if (!waiting || hasUpdate) return;
+    hasUpdate = true;
+    if (autoReloadOnUpdate) {
+      waiting.postMessage({ type: "SKIP_WAITING" });
+      return;
+    }
+    if (notifyOnUpdate) {
+      toast(updateToastText, "info", 1e4);
+    }
+  }
+  if (isDevBuild() && currentBuild) {
+    void assertSwChangesAcrossBuilds(url, currentBuild);
+  }
+  function start() {
+    navigator.serviceWorker.register(url, registerOptions).then((reg) => {
+      registration = reg;
+      watchWaiting(reg);
+      reg.addEventListener("updatefound", () => {
+        const installing = reg.installing;
+        if (!installing) return;
+        installing.addEventListener("statechange", () => {
+          if (installing.state === "installed" && navigator.serviceWorker.controller) {
+            watchWaiting(reg);
+          }
+        });
+      });
+      void reg.update();
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "visible") void reg.update();
+      });
+      if (updateIntervalMs > 0) {
+        intervalId = window.setInterval(() => {
+          void reg.update();
+        }, updateIntervalMs);
+      }
+    }).catch(() => {
+    });
+  }
+  if (document.readyState === "complete") start();
+  else window.addEventListener("load", start, { once: true });
+  return handle;
+}
+function networkFirstSwSource(opts) {
+  const { version, networkTimeoutMs = 3e3, passThroughPrefixes = [] } = opts;
+  if (!version) throw new Error("networkFirstSwSource: version is required");
+  const passList = JSON.stringify(["/api/", ...passThroughPrefixes]);
+  const versionStr = JSON.stringify(version);
+  const timeout = Number(networkTimeoutMs) || 3e3;
+  return `// Generated by @etamong-playground/ui networkFirstSwSource \u2014 see
+// planning concepts/pwa-service-worker. Online-first; cache only as
+// offline fallback. Edit the source, not this file.
+
+const VERSION = ${versionStr};
+const NAV_CACHE = "etu-nav-" + VERSION;
+const ASSET_CACHE = "etu-asset-" + VERSION;
+const PASS_THROUGH = ${passList};
+const NET_TIMEOUT = ${timeout};
+
+self.addEventListener("install", (event) => {
+  // Take over on the next nav as soon as we're installed.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil((async () => {
+    const keys = await caches.keys();
+    await Promise.all(
+      keys
+        .filter((k) => k !== NAV_CACHE && k !== ASSET_CACHE)
+        .map((k) => caches.delete(k)),
+    );
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener("message", (event) => {
+  // Triggered by registerServiceWorker.applyUpdate().
+  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
+});
+
+function shouldPassThrough(url) {
+  if (PASS_THROUGH.some((p) => url.pathname.startsWith(p))) return true;
+  return false;
+}
+
+async function networkFirst(req, cacheName) {
+  const cache = await caches.open(cacheName);
+  let timeoutId;
+  const timeoutPromise = new Promise((_, reject) => {
+    timeoutId = setTimeout(() => reject(new Error("timeout")), NET_TIMEOUT);
+  });
+  try {
+    const res = await Promise.race([fetch(req), timeoutPromise]);
+    clearTimeout(timeoutId);
+    if (res && res.ok && res.type !== "opaqueredirect") {
+      cache.put(req, res.clone());
+    }
+    return res;
+  } catch (_) {
+    clearTimeout(timeoutId);
+    const cached = await cache.match(req);
+    if (cached) return cached;
+    throw _;
+  }
+}
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET") return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+  if (shouldPassThrough(url)) return;
+
+  if (req.mode === "navigate") {
+    event.respondWith(networkFirst(req, NAV_CACHE));
+    return;
+  }
+  // Same-origin GET asset.
+  event.respondWith(networkFirst(req, ASSET_CACHE));
+});
+`;
+}
+function isAdminLike(input) {
+  const { me, emails, roles, predicate } = input;
+  if (!me) return false;
+  if (me.is_admin) return true;
+  if (emails && me.email && emails.some((e) => e.toLowerCase() === me.email.toLowerCase())) {
+    return true;
+  }
+  if (roles && me.roles && me.roles.some((r) => roles.includes(r))) {
+    return true;
+  }
+  if (predicate && predicate(me)) return true;
+  return false;
+}
+function AdminGate(props) {
+  const { children, fallback = null, ...check } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: isAdminLike(check) ? children : fallback });
+}
+function AdminBadge({ label = "\uAD00\uB9AC\uC790 \uC804\uC6A9", className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "etu-admin-badge" + (className ? " " + className : ""),
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx(DefaultLockIcon, {}),
+        label
+      ]
+    }
+  );
+}
+function BackofficeLayout({
+  title,
+  description,
+  actions,
+  badge,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "etu-backoffice" + (className ? " " + className : ""), children: [
+    /* @__PURE__ */ jsxs("header", { className: "etu-backoffice-head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "etu-backoffice-head-text", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "etu-backoffice-title", children: [
+          title,
+          badge === void 0 ? /* @__PURE__ */ jsx(AdminBadge, {}) : badge
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "etu-backoffice-description", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "etu-backoffice-actions", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "etu-backoffice-body", children })
+  ] });
+}
+function DefaultLockIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "12",
+      height: "12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+      ]
+    }
+  );
+}
+function isExternal(href) {
+  return /^https?:\/\//.test(href);
+}
+function AppInfoSection({
+  name,
+  description,
+  icon,
+  appVersion,
+  version,
+  builtAt,
+  links,
+  children,
+  heading = "\uC571 \uC815\uBCF4",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "etu-app-info" + (className ? " " + className : ""), children: [
+    heading !== null && /* @__PURE__ */ jsx("h2", { className: "etu-app-info-heading", children: heading }),
+    /* @__PURE__ */ jsxs("div", { className: "etu-app-info-card", children: [
+      (name || icon) && /* @__PURE__ */ jsxs("div", { className: "etu-app-info-identity", children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "etu-app-info-icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "etu-app-info-identity-text", children: [
+          name && /* @__PURE__ */ jsx("div", { className: "etu-app-info-name", children: name }),
+          description && /* @__PURE__ */ jsx("div", { className: "etu-app-info-description", children: description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("dl", { className: "etu-app-info-meta", children: [
+        appVersion && /* @__PURE__ */ jsxs("div", { className: "etu-app-info-row", children: [
+          /* @__PURE__ */ jsx("dt", { children: "\uBC84\uC804" }),
+          /* @__PURE__ */ jsx("dd", { children: appVersion })
+        ] }),
+        (version || builtAt) && /* @__PURE__ */ jsxs("div", { className: "etu-app-info-row", children: [
+          /* @__PURE__ */ jsx("dt", { children: "\uBE4C\uB4DC" }),
+          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(DeployInfo, { version, builtAt }) })
+        ] }),
+        children
+      ] }),
+      links && links.length > 0 && /* @__PURE__ */ jsx("div", { className: "etu-app-info-links", children: links.map((l) => {
+        const ext = l.external ?? isExternal(l.href);
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "etu-app-info-link",
+            href: l.href,
+            target: ext ? "_blank" : void 0,
+            rel: ext ? "noreferrer" : void 0,
+            children: l.label
+          },
+          l.href
+        );
+      }) })
+    ] })
+  ] });
+}
+function pickInitial(fallback) {
+  if (!fallback) return "?";
+  const trimmed = fallback.trim();
+  if (!trimmed) return "?";
+  const local = trimmed.split("@")[0];
+  return local.charAt(0).toUpperCase();
+}
+function Avatar({ src, fallback, size = 32, className, alt = "\uD504\uB85C\uD544" }) {
+  const [errored, setErrored] = useState(false);
+  const showPicture = src && !errored;
+  const style = { width: size, height: size };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "etu-avatar" + (className ? " " + className : ""),
+      style,
+      "aria-label": alt,
+      role: "img",
+      children: showPicture ? /* @__PURE__ */ jsx("img", { src, alt: "", onError: () => setErrored(true) }) : /* @__PURE__ */ jsx("span", { className: "etu-avatar-initial", children: pickInitial(fallback) })
+    }
+  );
+}
+function UserMenu({
+  me,
+  avatarSize = 32,
+  myInfoHref = "/me",
+  myInfoLabel = "\uB0B4 \uC815\uBCF4",
+  onSignOut,
+  signOutLabel = "\uB85C\uADF8\uC544\uC6C3",
+  signedOutAction,
+  extraItems,
+  className,
+  showAdminBadge = true,
+  placement = "bottom-right"
+}) {
+  const [open, setOpen] = useState(false);
+  const [computedPlacement, setComputedPlacement] = useState(placement);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setComputedPlacement(placement);
+      return;
+    }
+    const trigger = triggerRef.current;
+    if (!trigger || typeof window === "undefined") return;
+    const rect = trigger.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const menuW = 240;
+    const menuH = 220;
+    const [vReq, hReq] = placement.split("-");
+    let v = vReq;
+    let h = hReq;
+    const spaceAbove = rect.top;
+    const spaceBelow = vh - rect.bottom;
+    if (v === "top" && spaceAbove < menuH && spaceBelow > spaceAbove) v = "bottom";
+    else if (v === "bottom" && spaceBelow < menuH && spaceAbove > spaceBelow) v = "top";
+    const spaceForRight = rect.right;
+    const spaceForLeft = vw - rect.left;
+    if (h === "right" && spaceForRight < menuW && spaceForLeft > spaceForRight) h = "left";
+    else if (h === "left" && spaceForLeft < menuW && spaceForRight > spaceForLeft) h = "right";
+    setComputedPlacement(`${v}-${h}`);
+  }, [open, placement]);
+  if (!me) {
+    return /* @__PURE__ */ jsx("div", { className: "etu-user-menu" + (className ? " " + className : ""), children: signedOutAction ?? /* @__PURE__ */ jsx("a", { className: "etu-user-menu-sign-in", href: signInUrl(), children: "\uB85C\uADF8\uC778" }) });
+  }
+  const displayName = me.name ?? me.preferred_username ?? me.email;
+  const handleSignOut = onSignOut ?? (() => signOut("/"));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "etu-user-menu" + (className ? " " + className : ""),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "etu-user-menu-trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": menuId,
+            onClick: () => setOpen((o) => !o),
+            title: displayName,
+            children: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: me.picture,
+                fallback: me.preferred_username || me.email,
+                size: avatarSize
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: menuId,
+            className: `etu-user-menu-dropdown etu-user-menu-dropdown--${computedPlacement}`,
+            role: "menu",
+            "aria-label": displayName,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "etu-user-menu-header", children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    src: me.picture,
+                    fallback: me.preferred_username || me.email,
+                    size: 40
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "etu-user-menu-header-text", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "etu-user-menu-name", children: [
+                    displayName,
+                    showAdminBadge && me.is_admin && /* @__PURE__ */ jsx("span", { className: "etu-user-menu-admin", children: "admin" })
+                  ] }),
+                  displayName !== me.email && /* @__PURE__ */ jsx("div", { className: "etu-user-menu-email", children: me.email })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "etu-user-menu-divider" }),
+              /* @__PURE__ */ jsxs("div", { className: "etu-user-menu-items", children: [
+                extraItems?.map((it, i) => /* @__PURE__ */ jsx(MenuItem, { item: it, close: () => setOpen(false) }, i)),
+                myInfoHref && /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    item: { label: myInfoLabel, href: myInfoHref },
+                    close: () => setOpen(false)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: "etu-user-menu-item etu-user-menu-item--danger",
+                    onClick: () => {
+                      setOpen(false);
+                      handleSignOut();
+                    },
+                    children: signOutLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MenuItem({ item, close }) {
+  const { label, href, onClick, external } = item;
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        role: "menuitem",
+        className: "etu-user-menu-item",
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noreferrer" : void 0,
+        onClick: close,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: "etu-user-menu-item",
+      onClick: () => {
+        close();
+        onClick?.();
+      },
+      children: label
+    }
+  );
+}
+function MobileTabBar({ items: items2, ariaLabel = "\uC8FC\uC694 \uBA54\uB274", className }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: "etu-mobile-tab-bar etu-glass" + (className ? " " + className : ""),
+      "aria-label": ariaLabel,
+      children: items2.map((it) => {
+        const cls = "etu-mobile-tab-bar-item" + (it.active ? " etu-mobile-tab-bar-item--active" : "");
+        const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "etu-mobile-tab-bar-icon", "aria-hidden": true, children: it.icon }),
+          /* @__PURE__ */ jsx("span", { className: "etu-mobile-tab-bar-label", children: it.label })
+        ] });
+        if (it.href) {
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: cls,
+              href: it.href,
+              "aria-current": it.active ? "page" : void 0,
+              onClick: (e) => {
+                if (it.onClick) {
+                  e.preventDefault();
+                  it.onClick();
+                }
+              },
+              children: inner
+            },
+            it.id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cls,
+            "aria-current": it.active ? "page" : void 0,
+            onClick: it.onClick,
+            children: inner
+          },
+          it.id
+        );
+      })
+    }
+  );
+}
+
+// src/viewportCore.ts
+var TABLET_MIN = 720;
+var DESKTOP_MIN = 1024;
+function tierForWidth(w) {
+  if (w >= DESKTOP_MIN) return "desktop";
+  if (w >= TABLET_MIN) return "tablet";
+  return "mobile";
+}
+function getViewport() {
+  if (typeof window === "undefined") return "desktop";
+  return tierForWidth(window.innerWidth);
+}
+var noFlashViewportScript = `(function(){try{var w=window.innerWidth||document.documentElement.clientWidth;var v="mobile";if(w>=${DESKTOP_MIN})v="desktop";else if(w>=${TABLET_MIN})v="tablet";document.documentElement.setAttribute("data-vp",v);}catch(e){}})();`;
+var ViewportContext = createContext(null);
+function ViewportProvider({ children }) {
+  const tier = useViewportInternal();
+  return /* @__PURE__ */ jsx(ViewportContext.Provider, { value: tier, children });
+}
+function useViewportInternal() {
+  const [tier, setTier] = useState(() => getViewport());
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const tabletMq = window.matchMedia(`(min-width: ${TABLET_MIN}px)`);
+    const desktopMq = window.matchMedia(`(min-width: ${DESKTOP_MIN}px)`);
+    function recompute() {
+      const next = tierForWidth(window.innerWidth);
+      setTier(next);
+      document.documentElement.setAttribute("data-vp", next);
+    }
+    recompute();
+    tabletMq.addEventListener("change", recompute);
+    desktopMq.addEventListener("change", recompute);
+    return () => {
+      tabletMq.removeEventListener("change", recompute);
+      desktopMq.removeEventListener("change", recompute);
+    };
+  }, []);
+  return tier;
+}
+function useViewport() {
+  const ctx = useContext(ViewportContext);
+  const local = useViewportInternal();
+  return ctx ?? local;
+}
+function BellIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+      ]
+    }
+  );
+}
+function NotificationBell({
+  items: items2,
+  count,
+  onOpen,
+  ariaLabel = "\uC54C\uB9BC",
+  title = "\uC54C\uB9BC",
+  emptyMessage = "\uC0C8 \uC54C\uB9BC\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  footer,
+  icon,
+  className,
+  placement = "bottom-right"
+}) {
+  const [open, setOpen] = useState(false);
+  const [computedPlacement, setComputedPlacement] = useState(placement);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelId = useId();
+  const viewport = useViewport();
+  const isMobile = viewport === "mobile";
+  const badge = count ?? items2.length;
+  useEffect(() => {
+    if (!open) return;
+    onOpen?.();
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || isMobile) {
+      setComputedPlacement(placement);
+      return;
+    }
+    const trigger = triggerRef.current;
+    if (!trigger || typeof window === "undefined") return;
+    const rect = trigger.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const menuW = 360;
+    const menuH = 420;
+    const [vReq, hReq] = placement.split("-");
+    let v = vReq;
+    let h = hReq;
+    const spaceAbove = rect.top;
+    const spaceBelow = vh - rect.bottom;
+    if (v === "top" && spaceAbove < menuH && spaceBelow > spaceAbove) v = "bottom";
+    else if (v === "bottom" && spaceBelow < menuH && spaceAbove > spaceBelow) v = "top";
+    const spaceForRight = rect.right;
+    const spaceForLeft = vw - rect.left;
+    if (h === "right" && spaceForRight < menuW && spaceForLeft > spaceForRight) h = "left";
+    else if (h === "left" && spaceForLeft < menuW && spaceForRight > spaceForLeft) h = "right";
+    setComputedPlacement(`${v}-${h}`);
+  }, [open, placement, isMobile]);
+  useEffect(() => {
+    if (!open || !isMobile || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open, isMobile]);
+  const close = () => setOpen(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "etu-notif-bell" + (className ? " " + className : ""),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "etu-notif-bell-trigger",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            "aria-label": badge > 0 ? `${ariaLabel} (${badge})` : ariaLabel,
+            onClick: () => setOpen((o) => !o),
+            children: [
+              icon ?? /* @__PURE__ */ jsx(BellIcon, {}),
+              badge > 0 && /* @__PURE__ */ jsx("span", { className: "etu-notif-bell-badge", "aria-hidden": "true", children: badge > 99 ? "99+" : badge })
+            ]
+          }
+        ),
+        open && isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "etu-notif-bell-backdrop",
+              onMouseDown: close,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: panelId,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": typeof title === "string" ? title : void 0,
+              className: "etu-notif-bell-sheet",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "etu-notif-bell-sheet-grabber", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  NotifPanelBody,
+                  {
+                    title,
+                    items: items2,
+                    emptyMessage,
+                    footer,
+                    onClose: close
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        open && !isMobile && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "dialog",
+            "aria-label": typeof title === "string" ? title : void 0,
+            className: `etu-notif-bell-popover etu-notif-bell-popover--${computedPlacement}`,
+            children: /* @__PURE__ */ jsx(
+              NotifPanelBody,
+              {
+                title,
+                items: items2,
+                emptyMessage,
+                footer,
+                onClose: close
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function NotifPanelBody({
+  title,
+  items: items2,
+  emptyMessage,
+  footer,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "etu-notif-bell-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "etu-notif-bell-title", children: title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "etu-notif-bell-close",
+          "aria-label": "\uB2EB\uAE30",
+          onClick: onClose,
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "etu-notif-bell-items", children: items2.length === 0 ? /* @__PURE__ */ jsx("div", { className: "etu-notif-bell-empty", children: emptyMessage }) : items2.map((it) => /* @__PURE__ */ jsx("div", { className: "etu-notif-bell-item", children: it.content }, it.id)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "etu-notif-bell-footer", children: footer })
+  ] });
+}
+function Item({ item }) {
+  const cls = "etu-sidebar-item" + (item.active ? " etu-sidebar-item--active" : "");
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx("span", { className: "etu-sidebar-item-icon", "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "etu-sidebar-item-label", children: item.label })
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: cls,
+        href: item.href,
+        "aria-current": item.active ? "page" : void 0,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cls,
+      "aria-current": item.active ? "page" : void 0,
+      onClick: item.onClick,
+      children: inner
+    }
+  );
+}
+function Sidebar({
+  appName,
+  appIcon,
+  appHeaderExtra,
+  primary,
+  secondary,
+  secondarySections,
+  secondaryCaption = "\uB354\uBCF4\uAE30",
+  footer,
+  ariaLabel = "\uC8FC \uBA54\uB274",
+  className,
+  tabletMode = "rail",
+  open,
+  onOpenChange
+}) {
+  const dataAttrs = {
+    "data-tablet-mode": tabletMode
+  };
+  if (tabletMode === "drawer") {
+    dataAttrs["data-open"] = open ? "true" : "false";
+  }
+  useEffect(() => {
+    if (tabletMode !== "drawer" || !open) return;
+    function onKey(e) {
+      if (e.key === "Escape") onOpenChange?.(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [tabletMode, open, onOpenChange]);
+  const hasSections = secondarySections && secondarySections.length > 0;
+  const hasFlatSecondary = secondary && secondary.length > 0;
+  if (hasSections && hasFlatSecondary) {
+    const proc = globalThis.process;
+    if (!proc || !proc.env || proc.env.NODE_ENV !== "production") {
+      console.warn(
+        "[@etamong-playground/ui] <Sidebar>: both `secondary` and `secondarySections` were passed; `secondarySections` wins. Drop one to silence this warning."
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabletMode === "drawer" && open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "etu-sidebar-scrim",
+        "aria-hidden": true,
+        onClick: () => onOpenChange?.(false)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: "etu-sidebar" + (className ? " " + className : ""),
+        "aria-label": ariaLabel,
+        ...dataAttrs,
+        children: [
+          (appName || appIcon || appHeaderExtra) && /* @__PURE__ */ jsxs("div", { className: "etu-sidebar-header", children: [
+            (appIcon || appName) && /* @__PURE__ */ jsxs("div", { className: "etu-sidebar-header-app", children: [
+              appIcon ? /* @__PURE__ */ jsx("span", { className: "etu-sidebar-header-icon", "aria-hidden": true, children: appIcon }) : null,
+              appName ? /* @__PURE__ */ jsx("span", { className: "etu-sidebar-header-name", children: appName }) : null
+            ] }),
+            appHeaderExtra ? /* @__PURE__ */ jsx("div", { className: "etu-sidebar-header-extra", children: appHeaderExtra }) : null
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "etu-sidebar-section etu-sidebar-section--primary", children: primary.map((it) => /* @__PURE__ */ jsx(Item, { item: it }, it.id)) }),
+          hasSections ? secondarySections.map((section, idx) => /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              className: "etu-sidebar-section etu-sidebar-section--secondary",
+              "aria-label": typeof section.caption === "string" ? section.caption : void 0,
+              children: [
+                section.caption ? /* @__PURE__ */ jsx("div", { className: "etu-sidebar-section-caption", children: section.caption }) : null,
+                section.items.map((it) => /* @__PURE__ */ jsx(Item, { item: it }, it.id))
+              ]
+            },
+            section.id ?? idx
+          )) : hasFlatSecondary ? /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              className: "etu-sidebar-section etu-sidebar-section--secondary",
+              "aria-label": typeof secondaryCaption === "string" ? secondaryCaption : void 0,
+              children: [
+                secondaryCaption ? /* @__PURE__ */ jsx("div", { className: "etu-sidebar-caption", children: secondaryCaption }) : null,
+                secondary.map((it) => /* @__PURE__ */ jsx(Item, { item: it }, it.id))
+              ]
+            }
+          ) : null,
+          footer ? /* @__PURE__ */ jsx("div", { className: "etu-sidebar-footer", children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+function SidebarToggle({
+  open,
+  onOpenChange,
+  labelOpen = "\uBA54\uB274 \uC5F4\uAE30",
+  labelClose = "\uBA54\uB274 \uB2EB\uAE30",
+  className
+}) {
+  const onClick = useCallback(
+    () => onOpenChange(!open),
+    [open, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "etu-sidebar-toggle" + (className ? " " + className : ""),
+      "aria-label": open ? labelClose : labelOpen,
+      "aria-expanded": open,
+      onClick,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": true,
+          children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+          ] })
+        }
+      )
+    }
+  );
+}
+function useSidebarDrawer(appKey, routeKey) {
+  const storage = `${appKey}-sidebar-drawer-open`;
+  const [open, setOpen] = useState(() => {
+    try {
+      return sessionStorage.getItem(storage) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const set = useCallback(
+    (next) => {
+      setOpen(next);
+      try {
+        if (next) sessionStorage.setItem(storage, "1");
+        else sessionStorage.removeItem(storage);
+      } catch {
+      }
+    },
+    [storage]
+  );
+  useEffect(() => {
+    if (routeKey === void 0) return;
+    set(false);
+  }, [routeKey]);
+  return [open, set];
+}
+
+// src/i18nCore.ts
+var SUPPORTED_LOCALES = ["ko", "en"];
+function storageKey2(appKey) {
+  return `${appKey}-locale`;
+}
+function detectSystemLocale() {
+  if (typeof navigator === "undefined") return "en";
+  const candidates = [];
+  if (Array.isArray(navigator.languages)) {
+    candidates.push(...navigator.languages);
+  } else if (typeof navigator.language === "string") {
+    candidates.push(navigator.language);
+  }
+  for (const raw of candidates) {
+    const tag = raw.toLowerCase();
+    if (tag === "ko" || tag.startsWith("ko-")) return "ko";
+    if (tag === "en" || tag.startsWith("en-")) return "en";
+  }
+  return "en";
+}
+function getLocale(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey2(appKey));
+    if (saved === "ko" || saved === "en") return saved;
+  } catch {
+  }
+  return detectSystemLocale();
+}
+function setLocale(appKey, locale) {
+  try {
+    localStorage.setItem(storageKey2(appKey), locale);
+  } catch {
+  }
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("lang", locale);
+  }
+}
+function noFlashLocaleScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey2(appKey))};var s=localStorage.getItem(k);var l=s;if(l!=="ko"&&l!=="en"){l="en";var langs=(navigator.languages&&navigator.languages.length?navigator.languages:[navigator.language||""]);for(var i=0;i<langs.length;i++){var t=(langs[i]||"").toLowerCase();if(t==="ko"||t.indexOf("ko-")===0){l="ko";break;}if(t==="en"||t.indexOf("en-")===0){l="en";break;}}}document.documentElement.setAttribute("lang",l);}catch(e){}})();`;
+}
+function interpolate(template, vars) {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (m, k) => {
+    const v = vars[k];
+    return v === void 0 || v === null ? m : String(v);
+  });
+}
+var I18nContext = createContext(null);
+function I18nProvider({ appKey, messages, children }) {
+  const [locale, setLocaleState] = useState(() => getLocale(appKey));
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("lang", locale);
+    }
+  }, [locale]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    function onChange() {
+      try {
+        const saved = localStorage.getItem(storageKey2(appKey));
+        if (saved === "ko" || saved === "en") return;
+      } catch {
+        return;
+      }
+      setLocaleState(detectSystemLocale());
+    }
+    window.addEventListener("languagechange", onChange);
+    return () => window.removeEventListener("languagechange", onChange);
+  }, [appKey]);
+  const setLocaleCb = useCallback(
+    (next) => {
+      setLocale(appKey, next);
+      setLocaleState(next);
+    },
+    [appKey]
+  );
+  const t = useCallback(
+    (key, vars) => {
+      const localized = messages[locale]?.[key];
+      const fallback = messages.en?.[key];
+      const raw = localized ?? fallback ?? key;
+      return interpolate(raw, vars);
+    },
+    [messages, locale]
+  );
+  const value = useMemo(
+    () => ({ locale, setLocale: setLocaleCb, t }),
+    [locale, setLocaleCb, t]
+  );
+  return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
+}
+function useI18n() {
+  const ctx = useContext(I18nContext);
+  if (!ctx) {
+    throw new Error(
+      "[@etamong-playground/ui] useI18n / useT must be used inside <I18nProvider>"
+    );
+  }
+  return ctx;
+}
+function useT() {
+  return useI18n().t;
+}
+function useLocale() {
+  const { locale, setLocale: setLocale2 } = useI18n();
+  return [locale, setLocale2];
+}
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx("span", { className: "etu-navbar-chevron", "aria-hidden": true, children: "\u2039" });
+}
+function resolveBack(back) {
+  if (!back) return null;
+  if (typeof back === "function") return back;
+  if (typeof back === "string") {
+    return () => {
+      if (typeof window === "undefined") return;
+      window.history.pushState(null, "", back);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    };
+  }
+  return () => {
+    if (typeof window !== "undefined") window.history.back();
+  };
+}
+function isDevBuild2() {
+  try {
+    const proc = globalThis.process;
+    if (proc?.env?.NODE_ENV === "production") return false;
+  } catch {
+  }
+  return true;
+}
+function findStickyAncestorAbove(el) {
+  let p = el.parentElement;
+  while (p && p !== document.body) {
+    const cs = window.getComputedStyle(p);
+    if (cs.position === "sticky" || cs.position === "fixed") {
+      const pt = parseFloat(cs.paddingTop || "0");
+      if (pt >= 20) return p;
+    }
+    p = p.parentElement;
+  }
+  return null;
+}
+function assertNavbarFits(el) {
+  if (typeof window === "undefined" || !el.isConnected) return;
+  const rect = el.getBoundingClientRect();
+  const viewportH = window.innerHeight;
+  if (rect.bottom > viewportH + 0.5) {
+    console.warn(
+      `[@etamong-playground/ui] <NavigationBar>: bottom edge is off-screen \u2014 bar.bottom=${rect.bottom.toFixed(1)}px, viewport.h=${viewportH}px. Likely cause: an outer sticky/fixed bar already eats env(safe-area-inset-top) and this <NavigationBar> stacks its own. Pass safeAreaTop={false} to opt out, or hoist the bar.`,
+      el
+    );
+  } else if (rect.bottom > viewportH - 1) {
+    console.warn(
+      `[@etamong-playground/ui] <NavigationBar>: bottom edge clipped by ~${(rect.bottom - viewportH).toFixed(1)}px. Check for double safe-area stacking on iOS PWA.`,
+      el
+    );
+  }
+  const titleEl = el.querySelector(".etu-navbar-title");
+  if (titleEl) {
+    const fs = parseFloat(window.getComputedStyle(titleEl).fontSize || "0");
+    if (fs > 0 && fs < 15.5) {
+      console.warn(
+        `[@etamong-playground/ui] <NavigationBar>: title font-size is ${fs.toFixed(1)}px, below the 16px floor. Root font-size may be set < 16px in your app's CSS. The bar uses px not rem to insulate itself; check for an override.`,
+        titleEl
+      );
+    }
+  }
+  const above = findStickyAncestorAbove(el);
+  if (above) {
+    console.warn(
+      "[@etamong-playground/ui] <NavigationBar>: detected a sticky/fixed ancestor with padding-top \u2265 20px above this bar. Both will consume env(safe-area-inset-top) \u2014 pass safeAreaTop={false} to this bar (or to the outer one) so the inset is only applied once.",
+      el,
+      above
+    );
+  }
+}
+function NavigationBar({
+  title,
+  back,
+  backLabel = "\uB4A4\uB85C",
+  leading,
+  trailing,
+  sticky = true,
+  safeAreaTop = true,
+  borderless = false,
+  fadeOnScroll = true,
+  ariaLabel,
+  className
+}) {
+  const [scrolled, setScrolled] = useState(false);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!fadeOnScroll || typeof window === "undefined") return;
+    const onScroll = () => setScrolled(window.scrollY > 24);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [fadeOnScroll]);
+  useEffect(() => {
+    if (!isDevBuild2()) return;
+    const el = rootRef.current;
+    if (!el) return;
+    const target = el;
+    let f1, f2;
+    f1 = requestAnimationFrame(() => {
+      f2 = requestAnimationFrame(() => assertNavbarFits(target));
+    });
+    let resizeT;
+    function onResize() {
+      clearTimeout(resizeT);
+      resizeT = setTimeout(() => assertNavbarFits(target), 150);
+    }
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(f1);
+      cancelAnimationFrame(f2);
+      clearTimeout(resizeT);
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  const onBack = resolveBack(back);
+  const cls = "etu-navbar etu-glass" + (sticky ? " etu-navbar--sticky" : "") + (sticky && !safeAreaTop ? " etu-navbar--no-safe-top" : "") + (borderless ? " etu-navbar--borderless" : "") + (fadeOnScroll && scrolled ? " etu-navbar--scrolled" : "") + (className ? " " + className : "");
+  return /* @__PURE__ */ jsx("header", { className: cls, role: "banner", ref: rootRef, children: /* @__PURE__ */ jsxs("nav", { className: "etu-navbar-inner", "aria-label": ariaLabel ?? title, children: [
+    /* @__PURE__ */ jsxs("div", { className: "etu-navbar-leading", children: [
+      onBack ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "etu-navbar-back",
+          onClick: (e) => {
+            e.preventDefault();
+            onBack();
+          },
+          "aria-label": backLabel,
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, {}),
+            /* @__PURE__ */ jsx("span", { className: "etu-navbar-back-label", children: backLabel })
+          ]
+        }
+      ) : null,
+      leading
+    ] }),
+    /* @__PURE__ */ jsx("h1", { className: "etu-navbar-title", title, children: title }),
+    /* @__PURE__ */ jsx("div", { className: "etu-navbar-trailing", children: trailing })
+  ] }) });
+}
+
+// src/installIOSPwaShell.ts
+var PWA_CLASS = "etu-pwa-standalone";
+var IOS_PWA_CLASS = "etu-ios-pwa";
+function isIOS2() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  if (/iPad|iPhone|iPod/.test(ua)) return true;
+  return ua.includes("Mac") && typeof document !== "undefined" && navigator.maxTouchPoints > 1;
+}
+function isStandalone2() {
+  if (typeof window === "undefined") return false;
+  const nav = window.navigator;
+  if (nav.standalone === true) return true;
+  try {
+    return window.matchMedia("(display-mode: standalone)").matches;
+  } catch {
+    return false;
+  }
+}
+function installIOSPwaShell() {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  if (!html) return;
+  const standalone = isStandalone2();
+  const ios = isIOS2();
+  if (standalone) html.classList.add(PWA_CLASS);
+  if (standalone && ios) html.classList.add(IOS_PWA_CLASS);
+  if (standalone && ios) {
+    html.style.setProperty("-webkit-text-size-adjust", "100%");
+    html.style.setProperty("text-size-adjust", "100%");
+  }
+  if (standalone && ios && html.hasAttribute("data-etu-lock-zoom")) {
+    const meta = document.querySelector('meta[name="viewport"]');
+    if (meta) {
+      const content = meta.getAttribute("content") || "";
+      if (!/maximum-scale/.test(content)) {
+        meta.setAttribute("content", content.replace(/\s*$/, "") + ", maximum-scale=1");
+      }
+    }
+  }
+}
+var LEGAL_HUB_BASE_URL = "https://legal.m.etamong.com";
+var LEGAL_MANIFEST_URL = `${LEGAL_HUB_BASE_URL}/api/public-manifest`;
+var KIND_ORDER = { terms: 1, privacy: 2 };
+var DEFAULT_KIND_LABELS = {
+  terms: "\uC774\uC6A9\uC57D\uAD00",
+  privacy: "\uAC1C\uC778\uC815\uBCF4\uCC98\uB9AC\uBC29\uCE68"
+};
+var SOFT_TTL_MS = 60 * 60 * 1e3;
+var HARD_TTL_MS = 24 * 60 * 60 * 1e3;
+function cacheKey(appSlug, manifestUrl) {
+  return `etu:legal-availability:${manifestUrl}:${appSlug}`;
+}
+function readCache(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed.kinds) || typeof parsed.fetchedAt !== "number") return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function writeCache(key, entry) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(entry));
+  } catch {
+  }
+}
+function sortKinds(kinds) {
+  return [...kinds].sort((a, b) => {
+    const ra = KIND_ORDER[a] ?? 99;
+    const rb = KIND_ORDER[b] ?? 99;
+    if (ra !== rb) return ra - rb;
+    return a.localeCompare(b);
+  });
+}
+function pickKinds(manifest, appSlug) {
+  const entry = manifest.services?.[appSlug];
+  if (!entry) return [];
+  const out = [];
+  for (const [k, v] of Object.entries(entry)) {
+    if (k === "identity") continue;
+    if (v) out.push(k);
+  }
+  return sortKinds(out);
+}
+function useLegalAvailability(appSlug, options = {}) {
+  const { manifestUrl = LEGAL_MANIFEST_URL, disabled = false } = options;
+  const key = cacheKey(appSlug, manifestUrl);
+  const initial = readCache(key);
+  const initialFresh = initial !== null && Date.now() - initial.fetchedAt < HARD_TTL_MS;
+  const [kinds, setKinds] = useState(initialFresh ? initial.kinds : []);
+  const [status, setStatus] = useState(() => {
+    if (disabled) return "loading";
+    if (!initial) return "loading";
+    if (Date.now() - initial.fetchedAt < SOFT_TTL_MS) return "loaded";
+    return "stale";
+  });
+  const [tick, setTick] = useState(0);
+  const aliveRef = useRef(true);
+  useEffect(() => {
+    aliveRef.current = true;
+    return () => {
+      aliveRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (disabled) return;
+    const cached = readCache(key);
+    if (cached && Date.now() - cached.fetchedAt < SOFT_TTL_MS && tick === 0) {
+      return;
+    }
+    let cancelled = false;
+    fetch(manifestUrl, { credentials: "omit" }).then(async (res) => {
+      if (!res.ok) throw new Error(`manifest ${res.status}`);
+      const body = await res.json();
+      if (cancelled || !aliveRef.current) return;
+      const next = pickKinds(body, appSlug);
+      setKinds(next);
+      setStatus("loaded");
+      writeCache(key, { kinds: next, fetchedAt: Date.now() });
+    }).catch(() => {
+      if (cancelled || !aliveRef.current) return;
+      setStatus((prev) => prev === "loading" ? "error" : prev);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [appSlug, key, manifestUrl, disabled, tick]);
+  const refresh = useCallback(() => setTick((t) => t + 1), []);
+  return { kinds, status, refresh };
+}
+function LegalRow({
+  icon,
+  label,
+  trailing,
+  href,
+  onClick,
+  external,
+  isFirst
+}) {
+  const trailingNode = trailing ?? (external ? "\u2197" : "\u203A");
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: "etu-legal-row" + (isFirst ? "" : " etu-legal-row--divided"),
+      href,
+      onClick: (e) => {
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
+      },
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "etu-legal-row-icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "etu-legal-row-label", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "etu-legal-row-trailing", "aria-hidden": true, children: trailingNode })
+      ]
+    }
+  );
+}
+function LegalMenuItem({
+  appSlug: _appSlug,
+  to = "/more/legal",
+  onNavigate,
+  icon = "\u2696\uFE0F",
+  label = "\uBC95\uB960 \uC815\uBCF4",
+  isFirst
+}) {
+  return /* @__PURE__ */ jsx(
+    LegalRow,
+    {
+      icon,
+      label,
+      trailing: "\u203A",
+      href: to,
+      onClick: onNavigate ? () => onNavigate(to) : void 0,
+      isFirst
+    }
+  );
+}
+var KIND_ICONS = {
+  terms: "\u{1F4C4}",
+  privacy: "\u{1F512}"
+};
+function LegalPage({
+  appSlug,
+  identityLabel = "\uB85C\uADF8\uC778 \uC815\uCC45",
+  hubBaseUrl = LEGAL_HUB_BASE_URL,
+  kindLabels,
+  anchorOverride,
+  manifestUrl,
+  emptyMessage = "\uD604\uC7AC \uB4F1\uB85D\uB41C \uBC95\uB960 \uBB38\uC11C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  className
+}) {
+  const { kinds, status } = useLegalAvailability(appSlug, manifestUrl ? { manifestUrl } : void 0);
+  const labelFor = (kind) => kindLabels?.[kind] ?? DEFAULT_KIND_LABELS[kind] ?? kind;
+  const iconFor = (kind) => KIND_ICONS[kind] ?? "\u{1F4DC}";
+  const anchorFor = (kind) => anchorOverride?.[kind] ?? `${appSlug}-${kind}`;
+  const hasL2 = kinds.length > 0;
+  const showEmptyHint = !hasL2 && (status === "loaded" || status === "stale");
+  return /* @__PURE__ */ jsxs("div", { className: "etu-legal-card" + (className ? " " + className : ""), children: [
+    kinds.map((kind, i) => /* @__PURE__ */ jsx(
+      LegalRow,
+      {
+        icon: iconFor(kind),
+        label: labelFor(kind),
+        trailing: "\u2197",
+        href: `${hubBaseUrl}/#${anchorFor(kind)}`,
+        external: true,
+        isFirst: i === 0
+      },
+      kind
+    )),
+    /* @__PURE__ */ jsx(
+      LegalRow,
+      {
+        icon: "\u{1FAAA}",
+        label: identityLabel,
+        trailing: "\u2197",
+        href: `${hubBaseUrl}/#identity`,
+        external: true,
+        isFirst: !hasL2
+      }
+    ),
+    showEmptyHint && /* @__PURE__ */ jsx("p", { className: "etu-legal-empty", role: "status", children: emptyMessage })
+  ] });
+}
+var KIND_LABELS = {
+  privacy: { ko: "\uAC1C\uC778\uC815\uBCF4\uCC98\uB9AC\uBC29\uCE68", en: "Privacy Policy" },
+  terms: { ko: "\uC774\uC6A9\uC57D\uAD00", en: "Terms of Service" },
+  identity: { ko: "\uB85C\uADF8\uC778 \uC815\uCC45", en: "Login Policy" }
+};
+function kindLabel(kind, locale) {
+  return KIND_LABELS[kind]?.[locale] ?? kind;
+}
+function dismissKey(docs) {
+  return "legal-policy-notice:" + docs.map((d) => `${d.kind}@${d.upcoming.version}`).sort().join(",");
+}
+function earliestDate(docs) {
+  return docs.map((d) => d.upcoming.effectiveDate).sort()[0] ?? "";
+}
+function isAdverse(docs) {
+  return docs.some((d) => d.upcoming.adverse === true);
+}
+var subscribe = () => () => {
+};
+function PolicyChangeBanner({
+  appSlug,
+  locale = "ko",
+  hubBaseUrl = LEGAL_HUB_BASE_URL,
+  renderLink,
+  className
+}) {
+  const isClient = useSyncExternalStore(subscribe, () => true, () => false);
+  const [docs, setDocs] = useState(null);
+  const [dismissed, setDismissed] = useState(false);
+  useEffect(() => {
+    let live = true;
+    fetch(`${hubBaseUrl}/status.json`, { credentials: "omit" }).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((data) => {
+      if (!live) return;
+      setDocs((data.docs ?? []).filter((d) => d.serviceId === appSlug));
+    }).catch(() => {
+      if (live) setDocs([]);
+    });
+    return () => {
+      live = false;
+    };
+  }, [appSlug, hubBaseUrl]);
+  useEffect(() => {
+    if (!docs || docs.length === 0) return;
+    try {
+      setDismissed(localStorage.getItem(dismissKey(docs)) === "1");
+    } catch {
+    }
+  }, [docs]);
+  if (!isClient || !docs || docs.length === 0 || dismissed) return null;
+  const date = earliestDate(docs);
+  const adverse = isAdverse(docs);
+  const docHref = `${hubBaseUrl}/#${docs[0].docAnchor}`;
+  const docNames = locale === "ko" ? docs.map((d) => kindLabel(d.kind, "ko")).join("\xB7") : docs.map((d) => kindLabel(d.kind, "en")).join(" and ");
+  const bodyText = locale === "ko" ? adverse ? `${docNames}\uC774(\uAC00) ${date}\uBD80\uD130 \uBCC0\uACBD\uB429\uB2C8\uB2E4. \uC774\uC6A9\uC790\uC5D0\uAC8C \uC601\uD5A5\uC774 \uC788\uB294 \uC911\uC694\uD55C \uBCC0\uACBD\uC785\uB2C8\uB2E4.` : `${docNames}\uC774(\uAC00) ${date}\uBD80\uD130 \uBCC0\uACBD\uB429\uB2C8\uB2E4.` : adverse ? `Important change: our ${docNames} will change on ${date}.` : `Our ${docNames} will change on ${date}.`;
+  const linkLabel = locale === "ko" ? "\uC790\uC138\uD788 \uBCF4\uAE30" : "Learn more";
+  const closeLabel = locale === "ko" ? "\uB2EB\uAE30" : "Dismiss";
+  const link = renderLink ? renderLink(docHref, linkLabel) : /* @__PURE__ */ jsx("a", { href: docHref, target: "_blank", rel: "noopener noreferrer", children: linkLabel });
+  function handleDismiss() {
+    try {
+      localStorage.setItem(dismissKey(docs), "1");
+    } catch {
+    }
+    setDismissed(true);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": locale === "ko" ? "\uBC95\uB960 \uC815\uCC45 \uBCC0\uACBD \uC548\uB0B4" : "Policy change notice",
+      className: [
+        "etu-policy-change-banner",
+        adverse ? "etu-policy-change-banner--adverse" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "etu-policy-change-banner-body", children: [
+          bodyText,
+          " ",
+          link
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "etu-policy-change-banner-close",
+            "aria-label": closeLabel,
+            onClick: handleDismiss,
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+function getCell(col, row) {
+  if (col.render) return col.render(row);
+  const v = row[col.key];
+  if (v === null || v === void 0 || v === "") return "\u2014";
+  if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+    return String(v);
+  }
+  return v;
+}
+function cellClass(col) {
+  const out = ["etu-dt-cell"];
+  if (col.nowrap) out.push("etu-dt-nowrap");
+  if (col.align && col.align !== "left") out.push(`etu-dt-align-${col.align}`);
+  if (col.className) out.push(col.className);
+  return out.join(" ");
+}
+function DataTable(props) {
+  const { rows, rowKey, rowActions, emptyState, className, mode = "auto" } = props;
+  const cols = props.columns.filter((c) => !c.hidden);
+  const primaryKey = props.primaryColumn ?? cols[0]?.key;
+  const outerCls = [
+    "etu-dt",
+    mode === "wide" ? "etu-dt--force-wide" : "",
+    mode === "cards" ? "etu-dt--force-cards" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  if (rows.length === 0 && emptyState) {
+    return /* @__PURE__ */ jsx("div", { className: outerCls, children: emptyState });
+  }
+  const wideCols = cols.filter((c) => !c.hiddenWide);
+  const cardCols = cols.filter((c) => !c.hiddenNarrow);
+  return /* @__PURE__ */ jsxs("div", { className: outerCls, children: [
+    /* @__PURE__ */ jsxs("table", { className: "etu-dt-table", role: "table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        wideCols.map((c) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: cellClass(c),
+            style: c.width ? { width: c.width } : void 0,
+            children: c.label
+          },
+          c.key
+        )),
+        rowActions ? /* @__PURE__ */ jsx("th", { className: "etu-dt-cell etu-dt-nowrap", "aria-label": "actions" }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
+        wideCols.map((c) => /* @__PURE__ */ jsx("td", { className: cellClass(c), children: getCell(c, row) }, c.key)),
+        rowActions ? /* @__PURE__ */ jsx("td", { className: "etu-dt-cell etu-dt-nowrap etu-dt-actions", children: rowActions(row) }) : null
+      ] }, rowKey(row, i))) })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "etu-dt-cards", role: "list", children: rows.map((row, i) => {
+      const primary = primaryKey ? cardCols.find((c) => c.key === primaryKey) : void 0;
+      const rest = cardCols.filter((c) => c.key !== primaryKey);
+      return /* @__PURE__ */ jsxs("li", { className: "etu-dt-card", children: [
+        primary ? /* @__PURE__ */ jsx("div", { className: "etu-dt-card-header", children: getCell(primary, row) }) : null,
+        /* @__PURE__ */ jsx("dl", { className: "etu-dt-card-fields", children: rest.map((c) => /* @__PURE__ */ jsxs("div", { className: "etu-dt-card-field", children: [
+          /* @__PURE__ */ jsx("dt", { className: "etu-dt-card-label", children: c.label }),
+          /* @__PURE__ */ jsx("dd", { className: "etu-dt-card-value" + (c.nowrap ? " etu-dt-nowrap" : ""), children: getCell(c, row) })
+        ] }, c.key)) }),
+        rowActions ? /* @__PURE__ */ jsx("div", { className: "etu-dt-card-actions", children: rowActions(row) }) : null
+      ] }, rowKey(row, i));
+    }) })
+  ] });
+}
+function buildSkillMarkdown(skill) {
+  const fm = `---
+name: ${skill.name}
+description: ${skill.description.replace(/\n/g, " ")}
+---`;
+  const body = skill.body.trim();
+  return `${fm}
+
+${body}
+`;
+}
+function downloadSkill(skill) {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([buildSkillMarkdown(skill)], { type: "text/markdown" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${skill.name}.md`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+function curlOneLiner(publicUrl, slug) {
+  return `curl -fsSL ${publicUrl} -o ~/.claude/skills/${slug}/SKILL.md`;
+}
+function defaultSkillUsageSection(skill) {
+  const filename = `${skill.name}.md`;
+  const oneLiner = skill.publicUrl ? curlOneLiner(skill.publicUrl, skill.name) : void 0;
+  return {
+    id: "__skill_usage__",
+    label: "Claude skill \uC0AC\uC6A9\uBC95",
+    summary: oneLiner ? "\uD55C \uC904 install \uB610\uB294 \uD30C\uC77C \uB2E4\uC6B4\uB85C\uB4DC\uB85C LLM\uACFC \uD568\uAED8 \uC4F0\uB294 \uBC95." : "\uB2E4\uC6B4\uB85C\uB4DC\uD55C .md \uD30C\uC77C\uC744 LLM\uACFC \uD568\uAED8 \uC4F0\uB294 \uBC95.",
+    content: /* @__PURE__ */ jsxs("div", { className: "etu-docs-hub-skill-usage", children: [
+      oneLiner ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: "\uC544\uB798 \uD55C \uC904\uC774\uBA74 Claude Code \uAC00 \uB2E4\uC74C \uC138\uC158\uBD80\uD130 \uC774 \uC2A4\uD0AC\uC744 \uC778\uC2DD\uD574\uC694. \uD5E4\uB4DC\uB9AC\uC2A4/CI/SSH \uC5B4\uB514\uC11C\uB098 \uAC19\uC740 \uBA85\uB839\uC73C\uB85C \uAE54\uB9AC\uACE0, \uB2E4\uC2DC \uC2E4\uD589\uD558\uBA74 \uCD5C\uC2E0 \uBC30\uD3EC\uBCF8\uC73C\uB85C \uB36E\uC5B4\uC368\uC838\uC694." }),
+        /* @__PURE__ */ jsxs("div", { className: "etu-docs-hub-skill-install", children: [
+          /* @__PURE__ */ jsx("code", { className: "etu-docs-hub-skill-install-cmd", children: oneLiner }),
+          /* @__PURE__ */ jsx(CopyButton, { value: oneLiner, label: "\uBA85\uB839 \uBCF5\uC0AC" })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "etu-docs-hub-skill-install-note", children: [
+          '\uD30C\uC77C\uC774 \uD544\uC694\uD558\uBA74 \uC6B0\uCE21 \uC704 "\u{1F4E5}" \uBC84\uD2BC\uC73C\uB85C ',
+          /* @__PURE__ */ jsx("code", { children: filename }),
+          " \uC744 \uC9C1\uC811 \uBC1B\uC544 ",
+          /* @__PURE__ */ jsxs("code", { children: [
+            "~/.claude/skills/",
+            skill.name,
+            "/SKILL.md"
+          ] }),
+          " \uC5D0 \uB450\uC154\uB3C4 \uB3FC\uC694 (\uC624\uD504\uB77C\uC778/\uC5D0\uC5B4\uAC2D)."
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("p", { children: [
+        '\uC704 "\u{1F4E5}" \uBC84\uD2BC\uC774 ',
+        /* @__PURE__ */ jsx("code", { children: filename }),
+        " \uD30C\uC77C \uD55C \uAC1C\uB97C \uB0B4\uB824\uBC1B\uC544\uC694. \uADF8 \uC548\uC5D0 \uC774 \uD398\uC774\uC9C0\uC758 \uD575\uC2EC\uC774 \uB9C8\uD06C\uB2E4\uC6B4\uC73C\uB85C \uB4E4\uC5B4 \uC788\uC5B4\uC11C, \uC5B4\uB290 LLM\uACFC\uB3C4 \uADF8\uB300\uB85C \uAC19\uC774 \uC4F8 \uC218 \uC788\uC5B4\uC694."
+      ] }),
+      /* @__PURE__ */ jsx("h4", { children: "Claude Code (CLI)" }),
+      oneLiner ? /* @__PURE__ */ jsxs("p", { children: [
+        '\uD55C \uC904 install \uD6C4 Claude Code \uB97C \uC7AC\uC2DC\uC791\uD558\uAC70\uB098 \uC0C8 \uC138\uC158\uC744 \uC5F4\uBA74 \uC2A4\uD0AC\uC774 \uC790\uB3D9\uC73C\uB85C \uC778\uC2DD\uB3FC\uC694. \uB300\uD654 \uC911\uC5D0 "',
+        /* @__PURE__ */ jsx("em", { children: skill.name }),
+        ' \uC2A4\uD0AC \uC368\uC11C\u2026" \uAC19\uC774 \uBD80\uB974\uBA74 Claude \uAC00 \uC774 \uAC00\uC774\uB4DC\uB97C \uBC14\uD0D5\uC73C\uB85C \uB3D9\uC791\uD574\uC694.'
+      ] }) : /* @__PURE__ */ jsxs("ol", { children: [
+        /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsxs("code", { children: [
+            "~/.claude/skills/",
+            skill.name,
+            "/SKILL.md"
+          ] }),
+          " \uACBD\uB85C\uB85C \uC62E\uAE30\uC138\uC694 (\uB514\uB809\uD130\uB9AC \uC774\uB984\uACFC \uD30C\uC77C \uC774\uB984\uC740 \uC704\uC640 \uADF8\uB300\uB85C)."
+        ] }),
+        /* @__PURE__ */ jsx("li", { children: "Claude Code\uB97C \uC7AC\uC2DC\uC791\uD558\uAC70\uB098 \uC0C8 \uC138\uC158\uC744 \uC5F4\uBA74 \uC2A4\uD0AC\uC774 \uC790\uB3D9\uC73C\uB85C \uC778\uC2DD\uB3FC\uC694." }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          '\uB300\uD654 \uC911\uC5D0 "',
+          /* @__PURE__ */ jsx("em", { children: skill.name }),
+          ' \uC2A4\uD0AC \uC368\uC11C\u2026" \uAC19\uC774 \uBD80\uB974\uBA74 Claude\uAC00 \uC774 \uAC00\uC774\uB4DC\uB97C \uBC14\uD0D5\uC73C\uB85C \uB3D9\uC791\uD574\uC694.'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("h4", { children: "Codex / \uAE30\uD0C0 \uCF54\uB529 \uC5D0\uC774\uC804\uD2B8" }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        "\uD234\uC774 \uAD8C\uC7A5\uD558\uB294 \uC704\uCE58(\uC608: ",
+        /* @__PURE__ */ jsx("code", { children: "~/.codex/skills/" }),
+        ",",
+        /* @__PURE__ */ jsx("code", { children: "~/.codex/prompts/" }),
+        ")\uC5D0 \uAC19\uC740 \uD30C\uC77C\uC744 \uB450\uAC70\uB098, \uC138\uC158\uC744 \uC2DC\uC791\uD560 \uB54C \uCCA8\uBD80 \uD30C\uC77C\uB85C \uC62C\uB9AC\uC138\uC694. \uD504\uB860\uD2B8\uB9E4\uD130\uB294 \uC774\uB984\xB7\uC124\uBA85\uB9CC \uB2F4\uACA8 \uC788\uC5B4\uC11C \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8 / \uC9C0\uC2DC\uBB38 \uC5B4\uB290 \uC790\uB9AC\uC5D0 \uB123\uC5B4\uB3C4 \uBB34\uD574\uD574\uC694."
+      ] }),
+      /* @__PURE__ */ jsx("h4", { children: "\uADF8 \uC678 LLM (ChatGPT, Gemini, \uC790\uCCB4 \uBD07 \uB4F1)" }),
+      /* @__PURE__ */ jsx("p", { children: skill.publicUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "\uD30C\uC77C\uC744 \uC5F4\uC5B4 \uBCF8\uBB38\uC744 \uD1B5\uC9F8\uB85C \uCCAB \uBA54\uC2DC\uC9C0(\uB610\uB294 \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8)\uC5D0 \uBD99\uC5EC \uB123\uAC70\uB098, ",
+        /* @__PURE__ */ jsx("code", { children: skill.publicUrl }),
+        " \uC744 \uAC00\uC838\uC624\uAC8C \uD574\uB3C4 \uB3FC\uC694. \uC9E7\uC740 \uD55C \uD30C\uC77C\uC774\uB77C \uCEE8\uD14D\uC2A4\uD2B8 \uBD80\uB2F4\uC774 \uAC70\uC758 \uC5C6\uC5B4\uC694."
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "\uD30C\uC77C\uC744 \uC5F4\uC5B4 \uBCF8\uBB38\uC744 \uD1B5\uC9F8\uB85C \uCCAB \uBA54\uC2DC\uC9C0(\uB610\uB294 \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8)\uC5D0 \uBD99\uC5EC \uB123\uC73C\uBA74 \uB3FC\uC694. \uC9E7\uC740 \uD55C \uD30C\uC77C\uC774\uB77C \uCEE8\uD14D\uC2A4\uD2B8 \uBD80\uB2F4\uC774 \uAC70\uC758 \uC5C6\uC5B4\uC694." }) }),
+      /* @__PURE__ */ jsx("h4", { children: "\uC5C5\uB370\uC774\uD2B8" }),
+      /* @__PURE__ */ jsx("p", { children: oneLiner ? "\uC774 \uD398\uC774\uC9C0\uC5D0 \uC0C8 \uAE30\uB2A5\uC774 \uBC18\uC601\uB418\uBA74 \uAC19\uC740 \uBA85\uB839\uC744 \uB2E4\uC2DC \uC2E4\uD589\uD574 \uB36E\uC5B4\uC4F0\uBA74 \uB3FC\uC694. URL \uC740 \uB298 \uCD5C\uC2E0 \uBC30\uD3EC\uBCF8\uC744 \uAC00\uB9AC\uCF1C\uC694." : "\uC774 \uD398\uC774\uC9C0\uC5D0 \uC0C8 \uAE30\uB2A5\uC774 \uBC18\uC601\uB418\uBA74 \uAC19\uC740 \uBC84\uD2BC\uC73C\uB85C \uB2E4\uC2DC \uBC1B\uC544 \uB36E\uC5B4\uC4F0\uBA74 \uB3FC\uC694. \uC2A4\uD0AC\uC740 \uC571 \uBCC0\uACBD\uACFC \uAC19\uC740 \uCEE4\uBC0B\uC5D0\uC11C \uAC31\uC2E0\uB3FC\uC694 \u2014 \uB298 \uCD5C\uC2E0." })
+    ] })
+  };
+}
+function DocsHub({
+  appName,
+  description,
+  sections,
+  skill,
+  sectionId,
+  onSectionChange,
+  defaultSectionId,
+  className
+}) {
+  const allSections = skill ? skill.usageSection === null ? sections : [...sections, skill.usageSection ?? defaultSkillUsageSection(skill)] : sections;
+  const first = allSections[0]?.id ?? "";
+  const [uncontrolled, setUncontrolled] = useState(defaultSectionId ?? first);
+  const activeId = sectionId ?? uncontrolled;
+  const active = allSections.find((s) => s.id === activeId) ?? allSections[0];
+  const select = (id) => {
+    if (sectionId === void 0) setUncontrolled(id);
+    onSectionChange?.(id);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "etu-docs-hub" + (className ? " " + className : ""), children: [
+    /* @__PURE__ */ jsxs("header", { className: "etu-docs-hub-head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "etu-docs-hub-head-text", children: [
+        appName && /* @__PURE__ */ jsx("h1", { className: "etu-docs-hub-app-name", children: appName }),
+        description && /* @__PURE__ */ jsx("p", { className: "etu-docs-hub-description", children: description })
+      ] }),
+      skill && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "etu-docs-hub-skill-btn",
+          onClick: () => downloadSkill(skill),
+          title: `${skill.name}.md`,
+          children: skill.buttonLabel ?? "\u{1F4E5} Claude skill \uBC1B\uAE30"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "etu-docs-hub-body", children: [
+      /* @__PURE__ */ jsx("nav", { className: "etu-docs-hub-nav", "aria-label": "\uBB38\uC11C \uC139\uC158", children: allSections.map((s) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "etu-docs-hub-nav-item" + (s.id === active?.id ? " etu-docs-hub-nav-item--active" : ""),
+          onClick: () => select(s.id),
+          "aria-current": s.id === active?.id ? "page" : void 0,
+          children: s.label
+        },
+        s.id
+      )) }),
+      /* @__PURE__ */ jsxs("article", { className: "etu-docs-hub-section", id: `docs-section-${active?.id}`, children: [
+        active?.summary && /* @__PURE__ */ jsx("p", { className: "etu-docs-hub-section-summary", children: active.summary }),
+        active?.content
+      ] })
+    ] })
+  ] });
+}
+function buildSkillMarkdownText(skill) {
+  return buildSkillMarkdown(skill);
+}
+var FLEET_LOGIN = "/auth/login";
+var FLEET_LOGOUT = "/auth/logout";
+var FLEET_ME = "/api/me";
+var REFRESH_EVENT2 = "etu:me-refresh";
+var SESSION_EXPIRED_EVENT = "etu:session-expired";
+var SHARE_CRAWLER_UA_SUBSTRINGS = [
+  "kakaotalk-scrap",
+  "slackbot",
+  "facebookexternalhit",
+  "twitterbot",
+  "discordbot",
+  "linkedinbot",
+  "telegrambot",
+  "whatsapp",
+  "line-poker"
+];
+function isShareCrawler(ua) {
+  if (!ua) return false;
+  const u = ua.toLowerCase();
+  for (const needle of SHARE_CRAWLER_UA_SUBSTRINGS) {
+    if (u.includes(needle)) return true;
+  }
+  return false;
+}
+function currentRd2() {
+  if (typeof window === "undefined") return "/";
+  return window.location.pathname + window.location.search + window.location.hash;
+}
+function fleetLoginUrl(rd) {
+  return FLEET_LOGIN + "?rd=" + encodeURIComponent(rd ?? currentRd2());
+}
+function fleetLogoutUrl(rd) {
+  return FLEET_LOGOUT + "?rd=" + encodeURIComponent(rd ?? "/");
+}
+function fleetSignIn(rd) {
+  if (typeof window !== "undefined") window.location.href = fleetLoginUrl(rd);
+}
+function fleetSignOut(rd) {
+  if (typeof window !== "undefined") window.location.href = fleetLogoutUrl(rd);
+}
+function useIdentity(opts = {}) {
+  const base = useMe({ endpoint: FLEET_ME, treat401AsAnonymous: true, ...opts });
+  return { ...base, signIn: fleetSignIn, signOut: fleetSignOut };
+}
+function AuthGate({
+  children,
+  rd,
+  loadingFallback = null,
+  userAgent,
+  disableRedirect
+}) {
+  const ua = userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : void 0);
+  const crawler = isShareCrawler(ua);
+  const { me, loading } = useIdentity();
+  useEffect(() => {
+    if (crawler) return;
+    if (loading) return;
+    if (me) return;
+    if (disableRedirect) return;
+    fleetSignIn(rd);
+  }, [crawler, loading, me, rd, disableRedirect]);
+  if (crawler) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (loading) return /* @__PURE__ */ jsx(Fragment, { children: loadingFallback });
+  if (!me) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var baseBtn = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.4rem",
+  padding: "0.45rem 0.85rem",
+  borderRadius: "var(--etu-radius-md, 0.5rem)",
+  border: "1px solid var(--etu-border, rgba(255,255,255,0.12))",
+  background: "var(--etu-surface, transparent)",
+  color: "var(--etu-fg, inherit)",
+  cursor: "pointer",
+  fontSize: "0.875rem",
+  lineHeight: 1
+};
+function LoginButton({
+  rd,
+  label = "Sign in",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-etu-auth": "login",
+      style: { ...baseBtn, ...style },
+      onClick: () => fleetSignIn(rd),
+      ...rest,
+      children: label
+    }
+  );
+}
+function LogoutButton({
+  rd,
+  label = "Sign out",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-etu-auth": "logout",
+      style: { ...baseBtn, ...style },
+      onClick: () => fleetSignOut(rd),
+      ...rest,
+      children: label
+    }
+  );
+}
+function SessionBadge({
+  me: overrideMe,
+  onClick,
+  className
+}) {
+  const { me: hookMe } = useIdentity();
+  const me = overrideMe ?? hookMe;
+  if (!me) return null;
+  const label = me.name || me.preferred_username || me.email;
+  const initial = (label || "?").trim().charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-etu-auth": "session-badge",
+      className,
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.55rem",
+        padding: "0.35rem 0.55rem",
+        borderRadius: "var(--etu-radius-md, 0.5rem)",
+        border: "1px solid transparent",
+        background: "transparent",
+        color: "var(--etu-fg, inherit)",
+        cursor: onClick ? "pointer" : "default",
+        width: "100%",
+        textAlign: "left",
+        fontSize: "0.85rem",
+        lineHeight: 1.2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              width: "1.6rem",
+              height: "1.6rem",
+              borderRadius: "999px",
+              background: "var(--etu-accent, #0d9488)",
+              color: "#fff",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontWeight: 600,
+              fontSize: "0.85rem",
+              flex: "0 0 auto"
+            },
+            children: initial
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              minWidth: 0,
+              flex: 1
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function SessionExpiredDialog({
+  title = "Session expired",
+  message = "Your session ended. Sign in again to continue.",
+  signInLabel = "Sign in",
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onExpired = () => setOpen(true);
+    window.addEventListener(SESSION_EXPIRED_EVENT, onExpired);
+    return () => window.removeEventListener(SESSION_EXPIRED_EVENT, onExpired);
+  }, []);
+  const onSignIn = useCallback(() => fleetSignIn(), []);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "etu-session-expired-title",
+      className,
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.45)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            maxWidth: "22rem",
+            width: "calc(100% - 2rem)",
+            background: "var(--etu-surface, #1f2937)",
+            color: "var(--etu-fg, #f9fafb)",
+            borderRadius: "var(--etu-radius-lg, 0.75rem)",
+            padding: "1.25rem 1.25rem 1rem",
+            boxShadow: "0 12px 32px rgba(0,0,0,0.45)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: "etu-session-expired-title",
+                style: { margin: "0 0 0.5rem", fontSize: "1.05rem" },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { style: { margin: "0 0 1rem", fontSize: "0.9rem", opacity: 0.85 }, children: message }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-etu-auth": "session-expired-signin",
+                style: {
+                  ...baseBtn,
+                  background: "var(--etu-accent, #0d9488)",
+                  borderColor: "transparent",
+                  color: "#fff"
+                },
+                onClick: onSignIn,
+                children: signInLabel
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function notifySessionExpired() {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new Event(SESSION_EXPIRED_EVENT));
+}
+function refreshIdentity() {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new Event(REFRESH_EVENT2));
+}
+
+export { AdminBadge, AdminGate, AppInfoSection, AuthGate, Avatar, BackButton, BackofficeLayout, CODE_TO_KEY, COMMAND_PALETTE_OPEN_EVENT, CommandPalette, CommandPaletteTrigger, CopyButton, DESKTOP_MIN, DataTable, DeployInfo, DialogHost, DocsHub, EmptyState, ErrorPage, HttpError, I18nProvider, InstallBanner, LEGAL_HUB_BASE_URL, LEGAL_MANIFEST_URL, LegalMenuItem, LegalPage, LegalRow, LoginButton, LogoutButton, MobileTabBar, NavigationBar, NotificationBell, OpenInBrowserButton, PolicyChangeBanner, RelTime, SHARE_CRAWLER_UA_SUBSTRINGS, SUPPORTED_LOCALES, SessionBadge, SessionExpiredDialog, Sidebar, SidebarToggle, StatusBanner, TABLET_MIN, Toaster, UserMenu, ViewportProvider, buildSkillMarkdownText, createFetch, crossLocaleKeywords, dismissToast, fleetLoginUrl, fleetLogoutUrl, fleetSignIn, fleetSignOut, formatAbsTime, formatRelTime, getLocale, getTheme, getViewport, installIOSPwaShell, interpolate, isAdminLike, isInputTarget, isShareCrawler, networkFirstSwSource, noFlashLocaleScript, noFlashThemeScript, noFlashViewportScript, notifySessionExpired, openCommandPalette, refreshIdentity, registerServiceWorker, runInAppBackFallback, setLocale, setTheme, shortcutKey, signIn, signInUrl, signOut, signOutUrl, toast, uiConfirm, uiPrompt, useClipboard, useGoToShortcuts, useI18n, useIdentity, useInAppBack, useInstallPrompt, useLegalAvailability, useLocale, useMe, useRouteState, useSessionState, useSidebarDrawer, useStatusBanner, useT, useViewport };