@leavepulse/ui 0.70.0 → 0.71.0

package/src/components/LpRepeater.vue

@@ -4,8 +4,10 @@ import { useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useRepeater, type RepeaterItemKey } from "../composables/useRepeater"
+import { usePrefersReducedMotion } from "../composables/useReducedMotion"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpShift from "./LpShift.vue"
 
 defineOptions({ inheritAttrs: false })
 const props = defineProps<{
@@ -33,11 +35,31 @@ const list = useRepeater({
   disabled: () => field.value.disabled,
 })
 const { rows } = list
-const root = ref<HTMLElement | null>(null)
+const rowsHost = ref<HTMLElement | null>(null)
+const reducedMotion = usePrefersReducedMotion()
 const addButton = ref<InstanceType<typeof LpButton> | null>(null)
 const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]'
 function focusRow(index: number) {
-  root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]?.querySelector<HTMLElement>(focusable)?.focus()
+  rowAt(index)?.querySelector<HTMLElement>(focusable)?.focus({ preventScroll: true })
+}
+function rowAt(index: number): HTMLElement | undefined {
+  return Array.from(rowsHost.value?.children ?? []).filter((node): node is HTMLElement =>
+    node.hasAttribute("data-lp-repeater-row") && !node.hasAttribute("inert"),
+  )[index]
+}
+function beforeLeave(el: Element) {
+  const row = el as HTMLElement
+  row.style.width = `${row.offsetWidth}px`
+  row.style.top = `${row.offsetTop}px`
+  row.setAttribute("inert", "")
+  row.setAttribute("aria-hidden", "true")
+}
+function beforeEnter(el: Element) {
+  const row = el as HTMLElement
+  row.removeAttribute("inert")
+  row.removeAttribute("aria-hidden")
+  row.style.removeProperty("top")
+  row.style.removeProperty("width")
 }
 async function add() {
   if (field.value.disabled) return
@@ -47,34 +69,63 @@ async function add() {
 }
 async function remove(index: number) {
   if (field.value.disabled) return
-  const row = root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]
+  const row = rowAt(index)
   const restore = row?.contains(row.ownerDocument.activeElement)
   list.remove(index)
   if (!restore) return
   await nextTick()
   if (model.value.length) focusRow(Math.min(index, model.value.length - 1))
-  else (addButton.value?.$el as HTMLElement | undefined)?.focus()
+  else (addButton.value?.$el as HTMLElement | undefined)?.focus({ preventScroll: true })
 }
 defineExpose({ add, remove, update: list.update })
 const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2")
 </script>
 
 <template>
-  <div ref="root" v-bind="rest" :class="rootClass">
+  <div v-bind="rest" :class="rootClass">
     <div class="flex items-center justify-between gap-2">
       <span v-if="label" class="text-sm font-medium text-ink">{{ label }}</span>
       <LpButton ref="addButton" size="xs" variant="ghost" :disabled="field.disabled" @click="add">
         <LpIcon name="lucide:plus" :size="14" />{{ text.add }}
       </LpButton>
     </div>
-    <div v-for="({ item, key }, index) in rows" :key="key" data-lp-repeater-row class="flex min-w-0 items-start gap-2">
-      <div class="min-w-0 flex-1">
-        <slot :item="item" :index="index" :disabled="field.disabled" :update="(next: T) => list.update(index, next)" :remove="() => remove(index)" />
+    <LpShift axis="height">
+      <div ref="rowsHost" class="relative flex min-w-0 flex-col gap-2">
+        <TransitionGroup name="lp-repeater" :css="!reducedMotion" @before-enter="beforeEnter" @before-leave="beforeLeave">
+          <div v-for="({ item, key }, index) in rows" :key="key" data-lp-repeater-row class="flex min-w-0 items-start gap-2">
+            <div class="min-w-0 flex-1">
+              <slot :item="item" :index="index" :disabled="field.disabled" :update="(next: T) => list.update(index, next)" :remove="() => remove(index)" />
+            </div>
+            <LpButton variant="ghost" size="sm" square :disabled="field.disabled" :aria-label="text.remove.replace('{index}', String(index + 1))" @click="remove(index)">
+              <LpIcon name="lucide:x" :size="14" />
+            </LpButton>
+          </div>
+          <div v-if="!rows.length" key="empty" class="text-xs text-muted"><slot name="empty">{{ text.empty }}</slot></div>
+        </TransitionGroup>
       </div>
-      <LpButton variant="ghost" size="sm" square :disabled="field.disabled" :aria-label="text.remove.replace('{index}', String(index + 1))" @click="remove(index)">
-        <LpIcon name="lucide:x" :size="14" />
-      </LpButton>
-    </div>
-    <div v-if="!rows.length" class="text-xs text-muted"><slot name="empty">{{ text.empty }}</slot></div>
+    </LpShift>
   </div>
 </template>
+
+<style>
+.lp-repeater-move,
+.lp-repeater-enter-active,
+.lp-repeater-leave-active {
+  transition: transform var(--duration-fast) var(--ease-emphasized), opacity var(--duration-fast) var(--ease-emphasized);
+}
+.lp-repeater-leave-active {
+  position: absolute;
+}
+.lp-repeater-enter-from,
+.lp-repeater-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-repeater-move,
+  .lp-repeater-enter-active,
+  .lp-repeater-leave-active {
+    transition: none;
+  }
+}
+</style>

package/src/components/LpRollingText.vue

@@ -35,6 +35,8 @@ const props = withDefaults(
      * width — a value that grows shouldn't shove its neighbours.
      */
     align?: "start" | "center" | "end"
+    /** Wrap to the available width instead of keeping a single line. */
+    wrap?: boolean
   }>(),
   { mode: "slide", direction: "up", duration: 320, align: "center" },
 )
@@ -63,7 +65,7 @@ const style = computed(() => ({
 <template>
   <span
     class="lp-roll relative inline-flex overflow-hidden align-bottom"
-    :class="justify"
+    :class="[justify, wrap && 'lp-roll--wrap']"
     :style="style"
   >
     <Transition :name="name">
@@ -93,6 +95,15 @@ const style = computed(() => ({
   backface-visibility: hidden;
 }
 
+.lp-roll--wrap {
+  max-width: 100%;
+}
+
+.lp-roll--wrap .lp-roll__item {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
 /* The outgoing copy leaves the flow so the incoming one keeps the baseline. */
 .lp-roll-up-leave-active,
 .lp-roll-down-leave-active,

package/src/components/LpSecretField.vue

@@ -12,6 +12,7 @@ export interface SecretFieldLabels extends Record<string, string> {
 </script>
 
 <script setup lang="ts">
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
 /*
  * A value someone must be able to read and copy but should not have on screen
  * by default: an API key, a bot token, a webhook secret, a recovery code.
@@ -37,6 +38,7 @@ import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useScramble } from "../composables/useScramble"
 import { useLabels } from "../composables/useLpConfig"
+import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 import LpButton from "./LpButton.vue"
@@ -91,7 +93,11 @@ const emit = defineEmits<{
 }>()
 
 /** Shown or hidden; bind it to drive the reveal from outside. */
-const revealed = defineModel<boolean>("revealed", { default: false })
+const revealedModel = defineModel<boolean>("revealed", { default: false })
+const revealed = computed({
+  get: () => props.revealable && revealedModel.value,
+  set: (value: boolean) => { revealedModel.value = value },
+})
 
 const text = useLabels<SecretFieldLabels>(
   "secretField",
@@ -107,6 +113,7 @@ const text = useLabels<SecretFieldLabels>(
 )
 
 const secret = computed(() => (props.input ? props.modelValue : props.value) ?? "")
+const control = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
 
 // Revealing decrypts the value into place, and a new value (a regenerated key)
 // decrypts over the old one: the change is seen happening, not just swapped.
@@ -167,11 +174,13 @@ const shell = computed(() =>
   mergeClass(
     "relative flex w-full items-center gap-1 overflow-hidden rounded-control border bg-surface-soft text-ink transition-colors duration-(--duration-fast)",
     props.error ? "border-danger" : "border-line",
-    props.disabled ? "opacity-55" : "",
+    control.value.disabled ? "opacity-55" : "",
     props.wrap ? "py-1.5" : "",
     { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size],
   ),
 )
+
+suppressPaletteDiscovery()
 </script>
 
 <template>
@@ -184,7 +193,8 @@ const shell = computed(() =>
     class="[&_input]:font-mono"
     :model-value="modelValue"
     :placeholder="placeholder"
-    :disabled="disabled"
+    :disabled="control.disabled"
+    :revealable="revealable"
     :label="label"
     :hint="hint"
     :error="error"
@@ -199,7 +209,7 @@ const shell = computed(() =>
         :value="secret"
         size="xs"
         class="size-7"
-        :disabled="disabled"
+        :disabled="control.disabled"
         @copied="(t: string) => emit('copied', t)"
       />
       <slot name="actions" />
@@ -212,7 +222,7 @@ const shell = computed(() =>
         :aria-label="text.regenerate"
         :title="text.regenerate"
         :action="regenerate"
-        :disabled="disabled"
+        :disabled="control.disabled"
       >
         <LpIcon name="lucide:refresh-cw" :size="iconSize" />
       </LpButton>
@@ -264,7 +274,7 @@ const shell = computed(() =>
           :icon-size="iconSize"
           :show-label="text.show"
           :hide-label="text.hide"
-          :disabled="disabled"
+          :disabled="control.disabled"
           :controls="id"
           class="size-7"
         />
@@ -273,7 +283,7 @@ const shell = computed(() =>
           :value="secret"
           :size="copySize"
           class="size-7 text-muted hover:text-ink"
-          :disabled="disabled"
+          :disabled="control.disabled"
           @copied="(t: string) => emit('copied', t)"
         />
         <slot name="actions" />
@@ -284,7 +294,7 @@ const shell = computed(() =>
             square
             class="size-7 text-muted hover:text-ink"
             :action="regenerate"
-            :disabled="disabled"
+            :disabled="control.disabled"
           >
             <LpIcon name="lucide:refresh-cw" :size="iconSize" />
           </LpButton>

package/src/components/LpSegmented.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Segmented control — a compact bar of mutually-exclusive options with a sliding
  * pill marking the selection (iOS-style). Built on reka ToggleGroup for the
@@ -36,6 +37,8 @@ export interface SegmentedOption extends LpOptionBase<string> {
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: string
     options: SegmentedOption[]
     size?: "sm" | "md" | "lg"
@@ -49,7 +52,7 @@ const props = withDefaults(
      */
     hoverFollow?: boolean
   }>(),
-  { size: "md", block: false, hoverFollow: true },
+  { palette: undefined, size: "md", block: false, hoverFollow: true },
 )
 
 const emit = defineEmits<{
@@ -106,6 +109,8 @@ function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
   if (target instanceof HTMLElement) target.blur()
 }
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpSelect.vue

@@ -16,6 +16,7 @@ export type SelectLabels = {
 </script>
 
 <script setup lang="ts" generic="V extends SelectValue = string">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * One select to rule them all — built on reka-ui Combobox.
  * `searchable` opts into the filter input; without it, it's a plain select.
@@ -36,7 +37,7 @@ import {
   ComboboxViewport,
 } from "reka-ui"
 import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldBlur, useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
@@ -61,6 +62,8 @@ type Model = V | V[] | undefined
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: Model
     options: SelectOption<V>[]
     placeholder?: string
@@ -90,7 +93,7 @@ const props = withDefaults(
     selected?: SelectSelection | (SelectSelection | null | undefined)[] | null
     labels?: Partial<SelectLabels>
   }>(),
-  {
+  { palette: undefined,
     searchable: false,
     multiple: false,
     clearable: false,
@@ -173,16 +176,42 @@ function onOpenChange(open: boolean) {
   isOpen.value = open
   query.value = ""
 }
+async function openFromKeyboard(event: KeyboardEvent) {
+  if (field.value.disabled || isOpen.value || !["ArrowDown", "ArrowUp"].includes(event.key)) return
+  event.preventDefault()
+  event.stopPropagation()
+  const trigger = event.currentTarget as HTMLElement
+  trigger.click()
+  await nextTick()
+  const panel = trigger.ownerDocument.getElementById(trigger.getAttribute("aria-controls") ?? "")
+  const search = panel?.querySelector<HTMLInputElement>('input:not([disabled])')
+  const items = panel?.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])')
+  const selected = panel?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
+  const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0])
+  target?.focus()
+}
 
 // Leaving the field, not moving between its parts: the trigger and the list
 // are marked with one id, because the list is portalled away from the trigger
 // and a check on the trigger alone either missed the search box or took a
 // step into it for leaving.
-const partOf = `lp-select-${useId()}`
-function onFocusOut(event: FocusEvent) {
-  const next = event.relatedTarget as Element | null
-  const inside = !!next && typeof next.closest === "function" && !!next.closest(`[data-lp-select-part="${partOf}"]`)
-  if (!inside) emit("blur", event)
+const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event))
+const triggerRef = ref<{ $el: HTMLElement } | null>(null)
+
+/*
+ * A pick closes the list while the chosen option still holds focus, then the
+ * option is removed and focus falls to the body: the field looked left, and
+ * the next arrow key went to the page (inside the palette's editor it went
+ * nowhere). Focus dropped by a closed list goes back to the trigger instead,
+ * and that is not leaving the field, so no blur is reported for it.
+ */
+function onListFocusOut(event: FocusEvent) {
+  const trigger = triggerRef.value?.$el
+  if (isOpen.value || event.relatedTarget || !trigger?.isConnected) {
+    onFocusOut(event)
+    return
+  }
+  trigger.focus({ preventScroll: true })
 }
 
 /*
@@ -373,6 +402,8 @@ 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()
+
+usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ selected: props.multiple ? modelList.value.map((value, index) => shown(value, index)) : current.value }) })
 </script>
 
 <template>
@@ -396,7 +427,7 @@ const guardOutside = useOutsideGuard()
     @update:open="onOpenChange"
   >
     <ComboboxAnchor
-      :data-lp-select-part="partOf"
+      :data-lp-field-part="partId"
       @focusout="onFocusOut"
       :class="[
         anchorHeight,
@@ -413,7 +444,10 @@ const guardOutside = useOutsideGuard()
            being cut short. -->
       <span :id="valueId" hidden>{{ valueText }}</span>
       <ComboboxTrigger
+        ref="triggerRef"
         :id="field.id"
+        :tabindex="field.disabled ? -1 : 0"
+        @keydown="openFromKeyboard"
         v-bind="triggerName"
         :aria-invalid="field.invalid || undefined"
         :aria-describedby="field.describedBy"
@@ -528,8 +562,8 @@ const guardOutside = useOutsideGuard()
 
     <ComboboxPortal :to="portalTo">
       <ComboboxContent
-        :data-lp-select-part="partOf"
-        @focusout="onFocusOut"
+        :data-lp-field-part="partId"
+        @focusout="onListFocusOut"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         position="popper"

package/src/components/LpSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
@@ -15,6 +16,8 @@ import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: number
     min?: number
     max?: number
@@ -23,7 +26,7 @@ const props = withDefaults(
     /** Accessible name for the thumb when there's no visible label. */
     ariaLabel?: string
   }>(),
-  { modelValue: 0, min: 0, max: 100, step: 1 },
+  { palette: undefined, modelValue: 0, min: 0, max: 100, step: 1 },
 )
 
 const emit = defineEmits<{
@@ -47,6 +50,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
   `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
 )
 const { dragging, onPointerDown } = useSliderDrag()
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpSwitch.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
 import { useFieldControl } from "../composables/useField"
@@ -15,6 +16,8 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: boolean
     disabled?: boolean
     label?: string
@@ -34,7 +37,7 @@ const props = withDefaults(
      */
     action?: (value: boolean) => unknown
   }>(),
-  { labelPosition: "end" },
+  { palette: undefined, labelPosition: "end" },
 )
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void
@@ -79,6 +82,8 @@ const describedBy = computed(
 function onUpdate(value: boolean) {
   void set(value)
 }
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: undefined, 'onUpdate:modelValue': onUpdate }) })
 </script>
 
 <template>

package/src/components/LpTable.vue

@@ -5,7 +5,10 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, watch } from "vue"
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, useId, watch } from "vue"
+import { suppressPaletteDiscovery, usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
+import { menuPaletteCommands } from "./commandPalette"
+import LpDataList from "./LpDataList.vue"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
@@ -157,6 +160,8 @@ type RowKey = string | number
 
 const props = withDefaults(
   defineProps<{
+    /** Publish loaded rows and existing row actions to the enclosing command scope. */
+    palette?: false | { id?: string; label?: string; labelKey?: keyof T }
     columns: TableColumn<T>[]
     /** The rows, for a table that holds its data. Ignored when `load` is set. */
     rows?: T[]
@@ -245,7 +250,7 @@ const props = withDefaults(
      */
     allMatching?: boolean
   }>(),
-  {
+  { palette: undefined,
     rows: () => [],
     pageSize: 25,
     skeletonRows: 5,
@@ -1075,6 +1080,34 @@ onBeforeUnmount(() => {
 const barInsetTop = computed(() =>
   props.stickyHeader && headHeight.value ? `${headHeight.value}px` : undefined,
 )
+
+const paletteScope = usePaletteScope()
+const paletteId = useId()
+suppressPaletteDiscovery()
+usePaletteCommands(() => {
+  if (props.palette === false) return []
+  const name = props.palette?.label ?? attrs["aria-label"] as string | undefined
+  if (!name) return []
+  const id = `${paletteScope?.id}/${props.palette?.id ?? paletteId}`
+  return [{
+    id, label: name, icon: "lucide:table", children: [
+      ...menuPaletteCommands(tableMenu(), `${id}/table`),
+      ...displayRows.value.map((row, index) => {
+        const menu = resolveRowMenu(props.rowMenu?.(row))
+        const rowId = `${id}/row/${keyFor(row, index)}`
+        const labelKey = props.palette && props.palette.labelKey || props.columns[0]?.key
+        return {
+          id: rowId, label: menu.title ?? String(labelKey ? row[labelKey] ?? keyFor(row, index) : keyFor(row, index)),
+          description: menu.subtitle, icon: menu.icon ?? "lucide:rows-3", image: menu.image,
+          onSelect: () => emit("rowClick", row), actions: menuPaletteCommands(menu.items, rowId),
+          previewComponent: { setup: () => () => h(LpDataList, { items: props.columns.map(column => ({
+            label: column.label, value: typeof row[column.key] === "object" ? null : String(row[column.key] ?? ""),
+          })) }) },
+        }
+      }),
+    ],
+  }]
+}, { automatic: true })
 </script>
 
 <template>

package/src/components/LpTableOfContents.vue

@@ -12,7 +12,7 @@
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
-import { scrollParent } from "../composables/scroll"
+import { atScrollEnd, scrollParent } from "../composables/scroll"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -112,9 +112,7 @@ function setup() {
     const line = Math.max(props.offset, view / 4)
     for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id
     const scrolled = scroller ? scroller.scrollTop : window.scrollY
-    const end = scroller
-      ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2
-      : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2
+    const end = atScrollEnd(headings[0])
     if (scrolled > 0 && end) current = headings[headings.length - 1]!.id
     activeId.value = current
   }

package/src/components/LpTabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
 import { computed, nextTick, ref, useId, watch } from "vue"
@@ -152,6 +153,12 @@ function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
   if (target instanceof HTMLElement) target.blur()
 }
+
+const paletteScope = usePaletteScope()
+usePaletteCommands(() => props.items.map(item => ({
+  id: `${paletteScope?.id}/tabs/${pillId}/${item.value}`, label: props.label ? `${props.label}: ${item.label}` : item.label,
+  icon: item.icon, disabled: item.disabled, onSelect: () => select(item.value),
+})), { automatic: true })
 </script>
 
 <template>

package/src/components/LpTagsInput.vue

@@ -13,6 +13,7 @@ export type TagsInputLabels = {
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Free-form list of short values: emails, labels, hostnames. Typing a
  * delimiter or Enter turns the text into a tag, a paste is split into many,
@@ -56,6 +57,8 @@ import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: string[]
     placeholder?: string
     /** Characters (or a RegExp) that end a tag while typing and split a paste. */
@@ -99,7 +102,7 @@ const props = withDefaults(
     /** Box height and text size, as LpInput. */
     size?: "sm" | "md" | "lg"
   }>(),
-  {
+  { palette: undefined,
     modelValue: () => [],
     delimiter: () => [",", "\n", "\t"],
     duplicates: "reject",
@@ -424,6 +427,8 @@ 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()
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: undefined, hint: undefined, error: undefined }) })
 </script>
 
 <template>

package/src/components/LpTextarea.vue

@@ -3,12 +3,15 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
   modelValue?: string
   placeholder?: string
   rows?: number
@@ -22,7 +25,7 @@ const props = defineProps<{
    * the <textarea> for native validation.
    */
   required?: boolean
-}>()
+}>(), { palette: undefined })
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
@@ -53,6 +56,8 @@ const textareaClass = computed(() =>
     hasField.value ? "" : (attrs.class as string),
   ),
 )
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: undefined, hint: undefined, error: undefined }) })
 </script>
 
 <template>