@stanko/kaplay-inspector 0.1.6 → 0.2.0

package/README.md

@@ -2,7 +2,9 @@
 
 A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and inspect the game object tree real time.
 
-![Kaplay inspector in action](./public/screenshot.png)
+Check the demo: [muffinman.io/kaplay-inspector/](https://muffinman.io/kaplay-inspector/).
+
+[![Kaplay inspector in action](./public/screenshot.png)](https://muffinman.io/kaplay-inspector/)
 
 ## Features
 
@@ -11,7 +13,12 @@ A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and i
 - Hover an object to draw it's area, anchor and bounding box
 - Inspect object's component and custom props
 - Log an object to console
-- Tweak position, text or color
+- Tweak object properties live
+  - position, scale, rotate, skew, z-index
+  - opacity, color, blend mode
+  - text
+  - anchor
+  - health
 - Pause objects
 - Hide objects
 - Search for tags or comps
@@ -132,6 +139,4 @@ Same as with colors, be sure to have a higher specificity selector if inspector'
 ## TODO
 
 * [ ] Controllable theme - system/light/dark. At the moment it is always matching the system.
-* [ ] Filter/search
-* [ ] Persist search in URL or local storage
-* [ ] Collapse/Expand all button
+* [ ] Persist search/options in URL or local storage

package/dist/components/anchor-control.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface AnchorControlProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const AnchorControl: ({ className, obj }: AnchorControlProps) => import("preact").JSX.Element;

package/dist/components/anchor-control.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { cx } from "../lib/cx";
+import { k } from "../k";
+import { VectorControl } from "./vector-control";
+const strings = [
+    ["topleft", "top", "topright"],
+    ["left", "center", "right"],
+    ["botleft", "bot", "botright"],
+];
+export const AnchorControl = ({ className = "", obj }) => {
+    const object = obj;
+    const isString = typeof obj.anchor === "string";
+    return (_jsx("div", { class: cx(className, "anchor-control"), children: isString ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "anchor-radios", children: [strings.map((row, i) => {
+                            return (_jsx("div", { class: "anchor-row", children: row.map((anchor) => {
+                                    return (_jsx("label", { children: _jsx("input", { type: "radio", name: "anchor", value: anchor, checked: anchor === object.anchor, onChange: () => (object.anchor = anchor) }) }, anchor));
+                                }) }, i));
+                        }), _jsx("div", { children: isString && object.anchor })] }), _jsx("button", { class: "ki-btn", onClick: () => (object.anchor = k.vec2(0, 0)), children: "Use a vector" })] })) : (_jsxs(_Fragment, { children: [_jsx(VectorControl, { obj: obj, property: "anchor", step: 0.1 }), _jsx("button", { class: "ki-btn", onClick: () => (object.anchor = "center"), children: "Use a named location" })] })) }));
+};

package/dist/components/blend-control.d.ts

@@ -0,0 +1,5 @@
+export interface BlendControlProps {
+    obj: Record<string, any>;
+    className?: string;
+}
+export declare const BlendControl: ({ className, obj }: BlendControlProps) => import("preact").JSX.Element;

package/dist/components/blend-control.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { cx } from "../lib/cx";
+const MODES = [
+    { label: "normal", value: 0 },
+    { label: "add", value: 1 },
+    { label: "multiply", value: 2 },
+    { label: "screen", value: 3 },
+    { label: "overlay", value: 4 },
+];
+export const BlendControl = ({ className = "", obj }) => {
+    return (_jsx("div", { class: cx(className, "blend-control"), children: MODES.map((mode) => (_jsxs("label", { class: "ki-flex", children: [_jsx("input", { type: "radio", name: `blend-${obj.id}`, value: mode.value, checked: obj.blend === mode.value, onChange: () => (obj.blend = mode.value) }), mode.label] }, mode.value))) }));
+};

package/dist/components/color-control.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface ColorControlProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const ColorControl: ({ obj }: ColorControlProps) => import("preact").JSX.Element;

package/dist/components/color-control.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { cx } from "../lib/cx";
+const ColorSlider = ({ onChange, value, channel }) => {
+    const handleChange = (e) => {
+        const target = e.target;
+        onChange(channel, parseInt(target.value));
+    };
+    return (_jsx("input", { className: cx("color-control__slider-input", `color-control__slider-input--${channel}`), type: "range", min: "0", max: "255", value: value, onInput: handleChange }));
+};
+export const ColorControl = ({ obj }) => {
+    const object = obj;
+    const { r, g, b } = object.color;
+    const [color, setColor] = useState({ r, g, b });
+    useEffect(() => {
+        setColor({ r, g, b });
+    }, [r, g, b]);
+    const updateColor = (channel, value) => {
+        const newColor = { ...color, [channel]: value };
+        setColor(newColor);
+        object.color[channel] = value;
+    };
+    return (_jsxs("div", { class: "color-control", children: [_jsx("div", { class: "color-control__swatch", style: { background: `rgb(${color.r} ${color.g} ${color.b})` } }), _jsxs("div", { children: [_jsx(ColorSlider, { value: color.r, onChange: updateColor, channel: "r" }), _jsx(ColorSlider, { value: color.g, onChange: updateColor, channel: "g" }), _jsx(ColorSlider, { value: color.b, onChange: updateColor, channel: "b" })] }), _jsxs("div", { children: ["rgb(", color.r, ", ", color.g, ", ", color.b, ")"] })] }));
+};

package/dist/components/game-object.d.ts

@@ -1,5 +1,4 @@
 import type { GameObj } from "kaplay";
-import type { KAPLAYCtxType } from "../init";
 export interface GameObjectProps {
     className?: string;
     obj: GameObj;
@@ -7,6 +6,5 @@ export interface GameObjectProps {
     isExpanded?: boolean;
     isRenderRoot?: boolean;
     shouldDrawInspect: boolean;
-    k: KAPLAYCtxType;
 }
-export declare const GameObject: ({ obj, className, isExpanded: isExpandedExternal, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }: GameObjectProps) => import("preact").JSX.Element | null;
+export declare const GameObject: ({ obj, className, isExpanded: isExpandedExternal, isRenderRoot, setRenderRoot, shouldDrawInspect, }: GameObjectProps) => import("preact").JSX.Element | null;

package/dist/components/game-object.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { MinusIcon, PlusIcon } from "../components/icons";
 import { cx } from "../lib/cx";
@@ -6,7 +6,8 @@ import { drawBoundingBox } from "../lib/draw-bbox";
 import { getObjectInfo } from "../lib/get-object-info";
 import { Breadcrumbs } from "./breadcrumbs";
 import { BooleanComp } from "./boolean-comp";
-export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }) => {
+import { k } from "../k";
+export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, shouldDrawInspect, }) => {
     const [isExpanded, setIsExpanded] = useState(isExpandedExternal);
     const updateControllers = useRef([]);
     const { compsData, tags, compsLabel } = getObjectInfo(obj);
@@ -24,7 +25,7 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
     const drawInspect = useCallback((obj) => {
         if (!obj.hidden) {
             const updateController = k.onDraw(() => {
-                drawBoundingBox(obj, k);
+                drawBoundingBox(obj);
                 obj.drawInspect();
             });
             updateControllers.current.push(updateController);
@@ -54,5 +55,5 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
             "game-object--no-children": !hasChildren,
         }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "game-object__content", onMouseEnter: handleMouseEnter, onMouseLeave: cancelUpdateControllers, children: [_jsxs("button", { class: cx("game-object__header", {
                             "game-object__header--expandable": showExpandTree,
-                        }), onClick: handleToggleClick, children: [isExpanded ? (_jsx(MinusIcon, { className: "game-object__expand-icon" })) : (_jsx(PlusIcon, { className: "game-object__expand-icon" })), _jsxs("div", { class: "game-object__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "game-object__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "game-object__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && (_jsx("div", { class: "game-object__destroyed", children: "DESTROYED" }))] }), _jsxs("div", { class: "game-object__buttons", children: [!isRenderRoot && (_jsx("button", { class: "ki-btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "ki-btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "game-object__comps-wrapper", children: _jsxs("div", { class: "game-object__comps", children: [_jsx(BooleanComp, { obj: obj, propName: "paused" }), _jsx(BooleanComp, { obj: obj, propName: "hidden" }), hasSize && (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: "size" }), _jsxs("div", { children: [obj.width, " x ", obj.height] })] })), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: comp.tag }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "game-object__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
+                        }), onClick: handleToggleClick, children: [isExpanded ? (_jsx(MinusIcon, { className: "game-object__expand-icon" })) : (_jsx(PlusIcon, { className: "game-object__expand-icon" })), _jsxs("div", { class: "game-object__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "game-object__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "game-object__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && (_jsx("div", { class: "game-object__destroyed", children: "DESTROYED" }))] }), _jsxs("div", { class: "game-object__buttons", children: [!isRenderRoot && (_jsxs(_Fragment, { children: [_jsx("button", { class: "ki-btn ki-btn--red", onClick: () => obj.destroy(), children: "destroy" }), _jsx("button", { class: "ki-btn", onClick: () => setRenderRoot(obj), children: "inspect" })] })), _jsx("button", { class: "ki-btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "game-object__comps-wrapper", children: _jsxs("div", { class: "game-object__comps", children: [_jsx(BooleanComp, { obj: obj, propName: "paused" }), _jsx(BooleanComp, { obj: obj, propName: "hidden" }), hasSize && (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: "size" }), _jsxs("div", { children: [obj.width, " x ", obj.height] })] })), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: comp.tag }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "game-object__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { obj: child, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
 };

package/dist/components/hold-button.d.ts

@@ -3,7 +3,8 @@ export type HoldButtonProps = {
     children?: JSX.Element | string | number;
     className?: string;
     onClickAndHold: () => void;
+    onHoldEnd?: () => void;
     interval?: number;
     startRepeatingDelay?: number;
 };
-export declare const HoldButton: ({ children, className, onClickAndHold, interval, startRepeatingDelay, }: HoldButtonProps) => JSX.Element;
+export declare const HoldButton: ({ children, className, onClickAndHold, interval, startRepeatingDelay, onHoldEnd, }: HoldButtonProps) => JSX.Element;

package/dist/components/hold-button.js

@@ -1,33 +1,56 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
-export const HoldButton = ({ children, className, onClickAndHold, interval = 50, startRepeatingDelay = 200, }) => {
-    const intervalRef = useRef();
-    const timeoutRef = useRef();
-    const [isMouseDown, setIsMouseDown] = useState(false);
+import { useCallback, useEffect, useRef } from "preact/hooks";
+export const HoldButton = ({ children, className, onClickAndHold, interval = 50, startRepeatingDelay = 200, onHoldEnd, }) => {
+    // const [isActive, setIsActive] = useState(false);
+    const timerRef = useRef();
+    const onClickAndHoldRef = useRef(onClickAndHold);
+    const onHoldEndRef = useRef(onHoldEnd);
+    const startTimer = useCallback(() => {
+        stopTimer();
+        // setIsActive(true);
+        // Trigger once immediately
+        onClickAndHoldRef.current();
+        // Wait before repeating
+        timerRef.current = setTimeout(() => {
+            // Repeat
+            onClickAndHoldRef.current();
+            timerRef.current = setInterval(() => {
+                onClickAndHoldRef.current();
+            }, interval);
+        }, startRepeatingDelay);
+    }, [interval, startRepeatingDelay]);
+    const stopTimer = useCallback(() => {
+        // setIsActive(false);
+        clearTimeout(timerRef.current);
+        clearInterval(timerRef.current);
+    }, []);
+    const handleHoldEnd = useCallback(() => {
+        // console.log("---------end", isActive);
+        // if (isActive) {
+        stopTimer();
+        onHoldEndRef.current?.();
+        // }
+    }, [
+        stopTimer,
+        // , isActive
+    ]);
+    // Keep references updated to the latest callbacks
+    // This ensures the interval always calls the latest version
+    useEffect(() => {
+        onClickAndHoldRef.current = onClickAndHold;
+    }, [onClickAndHold]);
+    useEffect(() => {
+        onClickAndHoldRef.current = onClickAndHold;
+    }, [onClickAndHold]);
+    // Use document on mouseup and touchend for nicer UX
     useEffect(() => {
-        document.addEventListener("mouseup", handleMouseUp);
+        document.addEventListener("mouseup", handleHoldEnd);
+        document.addEventListener("touchend", handleHoldEnd);
         return () => {
-            clearTimeout(timeoutRef.current);
-            clearInterval(intervalRef.current);
-            document.removeEventListener("mouseup", handleMouseUp);
+            stopTimer();
+            document.removeEventListener("mouseup", handleHoldEnd);
+            document.removeEventListener("touchend", handleHoldEnd);
         };
-    }, []);
-    useEffect(() => {
-        clearTimeout(timeoutRef.current);
-        clearInterval(intervalRef.current);
-        if (isMouseDown) {
-            timeoutRef.current = setTimeout(() => {
-                intervalRef.current = setInterval(() => {
-                    onClickAndHold();
-                }, interval);
-            }, startRepeatingDelay);
-        }
-    }, [isMouseDown]);
-    const handleMouseDown = () => {
-        setIsMouseDown(true);
-    };
-    const handleMouseUp = () => {
-        setIsMouseDown(false);
-    };
-    return (_jsx("button", { className: className, onMouseDown: handleMouseDown, onClick: onClickAndHold, children: children }));
+    }, [handleHoldEnd]);
+    return (_jsx("button", { className: className, onMouseDown: startTimer, onTouchStart: startTimer, children: children }));
 };

package/dist/components/hp-control.d.ts

@@ -0,0 +1,7 @@
+import type { GameObj } from "kaplay";
+export interface HpControlProps {
+    className?: string;
+    obj: GameObj;
+    step?: number;
+}
+export declare const HpControl: ({ className, obj, step }: HpControlProps) => import("preact").JSX.Element | null;

package/dist/components/hp-control.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { NumberControl } from "./number-control";
+export const HpControl = ({ className = "", obj, step }) => {
+    if (obj.hp === undefined) {
+        return null;
+    }
+    return (_jsxs("div", { class: "hp-control ki-flex", children: [_jsx(NumberControl, { className: className, obj: obj, property: "hp", step: step }), " ", "(Max: ", obj.maxHP, ")"] }));
+};

package/dist/components/inspector.d.ts

@@ -1,5 +1,4 @@
-import type { InspectorOptions, KAPLAYCtxType } from "../init";
+import type { InspectorOptions } from "../init";
 export interface InspectorProps extends InspectorOptions {
-    k: KAPLAYCtxType;
 }
-export declare const Inspector: ({ initUpdateTimeout, isVisibleOnLoad, initDrawInspectOnHover, k, }: InspectorProps) => import("preact").JSX.Element;
+export declare const Inspector: ({ initUpdateTimeout, isVisibleOnLoad, initDrawInspectOnHover, }: InspectorProps) => import("preact").JSX.Element;

package/dist/components/inspector.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { GameObject } from "./game-object";
 import { useObjectBoolean } from "./boolean-comp";
 import { SearchResults } from "./search-results";
+import { k } from "../k";
 const INTERVAL_OPTIONS = [
     { value: 100, label: "100ms" },
     { value: 250, label: "250ms" },
@@ -10,7 +11,7 @@ const INTERVAL_OPTIONS = [
     { value: 1000, label: "1s" },
 ];
 const TYPING_TIMEOUT = 250;
-export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, k, }) => {
+export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, }) => {
     const [updateTimeout, setUpdateTimeout] = useState(initUpdateTimeout);
     const [shouldDrawInspect, setShouldDrawInspect] = useState(initDrawInspectOnHover);
     const [root, setRoot] = useState(k.getTreeRoot());
@@ -44,5 +45,5 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
     if (!isVisible) {
         return (_jsx("button", { class: "ki-btn k-inspector__show", onClick: toggleVisibility, children: "Show Inspector" }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsx("input", { placeholder: "Search tags or comps", type: "text", class: "ki-input", onInput: handleSearchInput }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: searchTerm.length > 0 ? (_jsx(SearchResults, { k: k, results: searchResults, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect })) : (_jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsx("input", { placeholder: "Search tags or comps", type: "text", class: "ki-input", onInput: handleSearchInput }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: searchTerm.length > 0 ? (_jsx(SearchResults, { results: searchResults, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect })) : (_jsx(GameObject, { className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true })) })] }));
 };

package/dist/components/number-control.d.ts

@@ -0,0 +1,7 @@
+export interface NumberControlProps {
+    obj: Record<string, any>;
+    property: string;
+    className?: string;
+    step?: number;
+}
+export declare const NumberControl: ({ className, obj, property, step, }: NumberControlProps) => import("preact").JSX.Element;

package/dist/components/number-control.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { NumberInput } from "./number-input";
+export const NumberControl = ({ className = "", obj, property, step, }) => {
+    return (_jsx(NumberInput, { className: className, obj: obj, property: property, onChange: (n) => {
+            obj[property] = n;
+        }, step: step }));
+};

package/dist/components/number-input.d.ts

@@ -0,0 +1,8 @@
+export interface NumberInputProps {
+    obj: Record<string, any>;
+    property: string;
+    onChange: (value: number) => void;
+    className?: string;
+    step?: number;
+}
+export declare const NumberInput: ({ obj, property, className, onChange, step, }: NumberInputProps) => import("preact").JSX.Element | null;

package/dist/components/number-input.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { cx } from "../lib/cx";
+import { toFixed } from "../lib/to-fixed";
+import { HoldButton } from "./hold-button";
+export const NumberInput = ({ obj, property, className = "", onChange, step = 1, }) => {
+    const [localValue, setLocalValue] = useState(toFixed(obj[property]).toString());
+    const [isFocused, setIsFocused] = useState(false);
+    const [error, setError] = useState(false);
+    // Sync game state -> UI when input is not focused
+    useEffect(() => {
+        if (!isFocused) {
+            setLocalValue(toFixed(obj[property]).toString());
+        }
+    }, [obj[property], isFocused]);
+    // Has to be after hooks
+    if (obj[property] === undefined) {
+        return null;
+    }
+    const handleInput = (e) => {
+        const value = e.target.value;
+        setLocalValue(value);
+        const parsedValue = parseFloat(value);
+        if (!isNaN(value) && !Number.isNaN(parsedValue)) {
+            // Sync UI -> game state
+            onChange(parsedValue);
+            setError(false);
+        }
+        else {
+            setError(true);
+        }
+    };
+    const handleClickAndHold = (offset) => {
+        // Use local value so we don't wait for the inspector to re-render
+        const newValue = parseFloat(localValue) + offset;
+        // obj[property] = newValue;
+        onChange(newValue);
+        setLocalValue(toFixed(newValue).toString());
+    };
+    return (_jsxs("div", { class: cx(className, "number-input ki-flex"), children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => handleClickAndHold(-step), onHoldEnd: () => {
+                    // Final sync to ensure value is in sync
+                    setLocalValue(toFixed(obj[property]).toString());
+                }, children: "-" }), _jsx("input", { class: cx("ki-input", {
+                    "ki-input--error": error,
+                }), value: localValue, onInput: handleInput, onFocus: () => setIsFocused(true), onBlur: () => {
+                    setIsFocused(false);
+                    setError(false);
+                    // Final sync to ensure value is in sync
+                    setLocalValue(toFixed(obj[property]).toString());
+                } }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => handleClickAndHold(step), children: "+" })] }));
+};

package/dist/components/search-results.d.ts

@@ -1,10 +1,8 @@
 import type { GameObj } from "kaplay";
-import type { KAPLAYCtxType } from "../init";
 export interface SearchResultsProps {
-    k: KAPLAYCtxType;
     className?: string;
     results: GameObj[];
     setRenderRoot: (obj: GameObj) => void;
     shouldDrawInspect: boolean;
 }
-export declare const SearchResults: ({ k, results, setRenderRoot, shouldDrawInspect, }: SearchResultsProps) => import("preact").JSX.Element;
+export declare const SearchResults: ({ results, setRenderRoot, shouldDrawInspect, }: SearchResultsProps) => import("preact").JSX.Element;

package/dist/components/search-results.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { GameObject } from "./game-object";
-export const SearchResults = ({ k, results, setRenderRoot, shouldDrawInspect, }) => {
+export const SearchResults = ({ results, setRenderRoot, shouldDrawInspect, }) => {
     if (results.length === 0) {
         return _jsx("div", { children: "No results found." });
     }
     return (_jsxs("div", { children: [results.map((result) => {
-                return (_jsx(GameObject, { k: k, className: "game-object--root", obj: result, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }));
+                return (_jsx(GameObject, { className: "game-object--root", obj: result, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }));
             }), " "] }));
 };

package/dist/components/sprite-control.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface SpriteControlProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const SpriteControl: ({ obj }: SpriteControlProps) => import("preact").JSX.Element;

package/dist/components/sprite-control.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+export const SpriteControl = ({ obj }) => {
+    const object = obj;
+    const animation = object.getCurAnim();
+    return (_jsxs("div", { class: "sprite-control", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
+};

package/dist/components/text-control.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface TextControlProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const TextControl: ({ obj }: TextControlProps) => import("preact").JSX.Element | null;

package/dist/components/text-control.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { TextInput } from "./text-input";
+export const TextControl = ({ obj }) => {
+    if (typeof obj.text !== "string") {
+        return null;
+    }
+    return (_jsx("div", { class: "text-control", children: _jsx(TextInput, { className: "text-control__input ki-input", placeholder: "Enter text", value: obj.text, onChange: (text) => (obj.text = text) }) }));
+};

package/dist/components/text-input.d.ts

@@ -0,0 +1,7 @@
+export interface TextInputProps {
+    className?: string;
+    value: string;
+    onChange: (text: string) => void;
+    placeholder?: string;
+}
+export declare const TextInput: ({ className, value, onChange, placeholder, }: TextInputProps) => import("preact").JSX.Element | null;

package/dist/components/text-input.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { cx } from "../lib/cx";
+export const TextInput = ({ className = "", value, onChange, placeholder = "", }) => {
+    const [localValue, setLocalValue] = useState(value.toString());
+    const [isFocused, setIsFocused] = useState(false);
+    // Sync game state -> UI when input is not focused
+    useEffect(() => {
+        if (!isFocused) {
+            setLocalValue(value.toString());
+        }
+    }, [value, isFocused]);
+    if (value === undefined) {
+        return null;
+    }
+    const handleInput = (e) => {
+        const value = e.target.value;
+        setLocalValue(value);
+        onChange(value);
+    };
+    return (_jsx("textarea", { class: cx(className, "text-input ki-input"), value: localValue, onInput: handleInput, placeholder: placeholder, onFocus: () => setIsFocused(true), onBlur: () => {
+            setIsFocused(false);
+            // Final sync to ensure value is in sync
+            setLocalValue(value);
+        } }));
+};

package/dist/components/vector-control.d.ts

@@ -0,0 +1,7 @@
+export interface VectorControlProps {
+    className?: string;
+    obj: Record<string, any>;
+    property: string;
+    step?: number;
+}
+export declare const VectorControl: ({ className, obj, property, step, }: VectorControlProps) => import("preact").JSX.Element | null;

package/dist/components/vector-control.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { cx } from "../lib/cx";
+import { NumberInput } from "./number-input";
+import { k } from "../k";
+export const VectorControl = ({ className = "", obj, property, step, }) => {
+    if (obj[property] === undefined) {
+        return null;
+    }
+    return (_jsxs("div", { className: cx(className, "vector-control ki-flex"), children: ["x:", " ", _jsx(NumberInput, { className: "vector-control__x-input", obj: obj[property], property: "x", onChange: (x) => (obj[property] = k.vec2(x, obj[property].y)), step: step }), "y:", " ", _jsx(NumberInput, { obj: obj[property], property: "y", onChange: (y) => (obj[property] = k.vec2(obj[property].x, y)), step: step })] }));
+};

package/dist/init.d.ts

@@ -1,5 +1,4 @@
-import kaplay from "kaplay";
-export type KAPLAYCtxType = ReturnType<typeof kaplay>;
+import { type KAPLAYCtxType } from "./k";
 export interface InspectorOptions {
     initUpdateTimeout?: number;
     initDrawInspectOnHover?: boolean;

package/dist/init.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { render } from "preact";
 import { Inspector } from "./components/inspector";
+import { setK } from "./k";
 export default function init(k, props = {}) {
     const { className = "", initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, } = props;
+    // Set kaplay context to be imported directly from components to reduce prop drilling
+    setK(k);
     const appElement = document.createElement("div");
     appElement.className = `k-inspector ${className}`;
     document.body.appendChild(appElement);
-    render(_jsx(Inspector, { k: k, initUpdateTimeout: initUpdateTimeout, isVisibleOnLoad: isVisibleOnLoad, initDrawInspectOnHover: initDrawInspectOnHover }), appElement);
+    render(_jsx(Inspector, { initUpdateTimeout: initUpdateTimeout, isVisibleOnLoad: isVisibleOnLoad, initDrawInspectOnHover: initDrawInspectOnHover }), appElement);
 }

package/dist/k.d.ts

@@ -0,0 +1,4 @@
+import kaplay from "kaplay";
+export type KAPLAYCtxType = ReturnType<typeof kaplay>;
+export declare let k: KAPLAYCtxType;
+export declare const setK: (ctx: KAPLAYCtxType) => void;

package/dist/k.js

@@ -0,0 +1,4 @@
+export let k;
+export const setK = (ctx) => {
+    k = ctx;
+};

package/dist/lib/draw-bbox.d.ts

@@ -1,3 +1,2 @@
 import type { GameObj } from "kaplay";
-import type { KAPLAYCtxType } from "../init";
-export declare const drawBoundingBox: (obj: GameObj, k: KAPLAYCtxType) => void;
+export declare const drawBoundingBox: (obj: GameObj) => void;

package/dist/lib/draw-bbox.js

@@ -1,3 +1,4 @@
+import { k } from "../k";
 const anchorMap = {
     topleft: [-1, -1],
     top: [0, -1],
@@ -9,7 +10,7 @@ const anchorMap = {
     bot: [0, 1],
     botright: [1, 1],
 };
-export const drawBoundingBox = (obj, k) => {
+export const drawBoundingBox = (obj) => {
     if (obj.renderArea) {
         const localArea = obj.renderArea();
         const transform = obj.transform.clone();
@@ -40,7 +41,7 @@ export const drawBoundingBox = (obj, k) => {
     }
     obj.children.forEach((child) => {
         if (!child.hidden) {
-            drawBoundingBox(child, k);
+            drawBoundingBox(child);
         }
     });
 };

package/dist/lib/inspect-comps.js

@@ -1,16 +1,30 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { stringify } from "./stringify";
-import { PositionControls } from "../components/position-controls";
-import { TextControls } from "../components/text-controls";
-import { SpriteControls } from "../components/sprite-controls";
-import { Color } from "../components/color-controls";
+import { TextControl } from "../components/text-control";
+import { SpriteControl } from "../components/sprite-control";
+import { ColorControl } from "../components/color-control";
 import { ChildObject } from "../components/child-object";
 import { isGameObj } from "./is-game-obj";
+import { AnchorControl } from "../components/anchor-control";
+import { HpControl } from "../components/hp-control";
+import { NumberControl } from "../components/number-control";
+import { VectorControl } from "../components/vector-control";
+import { BlendControl } from "../components/blend-control";
 const componentMap = {
-    pos: PositionControls,
-    text: TextControls,
-    sprite: SpriteControls,
-    color: Color,
+    text: TextControl,
+    sprite: SpriteControl,
+    color: ColorControl,
+    anchor: AnchorControl,
+    health: HpControl,
+    blend: BlendControl,
+    // Vectors
+    pos: ({ obj }) => _jsx(VectorControl, { obj: obj, property: "pos" }),
+    scale: ({ obj }) => _jsx(VectorControl, { obj: obj, property: "scale", step: 0.1 }),
+    skew: ({ obj }) => _jsx(VectorControl, { obj: obj, property: "skew", step: 5 }),
+    // Numbers
+    opacity: ({ obj }) => (_jsx(NumberControl, { obj: obj, property: "opacity", step: 0.1 })),
+    rotate: ({ obj }) => _jsx(NumberControl, { obj: obj, property: "angle", step: 5 }),
+    z: ({ obj }) => _jsx(NumberControl, { obj: obj, property: "z" }),
 };
 export const inspectComps = (obj) => {
     const object = obj;

package/dist/lib/to-fixed.d.ts

@@ -0,0 +1 @@
+export declare const toFixed: (value: number, decimalPlaces?: number) => number;

package/dist/lib/to-fixed.js

@@ -0,0 +1,3 @@
+export const toFixed = (value, decimalPlaces = 3) => {
+    return Number(value.toFixed(decimalPlaces));
+};

package/dist/styles.css

@@ -73,6 +73,22 @@
     color: inherit;
   }
 
+  textarea {
+    field-sizing: content;
+    max-height: 6rem;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
   button {
     border: none;
     cursor: pointer;
@@ -100,6 +116,14 @@
     border: 1px solid var(--ki-primary);
   }
 
+  .ki-btn--red {
+    color: var(--ki-red);
+  }
+
+  .ki-btn--red:hover {
+    border: 1px solid var(--ki-red);
+  }
+
   .ki-input {
     background-color: var(--ki-bg);
     border: none;
@@ -114,6 +138,11 @@
     border-color: var(--ki-primary);
   }
 
+  .ki-input--error,
+  .ki-input--error:focus-visible {
+    border-color: var(--ki-red);
+  }
+
   /* Main layout */
 
   .k-inspector__header {
@@ -309,35 +338,62 @@
     padding-bottom: 1rem;
   }
 
-  /* Position controls */
+  /* Flex layout for controls */
 
-  .pos-controls {
+  .ki-flex {
     display: flex;
-    align-items: center;
     gap: 0.25rem;
-    width: fit-content;
-    min-width: 12rem;
+    align-items: center;
   }
 
-  .pos-controls .ki-btn,
-  .pos-controls__value {
-    flex-shrink: 0;
-    text-align: center;
+  /* Number input */
+
+  .number-input input {
+    width: 4.5rem;
   }
 
-  .pos-controls__value {
-    width: 5rem;
+  /* Vector control */
+
+  .vector-control__x-input {
+    margin-right: 0.75rem; /* with gap it comes to 1rem */
+  }
+
+  /* Blend control */
+
+  .blend-control {
+    display: grid;
+    gap: 0.25rem;
   }
 
-  /* Text Controls */
+  /* Text control */
 
-  .text-controls__input {
+  .text-control__input {
     width: 100%;
   }
 
+  /* Anchor control */
+
+  .anchor-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .anchor-radios {
+    text-align: center;
+  }
+
+  .anchor-row {
+    display: flex;
+  }
+
+  .anchor-radios label {
+    padding: 0.25rem;
+  }
+
   /* Color */
 
-  .color-controls {
+  .color-control {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -345,28 +401,28 @@
     min-width: 12rem;
   }
 
-  .color-controls__swatch {
+  .color-control__swatch {
     width: 2rem;
     height: 2rem;
     border-radius: 8px;
     border: 1px solid var(--ki-border-light);
   }
 
-  .color-controls__slider {
+  .color-control__slider {
     display: flex;
     align-items: center;
     gap: 0.25rem;
   }
 
-  .color-controls__slider-input--r {
+  .color-control__slider-input--r {
     accent-color: red;
   }
 
-  .color-controls__slider-input--g {
+  .color-control__slider-input--g {
     accent-color: green;
   }
 
-  .color-controls__slider-input--b {
+  .color-control__slider-input--b {
     accent-color: blue;
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stanko/kaplay-inspector",
   "description": "A dev tool for Kaplay which allows you to explore and inspect the game object tree real time.",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",
@@ -21,7 +21,7 @@
     "prepublish": "npm run build-lib"
   },
   "peerDependencies": {
-    "kaplay": "^4000.0.0-alpha.20"
+    "kaplay": "^4000.0.0-alpha.26"
   },
   "dependencies": {
     "preact": "^10.28.2"
@@ -30,7 +30,8 @@
     "@preact/preset-vite": "^2.10.2",
     "@types/node": "^25.0.6",
     "typescript": "~5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "kaplay": "^4000.0.0-alpha.26"
   },
   "repository": {
     "type": "git",

package/dist/components/color-controls.d.ts

@@ -1,6 +0,0 @@
-import type { GameObj } from "kaplay";
-export interface ColorProps {
-    className?: string;
-    obj: GameObj;
-}
-export declare const Color: ({ obj }: ColorProps) => import("preact").JSX.Element;

package/dist/components/color-controls.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
-import { cx } from "../lib/cx";
-const ColorSlider = ({ onChange, value, channel }) => {
-    const handleChange = (e) => {
-        const target = e.target;
-        onChange(channel, parseInt(target.value));
-    };
-    return (_jsx("input", { className: cx("color-controls__slider-input", `color-controls__slider-input--${channel}`), type: "range", min: "0", max: "255", value: value, onInput: handleChange }));
-};
-export const Color = ({ obj }) => {
-    const object = obj;
-    const { r, g, b } = object.color;
-    const [color, setColor] = useState({ r, g, b });
-    useEffect(() => {
-        setColor({ r, g, b });
-    }, [r, g, b]);
-    const updateColor = (channel, value) => {
-        const newColor = { ...color, [channel]: value };
-        setColor(newColor);
-        object.color[channel] = value;
-    };
-    return (_jsxs("div", { class: "color-controls", children: [_jsx("div", { class: "color-controls__swatch", style: { background: `rgb(${color.r} ${color.g} ${color.b})` } }), _jsxs("div", { children: [_jsx(ColorSlider, { value: color.r, onChange: updateColor, channel: "r" }), _jsx(ColorSlider, { value: color.g, onChange: updateColor, channel: "g" }), _jsx(ColorSlider, { value: color.b, onChange: updateColor, channel: "b" })] }), _jsxs("div", { children: ["rgb(", color.r, ", ", color.g, ", ", color.b, ")"] })] }));
-};

package/dist/components/position-controls.d.ts

@@ -1,6 +0,0 @@
-import type { GameObj } from "kaplay";
-export interface PositionControlsProps {
-    className?: string;
-    obj: GameObj;
-}
-export declare const PositionControls: ({ obj }: PositionControlsProps) => import("preact").JSX.Element | null;

package/dist/components/position-controls.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { roundToDecimal } from "../lib/round-to-decimal";
-import { HoldButton } from "./hold-button";
-import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, } from "./icons";
-export const PositionControls = ({ obj }) => {
-    if (!obj.pos) {
-        return null;
-    }
-    return (_jsxs("div", { class: "pos-controls", children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x - 1, obj.pos.y), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x + 1, obj.pos.y), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x, obj.pos.y - 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x, obj.pos.y + 1), children: _jsx(ArrowDownIcon, {}) })] }));
-};

package/dist/components/sprite-controls.d.ts

@@ -1,6 +0,0 @@
-import type { GameObj } from "kaplay";
-export interface SpriteControlsProps {
-    className?: string;
-    obj: GameObj;
-}
-export declare const SpriteControls: ({ obj }: SpriteControlsProps) => import("preact").JSX.Element;

package/dist/components/sprite-controls.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-export const SpriteControls = ({ obj }) => {
-    const object = obj;
-    const animation = object.getCurAnim();
-    return (_jsxs("div", { class: "sprite-controls", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
-};

package/dist/components/text-controls.d.ts

@@ -1,6 +0,0 @@
-import type { GameObj } from "kaplay";
-export interface TextControlsProps {
-    className?: string;
-    obj: GameObj;
-}
-export declare const TextControls: ({ obj }: TextControlsProps) => import("preact").JSX.Element | null;

package/dist/components/text-controls.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
-export const TextControls = ({ obj }) => {
-    const [text, setText] = useState(obj.text);
-    useEffect(() => {
-        setText(obj.text);
-    }, [obj.text]);
-    if (typeof obj.text !== "string") {
-        return null;
-    }
-    const handleInput = (e) => {
-        obj.text = e.target.value;
-        setText(text);
-    };
-    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", value: text, onInput: handleInput }) }));
-};

package/dist/lib/round-to-decimal.d.ts

@@ -1 +0,0 @@
-export declare const roundToDecimal: (value: number, decimalPlaces: number) => number;

package/dist/lib/round-to-decimal.js

@@ -1,4 +0,0 @@
-export const roundToDecimal = (value, decimalPlaces) => {
-    const factor = Math.pow(10, decimalPlaces);
-    return Math.round(value * factor) / factor;
-};