@leavepulse/ui 0.77.2 → 0.78.0

package/dist/theme/studio.js

@@ -0,0 +1,134 @@
+import { shallowRef, computed, ref, getCurrentScope, onScopeDispose, watch, watchEffect } from "vue";
+import { usePersisted } from "../composables/usePersisted.js";
+import { defineTheme, withBrand } from "./define.js";
+import { presets } from "./presets.js";
+import { useTheme, themeToCssRule, serializeTheme } from "./useTheme.js";
+const STUDIO_BRANDS = ["#00bcff", "#7c5cff", "#ff5ca8", "#ff6b3d", "#f0b35a", "#c6ff3d", "#39e58c", "#2dd4bf"];
+const STUDIO_CORNERS = {
+  sharp: { radiusControl: 3, radiusCard: 6 },
+  default: {},
+  round: { radiusControl: 12, radiusCard: 22 }
+};
+const STUDIO_SIZES = {
+  compact: { controlSm: 28, controlMd: 34, controlLg: 40 },
+  default: {},
+  comfortable: { controlSm: 36, controlMd: 42, controlLg: 48 }
+};
+const STUDIO_MOTION = { fast: 0.6, normal: 1, slow: 1.8 };
+const STUDIO_SYSTEM = "system";
+const DURATIONS = ["--duration-fast", "--duration-medium", "--duration-slow"];
+const studios = /* @__PURE__ */ new Map();
+function useThemeStudio(options = {}) {
+  const key = options.storageKey ?? "lp-theme-studio";
+  let entry = studios.get(key);
+  if (!entry) {
+    const config = shallowRef({});
+    entry = { config, studio: create(key, config) };
+    studios.set(key, entry);
+  }
+  const { themes, system } = entry.config.value;
+  if (!themes && options.themes || !system && options.system) {
+    entry.config.value = { themes: themes ?? options.themes, system: system ?? options.system };
+  }
+  return entry.studio;
+}
+function create(key, config) {
+  const themes = computed(() => config.value.themes?.length ? config.value.themes : Object.values(presets));
+  const system = computed(() => {
+    const pair = config.value.system;
+    const light = pair && themes.value.find((t) => t.name === pair.light);
+    const dark = pair && themes.value.find((t) => t.name === pair.dark);
+    return light && dark ? { light, dark } : null;
+  });
+  const scheme = typeof window === "undefined" ? void 0 : window.matchMedia?.("(prefers-color-scheme: dark)");
+  const prefersDark = ref(!!scheme?.matches);
+  const onScheme = (e) => prefersDark.value = e.matches;
+  scheme?.addEventListener("change", onScheme);
+  if (getCurrentScope()) onScopeDispose(() => scheme?.removeEventListener("change", onScheme));
+  const engine = useTheme();
+  const defaults = () => ({
+    theme: engine.currentName.value || themes.value[0]?.name || "",
+    brand: null,
+    corners: "default",
+    size: "default",
+    motion: "normal"
+  });
+  const initial = defaults();
+  const state = usePersisted(key, initial, {
+    validate: (v) => !!v && typeof v === "object" && typeof v.theme === "string"
+  });
+  const base = (s) => {
+    if (s.theme === STUDIO_SYSTEM && system.value) return prefersDark.value ? system.value.dark : system.value.light;
+    return themes.value.find((t) => t.name === s.theme) ?? themes.value[0];
+  };
+  function build(s) {
+    const shaped = defineTheme(base(s), { shape: STUDIO_CORNERS[s.corners], density: STUDIO_SIZES[s.size] });
+    return s.brand ? withBrand(shaped, s.brand) : shaped;
+  }
+  const theme = computed(() => build(state.value));
+  if (state.value.theme !== initial.theme || state.value.brand || state.value.corners !== "default" || state.value.size !== "default") {
+    engine.apply(theme.value);
+  }
+  function pickTheme(name, origin) {
+    if (name === state.value.theme) return;
+    state.value = { ...state.value, theme: name };
+    engine.setTheme(theme.value, origin);
+  }
+  function tune(patch) {
+    state.value = { ...state.value, ...patch };
+  }
+  function reset(origin) {
+    state.value = { ...initial };
+    engine.setTheme(theme.value, origin);
+  }
+  watch(
+    () => `${state.value.brand}|${state.value.corners}|${state.value.size}`,
+    () => engine.apply(theme.value)
+  );
+  watch(prefersDark, () => {
+    if (state.value.theme === STUDIO_SYSTEM) engine.setTheme(theme.value);
+  });
+  watch(system, () => {
+    if (state.value.theme === STUDIO_SYSTEM) engine.apply(theme.value);
+  });
+  const brand = computed({
+    get: () => state.value.brand ?? base(state.value).colors.brand,
+    set: (value) => tune({ brand: value })
+  });
+  const changed = computed(() => JSON.stringify(state.value) !== JSON.stringify(initial));
+  if (typeof document !== "undefined") {
+    watchEffect(() => {
+      const scale = STUDIO_MOTION[state.value.motion ?? "normal"];
+      const root = document.documentElement;
+      for (const name of DURATIONS) root.style.removeProperty(name);
+      if (scale === 1) return;
+      const style = getComputedStyle(root);
+      for (const name of DURATIONS) {
+        const ms = parseFloat(style.getPropertyValue(name));
+        if (Number.isFinite(ms)) root.style.setProperty(name, `${Math.round(ms * scale)}ms`);
+      }
+    });
+  }
+  function exportState(s) {
+    const built = build(s);
+    const preset = Object.entries(presets).find(([, p]) => p.name === base(s).name)?.[0];
+    const source = preset ? `"${preset}"` : "yourTheme";
+    const overrides = [];
+    if (s.corners !== "default") overrides.push(`shape: ${JSON.stringify(STUDIO_CORNERS[s.corners])}`);
+    if (s.size !== "default") overrides.push(`density: ${JSON.stringify(STUDIO_SIZES[s.size])}`);
+    const shaped = overrides.length ? `defineTheme(${source}, { ${overrides.join(", ")} })` : source;
+    const code = s.brand ? `withBrand(${shaped}, "${s.brand}")` : overrides.length ? shaped : preset ? `presets.${preset}` : source;
+    return { code, json: serializeTheme(built), css: themeToCssRule(built) };
+  }
+  const exported = computed(() => exportState(state.value));
+  const preview = (draft) => ({ theme: build(draft), exported: exportState(draft) });
+  return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset, preview };
+}
+export {
+  STUDIO_BRANDS,
+  STUDIO_CORNERS,
+  STUDIO_MOTION,
+  STUDIO_SIZES,
+  STUDIO_SYSTEM,
+  useThemeStudio
+};

package/dist/theme/tokens.js

@@ -0,0 +1,63 @@
+const COLOR_VARS = {
+  surface: "--color-surface",
+  surfaceRaised: "--color-surface-raised",
+  surfaceSoft: "--color-surface-soft",
+  ink: "--color-ink",
+  inkInverse: "--color-ink-inverse",
+  muted: "--color-muted",
+  mutedStrong: "--color-muted-strong",
+  brand: "--color-brand",
+  brandHover: "--color-brand-hover",
+  brandSoft: "--color-brand-soft",
+  action: "--color-action",
+  actionHover: "--color-action-hover",
+  actionSoft: "--color-action-soft",
+  accent: "--color-accent",
+  accentHover: "--color-accent-hover",
+  accentSoft: "--color-accent-soft",
+  danger: "--color-danger",
+  dangerHover: "--color-danger-hover",
+  dangerSoft: "--color-danger-soft",
+  line: "--color-line",
+  lineStrong: "--color-line-strong",
+  ring: "--color-ring"
+};
+const SHAPE_VARS = {
+  radiusControl: "--radius-control",
+  radiusCard: "--radius-card",
+  radiusPill: "--radius-pill"
+};
+const DENSITY_VARS = {
+  spacingUnit: "--spacing-unit",
+  controlSm: "--size-control-sm",
+  controlMd: "--size-control-md",
+  controlLg: "--size-control-lg"
+};
+const FONT_VARS = {
+  sans: "--font-sans",
+  mono: "--font-mono"
+};
+const SURFACE_VARS = {
+  borderWidth: "--surface-border-width",
+  panelBlur: "--surface-panel-blur",
+  panelSaturate: "--surface-panel-saturate",
+  panelOverlay: "--surface-panel-overlay",
+  panelShadow: "--surface-panel-shadow",
+  panelInset: "--surface-panel-inset"
+};
+const DEFAULT_SURFACE = {
+  borderWidth: "1px",
+  panelBlur: "0px",
+  panelSaturate: "100%",
+  panelOverlay: "none",
+  panelShadow: "0 1px 2px rgba(0, 0, 0, 0.18)",
+  panelInset: "0 0 0 0 transparent"
+};
+export {
+  COLOR_VARS,
+  DEFAULT_SURFACE,
+  DENSITY_VARS,
+  FONT_VARS,
+  SHAPE_VARS,
+  SURFACE_VARS
+};

package/dist/theme/useTheme.d.ts

@@ -15,7 +15,7 @@ export interface RevealOrigin {
     x: number;
     y: number;
 }
-export declare function revealTransition(update: () => void | Promise<void>, origin?: RevealOrigin, durationMs?: number): void;
+export declare function revealTransition(update: () => void | Promise<void>, origin?: RevealOrigin, durationMs?: number, page?: Document): void;
 export declare function applyThemeWithTransition(theme: TokenSet, origin?: RevealOrigin, root?: HTMLElement, durationMs?: number): void;
 export declare function serializeTheme(theme: TokenSet): string;
 export declare function themeToCssVars(theme: TokenSet): string;
@@ -24,7 +24,8 @@ export declare function themeToCssRule(theme: TokenSet, selector?: string): stri
 export declare function normalizeTheme(raw: Partial<TokenSet> & {
     name?: string;
 }): TokenSet;
-/** Parse + validate a theme JSON; throws on a malformed shape. */
+export declare function themeProblem(raw: Partial<TokenSet>): string | null;
+/** Parse + validate a theme JSON; throws on a malformed shape or a bad token value. */
 export declare function parseTheme(json: string): TokenSet;
 export declare function bootstrapTheme(fallback: TokenSet): TokenSet;
 export declare function cacheTheme(theme: TokenSet): void;

package/dist/theme/useTheme.js

@@ -0,0 +1,325 @@
+import { computed, readonly, shallowRef } from "vue";
+import { prefersReducedMotion, easingToken } from "../composables/easing.js";
+import { detectBackdropFilter } from "./backdrop.js";
+import { light, dark } from "./presets.js";
+import { COLOR_VARS, SHAPE_VARS, DENSITY_VARS, FONT_VARS, SURFACE_VARS, DEFAULT_SURFACE } from "./tokens.js";
+const CACHE_KEY = "leavepulse-ui-theme";
+const _current = shallowRef(null);
+const _system = shallowRef(null);
+let _hydrated = false;
+let _fallback = null;
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+let _media = null;
+function prefersDarkScheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+  return window.matchMedia(DARK_QUERY).matches || !window.matchMedia("(prefers-color-scheme: light)").matches;
+}
+function pick(system, dark2 = prefersDarkScheme()) {
+  return dark2 ? system.dark : system.light;
+}
+function onSchemeChange(event) {
+  const system = _system.value;
+  if (!system) return;
+  const theme = pick(system, event.matches);
+  applyTheme(theme);
+  _current.value = theme;
+}
+function followSystem(system) {
+  _system.value = system;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+  if (system && !_media) {
+    _media = window.matchMedia(DARK_QUERY);
+    _media.addEventListener("change", onSchemeChange);
+  } else if (!system && _media) {
+    _media.removeEventListener("change", onSchemeChange);
+    _media = null;
+  }
+}
+function readCache() {
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+    const raw = JSON.parse(cached);
+    if (raw && typeof raw === "object" && raw.system) {
+      return {
+        system: {
+          light: parseTheme(JSON.stringify(raw.system.light)),
+          dark: parseTheme(JSON.stringify(raw.system.dark))
+        }
+      };
+    }
+    return { theme: parseTheme(cached) };
+  } catch {
+    return null;
+  }
+}
+function hydrateOnce() {
+  if (_hydrated || typeof window === "undefined") return;
+  _hydrated = true;
+  const cached = readCache();
+  if (cached?.system) {
+    followSystem(cached.system);
+    _current.value = pick(cached.system);
+    writeThemeCookie(systemCookieValue(cached.system));
+  } else if (cached?.theme) {
+    _current.value = cached.theme;
+    writeThemeCookie(cached.theme.name);
+  } else if (_fallback) {
+    _current.value = _fallback;
+  } else {
+    return;
+  }
+  applyTheme(_current.value);
+}
+const DERIVED_VARS = [
+  ["--color-surface-overlay", "color-mix(in srgb, var(--color-surface-raised) 94%, transparent)"],
+  ["--color-node-compute", "var(--color-action)"],
+  ["--color-node-transit", "var(--color-accent)"],
+  ["--color-node-edge", "var(--color-brand)"],
+  ["--color-node-unknown", "var(--color-line-strong)"]
+];
+function themeEntries(input) {
+  const theme = normalizeTheme(input);
+  const out = [];
+  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
+    out.push([cssVar, theme.colors[key]]);
+  }
+  for (const [key, cssVar] of Object.entries(SHAPE_VARS)) {
+    out.push([cssVar, `${theme.shape[key]}px`]);
+  }
+  for (const [key, cssVar] of Object.entries(DENSITY_VARS)) {
+    out.push([cssVar, `${theme.density[key]}px`]);
+  }
+  for (const [key, cssVar] of Object.entries(FONT_VARS)) {
+    out.push([cssVar, theme.font[key]]);
+  }
+  const surface = theme.surface ?? DEFAULT_SURFACE;
+  for (const [key, cssVar] of Object.entries(SURFACE_VARS)) {
+    out.push([cssVar, surface[key]]);
+  }
+  for (const [cssVar, value] of DERIVED_VARS) out.push([cssVar, value]);
+  return out;
+}
+function applyTheme(theme, root = document.documentElement) {
+  for (const [cssVar, value] of themeEntries(theme)) root.style.setProperty(cssVar, value);
+  root.dataset.themeMode = theme.mode;
+  root.style.colorScheme = theme.mode;
+  detectBackdropFilter(root);
+}
+function revealTransition(update, origin, durationMs = 480, page = document) {
+  const doc = page;
+  const win = page.defaultView ?? window;
+  if (typeof doc.startViewTransition !== "function" || prefersReducedMotion(win)) {
+    void update();
+    return;
+  }
+  const x = origin?.x ?? win.innerWidth / 2;
+  const y = origin?.y ?? win.innerHeight / 2;
+  const endRadius = Math.hypot(
+    Math.max(x, win.innerWidth - x),
+    Math.max(y, win.innerHeight - y)
+  );
+  const transition = doc.startViewTransition(update);
+  const skipped = () => {
+  };
+  transition.ready.then(() => {
+    page.documentElement.animate(
+      {
+        clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`]
+      },
+      {
+        duration: durationMs,
+        easing: easingToken("ease-emphasized", void 0, page),
+        // Hold the fully-shrunk circle after the keyframes end. Without it the
+        // old snapshot snaps back to its default (un-clipped) state for the one
+        // frame between animation-end and the browser tearing down the
+        // view-transition pseudo-elements — that flash is the old theme
+        // "blinking" at the very end.
+        fill: "forwards",
+        pseudoElement: "::view-transition-old(root)"
+      }
+    );
+  }, skipped);
+}
+function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+  revealTransition(() => applyTheme(theme, root), origin, durationMs, root.ownerDocument);
+}
+function serializeTheme(theme) {
+  return JSON.stringify(theme);
+}
+function themeToCssVars(theme) {
+  return themeEntries(theme).map(([cssVar, value]) => `${cssVar}: ${value}`).join("; ");
+}
+function themeToCssRule(theme, selector = ":root") {
+  return `${selector} { color-scheme: ${theme.mode}; ${themeToCssVars(theme)}; }`;
+}
+function normalizeTheme(raw) {
+  const mode = raw.mode === "light" ? "light" : "dark";
+  const base = mode === "light" ? light : dark;
+  return {
+    name: typeof raw.name === "string" ? raw.name : base.name,
+    mode,
+    colors: { ...base.colors, ...raw.colors },
+    shape: { ...base.shape, ...raw.shape },
+    density: { ...base.density, ...raw.density },
+    font: { ...base.font, ...raw.font },
+    surface: raw.surface ? { ...DEFAULT_SURFACE, ...raw.surface } : void 0
+  };
+}
+const THEME_NAME_MAX = 64;
+const THEME_SIZE_MAX = 99999;
+const CSS_BREAKOUT = /[{}<>]/;
+const CSS_URL = /url\([^()]*\)/g;
+function cssValueProblem(value) {
+  if (typeof value !== "string" || !value.trim()) return "must be a non-empty string";
+  if (CSS_BREAKOUT.test(value) || value.replace(CSS_URL, "").includes(";")) return "is not a single CSS value";
+  return null;
+}
+function sizeProblem(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "must be a finite number";
+  if (value < 0 || value > THEME_SIZE_MAX) return `must be between 0 and ${THEME_SIZE_MAX}`;
+  return null;
+}
+function axisProblem(axis, values, keys, check) {
+  if (values === void 0) return null;
+  if (!values || typeof values !== "object") return `${axis} must be an object`;
+  for (const key of Object.keys(keys)) {
+    const value = values[key];
+    if (value === void 0) continue;
+    const problem = check(value);
+    if (problem) return `${axis}.${key} ${problem}`;
+  }
+  return null;
+}
+function themeProblem(raw) {
+  const { name, mode } = raw;
+  if (name !== void 0 && (typeof name !== "string" || !name.trim() || name.length > THEME_NAME_MAX)) {
+    return `name must be 1 to ${THEME_NAME_MAX} characters`;
+  }
+  if (mode !== void 0 && mode !== "light" && mode !== "dark") return 'mode must be "light" or "dark"';
+  return axisProblem("colors", raw.colors, COLOR_VARS, cssValueProblem) ?? axisProblem("shape", raw.shape, SHAPE_VARS, sizeProblem) ?? axisProblem("density", raw.density, DENSITY_VARS, sizeProblem) ?? axisProblem("font", raw.font, FONT_VARS, cssValueProblem) ?? axisProblem("surface", raw.surface, SURFACE_VARS, cssValueProblem);
+}
+function parseTheme(json) {
+  const raw = JSON.parse(json);
+  if (!raw || typeof raw !== "object" || !raw.colors || !raw.shape || !raw.density) {
+    throw new Error("Invalid theme: missing colors/shape/density");
+  }
+  const problem = themeProblem(raw);
+  if (problem) throw new Error(`Invalid theme: ${problem}`);
+  return normalizeTheme(raw);
+}
+function bootstrapTheme(fallback) {
+  const cached = typeof window === "undefined" ? null : readCache();
+  const theme = cached?.system ? pick(cached.system) : cached?.theme ?? fallback;
+  if (cached?.system) followSystem(cached.system);
+  if (typeof document !== "undefined") applyTheme(theme);
+  return theme;
+}
+function cacheTheme(theme) {
+  try {
+    localStorage.setItem(CACHE_KEY, serializeTheme(theme));
+  } catch {
+  }
+  writeThemeCookie(theme.name);
+}
+function cacheSystemThemes(system) {
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify({ system }));
+  } catch {
+  }
+  writeThemeCookie(systemCookieValue(system));
+}
+const THEME_COOKIE = "lp-theme";
+const SYSTEM_PREFIX = "system:";
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+function systemCookieValue(system) {
+  return `${SYSTEM_PREFIX}${encodeURIComponent(system.light.name)}|${encodeURIComponent(system.dark.name)}`;
+}
+function writeThemeCookie(value) {
+  if (typeof document === "undefined") return;
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(value)}; path=/; max-age=${COOKIE_MAX_AGE}; samesite=lax`;
+}
+function safeDecode(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function themeFromCookie(cookieValue, themes, options = {}) {
+  if (!cookieValue) return null;
+  const find = (name) => themes.find((theme) => theme.name === name) ?? null;
+  for (const value of [cookieValue, safeDecode(cookieValue)]) {
+    if (value.startsWith(SYSTEM_PREFIX)) {
+      const [lightName = "", darkName = ""] = value.slice(SYSTEM_PREFIX.length).split("|");
+      const wanted = options.prefersDark === false ? lightName : darkName;
+      const found2 = find(safeDecode(wanted)) ?? find(wanted);
+      if (found2) return found2;
+      continue;
+    }
+    const found = find(value);
+    if (found) return found;
+  }
+  return null;
+}
+function useTheme() {
+  hydrateOnce();
+  const commit = (theme) => {
+    followSystem(null);
+    cacheTheme(theme);
+    _current.value = theme;
+  };
+  return {
+    current: readonly(_current),
+    currentName: computed(() => _current.value?.name ?? ""),
+    system: computed(() => _system.value !== null),
+    setTheme: (theme, origin) => {
+      applyThemeWithTransition(theme, origin);
+      commit(theme);
+    },
+    setSystem: (themes, origin) => {
+      const theme = pick(themes);
+      applyThemeWithTransition(theme, origin);
+      followSystem(themes);
+      cacheSystemThemes(themes);
+      _current.value = theme;
+    },
+    init: (fallback) => {
+      if (typeof window === "undefined") return fallback;
+      _fallback = fallback;
+      hydrateOnce();
+      if (!_current.value) _current.value = bootstrapTheme(fallback);
+      return _current.value;
+    },
+    apply: (theme) => {
+      applyTheme(theme);
+      commit(theme);
+    },
+    applyWithTransition: (theme, origin) => {
+      applyThemeWithTransition(theme, origin);
+      commit(theme);
+    },
+    serialize: serializeTheme,
+    parse: parseTheme,
+    bootstrap: bootstrapTheme
+  };
+}
+export {
+  THEME_COOKIE,
+  applyTheme,
+  applyThemeWithTransition,
+  bootstrapTheme,
+  cacheSystemThemes,
+  cacheTheme,
+  normalizeTheme,
+  parseTheme,
+  prefersDarkScheme,
+  revealTransition,
+  serializeTheme,
+  themeEntries,
+  themeFromCookie,
+  themeProblem,
+  themeToCssRule,
+  themeToCssVars,
+  useTheme
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.77.2",
+  "version": "0.78.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -64,6 +64,10 @@
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags",
     "check:pack": "node scripts/check-pack.mjs",
+    "check:consumer": "node scripts/check-consumer.mjs",
+    "check:ssr": "node scripts/check-ssr.mjs",
+    "check:size": "node scripts/check-size.mjs",
+    "test:coverage": "bun test --coverage",
     "gen:icons": "node scripts/gen-kit-icons.mjs",
     "gen:meta": "node scripts/gen-preview-meta.mjs"
   },
@@ -84,8 +88,11 @@
     }
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
     "@iconify-json/lucide": "^1.2.112",
     "@iconify/vue": "^5.0.1",
+    "@nuxt/kit": "^4.0.0",
+    "@nuxt/schema": "^4.0.0",
     "@playwright/test": "^1.64.1",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^26.2.0",

package/src/component-names.ts

@@ -56,10 +56,12 @@ export const COMPONENT_NAMES = [
   "LpImageEditor",
   "LpInfraNode",
   "LpInput",
+  "LpInspector",
   "LpKeys",
   "LpLightbox",
   "LpLink",
   "LpLoader",
+  "LpLogInspector",
   "LpLogViewer",
   "LpMagnetic",
   "LpMapPicker",
@@ -135,5 +137,7 @@ export const COMPONENT_NAMES = [
   "LpTruncate",
   "LpTypewriter",
   "LpUptimeBar",
-  "LpVideoBackdrop"
+  "LpVideoBackdrop",
+  "LpWindow",
+  "LpWorkspaceSwitcher"
 ] as const

package/src/components/AppShellContextNav.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/*
+ * The row of sub-pages LpAppShell draws under its header where the rail is
+ * gone. Internal: real links, as in LpBottomNav, so a sub-page opens in a new
+ * tab when asked to and a screen reader announces where it leads.
+ */
+import { useLinkComponent } from "../composables/useLpConfig"
+import { resolveLink, type ResolvedLink } from "./link"
+import type { SidebarItem } from "./sidebar"
+
+const props = defineProps<{
+  items: SidebarItem[]
+  isActive: (item: SidebarItem) => boolean
+  label: string
+}>()
+
+const emit = defineEmits<{ (e: "select", item: SidebarItem): void }>()
+
+const linkComponent = useLinkComponent()
+
+function rowOf(item: SidebarItem): ResolvedLink {
+  const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href })
+  return link ?? { is: "button", props: { type: "button", disabled: item.disabled || undefined } }
+}
+</script>
+
+<template>
+  <nav :aria-label="props.label" class="flex shrink-0 gap-1 overflow-x-auto border-b border-line bg-surface px-4 py-1.5 lp-scrollbar-none">
+    <component
+      :is="rowOf(item).is"
+      v-for="item in items"
+      :key="item.id"
+      v-bind="rowOf(item).props"
+      :aria-current="isActive(item) ? 'page' : undefined"
+      :class="[
+        'shrink-0 rounded-control px-2.5 py-1 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring',
+        item.disabled ? 'cursor-not-allowed opacity-45' : isActive(item) ? 'bg-surface-soft text-ink' : 'text-muted hover:text-ink',
+      ]"
+      @click="emit('select', item)"
+    >
+      {{ item.label }}
+    </component>
+  </nav>
+</template>