@insession/design-system 1.3.1

package/dist/index.js

@@ -0,0 +1,1962 @@
+// avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function initialOf(name, fallback) {
+  return [...name || fallback || "?"][0].toUpperCase();
+}
+function Avatar({
+  label,
+  name,
+  src,
+  fallback,
+  color,
+  bgColor,
+  size,
+  status,
+  ring,
+  className = "",
+  fallbackClassName = "",
+  alt = ""
+}) {
+  const bg = color ?? bgColor;
+  const content = label != null ? label : initialOf(name, fallback);
+  const ds = status != null || ring === true;
+  if (ds) {
+    const dim2 = size ?? 40;
+    const circleStyle = {
+      width: dim2,
+      height: dim2,
+      fontSize: dim2 * 0.4,
+      ...!src && bg ? { background: bg } : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `relative inline-flex shrink-0 ${className}`.trim(),
+        style: { width: dim2, height: dim2 },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `inline-flex items-center justify-center overflow-hidden rounded-pill font-bold text-white ${src ? "bg-transparent" : bg ? "" : "bg-info"} ${ring ? "border-2 border-solid border-surface" : ""}`.trim(),
+              style: circleStyle,
+              children: src ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src,
+                  alt: alt || (typeof label === "string" ? label : name || ""),
+                  referrerPolicy: "no-referrer",
+                  className: "h-full w-full object-cover"
+                }
+              ) : content
+            }
+          ),
+          status != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `absolute right-0 bottom-0 rounded-pill border-2 border-solid border-surface ${status === "live" ? "bg-success" : "bg-text-dim"}`,
+              style: { width: dim2 * 0.28, height: dim2 * 0.28 }
+            }
+          )
+        ]
+      }
+    );
+  }
+  const dim = size != null ? { width: size, height: size } : void 0;
+  if (src) {
+    return /* @__PURE__ */ jsx("img", { className, src, alt, referrerPolicy: "no-referrer", style: dim });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${className} ${fallbackClassName}`.trim(),
+      style: bg ? { ...dim, background: bg } : dim,
+      children: content
+    }
+  );
+}
+function AvatarStack({ people = [], max = 4, size = 40, className = "" }) {
+  const shown = people.slice(0, max);
+  const extra = people.length - shown.length;
+  const overlap = -(size * 0.3);
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center ${className}`.trim(), children: [
+    shown.map((p, i) => /* @__PURE__ */ jsx("span", { style: { marginLeft: i ? overlap : 0 }, className: "inline-flex rounded-pill", children: /* @__PURE__ */ jsx(Avatar, { ...p, size, ring: true }) }, i)),
+    extra > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: { marginLeft: overlap, width: size, height: size, fontSize: size * 0.32 },
+        className: "inline-flex items-center justify-center rounded-pill border-2 border-solid border-surface bg-surface-3 font-bold text-text-dim",
+        children: [
+          "+",
+          extra
+        ]
+      }
+    )
+  ] });
+}
+
+// icons/icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PATHS = {
+  menu: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z",
+  // サイドナビ用(#463。DS SideNav の home / graphic_eq / history)
+  home: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",
+  graphic_eq: "M7 18h2V6H7v12zm4 4h2V2h-2v20zm-8-8h2v-4H3v4zm12 4h2V6h-2v12zm4-4h2v-4h-2v4z",
+  history: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z",
+  settings: "M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z",
+  check: "M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z",
+  check_circle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
+  warning: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+  edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  link: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z",
+  volume_off: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z",
+  // 音量スライダーのアイコン(レコードプレーヤービュー。#406)
+  volume_up: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.26 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z",
+  extension: "M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z",
+  // ステージスイッチャーのトリガー(#235。3x3グリッドの「アプリ一覧」アイコン)
+  apps: "M4 8h4V4H4v4zm6 12h4v-4h-4v4zM4 20h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z",
+  timer: "M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z",
+  movie: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z",
+  group: "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z",
+  sports_esports: "M15 7.5H9c-2.76 0-5 2.24-5 5v3c0 1.66 1.34 3 3 3 .58 0 1.11-.24 1.5-.62L10.5 16h3l2 1.88c.39.38.92.62 1.5.62 1.66 0 3-1.34 3-3v-3c0-2.76-2.24-5-5-5zM10 13H8.5v1.5H7V13H5.5v-1.5H7V10h1.5v1.5H10V13zm5.5 1c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2-2.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z",
+  auto_awesome: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zM11.5 9.5 9 4l-2.5 5.5L1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z",
+  // 入室拒否画面(#845。スペースの公開範囲で弾かれたときの空状態アイコン)
+  lock: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm3 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
+  play_arrow: "M8 5v14l11-7z",
+  // スペース内キュー(モバイル下部ナビ #572)。Material Symbols queue_music 由来。
+  queue_music: "M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z",
+  // モバイル下部タブバーのマイページ(#580)。Material Symbols account_circle 由来。
+  account_circle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z",
+  pause: "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+  fast_forward: "M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z",
+  videocam: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
+  videocam_off: "M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2 2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2zM7.73 8l6 6H6V8h1.73z",
+  mic: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z",
+  mic_off: "M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3 3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.27c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z",
+  call_end: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.7l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.51-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z",
+  // 受話器アイコン（発信/参加ボタン用。#187フォローアップ）
+  call: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
+  help: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z",
+  // 画面共有（#180）。モニター枠 + 上向き矢印(共有中)/× (共有停止)。
+  screen_share: "M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 16V6h16v10H4zm7-4h2V9h2.5L12 5.5 8.5 9H11v3z",
+  stop_screen_share: "M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 16V6h16v10H4zm3.4-8.6L12 11.6l4.6-4.2 1.4 1.4L13.4 13l4.6 4.2-1.4 1.4L12 14.4l-4.6 4.2-1.4-1.4L10.6 13 6 8.8z",
+  // ログアウト（#219 ユーザーメニューのドロップダウン用）
+  logout: "M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z",
+  // 追加（+）。チャットメッセージへのリアクション追加トリガー等（#236）。
+  add: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z",
+  // URL/動画ID追加トグル（モバイルの＋収納。#581）。Material Symbols add_link 由来。
+  add_link: "M8 11h8v2H8zm12.1 1c0-1.71-1.39-3.1-3.1-3.1h-4V7h4c2.76 0 5 2.24 5 5s-2.24 5-5 5h-4v-1.9h4c1.71 0 3.1-1.39 3.1-3.1zM3.9 12c0 1.71 1.39 3.1 3.1 3.1h4V17H7c-2.76 0-5-2.24-5-5s2.24-5 5-5h4v1.9H7c-1.71 0-3.1 1.39-3.1 3.1z",
+  // リアクション追加（顔+マーク）。チャットメッセージへのリアクション追加トリガー専用アイコン（#262）。
+  add_reaction: "M7,9.5C7,8.67,7.67,8,8.5,8S10,8.67,10,9.5c0,0.83-0.67,1.5-1.5,1.5S7,10.33,7,9.5z M12,17.5c2.33,0,4.31-1.46,5.11-3.5 H6.89C7.69,16.04,9.67,17.5,12,17.5z M15.5,11c0.83,0,1.5-0.67,1.5-1.5C17,8.67,16.33,8,15.5,8S14,8.67,14,9.5 C14,10.33,14.67,11,15.5,11z M22,1h-2v2h-2v2h2v2h2V5h2V3h-2V1z M20,12c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8 c1.46,0,2.82,0.4,4,1.08V2.84C14.77,2.3,13.42,2,11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12 c0-1.05-0.17-2.05-0.47-3h-2.13C19.78,9.93,20,10.94,20,12z",
+  // 別タブで開くリンク。参加者一覧の簡易プロフィール→詳細プロフィールへの導線（#254）。
+  open_in_new: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
+  // 参加者一覧の行展開トグル（簡易プロフィール開閉。#254）。
+  expand_more: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z",
+  expand_less: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",
+  // モバイルBottom Navのチャット導線用の吹き出しアイコン(#284)
+  chat: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
+  // チャットメッセージの「返信」アクション(#324)
+  reply: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z",
+  // 汎用の閉じる(×)。返信プレビューバーのキャンセルボタン等(#324)
+  close: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+  // フィードバック送信フォームの常設フローティングボタン(#329)。吹き出し+感嘆符。
+  feedback: "M20 2H4c-1.1 0-2 .89-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.11-.9-2-2-2zM13 14h-2v-2h2v2zm0-4h-2V6h2v4z",
+  // レコード盤(プレーヤーのレコードビュー切替ボタン用。#376)
+  album: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z",
+  // 画像スタンプ添付ボタン(チャットの画像アップロード。#394)
+  image: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14z",
+  // チャット送信ボタン(#430。message-input-action-area 整理でテキストラベルからアイコン化)
+  send: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2z",
+  // 削除ボタン(ゴミ箱。スタンプ一覧からの削除等。#416フォローアップ)
+  delete: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
+  // My Playlist(#452)への追加ボタン。塗り星(追加済み)/枠線星(未追加)。
+  star: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+  star_outline: "M22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
+  // 人物+追加。フォローボタン(未フォロー状態)用。(#397)
+  person_add: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+  // 通知ベル(ヘッダーのin-appお知らせ通知アイコン。#390)
+  notifications: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z",
+  // CDプレーヤービュー切替(#421)。円盤+小さなスピンドル穴(レコードの album より穴を小さくして
+  // 実物のCDに近い比率にする)。非零巻き数ルールで外側円(時計回り)と内側円(反時計回り)を
+  // 重ねて穴を開ける(album アイコンと同じ手法)。
+  cd: "M2,12A10,10 0 1,1 22,12A10,10 0 1,1 2,12Z M10.4,12A1.6,1.6 0 1,0 13.6,12A1.6,1.6 0 1,0 10.4,12Z",
+  // カセットプレーヤービュー切替(#421)。外枠(フレーム状に穴抜き)+2つのリール窓(各々小さな
+  // スピンドル穴つき)+中央のテープ帯。cd と同じ非零巻き数の穴あけ手法を入れ子で使う。
+  cassette: "M3,5H21V19H3Z M5,7V17H19V7Z M6.3,12A2.2,2.2 0 1,1 10.7,12A2.2,2.2 0 1,1 6.3,12Z M7.6,12A0.9,0.9 0 1,0 9.4,12A0.9,0.9 0 1,0 7.6,12Z M13.3,12A2.2,2.2 0 1,1 17.7,12A2.2,2.2 0 1,1 13.3,12Z M14.6,12A0.9,0.9 0 1,0 16.4,12A0.9,0.9 0 1,0 14.6,12Z M10.5,11.4H13.5V12.6H10.5Z",
+  // コミュニティ機能(#579)で使う追加アイコン。標準 Material Icons(0 0 24 24)。
+  search: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+  more_horiz: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+  info: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",
+  music_note: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z",
+  schedule: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z",
+  chevron_right: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",
+  tag: "M20 10V8h-4V4h-2v4h-4V4H8v4H4v2h4v4H4v2h4v4h2v-4h4v4h2v-4h4v-2h-4v-4h4zm-6 4h-4v-4h4v4z",
+  play_circle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z",
+  login: "M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z",
+  add_photo_alternate: "M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z",
+  mood: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z",
+  diversity_3: "M12 2C10.34 2 9 3.34 9 5s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm-7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm14 0c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM12 13c-2.67 0-4 1.34-4 3v2h8v-2c0-1.66-1.33-3-4-3z",
+  waving_hand: "M2.24 11.19 1 12.43l6.36 6.37a5.997 5.997 0 0 0 8.49 0l4.24-4.25c.78-.78.78-2.05 0-2.83a2.01 2.01 0 0 0-1.68-.57 2 2 0 0 0-1.9-2.35c-.24 0-.47.05-.68.13a2 2 0 0 0-2.83-1.11l-1.42-1.42a2.007 2.007 0 0 0-2.83 0l-.71.71 4.6 4.6-.71.71-6.36-6.37-1.24 1.24 1.42 1.42-2.29 2.66z",
+  // 運営管理画面(Operator Console。#625)のアイコンレール/各画面で使う Material Icons(0 0 24 24)。
+  dashboard: "M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z",
+  forum: "M15 4v7H5.17L4 12.17V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z",
+  table_view: "M10 10.02h5V21h-5zM17 21h3c1.1 0 2-.9 2-2v-9h-5v11zm3-18H5c-1.1 0-2 .9-2 2v3h19V5c0-1.1-.9-2-2-2zM3 19c0 1.1.9 2 2 2h3V10H3v9z",
+  campaign: "M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
+  inbox: "M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z",
+  arrow_forward: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",
+  arrow_downward: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",
+  filter_list: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z",
+  swap_vert: "M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z",
+  view_column: "M14.67 6v12H9.33V6h5.34zm1 12H21V6h-5.33v12zm-7.34 0V6H3v12h5.33z",
+  download: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+  upload: "M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z",
+  drag_indicator: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+  chevron_left: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z",
+  flag: "M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z",
+  // UGCモデレーション(#1056): チャットメニューの「このユーザーをブロック」用アイコン。
+  block: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z",
+  meeting_room: "M14 6v15H3v-2h2V3h9v1h5v15h2v2h-4V6h-3zm-4 5v2h2v-2h-2z",
+  pending: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-5 11c-.83 0-1.5-.67-1.5-1.5S6.17 10 7 10s1.5.67 1.5 1.5S7.83 13 7 13zm5 0c-.83 0-1.5-.67-1.5-1.5S11.17 10 12 10s1.5.67 1.5 1.5S12.83 13 12 13zm5 0c-.83 0-1.5-.67-1.5-1.5S16.17 10 17 10s1.5.67 1.5 1.5S17.83 13 17 13z",
+  // 自動 Picture-in-Picture(#909)のトップバー開閉ボタン用。Material Icons picture_in_picture_alt 由来。
+  picture_in_picture: "M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z",
+  // レスポンシブ拡張PiP(#926)の「ルームに戻る」ボタン用。Material Icons open_in_full 由来。
+  open_in_full: "M3 3h7v2H5v5H3V3zm18 0v7h-2V5h-5V3h7zM3 21v-7h2v5h5v2H3zm18 0h-7v-2h5v-5h2v7z",
+  // ホワイトボード「ギャラリーへ保存」ボタン用(#962)。フロッピーディスク(保存の定番アイコン)。
+  // Material Icons save 由来。
+  save: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z",
+  // チャットメッセージのピン留め(#1052)。Material Icons push_pin 由来。
+  push_pin: "M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"
+};
+var CUSTOM_VIEWBOX = {
+  sticker: "0 -960 960 960"
+};
+var EXTRA_PATHS = {
+  sticker: "M460-360q69 0 120-45t60-113l-320 90q26 32 62 50t78 18ZM294-510l106-30q4-28-14-49t-46-21q-25 0-42.5 17.5T280-550q0 11 4 21t10 19Zm240-70 106-30q5-28-13.5-49T580-680q-25 0-42.5 17.5T520-620q0 11 4 21t10 19Zm106 460H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v440L640-120Zm-40-80v-80q0-33 23.5-56.5T680-360h80v-400H200v560h400Zm0 0Zm-400 0v-560 560Z"
+};
+var ALL_PATHS = { ...PATHS, ...EXTRA_PATHS };
+function Icon({ name, size = 20, className }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      viewBox: CUSTOM_VIEWBOX[name] ?? "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className,
+      children: /* @__PURE__ */ jsx2("path", { d: ALL_PATHS[name] })
+    }
+  );
+}
+
+// badge.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CountChip({ children, animated = false, className = "" }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: `inline-flex items-center justify-center min-w-[20px] h-[20px] px-1.5 rounded-pill bg-success-surface-strong text-success text-xs font-extrabold tracking-normal${animated ? " animate-[pop-in_0.3s_var(--ease-spring)]" : ""} ${className}`.trim(),
+      children
+    }
+  );
+}
+var TONE = {
+  live: "text-success bg-success-surface",
+  warn: "text-warning bg-warning-surface",
+  danger: "text-accent bg-tint-12",
+  info: "text-info bg-info-surface",
+  neutral: "text-text-dim bg-surface-3",
+  pro: "text-on-fill bg-fill"
+};
+var DOT = {
+  live: "bg-success",
+  warn: "bg-warning",
+  danger: "bg-accent",
+  info: "bg-info",
+  neutral: "bg-text-faint",
+  pro: "bg-on-fill"
+};
+var PILL_TONES = ["live", "warn", "danger", "info"];
+function Badge({
+  children,
+  tone,
+  dot = false,
+  icon,
+  shape,
+  className = "",
+  variant
+}) {
+  const resolvedTone = tone ?? "neutral";
+  const legacyTone = variant ? "live" : resolvedTone;
+  const showDot = dot || variant === "live";
+  const legacyNew = variant === "new";
+  const isPill = shape ? shape === "pill" : PILL_TONES.includes(legacyTone);
+  const shapeClass = isPill ? "rounded-pill" : "rounded-chip";
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: `inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1 font-mono text-xs font-semibold ${TONE[legacyTone]} ${shapeClass}${legacyNew ? " uppercase tracking-tag" : ""} ${className}`.trim(),
+      children: [
+        showDot && /* @__PURE__ */ jsx3("span", { className: `h-1.5 w-1.5 rounded-pill ${DOT[legacyTone]}`, "aria-hidden": "true" }),
+        icon != null && (typeof icon === "string" ? /* @__PURE__ */ jsx3(Icon, { name: icon, size: 13 }) : icon),
+        children
+      ]
+    }
+  );
+}
+
+// bottom-sheet.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MID_RATIO = 0.68;
+var FULL_RATIO = 0.94;
+var CLOSE_RATIO = 0.32;
+function BottomSheet({
+  open,
+  onClose,
+  children,
+  ariaLabel,
+  closeLabel,
+  closeOnEsc = true
+}) {
+  const [mode, setMode] = useState("mid");
+  const sheetRef = useRef(null);
+  useEffect(() => {
+    if (open) setMode("mid");
+  }, [open]);
+  useEffect(() => {
+    if (!open || !closeOnEsc) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, closeOnEsc]);
+  function onHandlePointerDown(e) {
+    const sheet = sheetRef.current;
+    if (!sheet) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const handle = e.currentTarget;
+    handle.setPointerCapture(e.pointerId);
+    const startHeight = sheet.getBoundingClientRect().height;
+    const vh = window.innerHeight;
+    const drag = { pointerId: e.pointerId, startY: e.clientY, startHeight, vh };
+    sheet.style.transition = "none";
+    const onMove = (ev) => {
+      if (ev.pointerId !== drag.pointerId) return;
+      const delta = drag.startY - ev.clientY;
+      const next = Math.min(
+        drag.vh * FULL_RATIO,
+        Math.max(drag.vh * 0.18, drag.startHeight + delta)
+      );
+      sheet.style.height = `${next}px`;
+    };
+    const onUp = (ev) => {
+      if (ev.pointerId !== drag.pointerId) return;
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onUp);
+      handle.removeEventListener("pointercancel", onUp);
+      sheet.style.transition = "";
+      const finalHeight = sheet.getBoundingClientRect().height;
+      sheet.style.height = "";
+      if (finalHeight < drag.vh * CLOSE_RATIO) {
+        onClose();
+        return;
+      }
+      const midPx = drag.vh * MID_RATIO;
+      const fullPx = drag.vh * FULL_RATIO;
+      setMode(Math.abs(finalHeight - fullPx) < Math.abs(finalHeight - midPx) ? "full" : "mid");
+    };
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onUp);
+    handle.addEventListener("pointercancel", onUp);
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "bottom-sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: sheetRef,
+      className: `bottom-sheet bottom-sheet--${mode}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "bottom-sheet-handle-area",
+            onPointerDown: onHandlePointerDown,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx4("span", { className: "bottom-sheet-handle" })
+          }
+        ),
+        closeLabel && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "bottom-sheet-close",
+            "aria-label": closeLabel,
+            title: closeLabel,
+            onClick: onClose,
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "bottom-sheet-body", children })
+      ]
+    }
+  ) });
+}
+
+// breakpoints.ts
+var MOBILE_LAYOUT_MQ = "(hover: none), (pointer: coarse), (max-width: 560px)";
+
+// spinner.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Spinner({ size = 16, thickness, label, className = "" }) {
+  const border = thickness ?? Math.max(2, Math.round(size / 8));
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: `inline-block shrink-0 rounded-pill border-solid border-border-strong animate-spin ${className}`.trim(),
+      style: {
+        width: size,
+        height: size,
+        borderWidth: border,
+        borderTopColor: "var(--color-mint)"
+      }
+    }
+  );
+}
+
+// button.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var BASE = "inline-flex items-center justify-center gap-2 border-2 border-solid border-transparent box-border font-display cursor-pointer select-none transition-[transform,filter,background,color,box-shadow] duration-(--dur-fast) ease-spring enabled:active:scale-[0.97] disabled:bg-surface-3 disabled:text-text-dim disabled:border-transparent disabled:cursor-not-allowed disabled:shadow-none focus-visible:shadow-focus focus-visible:outline-none";
+var VARIANT = {
+  primary: "bg-fill text-on-fill font-bold enabled:hover:brightness-[.93]",
+  accent: "bg-accent text-on-accent font-bold enabled:hover:brightness-[.93]",
+  secondary: "bg-transparent border-text text-text font-bold enabled:hover:bg-surface-hover",
+  ghost: "bg-transparent text-info font-semibold enabled:hover:bg-surface-hover",
+  danger: "bg-danger-surface border-danger-border text-danger font-bold enabled:hover:brightness-[.93]",
+  live: "bg-success text-white font-bold enabled:hover:brightness-[.93]",
+  // 後方互換: join は live と同一。
+  join: "bg-success text-white font-bold enabled:hover:brightness-[.93]"
+};
+var SIZE = {
+  xs: "text-xs px-3 py-1.5",
+  sm: "text-sm px-4 py-2",
+  md: "text-md px-[22px] py-3",
+  lg: "text-md px-7 py-3.5"
+};
+var GHOST_PAD = "px-3.5";
+var SPINNER_SIZE = { xs: 12, sm: 13, md: 15, lg: 16 };
+var ICON_SIZE = { xs: 13, sm: 14, md: 17, lg: 18 };
+function renderIcon(icon, px) {
+  if (icon == null) return null;
+  if (typeof icon === "string") return /* @__PURE__ */ jsx6(Icon, { name: icon, size: px });
+  return icon;
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  pill = false,
+  dot = false,
+  icon,
+  iconRight,
+  type = "button",
+  children,
+  className = "",
+  ...rest
+}) {
+  const pad = variant === "ghost" ? `${SIZE[size]} ${GHOST_PAD}` : SIZE[size];
+  const isLive = variant === "live" || variant === "join";
+  const radius = pill || isLive ? "rounded-pill" : "rounded-md";
+  const showDot = (dot || isLive) && !loading;
+  const iconPx = ICON_SIZE[size];
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: `${BASE} ${radius} ${VARIANT[variant]} ${pad} ${className}`.trim(),
+      ...rest,
+      children: [
+        showDot && /* @__PURE__ */ jsx6("span", { className: "h-2 w-2 rounded-pill bg-white", "aria-hidden": "true" }),
+        loading && /* @__PURE__ */ jsx6(Spinner, { size: SPINNER_SIZE[size] }),
+        !loading && renderIcon(icon, iconPx),
+        children,
+        !loading && renderIcon(iconRight, iconPx)
+      ]
+    }
+  );
+}
+
+// checkbox.tsx
+import { useId } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Checkbox({ checked, label, id, className = "", ...rest }) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  return /* @__PURE__ */ jsxs5(
+    "label",
+    {
+      htmlFor: inputId,
+      className: `inline-flex cursor-pointer select-none items-center gap-3 ${className}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx7("input", { id: inputId, type: "checkbox", checked, className: "peer sr-only", ...rest }),
+        /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: `grid h-[22px] w-[22px] place-items-center rounded-chip border-2 border-solid transition-colors peer-focus-visible:shadow-focus ${checked ? "border-fill bg-fill text-on-fill" : "border-border-strong bg-transparent text-transparent"}`,
+            children: /* @__PURE__ */ jsx7(Icon, { name: "check", size: 15 })
+          }
+        ),
+        label != null && /* @__PURE__ */ jsx7("span", { className: "text-md text-text", children: label })
+      ]
+    }
+  );
+}
+
+// chip.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var BASE2 = "inline-flex items-center gap-1.5 rounded-pill border border-solid text-[12.5px] cursor-pointer select-none transition-colors duration-(--dur-fast)";
+var PAD_DEFAULT = "px-3.5 py-[7px]";
+var PAD_REMOVABLE = "pl-[14px] pr-2.5 py-1.5";
+var PAD_AVATAR = "pl-[5px] pr-[13px] py-[5px]";
+var DEFAULT = "bg-surface-2 border-border-strong text-text font-semibold enabled:hover:bg-surface-hover";
+var SELECTED = "bg-tint-22 border-[color-mix(in_srgb,var(--color-accent)_55%,transparent)] text-accent font-bold";
+function Chip({
+  selected = false,
+  icon,
+  avatar,
+  removable = false,
+  onRemove,
+  children,
+  type = "button",
+  className = "",
+  ...rest
+}) {
+  const pad = removable ? PAD_REMOVABLE : avatar ? PAD_AVATAR : PAD_DEFAULT;
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type,
+      "aria-pressed": selected,
+      className: `${BASE2} ${pad} ${selected ? SELECTED : DEFAULT} ${className}`.trim(),
+      ...rest,
+      children: [
+        avatar && /* @__PURE__ */ jsx8(
+          "span",
+          {
+            className: "inline-flex h-[22px] w-[22px] items-center justify-center rounded-pill bg-success text-xs font-bold text-white",
+            style: avatar.color ? { background: avatar.color } : void 0,
+            "aria-hidden": "true",
+            children: avatar.label
+          }
+        ),
+        selected ? /* @__PURE__ */ jsx8(Icon, { name: "check", size: 16 }) : icon,
+        children,
+        removable && /* @__PURE__ */ jsx8(
+          "span",
+          {
+            role: "button",
+            tabIndex: -1,
+            "aria-label": "remove",
+            className: "inline-flex text-text-dim",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove?.();
+            },
+            children: /* @__PURE__ */ jsx8(Icon, { name: "close", size: 15 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// composer.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var AUTO_GROW_RETRY_MS = 200;
+var AUTO_GROW_RETRY_LIMIT = 25;
+function Composer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  maxLength,
+  disabled = false,
+  sendLabel,
+  actions,
+  flash = false,
+  textareaRef,
+  size = "default",
+  className = ""
+}) {
+  const ownRef = useRef2(null);
+  const ref = textareaRef ?? ownRef;
+  const autoGrowRetryTimerRef = useRef2(null);
+  const autoGrowRetryCountRef = useRef2(0);
+  function clearAutoGrowRetry() {
+    if (autoGrowRetryTimerRef.current !== null) {
+      clearTimeout(autoGrowRetryTimerRef.current);
+      autoGrowRetryTimerRef.current = null;
+    }
+  }
+  function autoGrow() {
+    clearAutoGrowRetry();
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+    const maxHeight = Number.parseFloat(getComputedStyle(el).maxHeight);
+    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
+      el.style.overflowY = "hidden";
+      if (autoGrowRetryCountRef.current < AUTO_GROW_RETRY_LIMIT) {
+        autoGrowRetryCountRef.current += 1;
+        autoGrowRetryTimerRef.current = setTimeout(autoGrow, AUTO_GROW_RETRY_MS);
+      }
+      return;
+    }
+    autoGrowRetryCountRef.current = 0;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+  }
+  useEffect2(() => {
+    autoGrow();
+    return () => clearAutoGrowRetry();
+  }, [value]);
+  function trySubmit() {
+    const text = value.trim();
+    if (!text) return;
+    onSubmit(text);
+  }
+  function handleFormSubmit(e) {
+    e.preventDefault();
+    trySubmit();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      trySubmit();
+    }
+  }
+  const canSubmit = !disabled && value.trim().length > 0;
+  const textareaPad = size === "compact" ? "px-3.5 pt-2 pb-0.5" : "px-4.5 pt-2.5 pb-1";
+  const actionsPad = size === "compact" ? "px-2 py-1.5" : "px-2 py-2.5";
+  const iconSize = size === "compact" ? 14 : 16;
+  const btnSize = size === "compact" ? "h-6.5 w-6.5" : "h-7.5 w-7.5";
+  return /* @__PURE__ */ jsxs7(
+    "form",
+    {
+      onSubmit: handleFormSubmit,
+      className: `flex flex-col rounded-card border-[1.5px] border-solid bg-surface transition-[border-color,box-shadow] duration-(--dur-fast) ${flash ? "border-mint shadow-focus" : "border-border"} ${className}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx9(
+          "textarea",
+          {
+            ref,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            maxLength,
+            disabled,
+            rows: 1,
+            autoComplete: "off",
+            className: `max-h-[120px] resize-none border-none bg-transparent font-body text-md leading-snug text-text outline-none placeholder:text-text-faint ${textareaPad}`
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: `flex items-center justify-between gap-2 ${actionsPad}`, children: [
+          /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-0.5", children: actions }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "submit",
+              "aria-label": sendLabel,
+              title: sendLabel,
+              disabled: !canSubmit,
+              className: `inline-flex shrink-0 cursor-pointer items-center justify-center rounded-pill border-none bg-transparent p-0 transition-colors duration-(--dur-fast) ${btnSize} ${canSubmit ? "text-mint-soft" : "text-text-dim"} enabled:hover:bg-tint-5 enabled:hover:text-mint-soft disabled:cursor-not-allowed disabled:opacity-35`,
+              children: /* @__PURE__ */ jsx9(Icon, { name: "send", size: iconSize })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// modal.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Modal({
+  onClose,
+  children,
+  width,
+  className = "",
+  ariaLabel,
+  closeLabel,
+  as = "div",
+  onSubmit,
+  closeOnEsc = true,
+  title,
+  footer
+}) {
+  const backdropRef = useRef3(null);
+  useEffect3(() => {
+    if (!closeOnEsc) return void 0;
+    const win = backdropRef.current?.ownerDocument?.defaultView ?? window;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    win.addEventListener("keydown", onKey);
+    return () => win.removeEventListener("keydown", onKey);
+  }, [onClose, closeOnEsc]);
+  const Box = as;
+  const ds = title != null || footer != null;
+  return /* @__PURE__ */ jsx10("div", { className: "modal-backdrop", ref: backdropRef, onClick: onClose, children: ds ? (
+    // DS 構造（トークンのユーティリティ）。
+    /* @__PURE__ */ jsxs8(
+      Box,
+      {
+        className: `relative flex w-full flex-col overflow-hidden rounded-card border border-solid border-border bg-surface shadow-overlay animate-[card-in_0.4s_var(--ease-spring)_both] ${className}`.trim(),
+        style: width ? { width } : { width: "min(420px, 92vw)" },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        onClick: (e) => e.stopPropagation(),
+        onSubmit,
+        children: [
+          title != null && /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3 border-b border-solid border-border px-[18px] py-4", children: [
+            /* @__PURE__ */ jsx10("span", { className: "text-lg font-extrabold text-text", children: title }),
+            closeLabel && /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                "aria-label": closeLabel,
+                title: closeLabel,
+                onClick: onClose,
+                className: "inline-flex h-[30px] w-[30px] items-center justify-center rounded-chip border-none bg-transparent text-text-dim cursor-pointer enabled:hover:bg-surface-hover enabled:hover:text-text",
+                children: /* @__PURE__ */ jsx10(Icon, { name: "close", size: 19 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: "p-[18px]", children }),
+          footer != null && /* @__PURE__ */ jsx10("div", { className: "flex justify-end gap-2.5 border-t border-solid border-border bg-surface-2 px-[18px] py-3.5", children: footer })
+        ]
+      }
+    )
+  ) : (
+    // 既定（legacy 共有プリミティブ）。従来経路と完全同一。
+    /* @__PURE__ */ jsxs8(
+      Box,
+      {
+        className: `modal ${className}`.trim(),
+        style: width ? { width } : void 0,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        onClick: (e) => e.stopPropagation(),
+        onSubmit,
+        children: [
+          closeLabel && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              className: "modal-close",
+              "aria-label": closeLabel,
+              title: closeLabel,
+              onClick: onClose,
+              children: "\xD7"
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ) });
+}
+
+// confirm-modal.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var TONE_CIRCLE = {
+  danger: "text-danger bg-danger-surface",
+  warn: "text-warning bg-warning-surface",
+  info: "text-info bg-info-surface"
+};
+function ConfirmModal({
+  onClose,
+  onConfirm,
+  title,
+  children,
+  confirmLabel,
+  cancelLabel,
+  confirmVariant = "primary",
+  tone,
+  icon = "warning",
+  loading = false,
+  ariaLabel,
+  className = ""
+}) {
+  const resolvedTone = tone ?? (confirmVariant === "danger" ? "danger" : "info");
+  return /* @__PURE__ */ jsxs9(Modal, { onClose, ariaLabel: ariaLabel ?? title, className, children: [
+    /* @__PURE__ */ jsx11(
+      "span",
+      {
+        className: `mx-auto inline-flex h-[46px] w-[46px] items-center justify-center rounded-pill ${TONE_CIRCLE[resolvedTone]}`,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx11(Icon, { name: icon, size: 24 })
+      }
+    ),
+    /* @__PURE__ */ jsx11("h2", { children: title }),
+    /* @__PURE__ */ jsx11("p", { className: "break-words text-center text-base leading-[1.55] text-text-dim", children }),
+    /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex gap-2.5", children: [
+      /* @__PURE__ */ jsx11(Button, { variant: "ghost", className: "flex-1", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx11(Button, { variant: confirmVariant, className: "flex-1", loading, onClick: onConfirm, children: confirmLabel })
+    ] })
+  ] });
+}
+
+// empty-note.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var VARIANT2 = {
+  default: "px-4 py-5 text-center",
+  compact: "flex min-h-32 items-center justify-center px-1 py-3.5 text-center",
+  dropdown: "flex min-h-28 items-center justify-center px-4 py-[18px] text-center"
+};
+function EmptyNote({ children, variant = "default" }) {
+  return /* @__PURE__ */ jsx12("p", { className: `${VARIANT2[variant]} text-base leading-[1.7] text-text-faint`, children });
+}
+
+// icon-button.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var VARIANT3 = {
+  surface: "bg-surface-2 border border-solid border-border text-text-dim enabled:hover:bg-surface-hover enabled:hover:text-text",
+  accent: "bg-accent border border-solid border-transparent text-on-accent enabled:hover:brightness-[.93]",
+  ghost: "bg-transparent border border-solid border-transparent text-text-dim enabled:hover:bg-surface-hover"
+};
+function IconButton({
+  label,
+  icon,
+  variant = "surface",
+  size = 36,
+  type = "button",
+  className = "",
+  disabled,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type,
+      "aria-label": label,
+      disabled,
+      style: { width: size, height: size },
+      className: `inline-flex shrink-0 items-center justify-center rounded-md cursor-pointer transition-colors duration-(--dur-fast) disabled:cursor-not-allowed disabled:opacity-(--disabled-opacity) focus-visible:shadow-focus focus-visible:outline-none ${VARIANT3[variant]} ${className}`.trim(),
+      ...rest,
+      children: icon
+    }
+  );
+}
+
+// icons/google-icon.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function GoogleIcon() {
+  return /* @__PURE__ */ jsxs10("svg", { className: "google-icon", viewBox: "0 0 18 18", width: "18", height: "18", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx14(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33Z"
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.42 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"
+      }
+    )
+  ] });
+}
+
+// icons/person-icon.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function PersonIcon() {
+  return /* @__PURE__ */ jsxs11("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "none", children: [
+    /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "1.8" }),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: "M4 20c0-3.3 3.6-6 8-6s8 2.7 8 6",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+
+// input.tsx
+import { useId as useId2, useState as useState2 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var LABEL = "font-mono text-xs font-semibold tracking-widest uppercase transition-colors";
+var FIELD = "flex items-center w-full bg-surface-2 border-[1.5px] border-solid rounded-md px-3.5 py-3 transition-[border-color,box-shadow] duration-(--dur-fast)";
+var CONTROL = "flex-1 min-w-0 border-none outline-none bg-transparent text-md text-text placeholder:text-text-faint";
+function Input({
+  label,
+  error,
+  prefix,
+  id,
+  onFocus,
+  onBlur,
+  className = "",
+  ...rest
+}) {
+  const autoId = useId2();
+  const inputId = id ?? autoId;
+  const invalid = error != null && error !== false;
+  const [focused, setFocused] = useState2(false);
+  const labelColor = invalid ? "text-accent" : focused ? "text-info" : "text-text-dim";
+  const fieldState = invalid ? "border-accent" : focused ? "border-info shadow-focus" : "border-border";
+  return /* @__PURE__ */ jsxs12("div", { className: `flex flex-col gap-[7px] ${className}`.trim(), children: [
+    label != null && /* @__PURE__ */ jsx16("label", { htmlFor: inputId, className: `${LABEL} ${labelColor}`, children: label }),
+    /* @__PURE__ */ jsxs12("div", { className: `${FIELD} ${fieldState}`, children: [
+      prefix != null && /* @__PURE__ */ jsx16("span", { className: "mr-0.5 shrink-0 font-mono text-md text-text-dim", children: prefix }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          id: inputId,
+          "aria-invalid": invalid || void 0,
+          className: CONTROL,
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus?.(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            onBlur?.(e);
+          },
+          ...rest
+        }
+      )
+    ] }),
+    invalid && /* @__PURE__ */ jsx16("span", { className: "text-xs text-accent", children: error })
+  ] });
+}
+
+// link.tsx
+import {
+  cloneElement,
+  isValidElement
+} from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var VARIANT4 = {
+  inline: "text-link font-semibold no-underline cursor-pointer transition-colors duration-(--dur-fast) hover:text-link-hover",
+  subtle: "text-link text-sm font-semibold no-underline cursor-pointer transition-colors duration-(--dur-fast) hover:text-link-hover",
+  pill: "inline-flex items-center gap-1.5 self-start px-4 py-2.5 rounded-pill border border-solid border-border bg-surface text-text text-sm font-bold tracking-pill uppercase no-underline cursor-pointer transition-[background,color,transform] duration-(--dur-base) ease-spring hover:bg-surface-hover hover:text-accent hover:-translate-y-px",
+  wrapper: "text-inherit no-underline cursor-pointer"
+};
+function linkClass(variant = "inline", className = "") {
+  return `${VARIANT4[variant]} ${className}`.trim();
+}
+function Link({
+  variant = "inline",
+  asChild = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const cls = linkClass(variant, className);
+  if (asChild && isValidElement(children)) {
+    const child = children;
+    return cloneElement(child, {
+      ...rest,
+      className: `${cls} ${child.props.className ?? ""}`.trim()
+    });
+  }
+  return /* @__PURE__ */ jsx17("a", { className: cls, ...rest, children });
+}
+
+// logo-mark.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var DOT_CORAL = "#FF5A36";
+var DOT_AMBER = "#F5A524";
+var DOT_BLUE = "#3B6FE0";
+function Mark({ size }) {
+  return /* @__PURE__ */ jsxs13(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: size,
+      height: size,
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "text-text",
+      children: [
+        /* @__PURE__ */ jsx18("circle", { cx: "24", cy: "24", r: "13", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
+        /* @__PURE__ */ jsx18("circle", { cx: "24", cy: "11", r: "6.5", fill: DOT_CORAL }),
+        /* @__PURE__ */ jsx18("circle", { cx: "35.3", cy: "30.5", r: "6.5", fill: DOT_AMBER }),
+        /* @__PURE__ */ jsx18("circle", { cx: "12.7", cy: "30.5", r: "6.5", fill: DOT_BLUE })
+      ]
+    }
+  );
+}
+function LogoMark({
+  variant = "row",
+  size = 20,
+  showWordmark = false,
+  wordmarkSize,
+  className = ""
+}) {
+  if (variant === "cluster") {
+    return /* @__PURE__ */ jsx18("span", { className: `inline-flex ${className}`.trim(), children: /* @__PURE__ */ jsx18(Mark, { size }) });
+  }
+  const wordmarkPx = wordmarkSize ?? Math.round(size * 0.85);
+  return /* @__PURE__ */ jsxs13("span", { className: `inline-flex items-center gap-2 ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx18(Mark, { size }),
+    showWordmark && /* @__PURE__ */ jsx18(
+      "span",
+      {
+        className: "font-display font-extrabold uppercase tracking-tight text-text",
+        style: { fontSize: wordmarkPx },
+        children: "LOOPHUB"
+      }
+    )
+  ] });
+}
+
+// lozenge.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var TONE2 = {
+  success: "text-success bg-success-surface-strong",
+  warning: "text-warning bg-warning-surface-strong",
+  accent: "text-accent bg-tint-22",
+  info: "text-info bg-info-surface-strong",
+  // neutral は tint(accent 色相)ではなく中立の面を使う。tint を濃くすると accent tone と
+  // 見分けが付かなくなるため、面は surface-3・文字は text-text で濃度を確保する(#765)。
+  neutral: "text-text bg-surface-3"
+};
+var DOT2 = {
+  success: "bg-success",
+  warning: "bg-warning",
+  accent: "bg-accent",
+  info: "bg-info",
+  neutral: "bg-text-faint"
+};
+function Lozenge({
+  tone = "neutral",
+  dot = false,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs14(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 font-mono text-xs font-semibold uppercase tracking-pill ${TONE2[tone]} ${className}`.trim(),
+      children: [
+        dot && /* @__PURE__ */ jsx19("span", { className: `h-1.5 w-1.5 rounded-pill ${DOT2[tone]}`, "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+}
+
+// menu.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function Menu({ children, ariaLabel, className = "" }) {
+  return /* @__PURE__ */ jsx20(
+    "ul",
+    {
+      role: "menu",
+      "aria-label": ariaLabel,
+      className: `m-0 flex list-none flex-col gap-0.5 p-0 ${className}`.trim(),
+      children
+    }
+  );
+}
+var ROW = "flex w-full items-center gap-[13px] rounded-md border-none bg-transparent px-[13px] py-[11px] text-left text-[15px] shadow-none transition-colors duration-(--dur-fast) cursor-pointer disabled:opacity-(--disabled-opacity) disabled:cursor-not-allowed";
+function MenuItem({
+  onSelect,
+  children,
+  icon,
+  trailing,
+  active = false,
+  danger = false,
+  disabled = false,
+  role = "menuitem"
+}) {
+  const tone = danger ? "text-danger enabled:hover:bg-danger-surface" : active ? "text-success bg-[color-mix(in_srgb,var(--color-success)_10%,transparent)]" : "text-text enabled:hover:bg-surface-hover";
+  return /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsxs15(
+    "button",
+    {
+      type: "button",
+      role,
+      "aria-checked": role === "menuitem" ? void 0 : active,
+      disabled,
+      className: `${ROW} ${tone}`,
+      onClick: onSelect,
+      children: [
+        icon && /* @__PURE__ */ jsx20("span", { className: "shrink-0", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx20("span", { className: "min-w-0 flex-1 truncate", children }),
+        trailing && /* @__PURE__ */ jsx20("span", { className: "shrink-0", children: trailing })
+      ]
+    }
+  ) });
+}
+
+// popover.tsx
+import {
+  useId as useId3,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+import { createPortal } from "react-dom";
+
+// use-dismiss.ts
+import { useEffect as useEffect4 } from "react";
+function useDismiss(open, ref, onDismiss, options = {}) {
+  const { closeOnEsc = true, closeOnOutside = true, ignore } = options;
+  useEffect4(() => {
+    if (!open) return void 0;
+    const refs = Array.isArray(ref) ? ref : [ref];
+    const win = refs.map((r) => r.current?.ownerDocument?.defaultView).find(Boolean) ?? window;
+    const onDown = (e) => {
+      if (!closeOnOutside) return;
+      const target = e.target;
+      if (ignore?.(target)) return;
+      if (refs.some((r) => r.current?.contains(target))) return;
+      onDismiss();
+    };
+    const onKey = (e) => {
+      if (closeOnEsc && e.key === "Escape") onDismiss();
+    };
+    win.addEventListener("mousedown", onDown);
+    win.addEventListener("keydown", onKey);
+    return () => {
+      win.removeEventListener("mousedown", onDown);
+      win.removeEventListener("keydown", onKey);
+    };
+  }, [open, ref, onDismiss, closeOnEsc, closeOnOutside, ignore]);
+}
+
+// popover.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var PLACEMENT = {
+  "bottom-start": "top-[calc(100%+8px)] left-0",
+  "bottom-end": "top-[calc(100%+8px)] right-0",
+  "top-start": "bottom-[calc(100%+8px)] left-0",
+  "top-end": "bottom-[calc(100%+8px)] right-0"
+};
+var PANEL_BASE = "min-w-[220px] max-w-[calc(100vw-24px)] bg-surface border border-solid border-border-strong rounded-card animate-[card-in_var(--dur-base)_var(--ease-spring)_both]";
+var PORTAL_OFFSET_PX = 8;
+var PORTAL_GUTTER_PX = 12;
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+function getScrollClipAncestor(el) {
+  let node = el?.parentElement ?? null;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    if (style.position === "fixed") return null;
+    if (style.overflowY !== "visible" || style.overflowX !== "visible") return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+function Popover({
+  open,
+  onClose,
+  trigger,
+  children,
+  placement = "bottom-start",
+  ariaLabel,
+  role = "menu",
+  panelClassName = "",
+  panelShadow = "shadow-popover",
+  panelPadding = true,
+  panelScroll = true,
+  mobileSheet = false,
+  portal = false,
+  closeOnEsc = true,
+  closeOnOutside = true
+}) {
+  const ref = useRef4(null);
+  const panelRef = useRef4(null);
+  const panelId = useId3();
+  const effectivePortal = portal && !mobileSheet;
+  const dismissRefs = useMemo(() => effectivePortal ? [ref, panelRef] : ref, [effectivePortal]);
+  useDismiss(open, dismissRefs, onClose, { closeOnEsc, closeOnOutside });
+  const [sheetTop, setSheetTop] = useState3(0);
+  useLayoutEffect(() => {
+    if (!open || !mobileSheet) return void 0;
+    const measure = () => {
+      const el = ref.current;
+      if (el) setSheetTop(el.getBoundingClientRect().bottom + 8);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [open, mobileSheet]);
+  const [portalPos, setPortalPos] = useState3(null);
+  const [triggerClipped, setTriggerClipped] = useState3(false);
+  useLayoutEffect(() => {
+    if (!open || !effectivePortal) {
+      setPortalPos(null);
+      setTriggerClipped(false);
+      return void 0;
+    }
+    const clipAncestor = getScrollClipAncestor(ref.current);
+    const compute = () => {
+      const triggerEl = ref.current;
+      const panelEl2 = panelRef.current;
+      if (!triggerEl || !panelEl2) return;
+      const triggerRect = triggerEl.getBoundingClientRect();
+      const panelWidth = panelEl2.offsetWidth;
+      const panelHeight = panelEl2.offsetHeight;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const clipRect = clipAncestor ? clipAncestor.getBoundingClientRect() : { top: 0, left: 0, right: vw, bottom: vh };
+      const clipped = triggerRect.bottom <= clipRect.top || triggerRect.top >= clipRect.bottom || triggerRect.right <= clipRect.left || triggerRect.left >= clipRect.right;
+      setTriggerClipped((prev) => prev === clipped ? prev : clipped);
+      let top = placement.startsWith("bottom") ? triggerRect.bottom + PORTAL_OFFSET_PX : triggerRect.top - PORTAL_OFFSET_PX - panelHeight;
+      let left = placement.endsWith("end") ? triggerRect.right - panelWidth : triggerRect.left;
+      const maxLeft = Math.max(PORTAL_GUTTER_PX, vw - panelWidth - PORTAL_GUTTER_PX);
+      const maxTop = Math.max(PORTAL_GUTTER_PX, vh - panelHeight - PORTAL_GUTTER_PX);
+      left = Math.min(Math.max(left, PORTAL_GUTTER_PX), maxLeft);
+      top = Math.min(Math.max(top, PORTAL_GUTTER_PX), maxTop);
+      setPortalPos((p) => p && p.top === top && p.left === left ? p : { top, left });
+    };
+    compute();
+    let raf = 0;
+    const schedule = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        compute();
+      });
+    };
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, true);
+    const panelEl = panelRef.current;
+    let ro;
+    if (panelEl) {
+      ro = new ResizeObserver(compute);
+      ro.observe(panelEl);
+    }
+    return () => {
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule, true);
+      ro?.disconnect();
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [open, effectivePortal, placement]);
+  const previousFocusRef = useRef4(null);
+  const focusMovedRef = useRef4(false);
+  useLayoutEffect(() => {
+    if (!open || !effectivePortal) return void 0;
+    previousFocusRef.current = document.activeElement;
+    focusMovedRef.current = false;
+    return () => {
+      const prev = previousFocusRef.current;
+      if (focusMovedRef.current && document.activeElement === document.body && prev?.isConnected) {
+        prev.focus({ preventScroll: true });
+      }
+      previousFocusRef.current = null;
+    };
+  }, [open, effectivePortal]);
+  useLayoutEffect(() => {
+    if (!open || !effectivePortal || !portalPos || triggerClipped || focusMovedRef.current)
+      return void 0;
+    const panelEl = panelRef.current;
+    if (!panelEl) return void 0;
+    const focusable = panelEl.querySelector(FOCUSABLE_SELECTOR);
+    (focusable ?? panelEl).focus({ preventScroll: true });
+    focusMovedRef.current = panelEl.contains(document.activeElement);
+    return void 0;
+  }, [open, effectivePortal, portalPos, triggerClipped]);
+  const handlePanelKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const panelEl = panelRef.current;
+    if (!panelEl) return;
+    const focusables = panelEl.querySelectorAll(FOCUSABLE_SELECTOR);
+    if (focusables.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey) {
+      if (active === first || !panelEl.contains(active)) {
+        e.preventDefault();
+        last.focus({ preventScroll: true });
+      }
+    } else if (active === last || !panelEl.contains(active)) {
+      e.preventDefault();
+      first.focus({ preventScroll: true });
+    }
+  };
+  const smAnchor = PLACEMENT[placement].split(" ").map((c) => `sm:${c}`).join(" ");
+  const positioning = mobileSheet ? `fixed top-(--popover-sheet-top) left-3 right-3 w-auto sm:absolute sm:left-auto ${smAnchor}` : effectivePortal ? "fixed" : `absolute ${PLACEMENT[placement]}`;
+  const zIndexClass = effectivePortal ? "z-[var(--z-popover-portal,35)]" : "z-(--z-dropdown)";
+  const panelStyle = mobileSheet ? { "--popover-sheet-top": `${sheetTop}px` } : effectivePortal ? portalPos ? triggerClipped ? {
+    top: portalPos.top,
+    left: portalPos.left,
+    visibility: "hidden",
+    pointerEvents: "none"
+  } : { top: portalPos.top, left: portalPos.left } : { top: -9999, left: -9999, visibility: "hidden", pointerEvents: "none" } : void 0;
+  const panel = open && /* @__PURE__ */ jsx21(
+    "div",
+    {
+      ref: panelRef,
+      id: effectivePortal ? panelId : void 0,
+      tabIndex: effectivePortal ? -1 : void 0,
+      role,
+      "aria-label": ariaLabel,
+      onKeyDown: effectivePortal ? handlePanelKeyDown : void 0,
+      className: `${PANEL_BASE} ${zIndexClass} ${panelScroll ? "max-h-80 overflow-y-auto" : ""} ${panelPadding ? "p-3" : ""} ${positioning} ${panelShadow} ${panelClassName}`.trim(),
+      style: panelStyle,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: "relative inline-flex",
+      ref,
+      "aria-owns": effectivePortal && open ? panelId : void 0,
+      children: [
+        trigger,
+        effectivePortal ? panel ? createPortal(panel, document.body) : null : panel
+      ]
+    }
+  );
+}
+
+// profile-modal.tsx
+import { createContext, useContext } from "react";
+var noopOpenProfile = () => {
+};
+var ProfileModalContext = createContext(noopOpenProfile);
+function useOpenProfile() {
+  return useContext(ProfileModalContext);
+}
+
+// radio.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+function Radio({ checked, label, id, className = "", ...rest }) {
+  const autoId = useId4();
+  const inputId = id ?? autoId;
+  return /* @__PURE__ */ jsxs17(
+    "label",
+    {
+      htmlFor: inputId,
+      className: `inline-flex cursor-pointer select-none items-center gap-3 ${className}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx22("input", { id: inputId, type: "radio", checked, className: "peer sr-only", ...rest }),
+        /* @__PURE__ */ jsx22(
+          "span",
+          {
+            className: `grid h-[22px] w-[22px] place-items-center rounded-pill border-2 border-solid transition-colors peer-focus-visible:shadow-focus ${checked ? "border-text" : "border-border-strong"}`,
+            children: /* @__PURE__ */ jsx22(
+              "span",
+              {
+                className: `h-2.5 w-2.5 rounded-pill bg-accent transition-transform duration-(--dur-fast) ${checked ? "scale-100" : "scale-0"}`
+              }
+            )
+          }
+        ),
+        label != null && /* @__PURE__ */ jsx22("span", { className: "text-md text-text", children: label })
+      ]
+    }
+  );
+}
+
+// ring-timer.tsx
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+function RingTimer({
+  secondsLeft,
+  totalSeconds,
+  size = 118,
+  urgentThreshold = 10,
+  caption,
+  className = ""
+}) {
+  const urgent = secondsLeft <= urgentThreshold;
+  const pct = totalSeconds > 0 ? Math.min(100, Math.max(0, secondsLeft / totalSeconds * 100)) : 0;
+  const ringColor = urgent ? "var(--color-accent)" : "var(--color-mint)";
+  const maskStyle = {
+    background: `conic-gradient(${ringColor} ${pct}%, var(--color-border) 0)`,
+    WebkitMask: "radial-gradient(closest-side, transparent 72%, #000 73%)",
+    mask: "radial-gradient(closest-side, transparent 72%, #000 73%)"
+  };
+  const wrapperClass = [
+    "relative inline-flex shrink-0 items-center justify-center rounded-pill",
+    urgent ? "animate-[ring-timer-urgent-pulse_1s_ease-in-out_infinite]" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs18("div", { className: wrapperClass, style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 rounded-pill", style: maskStyle, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs18("div", { className: "relative flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx23(
+        "span",
+        {
+          className: `font-bold leading-none tabular-nums ${urgent ? "text-accent" : "text-text"}`,
+          style: { fontSize: Math.round(size * 0.28) },
+          children: Math.max(0, Math.round(secondsLeft))
+        }
+      ),
+      caption && /* @__PURE__ */ jsx23("span", { className: "mt-1 text-2xs text-text-dim", children: caption })
+    ] })
+  ] });
+}
+
+// search-field.tsx
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var FIELD2 = "flex items-center gap-2 bg-surface-2 border-[1.5px] border-solid border-border rounded-md px-3.5 py-2.5 transition-[border-color,box-shadow] duration-(--dur-fast) focus-within:border-info focus-within:shadow-focus";
+var CONTROL2 = "flex-1 min-w-0 border-none outline-none bg-transparent text-md text-text placeholder:text-text-faint";
+function SearchField({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs19("div", { className: `${FIELD2} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx24(Icon, { name: "search", size: 16, className: "shrink-0 text-text-faint" }),
+    /* @__PURE__ */ jsx24("input", { className: CONTROL2, ...rest })
+  ] });
+}
+
+// split-modal.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { Fragment, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var NARROW_MAX_WIDTH = 768;
+function useNarrowViewport(maxWidth) {
+  const [narrow, setNarrow] = useState4(false);
+  useEffect5(() => {
+    if (typeof window === "undefined") return void 0;
+    const sync = () => setNarrow(window.innerWidth <= maxWidth);
+    sync();
+    const mq = window.matchMedia?.(`(max-width: ${maxWidth}px)`);
+    mq?.addEventListener("change", sync);
+    window.addEventListener("resize", sync);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
+    ro?.observe(document.documentElement);
+    return () => {
+      mq?.removeEventListener("change", sync);
+      window.removeEventListener("resize", sync);
+      ro?.disconnect();
+    };
+  }, [maxWidth]);
+  return narrow;
+}
+function SplitModal({
+  items,
+  value,
+  onSelect,
+  children,
+  onClose,
+  navLabel,
+  navTitle,
+  navFooter,
+  title,
+  description,
+  footer,
+  ariaLabel,
+  closeLabel,
+  backLabel,
+  asSheet = false,
+  width = "min(760px, 94vw)",
+  navWidth = 214,
+  className = "",
+  narrow
+}) {
+  const autoNarrow = useNarrowViewport(NARROW_MAX_WIDTH);
+  const isNarrow = narrow ?? autoNarrow;
+  const [drilled, setDrilled] = useState4(false);
+  useEffect5(() => {
+    if (!isNarrow) setDrilled(false);
+  }, [isNarrow]);
+  const current = items.find((it) => it.id === value);
+  const closeButton = closeLabel ? /* @__PURE__ */ jsx25(
+    "button",
+    {
+      type: "button",
+      "aria-label": closeLabel,
+      title: closeLabel,
+      onClick: onClose,
+      className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-chip border-none bg-transparent p-0 text-text-dim cursor-pointer [&>svg]:shrink-0 enabled:hover:bg-surface-hover enabled:hover:text-text",
+      children: /* @__PURE__ */ jsx25(Icon, { name: "close", size: 19 })
+    }
+  ) : null;
+  const paneHead = title || closeButton ? /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-start justify-between gap-3", children: [
+    title ? /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx25("h4", { className: "m-0 text-lg font-extrabold text-text", children: title }),
+      description && // max-w-[52ch] は意図的な据え置き(#950)。可読な行長(1行あたり文字数)を確保する
+      // ための「文字数」基準の制約で、px/rem のスケールトークンに載せる性質の値ではない
+      // (52ch は一般的な可読上限の目安。テキストコンテンツ量に応じた相対値なので
+      // トークン化しても再利用の意味が薄い)。
+      /* @__PURE__ */ jsx25("p", { className: "mt-1.5 mb-0 max-w-[52ch] text-[13px] leading-relaxed text-text-dim", children: description })
+    ] }) : /* @__PURE__ */ jsx25("span", {}),
+    closeButton
+  ] }) : null;
+  const list = /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 min-h-0 flex-col", children: [
+    (navTitle || closeButton) && /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center gap-2.5 border-b border-solid border-border bg-bg-elevated px-3.5 py-3", children: [
+      /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 text-sm font-extrabold text-text", children: navTitle }),
+      closeButton
+    ] }),
+    /* @__PURE__ */ jsx25("nav", { className: "flex flex-1 min-h-0 flex-col overflow-y-auto", "aria-label": navLabel, children: items.map((it) => /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full cursor-pointer items-center gap-3 border-none border-b border-solid border-border bg-transparent px-4 py-3.5 text-left text-base font-semibold text-text",
+        onClick: () => {
+          onSelect(it.id);
+          setDrilled(true);
+        },
+        children: [
+          it.icon && /* @__PURE__ */ jsx25("span", { className: "shrink-0 text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx25(Icon, { name: it.icon, size: 20 }) }),
+          /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1", children: it.label }),
+          /* @__PURE__ */ jsx25("span", { className: "shrink-0 text-lg text-text-faint", "aria-hidden": "true", children: "\u203A" })
+        ]
+      },
+      it.id
+    )) })
+  ] });
+  const detail = /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center gap-2 border-b border-solid border-border bg-bg-elevated px-3.5 py-3", children: [
+      /* @__PURE__ */ jsx25(
+        "button",
+        {
+          type: "button",
+          "aria-label": backLabel,
+          title: backLabel,
+          onClick: () => setDrilled(false),
+          className: "-ml-1.5 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-chip border-none bg-transparent p-0 text-text-dim [&>svg]:shrink-0 enabled:hover:bg-surface-hover enabled:hover:text-text",
+          children: /* @__PURE__ */ jsx25(Icon, { name: "chevron_left", size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 text-sm font-extrabold text-text", children: current?.label }),
+      closeButton
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 min-w-0 min-h-0 flex-col gap-[18px] overflow-y-auto px-4 pt-4 pb-1", children: [
+      description && /* @__PURE__ */ jsx25("p", { className: "m-0 text-[13px] leading-relaxed text-text-dim", children: description }),
+      children
+    ] }),
+    footer && /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 justify-end gap-2.5 border-t border-solid border-border bg-bg-elevated px-4 py-3", children: footer })
+  ] });
+  const wide = /* @__PURE__ */ jsxs20(Fragment, { children: [
+    /* @__PURE__ */ jsxs20(
+      "aside",
+      {
+        className: "flex shrink-0 flex-col gap-5 self-stretch border-r border-solid border-border bg-bg-elevated px-4 py-[22px]",
+        style: { width: navWidth },
+        children: [
+          navTitle && /* @__PURE__ */ jsx25("h3", { className: "m-0 px-1 text-[15px] font-extrabold text-text", children: navTitle }),
+          /* @__PURE__ */ jsx25("nav", { className: "flex flex-col gap-1", "aria-label": navLabel, children: items.map((it) => {
+            const active = it.id === value;
+            return /* @__PURE__ */ jsxs20(
+              "button",
+              {
+                type: "button",
+                "aria-selected": active,
+                className: `flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-solid px-3 py-2.5 text-left text-[13.5px] transition-colors ${active ? "border-border bg-surface-3 font-bold text-text" : "border-transparent bg-transparent font-semibold text-text-dim hover:bg-surface-hover hover:text-text"}`,
+                onClick: () => onSelect(it.id),
+                children: [
+                  it.icon && /* @__PURE__ */ jsx25(
+                    "span",
+                    {
+                      className: `shrink-0 ${active ? "text-accent" : "text-text-faint"}`,
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx25(Icon, { name: it.icon, size: 17 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1", children: it.label })
+                ]
+              },
+              it.id
+            );
+          }) }),
+          navFooter && /* @__PURE__ */ jsx25("div", { className: "mt-auto px-1 text-xs leading-relaxed text-text-faint", children: navFooter })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 min-w-0 min-h-0 flex-col gap-[18px] overflow-y-auto px-[26px] py-6", children: [
+        paneHead,
+        children
+      ] }),
+      footer && /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 justify-end gap-2.5 border-t border-solid border-border bg-bg-elevated px-[26px] py-3.5", children: footer })
+    ] })
+  ] });
+  const innerClass = isNarrow ? "flex flex-col flex-1 min-h-0" : asSheet ? "flex flex-1 min-h-0" : "flex flex-[1_1_auto] min-h-0 max-h-[min(520px,72dvh)] h-[min(520px,72dvh)]";
+  const inner = /* @__PURE__ */ jsx25("div", { className: innerClass, children: isNarrow ? drilled ? detail : list : wide });
+  if (asSheet) {
+    return /* @__PURE__ */ jsx25(BottomSheet, { open: true, onClose, ariaLabel, closeLabel, children: /* @__PURE__ */ jsx25("div", { className: "flex flex-1 min-h-0 flex-col", children: inner }) });
+  }
+  return /* @__PURE__ */ jsx25(
+    Modal,
+    {
+      onClose,
+      width,
+      className: `gap-0 overflow-hidden p-0 text-left max-h-[calc(100dvh-40px)] ${className}`.trim(),
+      ariaLabel,
+      children: inner
+    }
+  );
+}
+
+// status.tsx
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+var DOT_TONE = {
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  neutral: "bg-text-faint"
+};
+function StatusDot({
+  tone = "neutral",
+  size = 8,
+  pulse = false,
+  label,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      style: { width: size, height: size },
+      className: `inline-block shrink-0 rounded-pill ${DOT_TONE[tone]}${pulse ? " animate-pulse" : ""} ${className}`.trim()
+    }
+  );
+}
+var BADGE_TONE = {
+  success: "bg-success-surface text-success border-success-border",
+  warning: "bg-warning-surface text-warning border-warning-border",
+  danger: "bg-danger-surface text-danger border-danger-border",
+  info: "bg-info-surface text-info border-info-border",
+  neutral: "bg-tint-8 text-text-dim border-border"
+};
+function StatusBadge({
+  tone = "neutral",
+  children,
+  dot = false,
+  pulse = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "span",
+    {
+      className: `inline-flex shrink-0 items-center gap-1.5 rounded-pill border border-solid px-2 py-0.5 text-2xs font-extrabold uppercase tracking-tag ${BADGE_TONE[tone]} ${className}`.trim(),
+      children: [
+        dot && /* @__PURE__ */ jsx26(StatusDot, { tone, size: 6, pulse }),
+        children
+      ]
+    }
+  );
+}
+
+// step-flow.tsx
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+var PILL_TONE = {
+  done: "bg-success-surface text-success border-success-border",
+  current: "bg-accent text-on-accent border-transparent",
+  todo: "bg-surface text-text-dim border-transparent"
+};
+function stepTone(index, currentIndex) {
+  if (index < currentIndex) return "done";
+  if (index === currentIndex) return "current";
+  return "todo";
+}
+function StepFlow({
+  steps,
+  currentIndex,
+  direction = "row",
+  className = ""
+}) {
+  const isRow = direction === "row";
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: `flex ${isRow ? "flex-row flex-wrap items-center gap-1.5" : "flex-col items-stretch gap-1.5"} ${className}`.trim(),
+      children: steps.map((step, index) => {
+        const tone = stepTone(index, currentIndex);
+        const showSeparator = isRow && index < steps.length - 1;
+        return /* @__PURE__ */ jsxs22("div", { className: isRow ? "inline-flex items-center gap-1.5" : "contents", children: [
+          /* @__PURE__ */ jsx27(
+            "span",
+            {
+              className: `inline-flex items-center justify-center border border-solid px-2.5 py-1 text-smd font-bold ${isRow ? "rounded-pill" : "rounded-md"} ${PILL_TONE[tone]}`,
+              children: step.label
+            }
+          ),
+          showSeparator && /* @__PURE__ */ jsx27("span", { className: "text-xs text-text-dim", "aria-hidden": "true", children: "\u25B8" })
+        ] }, step.key);
+      })
+    }
+  );
+}
+
+// stepper.tsx
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var BTN = "w-[30px] h-[30px] pointer-coarse:w-10 pointer-coarse:h-10 p-0 inline-flex items-center justify-center text-lg leading-none rounded-full bg-tint-7 border border-solid border-border text-text-dim transition-[background,box-shadow] enabled:hover:bg-tint-13 enabled:hover:shadow-glow disabled:opacity-(--disabled-opacity) disabled:cursor-not-allowed";
+function Stepper({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  disabled = false,
+  decLabel = "-",
+  incLabel = "+"
+}) {
+  return /* @__PURE__ */ jsxs23("div", { className: "inline-flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx28(
+      "button",
+      {
+        type: "button",
+        className: BTN,
+        "aria-label": decLabel,
+        disabled: disabled || value <= min,
+        onClick: () => onChange(Math.max(min, value - step)),
+        children: "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsx28("span", { className: "min-w-[34px] text-center text-lg font-bold tabular-nums text-text", children: value }),
+    /* @__PURE__ */ jsx28(
+      "button",
+      {
+        type: "button",
+        className: BTN,
+        "aria-label": incLabel,
+        disabled: disabled || value >= max,
+        onClick: () => onChange(Math.min(max, value + step)),
+        children: "\uFF0B"
+      }
+    )
+  ] });
+}
+
+// tabs.tsx
+import { jsxs as jsxs24 } from "react/jsx-runtime";
+var TAB_BASE = "relative inline-flex items-center justify-center gap-1.5 border-none bg-transparent py-3 font-display text-smd font-bold tracking-widest text-text-faint shadow-none transition-colors duration-(--dur-base) cursor-pointer hover:text-text-dim hover:bg-transparent hover:shadow-none active:scale-100 active:bg-transparent after:absolute after:inset-x-[12%] after:-bottom-px after:h-0.5 after:origin-center after:scale-x-0 after:rounded-xs after:bg-accent after:transition-transform after:duration-(--dur-base) after:ease-spring after:content-['']";
+var TAB_WIDTH = {
+  default: "flex-none px-3.5",
+  fill: "flex-1 px-1.5"
+};
+var TAB_ACTIVE = "text-text after:scale-x-100";
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  ariaLabel,
+  trailing,
+  className = "",
+  variant = "default"
+}) {
+  const tabClass = `${TAB_BASE} ${TAB_WIDTH[variant]}`;
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: `flex border-t-0 border-x-0 border-b border-solid border-border ${className}`.trim(),
+      children: [
+        tabs.map((tab) => {
+          const active = tab.key === value;
+          return /* @__PURE__ */ jsxs24(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              className: `${tabClass}${active ? ` ${TAB_ACTIVE}` : ""}`,
+              onClick: () => onChange(tab.key),
+              children: [
+                tab.label,
+                tab.badge
+              ]
+            },
+            tab.key
+          );
+        }),
+        trailing
+      ]
+    }
+  );
+}
+
+// toast.tsx
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+var SNACKBAR_TONE = {
+  success: { border: "border-border-strong", icon: "text-success" },
+  error: { border: "border-snackbar-danger-border", icon: "text-snackbar-danger" },
+  info: { border: "border-border-strong", icon: "text-success" },
+  warn: { border: "border-border-strong", icon: "text-warning" },
+  danger: { border: "border-snackbar-danger-border", icon: "text-snackbar-danger" }
+};
+var DS_TONE = {
+  info: { border: "border-l-info", text: "text-info" },
+  success: { border: "border-l-success", text: "text-success" },
+  warn: { border: "border-l-warning", text: "text-warning" },
+  danger: { border: "border-l-danger", text: "text-danger" },
+  error: { border: "border-l-danger", text: "text-danger" }
+};
+var FIXED = "fixed bottom-[26px] left-1/2 z-(--z-snackbar) pointer-events-none animate-[snackbar-in_var(--dur-slow)_var(--ease-spring)_both]";
+function Toast({
+  children,
+  tone = "success",
+  variant = "default",
+  icon,
+  title,
+  message,
+  action,
+  onAction,
+  onClose,
+  fixed = true,
+  role = "status",
+  className = ""
+}) {
+  if (variant === "snackbar") {
+    const t2 = SNACKBAR_TONE[tone];
+    return /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        role,
+        className: `inline-flex items-center gap-[9px] rounded-pill border border-solid bg-snackbar-surface px-5 py-[11px] text-[14px] text-text shadow-overlay ${t2.border}${fixed ? ` ${FIXED}` : ""} ${className}`.trim(),
+        children: [
+          icon && /* @__PURE__ */ jsx29("span", { className: `${t2.icon} text-[13px] font-extrabold`, "aria-hidden": "true", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+  const t = DS_TONE[tone];
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      role,
+      className: `inline-flex min-w-[280px] max-w-[420px] items-start gap-3 rounded-md border border-solid border-border border-l-[3px] bg-surface px-[15px] py-[13px] text-text shadow-popover ${t.border}${fixed ? ` ${FIXED}` : ""} ${className}`.trim(),
+      children: [
+        icon && /* @__PURE__ */ jsx29("span", { className: `mt-px shrink-0 ${t.text}`, "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs25("div", { className: "flex min-w-0 flex-1 flex-col gap-[3px]", children: [
+          title != null && /* @__PURE__ */ jsx29("span", { className: "text-[13.5px] font-bold text-text", children: title }),
+          message != null && /* @__PURE__ */ jsx29("span", { className: "text-[12.5px] leading-[1.5] text-text-dim", children: message }),
+          children
+        ] }),
+        action != null && /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            onClick: onAction,
+            className: `shrink-0 whitespace-nowrap border-none bg-transparent text-[12.5px] font-bold ${t.text} cursor-pointer`,
+            children: action
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "close",
+            className: "shrink-0 inline-flex border-none bg-transparent p-0 text-text-dim cursor-pointer",
+            children: /* @__PURE__ */ jsx29(Icon, { name: "close", size: 17 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// toggle.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function Toggle({
+  checked = false,
+  onChange,
+  label,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx30(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      onClick: onChange,
+      className: `relative inline-flex h-[26px] w-[46px] shrink-0 items-center rounded-pill border border-solid border-transparent p-0 transition-colors duration-(--dur-fast) cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus-visible:shadow-focus focus-visible:outline-none ${checked ? "bg-success" : "bg-border-strong"}`,
+      children: /* @__PURE__ */ jsx30(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: `absolute top-[3px] h-5 w-5 rounded-pill bg-white shadow-[0_1px_2px_rgba(0,0,0,0.25)] transition-[left] duration-(--dur-fast) ${checked ? "left-[23px]" : "left-[3px]"}`
+        }
+      )
+    }
+  );
+}
+export {
+  Avatar,
+  AvatarStack,
+  Badge,
+  BottomSheet,
+  Button,
+  Checkbox,
+  Chip,
+  Composer,
+  ConfirmModal,
+  CountChip,
+  EmptyNote,
+  GoogleIcon,
+  Icon,
+  IconButton,
+  Input,
+  Link,
+  LogoMark,
+  Lozenge,
+  MOBILE_LAYOUT_MQ,
+  Menu,
+  MenuItem,
+  Modal,
+  PersonIcon,
+  Popover,
+  ProfileModalContext,
+  Radio,
+  RingTimer,
+  SearchField,
+  Spinner,
+  SplitModal,
+  StatusBadge,
+  StatusDot,
+  StepFlow,
+  Stepper,
+  Tabs,
+  Toast,
+  Toggle,
+  linkClass,
+  useDismiss,
+  useOpenProfile
+};
+//# sourceMappingURL=index.js.map