@leavepulse/ui 0.28.0 → 0.28.2

package/dist/assets/LpDropzone-DVDC-ABU.css

@@ -0,0 +1,52 @@
+
+.lp-dropzone__frame rect[data-v-996dbce9] {
+  stroke: var(--color-line);
+  transition: stroke var(--duration-fast) linear;
+}
+.lp-dropzone:hover .lp-dropzone__frame rect[data-v-996dbce9] {
+  stroke: var(--color-line-strong);
+}
+
+/* Marching ants, and only while a drag is in flight. At rest this would be a
+   loop nobody asked for, running for as long as the page is open and competing
+   with every other thing on it; under a drag it is the answer to "can I let go
+   here". One dash period per cycle, so the travel is continuous rather than
+   jumping back at the seam. */
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-996dbce9] {
+  stroke: var(--color-brand);
+  animation: lp-dropzone-ants-996dbce9 500ms linear infinite;
+}
+@keyframes lp-dropzone-ants-996dbce9 {
+to {
+    stroke-dashoffset: -11;
+}
+}
+
+/* The dashes fade in and the block settles up a few pixels. */
+.lp-dropzone[data-v-996dbce9] {
+  animation: lp-dropzone-in-996dbce9 var(--duration-slow) var(--ease-settle) both;
+}
+.lp-dropzone--waiting[data-v-996dbce9] {
+  opacity: 0;
+  animation: none;
+}
+@keyframes lp-dropzone-in-996dbce9 {
+from {
+    opacity: 0;
+    transform: translateY(6px);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-dropzone[data-v-996dbce9],
+  .lp-dropzone--waiting[data-v-996dbce9] {
+    opacity: 1;
+    transform: none;
+    animation: none;
+}
+
+  /* The ants stop, the colour stays: the brand stroke is what says "drop
+     here", and it says it standing still. */
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-996dbce9] {
+    animation: none;
+}
+}

package/dist/assets/LpImageEditor-DqP5JKCy.css

@@ -0,0 +1,25 @@
+
+/* The picture settles into the frame instead of appearing in it. Scale rather
+   than a slide: the frame is the fixed thing here and the image lives inside
+   it, so anything that moved would read as a crop that had shifted. */
+.lp-editor__image[data-v-7d404124] {
+  animation: lp-editor-in-7d404124 var(--duration-slow) var(--ease-settle) both;
+}
+.lp-editor__image--waiting[data-v-7d404124] {
+  opacity: 0;
+  animation: none;
+}
+@keyframes lp-editor-in-7d404124 {
+from {
+    opacity: 0;
+    scale: 1.04;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-editor__image[data-v-7d404124],
+  .lp-editor__image--waiting[data-v-7d404124] {
+    opacity: 1;
+    scale: 1;
+    animation: none;
+}
+}

package/dist/chunks/{LpLogViewer-CcQ3s3Fp.js → LpLogViewer-CKmEQYnm.js}

@@ -1,9 +1,13 @@
-import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, normalizeClass, createTextVNode, Transition } from "vue";
+import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, Transition, withCtx, toDisplayString, createCommentVNode, normalizeStyle, createElementVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, createTextVNode } from "vue";
 import { prefersReducedMotion } from "../composables/easing.js";
+import { useHotkeys } from "../composables/useHotkeys.js";
 import { _ as _sfc_main$3 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpScrollArea-D8xyKXcF.js";
-const _hoisted_1 = { class: "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed" };
+const _hoisted_1 = {
+  key: 0,
+  class: "pointer-events-none absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-brand px-2.5 py-1 text-[11px] font-medium text-ink-inverse"
+};
 const _hoisted_2 = {
   key: 0,
   class: "flex h-full flex-col items-center justify-center gap-1 px-4 py-10 text-center"
@@ -58,6 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     tail: { type: Boolean, default: true },
     height: { default: "20rem" },
     emptyLabel: { default: "No logs yet" },
+    frozenLabel: { default: "Held — release Ctrl to resume" },
     loadingOlder: { type: Boolean },
     loadOlder: { type: Boolean },
     rowMenu: { type: Boolean, default: true },
@@ -132,8 +137,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return msg === line.message && time === line.time && level === line.level && source === line.source ? line : { ...line, message: msg, time, level, source };
     }
+    const root = ref(null);
+    const frozen = ref(false);
+    const frozenLines = shallowRef(null);
+    const sourceLines = computed(() => frozenLines.value ?? props.lines);
+    function freeze() {
+      if (!hovered.value && !focusWithin()) return false;
+      if (frozen.value) return true;
+      frozenLines.value = props.lines;
+      frozen.value = true;
+      return true;
+    }
+    function thaw() {
+      frozen.value = false;
+      frozenLines.value = null;
+    }
+    const hovered = ref(false);
+    function focusWithin() {
+      const el = root.value;
+      return !!el && el.contains(document.activeElement);
+    }
+    useHotkeys(() => [
+      { key: "control", allowInInput: true, handler: freeze },
+      { key: "meta", allowInInput: true, handler: freeze }
+    ]);
+    function onKeyup(event) {
+      if (event.key === "Control" || event.key === "Meta") thaw();
+    }
+    onMounted(() => {
+      window.addEventListener("keyup", onKeyup);
+      window.addEventListener("blur", thaw);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("keyup", onKeyup);
+      window.removeEventListener("blur", thaw);
+    });
     const parsedLines = computed(
-      () => props.parse ? props.lines.map(parseLine) : props.lines
+      () => props.parse ? sourceLines.value.map(parseLine) : sourceLines.value
     );
     const visibleLines = computed(() => {
       const term = props.filterMatches ? props.highlight?.trim().toLowerCase() : "";
@@ -350,7 +390,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "move-class": "transition-transform duration-200 ease-[var(--ease-emphasized)]"
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        tabindex: "-1",
+        class: normalizeClass(["relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed", frozen.value ? "ring-1 ring-brand" : ""]),
+        onPointerenter: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
+        onPointerleave: _cache[1] || (_cache[1] = ($event) => hovered.value = false)
+      }, [
+        createVNode(Transition, {
+          "enter-active-class": "transition duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+          "leave-active-class": "transition duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+          "enter-from-class": "-translate-y-1 opacity-0",
+          "leave-to-class": "-translate-y-1 opacity-0"
+        }, {
+          default: withCtx(() => [
+            frozen.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.frozenLabel), 1)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
         createVNode(_sfc_main$1, {
           ref_key: "scrollRef",
           ref: scrollRef,
@@ -370,7 +428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 14,
                   class: "animate-spin"
                 }),
-                _cache[0] || (_cache[0] = createElementVNode("span", { class: "text-[11px]" }, "loading older…", -1))
+                _cache[2] || (_cache[2] = createElementVNode("span", { class: "text-[11px]" }, "loading older…", -1))
               ])) : createCommentVNode("", true),
               createVNode(_sfc_main$3, {
                 items: menuItems.value,
@@ -398,7 +456,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: normalizeClass(["absolute inset-y-0 left-0 w-0.5", metaFor(line.level).rail]),
                             "aria-hidden": "true"
                           }, null, 2),
-                          _cache[1] || (_cache[1] = createElementVNode("span", {
+                          _cache[3] || (_cache[3] = createElementVNode("span", {
                             class: "mr-2 w-0.5 shrink-0",
                             "aria-hidden": "true"
                           }, null, -1)),
@@ -468,13 +526,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 14,
                   class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:translate-y-0.5"
                 }),
-                _cache[2] || (_cache[2] = createTextVNode(" Jump to latest ", -1))
+                _cache[4] || (_cache[4] = createTextVNode(" Jump to latest ", -1))
               ])
             ])) : createCommentVNode("", true)
           ]),
           _: 1
         })
-      ]);
+      ], 34);
     };
   }
 });

package/dist/chunks/{LpNumberField-B3JuQFol.js → LpNumberField-NPE8Bumx.js}

@@ -1,6 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from "vue";
+import { defineComponent, useId, openBlock, createBlock, unref, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpNumberField",
   props: {
@@ -8,10 +9,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     min: {},
     max: {},
     step: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    unit: {}
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const unitId = useId();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NumberFieldRoot), {
         "model-value": __props.modelValue ?? void 0,
@@ -34,7 +37,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(NumberFieldInput), { class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" }),
+          createVNode(unref(NumberFieldInput), {
+            "aria-describedby": __props.unit ? unref(unitId) : void 0,
+            class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+          }, null, 8, ["aria-describedby"]),
+          __props.unit ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: unref(unitId),
+            class: "shrink-0 pr-1 text-xs text-muted"
+          }, toDisplayString(__props.unit), 9, _hoisted_1)) : createCommentVNode("", true),
           createVNode(unref(NumberFieldIncrement), { class: "group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40" }, {
             default: withCtx(() => [
               createVNode(_sfc_main$1, {

package/dist/chunks/{LpProgress-DoIP4jQR.js → LpProgress-Btq5W4Ut.js}

@@ -36,19 +36,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const eased = ref(props.animateOnMount ? 0 : 1);
+    const shown = ref(props.animateOnMount ? 0 : props.value);
     let raf = 0;
-    let from = props.animateOnMount ? 0 : props.value;
-    const runSweep = (ms) => {
+    const runSweep = (to, ms) => {
       if (raf) cancelAnimationFrame(raf);
-      if (prefersReducedMotion() || ms <= 0) {
-        eased.value = 1;
+      const from = shown.value;
+      if (prefersReducedMotion() || ms <= 0 || from === to) {
+        shown.value = to;
         return;
       }
       const t0 = performance.now();
       const step = (now) => {
         const t = Math.min(1, (now - t0) / ms);
-        eased.value = easeOut(t);
+        shown.value = from + (to - from) * easeOut(t);
         raf = t < 1 ? requestAnimationFrame(step) : 0;
       };
       raf = requestAnimationFrame(step);
@@ -60,17 +60,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const bindReveal = (instance) => {
       revealAnchor.value = instance?.$el ?? null;
     };
-    watch(revealed, (visible) => {
-      if (visible && props.animateOnMount) runSweep(props.duration);
-    }, { immediate: true });
+    watch(
+      revealed,
+      (visible) => {
+        if (visible && props.animateOnMount) runSweep(props.value, props.duration);
+      },
+      { immediate: true }
+    );
     watch(
       () => [props.value, props.max],
-      () => {
-        from = shown.value;
-        runSweep(props.duration);
-      }
+      () => runSweep(props.value, props.duration)
     );
-    const shown = computed(() => from + (props.value - from) * eased.value);
     const pct = computed(
       () => Math.max(0, Math.min(100, shown.value / props.max * 100))
     );

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

package/dist/components/LpDropzone.vue.d.ts

@@ -0,0 +1,66 @@
+type __VLS_Props = {
+    /** Same syntax as the input's: "image/*", ".yaml,.yml". */
+    accept?: string;
+    /** Take more than one at a time. */
+    multiple?: boolean;
+    disabled?: boolean;
+    /**
+     * Also accept a paste anywhere on the page, not only while focused.
+     * Off by default: two zones both listening would each take the same
+     * screenshot, and a page with one obvious target is the case for it.
+     */
+    pasteTarget?: boolean;
+    /** Largest file accepted, in bytes. Bigger ones are rejected, not silently
+     *  dropped — a picture that vanishes reads as a broken uploader. */
+    maxBytes?: number;
+    icon?: string;
+    title?: string;
+    hint?: string;
+    /**
+     * How the well sits against what holds it. A drop target reads as a hole
+     * in the surface, not a tile on top of it, so the default is darker than
+     * the card — which is what a dashed border is already suggesting.
+     * `flush` for a zone that fills a panel of its own, `soft` when it sits
+     * directly on the page background and needs to lift off it instead.
+     */
+    tone?: "sunken" | "flush" | "soft";
+    /** Draw the entrance when the zone first comes into view. */
+    animate?: boolean;
+};
+declare var __VLS_1: {
+    over: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    browse: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    files: (files: File[]) => any;
+    rejected: (reason: {
+        file: File;
+        cause: "type" | "size";
+    }[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFiles?: ((files: File[]) => any) | undefined;
+    onRejected?: ((reason: {
+        file: File;
+        cause: "type" | "size";
+    }[]) => any) | undefined;
+}>, {
+    title: string;
+    animate: boolean;
+    icon: string;
+    accept: string;
+    multiple: boolean;
+    hint: string;
+    tone: "sunken" | "flush" | "soft";
+}, {}, {}, {}, 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/components/LpDropzone.vue.js

@@ -0,0 +1,163 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, withModifiers, normalizeClass, unref, createElementVNode, renderSlot, createVNode, toDisplayString, createCommentVNode } from "vue";
+import { useReveal } from "../composables/useReveal.js";
+import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpDropzone-DVDC-ABU.css';const _hoisted_1 = ["disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "text-xs text-muted"
+};
+const _hoisted_4 = ["accept", "multiple", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpDropzone",
+  props: {
+    accept: { default: "" },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean },
+    pasteTarget: { type: Boolean },
+    maxBytes: {},
+    icon: { default: "lucide:upload" },
+    title: { default: "" },
+    hint: { default: "" },
+    tone: { default: "sunken" },
+    animate: { type: Boolean, default: true }
+  },
+  emits: ["files", "rejected"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const TONES = {
+      sunken: "bg-surface",
+      flush: "bg-surface-raised",
+      soft: "bg-surface-soft"
+    };
+    const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate });
+    const emit = __emit;
+    const input = ref(null);
+    const over = ref(false);
+    function onDragOver(event) {
+      if (props.disabled) return;
+      over.value = true;
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+    }
+    function onDragLeave(event) {
+      const to = event.relatedTarget;
+      if (to && event.currentTarget.contains(to)) return;
+      over.value = false;
+    }
+    function matches(file) {
+      if (!props.accept) return true;
+      return props.accept.split(",").some((rule) => {
+        const pattern = rule.trim().toLowerCase();
+        if (!pattern) return false;
+        if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+        if (pattern.endsWith("/*")) return file.type.startsWith(pattern.slice(0, -1));
+        return file.type.toLowerCase() === pattern;
+      });
+    }
+    function take(list) {
+      if (props.disabled || !list) return;
+      const all = Array.from(list);
+      const kept = [];
+      const refused = [];
+      for (const file of all) {
+        if (!matches(file)) refused.push({ file, cause: "type" });
+        else if (props.maxBytes && file.size > props.maxBytes) {
+          refused.push({ file, cause: "size" });
+        } else kept.push(file);
+      }
+      const bounded = props.multiple ? kept : kept.slice(0, 1);
+      if (refused.length) emit("rejected", refused);
+      if (bounded.length) emit("files", bounded);
+    }
+    function onDrop(event) {
+      over.value = false;
+      take(event.dataTransfer?.files);
+    }
+    function onPaste(event) {
+      const files = Array.from(event.clipboardData?.files ?? []);
+      if (!files.length) return;
+      event.preventDefault();
+      take(files);
+    }
+    function onPicked(event) {
+      const el = event.target;
+      take(el.files);
+      el.value = "";
+    }
+    function windowPaste(event) {
+      if (props.disabled) return;
+      const target = event.target;
+      if (target?.closest("input, textarea, [contenteditable]")) return;
+      onPaste(event);
+    }
+    onMounted(() => {
+      if (props.pasteTarget) window.addEventListener("paste", windowPaste);
+    });
+    onBeforeUnmount(() => window.removeEventListener("paste", windowPaste));
+    __expose({ browse: () => input.value?.click() });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        ref_key: "revealAnchor",
+        ref: revealAnchor,
+        type: "button",
+        disabled: __props.disabled,
+        class: normalizeClass(["lp-dropzone relative flex w-full flex-col items-center gap-2 rounded-card px-6 py-8 text-center transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55", [
+          over.value ? "bg-brand-soft" : TONES[__props.tone],
+          over.value ? "lp-dropzone--over" : "",
+          __props.animate && !unref(revealed) ? "lp-dropzone--waiting" : ""
+        ]]),
+        onClick: _cache[1] || (_cache[1] = ($event) => input.value?.click()),
+        onPaste,
+        onDragenter: withModifiers(onDragOver, ["prevent"]),
+        onDragover: withModifiers(onDragOver, ["prevent"]),
+        onDragleave: onDragLeave,
+        onDrop: withModifiers(onDrop, ["prevent"])
+      }, [
+        _cache[2] || (_cache[2] = createElementVNode("svg", {
+          "aria-hidden": "true",
+          class: "lp-dropzone__frame pointer-events-none absolute inset-0 size-full"
+        }, [
+          createElementVNode("rect", {
+            x: "0.5",
+            y: "0.5",
+            width: "calc(100% - 1px)",
+            height: "calc(100% - 1px)",
+            rx: "var(--radius-card)",
+            fill: "none",
+            "stroke-width": "1",
+            "stroke-dasharray": "6 5"
+          })
+        ], -1)),
+        renderSlot(_ctx.$slots, "default", { over: over.value }, () => [
+          createVNode(_sfc_main$1, {
+            name: __props.icon,
+            size: 22,
+            class: normalizeClass(["text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", over.value ? "scale-110 text-brand" : ""])
+          }, null, 8, ["name", "class"]),
+          __props.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          __props.hint ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+        ], true),
+        createElementVNode("input", {
+          ref_key: "input",
+          ref: input,
+          type: "file",
+          class: "hidden",
+          accept: __props.accept || void 0,
+          multiple: __props.multiple,
+          disabled: __props.disabled,
+          onChange: onPicked,
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, null, 40, _hoisted_4)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const LpDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-996dbce9"]]);
+export {
+  LpDropzone as default
+};

package/dist/components/LpImageEditor.vue.d.ts

@@ -0,0 +1,58 @@
+type __VLS_Props = {
+    /** The picture to work on. */
+    file: File | Blob;
+    /**
+     * Shape of the crop box.
+     *
+     * The named ones are shorthand for the common cases; a NUMBER is the real
+     * interface — `:aspect="2.35"` for anamorphic, `:aspect="0.8"` for a
+     * shelf label — so a consumer whose shape is not on the list is not stuck
+     * choosing the nearest wrong one. "free" keeps the source's own
+     * proportions and crops only what panning and zoom leave outside.
+     */
+    aspect?: "free" | "square" | "4:3" | "3:4" | "16:9" | number;
+    /** Longest edge of the exported image. Larger sources are scaled down. */
+    maxEdge?: number;
+    /** JPEG quality of the export. */
+    quality?: number;
+    /**
+     * Labels for the toolbar. Defaulted in English rather than left blank: an
+     * icon button with no accessible name is announced as "button", and the
+     * kit cannot reach the consumer's translations. Apps with i18n pass their
+     * own strings.
+     */
+    labels?: Partial<Record<"rotateLeft" | "rotateRight" | "zoomIn" | "zoomOut" | "reset" | "canvas", string>>;
+    /** Fade the picture in when the editor first comes into view. */
+    animate?: boolean;
+};
+declare function reset(): void;
+declare function exportImage(): Promise<Blob | null>;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    export: typeof exportImage;
+    reset: typeof reset;
+    edited: import('vue').ComputedRef<boolean>;
+    shortcuts: readonly [{
+        readonly keys: readonly ["←", "→", "↑", "↓"];
+        readonly label: "Pan (Shift for a bigger step)";
+    }, {
+        readonly keys: readonly ["+", "−"];
+        readonly label: "Zoom";
+    }, {
+        readonly keys: readonly ["R"];
+        readonly label: "Rotate a quarter turn (Shift reverses)";
+    }, {
+        readonly keys: readonly ["Alt", "wheel"];
+        readonly label: "Turn freely (Shift snaps to 15°)";
+    }, {
+        readonly keys: readonly ["0"];
+        readonly label: "Reset";
+    }];
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    animate: boolean;
+    labels: Partial<Record<"rotateLeft" | "rotateRight" | "zoomIn" | "zoomOut" | "reset" | "canvas", string>>;
+    aspect: "free" | "square" | "4:3" | "3:4" | "16:9" | number;
+    maxEdge: number;
+    quality: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;