@leavepulse/ui 0.40.0 → 0.40.1

package/dist/assets/LpCommandPalette-DDGFwOom.css

@@ -0,0 +1,85 @@
+
+/*
+ * Sizes for the split layout. Only the dialog's width animates: the list and
+ * the pane keep fixed widths, and the dialog — overflow hidden — uncovers the
+ * pane from its right edge as it grows. Animating the columns themselves made
+ * every line of the list and the pane re-wrap on every frame.
+ */
+.lp-cmd-dialog[data-v-27071a60] {
+  --lp-cmd-list: min(92vw, 40rem);
+  --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
+  width: var(--lp-cmd-list);
+}
+.lp-cmd-split[data-v-27071a60] {
+  transition:
+    width 300ms var(--ease-emphasized, ease),
+    min-height 300ms var(--ease-emphasized, ease);
+}
+@media (min-width: 768px) {
+.lp-cmd-split .lp-cmd-list[data-v-27071a60] {
+    flex: 0 0 auto;
+    /* the dialog's 1px border on each side */
+    width: calc(var(--lp-cmd-list) - 2px);
+}
+.lp-cmd-dialog[data-pane="open"][data-v-27071a60] {
+    width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
+    min-height: min(76vh, 36rem);
+}
+}
+.lp-cmd-pane[data-v-27071a60] {
+  width: var(--lp-cmd-pane);
+}
+/*
+ * The pane rides in from the right edge while the dialog opens up to it, and
+ * leaves the same way, for as long as the dialog takes to close over it.
+ */
+.lp-cmd-pane-enter-active[data-v-27071a60],
+.lp-cmd-pane-leave-active[data-v-27071a60] {
+  transition:
+    transform 300ms var(--ease-emphasized, ease),
+    opacity 300ms ease;
+}
+.lp-cmd-pane-enter-from[data-v-27071a60],
+.lp-cmd-pane-leave-to[data-v-27071a60] {
+  opacity: 0;
+  transform: translateX(40%);
+}
+.lp-cmd-para[data-v-27071a60] {
+  animation: lp-cmd-para-in-27071a60 260ms ease-out both;
+}
+@keyframes lp-cmd-para-in-27071a60 {
+from {
+    opacity: 0;
+    transform: translateY(4px);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-cmd-split[data-v-27071a60],
+  .lp-cmd-pane-enter-active[data-v-27071a60],
+  .lp-cmd-pane-leave-active[data-v-27071a60] {
+    transition: none;
+}
+.lp-cmd-para[data-v-27071a60] {
+    animation: none;
+}
+}
+.lp-cmd-excerpt[data-v-27071a60] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* Each result eases in; honours reduced motion. */
+.lp-cmd-item[data-v-27071a60] {
+  animation: lp-cmd-in-27071a60 140ms ease-out both;
+}
+@keyframes lp-cmd-in-27071a60 {
+from {
+    opacity: 0;
+    transform: translateY(3px);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-cmd-item[data-v-27071a60] {
+    animation: none;
+}
+}

package/dist/components/LpCommandPalette.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useId, shallowRef, useSlots, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, withModifiers, normalizeStyle, createTextVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withDirectives, withKeys, vModelText, resolveDynamicComponent, Transition, renderSlot } from "vue";
+import { defineComponent, computed, ref, useId, shallowRef, useSlots, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, withModifiers, createTextVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withDirectives, withKeys, vModelText, resolveDynamicComponent, normalizeStyle, Transition, renderSlot } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-D8xyKXcF.js";
@@ -6,7 +6,7 @@ import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-B5eZBHox.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-DDGFwOom.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "flex min-h-0 flex-1" };
@@ -40,7 +40,7 @@ const _hoisted_14 = {
 };
 const _hoisted_15 = {
   key: 0,
-  class: "hidden min-h-0 w-[56%] shrink-0 flex-col border-l border-line md:flex"
+  class: "lp-cmd-pane hidden min-h-0 shrink-0 flex-col border-l border-line md:flex"
 };
 const _hoisted_16 = { class: "lp-cmd-para flex items-center gap-2 text-ink" };
 const _hoisted_17 = { class: "min-w-0 text-base font-semibold" };
@@ -485,11 +485,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([{ "lp-scrim--light": __props.glass }, "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"])
               }, null, 8, ["class"]),
               createVNode(unref(DialogContent), {
-                class: normalizeClass(["fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", [__props.glass ? "lp-glass-overlay" : "bg-surface-raised", __props.previewPane && "lp-cmd-resizing"]]),
-                style: normalizeStyle({
-                  width: paneOpen.value ? "min(92vw, 64rem)" : "min(92vw, 40rem)",
-                  minHeight: paneOpen.value ? "min(76vh, 36rem)" : "0px"
-                }),
+                class: normalizeClass(["lp-cmd-dialog fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", [__props.glass ? "lp-glass-overlay" : "bg-surface-raised", __props.previewPane && "lp-cmd-split"]]),
+                "data-pane": paneOpen.value ? "open" : void 0,
                 onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
                 }, ["prevent"]))
               }, {
@@ -568,7 +565,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createVNode(_sfc_main$2, {
                       ref_key: "scrollRef",
                       ref: scrollRef,
-                      class: "min-h-0 min-w-0 flex-1",
+                      class: "lp-cmd-list min-h-0 min-w-0 flex-1",
                       "content-class": "p-2"
                     }, {
                       default: withCtx(() => [
@@ -765,7 +762,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              }, 8, ["class", "style"])
+              }, 8, ["class", "data-pane"])
             ]),
             _: 3
           })
@@ -775,7 +772,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79f73da4"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27071a60"]]);
 export {
   LpCommandPalette as default
 };

package/package.json

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

package/src/components/LpCommandPalette.vue

@@ -868,12 +868,9 @@ useHotkeys(() =>
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
       />
       <DialogContent
-        class="fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
-        :class="[glass ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-resizing']"
-        :style="{
-          width: paneOpen ? 'min(92vw, 64rem)' : 'min(92vw, 40rem)',
-          minHeight: paneOpen ? 'min(76vh, 36rem)' : '0px',
-        }"
+        class="lp-cmd-dialog fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
+        :class="[glass ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
+        :data-pane="paneOpen ? 'open' : undefined"
         @open-auto-focus.prevent
       >
         <DialogTitle class="sr-only">Command palette</DialogTitle>
@@ -927,7 +924,7 @@ useHotkeys(() =>
 
         <!-- Results -->
         <div class="flex min-h-0 flex-1">
-          <LpScrollArea ref="scrollRef" class="min-h-0 min-w-0 flex-1" content-class="p-2">
+          <LpScrollArea ref="scrollRef" class="lp-cmd-list min-h-0 min-w-0 flex-1" content-class="p-2">
             <!-- While a request is out there is nothing to say yet: "no results"
                  under a spinner reads as an answer, and it is not one. -->
             <p v-if="flat.length === 0 && !failed" class="px-2 py-10 text-center text-sm text-muted">
@@ -1040,7 +1037,7 @@ useHotkeys(() =>
           <Transition name="lp-cmd-pane">
             <aside
               v-if="paneOpen"
-              class="hidden min-h-0 w-[56%] shrink-0 flex-col border-l border-line md:flex"
+              class="lp-cmd-pane hidden min-h-0 shrink-0 flex-col border-l border-line md:flex"
             >
               <LpScrollArea ref="previewRef" class="min-h-0 flex-1" content-class="px-5 py-4">
                 <!-- Keyed by the row, so moving the highlight replays the
@@ -1107,28 +1104,49 @@ useHotkeys(() =>
 
 <style scoped>
 /*
- * The dialog changes width and height when the preview pane comes and goes;
- * eased, so the list does not jump sideways under the pointer.
+ * Sizes for the split layout. Only the dialog's width animates: the list and
+ * the pane keep fixed widths, and the dialog — overflow hidden — uncovers the
+ * pane from its right edge as it grows. Animating the columns themselves made
+ * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-resizing {
-  transition:
-    width 260ms var(--ease-emphasized, ease),
-    min-height 260ms var(--ease-emphasized, ease);
+.lp-cmd-dialog {
+  --lp-cmd-list: min(92vw, 40rem);
+  --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
+  width: var(--lp-cmd-list);
 }
-.lp-cmd-pane-enter-active {
+.lp-cmd-split {
   transition:
-    opacity 220ms ease 60ms,
-    transform 260ms var(--ease-emphasized, ease);
+    width 300ms var(--ease-emphasized, ease),
+    min-height 300ms var(--ease-emphasized, ease);
 }
-.lp-cmd-pane-leave-active {
-  transition: opacity 120ms ease;
+@media (min-width: 768px) {
+  .lp-cmd-split .lp-cmd-list {
+    flex: 0 0 auto;
+    /* the dialog's 1px border on each side */
+    width: calc(var(--lp-cmd-list) - 2px);
+  }
+  .lp-cmd-dialog[data-pane="open"] {
+    width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
+    min-height: min(76vh, 36rem);
+  }
 }
-.lp-cmd-pane-enter-from {
-  opacity: 0;
-  transform: translateX(16px);
+.lp-cmd-pane {
+  width: var(--lp-cmd-pane);
+}
+/*
+ * The pane rides in from the right edge while the dialog opens up to it, and
+ * leaves the same way, for as long as the dialog takes to close over it.
+ */
+.lp-cmd-pane-enter-active,
+.lp-cmd-pane-leave-active {
+  transition:
+    transform 300ms var(--ease-emphasized, ease),
+    opacity 300ms ease;
 }
+.lp-cmd-pane-enter-from,
 .lp-cmd-pane-leave-to {
   opacity: 0;
+  transform: translateX(40%);
 }
 .lp-cmd-para {
   animation: lp-cmd-para-in 260ms ease-out both;
@@ -1140,7 +1158,7 @@ useHotkeys(() =>
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lp-cmd-resizing,
+  .lp-cmd-split,
   .lp-cmd-pane-enter-active,
   .lp-cmd-pane-leave-active {
     transition: none;

package/dist/assets/LpCommandPalette-B5eZBHox.css

@@ -1,64 +0,0 @@
-
-/*
- * The dialog changes width and height when the preview pane comes and goes;
- * eased, so the list does not jump sideways under the pointer.
- */
-.lp-cmd-resizing[data-v-79f73da4] {
-  transition:
-    width 260ms var(--ease-emphasized, ease),
-    min-height 260ms var(--ease-emphasized, ease);
-}
-.lp-cmd-pane-enter-active[data-v-79f73da4] {
-  transition:
-    opacity 220ms ease 60ms,
-    transform 260ms var(--ease-emphasized, ease);
-}
-.lp-cmd-pane-leave-active[data-v-79f73da4] {
-  transition: opacity 120ms ease;
-}
-.lp-cmd-pane-enter-from[data-v-79f73da4] {
-  opacity: 0;
-  transform: translateX(16px);
-}
-.lp-cmd-pane-leave-to[data-v-79f73da4] {
-  opacity: 0;
-}
-.lp-cmd-para[data-v-79f73da4] {
-  animation: lp-cmd-para-in-79f73da4 260ms ease-out both;
-}
-@keyframes lp-cmd-para-in-79f73da4 {
-from {
-    opacity: 0;
-    transform: translateY(4px);
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-cmd-resizing[data-v-79f73da4],
-  .lp-cmd-pane-enter-active[data-v-79f73da4],
-  .lp-cmd-pane-leave-active[data-v-79f73da4] {
-    transition: none;
-}
-.lp-cmd-para[data-v-79f73da4] {
-    animation: none;
-}
-}
-.lp-cmd-excerpt[data-v-79f73da4] {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-/* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-79f73da4] {
-  animation: lp-cmd-in-79f73da4 140ms ease-out both;
-}
-@keyframes lp-cmd-in-79f73da4 {
-from {
-    opacity: 0;
-    transform: translateY(3px);
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-79f73da4] {
-    animation: none;
-}
-}