@leavepulse/ui 0.15.5 → 0.16.2

package/dist/chunks/{LpConfirmDialog-C-iOXJIM.js → LpConfirmDialog-DnReh5pF.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-DeZlvK1B.js";
+import { _ as _sfc_main$1 } from "./LpModal-CezA8eJ3.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpLightbox-BYIA9qne.js → LpLightbox-CWdIsthW.js}

@@ -3,7 +3,7 @@ import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, Di
 import { useZoomPan } from "../composables/useZoomPan.js";
 import { fileNameOf } from "../components/lightbox.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70" };
+const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70 [--chrome-from:-8px] animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
 const _hoisted_2 = {
   key: 0,
   class: "px-2 tabular-nums"
@@ -20,7 +20,7 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["src", "alt"];
 const _hoisted_8 = ["disabled"];
-const _hoisted_9 = { class: "shrink-0 p-3 pt-2" };
+const _hoisted_9 = { class: "shrink-0 p-3 pt-2 animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
 const _hoisted_10 = {
   key: 0,
   class: "mb-2 text-center"
@@ -55,9 +55,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const zoom = useZoomPan({ max: props.maxZoom });
-    computed(() => zoom.scale.value);
-    computed(() => zoom.zoomed.value);
-    computed(() => zoom.panning.value);
+    const scale = computed(() => zoom.scale.value);
+    const isZoomed = computed(() => zoom.zoomed.value);
+    const isPanning = computed(() => zoom.panning.value);
     const current = computed(() => Math.min(Math.max(props.index, 0), Math.max(props.items.length - 1, 0)));
     const item = computed(() => props.items[current.value]);
     const total = computed(() => props.items.length);
@@ -68,10 +68,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const viewport = ref(null);
     const stripEl = ref(null);
     watch(viewport, (el) => zoom.setViewport(el));
+    const direction = ref(1);
     function go(next) {
       if (!total.value) return;
       const wrapped = props.loop ? (next + total.value) % total.value : Math.min(Math.max(next, 0), total.value - 1);
       if (wrapped === current.value) return;
+      direction.value = next > current.value ? 1 : -1;
       emit("update:index", wrapped);
       emit("change", wrapped, props.items[wrapped]);
     }
@@ -196,7 +198,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const imageStyle = computed(() => ({
       ...zoom.style.value,
-      rotate: `${rotation.value}deg`
+      rotate: `${rotation.value}deg`,
+      // Consumed by the lightbox-frame-in keyframe; negative when paging backwards.
+      "--frame-from": `${direction.value * 24}px`
     }));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
@@ -208,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
               createVNode(unref(DialogContent), {
-                class: "fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]",
+                class: "fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none",
                 onKeydown
               }, {
                 default: withCtx(() => [
@@ -226,7 +230,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }),
                   createElementVNode("div", _hoisted_1, [
                     total.value > 1 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(current.value + 1) + " / " + toDisplayString(total.value), 1)) : createCommentVNode("", true),
-                    unref(zoom).zoomed.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(Math.round(unref(zoom).scale.value * 100)) + "% ", 1)) : createCommentVNode("", true),
+                    isZoomed.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(Math.round(scale.value * 100)) + "% ", 1)) : createCommentVNode("", true),
                     createElementVNode("div", _hoisted_4, [
                       renderSlot(_ctx.$slots, "actions", {
                         item: item.value,
@@ -306,7 +310,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", {
                     ref_key: "viewport",
                     ref: viewport,
-                    class: normalizeClass(["relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", unref(zoom).panning.value ? "cursor-grabbing" : unref(zoom).zoomed.value ? "cursor-grab" : ""]),
+                    class: normalizeClass(["relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", isPanning.value ? "cursor-grabbing" : isZoomed.value ? "cursor-grab" : ""]),
                     onWheel: _cache[6] || (_cache[6] = //@ts-ignore
                     (...args) => unref(zoom).onWheel && unref(zoom).onWheel(...args)),
                     onPointerdown: onPointerDown,
@@ -341,7 +345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "data-lightbox-image": "",
                       src: item.value.src,
                       alt: item.value.title ?? "",
-                      class: "max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+                      class: "max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] animate-[lightbox-frame-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none motion-reduce:transition-none",
                       style: normalizeStyle(imageStyle.value),
                       draggable: "false",
                       onLoad: _cache[3] || (_cache[3] = ($event) => loading.value = false),
@@ -388,7 +392,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: entry.src + i,
                           "data-index": i,
                           type: "button",
-                          class: normalizeClass(["size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:ring-ring", i === current.value ? "opacity-100 ring-brand" : "opacity-45 ring-transparent hover:opacity-80"]),
+                          style: normalizeStyle({ "--thumb-delay": `${Math.min(i * 30, 240)}ms` }),
+                          class: normalizeClass(["size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow,scale] duration-[var(--duration-fast)] hover:scale-105 focus-visible:ring-ring animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_both] [animation-delay:var(--thumb-delay)] motion-reduce:animate-none", i === current.value ? "opacity-100 ring-brand" : "opacity-45 ring-transparent hover:opacity-80"]),
                           "aria-label": entry.title ?? `Image ${i + 1}`,
                           onClick: ($event) => go(i)
                         }, [
@@ -398,7 +403,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: "size-full object-cover",
                             draggable: "false"
                           }, null, 8, _hoisted_14)
-                        ], 10, _hoisted_13);
+                        ], 14, _hoisted_13);
                       }), 128))
                     ], 512)) : createCommentVNode("", true)
                   ])

package/dist/chunks/{LpModal-DeZlvK1B.js → LpModal-CezA8eJ3.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, computed, useSlots, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
@@ -26,6 +26,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:open"],
   setup(__props) {
     const props = __props;
+    const describedByAttrs = computed(
+      () => props.description ? {} : { "aria-describedby": void 0 }
+    );
     const widthClass = computed(() => {
       if (props.width) return "";
       return {
@@ -56,10 +59,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm 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(DialogContent), {
-                  class: normalizeClass(["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value]),
-                  style: normalizeStyle(__props.width ? { width: __props.width } : void 0)
-                }, {
+                createVNode(unref(DialogContent), mergeProps({
+                  class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value],
+                  style: __props.width ? { width: __props.width } : void 0
+                }, describedByAttrs.value), {
                   default: withCtx(() => [
                     __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
                       createElementVNode("div", _hoisted_3, [
@@ -115,7 +118,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ]),
                   _: 3
-                }, 8, ["class", "style"])
+                }, 16, ["class", "style"])
               ])
             ]),
             _: 3

package/dist/chunks/{LpSelect-DznhPEWX.js → LpSelect-D5mU4cZO.js}

@@ -60,6 +60,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         else localQuery.value = v;
       }
     });
+    function onOpenChange(_open) {
+      query.value = "";
+    }
     function encode(v) {
       return v === "" ? EMPTY_SENTINEL : v;
     }
@@ -108,7 +111,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         "ignore-filter": true,
         class: "relative",
-        "onUpdate:modelValue": onUpdate
+        "onUpdate:modelValue": onUpdate,
+        "onUpdate:open": onOpenChange
       }, {
         default: withCtx(() => [
           createVNode(unref(ComboboxAnchor), {

package/dist/components/LpConfirmDialog.vue.js

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

package/dist/components/LpLightbox.vue.js

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

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-DeZlvK1B.js";
+import { _ as _sfc_main } from "../chunks/LpModal-CezA8eJ3.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSelect.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSelect-DznhPEWX.js";
+import { _ as _sfc_main } from "../chunks/LpSelect-D5mU4cZO.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -11,7 +11,7 @@ import { _ as _10 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _11 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _12 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _13 } from "./chunks/LpConfirmDialog-C-iOXJIM.js";
+import { _ as _13 } from "./chunks/LpConfirmDialog-DnReh5pF.js";
 import { _ as _14 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _15 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _16 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -25,11 +25,11 @@ import { _ as _22 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _23 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _24 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _25 } from "./chunks/LpInput-BauZRyzm.js";
-import { _ as _26 } from "./chunks/LpLightbox-BYIA9qne.js";
+import { _ as _26 } from "./chunks/LpLightbox-CWdIsthW.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _27 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _28 } from "./chunks/LpLogViewer-BvzRZPjs.js";
-import { _ as _29 } from "./chunks/LpModal-DeZlvK1B.js";
+import { _ as _29 } from "./chunks/LpModal-CezA8eJ3.js";
 import { _ as _30 } from "./chunks/LpNotificationBell-BtfRoL2i.js";
 import { _ as _31 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _32 } from "./chunks/LpOtpInput-DqaT0Z75.js";
@@ -43,7 +43,7 @@ import { _ as _38 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _39 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
 import { _ as _40 } from "./chunks/LpScrollArea-De9DLpa1.js";
 import { _ as _41 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _42 } from "./chunks/LpSelect-DznhPEWX.js";
+import { _ as _42 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _43 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
 import { _ as _44 } from "./chunks/LpSidebar-B11IDRQi.js";
 import { _ as _45 } from "./chunks/LpSkeleton-eSFIo4kD.js";

package/package.json

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

package/src/components/LpLightbox.vue

@@ -94,12 +94,19 @@ const stripEl = ref<HTMLElement | null>(null)
 
 watch(viewport, (el) => zoom.setViewport(el))
 
+// Which way the last navigation went, so the incoming frame slides in from the
+// side it travelled from instead of always drifting the same direction.
+const direction = ref<1 | -1>(1)
+
 function go(next: number) {
   if (!total.value) return
   const wrapped = props.loop
     ? (next + total.value) % total.value
     : Math.min(Math.max(next, 0), total.value - 1)
   if (wrapped === current.value) return
+  // Compare against the raw target, not the wrapped one: stepping past the last
+  // image is still "forward" even though the index jumps back to 0.
+  direction.value = next > current.value ? 1 : -1
   emit("update:index", wrapped)
   emit("change", wrapped, props.items[wrapped])
 }
@@ -250,6 +257,8 @@ async function reencodeToPng(bitmap: ImageBitmap): Promise<Blob> {
 const imageStyle = computed(() => ({
   ...zoom.style.value,
   rotate: `${rotation.value}deg`,
+  // Consumed by the lightbox-frame-in keyframe; negative when paging backwards.
+  "--frame-from": `${direction.value * 24}px`,
 }))
 
 const BTN =
@@ -265,7 +274,7 @@ const ARROW =
         class="fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
       />
       <DialogContent
-        class="fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
         @keydown="onKeydown"
       >
         <!-- reka wants both for a labelled dialog; the caption is the title. -->
@@ -274,8 +283,11 @@ const ARROW =
           {{ item?.description ?? `Image ${current + 1} of ${total}` }}
         </DialogDescription>
 
-        <!-- Toolbar -->
-        <div class="flex shrink-0 items-center gap-1 p-3 text-sm text-white/70">
+        <!-- Toolbar. Chrome drifts in from its own edge, slightly behind the
+             image, so the picture is what arrives first. -->
+        <div
+          class="flex shrink-0 items-center gap-1 p-3 text-sm text-white/70 [--chrome-from:-8px] animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none"
+        >
           <span v-if="total > 1" class="px-2 tabular-nums">{{ current + 1 }} / {{ total }}</span>
           <span v-if="isZoomed" class="px-2 tabular-nums">
             {{ Math.round(scale * 100) }}%
@@ -347,13 +359,16 @@ const ARROW =
             <LpIcon name="lucide:image-off" :size="40" />
             <p class="text-sm">This image couldn't be loaded.</p>
           </div>
+          <!-- Keyed on src so paging remounts the img and replays the slide;
+               without the key Vue patches it in place and the change is a hard
+               cut with no sense of direction. -->
           <img
             v-else-if="item"
             :key="item.src"
             data-lightbox-image
             :src="item.src"
             :alt="item.title ?? ''"
-            class="max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+            class="max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] animate-[lightbox-frame-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none motion-reduce:transition-none"
             :style="imageStyle"
             draggable="false"
             @load="loading = false"
@@ -379,7 +394,9 @@ const ARROW =
         </div>
 
         <!-- Caption + filmstrip -->
-        <div class="shrink-0 p-3 pt-2">
+        <div
+          class="shrink-0 p-3 pt-2 animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none"
+        >
           <slot name="caption" :item="item!" :index="current" :total="total">
             <div v-if="item?.title || item?.description" class="mb-2 text-center">
               <p v-if="item.title" class="truncate text-sm font-medium text-white">
@@ -401,7 +418,8 @@ const ARROW =
               :key="entry.src + i"
               :data-index="i"
               type="button"
-              class="size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:ring-ring"
+              :style="{ '--thumb-delay': `${Math.min(i * 30, 240)}ms` }"
+              class="size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow,scale] duration-[var(--duration-fast)] hover:scale-105 focus-visible:ring-ring animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_both] [animation-delay:var(--thumb-delay)] motion-reduce:animate-none"
               :class="i === current ? 'opacity-100 ring-brand' : 'opacity-45 ring-transparent hover:opacity-80'"
               :aria-label="entry.title ?? `Image ${i + 1}`"
               @click="go(i)"

package/src/components/LpModal.vue

@@ -37,6 +37,13 @@ const props = withDefaults(
 
 defineEmits<{ (e: "update:open", value: boolean): void }>()
 
+// Spread rather than a plain `:aria-describedby` binding: with a description
+// the key must be absent entirely so reka-ui's own generated id survives, and
+// only the description-less case overrides it away.
+const describedByAttrs = computed(() =>
+  props.description ? {} : { "aria-describedby": undefined },
+)
+
 const widthClass = computed(() => {
   if (props.width) return ""
   return {
@@ -85,10 +92,18 @@ const bodyPad = computed(() =>
            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">
+      <!-- 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
+           `aria-describedby={undefined}` is how you drop the attribute).
+           Dropping it here is what silences the warning; a caller that does
+           pass a description keeps the generated id and the link to
+           DialogDescription. -->
       <DialogContent
         class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
         :class="widthClass"
         :style="width ? { width } : undefined"
+        v-bind="describedByAttrs"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
           <div class="flex flex-col gap-1">

package/src/index.ts

@@ -1,169 +1,169 @@
-export { default as LayoutCanvas } from "./components/LayoutCanvas.vue"
-export { default as LpAlert } from "./components/LpAlert.vue"
-export { default as LpAppShell } from "./components/LpAppShell.vue"
-export { default as LpAutocomplete } from "./components/LpAutocomplete.vue"
-export type { AutocompleteOption } from "./components/LpAutocomplete.vue"
-export { default as LpAvatar } from "./components/LpAvatar.vue"
-export { default as LpBadge } from "./components/LpBadge.vue"
-export { default as LpBreadcrumbs } from "./components/LpBreadcrumbs.vue"
-export type { Crumb } from "./components/LpBreadcrumbs.vue"
-export { default as LpButton } from "./components/LpButton.vue"
-export { default as LpCalendar } from "./components/LpCalendar.vue"
-export { default as LpCard } from "./components/LpCard.vue"
-export { default as LpCheckbox } from "./components/LpCheckbox.vue"
-export { default as LpCodeBlock } from "./components/LpCodeBlock.vue"
-export type { CodeLang } from "./components/codeHighlight"
-export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
-export type { Command } from "./components/LpCommandPalette.vue"
-export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
-export { default as LpContextMenu } from "./components/LpContextMenu.vue"
-export type { ContextMenuItemDef } from "./components/LpContextMenu.vue"
-export { default as LpDatePicker } from "./components/LpDatePicker.vue"
-export { default as LpDisclosure } from "./components/LpDisclosure.vue"
-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 LpEmptyState } from "./components/LpEmptyState.vue"
-export { default as LpFileTree } from "./components/LpFileTree.vue"
-export type { FileTreeSummary } from "./components/LpFileTree.vue"
-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 LpInfraNode } from "./components/LpInfraNode.vue"
-export type { InfraNodeData } from "./components/LpInfraNode.vue"
-export { default as LpInput } from "./components/LpInput.vue"
-export { default as LpLightbox } from "./components/LpLightbox.vue"
-export type { LightboxItem } from "./components/lightbox"
-export { fileNameOf } from "./components/lightbox"
-export { default as LpLink } from "./components/LpLink.vue"
-export { default as LpLogViewer } from "./components/LpLogViewer.vue"
-export type { LogLevel, LogLine } from "./components/LpLogViewer.vue"
-export { default as LpModal } from "./components/LpModal.vue"
-export { default as LpNotificationBell } from "./components/LpNotificationBell.vue"
-export type { NotificationItem } from "./components/LpNotificationBell.vue"
-export { default as LpNumberField } from "./components/LpNumberField.vue"
-export { default as LpOtpInput } from "./components/LpOtpInput.vue"
-export { default as LpPagination } from "./components/LpPagination.vue"
-export { default as LpPasswordInput } from "./components/LpPasswordInput.vue"
-export { default as LpPhoneInput } from "./components/LpPhoneInput.vue"
-export type { PhoneDetail } from "./components/LpPhoneInput.vue"
-export { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries"
-export type { Country } from "./components/countries"
-export { default as LpPopover } from "./components/LpPopover.vue"
-export { default as LpProgress } from "./components/LpProgress.vue"
-export { default as LpRadio } from "./components/LpRadio.vue"
-export { default as LpRadioGroup } from "./components/LpRadioGroup.vue"
-export type { RadioOption } from "./components/LpRadioGroup.vue"
-export { default as LpScrollArea } from "./components/LpScrollArea.vue"
-export { default as LpSegmented } from "./components/LpSegmented.vue"
-export type { SegmentedOption } from "./components/LpSegmented.vue"
-export { default as LpSelect } from "./components/LpSelect.vue"
-export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
-export { default as LpServiceNode } from "./components/LpServiceNode.vue"
-export type { ServiceNodeData } from "./components/LpServiceNode.vue"
-export { default as LpSidebar } from "./components/LpSidebar.vue"
-export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
-export { default as LpSkeleton } from "./components/LpSkeleton.vue"
-export { default as LpSlider } from "./components/LpSlider.vue"
-export { default as LpStat } from "./components/LpStat.vue"
-export { default as LpStepper } from "./components/LpStepper.vue"
-export type { Step } from "./components/LpStepper.vue"
-export { default as LpSwitch } from "./components/LpSwitch.vue"
-export { default as LpTable } from "./components/LpTable.vue"
-export type { SortState, TableColumn } from "./components/LpTable.vue"
-export { default as LpTableOfContents } from "./components/LpTableOfContents.vue"
-export type { TocLink } from "./components/LpTableOfContents.vue"
-export { default as LpTabs } from "./components/LpTabs.vue"
-export type { TabItem } from "./components/LpTabs.vue"
-export { default as LpTextarea } from "./components/LpTextarea.vue"
-export { default as LpThemeSwitcher } from "./components/LpThemeSwitcher.vue"
-export { default as LpTilt } from "./components/LpTilt.vue"
-export { default as LpToaster } from "./components/LpToaster.vue"
-export { default as LpTooltip } from "./components/LpTooltip.vue"
-export { default as LpTopologyCanvas } from "./components/LpTopologyCanvas.vue"
-export type {
-  CanvasViewport,
-  EdgeCategory,
-  EdgeObserved,
-  TopologyEdge,
-  TopologyLane,
-  TopologyNode,
-} from "./components/LpTopologyCanvas.vue"
-export { default as LpUptimeBar } from "./components/LpUptimeBar.vue"
-export type { UptimeSegment, UptimeStatus } from "./components/LpUptimeBar.vue"
-
-export {
-  addLeaf,
-  addTab,
-  countBlocks,
-  countLeaves,
-  deserializeLayout,
-  makeLayout,
-  moveLeaf,
-  removeBlock,
-  removeLeaf,
-  reorderTab,
-  resizeAt,
-  setActiveTab,
-  serializeLayout,
-} from "./layout/tree"
-export type { Dir, LayoutNode, Leaf, Side, Split } from "./layout/tree"
-export { blockTitle, defineBlocks } from "./layout/registry"
-export type { BlockDef, BlockRegistry } from "./layout/registry"
-export { useLayout } from "./layout/useLayout"
-export type { UseLayout, UseLayoutOptions } from "./layout/useLayout"
-
-// theme engine — themes are JSON (TokenSet), applied at runtime
-export {
-  applyTheme,
-  applyThemeWithTransition,
-  bootstrapTheme,
-  parseTheme,
-  serializeTheme,
-  themeToCssRule,
-  themeToCssVars,
-  useTheme,
-} from "./theme/useTheme"
-export type { RevealOrigin } from "./theme/useTheme"
-export { DEFAULT_SURFACE } from "./theme/tokens"
-export { defineTheme } from "./theme/define"
-export type { ThemeOverrides } from "./theme/define"
-export type {
-  ColorTokens,
-  DensityTokens,
-  FontTokens,
-  ShapeTokens,
-  SurfaceTokens,
-  TokenSet,
-} from "./theme/tokens"
-export { amber, dark, leavepulse, light, lime, nord, presets, rose, violet } from "./theme/presets"
-export type { PresetName } from "./theme/presets"
-export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from "./theme/config"
-export type { UiConfig } from "./theme/config"
-
-export { useInputFilter } from "./composables/useInputFilter"
-export type { UseInputFilterOptions } from "./composables/useInputFilter"
-export { useTilt } from "./composables/useTilt"
-export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
-export { useZoomPan } from "./composables/useZoomPan"
-export type { UseZoomPan, UseZoomPanOptions } from "./composables/useZoomPan"
-export { useToast } from "./composables/useToast"
-export type {
-  ToastAction,
-  ToastItem,
-  ToastOptions,
-  ToastVariant,
-} from "./composables/useToast"
+export { default as LayoutCanvas } from "./components/LayoutCanvas.vue"
+export { default as LpAlert } from "./components/LpAlert.vue"
+export { default as LpAppShell } from "./components/LpAppShell.vue"
+export { default as LpAutocomplete } from "./components/LpAutocomplete.vue"
+export type { AutocompleteOption } from "./components/LpAutocomplete.vue"
+export { default as LpAvatar } from "./components/LpAvatar.vue"
+export { default as LpBadge } from "./components/LpBadge.vue"
+export { default as LpBreadcrumbs } from "./components/LpBreadcrumbs.vue"
+export type { Crumb } from "./components/LpBreadcrumbs.vue"
+export { default as LpButton } from "./components/LpButton.vue"
+export { default as LpCalendar } from "./components/LpCalendar.vue"
+export { default as LpCard } from "./components/LpCard.vue"
+export { default as LpCheckbox } from "./components/LpCheckbox.vue"
+export { default as LpCodeBlock } from "./components/LpCodeBlock.vue"
+export type { CodeLang } from "./components/codeHighlight"
+export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
+export type { Command } from "./components/LpCommandPalette.vue"
+export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
+export { default as LpContextMenu } from "./components/LpContextMenu.vue"
+export type { ContextMenuItemDef } from "./components/LpContextMenu.vue"
+export { default as LpDatePicker } from "./components/LpDatePicker.vue"
+export { default as LpDisclosure } from "./components/LpDisclosure.vue"
+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 LpEmptyState } from "./components/LpEmptyState.vue"
+export { default as LpFileTree } from "./components/LpFileTree.vue"
+export type { FileTreeSummary } from "./components/LpFileTree.vue"
+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 LpInfraNode } from "./components/LpInfraNode.vue"
+export type { InfraNodeData } from "./components/LpInfraNode.vue"
+export { default as LpInput } from "./components/LpInput.vue"
+export { default as LpLightbox } from "./components/LpLightbox.vue"
+export type { LightboxItem } from "./components/lightbox"
+export { fileNameOf } from "./components/lightbox"
+export { default as LpLink } from "./components/LpLink.vue"
+export { default as LpLogViewer } from "./components/LpLogViewer.vue"
+export type { LogLevel, LogLine } from "./components/LpLogViewer.vue"
+export { default as LpModal } from "./components/LpModal.vue"
+export { default as LpNotificationBell } from "./components/LpNotificationBell.vue"
+export type { NotificationItem } from "./components/LpNotificationBell.vue"
+export { default as LpNumberField } from "./components/LpNumberField.vue"
+export { default as LpOtpInput } from "./components/LpOtpInput.vue"
+export { default as LpPagination } from "./components/LpPagination.vue"
+export { default as LpPasswordInput } from "./components/LpPasswordInput.vue"
+export { default as LpPhoneInput } from "./components/LpPhoneInput.vue"
+export type { PhoneDetail } from "./components/LpPhoneInput.vue"
+export { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries"
+export type { Country } from "./components/countries"
+export { default as LpPopover } from "./components/LpPopover.vue"
+export { default as LpProgress } from "./components/LpProgress.vue"
+export { default as LpRadio } from "./components/LpRadio.vue"
+export { default as LpRadioGroup } from "./components/LpRadioGroup.vue"
+export type { RadioOption } from "./components/LpRadioGroup.vue"
+export { default as LpScrollArea } from "./components/LpScrollArea.vue"
+export { default as LpSegmented } from "./components/LpSegmented.vue"
+export type { SegmentedOption } from "./components/LpSegmented.vue"
+export { default as LpSelect } from "./components/LpSelect.vue"
+export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
+export { default as LpServiceNode } from "./components/LpServiceNode.vue"
+export type { ServiceNodeData } from "./components/LpServiceNode.vue"
+export { default as LpSidebar } from "./components/LpSidebar.vue"
+export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
+export { default as LpSkeleton } from "./components/LpSkeleton.vue"
+export { default as LpSlider } from "./components/LpSlider.vue"
+export { default as LpStat } from "./components/LpStat.vue"
+export { default as LpStepper } from "./components/LpStepper.vue"
+export type { Step } from "./components/LpStepper.vue"
+export { default as LpSwitch } from "./components/LpSwitch.vue"
+export { default as LpTable } from "./components/LpTable.vue"
+export type { SortState, TableColumn } from "./components/LpTable.vue"
+export { default as LpTableOfContents } from "./components/LpTableOfContents.vue"
+export type { TocLink } from "./components/LpTableOfContents.vue"
+export { default as LpTabs } from "./components/LpTabs.vue"
+export type { TabItem } from "./components/LpTabs.vue"
+export { default as LpTextarea } from "./components/LpTextarea.vue"
+export { default as LpThemeSwitcher } from "./components/LpThemeSwitcher.vue"
+export { default as LpTilt } from "./components/LpTilt.vue"
+export { default as LpToaster } from "./components/LpToaster.vue"
+export { default as LpTooltip } from "./components/LpTooltip.vue"
+export { default as LpTopologyCanvas } from "./components/LpTopologyCanvas.vue"
+export type {
+  CanvasViewport,
+  EdgeCategory,
+  EdgeObserved,
+  TopologyEdge,
+  TopologyLane,
+  TopologyNode,
+} from "./components/LpTopologyCanvas.vue"
+export { default as LpUptimeBar } from "./components/LpUptimeBar.vue"
+export type { UptimeSegment, UptimeStatus } from "./components/LpUptimeBar.vue"
+
+export {
+  addLeaf,
+  addTab,
+  countBlocks,
+  countLeaves,
+  deserializeLayout,
+  makeLayout,
+  moveLeaf,
+  removeBlock,
+  removeLeaf,
+  reorderTab,
+  resizeAt,
+  setActiveTab,
+  serializeLayout,
+} from "./layout/tree"
+export type { Dir, LayoutNode, Leaf, Side, Split } from "./layout/tree"
+export { blockTitle, defineBlocks } from "./layout/registry"
+export type { BlockDef, BlockRegistry } from "./layout/registry"
+export { useLayout } from "./layout/useLayout"
+export type { UseLayout, UseLayoutOptions } from "./layout/useLayout"
+
+// theme engine — themes are JSON (TokenSet), applied at runtime
+export {
+  applyTheme,
+  applyThemeWithTransition,
+  bootstrapTheme,
+  parseTheme,
+  serializeTheme,
+  themeToCssRule,
+  themeToCssVars,
+  useTheme,
+} from "./theme/useTheme"
+export type { RevealOrigin } from "./theme/useTheme"
+export { DEFAULT_SURFACE } from "./theme/tokens"
+export { defineTheme } from "./theme/define"
+export type { ThemeOverrides } from "./theme/define"
+export type {
+  ColorTokens,
+  DensityTokens,
+  FontTokens,
+  ShapeTokens,
+  SurfaceTokens,
+  TokenSet,
+} from "./theme/tokens"
+export { amber, dark, leavepulse, light, lime, nord, presets, rose, violet } from "./theme/presets"
+export type { PresetName } from "./theme/presets"
+export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from "./theme/config"
+export type { UiConfig } from "./theme/config"
+
+export { useInputFilter } from "./composables/useInputFilter"
+export type { UseInputFilterOptions } from "./composables/useInputFilter"
+export { useTilt } from "./composables/useTilt"
+export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
+export { useZoomPan } from "./composables/useZoomPan"
+export type { UseZoomPan, UseZoomPanOptions } from "./composables/useZoomPan"
+export { useToast } from "./composables/useToast"
+export type {
+  ToastAction,
+  ToastItem,
+  ToastOptions,
+  ToastVariant,
+} from "./composables/useToast"

package/src/tokens/tokens.css

@@ -347,6 +347,24 @@
   }
 }
 
+/*
+ * Map. Tiles arrive over the network in whatever order they finish, so each one
+ * fades in on load — popping in at full opacity makes a pan look like tearing.
+ * The pin drops onto the point instead of appearing, which reads as placement
+ * rather than a redraw.
+ */
+@keyframes map-tile-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes map-pin-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.8);
+  }
+}
+
 /*
  * Skin painter. A raised panel opts in with .lp-skin-panel and gets the active
  * skin (flat → glass) purely from the surface tokens: border width, an overlay