@open-mercato/ui 0.6.8-develop.7057.1.61440fc3bc → 0.6.8-develop.7063.1.664341cf65

package/dist/backend/injection/useRegisteredComponent.js

@@ -21,6 +21,19 @@ class ReplacementErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+const composedWrappers = /* @__PURE__ */ new WeakMap();
+function applyWrapper(wrapper, Base) {
+  let byBase = composedWrappers.get(wrapper);
+  if (!byBase) {
+    byBase = /* @__PURE__ */ new WeakMap();
+    composedWrappers.set(wrapper, byBase);
+  }
+  const cached = byBase.get(Base);
+  if (cached) return cached;
+  const composed = wrapper(Base);
+  byBase.set(Base, composed);
+  return composed;
+}
 function resolveComponent(componentId, fallback, userFeatures) {
   const entry = getComponentEntry(componentId);
   const original = entry?.component ?? fallback ?? null;
@@ -48,7 +61,7 @@ function resolveComponent(componentId, fallback, userFeatures) {
     if ("propsTransform" in override) transforms.push(override.propsTransform);
   }
   const base = replacement ?? original;
-  const wrapped = wrappers.reduce((acc, wrapper) => wrapper(acc), base);
+  const wrapped = wrappers.reduce((acc, wrapper) => applyWrapper(wrapper, acc), base);
   return {
     original,
     wrapped,
@@ -58,13 +71,17 @@ function resolveComponent(componentId, fallback, userFeatures) {
   };
 }
 function useRegisteredComponent(componentId, fallback) {
-  return React.useMemo(() => {
+  const fallbackRef = React.useRef(fallback);
+  fallbackRef.current = fallback;
+  const registered = React.useRef(null);
+  if (!registered.current || registered.current.componentId !== componentId) {
     const Registered = (props) => {
       const userFeatures = useOverrideUserFeatures();
       const overrideRevision = useOverrideRegistryRevision();
+      const currentFallback = fallbackRef.current;
       const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
-        () => resolveComponent(componentId, fallback, userFeatures),
-        [overrideRevision, userFeatures]
+        () => resolveComponent(componentId, currentFallback, userFeatures),
+        [currentFallback, overrideRevision, userFeatures]
       );
       if (!original || !wrapped) return null;
       const transformed = transforms.reduce((current, transform) => transform(current), props);
@@ -88,8 +105,9 @@ function useRegisteredComponent(componentId, fallback) {
       );
     };
     Registered.displayName = `RegisteredComponent(${componentId})`;
-    return Registered;
-  }, [componentId, fallback]);
+    registered.current = { componentId, Component: Registered };
+  }
+  return registered.current.Component;
 }
 var useRegisteredComponent_default = useRegisteredComponent;
 export {

package/dist/backend/injection/useRegisteredComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/injection/useRegisteredComponent.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'useRegisteredComponent' })\n\nclass ReplacementErrorBoundary extends React.Component<\n  { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode },\n  { hasError: boolean }\n> {\n  constructor(props: { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode }) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(): { hasError: boolean } {\n    return { hasError: true }\n  }\n\n  componentDidCatch(error: unknown): void {\n    this.props.onError(error)\n  }\n\n  render() {\n    if (this.state.hasError) return this.props.fallback\n    return this.props.children\n  }\n}\n\ntype Resolution<TProps> = {\n  original: ComponentType<TProps> | null\n  wrapped: ComponentType<TProps> | null\n  transforms: Array<(props: TProps) => TProps>\n  replacementOverride: ComponentOverride | null\n  replacementModule: string\n}\n\nfunction resolveComponent<TProps>(\n  componentId: string,\n  fallback: ComponentType<TProps> | undefined,\n  userFeatures: readonly string[],\n): Resolution<TProps> {\n  const entry = getComponentEntry(componentId)\n  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null\n  if (!original) {\n    if (process.env.NODE_ENV !== 'production' && !fallback) {\n      logger.warn('Component is not registered', { componentId })\n    }\n    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }\n  }\n\n  const overrides = getComponentOverrides(componentId, userFeatures)\n  const replacementOverrides = overrides.filter((override) => 'replacement' in override)\n  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {\n    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })\n  }\n\n  let replacement: ComponentType<TProps> | null = null\n  let replacementOverride: ComponentOverride | null = null\n  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []\n  const transforms: Array<(props: TProps) => TProps> = []\n\n  for (const override of overrides) {\n    if ('replacement' in override) {\n      replacement = override.replacement as ComponentType<TProps>\n      replacementOverride = override\n    }\n    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)\n    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)\n  }\n\n  const base = replacement ?? original\n  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)\n\n  return {\n    original,\n    wrapped,\n    transforms,\n    replacementOverride,\n    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',\n  }\n}\n\n/**\n * The returned component's identity must depend only on `componentId` and\n * `fallback` \u2014 never on the override registry.\n *\n * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically\n * imports the generated override module and hands the provider a fresh array,\n * which bumps the registry revision some time after first paint. Resolving the\n * component in a `useMemo` keyed on that revision handed callers a brand-new\n * function on every bump, so React saw a different element type at that\n * position and unmounted the whole subtree \u2014 discarding its DOM and state. On\n * the login form that threw away credentials the user had already typed\n * (#5037), and the same hazard applied to every host of a registered section.\n *\n * Resolution therefore happens *inside* a stable component. When the revision\n * carries no override for this id, `wrapped` keeps its previous identity and\n * React reconciles in place; only a genuine replacement or wrapper swaps the\n * rendered type, where a remount is the correct behaviour.\n */\nexport function useRegisteredComponent<TProps>(\n  componentId: string,\n  fallback?: ComponentType<TProps>,\n): ComponentType<TProps> {\n  return React.useMemo(() => {\n    const Registered = (props: TProps) => {\n      const userFeatures = useOverrideUserFeatures()\n      const overrideRevision = useOverrideRegistryRevision()\n      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(\n        () => resolveComponent<TProps>(componentId, fallback, userFeatures),\n        [overrideRevision, userFeatures],\n      )\n\n      if (!original || !wrapped) return null\n\n      const transformed = transforms.reduce((current, transform) => transform(current), props)\n      const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)\n      if (\n        process.env.NODE_ENV !== 'production'\n        && replacementOverride\n        && 'replacement' in replacementOverride\n      ) {\n        const validation = replacementOverride.propsSchema.safeParse(transformed)\n        if (!validation.success) {\n          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })\n          return Fallback\n        }\n      }\n      return (\n        <ReplacementErrorBoundary\n          fallback={Fallback}\n          onError={(error) => {\n            logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })\n          }}\n        >\n          {React.createElement(wrapped as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)}\n        </ReplacementErrorBoundary>\n      )\n    }\n\n    Registered.displayName = `RegisteredComponent(${componentId})`\n    return Registered\n  }, [componentId, fallback])\n}\n\nexport default useRegisteredComponent\n"],
-  "mappings": ";AAuIQ;AArIR,YAAY,WAAW;AAGvB,SAAS,mBAAmB,6BAA6B;AACzD,SAAS,6BAA6B,+BAA+B;AACrE,SAAS,oBAAoB;AAE7B,MAAM,SAAS,aAAa,IAAI,EAAE,MAAM,EAAE,WAAW,yBAAyB,CAAC;AAE/E,MAAM,iCAAiC,MAAM,UAG3C;AAAA,EACA,YAAY,OAAoG;AAC9G,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,MAAM;AAAA,EACjC;AAAA,EAEA,OAAO,2BAAkD;AACvD,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,kBAAkB,OAAsB;AACtC,SAAK,MAAM,QAAQ,KAAK;AAAA,EAC1B;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,SAAU,QAAO,KAAK,MAAM;AAC3C,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;AAUA,SAAS,iBACP,aACA,UACA,cACoB;AACpB,QAAM,QAAQ,kBAAkB,WAAW;AAC3C,QAAM,WAAY,OAAO,aAAmD,YAAY;AACxF,MAAI,CAAC,UAAU;AACb,QAAI,QAAQ,IAAI,aAAa,gBAAgB,CAAC,UAAU;AACtD,aAAO,KAAK,+BAA+B,EAAE,YAAY,CAAC;AAAA,IAC5D;AACA,WAAO,EAAE,UAAU,MAAM,SAAS,MAAM,YAAY,CAAC,GAAG,qBAAqB,MAAM,mBAAmB,UAAU;AAAA,EAClH;AAEA,QAAM,YAAY,sBAAsB,aAAa,YAAY;AACjE,QAAM,uBAAuB,UAAU,OAAO,CAAC,aAAa,iBAAiB,QAAQ;AACrF,MAAI,QAAQ,IAAI,aAAa,gBAAgB,qBAAqB,SAAS,GAAG;AAC5E,WAAO,KAAK,6EAA6E,EAAE,YAAY,CAAC;AAAA,EAC1G;AAEA,MAAI,cAA4C;AAChD,MAAI,sBAAgD;AACpD,QAAM,WAA8E,CAAC;AACrF,QAAM,aAA+C,CAAC;AAEtD,aAAW,YAAY,WAAW;AAChC,QAAI,iBAAiB,UAAU;AAC7B,oBAAc,SAAS;AACvB,4BAAsB;AAAA,IACxB;AACA,QAAI,aAAa,SAAU,UAAS,KAAK,SAAS,OAAqE;AACvH,QAAI,oBAAoB,SAAU,YAAW,KAAK,SAAS,cAA2C;AAAA,EACxG;AAEA,QAAM,OAAO,eAAe;AAC5B,QAAM,UAAU,SAAS,OAA8B,CAAC,KAAK,YAAY,QAAQ,GAAG,GAAG,IAAI;AAE3F,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,qBAAqB,UAAU,UAAU;AAAA,EAC9D;AACF;AAoBO,SAAS,uBACd,aACA,UACuB;AACvB,SAAO,MAAM,QAAQ,MAAM;AACzB,UAAM,aAAa,CAAC,UAAkB;AACpC,YAAM,eAAe,wBAAwB;AAC7C,YAAM,mBAAmB,4BAA4B;AACrD,YAAM,EAAE,UAAU,SAAS,YAAY,qBAAqB,kBAAkB,IAAI,MAAM;AAAA,QACtF,MAAM,iBAAyB,aAAa,UAAU,YAAY;AAAA,QAClE,CAAC,kBAAkB,YAAY;AAAA,MACjC;AAEA,UAAI,CAAC,YAAY,CAAC,QAAS,QAAO;AAElC,YAAM,cAAc,WAAW,OAAO,CAAC,SAAS,cAAc,UAAU,OAAO,GAAG,KAAK;AACvF,YAAM,WAAW,MAAM,cAAc,UAA0D,WAAsC;AACrI,UACE,QAAQ,IAAI,aAAa,gBACtB,uBACA,iBAAiB,qBACpB;AACA,cAAM,aAAa,oBAAoB,YAAY,UAAU,WAAW;AACxE,YAAI,CAAC,WAAW,SAAS;AACvB,iBAAO,MAAM,kDAAkD,EAAE,aAAa,QAAQ,mBAAmB,QAAQ,WAAW,MAAM,OAAO,EAAE,CAAC;AAC5I,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,SAAS,CAAC,UAAU;AAClB,mBAAO,MAAM,gCAAgC,EAAE,aAAa,QAAQ,mBAAmB,KAAK,MAAM,CAAC;AAAA,UACrG;AAAA,UAEC,gBAAM,cAAc,SAAyD,WAAsC;AAAA;AAAA,MACtH;AAAA,IAEJ;AAEA,eAAW,cAAc,uBAAuB,WAAW;AAC3D,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,QAAQ,CAAC;AAC5B;AAEA,IAAO,iCAAQ;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'useRegisteredComponent' })\n\nclass ReplacementErrorBoundary extends React.Component<\n  { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode },\n  { hasError: boolean }\n> {\n  constructor(props: { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode }) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(): { hasError: boolean } {\n    return { hasError: true }\n  }\n\n  componentDidCatch(error: unknown): void {\n    this.props.onError(error)\n  }\n\n  render() {\n    if (this.state.hasError) return this.props.fallback\n    return this.props.children\n  }\n}\n\ntype Resolution<TProps> = {\n  original: ComponentType<TProps> | null\n  wrapped: ComponentType<TProps> | null\n  transforms: Array<(props: TProps) => TProps>\n  replacementOverride: ComponentOverride | null\n  replacementModule: string\n}\n\n/**\n * Calling a wrapper override returns a fresh component every time, which would\n * reintroduce the identity churn this hook exists to avoid. Memoizing per\n * (wrapper, wrapped component) pair keeps the composed component referentially\n * stable for as long as both inputs are.\n */\nconst composedWrappers = new WeakMap<object, WeakMap<object, unknown>>()\n\nfunction applyWrapper<TProps>(\n  wrapper: (Original: ComponentType<TProps>) => ComponentType<TProps>,\n  Base: ComponentType<TProps>,\n): ComponentType<TProps> {\n  let byBase = composedWrappers.get(wrapper)\n  if (!byBase) {\n    byBase = new WeakMap<object, unknown>()\n    composedWrappers.set(wrapper, byBase)\n  }\n  const cached = byBase.get(Base)\n  if (cached) return cached as ComponentType<TProps>\n  const composed = wrapper(Base)\n  byBase.set(Base, composed)\n  return composed\n}\n\nfunction resolveComponent<TProps>(\n  componentId: string,\n  fallback: ComponentType<TProps> | undefined,\n  userFeatures: readonly string[],\n): Resolution<TProps> {\n  const entry = getComponentEntry(componentId)\n  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null\n  if (!original) {\n    if (process.env.NODE_ENV !== 'production' && !fallback) {\n      logger.warn('Component is not registered', { componentId })\n    }\n    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }\n  }\n\n  const overrides = getComponentOverrides(componentId, userFeatures)\n  const replacementOverrides = overrides.filter((override) => 'replacement' in override)\n  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {\n    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })\n  }\n\n  let replacement: ComponentType<TProps> | null = null\n  let replacementOverride: ComponentOverride | null = null\n  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []\n  const transforms: Array<(props: TProps) => TProps> = []\n\n  for (const override of overrides) {\n    if ('replacement' in override) {\n      replacement = override.replacement as ComponentType<TProps>\n      replacementOverride = override\n    }\n    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)\n    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)\n  }\n\n  const base = replacement ?? original\n  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)\n\n  return {\n    original,\n    wrapped,\n    transforms,\n    replacementOverride,\n    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',\n  }\n}\n\n/**\n * The returned component's identity must depend only on `componentId` \u2014 never\n * on the override registry, and never on the `fallback` a caller happens to\n * pass on this render.\n *\n * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically\n * imports the generated override module and hands the provider a fresh array,\n * which bumps the registry revision some time after first paint. Resolving the\n * component in a `useMemo` keyed on that revision handed callers a brand-new\n * function on every bump, so React saw a different element type at that\n * position and unmounted the whole subtree \u2014 discarding its DOM and state. On\n * the login form that threw away credentials the user had already typed\n * (#5037), and the same hazard applied to every host of a registered section.\n *\n * Resolution therefore happens *inside* a stable component. When the revision\n * carries no override for this id, `wrapped` keeps its previous identity and\n * React reconciles in place; only a genuine replacement or wrapper swaps the\n * rendered type, where a remount is the correct behaviour.\n *\n * The identity is held in a ref rather than a `useMemo`, because `useMemo` is a\n * performance hint React is free to discard, and identity here is a correctness\n * requirement rather than an optimisation. `fallback` is read through a ref for\n * the same reason: a host that builds its fallback inline would otherwise swap\n * the component this hook hands back on every render. That still cannot save a\n * subtree rendered *through* such a fallback \u2014 the fallback itself is then the\n * element type, and only the host can stabilise it \u2014 but it keeps the churn\n * from spreading to hosts whose id does resolve to a registered component.\n */\nexport function useRegisteredComponent<TProps>(\n  componentId: string,\n  fallback?: ComponentType<TProps>,\n): ComponentType<TProps> {\n  const fallbackRef = React.useRef<ComponentType<TProps> | undefined>(fallback)\n  fallbackRef.current = fallback\n\n  const registered = React.useRef<{ componentId: string; Component: ComponentType<TProps> } | null>(null)\n  if (!registered.current || registered.current.componentId !== componentId) {\n    const Registered = (props: TProps) => {\n      const userFeatures = useOverrideUserFeatures()\n      const overrideRevision = useOverrideRegistryRevision()\n      const currentFallback = fallbackRef.current\n      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(\n        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),\n        [currentFallback, overrideRevision, userFeatures],\n      )\n\n      if (!original || !wrapped) return null\n\n      const transformed = transforms.reduce((current, transform) => transform(current), props)\n      const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)\n      if (\n        process.env.NODE_ENV !== 'production'\n        && replacementOverride\n        && 'replacement' in replacementOverride\n      ) {\n        const validation = replacementOverride.propsSchema.safeParse(transformed)\n        if (!validation.success) {\n          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })\n          return Fallback\n        }\n      }\n      return (\n        <ReplacementErrorBoundary\n          fallback={Fallback}\n          onError={(error) => {\n            logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })\n          }}\n        >\n          {React.createElement(wrapped as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)}\n        </ReplacementErrorBoundary>\n      )\n    }\n\n    Registered.displayName = `RegisteredComponent(${componentId})`\n    registered.current = { componentId, Component: Registered }\n  }\n\n  return registered.current.Component\n}\n\nexport default useRegisteredComponent\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/backend/inputs/LookupSelect.js

@@ -83,8 +83,8 @@ function LookupSelect({
     [listboxId]
   );
   const isInteractiveItem = React.useCallback(
-    (item) => !item.disabled || value === item.id,
-    [value]
+    (item) => !disabled && (!item.disabled || value === item.id),
+    [disabled, value]
   );
   const moveActiveIndex = React.useCallback((direction) => {
     setActiveIndex((current) => {
@@ -197,7 +197,7 @@ function LookupSelect({
           }
         )
       ] }),
-      actionSlot ? /* @__PURE__ */ jsx("div", { className: "sm:self-start", children: actionSlot }) : null
+      actionSlot && !disabled ? /* @__PURE__ */ jsx("div", { className: "sm:self-start", children: actionSlot }) : null
     ] }),
     shouldSearch ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       loading || loadingProp ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
@@ -213,7 +213,7 @@ function LookupSelect({
           className: "flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5",
           children: items.map((item, index) => {
             const isSelected = value === item.id;
-            const isInteractive = !item.disabled || isSelected;
+            const isInteractive = isInteractiveItem(item);
             const isActive = index === activeIndex;
             return /* @__PURE__ */ jsxs(
               "div",
@@ -226,7 +226,7 @@ function LookupSelect({
                   isActive && !isSelected ? "border-foreground/20 bg-muted/30 shadow-sm" : null
                 ),
                 role: "option",
-                tabIndex: item.disabled ? -1 : 0,
+                tabIndex: isInteractive ? 0 : -1,
                 onClick: () => {
                   if (!isInteractive) return;
                   onChange(item.id);
@@ -239,8 +239,8 @@ function LookupSelect({
                   }
                 },
                 "aria-selected": isSelected,
-                "aria-disabled": item.disabled && !isSelected ? true : void 0,
-                title: isSelected ? resolvedSelectedLabel : resolvedSelectLabel,
+                "aria-disabled": isInteractive ? void 0 : true,
+                title: isSelected ? resolvedSelectedLabel : isInteractive ? resolvedSelectLabel : void 0,
                 children: [
                   item.icon ? /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground", children: item.icon }) : /* @__PURE__ */ jsx("div", { className: cn(
                     "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors",
@@ -262,7 +262,7 @@ function LookupSelect({
           })
         }
       ),
-      value ? /* @__PURE__ */ jsxs(
+      value && !disabled ? /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",

package/dist/backend/inputs/LookupSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/inputs/LookupSelect.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Loader2, Search, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'LookupSelect' })\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder,\n  clearLabel,\n  emptyLabel,\n  loadingLabel,\n  selectLabel,\n  selectedLabel,\n  minQueryHintLabel,\n  startTypingLabel,\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const t = useT()\n  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t('ui.lookupSelect.searchPlaceholder', 'Search\u2026')\n  const resolvedClearLabel = clearLabel ?? t('ui.lookupSelect.clearSelection', 'Clear selection')\n  const resolvedEmptyLabel = emptyLabel ?? t('ui.lookupSelect.noResults', 'No results')\n  const resolvedLoadingLabel = loadingLabel ?? t('ui.lookupSelect.searching', 'Searching\u2026')\n  const resolvedSelectLabel = selectLabel ?? t('ui.lookupSelect.select', 'Select')\n  const resolvedSelectedLabel = selectedLabel ?? t('ui.lookupSelect.selected', 'Selected')\n  const resolvedStartTypingLabel = startTypingLabel ?? t('ui.lookupSelect.startTyping', 'Start typing to search.')\n  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(\n    'ui.lookupSelect.minQueryHint',\n    'Type at least {minQuery} characters or paste an id to search.',\n    { minQuery: String(minQuery) }\n  )\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const [activeIndex, setActiveIndex] = React.useState(-1)\n  const listboxId = React.useId()\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const onReadyRef = React.useRef(onReady)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    onReadyRef.current = onReady\n  }, [onReady])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReadyRef.current) onReadyRef.current({ setQuery })\n  }, [setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n\n  React.useEffect(() => {\n    setActiveIndex(-1)\n  }, [items])\n\n  const optionDomId = React.useCallback(\n    (index: number) => `${listboxId}-option-${index}`,\n    [listboxId],\n  )\n\n  const isInteractiveItem = React.useCallback(\n    (item: LookupSelectItem) => !item.disabled || value === item.id,\n    [value],\n  )\n\n  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {\n    setActiveIndex((current) => {\n      if (!items.length) return -1\n      let next = current\n      for (let step = 0; step < items.length; step += 1) {\n        next = (next + direction + items.length) % items.length\n        if (isInteractiveItem(items[next])) return next\n      }\n      return current\n    })\n  }, [isInteractiveItem, items])\n\n  React.useEffect(() => {\n    if (activeIndex < 0) return\n    const activeElement = typeof document !== 'undefined'\n      ? document.getElementById(optionDomId(activeIndex))\n      : null\n    if (typeof activeElement?.scrollIntoView === 'function') {\n      activeElement.scrollIntoView({ block: 'nearest' })\n    }\n  }, [activeIndex, optionDomId])\n\n  const listboxVisible = shouldSearch && !disabled\n  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!listboxVisible) return\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      moveActiveIndex(1)\n      return\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      moveActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Enter') {\n      if (activeIndex < 0 || activeIndex >= items.length) return\n      const item = items[activeIndex]\n      if (!isInteractiveItem(item)) return\n      event.preventDefault()\n      onChange(item.id)\n      setActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Escape') {\n      if (query.length === 0 && activeIndex < 0) return\n      event.preventDefault()\n      event.stopPropagation()\n      setQuery('')\n      setActiveIndex(-1)\n    }\n  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          logger.error('Failed to fetch lookup items', { err })\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            onKeyDown={handleInputKeyDown}\n            placeholder={resolvedSearchPlaceholder}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-expanded={listboxVisible}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}\n          />\n        </div>\n        {actionSlot ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {resolvedLoadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{resolvedEmptyLabel}</p>\n          ) : null}\n          <div\n            id={listboxId}\n            role=\"listbox\"\n            className=\"flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5\"\n          >\n            {items.map((item, index) => {\n              const isSelected = value === item.id\n              const isInteractive = !item.disabled || isSelected\n              const isActive = index === activeIndex\n              return (\n                <div\n                  key={item.id}\n                  id={optionDomId(index)}\n                  className={cn(\n                    'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',\n                    isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',\n                    isSelected\n                      ? 'border-brand-violet bg-brand-violet/5 shadow-sm'\n                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',\n                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null\n                  )}\n                  role=\"option\"\n                  tabIndex={item.disabled ? -1 : 0}\n                  onClick={() => {\n                    if (!isInteractive) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (!isInteractive) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-selected={isSelected}\n                  aria-disabled={item.disabled && !isSelected ? true : undefined}\n                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}\n                >\n                  {item.icon ? (\n                    <div className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground\">\n                      {item.icon}\n                    </div>\n                  ) : (\n                    <div className={cn(\n                      'flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors',\n                      isSelected\n                        ? 'border-brand-violet/40 bg-brand-violet/10 text-brand-violet'\n                        : 'border-input bg-muted text-muted-foreground group-hover:border-foreground/20'\n                    )}>\n                      <span className=\"text-base font-semibold uppercase\">{item.title.slice(0, 1)}</span>\n                    </div>\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <div className=\"truncate text-sm font-semibold text-foreground\">{item.title}</div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground\">\n                          {item.rightLabel}\n                        </div>\n                      ) : null}\n                    </div>\n                    {item.subtitle ? (\n                      <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                    ) : null}\n                    {item.description ? (\n                      <div className=\"text-xs text-muted-foreground/70 truncate\">{item.description}</div>\n                    ) : null}\n                  </div>\n                  <div className=\"flex shrink-0 items-center justify-center\">\n                    {isSelected ? (\n                      <Check className=\"size-5 text-brand-violet\" aria-hidden=\"true\" />\n                    ) : (\n                      <div className=\"size-5\" aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {resolvedClearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {resolvedMinQueryHintLabel}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{resolvedStartTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-status-error-text\" role=\"alert\">{resolvedEmptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Loader2, Search, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'LookupSelect' })\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder,\n  clearLabel,\n  emptyLabel,\n  loadingLabel,\n  selectLabel,\n  selectedLabel,\n  minQueryHintLabel,\n  startTypingLabel,\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const t = useT()\n  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t('ui.lookupSelect.searchPlaceholder', 'Search\u2026')\n  const resolvedClearLabel = clearLabel ?? t('ui.lookupSelect.clearSelection', 'Clear selection')\n  const resolvedEmptyLabel = emptyLabel ?? t('ui.lookupSelect.noResults', 'No results')\n  const resolvedLoadingLabel = loadingLabel ?? t('ui.lookupSelect.searching', 'Searching\u2026')\n  const resolvedSelectLabel = selectLabel ?? t('ui.lookupSelect.select', 'Select')\n  const resolvedSelectedLabel = selectedLabel ?? t('ui.lookupSelect.selected', 'Selected')\n  const resolvedStartTypingLabel = startTypingLabel ?? t('ui.lookupSelect.startTyping', 'Start typing to search.')\n  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(\n    'ui.lookupSelect.minQueryHint',\n    'Type at least {minQuery} characters or paste an id to search.',\n    { minQuery: String(minQuery) }\n  )\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const [activeIndex, setActiveIndex] = React.useState(-1)\n  const listboxId = React.useId()\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const onReadyRef = React.useRef(onReady)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    onReadyRef.current = onReady\n  }, [onReady])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReadyRef.current) onReadyRef.current({ setQuery })\n  }, [setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n\n  React.useEffect(() => {\n    setActiveIndex(-1)\n  }, [items])\n\n  const optionDomId = React.useCallback(\n    (index: number) => `${listboxId}-option-${index}`,\n    [listboxId],\n  )\n\n  const isInteractiveItem = React.useCallback(\n    (item: LookupSelectItem) => !disabled && (!item.disabled || value === item.id),\n    [disabled, value],\n  )\n\n  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {\n    setActiveIndex((current) => {\n      if (!items.length) return -1\n      let next = current\n      for (let step = 0; step < items.length; step += 1) {\n        next = (next + direction + items.length) % items.length\n        if (isInteractiveItem(items[next])) return next\n      }\n      return current\n    })\n  }, [isInteractiveItem, items])\n\n  React.useEffect(() => {\n    if (activeIndex < 0) return\n    const activeElement = typeof document !== 'undefined'\n      ? document.getElementById(optionDomId(activeIndex))\n      : null\n    if (typeof activeElement?.scrollIntoView === 'function') {\n      activeElement.scrollIntoView({ block: 'nearest' })\n    }\n  }, [activeIndex, optionDomId])\n\n  const listboxVisible = shouldSearch && !disabled\n  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!listboxVisible) return\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      moveActiveIndex(1)\n      return\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      moveActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Enter') {\n      if (activeIndex < 0 || activeIndex >= items.length) return\n      const item = items[activeIndex]\n      if (!isInteractiveItem(item)) return\n      event.preventDefault()\n      onChange(item.id)\n      setActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Escape') {\n      if (query.length === 0 && activeIndex < 0) return\n      event.preventDefault()\n      event.stopPropagation()\n      setQuery('')\n      setActiveIndex(-1)\n    }\n  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          logger.error('Failed to fetch lookup items', { err })\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            onKeyDown={handleInputKeyDown}\n            placeholder={resolvedSearchPlaceholder}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-expanded={listboxVisible}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}\n          />\n        </div>\n        {actionSlot && !disabled ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {resolvedLoadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{resolvedEmptyLabel}</p>\n          ) : null}\n          <div\n            id={listboxId}\n            role=\"listbox\"\n            className=\"flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5\"\n          >\n            {items.map((item, index) => {\n              const isSelected = value === item.id\n              const isInteractive = isInteractiveItem(item)\n              const isActive = index === activeIndex\n              return (\n                <div\n                  key={item.id}\n                  id={optionDomId(index)}\n                  className={cn(\n                    'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',\n                    isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',\n                    isSelected\n                      ? 'border-brand-violet bg-brand-violet/5 shadow-sm'\n                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',\n                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null\n                  )}\n                  role=\"option\"\n                  tabIndex={isInteractive ? 0 : -1}\n                  onClick={() => {\n                    if (!isInteractive) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (!isInteractive) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-selected={isSelected}\n                  aria-disabled={isInteractive ? undefined : true}\n                  title={isSelected ? resolvedSelectedLabel : isInteractive ? resolvedSelectLabel : undefined}\n                >\n                  {item.icon ? (\n                    <div className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground\">\n                      {item.icon}\n                    </div>\n                  ) : (\n                    <div className={cn(\n                      'flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors',\n                      isSelected\n                        ? 'border-brand-violet/40 bg-brand-violet/10 text-brand-violet'\n                        : 'border-input bg-muted text-muted-foreground group-hover:border-foreground/20'\n                    )}>\n                      <span className=\"text-base font-semibold uppercase\">{item.title.slice(0, 1)}</span>\n                    </div>\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <div className=\"truncate text-sm font-semibold text-foreground\">{item.title}</div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground\">\n                          {item.rightLabel}\n                        </div>\n                      ) : null}\n                    </div>\n                    {item.subtitle ? (\n                      <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                    ) : null}\n                    {item.description ? (\n                      <div className=\"text-xs text-muted-foreground/70 truncate\">{item.description}</div>\n                    ) : null}\n                  </div>\n                  <div className=\"flex shrink-0 items-center justify-center\">\n                    {isSelected ? (\n                      <Check className=\"size-5 text-brand-violet\" aria-hidden=\"true\" />\n                    ) : (\n                      <div className=\"size-5\" aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value && !disabled ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {resolvedClearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {resolvedMinQueryHintLabel}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{resolvedStartTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-status-error-text\" role=\"alert\">{resolvedEmptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.8-develop.7057.1.61440fc3bc",
+  "version": "0.6.8-develop.7063.1.664341cf65",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.8-develop.7057.1.61440fc3bc",
+    "@open-mercato/shared": "0.6.8-develop.7063.1.664341cf65",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.6.8-develop.7057.1.61440fc3bc",
+    "@open-mercato/shared": "0.6.8-develop.7063.1.664341cf65",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/__tests__/useRegisteredComponent.identity.test.tsx

@@ -0,0 +1,305 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { z } from 'zod'
+import {
+  registerComponent,
+  registerComponentOverrides,
+} from '@open-mercato/shared/modules/widgets/component-registry'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider, useOverrideUserFeatures } from '../injection/ComponentOverrideProvider'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({ ok: true, result: { granted: ['acme.override'] } })),
+}))
+
+type FieldProps = { label?: string }
+
+const mounts = { count: 0 }
+
+function StatefulField({ label }: FieldProps) {
+  React.useEffect(() => {
+    mounts.count += 1
+  }, [])
+  return (
+    <label>
+      {label ?? 'field'}
+      <input data-testid="field" defaultValue="" />
+    </label>
+  )
+}
+
+function FeaturesProbe() {
+  const features = useOverrideUserFeatures()
+  return <span data-testid="features">{features.join(',')}</span>
+}
+
+function typeIntoField(value: string) {
+  fireEvent.change(screen.getByTestId('field'), { target: { value } })
+}
+
+describe('useRegisteredComponent identity', () => {
+  beforeEach(() => {
+    mounts.count = 0
+    registerComponentOverrides([])
+  })
+
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('keeps the subtree mounted when override user features resolve after first paint', async () => {
+    const componentId = 'test.identity.features'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    // The override targets a different component, so the resolution result for
+    // `componentId` is identical before and after the feature grant arrives.
+    const overrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.other' },
+        priority: 10,
+        features: ['acme.override'],
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    render(
+      <ComponentOverrideProvider overrides={overrides}>
+        <FeaturesProbe />
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('admin@acme.com')
+    expect(mounts.count).toBe(1)
+
+    await waitFor(() => expect(screen.getByTestId('features')).toHaveTextContent('acme.override'))
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('admin@acme.com')
+  })
+
+  it('keeps the subtree mounted when overrides are registered late', async () => {
+    const componentId = 'test.identity.late'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.late.other' },
+        priority: 10,
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('typed before the registry settled')
+    expect(mounts.count).toBe(1)
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed before the registry settled')
+  })
+
+  it('keeps a wrapper-wrapped subtree mounted across override re-registrations', async () => {
+    const componentId = 'test.identity.wrapped'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    typeIntoField('typed inside a wrapped section')
+    expect(mounts.count).toBe(1)
+
+    // A new array with the same wrapper function — what a provider re-render looks like.
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={buildOverrides()}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed inside a wrapped section')
+  })
+
+  it('composes a wrapper at most once per (wrapper, wrapped component) pair', async () => {
+    // The user-visible consequence is covered by the test above; this one pins the
+    // cache's own contract, so that dropping the memoization fails loudly and the
+    // purity requirement documented on the `wrapper` override member stays executable.
+    const componentId = 'test.identity.wrapper-composition'
+    const Base = (props: FieldProps) => <StatefulField {...props} />
+    Base.displayName = 'Base'
+    registerComponent({ id: componentId, component: Base, metadata: { module: 'test' } })
+
+    let compositions = 0
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      compositions += 1
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    expect(compositions).toBe(1)
+
+    for (let pass = 0; pass < 2; pass += 1) {
+      await act(async () => {
+        rerender(
+          <ComponentOverrideProvider overrides={buildOverrides()}>
+            <Consumer />
+          </ComponentOverrideProvider>,
+        )
+      })
+    }
+
+    expect(compositions).toBe(1)
+    expect(mounts.count).toBe(1)
+  })
+
+  it('still applies a replacement that becomes active after the first render', async () => {
+    const componentId = 'test.identity.replacement'
+    const Original = () => <span data-testid="rendered">original</span>
+    const Replacement = () => <span data-testid="rendered">replacement</span>
+    registerComponent({ id: componentId, component: Original, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'test' },
+        replacement: Replacement,
+        propsSchema: z.object({}).passthrough(),
+      } as unknown as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+    expect(screen.getByTestId('rendered')).toHaveTextContent('original')
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(screen.getByTestId('rendered')).toHaveTextContent('replacement')
+  })
+
+  it('cannot save a subtree whose host re-creates the fallback on every render', () => {
+    const componentId = 'test.identity.inline-fallback'
+
+    function Consumer({ label }: { label: string }) {
+      // A fallback declared inside the host's render body is a new function on
+      // every render, and with no component registered under this id it *is*
+      // the component being rendered. The hook keeps its own identity stable,
+      // but it cannot make the caller's fallback stable — React sees a new
+      // element type below and must remount. Hosts that care about the state
+      // under an unregistered id have to hoist the fallback out of render.
+      const Fallback = (props: FieldProps) => <StatefulField {...props} />
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, Fallback)
+      return <Resolved label={label} />
+    }
+
+    const { rerender } = render(<Consumer label="first" />)
+    typeIntoField('typed against an inline fallback')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer label="second" />)
+
+    expect(mounts.count).toBe(2)
+  })
+
+  it('remounts when the host asks for a different component id', () => {
+    function Consumer({ componentId }: { componentId: string }) {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, StatefulField)
+      return <Resolved />
+    }
+
+    const { rerender } = render(<Consumer componentId="test.identity.provider-a" />)
+    typeIntoField('provider a input')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer componentId="test.identity.provider-b" />)
+
+    expect(mounts.count).toBe(2)
+    expect(screen.getByTestId('field')).toHaveValue('')
+  })
+})

package/src/backend/injection/useRegisteredComponent.tsx

@@ -40,6 +40,30 @@ 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,
@@ -75,7 +99,7 @@ function resolveComponent<TProps>(
   }
 
   const base = replacement ?? original
-  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)
 
   return {
     original,
@@ -87,8 +111,9 @@ function resolveComponent<TProps>(
 }
 
 /**
- * The returned component's identity must depend only on `componentId` and
- * `fallback` — never on the override registry.
+ * 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.
  *
  * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
  * imports the generated override module and hands the provider a fresh array,
@@ -103,18 +128,32 @@ 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> {
-  return React.useMemo(() => {
+  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) {
     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, fallback, userFeatures),
-        [overrideRevision, userFeatures],
+        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),
+        [currentFallback, overrideRevision, userFeatures],
       )
 
       if (!original || !wrapped) return null
@@ -145,8 +184,10 @@ export function useRegisteredComponent<TProps>(
     }
 
     Registered.displayName = `RegisteredComponent(${componentId})`
-    return Registered
-  }, [componentId, fallback])
+    registered.current = { componentId, Component: Registered }
+  }
+
+  return registered.current.Component
 }
 
 export default useRegisteredComponent

package/src/backend/inputs/LookupSelect.tsx

@@ -129,8 +129,8 @@ export function LookupSelect({
   )
 
   const isInteractiveItem = React.useCallback(
-    (item: LookupSelectItem) => !item.disabled || value === item.id,
-    [value],
+    (item: LookupSelectItem) => !disabled && (!item.disabled || value === item.id),
+    [disabled, value],
   )
 
   const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
@@ -248,7 +248,7 @@ export function LookupSelect({
             aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
-        {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
+        {actionSlot && !disabled ? <div className="sm:self-start">{actionSlot}</div> : null}
       </div>
       {shouldSearch ? (
         <div className="space-y-2">
@@ -268,7 +268,7 @@ export function LookupSelect({
           >
             {items.map((item, index) => {
               const isSelected = value === item.id
-              const isInteractive = !item.disabled || isSelected
+              const isInteractive = isInteractiveItem(item)
               const isActive = index === activeIndex
               return (
                 <div
@@ -283,7 +283,7 @@ export function LookupSelect({
                     isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
                   role="option"
-                  tabIndex={item.disabled ? -1 : 0}
+                  tabIndex={isInteractive ? 0 : -1}
                   onClick={() => {
                     if (!isInteractive) return
                     onChange(item.id)
@@ -296,8 +296,8 @@ export function LookupSelect({
                     }
                   }}
                   aria-selected={isSelected}
-                  aria-disabled={item.disabled && !isSelected ? true : undefined}
-                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
+                  aria-disabled={isInteractive ? undefined : true}
+                  title={isSelected ? resolvedSelectedLabel : isInteractive ? resolvedSelectLabel : undefined}
                 >
                   {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 +340,7 @@ export function LookupSelect({
               )
             })}
           </div>
-          {value ? (
+          {value && !disabled ? (
             <Button
               type="button"
               variant="ghost"

package/src/backend/inputs/__tests__/LookupSelect.test.tsx

@@ -163,3 +163,78 @@ describe('LookupSelect keyboard accessibility', () => {
     expect(escapeSpy).not.toHaveBeenCalled()
   })
 })
+
+// `disabled` used to gate only the search box, so a caller that locked the
+// control still shipped a live option list: the selected card kept its click and
+// Enter/Space handlers, "Clear selection" stayed reachable, and the action slot
+// could still create a new record. Issue #5248 depended on `disabled` meaning
+// "no interaction at all", so every one of those paths is pinned here.
+describe('LookupSelect disabled', () => {
+  const SELECTED = [{ id: 'product-1', title: 'Product One' }]
+
+  function renderDisabled(onChange: (next: string | null) => void) {
+    return render(
+      <LookupSelect
+        value="product-1"
+        onChange={onChange}
+        options={SELECTED}
+        disabled
+        actionSlot={
+          <button type="button" data-testid="quick-create">
+            Create
+          </button>
+        }
+        clearLabel="Clear selection"
+      />,
+    )
+  }
+
+  it('still shows the current selection so the value stays readable', () => {
+    renderDisabled(() => {})
+    expect(screen.getByRole('option')).toHaveTextContent('Product One')
+  })
+
+  it('ignores clicks on the option row', () => {
+    const onChange = jest.fn()
+    renderDisabled(onChange)
+
+    fireEvent.click(screen.getByRole('option'))
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('ignores Enter and Space on the option row and keeps it out of the tab order', () => {
+    const onChange = jest.fn()
+    renderDisabled(onChange)
+    const option = screen.getByRole('option')
+
+    fireEvent.keyDown(option, { key: 'Enter' })
+    fireEvent.keyDown(option, { key: ' ' })
+
+    expect(onChange).not.toHaveBeenCalled()
+    expect(option).toHaveAttribute('tabindex', '-1')
+    expect(option).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('hides the clear-selection button so the value cannot be nulled', () => {
+    renderDisabled(() => {})
+    expect(screen.queryByRole('button', { name: /clear selection/i })).toBeNull()
+  })
+
+  it('hides the action slot so no new record can be created into a locked field', () => {
+    renderDisabled(() => {})
+    expect(screen.queryByTestId('quick-create')).toBeNull()
+  })
+
+  it('keeps the search box disabled and its keyboard path inert', () => {
+    const onChange = jest.fn()
+    const { container } = renderDisabled(onChange)
+    const input = getInput(container)
+
+    expect(input.disabled).toBe(true)
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})