@leavepulse/ui 0.71.1 → 0.72.0

package/src/components/LpTabFace.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/*
+ * What a tab shows: its icon with a dot or a count on the corner, its label,
+ * and a trailing dot or count where there is no icon to carry them. Shared by
+ * LpTabs and LpBottomNav, so a section tab and a page in the bottom bar read
+ * the same. Not exported on its own.
+ */
+import AttentionDot from "./AttentionDot.vue"
+import LpBadge from "./LpBadge.vue"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+
+defineProps<{
+  item: { label: string; icon?: string; dot?: boolean; badge?: number | string }
+  bottom?: boolean
+  compact?: boolean
+  active?: boolean
+}>()
+</script>
+
+<template>
+  <span v-if="item.icon" class="relative z-10 inline-flex">
+    <LpIcon :name="item.icon" :size="bottom ? 22 : 14" />
+    <AttentionDot v-if="item.dot" corner />
+    <!-- On a bottom bar the count rides on the icon's corner, as phone
+         navs draw it: the label under the icon has no room beside it. -->
+    <Transition name="lp-tab-badge">
+      <LpBadge
+        v-if="bottom && item.badge != null"
+        size="sm"
+        :tone="active ? 'brand' : 'neutral'"
+        class="absolute -right-3 -top-1.5 min-w-[18px] justify-center"
+      >
+        <LpRollingText :value="item.badge" />
+      </LpBadge>
+    </Transition>
+  </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. -->
+  <Transition name="lp-tab-badge">
+    <LpBadge
+      v-if="!(bottom && item.icon) && item.badge != null"
+      size="sm"
+      :tone="active ? 'brand' : 'neutral'"
+      class="relative z-10 min-w-[18px] justify-center"
+    >
+      <LpRollingText :value="item.badge" />
+    </LpBadge>
+  </Transition>
+</template>

package/src/components/LpTabs.vue

@@ -5,13 +5,10 @@ import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
 import { computed, nextTick, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import { prefersReducedMotion } from "../composables/easing"
-import AttentionDot from "./AttentionDot.vue"
-import LpBadge from "./LpBadge.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
-import LpIcon from "./LpIcon.vue"
-import LpRollingText from "./LpRollingText.vue"
 import LpSkeleton from "./LpSkeleton.vue"
-import { pickTab } from "./tabs"
+import LpTabFace from "./LpTabFace.vue"
+import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER, pickTab } from "./tabs"
 
 export interface TabItem {
   value: string
@@ -61,8 +58,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")
@@ -170,7 +174,7 @@ usePaletteCommands(() => props.items.map(item => ({
       ref="list"
       :aria-label="label"
       :class="bottom
-        ? 'grid w-full auto-cols-fr grid-flow-col border-t border-line bg-surface pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]'
+        ? BOTTOM_BAR
         : [
             'max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
             block ? 'flex w-full' : 'inline-flex',
@@ -190,10 +194,11 @@ 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
-            ? 'min-h-14 min-w-0 flex-col gap-0.5 px-1 py-1.5 text-[11px] font-medium focus-visible:ring-inset'
+            ? BOTTOM_ITEM
             : 'shrink-0 gap-1.5 whitespace-nowrap text-sm',
           block && !bottom ? 'flex-1' : '',
           variant === 'underline' ? 'rounded-t-inner px-3 pt-1.5 pb-2' : '',
@@ -217,10 +222,7 @@ usePaletteCommands(() => props.items.map(item => ({
                 accent ? 'bg-brand' : 'bg-ink',
               ]
             : bottom
-              ? [
-                  'absolute inset-x-[22%] top-0 z-0 h-0.5 rounded-b-full',
-                  accent ? 'bg-brand' : 'bg-ink',
-                ]
+              ? [BOTTOM_MARKER, accent ? 'bg-brand' : 'bg-ink']
               : [
                   'absolute inset-0 z-0 rounded-inner shadow-sm',
                   accent
@@ -228,36 +230,7 @@ usePaletteCommands(() => props.items.map(item => ({
                     : 'border border-line bg-surface-raised',
                 ]"
         />
-        <span v-if="item.icon" class="relative z-10 inline-flex">
-          <LpIcon :name="item.icon" :size="bottom ? 22 : 14" />
-          <AttentionDot v-if="item.dot" corner />
-          <!-- On a bottom bar the count rides on the icon's corner, as phone
-               navs draw it: the label under the icon has no room beside it. -->
-          <Transition name="lp-tab-badge">
-            <LpBadge
-              v-if="bottom && item.badge != null"
-              size="sm"
-              :tone="current === item.value ? 'brand' : 'neutral'"
-              class="absolute -right-3 -top-1.5 min-w-[18px] justify-center"
-            >
-              <LpRollingText :value="item.badge" />
-            </LpBadge>
-          </Transition>
-        </span>
-        <span class="relative z-10" :class="bottom ? 'max-w-full truncate' : ''">{{ 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. -->
-        <Transition name="lp-tab-badge">
-          <LpBadge
-            v-if="!(bottom && item.icon) && item.badge != null"
-            size="sm"
-            :tone="current === item.value ? 'brand' : 'neutral'"
-            class="relative z-10 min-w-[18px] justify-center"
-          >
-            <LpRollingText :value="item.badge" />
-          </LpBadge>
-        </Transition>
+        <LpTabFace :item="item" :bottom="bottom" :compact="compact" :active="current === item.value" />
       </TabsTrigger>
       </LpContextMenu>
       <!-- Items that arrive later (counts from a server, tabs from a route)

package/src/components/LpTextarea.vue

@@ -4,7 +4,7 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
-import { computed, useAttrs } from "vue"
+import { computed, nextTick, onMounted, ref, useAttrs, watch } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
@@ -25,7 +25,14 @@ const props = withDefaults(defineProps<{
    * the <textarea> for native validation.
    */
   required?: boolean
-}>(), { palette: undefined })
+  /**
+   * Grows with what is typed, wrapped lines included, from `rows` up to
+   * `maxRows`, then scrolls; the drag handle goes, since the height is the
+   * text's. For a composer, where a fixed box is either cramped or empty.
+   */
+  autosize?: boolean
+  maxRows?: number
+}>(), { palette: undefined, maxRows: 8 })
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
@@ -49,9 +56,31 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 
+const box = ref<HTMLTextAreaElement | null>(null)
+
+// Measured rather than styled with `field-sizing: content`, which WebKit does
+// not have: an app in a WebKitGTK window would keep a fixed box.
+function fit() {
+  const el = box.value
+  if (!props.autosize || !el) return
+  const style = getComputedStyle(el)
+  const line = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.4
+  const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
+  const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+  el.style.height = "auto"
+  const max = line * props.maxRows + padding + borders
+  el.style.height = `${Math.min(el.scrollHeight + borders, max)}px`
+  el.style.overflowY = el.scrollHeight + borders > max + 1 ? "auto" : "hidden"
+}
+watch(() => props.modelValue, () => nextTick(fit))
+onMounted(fit)
+
+defineExpose({ el: box, fit })
+
 const textareaClass = computed(() =>
   mergeClass(
-    "w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+    props.autosize ? "w-full resize-none" : "w-full resize-y",
+    "rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
     field.value.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line",
     hasField.value ? "" : (attrs.class as string),
   ),
@@ -72,6 +101,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
     :style="attrs.style"
   >
     <textarea
+      ref="box"
       v-bind="textareaAttrs"
       :id="field.id"
       :value="modelValue"
@@ -83,7 +113,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       :aria-describedby="field.describedBy"
       :class="textareaClass"
       :style="hasField ? undefined : (attrs.style as never)"
-      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value); fit()"
     />
   </FieldWrapper>
 </template>

package/src/components/LpThemeStudio.vue

@@ -10,7 +10,7 @@ import { usePaletteTheme } from "../theme/palette"
  * An app adds its own rows through `#start` and `#end` (LpThemeStudioSection
  * gives them the panel's look) and drops built-in ones with `hide`.
  */
-import { computed, ref } from "vue"
+import { computed, h, ref, type FunctionalComponent } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { STUDIO_BRANDS, STUDIO_SYSTEM, useThemeStudio, type StudioState, type ThemeStudio } from "../theme/studio"
 import type { TokenSet } from "../theme/tokens"
@@ -20,7 +20,10 @@ import LpCodeBlock from "./LpCodeBlock.vue"
 import LpColorPicker from "./LpColorPicker.vue"
 import LpIcon from "./LpIcon.vue"
 import LpSegmented from "./LpSegmented.vue"
+import LpDisclosure from "./LpDisclosure.vue"
+import LpThemeProvider from "./LpThemeProvider.vue"
 import LpThemeStudioSection from "./LpThemeStudioSection.vue"
+import { withBrand } from "../theme/define"
 
 export type ThemeStudioPart = "themes" | "brand" | "corners" | "size" | "motion" | "export"
 
@@ -100,17 +103,37 @@ function origin(event: Event): RevealOrigin | undefined {
 }
 
 const TILE =
-  "flex min-w-0 flex-col items-center gap-1 rounded-control p-1.5 text-[11px] text-muted transition-colors duration-(--duration-fast) hover:bg-surface-soft hover:text-ink"
-const SWATCH = "relative size-8 overflow-hidden rounded-full ring-2 transition-[box-shadow] duration-(--duration-fast)"
+  "group flex min-w-0 flex-col gap-1.5 text-left text-xs text-muted transition-colors duration-(--duration-fast) hover:text-ink aria-pressed:text-ink"
+const FRAME = "relative block aspect-[8/5] w-full overflow-hidden rounded-control transition-[box-shadow] duration-(--duration-fast)"
+const ring = (name: string) =>
+  state.value.theme === name ? "ring-2 ring-brand" : "ring-1 ring-line group-hover:ring-line-strong"
+
+/** A theme as it would look with the tuning picked here: the brand rides on whichever theme is chosen. */
+const tuned = (theme: TokenSet): TokenSet => (state.value.brand ? withBrand(theme, state.value.brand) : theme)
+
+// A window of the theme in miniature: its surfaces, text and a button in its
+// brand. Painted through LpThemeProvider, so it shows the tokens as the app
+// would, rather than a guess made from a few of them.
+const Miniature: FunctionalComponent<{ theme: TokenSet }> = (p) =>
+  h(LpThemeProvider, { theme: p.theme, class: "absolute inset-0 flex bg-surface" }, () => [
+    h("span", { class: "h-full w-1/4 border-r border-line bg-surface-raised" }),
+    h("span", { class: "flex min-w-0 flex-1 flex-col gap-[10%] p-[10%]" }, [
+      h("span", { class: "h-[12%] w-3/4 rounded-full bg-ink/80" }),
+      h("span", { class: "h-[10%] w-1/2 rounded-full bg-muted/60" }),
+      h("span", { class: "mt-auto h-[24%] w-1/2 rounded-control bg-brand" }),
+    ]),
+  ])
 
 const tuneTo = <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>
-  <div class="flex flex-col gap-4">
-    <div class="flex items-center justify-between">
+  <div class="@container flex flex-col gap-4">
+    <!-- An app that titles the studio itself (a settings section) passes an
+         empty title; the row then shows only while Reset has something to undo. -->
+    <div v-if="text.title || changed" class="flex items-center justify-between">
       <p class="text-sm font-semibold text-ink">{{ text.title }}</p>
       <LpButton v-if="changed" variant="ghost" size="xs" @click="studio.reset(origin($event))">
         <LpIcon name="lucide:rotate-ccw" :size="12" />{{ text.reset }}
@@ -120,39 +143,39 @@ usePaletteTheme(() => studio ?? undefined)
     <slot name="start" :studio="studio" />
 
     <LpThemeStudioSection v-if="shows('themes')" :label="text.themes">
-      <div class="grid grid-cols-4 gap-2">
-        <!-- Follows the OS between its pair: drawn as both halves. -->
+      <div class="grid grid-cols-3 gap-2 @md:grid-cols-4 @2xl:grid-cols-8">
+        <!-- Follows the OS between its pair: both halves, split corner to corner. -->
         <button
           v-if="studio.system.value"
           type="button"
-          :class="[TILE, state.theme === STUDIO_SYSTEM && 'bg-surface-soft text-ink']"
+          :class="TILE"
           :aria-pressed="state.theme === STUDIO_SYSTEM"
           @click="studio.pickTheme(STUDIO_SYSTEM, origin($event))"
         >
-          <span
-            :class="[SWATCH, state.theme === STUDIO_SYSTEM ? 'ring-brand' : 'ring-line']"
-            :style="{ background: `linear-gradient(135deg, ${studio.system.value.light.colors.surface} 50%, ${studio.system.value.dark.colors.surface} 50%)` }"
-          />
+          <span :class="[FRAME, ring(STUDIO_SYSTEM)]">
+            <Miniature :theme="tuned(studio.system.value.light)" />
+            <span class="absolute inset-0 [clip-path:polygon(100%_0,100%_100%,0_100%)]">
+              <Miniature :theme="tuned(studio.system.value.dark)" />
+            </span>
+          </span>
           <span class="max-w-full truncate">{{ text.system }}</span>
         </button>
         <button
           v-for="t in studio.themes.value"
           :key="t.name"
           type="button"
-          :class="[TILE, state.theme === t.name && 'bg-surface-soft text-ink']"
+          :class="TILE"
           :aria-pressed="state.theme === t.name"
           @click="studio.pickTheme(t.name, origin($event))"
         >
-          <span :class="[SWATCH, state.theme === t.name ? 'ring-brand' : 'ring-line']" :style="{ background: t.colors.surface }">
-            <span class="absolute inset-x-0 bottom-0 h-1/2" :style="{ background: t.colors.brand }" />
-          </span>
+          <span :class="[FRAME, ring(t.name)]"><Miniature :theme="tuned(t)" /></span>
           <span class="max-w-full truncate">{{ t.name }}</span>
         </button>
       </div>
     </LpThemeStudioSection>
 
     <LpThemeStudioSection v-if="shows('brand')" :label="text.brand">
-      <div class="flex flex-wrap items-center gap-1.5">
+      <div class="flex flex-wrap items-center gap-2">
         <button
           v-for="color in swatches"
           :key="color"
@@ -164,55 +187,68 @@ usePaletteTheme(() => studio ?? undefined)
           :aria-pressed="brand === color"
           @click="setBrand(color)"
         />
-        <LpColorPicker :model-value="brand" size="sm" :aria-label="text.anyBrand" @update:model-value="setBrand" />
+        <LpColorPicker
+          variant="swatch"
+          size="sm"
+          :selected="!swatches.includes(brand)"
+          :swatches="[]"
+          :model-value="brand"
+          :aria-label="text.anyBrand"
+          @update:model-value="setBrand"
+        />
       </div>
     </LpThemeStudioSection>
 
-    <LpThemeStudioSection v-if="shows('corners')" :label="text.corners">
-      <LpSegmented
-        :model-value="state.corners"
-        size="sm"
-        :options="[{ value: 'sharp', label: text.sharp }, { value: 'default', label: text.default }, { value: 'round', label: text.round }]"
-        @update:model-value="tuneTo('corners', $event)"
-      />
-    </LpThemeStudioSection>
-
-    <LpThemeStudioSection v-if="shows('size')" :label="text.size">
-      <LpSegmented
-        :model-value="state.size"
-        size="sm"
-        :options="[{ value: 'compact', label: text.compact }, { value: 'default', label: text.default }, { value: 'comfortable', label: text.comfortable }]"
-        @update:model-value="tuneTo('size', $event)"
-      />
-    </LpThemeStudioSection>
-
-    <LpThemeStudioSection v-if="shows('motion')" :label="text.motion">
-      <LpSegmented
-        :model-value="state.motion"
-        size="sm"
-        :options="[{ value: 'fast', label: text.fast }, { value: 'normal', label: text.normal }, { value: 'slow', label: text.slow }]"
-        @update:model-value="tuneTo('motion', $event)"
-      />
-    </LpThemeStudioSection>
+    <div v-if="shows('corners') || shows('size') || shows('motion')" class="flex flex-col gap-1.5">
+      <LpThemeStudioSection v-if="shows('corners')" inline :label="text.corners">
+        <LpSegmented
+          :model-value="state.corners"
+          size="sm"
+          :options="[{ value: 'sharp', label: text.sharp }, { value: 'default', label: text.default }, { value: 'round', label: text.round }]"
+          @update:model-value="tuneTo('corners', $event)"
+        />
+      </LpThemeStudioSection>
+      <LpThemeStudioSection v-if="shows('size')" inline :label="text.size">
+        <LpSegmented
+          :model-value="state.size"
+          size="sm"
+          :options="[{ value: 'compact', label: text.compact }, { value: 'default', label: text.default }, { value: 'comfortable', label: text.comfortable }]"
+          @update:model-value="tuneTo('size', $event)"
+        />
+      </LpThemeStudioSection>
+      <LpThemeStudioSection v-if="shows('motion')" inline :label="text.motion">
+        <LpSegmented
+          :model-value="state.motion"
+          size="sm"
+          :options="[{ value: 'fast', label: text.fast }, { value: 'normal', label: text.normal }, { value: 'slow', label: text.slow }]"
+          @update:model-value="tuneTo('motion', $event)"
+        />
+      </LpThemeStudioSection>
+    </div>
 
     <slot name="end" :studio="studio" />
 
-    <div v-if="shows('export')" class="flex flex-col gap-2 border-t border-line pt-3">
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] font-medium tracking-wide text-muted uppercase">{{ text.export }}</span>
+    <!-- Taking the theme into code is the developer's errand, not the person
+         picking colours: folded, it no longer opened every studio with an
+         empty block of code. -->
+    <LpDisclosure v-if="shows('export')">
+      <template #trigger>
+        <span class="text-xs font-medium text-muted-strong">{{ text.export }}</span>
+      </template>
+      <div class="flex flex-col gap-2 pt-1">
         <LpSegmented
           v-model="format"
           size="sm"
           :options="[{ value: 'code', label: 'Code' }, { value: 'json', label: 'JSON' }, { value: 'css', label: 'CSS' }]"
         />
+        <LpCodeBlock
+          :model-value="exported[format]"
+          :lang="format === 'json' ? 'json' : format === 'css' ? 'plain' : 'ts'"
+          copyable
+          height="140px"
+          class="text-[11px]"
+        />
       </div>
-      <LpCodeBlock
-        :model-value="exported[format]"
-        :lang="format === 'json' ? 'json' : format === 'css' ? 'plain' : 'ts'"
-        copyable
-        height="140px"
-        class="text-[11px]"
-      />
-    </div>
+    </LpDisclosure>
   </div>
 </template>

package/src/components/LpThemeStudioSection.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 /*
- * One row of LpThemeStudio: a small caps label over its controls. The studio
- * builds its own rows with it, and an app adding its own (a font, a density
- * of its own, a layout switch) through the studio's slots uses it too, so the
- * added row reads as part of the panel.
+ * One row of LpThemeStudio: a label and its controls. The studio builds its
+ * own rows with it, and an app adding its own (a font, a density of its own,
+ * a layout switch) through the studio's slots uses it too, so the added row
+ * reads as part of the panel.
+ *
+ * `inline` puts a single control beside its label, as a settings row does: a
+ * three-way switch under a label of its own read as three loose rows of
+ * buttons, and on a wide page it sat in the corner of an empty stripe.
  */
-defineProps<{ label: string }>()
+defineProps<{ label: string; inline?: boolean }>()
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
-    <span class="text-[11px] font-medium tracking-wide text-muted uppercase">{{ label }}</span>
+  <div v-if="inline" class="flex min-h-8 flex-wrap items-center justify-between gap-x-4 gap-y-1.5">
+    <span class="text-xs font-medium text-muted-strong">{{ label }}</span>
+    <slot />
+  </div>
+  <div v-else class="flex flex-col gap-2">
+    <span class="text-xs font-medium text-muted-strong">{{ label }}</span>
     <slot />
   </div>
 </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