@leavepulse/ui 0.73.6 → 0.74.0

package/dist/chunks/{LpAppShell-B0Yu9MVs.js → LpAppShell-D-NtjYlw.js}

@@ -1,11 +1,12 @@
 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 { useScrollMemory } from "../composables/scrollMemory.js";
-import { _ as _sfc_main$6 } from "./LpBottomNav-Dik-ZcHv.js";
-import { _ as _sfc_main$2 } from "./LpButton-BgdewXxF.js";
-import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
-import { _ as _sfc_main$4 } from "./LpShift-kKUeG9NS.js";
+import { _ as _sfc_main$7 } from "./LpBottomNav-Dik-ZcHv.js";
+import { _ as _sfc_main$2 } from "./LpContextSwitcher-Dwh6dyID.js";
+import { _ as _sfc_main$3 } from "./LpButton-BgdewXxF.js";
+import { _ as _sfc_main$4 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$6 } from "./LpScrollArea-Hz3-JWUG.js";
+import { _ as _sfc_main$5 } from "./LpShift-kKUeG9NS.js";
 import { _ as _sfc_main$1 } from "./LpSidebar-CR_WKcn2.js";
 import { useMergedAttrs, mergeClass } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["href"];
@@ -39,6 +40,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     persist: {},
     previewDelay: {},
     compactHotkey: { type: [String, Boolean] },
+    contexts: {},
+    context: {},
     environment: {},
     hints: {},
     bottomNav: { type: [Boolean, Number, Array] }
@@ -46,10 +49,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "open": { type: Boolean, ...{ default: false } },
     "openModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:collapsed", "select", "update:compact", "update:pinned"], ["update:open"]),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:collapsed", "select", "update:compact", "update:pinned", "update:context"], ["update:open"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const switching = computed(() => (props.contexts?.length ?? 0) > 1);
     const flatItems = computed(
       () => (props.sections ? props.sections.flatMap((s) => s.items) : props.items ?? []).flatMap((i) => [i, ...i.children ?? []])
     );
@@ -161,60 +165,85 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           hints: __props.hints,
           class: "shrink-0",
           "onUpdate:modelValue": onModel,
-          "onUpdate:compact": _cache[0] || (_cache[0] = (v) => emit("update:compact", v)),
-          "onUpdate:pinned": _cache[1] || (_cache[1] = (v) => emit("update:pinned", v)),
-          "onUpdate:open": _cache[2] || (_cache[2] = (v) => drawerOpen.value = v),
-          "onUpdate:collapsed": _cache[3] || (_cache[3] = (v) => emit("update:collapsed", v)),
+          "onUpdate:compact": _cache[1] || (_cache[1] = (v) => emit("update:compact", v)),
+          "onUpdate:pinned": _cache[2] || (_cache[2] = (v) => emit("update:pinned", v)),
+          "onUpdate:open": _cache[3] || (_cache[3] = (v) => drawerOpen.value = v),
+          "onUpdate:collapsed": _cache[4] || (_cache[4] = (v) => emit("update:collapsed", v)),
           onSelect
         }, createSlots({ _: 2 }, [
-          _ctx.$slots.logo ? {
+          switching.value ? {
             name: "header",
             fn: withCtx(({ compact: folded }) => [
-              renderSlot(_ctx.$slots, "logo", { compact: folded })
+              createVNode(_sfc_main$2, {
+                contexts: __props.contexts,
+                "model-value": __props.context,
+                compact: folded,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = (id) => emit("update:context", id))
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.logo ? {
+                  name: "default",
+                  fn: withCtx(({ context: shown }) => [
+                    renderSlot(_ctx.$slots, "logo", {
+                      compact: folded,
+                      context: shown
+                    })
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["contexts", "model-value", "compact"])
             ]),
             key: "0"
+          } : _ctx.$slots.logo ? {
+            name: "header",
+            fn: withCtx(({ compact: folded }) => [
+              renderSlot(_ctx.$slots, "logo", {
+                compact: folded,
+                context: __props.contexts?.[0]
+              })
+            ]),
+            key: "1"
           } : void 0,
           _ctx.$slots["sidebar-actions"] ? {
             name: "actions",
             fn: withCtx(() => [
               renderSlot(_ctx.$slots, "sidebar-actions")
             ]),
-            key: "1"
+            key: "2"
           } : void 0,
           _ctx.$slots["sidebar-footer"] ? {
             name: "footer",
             fn: withCtx(({ compact: folded }) => [
               renderSlot(_ctx.$slots, "sidebar-footer", { compact: folded })
             ]),
-            key: "2"
+            key: "3"
           } : void 0,
           _ctx.$slots["sidebar-item"] ? {
             name: "item",
             fn: withCtx((slotProps) => [
               renderSlot(_ctx.$slots, "sidebar-item", normalizeProps(guardReactiveProps(slotProps)))
             ]),
-            key: "3"
+            key: "4"
           } : void 0
         ]), 1032, ["model-value", "items", "sections", "is-active", "open", "mobile-breakpoint", "divider", "loading", "collapsed", "auto-collapse-after", "compact", "resizable", "pinnable", "pinned", "persist", "preview-delay", "compact-hotkey", "environment", "hints"]),
         createElementVNode("div", _hoisted_2, [
           createElementVNode("header", _hoisted_3, [
-            createVNode(_sfc_main$2, {
+            createVNode(_sfc_main$3, {
               class: normalizeClass(burgerClass.value),
               variant: "ghost",
               size: "sm",
               square: "",
               "aria-label": unref(text).openMenu,
-              onClick: _cache[4] || (_cache[4] = ($event) => drawerOpen.value = true)
+              onClick: _cache[5] || (_cache[5] = ($event) => drawerOpen.value = true)
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$3, {
+                createVNode(_sfc_main$4, {
                   name: "lucide:menu",
                   size: 18
                 })
               ]),
               _: 1
             }, 8, ["class", "aria-label"]),
-            createVNode(_sfc_main$4, {
+            createVNode(_sfc_main$5, {
               axis: "height",
               presence: "",
               class: "flex min-w-0 flex-1 items-center"
@@ -226,7 +255,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }),
-            createVNode(_sfc_main$4, {
+            createVNode(_sfc_main$5, {
               axis: "width",
               anchor: "end",
               presence: "",
@@ -249,7 +278,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 512), [
               [vShow, bleeding.value]
             ]),
-            withDirectives(createVNode(_sfc_main$5, {
+            withDirectives(createVNode(_sfc_main$6, {
               ref_key: "scrollArea",
               ref: scrollArea,
               class: "min-h-0 flex-1",
@@ -269,7 +298,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               [vShow, !bleeding.value]
             ])
           ]),
-          __props.bottomNav ? (openBlock(), createBlock(_sfc_main$6, {
+          __props.bottomNav ? (openBlock(), createBlock(_sfc_main$7, {
             key: 0,
             class: normalizeClass(burgerHidden[__props.mobileBreakpoint]),
             items: bottomItems.value,
@@ -277,7 +306,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             more: "",
             "more-active": moreActive.value,
             onSelect: onBottom,
-            onMore: _cache[5] || (_cache[5] = ($event) => drawerOpen.value = true)
+            onMore: _cache[6] || (_cache[6] = ($event) => drawerOpen.value = true)
           }, null, 8, ["class", "items", "is-active", "more-active"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "overlays")

package/dist/chunks/LpContextSwitcher-Dwh6dyID.js

@@ -0,0 +1,81 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$1 } from "./LpDropdownMenu-Dl7Z4ZhS.js";
+import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { class: "truncate" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpContextSwitcher",
+  props: {
+    contexts: {},
+    modelValue: {},
+    compact: { type: Boolean, default: false },
+    labels: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels("contextSwitcher", { switch: "{label}, switch", title: "Switch to" }, () => props.labels);
+    const current = computed(() => props.contexts.find((c) => c.id === props.modelValue) ?? props.contexts[0]);
+    const initial = computed(() => [...current.value?.label ?? ""][0] ?? "");
+    const items = computed(
+      () => props.contexts.map((c) => ({
+        label: c.label,
+        icon: c.icon,
+        checked: c.id === current.value?.id ? true : void 0,
+        onSelect: () => {
+          if (c.id !== current.value?.id) emit("update:modelValue", c.id);
+        }
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        items: items.value,
+        title: unref(text).title,
+        palette: false
+      }, {
+        trigger: withCtx(() => [
+          createElementVNode("button", {
+            type: "button",
+            class: normalizeClass(["flex min-w-0 items-center gap-2 rounded-control text-base font-semibold text-ink outline-none transition-colors hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring", __props.compact ? "grid size-9 shrink-0 place-items-center bg-surface-soft" : "max-w-full px-2 py-1"]),
+            "aria-label": unref(text).switch.replace("{label}", current.value?.label ?? "")
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              context: current.value,
+              compact: __props.compact
+            }, () => [
+              __props.compact ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                current.value?.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  name: current.value.icon,
+                  size: 17
+                }, null, 8, ["name"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(initial.value), 1)
+                ], 64))
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                current.value?.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  name: current.value.icon,
+                  size: 17,
+                  class: "shrink-0 text-brand"
+                }, null, 8, ["name"])) : createCommentVNode("", true),
+                createElementVNode("span", _hoisted_2, toDisplayString(current.value?.label), 1)
+              ], 64))
+            ]),
+            !__props.compact ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              name: "lucide:chevrons-up-down",
+              size: 14,
+              class: "shrink-0 text-muted"
+            })) : createCommentVNode("", true)
+          ], 10, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["items", "title"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpActivityLine", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBottomNav", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCodeDisplay", "LpCollapse", "LpColorPicker", "LpCommandPalette", "LpCommandScope", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpCopyButton", "LpCountdown", "LpDataList", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDock", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEditable", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpFrame", "LpGauge", "LpGlowBorder", "LpHintExample", "LpHintLayer", "LpHints", "LpHoverCard", "LpIcon", "LpIdenticon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLoader", "LpLogViewer", "LpMagnetic", "LpMapPicker", "LpMasonry", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPaletteTheme", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPipeline", "LpPopover", "LpProgress", "LpQuota", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRangeSlider", "LpRelativeTime", "LpRepeater", "LpRevealOnScroll", "LpRollingText", "LpScramble", "LpScrollArea", "LpSecretField", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShaderBackdrop", "LpShift", "LpShinyText", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpSpotlight", "LpStat", "LpStatus", "LpStepMark", "LpStepper", "LpSwap", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextReveal", "LpTextarea", "LpThemeProvider", "LpThemeStudio", "LpThemeStudioSection", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpTour", "LpTruncate", "LpTypewriter", "LpUptimeBar", "LpVideoBackdrop"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpActivityLine", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBottomNav", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCodeDisplay", "LpCollapse", "LpColorPicker", "LpCommandPalette", "LpCommandScope", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpContextSwitcher", "LpCopyButton", "LpCountdown", "LpDataList", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDock", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEditable", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpFrame", "LpGauge", "LpGlowBorder", "LpHintExample", "LpHintLayer", "LpHints", "LpHoverCard", "LpIcon", "LpIdenticon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLoader", "LpLogViewer", "LpMagnetic", "LpMapPicker", "LpMasonry", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPaletteTheme", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPipeline", "LpPopover", "LpProgress", "LpQuota", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRangeSlider", "LpRelativeTime", "LpRepeater", "LpRevealOnScroll", "LpRollingText", "LpScramble", "LpScrollArea", "LpSecretField", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShaderBackdrop", "LpShift", "LpShinyText", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpSpotlight", "LpStat", "LpStatus", "LpStepMark", "LpStepper", "LpSwap", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextReveal", "LpTextarea", "LpThemeProvider", "LpThemeStudio", "LpThemeStudioSection", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpTour", "LpTruncate", "LpTypewriter", "LpUptimeBar", "LpVideoBackdrop"];

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

@@ -1,4 +1,4 @@
-import type { SidebarItem, SidebarSection } from "./sidebar";
+import type { AppContext, SidebarItem, SidebarSection } from "./sidebar";
 export type { SidebarItem, SidebarSection } from "./sidebar";
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -66,6 +66,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     previewDelay?: number;
     /** The key that folds the rail; false turns it off. Forwarded to LpSidebar. */
     compactHotkey?: string | false;
+    /**
+     * The app's contexts — a server, a workspace, a part of the product — each
+     * with its own rail. With more than one, the rail's header becomes the
+     * switcher between them (v-model:context), and the `logo` slot draws the
+     * switcher's face with the current `context` in its props.
+     */
+    contexts?: AppContext[];
+    context?: string;
     /** Marks a non-production copy along the top of the rail. Forwarded to LpSidebar. */
     environment?: string | {
         label: string;
@@ -93,6 +101,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     "update:pinned": (ids: string[]) => any;
     "update:collapsed": (keys: string[]) => any;
     "update:compact": (value: boolean) => any;
+    "update:context": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
     /** Flat items, or sections for grouped nav. Forwarded to LpSidebar. */
     items?: SidebarItem[];
@@ -157,6 +166,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     previewDelay?: number;
     /** The key that folds the rail; false turns it off. Forwarded to LpSidebar. */
     compactHotkey?: string | false;
+    /**
+     * The app's contexts — a server, a workspace, a part of the product — each
+     * with its own rail. With more than one, the rail's header becomes the
+     * switcher between them (v-model:context), and the `logo` slot draws the
+     * switcher's face with the current `context` in its props.
+     */
+    contexts?: AppContext[];
+    context?: string;
     /** Marks a non-production copy along the top of the rail. Forwarded to LpSidebar. */
     environment?: string | {
         label: string;
@@ -181,6 +198,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     "onUpdate:pinned"?: ((ids: string[]) => any) | undefined;
     "onUpdate:collapsed"?: ((keys: string[]) => any) | undefined;
     "onUpdate:compact"?: ((value: boolean) => any) | undefined;
+    "onUpdate:context"?: ((id: string) => any) | undefined;
 }>, {
     contentClass: string;
     compact: boolean;
@@ -189,6 +207,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     logo?: (props: {
         compact: boolean | undefined;
+        context: AppContext;
+    }) => any;
+} & {
+    logo?: (props: {
+        compact: boolean | undefined;
+        context: AppContext | undefined;
     }) => any;
 } & {
     'sidebar-actions'?: (props: {}) => any;

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-B0Yu9MVs.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-D-NtjYlw.js";
 export {
   _sfc_main as default
 };

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

@@ -0,0 +1,34 @@
+import type { AppContext } from "./sidebar";
+type __VLS_Props = {
+    contexts: AppContext[];
+    /** The current context's id (v-model). */
+    modelValue?: string;
+    /** The icon rail: the trigger is a square with the icon or an initial. */
+    compact?: boolean;
+    labels?: Partial<{
+        switch: string;
+        title: string;
+    }>;
+};
+declare var __VLS_9: {
+    context: AppContext;
+    compact: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((id: string) => any) | undefined;
+}>, {
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpContextSwitcher.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpContextSwitcher-Dwh6dyID.js";
+export {
+  _sfc_main as default
+};

package/dist/components/sidebar.d.ts

@@ -1,5 +1,11 @@
 import type { Component } from "vue";
 import type { ContextMenuItemDef } from "./LpContextMenu.vue";
+/** One of an app's contexts in the rail header switcher (LpContextSwitcher). */
+export interface AppContext {
+    id: string;
+    label: string;
+    icon?: string;
+}
 export interface SidebarItem {
     id: string;
     label: string;

package/dist/composables/useShift.js

@@ -53,6 +53,7 @@ function useShift(options = {}) {
     const tops = readScroll();
     if (wantsHeight()) node.style.height = "";
     if (wantsWidth()) node.style.width = "";
+    node.style.removeProperty(TARGET_WIDTH);
     const toHeight = wantsHeight() ? node.offsetHeight : 0;
     const toWidth = wantsWidth() ? node.offsetWidth : 0;
     const exactWidth = wantsWidth() ? Math.ceil(node.getBoundingClientRect().width) : 0;

package/dist/index.d.ts

@@ -137,6 +137,8 @@ export { default as LpHintExample } from "./components/LpHintExample.vue";
 export { default as LpShortcutsDialog } from "./components/LpShortcutsDialog.vue";
 export { default as LpSidebar } from "./components/LpSidebar.vue";
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue";
+export type { AppContext } from "./components/sidebar";
+export { default as LpContextSwitcher } from "./components/LpContextSwitcher.vue";
 export { default as LpSkeleton } from "./components/LpSkeleton.vue";
 export { default as LpSlider } from "./components/LpSlider.vue";
 export { default as LpRangeSlider } from "./components/LpRangeSlider.vue";

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-DeJRMfFN.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-B55msXTr.js";
 import { _ as _5 } from "./chunks/LpAlert-Cg7oIx1B.js";
-import { _ as _6 } from "./chunks/LpAppShell-B0Yu9MVs.js";
+import { _ as _6 } from "./chunks/LpAppShell-D-NtjYlw.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
 import { _ as _9 } from "./chunks/LpBadge-0A6sPks3.js";
@@ -87,44 +87,45 @@ import { _ as _61 } from "./chunks/LpSwap-KIS24N8W.js";
 import { _ as _62 } from "./chunks/LpHintExample-9Py0wc-L.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _63 } from "./chunks/LpSidebar-CR_WKcn2.js";
-import { _ as _64 } from "./chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _65 } from "./chunks/LpSlider-DxYoCJJO.js";
-import { _ as _66 } from "./chunks/LpRangeSlider-CM-0ZITZ.js";
-import { _ as _67 } from "./chunks/LpVideoBackdrop-DS1wGv-X.js";
+import { _ as _64 } from "./chunks/LpContextSwitcher-Dwh6dyID.js";
+import { _ as _65 } from "./chunks/LpSkeleton-BB6XIV-w.js";
+import { _ as _66 } from "./chunks/LpSlider-DxYoCJJO.js";
+import { _ as _67 } from "./chunks/LpRangeSlider-CM-0ZITZ.js";
+import { _ as _68 } from "./chunks/LpVideoBackdrop-DS1wGv-X.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
-import { _ as _68 } from "./chunks/LpSparkline-CExIRDb3.js";
-import { _ as _69 } from "./chunks/LpStat-DXqKD1h5.js";
-import { _ as _70 } from "./chunks/LpStepper-CKSTFzHE.js";
-import { _ as _71 } from "./chunks/LpSwitch-DlZHmj-M.js";
+import { _ as _69 } from "./chunks/LpSparkline-CExIRDb3.js";
+import { _ as _70 } from "./chunks/LpStat-DXqKD1h5.js";
+import { _ as _71 } from "./chunks/LpStepper-CKSTFzHE.js";
+import { _ as _72 } from "./chunks/LpSwitch-DlZHmj-M.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { resolveRowMenu } from "./components/tableRowMenu.js";
-import { _ as _72 } from "./chunks/LpTableOfContents-BN5zvpnx.js";
+import { _ as _73 } from "./chunks/LpTableOfContents-BN5zvpnx.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
-import { _ as _73 } from "./chunks/LpBottomNav-Dik-ZcHv.js";
-import { _ as _74 } from "./chunks/LpTagsInput-CHoiid8u.js";
+import { _ as _74 } from "./chunks/LpBottomNav-Dik-ZcHv.js";
+import { _ as _75 } from "./chunks/LpTagsInput-CHoiid8u.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _75 } from "./chunks/LpTextarea-CU7C1pLO.js";
-import { _ as _76 } from "./chunks/LpThemeSwitcher-BXJhQYGD.js";
-import { _ as _77 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _78 } from "./chunks/LpToaster-C1D35SKk.js";
-import { _ as _79 } from "./chunks/LpTooltip-BcBvIx4z.js";
-import { _ as _80 } from "./chunks/LpTour-XshJslGg.js";
+import { _ as _76 } from "./chunks/LpTextarea-CU7C1pLO.js";
+import { _ as _77 } from "./chunks/LpThemeSwitcher-BXJhQYGD.js";
+import { _ as _78 } from "./chunks/LpTilt-B7KHX1zH.js";
+import { _ as _79 } from "./chunks/LpToaster-C1D35SKk.js";
+import { _ as _80 } from "./chunks/LpTooltip-BcBvIx4z.js";
+import { _ as _81 } from "./chunks/LpTour-XshJslGg.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _81 } from "./chunks/LpHintLayer-Db_s9_DL.js";
-import { _ as _82 } from "./chunks/LpHints-Cxf5GXsx.js";
+import { _ as _82 } from "./chunks/LpHintLayer-Db_s9_DL.js";
+import { _ as _83 } from "./chunks/LpHints-Cxf5GXsx.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
-import { _ as _83 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _84 } from "./chunks/LpTopologyCanvas-1OufbBtQ.js";
-import { _ as _85 } from "./chunks/LpUptimeBar-qhvvmmoI.js";
+import { _ as _84 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _85 } from "./chunks/LpTopologyCanvas-1OufbBtQ.js";
+import { _ as _86 } from "./chunks/LpUptimeBar-qhvvmmoI.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
 import { a as parseTheme, s as serializeTheme } from "./chunks/LpThemeProvider-8MG6yqU9.js";
-import { D, _ as _86, T, b as b2, c as c2, d, e, f, g, l, h, n, i as i2, j, p, r, k, t, m, o, q, u, v } from "./chunks/LpThemeProvider-8MG6yqU9.js";
+import { D, _ as _87, T, b as b2, c as c2, d, e, f, g, l, h, n, i as i2, j, p, r, k, t, m, o, q, u, v } from "./chunks/LpThemeProvider-8MG6yqU9.js";
 import { G, N, d as d2, i as i3, s } from "./chunks/backdrop-Dkf2vM81.js";
-import { _ as _87, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-zyOH3dF2.js";
+import { _ as _88, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-zyOH3dF2.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, parseCombo, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
@@ -160,64 +161,64 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _88 } from "./chunks/LpFrame-BVQCQLDI.js";
-import { _ as _89 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
+import { _ as _89 } from "./chunks/LpFrame-BVQCQLDI.js";
+import { _ as _90 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _90 } from "./chunks/LpRepeater-DghUJ3bc.js";
-import { _ as _91 } from "./chunks/LpGauge-KZaQ_FDR.js";
-import { _ as _92 } from "./chunks/LpQuota-Dk2MyI2Z.js";
-import { _ as _93 } from "./chunks/LpStatus-DfZREVe0.js";
-import { _ as _94 } from "./chunks/LpRelativeTime-DwgCb5-8.js";
-import { _ as _95 } from "./chunks/LpActivityLine-CJvzrNpj.js";
+import { _ as _91 } from "./chunks/LpRepeater-DghUJ3bc.js";
+import { _ as _92 } from "./chunks/LpGauge-KZaQ_FDR.js";
+import { _ as _93 } from "./chunks/LpQuota-Dk2MyI2Z.js";
+import { _ as _94 } from "./chunks/LpStatus-DfZREVe0.js";
+import { _ as _95 } from "./chunks/LpRelativeTime-DwgCb5-8.js";
+import { _ as _96 } from "./chunks/LpActivityLine-CJvzrNpj.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
 import { TONES, TONE_ALIASES, toneLook, toneOf } from "./components/tone.js";
 import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, decimalMark, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _96 } from "./chunks/LpPipeline-QCZWWB0G.js";
-import { _ as _97 } from "./chunks/LpStepMark-TaAyuNsH.js";
+import { _ as _97 } from "./chunks/LpPipeline-QCZWWB0G.js";
+import { _ as _98 } from "./chunks/LpStepMark-TaAyuNsH.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
-import { _ as _98 } from "./chunks/LpLoader-DPTNhqLu.js";
+import { _ as _99 } from "./chunks/LpLoader-DPTNhqLu.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _99 } from "./chunks/LpCountdown-BNNhnQAK.js";
+import { _ as _100 } from "./chunks/LpCountdown-BNNhnQAK.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
-import { _ as _100 } from "./chunks/LpCopyButton-Cw-lF7Q3.js";
-import { _ as _101 } from "./chunks/LpSecretField-osKPNdNT.js";
-import { _ as _102 } from "./chunks/LpDataList-CcAA-rD9.js";
-import { _ as _103 } from "./chunks/LpEditable-CSuJIPbG.js";
-import { _ as _104 } from "./chunks/LpTruncate-qgKA-3K3.js";
-import { _ as _105 } from "./chunks/LpCodeDisplay-BCghfBFC.js";
+import { _ as _101 } from "./chunks/LpCopyButton-Cw-lF7Q3.js";
+import { _ as _102 } from "./chunks/LpSecretField-osKPNdNT.js";
+import { _ as _103 } from "./chunks/LpDataList-CcAA-rD9.js";
+import { _ as _104 } from "./chunks/LpEditable-CSuJIPbG.js";
+import { _ as _105 } from "./chunks/LpTruncate-qgKA-3K3.js";
+import { _ as _106 } from "./chunks/LpCodeDisplay-BCghfBFC.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
-import { _ as _106 } from "./chunks/LpHoverCard-spGxyw7T.js";
-import { _ as _107 } from "./chunks/LpIdenticon-BzdC_qz9.js";
+import { _ as _107 } from "./chunks/LpHoverCard-spGxyw7T.js";
+import { _ as _108 } from "./chunks/LpIdenticon-BzdC_qz9.js";
 import { hashString, identicon, identiconRects, identiconSvg } from "./components/identicon.js";
-import { _ as _108 } from "./chunks/LpShaderBackdrop-Bote0iuy.js";
+import { _ as _109 } from "./chunks/LpShaderBackdrop-Bote0iuy.js";
 import { PRESET_NAMES } from "./components/shaderBackdrop.js";
-import { _ as _109 } from "./chunks/LpCollapse-CWS9M_lm.js";
+import { _ as _110 } from "./chunks/LpCollapse-CWS9M_lm.js";
 import { pseudoLocalize } from "./composables/pseudoLocale.js";
-import { _ as _110 } from "./chunks/LpTextReveal-CtAnOUkp.js";
-import { _ as _111 } from "./chunks/LpShinyText-DX2ajtWq.js";
-import { _ as _112 } from "./chunks/LpTypewriter-BCL_a6wE.js";
-import { _ as _113 } from "./chunks/LpScramble-DeT_D36q.js";
+import { _ as _111 } from "./chunks/LpTextReveal-CtAnOUkp.js";
+import { _ as _112 } from "./chunks/LpShinyText-DX2ajtWq.js";
+import { _ as _113 } from "./chunks/LpTypewriter-BCL_a6wE.js";
+import { _ as _114 } from "./chunks/LpScramble-DeT_D36q.js";
 import { useScramble } from "./composables/useScramble.js";
 import { useInView } from "./composables/useInView.js";
 import { SCRAMBLE_GLYPHS, graphemes, planScramble, randomGlyph, scrambleFrame, seededRandom, settledCells } from "./components/scramble.js";
 import { default as default14 } from "./components/LpDock.vue.js";
 import { dockSize, magneticOffset } from "./components/dock.js";
-import { _ as _114 } from "./chunks/LpMasonry--k0571qG.js";
+import { _ as _115 } from "./chunks/LpMasonry--k0571qG.js";
 import { masonryColumnCount, placeMasonry } from "./components/masonry.js";
-import { _ as _115 } from "./chunks/LpRevealOnScroll-DcQjexLy.js";
+import { _ as _116 } from "./chunks/LpRevealOnScroll-DcQjexLy.js";
 import { revealFrom, revealTo, staggerDelay } from "./components/reveal.js";
-import { _ as _116 } from "./chunks/LpSpotlight-4F3NeUMY.js";
-import { _ as _117 } from "./chunks/LpGlowBorder-B8V-QzIl.js";
-import { _ as _118 } from "./chunks/LpMagnetic-CtXKLa2Y.js";
+import { _ as _117 } from "./chunks/LpSpotlight-4F3NeUMY.js";
+import { _ as _118 } from "./chunks/LpGlowBorder-B8V-QzIl.js";
+import { _ as _119 } from "./chunks/LpMagnetic-CtXKLa2Y.js";
 import { spotlightPoint, useSpotlight } from "./composables/useSpotlight.js";
-import { _ as _119 } from "./chunks/LpCommandScope-CtUhJe8T.js";
+import { _ as _120 } from "./chunks/LpCommandScope-CtUhJe8T.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { u as u3 } from "./chunks/palette-Co8tSASo.js";
-import { _ as _120 } from "./chunks/LpPaletteTheme-CWAIjBCi.js";
+import { _ as _121 } from "./chunks/LpPaletteTheme-CWAIjBCi.js";
 const UI_CONFIG_VERSION = 1;
 function serializeConfig(config) {
   const out = {
@@ -250,14 +251,14 @@ export {
   LP_FIELD,
   _ as LayoutCanvas,
   _4 as LpActionBar,
-  _95 as LpActivityLine,
+  _96 as LpActivityLine,
   _2 as LpAddressInput,
   _5 as LpAlert,
   _6 as LpAppShell,
   _7 as LpAutocomplete,
   _8 as LpAvatar,
   _9 as LpBadge,
-  _73 as LpBottomNav,
+  _74 as LpBottomNav,
   _10 as LpBreadcrumbs,
   _11 as LpButton,
   _12 as LpCalendar,
@@ -265,17 +266,18 @@ export {
   default2 as LpChart,
   _14 as LpCheckbox,
   _15 as LpCodeBlock,
-  _105 as LpCodeDisplay,
-  _109 as LpCollapse,
+  _106 as LpCodeDisplay,
+  _110 as LpCollapse,
   _16 as LpColorPicker,
   default3 as LpCommandPalette,
-  _119 as LpCommandScope,
+  _120 as LpCommandScope,
   _18 as LpConfirmDialog,
   _19 as LpConfirmHost,
   _20 as LpContextMenu,
-  _100 as LpCopyButton,
-  _99 as LpCountdown,
-  _102 as LpDataList,
+  _64 as LpContextSwitcher,
+  _101 as LpCopyButton,
+  _100 as LpCountdown,
+  _103 as LpDataList,
   _21 as LpDatePicker,
   _22 as LpDateRangePicker,
   _24 as LpDisclosure,
@@ -284,31 +286,31 @@ export {
   _26 as LpDrawer,
   _27 as LpDropdownMenu,
   default9 as LpDropzone,
-  _103 as LpEditable,
+  _104 as LpEditable,
   _28 as LpEmptyState,
   _30 as LpFieldNotice,
   _29 as LpFileTree,
   _31 as LpFormField,
-  _88 as LpFrame,
-  _91 as LpGauge,
-  _117 as LpGlowBorder,
+  _89 as LpFrame,
+  _92 as LpGauge,
+  _118 as LpGlowBorder,
   _62 as LpHintExample,
-  _81 as LpHintLayer,
-  _82 as LpHints,
-  _106 as LpHoverCard,
+  _82 as LpHintLayer,
+  _83 as LpHints,
+  _107 as LpHoverCard,
   _32 as LpIcon,
-  _107 as LpIdenticon,
+  _108 as LpIdenticon,
   default10 as LpImageEditor,
   _33 as LpInfraNode,
   _34 as LpInput,
   default8 as LpKeys,
   _35 as LpLightbox,
   _36 as LpLink,
-  _98 as LpLoader,
+  _99 as LpLoader,
   _37 as LpLogViewer,
-  _118 as LpMagnetic,
+  _119 as LpMagnetic,
   _3 as LpMapPicker,
-  _114 as LpMasonry,
+  _115 as LpMasonry,
   _38 as LpMediaGallery,
   _39 as LpModal,
   _40 as LpModalNav,
@@ -322,65 +324,65 @@ export {
   _17 as LpPalettePreview,
   default6 as LpPaletteStats,
   default7 as LpPaletteSwatches,
-  _120 as LpPaletteTheme,
+  _121 as LpPaletteTheme,
   _47 as LpPasswordInput,
   _49 as LpPhoneInput,
   _48 as LpPie,
-  _96 as LpPipeline,
+  _97 as LpPipeline,
   _50 as LpPopover,
   _51 as LpProgress,
-  _92 as LpQuota,
+  _93 as LpQuota,
   _52 as LpRadio,
   _53 as LpRadioGroup,
   _23 as LpRangeCalendar,
-  _66 as LpRangeSlider,
-  _94 as LpRelativeTime,
-  _90 as LpRepeater,
-  _115 as LpRevealOnScroll,
+  _67 as LpRangeSlider,
+  _95 as LpRelativeTime,
+  _91 as LpRepeater,
+  _116 as LpRevealOnScroll,
   _54 as LpRollingText,
-  _113 as LpScramble,
+  _114 as LpScramble,
   _55 as LpScrollArea,
-  _101 as LpSecretField,
+  _102 as LpSecretField,
   _57 as LpSection,
   _56 as LpSegmented,
   _58 as LpSelect,
   _59 as LpServiceNode,
-  _108 as LpShaderBackdrop,
+  _109 as LpShaderBackdrop,
   _60 as LpShift,
-  _111 as LpShinyText,
+  _112 as LpShinyText,
   default11 as LpShortcutsDialog,
   _63 as LpSidebar,
-  _64 as LpSkeleton,
-  _65 as LpSlider,
-  _68 as LpSparkline,
-  _116 as LpSpotlight,
-  _69 as LpStat,
-  _93 as LpStatus,
-  _97 as LpStepMark,
-  _70 as LpStepper,
+  _65 as LpSkeleton,
+  _66 as LpSlider,
+  _69 as LpSparkline,
+  _117 as LpSpotlight,
+  _70 as LpStat,
+  _94 as LpStatus,
+  _98 as LpStepMark,
+  _71 as LpStepper,
   _61 as LpSwap,
-  _71 as LpSwitch,
+  _72 as LpSwitch,
   default12 as LpTable,
-  _72 as LpTableOfContents,
+  _73 as LpTableOfContents,
   default13 as LpTabs,
-  _74 as LpTagsInput,
-  _110 as LpTextReveal,
-  _75 as LpTextarea,
-  _86 as LpThemeProvider,
-  _87 as LpThemeStudio,
-  _89 as LpThemeStudioSection,
-  _76 as LpThemeSwitcher,
-  _77 as LpTilt,
+  _75 as LpTagsInput,
+  _111 as LpTextReveal,
+  _76 as LpTextarea,
+  _87 as LpThemeProvider,
+  _88 as LpThemeStudio,
+  _90 as LpThemeStudioSection,
+  _77 as LpThemeSwitcher,
+  _78 as LpTilt,
   _43 as LpTimeField,
-  _78 as LpToaster,
-  _79 as LpTooltip,
-  _83 as LpTooltipProvider,
-  _84 as LpTopologyCanvas,
-  _80 as LpTour,
-  _104 as LpTruncate,
-  _112 as LpTypewriter,
-  _85 as LpUptimeBar,
-  _67 as LpVideoBackdrop,
+  _79 as LpToaster,
+  _80 as LpTooltip,
+  _84 as LpTooltipProvider,
+  _85 as LpTopologyCanvas,
+  _81 as LpTour,
+  _105 as LpTruncate,
+  _113 as LpTypewriter,
+  _86 as LpUptimeBar,
+  _68 as LpVideoBackdrop,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   PALETTE_MODES,

package/package.json

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

package/src/component-names.ts

@@ -27,6 +27,7 @@ export const COMPONENT_NAMES = [
   "LpConfirmDialog",
   "LpConfirmHost",
   "LpContextMenu",
+  "LpContextSwitcher",
   "LpCopyButton",
   "LpCountdown",
   "LpDataList",

package/src/components/LpAppShell.vue

@@ -35,12 +35,13 @@ import { computed, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { useScrollMemory } from "../composables/scrollMemory"
 import LpBottomNav from "./LpBottomNav.vue"
+import LpContextSwitcher from "./LpContextSwitcher.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import LpShift from "./LpShift.vue"
 import LpSidebar from "./LpSidebar.vue"
-import type { SidebarItem, SidebarSection } from "./sidebar"
+import type { AppContext, SidebarItem, SidebarSection } from "./sidebar"
 import { mergeClass, useMergedAttrs } from "../composables/useMergedClass"
 
 export type { SidebarItem, SidebarSection } from "./sidebar"
@@ -107,6 +108,14 @@ const props = withDefaults(
     previewDelay?: number
     /** The key that folds the rail; false turns it off. Forwarded to LpSidebar. */
     compactHotkey?: string | false
+    /**
+     * The app's contexts — a server, a workspace, a part of the product — each
+     * with its own rail. With more than one, the rail's header becomes the
+     * switcher between them (v-model:context), and the `logo` slot draws the
+     * switcher's face with the current `context` in its props.
+     */
+    contexts?: AppContext[]
+    context?: string
     /** Marks a non-production copy along the top of the rail. Forwarded to LpSidebar. */
     environment?: string | { label: string; tone?: "warning" | "danger" | "action" | "brand" }
     /** The app's hint system; rows with a `hintPage` show unread news as a dot. Forwarded to LpSidebar. */
@@ -134,8 +143,11 @@ const emit = defineEmits<{
   (e: "select", item: SidebarItem): void
   (e: "update:compact", value: boolean): void
   (e: "update:pinned", ids: string[]): void
+  (e: "update:context", id: string): void
 }>()
 
+const switching = computed(() => (props.contexts?.length ?? 0) > 1)
+
 // Normalise items/sections to a flat list for the title computation.
 const flatItems = computed<SidebarItem[]>(() =>
   (props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? [])).flatMap((i) => [i, ...(i.children ?? [])]),
@@ -297,8 +309,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       @update:collapsed="(v) => emit('update:collapsed', v)"
       @select="onSelect"
     >
-      <template v-if="$slots.logo" #header="{ compact: folded }">
-        <slot name="logo" :compact="folded" />
+      <template v-if="switching" #header="{ compact: folded }">
+        <LpContextSwitcher
+          :contexts="contexts!"
+          :model-value="context"
+          :compact="folded"
+          @update:model-value="(id) => emit('update:context', id)"
+        >
+          <template v-if="$slots.logo" #default="{ context: shown }">
+            <slot name="logo" :compact="folded" :context="shown" />
+          </template>
+        </LpContextSwitcher>
+      </template>
+      <template v-else-if="$slots.logo" #header="{ compact: folded }">
+        <slot name="logo" :compact="folded" :context="contexts?.[0]" />
       </template>
       <template v-if="$slots['sidebar-actions']" #actions>
         <slot name="sidebar-actions" />

package/src/components/LpContextSwitcher.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/*
+ * Which of an app's contexts the rail is showing — a server, a workspace, a
+ * machine, a part of the product — and the menu to change it. Every app used
+ * to draw this into the rail's header slot itself, each a little differently;
+ * LpAppShell renders it from its `contexts` prop, and a standalone LpSidebar
+ * can put it in its own header.
+ *
+ * The trigger shows the current context's icon and label, or whatever the
+ * default slot draws (a brand mark for one context, a plain word for
+ * another). Folded to icons it is the icon alone, or the label's first letter.
+ */
+import { computed } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import LpDropdownMenu from "./LpDropdownMenu.vue"
+import LpIcon from "./LpIcon.vue"
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+import type { AppContext } from "./sidebar"
+
+const props = withDefaults(
+  defineProps<{
+    contexts: AppContext[]
+    /** The current context's id (v-model). */
+    modelValue?: string
+    /** The icon rail: the trigger is a square with the icon or an initial. */
+    compact?: boolean
+    labels?: Partial<{ switch: string; title: string }>
+  }>(),
+  { compact: false },
+)
+
+const emit = defineEmits<{ (e: "update:modelValue", id: string): void }>()
+
+const text = useLabels("contextSwitcher", { switch: "{label}, switch", title: "Switch to" }, () => props.labels)
+
+const current = computed(() => props.contexts.find((c) => c.id === props.modelValue) ?? props.contexts[0])
+const initial = computed(() => [...(current.value?.label ?? "")][0] ?? "")
+
+const items = computed<ContextMenuItemDef[]>(() =>
+  props.contexts.map((c) => ({
+    label: c.label,
+    icon: c.icon,
+    checked: c.id === current.value?.id ? true : undefined,
+    onSelect: () => {
+      if (c.id !== current.value?.id) emit("update:modelValue", c.id)
+    },
+  })),
+)
+</script>
+
+<template>
+  <LpDropdownMenu :items="items" :title="text.title" :palette="false">
+    <template #trigger>
+      <button
+        type="button"
+        class="flex min-w-0 items-center gap-2 rounded-control text-base font-semibold text-ink outline-none transition-colors hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring"
+        :class="compact ? 'grid size-9 shrink-0 place-items-center bg-surface-soft' : 'max-w-full px-2 py-1'"
+        :aria-label="text.switch.replace('{label}', current?.label ?? '')"
+      >
+        <slot :context="current" :compact="compact">
+          <template v-if="compact">
+            <LpIcon v-if="current?.icon" :name="current.icon" :size="17" />
+            <template v-else>{{ initial }}</template>
+          </template>
+          <template v-else>
+            <LpIcon v-if="current?.icon" :name="current.icon" :size="17" class="shrink-0 text-brand" />
+            <span class="truncate">{{ current?.label }}</span>
+          </template>
+        </slot>
+        <LpIcon v-if="!compact" name="lucide:chevrons-up-down" :size="14" class="shrink-0 text-muted" />
+      </button>
+    </template>
+  </LpDropdownMenu>
+</template>

package/src/components/sidebar.ts

@@ -7,6 +7,13 @@
 import type { Component } from "vue"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 
+/** One of an app's contexts in the rail header switcher (LpContextSwitcher). */
+export interface AppContext {
+  id: string
+  label: string
+  icon?: string
+}
+
 export interface SidebarItem {
   id: string
   label: string

package/src/composables/useShift.ts

@@ -191,6 +191,10 @@ export function useShift(
     // its bar re-animated some sixty times a second).
     if (wantsHeight()) node.style.height = ""
     if (wantsWidth()) node.style.width = ""
+    // The content's own width, not the one the last tween held it at: left in
+    // place, the rounded-up figure fed back into the next measurement and the
+    // box grew a pixel a frame for good.
+    node.style.removeProperty(TARGET_WIDTH)
     const toHeight = wantsHeight() ? node.offsetHeight : 0
     const toWidth = wantsWidth() ? node.offsetWidth : 0
     // offsetWidth is rounded, and content that needs 406.4px wraps at 406.

package/src/index.ts

@@ -202,6 +202,8 @@ export { default as LpHintExample } from "./components/LpHintExample.vue"
 export { default as LpShortcutsDialog } from "./components/LpShortcutsDialog.vue"
 export { default as LpSidebar } from "./components/LpSidebar.vue"
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
+export type { AppContext } from "./components/sidebar"
+export { default as LpContextSwitcher } from "./components/LpContextSwitcher.vue"
 export { default as LpSkeleton } from "./components/LpSkeleton.vue"
 export { default as LpSlider } from "./components/LpSlider.vue"
 export { default as LpRangeSlider } from "./components/LpRangeSlider.vue"