proto-plugin 0.1.1 → 0.1.3

package/src/styles/globals.css

@@ -30,20 +30,35 @@
   --tool-chrome-pink-highlight: rgba(255, 70, 100, 0.13);
   --tool-chrome-yellow-highlight: rgba(217, 174, 0, 0.15);
   --tool-chrome-blue-highlight: rgba(0, 151, 254, 0.13);
-  --tool-chrome-gray-highlight: rgba(255, 255, 255, 0.05);
-
-  /* Tool chrome surfaces — Cursor-style grey palette */
+  --tool-chrome-gray-highlight: rgba(255, 255, 255, 0.08);
+  --tool-chrome-button-bg: rgba(255, 255, 255, 0.14);
+  --tool-chrome-button-text: rgba(255, 255, 255, 0.92);
+  --tool-chrome-button-bg-hover: rgba(255, 255, 255, 0.22);
+  --tool-chrome-button-text-hover: #ffffff;
+
+  /* Tool chrome surfaces — deep dark palette.
+     Chrome (ground) is darkest for sidebar + header; content (bg) is a lighter
+     elevated panel for the gallery grid and review preview frame.
+
+     Neutral scale (measured against the #151515 content surface):
+       heading  #f0f0f0  ~13:1   crisp titles
+       text     #d0d0d0  ~9:1    body copy
+       muted    #a0a0a0  ~5:1    labels, descriptions (AA)
+       icon     #9a9a9a          glyphs, dimmer than body
+       border   #333333          hairline dividers
+       strong   #454545          inputs, structural edges */
   --tool-chrome-ground: #121212;
-  --tool-chrome-bg: #1e1e1e;
-  --tool-chrome-surface: #1e1e1e;
+  --tool-chrome-bg: #151515;
+  --tool-chrome-surface: #1c1c1c;
   --tool-chrome-surface-muted: #181818;
-  --tool-chrome-text: #e0e0e0;
-  --tool-chrome-text-heading: #e0e0e0;
-  --tool-chrome-text-muted: #888888;
-  --tool-chrome-icon: #888888;
-  --tool-chrome-icon-hover: #a3a3a3;
+  --tool-chrome-text: #d0d0d0;
+  --tool-chrome-text-heading: #f0f0f0;
+  --tool-chrome-text-muted: #9c9c9c;
+  --tool-chrome-icon: #9a9a9a;
+  --tool-chrome-icon-hover: #d4d4d4;
   --tool-chrome-border: #333333;
-  --tool-chrome-border-strong: #404040;
+  --tool-chrome-border-strong: #454545;
+  --tool-dialog-separator: #404040;
   --prototype-state-canvas-edge: var(--tool-chrome-icon-hover);
 
   --prototype-ground: var(--tool-chrome-ground);
@@ -51,10 +66,10 @@
   --tool-review-card-radius: 6px;
   --tool-review-card-shadow:
     0 1px 2px rgb(0 0 0 / 0.18),
-    0 0 0 1px #333333;
+    0 0 0 1px var(--tool-chrome-border);
   --tool-review-card-shadow-hover:
     0 1px 3px rgb(0 0 0 / 0.22),
-    0 0 0 1px #404040;
+    0 0 0 1px var(--tool-chrome-border-strong);
   --radius: 0.625rem;
 
   font-family: var(--tool-font-body);
@@ -68,14 +83,14 @@
   --bg-main: var(--tool-chrome-bg);
   --bg-top: var(--tool-chrome-surface);
   --bg-subtle: var(--tool-chrome-surface-muted);
-  --bg-layered: #252525;
+  --bg-layered: #1c1c1c;
   --bg-invert: var(--tool-chrome-text-heading);
   --bg-white: var(--tool-chrome-bg);
 
   --text-primary: var(--tool-chrome-text);
   --text-secondary: var(--tool-chrome-text-muted);
-  --text-tertiary: #666666;
-  --text-invert: #121212;
+  --text-tertiary: #8a8a8a;
+  --text-invert: #0d0d0d;
 
   --border-faint: var(--tool-chrome-border);
   --border-solid: var(--tool-chrome-border);
@@ -95,6 +110,29 @@
   --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.24);
   --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.28);
 
+  /*
+   * Host coss-ui @theme inline resolves utilities via shadcn tokens (--background,
+   * --foreground, …). Bridge them to tool chrome here; source previews reset
+   * these inside [data-prototype-screenshot] / [data-prototype-source-surface].
+   */
+  --background: var(--tool-chrome-bg);
+  --foreground: var(--tool-chrome-text-heading);
+  --card: var(--tool-chrome-surface);
+  --card-foreground: var(--tool-chrome-text-heading);
+  --popover: var(--tool-chrome-surface);
+  --popover-foreground: var(--tool-chrome-text-heading);
+  --secondary: var(--tool-chrome-surface-muted);
+  --secondary-foreground: var(--tool-chrome-text-heading);
+  --muted: var(--tool-chrome-surface-muted);
+  --muted-foreground: var(--tool-chrome-text-muted);
+  --accent: var(--tool-chrome-gray-highlight);
+  --accent-foreground: var(--tool-chrome-text-heading);
+  --destructive: var(--tool-chrome-pink);
+  --destructive-foreground: #ffffff;
+  --border: var(--tool-chrome-border);
+  --input: var(--tool-chrome-border-strong);
+  --ring: var(--tool-chrome-text-heading);
+
   /* Tailwind @theme inline */
   --color-background: var(--tool-chrome-bg);
   --color-foreground: var(--tool-chrome-text);
@@ -127,68 +165,129 @@
   --color-bg-main: var(--tool-chrome-bg);
   --color-bg-top: var(--tool-chrome-surface);
   --color-bg-subtle: var(--tool-chrome-surface-muted);
-  --color-bg-layered: #252525;
+  --color-bg-layered: #1c1c1c;
   --color-bg-invert: var(--tool-chrome-text-heading);
   --color-bg-white: var(--tool-chrome-bg);
   --color-text-primary: var(--tool-chrome-text);
   --color-text-secondary: var(--tool-chrome-text-muted);
-  --color-text-tertiary: #666666;
+  --color-text-tertiary: #8a8a8a;
   --color-text-invert: #121212;
 
   color: var(--tool-chrome-text);
-  background-color: var(--tool-chrome-ground);
+  background-color: var(--tool-chrome-bg);
 }
 
 [data-prototype-root] * {
   font-family: inherit;
 }
 
-[data-prototype-review-sidebar] {
+/*
+ * Sidebar chrome — a content-dense reading surface, so it pins every semantic
+ * "content" token to the bright end of the neutral scale (headings crisp, body
+ * legible, muted labels still ~5:1). Borders step up one notch from the base so
+ * dividers and input edges read clearly against the elevated ground, without
+ * turning into harsh wireframe lines.
+ */
+[data-prototype-review-sidebar],
+[data-comments-sidebar],
+[data-platform-sidebar] {
   font-family: var(--tool-font-body);
   --font-sans: var(--tool-font-body);
   --font-display: var(--tool-font-display);
   --font-mono: var(--tool-font-body);
 
   --tool-chrome-icon: #b0b0b0;
-  --tool-chrome-icon-hover: #d8d8d8;
+  --tool-chrome-icon-hover: #e6e6e6;
+  --tool-chrome-gray-highlight: rgba(255, 255, 255, 0.09);
+  --tool-chrome-border: #3a3a3a;
+  --tool-chrome-border-strong: #4d4d4d;
+  --tool-chrome-input-surface: rgba(255, 255, 255, 0.035);
 
-  color: var(--tool-chrome-icon);
-
-  --tool-chrome-text: var(--tool-chrome-icon-hover);
-  --tool-chrome-text-heading: var(--tool-chrome-icon-hover);
-  --tool-chrome-text-muted: var(--tool-chrome-icon);
+  color: var(--tool-chrome-text);
 
   --bg-ground: var(--tool-chrome-ground);
   --bg-main: var(--tool-chrome-bg);
   --bg-top: var(--tool-chrome-bg);
   --bg-subtle: var(--tool-chrome-surface-muted);
-  --bg-layered: #252525;
+  --bg-layered: #1a1a1a;
   --border-faint: var(--tool-chrome-border);
   --border-solid: var(--tool-chrome-border);
   --border-medium: var(--tool-chrome-border-strong);
 
-  --text-primary: var(--tool-chrome-icon-hover);
-  --text-secondary: var(--tool-chrome-icon);
-  --text-tertiary: #909090;
+  --text-primary: var(--tool-chrome-text-heading);
+  --text-secondary: var(--tool-chrome-text);
+  --text-tertiary: var(--tool-chrome-text-muted);
+
+  --foreground: var(--tool-chrome-text-heading);
+  --muted-foreground: var(--tool-chrome-text-muted);
+  --border: var(--tool-chrome-border);
+  --input: var(--tool-chrome-border-strong);
 
   --color-background: var(--tool-chrome-bg);
-  --color-foreground: var(--tool-chrome-icon-hover);
+  --color-foreground: var(--tool-chrome-text-heading);
   --color-card: var(--tool-chrome-surface);
-  --color-card-foreground: var(--tool-chrome-icon-hover);
+  --color-card-foreground: var(--tool-chrome-text-heading);
   --color-muted: var(--tool-chrome-surface-muted);
-  --color-muted-foreground: var(--tool-chrome-icon);
+  --color-muted-foreground: var(--tool-chrome-text-muted);
   --color-accent: var(--tool-chrome-gray-highlight);
-  --color-accent-foreground: var(--tool-chrome-icon-hover);
+  --color-accent-foreground: var(--tool-chrome-text-heading);
   --color-border: var(--tool-chrome-border);
-  --color-ring: var(--tool-chrome-icon-hover);
+  --color-border-faint: var(--tool-chrome-border);
+  --color-border-solid: var(--tool-chrome-border);
+  --color-border-medium: var(--tool-chrome-border-strong);
+  --color-input: var(--tool-chrome-border-strong);
+  --color-ring: var(--tool-chrome-text-heading);
   --color-bg-ground: var(--tool-chrome-ground);
   --color-bg-main: var(--tool-chrome-bg);
   --color-bg-top: var(--tool-chrome-bg);
   --color-bg-subtle: var(--tool-chrome-surface-muted);
-  --color-bg-layered: #252525;
-  --color-text-primary: var(--tool-chrome-icon-hover);
-  --color-text-secondary: var(--tool-chrome-icon);
-  --color-text-tertiary: #909090;
+  --color-bg-layered: #1a1a1a;
+  --color-text-primary: var(--tool-chrome-text-heading);
+  --color-text-secondary: var(--tool-chrome-text);
+  --color-text-tertiary: var(--tool-chrome-text-muted);
+}
+
+/* Give brief/prompt inputs a faint filled surface so the field reads as an
+   affordance rather than an empty hairline rectangle. */
+[data-prototype-review-sidebar] textarea:not([data-prototype-screenshot] *),
+[data-comments-sidebar] textarea:not([data-prototype-screenshot] *),
+[data-platform-sidebar] textarea:not([data-prototype-screenshot] *) {
+  background-color: var(--tool-chrome-input-surface);
+}
+
+[data-prototype-review-sidebar] :is(
+    button:not(:disabled),
+    [role="button"]:not([aria-disabled="true"]),
+    a[href],
+    summary,
+    label:has([role="switch"]),
+    label:has(input[type="checkbox"])
+  ),
+[data-comments-sidebar] :is(
+    button:not(:disabled),
+    [role="button"]:not([aria-disabled="true"]),
+    a[href],
+    summary,
+    label:has([role="switch"]),
+    label:has(input[type="checkbox"])
+  ),
+[data-platform-sidebar] :is(
+    button:not(:disabled),
+    [role="button"]:not([aria-disabled="true"]),
+    a[href],
+    summary,
+    label:has([role="switch"]),
+    label:has(input[type="checkbox"])
+  ),
+#prototype-comments-sidebar-root :is(
+    button:not(:disabled),
+    [role="button"]:not([aria-disabled="true"]),
+    a[href],
+    summary,
+    label:has([role="switch"]),
+    label:has(input[type="checkbox"])
+  ) {
+  cursor: pointer;
 }
 
 [data-prototype-root] ::selection {
@@ -198,6 +297,10 @@
 
 [data-prototype-root][data-prototype-comment-theme="light"] {
   --tool-chrome-gray-highlight: rgba(0, 0, 0, 0.05);
+  --tool-chrome-button-bg: rgba(0, 0, 0, 0.06);
+  --tool-chrome-button-text: rgba(0, 0, 0, 0.72);
+  --tool-chrome-button-bg-hover: rgba(0, 0, 0, 0.1);
+  --tool-chrome-button-text-hover: rgba(0, 0, 0, 0.92);
   --tool-chrome-ground: #f5f5f5;
   --tool-chrome-bg: #ffffff;
   --tool-chrome-surface: #ffffff;
@@ -209,6 +312,7 @@
   --tool-chrome-icon-hover: rgba(0, 0, 0, 0.85);
   --tool-chrome-border: rgba(0, 0, 0, 0.1);
   --tool-chrome-border-strong: rgba(0, 0, 0, 0.16);
+  --tool-dialog-separator: rgba(0, 0, 0, 0.12);
   --prototype-state-canvas-edge: rgba(0, 0, 0, 0.22);
 
   --bg-ground: var(--tool-chrome-ground);
@@ -231,6 +335,24 @@
   --tool-review-card-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
   --tool-review-card-shadow-hover: 0 2px 4px rgb(0 0 0 / 0.06);
 
+  --background: var(--tool-chrome-bg);
+  --foreground: var(--tool-chrome-text-heading);
+  --card: var(--tool-chrome-surface);
+  --card-foreground: var(--tool-chrome-text-heading);
+  --popover: var(--tool-chrome-surface);
+  --popover-foreground: var(--tool-chrome-text-heading);
+  --secondary: var(--tool-chrome-surface-muted);
+  --secondary-foreground: var(--tool-chrome-text-heading);
+  --muted: var(--tool-chrome-surface-muted);
+  --muted-foreground: var(--tool-chrome-text-muted);
+  --accent: var(--tool-chrome-gray-highlight);
+  --accent-foreground: var(--tool-chrome-text-heading);
+  --destructive: var(--tool-chrome-pink);
+  --destructive-foreground: #ffffff;
+  --border: var(--tool-chrome-border);
+  --input: var(--tool-chrome-border-strong);
+  --ring: var(--tool-chrome-text-heading);
+
   --color-background: var(--tool-chrome-bg);
   --color-foreground: var(--tool-chrome-text-heading);
   --color-card: var(--tool-chrome-surface);
@@ -258,7 +380,7 @@
   --color-text-tertiary: rgba(0, 0, 0, 0.45);
 
   color: var(--tool-chrome-text);
-  background-color: var(--tool-chrome-ground);
+  background-color: var(--tool-chrome-bg);
 }
 
 [data-prototype-root][data-prototype-comment-theme="light"] ::selection {
@@ -368,7 +490,7 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
 
 @media (hover: hover) and (pointer: fine) {
   [data-prototype-root] .tool-toolbar-button:hover {
-    background: #252525;
+    background: var(--tool-chrome-surface);
     color: var(--tool-chrome-icon-hover);
   }
 }
@@ -445,8 +567,28 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
 }
 
 [data-prototype-root] .tool-variant-card.is-active {
-  border-color: color-mix(in srgb, var(--tool-chrome-blue) 55%, transparent);
-  box-shadow: var(--tool-review-card-shadow-hover);
+  border: 2px solid var(--tool-chrome-blue);
+  box-shadow: none;
+}
+
+[data-prototype-root] .tool-variant-default-badge {
+  color: var(--tool-chrome-blue);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+[data-prototype-root] .tool-variant-original-badge {
+  color: var(--tool-chrome-text-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 [data-prototype-root] .tool-variant-card [data-prototype-screenshot] {
@@ -475,26 +617,90 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
   border-radius: calc(var(--radius) + 4px);
   border: 1px solid var(--tool-chrome-border);
   background: var(--tool-chrome-bg);
+  color: var(--tool-chrome-text);
+  color-scheme: dark;
   box-shadow:
     var(--shadow-lg),
-    0 0 0 1px #333333;
+    0 0 0 1px #2a2a2a;
+
+  /*
+   * Product preview surfaces reset shadcn tokens to light values. Re-bridge the
+   * full tool chrome token set so modal chrome matches the gallery/home screen.
+   */
+  --bg-main: var(--tool-chrome-bg);
+  --bg-top: var(--tool-chrome-surface);
+  --bg-subtle: var(--tool-chrome-surface-muted);
+  --text-primary: var(--tool-chrome-text);
+  --text-secondary: var(--tool-chrome-text-muted);
+  --border-faint: var(--tool-chrome-border);
+  --border-solid: var(--tool-chrome-border);
+  --border-medium: var(--tool-chrome-border-strong);
+  --primary: var(--tool-chrome-blue);
+  --primary-foreground: #ffffff;
+  --primary-dark: var(--tool-chrome-blue-deep);
+  --focus-ring: var(--tool-chrome-text-heading);
+  --active: var(--tool-chrome-text-heading);
+  --input-border: var(--tool-chrome-border-strong);
+
+  --background: var(--tool-chrome-bg);
+  --foreground: var(--tool-chrome-text-heading);
+  --card: var(--tool-chrome-surface);
+  --card-foreground: var(--tool-chrome-text-heading);
+  --popover: var(--tool-chrome-surface);
+  --popover-foreground: var(--tool-chrome-text-heading);
+  --secondary: var(--tool-chrome-surface-muted);
+  --secondary-foreground: var(--tool-chrome-text-heading);
+  --muted: var(--tool-chrome-surface-muted);
+  --muted-foreground: var(--tool-chrome-text-muted);
+  --accent: var(--tool-chrome-gray-highlight);
+  --accent-foreground: var(--tool-chrome-text-heading);
+  --destructive: var(--tool-chrome-pink);
+  --destructive-foreground: #ffffff;
+  --border: var(--tool-chrome-border);
+  --input: var(--tool-chrome-border-strong);
+  --ring: var(--tool-chrome-text-heading);
+
+  --color-background: var(--tool-chrome-bg);
+  --color-foreground: var(--tool-chrome-text-heading);
+  --color-card: var(--tool-chrome-surface);
+  --color-card-foreground: var(--tool-chrome-text-heading);
+  --color-popover: var(--tool-chrome-surface);
+  --color-popover-foreground: var(--tool-chrome-text-heading);
+  --color-primary: var(--tool-chrome-blue);
+  --color-primary-foreground: #ffffff;
+  --color-primary-dark: var(--tool-chrome-blue-deep);
+  --color-secondary: var(--tool-chrome-surface-muted);
+  --color-secondary-foreground: var(--tool-chrome-text-heading);
+  --color-muted: var(--tool-chrome-surface-muted);
+  --color-muted-foreground: var(--tool-chrome-text-muted);
+  --color-accent: var(--tool-chrome-gray-highlight);
+  --color-accent-foreground: var(--tool-chrome-text-heading);
+  --color-destructive: var(--tool-chrome-pink);
+  --color-destructive-foreground: #ffffff;
+  --color-border: var(--tool-chrome-border);
+  --color-border-faint: var(--tool-chrome-border);
+  --color-border-solid: var(--tool-chrome-border);
+  --color-border-medium: var(--tool-chrome-border-strong);
+  --color-input: var(--tool-chrome-border-strong);
+  --color-ring: var(--tool-chrome-text-heading);
+  --color-focus-ring: var(--tool-chrome-text-heading);
+  --color-active: var(--tool-chrome-text-heading);
+  --color-bg-main: var(--tool-chrome-bg);
+  --color-bg-top: var(--tool-chrome-surface);
+  --color-bg-subtle: var(--tool-chrome-surface-muted);
+  --color-text-primary: var(--tool-chrome-text);
+  --color-text-secondary: var(--tool-chrome-text-muted);
 }
 
 [data-prototype-root][data-prototype-comment-theme="light"] .tool-dialog-surface {
+  color-scheme: light;
   box-shadow:
     var(--shadow-lg),
     0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 
-[data-prototype-root] .tool-dialog-accent {
-  height: 3px;
-  flex-shrink: 0;
-  background: linear-gradient(
-    90deg,
-    var(--tool-chrome-pink) 0%,
-    var(--tool-chrome-yellow) 50%,
-    var(--tool-chrome-pink) 100%
-  );
+[data-prototype-root] .tool-dialog-separator {
+  background: var(--tool-dialog-separator);
 }
 
 [data-prototype-root] [role="tablist"] {
@@ -504,7 +710,11 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
 
 [data-prototype-root] [role="tab"][data-state="active"] {
   color: var(--tool-chrome-text-heading);
-  box-shadow: var(--shadow-xs);
+  background: color-mix(in srgb, var(--tool-chrome-blue) 12%, var(--tool-chrome-surface-muted));
+  box-shadow:
+    var(--shadow-xs),
+    inset 0 0 0 1px color-mix(in srgb, var(--tool-chrome-blue) 35%, transparent);
+  font-weight: 600;
 }
 
 /* Section labels — compact nav chip scale */
@@ -516,16 +726,37 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
   color: var(--tool-chrome-text-muted);
 }
 
-/* State map chrome — one surface color for header + canvas pan area. */
+/* State map chrome — dedicated canvas bed + node footer tokens per theme. */
 [data-prototype-root] [data-prototype-state-canvas] {
-  background-color: var(--tool-chrome-bg);
+  --prototype-state-map-canvas-bg: var(--tool-chrome-ground);
+  --prototype-state-map-node-surface: var(--tool-chrome-surface);
+  --prototype-state-map-node-preview-bg: var(--tool-chrome-surface-muted);
+  --prototype-state-map-node-footer-bg: var(--tool-chrome-surface-muted);
+  --prototype-state-map-node-footer-border: var(--tool-chrome-border-strong);
+  --prototype-state-map-node-footer-text: var(--tool-chrome-text-heading);
+
+  background-color: var(--prototype-state-map-canvas-bg);
   color: var(--tool-chrome-text);
 }
 
-/* Restore host prototype preview theme inside screenshot capture.
-   Uses neutral gray-scale tokens only — host apps can extend in their globals.css. */
+[data-prototype-root][data-prototype-comment-theme="dark"] [data-prototype-state-canvas] {
+  --prototype-state-map-canvas-bg: var(--tool-chrome-ground);
+  --prototype-state-map-node-surface: var(--tool-chrome-surface);
+  --prototype-state-map-node-preview-bg: var(--tool-chrome-surface-muted);
+  --prototype-state-map-node-footer-bg: var(--tool-chrome-surface-muted);
+  --prototype-state-map-node-footer-border: var(--tool-chrome-border-strong);
+  --prototype-state-map-node-footer-text: var(--tool-chrome-text-heading);
+}
+
+/* Restore host prototype preview theme inside screenshot capture and source
+   surfaces (component library). Fixed product values — must not inherit tool
+   theme from [data-prototype-root]. Host apps extend with --product-* tokens. */
 [data-prototype-root] [data-prototype-screenshot],
-[data-prototype-screenshot] {
+[data-prototype-screenshot],
+[data-prototype-root] [data-prototype-source-surface],
+[data-prototype-source-surface] {
+  color-scheme: light;
+
   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
   --font-display: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -552,38 +783,95 @@ html.prototype-theme-transition-disable :is(*, *::before, *::after) {
   --focus-ring: var(--text-primary);
   --active: var(--color-gray-900);
   --radius: 4px;
-  --color-background: #ffffff;
-  --color-foreground: var(--color-gray-900);
+
+  /* shadcn base tokens — host [data-prototype-screenshot] rules override with --product-* */
+  --background: var(--bg-main);
+  --foreground: var(--text-primary);
+  --card: var(--bg-top);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-top);
+  --popover-foreground: var(--text-primary);
+  --secondary: var(--bg-subtle);
+  --secondary-foreground: var(--text-primary);
+  --muted: color-mix(in srgb, var(--color-gray-900) 6%, transparent);
+  --muted-foreground: var(--text-secondary);
+  --accent: color-mix(in srgb, var(--color-gray-900) 6%, transparent);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--error);
+  --destructive-foreground: #ffffff;
+  --border: var(--border-solid);
+  --input: var(--border-medium);
+  --ring: var(--border-faint);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
-  --color-primary-foreground: #ffffff;
-  --color-muted: color-mix(in srgb, var(--color-gray-900) 6%, transparent);
-  --color-muted-foreground: var(--color-gray-500);
-  --color-border: var(--border-solid);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
   --color-border-faint: var(--border-faint);
   --color-border-solid: var(--border-solid);
   --color-border-medium: var(--border-medium);
   --color-border-hover: var(--border-medium);
-  --color-ring: var(--border-faint);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --color-focus-ring: var(--focus-ring);
   --color-active: var(--active);
+  --color-error: var(--error);
+  --color-success: var(--success);
   --color-bg-bedrock: var(--bg-bedrock);
   --color-bg-main: var(--bg-main);
   --color-bg-top: var(--bg-top);
   --color-bg-subtle: var(--bg-subtle);
   --color-bg-layered: var(--bg-layered);
   --color-bg-invert: var(--bg-invert);
-  --color-bg-white: #ffffff;
+  --color-bg-white: var(--bg-white);
   --color-text-primary: var(--text-primary);
   --color-text-secondary: var(--text-secondary);
   --color-text-tertiary: var(--text-tertiary);
 
   font-family: var(--font-sans);
   font-size: initial;
-  background-color: var(--bg-bedrock);
+}
+
+[data-prototype-root] [data-prototype-screenshot],
+[data-prototype-screenshot] {
+  color: var(--text-primary);
+  background-color: var(--bg-main);
+}
+
+/* Source surfaces (component-library preview cards) pin light product tokens but
+   do NOT force a background — each card supplies its own via bg utilities
+   (bg-default → white, bg-brand, etc.) so they read as light components on the
+   dark page. */
+[data-prototype-root] [data-prototype-source-surface],
+[data-prototype-source-surface] {
+  color: var(--text-primary);
+}
+
+[data-prototype-root] [data-prototype-screenshot] ::selection,
+[data-prototype-screenshot] ::selection,
+[data-prototype-root] [data-prototype-source-surface] ::selection,
+[data-prototype-source-surface] ::selection {
+  background: #b4d5fe;
+  color: var(--text-primary);
 }
 
 [data-prototype-root] [data-prototype-screenshot] *,
-[data-prototype-screenshot] * {
+[data-prototype-screenshot] *,
+[data-prototype-root] [data-prototype-source-surface] *,
+[data-prototype-source-surface] * {
   font-family: inherit;
 }
 

package/src/lib/prototypes/design-exploration-default-storage.ts

@@ -1,68 +0,0 @@
-import {
-  parseDesignExplorationDefault,
-  type DesignExplorationDefaultRecord,
-} from "./design-exploration-default";
-
-export class DesignExplorationDefaultStorageError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "DesignExplorationDefaultStorageError";
-  }
-}
-
-export function createDesignExplorationDefaultStorageAdapter(
-  slug: string,
-  storageKeyPrefix: string,
-) {
-  const params = new URLSearchParams({ key: storageKeyPrefix });
-  const url = `/api/prototypes/${encodeURIComponent(slug)}/design-exploration-default?${params}`;
-
-  return {
-    async load(): Promise<DesignExplorationDefaultRecord | null> {
-      const response = await fetch(url);
-
-      if (response.status === 503) {
-        throw new DesignExplorationDefaultStorageError(
-          "Design default storage is not configured. Set Upstash Redis env vars.",
-        );
-      }
-
-      if (!response.ok) {
-        const body = (await response.json().catch(() => null)) as {
-          error?: string;
-        } | null;
-        throw new DesignExplorationDefaultStorageError(
-          body?.error ?? "Failed to load design default variant.",
-        );
-      }
-
-      const parsed: unknown = await response.json();
-      if (parsed == null) return null;
-
-      return parseDesignExplorationDefault(parsed);
-    },
-
-    async save(record: DesignExplorationDefaultRecord): Promise<void> {
-      const response = await fetch(url, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(record),
-      });
-
-      if (response.status === 503) {
-        throw new DesignExplorationDefaultStorageError(
-          "Design default storage is not configured. Set Upstash Redis env vars.",
-        );
-      }
-
-      if (!response.ok) {
-        const body = (await response.json().catch(() => null)) as {
-          error?: string;
-        } | null;
-        throw new DesignExplorationDefaultStorageError(
-          body?.error ?? "Failed to save design default variant.",
-        );
-      }
-    },
-  };
-}