kaplay-plugin-ui 0.0.0 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Menglin "Mark" Xu <mark@remarkablemark.org>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# kaplay-plugin-ui
+
+[![NPM](https://nodei.co/npm/kaplay-plugin-ui.svg)](https://www.npmjs.com/package/kaplay-plugin-ui)
+
+[![NPM version](https://img.shields.io/npm/v/kaplay-plugin-ui.svg)](https://www.npmjs.com/package/kaplay-plugin-ui)
+[![build](https://github.com/remarkablegames/kaplay-plugin-ui/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablegames/kaplay-plugin-ui/actions/workflows/build.yml)
+[![codecov](https://codecov.io/gh/remarkablegames/kaplay-plugin-ui/graph/badge.svg?token=54qf1pKjqI)](https://codecov.io/gh/remarkablegames/kaplay-plugin-ui)
+
+🦖 KAPLAY plugin UI:
+
+- `addButton(text?, opt?)`: button game object
+- `button(text?, opt?)`: button component (use in `add([button(...)])`)
+- `setTheme(theme)`: update theme
+
+## Prerequisites
+
+Install [kaplay](https://www.npmjs.com/package/kaplay):
+
+```sh
+npm install kaplay
+```
+
+## Install
+
+[NPM](https://www.npmjs.com/package/kaplay-plugin-ui):
+
+```sh
+npm install kaplay-plugin-ui
+```
+
+[CDN](https://unpkg.com/browse/kaplay-plugin-ui/):
+
+```html
+<script src="https://unpkg.com/kaplay-plugin-ui@latest/dist/plugin.umd.js"></script>
+```
+
+## Usage
+
+Import the plugin:
+
+```ts
+import kaplay from 'kaplay';
+import { uiPlugin } from 'kaplay-plugin-ui';
+
+const k = kaplay({
+  plugins: [uiPlugin],
+});
+```
+
+Use the plugin:
+
+```ts
+const button = k.addButton('Start', {
+  onClick: () => {
+    k.go('game');
+  },
+});
+```
+
+Customize the theme:
+
+```ts
+k.setTheme({
+  palette: {
+    primary: k.rgb(80, 160, 255),
+    text: k.rgb(255, 255, 255),
+  },
+  shape: {
+    borderRadius: 8,
+  },
+});
+```
+
+To load the plugin using a script:
+
+```html
+<script src="https://unpkg.com/kaplay@latest/dist/kaplay.js"></script>
+<script src="https://unpkg.com/kaplay-plugin-ui@latest/dist/plugin.umd.js"></script>
+
+<script>
+  const k = kaplay({
+    plugins: [KaplayPluginUI.uiPlugin],
+  });
+
+  const button = k.addButton('Start');
+</script>
+```
+
+## Release
+
+Release is automated with [Release Please](https://github.com/googleapis/release-please).
+
+## License
+
+[MIT](https://github.com/remarkablegames/kaplay-plugin-ui/blob/master/LICENSE)

package/dist/plugin.cjs

@@ -0,0 +1,243 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/button.ts
+function createButtonComponent(k, theme, text, opt) {
+	let currentText = text;
+	let currentOpt = { ...opt };
+	const readWidth = () => {
+		return currentOpt.width ?? theme.components.button.width;
+	};
+	const readHeight = () => {
+		return currentOpt.height ?? theme.components.button.height;
+	};
+	const comp = {
+		id: "button",
+		get text() {
+			return currentText;
+		},
+		set text(value) {
+			currentText = value;
+		},
+		get width() {
+			return readWidth();
+		},
+		set width(value) {
+			currentOpt.width = value;
+		},
+		get height() {
+			return readHeight();
+		},
+		set height(value) {
+			currentOpt.height = value;
+		},
+		renderArea() {
+			return new k.Rect(k.vec2(), comp.width, comp.height);
+		},
+		setStyle(next) {
+			currentOpt = {
+				...currentOpt,
+				...next
+			};
+		},
+		add() {},
+		draw() {
+			const width = comp.width;
+			const height = comp.height;
+			const radius = currentOpt.radius ?? theme.shape.borderRadius;
+			const fill = currentOpt.fill ?? theme.palette.primary;
+			const textColor = currentOpt.textColor ?? theme.palette.text;
+			const size = currentOpt.size ?? theme.typography.fontSize;
+			const font = currentOpt.font ?? theme.typography.fontFamily;
+			const drawRect = k.drawRect;
+			drawRect?.({
+				pos: k.vec2(),
+				width,
+				height,
+				color: fill,
+				radius
+			});
+			const drawText = k.drawText;
+			drawText?.({
+				text: currentText,
+				pos: k.vec2(width / 2, height / 2),
+				size,
+				font,
+				color: textColor,
+				anchor: "center"
+			});
+		},
+		destroy() {}
+	};
+	return comp;
+}
+function createButtonObject(k, theme, text, opt) {
+	const width = opt.width ?? theme.components.button.width;
+	const height = opt.height ?? theme.components.button.height;
+	const radius = opt.radius ?? theme.shape.borderRadius;
+	const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;
+	const hoverColor = opt.hoverColor ?? theme.palette.hover;
+	const pressedColor = opt.pressedColor ?? theme.palette.pressed;
+	const textColor = opt.textColor ?? theme.palette.text;
+	const size = opt.size ?? theme.typography.fontSize;
+	const font = opt.font ?? theme.typography.fontFamily;
+	const pos = opt.pos ?? k.vec2();
+	const obj = k.add([
+		k.rect(width, height, radius > 0 ? { radius } : void 0),
+		k.pos(pos),
+		k.area(),
+		k.color(baseColor),
+		k.anchor("center")
+	]);
+	const label = obj.add([
+		k.text(text, {
+			size,
+			font
+		}),
+		k.color(textColor),
+		k.anchor("center")
+	]);
+	let currentText = text;
+	let currentColor = baseColor;
+	obj.onClick(() => {
+		obj.color = pressedColor;
+		opt.onClick?.();
+	});
+	obj.onHover(() => {
+		obj.color = hoverColor;
+		obj.scale = k.vec2(1.05, 1.05);
+		k.setCursor("pointer");
+	});
+	obj.onHoverEnd(() => {
+		obj.color = currentColor;
+		obj.scale = k.vec2(1, 1);
+		k.setCursor("default");
+	});
+	obj.setSize = (w, h) => {
+		obj.width = w;
+		obj.height = h;
+	};
+	obj.setButtonColor = (color) => {
+		currentColor = color;
+		obj.color = color;
+	};
+	obj.setButtonText = (value) => {
+		currentText = value;
+		label.text = value;
+	};
+	obj.setButtonTextSize = (value) => {
+		label.textSize = value;
+	};
+	obj.setPosition = (x, y) => {
+		obj.pos = k.vec2(x, y);
+	};
+	label.text = currentText;
+	return obj;
+}
+// src/theme.ts
+const DEFAULT_PRIMARY = "#4f8cff";
+const DEFAULT_TEXT = "#ffffff";
+/** Default theme used when no theme is provided. */
+const defaultTheme = {
+	palette: {
+		primary: DEFAULT_PRIMARY,
+		secondary: DEFAULT_PRIMARY,
+		background: "#111827",
+		surface: "#1f2937",
+		text: DEFAULT_TEXT,
+		textSecondary: DEFAULT_TEXT,
+		hover: DEFAULT_PRIMARY,
+		pressed: DEFAULT_PRIMARY,
+		disabled: "#6b7280",
+		error: "#ef4444"
+	},
+	typography: {
+		fontFamily: "sans-serif",
+		fontSize: 18,
+		fontWeight: 400,
+		lineHeight: 1.2
+	},
+	shape: { borderRadius: 0 },
+	spacing: 8,
+	components: {
+		button: {
+			width: 120,
+			height: 40,
+			minWidth: 120,
+			paddingX: 12,
+			paddingY: 8,
+			textTransform: "none"
+		},
+		modal: {
+			backdropOpacity: .5,
+			borderRadius: 8
+		},
+		tooltip: {
+			background: "#111827",
+			textColor: DEFAULT_TEXT,
+			delay: 300
+		}
+	}
+};
+/** Resolve a partial theme into a fully resolved theme. */
+function resolveTheme(input) {
+	return {
+		palette: {
+			...defaultTheme.palette,
+			...input?.palette
+		},
+		typography: {
+			...defaultTheme.typography,
+			...input?.typography
+		},
+		shape: {
+			...defaultTheme.shape,
+			...input?.shape
+		},
+		spacing: input?.spacing ?? defaultTheme.spacing,
+		components: {
+			button: {
+				...defaultTheme.components.button,
+				...input?.components?.button,
+				width: input?.components?.button?.width ?? input?.components?.button?.minWidth ?? defaultTheme.components.button.width
+			},
+			modal: {
+				...defaultTheme.components.modal,
+				...input?.components?.modal
+			},
+			tooltip: {
+				...defaultTheme.components.tooltip,
+				...input?.components?.tooltip
+			}
+		}
+	};
+}
+// src/plugin.ts
+/** KAPLAY UI plugin. */
+function uiPlugin(k, theme = {}) {
+	let userTheme = theme;
+	let currentTheme = resolveTheme(userTheme);
+	const getTheme = () => currentTheme;
+	const setTheme = (next) => {
+		userTheme = {
+			...userTheme,
+			...next
+		};
+		currentTheme = resolveTheme(userTheme);
+	};
+	const button = (text = "", opt = {}) => {
+		return createButtonComponent(k, currentTheme, text, opt);
+	};
+	const addButton = (text = "", opt = {}) => {
+		return createButtonObject(k, currentTheme, text, opt);
+	};
+	return {
+		button,
+		addButton,
+		setTheme,
+		getTheme
+	};
+}
+exports.createButtonComponent = createButtonComponent;
+exports.createButtonObject = createButtonObject;
+exports.uiPlugin = uiPlugin;
+
+//# sourceMappingURL=plugin.cjs.map

package/dist/plugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.cjs","names":[],"sources":["../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Comp, GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\nexport function createButtonComponent(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt,\n): ButtonComp {\n  let currentText = text;\n  let currentOpt: ButtonCompOpt = { ...opt };\n\n  const readWidth = (): number => {\n    return currentOpt.width ?? theme.components.button.width;\n  };\n\n  const readHeight = (): number => {\n    return currentOpt.height ?? theme.components.button.height;\n  };\n\n  const comp: ButtonComp = {\n    id: 'button',\n    get text() {\n      return currentText;\n    },\n    set text(value: string) {\n      currentText = value;\n    },\n    get width() {\n      return readWidth();\n    },\n    set width(value: number) {\n      currentOpt.width = value;\n    },\n    get height() {\n      return readHeight();\n    },\n    set height(value: number) {\n      currentOpt.height = value;\n    },\n    renderArea() {\n      return new k.Rect(k.vec2(), comp.width, comp.height);\n    },\n    setStyle(next: Partial<ButtonCompOpt>): void {\n      currentOpt = { ...currentOpt, ...next };\n    },\n    add(): void {\n      // No-op: rendering is handled in draw().\n    },\n    draw(): void {\n      const width = comp.width;\n      const height = comp.height;\n      const radius = currentOpt.radius ?? theme.shape.borderRadius;\n      const fill = currentOpt.fill ?? theme.palette.primary;\n      const textColor = currentOpt.textColor ?? theme.palette.text;\n      const size = currentOpt.size ?? theme.typography.fontSize;\n      const font = currentOpt.font ?? theme.typography.fontFamily;\n\n      const drawRect = k.drawRect as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawRect?.({\n        pos: k.vec2(),\n        width,\n        height,\n        color: fill,\n        radius,\n      });\n\n      const drawText = k.drawText as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawText?.({\n        text: currentText,\n        pos: k.vec2(width / 2, height / 2),\n        size,\n        font,\n        color: textColor,\n        anchor: 'center',\n      });\n    },\n    destroy(): void {\n      // No resources to release.\n    },\n  };\n\n  return comp;\n}\n\nexport function createButtonObject(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: Color;\n    hoverColor?: Color;\n    pressedColor?: Color;\n    textColor?: Color;\n  },\n): GameObj {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;\n  const hoverColor = opt.hoverColor ?? theme.palette.hover;\n  const pressedColor = opt.pressedColor ?? theme.palette.pressed;\n  const textColor = opt.textColor ?? theme.palette.text;\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  interface ButtonGameObj {\n    add: (comps: Comp[]) => { text: string; textSize: number };\n    onClick: (cb: () => void) => void;\n    onHover: (cb: () => void) => void;\n    onHoverEnd: (cb: () => void) => void;\n    width: number;\n    height: number;\n    color: unknown;\n    scale: { x: number; y: number };\n    pos: { x: number; y: number };\n    setSize: (w: number, h: number) => void;\n    setButtonColor: (color: Color) => void;\n    setButtonText: (value: string) => void;\n    setButtonTextSize: (value: number) => void;\n    setPosition: (x: number, y: number) => void;\n  }\n\n  const obj = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos as never),\n    k.area(),\n    k.color(baseColor as never),\n    k.anchor('center'),\n  ]) as unknown as ButtonGameObj;\n\n  const label = obj.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]) as GameObj & { text: string; textSize: number };\n\n  let currentText = text;\n  let currentColor: Color = baseColor;\n\n  obj.onClick(() => {\n    obj.color = pressedColor;\n    opt.onClick?.();\n  });\n  obj.onHover(() => {\n    obj.color = hoverColor;\n    obj.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n  obj.onHoverEnd(() => {\n    obj.color = currentColor;\n    obj.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  obj.setSize = (w: number, h: number): void => {\n    obj.width = w;\n    obj.height = h;\n  };\n\n  obj.setButtonColor = (color: Color): void => {\n    currentColor = color;\n    obj.color = color;\n  };\n\n  obj.setButtonText = (value: string): void => {\n    currentText = value;\n    label.text = value;\n  };\n\n  obj.setButtonTextSize = (value: number): void => {\n    label.textSize = value;\n  };\n\n  obj.setPosition = (x: number, y: number): void => {\n    obj.pos = k.vec2(x, y);\n  };\n\n  label.text = currentText;\n\n  return obj as unknown as GameObj;\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst DEFAULT_PRIMARY = '#4f8cff';\nconst DEFAULT_TEXT = '#ffffff';\n\n/** Default theme used when no theme is provided. */\nexport const defaultTheme: Theme = {\n  palette: {\n    primary: DEFAULT_PRIMARY,\n    secondary: DEFAULT_PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: DEFAULT_TEXT,\n    textSecondary: DEFAULT_TEXT,\n    hover: DEFAULT_PRIMARY,\n    pressed: DEFAULT_PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: DEFAULT_TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...defaultTheme.palette, ...input?.palette },\n    typography: { ...defaultTheme.typography, ...input?.typography },\n    shape: { ...defaultTheme.shape, ...input?.shape },\n    spacing: input?.spacing ?? defaultTheme.spacing,\n    components: {\n      button: {\n        ...defaultTheme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          defaultTheme.components.button.width,\n      },\n      modal: {\n        ...defaultTheme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...defaultTheme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButtonComponent, createButtonObject } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  ButtonComp,\n  ButtonCompOpt,\n  Color,\n  DeepPartial,\n  Theme,\n} from './types';\n\nexport { createButtonComponent, createButtonObject } from './button';\nexport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\ndeclare module 'kaplay' {\n  interface KAPLAYCtx {\n    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;\n    addButton: (\n      text?: string,\n      opt?: ButtonCompOpt & {\n        pos?: Vec2;\n        onClick?: () => void;\n        color?: Color;\n        hoverColor?: Color;\n        pressedColor?: Color;\n        textColor?: Color;\n      },\n    ) => GameObj;\n    setTheme: (theme: DeepPartial<Theme>) => void;\n    getTheme: () => Theme;\n  }\n}\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme = (): Theme => currentTheme;\n\n  const setTheme = (next: DeepPartial<Theme>): void => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const button = (text = '', opt: ButtonCompOpt = {}): ButtonComp => {\n    return createButtonComponent(k, currentTheme, text, opt);\n  };\n\n  const addButton = (\n    text = '',\n    opt: ButtonCompOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: Color;\n      hoverColor?: Color;\n      pressedColor?: Color;\n      textColor?: Color;\n    } = {},\n  ): GameObj => {\n    return createButtonObject(k, currentTheme, text, opt);\n  };\n\n  return {\n    button,\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}

package/dist/plugin.d.cts

@@ -0,0 +1,109 @@
+import { Color as Color$1, Comp, GameObj, KAPLAYCtx, Rect, Vec2 } from "kaplay";
+/** Color value accepted by the UI theme and components. */
+type Color = Color$1 | string;
+/** Recursively partial version of a type. */
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]; };
+interface Theme {
+  palette: {
+    primary: Color;
+    secondary: Color;
+    background: Color;
+    surface: Color;
+    text: Color;
+    textSecondary: Color;
+    hover: Color;
+    pressed: Color;
+    disabled: Color;
+    error: Color;
+  };
+  typography: {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number | string;
+    lineHeight: number;
+  };
+  shape: {
+    borderRadius: number;
+  };
+  spacing: number;
+  components: {
+    button: {
+      width: number;
+      height: number;
+      minWidth: number;
+      paddingX: number;
+      paddingY: number;
+      textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    };
+    modal: {
+      backdropOpacity: number;
+      borderRadius: number;
+    };
+    tooltip: {
+      background: Color;
+      textColor: Color;
+      delay: number;
+    };
+  };
+}
+/** Options for a single button. */
+interface ButtonCompOpt {
+  width?: number;
+  height?: number;
+  size?: number;
+  font?: string;
+  fill?: Color;
+  textColor?: Color;
+  radius?: number;
+  hoverFill?: Color;
+  pressedFill?: Color;
+}
+/** The `button` component. */
+interface ButtonComp extends Comp {
+  id: 'button';
+  text: string;
+  width: number;
+  height: number;
+  renderArea(): Rect;
+  setStyle(opt: Partial<ButtonCompOpt>): void;
+}
+export declare function createButtonComponent(k: KAPLAYCtx, theme: Theme, text: string, opt: ButtonCompOpt): ButtonComp;
+export declare function createButtonObject(k: KAPLAYCtx, theme: Theme, text: string, opt: ButtonCompOpt & {
+  pos?: Vec2;
+  onClick?: () => void;
+  color?: Color;
+  hoverColor?: Color;
+  pressedColor?: Color;
+  textColor?: Color;
+}): GameObj;
+declare module 'kaplay' {
+  interface KAPLAYCtx {
+    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;
+    addButton: (text?: string, opt?: ButtonCompOpt & {
+      pos?: Vec2;
+      onClick?: () => void;
+      color?: Color;
+      hoverColor?: Color;
+      pressedColor?: Color;
+      textColor?: Color;
+    }) => GameObj;
+    setTheme: (theme: DeepPartial<Theme>) => void;
+    getTheme: () => Theme;
+  }
+}
+/** KAPLAY UI plugin. */
+export declare function uiPlugin(k: KAPLAYCtx, theme?: DeepPartial<Theme>): {
+  button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;
+  addButton: (text?: string, opt?: ButtonCompOpt & {
+    pos?: Vec2;
+    onClick?: () => void;
+    color?: Color;
+    hoverColor?: Color;
+    pressedColor?: Color;
+    textColor?: Color;
+  }) => GameObj;
+  setTheme: (next: DeepPartial<Theme>) => void;
+  getTheme: () => Theme;
+};
+export type { ButtonComp, ButtonCompOpt, Color, Theme };
+//# sourceMappingURL=plugin.d.cts.map

package/dist/plugin.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.cts","names":["KaplayColor"],"sources":["../src/types.ts","../src/button.ts","../src/plugin.ts"],"mappings":";;KAGY,QAAQA;;KAGR,YAAY,QACrB,WAAW,KAAK,EAAE,oBAAoB,YAAY,EAAE,MAAM,EAAE;UAG9C;EACf;IACE,SAAS;IACT,WAAW;IACX,YAAY;IACZ,SAAS;IACT,MAAM;IACN,eAAe;IACf,OAAO;IACP,SAAS;IACT,UAAU;IACV,OAAO;;EAET;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;EACA;IACE;MACE;MACA;MACA;MACA;MACA;MACA;;IAEF;MACE;MACA;;IAEF;MACE,YAAY;MACZ,WAAW;MACX;;;;;UAMW;EACf;EACA;EACA;EACA;EACA,OAAO;EACP,YAAY;EACZ;EACA,YAAY;EACZ,cAAc;;;UAIC,mBAAmB;EAClC;EACA;EACA;EACA;EACA,cAAc;EACd,SAAS,KAAK,QAAQ;;wBCtER,sBACd,GAAG,WACH,OAAO,OACP,cACA,KAAK,gBACJ;wBA+Ea,mBACd,GAAG,WACH,OAAO,OACP,cACA,KAAK;EACH,MAAM;EACN;EACA,QAAQ;EACR,aAAa;EACb,eAAe;EACf,YAAY;IAEb;;YCpFS;IACR,SAAS,eAAe,MAAM,kBAAkB;IAChD,YACE,eACA,MAAM;MACJ,MAAM;MACN;MACA,QAAQ;MACR,aAAa;MACb,eAAe;MACf,YAAY;UAEX;IACL,WAAW,OAAO,YAAY;IAC9B,gBAAgB;;;;wBAKJ,SAAS,GAAG,WAAW,QAAO,YAAY;EAWxB,SAAA,eAAA,MAAA,kBAAqB;EAM9C,YAAA,eAAA,MAAA;IACH,MAAM;IACN;IACA,QAAQ;IACR,aAAa;IACb,eAAe;IACf,YAAY;QAEb;EAnBqB,WAAA,MAAA,YAAY;EAFf,gBAAA"}

package/dist/plugin.d.mts

@@ -0,0 +1,109 @@
+import { Color as Color$1, Comp, GameObj, KAPLAYCtx, Rect, Vec2 } from "kaplay";
+/** Color value accepted by the UI theme and components. */
+type Color = Color$1 | string;
+/** Recursively partial version of a type. */
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]; };
+interface Theme {
+  palette: {
+    primary: Color;
+    secondary: Color;
+    background: Color;
+    surface: Color;
+    text: Color;
+    textSecondary: Color;
+    hover: Color;
+    pressed: Color;
+    disabled: Color;
+    error: Color;
+  };
+  typography: {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number | string;
+    lineHeight: number;
+  };
+  shape: {
+    borderRadius: number;
+  };
+  spacing: number;
+  components: {
+    button: {
+      width: number;
+      height: number;
+      minWidth: number;
+      paddingX: number;
+      paddingY: number;
+      textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    };
+    modal: {
+      backdropOpacity: number;
+      borderRadius: number;
+    };
+    tooltip: {
+      background: Color;
+      textColor: Color;
+      delay: number;
+    };
+  };
+}
+/** Options for a single button. */
+interface ButtonCompOpt {
+  width?: number;
+  height?: number;
+  size?: number;
+  font?: string;
+  fill?: Color;
+  textColor?: Color;
+  radius?: number;
+  hoverFill?: Color;
+  pressedFill?: Color;
+}
+/** The `button` component. */
+interface ButtonComp extends Comp {
+  id: 'button';
+  text: string;
+  width: number;
+  height: number;
+  renderArea(): Rect;
+  setStyle(opt: Partial<ButtonCompOpt>): void;
+}
+export declare function createButtonComponent(k: KAPLAYCtx, theme: Theme, text: string, opt: ButtonCompOpt): ButtonComp;
+export declare function createButtonObject(k: KAPLAYCtx, theme: Theme, text: string, opt: ButtonCompOpt & {
+  pos?: Vec2;
+  onClick?: () => void;
+  color?: Color;
+  hoverColor?: Color;
+  pressedColor?: Color;
+  textColor?: Color;
+}): GameObj;
+declare module 'kaplay' {
+  interface KAPLAYCtx {
+    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;
+    addButton: (text?: string, opt?: ButtonCompOpt & {
+      pos?: Vec2;
+      onClick?: () => void;
+      color?: Color;
+      hoverColor?: Color;
+      pressedColor?: Color;
+      textColor?: Color;
+    }) => GameObj;
+    setTheme: (theme: DeepPartial<Theme>) => void;
+    getTheme: () => Theme;
+  }
+}
+/** KAPLAY UI plugin. */
+export declare function uiPlugin(k: KAPLAYCtx, theme?: DeepPartial<Theme>): {
+  button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;
+  addButton: (text?: string, opt?: ButtonCompOpt & {
+    pos?: Vec2;
+    onClick?: () => void;
+    color?: Color;
+    hoverColor?: Color;
+    pressedColor?: Color;
+    textColor?: Color;
+  }) => GameObj;
+  setTheme: (next: DeepPartial<Theme>) => void;
+  getTheme: () => Theme;
+};
+export type { ButtonComp, ButtonCompOpt, Color, Theme };
+//# sourceMappingURL=plugin.d.mts.map

package/dist/plugin.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.mts","names":["KaplayColor"],"sources":["../src/types.ts","../src/button.ts","../src/plugin.ts"],"mappings":";;KAGY,QAAQA;;KAGR,YAAY,QACrB,WAAW,KAAK,EAAE,oBAAoB,YAAY,EAAE,MAAM,EAAE;UAG9C;EACf;IACE,SAAS;IACT,WAAW;IACX,YAAY;IACZ,SAAS;IACT,MAAM;IACN,eAAe;IACf,OAAO;IACP,SAAS;IACT,UAAU;IACV,OAAO;;EAET;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;EACA;IACE;MACE;MACA;MACA;MACA;MACA;MACA;;IAEF;MACE;MACA;;IAEF;MACE,YAAY;MACZ,WAAW;MACX;;;;;UAMW;EACf;EACA;EACA;EACA;EACA,OAAO;EACP,YAAY;EACZ;EACA,YAAY;EACZ,cAAc;;;UAIC,mBAAmB;EAClC;EACA;EACA;EACA;EACA,cAAc;EACd,SAAS,KAAK,QAAQ;;wBCtER,sBACd,GAAG,WACH,OAAO,OACP,cACA,KAAK,gBACJ;wBA+Ea,mBACd,GAAG,WACH,OAAO,OACP,cACA,KAAK;EACH,MAAM;EACN;EACA,QAAQ;EACR,aAAa;EACb,eAAe;EACf,YAAY;IAEb;;YCpFS;IACR,SAAS,eAAe,MAAM,kBAAkB;IAChD,YACE,eACA,MAAM;MACJ,MAAM;MACN;MACA,QAAQ;MACR,aAAa;MACb,eAAe;MACf,YAAY;UAEX;IACL,WAAW,OAAO,YAAY;IAC9B,gBAAgB;;;;wBAKJ,SAAS,GAAG,WAAW,QAAO,YAAY;EAWxB,SAAA,eAAA,MAAA,kBAAqB;EAM9C,YAAA,eAAA,MAAA;IACH,MAAM;IACN;IACA,QAAQ;IACR,aAAa;IACb,eAAe;IACf,YAAY;QAEb;EAnBqB,WAAA,MAAA,YAAY;EAFf,gBAAA"}

package/dist/plugin.mjs

@@ -0,0 +1,240 @@
+// src/button.ts
+function createButtonComponent(k, theme, text, opt) {
+	let currentText = text;
+	let currentOpt = { ...opt };
+	const readWidth = () => {
+		return currentOpt.width ?? theme.components.button.width;
+	};
+	const readHeight = () => {
+		return currentOpt.height ?? theme.components.button.height;
+	};
+	const comp = {
+		id: "button",
+		get text() {
+			return currentText;
+		},
+		set text(value) {
+			currentText = value;
+		},
+		get width() {
+			return readWidth();
+		},
+		set width(value) {
+			currentOpt.width = value;
+		},
+		get height() {
+			return readHeight();
+		},
+		set height(value) {
+			currentOpt.height = value;
+		},
+		renderArea() {
+			return new k.Rect(k.vec2(), comp.width, comp.height);
+		},
+		setStyle(next) {
+			currentOpt = {
+				...currentOpt,
+				...next
+			};
+		},
+		add() {},
+		draw() {
+			const width = comp.width;
+			const height = comp.height;
+			const radius = currentOpt.radius ?? theme.shape.borderRadius;
+			const fill = currentOpt.fill ?? theme.palette.primary;
+			const textColor = currentOpt.textColor ?? theme.palette.text;
+			const size = currentOpt.size ?? theme.typography.fontSize;
+			const font = currentOpt.font ?? theme.typography.fontFamily;
+			const drawRect = k.drawRect;
+			drawRect?.({
+				pos: k.vec2(),
+				width,
+				height,
+				color: fill,
+				radius
+			});
+			const drawText = k.drawText;
+			drawText?.({
+				text: currentText,
+				pos: k.vec2(width / 2, height / 2),
+				size,
+				font,
+				color: textColor,
+				anchor: "center"
+			});
+		},
+		destroy() {}
+	};
+	return comp;
+}
+function createButtonObject(k, theme, text, opt) {
+	const width = opt.width ?? theme.components.button.width;
+	const height = opt.height ?? theme.components.button.height;
+	const radius = opt.radius ?? theme.shape.borderRadius;
+	const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;
+	const hoverColor = opt.hoverColor ?? theme.palette.hover;
+	const pressedColor = opt.pressedColor ?? theme.palette.pressed;
+	const textColor = opt.textColor ?? theme.palette.text;
+	const size = opt.size ?? theme.typography.fontSize;
+	const font = opt.font ?? theme.typography.fontFamily;
+	const pos = opt.pos ?? k.vec2();
+	const obj = k.add([
+		k.rect(width, height, radius > 0 ? { radius } : void 0),
+		k.pos(pos),
+		k.area(),
+		k.color(baseColor),
+		k.anchor("center")
+	]);
+	const label = obj.add([
+		k.text(text, {
+			size,
+			font
+		}),
+		k.color(textColor),
+		k.anchor("center")
+	]);
+	let currentText = text;
+	let currentColor = baseColor;
+	obj.onClick(() => {
+		obj.color = pressedColor;
+		opt.onClick?.();
+	});
+	obj.onHover(() => {
+		obj.color = hoverColor;
+		obj.scale = k.vec2(1.05, 1.05);
+		k.setCursor("pointer");
+	});
+	obj.onHoverEnd(() => {
+		obj.color = currentColor;
+		obj.scale = k.vec2(1, 1);
+		k.setCursor("default");
+	});
+	obj.setSize = (w, h) => {
+		obj.width = w;
+		obj.height = h;
+	};
+	obj.setButtonColor = (color) => {
+		currentColor = color;
+		obj.color = color;
+	};
+	obj.setButtonText = (value) => {
+		currentText = value;
+		label.text = value;
+	};
+	obj.setButtonTextSize = (value) => {
+		label.textSize = value;
+	};
+	obj.setPosition = (x, y) => {
+		obj.pos = k.vec2(x, y);
+	};
+	label.text = currentText;
+	return obj;
+}
+// src/theme.ts
+const DEFAULT_PRIMARY = "#4f8cff";
+const DEFAULT_TEXT = "#ffffff";
+/** Default theme used when no theme is provided. */
+const defaultTheme = {
+	palette: {
+		primary: DEFAULT_PRIMARY,
+		secondary: DEFAULT_PRIMARY,
+		background: "#111827",
+		surface: "#1f2937",
+		text: DEFAULT_TEXT,
+		textSecondary: DEFAULT_TEXT,
+		hover: DEFAULT_PRIMARY,
+		pressed: DEFAULT_PRIMARY,
+		disabled: "#6b7280",
+		error: "#ef4444"
+	},
+	typography: {
+		fontFamily: "sans-serif",
+		fontSize: 18,
+		fontWeight: 400,
+		lineHeight: 1.2
+	},
+	shape: { borderRadius: 0 },
+	spacing: 8,
+	components: {
+		button: {
+			width: 120,
+			height: 40,
+			minWidth: 120,
+			paddingX: 12,
+			paddingY: 8,
+			textTransform: "none"
+		},
+		modal: {
+			backdropOpacity: .5,
+			borderRadius: 8
+		},
+		tooltip: {
+			background: "#111827",
+			textColor: DEFAULT_TEXT,
+			delay: 300
+		}
+	}
+};
+/** Resolve a partial theme into a fully resolved theme. */
+function resolveTheme(input) {
+	return {
+		palette: {
+			...defaultTheme.palette,
+			...input?.palette
+		},
+		typography: {
+			...defaultTheme.typography,
+			...input?.typography
+		},
+		shape: {
+			...defaultTheme.shape,
+			...input?.shape
+		},
+		spacing: input?.spacing ?? defaultTheme.spacing,
+		components: {
+			button: {
+				...defaultTheme.components.button,
+				...input?.components?.button,
+				width: input?.components?.button?.width ?? input?.components?.button?.minWidth ?? defaultTheme.components.button.width
+			},
+			modal: {
+				...defaultTheme.components.modal,
+				...input?.components?.modal
+			},
+			tooltip: {
+				...defaultTheme.components.tooltip,
+				...input?.components?.tooltip
+			}
+		}
+	};
+}
+// src/plugin.ts
+/** KAPLAY UI plugin. */
+function uiPlugin(k, theme = {}) {
+	let userTheme = theme;
+	let currentTheme = resolveTheme(userTheme);
+	const getTheme = () => currentTheme;
+	const setTheme = (next) => {
+		userTheme = {
+			...userTheme,
+			...next
+		};
+		currentTheme = resolveTheme(userTheme);
+	};
+	const button = (text = "", opt = {}) => {
+		return createButtonComponent(k, currentTheme, text, opt);
+	};
+	const addButton = (text = "", opt = {}) => {
+		return createButtonObject(k, currentTheme, text, opt);
+	};
+	return {
+		button,
+		addButton,
+		setTheme,
+		getTheme
+	};
+}
+export { createButtonComponent, createButtonObject, uiPlugin };
+
+//# sourceMappingURL=plugin.mjs.map

package/dist/plugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.mjs","names":[],"sources":["../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Comp, GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\nexport function createButtonComponent(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt,\n): ButtonComp {\n  let currentText = text;\n  let currentOpt: ButtonCompOpt = { ...opt };\n\n  const readWidth = (): number => {\n    return currentOpt.width ?? theme.components.button.width;\n  };\n\n  const readHeight = (): number => {\n    return currentOpt.height ?? theme.components.button.height;\n  };\n\n  const comp: ButtonComp = {\n    id: 'button',\n    get text() {\n      return currentText;\n    },\n    set text(value: string) {\n      currentText = value;\n    },\n    get width() {\n      return readWidth();\n    },\n    set width(value: number) {\n      currentOpt.width = value;\n    },\n    get height() {\n      return readHeight();\n    },\n    set height(value: number) {\n      currentOpt.height = value;\n    },\n    renderArea() {\n      return new k.Rect(k.vec2(), comp.width, comp.height);\n    },\n    setStyle(next: Partial<ButtonCompOpt>): void {\n      currentOpt = { ...currentOpt, ...next };\n    },\n    add(): void {\n      // No-op: rendering is handled in draw().\n    },\n    draw(): void {\n      const width = comp.width;\n      const height = comp.height;\n      const radius = currentOpt.radius ?? theme.shape.borderRadius;\n      const fill = currentOpt.fill ?? theme.palette.primary;\n      const textColor = currentOpt.textColor ?? theme.palette.text;\n      const size = currentOpt.size ?? theme.typography.fontSize;\n      const font = currentOpt.font ?? theme.typography.fontFamily;\n\n      const drawRect = k.drawRect as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawRect?.({\n        pos: k.vec2(),\n        width,\n        height,\n        color: fill,\n        radius,\n      });\n\n      const drawText = k.drawText as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawText?.({\n        text: currentText,\n        pos: k.vec2(width / 2, height / 2),\n        size,\n        font,\n        color: textColor,\n        anchor: 'center',\n      });\n    },\n    destroy(): void {\n      // No resources to release.\n    },\n  };\n\n  return comp;\n}\n\nexport function createButtonObject(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: Color;\n    hoverColor?: Color;\n    pressedColor?: Color;\n    textColor?: Color;\n  },\n): GameObj {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;\n  const hoverColor = opt.hoverColor ?? theme.palette.hover;\n  const pressedColor = opt.pressedColor ?? theme.palette.pressed;\n  const textColor = opt.textColor ?? theme.palette.text;\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  interface ButtonGameObj {\n    add: (comps: Comp[]) => { text: string; textSize: number };\n    onClick: (cb: () => void) => void;\n    onHover: (cb: () => void) => void;\n    onHoverEnd: (cb: () => void) => void;\n    width: number;\n    height: number;\n    color: unknown;\n    scale: { x: number; y: number };\n    pos: { x: number; y: number };\n    setSize: (w: number, h: number) => void;\n    setButtonColor: (color: Color) => void;\n    setButtonText: (value: string) => void;\n    setButtonTextSize: (value: number) => void;\n    setPosition: (x: number, y: number) => void;\n  }\n\n  const obj = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos as never),\n    k.area(),\n    k.color(baseColor as never),\n    k.anchor('center'),\n  ]) as unknown as ButtonGameObj;\n\n  const label = obj.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]) as GameObj & { text: string; textSize: number };\n\n  let currentText = text;\n  let currentColor: Color = baseColor;\n\n  obj.onClick(() => {\n    obj.color = pressedColor;\n    opt.onClick?.();\n  });\n  obj.onHover(() => {\n    obj.color = hoverColor;\n    obj.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n  obj.onHoverEnd(() => {\n    obj.color = currentColor;\n    obj.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  obj.setSize = (w: number, h: number): void => {\n    obj.width = w;\n    obj.height = h;\n  };\n\n  obj.setButtonColor = (color: Color): void => {\n    currentColor = color;\n    obj.color = color;\n  };\n\n  obj.setButtonText = (value: string): void => {\n    currentText = value;\n    label.text = value;\n  };\n\n  obj.setButtonTextSize = (value: number): void => {\n    label.textSize = value;\n  };\n\n  obj.setPosition = (x: number, y: number): void => {\n    obj.pos = k.vec2(x, y);\n  };\n\n  label.text = currentText;\n\n  return obj as unknown as GameObj;\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst DEFAULT_PRIMARY = '#4f8cff';\nconst DEFAULT_TEXT = '#ffffff';\n\n/** Default theme used when no theme is provided. */\nexport const defaultTheme: Theme = {\n  palette: {\n    primary: DEFAULT_PRIMARY,\n    secondary: DEFAULT_PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: DEFAULT_TEXT,\n    textSecondary: DEFAULT_TEXT,\n    hover: DEFAULT_PRIMARY,\n    pressed: DEFAULT_PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: DEFAULT_TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...defaultTheme.palette, ...input?.palette },\n    typography: { ...defaultTheme.typography, ...input?.typography },\n    shape: { ...defaultTheme.shape, ...input?.shape },\n    spacing: input?.spacing ?? defaultTheme.spacing,\n    components: {\n      button: {\n        ...defaultTheme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          defaultTheme.components.button.width,\n      },\n      modal: {\n        ...defaultTheme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...defaultTheme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButtonComponent, createButtonObject } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  ButtonComp,\n  ButtonCompOpt,\n  Color,\n  DeepPartial,\n  Theme,\n} from './types';\n\nexport { createButtonComponent, createButtonObject } from './button';\nexport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\ndeclare module 'kaplay' {\n  interface KAPLAYCtx {\n    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;\n    addButton: (\n      text?: string,\n      opt?: ButtonCompOpt & {\n        pos?: Vec2;\n        onClick?: () => void;\n        color?: Color;\n        hoverColor?: Color;\n        pressedColor?: Color;\n        textColor?: Color;\n      },\n    ) => GameObj;\n    setTheme: (theme: DeepPartial<Theme>) => void;\n    getTheme: () => Theme;\n  }\n}\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme = (): Theme => currentTheme;\n\n  const setTheme = (next: DeepPartial<Theme>): void => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const button = (text = '', opt: ButtonCompOpt = {}): ButtonComp => {\n    return createButtonComponent(k, currentTheme, text, opt);\n  };\n\n  const addButton = (\n    text = '',\n    opt: ButtonCompOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: Color;\n      hoverColor?: Color;\n      pressedColor?: Color;\n      textColor?: Color;\n    } = {},\n  ): GameObj => {\n    return createButtonObject(k, currentTheme, text, opt);\n  };\n\n  return {\n    button,\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}

package/dist/plugin.umd.js

@@ -0,0 +1,247 @@
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.KaplayPluginUI = {}));
+})(this, function(exports) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	// src/button.ts
+	function createButtonComponent(k, theme, text, opt) {
+		let currentText = text;
+		let currentOpt = { ...opt };
+		const readWidth = () => {
+			return currentOpt.width ?? theme.components.button.width;
+		};
+		const readHeight = () => {
+			return currentOpt.height ?? theme.components.button.height;
+		};
+		const comp = {
+			id: "button",
+			get text() {
+				return currentText;
+			},
+			set text(value) {
+				currentText = value;
+			},
+			get width() {
+				return readWidth();
+			},
+			set width(value) {
+				currentOpt.width = value;
+			},
+			get height() {
+				return readHeight();
+			},
+			set height(value) {
+				currentOpt.height = value;
+			},
+			renderArea() {
+				return new k.Rect(k.vec2(), comp.width, comp.height);
+			},
+			setStyle(next) {
+				currentOpt = {
+					...currentOpt,
+					...next
+				};
+			},
+			add() {},
+			draw() {
+				const width = comp.width;
+				const height = comp.height;
+				const radius = currentOpt.radius ?? theme.shape.borderRadius;
+				const fill = currentOpt.fill ?? theme.palette.primary;
+				const textColor = currentOpt.textColor ?? theme.palette.text;
+				const size = currentOpt.size ?? theme.typography.fontSize;
+				const font = currentOpt.font ?? theme.typography.fontFamily;
+				const drawRect = k.drawRect;
+				drawRect?.({
+					pos: k.vec2(),
+					width,
+					height,
+					color: fill,
+					radius
+				});
+				const drawText = k.drawText;
+				drawText?.({
+					text: currentText,
+					pos: k.vec2(width / 2, height / 2),
+					size,
+					font,
+					color: textColor,
+					anchor: "center"
+				});
+			},
+			destroy() {}
+		};
+		return comp;
+	}
+	function createButtonObject(k, theme, text, opt) {
+		const width = opt.width ?? theme.components.button.width;
+		const height = opt.height ?? theme.components.button.height;
+		const radius = opt.radius ?? theme.shape.borderRadius;
+		const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;
+		const hoverColor = opt.hoverColor ?? theme.palette.hover;
+		const pressedColor = opt.pressedColor ?? theme.palette.pressed;
+		const textColor = opt.textColor ?? theme.palette.text;
+		const size = opt.size ?? theme.typography.fontSize;
+		const font = opt.font ?? theme.typography.fontFamily;
+		const pos = opt.pos ?? k.vec2();
+		const obj = k.add([
+			k.rect(width, height, radius > 0 ? { radius } : void 0),
+			k.pos(pos),
+			k.area(),
+			k.color(baseColor),
+			k.anchor("center")
+		]);
+		const label = obj.add([
+			k.text(text, {
+				size,
+				font
+			}),
+			k.color(textColor),
+			k.anchor("center")
+		]);
+		let currentText = text;
+		let currentColor = baseColor;
+		obj.onClick(() => {
+			obj.color = pressedColor;
+			opt.onClick?.();
+		});
+		obj.onHover(() => {
+			obj.color = hoverColor;
+			obj.scale = k.vec2(1.05, 1.05);
+			k.setCursor("pointer");
+		});
+		obj.onHoverEnd(() => {
+			obj.color = currentColor;
+			obj.scale = k.vec2(1, 1);
+			k.setCursor("default");
+		});
+		obj.setSize = (w, h) => {
+			obj.width = w;
+			obj.height = h;
+		};
+		obj.setButtonColor = (color) => {
+			currentColor = color;
+			obj.color = color;
+		};
+		obj.setButtonText = (value) => {
+			currentText = value;
+			label.text = value;
+		};
+		obj.setButtonTextSize = (value) => {
+			label.textSize = value;
+		};
+		obj.setPosition = (x, y) => {
+			obj.pos = k.vec2(x, y);
+		};
+		label.text = currentText;
+		return obj;
+	}
+	// src/theme.ts
+	const DEFAULT_PRIMARY = "#4f8cff";
+	const DEFAULT_TEXT = "#ffffff";
+	/** Default theme used when no theme is provided. */
+	const defaultTheme = {
+		palette: {
+			primary: DEFAULT_PRIMARY,
+			secondary: DEFAULT_PRIMARY,
+			background: "#111827",
+			surface: "#1f2937",
+			text: DEFAULT_TEXT,
+			textSecondary: DEFAULT_TEXT,
+			hover: DEFAULT_PRIMARY,
+			pressed: DEFAULT_PRIMARY,
+			disabled: "#6b7280",
+			error: "#ef4444"
+		},
+		typography: {
+			fontFamily: "sans-serif",
+			fontSize: 18,
+			fontWeight: 400,
+			lineHeight: 1.2
+		},
+		shape: { borderRadius: 0 },
+		spacing: 8,
+		components: {
+			button: {
+				width: 120,
+				height: 40,
+				minWidth: 120,
+				paddingX: 12,
+				paddingY: 8,
+				textTransform: "none"
+			},
+			modal: {
+				backdropOpacity: .5,
+				borderRadius: 8
+			},
+			tooltip: {
+				background: "#111827",
+				textColor: DEFAULT_TEXT,
+				delay: 300
+			}
+		}
+	};
+	/** Resolve a partial theme into a fully resolved theme. */
+	function resolveTheme(input) {
+		return {
+			palette: {
+				...defaultTheme.palette,
+				...input?.palette
+			},
+			typography: {
+				...defaultTheme.typography,
+				...input?.typography
+			},
+			shape: {
+				...defaultTheme.shape,
+				...input?.shape
+			},
+			spacing: input?.spacing ?? defaultTheme.spacing,
+			components: {
+				button: {
+					...defaultTheme.components.button,
+					...input?.components?.button,
+					width: input?.components?.button?.width ?? input?.components?.button?.minWidth ?? defaultTheme.components.button.width
+				},
+				modal: {
+					...defaultTheme.components.modal,
+					...input?.components?.modal
+				},
+				tooltip: {
+					...defaultTheme.components.tooltip,
+					...input?.components?.tooltip
+				}
+			}
+		};
+	}
+	// src/plugin.ts
+	/** KAPLAY UI plugin. */
+	function uiPlugin(k, theme = {}) {
+		let userTheme = theme;
+		let currentTheme = resolveTheme(userTheme);
+		const getTheme = () => currentTheme;
+		const setTheme = (next) => {
+			userTheme = {
+				...userTheme,
+				...next
+			};
+			currentTheme = resolveTheme(userTheme);
+		};
+		const button = (text = "", opt = {}) => {
+			return createButtonComponent(k, currentTheme, text, opt);
+		};
+		const addButton = (text = "", opt = {}) => {
+			return createButtonObject(k, currentTheme, text, opt);
+		};
+		return {
+			button,
+			addButton,
+			setTheme,
+			getTheme
+		};
+	}
+	exports.createButtonComponent = createButtonComponent;
+	exports.createButtonObject = createButtonObject;
+	exports.uiPlugin = uiPlugin;
+});
+
+//# sourceMappingURL=plugin.umd.js.map

package/dist/plugin.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.umd.js","names":[],"sources":["../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Comp, GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\nexport function createButtonComponent(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt,\n): ButtonComp {\n  let currentText = text;\n  let currentOpt: ButtonCompOpt = { ...opt };\n\n  const readWidth = (): number => {\n    return currentOpt.width ?? theme.components.button.width;\n  };\n\n  const readHeight = (): number => {\n    return currentOpt.height ?? theme.components.button.height;\n  };\n\n  const comp: ButtonComp = {\n    id: 'button',\n    get text() {\n      return currentText;\n    },\n    set text(value: string) {\n      currentText = value;\n    },\n    get width() {\n      return readWidth();\n    },\n    set width(value: number) {\n      currentOpt.width = value;\n    },\n    get height() {\n      return readHeight();\n    },\n    set height(value: number) {\n      currentOpt.height = value;\n    },\n    renderArea() {\n      return new k.Rect(k.vec2(), comp.width, comp.height);\n    },\n    setStyle(next: Partial<ButtonCompOpt>): void {\n      currentOpt = { ...currentOpt, ...next };\n    },\n    add(): void {\n      // No-op: rendering is handled in draw().\n    },\n    draw(): void {\n      const width = comp.width;\n      const height = comp.height;\n      const radius = currentOpt.radius ?? theme.shape.borderRadius;\n      const fill = currentOpt.fill ?? theme.palette.primary;\n      const textColor = currentOpt.textColor ?? theme.palette.text;\n      const size = currentOpt.size ?? theme.typography.fontSize;\n      const font = currentOpt.font ?? theme.typography.fontFamily;\n\n      const drawRect = k.drawRect as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawRect?.({\n        pos: k.vec2(),\n        width,\n        height,\n        color: fill,\n        radius,\n      });\n\n      const drawText = k.drawText as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawText?.({\n        text: currentText,\n        pos: k.vec2(width / 2, height / 2),\n        size,\n        font,\n        color: textColor,\n        anchor: 'center',\n      });\n    },\n    destroy(): void {\n      // No resources to release.\n    },\n  };\n\n  return comp;\n}\n\nexport function createButtonObject(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: Color;\n    hoverColor?: Color;\n    pressedColor?: Color;\n    textColor?: Color;\n  },\n): GameObj {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;\n  const hoverColor = opt.hoverColor ?? theme.palette.hover;\n  const pressedColor = opt.pressedColor ?? theme.palette.pressed;\n  const textColor = opt.textColor ?? theme.palette.text;\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  interface ButtonGameObj {\n    add: (comps: Comp[]) => { text: string; textSize: number };\n    onClick: (cb: () => void) => void;\n    onHover: (cb: () => void) => void;\n    onHoverEnd: (cb: () => void) => void;\n    width: number;\n    height: number;\n    color: unknown;\n    scale: { x: number; y: number };\n    pos: { x: number; y: number };\n    setSize: (w: number, h: number) => void;\n    setButtonColor: (color: Color) => void;\n    setButtonText: (value: string) => void;\n    setButtonTextSize: (value: number) => void;\n    setPosition: (x: number, y: number) => void;\n  }\n\n  const obj = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos as never),\n    k.area(),\n    k.color(baseColor as never),\n    k.anchor('center'),\n  ]) as unknown as ButtonGameObj;\n\n  const label = obj.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]) as GameObj & { text: string; textSize: number };\n\n  let currentText = text;\n  let currentColor: Color = baseColor;\n\n  obj.onClick(() => {\n    obj.color = pressedColor;\n    opt.onClick?.();\n  });\n  obj.onHover(() => {\n    obj.color = hoverColor;\n    obj.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n  obj.onHoverEnd(() => {\n    obj.color = currentColor;\n    obj.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  obj.setSize = (w: number, h: number): void => {\n    obj.width = w;\n    obj.height = h;\n  };\n\n  obj.setButtonColor = (color: Color): void => {\n    currentColor = color;\n    obj.color = color;\n  };\n\n  obj.setButtonText = (value: string): void => {\n    currentText = value;\n    label.text = value;\n  };\n\n  obj.setButtonTextSize = (value: number): void => {\n    label.textSize = value;\n  };\n\n  obj.setPosition = (x: number, y: number): void => {\n    obj.pos = k.vec2(x, y);\n  };\n\n  label.text = currentText;\n\n  return obj as unknown as GameObj;\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst DEFAULT_PRIMARY = '#4f8cff';\nconst DEFAULT_TEXT = '#ffffff';\n\n/** Default theme used when no theme is provided. */\nexport const defaultTheme: Theme = {\n  palette: {\n    primary: DEFAULT_PRIMARY,\n    secondary: DEFAULT_PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: DEFAULT_TEXT,\n    textSecondary: DEFAULT_TEXT,\n    hover: DEFAULT_PRIMARY,\n    pressed: DEFAULT_PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: DEFAULT_TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...defaultTheme.palette, ...input?.palette },\n    typography: { ...defaultTheme.typography, ...input?.typography },\n    shape: { ...defaultTheme.shape, ...input?.shape },\n    spacing: input?.spacing ?? defaultTheme.spacing,\n    components: {\n      button: {\n        ...defaultTheme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          defaultTheme.components.button.width,\n      },\n      modal: {\n        ...defaultTheme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...defaultTheme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButtonComponent, createButtonObject } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  ButtonComp,\n  ButtonCompOpt,\n  Color,\n  DeepPartial,\n  Theme,\n} from './types';\n\nexport { createButtonComponent, createButtonObject } from './button';\nexport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\ndeclare module 'kaplay' {\n  interface KAPLAYCtx {\n    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;\n    addButton: (\n      text?: string,\n      opt?: ButtonCompOpt & {\n        pos?: Vec2;\n        onClick?: () => void;\n        color?: Color;\n        hoverColor?: Color;\n        pressedColor?: Color;\n        textColor?: Color;\n      },\n    ) => GameObj;\n    setTheme: (theme: DeepPartial<Theme>) => void;\n    getTheme: () => Theme;\n  }\n}\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme = (): Theme => currentTheme;\n\n  const setTheme = (next: DeepPartial<Theme>): void => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const button = (text = '', opt: ButtonCompOpt = {}): ButtonComp => {\n    return createButtonComponent(k, currentTheme, text, opt);\n  };\n\n  const addButton = (\n    text = '',\n    opt: ButtonCompOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: Color;\n      hoverColor?: Color;\n      pressedColor?: Color;\n      textColor?: Color;\n    } = {},\n  ): GameObj => {\n    return createButtonObject(k, currentTheme, text, opt);\n  };\n\n  return {\n    button,\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}

package/dist/plugin.umd.min.js

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.KaplayPluginUI={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e,t,n,r){let i=n,a={...r},o=()=>a.width??t.components.button.width,s=()=>a.height??t.components.button.height,c={id:`button`,get text(){return i},set text(e){i=e},get width(){return o()},set width(e){a.width=e},get height(){return s()},set height(e){a.height=e},renderArea(){return new e.Rect(e.vec2(),c.width,c.height)},setStyle(e){a={...a,...e}},add(){},draw(){let n=c.width,r=c.height,o=a.radius??t.shape.borderRadius,s=a.fill??t.palette.primary,l=a.textColor??t.palette.text,u=a.size??t.typography.fontSize,d=a.font??t.typography.fontFamily,f=e.drawRect;f?.({pos:e.vec2(),width:n,height:r,color:s,radius:o});let p=e.drawText;p?.({text:i,pos:e.vec2(n/2,r/2),size:u,font:d,color:l,anchor:`center`})},destroy(){}};return c}function n(e,t,n,r){let i=r.width??t.components.button.width,a=r.height??t.components.button.height,o=r.radius??t.shape.borderRadius,s=r.color??r.fill??t.palette.primary,c=r.hoverColor??t.palette.hover,l=r.pressedColor??t.palette.pressed,u=r.textColor??t.palette.text,d=r.size??t.typography.fontSize,f=r.font??t.typography.fontFamily,p=r.pos??e.vec2(),m=e.add([e.rect(i,a,o>0?{radius:o}:void 0),e.pos(p),e.area(),e.color(s),e.anchor(`center`)]),h=m.add([e.text(n,{size:d,font:f}),e.color(u),e.anchor(`center`)]),g=n,_=s;return m.onClick(()=>{m.color=l,r.onClick?.()}),m.onHover(()=>{m.color=c,m.scale=e.vec2(1.05,1.05),e.setCursor(`pointer`)}),m.onHoverEnd(()=>{m.color=_,m.scale=e.vec2(1,1),e.setCursor(`default`)}),m.setSize=(e,t)=>{m.width=e,m.height=t},m.setButtonColor=e=>{_=e,m.color=e},m.setButtonText=e=>{g=e,h.text=e},m.setButtonTextSize=e=>{h.textSize=e},m.setPosition=(t,n)=>{m.pos=e.vec2(t,n)},h.text=g,m}let r=`#4f8cff`,i=`#ffffff`,a={palette:{primary:r,secondary:r,background:`#111827`,surface:`#1f2937`,text:i,textSecondary:i,hover:r,pressed:r,disabled:`#6b7280`,error:`#ef4444`},typography:{fontFamily:`sans-serif`,fontSize:18,fontWeight:400,lineHeight:1.2},shape:{borderRadius:0},spacing:8,components:{button:{width:120,height:40,minWidth:120,paddingX:12,paddingY:8,textTransform:`none`},modal:{backdropOpacity:.5,borderRadius:8},tooltip:{background:`#111827`,textColor:i,delay:300}}};function o(e){return{palette:{...a.palette,...e?.palette},typography:{...a.typography,...e?.typography},shape:{...a.shape,...e?.shape},spacing:e?.spacing??a.spacing,components:{button:{...a.components.button,...e?.components?.button,width:e?.components?.button?.width??e?.components?.button?.minWidth??a.components.button.width},modal:{...a.components.modal,...e?.components?.modal},tooltip:{...a.components.tooltip,...e?.components?.tooltip}}}}function s(e,r={}){let i=r,a=o(i);return{button:(n=``,r={})=>t(e,a,n,r),addButton:(t=``,r={})=>n(e,a,t,r),setTheme:e=>{i={...i,...e},a=o(i)},getTheme:()=>a}}e.createButtonComponent=t,e.createButtonObject=n,e.uiPlugin=s});
+//# sourceMappingURL=plugin.umd.min.js.map

package/dist/plugin.umd.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.umd.min.js","names":["factory","global","exports","createButtonComponent","currentText","text","currentOpt","opt","readWidth","theme","readHeight","comp","value","k","next","width","height","radius","fill","textColor","size","font","drawRect","drawText","createButtonObject","baseColor","hoverColor","pressedColor","pos","obj","label","currentColor","w","h","color","x","y","DEFAULT_PRIMARY","DEFAULT_TEXT","defaultTheme","resolveTheme","input","uiPlugin","userTheme","currentTheme"],"sources":["../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Comp, GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\nexport function createButtonComponent(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt,\n): ButtonComp {\n  let currentText = text;\n  let currentOpt: ButtonCompOpt = { ...opt };\n\n  const readWidth = (): number => {\n    return currentOpt.width ?? theme.components.button.width;\n  };\n\n  const readHeight = (): number => {\n    return currentOpt.height ?? theme.components.button.height;\n  };\n\n  const comp: ButtonComp = {\n    id: 'button',\n    get text() {\n      return currentText;\n    },\n    set text(value: string) {\n      currentText = value;\n    },\n    get width() {\n      return readWidth();\n    },\n    set width(value: number) {\n      currentOpt.width = value;\n    },\n    get height() {\n      return readHeight();\n    },\n    set height(value: number) {\n      currentOpt.height = value;\n    },\n    renderArea() {\n      return new k.Rect(k.vec2(), comp.width, comp.height);\n    },\n    setStyle(next: Partial<ButtonCompOpt>): void {\n      currentOpt = { ...currentOpt, ...next };\n    },\n    add(): void {\n      // No-op: rendering is handled in draw().\n    },\n    draw(): void {\n      const width = comp.width;\n      const height = comp.height;\n      const radius = currentOpt.radius ?? theme.shape.borderRadius;\n      const fill = currentOpt.fill ?? theme.palette.primary;\n      const textColor = currentOpt.textColor ?? theme.palette.text;\n      const size = currentOpt.size ?? theme.typography.fontSize;\n      const font = currentOpt.font ?? theme.typography.fontFamily;\n\n      const drawRect = k.drawRect as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawRect?.({\n        pos: k.vec2(),\n        width,\n        height,\n        color: fill,\n        radius,\n      });\n\n      const drawText = k.drawText as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawText?.({\n        text: currentText,\n        pos: k.vec2(width / 2, height / 2),\n        size,\n        font,\n        color: textColor,\n        anchor: 'center',\n      });\n    },\n    destroy(): void {\n      // No resources to release.\n    },\n  };\n\n  return comp;\n}\n\nexport function createButtonObject(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: Color;\n    hoverColor?: Color;\n    pressedColor?: Color;\n    textColor?: Color;\n  },\n): GameObj {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;\n  const hoverColor = opt.hoverColor ?? theme.palette.hover;\n  const pressedColor = opt.pressedColor ?? theme.palette.pressed;\n  const textColor = opt.textColor ?? theme.palette.text;\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  interface ButtonGameObj {\n    add: (comps: Comp[]) => { text: string; textSize: number };\n    onClick: (cb: () => void) => void;\n    onHover: (cb: () => void) => void;\n    onHoverEnd: (cb: () => void) => void;\n    width: number;\n    height: number;\n    color: unknown;\n    scale: { x: number; y: number };\n    pos: { x: number; y: number };\n    setSize: (w: number, h: number) => void;\n    setButtonColor: (color: Color) => void;\n    setButtonText: (value: string) => void;\n    setButtonTextSize: (value: number) => void;\n    setPosition: (x: number, y: number) => void;\n  }\n\n  const obj = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos as never),\n    k.area(),\n    k.color(baseColor as never),\n    k.anchor('center'),\n  ]) as unknown as ButtonGameObj;\n\n  const label = obj.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]) as GameObj & { text: string; textSize: number };\n\n  let currentText = text;\n  let currentColor: Color = baseColor;\n\n  obj.onClick(() => {\n    obj.color = pressedColor;\n    opt.onClick?.();\n  });\n  obj.onHover(() => {\n    obj.color = hoverColor;\n    obj.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n  obj.onHoverEnd(() => {\n    obj.color = currentColor;\n    obj.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  obj.setSize = (w: number, h: number): void => {\n    obj.width = w;\n    obj.height = h;\n  };\n\n  obj.setButtonColor = (color: Color): void => {\n    currentColor = color;\n    obj.color = color;\n  };\n\n  obj.setButtonText = (value: string): void => {\n    currentText = value;\n    label.text = value;\n  };\n\n  obj.setButtonTextSize = (value: number): void => {\n    label.textSize = value;\n  };\n\n  obj.setPosition = (x: number, y: number): void => {\n    obj.pos = k.vec2(x, y);\n  };\n\n  label.text = currentText;\n\n  return obj as unknown as GameObj;\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst DEFAULT_PRIMARY = '#4f8cff';\nconst DEFAULT_TEXT = '#ffffff';\n\n/** Default theme used when no theme is provided. */\nexport const defaultTheme: Theme = {\n  palette: {\n    primary: DEFAULT_PRIMARY,\n    secondary: DEFAULT_PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: DEFAULT_TEXT,\n    textSecondary: DEFAULT_TEXT,\n    hover: DEFAULT_PRIMARY,\n    pressed: DEFAULT_PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: DEFAULT_TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...defaultTheme.palette, ...input?.palette },\n    typography: { ...defaultTheme.typography, ...input?.typography },\n    shape: { ...defaultTheme.shape, ...input?.shape },\n    spacing: input?.spacing ?? defaultTheme.spacing,\n    components: {\n      button: {\n        ...defaultTheme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          defaultTheme.components.button.width,\n      },\n      modal: {\n        ...defaultTheme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...defaultTheme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButtonComponent, createButtonObject } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  ButtonComp,\n  ButtonCompOpt,\n  Color,\n  DeepPartial,\n  Theme,\n} from './types';\n\nexport { createButtonComponent, createButtonObject } from './button';\nexport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\ndeclare module 'kaplay' {\n  interface KAPLAYCtx {\n    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;\n    addButton: (\n      text?: string,\n      opt?: ButtonCompOpt & {\n        pos?: Vec2;\n        onClick?: () => void;\n        color?: Color;\n        hoverColor?: Color;\n        pressedColor?: Color;\n        textColor?: Color;\n      },\n    ) => GameObj;\n    setTheme: (theme: DeepPartial<Theme>) => void;\n    getTheme: () => Theme;\n  }\n}\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme = (): Theme => currentTheme;\n\n  const setTheme = (next: DeepPartial<Theme>): void => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const button = (text = '', opt: ButtonCompOpt = {}): ButtonComp => {\n    return createButtonComponent(k, currentTheme, text, opt);\n  };\n\n  const addButton = (\n    text = '',\n    opt: ButtonCompOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: Color;\n      hoverColor?: Color;\n      pressedColor?: Color;\n      textColor?: Color;\n    } = {},\n  ): GameObj => {\n    return createButtonObject(k, currentTheme, text, opt);\n  };\n\n  return {\n    button,\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}

package/global.d.ts

@@ -0,0 +1,7 @@
+import type { uiPlugin } from './dist/plugin.cjs';
+
+declare global {
+  var uiPlugin: uiPlugin;
+}
+
+export {};

package/package.json

@@ -1,4 +1,98 @@
 {
   "name": "kaplay-plugin-ui",
-  "version": "0.0.0"
+  "version": "1.0.0",
+  "description": "Kaplay plugin UI",
+  "author": "Mark <mark@remarkablemark.org> (https://remarkablemark.org)",
+  "main": "./dist/plugin.cjs",
+  "module": "./dist/plugin.mjs",
+  "types": "./dist/plugin.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/plugin.d.mts",
+        "default": "./dist/plugin.mjs"
+      },
+      "require": {
+        "types": "./dist/plugin.d.cts",
+        "default": "./dist/plugin.cjs"
+      }
+    },
+    "./global": {
+      "import": {
+        "types": "./global.d.ts",
+        "default": "./global.js"
+      },
+      "require": {
+        "types": "./global.d.ts",
+        "default": "./global.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rm -rf coverage dist docs",
+    "docs": "typedoc",
+    "docs:watch": "npm run docs -- --watch",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:package": "publint",
+    "lint:tsc": "tsc",
+    "lint:types": "npx @arethetypeswrong/cli --pack",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build && npm run lint && npm run lint:tsc && npm run test:ci",
+    "start": "vite --open",
+    "test": "vitest run",
+    "test:ci": "CI=true npm test -- --color --coverage",
+    "test:watch": "vitest --coverage.enabled=false"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/remarkablegames/kaplay-plugin-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/remarkablegames/kaplay-plugin-ui/issues"
+  },
+  "keywords": [
+    "kaplay",
+    "plugin",
+    "ui",
+    "game"
+  ],
+  "peerDependencies": {
+    "kaplay": "*"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "21.2.4",
+    "@commitlint/config-conventional": "21.2.4",
+    "@eslint/js": "10.0.1",
+    "@types/node": "26.6.6",
+    "@vitest/coverage-v8": "5.0.5",
+    "eslint": "10.13.0",
+    "eslint-plugin-prettier": "5.5.7",
+    "eslint-plugin-simple-import-sort": "14.0.0",
+    "eslint-plugin-tsdoc": "0.5.4",
+    "husky": "9.1.7",
+    "kaplay": "3001.0.19",
+    "lint-staged": "17.6.0",
+    "prettier": "3.9.10",
+    "publint": "0.3.25",
+    "tsdown": "0.23.4",
+    "typedoc": "0.28.20",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.1",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
+  },
+  "files": [
+    "dist/",
+    "global.d.ts",
+    "global.js"
+  ],
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/remarkablemark"
+    }
+  ],
+  "license": "MIT"
 }