@leavepulse/ui 0.32.0 → 0.33.1

package/dist/chunks/{LpAddressInput-C35TsJXt.js → LpAddressInput-FZXfljWV.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CazBc2-a.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$7 } from "./LpModal-D_o-56To.js";
+import { _ as _sfc_main$7 } from "./LpModal-DAqXzsm-.js";
 import { _ as _sfc_main$6 } from "./LpSelect-ANIVtrpM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpConfirmDialog-CjOGcj1e.js → LpConfirmDialog-CQBVaLpo.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-D_o-56To.js";
+import { _ as _sfc_main$1 } from "./LpModal-DAqXzsm-.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",

package/dist/chunks/{LpDisclosure-y7wDBgLa.js → LpDisclosure-ChQYmjlR.js}

@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "overflow-hidden rounded-control border border-line bg-surface-soft"
+      "shrink-0 overflow-hidden rounded-control border border-line bg-surface-soft"
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(CollapsibleRoot), mergeProps({

package/dist/chunks/{LpLightbox-Cixfxezw.js → LpLightbox-oLqyjOln.js}

@@ -37,7 +37,7 @@ const _hoisted_13 = ["data-index", "aria-label", "onClick"];
 const _hoisted_14 = ["src", "alt"];
 const WHEEL_STEP = 60;
 const BTN = "flex size-9 items-center justify-center rounded-control text-white/80 outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/15 hover:text-white focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
-const ARROW = "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0";
+const ARROW = "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/75 ring-1 ring-white/0 outline-none backdrop-blur-sm transition-[background-color,scale,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-white/20 hover:text-white hover:ring-white/30 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLightbox",
   props: {

package/dist/chunks/{LpMediaGallery-t1z3bQcY.js → LpMediaGallery-Cid7PGYx.js}

@@ -1,17 +1,21 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, renderSlot, mergeProps, unref, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createVNode, createCommentVNode, createBlock } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpLightbox-Cixfxezw.js";
+import { _ as _sfc_main$2 } from "./LpLightbox-oLqyjOln.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label", "onClick"];
 const _hoisted_4 = ["src", "alt"];
 const _hoisted_5 = {
   key: 0,
-  class: "pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
+  class: "pointer-events-none absolute inset-0 flex items-center justify-center"
 };
 const _hoisted_6 = {
   key: 1,
+  class: "pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
+};
+const _hoisted_7 = {
+  key: 2,
   class: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-[background-color,opacity] duration-[var(--duration-fast)] group-hover:bg-black/25 group-hover:opacity-100 motion-reduce:transition-none",
   "aria-hidden": "true"
 };
@@ -28,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rotatable: { type: Boolean, default: true },
     ariaLabel: { default: "Media" }
   },
-  emits: ["select", "update:open"],
+  emits: ["select", "reveal", "update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -111,16 +115,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!item) return;
       emit("select", item, i);
       if (!props.openable) return;
-      index.value = i;
+      const at = openIndexOf(i);
+      if (at === -1) return;
+      index.value = at;
       open.value = true;
       emit("update:open", true);
     }
     function openOverflow() {
       activate(visible.value.length);
     }
+    const revealed = ref(/* @__PURE__ */ new Set());
+    function isHidden(item) {
+      return Boolean(item.spoiler) && !revealed.value.has(item.src);
+    }
+    function reveal(item) {
+      revealed.value = new Set(revealed.value).add(item.src);
+      emit("reveal", item);
+    }
+    const openItems = computed(() => props.items.filter((item) => !isHidden(item)));
+    function openIndexOf(i) {
+      const item = props.items[i];
+      return item ? openItems.value.indexOf(item) : -1;
+    }
     __expose({
       /** Open the lightbox at an index — for a "view all" button outside the grid. */
-      openAt: (i) => activate(i)
+      openAt: (i) => activate(i),
+      /** Uncover every spoiler in the set. */
+      revealAll: () => {
+        const next = new Set(revealed.value);
+        for (const item of props.items) if (item.spoiler) next.add(item.src);
+        revealed.value = next;
+      }
     });
     return (_ctx, _cache) => {
       return !__props.items.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -141,8 +166,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               __props.openable ? "cursor-pointer" : "cursor-default",
               "focus-visible:ring-2 focus-visible:ring-ring"
             ]),
-            "aria-label": hiddenCount.value && i === visible.value.length - 1 ? `Show ${hiddenCount.value} more` : item.title || `Image ${i + 1} of ${__props.items.length}`,
-            onClick: ($event) => hiddenCount.value && i === visible.value.length - 1 ? openOverflow() : activate(i)
+            "aria-label": isHidden(item) ? "Spoiler — show image" : hiddenCount.value && i === visible.value.length - 1 ? `Show ${hiddenCount.value} more` : item.title || `Image ${i + 1} of ${__props.items.length}`,
+            onClick: ($event) => isHidden(item) ? reveal(item) : hiddenCount.value && i === visible.value.length - 1 ? openOverflow() : activate(i)
           }, [
             renderSlot(_ctx.$slots, "item", {
               item,
@@ -150,16 +175,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, () => [
               createElementVNode("img", {
                 src: item.thumb || item.src,
-                alt: item.title || "",
+                alt: isHidden(item) ? "" : item.title || "",
                 loading: "lazy",
                 decoding: "async",
-                class: normalizeClass([
-                  "size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
-                  hiddenCount.value && i === visible.value.length - 1 ? "scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]" : ""
-                ])
+                class: normalizeClass(["size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100", [
+                  isHidden(item) ? "scale-[1.12] blur-[18px] brightness-[0.6] saturate-[1.1] group-hover:scale-[1.12]" : "",
+                  !isHidden(item) && hiddenCount.value && i === visible.value.length - 1 ? "scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]" : ""
+                ]])
               }, null, 10, _hoisted_4)
             ]),
-            hiddenCount.value && i === visible.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_5, " +" + toDisplayString(hiddenCount.value), 1)) : __props.openable ? (openBlock(), createElementBlock("span", _hoisted_6, [
+            isHidden(item) ? (openBlock(), createElementBlock("span", _hoisted_5, [..._cache[2] || (_cache[2] = [
+              createElementVNode("span", { class: "rounded-pill bg-black/55 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white" }, " Spoiler ", -1)
+            ])])) : hiddenCount.value && i === visible.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_6, " +" + toDisplayString(hiddenCount.value), 1)) : __props.openable ? (openBlock(), createElementBlock("span", _hoisted_7, [
               createVNode(_sfc_main$1, {
                 name: "lucide:maximize-2",
                 size: 18,
@@ -174,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
           index: index.value,
           "onUpdate:index": _cache[1] || (_cache[1] = ($event) => index.value = $event),
-          items: __props.items,
+          items: openItems.value,
           downloadable: __props.downloadable,
           rotatable: __props.rotatable
         }, null, 8, ["open", "index", "items", "downloadable", "rotatable"])) : createCommentVNode("", true)

package/dist/chunks/{LpModal-D_o-56To.js → LpModal-DAqXzsm-.js}

@@ -1,16 +1,16 @@
-import { defineComponent, computed, useSlots, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { useShift } from "../composables/useShift.js";
+import { useModalLayer } from "../components/modalDepth.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
-const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
 };
-const _hoisted_3 = { class: "flex flex-col gap-1" };
-const _hoisted_4 = {
+const _hoisted_2 = { class: "flex flex-col gap-1" };
+const _hoisted_3 = {
   key: 3,
   class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
 };
@@ -27,6 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:open"],
   setup(__props) {
+    const { claim, release, layer } = useModalLayer();
     const props = __props;
     const describedByAttrs = computed(
       () => props.description ? {} : { "aria-describedby": void 0 }
@@ -44,6 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }[props.size];
     });
     const slots = useSlots();
+    watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
+    onBeforeUnmount(release);
     const bodyPad = computed(
       () => [
         "px-5",
@@ -103,8 +106,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
-              createElementVNode("div", _hoisted_1, [
+              createVNode(unref(DialogOverlay), {
+                class: "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]",
+                style: normalizeStyle({ zIndex: unref(layer).scrim })
+              }, null, 8, ["style"]),
+              createElementVNode("div", {
+                class: "fixed inset-0 flex items-center justify-center pointer-events-none",
+                style: normalizeStyle({ zIndex: unref(layer).panel })
+              }, [
                 createVNode(unref(DialogContent), mergeProps({
                   ref_key: "panelRef",
                   ref: panelRef,
@@ -112,8 +121,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   style: __props.width ? { width: __props.width } : void 0
                 }, describedByAttrs.value, { onOpenAutoFocus }), {
                   default: withCtx(() => [
-                    __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
-                      createElementVNode("div", _hoisted_3, [
+                    __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
+                      createElementVNode("div", _hoisted_2, [
                         createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
                           default: withCtx(() => [
                             renderSlot(_ctx.$slots, "title", {}, () => [
@@ -162,13 +171,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     }, 8, ["class", "content-class"])),
-                    _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+                    _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
                       renderSlot(_ctx.$slots, "footer")
                     ])) : createCommentVNode("", true)
                   ]),
                   _: 3
                 }, 16, ["class", "style"])
-              ])
+              ], 4)
             ]),
             _: 3
           })

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-C35TsJXt.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-FZXfljWV.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CjOGcj1e.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CQBVaLpo.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDisclosure.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDisclosure-y7wDBgLa.js";
+import { _ as _sfc_main } from "../chunks/LpDisclosure-ChQYmjlR.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-Cixfxezw.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox-oLqyjOln.js";
 export {
   _sfc_main as default
 };

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

@@ -45,12 +45,16 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     /** Open the lightbox at an index — for a "view all" button outside the grid. */
     openAt: (i: number) => void;
+    /** Uncover every spoiler in the set. */
+    revealAll: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (item: LightboxItem, index: number) => any;
     "update:open": (value: boolean) => any;
+    reveal: (item: LightboxItem) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: LightboxItem, index: number) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onReveal?: ((item: LightboxItem) => any) | undefined;
 }>, {
     columns: number | {
         base?: number;

package/dist/components/LpMediaGallery.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMediaGallery-t1z3bQcY.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-Cid7PGYx.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-D_o-56To.js";
+import { _ as _sfc_main } from "../chunks/LpModal-DAqXzsm-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-D_o-56To.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-DAqXzsm-.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

package/dist/components/lightbox.d.ts

@@ -9,6 +9,16 @@ export interface LightboxItem {
     description?: string;
     /** Filename used when downloading; derived from `src` when absent. */
     filename?: string;
+    /**
+     * Hide this image behind a cover until someone asks for it — a spoiler, a
+     * screenshot of something not everyone in the channel has reached yet, a
+     * picture that should not appear in a scroll past.
+     *
+     * A property of the ITEM rather than of the grid showing it: which images are
+     * spoilers is a fact about the images, and the usual set is a mixed one, with
+     * a marked picture sitting beside plain ones.
+     */
+    spoiler?: boolean;
 }
 /** Last path segment of a URL, or a fallback — used to name a download. */
 export declare function fileNameOf(item: LightboxItem, fallback?: string): string;

package/dist/components/modalDepth.d.ts

@@ -0,0 +1,13 @@
+import { ComputedRef } from 'vue';
+/**
+ * Register a dialog as open and get back the z-indexes it should paint with.
+ * The result is reactive: opening another dialog moves this one down a step.
+ */
+export declare function useModalLayer(): {
+    claim: () => void;
+    release: () => void;
+    layer: ComputedRef<{
+        scrim: string;
+        panel: string;
+    }>;
+};

package/dist/components/modalDepth.js

@@ -0,0 +1,29 @@
+import { ref, computed } from "vue";
+const STEP = 10;
+const stack = ref([]);
+let nextId = 0;
+function useModalLayer() {
+  const id = nextId++;
+  const fromTop = computed(() => {
+    const at = stack.value.indexOf(id);
+    return at === -1 ? 0 : stack.value.length - 1 - at;
+  });
+  return {
+    claim: () => {
+      if (!stack.value.includes(id)) stack.value = [...stack.value, id];
+    },
+    release: () => {
+      stack.value = stack.value.filter((x) => x !== id);
+    },
+    layer: computed(() => {
+      const drop = fromTop.value * STEP;
+      return {
+        scrim: `calc(var(--z-overlay) - ${drop})`,
+        panel: `calc(var(--z-modal) - ${drop})`
+      };
+    })
+  };
+}
+export {
+  useModalLayer
+};

package/dist/composables/useShift.js

@@ -1,6 +1,7 @@
 import { ref, watch, toValue, onBeforeUnmount } from "vue";
 import { prefersReducedMotion } from "./easing.js";
 const TWEEN_MS = 160;
+const RETARGET_AFTER_MS = 40;
 function useShift(options = {}) {
   const el = ref(null);
   const tweening = ref(false);
@@ -12,13 +13,19 @@ function useShift(options = {}) {
   let lastHeight = 0;
   let lastWidth = 0;
   let inFlight = false;
+  let tweenStart = 0;
   const axisOf = () => toValue(options.axis) ?? "height";
   const wantsHeight = () => axisOf() !== "width";
   const wantsWidth = () => axisOf() !== "height";
   function retune() {
     const node = el.value;
     if (!node) return;
-    if (inFlight) return;
+    if (inFlight) {
+      if (performance.now() - tweenStart < RETARGET_AFTER_MS) return;
+      const live = node.getBoundingClientRect();
+      lastHeight = Math.round(live.height);
+      lastWidth = Math.round(live.width);
+    }
     const fromHeight = lastHeight;
     const fromWidth = lastWidth;
     if (wantsHeight()) {
@@ -44,6 +51,7 @@ function useShift(options = {}) {
     if (movesHeight) node.style.height = `${toHeight}px`;
     if (movesWidth) node.style.width = `${toWidth}px`;
     inFlight = true;
+    tweenStart = performance.now();
     resizing.value = true;
     clearTimeout(settleTimer);
     const wait = prefersReducedMotion() ? 0 : toValue(options.duration) ?? TWEEN_MS;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-C35TsJXt.js";
+import { _ as _2 } from "./chunks/LpAddressInput-FZXfljWV.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
@@ -19,10 +19,10 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-CQBVaLpo.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.js";
-import { _ as _20 } from "./chunks/LpDisclosure-y7wDBgLa.js";
+import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
@@ -35,12 +35,12 @@ import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
 import { _ as _29 } from "./chunks/LpInput-9EXWUM9B.js";
-import { _ as _30 } from "./chunks/LpLightbox-Cixfxezw.js";
+import { _ as _30 } from "./chunks/LpLightbox-oLqyjOln.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
-import { _ as _33 } from "./chunks/LpMediaGallery-t1z3bQcY.js";
-import { _ as _34 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
+import { _ as _34 } from "./chunks/LpModal-DAqXzsm-.js";
 import { _ as _35 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _36 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _37 } from "./chunks/LpNumberFlow-amWYaeuA.js";

package/package.json

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

package/src/components/LpDisclosure.vue

@@ -75,8 +75,23 @@ function onToggle(value: boolean) {
 }
 
 // The disclosure carries a bordered control frame; stacking several into one list means removing the per-item border from the outside.
+/*
+ * shrink-0 is load-bearing inside a flex column.
+ *
+ * A disclosure is nearly always in one — the body of a dialog, a settings
+ * column, a form. A flex item defaults to `flex-shrink: 1`, so when that column
+ * runs out of room every child is squeezed, and this one hides the evidence
+ * with its own `overflow-hidden`: measured in a dialog whose content overflows,
+ * the root sat at 22px while the trigger inside it was 40px — a header cut in
+ * half, spilling past the panel, and snapping back and forth by 20px as the
+ * surrounding layout settled.
+ *
+ * A collapsible owns its height: closed it is exactly its header, open it is
+ * the header plus the animating body. Nothing outside gets to shorten that —
+ * the column it sits in is the thing that should scroll instead.
+ */
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "overflow-hidden rounded-control border border-line bg-surface-soft",
+  "shrink-0 overflow-hidden rounded-control border border-line bg-surface-soft",
 )
 </script>
 

package/src/components/LpLightbox.vue

@@ -315,8 +315,21 @@ const imageStyle = computed(() => ({
 
 const BTN =
   "flex size-9 items-center justify-center rounded-control text-white/80 outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/15 hover:text-white focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+/*
+ * The arrows sit on a photograph, which is the hard surface to answer on: the
+ * resting chrome is a dark translucent disc, and a hover that only deepens that
+ * dark is a change from "nearly black" to "slightly more nearly black" over an
+ * image that may itself be dark. Measured, the old step moved the fill from
+ * 0.45 to 0.65 alpha and the disc by 5% of 44px — two pixels. It was doing
+ * something, and it read as doing nothing.
+ *
+ * So the hover changes the QUALITY of the surface, not just its depth: the fill
+ * goes lighter rather than darker, a hairline ring appears, the icon reaches
+ * full white and the disc grows by a tenth. Pressing it dips back below resting
+ * size, which is the part that makes a button feel connected to the click.
+ */
 const ARROW =
-  "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0"
+  "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/75 ring-1 ring-white/0 outline-none backdrop-blur-sm transition-[background-color,scale,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-white/20 hover:text-white hover:ring-white/30 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
 </script>
 
 <template>

package/src/components/LpMediaGallery.vue

@@ -19,6 +19,10 @@
  * straight from here into the lightbox with nothing in between. `thumb` is the
  * small source when one exists; without it the grid shows `src`, which is
  * correct but heavier, and that is the caller's call to make.
+ *
+ * An item marked `spoiler` arrives covered and takes a click to uncover. The
+ * cover is per image and the reveal is remembered per image, because a set is
+ * usually mixed — one marked screenshot among plain ones.
  */
 import { computed, ref } from "vue"
 import type { LightboxItem } from "./lightbox"
@@ -69,6 +73,8 @@ const props = withDefaults(
 const emit = defineEmits<{
   /** A thumbnail was activated, before the lightbox opens. */
   (e: "select", item: LightboxItem, index: number): void
+  /** A spoiler was uncovered. */
+  (e: "reveal", item: LightboxItem): void
   (e: "update:open", value: boolean): void
 }>()
 
@@ -173,9 +179,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 function activate(i: number) {
   const item = props.items[i]
   if (!item) return
+  // `select` reports the position in the caller's own array, which is the one
+  // they can do anything with — the lightbox's filtered index is internal.
   emit("select", item, i)
   if (!props.openable) return
-  index.value = i
+  // Covered images are not in the lightbox's list, so the index has to be
+  // translated into it.
+  const at = openIndexOf(i)
+  if (at === -1) return
+  index.value = at
   open.value = true
   emit("update:open", true)
 }
@@ -185,9 +197,57 @@ function openOverflow() {
   activate(visible.value.length)
 }
 
+/*
+ * Which spoilers have been opened.
+ *
+ * Keyed by `src` rather than by index, because the index is not a name: a set
+ * that gains an image at the front, or is filtered, shifts every position under
+ * the cursor, and a grid keyed by index would then show the wrong picture as
+ * already-revealed — which for a spoiler is the one failure that matters.
+ */
+const revealed = ref(new Set<string>())
+
+function isHidden(item: LightboxItem): boolean {
+  return Boolean(item.spoiler) && !revealed.value.has(item.src)
+}
+
+/*
+ * A covered tile takes its click to uncover itself and STOPS there — it does
+ * not also open the lightbox. Revealing and viewing are two separate requests,
+ * and running them together puts a picture nobody has agreed to see yet
+ * full-screen on the first click. The second click opens it like any other.
+ */
+function reveal(item: LightboxItem) {
+  // A new Set, not .add(): a Set mutated in place is the same object, so a
+  // computed reading it never sees a change.
+  revealed.value = new Set(revealed.value).add(item.src)
+  emit("reveal", item)
+}
+
+/*
+ * The lightbox never receives a covered image. Paging through the set with the
+ * arrow keys would otherwise walk straight into one full-screen, having asked
+ * nobody — the grid's cover would have been for nothing. Items already revealed
+ * pass through untouched, so opening the one you just uncovered still lands on
+ * it.
+ */
+const openItems = computed(() => props.items.filter((item) => !isHidden(item)))
+
+/** Index within `openItems` of the grid item at `i`, or -1 when it is covered. */
+function openIndexOf(i: number): number {
+  const item = props.items[i]
+  return item ? openItems.value.indexOf(item) : -1
+}
+
 defineExpose({
   /** Open the lightbox at an index — for a "view all" button outside the grid. */
   openAt: (i: number) => activate(i),
+  /** Uncover every spoiler in the set. */
+  revealAll: () => {
+    const next = new Set(revealed.value)
+    for (const item of props.items) if (item.spoiler) next.add(item.src)
+    revealed.value = next
+  },
 })
 </script>
 
@@ -208,11 +268,19 @@ defineExpose({
         'focus-visible:ring-2 focus-visible:ring-ring',
       ]"
       :aria-label="
-        hiddenCount && i === visible.length - 1
-          ? `Show ${hiddenCount} more`
-          : item.title || `Image ${i + 1} of ${items.length}`
+        isHidden(item)
+          ? 'Spoiler — show image'
+          : hiddenCount && i === visible.length - 1
+            ? `Show ${hiddenCount} more`
+            : item.title || `Image ${i + 1} of ${items.length}`
+      "
+      @click="
+        isHidden(item)
+          ? reveal(item)
+          : hiddenCount && i === visible.length - 1
+            ? openOverflow()
+            : activate(i)
       "
-      @click="hiddenCount && i === visible.length - 1 ? openOverflow() : activate(i)"
     >
       <slot name="item" :item="item" :index="i">
         <!-- decoding=async + loading=lazy: a gallery is often far down a page,
@@ -227,15 +295,18 @@ defineExpose({
              little pushes that feathered edge outside the clip. -->
         <img
           :src="item.thumb || item.src"
-          :alt="item.title || ''"
+          :alt="isHidden(item) ? '' : item.title || ''"
           loading="lazy"
           decoding="async"
           class="size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
-          :class="
-            hiddenCount && i === visible.length - 1
+          :class="[
+            isHidden(item)
+              ? 'scale-[1.12] blur-[18px] brightness-[0.6] saturate-[1.1] group-hover:scale-[1.12]'
+              : '',
+            !isHidden(item) && hiddenCount && i === visible.length - 1
               ? 'scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]'
-              : ''
-          "
+              : '',
+          ]"
         >
       </slot>
 
@@ -252,8 +323,22 @@ defineExpose({
            and obvious zoomed. Dimming the image itself means the corner clips a
            finished pixel, which fades toward transparent instead of toward
            something that should never be on show. -->
+      <!-- A covered tile says so in words. The blur alone is ambiguous — a
+           heavily blurred photograph reads as one that failed to load, and the
+           label is the difference between "broken" and "click to see". -->
+      <span
+        v-if="isHidden(item)"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center"
+      >
+        <span
+          class="rounded-pill bg-black/55 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white"
+        >
+          Spoiler
+        </span>
+      </span>
+
       <span
-        v-if="hiddenCount && i === visible.length - 1"
+        v-else-if="hiddenCount && i === visible.length - 1"
         class="pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
       >
         +{{ hiddenCount }}
@@ -272,7 +357,7 @@ defineExpose({
       v-if="openable"
       v-model:open="open"
       v-model:index="index"
-      :items="items"
+      :items="openItems"
       :downloadable="downloadable"
       :rotatable="rotatable"
     />

package/src/components/LpModal.vue

@@ -9,12 +9,32 @@ import {
   DialogTitle,
 } from "reka-ui"
 import type { ComponentPublicInstance } from "vue"
-import { computed, ref, useSlots, watch } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useShift } from "../composables/useShift"
+import { useModalLayer } from "./modalDepth"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 
+/*
+ * Stacking depth, so a dialog opened FROM a dialog sits above the one that
+ * opened it — scrim included.
+ *
+ * The fixed rungs cannot express this on their own. Every modal took
+ * --z-overlay for its scrim and --z-modal for its panel, so a nested pair
+ * landed at exactly the heights of the outer pair: the second scrim, at 100,
+ * sat UNDER the first panel at 110. It still darkened the page, which is why
+ * this reads as "the blur is missing" rather than as a stacking bug — a
+ * backdrop-filter only blurs what is painted beneath it, and the panel it was
+ * supposed to blur was above.
+ *
+ * Each level adds a step, keeping the scrim one below its own panel and both
+ * above everything the level beneath put on screen. The same problem, and the
+ * same fix, as the lightbox's own rungs in tokens.css — only the depth here is
+ * not known until a dialog finds itself inside another.
+ */
+const { claim, release, layer } = useModalLayer()
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -75,6 +95,17 @@ const widthClass = computed(() => {
 const slots = useSlots()
 // The body clips overflow and focus rings are drawn outside their control, so a
 // field flush against the top edge lost its ring; pt-1 clears the ring's width.
+/*
+ * Claim a level as this dialog opens, give it back as it closes. `immediate`
+ * matters: a dialog that starts out open has to have its rung before the first
+ * paint, or its scrim lands on the default one for a frame.
+ */
+watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
+
+// A dialog torn down while still open would otherwise stay on the stack, holding
+// every dialog under it a step lower than it should be.
+onBeforeUnmount(release)
+
 const bodyPad = computed(() =>
   [
     "px-5",
@@ -178,7 +209,8 @@ watch(
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        :style="{ zIndex: layer.scrim }"
       />
       <!-- Centred by a full-screen flex wrapper rather than by translating the
            panel off its own centre. With `top:50% / -translate-y-1/2` the panel
@@ -193,7 +225,10 @@ watch(
            this wrapper: `max-h-full` on a centred flex child resolves against a
            box it is free to overflow, so a tall body stopped handing its
            overflow to the scroll area below and simply ran off-screen. -->
-      <div class="fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none">
+      <div
+        class="fixed inset-0 flex items-center justify-center pointer-events-none"
+        :style="{ zIndex: layer.panel }"
+      >
       <!-- Without a description reka-ui warns on every open, and the opt-out it
            checks for is an ABSENT `aria-describedby` — despite the message
            naming the string "undefined" (a leftover from Radix, where

package/src/components/lightbox.ts

@@ -14,6 +14,16 @@ export interface LightboxItem {
   description?: string
   /** Filename used when downloading; derived from `src` when absent. */
   filename?: string
+  /**
+   * Hide this image behind a cover until someone asks for it — a spoiler, a
+   * screenshot of something not everyone in the channel has reached yet, a
+   * picture that should not appear in a scroll past.
+   *
+   * A property of the ITEM rather than of the grid showing it: which images are
+   * spoilers is a fact about the images, and the usual set is a mixed one, with
+   * a marked picture sitting beside plain ones.
+   */
+  spoiler?: boolean
 }
 
 /** Last path segment of a URL, or a fallback — used to name a download. */

package/src/components/modalDepth.ts

@@ -0,0 +1,72 @@
+/*
+ * Stacking order for dialogs that are open at the same time.
+ *
+ * Not provide/inject, which was the first shape tried: it only works when the
+ * second dialog is rendered INSIDE the first one's subtree, and the ordinary
+ * way to write a dialog opened from a dialog is to put both at the top level of
+ * the same component and toggle them with separate flags. Those two are
+ * siblings, so the inner one injects nothing and lands on the same rungs as the
+ * outer — which is the bug.
+ *
+ * What decides the order is the sequence of OPENING: a dialog opened while
+ * another is up belongs above it, wherever it sits in the markup.
+ *
+ * The newest dialog keeps the scale's own --z-overlay/--z-modal and the ones
+ * beneath are pushed DOWN, rather than each new dialog climbing higher. Climbing
+ * runs out of room immediately: --z-popover is only 10 above --z-modal, so the
+ * second nested dialog would tie with every popover and the third with every
+ * tooltip — and a select inside a dialog is ordinary. Descending has no such
+ * ceiling, and it keeps the frontmost dialog exactly where a single one has
+ * always been.
+ */
+import { computed, ref, type ComputedRef } from "vue"
+
+/*
+ * Rungs per level. Has to clear a whole level, not just its scrim: --z-overlay
+ * is 100 and --z-modal 110, so a gap of 2 left the upper scrim under the lower
+ * PANEL — it darkened that panel and could not blur it, a backdrop-filter
+ * having nothing of it underneath to work on.
+ */
+const STEP = 10
+
+/** Levels currently claimed, oldest first. */
+const stack = ref<number[]>([])
+let nextId = 0
+
+/**
+ * Register a dialog as open and get back the z-indexes it should paint with.
+ * The result is reactive: opening another dialog moves this one down a step.
+ */
+export function useModalLayer(): {
+  claim: () => void
+  release: () => void
+  layer: ComputedRef<{ scrim: string; panel: string }>
+} {
+  const id = nextId++
+
+  /*
+   * How far from the TOP of the stack, so the newest dialog is 0 and keeps the
+   * unmodified rungs. A dialog that is not in the stack reads 0 too: it is
+   * either closed, or opening this very frame and about to claim.
+   */
+  const fromTop = computed(() => {
+    const at = stack.value.indexOf(id)
+    return at === -1 ? 0 : stack.value.length - 1 - at
+  })
+
+  return {
+    claim: () => {
+      if (!stack.value.includes(id)) stack.value = [...stack.value, id]
+    },
+    release: () => {
+      stack.value = stack.value.filter((x) => x !== id)
+    },
+    layer: computed(() => {
+      const drop = fromTop.value * STEP
+      return {
+        scrim: `calc(var(--z-overlay) - ${drop})`,
+        panel: `calc(var(--z-modal) - ${drop})`,
+      }
+    }),
+  }
+}

package/src/composables/useShift.ts

@@ -65,6 +65,14 @@ export interface UseShift {
 /** Kept in step with the `duration-fast` token the transition utilities use. */
 const TWEEN_MS = 160
 
+/*
+ * How long after a tween starts a second observer call still counts as the same
+ * move rather than a new one. Both observers report one swap within a frame or
+ * two; anything later is content that is still changing size and has to be
+ * followed. Two frames at 60Hz, with room to spare for a slow one.
+ */
+const RETARGET_AFTER_MS = 40
+
 export function useShift(
   options: UseShiftOptions = {},
 ): UseShift {
@@ -81,6 +89,8 @@ export function useShift(
   let lastWidth = 0
   /** True while a tween owns the size, so observers don't cancel it midway. */
   let inFlight = false
+  /** When the in-flight tween started, to tell a duplicate from a follow-up. */
+  let tweenStart = 0
 
   const axisOf = () => toValue(options.axis) ?? "height"
   const wantsHeight = () => axisOf() !== "width"
@@ -96,9 +106,29 @@ export function useShift(
   function retune() {
     const node = el.value
     if (!node) return
-    // One swap wakes both observers — the mutation as content lands, the resize
-    // as it reflows — and the second call would clear the pin the first wrote.
-    if (inFlight) return
+
+    /*
+     * A tween already owns the size. Where it came from decides what to do:
+     *
+     * - One swap wakes both observers — the mutation as content lands, the
+     *   resize as it reflows — and the second call arrives within a frame or
+     *   two of the first, describing the same move. Re-running it would clear
+     *   the pin the first one wrote, so it is dropped.
+     * - Content that animates its OWN height keeps reporting new sizes for as
+     *   long as it runs. A collapsible body opening inside a dialog fires the
+     *   observer every frame for 260ms, and dropping all of those pinned the
+     *   panel at the size the body happened to have one frame in — measured,
+     *   212px held for 170ms and then 135px arriving in a single frame, which
+     *   is the "modal snaps open" report. Those retunes must RETARGET the
+     *   tween instead: start from where the box is painted right now and ease
+     *   on to the new figure.
+     */
+    if (inFlight) {
+      if (performance.now() - tweenStart < RETARGET_AFTER_MS) return
+      const live = node.getBoundingClientRect()
+      lastHeight = Math.round(live.height)
+      lastWidth = Math.round(live.width)
+    }
 
     // Remembered, not measured: by the time either observer fires the box has
     // already reflowed, so the element can only report where it is going.
@@ -145,6 +175,7 @@ export function useShift(
     if (movesWidth) node.style.width = `${toWidth}px`
 
     inFlight = true
+    tweenStart = performance.now()
     resizing.value = true
     clearTimeout(settleTimer)
     const wait = prefersReducedMotion() ? 0 : (toValue(options.duration) ?? TWEEN_MS)