@globalbrain/sefirot 4.57.0 → 4.59.0

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

@@ -63,9 +63,6 @@ export interface Props {
   // Whether to show advanced filters.
   canFilter?: boolean
 
-  // Whether to show advanced sorting options.
-  canSort?: boolean
-
   // Whether to hide the condition blocks.
   hideConditions?: boolean
 
@@ -129,12 +126,16 @@ export interface Props {
   // setup, so toggling it afterwards has no effect.
   urlSync?: boolean
 
-  // Enable CRUD editing for the catalog. When set, fields the backend
-  // marks `showOnUpdate` become inline-editable, clicking a row's id cell
-  // opens the record sheet (view + per-field edit + delete), and the
-  // `openCreate()` method / sheet create mode become available. The CRUD
-  // endpoints are derived from `endpoint` by replacing the trailing
-  // `/search` with `/update`, `/create`, and `/delete`.
+  // Enable CRUD editing for the catalog.
+  //
+  // Every catalog already renders a **read-only detail sheet**: clicking a
+  // row's index-field cell opens the record for viewing (each `showOnDetail`
+  // field, read-only). `editable` builds on that same sheet. When set, fields
+  // the backend marks `showOnUpdate` become inline-editable in the table, the
+  // sheet gains per-field editing and a delete button, and the `openCreate()`
+  // method / sheet create mode become available. The CRUD endpoints are derived
+  // from `endpoint` by replacing the trailing `/search` with `/update`,
+  // `/create`, and `/delete`.
   //
   // The row identifier (`indexField`, defaulting to `id`) is never
   // inline- or sheet-editable on an existing row: optimistically changing
@@ -142,27 +143,28 @@ export interface Props {
   // follow-up save/delete would address the not-yet-synced new id. It can
   // still be set on creation (via a `showOnCreate` field).
   //
-  // An editable catalog must keep its index field among the rendered columns,
-  // because the row's sheet opener — and therefore the only way to view or
-  // delete a record — is the index-field cell. The default `id` identifier is
-  // kept when `select` is empty (server defaults), so that case works as-is; a
-  // *custom* `indexField`, however, must be listed in `select` explicitly (an
-  // empty/default `select` drops it from the rendered columns, leaving the rows
-  // with no opener).
+  // The sheet opener — and therefore the only way to view, edit, or delete a
+  // record — is the index-field cell, so that field must be a rendered column.
+  // The default `id` identifier is kept when `select` is empty (server
+  // defaults), so that case works as-is; a *custom* `indexField`, or `id`
+  // alongside an explicit `select`, must be listed in `select` explicitly (an
+  // empty/default `select` otherwise drops it, leaving the rows with no opener).
   //
   // Turning this on also enables `creatable`, `deletable`, and `inlineEditable`
   // by default; pass `false` to any of them to opt out.
   //
   // Pass a predicate `(record) => boolean` instead of `true` to allow editing
   // only some rows (e.g. from a per-record policy): the inline affordance and
-  // the sheet's per-field edit are hidden for the rows it rejects.
+  // the sheet's per-field edit are hidden for the rows it rejects (the sheet
+  // still opens read-only).
   editable?: boolean | ((record: Record<string, any>) => boolean)
 
   // Whether records can be deleted from the sheet. Defaults to enabled for an
   // editable catalog. Pass `false` to hide the delete button entirely, or a
   // predicate `(record) => boolean` to allow deleting only some rows (e.g. from
-  // a per-record policy). Delete is reachable only through the sheet, so this
-  // has no effect unless the catalog is `editable`.
+  // a per-record policy). The delete button lives in the record sheet — which
+  // opens for read-only viewing on any catalog — but stays gated behind edit
+  // permission, so this has no effect unless the catalog is `editable`.
   deletable?: boolean | ((record: Record<string, any>) => boolean)
 
   // Whether new records can be created (enables create mode in the sheet and
@@ -182,7 +184,6 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   canFilter: true,
-  canSort: true,
   // Default these on so an editable catalog gets create / delete / inline edit
   // without opting in to each. A boolean prop can't tell "omitted" from `false`
   // (Vue casts an absent boolean to `false`), so they default on here and the
@@ -623,7 +624,8 @@ const tableIndexField = computed(() => {
 // address each row; when no `indexField` is configured the identifier
 // defaults to `id`. When the caller has no concrete select list, nothing
 // is added either — leaving the request empty lets the server use its own
-// defaults. See `indexField` prop docs above.
+// defaults (which include `id`, so the read-only sheet still opens). See
+// `indexField` prop docs above.
 function withIndexField(fields: string[]): string[] {
   if (fields.length === 0) { return [] }
   const field = props.indexField ?? (props.editable ? 'id' : null)
@@ -1029,6 +1031,19 @@ async function refreshCatalog(): Promise<void> {
   await forceRefresh()
 }
 
+// Close an open *view* sheet when the effective identifier itself changes (an
+// async `indexField` resolving from the `id` default to `slug`, say): the open
+// record was keyed under the old field and can't be re-matched to the new one
+// (its row lacks the new key, so `resolveId` would be `undefined`), which would
+// let a delete/save act on the wrong — or no — id. Watched on `idField` alone,
+// not the editable-gated source below: that source can't tell an identifier
+// change from `editable` merely switching on when both happen in the same flush,
+// and `editable` flipping on with the identifier unchanged must leave an open
+// read-only sheet alone (viewing is the default; its record is still valid).
+watch(idField, () => {
+  if (sheet.state.value && sheetMode.value === 'view') { sheet.off() }
+})
+
 // When the effective row identifier appears or changes while editing is enabled,
 // the loaded rows won't carry it until a refetch runs — so refetch here. Two
 // cases: `editable` resolving true after mount (async permissions), so
@@ -1037,16 +1052,10 @@ async function refreshCatalog(): Promise<void> {
 // identifier, `rowsCarryIndexField` keeps editing gated off, and selection keys
 // go `undefined` until an unrelated query change. A no-op when the identifier was
 // already present (same request input → cached result reused).
-//
-// Close an open record sheet first: it was identified under the old field and
-// can't be reliably re-matched to the new one (its row lacks the new key, so
-// `resolveId` would be `undefined`), which would let a delete/save act on the
-// wrong — or no — id during and after the refetch.
 watch(
   () => (props.editable ? idField.value : null),
   (field, prev) => {
     if (!field || field === prev) { return }
-    if (sheet.state.value && sheetMode.value === 'view') { sheet.off() }
     // Supersede any search still in flight under the previous identifier state: it
     // was issued before the new id/index field, so its rows won't carry the new
     // key. If it resolved after this refetch it would assign those id-less rows
@@ -1468,14 +1477,24 @@ function editEnabled(): boolean {
   return !!props.editable && rowsCarryIndexField.value
 }
 
+// Catalog-level sheet gate: the read-only detail sheet is reachable on any
+// catalog — viewing is the default — as soon as the rows carry the index field
+// the opener resolves an id from. Editing, create, and delete stay gated on
+// `editable` (via `canEdit` / `canDelete` / the `creatable` getter), so a
+// non-editable catalog opens the same sheet read-only.
+function viewEnabled(): boolean {
+  return rowsCarryIndexField.value
+}
+
 // Per-record refinement: a predicate `editable`/`deletable` decides each row, a
 // boolean applies to all.
 function canEdit(record: Record<string, any>): boolean {
   return editEnabled() && (typeof props.editable === 'function' ? props.editable(record) : true)
 }
 
-// Delete is a stronger action than edit and rides the same editable sheet, so a
-// row must be editable before it can be deleted — building on `canEdit` makes a
+// Delete is a stronger action than edit and lives in the record sheet (whose
+// delete button only renders when editable), so a row must be editable before it
+// can be deleted — building on `canEdit` makes a
 // per-record `editable` predicate gate delete too (a row it rejects is never
 // deletable). `deletable` then refines further: on unless explicitly `false`, or
 // its own per-record predicate.
@@ -1486,13 +1505,18 @@ function canDelete(record: Record<string, any>): boolean {
 provideLensEdit({
   // Getters so the injected context tracks prop changes after mount (e.g.
   // permissions resolving async, or a flag toggling `editable` off): LensTable
-  // gates inline editing and the id-cell sheet on `edit.editable`.
+  // gates inline editing on `edit.editable` and the id-cell sheet opener on the
+  // broader `edit.viewable`.
   //
   // Also gated on `rowsCarryIndexField`: when `editable` flips true after mount we
   // trigger a refetch to pull in the identifier, but it lands asynchronously —
   // keep editing off until the rows actually carry it, so a save in that window
   // can't `resolveId()` to `undefined`.
   get editable() { return editEnabled() },
+  // `LensTable` gates the id-cell sheet opener on this: the read-only sheet is
+  // reachable on any catalog once the rows carry the index field, independent of
+  // `editable`.
+  get viewable() { return viewEnabled() },
   get creatable() { return !!props.editable && props.creatable },
   // Use the same `__no_entity__` fallback as the search / CRUD requests so slot
   // side-channel saves (which read this) target the same entity, not an empty one.
@@ -1575,7 +1599,6 @@ defineExpose({
         :selected
         :show-query="!!(queryKeys && queryKeys.length > 0)"
         :show-filters="canFilter"
-        :show-sort="canSort"
         :is-condition-active="!hideConditions"
         :is-condition-disabled="!hasConditions"
         @search="onQuery"
@@ -1696,7 +1719,7 @@ defineExpose({
     </SModal>
 
     <LensSheet
-      v-if="editable && result?.fields"
+      v-if="(editable || rowsCarryIndexField) && result?.fields"
       :open="sheet.state.value"
       :mode="sheetMode"
       :entity="entityName"

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

@@ -2,10 +2,11 @@
 import IconTrash from '~icons/ph/trash'
 import { type Ref, computed, markRaw, ref, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
-import SInputDropdown, { type Option } from '../../../components/SInputDropdown.vue'
+import SInputDropdown from '../../../components/SInputDropdown.vue'
 import SSpinner from '../../../components/SSpinner.vue'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
+import { type Option } from '../../../support/InputDropdown'
 import { required } from '../../../validation/rules'
 import { type FieldData } from '../FieldData'
 import { type FilterOperator, FilterOperatorLabelDict } from '../FilterOperator'

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

@@ -2,9 +2,9 @@
 import IconPlusCircle from '~icons/ph/plus-circle'
 import IconTrash from '~icons/ph/trash'
 import SButton from '../../../components/SButton.vue'
-import { type Option } from '../../../components/SInputDropdown.vue'
 import SInputSegments from '../../../components/SInputSegments.vue'
 import { useTrans } from '../../../composables/Lang'
+import { type Option } from '../../../support/InputDropdown'
 import { type FieldData } from '../FieldData'
 import LensFormFilterCondition, { type FilterCondition } from './LensFormFilterCondition.vue'
 

package/lib/blocks/lens/components/{LensAvatarInput.vue → LensInputAvatar.vue}

@@ -3,7 +3,7 @@ import SInputImage, { type ImageType, type Size } from '../../../components/SInp
 import { useTrans } from '../../../composables/Lang'
 import { type Validatable } from '../../../composables/Validation'
 
-withDefaults(defineProps<{
+export interface Props {
   label?: string
   help?: string
   accept?: string
@@ -11,7 +11,9 @@ withDefaults(defineProps<{
   size?: Size
   disabled?: boolean
   validation?: Validatable
-}>(), {
+}
+
+withDefaults(defineProps<Props>(), {
   imageType: 'circle',
   size: 'small'
 })
@@ -30,7 +32,7 @@ const { t } = useTrans({
 <template>
   <SInputImage
     v-model="model"
-    class="LensAvatarInput"
+    class="LensInputAvatar"
     :label
     :help
     :accept

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

@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T, Multiple extends boolean = false">
+import SInputAsyncDropdown from '../../../components/SInputAsyncDropdown.vue'
+import { useMutation } from '../../../composables/Api'
+import { useLang } from '../../../composables/Lang'
+import { type Option } from '../../../support/InputDropdown'
+import { type LensQuerySettings, type LensQuerySort } from '../LensQuery'
+import { isAuthError } from '../validation/ServerErrors'
+
+// A lens-backed search-select that works entirely in the consumer's own model
+// type. It searches the server as the user types (via SInputAsyncDropdown): each
+// result row is turned into a model by `toModel`, and each model is rendered as
+// its dropdown/chip option by `toOption`. The v-model is those models — a `T[]`
+// when `multiple`, otherwise `T | null`.
+//
+// Remaining selection UI props (nullable, disabled, placeholder, size, label,
+// validation, position, closeOnSelect, debounce, …) fall through as attributes.
+export interface Props<T = any, Multiple extends boolean = false> {
+  // The lens search endpoint (e.g. `/api/admin/lens/search`).
+  endpoint: string
+
+  // The entity to search.
+  entity: string
+
+  // Columns to fetch for each row, passed to `toModel`.
+  select: string[]
+
+  // Columns matched against the typed query — OR-ed together with `contains`. An
+  // empty query fetches the initial (unfiltered) page. Named to match
+  // LensCatalog's `queryKeys`.
+  queryKeys: string[]
+
+  // Sort applied to the results (e.g. `[['name', 'asc']]`). Re-read on each fetch,
+  // so a locale-dependent sort stays current.
+  sort?: LensQuerySort[]
+
+  // Page size of each search. The server enforces its own perPage ceiling.
+  perPage?: number
+
+  // Per-request settings (e.g. language). Usually unneeded — the server
+  // negotiates language from the request headers.
+  settings?: LensQuerySettings
+
+  // Whether multiple models can be selected. Typed `boolean & Multiple` (equal to
+  // `Multiple`) so Vue keeps runtime Boolean casting for a bare `multiple` while
+  // `Multiple` still drives the arity-conditional model type. See SInputAsyncDropdown.
+  multiple?: boolean & Multiple
+
+  // Build a model from a raw result row.
+  toModel: (row: Record<string, any>) => T
+
+  // Render a model as its dropdown/chip option (`value` is the identity).
+  toOption: (item: T) => Option
+}
+
+const props = defineProps<Props<T, Multiple>>()
+
+// The selected model(s): a `T[]` when `multiple`, otherwise `T | null`.
+const model = defineModel<Multiple extends true ? T[] : T | null>({ required: true })
+
+// Don't let lens-config attributes leak onto the child; only the explicitly
+// forwarded selection props (via `$attrs`) should.
+defineOptions({ inheritAttrs: false })
+
+// Default the request language to the active app language (like LensCatalog), so
+// server-localized fields come back in the right locale even when HttpConfig /
+// request headers differ; explicit `settings` (incl. `lang`) overrides it.
+const lang = useLang()
+
+const { execute } = useMutation((http, query: string) =>
+  http.post<{ data: Record<string, any>[] }>(props.endpoint, {
+    entity: props.entity,
+    select: props.select,
+    filters: query
+      ? [['$or', props.queryKeys.map((key) => [key, 'contains', query])]]
+      : [],
+    sort: props.sort ?? [],
+    page: 1,
+    perPage: props.perPage ?? 25,
+    settings: { lang, ...props.settings }
+  })
+)
+
+// Read every config field through `props` at call time so a reactive change (e.g.
+// a locale-dependent sort or label) takes effect on the next search.
+async function fetch(query: string): Promise<T[]> {
+  const res = await execute(query)
+  return res.data.map(props.toModel)
+}
+</script>
+
+<template>
+  <SInputAsyncDropdown
+    v-model="model"
+    :fetch
+    :to-option
+    :multiple
+    :rethrow="isAuthError"
+    v-bind="$attrs"
+  >
+    <template v-if="$slots.info" #info><slot name="info" /></template>
+  </SInputAsyncDropdown>
+</template>

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

@@ -8,7 +8,7 @@ import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { type AvatarField } from '../fields/AvatarField'
 import { type Field } from '../fields/Field'
-import LensAvatarInput from './LensAvatarInput.vue'
+import LensInputAvatar from './LensInputAvatar.vue'
 
 const props = defineProps<{
   field: Field<FieldData>
@@ -116,7 +116,7 @@ async function onChange(value: File | string | null | undefined) {
     <SDataListItem v-if="editable">
       <template #label>{{ field.label() }}</template>
       <template #value>
-        <LensAvatarInput
+        <LensInputAvatar
           :model-value="model"
           :accept="avatarField.accept()"
           :image-type="avatarField.imageType()"

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

@@ -117,11 +117,14 @@ const columns = computedAsync(async () => {
 
     const column = field.tableColumn()
 
-    // When editing is enabled, clicking the row-identifier cell opens the record
-    // sheet (view + per-field edit + delete) instead of following a link. Keyed
-    // off the configured index field for any field type — a slug/code identifier
-    // opens the sheet just like an `id` — so other id-type columns (e.g. a
-    // `company_id` reference link) keep their own navigation.
+    // The detail sheet is reachable on any catalog once the rows carry the index
+    // field (`edit.viewable`) — viewing is the default; `editable` only adds the
+    // per-field edit / delete affordances inside it. So clicking the row-identifier
+    // cell opens the record sheet (read-only, or editable when the catalog is)
+    // instead of following a link. Keyed off the configured index field for any
+    // field type — a slug/code identifier opens the sheet just like an `id` — so
+    // other id-type columns (e.g. a `company_id` reference link) keep their own
+    // navigation.
     //
     // Exception: an `id` field whose server value carries a `path` renders that
     // path as a link; respect it so those rows navigate to the details page instead
@@ -130,7 +133,7 @@ const columns = computedAsync(async () => {
     // a `link` / `slack_message` identifier) is still turned into the sheet opener,
     // as is a column whose `cell` is undefined (falls straight through to the opener).
     if (
-      edit?.editable
+      edit?.viewable
       && key === edit.indexField
     ) {
       const original = column.cell

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

@@ -424,9 +424,9 @@ function onEditorKeydown(event: KeyboardEvent) {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid var(--c-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: var(--c-bg-1);
   box-shadow: var(--shadow-depth-3);
 }

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

@@ -4,11 +4,12 @@ import { useElementBounding } from '@vueuse/core'
 import { computed, nextTick, onUnmounted, ref, shallowRef, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
 import SLink from '../../../components/SLink.vue'
-import SPill, { type Mode as PillMode } from '../../../components/SPill.vue'
-import SState, { type Mode as StateMode } from '../../../components/SState.vue'
+import SPill from '../../../components/SPill.vue'
+import SState from '../../../components/SState.vue'
 import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
+import { type ColorMode } from '../../../support/Color'
 import { day } from '../../../support/Day'
 import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
@@ -75,7 +76,7 @@ const resolvedCell = computed<any>(() => {
 
 // A `pills` cell (e.g. a multi-select with displayAs: 'pills') renders as pills
 // rather than text, mirroring the read-only `STableCellPills` column.
-const displayPills = computed<{ label: string; color?: PillMode }[] | null>(() => {
+const displayPills = computed<{ label: string; color?: ColorMode }[] | null>(() => {
   const cell = resolvedCell.value
   return cell && cell.type === 'pills' ? cell.pills : null
 })
@@ -83,7 +84,7 @@ const displayPills = computed<{ label: string; color?: PillMode }[] | null>(() =
 // A `state` cell (e.g. a select with displayAs: 'state') renders as a status
 // badge rather than its bare label, mirroring the read-only `STableCellState`
 // column.
-const displayState = computed<{ label: string; mode?: StateMode } | null>(() => {
+const displayState = computed<{ label: string; mode?: ColorMode } | null>(() => {
   const cell = resolvedCell.value
   return cell && cell.type === 'state' ? { label: cell.label, mode: cell.mode } : null
 })
@@ -146,7 +147,7 @@ const { validation, validate, reset } = useValidation(
 
 const editorStyle = computed(() => ({
   ...inset.value,
-  width: `${Math.max(bounds.width.value, 240)}px`
+  width: `${Math.max(bounds.width.value, 224)}px`
 }))
 
 function start() {
@@ -351,9 +352,9 @@ function onEditorKeydown(event: KeyboardEvent) {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid var(--c-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: var(--c-bg-1);
   box-shadow: var(--shadow-depth-3);
 }

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

@@ -10,6 +10,15 @@ export interface LensEditContext {
   /** Whether the catalog has editing enabled at all. */
   editable: boolean
 
+  /**
+   * Whether the detail sheet is reachable. Viewing is the default: true on any
+   * catalog once the rows carry the index field the opener resolves an id from,
+   * independent of `editable`. The index-field cell opens the sheet on this gate,
+   * while the mutation affordances inside stay gated on `canEdit` / `canDelete` /
+   * `creatable`, so a non-editable catalog opens a read-only sheet.
+   */
+  viewable: boolean
+
   /** Whether new records may be created. */
   creatable: boolean
 

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

@@ -3,7 +3,7 @@ import SAvatar from '../../../components/SAvatar.vue'
 import { type TableCell } from '../../../composables/Table'
 import { type AvatarFieldData } from '../FieldData'
 import { type FilterOperator } from '../FilterOperator'
-import LensAvatarInput from '../components/LensAvatarInput.vue'
+import LensInputAvatar from '../components/LensInputAvatar.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import { Field } from './Field'
 
@@ -62,7 +62,7 @@ export class AvatarField extends Field<AvatarFieldData> {
 
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
-      return () => h(LensAvatarInput, {
+      return () => h(LensInputAvatar, {
         'label': this.formInputLabel(),
         'help': this.help() || undefined,
         'accept': this.accept(),

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

@@ -50,9 +50,11 @@ export abstract class Field<T extends FieldData> {
    * on the current app language.
    */
   placeholder(): string | null {
-    return this.ctx.lang === 'ja'
-      ? (this.data as any).placeholderJa ?? null
-      : (this.data as any).placeholderEn ?? null
+    return this.ctx.lang === 'ja' && 'placeholderJa' in this.data
+      ? this.data.placeholderJa ?? null
+      : this.ctx.lang === 'en' && 'placeholderEn' in this.data
+        ? this.data.placeholderEn ?? null
+        : null
   }
 
   /**
@@ -60,9 +62,11 @@ export abstract class Field<T extends FieldData> {
    * on the current app language.
    */
   help(): string | null {
-    return this.ctx.lang === 'ja'
-      ? (this.data as any).helpJa ?? null
-      : (this.data as any).helpEn ?? null
+    return this.ctx.lang === 'ja' && 'helpJa' in this.data
+      ? this.data.helpJa ?? null
+      : this.ctx.lang === 'en' && 'helpEn' in this.data
+        ? this.data.helpEn ?? null
+        : null
   }
 
   /**

package/lib/blocks/lens/filter-inputs/SelectFilterInput.ts

@@ -1,6 +1,7 @@
 import { type ValidationArgs } from '@vuelidate/core'
 import { defineAsyncComponent } from 'vue'
-import SInputDropdown, { type Option } from '../../../components/SInputDropdown.vue'
+import SInputDropdown from '../../../components/SInputDropdown.vue'
+import { type Option } from '../../../support/InputDropdown'
 import { required } from '../../../validation/rules'
 import { isAuthError } from '../validation/ServerErrors'
 import { FilterInput } from './FilterInput'

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 { type ColorMode } from '../support/Color'
 import SFragment from './SFragment.vue'
 import SLink from './SLink.vue'
 import SSpinner from './SSpinner.vue'
@@ -20,16 +21,7 @@ export type Size =
 
 export type Type = 'fill' | 'outline' | 'text'
 
-export type Mode =
-  | 'default'
-  | 'mute'
-  | 'neutral'
-  | 'white'
-  | 'black'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
+export type Mode = ColorMode | 'white' | 'black'
 
 export interface Tooltip {
   tag?: Component | string

package/lib/components/SControlInputSearch.vue

@@ -4,9 +4,10 @@ import { type Component, computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
-import SInputText, { type Align, type TextColor } from './SInputText.vue'
+import { type Align, type TextColor } from '../support/InputText'
+import SInputText from './SInputText.vue'
 
-const props = defineProps<{
+export interface Props {
   placeholder?: string
   unitAfter?: Component | string
   textColor?: TextColor | ((value: string | null) => TextColor)
@@ -16,7 +17,9 @@ const props = defineProps<{
   modelValue?: string | null
   displayValue?: string | null
   validation?: Validatable
-}>()
+}
+
+const props = defineProps<Props>()
 
 defineEmits<{
   'update:model-value': [value: string | null]

package/lib/components/SDescPill.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type ColorMode } from '../support/Color'
 import SDescEmpty from './SDescEmpty.vue'
-import SPill, { type Mode } from './SPill.vue'
+import SPill from './SPill.vue'
 
 export interface Pill {
-  mode?: Mode
+  mode?: ColorMode
   label: string
 }
 

package/lib/components/SDescState.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { type ColorMode } from '../support/Color'
 import SDescEmpty from './SDescEmpty.vue'
-import SState, { type Mode } from './SState.vue'
+import SState from './SState.vue'
 
 export interface State {
-  mode?: Mode
+  mode?: ColorMode
   label: string
 }
 

package/lib/components/SInputAddon.vue

@@ -9,14 +9,16 @@ import {
 import { useFlyout } from '../composables/Flyout'
 import SDropdown from './SDropdown.vue'
 
-const props = withDefaults(defineProps<{
+export interface Props {
   label?: Component | string
   clickable?: boolean
   dropdown?: DropdownSection[]
   dropdownCaret?: boolean
   dropdownPosition?: 'top' | 'bottom'
   disabled?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   clickable: true,
   dropdown: () => [],
   dropdownCaret: true