Jan/Infinity_Vis_Rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Software-only show-control readiness baseline

Browse Source
This commit is contained in:
jan
2026-04-17 21:17:23 +02:00
commit a56cecb23d
51 changed files with 16340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1212
web/v1/app.js Normal file
View File

File diff suppressed because it is too large Load Diff

224
web/v1/index.html Normal file
View File

@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Infinity Vis Creative Console</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div class="page-shell">
<header class="hero">
<div class="hero-copy">
<p class="eyebrow">Infinity Vis / Creative Surface</p>
<h1 id="project-name">Loading project...</h1>
<p id="topology-label" class="hero-subtitle">
Shared host API bootstrap in progress.
</p>
</div>
<div class="hero-status">
<div class="status-card">
<span class="status-label">API stream</span>
<span id="connection-pill" class="pill pill-offline">connecting</span>
</div>
<div class="status-card">
<span class="status-label">Preview refresh</span>
<span id="preview-updated">waiting for data</span>
</div>
<button id="refresh-button" class="ghost-button" type="button">
Refresh snapshot
</button>
</div>
</header>
<main class="layout">
<section class="panel controls-panel">
<div class="section-heading">
<h2>Global Look</h2>
<p>Pattern, preset, group and transition control against the shared host API.</p>
</div>
<div class="control-grid">
<label class="field">
<span>Pattern</span>
<select id="pattern-select"></select>
</label>
<label class="field">
<span>Transition Duration</span>
<input id="transition-slider" type="range" min="0" max="3000" step="10" />
<strong id="transition-value">0 ms</strong>
</label>
<label class="field">
<span>Transition Style</span>
<select id="transition-style-select">
<option value="snap">Snap</option>
<option value="crossfade">Crossfade</option>
<option value="chase">Chase</option>
</select>
</label>
<label class="field">
<span>Master Brightness</span>
<input id="brightness-slider" type="range" min="0" max="1" step="0.01" />
<strong id="brightness-value">0%</strong>
</label>
<div class="field">
<span>Blackout</span>
<button id="blackout-button" class="danger-button" type="button">
Enable blackout
</button>
</div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Pending Transition</h3>
<p>Stage primitives locally and commit them with one explicit trigger.</p>
</div>
<div class="session-panel">
<div class="session-status-row">
<div class="status-card">
<span class="status-label">Control mode</span>
<span id="control-mode-pill" class="pill pill-online">stateful</span>
</div>
<div class="status-card">
<span class="status-label">Commit state</span>
<span id="pending-commit-pill" class="pill pill-offline">idle</span>
</div>
</div>
<div id="pending-session-summary" class="pending-session-summary"></div>
<div id="primitive-error-banner" class="primitive-error-banner hidden"></div>
<div class="session-actions">
<button id="trigger-transition-button" class="ghost-button" type="button">
Trigger Transition
</button>
<button id="clear-staged-button" class="ghost-button" type="button">
Clear Staged
</button>
</div>
</div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Presets</h3>
<p>Recall look snapshots without leaving the creative console.</p>
</div>
<div id="preset-list" class="pill-row"></div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Preset Capture</h3>
<p>Store or overwrite the current scene as a reusable preset through the same API.</p>
</div>
<div class="capture-grid">
<label class="field">
<span>Preset ID</span>
<input id="preset-id-input" type="text" placeholder="e.g. sunset_chase" />
</label>
<label class="field inline-checkbox">
<span>Overwrite Existing</span>
<input id="preset-overwrite-input" type="checkbox" />
</label>
<button id="save-preset-button" class="ghost-button" type="button">
Save Current Scene As Preset
</button>
</div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Groups</h3>
<p>Focus looks on a subset while keeping the core scene model shared.</p>
</div>
<input
id="group-filter-input"
class="filter-input"
type="text"
placeholder="Filter groups by id or tag"
/>
<div id="group-list" class="pill-row"></div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Creative Snapshots</h3>
<p>Capture exploratory variants without replacing curated presets.</p>
</div>
<div class="capture-grid">
<label class="field">
<span>Snapshot ID</span>
<input id="snapshot-id-input" type="text" placeholder="e.g. variant_afterglow" />
</label>
<label class="field">
<span>Label</span>
<input id="snapshot-label-input" type="text" placeholder="Readable label" />
</label>
<label class="field inline-checkbox">
<span>Overwrite Existing</span>
<input id="snapshot-overwrite-input" type="checkbox" />
</label>
<button id="save-snapshot-button" class="ghost-button" type="button">
Save Creative Snapshot
</button>
</div>
<div id="snapshot-list" class="snapshot-list"></div>
</div>
<div class="subsection">
<div class="subsection-heading">
<h3>Scene Parameters</h3>
<p>Rendered from the active scene schema, not hardcoded per frontend.</p>
</div>
<div id="scene-params" class="parameter-grid"></div>
</div>
</section>
<section class="panel preview-panel">
<div class="section-heading">
<h2>Preview</h2>
<p>Live panel previews from the host snapshot and stream feed.</p>
</div>
<div id="preview-grid" class="preview-grid"></div>
</section>
<section class="panel summary-panel">
<div class="section-heading">
<h2>Snapshot</h2>
<p>Operator-friendly scene state with a raw API view underneath.</p>
</div>
<div id="summary-cards" class="summary-cards"></div>
<pre id="snapshot-json" class="snapshot-json"></pre>
</section>
<section class="panel event-panel">
<div class="section-heading">
<h2>Event Stream</h2>
<p>Recent notices from the websocket feed.</p>
</div>
<div class="event-filter-bar">
<select id="event-kind-filter">
<option value="all">All kinds</option>
<option value="info">Info</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
</select>
<input
id="event-search-filter"
class="filter-input"
type="text"
placeholder="Filter by code or message"
/>
</div>
<div id="event-list" class="event-list"></div>
</section>
</main>
</div>
<script src="/app.js"></script>
</body>
</html>

672
web/v1/styles.css Normal file
View File

@@ -0,0 +1,672 @@
:root {
--bg: #f3ede2;
--bg-secondary: #efe2cd;
--surface: rgba(255, 251, 244, 0.82);
--surface-strong: rgba(255, 248, 238, 0.94);
--line: rgba(56, 63, 61, 0.12);
--text: #1f2424;
--muted: #596463;
--accent: #ea6a36;
--accent-strong: #c34d1c;
--accent-cool: #198c8f;
--danger: #bc2f2f;
--shadow: 0 24px 60px rgba(91, 63, 38, 0.12);
--radius-xl: 28px;
--radius-lg: 22px;
--radius-md: 16px;
--radius-sm: 12px;
--font-sans: "Segoe UI Variable", "Aptos", "Trebuchet MS", sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
background:
radial-gradient(circle at 10% 15%, rgba(234, 106, 54, 0.22), transparent 28%),
radial-gradient(circle at 88% 12%, rgba(25, 140, 143, 0.16), transparent 24%),
radial-gradient(circle at 84% 78%, rgba(239, 202, 130, 0.24), transparent 22%),
linear-gradient(160deg, var(--bg) 0%, var(--bg-secondary) 52%, #f6f2ea 100%);
color: var(--text);
font-family: var(--font-sans);
}
body::before,
body::after {
content: "";
position: fixed;
inset: auto;
pointer-events: none;
border-radius: 999px;
filter: blur(32px);
opacity: 0.55;
}
body::before {
width: 280px;
height: 280px;
top: 18%;
right: -80px;
background: rgba(234, 106, 54, 0.16);
}
body::after {
width: 320px;
height: 320px;
bottom: -120px;
left: -60px;
background: rgba(25, 140, 143, 0.12);
}
.page-shell {
width: min(1440px, calc(100vw - 32px));
margin: 0 auto;
padding: 28px 0 40px;
}
.hero,
.panel {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
gap: 24px;
padding: 28px;
border-radius: var(--radius-xl);
animation: rise-in 520ms ease-out;
}
.hero-copy h1,
.section-heading h2,
.subsection-heading h3 {
margin: 0;
letter-spacing: -0.03em;
}
.hero-copy h1 {
font-size: clamp(2rem, 3vw, 3.6rem);
line-height: 0.95;
}
.eyebrow {
margin: 0 0 10px;
color: var(--accent-strong);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero-subtitle,
.section-heading p,
.subsection-heading p,
.field span,
.event-meta,
.status-label,
.preview-meta,
.pill-subtext {
color: var(--muted);
}
.hero-status {
display: grid;
gap: 14px;
align-content: start;
}
.status-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--surface-strong);
border-radius: var(--radius-md);
border: 1px solid rgba(56, 63, 61, 0.08);
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 98px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pill-online {
background: rgba(25, 140, 143, 0.14);
color: #0f6c6d;
}
.pill-offline {
background: rgba(188, 47, 47, 0.14);
color: var(--danger);
}
.pill-warning {
background: rgba(234, 106, 54, 0.14);
color: var(--accent-strong);
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 20px;
margin-top: 22px;
}
.panel {
border-radius: var(--radius-lg);
padding: 22px;
}
.controls-panel,
.summary-panel {
grid-column: span 1;
}
.preview-panel,
.event-panel {
grid-column: span 1;
}
.section-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 18px;
margin-bottom: 18px;
}
.section-heading p,
.subsection-heading p {
margin: 0;
max-width: 34rem;
}
.control-grid,
.capture-grid,
.parameter-grid,
.summary-cards {
display: grid;
gap: 14px;
}
.control-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.capture-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
align-items: end;
}
.parameter-grid,
.summary-cards {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.field,
.parameter-card,
.summary-card,
.preview-card,
.event-item {
background: var(--surface-strong);
border: 1px solid rgba(56, 63, 61, 0.08);
border-radius: var(--radius-md);
}
.field {
display: grid;
gap: 10px;
padding: 14px;
}
.field strong {
color: var(--accent-strong);
font-size: 1rem;
}
.subsection {
margin-top: 24px;
}
.session-panel {
display: grid;
gap: 14px;
}
.session-status-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.pending-session-summary {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pending-card {
padding: 14px;
border-radius: var(--radius-md);
background: rgba(255, 249, 241, 0.9);
border: 1px solid rgba(56, 63, 61, 0.08);
}
.pending-card strong {
display: block;
margin-bottom: 6px;
color: var(--accent-strong);
}
.pending-card span {
color: var(--muted);
font-size: 0.9rem;
}
.session-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.primitive-error-banner {
padding: 14px;
border-radius: var(--radius-md);
background: rgba(188, 47, 47, 0.1);
border: 1px solid rgba(188, 47, 47, 0.16);
color: var(--danger);
}
.primitive-error-banner strong {
display: block;
margin-bottom: 4px;
}
.hidden {
display: none !important;
}
.subsection-heading {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: baseline;
margin-bottom: 12px;
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
button,
select,
input,
textarea {
font: inherit;
}
button,
select {
border: 1px solid transparent;
border-radius: var(--radius-sm);
}
button {
cursor: pointer;
transition:
transform 140ms ease,
box-shadow 140ms ease,
background-color 140ms ease,
border-color 140ms ease;
}
button:hover {
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
button:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
}
select,
input[type="text"] {
width: 100%;
padding: 12px 14px;
background: #fffdfa;
border: 1px solid rgba(56, 63, 61, 0.14);
color: var(--text);
}
.filter-input {
margin-bottom: 12px;
}
input[type="range"] {
width: 100%;
accent-color: var(--accent);
}
.inline-checkbox {
align-content: start;
}
.inline-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 4px 0 0;
accent-color: var(--accent-cool);
}
.ghost-button,
.preset-button,
.group-button {
padding: 11px 14px;
background: #fff9f1;
border-color: rgba(56, 63, 61, 0.12);
color: var(--text);
}
.preset-button.active,
.group-button.active {
background: linear-gradient(135deg, rgba(234, 106, 54, 0.16), rgba(25, 140, 143, 0.16));
border-color: rgba(234, 106, 54, 0.35);
}
.preset-button.staged,
.group-button.staged,
.ghost-button.staged {
background: linear-gradient(135deg, rgba(25, 140, 143, 0.16), rgba(234, 106, 54, 0.1));
border-color: rgba(25, 140, 143, 0.35);
box-shadow: inset 0 0 0 1px rgba(25, 140, 143, 0.08);
}
.danger-button {
padding: 12px 16px;
background: rgba(188, 47, 47, 0.1);
color: var(--danger);
border-color: rgba(188, 47, 47, 0.18);
}
.danger-button.is-active {
background: var(--danger);
color: #fff8f5;
box-shadow: 0 16px 30px rgba(188, 47, 47, 0.24);
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.preview-card {
padding: 14px;
position: relative;
overflow: hidden;
animation: rise-in 380ms ease-out;
}
.preview-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: var(--preview-color, #999999);
}
.preview-card-header {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: baseline;
}
.preview-card h3 {
margin: 0;
font-size: 1rem;
}
.preview-meta {
margin-top: 2px;
font-size: 0.86rem;
}
.preview-swatch {
height: 56px;
margin-top: 14px;
border-radius: var(--radius-sm);
background: var(--preview-color, #999999);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.energy-bar {
height: 8px;
margin-top: 12px;
border-radius: 999px;
background: rgba(31, 36, 36, 0.08);
overflow: hidden;
}
.energy-bar > span {
display: block;
height: 100%;
width: var(--energy-width, 0%);
background: linear-gradient(90deg, var(--preview-color, #999999), rgba(255, 255, 255, 0.84));
}
.sample-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.sample-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--sample-color, #999999);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}
.parameter-card,
.summary-card,
.event-item {
padding: 14px;
}
.parameter-card label {
display: grid;
gap: 10px;
}
.parameter-card strong,
.summary-card strong {
display: block;
margin-bottom: 4px;
font-size: 1.04rem;
}
.summary-card span {
color: var(--muted);
font-size: 0.9rem;
}
.snapshot-json {
margin: 18px 0 0;
max-height: 360px;
overflow: auto;
padding: 18px;
border-radius: var(--radius-md);
background: #1d2222;
color: #e8eceb;
font-size: 0.86rem;
line-height: 1.5;
}
.event-list {
display: grid;
gap: 12px;
}
.event-filter-bar {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 12px;
margin-bottom: 14px;
}
.event-item {
display: grid;
gap: 8px;
}
.event-item.event-info strong {
color: var(--accent-strong);
}
.event-item.event-warning strong {
color: #a7631c;
}
.event-item.event-error strong {
color: var(--danger);
}
.event-code {
display: inline-flex;
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
background: rgba(31, 36, 36, 0.08);
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.snapshot-list {
display: grid;
gap: 12px;
margin-top: 14px;
}
.snapshot-card {
display: grid;
gap: 8px;
padding: 14px;
border-radius: var(--radius-md);
background: var(--surface-strong);
border: 1px solid rgba(56, 63, 61, 0.08);
}
.snapshot-card-header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: start;
}
.snapshot-card-header strong {
display: block;
margin-bottom: 2px;
}
.snapshot-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.meta-chip {
display: inline-flex;
padding: 5px 8px;
border-radius: 999px;
background: rgba(31, 36, 36, 0.08);
color: var(--muted);
font-size: 0.82rem;
}
.event-item strong {
color: var(--accent-strong);
}
.empty-state {
padding: 18px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.42);
color: var(--muted);
border: 1px dashed rgba(56, 63, 61, 0.16);
}
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1080px) {
.layout,
.hero,
.control-grid,
.event-filter-bar {
grid-template-columns: 1fr;
}
.section-heading,
.subsection-heading {
align-items: start;
flex-direction: column;
}
}
@media (max-width: 720px) {
.page-shell {
width: min(100vw - 18px, 100%);
padding-top: 18px;
}
.hero,
.panel {
padding: 18px;
}
.preview-grid,
.parameter-grid,
.summary-cards {
grid-template-columns: 1fr;
}
}