@comitor/ui 0.1.0

package/dist/components/composite/form-field.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field.js";
+const colSpanClasses = {
+  1: "col-span-12 md:col-span-1",
+  2: "col-span-12 md:col-span-2",
+  3: "col-span-12 sm:col-span-6 md:col-span-3",
+  4: "col-span-12 sm:col-span-6 md:col-span-4",
+  5: "col-span-12 sm:col-span-6 md:col-span-5",
+  6: "col-span-12 sm:col-span-6",
+  7: "col-span-12 md:col-span-7",
+  8: "col-span-12 md:col-span-8",
+  9: "col-span-12 md:col-span-9",
+  10: "col-span-12 md:col-span-10",
+  11: "col-span-12 md:col-span-11",
+  12: "col-span-12"
+};
+function FormField({
+  label,
+  required = false,
+  description,
+  error,
+  htmlFor,
+  colSpan = 12,
+  orientation = "vertical",
+  className,
+  children
+}) {
+  const generatedId = useId();
+  const id = htmlFor ?? generatedId;
+  const hasError = Boolean(error);
+  const errorId = `${id}-error`;
+  const descriptionId = `${id}-description`;
+  const control = {
+    id,
+    "aria-invalid": hasError ? true : void 0,
+    "aria-required": required ? true : void 0,
+    "aria-describedby": hasError ? errorId : description ? descriptionId : void 0
+  };
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      "data-slot": "form-field",
+      "data-invalid": hasError || void 0,
+      orientation,
+      className: cn(colSpanClasses[colSpan], className),
+      children: [
+        label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: id, className: "text-sm", children: [
+          label,
+          required && // Dấu * chỉ là tín hiệu thị giác — trạng thái bắt buộc đã nằm ở aria-required trên
+          // control, để trình đọc màn hình khỏi đọc thừa "sao".
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(FieldContent, { children: [
+          typeof children === "function" ? children(control) : children,
+          hasError ? /* @__PURE__ */ jsxs(FieldError, { id: errorId, className: "flex items-center gap-1.5 text-xs animate-in fade-in slide-in-from-top-1", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+            error
+          ] }) : description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: "text-xs", children: description })
+        ] })
+      ]
+    }
+  );
+}
+const SELECT_EMPTY_VALUE = "__empty__";
+function toSelectValue(value) {
+  return value == null || value === "" ? SELECT_EMPTY_VALUE : value;
+}
+function fromSelectValue(value) {
+  return value === SELECT_EMPTY_VALUE ? "" : value;
+}
+export {
+  FormField,
+  SELECT_EMPTY_VALUE,
+  fromSelectValue,
+  toSelectValue
+};
+//# sourceMappingURL=form-field.js.map

package/dist/components/composite/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/form-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertCircle } from \"lucide-react\";\nimport { type ReactNode, useId } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from \"../ui/field.js\";\n\nexport type FormFieldColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\n/**\n * Thuộc tính a11y mà `FormField` tiêm xuống control con.\n *\n * Trải nguyên cụm này vào `<Input>`/`<Combobox>`/`<Select>` là control tự có id khớp nhãn,\n * tự báo lỗi và trạng thái bắt buộc — không phải nhớ từng thuộc tính ở mỗi trang.\n */\nexport interface FormFieldControlProps {\n  id: string;\n  \"aria-invalid\"?: true;\n  \"aria-required\"?: true;\n  \"aria-describedby\"?: string;\n}\n\nexport interface FormFieldProps {\n  label?: ReactNode;\n  /** Đánh dấu bắt buộc: vẽ dấu * và phát `aria-required` xuống control */\n  required?: boolean;\n  /** Mô tả/gợi ý dưới trường — bị ẩn khi có lỗi để không đọc chồng lời */\n  description?: ReactNode;\n  /** Thông báo lỗi; có giá trị là trường vào trạng thái invalid */\n  error?: ReactNode;\n  /** id của control — bỏ trống thì tự sinh bằng useId */\n  htmlFor?: string;\n  /** Số cột chiếm trong lưới 12 cột của `FormSection` (mặc định 12 = cả hàng) */\n  colSpan?: FormFieldColSpan;\n  orientation?: \"vertical\" | \"horizontal\" | \"responsive\";\n  className?: string;\n  /**\n   * Control của trường. Dạng hàm sẽ nhận `FormFieldControlProps` để trải xuống —\n   * dạng node thì app tự lo id/aria (dùng khi control đã tự quản, vd Checkbox có nhãn riêng).\n   */\n  children: ReactNode | ((control: FormFieldControlProps) => ReactNode);\n}\n\nconst colSpanClasses: Record<FormFieldColSpan, string> = {\n  1: \"col-span-12 md:col-span-1\",\n  2: \"col-span-12 md:col-span-2\",\n  3: \"col-span-12 sm:col-span-6 md:col-span-3\",\n  4: \"col-span-12 sm:col-span-6 md:col-span-4\",\n  5: \"col-span-12 sm:col-span-6 md:col-span-5\",\n  6: \"col-span-12 sm:col-span-6\",\n  7: \"col-span-12 md:col-span-7\",\n  8: \"col-span-12 md:col-span-8\",\n  9: \"col-span-12 md:col-span-9\",\n  10: \"col-span-12 md:col-span-10\",\n  11: \"col-span-12 md:col-span-11\",\n  12: \"col-span-12\"\n};\n\n/**\n * Một trường form: nhãn + control + mô tả/lỗi, đặt trong lưới 12 cột của `FormSection`.\n *\n * KHÔNG tự vẽ input. Nhãn và lỗi uỷ quyền xuống primitive `Field`, còn control do app chọn —\n * nếu composite tự dựng input thì mỗi kiểu control mới (combobox, date range, editor) lại phải\n * mở lại file này — một FormField \"đa năng\" ôm hết mọi loại control sẽ phình ra không có điểm dừng.\n */\nexport function FormField({\n  label,\n  required = false,\n  description,\n  error,\n  htmlFor,\n  colSpan = 12,\n  orientation = \"vertical\",\n  className,\n  children\n}: FormFieldProps) {\n  const generatedId = useId();\n  const id = htmlFor ?? generatedId;\n  const hasError = Boolean(error);\n  const errorId = `${id}-error`;\n  const descriptionId = `${id}-description`;\n\n  const control: FormFieldControlProps = {\n    id,\n    \"aria-invalid\": hasError ? true : undefined,\n    \"aria-required\": required ? true : undefined,\n    \"aria-describedby\": hasError ? errorId : description ? descriptionId : undefined\n  };\n\n  return (\n    <Field\n      data-slot=\"form-field\"\n      data-invalid={hasError || undefined}\n      orientation={orientation}\n      className={cn(colSpanClasses[colSpan], className)}\n    >\n      {label && (\n        <FieldLabel htmlFor={id} className=\"text-sm\">\n          {label}\n          {required && (\n            // Dấu * chỉ là tín hiệu thị giác — trạng thái bắt buộc đã nằm ở aria-required trên\n            // control, để trình đọc màn hình khỏi đọc thừa \"sao\".\n            <span aria-hidden=\"true\" className=\"text-destructive\">\n              *\n            </span>\n          )}\n        </FieldLabel>\n      )}\n\n      <FieldContent>\n        {typeof children === \"function\" ? children(control) : children}\n\n        {hasError ? (\n          <FieldError id={errorId} className=\"flex items-center gap-1.5 text-xs animate-in fade-in slide-in-from-top-1\">\n            <AlertCircle aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n            {error}\n          </FieldError>\n        ) : (\n          description && (\n            <FieldDescription id={descriptionId} className=\"text-xs\">\n              {description}\n            </FieldDescription>\n          )\n        )}\n      </FieldContent>\n    </Field>\n  );\n}\n\n/**\n * Sentinel cho `Select` của Radix.\n *\n * Radix cấm `SelectItem value=\"\"` (chuỗi rỗng dành riêng cho việc xoá lựa chọn), nên mục\n * \"— Không chọn —\" phải mang một giá trị giả. Dùng chung hằng số này ở mọi app để tránh mỗi\n * nơi tự đặt một sentinel rồi lọt xuống payload gửi server.\n */\nexport const SELECT_EMPTY_VALUE = \"__empty__\";\n\n/** Giá trị model (\"\" = chưa chọn) → giá trị cho Radix Select. */\nexport function toSelectValue(value: string | null | undefined): string {\n  return value == null || value === \"\" ? SELECT_EMPTY_VALUE : value;\n}\n\n/** Giá trị từ Radix Select → giá trị model (\"\" khi người dùng chọn mục rỗng). */\nexport function fromSelectValue(value: string): string {\n  return value === SELECT_EMPTY_VALUE ? \"\" : value;\n}\n"],"mappings":";AAiGQ,SAKI,KALJ;AA/FR,SAAS,mBAAmB;AAC5B,SAAyB,aAAa;AACtC,SAAS,UAAU;AACnB,SAAS,OAAO,cAAc,kBAAkB,YAAY,kBAAkB;AAsC9E,MAAM,iBAAmD;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,cAAc,MAAM;AAC1B,QAAM,KAAK,WAAW;AACtB,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,QAAM,UAAiC;AAAA,IACrC;AAAA,IACA,gBAAgB,WAAW,OAAO;AAAA,IAClC,iBAAiB,WAAW,OAAO;AAAA,IACnC,oBAAoB,WAAW,UAAU,cAAc,gBAAgB;AAAA,EACzE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc,YAAY;AAAA,MAC1B;AAAA,MACA,WAAW,GAAG,eAAe,OAAO,GAAG,SAAS;AAAA,MAE/C;AAAA,iBACC,qBAAC,cAAW,SAAS,IAAI,WAAU,WAChC;AAAA;AAAA,UACA;AAAA;AAAA,UAGC,oBAAC,UAAK,eAAY,QAAO,WAAU,oBAAmB,eAEtD;AAAA,WAEJ;AAAA,QAGF,qBAAC,gBACE;AAAA,iBAAO,aAAa,aAAa,SAAS,OAAO,IAAI;AAAA,UAErD,WACC,qBAAC,cAAW,IAAI,SAAS,WAAU,4EACjC;AAAA,gCAAC,eAAY,eAAY,QAAO,WAAU,qBAAoB;AAAA,YAC7D;AAAA,aACH,IAEA,eACE,oBAAC,oBAAiB,IAAI,eAAe,WAAU,WAC5C,uBACH;AAAA,WAGN;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,MAAM,qBAAqB;AAG3B,SAAS,cAAc,OAA0C;AACtE,SAAO,SAAS,QAAQ,UAAU,KAAK,qBAAqB;AAC9D;AAGO,SAAS,gBAAgB,OAAuB;AACrD,SAAO,UAAU,qBAAqB,KAAK;AAC7C;","names":[]}

package/dist/components/composite/form-section.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { IconComponent } from './empty-state.js';
+
+type FormSectionAccent = "none" | "primary" | "info" | "warning" | "success" | "destructive";
+interface FormSectionProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: IconComponent;
+    /** Slot bên phải tiêu đề (nút phụ, công tắc…) — nằm NGOÀI nút gập để không lồng button */
+    actions?: ReactNode;
+    /** Cho phép gập/mở (mặc định false) */
+    collapsible?: boolean;
+    /** Trạng thái mở ban đầu khi không controlled */
+    defaultOpen?: boolean;
+    /** Controlled: app tự giữ trạng thái mở */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Vạch màu bên trái, phân biệt nhóm trường (mặc định "none") */
+    accent?: FormSectionAccent;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * Nhóm trường trong form: tiêu đề + mô tả + lưới 12 cột cho các `FormField`.
+ *
+ * Nội dung là `grid-cols-12` để `FormField` chỉ cần khai `colSpan` — cách này giữ mọi form
+ * trong hệ sinh thái cùng một nhịp cột, thay vì mỗi trang tự chế `flex` với bề rộng riêng.
+ */
+declare function FormSection({ title, description, icon, actions, collapsible, defaultOpen, open, onOpenChange, accent, children, className, contentClassName }: FormSectionProps): React.JSX.Element;
+
+export { FormSection, type FormSectionAccent, type FormSectionProps };

package/dist/components/composite/form-section.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+const accentClasses = {
+  none: "",
+  primary: "border-l-4 border-l-gold-300",
+  info: "border-l-4 border-l-info",
+  warning: "border-l-4 border-l-warning",
+  success: "border-l-4 border-l-success",
+  destructive: "border-l-4 border-l-destructive"
+};
+function SectionHeading({ title, description, icon: Icon }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3 text-left", children: [
+    Icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+        children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold tracking-tight text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+function FormSection({
+  title,
+  description,
+  icon,
+  actions,
+  collapsible = false,
+  defaultOpen = true,
+  open,
+  onOpenChange,
+  accent = "none",
+  children,
+  className,
+  contentClassName
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const shell = cn("rounded-xl border border-border bg-card", accentClasses[accent], className);
+  const grid = cn("grid grid-cols-12 gap-4 p-4 md:gap-5 md:p-5", contentClassName);
+  if (!collapsible) {
+    return /* @__PURE__ */ jsxs("section", { "data-slot": "form-section", className: shell, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b border-border p-4 md:px-5", children: [
+        /* @__PURE__ */ jsx(SectionHeading, { title, description, icon }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: grid, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsxs("section", { "data-slot": "form-section", className: shell, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b border-border p-4 md:px-5", children: [
+      /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex min-w-0 flex-1 items-start gap-3 rounded-md text-left", children: [
+        /* @__PURE__ */ jsx(SectionHeading, { title, description, icon }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "ml-auto mt-1 size-4 shrink-0 text-muted-foreground transition-transform duration-150 ease-out",
+              isOpen && "rotate-180"
+            )
+          }
+        )
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: grid, children }) })
+  ] }) });
+}
+export {
+  FormSection
+};
+//# sourceMappingURL=form-section.js.map

package/dist/components/composite/form-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/form-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { type ReactNode, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../ui/collapsible.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\nexport type FormSectionAccent = \"none\" | \"primary\" | \"info\" | \"warning\" | \"success\" | \"destructive\";\n\nexport interface FormSectionProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: IconComponent;\n  /** Slot bên phải tiêu đề (nút phụ, công tắc…) — nằm NGOÀI nút gập để không lồng button */\n  actions?: ReactNode;\n  /** Cho phép gập/mở (mặc định false) */\n  collapsible?: boolean;\n  /** Trạng thái mở ban đầu khi không controlled */\n  defaultOpen?: boolean;\n  /** Controlled: app tự giữ trạng thái mở */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Vạch màu bên trái, phân biệt nhóm trường (mặc định \"none\") */\n  accent?: FormSectionAccent;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n}\n\nconst accentClasses: Record<FormSectionAccent, string> = {\n  none: \"\",\n  primary: \"border-l-4 border-l-gold-300\",\n  info: \"border-l-4 border-l-info\",\n  warning: \"border-l-4 border-l-warning\",\n  success: \"border-l-4 border-l-success\",\n  destructive: \"border-l-4 border-l-destructive\"\n};\n\nfunction SectionHeading({ title, description, icon: Icon }: Pick<FormSectionProps, \"title\" | \"description\" | \"icon\">) {\n  return (\n    <div className=\"flex min-w-0 items-start gap-3 text-left\">\n      {Icon && (\n        <span\n          aria-hidden=\"true\"\n          className=\"mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground\"\n        >\n          <Icon className=\"size-4\" />\n        </span>\n      )}\n      <div className=\"min-w-0\">\n        <h3 className=\"truncate text-sm font-semibold tracking-tight text-foreground\">{title}</h3>\n        {description && <p className=\"mt-0.5 text-xs text-muted-foreground\">{description}</p>}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Nhóm trường trong form: tiêu đề + mô tả + lưới 12 cột cho các `FormField`.\n *\n * Nội dung là `grid-cols-12` để `FormField` chỉ cần khai `colSpan` — cách này giữ mọi form\n * trong hệ sinh thái cùng một nhịp cột, thay vì mỗi trang tự chế `flex` với bề rộng riêng.\n */\nexport function FormSection({\n  title,\n  description,\n  icon,\n  actions,\n  collapsible = false,\n  defaultOpen = true,\n  open,\n  onOpenChange,\n  accent = \"none\",\n  children,\n  className,\n  contentClassName\n}: FormSectionProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = open ?? internalOpen;\n\n  const setOpen = (next: boolean) => {\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const shell = cn(\"rounded-xl border border-border bg-card\", accentClasses[accent], className);\n  const grid = cn(\"grid grid-cols-12 gap-4 p-4 md:gap-5 md:p-5\", contentClassName);\n\n  if (!collapsible) {\n    return (\n      <section data-slot=\"form-section\" className={shell}>\n        <div className=\"flex items-start justify-between gap-3 border-b border-border p-4 md:px-5\">\n          <SectionHeading title={title} description={description} icon={icon} />\n          {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n        </div>\n        <div className={grid}>{children}</div>\n      </section>\n    );\n  }\n\n  return (\n    <Collapsible open={isOpen} onOpenChange={setOpen} asChild>\n      <section data-slot=\"form-section\" className={shell}>\n        <div className=\"flex items-start justify-between gap-3 border-b border-border p-4 md:px-5\">\n          <CollapsibleTrigger className=\"flex min-w-0 flex-1 items-start gap-3 rounded-md text-left\">\n            <SectionHeading title={title} description={description} icon={icon} />\n            <ChevronDown\n              aria-hidden=\"true\"\n              className={cn(\n                \"ml-auto mt-1 size-4 shrink-0 text-muted-foreground transition-transform duration-150 ease-out\",\n                isOpen && \"rotate-180\"\n              )}\n            />\n          </CollapsibleTrigger>\n          {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n        </div>\n        <CollapsibleContent>\n          <div className={grid}>{children}</div>\n        </CollapsibleContent>\n      </section>\n    </Collapsible>\n  );\n}\n"],"mappings":";AA+CU,cAGJ,YAHI;AA7CV,SAAS,mBAAmB;AAC5B,SAAyB,gBAAgB;AACzC,SAAS,UAAU;AACnB,SAAS,aAAa,oBAAoB,0BAA0B;AAyBpE,MAAM,gBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf;AAEA,SAAS,eAAe,EAAE,OAAO,aAAa,MAAM,KAAK,GAA6D;AACpH,SACE,qBAAC,SAAI,WAAU,4CACZ;AAAA,YACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,IAC3B;AAAA,IAEF,qBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,iEAAiE,iBAAM;AAAA,MACpF,eAAe,oBAAC,OAAE,WAAU,wCAAwC,uBAAY;AAAA,OACnF;AAAA,KACF;AAEJ;AAQO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,WAAW;AAC5D,QAAM,SAAS,QAAQ;AAEvB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,SAAS,OAAW,iBAAgB,IAAI;AAC5C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,QAAQ,GAAG,2CAA2C,cAAc,MAAM,GAAG,SAAS;AAC5F,QAAM,OAAO,GAAG,+CAA+C,gBAAgB;AAE/E,MAAI,CAAC,aAAa;AAChB,WACE,qBAAC,aAAQ,aAAU,gBAAe,WAAW,OAC3C;AAAA,2BAAC,SAAI,WAAU,6EACb;AAAA,4BAAC,kBAAe,OAAc,aAA0B,MAAY;AAAA,QACnE,WAAW,oBAAC,SAAI,WAAU,oCAAoC,mBAAQ;AAAA,SACzE;AAAA,MACA,oBAAC,SAAI,WAAW,MAAO,UAAS;AAAA,OAClC;AAAA,EAEJ;AAEA,SACE,oBAAC,eAAY,MAAM,QAAQ,cAAc,SAAS,SAAO,MACvD,+BAAC,aAAQ,aAAU,gBAAe,WAAW,OAC3C;AAAA,yBAAC,SAAI,WAAU,6EACb;AAAA,2BAAC,sBAAmB,WAAU,8DAC5B;AAAA,4BAAC,kBAAe,OAAc,aAA0B,MAAY;AAAA,QACpE;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,UAAU;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MACC,WAAW,oBAAC,SAAI,WAAU,oCAAoC,mBAAQ;AAAA,OACzE;AAAA,IACA,oBAAC,sBACC,8BAAC,SAAI,WAAW,MAAO,UAAS,GAClC;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/composite/inline-edit.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface InlineEditProps {
+    /** Giá trị hiện tại (controlled từ phía dữ liệu) */
+    value: string;
+    /**
+     * Lưu giá trị mới. Trả Promise thì component hiện trạng thái đang lưu và chỉ thoát chế độ
+     * sửa khi lưu xong — thoát sớm sẽ nháy về giá trị cũ rồi mới nhảy sang giá trị mới.
+     */
+    onSave: (value: string) => void | Promise<void>;
+    placeholder?: string;
+    /** Ô nhập nhiều dòng (mô tả task) — Enter xuống dòng, Cmd/Ctrl+Enter mới lưu */
+    multiline?: boolean;
+    maxLength?: number;
+    disabled?: boolean;
+    /** Bắt buộc có nội dung: chuỗi rỗng bị coi là huỷ, không lưu (mặc định true) */
+    required?: boolean;
+    /** Rời ô là lưu (mặc định true, kiểu Linear) */
+    saveOnBlur?: boolean;
+    /** Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím) */
+    showActions?: boolean;
+    /** Nhãn cho trình đọc màn hình, vd "Sửa tên công việc" */
+    ariaLabel?: string;
+    onError?: (error: unknown) => void;
+    className?: string;
+    /** className riêng cho phần hiển thị (khi chưa sửa) — vd chỉnh cỡ chữ tiêu đề */
+    displayClassName?: string;
+}
+/**
+ * Sửa tại chỗ kiểu Linear: bấm vào chữ → thành ô nhập → Enter lưu, Esc huỷ.
+ *
+ * Vì sao không dùng `<input>` luôn cho gọn: ô nhập luôn hiện làm danh sách trông như một cái
+ * form khổng lồ và người dùng dễ sửa nhầm khi chỉ định bấm chọn. Hiển thị dạng chữ cho tới khi
+ * người dùng thật sự muốn sửa là ranh giới an toàn.
+ */
+declare function InlineEdit({ value, onSave, placeholder, multiline, maxLength, disabled, required, saveOnBlur, showActions, ariaLabel, onError, className, displayClassName }: InlineEditProps): React.JSX.Element;
+
+export { InlineEdit, type InlineEditProps };

package/dist/components/composite/inline-edit.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../ui/button.js";
+function InlineEdit({
+  value,
+  onSave,
+  placeholder = "Nh\u1EA5n \u0111\u1EC3 nh\u1EADp\u2026",
+  multiline = false,
+  maxLength,
+  disabled = false,
+  required = true,
+  saveOnBlur = true,
+  showActions = false,
+  ariaLabel = "S\u1EEDa t\u1EA1i ch\u1ED7",
+  onError,
+  className,
+  displayClassName
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!editing) setDraft(value);
+  }, [value, editing]);
+  useEffect(() => {
+    if (!editing) return;
+    const element = inputRef.current;
+    if (!element) return;
+    element.focus();
+    element.setSelectionRange(element.value.length, element.value.length);
+  }, [editing]);
+  const cancel = () => {
+    setDraft(value);
+    setEditing(false);
+  };
+  const commit = async () => {
+    const next = draft.trim();
+    if (next === value.trim() || required && next === "") {
+      cancel();
+      return;
+    }
+    try {
+      setSaving(true);
+      await onSave(next);
+      setSaving(false);
+      setEditing(false);
+    } catch (error) {
+      setSaving(false);
+      if (onError) onError(error);
+      else console.error("[InlineEdit] onSave th\u1EA5t b\u1EA1i:", error);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancel();
+      return;
+    }
+    if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      void commit();
+    }
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel,
+        onClick: () => setEditing(true),
+        className: cn(
+          "-mx-1 w-full rounded-md px-1 py-0.5 text-left transition-colors duration-150 ease-out",
+          "hover:bg-muted disabled:pointer-events-none disabled:opacity-60",
+          !value && "text-muted-foreground",
+          className,
+          displayClassName
+        ),
+        children: /* @__PURE__ */ jsx("span", { className: cn(multiline ? "whitespace-pre-wrap" : "block truncate"), children: value || placeholder })
+      }
+    );
+  }
+  const sharedProps = {
+    value: draft,
+    maxLength,
+    placeholder,
+    disabled: saving,
+    "aria-label": ariaLabel,
+    onKeyDown: handleKeyDown,
+    onBlur: saveOnBlur ? () => void commit() : void 0,
+    className: cn(
+      "w-full rounded-md border border-input bg-background px-1.5 py-0.5 text-sm text-foreground",
+      "focus:border-gold-300 focus:outline-none focus:ring-2 focus:ring-ring/50",
+      "disabled:opacity-60",
+      className
+    )
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+    multiline ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...sharedProps,
+        ref: (element) => {
+          inputRef.current = element;
+        },
+        rows: 3,
+        onChange: (event) => setDraft(event.target.value)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...sharedProps,
+        ref: (element) => {
+          inputRef.current = element;
+        },
+        type: "text",
+        onChange: (event) => setDraft(event.target.value)
+      }
+    ),
+    showActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          disabled: saving,
+          onMouseDown: (event) => {
+            event.preventDefault();
+            void commit();
+          },
+          children: [
+            /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "L\u01B0u" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          disabled: saving,
+          onMouseDown: (event) => {
+            event.preventDefault();
+            cancel();
+          },
+          children: [
+            /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "H\u1EE7y" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  InlineEdit
+};
+//# sourceMappingURL=inline-edit.js.map

package/dist/components/composite/inline-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/inline-edit.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, X } from \"lucide-react\";\nimport { type KeyboardEvent, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\n\nexport interface InlineEditProps {\n  /** Giá trị hiện tại (controlled từ phía dữ liệu) */\n  value: string;\n  /**\n   * Lưu giá trị mới. Trả Promise thì component hiện trạng thái đang lưu và chỉ thoát chế độ\n   * sửa khi lưu xong — thoát sớm sẽ nháy về giá trị cũ rồi mới nhảy sang giá trị mới.\n   */\n  onSave: (value: string) => void | Promise<void>;\n  placeholder?: string;\n  /** Ô nhập nhiều dòng (mô tả task) — Enter xuống dòng, Cmd/Ctrl+Enter mới lưu */\n  multiline?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n  /** Bắt buộc có nội dung: chuỗi rỗng bị coi là huỷ, không lưu (mặc định true) */\n  required?: boolean;\n  /** Rời ô là lưu (mặc định true, kiểu Linear) */\n  saveOnBlur?: boolean;\n  /** Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím) */\n  showActions?: boolean;\n  /** Nhãn cho trình đọc màn hình, vd \"Sửa tên công việc\" */\n  ariaLabel?: string;\n  onError?: (error: unknown) => void;\n  className?: string;\n  /** className riêng cho phần hiển thị (khi chưa sửa) — vd chỉnh cỡ chữ tiêu đề */\n  displayClassName?: string;\n}\n\n/**\n * Sửa tại chỗ kiểu Linear: bấm vào chữ → thành ô nhập → Enter lưu, Esc huỷ.\n *\n * Vì sao không dùng `<input>` luôn cho gọn: ô nhập luôn hiện làm danh sách trông như một cái\n * form khổng lồ và người dùng dễ sửa nhầm khi chỉ định bấm chọn. Hiển thị dạng chữ cho tới khi\n * người dùng thật sự muốn sửa là ranh giới an toàn.\n */\nexport function InlineEdit({\n  value,\n  onSave,\n  placeholder = \"Nhấn để nhập…\",\n  multiline = false,\n  maxLength,\n  disabled = false,\n  required = true,\n  saveOnBlur = true,\n  showActions = false,\n  ariaLabel = \"Sửa tại chỗ\",\n  onError,\n  className,\n  displayClassName\n}: InlineEditProps) {\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(value);\n  const [saving, setSaving] = useState(false);\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  // Giá trị đổi từ ngoài (người khác sửa qua realtime) — chỉ đồng bộ khi không sửa dở.\n  useEffect(() => {\n    if (!editing) setDraft(value);\n  }, [value, editing]);\n\n  useEffect(() => {\n    if (!editing) return;\n    const element = inputRef.current;\n    if (!element) return;\n    element.focus();\n    element.setSelectionRange(element.value.length, element.value.length);\n  }, [editing]);\n\n  const cancel = () => {\n    setDraft(value);\n    setEditing(false);\n  };\n\n  const commit = async () => {\n    const next = draft.trim();\n    if (next === value.trim() || (required && next === \"\")) {\n      cancel();\n      return;\n    }\n\n    try {\n      setSaving(true);\n      await onSave(next);\n      setSaving(false);\n      setEditing(false);\n    } catch (error) {\n      setSaving(false);\n      // Giữ nguyên chế độ sửa: người dùng không mất chữ vừa gõ khi mạng lỗi.\n      if (onError) onError(error);\n      else console.error(\"[InlineEdit] onSave thất bại:\", error);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      cancel();\n      return;\n    }\n    if (event.key === \"Enter\" && (!multiline || event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      void commit();\n    }\n  };\n\n  if (!editing) {\n    return (\n      <button\n        type=\"button\"\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onClick={() => setEditing(true)}\n        className={cn(\n          \"-mx-1 w-full rounded-md px-1 py-0.5 text-left transition-colors duration-150 ease-out\",\n          \"hover:bg-muted disabled:pointer-events-none disabled:opacity-60\",\n          !value && \"text-muted-foreground\",\n          className,\n          displayClassName\n        )}\n      >\n        <span className={cn(multiline ? \"whitespace-pre-wrap\" : \"block truncate\")}>{value || placeholder}</span>\n      </button>\n    );\n  }\n\n  const sharedProps = {\n    value: draft,\n    maxLength,\n    placeholder,\n    disabled: saving,\n    \"aria-label\": ariaLabel,\n    onKeyDown: handleKeyDown,\n    onBlur: saveOnBlur ? () => void commit() : undefined,\n    className: cn(\n      \"w-full rounded-md border border-input bg-background px-1.5 py-0.5 text-sm text-foreground\",\n      \"focus:border-gold-300 focus:outline-none focus:ring-2 focus:ring-ring/50\",\n      \"disabled:opacity-60\",\n      className\n    )\n  };\n\n  return (\n    <div className=\"flex items-start gap-1\">\n      {multiline ? (\n        <textarea\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          rows={3}\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      ) : (\n        <input\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          type=\"text\"\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      )}\n\n      {showActions && (\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            // onMouseDown: chạy TRƯỚC blur của ô nhập, nếu để onClick thì blur đã huỷ/lưu mất rồi.\n            onMouseDown={(event) => {\n              event.preventDefault();\n              void commit();\n            }}\n          >\n            <Check aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">Lưu</span>\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              cancel();\n            }}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">Hủy</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/keyboard-hint.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * Máy đang chạy có phải macOS không — chỉ biết được ở phía client.
+ *
+ * Trả về `false` ở lần render đầu (kể cả trên máy Mac) là CHỦ Ý: server không biết hệ điều hành
+ * của người dùng, nếu đoán bừa thì HTML server và client lệch nhau → React cảnh báo hydration
+ * và đôi khi vứt cả cây con. Hiện "Ctrl" trong một khung hình rồi đổi thành "⌘" là cái giá rẻ hơn.
+ */
+declare function useIsMac(): boolean;
+interface KeyboardHintProps {
+    /**
+     * Tổ hợp phím dạng chuỗi, vd `"mod+k"`, `"mod+shift+n"`, `"esc"`.
+     *
+     * Dùng `mod` cho phím lệnh chính: render thành `⌘` trên macOS và `Ctrl` ở nơi khác — viết
+     * cứng "Ctrl+K" trong giao diện là sai với một nửa người dùng.
+     */
+    keys: string;
+    /** Gộp các phím vào MỘT ô thay vì mỗi phím một ô (kiểu "⌘K") */
+    compact?: boolean;
+    className?: string;
+}
+/**
+ * Gợi ý phím tắt hiển thị đúng theo nền tảng.
+ *
+ * `aria-hidden` toàn bộ: ký hiệu ⌘⇧↵ đọc lên nghe vô nghĩa. Nút mang phím tắt nên tự mô tả
+ * trong `aria-label` (vd "Mở bảng lệnh, Ctrl K").
+ */
+declare function KeyboardHint({ keys, compact, className }: KeyboardHintProps): React.JSX.Element | null;
+
+export { KeyboardHint, type KeyboardHintProps, useIsMac };

package/dist/components/composite/keyboard-hint.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Kbd, KbdGroup } from "../ui/kbd.js";
+function useIsMac() {
+  const [isMac, setIsMac] = useState(false);
+  useEffect(() => {
+    setIsMac(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));
+  }, []);
+  return isMac;
+}
+const MAC_SYMBOLS = {
+  mod: "\u2318",
+  cmd: "\u2318",
+  meta: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  option: "\u2325",
+  shift: "\u21E7"
+};
+const OTHER_LABELS = {
+  mod: "Ctrl",
+  cmd: "Ctrl",
+  meta: "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  shift: "Shift"
+};
+const COMMON_LABELS = {
+  enter: "\u21B5",
+  return: "\u21B5",
+  esc: "Esc",
+  escape: "Esc",
+  space: "Space",
+  tab: "Tab",
+  backspace: "\u232B",
+  delete: "Del",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+function formatKey(token, isMac) {
+  const key = token.trim().toLowerCase();
+  if (!key) return "";
+  const modifier = isMac ? MAC_SYMBOLS[key] : OTHER_LABELS[key];
+  if (modifier) return modifier;
+  const common = COMMON_LABELS[key];
+  if (common) return common;
+  return key.length === 1 ? key.toUpperCase() : token.trim();
+}
+function KeyboardHint({ keys, compact = false, className }) {
+  const isMac = useIsMac();
+  const tokens = keys.split("+").map((token) => formatKey(token, isMac)).filter(Boolean);
+  if (tokens.length === 0) return null;
+  if (compact) {
+    return /* @__PURE__ */ jsx(Kbd, { "aria-hidden": "true", className, children: isMac ? tokens.join("") : tokens.join("+") });
+  }
+  return /* @__PURE__ */ jsx(KbdGroup, { "aria-hidden": "true", className: cn("shrink-0", className), children: tokens.map((token, index) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: token phím có thể trùng nhau và không có id riêng
+    /* @__PURE__ */ jsx(Kbd, { children: token }, `${index}-${token}`)
+  )) });
+}
+export {
+  KeyboardHint,
+  useIsMac
+};
+//# sourceMappingURL=keyboard-hint.js.map

package/dist/components/composite/keyboard-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/keyboard-hint.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Kbd, KbdGroup } from \"../ui/kbd.js\";\n\n/**\n * Máy đang chạy có phải macOS không — chỉ biết được ở phía client.\n *\n * Trả về `false` ở lần render đầu (kể cả trên máy Mac) là CHỦ Ý: server không biết hệ điều hành\n * của người dùng, nếu đoán bừa thì HTML server và client lệch nhau → React cảnh báo hydration\n * và đôi khi vứt cả cây con. Hiện \"Ctrl\" trong một khung hình rồi đổi thành \"⌘\" là cái giá rẻ hơn.\n */\nexport function useIsMac(): boolean {\n  const [isMac, setIsMac] = useState(false);\n\n  useEffect(() => {\n    setIsMac(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));\n  }, []);\n\n  return isMac;\n}\n\nconst MAC_SYMBOLS: Record<string, string> = {\n  mod: \"⌘\",\n  cmd: \"⌘\",\n  meta: \"⌘\",\n  ctrl: \"⌃\",\n  control: \"⌃\",\n  alt: \"⌥\",\n  option: \"⌥\",\n  shift: \"⇧\"\n};\n\nconst OTHER_LABELS: Record<string, string> = {\n  mod: \"Ctrl\",\n  cmd: \"Ctrl\",\n  meta: \"Ctrl\",\n  ctrl: \"Ctrl\",\n  control: \"Ctrl\",\n  alt: \"Alt\",\n  option: \"Alt\",\n  shift: \"Shift\"\n};\n\nconst COMMON_LABELS: Record<string, string> = {\n  enter: \"↵\",\n  return: \"↵\",\n  esc: \"Esc\",\n  escape: \"Esc\",\n  space: \"Space\",\n  tab: \"Tab\",\n  backspace: \"⌫\",\n  delete: \"Del\",\n  up: \"↑\",\n  down: \"↓\",\n  left: \"←\",\n  right: \"→\"\n};\n\n/** Chuyển một token phím thành nhãn hiển thị theo nền tảng. */\nfunction formatKey(token: string, isMac: boolean): string {\n  const key = token.trim().toLowerCase();\n  if (!key) return \"\";\n  const modifier = isMac ? MAC_SYMBOLS[key] : OTHER_LABELS[key];\n  if (modifier) return modifier;\n  const common = COMMON_LABELS[key];\n  if (common) return common;\n  return key.length === 1 ? key.toUpperCase() : token.trim();\n}\n\nexport interface KeyboardHintProps {\n  /**\n   * Tổ hợp phím dạng chuỗi, vd `\"mod+k\"`, `\"mod+shift+n\"`, `\"esc\"`.\n   *\n   * Dùng `mod` cho phím lệnh chính: render thành `⌘` trên macOS và `Ctrl` ở nơi khác — viết\n   * cứng \"Ctrl+K\" trong giao diện là sai với một nửa người dùng.\n   */\n  keys: string;\n  /** Gộp các phím vào MỘT ô thay vì mỗi phím một ô (kiểu \"⌘K\") */\n  compact?: boolean;\n  className?: string;\n}\n\n/**\n * Gợi ý phím tắt hiển thị đúng theo nền tảng.\n *\n * `aria-hidden` toàn bộ: ký hiệu ⌘⇧↵ đọc lên nghe vô nghĩa. Nút mang phím tắt nên tự mô tả\n * trong `aria-label` (vd \"Mở bảng lệnh, Ctrl K\").\n */\nexport function KeyboardHint({ keys, compact = false, className }: KeyboardHintProps) {\n  const isMac = useIsMac();\n  const tokens = keys\n    .split(\"+\")\n    .map((token) => formatKey(token, isMac))\n    .filter(Boolean);\n\n  if (tokens.length === 0) return null;\n\n  if (compact) {\n    return (\n      <Kbd aria-hidden=\"true\" className={className}>\n        {isMac ? tokens.join(\"\") : tokens.join(\"+\")}\n      </Kbd>\n    );\n  }\n\n  return (\n    <KbdGroup aria-hidden=\"true\" className={cn(\"shrink-0\", className)}>\n      {tokens.map((token, index) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: token phím có thể trùng nhau và không có id riêng\n        <Kbd key={`${index}-${token}`}>{token}</Kbd>\n      ))}\n    </KbdGroup>\n  );\n}\n"],"mappings":";AAqGM;AAnGN,SAAS,WAAW,gBAAgB;AACpC,SAAS,UAAU;AACnB,SAAS,KAAK,gBAAgB;AASvB,SAAS,WAAoB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,YAAU,MAAM;AACd,aAAS,wBAAwB,KAAK,UAAU,SAAS,CAAC;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAEA,MAAM,cAAsC;AAAA,EAC1C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,eAAuC;AAAA,EAC3C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,gBAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,KAAK;AAAA,EACL,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAGA,SAAS,UAAU,OAAe,OAAwB;AACxD,QAAM,MAAM,MAAM,KAAK,EAAE,YAAY;AACrC,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,WAAW,QAAQ,YAAY,GAAG,IAAI,aAAa,GAAG;AAC5D,MAAI,SAAU,QAAO;AACrB,QAAM,SAAS,cAAc,GAAG;AAChC,MAAI,OAAQ,QAAO;AACnB,SAAO,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI,MAAM,KAAK;AAC3D;AAqBO,SAAS,aAAa,EAAE,MAAM,UAAU,OAAO,UAAU,GAAsB;AACpF,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,KACZ,MAAM,GAAG,EACT,IAAI,CAAC,UAAU,UAAU,OAAO,KAAK,CAAC,EACtC,OAAO,OAAO;AAEjB,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,MAAI,SAAS;AACX,WACE,oBAAC,OAAI,eAAY,QAAO,WACrB,kBAAQ,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,GAAG,GAC5C;AAAA,EAEJ;AAEA,SACE,oBAAC,YAAS,eAAY,QAAO,WAAW,GAAG,YAAY,SAAS,GAC7D,iBAAO,IAAI,CAAC,OAAO;AAAA;AAAA,IAElB,oBAAC,OAA+B,mBAAtB,GAAG,KAAK,IAAI,KAAK,EAAW;AAAA,GACvC,GACH;AAEJ;","names":[]}

package/dist/components/composite/letter-avatar.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+
+type LetterAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * 8 tone màu deterministic — TẤT CẢ là class token tĩnh.
+ *
+ * Vì sao không sinh `bg-${color}-100`: Tailwind quét tĩnh, class ghép chuỗi lúc chạy sẽ không
+ * có mặt trong CSS của app → avatar mất nền. Vì sao không dùng hex inline: mất dark mode.
+ * Mỗi tone đã chọn cặp nền/chữ đạt tương phản ở cả hai theme.
+ *
+ * ⚠ Đây là NGUỒN SỰ THẬT DUY NHẤT cho màu avatar chữ cái của cả package: tầng shell
+ * (`shell/utils.ts` → `getAvatarToneClass`) gọi lại `getLetterAvatarTone` chứ không giữ
+ * bảng tone riêng. Đừng dựng bảng thứ hai — cùng một người mà ra hai màu trên cùng một
+ * trang là lỗi đã từng xảy ra ở 0.1.0.
+ */
+declare const LETTER_AVATAR_TONES: readonly ["bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100", "bg-teal/15 text-teal", "bg-green/15 text-green", "bg-red/15 text-red", "bg-yellow/25 text-gold-500 dark:bg-yellow/20 dark:text-yellow", "bg-chart-3/15 text-chart-3", "bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100", "bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper"];
+/**
+ * Tone màu ổn định theo tên — cùng một người luôn ra cùng màu ở mọi app Comitor.
+ *
+ * SEED là TÊN (đã trim + hạ chữ thường theo locale vi-VN), không phải email/slug: mọi nơi
+ * hiển thị avatar đều chắc chắn có `name`, còn email/slug thì không — lấy khoá khác nhau ở
+ * từng chỗ là cách nhanh nhất để cùng một người ra hai màu.
+ */
+declare function getLetterAvatarTone(name: string): string;
+interface LetterAvatarProps extends Omit<ComponentProps<"span">, "children"> {
+    /** Họ tên đầy đủ — dùng cho cả initials lẫn màu */
+    name: string;
+    /** Có ảnh thì hiện ảnh, không thì rơi về initials */
+    src?: string | null;
+    size?: LetterAvatarSize;
+    /** Bo vuông (dùng cho workspace/app) thay vì tròn (dùng cho người) */
+    square?: boolean;
+    /** Ghi đè tone (chuỗi class token) — vd tô theo màu app thay vì theo tên */
+    toneClassName?: string;
+}
+/**
+ * Avatar chữ cái: ảnh nếu có, không thì initials kiểu Việt (chữ đầu HỌ + chữ đầu TÊN) trên nền
+ * màu suy ra từ tên.
+ *
+ * Không dùng primitive `Avatar` (Radix) một cách cố ý: Radix Avatar là client component vì phải
+ * theo dõi trạng thái tải ảnh; ở danh sách 200 dòng thì đó là 200 island vô ích. Bản này tĩnh
+ * hoàn toàn → render thẳng ở server.
+ */
+declare function LetterAvatar({ name, src, size, square, toneClassName, className, ...props }: LetterAvatarProps): React.JSX.Element;
+
+export { LETTER_AVATAR_TONES, LetterAvatar, type LetterAvatarProps, type LetterAvatarSize, getLetterAvatarTone };