@comitor/ui 0.1.0 → 0.2.1

package/dist/shell/app-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu, PanelLeft, Search } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Kbd } from \"../components/ui/kbd.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { NotificationsButton } from \"./notifications-button.js\";\nimport { useIsMac, useShell } from \"./shell-context.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\n\nexport interface AppHeaderProps {\n  className?: string;\n  /** Tiêu đề trang — dùng khi không truyền `breadcrumb`. */\n  title?: ReactNode;\n  /** Slot breadcrumb (composite `PageHeader` của app) — ưu tiên hơn `title`. */\n  breadcrumb?: ReactNode;\n  /** Slot ngoài cùng bên trái (vd `<ComitorLockup size=\"xs\" variant=\"auto\" />`). */\n  logo?: ReactNode;\n\n  /** Thay ô tìm kiếm dựng sẵn bằng UI riêng của app. */\n  searchSlot?: ReactNode;\n  showSearch?: boolean;\n  /** Nút thu gọn sidebar ở header (layout sidebar-first thường để ở sidebar). */\n  showSidebarToggle?: boolean;\n\n  /** Slot thông báo (app tự render Popover + panel). Có slot thì `notificationCount` bị bỏ qua. */\n  notificationsSlot?: ReactNode;\n  notificationCount?: number;\n  onNotificationsClick?: () => void;\n\n  /** Slot phụ bên phải, đứng trước AppLauncher. */\n  extraSlot?: ReactNode;\n\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  showUserMenu?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` (profileHref, settingsHref, items…). */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Header cao 56px (`--header-height`), nền `bg-background/80 backdrop-blur`.\n * Comitor là hệ sáng — **không** dùng header luôn-tối.\n *\n * Trái: hamburger (mobile) / nút thu gọn sidebar + logo + breadcrumb hoặc tiêu đề.\n * Phải: ô tìm (Cmd/Ctrl+K) · AppLauncher · thông báo · ThemeToggle · UserMenu.\n */\nexport function AppHeader({\n  className,\n  title,\n  breadcrumb,\n  logo,\n  searchSlot,\n  showSearch = true,\n  showSidebarToggle = false,\n  notificationsSlot,\n  notificationCount,\n  onNotificationsClick,\n  extraSlot,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  showUserMenu = true,\n  userMenuProps\n}: AppHeaderProps) {\n  const { setMobileMenuOpen, setCommandPaletteOpen, toggleSidebar, sidebarCollapsed, labels, user } = useShell();\n  const isMac = useIsMac();\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-40 flex h-header shrink-0 items-center gap-2 px-3 sm:px-4\",\n        \"border-b border-border bg-background/80 backdrop-blur-sm\",\n        className\n      )}\n    >\n      {/* Mở menu off-canvas — chỉ màn hình hẹp */}\n      <button\n        type=\"button\"\n        onClick={() => setMobileMenuOpen(true)}\n        aria-label={labels.openMenu}\n        className={cn(\n          \"-ml-1 flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:hidden\",\n          \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n        )}\n      >\n        <Menu className=\"size-5\" />\n      </button>\n\n      {showSidebarToggle ? (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              onClick={toggleSidebar}\n              aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n              className={cn(\n                \"hidden size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:flex\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n              )}\n            >\n              <PanelLeft className=\"size-4\" />\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · {modKey} + B\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n\n      {logo ? <div className=\"shrink-0\">{logo}</div> : null}\n\n      {/* Breadcrumb thắng title khi có cả hai */}\n      <div className=\"flex min-w-0 flex-1 items-center\">\n        {breadcrumb ?? (title ? <h1 className=\"truncate text-sm font-semibold text-foreground\">{title}</h1> : null)}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {extraSlot}\n\n        {showSearch\n          ? (searchSlot ?? (\n              <>\n                {/* ≥sm: ô giả lập trường tìm kiếm, kèm gợi ý phím tắt */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  className={cn(\n                    \"hidden h-8 w-52 items-center gap-2 rounded-md border border-input bg-muted/40 px-2.5 sm:flex\",\n                    \"text-sm text-muted-foreground transition-colors duration-150 ease-out\",\n                    \"hover:border-gold-300 hover:bg-muted\"\n                  )}\n                >\n                  <Search className=\"size-3.5 shrink-0\" />\n                  <span className=\"flex-1 truncate text-left\">{labels.searchPlaceholder}</span>\n                  <Kbd>{modKey}K</Kbd>\n                </button>\n\n                {/* <sm: chỉ icon */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  aria-label={labels.search}\n                  className={cn(\n                    \"flex size-9 items-center justify-center rounded-md text-muted-foreground sm:hidden\",\n                    \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <Search className=\"size-4\" />\n                </button>\n              </>\n            ))\n          : null}\n\n        {showAppLauncher ? <AppLauncher /> : null}\n\n        {notificationsSlot ??\n          (notificationCount === undefined ? null : (\n            <NotificationsButton\n              count={notificationCount}\n              label={labels.notifications}\n              onClick={onNotificationsClick}\n            />\n          ))}\n\n        {showThemeToggle ? <ThemeToggle labels={labels} /> : null}\n\n        {showUserMenu && user ? (\n          <>\n            <span className=\"mx-1 hidden h-5 w-px bg-border sm:block\" aria-hidden=\"true\" />\n            <UserMenu {...userMenuProps} />\n          </>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/app-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu, PanelLeft, Search } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n// `useIsMac` nhập thẳng từ Tier 2: 0.2.0 chỉ còn MỘT cửa xuất cho nó (entry `.`),\n// `/shell` không re-export nữa.\nimport { useIsMac } from \"../components/composite/keyboard-hint.js\";\nimport { Kbd } from \"../components/ui/kbd.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { NotificationsButton } from \"./notifications-button.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\n\nexport interface AppHeaderProps {\n  className?: string;\n  /** Tiêu đề trang — dùng khi không truyền `breadcrumb`. */\n  title?: ReactNode;\n  /** Slot breadcrumb (composite `PageHeader` của app) — ưu tiên hơn `title`. */\n  breadcrumb?: ReactNode;\n  /** Slot ngoài cùng bên trái (vd `<ComitorLockup size=\"xs\" variant=\"auto\" />`). */\n  logo?: ReactNode;\n\n  /** Thay ô tìm kiếm dựng sẵn bằng UI riêng của app. */\n  searchSlot?: ReactNode;\n  showSearch?: boolean;\n  /** Nút thu gọn sidebar ở header (layout sidebar-first thường để ở sidebar). */\n  showSidebarToggle?: boolean;\n\n  /** Slot thông báo (app tự render Popover + panel). Có slot thì `notificationCount` bị bỏ qua. */\n  notificationsSlot?: ReactNode;\n  notificationCount?: number;\n  onNotificationsClick?: () => void;\n\n  /** Slot phụ bên phải, đứng trước AppLauncher. */\n  extraSlot?: ReactNode;\n\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  showUserMenu?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` (profileHref, settingsHref, items…). */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Header cao 56px (`--header-height`), nền `bg-background/80 backdrop-blur`.\n * Comitor là hệ sáng — **không** dùng header luôn-tối.\n *\n * Trái: hamburger (mobile) / nút thu gọn sidebar + logo + breadcrumb hoặc tiêu đề.\n * Phải: ô tìm (Cmd/Ctrl+K) · AppLauncher · thông báo · ThemeToggle · UserMenu.\n */\nexport function AppHeader({\n  className,\n  title,\n  breadcrumb,\n  logo,\n  searchSlot,\n  showSearch = true,\n  showSidebarToggle = false,\n  notificationsSlot,\n  notificationCount,\n  onNotificationsClick,\n  extraSlot,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  showUserMenu = true,\n  userMenuProps\n}: AppHeaderProps) {\n  const { setMobileMenuOpen, setCommandPaletteOpen, toggleSidebar, sidebarCollapsed, labels, user } = useShell();\n  const isMac = useIsMac();\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-40 flex h-header shrink-0 items-center gap-2 px-3 sm:px-4\",\n        \"border-b border-border bg-background/80 backdrop-blur-sm\",\n        className\n      )}\n    >\n      {/* Mở menu off-canvas — chỉ màn hình hẹp */}\n      <button\n        type=\"button\"\n        onClick={() => setMobileMenuOpen(true)}\n        aria-label={labels.openMenu}\n        className={cn(\n          \"-ml-1 flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:hidden\",\n          \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n        )}\n      >\n        <Menu className=\"size-5\" />\n      </button>\n\n      {showSidebarToggle ? (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              onClick={toggleSidebar}\n              aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n              className={cn(\n                \"hidden size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:flex\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n              )}\n            >\n              <PanelLeft className=\"size-4\" />\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · {modKey} + B\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n\n      {logo ? <div className=\"shrink-0\">{logo}</div> : null}\n\n      {/* Breadcrumb thắng title khi có cả hai */}\n      <div className=\"flex min-w-0 flex-1 items-center\">\n        {breadcrumb ?? (title ? <h1 className=\"truncate text-sm font-semibold text-foreground\">{title}</h1> : null)}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {extraSlot}\n\n        {showSearch\n          ? (searchSlot ?? (\n              <>\n                {/* ≥sm: ô giả lập trường tìm kiếm, kèm gợi ý phím tắt */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  className={cn(\n                    \"hidden h-8 w-52 items-center gap-2 rounded-md border border-input bg-muted/40 px-2.5 sm:flex\",\n                    \"text-sm text-muted-foreground transition-colors duration-150 ease-out\",\n                    // Viền control lúc hover phải ĐẬM HƠN lúc nghỉ, không nhạt đi. `border-gold-300`\n                    // (#E8B824) chỉ được 1,86:1 với `--background` và 1,73:1 với `--muted` (chính là\n                    // nền mà `hover:bg-muted` đổi sang) ở light — ô tìm gần như MẤT VIỀN đúng lúc rê\n                    // chuột vào, dưới xa mức 3:1 WCAG 1.4.11 đòi cho viền control. `gold-300` lại là\n                    // bậc thang màu thô, không đổi theo theme, nên ở dark cùng giá trị đó thành\n                    // 10,19:1 — mỗi theme một hành vi.\n                    // `--control-edge-strong` là bậc viền control lúc hover, đo đúng cho vai trò này:\n                    // 10,55:1 / 9,86:1 (light, trên `--background` / `--muted`) · 11,65:1 / 9,93:1\n                    // (dark). Lúc nghỉ vẫn `border-input` = 3,83:1 (light) · 4,94:1 (dark) ✓.\n                    \"hover:border-control-edge-strong hover:bg-muted\"\n                  )}\n                >\n                  <Search className=\"size-3.5 shrink-0\" />\n                  <span className=\"flex-1 truncate text-left\">{labels.searchPlaceholder}</span>\n                  <Kbd>{modKey}K</Kbd>\n                </button>\n\n                {/* <sm: chỉ icon */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  aria-label={labels.search}\n                  className={cn(\n                    \"flex size-9 items-center justify-center rounded-md text-muted-foreground sm:hidden\",\n                    \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <Search className=\"size-4\" />\n                </button>\n              </>\n            ))\n          : null}\n\n        {showAppLauncher ? <AppLauncher /> : null}\n\n        {notificationsSlot ??\n          (notificationCount === undefined ? null : (\n            <NotificationsButton\n              count={notificationCount}\n              label={labels.notifications}\n              onClick={onNotificationsClick}\n            />\n          ))}\n\n        {showThemeToggle ? <ThemeToggle labels={labels} /> : null}\n\n        {showUserMenu && user ? (\n          <>\n            <span className=\"mx-1 hidden h-5 w-px bg-border sm:block\" aria-hidden=\"true\" />\n            <UserMenu {...userMenuProps} />\n          </>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/app-launcher.js

@@ -43,7 +43,7 @@ function AppLauncherPanel({ variant = "grid", className, onSelected }) {
     const tileClass = cn(
       "group relative flex rounded-md text-left transition-colors duration-150 ease-out",
       variant === "grid" ? "flex-col items-start gap-1.5 p-2.5" : "items-center gap-2.5 p-2",
-      isLocked ? "opacity-60 hover:bg-muted hover:opacity-100" : "hover:bg-accent",
+      isLocked ? "hover:bg-muted" : "hover:bg-accent",
       isCurrent && "bg-accent"
     );
     const body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -53,7 +53,7 @@ function AppLauncherPanel({ variant = "grid", className, onSelected }) {
           className: cn(
             "relative flex shrink-0 items-center justify-center rounded-md",
             variant === "grid" ? "size-9" : "size-8",
-            isLocked ? "bg-muted text-muted-foreground" : "bg-app-accent/15 text-app-accent"
+            isLocked ? "bg-muted text-muted-foreground" : "bg-app-accent text-app-accent-foreground"
           ),
           style: appAccentStyle(app),
           children: [

package/dist/shell/app-launcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-launcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { LayoutGrid, Lock } from \"lucide-react\";\nimport { type KeyboardEvent, useRef } from \"react\";\nimport { Badge } from \"../components/ui/badge.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { AppDescriptor } from \"./types.js\";\nimport { appAccentStyle, getEntitledApps, getLockedApps } from \"./utils.js\";\n\n/** Đánh dấu ô app để điều hướng bàn phím tìm được, kể cả ô render bằng LinkComponent của app. */\nconst TILE_ATTR = \"data-app-tile\";\n\nexport interface AppLauncherPanelProps {\n  /** \"grid\" = lưới 3 cột kiểu Lark/Google Workspace; \"list\" = danh sách dọc (menu mobile). */\n  variant?: \"grid\" | \"list\";\n  className?: string;\n  /** Gọi sau khi người dùng chọn một app — dùng để đóng popover/menu mobile. */\n  onSelected?: () => void;\n}\n\n/**\n * Nội dung của AppLauncher, tách riêng để `MobileMenu` nhúng thẳng (không popover).\n *\n * Điều hướng bàn phím: ←/→/↑/↓ chạy giữa các ô (xuyên cả hai nhóm như một lưới liền),\n * Home/End nhảy đầu-cuối; Enter/Space để chính thẻ button/link xử lý.\n * Vị trí ô đọc từ DOM chứ không giữ mảng ref: ô \"đã mở khoá\" có thể là `LinkComponent`\n * do app cung cấp — không chắc component đó nhận `ref`.\n */\nexport function AppLauncherPanel({ variant = \"grid\", className, onSelected }: AppLauncherPanelProps) {\n  const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();\n\n  const entitled = getEntitledApps(apps);\n  const locked = getLockedApps(apps);\n  const total = entitled.length + locked.length;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const columns = variant === \"grid\" ? 3 : 1;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const root = rootRef.current;\n    if (!root) return;\n    const tiles = Array.from(root.querySelectorAll<HTMLElement>(`[${TILE_ATTR}]`));\n    const index = tiles.indexOf(event.currentTarget);\n    if (index < 0) return;\n\n    const moves: Record<string, number | undefined> = {\n      ArrowRight: index + 1,\n      ArrowLeft: index - 1,\n      ArrowDown: index + columns,\n      ArrowUp: index - columns,\n      Home: 0,\n      End: tiles.length - 1\n    };\n    const next = moves[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    tiles[Math.max(0, Math.min(tiles.length - 1, next))]?.focus();\n  };\n\n  const renderTile = (app: AppDescriptor) => {\n    const isLocked = app.entitled === false;\n    const isCurrent = app.id === currentApp?.id;\n    const Icon = app.icon;\n\n    const tileClass = cn(\n      \"group relative flex rounded-md text-left transition-colors duration-150 ease-out\",\n      variant === \"grid\" ? \"flex-col items-start gap-1.5 p-2.5\" : \"items-center gap-2.5 p-2\",\n      isLocked ? \"opacity-60 hover:bg-muted hover:opacity-100\" : \"hover:bg-accent\",\n      isCurrent && \"bg-accent\"\n    );\n\n    const body = (\n      <>\n        <span\n          className={cn(\n            \"relative flex shrink-0 items-center justify-center rounded-md\",\n            variant === \"grid\" ? \"size-9\" : \"size-8\",\n            isLocked ? \"bg-muted text-muted-foreground\" : \"bg-app-accent/15 text-app-accent\"\n          )}\n          style={appAccentStyle(app)}\n        >\n          <Icon className=\"size-4\" />\n          {isLocked ? (\n            <span className=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-popover\">\n              <Lock className=\"size-2.5\" />\n            </span>\n          ) : null}\n        </span>\n\n        <span className={cn(\"flex min-w-0 flex-col\", variant === \"list\" && \"flex-1\")}>\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"truncate text-sm font-medium text-foreground\">{app.name}</span>\n            {app.badge ? (\n              <Badge variant=\"destructive\" size=\"sm\">\n                {app.badge}\n              </Badge>\n            ) : null}\n          </span>\n          {app.description ? (\n            <span\n              className={cn(\"text-[11px] leading-snug text-muted-foreground\", variant === \"grid\" && \"line-clamp-2\")}\n            >\n              {app.description}\n            </span>\n          ) : null}\n        </span>\n      </>\n    );\n\n    // Chưa mở khoá → không điều hướng, chỉ báo cho app biết để mời nâng gói.\n    if (isLocked) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          title={labels.lockedHint}\n          aria-label={`${app.name} — ${labels.locked}`}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onUpsell?.(app.id);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    // Có `onAppSelect` → app tự lo điều hướng (đổi subdomain, nạp trước dữ liệu…);\n    // không có → dùng link thật để giữ chuột-giữa / mở tab mới / trình đọc màn hình.\n    if (onAppSelect) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onAppSelect(app);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    return (\n      <ShellNavLink\n        key={app.id}\n        href={app.href}\n        data-app-tile=\"\"\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={tileClass}\n        onKeyDown={handleKeyDown}\n        onClick={() => onSelected?.()}\n      >\n        {body}\n      </ShellNavLink>\n    );\n  };\n\n  if (total === 0) return null;\n\n  const groupClass = variant === \"grid\" ? \"grid grid-cols-3 gap-1\" : \"flex flex-col gap-0.5\";\n\n  return (\n    <div ref={rootRef} className={cn(\"flex flex-col gap-3\", className)}>\n      {entitled.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.myApps}\n          </p>\n          <div className={groupClass}>{entitled.map(renderTile)}</div>\n        </section>\n      ) : null}\n\n      {locked.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.discoverApps}\n          </p>\n          <div className={groupClass}>{locked.map(renderTile)}</div>\n        </section>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AppLauncherProps extends AppLauncherPanelProps {\n  /** Bỏ nút bấm + Popover, render thẳng panel (MobileMenu dùng cách này). */\n  inline?: boolean;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * **Trục 2 — chuyển sản phẩm trong cùng workspace.**\n *\n * Nút lưới 3×3 ở header (kiểu Lark / Google Workspace) mở popover lưới ô app.\n * Trạng thái mở nằm ở `ShellProvider` để phím tắt `Cmd/Ctrl + Shift + K` bật được.\n * App chưa có trong gói hiện ô khoá và gọi `onUpsell(appId)` thay vì điều hướng.\n */\nexport function AppLauncher({\n  className,\n  variant = \"grid\",\n  inline = false,\n  align = \"end\",\n  onSelected\n}: AppLauncherProps) {\n  const { apps, appLauncherOpen, setAppLauncherOpen, labels } = useShell();\n\n  if (apps.length === 0) return null;\n\n  if (inline) {\n    return <AppLauncherPanel variant={variant} className={className} onSelected={onSelected} />;\n  }\n\n  return (\n    <Popover open={appLauncherOpen} onOpenChange={setAppLauncherOpen}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label={labels.appLauncherLabel}\n              className={cn(\n                \"flex size-9 items-center justify-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\",\n                appLauncherOpen && \"bg-muted text-foreground\",\n                className\n              )}\n            >\n              <LayoutGrid className=\"size-4\" />\n            </button>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">{labels.apps}</TooltipContent>\n      </Tooltip>\n\n      <PopoverContent align={align} sideOffset={8} className=\"w-[22rem] p-2\">\n        <AppLauncherPanel\n          variant={variant}\n          onSelected={() => {\n            setAppLauncherOpen(false);\n            onSelected?.();\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AA6EM,mBASI,KARF,YADF;AA3EN,SAAS,YAAY,YAAY;AACjC,SAA6B,cAAc;AAC3C,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB,iBAAiB,qBAAqB;AAG/D,MAAM,YAAY;AAkBX,SAAS,iBAAiB,EAAE,UAAU,QAAQ,WAAW,WAAW,GAA0B;AACnG,QAAM,EAAE,MAAM,YAAY,aAAa,UAAU,OAAO,IAAI,SAAS;AAErE,QAAM,WAAW,gBAAgB,IAAI;AACrC,QAAM,SAAS,cAAc,IAAI;AACjC,QAAM,QAAQ,SAAS,SAAS,OAAO;AAEvC,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,YAAY,SAAS,IAAI;AAEzC,QAAM,gBAAgB,CAAC,UAAsC;AAC3D,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,IAAI,SAAS,GAAG,CAAC;AAC7E,UAAM,QAAQ,MAAM,QAAQ,MAAM,aAAa;AAC/C,QAAI,QAAQ,EAAG;AAEf,UAAM,QAA4C;AAAA,MAChD,YAAY,QAAQ;AAAA,MACpB,WAAW,QAAQ;AAAA,MACnB,WAAW,QAAQ;AAAA,MACnB,SAAS,QAAQ;AAAA,MACjB,MAAM;AAAA,MACN,KAAK,MAAM,SAAS;AAAA,IACtB;AACA,UAAM,OAAO,MAAM,MAAM,GAAG;AAC5B,QAAI,SAAS,OAAW;AAExB,UAAM,eAAe;AACrB,UAAM,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,GAAG,MAAM;AAAA,EAC9D;AAEA,QAAM,aAAa,CAAC,QAAuB;AACzC,UAAM,WAAW,IAAI,aAAa;AAClC,UAAM,YAAY,IAAI,OAAO,YAAY;AACzC,UAAM,OAAO,IAAI;AAEjB,UAAM,YAAY;AAAA,MAChB;AAAA,MACA,YAAY,SAAS,uCAAuC;AAAA,MAC5D,WAAW,gDAAgD;AAAA,MAC3D,aAAa;AAAA,IACf;AAEA,UAAM,OACJ,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,YAAY,SAAS,WAAW;AAAA,YAChC,WAAW,mCAAmC;AAAA,UAChD;AAAA,UACA,OAAO,eAAe,GAAG;AAAA,UAEzB;AAAA,gCAAC,QAAK,WAAU,UAAS;AAAA,YACxB,WACC,oBAAC,UAAK,WAAU,uIACd,8BAAC,QAAK,WAAU,YAAW,GAC7B,IACE;AAAA;AAAA;AAAA,MACN;AAAA,MAEA,qBAAC,UAAK,WAAW,GAAG,yBAAyB,YAAY,UAAU,QAAQ,GACzE;AAAA,6BAAC,UAAK,WAAU,6BACd;AAAA,8BAAC,UAAK,WAAU,gDAAgD,cAAI,MAAK;AAAA,UACxE,IAAI,QACH,oBAAC,SAAM,SAAQ,eAAc,MAAK,MAC/B,cAAI,OACP,IACE;AAAA,WACN;AAAA,QACC,IAAI,cACH;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,kDAAkD,YAAY,UAAU,cAAc;AAAA,YAEnG,cAAI;AAAA;AAAA,QACP,IACE;AAAA,SACN;AAAA,OACF;AAIF,QAAI,UAAU;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,iBAAc;AAAA,UACd,OAAO,OAAO;AAAA,UACd,cAAY,GAAG,IAAI,IAAI,WAAM,OAAO,MAAM;AAAA,UAC1C,WAAW;AAAA,UACX,WAAW;AAAA,UACX,SAAS,MAAM;AACb,uBAAW,IAAI,EAAE;AACjB,yBAAa;AAAA,UACf;AAAA,UAEC;AAAA;AAAA,QAZI,IAAI;AAAA,MAaX;AAAA,IAEJ;AAIA,QAAI,aAAa;AACf,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,iBAAc;AAAA,UACd,gBAAc,YAAY,SAAS;AAAA,UACnC,WAAW;AAAA,UACX,WAAW;AAAA,UACX,SAAS,MAAM;AACb,wBAAY,GAAG;AACf,yBAAa;AAAA,UACf;AAAA,UAEC;AAAA;AAAA,QAXI,IAAI;AAAA,MAYX;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,IAAI;AAAA,QACV,iBAAc;AAAA,QACd,gBAAc,YAAY,SAAS;AAAA,QACnC,WAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS,MAAM,aAAa;AAAA,QAE3B;AAAA;AAAA,MARI,IAAI;AAAA,IASX;AAAA,EAEJ;AAEA,MAAI,UAAU,EAAG,QAAO;AAExB,QAAM,aAAa,YAAY,SAAS,2BAA2B;AAEnE,SACE,qBAAC,SAAI,KAAK,SAAS,WAAW,GAAG,uBAAuB,SAAS,GAC9D;AAAA,aAAS,SAAS,IACjB,qBAAC,aACC;AAAA,0BAAC,OAAE,WAAU,uFACV,iBAAO,QACV;AAAA,MACA,oBAAC,SAAI,WAAW,YAAa,mBAAS,IAAI,UAAU,GAAE;AAAA,OACxD,IACE;AAAA,IAEH,OAAO,SAAS,IACf,qBAAC,aACC;AAAA,0BAAC,OAAE,WAAU,uFACV,iBAAO,cACV;AAAA,MACA,oBAAC,SAAI,WAAW,YAAa,iBAAO,IAAI,UAAU,GAAE;AAAA,OACtD,IACE;AAAA,KACN;AAEJ;AAeO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AACF,GAAqB;AACnB,QAAM,EAAE,MAAM,iBAAiB,oBAAoB,OAAO,IAAI,SAAS;AAEvE,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,MAAI,QAAQ;AACV,WAAO,oBAAC,oBAAiB,SAAkB,WAAsB,YAAwB;AAAA,EAC3F;AAEA,SACE,qBAAC,WAAQ,MAAM,iBAAiB,cAAc,oBAC5C;AAAA,yBAAC,WACC;AAAA,0BAAC,kBAAe,SAAO,MACrB,8BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,OAAO;AAAA,UACnB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,mBAAmB;AAAA,YACnB;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,WAAU,UAAS;AAAA;AAAA,MACjC,GACF,GACF;AAAA,MACA,oBAAC,kBAAe,MAAK,UAAU,iBAAO,MAAK;AAAA,OAC7C;AAAA,IAEA,oBAAC,kBAAe,OAAc,YAAY,GAAG,WAAU,iBACrD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAY,MAAM;AAChB,6BAAmB,KAAK;AACxB,uBAAa;AAAA,QACf;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/app-launcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { LayoutGrid, Lock } from \"lucide-react\";\nimport { type KeyboardEvent, useRef } from \"react\";\nimport { Badge } from \"../components/ui/badge.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { AppDescriptor } from \"./types.js\";\nimport { appAccentStyle, getEntitledApps, getLockedApps } from \"./utils.js\";\n\n/** Đánh dấu ô app để điều hướng bàn phím tìm được, kể cả ô render bằng LinkComponent của app. */\nconst TILE_ATTR = \"data-app-tile\";\n\nexport interface AppLauncherPanelProps {\n  /** \"grid\" = lưới 3 cột kiểu Lark/Google Workspace; \"list\" = danh sách dọc (menu mobile). */\n  variant?: \"grid\" | \"list\";\n  className?: string;\n  /** Gọi sau khi người dùng chọn một app — dùng để đóng popover/menu mobile. */\n  onSelected?: () => void;\n}\n\n/**\n * Nội dung của AppLauncher, tách riêng để `MobileMenu` nhúng thẳng (không popover).\n *\n * Điều hướng bàn phím: ←/→/↑/↓ chạy giữa các ô (xuyên cả hai nhóm như một lưới liền),\n * Home/End nhảy đầu-cuối; Enter/Space để chính thẻ button/link xử lý.\n * Vị trí ô đọc từ DOM chứ không giữ mảng ref: ô \"đã mở khoá\" có thể là `LinkComponent`\n * do app cung cấp — không chắc component đó nhận `ref`.\n */\nexport function AppLauncherPanel({ variant = \"grid\", className, onSelected }: AppLauncherPanelProps) {\n  const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();\n\n  const entitled = getEntitledApps(apps);\n  const locked = getLockedApps(apps);\n  const total = entitled.length + locked.length;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const columns = variant === \"grid\" ? 3 : 1;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const root = rootRef.current;\n    if (!root) return;\n    const tiles = Array.from(root.querySelectorAll<HTMLElement>(`[${TILE_ATTR}]`));\n    const index = tiles.indexOf(event.currentTarget);\n    if (index < 0) return;\n\n    const moves: Record<string, number | undefined> = {\n      ArrowRight: index + 1,\n      ArrowLeft: index - 1,\n      ArrowDown: index + columns,\n      ArrowUp: index - columns,\n      Home: 0,\n      End: tiles.length - 1\n    };\n    const next = moves[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    tiles[Math.max(0, Math.min(tiles.length - 1, next))]?.focus();\n  };\n\n  const renderTile = (app: AppDescriptor) => {\n    const isLocked = app.entitled === false;\n    const isCurrent = app.id === currentApp?.id;\n    const Icon = app.icon;\n\n    // Ô KHOÁ không tô `opacity-60` nữa. Nó KHÔNG phải control vô hiệu — bấm được và gọi\n    // `onUpsell(appId)` — nên không hưởng miễn trừ \"thành phần vô hiệu\" của WCAG 1.4.3/1.4.11.\n    // Với 60% độ mờ thì mô tả app tụt còn 2,41:1 (light) / 2,74:1 (dark) ✗ và icon trong ô\n    // `bg-muted` còn 2,31:1 / 2,60:1 ✗, chỉ phục hồi khi hover — tức người không rê chuột thì\n    // không đọc được. Bỏ độ mờ: mô tả `text-muted-foreground` 5,23:1 (light) / 5,35:1 (dark) ✓,\n    // icon trên `bg-muted` 4,89:1 / 4,86:1 ✓. Tín hiệu \"chưa mở khoá\" không mất gì: ô icon vẫn\n    // xám (thay vì tô màu app), vẫn có huy hiệu ổ khoá, vẫn có `title`/`aria-label` nói rõ.\n    const tileClass = cn(\n      \"group relative flex rounded-md text-left transition-colors duration-150 ease-out\",\n      variant === \"grid\" ? \"flex-col items-start gap-1.5 p-2.5\" : \"items-center gap-2.5 p-2\",\n      isLocked ? \"hover:bg-muted\" : \"hover:bg-accent\",\n      isCurrent && \"bg-accent\"\n    );\n\n    const body = (\n      <>\n        {/* Ô icon tô ĐẶC bằng `--app-accent` + chữ `--app-accent-foreground`, KHÔNG phải\n            `bg-app-accent/15 text-app-accent`: accent mặc định là gold #E8B824, icon vàng trên\n            nền vàng 15% (đã trộn ra #FCF4DE) chỉ được 1,69:1 — dưới xa mức 3:1 mà WCAG 1.4.11\n            đòi cho icon. Nền đặc thì icon là mực trên vàng = 10,19:1 ✓ và ô app vẫn giữ đúng\n            màu riêng của từng app. Cùng cách xử lý với `FilterChips` (chip đang bật). */}\n        <span\n          className={cn(\n            \"relative flex shrink-0 items-center justify-center rounded-md\",\n            variant === \"grid\" ? \"size-9\" : \"size-8\",\n            isLocked ? \"bg-muted text-muted-foreground\" : \"bg-app-accent text-app-accent-foreground\"\n          )}\n          style={appAccentStyle(app)}\n        >\n          <Icon className=\"size-4\" />\n          {isLocked ? (\n            <span className=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-popover\">\n              <Lock className=\"size-2.5\" />\n            </span>\n          ) : null}\n        </span>\n\n        <span className={cn(\"flex min-w-0 flex-col\", variant === \"list\" && \"flex-1\")}>\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"truncate text-sm font-medium text-foreground\">{app.name}</span>\n            {app.badge ? (\n              <Badge variant=\"destructive\" size=\"sm\">\n                {app.badge}\n              </Badge>\n            ) : null}\n          </span>\n          {app.description ? (\n            <span\n              className={cn(\"text-[11px] leading-snug text-muted-foreground\", variant === \"grid\" && \"line-clamp-2\")}\n            >\n              {app.description}\n            </span>\n          ) : null}\n        </span>\n      </>\n    );\n\n    // Chưa mở khoá → không điều hướng, chỉ báo cho app biết để mời nâng gói.\n    if (isLocked) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          title={labels.lockedHint}\n          aria-label={`${app.name} — ${labels.locked}`}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onUpsell?.(app.id);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    // Có `onAppSelect` → app tự lo điều hướng (đổi subdomain, nạp trước dữ liệu…);\n    // không có → dùng link thật để giữ chuột-giữa / mở tab mới / trình đọc màn hình.\n    if (onAppSelect) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onAppSelect(app);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    return (\n      <ShellNavLink\n        key={app.id}\n        href={app.href}\n        data-app-tile=\"\"\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={tileClass}\n        onKeyDown={handleKeyDown}\n        onClick={() => onSelected?.()}\n      >\n        {body}\n      </ShellNavLink>\n    );\n  };\n\n  if (total === 0) return null;\n\n  const groupClass = variant === \"grid\" ? \"grid grid-cols-3 gap-1\" : \"flex flex-col gap-0.5\";\n\n  return (\n    <div ref={rootRef} className={cn(\"flex flex-col gap-3\", className)}>\n      {entitled.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.myApps}\n          </p>\n          <div className={groupClass}>{entitled.map(renderTile)}</div>\n        </section>\n      ) : null}\n\n      {locked.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.discoverApps}\n          </p>\n          <div className={groupClass}>{locked.map(renderTile)}</div>\n        </section>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AppLauncherProps extends AppLauncherPanelProps {\n  /** Bỏ nút bấm + Popover, render thẳng panel (MobileMenu dùng cách này). */\n  inline?: boolean;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * **Trục 2 — chuyển sản phẩm trong cùng workspace.**\n *\n * Nút lưới 3×3 ở header (kiểu Lark / Google Workspace) mở popover lưới ô app.\n * Trạng thái mở nằm ở `ShellProvider` để phím tắt `Cmd/Ctrl + Shift + K` bật được.\n * App chưa có trong gói hiện ô khoá và gọi `onUpsell(appId)` thay vì điều hướng.\n */\nexport function AppLauncher({\n  className,\n  variant = \"grid\",\n  inline = false,\n  align = \"end\",\n  onSelected\n}: AppLauncherProps) {\n  const { apps, appLauncherOpen, setAppLauncherOpen, labels } = useShell();\n\n  if (apps.length === 0) return null;\n\n  if (inline) {\n    return <AppLauncherPanel variant={variant} className={className} onSelected={onSelected} />;\n  }\n\n  return (\n    <Popover open={appLauncherOpen} onOpenChange={setAppLauncherOpen}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label={labels.appLauncherLabel}\n              className={cn(\n                \"flex size-9 items-center justify-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\",\n                appLauncherOpen && \"bg-muted text-foreground\",\n                className\n              )}\n            >\n              <LayoutGrid className=\"size-4\" />\n            </button>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">{labels.apps}</TooltipContent>\n      </Tooltip>\n\n      <PopoverContent align={align} sideOffset={8} className=\"w-[22rem] p-2\">\n        <AppLauncherPanel\n          variant={variant}\n          onSelected={() => {\n            setAppLauncherOpen(false);\n            onSelected?.();\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/app-shell.d.ts

@@ -7,6 +7,8 @@ import { SidebarProps } from './sidebar.js';
 import './user-menu.js';
 import './types.js';
 import 'lucide-react';
+import './utils.js';
+import '../components/composite/text-utils.js';
 
 type AppShellLayout = "sidebar-first" | "header-first";
 interface AppShellProps extends ShellProviderProps {

package/dist/shell/index.d.ts

@@ -6,7 +6,7 @@ export { ComitorLockup, ComitorLockupProps, ComitorLockupSize, ComitorLockupVari
 export { ComitorLogo, ComitorLogoProps, ComitorLogoVariant } from './comitor-logo.js';
 export { MobileMenu, MobileMenuProps } from './mobile-menu.js';
 export { NotificationsButton, NotificationsButtonProps } from './notifications-button.js';
-export { ShellContextValue, ShellProvider, ShellProviderProps, useIsMac, useShell } from './shell-context.js';
+export { ShellContextValue, ShellProvider, ShellProviderProps, useShell } from './shell-context.js';
 export { ShellNavLink, ShellNavLinkProps } from './shell-link.js';
 export { Sidebar, SidebarProps } from './sidebar.js';
 export { SidebarGroup, SidebarGroupProps } from './sidebar-group.js';
@@ -15,9 +15,9 @@ export { ThemeProvider, ThemeProviderProps } from './theme-provider.js';
 export { ThemeToggle, ThemeToggleLabels, ThemeToggleProps } from './theme-toggle.js';
 export { AppDescriptor, DEFAULT_SHELL_LABELS, NavBadgeVariant, NavGroup, NavItem, ShellIcon, ShellLabels, ShellLinkComponent, ShellLinkProps, ShellNav, ShellUser, UserMenuItem, Workspace } from './types.js';
 export { UserAvatar, UserAvatarProps, UserMenu, UserMenuProps } from './user-menu.js';
-export { appAccentStyle, flattenNavItems, getAvatarToneClass, getEntitledApps, getLockedApps, isNavBranchActive, isNavItemActive, normalizeVi, resolveCurrentApp, toNavGroups } from './utils.js';
+export { NavSearchParams, appAccentStyle, flattenNavItems, getEntitledApps, getLockedApps, isNavBranchActive, isNavItemActive, resolveCurrentApp, toNavGroups, toSearchParams } from './utils.js';
 export { WorkspaceSwitcher, WorkspaceSwitcherProps } from './workspace-switcher.js';
-export { getVietnameseInitials } from '../components/composite/text-utils.js';
+export { getVietnameseInitials, normalizeVi } from '../components/composite/text-utils.js';
 import 'react';
 import 'sonner';
 import 'next-themes';

package/dist/shell/shell-context.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { Workspace, AppDescriptor, ShellNav, ShellLinkComponent, ShellUser, ShellLabels, NavGroup } from './types.js';
+import { NavSearchParams } from './utils.js';
 import 'lucide-react';
+import '../components/composite/text-utils.js';
 
 interface ShellContextValue {
     workspaces: Workspace[];
@@ -16,6 +18,12 @@ interface ShellContextValue {
     onUpsell?: (appId: string) => void;
     nav: NavGroup[];
     pathname: string;
+    /**
+     * Query hiện tại đã chuẩn hoá, hoặc `null` khi app không truyền.
+     * `null` KHÁC rỗng: rỗng nghĩa là "URL không có query", `null` nghĩa là "shell không biết"
+     * — và active matching xử lý hai ca đó khác nhau (xem `isNavItemActive`).
+     */
+    searchParams: URLSearchParams | null;
     LinkComponent: ShellLinkComponent;
     onNavigate?: (href: string) => void;
     user: ShellUser | null;
@@ -33,12 +41,6 @@ interface ShellContextValue {
 }
 /** Truy cập state của shell — phải gọi bên trong `<ShellProvider>`. */
 declare function useShell(): ShellContextValue;
-/**
- * `true` khi đang chạy trên macOS — để hiện `⌘K` thay vì `Ctrl+K`.
- * Dùng `useSyncExternalStore` với snapshot server = false: React tự khớp
- * server/client, không cần cờ `mounted` thủ công và không gây hydration mismatch.
- */
-declare function useIsMac(): boolean;
 interface ShellProviderProps {
     /** Trục 1 — danh sách workspace của user. Rỗng/1 phần tử thì WorkspaceSwitcher tự ẩn danh sách. */
     workspaces?: Workspace[];
@@ -61,6 +63,25 @@ interface ShellProviderProps {
      * của next/navigation (trả `null` khi không có App Router → coi như "").
      */
     pathname?: string;
+    /**
+     * Query hiện tại — CHỈ cần khi menu có mục phân biệt nhau bằng query
+     * (`/cai-dat?tab=chung` ⇄ `/cai-dat?tab=thanh-vien`). Bỏ trống thì mọi mục cùng đường dẫn
+     * cùng sáng.
+     *
+     * Nhận `useSearchParams()` của Next, chuỗi `"?tab=x"`, hoặc object `searchParams` của
+     * Server Component.
+     *
+     * ⚠ Shell KHÔNG tự gọi `useSearchParams()`: hook đó ép trang bọc `<Suspense>` và đẩy trang
+     * sang render phía client khi build tĩnh — cái giá đó phải do app tự chọn, không phải do
+     * việc lỡ import shell. Truyền vào từ một client component đã có sẵn boundary:
+     *
+     * ```tsx
+     * "use client";
+     * const searchParams = useSearchParams();
+     * return <AppShell searchParams={searchParams} …>{children}</AppShell>;
+     * ```
+     */
+    searchParams?: NavSearchParams | null;
     /** Component link thay `next/link` (app không-Next). */
     LinkComponent?: ShellLinkComponent;
     /** Gọi sau mỗi lần người dùng bấm một mục điều hướng (analytics, đóng panel…). */
@@ -86,6 +107,6 @@ interface ShellProviderProps {
  * (Storybook, test). Mọi điều hướng chủ động là việc của app qua callback
  * `onWorkspaceChange` / `onAppSelect` / `onNavigate`; link tĩnh đi qua `LinkComponent`.
  */
-declare function ShellProvider({ workspaces, currentWorkspaceId, onWorkspaceChange, onCreateWorkspace, onWorkspaceSettings, onInviteMembers, apps, currentAppId, onAppSelect, onUpsell, nav, pathname: pathnameProp, LinkComponent, onNavigate, user, onLogout, defaultSidebarCollapsed, persistSidebarState, enableShortcuts, labels: labelsProp, children }: ShellProviderProps): React.JSX.Element;
+declare function ShellProvider({ workspaces, currentWorkspaceId, onWorkspaceChange, onCreateWorkspace, onWorkspaceSettings, onInviteMembers, apps, currentAppId, onAppSelect, onUpsell, nav, pathname: pathnameProp, searchParams: searchParamsProp, LinkComponent, onNavigate, user, onLogout, defaultSidebarCollapsed, persistSidebarState, enableShortcuts, labels: labelsProp, children }: ShellProviderProps): React.JSX.Element;
 
-export { type ShellContextValue, ShellProvider, type ShellProviderProps, useIsMac, useShell };
+export { type ShellContextValue, ShellProvider, type ShellProviderProps, useShell };

package/dist/shell/shell-context.js

@@ -2,20 +2,12 @@
 import { jsx } from "react/jsx-runtime";
 import NextLink from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useSyncExternalStore
-} from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { TooltipProvider } from "../components/ui/tooltip.js";
 import {
   DEFAULT_SHELL_LABELS
 } from "./types.js";
-import { getEntitledApps, resolveCurrentApp, toNavGroups } from "./utils.js";
+import { getEntitledApps, resolveCurrentApp, toNavGroups, toSearchParams } from "./utils.js";
 function DefaultShellLink({ href, children, ...props }) {
   return /* @__PURE__ */ jsx(NextLink, { href, ...props, children });
 }
@@ -41,15 +33,6 @@ function readStoredCollapsed(workspaceId) {
     return null;
   }
 }
-const emptySubscribe = () => () => {
-};
-function useIsMac() {
-  return useSyncExternalStore(
-    emptySubscribe,
-    () => /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent),
-    () => false
-  );
-}
 function ShellProvider({
   workspaces = [],
   currentWorkspaceId,
@@ -63,6 +46,7 @@ function ShellProvider({
   onUpsell,
   nav,
   pathname: pathnameProp,
+  searchParams: searchParamsProp,
   LinkComponent = DefaultShellLink,
   onNavigate,
   user = null,
@@ -75,6 +59,7 @@ function ShellProvider({
 }) {
   const nextPathname = usePathname();
   const pathname = pathnameProp ?? nextPathname ?? "";
+  const searchParams = useMemo(() => toSearchParams(searchParamsProp), [searchParamsProp]);
   const currentWorkspace = useMemo(
     () => workspaces.find((workspace) => workspace.id === currentWorkspaceId) ?? workspaces[0] ?? null,
     [workspaces, currentWorkspaceId]
@@ -182,6 +167,7 @@ function ShellProvider({
       onUpsell,
       nav: navGroups,
       pathname,
+      searchParams,
       LinkComponent,
       onNavigate,
       user,
@@ -210,6 +196,7 @@ function ShellProvider({
       onUpsell,
       navGroups,
       pathname,
+      searchParams,
       LinkComponent,
       onNavigate,
       user,
@@ -227,7 +214,6 @@ function ShellProvider({
 }
 export {
   ShellProvider,
-  useIsMac,
   useShell
 };
 //# sourceMappingURL=shell-context.js.map

package/dist/shell/shell-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/shell-context.tsx"],"sourcesContent":["\"use client\";\n\nimport NextLink from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore\n} from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport {\n  type AppDescriptor,\n  DEFAULT_SHELL_LABELS,\n  type NavGroup,\n  type ShellLabels,\n  type ShellLinkComponent,\n  type ShellLinkProps,\n  type ShellNav,\n  type ShellUser,\n  type Workspace\n} from \"./types.js\";\nimport { getEntitledApps, resolveCurrentApp, toNavGroups } from \"./utils.js\";\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Link mặc định\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Bọc `next/link` thay vì truyền thẳng: hình dạng props của NextLink rộng hơn\n * `ShellLinkProps` (href nhận cả UrlObject), bọc lại cho khớp type và để chỗ\n * thay adapter router khác về sau.\n */\nfunction DefaultShellLink({ href, children, ...props }: ShellLinkProps) {\n  return (\n    <NextLink href={href} {...props}>\n      {children}\n    </NextLink>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Context\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellContextValue {\n  /* Trục 1 — workspace */\n  workspaces: Workspace[];\n  currentWorkspace: Workspace | null;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /* Trục 2 — app */\n  apps: AppDescriptor[];\n  currentApp: AppDescriptor | null;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /* Điều hướng trong app hiện tại */\n  nav: NavGroup[];\n  pathname: string;\n  LinkComponent: ShellLinkComponent;\n  onNavigate?: (href: string) => void;\n\n  /* Người dùng */\n  user: ShellUser | null;\n  onLogout?: () => void;\n\n  /* Trạng thái khung */\n  sidebarCollapsed: boolean;\n  setSidebarCollapsed: (collapsed: boolean) => void;\n  toggleSidebar: () => void;\n  mobileMenuOpen: boolean;\n  setMobileMenuOpen: (open: boolean) => void;\n  commandPaletteOpen: boolean;\n  setCommandPaletteOpen: (open: boolean) => void;\n  appLauncherOpen: boolean;\n  setAppLauncherOpen: (open: boolean) => void;\n\n  /* Chuỗi hiển thị (đã trộn mặc định tiếng Việt với override của app) */\n  labels: ShellLabels;\n}\n\nconst ShellContext = createContext<ShellContextValue | undefined>(undefined);\n\n/** Truy cập state của shell — phải gọi bên trong `<ShellProvider>`. */\nexport function useShell(): ShellContextValue {\n  const context = useContext(ShellContext);\n  if (!context) {\n    throw new Error(\"useShell phải được dùng bên trong <ShellProvider> (hoặc <AppShell>).\");\n  }\n  return context;\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Ghi nhớ trạng thái thu gọn sidebar\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Khoá localStorage theo workspace — mỗi workspace nhớ riêng trạng thái sidebar\n * (spec §7.6: KHÔNG dùng cookie `sidebar_state` của shadcn để tránh hai nguồn sự thật).\n */\nfunction sidebarStorageKey(workspaceId: string | undefined): string {\n  return `comitor-sidebar:${workspaceId ?? \"default\"}`;\n}\n\nfunction readStoredCollapsed(workspaceId: string | undefined): boolean | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(sidebarStorageKey(workspaceId));\n    if (raw === \"1\") return true;\n    if (raw === \"0\") return false;\n    return null;\n  } catch {\n    // Safari private mode / storage bị chặn — coi như chưa có giá trị lưu.\n    return null;\n  }\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Hook phụ trợ\n   ──────────────────────────────────────────────────────────────────────────── */\n\nconst emptySubscribe = () => () => {};\n\n/**\n * `true` khi đang chạy trên macOS — để hiện `⌘K` thay vì `Ctrl+K`.\n * Dùng `useSyncExternalStore` với snapshot server = false: React tự khớp\n * server/client, không cần cờ `mounted` thủ công và không gây hydration mismatch.\n */\nexport function useIsMac(): boolean {\n  return useSyncExternalStore(\n    emptySubscribe,\n    () => /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent),\n    () => false\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Provider\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellProviderProps {\n  /** Trục 1 — danh sách workspace của user. Rỗng/1 phần tử thì WorkspaceSwitcher tự ẩn danh sách. */\n  workspaces?: Workspace[];\n  /** Workspace đang mở; bỏ trống → lấy phần tử đầu. */\n  currentWorkspaceId?: string;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /** Trục 2 — danh sách app của hệ sinh thái (kể cả app chưa mở khoá). */\n  apps?: AppDescriptor[];\n  /** App đang mở; bỏ trống → suy từ `pathname` (khớp prefix dài nhất). */\n  currentAppId?: string;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /** Menu của app hiện tại — `NavItem[]` hoặc `NavGroup[]`. */\n  nav?: ShellNav;\n  /**\n   * Ghi đè pathname (Storybook, app không-Next). Bỏ trống → dùng `usePathname()`\n   * của next/navigation (trả `null` khi không có App Router → coi như \"\").\n   */\n  pathname?: string;\n  /** Component link thay `next/link` (app không-Next). */\n  LinkComponent?: ShellLinkComponent;\n  /** Gọi sau mỗi lần người dùng bấm một mục điều hướng (analytics, đóng panel…). */\n  onNavigate?: (href: string) => void;\n\n  user?: ShellUser | null;\n  onLogout?: () => void;\n\n  /** Trạng thái thu gọn ban đầu (SSR). Sau khi mount, localStorage của workspace thắng. */\n  defaultSidebarCollapsed?: boolean;\n  /** Tắt ghi nhớ localStorage (Storybook, chế độ kiosk). */\n  persistSidebarState?: boolean;\n  /** Tắt bộ phím tắt toàn cục. */\n  enableShortcuts?: boolean;\n\n  /** Override chuỗi hiển thị (mặc định tiếng Việt). */\n  labels?: Partial<ShellLabels>;\n\n  children: ReactNode;\n}\n\n/**\n * Provider của app shell Comitor: giữ hai trục điều hướng (workspace × app),\n * trạng thái khung (sidebar/mobile/command palette/app launcher), phím tắt toàn cục,\n * và bọc sẵn `TooltipProvider`.\n *\n * KHÔNG dùng `useRouter()` của next/navigation: hook đó *ném lỗi* khi thiếu App Router\n * (Storybook, test). Mọi điều hướng chủ động là việc của app qua callback\n * `onWorkspaceChange` / `onAppSelect` / `onNavigate`; link tĩnh đi qua `LinkComponent`.\n */\nexport function ShellProvider({\n  workspaces = [],\n  currentWorkspaceId,\n  onWorkspaceChange,\n  onCreateWorkspace,\n  onWorkspaceSettings,\n  onInviteMembers,\n  apps = [],\n  currentAppId,\n  onAppSelect,\n  onUpsell,\n  nav,\n  pathname: pathnameProp,\n  LinkComponent = DefaultShellLink,\n  onNavigate,\n  user = null,\n  onLogout,\n  defaultSidebarCollapsed = false,\n  persistSidebarState = true,\n  enableShortcuts = true,\n  labels: labelsProp,\n  children\n}: ShellProviderProps) {\n  // `usePathname()` trả null khi không có App Router → fallback chuỗi rỗng thay vì crash.\n  const nextPathname = usePathname();\n  const pathname = pathnameProp ?? nextPathname ?? \"\";\n\n  const currentWorkspace = useMemo(\n    () => workspaces.find((workspace) => workspace.id === currentWorkspaceId) ?? workspaces[0] ?? null,\n    [workspaces, currentWorkspaceId]\n  );\n\n  const currentApp = useMemo(() => {\n    if (currentAppId) return apps.find((app) => app.id === currentAppId) ?? null;\n    return resolveCurrentApp(apps, pathname);\n  }, [apps, currentAppId, pathname]);\n\n  const navGroups = useMemo(() => toNavGroups(nav), [nav]);\n  const labels = useMemo<ShellLabels>(() => ({ ...DEFAULT_SHELL_LABELS, ...labelsProp }), [labelsProp]);\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);\n  const [appLauncherOpen, setAppLauncherOpen] = useState(false);\n\n  // Nạp trạng thái đã lưu SAU khi mount (đọc localStorage lúc render đầu sẽ lệch hydration).\n  useEffect(() => {\n    if (!persistSidebarState) return;\n    const stored = readStoredCollapsed(currentWorkspace?.id);\n    if (stored !== null) setSidebarCollapsed(stored);\n  }, [persistSidebarState, currentWorkspace?.id]);\n\n  const persistCollapsed = useCallback(\n    (collapsed: boolean) => {\n      if (!persistSidebarState || typeof window === \"undefined\") return;\n      try {\n        window.localStorage.setItem(sidebarStorageKey(currentWorkspace?.id), collapsed ? \"1\" : \"0\");\n      } catch {\n        // Bỏ qua: không ghi được localStorage thì trạng thái chỉ sống trong phiên.\n      }\n    },\n    [persistSidebarState, currentWorkspace?.id]\n  );\n\n  const applySidebarCollapsed = useCallback(\n    (collapsed: boolean) => {\n      setSidebarCollapsed(collapsed);\n      persistCollapsed(collapsed);\n    },\n    [persistCollapsed]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarCollapsed((prev) => {\n      const next = !prev;\n      persistCollapsed(next);\n      return next;\n    });\n  }, [persistCollapsed]);\n\n  // Phím tắt toàn cục (§7.4)\n  useEffect(() => {\n    if (!enableShortcuts) return;\n\n    const entitledApps = getEntitledApps(apps);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const target = event.target;\n      // Đang gõ trong ô nhập → nhường phím cho ô nhập.\n      const isTyping =\n        target instanceof HTMLInputElement ||\n        target instanceof HTMLTextAreaElement ||\n        target instanceof HTMLSelectElement ||\n        (target instanceof HTMLElement && target.isContentEditable);\n\n      if (event.key === \"Escape\") {\n        setCommandPaletteOpen(false);\n        setMobileMenuOpen(false);\n        setAppLauncherOpen(false);\n        return;\n      }\n\n      if (isTyping) return;\n\n      const mod = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      // Cmd/Ctrl + Shift + K — AppLauncher (phải xét TRƯỚC Cmd+K vì cùng phím \"k\")\n      if (mod && event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setAppLauncherOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + K — Command Palette\n      if (mod && !event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setCommandPaletteOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + B — thu gọn/mở sidebar\n      if (mod && !event.shiftKey && key === \"b\") {\n        event.preventDefault();\n        toggleSidebar();\n        return;\n      }\n\n      // Alt + 1…9 — nhảy tới app thứ n đã được cấp quyền.\n      // Dùng `event.code` chứ không `event.key`: trên macOS Alt+1 cho ra \"¡\".\n      if (event.altKey && !event.ctrlKey && !event.metaKey) {\n        const match = /^Digit([1-9])$/.exec(event.code);\n        if (match?.[1]) {\n          const index = Number.parseInt(match[1], 10) - 1;\n          const app = entitledApps[index];\n          if (app) {\n            event.preventDefault();\n            onAppSelect?.(app);\n          }\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [enableShortcuts, apps, onAppSelect, toggleSidebar]);\n\n  // Đổi route → đóng mọi overlay đang mở.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chủ đích chạy theo MỌI lần đổi pathname\n  useEffect(() => {\n    setMobileMenuOpen(false);\n    setAppLauncherOpen(false);\n    setCommandPaletteOpen(false);\n  }, [pathname]);\n\n  const value = useMemo<ShellContextValue>(\n    () => ({\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      nav: navGroups,\n      pathname,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      setSidebarCollapsed: applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      setMobileMenuOpen,\n      commandPaletteOpen,\n      setCommandPaletteOpen,\n      appLauncherOpen,\n      setAppLauncherOpen,\n      labels\n    }),\n    [\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      navGroups,\n      pathname,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      commandPaletteOpen,\n      appLauncherOpen,\n      labels\n    ]\n  );\n\n  return (\n    <ShellContext.Provider value={value}>\n      <TooltipProvider delayDuration={200}>{children}</TooltipProvider>\n    </ShellContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/shell-context.tsx"],"sourcesContent":["\"use client\";\n\nimport NextLink from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport {\n  type AppDescriptor,\n  DEFAULT_SHELL_LABELS,\n  type NavGroup,\n  type ShellLabels,\n  type ShellLinkComponent,\n  type ShellLinkProps,\n  type ShellNav,\n  type ShellUser,\n  type Workspace\n} from \"./types.js\";\nimport { getEntitledApps, type NavSearchParams, resolveCurrentApp, toNavGroups, toSearchParams } from \"./utils.js\";\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Link mặc định\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Bọc `next/link` thay vì truyền thẳng: hình dạng props của NextLink rộng hơn\n * `ShellLinkProps` (href nhận cả UrlObject), bọc lại cho khớp type và để chỗ\n * thay adapter router khác về sau.\n */\nfunction DefaultShellLink({ href, children, ...props }: ShellLinkProps) {\n  return (\n    <NextLink href={href} {...props}>\n      {children}\n    </NextLink>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Context\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellContextValue {\n  /* Trục 1 — workspace */\n  workspaces: Workspace[];\n  currentWorkspace: Workspace | null;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /* Trục 2 — app */\n  apps: AppDescriptor[];\n  currentApp: AppDescriptor | null;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /* Điều hướng trong app hiện tại */\n  nav: NavGroup[];\n  pathname: string;\n  /**\n   * Query hiện tại đã chuẩn hoá, hoặc `null` khi app không truyền.\n   * `null` KHÁC rỗng: rỗng nghĩa là \"URL không có query\", `null` nghĩa là \"shell không biết\"\n   * — và active matching xử lý hai ca đó khác nhau (xem `isNavItemActive`).\n   */\n  searchParams: URLSearchParams | null;\n  LinkComponent: ShellLinkComponent;\n  onNavigate?: (href: string) => void;\n\n  /* Người dùng */\n  user: ShellUser | null;\n  onLogout?: () => void;\n\n  /* Trạng thái khung */\n  sidebarCollapsed: boolean;\n  setSidebarCollapsed: (collapsed: boolean) => void;\n  toggleSidebar: () => void;\n  mobileMenuOpen: boolean;\n  setMobileMenuOpen: (open: boolean) => void;\n  commandPaletteOpen: boolean;\n  setCommandPaletteOpen: (open: boolean) => void;\n  appLauncherOpen: boolean;\n  setAppLauncherOpen: (open: boolean) => void;\n\n  /* Chuỗi hiển thị (đã trộn mặc định tiếng Việt với override của app) */\n  labels: ShellLabels;\n}\n\nconst ShellContext = createContext<ShellContextValue | undefined>(undefined);\n\n/** Truy cập state của shell — phải gọi bên trong `<ShellProvider>`. */\nexport function useShell(): ShellContextValue {\n  const context = useContext(ShellContext);\n  if (!context) {\n    throw new Error(\"useShell phải được dùng bên trong <ShellProvider> (hoặc <AppShell>).\");\n  }\n  return context;\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Ghi nhớ trạng thái thu gọn sidebar\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Khoá localStorage theo workspace — mỗi workspace nhớ riêng trạng thái sidebar\n * (spec §7.6: KHÔNG dùng cookie `sidebar_state` của shadcn để tránh hai nguồn sự thật).\n */\nfunction sidebarStorageKey(workspaceId: string | undefined): string {\n  return `comitor-sidebar:${workspaceId ?? \"default\"}`;\n}\n\nfunction readStoredCollapsed(workspaceId: string | undefined): boolean | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(sidebarStorageKey(workspaceId));\n    if (raw === \"1\") return true;\n    if (raw === \"0\") return false;\n    return null;\n  } catch {\n    // Safari private mode / storage bị chặn — coi như chưa có giá trị lưu.\n    return null;\n  }\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Provider\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellProviderProps {\n  /** Trục 1 — danh sách workspace của user. Rỗng/1 phần tử thì WorkspaceSwitcher tự ẩn danh sách. */\n  workspaces?: Workspace[];\n  /** Workspace đang mở; bỏ trống → lấy phần tử đầu. */\n  currentWorkspaceId?: string;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /** Trục 2 — danh sách app của hệ sinh thái (kể cả app chưa mở khoá). */\n  apps?: AppDescriptor[];\n  /** App đang mở; bỏ trống → suy từ `pathname` (khớp prefix dài nhất). */\n  currentAppId?: string;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /** Menu của app hiện tại — `NavItem[]` hoặc `NavGroup[]`. */\n  nav?: ShellNav;\n  /**\n   * Ghi đè pathname (Storybook, app không-Next). Bỏ trống → dùng `usePathname()`\n   * của next/navigation (trả `null` khi không có App Router → coi như \"\").\n   */\n  pathname?: string;\n  /**\n   * Query hiện tại — CHỈ cần khi menu có mục phân biệt nhau bằng query\n   * (`/cai-dat?tab=chung` ⇄ `/cai-dat?tab=thanh-vien`). Bỏ trống thì mọi mục cùng đường dẫn\n   * cùng sáng.\n   *\n   * Nhận `useSearchParams()` của Next, chuỗi `\"?tab=x\"`, hoặc object `searchParams` của\n   * Server Component.\n   *\n   * ⚠ Shell KHÔNG tự gọi `useSearchParams()`: hook đó ép trang bọc `<Suspense>` và đẩy trang\n   * sang render phía client khi build tĩnh — cái giá đó phải do app tự chọn, không phải do\n   * việc lỡ import shell. Truyền vào từ một client component đã có sẵn boundary:\n   *\n   * ```tsx\n   * \"use client\";\n   * const searchParams = useSearchParams();\n   * return <AppShell searchParams={searchParams} …>{children}</AppShell>;\n   * ```\n   */\n  searchParams?: NavSearchParams | null;\n  /** Component link thay `next/link` (app không-Next). */\n  LinkComponent?: ShellLinkComponent;\n  /** Gọi sau mỗi lần người dùng bấm một mục điều hướng (analytics, đóng panel…). */\n  onNavigate?: (href: string) => void;\n\n  user?: ShellUser | null;\n  onLogout?: () => void;\n\n  /** Trạng thái thu gọn ban đầu (SSR). Sau khi mount, localStorage của workspace thắng. */\n  defaultSidebarCollapsed?: boolean;\n  /** Tắt ghi nhớ localStorage (Storybook, chế độ kiosk). */\n  persistSidebarState?: boolean;\n  /** Tắt bộ phím tắt toàn cục. */\n  enableShortcuts?: boolean;\n\n  /** Override chuỗi hiển thị (mặc định tiếng Việt). */\n  labels?: Partial<ShellLabels>;\n\n  children: ReactNode;\n}\n\n/**\n * Provider của app shell Comitor: giữ hai trục điều hướng (workspace × app),\n * trạng thái khung (sidebar/mobile/command palette/app launcher), phím tắt toàn cục,\n * và bọc sẵn `TooltipProvider`.\n *\n * KHÔNG dùng `useRouter()` của next/navigation: hook đó *ném lỗi* khi thiếu App Router\n * (Storybook, test). Mọi điều hướng chủ động là việc của app qua callback\n * `onWorkspaceChange` / `onAppSelect` / `onNavigate`; link tĩnh đi qua `LinkComponent`.\n */\nexport function ShellProvider({\n  workspaces = [],\n  currentWorkspaceId,\n  onWorkspaceChange,\n  onCreateWorkspace,\n  onWorkspaceSettings,\n  onInviteMembers,\n  apps = [],\n  currentAppId,\n  onAppSelect,\n  onUpsell,\n  nav,\n  pathname: pathnameProp,\n  searchParams: searchParamsProp,\n  LinkComponent = DefaultShellLink,\n  onNavigate,\n  user = null,\n  onLogout,\n  defaultSidebarCollapsed = false,\n  persistSidebarState = true,\n  enableShortcuts = true,\n  labels: labelsProp,\n  children\n}: ShellProviderProps) {\n  // `usePathname()` trả null khi không có App Router → fallback chuỗi rỗng thay vì crash.\n  const nextPathname = usePathname();\n  const pathname = pathnameProp ?? nextPathname ?? \"\";\n\n  // Chuẩn hoá MỘT lần ở đây thay vì mỗi lần `isNavItemActive` chạy: prop có thể là chuỗi\n  // hoặc object, mà mỗi lần dựng `URLSearchParams` mới là một identity mới → mọi memo bên\n  // dưới hỏng. Khoá memo là chính prop app truyền vào.\n  const searchParams = useMemo(() => toSearchParams(searchParamsProp), [searchParamsProp]);\n\n  const currentWorkspace = useMemo(\n    () => workspaces.find((workspace) => workspace.id === currentWorkspaceId) ?? workspaces[0] ?? null,\n    [workspaces, currentWorkspaceId]\n  );\n\n  const currentApp = useMemo(() => {\n    if (currentAppId) return apps.find((app) => app.id === currentAppId) ?? null;\n    return resolveCurrentApp(apps, pathname);\n  }, [apps, currentAppId, pathname]);\n\n  const navGroups = useMemo(() => toNavGroups(nav), [nav]);\n  const labels = useMemo<ShellLabels>(() => ({ ...DEFAULT_SHELL_LABELS, ...labelsProp }), [labelsProp]);\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);\n  const [appLauncherOpen, setAppLauncherOpen] = useState(false);\n\n  // Nạp trạng thái đã lưu SAU khi mount (đọc localStorage lúc render đầu sẽ lệch hydration).\n  useEffect(() => {\n    if (!persistSidebarState) return;\n    const stored = readStoredCollapsed(currentWorkspace?.id);\n    if (stored !== null) setSidebarCollapsed(stored);\n  }, [persistSidebarState, currentWorkspace?.id]);\n\n  const persistCollapsed = useCallback(\n    (collapsed: boolean) => {\n      if (!persistSidebarState || typeof window === \"undefined\") return;\n      try {\n        window.localStorage.setItem(sidebarStorageKey(currentWorkspace?.id), collapsed ? \"1\" : \"0\");\n      } catch {\n        // Bỏ qua: không ghi được localStorage thì trạng thái chỉ sống trong phiên.\n      }\n    },\n    [persistSidebarState, currentWorkspace?.id]\n  );\n\n  const applySidebarCollapsed = useCallback(\n    (collapsed: boolean) => {\n      setSidebarCollapsed(collapsed);\n      persistCollapsed(collapsed);\n    },\n    [persistCollapsed]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarCollapsed((prev) => {\n      const next = !prev;\n      persistCollapsed(next);\n      return next;\n    });\n  }, [persistCollapsed]);\n\n  // Phím tắt toàn cục (§7.4)\n  useEffect(() => {\n    if (!enableShortcuts) return;\n\n    const entitledApps = getEntitledApps(apps);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const target = event.target;\n      // Đang gõ trong ô nhập → nhường phím cho ô nhập.\n      const isTyping =\n        target instanceof HTMLInputElement ||\n        target instanceof HTMLTextAreaElement ||\n        target instanceof HTMLSelectElement ||\n        (target instanceof HTMLElement && target.isContentEditable);\n\n      if (event.key === \"Escape\") {\n        setCommandPaletteOpen(false);\n        setMobileMenuOpen(false);\n        setAppLauncherOpen(false);\n        return;\n      }\n\n      if (isTyping) return;\n\n      const mod = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      // Cmd/Ctrl + Shift + K — AppLauncher (phải xét TRƯỚC Cmd+K vì cùng phím \"k\")\n      if (mod && event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setAppLauncherOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + K — Command Palette\n      if (mod && !event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setCommandPaletteOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + B — thu gọn/mở sidebar\n      if (mod && !event.shiftKey && key === \"b\") {\n        event.preventDefault();\n        toggleSidebar();\n        return;\n      }\n\n      // Alt + 1…9 — nhảy tới app thứ n đã được cấp quyền.\n      // Dùng `event.code` chứ không `event.key`: trên macOS Alt+1 cho ra \"¡\".\n      if (event.altKey && !event.ctrlKey && !event.metaKey) {\n        const match = /^Digit([1-9])$/.exec(event.code);\n        if (match?.[1]) {\n          const index = Number.parseInt(match[1], 10) - 1;\n          const app = entitledApps[index];\n          if (app) {\n            event.preventDefault();\n            onAppSelect?.(app);\n          }\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [enableShortcuts, apps, onAppSelect, toggleSidebar]);\n\n  // Đổi route → đóng mọi overlay đang mở.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chủ đích chạy theo MỌI lần đổi pathname\n  useEffect(() => {\n    setMobileMenuOpen(false);\n    setAppLauncherOpen(false);\n    setCommandPaletteOpen(false);\n  }, [pathname]);\n\n  const value = useMemo<ShellContextValue>(\n    () => ({\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      nav: navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      setSidebarCollapsed: applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      setMobileMenuOpen,\n      commandPaletteOpen,\n      setCommandPaletteOpen,\n      appLauncherOpen,\n      setAppLauncherOpen,\n      labels\n    }),\n    [\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      commandPaletteOpen,\n      appLauncherOpen,\n      labels\n    ]\n  );\n\n  return (\n    <ShellContext.Provider value={value}>\n      <TooltipProvider delayDuration={200}>{children}</TooltipProvider>\n    </ShellContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/sidebar-group.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible.js";
 import { cn } from "../lib/cn.js";
 import { SidebarMenuItem } from "./sidebar-menu-item.js";
+const GROUP_LABEL_CLASS = "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground";
 function SidebarGroup({ group, collapsed = false, siblings = [], onNavigate, className }) {
   const collapsible = group.collapsible ?? Boolean(group.label);
   const [open, setOpen] = useState(!group.defaultCollapsed);
@@ -14,7 +15,7 @@ function SidebarGroup({ group, collapsed = false, siblings = [], onNavigate, cla
   }
   if (!group.label || !collapsible) {
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), role: "group", "aria-label": group.label, children: [
-      group.label ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-sidebar-foreground/45", children: group.label }) : null,
+      group.label ? /* @__PURE__ */ jsx("p", { className: cn("px-2 pb-1", GROUP_LABEL_CLASS), children: group.label }) : null,
       items
     ] });
   }
@@ -25,8 +26,9 @@ function SidebarGroup({ group, collapsed = false, siblings = [], onNavigate, cla
         type: "button",
         "aria-expanded": open,
         className: cn(
-          "group flex w-full items-center gap-1 rounded-md px-2 py-1 text-[11px] font-semibold uppercase tracking-wide",
-          "text-sidebar-foreground/45 transition-colors duration-150 ease-out hover:text-sidebar-foreground/80"
+          "group flex w-full items-center gap-1 rounded-md px-2 py-1",
+          GROUP_LABEL_CLASS,
+          "transition-colors duration-150 ease-out hover:text-sidebar-foreground"
         ),
         children: [
           /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-3 shrink-0 transition-transform duration-150", !open && "-rotate-90") }),

package/dist/shell/sidebar-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/sidebar-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../components/ui/collapsible.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { SidebarMenuItem } from \"./sidebar-menu-item.js\";\nimport type { NavGroup, NavItem } from \"./types.js\";\n\nexport interface SidebarGroupProps {\n  group: NavGroup;\n  /** Sidebar đang thu gọn — ẩn nhãn nhóm, chỉ còn dải icon. */\n  collapsed?: boolean;\n  /** Toàn bộ mục của app hiện tại — dùng cho active matching chính xác. */\n  siblings?: NavItem[];\n  /** Chuyển tiếp xuống từng mục — xem `SidebarMenuItemProps.onNavigate`. */\n  onNavigate?: () => void;\n  className?: string;\n}\n\n/**\n * Nhóm mục sidebar kiểu Linear: nhãn nhỏ in hoa, bấm nhãn để thu gọn cả nhóm.\n * Nhóm không có `label` (vd nhóm đầu tiên) render thẳng danh sách, không có phần đầu.\n */\nexport function SidebarGroup({ group, collapsed = false, siblings = [], onNavigate, className }: SidebarGroupProps) {\n  const collapsible = group.collapsible ?? Boolean(group.label);\n  const [open, setOpen] = useState(!group.defaultCollapsed);\n\n  const items = (\n    <div className=\"flex flex-col gap-0.5\">\n      {group.items.map((item) => (\n        <SidebarMenuItem key={item.id} item={item} collapsed={collapsed} siblings={siblings} onNavigate={onNavigate} />\n      ))}\n    </div>\n  );\n\n  // Thu gọn: nhãn không còn chỗ, chỉ giữ khoảng cách giữa các nhóm.\n  if (collapsed) {\n    return (\n      <div className={cn(\"flex flex-col items-center gap-0.5\", className)} role=\"group\" aria-label={group.label}>\n        {group.items.map((item) => (\n          <SidebarMenuItem key={item.id} item={item} collapsed siblings={siblings} onNavigate={onNavigate} />\n        ))}\n      </div>\n    );\n  }\n\n  if (!group.label || !collapsible) {\n    return (\n      <div className={cn(\"flex flex-col\", className)} role=\"group\" aria-label={group.label}>\n        {group.label ? (\n          <p className=\"px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-sidebar-foreground/45\">\n            {group.label}\n          </p>\n        ) : null}\n        {items}\n      </div>\n    );\n  }\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} className={cn(\"flex flex-col\", className)}>\n      <CollapsibleTrigger asChild>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          className={cn(\n            \"group flex w-full items-center gap-1 rounded-md px-2 py-1 text-[11px] font-semibold uppercase tracking-wide\",\n            \"text-sidebar-foreground/45 transition-colors duration-150 ease-out hover:text-sidebar-foreground/80\"\n          )}\n        >\n          <ChevronDown className={cn(\"size-3 shrink-0 transition-transform duration-150\", !open && \"-rotate-90\")} />\n          <span className=\"truncate\">{group.label}</span>\n        </button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        <div className=\"pt-0.5\">{items}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"mappings":";AA+BQ,cAkBF,YAlBE;AA7BR,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,aAAa,oBAAoB,0BAA0B;AACpE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAkBzB,SAAS,aAAa,EAAE,OAAO,YAAY,OAAO,WAAW,CAAC,GAAG,YAAY,UAAU,GAAsB;AAClH,QAAM,cAAc,MAAM,eAAe,QAAQ,MAAM,KAAK;AAC5D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC,MAAM,gBAAgB;AAExD,QAAM,QACJ,oBAAC,SAAI,WAAU,yBACZ,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,mBAA8B,MAAY,WAAsB,UAAoB,cAA/D,KAAK,EAAkF,CAC9G,GACH;AAIF,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,sCAAsC,SAAS,GAAG,MAAK,SAAQ,cAAY,MAAM,OACjG,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,mBAA8B,MAAY,WAAS,MAAC,UAAoB,cAAnD,KAAK,EAAsE,CAClG,GACH;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM,SAAS,CAAC,aAAa;AAChC,WACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAAG,MAAK,SAAQ,cAAY,MAAM,OAC5E;AAAA,YAAM,QACL,oBAAC,OAAE,WAAU,0FACV,gBAAM,OACT,IACE;AAAA,MACH;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,eAAY,MAAY,cAAc,SAAS,WAAW,GAAG,iBAAiB,SAAS,GACtF;AAAA,wBAAC,sBAAmB,SAAO,MACzB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,eAAY,WAAW,GAAG,qDAAqD,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxG,oBAAC,UAAK,WAAU,YAAY,gBAAM,OAAM;AAAA;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,oBAAC,sBAAmB,WAAU,yGAC5B,8BAAC,SAAI,WAAU,UAAU,iBAAM,GACjC;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/sidebar-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../components/ui/collapsible.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { SidebarMenuItem } from \"./sidebar-menu-item.js\";\nimport type { NavGroup, NavItem } from \"./types.js\";\n\n/**\n * Màu nhãn nhóm — `--muted-foreground`, KHÔNG phải `text-sidebar-foreground/45`.\n *\n * Nhãn nhóm là CHỮ (11px in hoa) nên chịu ngưỡng AA **4,5:1**, mà `/45` chỉ được **3,02:1**\n * ở light (`#909193` trên `--sidebar` #FAFAF9) và **4,26:1** ở dark — hỏng ở CẢ HAI theme,\n * light thì hỏng nặng. `--muted-foreground` là bậc chữ phụ đã đo cho đúng vai trò này:\n * **5,01:1** (light) · **5,35:1** (dark) trên `--sidebar` ✓.\n *\n * Hover thì lên thẳng `--sidebar-foreground` (18,11:1 light · 16,59:1 dark) thay cho `/80`.\n */\nconst GROUP_LABEL_CLASS = \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\";\n\nexport interface SidebarGroupProps {\n  group: NavGroup;\n  /** Sidebar đang thu gọn — ẩn nhãn nhóm, chỉ còn dải icon. */\n  collapsed?: boolean;\n  /** Toàn bộ mục của app hiện tại — dùng cho active matching chính xác. */\n  siblings?: NavItem[];\n  /** Chuyển tiếp xuống từng mục — xem `SidebarMenuItemProps.onNavigate`. */\n  onNavigate?: () => void;\n  className?: string;\n}\n\n/**\n * Nhóm mục sidebar kiểu Linear: nhãn nhỏ in hoa, bấm nhãn để thu gọn cả nhóm.\n * Nhóm không có `label` (vd nhóm đầu tiên) render thẳng danh sách, không có phần đầu.\n */\nexport function SidebarGroup({ group, collapsed = false, siblings = [], onNavigate, className }: SidebarGroupProps) {\n  const collapsible = group.collapsible ?? Boolean(group.label);\n  const [open, setOpen] = useState(!group.defaultCollapsed);\n\n  const items = (\n    <div className=\"flex flex-col gap-0.5\">\n      {group.items.map((item) => (\n        <SidebarMenuItem key={item.id} item={item} collapsed={collapsed} siblings={siblings} onNavigate={onNavigate} />\n      ))}\n    </div>\n  );\n\n  // Thu gọn: nhãn không còn chỗ, chỉ giữ khoảng cách giữa các nhóm.\n  if (collapsed) {\n    return (\n      <div className={cn(\"flex flex-col items-center gap-0.5\", className)} role=\"group\" aria-label={group.label}>\n        {group.items.map((item) => (\n          <SidebarMenuItem key={item.id} item={item} collapsed siblings={siblings} onNavigate={onNavigate} />\n        ))}\n      </div>\n    );\n  }\n\n  if (!group.label || !collapsible) {\n    return (\n      <div className={cn(\"flex flex-col\", className)} role=\"group\" aria-label={group.label}>\n        {group.label ? <p className={cn(\"px-2 pb-1\", GROUP_LABEL_CLASS)}>{group.label}</p> : null}\n        {items}\n      </div>\n    );\n  }\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} className={cn(\"flex flex-col\", className)}>\n      <CollapsibleTrigger asChild>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          className={cn(\n            \"group flex w-full items-center gap-1 rounded-md px-2 py-1\",\n            GROUP_LABEL_CLASS,\n            \"transition-colors duration-150 ease-out hover:text-sidebar-foreground\"\n          )}\n        >\n          <ChevronDown className={cn(\"size-3 shrink-0 transition-transform duration-150\", !open && \"-rotate-90\")} />\n          <span className=\"truncate\">{group.label}</span>\n        </button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        <div className=\"pt-0.5\">{items}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"mappings":";AA2CQ,cAkBF,YAlBE;AAzCR,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,aAAa,oBAAoB,0BAA0B;AACpE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAahC,MAAM,oBAAoB;AAiBnB,SAAS,aAAa,EAAE,OAAO,YAAY,OAAO,WAAW,CAAC,GAAG,YAAY,UAAU,GAAsB;AAClH,QAAM,cAAc,MAAM,eAAe,QAAQ,MAAM,KAAK;AAC5D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC,MAAM,gBAAgB;AAExD,QAAM,QACJ,oBAAC,SAAI,WAAU,yBACZ,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,mBAA8B,MAAY,WAAsB,UAAoB,cAA/D,KAAK,EAAkF,CAC9G,GACH;AAIF,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,sCAAsC,SAAS,GAAG,MAAK,SAAQ,cAAY,MAAM,OACjG,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,mBAA8B,MAAY,WAAS,MAAC,UAAoB,cAAnD,KAAK,EAAsE,CAClG,GACH;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM,SAAS,CAAC,aAAa;AAChC,WACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAAG,MAAK,SAAQ,cAAY,MAAM,OAC5E;AAAA,YAAM,QAAQ,oBAAC,OAAE,WAAW,GAAG,aAAa,iBAAiB,GAAI,gBAAM,OAAM,IAAO;AAAA,MACpF;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,eAAY,MAAY,cAAc,SAAS,WAAW,GAAG,iBAAiB,SAAS,GACtF;AAAA,wBAAC,sBAAmB,SAAO,MACzB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,eAAY,WAAW,GAAG,qDAAqD,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxG,oBAAC,UAAK,WAAU,YAAY,gBAAM,OAAM;AAAA;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,oBAAC,sBAAmB,WAAU,yGAC5B,8BAAC,SAAI,WAAU,UAAU,iBAAM,GACjC;AAAA,KACF;AAEJ;","names":[]}

package/dist/shell/sidebar-menu-item.js

@@ -24,9 +24,9 @@ function SidebarMenuItem({
   onNavigate,
   className
 }) {
-  const { pathname } = useShell();
-  const active = isNavItemActive(item, pathname, siblings);
-  const branchActive = isNavBranchActive(item, pathname, siblings);
+  const { pathname, searchParams } = useShell();
+  const active = isNavItemActive(item, pathname, siblings, searchParams);
+  const branchActive = isNavBranchActive(item, pathname, siblings, searchParams);
   const hasChildren = Boolean(item.children?.length);
   const [open, setOpen] = useState(branchActive);
   useEffect(() => {
@@ -42,12 +42,19 @@ function SidebarMenuItem({
     rowActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground/70",
     // Mục đã khoá thì KHÔNG gắn hover — đổi màu khi rê chuột là hứa hẹn bấm được.
     !disabled && !rowActive && "hover:bg-sidebar-accent/60 hover:text-sidebar-foreground",
-    disabled && "cursor-not-allowed opacity-50",
+    // Mục khoá tô bằng MỘT bậc chữ mờ hơn, KHÔNG phải `opacity-50` chồng lên màu sẵn có.
+    // Vì sao: mục khoá vẫn nằm trong tab order (`role="link" aria-disabled tabIndex={0}` — xem
+    // chú thích FOCUS_RING) nên KHÔNG được hưởng miễn trừ "thành phần vô hiệu" của WCAG 1.4.3,
+    // mà `opacity-50` chồng lên `text-sidebar-foreground/70` cho độ mờ thực 35% → 2,28:1 (light)
+    // / 3,10:1 (dark) ✗ cho chữ, và 27,5% trên icon → 1,86:1 / 2,39:1 ✗.
+    // `--muted-foreground` là bậc chữ phụ đã đo cho đúng vai trò này: 5,01:1 (light) / 5,35:1
+    // (dark) trên `--sidebar` ✓. Tín hiệu "khoá" vẫn còn nguyên ở con trỏ và ở `aria-disabled`.
+    disabled && "cursor-not-allowed text-muted-foreground",
     className
   );
   const iconClass = cn(
     "size-4 shrink-0",
-    active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/55 group-hover:text-sidebar-foreground"
+    active ? "text-sidebar-accent-foreground" : disabled ? "text-muted-foreground" : "text-sidebar-foreground/55 group-hover:text-sidebar-foreground"
   );
   const activeMark = /* @__PURE__ */ jsx("span", { className: "absolute inset-y-1 left-0 w-0.5 rounded-r-full bg-sidebar-accent-foreground" });
   const badge = item.badge === void 0 || item.badge === null || item.badge === "" ? null : /* @__PURE__ */ jsx(Badge, { variant: BADGE_VARIANT[item.badgeVariant ?? "default"], size: "sm", className: "ml-auto shrink-0", children: item.badge });
@@ -57,7 +64,8 @@ function SidebarMenuItem({
       "transition-colors duration-150 ease-out",
       active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70",
       !disabled && !active && "hover:bg-sidebar-accent/60 hover:text-sidebar-foreground",
-      disabled && "cursor-not-allowed opacity-50"
+      // Cùng lý do với `rowClass` ở trên: bậc chữ mờ hơn thay cho `opacity-50`.
+      disabled && "cursor-not-allowed text-muted-foreground"
     );
     const tileBody = /* @__PURE__ */ jsxs(Fragment, { children: [
       Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : null,
@@ -127,7 +135,7 @@ function SidebarMenuItem({
         ChevronRight,
         {
           className: cn(
-            "ml-auto size-3.5 shrink-0 text-sidebar-foreground/40 transition-transform duration-150",
+            "ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform duration-150",
             badge && "ml-1",
             open && "rotate-90"
           )