@globalbrain/sefirot 4.60.0 → 4.61.0

package/lib/blocks/lens/components/LensSheet.vue

@@ -14,6 +14,7 @@ import { type FieldData } from '../FieldData'
 import { type LensCreateExtension } from '../LensCreateExtension'
 import { useFieldFactory } from '../composables/FieldFactory'
 import { useLensEdit } from '../composables/LensEdit'
+import { provideLensInlineEdit } from '../composables/LensInlineEdit'
 import { extractServerErrors, extractServerMessage } from '../validation/ServerErrors'
 import LensSheetAvatarField from './LensSheetAvatarField.vue'
 import LensSheetField from './LensSheetField.vue'
@@ -66,6 +67,11 @@ const edit = useLensEdit()
 const factory = useFieldFactory()
 const snackbars = useSnackbars()
 
+// One field editor open at a time across the sheet: fields derive their
+// `editing` state from this shared context (mirroring the table's inline
+// cells), so opening an editor closes any other.
+provideLensInlineEdit()
+
 // Provide the data-list label width directly (instead of wrapping rows in
 // SDataList) so each LensSheetField wrapper doesn't make its SDataListItem a
 // `:first-child`, which would otherwise double SDataList's dashed dividers.

package/lib/blocks/lens/components/LensSheetField.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
+import IconChevronUp from '~icons/lucide/chevron-up'
+import IconCommand from '~icons/lucide/command'
+import IconCornerDownLeft from '~icons/lucide/corner-down-left'
 import IconPencilSimple from '~icons/ph/pencil-simple'
-import { computed, nextTick, ref, watch } from 'vue'
+import { type Component, computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
 import SDataListItem from '../../../components/SDataListItem.vue'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
-import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
+import {
+  type EditorSubmitShortcut,
+  dispatchEditorKeydown,
+  editorSubmitShortcutForTarget,
+  focusFirstEditable
+} from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
+import { useLensInlineEdit } from '../composables/LensInlineEdit'
 import { type Field } from '../fields/Field'
 
 const props = defineProps<{
@@ -71,19 +80,40 @@ const canEdit = computed(() =>
   && props.field.supportsOptimisticUpdate()
 )
 
-const editing = ref(false)
+// The editor's visible label. The input's own label — the one that carries the
+// required marker — is visually hidden (the row label stands in for it), so
+// re-attach the marker here.
+const editorLabel = computed(() =>
+  (props.field as any).data?.required ? `${props.field.label()} *` : props.field.label()
+)
+
+// One sheet editor open at a time: `editing` derives from the sheet-scoped
+// inline-edit context (provided by LensSheet), so opening another field's
+// editor closes this one — mirroring the table's inline cells.
+const inline = useLensInlineEdit()
+const editing = computed(() => inline?.activeKey.value === props.fieldKey)
 const model = ref<any>(null)
+const activeEditorTarget = ref<EventTarget | null>(null)
+
+// The sheet can close (or flip to create mode) while an editor is open; the
+// field unmounts but the shared key would survive and reopen this field's
+// editor on the next mount. Release it if it's still ours.
+onUnmounted(() => {
+  if (editing.value) {
+    inline?.stop()
+  }
+})
 
 // If the backing record is replaced/rebound while this editor is open (the
 // refresh banner, a parent `refresh()`, or a `/show` merge filling detail keys),
 // the `model` captured in `start()` is stale; applying it would overwrite the
 // freshly bound value. Close the editor so the user re-opens against the current
-// value. Our own optimistic save also mutates this value, but `apply()` sets
-// `editing = false` synchronously right after, so this async watcher sees it
-// already closed; user typing only touches the local `model`, never the record.
+// value. Our own optimistic save also mutates this value, but `apply()` stops
+// the edit synchronously right after, so this async watcher sees it already
+// closed; user typing only touches the local `model`, never the record.
 watch(
   () => props.record[props.fieldKey],
-  () => { if (editing.value) { editing.value = false } }
+  () => { if (editing.value) { inline?.stop() } }
 )
 
 const { validation, validate, reset } = useValidation(
@@ -93,19 +123,39 @@ const { validation, validate, reset } = useValidation(
 
 const formEl = ref<HTMLElement | null>(null)
 
+// No hint while nothing inside the form is focused (e.g. a radio-group editor,
+// whose options aren't keyboard-focusable): keydowns don't route through the
+// form then, so no shortcut would actually work.
+const submitShortcut = computed(() =>
+  activeEditorTarget.value ? editorSubmitShortcutForTarget(activeEditorTarget.value) : null
+)
+const submitShortcutModifierIcon = computed<Component | null>(() => {
+  return submitShortcut.value === 'command-enter'
+    ? IconCommand
+    : submitShortcut.value === 'control-enter'
+      ? IconChevronUp
+      : null
+})
+const submitShortcutLabel = computed(() =>
+  submitShortcut.value ? shortcutLabel(submitShortcut.value) : null
+)
+
 function start() {
   const raw = props.record[props.fieldKey]
   model.value = raw != null ? props.field.payloadToInput(raw) : props.field.inputEmptyValue()
   reset()
-  editing.value = true
+  inline?.start(props.fieldKey)
   // Focus the input on open (matching the inline table editor): better UX, and
   // it routes the editor's keydowns — notably Escape — through the form handler
   // so Escape cancels the edit rather than closing the sheet.
-  nextTick(() => focusFirstEditable(formEl.value))
+  nextTick(() => {
+    focusFirstEditable(formEl.value)
+    syncActiveEditorTarget()
+  })
 }
 
 function cancel() {
-  editing.value = false
+  inline?.stop()
 }
 
 async function apply() {
@@ -132,7 +182,11 @@ async function apply() {
   // is open (e.g. a refresh marks it locked). Re-check before persisting so an
   // already-open editor can't save a row the policy now rejects.
   if (!canEdit.value) {
-    editing.value = false
+    // Only release the shared key if it's still ours: another field's editor
+    // may have opened during the awaited validation above.
+    if (editing.value) {
+      inline?.stop()
+    }
     return
   }
 
@@ -140,7 +194,9 @@ async function apply() {
   edit!.save(props.record, {
     [props.fieldKey]: props.field.inputToPayload(model.value)
   })
-  editing.value = false
+  if (editing.value) {
+    inline?.stop()
+  }
 }
 
 function onEditorKeydown(event: KeyboardEvent) {
@@ -148,13 +204,53 @@ function onEditorKeydown(event: KeyboardEvent) {
   // closes on it (via SSheet's window-level handler).
   dispatchEditorKeydown(event, { cancel, submit: apply, shield: true })
 }
+
+function onEditorFocusin(event: FocusEvent) {
+  if (event.target instanceof HTMLElement && event.target.closest('.actions')) {
+    return
+  }
+
+  activeEditorTarget.value = event.target
+}
+
+function onEditorFocusout(event: FocusEvent) {
+  // Focus moving within the form (including onto the action buttons) keeps the
+  // hint stable; focus leaving the editor entirely clears it, so the hint can't
+  // keep advertising a control that's no longer focused.
+  if (!(event.relatedTarget instanceof HTMLElement && formEl.value?.contains(event.relatedTarget))) {
+    activeEditorTarget.value = null
+  }
+}
+
+function syncActiveEditorTarget() {
+  const activeElement = document.activeElement
+  activeEditorTarget.value = activeElement instanceof HTMLElement
+    && formEl.value?.contains(activeElement)
+    && !activeElement.closest('.actions')
+    ? activeElement
+    : null
+}
+
+function shortcutLabel(shortcut: EditorSubmitShortcut): string {
+  return shortcut === 'enter'
+    ? 'Enter'
+    : shortcut === 'command-enter'
+      ? 'Command+Enter'
+      : 'Control+Enter'
+}
 </script>
 
 <template>
-  <div class="LensSheetField" :class="{ editing }">
+  <div class="LensSheetField" :class="{ editing, 'is-editable': canEdit }">
     <div v-if="!editing" class="display">
-      <component :is="displayComponent" v-if="displayComponent" :value="record[fieldKey]" />
-      <SDataListItem v-else>
+      <component
+        :is="displayComponent"
+        v-if="displayComponent"
+        :value="record[fieldKey]"
+        :value-action="canEdit"
+        @click:value="start"
+      />
+      <SDataListItem v-else :value-action="canEdit" @click:value="start">
         <template #label>{{ field.label() }}</template>
         <template v-if="displayValue !== null" #value>{{ displayValue }}</template>
       </SDataListItem>
@@ -163,18 +259,54 @@ function onEditorKeydown(event: KeyboardEvent) {
         class="edit"
         type="button"
         :aria-label="`${t.edit} ${field.label()}`"
-        @click="start"
+        @click.stop="start"
       >
         <IconPencilSimple class="edit-icon" />
       </button>
     </div>
 
-    <div v-else ref="formEl" class="form" @keydown="onEditorKeydown">
-      <component :is="inputComponent" v-model="model" :validation="validation.input" />
-      <div class="actions">
-        <SButton size="mini" :label="t.cancel" @click="cancel" />
-        <SButton size="mini" mode="info" :label="t.apply" @click="apply" />
-      </div>
+    <div
+      v-else
+      ref="formEl"
+      class="form"
+      @keydown="onEditorKeydown"
+      @focusin="onEditorFocusin"
+      @focusout="onEditorFocusout"
+    >
+      <SDataListItem>
+        <template #label>{{ editorLabel }}</template>
+        <template #value>
+          <div class="editor">
+            <div class="editor-input">
+              <component
+                :is="inputComponent"
+                v-model="model"
+                size="mini"
+                :validation="validation.input"
+              />
+            </div>
+            <div class="actions">
+              <SButton size="mini" :label="t.cancel" @click="cancel" />
+              <SButton size="mini" mode="info" @click="apply">
+                <span class="apply-content">
+                  <span>{{ t.apply }}</span>
+                  <template v-if="submitShortcut">
+                    <span class="visually-hidden">({{ submitShortcutLabel }})</span>
+                    <span class="shortcut" :title="submitShortcutLabel ?? undefined" aria-hidden="true">
+                      <component
+                        :is="submitShortcutModifierIcon"
+                        v-if="submitShortcutModifierIcon"
+                        class="shortcut-icon"
+                      />
+                      <IconCornerDownLeft class="shortcut-icon" />
+                    </span>
+                  </template>
+                </span>
+              </SButton>
+            </div>
+          </div>
+        </template>
+      </SDataListItem>
     </div>
   </div>
 </template>
@@ -186,29 +318,63 @@ function onEditorKeydown(event: KeyboardEvent) {
 }
 
 .form {
-  padding: 8px 0;
+  position: relative;
 }
 
 .display {
   position: relative;
+  isolation: isolate;
+}
+
+/* Scope the hover chrome to the data-list row's own cell: display renderers
+   can nest their own `.value` (e.g. `SDescPill`), which must not grow a second
+   hover border. */
+.display :deep(.SDataListItem > .content > .value),
+.display :deep(.SDataListItem > .content > .empty) {
+  position: relative;
+  z-index: 0;
+}
+
+.LensSheetField.is-editable .display :deep(.SDataListItem > .content > .value)::before,
+.LensSheetField.is-editable .display :deep(.SDataListItem > .content > .empty)::before {
+  content: "";
+  position: absolute;
+  inset: -6px 0 -6px -16px;
+  z-index: -1;
+  pointer-events: none;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-2);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.LensSheetField.is-editable:hover .display :deep(.SDataListItem > .content > .value)::before,
+.LensSheetField.is-editable:hover .display :deep(.SDataListItem > .content > .empty)::before {
+  opacity: 1;
 }
 
 .edit {
   position: absolute;
-  top: 10px;
-  right: 0;
+  top: 50%;
+  right: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  transform: translateY(-50%);
+  border-radius: 8px;
   color: var(--c-text-2);
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-1);
   opacity: 0;
   transition: opacity 0.1s, background-color 0.1s, color 0.1s;
 }
 
-.LensSheetField:hover .edit {
+.LensSheetField.is-editable:hover .edit {
   opacity: 1;
 }
 
@@ -222,10 +388,74 @@ function onEditorKeydown(event: KeyboardEvent) {
   height: 16px;
 }
 
+.form :deep(.value) {
+  position: relative;
+}
+
+.editor {
+  position: relative;
+  z-index: 2;
+  margin: -8px 0 0 -16px;
+  width: calc(100% + 16px);
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-2);
+  overflow: visible;
+}
+
+.editor-input {
+  position: relative;
+  z-index: 2;
+  padding: 8px;
+}
+
+/* Visually hidden but kept in the accessibility tree (`display: none` would
+   drop it): the input's own label keeps naming the input for screen readers
+   while the row label stands in for it visually, and the shortcut text keeps
+   reaching screen readers alongside the icon-only hint. */
+.editor-input :deep(.SInputBase > .label),
+.visually-hidden {
+  position: absolute;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  min-height: 0;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .actions {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 8px;
+  padding: 8px;
+  border-top: 1px solid var(--c-divider);
+}
+
+.apply-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  padding: 2px 3px;
+  border-radius: 5px;
+  background-color: color-mix(in oklab, currentColor 16%, transparent);
+}
+
+.shortcut-icon {
+  width: 12px;
+  height: 12px;
+  opacity: 0.9;
 }
 </style>

package/lib/blocks/lens/composables/LensInlineEdit.ts

@@ -1,14 +1,16 @@
 import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
 
 /**
- * Tracks which table cell currently has its inline editor open, so that
- * opening one editor closes any other. The key is `${recordId}:${fieldKey}`.
+ * Tracks which inline editor is currently open within the providing scope, so
+ * that opening one editor closes any other. The table provides an instance for
+ * its cells (keyed `${recordId}:${fieldKey}`) and the record sheet provides
+ * its own for its fields (keyed by field key) — the scopes are independent.
  */
 export interface LensInlineEditContext {
-  /** The key of the cell currently being edited, or null. */
+  /** The key of the editor currently open, or null. */
   activeKey: Ref<string | null>
 
-  /** Open the editor for the given cell key (closing any other). */
+  /** Open the editor for the given key (closing any other). */
   start: (key: string) => void
 
   /** Close the active editor. */

package/lib/blocks/lens/fields/DateField.ts

@@ -59,7 +59,7 @@ export class DateField extends Field<DateFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputDate, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/blocks/lens/fields/Field.ts

@@ -222,13 +222,20 @@ export abstract class Field<T extends FieldData> {
    * Helper function to define the data list item component.
    */
   protected defineDataListItemComponent(fn: (value: any) => any, options: any = null): any {
-    return defineComponent((props) => {
-      return () => h(SDataListItem, options, {
+    return defineComponent((props, { emit }) => {
+      return () => h(SDataListItem, {
+        ...(options ?? {}),
+        'valueAction': props.valueAction,
+        'onClick:value': (event: MouseEvent) => {
+          emit('click:value', event)
+        }
+      }, {
         label: () => this.label(),
         value: () => fn(props.value)
       })
     }, {
-      props: ['value']
+      props: ['value', 'valueAction'],
+      emits: ['click:value']
     })
   }
 
@@ -305,7 +312,7 @@ export abstract class Field<T extends FieldData> {
    */
   protected defineFormInputComponent(fn: (props: any, emit: any) => any): any {
     return defineComponent(fn, {
-      props: ['modelValue', 'validation'],
+      props: ['modelValue', 'validation', 'size'],
       emits: ['update:modelValue']
     })
   }

package/lib/blocks/lens/fields/FileUploadField.ts

@@ -52,7 +52,7 @@ export class FileUploadField extends Field<FileUploadFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputFileUpload, {
-        'size': 'mini',
+        'size': props.size ?? 'mini',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/blocks/lens/fields/LinkField.ts

@@ -38,7 +38,7 @@ export class LinkField extends Field<LinkFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputText, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/blocks/lens/fields/SelectField.ts

@@ -162,7 +162,7 @@ export class SelectField extends Field<SelectFieldData> {
   defineDropdownInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputDropdown, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,
@@ -184,7 +184,7 @@ export class SelectField extends Field<SelectFieldData> {
       const Comp = this.data.multiple ? SInputCheckboxes : SInputRadios
 
       return () => h(Comp as any, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'help': this.help() || undefined,
         'options': this.data.options.map((o) => ({

package/lib/blocks/lens/fields/TextField.ts

@@ -34,7 +34,7 @@ export class TextField extends Field<TextFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputText, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/blocks/lens/fields/TextareaField.ts

@@ -36,7 +36,7 @@ export class TextareaField extends Field<TextareaFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputTextarea, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/components/SButton.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type Component, type MaybeRef, computed, unref, useSlots } from 'vue'
 import { type Position } from '../composables/Tooltip'
+import { useHasSlotContent } from '../composables/Utils'
 import { type ColorMode } from '../support/Color'
 import SFragment from './SFragment.vue'
 import SLink from './SLink.vue'
@@ -60,11 +61,15 @@ const emit = defineEmits<{
 
 const _leadIcon = computed(() => props.leadIcon ?? props.icon)
 
+// Rendered content, not slot presence: a slot that renders empty falls back
+// to the `label` prop (and an icon-only button keeps its icon-only padding).
+const hasDefaultSlot = useHasSlotContent()
+
 const classes = computed(() => [
   props.size ?? 'medium',
   props.type ?? 'fill',
   props.mode ?? 'default',
-  { 'has-label': !!props.label },
+  { 'has-label': !!props.label || hasDefaultSlot.value },
   { 'has-lead-icon': !!_leadIcon.value },
   { 'has-trail-icon': !!props.trailIcon },
   { loading: props.loading },
@@ -118,7 +123,8 @@ function onClick(): void {
         <span v-if="_leadIcon" class="icon" :class="iconMode">
           <component :is="_leadIcon" class="icon-svg" />
         </span>
-        <span v-if="label" class="label" :class="labelMode" v-html="label" />
+        <span v-if="hasDefaultSlot" class="label" :class="labelMode"><slot /></span>
+        <span v-else-if="label" class="label" :class="labelMode" v-html="label" />
         <span v-if="trailIcon" class="icon" :class="iconMode">
           <component :is="trailIcon" class="icon-svg" />
         </span>

package/lib/components/SDataListItem.vue

@@ -9,11 +9,16 @@ const props = withDefaults(defineProps<{
   preWrap?: boolean
   lineClamp?: string | number
   tnum?: boolean
+  valueAction?: boolean
 }>(), {
   dir: 'row',
   maxWidth: '100%'
 })
 
+const emit = defineEmits<{
+  'click:value': [event: MouseEvent]
+}>()
+
 const { labelWidth } = useDataListState()
 
 const slots = useSlots()
@@ -48,6 +53,45 @@ function hasSlotContent(name = 'default'): boolean {
     return true
   })
 }
+
+function onValueClick(event: MouseEvent): void {
+  if (!props.valueAction || isInteractiveClick(event)) {
+    return
+  }
+
+  emit('click:value', event)
+}
+
+// Whether the click landed on interactive content (a link, button, input, …)
+// inside the cell, which handles the click itself. The `closest()` match is
+// bounded to the cell (`currentTarget`): an interactive *ancestor* of the
+// whole list — a tabindexed scroll container, say — must not swallow every
+// cell click.
+function isInteractiveClick(event: MouseEvent): boolean {
+  const cell = event.currentTarget
+  const target = event.target
+
+  if (!(cell instanceof HTMLElement) || !(target instanceof HTMLElement)) {
+    return false
+  }
+
+  const interactive = target.closest([
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[contenteditable="true"]',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(','))
+
+  return !!interactive && cell.contains(interactive)
+}
 </script>
 
 <template>
@@ -56,10 +100,10 @@ function hasSlotContent(name = 'default'): boolean {
       <div class="label" :style="labelStyles">
         <slot name="label" />
       </div>
-      <div v-if="!hasValue" class="empty">
+      <div v-if="!hasValue" class="empty" :class="{ action: valueAction }" @click="onValueClick">
         —
       </div>
-      <div v-else-if="hasValue" class="value" :style="valueStyles">
+      <div v-else-if="hasValue" class="value" :class="{ action: valueAction }" :style="valueStyles" @click="onValueClick">
         <slot name="value" />
       </div>
     </div>
@@ -102,6 +146,11 @@ function hasSlotContent(name = 'default'): boolean {
   color: var(--c-text-1);
 }
 
+.empty.action,
+.value.action {
+  cursor: pointer;
+}
+
 .SDataListItem.row .content {
   flex-direction: row;
 }

package/lib/components/SDropdownSectionFilter.vue

@@ -7,6 +7,7 @@ import {
   type DropdownSectionFilterSelectedValue
 } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
+import { stopNonSubmitEnterKeydown } from '../support/Dom'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 
 const props = defineProps<{
@@ -28,6 +29,7 @@ const { t } = useTrans({
 })
 
 const input = ref<HTMLElement | null>(null)
+const list = ref<HTMLUListElement | null>(null)
 const query = ref('')
 
 const enabledOptions = computed(() => {
@@ -53,8 +55,16 @@ function isActive(value: any) {
   return Array.isArray(selected) ? selected.includes(value) : selected === value
 }
 
+// Move focus from the search input into the first option (ArrowDown from the
+// search field).
+function focusFirstOption() {
+  list.value?.querySelector<HTMLElement>('.button')?.focus()
+}
+
 function focusPrev(event: any) {
-  event.target.parentNode.previousElementSibling?.firstElementChild?.focus()
+  // ArrowUp from the first option returns focus to the search input (if any).
+  const prev = event.target.parentNode.previousElementSibling?.firstElementChild
+  prev ? prev.focus() : input.value?.focus()
 }
 
 function focusNext(event: any) {
@@ -70,12 +80,18 @@ function onClick(option: DropdownSectionFilterOption, value: any) {
 <template>
   <div class="SDropdownSectionFilter">
     <div v-if="search" class="search">
-      <!-- Keep Enter inside the filter: it drives the dropdown, and must not
-           bubble to an enclosing editor/form as a submit. -->
-      <input ref="input" v-model="query" class="input" :placeholder="t.i_ph" @keydown.enter.stop>
+      <input
+        ref="input"
+        v-model="query"
+        class="input"
+        :placeholder="t.i_ph"
+        @keydown.enter="stopNonSubmitEnterKeydown"
+        @keydown.down.prevent
+        @keyup.down.prevent="focusFirstOption"
+      >
     </div>
 
-    <ul v-if="filteredOptions.length" class="list">
+    <ul v-if="filteredOptions.length" ref="list" class="list">
       <li v-for="option in filteredOptions" :key="option.label" class="item">
         <button
           class="button"
@@ -154,6 +170,13 @@ function onClick(option: DropdownSectionFilterOption, value: any) {
   &:hover {
     background-color: var(--c-bg-mute-1);
   }
+
+  /* The global reset strips `button:focus` outlines, so keyboard focus
+     (arrowing through the options) needs its own visible ring. */
+  &:focus-visible {
+    outline: 2px solid var(--input-focus-border-color);
+    outline-offset: -2px;
+  }
 }
 
 .checkbox {

package/lib/components/SInputAsyncDropdown.vue

@@ -6,6 +6,7 @@ import { type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import { useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
+import { stopNonSubmitEnterKeydown } from '../support/Dom'
 import { type Option } from '../support/InputDropdown'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
@@ -76,6 +77,7 @@ const { t } = useTrans({
 })
 
 const container = ref<HTMLDivElement>()
+const box = ref<HTMLDivElement | null>(null)
 const input = ref<HTMLInputElement | null>(null)
 const list = ref<HTMLUListElement | null>(null)
 
@@ -209,6 +211,44 @@ function onOpen() {
   nextTick(() => input.value?.focus())
 }
 
+// Clicking (or Enter on — see onEnterToggle) the box toggles the flyout —
+// closing returns focus to the box so keyboard interaction continues from the
+// control instead of falling to `document.body`. ArrowDown stays open-only.
+function onToggle() {
+  if (isOpen.value) {
+    close()
+    box.value?.focus()
+    return
+  }
+  onOpen()
+}
+
+// Bare Enter toggles on keydown, not keyup: a Cmd/Ctrl+Enter submit (handled
+// on keydown by an enclosing editor) sheds its modifier before the Enter keyup
+// when the modifier is released first, and that keyup must not reopen the
+// flyout — acting on keydown sidesteps release order entirely. Key repeat is
+// ignored so holding Enter doesn't flap the flyout.
+function onEnterToggle(event: KeyboardEvent) {
+  if (!event.repeat) {
+    onToggle()
+  }
+}
+
+// Escape while the flyout is open belongs to the flyout: close it and return
+// focus to the box, keeping the keydown from an enclosing surface (an inline
+// editor would cancel, a sheet would close). A closed dropdown leaves Escape
+// to those surfaces. The Escape that cancels an IME composition never
+// operates the flyout.
+function onEscapeKeydown(event: KeyboardEvent) {
+  if (!isOpen.value || event.isComposing) {
+    return
+  }
+  event.stopPropagation()
+  event.preventDefault()
+  close()
+  box.value?.focus()
+}
+
 watch(isOpen, (value) => {
   // On close: drop any pending refetch, invalidate any in-flight fetch (so a late
   // response can't repopulate the list while closed), and clear the query /
@@ -264,8 +304,12 @@ function onSelect(item: T): void {
     commit(null)
   }
 
+  // Return focus to the box on a selection that closes the flyout, so keyboard
+  // interaction (reopening, an editor's submit shortcut) continues from the
+  // control rather than falling to `document.body`.
   if (props.closeOnSelect ?? !props.multiple) {
     close()
+    box.value?.focus()
   }
 }
 
@@ -330,14 +374,15 @@ function focusNext(event: any): void {
     :hide-error
     :hide-warning
   >
-    <div ref="container" class="container">
+    <div ref="container" class="container" @keydown.esc="onEscapeKeydown">
       <div
+        ref="box"
         class="box"
         role="button"
         tabindex="0"
-        @click="onOpen"
+        @click="onToggle"
         @keydown.down.prevent
-        @keyup.enter="onOpen"
+        @keydown.enter.exact="onEnterToggle"
         @keyup.down="onOpen"
       >
         <div class="box-content">
@@ -362,16 +407,12 @@ function focusNext(event: any): void {
       <div v-if="isOpen" class="dropdown" :style="inset">
         <div class="dropdown-content">
           <div class="search">
-            <!-- Keep Enter inside the search field: it drives the dropdown and
-                 must neither bubble to an enclosing form (`.stop`) nor trigger the
-                 browser's implicit form submission (`.prevent`). ArrowDown moves
-                 focus into the option list. -->
             <input
               ref="input"
               v-model="query"
               class="search-input"
               :placeholder="t.ph"
-              @keydown.enter.stop.prevent
+              @keydown.enter="stopNonSubmitEnterKeydown"
               @keydown.down.prevent
               @keyup.down.prevent="focusFirstOption"
             >
@@ -442,6 +483,13 @@ function focusNext(event: any): void {
   &:hover {
     border-color: var(--input-hover-border-color);
   }
+
+  /* Keyboard focus shows via the border (the input-family idiom), not the
+     UA's default ring. */
+  &:focus-visible {
+    outline: none;
+    border-color: var(--input-focus-border-color);
+  }
 }
 
 .box-content {
@@ -544,6 +592,13 @@ function focusNext(event: any): void {
     background-color: var(--c-bg-mute-1);
   }
 
+  /* The global reset strips `button:focus` outlines, so keyboard focus
+     (arrowing through the options) needs its own visible ring. */
+  &:focus-visible {
+    outline: 2px solid var(--input-focus-border-color);
+    outline-offset: -2px;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;

package/lib/components/SInputDropdown.vue

@@ -38,6 +38,7 @@ const { t } = useTrans({
 })
 
 const container = ref<HTMLDivElement>()
+const box = ref<HTMLDivElement>()
 
 const { isOpen, open, close } = useFlyout(container)
 const { inset, update: updatePosition } = useManualDropdownPosition(
@@ -85,6 +86,44 @@ async function onOpen() {
   }
 }
 
+// Clicking (or Enter on — see onEnterToggle) the box toggles the flyout —
+// closing returns focus to the box so keyboard interaction continues from the
+// control instead of falling to `document.body`. ArrowDown stays open-only.
+function onToggle() {
+  if (isOpen.value) {
+    close()
+    box.value?.focus()
+    return
+  }
+  onOpen()
+}
+
+// Bare Enter toggles on keydown, not keyup: a Cmd/Ctrl+Enter submit (handled
+// on keydown by an enclosing editor) sheds its modifier before the Enter keyup
+// when the modifier is released first, and that keyup must not reopen the
+// flyout — acting on keydown sidesteps release order entirely. Key repeat is
+// ignored so holding Enter doesn't flap the flyout.
+function onEnterToggle(event: KeyboardEvent) {
+  if (!event.repeat) {
+    onToggle()
+  }
+}
+
+// Escape while the flyout is open belongs to the flyout: close it and return
+// focus to the box, keeping the keydown from an enclosing surface (an inline
+// editor would cancel, a sheet would close). A closed dropdown leaves Escape
+// to those surfaces. The Escape that cancels an IME composition never
+// operates the flyout.
+function onEscapeKeydown(event: KeyboardEvent) {
+  if (!isOpen.value || event.isComposing) {
+    return
+  }
+  event.stopPropagation()
+  event.preventDefault()
+  close()
+  box.value?.focus()
+}
+
 function onSelect(value: T) {
   props.validation?.$touch()
 
@@ -99,7 +138,13 @@ function onSelect(value: T) {
     model.value = null
   }
 
-  props.closeOnClick && close()
+  // Return focus to the box on a selection that closes the flyout, so
+  // keyboard interaction (reopening, an editor's submit shortcut) continues
+  // from the control rather than falling to `document.body`.
+  if (props.closeOnClick) {
+    close()
+    box.value?.focus()
+  }
 }
 </script>
 
@@ -121,14 +166,15 @@ function onSelect(value: T) {
     :hide-error
     :hide-warning
   >
-    <div ref="container" class="container">
+    <div ref="container" class="container" @keydown.esc="onEscapeKeydown">
       <div
+        ref="box"
         class="box"
         role="button"
         tabindex="0"
-        @click="onOpen"
+        @click="onToggle"
         @keydown.down.prevent
-        @keyup.enter="onOpen"
+        @keydown.enter.exact="onEnterToggle"
         @keyup.down="onOpen"
       >
         <div class="box-content">
@@ -182,6 +228,13 @@ function onSelect(value: T) {
   &:hover {
     border-color: var(--input-hover-border-color);
   }
+
+  /* Keyboard focus shows via the border (the input-family idiom), not the
+     UA's default ring. */
+  &:focus-visible {
+    outline: none;
+    border-color: var(--input-focus-border-color);
+  }
 }
 
 .box-content {

package/lib/composables/Utils.ts

@@ -1,8 +1,13 @@
 import {
+  Comment,
   type ComputedRef,
+  Fragment,
   type MaybeRefOrGetter,
+  Text,
+  type VNode,
   computed,
   getCurrentInstance,
+  isVNode,
   onMounted,
   toValue,
   useSlots
@@ -52,17 +57,52 @@ export function computedArrayWhen<T = any, C = any>(
   }, [])
 }
 
-/**
- * Checks whether the slot has a non empty value.
- */
+function hasSlotContent(value: unknown): boolean {
+  if (value == null || typeof value === 'boolean') {
+    return false
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0
+  }
+
+  if (typeof value === 'number' || typeof value === 'bigint') {
+    return true
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(hasSlotContent)
+  }
+
+  if (!isVNode(value)) {
+    return false
+  }
+
+  const vnode = value as VNode
+
+  if (vnode.type === Comment) {
+    return false
+  }
+
+  if (vnode.type === Text || vnode.type === Fragment) {
+    return hasSlotContent(vnode.children)
+  }
+
+  // An element with only text children is judged by that text —
+  // `<div>{{ maybeEmpty }}</div>` must not defeat SDesc's empty fallback.
+  // Anything else is content in itself: a component, or an element whose
+  // `children` is `null` (an icon, an `<img>`, …), an array, or a slots object.
+  if (typeof vnode.children === 'string') {
+    return hasSlotContent(vnode.children)
+  }
+
+  return true
+}
+
 export function useHasSlotContent(name = 'default'): ComputedRef<boolean> {
   const slots = useSlots()
 
-  return computed(() => {
-    return !!slots[name]?.().some((s) => {
-      return Array.isArray(s.children) ? true : !!(s.children as string).trim()
-    })
-  })
+  return computed(() => hasSlotContent(slots[name]?.()))
 }
 
 /**

package/lib/support/Dom.ts

@@ -17,6 +17,75 @@ export function isTextLikeInput(target: EventTarget | null): boolean {
   return ['text', 'search', 'url', 'email', 'tel', 'password', 'number'].includes(type)
 }
 
+export type EditorSubmitShortcut = 'enter' | 'command-enter' | 'control-enter'
+
+/**
+ * The user-facing shortcut to show for the currently focused editor control.
+ * Plain Enter is truthful only for simple text-like inputs; other controls need
+ * the platform's primary modifier to avoid clashing with their own Enter key
+ * behavior. A text input nested inside a dropdown (its search filter, see
+ * `SDropdownSectionFilter` / `SInputAsyncDropdown`) keeps Enter to itself
+ * too, so only the modifier gesture reaches the editor from there.
+ */
+export function editorSubmitShortcutForTarget(
+  target: EventTarget | null,
+  platform = currentPlatform()
+): EditorSubmitShortcut {
+  if (
+    isTextLikeInput(target)
+    && !(target as HTMLElement).closest('.SDropdown, .SInputAsyncDropdown')
+  ) {
+    return 'enter'
+  }
+
+  return hasCommandShortcutModifier(platform) ? 'command-enter' : 'control-enter'
+}
+
+const commandShortcutPlatforms = new Set([
+  'ios',
+  'ipados',
+  'macos',
+
+  // `navigator.platform` fallback values.
+  'ipad',
+  'iphone',
+  'macintel'
+])
+
+function hasCommandShortcutModifier(platform: string): boolean {
+  return commandShortcutPlatforms.has(platform.toLowerCase())
+}
+
+function currentPlatform(): string {
+  if (typeof navigator === 'undefined') {
+    return ''
+  }
+
+  const nav = navigator as Navigator & { userAgentData?: { platform?: string } }
+
+  return nav.userAgentData?.platform ?? nav.platform ?? ''
+}
+
+/**
+ * Keydown handler for a text input nested inside a dropdown-like control (a
+ * search filter): Enter operates the control, not an enclosing inline editor,
+ * so it is stopped — with its default prevented — unless it carries the
+ * universal submit modifier (Cmd/Ctrl, see {@link isEditorSubmitKeydown}).
+ * Shift/Alt+Enter are contained too: the editor's submit predicate would read
+ * them off a text-like input as a plain submitting Enter. The Enter that
+ * commits an IME composition belongs to the IME — swallowing its default would
+ * drop the composed text — so it passes untouched (the editor ignores it).
+ */
+export function stopNonSubmitEnterKeydown(event: KeyboardEvent): void {
+  if (event.isComposing) {
+    return
+  }
+  if (event.key === 'Enter' && !event.metaKey && !event.ctrlKey) {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+}
+
 /**
  * Whether an Enter keydown should submit an inline editor. Ctrl/Cmd+Enter
  * submits from any control — it's the near-universal "submit" gesture (GitHub,
@@ -65,8 +134,9 @@ export function isEditorCancelKeydown(event: KeyboardEvent): boolean {
  * throw on `formInputComponent()` (not yet editable). When making one editable,
  * if its input is a composite control with its own nested text input (e.g. a
  * dropdown's search filter), that nested input must keep Enter/Escape from
- * bubbling to this handler — see `SDropdownSectionFilter` — otherwise typing a
- * value and pressing Enter would submit/cancel the whole editor.
+ * bubbling to this handler — {@link stopNonSubmitEnterKeydown} is the Enter
+ * half; see `SDropdownSectionFilter` — otherwise typing a value and pressing
+ * Enter would submit/cancel the whole editor.
  */
 export function dispatchEditorKeydown(
   event: KeyboardEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.60.0",
+  "version": "4.61.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",
@@ -56,6 +56,7 @@
     "release": "npm whoami >/dev/null 2>&1 || npm login && release-it"
   },
   "dependencies": {
+    "@iconify-json/lucide": "^1.2.116",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.10",
     "@popperjs/core": "^2.11.8",