@comitor/ui 0.5.1 → 0.6.1

package/dist/shell/comitor-lockup.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { ComitorLogo } from "./comitor-logo.js";
 const SIZE_MAP = {
@@ -63,17 +63,22 @@ function ComitorLockup({
       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__ */ jsx(ComitorLogo, { variant, 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",
+                "font-extrabold tracking-tight",
                 s.wordmark,
+                // `leading-none` PHẢI đứng SAU `s.wordmark`, không được gộp vào chuỗi đầu.
+                // `cn()` chạy qua tailwind-merge, mà ở đó một utility CỠ CHỮ (`text-base`, `text-2xl`…)
+                // xung đột với nhóm `leading` và XOÁ mọi `leading-*` đứng TRƯỚC nó — Tailwind coi
+                // `text-<size>` là cặp cỡ-chữ + chiều-cao-dòng. Viết `cn("… leading-none", s.wordmark)`
+                // thì `leading-none` bị cắt sạch, wordmark rơi về line-height mặc định (24px ở cỡ `sm`
+                // thay vì 16px): khối chữ cao thêm 8px, vạch vàng và slogan tụt xuống, lockup không
+                // còn khớp tỉ lệ brand book. Không có lỗi biên dịch nào — chỉ đo mới thấy.
+                "leading-none",
                 auto ? "text-ink dark:text-white" : dark ? "text-white" : "text-ink"
               ),
               children: wordmark

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

@@ -1 +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":[]}
+{"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      {/* Ba biến thể đi thẳng xuống `ComitorLogo` — từ 0.6.1 chính nó biết `auto`, nên không còn\n          bản sao của cặp `dark:hidden` / `hidden dark:block` ở đây. */}\n      <ComitorLogo variant={variant} className={cn(\"shrink-0\", s.icon)} />\n      <div className=\"flex flex-col\">\n        <span\n          className={cn(\n            \"font-extrabold tracking-tight\",\n            s.wordmark,\n            // `leading-none` PHẢI đứng SAU `s.wordmark`, không được gộp vào chuỗi đầu.\n            // `cn()` chạy qua tailwind-merge, mà ở đó một utility CỠ CHỮ (`text-base`, `text-2xl`…)\n            // xung đột với nhóm `leading` và XOÁ mọi `leading-*` đứng TRƯỚC nó — Tailwind coi\n            // `text-<size>` là cặp cỡ-chữ + chiều-cao-dòng. Viết `cn(\"… leading-none\", s.wordmark)`\n            // thì `leading-none` bị cắt sạch, wordmark rơi về line-height mặc định (24px ở cỡ `sm`\n            // thay vì 16px): khối chữ cao thêm 8px, vạch vàng và slogan tụt xuống, lockup không\n            // còn khớp tỉ lệ brand book. Không có lỗi biên dịch nào — chỉ đo mới thấy.\n            \"leading-none\",\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":"AA8FM,cACA,YADA;AA7FN,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,MAInC;AAAA,4BAAC,eAAY,SAAkB,WAAW,GAAG,YAAY,EAAE,IAAI,GAAG;AAAA,QAClE,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQF;AAAA,gBACA,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

@@ -4,9 +4,10 @@ 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ể:
+ * Ba 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
+ *   • `variant="auto"`  — tự đổi theo theme, giống `ComitorLockup variant="auto"`
  *
  * ⚠ **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,
@@ -14,10 +15,10 @@ import { CSSProperties } from 'react';
  *
  * 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";
+type ComitorLogoVariant = "light" | "dark" | "auto";
 interface ComitorLogoProps {
     className?: string;
-    /** Nền sáng dùng "light", nền tối/ấm dùng "dark". */
+    /** Nền sáng dùng "light", nền tối/ấm dùng "dark", theo theme dùng "auto". */
     variant?: ComitorLogoVariant;
     /** Nội dung <title> của SVG — cũng là aria-label. */
     title?: string;

package/dist/shell/comitor-logo.js

@@ -1,5 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
 function ComitorLogo({ className, variant = "light", title = "Comitor", style }) {
+  if (variant === "auto") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComitorLogo, { variant: "light", className: cn(className, "dark:hidden"), title, style }),
+      /* @__PURE__ */ jsx(ComitorLogo, { variant: "dark", className: cn(className, "hidden dark:block"), title, style })
+    ] });
+  }
   const dark = variant === "dark";
   const c = dark ? {
     accent: "#8A6800",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/comitor-logo.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * 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).\n *\n * Hai biến thể:\n *   • `variant=\"light\"` — mặt trên vàng nhạt; dùng trên nền sáng (mặc định)\n *   • `variant=\"dark\"`  — mặt trên trắng;     dùng trên nền tối / nền ấm\n *\n * ⚠ **Ngoại lệ duy nhất của quy tắc \"không hardcode màu\"**: mã hex dưới đây là vector\n * lấy nguyên từ file nguồn Figma của brand book. KHÔNG tokenize, KHÔNG đổi màu,\n * KHÔNG đơn giản hoá path — logo phải giống hệt nhau ở mọi sản phẩm.\n *\n * 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.\n */\nexport type ComitorLogoVariant = \"light\" | \"dark\";\n\nexport interface ComitorLogoProps {\n  className?: string;\n  /** Nền sáng dùng \"light\", nền tối/ấm dùng \"dark\". */\n  variant?: ComitorLogoVariant;\n  /** Nội dung <title> của SVG — cũng là aria-label. */\n  title?: string;\n  style?: CSSProperties;\n}\n\nexport function ComitorLogo({ className, variant = \"light\", title = \"Comitor\", style }: ComitorLogoProps) {\n  const dark = variant === \"dark\";\n  const c = dark\n    ? {\n        accent: \"#8A6800\",\n        bright: \"#F0CC50\",\n        rich: \"#D4A820\",\n        topFace: \"#FFFFFF\",\n        sphereHi: \"#F0CC50\",\n        sphereLo: \"#D4A820\"\n      }\n    : {\n        accent: \"#7A5800\",\n        bright: \"#E8B824\",\n        rich: \"#B88A00\",\n        topFace: \"#F5D060\",\n        sphereHi: \"#E8B824\",\n        sphereLo: \"#B88A00\"\n      };\n\n  return (\n    <svg\n      viewBox=\"0 0 256 256\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      style={style}\n      role=\"img\"\n      aria-label={title}\n    >\n      <title>{title}</title>\n      {/* Bottom interior diamond */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 142.059L78.5642 170.543L128 209.32L177.344 170.543L128 142.059Z\"\n        fill={c.accent}\n      />\n      {/* Left-front face */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M56.6951 86.8339L66.4352 149.502L91.1528 135.259L115.779 121.016V92.5315V64.0459L56.6951 86.8339Z\"\n        fill={c.bright}\n      />\n      {/* Right-front face */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M189.473 149.502L196.733 88.3046L140.13 64.0459V92.5315V121.016L164.755 135.259L189.473 149.502Z\"\n        fill={c.rich}\n      />\n      {/* Top face / outer sphere highlight */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 0C182.857 0 229.629 34.5499 247.822 82.975C223.747 95.6553 162.917 112.195 128 128C104.569 118.811 28.3934 89.4991 9.74011 78.9317C28.9448 32.6203 74.7053 0 128 0ZM170.544 81.5968L128 106.131L85.3639 81.5968L115.779 64.046L101.445 55.7761V55.6842L80.4941 43.6468L58.9921 31.15C61.2894 29.588 63.6785 28.0259 66.1594 26.4638L88.6719 39.5118C100.709 34.1824 113.941 31.2419 128 31.2419C145.183 31.2419 161.356 35.7445 175.415 43.6468L140.13 64.046L170.544 81.5968Z\"\n        fill={c.topFace}\n      />\n      {/* Right sphere half */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M238.817 63.9541C249.752 82.7915 256 104.66 256 128C256 198.662 198.662 256 128 256L120.557 199.03L128 128C164.939 106.682 201.878 85.3641 238.817 63.9541ZM146.929 188.095L177.344 170.544V211.251C202.981 196.089 220.991 169.35 224.207 138.2L246.811 125.152C246.72 122.303 246.536 119.455 246.26 116.698L207.207 139.211L189.473 149.502V114.401L146.929 138.935V188.095Z\"\n        fill={c.sphereHi}\n      />\n      {/* Left sphere half */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 256C57.2464 256 0 198.662 0 128C0 104.66 6.15656 82.7915 17.0912 63.9541C54.0302 85.3641 90.9691 106.682 128 128V256ZM108.979 188.095V138.935L66.4352 114.401V149.502L31.1501 129.103C31.5176 160.804 47.1387 188.83 70.9376 206.289V232.293C73.4184 233.672 75.9917 234.958 78.5644 236.152V211.251V170.544L108.979 188.095Z\"\n        fill={c.sphereLo}\n      />\n    </svg>\n  );\n}\n"],"mappings":"AA+CI,SASE,KATF;AArBG,SAAS,YAAY,EAAE,WAAW,UAAU,SAAS,QAAQ,WAAW,MAAM,GAAqB;AACxG,QAAM,OAAO,YAAY;AACzB,QAAM,IAAI,OACN;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,IACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MAEZ;AAAA,4BAAC,WAAO,iBAAM;AAAA,QAEd;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/comitor-logo.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * 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).\n *\n * Ba biến thể:\n *   • `variant=\"light\"` — mặt trên vàng nhạt; dùng trên nền sáng (mặc định)\n *   • `variant=\"dark\"`  — mặt trên trắng;     dùng trên nền tối / nền ấm\n *   • `variant=\"auto\"`  — tự đổi theo theme, giống `ComitorLockup variant=\"auto\"`\n *\n * ⚠ **Ngoại lệ duy nhất của quy tắc \"không hardcode màu\"**: mã hex dưới đây là vector\n * lấy nguyên từ file nguồn Figma của brand book. KHÔNG tokenize, KHÔNG đổi màu,\n * KHÔNG đơn giản hoá path — logo phải giống hệt nhau ở mọi sản phẩm.\n *\n * 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.\n */\nexport type ComitorLogoVariant = \"light\" | \"dark\" | \"auto\";\n\nexport interface ComitorLogoProps {\n  className?: string;\n  /** Nền sáng dùng \"light\", nền tối/ấm dùng \"dark\", theo theme dùng \"auto\". */\n  variant?: ComitorLogoVariant;\n  /** Nội dung <title> của SVG — cũng là aria-label. */\n  title?: string;\n  style?: CSSProperties;\n}\n\nexport function ComitorLogo({ className, variant = \"light\", title = \"Comitor\", style }: ComitorLogoProps) {\n  /*\n   * `auto` PHẢI vẽ hai bản rồi ẩn/hiện bằng `dark:`, không thể là một SVG đổi màu: mã hex nằm\n   * thẳng trong `fill` của từng path (ngoại lệ có chủ ý của quy tắc \"không hardcode màu\" — vector\n   * chép nguyên từ brand book), mà `dark:` không với tới thuộc tính `fill`. Đây đúng cách\n   * `ComitorLockup variant=\"auto\"` đang làm với chính component này; đưa vào đây để app không phải\n   * chép lại cặp `dark:hidden` / `hidden dark:block` ở mỗi chỗ dùng logo trần.\n   */\n  if (variant === \"auto\") {\n    return (\n      <>\n        <ComitorLogo variant=\"light\" className={cn(className, \"dark:hidden\")} title={title} style={style} />\n        <ComitorLogo variant=\"dark\" className={cn(className, \"hidden dark:block\")} title={title} style={style} />\n      </>\n    );\n  }\n\n  const dark = variant === \"dark\";\n  const c = dark\n    ? {\n        accent: \"#8A6800\",\n        bright: \"#F0CC50\",\n        rich: \"#D4A820\",\n        topFace: \"#FFFFFF\",\n        sphereHi: \"#F0CC50\",\n        sphereLo: \"#D4A820\"\n      }\n    : {\n        accent: \"#7A5800\",\n        bright: \"#E8B824\",\n        rich: \"#B88A00\",\n        topFace: \"#F5D060\",\n        sphereHi: \"#E8B824\",\n        sphereLo: \"#B88A00\"\n      };\n\n  return (\n    <svg\n      viewBox=\"0 0 256 256\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      style={style}\n      role=\"img\"\n      aria-label={title}\n    >\n      <title>{title}</title>\n      {/* Bottom interior diamond */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 142.059L78.5642 170.543L128 209.32L177.344 170.543L128 142.059Z\"\n        fill={c.accent}\n      />\n      {/* Left-front face */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M56.6951 86.8339L66.4352 149.502L91.1528 135.259L115.779 121.016V92.5315V64.0459L56.6951 86.8339Z\"\n        fill={c.bright}\n      />\n      {/* Right-front face */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M189.473 149.502L196.733 88.3046L140.13 64.0459V92.5315V121.016L164.755 135.259L189.473 149.502Z\"\n        fill={c.rich}\n      />\n      {/* Top face / outer sphere highlight */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 0C182.857 0 229.629 34.5499 247.822 82.975C223.747 95.6553 162.917 112.195 128 128C104.569 118.811 28.3934 89.4991 9.74011 78.9317C28.9448 32.6203 74.7053 0 128 0ZM170.544 81.5968L128 106.131L85.3639 81.5968L115.779 64.046L101.445 55.7761V55.6842L80.4941 43.6468L58.9921 31.15C61.2894 29.588 63.6785 28.0259 66.1594 26.4638L88.6719 39.5118C100.709 34.1824 113.941 31.2419 128 31.2419C145.183 31.2419 161.356 35.7445 175.415 43.6468L140.13 64.046L170.544 81.5968Z\"\n        fill={c.topFace}\n      />\n      {/* Right sphere half */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M238.817 63.9541C249.752 82.7915 256 104.66 256 128C256 198.662 198.662 256 128 256L120.557 199.03L128 128C164.939 106.682 201.878 85.3641 238.817 63.9541ZM146.929 188.095L177.344 170.544V211.251C202.981 196.089 220.991 169.35 224.207 138.2L246.811 125.152C246.72 122.303 246.536 119.455 246.26 116.698L207.207 139.211L189.473 149.502V114.401L146.929 138.935V188.095Z\"\n        fill={c.sphereHi}\n      />\n      {/* Left sphere half */}\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M128 256C57.2464 256 0 198.662 0 128C0 104.66 6.15656 82.7915 17.0912 63.9541C54.0302 85.3641 90.9691 106.682 128 128V256ZM108.979 188.095V138.935L66.4352 114.401V149.502L31.1501 129.103C31.5176 160.804 47.1387 188.83 70.9376 206.289V232.293C73.4184 233.672 75.9917 234.958 78.5644 236.152V211.251V170.544L108.979 188.095Z\"\n        fill={c.sphereLo}\n      />\n    </svg>\n  );\n}\n"],"mappings":"AAsCM,mBACE,KADF;AArCN,SAAS,UAAU;AA2BZ,SAAS,YAAY,EAAE,WAAW,UAAU,SAAS,QAAQ,WAAW,MAAM,GAAqB;AAQxG,MAAI,YAAY,QAAQ;AACtB,WACE,iCACE;AAAA,0BAAC,eAAY,SAAQ,SAAQ,WAAW,GAAG,WAAW,aAAa,GAAG,OAAc,OAAc;AAAA,MAClG,oBAAC,eAAY,SAAQ,QAAO,WAAW,GAAG,WAAW,mBAAmB,GAAG,OAAc,OAAc;AAAA,OACzG;AAAA,EAEJ;AAEA,QAAM,OAAO,YAAY;AACzB,QAAM,IAAI,OACN;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,IACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MAEZ;AAAA,4BAAC,WAAO,iBAAM;AAAA,QAEd;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM,EAAE;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/shell/display-axis-constants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Hằng của HAI trục hiển thị thêm: MẬT ĐỘ và CỠ CHỮ.
+ *
+ * ⚠ File này KHÔNG có `"use client"`, và đó là điều kiện bắt buộc chứ không phải tuỳ chọn.
+ * Root layout là Server Component nhưng vẫn cần đọc tên thuộc tính / khoá lưu (vd để render sẵn
+ * giá trị lên `<html>`). Mọi export của một module `"use client"` khi đi tới Server Component sẽ
+ * biến thành client-reference proxy và đọc ra `undefined` — KHÔNG ném lỗi, không cảnh báo. Đúng
+ * cái bẫy mà `contrast-constants.ts` được tách ra để tránh (CHANGELOG 0.2.2 §2), và cổng
+ * `verify:directives` canh đúng chuyện này.
+ *
+ * Vì vậy: hằng ở đây, provider ở file khác, và `shell/index.ts` re-export THẲNG từ file này
+ * chứ không đi vòng qua provider.
+ */
+/** `comfortable` là mặc định và KHÔNG ghi thuộc tính ra DOM — xem ghi chú ở cuối file. */
+declare const DENSITY_MODES: readonly ["comfortable", "compact"];
+type DensityMode = (typeof DENSITY_MODES)[number];
+declare const DENSITY_ATTRIBUTE = "data-density";
+declare const DENSITY_STORAGE_KEY = "comitor-density";
+declare const DEFAULT_DENSITY: DensityMode;
+declare function isDensityMode(value: unknown): value is DensityMode;
+/**
+ * `md` là mặc định và KHÔNG ghi thuộc tính ra DOM.
+ *
+ * Giá trị là `sm`/`md`/`lg` chứ không phải `small`/`medium`/`large`: chúng đi thẳng vào
+ * `[data-font-size="…"]` trong CSS và vào localStorage, tức là chuỗi MÁY — theo luật tên trường,
+ * không theo luật nhãn. Nhãn tiếng Việt do app truyền vào control.
+ */
+declare const FONT_SIZE_MODES: readonly ["sm", "md", "lg"];
+type FontSizeMode = (typeof FONT_SIZE_MODES)[number];
+declare const FONT_SIZE_ATTRIBUTE = "data-font-size";
+declare const FONT_SIZE_STORAGE_KEY = "comitor-font-size";
+declare const DEFAULT_FONT_SIZE: FontSizeMode;
+declare function isFontSizeMode(value: unknown): value is FontSizeMode;
+
+export { DEFAULT_DENSITY, DEFAULT_FONT_SIZE, DENSITY_ATTRIBUTE, DENSITY_MODES, DENSITY_STORAGE_KEY, type DensityMode, FONT_SIZE_ATTRIBUTE, FONT_SIZE_MODES, FONT_SIZE_STORAGE_KEY, type FontSizeMode, isDensityMode, isFontSizeMode };

package/dist/shell/display-axis-constants.js

@@ -0,0 +1,27 @@
+const DENSITY_MODES = ["comfortable", "compact"];
+const DENSITY_ATTRIBUTE = "data-density";
+const DENSITY_STORAGE_KEY = "comitor-density";
+const DEFAULT_DENSITY = "comfortable";
+function isDensityMode(value) {
+  return typeof value === "string" && DENSITY_MODES.includes(value);
+}
+const FONT_SIZE_MODES = ["sm", "md", "lg"];
+const FONT_SIZE_ATTRIBUTE = "data-font-size";
+const FONT_SIZE_STORAGE_KEY = "comitor-font-size";
+const DEFAULT_FONT_SIZE = "md";
+function isFontSizeMode(value) {
+  return typeof value === "string" && FONT_SIZE_MODES.includes(value);
+}
+export {
+  DEFAULT_DENSITY,
+  DEFAULT_FONT_SIZE,
+  DENSITY_ATTRIBUTE,
+  DENSITY_MODES,
+  DENSITY_STORAGE_KEY,
+  FONT_SIZE_ATTRIBUTE,
+  FONT_SIZE_MODES,
+  FONT_SIZE_STORAGE_KEY,
+  isDensityMode,
+  isFontSizeMode
+};
+//# sourceMappingURL=display-axis-constants.js.map

package/dist/shell/display-axis-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/display-axis-constants.ts"],"sourcesContent":["/**\n * Hằng của HAI trục hiển thị thêm: MẬT ĐỘ và CỠ CHỮ.\n *\n * ⚠ File này KHÔNG có `\"use client\"`, và đó là điều kiện bắt buộc chứ không phải tuỳ chọn.\n * Root layout là Server Component nhưng vẫn cần đọc tên thuộc tính / khoá lưu (vd để render sẵn\n * giá trị lên `<html>`). Mọi export của một module `\"use client\"` khi đi tới Server Component sẽ\n * biến thành client-reference proxy và đọc ra `undefined` — KHÔNG ném lỗi, không cảnh báo. Đúng\n * cái bẫy mà `contrast-constants.ts` được tách ra để tránh (CHANGELOG 0.2.2 §2), và cổng\n * `verify:directives` canh đúng chuyện này.\n *\n * Vì vậy: hằng ở đây, provider ở file khác, và `shell/index.ts` re-export THẲNG từ file này\n * chứ không đi vòng qua provider.\n */\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Trục 3 — MẬT ĐỘ (bố cục gọn)\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/** `comfortable` là mặc định và KHÔNG ghi thuộc tính ra DOM — xem ghi chú ở cuối file. */\nexport const DENSITY_MODES = [\"comfortable\", \"compact\"] as const;\nexport type DensityMode = (typeof DENSITY_MODES)[number];\n\nexport const DENSITY_ATTRIBUTE = \"data-density\";\nexport const DENSITY_STORAGE_KEY = \"comitor-density\";\nexport const DEFAULT_DENSITY: DensityMode = \"comfortable\";\n\nexport function isDensityMode(value: unknown): value is DensityMode {\n  return typeof value === \"string\" && (DENSITY_MODES as readonly string[]).includes(value);\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Trục 4 — CỠ CHỮ\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * `md` là mặc định và KHÔNG ghi thuộc tính ra DOM.\n *\n * Giá trị là `sm`/`md`/`lg` chứ không phải `small`/`medium`/`large`: chúng đi thẳng vào\n * `[data-font-size=\"…\"]` trong CSS và vào localStorage, tức là chuỗi MÁY — theo luật tên trường,\n * không theo luật nhãn. Nhãn tiếng Việt do app truyền vào control.\n */\nexport const FONT_SIZE_MODES = [\"sm\", \"md\", \"lg\"] as const;\nexport type FontSizeMode = (typeof FONT_SIZE_MODES)[number];\n\nexport const FONT_SIZE_ATTRIBUTE = \"data-font-size\";\nexport const FONT_SIZE_STORAGE_KEY = \"comitor-font-size\";\nexport const DEFAULT_FONT_SIZE: FontSizeMode = \"md\";\n\nexport function isFontSizeMode(value: unknown): value is FontSizeMode {\n  return typeof value === \"string\" && (FONT_SIZE_MODES as readonly string[]).includes(value);\n}\n\n/**\n * ─ VÌ SAO GIÁ TRỊ MẶC ĐỊNH KHÔNG GHI THUỘC TÍNH ─\n *\n * Cả hai trục đều GỠ thuộc tính khi ở mức mặc định thay vì ghi `data-density=\"comfortable\"`.\n * Cùng lối với `ContrastProvider`, và ở trục cỡ chữ thì nó còn là chuyện TRỢ NĂNG:\n *\n * Mức `md` không được phép là `font-size: 100%` viết ra DOM, càng không được là `16px`. Người\n * dùng có thể đã tăng cỡ chữ mặc định của trình duyệt; khai một cỡ tuyệt đối ở `<html>` là XOÁ\n * lựa chọn đó — tức tự tay vi phạm WCAG 1.4.4 ngay bên trong một tính năng trợ năng. Không ghi gì\n * ở mức mặc định thì cỡ gốc của trình duyệt được giữ nguyên, còn `sm`/`lg` là PHẦN TRĂM của chính\n * cỡ đó (87,5% / 112,5%) nên vẫn tôn trọng nó.\n *\n * ⚠ Không cổng nào bắt được lỗi này: `check-contrast.mjs` chỉ có ngưỡng 4,5 và 3, không có logic\n * cỡ chữ nào cả.\n */\n"],"mappings":"AAmBO,MAAM,gBAAgB,CAAC,eAAe,SAAS;AAG/C,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,kBAA+B;AAErC,SAAS,cAAc,OAAsC;AAClE,SAAO,OAAO,UAAU,YAAa,cAAoC,SAAS,KAAK;AACzF;AAaO,MAAM,kBAAkB,CAAC,MAAM,MAAM,IAAI;AAGzC,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,oBAAkC;AAExC,SAAS,eAAe,OAAuC;AACpE,SAAO,OAAO,UAAU,YAAa,gBAAsC,SAAS,KAAK;AAC3F;","names":[]}

package/dist/shell/display-axis-controls.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { FontSizeMode } from './display-axis-constants.js';
+
+/**
+ * Hai control của trục MẬT ĐỘ và trục CỠ CHỮ.
+ *
+ * ─ VÌ SAO CẢ HAI ĐỀU CÓ `disabled={!mounted}` ─
+ * Giá trị thật nằm ở localStorage, mà server không đọc được. Render lần đầu ở client PHẢI khớp
+ * HTML server sinh ra, nếu không React báo lệch hydration — nên provider giữ giá trị mặc định cho
+ * tới khi effect đầu chạy. Trong khoảnh khắc đó control hiện mặc định chứ không hiện lựa chọn
+ * thật, và nếu người dùng kịp bấm thì họ ghi đè lên chính lựa chọn của mình. Khoá cho tới khi
+ * `mounted` là cách `ContrastToggle` đã dùng.
+ *
+ * (DOM thật thì không nháy: script chống nháy của provider đã đặt thuộc tính lên `<html>` trước
+ * lần sơn đầu tiên. Chỉ CONTROL là phải chờ.)
+ */
+interface DensityToggleProps {
+    label?: string;
+    description?: string;
+    className?: string;
+}
+/**
+ * Nút gạt "bố cục gọn".
+ *
+ * ⚠ Đây KHÔNG phải một trường của biểu mẫu cài đặt. Nó có hiệu lực NGAY và tự lưu, giống
+ * `ThemeToggle`/`ContrastToggle` — đừng đưa nó vào luồng nháp/"Lưu thay đổi". Trộn hai kiểu thì
+ * thanh "Có thay đổi chưa lưu" sáng lên cho một thay đổi đã có hiệu lực, và nút "Hoàn tác" trong
+ * toast sẽ lùi bản nháp mà KHÔNG lùi được trục — giao diện tự mâu thuẫn với chính nó.
+ */
+declare function DensityToggle({ label, description, className }: DensityToggleProps): React.JSX.Element;
+interface FontSizeControlProps {
+    /** Nhãn của cả nhóm, đọc lên cho trình đọc màn hình. */
+    label?: string;
+    /** Nhãn từng mức — THỨ TỰ theo `FONT_SIZE_MODES` (`sm`, `md`, `lg`). */
+    optionLabels?: Record<FontSizeMode, string>;
+    className?: string;
+}
+/**
+ * Chọn cỡ chữ — ba mức, một hàng nút.
+ *
+ * `role="radiogroup"` + `aria-checked` chứ không phải ba nút thường: đây là chọn MỘT trong ba, và
+ * trình đọc màn hình cần nghe "2 trên 3" chứ không nghe ba nút rời rạc. Dùng `<button>` thật (bàn
+ * phím tới được bằng Tab) thay vì roving focus của Radix ToggleGroup — nhóm chỉ có ba mục nên
+ * roving focus không đáng cái giá thêm một phụ thuộc.
+ *
+ * Cỡ chữ của CHÍNH các nút này cố định `text-sm`: nếu chúng phóng theo lựa chọn thì bấm "Lớn" sẽ
+ * làm cả hàng nút nhảy chỗ ngay dưới ngón tay.
+ */
+declare function FontSizeControl({ label, optionLabels, className }: FontSizeControlProps): React.JSX.Element;
+
+export { DensityToggle, type DensityToggleProps, FontSizeControl, type FontSizeControlProps };

package/dist/shell/display-axis-controls.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "../components/ui/switch.js";
+import { cn } from "../lib/cn.js";
+import { FONT_SIZE_MODES } from "./display-axis-constants.js";
+import { useDensity, useFontSize } from "./display-axis-provider.js";
+function DensityToggle({
+  label = "B\u1ED1 c\u1EE5c g\u1ECDn",
+  description = "Gi\u1EA3m kho\u1EA3ng c\xE1ch d\u1ECDc gi\u1EEFa c\xE1c d\xF2ng trong b\u1EA3ng, danh s\xE1ch v\xE0 menu.",
+  className
+}) {
+  const { density, setDensity, mounted } = useDensity();
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      className,
+      checked: density === "compact",
+      onCheckedChange: (checked) => setDensity(checked ? "compact" : "comfortable"),
+      disabled: !mounted,
+      label,
+      description
+    }
+  );
+}
+const DEFAULT_FONT_SIZE_LABELS = {
+  sm: "Nh\u1ECF",
+  md: "V\u1EEBa",
+  lg: "L\u1EDBn"
+};
+function FontSizeControl({
+  label = "C\u1EE1 ch\u1EEF",
+  optionLabels = DEFAULT_FONT_SIZE_LABELS,
+  className
+}) {
+  const { fontSize, setFontSize, mounted } = useFontSize();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("inline-flex items-center gap-1 rounded-md border border-input p-1 text-sm", className),
+      children: FONT_SIZE_MODES.map((mode) => {
+        const selected = fontSize === mode;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            disabled: !mounted,
+            onClick: () => setFontSize(mode),
+            className: cn(
+              "rounded-sm px-3 py-1 text-sm transition-colors duration-150 ease-out",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              selected ? "bg-control-on text-control-check font-medium" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+            ),
+            children: optionLabels[mode]
+          },
+          mode
+        );
+      })
+    }
+  );
+}
+export {
+  DensityToggle,
+  FontSizeControl
+};
+//# sourceMappingURL=display-axis-controls.js.map

package/dist/shell/display-axis-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/display-axis-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch } from \"../components/ui/switch.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { FONT_SIZE_MODES, type FontSizeMode } from \"./display-axis-constants.js\";\nimport { useDensity, useFontSize } from \"./display-axis-provider.js\";\n\n/**\n * Hai control của trục MẬT ĐỘ và trục CỠ CHỮ.\n *\n * ─ VÌ SAO CẢ HAI ĐỀU CÓ `disabled={!mounted}` ─\n * Giá trị thật nằm ở localStorage, mà server không đọc được. Render lần đầu ở client PHẢI khớp\n * HTML server sinh ra, nếu không React báo lệch hydration — nên provider giữ giá trị mặc định cho\n * tới khi effect đầu chạy. Trong khoảnh khắc đó control hiện mặc định chứ không hiện lựa chọn\n * thật, và nếu người dùng kịp bấm thì họ ghi đè lên chính lựa chọn của mình. Khoá cho tới khi\n * `mounted` là cách `ContrastToggle` đã dùng.\n *\n * (DOM thật thì không nháy: script chống nháy của provider đã đặt thuộc tính lên `<html>` trước\n * lần sơn đầu tiên. Chỉ CONTROL là phải chờ.)\n */\n\nexport interface DensityToggleProps {\n  label?: string;\n  description?: string;\n  className?: string;\n}\n\n/**\n * Nút gạt \"bố cục gọn\".\n *\n * ⚠ Đây KHÔNG phải một trường của biểu mẫu cài đặt. Nó có hiệu lực NGAY và tự lưu, giống\n * `ThemeToggle`/`ContrastToggle` — đừng đưa nó vào luồng nháp/\"Lưu thay đổi\". Trộn hai kiểu thì\n * thanh \"Có thay đổi chưa lưu\" sáng lên cho một thay đổi đã có hiệu lực, và nút \"Hoàn tác\" trong\n * toast sẽ lùi bản nháp mà KHÔNG lùi được trục — giao diện tự mâu thuẫn với chính nó.\n */\nexport function DensityToggle({\n  label = \"Bố cục gọn\",\n  description = \"Giảm khoảng cách dọc giữa các dòng trong bảng, danh sách và menu.\",\n  className\n}: DensityToggleProps) {\n  const { density, setDensity, mounted } = useDensity();\n\n  return (\n    <Switch\n      className={className}\n      checked={density === \"compact\"}\n      onCheckedChange={(checked) => setDensity(checked ? \"compact\" : \"comfortable\")}\n      disabled={!mounted}\n      label={label}\n      description={description}\n    />\n  );\n}\n\nexport interface FontSizeControlProps {\n  /** Nhãn của cả nhóm, đọc lên cho trình đọc màn hình. */\n  label?: string;\n  /** Nhãn từng mức — THỨ TỰ theo `FONT_SIZE_MODES` (`sm`, `md`, `lg`). */\n  optionLabels?: Record<FontSizeMode, string>;\n  className?: string;\n}\n\nconst DEFAULT_FONT_SIZE_LABELS: Record<FontSizeMode, string> = {\n  sm: \"Nhỏ\",\n  md: \"Vừa\",\n  lg: \"Lớn\"\n};\n\n/**\n * Chọn cỡ chữ — ba mức, một hàng nút.\n *\n * `role=\"radiogroup\"` + `aria-checked` chứ không phải ba nút thường: đây là chọn MỘT trong ba, và\n * trình đọc màn hình cần nghe \"2 trên 3\" chứ không nghe ba nút rời rạc. Dùng `<button>` thật (bàn\n * phím tới được bằng Tab) thay vì roving focus của Radix ToggleGroup — nhóm chỉ có ba mục nên\n * roving focus không đáng cái giá thêm một phụ thuộc.\n *\n * Cỡ chữ của CHÍNH các nút này cố định `text-sm`: nếu chúng phóng theo lựa chọn thì bấm \"Lớn\" sẽ\n * làm cả hàng nút nhảy chỗ ngay dưới ngón tay.\n */\nexport function FontSizeControl({\n  label = \"Cỡ chữ\",\n  optionLabels = DEFAULT_FONT_SIZE_LABELS,\n  className\n}: FontSizeControlProps) {\n  const { fontSize, setFontSize, mounted } = useFontSize();\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={cn(\"inline-flex items-center gap-1 rounded-md border border-input p-1 text-sm\", className)}\n    >\n      {FONT_SIZE_MODES.map((mode) => {\n        const selected = fontSize === mode;\n        return (\n          <button\n            key={mode}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            disabled={!mounted}\n            onClick={() => setFontSize(mode)}\n            className={cn(\n              \"rounded-sm px-3 py-1 text-sm transition-colors duration-150 ease-out\",\n              \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              selected\n                ? \"bg-control-on text-control-check font-medium\"\n                : \"text-muted-foreground hover:bg-accent hover:text-foreground\"\n            )}\n          >\n            {optionLabels[mode]}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA2CI;AAzCJ,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,uBAA0C;AACnD,SAAS,YAAY,mBAAmB;AA8BjC,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,GAAuB;AACrB,QAAM,EAAE,SAAS,YAAY,QAAQ,IAAI,WAAW;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,YAAY;AAAA,MACrB,iBAAiB,CAAC,YAAY,WAAW,UAAU,YAAY,aAAa;AAAA,MAC5E,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAUA,MAAM,2BAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAAS,gBAAgB;AAAA,EAC9B,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AACF,GAAyB;AACvB,QAAM,EAAE,UAAU,aAAa,QAAQ,IAAI,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,6EAA6E,SAAS;AAAA,MAEnG,0BAAgB,IAAI,CAAC,SAAS;AAC7B,cAAM,WAAW,aAAa;AAC9B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,CAAC;AAAA,YACX,SAAS,MAAM,YAAY,IAAI;AAAA,YAC/B,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,WACI,iDACA;AAAA,YACN;AAAA,YAEC,uBAAa,IAAI;AAAA;AAAA,UAfb;AAAA,QAgBP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/shell/display-axis-provider.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { DensityMode, FontSizeMode } from './display-axis-constants.js';
+
+interface DisplayAxisValue<T extends string> {
+    value: T;
+    setValue: (next: T) => void;
+    /** `false` cho tới khi effect đầu tiên chạy — dùng để tránh lệch hydration ở control. */
+    mounted: boolean;
+}
+declare const DensityProvider: ({ children, defaultValue, storageKey }: {
+    children: ReactNode;
+    defaultValue?: "compact" | "comfortable" | undefined;
+    storageKey?: string;
+}) => React.JSX.Element;
+declare const DensityScript: ({ storageKey }: {
+    storageKey?: string;
+}) => React.JSX.Element;
+/** Đọc/đổi mật độ bố cục. */
+declare function useDensity(): {
+    density: DensityMode;
+    setDensity: (m: DensityMode) => void;
+    mounted: boolean;
+};
+declare const FontSizeProvider: ({ children, defaultValue, storageKey }: {
+    children: ReactNode;
+    defaultValue?: "sm" | "md" | "lg" | undefined;
+    storageKey?: string;
+}) => React.JSX.Element;
+declare const FontSizeScript: ({ storageKey }: {
+    storageKey?: string;
+}) => React.JSX.Element;
+/** Đọc/đổi cỡ chữ. */
+declare function useFontSize(): {
+    fontSize: FontSizeMode;
+    setFontSize: (m: FontSizeMode) => void;
+    mounted: boolean;
+};
+
+export { DensityProvider, DensityScript, type DisplayAxisValue, FontSizeProvider, FontSizeScript, useDensity, useFontSize };

package/dist/shell/display-axis-provider.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import {
+  DEFAULT_DENSITY,
+  DEFAULT_FONT_SIZE,
+  DENSITY_ATTRIBUTE,
+  DENSITY_STORAGE_KEY,
+  FONT_SIZE_ATTRIBUTE,
+  FONT_SIZE_STORAGE_KEY,
+  isDensityMode,
+  isFontSizeMode
+} from "./display-axis-constants.js";
+function createDisplayAxis(config) {
+  const Context = createContext(null);
+  function AxisScript({ storageKey = config.storageKey }) {
+    const script = `(function(){try{var v=localStorage.getItem(${JSON.stringify(storageKey)});if(v&&v!==${JSON.stringify(config.defaultValue)})document.documentElement.setAttribute(${JSON.stringify(config.attribute)},v)}catch(e){}})();`;
+    return /* @__PURE__ */ jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: script } });
+  }
+  function Provider({
+    children,
+    defaultValue = config.defaultValue,
+    storageKey = config.storageKey
+  }) {
+    const [value, setValueState] = useState(defaultValue);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+      let stored = null;
+      try {
+        stored = window.localStorage.getItem(storageKey);
+      } catch {
+      }
+      if (config.isValue(stored)) setValueState(stored);
+      setMounted(true);
+    }, [storageKey]);
+    useEffect(() => {
+      if (!mounted) return;
+      const root = document.documentElement;
+      if (value === config.defaultValue) root.removeAttribute(config.attribute);
+      else root.setAttribute(config.attribute, value);
+    }, [value, mounted]);
+    const setValue = useCallback(
+      (next) => {
+        setValueState(next);
+        try {
+          window.localStorage.setItem(storageKey, next);
+        } catch {
+        }
+      },
+      [storageKey]
+    );
+    const ctx = useMemo(() => ({ value, setValue, mounted }), [value, setValue, mounted]);
+    return /* @__PURE__ */ jsxs(Context.Provider, { value: ctx, children: [
+      /* @__PURE__ */ jsx(AxisScript, { storageKey }),
+      children
+    ] });
+  }
+  function useAxis() {
+    const ctx = useContext(Context);
+    if (!ctx) throw new Error(`${config.hookName}() ph\u1EA3i n\u1EB1m trong <${config.providerName}>. B\u1ECDc n\xF3 \u1EDF root layout.`);
+    return ctx;
+  }
+  return { Provider, useAxis, AxisScript };
+}
+const densityAxis = createDisplayAxis({
+  attribute: DENSITY_ATTRIBUTE,
+  storageKey: DENSITY_STORAGE_KEY,
+  defaultValue: DEFAULT_DENSITY,
+  isValue: isDensityMode,
+  hookName: "useDensity",
+  providerName: "DensityProvider"
+});
+const DensityProvider = densityAxis.Provider;
+const DensityScript = densityAxis.AxisScript;
+function useDensity() {
+  const { value, setValue, mounted } = densityAxis.useAxis();
+  return { density: value, setDensity: setValue, mounted };
+}
+const fontSizeAxis = createDisplayAxis({
+  attribute: FONT_SIZE_ATTRIBUTE,
+  storageKey: FONT_SIZE_STORAGE_KEY,
+  defaultValue: DEFAULT_FONT_SIZE,
+  isValue: isFontSizeMode,
+  hookName: "useFontSize",
+  providerName: "FontSizeProvider"
+});
+const FontSizeProvider = fontSizeAxis.Provider;
+const FontSizeScript = fontSizeAxis.AxisScript;
+function useFontSize() {
+  const { value, setValue, mounted } = fontSizeAxis.useAxis();
+  return { fontSize: value, setFontSize: setValue, mounted };
+}
+export {
+  DensityProvider,
+  DensityScript,
+  FontSizeProvider,
+  FontSizeScript,
+  useDensity,
+  useFontSize
+};
+//# sourceMappingURL=display-axis-provider.js.map

package/dist/shell/display-axis-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/display-axis-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport {\n  DEFAULT_DENSITY,\n  DEFAULT_FONT_SIZE,\n  DENSITY_ATTRIBUTE,\n  DENSITY_STORAGE_KEY,\n  type DensityMode,\n  FONT_SIZE_ATTRIBUTE,\n  FONT_SIZE_STORAGE_KEY,\n  type FontSizeMode,\n  isDensityMode,\n  isFontSizeMode\n} from \"./display-axis-constants.js\";\n\n/**\n * Xưởng dựng TRỤC HIỂN THỊ — dùng chung cho mật độ và cỡ chữ.\n *\n * `ContrastProvider` viết tay ~60 dòng cho trục thứ hai. Trục thứ ba và thứ tư sẽ là hai bản chép\n * gần như y hệt, nên phần chung tách ra đây: cùng cơ chế đọc localStorage sau khi mount, cùng cờ\n * `mounted` chống lệch hydration, cùng script chống nháy trong `<body>`, cùng quy ước GỠ thuộc\n * tính ở giá trị mặc định.\n *\n * ⚠ `ContrastProvider` CỐ Ý chưa chuyển sang xưởng này. Nó là API đã phát hành và có hành vi\n * riêng đã được ghi chép; chuyển nó là một thay đổi có rủi ro mà lượt này không cần tới. Nếu sau\n * này chuyển thì chuyển một mình nó, có bản so đầu ra trước/sau.\n *\n * ─ VÌ SAO KHÔNG DÙNG `next-themes` ─\n * Nó giữ MỘT context singleton cho cả cây. Lồng thêm provider với `attribute`/`storageKey` khác\n * thì provider trong cùng thắng và `useTheme()` của app đọc nhầm trục — không lỗi biên dịch, chỉ\n * là nút đổi sáng/tối lặng lẽ ngừng ăn. `contrast-provider.tsx` đã ghi lại đúng cạm bẫy này.\n */\ninterface AxisConfig<T extends string> {\n  attribute: string;\n  storageKey: string;\n  defaultValue: T;\n  isValue: (v: unknown) => v is T;\n  hookName: string;\n  providerName: string;\n}\n\nexport interface DisplayAxisValue<T extends string> {\n  value: T;\n  setValue: (next: T) => void;\n  /** `false` cho tới khi effect đầu tiên chạy — dùng để tránh lệch hydration ở control. */\n  mounted: boolean;\n}\n\nfunction createDisplayAxis<T extends string>(config: AxisConfig<T>) {\n  const Context = createContext<DisplayAxisValue<T> | null>(null);\n\n  /**\n   * Script chống nháy. Phải chạy TRƯỚC lần sơn đầu tiên, nếu không người đã chọn `lg` sẽ thấy một\n   * khung hình cỡ mặc định rồi mới nhảy. Effect của React chạy SAU khi sơn nên không dùng được.\n   *\n   * ⚠ Nằm trong `<body>`, KHÔNG phải `<head>`: React 19 kêu \"Encountered a script tag while\n   * rendering React component\" ở mọi lần render client nếu đặt vào head. Trong body thì tương\n   * đương về chống nháy vì parser chạy script ngay khi gặp, mà nó đứng trước toàn bộ markup.\n   */\n  function AxisScript({ storageKey = config.storageKey }: { storageKey?: string }) {\n    const script = `(function(){try{var v=localStorage.getItem(${JSON.stringify(storageKey)});if(v&&v!==${JSON.stringify(config.defaultValue)})document.documentElement.setAttribute(${JSON.stringify(config.attribute)},v)}catch(e){}})();`;\n    // biome-ignore lint/security/noDangerouslySetInnerHtml: chuỗi hằng do chính package sinh, không có dữ liệu người dùng.\n    return <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: script }} />;\n  }\n\n  function Provider({\n    children,\n    defaultValue = config.defaultValue,\n    storageKey = config.storageKey\n  }: {\n    children: ReactNode;\n    defaultValue?: T;\n    storageKey?: string;\n  }) {\n    const [value, setValueState] = useState<T>(defaultValue);\n    const [mounted, setMounted] = useState(false);\n\n    // Đọc lựa chọn đã lưu SAU khi mount. Trước đó state phải bằng đúng giá trị server đã render,\n    // nếu không React báo lệch hydration — DOM thật đã được AxisScript đặt đúng từ trước rồi.\n    useEffect(() => {\n      let stored: string | null = null;\n      try {\n        stored = window.localStorage.getItem(storageKey);\n      } catch {\n        // Safari chế độ riêng tư / localStorage bị chặn: rơi về mặc định, không phải lỗi.\n      }\n      if (config.isValue(stored)) setValueState(stored);\n      setMounted(true);\n    }, [storageKey]);\n\n    useEffect(() => {\n      if (!mounted) return;\n      const root = document.documentElement;\n      // Mặc định thì GỠ thuộc tính, không ghi giá trị — xem ghi chú cuối display-axis-constants.ts.\n      if (value === config.defaultValue) root.removeAttribute(config.attribute);\n      else root.setAttribute(config.attribute, value);\n    }, [value, mounted]);\n\n    const setValue = useCallback(\n      (next: T) => {\n        setValueState(next);\n        try {\n          window.localStorage.setItem(storageKey, next);\n        } catch {\n          // Không lưu được thì lựa chọn chỉ sống trong phiên này — vẫn tốt hơn là ném lỗi.\n        }\n      },\n      [storageKey]\n    );\n\n    const ctx = useMemo<DisplayAxisValue<T>>(() => ({ value, setValue, mounted }), [value, setValue, mounted]);\n\n    return (\n      <Context.Provider value={ctx}>\n        <AxisScript storageKey={storageKey} />\n        {children}\n      </Context.Provider>\n    );\n  }\n\n  function useAxis(): DisplayAxisValue<T> {\n    const ctx = useContext(Context);\n    // Ném lỗi thay vì trả mặc định: im lặng thì control trông như hỏng mà không chỉ ra nguyên nhân.\n    if (!ctx) throw new Error(`${config.hookName}() phải nằm trong <${config.providerName}>. Bọc nó ở root layout.`);\n    return ctx;\n  }\n\n  return { Provider, useAxis, AxisScript };\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Trục 3 — MẬT ĐỘ\n   ──────────────────────────────────────────────────────────────────────────── */\n\nconst densityAxis = createDisplayAxis<DensityMode>({\n  attribute: DENSITY_ATTRIBUTE,\n  storageKey: DENSITY_STORAGE_KEY,\n  defaultValue: DEFAULT_DENSITY,\n  isValue: isDensityMode,\n  hookName: \"useDensity\",\n  providerName: \"DensityProvider\"\n});\n\nexport const DensityProvider = densityAxis.Provider;\nexport const DensityScript = densityAxis.AxisScript;\n\n/** Đọc/đổi mật độ bố cục. */\nexport function useDensity(): { density: DensityMode; setDensity: (m: DensityMode) => void; mounted: boolean } {\n  const { value, setValue, mounted } = densityAxis.useAxis();\n  return { density: value, setDensity: setValue, mounted };\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Trục 4 — CỠ CHỮ\n   ──────────────────────────────────────────────────────────────────────────── */\n\nconst fontSizeAxis = createDisplayAxis<FontSizeMode>({\n  attribute: FONT_SIZE_ATTRIBUTE,\n  storageKey: FONT_SIZE_STORAGE_KEY,\n  defaultValue: DEFAULT_FONT_SIZE,\n  isValue: isFontSizeMode,\n  hookName: \"useFontSize\",\n  providerName: \"FontSizeProvider\"\n});\n\nexport const FontSizeProvider = fontSizeAxis.Provider;\nexport const FontSizeScript = fontSizeAxis.AxisScript;\n\n/** Đọc/đổi cỡ chữ. */\nexport function useFontSize(): { fontSize: FontSizeMode; setFontSize: (m: FontSizeMode) => void; mounted: boolean } {\n  const { value, setValue, mounted } = fontSizeAxis.useAxis();\n  return { fontSize: value, setFontSize: setValue, mounted };\n}\n"],"mappings":";AA+DW,cAmDL,YAnDK;AA7DX,SAAS,eAA+B,aAAa,YAAY,WAAW,SAAS,gBAAgB;AACrG;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAmCP,SAAS,kBAAoC,QAAuB;AAClE,QAAM,UAAU,cAA0C,IAAI;AAU9D,WAAS,WAAW,EAAE,aAAa,OAAO,WAAW,GAA4B;AAC/E,UAAM,SAAS,8CAA8C,KAAK,UAAU,UAAU,CAAC,eAAe,KAAK,UAAU,OAAO,YAAY,CAAC,0CAA0C,KAAK,UAAU,OAAO,SAAS,CAAC;AAEnN,WAAO,oBAAC,YAAO,0BAAwB,MAAC,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,EACvF;AAEA,WAAS,SAAS;AAAA,IAChB;AAAA,IACA,eAAe,OAAO;AAAA,IACtB,aAAa,OAAO;AAAA,EACtB,GAIG;AACD,UAAM,CAAC,OAAO,aAAa,IAAI,SAAY,YAAY;AACvD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAI5C,cAAU,MAAM;AACd,UAAI,SAAwB;AAC5B,UAAI;AACF,iBAAS,OAAO,aAAa,QAAQ,UAAU;AAAA,MACjD,QAAQ;AAAA,MAER;AACA,UAAI,OAAO,QAAQ,MAAM,EAAG,eAAc,MAAM;AAChD,iBAAW,IAAI;AAAA,IACjB,GAAG,CAAC,UAAU,CAAC;AAEf,cAAU,MAAM;AACd,UAAI,CAAC,QAAS;AACd,YAAM,OAAO,SAAS;AAEtB,UAAI,UAAU,OAAO,aAAc,MAAK,gBAAgB,OAAO,SAAS;AAAA,UACnE,MAAK,aAAa,OAAO,WAAW,KAAK;AAAA,IAChD,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,UAAM,WAAW;AAAA,MACf,CAAC,SAAY;AACX,sBAAc,IAAI;AAClB,YAAI;AACF,iBAAO,aAAa,QAAQ,YAAY,IAAI;AAAA,QAC9C,QAAQ;AAAA,QAER;AAAA,MACF;AAAA,MACA,CAAC,UAAU;AAAA,IACb;AAEA,UAAM,MAAM,QAA6B,OAAO,EAAE,OAAO,UAAU,QAAQ,IAAI,CAAC,OAAO,UAAU,OAAO,CAAC;AAEzG,WACE,qBAAC,QAAQ,UAAR,EAAiB,OAAO,KACvB;AAAA,0BAAC,cAAW,YAAwB;AAAA,MACnC;AAAA,OACH;AAAA,EAEJ;AAEA,WAAS,UAA+B;AACtC,UAAM,MAAM,WAAW,OAAO;AAE9B,QAAI,CAAC,IAAK,OAAM,IAAI,MAAM,GAAG,OAAO,QAAQ,gCAAsB,OAAO,YAAY,uCAA0B;AAC/G,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,UAAU,SAAS,WAAW;AACzC;AAMA,MAAM,cAAc,kBAA+B;AAAA,EACjD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAChB,CAAC;AAEM,MAAM,kBAAkB,YAAY;AACpC,MAAM,gBAAgB,YAAY;AAGlC,SAAS,aAA+F;AAC7G,QAAM,EAAE,OAAO,UAAU,QAAQ,IAAI,YAAY,QAAQ;AACzD,SAAO,EAAE,SAAS,OAAO,YAAY,UAAU,QAAQ;AACzD;AAMA,MAAM,eAAe,kBAAgC;AAAA,EACnD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAChB,CAAC;AAEM,MAAM,mBAAmB,aAAa;AACtC,MAAM,iBAAiB,aAAa;AAGpC,SAAS,cAAoG;AAClH,QAAM,EAAE,OAAO,UAAU,QAAQ,IAAI,aAAa,QAAQ;AAC1D,SAAO,EAAE,UAAU,OAAO,aAAa,UAAU,QAAQ;AAC3D;","names":[]}

package/dist/shell/index.d.ts

@@ -7,6 +7,9 @@ export { ComitorLogo, ComitorLogoProps, ComitorLogoVariant } from './comitor-log
 export { CONTRAST_ATTRIBUTE, CONTRAST_MODES, CONTRAST_STORAGE_KEY, ContrastMode, ContrastToggleLabels, DEFAULT_CONTRAST_TOGGLE_LABELS, isContrastMode } from './contrast-constants.js';
 export { ContrastContextValue, ContrastProvider, ContrastProviderProps, ContrastScript, useContrast } from './contrast-provider.js';
 export { ContrastToggle, ContrastToggleProps } from './contrast-toggle.js';
+export { DEFAULT_DENSITY, DEFAULT_FONT_SIZE, DENSITY_ATTRIBUTE, DENSITY_MODES, DENSITY_STORAGE_KEY, DensityMode, FONT_SIZE_ATTRIBUTE, FONT_SIZE_MODES, FONT_SIZE_STORAGE_KEY, FontSizeMode, isDensityMode, isFontSizeMode } from './display-axis-constants.js';
+export { DensityToggle, DensityToggleProps, FontSizeControl, FontSizeControlProps } from './display-axis-controls.js';
+export { DensityProvider, DensityScript, DisplayAxisValue, FontSizeProvider, FontSizeScript, useDensity, useFontSize } from './display-axis-provider.js';
 export { MobileMenu, MobileMenuProps } from './mobile-menu.js';
 export { NotificationsButton, NotificationsButtonProps } from './notifications-button.js';
 export { ShellContextValue, ShellProvider, ShellProviderProps, useShell } from './shell-context.js';

package/dist/shell/index.js

@@ -7,6 +7,9 @@ export * from "./comitor-logo.js";
 export * from "./contrast-constants.js";
 export * from "./contrast-provider.js";
 export * from "./contrast-toggle.js";
+export * from "./display-axis-constants.js";
+export * from "./display-axis-controls.js";
+export * from "./display-axis-provider.js";
 export * from "./mobile-menu.js";
 export * from "./notifications-button.js";
 export * from "./shell-context.js";

package/dist/shell/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/index.ts"],"sourcesContent":["/**\n * Entry \"@comitor/ui/shell\" — Tier 3: khung ứng dụng (AppShell, Sidebar, AppHeader,\n * WorkspaceSwitcher, AppLauncher, UserMenu, ThemeProvider…).\n *\n * Tách khỏi entry chính vì tầng này kéo theo `next/navigation` và `next-themes` — hai\n * peer OPTIONAL. App không chạy trên Next thì đừng import entry này (hoặc tự cấp\n * `ShellLinkComponent` riêng qua `ShellProvider`).\n *\n * Toàn bộ file ở đây là client component: có state, có routing, có phím tắt.\n */\n\n/**\n * Toaster bám theo next-themes — về tier thì nó là primitive (`components/ui/sonner.tsx`),\n * nhưng đặt cửa ra ở entry shell vì nó gọi `useTheme()`, mà `next-themes` chỉ là peer\n * OPTIONAL: để ở entry chính là ép mọi app phải cài next-themes.\n * Dùng chung với `ThemeProvider` ở trên. Nếu app KHÔNG dùng next-themes thì lấy composite\n * `Toaster` ở \"@comitor/ui\" và tự truyền prop `theme`.\n */\nexport { SonnerToaster, type SonnerToasterProps } from \"../components/ui/sonner.js\";\nexport * from \"./app-header.js\";\nexport * from \"./app-launcher.js\";\nexport * from \"./app-shell.js\";\nexport * from \"./comitor-lockup.js\";\nexport * from \"./comitor-logo.js\";\n/**\n * Hằng của trục tương phản xuất THẲNG từ module thuần — root layout là Server Component và nó\n * đọc CONTRAST_STORAGE_KEY. Đi vòng qua contrast-provider.tsx (\"use client\") là hằng thành proxy\n * và ra `undefined` mà không có lỗi nào.\n */\nexport * from \"./contrast-constants.js\";\nexport * from \"./contrast-provider.js\";\nexport * from \"./contrast-toggle.js\";\nexport * from \"./mobile-menu.js\";\nexport * from \"./notifications-button.js\";\nexport * from \"./shell-context.js\";\nexport * from \"./shell-link.js\";\nexport * from \"./sidebar.js\";\nexport * from \"./sidebar-group.js\";\nexport * from \"./sidebar-menu-item.js\";\nexport * from \"./theme-provider.js\";\nexport * from \"./theme-toggle.js\";\nexport * from \"./types.js\";\nexport * from \"./user-menu.js\";\nexport * from \"./utils.js\";\nexport * from \"./workspace-switcher.js\";\n"],"mappings":"AAkBA,SAAS,qBAA8C;AACvD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAMd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/shell/index.ts"],"sourcesContent":["/**\n * Entry \"@comitor/ui/shell\" — Tier 3: khung ứng dụng (AppShell, Sidebar, AppHeader,\n * WorkspaceSwitcher, AppLauncher, UserMenu, ThemeProvider…).\n *\n * Tách khỏi entry chính vì tầng này kéo theo `next/navigation` và `next-themes` — hai\n * peer OPTIONAL. App không chạy trên Next thì đừng import entry này (hoặc tự cấp\n * `ShellLinkComponent` riêng qua `ShellProvider`).\n *\n * Toàn bộ file ở đây là client component: có state, có routing, có phím tắt.\n */\n\n/**\n * Toaster bám theo next-themes — về tier thì nó là primitive (`components/ui/sonner.tsx`),\n * nhưng đặt cửa ra ở entry shell vì nó gọi `useTheme()`, mà `next-themes` chỉ là peer\n * OPTIONAL: để ở entry chính là ép mọi app phải cài next-themes.\n * Dùng chung với `ThemeProvider` ở trên. Nếu app KHÔNG dùng next-themes thì lấy composite\n * `Toaster` ở \"@comitor/ui\" và tự truyền prop `theme`.\n */\nexport { SonnerToaster, type SonnerToasterProps } from \"../components/ui/sonner.js\";\nexport * from \"./app-header.js\";\nexport * from \"./app-launcher.js\";\nexport * from \"./app-shell.js\";\nexport * from \"./comitor-lockup.js\";\nexport * from \"./comitor-logo.js\";\n/**\n * Hằng của trục tương phản xuất THẲNG từ module thuần — root layout là Server Component và nó\n * đọc CONTRAST_STORAGE_KEY. Đi vòng qua contrast-provider.tsx (\"use client\") là hằng thành proxy\n * và ra `undefined` mà không có lỗi nào.\n */\nexport * from \"./contrast-constants.js\";\nexport * from \"./contrast-provider.js\";\nexport * from \"./contrast-toggle.js\";\n/* Cùng lý do như trên — hằng của trục MẬT ĐỘ và CỠ CHỮ xuất thẳng từ module thuần, TRƯỚC provider. */\nexport * from \"./display-axis-constants.js\";\nexport * from \"./display-axis-controls.js\";\nexport * from \"./display-axis-provider.js\";\nexport * from \"./mobile-menu.js\";\nexport * from \"./notifications-button.js\";\nexport * from \"./shell-context.js\";\nexport * from \"./shell-link.js\";\nexport * from \"./sidebar.js\";\nexport * from \"./sidebar-group.js\";\nexport * from \"./sidebar-menu-item.js\";\nexport * from \"./theme-provider.js\";\nexport * from \"./theme-toggle.js\";\nexport * from \"./types.js\";\nexport * from \"./user-menu.js\";\nexport * from \"./utils.js\";\nexport * from \"./workspace-switcher.js\";\n"],"mappings":"AAkBA,SAAS,qBAA8C;AACvD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAMd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -82,6 +82,14 @@ interface ShellProviderProps {
      * ```
      */
     searchParams?: NavSearchParams | null;
+    /**
+     * Ở dải TABLET (768–1023px), khi người dùng CHƯA từng gạt thanh bên, mở app lần đầu thì thanh
+     * bên thu gọn sẵn. Mặc định `true`.
+     *
+     * Đặt `false` khi app muốn thanh bên luôn mở rộng ở tablet — vd điều hướng là thứ chính của
+     * màn hình đó. Lựa chọn ĐÃ LƯU của người dùng luôn thắng cờ này.
+     */
+    collapseSidebarOnTablet?: boolean;
     /** 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…). */
@@ -107,6 +115,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, searchParams: searchParamsProp, 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, collapseSidebarOnTablet, persistSidebarState, enableShortcuts, labels: labelsProp, children }: ShellProviderProps): React.JSX.Element;
 
 export { type ShellContextValue, ShellProvider, type ShellProviderProps, useShell };