@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/helpers/pluginProvider.js

@@ -1,33 +1,64 @@
+import { ref } from "#imports";
 export default function() {
-  let addActions = [];
-  function addAddAction(fn) {
-    addActions.push(fn);
+  const addActionPlugins = ref([]);
+  const itemDropdownActionPlugins = ref([]);
+  const menuButtonPlugins = ref([]);
+  function add(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value.push(fn);
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value.push(fn);
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value.push(fn);
+    }
   }
-  function removeAddAction(fn) {
-    addActions = addActions.filter((v) => v !== fn);
+  function remove(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value = addActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value = itemDropdownActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value = menuButtonPlugins.value.filter(
+        (v) => v !== fn
+      );
+    }
   }
-  function getAddActions() {
-    const actions = [];
-    for (let i = 0; i < addActions.length; i++) {
-      const callback = addActions[i];
+  function get(type) {
+    let storage;
+    if (type === "addAction") {
+      storage = addActionPlugins.value;
+    } else if (type === "itemDropdownAction") {
+      storage = itemDropdownActionPlugins.value;
+    } else if (type === "menuButton") {
+      storage = menuButtonPlugins.value;
+    } else {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < storage.length; i++) {
+      const callback = storage[i];
       if (!callback) {
         continue;
       }
-      const result = callback();
-      if (!result) {
+      const callbackResult = callback();
+      if (!callbackResult) {
         continue;
       }
-      if (Array.isArray(result)) {
-        actions.push(...result);
+      if (Array.isArray(callbackResult)) {
+        result.push(...callbackResult);
       } else {
-        actions.push(result);
+        result.push(callbackResult);
       }
     }
-    return actions;
+    return result;
   }
   return {
-    addAddAction,
-    removeAddAction,
-    getAddActions
+    add,
+    remove,
+    get
   };
 }

package/dist/runtime/helpers/providers/blocks.js

@@ -1,5 +1,6 @@
 import { itemEntityType } from "#blokkli-build/config";
 import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+import { BUNDLE_BLOKKLI_FRAGMENT } from "#blokkli/constants";
 export default function(state, dom, context) {
   const renderedFieldListItemCache = /* @__PURE__ */ new Map();
   function getParentBlockBundle(field) {
@@ -26,6 +27,14 @@ export default function(state, dom, context) {
     }
     return null;
   }
+  function getFragmentData(item) {
+    if (item.bundle === BUNDLE_BLOKKLI_FRAGMENT && item.props.name) {
+      return {
+        name: item.props.name
+      };
+    }
+    return null;
+  }
   function getBlock(uuid) {
     const cached = renderedFieldListItemCache.get(uuid);
     if (cached) {
@@ -54,6 +63,7 @@ export default function(state, dom, context) {
       isNested: fieldList.entityType === itemEntityType,
       fieldListType: field?.fieldListType ?? "default",
       library: getLibraryData(item),
+      fragment: getFragmentData(item),
       parentBlockBundle,
       host: {
         type: fieldList.entityType,

package/dist/runtime/helpers/providers/directive.d.ts

@@ -6,19 +6,22 @@ type EditableFieldData = EntityContext & {
     key: string;
     fieldName: string;
     directiveType: BlokkliDirectiveType;
+    isComponent: boolean;
+    getValue?: () => string;
 };
 type DroppableFieldElementData = EditableFieldData & {
     element: HTMLElement;
 };
 export type DirectiveProvider = {
     init: () => void;
-    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType, isComponent: boolean, getValue?: () => string) => void;
     unregisterDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
     getVisible: (directiveType: BlokkliDirectiveType) => Rectangle[];
     getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
     getEditablesForBlock: (uuid: string) => EditableFieldData[];
     getDroppableElements: () => DroppableFieldElementData[];
     findEditableElement: (fieldName: string, host: EntityContext) => HTMLElement | undefined;
+    findEditable: (fieldName: string, host: EntityContext) => EditableFieldData | undefined;
     isReady: ComputedRef<boolean>;
 };
 export default function (debug: DebugProvider, ui: UiProvider): DirectiveProvider;

package/dist/runtime/helpers/providers/directive.js

@@ -71,13 +71,15 @@ export default function(debug, ui) {
       rootMargin: "400px 0px 400px 0px"
     }
   );
-  function registerDirectiveElement(el, fieldName, entity, directiveType) {
+  function registerDirectiveElement(el, fieldName, entity, directiveType, isComponent, getValue) {
     const key = getEditableKey(fieldName, entity, directiveType);
     const data = {
       ...entity,
       fieldName,
       directiveType,
-      key
+      key,
+      isComponent,
+      getValue
     };
     elementMap.set(el, data);
     fieldData.set(key, data);
@@ -186,6 +188,10 @@ export default function(debug, ui) {
     const key = getEditableKey(fieldName, host, "editable");
     return elements.get(key);
   }
+  function findEditable(fieldName, host) {
+    const key = getEditableKey(fieldName, host, "editable");
+    return fieldData.get(key);
+  }
   onBlokkliEvent("state:reloaded", handleRefresh);
   onBlokkliEvent("ui:resized", handleRefresh);
   onBlokkliEvent("option:finish-change", handleRefresh);
@@ -200,6 +206,7 @@ export default function(debug, ui) {
     init,
     getVisible,
     getEditableAtPoint,
+    findEditable,
     getEditablesForBlock,
     findEditableElement,
     getDroppableElements,

package/dist/runtime/helpers/providers/fields.d.ts

@@ -3,6 +3,14 @@ import type { DomProvider } from '../domProvider.js';
 import type { StateProvider } from '../stateProvider.js';
 import type { BlockDefinitionProvider } from '../typesProvider.js';
 export type FieldsProvider = {
-    find: (uuid: string, fieldName: string) => BlokkliFieldElement | undefined;
+    find: (
+    /**
+     * The host entity UUID.
+     */
+    uuid: string, 
+    /**
+     * The name of the field.
+     */
+    fieldName: string) => BlokkliFieldElement | undefined;
 };
 export default function (state: StateProvider, dom: DomProvider, types: BlockDefinitionProvider): FieldsProvider;

package/dist/runtime/helpers/stateProvider.js

@@ -99,6 +99,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     publishOptions.value.revisionLogMessage = newPublishOptions.revisionLogMessage;
   }
   function setContext(context2, override) {
+    eventBus.emit("state:reload:before");
     if (!override) {
       _mappedState = context2 ?? null;
     }

package/dist/runtime/helpers/uiProvider.d.ts

@@ -1,8 +1,8 @@
-import { type Ref, type ComputedRef } from 'vue';
+import { type Ref, type ComputedRef } from '#imports';
+import type { ShallowRef } from 'vue';
 import type { StorageProvider } from './storageProvider.js';
-import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
+import type { Coord, GlobalUiDialog, Rectangle, SidebarRegion, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
-import type { StateProvider } from './stateProvider.js';
 import type { AdapterContext } from '#blokkli/adapter';
 import type { ThemeColorName } from '#blokkli/types/theme';
 import type { ElementProvider } from './providers/element.js';
@@ -10,17 +10,15 @@ export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
     providerElement: HTMLElement;
-    menu: {
-        isOpen: Readonly<Ref<boolean>>;
-        close: () => void;
-        open: () => void;
-    };
     isMobile: ComputedRef<boolean>;
     isDesktop: ComputedRef<boolean>;
     isAnimating: Ref<boolean>;
     isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
-    hasDialogOpen: Ref<boolean>;
+    hasDialogOpen: ComputedRef<boolean>;
+    currentDialog: Readonly<Ref<GlobalUiDialog | null>>;
+    openDialog: (dialog: GlobalUiDialog) => void;
+    closeDialog: (id?: string) => void;
     hasTooltipOpen: ComputedRef<boolean>;
     openTooltip: Ref<string>;
     selectionColor: ComputedRef<ThemeColorName | null>;
@@ -32,10 +30,8 @@ export type UiProvider = {
     transformLabel: ComputedRef<string>;
     useAnimations: ComputedRef<boolean>;
     lowPerformanceMode: ComputedRef<boolean>;
-    toolbarHeight: ComputedRef<number>;
     visibleViewport: ComputedRef<Rectangle>;
     visibleViewportPadded: ComputedRef<Rectangle>;
-    addListOrientation: ComputedRef<AddListOrientation>;
     setViewportBlockingRectangle: (key: string, rect?: Rectangle) => void;
     viewportBlockingRects: ComputedRef<Rectangle[]>;
     appViewport: ComputedRef<Viewport>;
@@ -52,5 +48,10 @@ export type UiProvider = {
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
     setBannerHeight: (id: string, height: number) => void;
     removeBanner: (id: string) => void;
+    setActiveSidebar: (region: SidebarRegion, id: string) => void;
+    removeActiveSidebar: (region: SidebarRegion, id: string) => void;
+    hasSidebarLeft: ComputedRef<boolean>;
+    hasSidebarRight: ComputedRef<boolean>;
+    mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>;
 };
-export default function (providerElement: HTMLElement, storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>, element: ElementProvider): UiProvider;
+export default function (providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -2,11 +2,14 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed
-} from "vue";
+  computed,
+  watch,
+  readonly
+} from "#imports";
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
 import { addElementClasses } from "./addElementClasses.js";
+import { defineElementStyle } from "./defineElementStyle.js";
 import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
 const localeMap = {
@@ -15,7 +18,7 @@ const localeMap = {
   it: "it-CH",
   en: "en-GB"
 };
-export default function(providerElement, storage, state, context, element) {
+export default function(providerElement, storage, context, element, mainLayoutElement, visibleViewportElement) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   const interfaceLanguage = computed(() => {
@@ -25,9 +28,14 @@ export default function(providerElement, storage, state, context, element) {
     const lang = interfaceLanguage.value;
     return localeMap[lang] || lang;
   });
+  const viewportWidth = ref(window.innerWidth);
+  const viewportHeight = ref(window.innerHeight);
+  const visibleViewportWidth = ref(0);
+  const visibleViewportHeight = ref(0);
+  const visibleViewportX = ref(0);
+  const visibleViewportY = ref(0);
   const isProxyMode = ref(false);
-  const menuIsOpen = ref(false);
-  const hasDialogOpen = ref(false);
+  const currentDialog = ref(null);
   const openTooltip = ref("");
   const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
@@ -35,6 +43,15 @@ export default function(providerElement, storage, state, context, element) {
   const transformLabel = ref("");
   const openContextMenu = ref("");
   const banners = ref({});
+  function openDialog(dialog) {
+    currentDialog.value = dialog;
+  }
+  function closeDialog(id) {
+    if (!id || currentDialog.value?.id === id) {
+      currentDialog.value = null;
+    }
+  }
+  const hasDialogOpen = computed(() => currentDialog.value !== null);
   function setBannerHeight(id, height) {
     banners.value[id] = height;
   }
@@ -62,17 +79,42 @@ export default function(providerElement, storage, state, context, element) {
     y: 0
   });
   const artboardScale = ref(1);
-  const resizeObserver = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (!entry) {
+  const resizeElementMap = /* @__PURE__ */ new WeakMap();
+  let visibleViewportResizeTimeout = null;
+  function updateVisibleViewport() {
+    if (!visibleViewportElement.value) {
       return;
     }
-    const size = entry.contentBoxSize[0];
-    if (!size) {
-      return;
+    const rect = visibleViewportElement.value.getBoundingClientRect();
+    visibleViewportWidth.value = rect.width;
+    visibleViewportHeight.value = rect.height;
+    visibleViewportX.value = rect.x;
+    visibleViewportY.value = rect.y;
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const size = entry.contentBoxSize[0];
+      if (!size) {
+        return;
+      }
+      const key = resizeElementMap.get(entry.target);
+      if (!key) {
+        return;
+      }
+      if (key === "artboard") {
+        artboardSize.value.width = size.inlineSize;
+        artboardSize.value.height = size.blockSize;
+      } else if (key === "visible-viewport") {
+        visibleViewportWidth.value = size.inlineSize;
+        visibleViewportHeight.value = size.blockSize;
+        if (visibleViewportResizeTimeout) {
+          window.clearTimeout(visibleViewportResizeTimeout);
+        }
+        visibleViewportResizeTimeout = window.setTimeout(() => {
+          updateVisibleViewport();
+        }, 50);
+      }
     }
-    artboardSize.value.width = size.inlineSize;
-    artboardSize.value.height = size.blockSize;
   });
   const setViewportBlockingRectangle = (key, rect) => {
     if (!rect) {
@@ -117,8 +159,6 @@ export default function(providerElement, storage, state, context, element) {
     }
     return "desktop";
   });
-  const viewportWidth = ref(window.innerWidth);
-  const viewportHeight = ref(window.innerHeight);
   const isMobile = computed(() => appViewport.value === "mobile");
   const isDesktop = computed(() => appViewport.value === "desktop");
   let resizeTimeout = null;
@@ -130,63 +170,42 @@ export default function(providerElement, storage, state, context, element) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const toolbarHeight = computed(() => {
-    if (isMobile.value) {
-      return 80;
-    }
-    return 50;
-  });
-  const activeSidebarLeft = storage.use("sidebar:active:left", "");
-  const activeSidebarRight = storage.use("sidebar:active:right", "");
-  const settingsStorage = storage.use("feature:add-list:settings", {
-    orientation: "vertical"
-  });
-  const addListOrientation = computed(
-    () => isMobile.value ? "horizontal" : settingsStorage.value.orientation
-  );
-  const visibleViewportX = computed(() => {
-    let x = 0;
-    if (!isMobile.value) {
-      if (addListOrientation.value === "vertical" && state.editMode.value === "editing") {
-        x += 70;
+  const activeSidebarsLeft = ref([]);
+  const activeSidebarsRight = ref([]);
+  function setActiveSidebar(region, id) {
+    if (region === "left") {
+      if (activeSidebarsLeft.value.includes(id)) {
+        return;
       }
-      if (activeSidebarLeft.value) {
-        x += 400;
+      activeSidebarsLeft.value.push(id);
+    } else {
+      if (activeSidebarsRight.value.includes(id)) {
+        return;
       }
+      activeSidebarsRight.value.push(id);
     }
-    return x;
-  });
-  const visibleViewportY = computed(() => {
-    return toolbarHeight.value;
-  });
-  const visibleViewportWidth = computed(() => {
-    if (isMobile.value) {
-      return viewportWidth.value;
-    }
-    let width = viewportWidth.value - visibleViewportX.value - 50;
-    if (activeSidebarRight.value) {
-      width -= 351;
+  }
+  function removeActiveSidebar(region, id) {
+    if (region === "left") {
+      activeSidebarsLeft.value = activeSidebarsLeft.value.filter(
+        (v) => v !== id
+      );
+    } else {
+      activeSidebarsRight.value = activeSidebarsRight.value.filter(
+        (v) => v !== id
+      );
     }
-    return width;
+  }
+  const hasSidebarLeft = computed(() => {
+    return !!activeSidebarsLeft.value.length;
   });
-  const visibleViewportHeight = computed(() => {
-    let height = viewportHeight.value - visibleViewportY.value;
-    if (addListOrientation.value === "horizontal") {
-      if (isMobile.value) {
-        height -= 50;
-      } else {
-        height -= 70;
-      }
-    }
-    const bannerHeights = Object.values(banners.value).filter(Boolean);
-    bannerHeights.forEach((bannerHeight) => {
-      height -= bannerHeight;
-    });
-    height -= bannerHeights.length * 10;
-    return height;
+  const hasSidebarRight = computed(() => {
+    return !!activeSidebarsRight.value.length;
   });
   const blockingPaddingX = computed(() => 15);
   const blockingPaddingY = computed(() => 50);
+  const viewportPadding = computed(() => 10);
+  const scrollbarWidth = computed(() => 16);
   const viewportBlockingRects = computed(() => {
     return Object.values(viewportBlockingRectsMap.value).map((rect) => {
       if (!rect) {
@@ -209,11 +228,12 @@ export default function(providerElement, storage, state, context, element) {
     };
   });
   const visibleViewportPadded = computed(() => {
+    const p = viewportPadding.value;
     return {
-      x: visibleViewportX.value + 10,
-      y: visibleViewportY.value + 10,
-      width: visibleViewportWidth.value - 10 - 16 - 10,
-      height: visibleViewportHeight.value - 20
+      x: visibleViewportX.value + p,
+      y: visibleViewportY.value + p,
+      width: visibleViewportWidth.value - 2 * p,
+      height: visibleViewportHeight.value - 2 * p
     };
   });
   const viewport = computed(() => {
@@ -262,29 +282,42 @@ export default function(providerElement, storage, state, context, element) {
   addElementClasses(
     document.documentElement,
     "bk-has-sidebar-left",
-    activeSidebarLeft
+    hasSidebarLeft
   );
   addElementClasses(
     document.documentElement,
     "bk-has-sidebar-right",
-    activeSidebarRight
+    hasSidebarRight
   );
   addElementClasses(document.documentElement, ["bk-html-root"]);
   addElementClasses(document.body, "bk-body");
   addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
   addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  function observeElement(element2, key) {
+    resizeElementMap.set(element2, key);
+    resizeObserver.observe(element2);
+  }
+  watch(
+    visibleViewportElement,
+    (el) => {
+      if (el) {
+        observeElement(el, "visible-viewport");
+      }
+    },
+    {
+      immediate: true
+    }
+  );
   onMounted(() => {
     viewportWidth.value = window.innerWidth;
     viewportHeight.value = window.innerHeight;
     window.addEventListener("resize", onResize);
     const artboard = artboardElement();
-    resizeObserver.observe(artboard);
+    observeElement(artboard, "artboard");
   });
   onBeforeUnmount(() => {
     window.removeEventListener("resize", onResize);
     clearTimeout(resizeTimeout);
-    const artboard = artboardElement();
-    resizeObserver.unobserve(artboard);
     resizeObserver.disconnect();
   });
   const hasTooltipOpen = computed(() => !!openTooltip.value);
@@ -301,12 +334,9 @@ export default function(providerElement, storage, state, context, element) {
   const selectionColor = computed(() => {
     return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
   });
+  defineElementStyle("--bk-viewport-padding", viewportPadding);
+  defineElementStyle("--bk-scrollbar-width", scrollbarWidth);
   return {
-    menu: {
-      isOpen: menuIsOpen,
-      close: () => menuIsOpen.value = false,
-      open: () => menuIsOpen.value = true
-    },
     artboardElement,
     rootElement,
     providerElement,
@@ -320,8 +350,6 @@ export default function(providerElement, storage, state, context, element) {
     useAnimations,
     visibleViewport,
     visibleViewportPadded,
-    toolbarHeight,
-    addListOrientation,
     setViewportBlockingRectangle,
     viewportBlockingRects,
     appViewport,
@@ -346,6 +374,14 @@ export default function(providerElement, storage, state, context, element) {
     setSelectionColor,
     removeSelectionColor,
     setBannerHeight,
-    removeBanner
+    removeBanner,
+    setActiveSidebar,
+    removeActiveSidebar,
+    hasSidebarLeft,
+    hasSidebarRight,
+    mainLayoutElement,
+    openDialog,
+    closeDialog,
+    currentDialog: readonly(currentDialog)
   };
 }

package/dist/runtime/helpers/webgl/index.d.ts

@@ -19,7 +19,6 @@ type PendingRect<T> = {
     checkOverlap: boolean;
 };
 export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
-    gl?: WebGLRenderingContext;
     added: Set<string>;
     rects: Record<string, T>;
     positions: number[];
@@ -34,13 +33,13 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     placedRects: PlacedRectangle[];
     deferredMode: boolean;
     pendingRects: PendingRect<T>[];
-    constructor(gl?: WebGLRenderingContext, options?: RectangleBufferCollectorOptions);
+    constructor(options?: RectangleBufferCollectorOptions);
     reset(): void;
     getIdealPosition(x: number, y: number, width: number, height: number, isEmptyField?: boolean): Rectangle;
     addRectangle(rect: Omit<T, 'index'>, type: number, checkOverlap?: boolean): void;
     processPendingRects(): void;
     getIndex(id: string): number | undefined;
     updateRectangle(): void;
-    createBufferInfo(): BufferInfo | null;
+    createBufferInfo(gl: WebGLRenderingContext): BufferInfo;
 }
 export {};

package/dist/runtime/helpers/webgl/index.js

@@ -1,7 +1,6 @@
 import { createBufferInfoFromArrays } from "twgl.js";
 import { intersects } from "../index.js";
 export class RectangleBufferCollector {
-  gl;
   added = /* @__PURE__ */ new Set();
   rects = {};
   positions = [];
@@ -16,8 +15,7 @@ export class RectangleBufferCollector {
   placedRects = [];
   deferredMode = false;
   pendingRects = [];
-  constructor(gl, options) {
-    this.gl = gl;
+  constructor(options) {
     this.deferredMode = options?.deferredMode || false;
   }
   reset() {
@@ -279,40 +277,37 @@ export class RectangleBufferCollector {
   }
   updateRectangle() {
   }
-  createBufferInfo() {
-    if (!this.gl) {
-      return null;
-    }
-    return createBufferInfoFromArrays(this.gl, {
+  createBufferInfo(gl) {
+    return createBufferInfoFromArrays(gl, {
       a_position: {
         numComponents: 3,
         data: this.positions,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_id: {
         numComponents: 1,
         data: this.rectId,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_state: {
         numComponents: 1,
         data: this.state,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_type: {
         numComponents: 1,
         data: this.types,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_radius: {
         numComponents: 4,
         data: this.radius,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_quad: {
         numComponents: 4,
         data: this.quad,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       indices: this.indices
     });

package/dist/runtime/icons/click.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.76,8.69A0.76,0.76 0 0,0 10,9.45V20.9C10,21.32 10.34,21.66 10.76,21.66C10.95,21.66 11.11,21.6 11.24,21.5L13.15,19.95L14.81,23.57C14.94,23.84 15.21,24 15.5,24C15.61,24 15.72,24 15.83,23.92L18.59,22.64C18.97,22.46 19.15,22 18.95,21.63L17.28,18L19.69,17.55C19.85,17.5 20,17.43 20.12,17.29C20.39,16.97 20.35,16.5 20,16.21L11.26,8.86L11.25,8.87C11.12,8.76 10.95,8.69 10.76,8.69M15,10V8H20V10H15M13.83,4.76L16.66,1.93L18.07,3.34L15.24,6.17L13.83,4.76M10,0H12V5H10V0M3.93,14.66L6.76,11.83L8.17,13.24L5.34,16.07L3.93,14.66M3.93,3.34L5.34,1.93L8.17,4.76L6.76,6.17L3.93,3.34M7,10H2V8H7V10" /></svg>

package/dist/runtime/icons/dock-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z" /></svg>

package/dist/runtime/icons/dock-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z" /></svg>

package/dist/runtime/icons/dock-window.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 18V20H4A2 2 0 0 1 2 18V8H4V18M22 6V14A2 2 0 0 1 20 16H8A2 2 0 0 1 6 14V6A2 2 0 0 1 8 4H20A2 2 0 0 1 22 6M20 6H8V14H20Z" /></svg>