@netless/fastboard-ui 0.3.21 → 0.3.22-beta.0

package/dist/index.mjs

@@ -358,10 +358,6 @@ function transition_out(block, local, detach2, callback) {
     callback();
   }
 }
-function destroy_block(block, lookup) {
-  block.d(1);
-  lookup.delete(block.key);
-}
 function outro_and_destroy_block(block, lookup) {
   transition_out(block, 1, 1, () => {
     lookup.delete(block.key);
@@ -7074,6 +7070,7 @@ var colors = {
   "#B620E0": [182, 32, 224],
   "#6D7278": [109, 114, 120]
 };
+var default_colors = Object.values(colors);
 var shapes = [
   "rectangle",
   "ellipse",
@@ -7131,7 +7128,6 @@ var i18n4 = {
     laserPointer: "\u6FC0\u5149\u7B14"
   }
 };
-var colorKeys = Object.keys(colors);
 
 // src/actions/scroll.ts
 var scrollTop = function(node, value) {
@@ -7254,6 +7250,20 @@ function tooltip(text2, hotkey) {
   append(outer, hotkey_span);
   return outer;
 }
+function rgbToHex(r, g, b) {
+  const hex = ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");
+  return "#" + hex;
+}
+function hexToRgb(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length !== 6) {
+    throw new Error("Invalid hex color");
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return [r, g, b];
+}
 
 // src/components/Toolbar/components/Slider.svelte
 function create_fragment53(ctx) {
@@ -7669,70 +7679,93 @@ var StrokeWidth_default = StrokeWidth;
 // src/components/Toolbar/components/StrokeColor.svelte
 function get_each_context(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[7] = list[i];
+  child_ctx[8] = list[i];
   return child_ctx;
 }
-function create_each_block(key_1, ctx) {
+function create_each_block(ctx) {
   let button;
   let span;
   let t;
   let button_class_value;
+  let button_data_color_key_value;
   return {
-    key: key_1,
-    first: null,
     c() {
       button = element("button");
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(
-        span,
-        "background-color",
-        /*key*/
-        ctx[7]
-      );
+      set_style(span, "background-color", rgbToHex(
+        /*color*/
+        ctx[8][0],
+        /*color*/
+        ctx[8][1],
+        /*color*/
+        ctx[8][2]
+      ));
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + /*theme*/
       ctx[0]);
-      attr(button, "data-color-key", /*key*/
-      ctx[7]);
+      attr(button, "data-color-key", button_data_color_key_value = rgbToHex(
+        /*color*/
+        ctx[8][0],
+        /*color*/
+        ctx[8][1],
+        /*color*/
+        ctx[8][2]
+      ));
       button.disabled = /*disabled*/
       ctx[1];
       toggle_class(button, "is-active", is_equal_color(
         /*strokeColor*/
-        ctx[2],
-        colors[
-          /*key*/
-          ctx[7]
-        ]
+        ctx[3],
+        /*color*/
+        ctx[8]
       ));
-      this.first = button;
     },
     m(target, anchor) {
       insert(target, button, anchor);
       append(button, span);
       append(button, t);
     },
-    p(new_ctx, dirty) {
-      ctx = new_ctx;
+    p(ctx2, dirty) {
+      if (dirty & /*colors*/
+      4) {
+        set_style(span, "background-color", rgbToHex(
+          /*color*/
+          ctx2[8][0],
+          /*color*/
+          ctx2[8][1],
+          /*color*/
+          ctx2[8][2]
+        ));
+      }
       if (dirty & /*theme*/
       1 && button_class_value !== (button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + /*theme*/
-      ctx[0])) {
+      ctx2[0])) {
         attr(button, "class", button_class_value);
       }
+      if (dirty & /*colors*/
+      4 && button_data_color_key_value !== (button_data_color_key_value = rgbToHex(
+        /*color*/
+        ctx2[8][0],
+        /*color*/
+        ctx2[8][1],
+        /*color*/
+        ctx2[8][2]
+      ))) {
+        attr(button, "data-color-key", button_data_color_key_value);
+      }
       if (dirty & /*disabled*/
       2) {
         button.disabled = /*disabled*/
-        ctx[1];
+        ctx2[1];
       }
-      if (dirty & /*theme, is_equal_color, strokeColor, colors, colorKeys*/
-      5) {
+      if (dirty & /*theme, is_equal_color, strokeColor, colors*/
+      13) {
         toggle_class(button, "is-active", is_equal_color(
           /*strokeColor*/
-          ctx[2],
-          colors[
-            /*key*/
-            ctx[7]
-          ]
+          ctx2[3],
+          /*color*/
+          ctx2[8]
         ));
       }
     },
@@ -7744,20 +7777,16 @@ function create_each_block(key_1, ctx) {
 }
 function create_fragment55(ctx) {
   let div;
-  let each_blocks = [];
-  let each_1_lookup = /* @__PURE__ */ new Map();
   let div_class_value;
   let mounted;
   let dispose;
-  let each_value = colorKeys;
-  const get_key = (ctx2) => (
-    /*key*/
-    ctx2[7]
+  let each_value = (
+    /*colors*/
+    ctx[2]
   );
+  let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context(ctx, each_value, i);
-    let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+    each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
   }
   return {
     c() {
@@ -7780,16 +7809,31 @@ function create_fragment55(ctx) {
           div,
           "click",
           /*set_stroke_color*/
-          ctx[4]
+          ctx[5]
         );
         mounted = true;
       }
     },
     p(ctx2, [dirty]) {
-      if (dirty & /*theme, colorKeys, disabled, is_equal_color, strokeColor, colors*/
-      7) {
-        each_value = colorKeys;
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, destroy_block, create_each_block, null, get_each_context);
+      if (dirty & /*theme, rgbToHex, colors, disabled, is_equal_color, strokeColor*/
+      15) {
+        each_value = /*colors*/
+        ctx2[2];
+        let i;
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context(ctx2, each_value, i);
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(div, null);
+          }
+        }
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+        each_blocks.length = each_value.length;
       }
       if (dirty & /*theme*/
       1 && div_class_value !== (div_class_value = "fastboard-toolbar-colors " + /*theme*/
@@ -7802,9 +7846,7 @@ function create_fragment55(ctx) {
     d(detaching) {
       if (detaching)
         detach(div);
-      for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].d();
-      }
+      destroy_each(each_blocks, detaching);
       mounted = false;
       dispose();
     }
@@ -7816,44 +7858,56 @@ function is_equal_color(a, b) {
 function instance55($$self, $$props, $$invalidate) {
   let memberState;
   let strokeColor;
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
   let { disabled = false } = $$props;
+  let { colors: colors2 = default_colors } = $$props;
   function set_stroke_color(ev) {
     let button = ev.target;
     if (button && button.dataset.colorKey) {
-      let color = colors[button.dataset.colorKey];
+      let color = button.dataset.colorKey;
       if (color && app) {
-        app.setStrokeColor(color);
+        app.setStrokeColor(hexToRgb(color));
       }
     }
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
-      $$invalidate(5, app = $$props2.app);
+      $$invalidate(6, app = $$props2.app);
     if ("theme" in $$props2)
       $$invalidate(0, theme = $$props2.theme);
     if ("disabled" in $$props2)
       $$invalidate(1, disabled = $$props2.disabled);
+    if ("colors" in $$props2)
+      $$invalidate(2, colors2 = $$props2.colors);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & /*app*/
-    32) {
-      $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
+    64) {
+      $$subscribe_memberState($$invalidate(4, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & /*$memberState*/
-    64) {
-      $$invalidate(2, strokeColor = $memberState == null ? void 0 : $memberState.strokeColor);
+    128) {
+      $$invalidate(3, strokeColor = $memberState == null ? void 0 : $memberState.strokeColor);
     }
   };
-  return [theme, disabled, strokeColor, memberState, set_stroke_color, app, $memberState];
+  return [
+    theme,
+    disabled,
+    colors2,
+    strokeColor,
+    memberState,
+    set_stroke_color,
+    app,
+    $memberState
+  ];
 }
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance55, create_fragment55, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var StrokeColor_default = StrokeColor;
@@ -7861,70 +7915,93 @@ var StrokeColor_default = StrokeColor;
 // src/components/Toolbar/components/TextColor.svelte
 function get_each_context2(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[7] = list[i];
+  child_ctx[8] = list[i];
   return child_ctx;
 }
-function create_each_block2(key_1, ctx) {
+function create_each_block2(ctx) {
   let button;
   let span;
   let t;
   let button_class_value;
+  let button_data_color_key_value;
   return {
-    key: key_1,
-    first: null,
     c() {
       button = element("button");
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(
-        span,
-        "background-color",
-        /*key*/
-        ctx[7]
-      );
+      set_style(span, "background-color", rgbToHex(
+        /*color*/
+        ctx[8][0],
+        /*color*/
+        ctx[8][1],
+        /*color*/
+        ctx[8][2]
+      ));
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + /*theme*/
       ctx[0]);
-      attr(button, "data-color-key", /*key*/
-      ctx[7]);
+      attr(button, "data-color-key", button_data_color_key_value = rgbToHex(
+        /*color*/
+        ctx[8][0],
+        /*color*/
+        ctx[8][1],
+        /*color*/
+        ctx[8][2]
+      ));
       button.disabled = /*disabled*/
       ctx[1];
       toggle_class(button, "is-active", is_equal_color2(
         /*textColor*/
-        ctx[2],
-        colors[
-          /*key*/
-          ctx[7]
-        ]
+        ctx[3],
+        /*color*/
+        ctx[8]
       ));
-      this.first = button;
     },
     m(target, anchor) {
       insert(target, button, anchor);
       append(button, span);
       append(button, t);
     },
-    p(new_ctx, dirty) {
-      ctx = new_ctx;
+    p(ctx2, dirty) {
+      if (dirty & /*colors*/
+      4) {
+        set_style(span, "background-color", rgbToHex(
+          /*color*/
+          ctx2[8][0],
+          /*color*/
+          ctx2[8][1],
+          /*color*/
+          ctx2[8][2]
+        ));
+      }
       if (dirty & /*theme*/
       1 && button_class_value !== (button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + /*theme*/
-      ctx[0])) {
+      ctx2[0])) {
         attr(button, "class", button_class_value);
       }
+      if (dirty & /*colors*/
+      4 && button_data_color_key_value !== (button_data_color_key_value = rgbToHex(
+        /*color*/
+        ctx2[8][0],
+        /*color*/
+        ctx2[8][1],
+        /*color*/
+        ctx2[8][2]
+      ))) {
+        attr(button, "data-color-key", button_data_color_key_value);
+      }
       if (dirty & /*disabled*/
       2) {
         button.disabled = /*disabled*/
-        ctx[1];
+        ctx2[1];
       }
-      if (dirty & /*theme, is_equal_color, textColor, colors, colorKeys*/
-      5) {
+      if (dirty & /*theme, is_equal_color, textColor, colors*/
+      13) {
         toggle_class(button, "is-active", is_equal_color2(
           /*textColor*/
-          ctx[2],
-          colors[
-            /*key*/
-            ctx[7]
-          ]
+          ctx2[3],
+          /*color*/
+          ctx2[8]
         ));
       }
     },
@@ -7936,20 +8013,16 @@ function create_each_block2(key_1, ctx) {
 }
 function create_fragment56(ctx) {
   let div;
-  let each_blocks = [];
-  let each_1_lookup = /* @__PURE__ */ new Map();
   let div_class_value;
   let mounted;
   let dispose;
-  let each_value = colorKeys;
-  const get_key = (ctx2) => (
-    /*key*/
-    ctx2[7]
+  let each_value = (
+    /*colors*/
+    ctx[2]
   );
+  let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context2(ctx, each_value, i);
-    let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block2(key, child_ctx));
+    each_blocks[i] = create_each_block2(get_each_context2(ctx, each_value, i));
   }
   return {
     c() {
@@ -7972,16 +8045,31 @@ function create_fragment56(ctx) {
           div,
           "click",
           /*set_stroke_color*/
-          ctx[4]
+          ctx[5]
         );
         mounted = true;
       }
     },
     p(ctx2, [dirty]) {
-      if (dirty & /*theme, colorKeys, disabled, is_equal_color, textColor, colors*/
-      7) {
-        each_value = colorKeys;
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, destroy_block, create_each_block2, null, get_each_context2);
+      if (dirty & /*theme, rgbToHex, colors, disabled, is_equal_color, textColor*/
+      15) {
+        each_value = /*colors*/
+        ctx2[2];
+        let i;
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context2(ctx2, each_value, i);
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block2(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(div, null);
+          }
+        }
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+        each_blocks.length = each_value.length;
       }
       if (dirty & /*theme*/
       1 && div_class_value !== (div_class_value = "fastboard-toolbar-colors " + /*theme*/
@@ -7994,9 +8082,7 @@ function create_fragment56(ctx) {
     d(detaching) {
       if (detaching)
         detach(div);
-      for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].d();
-      }
+      destroy_each(each_blocks, detaching);
       mounted = false;
       dispose();
     }
@@ -8008,44 +8094,56 @@ function is_equal_color2(a, b) {
 function instance56($$self, $$props, $$invalidate) {
   let memberState;
   let textColor;
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
   let { disabled = false } = $$props;
+  let { colors: colors2 = default_colors } = $$props;
   function set_stroke_color(ev) {
     let button = ev.target;
     if (button && button.dataset.colorKey) {
-      let color = colors[button.dataset.colorKey];
+      let color = button.dataset.colorKey;
       if (color && app) {
-        app.setTextColor(color);
+        app.setTextColor(hexToRgb(color));
       }
     }
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
-      $$invalidate(5, app = $$props2.app);
+      $$invalidate(6, app = $$props2.app);
     if ("theme" in $$props2)
       $$invalidate(0, theme = $$props2.theme);
     if ("disabled" in $$props2)
       $$invalidate(1, disabled = $$props2.disabled);
+    if ("colors" in $$props2)
+      $$invalidate(2, colors2 = $$props2.colors);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & /*app*/
-    32) {
-      $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
+    64) {
+      $$subscribe_memberState($$invalidate(4, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & /*$memberState*/
-    64) {
-      $$invalidate(2, textColor = $memberState == null ? void 0 : $memberState.textColor);
+    128) {
+      $$invalidate(3, textColor = $memberState == null ? void 0 : $memberState.textColor);
     }
   };
-  return [theme, disabled, textColor, memberState, set_stroke_color, app, $memberState];
+  return [
+    theme,
+    disabled,
+    colors2,
+    textColor,
+    memberState,
+    set_stroke_color,
+    app,
+    $memberState
+  ];
 }
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance56, create_fragment56, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var TextColor_default = TextColor;
@@ -10863,39 +10961,39 @@ var Laser_default2 = Laser2;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[43] = list[i];
+  child_ctx[44] = list[i];
   const constants_0 = (
     /*netless_app*/
-    child_ctx[43]
+    child_ctx[44]
   );
-  child_ctx[44] = constants_0.icon;
-  child_ctx[45] = constants_0.label;
-  child_ctx[46] = constants_0.kind;
-  child_ctx[47] = constants_0.onClick;
+  child_ctx[45] = constants_0.icon;
+  child_ctx[46] = constants_0.label;
+  child_ctx[47] = constants_0.kind;
+  child_ctx[48] = constants_0.onClick;
   const constants_1 = (
     /*$status*/
-    child_ctx[20] && /*$status*/
-    child_ctx[20][
+    child_ctx[21] && /*$status*/
+    child_ctx[21][
       /*kind*/
-      child_ctx[46]
+      child_ctx[47]
     ]
   );
-  child_ctx[48] = constants_1;
+  child_ctx[49] = constants_1;
   const constants_2 = function func() {
     return (
       /*func*/
-      ctx[39](
+      ctx[40](
         /*onClick*/
-        child_ctx[47]
+        child_ctx[48]
       )
     );
   };
-  child_ctx[49] = constants_2;
+  child_ctx[50] = constants_2;
   return child_ctx;
 }
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[52] = list[i];
+  child_ctx[53] = list[i];
   return child_ctx;
 }
 function create_if_block_11(ctx) {
@@ -10904,7 +11002,7 @@ function create_if_block_11(ctx) {
   const button_spread_levels = [
     { class: "scroll-up" },
     /*btn_props*/
-    ctx[14]
+    ctx[15]
   ];
   let button_props = {
     $$slots: { default: [create_default_slot_24] },
@@ -10917,7 +11015,7 @@ function create_if_block_11(ctx) {
   button.$on(
     "click",
     /*scroll_up*/
-    ctx[22]
+    ctx[23]
   );
   return {
     c() {
@@ -10929,13 +11027,13 @@ function create_if_block_11(ctx) {
     },
     p(ctx2, dirty) {
       const button_changes = dirty[0] & /*btn_props*/
-      16384 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(
+      32768 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(
         /*btn_props*/
-        ctx2[14]
+        ctx2[15]
       )]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      16777216) {
+      33554432) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11000,7 +11098,7 @@ function create_if_block_10(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11008,18 +11106,18 @@ function create_if_block_10(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].laserPointer
+        ctx[19].laserPointer
       )
     }
   });
   laser.$on(
     "click",
     /*laserPointer*/
-    ctx[30]
+    ctx[31]
   );
   return {
     c() {
@@ -11032,21 +11130,21 @@ function create_if_block_10(ctx) {
     p(ctx2, dirty) {
       const laser_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         laser_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         laser_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         laser_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         laser_changes.content = /*c*/
-        ctx2[18].laserPointer;
+        ctx2[19].laserPointer;
       laser.$set(laser_changes);
     },
     i(local) {
@@ -11071,7 +11169,7 @@ function create_if_block_9(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11079,18 +11177,18 @@ function create_if_block_9(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].hand
+        ctx[19].hand
       )
     }
   });
   hand_1.$on(
     "click",
     /*hand*/
-    ctx[29]
+    ctx[30]
   );
   return {
     c() {
@@ -11103,21 +11201,21 @@ function create_if_block_9(ctx) {
     p(ctx2, dirty) {
       const hand_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         hand_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         hand_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         hand_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         hand_1_changes.content = /*c*/
-        ctx2[18].hand;
+        ctx2[19].hand;
       hand_1.$set(hand_1_changes);
     },
     i(local) {
@@ -11146,18 +11244,18 @@ function create_if_block_8(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*t*/
-        ctx[9].clear
+        ctx[10].clear
       )
     }
   });
   clear_1.$on(
     "click",
     /*clear*/
-    ctx[31]
+    ctx[32]
   );
   return {
     c() {
@@ -11174,13 +11272,13 @@ function create_if_block_8(ctx) {
         clear_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         clear_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*t*/
-      512)
+      1024)
         clear_1_changes.content = /*t*/
-        ctx2[9].clear;
+        ctx2[10].clear;
       clear_1.$set(clear_1_changes);
     },
     i(local) {
@@ -11205,7 +11303,7 @@ function create_if_block_7(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11213,18 +11311,18 @@ function create_if_block_7(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].eraser
+        ctx[19].eraser
       )
     }
   });
   eraser_1.$on(
     "click",
     /*eraser*/
-    ctx[28]
+    ctx[29]
   );
   return {
     c() {
@@ -11237,21 +11335,21 @@ function create_if_block_7(ctx) {
     p(ctx2, dirty) {
       const eraser_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         eraser_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         eraser_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         eraser_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         eraser_1_changes.content = /*c*/
-        ctx2[18].eraser;
+        ctx2[19].eraser;
       eraser_1.$set(eraser_1_changes);
     },
     i(local) {
@@ -11280,7 +11378,7 @@ function create_if_block_6(ctx) {
       ),
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11288,15 +11386,15 @@ function create_if_block_6(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*t*/
-        ctx[9].shapes
+        ctx[10].shapes
       ),
       menu: (
         /*shapes_panel*/
-        ctx[12]
+        ctx[13]
       )
     }
   });
@@ -11315,25 +11413,25 @@ function create_if_block_6(ctx) {
         shapes_changes.app = /*app*/
         ctx2[0];
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         shapes_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         shapes_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         shapes_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*t*/
-      512)
+      1024)
         shapes_changes.content = /*t*/
-        ctx2[9].shapes;
+        ctx2[10].shapes;
       if (dirty[0] & /*shapes_panel*/
-      4096)
+      8192)
         shapes_changes.menu = /*shapes_panel*/
-        ctx2[12];
+        ctx2[13];
       shapes2.$set(shapes_changes);
     },
     i(local) {
@@ -11358,7 +11456,7 @@ function create_if_block_5(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11366,22 +11464,22 @@ function create_if_block_5(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].text
+        ctx[19].text
       ),
       menu: (
         /*text_panel*/
-        ctx[11]
+        ctx[12]
       )
     }
   });
   text_1.$on(
     "click",
     /*text*/
-    ctx[27]
+    ctx[28]
   );
   return {
     c() {
@@ -11394,25 +11492,25 @@ function create_if_block_5(ctx) {
     p(ctx2, dirty) {
       const text_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         text_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         text_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         text_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         text_1_changes.content = /*c*/
-        ctx2[18].text;
+        ctx2[19].text;
       if (dirty[0] & /*text_panel*/
-      2048)
+      4096)
         text_1_changes.menu = /*text_panel*/
-        ctx2[11];
+        ctx2[12];
       text_1.$set(text_1_changes);
     },
     i(local) {
@@ -11437,7 +11535,7 @@ function create_if_block_4(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11445,22 +11543,22 @@ function create_if_block_4(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].pencil
+        ctx[19].pencil
       ),
       menu: (
         /*pencil_panel*/
-        ctx[10]
+        ctx[11]
       )
     }
   });
   pencil_1.$on(
     "click",
     /*pencil*/
-    ctx[26]
+    ctx[27]
   );
   return {
     c() {
@@ -11473,25 +11571,25 @@ function create_if_block_4(ctx) {
     p(ctx2, dirty) {
       const pencil_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         pencil_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         pencil_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         pencil_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         pencil_1_changes.content = /*c*/
-        ctx2[18].pencil;
+        ctx2[19].pencil;
       if (dirty[0] & /*pencil_panel*/
-      1024)
+      2048)
         pencil_1_changes.menu = /*pencil_panel*/
-        ctx2[10];
+        ctx2[11];
       pencil_1.$set(pencil_1_changes);
     },
     i(local) {
@@ -11516,7 +11614,7 @@ function create_if_block_3(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11524,18 +11622,18 @@ function create_if_block_3(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].selector
+        ctx[19].selector
       )
     }
   });
   selector_1.$on(
     "click",
     /*selector*/
-    ctx[25]
+    ctx[26]
   );
   return {
     c() {
@@ -11548,21 +11646,21 @@ function create_if_block_3(ctx) {
     p(ctx2, dirty) {
       const selector_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         selector_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         selector_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         selector_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         selector_1_changes.content = /*c*/
-        ctx2[18].selector;
+        ctx2[19].selector;
       selector_1.$set(selector_1_changes);
     },
     i(local) {
@@ -11587,7 +11685,7 @@ function create_if_block_2(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[16]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11595,18 +11693,18 @@ function create_if_block_2(ctx) {
       ),
       btn_props: (
         /*btn_props*/
-        ctx[14]
+        ctx[15]
       ),
       content: (
         /*c*/
-        ctx[18].clicker
+        ctx[19].clicker
       )
     }
   });
   clicker_1.$on(
     "click",
     /*clicker*/
-    ctx[24]
+    ctx[25]
   );
   return {
     c() {
@@ -11619,21 +11717,21 @@ function create_if_block_2(ctx) {
     p(ctx2, dirty) {
       const clicker_1_changes = {};
       if (dirty[0] & /*appliance*/
-      65536)
+      131072)
         clicker_1_changes.appliance = /*appliance*/
-        ctx2[16];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         clicker_1_changes.theme = /*theme*/
         ctx2[1];
       if (dirty[0] & /*btn_props*/
-      16384)
+      32768)
         clicker_1_changes.btn_props = /*btn_props*/
-        ctx2[14];
+        ctx2[15];
       if (dirty[0] & /*c*/
-      262144)
+      524288)
         clicker_1_changes.content = /*c*/
-        ctx2[18].clicker;
+        ctx2[19].clicker;
       clicker_1.$set(clicker_1_changes);
     },
     i(local) {
@@ -11671,47 +11769,47 @@ function create_each_block_1(ctx) {
   function select_block_type(ctx2, dirty) {
     if (
       /*item*/
-      ctx2[52] === "clicker"
+      ctx2[53] === "clicker"
     )
       return 0;
     if (
       /*item*/
-      ctx2[52] === "selector"
+      ctx2[53] === "selector"
     )
       return 1;
     if (
       /*item*/
-      ctx2[52] === "pencil"
+      ctx2[53] === "pencil"
     )
       return 2;
     if (
       /*item*/
-      ctx2[52] === "text"
+      ctx2[53] === "text"
     )
       return 3;
     if (
       /*item*/
-      ctx2[52] === "shapes"
+      ctx2[53] === "shapes"
     )
       return 4;
     if (
       /*item*/
-      ctx2[52] === "eraser"
+      ctx2[53] === "eraser"
     )
       return 5;
     if (
       /*item*/
-      ctx2[52] === "clear"
+      ctx2[53] === "clear"
     )
       return 6;
     if (
       /*item*/
-      ctx2[52] === "hand"
+      ctx2[53] === "hand"
     )
       return 7;
     if (
       /*item*/
-      ctx2[52] === "laserPointer"
+      ctx2[53] === "laserPointer"
     )
       return 8;
     return -1;
@@ -11787,14 +11885,14 @@ function create_if_block_12(ctx) {
   const button_spread_levels = [
     { class: "apps" },
     /*btn_props*/
-    ctx[14],
+    ctx[15],
     { content: (
       /*t*/
-      ctx[9].apps
+      ctx[10].apps
     ) },
     { menu: (
       /*apps_panel*/
-      ctx[13]
+      ctx[14]
     ) },
     {
       menu_placement: (
@@ -11821,22 +11919,22 @@ function create_if_block_12(ctx) {
     },
     p(ctx2, dirty) {
       const button_changes = dirty[0] & /*btn_props, t, apps_panel, placement*/
-      25152 ? get_spread_update(button_spread_levels, [
+      50240 ? get_spread_update(button_spread_levels, [
         button_spread_levels[0],
         dirty[0] & /*btn_props*/
-        16384 && get_spread_object(
+        32768 && get_spread_object(
           /*btn_props*/
-          ctx2[14]
+          ctx2[15]
         ),
         dirty[0] & /*t*/
-        512 && { content: (
+        1024 && { content: (
           /*t*/
-          ctx2[9].apps
+          ctx2[10].apps
         ) },
         dirty[0] & /*apps_panel*/
-        8192 && { menu: (
+        16384 && { menu: (
           /*apps_panel*/
-          ctx2[13]
+          ctx2[14]
         ) },
         dirty[0] & /*placement*/
         64 && {
@@ -11848,7 +11946,7 @@ function create_if_block_12(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      16777216) {
+      33554432) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11928,7 +12026,7 @@ function create_if_block14(ctx) {
   button.$on(
     "click",
     /*scroll_down*/
-    ctx[23]
+    ctx[24]
   );
   return {
     c() {
@@ -11950,7 +12048,7 @@ function create_if_block14(ctx) {
         ctx2[3];
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      16777216) {
+      33554432) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12019,7 +12117,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[45] + ""
+    ctx[46] + ""
   );
   let t1;
   let span_class_value;
@@ -12041,40 +12139,40 @@ function create_each_block4(ctx) {
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + /*theme*/
       ctx[1]);
       if (!src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[44]))
+      ctx[45]))
         attr(img, "src", img_src_value);
       attr(img, "alt", img_alt_value = /*kind*/
-      ctx[46]);
+      ctx[47]);
       attr(img, "title", img_title_value = /*label*/
-      ctx[45]);
+      ctx[46]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + /*theme*/
       ctx[1]);
       attr(button, "class", button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[46] + " " + /*theme*/
+      ctx[47] + " " + /*theme*/
       ctx[1]);
       attr(button, "title", button_title_value = /*label*/
-      ctx[45] + /*state*/
-      (ctx[48] && /*state*/
-      ctx[48].reason ? ": " + /*state*/
-      ctx[48].reason : ""));
+      ctx[46] + /*state*/
+      (ctx[49] && /*state*/
+      ctx[49].reason ? ": " + /*state*/
+      ctx[49].reason : ""));
       attr(button, "data-app-kind", button_data_app_kind_value = /*netless_app*/
-      ctx[43].kind);
+      ctx[44].kind);
       button.disabled = button_disabled_value = /*state*/
-      ctx[48] && /*state*/
-      ctx[48].status !== "idle";
+      ctx[49] && /*state*/
+      ctx[49].status !== "idle";
       toggle_class(
         button,
         "is-loading",
         /*state*/
-        ctx[48] && /*state*/
-        ctx[48].status === "loading"
+        ctx[49] && /*state*/
+        ctx[49].status === "loading"
       );
       toggle_class(
         button,
         "is-failed",
         /*state*/
-        ctx[48] && /*state*/
-        ctx[48].status === "failed"
+        ctx[49] && /*state*/
+        ctx[49].status === "failed"
       );
     },
     m(target, anchor) {
@@ -12088,9 +12186,9 @@ function create_each_block4(ctx) {
         dispose = listen(button, "click", function() {
           if (is_function(
             /*on_click*/
-            ctx[49]
+            ctx[50]
           ))
-            ctx[49].apply(this, arguments);
+            ctx[50].apply(this, arguments);
         });
         mounted = true;
       }
@@ -12103,23 +12201,23 @@ function create_each_block4(ctx) {
         attr(img, "class", img_class_value);
       }
       if (dirty[0] & /*$apps*/
-      524288 && !src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[44])) {
+      1048576 && !src_url_equal(img.src, img_src_value = /*icon*/
+      ctx[45])) {
         attr(img, "src", img_src_value);
       }
       if (dirty[0] & /*$apps*/
-      524288 && img_alt_value !== (img_alt_value = /*kind*/
-      ctx[46])) {
+      1048576 && img_alt_value !== (img_alt_value = /*kind*/
+      ctx[47])) {
         attr(img, "alt", img_alt_value);
       }
       if (dirty[0] & /*$apps*/
-      524288 && img_title_value !== (img_title_value = /*label*/
-      ctx[45])) {
+      1048576 && img_title_value !== (img_title_value = /*label*/
+      ctx[46])) {
         attr(img, "title", img_title_value);
       }
       if (dirty[0] & /*$apps*/
-      524288 && t1_value !== (t1_value = /*label*/
-      ctx[45] + ""))
+      1048576 && t1_value !== (t1_value = /*label*/
+      ctx[46] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & /*theme*/
       2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + /*theme*/
@@ -12127,48 +12225,48 @@ function create_each_block4(ctx) {
         attr(span, "class", span_class_value);
       }
       if (dirty[0] & /*$apps, theme*/
-      524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[46] + " " + /*theme*/
+      1048578 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
+      ctx[47] + " " + /*theme*/
       ctx[1])) {
         attr(button, "class", button_class_value);
       }
       if (dirty[0] & /*$apps, $status*/
-      1572864 && button_title_value !== (button_title_value = /*label*/
-      ctx[45] + /*state*/
-      (ctx[48] && /*state*/
-      ctx[48].reason ? ": " + /*state*/
-      ctx[48].reason : ""))) {
+      3145728 && button_title_value !== (button_title_value = /*label*/
+      ctx[46] + /*state*/
+      (ctx[49] && /*state*/
+      ctx[49].reason ? ": " + /*state*/
+      ctx[49].reason : ""))) {
         attr(button, "title", button_title_value);
       }
       if (dirty[0] & /*$apps*/
-      524288 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
-      ctx[43].kind)) {
+      1048576 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
+      ctx[44].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
       if (dirty[0] & /*$status, $apps*/
-      1572864 && button_disabled_value !== (button_disabled_value = /*state*/
-      ctx[48] && /*state*/
-      ctx[48].status !== "idle")) {
+      3145728 && button_disabled_value !== (button_disabled_value = /*state*/
+      ctx[49] && /*state*/
+      ctx[49].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
-      1572866) {
+      3145730) {
         toggle_class(
           button,
           "is-loading",
           /*state*/
-          ctx[48] && /*state*/
-          ctx[48].status === "loading"
+          ctx[49] && /*state*/
+          ctx[49].status === "loading"
         );
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
-      1572866) {
+      3145730) {
         toggle_class(
           button,
           "is-failed",
           /*state*/
-          ctx[48] && /*state*/
-          ctx[48].status === "failed"
+          ctx[49] && /*state*/
+          ctx[49].status === "failed"
         );
       }
     },
@@ -12263,6 +12361,10 @@ function create_fragment67(ctx) {
       disabled: (
         /*disabled*/
         ctx[3]
+      ),
+      colors: (
+        /*colors*/
+        ctx[9]
       )
     }
   });
@@ -12279,6 +12381,10 @@ function create_fragment67(ctx) {
       disabled: (
         /*disabled*/
         ctx[3]
+      ),
+      colors: (
+        /*colors*/
+        ctx[9]
       )
     }
   });
@@ -12331,12 +12437,16 @@ function create_fragment67(ctx) {
       disabled: (
         /*disabled*/
         ctx[3]
+      ),
+      colors: (
+        /*colors*/
+        ctx[9]
       )
     }
   });
   let each_value = (
     /*$apps*/
-    ctx[19]
+    ctx[20]
   );
   let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
@@ -12402,7 +12512,7 @@ function create_fragment67(ctx) {
         div7,
         "--n",
         /*$apps*/
-        ctx[19].length
+        ctx[20].length
       );
       attr(div8, "class", name5 + "-panel-wrapper");
       set_style(div8, "display", "none");
@@ -12431,11 +12541,11 @@ function create_fragment67(ctx) {
       append(div2, div1);
       append(div2, t5);
       mount_component(strokecolor0, div2, null);
-      ctx[36](div2);
+      ctx[37](div2);
       append(div8, t6);
       append(div8, div3);
       mount_component(textcolor, div3, null);
-      ctx[37](div3);
+      ctx[38](div3);
       append(div8, t7);
       append(div8, div6);
       mount_component(selectshapes, div6, null);
@@ -12447,7 +12557,7 @@ function create_fragment67(ctx) {
       append(div6, div5);
       append(div6, t11);
       mount_component(strokecolor1, div6, null);
-      ctx[38](div6);
+      ctx[39](div6);
       append(div8, t12);
       append(div8, div7);
       for (let i = 0; i < each_blocks.length; i += 1) {
@@ -12455,7 +12565,7 @@ function create_fragment67(ctx) {
           each_blocks[i].m(div7, null);
         }
       }
-      ctx[40](div7);
+      ctx[41](div7);
       current = true;
       if (!mounted) {
         dispose = [
@@ -12469,7 +12579,7 @@ function create_fragment67(ctx) {
             null,
             div0,
             /*top*/
-            ctx[21]
+            ctx[22]
           ))
         ];
         mounted = true;
@@ -12499,9 +12609,9 @@ function create_fragment67(ctx) {
         });
         check_outros();
       }
-      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser, hand, laserPointer*/
-      2131058307 | dirty[1] & /*clear*/
-      1) {
+      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser, hand*/
+      2114632835 | dirty[1] & /*clear, laserPointer*/
+      3) {
         each_value_1 = /*items*/
         ctx2[7];
         let i;
@@ -12610,6 +12720,10 @@ function create_fragment67(ctx) {
       8)
         strokecolor0_changes.disabled = /*disabled*/
         ctx2[3];
+      if (dirty[0] & /*colors*/
+      512)
+        strokecolor0_changes.colors = /*colors*/
+        ctx2[9];
       strokecolor0.$set(strokecolor0_changes);
       const textcolor_changes = {};
       if (dirty[0] & /*app*/
@@ -12624,6 +12738,10 @@ function create_fragment67(ctx) {
       8)
         textcolor_changes.disabled = /*disabled*/
         ctx2[3];
+      if (dirty[0] & /*colors*/
+      512)
+        textcolor_changes.colors = /*colors*/
+        ctx2[9];
       textcolor.$set(textcolor_changes);
       const selectshapes_changes = {};
       if (dirty[0] & /*app*/
@@ -12670,11 +12788,15 @@ function create_fragment67(ctx) {
       8)
         strokecolor1_changes.disabled = /*disabled*/
         ctx2[3];
+      if (dirty[0] & /*colors*/
+      512)
+        strokecolor1_changes.colors = /*colors*/
+        ctx2[9];
       strokecolor1.$set(strokecolor1_changes);
       if (dirty[0] & /*$apps, theme, $status, app*/
-      1572867) {
+      3145731) {
         each_value = /*$apps*/
-        ctx2[19];
+        ctx2[20];
         let i;
         for (i = 0; i < each_value.length; i += 1) {
           const child_ctx = get_each_context4(ctx2, each_value, i);
@@ -12692,12 +12814,12 @@ function create_fragment67(ctx) {
         each_blocks.length = each_value.length;
       }
       if (!current || dirty[0] & /*$apps*/
-      524288) {
+      1048576) {
         set_style(
           div7,
           "--n",
           /*$apps*/
-          ctx2[19].length
+          ctx2[20].length
         );
       }
     },
@@ -12754,15 +12876,15 @@ function create_fragment67(ctx) {
         detach(div8);
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[36](null);
-      destroy_component(textcolor);
       ctx[37](null);
+      destroy_component(textcolor);
+      ctx[38](null);
       destroy_component(selectshapes);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[38](null);
+      ctx[39](null);
       destroy_each(each_blocks, detaching);
-      ctx[40](null);
+      ctx[41](null);
       mounted = false;
       run_all(dispose);
     }
@@ -12778,11 +12900,11 @@ function instance67($$self, $$props, $$invalidate) {
   let status;
   let max_scroll;
   let $top;
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(34, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(35, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(35, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(36, $memberState = $$value)), memberState);
   let $apps;
-  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(20, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(19, $apps = $$value));
+  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(21, $status = $$value)), status);
+  component_subscribe($$self, apps, ($$value) => $$invalidate(20, $apps = $$value));
   $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
@@ -12797,13 +12919,14 @@ function instance67($$self, $$props, $$invalidate) {
   let { placement = "left" } = $$props;
   let { items = default_items } = $$props;
   let { hide_apps = false } = $$props;
+  let { colors: colors2 = default_colors } = $$props;
   let pencil_panel;
   let text_panel;
   let shapes_panel;
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(42, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(43, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -12837,19 +12960,19 @@ function instance67($$self, $$props, $$invalidate) {
   function div2_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       pencil_panel = $$value;
-      $$invalidate(10, pencil_panel);
+      $$invalidate(11, pencil_panel);
     });
   }
   function div3_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       text_panel = $$value;
-      $$invalidate(11, text_panel);
+      $$invalidate(12, text_panel);
     });
   }
   function div6_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       shapes_panel = $$value;
-      $$invalidate(12, shapes_panel);
+      $$invalidate(13, shapes_panel);
     });
   }
   const func = (onClick) => {
@@ -12859,7 +12982,7 @@ function instance67($$self, $$props, $$invalidate) {
   function div7_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
-      $$invalidate(13, apps_panel);
+      $$invalidate(14, apps_panel);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -12874,7 +12997,7 @@ function instance67($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(32, computed_height = $$props2.computed_height);
+      $$invalidate(33, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("placement" in $$props2)
@@ -12883,11 +13006,13 @@ function instance67($$self, $$props, $$invalidate) {
       $$invalidate(7, items = $$props2.items);
     if ("hide_apps" in $$props2)
       $$invalidate(8, hide_apps = $$props2.hide_apps);
+    if ("colors" in $$props2)
+      $$invalidate(9, colors2 = $$props2.colors);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & /*theme, disabled, placement*/
     74) {
-      $$invalidate(14, btn_props = {
+      $$invalidate(15, btn_props = {
           name: name5,
           theme,
           disabled,
@@ -12897,16 +13022,16 @@ function instance67($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*language*/
     4) {
-      $$invalidate(9, t = i18n4[language]);
+      $$invalidate(10, t = i18n4[language]);
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(33, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(34, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & /*t*/
-    512 | $$self.$$.dirty[1] & /*hotkeys*/
-    4) {
-      $$invalidate(18, c = {
+    1024 | $$self.$$.dirty[1] & /*hotkeys*/
+    8) {
+      $$invalidate(19, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
           pencil: tooltip(t.pencil, hotkeys == null ? void 0 : hotkeys.changeToPencil),
@@ -12918,19 +13043,19 @@ function instance67($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$subscribe_memberState($$invalidate(17, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(18, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & /*$memberState*/
-    16) {
-      $$invalidate(16, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+    32) {
+      $$invalidate(17, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$subscribe_status($$invalidate(15, status = app == null ? void 0 : app.appsStatus));
+      $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
     }
     if ($$self.$$.dirty[0] & /*scrollable*/
     32 | $$self.$$.dirty[1] & /*$scroll_height, computed_height*/
-    10) {
+    20) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
   };
@@ -12944,6 +13069,7 @@ function instance67($$self, $$props, $$invalidate) {
     placement,
     items,
     hide_apps,
+    colors2,
     t,
     pencil_panel,
     text_panel,
@@ -12993,11 +13119,12 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 32,
+        computed_height: 33,
         scrollable: 5,
         placement: 6,
         items: 7,
-        hide_apps: 8
+        hide_apps: 8,
+        colors: 9
       },
       null,
       [-1, -1]
@@ -13096,30 +13223,34 @@ function create_fragment68(ctx) {
       ),
       disabled: (
         /*disabled*/
-        ctx[9]
+        ctx[10]
       ),
       scroll_height: (
         /*scroll_height*/
-        ctx[13]
+        ctx[14]
       ),
       computed_height: (
         /*computed_height*/
-        ctx[8]
+        ctx[9]
       ),
       scrollable: (
         /*scrollable*/
-        ctx[7]
+        ctx[8]
       ),
       placement: (
         /*placement*/
-        ctx[6]
+        ctx[7]
       ),
       items: (
         /*items*/
-        ctx[5]
+        ctx[6]
       ),
       hide_apps: (
         /*hide_apps*/
+        ctx[5]
+      ),
+      colors: (
+        /*colors*/
         ctx[4]
       )
     }
@@ -13153,9 +13284,9 @@ function create_fragment68(ctx) {
         div0,
         "height",
         /*scrollable*/
-        ctx[7] ? (
+        ctx[8] ? (
           /*computed_height*/
-          ctx[8] + "px"
+          ctx[9] + "px"
         ) : "auto"
       );
       attr(input, "type", "checkbox");
@@ -13201,13 +13332,13 @@ function create_fragment68(ctx) {
             input,
             "change",
             /*input_change_handler*/
-            ctx[19]
+            ctx[20]
           ),
           action_destroyer(height.call(
             null,
             div1,
             /*container_height*/
-            ctx[12]
+            ctx[13]
           ))
         ];
         mounted = true;
@@ -13228,28 +13359,32 @@ function create_fragment68(ctx) {
         contents_changes.language = /*language*/
         ctx2[2];
       if (dirty & /*disabled*/
-      512)
+      1024)
         contents_changes.disabled = /*disabled*/
-        ctx2[9];
+        ctx2[10];
       if (dirty & /*computed_height*/
-      256)
+      512)
         contents_changes.computed_height = /*computed_height*/
-        ctx2[8];
+        ctx2[9];
       if (dirty & /*scrollable*/
-      128)
+      256)
         contents_changes.scrollable = /*scrollable*/
-        ctx2[7];
+        ctx2[8];
       if (dirty & /*placement*/
-      64)
+      128)
         contents_changes.placement = /*placement*/
-        ctx2[6];
+        ctx2[7];
       if (dirty & /*items*/
-      32)
+      64)
         contents_changes.items = /*items*/
-        ctx2[5];
+        ctx2[6];
       if (dirty & /*hide_apps*/
-      16)
+      32)
         contents_changes.hide_apps = /*hide_apps*/
+        ctx2[5];
+      if (dirty & /*colors*/
+      16)
+        contents_changes.colors = /*colors*/
         ctx2[4];
       contents.$set(contents_changes);
       if (!current || dirty & /*theme*/
@@ -13258,14 +13393,14 @@ function create_fragment68(ctx) {
         attr(div0, "class", div0_class_value);
       }
       if (dirty & /*scrollable, computed_height*/
-      384) {
+      768) {
         set_style(
           div0,
           "height",
           /*scrollable*/
-          ctx2[7] ? (
+          ctx2[8] ? (
             /*computed_height*/
-            ctx2[8] + "px"
+            ctx2[9] + "px"
           ) : "auto"
         );
       }
@@ -13334,10 +13469,11 @@ function instance68($$self, $$props, $$invalidate) {
   let placement;
   let items;
   let hide_apps;
+  let colors2;
   let $container_height;
   let $scroll_height;
-  let $phase, $$unsubscribe_phase = noop, $$subscribe_phase = () => ($$unsubscribe_phase(), $$unsubscribe_phase = subscribe(phase, ($$value) => $$invalidate(17, $phase = $$value)), phase);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(18, $writable = $$value)), writable2);
+  let $phase, $$unsubscribe_phase = noop, $$subscribe_phase = () => ($$unsubscribe_phase(), $$unsubscribe_phase = subscribe(phase, ($$value) => $$invalidate(18, $phase = $$value)), phase);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(19, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_phase());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
   let { app = null } = $$props;
@@ -13347,9 +13483,9 @@ function instance68($$self, $$props, $$invalidate) {
   const extra_height = (32 + 4 + 4) * 2;
   let collapsed = config.collapsed;
   let container_height = writable(0);
-  component_subscribe($$self, container_height, (value) => $$invalidate(15, $container_height = value));
+  component_subscribe($$self, container_height, (value) => $$invalidate(16, $container_height = value));
   let scroll_height = writable(0);
-  component_subscribe($$self, scroll_height, (value) => $$invalidate(16, $scroll_height = value));
+  component_subscribe($$self, scroll_height, (value) => $$invalidate(17, $scroll_height = value));
   function input_change_handler() {
     collapsed = this.checked;
     $$invalidate(3, collapsed);
@@ -13362,41 +13498,45 @@ function instance68($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("config" in $$props2)
-      $$invalidate(14, config = $$props2.config);
+      $$invalidate(15, config = $$props2.config);
   };
   $$self.$$.update = () => {
     var _a;
     if ($$self.$$.dirty & /*app*/
     1) {
-      $$subscribe_writable($$invalidate(11, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(12, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & /*app*/
     1) {
-      $$subscribe_phase($$invalidate(10, phase = app == null ? void 0 : app.phase));
+      $$subscribe_phase($$invalidate(11, phase = app == null ? void 0 : app.phase));
     }
     if ($$self.$$.dirty & /*$writable, $phase*/
-    393216) {
-      $$invalidate(9, disabled = !($writable && $phase === "connected"));
+    786432) {
+      $$invalidate(10, disabled = !($writable && $phase === "connected"));
     }
     if ($$self.$$.dirty & /*$container_height, $scroll_height*/
-    98304) {
-      $$invalidate(8, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
+    196608) {
+      $$invalidate(9, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
     }
     if ($$self.$$.dirty & /*$scroll_height, $container_height*/
-    98304) {
-      $$invalidate(7, scrollable = $scroll_height + extra_height > $container_height);
+    196608) {
+      $$invalidate(8, scrollable = $scroll_height + extra_height > $container_height);
     }
     if ($$self.$$.dirty & /*config*/
-    16384) {
-      $$invalidate(6, placement = config.placement || "left");
+    32768) {
+      $$invalidate(7, placement = config.placement || "left");
     }
     if ($$self.$$.dirty & /*config*/
-    16384) {
-      $$invalidate(5, items = config.items || default_items);
+    32768) {
+      $$invalidate(6, items = config.items || default_items);
     }
     if ($$self.$$.dirty & /*config*/
-    16384) {
-      $$invalidate(4, hide_apps = ((_a = config.apps) == null ? void 0 : _a.enable) === false);
+    32768) {
+      $$invalidate(5, hide_apps = ((_a = config.apps) == null ? void 0 : _a.enable) === false);
+    }
+    if ($$self.$$.dirty & /*config*/
+    32768) {
+      $$invalidate(4, colors2 = (config == null ? void 0 : config.colors) && config.colors.length && config.colors || default_colors);
     }
   };
   return [
@@ -13404,6 +13544,7 @@ function instance68($$self, $$props, $$invalidate) {
     theme,
     language,
     collapsed,
+    colors2,
     hide_apps,
     items,
     placement,
@@ -13429,7 +13570,7 @@ var Toolbar = class extends SvelteComponent {
       app: 0,
       theme: 1,
       language: 2,
-      config: 14
+      config: 15
     });
   }
 };
@@ -15440,16 +15581,45 @@ var Fastboard_default = Fastboard;
 // src/helpers/index.ts
 function createUI(app, div) {
   let fastboard;
+  let colors2;
+  if ((app == null ? void 0 : app.manager) && app.manager.room) {
+    const floatBarOptions = app.manager.room.floatBarOptions;
+    if (floatBarOptions.colors) {
+      colors2 = floatBarOptions.colors;
+    }
+  }
   const ui = {
     mount(div2, props) {
+      var _a;
       if (fastboard) {
         fastboard.$destroy();
       }
+      if ((_a = props == null ? void 0 : props.config) == null ? void 0 : _a.toolbar) {
+        const _colors = props.config.toolbar.colors;
+        if (!_colors && colors2) {
+          props.config = __spreadProps(__spreadValues({}, props.config), {
+            toolbar: __spreadProps(__spreadValues({}, props.config.toolbar), {
+              colors: colors2
+            })
+          });
+        }
+      }
       fastboard = new Fastboard_default({ target: div2, props: __spreadValues({ app }, props) });
       return ui;
     },
     update(props) {
+      var _a;
       if (fastboard && props) {
+        if ((_a = props == null ? void 0 : props.config) == null ? void 0 : _a.toolbar) {
+          const _colors = props.config.toolbar.colors;
+          if (!_colors && colors2) {
+            props.config = __spreadProps(__spreadValues({}, props.config), {
+              toolbar: __spreadProps(__spreadValues({}, props.config.toolbar), {
+                colors: colors2
+              })
+            });
+          }
+        }
         fastboard.$set(props);
       }
     },