@leavepulse/ui 0.71.1 → 0.71.2

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Ba4A9QC5.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CD0bzrt-.js";
+import { _ as _2 } from "./chunks/LpAddressInput-Bu6ws3Fp.js";
 import { _ as _3 } from "./chunks/LpMapPicker-Dp5RSCi9.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-B7anGlkI.js";
 import { _ as _5 } from "./chunks/LpAlert-BHi7ARqu.js";
-import { _ as _6 } from "./chunks/LpAppShell-1RmBp6xQ.js";
+import { _ as _6 } from "./chunks/LpAppShell-C5YW5pI7.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DDqe2M5g.js";
 import { _ as _8 } from "./chunks/LpAvatar-DqfKCIdr.js";
 import { _ as _9 } from "./chunks/LpBadge-C8fKEmTF.js";
@@ -60,40 +60,40 @@ import { _ as _37 } from "./chunks/LpLogViewer-x78YfhJf.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-D92oJfY_.js";
 import { _ as _39 } from "./chunks/LpModal-CpH0bNo7.js";
-import { _ as _40 } from "./chunks/LpModalNav-BH4ANQGJ.js";
+import { _ as _40 } from "./chunks/LpModalNav-Cuna8c_3.js";
 import { _ as _41 } from "./chunks/LpNotificationBell-BdUQqZhs.js";
 import { _ as _42 } from "./chunks/LpNumberField-DZY3Z670.js";
 import { _ as _43 } from "./chunks/LpTimeField-DQ8WvPr2.js";
-import { _ as _44 } from "./chunks/LpNumberFlow-5khYxsfX.js";
+import { _ as _44 } from "./chunks/LpNumberFlow-Dwb9MV1A.js";
 import { _ as _45 } from "./chunks/LpOtpInput-CeBPsM7D.js";
 import { _ as _46 } from "./chunks/LpPagination-DbeACavM.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-BzAZsf5V.js";
-import { _ as _48 } from "./chunks/LpPie-DdFSTbGE.js";
+import { _ as _48 } from "./chunks/LpPie-C1uIUFxu.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-BMpd-0QR.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DmZ3wUtP.js";
-import { _ as _51 } from "./chunks/LpProgress-BX33EKkN.js";
+import { _ as _51 } from "./chunks/LpProgress-WNaH4emv.js";
 import { _ as _52 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _53 } from "./chunks/LpRadioGroup-CsXeV9Ct.js";
 import { _ as _54 } from "./chunks/LpRollingText-DiL717LK.js";
 import { _ as _55 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
 import { _ as _56 } from "./chunks/LpSegmented-D2VST0o3.js";
 import { _ as _57 } from "./chunks/LpSection-DcQsieHG.js";
-import { _ as _58 } from "./chunks/LpSelect-DYX2-u5A.js";
+import { _ as _58 } from "./chunks/LpSelect-D3pRJfRY.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
 import { _ as _61 } from "./chunks/LpSwap-DzE6M3Mg.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-D44peKq2.js";
+import { _ as _63 } from "./chunks/LpSidebar-Bk7b-K4l.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 { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _68 } from "./chunks/LpSparkline-CExIRDb3.js";
-import { _ as _69 } from "./chunks/LpStat-DIsQfbeD.js";
+import { _ as _69 } from "./chunks/LpStat-Dzn6WFzi.js";
 import { _ as _70 } from "./chunks/LpStepper-C9RM_yTG.js";
 import { _ as _71 } from "./chunks/LpSwitch-bGZxUDSx.js";
 import { default as default12 } from "./components/LpTable.vue.js";
@@ -104,7 +104,7 @@ import { default as default13 } from "./components/LpTabs.vue.js";
 import { _ as _73 } from "./chunks/LpTagsInput-DrjmrOge.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _74 } from "./chunks/LpTextarea-BbYqmG1S.js";
-import { _ as _75 } from "./chunks/LpThemeSwitcher-C0A5sg_E.js";
+import { _ as _75 } from "./chunks/LpThemeSwitcher-DarPHuX8.js";
 import { _ as _76 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _77 } from "./chunks/LpToaster-BTTl_wuy.js";
 import { _ as _78 } from "./chunks/LpTooltip-BcBvIx4z.js";
@@ -114,8 +114,8 @@ import { _ as _80 } from "./chunks/LpHintLayer-C2asBIfs.js";
 import { _ as _81 } from "./chunks/LpHints-CNZQ76JV.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _82 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _83 } from "./chunks/LpTopologyCanvas-B0wEvAoq.js";
-import { _ as _84 } from "./chunks/LpUptimeBar-DRadGq4Y.js";
+import { _ as _83 } from "./chunks/LpTopologyCanvas-Cq-MiJwo.js";
+import { _ as _84 } from "./chunks/LpUptimeBar-BbhVTPnL.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";
@@ -123,7 +123,7 @@ import { layoutController, useLayout } from "./layout/useLayout.js";
 import { a as parseTheme, s as serializeTheme } from "./chunks/useTheme-BOV_-AiY.js";
 import { D, 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/useTheme-BOV_-AiY.js";
 import { G, N, d as d2, i as i3, s } from "./chunks/backdrop-Dkf2vM81.js";
-import { _ as _85, a as a2, b as b3, c as c3, d as d3, e as e2, u as u2, w } from "./chunks/LpThemeStudio-B2nPaG-h.js";
+import { _ as _85, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-IupHqP0x.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";
@@ -164,8 +164,8 @@ import { _ as _87 } from "./chunks/LpFrame-BVQCQLDI.js";
 import { _ as _88 } from "./chunks/LpThemeStudioSection-BwhqYDLf.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 import { _ as _89 } from "./chunks/LpRepeater-OvzByE5L.js";
-import { _ as _90 } from "./chunks/LpGauge-BdjPGnqw.js";
-import { _ as _91 } from "./chunks/LpQuota-DqNv1yjs.js";
+import { _ as _90 } from "./chunks/LpGauge-DFdt33x8.js";
+import { _ as _91 } from "./chunks/LpQuota-Cz9PvklM.js";
 import { _ as _92 } from "./chunks/LpStatus-BQU1TUsv.js";
 import { _ as _93 } from "./chunks/LpRelativeTime-UM8EkfrN.js";
 import { _ as _94 } from "./chunks/LpActivityLine-CJvzrNpj.js";
@@ -181,14 +181,14 @@ import { childProgress, connectorFilled, currentStepIndex, isSettled, overallSta
 import { _ as _97 } from "./chunks/LpLoader-DjJEX8hL.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _98 } from "./chunks/LpCountdown-DTdMF8DL.js";
+import { _ as _98 } from "./chunks/LpCountdown-CXrEK0ev.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
 import { _ as _99 } from "./chunks/LpCopyButton-Dmq7DmFw.js";
 import { _ as _100 } from "./chunks/LpSecretField-DwQiPOko.js";
 import { _ as _101 } from "./chunks/LpDataList-CFPtSsBB.js";
 import { _ as _102 } from "./chunks/LpEditable-CjxuOVh_.js";
 import { _ as _103 } from "./chunks/LpTruncate-TcqfkyJM.js";
-import { _ as _104 } from "./chunks/LpCodeDisplay-BK2FHbtM.js";
+import { _ as _104 } from "./chunks/LpCodeDisplay-C9pIMF2R.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _105 } from "./chunks/LpHoverCard-spGxyw7T.js";
 import { _ as _106 } from "./chunks/LpIdenticon-BzdC_qz9.js";
@@ -214,10 +214,10 @@ import { _ as _115 } from "./chunks/LpSpotlight-4F3NeUMY.js";
 import { _ as _116 } from "./chunks/LpGlowBorder-B8V-QzIl.js";
 import { _ as _117 } from "./chunks/LpMagnetic-CtXKLa2Y.js";
 import { spotlightPoint, useSpotlight } from "./composables/useSpotlight.js";
-import { _ as _118 } from "./chunks/LpCommandScope-ubtWDMa0.js";
+import { _ as _118 } from "./chunks/LpCommandScope-BlKcgBnK.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
-import { u as u3 } from "./chunks/palette-BiY7yQZL.js";
-import { _ as _119 } from "./chunks/LpPaletteTheme-CqWNRwHE.js";
+import { u as u3 } from "./chunks/palette-Cvxl_1tM.js";
+import { _ as _119 } from "./chunks/LpPaletteTheme-DkikZ362.js";
 const UI_CONFIG_VERSION = 1;
 function serializeConfig(config) {
   const out = {
@@ -391,6 +391,7 @@ export {
   b3 as STUDIO_CORNERS,
   c3 as STUDIO_MOTION,
   d3 as STUDIO_SIZES,
+  S as STUDIO_SYSTEM,
   T as THEME_COOKIE,
   TONES,
   TONE_ALIASES,

package/dist/theme/palette.d.ts

@@ -1,9 +1,12 @@
 import { type MaybeRefOrGetter } from "vue";
 import { type PaletteScope } from "../composables/usePaletteCommands";
 import type { ThemeStudio } from "./studio";
+import type { ThemeStudioPart } from "../components/LpThemeStudio.vue";
 /** Registers the studio itself; no second list of theme options in the app. */
+/** `hide` leaves out the same studio rows the app hides in its own studio. */
 export declare function usePaletteTheme(studio: MaybeRefOrGetter<ThemeStudio | undefined>, options?: {
     id?: string;
     label?: string;
     scope?: PaletteScope;
+    hide?: ThemeStudioPart[];
 }): void;

package/package.json

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

package/src/components/LpChart.vue

@@ -41,6 +41,7 @@ import {
   pointCount,
   resolveLabels,
   xAt,
+  xLabelIndices,
   yAt,
   type Box,
   type ChartMarker,
@@ -255,6 +256,23 @@ const allSeries = computed(() =>
 )
 const visible = computed(() => allSeries.value.filter((s) => !hidden.value.has(s.id)))
 
+// A series asked to start hidden is hidden once, when it first appears: the
+// legend owns it from then on, and a data refresh must not switch it back off.
+const seeded = new Set<string>()
+watch(
+  () => props.series.map((s, i) => [`${i}:${s.name}`, !!s.hidden] as const),
+  (entries) => {
+    let next: Set<string> | null = null
+    for (const [id, off] of entries) {
+      if (seeded.has(id)) continue
+      seeded.add(id)
+      if (off) (next ??= new Set(hidden.value)).add(id)
+    }
+    if (next && next.size < entries.length) hidden.value = next
+  },
+  { immediate: true },
+)
+
 /*
  * How present each series is, 1 to 0, driven per frame rather than by CSS.
  *
@@ -664,9 +682,11 @@ const xLabelStride = computed(() => {
 })
 
 const xLabels = computed(() =>
-  labels.value
-    .map((label, i) => ({ label, i, x: xAt(i, count.value, box.value, banded.value) }))
-    .filter(({ i }) => i % xLabelStride.value === 0 || i === count.value - 1),
+  xLabelIndices(labels.value.length, xLabelStride.value).map((i) => ({
+    label: labels.value[i],
+    i,
+    x: xAt(i, count.value, box.value, banded.value),
+  })),
 )
 
 // ── marks ──────────────────────────────────────

package/src/components/LpCommandPalette.vue

@@ -1519,7 +1519,10 @@ const guardOutside = useOutsideGuard()
           <div class="flex gap-2"><LpButton :loading="executing || validating" @click="submitPrompt">{{ text.submit }}</LpButton><LpButton variant="ghost" @click="promptCommand = undefined; inputRef?.focus()">{{ text.backToResults }}</LpButton></div>
         </div>
         <p v-if="actionError" role="alert" class="px-4 py-2 text-sm text-danger">{{ actionError }}</p>
-        <div v-if="active && (canPin || selectedActions.length) && !promptCommand" class="flex items-center justify-end gap-2 border-b border-line px-3 py-1">
+        <!-- Touch only: there the footer with its keys is hidden, and these are
+             the only way to the row's actions and pin. On a pointer the same
+             buttons live in the footer, so the list never shifts under this strip. -->
+        <div v-if="active && (canPin || selectedActions.length) && !promptCommand" class="hidden items-center justify-end gap-2 border-b border-line px-3 py-1 [@media(hover:none)_and_(pointer:coarse)]:flex">
           <LpButton v-if="selectedActions.length" size="xs" variant="ghost" @click="openActions(active)">{{ text.actions }} <span class="text-muted">Tab</span></LpButton>
           <LpButton v-if="canPin" size="xs" variant="ghost" :aria-label="isPinned(active) ? text.unpin : text.pin" :aria-pressed="isPinned(active)" @click="togglePin(active)"><LpIcon name="lucide:star" :size="14" />{{ isPinned(active) ? text.unpin : text.pin }} <span class="text-muted">Alt+P</span></LpButton>
         </div>
@@ -1727,17 +1730,32 @@ const guardOutside = useOutsideGuard()
           </span>
           <!-- Only inside a mode: at the root Backspace just edits the query,
                and advertising it there would be a lie. -->
-          <span
-            v-if="selectedActions.length"
-            class="flex items-center gap-1 transition-colors"
+          <button
+            v-if="selectedActions.length && active"
+            type="button"
+            class="flex items-center gap-1 rounded-small outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
             :class="showActionsKey && 'font-medium text-brand'"
+            :aria-label="text.actions"
+            @click="openActions(active)"
           >
             <kbd
               class="rounded-small border px-1 text-[10px] transition-colors"
               :class="showActionsKey ? 'border-brand' : 'border-line'"
             >{{ text.tab }}</kbd>
             {{ text.actions }}
-          </span>
+          </button>
+          <button
+            v-if="canPin && active && !promptCommand"
+            type="button"
+            class="flex items-center gap-1 rounded-small outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            :aria-label="isPinned(active) ? text.unpin : text.pin"
+            :aria-pressed="isPinned(active)"
+            @click="togglePin(active)"
+          >
+            <kbd class="rounded-small border border-line px-1 text-[10px]">Alt+P</kbd>
+            <LpIcon name="lucide:star" :size="11" :class="isPinned(active) && 'fill-current text-brand'" />
+            {{ isPinned(active) ? text.unpin : text.pin }}
+          </button>
           <span v-if="trail.length" class="flex items-center gap-1">
             <kbd class="rounded-small border border-line px-1 text-[10px]">⌫</kbd>
             {{ text.back }}

package/src/components/LpNumberFlow.vue

@@ -229,8 +229,8 @@ onBeforeUnmount(stop)
  * own, the same rule the dates follow: a Russian app read "4,594" otherwise.
  */
 const locale = useLocale(() => props.locale)
-// Only the grouped form is written in the locale; the others always use ".".
-const fractionMark = computed(() => (props.grouped && !props.format && !props.compact ? decimalMark(locale.value) : "."))
+// The grouped and compact forms are written in the locale; the plain one always uses ".".
+const fractionMark = computed(() => ((props.grouped || props.compact) && !props.format ? decimalMark(locale.value) : "."))
 
 const formatted = computed(() => formatAt(round(displayed.value), !settled.value))
 
@@ -249,10 +249,10 @@ function formatAt(v: number, padded: boolean): string {
      *
      * The decimal count is what stays fixed: one place whenever a unit is in
      * play, so the row's shape only changes at a rollover, not on every frame.
-     * No locale here: the cells below find the fraction by its ".", and a
-     * locale's "," would turn the fraction's columns into integer ones.
+     * Written in the app's locale: the cells find the fraction by that
+     * locale's own mark (fractionMark), so "1,2 тыс." keeps its columns.
      */
-    return compactNumber(v, { plainDecimals: 0, fixed: true })
+    return compactNumber(v, { plainDecimals: 0, fixed: true, locale: locale.value, words: true })
   }
   const pad = padded ? Math.max(1, padTo.value) : 1
   if (props.grouped)
@@ -280,6 +280,8 @@ interface Cell {
   char: string
   /** A leading zero held open for a column the value hasn't reached yet. */
   isPad: boolean
+  /** A space between two digits: the locale's thousands separator. */
+  isGap: boolean
 }
 
 /*
@@ -338,7 +340,8 @@ const cells = computed<Cell[]>(() => {
     const digit = isDigit(char) ? char.charCodeAt(0) - 48 : null
     const isPad = leading && digit === 0 && i < intEnd - 1
     if (digit !== null && digit !== 0) leading = false
-    return { key: keys[i], digit, char, isPad }
+    const isGap = digit === null && /\s/.test(char) && isDigit(chars[i - 1] ?? "") && isDigit(chars[i + 1] ?? "")
+    return { key: keys[i], digit, char, isPad, isGap }
   })
 })
 
@@ -380,7 +383,7 @@ const label = computed(
           v-for="cell in cells"
           :key="cell.key"
           class="lp-nf__cell"
-          :class="cell.isPad ? 'lp-nf__cell--pad' : ''"
+          :class="{ 'lp-nf__cell--pad': cell.isPad, 'lp-nf__cell--gap': cell.isGap }"
         >
           <!-- A digit is a window onto its strip; a separator is just a glyph. -->
           <template v-if="cell.digit !== null">
@@ -486,6 +489,15 @@ const label = computed(
 
 /* Faded, so a held-open column reads as an empty wheel rather than a zero the
    number actually has. */
+/*
+ * A space separator (ru, fr, …) takes a whole column in a monospaced or
+ * tabular face, so "7 271" read as "7  271". It is drawn as the narrow gap
+ * the locale means.
+ */
+.lp-nf__cell--gap {
+  width: 0.25em;
+}
+
 .lp-nf__cell--pad {
   opacity: 0.18;
   transition: opacity var(--duration-fast, 160ms) linear;

package/src/components/LpPaletteTheme.vue

@@ -3,12 +3,12 @@ import { computed, ref } from "vue"
 import type { StudioState, PreviewableThemeStudio } from "../theme/studio"
 import { useLabels } from "../composables/useLpConfig"
 import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
-import LpThemeStudio from "./LpThemeStudio.vue"
+import LpThemeStudio, { type ThemeStudioPart } from "./LpThemeStudio.vue"
 import LpThemeProvider from "./LpThemeProvider.vue"
 import LpButton from "./LpButton.vue"
 import LpInput from "./LpInput.vue"
 
-const props = defineProps<{ studio: PreviewableThemeStudio }>()
+const props = defineProps<{ studio: PreviewableThemeStudio; hide?: ThemeStudioPart[] }>()
 suppressPaletteDiscovery()
 const text = useLabels("paletteTheme", { title: "Theme", apply: "Apply theme", revert: "Revert draft", sample: "Preview", action: "Continue", placeholder: "A field in this theme" })
 const snapshot = ref({ ...props.studio.state.value })
@@ -43,6 +43,6 @@ function apply() {
       <LpInput :placeholder="text.placeholder" readonly :tabindex="-1" />
       <LpButton :tabindex="-1">{{ text.action }}</LpButton>
     </LpThemeProvider>
-    <LpThemeStudio :studio="draft" :labels="{ reset: text.revert }" />
+    <LpThemeStudio :studio="draft" :hide="hide" :labels="{ reset: text.revert }" />
   </div>
 </template>

package/src/components/LpSelect.vue

@@ -104,10 +104,11 @@ const props = withDefaults(
   },
 )
 
+/* The text steps with the height, as in every other kit field: a small select beside a small input read a size larger. */
 const SIZE_HEIGHT = {
-  sm: "h-(--size-control-sm)",
-  md: "h-(--size-control-md)",
-  lg: "h-(--size-control-lg)",
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
 } as const
 const anchorHeight = computed(() => SIZE_HEIGHT[props.size])
 
@@ -431,7 +432,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       @focusout="onFocusOut"
       :class="[
         anchorHeight,
-        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2',
+        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2',
         field.disabled && 'cursor-not-allowed opacity-55',
         field.invalid
           ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'

package/src/components/LpSidebarNav.vue

@@ -15,6 +15,7 @@ export default { inheritAttrs: false }
 import { Motion } from "motion-v"
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui"
 import { computed, ref } from "vue"
+import { useLocale } from "../composables/useLocale"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpBadge from "./LpBadge.vue"
 import LpContextMenu from "./LpContextMenu.vue"
@@ -61,6 +62,12 @@ const emit = defineEmits<{
 }>()
 
 /** `key` when the app set one, else the title — see SidebarSection.key. */
+// A count reads in the app's locale like every other figure: "7 563", not "7563".
+const locale = useLocale()
+function badgeText(badge: number | string): string {
+  return typeof badge === "number" ? badge.toLocaleString(locale.value) : badge
+}
+
 function sectionKey(section: SidebarSection): string {
   return section.key ?? section.title ?? ""
 }
@@ -245,7 +252,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               :tone="itemActive(item) ? 'brand' : 'neutral'"
               class="relative z-10 shrink-0"
             >
-              {{ item.badge }}
+              {{ badgeText(item.badge) }}
             </LpBadge>
           </slot>
         </component>

package/src/components/LpStat.vue

@@ -141,10 +141,12 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         </Transition>
       </span>
     </div>
-    <div class="flex items-baseline gap-2">
+    <!-- A narrow tile moves the delta under the figure rather than breaking the
+         figure itself: "2085 ч" split across two lines reads as two values. -->
+    <div class="flex flex-wrap items-baseline gap-x-2">
       <!-- The placeholder sits INSIDE the value's own type size, so its line box
            is the real one: the tile cannot change height when the figure lands. -->
-      <span class="font-mono text-3xl font-medium tracking-tight text-ink">
+      <span class="whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink">
         <!-- Each side wrapped in a plain element: LpNumberFlow renders more
              than one root node, which a Transition cannot fade. -->
         <Transition v-bind="FADE">
@@ -173,7 +175,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </span>
       <span
         v-else-if="showDelta"
-        class="inline-flex items-center gap-0.5 text-sm font-medium tabular-nums"
+        class="inline-flex items-center gap-0.5 whitespace-nowrap text-sm font-medium tabular-nums"
         :class="trendColor"
       >
         <LpIcon :name="trendIcon" :size="14" />

package/src/components/LpTabs.vue

@@ -61,8 +61,15 @@ const props = withDefaults(
      * where the pointer crosses the bar on its way elsewhere.
      */
     hoverFollow?: boolean
+    /**
+     * Icons only, the label kept for screen readers and shown on hover. For a
+     * header that cannot fit every label: a tab cut off at the edge, or hidden
+     * under the actions beside it, cannot be reached at all. Tabs without an
+     * icon keep their label.
+     */
+    compact?: boolean
   }>(),
-  { variant: "contained", accent: false, block: false, hoverFollow: true },
+  { variant: "contained", accent: false, block: false, hoverFollow: true, compact: false },
 )
 
 const bottom = computed(() => props.variant === "bottom")
@@ -190,6 +197,7 @@ usePaletteCommands(() => props.items.map(item => ({
       <TabsTrigger
         :value="item.value"
         :disabled="item.disabled"
+        :title="compact && item.icon && !bottom ? item.label : undefined"
         class="relative inline-flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45"
         :class="[
           bottom
@@ -244,7 +252,7 @@ usePaletteCommands(() => props.items.map(item => ({
             </LpBadge>
           </Transition>
         </span>
-        <span class="relative z-10" :class="bottom ? 'max-w-full truncate' : ''">{{ item.label }}</span>
+        <span class="relative z-10" :class="bottom ? 'max-w-full truncate' : compact && item.icon ? 'sr-only' : ''">{{ item.label }}</span>
         <AttentionDot v-if="item.dot && !item.icon" />
         <!-- The count rolls when it changes, and the chip scales in and out
              rather than popping. -->

package/src/components/LpThemeStudio.vue

@@ -105,7 +105,7 @@ const SWATCH = "relative size-8 overflow-hidden rounded-full ring-2 transition-[
 
 const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K, value: string) => studio.tune({ [key]: value } as Partial<StudioState>)
 
-usePaletteTheme(() => studio ?? undefined)
+usePaletteTheme(() => studio ?? undefined, { hide: props.hide })
 </script>
 
 <template>

package/src/components/LpThemeSwitcher.vue

@@ -228,6 +228,9 @@ function followSystem() {
   // With the studio, "System" is its base theme, so the tuning stays on top.
   if (tuner) {
     tuner.pickTheme(STUDIO_SYSTEM)
+    // A v-model bound to the switcher learns "system" too, or it would keep
+    // the previous name and win over the studio: the check stayed on it.
+    emit("update:modelValue", STUDIO_SYSTEM)
     emit("change", tuner.theme.value)
     return
   }
@@ -300,7 +303,7 @@ const triggerLabel = computed(
   () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value),
 )
 
-usePaletteTheme(() => tuner ?? undefined)
+usePaletteTheme(() => tuner ?? undefined, { hide: props.studioHide })
 </script>
 
 <template>

package/src/components/LpTopologyCanvas.vue

@@ -20,9 +20,10 @@ import {
   type Connection,
   type Node,
   type NodeTypesObject,
+  type Padding,
 } from "@vue-flow/core"
 import { MiniMap } from "@vue-flow/minimap"
-import { computed, defineComponent, h, markRaw, watch, type Component } from "vue"
+import { computed, defineComponent, h, markRaw, ref, watch, type Component } from "vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpLaneNode from "./LpLaneNode.vue"
 import LpServiceNode, { type ServiceNodeData } from "./LpServiceNode.vue"
@@ -325,6 +326,7 @@ const {
   getSelectedNodes,
   fitView,
   setViewport,
+  onNodesInitialized,
 } = useVueFlow()
 onNodeClick(({ node }) => emit("node-select", node.id))
 // A node usually has two levels of interest — pick it out, or open it — and a
@@ -389,13 +391,42 @@ onEdgeContextMenu(({ edge, event }) => {
 onPaneClick(() => emit("pane-click"))
 onConnect((conn) => emit("connect", conn))
 
+// The legend and the minimap float over the canvas, so a plain fit puts the
+// outermost nodes under them. Fitting reserves their corner instead: the side
+// they sit on gets their height on top of the usual margin. On a phone both
+// are hidden and only the margin is left.
+const legendBox = ref<HTMLElement | null>(null)
+const MINIMAP_HEIGHT = 165
+const FRAME = 24
+function framePadding(): Padding {
+  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: Parameters<typeof fitView>[0] = {}) {
+  return fitView({ padding: framePadding(), ...params })
+}
+let fitted = false
+onNodesInitialized(() => {
+  if (fitted) return
+  fitted = true
+  void fitFramed()
+})
+
 // Restore a saved viewport (pan/zoom). The host calls this after loading the
 // user's persisted CanvasViewport on mount.
 async function applyViewport(v: CanvasViewport): Promise<void> {
   await setViewport({ x: v.x, y: v.y, zoom: v.zoom })
 }
 
-defineExpose({ fitView, setViewport: applyViewport })
+defineExpose({ fitView: fitFramed, setViewport: applyViewport })
 </script>
 
 <template>
@@ -413,7 +444,6 @@ defineExpose({ fitView, setViewport: applyViewport })
     :default-viewport="{ zoom: 0.9 }"
     :min-zoom="0.3"
     :max-zoom="2"
-    fit-view-on-init
     class="lp-topology"
   >
     <Background :gap="22" :size="1.4" pattern-color="var(--color-line-strong)" />
@@ -428,13 +458,14 @@ defineExpose({ fitView, setViewport: applyViewport })
       node-color="var(--color-surface-soft)"
       mask-color="rgba(0,0,0,0.55)"
     />
-    <Controls v-if="controls" />
+    <Controls v-if="controls" :fit-view-params="{ padding: framePadding() }" />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
     <!-- On a phone the legend would sit on the graph itself; the edge styles
          stay readable without it there. -->
     <Panel v-if="legend" :position="legendPosition" :class="legendOffset" class="max-sm:hidden">
       <div
+        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"
       >
         <div

package/src/components/chart.ts

@@ -28,6 +28,13 @@ export interface ChartSeries {
    * own scale and its own ticks.
    */
   axis?: "left" | "right"
+  /**
+   * Start with this series switched off, the legend turning it back on. For a
+   * series worth having but loud next to the rest: messages in thousands beside
+   * people in tens flatten the people line on a shared axis until they are
+   * hidden, so the chart opens on the readable view.
+   */
+  hidden?: boolean
 }
 
 export type ChartAxis = "left" | "right"
@@ -58,6 +65,25 @@ export interface ChartMarker {
   color?: string
 }
 
+/**
+ * Which x labels to print with every `stride`-th one shown. The last point is
+ * always labelled (it is usually "now"), and when it lands within half a
+ * stride to the previous shown label that one gives way: "20 22 23" read as
+ * one smudge at the end of an hourly axis.
+ */
+export function xLabelIndices(count: number, stride: number): number[] {
+  if (count <= 0) return []
+  const step = Math.max(1, Math.floor(stride))
+  const out: number[] = []
+  for (let i = 0; i < count; i += step) out.push(i)
+  const last = count - 1
+  if (out[out.length - 1] !== last) {
+    if (out.length > 1 && last - out[out.length - 1] <= step / 2) out.pop()
+    out.push(last)
+  }
+  return out
+}
+
 /** The x index a marker points at, or -1 when it names nothing on the axis. */
 export const markerIndex = (at: number | string, labels: string[], count: number): number => {
   if (typeof at === "number") return Number.isInteger(at) && at >= 0 && at < count ? at : -1