From 52bd6cf4a8fdd54c7829e8189630dcba60da3245 Mon Sep 17 00:00:00 2001 From: Towsty Date: Fri, 18 Sep 2026 13:22:18 -0500 Subject: [PATCH] Align Studio display chrome to the Classic | Studio reference mock. Co-authored-by: Cursor --- artifacts/studio2-display-ux/bench-mock.html | 149 +++++++ .../studio2-display-ux/icons/eye-off.svg | 6 + artifacts/studio2-display-ux/icons/eye.svg | 4 + artifacts/studio2-display-ux/icons/lock.svg | 4 + .../studio2-display-ux/tokens/display.css | 56 +++ assets/css/display.css | 379 ++++++++++++++---- components/SettingsForm.vue | 4 +- components/studio2/Bench.vue | 347 ++++++++-------- public/icons/display/eye-off.svg | 6 + public/icons/display/eye.svg | 4 + public/icons/display/lock.svg | 4 + 11 files changed, 698 insertions(+), 265 deletions(-) create mode 100644 artifacts/studio2-display-ux/bench-mock.html create mode 100644 artifacts/studio2-display-ux/icons/eye-off.svg create mode 100644 artifacts/studio2-display-ux/icons/eye.svg create mode 100644 artifacts/studio2-display-ux/icons/lock.svg create mode 100644 artifacts/studio2-display-ux/tokens/display.css create mode 100644 public/icons/display/eye-off.svg create mode 100644 public/icons/display/eye.svg create mode 100644 public/icons/display/lock.svg diff --git a/artifacts/studio2-display-ux/bench-mock.html b/artifacts/studio2-display-ux/bench-mock.html new file mode 100644 index 0000000..f1297d0 --- /dev/null +++ b/artifacts/studio2-display-ux/bench-mock.html @@ -0,0 +1,149 @@ + + + + + + AIGen — Display mock (Classic | Studio) + + + + +
+
+ AIGen + / Inbox +
+
+ + +
+
+ + +
+ + 5080 Ready +
+ +
+ + + + + + +
+
+ + +
+
+ + +
+ +
+ +
+
+ + viewer · last frame / waveform +
+
+
👁
+
👁
+
👁
+
👁
+
+
+ +
+
+ + + + + diff --git a/artifacts/studio2-display-ux/icons/eye-off.svg b/artifacts/studio2-display-ux/icons/eye-off.svg new file mode 100644 index 0000000..25521ad --- /dev/null +++ b/artifacts/studio2-display-ux/icons/eye-off.svg @@ -0,0 +1,6 @@ + diff --git a/artifacts/studio2-display-ux/icons/eye.svg b/artifacts/studio2-display-ux/icons/eye.svg new file mode 100644 index 0000000..9860dbb --- /dev/null +++ b/artifacts/studio2-display-ux/icons/eye.svg @@ -0,0 +1,4 @@ + diff --git a/artifacts/studio2-display-ux/icons/lock.svg b/artifacts/studio2-display-ux/icons/lock.svg new file mode 100644 index 0000000..e506dd8 --- /dev/null +++ b/artifacts/studio2-display-ux/icons/lock.svg @@ -0,0 +1,4 @@ + diff --git a/artifacts/studio2-display-ux/tokens/display.css b/artifacts/studio2-display-ux/tokens/display.css new file mode 100644 index 0000000..6f909f6 --- /dev/null +++ b/artifacts/studio2-display-ux/tokens/display.css @@ -0,0 +1,56 @@ +/* AIGen display tokens — Classic | Studio + Apply on [data-display] wrapper. Do not fork components. */ + +:root, +[data-display="studio"] { + --bg: #0e0e10; + --bg-raise: #161618; + --bg-slot: #1c1c1f; + --line: #2a2a2e; + --text: #f3f1ea; + --muted: #9a9588; + --amber: #f5a524; + --amber-dim: #c4841c; + --radius: 8px; + --chrome-gap: 16px; + --rail-h: 40px; + --card-pad: 14px; + --header-h: 52px; + --type: 14px; + --type-sm: 12px; +} + +[data-display="classic"] { + --chrome-gap: 8px; + --rail-h: 32px; + --card-pad: 10px; + --header-h: 44px; + --type: 13px; +} + +[data-display] { + background: var(--bg); + color: var(--text); + font-size: var(--type); +} + +[data-display="classic"] .rail-task, +[data-display="classic"] .rail-model { + display: none; +} +[data-display="studio"] .classic-selects { + display: none; +} +[data-display="classic"] .identity-slots { + display: none; +} +[data-display="studio"] .identity-header { + display: none; +} +[data-display="classic"] .eye-tile, +[data-display="classic"] .eye-viewer { + display: none; +} +[data-display="studio"] .classic-hide { + display: none; +} diff --git a/assets/css/display.css b/assets/css/display.css index c4c1950..27d5e78 100644 --- a/assets/css/display.css +++ b/assets/css/display.css @@ -1,118 +1,343 @@ -/* Studio 2 display skins — Classic | Studio. Layout tokens only; palette matches main.css. */ +/* AIGen display tokens — Classic | Studio + Apply on [data-display] wrapper. Do not fork components. + Copied from studio2-display-ux/tokens/display.css */ :root, -[data-display='classic'], [data-display='studio'] { - --display-bg: #09090b; - --display-fg: #e4e4e7; - --display-muted: #a1a1aa; - --display-border: rgba(255, 255, 255, 0.1); - --display-amber: #fbbf24; - --display-amber-fg: #09090b; - --display-radius: 8px; - --display-focus: rgba(252, 211, 77, 0.5); + --bg: #0e0e10; + --bg-raise: #161618; + --bg-slot: #1c1c1f; + --line: #2a2a2e; + --text: #f3f1ea; + --muted: #9a9588; + --amber: #f5a524; + --amber-dim: #c4841c; + --radius: 8px; + --chrome-gap: 16px; + --rail-h: 40px; + --card-pad: 14px; + --header-h: 52px; + --type: 14px; + --type-sm: 12px; } [data-display='classic'] { - --chrome-gap: 0.5rem; - --rail-h: 2.25rem; - --card-pad: 0.75rem; - --display-type-title: 1.75rem; - --display-type-body: 0.875rem; - --display-viewer-radius: 0.75rem; + --chrome-gap: 8px; + --rail-h: 32px; + --card-pad: 10px; + --header-h: 44px; + --type: 13px; } -[data-display='studio'] { - --chrome-gap: 1rem; - --rail-h: 3rem; - --card-pad: 1rem; - --display-type-title: 1.875rem; - --display-type-body: 0.9375rem; - --display-viewer-radius: 8px; +[data-display] { + background: var(--bg); + color: var(--text); + font-size: var(--type); } -[data-display] .display-title { - font-size: var(--display-type-title); -} - -[data-display] .display-body { - font-size: var(--display-type-body); -} - -[data-display] .display-stack { +[data-display] .display-app { display: flex; + min-height: 100%; flex-direction: column; gap: var(--chrome-gap); + padding: var(--chrome-gap); } -[data-display] .display-card { - border-radius: var(--display-radius); - border: 1px solid var(--display-border); +[data-display] .display-top { + display: flex; + height: var(--header-h); + min-height: var(--header-h); + flex-wrap: wrap; + align-items: center; + gap: 12px; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-raise); + padding: 0 12px; +} + +[data-display] .display-brand { + font-weight: 650; + letter-spacing: 0.02em; +} + +[data-display] .display-grow { + flex: 1; +} + +[data-display] .display-nav { + display: flex; + gap: 14px; + font-size: var(--type-sm); + color: var(--muted); +} + +[data-display] .display-nav a { + color: inherit; + outline: none; +} + +[data-display] .display-nav a:hover, +[data-display] .display-nav a.router-link-active { + color: var(--text); + font-weight: 600; +} + +[data-display] .display-nav a:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); + border-radius: 4px; +} + +[data-display] .identity-header, +[data-display] .classic-hide, +[data-display] .identity-slots { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px; + font-size: var(--type-sm); + color: var(--muted); +} + +[data-display] .identity-slots { + flex-direction: column; + align-items: flex-start; + margin-top: 8px; +} + +[data-display] .identity-slots .hint { + margin: 6px 0 0; + font-size: 11px; + color: var(--muted); +} + +[data-display] .rail { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +[data-display] .seg { + height: var(--rail-h); + cursor: pointer; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-slot); + padding: 0 12px; + color: var(--muted); + font-size: var(--type); + outline: none; +} + +[data-display] .seg:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); +} + +[data-display] .seg[aria-pressed='true'] { + border-color: var(--amber); + background: #2a1f0c; + color: var(--amber); +} + +[data-display] .seg:disabled, +[data-display] .seg[aria-disabled='true'] { + cursor: not-allowed; + opacity: 0.45; +} + +[data-display] .classic-selects { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +[data-display] .classic-selects select { + height: var(--rail-h); + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-slot); + padding: 0 8px; + color: var(--text); + outline: none; +} + +[data-display] .classic-selects select:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); +} + +[data-display] .display-grid { + display: grid; + flex: 1; + gap: var(--chrome-gap); + min-width: 0; +} + +@media (min-width: 1280px) { + [data-display] .display-grid { + grid-template-columns: minmax(14rem, 15rem) minmax(0, 1fr) minmax(16rem, 18rem); + } + [data-display] .display-grid--music { + grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); + } +} + +[data-display] .display-col { + min-width: 0; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-raise); padding: var(--card-pad); } [data-display] .display-viewer { - border-radius: var(--display-viewer-radius); + position: relative; + display: grid; + min-height: 320px; + place-items: center; + overflow: hidden; + border: 1px solid var(--line); + border-radius: var(--radius); + background: #111; + color: var(--muted); } -[data-display] .display-rail { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - min-height: var(--rail-h); -} - -[data-display] .display-rail__seg { - min-height: var(--rail-h); - border-radius: var(--display-radius); - border: 1px solid var(--display-border); - padding: 0.5rem 1rem; - font-size: var(--display-type-body); - color: var(--display-fg); - background: transparent; +[data-display] .eye-viewer { + position: absolute; + top: 8px; + right: 8px; + z-index: 10; + border: 1px solid var(--line); + border-radius: 6px; + background: #000a; + padding: 4px; + color: var(--text); outline: none; - transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } -[data-display] .display-rail__seg:focus-visible { - box-shadow: 0 0 0 2px var(--display-focus); +[data-display] .eye-viewer:focus-visible, +[data-display] .eye-tile:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); } -[data-display] .display-rail__seg[aria-pressed='true'], -[data-display] .display-rail__seg[data-active='true'] { - border-color: var(--display-amber); - background: var(--display-amber); - color: var(--display-amber-fg); +[data-display] .display-strip { + display: flex; + gap: 8px; + margin-top: 10px; + max-width: 100%; + overflow-x: auto; } -[data-display] .display-rail__seg:disabled, -[data-display] .display-rail__seg[aria-disabled='true'] { - opacity: 0.55; - cursor: not-allowed; +[data-display] .display-tile { + position: relative; + width: 72px; + height: 48px; + flex-shrink: 0; + overflow: hidden; + border: 1px solid var(--line); + border-radius: 6px; + background: #222; } -[data-display='studio'] .display-rail__seg { - font-weight: 600; - padding: 0.625rem 1.25rem; +[data-display] .display-tile[data-active='true'] { + border-color: var(--amber); } -[data-display='classic'] .display-rail__seg { - min-height: 2.25rem; - padding: 0.375rem 0.75rem; - font-weight: 500; +[data-display] .eye-tile { + position: absolute; + top: 2px; + right: 2px; + display: grid; + width: 16px; + height: 16px; + place-items: center; + border: 0; + border-radius: 3px; + background: #000a; + padding: 0; + color: var(--text); + outline: none; } [data-display] .display-cta { - border-radius: var(--display-radius); - background: var(--display-amber); - color: var(--display-amber-fg); - font-weight: 600; + width: 100%; + height: 44px; + margin-top: 10px; + cursor: pointer; + border: 0; + border-radius: var(--radius); + background: var(--amber); + color: #1a1204; + font-weight: 700; + outline: none; } [data-display] .display-cta:focus-visible { - box-shadow: 0 0 0 2px var(--display-focus); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); } -[data-display] .display-control { - border-radius: var(--display-radius); +[data-display] .display-cta:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +[data-display] .display-field { + width: 100%; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-slot); + padding: 8px; + color: var(--text); + font: inherit; + outline: none; +} + +[data-display] .display-field:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); +} + +[data-display] .display-gpu-pill { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 999px; + border: 1px solid #2d4a2a; + background: #142016; + padding: 4px 10px; + font-size: var(--type-sm); + color: #b8e0a8; +} + +[data-display] .display-gpu-pill[data-tone='busy'] { + border-color: color-mix(in srgb, var(--amber) 40%, transparent); + background: #2a1f0c; + color: var(--amber); +} + +[data-display] .display-gpu-pill[data-tone='idle'], +[data-display] .display-gpu-pill[data-tone='off'] { + border-color: var(--line); + background: var(--bg-slot); + color: var(--muted); +} + +/* Skin toggles — keep after base rules so display:none wins */ +[data-display='classic'] .rail-task, +[data-display='classic'] .rail-model { + display: none !important; +} +[data-display='studio'] .classic-selects { + display: none !important; +} +[data-display='classic'] .identity-slots { + display: none !important; +} +[data-display='studio'] .identity-header { + display: none !important; +} +[data-display='classic'] .eye-tile, +[data-display='classic'] .eye-viewer { + display: none !important; +} +[data-display='studio'] .classic-hide { + display: none !important; } diff --git a/components/SettingsForm.vue b/components/SettingsForm.vue index 1ef255e..21bfc16 100644 --- a/components/SettingsForm.vue +++ b/components/SettingsForm.vue @@ -34,7 +34,7 @@ @click="setDisplayMode('classic')" > Classic - Packed header, compact selects, tight gaps. + packed header, dropdowns diff --git a/components/studio2/Bench.vue b/components/studio2/Bench.vue index 3cf13ce..0a91b80 100644 --- a/components/studio2/Bench.vue +++ b/components/studio2/Bench.vue @@ -1,259 +1,233 @@