@comitor/ui 3.11.1 → 3.12.0

package/dist/chat/chat-steps.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ChatStepItem, ChatLabels } from './chat-constants.js';
+
+interface ChatStepsProps extends Omit<React.ComponentProps<"div">, "children"> {
+    steps: ChatStepItem[];
+    /**
+     * Mở danh sách bước (controlled). Bỏ trống thì tự giữ: MỞ khi còn bước đang làm hoặc có bước lỗi,
+     * tự THU lại khi mọi bước xong — câu trả lời mới là thứ cần đọc, các bước chỉ để soát lại.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<ChatLabels>;
+}
+/**
+ * Tiến trình của tác tử: các bước đang làm / xong / lỗi, gói gọn trong một dòng tóm tắt bấm được.
+ * Đặt vào prop `steps` của `ChatMessage`.
+ */
+declare function ChatSteps({ steps, open: openProp, onOpenChange, labels, className, ...props }: ChatStepsProps): React.JSX.Element;
+
+export { ChatSteps, type ChatStepsProps };

package/dist/chat/chat-steps.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Circle, CircleCheck, CircleX } from "lucide-react";
+import * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible.js";
+import { Spinner } from "../components/ui/spinner.js";
+import { useComitorLabels } from "../i18n/locale-provider.js";
+import { cn } from "../lib/cn.js";
+function StepIcon({ status }) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "size-4 text-muted-foreground" });
+    case "done":
+      return /* @__PURE__ */ jsx(CircleCheck, { "aria-hidden": "true", className: "size-4 text-success-ink" });
+    case "error":
+      return /* @__PURE__ */ jsx(CircleX, { "aria-hidden": "true", className: "size-4 text-destructive-ink" });
+    default:
+      return /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "size-4 text-muted-foreground" });
+  }
+}
+function ChatSteps({ steps, open: openProp, onOpenChange, labels, className, ...props }) {
+  const t = useComitorLabels("chat", labels);
+  const done = steps.filter((step) => step.status === "done").length;
+  const running = steps.some((step) => step.status === "running");
+  const failed = steps.some((step) => step.status === "error");
+  const settled = !running && steps.every((step) => step.status === "done" || step.status === "error");
+  const [openState, setOpenState] = React.useState(!settled || failed);
+  const touchedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!touchedRef.current) setOpenState(!settled || failed);
+  }, [settled, failed]);
+  const open = openProp ?? openState;
+  const statusText = {
+    pending: t.stepPending,
+    running: t.stepRunning,
+    done: t.stepDone,
+    error: t.stepError
+  };
+  const summaryStatus = failed ? "error" : running ? "running" : settled ? "done" : "pending";
+  return /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      open,
+      onOpenChange: (next) => {
+        touchedRef.current = true;
+        setOpenState(next);
+        onOpenChange?.(next);
+      },
+      children: /* @__PURE__ */ jsxs("div", { "data-slot": "chat-steps", className: cn("rounded-lg border bg-card", className), ...props, children: [
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-muted-foreground text-sm hover:text-foreground", children: [
+          /* @__PURE__ */ jsx(StepIcon, { status: summaryStatus }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: t.stepsSummary(done, steps.length) }),
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-4 transition-transform", open && "rotate-180") })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2 border-t px-3 py-2.5", children: steps.map((step) => /* @__PURE__ */ jsxs("li", { "data-slot": "chat-step", "data-status": step.status, className: "flex gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(StepIcon, { status: step.status }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: cn(step.status === "pending" ? "text-muted-foreground" : "text-foreground"), children: [
+              step.label,
+              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                " \u2014 ",
+                statusText[step.status]
+              ] })
+            ] }),
+            step.detail && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-0.5 text-xs",
+                  step.status === "error" ? "text-destructive-ink" : "text-muted-foreground"
+                ),
+                children: step.detail
+              }
+            )
+          ] })
+        ] }, step.id)) }) })
+      ] })
+    }
+  );
+}
+export {
+  ChatSteps
+};
+//# sourceMappingURL=chat-steps.js.map

package/dist/chat/chat-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/chat/chat-steps.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown, Circle, CircleCheck, CircleX } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../components/ui/collapsible.js\";\nimport { Spinner } from \"../components/ui/spinner.js\";\nimport { useComitorLabels } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\nimport type { ChatLabels, ChatStepItem, ChatStepStatus } from \"./chat-constants.js\";\n\nexport interface ChatStepsProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  steps: ChatStepItem[];\n  /**\n   * Mở danh sách bước (controlled). Bỏ trống thì tự giữ: MỞ khi còn bước đang làm hoặc có bước lỗi,\n   * tự THU lại khi mọi bước xong — câu trả lời mới là thứ cần đọc, các bước chỉ để soát lại.\n   */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  labels?: Partial<ChatLabels>;\n}\n\nfunction StepIcon({ status }: { status: ChatStepStatus }) {\n  switch (status) {\n    case \"running\":\n      return <Spinner aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />;\n    case \"done\":\n      return <CircleCheck aria-hidden=\"true\" className=\"size-4 text-success-ink\" />;\n    case \"error\":\n      return <CircleX aria-hidden=\"true\" className=\"size-4 text-destructive-ink\" />;\n    default:\n      return <Circle aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />;\n  }\n}\n\n/**\n * Tiến trình của tác tử: các bước đang làm / xong / lỗi, gói gọn trong một dòng tóm tắt bấm được.\n * Đặt vào prop `steps` của `ChatMessage`.\n */\nexport function ChatSteps({ steps, open: openProp, onOpenChange, labels, className, ...props }: ChatStepsProps) {\n  const t = useComitorLabels(\"chat\", labels);\n  const done = steps.filter((step) => step.status === \"done\").length;\n  const running = steps.some((step) => step.status === \"running\");\n  const failed = steps.some((step) => step.status === \"error\");\n  const settled = !running && steps.every((step) => step.status === \"done\" || step.status === \"error\");\n\n  // Tự mở/thu theo tiến trình — nhưng người dùng đã tự bấm thì thôi tự động.\n  const [openState, setOpenState] = React.useState(!settled || failed);\n  const touchedRef = React.useRef(false);\n  React.useEffect(() => {\n    if (!touchedRef.current) setOpenState(!settled || failed);\n  }, [settled, failed]);\n  const open = openProp ?? openState;\n\n  const statusText: Record<ChatStepStatus, string> = {\n    pending: t.stepPending,\n    running: t.stepRunning,\n    done: t.stepDone,\n    error: t.stepError\n  };\n  const summaryStatus: ChatStepStatus = failed ? \"error\" : running ? \"running\" : settled ? \"done\" : \"pending\";\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={(next) => {\n        touchedRef.current = true;\n        setOpenState(next);\n        onOpenChange?.(next);\n      }}\n    >\n      <div data-slot=\"chat-steps\" className={cn(\"rounded-lg border bg-card\", className)} {...props}>\n        <CollapsibleTrigger className=\"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-muted-foreground text-sm hover:text-foreground\">\n          <StepIcon status={summaryStatus} />\n          <span className=\"flex-1\">{t.stepsSummary(done, steps.length)}</span>\n          <ChevronDown aria-hidden=\"true\" className={cn(\"size-4 transition-transform\", open && \"rotate-180\")} />\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <ol className=\"flex flex-col gap-2 border-t px-3 py-2.5\">\n            {steps.map((step) => (\n              <li key={step.id} data-slot=\"chat-step\" data-status={step.status} className=\"flex gap-2 text-sm\">\n                <span className=\"mt-0.5 shrink-0\">\n                  <StepIcon status={step.status} />\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <div className={cn(step.status === \"pending\" ? \"text-muted-foreground\" : \"text-foreground\")}>\n                    {step.label}\n                    <span className=\"sr-only\"> — {statusText[step.status]}</span>\n                  </div>\n                  {step.detail && (\n                    <div\n                      className={cn(\n                        \"mt-0.5 text-xs\",\n                        step.status === \"error\" ? \"text-destructive-ink\" : \"text-muted-foreground\"\n                      )}\n                    >\n                      {step.detail}\n                    </div>\n                  )}\n                </div>\n              </li>\n            ))}\n          </ol>\n        </CollapsibleContent>\n      </div>\n    </Collapsible>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chat/chat-thread.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ChatLabels } from './chat-constants.js';
+
+interface ChatThreadProps extends React.ComponentProps<"div"> {
+    /**
+     * Tác tử đang trả lời. Đặt `aria-busy` lên vùng `log`: trình đọc màn hình CHỜ tới khi xong rồi mới
+     * đọc tin mới — không thì nó đọc lại từng mẩu chữ đang về, hàng chục lần một câu.
+     */
+    busy?: boolean;
+    /** Lớp cho cột tin bên trong (mặc định rộng tối đa `max-w-3xl`, căn giữa). */
+    contentClassName?: string;
+    labels?: Partial<ChatLabels>;
+}
+/**
+ * Vùng cuộn của cuộc trò chuyện: `role="log"`, tự bám đáy khi có chữ mới VÀ người dùng đang ở cuối.
+ * Người dùng cuộn lên đọc lại thì thôi bám (không giật xuống giữa lúc đọc), và hiện nút "về tin mới
+ * nhất". Con là các `ChatMessage`.
+ */
+declare function ChatThread({ busy, className, contentClassName, labels, children, "aria-label": ariaLabel, ...props }: ChatThreadProps): React.JSX.Element;
+
+export { ChatThread, type ChatThreadProps };

package/dist/chat/chat-thread.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import * as React from "react";
+import { Button } from "../components/ui/button.js";
+import { useComitorLabels } from "../i18n/locale-provider.js";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/use-isomorphic-layout-effect.js";
+const STICK_THRESHOLD = 48;
+function ChatThread({
+  busy,
+  className,
+  contentClassName,
+  labels,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const t = useComitorLabels("chat", labels);
+  const scrollRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const atBottomRef = React.useRef(true);
+  const [atBottom, setAtBottom] = React.useState(true);
+  const scrollToBottom = React.useCallback((behavior = "auto") => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = el.scrollHeight - el.scrollTop - el.clientHeight <= STICK_THRESHOLD;
+    atBottomRef.current = next;
+    setAtBottom(next);
+  };
+  useIsomorphicLayoutEffect(() => {
+    scrollToBottom();
+    const content = contentRef.current;
+    if (!content) return;
+    const observer = new ResizeObserver(() => {
+      if (atBottomRef.current) scrollToBottom();
+    });
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [scrollToBottom]);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-thread", className: cn("relative flex min-h-0 flex-col", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        role: "log",
+        "aria-label": ariaLabel ?? t.log,
+        "aria-busy": busy || void 0,
+        tabIndex: 0,
+        className: "min-h-0 flex-1 overflow-y-auto overscroll-contain outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring",
+        onScroll,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            className: cn("mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6", contentClassName),
+            children
+          }
+        )
+      }
+    ),
+    !atBottom && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "icon-sm",
+        "aria-label": t.scrollToLatest,
+        className: "absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-card shadow-overlay",
+        onClick: () => {
+          atBottomRef.current = true;
+          setAtBottom(true);
+          scrollToBottom("smooth");
+        },
+        children: /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true", className: "size-4" })
+      }
+    )
+  ] });
+}
+export {
+  ChatThread
+};
+//# sourceMappingURL=chat-thread.js.map

package/dist/chat/chat-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/chat/chat-thread.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Bố cục khung hội thoại tham khảo prompt-kit (https://www.prompt-kit.com) — MIT License, Copyright\n * (c) 2025 Julien Thibeaut — và AI Elements của Vercel (Apache-2.0). Không chép mã: cả hai dựa vào\n * `use-stick-to-bottom` và `streamdown`; gói tự viết phần bám đáy (~40 dòng) và vẽ markdown bằng\n * chính `MarkdownEditor` chỉ-đọc. Lý do: docs/chat.md.\n */\nimport { ArrowDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../components/ui/button.js\";\nimport { useComitorLabels } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/use-isomorphic-layout-effect.js\";\nimport type { ChatLabels } from \"./chat-constants.js\";\n\nexport interface ChatThreadProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Tác tử đang trả lời. Đặt `aria-busy` lên vùng `log`: trình đọc màn hình CHỜ tới khi xong rồi mới\n   * đọc tin mới — không thì nó đọc lại từng mẩu chữ đang về, hàng chục lần một câu.\n   */\n  busy?: boolean;\n  /** Lớp cho cột tin bên trong (mặc định rộng tối đa `max-w-3xl`, căn giữa). */\n  contentClassName?: string;\n  labels?: Partial<ChatLabels>;\n}\n\n/** Khoảng cách tới đáy (px) mà vẫn coi là \"đang ở cuối\" — chữ mới về thì tự cuộn theo. */\nconst STICK_THRESHOLD = 48;\n\n/**\n * Vùng cuộn của cuộc trò chuyện: `role=\"log\"`, tự bám đáy khi có chữ mới VÀ người dùng đang ở cuối.\n * Người dùng cuộn lên đọc lại thì thôi bám (không giật xuống giữa lúc đọc), và hiện nút \"về tin mới\n * nhất\". Con là các `ChatMessage`.\n */\nexport function ChatThread({\n  busy,\n  className,\n  contentClassName,\n  labels,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ChatThreadProps) {\n  const t = useComitorLabels(\"chat\", labels);\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const atBottomRef = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = \"auto\") => {\n    const el = scrollRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior });\n  }, []);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const next = el.scrollHeight - el.scrollTop - el.clientHeight <= STICK_THRESHOLD;\n    atBottomRef.current = next;\n    setAtBottom(next);\n  };\n\n  // Mở ra là đứng ở tin cuối; nội dung lớn lên (tin mới, chữ đang về, ảnh tải xong) thì bám theo nếu\n  // đang ở cuối. Theo dõi CỠ của cột tin chứ không theo `children`: chữ streaming đổi cỡ mà không\n  // đổi số con, còn ảnh trong tin đổi cỡ mà không qua React.\n  useIsomorphicLayoutEffect(() => {\n    scrollToBottom();\n    const content = contentRef.current;\n    if (!content) return;\n    const observer = new ResizeObserver(() => {\n      if (atBottomRef.current) scrollToBottom();\n    });\n    observer.observe(content);\n    return () => observer.disconnect();\n  }, [scrollToBottom]);\n\n  return (\n    <div data-slot=\"chat-thread\" className={cn(\"relative flex min-h-0 flex-col\", className)} {...props}>\n      <div\n        ref={scrollRef}\n        role=\"log\"\n        aria-label={ariaLabel ?? t.log}\n        aria-busy={busy || undefined}\n        // Vùng cuộn phải tự nhận focus được — người chỉ dùng bàn phím mới cuộn được lịch sử (axe:\n        // scrollable-region-focusable; Chrome tự làm việc này, Safari thì không).\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: vùng cuộn, không phải điều khiển — lý do ở trên\n        tabIndex={0}\n        className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n        onScroll={onScroll}\n      >\n        <div\n          ref={contentRef}\n          className={cn(\"mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6\", contentClassName)}\n        >\n          {children}\n        </div>\n      </div>\n      {!atBottom && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon-sm\"\n          aria-label={t.scrollToLatest}\n          className=\"absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-card shadow-overlay\"\n          onClick={() => {\n            atBottomRef.current = true;\n            setAtBottom(true);\n            scrollToBottom(\"smooth\");\n          }}\n        >\n          <ArrowDown aria-hidden=\"true\" className=\"size-4\" />\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8EI,SAaI,KAbJ;AAtEJ,SAAS,iBAAiB;AAC1B,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AACnB,SAAS,iCAAiC;AAe1C,MAAM,kBAAkB;AAOjB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAoB;AAClB,QAAM,IAAI,iBAAiB,QAAQ,MAAM;AACzC,QAAM,YAAY,MAAM,OAAuB,IAAI;AACnD,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,IAAI;AAEnD,QAAM,iBAAiB,MAAM,YAAY,CAAC,WAA2B,WAAW;AAC9E,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,IAAG,SAAS,EAAE,KAAK,GAAG,cAAc,SAAS,CAAC;AAAA,EACxD,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,YAAY,GAAG,gBAAgB;AACjE,gBAAY,UAAU;AACtB,gBAAY,IAAI;AAAA,EAClB;AAKA,4BAA0B,MAAM;AAC9B,mBAAe;AACf,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AACd,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,UAAI,YAAY,QAAS,gBAAe;AAAA,IAC1C,CAAC;AACD,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,qBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAC3F;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY,aAAa,EAAE;AAAA,QAC3B,aAAW,QAAQ;AAAA,QAInB,UAAU;AAAA,QACV,WAAU;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,GAAG,0DAA0D,gBAAgB;AAAA,YAEvF;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,CAAC,YACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAY,EAAE;AAAA,QACd,WAAU;AAAA,QACV,SAAS,MAAM;AACb,sBAAY,UAAU;AACtB,sBAAY,IAAI;AAChB,yBAAe,QAAQ;AAAA,QACzB;AAAA,QAEA,8BAAC,aAAU,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,IACnD;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chat/index.d.ts

@@ -0,0 +1,12 @@
+export { ChatComposer, ChatComposerProps } from './chat-composer.js';
+export { ChatLabels, ChatRole, ChatSource, ChatStepItem, ChatStepStatus } from './chat-constants.js';
+export { ChatMessage, ChatMessageProps } from './chat-message.js';
+export { ChatCitation, ChatCitationProps, ChatSources, ChatSourcesProps } from './chat-sources.js';
+export { ChatSteps, ChatStepsProps } from './chat-steps.js';
+export { ChatThread, ChatThreadProps } from './chat-thread.js';
+import 'react';
+import '../editor-types-BacXD2VN.js';
+import '@tiptap/core';
+import '../components/composite/empty-state.js';
+import '../editor/markdown-editor-constants.js';
+import '../editor/markdown-editor.js';

package/dist/chat/index.js

@@ -0,0 +1,14 @@
+import { ChatComposer } from "./chat-composer.js";
+import { ChatMessage } from "./chat-message.js";
+import { ChatCitation, ChatSources } from "./chat-sources.js";
+import { ChatSteps } from "./chat-steps.js";
+import { ChatThread } from "./chat-thread.js";
+export {
+  ChatCitation,
+  ChatComposer,
+  ChatMessage,
+  ChatSources,
+  ChatSteps,
+  ChatThread
+};
+//# sourceMappingURL=index.js.map

package/dist/chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/chat/index.ts"],"sourcesContent":["/**\n * Entry `@comitor/ui/chat` — khung hội thoại cho trợ lý AI và các tác tử: danh sách tin, bước tiến\n * trình của tác tử, nguồn trích dẫn bấm được, ô nhập có `@`, chữ trả về dần.\n *\n * ── VÌ SAO LÀ MỘT ENTRY RIÊNG ────────────────────────────────────────────────────────────────\n * Tin nhắn vẽ markdown bằng CHÍNH `MarkdownEditor` chỉ-đọc, và ô nhập là `MarkdownEditor` — nên entry\n * này kéo đúng bộ peer TUỲ CHỌN của `/editor` (13 gói `@tiptap/*` cùng một phiên bản, `lowlight`).\n * Để ở entry `.` là bắt mọi app cài Tiptap. Gộp vào `/editor` thì không tốn byte (`bundle: false`)\n * nhưng trộn hai bề mặt API khác nghề vào một entry — trình soạn là ô nhập, đây là cả một màn.\n * Cài peer: xem đầu `src/editor/index.ts`.\n *\n * Gói không giữ trạng thái hội thoại, không gọi mô hình: app giữ danh sách tin, đẩy chữ đang về\n * vào `content`, và quyết định khi nào `busy`/`streaming`. Tài liệu: docs/chat.md.\n */\n\nexport { ChatComposer, type ChatComposerProps } from \"./chat-composer.js\";\nexport type {\n  ChatLabels,\n  ChatRole,\n  ChatSource,\n  ChatStepItem,\n  ChatStepStatus\n} from \"./chat-constants.js\";\nexport { ChatMessage, type ChatMessageProps } from \"./chat-message.js\";\nexport { ChatCitation, type ChatCitationProps, ChatSources, type ChatSourcesProps } from \"./chat-sources.js\";\nexport { ChatSteps, type ChatStepsProps } from \"./chat-steps.js\";\nexport { ChatThread, type ChatThreadProps } from \"./chat-thread.js\";\n"],"mappings":"AAeA,SAAS,oBAA4C;AAQrD,SAAS,mBAA0C;AACnD,SAAS,cAAsC,mBAA0C;AACzF,SAAS,iBAAsC;AAC/C,SAAS,kBAAwC;","names":[]}

package/dist/components/composite/gantt-constants.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Kiểu dữ liệu + hằng của `Gantt` — module THUẦN (không `"use client"`), barrel xuất THẲNG từ đây.
+ * Lý do: `GANTT_SCALES` là một mảng; mọi export của file `"use client"` tới Server Component là
+ * client-reference proxy và đọc ra `undefined` (xem `src/chart/chart-colors.ts`).
+ *
+ * ─ HỢP ĐỒNG NGÀY ─
+ * Mọi ngày đi qua API là chuỗi `yyyy-MM-dd` (ngày LỊCH, không giờ, không múi giờ). Gantt làm việc
+ * theo NGÀY: một `Date` sẽ kéo theo múi giờ của trình duyệt, và "hạn chót 31/10" mở ở Hà Nội với
+ * mở ở San Francisco phải là cùng một ô. `end` là ngày CUỐI CÙNG có làm (bao gồm), không phải
+ * "ngày sau ngày cuối" — việc một ngày có `start === end`.
+ */
+/** Bậc phóng của trục thời gian. `day`/`week` cho Gantt việc; `month`/`quarter`/`year` cho lộ trình. */
+type GanttScale = "day" | "week" | "month" | "quarter" | "year";
+/** Các bậc phóng, theo thứ tự từ gần tới xa — dùng để dựng nút chọn bậc của riêng app. */
+declare const GANTT_SCALES: readonly GanttScale[];
+/**
+ * Màu của thanh. Mỗi tone là một màu có ĐỦ ba vai trò trong `styles.css` (`--x` tô thanh,
+ * `--x-foreground` chữ trong thanh, `--x-ink` viền + mốc) — nên thanh đổi đúng theo dark mode và
+ * bảng tương phản cao. Không nhận màu tự do: màu tự do không đo được tương phản (docs/diceui.md §1.4).
+ */
+type GanttTone = "neutral" | "primary" | "blue" | "teal" | "green" | "yellow" | "orange" | "red" | "purple" | "pink" | "navy";
+/** Kiểu quan hệ phụ thuộc. Mặc định `finish-to-start` — việc sau chỉ bắt đầu khi việc trước xong. */
+type GanttDependencyType = "finish-to-start" | "start-to-start" | "finish-to-finish" | "start-to-finish";
+interface GanttItem {
+    /** Khoá duy nhất — `dependencies` tham chiếu tới nó. */
+    id: string;
+    /** Tên hiển thị ở cột trái và trong thanh. */
+    title: string;
+    /** Ngày bắt đầu `yyyy-MM-dd`. Thiếu `start` hoặc `end` = việc CHƯA XẾP LỊCH: dòng không có thanh. */
+    start?: string | null;
+    /** Ngày kết thúc `yyyy-MM-dd`, BAO GỒM. Mốc (`type: "milestone"`) chỉ đọc `start`. */
+    end?: string | null;
+    /**
+     * `task` (mặc định) — thanh kéo được; `summary` — thanh mảnh của một nhóm (dự án, giai đoạn), dải
+     * ngày do app tính từ con, không kéo được; `milestone` — hình thoi ở ngày `start`, kéo được.
+     */
+    type?: "task" | "summary" | "milestone";
+    /** Độ sâu trong cây (0 = gốc) — chỉ để thụt lề ở cột trái và `aria-level`. */
+    depth?: number;
+    /** Có con hay không — hiện nút mở/thu. Gantt KHÔNG tự ẩn con: app lọc `items` theo `expanded`. */
+    hasChildren?: boolean;
+    /** Nhánh đang mở — chỉ có nghĩa khi `hasChildren`. */
+    expanded?: boolean;
+    /** Tiến độ 0–100. */
+    progress?: number;
+    /** Màu của thanh (mặc định `neutral`). */
+    tone?: GanttTone;
+    /**
+     * Nằm trên ĐƯỜNG GĂNG. Gói không tự tính đường găng — nó phụ thuộc lịch làm việc, độ trễ và luật
+     * của từng app; app tính rồi đánh dấu, gói chỉ tô nổi (viền đỏ đậm, mũi tên đỏ).
+     */
+    critical?: boolean;
+    /** Khoá kéo/giãn/bàn phím riêng dòng này (vd việc đã xong, không có quyền sửa). */
+    readOnly?: boolean;
+}
+interface GanttDependency {
+    id: string;
+    /** `id` của việc đứng TRƯỚC. */
+    from: string;
+    /** `id` của việc đứng SAU. */
+    to: string;
+    type?: GanttDependencyType;
+    /** Mũi tên nằm trên đường găng — tô đỏ, nét đậm. */
+    critical?: boolean;
+}
+/** Thay đổi ngày do người dùng kéo/giãn/gõ phím — app ghi vào dữ liệu của mình rồi truyền `items` mới. */
+interface GanttItemChange {
+    id: string;
+    start: string;
+    end: string;
+    /** Cách thay đổi xảy ra: dời cả thanh, giãn đầu, giãn đuôi, hay xếp lịch cho việc chưa có ngày. */
+    kind: "move" | "resize-start" | "resize-end" | "schedule";
+}
+/** Phụ thuộc mới do người dùng nối từ chấm ở đuôi thanh này sang thanh khác. */
+interface GanttDependencyDraft {
+    from: string;
+    to: string;
+    type: GanttDependencyType;
+}
+/**
+ * Mọi chữ `Gantt` tự vẽ hoặc tự đọc cho trình đọc màn hình. Chữ có tham số là HÀM. Theo
+ * `ComitorLocaleProvider` (namespace `gantt`), đè từng khoá qua prop `labels`.
+ */
+interface GanttLabels {
+    /** Tên vùng lưới khi app không truyền `aria-label`. */
+    label: string;
+    /** Tiêu đề cột trái. */
+    sidebarTitle: string;
+    /** Tên nhóm nút chọn bậc phóng. */
+    scaleLabel: string;
+    scaleDay: string;
+    scaleWeek: string;
+    scaleMonth: string;
+    scaleQuarter: string;
+    scaleYear: string;
+    /** Nút cuộn về hôm nay. */
+    today: string;
+    /** Nhãn quý ở đầu trục. */
+    quarter: (quarter: number, year: number) => string;
+    /** Mô tả dải ngày của một việc cho trình đọc màn hình. */
+    itemRange: (start: string, end: string, days: number) => string;
+    /** Mô tả ngày của một mốc. */
+    milestoneDate: (date: string) => string;
+    progress: (percent: number) => string;
+    /** Việc chưa có ngày. */
+    unscheduled: string;
+    /** Gắn vào việc trên đường găng. */
+    critical: string;
+    /** Gắn vào việc đang vi phạm một phụ thuộc (bắt đầu trước khi việc trước xong). */
+    conflict: string;
+    /** Hướng dẫn phím, gắn qua `aria-describedby`. */
+    instructions: string;
+    /** Xướng sau khi đổi ngày bằng bàn phím. */
+    rescheduled: (title: string, range: string) => string;
+    expand: string;
+    collapse: string;
+    /** Nút ở mép trục cuộn tới một thanh đang nằm ngoài khung nhìn. */
+    scrollToItem: (title: string) => string;
+    /** Tên chấm nối phụ thuộc ở đuôi thanh. */
+    linkHandle: (title: string) => string;
+    /** Mô tả một mũi tên phụ thuộc (thẻ `<title>` của SVG). */
+    dependency: (from: string, to: string) => string;
+    /** Gợi ý ở dòng chưa có ngày khi rê chuột: bấm để xếp lịch. */
+    scheduleHint: string;
+}
+
+export { GANTT_SCALES, type GanttDependency, type GanttDependencyDraft, type GanttDependencyType, type GanttItem, type GanttItemChange, type GanttLabels, type GanttScale, type GanttTone };

package/dist/components/composite/gantt-constants.js

@@ -0,0 +1,5 @@
+const GANTT_SCALES = ["day", "week", "month", "quarter", "year"];
+export {
+  GANTT_SCALES
+};
+//# sourceMappingURL=gantt-constants.js.map

package/dist/components/composite/gantt-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/gantt-constants.ts"],"sourcesContent":["/**\n * Kiểu dữ liệu + hằng của `Gantt` — module THUẦN (không `\"use client\"`), barrel xuất THẲNG từ đây.\n * Lý do: `GANTT_SCALES` là một mảng; mọi export của file `\"use client\"` tới Server Component là\n * client-reference proxy và đọc ra `undefined` (xem `src/chart/chart-colors.ts`).\n *\n * ─ HỢP ĐỒNG NGÀY ─\n * Mọi ngày đi qua API là chuỗi `yyyy-MM-dd` (ngày LỊCH, không giờ, không múi giờ). Gantt làm việc\n * theo NGÀY: một `Date` sẽ kéo theo múi giờ của trình duyệt, và \"hạn chót 31/10\" mở ở Hà Nội với\n * mở ở San Francisco phải là cùng một ô. `end` là ngày CUỐI CÙNG có làm (bao gồm), không phải\n * \"ngày sau ngày cuối\" — việc một ngày có `start === end`.\n */\n\n/** Bậc phóng của trục thời gian. `day`/`week` cho Gantt việc; `month`/`quarter`/`year` cho lộ trình. */\nexport type GanttScale = \"day\" | \"week\" | \"month\" | \"quarter\" | \"year\";\n\n/** Các bậc phóng, theo thứ tự từ gần tới xa — dùng để dựng nút chọn bậc của riêng app. */\nexport const GANTT_SCALES: readonly GanttScale[] = [\"day\", \"week\", \"month\", \"quarter\", \"year\"];\n\n/**\n * Màu của thanh. Mỗi tone là một màu có ĐỦ ba vai trò trong `styles.css` (`--x` tô thanh,\n * `--x-foreground` chữ trong thanh, `--x-ink` viền + mốc) — nên thanh đổi đúng theo dark mode và\n * bảng tương phản cao. Không nhận màu tự do: màu tự do không đo được tương phản (docs/diceui.md §1.4).\n */\nexport type GanttTone =\n  | \"neutral\"\n  | \"primary\"\n  | \"blue\"\n  | \"teal\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"pink\"\n  | \"navy\";\n\n/** Kiểu quan hệ phụ thuộc. Mặc định `finish-to-start` — việc sau chỉ bắt đầu khi việc trước xong. */\nexport type GanttDependencyType = \"finish-to-start\" | \"start-to-start\" | \"finish-to-finish\" | \"start-to-finish\";\n\nexport interface GanttItem {\n  /** Khoá duy nhất — `dependencies` tham chiếu tới nó. */\n  id: string;\n  /** Tên hiển thị ở cột trái và trong thanh. */\n  title: string;\n  /** Ngày bắt đầu `yyyy-MM-dd`. Thiếu `start` hoặc `end` = việc CHƯA XẾP LỊCH: dòng không có thanh. */\n  start?: string | null;\n  /** Ngày kết thúc `yyyy-MM-dd`, BAO GỒM. Mốc (`type: \"milestone\"`) chỉ đọc `start`. */\n  end?: string | null;\n  /**\n   * `task` (mặc định) — thanh kéo được; `summary` — thanh mảnh của một nhóm (dự án, giai đoạn), dải\n   * ngày do app tính từ con, không kéo được; `milestone` — hình thoi ở ngày `start`, kéo được.\n   */\n  type?: \"task\" | \"summary\" | \"milestone\";\n  /** Độ sâu trong cây (0 = gốc) — chỉ để thụt lề ở cột trái và `aria-level`. */\n  depth?: number;\n  /** Có con hay không — hiện nút mở/thu. Gantt KHÔNG tự ẩn con: app lọc `items` theo `expanded`. */\n  hasChildren?: boolean;\n  /** Nhánh đang mở — chỉ có nghĩa khi `hasChildren`. */\n  expanded?: boolean;\n  /** Tiến độ 0–100. */\n  progress?: number;\n  /** Màu của thanh (mặc định `neutral`). */\n  tone?: GanttTone;\n  /**\n   * Nằm trên ĐƯỜNG GĂNG. Gói không tự tính đường găng — nó phụ thuộc lịch làm việc, độ trễ và luật\n   * của từng app; app tính rồi đánh dấu, gói chỉ tô nổi (viền đỏ đậm, mũi tên đỏ).\n   */\n  critical?: boolean;\n  /** Khoá kéo/giãn/bàn phím riêng dòng này (vd việc đã xong, không có quyền sửa). */\n  readOnly?: boolean;\n}\n\nexport interface GanttDependency {\n  id: string;\n  /** `id` của việc đứng TRƯỚC. */\n  from: string;\n  /** `id` của việc đứng SAU. */\n  to: string;\n  type?: GanttDependencyType;\n  /** Mũi tên nằm trên đường găng — tô đỏ, nét đậm. */\n  critical?: boolean;\n}\n\n/** Thay đổi ngày do người dùng kéo/giãn/gõ phím — app ghi vào dữ liệu của mình rồi truyền `items` mới. */\nexport interface GanttItemChange {\n  id: string;\n  start: string;\n  end: string;\n  /** Cách thay đổi xảy ra: dời cả thanh, giãn đầu, giãn đuôi, hay xếp lịch cho việc chưa có ngày. */\n  kind: \"move\" | \"resize-start\" | \"resize-end\" | \"schedule\";\n}\n\n/** Phụ thuộc mới do người dùng nối từ chấm ở đuôi thanh này sang thanh khác. */\nexport interface GanttDependencyDraft {\n  from: string;\n  to: string;\n  type: GanttDependencyType;\n}\n\n/**\n * Mọi chữ `Gantt` tự vẽ hoặc tự đọc cho trình đọc màn hình. Chữ có tham số là HÀM. Theo\n * `ComitorLocaleProvider` (namespace `gantt`), đè từng khoá qua prop `labels`.\n */\nexport interface GanttLabels {\n  /** Tên vùng lưới khi app không truyền `aria-label`. */\n  label: string;\n  /** Tiêu đề cột trái. */\n  sidebarTitle: string;\n  /** Tên nhóm nút chọn bậc phóng. */\n  scaleLabel: string;\n  scaleDay: string;\n  scaleWeek: string;\n  scaleMonth: string;\n  scaleQuarter: string;\n  scaleYear: string;\n  /** Nút cuộn về hôm nay. */\n  today: string;\n  /** Nhãn quý ở đầu trục. */\n  quarter: (quarter: number, year: number) => string;\n  /** Mô tả dải ngày của một việc cho trình đọc màn hình. */\n  itemRange: (start: string, end: string, days: number) => string;\n  /** Mô tả ngày của một mốc. */\n  milestoneDate: (date: string) => string;\n  progress: (percent: number) => string;\n  /** Việc chưa có ngày. */\n  unscheduled: string;\n  /** Gắn vào việc trên đường găng. */\n  critical: string;\n  /** Gắn vào việc đang vi phạm một phụ thuộc (bắt đầu trước khi việc trước xong). */\n  conflict: string;\n  /** Hướng dẫn phím, gắn qua `aria-describedby`. */\n  instructions: string;\n  /** Xướng sau khi đổi ngày bằng bàn phím. */\n  rescheduled: (title: string, range: string) => string;\n  expand: string;\n  collapse: string;\n  /** Nút ở mép trục cuộn tới một thanh đang nằm ngoài khung nhìn. */\n  scrollToItem: (title: string) => string;\n  /** Tên chấm nối phụ thuộc ở đuôi thanh. */\n  linkHandle: (title: string) => string;\n  /** Mô tả một mũi tên phụ thuộc (thẻ `<title>` của SVG). */\n  dependency: (from: string, to: string) => string;\n  /** Gợi ý ở dòng chưa có ngày khi rê chuột: bấm để xếp lịch. */\n  scheduleHint: string;\n}\n"],"mappings":"AAgBO,MAAM,eAAsC,CAAC,OAAO,QAAQ,SAAS,WAAW,MAAM;","names":[]}

package/dist/components/composite/gantt-utils.d.ts

@@ -0,0 +1,106 @@
+import { GanttScale, GanttDependencyType } from './gantt-constants.js';
+
+/**
+ * Phần THUẦN của `Gantt`: toán ngày, thang trục, định tuyến mũi tên phụ thuộc. Không React, không
+ * DOM — nên kiểm được bằng Node trần (`scripts/check-gantt.mjs` gọi thẳng file build).
+ *
+ * KHÔNG nằm trong barrel: đây là nội tạng của component, không phải API.
+ *
+ * ─ VÌ SAO ĐẾM NGÀY BẰNG SỐ NGUYÊN, KHÔNG BẰNG `Date` ─
+ * Mỗi ngày lịch là MỘT số nguyên: số ngày kể từ 1970-01-01 theo UTC. Cộng trừ ngày thành cộng trừ
+ * số, không có giờ, không có múi giờ, không có ngày 23/25 tiếng lúc đổi giờ mùa hè. `Date` cục bộ
+ * chỉ xuất hiện ở lúc ĐỊNH DẠNG nhãn (xem `dayToLocalDate`).
+ */
+
+/** `"2026-10-30"` → số ngày. Chuỗi hỏng → `null` (không ném: dữ liệu bẩn không được làm đổ cả lưới). */
+declare function parseDay(value: string | null | undefined): number | null;
+/** Số ngày → `"yyyy-MM-dd"`. */
+declare function formatDay(day: number): string;
+/** Hôm nay theo LỊCH của máy người dùng (không phải theo UTC — 7 giờ sáng ở Hà Nội vẫn là hôm nay). */
+declare function todayDay(): number;
+/** `Date` CỤC BỘ lúc 12 giờ trưa của ngày đó — chỉ để đưa cho `Intl.DateTimeFormat`. */
+declare function dayToLocalDate(day: number): Date;
+/** Thứ trong tuần: 0 = Chủ nhật … 6 = Thứ bảy (khớp `Date#getDay`). 1970-01-01 là thứ năm. */
+declare function weekday(day: number): number;
+type GanttUnit = "day" | "week" | "month" | "quarter" | "year";
+/** Ngày đầu của đơn vị chứa `day`. Tuần bắt đầu ở `weekStartsOn` (1 = thứ hai, theo ISO và lịch Việt). */
+declare function startOfUnit(day: number, unit: GanttUnit, weekStartsOn?: number): number;
+/** Cộng `amount` đơn vị. Tháng/quý/năm cộng theo LỊCH (31/1 + 1 tháng = 28 hoặc 29/2, không tràn sang tháng 3). */
+declare function addUnit(day: number, unit: GanttUnit, amount: number): number;
+interface ScaleConfig {
+    /** Bề rộng một ngày, px. */
+    pxPerDay: number;
+    /** Đơn vị của hàng trên của đầu trục (`null` = không có hàng trên). */
+    major: GanttUnit | null;
+    /** Đơn vị của hàng dưới — cũng là bước của vạch lưới. */
+    minor: GanttUnit;
+    /** Lề thêm hai đầu dải ngày, tính bằng ngày. */
+    paddingDays: number;
+    /** Bước của Shift+mũi tên. */
+    bigStep: GanttUnit;
+    /** Tô ngày nghỉ hay không — ở bậc tháng trở lên một ngày < 5px, tô ra chỉ thành vệt nhiễu. */
+    shadeDays: boolean;
+}
+/**
+ * Bề rộng mỗi bậc chọn sao cho ô của hàng dưới ĐỦ chỗ cho nhãn của nó: ngày 36px (số + thứ), tuần
+ * 98px ("26 thg 10"), tháng ~135px, quý ~146px, năm ~183px. Bộ bậc ngày → năm cùng bộ với Timeline
+ * của Linear (docs/gantt.md §1); con số px là của gói, không đo từ Linear.
+ */
+declare const SCALE_CONFIG: Record<GanttScale, ScaleConfig>;
+interface Tick {
+    /** Ngày đầu của ô. */
+    day: number;
+    /** Ngày đầu của ô KẾ TIẾP (= ngày cuối + 1). */
+    next: number;
+}
+/** Mọi ô của `unit` giao với `[from, to)`. Ô đầu có thể bắt đầu trước `from`. */
+declare function ticksBetween(from: number, to: number, unit: GanttUnit, weekStartsOn?: number): Tick[];
+interface DayRange {
+    start: number;
+    /** Ngày đầu NGOÀI dải (nửa mở). */
+    end: number;
+}
+/**
+ * Dải ngày của trục: bao mọi thanh + hôm nay, nới hai đầu theo bậc, rồi căn về đầu ô của hàng dưới
+ * (và của hàng trên, nếu có) để ô đầu/cuối không bị cắt dở.
+ */
+declare function computeRange(days: number[], today: number, scale: GanttScale, weekStartsOn?: number, override?: {
+    start: number | null;
+    end: number | null;
+}): DayRange;
+/** Một thanh đã đổi ra toạ độ: `x1`/`x2` là mép trái/phải (px, tính từ đầu trục), `y` là tâm dòng. */
+interface BarGeometry {
+    x1: number;
+    x2: number;
+    y: number;
+}
+/**
+ * Đường đi của một mũi tên phụ thuộc — các đoạn ngang/dọc, góc bo tròn.
+ *
+ * Mũi tên RỜI thanh trước ở mép ứng với kiểu quan hệ (`finish` = mép phải, `start` = mép trái) và
+ * CHẠM thanh sau cũng vậy. Khi thanh sau nằm đủ xa về phía trước: rời mép, đi ngang một đoạn, đổ dọc
+ * xuống dòng đích, rẽ vào. Khi không đủ chỗ (thanh sau bắt đầu trước khi thanh trước xong — chính là
+ * ca VI PHẠM): vòng qua khe giữa hai dòng rồi mới quay lại, để mũi tên không cắt ngang qua thanh.
+ */
+declare function routeDependency(from: BarGeometry, to: BarGeometry, type: GanttDependencyType, rowHeight: number): string;
+/**
+ * Phụ thuộc có đang bị vi phạm không, theo ngày (cả hai đầu BAO GỒM):
+ *   finish-to-start  — việc sau phải bắt đầu SAU ngày việc trước xong;
+ *   start-to-start   — việc sau không bắt đầu trước việc trước;
+ *   finish-to-finish — việc sau không xong trước việc trước;
+ *   start-to-finish  — việc sau không xong trước khi việc trước bắt đầu.
+ */
+declare function isDependencyViolated(from: {
+    start: number;
+    end: number;
+}, to: {
+    start: number;
+    end: number;
+}, type: GanttDependencyType): boolean;
+/** Dịch cả dải `[start, end]` đi một BƯỚC theo đơn vị, giữ nguyên độ dài theo ngày. */
+declare function shiftByUnit(start: number, end: number, unit: GanttUnit, direction: 1 | -1): {
+    start: number;
+    end: number;
+};
+
+export { type BarGeometry, type DayRange, type GanttUnit, SCALE_CONFIG, type ScaleConfig, type Tick, addUnit, computeRange, dayToLocalDate, formatDay, isDependencyViolated, parseDay, routeDependency, shiftByUnit, startOfUnit, ticksBetween, todayDay, weekday };