Standalone bundles should teach composition, theming, and browser behavior without carrying the whole site.

Browser wonder

A browser is an unusually generous runtime: markup can stay readable, stylesheets can express a worldview, and scripts can add behavior without owning the whole document. The portable bundle should preserve that wonder by making extension points legible in the source.

Wonder here is operational: data attributes, feature gates, and mount timing should remain auditable after the bundle leaves this site.

When you fork a bundle, keep the contracts and drop the chrome — wonder survives as readable structure, not as a copied theme lock-in.

Specimen · feature partial theatrics

Tune presence, schedule, and theatrics in situ

This route already declares feature-discovery on the body. Clusters with data-spw-feature get field-guide ornaments when that module mounts. Enhancement climate (live) changes how loud those ornaments feel; session feature lab (reload) changes whether optional modules are eligible; orchestration queries make mounts and loading ecology phases visible. Catalog timing stays in code — never force theatrical partials to IMMEDIATE.

CSS composition bundle

/public/css/compose.css imports tokens, typography, grammar, components, handles, and light effects. Treat it as a disposition: a metaphilosophical bias toward readable surfaces, visible state, and calm interaction. It leaves out route surfaces, shell chrome, and ornament so another page can keep its own layout.

<link rel="stylesheet" href="/public/css/compose.css">

Direct file: compose.css

JavaScript composition bundle

/public/js/compose.js exports selector contracts, dataset/style writers, interaction-loop records, palette helpers, and attention architecture contracts without mounting site.js. Treat scripts here as spells: small repeatable gestures that change the document in inspectable ways.

import {
  COMPONENT_SELECTOR,
  writeDatasetValue,
  createLoopRecord,
  getPaletteResonanceSwatches
} from '/public/js/compose.js';

Direct file: compose.js

Starter inventory

New-site and component experiments should begin by inventorying the portable layer. The local command verifies the standalone entrypoints, referenced imports, component CSS, design docs, and the Spwashi-specific surfaces that should stay behind by default.

npm run starter:inventory -- --check

Start with the inventory, then choose one component specimen from the component glossary.

Expressive register sample

Registers let portable components show approach, distance, and arrival through a shared scalar field instead of page-specific styling.

<section data-spw-register="depth">
  <span data-spw-express data-spw-approach="arrival">arrival</span>
</section>

Console instrumentability

The composition bundle includes small logging and inspection helpers for browser-console work. They do not mount UI by themselves; they expose a deliberate console surface for explaining what a script spell touched.

import {
  installSpwCompositionConsole,
  markInstrumented
} from '/public/js/compose.js';

installSpwCompositionConsole(window);
markInstrumented('[data-spw-kind="card"]', 'demo-spell');
spwCompose.inspect('[data-spw-kind="card"]');

Query disposition

Documentation and demos can opt into URL-driven tuning. Query parameters can set CSS variables, semantic data attributes, palette resonance, tuning attributes, and reflow reasons.

?spw-palette=craft
&spw-color-active-op=%23008080
&spw-var-shape-component=8px
&spw-log=spw-compose
&spw-tune-density=compact
&spw-reflow=density

CSS and SVG learning path

The portable files should be useful for people who learn by inspecting a living page. Start with the CSS rule bench to see selector scope, cascade layer, and box model as visible state. Then move to the SVG lab to see how the same variables become paths, nodes, labels, and screenshot-ready diagrams.

Start here: CSS rule bench, CSS variable lab, SVG tunability.

spwDesignExperiments.inspectRuleBench();
spwDesignExperiments.inspectTokens();
spwCompose.inspect('[data-spw-svg-host]');

Reuse boundary

Use these bundles when the goal is to study or reuse composition primitives. Use style.css and site.js when the goal is to run the complete Spwashi site shell.

Scripts as spells, stylesheets as disposition

The browser is the field where documents become interactive surfaces. A script spell is a small, named composition that produces a visible outcome: tokens set the field, selectors find the target, JS applies the gesture, and CSS reveals the result. A stylesheet carries the disposition of the world: what counts as calm, active, focused, dimensional, readable, or strange.

// field + target + gesture + visible result
writeDatasetValue(card, 'spwCast', 'preview');
const record = createLoopRecord('preview', 'operator');

Spatial gravity bench

Width and height are two independent axes. measure is the inline band; extent is the block band against the viewport. A component can be wide but squat, or narrow but overtall — the pair, not either alone, tells it how to pack. Beyond size, a component also has a position: how near it sits to each viewport edge, and which way it should grow to stay on screen. This grounds the site's #cognitive_gravity_planes idea in real geometry.

Scroll the page and watch each specimen narrate its own gravity. Nothing is hard-coded to a breakpoint; runtime/spatial-gravity.js measures the live rectangle and writes the variant.

Component-local packing

Outer gravity says where a card sits; inner packing says how it arranges itself. This card reads its own width (a container query), not the viewport — drag the handle to narrow it and its regions repack stack → split → feature. A card in a sidebar packs the same way whether that sidebar is on a phone or a wide screen, because it reads its container. The resolved variant is mirrored to data-spw-pack-layout for inspection.

Slot report: this compact specimen maps figure → media, body → body, and actions → actions. Header and footer are intentionally absent rather than silently inferred.

Boundary overlap resolves by salience

When two elements contend for the same pixels, the higher-salience one holds and the lower-salience one yields visibly — it recedes and labels why, instead of clipping silently or fighting over z-index. These two cards overlap on purpose; the ambient one loses to the focal one.

Literate extension contract

Extensible behavior should be explainable from the document outward. Name the field with CSS variables, name the target with selectors or data-spw-* attributes, name the gesture in JS, and leave a visible state that CSS can style.

<article data-spw-kind="card" data-spw-cast="preview">
  ...
</article>

:where([data-spw-cast="preview"]) {
  --spw-local-emphasis: 1;
}