@open-mercato/ui 0.6.8-develop.7100.1.fbf66fca35 → 0.7.0

package/src/backend/__tests__/NotesSection.test.tsx

@@ -7,33 +7,6 @@ import { NotesSection, type NotesDataAdapter } from '../detail/NotesSection'
 import { dismissRecordConflict, getRecordConflictForTest } from '../conflicts'
 import { OPTIMISTIC_LOCK_CONFLICT_CODE } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
 
-const createDataAdapter = (): NotesDataAdapter => ({
-  list: jest.fn(async () => [
-    {
-      id: 'note-1',
-      body: 'Existing note',
-      createdAt: '2026-04-10T08:00:00.000Z',
-      authorName: 'Ada Lovelace',
-    },
-  ]),
-  create: jest.fn(async () => ({ id: 'note-2' })),
-  update: jest.fn(async () => undefined),
-  delete: jest.fn(async () => undefined),
-})
-
-const baseProps = (dataAdapter: NotesDataAdapter) => ({
-  entityId: 'person-1',
-  emptyLabel: '—',
-  viewerUserId: 'user-1',
-  viewerName: 'Ada Lovelace',
-  addActionLabel: 'Add note',
-  emptyState: {
-    title: 'No notes yet',
-    actionLabel: 'Add note',
-  },
-  dataAdapter,
-})
-
 describe('NotesSection', () => {
   beforeEach(() => {
     dismissRecordConflict()
@@ -198,68 +171,6 @@ describe('NotesSection', () => {
     })
   })
 
-  it('renders the markdown toggle and appearance controls by default', async () => {
-    const { container } = renderWithProviders(<NotesSection {...baseProps(createDataAdapter())} />)
-
-    await screen.findByText('Existing note')
-    expect(container.querySelectorAll('svg.lucide-palette').length).toBe(1)
-
-    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
-
-    await waitFor(() => {
-      expect(container.querySelector('button[aria-pressed]')).not.toBeNull()
-    })
-    expect(screen.getByRole('button', { name: 'Customize appearance' })).toBeTruthy()
-    expect(screen.queryByTestId('markdown-field')).toBeNull()
-  })
-
-  it('keeps the rich editor active and hides the toggle when forceMarkdown is set', async () => {
-    const { container } = renderWithProviders(
-      <NotesSection {...baseProps(createDataAdapter())} forceMarkdown />,
-    )
-
-    await screen.findByText('Existing note')
-    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
-
-    await waitFor(() => {
-      expect(screen.getByTestId('markdown-field')).toBeTruthy()
-    })
-    expect(container.querySelector('button[aria-pressed]')).toBeNull()
-  })
-
-  it('hides the toggle but honors the seeded preference when hideMarkdownToggle is set', async () => {
-    const { container } = renderWithProviders(
-      <NotesSection
-        {...baseProps(createDataAdapter())}
-        hideMarkdownToggle
-        readMarkdownPreference={() => true}
-      />,
-    )
-
-    await screen.findByText('Existing note')
-    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
-
-    await waitFor(() => {
-      expect(screen.getByTestId('markdown-field')).toBeTruthy()
-    })
-    expect(container.querySelector('button[aria-pressed]')).toBeNull()
-  })
-
-  it('removes every appearance affordance when disableAppearance is set', async () => {
-    const { container } = renderWithProviders(
-      <NotesSection {...baseProps(createDataAdapter())} disableAppearance />,
-    )
-
-    await screen.findByText('Existing note')
-    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
-
-    await waitFor(() => {
-      expect(container.querySelector('button[aria-pressed]')).not.toBeNull()
-    })
-    expect(screen.queryByRole('button', { name: 'Customize appearance' })).toBeNull()
-    expect(container.querySelectorAll('svg.lucide-palette').length).toBe(0)
-  })
-
   it('surfaces the unified conflict bar when a write fails with a 409', async () => {
     const conflict = {
       status: 409,

package/src/backend/detail/NotesSection.tsx

@@ -207,20 +207,7 @@ export type NotesSectionProps<C = unknown> = {
   iconSuggestions?: IconOption[]
   readMarkdownPreference?: () => boolean | null
   writeMarkdownPreference?: (value: boolean) => void
-  /** Force the plain textarea and hide the markdown toggle. Wins over `forceMarkdown`. */
   disableMarkdown?: boolean
-  /**
-   * Keep the rich markdown editor active for every note and hide the markdown toggle,
-   * so the editor shape cannot be switched. Ignored when `disableMarkdown` is set.
-   */
-  forceMarkdown?: boolean
-  /**
-   * Hide the markdown toggle without changing which editor renders — the seeded
-   * `readMarkdownPreference` value stays in effect. Implied by `forceMarkdown`.
-   */
-  hideMarkdownToggle?: boolean
-  /** Hide the appearance (icon/color) affordances: the palette buttons and the appearance dialog. */
-  disableAppearance?: boolean
 }
 
 export function sanitizeHexColor(value: string | null): string | null {
@@ -326,9 +313,6 @@ function NotesSectionImpl<C = unknown>({
   readMarkdownPreference,
   writeMarkdownPreference,
   disableMarkdown,
-  forceMarkdown,
-  hideMarkdownToggle,
-  disableAppearance,
 }: NotesSectionProps<C>) {
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const t = React.useMemo<Translator>(() => translator ?? ((key, fallback) => fallback ?? key), [translator])
@@ -464,16 +448,13 @@ function NotesSectionImpl<C = unknown>({
   const [draftIcon, setDraftIcon] = React.useState<string | null>(null)
   const [draftColor, setDraftColor] = React.useState<string | null>(null)
   const [isMarkdownEnabled, setIsMarkdownEnabled] = React.useState(false)
-  const isMarkdownActive = !disableMarkdown && (Boolean(forceMarkdown) || isMarkdownEnabled)
-  const showMarkdownToggle = !disableMarkdown && !forceMarkdown && !hideMarkdownToggle
-  const showAppearanceControls = !disableAppearance
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
   const formRef = React.useRef<HTMLFormElement | null>(null)
   const focusComposer = React.useCallback(() => {
     if (!hasEntity) return
     setComposerOpen(true)
     window.requestAnimationFrame(() => {
-      if (isMarkdownActive) {
+      if (isMarkdownEnabled) {
         const markdownTextarea = formRef.current?.querySelector('textarea')
         if (markdownTextarea instanceof HTMLTextAreaElement) {
           markdownTextarea.focus()
@@ -486,7 +467,7 @@ function NotesSectionImpl<C = unknown>({
       element.focus()
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })
     })
-  }, [formRef, hasEntity, isMarkdownActive])
+  }, [formRef, hasEntity, isMarkdownEnabled])
   const [appearanceDialogState, setAppearanceDialogState] = React.useState<
     | { mode: 'create'; icon: string | null; color: string | null }
     | { mode: 'edit'; noteId: string; icon: string | null; color: string | null }
@@ -603,7 +584,7 @@ function NotesSectionImpl<C = unknown>({
 
   React.useEffect(() => {
     adjustTextareaSize(textareaRef.current)
-  }, [adjustTextareaSize, draftBody, isMarkdownActive, composerOpen])
+  }, [adjustTextareaSize, draftBody, isMarkdownEnabled, composerOpen])
 
   React.useEffect(() => {
     const preference = readMarkdownPreference ? readMarkdownPreference() : null
@@ -1009,33 +990,31 @@ function NotesSectionImpl<C = unknown>({
             <div className="flex flex-wrap items-center justify-between gap-2">
               <h3 className="text-sm font-medium">{label('addLabel')}</h3>
               <div className="flex flex-wrap items-center gap-1">
-                {showAppearanceControls ? (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => {
-                      setAppearanceDialogError(null)
-                      setAppearanceDialogState({ mode: 'create', icon: draftIcon, color: draftColor })
-                    }}
-                    disabled={isSubmitting || isLoading || !hasEntity}
-                  >
-                    <span className="sr-only">{label('appearance.toggleOpen', 'Customize appearance')}</span>
-                    <Palette className="h-4 w-4" />
-                  </Button>
-                ) : null}
-                {showMarkdownToggle ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    setAppearanceDialogError(null)
+                    setAppearanceDialogState({ mode: 'create', icon: draftIcon, color: draftColor })
+                  }}
+                  disabled={isSubmitting || isLoading || !hasEntity}
+                >
+                  <span className="sr-only">{label('appearance.toggleOpen', 'Customize appearance')}</span>
+                  <Palette className="h-4 w-4" />
+                </Button>
+                {disableMarkdown ? null : (
                   <Button
                     type="button"
-                    variant={isMarkdownActive ? 'secondary' : 'ghost'}
+                    variant={isMarkdownEnabled ? 'secondary' : 'ghost'}
                     size="icon"
                     onClick={handleMarkdownToggle}
-                    aria-pressed={isMarkdownActive}
+                    aria-pressed={isMarkdownEnabled}
                     disabled={isSubmitting || isLoading}
                   >
                     <FileCode className="h-4 w-4" />
                   </Button>
-                ) : null}
+                )}
                 <Button
                   type="button"
                   size="sm"
@@ -1111,7 +1090,7 @@ function NotesSectionImpl<C = unknown>({
             <SwitchableMarkdownInput
               value={draftBody}
               onChange={setDraftBody}
-              isMarkdownEnabled={isMarkdownActive}
+              isMarkdownEnabled={isMarkdownEnabled}
               disableMarkdown={disableMarkdown}
               rows={1}
               placeholder={label('placeholder')}
@@ -1235,26 +1214,24 @@ function NotesSectionImpl<C = unknown>({
                     >
                       <Pencil className="h-4 w-4" />
                     </Button>
-                    {showAppearanceControls ? (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={(event) => {
-                          event.stopPropagation()
-                          setAppearanceDialogError(null)
-                          setAppearanceDialogState({
-                            mode: 'edit',
-                            noteId: note.id,
-                            icon: note.appearanceIcon ?? null,
-                            color: note.appearanceColor ?? null,
-                          })
-                        }}
-                        disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
-                      >
-                        {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
-                      </Button>
-                    ) : null}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        setAppearanceDialogError(null)
+                        setAppearanceDialogState({
+                          mode: 'edit',
+                          noteId: note.id,
+                          icon: note.appearanceIcon ?? null,
+                          color: note.appearanceColor ?? null,
+                        })
+                      }}
+                      disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
+                    >
+                      {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
+                    </Button>
                     <Button
                       type="button"
                       variant="ghost"
@@ -1280,7 +1257,7 @@ function NotesSectionImpl<C = unknown>({
                     <SwitchableMarkdownInput
                       value={contentEditor.value}
                       onChange={(nextValue) => setContentEditor((prev) => ({ ...prev, value: nextValue }))}
-                      isMarkdownEnabled={isMarkdownActive}
+                      isMarkdownEnabled={isMarkdownEnabled}
                       disableMarkdown={disableMarkdown}
                       rows={3}
                       textareaRef={contentTextareaRef}
@@ -1301,19 +1278,19 @@ function NotesSectionImpl<C = unknown>({
                           inlineLabel('saveShortcut')
                         )}
                       </Button>
-                      {showMarkdownToggle ? (
+                      {disableMarkdown ? null : (
                         <Button
                           type="button"
                           variant="ghost"
                           size="icon"
                           onClick={handleMarkdownToggle}
-                          aria-pressed={isMarkdownActive}
-                          className={isMarkdownActive ? 'text-primary' : undefined}
+                          aria-pressed={isMarkdownEnabled}
+                          className={isMarkdownEnabled ? 'text-primary' : undefined}
                           disabled={contentSavingId === note.id}
                         >
                           <FileCode className="h-4 w-4" />
                         </Button>
-                      ) : null}
+                      )}
                       <Button
                         type="button"
                         size="sm"
@@ -1363,31 +1340,29 @@ function NotesSectionImpl<C = unknown>({
           </div>
         )}
       </div>
-      {showAppearanceControls ? (
-        <AppearanceDialog
-          open={appearanceDialogOpen}
-          title={
-            appearanceDialogState?.mode === 'edit'
-              ? label('appearance.edit')
-              : label('appearance.toggleOpen', 'Customize appearance')
-          }
-          icon={appearanceDialogState?.icon ?? null}
-          color={appearanceDialogState?.color ?? null}
-          labels={noteAppearanceLabels}
-          iconSuggestions={iconSuggestions}
-          onIconChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, icon: value ?? null } : prev))}
-          onColorChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, color: value ?? null } : prev))}
-          onSubmit={() => {
-            void handleAppearanceDialogSubmit()
-          }}
-          onClose={handleAppearanceDialogClose}
-          isSaving={appearanceDialogSaving}
-          errorMessage={appearanceDialogError}
-          primaryLabel={appearanceDialogPrimaryLabel}
-          savingLabel={appearanceDialogSavingLabel}
-          cancelLabel={label('appearance.cancel')}
-        />
-      ) : null}
+      <AppearanceDialog
+        open={appearanceDialogOpen}
+        title={
+          appearanceDialogState?.mode === 'edit'
+            ? label('appearance.edit')
+            : label('appearance.toggleOpen', 'Customize appearance')
+        }
+        icon={appearanceDialogState?.icon ?? null}
+        color={appearanceDialogState?.color ?? null}
+        labels={noteAppearanceLabels}
+        iconSuggestions={iconSuggestions}
+        onIconChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, icon: value ?? null } : prev))}
+        onColorChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, color: value ?? null } : prev))}
+        onSubmit={() => {
+          void handleAppearanceDialogSubmit()
+        }}
+        onClose={handleAppearanceDialogClose}
+        isSaving={appearanceDialogSaving}
+        errorMessage={appearanceDialogError}
+        primaryLabel={appearanceDialogPrimaryLabel}
+        savingLabel={appearanceDialogSavingLabel}
+        cancelLabel={label('appearance.cancel')}
+      />
       {ConfirmDialogElement}
     </div>
   )

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -11,7 +11,6 @@ import {
   AlertTriangle,
   Apple,
   Archive,
-  AtSign,
   Award,
   BadgeCheck,
   Ban,
@@ -22,7 +21,6 @@ import {
   Bolt,
   Book,
   Bookmark,
-  Bot,
   Box,
   Boxes,
   Briefcase,
@@ -175,7 +173,6 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'alert-triangle': AlertTriangle,
   'apple': Apple,
   'archive': Archive,
-  'at-sign': AtSign,
   'award': Award,
   'badge-check': BadgeCheck,
   'ban': Ban,
@@ -186,7 +183,6 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'bolt': Bolt,
   'book': Book,
   'bookmark': Bookmark,
-  'bot': Bot,
   'box': Box,
   'boxes': Boxes,
   'briefcase': Briefcase,

package/src/backend/injection/useRegisteredComponent.tsx

@@ -40,30 +40,6 @@ type Resolution<TProps> = {
   replacementModule: string
 }
 
-/**
- * Calling a wrapper override returns a fresh component every time, which would
- * reintroduce the identity churn this hook exists to avoid. Memoizing per
- * (wrapper, wrapped component) pair keeps the composed component referentially
- * stable for as long as both inputs are.
- */
-const composedWrappers = new WeakMap<object, WeakMap<object, unknown>>()
-
-function applyWrapper<TProps>(
-  wrapper: (Original: ComponentType<TProps>) => ComponentType<TProps>,
-  Base: ComponentType<TProps>,
-): ComponentType<TProps> {
-  let byBase = composedWrappers.get(wrapper)
-  if (!byBase) {
-    byBase = new WeakMap<object, unknown>()
-    composedWrappers.set(wrapper, byBase)
-  }
-  const cached = byBase.get(Base)
-  if (cached) return cached as ComponentType<TProps>
-  const composed = wrapper(Base)
-  byBase.set(Base, composed)
-  return composed
-}
-
 function resolveComponent<TProps>(
   componentId: string,
   fallback: ComponentType<TProps> | undefined,
@@ -99,7 +75,7 @@ function resolveComponent<TProps>(
   }
 
   const base = replacement ?? original
-  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
 
   return {
     original,
@@ -111,9 +87,8 @@ function resolveComponent<TProps>(
 }
 
 /**
- * The returned component's identity must depend only on `componentId` — never
- * on the override registry, and never on the `fallback` a caller happens to
- * pass on this render.
+ * The returned component's identity must depend only on `componentId` and
+ * `fallback` — never on the override registry.
  *
  * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
  * imports the generated override module and hands the provider a fresh array,
@@ -128,32 +103,18 @@ function resolveComponent<TProps>(
  * carries no override for this id, `wrapped` keeps its previous identity and
  * React reconciles in place; only a genuine replacement or wrapper swaps the
  * rendered type, where a remount is the correct behaviour.
- *
- * The identity is held in a ref rather than a `useMemo`, because `useMemo` is a
- * performance hint React is free to discard, and identity here is a correctness
- * requirement rather than an optimisation. `fallback` is read through a ref for
- * the same reason: a host that builds its fallback inline would otherwise swap
- * the component this hook hands back on every render. That still cannot save a
- * subtree rendered *through* such a fallback — the fallback itself is then the
- * element type, and only the host can stabilise it — but it keeps the churn
- * from spreading to hosts whose id does resolve to a registered component.
  */
 export function useRegisteredComponent<TProps>(
   componentId: string,
   fallback?: ComponentType<TProps>,
 ): ComponentType<TProps> {
-  const fallbackRef = React.useRef<ComponentType<TProps> | undefined>(fallback)
-  fallbackRef.current = fallback
-
-  const registered = React.useRef<{ componentId: string; Component: ComponentType<TProps> } | null>(null)
-  if (!registered.current || registered.current.componentId !== componentId) {
+  return React.useMemo(() => {
     const Registered = (props: TProps) => {
       const userFeatures = useOverrideUserFeatures()
       const overrideRevision = useOverrideRegistryRevision()
-      const currentFallback = fallbackRef.current
       const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
-        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),
-        [currentFallback, overrideRevision, userFeatures],
+        () => resolveComponent<TProps>(componentId, fallback, userFeatures),
+        [overrideRevision, userFeatures],
       )
 
       if (!original || !wrapped) return null
@@ -184,10 +145,8 @@ export function useRegisteredComponent<TProps>(
     }
 
     Registered.displayName = `RegisteredComponent(${componentId})`
-    registered.current = { componentId, Component: Registered }
-  }
-
-  return registered.current.Component
+    return Registered
+  }, [componentId, fallback])
 }
 
 export default useRegisteredComponent

package/src/backend/inputs/ComboboxInput.tsx

@@ -100,10 +100,6 @@ export function ComboboxInput({
   const blurClosePendingRef = React.useRef(false)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
   const eagerFallbackLoadedValueRef = React.useRef<string | null>(null)
-  // Tracks whether the user actually typed into the field during the current focus
-  // session. `touched` cannot serve this purpose because it is set by `onFocus`,
-  // which `autoFocus` triggers before the user does anything at all.
-  const userTypedRef = React.useRef(false)
 
   const staticOptions = React.useMemo(
     () => normalizeOptions([...(seedOptions ?? []), ...(suggestions ?? [])]),
@@ -251,21 +247,12 @@ export function ComboboxInput({
   // including it would re-run the effect on every render when the prop is an inline function
   }, [value, disabled, knownLabelValues, coveredOptionValues, eagerResolveLabel, loadSuggestions])
 
-  // Sync input with a value that changed outside the component. A focused field is
-  // synced too, because `autoFocus` can focus the control before an async default value
-  // arrives and a focus-only guard then leaves the control rendering an empty label for
-  // a value the form has already committed. Two conditions still block the sync:
-  //   - the user is typing, so their query is never clobbered mid-keystroke;
-  //   - `optionMap` only holds the self-mapping placeholder it synthesises for an
-  //     uncovered value, which would paint the raw record id over a label the user just
-  //     picked (`asyncOptions` is replaced on every load, so any follow-up load that
-  //     misses the picked entry — a failed request, a debounce race, a composite label
-  //     the route's `?search=` cannot match — drops it back to the placeholder).
+  // Sync input with value when value changes externally and input is not focused.
   React.useEffect(() => {
-    const option = optionMap.get(value)
-    const hasRealLabel = Boolean(option && option.label !== option.value)
-    if (document.activeElement === inputRef.current && (userTypedRef.current || !hasRealLabel)) return
-    setInput(option?.label ?? value ?? '')
+    if (document.activeElement !== inputRef.current) {
+      const option = optionMap.get(value)
+      setInput(option?.label ?? value ?? '')
+    }
   }, [value, optionMap])
 
   const selectValue = React.useCallback(
@@ -278,7 +265,6 @@ export function ComboboxInput({
       setInput(option?.label ?? trimmed)
       setShowSuggestions(false)
       setSelectedIndex(-1)
-      userTypedRef.current = false
     },
     [disabled, onChange, optionMap, resetBlurCloseState]
   )
@@ -450,7 +436,6 @@ export function ComboboxInput({
         }}
         onChange={(event) => {
           setTouched(true)
-          userTypedRef.current = true
           setInput(event.target.value)
           setShowSuggestions(true)
           setSelectedIndex(-1)
@@ -460,7 +445,6 @@ export function ComboboxInput({
           // Delay closing so clicks on the popup can resolve first. If async
           // suggestions are still loading, keep the dropdown open instead of
           // closing before the first payload arrives.
-          userTypedRef.current = false
           blurClosePendingRef.current = true
           clearBlurCloseTimer()
           if (loadingRef.current) {

package/src/backend/inputs/LookupSelect.tsx

@@ -116,8 +116,12 @@ export function LookupSelect({
     if (onReadyRef.current) onReadyRef.current({ setQuery })
   }, [setQuery])
 
-  const shouldSearch =
-    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)
+  // A set `value` always opens the list: it is the only place the selected row,
+  // its checkmark and the clear control render, so collapsing over a selection
+  // would hide it with no way to see or undo it. This used to also require an
+  // `options` prop, which left every caller that resolves its selection through
+  // `fetchItems` blind whenever minQuery kept the list shut.
+  const shouldSearch = defaultOpen || query.trim().length >= minQuery || Boolean(value)
 
   React.useEffect(() => {
     setActiveIndex(-1)
@@ -129,8 +133,8 @@ export function LookupSelect({
   )
 
   const isInteractiveItem = React.useCallback(
-    (item: LookupSelectItem) => !disabled && (!item.disabled || value === item.id),
-    [disabled, value],
+    (item: LookupSelectItem) => !item.disabled || value === item.id,
+    [value],
   )
 
   const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
@@ -248,7 +252,7 @@ export function LookupSelect({
             aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
-        {actionSlot && !disabled ? <div className="sm:self-start">{actionSlot}</div> : null}
+        {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
       </div>
       {shouldSearch ? (
         <div className="space-y-2">
@@ -268,7 +272,7 @@ export function LookupSelect({
           >
             {items.map((item, index) => {
               const isSelected = value === item.id
-              const isInteractive = isInteractiveItem(item)
+              const isInteractive = !item.disabled || isSelected
               const isActive = index === activeIndex
               return (
                 <div
@@ -283,7 +287,7 @@ export function LookupSelect({
                     isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
                   role="option"
-                  tabIndex={isInteractive ? 0 : -1}
+                  tabIndex={item.disabled ? -1 : 0}
                   onClick={() => {
                     if (!isInteractive) return
                     onChange(item.id)
@@ -296,8 +300,8 @@ export function LookupSelect({
                     }
                   }}
                   aria-selected={isSelected}
-                  aria-disabled={isInteractive ? undefined : true}
-                  title={isSelected ? resolvedSelectedLabel : isInteractive ? resolvedSelectLabel : undefined}
+                  aria-disabled={item.disabled && !isSelected ? true : undefined}
+                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
                 >
                   {item.icon ? (
                     <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground">
@@ -340,7 +344,7 @@ export function LookupSelect({
               )
             })}
           </div>
-          {value && !disabled ? (
+          {value ? (
             <Button
               type="button"
               variant="ghost"