@leavepulse/ui 0.71.2 → 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
@@ -177,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',
@@ -201,7 +198,7 @@ usePaletteCommands(() => props.items.map(item => ({
         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' : '',
@@ -225,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
@@ -236,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' : 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="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,8 +103,26 @@ 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>)
 
@@ -109,8 +130,10 @@ 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, { hide: props.hide })
     <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, { hide: props.hide })
           :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/rolling.ts

@@ -0,0 +1,28 @@
+/*
+ * Where two versions of a line differ, for LpRollingText: the common start
+ * and end stay put and only the middle rolls. A split never lands inside a
+ * word, so "Online" to "Offline" rolls the word rather than "n" to "ff";
+ * digits may split, so "2:54" to "2:53" rolls just the last one.
+ */
+const LETTER = /\p{L}/u
+
+function letter(ch: string | undefined): boolean {
+  return ch !== undefined && LETTER.test(ch)
+}
+
+export function splitChange(before: string, after: string): { head: string; mid: string; tail: string } {
+  if (before === after) return { head: "", mid: after, tail: "" }
+  const a = [...before]
+  const b = [...after]
+  let head = 0
+  while (head < a.length && head < b.length && a[head] === b[head]) head++
+  while (head > 0 && letter(b[head - 1]) && (letter(b[head]) || letter(a[head]))) head--
+  let tail = 0
+  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++
+  while (tail > 0 && letter(b[b.length - tail]) && (letter(b[b.length - tail - 1]) || letter(a[a.length - tail - 1]))) tail--
+  return {
+    head: b.slice(0, head).join(""),
+    mid: b.slice(head, b.length - tail).join(""),
+    tail: b.slice(b.length - tail).join(""),
+  }
+}

package/src/components/sidebar.ts

@@ -4,6 +4,7 @@
  * Re-exported from LpSidebar.vue for back-compat with existing import sites.
  */
 
+import type { Component } from "vue"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 
 export interface SidebarItem {
@@ -34,6 +35,38 @@ export interface SidebarItem {
    * "invoice", a page found by the feature it used to be called.
    */
   keywords?: string[]
+  /**
+   * Pages under this one, one level deep: folded under the row and opened
+   * while one of them is the current page, so a section's tabs are a click
+   * away without opening the section first. In a compact sidebar they open in
+   * a card beside the icon.
+   */
+  children?: SidebarItem[]
+  /** A dot instead of a count: something new here that has no number to it. */
+  dot?: boolean
+  /**
+   * The keys that open this page ("G D"), shown at the row's end on hover and
+   * in the compact card. Display only: the app binds the keys.
+   */
+  hotkey?: string
+  /**
+   * What the page holds, shown in a card beside the row once the pointer has
+   * rested on it (`previewDelay`): a glance before going there.
+   */
+  preview?: Component
+  /**
+   * The hint-system page (or pages) this row opens. With the sidebar's
+   * `hints`, the row carries a dot while that page has news nobody has read,
+   * and loses it once the news is read there.
+   */
+  hintPage?: string | string[]
+  /**
+   * Work started on this page is still running (a publish, a deploy): a thin
+   * bar along the row's foot, sweeping while `true`, filled to a fraction
+   * while a number from 0 to 1. Leaving the page no longer hides that it is
+   * not done.
+   */
+  busy?: boolean | number
 }
 
 export interface SidebarSection {

package/src/components/tabs.ts

@@ -24,3 +24,12 @@ export function pickTab(items: readonly TabChoice[], current: string | undefined
   if (items.some((item) => item.value === current && !item.disabled)) return current
   return items.find((item) => !item.disabled)?.value ?? current
 }
+
+/*
+ * A phone's bottom bar, shared by LpTabs (`variant="bottom"`, sections of a
+ * page) and LpBottomNav (pages of an app), so the two never drift apart.
+ */
+export const BOTTOM_BAR =
+  "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)]"
+export const BOTTOM_ITEM = "min-h-14 min-w-0 flex-col gap-0.5 px-1 py-1.5 text-[11px] font-medium focus-visible:ring-inset"
+export const BOTTOM_MARKER = "absolute inset-x-[22%] top-0 z-0 h-0.5 rounded-b-full"

package/src/index.ts

@@ -223,6 +223,7 @@ export type { TableRowMenu, TableRowMenuResult } from "./components/tableRowMenu
 export { default as LpTableOfContents } from "./components/LpTableOfContents.vue"
 export type { TocLink } from "./components/LpTableOfContents.vue"
 export { default as LpTabs } from "./components/LpTabs.vue"
+export { default as LpBottomNav } from "./components/LpBottomNav.vue"
 export type { TabItem } from "./components/LpTabs.vue"
 export { default as LpTagsInput } from "./components/LpTagsInput.vue"
 export type { TagsInputLabels } from "./components/LpTagsInput.vue"