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/auth-gate.css ADDED Viewed

@@ -0,0 +1,150 @@
+/* Shared auth-gate UI — THE single source for the sign-in/sign-up card.
+   Used by all three surfaces:
+     - dashboard SPA  (apps/dashboard/src/App.tsx  → <AuthGate/>)
+     - wireflow pages (prototypes/_shared/_auth-gate.njk via wireflow.njk)
+     - screen pages   (prototypes/_shared/_auth-gate.njk via screen.njk)
+   Behaviour JS stays per-surface (each host has its own session plumbing);
+   markup + styling live here and in _auth-gate.njk. Change the gate's look
+   ONCE, here.
+   Self-contained --bfa-* tokens (light defaults, dark via the shared
+   data-theme override on <html> falling back to the OS preference) so the
+   gate renders identically over the dashboard, a wireflow canvas, or any
+   prototype's design system. The font is pinned for the same reason a DS
+   that styles bare headings would otherwise repaint the card. */
+.bf-auth-gate {
+  --bfa-surface: #ffffff;
+  --bfa-surface-alt: #fafbfc;
+  --bfa-border: rgba(15, 23, 42, 0.15);
+  --bfa-text: #0f172a;
+  --bfa-text-muted: #64748b;
+  --bfa-accent: #0f172a;
+  --bfa-accent-fg: #ffffff;
+  position: fixed; inset: 0; z-index: 1000;
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.78);
+  backdrop-filter: blur(4px);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .bf-auth-gate {
+    --bfa-surface: #0f172a;
+    --bfa-surface-alt: #111c33;
+    --bfa-border: rgba(255, 255, 255, 0.12);
+    --bfa-text: #f1f5f9;
+    --bfa-text-muted: #94a3b8;
+    --bfa-accent: #f1f5f9;
+    --bfa-accent-fg: #0f172a;
+  }
+}
+:root[data-theme='dark'] .bf-auth-gate {
+  --bfa-surface: #0f172a;
+  --bfa-surface-alt: #111c33;
+  --bfa-border: rgba(255, 255, 255, 0.12);
+  --bfa-text: #f1f5f9;
+  --bfa-text-muted: #94a3b8;
+  --bfa-accent: #f1f5f9;
+  --bfa-accent-fg: #0f172a;
+}
+.bf-auth-gate[hidden] { display: none !important; }
+/* A DS that styles bare headings (display font, heading color) hits the
+   gate's heading directly — element-level rules beat inheritance. */
+.bf-auth-gate h1, .bf-auth-gate h2, .bf-auth-gate h3,
+.bf-auth-gate h4, .bf-auth-gate h5, .bf-auth-gate h6 {
+  font-family: inherit;
+  color: inherit;
+}
+.bf-auth-gate__card {
+  width: 100%; max-width: 360px;
+  background: var(--bfa-surface);
+  color: var(--bfa-text);
+  border: 1px solid var(--bfa-border);
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.4);
+  padding: 24px;
+}
+.bf-auth-gate__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
+.bf-auth-gate__lede { margin: 0 0 16px; font-size: 13px; color: var(--bfa-text-muted); }
+/* Errors are an alert banner at the top of the card (between the lede and
+   the form), not a small note under the submit button. */
+.bf-auth-error {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #b91c1c;
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  border-radius: 8px;
+}
+.bf-auth-form { display: flex; flex-direction: column; gap: 8px; }
+.bf-auth-form[hidden],
+.bf-auth-form__field[hidden] { display: none !important; }
+.bf-auth-form__tabs { display: flex; gap: 4px; margin-bottom: 4px; }
+.bf-auth-form__tab {
+  flex: 1; padding: 6px 10px;
+  background: transparent;
+  border: 1px solid var(--bfa-border);
+  color: var(--bfa-text-muted);
+  font: inherit; font-size: 12px; font-weight: 500;
+  border-radius: 6px; cursor: pointer;
+}
+.bf-auth-form__tab.is-active {
+  background: var(--bfa-accent);
+  color: var(--bfa-accent-fg);
+  border-color: var(--bfa-accent);
+}
+.bf-auth-form__google {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 8px 12px;
+  background: var(--bfa-surface);
+  color: var(--bfa-text);
+  border: 1px solid var(--bfa-border);
+  border-radius: 6px;
+  font: inherit; font-size: 13px; font-weight: 500;
+  cursor: pointer;
+}
+.bf-auth-form__google:hover { background: var(--bfa-surface-alt); }
+.bf-auth-form__google svg { display: block; }
+.bf-auth-form__divider {
+  display: flex; align-items: center; gap: 8px;
+  color: var(--bfa-text-muted); font-size: 11px;
+}
+.bf-auth-form__divider::before,
+.bf-auth-form__divider::after {
+  content: ''; flex: 1; height: 1px; background: var(--bfa-border);
+}
+/* Visible labels above the inputs — placeholder-only labels disappear the
+   moment you type. */
+.bf-auth-form__field { display: flex; flex-direction: column; gap: 4px; }
+.bf-auth-form__label { font-size: 12px; font-weight: 500; color: var(--bfa-text-muted); }
+.bf-auth-form input {
+  padding: 7px 10px;
+  border: 1px solid var(--bfa-border);
+  border-radius: 6px;
+  font: inherit; font-size: 13px;
+  background: var(--bfa-surface-alt);
+  color: var(--bfa-text);
+  width: 100%;
+  box-sizing: border-box;
+}
+.bf-auth-form__submit {
+  padding: 8px 12px;
+  border: 1px solid var(--bfa-accent);
+  background: var(--bfa-accent);
+  color: var(--bfa-accent-fg);
+  font: inherit; font-size: 13px; font-weight: 500;
+  border-radius: 6px; cursor: pointer;
+}
+.bf-auth-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }

package/template/public/bedrock/color-inspector.js ADDED Viewed

@@ -0,0 +1,284 @@
+/**
+ * Color Inspector Overlay
+ *
+ * Hover over any element to reveal its computed text color, background color,
+ * and any matching CSS custom property tokens (e.g. --color-neutral-800).
+ *
+ * Keyboard shortcut: Ctrl+Shift+C
+ * State persisted in localStorage.
+ */
+(function () {
+    const STORAGE_KEY = 'colorOverlayEnabled';
+    const TOOLTIP_ID = 'color-overlay-tooltip';
+    const TOAST_ID = 'color-overlay-toast';
+    const HIGHLIGHT_CLASS = 'color-overlay-highlight';
+    let enabled = false;
+    let tooltip = null;
+    let tokenIndex = null;
+    function injectStyles() {
+        if (document.getElementById('color-overlay-styles')) return;
+        const style = document.createElement('style');
+        style.id = 'color-overlay-styles';
+        style.textContent = `
+            #${TOOLTIP_ID} {
+                position: fixed;
+                background: #1A1A2E;
+                color: white;
+                font-size: 11px;
+                font-family: monospace;
+                padding: 6px 8px;
+                border-radius: 4px;
+                z-index: 99999;
+                pointer-events: none;
+                white-space: nowrap;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                opacity: 0;
+                transition: opacity 0.15s ease;
+                line-height: 1.5;
+            }
+            #${TOOLTIP_ID}.visible { opacity: 1; }
+            #${TOOLTIP_ID} .swatch {
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 2px;
+                vertical-align: -1px;
+                margin-right: 4px;
+                border: 1px solid rgba(255,255,255,0.2);
+            }
+            #${TOOLTIP_ID} .token {
+                color: #8ED6FB;
+            }
+            .${HIGHLIGHT_CLASS} {
+                outline: 1px dashed #8ED6FB !important;
+                outline-offset: 1px;
+            }
+            #${TOAST_ID} {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%) translateY(100px);
+                background: #1A1A2E;
+                color: white;
+                font-size: 13px;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                padding: 10px 20px;
+                border-radius: 6px;
+                z-index: 100000;
+                pointer-events: none;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                opacity: 0;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+            }
+            #${TOAST_ID}.visible {
+                opacity: 1;
+                transform: translateX(-50%) translateY(0);
+            }
+            #${TOAST_ID} .toast-status--on { color: #4CAF50; font-weight: 600; }
+            #${TOAST_ID} .toast-status--off { color: #F44336; font-weight: 600; }
+        `;
+        document.head.appendChild(style);
+    }
+    function createTooltip() {
+        if (tooltip) return;
+        tooltip = document.createElement('div');
+        tooltip.id = TOOLTIP_ID;
+        document.body.appendChild(tooltip);
+    }
+    let toastTimeout = null;
+    function showToast(message, isOn) {
+        injectStyles();
+        let toast = document.getElementById(TOAST_ID);
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = TOAST_ID;
+            document.body.appendChild(toast);
+        }
+        const cls = isOn ? 'toast-status--on' : 'toast-status--off';
+        const status = isOn ? 'ON' : 'OFF';
+        toast.innerHTML = `${message}: <span class="${cls}">${status}</span>`;
+        if (toastTimeout) clearTimeout(toastTimeout);
+        requestAnimationFrame(() => toast.classList.add('visible'));
+        toastTimeout = setTimeout(() => toast.classList.remove('visible'), 2000);
+    }
+    // Normalize any CSS color string to canonical rgb()/rgba() via the browser
+    function normalizeColor(str) {
+        if (!str) return null;
+        const tmp = document.createElement('div');
+        tmp.style.color = '';
+        tmp.style.color = str;
+        if (!tmp.style.color) return null;
+        document.body.appendChild(tmp);
+        const resolved = getComputedStyle(tmp).color;
+        document.body.removeChild(tmp);
+        return resolved;
+    }
+    // Build a reverse lookup map: normalized rgb string -> [token names]
+    function buildTokenIndex() {
+        const index = {};
+        const rootStyle = getComputedStyle(document.documentElement);
+        const seen = new Set();
+        for (const sheet of document.styleSheets) {
+            let rules;
+            try { rules = sheet.cssRules; } catch (e) { continue; }
+            if (!rules) continue;
+            for (const rule of rules) {
+                if (!rule.style || !rule.selectorText) continue;
+                if (rule.selectorText !== ':root' && rule.selectorText !== 'html') continue;
+                for (let i = 0; i < rule.style.length; i++) {
+                    const name = rule.style[i];
+                    if (!name.startsWith('--color') || seen.has(name)) continue;
+                    seen.add(name);
+                    const raw = rootStyle.getPropertyValue(name).trim();
+                    if (!raw) continue;
+                    const rgb = normalizeColor(raw);
+                    if (!rgb) continue;
+                    if (!index[rgb]) index[rgb] = [];
+                    index[rgb].push(name);
+                }
+            }
+        }
+        return index;
+    }
+    function rgbToHex(rgb) {
+        const m = rgb.match(/\d+(\.\d+)?/g);
+        if (!m || m.length < 3) return null;
+        const [r, g, b, a] = m.map(Number);
+        const hex = '#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('').toUpperCase();
+        if (a !== undefined && a < 1) {
+            return hex + Math.round(a * 255).toString(16).padStart(2, '0').toUpperCase();
+        }
+        return hex;
+    }
+    function lookupTokens(rgb) {
+        if (!tokenIndex || !rgb) return [];
+        return tokenIndex[rgb] || [];
+    }
+    function formatEntry(label, rgb) {
+        if (!rgb || rgb === 'rgba(0, 0, 0, 0)' || rgb === 'transparent') return '';
+        const hex = rgbToHex(rgb);
+        const tokens = lookupTokens(rgb);
+        const swatch = `<span class="swatch" style="background:${rgb}"></span>`;
+        const tokenStr = tokens.length ? ` <span class="token">${tokens.join(', ')}</span>` : '';
+        return `${swatch}<strong>${label}</strong> ${hex || rgb}${tokenStr}`;
+    }
+    function handleMouseMove(e) {
+        if (!enabled || !tooltip) return;
+        const element = document.elementFromPoint(e.clientX, e.clientY);
+        if (!element || element === tooltip || element.closest('#protoNav')) {
+            tooltip.classList.remove('visible');
+            clearHighlight();
+            return;
+        }
+        clearHighlight();
+        element.classList.add(HIGHLIGHT_CLASS);
+        const cs = getComputedStyle(element);
+        const tag = element.tagName.toLowerCase();
+        const lines = [`<strong>&lt;${tag}&gt;</strong>`];
+        const colorLine = formatEntry('color:', cs.color);
+        if (colorLine) lines.push(colorLine);
+        const bgLine = formatEntry('bg:', cs.backgroundColor);
+        if (bgLine) lines.push(bgLine);
+        tooltip.innerHTML = lines.join('<br>');
+        tooltip.classList.add('visible');
+        positionTooltip(e.clientX, e.clientY);
+    }
+    function clearHighlight() {
+        document.querySelectorAll('.' + HIGHLIGHT_CLASS).forEach(el => {
+            el.classList.remove(HIGHLIGHT_CLASS);
+        });
+    }
+    function positionTooltip(x, y) {
+        if (!tooltip) return;
+        const rect = tooltip.getBoundingClientRect();
+        let posX = x + 15;
+        let posY = y + 15;
+        if (posX + rect.width > window.innerWidth) posX = x - rect.width - 10;
+        if (posY + rect.height > window.innerHeight) posY = y - rect.height - 10;
+        tooltip.style.left = posX + 'px';
+        tooltip.style.top = posY + 'px';
+    }
+    function enable() {
+        enabled = true;
+        injectStyles();
+        createTooltip();
+        if (!tokenIndex) tokenIndex = buildTokenIndex();
+        // Disable typography modes if active
+        if (window.TypographyOverlay) {
+            if (window.TypographyOverlay.isFontModeEnabled()) window.TypographyOverlay.disableFontMode(true);
+            if (window.TypographyOverlay.isDistanceModeEnabled()) window.TypographyOverlay.disableDistanceMode(true);
+        }
+        document.addEventListener('mousemove', handleMouseMove);
+        localStorage.setItem(STORAGE_KEY, 'true');
+        window.dispatchEvent(new CustomEvent('colorOverlayToggled', { detail: { enabled: true } }));
+    }
+    function disable(skipSave) {
+        enabled = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        if (tooltip) tooltip.classList.remove('visible');
+        clearHighlight();
+        if (!skipSave) localStorage.setItem(STORAGE_KEY, 'false');
+        window.dispatchEvent(new CustomEvent('colorOverlayToggled', { detail: { enabled: false } }));
+    }
+    function toggle() {
+        if (enabled) {
+            disable();
+            showToast('Color Inspector', false);
+        } else {
+            enable();
+            showToast('Color Inspector', true);
+        }
+    }
+    // Auto-disable if a typography mode turns on
+    window.addEventListener('typographyOverlayToggled', (e) => {
+        if (e.detail && e.detail.enabled && enabled) disable(true);
+    });
+    window.ColorOverlay = {
+        toggle: toggle,
+        enable: enable,
+        disable: disable,
+        isEnabled: function () { return enabled; }
+    };
+    document.addEventListener('keydown', function (e) {
+        if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.key === 'c')) {
+            // Avoid breaking copy
+            if (window.getSelection && window.getSelection().toString()) return;
+            e.preventDefault();
+            toggle();
+        }
+    });
+    function restore() {
+        if (localStorage.getItem(STORAGE_KEY) === 'true') enable();
+    }
+    if (document.readyState !== 'loading') {
+        restore();
+    } else {
+        document.addEventListener('DOMContentLoaded', restore);
+    }
+    console.log('[Color Inspector] Ready. Ctrl+Shift+C to toggle.');
+})();

package/template/public/bedrock/component-overlay.js ADDED Viewed

@@ -0,0 +1,219 @@
+/**
+ * BEM Component Name Overlay Utility
+ *
+ * Displays the component name above elements with c-* classes.
+ * Supports two modes:
+ *   - Top-level components (larger structural components)
+ *   - Small components (atoms and molecules like icons, buttons, filter-chips)
+ * Toggle with Ctrl+Shift+B (top-level) or Ctrl+Shift+A (small components)
+ * State is persisted in localStorage
+ */
+(function() {
+    const STORAGE_KEY_TOPLEVEL = 'bemOverlayTopLevel';
+    const STORAGE_KEY_ATOMS = 'bemOverlayAtoms';
+    const OVERLAY_CLASS = 'component-overlay-label';
+    const OVERLAY_CLASS_TOPLEVEL = 'component-overlay-label--toplevel';
+    const OVERLAY_CLASS_ATOM = 'component-overlay-label--atom';
+    const POSITIONED_CLASS = 'component-overlay-positioned';
+    // Small components - atoms and molecules (reusable UI elements)
+    const SMALL_COMPONENTS = [
+        'icon', 'icon-list', 'progress-icon', 'progress-track', 'button', 'link', 'tag', 'tag-more', 'badge', 'chip', 'filter-chip',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'input', 'checkbox', 'radio', 'radio-option', 'select', 'textarea',
+        'label', 'required-marker', 'avatar', 'spinner', 'loader', 'divider',
+        'tooltip', 'arrow', 'arrow-list', 'academy-reference', 'completion-summary'
+    ];
+    let topLevelVisible = false;
+    let atomsVisible = false;
+    // Inject styles once
+    function injectStyles() {
+        if (document.getElementById('component-overlay-styles')) return;
+        const style = document.createElement('style');
+        style.id = 'component-overlay-styles';
+        style.textContent = `
+            .${OVERLAY_CLASS} {
+                position: absolute;
+                top: 0;
+                left: 0;
+                color: white;
+                font-size: 10px;
+                font-family: monospace;
+                padding: 2px 6px;
+                z-index: 9999;
+                pointer-events: none;
+                line-height: 1.2;
+                white-space: nowrap;
+                border-radius: 0 0 3px 0;
+            }
+            .${OVERLAY_CLASS_TOPLEVEL} {
+                background: #E91E63;
+            }
+            .${OVERLAY_CLASS_ATOM} {
+                background: #9C27B0;
+            }
+            .${POSITIONED_CLASS} {
+                position: relative;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    // Check if a component is a small component (atom or molecule)
+    function isSmallComponent(name) {
+        return SMALL_COMPONENTS.includes(name.toLowerCase());
+    }
+    // Extract the first c-* class name from an element
+    function getComponentName(element) {
+        const classes = Array.from(element.classList);
+        for (const cls of classes) {
+            if (cls.startsWith('c-') && !cls.includes('__') && !cls.includes('--')) {
+                return cls.substring(2); // Remove 'c-' prefix
+            }
+        }
+        return null;
+    }
+    // Create an overlay label for a component
+    function createOverlay(element, name, type) {
+        const label = document.createElement('span');
+        const typeClass = type === 'atom' ? OVERLAY_CLASS_ATOM : OVERLAY_CLASS_TOPLEVEL;
+        label.className = `${OVERLAY_CLASS} ${typeClass}`;
+        label.textContent = name;
+        label.dataset.overlayType = type;
+        // Ensure parent is positioned for absolute positioning to work
+        const computedStyle = window.getComputedStyle(element);
+        if (computedStyle.position === 'static') {
+            element.classList.add(POSITIONED_CLASS);
+        }
+        element.appendChild(label);
+    }
+    // Refresh overlays based on current visibility states
+    function refreshOverlays() {
+        injectStyles();
+        // First, remove all existing overlays
+        const existingOverlays = document.querySelectorAll('.' + OVERLAY_CLASS);
+        existingOverlays.forEach(function(overlay) {
+            overlay.remove();
+        });
+        // Remove positioning class from all elements
+        const positioned = document.querySelectorAll('.' + POSITIONED_CLASS);
+        positioned.forEach(function(element) {
+            element.classList.remove(POSITIONED_CLASS);
+        });
+        // If nothing is visible, we're done
+        if (!topLevelVisible && !atomsVisible) return;
+        // Find all elements with c-* classes (component blocks, not elements or modifiers)
+        const allElements = document.querySelectorAll('[class*="c-"]');
+        allElements.forEach(function(element) {
+            const name = getComponentName(element);
+            if (name) {
+                const isSmall = isSmallComponent(name);
+                if (isSmall && atomsVisible) {
+                    createOverlay(element, name, 'atom');
+                } else if (!isSmall && topLevelVisible) {
+                    createOverlay(element, name, 'toplevel');
+                }
+            }
+        });
+    }
+    // Set top-level overlay state
+    function setTopLevelState(visible) {
+        topLevelVisible = visible;
+        localStorage.setItem(STORAGE_KEY_TOPLEVEL, visible ? 'true' : 'false');
+        refreshOverlays();
+        // Dispatch custom event for sync with prototype nav
+        window.dispatchEvent(new CustomEvent('bemOverlayToggled', {
+            detail: { topLevel: topLevelVisible, atoms: atomsVisible }
+        }));
+    }
+    // Set atoms overlay state
+    function setAtomsState(visible) {
+        atomsVisible = visible;
+        localStorage.setItem(STORAGE_KEY_ATOMS, visible ? 'true' : 'false');
+        refreshOverlays();
+        // Dispatch custom event for sync with prototype nav
+        window.dispatchEvent(new CustomEvent('bemOverlayToggled', {
+            detail: { topLevel: topLevelVisible, atoms: atomsVisible }
+        }));
+    }
+    // Toggle top-level overlays
+    function toggleTopLevel() {
+        setTopLevelState(!topLevelVisible);
+        console.log('[Component Overlay] Top-level: ' + (topLevelVisible ? 'ON' : 'OFF'));
+    }
+    // Toggle small component overlays
+    function toggleAtoms() {
+        setAtomsState(!atomsVisible);
+        console.log('[Component Overlay] Small components: ' + (atomsVisible ? 'ON' : 'OFF'));
+    }
+    // Expose global API for prototype navigation
+    window.BEMOverlay = {
+        toggleTopLevel: toggleTopLevel,
+        toggleAtoms: toggleAtoms,
+        showTopLevel: function() { setTopLevelState(true); },
+        hideTopLevel: function() { setTopLevelState(false); },
+        showAtoms: function() { setAtomsState(true); },
+        hideAtoms: function() { setAtomsState(false); },
+        isTopLevelVisible: function() { return topLevelVisible; },
+        isAtomsVisible: function() { return atomsVisible; },
+        // Legacy API for backwards compatibility
+        toggle: toggleTopLevel,
+        show: function() { setTopLevelState(true); },
+        hide: function() { setTopLevelState(false); },
+        isVisible: function() { return topLevelVisible || atomsVisible; }
+    };
+    // Listen for keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Shift+B for top-level components
+        if (e.ctrlKey && e.shiftKey && (e.key === 'B' || e.key === 'b')) {
+            e.preventDefault();
+            toggleTopLevel();
+        }
+        // Ctrl+Shift+A for atoms
+        if (e.ctrlKey && e.shiftKey && (e.key === 'A' || e.key === 'a')) {
+            e.preventDefault();
+            toggleAtoms();
+        }
+    });
+    // Restore state from localStorage on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        const savedTopLevel = localStorage.getItem(STORAGE_KEY_TOPLEVEL);
+        const savedAtoms = localStorage.getItem(STORAGE_KEY_ATOMS);
+        if (savedTopLevel === 'true') {
+            topLevelVisible = true;
+        }
+        if (savedAtoms === 'true') {
+            atomsVisible = true;
+        }
+        if (topLevelVisible || atomsVisible) {
+            refreshOverlays();
+        }
+    });
+    // Log availability on load
+    console.log('[Component Overlay] Ready. Ctrl+Shift+B for top-level, Ctrl+Shift+A for small components.');
+})();

package/template/public/bedrock/data/bedrock-config.js ADDED Viewed

@@ -0,0 +1,45 @@
+// Auto-generated by bedrock/generate-pages.js — do not edit manually
+// Run: npm run generate
+window.BEDROCK_CONFIG = {
+  "plugins": {
+    "viewport": true,
+    "componentOverlay": true,
+    "gridOverlay": true,
+    "typographyInspector": true,
+    "colorInspector": true,
+    "storybook": true
+  },
+  "breakpoints": [
+    {
+      "id": "full",
+      "label": "Full width",
+      "width": null
+    },
+    {
+      "id": "desktop",
+      "label": "Desktop",
+      "width": 1280
+    },
+    {
+      "id": "tablet-lg",
+      "label": "Large Tablet",
+      "width": 960
+    },
+    {
+      "id": "tablet",
+      "label": "Tablet",
+      "width": 720
+    },
+    {
+      "id": "mobile",
+      "label": "Mobile",
+      "width": 375,
+      "height": 812
+    }
+  ],
+  "storybookPorts": [
+    6006,
+    6007,
+    6008
+  ]
+};