"use client"; import * as React from "react"; export type ViewSpecActionIntent = { id: string; kind: string; targetRef: string; payloadBindings: string[]; payload: Record; }; type ViewSpecVisibilityRule = { id: string; sourceRef: string; sourceKind: string; operator: string; compareValue?: unknown; compareValueType?: string; fallbackValue?: unknown; }; export type ViewSpecData = Record; export type ViewSpecViewProps = { data?: ViewSpecData; onAction?: (intent: ViewSpecActionIntent) => void; className?: string; }; export function ViewSpecView({ data = {}, onAction, className }: ViewSpecViewProps) { const [inputValues, setInputValues] = React.useState>({"include_mobile": true, "owner_email": "launch@viewspec.dev", "phase_filter": "Demos"}); const compiledPayloadValues: Record = {"kpi_blockers_value": "1", "launch_status": "On track"}; const visibilityRules: Record = {"show_mobile_note": {"compareValue": "Mobile", "compareValueType": "string", "fallbackValue": "Demos", "fallbackValueType": "string", "id": "show_mobile_note", "operator": "EQUALS", "sourceKind": "input", "sourceRef": "phase_filter", "targetRef": "binding:mobile_recording_note"}}; const setInputValue = (id: string, value: unknown) => { setInputValues((current) => ({ ...current, [id]: value })); }; const isEmptyRuleValue = (value: unknown): boolean => value == null || value === "" || (Array.isArray(value) && value.length === 0); const ruleValueType = (value: unknown): string => { if (value == null) return "null"; if (typeof value === "boolean") return "boolean"; if (typeof value === "number") return "number"; if (typeof value === "string") return "string"; if (Array.isArray(value)) return "array"; return "object"; }; const sameScalar = (left: unknown, right: unknown): boolean => { const leftType = ruleValueType(left); const rightType = ruleValueType(right); if (!["null", "string", "number", "boolean"].includes(leftType) || leftType !== rightType) return false; return left === right; }; const ruleSourceValue = (rule: ViewSpecVisibilityRule): unknown => { if (rule.sourceKind === "input") { return Object.prototype.hasOwnProperty.call(inputValues, rule.sourceRef) ? inputValues[rule.sourceRef] : rule.fallbackValue; } return Object.prototype.hasOwnProperty.call(data, rule.sourceRef) ? data[rule.sourceRef] : rule.fallbackValue; }; const evaluateRule = (ruleId: string, inputValuesArg: Record, dataArg: ViewSpecData): boolean => { void inputValuesArg; void dataArg; const rule = visibilityRules[ruleId]; if (!rule) return true; const value = ruleSourceValue(rule); if (rule.operator === "IS_EMPTY") return isEmptyRuleValue(value); if (rule.operator === "NOT_EMPTY") return !isEmptyRuleValue(value); if (rule.operator === "IS_TRUE") return value === true; if (rule.operator === "IS_FALSE") return value === false; if (rule.operator === "EQUALS") return sameScalar(value, rule.compareValue); if (rule.operator === "NOT_EQUALS") return !sameScalar(value, rule.compareValue); return true; }; const collectPayload = (payloadBindings: string[]): Record => { const payload: Record = {}; payloadBindings.forEach((bindingId) => { if (Object.prototype.hasOwnProperty.call(inputValues, bindingId)) { payload[bindingId] = inputValues[bindingId]; } else if (Object.prototype.hasOwnProperty.call(compiledPayloadValues, bindingId)) { payload[bindingId] = compiledPayloadValues[bindingId]; } }); return payload; }; return (
event.preventDefault()} style={{ "--vs-temperature": "cool", backgroundColor: "#f0fdfa", "--vs-energy-level": "0.625", "--vs-saturation": "1.113", filter: "saturate(var(--vs-saturation))", "--vs-hierarchy-ratio": "1.16", "--vs-rhythm-density": "compressed", gap: "0.52rem" } as React.CSSProperties}>
{data["launch_title"] ?? "Launch Operations Dashboard"}
{data["launch_status"] ?? "On track"}
{data["launch_summary"] ?? "One ViewSpec source proves web, React, iOS, and Android compilation."}
{data["kpi_emitters_label"] ?? "Emitter targets"}
{data["kpi_emitters_value"] ?? "4"}
{data["kpi_docs_label"] ?? "Docs pages"}
{data["kpi_docs_value"] ?? "8"}
{data["kpi_assets_label"] ?? "Demo assets"}
{data["kpi_assets_value"] ?? "7"}
{data["kpi_blockers_label"] ?? "Blockers"}
{data["kpi_blockers_value"] ?? "1"}
{data["row_html_label"] ?? "HTML/Tailwind"}
{data["row_html_state"] ?? "Live link ready"}
{data["row_html_owner"] ?? "web"}
{data["row_react_label"] ?? "React TSX"}
{data["row_react_state"] ?? "Runtime page ready"}
{data["row_react_owner"] ?? "web"}
{data["row_swiftui_label"] ?? "SwiftUI"}
{data["row_swiftui_state"] ?? "External simulator recording"}
{data["row_swiftui_owner"] ?? "mobile"}
{data["row_flutter_label"] ?? "Flutter"}
{data["row_flutter_state"] ?? "External emulator recording"}
{data["row_flutter_owner"] ?? "mobile"}
{evaluateRule("show_mobile_note", inputValues, data) && (
{data["mobile_recording_note"] ?? "Mobile runtime recording is handed off because this Windows workspace has no simulator tooling."}
)}
); } export default ViewSpecView;