@leavepulse/ui 0.39.1 → 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.d.ts

@@ -90,8 +90,11 @@ export interface PaletteLabels {
     copyLink: string;
     /** Toast after "copy link"; empty for none. */
     linkCopied: string;
-    /** The preview pane when the highlighted row has nothing to show. */
-    noPreview: string;
+    /**
+     * @deprecated The pane now closes for a row with nothing to show, so this
+     * text is never displayed. Kept so existing `labels` objects still type-check.
+     */
+    noPreview?: string;
 }
 type __VLS_Props = {
     open?: boolean;
@@ -146,14 +149,14 @@ type __VLS_Props = {
      * A pane beside the list showing the highlighted result in full — its
      * `preview` text, or the `preview` slot. For palettes that search
      * content rather than commands: the excerpt says why a row matched, the
-     * pane lets it be read without leaving the page. Opt-in and fixed while
-     * open, so the dialog does not change width as results come and go.
+     * pane lets it be read without leaving the page. It opens only for a row
+     * with `preview` or `excerpt` (any row, with the slot): the dialog eases
+     * wider, the pane slides in, and the text arrives paragraph by paragraph.
      * Hidden below the md breakpoint, where there is no room beside the list.
      *
-     * The dialog takes one width class or the other, never a base width plus
-     * an `md:` override: a consumer's Tailwind build can emit the two in an
-     * order where the base wins, and the pane opened squeezed into 40rem.
-     * Both widths are 92vw on a narrow screen, so no breakpoint is needed.
+     * The width is an inline style rather than a pair of classes: a base
+     * width plus an `md:` override could be emitted by a consumer's Tailwind
+     * build in an order where the base won, and the pane opened squeezed.
      */
     previewPane?: boolean;
     /**

package/dist/components/LpCommandPalette.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useId, shallowRef, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, withModifiers, createTextVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withDirectives, withKeys, vModelText, resolveDynamicComponent, normalizeStyle, 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-DKL4O4JP.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,41 +40,35 @@ 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: "flex items-center gap-2 text-ink" };
+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" };
 const _hoisted_18 = {
   key: 0,
-  class: "mt-0.5 text-xs text-muted"
+  class: "lp-cmd-para mt-0.5 text-xs text-muted"
 };
 const _hoisted_19 = {
-  key: 1,
-  class: "mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90"
-};
-const _hoisted_20 = {
   key: 0,
   class: "rounded-xs bg-brand/25 text-ink"
 };
-const _hoisted_21 = {
-  key: 2,
-  class: "mt-3 text-sm text-muted"
-};
-const _hoisted_22 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted" };
-const _hoisted_23 = { class: "flex items-center gap-1" };
-const _hoisted_24 = { class: "flex items-center gap-1" };
-const _hoisted_25 = {
+const _hoisted_20 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted" };
+const _hoisted_21 = { class: "flex items-center gap-1" };
+const _hoisted_22 = { class: "flex items-center gap-1" };
+const _hoisted_23 = {
   key: 0,
   class: "flex items-center gap-1"
 };
-const _hoisted_26 = {
+const _hoisted_24 = {
   key: 1,
   class: "flex items-center gap-1"
 };
-const _hoisted_27 = { class: "ml-auto flex items-center gap-1" };
+const _hoisted_25 = { class: "ml-auto flex items-center gap-1" };
 const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`";
 const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё";
 const TYPO_MIN = 5;
+const STAGGER_MS = 45;
+const STAGGER_MAX = 10;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpCommandPalette",
   props: {
@@ -312,15 +306,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [...items.slice(0, limit), more];
     }
     const flat = computed(() => grouped.value.flatMap((g) => g.items));
+    const slots = useSlots();
     const active = computed(() => {
       const c = flat.value[selectedIndex.value];
       return c && !moreOf.has(c) ? c : void 0;
     });
     const previewRef = ref(null);
+    const paneOpen = computed(
+      () => props.previewPane && !!active.value && (!!slots.preview || !!(active.value.preview || active.value.excerpt))
+    );
+    const paragraphs = computed(
+      () => (active.value?.preview ?? active.value?.excerpt ?? "").split(/\n{2,}/).map((part) => part.trim()).filter(Boolean)
+    );
     watch(
       () => active.value?.id,
       async () => {
-        if (!props.previewPane) return;
+        if (!paneOpen.value) return;
         await nextTick();
         const viewport = previewRef.value?.viewportEl;
         if (!viewport) return;
@@ -484,10 +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 ? "w-[min(92vw,64rem)] md:h-[min(76vh,36rem)]" : "w-[min(92vw,40rem)]"
-                ]]),
+                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"]))
               }, {
@@ -566,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(() => [
@@ -687,71 +686,83 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }, 512),
-                    __props.previewPane ? (openBlock(), createElementBlock("aside", _hoisted_15, [
-                      createVNode(_sfc_main$2, {
-                        ref_key: "previewRef",
-                        ref: previewRef,
-                        class: "min-h-0 flex-1",
-                        "content-class": "px-5 py-4"
-                      }, {
-                        default: withCtx(() => [
-                          active.value ? renderSlot(_ctx.$slots, "preview", {
-                            key: 0,
-                            command: active.value
-                          }, () => [
-                            createElementVNode("div", _hoisted_16, [
-                              active.value.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                                key: 0,
-                                name: active.value.icon,
-                                size: 16,
-                                class: "shrink-0 text-muted"
-                              }, null, 8, ["name"])) : createCommentVNode("", true),
-                              createElementVNode("h3", _hoisted_17, toDisplayString(active.value.label), 1)
+                    createVNode(Transition, { name: "lp-cmd-pane" }, {
+                      default: withCtx(() => [
+                        paneOpen.value ? (openBlock(), createElementBlock("aside", _hoisted_15, [
+                          createVNode(_sfc_main$2, {
+                            ref_key: "previewRef",
+                            ref: previewRef,
+                            class: "min-h-0 flex-1",
+                            "content-class": "px-5 py-4"
+                          }, {
+                            default: withCtx(() => [
+                              active.value ? (openBlock(), createElementBlock("div", {
+                                key: active.value.id
+                              }, [
+                                renderSlot(_ctx.$slots, "preview", { command: active.value }, () => [
+                                  createElementVNode("div", _hoisted_16, [
+                                    active.value.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                                      key: 0,
+                                      name: active.value.icon,
+                                      size: 16,
+                                      class: "shrink-0 text-muted"
+                                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                                    createElementVNode("h3", _hoisted_17, toDisplayString(active.value.label), 1)
+                                  ]),
+                                  active.value.description ? (openBlock(), createElementBlock("p", _hoisted_18, toDisplayString(active.value.description), 1)) : createCommentVNode("", true),
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(paragraphs.value, (para, i) => {
+                                    return openBlock(), createElementBlock("p", {
+                                      key: i,
+                                      class: "lp-cmd-para mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90",
+                                      style: normalizeStyle({ animationDelay: `${Math.min(i + 1, STAGGER_MAX) * STAGGER_MS}ms` })
+                                    }, [
+                                      (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(para, active.value.highlight), (p, pi) => {
+                                        return openBlock(), createElementBlock(Fragment, {
+                                          key: `p${pi}`
+                                        }, [
+                                          p.hit ? (openBlock(), createElementBlock("mark", _hoisted_19, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                            createTextVNode(toDisplayString(p.text), 1)
+                                          ], 64))
+                                        ], 64);
+                                      }), 128))
+                                    ], 4);
+                                  }), 128))
+                                ], true)
+                              ])) : createCommentVNode("", true)
                             ]),
-                            active.value.description ? (openBlock(), createElementBlock("p", _hoisted_18, toDisplayString(active.value.description), 1)) : createCommentVNode("", true),
-                            active.value.preview || active.value.excerpt ? (openBlock(), createElementBlock("p", _hoisted_19, [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(active.value.preview ?? active.value.excerpt ?? "", active.value.highlight), (p, pi) => {
-                                return openBlock(), createElementBlock(Fragment, {
-                                  key: `p${pi}`
-                                }, [
-                                  p.hit ? (openBlock(), createElementBlock("mark", _hoisted_20, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                    createTextVNode(toDisplayString(p.text), 1)
-                                  ], 64))
-                                ], 64);
-                              }), 128))
-                            ])) : (openBlock(), createElementBlock("p", _hoisted_21, toDisplayString(text.value.noPreview), 1))
-                          ], true) : createCommentVNode("", true)
-                        ]),
-                        _: 3
-                      }, 512)
-                    ])) : createCommentVNode("", true)
+                            _: 3
+                          }, 512)
+                        ])) : createCommentVNode("", true)
+                      ]),
+                      _: 3
+                    })
                   ]),
-                  createElementVNode("div", _hoisted_22, [
-                    createElementVNode("span", _hoisted_23, [
+                  createElementVNode("div", _hoisted_20, [
+                    createElementVNode("span", _hoisted_21, [
                       _cache[7] || (_cache[7] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↑", -1)),
                       _cache[8] || (_cache[8] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↓", -1)),
                       createTextVNode(" " + toDisplayString(text.value.navigate), 1)
                     ]),
-                    createElementVNode("span", _hoisted_24, [
+                    createElementVNode("span", _hoisted_22, [
                       _cache[9] || (_cache[9] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↵", -1)),
                       createTextVNode(" " + toDisplayString(text.value.select), 1)
                     ]),
-                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_25, [
+                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_23, [
                       _cache[10] || (_cache[10] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "tab", -1)),
                       createTextVNode(" " + toDisplayString(text.value.actions), 1)
                     ])) : createCommentVNode("", true),
-                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_26, [
+                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_24, [
                       _cache[11] || (_cache[11] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "⌫", -1)),
                       createTextVNode(" " + toDisplayString(text.value.back), 1)
                     ])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_27, [
+                    createElementVNode("span", _hoisted_25, [
                       _cache[12] || (_cache[12] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "esc", -1)),
                       createTextVNode(" " + toDisplayString(text.value.close), 1)
                     ])
                   ])
                 ]),
                 _: 3
-              }, 8, ["class"])
+              }, 8, ["class", "data-pane"])
             ]),
             _: 3
           })
@@ -761,7 +772,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fcb38dbd"]]);
+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.39.1",
+  "version": "0.40.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -136,8 +136,11 @@ export interface PaletteLabels {
   copyLink: string
   /** Toast after "copy link"; empty for none. */
   linkCopied: string
-  /** The preview pane when the highlighted row has nothing to show. */
-  noPreview: string
+  /**
+   * @deprecated The pane now closes for a row with nothing to show, so this
+   * text is never displayed. Kept so existing `labels` objects still type-check.
+   */
+  noPreview?: string
 }
 
 const props = withDefaults(
@@ -194,14 +197,14 @@ const props = withDefaults(
      * A pane beside the list showing the highlighted result in full — its
      * `preview` text, or the `preview` slot. For palettes that search
      * content rather than commands: the excerpt says why a row matched, the
-     * pane lets it be read without leaving the page. Opt-in and fixed while
-     * open, so the dialog does not change width as results come and go.
+     * pane lets it be read without leaving the page. It opens only for a row
+     * with `preview` or `excerpt` (any row, with the slot): the dialog eases
+     * wider, the pane slides in, and the text arrives paragraph by paragraph.
      * Hidden below the md breakpoint, where there is no room beside the list.
      *
-     * The dialog takes one width class or the other, never a base width plus
-     * an `md:` override: a consumer's Tailwind build can emit the two in an
-     * order where the base wins, and the pane opened squeezed into 40rem.
-     * Both widths are 92vw on a narrow screen, so no breakpoint is needed.
+     * The width is an inline style rather than a pair of classes: a base
+     * width plus an `md:` override could be emitted by a consumer's Tailwind
+     * build in an order where the base won, and the pane opened squeezed.
      */
     previewPane?: boolean
     /**
@@ -605,7 +608,7 @@ function folded(name: string, items: Command[]): Command[] {
 // Flat list in render order — what arrow keys walk through.
 const flat = computed(() => grouped.value.flatMap((g) => g.items))
 
-defineSlots<{
+const slots = defineSlots<{
   /** Body of the preview pane for the highlighted command. */
   preview?: (props: { command: Command }) => unknown
 }>()
@@ -616,6 +619,30 @@ const active = computed<Command | undefined>(() => {
 })
 const previewRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
 
+/*
+ * The pane opens only for a row that has something to show: an empty pane
+ * beside a list of commands is a column of dead space. With the slot the app
+ * decides what to show, so any highlighted row opens it.
+ */
+const paneOpen = computed(
+  () => props.previewPane && !!active.value && (!!slots.preview || !!(active.value.preview || active.value.excerpt)),
+)
+
+/*
+ * The text in paragraphs, so they can arrive one after another. A blank line
+ * separates them, as in the `preview` the consumer wrote.
+ */
+const paragraphs = computed(() =>
+  (active.value?.preview ?? active.value?.excerpt ?? "")
+    .split(/\n{2,}/)
+    .map((part) => part.trim())
+    .filter(Boolean),
+)
+
+/** Stagger between paragraphs, capped so a long section does not trickle in. */
+const STAGGER_MS = 45
+const STAGGER_MAX = 10
+
 /*
  * A preview is opened for the match, so the pane lands on it: the first
  * highlighted word is brought into view, and a result without one starts
@@ -624,7 +651,7 @@ const previewRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
 watch(
   () => active.value?.id,
   async () => {
-    if (!props.previewPane) return
+    if (!paneOpen.value) return
     await nextTick()
     const viewport = previewRef.value?.viewportEl
     if (!viewport) return
@@ -841,11 +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 ? 'w-[min(92vw,64rem)] md:h-[min(76vh,36rem)]' : 'w-[min(92vw,40rem)]',
-        ]"
+        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>
@@ -899,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">
@@ -1007,35 +1032,41 @@ useHotkeys(() =>
               </button>
             </div>
           </LpScrollArea>
-          <aside
-            v-if="previewPane"
-            class="hidden min-h-0 w-[56%] 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">
-              <template v-if="active">
-                <slot name="preview" :command="active">
-                  <div class="flex items-center gap-2 text-ink">
-                    <LpIcon v-if="active.icon" :name="active.icon" :size="16" class="shrink-0 text-muted" />
-                    <h3 class="min-w-0 text-base font-semibold">{{ active.label }}</h3>
-                  </div>
-                  <p v-if="active.description" class="mt-0.5 text-xs text-muted">{{ active.description }}</p>
-                  <p
-                    v-if="active.preview || active.excerpt"
-                    class="mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90"
-                  >
-                    <template
-                      v-for="(p, pi) in highlight(active.preview ?? active.excerpt ?? '', active.highlight)"
-                      :key="`p${pi}`"
+          <!-- Slides in beside the list while the dialog widens to make room,
+               and out again for a row with nothing to show. -->
+          <Transition name="lp-cmd-pane">
+            <aside
+              v-if="paneOpen"
+              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
+                     entrance rather than swapping text in place. -->
+                <div v-if="active" :key="active.id">
+                  <slot name="preview" :command="active">
+                    <div class="lp-cmd-para flex items-center gap-2 text-ink">
+                      <LpIcon v-if="active.icon" :name="active.icon" :size="16" class="shrink-0 text-muted" />
+                      <h3 class="min-w-0 text-base font-semibold">{{ active.label }}</h3>
+                    </div>
+                    <p v-if="active.description" class="lp-cmd-para mt-0.5 text-xs text-muted">
+                      {{ active.description }}
+                    </p>
+                    <p
+                      v-for="(para, i) in paragraphs"
+                      :key="i"
+                      class="lp-cmd-para mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90"
+                      :style="{ animationDelay: `${Math.min(i + 1, STAGGER_MAX) * STAGGER_MS}ms` }"
                     >
-                      <mark v-if="p.hit" class="rounded-xs bg-brand/25 text-ink">{{ p.text }}</mark>
-                      <template v-else>{{ p.text }}</template>
-                    </template>
-                  </p>
-                  <p v-else class="mt-3 text-sm text-muted">{{ text.noPreview }}</p>
-                </slot>
-              </template>
-            </LpScrollArea>
-          </aside>
+                      <template v-for="(p, pi) in highlight(para, active.highlight)" :key="`p${pi}`">
+                        <mark v-if="p.hit" class="rounded-xs bg-brand/25 text-ink">{{ p.text }}</mark>
+                        <template v-else>{{ p.text }}</template>
+                      </template>
+                    </p>
+                  </slot>
+                </div>
+              </LpScrollArea>
+            </aside>
+          </Transition>
         </div>
 
         <!-- Footer hints -->
@@ -1072,6 +1103,70 @@ useHotkeys(() =>
 </template>
 
 <style scoped>
+/*
+ * 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 {
+  --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 {
+  transition:
+    width 300ms var(--ease-emphasized, ease),
+    min-height 300ms var(--ease-emphasized, 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 {
+  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;
+}
+@keyframes lp-cmd-para-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-cmd-split,
+  .lp-cmd-pane-enter-active,
+  .lp-cmd-pane-leave-active {
+    transition: none;
+  }
+  .lp-cmd-para {
+    animation: none;
+  }
+}
 .lp-cmd-excerpt {
   display: -webkit-box;
   -webkit-box-orient: vertical;

package/dist/assets/LpCommandPalette-DKL4O4JP.css

@@ -1,21 +0,0 @@
-
-.lp-cmd-excerpt[data-v-fcb38dbd] {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-/* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-fcb38dbd] {
-  animation: lp-cmd-in-fcb38dbd 140ms ease-out both;
-}
-@keyframes lp-cmd-in-fcb38dbd {
-from {
-    opacity: 0;
-    transform: translateY(3px);
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-fcb38dbd] {
-    animation: none;
-}
-}