init project

contracts/phase9/components/COMPONENT_CONTRACTS_v1.0.md

@@ -0,0 +1,385 @@
+# Component Contracts
+
+
+
+Every component below is implemented once for all locales, directions, and themes. Props are semantic; components do not fetch translations internally unless the architecture establishes a single typed content boundary.
+
+
+## SiteHeader
+
+**Purpose:** Primary navigation, brand, locale/theme controls, login, demo CTA
+
+**States:** `default,scrolled`  
+
+**Typed data:** `HeaderModel`  
+
+**Copy namespace:** `header.*`
+
+**Responsive:** Desktop at >=1120; drawer trigger below
+
+**RTL:** Nav order reverses naturally; logo unchanged; directional icons selective
+
+**Accessibility:** Sticky; 44px targets; skip-link precedes it
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## MobileDrawer
+
+**Purpose:** Compact/medium navigation overlay
+
+**States:** `closed,open`  
+
+**Typed data:** `DrawerModel`  
+
+**Copy namespace:** `header.*`
+
+**Responsive:** Inline-start fixed drawer <=384px or 88vw
+
+**RTL:** Opens right in RTL
+
+**Accessibility:** Trap focus; inert background; Escape; focus return
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## LocaleSelector
+
+**Purpose:** Switch locale by stable route ID
+
+**States:** `closed,open,disabled`  
+
+**Typed data:** `LocaleSelectorProps`  
+
+**Copy namespace:** `language names`
+
+**Responsive:** Native select baseline
+
+**RTL:** Order EN/FR/AR; control follows document direction
+
+**Accessibility:** Labelled; current locale selected; preserves route/hash
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## ThemeSelector
+
+**Purpose:** Set Light/Dark/System preference
+
+**States:** `light,dark,system`  
+
+**Typed data:** `ThemeSelectorProps`  
+
+**Copy namespace:** `header.light/dark/system`
+
+**Responsive:** Native select or accessible segmented control
+
+**RTL:** No mirroring needed
+
+**Accessibility:** Cookie+storage; immediate; live system updates
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## HeroSection
+
+**Purpose:** Communicate category, promise, primary and secondary actions
+
+**States:** `default`  
+
+**Typed data:** `HeroModel`  
+
+**Copy namespace:** `hero.*`
+
+**Responsive:** 1 column <1120; 7/5 split wide
+
+**RTL:** Text aligns start; preview uses actual RTL rendering
+
+**Accessibility:** One h1; CTA order follows document direction
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## ProductPreview
+
+**Purpose:** Illustrative/evidence-governed product visual
+
+**States:** `illustrative,approved-capture`  
+
+**Typed data:** `ProductPreviewModel`  
+
+**Copy namespace:** `preview.*`
+
+**Responsive:** Simplify data table on compact
+
+**RTL:** Do not mirror screenshots; coded preview renders RTL
+
+**Accessibility:** Accessible caption; no false product claim
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## LifecycleProof
+
+**Purpose:** Show operational coverage without customer logos
+
+**States:** `default`  
+
+**Typed data:** `LifecycleItem[]`  
+
+**Copy namespace:** `trust.*`
+
+**Responsive:** 1/2/4 columns by available width
+
+**RTL:** Sequence follows reading direction
+
+**Accessibility:** List semantics; icons decorative
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## ComparisonSection
+
+**Purpose:** Fragmented versus connected workflow
+
+**States:** `default`  
+
+**Typed data:** `ComparisonModel`  
+
+**Copy namespace:** `comparison.*`
+
+**Responsive:** Stack compact; two columns medium+
+
+**RTL:** Order follows locale reading direction
+
+**Accessibility:** Headings identify both columns; do not rely on color
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## WorkflowSteps
+
+**Purpose:** Four-step rental flow and tour source
+
+**States:** `default`  
+
+**Typed data:** `WorkflowStep[]`  
+
+**Copy namespace:** `workflow.*`
+
+**Responsive:** 1 column compact; 4 columns >=768
+
+**RTL:** Step order follows reading direction
+
+**Accessibility:** Ordered list; numerals isolated if needed
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## RoleCards
+
+**Purpose:** Explain value by operating role
+
+**States:** `default`  
+
+**Typed data:** `RoleCard[]`  
+
+**Copy namespace:** `roles.*`
+
+**Responsive:** 1/2/4 columns content-driven
+
+**RTL:** Same tree; start alignment
+
+**Accessibility:** Heading hierarchy and readable card order
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## ModuleGrid
+
+**Purpose:** Describe approved product modules
+
+**States:** `default`  
+
+**Typed data:** `ModuleCard[]`  
+
+**Copy namespace:** `modules.*`
+
+**Responsive:** 1/2/3 columns
+
+**RTL:** Same tree; directional icons selective
+
+**Accessibility:** No capability beyond approved copy
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## MeasurementPlan
+
+**Purpose:** Show KPI definitions without invented outcomes
+
+**States:** `default`  
+
+**Typed data:** `MetricDefinition[]`  
+
+**Copy namespace:** `results.*`
+
+**Responsive:** Cards plus methodology block
+
+**RTL:** Same tree
+
+**Accessibility:** No unapproved numbers; ordered methodology
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## IntegrationCategories
+
+**Purpose:** Neutral category list
+
+**States:** `default`  
+
+**Typed data:** `IntegrationCategory[]`  
+
+**Copy namespace:** `integrations.*`
+
+**Responsive:** Cloud/list adapts without clipping
+
+**RTL:** Same tree
+
+**Accessibility:** No partner logos until verified
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## SecurityChecklist
+
+**Purpose:** Evidence-request checklist
+
+**States:** `default`  
+
+**Typed data:** `SecurityCheck[]`  
+
+**Copy namespace:** `security.*`
+
+**Responsive:** 1/2 columns
+
+**RTL:** Same tree
+
+**Accessibility:** No badges/certifications without approval
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## PricingPreview
+
+**Purpose:** Explain pricing factors and demo route
+
+**States:** `quote-only,approved-pricing`  
+
+**Typed data:** `PricingModel`  
+
+**Copy namespace:** `pricing.*`
+
+**Responsive:** Stack compact; 2 columns >=768
+
+**RTL:** Same tree
+
+**Accessibility:** Never imply public price when absent
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## FAQAccordion
+
+**Purpose:** Localized questions and answers
+
+**States:** `closed,open`  
+
+**Typed data:** `FaqItem[]`  
+
+**Copy namespace:** `faq.*`
+
+**Responsive:** Single column
+
+**RTL:** Chevron mirrors only if it conveys expansion direction
+
+**Accessibility:** Native details baseline; keyboard and SR tested
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## FinalCTA
+
+**Purpose:** Final conversion block and approved secondary contact
+
+**States:** `default`  
+
+**Typed data:** `FinalCtaModel`  
+
+**Copy namespace:** `finalCta.*`
+
+**Responsive:** Stack compact; 2 columns >=768
+
+**RTL:** CTA order follows document direction
+
+**Accessibility:** Secondary link suppressed until real destination approved
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## SiteFooter
+
+**Purpose:** Localized navigation, legal, evidence status internal only
+
+**States:** `default`  
+
+**Typed data:** `FooterModel`  
+
+**Copy namespace:** `footer.*`
+
+**Responsive:** Stack then grouped columns
+
+**RTL:** Same tree
+
+**Accessibility:** No public internal proof-status label
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## DemoDialog
+
+**Purpose:** Qualification form and submission states
+
+**States:** `idle,invalid,submitting,success,recoverable-error,terminal-error`  
+
+**Typed data:** `DemoFormProps`  
+
+**Copy namespace:** `form.*`
+
+**Responsive:** Modal max width; full-screen-safe compact
+
+**RTL:** Field order follows reading direction; emails isolated
+
+**Accessibility:** Focus trap, summary, inline errors, return focus
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.
+
+
+## ProductTourDialog
+
+**Purpose:** Four-step guided overview
+
+**States:** `step-1,step-2,step-3,step-4,complete`  
+
+**Typed data:** `TourProps`  
+
+**Copy namespace:** `tour.*`
+
+**Responsive:** Modal max width; compact-safe
+
+**RTL:** Back/next positions follow reading direction but meaning stays explicit
+
+**Accessibility:** Progress announced; focus moves to step heading
+
+**Content rule:** Block size is content-driven. Unsupported evidence suppresses the component or uses the explicitly approved neutral variant.

contracts/phase9/components/COMPONENT_STATE_MATRIX_v1.0.csv

@@ -0,0 +1,21 @@
+Component,Purpose,States,Data_contract,Copy_namespace,Responsive_rule,RTL_rule,Accessibility_rule
+SiteHeader,"Primary navigation, brand, locale/theme controls, login, demo CTA","default,scrolled",HeaderModel,header.*,Desktop at >=1120; drawer trigger below,Nav order reverses naturally; logo unchanged; directional icons selective,Sticky; 44px targets; skip-link precedes it
+MobileDrawer,Compact/medium navigation overlay,"closed,open",DrawerModel,header.*,Inline-start fixed drawer <=384px or 88vw,Opens right in RTL,Trap focus; inert background; Escape; focus return
+LocaleSelector,Switch locale by stable route ID,"closed,open,disabled",LocaleSelectorProps,language names,Native select baseline,Order EN/FR/AR; control follows document direction,Labelled; current locale selected; preserves route/hash
+ThemeSelector,Set Light/Dark/System preference,"light,dark,system",ThemeSelectorProps,header.light/dark/system,Native select or accessible segmented control,No mirroring needed,Cookie+storage; immediate; live system updates
+HeroSection,"Communicate category, promise, primary and secondary actions",default,HeroModel,hero.*,1 column <1120; 7/5 split wide,Text aligns start; preview uses actual RTL rendering,One h1; CTA order follows document direction
+ProductPreview,Illustrative/evidence-governed product visual,"illustrative,approved-capture",ProductPreviewModel,preview.*,Simplify data table on compact,Do not mirror screenshots; coded preview renders RTL,Accessible caption; no false product claim
+LifecycleProof,Show operational coverage without customer logos,default,LifecycleItem[],trust.*,1/2/4 columns by available width,Sequence follows reading direction,List semantics; icons decorative
+ComparisonSection,Fragmented versus connected workflow,default,ComparisonModel,comparison.*,Stack compact; two columns medium+,Order follows locale reading direction,Headings identify both columns; do not rely on color
+WorkflowSteps,Four-step rental flow and tour source,default,WorkflowStep[],workflow.*,1 column compact; 4 columns >=768,Step order follows reading direction,Ordered list; numerals isolated if needed
+RoleCards,Explain value by operating role,default,RoleCard[],roles.*,1/2/4 columns content-driven,Same tree; start alignment,Heading hierarchy and readable card order
+ModuleGrid,Describe approved product modules,default,ModuleCard[],modules.*,1/2/3 columns,Same tree; directional icons selective,No capability beyond approved copy
+MeasurementPlan,Show KPI definitions without invented outcomes,default,MetricDefinition[],results.*,Cards plus methodology block,Same tree,No unapproved numbers; ordered methodology
+IntegrationCategories,Neutral category list,default,IntegrationCategory[],integrations.*,Cloud/list adapts without clipping,Same tree,No partner logos until verified
+SecurityChecklist,Evidence-request checklist,default,SecurityCheck[],security.*,1/2 columns,Same tree,No badges/certifications without approval
+PricingPreview,Explain pricing factors and demo route,"quote-only,approved-pricing",PricingModel,pricing.*,Stack compact; 2 columns >=768,Same tree,Never imply public price when absent
+FAQAccordion,Localized questions and answers,"closed,open",FaqItem[],faq.*,Single column,Chevron mirrors only if it conveys expansion direction,Native details baseline; keyboard and SR tested
+FinalCTA,Final conversion block and approved secondary contact,default,FinalCtaModel,finalCta.*,Stack compact; 2 columns >=768,CTA order follows document direction,Secondary link suppressed until real destination approved
+SiteFooter,"Localized navigation, legal, evidence status internal only",default,FooterModel,footer.*,Stack then grouped columns,Same tree,No public internal proof-status label
+DemoDialog,Qualification form and submission states,"idle,invalid,submitting,success,recoverable-error,terminal-error",DemoFormProps,form.*,Modal max width; full-screen-safe compact,Field order follows reading direction; emails isolated,"Focus trap, summary, inline errors, return focus"
+ProductTourDialog,Four-step guided overview,"step-1,step-2,step-3,step-4,complete",TourProps,tour.*,Modal max width; compact-safe,Back/next positions follow reading direction but meaning stays explicit,Progress announced; focus moves to step heading

contracts/phase9/components/CONTENT_CONSTRAINTS_v1.0.csv

@@ -0,0 +1,13 @@
+Content_type,Key_pattern,Planning_bound,Rendering_rule
+Hero title,hero.title,90 Unicode characters target; no hard truncation,Maximum 3 lines at 320px in each locale; copy review if exceeded
+Hero body,hero.body,220 characters target,No clamp; readable measure <=65ch
+Navigation label,header.nav.*,24 characters target,No ellipsis; header switches mode before collision
+Button label,*.primary|*.secondary,40 characters target,Content-width; may wrap to 2 lines on compact only
+Card title,*.items.*.title,70 characters target,No fixed height
+Card body,*.items.*.body,220 characters target,No line clamp
+FAQ question,faq.items.*.question,160 characters target,Whole trigger remains visible
+FAQ answer,faq.items.*.answer,900 characters target,Paragraph/list semantics allowed
+Form error,form.*Error,180 characters target,Inline and summary can wrap
+Meta title,meta.title,50-60 Latin-character planning range,Localized SEO review; never truncate in source
+Meta description,meta.description,140-160 Latin-character planning range,Localized SEO review
+Atomic identifier,runtime value,Data-defined,Wrap with bdi/isolation; never translate

contracts/phase9/components/RESPONSIVE_BEHAVIOR_MATRIX_v1.0.csv

@@ -0,0 +1,20 @@
+Component,Range_px,Layout,Constraint
+Global,0-767,16px minimum gutter; 1 column; 320px reflow gate,No horizontal overflow at 320 CSS px and 400% zoom
+Global,768-1119,24-32px gutter; 4/8-column compositions,Drawer navigation remains
+Global,1120+,40px max gutter; 12-column composition; 1280px container,Desktop header visible
+Header,0-1119,Brand + demo CTA where space permits + menu button,Language/theme/login live in drawer
+Header,1120+,"Brand, center nav, locale/theme, login, demo CTA",Header min block 76px
+Hero,0-1119,Copy then product visual; CTA wraps/stacks as needed,"Title <=14ch target, never forced"
+Hero,1120+,7/5 grid; vertically centered,Visual may not reduce copy below readable measure
+Lifecycle,0-479,1 column,Cards auto height
+Lifecycle,480-767,2 columns,Odd last card spans only if approved
+Lifecycle,768+,4 columns,"Equal visual rhythm, not fixed height"
+Workflow,0-767,1 column ordered list,Connectors omitted
+Workflow,768+,4 columns,Connectors direction-aware
+Cards,0-767,1 column,No carousel substitution
+Cards,768-1119,2 columns,Content-driven
+Cards,1120+,2-3 columns by component contract,No text truncation
+Dialogs,0-479,Viewport-safe margin 8-16px; internal scroll; no hidden submit,Virtual keyboard tested
+Dialogs,480+,Max inline size 720px,Centered native dialog
+Footer,0-767,Stacked groups,Logical order
+Footer,768+,Brand column + grouped links,No fixed widths

contracts/phase9/components/RTL_THEME_MATRIX_v1.0.csv

@@ -0,0 +1,21 @@
+Component,RTL_layout,Mirroring,Theme_behavior,Required_variants
+SiteHeader,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+MobileDrawer,Use logical CSS; start alignment; one DOM tree.,Drawer origin and slide transform mirror.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+LocaleSelector,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+ThemeSelector,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+HeroSection,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+ProductPreview,Use logical CSS; start alignment; one DOM tree.,Coded preview may reflow in RTL. Captured screenshots never mirror.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+LifecycleProof,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+ComparisonSection,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+WorkflowSteps,Use logical CSS; start alignment; one DOM tree.,"Mirror directional arrows/connectors only; do not mirror check, vehicle, globe, or media icons.",Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+RoleCards,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+ModuleGrid,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+MeasurementPlan,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+IntegrationCategories,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+SecurityChecklist,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+PricingPreview,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+FAQAccordion,Use logical CSS; start alignment; one DOM tree.,"Mirror directional arrows/connectors only; do not mirror check, vehicle, globe, or media icons.",Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+FinalCTA,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+SiteFooter,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+DemoDialog,Use logical CSS; start alignment; one DOM tree.,None by default.,Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"
+ProductTourDialog,Use logical CSS; start alignment; one DOM tree.,"Mirror directional arrows/connectors only; do not mirror check, vehicle, globe, or media icons.",Consume semantic tokens; no component-owned theme palette.,"Test en-light, fr-dark, ar-light, ar-dark"