@leavepulse/ui 0.72.4 → 0.72.5

package/dist/chunks/{LpAppShell-D1-On_5L.js → LpAppShell-DMSJg18Q.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useModel, ref, useId, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createBlock, createCommentVNode, mergeModels } from "vue";
+import { defineComponent, computed, useModel, ref, useId, onMounted, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, withDirectives, vShow, createBlock, Teleport, createCommentVNode, mergeModels } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$6 } from "./LpBottomNav-CbNQQPuL.js";
 import { _ as _sfc_main$2 } from "./LpButton-CFb44IjC.js";
@@ -11,10 +11,6 @@ const _hoisted_1 = ["href"];
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };
 const _hoisted_4 = { class: "truncate text-lg font-semibold" };
-const _hoisted_5 = {
-  key: 0,
-  class: "min-h-0 flex-1 overflow-hidden"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -80,6 +76,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.labels
     );
     const scrollArea = ref(null);
+    const bleedId = `lp-shell-bleed-${useId()}`;
+    const mounted = ref(false);
+    onMounted(() => mounted.value = true);
+    const bleeding = computed(() => props.fullBleed && mounted.value);
     const mainId = `lp-main-${useId()}`;
     function skipToMain() {
       document.getElementById(mainId)?.focus();
@@ -237,20 +237,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             tabindex: "-1",
             class: "flex min-h-0 flex-1 flex-col outline-none"
           }, [
-            __props.fullBleed ? (openBlock(), createElementBlock("div", _hoisted_5, [
-              renderSlot(_ctx.$slots, "default")
-            ])) : (openBlock(), createBlock(_sfc_main$5, {
-              key: 1,
+            withDirectives(createElementVNode("div", {
+              id: bleedId,
+              class: "min-h-0 flex-1 overflow-hidden"
+            }, null, 512), [
+              [vShow, bleeding.value]
+            ]),
+            withDirectives(createVNode(_sfc_main$5, {
               ref_key: "scrollArea",
               ref: scrollArea,
               class: "min-h-0 flex-1",
               "content-class": unref(mergeClass)("px-4 py-6 md:px-6", __props.contentClass)
             }, {
               default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default")
+                (openBlock(), createBlock(Teleport, {
+                  to: `#${bleedId}`,
+                  disabled: !bleeding.value,
+                  defer: ""
+                }, [
+                  renderSlot(_ctx.$slots, "default")
+                ], 8, ["to", "disabled"]))
               ]),
               _: 3
-            }, 8, ["content-class"]))
+            }, 8, ["content-class"]), [
+              [vShow, !bleeding.value]
+            ])
           ]),
           __props.bottomNav ? (openBlock(), createBlock(_sfc_main$6, {
             key: 0,

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

@@ -187,8 +187,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     'header-actions'?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
 } & {
     overlays?: (props: {}) => any;
 }>;

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-D1-On_5L.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-DMSJg18Q.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-DRGgh89B.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BP1ld7-S.js";
 import { _ as _5 } from "./chunks/LpAlert-n5XPAZfv.js";
-import { _ as _6 } from "./chunks/LpAppShell-D1-On_5L.js";
+import { _ as _6 } from "./chunks/LpAppShell-DMSJg18Q.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
 import { _ as _9 } from "./chunks/LpBadge-wUYLN4U9.js";

package/package.json

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

package/src/components/LpAppShell.vue

@@ -31,7 +31,7 @@ export default { inheritAttrs: false }
  * Overlays that aren't part of the frame (command palette, toaster) live in the
  * host next to <LpAppShell>.
  */
-import { computed, ref, useId, watch } from "vue"
+import { computed, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import LpBottomNav from "./LpBottomNav.vue"
 import LpButton from "./LpButton.vue"
@@ -180,6 +180,10 @@ const text = useLabels(
  * a scrolled page landed mid-way down the next one.
  */
 const scrollArea = ref<{ viewportEl: HTMLElement | null } | null>(null)
+const bleedId = `lp-shell-bleed-${useId()}`
+const mounted = ref(false)
+onMounted(() => (mounted.value = true))
+const bleeding = computed(() => props.fullBleed && mounted.value)
 const mainId = `lp-main-${useId()}`
 
 // Focus instead of following the hash, which a router would treat as a navigation.
@@ -348,18 +352,23 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </header>
 
       <!-- full-bleed: page owns the whole region (canvas/map); otherwise the
-           single scroll region with padding. -->
+           single scroll region with padding. The page is rendered once and
+           moved between the two by a teleport rather than drawn in two
+           branches: switching branches remounted the whole page, so a section
+           tab going from a full-bleed page to a padded one cut instead of
+           playing its transition, and lost the page's state. Until mount the
+           page stays in the scroll region, which is what a server render has. -->
       <main :id="mainId" tabindex="-1" class="flex min-h-0 flex-1 flex-col outline-none">
-        <div v-if="fullBleed" class="min-h-0 flex-1 overflow-hidden">
-          <slot />
-        </div>
+        <div v-show="bleeding" :id="bleedId" class="min-h-0 flex-1 overflow-hidden" />
         <LpScrollArea
-          v-else
+          v-show="!bleeding"
           ref="scrollArea"
           class="min-h-0 flex-1"
           :content-class="mergeClass('px-4 py-6 md:px-6', contentClass)"
         >
-          <slot />
+          <Teleport :to="`#${bleedId}`" :disabled="!bleeding" defer>
+            <slot />
+          </Teleport>
         </LpScrollArea>
       </main>
       <LpBottomNav