@michaelthielemann/kestrel 4.1.2 → 5.0.0

package/layers/ui/app/components/ui/NumberInput.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-// Attrs (id, aria-*) must land on the inner <input>, not the suffix wrapper, so the field label's
-// `for` keeps pointing at the control. With no suffix the input still receives them via v-bind="$attrs".
-defineOptions({ inheritAttrs: false })
-
-withDefaults(
-  defineProps<{
-    min?: number
-    max?: number
-    step?: number | 'any'
-    placeholder?: string
-    disabled?: boolean
-    // Display-only suffix (e.g. 'rem'). When set, the input gains a trailing adornment; the emitted
-    // model value is still a bare number. When absent, the plain `<input class="ui-number">` renders.
-    suffix?: string
-    /** Tighter padding for dense chrome (toolbars). Still meets the AA minimum target size. */
-    slim?: boolean
-  }>(),
-  { disabled: false, slim: false },
-)
-
-const model = defineModel<number | null>()
-
-// Bound with `v-model` rather than :value/@input on purpose: mid-edit text like '1.0' parses to the
-// number 1, and a plain :value binding would write that back over the text, deleting the trailing digit
-// and moving the caret ('1.05' would end up as 15). v-model's directive skips the DOM write while the
-// field is focused and its text still parses to the same number, so typing stays intact.
-// The proxy only maps the empty field to null; v-model already hands over a number for a number input.
-const text = computed<number | string>({
-  get: () => model.value ?? '',
-  set: (v) => { model.value = v === '' ? null : Number(v) },
-})
-
-// A number input can hold editing text the browser can't parse ('-', '1e'); its DOM value is then ''
-// and the model already null, so a save would silently drop what the user still sees in the field.
-// Snap the text back to the model so the field never shows a value that wouldn't be saved.
-// (Assigning `value` clears the unparsable editing text even though the raw value is already ''.)
-function snapBack(el: HTMLInputElement) {
-  if (el.validity?.badInput) el.value = model.value == null ? '' : String(model.value)
-}
-function onBlur(e: Event) {
-  snapBack(e.target as HTMLInputElement)
-}
-// Enter fires the ancestor form's implicit submission WITHOUT a preceding blur, so the blur guard
-// can't run — with the form's native validation off, a null would be saved while unparsable text
-// still shows. Suppress that submit and snap back so the mismatch is corrected and visible instead.
-function onKeydown(e: KeyboardEvent) {
-  if (e.key !== 'Enter' || e.isComposing) return
-  const el = e.target as HTMLInputElement
-  if (el.validity?.badInput) { e.preventDefault(); snapBack(el) }
-}
-</script>
-
-<template>
-  <div v-if="suffix" class="ui-number-wrap" :class="{ 'ui-number-wrap--slim': slim }" :data-disabled="disabled || undefined">
-    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -- id/label land via v-bind="$attrs" from the wrapping UiField, invisible to static analysis -->
-    <input
-      v-model="text"
-      type="number"
-      :min="min"
-      :max="max"
-      :step="step"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      class="ui-number-wrap__input"
-      v-bind="$attrs"
-      @blur="onBlur"
-      @keydown="onKeydown"
-    >
-    <span class="ui-number-wrap__suffix" aria-hidden="true">{{ suffix }}</span>
-  </div>
-  <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -- id/label land via v-bind="$attrs" from the wrapping UiField, invisible to static analysis -->
-  <input
-    v-else
-    v-model="text"
-    type="number"
-    :min="min"
-    :max="max"
-    :step="step"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    class="ui-number"
-    :class="{ 'ui-number--slim': slim }"
-    v-bind="$attrs"
-    @blur="onBlur"
-    @keydown="onKeydown"
-  >
-</template>
-
-<style lang="scss">
-@use '../../assets/scss/mixins';
-
-.ui-number {
-  @include mixins.input-base;
-  width: 100%;
-
-  &::placeholder {
-    color: var(--color-text-muted);
-  }
-  &--slim {
-    @include mixins.input-slim;
-  }
-}
-
-// Suffix variant (opt-in via the `suffix` prop). The border/radius live on the wrapper; the inner input
-// is borderless + transparent so it reads as one control, mirroring the slug prefix adornment.
-.ui-number-wrap {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--color-control-border, var(--color-border));
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  overflow: hidden; // clip the square-cornered suffix background to the wrapper's rounded border
-
-  &:focus-within {
-    outline: 2px solid var(--color-focus);
-    outline-offset: -2px;
-  }
-  &[data-disabled] {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  // input-base flags the invalid state on the input's own border; here the border lives on the wrapper
-  // while the inner input is borderless, so mirror it so a unit field shows the same red invalid border.
-  &:has(.ui-number-wrap__input[aria-invalid='true']) {
-    border-color: var(--color-danger);
-  }
-
-  &__input {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding: var(--space-2) var(--space-3);
-    border: 0;
-    background: transparent;
-    color: var(--color-text);
-    font-size: var(--text-base);
-
-    &:focus-visible {
-      outline: none;
-    }
-    &::placeholder {
-      color: var(--color-text-muted);
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__suffix {
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--space-3);
-    background: var(--color-surface-2);
-    color: var(--color-text-muted);
-    border-left: 1px solid var(--color-control-border, var(--color-border));
-    font-size: var(--text-sm);
-    white-space: nowrap;
-  }
-}
-
-// Slim adornment variant: the wrapper keeps its border/radius, only the inner box tightens. Written as a
-// separate rule (not nested) so `.ui-number-wrap--slim .ui-number-wrap__input` outranks the base element rule.
-.ui-number-wrap--slim {
-  .ui-number-wrap__input {
-    @include mixins.input-slim;
-  }
-  .ui-number-wrap__suffix {
-    padding-inline: var(--space-2);
-  }
-}
-</style>

package/layers/ui/app/components/ui/Richtext.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { watch, watchEffect } from 'vue'
-import { useEditor, EditorContent } from '@tiptap/vue-3'
-import { StarterKit } from '@tiptap/starter-kit'
-import { Highlight } from '@tiptap/extension-highlight'
-import { Subscript } from '@tiptap/extension-subscript'
-import { Superscript } from '@tiptap/extension-superscript'
-import { TextAlign } from '@tiptap/extension-text-align'
-import RichtextToolbar from './RichtextToolbar.vue'
-import { RichtextSpanClass, RichtextBlockClass } from '../../utils/richtext-preserve-class'
-import { RICHTEXT_LINK_SCHEME } from '@michaelthielemann/kestrel-core/client'
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    locale?: string
-    // a11y: the editing surface is a contenteditable with no native label; the field name + error/state
-    // are set on the ProseMirror DOM node (editor.view.dom) so AT announces a named multiline textbox.
-    ariaLabel?: string
-    describedby?: string
-    invalid?: boolean
-    required?: boolean
-  }>(),
-  { disabled: false },
-)
-const model = defineModel<string | null>()
-
-// TipTap emits `update` for non-content changes too — `setEditable`/`setOptions` emit directly, past the
-// transaction pipeline and its docChanged guard — and that echo reaches the edit form as a user edit.
-// Only a changed doc is one, so every emit is checked against the doc it last saw.
-let lastDoc: unknown = null
-
-// StarterKit (v3) already bundles Link + Underline; only the rest are added here.
-const editor = useEditor({
-  content: model.value ?? '',
-  editable: !props.disabled,
-  // (no `immediatelyRender` — not in tiptap v3's EditorOptions type; the admin editor is SPA-only so the
-  // browser default applies.)
-  extensions: [
-    StarterKit.configure({
-      heading: { levels: [1, 2, 3, 4, 5, 6] },
-      // `protocols`: the Link mark validates every href against its own scheme allowlist, which has no
-      // `kestrel:`. Without this it drops the whole anchor when stored content is loaded and makes the
-      // toolbar's `setLink` a silent no-op — opening and saving a record would destroy its internal links.
-      // `target`/`rel` null: the sanitizer owns that policy — it decorates absolute http(s) links and
-      // strips the attributes from every other kind. The mark's own defaults would stamp them on ANY
-      // anchor, so a stored internal/relative/mailto link came back changed and read as an unsaved edit.
-      link: { openOnClick: false, protocols: [RICHTEXT_LINK_SCHEME], HTMLAttributes: { target: null, rel: null } },
-    }),
-    Highlight,
-    Subscript,
-    Superscript,
-    TextAlign.configure({ types: ['heading', 'paragraph'] }),
-    RichtextSpanClass, RichtextBlockClass, // preserve consumer presentational classes on round-trip
-  ],
-  onCreate: ({ editor }) => {
-    lastDoc = editor.state.doc
-  },
-  onUpdate: ({ editor }) => {
-    if (editor.state.doc === lastDoc) return
-    lastDoc = editor.state.doc
-    model.value = editor.isEmpty ? '' : editor.getHTML()
-  },
-})
-
-watch(model, (value) => {
-  const e = editor.value
-  if (!e) return
-  const next = value ?? ''
-  const current = e.isEmpty ? '' : e.getHTML()
-  // `emitUpdate: false`: this value came FROM the model, so re-emitting it would reach the edit form as
-  // a user edit — clearing the redo stack and turning a restored null back into ''.
-  if (next !== current) {
-    e.commands.setContent(next, { emitUpdate: false })
-    lastDoc = e.state.doc
-  }
-})
-
-// `false` — the second arg suppresses the update event; `disabled` tracks the form's `saving` flag, so
-// the post-save toggle would otherwise re-dirty the form that was just rebaselined.
-watch(() => props.disabled, (d) => editor.value?.setEditable(!d, false))
-
-// Apply the accessible name + textbox semantics directly to the ProseMirror surface, reactively (the
-// error-driven describedby/invalid arrive after mount). `editor.view.dom` is the contenteditable element.
-function setAttr(el: HTMLElement, name: string, value?: string) {
-  if (value) el.setAttribute(name, value)
-  else el.removeAttribute(name)
-}
-watchEffect(() => {
-  const dom = editor.value?.view?.dom as HTMLElement | undefined
-  if (!dom) return
-  dom.setAttribute('role', 'textbox')
-  dom.setAttribute('aria-multiline', 'true')
-  setAttr(dom, 'aria-label', props.ariaLabel)
-  setAttr(dom, 'aria-describedby', props.describedby)
-  setAttr(dom, 'aria-invalid', props.invalid ? 'true' : undefined)
-  setAttr(dom, 'aria-required', props.required ? 'true' : undefined)
-})
-</script>
-
-<template>
-  <div class="ui-richtext">
-    <RichtextToolbar :editor="editor" :locale="locale" :disabled="disabled" />
-    <EditorContent :editor="editor" class="ui-richtext__content" />
-  </div>
-</template>
-
-<style lang="scss">
-.ui-richtext {
-  border: 1px solid var(--color-control-border, var(--color-border));
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-
-  &__content {
-    .tiptap {
-      padding: var(--space-3);
-      min-height: 8rem;
-      outline: none;
-
-      :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--space-3); }
-      :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; }
-      ul, ol { padding-inline-start: var(--space-5); }
-      blockquote {
-        border-inline-start: 3px solid var(--color-border);
-        padding-inline-start: var(--space-3);
-        color: var(--color-text-muted);
-      }
-      pre {
-        background: var(--color-bg);
-        padding: var(--space-3);
-        border-radius: var(--radius-sm);
-        overflow-x: auto;
-      }
-      code { font-family: monospace; }
-      a { color: var(--color-primary); }
-      mark { background: var(--color-highlight); color: var(--color-on-highlight); }
-      hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
-    }
-  }
-}
-</style>

package/layers/ui/app/components/ui/RichtextToolbar.vue

@@ -1,251 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import type { Editor } from '@tiptap/vue-3'
-import UiButton from './Button.vue'
-import UiIcon from './Icon.vue'
-import UiSelect from './Select.vue'
-import UiTextInput from './TextInput.vue'
-import LinkInternalPicker from '../field/LinkInternalPicker.vue'
-import type { IconName } from '../../utils/icons'
-import { richtextLinkHref, parseRichtextLinkHref } from '@michaelthielemann/kestrel-core/client'
-
-const props = defineProps<{ editor: Editor | undefined; locale?: string; disabled?: boolean }>()
-
-interface Item {
-  name: string
-  label: string
-  icon: IconName
-  run: (e: Editor) => void
-  active?: (e: Editor) => boolean
-  disabled?: (e: Editor) => boolean
-}
-
-const { t } = useT()
-
-const MARKS = computed((): Item[] => [
-  { name: 'bold', label: t('richtext.bold'), icon: 'bold', run: (e) => e.chain().focus().toggleBold().run(), active: (e) => e.isActive('bold') },
-  { name: 'italic', label: t('richtext.italic'), icon: 'italic', run: (e) => e.chain().focus().toggleItalic().run(), active: (e) => e.isActive('italic') },
-  { name: 'underline', label: t('richtext.underline'), icon: 'underline', run: (e) => e.chain().focus().toggleUnderline().run(), active: (e) => e.isActive('underline') },
-  { name: 'strike', label: t('richtext.strikethrough'), icon: 'strikethrough', run: (e) => e.chain().focus().toggleStrike().run(), active: (e) => e.isActive('strike') },
-  { name: 'code', label: t('richtext.inlineCode'), icon: 'code', run: (e) => e.chain().focus().toggleCode().run(), active: (e) => e.isActive('code') },
-  { name: 'highlight', label: t('richtext.highlight'), icon: 'highlighter', run: (e) => e.chain().focus().toggleHighlight().run(), active: (e) => e.isActive('highlight') },
-  { name: 'subscript', label: t('richtext.subscript'), icon: 'subscript', run: (e) => e.chain().focus().toggleSubscript().run(), active: (e) => e.isActive('subscript') },
-  { name: 'superscript', label: t('richtext.superscript'), icon: 'superscript', run: (e) => e.chain().focus().toggleSuperscript().run(), active: (e) => e.isActive('superscript') },
-])
-const BLOCKS = computed((): Item[] => [
-  { name: 'bulletList', label: t('richtext.bulletList'), icon: 'list', run: (e) => e.chain().focus().toggleBulletList().run(), active: (e) => e.isActive('bulletList') },
-  { name: 'orderedList', label: t('richtext.orderedList'), icon: 'list-ordered', run: (e) => e.chain().focus().toggleOrderedList().run(), active: (e) => e.isActive('orderedList') },
-  { name: 'blockquote', label: t('richtext.blockquote'), icon: 'quote', run: (e) => e.chain().focus().toggleBlockquote().run(), active: (e) => e.isActive('blockquote') },
-  { name: 'codeBlock', label: t('richtext.codeBlock'), icon: 'square-code', run: (e) => e.chain().focus().toggleCodeBlock().run(), active: (e) => e.isActive('codeBlock') },
-  { name: 'horizontalRule', label: t('richtext.horizontalRule'), icon: 'minus', run: (e) => e.chain().focus().setHorizontalRule().run() },
-])
-const ALIGN = computed((): Item[] => [
-  { name: 'left', label: t('richtext.alignLeft'), icon: 'align-left', run: (e) => e.chain().focus().setTextAlign('left').run(), active: (e) => e.isActive({ textAlign: 'left' }) },
-  { name: 'center', label: t('richtext.alignCenter'), icon: 'align-center', run: (e) => e.chain().focus().setTextAlign('center').run(), active: (e) => e.isActive({ textAlign: 'center' }) },
-  { name: 'right', label: t('richtext.alignRight'), icon: 'align-right', run: (e) => e.chain().focus().setTextAlign('right').run(), active: (e) => e.isActive({ textAlign: 'right' }) },
-  { name: 'justify', label: t('richtext.justify'), icon: 'align-justify', run: (e) => e.chain().focus().setTextAlign('justify').run(), active: (e) => e.isActive({ textAlign: 'justify' }) },
-])
-const EXTRA = computed((): Item[] => [
-  { name: 'clear', label: t('richtext.clearFormatting'), icon: 'eraser', run: (e) => e.chain().focus().unsetAllMarks().clearNodes().run() },
-  { name: 'undo', label: t('richtext.undo'), icon: 'undo', run: (e) => e.chain().focus().undo().run(), disabled: (e) => !e.can().undo() },
-  { name: 'redo', label: t('richtext.redo'), icon: 'redo', run: (e) => e.chain().focus().redo().run(), disabled: (e) => !e.can().redo() },
-])
-
-const BLOCK_OPTIONS = computed(() => [
-  { label: t('richtext.paragraph'), value: 'p' },
-  { label: t('richtext.heading1'), value: 'h1' }, { label: t('richtext.heading2'), value: 'h2' }, { label: t('richtext.heading3'), value: 'h3' },
-  { label: t('richtext.heading4'), value: 'h4' }, { label: t('richtext.heading5'), value: 'h5' }, { label: t('richtext.heading6'), value: 'h6' },
-])
-
-// Re-render the toolbar on every editor transaction so active/disabled states stay live.
-const tick = ref(0)
-watch(() => props.editor, (editor, _old, onCleanup) => {
-  if (!editor) return
-  const bump = () => { tick.value++ }
-  editor.on('transaction', bump)
-  onCleanup(() => { editor.off('transaction', bump) })
-}, { immediate: true })
-
-const blockValue = computed(() => {
-  void tick.value
-  const e = props.editor
-  if (!e) return 'p'
-  for (let l = 1; l <= 6; l++) if (e.isActive('heading', { level: l })) return `h${l}`
-  return 'p'
-})
-function onBlock(v: string | null | undefined) {
-  const e = props.editor
-  if (!e || !v) return
-  if (v === 'p') e.chain().focus().setParagraph().run()
-  else e.chain().focus().toggleHeading({ level: Number(v[1]) as 1 | 2 | 3 | 4 | 5 | 6 }).run()
-}
-
-const linkOpen = ref(false)
-const linkUrl = ref('')
-function toggleLink() {
-  const e = props.editor!
-  if (e.isActive('link')) { e.chain().focus().unsetLink().run(); return }
-  linkInternalOpen.value = false
-  linkUrl.value = (e.getAttributes('link').href as string) ?? ''
-  linkOpen.value = true
-}
-function applyLink() {
-  const e = props.editor!
-  const href = linkUrl.value.trim()
-  if (href) e.chain().focus().extendMarkRange('link').setLink({ href }).run()
-  linkOpen.value = false
-  linkUrl.value = ''
-}
-
-// Internal links: pick a record, store it as a `kestrel:<collection>:<id>` marker on a normal link
-// mark (resolved to the real localized path at read time / in the preview).
-const linkInternalOpen = ref(false)
-const pickCollection = ref<string | null>(null)
-const pickRecordId = ref<number | null>(null)
-function toggleInternalLink() {
-  linkOpen.value = false
-  const opening = !linkInternalOpen.value
-  linkInternalOpen.value = opening
-  if (!opening) return
-  // Prefill from the link under the cursor: an existing internal marker re-selects its record (the
-  // picker loads + highlights it); an external/absent link opens the picker blank.
-  const parsed = parseRichtextLinkHref(props.editor!.getAttributes('link').href as string | undefined)
-  pickCollection.value = parsed?.collection ?? null
-  pickRecordId.value = parsed?.id ?? null
-}
-function applyInternalLink() {
-  const e = props.editor!
-  if (pickCollection.value && pickRecordId.value != null) {
-    e.chain().focus().extendMarkRange('link').setLink({ href: richtextLinkHref(pickCollection.value, pickRecordId.value) }).run()
-  }
-  linkInternalOpen.value = false
-  pickCollection.value = null
-  pickRecordId.value = null
-}
-</script>
-
-<template>
-  <div v-if="editor" class="ui-rt-toolbar" :data-rev="tick">
-    <UiSelect
-      class="ui-rt-toolbar__block"
-      :model-value="blockValue"
-      :options="BLOCK_OPTIONS"
-      :aria-label="t('richtext.blockType')"
-      :disabled="disabled"
-      @update:model-value="onBlock"
-    />
-
-    <div class="ui-rt-toolbar__group">
-      <UiButton
-        v-for="item in MARKS" :key="item.name"
-        type="button" size="sm" variant="ghost"
-        :class="{ 'rt-on': item.active!(editor) }"
-        :aria-label="item.label"
-        :aria-pressed="item.active!(editor) ? 'true' : 'false'"
-        :disabled="disabled"
-        @click="item.run(editor)"
-      ><UiIcon :name="item.icon" :size="16" /></UiButton>
-    </div>
-
-    <div class="ui-rt-toolbar__group">
-      <UiButton
-        type="button" size="sm" variant="ghost"
-        :class="{ 'rt-on': editor.isActive('link') }"
-        :aria-label="t('richtext.link')"
-        :aria-pressed="editor.isActive('link') ? 'true' : 'false'"
-        :disabled="disabled"
-        @click="toggleLink"
-      ><UiIcon name="link" :size="16" /></UiButton>
-      <UiButton
-        type="button" size="sm" variant="ghost"
-        :class="{ 'rt-on': linkInternalOpen }"
-        :aria-label="t('richtext.linkInternal')"
-        :aria-pressed="linkInternalOpen ? 'true' : 'false'"
-        :disabled="disabled"
-        @click="toggleInternalLink"
-      ><UiIcon name="link-2" :size="16" /></UiButton>
-    </div>
-
-    <div class="ui-rt-toolbar__group">
-      <UiButton
-        v-for="item in BLOCKS" :key="item.name"
-        type="button" size="sm" variant="ghost"
-        :class="{ 'rt-on': item.active && item.active(editor) }"
-        :aria-label="item.label"
-        :aria-pressed="item.active ? (item.active(editor) ? 'true' : 'false') : undefined"
-        :disabled="disabled"
-        @click="item.run(editor)"
-      ><UiIcon :name="item.icon" :size="16" /></UiButton>
-    </div>
-
-    <div class="ui-rt-toolbar__group">
-      <UiButton
-        v-for="item in ALIGN" :key="item.name"
-        type="button" size="sm" variant="ghost"
-        :class="{ 'rt-on': item.active!(editor) }"
-        :aria-label="item.label"
-        :aria-pressed="item.active!(editor) ? 'true' : 'false'"
-        :disabled="disabled"
-        @click="item.run(editor)"
-      ><UiIcon :name="item.icon" :size="16" /></UiButton>
-    </div>
-
-    <div class="ui-rt-toolbar__group">
-      <UiButton
-        v-for="item in EXTRA" :key="item.name"
-        type="button" size="sm" variant="ghost"
-        :aria-label="item.label"
-        :disabled="disabled || (item.disabled ? item.disabled(editor) : false)"
-        @click="item.run(editor)"
-      ><UiIcon :name="item.icon" :size="16" /></UiButton>
-    </div>
-
-    <div v-if="linkOpen" class="ui-rt-toolbar__link">
-      <UiTextInput v-model="linkUrl" type="url" :placeholder="t('richtext.urlPlaceholder')" :aria-label="t('richtext.linkUrl')" @keydown.enter.prevent="applyLink" />
-      <UiButton type="button" size="sm" variant="primary" @click="applyLink">{{ t('richtext.apply') }}</UiButton>
-    </div>
-
-    <div v-if="linkInternalOpen" class="ui-rt-toolbar__link">
-      <LinkInternalPicker v-model:collection="pickCollection" v-model:record-id="pickRecordId" :locale="locale ?? 'en'" />
-      <UiButton type="button" size="sm" variant="primary" :disabled="pickRecordId == null" @click="applyInternalLink">{{ t('richtext.apply') }}</UiButton>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.ui-rt-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2);
-  border-bottom: 1px solid var(--color-border);
-
-  &__group {
-    display: inline-flex;
-    gap: var(--space-1);
-  }
-  &__block {
-    width: auto;
-    min-width: 8rem;
-  }
-  &__link {
-    display: flex;
-    gap: var(--space-2);
-    flex-basis: 100%;
-    align-items: center;
-  }
-
-  &__group .ui-button.rt-on {
-    background: var(--color-active, var(--color-surface-2));
-    color: var(--color-text);
-
-    &:hover:not(:disabled) {
-      background: var(--color-active, var(--color-surface-2));
-    }
-    .ui-icon {
-      color: var(--color-primary);
-    }
-  }
-}
-</style>

package/layers/ui/app/components/ui/Select.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import UiIcon from './Icon.vue'
-
-defineOptions({ inheritAttrs: false })
-
-withDefaults(
-  defineProps<{
-    options: { label: string; value: string }[]
-    placeholder?: string
-    disabled?: boolean
-  }>(),
-  { disabled: false },
-)
-
-const model = defineModel<string | null>()
-</script>
-
-<template>
-  <span class="ui-select">
-    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -- id/label land via v-bind="$attrs" from the wrapping UiField, invisible to static analysis -->
-    <select v-model="model" :disabled="disabled" class="ui-select__field" v-bind="$attrs">
-      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
-      <option v-for="o in options" :key="o.value" :value="o.value">{{ o.label }}</option>
-    </select>
-    <UiIcon name="chevron-down" :size="14" class="ui-select__icon" />
-  </span>
-</template>
-
-<style lang="scss">
-@use '../../assets/scss/mixins';
-
-.ui-select {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-.ui-select__field {
-  @include mixins.input-base;
-  width: 100%;
-  appearance: none;
-  // leave room for the overlaid chevron so long values don't run under it
-  padding-right: calc(var(--space-3) + 1.25rem);
-}
-.ui-select__icon {
-  position: absolute;
-  top: 50%;
-  right: var(--space-3);
-  transform: translateY(-50%);
-  pointer-events: none; // clicks fall through to the native select
-  color: var(--color-text-muted);
-}
-</style>