@wonderlandlabs-pixi-ux/button 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# CHANGELOG
+
+## 1.0 
+
+Got basic button rendering in multiple modes and styles
+
+## 1.1
+
+Updated the Button library to use 1.0.1 of the box 

package/README.md

@@ -0,0 +1,103 @@
+# @wonderlandlabs-pixi-ux/button
+
+Composable button store built on `@wonderlandlabs-pixi-ux/box` and styled through `@wonderlandlabs-pixi-ux/style-tree`.
+
+## Installation
+
+```bash
+yarn add @wonderlandlabs-pixi-ux/button @wonderlandlabs-pixi-ux/style-tree
+```
+
+## Basic Usage
+
+```ts
+import { Application, Sprite, Assets } from 'pixi.js';
+import { fromJSON } from '@wonderlandlabs-pixi-ux/style-tree';
+import { ButtonStore } from '@wonderlandlabs-pixi-ux/button';
+
+const app = new Application();
+await app.init({ width: 800, height: 600 });
+
+const styleTree = fromJSON({
+  button: {
+    inline: {
+      padding: { $*: { x: 12, y: 6 } },
+      borderRadius: { $*: 6 },
+      iconGap: { $*: 8 },
+      fill: {
+        $*: { color: { r: 0.2, g: 0.55, b: 0.85 }, alpha: 1 },
+        $hover: { color: { r: 0.25, g: 0.62, b: 0.9 }, alpha: 1 }
+      },
+      label: {
+        fontSize: { $*: 14 },
+        color: { $*: { r: 1, g: 1, b: 1 } },
+        alpha: { $*: 1 }
+      }
+    }
+  }
+});
+
+const texture = await Assets.load('/placeholder-art.png');
+const button = new ButtonStore({
+  id: 'save',
+  mode: 'inline',
+  sprite: new Sprite(texture),
+  label: 'Save',
+  onClick: () => console.log('clicked'),
+}, styleTree, app);
+
+button.setPosition(120, 120);
+app.stage.addChild(button.container);
+button.kickoff();
+```
+
+## Button Config
+
+```ts
+{
+  id: string,
+  mode?: 'icon' | 'iconVertical' | 'text' | 'inline',
+  sprite?: Sprite,
+  icon?: Container,
+  rightSprite?: Sprite,
+  rightIcon?: Container,
+  label?: string,
+  isDisabled?: boolean,
+  onClick?: () => void,
+  variant?: string,
+  bitmapFont?: string,
+}
+```
+
+Mode behavior:
+- `icon`: icon-only.
+- `iconVertical`: icon with label below.
+- `text`: label-only.
+- `inline`: icon + label in a row (optionally right icon too).
+
+If `mode` is omitted it is inferred from available icon/label fields.
+
+## StyleTree Expectations
+
+State keys are read using noun paths under `button` and optional states (`hover`, `disabled`).
+
+Common keys:
+- `button.padding.x`, `button.padding.y`
+- `button.borderRadius`
+- `button.fill.color`, `button.fill.alpha`
+- `button.stroke.color`, `button.stroke.width`, `button.stroke.alpha`
+- `button.label.fontSize`, `button.label.color`, `button.label.alpha`
+- `button.icon.size.x`, `button.icon.size.y`, `button.icon.alpha`
+- Mode-specific variants: `button.inline.*`, `button.text.*`, `button.iconVertical.*`
+
+Variant lookup inserts `variant` after `button` (for example `button.primary.inline.fill.color`).
+
+## Main API
+
+- `setHovered(isHovered)`
+- `setDisabled(isDisabled)`
+- `isHovered`
+- `isDisabled`
+- `mode`
+- `getConfig()`
+- `getPreferredSize()`

package/dist/Button.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/html';
+interface ButtonArgs {
+    mode: 'icon' | 'iconVertical' | 'text' | 'inline';
+}
+declare const meta: Meta<ButtonArgs>;
+export default meta;
+type Story = StoryObj<ButtonArgs>;
+export declare const IconButtons: Story;
+export declare const IconVerticalButtons: Story;
+export declare const TextButtons: Story;
+export declare const InlineButtons: Story;
+export declare const AllModes: Story;

package/dist/Button.stories.js

@@ -0,0 +1,412 @@
+import { Application, Graphics, Sprite, Assets } from 'pixi.js';
+import { StyleTree } from '@wonderlandlabs-pixi-ux/style-tree';
+import { ButtonStore } from './ButtonStore';
+/**
+ * Create a default StyleTree with button styles
+ */
+function createDefaultStyleTree() {
+    const tree = new StyleTree();
+    // Icon button styles
+    tree.set('button.padding.x', [], 8);
+    tree.set('button.padding.y', [], 8);
+    tree.set('button.borderRadius', [], 4);
+    tree.set('button.icon.size.x', [], 32);
+    tree.set('button.icon.size.y', [], 32);
+    tree.set('button.icon.alpha', [], 1);
+    tree.set('button.stroke.color', [], { r: 0.6, g: 0.6, b: 0.6 });
+    tree.set('button.stroke.width', [], 1);
+    tree.set('button.stroke.alpha', [], 1);
+    tree.set('button.label.fontSize', [], 11);
+    tree.set('button.label.color', [], { r: 0.2, g: 0.2, b: 0.2 });
+    tree.set('button.label.alpha', [], 0.8);
+    tree.set('button.label.padding', [], 8);
+    // Icon button hover state
+    tree.set('button.fill.color', ['hover'], { r: 0.9, g: 0.95, b: 1 });
+    tree.set('button.fill.alpha', ['hover'], 1);
+    tree.set('button.stroke.color', ['hover'], { r: 0.4, g: 0.6, b: 0.9 });
+    // Icon button disabled state
+    tree.set('button.icon.alpha', ['disabled'], 0.4);
+    tree.set('button.stroke.alpha', ['disabled'], 0.4);
+    // IconVertical button styles (icon with label below)
+    tree.set('button.iconVertical.padding.x', [], 8);
+    tree.set('button.iconVertical.padding.y', [], 8);
+    tree.set('button.iconVertical.borderRadius', [], 4);
+    tree.set('button.iconVertical.icon.size.x', [], 32);
+    tree.set('button.iconVertical.icon.size.y', [], 32);
+    tree.set('button.iconVertical.icon.alpha', [], 1);
+    tree.set('button.iconVertical.iconGap', [], 6);
+    tree.set('button.iconVertical.stroke.color', [], { r: 0.6, g: 0.6, b: 0.6 });
+    tree.set('button.iconVertical.stroke.width', [], 1);
+    tree.set('button.iconVertical.stroke.alpha', [], 1);
+    tree.set('button.iconVertical.label.fontSize', [], 11);
+    tree.set('button.iconVertical.label.color', [], { r: 0.2, g: 0.2, b: 0.2 });
+    tree.set('button.iconVertical.label.alpha', [], 0.8);
+    // IconVertical button hover state
+    tree.set('button.iconVertical.fill.color', ['hover'], { r: 0.9, g: 0.95, b: 1 });
+    tree.set('button.iconVertical.fill.alpha', ['hover'], 1);
+    tree.set('button.iconVertical.stroke.color', ['hover'], { r: 0.4, g: 0.6, b: 0.9 });
+    // IconVertical button disabled state
+    tree.set('button.iconVertical.icon.alpha', ['disabled'], 0.4);
+    tree.set('button.iconVertical.stroke.alpha', ['disabled'], 0.4);
+    tree.set('button.iconVertical.label.alpha', ['disabled'], 0.4);
+    // Text button styles
+    tree.set('button.text.padding.x', [], 16);
+    tree.set('button.text.padding.y', [], 8);
+    tree.set('button.text.borderRadius', [], 6);
+    tree.set('button.text.fill.color', [], { r: 0.2, g: 0.5, b: 0.8 });
+    tree.set('button.text.fill.alpha', [], 1);
+    tree.set('button.text.label.fontSize', [], 14);
+    tree.set('button.text.label.color', [], { r: 1, g: 1, b: 1 });
+    tree.set('button.text.label.alpha', [], 1);
+    // Text button hover state
+    tree.set('button.text.fill.color', ['hover'], { r: 0.3, g: 0.6, b: 0.9 });
+    // Text button disabled state
+    tree.set('button.text.fill.alpha', ['disabled'], 0.5);
+    tree.set('button.text.label.alpha', ['disabled'], 0.5);
+    // Inline button styles
+    tree.set('button.inline.padding.x', [], 12);
+    tree.set('button.inline.padding.y', [], 8);
+    tree.set('button.inline.borderRadius', [], 6);
+    tree.set('button.inline.iconGap', [], 8);
+    tree.set('button.inline.icon.size.x', [], 20);
+    tree.set('button.inline.icon.size.y', [], 20);
+    tree.set('button.inline.icon.alpha', [], 1);
+    tree.set('button.inline.fill.color', [], { r: 0.15, g: 0.65, b: 0.45 });
+    tree.set('button.inline.fill.alpha', [], 1);
+    tree.set('button.inline.label.fontSize', [], 14);
+    tree.set('button.inline.label.color', [], { r: 1, g: 1, b: 1 });
+    tree.set('button.inline.label.alpha', [], 1);
+    // Inline button hover state - blue 1px border
+    tree.set('button.inline.fill.color', ['hover'], { r: 0.1, g: 0.8, b: 0.6 });
+    tree.set('button.inline.stroke.color', ['hover'], { r: 0.2, g: 0.4, b: 0.9 });
+    tree.set('button.inline.stroke.width', ['hover'], 1);
+    tree.set('button.inline.stroke.alpha', ['hover'], 1);
+    // Inline button disabled state
+    tree.set('button.inline.fill.alpha', ['disabled'], 0.5);
+    tree.set('button.inline.icon.alpha', ['disabled'], 0.5);
+    tree.set('button.inline.label.alpha', ['disabled'], 0.5);
+    // Primary variant (for text/inline buttons)
+    tree.set('button.primary.text.fill.color', [], { r: 0.8, g: 0.2, b: 0.2 });
+    tree.set('button.primary.text.fill.color', ['hover'], { r: 0.9, g: 0.3, b: 0.3 });
+    return tree;
+}
+/**
+ * Create a simple icon graphic (fallback)
+ */
+function createIconGraphic(size, color) {
+    const g = new Graphics();
+    g.rect(0, 0, size, size);
+    g.fill(color);
+    // Add a simple shape inside
+    g.circle(size / 2, size / 2, size / 3);
+    g.fill(0xffffff);
+    return g;
+}
+/**
+ * Create a sprite from the placeholder texture with optional tint
+ */
+function createIconSprite(texture, tint) {
+    const sprite = new Sprite(texture);
+    if (tint !== undefined) {
+        sprite.tint = tint;
+    }
+    return sprite;
+}
+const meta = {
+    title: 'Button',
+    args: {
+        mode: 'icon',
+    },
+    argTypes: {
+        mode: {
+            control: 'select',
+            options: ['icon', 'iconVertical', 'text', 'inline'],
+        },
+    },
+};
+export default meta;
+export const IconButtons = {
+    render: () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.width = '100%';
+        wrapper.style.height = '400px';
+        wrapper.style.position = 'relative';
+        const app = new Application();
+        app.init({
+            width: 800,
+            height: 400,
+            backgroundColor: 0xf5f5f5,
+            antialias: true,
+        }).then(async () => {
+            wrapper.appendChild(app.canvas);
+            // Load placeholder texture
+            const texture = await Assets.load('/placeholder-art.png');
+            const styleTree = createDefaultStyleTree();
+            // Icon-only buttons (no labels) using sprites
+            const button1 = new ButtonStore({
+                id: 'btn-1',
+                mode: 'icon',
+                sprite: createIconSprite(texture, 0x4488cc),
+                onClick: () => console.log('Blue clicked'),
+            }, styleTree, app);
+            button1.setPosition(50, 50);
+            const button2 = new ButtonStore({
+                id: 'btn-2',
+                mode: 'icon',
+                sprite: createIconSprite(texture, 0x44cc88),
+                onClick: () => console.log('Green clicked'),
+            }, styleTree, app);
+            button2.setPosition(110, 50);
+            const button3 = new ButtonStore({
+                id: 'btn-3',
+                mode: 'icon',
+                sprite: createIconSprite(texture, 0xcc8844),
+                isDisabled: true,
+            }, styleTree, app);
+            button3.setPosition(170, 50);
+            app.stage.addChild(button1.container);
+            app.stage.addChild(button2.container);
+            app.stage.addChild(button3.container);
+            button1.kickoff();
+            button2.kickoff();
+            button3.kickoff();
+        });
+        return wrapper;
+    },
+};
+export const IconVerticalButtons = {
+    render: () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.width = '100%';
+        wrapper.style.height = '400px';
+        wrapper.style.position = 'relative';
+        const app = new Application();
+        app.init({
+            width: 800,
+            height: 400,
+            backgroundColor: 0xf5f5f5,
+            antialias: true,
+        }).then(async () => {
+            wrapper.appendChild(app.canvas);
+            // Load placeholder texture
+            const texture = await Assets.load('/placeholder-art.png');
+            const styleTree = createDefaultStyleTree();
+            // IconVertical buttons (icon with label below) using sprites
+            const button1 = new ButtonStore({
+                id: 'btn-1',
+                mode: 'iconVertical',
+                sprite: createIconSprite(texture, 0x4488cc),
+                label: 'Blue',
+                onClick: () => console.log('Blue clicked'),
+            }, styleTree, app);
+            button1.setPosition(50, 50);
+            const button2 = new ButtonStore({
+                id: 'btn-2',
+                mode: 'iconVertical',
+                sprite: createIconSprite(texture, 0x44cc88),
+                label: 'Green',
+                onClick: () => console.log('Green clicked'),
+            }, styleTree, app);
+            button2.setPosition(130, 50);
+            const button3 = new ButtonStore({
+                id: 'btn-3',
+                mode: 'iconVertical',
+                sprite: createIconSprite(texture, 0xcc8844),
+                label: 'Orange',
+                isDisabled: true,
+            }, styleTree, app);
+            button3.setPosition(210, 50);
+            app.stage.addChild(button1.container);
+            app.stage.addChild(button2.container);
+            app.stage.addChild(button3.container);
+            button1.kickoff();
+            button2.kickoff();
+            button3.kickoff();
+        });
+        return wrapper;
+    },
+};
+export const TextButtons = {
+    render: () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.width = '100%';
+        wrapper.style.height = '400px';
+        wrapper.style.position = 'relative';
+        const app = new Application();
+        app.init({
+            width: 800,
+            height: 400,
+            backgroundColor: 0xf5f5f5,
+            antialias: true,
+        }).then(() => {
+            wrapper.appendChild(app.canvas);
+            const styleTree = createDefaultStyleTree();
+            // Create text buttons
+            const button1 = new ButtonStore({
+                id: 'text-btn-1',
+                label: 'Submit',
+                mode: 'text',
+                onClick: () => console.log('Submit clicked'),
+            }, styleTree, app);
+            button1.setPosition(50, 50);
+            const button2 = new ButtonStore({
+                id: 'text-btn-2',
+                label: 'Cancel',
+                mode: 'text',
+                onClick: () => console.log('Cancel clicked'),
+            }, styleTree, app);
+            button2.setPosition(180, 50);
+            const button3 = new ButtonStore({
+                id: 'text-btn-3',
+                label: 'Disabled',
+                mode: 'text',
+                isDisabled: true,
+            }, styleTree, app);
+            button3.setPosition(310, 50);
+            app.stage.addChild(button1.container);
+            app.stage.addChild(button2.container);
+            app.stage.addChild(button3.container);
+            button1.kickoff();
+            button2.kickoff();
+            button3.kickoff();
+        });
+        return wrapper;
+    },
+};
+export const InlineButtons = {
+    render: () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.width = '100%';
+        wrapper.style.height = '400px';
+        wrapper.style.position = 'relative';
+        const app = new Application();
+        app.init({
+            width: 800,
+            height: 400,
+            backgroundColor: 0xf5f5f5,
+            antialias: true,
+        }).then(async () => {
+            wrapper.appendChild(app.canvas);
+            // Load placeholder texture
+            const texture = await Assets.load('/placeholder-art.png');
+            const styleTree = createDefaultStyleTree();
+            // Row 1: Inline buttons with left icon
+            const button1 = new ButtonStore({
+                id: 'inline-btn-1',
+                sprite: createIconSprite(texture, 0x4488cc),
+                label: 'Add Item',
+                mode: 'inline',
+                onClick: () => console.log('Add Item clicked'),
+            }, styleTree, app);
+            button1.setPosition(50, 50);
+            const button2 = new ButtonStore({
+                id: 'inline-btn-2',
+                sprite: createIconSprite(texture, 0xcc4444),
+                label: 'Delete',
+                mode: 'inline',
+                onClick: () => console.log('Delete clicked'),
+            }, styleTree, app);
+            button2.setPosition(200, 50);
+            const button3 = new ButtonStore({
+                id: 'inline-btn-3',
+                sprite: createIconSprite(texture, 0x888888),
+                label: 'Disabled',
+                mode: 'inline',
+                isDisabled: true,
+            }, styleTree, app);
+            button3.setPosition(330, 50);
+            // Row 2: Inline buttons with right icon
+            const button4 = new ButtonStore({
+                id: 'inline-btn-4',
+                label: 'Dropdown',
+                rightSprite: createIconSprite(texture, 0xffffff),
+                mode: 'inline',
+                onClick: () => console.log('Dropdown clicked'),
+            }, styleTree, app);
+            button4.setPosition(50, 120);
+            const button5 = new ButtonStore({
+                id: 'inline-btn-5',
+                sprite: createIconSprite(texture, 0x4488cc),
+                label: 'Both Icons',
+                rightSprite: createIconSprite(texture, 0xffffff),
+                mode: 'inline',
+                onClick: () => console.log('Both Icons clicked'),
+            }, styleTree, app);
+            button5.setPosition(200, 120);
+            app.stage.addChild(button1.container);
+            app.stage.addChild(button2.container);
+            app.stage.addChild(button3.container);
+            app.stage.addChild(button4.container);
+            app.stage.addChild(button5.container);
+            button1.kickoff();
+            button2.kickoff();
+            button3.kickoff();
+            button4.kickoff();
+            button5.kickoff();
+        });
+        return wrapper;
+    },
+};
+export const AllModes = {
+    render: () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.width = '100%';
+        wrapper.style.height = '400px';
+        wrapper.style.position = 'relative';
+        const app = new Application();
+        app.init({
+            width: 800,
+            height: 400,
+            backgroundColor: 0xf5f5f5,
+            antialias: true,
+        }).then(async () => {
+            wrapper.appendChild(app.canvas);
+            // Load placeholder texture
+            const texture = await Assets.load('/placeholder-art.png');
+            const styleTree = createDefaultStyleTree();
+            // Row 1: Icon button (icon only, no label)
+            const iconBtn = new ButtonStore({
+                id: 'icon-demo',
+                mode: 'icon',
+                sprite: createIconSprite(texture, 0x4488cc),
+                onClick: () => console.log('Icon clicked'),
+            }, styleTree, app);
+            iconBtn.setPosition(50, 30);
+            // Row 2: IconVertical button (icon with label below)
+            const iconVerticalBtn = new ButtonStore({
+                id: 'icon-vertical-demo',
+                mode: 'iconVertical',
+                sprite: createIconSprite(texture, 0x8844cc),
+                label: 'Vertical',
+                onClick: () => console.log('IconVertical clicked'),
+            }, styleTree, app);
+            iconVerticalBtn.setPosition(50, 100);
+            // Row 3: Text button
+            const textBtn = new ButtonStore({
+                id: 'text-demo',
+                mode: 'text',
+                label: 'Text Mode',
+                onClick: () => console.log('Text clicked'),
+            }, styleTree, app);
+            textBtn.setPosition(50, 190);
+            // Row 4: Inline button (icon + text side-by-side)
+            const inlineBtn = new ButtonStore({
+                id: 'inline-demo',
+                mode: 'inline',
+                sprite: createIconSprite(texture, 0x44cc88),
+                label: 'Inline Mode',
+                onClick: () => console.log('Inline clicked'),
+            }, styleTree, app);
+            inlineBtn.setPosition(50, 250);
+            app.stage.addChild(iconBtn.container);
+            app.stage.addChild(iconVerticalBtn.container);
+            app.stage.addChild(textBtn.container);
+            app.stage.addChild(inlineBtn.container);
+            iconBtn.kickoff();
+            iconVerticalBtn.kickoff();
+            textBtn.kickoff();
+            inlineBtn.kickoff();
+        });
+        return wrapper;
+    },
+};

package/dist/ButtonStore.d.ts

@@ -0,0 +1,50 @@
+import { BoxTree } from '@wonderlandlabs-pixi-ux/box';
+import { TickerForest } from '@wonderlandlabs-pixi-ux/ticker-forest';
+import type { StyleTree } from '@wonderlandlabs-pixi-ux/style-tree';
+import { Application, Container, type ContainerOptions, type Ticker } from 'pixi.js';
+import type { ButtonConfig, ButtonMode } from './types';
+type ButtonState = {
+    dirty: boolean;
+};
+type TickerSource = Application | {
+    ticker: Ticker;
+};
+/**
+ * ButtonStore - BoxTree-based button layout with Pixi rendering.
+ *
+ * Layout model:
+ * - A root BoxTree node represents button bounds.
+ * - Child BoxTree nodes represent icon/label slots in content space.
+ * - Padding is applied at render placement time (child tree positions remain padding-free).
+ */
+export declare class ButtonStore extends TickerForest<ButtonState> {
+    #private;
+    readonly id: string;
+    constructor(config: ButtonConfig, styleTree: StyleTree, tickerSource: TickerSource, rootProps?: ContainerOptions);
+    get container(): Container;
+    get rect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    get children(): readonly BoxTree[];
+    get isHovered(): boolean;
+    get isDisabled(): boolean;
+    get mode(): ButtonMode;
+    protected isDirty(): boolean;
+    protected clearDirty(): void;
+    markDirty(): void;
+    protected resolve(): void;
+    setHovered(isHovered: boolean): void;
+    setDisabled(isDisabled: boolean): void;
+    setPosition(x: number, y: number): void;
+    setMinSize(minWidth?: number, minHeight?: number): boolean;
+    getConfig(): ButtonConfig;
+    getPreferredSize(): {
+        width: number;
+        height: number;
+    };
+    cleanup(): void;
+}
+export {};