@abraca/nuxt 2.13.0 → 2.15.0

package/dist/runtime/components/editor/AColorPalettePopover.vue

@@ -1,24 +1,106 @@
 <script setup>
 import { ref, computed, watch, nextTick } from "vue";
 import { COLOR_PALETTES } from "../../utils/colorPalettes";
+const COLS = 11;
 const props = defineProps({
   modelValue: { type: String, required: true },
   open: { type: Boolean, required: true }
 });
 const emit = defineEmits(["update:modelValue", "update:open"]);
 const search = ref("");
+const highlighted = ref(-1);
+const scrollContainer = ref(null);
 const filteredPalettes = computed(() => {
   if (!search.value) return COLOR_PALETTES;
   const q = search.value.toLowerCase();
   return COLOR_PALETTES.filter((p) => p.name.toLowerCase().includes(q));
 });
+const paletteGroups = computed(() => {
+  let start = 0;
+  return filteredPalettes.value.map((p) => {
+    const group = { name: p.name, shades: p.shades, start };
+    start += p.shades.length;
+    return group;
+  });
+});
+const flatShades = computed(
+  () => filteredPalettes.value.flatMap(
+    (p) => p.shades.map((s) => ({ hex: s.hex, key: `${p.name}-${s.shade}` }))
+  )
+);
+watch(search, () => {
+  highlighted.value = -1;
+});
 function selectHex(hex) {
   emit("update:modelValue", hex);
   emit("update:open", false);
 }
+function scrollHighlightedIntoView() {
+  nextTick(() => {
+    scrollContainer.value?.querySelector(`[data-idx="${highlighted.value}"]`)?.scrollIntoView({ block: "nearest" });
+  });
+}
+function setHighlight(i) {
+  const max = flatShades.value.length - 1;
+  if (max < 0) return;
+  highlighted.value = Math.max(0, Math.min(max, i));
+  scrollHighlightedIntoView();
+}
+function onKeydown(e) {
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      setHighlight(highlighted.value < 0 ? 0 : highlighted.value + COLS);
+      break;
+    case "ArrowUp":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      if (highlighted.value < COLS) {
+        highlighted.value = -1;
+        searchInput.value?.$el?.querySelector("input")?.focus();
+      } else {
+        setHighlight(highlighted.value - COLS);
+      }
+      break;
+    case "ArrowRight":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value + 1);
+      break;
+    case "ArrowLeft":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value - 1);
+      break;
+    case "Home":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(0);
+      break;
+    case "End":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(flatShades.value.length - 1);
+      break;
+    case "Enter": {
+      const idx = highlighted.value >= 0 ? highlighted.value : 0;
+      const shade = flatShades.value[idx];
+      if (shade) {
+        e.preventDefault();
+        selectHex(shade.hex);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      emit("update:open", false);
+      break;
+  }
+}
 const searchInput = ref(null);
 watch(() => props.open, async (open) => {
   if (open) {
+    highlighted.value = -1;
     await nextTick();
     searchInput.value?.$el?.querySelector("input")?.focus();
   }
@@ -33,7 +115,10 @@ watch(() => props.open, async (open) => {
   >
     <slot />
     <template #content>
-      <div class="w-80 p-2 flex flex-col gap-2">
+      <div
+        class="w-80 p-2 flex flex-col gap-2"
+        @keydown="onKeydown"
+      >
         <UInput
           ref="searchInput"
           v-model="search"
@@ -41,9 +126,12 @@ watch(() => props.open, async (open) => {
           placeholder="Search colors..."
           icon="i-lucide-search"
         />
-        <div class="max-h-64 overflow-y-auto flex flex-col gap-1.5">
+        <div
+          ref="scrollContainer"
+          class="max-h-64 overflow-y-auto flex flex-col gap-1.5"
+        >
           <div
-            v-for="palette in filteredPalettes"
+            v-for="palette in paletteGroups"
             :key="palette.name"
           >
             <p class="text-xs text-(--ui-text-muted) mb-0.5 capitalize">
@@ -51,13 +139,17 @@ watch(() => props.open, async (open) => {
             </p>
             <div class="grid grid-cols-11 gap-0.5">
               <UTooltip
-                v-for="shade in palette.shades"
+                v-for="(shade, shadeIdx) in palette.shades"
                 :key="shade.shade"
                 :text="`${palette.name}-${shade.shade}`"
               >
                 <button
+                  :data-idx="palette.start + shadeIdx"
                   class="size-5 rounded-sm cursor-pointer transition-transform hover:scale-110"
-                  :class="modelValue === shade.hex ? 'ring-2 ring-offset-1 ring-(--ui-color-neutral-900) dark:ring-(--ui-color-neutral-100) scale-110' : ''"
+                  :class="[
+  modelValue === shade.hex ? 'ring-2 ring-offset-1 ring-(--ui-color-neutral-900) dark:ring-(--ui-color-neutral-100) scale-110' : '',
+  highlighted === palette.start + shadeIdx ? 'ring-2 ring-(--ui-primary) scale-110' : ''
+]"
                   :style="{ background: shade.hex }"
                   @click="selectHex(shade.hex)"
                 />

package/dist/runtime/components/editor/ADocSuggestMenu.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DocSuggestPopupState } from '../../composables/useDocSuggest.js';
+type __VLS_Props = {
+    state: DocSuggestPopupState;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/ADocSuggestMenu.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref, watch, nextTick } from "vue";
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const listRef = ref(null);
+const style = computed(() => {
+  const r = props.state.rect;
+  if (!r) return {};
+  return {
+    left: `${Math.round(r.left)}px`,
+    top: `${Math.round(r.bottom + 6)}px`
+  };
+});
+watch(() => props.state.index, async () => {
+  await nextTick();
+  listRef.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+});
+function pick(item) {
+  props.state.onSelect?.(item);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="state.active && state.rect && state.items.length"
+      ref="listRef"
+      class="fixed z-[60] w-72 max-h-72 overflow-y-auto overflow-x-hidden rounded-(--ui-radius) border border-(--ui-border) bg-(--ui-bg) shadow-lg p-1"
+      :style="style"
+      @mousedown.prevent
+    >
+      <div class="flex items-center gap-1.5 px-2 py-1 text-[11px] font-medium text-(--ui-text-muted)">
+        <UIcon
+          :name="state.mode === 'embed' ? 'i-lucide-file-box' : 'i-lucide-file-symlink'"
+          class="size-3.5 shrink-0"
+        />
+        <span>{{ state.mode === "embed" ? "Embed document" : "Link document" }}</span>
+      </div>
+
+      <button
+        v-for="(item, i) in state.items"
+        :key="item.id + ':' + i"
+        type="button"
+        :data-active="i === state.index"
+        class="w-full min-w-0 flex items-center gap-2 px-2 py-1.5 rounded-(--ui-radius) text-sm text-left text-(--ui-text)"
+        :class="i === state.index ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/60'"
+        @click="pick(item)"
+      >
+        <UIcon
+          :name="item.icon"
+          class="size-4 shrink-0"
+          :class="item.isCreate ? 'text-(--ui-primary)' : 'text-(--ui-text-dimmed)'"
+        />
+        <span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
+          <span
+            v-if="item.prefix"
+            class="text-xs text-(--ui-text-dimmed) truncate shrink-0 max-w-[45%]"
+          >{{ item.prefix }} /</span>
+          <span
+            class="truncate"
+            :class="item.isCreate ? 'text-(--ui-primary)' : ''"
+          >{{ item.label }}</span>
+        </span>
+      </button>
+    </div>
+  </Teleport>
+</template>

package/dist/runtime/components/editor/ADocSuggestMenu.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DocSuggestPopupState } from '../../composables/useDocSuggest.js';
+type __VLS_Props = {
+    state: DocSuggestPopupState;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AIconPickerPopover.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 import { LUCIDE_ICON_NAMES } from "../../utils/lucideIcons";
 const BATCH_SIZE = 80;
+const COLS = 8;
 const props = defineProps({
   modelValue: { type: String, required: true },
   open: { type: Boolean, required: true },
@@ -12,6 +13,7 @@ const search = ref("");
 const loadedCount = ref(BATCH_SIZE);
 const sentinel = ref(null);
 const scrollContainer = ref(null);
+const highlighted = ref(-1);
 const sourceIcons = computed(
   () => props.options?.length ? props.options : LUCIDE_ICON_NAMES
 );
@@ -26,6 +28,7 @@ const visibleIcons = computed(
 const hasMore = computed(() => loadedCount.value < filteredIcons.value.length);
 watch(search, () => {
   loadedCount.value = BATCH_SIZE;
+  highlighted.value = -1;
   scrollContainer.value?.scrollTo(0, 0);
 });
 let observer = null;
@@ -47,6 +50,7 @@ watch(() => props.open, async (open) => {
   if (open) {
     loadedCount.value = BATCH_SIZE;
     search.value = "";
+    highlighted.value = -1;
     await nextTick();
     searchInput.value?.$el?.querySelector("input")?.focus();
     await nextTick();
@@ -60,6 +64,73 @@ function selectIcon(name) {
   emit("update:modelValue", name);
   emit("update:open", false);
 }
+function scrollHighlightedIntoView() {
+  nextTick(() => {
+    scrollContainer.value?.querySelector(`[data-idx="${highlighted.value}"]`)?.scrollIntoView({ block: "nearest" });
+  });
+}
+function setHighlight(i) {
+  const max = visibleIcons.value.length - 1;
+  if (max < 0) return;
+  if (i > max && hasMore.value) {
+    loadedCount.value += BATCH_SIZE;
+    nextTick(() => setHighlight(i));
+    return;
+  }
+  highlighted.value = Math.max(0, Math.min(max, i));
+  scrollHighlightedIntoView();
+}
+function onKeydown(e) {
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      setHighlight(highlighted.value < 0 ? 0 : highlighted.value + COLS);
+      break;
+    case "ArrowUp":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      if (highlighted.value < COLS) {
+        highlighted.value = -1;
+        searchInput.value?.$el?.querySelector("input")?.focus();
+      } else {
+        setHighlight(highlighted.value - COLS);
+      }
+      break;
+    case "ArrowRight":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value + 1);
+      break;
+    case "ArrowLeft":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value - 1);
+      break;
+    case "Home":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(0);
+      break;
+    case "End":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(visibleIcons.value.length - 1);
+      break;
+    case "Enter": {
+      const idx = highlighted.value >= 0 ? highlighted.value : 0;
+      const name = visibleIcons.value[idx];
+      if (name) {
+        e.preventDefault();
+        selectIcon(name);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      emit("update:open", false);
+      break;
+  }
+}
 const searchInput = ref(null);
 </script>
 
@@ -71,7 +142,10 @@ const searchInput = ref(null);
   >
     <slot />
     <template #content>
-      <div class="w-72 p-2 flex flex-col gap-2">
+      <div
+        class="w-72 p-2 flex flex-col gap-2"
+        @keydown="onKeydown"
+      >
         <UInput
           ref="searchInput"
           v-model="search"
@@ -85,13 +159,17 @@ const searchInput = ref(null);
         >
           <div class="grid grid-cols-8 gap-0.5">
             <UTooltip
-              v-for="name in visibleIcons"
+              v-for="(name, idx) in visibleIcons"
               :key="name"
               :text="name"
             >
               <button
+                :data-idx="idx"
                 class="size-8 flex items-center justify-center rounded cursor-pointer hover:bg-(--ui-bg-elevated)"
-                :class="modelValue === name ? 'bg-(--ui-bg-accented)' : ''"
+                :class="[
+  modelValue === name ? 'bg-(--ui-bg-accented)' : '',
+  highlighted === idx ? 'ring-2 ring-(--ui-primary)' : ''
+]"
                 @click="selectIcon(name)"
               >
                 <UIcon

package/dist/runtime/components/editor/AMetaNumberStepper.d.vue.ts

@@ -0,0 +1,40 @@
+/**
+ * Edge-flush number stepper. The whole pill IS the control:
+ *  [ label ]  −  ‹value›  +  [ unit ]
+ *  • − / + flush ghost buttons (accent glyphs), press-and-hold to repeat
+ *  • centre value: type to edit, vertical drag (mouse + touch) to scrub
+ *  • scroll wheel to step (Shift = ×10), arrow keys to step (Shift = ×10)
+ *  • value flashes on programmatic change (step / drag / wheel) for feedback
+ */
+type __VLS_Props = {
+    modelValue?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    unit: string;
+    disabled: boolean;
+    modelValue: number | null;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/editor/AMetaNumberStepper.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { computed, ref, onBeforeUnmount } from "vue";
+const props = defineProps({
+  modelValue: { type: [Number, null], required: false, default: void 0 },
+  min: { type: Number, required: false, default: Number.NEGATIVE_INFINITY },
+  max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
+  step: { type: Number, required: false, default: 1 },
+  unit: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const PX_PER_STEP = 8;
+const valueEl = ref(null);
+const focused = ref(false);
+const dragging = ref(false);
+const flash = ref(false);
+const draft = ref("");
+const current = computed(() => typeof props.modelValue === "number" && Number.isFinite(props.modelValue) ? props.modelValue : 0);
+const atMin = computed(() => current.value <= props.min);
+const atMax = computed(() => current.value >= props.max);
+const displayValue = computed(
+  () => focused.value ? draft.value : typeof props.modelValue === "number" ? String(props.modelValue) : ""
+);
+function clamp(n) {
+  return Math.max(props.min, Math.min(props.max, n));
+}
+function pulse() {
+  flash.value = false;
+  requestAnimationFrame(() => {
+    flash.value = true;
+  });
+}
+function commit(n, withFlash = true) {
+  const next = clamp(n);
+  if (next === props.modelValue) return;
+  emit("update:modelValue", next);
+  if (withFlash) pulse();
+}
+function stepBy(dir, multiplier = 1) {
+  if (props.disabled) return;
+  commit(current.value + dir * props.step * multiplier);
+}
+let holdTimer = null;
+let repeatTimer = null;
+function clearHold() {
+  if (holdTimer) {
+    clearTimeout(holdTimer);
+    holdTimer = null;
+  }
+  if (repeatTimer) {
+    clearInterval(repeatTimer);
+    repeatTimer = null;
+  }
+  window.removeEventListener("pointerup", clearHold);
+}
+function onStepPress(dir) {
+  if (props.disabled) return;
+  stepBy(dir);
+  holdTimer = setTimeout(() => {
+    repeatTimer = setInterval(() => stepBy(dir), 60);
+  }, 400);
+  window.addEventListener("pointerup", clearHold, { once: true });
+}
+function onWheel(e) {
+  if (props.disabled) return;
+  const dir = -Math.sign(e.deltaY);
+  if (!dir) return;
+  stepBy(dir, e.shiftKey ? 10 : 1);
+}
+let dragStartY = 0;
+let dragStartVal = 0;
+let moved = false;
+function onValuePointerDown(e) {
+  if (props.disabled) return;
+  dragStartY = e.clientY;
+  dragStartVal = current.value;
+  moved = false;
+  window.addEventListener("pointermove", onValuePointerMove);
+  window.addEventListener("pointerup", onValuePointerUp, { once: true });
+}
+function onValuePointerMove(e) {
+  const dy = dragStartY - e.clientY;
+  if (!moved && Math.abs(dy) < 4) return;
+  if (!moved) {
+    moved = true;
+    dragging.value = true;
+    valueEl.value?.blur();
+  }
+  e.preventDefault();
+  const steps = Math.round(dy / PX_PER_STEP);
+  commit(dragStartVal + steps * props.step);
+}
+function onValuePointerUp() {
+  window.removeEventListener("pointermove", onValuePointerMove);
+  dragging.value = false;
+  if (!moved) {
+    valueEl.value?.focus();
+    valueEl.value?.select();
+  }
+}
+function onFocus() {
+  focused.value = true;
+  draft.value = typeof props.modelValue === "number" ? String(props.modelValue) : "";
+}
+function onInput(e) {
+  draft.value = e.target.value;
+  const trimmed = draft.value.trim();
+  if (trimmed === "") return;
+  const n = Number(trimmed);
+  if (Number.isFinite(n)) commit(n, false);
+}
+function onBlur() {
+  focused.value = false;
+  const trimmed = draft.value.trim();
+  if (trimmed === "") {
+    if (props.modelValue !== void 0) emit("update:modelValue", void 0);
+    return;
+  }
+  const n = Number(trimmed);
+  if (Number.isFinite(n)) commit(n, false);
+}
+function onKeydown(e) {
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    stepBy(1, e.shiftKey ? 10 : 1);
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    stepBy(-1, e.shiftKey ? 10 : 1);
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    valueEl.value?.blur();
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    draft.value = typeof props.modelValue === "number" ? String(props.modelValue) : "";
+    valueEl.value?.blur();
+  }
+}
+onBeforeUnmount(() => {
+  clearHold();
+  window.removeEventListener("pointermove", onValuePointerMove);
+});
+</script>
+
+<template>
+  <div
+    class="meta-number-stepper flex items-center h-7 rounded-md border border-(--ui-border) text-sm overflow-hidden select-none transition-shadow"
+    :class="{
+  'opacity-60 pointer-events-none': disabled,
+  'ring-1 ring-(--ui-primary) ring-inset': dragging || focused
+}"
+    @mousedown.stop
+    @touchstart.stop
+    @wheel.prevent="onWheel"
+  >
+    <span
+      v-if="$slots.label"
+      class="pl-2.5 pr-1 shrink-0 flex items-center"
+    >
+      <slot name="label" />
+    </span>
+
+    <button
+      type="button"
+      tabindex="-1"
+      class="h-full px-2 flex items-center justify-center text-(--ui-primary) hover:bg-(--ui-bg-elevated) active:scale-90 transition-transform disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
+      :disabled="disabled || atMin"
+      aria-label="Decrease"
+      @pointerdown.stop.prevent="onStepPress(-1)"
+    >
+      <UIcon
+        name="i-lucide-minus"
+        class="size-3.5"
+      />
+    </button>
+
+    <input
+      ref="valueEl"
+      type="text"
+      inputmode="decimal"
+      class="meta-number-value flex-1 min-w-0 w-10 bg-transparent text-center outline-none tabular-nums cursor-ns-resize"
+      :class="{ 'meta-number-value--flash': flash }"
+      :value="displayValue"
+      :disabled="disabled"
+      @pointerdown="onValuePointerDown"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onInput"
+      @keydown="onKeydown"
+    >
+
+    <button
+      type="button"
+      tabindex="-1"
+      class="h-full px-2 flex items-center justify-center text-(--ui-primary) hover:bg-(--ui-bg-elevated) active:scale-90 transition-transform disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
+      :disabled="disabled || atMax"
+      aria-label="Increase"
+      @pointerdown.stop.prevent="onStepPress(1)"
+    >
+      <UIcon
+        name="i-lucide-plus"
+        class="size-3.5"
+      />
+    </button>
+
+    <span
+      v-if="unit"
+      class="pr-2.5 pl-0.5 shrink-0 text-(--ui-text-muted) text-xs"
+    >{{ unit }}</span>
+  </div>
+</template>
+
+<style scoped>
+.meta-number-value{touch-action:none}.meta-number-value::-webkit-inner-spin-button,.meta-number-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.meta-number-value--flash{animation:meta-number-flash .22s ease-out}@keyframes meta-number-flash{0%{color:var(--ui-primary);transform:scale(1.22)}to{color:inherit;transform:scale(1)}}
+</style>

package/dist/runtime/components/editor/AMetaNumberStepper.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Edge-flush number stepper. The whole pill IS the control:
+ *  [ label ]  −  ‹value›  +  [ unit ]
+ *  • − / + flush ghost buttons (accent glyphs), press-and-hold to repeat
+ *  • centre value: type to edit, vertical drag (mouse + touch) to scrub
+ *  • scroll wheel to step (Shift = ×10), arrow keys to step (Shift = ×10)
+ *  • value flashes on programmatic change (step / drag / wheel) for feedback
+ */
+type __VLS_Props = {
+    modelValue?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    unit: string;
+    disabled: boolean;
+    modelValue: number | null;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/renderers/ACalendarRenderer.vue

@@ -80,7 +80,13 @@ function onCreateEvent(payload) {
   }
 }
 const dragPreviewTime = ref(null);
+const bodyRef = ref(null);
 const { dragId, dragOverContainer, handlePointerDown } = useTouchDrag({
+  edgeNav: {
+    el: bodyRef,
+    onPrev: () => cal.prevPeriod(),
+    onNext: () => cal.nextPeriod()
+  },
   onMoveToContainer: (eventId, dateStr) => {
     if (!props.editable) return;
     const entry = tree.entries.value.find((e) => e.id === eventId);
@@ -204,7 +210,7 @@ defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="flex-1 min-h-0 flex flex-col relative">
+  <div ref="bodyRef" class="flex-1 min-h-0 flex flex-col relative">
     <!-- Toolbar -->
     <ACalendarToolbar
       :view-mode="cal.viewMode.value"