kaplay-plugin-ui 1.0.0 → 1.0.1

package/README.md

@@ -6,11 +6,11 @@
 [![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:
+🦖 KAPLAY plugin UI (see [API](#api)):
 
-- `addButton(text?, opt?)`: button game object
-- `button(text?, opt?)`: button component (use in `add([button(...)])`)
-- `setTheme(theme)`: update theme
+- `addButton`
+- `getTheme`
+- `setTheme`
 
 ## Prerequisites
 
@@ -47,28 +47,10 @@ const k = kaplay({
 });
 ```
 
-Use the plugin:
-
-```ts
-const button = k.addButton('Start', {
-  onClick: () => {
-    k.go('game');
-  },
-});
-```
-
-Customize the theme:
+Import the plugin's global TypeScript definitions:
 
 ```ts
-k.setTheme({
-  palette: {
-    primary: k.rgb(80, 160, 255),
-    text: k.rgb(255, 255, 255),
-  },
-  shape: {
-    borderRadius: 8,
-  },
-});
+import 'kaplay-plugin-ui/global';
 ```
 
 To load the plugin using a script:
@@ -86,6 +68,61 @@ To load the plugin using a script:
 </script>
 ```
 
+Use the plugin:
+
+```ts
+k.setTheme({
+  shape: {
+    borderRadius: 8,
+  },
+});
+
+k.addButton('Start', {
+  onClick: () => {
+    k.go('game');
+  },
+});
+```
+
+## API
+
+### Button
+
+Add button game object:
+
+```ts
+addButton(text, opt);
+```
+
+Update button text:
+
+```ts
+const button = addButton(text);
+button.label.text = 'Hello';
+```
+
+### Theme
+
+Retrieve theme:
+
+```ts
+getTheme();
+```
+
+Customize theme:
+
+```ts
+setTheme({
+  palette: {
+    primary: rgb(80, 160, 255),
+    text: rgb(255, 255, 255),
+  },
+  shape: {
+    borderRadius: 8,
+  },
+});
+```
+
 ## Release
 
 Release is automated with [Release Please](https://github.com/googleapis/release-please).

package/dist/plugin.cjs

@@ -1,93 +1,36 @@
 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;
+// src/utils.ts
+/**
+* Convert hex string to color or return color.
+*
+* @param k - The Kaplay context.
+* @param color - The hex string or color.
+* @returns The color.
+*/
+function toColor(k, color) {
+	return typeof color === "string" ? k.rgb(color) : color;
 }
-function createButtonObject(k, theme, text, opt) {
+// src/button.ts
+function createButton(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 baseColor = toColor(k, opt.color ?? opt.fill ?? theme.palette.primary);
+	const hoverColor = toColor(k, opt.hoverColor ?? theme.palette.hover);
+	const pressedColor = toColor(k, opt.pressedColor ?? theme.palette.pressed);
+	const textColor = toColor(k, 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([
+	const button = k.add([
 		k.rect(width, height, radius > 0 ? { radius } : void 0),
 		k.pos(pos),
 		k.area(),
+		k.scale(),
 		k.color(baseColor),
 		k.anchor("center")
 	]);
-	const label = obj.add([
+	const label = button.add([
 		k.text(text, {
 			size,
 			font
@@ -95,57 +38,39 @@ function createButtonObject(k, theme, text, opt) {
 		k.color(textColor),
 		k.anchor("center")
 	]);
-	let currentText = text;
-	let currentColor = baseColor;
-	obj.onClick(() => {
-		obj.color = pressedColor;
+	button.onClick(() => {
+		button.color = toColor(k, pressedColor);
 		opt.onClick?.();
 	});
-	obj.onHover(() => {
-		obj.color = hoverColor;
-		obj.scale = k.vec2(1.05, 1.05);
+	button.onHover(() => {
+		button.color = toColor(k, hoverColor);
+		button.scale = k.vec2(1.05, 1.05);
 		k.setCursor("pointer");
 	});
-	obj.onHoverEnd(() => {
-		obj.color = currentColor;
-		obj.scale = k.vec2(1, 1);
+	button.onHoverEnd(() => {
+		button.color = baseColor;
+		button.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);
+	return {
+		...button,
+		label
 	};
-	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 = {
+const PRIMARY = "#4f8cff";
+const TEXT = "#ffffff";
+/** Default theme. */
+const theme = {
 	palette: {
-		primary: DEFAULT_PRIMARY,
-		secondary: DEFAULT_PRIMARY,
+		primary: PRIMARY,
+		secondary: PRIMARY,
 		background: "#111827",
 		surface: "#1f2937",
-		text: DEFAULT_TEXT,
-		textSecondary: DEFAULT_TEXT,
-		hover: DEFAULT_PRIMARY,
-		pressed: DEFAULT_PRIMARY,
+		text: TEXT,
+		textSecondary: TEXT,
+		hover: PRIMARY,
+		pressed: PRIMARY,
 		disabled: "#6b7280",
 		error: "#ef4444"
 	},
@@ -172,7 +97,7 @@ const defaultTheme = {
 		},
 		tooltip: {
 			background: "#111827",
-			textColor: DEFAULT_TEXT,
+			textColor: TEXT,
 			delay: 300
 		}
 	}
@@ -181,30 +106,30 @@ const defaultTheme = {
 function resolveTheme(input) {
 	return {
 		palette: {
-			...defaultTheme.palette,
+			...theme.palette,
 			...input?.palette
 		},
 		typography: {
-			...defaultTheme.typography,
+			...theme.typography,
 			...input?.typography
 		},
 		shape: {
-			...defaultTheme.shape,
+			...theme.shape,
 			...input?.shape
 		},
-		spacing: input?.spacing ?? defaultTheme.spacing,
+		spacing: input?.spacing ?? theme.spacing,
 		components: {
 			button: {
-				...defaultTheme.components.button,
+				...theme.components.button,
 				...input?.components?.button,
-				width: input?.components?.button?.width ?? input?.components?.button?.minWidth ?? defaultTheme.components.button.width
+				width: input?.components?.button?.width ?? input?.components?.button?.minWidth ?? theme.components.button.width
 			},
 			modal: {
-				...defaultTheme.components.modal,
+				...theme.components.modal,
 				...input?.components?.modal
 			},
 			tooltip: {
-				...defaultTheme.components.tooltip,
+				...theme.components.tooltip,
 				...input?.components?.tooltip
 			}
 		}
@@ -223,21 +148,15 @@ function uiPlugin(k, theme = {}) {
 		};
 		currentTheme = resolveTheme(userTheme);
 	};
-	const button = (text = "", opt = {}) => {
-		return createButtonComponent(k, currentTheme, text, opt);
-	};
 	const addButton = (text = "", opt = {}) => {
-		return createButtonObject(k, currentTheme, text, opt);
+		return createButton(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

@@ -1 +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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"}
+{"version":3,"file":"plugin.cjs","names":[],"sources":["../src/utils.ts","../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Color, KAPLAYCtx } from 'kaplay';\n\n/**\n * Convert hex string to color or return color.\n *\n * @param k - The Kaplay context.\n * @param color - The hex string or color.\n * @returns The color.\n */\nexport function toColor(k: KAPLAYCtx, color: string | Color): Color {\n  return typeof color === 'string' ? k.rgb(color) : color;\n}\n","import type { Color, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonOpt, Theme } from './types';\nimport { toColor } from './utils';\n\nexport function createButton(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: string | Color;\n    hoverColor?: string | Color;\n    pressedColor?: string | Color;\n    textColor?: string | Color;\n  },\n) {\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 = toColor(k, opt.color ?? opt.fill ?? theme.palette.primary);\n  const hoverColor = toColor(k, opt.hoverColor ?? theme.palette.hover);\n  const pressedColor = toColor(k, opt.pressedColor ?? theme.palette.pressed);\n  const textColor = toColor(k, 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  const button = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos),\n    k.area(),\n    k.scale(),\n    k.color(baseColor),\n    k.anchor('center'),\n  ]);\n\n  const label = button.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]);\n\n  button.onClick(() => {\n    button.color = toColor(k, pressedColor);\n    opt.onClick?.();\n  });\n\n  button.onHover(() => {\n    button.color = toColor(k, hoverColor);\n    button.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n\n  button.onHoverEnd(() => {\n    button.color = baseColor;\n    button.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  return {\n    ...button,\n    label,\n  };\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst PRIMARY = '#4f8cff';\nconst TEXT = '#ffffff';\n\n/** Default theme. */\nconst theme: Theme = {\n  palette: {\n    primary: PRIMARY,\n    secondary: PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: TEXT,\n    textSecondary: TEXT,\n    hover: PRIMARY,\n    pressed: 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: 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: { ...theme.palette, ...input?.palette },\n    typography: { ...theme.typography, ...input?.typography },\n    shape: { ...theme.shape, ...input?.shape },\n    spacing: input?.spacing ?? theme.spacing,\n    components: {\n      button: {\n        ...theme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          theme.components.button.width,\n      },\n      modal: {\n        ...theme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...theme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { Color, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButton } from './button';\nimport { resolveTheme } from './theme';\nimport type { ButtonOpt, DeepPartial, Theme, UIPlugin } from './types';\n\nexport type { ButtonOpt, Theme, UIPlugin };\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(\n  k: KAPLAYCtx,\n  theme: DeepPartial<Theme> = {},\n): UIPlugin {\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 addButton = (\n    text = '',\n    opt: ButtonOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: string | Color;\n      hoverColor?: string | Color;\n      pressedColor?: string | Color;\n      textColor?: string | Color;\n    } = {},\n  ) => {\n    return createButton(k, currentTheme, text, opt);\n  };\n\n  return {\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}