bedrock-flows 0.7.1

package/template/public/cmdk.js

@@ -0,0 +1,146 @@
+// ⌘K command palette — shared across the prototype harness (screen detail
+// pages + the wireflow). Search the design system and open a component in
+// Storybook. Top window only (disabled inside the wireflow's screen iframes).
+// Targets come from each version's Storybook index.json, so the docs link is
+// correct even for re-homed groups like OS/ (os-*--docs).
+(function () {
+  if (window.self !== window.top) return;
+  if (window.__cmdkWired) return;
+  window.__cmdkWired = true;
+  var ov, inp, list, cmds = null, results = [], active = 0;
+  function injectStyle() {
+    if (document.getElementById('cmdk-style')) return;
+    var s = document.createElement('style'); s.id = 'cmdk-style';
+    s.textContent =
+      '.cmdk-ov{position:fixed;inset:0;z-index:100000;background:rgba(15,23,42,.5);display:none;align-items:flex-start;justify-content:center;padding-top:12vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.cmdk-ov.is-open{display:flex}.cmdk-box{width:min(560px,92vw);background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;color:#0f172a}.cmdk-in{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid #e5e7eb;padding:14px 16px;font-size:15px;outline:0;font-family:inherit;background:#fff;color:#0f172a}.cmdk-list{max-height:52vh;overflow-y:auto;padding:6px 0}.cmdk-row{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:9px 16px;font-family:inherit;color:#0f172a}.cmdk-row.is-active{background:#f1f5f9}.cmdk-row b{font-weight:600;font-size:14px}.cmdk-row span{font-size:12px;color:#64748b}.cmdk-foot{padding:8px 16px;border-top:1px solid #e5e7eb;font-size:11px;color:#64748b}.cmdk-empty{padding:16px;font-size:13px;color:#64748b}';
+    document.head.appendChild(s);
+  }
+  function build() {
+    injectStyle();
+    ov = document.createElement('div'); ov.className = 'cmdk-ov';
+    ov.innerHTML = '<div class="cmdk-box"><input class="cmdk-in" placeholder="Search components…" aria-label="Search components"><div class="cmdk-list"></div><div class="cmdk-foot">↑↓ navigate · ↵ open in Storybook · esc close</div></div>';
+    document.body.appendChild(ov);
+    inp = ov.querySelector('.cmdk-in'); list = ov.querySelector('.cmdk-list');
+    ov.addEventListener('click', function (e) { if (e.target === ov) close(); });
+    inp.addEventListener('input', function () { active = 0; render(); });
+    inp.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, results.length - 1); highlight(); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0); highlight(); }
+      else if (e.key === 'Enter') { e.preventDefault(); go(results[active]); }
+      else if (e.key === 'Escape') { e.preventDefault(); close(); }
+    });
+  }
+  function loadCmds() {
+    if (cmds) return Promise.resolve(cmds);
+    return fetch('/__ds.json', { credentials: 'include', cache: 'no-store' })
+      .then(function (r) { return r.ok ? r.json() : []; })
+      .then(function (versions) {
+        return Promise.all((versions || []).map(function (v) {
+          return fetch('/ds/' + v.version + '/storybook/index.json', { credentials: 'include', cache: 'no-store' })
+            .then(function (r) { return r.ok ? r.json() : null; })
+            .then(function (idx) {
+              var out = [];
+              var entries = (idx && (idx.entries || idx.stories)) || {};
+              Object.keys(entries).forEach(function (k) {
+                var e = entries[k];
+                if (e && e.type === 'docs') {
+                  var parts = String(e.title || '').split('/');
+                  out.push({ label: parts.slice(1).join(' / ') || (e.title || ''), sub: (parts[0] || '') + ' · ' + v.version, href: '/ds/' + v.version + '/storybook/?path=/docs/' + e.id });
+                }
+              });
+              return out;
+            }).catch(function () { return []; });
+        })).then(function (lists) { cmds = [].concat.apply([], lists); return cmds; });
+      }).catch(function () { cmds = []; return cmds; });
+  }
+  function render() {
+    var q = inp.value.trim().toLowerCase();
+    results = q ? cmds.filter(function (c) { return (c.label + ' ' + c.sub).toLowerCase().indexOf(q) >= 0; }) : cmds.slice(0, 80);
+    paint();
+  }
+  // Rebuild the row DOM. Only call when the result set changes — never on
+  // hover. Hovering used to call this, which blew away the row mid-click
+  // (innerHTML reset between mousedown and mouseup → the click never landed).
+  function paint() {
+    if (active > results.length - 1) active = Math.max(0, results.length - 1);
+    if (!results.length) { list.innerHTML = '<div class="cmdk-empty">No matches.</div>'; return; }
+    list.innerHTML = '';
+    results.forEach(function (c, i) {
+      var b = document.createElement('button'); b.type = 'button'; b.className = 'cmdk-row';
+      b.innerHTML = '<b></b><span></span>';
+      b.querySelector('b').textContent = c.label; b.querySelector('span').textContent = c.sub;
+      b.addEventListener('mouseenter', function () { active = i; highlight(); });
+      b.addEventListener('click', function () { go(c); });
+      list.appendChild(b);
+    });
+    highlight();
+  }
+  // Cheap, DOM-stable: just move the is-active class. Safe to call on hover
+  // and arrow-key navigation without disturbing the node under the cursor.
+  function highlight() {
+    var rows = list.querySelectorAll('.cmdk-row');
+    if (active > rows.length - 1) active = Math.max(0, rows.length - 1);
+    for (var i = 0; i < rows.length; i++) rows[i].classList.toggle('is-active', i === active);
+    var act = rows[active]; if (act && act.scrollIntoView) act.scrollIntoView({ block: 'nearest' });
+  }
+  function go(c) { if (!c) return; window.open(c.href, '_blank', 'noopener'); close(); }
+
+  // Programmatic entry points for other harness chrome (the DS X-ray
+  // ⌥⌘-click shortcut). cmdkOpenFirst opens the first component whose label
+  // matches one of `queries` (a class name or list of them) directly in
+  // Storybook. The blank tab is reserved synchronously inside the click
+  // gesture, then pointed at the resolved URL once the (usually cached)
+  // index loads — this survives the async hop without the popup blocker.
+  window.cmdkPreload = function () { return loadCmds(); };
+  window.cmdkOpenFirst = function (queries) {
+    var arr = (queries && typeof queries !== 'string' && queries.length) ? queries : [queries];
+    function find() {
+      var hit = null;
+      for (var i = 0; i < arr.length && !hit; i++) {
+        var raw = String(arr[i] || '').toLowerCase();
+        if (!raw) continue;
+        // Queries are class names; palette labels are bare component names.
+        // Derive candidates: raw → BEM base (strip __elem/--mod) → name
+        // (strip the c-/o-/u- namespace prefix), so 'c-mobile-step-bar__trigger'
+        // resolves to 'mobile-step-bar'. Prefer an exact label, then substring.
+        var base = raw.replace(/(__|--)[\s\S]*$/, '');
+        var name = base.replace(/^[cou]-/, '');
+        var qs = [raw, base, name];
+        for (var j = 0; j < qs.length && !hit; j++) {
+          var q = qs[j];
+          if (!q) continue;
+          hit = cmds.filter(function (c) { return c.label.toLowerCase() === q; })[0]
+            || cmds.filter(function (c) { return (c.label + ' ' + c.sub).toLowerCase().indexOf(q) >= 0; })[0]
+            || null;
+        }
+      }
+      return hit;
+    }
+    // Fast path: index already warmed (X-ray preloads it on activate). Resolve
+    // and open synchronously inside the click gesture, so a miss — e.g. a
+    // layout-only class with no component — opens no tab at all.
+    if (cmds) { var h = find(); if (h) window.open(h.href, '_blank', 'noopener'); return Promise.resolve(h); }
+    // Cold path: reserve a tab in-gesture, point it once the index loads.
+    var w = window.open('', '_blank');
+    return loadCmds().then(function () {
+      var hit = find();
+      if (hit && w) { try { w.opener = null; } catch (e) {} w.location = hit.href; }
+      else if (w) w.close();
+      return hit;
+    }).catch(function () { if (w) { try { w.close(); } catch (e) {} } return null; });
+  };
+  function open() {
+    if (!ov) build();
+    ov.classList.add('is-open'); inp.value = ''; active = 0;
+    list.innerHTML = '<div class="cmdk-empty">Loading components…</div>';
+    inp.focus();
+    loadCmds().then(render);
+  }
+  function close() { if (ov) ov.classList.remove('is-open'); }
+  document.addEventListener('keydown', function (e) {
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+      e.preventDefault();
+      if (ov && ov.classList.contains('is-open')) close(); else open();
+    }
+  });
+})();

package/template/public/ds-xray.css

@@ -0,0 +1,112 @@
+/* DS X-ray — a review-only overlay that outlines each product element by
+   its design-system provenance, derived purely from class membership
+   against the loaded DS bundle (/ds/<version>/style.css). Toggled with the
+   `x` key or the chrome "X-ray" button. This is harness chrome — it never
+   ships as product UI and only ever decorates elements inside
+   `.proto-content`.
+
+   Three buckets:
+     ds     — every (meaningful) class on the element is defined in the DS
+     mixed  — element carries DS classes plus page-local ones
+     nonds  — no DS classes at all (page-local layout / invented markup)
+   `outline` is used (not border) so the page layout never shifts. */
+
+.ds-xray-ds    { outline: 2px solid rgba(21, 128, 61, 0.9) !important; outline-offset: -2px; }
+.ds-xray-mixed { outline: 2px solid rgba(217, 119, 6, 0.95) !important; outline-offset: -2px; }
+.ds-xray-nonds { outline: 2px dashed rgba(220, 38, 38, 0.85) !important; outline-offset: -2px; }
+
+/* Legend — fixed pill with live counts; doubles as the off switch. Sits
+   above everything, independent of whether the rest of the chrome is shown. */
+.ds-xray-legend {
+    position: fixed;
+    left: 16px;
+    bottom: 16px;
+    z-index: 2147483000;
+    display: none;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px 8px 14px;
+    border-radius: 10px;
+    background: #0f172a;
+    color: #fff;
+    font: 500 12px/1.2 'Archivo', system-ui, sans-serif;
+    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.4);
+}
+.ds-xray-legend.is-on { display: flex; }
+.ds-xray-legend__title { font-weight: 700; letter-spacing: 0.01em; }
+.ds-xray-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.ds-xray-key::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    box-sizing: border-box;
+}
+.ds-xray-key--ds::before    { background: rgba(21, 128, 61, 0.9); }
+.ds-xray-key--mixed::before { background: rgba(217, 119, 6, 0.95); }
+.ds-xray-key--nonds::before { background: transparent; border: 2px dashed rgba(248, 113, 113, 0.95); }
+.ds-xray-key b { font-weight: 700; }
+.ds-xray-legend__close {
+    border: none;
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+}
+.ds-xray-legend__close:hover { background: rgba(255, 255, 255, 0.22); }
+
+/* Hover tooltip — names the classes under the cursor and which are DS. */
+.ds-xray-tip {
+    position: fixed;
+    z-index: 2147483001;
+    max-width: 320px;
+    padding: 6px 9px;
+    border-radius: 7px;
+    background: #0f172a;
+    color: #fff;
+    font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    pointer-events: none;
+    display: none;
+    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.45);
+}
+.ds-xray-tip.is-on { display: block; }
+.ds-xray-tip .is-ds  { color: #4ade80; }
+.ds-xray-tip .is-non { color: #fca5a5; }
+.ds-xray-tip__hint {
+    display: block;
+    margin-top: 5px;
+    padding-top: 5px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    color: #94a3b8;
+    font-size: 10.5px;
+}
+
+/* Chrome toggle button — appended into the proto top bar for discovery. */
+.proto-xray-btn {
+    border: 1px solid var(--proto-chrome-border, rgba(148, 163, 184, 0.4));
+    background: transparent;
+    color: var(--proto-chrome-text, #0f172a);
+    font: 600 12px/1 'Archivo', system-ui, sans-serif;
+    padding: 6px 10px;
+    border-radius: 7px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+.proto-xray-btn svg { display: block; }
+/* On touch devices chrome competes with a small screen — icon only. */
+@media (pointer: coarse) {
+    .proto-xray-btn__label { display: none; }
+}
+/* Active = inverted chrome (dark pill in light mode, light pill in dark
+   mode) so the label never blends into the toolbar background. */
+.proto-xray-btn.is-on {
+    background: var(--proto-chrome-text, #0f172a);
+    color: var(--proto-chrome-bg, #fff);
+    border-color: var(--proto-chrome-text, #0f172a);
+}

package/template/public/ds-xray.js

@@ -0,0 +1,271 @@
+/* DS X-ray — runtime design-system provenance overlay.
+ *
+ * "On any given screen, know what it's using." Reads the class names the
+ * DS actually defines straight from the loaded bundle (the stylesheet whose
+ * href matches /ds/<version>/style.css), then classifies every element
+ * inside `.proto-content` by class membership:
+ *
+ *   ds     — all meaningful classes are DS classes        (solid green)
+ *   mixed  — DS classes + page-local classes              (solid amber)
+ *   nonds  — no DS classes (page layout / invented)       (dashed red)
+ *
+ * Signal is class-membership only: it answers "is this class from the DS",
+ * not "was the DS macro used" — an element that borrows a DS class reads as
+ * DS. Toggle with the `x` key or the chrome X-ray button. Top-level only;
+ * inside wireflow iframe previews the screen should look like the product.
+ */
+(function () {
+  if (window.self !== window.top) return;
+
+  // Vendor/global classes that aren't page-authored and aren't a DS
+  // component either — ignore them so icon spans don't read as "page".
+  var IGNORE = {
+    'material-symbols-sharp': 1,
+    'material-symbols-outlined': 1,
+    'material-symbols-rounded': 1,
+  };
+
+  var registry = null; // Set<string> of DS class names, built lazily.
+  var active = false;
+  var legend = null;
+  var tip = null;
+  var btn = null;
+  var listenDoc = null; // document we attached hover/click listeners to.
+
+  // The document to classify. When a Viewport breakpoint preview is active
+  // (a local feature), the real screen renders inside the same-origin preview
+  // iframe while the top-level .proto-content is hidden — so target the
+  // iframe's document. Otherwise the top-level document.
+  function previewDoc() {
+    var stage = document.querySelector('.proto-stage');
+    if (!stage || !stage.classList.contains('is-previewing')) return null;
+    var ifr = document.querySelector('.proto-preview__iframe');
+    try {
+      var d = ifr && ifr.contentDocument;
+      return d && d.querySelector('.proto-content') ? d : null;
+    } catch (e) { return null; } // cross-origin (shouldn't happen, same-origin)
+  }
+  function activeDoc() { return previewDoc() || document; }
+
+  function buildRegistry(doc) {
+    var classes = new Set();
+    var sheets = doc.styleSheets;
+    for (var i = 0; i < sheets.length; i++) {
+      var href = sheets[i].href || '';
+      if (!/\/ds\/[^/]+\/style\.css(\?|$)/.test(href)) continue;
+      var rules;
+      try { rules = sheets[i].cssRules; } catch (e) { continue; } // cross-origin
+      if (rules) collect(rules, classes);
+    }
+    return classes;
+  }
+
+  function collect(rules, classes) {
+    for (var i = 0; i < rules.length; i++) {
+      var r = rules[i];
+      if (r.selectorText) {
+        var m = r.selectorText.match(/\.[-_a-zA-Z][-_a-zA-Z0-9]*/g);
+        if (m) for (var j = 0; j < m.length; j++) classes.add(m[j].slice(1));
+      } else if (r.cssRules) {
+        collect(r.cssRules, classes); // @media / @supports
+      }
+    }
+  }
+
+  function meaningfulClasses(el) {
+    var out = [];
+    el.classList.forEach(function (c) {
+      if (IGNORE[c]) return;
+      if (c.indexOf('ds-xray') === 0) return;
+      out.push(c);
+    });
+    return out;
+  }
+
+  function classify(cls) {
+    var ds = [], non = [];
+    for (var i = 0; i < cls.length; i++) {
+      (registry.has(cls[i]) ? ds : non).push(cls[i]);
+    }
+    if (ds.length && !non.length) return { kind: 'ds', ds: ds, non: non };
+    if (!ds.length && non.length) return { kind: 'nonds', ds: ds, non: non };
+    if (ds.length && non.length) return { kind: 'mixed', ds: ds, non: non };
+    return null;
+  }
+
+  function apply() {
+    var doc = activeDoc();
+    // Rebuild per call: the active doc can change (top-level ↔ preview iframe)
+    // as the Viewport control switches between Full and a breakpoint.
+    registry = buildRegistry(doc);
+    var counts = { ds: 0, mixed: 0, nonds: 0 };
+    var root = doc.querySelector('.proto-content');
+    if (!root) return counts;
+    var els = root.querySelectorAll('*');
+    for (var i = 0; i < els.length; i++) {
+      var el = els[i];
+      if (el.closest('.wf-edges')) continue; // off-screen wireflow edges
+      var cls = meaningfulClasses(el);
+      if (!cls.length) continue;
+      var res = classify(cls);
+      if (!res) continue;
+      el.classList.add('ds-xray-' + res.kind);
+      el.__dsXray = res;
+      counts[res.kind]++;
+    }
+    return counts;
+  }
+
+  function clear() {
+    [document, previewDoc()].forEach(function (doc) {
+      if (!doc) return;
+      var els = doc.querySelectorAll('.ds-xray-ds, .ds-xray-mixed, .ds-xray-nonds');
+      for (var i = 0; i < els.length; i++) {
+        els[i].classList.remove('ds-xray-ds', 'ds-xray-mixed', 'ds-xray-nonds');
+        els[i].__dsXray = null;
+      }
+    });
+  }
+
+  function ensureUi() {
+    if (legend) return;
+    legend = document.createElement('div');
+    legend.className = 'ds-xray-legend';
+    legend.innerHTML =
+      '<span class="ds-xray-legend__title">DS X-ray</span>' +
+      '<span class="ds-xray-key ds-xray-key--ds">DS <b data-c="ds">0</b></span>' +
+      '<span class="ds-xray-key ds-xray-key--mixed">Mixed <b data-c="mixed">0</b></span>' +
+      '<span class="ds-xray-key ds-xray-key--nonds">Page <b data-c="nonds">0</b></span>' +
+      '<button type="button" class="ds-xray-legend__close" aria-label="Turn off X-ray">×</button>';
+    legend.querySelector('.ds-xray-legend__close').addEventListener('click', function () { setActive(false); });
+    document.body.appendChild(legend);
+
+    tip = document.createElement('div');
+    tip.className = 'ds-xray-tip';
+    document.body.appendChild(tip);
+  }
+
+  function setCounts(counts) {
+    legend.querySelector('[data-c="ds"]').textContent = counts.ds;
+    legend.querySelector('[data-c="mixed"]').textContent = counts.mixed;
+    legend.querySelector('[data-c="nonds"]').textContent = counts.nonds;
+  }
+
+  // When listening inside the preview iframe, event coords are iframe-relative
+  // but the tip lives in the top-level body — shift by the iframe's position.
+  function frameOffset() {
+    if (listenDoc && listenDoc !== document) {
+      var ifr = document.querySelector('.proto-preview__iframe');
+      if (ifr) { var r = ifr.getBoundingClientRect(); return { x: r.left, y: r.top }; }
+    }
+    return { x: 0, y: 0 };
+  }
+
+  function onMove(e) {
+    var el = e.target.closest && e.target.closest('.ds-xray-ds, .ds-xray-mixed, .ds-xray-nonds');
+    if (!el || !el.__dsXray) { tip.classList.remove('is-on'); return; }
+    var r = el.__dsXray;
+    var html = '';
+    if (r.ds.length) html += '<span class="is-ds">DS: ' + r.ds.join(' ') + '</span>';
+    if (r.ds.length && r.non.length) html += '<br>';
+    if (r.non.length) html += '<span class="is-non">page: ' + r.non.join(' ') + '</span>';
+    if (r.ds.length) html += '<span class="ds-xray-tip__hint">⌥⌘ click → open in Storybook</span>';
+    tip.innerHTML = html;
+    tip.classList.add('is-on');
+    var off = frameOffset();
+    var x = Math.min(e.clientX + off.x + 14, window.innerWidth - 330);
+    var y = Math.min(e.clientY + off.y + 16, window.innerHeight - 60);
+    tip.style.left = Math.max(8, x) + 'px';
+    tip.style.top = y + 'px';
+  }
+
+  // ⌥⌘-click a DS (or mixed) element to jump straight to its Storybook docs
+  // — a shortcut for "what is this and how do I use it". We hand the element's
+  // DS class names to the ⌘K palette, which opens the first matching
+  // component. Capture phase + preventDefault so the underlying screen never
+  // reacts to the modified click.
+  function onClick(e) {
+    if (!active || !e.altKey || !(e.metaKey || e.ctrlKey)) return;
+    var el = e.target.closest && e.target.closest('.ds-xray-ds, .ds-xray-mixed');
+    if (!el || !el.__dsXray || !el.__dsXray.ds.length) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (typeof window.cmdkOpenFirst === 'function') window.cmdkOpenFirst(el.__dsXray.ds);
+  }
+
+  function addListeners() {
+    listenDoc = activeDoc();
+    listenDoc.addEventListener('mousemove', onMove, true);
+    listenDoc.addEventListener('click', onClick, true);
+  }
+  function removeListeners() {
+    if (!listenDoc) return;
+    listenDoc.removeEventListener('mousemove', onMove, true);
+    listenDoc.removeEventListener('click', onClick, true);
+    listenDoc = null;
+  }
+
+  function setActive(on) {
+    active = on;
+    ensureUi();
+    if (on) {
+      var counts = apply();
+      setCounts(counts);
+      legend.classList.add('is-on');
+      addListeners();
+      // Warm the palette's component index so the ⌥⌘-click open is instant.
+      if (typeof window.cmdkPreload === 'function') window.cmdkPreload();
+    } else {
+      clear();
+      legend.classList.remove('is-on');
+      tip.classList.remove('is-on');
+      removeListeners();
+    }
+    if (btn) btn.classList.toggle('is-on', on);
+  }
+
+  function toggle() { setActive(!active); }
+  window.dsXrayToggle = toggle;
+  window.dsXrayActive = function () { return active; };
+
+  // Re-run while active — used by the Viewport control after it switches
+  // breakpoint (the active doc flips between top-level and the preview iframe).
+  window.dsXrayReapply = function () {
+    if (!active) return;
+    clear();
+    removeListeners();
+    setCounts(apply());
+    addListeners();
+  };
+
+  function isEditable(el) {
+    if (!el) return false;
+    var t = el.tagName;
+    return t === 'INPUT' || t === 'TEXTAREA' || t === 'SELECT' || el.isContentEditable;
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
+    if (isEditable(e.target)) return;
+    if (e.key === 'x' || e.key === 'X') { e.preventDefault(); toggle(); }
+  });
+
+  // Discoverability: a toggle button in the proto top bar (when present).
+  document.addEventListener('DOMContentLoaded', function () {
+    var bar = document.querySelector('.proto-topbar');
+    if (!bar) return;
+    btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'proto-xray-btn';
+    // Icon + label; the label collapses away on touch devices (CSS) where
+    // chrome competes with a small screen.
+    btn.innerHTML =
+      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+      '<path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M7 12h10"/></svg>' +
+      '<span class="proto-xray-btn__label">X-ray</span>';
+    btn.title = 'Toggle DS X-ray (x)';
+    btn.setAttribute('aria-label', 'Toggle DS X-ray');
+    btn.addEventListener('click', toggle);
+    bar.appendChild(btn);
+  });
+})();

package/template/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF4B26">
+  <!-- Bolt fill — Bedrock Flows brand mark. Source: public/icons/bolt-fill.svg recolored. -->
+  <path d="M13.9098 3.5H8.37203C8.15122 3.5 7.95656 3.64483 7.89311 3.85633L5.19311 12.8563C5.09687 13.1771 5.33709 13.5 5.67203 13.5H9.35962C9.68491 13.5 9.92359 13.8057 9.84469 14.1213L8.47795 19.5882C8.35217 20.0914 8.98115 20.4297 9.3316 20.0474L18.232 10.3379C18.5259 10.0172 18.2984 9.5 17.8634 9.5H14.0902C13.7813 9.5 13.5462 9.22257 13.597 8.9178L14.403 4.0822C14.4538 3.77743 14.2187 3.5 13.9098 3.5Z"/>
+</svg>

package/template/public/icons/bolt-fill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9098 3.5H8.37203C8.15122 3.5 7.95656 3.64483 7.89311 3.85633L5.19311 12.8563C5.09687 13.1771 5.33709 13.5 5.67203 13.5H9.35962C9.68491 13.5 9.92359 13.8057 9.84469 14.1213L8.47795 19.5882C8.35217 20.0914 8.98115 20.4297 9.3316 20.0474L18.232 10.3379C18.5259 10.0172 18.2984 9.5 17.8634 9.5H14.0902C13.7813 9.5 13.5462 9.22257 13.597 8.9178L14.403 4.0822C14.4538 3.77743 14.2187 3.5 13.9098 3.5Z" fill="black"/>
+</svg>

package/template/public/icons/bolt.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9098 3.5H8.37203C8.15122 3.5 7.95656 3.64483 7.89311 3.85633L5.19311 12.8563C5.09687 13.1771 5.33709 13.5 5.67203 13.5H9.35962C9.68491 13.5 9.92359 13.8057 9.84469 14.1213L8.47795 19.5882C8.35217 20.0914 8.98115 20.4297 9.3316 20.0474L18.232 10.3379C18.5259 10.0172 18.2984 9.5 17.8634 9.5H14.0902C13.7813 9.5 13.5462 9.22257 13.597 8.9178L14.403 4.0822C14.4538 3.77743 14.2187 3.5 13.9098 3.5Z" stroke="black" stroke-width="1.5" stroke-miterlimit="2.16568" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/caret-down-fill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9325 10C16.3564 10 16.588 10.4944 16.3166 10.8201L12.3841 15.5391C12.1842 15.7789 11.8158 15.7789 11.6159 15.5391L7.68341 10.8201C7.41202 10.4944 7.6436 10 8.06752 10H15.9325Z" fill="black"/>
+</svg>

package/template/public/icons/check-double.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 8L12 18L11.0773 16.9733" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 11L8 16L16 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12L9.33333 18L20 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 18L8 12L14 6" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6L16 12L10 18" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/circle-info.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="black" stroke-width="1.5"/>
+<path d="M11.9999 16.7122V10.6733" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.0029 7.32996H12.0149" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.0029 16.7541V10.7153" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/template/public/icons/grid.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4H15C14.4477 4 14 4.44772 14 5V9C14 9.55228 14.4477 10 15 10H19C19.5523 10 20 9.55228 20 9V5C20 4.44772 19.5523 4 19 4Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 14H15C14.4477 14 14 14.4477 14 15V19C14 19.5523 14.4477 20 15 20H19C19.5523 20 20 19.5523 20 19V15C20 14.4477 19.5523 14 19 14Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 4H5C4.44772 4 4 4.44772 4 5V9C4 9.55228 4.44772 10 5 10H9C9.55228 10 10 9.55228 10 9V5C10 4.44772 9.55228 4 9 4Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 14H5C4.44772 14 4 14.4477 4 15V19C4 19.5523 4.44772 20 5 20H9C9.55228 20 10 19.5523 10 19V15C10 14.4477 9.55228 14 9 14Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/message-square-1.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/message-square.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/messages.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5H4C3.44772 5 3 5.44772 3 6V12.9375C3 13.4898 3.44772 13.9375 4 13.9375H7V16L11 13.9375H14C14.5523 13.9375 15 13.4898 15 12.9375V6C15 5.44772 14.5523 5 14 5Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 8H20C20.5523 8 21 8.44772 21 9V15.9375C21 16.4898 20.5523 16.9375 20 16.9375H17V19L13 16.9375H11" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/public/icons/options-horizontal.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.006 11.994V12.006" stroke="black" stroke-width="3" stroke-linecap="round"/>
+<path d="M12.006 11.994V12.006" stroke="black" stroke-width="3" stroke-linecap="round"/>
+<path d="M6.00598 11.994V12.006" stroke="black" stroke-width="3" stroke-linecap="round"/>
+</svg>

package/template/public/icons/swatches.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7C3 5.11438 3 4.17157 3.58579 3.58579C4.17157 3 5.11438 3 7 3C8.88562 3 9.82843 3 10.4142 3.58579C11 4.17157 11 5.11438 11 7V12V17C11 18.8856 11 19.8284 10.4142 20.4142C9.82843 21 8.88562 21 7 21C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V12V7Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 7.49994L12.6716 5.82837C14.0049 4.49503 14.6716 3.82837 15.5 3.82837C16.3284 3.82837 16.9951 4.49503 18.3284 5.82837L19.1716 6.67151C20.5049 8.00485 21.1716 8.67151 21.1716 9.49994C21.1716 10.3283 20.5049 10.995 19.1716 12.3283L11 20.4999" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 21H17C18.8856 21 19.8284 21 20.4142 20.4142C21 19.8284 21 18.8856 21 17V15.5C21 15.0353 21 14.803 20.9616 14.6098C20.8038 13.8164 20.1836 13.1962 19.3902 13.0384C19.197 13 18.9647 13 18.5 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 16.9915L7.00849 17" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/template/public/icons/workflow.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25 10C8.59721 10 10.5 8.76878 10.5 7.25C10.5 5.73122 8.59721 4.5 6.25 4.5C3.90279 4.5 2 5.73122 2 7.25C2 8.76878 3.90279 10 6.25 10Z" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12 19H8C7 19 5 18.4 5 16C5 13.6 7 13 8 13H17C18 13 20 12.4 20 10C20 7.6 18 7 17 7H13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 21.4142L13.7071 18.7071L11 16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 16H17C16.4477 16 16 16.4477 16 17V21C16 21.5523 16.4477 22 17 22H21C21.5523 22 22 21.5523 22 21V17C22 16.4477 21.5523 16 21 16Z" fill="black"/>
+</svg>