Runtime behavior should be inspectable before it becomes configurable.

Performance puppetry

For live use, runtime behavior can become puppetry: query strings set the stage, scripts pull named strings, CSS changes disposition, SVG art carries visible figures, and logs narrate which controller moved which surface.

const puppet = spwCompose.logger('stage-puppet', {
  role: 'performance-controller',
  owns: 'runtime-lab',
  metaphor: 'puppet-string'
});

puppet.describe();
puppet.reflow('#runtime-lab', 'interaction', { scope: 'stage' });

SVG art as a controllable surface

SVG belongs in this model because it can be semantic markup, visual art, and a live puppet surface at the same time. Hosts can expose named palettes, brand color overrides, pointer modes, and repaint cost so screenshots remain interpretable by people and image models.

import {
  applySvgQueryTunability,
  SPW_SVG_PALETTES
} from '/public/js/spw-compose.js';

applySvgQueryTunability(document);
console.table(SPW_SVG_PALETTES);

open tuned SVG lab

Query tuning links

These links keep behavior visible in the URL so a tester, teammate, or language model can see the configuration without opening storage.

Console contract

The portable bundle exposes a deliberate console API. Install it when a lab page needs inspection without mounting the whole site runtime.

import { installSpwCompositionConsole } from '/public/js/spw-compose.js';

installSpwCompositionConsole(window);
spwCompose.query(document.documentElement);
spwCompose.inspect('#runtime-lab');

Namespaced logging

Loggers stay quiet unless debug mode or a namespace query enables them. Each logger can describe its role, metaphor, owned surface, and target snapshot.

?spw-log=spw-compose,spw-core&spw-log-level=debug

const logger = spwCompose.logger('demo-spell', {
  role: 'query-lab',
  owns: 'runtime-lab'
});

logger.describe();
logger.trace('after query disposition', '#runtime-lab');

Reflow reasons

When behavior can move layout, write the reason and tuning scope. The point is not to prevent reflow; it is to make the cause inspectable.

spwCompose.reflow('#runtime-lab', 'density', {
  scope: 'document',
  tuning: { density: 'compact' }
});