#>settings_surface
browser-local state author workflow developmental climate runtime observatory

Runtime observatory

Settings

Preferences are saved in this browser. Start with a preset, adjust workflow or comfort, then inspect the runtime only when you need to.

Treat settings like reading weather: quick to scan, easy to change.

  • preset
  • workflow
  • climate
  • density
  • inspect

Fast path: preset, workflow, comfort, then deeper tuning only if something still feels off. Workflow describes the writing task; climate describes the attention posture.

The page starts readable, then reveals more structure as the surface becomes familiar.

Use this page

to shift comfort, workflow, and semantic visibility without changing the public shape of the site.

Best for

quick tuning first, deeper inspection later.

Leave with

a calmer or richer surface, readable local state, and clearer reset paths.

^"quick_start"{

Quick Start

These are the fastest useful controls. Choose a preset for an immediate baseline, then set author workflow, climate, reading comfort, or appearance before opening the deeper registers below.

Quick presets

Choose a whole-site starting point

Presets apply coherent baselines so uncurious visitors get an immediate, useful surface while active learners and playful wanderers have clear starting points to explore or tune. You can still refine every setting afterward. Tap or click a preset to feel the difference instantly across desktop, tablet, or phone.

Bespoke modes

Choose a reader, builder, or inspector posture

Reader stays calm. Builder exposes structure. Inspector adds the debug layer. Lab pushes further into motion and palette bias.

Author workflow

Choose what kind of writing work this surface should support

Author workflow is separate from climate. Draft, revise, polish, publish, and archive describe the writer’s task; climate describes the attention posture around that task.

author mode: draft

Writing recipes

Use task-first bundles

These recipes combine author workflow, climate, reading mode, and semantic visibility into common writing states.

Runtime load

Control when and how modules discover and activate

The runtime already exposes rich timing policy (normal / eager / defer / quiet / manual) plus per-module overrides. Use these to change targeting and discovery feel. The new discoverRuntimeLoad() surface makes the current decision inspectable.

Try window.__SPW_SITE__.discoverRuntimeLoad() in console

Live tuning

Play with variants, currents, and nearby companions

Pinch over the examples below (or use the scale controls) to change type size. Tap the cards to cycle component variants. The "current" cluster (density + posture + wonder + load) can surface extra narrative handles — a small taste of runtime modification as storytelling.

Primary variant

Tap me to cycle variants. Long copy here demonstrates nearby play — swipe or tap edges for companion actions.

Reference variant

These companions are "fries at the bottom" — low-friction extras that appear or react based on your current semantic cluster.

Current cluster responds to your tuners + gestures (pinch, tap, density, load posture)

Common fixes

Apply practical bundles

Use these when the site feels too loud, too dense, too difficult to read, or too opaque to inspect.

Current state

Read the active state

This is the fast feedback loop: the current state should stay legible while you experiment.

author: draft climate: orient mode: auto pack: neutral paper memory: nearby

Deviation register

What differs from the authored default

Every setting that deviates from the authored default is listed here and can be reset individually.

deviations: 0
^"runtime_preferences"{

Tune the Site

Use this register when the quick-start cards are not enough. The categories move from writing task and attention posture into appearance, reading comfort, accessibility, semantic detail, and diagnostics.

Author Workflow

Author workflow answers: what is the writer doing? It changes author-facing tokens such as annotation strength, margin presence, thread density, draft privacy, and publication readiness. It should not replace developmental climate.

Writing mode
Task bundles

These apply multiple settings at once while keeping the full form editable.

Developmental Climate

Developmental climate answers: what kind of attention is this surface inviting? It should behave like editorial weather: hints, seams, annotations, connections, and offering cues rather than a full-page theme.

Climate
Climate cycle
Developmental indicators
Depth indicators
Appearance
Color mode
Theme pack
Dimensional resonance
Color tuner
Pedagogical flavor
Operator saturation
Grain intensity
Interface Physics

Tune structural attributes for components across the site: material, affordance, contour, stroke, density, field resonance, and motion intensity.

Base metamaterial
Base affordance
Component density
Contour profile
Stroke profile
Field resonance
Animation intensity
Spacing tuner
Layout tuner
Interaction tuner
Component lifecycle
Pedagogical Flavor

A pedagogical flavor is the metaphor family that helps concepts become memorable across routes. Culinary is the current strong flavor because recipes, mise en place, reduction, sauce, soup, fermentation, and service make software and RPG concepts tangible. Later, another topic can take the lead without removing the underlying semantic markup.

Current flavor: culinary technique

Tune semantic density, field resonance, palette, and runtime posture to decide how strongly recipe names and technique vocabulary should echo while you read.

Mise en place
Preparation as cognition before performance.
Reduction
Compression that makes flavor, evidence, or copy stronger.
Emulsion
Binding unlike materials so they stay coherent under motion.
Fermentation
State change through conditions, patience, culture, and time.
Soup system
Integration, leftovers, base notes, and repair after a session or sprint.
Sauce recovery
Use byproducts, drippings, fragments, and residue as the next artifact seed.
Typography
Font size scale
Font size preset
Line spacing
Monospace font
Typeset mode
Reading groove
Scroll cadence
Pinch text size

This writes to the same browser-local fontSizeScale setting used by the shell controls.

Accessibility
Reduce motion
High contrast
Animation throttling
Interface Chrome
Surface map
Console
Viewport activation
Header opacity
Show footer
Show spec pills
Image lazy loading
Semantic Detail

Tune how much the site explains itself: density, operator presentation, metadata, handles, relation, nesting, copy depth, and whether recent wonder stays local or keeps echoing through nearby surfaces.

Semantic density
Enhancement level
Infospace complexity
Operator presentation
Operator highlighting
Narrative mode
Conceptual guides
Literacy handles
Relational visualization
Wonder memory
Dimensional breadcrumbs
Fractal nesting
Implementation mutations
Developer
Debug mode
Show frame metadata
Verbose logging
Internal Runtime / Bus

Power-user diagnostics for runtime coordination. Reader-facing defaults stay on native CSS flow and sizing; these controls only change how much measured runtime state is surfaced for inspection.

The same model is also available in the browser console through window.spwCompose.controls.pageState, window.spwCompose.controls.frameState, and window.spwCompose.controls.pageHooks. Component composition is available through window.spwCompose.controls.composition. Gesture discovery now lives at window.__SPW_SITE__.gestures and window.spwRuntimeAudit.gestures(), while route and component context still live under window.__SPW_SITE__.routes and window.__SPW_SITE__.samples. This all pairs with query values such as diagnostics=basic, log=layout-shift, or spw-data-page-state=interactive for repeatable QA, extension workflows, and page play.

Bus diagnostics
Mirror bus events to console
Bus history size

Console snippets

Hobbyists and extension authors can paste these into DevTools to inspect the same shared runtime model the site uses for settings, query recipes, and page play.

Used this way, the console becomes a discovery loop: list hooks, inspect state, focus a section, and build familiarity with the page in small, repeatable steps.

window.__SPW_SITE__.gestures.contract()
window.__SPW_SITE__.gestures.list()
window.__SPW_SITE__.gestures.inspect('.frame-sigil')
window.spwRuntimeAudit.gestures()
spwCompose.controls.pageState.snapshot()
spwCompose.controls.pageState.scheduleArrival(spwCompose.controls.pageState.arrival.RETURNING)
spwCompose.controls.pageHooks.list()
spwCompose.controls.pageHooks.focus('runtime-diagnostics')
spwCompose.controls.pageHooks.pulse('query-recipes')
spwCompose.controls.composition.inspect('#runtime-map')
spwCompose.controls.composition.snapshot().map(box => box.story)
>"applied_state"

Current Runtime State

A readable local summary of what the site is currently expressing in this browser.

author workflow draft
developmental climate orient
semantic density minimal
narrative mode off
wonder memory nearby
contour profile balanced
stroke profile structural
field resonance field
dimensional resonance route
base metamaterial glass
base affordance read
component density soft
enhancement level minimal
color mode auto
theme pack neutral paper
line spacing normal
typeset mode default
reading groove on
scroll cadence on
pinch text size on
bus diagnostics off
~"settings_notes"

Local Notes + Reset Paths

This section is the practical cleanup shelf for both active learners (who want to save notes, inspect state, and restore precise bundles) and playful wanderers (who want a single "reset to calm" without fear). Save local notes, understand reset granularity, and choose the lightest touch that matches your curiosity level.

Local note register

Scratch notes, route ideas, and reminders can stay in this browser and come back later.

0 saved in this browser.

Latest note: No local note yet.

Latest save: not saved yet

No local notes yet. The footer quick-capture seam and this register write to the same local shelf.

Reset guide

Reset model

Use the deviation register for one-setting resets. Use the form reset button for authored defaults. Use browser storage tools only when you want every local trace gone.

  • Single-setting reset: available in the deviation register.
  • Full settings reset: data-site-settings-reset.
  • Local notes: managed separately by the local note register.
  • PWA/cache state: reported below.
~"stored_data"

Saved Data + App Status

These readouts describe what this browser is doing locally.

Read this section

Start with app status, then inspect persistence

Check install, service worker, cache, and connection first. Then inspect what will remain after a refresh or return visit.

Clear safely

Use the smallest honest reset

Clear one setting first, then one register. Use browser-wide clearing only when you want every local trace gone.

install mode Checking…
service worker Checking…
cache Checking…
connection Checking…

Browser-local registers

Persistence register

These registries persist beyond the current page. Each one shows its key, writer, scope, and clear path.

0 active registries in this browser.

Total stored items: 0

Last persistence change: not recorded

^"runtime_map"{

Runtime Map

Settings are not isolated form fields. They flow into datasets, CSS variables, event bus diagnostics, and progressively enhanced modules.

1. Normalize

Stored values are merged with defaults and checked against allowed options.

normalizeSiteSettings(storage.get())

2. Derive

Settings become author, climate, typography, motion, grain, ecology, semantic, field, and wonder modifiers.

deriveArchitecturalModifiers(settings)

3. Apply

Datasets and CSS variables are written to the document root and body.

document.documentElement.dataset.spw*

4. Emit

Canonical bus events announce settings, author mode, development shifts, and deviations.

bus.emit("settings:changed", settings)

Query recipes

These links use the same query contract as the runtime. Reader mode keeps the native CSS defaults quiet; builder mode is a precise low-theatrics audit surface; inspect and lab mode add progressively more visible resonance for practice, screenshots, and comparison.

When this site is discovered out of context, these recipes are intended to act as landing modes: a calm reader surface for casual browsing, a precision surface for debugging what mounted, and resonant lab surfaces for hobbyists, QA, narrators, and language models that need a page with a clear console story.

Current query: ?view=inspect&meaning=inspect&debug=css,layout&diagnostics=basic&log=site-settings,layout-shift&log-level=debug&module-audit=on&module-visuals=on

^"token_navigator"{

CSS Token Navigator

The settings model ultimately spends values through token families. These cards are a local index for the main runtime token groups.

Author + Climate Tokens

Author workflow and developmental climate now expose separate token families.

  • --author-annotation-strength
  • --author-publication-readiness
  • --climate-outline-strength
  • --climate-connection-strength
  • --climate-publication-strength
@ author controls ? climate controls

Typography Tokens

Font size scale, preset multiplier, line spacing, and monospace choice.

  • --site-root-font-size
  • --site-line-height
  • --site-mono-font
^ typography controls

Motion Tokens

Reduce motion, animation intensity, throttling, and derived duration scales.

  • --duration-instant
  • --duration-fast
  • --duration-base
  • --duration-slow
~ motion controls

Semantic / Ecology Tokens

Semantic density, enhancement level, infospace complexity, operator presentation, and memory.

  • --spw-semantic-density-factor
  • --spw-enhancement-factor
  • --spw-infospace-factor
  • --spw-operator-saturation-factor
  • --spw-wonder-memory-strength
? semantic controls

Material Tokens

Grain intensity, header opacity, field response, contour, and structural stroke.

  • --grain-opacity
  • --site-header-opacity
  • --shape-surface
  • --line-mid
@ material controls
^"data_structures"{

Underlying Data Structures

The page is backed by registries and derived structures, not isolated form fields.

Defaults

Canonical fallback values for the full runtime settings model.

DEFAULT_SITE_SETTINGS

Options Registry

Allowed values per setting, used to normalize and reject invalid state.

SETTING_OPTIONS

Presets

Named bundles like Hearth, Loom, Workshop, and Access.

PRESETS

Author Workflows

Draft, Revise, Polish, Publish, and Archive. These describe the writer’s task and drive author-facing tokens.

AUTHOR_WORKFLOW_DEFINITIONS

Developmental Climates

Orient, Anchor, Weave, Rehearse, and Offer. These describe the attention posture around the work.

DEVELOPMENTAL_CLIMATES

Derived Modifiers

Typography, motion, grain, author workflow, climate, ecology, and semantic multipliers.

deriveArchitecturalModifiers(settings)

Document State

Normalized datasets and CSS variables applied to document.documentElement.

root.dataset.spw*
@curriculum_control

Curriculum Management

Manage your Consideration Register. You can save your current progress as a checkpoint or reset the substrate to its default un-popped state.

@spell_board

Spell Board

Gathered curriculum ingredients appear here as a technical spell.

Charge preview

?gesture_charge { input: "hover | focus | hold" return: "semantic preview" }

Project region menu

#>gesture_project { cue: "? | Alt+Enter | long hold" return: "region menu" }

Settle the layer

@gesture_settle { cue: "Escape" return: "focused prose" }

If you are imagining RPG Wednesday enchantments, think of these as three small spell families: charge to inspect a sigil without commitment, project to open the brace or region menu on purpose, and settle to close the layer cleanly and keep the story moving.

$cognitive_trace

Cognitive Web Trace

A transparent interpretation of your technical resonance. As you develop care and focus through the technical substrate, your subjective frame settles into this operable spell.

^"cognitive/web"{
  nodes: 0
  history: []
  resonance: "substrate_definition"
}

Support Card Payment Options

Choose which payment methods appear on the support card. One must always remain active.