@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpTagsInput.vue

@@ -44,11 +44,15 @@ import { useShift } from "../composables/useShift"
 import { useLabels } from "../composables/useLpConfig"
 import { mergeClass } from "../composables/useMergedClass"
 import LpFieldNotice from "./LpFieldNotice.vue"
-import LpFormField from "./LpFormField.vue"
+import FieldWrapper from "./FieldWrapper.vue"
+import { BADGE_REMOVE } from "./badge"
+import LpBadge from "./LpBadge.vue"
 import LpIcon from "./LpIcon.vue"
-import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import OptionContent from "./OptionContent.vue"
+import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
 import type { LpOptionBase, OptionSelection } from "./options"
 import { addTags, splitTags, type TagDuplicates, type TagRejection, type TagValidator } from "./tags"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
@@ -327,6 +331,7 @@ function choose(opt: LpOptionBase<string>): void {
 
 /** Clicks on the box itself are not "outside" the list: they are typing. */
 function keepOpenInside(event: Event): void {
+  guardOutside(event)
   const target = event.target
   if (target instanceof Node && boxEl.value?.contains(target)) event.preventDefault()
 }
@@ -413,19 +418,25 @@ function onModel(value: (string | Record<string, unknown>)[] | null): void {
 }
 
 defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(value) })
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
-  <component
-    :is="hasField ? LpFormField : 'div'"
+  <FieldWrapper
+    :wrapped="hasField"
     :ref="bindField"
-    :label="hasField ? label : undefined"
-    :hint="hasField ? hint : undefined"
-    :error="hasField ? error : undefined"
-    :required="hasField ? required : undefined"
-    :id="hasField ? field.id : undefined"
-    :class="hasField ? attrs.class : 'contents'"
-    :style="hasField ? attrs.style : undefined"
+    :id="field.id"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
+    :class="attrs.class"
+    :style="attrs.style"
   >
     <div class="relative">
       <TagsInputRoot
@@ -458,29 +469,39 @@ defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(
           enter-active-class="animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none"
           leave-active-class="animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
         >
+        <!-- The chip is the kit's removable badge; reka's item and delete
+             primitives ride on it (as-child, the #remove slot) because they
+             own the keyboard: arrows between tags, Backspace to remove. -->
         <TagsInputItem
           v-for="{ tag, key, shown } in keyed"
           :key="key"
-          :data-tag-key="key"
+          as-child
           :value="tag"
-          class="inline-flex max-w-full items-center gap-1 rounded-pill bg-surface-raised py-0.5 pr-1 text-xs font-medium text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring"
-          :class="shown?.image ? 'pl-0.5' : 'pl-2.5'"
         >
-          <img v-if="shown?.image" :src="shown.image" alt="" class="size-4 shrink-0 rounded-full object-cover" />
-          <TagsInputItemText class="flex min-w-0 items-baseline gap-1">
-            <template v-if="shown">
-              <span class="truncate">{{ shown.label }}</span>
-              <span v-if="shown.hint" class="truncate font-normal text-muted">{{ shown.hint }}</span>
-            </template>
-            <span v-else class="truncate">{{ tag }}</span>
-          </TagsInputItemText>
-          <TagsInputItemDelete
-            :aria-labelledby="undefined"
-            :aria-label="text.remove.replace('{tag}', shown?.label ?? tag)"
-            class="grid size-4 shrink-0 place-items-center rounded-pill text-muted transition-colors hover:bg-ink/10 hover:text-ink"
+          <LpBadge
+            removable
+            :data-tag-key="key"
+            class="max-w-full bg-surface-raised text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring"
+            :class="shown?.image ? 'pl-0.5' : ''"
           >
-            <LpIcon name="lucide:x" :size="12" />
-          </TagsInputItemDelete>
+            <img v-if="shown?.image" :src="shown.image" alt="" class="size-4 shrink-0 rounded-full object-cover" />
+            <TagsInputItemText class="flex min-w-0 items-baseline gap-1">
+              <template v-if="shown">
+                <span class="truncate">{{ shown.label }}</span>
+                <span v-if="shown.hint" class="truncate font-normal text-muted">{{ shown.hint }}</span>
+              </template>
+              <span v-else class="truncate">{{ tag }}</span>
+            </TagsInputItemText>
+            <template #remove>
+              <TagsInputItemDelete
+                :aria-labelledby="undefined"
+                :aria-label="text.remove.replace('{tag}', shown?.label ?? tag)"
+                :class="BADGE_REMOVE"
+              >
+                <LpIcon name="lucide:x" :size="12" />
+              </TagsInputItemDelete>
+            </template>
+          </LpBadge>
         </TagsInputItem>
         </TransitionGroup>
         <TagsInputInput
@@ -505,7 +526,7 @@ defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(
       <LpFieldNotice v-if="standalone" :notice="notice" :id="noticeId" />
       <PopoverRoot v-if="options" :open="listOpen" @update:open="(o) => !o && (dismissed = true)">
         <PopoverAnchor v-if="boxEl" :reference="boxEl" class="hidden" />
-        <PopoverPortal>
+        <PopoverPortal :to="portalTo">
           <PopoverContent
             :id="listId"
             role="listbox"
@@ -533,18 +554,13 @@ defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(
                 :aria-disabled="opt.disabled || undefined"
                 :data-highlighted="i === activeIndex ? '' : undefined"
                 :data-disabled="opt.disabled ? '' : undefined"
-                :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+                :style="optionStagger(i)"
                 :class="[OPTION_ITEM, 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50']"
                 @pointerdown.prevent
                 @pointermove="activeIndex = i"
                 @click="!opt.disabled && choose(opt)"
               >
-                <img v-if="opt.image" :src="opt.image" alt="" class="size-6 shrink-0 rounded-full object-cover" />
-                <LpIcon v-else-if="opt.icon" :name="opt.icon" :size="16" class="shrink-0 text-muted" />
-                <span class="flex min-w-0 flex-col">
-                  <span class="truncate">{{ opt.label ?? opt.value }}</span>
-                  <span v-if="opt.description" class="truncate text-xs text-muted">{{ opt.description }}</span>
-                </span>
+                <OptionContent :option="opt" />
               </div>
             </template>
           </PopoverContent>
@@ -552,5 +568,5 @@ defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(
       </PopoverRoot>
     </div>
     <span class="sr-only" aria-live="polite">{{ announcement }}</span>
-  </component>
+  </FieldWrapper>
 </template>

package/src/components/LpTextReveal.vue

@@ -0,0 +1,236 @@
+<script lang="ts">
+// The root class is merged with the consumer's (useMergedAttrs).
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Text that arrives word by word (or letter by letter): each piece fades in,
+ * rises a few pixels and comes into focus, one after another.
+ *
+ * For a line that is the point of the screen: a hero heading, an empty state's
+ * message, a result that was just computed. On body copy it only slows reading
+ * down, so it is not a default for text in general.
+ *
+ *   <LpTextReveal text="Your server is ready" as="h2" />
+ *   <LpTextReveal :text="summary" by="letter" :stagger="15" />
+ *
+ * It plays the first time the text is on screen (useReveal), not at mount, so
+ * a heading below the fold is still arriving when it is scrolled to. `play`
+ * takes over when the moment is the app's to decide (a step becoming active),
+ * and a new `replayKey` plays it again.
+ *
+ * When `text` changes, the words that stay keep their place and do not replay:
+ * the words that are gone fade out, the new ones arrive in their spot. A status
+ * line going from "3 builds running" to "4 builds running" moves one word, not
+ * the whole sentence.
+ *
+ * Screen readers get the whole string once; the split pieces are hidden from
+ * them, so the sentence is not read as a list of separate words. The pieces
+ * are inline boxes separated by real spaces, so the text wraps like any other.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useReveal } from "../composables/useReveal"
+import { splitText, wordKeys, type TextPiece } from "./textSplit"
+
+const props = withDefaults(
+  defineProps<{
+    /** The text. A change animates only the words that changed. */
+    text: string
+    /** The unit that animates. Letters suit a short heading; words read better on a sentence. */
+    by?: "word" | "letter"
+    /** Delay between pieces in ms. Defaults to 70 for words, 22 for letters. */
+    stagger?: number
+    /** Each piece's entrance in ms. */
+    duration?: number
+    /** How far a piece rises, in px. 0 for a pure fade. */
+    rise?: number
+    /** Start out of focus and sharpen. Off for long text on a slow machine, where a blur per piece costs frames. */
+    blur?: boolean
+    /**
+     * Hold the text hidden until true. Leave unset to play the first time the
+     * text is on screen.
+     */
+    play?: boolean
+    /** Changing this plays the whole text again (the old one fades out first). */
+    replayKey?: unknown
+    /** Element to render: `h1`…`h6` or `p` for a heading or a paragraph. */
+    as?: string
+  }>(),
+  { by: "word", duration: 560, rise: 8, blur: true, play: undefined, as: "span" },
+)
+
+const emit = defineEmits<{
+  /** The last piece has arrived. */
+  done: []
+}>()
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => "lp-reveal")
+
+const LEAVE_MS = 180
+
+const { el, revealed } = useReveal({ immediate: () => props.play !== undefined })
+const ready = computed(() => props.play ?? revealed.value)
+
+const shown = ref(props.text)
+const generation = ref(0)
+const pieces = computed<TextPiece[]>(() =>
+  splitText(shown.value, props.by).map((p) => ({ ...p, key: `${generation.value}:${p.key}` })),
+)
+// The words that animate in on this pass; everything else stays as it is.
+const fresh = ref<Set<string>>(wordKeys(pieces.value))
+const leaving = ref<Set<string>>(new Set())
+
+const stagger = computed(() => props.stagger ?? (props.by === "letter" ? 22 : 70))
+
+// The position of each fresh part in the cascade. Counted over fresh parts only,
+// so a single changed word in a long line starts at once instead of waiting for
+// the words before it.
+const order = computed(() => {
+  const map = new Map<string, number>()
+  let i = 0
+  for (const piece of pieces.value) {
+    if (piece.kind !== "word" || !fresh.value.has(piece.key)) continue
+    map.set(piece.key, i)
+    i += piece.parts.length
+  }
+  return { map, count: i }
+})
+
+let leaveTimer: ReturnType<typeof setTimeout> | undefined
+let doneTimer: ReturnType<typeof setTimeout> | undefined
+
+function scheduleDone() {
+  clearTimeout(doneTimer)
+  if (!ready.value) return
+  const count = order.value.count
+  const ms = prefersReducedMotion() || count === 0 ? 0 : props.duration + stagger.value * (count - 1)
+  doneTimer = setTimeout(() => emit("done"), ms)
+}
+
+function apply(text: string, bump: boolean) {
+  const before = wordKeys(pieces.value)
+  if (bump) generation.value++
+  shown.value = text
+  const after = wordKeys(pieces.value)
+  // Before the reveal everything is still to come; after it, only what is new.
+  fresh.value = ready.value ? new Set([...after].filter((k) => !before.has(k))) : after
+  leaving.value = new Set()
+  scheduleDone()
+}
+
+function change(text: string, bump: boolean) {
+  clearTimeout(leaveTimer)
+  if (!ready.value || prefersReducedMotion()) return apply(text, bump)
+  const next = new Set(
+    splitText(text, props.by).map((p) => `${generation.value + (bump ? 1 : 0)}:${p.key}`),
+  )
+  const gone = [...wordKeys(pieces.value)].filter((k) => !next.has(k))
+  if (!gone.length) return apply(text, bump)
+  leaving.value = new Set(gone)
+  leaveTimer = setTimeout(() => apply(text, bump), LEAVE_MS)
+}
+
+watch(() => props.text, (text) => change(text, false))
+watch(() => props.replayKey, () => change(props.text, true))
+watch(() => props.by, () => apply(props.text, true))
+watch(ready, (now) => now && scheduleDone(), { immediate: true })
+
+onBeforeUnmount(() => {
+  clearTimeout(leaveTimer)
+  clearTimeout(doneTimer)
+})
+
+const style = computed(() => ({
+  "--lp-reveal-duration": `${props.duration}ms`,
+  "--lp-reveal-stagger": `${stagger.value}ms`,
+  "--lp-reveal-rise": `${props.rise}px`,
+  "--lp-reveal-blur": props.blur ? "4px" : "0px",
+  "--lp-reveal-leave": `${LEAVE_MS}ms`,
+}))
+
+// A leaving word drops its entrance: an animation's fill outranks the fade-out
+// declaration, and the word would stay fully visible until it is removed.
+function partClass(key: string) {
+  if (leaving.value.has(key)) return "lp-reveal__part lp-reveal__part--out"
+  return ready.value && fresh.value.has(key) ? "lp-reveal__part lp-reveal__part--in" : "lp-reveal__part"
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    ref="el"
+    :class="[rootClass, ready ? '' : 'lp-reveal--waiting']"
+    :style="style"
+    v-bind="rest"
+  >
+    <span class="sr-only">{{ text }}</span>
+    <span aria-hidden="true"
+      ><template v-for="piece in pieces" :key="piece.key"
+        ><template v-if="piece.kind === 'space'">{{ piece.text }}</template
+        ><span
+          v-else-if="by === 'word'"
+          :class="partClass(piece.key)"
+          :style="{ '--lp-reveal-i': order.map.get(piece.key) ?? 0 }"
+          >{{ piece.text }}</span
+        ><span
+          v-else
+          class="inline-block whitespace-nowrap"
+          :class="leaving.has(piece.key) ? 'lp-reveal__part--out' : ''"
+          ><span
+            v-for="(letter, j) in piece.parts"
+            :key="j"
+            :class="leaving.has(piece.key) ? 'lp-reveal__part' : partClass(piece.key)"
+            :style="{ '--lp-reveal-i': (order.map.get(piece.key) ?? 0) + j }"
+            >{{ letter }}</span
+          ></span
+        ></template
+      ></span
+    >
+  </component>
+</template>
+
+<style>
+/* Unscoped and namespaced, like LpRollingText: the classes are toggled on
+   elements rendered inside a v-for of fragments. */
+.lp-reveal__part {
+  display: inline-block;
+}
+
+.lp-reveal--waiting .lp-reveal__part {
+  opacity: 0;
+}
+
+.lp-reveal__part--in {
+  animation: lp-reveal-in var(--lp-reveal-duration) var(--ease-emphasized) both;
+  animation-delay: calc(var(--lp-reveal-i, 0) * var(--lp-reveal-stagger));
+}
+
+.lp-reveal__part--out {
+  opacity: 0;
+  filter: blur(var(--lp-reveal-blur));
+  transition:
+    opacity var(--lp-reveal-leave) ease-in,
+    filter var(--lp-reveal-leave) ease-in;
+}
+
+@keyframes lp-reveal-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--lp-reveal-rise));
+    filter: blur(var(--lp-reveal-blur));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-reveal__part--in {
+    animation: none;
+  }
+  .lp-reveal__part--out {
+    transition: none;
+  }
+}
+</style>

package/src/components/LpTextarea.vue

@@ -6,7 +6,7 @@ export default { inheritAttrs: false }
 import { computed, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
-import LpFormField from "./LpFormField.vue"
+import FieldWrapper from "./FieldWrapper.vue"
 
 const props = defineProps<{
   modelValue?: string
@@ -56,15 +56,15 @@ const textareaClass = computed(() =>
 </script>
 
 <template>
-  <component
-    :is="hasField ? LpFormField : 'div'"
-    :id="hasField ? field.id : undefined"
-    :label="hasField ? label : undefined"
-    :hint="hasField ? hint : undefined"
-    :error="hasField ? error : undefined"
-    :required="hasField ? required : undefined"
-    :class="hasField ? attrs.class : 'contents'"
-    :style="hasField ? attrs.style : undefined"
+  <FieldWrapper
+    :wrapped="hasField"
+    :id="field.id"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
+    :class="attrs.class"
+    :style="attrs.style"
   >
     <textarea
       v-bind="textareaAttrs"
@@ -80,5 +80,5 @@ const textareaClass = computed(() =>
       :style="hasField ? undefined : (attrs.style as never)"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
     />
-  </component>
+  </FieldWrapper>
 </template>

package/src/components/LpThemeStudio.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+/*
+ * The theme, tuned in place: a base theme, any brand colour, corners, control
+ * size and motion speed, all applied live, and the result ready to take away
+ * as code, JSON or CSS. State lives in useThemeStudio (remembered, shared with
+ * an LpThemeSwitcher opened with `studio`), so the panel can sit in a popover,
+ * a settings page or a drawer.
+ *
+ * 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 { useLabels } from "../composables/useLpConfig"
+import { STUDIO_BRANDS, STUDIO_SYSTEM, useThemeStudio, type StudioState, type ThemeStudio } from "../theme/studio"
+import type { TokenSet } from "../theme/tokens"
+import type { RevealOrigin } from "../theme/useTheme"
+import LpButton from "./LpButton.vue"
+import LpCodeBlock from "./LpCodeBlock.vue"
+import LpColorPicker from "./LpColorPicker.vue"
+import LpIcon from "./LpIcon.vue"
+import LpSegmented from "./LpSegmented.vue"
+import LpThemeStudioSection from "./LpThemeStudioSection.vue"
+
+export type ThemeStudioPart = "themes" | "brand" | "corners" | "size" | "motion" | "export"
+
+export interface ThemeStudioLabels extends Record<string, string> {
+  title: string
+  reset: string
+  themes: string
+  system: string
+  brand: string
+  anyBrand: string
+  corners: string
+  sharp: string
+  round: string
+  size: string
+  compact: string
+  comfortable: string
+  motion: string
+  fast: string
+  normal: string
+  slow: string
+  default: string
+  export: string
+}
+
+const props = defineProps<{
+  /** A studio from useThemeStudio; by default the shared one for `storageKey`. */
+  studio?: ThemeStudio
+  /** Base themes, when the panel makes its own studio. */
+  themes?: TokenSet[]
+  storageKey?: string
+  /** Brand swatches offered beside the free colour picker. */
+  brands?: string[]
+  /** Built-in rows to leave out. */
+  hide?: ThemeStudioPart[]
+  labels?: Partial<ThemeStudioLabels>
+}>()
+
+const studio = props.studio ?? useThemeStudio({ themes: props.themes, storageKey: props.storageKey })
+const { state, brand, changed, exported } = studio
+// Assigned through the ref: a destructured binding assigned in the template
+// would replace the local name, not write the studio's state.
+const setBrand = (color: string) => (brand.value = color)
+
+const text = useLabels<ThemeStudioLabels>(
+  "themeStudio",
+  {
+    title: "Theme",
+    reset: "Reset",
+    themes: "Theme",
+    system: "System",
+    brand: "Brand colour",
+    anyBrand: "Any brand colour",
+    corners: "Corners",
+    sharp: "Sharp",
+    round: "Round",
+    size: "Control size",
+    compact: "Compact",
+    comfortable: "Roomy",
+    motion: "Motion",
+    fast: "Fast",
+    normal: "Normal",
+    slow: "Slow",
+    default: "Default",
+    export: "Use this theme",
+  },
+  () => props.labels,
+)
+
+const shows = (part: ThemeStudioPart) => !props.hide?.includes(part)
+const swatches = computed(() => props.brands ?? STUDIO_BRANDS)
+const format = ref<"code" | "json" | "css">("code")
+
+// A new base theme reveals from the swatch that picked it; Reset from itself.
+function origin(event: Event): RevealOrigin | undefined {
+  const r = (event.currentTarget as Element | null)?.getBoundingClientRect()
+  return r ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : 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)"
+
+const tuneTo = <K extends keyof Omit<StudioState, "theme">>(key: K) =>
+  (value: string) => studio.tune({ [key]: value } as Partial<StudioState>)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div 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 }}
+      </LpButton>
+    </div>
+
+    <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. -->
+        <button
+          v-if="studio.system.value"
+          type="button"
+          :class="[TILE, state.theme === STUDIO_SYSTEM && 'bg-surface-soft text-ink']"
+          :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="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']"
+          :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="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">
+        <button
+          v-for="color in swatches"
+          :key="color"
+          type="button"
+          class="size-6 rounded-full ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110"
+          :class="brand === color ? 'ring-ink' : 'ring-transparent'"
+          :style="{ background: color }"
+          :aria-label="`${text.brand} ${color}`"
+          :aria-pressed="brand === color"
+          @click="setBrand(color)"
+        />
+        <LpColorPicker :model-value="brand" size="sm" :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')"
+      />
+    </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')"
+      />
+    </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')"
+      />
+    </LpThemeStudioSection>
+
+    <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>
+        <LpSegmented
+          v-model="format"
+          size="sm"
+          :options="[{ value: 'code', label: 'Code' }, { value: 'json', label: 'JSON' }, { value: 'css', label: 'CSS' }]"
+        />
+      </div>
+      <LpCodeBlock
+        :model-value="exported[format]"
+        :lang="format === 'json' ? 'json' : format === 'css' ? 'plain' : 'ts'"
+        copyable
+        height="140px"
+        class="text-[11px]"
+      />
+    </div>
+  </div>
+</template>

package/src/components/LpThemeStudioSection.vue

@@ -0,0 +1,16 @@
+<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.
+ */
+defineProps<{ label: string }>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <span class="text-[11px] font-medium tracking-wide text-muted uppercase">{{ label }}</span>
+    <slot />
+  </div>
+</template>