{ "id": "na:technology-fit-sampling-tableau/instance/front-end-stack-selection-public-v0.1", "type": "TechnologyFitSamplingSurface", "profileOf": "na:narrative-sampling-tableau", "displayName": "Technology Fit Sampling Tableau", "subtitle": "Front-end stack exploration through multiplicity, fit, gaps, spikes, and practitioner routes", "version": "0.1", "status": "chimeric_prototype", "asOf": "2026-06-21", "centralContract": "Compare popular defaults and fit-for-purpose front-end compositions through separate probability objects, dimensional fit, equal low-fidelity spikes, explicit gaps, and reversible decision records.", "sourcePage": { "name": "Technology fit, swapability, and specification-by-example source reading", "role": "Public-safe source orientation for fit-over-popularity, optionality, swapability, maintainability, and specification-by-example." }, "promptCapsule": { "id": "na:technology-fit-ai-prompt-capsule/v0.1", "type": "AIContextProjection", "displayName": "Technology fit sampling request", "currentDecision": "Choose two front-end stack candidates for equivalent low-fidelity spikes, then preserve evidence and an exit path before a durable stack commitment.", "probabilityObjects": [ { "id": "probability-default-likelihood", "label": "Generic LLM first-recommendation likelihood", "statement": "P(generic-LLM-first-recommendation | the named prompt condition): the model-verbalized probability that a candidate appears as the first recommendation under that request.", "candidateSetSemantics": "open_exclusive", "normalizationRule": "Listed candidates plus other/tail mass sum to one.", "measurementStatus": "uncalibrated_verbalized_sample" }, { "id": "probability-six-month-fit", "label": "Six-month collaboration fit", "statement": "P(six-month-fit-without-structural-rewrite | declared outcome, team conditions, and current evidence): the contextual planning probability that a candidate supports the selected low-fidelity interaction surfaces for six months while preserving accessibility, semantic readability, maintainability, testability, and a practical replacement path.", "candidateSetSemantics": "independent_events", "normalizationRule": "Candidate estimates are independent and need not sum to one.", "measurementStatus": "uncalibrated_planning_estimate" } ], "population": "Teams building accessible, SVG-rich, static collaboration surfaces with AI systems", "horizon": "Six months after the first implementation", "conditions": [ "Static hosting is acceptable for the exemplar", "The surface includes editable state, JSON and JSON-LD twins, SVG diagrams, and accessible tables", "High-risk interaction primitives receive local keyboard and assistive-technology verification", "Behavior fixtures remain portable across candidates", "The team values optionality over framework popularity" ], "exclusions": [ "A calibrated market-share or model-frequency forecast", "A permanent organization-wide framework mandate", "A server-heavy application requirement that has not yet appeared" ], "candidateCountRequested": 7, "diversityInstruction": "Fan out materially different framework, styling, component, and platform commitments. Include a common LLM default, middle-ground options, a compiler-oriented option, and platform-first options.", "tailInstruction": "Reserve explicit mass for viable stacks outside the listed set.", "dimensionInstruction": "Score each candidate on the eight named collaboration dimensions. Keep weighted dimensional fit separate from both probability objects.", "gapInstruction": "Identify methodological, technical, organizational, evidence, and boundary gaps. Route material technical gaps into practitioner probes, low-fidelity spikes, research, or Core Architectures.", "iterationInstruction": "After one run, propose prompt or evidence changes that may raise or lower each probability. Mark these as hypotheses until a successor run or observed spike provides evidence.", "comparisonInstruction": "Return candidate correspondence across runs and explain additions, omissions, rank changes, and probability shifts.", "returnShape": [ "candidate identity and composable stack layers", "default-likelihood estimate with interval and tail semantics", "six-month fit estimate with interval and explicit planning status", "dimensional-fit scores and weights", "tradeoffs, assumptions, and evidence that would move the estimates", "methodological and technical gaps", "low-fidelity spike suggestions", "Practitioner Probe and Core Architecture routes", "decision, abstention, and review conditions" ] }, "dimensions": [ { "id": "human-maintainability", "name": "Human maintainability", "weight": 0.18, "definition": "How readily maintainers can understand ownership, debug behavior, and make local changes after the initial implementation.", "evidenceClass": "maintainer walkthrough, code review, change task" }, { "id": "accessibility-integrity", "name": "Accessibility integrity", "weight": 0.17, "definition": "How reliably the stack preserves native semantics, keyboard behavior, accessible naming, status feedback, and local assistive-technology verification.", "evidenceClass": "semantic DOM review, keyboard path, AT verification" }, { "id": "swapability", "name": "Swapability", "weight": 0.15, "definition": "How clearly rendering, styling, components, state, and build layers can be replaced without rewriting unrelated behavior.", "evidenceClass": "replacement spike, dependency and boundary view" }, { "id": "iteration-speed", "name": "Low-fidelity iteration speed", "weight": 0.12, "definition": "How quickly collaborators can produce, inspect, and revise credible low-fidelity surfaces.", "evidenceClass": "timed spike with equivalent behavior" }, { "id": "ai-legibility", "name": "AI collaboration legibility", "weight": 0.11, "definition": "How well code structure, contracts, examples, and failure states support accurate AI modification and explanation.", "evidenceClass": "cross-model modification task and rationale review" }, { "id": "svg-control", "name": "SVG and data-visual control", "weight": 0.1, "definition": "How directly collaborators can control coordinate systems, grouping, transforms, label placement, interaction, and accessible equivalents.", "evidenceClass": "dense SVG label-placement spike" }, { "id": "testability", "name": "Testability and specification fit", "weight": 0.09, "definition": "How easily behavior can be specified independently, tested across layers, and preserved during replacement.", "evidenceClass": "Specification-by-Example and platform-neutral test fixture" }, { "id": "operational-calm", "name": "Operational and dependency calm", "weight": 0.08, "definition": "How well the stack bounds dependency churn, build complexity, resource lifetimes, static deployment, and observability.", "evidenceClass": "dependency review, build test, runtime lifetime audit" } ], "runs": [ { "id": "run-sparse-default-brief", "name": "Run A · sparse default brief", "asOf": "2026-06-21", "status": "sample_state", "promptCondition": "Build a maintainable interactive front end quickly. Recommend a stack.", "samplingCondition": "Underspecified request with no explicit accessibility, SVG, swapability, or six-month horizon.", "candidateSetSemantics": "open_exclusive", "otherOrTailMass": 0.02, "defaultProbabilityObject": "P(generic-LLM-first-recommendation | sparse brief)", "fitProbabilityObject": "P(six-month-fit-without-structural-rewrite | declared outcome and current evidence)", "candidates": [ { "id": "react-tailwind-copied-primitives", "name": "React + Tailwind + copied component primitives", "shortName": "React / Tailwind", "semanticCluster": "popular-react-utility", "summary": "A high-frequency LLM default optimized for immediate scaffolding and familiar examples.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "Tailwind-style utility classes", "components": "Copied component primitives", "stateData": "React state + query/store as needed", "buildDeploy": "Vite-style static build", "testing": "DOM/component tests + end-to-end" }, "dimensionScores": { "human-maintainability": 5.8, "accessibility-integrity": 6.7, "swapability": 5.2, "iteration-speed": 9.1, "ai-legibility": 9.2, "svg-control": 7.3, "testability": 8.2, "operational-calm": 5.8 }, "strengths": [ "Rapid scaffolding", "Large example surface in model training and public code", "Easy access to many component recipes" ], "tradeoffs": [ "Utility-class density can reduce semantic readability", "Copied primitives create local maintenance responsibility", "Styling and component assumptions can become broadly coupled" ], "replacementSeam": "Keep behavior, data, and accessibility contracts independent from utility classes and copied primitives.", "defaultLikelihood": { "estimate": 0.45, "intervalLow": 0.34, "intervalHigh": 0.55, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.59, "intervalLow": 0.42, "intervalHigh": 0.74, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "react-css-modules-headless", "name": "React + CSS Modules + headless accessible primitives", "shortName": "React / CSS Modules", "semanticCluster": "react-semantic-css", "summary": "A middle-ground React option with local semantic styles and explicit primitive ownership.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "CSS Modules + cascade layers", "components": "Headless accessible primitives", "stateData": "React state + external stores through declared adapters", "buildDeploy": "Vite-style static build", "testing": "Specification examples + DOM/component + end-to-end" }, "dimensionScores": { "human-maintainability": 8.1, "accessibility-integrity": 8.3, "swapability": 7.4, "iteration-speed": 7.8, "ai-legibility": 8.6, "svg-control": 8.3, "testability": 8.5, "operational-calm": 7.2 }, "strengths": [ "Readable local style ownership", "Strong React ecosystem access with explicit component seams", "Straightforward semantic HTML and SVG control" ], "tradeoffs": [ "More deliberate style and primitive composition", "React version assumptions still need active stewardship", "Headless primitives require local visual-system work" ], "replacementSeam": "Place framework adapters around state, routing, and primitives; keep CSS tokens and behavior fixtures portable.", "defaultLikelihood": { "estimate": 0.19, "intervalLow": 0.12, "intervalHigh": 0.27, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.67, "intervalLow": 0.5, "intervalHigh": 0.82, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "react-integrated-component-system", "name": "React + integrated component system", "shortName": "React / integrated system", "semanticCluster": "react-integrated-components", "summary": "A rapid, accessibility-aware path with theming and component behavior supplied by an integrated system.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "Component-system theming", "components": "Integrated accessible component system", "stateData": "React state + query/store as needed", "buildDeploy": "Framework-compatible static or server build", "testing": "Component contracts + end-to-end" }, "dimensionScores": { "human-maintainability": 7.1, "accessibility-integrity": 8.2, "swapability": 5.8, "iteration-speed": 8.4, "ai-legibility": 8.0, "svg-control": 6.8, "testability": 8.0, "operational-calm": 6.4 }, "strengths": [ "Fast scaffolding with coherent theming", "Many interaction patterns arrive with accessibility posture", "Lower local primitive construction cost" ], "tradeoffs": [ "Component and styling layers share a stronger framework commitment", "Visual exceptions may require library-specific knowledge", "Replacement can touch many surfaces at once" ], "replacementSeam": "Wrap integrated components behind local contracts and keep domain behavior outside component-library APIs.", "defaultLikelihood": { "estimate": 0.1, "intervalLow": 0.05, "intervalHigh": 0.17, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.62, "intervalLow": 0.45, "intervalHigh": 0.78, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "vue-css-modules-headless", "name": "Vue + CSS Modules + headless primitives", "shortName": "Vue / CSS Modules", "semanticCluster": "vue-semantic-css", "summary": "A component-oriented option with a readable template model and explicit styling and primitive layers.", "layers": { "runtime": "Browser DOM", "framework": "Vue", "styling": "CSS Modules or component-scoped CSS", "components": "Headless accessible primitives", "stateData": "Vue reactivity + query/store adapters", "buildDeploy": "Vite-style static build", "testing": "Specification examples + component + end-to-end" }, "dimensionScores": { "human-maintainability": 8.0, "accessibility-integrity": 7.7, "swapability": 7.1, "iteration-speed": 7.6, "ai-legibility": 7.5, "svg-control": 8.0, "testability": 8.0, "operational-calm": 7.3 }, "strengths": [ "Readable template and component boundaries", "Strong static build path", "Good direct DOM and SVG control" ], "tradeoffs": [ "Smaller local familiarity may increase onboarding cost", "AI examples may default to React unless directed", "Headless primitive coverage needs local review" ], "replacementSeam": "Use framework-neutral domain models, behavior examples, and CSS tokens with narrow component adapters.", "defaultLikelihood": { "estimate": 0.09, "intervalLow": 0.04, "intervalHigh": 0.15, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.59, "intervalLow": 0.42, "intervalHigh": 0.75, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "svelte-component-css", "name": "Svelte + component-scoped CSS", "shortName": "Svelte / scoped CSS", "semanticCluster": "svelte-compiler", "summary": "A compact compiler-oriented option with low ceremony and direct component-local markup and styling.", "layers": { "runtime": "Browser DOM", "framework": "Svelte", "styling": "Component-scoped CSS + shared tokens", "components": "Native-first local components", "stateData": "Svelte state + explicit service adapters", "buildDeploy": "Static adapter or Vite-style build", "testing": "Specification examples + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 8.4, "accessibility-integrity": 7.4, "swapability": 7.5, "iteration-speed": 8.2, "ai-legibility": 7.0, "svg-control": 8.4, "testability": 7.8, "operational-calm": 7.7 }, "strengths": [ "Compact readable component files", "Direct HTML, CSS, and SVG authoring", "Low runtime and scaffolding ceremony for static surfaces" ], "tradeoffs": [ "Smaller practitioner and AI example surface", "Framework-specific reactive syntax still requires stewardship", "Some enterprise component ecosystems are less extensive" ], "replacementSeam": "Preserve domain state and fixtures outside component syntax; use custom events and adapters at boundaries.", "defaultLikelihood": { "estimate": 0.08, "intervalLow": 0.035, "intervalHigh": 0.14, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.63, "intervalLow": 0.46, "intervalHigh": 0.79, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "lit-web-components-css-layers", "name": "Lit + Web Components + CSS layers", "shortName": "Lit / Web Components", "semanticCluster": "web-components-lit", "summary": "A standards-oriented component path with explicit custom-element and shadow-boundary contracts.", "layers": { "runtime": "Browser DOM + Custom Elements", "framework": "Lit", "styling": "CSS layers + shadow or light DOM policy", "components": "Web Components", "stateData": "Framework-neutral services and signals/adapters", "buildDeploy": "Static module build", "testing": "Custom-element contracts + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 7.7, "accessibility-integrity": 7.0, "swapability": 8.3, "iteration-speed": 6.2, "ai-legibility": 6.2, "svg-control": 8.7, "testability": 7.3, "operational-calm": 8.0 }, "strengths": [ "Strong platform-level component interoperability", "Clear module and custom-element seams", "Direct control of HTML, CSS, and SVG" ], "tradeoffs": [ "Shadow DOM and accessibility details require experienced judgment", "Lower AI default familiarity", "Application-level routing and data patterns need explicit selection" ], "replacementSeam": "Custom-element APIs can remain stable while internal implementation changes.", "defaultLikelihood": { "estimate": 0.04, "intervalLow": 0.015, "intervalHigh": 0.085, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.5, "intervalLow": 0.32, "intervalHigh": 0.69, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "vanilla-ts-web-components-css-layers", "name": "Vanilla TypeScript + Web Components + CSS layers", "shortName": "Vanilla TS / Web Components", "semanticCluster": "platform-native", "summary": "A platform-first option with minimal framework commitment and maximum explicit ownership.", "layers": { "runtime": "Browser DOM + Custom Elements", "framework": "Platform APIs", "styling": "Modern CSS + cascade layers", "components": "Native elements + local Web Components", "stateData": "Typed services, events, and immutable records", "buildDeploy": "Minimal static module build", "testing": "Platform-neutral unit + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 8.8, "accessibility-integrity": 6.8, "swapability": 9.0, "iteration-speed": 5.4, "ai-legibility": 6.0, "svg-control": 8.8, "testability": 7.0, "operational-calm": 8.5 }, "strengths": [ "Minimal dependency and framework commitment", "High semantic and styling clarity", "Strong replacement and longevity posture" ], "tradeoffs": [ "More local engineering for complex interaction patterns", "Accessibility behavior requires strong native-first practice", "Lower initial scaffolding speed and smaller shared component ecosystem" ], "replacementSeam": "Platform contracts are the seam; local components and services can be replaced independently.", "defaultLikelihood": { "estimate": 0.03, "intervalLow": 0.01, "intervalHigh": 0.07, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.48, "intervalLow": 0.3, "intervalHigh": 0.67, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "unreviewed", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] } ], "missingModeClasses": [ "standards-oriented platform-first options", "explicit framework-layer composition", "technical-veracity and resource-lifetime review" ], "runNotes": "Illustrates likely default concentration when the collaboration request carries little structural guidance." }, { "id": "run-evidence-enriched-brief", "name": "Run B · evidence-enriched brief", "asOf": "2026-06-21", "status": "sample_state", "promptCondition": "Compare materially distinct front-end stacks for a static, accessible, SVG-rich collaboration surface with JSON/JSON-LD round trip and a practical six-month replacement path.", "samplingCondition": "Outcome, dimensions, gap review, low-fidelity spikes, and technology-layer composition are explicit.", "candidateSetSemantics": "open_exclusive", "otherOrTailMass": 0.02, "defaultProbabilityObject": "P(generic-LLM-first-recommendation | evidence-enriched brief)", "fitProbabilityObject": "P(six-month-fit-without-structural-rewrite | declared outcome and current evidence)", "candidates": [ { "id": "react-tailwind-copied-primitives", "name": "React + Tailwind + copied component primitives", "shortName": "React / Tailwind", "semanticCluster": "popular-react-utility", "summary": "A high-frequency LLM default optimized for immediate scaffolding and familiar examples.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "Tailwind-style utility classes", "components": "Copied component primitives", "stateData": "React state + query/store as needed", "buildDeploy": "Vite-style static build", "testing": "DOM/component tests + end-to-end" }, "dimensionScores": { "human-maintainability": 5.8, "accessibility-integrity": 6.7, "swapability": 5.2, "iteration-speed": 9.1, "ai-legibility": 9.2, "svg-control": 7.3, "testability": 8.2, "operational-calm": 5.8 }, "strengths": [ "Rapid scaffolding", "Large example surface in model training and public code", "Easy access to many component recipes" ], "tradeoffs": [ "Utility-class density can reduce semantic readability", "Copied primitives create local maintenance responsibility", "Styling and component assumptions can become broadly coupled" ], "replacementSeam": "Keep behavior, data, and accessibility contracts independent from utility classes and copied primitives.", "defaultLikelihood": { "estimate": 0.3, "intervalLow": 0.22, "intervalHigh": 0.4, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.52, "intervalLow": 0.36, "intervalHigh": 0.68, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "held", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "react-css-modules-headless", "name": "React + CSS Modules + headless accessible primitives", "shortName": "React / CSS Modules", "semanticCluster": "react-semantic-css", "summary": "A middle-ground React option with local semantic styles and explicit primitive ownership.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "CSS Modules + cascade layers", "components": "Headless accessible primitives", "stateData": "React state + external stores through declared adapters", "buildDeploy": "Vite-style static build", "testing": "Specification examples + DOM/component + end-to-end" }, "dimensionScores": { "human-maintainability": 8.1, "accessibility-integrity": 8.3, "swapability": 7.4, "iteration-speed": 7.8, "ai-legibility": 8.6, "svg-control": 8.3, "testability": 8.5, "operational-calm": 7.2 }, "strengths": [ "Readable local style ownership", "Strong React ecosystem access with explicit component seams", "Straightforward semantic HTML and SVG control" ], "tradeoffs": [ "More deliberate style and primitive composition", "React version assumptions still need active stewardship", "Headless primitives require local visual-system work" ], "replacementSeam": "Place framework adapters around state, routing, and primitives; keep CSS tokens and behavior fixtures portable.", "defaultLikelihood": { "estimate": 0.26, "intervalLow": 0.18, "intervalHigh": 0.36, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.78, "intervalLow": 0.64, "intervalHigh": 0.89, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "selected_for_spike", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "react-integrated-component-system", "name": "React + integrated component system", "shortName": "React / integrated system", "semanticCluster": "react-integrated-components", "summary": "A rapid, accessibility-aware path with theming and component behavior supplied by an integrated system.", "layers": { "runtime": "Browser DOM", "framework": "React", "styling": "Component-system theming", "components": "Integrated accessible component system", "stateData": "React state + query/store as needed", "buildDeploy": "Framework-compatible static or server build", "testing": "Component contracts + end-to-end" }, "dimensionScores": { "human-maintainability": 7.1, "accessibility-integrity": 8.2, "swapability": 5.8, "iteration-speed": 8.4, "ai-legibility": 8.0, "svg-control": 6.8, "testability": 8.0, "operational-calm": 6.4 }, "strengths": [ "Fast scaffolding with coherent theming", "Many interaction patterns arrive with accessibility posture", "Lower local primitive construction cost" ], "tradeoffs": [ "Component and styling layers share a stronger framework commitment", "Visual exceptions may require library-specific knowledge", "Replacement can touch many surfaces at once" ], "replacementSeam": "Wrap integrated components behind local contracts and keep domain behavior outside component-library APIs.", "defaultLikelihood": { "estimate": 0.1, "intervalLow": 0.05, "intervalHigh": 0.17, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.64, "intervalLow": 0.48, "intervalHigh": 0.79, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "held", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "vue-css-modules-headless", "name": "Vue + CSS Modules + headless primitives", "shortName": "Vue / CSS Modules", "semanticCluster": "vue-semantic-css", "summary": "A component-oriented option with a readable template model and explicit styling and primitive layers.", "layers": { "runtime": "Browser DOM", "framework": "Vue", "styling": "CSS Modules or component-scoped CSS", "components": "Headless accessible primitives", "stateData": "Vue reactivity + query/store adapters", "buildDeploy": "Vite-style static build", "testing": "Specification examples + component + end-to-end" }, "dimensionScores": { "human-maintainability": 8.0, "accessibility-integrity": 7.7, "swapability": 7.1, "iteration-speed": 7.6, "ai-legibility": 7.5, "svg-control": 8.0, "testability": 8.0, "operational-calm": 7.3 }, "strengths": [ "Readable template and component boundaries", "Strong static build path", "Good direct DOM and SVG control" ], "tradeoffs": [ "Smaller local familiarity may increase onboarding cost", "AI examples may default to React unless directed", "Headless primitive coverage needs local review" ], "replacementSeam": "Use framework-neutral domain models, behavior examples, and CSS tokens with narrow component adapters.", "defaultLikelihood": { "estimate": 0.11, "intervalLow": 0.055, "intervalHigh": 0.18, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.66, "intervalLow": 0.5, "intervalHigh": 0.81, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "held", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "svelte-component-css", "name": "Svelte + component-scoped CSS", "shortName": "Svelte / scoped CSS", "semanticCluster": "svelte-compiler", "summary": "A compact compiler-oriented option with low ceremony and direct component-local markup and styling.", "layers": { "runtime": "Browser DOM", "framework": "Svelte", "styling": "Component-scoped CSS + shared tokens", "components": "Native-first local components", "stateData": "Svelte state + explicit service adapters", "buildDeploy": "Static adapter or Vite-style build", "testing": "Specification examples + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 8.4, "accessibility-integrity": 7.4, "swapability": 7.5, "iteration-speed": 8.2, "ai-legibility": 7.0, "svg-control": 8.4, "testability": 7.8, "operational-calm": 7.7 }, "strengths": [ "Compact readable component files", "Direct HTML, CSS, and SVG authoring", "Low runtime and scaffolding ceremony for static surfaces" ], "tradeoffs": [ "Smaller practitioner and AI example surface", "Framework-specific reactive syntax still requires stewardship", "Some enterprise component ecosystems are less extensive" ], "replacementSeam": "Preserve domain state and fixtures outside component syntax; use custom events and adapters at boundaries.", "defaultLikelihood": { "estimate": 0.11, "intervalLow": 0.055, "intervalHigh": 0.18, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.71, "intervalLow": 0.56, "intervalHigh": 0.85, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "selected_for_spike", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "lit-web-components-css-layers", "name": "Lit + Web Components + CSS layers", "shortName": "Lit / Web Components", "semanticCluster": "web-components-lit", "summary": "A standards-oriented component path with explicit custom-element and shadow-boundary contracts.", "layers": { "runtime": "Browser DOM + Custom Elements", "framework": "Lit", "styling": "CSS layers + shadow or light DOM policy", "components": "Web Components", "stateData": "Framework-neutral services and signals/adapters", "buildDeploy": "Static module build", "testing": "Custom-element contracts + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 7.7, "accessibility-integrity": 7.0, "swapability": 8.3, "iteration-speed": 6.2, "ai-legibility": 6.2, "svg-control": 8.7, "testability": 7.3, "operational-calm": 8.0 }, "strengths": [ "Strong platform-level component interoperability", "Clear module and custom-element seams", "Direct control of HTML, CSS, and SVG" ], "tradeoffs": [ "Shadow DOM and accessibility details require experienced judgment", "Lower AI default familiarity", "Application-level routing and data patterns need explicit selection" ], "replacementSeam": "Custom-element APIs can remain stable while internal implementation changes.", "defaultLikelihood": { "estimate": 0.06, "intervalLow": 0.025, "intervalHigh": 0.11, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.59, "intervalLow": 0.42, "intervalHigh": 0.75, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "held", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] }, { "id": "vanilla-ts-web-components-css-layers", "name": "Vanilla TypeScript + Web Components + CSS layers", "shortName": "Vanilla TS / Web Components", "semanticCluster": "platform-native", "summary": "A platform-first option with minimal framework commitment and maximum explicit ownership.", "layers": { "runtime": "Browser DOM + Custom Elements", "framework": "Platform APIs", "styling": "Modern CSS + cascade layers", "components": "Native elements + local Web Components", "stateData": "Typed services, events, and immutable records", "buildDeploy": "Minimal static module build", "testing": "Platform-neutral unit + DOM + end-to-end" }, "dimensionScores": { "human-maintainability": 8.8, "accessibility-integrity": 6.8, "swapability": 9.0, "iteration-speed": 5.4, "ai-legibility": 6.0, "svg-control": 8.8, "testability": 7.0, "operational-calm": 8.5 }, "strengths": [ "Minimal dependency and framework commitment", "High semantic and styling clarity", "Strong replacement and longevity posture" ], "tradeoffs": [ "More local engineering for complex interaction patterns", "Accessibility behavior requires strong native-first practice", "Lower initial scaffolding speed and smaller shared component ecosystem" ], "replacementSeam": "Platform contracts are the seam; local components and services can be replaced independently.", "defaultLikelihood": { "estimate": 0.04, "intervalLow": 0.015, "intervalHigh": 0.085, "estimateKind": "model_verbalized_distribution", "measurementStatus": "uncalibrated_verbalized_sample", "calibrationState": "uncalibrated", "basis": "Uncalibrated verbalized sample under the named prompt condition; this is not an observed model-frequency benchmark." }, "sixMonthFit": { "estimate": 0.58, "intervalLow": 0.4, "intervalHigh": 0.74, "estimateKind": "planning_probability", "measurementStatus": "uncalibrated_planning_estimate", "calibrationState": "uncalibrated", "basis": "Contextual planning estimate under the declared collaboration outcome; candidates are independent and need not sum to one." }, "decisionState": "held", "evidenceStatus": "sample_state", "assumptions": [ "A static or mostly client-side interactive reference surface is acceptable.", "The team can run equal behavior fixtures across candidates.", "Accessibility and SVG interaction are consequential decision dimensions." ], "evidenceWouldMove": [ "Equal low-fidelity spike results", "Local accessibility and keyboard verification", "Framework-layer replacement exercise", "Dependency and resource-lifetime review" ] } ], "missingModeClasses": [ "server-heavy full-stack frameworks", "native mobile and desktop shells", "organization-specific design systems" ], "runNotes": "Illustrates how richer conditions may broaden the candidate range and change fit estimates without treating the estimates as calibrated forecasts." } ], "activeRunId": "run-evidence-enriched-brief", "comparison": { "baselineRunId": "run-sparse-default-brief", "comparisonRunId": "run-evidence-enriched-brief", "comparisonQuestion": "How does a richer collaboration contract change default likelihood, six-month fit, candidate breadth, gap visibility, and the decision to spike?" }, "stackPalette": { "id": "technology-stack-layer-palette/v0.1", "rule": "A candidate stack is a composition of independently reviewable layers. Layer choices preserve stable IDs and may form new candidate combinations.", "layers": [ { "id": "framework", "label": "Rendering and component model", "choices": [ { "id": "react", "label": "React", "notes": "Large ecosystem; explicit version and rendering assumptions required." }, { "id": "vue", "label": "Vue", "notes": "Template-oriented component model with direct DOM and SVG access." }, { "id": "svelte", "label": "Svelte", "notes": "Compiler-oriented component model with compact local files." }, { "id": "lit", "label": "Lit", "notes": "Web Components helper with standards-facing custom-element contracts." }, { "id": "platform", "label": "Platform APIs", "notes": "Native DOM, modules, and custom elements with local architecture." } ] }, { "id": "styling", "label": "Styling and cascade", "choices": [ { "id": "tailwind", "label": "Utility classes", "notes": "Fast assembly; class density and override governance deserve review." }, { "id": "css-modules", "label": "CSS Modules + cascade layers", "notes": "Local ownership with modern cascade tools." }, { "id": "scoped-css", "label": "Component-scoped CSS", "notes": "Local authoring with shared tokens and explicit global layers." }, { "id": "integrated-theming", "label": "Integrated component theming", "notes": "Fast coherence with stronger component-system commitment." }, { "id": "modern-css", "label": "Modern CSS + cascade layers", "notes": "Platform-first styling and explicit semantic classes." } ] }, { "id": "components", "label": "Component primitives", "choices": [ { "id": "copied-primitives", "label": "Copied component primitives", "notes": "Local code ownership with maintenance and provenance responsibilities." }, { "id": "headless", "label": "Headless accessible primitives", "notes": "Behavior and semantics with local visual system." }, { "id": "integrated", "label": "Integrated component system", "notes": "Broad ready-made components and theming." }, { "id": "native-first", "label": "Native-first local components", "notes": "Native elements first, custom behavior when purpose requires it." }, { "id": "web-components", "label": "Web Components", "notes": "Custom-element contracts with light or shadow DOM policy." } ] }, { "id": "state-data", "label": "State and data", "choices": [ { "id": "local-state", "label": "Local component state + services", "notes": "Narrow state ownership and explicit service boundaries." }, { "id": "query-store", "label": "Query/cache + external store", "notes": "Explicit external-store and invalidation contracts." }, { "id": "event-services", "label": "Typed events + services", "notes": "Framework-neutral domain and data flow." }, { "id": "state-machine", "label": "State machine for consequential flows", "notes": "Explicit state, events, guards, and transition tests." } ] }, { "id": "build-deploy", "label": "Build and deployment", "choices": [ { "id": "vite-static", "label": "Vite-style static build", "notes": "Simple static hosting and module pipeline." }, { "id": "framework-static", "label": "Framework static adapter", "notes": "Framework-aware static generation or adapter." }, { "id": "minimal-esm", "label": "Minimal ESM build", "notes": "Small toolchain with explicit browser support policy." }, { "id": "server-capable", "label": "Server-capable framework build", "notes": "Adds server rendering and deployment surface; use when the decision needs it." } ] }, { "id": "testing", "label": "Testing and verification", "choices": [ { "id": "spec-dom-e2e", "label": "Specification + DOM + end-to-end", "notes": "Shared behavior examples with local interaction verification." }, { "id": "component-e2e", "label": "Component contracts + end-to-end", "notes": "Component-system-focused verification." }, { "id": "platform-unit-dom", "label": "Platform-neutral unit + DOM + end-to-end", "notes": "Portable behavior and browser integration checks." }, { "id": "at-local", "label": "Add local assistive-technology verification", "notes": "Human-reviewed AT evidence for high-risk primitives." } ] } ], "currentComposition": { "framework": "react", "styling": "css-modules", "components": "headless", "state-data": "event-services", "build-deploy": "vite-static", "testing": "spec-dom-e2e" } }, "lowFidelitySpikes": [ { "id": "spike-semantic-form-feedback", "name": "Semantic form and status feedback", "decisionQuestion": "Can the candidate preserve native form semantics, committed filtering, status feedback, focus recovery, and zero-results messaging with a clear local verification path?", "architectureRefs": [ "ca:specification-by-example", "ca:unit-test-first-design", "ca:practitioner-judgment-probes" ], "acceptanceCriteria": [ "Native element choice is explicit", "Accessible name, description, role, state, and feedback are inspectable", "Keyboard path and duplicate-commit boundary are tested", "Table or text equivalent is available" ], "candidateStates": { "react-css-modules-headless": { "status": "planned", "evidence": "Shared fixture prepared; local AT verification pending." }, "svelte-component-css": { "status": "planned", "evidence": "Shared fixture prepared; native-first component path pending." } } }, { "id": "spike-svg-label-placement", "name": "SVG coordinate and label-placement surface", "decisionQuestion": "Can the candidate render, edit, and export a dense SVG scene while preserving groups, transforms, collision rules, stable IDs, keyboard access, and a table equivalent?", "architectureRefs": [ "ca:pattern-problem-surface-matrix", "ca:software-architecture-views", "ca:specification-by-example" ], "acceptanceCriteria": [ "Geometry lives in a framework-neutral model", "Grouped transforms and coordinate conversions are explicit", "At least two label-placement methods can be compared", "Collision count, runtime, and accessible text map are recorded" ], "candidateStates": { "react-css-modules-headless": { "status": "working_example", "evidence": "Direct SVG and grouping path appears viable; dense-scene benchmark remains open." }, "svelte-component-css": { "status": "working_example", "evidence": "Compact SVG authoring path appears viable; assistive naming and export checks remain open." } } }, { "id": "spike-responsive-comparison-surface", "name": "Responsive comparison and inspector", "decisionQuestion": "Can the candidate preserve semantic order, keyboard reachability, readable tables, and stable inspector identity across narrow and wide viewports?", "architectureRefs": [ "ca:participatory-design-kit", "ca:specification-by-example", "ca:heart-chart" ], "acceptanceCriteria": [ "No consequential information disappears at narrow widths", "Visual order and semantic order remain aligned", "Target size and reduced-motion contracts are satisfied", "The same artifact state supports visual and table views" ], "candidateStates": { "react-css-modules-headless": { "status": "planned", "evidence": "Responsive chassis and table equivalent pending." }, "svelte-component-css": { "status": "planned", "evidence": "Responsive chassis and table equivalent pending." } } }, { "id": "spike-round-trip-state", "name": "Editable state and JSON / JSON-LD round trip", "decisionQuestion": "Can collaborators edit the surface, export stable state, re-import it, and preserve IDs, value origins, omissions, and source boundaries?", "architectureRefs": [ "ca:software-architecture-views", "ca:unit-test-first-design", "ca:upstream-revision-loop" ], "acceptanceCriteria": [ "State JSON validates", "JSON-LD parses and preserves stable IDs", "Import restores the same consequential state", "View configuration remains separate from semantic state" ], "candidateStates": { "react-css-modules-headless": { "status": "planned", "evidence": "Shared state contract available; implementation comparison pending." }, "svelte-component-css": { "status": "planned", "evidence": "Shared state contract available; implementation comparison pending." } } }, { "id": "spike-layer-replacement", "name": "Styling and component-layer replacement", "decisionQuestion": "Can one visual and interaction slice replace its styling or primitive layer while behavior fixtures and domain state remain unchanged?", "architectureRefs": [ "ca:software-architecture-views", "ca:unit-test-first-design", "ca:plus-delta" ], "acceptanceCriteria": [ "Behavior tests remain unchanged", "Token and cascade ownership is documented", "Replacement work stays inside declared adapters", "Migration notes identify changed and preserved elements" ], "candidateStates": { "react-css-modules-headless": { "status": "planned", "evidence": "Replace headless primitive or CSS module in one slice." }, "svelte-component-css": { "status": "planned", "evidence": "Replace component implementation while preserving state and fixtures." } } } ], "gaps": [ { "id": "gap-popularity-frequency-unmeasured", "gapClass": "methodological", "gapType": "calibration_absent", "title": "Default-likelihood frequency remains unmeasured", "description": "The verbalized default distribution illustrates model priors under two prompts; it is not an empirical benchmark across models or repeated samples.", "consequence": "Treating it as measured frequency would overstate precision.", "gapUtility": "coordination_gap", "currentHandling": "Preserve as an explicitly uncalibrated distribution and open a benchmark only when the decision needs measured frequency.", "routeTargetId": "ca:heart-chart", "probeRef": "pp:start-here-technology-decision", "resolutionState": "open", "severity": "moderate" }, { "id": "gap-fit-commensurability", "gapClass": "methodological", "gapType": "runs_not_commensurate", "title": "Six-month fit combines several forms of evidence", "description": "Current fit estimates blend practitioner judgment, design dimensions, and hypothetical spike outcomes without a formal statistical model.", "consequence": "Intervals communicate uncertainty but do not establish sampling error.", "gapUtility": "coordination_gap", "currentHandling": "Keep dimensional fit visible and reserve formal statistical fit for observed outcomes with a named model.", "routeTargetId": "ca:strategy-canvas", "probeRef": "pp:start-here-technology-decision", "resolutionState": "open", "severity": "moderate" }, { "id": "gap-svg-density-envelope", "gapClass": "technical", "gapType": "technical_veracity_gap", "title": "SVG density and label-placement envelope", "description": "The intended scene size, label count, motion pattern, and collision budget remain partially specified.", "consequence": "A framework may appear equally suitable in a small sample while diverging under realistic density.", "gapUtility": "coordination_gap", "currentHandling": "Run the shared dense SVG fixture and compare at least two placement strategies.", "routeTargetId": "ca:pattern-problem-surface-matrix", "probeRef": "pp:visual-label-placement", "resolutionState": "open", "severity": "high" }, { "id": "gap-at-verification", "gapClass": "technical", "gapType": "accessibility_gap", "title": "Local assistive-technology verification", "description": "Library or framework claims remain source anchors; high-risk primitives still need local keyboard and assistive-technology verification.", "consequence": "Accessibility fit can be overstated by source documentation alone.", "gapUtility": "harmful", "currentHandling": "Attach local verification to the semantic form and feedback spike.", "routeTargetId": "ca:practitioner-judgment-probes", "probeRef": "pp:html-semantic-ownership", "resolutionState": "open", "severity": "high" }, { "id": "gap-react-version", "gapClass": "technical", "gapType": "model_or_version_unknown", "title": "React version and integration assumptions", "description": "React candidates need exact version, rendering, external-store, component-library, and build assumptions before technical claims can settle.", "consequence": "A generic React label can hide materially different runtime and coherence behavior.", "gapUtility": "coordination_gap", "currentHandling": "Use the React version-coherence probe and record local rendering tests.", "routeTargetId": "ca:practitioner-judgment-probes", "probeRef": "pp:react-version-coherence", "resolutionState": "open", "severity": "moderate" }, { "id": "gap-resource-lifetimes", "gapClass": "technical", "gapType": "technical_veracity_gap", "title": "Effect and resource-lifetime behavior", "description": "Listeners, observers, timers, fetches, and external subscriptions need equal acquire/release review across selected candidates.", "consequence": "A concise component model may still conceal duplicated effects or stale resources.", "gapUtility": "coordination_gap", "currentHandling": "Run navigation and repeated-render stress cases with an acquire/release ledger.", "routeTargetId": "ca:software-architecture-views", "probeRef": "pp:javascript-resource-lifetimes", "resolutionState": "open", "severity": "high" }, { "id": "gap-maintainer-context", "gapClass": "organizational", "gapType": "population_undefined", "title": "Maintainer and collaborator context", "description": "Current estimates assume a team comfortable with TypeScript, semantic HTML, modern CSS, and local verification; actual experience distribution remains unstated.", "consequence": "A stack with strong abstract fit may impose uneven onboarding cost.", "gapUtility": "coordination_gap", "currentHandling": "Create a Context Tree for maintainers, designers, accessibility reviewers, and future practitioners working with generative systems.", "routeTargetId": "ca:context-tree", "probeRef": "pp:start-here-technology-decision", "resolutionState": "open", "severity": "moderate" }, { "id": "gap-static-deployment-boundary", "gapClass": "boundary", "gapType": "target_model_mismatch", "title": "Static-hosting boundary versus server needs", "description": "The exemplar assumes a static or mostly client-side collaboration surface; authentication, server rendering, or dynamic API needs could change the candidate set.", "consequence": "The selected stack may optimize for a narrower deployment model than future work requires.", "gapUtility": "generative", "currentHandling": "Keep server-capable frameworks in the open tail and revisit when a concrete server requirement appears.", "routeTargetId": "ca:service-design-blueprint", "probeRef": "pp:start-here-technology-decision", "resolutionState": "held_open", "severity": "low" }, { "id": "gap-dependency-aging", "gapClass": "evidence", "gapType": "evidence_stale", "title": "Dependency and six-month aging evidence", "description": "The prototype does not yet contain repeated upgrade, security, or dependency-review observations for the candidate stacks.", "consequence": "Operational-calm estimates remain planning judgments.", "gapUtility": "coordination_gap", "currentHandling": "Add a dependency review and one controlled upgrade exercise to the spike record.", "routeTargetId": "ca:unit-test-first-design", "probeRef": "pp:css-swapability", "resolutionState": "open", "severity": "moderate" } ], "probeRegistryRef": "pp:front-end-technology-practitioner-probe-registry/v0.1", "routingRegistryRef": "ca:technology-decision-routing-registry/v0.1", "selectedProbeIds": [ "pp:start-here-technology-decision", "pp:html-semantic-ownership", "pp:css-swapability", "pp:svg-coordinate-and-label-fit", "pp:javascript-resource-lifetimes", "pp:react-version-coherence", "pp:visual-label-placement" ], "selectedRouteIds": [ "ca:strategy-canvas", "ca:practitioner-judgment-probes", "ca:specification-by-example", "ca:software-architecture-views", "ca:heart-chart", "ca:unit-test-first-design", "ca:service-design-blueprint" ], "formalStatisticalFitBoundary": { "id": "formal-statistical-fit-boundary", "status": "not_yet_applicable", "currentState": "The surface contains verbalized probability distributions, contextual planning estimates, and weighted dimensional fit. It does not yet contain observed outcome data or a fitted statistical model.", "minimumForFormalFit": [ "Observed outcome variable and unit of analysis", "Sampling frame or repeated trials", "Named statistical model or test", "Assumptions and diagnostics", "Uncertainty interpretation", "Out-of-sample or replication plan where relevant" ], "replacementState": "When observed spike or pilot data exists, attach a StatisticalFitAssessment while preserving the current verbalized and dimensional records as separate evidence layers." }, "gapPolicy": { "baseType": "GapRecord", "classes": [ "methodological", "technical", "organizational", "evidence", "boundary" ], "determination": "Technical gaps are first-class because framework fit depends on runtime, semantics, accessibility, SVG behavior, resource lifetimes, build boundaries, and replacement seams. Methodological gaps remain first-class for sampling, calibration, commensurability, and candidate coverage." }, "decision": { "id": "technology-decision-record/v0.1", "decisionState": "prepare_equal_spikes", "selectedCandidateIds": [ "react-css-modules-headless", "svelte-component-css" ], "heldCandidateIds": [ "react-tailwind-copied-primitives", "react-integrated-component-system", "vue-css-modules-headless", "lit-web-components-css-layers", "vanilla-ts-web-components-css-layers" ], "declinedCandidateIds": [], "decisionRule": "Select two candidates whose combined spike set creates the most information gain across accessibility, SVG control, maintainability, and replacement seams while preserving materially different framework commitments.", "rationale": "React + CSS Modules + headless primitives represents a high-ecosystem middle ground with explicit seams. Svelte + component-scoped CSS provides a lower-ceremony compiler-oriented contrast. Equal fixtures can reveal whether the additional React ecosystem commitment produces material collaboration value for this surface.", "dissentOrMinorityRead": "A platform-first Web Components spike may create stronger long-horizon evidence and should enter the next round when the initial two spikes leave swapability or operational-calm questions unresolved.", "evidenceRequiredBeforeCommitment": [ "Semantic form and status-feedback verification", "Dense SVG label-placement comparison", "Responsive and accessible table equivalence", "JSON/JSON-LD round trip", "Styling or component-layer replacement exercise", "Resource-lifetime and dependency review" ], "reviewAfter": "After both equal spikes and a Plus / Delta review", "valueOrigin": "human_led_ai_supported_working_decision", "reviewState": "working" }, "viewState": { "selectedCandidateId": "react-css-modules-headless", "selectedProbeId": "pp:svg-coordinate-and-label-fit", "selectedGapClass": "all", "selectedRouteFamily": "all", "showIntervals": true, "showHeldCandidates": true, "activeTab": "tableau" }, "publication": { "visibility": "public_safe", "sourceBand": [ "author_original", "collaboration_stabilized", "sample_state" ], "sourceOfTruthBand": [ "human_steward_review", "schema_validation", "runtime_observation_pending", "local_accessibility_verification_pending" ], "privateLocatorsIncluded": false, "unreviewedInferenceIncludedAsFact": false, "note": "Candidate values are uncalibrated planning and verbalized-sampling records. They invite replacement with team evidence." }, "validation": { "schemaRef": "technology-fit-sampling-tableau-state.schema.v0.1.json", "contextRef": "technology-fit-sampling-tableau.context.v0.1.jsonld", "routeRegistryRef": "technology-decision-routing-registry.v0.1.json", "probeRegistryRef": "front-end-practitioner-probe-registry.v0.1.json" }, "shiftHypotheses": [ { "id": "shift-explicit-optionality", "candidateId": "react-tailwind-copied-primitives", "direction": "lower", "hypothesis": "Naming semantic readability, accessibility verification, and swapability reduces the concentration of the utility-class default.", "status": "hypothesis", "evidenceNeeded": "Repeat across models and prompts with the same candidate set." }, { "id": "shift-explicit-seams", "candidateId": "react-css-modules-headless", "direction": "raise", "hypothesis": "Explicit layer seams and headless primitive requirements increase both recommendation likelihood and contextual fit.", "status": "hypothesis", "evidenceNeeded": "Compare generated architectures and replacement-spike effort." }, { "id": "shift-svg-rich", "candidateId": "svelte-component-css", "direction": "raise", "hypothesis": "Direct SVG authoring and low ceremony become more salient when the collaboration surface is explicitly SVG-rich and static.", "status": "hypothesis", "evidenceNeeded": "Run the dense SVG fixture and compare maintainability and accessibility." }, { "id": "shift-platform-tail", "candidateId": "lit-web-components-css-layers", "direction": "raise", "hypothesis": "A stronger platform-longevity and interoperability prompt may raise standards-oriented Web Components options from the tail.", "status": "hypothesis", "evidenceNeeded": "Successor run plus one custom-element interoperability spike." } ] }