@leavepulse/ui 0.15.3 → 0.15.5

package/src/index.ts

@@ -45,6 +45,9 @@ 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"
@@ -155,6 +158,8 @@ 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,

package/src/tokens/tokens.css

@@ -311,6 +311,42 @@
   }
 }
 
+/*
+ * Lightbox. The image grows in from slightly under full size so opening reads as
+ * the picture coming toward you rather than a panel appearing; the exit is
+ * shorter and on an accelerating curve, since a dismissal shouldn't be savoured.
+ */
+@keyframes lightbox-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+}
+@keyframes lightbox-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+/*
+ * Frame change. Paging slides the incoming picture in from the side it came
+ * from, so the direction of travel matches the arrow that was pressed. The
+ * component sets --frame-from per navigation.
+ */
+@keyframes lightbox-frame-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--frame-from, 24px));
+  }
+}
+/* Chrome (toolbar, caption, filmstrip) drifts in after the image lands. */
+@keyframes lightbox-chrome-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--chrome-from, 8px));
+  }
+}
+
 /*
  * 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