@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/components/Edit/Features/Comments/index.vue

@@ -1,111 +0,0 @@
-<template>
-  <PluginSidebar
-    id="comments"
-    :title="$t('comments', 'Comments')"
-    :tour-text="
-  $t('commentsTourText', 'Shows all comments for the current page.')
-"
-    icon="comment"
-    weight="-20"
-  >
-    <div v-if="comments.length" class="bk bk-control">
-      <ul>
-        <li v-for="comment in comments" :key="comment.uuid">
-          <Comment
-            v-bind="comment"
-            @click-comment="onClickComment(comment)"
-            @resolve="onResolveComment(comment.uuid)"
-          />
-        </li>
-      </ul>
-    </div>
-
-    <template v-if="unresolvedCount" #badge>
-      <div class="bk-sidebar-badge bk-is-yellow">{{ unresolvedCount }}</div>
-    </template>
-  </PluginSidebar>
-
-  <PluginItemAction
-    id="add_comment"
-    :title="$t('addCommentToItem', 'Add Comment...')"
-    :active="showAddComment"
-    weight="last"
-    icon="comment_add"
-    multiple
-    @click="showAddComment = !showAddComment"
-  />
-
-  <Teleport :to="ui.mainLayoutElement.value">
-    <BlokkliTransition name="caret-tooltip">
-      <CommentAddForm
-        v-if="showAddComment"
-        ref="commentForm"
-        @add="onAddComment($event)"
-        @close="showAddComment = false"
-      />
-    </BlokkliTransition>
-  </Teleport>
-
-  <CommentsOverlay
-    v-if="comments.length"
-    :comments="comments"
-    @add-comment="onAddComment($event.body, $event.uuids)"
-    @resolve-comment="onResolveComment($event)"
-  />
-</template>
-
-<script setup>
-import {
-  watch,
-  ref,
-  useBlokkli,
-  defineBlokkliFeature,
-  computed
-} from "#imports";
-import { PluginSidebar, PluginItemAction } from "#blokkli/plugins";
-import { BlokkliTransition } from "#blokkli/components";
-import Comment from "./Comment/index.vue";
-import CommentAddForm from "./AddForm/index.vue";
-import CommentsOverlay from "./Overlay/index.vue";
-const { adapter } = defineBlokkliFeature({
-  id: "comments",
-  icon: "comment",
-  label: "Comments",
-  requiredAdapterMethods: ["loadComments", "addComment"],
-  description: "Provides comment functionality for blocks.",
-  screenshot: "feature-comments.jpg"
-});
-const { eventBus, $t, selection, ui } = useBlokkli();
-const commentForm = ref(null);
-const showAddComment = ref(false);
-watch(selection.uuids, () => {
-  if (commentForm.value && !commentForm.value.getComment()) {
-    showAddComment.value = false;
-  }
-});
-const comments = ref([]);
-comments.value = await adapter.loadComments();
-const unresolvedCount = computed(
-  () => comments.value.filter((v) => !v.resolved).length
-);
-const onAddComment = async (body, providedUuids) => {
-  const uuids = providedUuids ?? [...selection.uuids.value];
-  if (uuids.length) {
-    comments.value = await adapter.addComment(uuids, body);
-  }
-  showAddComment.value = false;
-};
-const onResolveComment = async (uuid) => {
-  if (!adapter.resolveComment) {
-    return;
-  }
-  comments.value = await adapter.resolveComment(uuid);
-};
-const onClickComment = (comment) => eventBus.emit("select:end", comment.blockUuids || []);
-</script>
-
-<script>
-export default {
-  name: "Comments"
-};
-</script>

package/dist/runtime/components/Edit/Features/Comments/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Conversions/index.vue

@@ -1,84 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  defineBlokkliFeature,
-  useLazyAsyncData,
-  watch
-} from "#imports";
-import { falsy } from "#blokkli/helpers";
-import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
-const { adapter } = defineBlokkliFeature({
-  id: "conversions",
-  label: "Conversions",
-  icon: "convert",
-  requiredAdapterMethods: ["getConversions", "convertBlocks"],
-  description: "Provides block actions to convert one or more blocks to a different bundle."
-});
-const { types, selection, state, $t } = useBlokkli();
-const {
-  data: conversions,
-  execute,
-  status
-} = await useLazyAsyncData(() => adapter.getConversions(), {
-  immediate: false,
-  default: () => []
-});
-watch(selection.uuids, () => {
-  if (status.value === "idle") {
-    execute();
-  }
-});
-async function onConvert(targetBundle) {
-  if (!targetBundle) {
-    return;
-  }
-  await state.mutateWithLoadingState(
-    () => adapter.convertBlocks(
-      selection.items.value.map((v) => v.uuid),
-      targetBundle
-    ),
-    $t("failedToConvert", "The block could not be converted.")
-  );
-}
-const possibleConversions = computed(() => {
-  if (selection.bundles.value.length !== 1) {
-    return [];
-  }
-  const sourceType = selection.bundles.value[0];
-  const titleBase = $t("conversionsConvertTo", "Convert to: @bundle");
-  return conversions.value.filter(
-    (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)
-  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy).map((v) => {
-    return {
-      id: v.id,
-      label: titleBase.replace("@bundle", v.label),
-      bundle: v.id
-    };
-  });
-});
-defineItemDropdownAction(() => {
-  if (possibleConversions.value.length) {
-    return possibleConversions.value.map((conversion) => ({
-      id: "conversion-" + conversion.id,
-      label: conversion.label,
-      bundle: conversion.bundle,
-      group: "conversions",
-      weight: 900,
-      callback: () => {
-        onConvert(conversion.id);
-      }
-    }));
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "Conversions"
-};
-</script>

package/dist/runtime/components/Edit/Features/Conversions/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/DebugSection.vue.d.ts

@@ -1,16 +0,0 @@
-type __VLS_Props = {
-    title: string;
-    defaultOpen?: boolean;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/Edit/Features/Debug/Main.vue

@@ -1,80 +0,0 @@
-<template>
-  <PluginSidebar id="debug" title="Debug" icon="bug" weight="200">
-    <div class="bk bk-debug">
-      <DebugSection title="Keyboard">
-        <SectionKeyboard />
-      </DebugSection>
-
-      <DebugSection title="Selection">
-        <SectionSelection />
-      </DebugSection>
-
-      <DebugSection title="Rendering">
-        <SectionRendering />
-      </DebugSection>
-
-      <DebugSection title="Logging">
-        <SectionLogging :logger />
-      </DebugSection>
-
-      <DebugSection title="Icons">
-        <SectionIcons />
-      </DebugSection>
-
-      <DebugSection title="Features">
-        <SectionFeatures />
-      </DebugSection>
-    </div>
-  </PluginSidebar>
-
-  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
-    <DebugViewport />
-  </PluginDebugOverlay>
-
-  <PluginDebugOverlay id="rects" title="Show field and block rects">
-    <DebugRects />
-  </PluginDebugOverlay>
-</template>
-
-<script setup>
-import { useBlokkli } from "#imports";
-import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
-import DebugSection from "./DebugSection.vue";
-import SectionKeyboard from "./Section/Keyboard.vue";
-import SectionSelection from "./Section/Selection.vue";
-import SectionRendering from "./Section/Rendering.vue";
-import SectionLogging from "./Section/Logging.vue";
-import SectionIcons from "./Section/Icons.vue";
-import SectionFeatures from "./Section/Features.vue";
-import DebugViewport from "./Viewport/index.vue";
-import DebugRects from "./Rects/index.vue";
-import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
-defineProps({
-  logger: { type: Object, required: true }
-});
-const { selection } = useBlokkli();
-async function copyUuid() {
-  const uuid = selection.uuids.value.at(0);
-  if (!uuid) {
-    return;
-  }
-  const type = "text/plain";
-  const clipboardItemData = {
-    [type]: uuid
-  };
-  const clipboardItem = new ClipboardItem(clipboardItemData);
-  await navigator.clipboard.write([clipboardItem]);
-}
-defineItemDropdownAction(() => {
-  if (selection.uuids.value.length === 1) {
-    return {
-      id: "debug-copy-uuid",
-      label: "Copy UUID",
-      icon: "bug",
-      group: "debug",
-      weight: 200,
-      callback: copyUuid
-    };
-  }
-});
-</script>

package/dist/runtime/components/Edit/Features/Debug/Main.vue.d.ts

@@ -1,6 +0,0 @@
-import type { DebugLogger } from '#blokkli/helpers/providers/debug';
-type __VLS_Props = {
-    logger: DebugLogger;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Rects/index.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="bk-debug-rects">
-    <canvas
-      ref="canvasRects"
-      :style="{
-  width: ui.viewport.value.width + 'px',
-  height: ui.viewport.value.height + 'px'
-}"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, useTemplateRef } from "#imports";
-import { falsy, intersects } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { ui, dom, directive } = useBlokkli();
-const canvasRects = useTemplateRef("canvasRects");
-function drawRects(ctx, rects, scale, offset, viewport) {
-  for (let i = 0; i < rects.length; i++) {
-    const rect = rects[i];
-    const drawnRect = {
-      x: rect.x * scale + offset.x,
-      y: rect.y * scale + offset.y,
-      width: rect.width * scale,
-      height: rect.height * scale
-    };
-    if (intersects(drawnRect, viewport)) {
-      ctx.beginPath();
-      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
-      ctx.stroke();
-    }
-  }
-}
-onBlokkliEvent("canvas:draw", (e) => {
-  if (!canvasRects.value) {
-    return;
-  }
-  canvasRects.value.width = ui.viewport.value.width;
-  canvasRects.value.height = ui.viewport.value.height;
-  const ctx = canvasRects.value.getContext("2d");
-  if (!ctx) {
-    return;
-  }
-  ctx.clearRect(0, 0, ui.viewport.value.width, ui.viewport.value.height);
-  ctx.strokeStyle = "blue";
-  const blockRects = dom.getBlockRects();
-  const viewport = ui.visibleViewport.value;
-  const rects = Object.values(blockRects);
-  drawRects(ctx, rects, e.artboardScale, e.artboardOffset, viewport);
-  ctx.strokeStyle = "red";
-  const visibleFieldRects = dom.getVisibleFields().map((key) => {
-    return dom.getFieldRect(key);
-  }).filter(falsy);
-  drawRects(ctx, visibleFieldRects, e.artboardScale, e.artboardOffset, viewport);
-  ctx.strokeStyle = "green";
-  const editableRects = directive.getVisible("editable");
-  drawRects(ctx, editableRects, e.artboardScale, e.artboardOffset, viewport);
-});
-</script>

package/dist/runtime/components/Edit/Features/Debug/Rects/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Features.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Icons.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="bk-debug-icons">
-    <div v-for="icon in iconItems" :key="icon">
-      <Icon :name="icon" />
-      <p>{{ icon }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "#imports";
-import { Icon } from "#blokkli/components";
-import { icons } from "#blokkli-build/icons";
-const iconItems = computed(() => Object.keys(icons));
-</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Icons.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Keyboard.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Logging.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <div>
-      <FormToggle v-model="logEvents" label="Log Events" />
-    </div>
-    <div>
-      <FormCheckboxes
-        id="debug-loggers"
-        v-model="debug.enabledLoggers.value"
-        label="Enabled Loggers"
-        description="If none selected, all will log. Select one or more to filter."
-        :options="loggerOptions"
-      />
-    </div>
-    <div>
-      <button
-        class="bk-button bk-is-small"
-        @click.prevent="() => console.log(dom.getDebugData())"
-      >
-        Log DOM state
-      </button>
-    </div>
-
-    <div>
-      <button class="bk-button bk-is-small" @click.prevent="getAllMessages">
-        Log all messages
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, computed, onMounted, onBeforeUnmount } from "#imports";
-import { FormToggle, FormCheckboxes } from "#blokkli/components";
-const props = defineProps({
-  logger: { type: Object, required: true }
-});
-const { debug, dom, storage, eventBus } = useBlokkli();
-const logEvents = storage.use("debug:log-events", true);
-const loggerOptions = computed(() => {
-  return debug.registeredLoggers.value.map((name) => ({
-    value: name,
-    label: name
-  })).sort((a, b) => {
-    return a.label.localeCompare(b.label);
-  });
-});
-const onEvent = (name, data) => {
-  if (!logEvents.value) {
-    return;
-  }
-  if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw") {
-    return;
-  }
-  props.logger.log("Event: " + String(name), data);
-};
-onMounted(() => {
-  eventBus.on("*", onEvent);
-});
-onBeforeUnmount(() => {
-  eventBus.off("*", onEvent);
-});
-function getAllMessages() {
-  console.log(debug.getMessages());
-}
-</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Logging.vue.d.ts

@@ -1,6 +0,0 @@
-import type { DebugLogger } from '#blokkli/helpers/providers/debug';
-type __VLS_Props = {
-    logger: DebugLogger;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Rendering.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="bk-debug-list">
-    <div>
-      <div>DPI</div>
-      <div>{{ animation.dpi.value }}</div>
-    </div>
-  </div>
-  <div v-for="overlay in debug.overlays.value" :key="overlay.id">
-    <FormToggle
-      :label="overlay.label"
-      :model-value="overlay.active"
-      @update:model-value="debug.toggleOverlay(overlay.id)"
-    />
-  </div>
-  <div>
-    <FormToggle
-      label="Set transforming"
-      :model-value="ui.isTransforming.value"
-      @update:model-value="toggleTransforming"
-    />
-  </div>
-
-  <div>
-    <FormRadio
-      id="rendering-mode"
-      label="Rendering Mode"
-      :model-value="animation.preferredRenderingMode.value"
-      :options="renderingModeOptions"
-      @update:model-value="updateRenderingMode"
-    />
-  </div>
-  <div>
-    <button
-      class="bk-button bk-is-small"
-      @click.prevent="() => dom.updateVisibleRects()"
-    >
-      Refresh Rects
-    </button>
-  </div>
-  <div v-if="animation.hasWebGLContext.value">
-    <button
-      class="bk-button bk-is-small"
-      :disabled="!animation.isRenderingWebGL.value"
-      @click.prevent="loseContext"
-    >
-      Lose WebGL Context
-    </button>
-  </div>
-  <div v-if="animation.hasWebGLContext.value">
-    <button
-      class="bk-button bk-is-small"
-      :disabled="animation.isRenderingWebGL.value"
-      @click.prevent="restoreContext"
-    >
-      Restore WebGL Context
-    </button>
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli } from "#imports";
-import { FormToggle, FormRadio } from "#blokkli/components";
-const { animation, debug, ui, dom } = useBlokkli();
-const renderingModeOptions = [
-  { value: "auto", label: "Auto" },
-  { value: "webgl", label: "WebGL" },
-  { value: "2d", label: "2D Canvas" }
-];
-let webglLoseContextExt = null;
-function toggleTransforming() {
-  if (ui.isTransforming.value) {
-    ui.setTransform();
-  } else {
-    ui.setTransform("Transform plugin label");
-  }
-}
-function updateRenderingMode(value) {
-  if (value === "auto" || value === "webgl" || value === "2d") {
-    animation.preferredRenderingMode.value = value;
-  }
-}
-function loseContext() {
-  const gl = animation.getRawGL();
-  if (gl) {
-    webglLoseContextExt = gl.getExtension("WEBGL_lose_context");
-    if (webglLoseContextExt) {
-      webglLoseContextExt.loseContext();
-    }
-  }
-}
-function restoreContext() {
-  if (webglLoseContextExt) {
-    webglLoseContextExt.restoreContext();
-  }
-}
-</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Rendering.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Selection.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Debug/Viewport/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="bk-debug-visible-viewport" :style="visibleViewportOverlayStyle">
-    <div>Visible Viewport</div>
-  </div>
-  <div
-    class="bk-debug-visible-viewport-padded"
-    :style="visibleViewportOverlayPaddedStyle"
-  >
-    <div>Visible Viewport Padded</div>
-  </div>
-  <div
-    v-for="(rect, i) in viewportBlockingRects"
-    :key="i"
-    class="bk-debug-viewport-blocking-rect"
-    :style="rect"
-  />
-
-  <div
-    v-for="(rect, i) in intersectionRects"
-    :key="'intersection_' + i"
-    class="bk-debug-intersection-rects"
-    :style="rect"
-  />
-
-  <div
-    v-for="(line, i) in linesRects"
-    :key="i"
-    class="bk-debug-viewport-lines"
-    :style="line"
-  />
-</template>
-
-<script setup>
-import { useBlokkli, computed } from "#imports";
-import { subtractRectFromViewport } from "#blokkli/helpers";
-const { ui } = useBlokkli();
-const rectToStyle = (rect) => {
-  return {
-    top: rect.y + "px",
-    left: rect.x + "px",
-    width: rect.width + "px",
-    height: rect.height + "px"
-  };
-};
-const viewportBlockingRects = computed(
-  () => ui.viewportBlockingRects.value.map(rectToStyle)
-);
-const linesRects = computed(() => {
-  const rects = [];
-  ui.viewportBlockingRects.value.forEach((rect) => {
-    rects.push(
-      rectToStyle({
-        x: rect.x,
-        y: 0,
-        width: 1,
-        height: window.innerHeight
-      })
-    );
-    rects.push(
-      rectToStyle({
-        x: rect.x + rect.width,
-        y: 0,
-        width: 1,
-        height: window.innerHeight
-      })
-    );
-    rects.push(
-      rectToStyle({
-        x: 0,
-        y: rect.y,
-        width: window.innerWidth,
-        height: 1
-      })
-    );
-    rects.push(
-      rectToStyle({
-        x: 0,
-        y: rect.y + rect.height,
-        width: window.innerWidth,
-        height: 1
-      })
-    );
-  });
-  return rects;
-});
-const visibleViewportOverlayStyle = computed(
-  () => rectToStyle(ui.visibleViewport.value)
-);
-const visibleViewportOverlayPaddedStyle = computed(
-  () => rectToStyle(ui.visibleViewportPadded.value)
-);
-const intersectionRects = computed(() => {
-  return subtractRectFromViewport(
-    ui.viewport.value,
-    ui.visibleViewport.value
-  ).map(rectToStyle);
-});
-</script>