@wonderlandlabs-pixi-ux/box 1.2.6 → 1.2.7

package/README.md

@@ -1,284 +1,53 @@
 # @wonderlandlabs-pixi-ux/box
 
-Tree-first box layout model / graphic DSL built on Forestry branches. 
-This emulates FlexBox based layout. This module is a data-model of a flex layout system.
-It was designed for Pixi; however, as an abstract DSL for visual trees it may have other uses.
+`box` is a small parent-driven layout model for rectangular children.
 
-## Installation
+The current implementation is centered around:
 
-```bash
-yarn add @wonderlandlabs-pixi-ux/box
-```
+- [`BoxStore`](/Users/bingomanatee/Documents/repos/wonderlandlabs-pixi-ux/packages/box/src/BoxStore.ts)
+- [`ComputeAxis`](/Users/bingomanatee/Documents/repos/wonderlandlabs-pixi-ux/packages/box/src/ComputeAxis.ts)
 
-## Basic Usage
+## Current Model
 
-```ts
-import {
-  ALIGN,
-  BoxTree,
-  UNIT_BASIS,
-} from '@wonderlandlabs-pixi-ux/box';
+- The parent owns alignment.
+- Children provide dimensions.
+- Child `x` / `y` are not part of the happy-path alignment flow.
+- Width and height are computed from the parent container.
+- All units are relative to the parent in the dimension they address.
 
-const layout = new BoxTree({
-  id: 'root',
-  styleName: 'button',
-  globalVerb: [],
-  area: {
-    x: 60,
-    y: 50,
-    width: { mode: UNIT_BASIS.PX, value: 720 },
-    height: { mode: UNIT_BASIS.PX, value: 340 },
-    px: 's',
-    py: 's',
-  },
-  align: {
-    x: ALIGN.START,
-    y: ALIGN.START,
-    direction: 'column',
-  },
-  children: {
-    header: {
-      styleName: 'header',
-      area: {
-        x: 0,
-        y: 0,
-        width: { mode: UNIT_BASIS.PERCENT, value: 1 },
-        height: { mode: UNIT_BASIS.PX, value: 60 },
-        px: 's',
-        py: 's',
-      },
-      align: { x: 's', y: 's', direction: 'row' },
-    },
-    icon: {
-      styleName: 'icon',
-      modeVerb: ['hover'],
-      area: {
-        x: 0,
-        y: 0,
-        width: { mode: UNIT_BASIS.PX, value: 24 },
-        height: { mode: UNIT_BASIS.PX, value: 24 },
-        px: 's',
-        py: 's',
-      },
-      align: { x: 's', y: 's', direction: 'column' },
-    },
-  },
-});
+That means:
 
-const icon = layout.getChild('icon');
-icon?.toggleModeVerb('selected');
-layout.toggleGlobalVerb('disabled');
-```
+- width-like values resolve against the parent width
+- height-like values resolve against the parent height
+- percent values are always percentages of the parent dimension
+- absolute pixel values are still interpreted within the parent container
 
-## Ux Assignment
+## Flow
 
-`BoxTree` defaults to the built-in Pixi UX map. Override with `assignUx(ux, applyToChildren?)`:
+The current layout pass is:
 
-```ts
-import { BoxUxPixi } from '@wonderlandlabs-pixi-ux/box';
+1. Resolve the main-axis spans for the children.
+2. Complete unresolved fractional spans.
+3. Place children from the parent alignment and the resolved spans.
 
-layout.styles = styles;
-layout.assignUx((box) => new BoxUxPixi(box));
-layout.render(); // calls ux.init() once, then ux.render()
-```
+`ComputeAxis` currently handles the green path for:
 
-`addChild()` inherits the parent UX map function automatically.
+- absolute pixel dimensions
+- percentage dimensions
+- parent-owned start / center / end alignment
 
-Constructor shortcut:
+## Status
 
-```ts
-const layout = new BoxTree({
-  id: 'root',
-  area: { x: 0, y: 0, width: 200, height: 100 },
-  ux: (box) => new BoxUxPixi(box),
-});
-layout.styles = styles;
-```
+This package is mid-refactor.
 
-## Style Definitions
+The active architecture is the simplified `BoxStore` / `ComputeAxis` path in `src/`.
+Older `BoxTree`-style code still exists under [`src/_deprecated`](/Users/bingomanatee/Documents/repos/wonderlandlabs-pixi-ux/packages/box/src/_deprecated), but it is not the current direction.
 
-`BoxTree` integrates with a shared style manager by way of `styleName` and verbs:
+## Test Artifacts
 
-- `styleName` is the noun for that node (`button`, `icon`, `label`, ...)
-- `modeVerb` is node-local state (`hover`, `selected`, ...)
-- `globalVerb` is root-level state shared by all descendants (`disabled`, ...)
+The `ComputeAxis` tests generate:
 
-Use `resolveStyle(styleManager, extraStates?)` to query styles. Resolution order is:
+- SVG diagrams for layout inspection
+- HTML tables for readable scenario metadata
 
-1. Hierarchical nouns (`button.icon`, `toolbar.button.label`, ...)
-2. Fallback to atomic noun (`icon`, `label`, ...)
-
-Combined state list is:
-
-- `globalVerb + modeVerb + extraStates`
-
-```ts
-import { fromJSON } from '@wonderlandlabs-pixi-ux/style-tree';
-
-const styles = fromJSON({
-  button: {
-    icon: {
-      fill: {
-        $*: { color: { r: 0.2, g: 0.2, b: 0.2 }, alpha: 1 },
-        $disabled: { color: { r: 0.45, g: 0.45, b: 0.45 }, alpha: 1 },
-      },
-    },
-  },
-  icon: {
-    fill: {
-      $*: { color: { r: 1, g: 1, b: 1 }, alpha: 1 },
-    },
-  },
-});
-
-const icon = layout.getChild('icon');
-const fillStyle = icon?.resolveStyle(styles, ['pressed']);
-```
-
-## Default Ux
-
-`box` ships with `BoxUxPixi`, a default Pixi UX implementation for `BoxTree`.
-
-Behavior:
-
-- Creates a container when `container` is not provided
-- Uses public `content: MapEnhanced` (a `Map<string, unknown>` subclass)
-- `content.$box` points at the owning `BoxTree`
-- Exposes `ux.getContainer(key): unknown` for renderer-to-renderer handoff:
-  - `ROOT_CONTAINER`, `BACKGROUND_CONTAINER`, `CHILD_CONTAINER`, `CONTENT_CONTAINER`, `OVERLAY_CONTAINER`, `STROKE_CONTAINER`
-- Exposes `ux.attach(targetContainer?)`:
-  - attaches root container to `targetContainer`
-  - if omitted, uses `ux.app?.stage`
-- Pre-populates built-in layers if absent:
-  - `BOX_RENDER_CONTENT_ORDER.BACKGROUND = 0`
-  - `BOX_RENDER_CONTENT_ORDER.CHILDREN = 50`
-  - `BOX_RENDER_CONTENT_ORDER.CONTENT = 75`
-  - `BOX_RENDER_CONTENT_ORDER.OVERLAY = 100`
-- Supports named layer order lookups:
-  - `BOX_UX_ORDER` (`ReadonlyMap<string, number>`)
-  - `setUxOrder(name, zIndex)` with duplicate z-index protection
-  - `getUxOrder(name)` for safe lookup
-- Rebuilds children layer each render by clearing and re-adding child UX containers
-- Draws a background graphic from style props:
-  - `[stylePath].bgColor`
-  - `[stylePath].bgAlpha`
-  - `[stylePath].bgStrokeColor`
-  - `[stylePath].bgStrokeAlpha`
-  - `[stylePath].bgStrokeSize`
-- Exposes `ux.generateStyleMap(box)` with normalized shape:
-  - `fill: { color, alpha }`
-  - `stroke: { color, alpha, width }`
-- Honors `box.isVisible`:
-  - when `false`, detaches (hides) the container without destroying render content
-  - when `true` again, existing layers are reused on next render
-- Iterates `content` and injects non-empty items into root container sorted by each item's `zIndex`
-
-```ts
-import { Graphics } from 'pixi.js';
-import {
-  BOX_RENDER_CONTENT_ORDER,
-  BoxTree,
-  BoxUxPixi,
-} from '@wonderlandlabs-pixi-ux/box';
-import { fromJSON } from '@wonderlandlabs-pixi-ux/style-tree';
-
-const styles = fromJSON({
-  button: {
-    bgColor: { $*: 0x2d3a45 },
-    bgStrokeColor: { $*: 0x8fd3ff },
-    bgStrokeSize: { $*: 2 },
-    icon: {
-      bgColor: { $*: 0x3a4957 },
-    },
-  },
-  icon: {
-    bgColor: { $*: 0x222222 },
-  },
-});
-
-const root = new BoxTree({
-  id: 'root',
-  styleName: 'button',
-  area: { x: 40, y: 30, width: 200, height: 100 },
-  children: {
-    icon: {
-      styleName: 'icon',
-      order: 0,
-      area: { width: 24, height: 24 },
-    },
-  },
-});
-
-root.styles = styles;
-const ux = new BoxUxPixi(root);
-root.render();
-// manual mount
-ux.attach(app.stage);
-
-// custom content layer example:
-const custom = new Graphics();
-custom.zIndex = 76;
-custom.visible = true;
-ux.content.set('CUSTOM', custom);
-ux.content.get('OVERLAY')?.visible = true;
-const ownerBox = ux.content.$box;
-```
-
-## Override Points
-
-`BoxUxBase` is the renderer-agnostic lifecycle base (`init`, `render`, `clear`, visible up/down flow).
-`BoxUxPixi` extends `BoxUxBase` and provides the Pixi-specific containers/graphics behavior.
-
-For custom behavior, return your own UX instance from `assignUx((box) => ...)`, either:
-
-- extending `BoxUxBase` for a new renderer, or
-- extending `BoxUxPixi` for Pixi-specific customization.
-
-Detailed style/composition docs:
-
-- [`README.STYLES.md`](./README.STYLES.md)
-
-## Optional Pixi Debug Rendering
-
-If you just want geometry previews, you can use `boxTreeToPixi`:
-
-```ts
-import { boxTreeToPixi } from '@wonderlandlabs-pixi-ux/box';
-
-const graphics = await boxTreeToPixi(layout, {
-  includeRoot: true,
-  fill: 0x2d3a45,
-  fillAlpha: 0.35,
-  stroke: 0x8fd3ff,
-  strokeAlpha: 0.9,
-  strokeWidth: 2,
-});
-```
-
-## Public API
-
-- `BoxTree`
-- `BoxUx` (UX object type)
-- `BoxUxMapFn`
-- `BoxRenderer` (legacy alias of `BoxUx`)
-- `BoxRenderMapFn` (legacy alias of `BoxUxMapFn`)
-- `MapEnhanced`
-- `BoxUxBase`
-- `BoxUxPixi`
-- `BoxTreeRenderer` (legacy alias of `BoxUxPixi`)
-- `BOX_UX_ORDER`, `getUxOrder`, `setUxOrder`
-- `BOX_RENDER_CONTENT_ORDER`
-- `createBoxTreeState`
-- `resolveTreeMeasurement`
-- `resolveMeasurementPx`
-- `resolveConstraintValuePx`
-- `applyAxisConstraints`
-- `boxTreeToPixi`
-- `boxTreeToSvg`
-- `pathToString`, `pathString`, `combinePaths`
-- `ALIGN`, `AXIS`, `UNIT_BASIS`, `SIZE_MODE`, `SIZE_MODE_INPUT`
-- `TreeStyleNameSchema`, `TreeVerbSchema`, `TreeVerbListSchema`
-
-## Data Model
-
-Use exported BoxTree schemas/types in `src/types.boxtree.ts` and measurement schemas in `src/types.ts` as the source of truth.
+These artifacts are written under [`packages/box/test/artifacts`](/Users/bingomanatee/Documents/repos/wonderlandlabs-pixi-ux/packages/box/test/artifacts) and are ignored by the package-level `.gitignore`.

package/TODO.md

@@ -0,0 +1,10 @@
+# TODO
+
+- Achieve recursive layout so each child can compute and apply layout to its own children.
+- use Immer/diff to only recompute the children that have changed or the children of changed nodes. 
+- Properly compute fractional dimensions on the main axis.
+- Replace the current no-op fractional completion step with remainder distribution across unresolved spans.
+- Decide how overflow should resolve when content exceeds the parent container:
+  squash content to fit, crop content to the container, or allow overflow without intervention.
+- Consider adding min/max sizing constraints, especially if fractional sizing makes alignment too inert.
+- Keep the parent-owned alignment model strict: children define dimensions, parents place them.

package/dist/BoxStore.d.ts

@@ -0,0 +1,7 @@
+import { Forest } from '@wonderlandlabs/forestry4';
+import type { BoxCellType, RectPXType } from './types.js';
+export declare class BoxStore extends Forest<BoxCellType> {
+    update(): void;
+    get location(): RectPXType;
+    alignChildren(): void;
+}

package/dist/BoxStore.js

@@ -0,0 +1,54 @@
+import { Forest } from '@wonderlandlabs/forestry4';
+import { rectToAbsolute } from "./helpers.js";
+import { ComputeAxis } from './ComputeAxis.js';
+export class BoxStore extends Forest {
+    update() {
+        this.alignChildren();
+    }
+    get location() {
+        const { dim, location } = this.value;
+        return rectToAbsolute(dim ?? location);
+    }
+    alignChildren() {
+        const { children, align } = this.value;
+        if (!Array.isArray(children) || children.length === 0) {
+            return;
+        }
+        const myContainer = this.location;
+        if (!myContainer) {
+            throw new Error('cannot align children: store location not set');
+        }
+        const childLocations = new ComputeAxis(align, myContainer, children.map((child) => child.dim)).compute();
+        this.mutate((draft) => {
+            if (!Array.isArray(draft.children)) {
+                return;
+            }
+            draft.children = draft.children.map((child, index) => {
+                const newChild = {
+                    ...child,
+                    location: childLocations[index],
+                };
+                if (Array.isArray(newChild.children) && newChild.children.length > 0) {
+                    updateChildren(newChild);
+                }
+                return newChild;
+            });
+        });
+    }
+}
+function updateChildren(cell) {
+    const { location: myContainer, children, align } = cell;
+    if (!Array.isArray(children) || children.length === 0 || !myContainer)
+        return;
+    const childLocations = new ComputeAxis(align, myContainer, children.map((child) => child.dim)).compute();
+    cell.children = children.map((child, index) => {
+        const newChild = {
+            ...child,
+            location: childLocations[index],
+        };
+        if (Array.isArray(newChild.children) && newChild.children.length > 0) {
+            updateChildren(newChild);
+        }
+        return newChild;
+    });
+}

package/dist/BoxStore.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/html';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const BasicNestedLayout: Story;
+export declare const ComplexFractionalNesting: Story;
+export declare const DeeplyNestedLayout: Story;

package/dist/BoxStore.stories.js

@@ -0,0 +1,213 @@
+import { BoxStore } from './BoxStore.js';
+import { DIR_HORIZ, DIR_VERT, POS_CENTER, POS_END, POS_FILL, POS_START, SIZE_FRACTION, SIZE_PCT, } from './constants.js';
+const meta = {
+    title: 'Box/BoxStore',
+};
+export default meta;
+function escapeHtml(input) {
+    return input
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function renderCellSvg(cell, depth = 0) {
+    const location = cell.location;
+    if (!location)
+        return '';
+    const colors = [
+        ['#d6e4ff', '#1b263b'], // level 0
+        ['#fde2e4', '#5e0b15'], // level 1
+        ['#d8f3dc', '#081c15'], // level 2
+        ['#fff1c1', '#432818'], // level 3
+        ['#e0e1dd', '#0d1b2a'], // level 4
+    ];
+    const [fill, text] = colors[depth % colors.length];
+    const rect = `<rect x="${location.x}" y="${location.y}" width="${location.w}" height="${location.h}" fill="${fill}" stroke="${text}" stroke-width="${Math.max(0.5, 2 - depth * 0.5)}" rx="${Math.max(0, 4 - depth)}" fill-opacity="0.8" />`;
+    const label = `<text x="${location.x + 4}" y="${location.y + 12}" font-family="monospace" font-size="${Math.max(8, 12 - depth * 2)}" fill="${text}">${escapeHtml(cell.name)}</text>`;
+    const childrenSvg = cell.children?.map(child => renderCellSvg(child, depth + 1)).join('') || '';
+    return rect + label + childrenSvg;
+}
+function renderStoreSvg(store) {
+    const root = store.value;
+    const location = store.location;
+    const padding = 20;
+    const diagramWidth = location.w + location.x + padding;
+    const diagramHeight = location.h + location.y + padding;
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${diagramWidth}" height="${diagramHeight}" viewBox="0 0 ${diagramWidth} ${diagramHeight}">`,
+        `<rect x="0" y="0" width="${diagramWidth}" height="${diagramHeight}" fill="#f8f9fa" />`,
+        renderCellSvg({ ...root, location }),
+        `</svg>`,
+    ].join('');
+}
+function renderStoreStory(rootCell) {
+    const store = new BoxStore({ value: rootCell });
+    store.update();
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = `
+        <style>
+            .store-story {
+                padding: 20px;
+                font-family: ui-sans-serif, system-ui, sans-serif;
+            }
+            .canvas-container {
+                background: white;
+                border: 1px solid #ddd;
+                border-radius: 8px;
+                overflow: auto;
+                margin-bottom: 20px;
+            }
+            pre {
+                background: #272822;
+                color: #f8f8f2;
+                padding: 15px;
+                border-radius: 8px;
+                font-size: 12px;
+                overflow: auto;
+            }
+        </style>
+        <div class="store-story">
+            <h2>BoxStore Layout</h2>
+            <div class="canvas-container">
+                ${renderStoreSvg(store)}
+            </div>
+            <h3>Store Configuration</h3>
+            <pre>${escapeHtml(JSON.stringify(rootCell, null, 2))}</pre>
+        </div>
+    `;
+    return wrapper;
+}
+export const BasicNestedLayout = {
+    render: () => renderStoreStory({
+        name: 'root',
+        absolute: true,
+        dim: { x: 10, y: 10, w: 500, h: 400 },
+        align: { direction: DIR_HORIZ, xPosition: POS_START, yPosition: POS_START },
+        children: [
+            {
+                name: 'sidebar',
+                absolute: false,
+                dim: { w: 100, h: { value: 100, unit: SIZE_PCT } },
+                align: { direction: DIR_VERT, xPosition: POS_CENTER, yPosition: POS_START },
+                children: [
+                    { name: 'logo', absolute: false, dim: { w: 60, h: 60 }, align: { direction: DIR_HORIZ } },
+                    { name: 'nav1', absolute: false, dim: { w: 80, h: 30 }, align: { direction: DIR_HORIZ } },
+                    { name: 'nav2', absolute: false, dim: { w: 80, h: 30 }, align: { direction: DIR_HORIZ } },
+                ]
+            },
+            {
+                name: 'content',
+                absolute: false,
+                dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } },
+                align: { direction: DIR_VERT, xPosition: POS_START, yPosition: POS_START },
+                children: [
+                    {
+                        name: 'header',
+                        absolute: false,
+                        dim: { w: { value: 100, unit: SIZE_PCT }, h: 60 },
+                        align: { direction: DIR_HORIZ, xPosition: POS_END, yPosition: POS_CENTER },
+                        children: [
+                            { name: 'user', absolute: false, dim: { w: 40, h: 40 }, align: { direction: DIR_HORIZ } },
+                            { name: 'logout', absolute: false, dim: { w: 60, h: 30 }, align: { direction: DIR_HORIZ } },
+                        ]
+                    },
+                    {
+                        name: 'body',
+                        absolute: false,
+                        dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } },
+                        align: { direction: DIR_HORIZ, xPosition: POS_FILL, yPosition: POS_FILL },
+                        children: [
+                            { name: 'card1', absolute: false, dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                            { name: 'card2', absolute: false, dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                            { name: 'card3', absolute: false, dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+};
+export const ComplexFractionalNesting = {
+    render: () => renderStoreStory({
+        name: 'grid',
+        absolute: true,
+        dim: { x: 10, y: 10, w: 600, h: 600 },
+        align: { direction: DIR_VERT, xPosition: POS_FILL, yPosition: POS_FILL },
+        children: [
+            {
+                name: 'row1',
+                absolute: false,
+                dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } },
+                align: { direction: DIR_HORIZ, xPosition: POS_FILL, yPosition: POS_FILL },
+                children: [
+                    { name: 'r1c1', absolute: false, dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                    { name: 'r1c2', absolute: false, dim: { w: { value: 2, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                ]
+            },
+            {
+                name: 'row2',
+                absolute: false,
+                dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 2, unit: SIZE_FRACTION } },
+                align: { direction: DIR_HORIZ, xPosition: POS_FILL, yPosition: POS_FILL },
+                children: [
+                    { name: 'r2c1', absolute: false, dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } }, align: { direction: DIR_HORIZ } },
+                    {
+                        name: 'r2c2-nested',
+                        absolute: false,
+                        dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } },
+                        align: { direction: DIR_VERT, xPosition: POS_FILL, yPosition: POS_FILL },
+                        children: [
+                            { name: 'inner1', absolute: false, dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } }, align: { direction: DIR_HORIZ } },
+                            { name: 'inner2', absolute: false, dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } }, align: { direction: DIR_HORIZ } },
+                        ]
+                    },
+                ]
+            }
+        ]
+    })
+};
+export const DeeplyNestedLayout = {
+    render: () => renderStoreStory({
+        name: 'root',
+        absolute: true,
+        dim: { x: 10, y: 10, w: 400, h: 400 },
+        align: { direction: DIR_VERT, xPosition: POS_FILL, yPosition: POS_FILL },
+        children: [
+            {
+                name: 'L1',
+                absolute: false,
+                dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } },
+                align: { direction: DIR_HORIZ, xPosition: POS_FILL, yPosition: POS_FILL },
+                children: [
+                    {
+                        name: 'L2',
+                        absolute: false,
+                        dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } },
+                        align: { direction: DIR_VERT, xPosition: POS_FILL, yPosition: POS_FILL },
+                        children: [
+                            {
+                                name: 'L3',
+                                absolute: false,
+                                dim: { w: { value: 100, unit: SIZE_PCT }, h: { value: 1, unit: SIZE_FRACTION } },
+                                align: { direction: DIR_HORIZ, xPosition: POS_FILL, yPosition: POS_FILL },
+                                children: [
+                                    {
+                                        name: 'L4',
+                                        absolute: false,
+                                        dim: { w: { value: 1, unit: SIZE_FRACTION }, h: { value: 100, unit: SIZE_PCT } },
+                                        align: { direction: DIR_HORIZ, xPosition: POS_CENTER, yPosition: POS_CENTER },
+                                        children: [
+                                            { name: 'Core', absolute: false, dim: { w: 20, h: 20 }, align: { direction: DIR_HORIZ } }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+};

package/dist/ComputeAxis.d.ts

@@ -0,0 +1,17 @@
+import { type BoxAlignType, type BoxSizeObjType, type RectPartialType, type RectPXType } from './types.js';
+export declare class ComputeAxis {
+    #private;
+    readonly align: BoxAlignType;
+    readonly parent: RectPXType;
+    readonly dims: RectPartialType[];
+    widths: Array<number | BoxSizeObjType>;
+    heights: Array<number | BoxSizeObjType>;
+    xPositions: number[];
+    yPositions: number[];
+    mainAxisResolvedSpanTotal: number;
+    effectiveMainAlignment: string;
+    effectiveCrossAlignment: string;
+    constructor(align: BoxAlignType, parent: RectPXType, dims: RectPartialType[]);
+    compute(): RectPXType[];
+    get mainAxisRemainder(): number;
+}