@leavepulse/ui 0.28.1 → 0.28.3

package/dist/components/LpImageEditor.vue.js

@@ -0,0 +1,357 @@
+import { defineComponent, computed, shallowRef, ref, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, unref, withModifiers, normalizeStyle, normalizeClass, createCommentVNode, createVNode, Transition, withCtx, Fragment, renderList, toDisplayString, createBlock, createTextVNode } from "vue";
+import { useHotkeys } from "../composables/useHotkeys.js";
+import { useReveal } from "../composables/useReveal.js";
+import { useZoomPan } from "../composables/useZoomPan.js";
+import { _ as _sfc_main$1 } from "../chunks/LpButton-5VXXCjwF.js";
+import "reka-ui";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpImageEditor-DqP5JKCy.css';const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
+  key: 0,
+  class: "pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-3"
+};
+const _hoisted_4 = { class: "flex items-center gap-1.5 text-muted" };
+const _hoisted_5 = { class: "flex items-center rounded-control bg-surface-soft p-0.5" };
+const _hoisted_6 = { class: "flex items-center rounded-control bg-surface-soft p-0.5" };
+const _hoisted_7 = { class: "min-w-10 text-center text-xs tabular-nums" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpImageEditor",
+  props: {
+    file: {},
+    aspect: { default: "free" },
+    maxEdge: { default: 2400 },
+    quality: { default: 0.9 },
+    labels: { default: () => ({}) },
+    animate: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate });
+    const text = computed(() => ({
+      rotateLeft: "Rotate left",
+      rotateRight: "Rotate right",
+      zoomIn: "Zoom in",
+      zoomOut: "Zoom out",
+      reset: "Reset",
+      canvas: "Crop area — arrows pan, +/− zoom, R rotates, Alt+wheel turns freely",
+      ...props.labels
+    }));
+    const ASPECTS = {
+      free: null,
+      square: 1,
+      "4:3": 4 / 3,
+      "3:4": 3 / 4,
+      "16:9": 16 / 9
+    };
+    const source = shallowRef(null);
+    const objectUrl = ref("");
+    const rotation = ref(0);
+    const viewport = ref(null);
+    const zoom = useZoomPan({ min: 1, max: 6 });
+    watch(viewport, (el) => zoom.setViewport(el));
+    const upright = computed(() => (rotation.value % 360 + 360) % 360);
+    const edited = computed(() => upright.value !== 0 || zoom.scale.value !== 1);
+    watch(
+      () => props.file,
+      async (file) => {
+        revoke();
+        rotation.value = 0;
+        zoom.reset();
+        objectUrl.value = URL.createObjectURL(file);
+        source.value = await decode(file, objectUrl.value);
+      },
+      { immediate: true }
+    );
+    async function decode(file, url) {
+      try {
+        return await createImageBitmap(file);
+      } catch {
+        return await new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.onerror = () => resolve(null);
+          img.src = url;
+        });
+      }
+    }
+    const sourceSize = computed(() => {
+      const s = source.value;
+      if (!s) return null;
+      return s instanceof HTMLImageElement ? { width: s.naturalWidth, height: s.naturalHeight } : { width: s.width, height: s.height };
+    });
+    function revoke() {
+      if (objectUrl.value) URL.revokeObjectURL(objectUrl.value);
+      objectUrl.value = "";
+      if (source.value instanceof ImageBitmap) source.value.close();
+      source.value = null;
+    }
+    onBeforeUnmount(revoke);
+    function rotate(by) {
+      rotation.value += by;
+      const { x, y } = zoom.offset.value;
+      const quarters = (by / 90 % 4 + 4) % 4;
+      let next = { x, y };
+      for (let i = 0; i < quarters; i++) next = { x: -next.y, y: next.x };
+      zoom.setView(next);
+    }
+    function reset() {
+      rotation.value = 0;
+      zoom.reset();
+    }
+    const boxRatio = computed(() => {
+      if (typeof props.aspect === "number" && props.aspect > 0) return props.aspect;
+      const ratio = ASPECTS[props.aspect];
+      if (ratio) return ratio;
+      const size = sourceSize.value;
+      if (!size) return 1;
+      const turned = upright.value % 180 !== 0;
+      const w = turned ? size.height : size.width;
+      const h = turned ? size.width : size.height;
+      return w / h;
+    });
+    const frameStyle = computed(() => ({ aspectRatio: String(boxRatio.value) }));
+    const imageStyle = computed(() => ({
+      ...zoom.style.value,
+      // Rotation sits innermost, after the composable's scale and translate, so a
+      // drag still moves the picture the way the pointer went once it is turned.
+      transform: `${zoom.style.value.transform} rotate(${rotation.value}deg)`,
+      // A quarter turn travels. Snapping is how you lose track of which way the
+      // picture went, and the rest of the kit moves — a control that jumps reads
+      // as a different component. The composable suppresses its own transition
+      // while a drag is in flight, and that wins here too.
+      transition: zoom.style.value.transition ?? `transform var(--duration-medium) var(--ease-emphasized)`
+    }));
+    async function exportImage() {
+      const picture = source.value;
+      const size = sourceSize.value;
+      const frame = viewport.value;
+      if (!picture || !size || !frame) return null;
+      if (!edited.value && props.aspect === "free") return null;
+      const turned = upright.value % 180 !== 0;
+      const uprightW = turned ? size.height : size.width;
+      const uprightH = turned ? size.width : size.height;
+      const cover = Math.max(frame.clientWidth / uprightW, frame.clientHeight / uprightH);
+      const shown = cover * zoom.scale.value;
+      const cropW = Math.min(uprightW, frame.clientWidth / shown);
+      const cropH = Math.min(uprightH, frame.clientHeight / shown);
+      const centreX = clamp(
+        uprightW / 2 - zoom.offset.value.x / cover,
+        cropW / 2,
+        uprightW - cropW / 2
+      );
+      const centreY = clamp(
+        uprightH / 2 - zoom.offset.value.y / cover,
+        cropH / 2,
+        uprightH - cropH / 2
+      );
+      const scale = Math.min(1, props.maxEdge / Math.max(cropW, cropH));
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.max(1, Math.round(cropW * scale));
+      canvas.height = Math.max(1, Math.round(cropH * scale));
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return null;
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(upright.value * Math.PI / 180);
+      ctx.scale(scale, scale);
+      const readW = turned ? cropH : cropW;
+      const readH = turned ? cropW : cropH;
+      const readX = (turned ? centreY : centreX) - readW / 2;
+      const readY = (turned ? centreX : centreY) - readH / 2;
+      ctx.drawImage(picture, readX, readY, readW, readH, -readW / 2, -readH / 2, readW, readH);
+      return await new Promise(
+        (resolve) => canvas.toBlob(resolve, "image/jpeg", props.quality)
+      );
+    }
+    function clamp(value, low, high) {
+      return Math.min(Math.max(value, low), Math.max(low, high));
+    }
+    function onWheel(event) {
+      if (event.altKey) {
+        event.preventDefault();
+        const step = event.shiftKey ? 15 : 1;
+        rotation.value += Math.sign(event.deltaY) * step;
+        return;
+      }
+      zoom.onWheel(event);
+    }
+    function pan(dx, dy, shift) {
+      const step = shift ? 40 : 10;
+      const { x, y } = zoom.offset.value;
+      zoom.setView({ x: x + dx * step, y: y + dy * step });
+    }
+    useHotkeys(
+      () => [
+        { key: "arrowleft", handler: () => pan(1, 0, false) },
+        { key: "arrowleft", shift: true, handler: () => pan(1, 0, true) },
+        { key: "arrowright", handler: () => pan(-1, 0, false) },
+        { key: "arrowright", shift: true, handler: () => pan(-1, 0, true) },
+        { key: "arrowup", handler: () => pan(0, 1, false) },
+        { key: "arrowup", shift: true, handler: () => pan(0, 1, true) },
+        { key: "arrowdown", handler: () => pan(0, -1, false) },
+        { key: "arrowdown", shift: true, handler: () => pan(0, -1, true) },
+        { key: "+", handler: () => zoom.zoomBy(1.3) },
+        { key: "=", handler: () => zoom.zoomBy(1.3) },
+        { key: "-", handler: () => zoom.zoomBy(1 / 1.3) },
+        { key: "r", code: "KeyR", handler: () => rotate(90) },
+        // Shift reverses it, the way a modifier reverses a direction elsewhere.
+        { key: "r", code: "KeyR", shift: true, handler: () => rotate(-90) },
+        { key: "0", code: "Digit0", handler: reset }
+      ],
+      { scope: viewport }
+    );
+    const SHORTCUTS = [
+      { keys: ["←", "→", "↑", "↓"], label: "Pan (Shift for a bigger step)" },
+      { keys: ["+", "−"], label: "Zoom" },
+      { keys: ["R"], label: "Rotate a quarter turn (Shift reverses)" },
+      { keys: ["Alt", "wheel"], label: "Turn freely (Shift snaps to 15°)" },
+      { keys: ["0"], label: "Reset" }
+    ];
+    __expose({ export: exportImage, reset, edited, shortcuts: SHORTCUTS });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "revealAnchor",
+        ref: revealAnchor,
+        class: "flex flex-col gap-3"
+      }, [
+        createElementVNode("div", {
+          ref_key: "viewport",
+          ref: viewport,
+          tabindex: "0",
+          role: "application",
+          "aria-label": text.value.canvas,
+          class: "relative w-full overflow-hidden rounded-card border border-line bg-surface-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          style: normalizeStyle(frameStyle.value),
+          onWheel: withModifiers(onWheel, ["prevent"]),
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(zoom).onPointerDown && unref(zoom).onPointerDown(...args)),
+          onPointermove: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => unref(zoom).onPointerMove && unref(zoom).onPointerMove(...args)),
+          onPointerup: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(zoom).onPointerUp && unref(zoom).onPointerUp(...args)),
+          onPointercancel: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(zoom).onPointerUp && unref(zoom).onPointerUp(...args))
+        }, [
+          objectUrl.value ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: objectUrl.value,
+            alt: "",
+            draggable: "false",
+            class: normalizeClass(["lp-editor__image absolute inset-0 size-full select-none object-cover motion-reduce:transition-none", [
+              unref(zoom).panning.value ? "cursor-grabbing" : "cursor-grab",
+              __props.animate && !unref(revealed) ? "lp-editor__image--waiting" : ""
+            ]]),
+            style: normalizeStyle(imageStyle.value)
+          }, null, 14, _hoisted_2)) : createCommentVNode("", true),
+          createVNode(Transition, {
+            "enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+            "leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+            "enter-from-class": "opacity-0",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              unref(zoom).panning.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(9, (i) => {
+                  return createElementVNode("div", {
+                    key: i,
+                    class: normalizeClass(["border-white/15", [i % 3 !== 0 ? "border-r" : "", i < 7 ? "border-b" : ""]])
+                  }, null, 2);
+                }), 64))
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 44, _hoisted_1),
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("div", _hoisted_5, [
+            createVNode(_sfc_main$1, {
+              size: "sm",
+              variant: "ghost",
+              title: text.value.rotateLeft,
+              "aria-label": text.value.rotateLeft,
+              onClick: _cache[4] || (_cache[4] = ($event) => rotate(-90))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:rotate-ccw",
+                  size: 16
+                })
+              ]),
+              _: 1
+            }, 8, ["title", "aria-label"]),
+            createVNode(_sfc_main$1, {
+              size: "sm",
+              variant: "ghost",
+              title: text.value.rotateRight,
+              "aria-label": text.value.rotateRight,
+              onClick: _cache[5] || (_cache[5] = ($event) => rotate(90))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:rotate-cw",
+                  size: 16
+                })
+              ]),
+              _: 1
+            }, 8, ["title", "aria-label"])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            createVNode(_sfc_main$1, {
+              size: "sm",
+              variant: "ghost",
+              disabled: unref(zoom).scale.value <= 1,
+              title: text.value.zoomOut,
+              "aria-label": text.value.zoomOut,
+              onClick: _cache[6] || (_cache[6] = ($event) => unref(zoom).zoomBy(1 / 1.2))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:minus",
+                  size: 16
+                })
+              ]),
+              _: 1
+            }, 8, ["disabled", "title", "aria-label"]),
+            createElementVNode("span", _hoisted_7, toDisplayString(Math.round(unref(zoom).scale.value * 100)) + "% ", 1),
+            createVNode(_sfc_main$1, {
+              size: "sm",
+              variant: "ghost",
+              title: text.value.zoomIn,
+              "aria-label": text.value.zoomIn,
+              onClick: _cache[7] || (_cache[7] = ($event) => unref(zoom).zoomBy(1.2))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:plus",
+                  size: 16
+                })
+              ]),
+              _: 1
+            }, 8, ["title", "aria-label"])
+          ]),
+          edited.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            size: "sm",
+            variant: "ghost",
+            class: "ml-auto",
+            onClick: reset
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:undo-2",
+                size: 15
+              }),
+              createTextVNode(" " + toDisplayString(text.value.reset), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ])
+      ], 512);
+    };
+  }
+});
+const LpImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d404124"]]);
+export {
+  LpImageEditor as default
+};

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

@@ -35,6 +35,9 @@ type __VLS_Props = {
     /** Fixed height. Anything CSS-valid; defaults to a comfortable terminal. */
     height?: string;
     emptyLabel?: string;
+    /** Shown while the stream is held. Defaulted in English; apps with i18n
+     *  pass their own. */
+    frozenLabel?: string;
     /**
      * When true, a "loading older…" row is shown pinned at the top — set it while
      * fetching a previous page in response to `reach-top`, clear it when done.
@@ -85,6 +88,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     showTime: boolean;
     showLevel: boolean;
     tail: boolean;
+    frozenLabel: string;
     rowMenu: boolean;
     parse: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-CcQ3s3Fp.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-CKmEQYnm.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpProgress.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpProgress-DoIP4jQR.js";
+import { _ as _sfc_main } from "../chunks/LpProgress-Btq5W4Ut.js";
 export {
   _sfc_main as default
 };

package/dist/composables/useHotkeys.d.ts

@@ -42,4 +42,19 @@ export declare function appleModifierLabel(key: string): string;
  * may come and go with the state that owns them — a getter is the point, not a
  * formality.
  */
-export declare function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>): void;
+export interface UseHotkeysOptions {
+    /**
+     * Only act while the focus is inside this element.
+     *
+     * The default is the whole window, which is right for a command palette and
+     * wrong for a control: two of the same component on one page would both
+     * answer the same key, and a control beside a form would answer keys aimed
+     * at the form. Scoping it here rather than in each component because every
+     * one of them was about to write the same `document.activeElement` check and
+     * decline by hand.
+     *
+     * Undefined or null means the window, so the palette case stays the default.
+     */
+    scope?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+}
+export declare function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>, options?: UseHotkeysOptions): void;

package/dist/composables/useHotkeys.js

@@ -31,9 +31,16 @@ function matches(event, binding) {
   if (event.altKey !== Boolean(binding.alt)) return false;
   return event.key.toLowerCase() === binding.key.toLowerCase() || binding.code !== void 0 && event.code === binding.code;
 }
-function useHotkeys(bindings) {
+function useHotkeys(bindings, options = {}) {
+  function inScope(target) {
+    const el = toValue(options.scope);
+    if (!el) return true;
+    const node = target instanceof Node ? target : null;
+    return !!node && (el === node || el.contains(node));
+  }
   function onKeydown(event) {
     if (event.isComposing) return;
+    if (!inScope(event.target)) return;
     const inTextEntry = isTextEntry(event.target);
     for (const binding of toValue(bindings)) {
       if (inTextEntry && !binding.allowInInput) continue;

package/dist/composables/useZoomPan.d.ts

@@ -11,6 +11,30 @@ export interface UseZoomPanOptions {
 }
 export interface UseZoomPan {
     scale: Ref<number>;
+    /**
+     * Pan offset in CONTENT pixels — what `style` puts inside `translate()`,
+     * before the scale magnifies it. Exposed because anything that has to know
+     * *which part* is visible needs the number, not the CSS string: an exporter
+     * writing the cropped region, a minimap drawing the viewport rectangle, a
+     * caller restoring a saved position. Parsing it back out of `transform` is
+     * the alternative, and that breaks the moment this composable changes how it
+     * composes the transform.
+     */
+    offset: ComputedRef<{
+        x: number;
+        y: number;
+    }>;
+    /**
+     * Put the view somewhere — restoring a saved position, or carrying one
+     * through a change that re-frames the content. Clamped like any other pan,
+     * so a caller cannot place the content off the viewport. Omitting `scale`
+     * keeps the current one.
+     */
+    setView: (view: {
+        x: number;
+        y: number;
+        scale?: number;
+    }) => void;
     /** True once zoomed past the minimum — the point at which panning matters. */
     zoomed: ComputedRef<boolean>;
     /** True while a drag is in flight, so the caller can swap the cursor. */

package/dist/composables/useZoomPan.js

@@ -113,8 +113,19 @@ function useZoomPan(options = {}) {
     // Settle smoothly on discrete zooms, but follow a drag or pinch exactly.
     transition: panning.value || pinchStartDistance > 0 ? "none" : void 0
   }));
+  const offset = computed(() => ({ x: x.value, y: y.value }));
+  function setView(view) {
+    if (view.scale !== void 0) {
+      scale.value = Math.min(max, Math.max(min, view.scale));
+    }
+    x.value = view.x;
+    y.value = view.y;
+    clampPan();
+  }
   return {
     scale,
+    offset,
+    setView,
     zoomed,
     panning,
     style,

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as LpDivider } from './components/LpDivider.vue';
 export { default as LpDrawer } from './components/LpDrawer.vue';
 export { default as LpDropdownMenu } from './components/LpDropdownMenu.vue';
 export type { MenuItem } from './components/LpDropdownMenu.vue';
+export { default as LpDropzone } from './components/LpDropzone.vue';
 export { default as LpEmptyState } from './components/LpEmptyState.vue';
 export { default as LpFileTree } from './components/LpFileTree.vue';
 export type { FileTreeSummary } from './components/LpFileTree.vue';
@@ -39,6 +40,7 @@ export type { CheckState, FileNode, NodeStats } from './components/fileTree';
 export { ancestorIds, checkedCount, checkStateOf, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize, } from './components/fileTree';
 export { default as LpFormField } from './components/LpFormField.vue';
 export { default as LpIcon } from './components/LpIcon.vue';
+export { default as LpImageEditor } from './components/LpImageEditor.vue';
 export { default as LpInfraNode } from './components/LpInfraNode.vue';
 export type { InfraNodeData } from './components/LpInfraNode.vue';
 export { default as LpInput } from './components/LpInput.vue';

package/dist/index.js

@@ -11,7 +11,7 @@ import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
 import { _ as _12 } from "./chunks/LpCard-gu11ZmSt.js";
-import { _ as _13 } from "./chunks/LpChart-tNXs1ttr.js";
+import { _ as _13 } from "./chunks/LpChart-UiU4RhXP.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-rS_6mO3D.js";
@@ -23,17 +23,19 @@ import { _ as _19 } from "./chunks/LpDisclosure-BnwP4Q-b.js";
 import { _ as _20 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _21 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _22 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
+import { default as default3 } from "./components/LpDropzone.vue.js";
 import { _ as _23 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
 import { _ as _24 } from "./chunks/LpFileTree-BaV7f0O7.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _25 } from "./chunks/LpFormField-CesaPWPO.js";
 import { _ as _26 } from "./chunks/LpIcon-CCnX5_2j.js";
+import { default as default4 } from "./components/LpImageEditor.vue.js";
 import { _ as _27 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _28 } from "./chunks/LpInput-jwqXlAy0.js";
 import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
-import { _ as _31 } from "./chunks/LpLogViewer-CcQ3s3Fp.js";
+import { _ as _31 } from "./chunks/LpLogViewer-CKmEQYnm.js";
 import { _ as _32 } from "./chunks/LpModal-D_o-56To.js";
 import { _ as _33 } from "./chunks/LpNotificationBell-Dvu-b6Vn.js";
 import { _ as _34 } from "./chunks/LpNumberField-NPE8Bumx.js";
@@ -45,7 +47,7 @@ import { _ as _39 } from "./chunks/LpPie-BkjWlfSw.js";
 import { _ as _40 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _41 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _42 } from "./chunks/LpProgress-DoIP4jQR.js";
+import { _ as _42 } from "./chunks/LpProgress-Btq5W4Ut.js";
 import { _ as _43 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _44 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
 import { _ as _45 } from "./chunks/LpRollingText-CM5gkSeF.js";
@@ -55,7 +57,7 @@ import { _ as _48 } from "./chunks/LpSection-aM6J_u51.js";
 import { _ as _49 } from "./chunks/LpSelect-Cw8-gL5F.js";
 import { _ as _50 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _51 } from "./chunks/LpShift-DXNsauQZ.js";
-import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
+import { default as default5 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _52 } from "./chunks/LpSidebar-7Vpy2IJc.js";
 import { _ as _53 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _54 } from "./chunks/LpSlider-B1SF3pRV.js";
@@ -143,10 +145,12 @@ export {
   _20 as LpDivider,
   _21 as LpDrawer,
   _22 as LpDropdownMenu,
+  default3 as LpDropzone,
   _23 as LpEmptyState,
   _24 as LpFileTree,
   _25 as LpFormField,
   _26 as LpIcon,
+  default4 as LpImageEditor,
   _27 as LpInfraNode,
   _28 as LpInput,
   _29 as LpLightbox,
@@ -173,7 +177,7 @@ export {
   _49 as LpSelect,
   _50 as LpServiceNode,
   _51 as LpShift,
-  default3 as LpShortcutsDialog,
+  default5 as LpShortcutsDialog,
   _52 as LpSidebar,
   _53 as LpSkeleton,
   _54 as LpSlider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.28.1",
+  "version": "0.28.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -25,11 +25,13 @@ export const COMPONENT_NAMES = [
   "LpDivider",
   "LpDrawer",
   "LpDropdownMenu",
+  "LpDropzone",
   "LpEmptyState",
   "LpFileTree",
   "LpFileTreeNode",
   "LpFormField",
   "LpIcon",
+  "LpImageEditor",
   "LpInfraNode",
   "LpInput",
   "LpLaneNode",

package/src/components/LpChart.vue

@@ -553,6 +553,25 @@ watch(
 )
 
 const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
+
+/*
+ * The gradient id for a series, with the series NAME reduced to id-safe
+ * characters.
+ *
+ * A name is a label — "used %", "in eth0", "read sda" — and putting it verbatim
+ * into an id produced `url(#lp-chart-x-g-used %)`, which is not a valid
+ * reference: the browser fails to resolve it and falls back to painting the
+ * shape black. The gradient was there, correct, and simply never reached, so an
+ * area chart of any series whose name held a space or a percent sign rendered
+ * as a solid black block under its line — while "cpu" and "memory" on the same
+ * page kept their colour, which is what made it look like a data problem rather
+ * than an escaping one.
+ *
+ * Index-suffixed so two names that differ only in punctuation ("in eth0" and
+ * "in-eth0") cannot collapse onto one id and share a colour.
+ */
+const gradientId = (name: string, index: number) =>
+  `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`
 </script>
 
 <template>
@@ -618,8 +637,8 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
         >
           <defs>
             <linearGradient
-              v-for="s in lines"
-              :id="`${clipId}-g-${s.name}`"
+              v-for="(s, i) in lines"
+              :id="gradientId(s.name, i)"
               :key="s.name"
               x1="0"
               y1="0"
@@ -728,11 +747,11 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
 
             <!-- area fills -->
             <path
-              v-for="s in lines"
+              v-for="(s, i) in lines"
               v-show="type === 'area'"
               :key="`f-${s.name}`"
               :d="s.fill"
-              :fill="`url(#${clipId}-g-${s.name})`"
+              :fill="`url(#${gradientId(s.name, i)})`"
             />
 
             <!-- lines -->