@netless/fastboard-react 0.2.5 → 0.2.6

package/dist/index.js

@@ -432,12 +432,7 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
 // src/components/ZoomControl/hooks.ts
 var import_react10 = require("react");
 var ScalePoints = [
-  0.10737418240000011,
-  0.13421772800000012,
-  0.16777216000000014,
-  0.20971520000000016,
-  0.26214400000000015,
-  0.3276800000000002,
+  0.3,
   0.4096000000000002,
   0.5120000000000001,
   0.6400000000000001,
@@ -447,12 +442,7 @@ var ScalePoints = [
   1.5876000000000001,
   2.000376,
   2.5204737600000002,
-  3.1757969376000004,
-  4.001504141376,
-  5.041895218133761,
-  6.352787974848539,
-  8.00451284830916,
-  10
+  3
 ];
 function nextScale(scale, delta) {
   const { length } = ScalePoints;
@@ -795,97 +785,48 @@ function PageControl({
 }
 
 // src/components/Toolbar/hooks.ts
-var import_react22 = require("react");
-function useRoomState() {
-  return useFastboardValue(useFastboardApp().memberState);
-}
-function useToolbar() {
-  const app = useFastboardApp();
-  const writable = useWritable();
-  const memberState = useRoomState();
-  const cleanCurrentScene = (0, import_react22.useCallback)(() => {
-    app.cleanCurrentScene();
-  }, [app]);
-  const setAppliance = (0, import_react22.useCallback)((appliance, shape) => {
-    app.setAppliance(appliance, shape);
-  }, [app]);
-  const setStrokeWidth = (0, import_react22.useCallback)((strokeWidth) => {
-    app.setStrokeWidth(strokeWidth);
-  }, [app]);
-  const setStrokeColor = (0, import_react22.useCallback)((strokeColor) => {
-    app.setStrokeColor(strokeColor);
-  }, [app]);
-  return {
-    writable,
-    memberState,
-    cleanCurrentScene,
-    setAppliance,
-    setStrokeWidth,
-    setStrokeColor
-  };
-}
-var EmptyToolbarHook = {
-  writable: false,
-  memberState: void 0,
-  cleanCurrentScene: noop,
-  setAppliance: noop,
-  setStrokeWidth: noop,
-  setStrokeColor: noop
-};
-
-// src/components/Toolbar/Toolbar.tsx
-var import_clsx9 = __toESM(require("clsx"));
-var import_framer_motion = require("framer-motion");
-var import_react59 = __toESM(require("react"));
-
-// src/components/Toolbar/components/assets/expanded.png
-var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
-
-// src/components/Toolbar/Content.tsx
-var import_clsx8 = __toESM(require("clsx"));
-var import_react58 = __toESM(require("react"));
+var import_react42 = require("react");
 
-// src/components/Toolbar/components/ApplianceButtons.tsx
-var import_react45 = __toESM(require("react"));
+// src/components/Toolbar/const.ts
 var import_white_web_sdk = require("white-web-sdk");
 
 // src/components/Toolbar/icons/index.ts
-var import_react42 = require("react");
+var import_react41 = require("react");
 
 // src/components/Toolbar/icons/Apps.tsx
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var Apps = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react23.default.createElement("svg", {
+  return /* @__PURE__ */ import_react22.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react23.default.createElement("g", {
+  }, /* @__PURE__ */ import_react22.default.createElement("g", {
     fill: stroke
-  }, /* @__PURE__ */ import_react23.default.createElement("path", {
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
     d: "M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z"
-  }), /* @__PURE__ */ import_react23.default.createElement("path", {
+  }), /* @__PURE__ */ import_react22.default.createElement("path", {
     d: "M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z"
   })));
 };
 
 // src/components/Toolbar/icons/Arrow.tsx
-var import_react24 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var Arrow = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react24.default.createElement("svg", {
+  return /* @__PURE__ */ import_react23.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react24.default.createElement("path", {
+  }, /* @__PURE__ */ import_react23.default.createElement("path", {
     fill: stroke,
     d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
   }));
 };
 
 // src/components/Toolbar/icons/Circle.tsx
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var Circle = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react25.default.createElement("svg", {
+  return /* @__PURE__ */ import_react24.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react25.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react24.default.createElement("rect", {
     width: "15",
     height: "15",
     x: "4.5",
@@ -897,40 +838,40 @@ var Circle = (props) => {
 };
 
 // src/components/Toolbar/icons/Clean.tsx
-var import_react26 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var Clean = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react26.default.createElement("svg", {
+  return /* @__PURE__ */ import_react25.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react26.default.createElement("path", {
+  }, /* @__PURE__ */ import_react25.default.createElement("path", {
     fill: stroke,
     d: "M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
   }));
 };
 
 // src/components/Toolbar/icons/Clicker.tsx
-var import_react27 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var Clicker = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react27.default.createElement("svg", {
+  return /* @__PURE__ */ import_react26.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react27.default.createElement("g", {
+  }, /* @__PURE__ */ import_react26.default.createElement("g", {
     fill: "none"
-  }, /* @__PURE__ */ import_react27.default.createElement("path", {
+  }, /* @__PURE__ */ import_react26.default.createElement("path", {
     d: "M0 0h24v24H0z"
-  }), /* @__PURE__ */ import_react27.default.createElement("path", {
+  }), /* @__PURE__ */ import_react26.default.createElement("path", {
     fill: stroke,
     d: "m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
   })));
 };
 
 // src/components/Toolbar/icons/Collapse.tsx
-var import_react28 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var Collapse = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react28.default.createElement("svg", {
+  return /* @__PURE__ */ import_react27.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react28.default.createElement("path", {
+  }, /* @__PURE__ */ import_react27.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
@@ -938,12 +879,12 @@ var Collapse = (props) => {
 };
 
 // src/components/Toolbar/icons/Diamond.tsx
-var import_react29 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var Diamond = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react29.default.createElement("svg", {
+  return /* @__PURE__ */ import_react28.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react29.default.createElement("path", {
+  }, /* @__PURE__ */ import_react28.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
@@ -951,12 +892,12 @@ var Diamond = (props) => {
 };
 
 // src/components/Toolbar/icons/Down.tsx
-var import_react30 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var Down = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react30.default.createElement("svg", {
+  return /* @__PURE__ */ import_react29.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react30.default.createElement("path", {
+  }, /* @__PURE__ */ import_react29.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
@@ -964,24 +905,24 @@ var Down = (props) => {
 };
 
 // src/components/Toolbar/icons/Eraser.tsx
-var import_react31 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var Eraser = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react31.default.createElement("svg", {
+  return /* @__PURE__ */ import_react30.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react31.default.createElement("path", {
+  }, /* @__PURE__ */ import_react30.default.createElement("path", {
     fill: stroke,
     d: "m14.333 5.183.165.007c.494.037.978.245 1.356.623l2.333 2.333a2.15 2.15 0 0 1 0 3.04l-5.833 5.834a3.8 3.8 0 0 1-5.374 0l-1.167-1.166a2.15 2.15 0 0 1 0-3.04l7-7c.42-.42.97-.63 1.52-.63ZM11.52 8.52l-4.999 5a1.15 1.15 0 0 0 0 1.626l1.167 1.167a2.8 2.8 0 0 0 3.96 0l3.832-3.833-3.96-3.96Z"
   }));
 };
 
 // src/components/Toolbar/icons/Expand.tsx
-var import_react32 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var Expand = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react32.default.createElement("svg", {
+  return /* @__PURE__ */ import_react31.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react32.default.createElement("path", {
+  }, /* @__PURE__ */ import_react31.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
@@ -989,36 +930,36 @@ var Expand = (props) => {
 };
 
 // src/components/Toolbar/icons/Line.tsx
-var import_react33 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var Line = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react33.default.createElement("svg", {
+  return /* @__PURE__ */ import_react32.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react33.default.createElement("path", {
+  }, /* @__PURE__ */ import_react32.default.createElement("path", {
     fill: stroke,
     d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
   }));
 };
 
 // src/components/Toolbar/icons/Pencil.tsx
-var import_react34 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var Pencil = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react34.default.createElement("svg", {
+  return /* @__PURE__ */ import_react33.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react34.default.createElement("path", {
+  }, /* @__PURE__ */ import_react33.default.createElement("path", {
     fill: stroke,
     d: "m17.497 4.84.116.105 1.442 1.442a1.52 1.52 0 0 1 .104 2.034l-.104.116L8.733 18.858l-4.347.756.756-4.347L15.463 4.945a1.52 1.52 0 0 1 2.034-.104ZM5.967 16.349l-.353 2.037 2.037-.354-1.683-1.683Zm8.407-8.901-7.946 7.946 2.178 2.178 7.946-7.946-2.178-2.178Zm-.728 2.2.708.707-5 5-.708-.708 5-5Zm2.596-4.055-.072.06-1.09 1.088 2.179 2.178 1.089-1.088a.52.52 0 0 0 .105-.584l-.045-.08-.06-.072-1.442-1.442a.52.52 0 0 0-.664-.06Z"
   }));
 };
 
 // src/components/Toolbar/icons/Rectangle.tsx
-var import_react35 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var Rectangle = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react35.default.createElement("svg", {
+  return /* @__PURE__ */ import_react34.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react35.default.createElement("path", {
+  }, /* @__PURE__ */ import_react34.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M5.5 5.5h13v13h-13z"
@@ -1026,24 +967,24 @@ var Rectangle = (props) => {
 };
 
 // src/components/Toolbar/icons/Selector.tsx
-var import_react36 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var Selector = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react36.default.createElement("svg", {
+  return /* @__PURE__ */ import_react35.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react36.default.createElement("path", {
+  }, /* @__PURE__ */ import_react35.default.createElement("path", {
     fill: stroke,
     d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
   }));
 };
 
 // src/components/Toolbar/icons/SpeechBalloon.tsx
-var import_react37 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var SpeechBalloon = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react37.default.createElement("svg", {
+  return /* @__PURE__ */ import_react36.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react37.default.createElement("path", {
+  }, /* @__PURE__ */ import_react36.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
@@ -1051,12 +992,12 @@ var SpeechBalloon = (props) => {
 };
 
 // src/components/Toolbar/icons/Star.tsx
-var import_react38 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var Star = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react38.default.createElement("svg", {
+  return /* @__PURE__ */ import_react37.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react38.default.createElement("path", {
+  }, /* @__PURE__ */ import_react37.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m12 3.523 1.993 5.734 6.07.123-4.838 3.668 1.758 5.81L12 15.391l-4.983 3.467 1.758-5.81L3.938 9.38l6.069-.123L12 3.523Z"
@@ -1064,24 +1005,24 @@ var Star = (props) => {
 };
 
 // src/components/Toolbar/icons/Text.tsx
-var import_react39 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var Text = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react39.default.createElement("svg", {
+  return /* @__PURE__ */ import_react38.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react39.default.createElement("path", {
+  }, /* @__PURE__ */ import_react38.default.createElement("path", {
     fill: stroke,
     d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
   }));
 };
 
 // src/components/Toolbar/icons/Triangle.tsx
-var import_react40 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var Triangle = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react40.default.createElement("svg", {
+  return /* @__PURE__ */ import_react39.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react40.default.createElement("path", {
+  }, /* @__PURE__ */ import_react39.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
@@ -1089,12 +1030,12 @@ var Triangle = (props) => {
 };
 
 // src/components/Toolbar/icons/Up.tsx
-var import_react41 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var Up = (props) => {
   const stroke = getStroke(props);
-  return /* @__PURE__ */ import_react41.default.createElement("svg", {
+  return /* @__PURE__ */ import_react40.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react41.default.createElement("path", {
+  }, /* @__PURE__ */ import_react40.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
@@ -1103,27 +1044,117 @@ var Up = (props) => {
 
 // src/components/Toolbar/icons/index.ts
 var Icons = {
-  Clicker: (0, import_react42.memo)(Clicker),
-  Collapse: (0, import_react42.memo)(Collapse),
-  Eraser: (0, import_react42.memo)(Eraser),
-  Expand: (0, import_react42.memo)(Expand),
-  Pencil: (0, import_react42.memo)(Pencil),
-  Selector: (0, import_react42.memo)(Selector),
-  Rectangle: (0, import_react42.memo)(Rectangle),
-  Text: (0, import_react42.memo)(Text),
-  Apps: (0, import_react42.memo)(Apps),
-  Clean: (0, import_react42.memo)(Clean),
-  Circle: (0, import_react42.memo)(Circle),
-  Line: (0, import_react42.memo)(Line),
-  Arrow: (0, import_react42.memo)(Arrow),
-  Star: (0, import_react42.memo)(Star),
-  Diamond: (0, import_react42.memo)(Diamond),
-  SpeechBalloon: (0, import_react42.memo)(SpeechBalloon),
-  Triangle: (0, import_react42.memo)(Triangle),
-  Up: (0, import_react42.memo)(Up),
-  Down: (0, import_react42.memo)(Down)
+  Clicker: (0, import_react41.memo)(Clicker),
+  Collapse: (0, import_react41.memo)(Collapse),
+  Eraser: (0, import_react41.memo)(Eraser),
+  Expand: (0, import_react41.memo)(Expand),
+  Pencil: (0, import_react41.memo)(Pencil),
+  Selector: (0, import_react41.memo)(Selector),
+  Rectangle: (0, import_react41.memo)(Rectangle),
+  Text: (0, import_react41.memo)(Text),
+  Apps: (0, import_react41.memo)(Apps),
+  Clean: (0, import_react41.memo)(Clean),
+  Circle: (0, import_react41.memo)(Circle),
+  Line: (0, import_react41.memo)(Line),
+  Arrow: (0, import_react41.memo)(Arrow),
+  Star: (0, import_react41.memo)(Star),
+  Diamond: (0, import_react41.memo)(Diamond),
+  SpeechBalloon: (0, import_react41.memo)(SpeechBalloon),
+  Triangle: (0, import_react41.memo)(Triangle),
+  Up: (0, import_react41.memo)(Up),
+  Down: (0, import_react41.memo)(Down)
+};
+
+// src/components/Toolbar/const.ts
+var ShapesMap = {
+  [import_white_web_sdk.ApplianceNames.rectangle]: Icons.Rectangle,
+  [import_white_web_sdk.ApplianceNames.ellipse]: Icons.Circle,
+  [import_white_web_sdk.ApplianceNames.straight]: Icons.Line,
+  [import_white_web_sdk.ApplianceNames.arrow]: Icons.Arrow,
+  [import_white_web_sdk.ShapeType.Pentagram]: Icons.Star,
+  [import_white_web_sdk.ShapeType.Rhombus]: Icons.Diamond,
+  [import_white_web_sdk.ShapeType.Triangle]: Icons.Triangle,
+  [import_white_web_sdk.ShapeType.SpeechBalloon]: Icons.SpeechBalloon
+};
+var ApplianceShapes = [
+  import_white_web_sdk.ApplianceNames.rectangle,
+  import_white_web_sdk.ApplianceNames.ellipse,
+  import_white_web_sdk.ApplianceNames.straight,
+  import_white_web_sdk.ApplianceNames.arrow
+];
+var Shapes = [
+  import_white_web_sdk.ShapeType.Pentagram,
+  import_white_web_sdk.ShapeType.Rhombus,
+  import_white_web_sdk.ShapeType.Triangle,
+  import_white_web_sdk.ShapeType.SpeechBalloon
+];
+var ItemHeight = 32 + 4;
+var ItemsCount = 8;
+var MaxHeight = ItemHeight * ItemsCount - 4;
+var MinHeight = ItemHeight * 2 - 4;
+
+// src/components/Toolbar/hooks.ts
+function useRoomState() {
+  return useFastboardValue(useFastboardApp().memberState);
+}
+function useToolbar() {
+  const app = useFastboardApp();
+  const writable = useWritable();
+  const memberState = useRoomState();
+  const [lastShape, setLastShape] = (0, import_react42.useState)("rectangle");
+  const cleanCurrentScene = (0, import_react42.useCallback)(() => {
+    app.cleanCurrentScene();
+  }, [app]);
+  const setAppliance = (0, import_react42.useCallback)((appliance, shape) => {
+    app.setAppliance(appliance, shape);
+    if (shape) {
+      setLastShape(shape);
+    } else if (appliance in ShapesMap) {
+      setLastShape(appliance);
+    }
+  }, [app]);
+  const setStrokeWidth = (0, import_react42.useCallback)((strokeWidth) => {
+    app.setStrokeWidth(strokeWidth);
+  }, [app]);
+  const setStrokeColor = (0, import_react42.useCallback)((strokeColor) => {
+    app.setStrokeColor(strokeColor);
+  }, [app]);
+  return {
+    writable,
+    memberState,
+    lastShape,
+    cleanCurrentScene,
+    setAppliance,
+    setStrokeWidth,
+    setStrokeColor
+  };
+}
+var EmptyToolbarHook = {
+  writable: false,
+  memberState: void 0,
+  lastShape: "rectangle",
+  cleanCurrentScene: noop,
+  setAppliance: noop,
+  setStrokeWidth: noop,
+  setStrokeColor: noop
 };
 
+// src/components/Toolbar/Toolbar.tsx
+var import_clsx9 = __toESM(require("clsx"));
+var import_framer_motion = require("framer-motion");
+var import_react59 = __toESM(require("react"));
+
+// src/components/Toolbar/components/assets/expanded.png
+var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
+
+// src/components/Toolbar/Content.tsx
+var import_clsx8 = __toESM(require("clsx"));
+var import_react58 = __toESM(require("react"));
+
+// src/components/Toolbar/components/ApplianceButtons.tsx
+var import_react45 = __toESM(require("react"));
+var import_white_web_sdk2 = require("white-web-sdk");
+
 // src/components/Toolbar/components/Button.tsx
 var import_clsx4 = __toESM(require("clsx"));
 var import_react43 = __toESM(require("react"));
@@ -1164,10 +1195,10 @@ function ClickerButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.clicker), [setAppliance]);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk2.ApplianceNames.clicker), [setAppliance]);
   const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === import_white_web_sdk.ApplianceNames.clicker;
+  const active = appliance === import_white_web_sdk2.ApplianceNames.clicker;
   const disabled = !writable;
   return /* @__PURE__ */ import_react45.default.createElement(Button, {
     content: renderToolTip(t("clicker"), shortcut),
@@ -1186,9 +1217,9 @@ function SelectorButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.selector), [setAppliance]);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk2.ApplianceNames.selector), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === import_white_web_sdk.ApplianceNames.selector;
+  const active = appliance === import_white_web_sdk2.ApplianceNames.selector;
   const disabled = !writable;
   const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
   return /* @__PURE__ */ import_react45.default.createElement(Button, {
@@ -1208,9 +1239,9 @@ function EraserButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.eraser), [setAppliance]);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk2.ApplianceNames.eraser), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === import_white_web_sdk.ApplianceNames.eraser;
+  const active = appliance === import_white_web_sdk2.ApplianceNames.eraser;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
   return /* @__PURE__ */ import_react45.default.createElement(Button, {
@@ -1327,7 +1358,7 @@ function AppIcon({ title, src, alt, onClick }) {
 // src/components/Toolbar/components/PencilButton.tsx
 var import_react51 = __toESM(require("@tippyjs/react"));
 var import_react52 = __toESM(require("react"));
-var import_white_web_sdk2 = require("white-web-sdk");
+var import_white_web_sdk3 = require("white-web-sdk");
 
 // src/components/Toolbar/components/ColorBox.tsx
 var import_clsx5 = __toESM(require("clsx"));
@@ -1404,10 +1435,10 @@ function PencilButton() {
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = (0, import_react52.useContext)(ToolbarContext);
   const changeAppliance = (0, import_react52.useCallback)(() => {
-    setAppliance(import_white_web_sdk2.ApplianceNames.pencil);
+    setAppliance(import_white_web_sdk3.ApplianceNames.pencil);
   }, [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === import_white_web_sdk2.ApplianceNames.pencil;
+  const active = appliance === import_white_web_sdk3.ApplianceNames.pencil;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
   return /* @__PURE__ */ import_react52.default.createElement("span", {
@@ -1446,46 +1477,15 @@ function renderPencilButtonContent() {
 var import_react53 = __toESM(require("@tippyjs/react"));
 var import_react54 = __toESM(require("react"));
 var import_white_web_sdk4 = require("white-web-sdk");
-
-// src/components/Toolbar/const.ts
-var import_white_web_sdk3 = require("white-web-sdk");
-var ShapesMap = {
-  [import_white_web_sdk3.ApplianceNames.rectangle]: Icons.Rectangle,
-  [import_white_web_sdk3.ApplianceNames.ellipse]: Icons.Circle,
-  [import_white_web_sdk3.ApplianceNames.straight]: Icons.Line,
-  [import_white_web_sdk3.ApplianceNames.arrow]: Icons.Arrow,
-  [import_white_web_sdk3.ShapeType.Pentagram]: Icons.Star,
-  [import_white_web_sdk3.ShapeType.Rhombus]: Icons.Diamond,
-  [import_white_web_sdk3.ShapeType.Triangle]: Icons.Triangle,
-  [import_white_web_sdk3.ShapeType.SpeechBalloon]: Icons.SpeechBalloon
-};
-var ApplianceShapes = [
-  import_white_web_sdk3.ApplianceNames.rectangle,
-  import_white_web_sdk3.ApplianceNames.ellipse,
-  import_white_web_sdk3.ApplianceNames.straight,
-  import_white_web_sdk3.ApplianceNames.arrow
-];
-var Shapes = [
-  import_white_web_sdk3.ShapeType.Pentagram,
-  import_white_web_sdk3.ShapeType.Rhombus,
-  import_white_web_sdk3.ShapeType.Triangle,
-  import_white_web_sdk3.ShapeType.SpeechBalloon
-];
-var ItemHeight = 32 + 4;
-var ItemsCount = 8;
-var MaxHeight = ItemHeight * ItemsCount - 4;
-var MinHeight = ItemHeight * 2 - 4;
-
-// src/components/Toolbar/components/ShapesButton.tsx
 var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
 function ShapesButton() {
   const { t } = useTranslation();
-  const { theme, memberState } = (0, import_react54.useContext)(ToolbarContext);
+  const { theme, memberState, lastShape } = (0, import_react54.useContext)(ToolbarContext);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const shape = memberState == null ? void 0 : memberState.shapeType;
   const key = appliance === import_white_web_sdk4.ApplianceNames.shape ? shape : appliance;
   const active = ShapeTypes.has(key);
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[lastShape];
   return /* @__PURE__ */ import_react54.default.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
   }, /* @__PURE__ */ import_react54.default.createElement(import_react53.default, {