@xom11/whiteboard 0.2.1 → 0.6.1

package/README.md

@@ -4,11 +4,14 @@ Excalidraw-based whiteboard component dùng cho HocTotBachKhoa classroom: bút/s
 
 ## Install
 
+Cài qua git URL (repo public, không cần npm publish):
+
 ```bash
-npm install @xom11/whiteboard
-# hoặc
-pnpm add @xom11/whiteboard
-yarn add @xom11/whiteboard
+# pin tag (recommended)
+npm install github:xom11/whiteboard#v0.2.0
+
+# hoặc trong package.json
+"@xom11/whiteboard": "github:xom11/whiteboard#v0.2.0"
 ```
 
 Peer deps: `react >=18`, `react-dom >=18`, `next >=14`.
@@ -43,13 +46,17 @@ npm run dev        # tsup watch mode
 
 ## Workflow phát hành phiên bản mới
 
+`npm ci --ignore-scripts` ở consumer skip prepare hook → phải commit `dist/`:
+
 ```bash
-npm version patch        # bump package.json + tạo git tag (vX.Y.Z)
+npm run build
+git add dist/
+git commit -am "release vX.Y.Z"
+npm version patch        # bump package.json + tạo tag
 git push --follow-tags
-npm publish              # prepublishOnly tự chạy typecheck + build
 ```
 
-`prepublishOnly` đảm bảo `dist/` luôn fresh. Consumer chỉ cần `npm install @xom11/whiteboard@latest`.
+Consumer pin tag mới trong `package.json` rồi `npm install`.
 
 ## Architecture
 

package/dist/{ExcalidrawWithMenus-YGFFNZYY.mjs → ExcalidrawWithMenus-KBLDWPM2.mjs}

@@ -18,5 +18,5 @@ function ExcalidrawWithMenus(props) {
 }
 
 export { ExcalidrawWithMenus };
-//# sourceMappingURL=ExcalidrawWithMenus-YGFFNZYY.mjs.map
-//# sourceMappingURL=ExcalidrawWithMenus-YGFFNZYY.mjs.map
+//# sourceMappingURL=ExcalidrawWithMenus-KBLDWPM2.mjs.map
+//# sourceMappingURL=ExcalidrawWithMenus-KBLDWPM2.mjs.map

package/dist/ExcalidrawWithMenus-KBLDWPM2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ExcalidrawWithMenus.tsx"],"names":[],"mappings":";;;AAiBO,SAAS,oBAAoB,KAAA,EAAwB;AAC1D,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,KAAA;AAC9B,EAAA,uBACE,IAAA,CAAC,UAAA,EAAA,EAAY,GAAG,IAAA,EAEd,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,CAAS,YAAA,CAAa,SAAA,EAAtB,EAAgC,CAAA;AAAA,sBACjC,GAAA,CAAC,QAAA,CAAS,YAAA,CAAa,WAAA,EAAtB,EAAkC,CAAA;AAAA,sBACnC,GAAA,CAAC,QAAA,CAAS,YAAA,CAAa,WAAA,EAAtB,EAAkC,CAAA;AAAA,sBACnC,GAAA,CAAC,QAAA,CAAS,YAAA,CAAa,WAAA,EAAtB,EAAkC;AAAA,KAAA,EACrC,CAAA;AAAA,oBAEA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EACR,CAAA;AAAA,oBAGA,GAAA,CAAC,aAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EACR,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ","file":"ExcalidrawWithMenus-KBLDWPM2.mjs","sourcesContent":["'use client';\n\n// Client-only wrapper around Excalidraw that lets us reach for static helpers\n// like `MainMenu.DefaultItems.*`. Whiteboard dynamic-imports this\n// file so SSR never evaluates @excalidraw/excalidraw, while inside this file we\n// can use plain static imports (the entire module loads on the client).\n\nimport React from 'react';\nimport {\n  Excalidraw,\n  MainMenu,\n  Footer,\n  WelcomeScreen,\n} from '@excalidraw/excalidraw';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ExcalidrawProps = any;\n\nexport function ExcalidrawWithMenus(props: ExcalidrawProps) {\n  const { children, ...rest } = props;\n  return (\n    <Excalidraw {...rest}>\n      {/* Replace default menu with curated items — no socials/help/branding */}\n      <MainMenu>\n        <MainMenu.DefaultItems.LoadScene />\n        <MainMenu.DefaultItems.SaveAsImage />\n        <MainMenu.DefaultItems.ClearCanvas />\n        <MainMenu.DefaultItems.ToggleTheme />\n      </MainMenu>\n      {/* Footer slot with no content suppresses default \"Made with Excalidraw\" link */}\n      <Footer>\n        <span />\n      </Footer>\n      {/* WelcomeScreen slot (empty) prevents the default Excalidraw welcome panel\n       *  (which includes the Excalidraw logo and social links) from appearing. */}\n      <WelcomeScreen>\n        <span />\n      </WelcomeScreen>\n      {children}\n    </Excalidraw>\n  );\n}\n"]}

package/dist/index.css

@@ -1,4 +1,4 @@
-/* src/stamp/stamp.css */
+/* src/stamps/shared/stamp.css */
 .theme--dark [data-stamp-area=true] {
   color: rgb(226 232 240);
 }
@@ -71,4 +71,32 @@
   border-color: rgb(71 85 105);
   color: rgb(226 232 240);
 }
+.theme--dark [data-stamp-area=true] .bg-emerald-100 {
+  background-color: rgb(6 78 59);
+}
+.theme--dark [data-stamp-area=true] .border-emerald-500 {
+  border-color: rgb(52 211 153);
+}
+.theme--dark [data-stamp-area=true] .ring-emerald-300 {
+  --tw-ring-color: rgb(110 231 183);
+}
+.theme--dark [data-stamp-area=true] .border-rose-300 {
+  border-color: rgb(190 18 60);
+}
+.theme--dark [data-stamp-area=true] .hover\:bg-rose-100:hover {
+  background-color: rgb(127 29 29);
+}
+.theme--dark [data-stamp-area=true] .bg-gradient-to-r.from-emerald-600 {
+  background-image:
+    linear-gradient(
+      to right,
+      rgb(6 95 70),
+      rgb(15 76 76));
+}
+.theme--dark [data-stamp-area=true] .bg-emerald-600 {
+  background-color: rgb(6 95 70);
+}
+.theme--dark [data-stamp-area=true] .hover\:bg-emerald-700:hover {
+  background-color: rgb(4 120 87);
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stamp/stamp.css"],"sourcesContent":["/* Dark-mode overrides cho math-stamp panels.\n * Active khi outer wrapper có class `theme--dark` (mirrored từ Excalidraw appState).\n * Selector `[data-stamp-area=\"true\"]` đã có sẵn trên mọi panel để dùng cho click-outside detection. */\n\n.theme--dark [data-stamp-area=\"true\"] {\n  color: rgb(226 232 240);\n}\n\n/* ---- Backgrounds ---- */\n.theme--dark [data-stamp-area=\"true\"].bg-white,\n.theme--dark [data-stamp-area=\"true\"] .bg-white {\n  background-color: rgb(30 41 59);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-slate-50 {\n  background-color: rgb(15 23 42);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-emerald-50 {\n  background-color: rgb(6 78 59);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-rose-50 {\n  background-color: rgb(127 29 29);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-slate-100:hover {\n  background-color: rgb(51 65 85);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-slate-50:hover {\n  background-color: rgb(15 23 42);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-emerald-50:hover {\n  background-color: rgb(6 78 59);\n}\n\n/* Left-panel header có gradient sáng — đổi sang slate */\n.theme--dark [data-testid=\"stamp-left-panel\"] > header.bg-gradient-to-r {\n  background-image: linear-gradient(to right, rgb(15 23 42), rgb(30 41 59));\n}\n\n/* ---- Borders ---- */\n.theme--dark [data-stamp-area=\"true\"] .border-slate-200,\n.theme--dark [data-stamp-area=\"true\"] .border-slate-300 {\n  border-color: rgb(51 65 85);\n}\n\n/* ---- Text ---- */\n.theme--dark [data-stamp-area=\"true\"] .text-slate-400 {\n  color: rgb(100 116 139);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-slate-500 {\n  color: rgb(148 163 184);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-slate-600,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-700,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-800,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-900 {\n  color: rgb(226 232 240);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:text-slate-800:hover,\n.theme--dark [data-stamp-area=\"true\"] .hover\\:text-slate-900:hover {\n  color: rgb(241 245 249);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-emerald-700 {\n  color: rgb(110 231 183);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-rose-700 {\n  color: rgb(253 164 175);\n}\n\n/* ---- Inputs ---- */\n.theme--dark [data-stamp-area=\"true\"] input[type=\"text\"],\n.theme--dark [data-stamp-area=\"true\"] textarea {\n  background-color: rgb(15 23 42);\n  color: rgb(241 245 249);\n}\n.theme--dark [data-stamp-area=\"true\"] input::placeholder,\n.theme--dark [data-stamp-area=\"true\"] textarea::placeholder {\n  color: rgb(100 116 139);\n}\n\n/* ---- Kbd badge ---- */\n.theme--dark [data-stamp-area=\"true\"] kbd {\n  background-color: rgb(15 23 42);\n  border-color: rgb(71 85 105);\n  color: rgb(226 232 240);\n}\n"],"mappings":";AAIA,CAAC,YAAY,CAAC;AACZ,SAAO,IAAI,IAAI,IAAI;AACrB;AAGA,CALC,YAKY,CAAC,qBAAuB,CAAC;AACtC,CANC,YAMY,CAAC,sBAAwB,CADA;AAEpC,oBAAkB,IAAI,GAAG,GAAG;AAC9B;AACA,CATC,YASY,CAAC,sBAAwB,CAAC;AACrC,oBAAkB,IAAI,GAAG,GAAG;AAC9B;AACA,CAZC,YAYY,CAAC,sBAAwB,CAAC;AACrC,oBAAkB,IAAI,EAAE,GAAG;AAC7B;AACA,CAfC,YAeY,CAAC,sBAAwB,CAAC;AACrC,oBAAkB,IAAI,IAAI,GAAG;AAC/B;AACA,CAlBC,YAkBY,CAAC,sBAAwB,CAAC,mBAAmB;AACxD,oBAAkB,IAAI,GAAG,GAAG;AAC9B;AACA,CArBC,YAqBY,CAAC,sBAAwB,CAAC,kBAAkB;AACvD,oBAAkB,IAAI,GAAG,GAAG;AAC9B;AACA,CAxBC,YAwBY,CAAC,sBAAwB,CAAC,oBAAoB;AACzD,oBAAkB,IAAI,EAAE,GAAG;AAC7B;AAGA,CA7BC,YA6BY,CAAC,8BAAgC,EAAE,MAAM,CAAC;AACrD;AAAA,IAAkB;AAAA,MAAgB,GAAG,KAAnB;AAAA,MAA0B,IAAI,GAAG,GAAG,GAApC;AAAA,MAAyC,IAAI,GAAG,GAAG;AACvE;AAGA,CAlCC,YAkCY,CAAC,sBAAwB,CAAC;AACvC,CAnCC,YAmCY,CAAC,sBAAwB,CAAC;AACrC,gBAAc,IAAI,GAAG,GAAG;AAC1B;AAGA,CAxCC,YAwCY,CAAC,sBAAwB,CAAC;AACrC,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CA3CC,YA2CY,CAAC,sBAAwB,CAAC;AACrC,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CA9CC,YA8CY,CAAC,sBAAwB,CAAC;AACvC,CA/CC,YA+CY,CAAC,sBAAwB,CAAC;AACvC,CAhDC,YAgDY,CAAC,sBAAwB,CAAC;AACvC,CAjDC,YAiDY,CAAC,sBAAwB,CAAC;AACrC,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CApDC,YAoDY,CAAC,sBAAwB,CAAC,qBAAqB;AAC5D,CArDC,YAqDY,CAAC,sBAAwB,CAAC,qBAAqB;AAC1D,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CAxDC,YAwDY,CAAC,sBAAwB,CAAC;AACrC,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CA3DC,YA2DY,CAAC,sBAAwB,CAAC;AACrC,SAAO,IAAI,IAAI,IAAI;AACrB;AAGA,CAhEC,YAgEY,CAAC,sBAAwB,KAAK,CAAC;AAC5C,CAjEC,YAiEY,CAAC,sBAAwB;AACpC,oBAAkB,IAAI,GAAG,GAAG;AAC5B,SAAO,IAAI,IAAI,IAAI;AACrB;AACA,CArEC,YAqEY,CAAC,sBAAwB,KAAK;AAC3C,CAtEC,YAsEY,CAAC,sBAAwB,QAAQ;AAC5C,SAAO,IAAI,IAAI,IAAI;AACrB;AAGA,CA3EC,YA2EY,CAAC,sBAAwB;AACpC,oBAAkB,IAAI,GAAG,GAAG;AAC5B,gBAAc,IAAI,GAAG,GAAG;AACxB,SAAO,IAAI,IAAI,IAAI;AACrB;","names":[]}
+{"version":3,"sources":["../src/stamps/shared/stamp.css"],"sourcesContent":["/* Dark-mode overrides cho math-stamp panels.\n * Active khi outer wrapper có class `theme--dark` (mirrored từ Excalidraw appState).\n * Selector `[data-stamp-area=\"true\"]` đã có sẵn trên mọi panel để dùng cho click-outside detection. */\n\n.theme--dark [data-stamp-area=\"true\"] {\n  color: rgb(226 232 240);\n}\n\n/* ---- Backgrounds ---- */\n.theme--dark [data-stamp-area=\"true\"].bg-white,\n.theme--dark [data-stamp-area=\"true\"] .bg-white {\n  background-color: rgb(30 41 59);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-slate-50 {\n  background-color: rgb(15 23 42);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-emerald-50 {\n  background-color: rgb(6 78 59);\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-rose-50 {\n  background-color: rgb(127 29 29);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-slate-100:hover {\n  background-color: rgb(51 65 85);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-slate-50:hover {\n  background-color: rgb(15 23 42);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-emerald-50:hover {\n  background-color: rgb(6 78 59);\n}\n\n/* Left-panel header có gradient sáng — đổi sang slate */\n.theme--dark [data-testid=\"stamp-left-panel\"] > header.bg-gradient-to-r {\n  background-image: linear-gradient(to right, rgb(15 23 42), rgb(30 41 59));\n}\n\n/* ---- Borders ---- */\n.theme--dark [data-stamp-area=\"true\"] .border-slate-200,\n.theme--dark [data-stamp-area=\"true\"] .border-slate-300 {\n  border-color: rgb(51 65 85);\n}\n\n/* ---- Text ---- */\n.theme--dark [data-stamp-area=\"true\"] .text-slate-400 {\n  color: rgb(100 116 139);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-slate-500 {\n  color: rgb(148 163 184);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-slate-600,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-700,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-800,\n.theme--dark [data-stamp-area=\"true\"] .text-slate-900 {\n  color: rgb(226 232 240);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:text-slate-800:hover,\n.theme--dark [data-stamp-area=\"true\"] .hover\\:text-slate-900:hover {\n  color: rgb(241 245 249);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-emerald-700 {\n  color: rgb(110 231 183);\n}\n.theme--dark [data-stamp-area=\"true\"] .text-rose-700 {\n  color: rgb(253 164 175);\n}\n\n/* ---- Inputs ---- */\n.theme--dark [data-stamp-area=\"true\"] input[type=\"text\"],\n.theme--dark [data-stamp-area=\"true\"] textarea {\n  background-color: rgb(15 23 42);\n  color: rgb(241 245 249);\n}\n.theme--dark [data-stamp-area=\"true\"] input::placeholder,\n.theme--dark [data-stamp-area=\"true\"] textarea::placeholder {\n  color: rgb(100 116 139);\n}\n\n/* ---- Kbd badge ---- */\n.theme--dark [data-stamp-area=\"true\"] kbd {\n  background-color: rgb(15 23 42);\n  border-color: rgb(71 85 105);\n  color: rgb(226 232 240);\n}\n\n/* --- Popover & swatch active states (Task 13) --- */\n.theme--dark [data-stamp-area=\"true\"] .bg-emerald-100 {\n  background-color: rgb(6 78 59);\n}\n.theme--dark [data-stamp-area=\"true\"] .border-emerald-500 {\n  border-color: rgb(52 211 153);\n}\n.theme--dark [data-stamp-area=\"true\"] .ring-emerald-300 {\n  --tw-ring-color: rgb(110 231 183);\n}\n.theme--dark [data-stamp-area=\"true\"] .border-rose-300 {\n  border-color: rgb(190 18 60);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-rose-100:hover {\n  background-color: rgb(127 29 29);\n}\n\n/* --- Geometry header dimmer trong dark --- */\n.theme--dark [data-stamp-area=\"true\"] .bg-gradient-to-r.from-emerald-600 {\n  background-image: linear-gradient(to right, rgb(6 95 70), rgb(15 76 76));\n}\n.theme--dark [data-stamp-area=\"true\"] .bg-emerald-600 {\n  background-color: rgb(6 95 70);\n}\n.theme--dark [data-stamp-area=\"true\"] .hover\\:bg-emerald-700:hover {\n  background-color: rgb(4 120 87);\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
+import { NonDeletedExcalidrawElement, ExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 export { ExcalidrawElement, NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 import { AppState, BinaryFiles } from '@excalidraw/excalidraw/types';
 export { AppState, BinaryFiles } from '@excalidraw/excalidraw/types';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 interface SyncableAppState {
     viewBackgroundColor: string;
@@ -17,19 +18,201 @@ interface ExcalidrawSceneSnapshot {
     appState: SyncableAppState;
 }
 
-interface ExcalidrawWhiteboardViewProps {
-    role: 'teacher' | 'student';
-    roomId: string;
-    initialScene: ExcalidrawSceneSnapshot | null;
-    remoteScene: ExcalidrawSceneSnapshot | null;
-    remoteFiles?: BinaryFiles | null;
-    onSceneChange: (snapshot: ExcalidrawSceneSnapshot) => void;
-    onFilesChange: (files: BinaryFiles, newFileIds: string[]) => void;
+/**
+ * Kết quả trả về từ `restoreFileFromCustomData`. Chứa đủ thông tin để
+ * consumer gọi `api.addFiles(...)`.
+ */
+interface RestoredStampFile {
+    fileId: string;
+    dataURL: string;
+    mimeType: 'image/svg+xml' | 'image/png';
+}
+/**
+ * Tối thiểu mọi custom data của stamp cần có. Các stamp cụ thể (geometry,
+ * latex, ...) extend interface này với fields riêng.
+ */
+interface BaseStampCustomData {
+    kind: string;
+    version: number;
+}
+/**
+ * Props mà mỗi StampHost nhận từ Whiteboard. Host component tự
+ * quản lý state nội bộ (panel ref, undo stack, displayMode...) — main view
+ * chỉ điều phối show/hide.
+ */
+interface StampHostProps {
+    api: any;
+    /**
+     * Element đang re-edit (double-click) hoặc null nếu đang tạo mới.
+     * Host tự parse customData để load state ban đầu.
+     */
+    editingElement: {
+        id: string;
+        customData: unknown;
+    } | null;
+    /** Đóng stamp panel (gọi sau khi insert hoặc khi user huỷ). */
+    onClose: () => void;
+    /** Dark theme flag. */
+    isDark: boolean;
+}
+/**
+ * Imperative API mà main view truy cập qua ref:
+ *   - tryInsert(): khi user click ra ngoài → auto-commit nếu valid.
+ *     Trả về true nếu chèn thành công, false nếu chưa có nội dung.
+ *   - hasContent(): có nội dung để chèn không.
+ */
+interface StampHostHandle {
+    tryInsert(): boolean;
+    hasContent(): boolean;
+}
+type StampHostComponent = ForwardRefExoticComponent<StampHostProps & RefAttributes<StampHostHandle>>;
+/**
+ * Định nghĩa 1 loại stamp. Mỗi stamp khai báo:
+ *   - kind: unique string (khớp với customData.kind)
+ *   - phím tắt + UI toolbar
+ *   - cách nhận biết customData thuộc về stamp này (matchesCustomData)
+ *   - cách re-render SVG từ customData (cho restore sau reload)
+ *   - Host component: bọc trọn editor + left panel + insert logic
+ *
+ * Main view dispatch generic: `<stamp.Host ... />` — không cần biết kind.
+ */
+interface StampType {
+    /** Unique kind. VD: 'geometry', 'latex'. Phải khớp với customData.kind. */
+    kind: string;
+    /** Phím tắt mở/đóng stamp (lowercase, 1 ký tự). VD: 'g', 'l'. */
+    shortcutKey: string;
+    /** Chữ hiển thị overlay góc dưới nút toolbar (e.g. "G"). */
+    toolbarLabel: string;
+    /** Tooltip + aria-label của nút toolbar. */
+    toolbarTitle: string;
+    /** Icon SVG (ReactNode) trong nút toolbar. */
+    toolbarIcon: ReactNode;
+    /** Test data-testid cho nút toolbar (optional). */
+    toolbarTestId?: string;
+    /** Type guard: customData có thuộc về stamp này không. */
+    matchesCustomData(data: unknown): boolean;
+    /**
+     * Re-render SVG từ customData. Dùng khi restore math-stamp file sau reload
+     * page (Excalidraw không persist binary file payload, chỉ giữ fileId trong
+     * element). SVG render với light palette (nét đậm) — Excalidraw tự đảo
+     * màu trong dark mode qua CSS filter.
+     */
+    renderSvgFromCustomData(data: unknown): Promise<string>;
+    /**
+     * Regenerate file SVG/PNG cho element thuộc stamp này khi reload từ persisted
+     * snapshot. Trả về `RestoredStampFile` để consumer gọi `api.addFiles`, hoặc
+     * `null` nếu element không cần file (vd stamp chỉ là text overlay).
+     *
+     * Khi method này có mặt, `restoreMissingStampFiles` sẽ ưu tiên gọi method
+     * này thay vì dùng `renderSvgFromCustomData`. Stamp tự chịu trách nhiệm lấy
+     * `fileId` từ element và render file.
+     */
+    restoreFileFromCustomData?: (element: ExcalidrawElement) => Promise<RestoredStampFile | null>;
+    /**
+     * Host component bọc toàn bộ UI editing (panel + left panel + insert
+     * handler). Whiteboard mount Host khi activeStamp khớp kind.
+     */
+    Host: StampHostComponent;
+}
+
+interface GeometryCustomData extends BaseStampCustomData {
+    kind: 'geometry';
+    version: 1;
+    jsonState: string;
+    svgWidth: number;
+    svgHeight: number;
+}
+declare function isGeometryCustomData(data: unknown): data is GeometryCustomData;
+declare const geometryStamp: StampType;
+
+interface LatexCustomData extends BaseStampCustomData {
+    kind: 'latex';
+    version: 1;
+    src: string;
+    displayMode: boolean;
+}
+declare function isLatexCustomData(data: unknown): data is LatexCustomData;
+declare const latexStamp: StampType;
+
+interface Geometry3DCustomData extends BaseStampCustomData {
+    kind: 'geometry3d';
+    version: 1;
+    jsonState: string;
+    svgWidth: number;
+    svgHeight: number;
+}
+declare function isGeometry3DCustomData(data: unknown): data is Geometry3DCustomData;
+
+declare const geometry3dStamp: StampType;
+
+/**
+ * Set stamp mặc định dùng trong Whiteboard. Consumer có thể
+ * truyền custom array để bật/tắt từng stamp hoặc đăng ký stamp mới.
+ *
+ * Để thêm 1 stamp mới (vd chart):
+ *   1. Tạo `src/stamp/registry/chart.tsx` với StampType object.
+ *   2. Add vào DEFAULT_STAMPS ở dưới, HOẶC consumer truyền
+ *      `<Whiteboard stamps={[...DEFAULT_STAMPS, chartStamp]} />`.
+ */
+declare const DEFAULT_STAMPS: ReadonlyArray<StampType>;
+/** Tìm stamp tương ứng với customData của element. null nếu không match. */
+declare function findStampForCustomData(data: unknown, stamps?: ReadonlyArray<StampType>): StampType | null;
+/** isMathStamp version dựa trên registry — replace logic hardcode trong types.ts. */
+declare function isStampElement<T extends {
+    customData?: unknown;
+}>(element: T, stamps?: ReadonlyArray<StampType>): boolean;
+
+interface WhiteboardProps {
+    /**
+     * Storage key cho persist client-side.
+     * - Scene -> localStorage['whiteboard:scene:'+storageKey]
+     * - Files raster -> IndexedDB 'whiteboard-files' index theo storageKey
+     * - Default: 'default'
+     * - Truyen `null` de tat persist (consumer drive state qua onApi).
+     */
+    storageKey?: string | null;
+    /** View-only (Excalidraw viewModeEnabled). Default false. */
+    readOnly?: boolean;
+    /** Local edits -> consumer broadcast. Optional. */
+    onSceneChange?: (snapshot: ExcalidrawSceneSnapshot) => void;
+    onFilesChange?: (files: BinaryFiles, newFileIds: string[]) => void;
+    /** Excalidraw imperative API. Consumer dung inject remote scene khi can. */
+    onApi?: (api: any) => void;
     /** Excalidraw UI language. Defaults to 'vi-VN'. See @excalidraw/excalidraw locales. */
     langCode?: string;
+    /**
+     * Danh sách stamp đăng ký. Mỗi stamp khai báo phím tắt + toolbar button +
+     * Host component (UI editing). Mặc định DEFAULT_STAMPS (geometry + latex).
+     * Truyền `[...DEFAULT_STAMPS, customStamp]` để thêm stamp mới.
+     */
+    stamps?: ReadonlyArray<StampType>;
 }
-declare function ExcalidrawWhiteboardView({ role, initialScene, remoteScene, remoteFiles, onSceneChange, onFilesChange, langCode, }: ExcalidrawWhiteboardViewProps): react_jsx_runtime.JSX.Element;
+declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
 
 declare function pickSyncableAppState(s: AppState): SyncableAppState;
 
-export { type ExcalidrawSceneSnapshot, ExcalidrawWhiteboardView, type ExcalidrawWhiteboardViewProps, type SyncableAppState, pickSyncableAppState };
+interface ElementLike {
+    id: string;
+    type?: string;
+    fileId?: string | null;
+    customData?: unknown;
+}
+/**
+ * Find stamp elements whose binary file is missing from Excalidraw, then
+ * regenerate via registry dispatch. Idempotent: safe to call on every scene
+ * update.
+ *
+ * Stamps that implement `restoreFileFromCustomData` are handled via the new
+ * registry-driven path (stamp receives the full element and returns the file
+ * record). Stamps that only implement `renderSvgFromCustomData` use the legacy
+ * path (filter type=image + fileId, skip already-present files).
+ *
+ * @param api Excalidraw imperative API.
+ * @param elements Tất cả elements trong scene.
+ * @param stamps Registry. Default = DEFAULT_STAMPS.
+ */
+declare function restoreMissingStampFiles(api: any, elements: readonly ElementLike[], stamps?: ReadonlyArray<StampType>): Promise<void>;
+
+type StampCustomData = GeometryCustomData | LatexCustomData | Geometry3DCustomData;
+
+export { type BaseStampCustomData, DEFAULT_STAMPS, type ExcalidrawSceneSnapshot, type Geometry3DCustomData, type GeometryCustomData, type LatexCustomData, type StampCustomData, type StampType, type SyncableAppState, Whiteboard, type WhiteboardProps, findStampForCustomData, geometry3dStamp, geometryStamp, isGeometry3DCustomData, isGeometryCustomData, isLatexCustomData, isStampElement, latexStamp, pickSyncableAppState, restoreMissingStampFiles };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
+import { NonDeletedExcalidrawElement, ExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 export { ExcalidrawElement, NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 import { AppState, BinaryFiles } from '@excalidraw/excalidraw/types';
 export { AppState, BinaryFiles } from '@excalidraw/excalidraw/types';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 interface SyncableAppState {
     viewBackgroundColor: string;
@@ -17,19 +18,201 @@ interface ExcalidrawSceneSnapshot {
     appState: SyncableAppState;
 }
 
-interface ExcalidrawWhiteboardViewProps {
-    role: 'teacher' | 'student';
-    roomId: string;
-    initialScene: ExcalidrawSceneSnapshot | null;
-    remoteScene: ExcalidrawSceneSnapshot | null;
-    remoteFiles?: BinaryFiles | null;
-    onSceneChange: (snapshot: ExcalidrawSceneSnapshot) => void;
-    onFilesChange: (files: BinaryFiles, newFileIds: string[]) => void;
+/**
+ * Kết quả trả về từ `restoreFileFromCustomData`. Chứa đủ thông tin để
+ * consumer gọi `api.addFiles(...)`.
+ */
+interface RestoredStampFile {
+    fileId: string;
+    dataURL: string;
+    mimeType: 'image/svg+xml' | 'image/png';
+}
+/**
+ * Tối thiểu mọi custom data của stamp cần có. Các stamp cụ thể (geometry,
+ * latex, ...) extend interface này với fields riêng.
+ */
+interface BaseStampCustomData {
+    kind: string;
+    version: number;
+}
+/**
+ * Props mà mỗi StampHost nhận từ Whiteboard. Host component tự
+ * quản lý state nội bộ (panel ref, undo stack, displayMode...) — main view
+ * chỉ điều phối show/hide.
+ */
+interface StampHostProps {
+    api: any;
+    /**
+     * Element đang re-edit (double-click) hoặc null nếu đang tạo mới.
+     * Host tự parse customData để load state ban đầu.
+     */
+    editingElement: {
+        id: string;
+        customData: unknown;
+    } | null;
+    /** Đóng stamp panel (gọi sau khi insert hoặc khi user huỷ). */
+    onClose: () => void;
+    /** Dark theme flag. */
+    isDark: boolean;
+}
+/**
+ * Imperative API mà main view truy cập qua ref:
+ *   - tryInsert(): khi user click ra ngoài → auto-commit nếu valid.
+ *     Trả về true nếu chèn thành công, false nếu chưa có nội dung.
+ *   - hasContent(): có nội dung để chèn không.
+ */
+interface StampHostHandle {
+    tryInsert(): boolean;
+    hasContent(): boolean;
+}
+type StampHostComponent = ForwardRefExoticComponent<StampHostProps & RefAttributes<StampHostHandle>>;
+/**
+ * Định nghĩa 1 loại stamp. Mỗi stamp khai báo:
+ *   - kind: unique string (khớp với customData.kind)
+ *   - phím tắt + UI toolbar
+ *   - cách nhận biết customData thuộc về stamp này (matchesCustomData)
+ *   - cách re-render SVG từ customData (cho restore sau reload)
+ *   - Host component: bọc trọn editor + left panel + insert logic
+ *
+ * Main view dispatch generic: `<stamp.Host ... />` — không cần biết kind.
+ */
+interface StampType {
+    /** Unique kind. VD: 'geometry', 'latex'. Phải khớp với customData.kind. */
+    kind: string;
+    /** Phím tắt mở/đóng stamp (lowercase, 1 ký tự). VD: 'g', 'l'. */
+    shortcutKey: string;
+    /** Chữ hiển thị overlay góc dưới nút toolbar (e.g. "G"). */
+    toolbarLabel: string;
+    /** Tooltip + aria-label của nút toolbar. */
+    toolbarTitle: string;
+    /** Icon SVG (ReactNode) trong nút toolbar. */
+    toolbarIcon: ReactNode;
+    /** Test data-testid cho nút toolbar (optional). */
+    toolbarTestId?: string;
+    /** Type guard: customData có thuộc về stamp này không. */
+    matchesCustomData(data: unknown): boolean;
+    /**
+     * Re-render SVG từ customData. Dùng khi restore math-stamp file sau reload
+     * page (Excalidraw không persist binary file payload, chỉ giữ fileId trong
+     * element). SVG render với light palette (nét đậm) — Excalidraw tự đảo
+     * màu trong dark mode qua CSS filter.
+     */
+    renderSvgFromCustomData(data: unknown): Promise<string>;
+    /**
+     * Regenerate file SVG/PNG cho element thuộc stamp này khi reload từ persisted
+     * snapshot. Trả về `RestoredStampFile` để consumer gọi `api.addFiles`, hoặc
+     * `null` nếu element không cần file (vd stamp chỉ là text overlay).
+     *
+     * Khi method này có mặt, `restoreMissingStampFiles` sẽ ưu tiên gọi method
+     * này thay vì dùng `renderSvgFromCustomData`. Stamp tự chịu trách nhiệm lấy
+     * `fileId` từ element và render file.
+     */
+    restoreFileFromCustomData?: (element: ExcalidrawElement) => Promise<RestoredStampFile | null>;
+    /**
+     * Host component bọc toàn bộ UI editing (panel + left panel + insert
+     * handler). Whiteboard mount Host khi activeStamp khớp kind.
+     */
+    Host: StampHostComponent;
+}
+
+interface GeometryCustomData extends BaseStampCustomData {
+    kind: 'geometry';
+    version: 1;
+    jsonState: string;
+    svgWidth: number;
+    svgHeight: number;
+}
+declare function isGeometryCustomData(data: unknown): data is GeometryCustomData;
+declare const geometryStamp: StampType;
+
+interface LatexCustomData extends BaseStampCustomData {
+    kind: 'latex';
+    version: 1;
+    src: string;
+    displayMode: boolean;
+}
+declare function isLatexCustomData(data: unknown): data is LatexCustomData;
+declare const latexStamp: StampType;
+
+interface Geometry3DCustomData extends BaseStampCustomData {
+    kind: 'geometry3d';
+    version: 1;
+    jsonState: string;
+    svgWidth: number;
+    svgHeight: number;
+}
+declare function isGeometry3DCustomData(data: unknown): data is Geometry3DCustomData;
+
+declare const geometry3dStamp: StampType;
+
+/**
+ * Set stamp mặc định dùng trong Whiteboard. Consumer có thể
+ * truyền custom array để bật/tắt từng stamp hoặc đăng ký stamp mới.
+ *
+ * Để thêm 1 stamp mới (vd chart):
+ *   1. Tạo `src/stamp/registry/chart.tsx` với StampType object.
+ *   2. Add vào DEFAULT_STAMPS ở dưới, HOẶC consumer truyền
+ *      `<Whiteboard stamps={[...DEFAULT_STAMPS, chartStamp]} />`.
+ */
+declare const DEFAULT_STAMPS: ReadonlyArray<StampType>;
+/** Tìm stamp tương ứng với customData của element. null nếu không match. */
+declare function findStampForCustomData(data: unknown, stamps?: ReadonlyArray<StampType>): StampType | null;
+/** isMathStamp version dựa trên registry — replace logic hardcode trong types.ts. */
+declare function isStampElement<T extends {
+    customData?: unknown;
+}>(element: T, stamps?: ReadonlyArray<StampType>): boolean;
+
+interface WhiteboardProps {
+    /**
+     * Storage key cho persist client-side.
+     * - Scene -> localStorage['whiteboard:scene:'+storageKey]
+     * - Files raster -> IndexedDB 'whiteboard-files' index theo storageKey
+     * - Default: 'default'
+     * - Truyen `null` de tat persist (consumer drive state qua onApi).
+     */
+    storageKey?: string | null;
+    /** View-only (Excalidraw viewModeEnabled). Default false. */
+    readOnly?: boolean;
+    /** Local edits -> consumer broadcast. Optional. */
+    onSceneChange?: (snapshot: ExcalidrawSceneSnapshot) => void;
+    onFilesChange?: (files: BinaryFiles, newFileIds: string[]) => void;
+    /** Excalidraw imperative API. Consumer dung inject remote scene khi can. */
+    onApi?: (api: any) => void;
     /** Excalidraw UI language. Defaults to 'vi-VN'. See @excalidraw/excalidraw locales. */
     langCode?: string;
+    /**
+     * Danh sách stamp đăng ký. Mỗi stamp khai báo phím tắt + toolbar button +
+     * Host component (UI editing). Mặc định DEFAULT_STAMPS (geometry + latex).
+     * Truyền `[...DEFAULT_STAMPS, customStamp]` để thêm stamp mới.
+     */
+    stamps?: ReadonlyArray<StampType>;
 }
-declare function ExcalidrawWhiteboardView({ role, initialScene, remoteScene, remoteFiles, onSceneChange, onFilesChange, langCode, }: ExcalidrawWhiteboardViewProps): react_jsx_runtime.JSX.Element;
+declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
 
 declare function pickSyncableAppState(s: AppState): SyncableAppState;
 
-export { type ExcalidrawSceneSnapshot, ExcalidrawWhiteboardView, type ExcalidrawWhiteboardViewProps, type SyncableAppState, pickSyncableAppState };
+interface ElementLike {
+    id: string;
+    type?: string;
+    fileId?: string | null;
+    customData?: unknown;
+}
+/**
+ * Find stamp elements whose binary file is missing from Excalidraw, then
+ * regenerate via registry dispatch. Idempotent: safe to call on every scene
+ * update.
+ *
+ * Stamps that implement `restoreFileFromCustomData` are handled via the new
+ * registry-driven path (stamp receives the full element and returns the file
+ * record). Stamps that only implement `renderSvgFromCustomData` use the legacy
+ * path (filter type=image + fileId, skip already-present files).
+ *
+ * @param api Excalidraw imperative API.
+ * @param elements Tất cả elements trong scene.
+ * @param stamps Registry. Default = DEFAULT_STAMPS.
+ */
+declare function restoreMissingStampFiles(api: any, elements: readonly ElementLike[], stamps?: ReadonlyArray<StampType>): Promise<void>;
+
+type StampCustomData = GeometryCustomData | LatexCustomData | Geometry3DCustomData;
+
+export { type BaseStampCustomData, DEFAULT_STAMPS, type ExcalidrawSceneSnapshot, type Geometry3DCustomData, type GeometryCustomData, type LatexCustomData, type StampCustomData, type StampType, type SyncableAppState, Whiteboard, type WhiteboardProps, findStampForCustomData, geometry3dStamp, geometryStamp, isGeometry3DCustomData, isGeometryCustomData, isLatexCustomData, isStampElement, latexStamp, pickSyncableAppState, restoreMissingStampFiles };