@open-mercato/ui 0.6.7 → 0.6.8-develop.6874.1.982d6097d8

package/scripts/lucideRegistrySource.cjs

@@ -0,0 +1,133 @@
+// Pure source emitter for src/backend/icons/lucideRegistry.generated.tsx.
+// Kept side-effect free, and CommonJS so both build.mjs and the Jest suite can load it.
+
+const {
+  IndentationText,
+  Project,
+  QuoteKind,
+  ScriptKind,
+  StructureKind,
+  VariableDeclarationKind,
+} = require('ts-morph')
+
+const GENERATED_FILE_NAME = 'lucideRegistry.generated.tsx'
+const LUCIDE_MODULE_SPECIFIER = 'lucide-react'
+const BANNER = `/* eslint-disable */
+// AUTO-GENERATED by @open-mercato/ui build. Do not edit by hand.
+// Generated from discovered icon string usages across the repo.
+
+`
+
+let sharedProject = null
+
+function getProject() {
+  if (!sharedProject) {
+    sharedProject = new Project({
+      useInMemoryFileSystem: true,
+      manipulationSettings: {
+        indentationText: IndentationText.TwoSpaces,
+        quoteKind: QuoteKind.Single,
+        useTrailingCommas: true,
+      },
+    })
+  }
+
+  return sharedProject
+}
+
+function sortResolvedIcons(resolvedIcons) {
+  return [...resolvedIcons].sort((a, b) => a.kebab.localeCompare(b.kebab))
+}
+
+function collectUniqueExports(resolvedIcons) {
+  return [...new Set(resolvedIcons.map((icon) => icon.exportName))].sort((a, b) => a.localeCompare(b))
+}
+
+function writeNamedImports(exportNames) {
+  return (writer) => {
+    writer.newLine()
+    for (const name of exportNames) {
+      writer.write(`${name},`)
+      writer.newLine()
+    }
+  }
+}
+
+function writeRegistryLiteral(entries) {
+  return (writer) => {
+    if (entries.length === 0) {
+      writer.write('{}')
+      return
+    }
+
+    writer.write('{')
+    writer.newLine()
+    for (const icon of entries) {
+      writer.write(`'${icon.kebab}': ${icon.exportName},`)
+      writer.newLine()
+    }
+    writer.write('}')
+  }
+}
+
+function assertNoSyntacticDiagnostics(project, sourceFile) {
+  const diagnostics = project.getProgram().getSyntacticDiagnostics(sourceFile)
+  if (diagnostics.length === 0) return
+
+  const details = diagnostics
+    .map((diagnostic) => `  line ${diagnostic.getLineNumber() ?? 0}: ${diagnostic.getMessageText()}`)
+    .join('\n')
+  throw new Error(`[internal] Generated ${GENERATED_FILE_NAME} is not syntactically valid:\n${details}`)
+}
+
+function normalizeSourceText(text) {
+  const normalized = text.replace(/\r\n/g, '\n')
+  return normalized.endsWith('\n') ? normalized : `${normalized}\n`
+}
+
+function buildLucideRegistrySource(resolvedIcons) {
+  const entries = sortResolvedIcons(resolvedIcons)
+  const uniqueExports = collectUniqueExports(entries)
+
+  const project = getProject()
+  const sourceFile = project.createSourceFile(GENERATED_FILE_NAME, '', {
+    overwrite: true,
+    scriptKind: ScriptKind.TSX,
+  })
+
+  sourceFile.addImportDeclaration({
+    kind: StructureKind.ImportDeclaration,
+    isTypeOnly: true,
+    namedImports: [{ name: 'LucideIcon' }],
+    moduleSpecifier: LUCIDE_MODULE_SPECIFIER,
+  })
+
+  if (uniqueExports.length > 0) {
+    sourceFile.addImportDeclaration({
+      kind: StructureKind.ImportDeclaration,
+      namedImports: writeNamedImports(uniqueExports),
+      moduleSpecifier: LUCIDE_MODULE_SPECIFIER,
+    })
+  }
+
+  sourceFile.addVariableStatement({
+    kind: StructureKind.VariableStatement,
+    isExported: true,
+    declarationKind: VariableDeclarationKind.Const,
+    declarations: [
+      {
+        name: 'LUCIDE_ICON_REGISTRY',
+        type: 'Record<string, LucideIcon>',
+        initializer: writeRegistryLiteral(entries),
+      },
+    ],
+  })
+
+  sourceFile.formatText({ indentSize: 2, convertTabsToSpaces: true })
+  sourceFile.insertText(0, BANNER)
+  assertNoSyntacticDiagnostics(project, sourceFile)
+
+  return normalizeSourceText(sourceFile.getFullText())
+}
+
+module.exports = { buildLucideRegistrySource }

package/src/ai/AiChat.tsx

@@ -292,10 +292,10 @@ interface ServerEmittedUiPartRef {
   pendingActionId?: string
 }
 
-function mapErrorCodeToVariant(
+function mapErrorCodeToStatus(
   code: string | undefined,
-): 'destructive' | 'warning' {
-  if (!code) return 'destructive'
+): 'error' | 'warning' {
+  if (!code) return 'error'
   // Policy denies that describe a filtered tool or attachment surface a
   // warning alert; caller can still continue. Hard denials (agent_unknown,
   // agent_features_denied, unauthenticated, execution_mode_not_supported,
@@ -304,8 +304,37 @@ function mapErrorCodeToVariant(
     'tool_not_whitelisted',
     'tool_features_denied',
     'attachment_type_not_accepted',
+    // Content-safety rejections are soft: the user can rephrase and retry.
+    'moderation_blocked',
+    'moderation_unavailable',
   ])
-  return warningCodes.has(code) ? 'warning' : 'destructive'
+  return warningCodes.has(code) ? 'warning' : 'error'
+}
+
+/**
+ * Maps known error codes to a translated, user-safe message. For content-safety
+ * codes the raw server message is intentionally generic (no category oracle);
+ * the UI shows the friendly localized copy instead of the internal text.
+ */
+function resolveChatErrorMessage(
+  code: string | undefined,
+  fallback: string,
+  translate: (key: string, fallbackText?: string) => string,
+): string {
+  switch (code) {
+    case 'moderation_blocked':
+      return translate(
+        'ai_assistant.errors.moderationBlocked',
+        'Your message was blocked by the content safety filter. Please rephrase and try again.',
+      )
+    case 'moderation_unavailable':
+      return translate(
+        'ai_assistant.errors.moderationUnavailable',
+        'The content safety check is temporarily unavailable. Please try again in a moment.',
+      )
+    default:
+      return fallback
+  }
 }
 
 const MARKDOWN_TYPOGRAPHY_CLASS = cn(
@@ -1541,7 +1570,7 @@ export function AiChat({
   const resolvedPlaceholder =
     placeholder ?? t('ai_assistant.chat.composerPlaceholder', 'Message the AI agent...')
 
-  const errorVariant = mapErrorCodeToVariant(chat.error?.code)
+  const errorStatus = mapErrorCodeToStatus(chat.error?.code)
 
   return (
     <section
@@ -1622,7 +1651,7 @@ export function AiChat({
       </div>
 
       {chat.error ? (
-        <Alert variant={errorVariant} data-ai-chat-error={chat.error.code ?? 'unknown'}>
+        <Alert status={errorStatus} data-ai-chat-error={chat.error.code ?? 'unknown'}>
           <AlertTitle>
             {t('ai_assistant.chat.errorTitle', 'Agent dispatch failed')}
           </AlertTitle>
@@ -1630,7 +1659,7 @@ export function AiChat({
             {chat.error.code ? (
               <span className="mr-2 font-mono text-xs">{chat.error.code}</span>
             ) : null}
-            {chat.error.message}
+            {resolveChatErrorMessage(chat.error.code, chat.error.message, t)}
           </AlertDescription>
         </Alert>
       ) : null}

package/src/ai/LoopDisabledBanner.tsx

@@ -19,7 +19,7 @@ export function LoopDisabledBanner({ agentId }: { agentId?: string }) {
   const t = useT()
   return (
     <Alert
-      variant="warning"
+      status="warning"
       icon={<ShieldOff aria-hidden="true" />}
       data-ai-loop-disabled-banner
       data-ai-loop-disabled-agent-id={agentId}

package/src/ai/__tests__/AiChat.test.tsx

@@ -93,6 +93,8 @@ const dict = {
   'ai_assistant.chat.emptyTranscript':
     'No messages yet. Ask the agent anything to get started.',
   'ai_assistant.chat.errorTitle': 'Agent dispatch failed',
+  'ai_assistant.errors.moderationBlocked':
+    'Your message was blocked by the content safety filter. Please rephrase and try again.',
   'ai_assistant.chat.agentTasksTitle': 'Tool calls',
   'ai_assistant.chat.regionLabel': 'AI chat',
   'ai_assistant.chat.send': 'Send message',
@@ -577,6 +579,35 @@ describe('<AiChat>', () => {
     expect(screen.getByText('agent_unknown')).toBeInTheDocument()
   })
 
+  it('renders the translated message (not the raw server text) for a moderation_blocked envelope', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    fetchMock.mockResolvedValueOnce(
+      createErrorResponse(400, {
+        error: 'Input rejected by the content safety filter.',
+        code: 'moderation_blocked',
+      }),
+    )
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'flagged input' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('moderation_blocked')).toBeInTheDocument()
+    })
+    // The friendly localized copy is shown; the internal server text is not.
+    expect(
+      screen.getByText(/blocked by the content safety filter/i),
+    ).toBeInTheDocument()
+    expect(screen.queryByText('Input rejected by the content safety filter.')).toBeNull()
+    // Content-safety rejections render as a soft warning, not destructive.
+    expect(document.querySelector('[data-ai-chat-error="moderation_blocked"]')).not.toBeNull()
+  })
+
   it('Escape aborts an in-flight streaming response', async () => {
     const fetchMock = apiFetch as unknown as jest.Mock
     // Build a stream we can keep open until the component aborts it.

package/src/ai/parts/ConfirmationCard.tsx

@@ -210,7 +210,7 @@ function ConfirmationErrorAlert({
       : []
     return (
       <Alert
-        variant="warning"
+        status="warning"
         className="mt-3"
         data-ai-confirmation-error="stale_version"
       >
@@ -247,7 +247,7 @@ function ConfirmationErrorAlert({
   if (code === 'schema_drift') {
     return (
       <Alert
-        variant="warning"
+        status="warning"
         className="mt-3"
         data-ai-confirmation-error="schema_drift"
       >
@@ -270,7 +270,7 @@ function ConfirmationErrorAlert({
   if (code === 'invalid_status') {
     return (
       <Alert
-        variant="warning"
+        status="warning"
         className="mt-3"
         data-ai-confirmation-error="invalid_status"
       >
@@ -291,7 +291,7 @@ function ConfirmationErrorAlert({
   }
 
   return (
-    <Alert variant="destructive" className="mt-3" data-ai-confirmation-error={code}>
+    <Alert status="error" className="mt-3" data-ai-confirmation-error={code}>
       <AlertTitle>
         {t('ai_assistant.chat.mutation_cards.confirmation.errorTitle', 'Confirm failed')}
       </AlertTitle>

package/src/ai/parts/FieldDiffCard.tsx

@@ -128,7 +128,7 @@ export function FieldDiffCard({ fieldDiff, records }: FieldDiffCardProps) {
                 afterHeader={afterHeader}
               />
             ) : (
-              <Alert variant="info">
+              <Alert status="information">
                 <AlertDescription>
                   {t(
                     'ai_assistant.chat.mutation_cards.diff.empty',
@@ -145,7 +145,7 @@ export function FieldDiffCard({ fieldDiff, records }: FieldDiffCardProps) {
 
   if (flat.length === 0) {
     return (
-      <Alert variant="info" data-ai-field-diff-mode="empty">
+      <Alert status="information" data-ai-field-diff-mode="empty">
         <AlertDescription>
           {t(
             'ai_assistant.chat.mutation_cards.diff.empty',

package/src/ai/parts/MutationResultCard.tsx

@@ -79,7 +79,7 @@ export function MutationResultCard(props: MutationResultCardProps) {
 
   if (isSuccessStatus(status) && failedRecords && failedRecords.length > 0) {
     return (
-      <Alert variant="warning" data-ai-mutation-result="partial">
+      <Alert status="warning" data-ai-mutation-result="partial">
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.result.partialTitle',
@@ -116,7 +116,7 @@ export function MutationResultCard(props: MutationResultCardProps) {
     const recordId = result?.recordId ?? action.targetRecordId ?? null
     const href = payload.recordHref ?? null
     return (
-      <Alert variant="success" data-ai-mutation-result="success">
+      <Alert status="success" data-ai-mutation-result="success">
         <AlertTitle>
           {t('ai_assistant.chat.mutation_cards.result.successTitle', 'Action applied')}
         </AlertTitle>
@@ -281,7 +281,7 @@ export function MutationResultCard(props: MutationResultCardProps) {
       ? errorDetails!.issues!.filter((entry) => entry && (entry.message || entry.path))
       : []
     return (
-      <Alert variant="destructive" data-ai-mutation-result="failure">
+      <Alert status="error" data-ai-mutation-result="failure">
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.result.failureTitle',

package/src/ai/ui-parts/pending-phase3-placeholder.tsx

@@ -11,7 +11,7 @@ import type { AiUiPartProps } from '../ui-part-registry'
  * Consumers that forget to register the real mutation-approval cards still
  * see a humane "Phase 3 pending" state instead of the neutral debug chip the
  * `<AiChat>` fallback uses for genuinely unknown component ids. Uses the
- * shared DS `Alert` primitive with `variant="info"` — no hardcoded colors.
+ * shared DS `Alert` primitive with `status="information"` — no hardcoded colors.
  *
  * When Step 5.10 lands the real cards, app bootstrappers will call
  * `registerAiUiPart('mutation-preview-card', MutationPreviewCard)` (etc.)
@@ -23,7 +23,7 @@ export function PendingPhase3Placeholder({ componentId }: AiUiPartProps) {
   const t = useT()
   return (
     <Alert
-      variant="info"
+      status="information"
       data-ai-ui-part-pending-phase3={componentId}
     >
       <AlertTitle>

package/src/backend/AppShell.tsx

@@ -87,6 +87,7 @@ function isBooleanRecord(value: unknown): value is Record<string, boolean> {
 export type ShellLogo = {
   src: string
   alt?: string
+  preserveAspectRatio?: boolean
 }
 
 export type AppShellProps = {
@@ -186,6 +187,56 @@ function shouldBypassLogoOptimization(src?: string | null): boolean {
   return /^https?:\/\//.test(value) || /^\/api\/attachments\/(?:image|file)\//.test(value)
 }
 
+function ShellBrandLogo({
+  logo,
+  brandName,
+  unoptimized,
+  compact = false,
+  mobile = false,
+}: {
+  logo?: ShellLogo
+  brandName: string
+  unoptimized?: boolean
+  compact?: boolean
+  mobile?: boolean
+}) {
+  const src = logo?.src ?? '/open-mercato.svg'
+  const alt = logo?.alt ?? brandName
+  const isCustomLogo = Boolean(logo?.src)
+  const preserveAspectRatio = Boolean(logo?.preserveAspectRatio)
+  if (!isCustomLogo || !preserveAspectRatio) {
+    return (
+      <Image
+        src={src}
+        alt={alt}
+        width={mobile ? 28 : 40}
+        height={mobile ? 28 : 40}
+        className={`${mobile ? 'rounded' : 'rounded-full'} shrink-0 object-cover`}
+        unoptimized={unoptimized ? true : undefined}
+      />
+    )
+  }
+
+  const width = compact ? 40 : mobile ? 96 : 120
+  const height = mobile ? 28 : 40
+  const className = compact
+    ? 'h-10 max-w-10 w-auto shrink-0 object-contain'
+    : mobile
+      ? 'h-7 max-w-24 w-auto shrink-0 object-contain'
+      : 'h-10 max-w-[120px] w-auto shrink-0 object-contain'
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      unoptimized={unoptimized ? true : undefined}
+    />
+  )
+}
+
 function mergeSidebarItemsWithInjected(
   items: SidebarItem[],
   injectedItems: InjectionMenuItem[],
@@ -760,7 +811,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
               aria-label={t('appShell.goToDashboard')}
             >
-              <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+              <ShellBrandLogo logo={resolvedLogo} brandName={resolvedBrandName} compact={compact} unoptimized={resolvedLogoBypassesOptimization} />
               {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
             </Link>
           </div>
@@ -893,7 +944,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                 className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
                 aria-label={t('appShell.goToDashboard')}
               >
-                <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+                <ShellBrandLogo logo={resolvedLogo} brandName={resolvedBrandName} compact={compact} unoptimized={resolvedLogoBypassesOptimization} />
                 {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
               </Link>
             </div>
@@ -959,7 +1010,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
               aria-label={t('appShell.goToDashboard')}
             >
-              <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+              <ShellBrandLogo logo={resolvedLogo} brandName={resolvedBrandName} compact={compact} unoptimized={resolvedLogoBypassesOptimization} />
               {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
             </Link>
           </div>
@@ -1458,7 +1509,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           <aside className="absolute left-0 top-0 flex h-full w-[280px] max-w-[85vw] flex-col bg-background border-r shadow-lg overflow-hidden">
             <div className="shrink-0 flex items-center justify-between gap-2 border-b px-4 py-3">
               <Link href="/backend" className="flex items-center gap-2 min-w-0 text-sm font-semibold" onClick={() => setMobileOpen(false)} aria-label={t('appShell.goToDashboard')}>
-                <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={28} height={28} className="rounded shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+                <ShellBrandLogo logo={resolvedLogo} brandName={resolvedBrandName} mobile unoptimized={resolvedLogoBypassesOptimization} />
                 <span className="truncate">{resolvedBrandName}</span>
               </Link>
               <IconButton variant="ghost" size="sm" onClick={() => setMobileOpen(false)} aria-label={t('appShell.closeMenu')}>

package/src/backend/AuthSessionGuard.tsx

@@ -1,9 +1,37 @@
 'use client'
 import * as React from 'react'
 import { apiCall } from './utils/apiCall'
+import { clearAllPerspectiveState } from './perspectiveState'
 
 export const AUTH_IDENTITY_STORAGE_KEY = 'om:auth:identity'
 export const AUTH_IDENTITY_BROADCAST_CHANNEL = 'om-auth-identity'
+export const AUTH_IDENTITY_USER_STORAGE_KEY = 'om:auth:identity:user'
+
+/**
+ * Purge browser-local DataTable perspective state whenever the backend renders for a
+ * different user than the one it last rendered for (#4185).
+ *
+ * The login form also purges on submit, but that only fires when its client handler
+ * runs: a form submitted before hydration, an SSO/magic-link return, or any other
+ * entry point into the backend bypasses it entirely and the previous account's unsaved
+ * column widths carry over. Anchoring the purge to the observed server identity covers
+ * every route into the backend instead of one form.
+ *
+ * Missing identity metadata is treated as a legacy browser state and purged once:
+ * snapshots may predate this marker and belong to a different account. After the
+ * marker is recorded, an account's own unsaved widths survive a plain reload.
+ */
+function purgePerspectiveStateOnIdentityChange(serverUserId: string | null): void {
+  if (typeof window === 'undefined' || !serverUserId) return
+  try {
+    const lastSeenUserId = window.localStorage.getItem(AUTH_IDENTITY_USER_STORAGE_KEY)
+    if (lastSeenUserId === serverUserId) return
+    clearAllPerspectiveState()
+    window.localStorage.setItem(AUTH_IDENTITY_USER_STORAGE_KEY, serverUserId)
+  } catch {
+    // private mode / quota errors are non-fatal
+  }
+}
 
 type FeatureCheckResponse = {
   ok: boolean
@@ -24,6 +52,7 @@ export const __reload = {
 export function AuthSessionGuard({ serverUserId }: AuthSessionGuardProps) {
   React.useEffect(() => {
     if (typeof window === 'undefined') return
+    purgePerspectiveStateOnIdentityChange(serverUserId)
     let cancelled = false
     let reloadScheduled = false
 

package/src/backend/BackendChromeProvider.tsx

@@ -3,7 +3,10 @@
 import * as React from 'react'
 import { apiCall } from './utils/apiCall'
 import { subscribeOrganizationScopeChanged, getCurrentOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/organizationEvents'
-import type { BackendChromePayload } from '@open-mercato/shared/modules/navigation/backendChrome'
+import type {
+  BackendChromeCurrentOrganization,
+  BackendChromePayload,
+} from '@open-mercato/shared/modules/navigation/backendChrome'
 
 type BackendChromeContextValue = {
   payload: BackendChromePayload | null
@@ -99,3 +102,18 @@ export function useBackendChrome(): BackendChromeContextValue {
     refresh: async () => {},
   }
 }
+
+/**
+ * The organization the backend chrome is currently scoped to, for UI that needs to label
+ * "you are viewing: <name>".
+ *
+ * Reads the payload this provider already holds, so it costs no additional request. Returns `null`
+ * under an all-organizations selection, outside a provider, or before the payload has arrived — treat
+ * it as "unknown", not as "no organization".
+ *
+ * Prefer this over `payload.brand`, which only populates when the organization has a logo configured.
+ */
+export function useCurrentOrganization(): BackendChromeCurrentOrganization | null {
+  const { payload } = useBackendChrome()
+  return payload?.currentOrganization ?? null
+}

package/src/backend/CrudForm.tsx

@@ -107,6 +107,7 @@ import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/share
 import { insertByInjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { crudFormExtensionSpotId, extensionSpotChildId } from '@open-mercato/shared/modules/widgets/extension-points'
 import { RichEditor, type RichEditorLabels } from '../primitives/rich-editor'
 import MarkdownField from './inputs/MarkdownField'
 
@@ -816,7 +817,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     if (injectionSpotId) return injectionSpotId
     if (resolvedEntityIds.length) {
       const normalized = resolvedEntityIds[0].replace(/[:]+/g, '.')
-      return `crud-form:${normalized}`
+      return crudFormExtensionSpotId(normalized)
     }
     return undefined
   }, [injectionSpotId, resolvedEntityIds])
@@ -825,7 +826,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     if (resolvedEntityIds.length) return ComponentReplacementHandles.crudForm(resolvedEntityIds[0].replace(/[:]+/g, '.'))
     return ComponentReplacementHandles.crudForm('unknown')
   }, [replacementHandle, resolvedEntityIds])
-  const headerInjectionSpotId = resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : undefined
+  const headerInjectionSpotId = resolvedInjectionSpotId
+    ? extensionSpotChildId(resolvedInjectionSpotId, 'header')
+    : undefined
   
   const recordId = React.useMemo(() => {
     const raw = values.id
@@ -1083,7 +1086,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     triggerOnLoad: true,
   })
   const { widgets: injectedFieldWidgets } = useInjectionDataWidgets(
-    resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:fields` : '__disabled__:fields'
+    resolvedInjectionSpotId
+      ? extensionSpotChildId(resolvedInjectionSpotId, 'fields')
+      : '__disabled__:fields'
   )
   
   const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? '', injectionWidgets)
@@ -2402,10 +2407,19 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
   const handleFieldsetSelectionChange = React.useCallback(
     (entityId: string, nextCode: string | null) => {
+      // The fieldset selector never renders an empty option, so a user can never
+      // pick "no fieldset". An empty/null value here only comes from Radix's
+      // hidden native <select>, which fires a spurious onChange when the
+      // controlled value is changed programmatically after mount (e.g. when the
+      // persisted customFieldsetCode arrives via async initialValues and the
+      // binding hydrates the selection). Honoring that reset would wipe both the
+      // selection and the bound value, collapsing the form back to the default
+      // fieldset (#2646). Ignore it.
+      if (!nextCode) return
       setCfFieldsetSelections((prev) => ({ ...prev, [entityId]: nextCode }))
       const bindingKey = customFieldsetBindings?.[entityId]?.valueKey
       if (bindingKey) {
-        setValue(bindingKey, nextCode ?? undefined)
+        setValue(bindingKey, nextCode)
       }
     },
     [customFieldsetBindings, setValue],