@leavepulse/ui 0.71.1 → 0.72.0

package/dist/chunks/{LpThemeStudio-B2nPaG-h.js → LpThemeStudio-DWtG6OZZ.js}

@@ -1,15 +1,16 @@
-import { shallowRef, computed, ref, watch, watchEffect, defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
-import { u as usePaletteTheme } from "./palette-BiY7yQZL.js";
+import { shallowRef, computed, ref, watch, watchEffect, defineComponent, openBlock, createElementBlock, unref, createElementVNode, toDisplayString, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, Fragment, renderList, normalizeStyle, h } from "vue";
+import { u as usePaletteTheme } from "./palette-Cvxl_1tM.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { usePersisted } from "../composables/usePersisted.js";
 import { parseColor, rgbToHex } from "../components/color.js";
-import { p as presets, u as useTheme, o as themeToCssRule, s as serializeTheme } from "./useTheme-BOV_-AiY.js";
-import { _ as _sfc_main$1 } from "./LpButton-BQDAFXBd.js";
-import { _ as _sfc_main$6 } from "./LpCodeBlock-Czu-fq1M.js";
-import { _ as _sfc_main$4 } from "./LpColorPicker-Ee1DZiRd.js";
-import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
-import { _ as _sfc_main$5 } from "./LpSegmented-D2VST0o3.js";
-import { _ as _sfc_main$3 } from "./LpThemeStudioSection-BwhqYDLf.js";
+import { p as presets, u as useTheme, o as themeToCssRule, s as serializeTheme, _ as _sfc_main$8 } from "./LpThemeProvider-8MG6yqU9.js";
+import { _ as _sfc_main$1 } from "./LpButton-Dk7eT4ro.js";
+import { _ as _sfc_main$7 } from "./LpCodeBlock-j0W5bpmF.js";
+import { _ as _sfc_main$4 } from "./LpColorPicker-1y1QJHZR.js";
+import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$5 } from "./LpSegmented-CeACsMMA.js";
+import { _ as _sfc_main$6 } from "./LpDisclosure-Cpa7Hc5T.js";
+import { _ as _sfc_main$3 } from "./LpThemeStudioSection-B7bt8Iyg.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
   return {
@@ -185,24 +186,28 @@ function create(key, config) {
   const preview = (draft) => ({ theme: build(draft), exported: exportState(draft) });
   return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset, preview };
 }
-const _hoisted_1 = { class: "flex flex-col gap-4" };
-const _hoisted_2 = { class: "flex items-center justify-between" };
+const _hoisted_1 = { class: "@container flex flex-col gap-4" };
+const _hoisted_2 = {
+  key: 0,
+  class: "flex items-center justify-between"
+};
 const _hoisted_3 = { class: "text-sm font-semibold text-ink" };
-const _hoisted_4 = { class: "grid grid-cols-4 gap-2" };
+const _hoisted_4 = { class: "grid grid-cols-3 gap-2 @md:grid-cols-4 @2xl:grid-cols-8" };
 const _hoisted_5 = ["aria-pressed"];
-const _hoisted_6 = { class: "max-w-full truncate" };
-const _hoisted_7 = ["aria-pressed", "onClick"];
-const _hoisted_8 = { class: "max-w-full truncate" };
-const _hoisted_9 = { class: "flex flex-wrap items-center gap-1.5" };
-const _hoisted_10 = ["aria-label", "aria-pressed", "onClick"];
-const _hoisted_11 = {
-  key: 5,
-  class: "flex flex-col gap-2 border-t border-line pt-3"
+const _hoisted_6 = { class: "absolute inset-0 [clip-path:polygon(100%_0,100%_100%,0_100%)]" };
+const _hoisted_7 = { class: "max-w-full truncate" };
+const _hoisted_8 = ["aria-pressed", "onClick"];
+const _hoisted_9 = { class: "max-w-full truncate" };
+const _hoisted_10 = { class: "flex flex-wrap items-center gap-2" };
+const _hoisted_11 = ["aria-label", "aria-pressed", "onClick"];
+const _hoisted_12 = {
+  key: 3,
+  class: "flex flex-col gap-1.5"
 };
-const _hoisted_12 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_13 = { class: "text-[11px] font-medium tracking-wide text-muted uppercase" };
-const TILE = "flex min-w-0 flex-col items-center gap-1 rounded-control p-1.5 text-[11px] text-muted transition-colors duration-(--duration-fast) hover:bg-surface-soft hover:text-ink";
-const SWATCH = "relative size-8 overflow-hidden rounded-full ring-2 transition-[box-shadow] duration-(--duration-fast)";
+const _hoisted_13 = { class: "text-xs font-medium text-muted-strong" };
+const _hoisted_14 = { class: "flex flex-col gap-2 pt-1" };
+const TILE = "group flex min-w-0 flex-col gap-1.5 text-left text-xs text-muted transition-colors duration-(--duration-fast) hover:text-ink aria-pressed:text-ink";
+const FRAME = "relative block aspect-[8/5] w-full overflow-hidden rounded-control transition-[box-shadow] duration-(--duration-fast)";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpThemeStudio",
   props: {
@@ -249,11 +254,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const r = event.currentTarget?.getBoundingClientRect();
       return r ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : void 0;
     }
+    const ring = (name) => state.value.theme === name ? "ring-2 ring-brand" : "ring-1 ring-line group-hover:ring-line-strong";
+    const tuned = (theme) => state.value.brand ? withBrand(theme, state.value.brand) : theme;
+    const Miniature = (p) => h(_sfc_main$8, { theme: p.theme, class: "absolute inset-0 flex bg-surface" }, () => [
+      h("span", { class: "h-full w-1/4 border-r border-line bg-surface-raised" }),
+      h("span", { class: "flex min-w-0 flex-1 flex-col gap-[10%] p-[10%]" }, [
+        h("span", { class: "h-[12%] w-3/4 rounded-full bg-ink/80" }),
+        h("span", { class: "h-[10%] w-1/2 rounded-full bg-muted/60" }),
+        h("span", { class: "mt-auto h-[24%] w-1/2 rounded-control bg-brand" })
+      ])
+    ]);
     const tuneTo = (key, value) => studio.tune({ [key]: value });
-    usePaletteTheme(() => studio ?? void 0);
+    usePaletteTheme(() => studio ?? void 0, { hide: props.hide });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
+        unref(text).title || unref(changed) ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("p", _hoisted_3, toDisplayString(unref(text).title), 1),
           unref(changed) ? (openBlock(), createBlock(_sfc_main$1, {
             key: 0,
@@ -270,10 +285,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true)
-        ]),
+        ])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "start", { studio: unref(studio) }),
         shows("themes") ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 0,
+          key: 1,
           label: unref(text).themes
         }, {
           default: withCtx(() => [
@@ -281,46 +296,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               unref(studio).system.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 type: "button",
-                class: normalizeClass([TILE, unref(state).theme === unref(STUDIO_SYSTEM) && "bg-surface-soft text-ink"]),
+                class: normalizeClass(TILE),
                 "aria-pressed": unref(state).theme === unref(STUDIO_SYSTEM),
                 onClick: _cache[1] || (_cache[1] = ($event) => unref(studio).pickTheme(unref(STUDIO_SYSTEM), origin($event)))
               }, [
                 createElementVNode("span", {
-                  class: normalizeClass([SWATCH, unref(state).theme === unref(STUDIO_SYSTEM) ? "ring-brand" : "ring-line"]),
-                  style: normalizeStyle({ background: `linear-gradient(135deg, ${unref(studio).system.value.light.colors.surface} 50%, ${unref(studio).system.value.dark.colors.surface} 50%)` })
-                }, null, 6),
-                createElementVNode("span", _hoisted_6, toDisplayString(unref(text).system), 1)
-              ], 10, _hoisted_5)) : createCommentVNode("", true),
+                  class: normalizeClass([FRAME, ring(unref(STUDIO_SYSTEM))])
+                }, [
+                  createVNode(Miniature, {
+                    theme: tuned(unref(studio).system.value.light)
+                  }, null, 8, ["theme"]),
+                  createElementVNode("span", _hoisted_6, [
+                    createVNode(Miniature, {
+                      theme: tuned(unref(studio).system.value.dark)
+                    }, null, 8, ["theme"])
+                  ])
+                ], 2),
+                createElementVNode("span", _hoisted_7, toDisplayString(unref(text).system), 1)
+              ], 8, _hoisted_5)) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(studio).themes.value, (t) => {
                 return openBlock(), createElementBlock("button", {
                   key: t.name,
                   type: "button",
-                  class: normalizeClass([TILE, unref(state).theme === t.name && "bg-surface-soft text-ink"]),
+                  class: normalizeClass(TILE),
                   "aria-pressed": unref(state).theme === t.name,
                   onClick: ($event) => unref(studio).pickTheme(t.name, origin($event))
                 }, [
                   createElementVNode("span", {
-                    class: normalizeClass([SWATCH, unref(state).theme === t.name ? "ring-brand" : "ring-line"]),
-                    style: normalizeStyle({ background: t.colors.surface })
+                    class: normalizeClass([FRAME, ring(t.name)])
                   }, [
-                    createElementVNode("span", {
-                      class: "absolute inset-x-0 bottom-0 h-1/2",
-                      style: normalizeStyle({ background: t.colors.brand })
-                    }, null, 4)
-                  ], 6),
-                  createElementVNode("span", _hoisted_8, toDisplayString(t.name), 1)
-                ], 10, _hoisted_7);
+                    createVNode(Miniature, {
+                      theme: tuned(t)
+                    }, null, 8, ["theme"])
+                  ], 2),
+                  createElementVNode("span", _hoisted_9, toDisplayString(t.name), 1)
+                ], 8, _hoisted_8);
               }), 128))
             ])
           ]),
           _: 1
         }, 8, ["label"])) : createCommentVNode("", true),
         shows("brand") ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 1,
+          key: 2,
           label: unref(text).brand
         }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_10, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(swatches.value, (color) => {
                 return openBlock(), createElementBlock("button", {
                   key: color,
@@ -330,79 +351,92 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "aria-label": `${unref(text).brand} ${color}`,
                   "aria-pressed": unref(brand) === color,
                   onClick: ($event) => setBrand(color)
-                }, null, 14, _hoisted_10);
+                }, null, 14, _hoisted_11);
               }), 128)),
               createVNode(_sfc_main$4, {
-                "model-value": unref(brand),
+                variant: "swatch",
                 size: "sm",
+                selected: !swatches.value.includes(unref(brand)),
+                swatches: [],
+                "model-value": unref(brand),
                 "aria-label": unref(text).anyBrand,
                 "onUpdate:modelValue": setBrand
-              }, null, 8, ["model-value", "aria-label"])
+              }, null, 8, ["selected", "model-value", "aria-label"])
             ])
           ]),
           _: 1
         }, 8, ["label"])) : createCommentVNode("", true),
-        shows("corners") ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 2,
-          label: unref(text).corners
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$5, {
-              "model-value": unref(state).corners,
-              size: "sm",
-              options: [{ value: "sharp", label: unref(text).sharp }, { value: "default", label: unref(text).default }, { value: "round", label: unref(text).round }],
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tuneTo("corners", $event))
-            }, null, 8, ["model-value", "options"])
-          ]),
-          _: 1
-        }, 8, ["label"])) : createCommentVNode("", true),
-        shows("size") ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 3,
-          label: unref(text).size
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$5, {
-              "model-value": unref(state).size,
-              size: "sm",
-              options: [{ value: "compact", label: unref(text).compact }, { value: "default", label: unref(text).default }, { value: "comfortable", label: unref(text).comfortable }],
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tuneTo("size", $event))
-            }, null, 8, ["model-value", "options"])
+        shows("corners") || shows("size") || shows("motion") ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          shows("corners") ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 0,
+            inline: "",
+            label: unref(text).corners
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$5, {
+                "model-value": unref(state).corners,
+                size: "sm",
+                options: [{ value: "sharp", label: unref(text).sharp }, { value: "default", label: unref(text).default }, { value: "round", label: unref(text).round }],
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tuneTo("corners", $event))
+              }, null, 8, ["model-value", "options"])
+            ]),
+            _: 1
+          }, 8, ["label"])) : createCommentVNode("", true),
+          shows("size") ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 1,
+            inline: "",
+            label: unref(text).size
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$5, {
+                "model-value": unref(state).size,
+                size: "sm",
+                options: [{ value: "compact", label: unref(text).compact }, { value: "default", label: unref(text).default }, { value: "comfortable", label: unref(text).comfortable }],
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tuneTo("size", $event))
+              }, null, 8, ["model-value", "options"])
+            ]),
+            _: 1
+          }, 8, ["label"])) : createCommentVNode("", true),
+          shows("motion") ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 2,
+            inline: "",
+            label: unref(text).motion
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$5, {
+                "model-value": unref(state).motion,
+                size: "sm",
+                options: [{ value: "fast", label: unref(text).fast }, { value: "normal", label: unref(text).normal }, { value: "slow", label: unref(text).slow }],
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tuneTo("motion", $event))
+              }, null, 8, ["model-value", "options"])
+            ]),
+            _: 1
+          }, 8, ["label"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "end", { studio: unref(studio) }),
+        shows("export") ? (openBlock(), createBlock(_sfc_main$6, { key: 4 }, {
+          trigger: withCtx(() => [
+            createElementVNode("span", _hoisted_13, toDisplayString(unref(text).export), 1)
           ]),
-          _: 1
-        }, 8, ["label"])) : createCommentVNode("", true),
-        shows("motion") ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 4,
-          label: unref(text).motion
-        }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$5, {
-              "model-value": unref(state).motion,
-              size: "sm",
-              options: [{ value: "fast", label: unref(text).fast }, { value: "normal", label: unref(text).normal }, { value: "slow", label: unref(text).slow }],
-              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tuneTo("motion", $event))
-            }, null, 8, ["model-value", "options"])
+            createElementVNode("div", _hoisted_14, [
+              createVNode(_sfc_main$5, {
+                modelValue: format.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => format.value = $event),
+                size: "sm",
+                options: [{ value: "code", label: "Code" }, { value: "json", label: "JSON" }, { value: "css", label: "CSS" }]
+              }, null, 8, ["modelValue"]),
+              createVNode(_sfc_main$7, {
+                "model-value": unref(exported)[format.value],
+                lang: format.value === "json" ? "json" : format.value === "css" ? "plain" : "ts",
+                copyable: "",
+                height: "140px",
+                class: "text-[11px]"
+              }, null, 8, ["model-value", "lang"])
+            ])
           ]),
           _: 1
-        }, 8, ["label"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "end", { studio: unref(studio) }),
-        shows("export") ? (openBlock(), createElementBlock("div", _hoisted_11, [
-          createElementVNode("div", _hoisted_12, [
-            createElementVNode("span", _hoisted_13, toDisplayString(unref(text).export), 1),
-            createVNode(_sfc_main$5, {
-              modelValue: format.value,
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => format.value = $event),
-              size: "sm",
-              options: [{ value: "code", label: "Code" }, { value: "json", label: "JSON" }, { value: "css", label: "CSS" }]
-            }, null, 8, ["modelValue"])
-          ]),
-          createVNode(_sfc_main$6, {
-            "model-value": unref(exported)[format.value],
-            lang: format.value === "json" ? "json" : format.value === "css" ? "plain" : "ts",
-            copyable: "",
-            height: "140px",
-            class: "text-[11px]"
-          }, null, 8, ["model-value", "lang"])
-        ])) : createCommentVNode("", true)
+        })) : createCommentVNode("", true)
       ]);
     };
   }

package/dist/chunks/LpThemeStudioSection-B7bt8Iyg.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex min-h-8 flex-wrap items-center justify-between gap-x-4 gap-y-1.5"
+};
+const _hoisted_2 = { class: "text-xs font-medium text-muted-strong" };
+const _hoisted_3 = {
+  key: 1,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_4 = { class: "text-xs font-medium text-muted-strong" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeStudioSection",
+  props: {
+    label: {},
+    inline: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.inline ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1),
+        renderSlot(_ctx.$slots, "default")
+      ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+        createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1),
+        renderSlot(_ctx.$slots, "default")
+      ]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpThemeSwitcher-C0A5sg_E.js → LpThemeSwitcher-Dcx-VkSk.js}

@@ -1,15 +1,15 @@
 import { defineComponent, ref, useId, computed, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { u as usePaletteTheme } from "./palette-BiY7yQZL.js";
+import { u as usePaletteTheme } from "./palette-Cvxl_1tM.js";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { useLabels } from "../composables/useLpConfig.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-import { u as useTheme, p as presets } from "./useTheme-BOV_-AiY.js";
-import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-B2nPaG-h.js";
+import { u as useTheme, p as presets } from "./LpThemeProvider-8MG6yqU9.js";
+import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-DWtG6OZZ.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-DXpFJjlO.js";
-import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
-import { _ as _sfc_main$4 } from "./LpRollingText-DiL717LK.js";
-import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-rx2tCjwk.js";
+import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-B54Pje7P.js";
+import { _ as _sfc_main$3 } from "./LpShift-BAp8lGoa.js";
 const _hoisted_1 = ["aria-label", "title"];
 const _hoisted_2 = {
   key: 1,
@@ -125,6 +125,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!pair) return;
       if (tuner) {
         tuner.pickTheme(STUDIO_SYSTEM);
+        emit("update:modelValue", STUDIO_SYSTEM);
         emit("change", tuner.theme.value);
         return;
       }
@@ -169,7 +170,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const triggerLabel = computed(
       () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value)
     );
-    usePaletteTheme(() => tuner ?? void 0);
+    usePaletteTheme(() => tuner ?? void 0, { hide: props.studioHide });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
         open: studioOpen.value,

package/dist/chunks/{LpTimeField-DQ8WvPr2.js → LpTimeField-BawSVsmt.js}

@@ -4,7 +4,7 @@ import { Time } from "@internationalized/date";
 import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
 import { useFieldControl, focusLeft } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,

package/dist/chunks/{LpToaster-BTTl_wuy.js → LpToaster-50hp_B5O.js}

@@ -4,8 +4,8 @@ import { prefersReducedMotion } from "../composables/easing.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-Dmq7DmFw.js";
-import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-DaD1KCn6.js";
+import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
 import { toneLook } from "../components/tone.js";
 import { usePortalTarget } from "../composables/useView.js";
 const _hoisted_1 = { class: "flex items-start gap-3 p-3.5" };

package/dist/chunks/{LpTopologyCanvas-B0wEvAoq.js → LpTopologyCanvas-CnUh8uzS.js}

@@ -1,20 +1,21 @@
-import { defineComponent, h, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, h, markRaw, computed, watch, ref, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
 import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-yTh4-5qa.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-BT0VQrOa.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
 import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";
-const _hoisted_1 = { class: "flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   width: "22",
   height: "6",
   class: "shrink-0",
   "aria-hidden": "true"
 };
-const _hoisted_3 = ["stroke", "stroke-width", "stroke-dasharray"];
+const _hoisted_2 = ["stroke", "stroke-width", "stroke-dasharray"];
+const MINIMAP_HEIGHT = 165;
+const FRAME = 24;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTopologyCanvas",
   props: {
@@ -141,7 +142,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onMoveEnd,
       getSelectedNodes,
       fitView,
-      setViewport
+      setViewport,
+      onNodesInitialized
     } = useVueFlow();
     onNodeClick(({ node }) => emit("node-select", node.id));
     onNodeDoubleClick(({ node }) => emit("node-activate", node.id));
@@ -188,10 +190,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     onPaneClick(() => emit("pane-click"));
     onConnect((conn) => emit("connect", conn));
+    const legendBox = ref(null);
+    function framePadding() {
+      const wide = typeof window === "undefined" || window.matchMedia("(min-width: 640px)").matches;
+      const legendHeight = wide && props.legend ? (legendBox.value?.offsetHeight ?? 0) + 15 : 0;
+      const legendTop = props.legendPosition.startsWith("top");
+      const bottom = Math.max(legendTop ? 0 : legendHeight, wide && props.minimap ? MINIMAP_HEIGHT : 0);
+      return {
+        top: `${FRAME + (legendTop ? legendHeight : 0)}px`,
+        bottom: `${FRAME + bottom}px`,
+        left: `${FRAME}px`,
+        right: `${FRAME}px`
+      };
+    }
+    function fitFramed(params = {}) {
+      return fitView({ padding: framePadding(), ...params });
+    }
+    let fitted = false;
+    onNodesInitialized(() => {
+      if (fitted) return;
+      fitted = true;
+      void fitFramed();
+    });
     async function applyViewport(v) {
       await setViewport({ x: v.x, y: v.y, zoom: v.zoom });
     }
-    __expose({ fitView, setViewport: applyViewport });
+    __expose({ fitView: fitFramed, setViewport: applyViewport });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(VueFlow), {
         nodes: flowNodes.value,
@@ -207,7 +231,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "default-viewport": { zoom: 0.9 },
         "min-zoom": 0.3,
         "max-zoom": 2,
-        "fit-view-on-init": "",
         class: "lp-topology"
       }, {
         default: withCtx(() => [
@@ -224,20 +247,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "node-color": "var(--color-surface-soft)",
             "mask-color": "rgba(0,0,0,0.55)"
           })) : createCommentVNode("", true),
-          __props.controls ? (openBlock(), createBlock(unref(Controls), { key: 1 })) : createCommentVNode("", true),
+          __props.controls ? (openBlock(), createBlock(unref(Controls), {
+            key: 1,
+            "fit-view-params": { padding: framePadding() }
+          }, null, 8, ["fit-view-params"])) : createCommentVNode("", true),
           __props.legend ? (openBlock(), createBlock(unref(Panel), {
             key: 2,
             position: __props.legendPosition,
             class: normalizeClass([legendOffset.value, "max-sm:hidden"])
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", {
+                ref_key: "legendBox",
+                ref: legendBox,
+                class: "flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
+              }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(legendItems.value, (l) => {
                   return openBlock(), createElementBlock("div", {
                     key: l.label,
                     class: "flex items-center gap-2 text-muted"
                   }, [
-                    (openBlock(), createElementBlock("svg", _hoisted_2, [
+                    (openBlock(), createElementBlock("svg", _hoisted_1, [
                       createElementVNode("line", {
                         x1: "0",
                         y1: "3",
@@ -247,13 +277,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "stroke-width": l.width,
                         "stroke-dasharray": l.dash,
                         "stroke-linecap": "round"
-                      }, null, 8, _hoisted_3)
+                      }, null, 8, _hoisted_2)
                     ])),
                     createTextVNode(" " + toDisplayString(l.label), 1)
                   ]);
                 }), 128)),
                 renderSlot(_ctx.$slots, "legend-extra")
-              ])
+              ], 512)
             ]),
             _: 3
           }, 8, ["position", "class"])) : createCommentVNode("", true)

package/dist/chunks/{LpTour-BgCfNlaW.js → LpTour-DC3LTlxg.js}

@@ -8,7 +8,7 @@ import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { useView, usePortalTarget, viewDocument, viewWindow } from "../composables/useView.js";
 import { scrollToElement } from "../composables/scroll.js";
 import { PANEL_SURFACE } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./TourCard--2IfgnUU.js";
+import { _ as _sfc_main$1 } from "./TourCard-CBkj1GYi.js";
 import { holeOf, panelsAround, holeClip } from "../components/tour.js";
 const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpTruncate-TcqfkyJM.js → LpTruncate-Ced4gquB.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onMounted, watch, nextTick, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, normalizeStyle, normalizeClass, Fragment, toDisplayString, createTextVNode, createBlock, createCommentVNode } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-Dmq7DmFw.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-DaD1KCn6.js";
 import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
 import { middleTruncate } from "../components/fieldText.js";
 const _hoisted_1 = ["tabindex"];

package/dist/chunks/{LpUptimeBar-DRadGq4Y.js → LpUptimeBar-CuB0LX8K.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, withCtx, createBlock, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
-import { _ as _sfc_main$6 } from "./LpNumberFlow-5khYxsfX.js";
-import { _ as _sfc_main$5 } from "./LpRollingText-DiL717LK.js";
-import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$6 } from "./LpNumberFlow-CcxEGUy0.js";
+import { _ as _sfc_main$5 } from "./LpRollingText-B54Pje7P.js";
+import { _ as _sfc_main$4 } from "./LpShift-BAp8lGoa.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
+import { _ as _sfc_main$1 } from "./LpSwap-B5YOXgtx.js";
 import { _ as _sfc_main$3 } from "./LpTooltip-BcBvIx4z.js";
 import { TONES } from "../components/tone.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";

package/dist/chunks/{MenuTitle-Dab3EGOp.js → MenuTitle-BmCNNTKH.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, createCommentVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
 const _hoisted_1 = {
   class: "flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2",
   "aria-hidden": "true"

package/dist/chunks/{OptionContent-DPzNsybd.js → OptionContent-22UT8zLn.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
 const _hoisted_1 = { class: "flex min-w-0 items-center gap-2.5" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "flex min-w-0 flex-col" };

package/dist/chunks/{PickerField-DwLw7j0L.js → PickerField-Bfh8id3d.js}

@@ -2,9 +2,9 @@ import { defineComponent, useModel, useAttrs, openBlock, createElementBlock, nor
 import { useFieldBlur } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
 import { PICKER_PRESETS, PICKER_PRESET, PICKER_TRIGGER, PICKER_SIZE, pickerTone, PICKER_CLEAR } from "../components/calendar.js";
-import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
 import { _ as _sfc_main$1 } from "./LpPopover-DmZ3wUtP.js";
-import { _ as _sfc_main$3 } from "./LpRollingText-DiL717LK.js";
+import { _ as _sfc_main$3 } from "./LpRollingText-B54Pje7P.js";
 const _hoisted_1 = ["data-lp-field-part"];
 const _hoisted_2 = ["id", "disabled", "aria-invalid", "aria-describedby"];
 const _hoisted_3 = {

package/dist/chunks/{RevealToggle-BVFM_FAU.js → RevealToggle-B0ITuIX-.js}

@@ -1,6 +1,6 @@
 import { defineComponent, useModel, openBlock, createBlock, withCtx, createVNode, mergeProps, createElementVNode, mergeModels } from "vue";
-import { _ as _sfc_main$2 } from "./LpButton-BQDAFXBd.js";
-import { _ as _sfc_main$3 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$2 } from "./LpButton-Dk7eT4ro.js";
+import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
 import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
 const _hoisted_1 = { class: "grid place-items-center" };
 const _sfc_main = /* @__PURE__ */ defineComponent({