@zakkster/lite-ui-fx 1.9.1 → 1.11.0

package/UIFXHeadless.d.ts

@@ -0,0 +1,30 @@
+// UIFXHeadless.d.ts -- types for the ./headless subpath (E1, decisions/0008).
+// Curates the headless-skin surface: skinHeadless (the mount adapter, in the
+// controller) + the skin family and its sibling registry (in the recipes module).
+
+export { skinHeadless } from './UIFXController';
+export type {
+    SkinOptions,
+    SkinInstance,
+    HeadlessSkinRecipe,
+    HeadlessSkinRecipeFactory,
+    HeadlessSkinDescriptor,
+} from './UIFXController';
+
+export {
+    SwitchSkin,
+    SliderSkin,
+    ProgressSkin,
+    RatingSkin,
+    CheckboxSkin,
+    CheckboxGroupSkin,
+    SelectSkin,
+    MeterSkin,
+    StepsSkin,
+    AccordionSkin,
+    SkeletonSkin,
+    HEADLESS_SKINS,
+    SKIN_META,
+    SKIN_NAMES,
+} from './UIFXRecipes';
+export type { SkinMeta } from './UIFXRecipes';

package/UIFXHeadless.js

@@ -0,0 +1,30 @@
+// UIFXHeadless.js -- the ./headless subpath (E1, decisions/0008).
+//
+// Curates the headless-skin surface: skinHeadless (the mount adapter, which lives
+// with the other mounts in UIFXController.js) + the skin family and its sibling
+// registry (in UIFXRecipes.js). Importing one skin tree-shakes the rest
+// (sideEffects:false).
+//
+// @zakkster/lite-headless is a COMPOSE-TARGET, never a dependency: this module (and
+// the whole package) imports it nowhere. skinHeadless couples to a primitive ONLY
+// through the painted-attribute contract (its docs/CSS_CONTRACT.md) that the skin's
+// `headless.read` parses -- so ./headless works against any lite-headless version
+// honouring that contract.
+
+export { skinHeadless } from './UIFXController.js';
+export {
+    SwitchSkin,
+    SliderSkin,
+    ProgressSkin,
+    RatingSkin,
+    CheckboxSkin,
+    CheckboxGroupSkin,
+    SelectSkin,
+    MeterSkin,
+    StepsSkin,
+    AccordionSkin,
+    SkeletonSkin,
+    HEADLESS_SKINS,
+    SKIN_META,
+    SKIN_NAMES,
+} from './UIFXRecipes.js';

package/UIFXRecipes.d.ts

@@ -1,10 +1,11 @@
 import type {
     UIFXRecipe, UIFXInstance, MountOptions,
     UIFXGroupRecipe, GroupOptions, UIFXGroupInstance, DecorateInstance,
+    HeadlessSkinRecipe,
 } from './UIFXController';
 
 // ===========================================================
-//  RECIPE OPTIONS + FACTORIES (all 56)
+//  RECIPE OPTIONS + FACTORIES (all 57)
 // ===========================================================
 
 /**
@@ -272,7 +273,7 @@ export declare function mountRecipe(
 ): UIFXInstance | UIFXGroupInstance | DecorateInstance;
 
 // ===========================================================
-//  DEFAULT EXPORT -- combined all-56 namespace
+//  DEFAULT EXPORT -- combined all-57 namespace
 // ===========================================================
 
 declare const UIFXAllRecipes: {
@@ -335,3 +336,37 @@ declare const UIFXAllRecipes: {
     SuccessBloom: typeof SuccessBloom;
 };
 export default UIFXAllRecipes;
+
+// ===========================================================
+//  HEADLESS SKINS (E1, decisions/0008)
+//  A sibling registry of RECIPES/RECIPE_META: skins are driven by skinHeadless
+//  (a handle + host), never by mountRecipe (a container), so they are kept
+//  separate and the 57-recipe count is unchanged.
+// ===========================================================
+
+export declare function SwitchSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function SliderSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function ProgressSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function RatingSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function CheckboxSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function CheckboxGroupSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function SelectSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function MeterSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function StepsSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function AccordionSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function SkeletonSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+
+/** A headless-skin meta row. `primitive` names the lite-headless primitive the
+ *  skin is designed to paint. */
+export interface SkinMeta {
+    id: string;
+    name: string;
+    primitive: string;
+    themeable: boolean;
+    motionSafe: boolean;
+}
+
+/** id -> skin factory (null-prototype). Driven by skinHeadless, never mountRecipe. */
+export declare const HEADLESS_SKINS: Record<string, (options?: RecipeOptions) => HeadlessSkinRecipe>;
+export declare const SKIN_META: SkinMeta[];
+export declare const SKIN_NAMES: readonly string[];

package/UIFXRecipes.js

@@ -2548,13 +2548,15 @@ export function DayNightToggle(o = {}) {
 
 /** 13. Reaction Picker -- 5 emoji-style circles that inflate on hover region. */
 export function ReactionPicker(o = {}) {
-    let sizes=new Float32Array(5), selected=-1;
+    let sizes=new Float32Array(5).fill(10), selected=-1;   // seed at the rest radius so frame 0 draws full discs, not radius-0 nothing
     const emojis=['\u{1F610}','\u{1F642}','\u{1F60A}','\u{1F604}','\u{1F929}'];
     // `colors` is the 5-reaction palette; `theme` seeds it. Normalised to 5.
     const base = o.colors ? o.colors
         : (o.theme ? [o.theme.light,o.theme.mid,o.theme.dark,o.theme.light,o.theme.mid] : ['#9999b8','#fbbf24','#fb923c','#f472b6','#ff6b6b']);
     const colors = base.length>=5 ? base : Array.from({length:5},(_,i)=>base[i%base.length]);
     const colors30=colors.map((col)=>col+'30');                  // active fill (was `${color}30`)
+    const REST_FILL='rgba(255,255,255,.10)';                     // at-rest disc: was 4% (near-invisible); 10% so the row always reads
+    const RING='rgba(255,255,255,.22)';                          // hairline ring, theme-invariant: keeps the control legible even if the emoji glyph never paints
     const REACT_LABELS=['MEH','OK','NICE','GREAT','LOVE'];        // was a per-frame array literal
     const FONTS=[]; for(let i=0;i<=48;i++)FONTS[i]=i+'px sans-serif'; // emoji font by rounded size
     return {
@@ -2562,21 +2564,25 @@ export function ReactionPicker(o = {}) {
             const gap=st.w/5;
             const hoverIdx=st.hover?clamp(Math.floor(ptr.x/gap),0,4):-1;
 
+            c.lineWidth=1;c.strokeStyle=RING;   // ring state is constant across the 5 discs -- set once per frame
             for(let i=0;i<5;i++){
                 const active=i===hoverIdx;
                 sizes[i]=lerp(sizes[i],active?16:10,dt*12);
                 const cx=gap*i+gap/2,cy=st.h/2;
 
-                // Circle
-                c.fillStyle=active?colors30[i]:'rgba(255,255,255,.04)';
-                c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();
+                // Disc + hairline ring. The ring is the robustness net: the disc
+                // fill is faint and the emoji may not paint at all (a colour-emoji
+                // font draws its own glyph; a mono/absent font leaves almost
+                // nothing), but a stroked ring always renders, so the control never
+                // reads blank -- on frame 0 or in an emoji-less environment.
+                c.fillStyle=active?colors30[i]:REST_FILL;
+                c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();c.stroke();
 
                 // Emoji face -- font from a const-string LUT. Set an OPAQUE fill
-                // first: the circle's fillStyle above is translucent (4% at rest),
-                // and a colour glyph inherits that alpha, so without this the faces
-                // are invisible until hover. colors[i] keeps a mono-emoji fallback
-                // tinted per reaction; a colour-emoji font ignores the hue and only
-                // takes the full alpha. Precomputed array read -- zero alloc.
+                // first: the disc + ring above are translucent, and a colour glyph
+                // inherits that alpha, so without this the faces are dim. colors[i]
+                // keeps a mono-emoji fallback tinted per reaction; a colour-emoji
+                // font ignores the hue and only takes the full alpha. Array read -- zero alloc.
                 c.font=FONTS[Math.round(sizes[i]*1.2)]||FONTS[48];c.textAlign='center';c.textBaseline='middle';
                 c.fillStyle=colors[i];
                 c.fillText(emojis[i],cx,cy-sizes[i]+10);
@@ -3434,3 +3440,465 @@ export function mountRecipe(container, id, options) {
     return mountUIFX(container, type, factory, mountOptions);
 }
 
+// ===========================================================
+//  HEADLESS SKINS (E1, decisions/0008)
+//  A skin is an ordinary recipe PLUS a `headless` descriptor:
+//    { attrs: string[], read(host, handle, state) }
+//  skinHeadless (controller) observes `attrs` on the lite-headless primitive's
+//  painted element and calls read() at EVENT time to parse the painted state into
+//  preallocated state slots. Skins live in their OWN registry (HEADLESS_SKINS /
+//  SKIN_META), NOT RECIPES/RECIPE_META: a skin needs a handle + host, not a
+//  container, so it does not fit mountRecipe. The 57-recipe count is unchanged.
+// ===========================================================
+
+// Painted-attribute readers (EVENT time only -- never a per-frame call, so
+// getAttribute/parseFloat here are off the hot path). A boolean is PRESENT with any
+// value except the string "false" (handles presence-booleans like data-disabled and
+// value-booleans like the switch's data-checked="true"; decisions/0008 decision 3).
+function _skinBool(el, name) {
+    if (!el.hasAttribute(name)) return false;
+    return el.getAttribute(name) !== 'false';
+}
+function _ariaTrue(el, name) { return el.getAttribute(name) === 'true'; }
+function _skinNum(el, name, def) {
+    const v = el.getAttribute(name);
+    if (v == null) return def;
+    const n = parseFloat(v);
+    return n === n ? n : def;   // n===n rejects NaN without an isNaN call
+}
+
+/** Switch skin -- a sliding track+knob driven by the primitive's data-checked /
+ *  aria-checked. Zero per-frame alloc: const colors, globalAlpha, one eased scalar. */
+export function SwitchSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let t = 0;   // animated 0..1 toward the checked state
+    return {
+        headless: {
+            attrs: ['data-checked', 'aria-checked', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                st.toggled = _skinBool(host, 'data-checked') || _ariaTrue(host, 'aria-checked')
+                    || (handle && typeof handle.isChecked === 'function' ? !!handle.isChecked() : false);
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h, r = h / 2;
+            const k = dt * 12; t += ((st.toggled ? 1 : 0) - t) * (k > 1 ? 1 : k);
+            c.globalAlpha = st.disabled ? 0.4 : 1;
+            c.fillStyle = st.toggled ? P.accent : P.dim;
+            roundRect(c, 0, 0, w, h, r); c.fill();
+            const kx = r + t * (w - h);
+            c.fillStyle = P.dim2;
+            c.beginPath(); c.arc(kx, r, r - 3, 0, PI2); c.fill();
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, h, r);
+        },
+    };
+}
+
+/** Slider skin -- rail + fill + thumb, driven by aria-valuenow/min/max; the thumb
+ *  pulses while data-dragging is painted. */
+export function SliderSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#fbbf24', dim: '#9999b8', dim2: '#e2e2f0' });
+    let dv = 0;   // displayed value, eased toward st.val
+    return {
+        headless: {
+            attrs: ['aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'data-disabled', 'data-dragging'],
+            read(host, handle, st) {
+                const mn = _skinNum(host, 'aria-valuemin', 0);
+                const mx = _skinNum(host, 'aria-valuemax', 100);
+                const nw = _skinNum(host, 'aria-valuenow', mn);
+                const span = mx - mn;
+                let v = span > 0 ? (nw - mn) / span : 0;
+                st.val = v < 0 ? 0 : (v > 1 ? 1 : v);
+                st.active = _skinBool(host, 'data-dragging');
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, cy = st.h / 2;
+            const k = dt * 10; dv += (st.val - dv) * (k > 1 ? 1 : k);
+            c.globalAlpha = st.disabled ? 0.2 : 0.4;
+            c.fillStyle = P.dim; roundRect(c, 0, cy - 2, w, 4, 2); c.fill();
+            const fx = dv * w;
+            c.globalAlpha = st.disabled ? 0.4 : 1;
+            c.fillStyle = P.accent; roundRect(c, 0, cy - 2, fx > 0 ? fx : 0, 4, 2); c.fill();
+            const tr = st.active ? 8 : 6;
+            c.fillStyle = P.dim2;
+            c.beginPath(); c.arc(fx, cy, tr, 0, PI2); c.fill();
+            if (st.active) {
+                c.globalAlpha = 0.3; c.fillStyle = P.accent;
+                c.beginPath(); c.arc(fx, cy, tr + 5, 0, PI2); c.fill();
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, st.h, cy);
+        },
+    };
+}
+
+/** Progress skin -- a value ring (aria-valuenow/max) with a percent label; an
+ *  indeterminate sweep when data-loading, a full accent ring when data-complete. */
+export function ProgressSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#a78bfa', dim: '#e2e2f0' });
+    const FONT = pickFont(o, "700 14px 'JetBrains Mono',monospace");
+    let dv = 0;     // displayed value
+    let spin = 0;   // indeterminate sweep phase
+    return {
+        headless: {
+            attrs: ['aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'data-complete', 'data-loading'],
+            read(host, handle, st) {
+                const mn = _skinNum(host, 'aria-valuemin', 0);
+                const mx = _skinNum(host, 'aria-valuemax', 100);
+                const nw = _skinNum(host, 'aria-valuenow', mn);
+                const span = mx - mn;
+                let v = span > 0 ? (nw - mn) / span : 0;
+                st.val = v < 0 ? 0 : (v > 1 ? 1 : v);
+                st.complete = _skinBool(host, 'data-complete');
+                st.indeterminate = _skinBool(host, 'data-loading');
+            },
+        },
+        tick(c, dt, now, st) {
+            const cx = st.w / 2, cy = st.h / 2, R = Math.min(cx, cy) - 6, lw = 6;
+            c.strokeStyle = P.dim; c.globalAlpha = 0.15; c.lineWidth = lw;
+            c.beginPath(); c.arc(cx, cy, R, 0, PI2); c.stroke();
+            c.globalAlpha = 1;
+            if (st.indeterminate && !st.complete) {
+                spin += dt * 3;
+                c.strokeStyle = P.accent; c.lineWidth = lw;
+                c.beginPath(); c.arc(cx, cy, R, spin, spin + 1.6); c.stroke();
+            } else {
+                const target = st.complete ? 1 : st.val;
+                const k = dt * 6; dv += (target - dv) * (k > 1 ? 1 : k);
+                const a = -Math.PI / 2, ea = a + dv * PI2;
+                c.strokeStyle = st.complete ? P.accent : P.accent2; c.lineWidth = lw;
+                c.beginPath(); c.arc(cx, cy, R, a, ea); c.stroke();
+                c.fillStyle = P.dim; c.font = FONT; c.textAlign = 'center'; c.textBaseline = 'middle';
+                c.fillText(PCT[Math.round(dv * 100)], cx, cy);
+            }
+            if (st.focused) fr(c, st.w, st.h, st.h / 2);
+        },
+    };
+}
+
+/** Rating skin -- N bubbles (count from aria-valuemax, bounded) filled to
+ *  aria-valuenow/max. Fixed-count loop, no per-frame allocation. */
+export function RatingSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#f472b6', dim: '#3a3a4a' });
+    let dv = 0;   // animated filled count
+    return {
+        headless: {
+            attrs: ['aria-valuenow', 'aria-valuemax', 'data-disabled'],
+            read(host, handle, st) {
+                const mx = _skinNum(host, 'aria-valuemax', 5);
+                const nw = _skinNum(host, 'aria-valuenow', 0);
+                let n = mx > 0 ? (mx | 0) : 5;
+                st.count = n > 10 ? 10 : n;
+                let v = mx > 0 ? nw / mx : 0;
+                st.val = v < 0 ? 0 : (v > 1 ? 1 : v);
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const n = st.count > 0 ? st.count : 5;
+            const k = dt * 12; dv += (st.val * n - dv) * (k > 1 ? 1 : k);
+            const cy = st.h / 2;
+            const gap = st.w / n;
+            const rad = (gap < st.h ? gap : st.h) * 0.32;
+            const base = st.disabled ? 0.4 : 1;
+            for (let i = 0; i < n; i++) {
+                const cx = gap * (i + 0.5);
+                const fillAmt = dv - i;
+                c.globalAlpha = base * 0.35; c.fillStyle = P.dim;
+                c.beginPath(); c.arc(cx, cy, rad, 0, PI2); c.fill();
+                if (fillAmt > 0) {
+                    c.globalAlpha = base * (fillAmt > 1 ? 1 : fillAmt); c.fillStyle = P.accent;
+                    c.beginPath(); c.arc(cx, cy, rad, 0, PI2); c.fill();
+                }
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, st.w, st.h, st.h / 2);
+        },
+    };
+}
+
+/** Checkbox skin (E1b, decisions/0009) -- a box that draws a tick when checked
+ *  and a dash when indeterminate ("mixed"). Tri-state read from aria-checked (the
+ *  VALUE form true|false|mixed) or the data-* presence pair -- both map onto the
+ *  EXISTING toggled + indeterminate slots (no state-shape change). CheckboxGroupSkin
+ *  aliases this: a checkbox-group master paints the identical 3-state contract, so
+ *  "mixed" just reads as "some members". Zero per-frame alloc. */
+export function CheckboxSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let on = 0;   // eased box fill (checked or mixed)
+    let mk = 0;   // eased mark draw
+    return {
+        headless: {
+            attrs: ['aria-checked', 'data-checked', 'data-indeterminate', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                const ac = host.getAttribute('aria-checked');       // value form: true|false|mixed
+                st.indeterminate = ac === 'mixed' || _skinBool(host, 'data-indeterminate');
+                st.toggled = !st.indeterminate && (ac === 'true' || _skinBool(host, 'data-checked'));
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const s = st.w < st.h ? st.w : st.h;
+            const bx = (st.w - s) / 2, by = (st.h - s) / 2, rr = s * 0.22;
+            const filled = st.toggled || st.indeterminate;
+            const k = dt * 14;
+            on += ((filled ? 1 : 0) - on) * (k > 1 ? 1 : k);
+            mk += ((filled ? 1 : 0) - mk) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            c.globalAlpha = base;
+            c.strokeStyle = P.dim; c.lineWidth = 2;
+            roundRect(c, bx + 1, by + 1, s - 2, s - 2, rr); c.stroke();
+            if (on > 0.01) {
+                c.globalAlpha = base * on;
+                c.fillStyle = P.accent; roundRect(c, bx + 1, by + 1, s - 2, s - 2, rr); c.fill();
+            }
+            if (mk > 0.01) {
+                c.globalAlpha = base * mk;
+                c.strokeStyle = P.dim2; c.lineWidth = s * 0.1; c.lineCap = 'round';
+                c.beginPath();
+                if (st.indeterminate) {
+                    c.moveTo(bx + s * 0.28, by + s * 0.5); c.lineTo(bx + s * 0.72, by + s * 0.5);
+                } else {
+                    c.moveTo(bx + s * 0.26, by + s * 0.52);
+                    c.lineTo(bx + s * 0.44, by + s * 0.70);
+                    c.lineTo(bx + s * 0.76, by + s * 0.32);
+                }
+                c.stroke(); c.lineCap = 'butt';
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, st.w, st.h, rr);
+        },
+    };
+}
+export const CheckboxGroupSkin = CheckboxSkin;
+
+/** Select skin (E1b, decisions/0009) -- the closed/expanded TRIGGER of a
+ *  lite-headless select (the item-6 dropdown resolution). A rounded field with a
+ *  chevron that flips on aria-expanded and a dot when a value is selected (handle
+ *  value() fast path). The portaled listbox is NOT painted -- the single-host
+ *  adapter places one overlay over the trigger box; the open-state popup is the
+ *  recorded follow-on (decisions/0009). Zero per-frame alloc. */
+export function SelectSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let op = 0;   // eased open
+    return {
+        headless: {
+            attrs: ['aria-expanded', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                st.toggled = _ariaTrue(host, 'aria-expanded');
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+                st.complete = !!(handle && typeof handle.value === 'function' && handle.value() != null);
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h, rr = h * 0.28;
+            const k = dt * 12; op += ((st.toggled ? 1 : 0) - op) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            c.globalAlpha = base;
+            c.strokeStyle = st.toggled ? P.accent : P.dim; c.lineWidth = 2;
+            roundRect(c, 1, 1, w - 2, h - 2, rr); c.stroke();
+            if (op > 0.01) {
+                c.globalAlpha = base * 0.12 * op;
+                c.fillStyle = P.accent; roundRect(c, 1, 1, w - 2, h - 2, rr); c.fill();
+                c.globalAlpha = base;
+            }
+            if (st.complete) {
+                c.fillStyle = P.accent;
+                c.beginPath(); c.arc(h * 0.5, h * 0.5, h * 0.14, 0, PI2); c.fill();
+            }
+            const cx = w - h * 0.5, cy = h * 0.5, s = h * 0.16, dir = 1 - 2 * op;
+            c.strokeStyle = P.dim2; c.lineWidth = 2; c.lineCap = 'round';
+            c.beginPath();
+            c.moveTo(cx - s, cy - s * 0.5 * dir); c.lineTo(cx, cy + s * 0.5 * dir); c.lineTo(cx + s, cy - s * 0.5 * dir);
+            c.stroke(); c.lineCap = 'butt';
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, h, rr);
+        },
+    };
+}
+
+/** Meter skin (E1b) -- a horizontal gauge from aria-valuenow/min/max, zone-tinted
+ *  from data-zone (optimum|sub-optimum|low). Zero per-frame alloc. */
+export function MeterSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#fbbf24', dim: '#9999b8', dim2: '#f87171' });
+    let dv = 0;
+    return {
+        headless: {
+            attrs: ['aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'data-zone', 'data-disabled'],
+            read(host, handle, st) {
+                const mn = _skinNum(host, 'aria-valuemin', 0);
+                const mx = _skinNum(host, 'aria-valuemax', 100);
+                const nw = _skinNum(host, 'aria-valuenow', mn);
+                const span = mx - mn;
+                let v = span > 0 ? (nw - mn) / span : 0;
+                st.val = v < 0 ? 0 : (v > 1 ? 1 : v);
+                const zone = host.getAttribute('data-zone');
+                st.complete = zone === 'optimum';
+                st.error = zone === 'low';
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, cy = st.h / 2, bh = st.h < 12 ? st.h : 12;
+            const k = dt * 8; dv += (st.val - dv) * (k > 1 ? 1 : k);
+            const col = st.error ? P.dim2 : (st.complete ? P.accent : P.accent2);
+            c.globalAlpha = st.disabled ? 0.2 : 0.25;
+            c.fillStyle = P.dim; roundRect(c, 0, cy - bh / 2, w, bh, bh / 2); c.fill();
+            c.globalAlpha = st.disabled ? 0.4 : 1;
+            const fx = dv * w;
+            c.fillStyle = col; roundRect(c, 0, cy - bh / 2, fx > 0 ? fx : 0, bh, bh / 2); c.fill();
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, st.h, bh / 2);
+        },
+    };
+}
+
+/** Steps skin (E1b) -- a rail of N nodes filled up to data-current-index (count
+ *  from data-step-count), the current node on the leading edge; data-complete
+ *  fills all. count/val slots reused (val carries the raw current index). Fixed
+ *  loop bounded to 12, zero per-frame alloc. */
+export function StepsSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let dv = 0;   // eased current index
+    return {
+        headless: {
+            attrs: ['data-step-count', 'data-current-index', 'data-complete', 'data-disabled'],
+            read(host, handle, st) {
+                let n = _skinNum(host, 'data-step-count', 3) | 0;
+                st.count = n < 2 ? 2 : (n > 12 ? 12 : n);
+                st.val = _skinNum(host, 'data-current-index', 0);   // raw current index (0-based)
+                st.complete = _skinBool(host, 'data-complete');
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const n = st.count > 1 ? st.count : 3;
+            const cur = st.complete ? n - 1 : (st.val < 0 ? 0 : st.val);
+            const k = dt * 10; dv += (cur - dv) * (k > 1 ? 1 : k);
+            const cy = st.h / 2, gap = st.w / n, rad = (st.h < gap ? st.h : gap) * 0.22;
+            const base = st.disabled ? 0.4 : 1;
+            const x0 = gap * 0.5, xN = gap * (n - 0.5);
+            c.globalAlpha = base * 0.25; c.strokeStyle = P.dim; c.lineWidth = 3;
+            c.beginPath(); c.moveTo(x0, cy); c.lineTo(xN, cy); c.stroke();
+            c.globalAlpha = base; c.strokeStyle = P.accent;
+            const fx = x0 + gap * dv;
+            c.beginPath(); c.moveTo(x0, cy); c.lineTo(fx > xN ? xN : (fx < x0 ? x0 : fx), cy); c.stroke();
+            for (let i = 0; i < n; i++) {
+                const cx = gap * (i + 0.5);
+                c.globalAlpha = base; c.fillStyle = (i <= dv + 0.001) ? P.accent : P.dim;
+                c.beginPath(); c.arc(cx, cy, rad, 0, PI2); c.fill();
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, st.w, st.h, rad);
+        },
+    };
+}
+
+/** Accordion skin (E1b) -- a header chevron that flips on aria-expanded /
+ *  data-open plus an underline hint that grows with open. Single trigger host,
+ *  zero per-frame alloc. */
+export function AccordionSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let op = 0;
+    return {
+        headless: {
+            attrs: ['aria-expanded', 'data-open', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                st.toggled = _ariaTrue(host, 'aria-expanded') || _skinBool(host, 'data-open');
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h;
+            const k = dt * 12; op += ((st.toggled ? 1 : 0) - op) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            const cx = w - h * 0.5, cy = h * 0.5, s = h * 0.16, dir = 1 - 2 * op;
+            c.globalAlpha = base;
+            c.strokeStyle = st.toggled ? P.accent : P.dim2; c.lineWidth = 2; c.lineCap = 'round';
+            c.beginPath();
+            c.moveTo(cx - s, cy - s * 0.5 * dir); c.lineTo(cx, cy + s * 0.5 * dir); c.lineTo(cx + s, cy - s * 0.5 * dir);
+            c.stroke(); c.lineCap = 'butt';
+            c.globalAlpha = base * 0.5;
+            c.strokeStyle = P.accent; c.lineWidth = 2;
+            const uw = (w - h) * op;
+            c.beginPath(); c.moveTo(2, h - 3); c.lineTo(2 + (uw > 0 ? uw : 0), h - 3); c.stroke();
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, h, 4);
+        },
+    };
+}
+
+/** Skeleton skin (E1b) -- a shimmer sweep over a rounded placeholder while
+ *  data-loading / aria-busy; fades out when ready. Zero per-frame alloc: a moving
+ *  highlight band via globalAlpha, never a per-frame gradient. */
+export function SkeletonSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#e2e2f0', dim: '#3a3a4a' });
+    let ph = 0;    // shimmer phase 0..1
+    let vis = 0;   // eased placeholder visibility (1 loading, 0 ready)
+    return {
+        headless: {
+            attrs: ['data-loading', 'aria-busy'],
+            read(host, handle, st) {
+                st.indeterminate = _skinBool(host, 'data-loading') || _ariaTrue(host, 'aria-busy');
+                st.complete = !st.indeterminate;
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h, rr = (h < 10 ? h : 10) * 0.5;
+            const loading = st.indeterminate;
+            const k = dt * 6; vis += ((loading ? 1 : 0) - vis) * (k > 1 ? 1 : k);
+            if (vis < 0.01) { c.globalAlpha = 1; return; }
+            if (loading) { ph += dt * 0.8; if (ph > 1) ph -= 1; }
+            c.globalAlpha = vis * 0.5;
+            c.fillStyle = P.dim; roundRect(c, 0, 0, w, h, rr); c.fill();
+            const bw = w * 0.28, bx = -bw + ph * (w + bw);
+            const bx0 = bx < 0 ? 0 : bx, bx1 = bx + bw > w ? w : bx + bw;
+            if (bx1 > bx0) {
+                c.globalAlpha = vis * 0.18;
+                c.fillStyle = P.accent; roundRect(c, bx0, 0, bx1 - bx0, h, rr); c.fill();
+            }
+            c.globalAlpha = 1;
+        },
+    };
+}
+
+/**
+ * The headless-skin registry -- a SIBLING of RECIPES, not part of it (decisions/
+ * 0008 decision 4). id -> factory (null-prototype), the meta rows a picker/demo
+ * iterates, and the frozen id list. Each skin is driven by skinHeadless with a
+ * lite-headless handle + host, never by mountRecipe.
+ */
+export const HEADLESS_SKINS = Object.assign(Object.create(null), {
+    switchSkin: SwitchSkin,
+    sliderSkin: SliderSkin,
+    progressSkin: ProgressSkin,
+    ratingSkin: RatingSkin,
+    checkboxSkin: CheckboxSkin,
+    checkboxGroupSkin: CheckboxGroupSkin,
+    selectSkin: SelectSkin,
+    meterSkin: MeterSkin,
+    stepsSkin: StepsSkin,
+    accordionSkin: AccordionSkin,
+    skeletonSkin: SkeletonSkin,
+});
+
+export const SKIN_META = [
+    { id: 'switchSkin', name: 'Switch Skin', primitive: 'switch', themeable: true, motionSafe: false },
+    { id: 'sliderSkin', name: 'Slider Skin', primitive: 'slider', themeable: true, motionSafe: false },
+    { id: 'progressSkin', name: 'Progress Skin', primitive: 'progress', themeable: true, motionSafe: false },
+    { id: 'ratingSkin', name: 'Rating Skin', primitive: 'rating', themeable: true, motionSafe: false },
+    { id: 'checkboxSkin', name: 'Checkbox Skin', primitive: 'checkbox', themeable: true, motionSafe: false },
+    { id: 'checkboxGroupSkin', name: 'Checkbox Group Skin', primitive: 'checkbox-group', themeable: true, motionSafe: false },
+    { id: 'selectSkin', name: 'Select Skin', primitive: 'select', themeable: true, motionSafe: false },
+    { id: 'meterSkin', name: 'Meter Skin', primitive: 'meter', themeable: true, motionSafe: false },
+    { id: 'stepsSkin', name: 'Steps Skin', primitive: 'steps', themeable: true, motionSafe: false },
+    { id: 'accordionSkin', name: 'Accordion Skin', primitive: 'accordion', themeable: true, motionSafe: false },
+    { id: 'skeletonSkin', name: 'Skeleton Skin', primitive: 'skeleton', themeable: true, motionSafe: false },
+];
+
+export const SKIN_NAMES = Object.freeze(Object.keys(HEADLESS_SKINS));
+