@netless/fastboard 0.0.10 → 0.0.11

package/dist/svelte.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("svelte/store"),n=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function o(t,i){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(i).then(r=>{s(e=r)});const u=t.subscribe(r=>{r&&e&&e.bindElement(r)});return()=>{u(),e&&e.dispose()}})}exports.useFastboard=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("svelte/store"),n=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("framer-motion");require("clsx");require("@tippyjs/react");require("rc-slider");function o(i,t){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(t).then(r=>{s(e=r)});const u=i.subscribe(r=>{r&&e&&e.bindElement(r)});return()=>{u(),e&&e.dispose()}})}exports.useFastboard=o;
 //# sourceMappingURL=svelte.cjs.js.map

package/dist/svelte.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":["readable"],"mappings":"kWAqBE,EACA,EACgC,OACzBA,YAA+B,KAAM,GAAO,IAC7C,GAA6B,2BAEb,GAAQ,KAAK,GAAO,GACjC,EAAO,UAGR,GAAU,EAAI,UAAU,GAAO,CAC/B,GAAO,KACJ,YAAY,WAId,IAAM,KAEP,KACG"}
+{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":["readable"],"mappings":"2XAqBE,EACA,EACgC,OACzBA,YAA+B,KAAM,GAAO,IAC7C,GAA6B,2BAEb,GAAQ,KAAK,GAAO,GACjC,EAAO,UAGR,GAAU,EAAI,UAAU,GAAO,CAC/B,GAAO,KACJ,YAAY,WAId,IAAM,KAEP,KACG"}

package/dist/svelte.es.js

@@ -5,6 +5,7 @@ import "white-web-sdk";
 import "i18next";
 import "react";
 import "react-dom";
+import "framer-motion";
 import "clsx";
 import "@tippyjs/react";
 import "rc-slider";

package/dist/svelte.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.es.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAqBE,KACA,QACgC;SACzB,SAA+B,MAAM,SAAO;QAC7C,OAA6B;wBAEb,QAAQ,KAAK,SAAO;UACjC,OAAO;AAAA;UAGR,UAAU,IAAI,UAAU,SAAO;UAC/B,OAAO,MAAM;aACV,YAAY;AAAA;AAAA;WAId,MAAM;;UAEP,MAAM;aACH;AAAA;AAAA;AAAA;AAAA;;"}
+{"version":3,"file":"svelte.es.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;;sBAqBE,KACA,QACgC;SACzB,SAA+B,MAAM,SAAO;QAC7C,OAA6B;wBAEb,QAAQ,KAAK,SAAO;UACjC,OAAO;AAAA;UAGR,UAAU,IAAI,UAAU,SAAO;UAC/B,OAAO,MAAM;aACV,YAAY;AAAA;AAAA;WAId,MAAM;;UAEP,MAAM;aACH;AAAA;AAAA;AAAA;AAAA;;"}

package/dist/vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var t=require("vue-demi"),s=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function n(u){var e;const r=t.unref(u);return(e=r==null?void 0:r.$el)!=null?e:r}function o(u){return t.getCurrentScope()?(t.onScopeDispose(u),!0):!1}function l(u,r){const e=t.shallowRef(null),i=t.computed(()=>n(u));return s.createWhiteboardApp(r).then(a=>{e.value=a}),t.watchEffect(()=>{i.value&&e.value&&e.value.bindElement(i.value)}),o(()=>{e.value&&e.value.dispose()}),e}exports.unrefElement=n;exports.useFastboard=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var t=require("vue-demi"),o=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("framer-motion");require("clsx");require("@tippyjs/react");require("rc-slider");function n(u){var e;const r=t.unref(u);return(e=r==null?void 0:r.$el)!=null?e:r}function s(u){return t.getCurrentScope()?(t.onScopeDispose(u),!0):!1}function l(u,r){const e=t.shallowRef(null),i=t.computed(()=>n(u));return o.createWhiteboardApp(r).then(a=>{e.value=a}),t.watchEffect(()=>{i.value&&e.value&&e.value.bindElement(i.value)}),s(()=>{e.value&&e.value.dispose()}),e}exports.unrefElement=n;exports.useFastboard=l;
 //# sourceMappingURL=vue.cjs.js.map

package/dist/vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.cjs.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":["unref","getCurrentScope","shallowRef","computed"],"mappings":"8VAwB6B,EAAwB,YAC7C,GAAQA,QAAM,SACZ,oBAAuB,MAAvB,OAA8B,EAGxC,WAA2B,EAAgB,OACrCC,uCACa,GACR,IAEF,cAkBoB,EAAqB,EAAyB,MACnE,GAAMC,aAAiC,MACvC,EAASC,WAAS,IAAM,EAAa,iCAEvB,GAAQ,KAAK,GAAQ,GACnC,MAAQ,kBAGF,IAAM,CACZ,EAAO,OAAS,EAAI,SAClB,MAAM,YAAY,EAAO,WAIf,IAAM,CAClB,EAAI,SACF,MAAM,YAIP"}
+{"version":3,"file":"vue.cjs.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":["unref","getCurrentScope","shallowRef","computed"],"mappings":"uXAwB6B,EAAwB,YAC7C,GAAQA,QAAM,SACZ,oBAAuB,MAAvB,OAA8B,EAGxC,WAA2B,EAAgB,OACrCC,uCACa,GACR,IAEF,cAkBoB,EAAqB,EAAyB,MACnE,GAAMC,aAAiC,MACvC,EAASC,WAAS,IAAM,EAAa,iCAEvB,GAAQ,KAAK,GAAQ,GACnC,MAAQ,kBAGF,IAAM,CACZ,EAAO,OAAS,EAAI,SAClB,MAAM,YAAY,EAAO,WAIf,IAAM,CAClB,EAAI,SACF,MAAM,YAIP"}

package/dist/vue.es.js

@@ -5,6 +5,7 @@ import "white-web-sdk";
 import "i18next";
 import "react";
 import "react-dom";
+import "framer-motion";
 import "clsx";
 import "@tippyjs/react";
 import "rc-slider";

package/dist/vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.es.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAwB6B,OAAwB;;QAC7C,QAAQ,MAAM;SACZ,qCAAuB,QAAvB,YAA8B;AAAA;AAGxC,2BAA2B,IAAgB;MACrC,mBAAmB;mBACN;WACR;AAAA;SAEF;AAAA;sBAkBoB,IAAqB,QAAyB;QACnE,MAAM,WAAiC;QACvC,SAAS,SAAS,MAAM,aAAa;sBAEvB,QAAQ,KAAK,UAAQ;QACnC,QAAQ;AAAA;cAGF,MAAM;QACZ,OAAO,SAAS,IAAI,OAAO;UACzB,MAAM,YAAY,OAAO;AAAA;AAAA;oBAIf,MAAM;QAClB,IAAI,OAAO;UACT,MAAM;AAAA;AAAA;SAIP;AAAA;;"}
+{"version":3,"file":"vue.es.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":[],"mappings":";;;;;;;;;;;sBAwB6B,OAAwB;;QAC7C,QAAQ,MAAM;SACZ,qCAAuB,QAAvB,YAA8B;AAAA;AAGxC,2BAA2B,IAAgB;MACrC,mBAAmB;mBACN;WACR;AAAA;SAEF;AAAA;sBAkBoB,IAAqB,QAAyB;QACnE,MAAM,WAAiC;QACvC,SAAS,SAAS,MAAM,aAAa;sBAEvB,QAAQ,KAAK,UAAQ;QACnC,QAAQ;AAAA;cAGF,MAAM;QACZ,OAAO,SAAS,IAAI,OAAO;UACzB,MAAM,YAAY,OAAO;AAAA;AAAA;oBAIf,MAAM;QAClB,IAAI,OAAO;UACT,MAAM;AAAA;AAAA;SAIP;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -86,10 +86,11 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
+    "framer-motion": "^5.5.6",
     "i18next": "^21.6.5",
     "rc-slider": "^9.7.5",
     "tippy.js": "^6.3.7",
     "vue-demi": "^0.12.1"
   },
-  "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard @netless/window-manager white-web-sdk react react-dom\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet app = await createWhiteboardApp({\n  target: document.getElementById(\"whiteboard\"),\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n```\n\n> 使用 `React`\n\n```jsx\nimport { createWhiteboardApp, Fastboard } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nlet app = await createWhiteboardApp({\n  /* ... */\n});\n\nfunction App() {\n  return <Fastboard app={app} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await app.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await app.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await app.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
+  "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard @netless/window-manager white-web-sdk react react-dom\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet app = await createWhiteboardApp({\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n\napp.bindElement(document.getElementById(\"whiteboard\"));\n```\n\n> 使用 `React`\n\n```jsx\nimport { createWhiteboardApp, Fastboard } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nlet app = await createWhiteboardApp({\n  /* ... */\n});\n\nfunction App() {\n  return <Fastboard app={app} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n关于窗口最小化后显示的小图标，可以通过 CSS 覆盖样式的方式修改它的位置：\n\n```css\n.telebox-collector {\n  right: 20px;\n  bottom: 40px;\n}\n```\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await app.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await app.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await app.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
 }

package/src/components/PageControl/PageControl.tsx

@@ -0,0 +1,110 @@
+import type { CommonProps, GenericIcon } from "../../types";
+
+import clsx from "clsx";
+import React from "react";
+import Tippy from "@tippyjs/react";
+
+import { TopOffset } from "../../theme";
+import { Icon } from "../../icons";
+import { FilePlus } from "../../icons/FilePlus";
+import { ChevronLeft } from "../../icons/ChevronLeft";
+import { ChevronRight } from "../../icons/ChevronRight";
+import { useWritable } from "../hooks";
+import { usePageControl } from "./hooks";
+
+export const name = "fastboard-page-control";
+
+export type PageControlProps = CommonProps &
+  GenericIcon<"add" | "prev" | "next">;
+
+export function PageControl({
+  room,
+  manager,
+  theme = "light",
+  addIcon,
+  addIconDisable,
+  prevIcon,
+  prevIconDisable,
+  nextIcon,
+  nextIconDisable,
+  i18n,
+}: PageControlProps) {
+  const writable = useWritable(room);
+  const { pageIndex, pageCount, ...actions } = usePageControl(room, manager);
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      {/* <span className={clsx(`${name}-cut-line`, theme)} />{" "} */}
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("prevPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "prev", theme)}
+          disabled={disabled || pageIndex === 0}
+          onClick={actions.prevPage}
+        >
+          <Icon
+            fallback={<ChevronLeft theme={theme} />}
+            src={disabled ? prevIconDisable : prevIcon}
+            alt="[prev]"
+          />
+        </button>
+      </Tippy>
+      <span className={clsx(`${name}-page`, theme)}>
+        {pageCount === 0 ? "\u2026" : pageIndex + 1}
+      </span>
+      <span className={clsx(`${name}-slash`, theme)}>/</span>
+      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("nextPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "next", theme)}
+          disabled={disabled || pageIndex === pageCount - 1}
+          onClick={actions.nextPage}
+        >
+          <Icon
+            fallback={<ChevronRight theme={theme} />}
+            src={disabled ? nextIconDisable : nextIcon}
+            alt="[next]"
+          />
+        </button>
+      </Tippy>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("addPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "add", theme)}
+          disabled={disabled}
+          onClick={actions.addPage}
+        >
+          <Icon
+            fallback={<FilePlus theme={theme} />}
+            src={disabled ? addIconDisable : addIcon}
+            alt="[add]"
+          />
+        </button>
+      </Tippy>
+    </div>
+  );
+}

package/src/components/PageControl/hooks.ts

@@ -0,0 +1,70 @@
+import type { Room, RoomState } from "white-web-sdk";
+import type { WindowManager } from "@netless/window-manager";
+import { useCallback, useEffect, useState } from "react";
+
+export function usePageControl(
+  room?: Room | null,
+  manager?: WindowManager | null
+) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageCount, setPageCount] = useState(0);
+
+  const addPage = useCallback(async () => {
+    if (manager && room) {
+      await manager.switchMainViewToWriter();
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (!manager && room) {
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
+    }
+  }, [room, manager, pageIndex]);
+
+  const prevPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex - 1);
+    } else if (room) {
+      room.pptPreviousStep();
+    }
+  }, [room, manager, pageIndex]);
+
+  const nextPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (room) {
+      room.pptNextStep();
+    }
+  }, [room, manager, pageIndex]);
+
+  useEffect(() => {
+    if (room) {
+      setPageIndex(room.state.sceneState.index);
+      setPageCount(room.state.sceneState.scenes.length);
+
+      if (manager) {
+        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
+
+        return () => {
+          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
+        };
+      } else {
+        const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
+          if (modifyState.sceneState) {
+            setPageIndex(modifyState.sceneState.index);
+            setPageCount(modifyState.sceneState.scenes.length);
+          }
+        };
+
+        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+
+        return () => {
+          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+        };
+      }
+    }
+  }, [room, manager]);
+
+  return { pageIndex, pageCount, prevPage, nextPage, addPage };
+}

package/src/components/PageControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { name, PageControl, type PageControlProps } from "./PageControl";

package/src/components/PlayerControl/PlayerControl.tsx

@@ -1,16 +1,15 @@
-import type { Player } from "white-web-sdk";
 import type { CommonProps, GenericIcon } from "../../types";
-
+import Tippy from "@tippyjs/react";
 import clsx from "clsx";
-import React, { useEffect, useState } from "react";
 import RcSlider from "rc-slider";
-import { PlayerPhase } from "white-web-sdk";
-import { usePlayer } from "./hooks";
+import React, { useEffect, useState } from "react";
+import { PlayerPhase, type Player } from "white-web-sdk";
+
 import { Icon } from "../../icons";
 import { themes, TopOffset } from "../../theme";
-import { Icons } from "./icons";
-import Tippy from "@tippyjs/react";
 import { Button } from "./components/Button";
+import { Icons } from "./icons";
+import { usePlayerControl } from "./hooks";
 
 export type PlayerControlProps = {
   autoHide?: boolean;
@@ -28,7 +27,7 @@ export function PlayerControl({
   ...icons
 }: PlayerControlProps) {
   const [currentTime, setCurrentTime] = useState(0);
-  const player = usePlayer(player_);
+  const player = usePlayerControl(player_);
 
   useEffect(() => {
     setCurrentTime(player.currentTime);

package/src/components/PlayerControl/hooks.ts

@@ -13,7 +13,7 @@ function useForceUpdate() {
   return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
 }
 
-export function usePlayer(player?: Player | null) {
+export function usePlayerControl(player?: Player | null) {
   const togglePlay = useCallback(() => {
     if (player) {
       switch (player.phase) {

package/src/components/PlayerControl/index.ts

@@ -1 +1,2 @@
+export * from "./hooks";
 export { PlayerControl, name, type PlayerControlProps } from "./PlayerControl";

package/src/components/{RedoUndo.tsx → RedoUndo/RedoUndo.tsx}

@@ -1,13 +1,15 @@
-import type { CommonProps, GenericIcon } from "../types";
+import type { CommonProps, GenericIcon } from "../../types";
 
 import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 import Tippy from "@tippyjs/react";
 
-import { Icon } from "../icons";
-import { Undo } from "../icons/Undo";
-import { Redo } from "../icons/Redo";
-import { TopOffset } from "../theme";
+import { Icon } from "../../icons";
+import { Undo } from "../../icons/Undo";
+import { Redo } from "../../icons/Redo";
+import { TopOffset } from "../../theme";
+import { useWritable } from "../hooks";
+import { useRedoUndo } from "./hooks";
 
 export const name = "fastboard-redo-undo";
 
@@ -15,6 +17,7 @@ export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
 
 export function RedoUndo({
   room,
+  manager,
   theme = "light",
   undoIcon,
   undoIconDisable,
@@ -22,27 +25,8 @@ export function RedoUndo({
   redoIconDisable,
   i18n,
 }: RedoUndoProps) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-
-      const updateWritable = () => setWritable(room?.isWritable || false);
-
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
+  const writable = useWritable(room);
+  const { redoSteps, undoSteps, redo, undo } = useRedoUndo(room, manager);
 
   const disabled = !writable;
 
@@ -60,7 +44,7 @@ export function RedoUndo({
         <button
           className={clsx(`${name}-btn`, "undo", theme)}
           disabled={disabled || undoSteps === 0}
-          onClick={useCallback(() => room && room.undo(), [room])}
+          onClick={undo}
         >
           <Icon
             fallback={<Undo theme={theme} />}
@@ -81,7 +65,7 @@ export function RedoUndo({
         <button
           className={clsx(`${name}-btn`, "redo", theme)}
           disabled={disabled || redoSteps === 0}
-          onClick={useCallback(() => room && room.redo(), [room])}
+          onClick={redo}
         >
           <Icon
             fallback={<Redo theme={theme} />}

package/src/components/RedoUndo/hooks.ts

@@ -0,0 +1,50 @@
+import type { WindowManager, Room } from "@netless/window-manager";
+import { useCallback, useEffect, useState } from "react";
+
+export function useRedoUndo(
+  room?: Room | null,
+  manager?: WindowManager | null
+) {
+  const [undoSteps, setUndoSteps] = useState(0);
+  const [redoSteps, setRedoSteps] = useState(0);
+
+  useEffect(() => {
+    if (manager) {
+      manager.mainView.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      manager.mainView.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+
+      return () => {
+        manager.mainView.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        manager.mainView.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+
+    if (room) {
+      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+
+      return () => {
+        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+  }, [room, manager]);
+
+  const undo = useCallback(() => {
+    if (manager) {
+      manager.mainView.undo();
+    } else if (room) {
+      room.undo();
+    }
+  }, [manager, room]);
+
+  const redo = useCallback(() => {
+    if (manager) {
+      manager.mainView.redo();
+    } else if (room) {
+      room.redo();
+    }
+  }, [manager, room]);
+
+  return { redoSteps, undoSteps, redo, undo };
+}

package/src/components/RedoUndo/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { name, RedoUndo, type RedoUndoProps } from "./RedoUndo";

package/src/components/Root.tsx

@@ -5,6 +5,7 @@ import { Toolbar } from "./Toolbar";
 import { RedoUndo } from "./RedoUndo";
 import { ZoomControl } from "./ZoomControl";
 import { PageControl } from "./PageControl";
+import { useHideControls } from "./hooks";
 
 export interface RootProps {
   instance: Instance;
@@ -21,12 +22,8 @@ export function Root({ instance: app }: RootProps) {
     [app, mux]
   );
 
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true,
-  } = app.config.layout || {};
+  const hideControls = useHideControls(app.manager);
+  const showControls = !hideControls;
 
   const props = {
     room: app.room,
@@ -34,6 +31,13 @@ export function Root({ instance: app }: RootProps) {
     i18n: app.i18n,
   };
 
+  const {
+    Toolbar: toolbar = showControls || hideControls === "toolbar-only",
+    RedoUndo: redo_undo = showControls,
+    ZoomControl: zoom_control = showControls,
+    PageControl: page_control = showControls,
+  } = app.config.layout || {};
+
   return (
     <Instance.Context.Provider value={app}>
       <div className="fastboard-root">

package/src/components/Toolbar/Content.tsx

@@ -14,8 +14,9 @@ import { AppsButton } from "./components/AppsButton";
 import { PencilButton } from "./components/PencilButton";
 import { TextButton } from "./components/TextButton";
 import { ShapesButton } from "./components/ShapesButton";
+import clsx from "clsx";
 
-export function Content() {
+export const Content = React.memo(() => {
   const app = useInstance();
   const ref = useRef<HTMLDivElement>(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -65,7 +66,7 @@ export function Content() {
       )}
       <div
         ref={ref}
-        className={`${name}-section`}
+        className={clsx(`${name}-section`)}
         style={{
           height: `${sectionHeight}px`,
           overflow: needScroll ? "hidden" : "visible",
@@ -90,4 +91,4 @@ export function Content() {
       )}
     </>
   );
-}
+});

package/src/components/Toolbar/Toolbar.scss

@@ -40,10 +40,23 @@ $name: "fastboard-toolbar";
     border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
+  &.expanded {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
   &.dark {
     color: #ddd;
     background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+  }
+
+  &.expanded:hover {
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &.collapsed {
+    padding: 0;
+    background-color: transparent;
   }
 
   &-tooltip {
@@ -132,6 +145,11 @@ $name: "fastboard-toolbar";
     flex-flow: column nowrap;
     gap: 4px;
     scroll-behavior: smooth;
+
+    &.collapsed {
+      transform: translateX(-100%);
+      transition: 1s transform;
+    }
   }
 
   &-panel {
@@ -244,4 +262,20 @@ $name: "fastboard-toolbar";
       outline-offset: 2px;
     }
   }
+
+  &-mask-btn {
+    width: 17px;
+    height: 62px;
+    cursor: pointer;
+    &.dark {
+      filter: invert(0.8);
+    }
+  }
+
+  &-expand-btn {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+  }
 }