@open-mercato/ui 0.4.11-develop.2631.481e9df5b0 → 0.5.0

package/src/backend/AppShell.tsx

@@ -54,6 +54,7 @@ export type AppShellProps = {
       title: string
       defaultTitle?: string
       icon?: React.ReactNode
+      iconName?: string
       iconMarkup?: string
       enabled?: boolean
       hidden?: boolean
@@ -64,6 +65,7 @@ export type AppShellProps = {
         title: string
         defaultTitle?: string
         icon?: React.ReactNode
+        iconName?: string
         iconMarkup?: string
         enabled?: boolean
         hidden?: boolean
@@ -109,6 +111,7 @@ function convertInjectedMenuItemToSidebarItem(item: InjectionMenuItem, title: st
     title,
     defaultTitle: title,
     icon: resolveInjectedIcon(item.icon) ?? undefined,
+    iconName: item.icon,
     enabled: true,
     hidden: false,
     pageContext: 'main',
@@ -302,8 +305,17 @@ function SerializedIcon({ markup }: { markup: string }) {
   return <span aria-hidden="true" dangerouslySetInnerHTML={{ __html: markup }} />
 }
 
-function renderIcon(icon: React.ReactNode | undefined, iconMarkup: string | undefined, fallback: React.ReactNode) {
+function renderIcon(
+  icon: React.ReactNode | undefined,
+  iconName: string | undefined,
+  iconMarkup: string | undefined,
+  fallback: React.ReactNode,
+) {
   if (icon) return icon
+  if (iconName) {
+    const resolved = resolveInjectedIcon(iconName)
+    if (resolved) return resolved
+  }
   if (iconMarkup) return <SerializedIcon markup={iconMarkup} />
   return fallback
 }
@@ -862,6 +874,7 @@ function AppShellBody({ productName, email, groups, rightHeaderSlot, children, s
                     <span className={`flex items-center justify-center shrink-0 ${compact ? '' : 'text-muted-foreground'}`}>
                       {renderIcon(
                         item.icon,
+                        item.iconName,
                         item.iconMarkup,
                         item.href.includes('/backend/entities/user/') && item.href.endsWith('/records') ? DataTableIcon : DefaultIcon,
                       )}
@@ -1243,7 +1256,12 @@ function AppShellBody({ productName, email, groups, rightHeaderSlot, children, s
                                         <span className="absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" />
                                       ) : null}
                                       <span className={`flex items-center justify-center shrink-0 ${compact ? '' : 'text-muted-foreground'}`}>
-                                        {renderIcon(i.icon, i.iconMarkup, DefaultIcon)}
+                                        {renderIcon(
+                                          i.icon,
+                                          i.iconName,
+                                          i.iconMarkup,
+                                          DefaultIcon,
+                                        )}
                                       </span>
                                       {!compact && <span>{i.title}</span>}
                                     </Link>
@@ -1270,6 +1288,7 @@ function AppShellBody({ productName, email, groups, rightHeaderSlot, children, s
                                               <span className={`flex items-center justify-center shrink-0 ${compact ? '' : 'text-muted-foreground'}`}>
                                                 {renderIcon(
                                                   c.icon,
+                                                  c.iconName,
                                                   c.iconMarkup,
                                                   c.href.includes('/backend/entities/user/') && c.href.endsWith('/records') ? DataTableIcon : DefaultIcon,
                                                 )}
@@ -1564,6 +1583,7 @@ AppShell.cloneGroups = function cloneGroups(groups: AppShellProps['groups']): Ap
     title: item.title,
     defaultTitle: item.defaultTitle,
     icon: item.icon,
+    iconName: item.iconName,
     iconMarkup: item.iconMarkup,
     enabled: item.enabled,
     hidden: item.hidden,

package/src/backend/DataTable.tsx

@@ -677,11 +677,34 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
 }
 
 function sanitizeDndContextId(value: string): string {
-  const normalized = value
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9_-]+/g, '-')
-    .replace(/^-+|-+$/g, '')
+  const trimmed = value.trim().toLowerCase()
+  let normalized = ''
+  let previousWasDash = false
+
+  for (const character of trimmed) {
+    const isLowercaseLetter = character >= 'a' && character <= 'z'
+    const isDigit = character >= '0' && character <= '9'
+
+    if (isLowercaseLetter || isDigit || character === '_') {
+      normalized += character
+      previousWasDash = false
+      continue
+    }
+
+    if (!previousWasDash) {
+      normalized += '-'
+      previousWasDash = true
+    }
+  }
+
+  while (normalized.startsWith('-')) {
+    normalized = normalized.slice(1)
+  }
+
+  while (normalized.endsWith('-')) {
+    normalized = normalized.slice(0, -1)
+  }
+
   return normalized.length > 0 ? normalized : 'data-table'
 }
 

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

@@ -383,4 +383,71 @@ describe('AppShell', () => {
       ;(window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch = previousOriginalFetch
     }
   })
+
+  it('renders nav icons from iconName when iconMarkup is missing', async () => {
+    const previousFetch = global.fetch
+    const previousWindowFetch = window.fetch
+    const previousOriginalFetch = (window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch
+    const fetchMock = jest.fn(async (input: RequestInfo | URL) => {
+      const url = typeof input === 'string'
+        ? input
+        : input instanceof Request
+          ? input.url
+          : input.toString()
+      if (url.includes('/api/auth/admin/nav-icon-fallback')) {
+        return new Response(JSON.stringify({
+          groups: [
+            {
+              id: 'checkout',
+              name: 'Checkout',
+              defaultName: 'Checkout',
+              items: [
+                {
+                  href: '/backend/checkout/pay-links',
+                  title: 'Pay Links',
+                  defaultTitle: 'Pay Links',
+                  enabled: true,
+                  iconName: 'ticket',
+                },
+              ],
+            },
+          ],
+          settingsSections: [],
+          settingsPathPrefixes: [],
+          profileSections: [],
+          profilePathPrefixes: ['/backend/profile/'],
+          grantedFeatures: ['checkout.view'],
+          roles: ['admin'],
+        }), { status: 200, headers: { 'content-type': 'application/json' } })
+      }
+      return new Response(JSON.stringify([]), { status: 200, headers: { 'content-type': 'application/json' } })
+    }) as unknown as typeof fetch
+    global.fetch = fetchMock
+    window.fetch = fetchMock
+    ;(window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch = fetchMock
+
+    try {
+      renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={[]}
+          adminNavApi="/api/auth/admin/nav-icon-fallback"
+        >
+          <div>Hydrated content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Pay Links')).toBeInTheDocument()
+      })
+
+      const link = screen.getByRole('link', { name: 'Pay Links' })
+      expect(link.querySelector('svg.lucide-ticket')).toBeTruthy()
+    } finally {
+      global.fetch = previousFetch
+      window.fetch = previousWindowFetch
+      ;(window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch = previousOriginalFetch
+    }
+  })
 })

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

@@ -78,4 +78,3 @@ describe('FormHeader', () => {
     )
   })
 })
-

package/src/backend/detail/CustomDataSection.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import dynamic from 'next/dynamic'
 import type { PluggableList } from 'unified'
 import { Pencil, X } from 'lucide-react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -30,19 +29,11 @@ import {
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { MarkdownPreview } from '../markdown'
 import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
-type MarkdownPreviewProps = { children: string; className?: string; remarkPlugins?: PluggableList }
-
 const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
 
-const MarkdownPreview: React.ComponentType<MarkdownPreviewProps> = isTestEnv
-  ? ({ children, className }) => <div className={className}>{children}</div>
-  : (dynamic(() => import('react-markdown').then((mod) => mod.default as React.ComponentType<MarkdownPreviewProps>), {
-      ssr: false,
-      loading: () => null,
-    }) as unknown as React.ComponentType<MarkdownPreviewProps>)
-
 let markdownPluginsPromise: Promise<PluggableList> | null = null
 
 async function loadMarkdownPlugins(): Promise<PluggableList> {

package/src/backend/detail/InlineEditors.tsx

@@ -11,6 +11,7 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { LoadingMessage } from './LoadingMessage'
 import { mapCrudServerErrorToFormErrors } from '../utils/serverErrors'
+import { MarkdownPreview } from '../markdown'
 
 function resolveInlineErrorMessage(err: unknown, fallbackMessage: string): string {
   const { message, fieldErrors } = mapCrudServerErrorToFormErrors(err)
@@ -390,12 +391,6 @@ type UiMarkdownEditorProps = {
   previewOptions?: { remarkPlugins?: unknown[] }
 }
 
-type MarkdownPreviewProps = {
-  children: string
-  className?: string
-  remarkPlugins?: PluggableList
-}
-
 const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
 
 function MarkdownEditorFallback() {
@@ -421,13 +416,6 @@ const MarkdownEditorComponent: React.ComponentType<UiMarkdownEditorProps> = isTe
       loading: () => <MarkdownEditorFallback />,
     }) as unknown as React.ComponentType<UiMarkdownEditorProps>)
 
-const MarkdownPreviewComponent: React.ComponentType<MarkdownPreviewProps> = isTestEnv
-  ? ({ children, className }) => <div className={className}>{children}</div>
-  : (dynamic(() => import('react-markdown').then((mod) => mod.default as React.ComponentType<MarkdownPreviewProps>), {
-      ssr: false,
-      loading: () => null,
-    }) as unknown as React.ComponentType<MarkdownPreviewProps>)
-
 let markdownPluginsPromise: Promise<PluggableList> | null = null
 
 async function loadMarkdownPlugins(): Promise<PluggableList> {
@@ -708,12 +696,12 @@ export function InlineMultilineEditor({
               {renderDisplay ? (
                 renderDisplay({ value, emptyLabel })
               ) : value && value.length ? (
-                <MarkdownPreviewComponent
+                <MarkdownPreview
                   remarkPlugins={markdownPlugins}
                   className="prose prose-sm max-w-none text-foreground [&>*]:my-2 [&>*:last-child]:mb-0 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5"
                 >
                   {value}
-                </MarkdownPreviewComponent>
+                </MarkdownPreview>
               ) : (
                 <span className="text-muted-foreground">{emptyLabel}</span>
               )}

package/src/backend/detail/NotesSection.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from 'react'
-import dynamic from 'next/dynamic'
 import type { PluggableList } from 'unified'
 import type { AppearanceSelectorLabels } from '@open-mercato/core/modules/dictionaries/components/AppearanceSelector'
 import { AppearanceDialog } from '@open-mercato/core/modules/customers/components/detail/AppearanceDialog'
@@ -17,9 +16,12 @@ import { TabEmptyState } from './TabEmptyState'
 import { useConfirmDialog } from '../confirm-dialog'
 import { formatDateTime } from '@open-mercato/shared/lib/time'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { MarkdownPreview } from '../markdown'
 import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 type Translator = (key: string, fallback?: string, params?: Record<string, string | number>) => string
 
+const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
+
 export type SectionAction = {
   label: React.ReactNode
   onClick: () => void
@@ -70,17 +72,6 @@ export type NotesDataAdapter<C = unknown> = {
 type RenderIconFn = (icon: string, className?: string) => React.ReactNode
 type RenderColorFn = (color: string, className?: string) => React.ReactNode
 
-type MarkdownPreviewProps = { children: string; className?: string; remarkPlugins?: PluggableList }
-
-const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
-
-const MarkdownPreviewComponent: React.ComponentType<MarkdownPreviewProps> = isTestEnv
-  ? ({ children, className }) => <div className={className}>{children}</div>
-  : (dynamic(() => import('react-markdown').then((mod) => mod.default as React.ComponentType<MarkdownPreviewProps>), {
-      ssr: false,
-      loading: () => null,
-    }) as unknown as React.ComponentType<MarkdownPreviewProps>)
-
 let markdownPluginsPromise: Promise<PluggableList> | null = null
 
 async function loadMarkdownPlugins(): Promise<PluggableList> {
@@ -1193,12 +1184,12 @@ function NotesSectionImpl<C = unknown>({
                     onClick={() => setContentEditor({ id: note.id, value: note.body })}
                     onKeyDown={(event) => handleContentKeyDown(event, note)}
                   >
-                    <MarkdownPreviewComponent
+                    <MarkdownPreview
                       remarkPlugins={markdownPlugins}
                       className="break-words text-foreground [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs"
                     >
                       {note.body}
-                    </MarkdownPreviewComponent>
+                    </MarkdownPreview>
                   </div>
                 )}
               </div>

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

@@ -5,12 +5,20 @@
 import type * as React from 'react'
 import type { LucideIcon } from 'lucide-react'
 import {
+  Activity,
   AlertCircle,
+  AlertOctagon,
   AlertTriangle,
+  Archive,
+  Award,
   BadgeCheck,
+  Ban,
+  Banknote,
   BarChart2,
+  BarChart3,
   Bell,
   Bolt,
+  Bookmark,
   Box,
   Briefcase,
   BriefcaseBusiness,
@@ -19,11 +27,16 @@ import {
   Calendar,
   CalendarCheck,
   CalendarClock,
+  CalendarCog,
+  CalendarMinus,
   CalendarOff,
   CalendarX,
   Check,
   CheckCircle,
+  CheckCircle2,
   CheckSquare,
+  Circle,
+  ClipboardCheck,
   ClipboardList,
   Clock,
   Clock3,
@@ -35,68 +48,107 @@ import {
   Download,
   ExternalLink,
   FileMinus,
+  FilePenLine,
   FileText,
   FilterX,
+  Flag,
   FolderTree,
+  Gauge,
   GitBranch,
   GitCompareArrows,
   GitPullRequestArrow,
+  Globe,
+  GraduationCap,
+  Hand,
   Handshake,
   Heart,
+  Hourglass,
   Inbox,
   Key,
   KeyRound,
   Layers,
+  Lightbulb,
   LineChart,
+  Link,
   List,
+  Loader,
+  Loader2,
   Lock,
   Mail,
   MailOpen,
   MapPin,
+  Megaphone,
+  Notebook,
   Package,
+  PackageCheck,
   PackagePlus,
   PackageX,
+  PauseCircle,
   Percent,
+  Phone,
+  PhoneCall,
   PieChart,
   PlusSquare,
   Receipt,
   ReceiptText,
+  RefreshCcw,
   Reply,
+  RotateCcw,
   Ruler,
+  Send,
   Settings,
   Shapes,
   Shield,
   ShieldAlert,
   ShieldCheck,
+  ShoppingBag,
   ShoppingCart,
+  Shuffle,
   Sliders,
   Smartphone,
+  Sparkles,
+  Star,
   StickyNote,
   Store,
   Tag,
+  Target,
+  ThumbsUp,
   Ticket,
   Trash2,
   TrendingUp,
+  TriangleAlert,
   Trophy,
   Truck,
+  Undo2,
   Unlock,
   User,
+  UserCheck,
   UserMinus,
   UserPlus,
   UserRound,
   Users,
+  Wallet,
   Webhook,
+  Wrench,
   X,
   XCircle,
 } from 'lucide-react'
 
 export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
+  'activity': Activity,
   'alert-circle': AlertCircle,
+  'alert-octagon': AlertOctagon,
   'alert-triangle': AlertTriangle,
+  'archive': Archive,
+  'award': Award,
   'badge-check': BadgeCheck,
+  'ban': Ban,
+  'banknote': Banknote,
   'bar-chart-2': BarChart2,
+  'bar-chart-3': BarChart3,
   'bell': Bell,
   'bolt': Bolt,
+  'bookmark': Bookmark,
   'box': Box,
   'briefcase': Briefcase,
   'briefcase-business': BriefcaseBusiness,
@@ -105,11 +157,16 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'calendar': Calendar,
   'calendar-check': CalendarCheck,
   'calendar-clock': CalendarClock,
+  'calendar-cog': CalendarCog,
+  'calendar-minus': CalendarMinus,
   'calendar-off': CalendarOff,
   'calendar-x': CalendarX,
   'check': Check,
   'check-circle': CheckCircle,
+  'check-circle-2': CheckCircle2,
   'check-square': CheckSquare,
+  'circle': Circle,
+  'clipboard-check': ClipboardCheck,
   'clipboard-list': ClipboardList,
   'clock': Clock,
   'clock-3': Clock3,
@@ -121,57 +178,88 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'download': Download,
   'external-link': ExternalLink,
   'file-minus': FileMinus,
+  'file-pen-line': FilePenLine,
   'file-text': FileText,
   'filter-x': FilterX,
+  'flag': Flag,
   'folder-tree': FolderTree,
+  'gauge': Gauge,
   'git-branch': GitBranch,
   'git-compare-arrows': GitCompareArrows,
   'git-pull-request-arrow': GitPullRequestArrow,
+  'globe': Globe,
+  'graduation-cap': GraduationCap,
+  'hand': Hand,
   'handshake': Handshake,
   'heart': Heart,
+  'hourglass': Hourglass,
   'inbox': Inbox,
   'key': Key,
   'key-round': KeyRound,
   'layers': Layers,
+  'lightbulb': Lightbulb,
   'line-chart': LineChart,
+  'link': Link,
   'list': List,
+  'loader': Loader,
+  'loader-2': Loader2,
   'lock': Lock,
   'mail': Mail,
   'mail-open': MailOpen,
   'map-pin': MapPin,
+  'megaphone': Megaphone,
+  'notebook': Notebook,
   'package': Package,
+  'package-check': PackageCheck,
   'package-plus': PackagePlus,
   'package-x': PackageX,
+  'pause-circle': PauseCircle,
   'percent': Percent,
+  'phone': Phone,
+  'phone-call': PhoneCall,
   'pie-chart': PieChart,
   'plus-square': PlusSquare,
   'receipt': Receipt,
   'receipt-text': ReceiptText,
+  'refresh-ccw': RefreshCcw,
   'reply': Reply,
+  'rotate-ccw': RotateCcw,
   'ruler': Ruler,
+  'send': Send,
   'settings': Settings,
   'shapes': Shapes,
   'shield': Shield,
   'shield-alert': ShieldAlert,
   'shield-check': ShieldCheck,
+  'shopping-bag': ShoppingBag,
   'shopping-cart': ShoppingCart,
+  'shuffle': Shuffle,
   'sliders': Sliders,
   'smartphone': Smartphone,
+  'sparkles': Sparkles,
+  'star': Star,
   'sticky-note': StickyNote,
   'store': Store,
   'tag': Tag,
+  'target': Target,
+  'thumbs-up': ThumbsUp,
   'ticket': Ticket,
   'trash-2': Trash2,
   'trending-up': TrendingUp,
+  'triangle-alert': TriangleAlert,
   'trophy': Trophy,
   'truck': Truck,
+  'undo-2': Undo2,
   'unlock': Unlock,
   'user': User,
+  'user-check': UserCheck,
   'user-minus': UserMinus,
   'user-plus': UserPlus,
   'user-round': UserRound,
   'users': Users,
+  'wallet': Wallet,
   'webhook': Webhook,
+  'wrench': Wrench,
   'x': X,
   'x-circle': XCircle,
 }
@@ -179,13 +267,15 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
 function normalizeKebabIconName(input: string): string {
   const trimmed = input.trim()
   if (!trimmed) return ''
-  if (!trimmed.includes('-') && !trimmed.includes('_') && !trimmed.includes(' ') && /[A-Z]/.test(trimmed)) {
-    return trimmed
+  const withoutPrefix = trimmed.startsWith('lucide:') ? trimmed.slice('lucide:'.length) : trimmed
+  if (!withoutPrefix) return ''
+  if (!withoutPrefix.includes('-') && !withoutPrefix.includes('_') && !withoutPrefix.includes(' ') && /[A-Z]/.test(withoutPrefix)) {
+    return withoutPrefix
       .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
       .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
       .toLowerCase()
   }
-  return trimmed
+  return withoutPrefix
     .replace(/[_\s]+/g, '-')
     .replace(/-+/g, '-')
     .toLowerCase()

package/src/backend/injection/__tests__/resolveInjectedIcon.test.tsx

@@ -36,4 +36,11 @@ describe('resolveInjectedIcon', () => {
   it('returns null for an empty string', () => {
     expect(resolveInjectedIcon('')).toBeNull()
   })
+
+  it('resolves lucide-prefixed icon names', () => {
+    const node = resolveInjectedIcon('lucide:bell')
+    expect(node).not.toBeNull()
+    const { container } = render(<>{node}</>)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
 })