create-mercato-app 0.4.2-canary-e5804f7db1

package/template/src/bootstrap.ts

@@ -0,0 +1,58 @@
+/**
+ * App-level bootstrap file
+ *
+ * This thin wrapper imports generated files and passes them to the
+ * shared bootstrap factory. The actual bootstrap logic lives in
+ * @open-mercato/shared/lib/bootstrap.
+ *
+ * This file is imported by layout.tsx and API routes to initialize
+ * the application before any package code executes.
+ */
+
+// Register app dictionary loader before bootstrap (required for i18n in standalone packages)
+import { registerAppDictionaryLoader } from '@open-mercato/shared/lib/i18n/server'
+import type { Locale } from '@open-mercato/shared/lib/i18n/config'
+
+registerAppDictionaryLoader(async (locale: Locale): Promise<Record<string, unknown>> => {
+  switch (locale) {
+    case 'en':
+      return import('./i18n/en.json').then((m) => m.default)
+    case 'pl':
+      return import('./i18n/pl.json').then((m) => m.default)
+    case 'es':
+      return import('./i18n/es.json').then((m) => m.default)
+    case 'de':
+      return import('./i18n/de.json').then((m) => m.default)
+    default:
+      return import('./i18n/en.json').then((m) => m.default)
+  }
+})
+
+// Generated imports (static - works with bundlers)
+import { modules } from '@/.mercato/generated/modules.generated'
+import { entities } from '@/.mercato/generated/entities.generated'
+import { diRegistrars } from '@/.mercato/generated/di.generated'
+import { E } from '@/.mercato/generated/entities.ids.generated'
+import { entityFieldsRegistry } from '@/.mercato/generated/entity-fields-registry'
+import { dashboardWidgetEntries } from '@/.mercato/generated/dashboard-widgets.generated'
+import { injectionWidgetEntries } from '@/.mercato/generated/injection-widgets.generated'
+import { injectionTables } from '@/.mercato/generated/injection-tables.generated'
+import { searchModuleConfigs } from '@/.mercato/generated/search.generated'
+
+// Bootstrap factory from shared package
+import { createBootstrap, isBootstrapped } from '@open-mercato/shared/lib/bootstrap'
+
+// Create bootstrap function with app's generated data
+export const bootstrap = createBootstrap({
+  modules,
+  entities,
+  diRegistrars,
+  entityIds: E,
+  entityFieldsRegistry,
+  dashboardWidgetEntries,
+  injectionWidgetEntries,
+  injectionTables,
+  searchModuleConfigs,
+})
+
+export { isBootstrapped }

package/template/src/components/ClientBootstrap.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from 'react'
+import { injectionWidgetEntries } from '@/.mercato/generated/injection-widgets.generated'
+import { injectionTables } from '@/.mercato/generated/injection-tables.generated'
+import { registerCoreInjectionWidgets, registerCoreInjectionTables } from '@open-mercato/core/modules/widgets/lib/injection'
+import { registerInjectionWidgets } from '@open-mercato/ui/backend/injection/widgetRegistry'
+import { dashboardWidgetEntries } from '@/.mercato/generated/dashboard-widgets.generated'
+import { registerDashboardWidgets } from '@open-mercato/ui/backend/dashboard/widgetRegistry'
+
+let _clientBootstrapped = false
+
+function clientBootstrap() {
+  if (_clientBootstrapped) return
+  _clientBootstrapped = true
+
+  // Register injection widgets
+  registerInjectionWidgets(injectionWidgetEntries)
+  registerCoreInjectionWidgets(injectionWidgetEntries)
+  registerCoreInjectionTables(injectionTables)
+
+  // Register dashboard widgets
+  registerDashboardWidgets(dashboardWidgetEntries)
+}
+
+export function ClientBootstrapProvider({ children }: { children: React.ReactNode }) {
+  React.useEffect(() => {
+    clientBootstrap()
+  }, [])
+
+  // Also bootstrap synchronously on first render for SSR hydration
+  if (typeof window !== 'undefined' && !_clientBootstrapped) {
+    clientBootstrap()
+  }
+
+  return <>{children}</>
+}

package/template/src/components/GlobalNoticeBars.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const DEMO_NOTICE_COOKIE = 'om_demo_notice_ack'
+const COOKIE_NOTICE_COOKIE = 'om_cookie_notice_ack'
+
+function getCookie(name: string): string | null {
+  if (typeof document === 'undefined') return null
+  const match = document.cookie.split(';').map((entry) => entry.trim()).find((entry) => entry.startsWith(`${name}=`))
+  return match ? match.split('=').slice(1).join('=') : null
+}
+
+function setCookie(name: string, value: string, days = 365) {
+  if (typeof document === 'undefined') return
+  const maxAge = days * 24 * 60 * 60
+  document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax`
+}
+
+export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean }) {
+  const t = useT()
+  const [showDemoNotice, setShowDemoNotice] = useState(false)
+  const [showCookieNotice, setShowCookieNotice] = useState(false)
+
+  useEffect(() => {
+    if (demoModeEnabled && !getCookie(DEMO_NOTICE_COOKIE)) {
+      setShowDemoNotice(true)
+    }
+    if (!getCookie(COOKIE_NOTICE_COOKIE)) {
+      setShowCookieNotice(true)
+    }
+  }, [demoModeEnabled])
+
+  const activeBars = [showDemoNotice, showCookieNotice].filter(Boolean).length
+  if (activeBars === 0) return null
+
+  const handleDismissDemo = () => {
+    setCookie(DEMO_NOTICE_COOKIE, 'ack')
+    setShowDemoNotice(false)
+  }
+
+  const handleDismissCookies = () => {
+    setCookie(COOKIE_NOTICE_COOKIE, 'dismissed')
+    setShowCookieNotice(false)
+  }
+
+  const handleAcceptCookies = () => {
+    setCookie(COOKIE_NOTICE_COOKIE, 'ack')
+    setShowCookieNotice(false)
+  }
+
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[70] flex flex-col items-center gap-3 px-4">
+      {showDemoNotice ? (
+        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-amber-200 bg-amber-50/90 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-amber-50/70 dark:border-amber-900/70 dark:bg-amber-950/40">
+          <div className="flex items-start gap-3">
+            <div className="flex-1 text-sm text-amber-900 dark:text-amber-50 space-y-1">
+              <p className="font-medium">{t('notices.demo.title', 'Demo Environment')}</p>
+              <p>
+                {t('notices.demo.description', 'This instance is provided for demo purposes only. Data may be reset at any time and is not retained for any guaranteed period.')}
+              </p>
+              <p>
+                {t('notices.demo.superadminQuestion', 'Need persistent superadmin access?')}{' '}
+                <a
+                  href="https://github.com/open-mercato"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200"
+                >
+                  {t('notices.demo.installLink', 'Install Open Mercato locally')}
+                </a>
+                . {t('notices.demo.reviewLinks', 'Review our')}{' '}
+                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/terms">
+                  {t('common.terms')}
+                </Link>{' '}
+                {t('notices.demo.and', 'and')}{' '}
+                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/privacy">
+                  {t('common.privacy')}
+                </Link>
+                .
+              </p>
+            </div>
+            <Button variant="ghost" size="icon" onClick={handleDismissDemo} className="shrink-0 text-amber-900 dark:text-amber-100">
+              <X className="size-4" />
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      {showCookieNotice ? (
+        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-slate-300 bg-background/95 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80 dark:border-slate-700">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="text-sm text-muted-foreground">
+              {t('notices.cookies.description', 'We use essential cookies to remember your preferences. Learn how we handle data in our')}{' '}
+              <Link className="underline font-medium hover:text-foreground" href="/privacy">
+                {t('common.privacy')}
+              </Link>.
+            </div>
+            <div className="flex items-center gap-2 self-end sm:self-auto">
+              <Button variant="ghost" size="sm" onClick={handleDismissCookies}>
+                {t('notices.cookies.dismiss', 'Dismiss')}
+              </Button>
+              <Button size="sm" onClick={handleAcceptCookies}>
+                {t('notices.cookies.accept', 'Accept cookies')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/template/src/components/OrganizationSwitcher.tsx

@@ -0,0 +1,360 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
+import { OrganizationSelect, type OrganizationTreeNode } from '@open-mercato/core/modules/directory/components/OrganizationSelect'
+import { TenantSelect, type TenantRecord } from '@open-mercato/core/modules/directory/components/TenantSelect'
+import { ALL_ORGANIZATIONS_COOKIE_VALUE } from '@open-mercato/core/modules/directory/constants'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type OrganizationMenuNode = {
+  id: string
+  name: string
+  depth: number
+  selectable: boolean
+  children: OrganizationMenuNode[]
+}
+
+type SwitcherState =
+  | { status: 'loading' }
+  | { status: 'error' }
+  | { status: 'hidden' }
+  | {
+      status: 'ready'
+      nodes: OrganizationMenuNode[]
+      selectedId: string | null
+      canManage: boolean
+      tenantId: string | null
+      tenants: TenantRecord[]
+      isSuperAdmin: boolean
+    }
+
+type SelectedCookieState = {
+  value: string
+  hasCookie: boolean
+  raw: string | null
+}
+
+type TenantCookieState = {
+  value: string
+  hasCookie: boolean
+  raw: string | null
+}
+
+type OrganizationSwitcherPayload = {
+  items?: unknown
+  selectedId?: string | null
+  canManage?: boolean
+  tenantId?: string | null
+  tenants?: unknown
+  isSuperAdmin?: boolean
+}
+
+function readSelectedOrganizationCookie(): SelectedCookieState {
+  if (typeof document === 'undefined') return { value: '', hasCookie: false, raw: null }
+  const cookies = document.cookie.split(';')
+  for (const entry of cookies) {
+    const trimmed = entry.trim()
+    if (trimmed.startsWith('om_selected_org=')) {
+      const raw = trimmed.slice('om_selected_org='.length)
+      try {
+        const decoded = decodeURIComponent(raw)
+        if (!decoded) {
+          return { value: '', hasCookie: true, raw: '' }
+        }
+        if (decoded === ALL_ORGANIZATIONS_COOKIE_VALUE) {
+          return { value: '', hasCookie: true, raw: decoded }
+        }
+        return { value: decoded, hasCookie: true, raw: decoded }
+      } catch {
+        if (!raw) {
+          return { value: '', hasCookie: true, raw }
+        }
+        if (raw === ALL_ORGANIZATIONS_COOKIE_VALUE) {
+          return { value: '', hasCookie: true, raw }
+        }
+        return { value: raw, hasCookie: true, raw }
+      }
+    }
+  }
+  return { value: '', hasCookie: false, raw: null }
+}
+
+function readSelectedTenantCookie(): TenantCookieState {
+  if (typeof document === 'undefined') return { value: '', hasCookie: false, raw: null }
+  const cookies = document.cookie.split(';')
+  for (const entry of cookies) {
+    const trimmed = entry.trim()
+    if (trimmed.startsWith('om_selected_tenant=')) {
+      const raw = trimmed.slice('om_selected_tenant='.length)
+      try {
+        const decoded = decodeURIComponent(raw)
+        return { value: decoded || '', hasCookie: true, raw: decoded }
+      } catch {
+        return { value: raw || '', hasCookie: true, raw }
+      }
+    }
+  }
+  return { value: '', hasCookie: false, raw: null }
+}
+
+function findFirstSelectable(nodes: OrganizationMenuNode[] | undefined): string | null {
+  if (!Array.isArray(nodes)) return null
+  for (const node of nodes) {
+    if (!node) continue
+    if (node.selectable !== false && typeof node.id === 'string' && node.id) return node.id
+    const child = findFirstSelectable(node.children)
+    if (child) return child
+  }
+  return null
+}
+
+export default function OrganizationSwitcher() {
+  const router = useRouter()
+  const t = useT()
+  const [state, setState] = React.useState<SwitcherState>({ status: 'loading' })
+  const [cookieState, setCookieState] = React.useState<SelectedCookieState>(() => readSelectedOrganizationCookie())
+  const [tenantCookieState, setTenantCookieState] = React.useState<TenantCookieState>(() => readSelectedTenantCookie())
+  const cookieStateRef = React.useRef(cookieState)
+  cookieStateRef.current = cookieState
+  const tenantCookieRef = React.useRef(tenantCookieState)
+  tenantCookieRef.current = tenantCookieState
+  const value = cookieState.value
+  const tenantValue = tenantCookieState.value
+
+  const persistTenant = React.useCallback((next: string | null, options?: { refresh?: boolean }) => {
+    if (typeof document === 'undefined') return
+    const resolved = next ?? ''
+    setTenantCookieState({ value: resolved, hasCookie: true, raw: resolved })
+    const maxAge = 60 * 60 * 24 * 30
+    try {
+      document.cookie = `om_selected_tenant=${encodeURIComponent(resolved)}; path=/; max-age=${maxAge}; samesite=lax`
+    } catch {
+      // ignore failures
+    }
+    if (options?.refresh !== false) {
+      try { router.refresh() } catch {}
+    }
+  }, [router])
+
+  const persistSelection = React.useCallback((tenantId: string | null, next: string | null, options?: { refresh?: boolean }) => {
+    const resolved = next ?? ''
+    const cookieValue = next ?? ALL_ORGANIZATIONS_COOKIE_VALUE
+    setCookieState({ value: resolved, hasCookie: true, raw: cookieValue })
+    const maxAge = 60 * 60 * 24 * 30 // 30 days
+    if (typeof document !== 'undefined') {
+      document.cookie = `om_selected_org=${encodeURIComponent(cookieValue)}; path=/; max-age=${maxAge}; samesite=lax`
+    }
+    if (tenantId !== undefined) {
+      persistTenant(tenantId ?? null, { refresh: false })
+    }
+    emitOrganizationScopeChanged({ organizationId: resolved || null, tenantId: tenantId ?? null })
+    if (options?.refresh !== false) {
+      try { router.refresh() } catch {}
+    }
+  }, [persistTenant, router])
+
+  const handleChange = React.useCallback((next: string | null) => {
+    const tenantId = state.status === 'ready' ? state.tenantId ?? null : tenantValue || null
+    persistSelection(tenantId, next, { refresh: true })
+  }, [persistSelection, state, tenantValue])
+
+  type LoadOptions = { tenantId?: string | null; abortRef?: { current: boolean }; refreshAfter?: boolean }
+
+  const load = React.useCallback(async (options?: LoadOptions) => {
+    const abortRef = options?.abortRef
+    const targetTenant = typeof options?.tenantId === 'string' && options.tenantId.trim().length > 0 ? options.tenantId.trim() : null
+    setState({ status: 'loading' })
+    try {
+      const params = new URLSearchParams()
+      if (targetTenant) params.set('tenantId', targetTenant)
+      const search = params.toString()
+      const url = `/api/directory/organization-switcher${search ? `?${search}` : ''}`
+      const call = await apiCall<OrganizationSwitcherPayload>(url)
+      if (abortRef?.current) return
+      if (call.status === 401 || call.status === 403) {
+        setState({ status: 'hidden' })
+        return
+      }
+      if (!call.ok) {
+        await raiseCrudError(call.response, t('organizationSwitcher.error', 'Failed to load'))
+      }
+      const json = (call.result ?? {}) as OrganizationSwitcherPayload
+      if (abortRef?.current) return
+      const rawItems = Array.isArray(json.items) ? json.items : []
+      const selected = typeof json.selectedId === 'string' ? json.selectedId : null
+      const manage = Boolean(json.canManage)
+      const resolvedTenantId = typeof json.tenantId === 'string' && json.tenantId.trim().length > 0 ? json.tenantId.trim() : null
+      const tenantList = Array.isArray(json.tenants)
+        ? (json.tenants as unknown[]).map((entry) => {
+            if (!entry || typeof entry !== 'object') return null
+            const record = entry as Record<string, unknown>
+            const id = typeof record.id === 'string' ? record.id : null
+            if (!id) return null
+            const name = typeof record.name === 'string' && record.name.length > 0 ? record.name : id
+            const isActive = record.isActive !== false
+            return { id, name, isActive }
+          }).filter((tenant): tenant is TenantRecord => tenant !== null)
+        : []
+      const cookieInfo = cookieStateRef.current
+      const shouldFallbackToFirst =
+        !selected
+        && (
+          !cookieInfo.hasCookie
+          || (cookieInfo.raw !== null && cookieInfo.raw !== ALL_ORGANIZATIONS_COOKIE_VALUE)
+        )
+      const fallbackSelected = selected ?? (shouldFallbackToFirst ? findFirstSelectable(rawItems) : null)
+      const isSuperAdmin = Boolean(json.isSuperAdmin)
+      if (!rawItems.length && !manage && !isSuperAdmin && tenantList.length === 0) {
+        setState({ status: 'hidden' })
+        if (fallbackSelected) {
+          persistSelection(resolvedTenantId, fallbackSelected, { refresh: false })
+        }
+        if (options?.refreshAfter) {
+          try { router.refresh() } catch {}
+        }
+        return
+      }
+      setState({
+        status: 'ready',
+        nodes: rawItems as OrganizationMenuNode[],
+        selectedId: fallbackSelected,
+        canManage: manage,
+        tenantId: resolvedTenantId,
+        tenants: tenantList,
+        isSuperAdmin,
+      })
+      const currentTenantCookie = tenantCookieRef.current
+      if (resolvedTenantId !== null) {
+        if (!currentTenantCookie.hasCookie || currentTenantCookie.value !== resolvedTenantId) {
+          persistTenant(resolvedTenantId, { refresh: false })
+        }
+      } else if (currentTenantCookie.hasCookie && currentTenantCookie.value !== '') {
+        setTenantCookieState({ value: '', hasCookie: true, raw: '' })
+      }
+      const currentCookie = cookieStateRef.current
+      if (fallbackSelected) {
+        const tenantMatches = currentTenantCookie.hasCookie ? currentTenantCookie.value === (resolvedTenantId ?? '') : false
+        if (
+          !currentCookie.hasCookie ||
+          currentCookie.value !== fallbackSelected ||
+          currentCookie.raw !== fallbackSelected ||
+          !tenantMatches
+        ) {
+          persistSelection(resolvedTenantId, fallbackSelected, { refresh: false })
+        } else {
+          emitOrganizationScopeChanged({ organizationId: fallbackSelected, tenantId: resolvedTenantId ?? null })
+        }
+      } else {
+        if (
+          !currentCookie.hasCookie ||
+          currentCookie.raw !== ALL_ORGANIZATIONS_COOKIE_VALUE ||
+          currentCookie.value !== '' ||
+          (resolvedTenantId !== null && currentTenantCookie.value !== resolvedTenantId)
+        ) {
+          persistSelection(resolvedTenantId, null, { refresh: false })
+        } else {
+          emitOrganizationScopeChanged({ organizationId: null, tenantId: resolvedTenantId ?? null })
+        }
+      }
+      if (options?.refreshAfter) {
+        try { router.refresh() } catch {}
+      }
+    } catch {
+      if (abortRef?.current) return
+      setState({ status: 'error' })
+    }
+  }, [persistSelection, persistTenant, router, t])
+
+  const handleTenantChange = React.useCallback((nextTenantId: string | null) => {
+    const normalized = typeof nextTenantId === 'string' && nextTenantId.trim().length > 0 ? nextTenantId.trim() : null
+    const currentTenant = state.status === 'ready' ? state.tenantId : (tenantValue || null)
+    if ((currentTenant ?? null) === (normalized ?? null)) return
+    persistTenant(normalized, { refresh: false })
+    load({ tenantId: normalized ?? undefined, refreshAfter: true })
+  }, [load, persistTenant, state, tenantValue])
+
+  React.useEffect(() => {
+    const abortRef = { current: false }
+    load({ abortRef })
+    return () => { abortRef.current = true }
+  }, [load])
+
+  const nodes = React.useMemo<OrganizationTreeNode[]>(() => {
+    if (state.status !== 'ready') return []
+    const items = state.nodes
+    const map = (node: OrganizationMenuNode, parents: string[]): OrganizationTreeNode => {
+      const nextPath = [...parents, node.name]
+      return {
+        id: node.id,
+        name: node.name,
+        depth: node.depth,
+        pathLabel: nextPath.join(' / '),
+        selectable: node.selectable,
+        children: node.children.map((child) => map(child, nextPath)),
+      }
+    }
+    return items.map((node) => map(node, []))
+  }, [state])
+
+  const hasOptions = nodes.length > 0 && state.status === 'ready'
+  const canManage = state.status === 'ready' && state.canManage
+  const tenantSelectOptions = state.status === 'ready' ? state.tenants : []
+  const tenantSelectValue = state.status === 'ready'
+    ? state.tenantId ?? ''
+    : tenantValue
+  const showTenantSelect = state.status === 'ready' && state.isSuperAdmin && tenantSelectOptions.length > 0
+
+  if (state.status === 'hidden') {
+    return null
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 text-sm">
+      {showTenantSelect ? (
+        <>
+          <label className="hidden text-xs text-muted-foreground sm:inline" htmlFor="tenant-switcher">
+            {t('organizationSwitcher.tenantLabel', 'Tenant')}
+          </label>
+          <TenantSelect
+            id="tenant-switcher"
+            value={tenantSelectValue}
+            onChange={handleTenantChange}
+            tenants={tenantSelectOptions}
+            fetchOnMount={false}
+            includeEmptyOption={false}
+            className="h-9 rounded border px-2 text-sm"
+            aria-label={t('organizationSwitcher.tenantLabel', 'Tenant')}
+          />
+        </>
+      ) : null}
+      <label className="hidden text-xs text-muted-foreground sm:inline" htmlFor="org-switcher">{t('organizationSwitcher.label')}</label>
+      {state.status === 'loading' ? (
+        <span className="text-xs text-muted-foreground">{t('organizationSwitcher.loading')}</span>
+      ) : state.status === 'error' ? (
+        <span className="text-xs text-destructive">{t('organizationSwitcher.error')}</span>
+      ) : hasOptions ? (
+        <OrganizationSelect
+          id="org-switcher"
+          value={value || null}
+          onChange={handleChange}
+          nodes={nodes}
+          fetchOnMount={false}
+          includeAllOption
+          aria-label={t('organizationSwitcher.label')}
+          className="h-9 rounded border px-2 text-sm"
+        />
+      ) : (
+        <span className="text-xs text-muted-foreground">{t('organizationSwitcher.empty')}</span>
+      )}
+      {canManage ? (
+        <Link href="/backend/directory/organizations" className="text-xs text-muted-foreground hover:text-foreground">
+          {t('organizationSwitcher.manage')}
+        </Link>
+      ) : null}
+    </div>
+  )
+}