WBN Foundation Software Development Guide v0.1
WBN Global Inc.™ · Internal Development

Foundation Software Guide

Widget & Cast Development Standards · WBN CastNetwork™

Living Document v0.1 Draft
WBN Foundation Software Development Guide

§1 Purpose & Scope

This is a living document. It captures agreed decisions, standards, and patterns that govern the development of all WBN widgets, casts, and platform modules. It is uploaded at the start of every development session and updated as new decisions are made. Its purpose is to eliminate ambiguity, reduce rework, and ensure every WBN product looks and behaves consistently — regardless of which cast or publication it is deployed on.

When this document conflicts with a one-off instruction in a session, this document wins unless the session instruction explicitly says "override the Foundation Guide."

⚠ v0.1 Draft — This document is being established. Sections marked TBD are placeholders for decisions not yet made. Confirmed rules are marked Confirmed.

§2 Visual Standards Confirmed

All WBN widgets and casts follow WBN Style Guide v3.1 unless explicitly overridden for a specific publication. The palette, typography, border radii, and spacing scale are non-negotiable.

2.1 — Colour & Background
R-01
No Blue Bleed on Page Background Confirmed
The body background is always a neutral page colour (#f0f4f7). The Robin Blue gradient (--bg1 → --bg2) lives exclusively inside the .shell container. It must never be applied to the body, html, or any wrapper outside the shell.
R-02
Shell Gradient — Interior Only Confirmed
Shell background: linear-gradient(180deg, #ffffff, #eaf8fe). Panel gradient applied to cards and conference panels: linear-gradient(180deg, var(--panel1), var(--panel2)). All borders use var(--robin-dim).
2.2 — Typography
R-03
Font Stack — Three Roles Confirmed
Arial — primary UI and body. Oswald 700 — display headings, mastheads, section labels, column headers (uppercase, letter-spaced). Source Code Pro — timestamps, metadata, version stamps, version numbers, tickers. No other fonts without explicit approval.
2.3 — Tab / Navigation Buttons
R-04
Active Tabs Use Robin Blue Fill Confirmed
Active tab buttons use background: var(--robin) with white text and a var(--robin-dark) border. Inactive tabs are transparent with var(--muted) text. Hover state: background: var(--robin-faint) with var(--robin-dark) text. Border radius: 10px.
2.4 — Date Display
R-05
Dynamic Date — Top Right of Shell Header Confirmed
The shell header always shows today's date in the top right, generated dynamically via new Date() on page load. Format: Tue, May 13, 2026 (Day abbreviation, Month Day, Year). Rendered in Source Code Pro, 11px, var(--muted). Never hardcoded.
2.5 — Version Stamp
R-06
Version Stamp Format — Footer Left Confirmed
Every widget footer includes a version stamp in the bottom left. Format: WBN [WidgetName]™ v[X.X] | [Context]. Examples: WBN SportsCast™ v1.1 | WNBA 2026 · WBN WeatherCast™ v2.0 | Delta, BC. Source Code Pro, 10–11px, var(--muted).

§3 Layout Standards Confirmed

3.1 — Admin Position
R-07
Admin Always Below Public UI Confirmed
The Admin shell is always rendered in the DOM after the public-facing widget shell, so it appears below it on the page. The Admin toggle button lives in the page header (top right). The Admin shell is hidden by default and toggled open/closed without displacing the public UI above it.
R-08
Admin Shell — Visual Treatment
Admin shell uses a white/light background (#ffffff → #f5fafd), distinct from the Robin Blue shell. Border: 1px solid #d0dde6. This visually separates admin from public content while staying within the WBN family aesthetic.
3.2 — Sponsor Slot
R-09
Every Widget Has a Sponsor Slot Confirmed
The public shell footer always includes a sponsor button (bottom right). Default label: "Sponsor". Configurable via Admin → Sponsor Config. Sponsor name, URL, and optional tagline are editable and persisted to localStorage.

§4 Admin Standards Confirmed

All WBN widgets include an admin panel. The following rules apply to every admin implementation.

R-10
Password Gate Confirmed
Admin panel is always behind a password. Default password defined as a constant in the widget JS (e.g. var DEFAULT_PW = 'wbn2026'). Stored and overrideable in localStorage. Login state persisted to localStorage with key pattern wbn_[widget]_authed. Enter key triggers login.
R-11
Standard Admin Cards Confirmed
Every admin panel includes at minimum: Site Config (publication name, cast name, context label), Sponsor / Advertising (name, URL, tagline), Admin Password (change password with confirm), and Full Data Backup (download all / restore from backup). Widget-specific cards are added after these four.
R-12
Save Feedback Flash Confirmed
Every Save button shows inline status feedback ("✓ Saved" / "✗ Error") next to the button in Source Code Pro 10px. Clears automatically after 3 seconds. Success uses var(--success), error uses var(--danger).

§5 Foundation Software Standard — Data Portability Confirmed

This is the core infrastructure standard. Every WBN widget must support data portability so that when a new version of the widget is deployed, all previous configuration and data can be restored from a backup file without manual re-entry.

5.1 — Per-Area Download / Upload
R-13
Each Admin Card Has Its Own Download & Upload Confirmed
Every admin card that manages persistent data includes a ↓ Download button (green) and an ↑ Upload button (amber) in the card header. Download exports that card's data as a timestamped JSON file. Upload restores from a previously exported file. This allows granular restoration of individual areas without overwriting everything.
R-14
Full Backup Card — Download All / Restore All Confirmed
The Full Data Backup admin card downloads all widget data into a single JSON file containing every area's data, plus a version number and ISO timestamp. On restore, each area's data is written back to localStorage and applied to the UI immediately. This is the primary upgrade migration tool.
5.2 — Backup File Format

All backup files follow this structure to ensure forward compatibility:

// Full backup format (wbn-[widget]-full-backup-YYYY-MM-DD.json) { "version": "1.1", "exported": "2026-05-12T14:30:00.000Z", "config": { /* site config object */ }, "sponsor": { /* sponsor config object */ }, "[area]": { /* any additional widget-specific data */ } } // Per-area format (wbn-[widget]-[area]-YYYY-MM-DD.json) { "area": "config", "data": { /* the area's data object */ }, "exported": "2026-05-12T14:30:00.000Z" }
5.3 — localStorage Key Convention
// Pattern: wbn_[widget]_[area] wbn_sc_config // SportsCast site config wbn_sc_sponsor // SportsCast sponsor wbn_sc_pw // SportsCast admin password wbn_sc_authed // SportsCast auth state wbn_wc_config // WeatherCast site config

§6 JavaScript Standards Confirmed

R-15
IIFE Wrapping — All Widget JS Confirmed
All widget JavaScript is wrapped in an IIFE: (function () { 'use strict'; /* ... */ })(); — prevents global scope collisions when multiple widgets share a Ghost page.
R-16
No Inline Event Handlers Confirmed
Never use onclick=, onchange=, or any inline event attributes. All event binding via addEventListener. Dynamic lists use event delegation on a parent container. Ghost's CSP blocks inline handlers silently.
R-17
localStorage — Always try/catch Confirmed
All localStorage read/write operations are wrapped in try/catch. Provide fallback values on failed reads. Failed writes surface as a flash error, not a thrown exception.
R-18
Responsive — Single Column on Mobile Confirmed
All grid layouts collapse to single column at max-width: 600px (standard widgets) or max-width: 760px (wide layouts). No horizontal scroll on any viewport.

§7 Naming & Versioning Confirmed

Widget Name Format

WBN [Name]Cast™ or WBN [Name]Stream™

Examples: WBN SportsCast™ · WBN WeatherCast™ · WBN NewsCast™ · WBN DealStream™

Version Stamp Format

WBN [WidgetName]™ v[X.X] | [Context]

Examples:
WBN SportsCast™ v1.1 | WNBA 2026
WBN WeatherCast™ v2.0 | Delta, BC

File Naming Convention

wbn-[widget]-[publication].html

Examples:
wbn-sportscast-delta.html
wbn-weathercast-surrey.html

Backup File Naming

wbn-[widget]-full-backup-YYYY-MM-DD.json

Examples:
wbn-sportscast-full-backup-2026-05-12.json
wbn-sportscast-config-2026-05-12.json

§8 Open Items & TBD Draft

The following areas need decisions before they can be codified as rules.

TBD-01
Multi-Widget Pages — Shared vs. Isolated localStorage TBD
When multiple casts appear on the same page (e.g. SportsCast + WeatherCast on Delta City News), should admin auth be shared or per-widget? Current implementation is per-widget. Needs decision.
TBD-02
WLA / BC Lacrosse — SportsCast Extension Standard TBD
SportsCast will expand to include WLA, BCJALL, and other BC leagues. Determine tab structure, league selector pattern, and whether each league is a separate cast or a tab within a single SportsCast shell.
TBD-03
Publication-Specific Overrides TBD
Delta City News, Surrey City News, Langley City News, Vancouver City News may need publication-specific colour accents or logos in the shell header. Define an override pattern that doesn't break WBN v3.1 compliance.
TBD-04
Admin — Export to Google Drive TBD
Future: backup files should optionally push directly to a connected Google Drive folder rather than browser download. Requires MCP integration. Placeholder for future Foundation Standard update.

§9 Changelog

Version Date Changes Status
v0.1 May 12, 2026 Initial draft. Established §1–9. Rules R-01 through R-18 confirmed from SportsCast–Delta development session. TBD-01 through TBD-04 identified as open items. Draft
WBN Foundation Guide™ v0.1 | WBN Global Inc.™ Living Document — Update each session