create-mercato-app 0.6.6-develop.6176.1.4507b99c2f → 0.6.6-develop.6198.1.0822f97cc6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mercato-app",
-  "version": "0.6.6-develop.6176.1.4507b99c2f",
+  "version": "0.6.6-develop.6198.1.0822f97cc6",
   "type": "module",
   "description": "Create a new Open Mercato application",
   "main": "./dist/index.js",

package/template/src/components/GlobalNoticeBars.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 const DEMO_NOTICE_COOKIE = 'om_demo_notice_ack'
@@ -54,11 +55,11 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
   }
 
   return (
-    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[70] flex flex-col items-center gap-3 px-4">
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-banner 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="pointer-events-auto w-full max-w-4xl rounded-lg border border-status-warning-border bg-status-warning-bg/90 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-status-warning-bg/80">
           <div className="flex items-start gap-3">
-            <div className="flex-1 text-sm text-amber-900 dark:text-amber-50 space-y-1">
+            <div className="flex-1 text-sm text-status-warning-text 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.')}
@@ -69,30 +70,37 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
                   href="https://github.com/open-mercato"
                   target="_blank"
                   rel="noreferrer"
-                  className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200"
+                  className="underline font-medium hover:text-status-warning-icon"
                 >
                   {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">
+                <Link className="underline font-medium hover:text-status-warning-icon" 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">
+                <Link className="underline font-medium hover:text-status-warning-icon" 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">
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="lg"
+              onClick={handleDismissDemo}
+              className="shrink-0 text-status-warning-text hover:text-status-warning-icon"
+              aria-label={t('notices.demo.dismiss', 'Dismiss demo notice')}
+            >
               <X className="size-4" />
-            </Button>
+            </IconButton>
           </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="pointer-events-auto w-full max-w-4xl rounded-lg border border-border bg-background/95 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80">
           <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')}{' '}
@@ -101,10 +109,10 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
               </Link>.
             </div>
             <div className="flex items-center gap-2 self-end sm:self-auto">
-              <Button variant="ghost" size="sm" onClick={handleDismissCookies}>
+              <Button type="button" variant="ghost" size="sm" onClick={handleDismissCookies}>
                 {t('notices.cookies.dismiss', 'Dismiss')}
               </Button>
-              <Button size="sm" onClick={handleAcceptCookies}>
+              <Button type="button" size="sm" onClick={handleAcceptCookies}>
                 {t('notices.cookies.accept', 'Accept cookies')}
               </Button>
             </div>

package/template/src/components/OrganizationSwitcher.tsx

@@ -20,6 +20,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@open-mercato/ui/primitives/popover'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { ALL_ORGANIZATIONS_COOKIE_VALUE } from '@open-mercato/core/modules/directory/constants'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
@@ -331,6 +332,37 @@ export default function OrganizationSwitcher({ compact }: OrganizationSwitcherEx
     : tenantValue
   const showTenantSelect = state.status === 'ready' && state.isSuperAdmin && tenantSelectOptions.length > 0
 
+  const flatOrgOptions = React.useMemo(() => {
+    const out: Array<{ id: string; label: string; selectable: boolean; depth: number }> = []
+    const walk = (list: OrganizationTreeNode[]) => {
+      for (const node of list) {
+        const depth = typeof node.depth === 'number' ? node.depth : 0
+        const indent = depth > 0 ? `${'  '.repeat(depth)}` : ''
+        out.push({
+          id: node.id,
+          label: `${indent}${node.name}`,
+          selectable: node.selectable !== false,
+          depth,
+        })
+        if (Array.isArray(node.children) && node.children.length > 0) walk(node.children as OrganizationTreeNode[])
+      }
+    }
+    walk(nodes)
+    return out
+  }, [nodes])
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  const activeOrgLabel = React.useMemo(() => {
+    if (!value) {
+      return showAllOption
+        ? t('organizationSwitcher.allOrganizations', 'All organizations')
+        : t('organizationSwitcher.label', 'Organization')
+    }
+    return flatOrgOptions.find((opt) => opt.id === value)?.label.trim()
+      || t('organizationSwitcher.label', 'Organization')
+  }, [value, showAllOption, flatOrgOptions, t])
+
   if (state.status === 'hidden') {
     return null
   }
@@ -385,39 +417,6 @@ export default function OrganizationSwitcher({ compact }: OrganizationSwitcherEx
     )
   }
 
-  const flatOrgOptions = React.useMemo(() => {
-    const out: Array<{ id: string; label: string; selectable: boolean; depth: number }> = []
-    const walk = (list: OrganizationTreeNode[]) => {
-      for (const node of list) {
-        const depth = typeof node.depth === 'number' ? node.depth : 0
-        const indent = depth > 0 ? `${'  '.repeat(depth)}` : ''
-        out.push({
-          id: node.id,
-          label: `${indent}${node.name}`,
-          selectable: node.selectable !== false,
-          depth,
-        })
-        if (Array.isArray(node.children) && node.children.length > 0) walk(node.children as OrganizationTreeNode[])
-      }
-    }
-    walk(nodes)
-    return out
-  }, [nodes])
-
-  const ALL_ORGS_SENTINEL = '__all__'
-  const orgSelectValue = !value ? (showAllOption ? ALL_ORGS_SENTINEL : '') : value
-  const [popoverOpen, setPopoverOpen] = React.useState(false)
-
-  const activeOrgLabel = React.useMemo(() => {
-    if (!value) {
-      return showAllOption
-        ? t('organizationSwitcher.allOrganizations', 'All organizations')
-        : t('organizationSwitcher.label', 'Organization')
-    }
-    return flatOrgOptions.find((opt) => opt.id === value)?.label.trim()
-      || t('organizationSwitcher.label', 'Organization')
-  }, [value, showAllOption, flatOrgOptions, t])
-
   if (state.status === 'loading') {
     return <span className="hidden md:inline text-xs text-muted-foreground">{t('organizationSwitcher.loading')}</span>
   }
@@ -431,18 +430,20 @@ export default function OrganizationSwitcher({ compact }: OrganizationSwitcherEx
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="sm"
           aria-label={`${t('organizationSwitcher.label')}: ${activeOrgLabel}`}
           title={activeOrgLabel}
-          className="inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-0 text-sm font-medium shadow-xs transition-colors hover:bg-muted/40 focus:outline-none focus-visible:shadow-focus focus-visible:border-foreground data-[state=open]:bg-muted/40 sm:w-auto sm:justify-start sm:px-3 sm:max-w-[200px] md:max-w-[260px]"
+          className="w-8 px-0 hover:bg-muted/40 data-[state=open]:bg-muted/40 sm:w-auto sm:justify-start sm:px-3 sm:max-w-48 md:max-w-64"
         >
           <Building2 className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
           <span className="hidden sm:block truncate flex-1 text-left">{activeOrgLabel}</span>
           <ChevronDown className="hidden sm:block size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-        </button>
+        </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-[320px] p-0">
+      <PopoverContent align="end" className="w-80 p-0">
         {showTenantSelect ? (
           <div className="border-b p-3 space-y-2">
             <div className="text-overline font-medium uppercase tracking-wider text-muted-foreground/80 leading-none">
@@ -472,38 +473,43 @@ export default function OrganizationSwitcher({ compact }: OrganizationSwitcherEx
           <div className="px-2 py-1.5 text-overline font-medium uppercase tracking-wider text-muted-foreground/80 leading-none">
             {t('organizationSwitcher.label')}
           </div>
-          <div className="max-h-[280px] overflow-y-auto">
+          <div className="max-h-72 overflow-y-auto">
             {showAllOption ? (
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => {
                   handleChange(null)
                   setPopoverOpen(false)
                 }}
-                className="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/40 focus:outline-none focus-visible:bg-muted/40"
+                className="h-auto w-full justify-between rounded-sm px-2 py-1.5 text-left font-normal hover:bg-muted/40 focus-visible:bg-muted/40"
               >
                 <span className="truncate min-w-0">{t('organizationSwitcher.allOrganizations', 'All organizations')}</span>
                 {!value ? <Check className="size-4 shrink-0 text-accent-indigo" aria-hidden="true" /> : null}
-              </button>
+              </Button>
             ) : null}
             {flatOrgOptions.map((opt) => {
               const isActive = value === opt.id
               return (
-                <button
+                <Button
                   key={opt.id}
                   type="button"
+                  variant="ghost"
+                  size="sm"
                   disabled={!opt.selectable}
                   onClick={() => {
                     if (!opt.selectable) return
                     handleChange(opt.id)
                     setPopoverOpen(false)
                   }}
+                  // DS-SKIP: dynamic tree indentation depends on organization depth.
                   style={{ paddingLeft: `${0.5 + opt.depth * 0.75}rem` }}
-                  className="flex w-full items-center justify-between gap-2 rounded-sm py-1.5 pr-2 text-left text-sm transition-colors hover:bg-muted/40 disabled:opacity-50 disabled:hover:bg-transparent focus:outline-none focus-visible:bg-muted/40"
+                  className="h-auto w-full justify-between rounded-sm py-1.5 pr-2 text-left font-normal hover:bg-muted/40 disabled:bg-transparent disabled:text-muted-foreground disabled:shadow-none focus-visible:bg-muted/40"
                 >
                   <span className="truncate min-w-0">{opt.label.trim()}</span>
                   {isActive ? <Check className="size-4 shrink-0 text-accent-indigo" aria-hidden="true" /> : null}
-                </button>
+                </Button>
               )
             })}
           </div>

package/template/src/components/StartPageContent.tsx

@@ -59,7 +59,7 @@ function RoleTile({
 
       {disabled ? (
         <>
-          <Button variant="outline" className="w-full cursor-not-allowed opacity-80" disabled>
+          <Button type="button" variant="outline" className="w-full cursor-not-allowed opacity-80" disabled>
             {disabledCtaLabel ?? defaultDisabledCtaLabel}
           </Button>
           {disabledMessage ? (
@@ -106,26 +106,26 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
       </section>
 
       {showOnboardingCta ? (
-        <section className="rounded-lg border border-emerald-300 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/20 p-6 md:p-8 flex flex-col md:flex-row md:items-center gap-6 shadow-sm">
+        <section className="rounded-lg border border-status-success-border bg-status-success-bg p-6 md:p-8 flex flex-col md:flex-row md:items-center gap-6 shadow-sm">
           <div className="flex items-start gap-4">
-            <div className="rounded-full bg-emerald-600 text-white p-3">
+            <div className="rounded-full bg-status-success-icon text-status-success-bg p-3">
               <Rocket className="size-6" />
             </div>
             <div className="space-y-3">
               <div>
-                <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100">{t('startPage.onboarding.title', 'Launch your own workspace')}</h3>
-                <p className="text-sm text-emerald-800/80 dark:text-emerald-200/90">
+                <h3 className="text-lg font-semibold text-status-success-text">{t('startPage.onboarding.title', 'Launch your own workspace')}</h3>
+                <p className="text-sm text-status-success-text/90">
                   {t('startPage.onboarding.description', 'Create a tenant, organization, and administrator account in minutes. We\'ll verify your email and deliver a pre-seeded environment so you can explore Open Mercato with real data.')}
                 </p>
               </div>
-              <ul className="text-sm text-emerald-900/80 dark:text-emerald-200/90 space-y-1 list-disc pl-5 marker:text-emerald-600 dark:marker:text-emerald-400">
+              <ul className="text-sm text-status-success-text/90 space-y-1 list-disc pl-5 marker:text-status-success-icon">
                 <li>{t('startPage.onboarding.feature1', 'Automatic tenant and sample data provisioning')}</li>
                 <li>{t('startPage.onboarding.feature2', 'Ready-to-use superadmin credentials after verification')}</li>
               </ul>
             </div>
           </div>
           <div className="md:ml-auto">
-            <Button asChild className="bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-ring px-6 py-5 text-base font-semibold text-white shadow-md">
+            <Button asChild size="lg" className="font-semibold shadow-md">
               <Link href="/onboarding">
                 {t('startPage.onboarding.cta', 'Start onboarding')}
                 <ArrowRight className="size-4" aria-hidden />
@@ -135,16 +135,16 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
         </section>
       ) : null}
 
-      <section className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-900 p-4">
+      <section className="rounded-lg border border-status-info-border bg-status-info-bg p-4">
         <div className="flex items-start gap-3">
-          <Info className="size-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+          <Info className="size-5 text-status-info-icon shrink-0 mt-0.5" />
           <div className="flex-1">
-            <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
-            <p className="text-sm text-blue-800 dark:text-blue-200">
+            <h3 className="text-sm font-semibold text-status-info-text mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
+            <p className="text-sm text-status-info-text">
               {t('startPage.defaultPassword.description1', 'The default password for all demo accounts is')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">secret</code>.
+              <code className="px-1.5 py-0.5 rounded border border-status-info-border/70 bg-background/70 font-mono text-xs text-foreground">secret</code>.
               {' '}{t('startPage.defaultPassword.description2', 'To change passwords, use the CLI command:')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
+              <code className="px-1.5 py-0.5 rounded border border-status-info-border/70 bg-background/70 font-mono text-xs text-foreground">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
               <span className="mt-2 block">{t('startPage.defaultPassword.description3', 'Demo account emails are printed in the terminal output during yarn initialize.')}</span>
             </p>
           </div>

package/template/src/i18n/de.json

@@ -530,6 +530,7 @@
   "notices.cookies.dismiss": "Schließen",
   "notices.demo.and": "und",
   "notices.demo.description": "Diese Instanz wird nur zu Demonstrationszwecken bereitgestellt. Daten können jederzeit zurückgesetzt werden und werden nicht für einen garantierten Zeitraum aufbewahrt.",
+  "notices.demo.dismiss": "Demo-Hinweis schließen",
   "notices.demo.installLink": "Open Mercato lokal installieren",
   "notices.demo.reviewLinks": "Lesen Sie unsere",
   "notices.demo.superadminQuestion": "Benötigen Sie dauerhaften Superadmin-Zugriff?",

package/template/src/i18n/en.json

@@ -530,6 +530,7 @@
   "notices.cookies.dismiss": "Dismiss",
   "notices.demo.and": "and",
   "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.",
+  "notices.demo.dismiss": "Dismiss demo notice",
   "notices.demo.installLink": "Install Open Mercato locally",
   "notices.demo.reviewLinks": "Review our",
   "notices.demo.superadminQuestion": "Need persistent superadmin access?",

package/template/src/i18n/es.json

@@ -530,6 +530,7 @@
   "notices.cookies.dismiss": "Descartar",
   "notices.demo.and": "y",
   "notices.demo.description": "Esta instancia se proporciona solo con fines de demostración. Los datos pueden restablecerse en cualquier momento y no se conservan durante ningún período garantizado.",
+  "notices.demo.dismiss": "Descartar aviso de demostración",
   "notices.demo.installLink": "Instalar Open Mercato localmente",
   "notices.demo.reviewLinks": "Revise nuestros",
   "notices.demo.superadminQuestion": "¿Necesita acceso persistente de superadministrador?",

package/template/src/i18n/pl.json

@@ -530,6 +530,7 @@
   "notices.cookies.dismiss": "Odrzuć",
   "notices.demo.and": "i",
   "notices.demo.description": "Ta instancja jest udostępniana wyłącznie do celów demonstracyjnych. Dane mogą zostać zresetowane w dowolnym momencie i nie są przechowywane przez żaden gwarantowany okres.",
+  "notices.demo.dismiss": "Zamknij komunikat demonstracyjny",
   "notices.demo.installLink": "Zainstaluj Open Mercato lokalnie",
   "notices.demo.reviewLinks": "Przejrzyj nasze",
   "notices.demo.superadminQuestion": "Potrzebujesz trwałego dostępu superadministratora?",