#>design

structural vocabulary blocks

Component Options / Vocabulary

Component Glossary

A registry of the primary CSS abstractions used across the Spwashi architecture. Not every component needs an arbitrary name; reusing these patterns keeps the site legible to the renderer and accessible for inspection.

macro layout wrapper

.site-frame

The primary block-level section element <section class="site-frame">. These define large vertical stopping points down the scroll. They often host id attributes and data-spw-* rendering attributes to bias their local contents.

Supports .frame-heading and .frame-topline composition.

primary legible surface

.frame-card

The standard semi-transparent or material card. It usually implies backdrop-filter blur (when acting as glass) or warm opacity (when acting as paper). It serves as an isolated thought space.

Sample affordance

sub-surface blocks

.frame-panel

A flatter, more structural tile. Commonly placed inside a .frame-grid to form reference tables or multi-column indices like this one.

the functional unit

.operator-chip

The standard ~chip format for interactions, anchors, state toggles, and metadata hints. Operator chips dynamically adjust color based on `data-spw-operator` syntax (e.g. #> teal frames vs ? violet probes).

diagrams & vectors

.spw-svg-figure

The host wrapper for inline SVGs. Contains a scoped viewBox and exposes data attributes necessary to tie the SVG stroke/flow lines to the page's color resonance (e.g. inheriting the --craft-accent token).

the text renderer output

.pretext-flow

A readable annotation surface that handles text posture, wrapping, and cache volatility. Often accompanied by .pretext-flow-lines to split syntax decorators (like `#>` or `%`) from the prose.

grid systems

.frame-grid

The robust CSS Grid layout class that handles most interior spacing. Can be modified with variants like .frame-grid--dense or .frame-grid--2up for semantic breakpoints.

hero image wrapping

.image-study

Usually combined with .topic-photo-card. Provides a rich frame for surfacing screenshots or artwork, complete with accent palettes and responsive projection hints.

@ "interactive_physics_lab"

Interactive Physics Lab

Use the controls below to project different physical states onto this specimen. These buttons communicate with the site-level SiteSettingsManager through data-site-setting-set attributes.

Physical Density

Operator Resonance

Material Kind

#> active specimen

Physics Response Test

This card responds to global density and resonance intensity settings. Try toggling the buttons to see the spatial grammar adjust.

The data-site-setting-set attribute allows any element to act as a remote control for the Spw runtime physics engine.

? "operator_intent_registry"

Operator Intent Registry

Operators are the primary semantic markers in Spw. Each one carries a specific functional intent and a "wonder" category that drives sensory feedback (haptics, sound, and resonance).

Op	Type	Wonder	Intent
#>	frame	orientation	orient a stable structural unit
^	object	memory	hold an inspectable structure
?	probe	inquiry	open an investigation or inquiry
~	ref	resonance	point without forcing structural change
@	action	projection	commit a local change or effect
<	topic	resonance	name or relate a conceptual cluster
*	stream	resonance	connect to an event-like flow

^"component_anatomy_slots"

Slot-Based Composition

Most Spw components follow a strictly ordered slot contract. This consistency allows the runtime to reliably find sub-elements for animations, metadata projections, and accessibility labels.

#> header / topline slot

Component Body Slot

The primary content area for prose, data, or media controls. It handles text-wrap and local density.

figure / media slot

Header: Navigation, sigils, and mode switches.
Meta: Contextual pills, timestamps, or status hints.
Body: The core legible content.
Figure: Images, SVG diagrams, or canvases.
Actions: Primary interaction chips or commit handles.
Footer: Secondary metadata or citation links.

^"brace_grammar_specimens"

Brace Grammar Forms

The Spw language uses brace delimiters to anchor specific semantic intentions. We project these into HTML using data-spw-form="brace".

^ objective form

Objective braces ^"concept" imply a stable, shared truth or a schema definition. The visual grammar uses a hard vertical rail and a more technical posture.

data-spw-brace="objective"

% subjective form

Subjective braces %"opinion" imply a personal trace, a poetic deviation, or a temporary state. The visual grammar suggests a more fluid, organic connection.

data-spw-brace="subjective"

^"data_attribute_decoration"

Data Attribute Distinction

We rarely invent new CSS classes for state or variations. Instead, we stack data-spw-* attributes onto the base components defined above. This makes the surface readable to CSS selectors without bloating the HTML with ad-hoc BEM modifiers.

Example 1: Paper Article

By declaring [data-spw-metamaterial="paper"] and [data-spw-affordance="read"] on a block, the component becomes opaque, warm, and static. It tells the browser (and the reader) to settle in for uninterrupted prose reading rather than active interaction.

<article class="frame-card"
  data-spw-metamaterial="paper"
  data-spw-context="reading"
  data-spw-affordance="read">

Example 2: Inspectable Glass Tool

Using [data-spw-metamaterial="glass"] yields a translucent blur effect. Combined with [data-spw-affordance="inspect"], the block invites hover, ready to reveal contextual traces, metadata borders, or deeper layered hints.

<aside class="frame-card"
  data-spw-metamaterial="glass"
  data-spw-context="analysis"
  data-spw-affordance="inspect">

Example 3: Active Input Field

When an area contains active widgets or tests, tagging it with [data-spw-metamaterial="field"] sets high contrast bounds, while [data-spw-affordance="tune"] prepares the component to visibly react to direct manipulation.

<div class="frame-panel"
  data-spw-metamaterial="field"
  data-spw-context="signal"
  data-spw-affordance="tune">