bedrock-flows 0.7.1

package/template/prototypes/F-001-hello/3-done.njk

@@ -0,0 +1,29 @@
+{% extends '_shared/screen.njk' %}
+{% set stepLabel = 'You\'re in' %}
+{% set stepNum = 3 %}
+{% set stepTotal = 3 %}
+
+{% block styles %}
+.hello {
+  max-width: 480px;
+  margin: 80px auto;
+  padding: 32px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  text-align: center;
+  font-family: var(--font-sans);
+  color: var(--color-fg);
+  box-shadow: var(--shadow-sm);
+}
+.hello h1 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
+.hello p { margin: 0 0 24px; color: var(--color-fg-muted); }
+{% endblock %}
+
+{% block content %}
+<section class="hello">
+  <h1>You're in.</h1>
+  <p>That's the entire starter flow. Edit these pages, add more, or replace this prototype with your own under <code>prototypes/&lt;your-slug&gt;/</code>.</p>
+  <a class="btn btn--ghost" href="1-welcome">Start over</a>
+</section>
+{% endblock %}

package/template/prototypes/F-001-hello/meta.json

@@ -0,0 +1,6 @@
+{
+  "id": "F-001",
+  "name": "Hello world",
+  "dsVersion": "starter-v1",
+  "status": "Ready for design"
+}

package/template/prototypes/_shared/_auth-gate.njk

@@ -0,0 +1,54 @@
+{# Shared auth-gate markup — pairs with /auth-gate.css (the single source for
+   the gate's styling). Used by wireflow.njk (prefix 'wf', with sign-up) and
+   screen.njk (prefix 'screen', sign-in only). The dashboard's React AuthGate
+   (apps/dashboard/src/App.tsx) renders the same classes from JSX — change the
+   structure here AND there; styling changes only need auth-gate.css.
+
+   `prefix` namespaces the element ids ({{prefix}}AuthGate, {{prefix}}AuthForm,
+   {{prefix}}AuthError, {{prefix}}AuthGoogle, {{prefix}}AuthName(Field),
+   {{prefix}}AuthEmail, {{prefix}}AuthPassword, {{prefix}}AuthSubmit) so each
+   surface's behaviour JS keeps its existing id hooks. #}
+{% macro gate(prefix, title, lede, signup=false) %}
+<div class="bf-auth-gate" id="{{ prefix }}AuthGate" hidden>
+  <div class="bf-auth-gate__card">
+    <h2 class="bf-auth-gate__title">{{ title }}</h2>
+    <p class="bf-auth-gate__lede">{{ lede }}</p>
+    {# Auth errors surface as an alert banner at the top of the card. #}
+    <p class="bf-auth-error" id="{{ prefix }}AuthError" role="alert" hidden></p>
+    <form class="bf-auth-form" id="{{ prefix }}AuthForm">
+      {% if signup %}
+      <div class="bf-auth-form__tabs">
+        <button type="button" class="bf-auth-form__tab is-active" data-mode="signin">Sign in</button>
+        <button type="button" class="bf-auth-form__tab" data-mode="signup">Sign up</button>
+      </div>
+      {% endif %}
+      <button type="button" class="bf-auth-form__google" id="{{ prefix }}AuthGoogle">
+        <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden="true">
+          <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.61z"/>
+          <path fill="#34A853" d="M9 18c2.43 0 4.47-.81 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.32A9 9 0 0 0 9 18z"/>
+          <path fill="#FBBC05" d="M3.97 10.71A5.4 5.4 0 0 1 3.69 9c0-.59.1-1.17.28-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l3.01-2.33z"/>
+          <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/>
+        </svg>
+        Continue with Google
+      </button>
+      <div class="bf-auth-form__divider"><span>or</span></div>
+      {% if signup %}
+      {# The hidden toggle lives on the wrapper so label + input hide together. #}
+      <label class="bf-auth-form__field" id="{{ prefix }}AuthNameField" hidden>
+        <span class="bf-auth-form__label">Name</span>
+        <input type="text" id="{{ prefix }}AuthName" placeholder="Your name" maxlength="40" autocomplete="name" />
+      </label>
+      {% endif %}
+      <label class="bf-auth-form__field">
+        <span class="bf-auth-form__label">Email</span>
+        <input type="email" id="{{ prefix }}AuthEmail" placeholder="you@example.com" autocomplete="email" required />
+      </label>
+      <label class="bf-auth-form__field">
+        <span class="bf-auth-form__label">Password</span>
+        <input type="password" id="{{ prefix }}AuthPassword" autocomplete="current-password" minlength="8" required />
+      </label>
+      <button type="submit" class="bf-auth-form__submit" id="{{ prefix }}AuthSubmit">Sign in</button>
+    </form>
+  </div>
+</div>
+{% endmacro %}

package/template/prototypes/_shared/delivery.njk

@@ -0,0 +1,43 @@
+{# Delivery page wrapper — the Bedrock 3 "front-end delivery" environment.
+
+   A delivery prototype (meta.kind: 'delivery') renders its pages through this
+   wrapper instead of the wireflow harness (screen.njk). It shows a real site
+   page (the page's {% block content %}) plus the Bedrock toolbar: page-tree
+   drawer (Ctrl+M), viewport presets, and grid / component / font-size / color
+   overlays. No step pill / comments — it's meant to feel like the deployed site.
+
+   Context from core.renderPage: dsHref, dsBase, assetBase, meta, page, bedrock.
+   window.PAGE_DATA is served per-delivery at {{ assetBase }}/__pages.js (emitted
+   by @bedrock-flows/deliveries via the vite-plugin / worker); window.BEDROCK_CONFIG
+   comes from /bedrock/data/bedrock-config.js. #}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  {# Absolute base so a delivery's flat page slugs resolve within /p/<id>/. #}
+  <base href="{{ assetBase }}/" />
+  <title>{{ stepLabel or page }} — {{ meta.name }}</title>
+  <link rel="stylesheet" href="{{ dsHref }}" />
+  {% block styles %}{% endblock %}
+</head>
+<body>
+  {% block content %}{% endblock %}
+
+  {# Bedrock toolbar — config + per-delivery page tree, then the plugin scripts.
+     Gated by bedrock.config plugins via window.BEDROCK_CONFIG; each script
+     skips itself inside iframe previews. #}
+  <script src="/bedrock/data/bedrock-config.js"></script>
+  <script src="{{ assetBase }}/__pages.js"></script>
+  <script src="/bedrock/prototype-navigation.js"></script>
+  <script src="/bedrock/component-overlay.js"></script>
+  <script src="/bedrock/font-size-overlay.js"></script>
+  <script src="/bedrock/color-inspector.js"></script>
+  <script src="/bedrock/grid-overlay.js"></script>
+
+  {# Delegated DS behavioural scripts (same as screen.njk; harmless if absent). #}
+  <script src="{{ dsBase }}/components/menu/menu.js" defer></script>
+  <script src="{{ dsBase }}/components/form-validation/form-validation.js" defer></script>
+</body>
+</html>

package/template/prototypes/_shared/layout.njk

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <base href="/p/{{ meta.id }}/" />
+    <title>{% block title %}{{ meta.name }}{% endblock %} — {{ meta.id }}</title>
+    <link rel="stylesheet" href="{{ dsHref }}" />
+    {% block head %}{% endblock %}
+  </head>
+  <body>
+    {% block body %}{% endblock %}
+  </body>
+</html>