@stanko/kaplay-inspector 0.1.7 → 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,5 +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.
-* [ ] 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-controls.js → anchor-control.js}

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { cx } from "../lib/cx";
-import { VectorControls } from "./vector-controls";
 import { k } from "../k";
+import { VectorControl } from "./vector-control";
 const strings = [
     ["topleft", "top", "topright"],
     ["left", "center", "right"],
     ["botleft", "bot", "botright"],
 ];
-export const AnchorControls = ({ className = "", obj, }) => {
+export const AnchorControl = ({ className = "", obj }) => {
     const object = obj;
     const isString = typeof obj.anchor === "string";
-    return (_jsx("div", { class: cx(className, "anchor-controls"), children: isString ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "anchor-radios", children: [strings.map((row, i) => {
+    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: "Switch to vector" })] })) : (_jsxs(_Fragment, { children: [_jsx(VectorControls, { value: object.anchor, onChange: (anchor) => (object.anchor = anchor), step: 0.05 }), _jsx("button", { class: "ki-btn", onClick: () => (object.anchor = "center"), children: "Switch to string" })] })) }));
+                        }), _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.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";
@@ -55,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, { 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/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/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/lib/inspect-comps.js

@@ -1,18 +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 { AnchorControls } from "../components/anchor-controls";
+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,
-    anchor: AnchorControls,
+    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,42 @@
     padding-bottom: 1rem;
   }
 
-  /* Vector controls */
+  /* Flex layout for controls */
 
-  .vector-controls {
+  .ki-flex {
     display: flex;
-    align-items: center;
     gap: 0.25rem;
-    width: fit-content;
-    min-width: 12rem;
+    align-items: center;
   }
 
-  .vector-controls .ki-btn,
-  .vector-controls__value {
-    flex-shrink: 0;
-    text-align: center;
+  /* Number input */
+
+  .number-input input {
+    width: 4.5rem;
   }
 
-  .vector-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 controls */
+  /* Anchor control */
 
-  .anchor-controls {
+  .anchor-control {
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -357,7 +393,7 @@
 
   /* Color */
 
-  .color-controls {
+  .color-control {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -365,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.7",
+  "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/anchor-controls.d.ts

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

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: ({ className, obj, }: PositionControlsProps) => import("preact").JSX.Element | null;

package/dist/components/position-controls.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { VectorControls } from "./vector-controls";
-export const PositionControls = ({ className = "", obj, }) => {
-    if (!obj.pos) {
-        return null;
-    }
-    return (_jsx(VectorControls, { className: className, value: obj.pos, onChange: (pos) => (obj.pos = pos) }));
-};

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,10 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-export const TextControls = ({ obj }) => {
-    if (typeof obj.text !== "string") {
-        return null;
-    }
-    const handleInput = (e) => {
-        obj.text = e.target.value;
-    };
-    return (_jsx("div", { class: "text-controls", children: _jsx("textarea", { class: "text-controls__input ki-input", placeholder: "Enter text", value: obj.text, onInput: handleInput }) }));
-};

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

@@ -1,8 +0,0 @@
-import type { Vec2 } from "kaplay";
-export interface VectorControlsProps {
-    className?: string;
-    value: Vec2;
-    onChange: (v: Vec2) => void;
-    step?: number;
-}
-export declare const VectorControls: ({ className, value, onChange, step, }: VectorControlsProps) => import("preact").JSX.Element;

package/dist/components/vector-controls.js

@@ -1,9 +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";
-import { k } from "../k";
-import { cx } from "../lib/cx";
-export const VectorControls = ({ className = "", value, onChange, step = 1, }) => {
-    return (_jsxs("div", { class: cx(className, "vector-controls"), children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x - step, value.y)), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x + step, value.y)), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "vector-controls__value", children: ["x: ", roundToDecimal(value.x, 2)] }), _jsxs("div", { class: "vector-controls__value", children: ["y: ", roundToDecimal(value.y, 2)] }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x, value.y - step)), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x, value.y + step)), children: _jsx(ArrowDownIcon, {}) })] }));
-};

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;
-};