@number10/jsx-phaser 5.0.0

package/dist/clip/stencil-clip.cjs

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Phaser = require("phaser");
+const stencilClipDepth = require("./stencil-clip-depth.cjs");
+const stencilClipFboBridge = require("./stencil-clip-fbo-bridge.cjs");
+const stencilClipRenderer = require("./stencil-clip-renderer.cjs");
+const stencilClipState = require("./stencil-clip-state.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
+const STENCIL_HANDLE = /* @__PURE__ */ Symbol("stencilClipHandle");
+function getStencilClipHandle(container) {
+  return container[STENCIL_HANDLE];
+}
+function clearStencilClip(container) {
+  getStencilClipHandle(container)?.destroy();
+}
+function applyStencilClip(container, source) {
+  const obj = container;
+  if (obj[STENCIL_HANDLE]) {
+    obj[STENCIL_HANDLE].update(source);
+    return obj[STENCIL_HANDLE];
+  }
+  if (container.scene.renderer.type !== Phaser__namespace.WEBGL) {
+    return { update() {
+    }, destroy() {
+    } };
+  }
+  const renderer = container.scene.renderer;
+  const gl = renderer.gl;
+  const glWrapper = renderer.glWrapper;
+  stencilClipDepth.ensurePrerenderReset(gl, container.scene.game, stencilClipFboBridge.resetFboPatchState);
+  stencilClipFboBridge.ensureFboPatch(gl);
+  const previousArrayBuffer = glWrapper.state?.bindings?.arrayBuffer ?? null;
+  const vertBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(16), gl.DYNAMIC_DRAW);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  glWrapper.updateBindingsArrayBuffer?.(
+    {
+      bindings: {
+        arrayBuffer: previousArrayBuffer
+      }
+    },
+    true
+  );
+  const verts = new Float32Array(16);
+  let maskSource = stencilClipState.toMaskState(source);
+  let destroyed = false;
+  const wrapper = (webglRenderer, go, drawingContext, parentMatrix, renderStep = 0, displayList, displayListIndex) => {
+    const renderNext = () => {
+      go.renderWebGLStep(
+        webglRenderer,
+        go,
+        drawingContext,
+        parentMatrix,
+        renderStep + 1,
+        displayList,
+        displayListIndex
+      );
+    };
+    if (destroyed) {
+      renderNext();
+      return;
+    }
+    const matrix = container.getWorldTransformMatrix();
+    const context = drawingContext;
+    const cameraMatrix = context.camera?.getViewMatrix(!context.useCanvas);
+    const rn = webglRenderer.renderNodes;
+    const depth = stencilClipDepth.getDepth(gl);
+    const myDepth = depth.value++;
+    const logW = webglRenderer.width;
+    const logH = webglRenderer.height;
+    rn.finishBatch();
+    if (myDepth === 0) gl.enable(gl.STENCIL_TEST);
+    gl.colorMask(false, false, false, false);
+    gl.stencilMask(255);
+    gl.stencilFunc(gl.EQUAL, myDepth, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
+    stencilClipRenderer.drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts);
+    gl.colorMask(true, true, true, true);
+    gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+    gl.stencilMask(0);
+    renderNext();
+    rn.finishBatch();
+    gl.colorMask(false, false, false, false);
+    gl.stencilMask(255);
+    gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
+    stencilClipRenderer.drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts);
+    gl.colorMask(true, true, true, true);
+    depth.value--;
+    if (myDepth === 0) {
+      gl.disable(gl.STENCIL_TEST);
+      gl.stencilMask(255);
+    } else {
+      gl.stencilFunc(gl.EQUAL, myDepth, 255);
+      gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+      gl.stencilMask(0);
+    }
+  };
+  const handle = {
+    update(s) {
+      maskSource = stencilClipState.mergeMaskState(maskSource, s);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      gl.deleteBuffer(vertBuf);
+      const index = obj._renderSteps.indexOf(wrapper);
+      if (index !== -1) obj._renderSteps.splice(index, 1);
+      delete obj[STENCIL_HANDLE];
+    }
+  };
+  obj.addRenderStep(wrapper, 0);
+  obj[STENCIL_HANDLE] = handle;
+  return handle;
+}
+exports.isBitmapStencilClipSource = stencilClipState.isBitmapStencilClipSource;
+exports.applyStencilClip = applyStencilClip;
+exports.clearStencilClip = clearStencilClip;
+exports.getStencilClipHandle = getStencilClipHandle;
+//# sourceMappingURL=stencil-clip.cjs.map

package/dist/clip/stencil-clip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-clip.cjs","sources":["../../src/clip/stencil-clip.ts"],"sourcesContent":["/**\n * WebGL stencil-buffer clip for Phaser 4 Containers.\n *\n * Supports arbitrary nesting via the INCR/DECR model: each clip level\n * increments the stencil on enter and decrements on exit, so child clips are\n * automatically intersected with their parent clips at the hardware level.\n *\n * Shape variants:\n *   - Plain rectangle   (cornerRadius omitted or 0)\n *   - Rounded rectangle (uniform radius or per-corner object)\n *\n * A single SDF-based shader handles both variants.  For plain rectangles\n * u_radii is vec4(0) and the `discard` branch never fires — no overhead\n * compared to a rectangle-only shader.\n *\n * Transforms (translate, scale, rotation) are fully supported: the quad\n * corners are transformed through `container.getWorldTransformMatrix()` at\n * render time, so no per-layout world-position tracking is needed.\n */\nimport * as Phaser from 'phaser'\nimport { ensurePrerenderReset, getDepth } from './stencil-clip-depth'\nimport { ensureFboPatch, resetFboPatchState } from './stencil-clip-fbo-bridge'\nimport { drawMaskShape, type GLPolyfilled } from './stencil-clip-renderer'\nimport { mergeMaskState, toMaskState } from './stencil-clip-state'\nimport type { StencilClipHandle, StencilClipSource } from './stencil-clip-types'\n\nexport { isBitmapStencilClipSource } from './stencil-clip-state'\nexport type {\n  StencilBitmapClipSource,\n  StencilBitmapTexture,\n  StencilClipHandle,\n  StencilClipShape,\n  StencilClipSource,\n  StencilClipUpdate,\n  StencilCornerRadius,\n  StencilRoundRectClipSource,\n} from './stencil-clip-types'\n\n// ── Internal Phaser type helpers ──────────────────────────────────────────────\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ContainerRenderFn = (renderer: any, go: any, ...rest: any[]) => void\n\ntype RNManager = { finishBatch(): void }\ntype CameraLike = {\n  getViewMatrix(forceComposite?: boolean): Phaser.GameObjects.Components.TransformMatrix\n}\n\ntype DrawingContextLike = {\n  camera?: CameraLike\n  useCanvas?: boolean\n}\n\ntype GLWrapperLike = {\n  state?: {\n    bindings?: {\n      arrayBuffer?: unknown\n    }\n  }\n  updateBindingsArrayBuffer?(state: unknown, force?: boolean): void\n}\n\n// ── Attachment symbol ─────────────────────────────────────────────────────────\n\nconst STENCIL_HANDLE = Symbol('stencilClipHandle')\n\n/** Returns the active stencil clip handle attached to a container, if any. */\nexport function getStencilClipHandle(\n  container: Phaser.GameObjects.Container\n): StencilClipHandle | undefined {\n  return (container as unknown as { [STENCIL_HANDLE]?: StencilClipHandle })[STENCIL_HANDLE]\n}\n\n/** Removes any active stencil clip from a container. */\nexport function clearStencilClip(container: Phaser.GameObjects.Container): void {\n  getStencilClipHandle(container)?.destroy()\n}\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\n/**\n * Applies a WebGL stencil-buffer clip to a Phaser 4 Container.\n *\n * The clip rectangle is expressed in the container's **local coordinate\n * space**.  `offsetX`/`offsetY` mark the top-left corner (default 0/0), so\n * a container whose visual area starts at its local origin can be clipped with\n * `applyStencilClip(container, { width, height })`.\n *\n * **Nesting** is handled transparently: each clip level occupies one stencil\n * value (0 = no clip, 1 = depth 0, 2 = depth 1, …).  Child clips are always\n * the intersection of their own shape and all ancestor shapes.\n *\n * **Transforms** (translate, scale, rotation) are re-evaluated from\n * `container.getWorldTransformMatrix()` on every frame, so animated or\n * scroll-driven containers clip correctly without any manual update call.\n *\n * If a stencil clip is already attached to the container, calling this\n * function again calls `handle.update(shape)` on the existing handle and\n * returns it.\n *\n * @param container - The container to clip.\n * @param source - Clip source in the container's local coordinate space.\n * @returns A handle to modify dimensions / corner radii or remove the clip.\n */\nexport function applyStencilClip(\n  container: Phaser.GameObjects.Container,\n  source: StencilClipSource\n): StencilClipHandle {\n  const obj = container as unknown as {\n    _renderSteps: Array<ContainerRenderFn | undefined>\n    addRenderStep(fn: ContainerRenderFn, index?: number): Phaser.GameObjects.Container\n    [STENCIL_HANDLE]?: StencilClipHandle\n  }\n\n  // Re-use existing handle if already attached.\n  if (obj[STENCIL_HANDLE]) {\n    obj[STENCIL_HANDLE].update(source)\n    return obj[STENCIL_HANDLE]\n  }\n\n  // No-op for non-WebGL renderers.\n  if (container.scene.renderer.type !== Phaser.WEBGL) {\n    return { update() {}, destroy() {} }\n  }\n\n  const renderer = container.scene.renderer as Phaser.Renderer.WebGL.WebGLRenderer\n  const gl = renderer.gl as GLPolyfilled\n  const glWrapper = renderer.glWrapper as unknown as GLWrapperLike\n\n  ensurePrerenderReset(gl, container.scene.game, resetFboPatchState)\n  ensureFboPatch(gl)\n\n  // Persistent vertex buffer: 4 vertices × 4 floats × 4 bytes = 64 bytes.\n  const previousArrayBuffer = glWrapper.state?.bindings?.arrayBuffer ?? null\n  const vertBuf = gl.createBuffer() as WebGLBuffer\n  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf)\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(16), gl.DYNAMIC_DRAW)\n  gl.bindBuffer(gl.ARRAY_BUFFER, null)\n  // Creating the buffer mutates raw GL state; restore Phaser's cached binding too.\n  glWrapper.updateBindingsArrayBuffer?.(\n    {\n      bindings: {\n        arrayBuffer: previousArrayBuffer,\n      },\n    },\n    true\n  )\n\n  const verts = new Float32Array(16)\n\n  let maskSource = toMaskState(source)\n  let destroyed = false\n\n  const wrapper: ContainerRenderFn = (\n    webglRenderer,\n    go,\n    drawingContext,\n    parentMatrix,\n    renderStep = 0,\n    displayList,\n    displayListIndex\n  ) => {\n    const renderNext = () => {\n      go.renderWebGLStep(\n        webglRenderer,\n        go,\n        drawingContext,\n        parentMatrix,\n        renderStep + 1,\n        displayList,\n        displayListIndex\n      )\n    }\n\n    if (destroyed) {\n      renderNext()\n      return\n    }\n\n    const matrix = container.getWorldTransformMatrix()\n    const context = drawingContext as DrawingContextLike\n    const cameraMatrix = context.camera?.getViewMatrix(!context.useCanvas)\n    const rn = (webglRenderer as unknown as { renderNodes: RNManager }).renderNodes\n    const depth = getDepth(gl)\n    const myDepth = depth.value++\n\n    const logW = webglRenderer.width as number\n    const logH = webglRenderer.height as number\n\n    // ── Push: write clip shape into stencil buffer ────────────────────────\n    rn.finishBatch()\n\n    if (myDepth === 0) gl.enable(gl.STENCIL_TEST)\n\n    gl.colorMask(false, false, false, false)\n    gl.stencilMask(0xff)\n    // Write only where the stencil already equals myDepth (parent's level).\n    gl.stencilFunc(gl.EQUAL, myDepth, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR)\n\n    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts)\n\n    // ── Content render: test for myDepth+1, protect stencil ──────────────\n    gl.colorMask(true, true, true, true)\n    gl.stencilFunc(gl.EQUAL, myDepth + 1, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP)\n    gl.stencilMask(0x00)\n\n    renderNext()\n\n    // ── Pop: restore parent depth via DECR ────────────────────────────────\n    rn.finishBatch()\n\n    gl.colorMask(false, false, false, false)\n    gl.stencilMask(0xff)\n    gl.stencilFunc(gl.EQUAL, myDepth + 1, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR)\n\n    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts)\n\n    gl.colorMask(true, true, true, true)\n    depth.value--\n\n    if (myDepth === 0) {\n      // Outermost clip: disable stencil test and lift write protection.\n      gl.disable(gl.STENCIL_TEST)\n      gl.stencilMask(0xff)\n    } else {\n      // Nested clip: restore the parent's content-render stencil state so\n      // remaining siblings of this container are still clipped correctly.\n      gl.stencilFunc(gl.EQUAL, myDepth, 0xff)\n      gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP)\n      gl.stencilMask(0x00)\n    }\n  }\n\n  const handle: StencilClipHandle = {\n    update(s) {\n      maskSource = mergeMaskState(maskSource, s)\n    },\n    destroy() {\n      if (destroyed) return\n      destroyed = true\n      gl.deleteBuffer(vertBuf)\n      const index = obj._renderSteps.indexOf(wrapper)\n      if (index !== -1) obj._renderSteps.splice(index, 1)\n      delete obj[STENCIL_HANDLE]\n    },\n  }\n\n  obj.addRenderStep(wrapper, 0)\n  obj[STENCIL_HANDLE] = handle\n\n  return handle\n}\n"],"names":["Phaser","ensurePrerenderReset","resetFboPatchState","ensureFboPatch","toMaskState","getDepth","drawMaskShape","mergeMaskState"],"mappings":"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"}

package/dist/clip/stencil-clip.d.ts

@@ -0,0 +1,53 @@
+import { StencilClipHandle, StencilClipSource } from './stencil-clip-types';
+/**
+ * WebGL stencil-buffer clip for Phaser 4 Containers.
+ *
+ * Supports arbitrary nesting via the INCR/DECR model: each clip level
+ * increments the stencil on enter and decrements on exit, so child clips are
+ * automatically intersected with their parent clips at the hardware level.
+ *
+ * Shape variants:
+ *   - Plain rectangle   (cornerRadius omitted or 0)
+ *   - Rounded rectangle (uniform radius or per-corner object)
+ *
+ * A single SDF-based shader handles both variants.  For plain rectangles
+ * u_radii is vec4(0) and the `discard` branch never fires — no overhead
+ * compared to a rectangle-only shader.
+ *
+ * Transforms (translate, scale, rotation) are fully supported: the quad
+ * corners are transformed through `container.getWorldTransformMatrix()` at
+ * render time, so no per-layout world-position tracking is needed.
+ */
+import * as Phaser from 'phaser';
+export { isBitmapStencilClipSource } from './stencil-clip-state';
+export type { StencilBitmapClipSource, StencilBitmapTexture, StencilClipHandle, StencilClipShape, StencilClipSource, StencilClipUpdate, StencilCornerRadius, StencilRoundRectClipSource, } from './stencil-clip-types';
+/** Returns the active stencil clip handle attached to a container, if any. */
+export declare function getStencilClipHandle(container: Phaser.GameObjects.Container): StencilClipHandle | undefined;
+/** Removes any active stencil clip from a container. */
+export declare function clearStencilClip(container: Phaser.GameObjects.Container): void;
+/**
+ * Applies a WebGL stencil-buffer clip to a Phaser 4 Container.
+ *
+ * The clip rectangle is expressed in the container's **local coordinate
+ * space**.  `offsetX`/`offsetY` mark the top-left corner (default 0/0), so
+ * a container whose visual area starts at its local origin can be clipped with
+ * `applyStencilClip(container, { width, height })`.
+ *
+ * **Nesting** is handled transparently: each clip level occupies one stencil
+ * value (0 = no clip, 1 = depth 0, 2 = depth 1, …).  Child clips are always
+ * the intersection of their own shape and all ancestor shapes.
+ *
+ * **Transforms** (translate, scale, rotation) are re-evaluated from
+ * `container.getWorldTransformMatrix()` on every frame, so animated or
+ * scroll-driven containers clip correctly without any manual update call.
+ *
+ * If a stencil clip is already attached to the container, calling this
+ * function again calls `handle.update(shape)` on the existing handle and
+ * returns it.
+ *
+ * @param container - The container to clip.
+ * @param source - Clip source in the container's local coordinate space.
+ * @returns A handle to modify dimensions / corner radii or remove the clip.
+ */
+export declare function applyStencilClip(container: Phaser.GameObjects.Container, source: StencilClipSource): StencilClipHandle;
+//# sourceMappingURL=stencil-clip.d.ts.map

package/dist/clip/stencil-clip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-clip.d.ts","sourceRoot":"","sources":["../../src/clip/stencil-clip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAKhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAEhF,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAChE,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,sBAAsB,CAAA;AA8B7B,8EAA8E;AAC9E,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GACtC,iBAAiB,GAAG,SAAS,CAE/B;AAED,wDAAwD;AACxD,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAE9E;AAID;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,EACvC,MAAM,EAAE,iBAAiB,GACxB,iBAAiB,CAmJnB"}

package/dist/clip/stencil-clip.js

@@ -0,0 +1,122 @@
+import * as Phaser from "phaser";
+import { ensurePrerenderReset, getDepth } from "./stencil-clip-depth.js";
+import { ensureFboPatch, resetFboPatchState } from "./stencil-clip-fbo-bridge.js";
+import { drawMaskShape } from "./stencil-clip-renderer.js";
+import { toMaskState, mergeMaskState } from "./stencil-clip-state.js";
+import { isBitmapStencilClipSource } from "./stencil-clip-state.js";
+const STENCIL_HANDLE = /* @__PURE__ */ Symbol("stencilClipHandle");
+function getStencilClipHandle(container) {
+  return container[STENCIL_HANDLE];
+}
+function clearStencilClip(container) {
+  getStencilClipHandle(container)?.destroy();
+}
+function applyStencilClip(container, source) {
+  const obj = container;
+  if (obj[STENCIL_HANDLE]) {
+    obj[STENCIL_HANDLE].update(source);
+    return obj[STENCIL_HANDLE];
+  }
+  if (container.scene.renderer.type !== Phaser.WEBGL) {
+    return { update() {
+    }, destroy() {
+    } };
+  }
+  const renderer = container.scene.renderer;
+  const gl = renderer.gl;
+  const glWrapper = renderer.glWrapper;
+  ensurePrerenderReset(gl, container.scene.game, resetFboPatchState);
+  ensureFboPatch(gl);
+  const previousArrayBuffer = glWrapper.state?.bindings?.arrayBuffer ?? null;
+  const vertBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(16), gl.DYNAMIC_DRAW);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  glWrapper.updateBindingsArrayBuffer?.(
+    {
+      bindings: {
+        arrayBuffer: previousArrayBuffer
+      }
+    },
+    true
+  );
+  const verts = new Float32Array(16);
+  let maskSource = toMaskState(source);
+  let destroyed = false;
+  const wrapper = (webglRenderer, go, drawingContext, parentMatrix, renderStep = 0, displayList, displayListIndex) => {
+    const renderNext = () => {
+      go.renderWebGLStep(
+        webglRenderer,
+        go,
+        drawingContext,
+        parentMatrix,
+        renderStep + 1,
+        displayList,
+        displayListIndex
+      );
+    };
+    if (destroyed) {
+      renderNext();
+      return;
+    }
+    const matrix = container.getWorldTransformMatrix();
+    const context = drawingContext;
+    const cameraMatrix = context.camera?.getViewMatrix(!context.useCanvas);
+    const rn = webglRenderer.renderNodes;
+    const depth = getDepth(gl);
+    const myDepth = depth.value++;
+    const logW = webglRenderer.width;
+    const logH = webglRenderer.height;
+    rn.finishBatch();
+    if (myDepth === 0) gl.enable(gl.STENCIL_TEST);
+    gl.colorMask(false, false, false, false);
+    gl.stencilMask(255);
+    gl.stencilFunc(gl.EQUAL, myDepth, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
+    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts);
+    gl.colorMask(true, true, true, true);
+    gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+    gl.stencilMask(0);
+    renderNext();
+    rn.finishBatch();
+    gl.colorMask(false, false, false, false);
+    gl.stencilMask(255);
+    gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
+    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts);
+    gl.colorMask(true, true, true, true);
+    depth.value--;
+    if (myDepth === 0) {
+      gl.disable(gl.STENCIL_TEST);
+      gl.stencilMask(255);
+    } else {
+      gl.stencilFunc(gl.EQUAL, myDepth, 255);
+      gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+      gl.stencilMask(0);
+    }
+  };
+  const handle = {
+    update(s) {
+      maskSource = mergeMaskState(maskSource, s);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      gl.deleteBuffer(vertBuf);
+      const index = obj._renderSteps.indexOf(wrapper);
+      if (index !== -1) obj._renderSteps.splice(index, 1);
+      delete obj[STENCIL_HANDLE];
+    }
+  };
+  obj.addRenderStep(wrapper, 0);
+  obj[STENCIL_HANDLE] = handle;
+  return handle;
+}
+export {
+  applyStencilClip,
+  clearStencilClip,
+  getStencilClipHandle,
+  isBitmapStencilClipSource
+};
+//# sourceMappingURL=stencil-clip.js.map

package/dist/clip/stencil-clip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-clip.js","sources":["../../src/clip/stencil-clip.ts"],"sourcesContent":["/**\n * WebGL stencil-buffer clip for Phaser 4 Containers.\n *\n * Supports arbitrary nesting via the INCR/DECR model: each clip level\n * increments the stencil on enter and decrements on exit, so child clips are\n * automatically intersected with their parent clips at the hardware level.\n *\n * Shape variants:\n *   - Plain rectangle   (cornerRadius omitted or 0)\n *   - Rounded rectangle (uniform radius or per-corner object)\n *\n * A single SDF-based shader handles both variants.  For plain rectangles\n * u_radii is vec4(0) and the `discard` branch never fires — no overhead\n * compared to a rectangle-only shader.\n *\n * Transforms (translate, scale, rotation) are fully supported: the quad\n * corners are transformed through `container.getWorldTransformMatrix()` at\n * render time, so no per-layout world-position tracking is needed.\n */\nimport * as Phaser from 'phaser'\nimport { ensurePrerenderReset, getDepth } from './stencil-clip-depth'\nimport { ensureFboPatch, resetFboPatchState } from './stencil-clip-fbo-bridge'\nimport { drawMaskShape, type GLPolyfilled } from './stencil-clip-renderer'\nimport { mergeMaskState, toMaskState } from './stencil-clip-state'\nimport type { StencilClipHandle, StencilClipSource } from './stencil-clip-types'\n\nexport { isBitmapStencilClipSource } from './stencil-clip-state'\nexport type {\n  StencilBitmapClipSource,\n  StencilBitmapTexture,\n  StencilClipHandle,\n  StencilClipShape,\n  StencilClipSource,\n  StencilClipUpdate,\n  StencilCornerRadius,\n  StencilRoundRectClipSource,\n} from './stencil-clip-types'\n\n// ── Internal Phaser type helpers ──────────────────────────────────────────────\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ContainerRenderFn = (renderer: any, go: any, ...rest: any[]) => void\n\ntype RNManager = { finishBatch(): void }\ntype CameraLike = {\n  getViewMatrix(forceComposite?: boolean): Phaser.GameObjects.Components.TransformMatrix\n}\n\ntype DrawingContextLike = {\n  camera?: CameraLike\n  useCanvas?: boolean\n}\n\ntype GLWrapperLike = {\n  state?: {\n    bindings?: {\n      arrayBuffer?: unknown\n    }\n  }\n  updateBindingsArrayBuffer?(state: unknown, force?: boolean): void\n}\n\n// ── Attachment symbol ─────────────────────────────────────────────────────────\n\nconst STENCIL_HANDLE = Symbol('stencilClipHandle')\n\n/** Returns the active stencil clip handle attached to a container, if any. */\nexport function getStencilClipHandle(\n  container: Phaser.GameObjects.Container\n): StencilClipHandle | undefined {\n  return (container as unknown as { [STENCIL_HANDLE]?: StencilClipHandle })[STENCIL_HANDLE]\n}\n\n/** Removes any active stencil clip from a container. */\nexport function clearStencilClip(container: Phaser.GameObjects.Container): void {\n  getStencilClipHandle(container)?.destroy()\n}\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\n/**\n * Applies a WebGL stencil-buffer clip to a Phaser 4 Container.\n *\n * The clip rectangle is expressed in the container's **local coordinate\n * space**.  `offsetX`/`offsetY` mark the top-left corner (default 0/0), so\n * a container whose visual area starts at its local origin can be clipped with\n * `applyStencilClip(container, { width, height })`.\n *\n * **Nesting** is handled transparently: each clip level occupies one stencil\n * value (0 = no clip, 1 = depth 0, 2 = depth 1, …).  Child clips are always\n * the intersection of their own shape and all ancestor shapes.\n *\n * **Transforms** (translate, scale, rotation) are re-evaluated from\n * `container.getWorldTransformMatrix()` on every frame, so animated or\n * scroll-driven containers clip correctly without any manual update call.\n *\n * If a stencil clip is already attached to the container, calling this\n * function again calls `handle.update(shape)` on the existing handle and\n * returns it.\n *\n * @param container - The container to clip.\n * @param source - Clip source in the container's local coordinate space.\n * @returns A handle to modify dimensions / corner radii or remove the clip.\n */\nexport function applyStencilClip(\n  container: Phaser.GameObjects.Container,\n  source: StencilClipSource\n): StencilClipHandle {\n  const obj = container as unknown as {\n    _renderSteps: Array<ContainerRenderFn | undefined>\n    addRenderStep(fn: ContainerRenderFn, index?: number): Phaser.GameObjects.Container\n    [STENCIL_HANDLE]?: StencilClipHandle\n  }\n\n  // Re-use existing handle if already attached.\n  if (obj[STENCIL_HANDLE]) {\n    obj[STENCIL_HANDLE].update(source)\n    return obj[STENCIL_HANDLE]\n  }\n\n  // No-op for non-WebGL renderers.\n  if (container.scene.renderer.type !== Phaser.WEBGL) {\n    return { update() {}, destroy() {} }\n  }\n\n  const renderer = container.scene.renderer as Phaser.Renderer.WebGL.WebGLRenderer\n  const gl = renderer.gl as GLPolyfilled\n  const glWrapper = renderer.glWrapper as unknown as GLWrapperLike\n\n  ensurePrerenderReset(gl, container.scene.game, resetFboPatchState)\n  ensureFboPatch(gl)\n\n  // Persistent vertex buffer: 4 vertices × 4 floats × 4 bytes = 64 bytes.\n  const previousArrayBuffer = glWrapper.state?.bindings?.arrayBuffer ?? null\n  const vertBuf = gl.createBuffer() as WebGLBuffer\n  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf)\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(16), gl.DYNAMIC_DRAW)\n  gl.bindBuffer(gl.ARRAY_BUFFER, null)\n  // Creating the buffer mutates raw GL state; restore Phaser's cached binding too.\n  glWrapper.updateBindingsArrayBuffer?.(\n    {\n      bindings: {\n        arrayBuffer: previousArrayBuffer,\n      },\n    },\n    true\n  )\n\n  const verts = new Float32Array(16)\n\n  let maskSource = toMaskState(source)\n  let destroyed = false\n\n  const wrapper: ContainerRenderFn = (\n    webglRenderer,\n    go,\n    drawingContext,\n    parentMatrix,\n    renderStep = 0,\n    displayList,\n    displayListIndex\n  ) => {\n    const renderNext = () => {\n      go.renderWebGLStep(\n        webglRenderer,\n        go,\n        drawingContext,\n        parentMatrix,\n        renderStep + 1,\n        displayList,\n        displayListIndex\n      )\n    }\n\n    if (destroyed) {\n      renderNext()\n      return\n    }\n\n    const matrix = container.getWorldTransformMatrix()\n    const context = drawingContext as DrawingContextLike\n    const cameraMatrix = context.camera?.getViewMatrix(!context.useCanvas)\n    const rn = (webglRenderer as unknown as { renderNodes: RNManager }).renderNodes\n    const depth = getDepth(gl)\n    const myDepth = depth.value++\n\n    const logW = webglRenderer.width as number\n    const logH = webglRenderer.height as number\n\n    // ── Push: write clip shape into stencil buffer ────────────────────────\n    rn.finishBatch()\n\n    if (myDepth === 0) gl.enable(gl.STENCIL_TEST)\n\n    gl.colorMask(false, false, false, false)\n    gl.stencilMask(0xff)\n    // Write only where the stencil already equals myDepth (parent's level).\n    gl.stencilFunc(gl.EQUAL, myDepth, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR)\n\n    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts)\n\n    // ── Content render: test for myDepth+1, protect stencil ──────────────\n    gl.colorMask(true, true, true, true)\n    gl.stencilFunc(gl.EQUAL, myDepth + 1, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP)\n    gl.stencilMask(0x00)\n\n    renderNext()\n\n    // ── Pop: restore parent depth via DECR ────────────────────────────────\n    rn.finishBatch()\n\n    gl.colorMask(false, false, false, false)\n    gl.stencilMask(0xff)\n    gl.stencilFunc(gl.EQUAL, myDepth + 1, 0xff)\n    gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR)\n\n    drawMaskShape(gl, container.scene, matrix, cameraMatrix, maskSource, logW, logH, vertBuf, verts)\n\n    gl.colorMask(true, true, true, true)\n    depth.value--\n\n    if (myDepth === 0) {\n      // Outermost clip: disable stencil test and lift write protection.\n      gl.disable(gl.STENCIL_TEST)\n      gl.stencilMask(0xff)\n    } else {\n      // Nested clip: restore the parent's content-render stencil state so\n      // remaining siblings of this container are still clipped correctly.\n      gl.stencilFunc(gl.EQUAL, myDepth, 0xff)\n      gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP)\n      gl.stencilMask(0x00)\n    }\n  }\n\n  const handle: StencilClipHandle = {\n    update(s) {\n      maskSource = mergeMaskState(maskSource, s)\n    },\n    destroy() {\n      if (destroyed) return\n      destroyed = true\n      gl.deleteBuffer(vertBuf)\n      const index = obj._renderSteps.indexOf(wrapper)\n      if (index !== -1) obj._renderSteps.splice(index, 1)\n      delete obj[STENCIL_HANDLE]\n    },\n  }\n\n  obj.addRenderStep(wrapper, 0)\n  obj[STENCIL_HANDLE] = handle\n\n  return handle\n}\n"],"names":[],"mappings":"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"}

package/dist/colors/use-color-mode.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../hooks.cjs");
+const theme = require("../theme.cjs");
+const jsxCore = require("@number10/jsx-core");
+function useColorMode() {
+  const [colorMode, setColorModeState] = jsxCore.useState(theme.themeRegistry.getColorMode());
+  jsxCore.useEffect(() => {
+    const unsubscribe = theme.themeRegistry.subscribe(() => {
+      setColorModeState(theme.themeRegistry.getColorMode());
+    });
+    return unsubscribe;
+  }, []);
+  const setColorMode = (mode) => {
+    theme.themeRegistry.setColorMode(mode);
+  };
+  const toggleColorMode = () => {
+    const newMode = colorMode === "light" ? "dark" : "light";
+    setColorMode(newMode);
+  };
+  return {
+    colorMode,
+    setColorMode,
+    toggleColorMode
+  };
+}
+exports.useColorMode = useColorMode;
+//# sourceMappingURL=use-color-mode.cjs.map

package/dist/colors/use-color-mode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.cjs","sources":["../../src/colors/use-color-mode.ts"],"sourcesContent":["/**\n * Color mode management for dynamic theme switching\n */\nimport { useEffect, useState } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to manage color mode (light/dark) dynamically\n * @returns Object with current mode, toggle function, and setter\n * @example\n * ```typescript\n * function ThemeToggle() {\n *   const { colorMode, toggleColorMode } = useColorMode()\n *\n *   return (\n *     <Button onClick={toggleColorMode}>\n *       {colorMode === 'light' ? 'Dark' : 'Light'} Mode\n *     </Button>\n *   )\n * }\n * ```\n */\nexport function useColorMode(): {\n  colorMode: 'light' | 'dark'\n  setColorMode: (mode: 'light' | 'dark') => void\n  toggleColorMode: () => void\n} {\n  const [colorMode, setColorModeState] = useState<'light' | 'dark'>(themeRegistry.getColorMode())\n\n  useEffect(() => {\n    // Subscribe to theme registry changes\n    const unsubscribe = themeRegistry.subscribe(() => {\n      setColorModeState(themeRegistry.getColorMode())\n    })\n\n    return unsubscribe\n  }, [])\n\n  const setColorMode = (mode: 'light' | 'dark') => {\n    themeRegistry.setColorMode(mode)\n  }\n\n  const toggleColorMode = () => {\n    const newMode = colorMode === 'light' ? 'dark' : 'light'\n    setColorMode(newMode)\n  }\n\n  return {\n    colorMode,\n    setColorMode,\n    toggleColorMode,\n  }\n}\n"],"names":["useState","themeRegistry","useEffect"],"mappings":";;;;;AAsBO,SAAS,eAId;AACA,QAAM,CAAC,WAAW,iBAAiB,IAAIA,QAAAA,SAA2BC,MAAAA,cAAc,cAAc;AAE9FC,UAAAA,UAAU,MAAM;AAEd,UAAM,cAAcD,oBAAc,UAAU,MAAM;AAChD,wBAAkBA,MAAAA,cAAc,cAAc;AAAA,IAChD,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,QAAM,eAAe,CAAC,SAA2B;AAC/CA,UAAAA,cAAc,aAAa,IAAI;AAAA,EACjC;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,UAAU,cAAc,UAAU,SAAS;AACjD,iBAAa,OAAO;AAAA,EACtB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/colors/use-color-mode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hook to manage color mode (light/dark) dynamically
+ * @returns Object with current mode, toggle function, and setter
+ * @example
+ * ```typescript
+ * function ThemeToggle() {
+ *   const { colorMode, toggleColorMode } = useColorMode()
+ *
+ *   return (
+ *     <Button onClick={toggleColorMode}>
+ *       {colorMode === 'light' ? 'Dark' : 'Light'} Mode
+ *     </Button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useColorMode(): {
+    colorMode: 'light' | 'dark';
+    setColorMode: (mode: 'light' | 'dark') => void;
+    toggleColorMode: () => void;
+};
+//# sourceMappingURL=use-color-mode.d.ts.map

package/dist/colors/use-color-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.d.ts","sourceRoot":"","sources":["../../src/colors/use-color-mode.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,IAAI;IAC9B,SAAS,EAAE,OAAO,GAAG,MAAM,CAAA;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAA;IAC9C,eAAe,EAAE,MAAM,IAAI,CAAA;CAC5B,CA0BA"}

package/dist/colors/use-color-mode.js

@@ -0,0 +1,28 @@
+import "../hooks.js";
+import { themeRegistry } from "../theme.js";
+import { useState, useEffect } from "@number10/jsx-core";
+function useColorMode() {
+  const [colorMode, setColorModeState] = useState(themeRegistry.getColorMode());
+  useEffect(() => {
+    const unsubscribe = themeRegistry.subscribe(() => {
+      setColorModeState(themeRegistry.getColorMode());
+    });
+    return unsubscribe;
+  }, []);
+  const setColorMode = (mode) => {
+    themeRegistry.setColorMode(mode);
+  };
+  const toggleColorMode = () => {
+    const newMode = colorMode === "light" ? "dark" : "light";
+    setColorMode(newMode);
+  };
+  return {
+    colorMode,
+    setColorMode,
+    toggleColorMode
+  };
+}
+export {
+  useColorMode
+};
+//# sourceMappingURL=use-color-mode.js.map

package/dist/colors/use-color-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.js","sources":["../../src/colors/use-color-mode.ts"],"sourcesContent":["/**\n * Color mode management for dynamic theme switching\n */\nimport { useEffect, useState } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to manage color mode (light/dark) dynamically\n * @returns Object with current mode, toggle function, and setter\n * @example\n * ```typescript\n * function ThemeToggle() {\n *   const { colorMode, toggleColorMode } = useColorMode()\n *\n *   return (\n *     <Button onClick={toggleColorMode}>\n *       {colorMode === 'light' ? 'Dark' : 'Light'} Mode\n *     </Button>\n *   )\n * }\n * ```\n */\nexport function useColorMode(): {\n  colorMode: 'light' | 'dark'\n  setColorMode: (mode: 'light' | 'dark') => void\n  toggleColorMode: () => void\n} {\n  const [colorMode, setColorModeState] = useState<'light' | 'dark'>(themeRegistry.getColorMode())\n\n  useEffect(() => {\n    // Subscribe to theme registry changes\n    const unsubscribe = themeRegistry.subscribe(() => {\n      setColorModeState(themeRegistry.getColorMode())\n    })\n\n    return unsubscribe\n  }, [])\n\n  const setColorMode = (mode: 'light' | 'dark') => {\n    themeRegistry.setColorMode(mode)\n  }\n\n  const toggleColorMode = () => {\n    const newMode = colorMode === 'light' ? 'dark' : 'light'\n    setColorMode(newMode)\n  }\n\n  return {\n    colorMode,\n    setColorMode,\n    toggleColorMode,\n  }\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,eAId;AACA,QAAM,CAAC,WAAW,iBAAiB,IAAI,SAA2B,cAAc,cAAc;AAE9F,YAAU,MAAM;AAEd,UAAM,cAAc,cAAc,UAAU,MAAM;AAChD,wBAAkB,cAAc,cAAc;AAAA,IAChD,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,QAAM,eAAe,CAAC,SAA2B;AAC/C,kBAAc,aAAa,IAAI;AAAA,EACjC;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,UAAU,cAAc,UAAU,SAAS;AACjD,iBAAa,OAAO;AAAA,EACtB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/colors/use-colors.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+require("../hooks.cjs");
+const theme = require("../theme.cjs");
+function useColors() {
+  const localTheme = jsxCore.useTheme();
+  const localThemeRef = jsxCore.useRef(localTheme);
+  localThemeRef.current = localTheme;
+  const [colors, setColors] = jsxCore.useState(
+    localTheme?.__colorPreset ? jsxCore.getPresetWithMode(
+      localTheme.__colorPreset.name,
+      localTheme.__colorPreset.mode ?? "light"
+    ).colors : theme.themeRegistry.getColorTokens()
+  );
+  jsxCore.useEffect(() => {
+    const unsubscribe = theme.themeRegistry.subscribe(() => {
+      const current = localThemeRef.current;
+      if (current?.__colorPreset) {
+        const currentMode = theme.themeRegistry.getColorMode();
+        const preset = jsxCore.getPresetWithMode(
+          current.__colorPreset.name,
+          currentMode
+        );
+        setColors(preset.colors);
+      } else {
+        setColors(theme.themeRegistry.getColorTokens());
+      }
+    });
+    return unsubscribe;
+  }, []);
+  return colors;
+}
+function useThemeSubscription() {
+  const [, forceUpdate] = jsxCore.useState(0);
+  jsxCore.useEffect(() => {
+    const unsubscribe = theme.themeRegistry.subscribe(() => {
+      forceUpdate((n) => n + 1);
+    });
+    return unsubscribe;
+  }, []);
+}
+exports.useColors = useColors;
+exports.useThemeSubscription = useThemeSubscription;
+//# sourceMappingURL=use-colors.cjs.map

package/dist/colors/use-colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-colors.cjs","sources":["../../src/colors/use-colors.ts"],"sourcesContent":["/**\n * Color system hooks for component usage\n */\nimport type { ColorTokens } from '@number10/jsx-core'\nimport { getPresetWithMode } from '@number10/jsx-core'\nimport { useEffect, useRef, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to access color tokens from theme context\n * Automatically updates when color mode or preset changes\n * @returns Current ColorTokens or undefined\n * @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more\n * @example\n * ```typescript\n * // Old way (deprecated):\n * const colors = useColors()\n *\n * // New way:\n * const tokens = useThemeTokens()\n * const colors = tokens?.colors\n * ```\n */\nexport function useColors(): ColorTokens | undefined {\n  const localTheme = useTheme()\n\n  // Track latest localTheme via ref to avoid re-subscribing on every render\n  const localThemeRef = useRef(localTheme)\n  localThemeRef.current = localTheme\n\n  const [colors, setColors] = useState<ColorTokens | undefined>(\n    localTheme?.__colorPreset\n      ? getPresetWithMode(\n          localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n          localTheme.__colorPreset.mode ?? 'light'\n        ).colors\n      : themeRegistry.getColorTokens()\n  )\n\n  useEffect(() => {\n    const unsubscribe = themeRegistry.subscribe(() => {\n      const current = localThemeRef.current\n      if (current?.__colorPreset) {\n        const currentMode = themeRegistry.getColorMode()\n        const preset = getPresetWithMode(\n          current.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n          currentMode\n        )\n        setColors(preset.colors)\n      } else {\n        setColors(themeRegistry.getColorTokens())\n      }\n    })\n    return unsubscribe\n  }, []) // Subscribe once, read latest theme via ref\n\n  return colors\n}\n\n/**\n * Hook to subscribe to theme changes without accessing colors\n * Use this in parent components that don't need colors themselves\n * but want to ensure children re-render when theme changes\n *\n * Note: Since useColors() now triggers re-renders automatically,\n * this hook is mainly useful if you don't need the colors themselves\n * but still want to react to theme changes.\n *\n * @example\n * ```typescript\n * function ParentComponent() {\n *   useThemeSubscription() // Children will re-render on theme changes\n *   return <ChildThatUsesColors />\n * }\n * ```\n */\nexport function useThemeSubscription(): void {\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    const unsubscribe = themeRegistry.subscribe(() => {\n      forceUpdate((n) => n + 1)\n    })\n    return unsubscribe\n  }, [])\n}\n"],"names":["useTheme","useRef","useState","getPresetWithMode","themeRegistry","useEffect"],"mappings":";;;;;AAuBO,SAAS,YAAqC;AACnD,QAAM,aAAaA,QAAAA,SAAA;AAGnB,QAAM,gBAAgBC,QAAAA,OAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,QAAM,CAAC,QAAQ,SAAS,IAAIC,QAAAA;AAAAA,IAC1B,YAAY,gBACRC,QAAAA;AAAAA,MACE,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc,QAAQ;AAAA,IAAA,EACjC,SACFC,MAAAA,cAAc,eAAA;AAAA,EAAe;AAGnCC,UAAAA,UAAU,MAAM;AACd,UAAM,cAAcD,oBAAc,UAAU,MAAM;AAChD,YAAM,UAAU,cAAc;AAC9B,UAAI,SAAS,eAAe;AAC1B,cAAM,cAAcA,MAAAA,cAAc,aAAA;AAClC,cAAM,SAASD,QAAAA;AAAAA,UACb,QAAQ,cAAc;AAAA,UACtB;AAAA,QAAA;AAEF,kBAAU,OAAO,MAAM;AAAA,MACzB,OAAO;AACL,kBAAUC,MAAAA,cAAc,gBAAgB;AAAA,MAC1C;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAmBO,SAAS,uBAA6B;AAC3C,QAAM,GAAG,WAAW,IAAIF,QAAAA,SAAS,CAAC;AAElCG,UAAAA,UAAU,MAAM;AACd,UAAM,cAAcD,oBAAc,UAAU,MAAM;AAChD,kBAAY,CAAC,MAAM,IAAI,CAAC;AAAA,IAC1B,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AACP;;;"}

package/dist/colors/use-colors.d.ts

@@ -0,0 +1,36 @@
+import { ColorTokens } from '@number10/jsx-core';
+/**
+ * Hook to access color tokens from theme context
+ * Automatically updates when color mode or preset changes
+ * @returns Current ColorTokens or undefined
+ * @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more
+ * @example
+ * ```typescript
+ * // Old way (deprecated):
+ * const colors = useColors()
+ *
+ * // New way:
+ * const tokens = useThemeTokens()
+ * const colors = tokens?.colors
+ * ```
+ */
+export declare function useColors(): ColorTokens | undefined;
+/**
+ * Hook to subscribe to theme changes without accessing colors
+ * Use this in parent components that don't need colors themselves
+ * but want to ensure children re-render when theme changes
+ *
+ * Note: Since useColors() now triggers re-renders automatically,
+ * this hook is mainly useful if you don't need the colors themselves
+ * but still want to react to theme changes.
+ *
+ * @example
+ * ```typescript
+ * function ParentComponent() {
+ *   useThemeSubscription() // Children will re-render on theme changes
+ *   return <ChildThatUsesColors />
+ * }
+ * ```
+ */
+export declare function useThemeSubscription(): void;
+//# sourceMappingURL=use-colors.d.ts.map

package/dist/colors/use-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-colors.d.ts","sourceRoot":"","sources":["../../src/colors/use-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAKrD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,IAAI,WAAW,GAAG,SAAS,CAkCnD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAS3C"}

package/dist/colors/use-colors.js

@@ -0,0 +1,45 @@
+import { useTheme, useRef, useState, getPresetWithMode, useEffect } from "@number10/jsx-core";
+import "../hooks.js";
+import { themeRegistry } from "../theme.js";
+function useColors() {
+  const localTheme = useTheme();
+  const localThemeRef = useRef(localTheme);
+  localThemeRef.current = localTheme;
+  const [colors, setColors] = useState(
+    localTheme?.__colorPreset ? getPresetWithMode(
+      localTheme.__colorPreset.name,
+      localTheme.__colorPreset.mode ?? "light"
+    ).colors : themeRegistry.getColorTokens()
+  );
+  useEffect(() => {
+    const unsubscribe = themeRegistry.subscribe(() => {
+      const current = localThemeRef.current;
+      if (current?.__colorPreset) {
+        const currentMode = themeRegistry.getColorMode();
+        const preset = getPresetWithMode(
+          current.__colorPreset.name,
+          currentMode
+        );
+        setColors(preset.colors);
+      } else {
+        setColors(themeRegistry.getColorTokens());
+      }
+    });
+    return unsubscribe;
+  }, []);
+  return colors;
+}
+function useThemeSubscription() {
+  const [, forceUpdate] = useState(0);
+  useEffect(() => {
+    const unsubscribe = themeRegistry.subscribe(() => {
+      forceUpdate((n) => n + 1);
+    });
+    return unsubscribe;
+  }, []);
+}
+export {
+  useColors,
+  useThemeSubscription
+};
+//# sourceMappingURL=use-colors.js.map

package/dist/colors/use-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-colors.js","sources":["../../src/colors/use-colors.ts"],"sourcesContent":["/**\n * Color system hooks for component usage\n */\nimport type { ColorTokens } from '@number10/jsx-core'\nimport { getPresetWithMode } from '@number10/jsx-core'\nimport { useEffect, useRef, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to access color tokens from theme context\n * Automatically updates when color mode or preset changes\n * @returns Current ColorTokens or undefined\n * @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more\n * @example\n * ```typescript\n * // Old way (deprecated):\n * const colors = useColors()\n *\n * // New way:\n * const tokens = useThemeTokens()\n * const colors = tokens?.colors\n * ```\n */\nexport function useColors(): ColorTokens | undefined {\n  const localTheme = useTheme()\n\n  // Track latest localTheme via ref to avoid re-subscribing on every render\n  const localThemeRef = useRef(localTheme)\n  localThemeRef.current = localTheme\n\n  const [colors, setColors] = useState<ColorTokens | undefined>(\n    localTheme?.__colorPreset\n      ? getPresetWithMode(\n          localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n          localTheme.__colorPreset.mode ?? 'light'\n        ).colors\n      : themeRegistry.getColorTokens()\n  )\n\n  useEffect(() => {\n    const unsubscribe = themeRegistry.subscribe(() => {\n      const current = localThemeRef.current\n      if (current?.__colorPreset) {\n        const currentMode = themeRegistry.getColorMode()\n        const preset = getPresetWithMode(\n          current.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n          currentMode\n        )\n        setColors(preset.colors)\n      } else {\n        setColors(themeRegistry.getColorTokens())\n      }\n    })\n    return unsubscribe\n  }, []) // Subscribe once, read latest theme via ref\n\n  return colors\n}\n\n/**\n * Hook to subscribe to theme changes without accessing colors\n * Use this in parent components that don't need colors themselves\n * but want to ensure children re-render when theme changes\n *\n * Note: Since useColors() now triggers re-renders automatically,\n * this hook is mainly useful if you don't need the colors themselves\n * but still want to react to theme changes.\n *\n * @example\n * ```typescript\n * function ParentComponent() {\n *   useThemeSubscription() // Children will re-render on theme changes\n *   return <ChildThatUsesColors />\n * }\n * ```\n */\nexport function useThemeSubscription(): void {\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    const unsubscribe = themeRegistry.subscribe(() => {\n      forceUpdate((n) => n + 1)\n    })\n    return unsubscribe\n  }, [])\n}\n"],"names":[],"mappings":";;;AAuBO,SAAS,YAAqC;AACnD,QAAM,aAAa,SAAA;AAGnB,QAAM,gBAAgB,OAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,QAAM,CAAC,QAAQ,SAAS,IAAI;AAAA,IAC1B,YAAY,gBACR;AAAA,MACE,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc,QAAQ;AAAA,IAAA,EACjC,SACF,cAAc,eAAA;AAAA,EAAe;AAGnC,YAAU,MAAM;AACd,UAAM,cAAc,cAAc,UAAU,MAAM;AAChD,YAAM,UAAU,cAAc;AAC9B,UAAI,SAAS,eAAe;AAC1B,cAAM,cAAc,cAAc,aAAA;AAClC,cAAM,SAAS;AAAA,UACb,QAAQ,cAAc;AAAA,UACtB;AAAA,QAAA;AAEF,kBAAU,OAAO,MAAM;AAAA,MACzB,OAAO;AACL,kBAAU,cAAc,gBAAgB;AAAA,MAC1C;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAmBO,SAAS,uBAA6B;AAC3C,QAAM,GAAG,WAAW,IAAI,SAAS,CAAC;AAElC,YAAU,MAAM;AACd,UAAM,cAAc,cAAc,UAAU,MAAM;AAChD,kBAAY,CAAC,MAAM,IAAI,CAAC;AAAA,IAC1B,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AACP;"}