@comitor/ui 0.1.0

package/dist/shell/app-launcher.js

@@ -0,0 +1,189 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { LayoutGrid, Lock } from "lucide-react";
+import { useRef } from "react";
+import { Badge } from "../components/ui/badge.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useShell } from "./shell-context.js";
+import { ShellNavLink } from "./shell-link.js";
+import { appAccentStyle, getEntitledApps, getLockedApps } from "./utils.js";
+const TILE_ATTR = "data-app-tile";
+function AppLauncherPanel({ variant = "grid", className, onSelected }) {
+  const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();
+  const entitled = getEntitledApps(apps);
+  const locked = getLockedApps(apps);
+  const total = entitled.length + locked.length;
+  const rootRef = useRef(null);
+  const columns = variant === "grid" ? 3 : 1;
+  const handleKeyDown = (event) => {
+    const root = rootRef.current;
+    if (!root) return;
+    const tiles = Array.from(root.querySelectorAll(`[${TILE_ATTR}]`));
+    const index = tiles.indexOf(event.currentTarget);
+    if (index < 0) return;
+    const moves = {
+      ArrowRight: index + 1,
+      ArrowLeft: index - 1,
+      ArrowDown: index + columns,
+      ArrowUp: index - columns,
+      Home: 0,
+      End: tiles.length - 1
+    };
+    const next = moves[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    tiles[Math.max(0, Math.min(tiles.length - 1, next))]?.focus();
+  };
+  const renderTile = (app) => {
+    const isLocked = app.entitled === false;
+    const isCurrent = app.id === currentApp?.id;
+    const Icon = app.icon;
+    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",
+      isCurrent && "bg-accent"
+    );
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          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"
+          ),
+          style: appAccentStyle(app),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+            isLocked ? /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(Lock, { className: "size-2.5" }) }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-col", variant === "list" && "flex-1"), children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: app.name }),
+          app.badge ? /* @__PURE__ */ jsx(Badge, { variant: "destructive", size: "sm", children: app.badge }) : null
+        ] }),
+        app.description ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("text-[11px] leading-snug text-muted-foreground", variant === "grid" && "line-clamp-2"),
+            children: app.description
+          }
+        ) : null
+      ] })
+    ] });
+    if (isLocked) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-app-tile": "",
+          title: labels.lockedHint,
+          "aria-label": `${app.name} \u2014 ${labels.locked}`,
+          className: tileClass,
+          onKeyDown: handleKeyDown,
+          onClick: () => {
+            onUpsell?.(app.id);
+            onSelected?.();
+          },
+          children: body
+        },
+        app.id
+      );
+    }
+    if (onAppSelect) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-app-tile": "",
+          "aria-current": isCurrent ? "page" : void 0,
+          className: tileClass,
+          onKeyDown: handleKeyDown,
+          onClick: () => {
+            onAppSelect(app);
+            onSelected?.();
+          },
+          children: body
+        },
+        app.id
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ShellNavLink,
+      {
+        href: app.href,
+        "data-app-tile": "",
+        "aria-current": isCurrent ? "page" : void 0,
+        className: tileClass,
+        onKeyDown: handleKeyDown,
+        onClick: () => onSelected?.(),
+        children: body
+      },
+      app.id
+    );
+  };
+  if (total === 0) return null;
+  const groupClass = variant === "grid" ? "grid grid-cols-3 gap-1" : "flex flex-col gap-0.5";
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("flex flex-col gap-3", className), children: [
+    entitled.length > 0 ? /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("p", { className: "px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: labels.myApps }),
+      /* @__PURE__ */ jsx("div", { className: groupClass, children: entitled.map(renderTile) })
+    ] }) : null,
+    locked.length > 0 ? /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("p", { className: "px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: labels.discoverApps }),
+      /* @__PURE__ */ jsx("div", { className: groupClass, children: locked.map(renderTile) })
+    ] }) : null
+  ] });
+}
+function AppLauncher({
+  className,
+  variant = "grid",
+  inline = false,
+  align = "end",
+  onSelected
+}) {
+  const { apps, appLauncherOpen, setAppLauncherOpen, labels } = useShell();
+  if (apps.length === 0) return null;
+  if (inline) {
+    return /* @__PURE__ */ jsx(AppLauncherPanel, { variant, className, onSelected });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: appLauncherOpen, onOpenChange: setAppLauncherOpen, children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": labels.appLauncherLabel,
+          className: cn(
+            "flex size-9 items-center justify-center rounded-md text-muted-foreground",
+            "transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground",
+            appLauncherOpen && "bg-muted text-foreground",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: labels.apps })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverContent, { align, sideOffset: 8, className: "w-[22rem] p-2", children: /* @__PURE__ */ jsx(
+      AppLauncherPanel,
+      {
+        variant,
+        onSelected: () => {
+          setAppLauncherOpen(false);
+          onSelected?.();
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  AppLauncher,
+  AppLauncherPanel
+};
+//# sourceMappingURL=app-launcher.js.map

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

@@ -0,0 +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":"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","names":[]}

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { AppHeaderProps } from './app-header.js';
+import { MobileMenuProps } from './mobile-menu.js';
+import { ShellProviderProps } from './shell-context.js';
+import { SidebarProps } from './sidebar.js';
+import './user-menu.js';
+import './types.js';
+import 'lucide-react';
+
+type AppShellLayout = "sidebar-first" | "header-first";
+interface AppShellProps extends ShellProviderProps {
+    /**
+     * "sidebar-first" (mặc định) — sidebar cao hết màn hình, header nằm bên phải nó
+     *   (kiểu Linear/Lark: WorkspaceSwitcher ở đỉnh sidebar).
+     * "header-first" — header full width trên cùng, sidebar nằm dưới
+     *   (WorkspaceSwitcher chuyển lên header).
+     */
+    layout?: AppShellLayout;
+    /** Ẩn sidebar hoàn toàn (app một khu, chỉ có header). */
+    showSidebar?: boolean;
+    headerProps?: AppHeaderProps;
+    sidebarProps?: SidebarProps;
+    mobileMenuProps?: MobileMenuProps;
+    /**
+     * Slot Command Palette — app tự render (dữ liệu tìm kiếm là của app),
+     * đọc/ghi trạng thái qua `useShell().commandPaletteOpen`.
+     */
+    commandPaletteSlot?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * Khung ứng dụng lắp sẵn: `ShellProvider` + `Sidebar` + `AppHeader` + `<main>` + `MobileMenu`.
+ *
+ * ⚠ Bọc app bằng `<ThemeProvider>` ở **root layout**, NGOÀI `<AppShell>` — next-themes
+ * cần nằm trên cùng để tránh nháy theme lúc hydrate.
+ *
+ * Có `"use client"`: mọi callback (`onLogout`, `onWorkspaceChange`…) là hàm nên nơi
+ * render `<AppShell>` phải là client component.
+ */
+declare function AppShell({ layout, showSidebar, headerProps, sidebarProps, mobileMenuProps, commandPaletteSlot, className, contentClassName, children, ...providerProps }: AppShellProps): React.JSX.Element;
+
+export { AppShell, type AppShellLayout, type AppShellProps };

package/dist/shell/app-shell.js

@@ -0,0 +1,99 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { AppHeader } from "./app-header.js";
+import { MobileMenu } from "./mobile-menu.js";
+import { ShellProvider, useShell } from "./shell-context.js";
+import { Sidebar } from "./sidebar.js";
+import { appAccentStyle } from "./utils.js";
+import { WorkspaceSwitcher } from "./workspace-switcher.js";
+function AppShell({
+  layout = "sidebar-first",
+  showSidebar = true,
+  headerProps,
+  sidebarProps,
+  mobileMenuProps,
+  commandPaletteSlot,
+  className,
+  contentClassName,
+  children,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx(ShellProvider, { ...providerProps, children: /* @__PURE__ */ jsx(
+    AppShellFrame,
+    {
+      layout,
+      showSidebar,
+      headerProps,
+      sidebarProps,
+      mobileMenuProps,
+      commandPaletteSlot,
+      className,
+      contentClassName,
+      children
+    }
+  ) });
+}
+function AppShellFrame({
+  layout = "sidebar-first",
+  showSidebar = true,
+  headerProps,
+  sidebarProps,
+  mobileMenuProps,
+  commandPaletteSlot,
+  className,
+  contentClassName,
+  children
+}) {
+  const { currentApp } = useShell();
+  const headerFirst = layout === "header-first";
+  const header = /* @__PURE__ */ jsx(
+    AppHeader,
+    {
+      ...headerProps,
+      showSidebarToggle: headerProps?.showSidebarToggle ?? headerFirst,
+      logo: headerProps?.logo ?? (headerFirst ? /* @__PURE__ */ jsx(WorkspaceSwitcher, { className: "w-56 shrink-0" }) : void 0)
+    }
+  );
+  const sidebar = showSidebar ? /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      ...sidebarProps,
+      showWorkspaceSwitcher: sidebarProps?.showWorkspaceSwitcher ?? !headerFirst,
+      showCollapseButton: sidebarProps?.showCollapseButton ?? !headerFirst
+    }
+  ) : null;
+  const main = /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto bg-background", contentClassName), children });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: appAccentStyle(currentApp),
+      className: cn(
+        "flex h-dvh w-full overflow-hidden bg-background",
+        headerFirst ? "flex-col" : "flex-row",
+        className
+      ),
+      children: [
+        headerFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          header,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+            sidebar,
+            main
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          sidebar,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            header,
+            main
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(MobileMenu, { ...mobileMenuProps }),
+        commandPaletteSlot
+      ]
+    }
+  );
+}
+export {
+  AppShell
+};
+//# sourceMappingURL=app-shell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/app-shell.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppHeader, type AppHeaderProps } from \"./app-header.js\";\nimport { MobileMenu, type MobileMenuProps } from \"./mobile-menu.js\";\nimport { ShellProvider, type ShellProviderProps, useShell } from \"./shell-context.js\";\nimport { Sidebar, type SidebarProps } from \"./sidebar.js\";\nimport { appAccentStyle } from \"./utils.js\";\nimport { WorkspaceSwitcher } from \"./workspace-switcher.js\";\n\nexport type AppShellLayout = \"sidebar-first\" | \"header-first\";\n\nexport interface AppShellProps extends ShellProviderProps {\n  /**\n   * \"sidebar-first\" (mặc định) — sidebar cao hết màn hình, header nằm bên phải nó\n   *   (kiểu Linear/Lark: WorkspaceSwitcher ở đỉnh sidebar).\n   * \"header-first\" — header full width trên cùng, sidebar nằm dưới\n   *   (WorkspaceSwitcher chuyển lên header).\n   */\n  layout?: AppShellLayout;\n  /** Ẩn sidebar hoàn toàn (app một khu, chỉ có header). */\n  showSidebar?: boolean;\n  headerProps?: AppHeaderProps;\n  sidebarProps?: SidebarProps;\n  mobileMenuProps?: MobileMenuProps;\n  /**\n   * Slot Command Palette — app tự render (dữ liệu tìm kiếm là của app),\n   * đọc/ghi trạng thái qua `useShell().commandPaletteOpen`.\n   */\n  commandPaletteSlot?: ReactNode;\n  className?: string;\n  contentClassName?: string;\n}\n\n/**\n * Khung ứng dụng lắp sẵn: `ShellProvider` + `Sidebar` + `AppHeader` + `<main>` + `MobileMenu`.\n *\n * ⚠ Bọc app bằng `<ThemeProvider>` ở **root layout**, NGOÀI `<AppShell>` — next-themes\n * cần nằm trên cùng để tránh nháy theme lúc hydrate.\n *\n * Có `\"use client\"`: mọi callback (`onLogout`, `onWorkspaceChange`…) là hàm nên nơi\n * render `<AppShell>` phải là client component.\n */\nexport function AppShell({\n  layout = \"sidebar-first\",\n  showSidebar = true,\n  headerProps,\n  sidebarProps,\n  mobileMenuProps,\n  commandPaletteSlot,\n  className,\n  contentClassName,\n  children,\n  ...providerProps\n}: AppShellProps) {\n  return (\n    <ShellProvider {...providerProps}>\n      <AppShellFrame\n        layout={layout}\n        showSidebar={showSidebar}\n        headerProps={headerProps}\n        sidebarProps={sidebarProps}\n        mobileMenuProps={mobileMenuProps}\n        commandPaletteSlot={commandPaletteSlot}\n        className={className}\n        contentClassName={contentClassName}\n      >\n        {children}\n      </AppShellFrame>\n    </ShellProvider>\n  );\n}\n\ntype AppShellFrameProps = Pick<\n  AppShellProps,\n  | \"layout\"\n  | \"showSidebar\"\n  | \"headerProps\"\n  | \"sidebarProps\"\n  | \"mobileMenuProps\"\n  | \"commandPaletteSlot\"\n  | \"className\"\n  | \"contentClassName\"\n> & { children: ReactNode };\n\n/**\n * Phần khung thật sự — tách khỏi `AppShell` vì cần `useShell()` (phải ở TRONG provider)\n * để gán `--app-accent` của app đang mở cho cả cây.\n */\nfunction AppShellFrame({\n  layout = \"sidebar-first\",\n  showSidebar = true,\n  headerProps,\n  sidebarProps,\n  mobileMenuProps,\n  commandPaletteSlot,\n  className,\n  contentClassName,\n  children\n}: AppShellFrameProps) {\n  const { currentApp } = useShell();\n  const headerFirst = layout === \"header-first\";\n\n  // Ở header-first, bộ chuyển workspace chuyển lên header — nếu để cả hai chỗ\n  // thì người dùng thấy hai nút giống hệt nhau.\n  // Spread TRƯỚC rồi mới đặt giá trị mặc định, nếu không `{...headerProps}` sẽ ghi đè\n  // bằng `undefined` và giá trị mặc định tính ở trên thành công cốc.\n  const header = (\n    <AppHeader\n      {...headerProps}\n      showSidebarToggle={headerProps?.showSidebarToggle ?? headerFirst}\n      logo={headerProps?.logo ?? (headerFirst ? <WorkspaceSwitcher className=\"w-56 shrink-0\" /> : undefined)}\n    />\n  );\n\n  const sidebar = showSidebar ? (\n    <Sidebar\n      {...sidebarProps}\n      showWorkspaceSwitcher={sidebarProps?.showWorkspaceSwitcher ?? !headerFirst}\n      showCollapseButton={sidebarProps?.showCollapseButton ?? !headerFirst}\n    />\n  ) : null;\n\n  const main = <main className={cn(\"flex-1 overflow-y-auto bg-background\", contentClassName)}>{children}</main>;\n\n  return (\n    <div\n      style={appAccentStyle(currentApp)}\n      className={cn(\n        \"flex h-dvh w-full overflow-hidden bg-background\",\n        headerFirst ? \"flex-col\" : \"flex-row\",\n        className\n      )}\n    >\n      {headerFirst ? (\n        <>\n          {header}\n          <div className=\"flex min-h-0 flex-1\">\n            {sidebar}\n            {main}\n          </div>\n        </>\n      ) : (\n        <>\n          {sidebar}\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {header}\n            {main}\n          </div>\n        </>\n      )}\n\n      <MobileMenu {...mobileMenuProps} />\n      {commandPaletteSlot}\n    </div>\n  );\n}\n"],"mappings":";AA0DM,SA8EE,UA9EF,KAgFI,YAhFJ;AAvDN,SAAS,UAAU;AACnB,SAAS,iBAAsC;AAC/C,SAAS,kBAAwC;AACjD,SAAS,eAAwC,gBAAgB;AACjE,SAAS,eAAkC;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAmC3B,SAAS,SAAS;AAAA,EACvB,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,SACE,oBAAC,iBAAe,GAAG,eACjB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAkBA,SAAS,cAAc;AAAA,EACrB,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,EAAE,WAAW,IAAI,SAAS;AAChC,QAAM,cAAc,WAAW;AAM/B,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAmB,aAAa,qBAAqB;AAAA,MACrD,MAAM,aAAa,SAAS,cAAc,oBAAC,qBAAkB,WAAU,iBAAgB,IAAK;AAAA;AAAA,EAC9F;AAGF,QAAM,UAAU,cACd;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,uBAAuB,cAAc,yBAAyB,CAAC;AAAA,MAC/D,oBAAoB,cAAc,sBAAsB,CAAC;AAAA;AAAA,EAC3D,IACE;AAEJ,QAAM,OAAO,oBAAC,UAAK,WAAW,GAAG,wCAAwC,gBAAgB,GAAI,UAAS;AAEtG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,aAAa;AAAA,QAC3B;AAAA,MACF;AAAA,MAEC;AAAA,sBACC,iCACG;AAAA;AAAA,UACD,qBAAC,SAAI,WAAU,uBACZ;AAAA;AAAA,YACA;AAAA,aACH;AAAA,WACF,IAEA,iCACG;AAAA;AAAA,UACD,qBAAC,SAAI,WAAU,gCACZ;AAAA;AAAA,YACA;AAAA,aACH;AAAA,WACF;AAAA,QAGF,oBAAC,cAAY,GAAG,iBAAiB;AAAA,QAChC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/shell/comitor-lockup.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+/**
+ * Lockup ngang chính thức của Comitor — icon bên trái, wordmark + gạch vàng + slogan bên phải.
+ * Giữ đúng tỉ lệ hình học của brand book để mọi bề mặt sản phẩm dùng chung một bố cục.
+ *
+ *   <ComitorLockup variant="auto" size="xs" slogan="Tasks" />
+ *
+ *  • `variant` — light (nền trắng/kem), dark (nền mực/ấm), auto (tự đổi theo theme).
+ *  • `size`    — xs | sm | md | lg: đổi cỡ icon và cỡ chữ cùng lúc.
+ *  • `wordmark` / `slogan` — đổi chữ khi cần cặp ngôn ngữ khác
+ *    (vd "COMITOR TASKS", "THIỆN MINH / CÙNG NHAU TIẾN XA").
+ *
+ * Không có "use client": thuần trình bày, RSC render được.
+ */
+type ComitorLockupVariant = "light" | "dark" | "auto";
+type ComitorLockupSize = "xs" | "sm" | "md" | "lg";
+interface ComitorLockupProps {
+    className?: string;
+    variant?: ComitorLockupVariant;
+    size?: ComitorLockupSize;
+    wordmark?: string;
+    slogan?: string;
+    /** Class Tailwind GHI ĐÈ style slogan của preset cỡ chữ. Dùng khi cần căn bề rộng
+     *  slogan tuỳ biến cho khớp wordmark — vd header truyền cỡ nhỉnh hơn + tracking chặt
+     *  hơn để "DESIGN SYSTEM" rộng đúng bằng chữ "COMITOR". */
+    sloganClassName?: string;
+    style?: CSSProperties;
+}
+declare function ComitorLockup({ className, variant, size, wordmark, slogan, sloganClassName, style }: ComitorLockupProps): React.JSX.Element;
+
+export { ComitorLockup, type ComitorLockupProps, type ComitorLockupSize, type ComitorLockupVariant };

package/dist/shell/comitor-lockup.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { ComitorLogo } from "./comitor-logo.js";
+const SIZE_MAP = {
+  xs: {
+    icon: "w-9 h-9",
+    // 36px — vừa header cao 56px
+    gap: "gap-2.5",
+    wordmark: "text-sm",
+    // 14px
+    slogan: "text-[6px] tracking-[0.12em]",
+    //  6px
+    ruleMargin: "my-0.5"
+  },
+  sm: {
+    icon: "w-12 h-12",
+    // 48px
+    gap: "gap-3",
+    wordmark: "text-base",
+    // 16px
+    slogan: "text-[7px] tracking-[0.12em]",
+    //  ~7px
+    ruleMargin: "my-1"
+  },
+  md: {
+    icon: "w-20 h-20",
+    // 80px
+    gap: "gap-4",
+    wordmark: "text-2xl",
+    // 24px
+    slogan: "text-[10px] tracking-[0.12em]",
+    // 10px
+    ruleMargin: "my-1.5"
+  },
+  lg: {
+    icon: "w-32 h-32",
+    // 128px
+    gap: "gap-5",
+    wordmark: "text-4xl",
+    // 36px
+    slogan: "text-[14px] tracking-[0.14em]",
+    // 14px
+    ruleMargin: "my-2"
+  }
+};
+function ComitorLockup({
+  className,
+  variant = "light",
+  size = "md",
+  wordmark = "COMITOR",
+  slogan = "Together Further",
+  sloganClassName,
+  style
+}) {
+  const s = SIZE_MAP[size];
+  const dark = variant === "dark";
+  const auto = variant === "auto";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center", s.gap, className),
+      style,
+      role: "img",
+      "aria-label": `${wordmark} \u2014 ${slogan}`,
+      children: [
+        auto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ComitorLogo, { variant: "light", className: cn("shrink-0", s.icon, "dark:hidden") }),
+          /* @__PURE__ */ jsx(ComitorLogo, { variant: "dark", className: cn("shrink-0", s.icon, "hidden dark:block") })
+        ] }) : /* @__PURE__ */ jsx(ComitorLogo, { variant: dark ? "dark" : "light", className: cn("shrink-0", s.icon) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-extrabold tracking-tight leading-none",
+                s.wordmark,
+                auto ? "text-ink dark:text-white" : dark ? "text-white" : "text-ink"
+              ),
+              children: wordmark
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "h-px opacity-55",
+                s.ruleMargin,
+                auto ? "bg-gold-400 dark:bg-gold-200" : dark ? "bg-gold-200" : "bg-gold-400"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-semibold uppercase",
+                sloganClassName ?? s.slogan,
+                auto ? "text-gold-500 dark:text-gold-200" : dark ? "text-gold-200" : "text-gold-500"
+              ),
+              children: slogan
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ComitorLockup
+};
+//# sourceMappingURL=comitor-lockup.js.map

package/dist/shell/comitor-lockup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/comitor-lockup.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { ComitorLogo } from \"./comitor-logo.js\";\n\n/**\n * Lockup ngang chính thức của Comitor — icon bên trái, wordmark + gạch vàng + slogan bên phải.\n * Giữ đúng tỉ lệ hình học của brand book để mọi bề mặt sản phẩm dùng chung một bố cục.\n *\n *   <ComitorLockup variant=\"auto\" size=\"xs\" slogan=\"Tasks\" />\n *\n *  • `variant` — light (nền trắng/kem), dark (nền mực/ấm), auto (tự đổi theo theme).\n *  • `size`    — xs | sm | md | lg: đổi cỡ icon và cỡ chữ cùng lúc.\n *  • `wordmark` / `slogan` — đổi chữ khi cần cặp ngôn ngữ khác\n *    (vd \"COMITOR TASKS\", \"THIỆN MINH / CÙNG NHAU TIẾN XA\").\n *\n * Không có \"use client\": thuần trình bày, RSC render được.\n */\nexport type ComitorLockupVariant = \"light\" | \"dark\" | \"auto\";\nexport type ComitorLockupSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ComitorLockupProps {\n  className?: string;\n  variant?: ComitorLockupVariant;\n  size?: ComitorLockupSize;\n  wordmark?: string;\n  slogan?: string;\n  /** Class Tailwind GHI ĐÈ style slogan của preset cỡ chữ. Dùng khi cần căn bề rộng\n   *  slogan tuỳ biến cho khớp wordmark — vd header truyền cỡ nhỉnh hơn + tracking chặt\n   *  hơn để \"DESIGN SYSTEM\" rộng đúng bằng chữ \"COMITOR\". */\n  sloganClassName?: string;\n  style?: CSSProperties;\n}\n\n// Các cỡ căn theo tỉ lệ SVG trong brand book:\n//   • chiều cao icon ≈ 3.3–4 lần chiều cao chữ hoa của wordmark (icon là phần chủ đạo)\n//   • cỡ chữ + giãn chữ của slogan chọn sao cho slogan luôn HẸP HƠN HOẶC BẰNG wordmark\n//     (không bao giờ tràn quá vạch vàng).\n// Giãn chữ ở đây nhỏ hơn mức 0.25–0.36em của brand book — mức đó chỉ vừa ở cỡ hero.\nconst SIZE_MAP: Record<\n  ComitorLockupSize,\n  { icon: string; gap: string; wordmark: string; slogan: string; ruleMargin: string }\n> = {\n  xs: {\n    icon: \"w-9 h-9\", // 36px — vừa header cao 56px\n    gap: \"gap-2.5\",\n    wordmark: \"text-sm\", // 14px\n    slogan: \"text-[6px] tracking-[0.12em]\", //  6px\n    ruleMargin: \"my-0.5\"\n  },\n  sm: {\n    icon: \"w-12 h-12\", // 48px\n    gap: \"gap-3\",\n    wordmark: \"text-base\", // 16px\n    slogan: \"text-[7px] tracking-[0.12em]\", //  ~7px\n    ruleMargin: \"my-1\"\n  },\n  md: {\n    icon: \"w-20 h-20\", // 80px\n    gap: \"gap-4\",\n    wordmark: \"text-2xl\", // 24px\n    slogan: \"text-[10px] tracking-[0.12em]\", // 10px\n    ruleMargin: \"my-1.5\"\n  },\n  lg: {\n    icon: \"w-32 h-32\", // 128px\n    gap: \"gap-5\",\n    wordmark: \"text-4xl\", // 36px\n    slogan: \"text-[14px] tracking-[0.14em]\", // 14px\n    ruleMargin: \"my-2\"\n  }\n};\n\nexport function ComitorLockup({\n  className,\n  variant = \"light\",\n  size = \"md\",\n  wordmark = \"COMITOR\",\n  slogan = \"Together Further\",\n  sloganClassName,\n  style\n}: ComitorLockupProps) {\n  const s = SIZE_MAP[size];\n  const dark = variant === \"dark\";\n  const auto = variant === \"auto\";\n\n  return (\n    <div\n      className={cn(\"flex items-center\", s.gap, className)}\n      style={style}\n      role=\"img\"\n      aria-label={`${wordmark} — ${slogan}`}\n    >\n      {auto ? (\n        <>\n          <ComitorLogo variant=\"light\" className={cn(\"shrink-0\", s.icon, \"dark:hidden\")} />\n          <ComitorLogo variant=\"dark\" className={cn(\"shrink-0\", s.icon, \"hidden dark:block\")} />\n        </>\n      ) : (\n        <ComitorLogo variant={dark ? \"dark\" : \"light\"} className={cn(\"shrink-0\", s.icon)} />\n      )}\n      <div className=\"flex flex-col\">\n        <span\n          className={cn(\n            \"font-extrabold tracking-tight leading-none\",\n            s.wordmark,\n            auto ? \"text-ink dark:text-white\" : dark ? \"text-white\" : \"text-ink\"\n          )}\n        >\n          {wordmark}\n        </span>\n        <span\n          className={cn(\n            \"h-px opacity-55\",\n            s.ruleMargin,\n            auto ? \"bg-gold-400 dark:bg-gold-200\" : dark ? \"bg-gold-200\" : \"bg-gold-400\"\n          )}\n          aria-hidden=\"true\"\n        />\n        <span\n          className={cn(\n            \"font-semibold uppercase\",\n            sloganClassName ?? s.slogan,\n            auto ? \"text-gold-500 dark:text-gold-200\" : dark ? \"text-gold-200\" : \"text-gold-500\"\n          )}\n        >\n          {slogan}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA6FQ,mBACE,KADF;AA5FR,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAoC5B,MAAM,WAGF;AAAA,EACF,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AACF;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,SAAS,IAAI;AACvB,QAAM,OAAO,YAAY;AACzB,QAAM,OAAO,YAAY;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,qBAAqB,EAAE,KAAK,SAAS;AAAA,MACnD;AAAA,MACA,MAAK;AAAA,MACL,cAAY,GAAG,QAAQ,WAAM,MAAM;AAAA,MAElC;AAAA,eACC,iCACE;AAAA,8BAAC,eAAY,SAAQ,SAAQ,WAAW,GAAG,YAAY,EAAE,MAAM,aAAa,GAAG;AAAA,UAC/E,oBAAC,eAAY,SAAQ,QAAO,WAAW,GAAG,YAAY,EAAE,MAAM,mBAAmB,GAAG;AAAA,WACtF,IAEA,oBAAC,eAAY,SAAS,OAAO,SAAS,SAAS,WAAW,GAAG,YAAY,EAAE,IAAI,GAAG;AAAA,QAEpF,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,EAAE;AAAA,gBACF,OAAO,6BAA6B,OAAO,eAAe;AAAA,cAC5D;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,EAAE;AAAA,gBACF,OAAO,iCAAiC,OAAO,gBAAgB;AAAA,cACjE;AAAA,cACA,eAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,EAAE;AAAA,gBACrB,OAAO,qCAAqC,OAAO,kBAAkB;AAAA,cACvE;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/shell/comitor-logo.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+/**
+ * Dấu hiệu nhận diện chính thức của Comitor (khối lập phương vàng + 3 hình người đồng hành).
+ *
+ * Hai biến thể:
+ *   • `variant="light"` — mặt trên vàng nhạt; dùng trên nền sáng (mặc định)
+ *   • `variant="dark"`  — mặt trên trắng;     dùng trên nền tối / nền ấm
+ *
+ * ⚠ **Ngoại lệ duy nhất của quy tắc "không hardcode màu"**: mã hex dưới đây là vector
+ * lấy nguyên từ file nguồn Figma của brand book. KHÔNG tokenize, KHÔNG đổi màu,
+ * KHÔNG đơn giản hoá path — logo phải giống hệt nhau ở mọi sản phẩm.
+ *
+ * File này KHÔNG có "use client": logo là SVG tĩnh, để RSC render thẳng, không tốn JS phía client.
+ */
+type ComitorLogoVariant = "light" | "dark";
+interface ComitorLogoProps {
+    className?: string;
+    /** Nền sáng dùng "light", nền tối/ấm dùng "dark". */
+    variant?: ComitorLogoVariant;
+    /** Nội dung <title> của SVG — cũng là aria-label. */
+    title?: string;
+    style?: CSSProperties;
+}
+declare function ComitorLogo({ className, variant, title, style }: ComitorLogoProps): React.JSX.Element;
+
+export { ComitorLogo, type ComitorLogoProps, type ComitorLogoVariant };