@utopia-studio-design/design-system-cli 0.3.0 → 0.3.1

package/data/manifests/theme-dextrum.json

@@ -1,255 +1,215 @@
 {
-
   "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
-
   "id": "dextrum",
-
   "name": "Dextrum",
-
   "type": "theme-policy",
-
   "locked": false,
-
-  "summary": "Dextrum brand theme mapped to the Ceramic semantic contract. Ocean blue accents on dark blue surfaces with Manrope driving product UI, docs, and default headings. Clash Grotesk is reserved for explicit marketing surfaces.",
-
+  "summary": "Dextrum keeps its immutable brand anchors while using supporting charcoal and gray neutrals for a calm governance workspace. Dark is the default; Light is a plain cool-neutral canvas.",
   "sourceFiles": [
-
     "packages/design-system/src/themes/dextrum.css",
-
     "packages/design-system/src/manifests/theme-dextrum.json"
-
   ],
-
+  "motionProfile": "swift",
   "brandPrimitives": {
-
     "colors": {
-
-      "darkBlue": "#192B39",
-
-      "oceanBlue": "#3E8ECC",
-
-      "charcoalBlue": "#2F3F4C",
-
-      "matteBlack": "#141414",
-
-      "timidWhite": "#EAEAEA",
-
-      "logoTeal": "#063946"
-
+      "darkBlue": { "value": "#192B39", "token": "--dx-brand-dark-blue", "immutable": true, "use": "Light text and structural brand surfaces" },
+      "oceanBlue": { "value": "#3E8ECC", "token": "--dx-brand-ocean-blue", "immutable": true, "use": "Dark primary actions, links, focus, and current navigation" },
+      "oceanHover": { "value": "#4A9AD4", "token": "--dx-brand-ocean-hover", "immutable": true, "use": "Dark primary hover" },
+      "oceanDeep": { "value": "#26689A", "token": "--dx-brand-ocean-deep", "immutable": true, "use": "Light primary and Dark primary active" },
+      "logoTeal": { "value": "#063946", "token": "--dx-brand-logo-teal", "immutable": true, "use": "Logo and explicit brand expression only" },
+      "timidWhite": { "value": "#EAEAEA", "token": "--dx-brand-timid-white", "immutable": true, "use": "Dark foreground" },
+      "charcoal950": "#0E1215",
+      "charcoal925": "#11161A",
+      "charcoal900": "#171C20",
+      "charcoal850": "#1B2126",
+      "charcoal800": "#20272C",
+      "neutral50": "#EAEAEA",
+      "successDark": "#79B98E",
+      "successLight": "#3F7953",
+      "warningDark": "#D2A363",
+      "warningLight": "#916026",
+      "criticalDark": "#C86E64",
+      "criticalLight": "#A94F47"
     },
-
     "typography": {
-
       "marketingSales": {
-
         "display": "Clash Grotesk",
-
         "body": "Satoshi",
-
-        "use": "Pitch decks, campaigns, sales collateral, and website headers"
-
+        "use": "Explicit marketing and sales surfaces only"
       },
-
       "appWebsite": {
-
         "ui": "Manrope",
-
         "support": "Satoshi",
-
-        "use": "Product UI, dashboards, documentation, and long-form web reading"
-
+        "mono": "JetBrains Mono",
+        "use": "Product UI, dashboards, documentation, evidence identifiers, and long-form web reading"
       },
-
       "arabicFamily": "IBM Plex Sans Arabic",
-
       "weights": {
-
         "clashGrotesk": [300, 400, 500, 600, 700],
-
         "satoshi": [400, 500, 700],
-
-        "manrope": [300, 400, 500, 600, 700, 800]
-
+        "manrope": [300, 400, 500, 600, 700, 800],
+        "jetBrainsMono": [400, 500, 600]
       },
-
       "arabicWeights": [400, 500, 700],
-
       "headlineCasing": "sentence",
-
       "headlineTracking": "-0.03em to -0.05em",
-
       "arabicDisplayFamily": "IBM Plex Sans Arabic",
-
       "arabicDisplayCasing": "none",
-
       "arabicDisplayRule": "Use Arabic display scale and IBM Plex Sans Arabic. Do not apply Latin negative tracking rules to Arabic.",
-
-      "rationale": "Marketing type sets brand vibe; app type optimizes readability on small screens and in dark mode. Marketing display may still appear in website headers."
-
+      "rationale": "Manrope optimizes dense product UI; Satoshi supports labels; JetBrains Mono identifies evidence and records; Clash Grotesk remains marketing-only."
     },
-
     "geometry": {
-
       "surfaceRadius": "8px",
-
       "controlRadius": "6px",
-
-      "elevation": "calm surfaces with subtle borders; restrained shadow on floating layers only"
-
+      "elevation": "Thin semantic borders establish hierarchy; shadows are reserved for floating layers."
     }
-
   },
-
   "semanticMappings": {
-
-    "--background": "Dark Blue",
-
-    "--foreground": "Timid White",
-
-    "--primary": "Ocean Blue",
-
-    "--secondary": "Charcoal Blue",
-
+    "defaultMode": "dark",
+    "dark": {
+      "--background": "#0E1215",
+      "--foreground": "#EAEAEA",
+      "--foreground-muted": "#ADB4B8",
+      "--foreground-subtle": "#7F898F",
+      "--card": "#171C20",
+      "--card-foreground": "#EAEAEA",
+      "--popover": "#1B2126",
+      "--popover-foreground": "#EAEAEA",
+      "--primary": "#3E8ECC",
+      "--primary-foreground": "#101619",
+      "--primary-hover": "#4A9AD4",
+      "--primary-active": "#26689A",
+      "--secondary": "#1B2126",
+      "--secondary-foreground": "#EAEAEA",
+      "--muted": "#171C20",
+      "--muted-foreground": "#909BA2",
+      "--accent": "#20272C",
+      "--accent-foreground": "#EAEAEA",
+      "--border": "rgb(238 240 241 / 10%)",
+      "--input": "rgb(238 240 241 / 15%)",
+      "--ring": "#3E8ECC",
+      "--surface": "rgb(255 255 255 / 2.8%)",
+      "--surface-strong": "rgb(255 255 255 / 5%)",
+      "--surface-elevated": "#1B2126",
+      "--surface-hover": "rgb(255 255 255 / 7%)",
+      "--overlay": "rgb(5 8 10 / 78%)",
+      "--modal-surface": "#1B2126",
+      "--popover-surface": "#1B2126",
+      "--sidebar": "#11161A",
+      "--sidebar-foreground": "#EAEAEA",
+      "--sidebar-primary": "#3E8ECC",
+      "--sidebar-primary-foreground": "#101619",
+      "--sidebar-accent": "rgb(62 142 204 / 12%)",
+      "--sidebar-accent-foreground": "#EAEAEA",
+      "--sidebar-border": "rgb(238 240 241 / 8%)",
+      "--sidebar-ring": "#3E8ECC"
+    },
+    "light": {
+      "--background": "#F7F7F5",
+      "--foreground": "#192B39",
+      "--foreground-muted": "#59636A",
+      "--foreground-subtle": "#7A8389",
+      "--card": "#FFFFFF",
+      "--card-foreground": "#192B39",
+      "--popover": "#FFFFFF",
+      "--popover-foreground": "#192B39",
+      "--primary": "#26689A",
+      "--primary-foreground": "#FFFFFF",
+      "--primary-hover": "#1F557E",
+      "--primary-active": "#194664",
+      "--secondary": "#F0F1EF",
+      "--secondary-foreground": "#192B39",
+      "--muted": "#EFF0EE",
+      "--muted-foreground": "#667078",
+      "--accent": "#ECEEEC",
+      "--accent-foreground": "#192B39",
+      "--border": "rgb(29 32 35 / 11%)",
+      "--input": "rgb(29 32 35 / 16%)",
+      "--ring": "#26689A",
+      "--surface": "#FFFFFF",
+      "--surface-strong": "#F0F1EF",
+      "--surface-elevated": "#FFFFFF",
+      "--surface-hover": "rgb(29 32 35 / 5%)",
+      "--overlay": "rgb(29 32 35 / 28%)",
+      "--modal-surface": "#FFFFFF",
+      "--popover-surface": "#FFFFFF",
+      "--sidebar": "#F1F2F0",
+      "--sidebar-foreground": "#192B39",
+      "--sidebar-primary": "#26689A",
+      "--sidebar-primary-foreground": "#FFFFFF",
+      "--sidebar-accent": "rgb(38 104 154 / 9%)",
+      "--sidebar-accent-foreground": "#192B39",
+      "--sidebar-border": "rgb(29 32 35 / 9%)",
+      "--sidebar-ring": "#26689A"
+    },
     "--radius-control": "6px rounded controls",
-
     "--radius-surface": "8px rounded surfaces",
-
-    "--font-display": "Manrope (product UI headings and display scale)",
-
+    "--font-display": "Manrope",
     "--font-sans": "Manrope",
-
     "--font-ui-support": "Satoshi",
-
+    "--font-mono": "JetBrains Mono",
     "--font-marketing-display": "Clash Grotesk (marketing surfaces only)",
-
     "--font-arabic": "IBM Plex Sans Arabic",
-
-    "--overlay": "Dark Blue modal dim",
-
-    "--modal-surface": "Charcoal Blue",
-
-    "--popover-surface": "Charcoal Blue"
-
+    "--sidebar-width-collapsed": "Owned by core; remains 4rem"
+  },
+  "governanceStatus": {
+    "success": { "dark": "#79B98E", "light": "#3F7953" },
+    "warning": { "dark": "#D2A363", "light": "#916026" },
+    "critical": { "dark": "#C86E64", "light": "#A94F47" },
+    "surfaceAlpha": { "dark": "12%", "light": "9%" },
+    "rule": "Status colors communicate governance state only; never use them as decorative accents."
   },
-
   "visualPolicy": {
-
-    "tone": [
-
-      "precise",
-
-      "technical",
-
-      "calm",
-
-      "confident"
-
-    ],
-
+    "tone": ["precise", "technical", "calm", "confident"],
     "allow": [
-
-      "dark blue structural surfaces",
-
-      "ocean blue accents for action and links",
-
-      "rounded controls and cards",
-
-      "muted neutral hierarchy",
-
-      "Clash Grotesk for marketing display and website headers",
-
+      "neutral charcoal dark workspaces",
+      "plain cool-neutral light canvases with white cards",
+      "Ocean Blue for Dark primary actions, links, current location, and focus",
+      "Ocean Deep for accessible Light primary actions and focus",
+      "Logo Teal only for the logo and explicit brand expression",
+      "thin semantic borders",
       "Manrope for product UI and long reading"
-
     ],
-
     "avoid": [
-
-      "Utopia brick red palette",
-
-      "square Utopia geometry defaults",
-
-      "decorative gradients",
-
+      "navy or blue-washed structural surfaces",
+      "blue as a full-page wash",
+      "status colors used decoratively",
+      "raw colors inside component rules",
       "heavy glass effects",
-
       "startup-cute styling",
-
-      "fancy marketing display fonts in dense app menus or long paragraphs"
-
+      "marketing display fonts in dense application UI"
     ]
-
   },
-
   "iconPolicy": {
-
     "system": "lucide",
-
-    "description": "Dextrum uses standard lucide icons inside product UI while keeping the Dextrum mark for brand surfaces.",
-
-    "allow": [
-
-      "lucide icons in components",
-
-      "monochrome currentColor icons",
-
-      "directional mirroring in RTL"
-
-    ],
-
-    "avoid": [
-
-      "Utopia dot-bar icon policy",
-
-      "emoji",
-
-      "mixed icon families in one surface"
-
-    ],
-
+    "description": "Dextrum uses standard Lucide icons in product UI and keeps the Dextrum mark for brand surfaces.",
+    "allow": ["lucide icons in components", "monochrome currentColor icons", "directional mirroring in RTL"],
+    "avoid": ["Utopia dot-bar icon policy", "emoji", "mixed icon families in one surface"],
     "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
-
   },
-
   "translations": {
-
     "ar": {
-
-      "summary": "ثيم Dextrum مربوط بعقد Ceramic الدلالي. يستخدم لمسات Ocean Blue فوق أسطح Dark Blue، ويقود Manrope واجهة المنتج والتوثيق والعناوين الافتراضية، بينما يقتصر Clash Grotesk على أسطح التسويق الصريحة.",
-
+      "summary": "ثيم Dextrum هو مساحة حوكمة محايدة بالفحمي، مع الوضع الداكن افتراضيا ووضع فاتح بسيط. يقتصر الأزرق المعدني على الإجراءات والروابط والتركيز.",
       "iconPolicy": {
-
         "system": "Lucide",
-
         "description": "يستخدم Dextrum أيقونات Lucide القياسية داخل واجهة المنتج، مع إبقاء علامة Dextrum لأسطح العلامة.",
-
         "allow": ["أيقونات Lucide في المكونات", "أيقونات أحادية بلون currentColor", "عكس الاتجاه في RTL"]
-
       }
-
     }
-
   },
-
   "aiRules": [
-
     "Read this theme policy after the core semantic contract.",
-
-    "Map Dextrum palette through semantic tokens only.",
-
-    "Use Ocean Blue for primary actions and links, not as a full-page wash.",
-
-    "Prefer dark blue and charcoal surfaces with timid white type.",
-
-    "Use Manrope for Latin app UI and body copy in this theme.",
-
-    "Use Clash Grotesk for marketing display and website headers only.",
-
-    "Use Satoshi for marketing body copy and supporting UI labels where needed.",
-
+    "Default Dextrum to Dark; support explicit Light and system preference.",
+    "Map Dextrum primitives through semantic tokens only.",
+    "Keep Dark Blue, Ocean Blue, Ocean Deep, Logo Teal, and Timid White immutable.",
+    "Use Ocean Blue for Dark primary actions, links, current location, and focus, never as a page wash.",
+    "Use Ocean Deep for accessible Light primary actions and focus.",
+    "Use Logo Teal only for the logo and explicit brand expression.",
+    "Use governance colors only for success, warning, and critical state.",
+    "Do not override core layout tokens such as --sidebar-width-collapsed in products.",
+    "Use Manrope for Latin app UI, Satoshi for supporting labels, and JetBrains Mono for evidence identifiers.",
+    "Use Clash Grotesk for explicit marketing display only.",
     "Keep Arabic on IBM Plex Sans Arabic tokens.",
-
     "Do not import Utopia brand primitives into Dextrum-themed surfaces."
-
   ]
-
 }

package/data/manifests/theme-utopia-default.json

@@ -17,6 +17,7 @@
     "packages/design-system/src/themes/utopia-default.css",
     "packages/design-system/src/manifests/theme-utopia-default.json"
   ],
+  "motionProfile": "ceremonial",
   "brandPrimitives": {
     "colors": {
       "brickRed": "#CC5536",
@@ -60,9 +61,9 @@
     "--radius-chat-composer": "Square chat input geometry",
     "--radius-chat-token": "Square chat token geometry",
     "--motion-duration-press": "160ms physical press feedback",
-    "--motion-duration-page": "200ms quiet view transition",
-    "--motion-duration-expand": "320ms disclosure transition",
-    "--motion-duration-reveal": "520ms soft surface reveal",
+    "--motion-duration-page": "420ms ceremonial view transition",
+    "--motion-duration-expand": "360ms composed disclosure transition",
+    "--motion-duration-reveal": "440ms blur-capable surface reveal",
     "--motion-duration-icon": "640ms action-specific icon motion",
     "--motion-ease-standard": "Direct interaction easing",
     "--motion-ease-emphasized": "Soft reveal and icon easing",
@@ -108,7 +109,10 @@
       "large uppercase headlines",
       "Brick Red as a 5-15% accent",
       "hairline borders",
-      "solid Special Black, Light Grey, Brick Red, and White surfaces"
+      "solid Special Black, Light Grey, Brick Red, and White surfaces",
+      "editorial whitespace that isolates one dominant message",
+      "three-bar signatures as structural punctuation",
+      "full-bleed brand panels that alternate dark, accent, and light colourways"
     ],
     "avoid": [
       "startup-cute styling",
@@ -117,7 +121,38 @@
       "glassmorphism",
       "textures",
       "rounded marketing cards",
-      "pure black"
+      "pure black",
+      "uniform card grids with equal visual weight",
+      "low-contrast grey-on-grey hierarchy",
+      "using Brick Red for small body copy when contrast is insufficient"
+    ]
+  },
+  "visualGrammar": {
+    "thesis": "The interface should feel authored by a brand studio before it feels like a generic software dashboard.",
+    "composition": [
+      "Give every page one dominant typographic entry point.",
+      "Use asymmetric whitespace and offset alignment instead of centering every block.",
+      "Alternate Special Black, Brick Red, and Light Grey as large editorial fields; do not reduce them to small UI accents.",
+      "Use boxes only when containment communicates function. Prefer rules, fields, and spacing for editorial grouping."
+    ],
+    "typography": [
+      "Latin display headlines use TWK Lausanne 700, uppercase, tight line-height, and compact tracking.",
+      "Korean and Arabic retain native casing while matching the same visual mass, weight, and tight rhythm.",
+      "Small labels are concise, medium-weight, and widely tracked; body copy remains calm and readable."
+    ],
+    "signature": [
+      "Use the three-bar mark as punctuation at major page entries, never as repeated decoration.",
+      "Use a Brick Red full stop or short rule to terminate key Latin headlines."
+    ],
+    "interaction": [
+      "Active navigation is expressed with a Brick Red rule and stronger text, not a soft grey pill.",
+      "Hover states shift fields or rules directly; avoid floating card shadows and playful bounce.",
+      "Motion is deliberate, planar, and ceremonial with short directional travel."
+    ],
+    "accessibility": [
+      "Brick Red on Special Black is a graphic accent only, not normal-size body text.",
+      "White on Brick Red is reserved for large or strong text; smaller copy uses the deep brand ink token with verified contrast.",
+      "Functional focus rings use the accessible ring token even when the graphic brand accent differs."
     ]
   },
   "iconPolicy": {

package/data/manifests/themes.json

@@ -121,6 +121,7 @@
       "policyManifest": "packages/design-system/src/manifests/theme-utopia-default.json",
       "css": "packages/design-system/src/themes/utopia-default.css",
       "iconSystem": "utopia-dot-bar",
+      "motionProfile": "ceremonial",
       "values": {
         "--background": "#3C3235",
         "--foreground": "#FFFFFF",
@@ -143,9 +144,9 @@
         "--radius-chat-token": "0px",
         "--shadow-control": "none",
         "--motion-duration-press": "160ms",
-        "--motion-duration-page": "200ms",
-        "--motion-duration-expand": "320ms",
-        "--motion-duration-reveal": "520ms",
+        "--motion-duration-page": "420ms",
+        "--motion-duration-expand": "360ms",
+        "--motion-duration-reveal": "440ms",
         "--motion-duration-icon": "640ms",
         "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
         "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -208,6 +209,7 @@
       "policyManifest": "packages/design-system/src/manifests/theme-dextrum.json",
       "css": "packages/design-system/src/themes/dextrum.css",
       "iconSystem": "lucide",
+      "motionProfile": "swift",
       "values": {
         "--background": "#192B39",
         "--foreground": "#EAEAEA",
@@ -229,11 +231,11 @@
         "--radius-chat-composer": "24px",
         "--radius-chat-token": "14px",
         "--shadow-control": "none",
-        "--motion-duration-press": "160ms",
-        "--motion-duration-page": "200ms",
-        "--motion-duration-expand": "320ms",
-        "--motion-duration-reveal": "520ms",
-        "--motion-duration-icon": "640ms",
+        "--motion-duration-press": "80ms",
+        "--motion-duration-page": "140ms",
+        "--motion-duration-expand": "160ms",
+        "--motion-duration-reveal": "140ms",
+        "--motion-duration-icon": "240ms",
         "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
         "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
         "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -275,9 +277,9 @@
       "name": "Barrier Intelligence",
       "locked": false,
       "role": "brand theme",
-      "description": "Near-black surfaces with warm gold accents, ink hierarchy, and Hanken Grotesk for product UI. Marketing typography remains theme-scoped only.",
+      "description": "Near-black surfaces with warm gold accents, restrained detector lime, domain assurance states, and Hanken Grotesk for product UI. Brand and color mode are selected independently.",
       "bestFor": ["Barrier Intelligence product UI", "risk and intelligence workflows", "high-contrast analytical products"],
-      "principles": ["near-black hierarchy", "warm gold emphasis", "dense analytical surfaces", "Lucide icon system"],
+      "principles": ["near-black hierarchy", "warm gold emphasis", "dense analytical surfaces", "Lucide icon system", "independent brand and color mode", "restrained detector and assurance signals"],
       "translations": {
         "ar": {
           "name": "Barrier Intelligence",
@@ -291,6 +293,7 @@
       "policyManifest": "packages/design-system/src/manifests/theme-barrier-intelligence.json",
       "css": "packages/design-system/src/themes/barrier-intelligence.css",
       "iconSystem": "lucide",
+      "motionProfile": "precise",
       "values": {
         "--background": "#000000",
         "--foreground": "#F5F5F2",
@@ -312,27 +315,41 @@
         "--radius-chat-composer": "24px",
         "--radius-chat-token": "14px",
         "--shadow-control": "none",
-        "--motion-duration-press": "160ms",
+        "--motion-duration-press": "100ms",
         "--motion-duration-page": "200ms",
-        "--motion-duration-expand": "320ms",
-        "--motion-duration-reveal": "520ms",
-        "--motion-duration-icon": "640ms",
+        "--motion-duration-expand": "220ms",
+        "--motion-duration-reveal": "240ms",
+        "--motion-duration-icon": "320ms",
         "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
         "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
         "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
         "--motion-press-scale": "0.97",
-        "--motion-distance-page": "8px",
-        "--motion-distance-reveal": "8px",
+        "--motion-distance-page": "6px",
+        "--motion-distance-reveal": "10px",
         "--font-sans": "Hanken Grotesk",
         "--font-display": "Hanken Grotesk",
         "--font-ui-support": "Hanken Grotesk",
         "--font-marketing-display": "Hanken Grotesk",
+        "--font-mono": "JetBrains Mono",
         "--font-arabic": "IBM Plex Sans Arabic",
         "--font-arabic-body": "IBM Plex Sans Arabic",
         "--font-arabic-display": "IBM Plex Sans Arabic",
         "--font-weight-arabic-body": "400",
         "--font-weight-arabic-display": "700",
         "--font-size-display": "clamp(2.875rem, 7.6vw, 5.75rem)",
+        "--font-size-marketing-h1": "clamp(3rem, 6vw, 5.75rem)",
+        "--font-size-marketing-h2": "clamp(2.25rem, 4vw, 3.75rem)",
+        "--font-size-marketing-h3": "clamp(1.5rem, 2.5vw, 2.25rem)",
+        "--container-standard": "72rem",
+        "--container-wide": "90rem",
+        "--page-gutter": "clamp(1rem, 3vw, 2.5rem)",
+        "--content-measure": "72ch",
+        "--detector-active": "#A6B86A",
+        "--assurance-credited": "#D2AC6C",
+        "--assurance-at-risk": "#C47C48",
+        "--assurance-lost": "#C76B62",
+        "--assurance-warning": "#D2A65A",
+        "--assurance-verified": "#A6B86A",
         "--font-size-arabic-body": "16px",
         "--font-size-arabic-body-lg": "18px",
         "--font-size-arabic-display": "clamp(2.75rem, 7.2vw, 5.5rem)",

package/data/templates/saas-solution-homepage/main.tsx

@@ -35,7 +35,11 @@ import {
   CardHeader,
   CardTitle,
   MotionProvider,
-  Selector,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Textarea,
   TextInput,
   TopNav,
@@ -434,7 +438,7 @@ function ChangelogPage({ locale }: { locale: Locale }) {
 function ContactSalesPage({ demo, locale }: { demo: DemoData; locale: Locale }) {
   const [submitted, setSubmitted] = useState(false)
   if (submitted) return <section className="contact-success" id="top"><CircleCheck aria-hidden="true" /><p className="eyebrow">{locale === 'ar' ? 'تم استلام الطلب' : 'Request received'}</p><h1>{locale === 'ar' ? 'سنتواصل معك قريباً.' : 'We will be in touch shortly.'}</h1><p>{locale === 'ar' ? `شكراً لاهتمامك بـ ${demo.product}.` : `Thank you for your interest in ${demo.product}.`}</p></section>
-  return <section className="contact-layout" id="top"><div><p className="eyebrow">{locale === 'ar' ? 'تواصل مع المبيعات' : 'Contact sales'}</p><h1>{locale === 'ar' ? 'صمّم مسار اعتماد يناسب فريقك.' : 'Design an adoption path for your team.'}</h1><p>{locale === 'ar' ? 'اطلب عرضاً، اختر الخطة المناسبة، واحصل على مساعدة في الإعداد.' : 'Request a demo, choose the right plan, and get help with setup.'}</p><ul>{(locale === 'ar' ? ['عرض مخصص لسير عملك', 'توصية بالخطة والحوكمة', 'دعم للإعداد والتكامل'] : ['A demo tailored to your workflow', 'Plan and governance recommendation', 'Setup and integration support']).map((item) => <li key={item}><Check aria-hidden="true" />{item}</li>)}</ul></div><form onSubmit={(event) => { event.preventDefault(); setSubmitted(true) }}><label>{locale === 'ar' ? 'الاسم' : 'Name'}<TextInput name="name" required /></label><label>{locale === 'ar' ? 'البريد للعمل' : 'Work email'}<TextInput name="email" required type="email" /></label><label>{locale === 'ar' ? 'الشركة' : 'Company'}<TextInput name="company" required /></label><label>{locale === 'ar' ? 'حجم الفريق' : 'Team size'}<Selector defaultValue=""><option disabled value="">{locale === 'ar' ? 'اختر' : 'Select'}</option><option>1–20</option><option>21–100</option><option>101–500</option><option>500+</option></Selector></label><label>{locale === 'ar' ? 'ما سير العمل الذي تريد تحسينه؟' : 'Which workflow do you want to improve?'}<Textarea name="workflow" rows={5} /></label><Button endContent={<ArrowIcon />} size="lg" type="submit">{locale === 'ar' ? 'إرسال الطلب' : 'Submit request'}</Button><small>{locale === 'ar' ? 'بيانات تجريبية فقط — لا يتم إرسالها إلى خدمة خارجية.' : 'Demo only — data is not sent to an external service.'}</small></form></section>
+  return <section className="contact-layout" id="top"><div><p className="eyebrow">{locale === 'ar' ? 'تواصل مع المبيعات' : 'Contact sales'}</p><h1>{locale === 'ar' ? 'صمّم مسار اعتماد يناسب فريقك.' : 'Design an adoption path for your team.'}</h1><p>{locale === 'ar' ? 'اطلب عرضاً، اختر الخطة المناسبة، واحصل على مساعدة في الإعداد.' : 'Request a demo, choose the right plan, and get help with setup.'}</p><ul>{(locale === 'ar' ? ['عرض مخصص لسير عملك', 'توصية بالخطة والحوكمة', 'دعم للإعداد والتكامل'] : ['A demo tailored to your workflow', 'Plan and governance recommendation', 'Setup and integration support']).map((item) => <li key={item}><Check aria-hidden="true" />{item}</li>)}</ul></div><form onSubmit={(event) => { event.preventDefault(); setSubmitted(true) }}><label>{locale === 'ar' ? 'الاسم' : 'Name'}<TextInput name="name" required /></label><label>{locale === 'ar' ? 'البريد للعمل' : 'Work email'}<TextInput name="email" required type="email" /></label><label>{locale === 'ar' ? 'الشركة' : 'Company'}<TextInput name="company" required /></label><label>{locale === 'ar' ? 'حجم الفريق' : 'Team size'}<Select name="team-size"><SelectTrigger aria-label={locale === 'ar' ? 'حجم الفريق' : 'Team size'}><SelectValue placeholder={locale === 'ar' ? 'اختر' : 'Select'} /></SelectTrigger><SelectContent><SelectItem value="1-20">1–20</SelectItem><SelectItem value="21-100">21–100</SelectItem><SelectItem value="101-500">101–500</SelectItem><SelectItem value="500-plus">500+</SelectItem></SelectContent></Select></label><label>{locale === 'ar' ? 'ما سير العمل الذي تريد تحسينه؟' : 'Which workflow do you want to improve?'}<Textarea name="workflow" rows={5} /></label><Button endContent={<ArrowIcon />} size="lg" type="submit">{locale === 'ar' ? 'إرسال الطلب' : 'Submit request'}</Button><small>{locale === 'ar' ? 'بيانات تجريبية فقط — لا يتم إرسالها إلى خدمة خارجية.' : 'Demo only — data is not sent to an external service.'}</small></form></section>
 }
 
 function SecondaryPage({ demo, locale, page, previewMode, seed, setPreviewMode }: { demo: DemoData; locale: Locale; page: PageKey; previewMode: PreviewMode; seed: number; setPreviewMode: (mode: PreviewMode) => void }) {