@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

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

@@ -0,0 +1,339 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { ShallowRef } from 'vue';
+import type { StorageProvider } from './storage.js';
+import type { Coord, GlobalUiDialog, Rectangle, SidebarRegion, Size } from '#blokkli/types';
+import type { Viewport } from '#blokkli/constants';
+import type { AdapterContext } from '#blokkli/adapter';
+import type { ThemeColorName } from '#blokkli/types/theme';
+import type { ElementProvider } from './element.js';
+export type UiProvider = {
+    /**
+     * Get the Nuxt root element (#nuxt-root).
+     *
+     * Cached after first access for performance.
+     *
+     * @returns The root HTML element
+     * @throws Error if element cannot be found
+     */
+    rootElement: () => HTMLElement;
+    /**
+     * Get the artboard element (.bk-main-canvas).
+     *
+     * The artboard is the scrollable container for the edited content.
+     * Cached after first access for performance.
+     *
+     * @returns The artboard HTML element
+     * @throws Error if element cannot be found
+     */
+    artboardElement: () => HTMLElement;
+    /**
+     * The blökkli provider root element.
+     *
+     * This is the element that contains the entire editor UI.
+     */
+    providerElement: HTMLElement;
+    /**
+     * Whether the viewport is mobile (< 1024px width).
+     */
+    isMobile: ComputedRef<boolean>;
+    /**
+     * Whether the viewport is desktop (>= 1024px width).
+     */
+    isDesktop: ComputedRef<boolean>;
+    /**
+     * Whether animations are currently running.
+     *
+     * When true, adds 'bk-is-animating' class to document root.
+     * Used to disable certain interactions during animations.
+     */
+    isAnimating: Ref<boolean>;
+    /**
+     * Whether the analyzer is currently active.
+     *
+     * When true, adds 'bk-is-analyzing' class to document root.
+     */
+    isAnalyzing: Ref<boolean>;
+    /**
+     * Whether proxy mode is active.
+     *
+     * Proxy mode shows a structured view of blocks instead of their components.
+     */
+    isProxyMode: Ref<boolean>;
+    /**
+     * Whether any dialog is currently open.
+     */
+    hasDialogOpen: ComputedRef<boolean>;
+    /**
+     * The currently open dialog, or null if none is open.
+     */
+    currentDialog: Readonly<Ref<GlobalUiDialog | null>>;
+    /**
+     * Require confirmation before closing the current dialog.
+     *
+     * Sets the confirmClose flag on the current dialog, which will
+     * require double clicking the dialog background overlay to close it.
+     */
+    requireDialogCloseConfirm: () => void;
+    /**
+     * Open a global dialog.
+     *
+     * Closes any previously open dialog and opens the new one.
+     *
+     * @param dialog - The dialog configuration to open
+     */
+    openDialog: (dialog: GlobalUiDialog) => void;
+    /**
+     * Close a dialog.
+     *
+     * @param id - Optional dialog ID. If provided, only closes if it matches the current dialog.
+     */
+    closeDialog: (id?: string) => void;
+    /**
+     * Whether any tooltip is currently open.
+     */
+    hasTooltipOpen: ComputedRef<boolean>;
+    /**
+     * ID of the currently open tooltip, or empty string if none is open.
+     */
+    openTooltip: Ref<string>;
+    /**
+     * The current selection color.
+     *
+     * Returns the most recently set color, or null if none is set.
+     * Used to colorize the selection UI (selection rect, drop target indicators, etc.).
+     */
+    selectionColor: ComputedRef<ThemeColorName | null>;
+    /**
+     * Set a selection color.
+     *
+     * Multiple features can set colors with different IDs.
+     * The most recently set color is used.
+     *
+     * @param id - Unique identifier for this color source
+     * @param color - The theme color to use
+     */
+    setSelectionColor: (id: string, color: ThemeColorName) => void;
+    /**
+     * Remove a selection color by ID.
+     *
+     * If this was the active color, the previous color will become active.
+     *
+     * @param id - The color source ID to remove
+     */
+    removeSelectionColor: (id: string) => void;
+    /**
+     * Whether the transform overlay is open.
+     *
+     * The transform overlay is shown during drag operations, resizing, etc.
+     */
+    hasTransformOverlayOpen: Ref<boolean>;
+    /**
+     * Whether a transform operation is active.
+     *
+     * True when transformLabel is not empty.
+     */
+    isTransforming: ComputedRef<boolean>;
+    /**
+     * Set the active transform operation.
+     *
+     * @param label - Label describing the transform (e.g., "Moving 3 blocks"), or null/undefined to clear
+     */
+    setTransform: (label?: string | null | undefined) => void;
+    /**
+     * The current transform operation label.
+     */
+    transformLabel: ComputedRef<string>;
+    /**
+     * Whether animations are enabled.
+     *
+     * Can be disabled in settings for performance or accessibility.
+     * Defaults to true.
+     */
+    useAnimations: ComputedRef<boolean>;
+    /**
+     * Whether low performance mode is enabled.
+     *
+     * When enabled, reduces visual effects and animations for better performance
+     * on slower devices.
+     */
+    lowPerformanceMode: ComputedRef<boolean>;
+    /**
+     * The visible viewport rectangle.
+     *
+     * Represents the portion of the window where the editor is visible,
+     * excluding any overlays or sidebars.
+     */
+    visibleViewport: ComputedRef<Rectangle>;
+    /**
+     * The visible viewport rectangle with padding applied.
+     *
+     * Used for positioning elements that should be inset from the viewport edges.
+     */
+    visibleViewportPadded: ComputedRef<Rectangle>;
+    /**
+     * Register a rectangle that blocks part of the viewport.
+     *
+     * Blocking rectangles are used for persistent UI elements (toolbars, sidebars)
+     * that should affect element positioning and visibility calculations.
+     *
+     * @param key - Unique identifier for this blocking rectangle
+     * @param rect - The rectangle, or undefined to remove the blocking rectangle
+     */
+    setViewportBlockingRectangle: (key: string, rect?: Rectangle) => void;
+    /**
+     * All viewport blocking rectangles with padding applied.
+     *
+     * Each rectangle is expanded by blockingPaddingX and blockingPaddingY
+     * to create a buffer zone around blocking UI elements.
+     */
+    viewportBlockingRects: ComputedRef<Rectangle[]>;
+    /**
+     * The current viewport type.
+     *
+     * 'mobile' for viewports < 1024px width, 'desktop' otherwise.
+     * Used to adjust UI layout and behavior.
+     */
+    appViewport: ComputedRef<Viewport>;
+    /**
+     * ID of the currently open context menu, or empty string if none is open.
+     */
+    openContextMenu: Ref<string>;
+    /**
+     * The browser window viewport size.
+     *
+     * Updated on window resize with 400ms debounce.
+     */
+    viewport: ComputedRef<Size>;
+    /**
+     * The artboard element size.
+     *
+     * Tracked via ResizeObserver for accurate, efficient updates.
+     */
+    artboardSize: ComputedRef<Size>;
+    /**
+     * The artboard zoom/scale factor.
+     *
+     * 1.0 = 100%, 0.5 = 50%, 2.0 = 200%, etc.
+     * Used by artboard zoom feature.
+     */
+    artboardScale: Ref<number>;
+    /**
+     * The artboard scroll/pan offset in pixels.
+     *
+     * Represents how far the artboard has been scrolled or panned.
+     */
+    artboardOffset: Ref<Coord>;
+    /**
+     * Top-left coordinate of the selection rectangle.
+     *
+     * Updated during drag operations and multi-select.
+     */
+    selectionTopLeft: Ref<Coord>;
+    /**
+     * The interface language code.
+     *
+     * Respects forceDefaultLanguage config setting.
+     * Falls back to context language otherwise.
+     */
+    interfaceLanguage: ComputedRef<string>;
+    /**
+     * The full locale string for date/number formatting.
+     *
+     * Maps language codes to locale strings (e.g., 'de' -> 'de-CH').
+     */
+    locale: ComputedRef<string>;
+    /**
+     * Format a date using the current locale.
+     *
+     * @param date - Date object or ISO string
+     * @param options - Intl.DateTimeFormat options. Defaults to numeric date + time.
+     * @returns Localized date string
+     *
+     * @example
+     * ```ts
+     * formatDate(new Date()) // "16.11.2025, 14:30"
+     * formatDate(isoString, { dateStyle: 'long' }) // "16. November 2025"
+     * ```
+     */
+    formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
+    /**
+     * Get absolute rectangle for an element or rectangle.
+     *
+     * Converts viewport-relative coordinates to artboard-absolute coordinates
+     * by accounting for artboard scale and offset. Ensures minimum size of 24x24.
+     *
+     * @param v - HTML element or rectangle
+     * @param scale - Override artboard scale (uses current scale if not provided)
+     * @param offset - Override artboard offset (uses current offset if not provided)
+     * @returns Absolute rectangle in artboard coordinates
+     */
+    getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    /**
+     * Convert artboard-absolute rectangle to viewport-relative coordinates.
+     *
+     * Applies artboard scale and offset to convert from artboard space
+     * to viewport/screen space.
+     *
+     * @param rect - Rectangle in artboard coordinates
+     * @param scale - Override artboard scale (uses current scale if not provided)
+     * @param offset - Override artboard offset (uses current offset if not provided)
+     * @returns Rectangle in viewport coordinates
+     */
+    getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    /**
+     * Set the height of a banner by ID.
+     *
+     * Banners are persistent notification bars at the top of the interface.
+     * Height is used to adjust viewport calculations.
+     *
+     * @param id - Unique banner identifier
+     * @param height - Banner height in pixels
+     */
+    setBannerHeight: (id: string, height: number) => void;
+    /**
+     * Remove a banner by ID.
+     *
+     * Sets the banner height to 0.
+     *
+     * @param id - The banner identifier to remove
+     */
+    removeBanner: (id: string) => void;
+    /**
+     * Register an active sidebar.
+     *
+     * Adds the sidebar ID to the active list for the specified region.
+     * When sidebars are active, the interface adjusts layout accordingly.
+     *
+     * @param region - Which sidebar region ('left' or 'right')
+     * @param id - Unique sidebar identifier
+     */
+    setActiveSidebar: (region: SidebarRegion, id: string) => void;
+    /**
+     * Unregister an active sidebar.
+     *
+     * Removes the sidebar ID from the active list for the specified region.
+     *
+     * @param region - Which sidebar region ('left' or 'right')
+     * @param id - The sidebar identifier to remove
+     */
+    removeActiveSidebar: (region: SidebarRegion, id: string) => void;
+    /**
+     * Whether any sidebar is active on the left.
+     *
+     * When true, adds 'bk-has-sidebar-left' class to document root.
+     */
+    hasSidebarLeft: ComputedRef<boolean>;
+    /**
+     * Whether any sidebar is active on the right.
+     *
+     * When true, adds 'bk-has-sidebar-right' class to document root.
+     */
+    hasSidebarRight: ComputedRef<boolean>;
+    /**
+     * Reference to the main layout element.
+     *
+     * The container element for the primary editor interface.
+     */
+    mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>;
+};
+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 → providers/ui.js}

@@ -2,11 +2,14 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed
-} from "vue";
-import { eventBus } from "./eventBus.js";
-import { falsy } from "./index.js";
-import { addElementClasses } from "./addElementClasses.js";
+  computed,
+  watch,
+  readonly
+} from "#imports";
+import { eventBus } from "../eventBus.js";
+import { falsy } from "../index.js";
+import { addElementClasses } from "../composables/addElementClasses.js";
+import { defineElementStyle } from "../composables/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,20 @@ export default function(providerElement, storage, state, context, element) {
   const transformLabel = ref("");
   const openContextMenu = ref("");
   const banners = ref({});
+  function openDialog(dialog) {
+    currentDialog.value = dialog;
+  }
+  function requireDialogCloseConfirm() {
+    if (currentDialog.value) {
+      currentDialog.value.confirmClose = true;
+    }
+  }
+  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 +84,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 +164,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,12 +175,6 @@ export default function(providerElement, storage, state, context, element) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const toolbarHeight = computed(() => {
-    if (isMobile.value) {
-      return 80;
-    }
-    return 50;
-  });
   const activeSidebarsLeft = ref([]);
   const activeSidebarsRight = ref([]);
   function setActiveSidebar(region, id) {
@@ -168,55 +207,10 @@ export default function(providerElement, storage, state, context, element) {
   const hasSidebarRight = computed(() => {
     return !!activeSidebarsRight.value.length;
   });
-  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;
-      }
-      if (hasSidebarLeft.value) {
-        x += 400;
-      }
-    }
-    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 (hasSidebarRight.value) {
-      width -= 351;
-    }
-    return width;
-  });
-  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 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) {
@@ -239,11 +233,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(() => {
@@ -303,18 +298,31 @@ export default function(providerElement, storage, state, context, element) {
   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);
@@ -331,12 +339,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,
@@ -350,8 +355,6 @@ export default function(providerElement, storage, state, context, element) {
     useAnimations,
     visibleViewport,
     visibleViewportPadded,
-    toolbarHeight,
-    addListOrientation,
     setViewportBlockingRectangle,
     viewportBlockingRects,
     appViewport,
@@ -380,6 +383,11 @@ export default function(providerElement, storage, state, context, element) {
     setActiveSidebar,
     removeActiveSidebar,
     hasSidebarLeft,
-    hasSidebarRight
+    hasSidebarRight,
+    mainLayoutElement,
+    openDialog,
+    closeDialog,
+    currentDialog: readonly(currentDialog),
+    requireDialogCloseConfirm
   };
 }

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

@@ -3,7 +3,7 @@
  */
 import { type RuntimeBlockOptionArray, type RuntimeBlockOptions } from '#blokkli-build/runtime-options';
 import type { FieldListItemTyped } from '#blokkli-build/generated-types';
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
 import type { FieldListItem } from '#blokkli/types';
 /**
  * Map all kinds of truthy values for a checkbox.

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

@@ -21,5 +21,6 @@ export declare const INJECT_FRAGMENT_CONTEXT: unique symbol;
 export declare const INJECT_PROVIDER_KEY: unique symbol;
 export declare const INJECT_EDIT_FIELD_LIST_COMPONENT: unique symbol;
 export declare const INJECT_EDIT_LOGGER: unique symbol;
+export declare const INJECT_ALL_COMPONENTS_CHUNK: unique symbol;
 export declare const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";
 export declare const BK_VISIBLE_LANGUAGES = "bkVisibleLanguages";

package/dist/runtime/helpers/symbols.js

@@ -23,5 +23,8 @@ export const INJECT_EDIT_FIELD_LIST_COMPONENT = Symbol(
   "blokkli_edit_field_list_component"
 );
 export const INJECT_EDIT_LOGGER = Symbol("blokkli_edit_logger");
+export const INJECT_ALL_COMPONENTS_CHUNK = Symbol(
+  "blokkli_all_components_chunk"
+);
 export const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";
 export const BK_VISIBLE_LANGUAGES = "bkVisibleLanguages";

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>