HALDEN BAKEHOUSE ARCHITECTURE · CLIENT-SIDE REACTIVE SUITE
State Management & Reactive Dynamics Suite
A comprehensive live environment demonstrating client-side reactivity across Site-Wide Globals, Page-Level Local States, Reusable Saved Blocks, Deep Nested JSON trees, Starbase Collection Database CRUD, and Studio Logic Board visual node graph execution — completely decoupled from full-page reloads.
• Site Scope: Shared across every page in the customer session • Page Scope: Reactive local parameters for interactive page elements • Saved Block Scope: Modular components with internal and inherited states • Deep JSON Paths: Dot-notation drill-down (e.g. Rustic Country Sourdough) • Starbase CRUD: Real-time database operations synchronized with client state • Studio Logic Board: Multi-node pipeline execution with triggers, gates, conditions, and action dispatching
01 · Site-Wide Global States (Client Session)
Global variables persist across navigation and components throughout a visitor session. Any update here reflects across headers, footers, saved blocks, and normal pages instantly.
📢 Live Global Announcement: 🥖 Fresh sourdough loaves & cardamom knots straight from the stone hearth at 7:00 AM daily!
🏪 Hearth Status: Bakery is currently true (Location: Halden Gamlebyen Hearth, Kirkegata 14)
🛒 Shopping Basket: 3 items in cart · Free delivery at $45
🎨 Brand Config (JSON): Currency: USD · City: Halden · Guild Discount: 15%
02 · Page-Scoped States & Dynamic Interactivity
Page variables maintain isolated client state specific to this URL. Interactive elements modify state on button clicks with immediate UI re-rendering.
🪙 Crust Loyalty Tokens: {{state.page.crust_tokens}} tokens accumulated (VIP Milestone at 10 tokens: {{state.page.vip_perk_unlocked}})
🍞 Today's Hearth Loaves Baked: {{state.page.todays_bakes_count}} units · In Stock: {{state.page.sourdough_in_stock}} · Shift: {{state.page.baker_shift}}
💬 Interactive Modals: Quick Order Dialog: {{state.page.is_quick_order_modal_open}} · Flour Spec Sheet Drawer: {{state.page.is_spec_sheet_open}}
Hierarchical Deep JSON Inspection
• Guild Customer Tier: Master Baker Guild • Scheduled Hearth Pickup: Today, 10:30 AM • Calculated Order Subtotal: $42.50 • Item #1: 2x Rustic Country Sourdough ($9.50) • Item #2: 4x Spiced Cardamom Knot ($4.25) • Loyalty Reward Points: 140 Hearth Points
03 · States from Another Saved Block
The card below is a modular Saved Block placed by reference ({ type: "global", props: { ref: "..." } }). Notice how it resolves its own block-scoped states (daily special, price, fermentation hours) while simultaneously reading ambient site and page states:
⭐ Reusable Saved Block · Live Feature Loaf
This modular banner is a shared Saved Block placed by reference ({ type: "global", props: { ref: ... } }). It simultaneously renders its own saved-block states, ambient site-wide globals, and active page-level parameters:
• Saved Block Special: Wild Lingonberry & Rye Sourdough · $11.50 • Artisan Craft: 36h slow hearth ferment · Only 8 loaves remaining today! • Inherited Global Announcement: 🥖 Fresh sourdough loaves & cardamom knots straight from the stone hearth at 7:00 AM daily! • Inherited Page Category: Active in artisan-breads section
04 · Studio State Management Suite Control
Open the Studio State Management Suite from the left sidebar icon in the dashboard to live-inspect all state variables, add custom variables, modify values with immediate visual canvas hydration, and test interactive dynamics seamlessly.
05 · Starbase Collection Live CRUD Operations
Full two-way synchronization between client-side reactive state and PostgreSQL Starbase collections (collection: test-specials). Click any action button below to trigger database mutations and witness immediate live state updates without a full page refresh.
📁 Starbase Collection: `test-specials` (Hearth Daily Specials) 📊 Total Starbase Records in DB: 3 loaves & bakes ⚡ Last Database Operation: Collection initialized with 3 records
🥖 Featured Special In Focus: Stoneground Heritage Loaf · Price: $8.50 📦 Stock Availability: In Stock (24 available units)
06 · Studio Logic Board & Visual Workflow Engine
Every action button, state variable, and database operation on this page is directly connected to the Studio Logic Board. Click the workflow buttons below to execute multi-node logic pipelines across the 4 Studio scopes (Frontend Page, Frontend Global, Backend Page, Backend Global) with live telemetry feedback.
⚡ Last Executed Logic Pipeline: Baker VIP Milestone Pipeline 🧭 Active Logic Scope: `frontend-page` ⏱️ Execution Timestamp: Ready to execute
🔗 Pipeline Trace: Trigger: Block Click (#btn-vip-flow) ➔ Condition: Tokens ≥ 5 (PASSED) ➔ Action: Set State (vip_perk_unlocked = true) ➔ Scope: frontend-page