@xom11/whiteboard 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xom11
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @xom11/whiteboard
+
+Excalidraw-based whiteboard component dùng cho HocTotBachKhoa classroom: bút/shape/text/import ảnh + hai stamp tools (hình học JSXGraph, công thức LaTeX KaTeX).
+
+## Install
+
+```bash
+npm install @xom11/whiteboard
+# hoặc
+pnpm add @xom11/whiteboard
+yarn add @xom11/whiteboard
+```
+
+Peer deps: `react >=18`, `react-dom >=18`, `next >=14`.
+
+## Usage
+
+```tsx
+import { ExcalidrawWhiteboardView, type ExcalidrawSceneSnapshot } from '@xom11/whiteboard';
+
+export function ClassroomBoard() {
+  return (
+    <ExcalidrawWhiteboardView
+      role="teacher"
+      roomId="room-123"
+      initialScene={null}
+      remoteScene={null}
+      onSceneChange={(snapshot) => { /* persist + broadcast */ }}
+      onFilesChange={(files, newIds) => { /* upload new files */ }}
+    />
+  );
+}
+```
+
+## Development
+
+```bash
+npm install
+npm test
+npm run build      # tsup → dist/{index.js, index.mjs, index.d.ts}
+npm run dev        # tsup watch mode
+```
+
+## Workflow phát hành phiên bản mới
+
+```bash
+npm version patch        # bump package.json + tạo git tag (vX.Y.Z)
+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`.
+
+## Architecture
+
+- `src/ExcalidrawWhiteboardView.tsx` — main wrapper, quản lý sync teacher ↔ student, stamp lifecycle.
+- `src/ExcalidrawWithMenus.tsx` — Excalidraw + custom MainMenu/Footer/WelcomeScreen.
+- `src/stamp/` — hai stamp tools (hình học, LaTeX) + helpers (JSXGraph board, KaTeX renderer, serialize/restore).
+- `src/serialize.ts` — pick sync-able subset của Excalidraw appState.
+- `src/types.ts` — re-export Excalidraw types + project types.
+
+## Extracted from
+
+`Hoctotbachkhoa/hoctotbachkhoa` (apps/web/components/classroom/excalidrawBoard/) — git history preserved via `git filter-repo`. Repo sau đó transfer từ `Hoctotbachkhoa/whiteboard` sang `xom11/whiteboard` (v0.2.0 trở đi).

package/dist/ExcalidrawWithMenus-YGFFNZYY.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { Excalidraw, MainMenu, Footer, WelcomeScreen } from '@excalidraw/excalidraw';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ExcalidrawWithMenus(props) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Excalidraw, { ...rest, children: [
+    /* @__PURE__ */ jsxs(MainMenu, { children: [
+      /* @__PURE__ */ jsx(MainMenu.DefaultItems.LoadScene, {}),
+      /* @__PURE__ */ jsx(MainMenu.DefaultItems.SaveAsImage, {}),
+      /* @__PURE__ */ jsx(MainMenu.DefaultItems.ClearCanvas, {}),
+      /* @__PURE__ */ jsx(MainMenu.DefaultItems.ToggleTheme, {})
+    ] }),
+    /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx("span", {}) }),
+    /* @__PURE__ */ jsx(WelcomeScreen, { children: /* @__PURE__ */ jsx("span", {}) }),
+    children
+  ] });
+}
+
+export { ExcalidrawWithMenus };
+//# sourceMappingURL=ExcalidrawWithMenus-YGFFNZYY.mjs.map
+//# sourceMappingURL=ExcalidrawWithMenus-YGFFNZYY.mjs.map

package/dist/ExcalidrawWithMenus-YGFFNZYY.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-YGFFNZYY.mjs","sourcesContent":["'use client';\n\n// Client-only wrapper around Excalidraw that lets us reach for static helpers\n// like `MainMenu.DefaultItems.*`. ExcalidrawWhiteboardView 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

@@ -0,0 +1,74 @@
+/* src/stamp/stamp.css */
+.theme--dark [data-stamp-area=true] {
+  color: rgb(226 232 240);
+}
+.theme--dark [data-stamp-area=true].bg-white,
+.theme--dark [data-stamp-area=true] .bg-white {
+  background-color: rgb(30 41 59);
+}
+.theme--dark [data-stamp-area=true] .bg-slate-50 {
+  background-color: rgb(15 23 42);
+}
+.theme--dark [data-stamp-area=true] .bg-emerald-50 {
+  background-color: rgb(6 78 59);
+}
+.theme--dark [data-stamp-area=true] .bg-rose-50 {
+  background-color: rgb(127 29 29);
+}
+.theme--dark [data-stamp-area=true] .hover\:bg-slate-100:hover {
+  background-color: rgb(51 65 85);
+}
+.theme--dark [data-stamp-area=true] .hover\:bg-slate-50:hover {
+  background-color: rgb(15 23 42);
+}
+.theme--dark [data-stamp-area=true] .hover\:bg-emerald-50:hover {
+  background-color: rgb(6 78 59);
+}
+.theme--dark [data-testid=stamp-left-panel] > header.bg-gradient-to-r {
+  background-image:
+    linear-gradient(
+      to right,
+      rgb(15 23 42),
+      rgb(30 41 59));
+}
+.theme--dark [data-stamp-area=true] .border-slate-200,
+.theme--dark [data-stamp-area=true] .border-slate-300 {
+  border-color: rgb(51 65 85);
+}
+.theme--dark [data-stamp-area=true] .text-slate-400 {
+  color: rgb(100 116 139);
+}
+.theme--dark [data-stamp-area=true] .text-slate-500 {
+  color: rgb(148 163 184);
+}
+.theme--dark [data-stamp-area=true] .text-slate-600,
+.theme--dark [data-stamp-area=true] .text-slate-700,
+.theme--dark [data-stamp-area=true] .text-slate-800,
+.theme--dark [data-stamp-area=true] .text-slate-900 {
+  color: rgb(226 232 240);
+}
+.theme--dark [data-stamp-area=true] .hover\:text-slate-800:hover,
+.theme--dark [data-stamp-area=true] .hover\:text-slate-900:hover {
+  color: rgb(241 245 249);
+}
+.theme--dark [data-stamp-area=true] .text-emerald-700 {
+  color: rgb(110 231 183);
+}
+.theme--dark [data-stamp-area=true] .text-rose-700 {
+  color: rgb(253 164 175);
+}
+.theme--dark [data-stamp-area=true] input[type=text],
+.theme--dark [data-stamp-area=true] textarea {
+  background-color: rgb(15 23 42);
+  color: rgb(241 245 249);
+}
+.theme--dark [data-stamp-area=true] input::placeholder,
+.theme--dark [data-stamp-area=true] textarea::placeholder {
+  color: rgb(100 116 139);
+}
+.theme--dark [data-stamp-area=true] kbd {
+  background-color: rgb(15 23 42);
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

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

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NonDeletedExcalidrawElement } 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';
+
+interface SyncableAppState {
+    viewBackgroundColor: string;
+    zoom: AppState['zoom'];
+    scrollX: number;
+    scrollY: number;
+    gridSize: AppState['gridSize'] | null;
+    theme: AppState['theme'];
+}
+interface ExcalidrawSceneSnapshot {
+    elements: readonly NonDeletedExcalidrawElement[];
+    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;
+    /** Excalidraw UI language. Defaults to 'vi-VN'. See @excalidraw/excalidraw locales. */
+    langCode?: string;
+}
+declare function ExcalidrawWhiteboardView({ role, initialScene, remoteScene, remoteFiles, onSceneChange, onFilesChange, langCode, }: ExcalidrawWhiteboardViewProps): react_jsx_runtime.JSX.Element;
+
+declare function pickSyncableAppState(s: AppState): SyncableAppState;
+
+export { type ExcalidrawSceneSnapshot, ExcalidrawWhiteboardView, type ExcalidrawWhiteboardViewProps, type SyncableAppState, pickSyncableAppState };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NonDeletedExcalidrawElement } 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';
+
+interface SyncableAppState {
+    viewBackgroundColor: string;
+    zoom: AppState['zoom'];
+    scrollX: number;
+    scrollY: number;
+    gridSize: AppState['gridSize'] | null;
+    theme: AppState['theme'];
+}
+interface ExcalidrawSceneSnapshot {
+    elements: readonly NonDeletedExcalidrawElement[];
+    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;
+    /** Excalidraw UI language. Defaults to 'vi-VN'. See @excalidraw/excalidraw locales. */
+    langCode?: string;
+}
+declare function ExcalidrawWhiteboardView({ role, initialScene, remoteScene, remoteFiles, onSceneChange, onFilesChange, langCode, }: ExcalidrawWhiteboardViewProps): react_jsx_runtime.JSX.Element;
+
+declare function pickSyncableAppState(s: AppState): SyncableAppState;
+
+export { type ExcalidrawSceneSnapshot, ExcalidrawWhiteboardView, type ExcalidrawWhiteboardViewProps, type SyncableAppState, pickSyncableAppState };