[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69ab0c6d49a88191aedafaf741efa57d","versionInt","title","Network Diagram Mvp App","type","code/react","content","import React, { useMemo, useRef, useState } from \"react\";\n\nconst templates = {\n single_cpe_dual_wan: {\n label: \"Single CPE / Dual WAN\",\n yaml: `site:\n id: BRANCH_STD_01\n name: Branch SD-WAN Standard\n business_type: agency\n criticality: medium\n\ntemplate: single_cpe_dual_wan\n\ncpe:\n count: 1\n type: sdwan\n vendor: cisco\n ha: false\n\nwan:\n links:\n - id: wan1\n name: MPLS Primary\n kind: mpls\n role: primary\n bandwidth: 20M\n provider: Orange\n - id: wan2\n name: Internet Backup\n kind: internet\n role: backup\n bandwidth: 100M\n provider: SFR\n\nlan:\n enabled: true\n segmentation:\n - users\n - voice\n - iot\n\nwlan:\n enabled: true\n ssids:\n - corp\n - guest\n\nsecurity:\n firewall_mode: embedded\n\noptions:\n lte_backup: false\n cloud_edge: true\n datacenter_enabled: true\n notes:\n - Standard site with WAN failover\n`,\n },\n dual_cpe_dual_wan: {\n label: \"Dual CPE / Dual WAN\",\n yaml: `site:\n id: BRANCH_CRIT_01\n name: Branch Critical\n business_type: retail\n criticality: high\n\ntemplate: dual_cpe_dual_wan\n\ncpe:\n count: 2\n type: sdwan\n vendor: cisco\n ha: true\n\nwan:\n links:\n - id: wan1\n name: MPLS Access\n kind: mpls\n role: primary\n bandwidth: 50M\n provider: Orange\n - id: wan2\n name: Internet Access\n kind: internet\n role: secondary\n bandwidth: 200M\n provider: Bouygues\n\nlan:\n enabled: true\n segmentation:\n - users\n - pos\n - voice\n - iot\n\nwlan:\n enabled: true\n ssids:\n - corp\n - guest\n\nsecurity:\n firewall_mode: external\n\noptions:\n lte_backup: true\n cloud_edge: true\n datacenter_enabled: true\n notes:\n - Critical site with dual CPE\n`,\n },\n multi_site_dc_edge: {\n label: \"Multi-site / DC Edge\",\n yaml: `site:\n id: MULTI_DC_01\n name: Regional Multi-Site WAN\n business_type: enterprise\n criticality: high\n\ntemplate: dual_cpe_dual_wan\n\ncpe:\n count: 2\n type: sdwan\n vendor: cisco\n ha: true\n\nwan:\n links:\n - id: wan1\n name: MPLS Core\n kind: mpls\n role: primary\n bandwidth: 100M\n provider: Orange\n - id: wan2\n name: Internet DIA\n kind: internet\n role: secondary\n bandwidth: 500M\n provider: Colt\n\nlan:\n enabled: true\n segmentation:\n - users\n - voice\n - servers\n\nwlan:\n enabled: true\n ssids:\n - corp\n - guest\n\nsecurity:\n firewall_mode: external\n\noptions:\n lte_backup: true\n cloud_edge: true\n datacenter_enabled: true\n notes:\n - Multi-site architecture with data center and cloud edge\n`,\n },\n};\n\nconst accessProfiles = {\n orange_mpls_primary: { name: \"Orange MPLS\", kind: \"mpls\", role: \"primary\", bandwidth: \"20M\", provider: \"Orange\" },\n sfr_internet_backup: { name: \"SFR Internet Backup\", kind: \"internet\", role: \"backup\", bandwidth: \"100M\", provider: \"SFR\" },\n bouygues_internet_secondary: { name: \"Bouygues Internet\", kind: \"internet\", role: \"secondary\", bandwidth: \"200M\", provider: \"Bouygues\" },\n lte_emergency: { name: \"LTE Emergency\", kind: \"lte\", role: \"backup\", bandwidth: \"20M\", provider: \"4G/5G\" },\n colt_dia: { name: \"Colt DIA\", kind: \"internet\", role: \"primary\", bandwidth: \"500M\", provider: \"Colt\" },\n};\n\nfunction parseScalar(value) {\n if (value === \"true\") return true;\n if (value === \"false\") return false;\n if (/^-?\\d+$/.test(value)) return Number(value);\n if ((value.startsWith('\"') && value.endsWith('\"')) || (value.startsWith(\"'\") && value.endsWith(\"'\"))) return value.slice(1, -1);\n return value;\n}\n\nfunction parseSimpleYaml(yaml) {\n const lines = yaml.replace(/\\t/g, \" \").split(/\\r?\\n/);\n const root = {};\n const stack = [{ indent: -1, type: \"object\", value: root }];\n const getParentFrame = (indent) => {\n while (stack.length > 1 && indent <= stack[stack.length - 1].indent) stack.pop();\n return stack[stack.length - 1];\n };\n\n for (let i = 0; i < lines.length; i++) {\n const raw = lines[i];\n if (!raw.trim() || raw.trim().startsWith(\"#\")) continue;\n const indent = raw.match(/^\\s*/)[0].length;\n const line = raw.trim();\n const parent = getParentFrame(indent);\n\n if (line.startsWith(\"- \")) {\n if (parent.type !== \"array\") throw new Error(`Unexpected list item on line ${i + 1}: ${line}`);\n const itemText = line.slice(2).trim();\n if (!itemText) {\n const newObj = {};\n parent.value.push(newObj);\n stack.push({ indent, type: \"object\", value: newObj });\n } else if (itemText.includes(\":\")) {\n const idx = itemText.indexOf(\":\");\n const key = itemText.slice(0, idx).trim();\n const rest = itemText.slice(idx + 1).trim();\n const newObj = {};\n newObj[key] = rest ? parseScalar(rest) : {};\n parent.value.push(newObj);\n stack.push({ indent, type: \"object\", value: newObj });\n if (!rest) stack.push({ indent: indent + 1, type: \"object\", value: newObj[key] });\n } else {\n parent.value.push(parseScalar(itemText));\n }\n continue;\n }\n\n const idx = line.indexOf(\":\");\n if (idx === -1) throw new Error(`Invalid syntax on line ${i + 1}: ${line}`);\n const key = line.slice(0, idx).trim();\n const rest = line.slice(idx + 1).trim();\n if (parent.type !== \"object\") throw new Error(`Unexpected key on line ${i + 1}: ${line}`);\n\n if (!rest) {\n let inferred = {};\n let inferredType = \"object\";\n for (let j = i + 1; j < lines.length; j++) {\n const next = lines[j];\n if (!next.trim() || next.trim().startsWith(\"#\")) continue;\n const nextIndent = next.match(/^\\s*/)[0].length;\n if (nextIndent <= indent) break;\n if (next.trim().startsWith(\"- \")) {\n inferred = [];\n inferredType = \"array\";\n }\n break;\n }\n parent.value[key] = inferred;\n stack.push({ indent, type: inferredType, value: inferred });\n } else {\n parent.value[key] = parseScalar(rest);\n }\n }\n return root;\n}\n\nfunction toYaml(value, indent = 0) {\n const pad = \" \".repeat(indent);\n if (Array.isArray(value)) {\n return value.map((item) => {\n if (item && typeof item === \"object\") {\n const nested = toYaml(item, indent + 1);\n const lines = nested.split(\"\\n\");\n return `${pad}- ${lines[0].trimStart()}${lines.length > 1 ? `\\n${lines.slice(1).join(\"\\n\")}` : \"\"}`;\n }\n return `${pad}- ${String(item)}`;\n }).join(\"\\n\");\n }\n if (value && typeof value === \"object\") {\n return Object.entries(value).map(([key, val]) => {\n if (Array.isArray(val)) {\n if (val.length === 0) return `${pad}${key}: []`;\n return `${pad}${key}:\\n${toYaml(val, indent + 1)}`;\n }\n if (val && typeof val === \"object\") return `${pad}${key}:\\n${toYaml(val, indent + 1)}`;\n return `${pad}${key}: ${String(val)}`;\n }).join(\"\\n\");\n }\n return `${pad}${String(value)}`;\n}\n\nfunction validate(data) {\n const errors = [];\n const template = data?.template;\n const cpeCount = data?.cpe?.count;\n const wanLinks = data?.wan?.links || [];\n if (!data?.site?.name) errors.push(\"site.name is required\");\n if (!Object.keys(templates).includes(template)) errors.push(`unsupported template: ${template || \"missing\"}`);\n if (!Array.isArray(wanLinks) || wanLinks.length === 0) errors.push(\"wan.links must contain at least one WAN link\");\n if (template === \"single_cpe_dual_wan\") {\n if (cpeCount !== 1) errors.push(\"single_cpe_dual_wan requires cpe.count = 1\");\n if (wanLinks.length !== 2) errors.push(\"single_cpe_dual_wan requires exactly 2 WAN links\");\n }\n if (template === \"dual_cpe_dual_wan\") {\n if (cpeCount !== 2) errors.push(\"dual_cpe_dual_wan requires cpe.count = 2\");\n if (wanLinks.length !== 2) errors.push(\"dual_cpe_dual_wan requires exactly 2 WAN links\");\n }\n return errors;\n}\n\nfunction normalizeByTemplate(data) {\n const cloned = JSON.parse(JSON.stringify(data));\n const defaults = {\n site: { id: \"SITE_01\", name: \"New Site\", business_type: \"agency\", criticality: \"medium\" },\n cpe: { count: 1, type: \"sdwan\", vendor: \"cisco\", ha: false },\n wan: { links: [] },\n lan: { enabled: true, segmentation: [\"users\"] },\n wlan: { enabled: true, ssids: [\"corp\"] },\n security: { firewall_mode: \"embedded\" },\n options: { lte_backup: false, cloud_edge: true, datacenter_enabled: false, notes: [] },\n };\n cloned.site = { ...defaults.site, ...(cloned.site || {}) };\n cloned.cpe = { ...defaults.cpe, ...(cloned.cpe || {}) };\n cloned.wan = { ...defaults.wan, ...(cloned.wan || {}) };\n cloned.lan = { ...defaults.lan, ...(cloned.lan || {}) };\n cloned.wlan = { ...defaults.wlan, ...(cloned.wlan || {}) };\n cloned.security = { ...defaults.security, ...(cloned.security || {}) };\n cloned.options = { ...defaults.options, ...(cloned.options || {}) };\n\n if (cloned.template === \"single_cpe_dual_wan\") cloned.cpe.count = 1;\n if (cloned.template === \"dual_cpe_dual_wan\") {\n cloned.cpe.count = 2;\n cloned.cpe.ha = true;\n }\n\n const targetWanCount = cloned.template.includes(\"dual_wan\") ? 2 : 1;\n const currentLinks = Array.isArray(cloned.wan.links) ? cloned.wan.links : [];\n const fallbackLinks = [\n { id: \"wan1\", name: \"MPLS Primary\", kind: \"mpls\", role: \"primary\", bandwidth: \"20M\", provider: \"Orange\" },\n { id: \"wan2\", name: \"Internet Backup\", kind: \"internet\", role: \"backup\", bandwidth: \"100M\", provider: \"SFR\" },\n ];\n cloned.wan.links = Array.from({ length: targetWanCount }, (_, i) => ({ ...fallbackLinks[i], ...(currentLinks[i] || {}), id: `wan${i + 1}` }));\n return cloned;\n}\n\nfunction generatePlantUml(data) {\n const site = data.site || {};\n const template = data.template || \"unknown\";\n const cpe = data.cpe || { count: 1, type: \"sdwan\" };\n const wan = data.wan || { links: [] };\n const lan = data.lan || { enabled: false };\n const wlan = data.wlan || { enabled: false };\n const security = data.security || { firewall_mode: \"none\" };\n const options = data.options || { lte_backup: false, datacenter_enabled: false, cloud_edge: false };\n const lines = [];\n lines.push(\"@startuml\");\n lines.push(`title ${site.name || \"Unnamed Site\"} - ${template}`);\n lines.push(\"\");\n lines.push(\"skinparam shadowing false\");\n lines.push(\"skinparam defaultTextAlignment center\");\n lines.push(\"\");\n lines.push(\"nwdiag {\");\n lines.push(' network \"WAN\" {');\n (wan.links || []).forEach((link) => lines.push(` ${link.id} [description = \"${link.name}\\\\n${String(link.kind || \"\").toUpperCase()}\\\\n${link.bandwidth || \"\"}\\\\n${link.role || \"\"}\"];`));\n lines.push(\" }\");\n lines.push(' network \"CPE Layer\" {');\n if (cpe.count === 1) {\n lines.push(` cpe1 [description = \"CPE 1\\\\n${String(cpe.type || \"\").toUpperCase()}\"];`);\n (wan.links || []).forEach((link) => lines.push(` cpe1 -- ${link.id};`));\n } else {\n lines.push(` cpe1 [description = \"CPE 1\\\\n${String(cpe.type || \"\").toUpperCase()}\"];`);\n lines.push(` cpe2 [description = \"CPE 2\\\\n${String(cpe.type || \"\").toUpperCase()}\"];`);\n (wan.links || []).forEach((link) => { lines.push(` cpe1 -- ${link.id};`); lines.push(` cpe2 -- ${link.id};`); });\n }\n lines.push(\" }\");\n if (lan.enabled) {\n lines.push(' network \"LAN\" {');\n lines.push(' lan1 [description = \"LAN\"];');\n lines.push(\" lan1 -- cpe1;\");\n if (cpe.count === 2) lines.push(\" lan1 -- cpe2;\");\n lines.push(\" }\");\n }\n if (wlan.enabled) {\n lines.push(' network \"WLAN\" {');\n lines.push(' wlan1 [description = \"WLAN\"];');\n lines.push(\" wlan1 -- cpe1;\");\n if (cpe.count === 2) lines.push(\" wlan1 -- cpe2;\");\n lines.push(\" }\");\n }\n if (options.lte_backup) {\n lines.push(' network \"LTE\" {');\n lines.push(' lte1 [description = \"LTE Backup\"];');\n lines.push(\" lte1 -- cpe1;\");\n if (cpe.count === 2) lines.push(\" lte1 -- cpe2;\");\n lines.push(\" }\");\n }\n if (options.datacenter_enabled) {\n lines.push(' network \"DC Edge\" {');\n lines.push(' dcedge1 [description = \"DC Edge / Hub\"];');\n lines.push(\" }\");\n }\n lines.push(\"}\");\n lines.push(\"legend right\");\n lines.push(` Site: ${site.name || \"Unnamed Site\"}`);\n lines.push(` Template: ${template}`);\n lines.push(` CPE count: ${cpe.count || 0}`);\n lines.push(` Firewall: ${security.firewall_mode || \"none\"}`);\n lines.push(` DC enabled: ${options.datacenter_enabled ? \"yes\" : \"no\"}`);\n lines.push(\"endlegend\");\n lines.push(\"@enduml\");\n return lines.join(\"\\n\");\n}\n\nfunction getLinkStyle(kind) {\n if (kind === \"mpls\") return { stroke: \"#2563EB\", dasharray: \"0\", badgeFill: \"#DBEAFE\", badgeText: \"#1D4ED8\", label: \"MPLS\" };\n if (kind === \"internet\") return { stroke: \"#F59E0B\", dasharray: \"10 6\", badgeFill: \"#FEF3C7\", badgeText: \"#B45309\", label: \"Internet\" };\n if (kind === \"lte\") return { stroke: \"#10B981\", dasharray: \"4 4\", badgeFill: \"#D1FAE5\", badgeText: \"#047857\", label: \"LTE\" };\n return { stroke: \"#64748B\", dasharray: \"0\", badgeFill: \"#E2E8F0\", badgeText: \"#334155\", label: String(kind || \"Link\") };\n}\n\nfunction downloadFile(filename, content, type = \"text/plain;charset=utf-8\") {\n const blob = new Blob([content], { type });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n}\n\nfunction downloadSvgById(svgId, filename) {\n const svg = document.getElementById(svgId);\n if (!svg) return;\n const serializer = new XMLSerializer();\n let source = serializer.serializeToString(svg);\n if (!source.match(/^]+xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\"/)) source = source.replace(\"\n \n MPLS\n {label}\n \n );\n}\n\nfunction InternetCloud({ x, y, label }) {\n return (\n \n \n Internet\n {label}\n \n );\n}\n\nfunction LteModem({ x, y, label }) {\n return (\n \n \n \n \n \n \n LTE\n {label}\n \n );\n}\n\nfunction CiscoRouterIcon({ x, y }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction FirewallIcon({ x, y }) {\n return (\n \n \n \n \n );\n}\n\nfunction WifiApIcon({ x, y }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction DcEdgeIcon({ x, y }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Node({ x, y, width = 160, height = 62, label, sublabel, kind = \"box\" }) {\n let fill = \"#FFFFFF\", stroke = \"#CBD5E1\", icon = null;\n if (kind === \"cisco-router\" || kind === \"sdwan\" || kind === \"router\" || kind === \"ucpe\") icon = ;\n if (kind === \"firewall\") icon = ;\n if (kind === \"wlan\") icon = ;\n if (kind === \"dc-edge\") icon = ;\n return (\n \n \n {icon}\n {label}\n {sublabel ? {sublabel} : null}\n \n );\n}\n\nfunction Link({ x1, y1, x2, y2, text, kind }) {\n const style = getLinkStyle(kind);\n const mx = (x1 + x2) / 2;\n const my = (y1 + y2) / 2;\n return (\n \n \n \n {style.label}\n {text ? {text} : null}\n \n );\n}\n\nfunction WanVisual({ link, x, y }) {\n if (link.kind === \"mpls\") return ;\n if (link.kind === \"internet\") return ;\n if (link.kind === \"lte\") return ;\n return ;\n}\n\nfunction DiagramPreview({ data, svgId = \"network-svg-preview\", viewMode = \"logical\" }) {\n const site = data?.site || {};\n const wanLinks = data?.wan?.links || [];\n const cpeCount = data?.cpe?.count || 1;\n const cpeType = String(data?.cpe?.type || \"sdwan\").toLowerCase();\n const showLan = !!data?.lan?.enabled;\n const showWlan = !!data?.wlan?.enabled;\n const showLte = !!data?.options?.lte_backup;\n const showDc = !!data?.options?.datacenter_enabled;\n const showCloudEdge = !!data?.options?.cloud_edge;\n const width = 1160;\n const height = 700;\n\n if (viewMode === \"datacenter\") {\n return (\n \n );\n }\n\n if (viewMode === \"service\") {\n return (\n \n );\n }\n\n const wanY = viewMode === \"physical\" ? 110 : 95;\n const cpeY = viewMode === \"physical\" ? 290 : 250;\n const accessY = viewMode === \"physical\" ? 500 : 470;\n const wanXs = wanLinks.length === 1 ? [460] : wanLinks.length === 2 ? [260, 610] : wanLinks.map((_, i) => 120 + i * 210);\n const cpeXs = cpeCount === 1 ? [470] : [380, 570];\n\n return (\n \n );\n}\n\nfunction Field({ label, children }) { return {label}{children}; }\nfunction Input(props) { return ; }\nfunction Select(props) { return onChange(e.target.checked)} className=\"h-4 w-4 rounded border-slate-300\" />{label}; }\n\nfunction EditorPanel({ data, onChange }) {\n const update = (path, value) => {\n const cloned = JSON.parse(JSON.stringify(data));\n let cur = cloned;\n for (let i = 0; i < path.length - 1; i++) cur = cur[path[i]];\n cur[path[path.length - 1]] = value;\n onChange(normalizeByTemplate(cloned));\n };\n const updateWan = (index, key, value) => {\n const cloned = JSON.parse(JSON.stringify(data));\n cloned.wan.links[index][key] = value;\n onChange(normalizeByTemplate(cloned));\n };\n const applyProfile = (index, profileKey) => {\n const profile = accessProfiles[profileKey];\n if (!profile) return;\n const cloned = JSON.parse(JSON.stringify(data));\n cloned.wan.links[index] = { ...cloned.wan.links[index], ...profile, id: cloned.wan.links[index].id };\n onChange(normalizeByTemplate(cloned));\n };\n\n return (\n

Business Form

\n update([\"site\", \"name\"], e.target.value)} />\n update([\"site\", \"id\"], e.target.value)} />\n \n \n \n \n \n

\n update([\"lan\", \"enabled\"], v)} />\n update([\"wlan\", \"enabled\"], v)} />\n update([\"options\", \"lte_backup\"], v)} />\n update([\"cpe\", \"ha\"], v)} />\n update([\"options\", \"cloud_edge\"], v)} />\n update([\"options\", \"datacenter_enabled\"], v)} />\n

\n\n

WAN Links

\n {data.wan.links.map((link, index) => (\n

\n \n updateWan(index, \"name\", e.target.value)} />\n \n \n updateWan(index, \"bandwidth\", e.target.value)} />\n updateWan(index, \"provider\", e.target.value)} />\n updateWan(index, \"id\", e.target.value)} />\n

\n ))}\n

\n );\n}\n\nexport default function NetworkDiagramMvpApp() {\n const [selectedTemplate, setSelectedTemplate] = useState(\"single_cpe_dual_wan\");\n const [formData, setFormData] = useState(normalizeByTemplate(parseSimpleYaml(templates.single_cpe_dual_wan.yaml)));\n const [mode, setMode] = useState(\"form\");\n const [viewMode, setViewMode] = useState(\"logical\");\n const yamlText = useMemo(() => toYaml(formData), [formData]);\n const svgIdRef = useRef(`network-svg-${Math.random().toString(36).slice(2)}`);\n\n const result = useMemo(() => {\n try {\n const data = normalizeByTemplate(formData);\n const errors = validate(data);\n const plantuml = errors.length === 0 ? generatePlantUml(data) : \"\";\n const json = errors.length === 0 ? JSON.stringify(data, null, 2) : \"\";\n const normalizedYaml = errors.length === 0 ? toYaml(data) : \"\";\n return { data, errors, plantuml, json, normalizedYaml, parseError: null };\n } catch (err) {\n return { data: null, errors: [], plantuml: \"\", json: \"\", normalizedYaml: \"\", parseError: err.message || String(err) };\n }\n }, [formData]);\n\n const loadTemplate = (key) => {\n setSelectedTemplate(key);\n setFormData(normalizeByTemplate(parseSimpleYaml(templates[key].yaml)));\n };\n\n const handleYamlEdit = (text) => {\n try {\n const parsed = parseSimpleYaml(text);\n setFormData(normalizeByTemplate(parsed));\n } catch {}\n };\n\n return (\n

Telecom Network Diagram MVP

Cisco-style icons, WAN clouds/modem symbols, multi-view diagrams, and data center / cloud edge modeling.

\n Template library\n \n

\n Edit mode\n \n

\n Diagram view\n \n

\n\n

\n {mode === \"form\" ? (\n \n ) : (\n

Advanced YAML

\n \n

handleYamlEdit(e.target.value)} className=\"h-[760px] w-full rounded-xl border border-slate-300 p-3 font-mono text-sm outline-none focus:ring-2 focus:ring-slate-300\" />\n                <p className=\"mt-2 text-xs text-slate-500\">The form remains the main source of truth; advanced YAML is useful for quick adjustments.</p>\n              </div>\n            )}\n          </section>\n\n          <section className=\"space-y-6\">\n            <div className=\"rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200\">\n              <h2 className=\"text-lg font-medium text-slate-900\">Validation</h2>\n              {result.parseError ? (\n                <div className=\"mt-3 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700\">Error: {result.parseError}</div>\n              ) : result.errors.length > 0 ? (\n                <div className=\"mt-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800\">\n                  <div className=\"font-medium\">Detected issues:</div>\n                  <ul className=\"mt-2 list-disc pl-5\">{result.errors.map((e, i) => <li key={i}>{e}</li>)}</ul>\n                </div>\n              ) : (\n                <div className=\"mt-3 rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700\">Configuration is valid for the MVP.</div>\n              )}\n            </div>\n\n            <div className=\"rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200\">\n              <div className=\"mb-3 flex items-center justify-between\">\n                <h2 className=\"text-lg font-medium text-slate-900\">Visual Preview</h2>\n                <button disabled={!!result.parseError || result.errors.length > 0} onClick={() => downloadSvgById(svgIdRef.current, \"network-diagram.svg\")} className=\"rounded-xl border border-slate-300 px-3 py-1.5 text-sm text-slate-700 disabled:cursor-not-allowed disabled:opacity-50\">Export SVG</button>\n              </div>\n              {result.data && !result.parseError && result.errors.length === 0 ? <DiagramPreview data={result.data} svgId={svgIdRef.current} viewMode={viewMode} /> : <div className=\"rounded-xl border border-dashed border-slate-300 p-6 text-sm text-slate-500\">The preview appears as soon as the configuration is valid.</div>}\n            </div>\n\n            <div className=\"rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200\">\n              <div className=\"mb-3 flex items-center justify-between gap-3\">\n                <h2 className=\"text-lg font-medium text-slate-900\">Exportable Outputs</h2>\n                <div className=\"flex flex-wrap gap-2\">\n                  <button disabled={!!result.parseError || result.errors.length > 0} onClick={() => downloadFile(\"site-diagram.puml\", result.plantuml)} className=\"rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50\">Export PUML</button>\n                  <button disabled={!!result.parseError || result.errors.length > 0} onClick={() => downloadFile(\"site-diagram.json\", result.json, \"application/json;charset=utf-8\")} className=\"rounded-xl border border-slate-300 px-3 py-1.5 text-sm text-slate-700 disabled:cursor-not-allowed disabled:opacity-50\">Export JSON</button>\n                  <button disabled={!!result.parseError || result.errors.length > 0} onClick={() => downloadFile(\"site-normalized.yaml\", result.normalizedYaml)} className=\"rounded-xl border border-slate-300 px-3 py-1.5 text-sm text-slate-700 disabled:cursor-not-allowed disabled:opacity-50\">Normalized YAML</button>\n                </div>\n              </div>\n              <div className=\"grid gap-4 lg:grid-cols-2\">\n                <div>\n                  <div className=\"mb-2 text-sm font-medium text-slate-700\">PlantUML</div>\n                  <pre className=\"h-[280px] overflow-auto rounded-xl bg-slate-950 p-4 text-xs text-slate-100\"><code>{result.plantuml || \"PlantUML will appear here once the configuration is valid.\"}</code></pre>\n                </div>\n                <div>\n                  <div className=\"mb-2 text-sm font-medium text-slate-700\">JSON</div>\n                  <pre className=\"h-[280px] overflow-auto rounded-xl bg-slate-100 p-4 text-xs text-slate-800\"><code>{result.json || \"JSON will appear here once the configuration is valid.\"}</code></pre>\n                </div>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","3556206119125740735","traceTime",1778439715017]
</article></body></html>