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.

CSS composition bundle

/public/css/spw-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/spw-compose.css">

Direct file: spw-compose.css

JavaScript composition bundle

/public/js/spw-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/spw-compose.js';

Direct file: spw-compose.js

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/spw-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');

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;
}