CSS Workbench

A bookmarklet-compatible, panel-based CSS customization workbench for web pages. Floating Photoshop-style panels sit above any page; an XML manifest describes the application; a DOM-style kernel manages state, history, and persistence.

The current build targets Bootstrap-compatible CSS output and ships four design labs:

Engine	What it does
SkeuroForge	Physically-based skeuomorphic surfaces — relative-color bevel, inset/raised/letterpress modes, layered box/text shadows, material BRDF (ceramic, metal, enamel, rubber, polymer)
Gradient Builder	Bootstrap-variable-aware gradient ramps with okLAB-ish interpolation and three-stop control
VeilTexture Forge	Procedurally generated tiling textures exported as CSS data: URLs (speckle, lines, grid, dither, paper grain, brushed metal, cellular)
Shadow Lab	Layered outer/inner/text-shadow composer with six named presets (letterpress, neumorphic, raised card, floating modal, embossed badge, tight crisp)

Quick start

npm run serve

Open http://127.0.0.1:48187/ in a browser, then click Launch Workbench. The local demo uses dynamic imports and a local Panel API shim — no publishing required.

Run the syntax/import check at any time:

npm test

Keyboard shortcuts

Key	Action
P	Pick element (crosshair mode)
A	Apply current CSS to the page
C	Copy CSS to clipboard
S	Copy SCSS to clipboard
+ / -	Zoom preview in / out
0	Reset preview zoom
Ctrl/⌘ Z	Undo
Ctrl/⌘ Y / Ctrl/⌘ Shift Z	Redo

Shortcuts ignore focused form inputs unless combined with Ctrl/⌘. Scroll over the Graphics panel preview to zoom with the mouse wheel.

Zoom

The Graphics panel preview supports three zoom methods:

• Scroll wheel — hover over the preview and scroll
• Toolbox buttons — zoom-in / zoom-out / reset in the toolbox panel
• Keyboard — + / - / 0

Zoom range: 40 % – 300 %. The stage background stays fixed; only the content scales.

Bookmarklet model

The bookmarklet is a tiny loader — it injects a <script type="module"> pointing at a CDN-hosted boot.js and passes the manifest URL via a dataset attribute. It does not contain the app.

javascript:(()=>{const s=document.createElement('script');s.type='module';
s.src='https://your-cdn/src/boot.js';
s.dataset.manifest='https://your-cdn/manifests/css-workbench.xml';
document.documentElement.append(s);})();

Replace https://your-cdn with your CDN root after deployment.

XML-first runtime

manifests/css-workbench.xml is the application manifest — parsed by DOMParser at boot time, before any modules load. It declares:

• dependency candidates (Panel API CDN, local shim fallback)
• panels (id, title, module, position, size, plugins)
• tools (pick, apply, copy)
• engines
• Bootstrap export variable mappings
• virtual file mounts

Persistence

State and user-saved presets are written to localStorage under cssps:state:v1 and cssps:user-presets:v1. Disable with { persist: false } at boot. Use Reset in the Presets panel to restore defaults without clearing user presets.

History

Each commit() pushes a snapshot onto a bounded history stack (default 80 entries). Rapid commits within a 320 ms window coalesce into a single undo step so slider drags don't flood the stack.

Generated output

The Export panel produces four formats:

Tab	File	Description
CSS	workbench.css	CSS custom properties (--bs-body-bg, --bs-card-bg, --bs-primary, …) plus .cssps-* utility classes
SCSS	workbench.scss	SCSS variables ($body-bg, $card-bg, $border-color, …)
custom.scss	_custom.scss	Bootstrap _custom.scss override layer for the standard Sass build
Tokens	tokens.json	Full workbench state snapshot

This is not a Bootstrap compiler. It is a visual authoring layer that exports Bootstrap-compatible CSS/SCSS for further integration.

Project layout

bookmarklet/          Tiny bookmarklet loader.
index.html            Bootstrap demo page and dynamic-import launch button (GitHub Pages root).
manifests/            XML application manifest.
src/adapters/         Panel API loader and local fallback panel shim.
src/engines/          CSS / color / texture / shadow / export engines.
src/kernel/           Signal, Scope, AppKernel, persistence, shortcuts.
src/manifest/         XML manifest reader.
src/panels/           Compact floating property panes.
src/styles/           Panel content CSS (injected at runtime).
src/tools/            Element picker, CSS applier, clipboard export.
tests/                Syntax check (Node) and smoke test (browser).

Design principles

• The page is the document; panels are tools floating above it.
• The bookmarklet is a bootloader, not an application bundle.
• The manifest maps the application before code runs.
• UI code is compact and DOM-native — no framework, no bundler.
• State is centralized; panels are co-dependent subscribers.
• Generated CSS follows Bootstrap naming conventions where applicable.

Caveats

• Cross-origin / CSP restrictions can prevent bookmarklets from loading external modules on some pages.
• The local demo uses the Panel API shim. When the real panel-api CDN import succeeds, the same panel.open() calls are used.
• The texture generator runs in the browser; the Node syntax check imports the module but skips the canvas execution path.
• ZUI in this prototype is a workbench preview zoom, not a full framed-page editor. The architecture leaves room for panel-api/zui integration.