@revenexx/editor 0.1.0

package/dist/runtime/editor/components/Actions/ScrollArrow/index.d.vue.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    side: "left" | "right";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    side: "left" | "right";
+}> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/Actions/ScrollArrow/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <button
+    type="button"
+    class="_bk_hidden _bk_lg:flex _bk_absolute _bk_top-1 _bk_bottom-1 _bk_z-actions _bk_w-40 _bk_cursor-pointer _bk_bg-mono-950/90 _bk_hover:bg-mono-700 _bk_items-center _bk_justify-center"
+    :class="
+  side === 'left' ? '_bk_left-0 _bk_border-r _bk_border-r-mono-700' : '_bk_right-0 _bk_border-l _bk_border-l-mono-700'
+"
+    @pointerdown="onPointerDown"
+  >
+    <Icon
+      :name="
+  side === 'left' ? 'bk_mdi_chevron_backward' : 'bk_mdi_chevron_forward'
+"
+      class="_bk_fill-current _bk_pointer-events-none _bk_size-30"
+    />
+  </button>
+</template>
+
+<script setup>
+import { onBeforeUnmount } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  side: { type: String, required: true }
+});
+const emit = defineEmits(["start", "end"]);
+let isPressed = false;
+function onRelease() {
+  if (!isPressed) {
+    return;
+  }
+  isPressed = false;
+  window.removeEventListener("pointerup", onRelease);
+  window.removeEventListener("pointercancel", onRelease);
+  emit("end");
+}
+function onPointerDown() {
+  if (isPressed) {
+    return;
+  }
+  isPressed = true;
+  window.addEventListener("pointerup", onRelease);
+  window.addEventListener("pointercancel", onRelease);
+  emit("start");
+}
+onBeforeUnmount(onRelease);
+</script>
+
+<script>
+export default {
+  name: "ActionsScrollArrow"
+};
+</script>

package/dist/runtime/editor/components/Actions/ScrollArrow/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    side: "left" | "right";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    side: "left" | "right";
+}> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/Actions/Title/index.d.vue.ts

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

package/dist/runtime/editor/components/Actions/Title/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div
+    id="bk-blokkli-item-actions-title"
+    class="_bk_w-[160px] _bk_lg:w-[240px]"
+    :style="{
+  height: 'var(--bk-actions-height)'
+}"
+  >
+    <button
+      class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent _bk_group/tooltip _bk_pl-10 _bk_pr-3 _bk_flex _bk_items-center _bk_lg:min-w-[180px] _bk_text-mono-300 _bk_font-bold _bk_h-full _bk_leading-none _bk_relative _bk_w-full _bk_cursor-pointer _bk_hover:text-mono-50 _bk_hover:bg-mono-700"
+      tabindex="-1"
+      :class="{
+  '_bk_lg:bg-mono-700 _bk_text-white': showDropdown
+}"
+      @click.prevent="onToggleDropdown"
+    >
+      <Tooltip
+        :label="$t('actionsDropdownToolip', 'Further actions')"
+        placement="above-left"
+        class="_bk_w-full"
+      >
+        <template #status>
+          <TooltipStatus
+            v-if="restrictedPermissionsLabel"
+            :description="restrictedPermissionsLabel"
+            status="warning"
+          />
+          <TooltipStatus
+            v-if="selectedTranslationIsOutdated"
+            :description="
+  $t(
+    'translationOutdatedHint',
+    'The translation is marked as outdated.'
+  )
+"
+            status="warning"
+          />
+        </template>
+      </Tooltip>
+      <div
+        v-show="!hasSelectedHost && bundleIcon"
+        class="_bk_text-xl _bk_lg:text-[34px] _bk_mr-[0.25em] _bk_size-[1em] _bk_relative _bk_shrink-0"
+      >
+        <ItemIconBox
+          v-if="bundleIcon"
+          :icon="iconOverride"
+          :bundle="bundleIcon"
+          :color="isReusable ? 'lime' : void 0"
+          is-small
+        />
+        <div
+          v-if="itemBundle?.id === fromLibraryBlockBundle"
+          class="_bk_absolute _bk_z-50 _bk_-top-[7px] _bk_-right-[7px] _bk_bg-lime-dark _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-full _bk_border _bk_border-lime-normal _bk_shadow-lg"
+        >
+          <Icon name="reusable" class="_bk_size-[12px] _bk_fill-lime-light" />
+        </div>
+      </div>
+      <span class="_bk_truncate _bk_mr-auto">{{ title }}</span>
+      <Pill
+        v-if="selection.items.value.length > 1"
+        :text="selection.items.value.length"
+        scheme="mono"
+      />
+
+      <span
+        v-show="isPermissionRestricted"
+        class="_bk_size-25 _bk_text-yellow-normal _bk_p-5 _bk_bg-yellow-dark _bk_rounded-full"
+      >
+        <Icon name="bk_mdi_lock" class="_bk_size-full" />
+      </span>
+
+      <Pill
+        v-show="selectedIsNew"
+        :text="$t('selectedIsNew', 'New')"
+        variant="light"
+      />
+
+      <Pill
+        v-show="selectedTranslationIsOutdated"
+        :text="$t('selectedTranslationIsOutdated', 'Outdated')"
+        variant="normal"
+        scheme="yellow"
+      />
+
+      <Icon
+        name="bk_mdi_arrow_drop_down"
+        class="_bk_ml-2 _bk_pointer-events-none _bk_size-15 _bk_md:size-20"
+        :class="{
+  '_bk_rotate-180': showDropdown
+}"
+      />
+    </button>
+    <div
+      v-show="showDropdown && editingEnabled"
+      id="bk-blokkli-item-actions-dropdown"
+      class="_bk_absolute _bk_bottom-full _bk_left-0 _bk_min-w-[300px] _bk_bg-mono-900 _bk_text-mono-200 _bk_shadow-xl-inverted _bk_w-screen _bk_lg:w-auto _bk_flex _bk_flex-col _bk_lg:top-full _bk_lg:bottom-auto _bk_lg:shadow-xl _bk_lg:left-[23px]"
+    >
+      <div>
+        <EditActionsItemDropdown
+          v-if="showDropdown"
+          @close="showDropdown = false"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, computed, nextTick, useBlokkli } from "#imports";
+import { falsy } from "#blokkli/helpers";
+import {
+  Icon,
+  ItemIconBox,
+  Tooltip,
+  TooltipStatus,
+  Pill
+} from "#blokkli/editor/components";
+import EditActionsItemDropdown from "../ItemDropdown/index.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
+const {
+  selection,
+  $t,
+  types,
+  state,
+  ui,
+  definitions,
+  debug,
+  permissions,
+  context
+} = useBlokkli();
+const editingEnabled = computed(
+  () => state.editMode.value === "editing" || state.editMode.value === "translating"
+);
+const showDropdown = computed({
+  get() {
+    return ui.itemActionsOpen.value;
+  },
+  set(isOpen) {
+    ui.itemActionsOpen.value = isOpen;
+  }
+});
+async function onToggleDropdown() {
+  const willOpen = !showDropdown.value;
+  if (willOpen) {
+    await ui.flushPendingChanges();
+    await nextTick();
+  }
+  showDropdown.value = willOpen;
+}
+watch(selection.items, () => {
+  showDropdown.value = false;
+});
+watch(selection.hasHostSelected, () => {
+  showDropdown.value = false;
+});
+const bundleIcon = computed(() => {
+  if (itemBundle.value?.id === fromLibraryBlockBundle) {
+    const reusableBundle = selection.items.value[0]?.library?.reusableBundle;
+    if (reusableBundle) {
+      return reusableBundle;
+    }
+  }
+  return itemBundle.value?.id;
+});
+const iconOverride = computed(() => {
+  if (fragment.value) {
+    return fragment.value.editor?.icon ?? null;
+  }
+  return null;
+});
+const isReusable = computed(() => {
+  return itemBundle.value?.id === fromLibraryBlockBundle;
+});
+const hasSelectedHost = computed(() => {
+  return selection.items.value.length === 0;
+});
+const fragment = computed(() => {
+  if (itemBundle.value?.id !== fragmentBlockBundle) {
+    return null;
+  }
+  const uuid = selection.uuids.value[0];
+  if (!uuid) {
+    return null;
+  }
+  const item = state.getFieldListItem(uuid);
+  if (!item) {
+    return null;
+  }
+  const name = item.props?.name;
+  if (!name) {
+    return null;
+  }
+  return definitions.getFragmentDefinition(name) ?? null;
+});
+const title = computed(() => {
+  if (ui.transformLabel.value) {
+    return ui.transformLabel.value;
+  } else if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
+  } else if (itemBundle.value) {
+    if (itemBundle.value.id === fragmentBlockBundle) {
+      const fragments = selection.uuids.value.map((uuid) => {
+        const item = state.getFieldListItem(uuid);
+        if (!item) {
+          return;
+        }
+        const name = item.props?.name;
+        if (!name) {
+          return;
+        }
+        const definition = definitions.getFragmentDefinition(name);
+        return definition?.label;
+      }).filter(falsy);
+      if (fragments.length && fragments.length < 3) {
+        return fragments.join(", ");
+      }
+    } else if (itemBundle.value.id === fromLibraryBlockBundle) {
+      const title2 = selection.items.value[0]?.library?.label;
+      if (title2) {
+        return title2;
+      }
+    }
+    return itemBundle.value.label;
+  } else if (!selection.items.value.length) {
+    return state.entity.value.label;
+  }
+  return $t("multipleItemsLabel", "Items");
+});
+const selectedIsNew = computed(() => {
+  const items = selection.items.value;
+  return !!items.length && items.every((v) => v.isNew);
+});
+const selectedTranslationIsOutdated = computed(() => {
+  const items = selection.items.value;
+  if (!items.length) return false;
+  return items.every(
+    (item) => item.outdatedTranslations.includes(context.value.language)
+  );
+});
+const permissionsForSelected = computed(() => {
+  const bundles = selection.bundles.value;
+  if (!bundles.length) {
+    return [];
+  }
+  const allPermissions = ["add", "delete", "edit"];
+  return allPermissions.filter(
+    (permission) => bundles.every(
+      (bundle) => permissions.checkBlockBundlePermission(bundle, permission)
+    )
+  );
+});
+const isPermissionRestricted = computed(
+  () => selection.items.value.length > 0 && permissionsForSelected.value.length < 3
+);
+const restrictedPermissionsLabel = computed(() => {
+  if (!isPermissionRestricted.value) {
+    return null;
+  }
+  const shared = permissionsForSelected.value;
+  if (shared.length === 0) {
+    return $t(
+      "restrictedPermissionsAll",
+      "Some actions are not available due to missing permissions."
+    );
+  }
+  return $t(
+    "restrictedPermissionsSome",
+    "Some actions are restricted due to missing permissions."
+  );
+});
+const itemBundle = computed(() => {
+  if (selection.bundles.value.length !== 1) {
+    return;
+  }
+  const bundle = selection.bundles.value[0];
+  return types.getBlockBundleDefinition(bundle);
+});
+onBlokkliEvent("action:selected", () => {
+  showDropdown.value = false;
+});
+watch(ui.isTransforming, function(isTransforming) {
+  if (isTransforming) {
+    showDropdown.value = false;
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "ItemActionsTitle"
+};
+</script>

package/dist/runtime/editor/components/Actions/Title/index.vue.d.ts

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

package/dist/runtime/editor/components/Actions/index.d.vue.ts

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

package/dist/runtime/editor/components/Actions/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    ref="el"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden',
+  '--bk-actions-max-width': `${paddedViewportWidth}px`
+}"
+    class="bk bk-blokkli-item-actions-inner _bk_absolute _bk_left-0 _bk_p-0 _bk_z-actions _bk_w-full _bk_text-mono-50 _bk_select-none _bk_text-sm _bk_pointer-events-auto"
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
+  >
+    <ScrollArrow
+      v-show="showLeft"
+      side="left"
+      @start="startScroll(-1)"
+      @end="stopScroll"
+    />
+    <div
+      id="bk-blokkli-item-actions-controls"
+      ref="contentEl"
+      class="bk-blokkli-item-actions-controls _bk_flex _bk_items-stretch _bk_whitespace-nowrap _bk_h-full _bk_flex-wrap _bk_lg:flex-nowrap _bk_lg:w-max _bk_bg-mono-950/90 _bk_scheme-dark _bk_relative _bk_z-50 _bk_lg:border _bk_lg:border-mono-400 _bk_lg:bg-mono-900"
+      :class="{
+  '_bk_pointer-events-none': ui.isTransforming.value
+}"
+      :style="{ '--bk-actions-scroll-x': `${-scrollX}px` }"
+    >
+      <Interactions />
+      <Title />
+
+      <div
+        v-show="!selection.hasHostSelected.value && !ui.isTransforming.value"
+        id="bk-blokkli-item-actions"
+        class="_bk_relative _bk_flex _bk_flex-1 _bk_lg:flex-initial _bk_lg:border-l _bk_lg:border-l-mono-500 _bk_justify-end"
+      />
+    </div>
+    <ScrollArrow
+      v-show="showRight"
+      side="right"
+      @start="startScroll(1)"
+      @end="stopScroll"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli, useTemplateRef, onBeforeUnmount } from "#imports";
+import Interactions from "./Interactions/index.vue";
+import Title from "./Title/index.vue";
+import ScrollArrow from "./ScrollArrow/index.vue";
+import { onBlokkliEvent, useStickyToolbar } from "#blokkli/editor/composables";
+import { useToolbarScroll } from "./useToolbarScroll";
+const { selection, ui } = useBlokkli();
+const ACTIONS_HEIGHT = 52;
+const el = useTemplateRef("el");
+const contentEl = useTemplateRef("contentEl");
+const {
+  scrollX,
+  showLeft,
+  showRight,
+  startScroll,
+  stopScroll,
+  scrollIntoView
+} = useToolbarScroll({
+  viewportEl: el,
+  contentEl
+});
+onBlokkliEvent("actions:scrollIntoView", (e) => {
+  scrollIntoView(e.element);
+});
+useStickyToolbar(el, {
+  getPlacementY: () => "top",
+  shouldUpdate: () => !ui.actionsToolbarLocked.value && isVisible.value,
+  getHeight: () => ACTIONS_HEIGHT,
+  getMargin: () => 30
+});
+let mouseLeaveTimeout = null;
+function onMouseLeave() {
+  onMouseEnter();
+  if (ui.actionsToolbarLocked.value || ui.isChangingOptions.value) {
+    mouseLeaveTimeout = window.setTimeout(() => {
+      ui.actionsToolbarLocked.value = false;
+      ui.isChangingOptions.value = false;
+    }, 500);
+  }
+}
+function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+    mouseLeaveTimeout = null;
+  }
+}
+onBeforeUnmount(() => {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+  }
+});
+const hasAnythingSelected = computed(
+  () => selection.hasHostSelected.value || !!selection.items.value.length
+);
+const paddedViewportWidth = computed(
+  () => Math.max(120, Math.round(ui.visibleViewportPadded.value.width))
+);
+const isVisible = computed(() => {
+  return !selection.isDragging.value && !selection.activeFieldLabel.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value && !ui.isApproving.value;
+});
+</script>
+
+<script>
+export default {
+  name: "ItemActions"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-blokkli-item-actions-inner {
+  backface-visibility: hidden;
+  bottom: var(--bk-root-offset-bottom);
+}
+@media (width >= 64rem) {
+  .bk.bk-blokkli-item-actions-inner {
+    top: 0px !important;
+    width: auto !important;
+    bottom: initial !important;
+    max-width: var(--bk-actions-max-width, calc(100vw - 60px));
+    clip-path: inset(-100vh 0 -100vh 0);
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-actions-controls {
+    transform: translate3d(var(--bk-actions-scroll-x, 0px), 0, 0);
+    will-change: transform;
+  }
+}
+.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) {
+  pointer-events: none;
+}
+.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) .bk-blokkli-item-actions-buttons > button,.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) .bk-blokkli-item-options > .bk-blokkli-item-options-item {
+  opacity: 20%;
+}
+:is(.bk .bk-blokkli-item-actions-controls)::-webkit-scrollbar {
+  display: none;
+}
+</style>

package/dist/runtime/editor/components/Actions/index.vue.d.ts

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

package/dist/runtime/editor/components/Actions/useToolbarScroll.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+export type UseToolbarScrollOptions = {
+    viewportEl: Readonly<Ref<HTMLElement | null>>;
+    contentEl: Readonly<Ref<HTMLElement | null>>;
+};
+/**
+ * Drives horizontal scroll of the actions toolbar's inner content via a
+ * transform translate, exposing arrow visibility flags and press-and-hold
+ * scroll controls.
+ *
+ * The viewport caps at the editor's safe area on desktop; when the content
+ * (icons, options, action buttons) is wider, the user scrolls by pressing
+ * and holding the arrow buttons rendered on the viewport edges. The
+ * underlying transform is applied without a CSS transition so selection
+ * changes don't animate back to zero. Mobile is unaffected — the options
+ * strip keeps its own native horizontal overflow there.
+ */
+export declare function useToolbarScroll(options: UseToolbarScrollOptions): {
+    scrollX: any;
+    showLeft: any;
+    showRight: any;
+    startScroll: (direction: -1 | 1) => void;
+    stopScroll: () => void;
+    scrollIntoView: (element: HTMLElement) => void;
+};

package/dist/runtime/editor/components/Actions/useToolbarScroll.js

@@ -0,0 +1,125 @@
+import { ref, computed, onBeforeUnmount } from "#imports";
+import { onElementResize } from "#blokkli/editor/composables";
+const LG_MEDIA_QUERY = "(min-width: 1024px)";
+const SCROLL_SPEED_PX_PER_SEC = 1400;
+const ARROW_OVERLAP_PX = 60;
+export function useToolbarScroll(options) {
+  const scrollX = ref(0);
+  const viewportWidth = ref(0);
+  const contentWidth = ref(0);
+  const isLg = ref(
+    typeof window !== "undefined" ? window.matchMedia(LG_MEDIA_QUERY).matches : false
+  );
+  const maxScroll = computed(() => {
+    if (!isLg.value) {
+      return 0;
+    }
+    return Math.max(0, contentWidth.value - viewportWidth.value);
+  });
+  const showLeft = computed(() => maxScroll.value > 0 && scrollX.value > 0);
+  const showRight = computed(
+    () => maxScroll.value > 0 && scrollX.value < maxScroll.value
+  );
+  function clamp() {
+    if (scrollX.value > maxScroll.value) {
+      scrollX.value = maxScroll.value;
+    } else if (scrollX.value < 0) {
+      scrollX.value = 0;
+    }
+  }
+  let rafId = null;
+  let lastTime = null;
+  let currentDirection = 0;
+  function tick(now) {
+    if (lastTime === null) {
+      lastTime = now;
+    }
+    const dt = (now - lastTime) / 1e3;
+    lastTime = now;
+    const next = Math.max(
+      0,
+      Math.min(
+        maxScroll.value,
+        scrollX.value + currentDirection * SCROLL_SPEED_PX_PER_SEC * dt
+      )
+    );
+    scrollX.value = next;
+    if (currentDirection < 0 && next === 0 || currentDirection > 0 && next >= maxScroll.value) {
+      stopScroll();
+      return;
+    }
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function startScroll(direction) {
+    if (rafId !== null) {
+      return;
+    }
+    currentDirection = direction;
+    lastTime = null;
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function stopScroll() {
+    if (rafId !== null) {
+      window.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    lastTime = null;
+    currentDirection = 0;
+  }
+  function scrollIntoView(element) {
+    const viewport = options.viewportEl.value;
+    if (!viewport || !isLg.value || maxScroll.value <= 0) {
+      return;
+    }
+    if (!viewport.contains(element)) {
+      return;
+    }
+    const viewportRect = viewport.getBoundingClientRect();
+    const elRect = element.getBoundingClientRect();
+    const leftOverflow = viewportRect.left + ARROW_OVERLAP_PX - elRect.left;
+    const rightOverflow = elRect.right - (viewportRect.right - ARROW_OVERLAP_PX);
+    let next = scrollX.value;
+    if (leftOverflow > 0) {
+      next -= leftOverflow;
+    } else if (rightOverflow > 0) {
+      next += rightOverflow;
+    } else {
+      return;
+    }
+    scrollX.value = Math.max(0, Math.min(maxScroll.value, next));
+  }
+  onElementResize(options.viewportEl, (size) => {
+    viewportWidth.value = size.width;
+    clamp();
+  });
+  onElementResize(options.contentEl, (size) => {
+    contentWidth.value = size.width;
+    clamp();
+  });
+  let mql = null;
+  function onMediaChange(e) {
+    isLg.value = e.matches;
+    if (!e.matches) {
+      scrollX.value = 0;
+      stopScroll();
+    } else {
+      clamp();
+    }
+  }
+  if (typeof window !== "undefined") {
+    mql = window.matchMedia(LG_MEDIA_QUERY);
+    mql.addEventListener("change", onMediaChange);
+  }
+  onBeforeUnmount(() => {
+    mql?.removeEventListener("change", onMediaChange);
+    stopScroll();
+  });
+  return {
+    scrollX,
+    showLeft,
+    showRight,
+    startScroll,
+    stopScroll,
+    scrollIntoView
+  };
+}