@stanko/kaplay-inspector 0.0.4 → 0.1.1

package/README.md

@@ -15,6 +15,8 @@ A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and i
 - Pause an object
 - Dark theme (is this a feature?)
 
+The layout is made with desktop in mind. That said, it is somewhat usable on phones.
+
 ## Usage
 
 Install it:
@@ -50,6 +52,12 @@ if (
 }
 ```
 
+If typescript is complaining about importing CSS files, you probably need to add this to one of your `.d.ts` files.
+
+```ts
+declare module '*.scss';
+```
+
 ### Options
 
 You can pass options object to the init method as a second parameter:
@@ -64,22 +72,64 @@ available options are:
 
 ```ts
 interface InspectorOptions {
-  updateTimeout?: number; // in milliseconds, default: 100
-  isVisible?: boolean; // is inspector visible on load, default: true
-  className?: string; // optional CSS class to add to the root element
+  // CSS class to add to the root element
+  className?: string; 
+  // is inspector visible on load, default: true
+  isVisible?: boolean; 
+  // default update time in milliseconds, default: 250
+  initUpdateTimeout?: number; 
+  // should area, anchor and bounding box be drawn on object hover, default: true
+  shouldDrawInspect?: boolean: 
+}
+```
+
+## Customizing colors
+
+Kaplay Inspector defines colors in [OKLCH color space](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch). This makes changing of the primary and the secondary color pretty straight forward. You only need to update two hue variables like this:
+
+```css
+.k-inspector.your-custom-class {
+  --ki-h: 300; /* Purple */
+  --ki-h-secondary: 200; /* Teal */
 }
 ```
 
-### Positioning
+Please note that if you load inspector's CSS dynamically, you'll have to add a custom class to create a higher specificity selector.
+
+If you want to change other colors as well, check the [styles.css](./src/styles/styles.css).
+
+
+## Positioning
 
 By default, the inspector has `position: fixed` and it sits at the bottom of the screen. If you want to move it around, the easiest way it to pass a custom class name through the options and position it yourself.
 
+Assuming we have only the canvas and the inspector element on the page, here is an example of what I like to do:
+
+```css
+body:has(.k-inspector__hide) {
+  display: grid;
+  grid-template-rows: 60vh 40vh;
+
+  canvas {
+    width: 100% !important;
+    height: 60vh !important;
+    object-fit: contain;
+    display: block;
+  }
+
+  .k-inspector {
+    position: relative;
+  }
+}
+```
+
+This fixed the game canvas in the upper part of the viewport (60% of it) and the bottom part is taken by the inspector. It only applies this layout when inspector is visible (by checking if the hide button is shown).
+
+Same as with colors, be sure to have a higher specificity selector if inspector's CSS is loaded dynamically.
 
 ## TODO
 
-* [ ] Bounding box - handle a case when anchor is a `Vec2`
 * [ ] Controllable theme - system/light/dark. At the moment it is always matching the system.
 * [ ] Filter/search
 * [ ] Persist search in URL or local storage
-* [ ] Figure out why child bounding box are drawn in the wrong position
 * [ ] Collapse/Expand all button

package/dist/components/boolean-comp.d.ts

@@ -0,0 +1,11 @@
+import type { GameObj } from "kaplay";
+type CheckboxCompProps = {
+    obj: GameObj;
+    propName: string;
+};
+export declare const useObjectBoolean: (obj: GameObj, propName: string) => {
+    checked: any;
+    onChange: (checked: boolean) => void;
+};
+export declare const BooleanComp: ({ obj, propName }: CheckboxCompProps) => import("preact").JSX.Element;
+export {};

package/dist/components/boolean-comp.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+export const useObjectBoolean = (obj, propName) => {
+    const [checked, setChecked] = useState(obj[propName]);
+    useEffect(() => {
+        setChecked(obj[propName]);
+    }, [obj[propName]]);
+    const onChange = (checked) => {
+        setChecked(checked);
+        obj[propName] = checked;
+    };
+    return {
+        checked,
+        onChange,
+    };
+};
+export const BooleanComp = ({ obj, propName }) => {
+    const id = `${propName}-${obj.id}`;
+    const { checked, onChange } = useObjectBoolean(obj, propName);
+    return (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: id, children: _jsx("b", { children: propName }) }), _jsx("div", { children: _jsx("input", { id: id, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked) }) })] }));
+};

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

@@ -0,0 +1,6 @@
+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

@@ -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-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/game-object.d.ts

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

package/dist/components/game-object.js

@@ -1,42 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { MinusIcon, PlusIcon } from "../components/icons";
 import { cx } from "../lib/cx";
 import { drawBoundingBox } from "../lib/draw-bbox";
 import { getObjectInfo } from "../lib/get-object-info";
 import { Breadcrumbs } from "./breadcrumbs";
-export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, k, }) => {
+import { BooleanComp } from "./boolean-comp";
+export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }) => {
     const [isExpanded, setIsExpanded] = useState(isExpandedExternal);
-    const mouseHoverController = useRef(null);
+    const updateControllers = useRef([]);
     const { compsData, tags, compsLabel } = getObjectInfo(obj);
     const isRootObject = obj.id === 0;
     const isObjectDestroyed = !obj.exists() && !isRootObject;
     const showExpandTree = obj.children.length > 0;
     const hasChildren = obj.children.length > 0;
     const isInspecting = isRenderRoot && obj.id !== 0;
+    const cancelUpdateControllers = useCallback(() => {
+        updateControllers.current.forEach((controller) => controller.cancel());
+        updateControllers.current = [];
+    }, []);
+    const drawInspect = useCallback((obj, isChild = false) => {
+        if (!obj.hidden) {
+            const updateController = obj.onDraw(() => {
+                // Kaplay calls drawInspect on all of the children, no need to call it again
+                if (!isChild) {
+                    obj.drawInspect();
+                }
+                drawBoundingBox(obj, k);
+            });
+            updateControllers.current.push(updateController);
+            obj.children.forEach((child) => {
+                drawInspect(child, true);
+            });
+        }
+    }, []);
     useEffect(() => {
         return () => {
-            mouseHoverController.current?.cancel();
+            cancelUpdateControllers();
         };
     }, []);
     const handleToggleClick = () => {
         setIsExpanded(!isExpanded);
     };
     const handleMouseEnter = () => {
-        mouseHoverController.current?.cancel();
-        if (!obj.hidden) {
-            mouseHoverController.current = obj.onDraw(() => {
-                obj.drawInspect();
-                drawBoundingBox(obj, k);
-            });
+        cancelUpdateControllers();
+        if (!isRootObject && shouldDrawInspect) {
+            drawInspect(obj);
         }
     };
     const handleMouseLeave = () => {
-        mouseHoverController.current?.cancel();
+        cancelUpdateControllers();
     };
     return (_jsxs("div", { class: cx("game-object", className, {
             "game-object--no-children": !hasChildren,
         }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "game-object__content", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("button", { class: cx("game-object__header", {
                             "game-object__header--expandable": showExpandTree,
-                        }), onClick: handleToggleClick, children: [_jsx("span", { class: "game-object__expand-icon", children: isExpanded ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) }), _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: [_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `paused-${obj.id}`, children: _jsx("b", { children: "paused" }) }), _jsx("div", { children: _jsx("input", { id: `paused-${obj.id}`, type: "checkbox", defaultChecked: obj.paused, onChange: () => (obj.paused = !obj.paused) }) })] }), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("div", { 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 }, 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 && (_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" }), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("div", { 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));
 };

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

@@ -0,0 +1,9 @@
+import type { JSX } from "preact/jsx-runtime";
+export type HoldButtonProps = {
+    children?: JSX.Element | string | number;
+    className?: string;
+    onClickAndHold: () => void;
+    interval?: number;
+    startRepeatingDelay?: number;
+};
+export declare const HoldButton: ({ children, className, onClickAndHold, interval, startRepeatingDelay, }: HoldButtonProps) => JSX.Element;

package/dist/components/hold-button.js

@@ -0,0 +1,33 @@
+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);
+    useEffect(() => {
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            clearInterval(intervalRef.current);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, []);
+    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 }));
+};

package/dist/components/icons.d.ts

@@ -1,6 +1,10 @@
-export declare const PlusIcon: () => import("preact").JSX.Element;
-export declare const MinusIcon: () => import("preact").JSX.Element;
-export declare const ArrowUpIcon: () => import("preact").JSX.Element;
-export declare const ArrowDownIcon: () => import("preact").JSX.Element;
-export declare const ArrowLeftIcon: () => import("preact").JSX.Element;
-export declare const ArrowRightIcon: () => import("preact").JSX.Element;
+type IconProps = {
+    className?: string;
+};
+export declare const PlusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const MinusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowUpIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowDownIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowLeftIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowRightIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-export const PlusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
+export const PlusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
 };
-export const MinusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
+export const MinusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
 };
-export const ArrowUpIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
+export const ArrowUpIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
 };
-export const ArrowDownIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
+export const ArrowDownIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
 };
-export const ArrowLeftIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
+export const ArrowLeftIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
 };
-export const ArrowRightIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
+export const ArrowRightIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
 };

package/dist/components/inspector.d.ts

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

package/dist/components/inspector.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useState } from "preact/hooks";
 import { GameObject } from "./game-object";
-export const Inspector = ({ updateTimeout = 250, isVisibleOnLoad = true, k, }) => {
+import { useObjectBoolean } from "./boolean-comp";
+const INTERVAL_OPTIONS = [
+    { value: 100, label: "100ms" },
+    { value: 250, label: "250ms" },
+    { value: 500, label: "500ms" },
+    { value: 1000, label: "1s" },
+];
+export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, k, }) => {
+    const [updateTimeout, setUpdateTimeout] = useState(initUpdateTimeout);
+    const [shouldDrawInspect, setShouldDrawInspect] = useState(initDrawInspectOnHover);
     const [root, setRoot] = useState(k.getTreeRoot());
     const [renderIndex, setRenderIndex] = useState(0);
     const [isVisible, setIsVisible] = useState(isVisibleOnLoad);
+    const paused = useObjectBoolean(k.getTreeRoot(), "paused");
     // Force re-render every updateTimeout milliseconds
     useEffect(() => {
         const interval = setInterval(() => {
@@ -12,15 +22,15 @@ export const Inspector = ({ updateTimeout = 250, isVisibleOnLoad = true, k, }) =
         }, updateTimeout);
         return () => clearInterval(interval);
     }, [renderIndex, updateTimeout]);
-    const handlePauseClick = () => {
-        const root = k.getTreeRoot();
-        root.paused = !root.paused;
-    };
+    // const handlePauseClick = () => {
+    //   const root = k.getTreeRoot();
+    //   root.paused = !root.paused;
+    // };
     const toggleVisibility = () => {
         setIsVisible(!isVisible);
     };
     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: handlePauseClick, children: "Pause/Resume" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: _jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, 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", _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: _jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true }) })] }));
 };

package/dist/components/position-controls.js

@@ -1,9 +1,10 @@
 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("button", { class: "ki-btn", onClick: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.x += 1), 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("button", { class: "ki-btn", onClick: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
+    return (_jsxs("div", { class: "pos-controls", children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.x += 1), 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.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
 };

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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.js

@@ -1,9 +1,16 @@
 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;
     }
-    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", defaultValue: obj.text, onInput: (e) => {
-                obj.text = e.target.value;
-            } }) }));
+    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/init.d.ts

@@ -1,7 +1,9 @@
-import type { KAPLAYCtx } from "kaplay";
+import kaplay from "kaplay";
+export type KAPLAYCtxType = ReturnType<typeof kaplay>;
 export interface InspectorOptions {
-    updateTimeout?: number;
+    initUpdateTimeout?: number;
+    initDrawInspectOnHover?: boolean;
     isVisibleOnLoad?: boolean;
     className?: string;
 }
-export default function init(k: KAPLAYCtx, props?: InspectorOptions): void;
+export default function init(k: KAPLAYCtxType, props?: InspectorOptions): void;

package/dist/init.js

@@ -2,11 +2,9 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { render } from "preact";
 import { Inspector } from "./components/inspector";
 export default function init(k, props = {}) {
-    const { 
-    //
-    className = "", updateTimeout = 100, isVisibleOnLoad = true, } = props;
+    const { className = "", initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, } = props;
     const appElement = document.createElement("div");
     appElement.className = `k-inspector ${className}`;
     document.body.appendChild(appElement);
-    render(_jsx(Inspector, { k: k, updateTimeout: updateTimeout, isVisibleOnLoad: isVisibleOnLoad }), appElement);
+    render(_jsx(Inspector, { k: k, initUpdateTimeout: initUpdateTimeout, isVisibleOnLoad: isVisibleOnLoad, initDrawInspectOnHover: initDrawInspectOnHover }), appElement);
 }

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

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

package/dist/lib/draw-bbox.js

@@ -1,26 +1,31 @@
 export const drawBoundingBox = (obj, k) => {
-    // TODO handle a case when anchor is a vec2
-    const anchor = obj.anchor || "topleft";
-    if (obj.renderArea && obj.has("anchor")) {
-        const offset = k.vec2(0);
+    if (obj.renderArea) {
         const rect = obj.renderArea().bbox();
-        if (anchor.includes("left")) {
-            offset.x = 0;
-        }
-        else if (anchor.includes("right")) {
-            offset.x = rect.width;
-        }
-        else {
-            offset.x = rect.width / 2;
-        }
-        if (anchor.includes("top")) {
-            offset.y = 0;
-        }
-        else if (anchor.includes("bot")) {
-            offset.y = rect.height;
+        const anchor = obj.anchor || "topleft";
+        const offset = k.vec2(0);
+        if (typeof anchor === "string") {
+            if (anchor.includes("left")) {
+                offset.x = 0;
+            }
+            else if (anchor.includes("right")) {
+                offset.x = rect.width;
+            }
+            else {
+                offset.x = rect.width / 2;
+            }
+            if (anchor.includes("top")) {
+                offset.y = 0;
+            }
+            else if (anchor.includes("bot")) {
+                offset.y = rect.height;
+            }
+            else {
+                offset.y = rect.height / 2;
+            }
         }
         else {
-            offset.y = rect.height / 2;
+            offset.x = (anchor.x * rect.width + 1) / 2 + rect.width / 2;
+            offset.y = (anchor.y * rect.height + 1) / 2 + rect.height / 2;
         }
         rect.pos = rect.pos.sub(offset);
         k.drawRect({
@@ -32,7 +37,5 @@ export const drawBoundingBox = (obj, k) => {
                 opacity: 0.75,
             },
         });
-        // TODO figure out why these positions are wrong
-        // obj.children.forEach((child) => drawBoundingBox(child, k));
     }
 };

package/dist/lib/get-object-info.d.ts

@@ -2,7 +2,7 @@ import type { GameObj } from "kaplay";
 export declare const getObjectInfo: (obj: GameObj) => {
     compsData: {
         tag: string;
-        value?: string | import("preact").JSX.Element;
+        value?: string | import("preact").JSX.Element | null;
     }[];
     tags: string;
     compsLabel: string;

package/dist/lib/inspect-comps.d.ts

@@ -2,5 +2,5 @@ import type { GameObj } from "kaplay";
 import type { JSX } from "preact";
 export declare const inspectComps: (obj: GameObj) => {
     tag: string;
-    value?: string | JSX.Element;
+    value?: string | JSX.Element | null;
 }[];

package/dist/lib/inspect-comps.js

@@ -2,60 +2,74 @@ 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";
+const componentMap = {
+    pos: PositionControls,
+    text: TextControls,
+    sprite: SpriteControls,
+    color: Color,
+};
 export const inspectComps = (obj) => {
-    const info = {};
-    for (const [tag, comp] of obj._compStates) {
-        info[tag] = comp.inspect?.() ?? null;
+    const object = obj;
+    const data = [];
+    for (const [tag, comp] of object._compStates) {
+        if (componentMap[tag]) {
+            const CompComponent = componentMap[tag];
+            data.push({
+                tag,
+                value: _jsx(CompComponent, { obj: obj }),
+            });
+        }
+        else if (comp.inspect) {
+            const value = comp.inspect();
+            data.push({
+                tag,
+                // Remove component name if it is present in the inspect result.
+                // Native Kaplay components are doing this,
+                // and because we are displaying the name in the left column already,
+                // we don't need to display it again.
+                value: value ? value.replace(`${tag}: `, "") : "",
+            });
+        }
+        else {
+            data.push({
+                tag,
+                // Commented out on purpose
+                // For now, only the name of the component is shown,
+                // until I try it out and figure if it would be useful to display the full component state
+                // value: stringify(comp),
+            });
+        }
     }
-    for (const [i, comp] of obj._anonymousCompStates.entries()) {
+    for (const [i, comp] of object._anonymousCompStates.entries()) {
         if (comp.inspect) {
-            info[i] = comp.inspect();
+            data.push({
+                tag: `anonymous ${i}`,
+                value: comp.inspect(),
+            });
             continue;
         }
         for (const [key, value] of Object.entries(comp)) {
             if (typeof value === "function") {
-                info[key] = `${key}: function`;
-            }
-            else if (typeof value === "object") {
-                info[key] = `${key}: ${stringify(value)}`;
-            }
-            else {
-                info[key] = `${key}: ${value}`;
-            }
-        }
-    }
-    const lines = [];
-    for (const tag in info) {
-        if (info[tag]) {
-            if (tag === "pos") {
-                // Custom component for position
-                lines.push({
-                    tag,
-                    value: _jsx(PositionControls, { obj: obj }),
+                data.push({
+                    tag: key,
+                    value: "function",
                 });
             }
-            else {
-                lines.push({
-                    tag,
-                    value: info[tag].replace(`${tag}: `, ""),
-                });
-            }
-        }
-        else {
-            if (tag === "text") {
-                // Custom component for text
-                lines.push({
-                    tag,
-                    value: _jsx(TextControls, { obj: obj }),
+            else if (typeof value === "object") {
+                data.push({
+                    tag: key,
+                    value: stringify(value),
                 });
             }
             else {
-                // pushes only the tag (name of the component)
-                lines.push({
-                    tag,
+                data.push({
+                    tag: key,
+                    value,
                 });
             }
         }
     }
-    return lines.sort((a, b) => a.tag.localeCompare(b.tag));
+    return data.sort((a, b) => a.tag.localeCompare(b.tag));
 };

package/dist/lib/stringify.js

@@ -1,6 +1,6 @@
 export const stringify = (obj, maxDepth = 1, currentDepth = 0) => {
     if (typeof obj !== "object" || obj === null) {
-        return obj.toString();
+        return JSON.stringify(obj);
     }
     const lines = Object.entries(obj).map(([key, value]) => {
         if (typeof value === "function") {

package/dist/styles.css

@@ -113,6 +113,8 @@
     background-color: var(--ki-bg);
     border-bottom: 1px solid var(--ki-gray-light);
     border-top: 1px solid var(--ki-gray-light);
+    flex-wrap: wrap;
+    font-size: 0.75rem;
   }
 
   .k-inspector__objects {
@@ -129,6 +131,18 @@
     right: 0.5rem;
   }
 
+  .k-inspector__interval {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .k-inspector__header label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   /* Game object */
 
   .game-object {
@@ -312,14 +326,49 @@
     outline: none;
     border-color: var(--ki-primary);
   }
-}
 
-/* Breadcrumbs */
+  /* Color */
+
+  .color-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: fit-content;
+    min-width: 12rem;
+  }
+
+  .color-controls__swatch {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+    border: 1px solid var(--ki-border-light);
+  }
+
+  .color-controls__slider {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .color-controls__slider-input--r {
+    accent-color: red;
+  }
 
-.breadcrumbs {
-  font-size: 0.75rem;
-  display: flex;
-  margin-bottom: 0.5rem;
-  gap: 0.25rem;
-  align-items: center;
+  .color-controls__slider-input--g {
+    accent-color: green;
+  }
+
+  .color-controls__slider-input--b {
+    accent-color: blue;
+  }
+
+  /* Breadcrumbs */
+
+  .breadcrumbs {
+    font-size: 0.75rem;
+    display: flex;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }

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.0.4",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.2",
-    "@types/node": "^25.0.2",
+    "@types/node": "^25.0.3",
     "typescript": "~5.9.3",
     "vite": "^7.3.0"
   },