@godxjp/ui 0.2.0 → 2.1.0

package/dist/components/shell.js

@@ -0,0 +1,768 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ChevronDown, PanelLeftOpen, PanelLeftClose, Search, SlidersHorizontal, X, Check, Clock } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import i18next from 'i18next';
+import 'i18next-browser-languagedetector';
+import * as Popover from '@radix-ui/react-popover';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import { Command } from 'cmdk';
+
+function AppShell({ sidebar, topbar, children, sidebarCollapsed = false }) {
+  return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed, children: [
+    /* @__PURE__ */ jsx("aside", { className: "app-sidebar", children: sidebar }),
+    /* @__PURE__ */ jsx("header", { className: "app-topbar", children: topbar }),
+    /* @__PURE__ */ jsx("main", { className: "app-main", children })
+  ] });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Sidebar({
+  activeId,
+  onSelect,
+  sections,
+  product,
+  onProductClick,
+  collapsed = false,
+  footer
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sb-product",
+        onClick: onProductClick,
+        "aria-label": product.name,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sb-logo-mark",
+              style: { background: product.color },
+              children: product.name[0]?.toUpperCase() ?? "?"
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "sb-product-meta col flex-1 min-w-0",
+              style: { display: "flex" },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sb-product-name", children: product.name }),
+                /* @__PURE__ */ jsx("span", { className: "sb-product-tenant", children: product.role })
+              ]
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsx("span", { className: "sb-product-tenant shrink-0", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: sections.map((section, i) => /* @__PURE__ */ jsxs("div", { className: "sb-section", children: [
+      section.label && !collapsed && /* @__PURE__ */ jsx("div", { className: "sb-section-label", children: section.label }),
+      /* @__PURE__ */ jsx("div", { className: "sb-nav", role: "navigation", children: section.items.map((item) => {
+        const Icon = item.icon;
+        const isActive = item.id === activeId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn("sb-nav-item"),
+            "data-active": isActive,
+            "aria-current": isActive ? "page" : void 0,
+            "aria-disabled": item.disabled,
+            onClick: () => !item.disabled && onSelect(item.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { size: 16 }) }),
+              /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+              item.badge !== void 0 && item.badge !== "" && /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge })
+            ]
+          },
+          item.id
+        );
+      }) })
+    ] }, section.label ?? i)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footer })
+  ] });
+}
+function Topbar({
+  product,
+  project,
+  onProductOpen,
+  onProjectOpen,
+  onSearchOpen,
+  onTweaksOpen,
+  collapsed = false,
+  onToggleCollapsed,
+  rightSlot
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleCollapsed && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tb-icon-btn",
+        "aria-label": t("shell.sidebarCollapse"),
+        "aria-pressed": collapsed,
+        onClick: onToggleCollapsed,
+        children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { size: 16 }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "tb-switcher", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "tb-chip",
+          "aria-label": product.name,
+          onClick: onProductOpen,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "tb-chip-icon",
+                style: { background: product.color },
+                children: product.name[0]?.toUpperCase() ?? "?"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: product.name }),
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "tb-chip-sep", children: "/" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn("tb-chip", !project && "empty"),
+          "aria-label": project ? project.name : t("shell.pickProject"),
+          onClick: onProjectOpen,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: project ? project.name : t("shell.pickProject") }),
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "tb-search ml-auto",
+        onClick: onSearchOpen,
+        children: [
+          /* @__PURE__ */ jsx(Search, { size: 14 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            t("common.search"),
+            "\u2026"
+          ] }),
+          /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2318K" })
+        ]
+      }
+    ),
+    rightSlot,
+    onTweaksOpen && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tb-icon-btn",
+        "aria-label": t("tweaks.title"),
+        onClick: onTweaksOpen,
+        children: /* @__PURE__ */ jsx(SlidersHorizontal, { size: 16 })
+      }
+    )
+  ] });
+}
+
+// src/data/products.ts
+var PRODUCTS = [
+  {
+    id: "restaurant",
+    name: "godx-restaurant",
+    tenant: "restaurant",
+    role: "\u30EC\u30B9\u30C8\u30E9\u30F3\u7BA1\u7406",
+    desc: "\u5E97\u8217\u5411\u3051\u7D71\u5408\u7BA1\u7406\u30D7\u30E9\u30C3\u30C8\u30D5\u30A9\u30FC\u30E0",
+    color: "oklch(58% 0.18 25)",
+    owner: "Satoshi F",
+    devs: 6,
+    projects: [
+      { id: "api", name: "restaurant-api", stack: "NestJS \xB7 PostgreSQL", kind: "service", devs: 3, status: "active", branch: "main", lastCommit: "12\u5206\u524D", openIssues: 8, prs: 2, sandbox: true },
+      { id: "admin", name: "restaurant-admin", stack: "Next.js 14 \xB7 React", kind: "web", devs: 2, status: "active", branch: "main", lastCommit: "1\u6642\u9593\u524D", openIssues: 5, prs: 1, sandbox: true },
+      { id: "pos", name: "restaurant-pos", stack: "Tauri \xB7 Vue 3", kind: "desktop", devs: 1, status: "active", branch: "feature/print", lastCommit: "30\u5206\u524D", openIssues: 3, prs: 1, sandbox: true },
+      { id: "kds", name: "restaurant-kds", stack: "React \xB7 Electron", kind: "workstation", devs: 1, status: "review", branch: "main", lastCommit: "\u6628\u65E5", openIssues: 2, prs: 1, sandbox: true },
+      { id: "kintai", name: "restaurant-kintai", stack: "Vue 3 \xB7 Laravel", kind: "service", devs: 2, status: "active", branch: "main", lastCommit: "5\u5206\u524D", openIssues: 4, prs: 0, sandbox: true },
+      { id: "mobile", name: "restaurant-mobile", stack: "React Native", kind: "mobile", devs: 1, status: "planning", branch: "develop", lastCommit: "3\u65E5\u524D", openIssues: 1, prs: 0, sandbox: false }
+    ]
+  },
+  {
+    id: "godx",
+    name: "godx-admin",
+    tenant: "godx",
+    role: "Platform admin",
+    desc: "GoDX Forge developer workspace",
+    color: "oklch(60% 0.137 163)",
+    owner: "Satoshi F",
+    devs: 4,
+    projects: [
+      { id: "frontend", name: "godx-admin-frontend", stack: "React \xB7 Vite", kind: "web", devs: 2, status: "active", branch: "master", lastCommit: "2\u6642\u9593\u524D", openIssues: 6, prs: 2, sandbox: true },
+      { id: "api", name: "godx-admin-api", stack: "Go \xB7 Gin", kind: "service", devs: 1, status: "active", branch: "master", lastCommit: "4\u6642\u9593\u524D", openIssues: 3, prs: 1, sandbox: true },
+      { id: "ui", name: "@godxjp/ui", stack: "TypeScript \xB7 React", kind: "library", devs: 2, status: "active", branch: "master", lastCommit: "1\u6642\u9593\u524D", openIssues: 2, prs: 0, sandbox: false }
+    ]
+  },
+  {
+    id: "kintai",
+    name: "dxs-kintai",
+    tenant: "kintai",
+    role: "HR / Attendance",
+    desc: "\u52E4\u6020\u7BA1\u7406\u30D7\u30E9\u30C3\u30C8\u30D5\u30A9\u30FC\u30E0",
+    color: "oklch(56% 0.15 240)",
+    owner: "Naoki N",
+    devs: 3,
+    projects: [
+      { id: "frontend", name: "kintai-web", stack: "Vue 3 \xB7 Vite", kind: "web", devs: 2, status: "active", branch: "main", lastCommit: "20\u5206\u524D", openIssues: 7, prs: 1, sandbox: true },
+      { id: "backend", name: "kintai-api", stack: "Laravel 11", kind: "service", devs: 1, status: "active", branch: "main", lastCommit: "1\u65E5\u524D", openIssues: 4, prs: 0, sandbox: true }
+    ]
+  },
+  {
+    id: "tempo",
+    name: "dxs-tempo",
+    tenant: "tempo",
+    role: "Shop / Inventory",
+    desc: "\u5E97\u8217\u30FB\u5728\u5EAB\u30D0\u30C3\u30AF\u30A8\u30F3\u30C9",
+    color: "oklch(48% 0.16 285)",
+    owner: "Naoki N",
+    devs: 2,
+    projects: [
+      { id: "api", name: "tempo-api", stack: "Go \xB7 Echo", kind: "service", devs: 2, status: "active", branch: "main", lastCommit: "5\u6642\u9593\u524D", openIssues: 9, prs: 1, sandbox: true },
+      { id: "ops", name: "tempo-ops", stack: "Terraform", kind: "infra", devs: 1, status: "planning", branch: "main", lastCommit: "1\u9031\u9593\u524D", openIssues: 1, prs: 0, sandbox: false }
+    ]
+  },
+  {
+    id: "betoya",
+    name: "betoya",
+    tenant: "betoya",
+    role: "Vietnamese restaurant",
+    desc: "\u30D9\u30C8\u5C4B Tenant",
+    color: "oklch(58% 0.159 150)",
+    owner: "Anh K",
+    devs: 1,
+    projects: [
+      { id: "site", name: "betoya-site", stack: "Astro", kind: "web", devs: 1, status: "active", branch: "main", lastCommit: "\u6628\u65E5", openIssues: 2, prs: 0, sandbox: false }
+    ]
+  }
+];
+var SUPPORTED_LOCALES = ["ja", "en", "vi"];
+var FORGE_LOCALE_STORAGE_KEY = "forge.locale";
+var i18n_default = i18next;
+
+// src/hooks/useTweaks.ts
+var STORAGE_KEY = "forge.tweaks";
+var DEFAULTS = {
+  density: "default",
+  theme: "light",
+  tenant: "godx",
+  locale: "ja",
+  sidebarCollapsed: false
+};
+function loadInitial() {
+  if (typeof window === "undefined") return DEFAULTS;
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    const stored = raw ? JSON.parse(raw) : {};
+    const detected = i18n_default.language?.slice(0, 2) || "ja";
+    return {
+      ...DEFAULTS,
+      ...stored,
+      locale: stored.locale ?? detected
+    };
+  } catch {
+    return DEFAULTS;
+  }
+}
+function useTweaks() {
+  const [tweaks, setTweaks] = useState(loadInitial);
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(tweaks));
+    } catch {
+    }
+  }, [tweaks]);
+  useEffect(() => {
+    const html = document.documentElement;
+    html.dataset.theme = tweaks.theme;
+    html.dataset.density = tweaks.density;
+    html.dataset.tenant = tweaks.tenant;
+    html.lang = tweaks.locale;
+  }, [tweaks.theme, tweaks.density, tweaks.tenant, tweaks.locale]);
+  useEffect(() => {
+    if (i18n_default.language?.slice(0, 2) !== tweaks.locale) {
+      void i18n_default.changeLanguage(tweaks.locale);
+      try {
+        window.localStorage.setItem(FORGE_LOCALE_STORAGE_KEY, tweaks.locale);
+      } catch {
+      }
+    }
+  }, [tweaks.locale]);
+  const setTweak = useCallback((key, value) => {
+    setTweaks((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  return { tweaks, setTweak, setTweaks };
+}
+PRODUCTS.map((p) => ({ value: p.tenant, label: p.name }));
+function TweaksPanel({ open, onOpenChange }) {
+  const { t } = useTranslation();
+  const { tweaks, setTweak } = useTweaks();
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { className: "fixed right-0 top-0 z-50 h-full w-80 bg-popover text-popover-foreground border-l border-border shadow-2xl data-[state=open]:animate-in data-[state=open]:slide-in-from-right", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 h-12", children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { className: "font-medium text-sm", children: t("tweaks.title") }),
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "tb-icon-btn", "aria-label": "Close", children: /* @__PURE__ */ jsx(X, { size: 14 }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto h-[calc(100%-3rem)] p-4 flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxs(Section, { label: t("tweaks.display"), children: [
+          /* @__PURE__ */ jsx(
+            Radio,
+            {
+              label: t("tweaks.density"),
+              value: tweaks.density,
+              onChange: (v) => setTweak("density", v),
+              options: [
+                { value: "compact", label: t("tweaks.densityCompact") },
+                { value: "default", label: t("tweaks.densityDefault") },
+                { value: "comfortable", label: t("tweaks.densityComfortable") }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Radio,
+            {
+              label: t("tweaks.theme"),
+              value: tweaks.theme,
+              onChange: (v) => setTweak("theme", v),
+              options: [
+                { value: "light", label: t("tweaks.themeLight") },
+                { value: "dark", label: t("tweaks.themeDark") }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              label: t("shell.sidebarCollapse"),
+              value: tweaks.sidebarCollapsed,
+              onChange: (v) => setTweak("sidebarCollapsed", v)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Section, { label: t("tweaks.product"), children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: t("tweaks.product"),
+            value: tweaks.tenant,
+            onChange: (v) => setTweak("tenant", v),
+            options: PRODUCTS.map((p) => ({ value: p.tenant, label: p.name }))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Section, { label: t("tweaks.locale"), children: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            label: t("tweaks.language"),
+            value: tweaks.locale,
+            onChange: (v) => setTweak("locale", v),
+            options: SUPPORTED_LOCALES.map((code) => ({
+              value: code,
+              label: { ja: "\u65E5\u672C\u8A9E", en: "English", vi: "Ti\u1EBFng Vi\u1EC7t" }[code]
+            }))
+          }
+        ) })
+      ] })
+    ] })
+  ] }) });
+}
+function Section({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function Radio({
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-flow-col rounded-md border border-border overflow-hidden", children: options.map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-active": opt.value === value,
+        onClick: () => onChange(opt.value),
+        className: "px-2 py-1 text-xs hover:bg-accent/40 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+}
+function Toggle({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": value,
+        onClick: () => onChange(!value),
+        className: "relative inline-flex h-5 w-9 items-center rounded-full bg-input data-[on=true]:bg-primary transition-colors",
+        "data-on": value,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform translate-x-0.5 data-[on=true]:translate-x-4",
+            "data-on": value
+          }
+        )
+      }
+    )
+  ] });
+}
+function Select({
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: "input",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    )
+  ] });
+}
+function ProductSwitcher({
+  trigger,
+  activeId,
+  products = PRODUCTS,
+  onSelect,
+  open,
+  onOpenChange
+}) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const filtered = q ? products.filter(
+    (p) => p.name.toLowerCase().includes(q) || p.role.toLowerCase().includes(q)
+  ) : products;
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "sw-pop",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "sw-pop-search", children: [
+            /* @__PURE__ */ jsx(Search, { size: 14, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: t("shell.searchProducts"),
+                className: "flex-1 bg-transparent outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "esc" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sw-pop-list", children: [
+            /* @__PURE__ */ jsx("div", { className: "sw-pop-section", children: /* @__PURE__ */ jsxs("span", { children: [
+              t("nav.products"),
+              " \xB7 ",
+              filtered.length
+            ] }) }),
+            filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "sw-pop-empty", children: "\u2014" }) : filtered.map((p) => {
+              const isActive = p.id === activeId;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: cn("sw-pop-item w-full text-left"),
+                  "data-active": isActive,
+                  onClick: () => {
+                    onSelect(p);
+                    setQuery("");
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "sb-logo-mark",
+                        style: { background: p.color },
+                        children: p.name[0]?.toUpperCase() ?? "?"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: p.name }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate", children: p.role })
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "sw-pop-item-meta", children: [
+                      p.projects.length,
+                      " \xB7 ",
+                      p.devs
+                    ] }),
+                    isActive && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-primary" })
+                  ]
+                },
+                p.id
+              );
+            })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function ProjectSwitcher({
+  trigger,
+  activeProductId,
+  activeProjectId,
+  recent = [],
+  products = PRODUCTS,
+  onSelect,
+  open,
+  onOpenChange
+}) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const productById = new Map(products.map((p) => [p.id, p]));
+  const recentResolved = recent.map((r) => {
+    const product = productById.get(r.productId);
+    const project = product?.projects.find((p) => p.id === r.projectId);
+    return product && project ? { product, project } : null;
+  }).filter((x) => !!x).slice(0, 3);
+  const q = query.trim().toLowerCase();
+  const filteredProducts = products.map((product) => ({
+    product,
+    projects: q ? product.projects.filter(
+      (p) => p.name.toLowerCase().includes(q) || p.stack.toLowerCase().includes(q)
+    ) : product.projects
+  })).filter((group) => group.projects.length > 0);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "sw-pop",
+        style: { width: 420 },
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "sw-pop-search", children: [
+            /* @__PURE__ */ jsx(Search, { size: 14, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: t("shell.searchProjects"),
+                className: "flex-1 bg-transparent outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "esc" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sw-pop-list", children: [
+            !q && recentResolved.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "sw-pop-section", children: /* @__PURE__ */ jsx("span", { children: t("shell.recent") }) }),
+              recentResolved.map(({ product, project }) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "sw-pop-item w-full text-left",
+                  onClick: () => onSelect(project, product),
+                  children: [
+                    /* @__PURE__ */ jsx(Clock, { size: 12, className: "text-muted-foreground" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate font-mono text-xs", children: project.name }),
+                    /* @__PURE__ */ jsx("span", { className: "sw-pop-item-meta truncate", children: product.name })
+                  ]
+                },
+                `${product.id}:${project.id}`
+              ))
+            ] }),
+            filteredProducts.length === 0 && /* @__PURE__ */ jsx("div", { className: "sw-pop-empty", children: "\u2014" }),
+            filteredProducts.map(({ product, projects }) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "sw-pop-section", children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "sb-logo-mark",
+                      style: { background: product.color, width: 12, height: 12, fontSize: 8 },
+                      children: product.name[0]?.toUpperCase() ?? "?"
+                    }
+                  ),
+                  product.name
+                ] }),
+                /* @__PURE__ */ jsx("span", { children: projects.length })
+              ] }),
+              projects.map((project) => {
+                const isActive = product.id === activeProductId && project.id === activeProjectId;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn("sw-pop-item w-full text-left"),
+                    "data-active": isActive,
+                    onClick: () => onSelect(project, product),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs truncate flex-1 min-w-0", children: project.name }),
+                      /* @__PURE__ */ jsx("span", { className: "sw-kind-chip", children: project.kind }),
+                      /* @__PURE__ */ jsxs("span", { className: "sw-pop-item-meta", children: [
+                        project.stack,
+                        " \xB7 ",
+                        project.devs,
+                        "d \xB7 ",
+                        project.openIssues,
+                        "\u2197 \xB7",
+                        " ",
+                        project.prs,
+                        "pr"
+                      ] }),
+                      isActive && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-primary" })
+                    ]
+                  },
+                  project.id
+                );
+              })
+            ] }, product.id))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sw-pop-foot", children: [
+            /* @__PURE__ */ jsx("span", { children: t("shell.browseAllProducts") }),
+            /* @__PURE__ */ jsxs("span", { className: "ml-auto", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2191\u2193" }),
+              " ",
+              /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u23CE" })
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function CommandPalette({ open, onOpenChange, commands }) {
+  const { t } = useTranslation();
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const handler = (e) => {
+      const isModifier = e.metaKey || e.ctrlKey;
+      if (isModifier && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        onOpenChange(!open);
+      } else if (e.key === "Escape" && open) {
+        onOpenChange(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onOpenChange]);
+  const groups = /* @__PURE__ */ new Map();
+  for (const cmd of commands) {
+    const key = cmd.group ?? "";
+    const arr = groups.get(key) ?? [];
+    arr.push(cmd);
+    groups.set(key, arr);
+  }
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        className: "fixed left-1/2 top-[20%] z-50 w-[min(560px,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl outline-none",
+        "aria-describedby": void 0,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: t("common.search") }) }),
+          /* @__PURE__ */ jsxs(Command, { label: "Command palette", className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(
+              Command.Input,
+              {
+                ref: inputRef,
+                autoFocus: true,
+                placeholder: `${t("common.search")}\u2026`,
+                className: "w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Command.List, { className: "max-h-80 overflow-y-auto p-1", children: [
+              /* @__PURE__ */ jsx(Command.Empty, { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "\u2014" }),
+              [...groups.entries()].map(([groupLabel, items]) => /* @__PURE__ */ jsx(
+                Command.Group,
+                {
+                  heading: groupLabel ? /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground", children: groupLabel }) : void 0,
+                  children: items.map((cmd) => /* @__PURE__ */ jsxs(
+                    Command.Item,
+                    {
+                      value: cmd.label,
+                      onSelect: () => {
+                        cmd.onSelect();
+                        onOpenChange(false);
+                      },
+                      className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm cursor-pointer data-[selected=true]:bg-accent",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: cmd.label }),
+                        cmd.hint && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: cmd.hint })
+                      ]
+                    },
+                    cmd.id
+                  ))
+                },
+                groupLabel || "default"
+              ))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-3 py-2 text-[10px] text-muted-foreground flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2191\u2193" }),
+                " navigate"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u23CE" }),
+                " select"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto", children: [
+                /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "esc" }),
+                " close"
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+
+export { AppShell, CommandPalette, ProductSwitcher, ProjectSwitcher, Sidebar, Topbar, TweaksPanel };
+//# sourceMappingURL=shell.js.map
+//# sourceMappingURL=shell.js.map