npm - bedrock-flows - Versions diffs - 0.7.1 - Mend

bedrock-flows 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/auth-schema.sql +8 -0
package/bin/bedrock-flows.mjs +127 -0
package/lib/setup.mjs +262 -0
package/package.json +11 -0
package/template/.storybook/main.js +46 -0
package/template/.storybook/manager-head.html +963 -0
package/template/.storybook/preview-head.html +35 -0
package/template/.storybook/preview.js +23 -0
package/template/CHANGELOG.md +236 -0
package/template/README.md +26 -0
package/template/apps/dashboard/index.html +15 -0
package/template/apps/dashboard/package.json +22 -0
package/template/apps/dashboard/src/App.module.css +1318 -0
package/template/apps/dashboard/src/App.tsx +2716 -0
package/template/apps/dashboard/src/auth-client.ts +17 -0
package/template/apps/dashboard/src/changelog.tsx +92 -0
package/template/apps/dashboard/src/index.css +86 -0
package/template/apps/dashboard/src/main.tsx +15 -0
package/template/apps/dashboard/src/theme.ts +31 -0
package/template/apps/dashboard/src/vite-env.d.ts +4 -0
package/template/apps/dashboard/vite.config.ts +48 -0
package/template/apps/worker/.dev.vars.example +50 -0
package/template/apps/worker/package.json +19 -0
package/template/apps/worker/src/index.ts +295 -0
package/template/apps/worker/tsconfig.json +11 -0
package/template/apps/worker/wrangler.jsonc +29 -0
package/template/bedrock.config.ts +16 -0
package/template/design-system/README.md +97 -0
package/template/design-system/starter-v1/components/button/component.css +42 -0
package/template/design-system/starter-v1/components/button/danger.html +21 -0
package/template/design-system/starter-v1/components/button/default.html +21 -0
package/template/design-system/starter-v1/components/button/disabled.html +21 -0
package/template/design-system/starter-v1/components/button/ghost.html +21 -0
package/template/design-system/starter-v1/components/button/macro.njk +14 -0
package/template/design-system/starter-v1/components/button/primary.html +21 -0
package/template/design-system/starter-v1/components/button/variants.json +30 -0
package/template/design-system/starter-v1/ds.json +3 -0
package/template/design-system/starter-v1/global.css +52 -0
package/template/design-system/starter-v1/style.css +107 -0
package/template/gitignore +8 -0
package/template/package.json +41 -0
package/template/prototypes/F-001-hello/1-welcome.njk +30 -0
package/template/prototypes/F-001-hello/2-form.njk +46 -0
package/template/prototypes/F-001-hello/3-done.njk +29 -0
package/template/prototypes/F-001-hello/meta.json +6 -0
package/template/prototypes/_shared/_auth-gate.njk +54 -0
package/template/prototypes/_shared/delivery.njk +43 -0
package/template/prototypes/_shared/layout.njk +15 -0
package/template/prototypes/_shared/screen.njk +1818 -0
package/template/prototypes/_shared/wireflow.njk +4731 -0
package/template/public/auth-gate.css +150 -0
package/template/public/bedrock/color-inspector.js +284 -0
package/template/public/bedrock/component-overlay.js +219 -0
package/template/public/bedrock/data/bedrock-config.js +45 -0
package/template/public/bedrock/font-size-overlay.js +590 -0
package/template/public/bedrock/grid-overlay.js +379 -0
package/template/public/bedrock/prototype-navigation.js +974 -0
package/template/public/cmdk.js +146 -0
package/template/public/ds-xray.css +112 -0
package/template/public/ds-xray.js +271 -0
package/template/public/favicon.svg +4 -0
package/template/public/icons/bolt-fill.svg +3 -0
package/template/public/icons/bolt.svg +3 -0
package/template/public/icons/caret-down-fill.svg +3 -0
package/template/public/icons/check-double.svg +4 -0
package/template/public/icons/check.svg +3 -0
package/template/public/icons/chevron-left.svg +3 -0
package/template/public/icons/chevron-right.svg +3 -0
package/template/public/icons/circle-info.svg +6 -0
package/template/public/icons/grid.svg +6 -0
package/template/public/icons/message-square-1.svg +3 -0
package/template/public/icons/message-square.svg +3 -0
package/template/public/icons/messages.svg +4 -0
package/template/public/icons/options-horizontal.svg +5 -0
package/template/public/icons/swatches.svg +6 -0
package/template/public/icons/workflow.svg +6 -0
package/template/public/lightbox.js +87 -0
package/template/public/proto-chrome.css +596 -0
package/template/public/screen-comments.css +723 -0
package/template/public/wireflow-client.js +26 -0
package/template/scripts/build-storybooks.mjs +8 -0
package/template/scripts/dev-setup.mjs +15 -0
package/template/scripts/generate-stories.mjs +12 -0
package/template/scripts/generate-variants.mjs +22 -0
package/template/tsconfig.base.json +19 -0

package/template/public/screen-comments.css ADDED Viewed

@@ -0,0 +1,723 @@
+/* Comments UI shown on individual prototype screens (screen.njk).
+   Hidden when the page is rendered inside a wireflow iframe via the
+   .is-embedded class set by the inline script in screen.njk. */
+/* Tokens: chrome-only — they don't bleed into the prototype's own
+   surface (which uses --ds-color-*). Light defaults; dark overrides
+   below via prefers-color-scheme. */
+:root {
+  --sc-surface: #ffffff;
+  --sc-surface-alt: #fafbfc;
+  --sc-border: rgba(15, 23, 42, 0.15);
+  --sc-border-soft: rgba(15, 23, 42, 0.08);
+  --sc-text: #0f172a;
+  --sc-text-muted: #64748b;
+  --sc-text-faint: #94a3b8;
+  --sc-accent: #0f172a;
+  --sc-accent-fg: #ffffff;
+  --sc-danger: #dc2626;
+  --sc-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
+  --sc-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.4);
+  --sc-overlay: rgba(15, 23, 42, 0.6);
+}
+/* Honors the shared manual theme override (data-theme on <html>) and
+   falls back to the OS preference. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --sc-surface: #0f172a;
+    --sc-surface-alt: #111c33;
+    --sc-border: rgba(255, 255, 255, 0.10);
+    --sc-border-soft: rgba(255, 255, 255, 0.06);
+    --sc-text: #f1f5f9;
+    --sc-text-muted: #94a3b8;
+    --sc-text-faint: #64748b;
+    --sc-accent: #f1f5f9;
+    --sc-accent-fg: #0f172a;
+    --sc-overlay: rgba(0, 0, 0, 0.7);
+  }
+}
+:root[data-theme='dark'] {
+  --sc-surface: #0f172a;
+  --sc-surface-alt: #111c33;
+  --sc-border: rgba(255, 255, 255, 0.10);
+  --sc-border-soft: rgba(255, 255, 255, 0.06);
+  --sc-text: #f1f5f9;
+  --sc-text-muted: #94a3b8;
+  --sc-text-faint: #64748b;
+  --sc-accent: #f1f5f9;
+  --sc-accent-fg: #0f172a;
+  --sc-overlay: rgba(0, 0, 0, 0.7);
+}
+.is-embedded .screen-comments-fab,
+.is-embedded .screen-comments-panel,
+.is-embedded .bf-auth-gate { display: none !important; }
+.screen-comments-fab {
+  position: fixed; right: 16px; bottom: 72px;
+  width: 44px; height: 44px;
+  border-radius: 999px;
+  border: 1px solid var(--sc-border);
+  background: var(--sc-surface);
+  color: var(--sc-text);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--sc-shadow);
+  z-index: 100;
+  transition: right 120ms ease;
+}
+/* When the comments sidebar is open, shift the FAB left so it stays
+   visible on the canvas. The toggle adds .is-active to the FAB itself. */
+.screen-comments-fab.is-active { right: 336px; }
+@media (max-width: 800px) {
+  .screen-comments-fab.is-active {
+    right: 16px;
+    bottom: calc(60vh + 72px);
+  }
+}
+.screen-comments-fab:hover {
+  background: var(--sc-surface-alt);
+  border-color: var(--sc-text-muted);
+}
+.screen-comments-fab.is-active {
+  background: var(--sc-accent);
+  color: var(--sc-accent-fg);
+  border-color: var(--sc-accent);
+}
+.screen-comments-fab__count {
+  position: absolute; top: -4px; right: -4px;
+  min-width: 18px; height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #f97316;
+  color: white;
+  font-size: 10px; font-weight: 600;
+  display: flex; align-items: center; justify-content: center;
+}
+.screen-comments-panel {
+  /* Full viewport height, sitting ABOVE the chrome bars (z-index 1000)
+     rather than inset by guessed bar heights — guessed insets left
+     white gaps top/bottom when the guess didn't match the real bar
+     height. The panel's 320px column has no Back/Continue/state
+     controls under it (those are left/centre), so covering the bars
+     here is fine and the compose box + Post stay fully visible. */
+  position: fixed; right: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  display: none; flex-direction: column;
+  background: var(--sc-surface);
+  color: var(--sc-text);
+  border-left: 1px solid var(--sc-border);
+  z-index: 1001;
+  overflow: hidden;
+  /* Harness chrome font — pinned because the panel shares the document with
+     the prototype, whose DS styles would otherwise cascade in. */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+.screen-comments-panel.is-open { display: flex; }
+/* The panel shares the document with the prototype, so a design system that
+   styles bare h1–h6 (display font, heading color) hits the panel's headings
+   directly — element-level rules beat inheritance. Reset headings inside the
+   harness panel back to the panel's own font/color. */
+.screen-comments-panel h1,
+.screen-comments-panel h2,
+.screen-comments-panel h3,
+.screen-comments-panel h4,
+.screen-comments-panel h5,
+.screen-comments-panel h6 {
+  font-family: inherit;
+  color: inherit;
+}
+/* Inline toggle in the proto-bottombar — replaces the prior bottom-right
+   FAB. The bottom-right corner is too easily covered by product UI
+   (chat widgets, native FABs, mobile bottom bars), so the comments
+   entry sits in the harness chrome where it's always reachable. */
+.screen-comments-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  background: var(--proto-chrome-nav-bg);
+  color: var(--proto-chrome-text);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.screen-comments-toggle:hover { background: var(--proto-chrome-pill-bg); }
+/* On touch devices chrome competes with a small screen — icon + count only. */
+@media (pointer: coarse) {
+  .screen-comments-toggle__label { display: none; }
+}
+/* Compose: the side-note opt-out. Comments are agent-actionable by default;
+   checking this marks one as reference-only so automated agents skip it. */
+.screen-comments-panel__note-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 6px 0 8px;
+  font-size: 11.5px;
+  color: var(--sc-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.screen-comments-panel__note-toggle input {
+  margin: 0;
+  accent-color: var(--sc-text);
+}
+/* Manager compose hint — replaces the side-note toggle for managers, whose
+   comments always wait on designer approval before agents act. */
+.screen-comments-panel__manager-hint {
+  margin: 6px 0 8px;
+  font-size: 11.5px;
+  color: var(--sc-text-muted);
+}
+/* Designer approval of a manager comment: context textarea + buttons. */
+.screen-comment-card__approve-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+}
+/* Designer-added context on an approved manager comment — what the agent
+   should actually do with the feedback. */
+.screen-comment-card__designer-note {
+  margin-top: 6px;
+  padding: 6px 8px;
+  border-left: 3px solid var(--sc-border);
+  background: var(--sc-surface-alt);
+  border-radius: 0 6px 6px 0;
+  font-size: 12px;
+  color: var(--sc-text);
+  white-space: pre-wrap;
+}
+.screen-comment-card__designer-note b { font-weight: 600; }
+/* Manager comment still waiting on a designer — amber chip. */
+.screen-comment-card__chip--pending {
+  border-color: #f59e0b;
+  color: #b45309;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .screen-comment-card__chip--pending {
+    color: #fcd34d;
+    border-color: #b45309;
+  }
+}
+:root[data-theme='dark'] .screen-comment-card__chip--pending {
+  color: #fcd34d;
+  border-color: #b45309;
+}
+/* Agent considered this but it needs a human decision — a soft-blue pill in
+   the same treatment as the green Resolved badge (an attention badge, not a
+   quiet metadata chip). Mirrors .screen-comment-card__resolved. */
+.screen-comment-card__needs-human {
+  display: inline-flex; align-items: center; gap: 4px;
+  margin-bottom: 6px;
+  padding: 1px 7px; border-radius: 999px;
+  font-size: 10.5px; font-weight: 600;
+  background: #dbeafe; color: #1e40af;
+}
+/* Small metadata chips on a comment card (side-note marker, viewport). */
+.screen-comment-card__chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+.screen-comment-card__byline {
+  color: var(--sc-text-faint);
+  font-size: 11px;
+}
+.screen-comment-card__chip {
+  display: inline-block;
+  margin-left: 0;
+  padding: 1px 6px;
+  border: 1px solid var(--sc-border-soft);
+  border-radius: 999px;
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--sc-text-muted);
+  white-space: nowrap;
+}
+/* "View local" — desktop-only, deployed-only jump to the dev server. */
+.screen-viewlocal {
+  display: inline-flex; align-items: center;
+  height: 28px; padding: 0 12px;
+  background: var(--proto-chrome-nav-bg);
+  color: var(--proto-chrome-text-muted);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 6px;
+  font: inherit; font-size: 12px; text-decoration: none;
+}
+.screen-viewlocal:hover { background: var(--proto-chrome-pill-bg); color: var(--proto-chrome-text); }
+.screen-viewlocal[hidden] { display: none; }
+@media (max-width: 720px) { .screen-viewlocal { display: none !important; } }
+.screen-comments-toggle.is-active {
+  background: var(--proto-chrome-text);
+  color: var(--proto-chrome-bg);
+  border-color: var(--proto-chrome-text);
+}
+.screen-comments-toggle__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  background: var(--sc-accent, #f97316);
+  /* Paired with the accent so it stays legible in dark mode (where
+     --sc-accent is near-white and a hardcoded #fff vanished). */
+  color: var(--sc-accent-fg, #fff);
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+}
+/* When the sidebar is open we want the whole prototype to remain
+   visible — no overlap with the panel. The screen content is wrapped
+   in `.proto-stage` (see screen.njk). Shrinking the stage's width
+   lets the page reflow into the remaining viewport. */
+/* Desktop full-bleed pages reflow into the remaining width. Phone-frame
+   prototypes must NOT — their body is clamped to a fixed device height
+   (.is-phone-frame body { height: 874px }); forcing width/min-height here
+   stretches the phone content. Instead, reserve the panel's width by
+   padding the html flex-centerer so the phone stays centered beside it. */
+.has-comments-open:not(.is-phone-frame) .proto-stage {
+  /* `100%` (not `100vw`) excludes the scrollbar — with `100vw` the
+     stage is scrollbar-width wider than the area left of the fixed
+     320px panel, leaving a sliver where neither covers. */
+  width: calc(100% - 320px);
+  min-height: 100vh;
+}
+.has-comments-open.is-phone-frame { padding-right: 320px; }
+.has-comments-open { overflow-x: hidden; }
+@media (max-width: 800px) {
+  /* On narrow screens the panel becomes a bottom drawer (60vh).
+     Shrink the stage vertically instead of horizontally so it stays
+     usable above the drawer. */
+  .has-comments-open:not(.is-phone-frame) .proto-stage {
+    width: 100vw;
+    min-height: 0;
+    height: 40vh;
+    overflow: auto;
+  }
+}
+@media (max-width: 800px) {
+  .screen-comments-panel {
+    top: auto; left: 0; right: 0;
+    bottom: var(--proto-bottombar-h, 0px);
+    width: 100%; height: 60vh;
+    border-left: 0; border-top: 1px solid var(--sc-border);
+  }
+}
+.screen-comments-panel__header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--sc-border-soft);
+}
+.screen-comments-panel__title {
+  margin: 0; font-size: 13px; font-weight: 600;
+  color: var(--sc-text);
+  flex: 1;
+}
+.screen-comments-panel__close {
+  background: transparent; border: 0;
+  border-radius: 6px;
+  color: var(--sc-text-muted);
+  padding: 6px;
+  font: inherit;
+  cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px;
+}
+.screen-comments-panel__close:hover { background: var(--sc-surface-alt); color: var(--sc-text); }
+.screen-comments-panel__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px;
+  display: flex; flex-direction: column; gap: 8px;
+  min-height: 60px;
+}
+.screen-comments-panel__empty {
+  color: var(--sc-text-faint); font-size: 12px; padding: 16px 0;
+  text-align: center;
+}
+.screen-comment-card {
+  border: 1px solid var(--sc-border-soft);
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--sc-surface-alt);
+}
+.screen-comment-card.is-editing { padding: 8px; }
+.screen-comment-card.is-resolved { opacity: 0.62; }
+.screen-comment-card__link {
+  color: var(--sc-accent, #2563eb);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  word-break: break-all;
+}
+.screen-comment-card__resolved {
+  display: inline-flex; align-items: center; gap: 4px;
+  margin-bottom: 6px;
+  padding: 1px 7px; border-radius: 999px;
+  font-size: 10.5px; font-weight: 600;
+  background: #dcfce7; color: #166534;
+}
+.screen-comment-card__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
+  color: var(--sc-text-muted);
+  background: var(--sc-surface); border: 1px solid var(--sc-border-soft);
+  padding: 0 5px; border-radius: 4px; margin-right: 6px;
+}
+.screen-comment-card__resolve {
+  background: transparent; border: 0; padding: 0;
+  font: inherit; font-size: 11px; font-weight: 500;
+  color: var(--sc-text-muted); cursor: pointer;
+}
+.screen-comment-card__resolve:hover { color: #166534; }
+.screen-comment-card__text {
+  font-size: 13px; line-height: 1.4;
+  color: var(--sc-text);
+  white-space: pre-wrap;
+}
+.screen-comment-card__meta {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--sc-text-faint);
+}
+.screen-comment-card.is-editing .screen-comment-card__meta { display: none; }
+.screen-comment-card__actions {
+  display: inline-flex; align-items: center; gap: 2px;
+}
+/* Icon affordances in the meta row: Resolve (checkmark) and the
+   "⋯" more trigger. Subtle until hovered; checkmark goes green
+   once the comment is resolved. */
+.screen-comment-card__icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px;
+  padding: 0; border: 0; border-radius: 5px;
+  background: transparent;
+  color: var(--sc-text-muted);
+  font-size: 14px; line-height: 1;
+  cursor: pointer;
+}
+.screen-comment-card__icon-btn:hover {
+  background: var(--sc-surface-alt);
+  color: var(--sc-text);
+}
+.screen-comment-card__icon-btn.is-resolved { color: #16a34a; }
+.screen-comment-card__icon-btn.is-resolved:hover { color: #15803d; }
+/* More-menu: anchored dropdown under the "⋯" trigger. */
+.screen-comment-card__more { position: relative; display: inline-flex; }
+.screen-comment-card__menu {
+  position: absolute; top: calc(100% + 4px); right: 0;
+  display: none; flex-direction: column;
+  min-width: 132px;
+  padding: 4px;
+  background: var(--sc-surface);
+  border: 1px solid var(--sc-border);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+  z-index: 10;
+}
+.screen-comment-card__more.is-open .screen-comment-card__menu {
+  display: flex;
+}
+.screen-comment-card__menu-item {
+  display: flex; align-items: center;
+  padding: 7px 10px;
+  background: transparent; border: 0; border-radius: 5px;
+  font: inherit; font-size: 12px; font-weight: 500;
+  color: var(--sc-text);
+  text-align: left; cursor: pointer;
+}
+.screen-comment-card__menu-item:hover { background: var(--sc-surface-alt); }
+.screen-comment-card__menu-item--danger { color: var(--sc-danger); }
+.screen-comment-card__menu-item--danger:hover {
+  background: rgba(220, 38, 38, 0.12);
+  color: var(--sc-danger);
+}
+/* Edit + Delete + Cancel — same look (subtle text-only buttons),
+   distinguished only by hover color. */
+.screen-comment-card__edit,
+.screen-comment-card__delete {
+  background: transparent; border: 0; padding: 0;
+  font: inherit; font-size: 11px; font-weight: 500;
+  color: var(--sc-text-muted);
+  cursor: pointer;
+}
+.screen-comment-card__edit:hover { color: var(--sc-text); }
+.screen-comment-card__delete:hover { color: var(--sc-danger); }
+/* Inline delete confirmation row — replaces native confirm(). */
+.screen-comment-card__delete-confirm {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 6px; padding: 6px 8px;
+  background: var(--sc-surface-alt);
+  border: 1px solid var(--sc-border);
+  border-radius: 6px;
+}
+.screen-comment-card__delete-confirm-msg {
+  flex: 1;
+  font-size: 11px; font-weight: 500;
+  color: var(--sc-text-muted);
+}
+/* Inline editor: textarea + Save/Cancel row. */
+.screen-comment-card__editor {
+  width: 100%; box-sizing: border-box;
+  padding: 8px;
+  border: 1px solid var(--sc-border);
+  border-radius: 6px;
+  font: inherit; font-size: 13px; line-height: 1.4;
+  background: var(--sc-surface);
+  color: var(--sc-text);
+  resize: vertical;
+  min-height: 60px;
+}
+.screen-comment-card__editor:focus {
+  outline: 2px solid var(--sc-text); outline-offset: -1px;
+}
+.screen-comment-card__edit-row {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 6px;
+}
+.screen-comment-card__edit-row .screen-comments-panel__post {
+  align-self: auto;
+}
+.screen-comments-panel__compose {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--sc-border-soft);
+}
+.screen-comments-panel__compose[hidden] { display: none !important; }
+.screen-mention-wrap { position: relative; }
+.screen-mention {
+  display: inline;
+  padding: 1px 6px; border-radius: 999px;
+  background: rgba(59, 130, 246, 0.32);
+  color: var(--sc-text-strong, #f1f5f9); font-weight: 600;
+}
+.screen-mention-menu {
+  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px);
+  background: var(--sc-surface); border: 1px solid var(--sc-border);
+  border-radius: 8px; box-shadow: var(--sc-shadow); padding: 4px;
+  z-index: 10; max-height: 180px; overflow-y: auto;
+}
+.screen-mention-menu[hidden] { display: none; }
+.screen-mention-menu__item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 8px; border-radius: 6px; cursor: pointer;
+  font-size: 13px; color: var(--sc-text);
+}
+.screen-mention-menu__item:hover,
+.screen-mention-menu__item.is-active { background: var(--sc-surface-alt); }
+.screen-mention-menu__handle { color: var(--sc-text-muted); font-size: 12px; }
+.screen-comments-panel__readonly {
+  margin: 10px 12px;
+  padding: 8px 10px 8px 12px;
+  border-left: 2px solid var(--sc-text-faint);
+  border-radius: 0 6px 6px 0;
+  background: var(--sc-surface-alt);
+  color: var(--sc-text-muted);
+  font-size: 12px; font-weight: 500;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.screen-comments-panel__readonly[hidden] { display: none !important; }
+.screen-comments-panel__readonly a { color: var(--sc-text); font-weight: 600; text-decoration: underline; }
+.screen-comments-panel__compose textarea {
+  width: 100%; padding: 10px 12px; box-sizing: border-box;
+  border: 1px solid var(--sc-border);
+  border-radius: 6px;
+  font: inherit; font-size: 13px; line-height: 1.5;
+  background: var(--sc-surface-alt);
+  color: var(--sc-text);
+  resize: vertical;
+  min-height: 70px;
+}
+.screen-comments-panel__post {
+  padding: 6px 12px; border: 0; border-radius: 6px;
+  background: var(--sc-accent);
+  color: var(--sc-accent-fg);
+  font: inherit; font-size: 12px; font-weight: 500;
+  cursor: pointer;
+  align-self: flex-end;
+}
+.screen-comments-panel__post:disabled { opacity: 0.5; cursor: not-allowed; }
+/* Compose footer: attach-image affordance left, Post right. */
+.screen-comments-panel__compose-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+}
+.screen-comments-panel__compose-row .screen-comments-panel__post { align-self: auto; }
+.screen-comments-panel__attach {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px;
+  padding: 0; border: 0; border-radius: 5px;
+  background: transparent;
+  color: var(--sc-text-muted);
+  cursor: pointer;
+}
+.screen-comments-panel__attach:hover {
+  background: var(--sc-surface-alt);
+  color: var(--sc-text);
+}
+/* Staged (not yet posted) image thumbnails with a remove control. */
+.screen-comments-panel__attachments {
+  display: flex; flex-wrap: wrap; gap: 6px;
+}
+.screen-comments-panel__attachments[hidden] { display: none !important; }
+.screen-comments-panel__attach-thumb {
+  position: relative; display: inline-flex;
+}
+.screen-comments-panel__attach-thumb img {
+  display: block;
+  max-height: 56px; max-width: 96px;
+  border: 1px solid var(--sc-border);
+  border-radius: 6px;
+  object-fit: cover;
+}
+.screen-comments-panel__attach-remove {
+  position: absolute; top: -6px; right: -6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px;
+  padding: 0; border: 1px solid var(--sc-border);
+  border-radius: 999px;
+  background: var(--sc-surface);
+  color: var(--sc-text-muted);
+  font-size: 11px; line-height: 1;
+  cursor: pointer;
+}
+.screen-comments-panel__attach-remove:hover { color: var(--sc-danger); }
+.screen-comments-panel__attach-error {
+  margin: 0;
+  font-size: 11px; font-weight: 500;
+  color: var(--sc-danger);
+}
+.screen-comments-panel__attach-error[hidden] { display: none !important; }
+/* Image attachments on a posted comment — small thumbnails, click = full image. */
+.screen-comment-card__attachments {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-top: 6px;
+}
+.screen-comment-card__attachments img {
+  display: block;
+  max-height: 120px; max-width: 100%;
+  border: 1px solid var(--sc-border-soft);
+  border-radius: 6px;
+}
+/* Auth gate (shown when the user hits the Comments FAB without a session) —
+   markup from _auth-gate.njk, styling from the shared /auth-gate.css. */
+/* ── Node-anchored comments (EXPERIMENTAL) ──────────────────────────────
+   Pin-to-element pick mode, the staged anchor chip in the compose area,
+   the anchor chip on posted cards, and the in-page highlight overlays.
+   Overlay elements may be appended to the preview iframe's document —
+   that document loads this same stylesheet, so the classes resolve there
+   too. Fixed accent colors (not --sc-*) so the highlight reads the same
+   over any prototype surface, light or dark. */
+.screen-comments-panel__compose-tools {
+  display: inline-flex; align-items: center; gap: 2px;
+}
+.screen-comments-panel__attach.is-picking {
+  background: var(--sc-accent);
+  color: var(--sc-accent-fg);
+}
+/* Staged (not yet posted) element anchor — one removable chip. */
+.screen-comments-panel__anchor-row { display: flex; }
+.screen-comments-panel__anchor-row[hidden] { display: none !important; }
+.screen-comments-panel__anchor-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  max-width: 100%;
+  padding: 2px 4px 2px 8px;
+  border: 1px solid var(--sc-border-soft);
+  border-radius: 999px;
+  font-size: 11px; line-height: 1.6;
+  color: var(--sc-text-muted);
+  background: var(--sc-surface-alt);
+}
+.screen-comments-panel__anchor-chip-label {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.screen-comments-panel__anchor-remove {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; flex: 0 0 auto;
+  padding: 0; border: 0; border-radius: 999px;
+  background: transparent;
+  color: var(--sc-text-muted);
+  font-size: 12px; line-height: 1;
+  cursor: pointer;
+}
+.screen-comments-panel__anchor-remove:hover { color: var(--sc-danger); }
+/* Anchor chip on a posted card — clickable (re-highlights the element). */
+.screen-comment-card__chip--anchor {
+  display: inline-flex; align-items: center; gap: 3px;
+  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
+  padding: 1px 6px;
+  background: transparent;
+  font: inherit; font-size: 10px; line-height: 1.5;
+  cursor: pointer;
+}
+.screen-comment-card__chip--anchor svg { flex: 0 0 auto; }
+.screen-comment-card__chip--anchor {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.screen-comment-card__chip--anchor:hover {
+  color: var(--sc-text);
+  border-color: var(--sc-border);
+}
+.screen-comment-card__chip--anchor.is-missing {
+  color: var(--sc-danger);
+  border-color: var(--sc-danger);
+  animation: sc-anchor-flash 0.4s ease 2;
+}
+@keyframes sc-anchor-flash {
+  50% { opacity: 0.35; }
+}
+/* Pick-mode overlays — absolutely positioned in document coordinates;
+   pointer-events:none so hover/click reach the elements underneath. */
+.screen-anchor-pick-box {
+  position: absolute; z-index: 2147483600;
+  display: none;
+  pointer-events: none;
+  border: 1.5px solid #38bdf8;
+  border-radius: 2px;
+  background: rgba(56, 189, 248, 0.14);
+}
+.screen-anchor-pick-tag {
+  position: absolute; z-index: 2147483601;
+  display: none;
+  pointer-events: none;
+  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: #0c4a6e; color: #e0f2fe;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 10.5px; line-height: 1.6;
+}
+.is-anchor-picking .proto-content,
+.is-anchor-picking .proto-content * { cursor: crosshair !important; }
+/* Re-highlight pulse when a card's anchor chip is clicked (~2s). */
+.screen-anchor-pulse {
+  position: absolute; z-index: 2147483600;
+  pointer-events: none;
+  border: 2px solid #38bdf8;
+  border-radius: 4px;
+  animation: sc-anchor-pulse 1s ease-in-out 2;
+}
+@keyframes sc-anchor-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55); opacity: 1; }
+  50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); opacity: 0.55; }
+}