@westopp/windo 0.1.0

package/src/client/chrome.css

@@ -0,0 +1,1966 @@
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap");
+
+/* ============================================================
+   Workbench chrome — clean neutral identity.
+   White panels on light grey, hairline borders, rounded
+   geometry, near-black accent. Mono reserved for code.
+   ============================================================ */
+
+:root {
+  --bg: #f4f4f5;
+  --panel: #ffffff;
+  --panel2: #fafafa;
+  --inset: #f1f1f2;
+  --border: #e8e8ea;
+  --border-strong: #dcdcdf;
+  --text: #161618;
+  --muted: #6e6e73;
+  --faint: #a5a5ab;
+  --accent: #161618;
+  --accent-ui: var(--accent);
+  --accent-text: #ffffff;
+  --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
+  --danger: #c0443c;
+  --surface: #ffffff;
+  --shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 8px 24px rgba(16, 16, 18, 0.06);
+  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --r: 8px;
+}
+
+[data-theme="dark"] {
+  --bg: #111113;
+  --panel: #1a1a1c;
+  --panel2: #161618;
+  --inset: #242427;
+  --border: #29292d;
+  --border-strong: #39393e;
+  --text: #ececee;
+  --muted: #9b9ba2;
+  --faint: #5c5c63;
+  --accent-ui: color-mix(in oklab, var(--accent) 35%, white);
+  --accent-soft: color-mix(in srgb, var(--accent-ui) 14%, transparent);
+  --danger: #e0837b;
+  --surface: #161618;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.45);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  font-family: var(--sans);
+  font-size: 13px;
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  height: 100%;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+}
+
+/* ---------- App layout ---------- */
+
+.wb-app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.wb-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.wb-center {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.wb-center-row {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.wb-canvas-col {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  container-type: inline-size;
+  container-name: canvastools;
+}
+
+/* ---------- Top bar ---------- */
+
+.wb-topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 50px;
+  padding: 0 16px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.wb-logo {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13.5px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.wb-logo-mark {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--text);
+  color: var(--panel);
+  display: grid;
+  place-items: center;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.wb-logo-sub {
+  color: var(--faint);
+  font-weight: 500;
+}
+
+.wb-crumb {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 12.5px;
+  min-width: 0;
+}
+
+.wb-crumb b {
+  color: var(--text);
+  font-weight: 600;
+}
+.wb-crumb .sep {
+  color: var(--faint);
+}
+
+.wb-topbar-spacer {
+  flex: 1;
+}
+
+.wb-version {
+  font-size: 11.5px;
+  color: var(--faint);
+}
+
+/* ---------- Generic icon button ---------- */
+
+.wb-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 30px;
+  min-width: 30px;
+  padding: 0 7px;
+  border: 1px solid transparent;
+  border-radius: var(--r);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s,
+    border-color 0.12s;
+}
+
+.wb-iconbtn:hover {
+  background: var(--inset);
+  color: var(--text);
+}
+
+.wb-iconbtn.active {
+  background: var(--accent-soft);
+  color: var(--accent-ui);
+}
+
+.wb-iconbtn svg {
+  display: block;
+}
+
+/* ---------- Sidebar ---------- */
+
+.wb-sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.wb-sidebar.collapsed {
+  width: 44px;
+  align-items: center;
+  padding: 8px 0;
+  gap: 12px;
+}
+
+.wb-rail-label {
+  writing-mode: vertical-rl;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--faint);
+  user-select: none;
+}
+
+.wb-sidebar-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 12px 12px 6px 12px;
+}
+
+.wb-search {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.wb-search svg {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--faint);
+  pointer-events: none;
+}
+
+.wb-search input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 31px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel2);
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+  outline: none;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+
+.wb-search input::placeholder {
+  color: var(--faint);
+}
+
+.wb-search input:focus {
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.wb-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 12px 16px 12px;
+}
+
+.wb-nav-group {
+  margin-top: 18px;
+}
+
+.wb-nav-group-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+  padding: 3px 8px;
+  margin-bottom: 3px;
+  border-radius: var(--r);
+  transition: color 0.12s;
+}
+
+.wb-nav-group-label:hover {
+  color: var(--muted);
+}
+
+.wb-nav-group-label .chev {
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.wb-nav-group-label.closed .chev {
+  transform: rotate(-90deg);
+}
+
+.wb-nav-group-label .grow {
+  flex: 1;
+}
+
+.wb-nav-group-label .cnt {
+  font-weight: 500;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.wb-nav-group-label .seldot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent-ui);
+  flex-shrink: 0;
+}
+
+.wb-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.wb-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 31px;
+  padding: 0 9px;
+  border: none;
+  border-radius: var(--r);
+  background: transparent;
+  color: var(--muted);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+
+.wb-nav-item:hover {
+  background: var(--inset);
+  color: var(--text);
+}
+
+.wb-nav-item.selected {
+  background: var(--inset);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.wb-nav-item .name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-status {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 999px;
+  text-transform: capitalize;
+  flex-shrink: 0;
+}
+
+.wb-status.stable {
+  color: #3c7a4a;
+  background: rgba(60, 122, 74, 0.1);
+}
+.wb-status.beta {
+  color: #99661c;
+  background: rgba(153, 102, 28, 0.1);
+}
+.wb-status.deprecated {
+  color: #a8433a;
+  background: rgba(168, 67, 58, 0.1);
+}
+
+[data-theme="dark"] .wb-status.stable {
+  color: #84c896;
+  background: rgba(132, 200, 150, 0.12);
+}
+[data-theme="dark"] .wb-status.beta {
+  color: #dcb064;
+  background: rgba(220, 176, 100, 0.12);
+}
+[data-theme="dark"] .wb-status.deprecated {
+  color: #e6918a;
+  background: rgba(230, 145, 138, 0.12);
+}
+
+.wb-nav-empty {
+  padding: 20px 8px;
+  color: var(--faint);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+/* ---------- Canvas toolbar ---------- */
+
+.wb-toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 46px;
+  padding: 0 12px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.wb-toolbar .gap {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.wb-toolbar > * {
+  flex-shrink: 0;
+}
+
+.wb-seg {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--inset);
+  border-radius: 999px;
+}
+
+.wb-seg button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 25px;
+  padding: 0 11px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+.wb-seg button:hover {
+  color: var(--text);
+}
+
+.wb-seg button.on {
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(16, 16, 18, 0.1);
+}
+
+/* Trigger button (lives outside the canvas) */
+
+.wb-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 29px;
+  padding: 0 13px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s,
+    border-color 0.12s;
+}
+
+.wb-trigger:hover {
+  background: var(--inset);
+}
+
+.wb-trigger.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+[data-theme="dark"] .wb-trigger.on {
+  background: var(--accent-ui);
+  border-color: var(--accent-ui);
+  color: #111113;
+}
+
+.wb-trigger .tdot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Action buttons (out-of-band triggers; live outside the canvas) */
+
+.wb-action {
+  display: inline-flex;
+  align-items: center;
+  height: 29px;
+  padding: 0 13px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s,
+    border-color 0.12s,
+    opacity 0.12s;
+}
+
+.wb-action:hover:not(:disabled) {
+  background: var(--inset);
+}
+
+.wb-action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.wb-zoom {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.wb-zoom .pct {
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  width: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* ---------- Canvas settings popover ---------- */
+
+.wb-pop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 49;
+}
+
+.wb-pop {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 10px;
+  width: 270px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  z-index: 50;
+  padding: 14px 16px 16px 16px;
+}
+
+.wb-pop-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.wb-pop-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 9px;
+}
+
+.wb-pop-row .lbl {
+  font-size: 12px;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.wb-pop-row input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent-ui);
+  min-width: 0;
+}
+
+.wb-pop-row .val {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  width: 36px;
+  text-align: right;
+}
+
+.wb-pop-sect {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+  margin: 16px 0 2px 0;
+}
+
+.wb-pop-sect .live {
+  color: var(--text);
+}
+
+.wb-colorinput {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 10px 0 5px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel2);
+  cursor: pointer;
+  transition: border-color 0.12s;
+}
+
+.wb-colorinput:hover {
+  border-color: var(--border-strong);
+}
+
+.wb-colorinput:focus-within {
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.wb-colorinput .well {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1px solid var(--border-strong);
+  flex-shrink: 0;
+}
+
+.wb-colorinput .hex {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--muted);
+  text-transform: lowercase;
+}
+
+.wb-colorinput input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.wb-pop-reset {
+  margin-top: 14px;
+}
+
+/* ---------- Canvas stage ---------- */
+
+.wb-stage {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  padding: 22px 28px 14px 28px;
+  background: var(--bg);
+  min-height: 0;
+}
+
+.wb-zoomwrap {
+  transform-origin: top center;
+}
+
+.wb-frame-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.wb-frame-row {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.wb-handle {
+  width: 6px;
+  border-radius: 999px;
+  background: var(--border-strong);
+  cursor: ew-resize;
+  align-self: center;
+  height: 56px;
+  flex-shrink: 0;
+  transition:
+    background 0.12s,
+    height 0.15s;
+}
+
+.wb-handle:hover,
+.wb-handle.dragging {
+  background: var(--accent-ui);
+  height: 80px;
+}
+
+.wb-handle-h {
+  height: 6px;
+  width: 56px;
+  border-radius: 999px;
+  background: var(--border-strong);
+  cursor: ns-resize;
+  margin: 8px auto 0 auto;
+  flex-shrink: 0;
+  transition:
+    background 0.12s,
+    width 0.15s;
+}
+
+.wb-handle-h:hover,
+.wb-handle-h.dragging {
+  background: var(--accent-ui);
+  width: 84px;
+}
+
+.wb-framewrap {
+  position: relative;
+  display: flex;
+}
+
+.wb-corner {
+  display: none;
+}
+
+.wb-corner.tl {
+  top: -17px;
+  left: -17px;
+}
+.wb-corner.tr {
+  top: -17px;
+  right: -17px;
+}
+.wb-corner.bl {
+  bottom: -17px;
+  left: -17px;
+}
+.wb-corner.br {
+  bottom: -17px;
+  right: -17px;
+}
+
+.wb-frame {
+  position: relative;
+  background: var(--cv-bg, var(--surface));
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.wb-frame.grid-dots {
+  background-image: radial-gradient(circle, var(--cv-dot, var(--border)) 1px, transparent 1.5px);
+  background-size: var(--dot-size, 20px) var(--dot-size, 20px);
+  background-position: center center;
+}
+
+.wb-frame.grid-lines {
+  background-image: linear-gradient(to right, var(--cv-dot, var(--border)) 1px, transparent 1px), linear-gradient(to bottom, var(--cv-dot, var(--border)) 1px, transparent 1px);
+  background-size: var(--dot-size, 20px) var(--dot-size, 20px);
+  background-position: center center;
+}
+
+/* The preview iframe fills the grid frame. The iframe is transparent so the
+   grid wrapper (--cv-bg / --cv-dot) shows through behind the rendered component. */
+.wb-frame > iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  display: block;
+}
+
+.wb-frame-inner {
+  container-type: inline-size;
+  container-name: canvas;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.wb-placement {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.wb-placement.center {
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+.wb-placement.top {
+  align-items: flex-start;
+  justify-content: stretch;
+  padding: 0;
+}
+.wb-placement.bottom-right {
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 20px;
+}
+.wb-placement.fill {
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
+}
+.wb-placement.fill > * {
+  flex: 1;
+}
+.wb-placement.top > * {
+  flex: 1;
+}
+
+.wb-dismissed-hint {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  color: var(--faint);
+  pointer-events: none;
+  user-select: none;
+}
+
+.wb-dim-readout {
+  text-align: center;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--faint);
+  margin-top: 8px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.wb-dim-readout .bp {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+/* ---------- Inspector ---------- */
+
+.wb-inspector {
+  background: var(--panel);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.wb-inspector.right {
+  width: 312px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border);
+}
+
+.wb-inspector.bottom {
+  height: 280px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+}
+
+.wb-inspector.right.collapsed {
+  width: 44px;
+  align-items: center;
+  padding: 8px 0;
+  gap: 12px;
+}
+
+.wb-inspector.bottom.collapsed {
+  height: 40px;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 12px;
+  gap: 10px;
+}
+
+.wb-inspector.bottom.collapsed .cname {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.wb-tabs {
+  display: flex;
+  align-items: stretch;
+  gap: 13px;
+  padding: 0 16px;
+  height: 40px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  /* Six tabs can exceed the narrow right panel — scroll rather than clip. */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.wb-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+/* Read-only component-local state strip (under the tabs) */
+
+.wb-state {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--inset);
+  font-size: 11.5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  flex-shrink: 0;
+}
+
+.wb-state-label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 9.5px;
+  font-weight: 650;
+  font-family: var(--sans, inherit);
+  color: var(--faint);
+}
+
+.wb-state-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.wb-state-item .k {
+  color: var(--muted);
+}
+
+.wb-state-item .v {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.wb-tab {
+  height: 100%;
+  padding: 0 1px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12.5px;
+  font-weight: 550;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  cursor: pointer;
+  transition:
+    color 0.12s,
+    border-color 0.12s;
+}
+
+.wb-tab:hover {
+  color: var(--text);
+}
+
+.wb-tab.on {
+  color: var(--text);
+  border-bottom-color: var(--accent-ui);
+}
+
+.wb-tabs .wb-tabs-aux {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.wb-inspector-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* ---------- Props-as-code editor ---------- */
+
+.wb-codeedit {
+  padding: 14px 16px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.wb-edit-main {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.wb-codeedit-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wb-codeedit-bar .lbl {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.wb-dirty-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-ui);
+}
+
+.wb-ghostbtn {
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    color 0.12s,
+    border-color 0.12s;
+}
+
+.wb-ghostbtn:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.wb-save {
+  height: 28px;
+  padding: 0 14px;
+  border: 1px solid var(--accent);
+  border-radius: var(--r);
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+[data-theme="dark"] .wb-save {
+  background: var(--accent-ui);
+  border-color: var(--accent-ui);
+  color: #111113;
+}
+
+.wb-save:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.wb-codearea {
+  width: 100%;
+  resize: vertical;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.65;
+  padding: 10px 12px;
+  background: var(--panel2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  outline: none;
+  tab-size: 2;
+  white-space: pre;
+  overflow-x: auto;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+
+.wb-codearea:focus {
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.wb-codearea.invalid {
+  border-color: var(--danger);
+}
+
+.wb-code-error {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  line-height: 1.6;
+  color: var(--danger);
+  background: rgba(192, 68, 60, 0.07);
+  border: 1px solid rgba(192, 68, 60, 0.25);
+  border-radius: var(--r);
+  padding: 8px 10px;
+  white-space: pre-wrap;
+}
+
+.wb-saved-flash {
+  font-size: 11.5px;
+  font-weight: 550;
+  color: #3c7a4a;
+}
+
+[data-theme="dark"] .wb-saved-flash {
+  color: #84c896;
+}
+
+.wb-schema {
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.wb-schema-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.wb-schema-row {
+  display: flex;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  line-height: 1.5;
+}
+
+.wb-schema-row .k {
+  color: var(--text);
+  font-weight: 600;
+  min-width: 96px;
+  flex-shrink: 0;
+}
+
+.wb-schema-row .t {
+  color: var(--muted);
+  word-break: break-word;
+}
+
+.wb-inspector.bottom .wb-codeedit {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.wb-inspector.bottom .wb-edit-main {
+  flex: 1.5;
+}
+
+.wb-inspector.bottom .wb-schema {
+  flex: 1;
+  border-top: none;
+  border-left: 1px solid var(--border);
+  padding: 0 0 0 16px;
+}
+
+/* ---------- Props cards ---------- */
+
+.wb-prop-cards {
+  padding: 14px 16px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wb-inspector.bottom .wb-prop-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 8px 10px;
+  align-content: start;
+}
+
+.wb-prop-card {
+  border: 1px solid var(--border);
+  background: var(--panel2);
+  border-radius: 10px;
+  padding: 10px 12px 11px 12px;
+}
+
+.wb-prop-card .row1 {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.wb-prop-card .pname {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.wb-prop-card .pdefault {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  color: var(--faint);
+  white-space: nowrap;
+}
+
+.wb-prop-card .ptype {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  line-height: 1.55;
+  color: var(--muted);
+  margin-top: 3px;
+  word-break: break-word;
+}
+
+.wb-prop-card .pdesc {
+  margin: 6px 0 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--muted);
+  text-wrap: pretty;
+}
+
+/* ---------- Reset button (shared) ---------- */
+
+.wb-reset {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    color 0.12s,
+    border-color 0.12s;
+}
+
+.wb-reset:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+/* ---------- Ctrl segment (popover + misc) ---------- */
+
+.wb-ctrl-seg {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--inset);
+  border-radius: 999px;
+}
+
+.wb-ctrl-seg button {
+  flex: 1;
+  height: 23px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 11.5px;
+  font-weight: 550;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+.wb-ctrl-seg button.on {
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(16, 16, 18, 0.1);
+}
+
+/* ---------- Code tab ---------- */
+
+.wb-code-wrap {
+  position: relative;
+  margin: 14px 16px;
+}
+
+.wb-code {
+  margin: 0;
+  padding: 14px 16px;
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.65;
+  color: var(--text);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.wb-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 27px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 11.5px;
+  font-weight: 550;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+.wb-copy:hover {
+  color: var(--text);
+}
+.wb-copy.copied {
+  color: #3c7a4a;
+}
+
+[data-theme="dark"] .wb-copy.copied {
+  color: #84c896;
+}
+
+/* ---------- Variants gallery ---------- */
+
+.wb-variants {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 10px;
+  padding: 14px 16px 20px 16px;
+}
+
+.wb-variant-cell {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Clickable apply-cell: the whole card commits the variant into the editor.
+   A transparent button overlay (.wb-variant-apply) is the real click target. */
+.wb-variant-cell.clickable {
+  position: relative;
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+  border-color: var(--border);
+  color: inherit;
+  font: inherit;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s,
+    background 0.12s;
+}
+
+.wb-variant-cell.clickable:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow);
+}
+
+.wb-variant-cell.clickable:focus-within {
+  outline: none;
+  border-color: var(--accent-ui);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.wb-variant-apply {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.wb-variant-cell.applied {
+  border-color: var(--accent-ui);
+  box-shadow: 0 0 0 1px var(--accent-ui);
+}
+
+.wb-variant-stage {
+  container-type: inline-size;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 12px;
+  min-height: 86px;
+  background-image: radial-gradient(circle, var(--border) 0.8px, transparent 1.2px);
+  background-size: 14px 14px;
+}
+
+.wb-fit {
+  width: 100%;
+  overflow: hidden;
+}
+
+.wb-fit-inner {
+  width: max-content;
+  margin: 0 auto;
+  transform-origin: top center;
+}
+
+/* Live variant thumbnail: the component renders at a natural width inside its
+   own iframe, scaled down to the cell width. The iframe is inert (the whole
+   cell is the click target). */
+.wb-variant-thumb {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.wb-variant-frame {
+  display: block;
+  border: 0;
+  background: transparent;
+  transform-origin: top left;
+  pointer-events: none;
+  color-scheme: normal;
+}
+
+.wb-variant-label {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 6px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--panel2);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wb-variant-label .vname {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-variant-label .vapply {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--accent-ui);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.wb-variant-cell.clickable:hover .wb-variant-label .vapply,
+.wb-variant-cell.clickable:focus-within .wb-variant-label .vapply {
+  opacity: 1;
+}
+
+/* ---------- Context tab ---------- */
+
+.wb-context {
+  padding: 14px 16px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.wb-context-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wb-context-group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.wb-context-group-head .gname {
+  color: var(--muted);
+  letter-spacing: 0.04em;
+}
+
+.wb-context-group-desc {
+  margin: -2px 0 2px;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--faint);
+}
+
+.wb-context-group-head .grow {
+  flex: 1;
+}
+
+.wb-context-group-head .gtag {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--faint);
+}
+
+.wb-ctrl-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 28px;
+}
+
+.wb-ctrl-row .clbl {
+  flex-shrink: 0;
+  width: 96px;
+  font-size: 12px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-ctrl-row .cfield {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.wb-ctrl-input {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel2);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+
+.wb-ctrl-input::placeholder {
+  color: var(--faint);
+}
+
+.wb-ctrl-input:focus {
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+select.wb-ctrl-input {
+  cursor: pointer;
+  appearance: none;
+  padding-right: 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+.wb-ctrl-row input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent-ui);
+  min-width: 0;
+}
+
+.wb-ctrl-row .cval {
+  flex-shrink: 0;
+  width: 40px;
+  text-align: right;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+}
+
+/* Switch control (booleans) */
+.wb-switch {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--border-strong);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s;
+}
+
+.wb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: 0 1px 2px rgba(16, 16, 18, 0.2);
+  transition: transform 0.14s;
+}
+
+.wb-switch.on {
+  background: var(--accent-ui);
+}
+.wb-switch.on::after {
+  transform: translateX(14px);
+}
+
+[data-theme="dark"] .wb-switch.on::after {
+  background: #111113;
+}
+
+.wb-context-empty {
+  padding: 24px 8px;
+  color: var(--faint);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+/* ---------- Environment section ---------- */
+
+.wb-env {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wb-env-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+  margin-bottom: 2px;
+}
+
+.wb-env .wb-ctrl-seg {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---------- Logs strip ---------- */
+
+.wb-logs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  margin-top: 6px;
+  border-top: 1px solid var(--border);
+}
+
+.wb-logs-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.wb-logs-bar .lbl {
+  flex: 1;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.wb-logs-bar .cnt {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.wb-logs-list {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 4px 0;
+}
+
+.wb-log {
+  display: flex;
+  align-items: baseline;
+  gap: 9px;
+  padding: 4px 16px;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.55;
+  border-bottom: 1px solid var(--border);
+}
+
+.wb-log:last-child {
+  border-bottom: none;
+}
+
+.wb-log .ltime {
+  flex-shrink: 0;
+  color: var(--faint);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.wb-log .llevel {
+  flex-shrink: 0;
+  width: 42px;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.wb-log.log .llevel {
+  color: var(--muted);
+}
+.wb-log.info .llevel {
+  color: var(--accent-ui);
+}
+.wb-log.warn .llevel {
+  color: #99661c;
+}
+.wb-log.error .llevel {
+  color: var(--danger);
+}
+
+[data-theme="dark"] .wb-log.warn .llevel {
+  color: #dcb064;
+}
+
+.wb-log.warn {
+  background: rgba(153, 102, 28, 0.05);
+}
+.wb-log.error {
+  background: rgba(192, 68, 60, 0.05);
+}
+
+.wb-log .lmsg {
+  flex: 1;
+  color: var(--text);
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.wb-logs-empty {
+  padding: 18px 16px;
+  color: var(--faint);
+  font-size: 12px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.wb-logs-empty code {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--muted);
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+
+/* ---------- Render error ---------- */
+
+.wb-render-error {
+  margin: 14px 16px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(192, 68, 60, 0.07);
+  border: 1px solid rgba(192, 68, 60, 0.25);
+}
+
+.wb-render-error .rtitle {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--danger);
+  margin-bottom: 6px;
+}
+
+.wb-render-error pre {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  line-height: 1.6;
+  color: var(--danger);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---------- Doc header ---------- */
+
+.wb-doc-head {
+  padding: 16px 16px 0 16px;
+}
+
+.wb-doc-head h2 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wb-doc-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12.5px;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.wb-deprecated-note {
+  margin: 12px 16px 0 16px;
+  padding: 8px 11px;
+  border-radius: var(--r);
+  background: rgba(168, 67, 58, 0.06);
+  border: 1px solid rgba(168, 67, 58, 0.22);
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+/* ---------- Toolbar shrink behavior ---------- */
+
+@container canvastools (max-width: 620px) {
+  .wb-toolbar {
+    gap: 6px;
+    padding: 0 8px;
+  }
+  .wb-toolbar .wb-seg button {
+    padding: 0 8px;
+  }
+  .wb-toolbar .wb-zoom .pct {
+    width: 34px;
+  }
+  .wb-trigger {
+    padding: 0 10px;
+  }
+}
+
+/* ---------- Scrollbars ---------- */
+
+.wb-nav::-webkit-scrollbar,
+.wb-inspector-body::-webkit-scrollbar,
+.wb-stage::-webkit-scrollbar,
+.wb-code::-webkit-scrollbar,
+.wb-codearea::-webkit-scrollbar,
+.wb-logs-list::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.wb-nav::-webkit-scrollbar-thumb,
+.wb-inspector-body::-webkit-scrollbar-thumb,
+.wb-stage::-webkit-scrollbar-thumb,
+.wb-code::-webkit-scrollbar-thumb,
+.wb-codearea::-webkit-scrollbar-thumb,
+.wb-logs-list::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 5px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.wb-nav::-webkit-scrollbar-track,
+.wb-inspector-body::-webkit-scrollbar-track,
+.wb-stage::-webkit-scrollbar-track,
+.wb-code::-webkit-scrollbar-track,
+.wb-codearea::-webkit-scrollbar-track,
+.wb-logs-list::-webkit-scrollbar-track {
+  background: transparent;
+}