app adjustments

2026-05-03 12:03:20 +10:00
parent 44ed901e9a
commit 50bdd7b2bd
5 changed files with 228 additions and 82 deletions
--- a/README.md
+++ b/README.md
@@ -119,18 +119,32 @@ Current native test coverage includes:
 {
  "shaderLibrary": "shaders",
  "serverPort": 8080,
+  "videoFormat": "1080p",
+  "frameRate": "59.94",
  "autoReload": true,
  "maxTemporalHistoryFrames": 12,
  "enableExternalKeying": true
 }
 ```

+`videoFormat` and `frameRate` select the DeckLink capture/playout display mode. Common examples include `720p`/`50`, `720p`/`59.94`, `1080i`/`50`, `1080i`/`59.94`, `1080p`/`25`, `1080p`/`50`, `1080p`/`59.94`, and `2160p`/`59.94`, depending on card support.
+
 The control UI is available at:

 ```text
 http://127.0.0.1:<serverPort>
 ```

+## Control API
+
+The local REST control API is documented as an OpenAPI/Swagger spec:
+
+```text
+docs/openapi.yaml
+```
+
+Load that file in Swagger UI, Redoc, or another OpenAPI viewer to inspect the `/api/state`, layer control, stack preset, and reload endpoints. Live state updates are also sent over the `/ws` WebSocket.
+
 ## Shader Packages

 Each shader package lives under:
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -56,15 +56,26 @@ function App() {

  return (
    <main className="layout">
-      <StackPresetToolbar
-        presetName={presetName}
-        selectedPresetName={selectedPresetName}
-        stackPresets={stackPresets}
-        onPresetNameChange={setPresetName}
-        onSelectedPresetNameChange={setSelectedPresetName}
-      />
+      <header className="app-header">
+        <div>
+          <h1>Video Shader Toys</h1>
+          <p className="muted">Live shader stack, DeckLink status, and runtime controls.</p>
+        </div>
+        <div className={`status-pill${runtime.compileSucceeded ? " status-pill--ready" : " status-pill--error"}`}>
+          {runtime.compileSucceeded ? "Ready" : "Compile Error"}
+        </div>
+      </header>

-      <StatusPanels app={app} performance={performance} runtime={runtime} video={video} />
+      <section className="dashboard-grid">
+        <StatusPanels app={app} performance={performance} runtime={runtime} video={video} />
+        <StackPresetToolbar
+          presetName={presetName}
+          selectedPresetName={selectedPresetName}
+          stackPresets={stackPresets}
+          onPresetNameChange={setPresetName}
+          onSelectedPresetNameChange={setSelectedPresetName}
+        />
+      </section>

      <LayerStack
        dragLayerId={dragLayerId}
--- a/ui/src/components/StackPresetToolbar.jsx
+++ b/ui/src/components/StackPresetToolbar.jsx
@@ -8,8 +8,19 @@ export function StackPresetToolbar({
  onSelectedPresetNameChange,
 }) {
  return (
-    <section className="toolbar">
-      <div className="toolbar__group toolbar__group--wide">
+    <div className="panel stack-panel">
+      <div className="panel__header stack-panel__header">
+        <div>
+          <h2>Stack Presets</h2>
+          <p className="muted">Save or recall the current layer chain.</p>
+        </div>
+        <button type="button" className="stack-panel__reload" onClick={() => postJson("/api/reload", {})}>
+          Reload Shader
+        </button>
+      </div>
+
+      <div className="stack-panel__grid">
+      <div className="toolbar__group">
        <label htmlFor="preset-name">Save Stack</label>
        <div className="toolbar__inline">
          <input
@@ -38,7 +49,7 @@ export function StackPresetToolbar({
        </div>
      </div>

-      <div className="toolbar__group toolbar__group--wide">
+      <div className="toolbar__group">
        <label htmlFor="preset-select">Recall Stack</label>
        <div className="toolbar__inline">
          <select
@@ -66,10 +77,7 @@ export function StackPresetToolbar({
          </button>
        </div>
      </div>
-
-      <button type="button" onClick={() => postJson("/api/reload", {})}>
-        Reload Shader
-      </button>
-    </section>
+      </div>
+    </div>
  );
 }
--- a/ui/src/components/StatusPanels.jsx
+++ b/ui/src/components/StatusPanels.jsx
@@ -6,8 +6,8 @@ function formatNumber(value, digits = 3) {

 export function StatusPanels({ app, performance, runtime, video }) {
  return (
-    <section className="status-grid">
-      <div className="panel">
+    <>
+      <div className="panel panel--runtime">
        <h2>Runtime</h2>
        <KvList
          values={[
@@ -24,7 +24,7 @@ export function StatusPanels({ app, performance, runtime, video }) {
        />
      </div>

-      <div className="panel">
+      <div className="panel panel--video">
        <h2>Video</h2>
        <KvList
          values={[
@@ -35,10 +35,10 @@ export function StatusPanels({ app, performance, runtime, video }) {
        />
      </div>

-      <div className="panel panel--full">
+      <div className="panel panel--compiler">
        <h2>Compiler</h2>
        <pre>{runtime.compileMessage || "No compiler output."}</pre>
      </div>
-    </section>
+    </>
  );
 }
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -1,8 +1,8 @@
 :root {
  color-scheme: dark;
-  font-family: "Segoe UI", sans-serif;
-  background: #111318;
-  color: #edf1f7;
+  font-family: Inter, "Segoe UI", system-ui, sans-serif;
+  background: #0c1017;
+  color: #eef4ff;
 }

 * {
@@ -17,7 +17,9 @@ body,

 body {
  margin: 0;
-  background: #111318;
+  background:
+    radial-gradient(circle at 18% -12%, rgba(58, 113, 193, 0.22), transparent 30%),
+    linear-gradient(180deg, #0d1119 0%, #090d13 100%);
 }

 button,
@@ -32,7 +34,14 @@ h2,
 h3 {
  margin: 0;
  font-size: 14px;
-  font-weight: 600;
+  font-weight: 650;
+}
+
+h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 750;
+  letter-spacing: 0;
 }

 input[type="range"] {
@@ -40,60 +49,111 @@ input[type="range"] {
 }

 input[type="number"],
+input[type="text"],
 select,
 button {
  width: 100%;
-  min-height: 36px;
+  min-height: 38px;
  border-radius: 6px;
-  border: 1px solid #38445b;
-  background: #0f131a;
+  border: 1px solid #303a4d;
+  background: #101722;
  color: inherit;
  padding: 8px 10px;
+  outline: none;
+}
+
+input:focus,
+select:focus,
+button:focus-visible {
+  border-color: #6d95d8;
+  box-shadow: 0 0 0 3px rgba(109, 149, 216, 0.18);
 }

 button {
  cursor: pointer;
-  background: #22314a;
+  background: #213553;
+  border-color: #385174;
+  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+button:hover:not(:disabled) {
+  background: #294266;
+  border-color: #5172a0;
+}
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
 }

 button:disabled {
  cursor: default;
-  opacity: 0.55;
+  opacity: 0.48;
 }

 pre {
  margin: 0;
  white-space: pre-wrap;
-  color: #c9d5ea;
+  color: #cbd7ea;
 }

 .layout {
-  max-width: 1200px;
+  width: calc(100% - 40px);
  margin: 0 auto;
-  padding: 24px;
+  padding: 22px 0 28px;
  display: grid;
-  gap: 20px;
+  gap: 18px;
 }

-.toolbar,
-.status-grid,
-.parameter-grid {
-  display: grid;
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  gap: 16px;
+  min-height: 64px;
 }

-.toolbar {
-  justify-content: end;
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 112px;
+  min-height: 34px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid #31405a;
+  background: #101722;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.status-pill--ready {
+  color: #bff0cc;
+  border-color: rgba(96, 177, 116, 0.45);
+  background: rgba(41, 94, 58, 0.32);
+}
+
+.status-pill--error {
+  color: #ffd0cf;
+  border-color: rgba(222, 101, 101, 0.55);
+  background: rgba(112, 45, 48, 0.32);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: stretch;
 }

 .panel {
-  background: #181c24;
-  border: 1px solid #2a3140;
+  background: rgba(20, 26, 36, 0.92);
+  border: 1px solid #263144;
  border-radius: 8px;
  padding: 16px;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
 }

-.panel--full {
+.panel--compiler {
  grid-column: 1 / -1;
 }

@@ -102,31 +162,66 @@ pre {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
 }

 .panel__header button {
  width: auto;
-  min-width: 160px;
-}
-
-.status-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-width: 150px;
 }

 .kv {
  display: grid;
-  grid-template-columns: 160px 1fr;
-  gap: 8px 12px;
-  margin: 0;
+  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1fr);
+  gap: 9px 14px;
+  margin: 12px 0 0;
 }

 .kv dt {
-  color: #94a4c2;
+  color: #98aad0;
 }

 .kv dd {
+  min-width: 0;
  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.stack-panel {
+  grid-column: 1 / -1;
+  display: grid;
+  align-content: start;
+  gap: 14px;
+}
+
+.stack-panel__header {
+  margin-bottom: 0;
+}
+
+.stack-panel__reload {
+  min-width: 132px;
+}
+
+.stack-panel__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.toolbar__group {
+  display: grid;
+  gap: 8px;
+}
+
+.toolbar__inline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.28fr);
+  gap: 8px;
+}
+
+.toolbar__inline button {
+  width: 100%;
+  min-width: 92px;
 }

 .layer-stack {
@@ -138,20 +233,20 @@ pre {
  display: grid;
  gap: 14px;
  padding: 14px;
-  border: 1px solid #2a3140;
+  border: 1px solid #273246;
  border-radius: 8px;
-  background: #131720;
+  background: #101722;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
 }

 .layer-card:hover {
-  border-color: #42516b;
+  border-color: #425a7b;
 }

 .layer-card--expanded {
-  border-color: #5d81c3;
-  background: #151d2a;
-  box-shadow: inset 0 0 0 1px rgba(93, 129, 195, 0.25);
+  border-color: #6d95d8;
+  background: #131d2b;
+  box-shadow: inset 0 0 0 1px rgba(109, 149, 216, 0.22);
 }

 .layer-card--dragging {
@@ -159,8 +254,8 @@ pre {
 }

 .layer-card--drop-target {
-  border-color: #8db0ee;
-  box-shadow: 0 0 0 2px rgba(141, 176, 238, 0.2);
+  border-color: #9ebcf0;
+  box-shadow: 0 0 0 2px rgba(158, 188, 240, 0.2);
 }

 .layer-card__header,
@@ -184,8 +279,8 @@ pre {
 }

 .icon-button {
-  width: 36px;
-  min-width: 36px;
+  width: 38px;
+  min-width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
@@ -196,13 +291,13 @@ pre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
  border-radius: 999px;
-  background: #22314a;
-  color: #c9d5ea;
+  background: #203452;
+  color: #d7e4f8;
  font-size: 12px;
-  font-weight: 700;
+  font-weight: 750;
 }

 .layer-card__title {
@@ -210,7 +305,7 @@ pre {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
-  background: #1e2a3f;
+  background: #1f314e;
 }

 .layer-card__title--static {
@@ -218,14 +313,14 @@ pre {
 }

 .layer-card__drag-handle {
-  color: #94a4c2;
+  color: #98aad0;
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 34px;
+  height: 34px;
  flex: 0 0 auto;
 }

@@ -235,7 +330,7 @@ pre {

 .layer-card__actions button {
  width: auto;
-  min-width: 72px;
+  min-width: 78px;
 }

 .layer-card__body {
@@ -258,25 +353,27 @@ pre {
 }

 .parameter-grid {
+  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
 }

 .parameter {
  display: grid;
  gap: 8px;
  padding: 12px;
-  border: 1px solid #2a3140;
+  border: 1px solid #273246;
  border-radius: 8px;
-  background: #131720;
+  background: #0f151f;
 }

 .parameter__value {
-  color: #94a4c2;
+  color: #98aad0;
  font-size: 12px;
 }

 .parameter__value--pending {
-  color: #d3b26a;
+  color: #d8bb76;
 }

 .parameter__pair {
@@ -302,21 +399,37 @@ pre {

 .muted {
  margin: 0;
-  color: #94a4c2;
+  color: #98aad0;
 }

-@media (max-width: 900px) {
-  .toolbar,
-  .status-grid {
+@media (max-width: 1100px) {
+  .dashboard-grid {
    grid-template-columns: 1fr;
  }
+}

+@media (max-width: 760px) {
+  .layout {
+    width: min(100% - 20px, 1500px);
+    padding-top: 14px;
+  }
+
+  .app-header,
+  .panel__header,
  .layer-card__header,
  .layer-card__subheader {
    align-items: flex-start;
    flex-direction: column;
  }

+  .dashboard-grid,
+  .stack-panel__grid,
+  .toolbar__inline {
+    grid-template-columns: 1fr;
+  }
+
+  .toolbar__inline button,
+  .stack-panel__reload,
  .layer-card__actions,
  .layer-card__actions button,
  .layer-card__field select {