245 lines
10 KiB
HTML
245 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Schemeta Workspace</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<h1>SCHEMETA</h1>
|
|
<p>AI-Native Schematic Workspace</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button id="newProjectBtn">New</button>
|
|
<button id="loadSampleBtn">Load Sample</button>
|
|
<button id="importBtn">Import JSON</button>
|
|
<button id="exportBtn">Export JSON</button>
|
|
<button id="autoLayoutBtn">Auto Layout</button>
|
|
<button id="autoTidyBtn">Auto Tidy</button>
|
|
<button id="undoBtn" title="Undo (Ctrl/Cmd+Z)">Undo</button>
|
|
<button id="redoBtn" title="Redo (Ctrl/Cmd+Shift+Z)">Redo</button>
|
|
<label class="inlineSelect">
|
|
Mode
|
|
<select id="renderModeSelect">
|
|
<option value="schematic_stub">Schematic Stub</option>
|
|
<option value="explicit">Explicit Wires</option>
|
|
</select>
|
|
</label>
|
|
<input id="fileInput" type="file" accept="application/json,.json" hidden />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="pane left">
|
|
<section>
|
|
<div class="sectionHead">
|
|
<h2>Instances</h2>
|
|
<button id="isolateComponentBtn" class="chip">Isolate</button>
|
|
</div>
|
|
<input id="instanceFilter" placeholder="Filter instances" aria-label="Filter instances" />
|
|
<ul id="instanceList" class="list" aria-label="Instances list"></ul>
|
|
</section>
|
|
<section>
|
|
<div class="sectionHead">
|
|
<h2>Nets</h2>
|
|
<button id="isolateNetBtn" class="chip">Isolate</button>
|
|
</div>
|
|
<input id="netFilter" placeholder="Filter nets" aria-label="Filter nets" />
|
|
<ul id="netList" class="list" aria-label="Nets list"></ul>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="pane center">
|
|
<div class="canvasTools">
|
|
<button id="zoomOutBtn">-</button>
|
|
<button id="zoomResetBtn">100%</button>
|
|
<button id="zoomInBtn">+</button>
|
|
<button id="fitViewBtn">Fit</button>
|
|
<label class="inlineCheck"><input id="showLabelsInput" type="checkbox" checked /> Labels</label>
|
|
<span id="compileStatus">Idle</span>
|
|
</div>
|
|
<div id="canvasViewport" class="canvasViewport">
|
|
<div id="canvasInner" class="canvasInner"></div>
|
|
<div id="selectionBox" class="selectionBox hidden"></div>
|
|
<div id="pinTooltip" class="pinTooltip hidden"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="pane right">
|
|
<section>
|
|
<h2>Selected</h2>
|
|
<div id="selectedSummary" class="card">Click a component, net, or pin to inspect it.</div>
|
|
<div id="componentEditor" class="editorCard hidden">
|
|
<div class="editorGrid">
|
|
<label>Ref <input id="instRefInput" type="text" /></label>
|
|
<label>Value <input id="instValueInput" type="text" /></label>
|
|
<label>Notes <input id="instNotesInput" type="text" /></label>
|
|
<label>X <input id="xInput" type="number" step="20" /></label>
|
|
<label>Y <input id="yInput" type="number" step="20" /></label>
|
|
<label>Rotation
|
|
<select id="rotationInput">
|
|
<option value="0">0deg</option>
|
|
<option value="90">90deg</option>
|
|
<option value="180">180deg</option>
|
|
<option value="270">270deg</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<label class="inline"><input id="lockedInput" type="checkbox" /> Locked</label>
|
|
<div class="editorActions">
|
|
<button id="rotateSelectedBtn">Rotate +90</button>
|
|
<button id="updatePlacementBtn">Apply Component</button>
|
|
<button id="duplicateComponentBtn">Duplicate</button>
|
|
<button id="deleteComponentBtn">Delete</button>
|
|
<button id="isolateSelectedComponentBtn">Isolate</button>
|
|
</div>
|
|
</div>
|
|
<div id="symbolEditor" class="editorCard hidden">
|
|
<div id="symbolMeta" class="hintText"></div>
|
|
<div class="editorGrid">
|
|
<label>Category <input id="symbolCategoryInput" type="text" /></label>
|
|
<label>Body Width <input id="symbolWidthInput" type="number" min="20" step="10" /></label>
|
|
<label>Body Height <input id="symbolHeightInput" type="number" min="20" step="10" /></label>
|
|
</div>
|
|
<div class="editorActions">
|
|
<button id="addSymbolPinBtn">Add Pin</button>
|
|
<button id="applySymbolBtn">Apply Symbol</button>
|
|
</div>
|
|
<div id="symbolPinsList" class="miniList"></div>
|
|
</div>
|
|
<div id="pinEditor" class="editorCard hidden">
|
|
<div id="pinMeta" class="hintText"></div>
|
|
<div class="editorGrid">
|
|
<label>Pin Name <input id="pinNameInput" type="text" /></label>
|
|
<label>Pin Number <input id="pinNumberInput" type="text" /></label>
|
|
<label>Pin Side
|
|
<select id="pinSideInput">
|
|
<option value="left">left</option>
|
|
<option value="right">right</option>
|
|
<option value="top">top</option>
|
|
<option value="bottom">bottom</option>
|
|
</select>
|
|
</label>
|
|
<label>Pin Type
|
|
<select id="pinTypeInput">
|
|
<option value="power_in">power_in</option>
|
|
<option value="power_out">power_out</option>
|
|
<option value="input">input</option>
|
|
<option value="output">output</option>
|
|
<option value="bidirectional">bidirectional</option>
|
|
<option value="passive">passive</option>
|
|
<option value="analog">analog</option>
|
|
<option value="ground">ground</option>
|
|
</select>
|
|
</label>
|
|
<label>Pin Offset <input id="pinOffsetInput" type="number" min="0" step="1" /></label>
|
|
</div>
|
|
<div class="editorActions">
|
|
<button id="applyPinPropsBtn">Apply Pin Properties</button>
|
|
</div>
|
|
<label class="inline"><input id="showPinNetLabelInput" type="checkbox" /> Show net label on this pin</label>
|
|
<label>Connect to existing net
|
|
<select id="pinNetSelect"></select>
|
|
</label>
|
|
<div class="editorActions">
|
|
<button id="connectPinBtn">Connect</button>
|
|
</div>
|
|
<label>Or create new net
|
|
<input id="newNetNameInput" type="text" placeholder="NET_1" />
|
|
</label>
|
|
<label>New net class
|
|
<select id="newNetClassInput">
|
|
<option value="signal">signal</option>
|
|
<option value="analog">analog</option>
|
|
<option value="power">power</option>
|
|
<option value="ground">ground</option>
|
|
<option value="clock">clock</option>
|
|
<option value="bus">bus</option>
|
|
<option value="differential">differential</option>
|
|
</select>
|
|
</label>
|
|
<div class="editorActions">
|
|
<button id="createConnectNetBtn">Create + Connect</button>
|
|
</div>
|
|
<div id="pinConnections" class="miniList"></div>
|
|
</div>
|
|
<div id="netEditor" class="editorCard hidden">
|
|
<div class="editorGrid">
|
|
<label>Name <input id="netNameInput" type="text" /></label>
|
|
<label>Class
|
|
<select id="netClassInput">
|
|
<option value="signal">signal</option>
|
|
<option value="analog">analog</option>
|
|
<option value="power">power</option>
|
|
<option value="ground">ground</option>
|
|
<option value="clock">clock</option>
|
|
<option value="bus">bus</option>
|
|
<option value="differential">differential</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="editorActions">
|
|
<button id="updateNetBtn">Apply Net</button>
|
|
<button id="isolateSelectedNetBtn">Isolate</button>
|
|
</div>
|
|
<div class="editorGrid">
|
|
<label>Node Ref <input id="netNodeRefInput" type="text" placeholder="U1" /></label>
|
|
<label>Node Pin <input id="netNodePinInput" type="text" placeholder="GPIO1" /></label>
|
|
</div>
|
|
<div class="editorActions">
|
|
<button id="addNetNodeBtn">Add Node</button>
|
|
</div>
|
|
<div id="netNodesList" class="miniList"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Diagnostics</h2>
|
|
<div id="issues" class="card"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Topology</h2>
|
|
<div id="topology" class="card"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="sectionHead">
|
|
<h2>JSON</h2>
|
|
<div class="jsonActions">
|
|
<button id="showSchemaBtn">View Schema</button>
|
|
<button id="validateJsonBtn">Validate</button>
|
|
<button id="formatJsonBtn">Format</button>
|
|
<button id="sortJsonBtn">Sort Keys</button>
|
|
<button id="copyReproBtn">Copy Repro</button>
|
|
<button id="applyJsonBtn" class="primary">Apply JSON</button>
|
|
</div>
|
|
</div>
|
|
<div id="jsonFeedback" class="jsonFeedback"></div>
|
|
<textarea id="jsonEditor" spellcheck="false" aria-label="Schemeta JSON editor"></textarea>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<div id="schemaModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="schemaTitle">
|
|
<div class="modalCard">
|
|
<div class="modalHead">
|
|
<h3 id="schemaTitle">Schemeta JSON Schema</h3>
|
|
<div class="jsonActions">
|
|
<button id="copySchemaBtn">Copy</button>
|
|
<button id="downloadSchemaBtn">Download</button>
|
|
<button id="closeSchemaBtn">Close</button>
|
|
</div>
|
|
</div>
|
|
<p class="modalHint">Use this schema in AI prompts/tools to generate valid Schemeta JSON deterministically.</p>
|
|
<textarea id="schemaViewer" spellcheck="false" readonly></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|