@stanko/kaplay-inspector 0.0.3 → 0.1.0

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:
@@ -64,22 +66,65 @@ 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 */
+}
+```
+
+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
-* [ ] Add documentation about positioning the inspector
 * [ ] Collapse/Expand all button
-* [x] Check if all of CSS is namespaced
-* [x] Show/Hide button
-* [x] Build and deploy simple demo
+* [ ] Clean up `inspect-comps.tsx`

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,58 @@
 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, }) => {
+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: [_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) }) })] }), _jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `hidden-${obj.id}`, children: _jsx("b", { children: "hidden" }) }), _jsx("div", { children: _jsx("input", { id: `hidden-${obj.id}`, type: "checkbox", defaultChecked: obj.hidden, onChange: () => (obj.hidden = !obj.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/inspector.d.ts

@@ -1,6 +1,5 @@
-import type { KAPLAYCtxT } from "kaplay";
-import type { InspectorOptions } from "../init";
+import type { InspectorOptions, KAPLAYCtxType } from "../init";
 export interface InspectorProps extends InspectorOptions {
-    k: KAPLAYCtxT;
+    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,7 +1,15 @@
 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, }) => {
+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);
@@ -22,5 +30,5 @@ export const Inspector = ({ updateTimeout = 250, isVisibleOnLoad = true, k, }) =
     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: handlePauseClick, children: "Pause/Resume" }), "\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/sprite.d.ts

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

package/dist/components/sprite.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+export const Sprite = ({ obj }) => {
+    const object = obj;
+    const animation = object.getCurAnim();
+    return (_jsxs("div", { class: "sprite", 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/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,63 @@ 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 { Sprite } from "../components/sprite";
+const componentMap = {
+    pos: PositionControls,
+    text: TextControls,
+    sprite: Sprite,
+};
 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}: `, "") : "",
+            });
+        }
     }
-    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/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 {
@@ -320,6 +334,6 @@
   font-size: 0.75rem;
   display: flex;
   margin-bottom: 0.5rem;
-  gap: 0.25rem;
+  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.3",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",
@@ -24,13 +24,13 @@
     "kaplay": "^4000.0.0-alpha.20"
   },
   "dependencies": {
-    "preact": "^10.27.2"
+    "preact": "^10.28.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.2",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "typescript": "~5.9.3",
-    "vite": "^7.2.4"
+    "vite": "^7.3.0"
   },
   "repository": {
     "type": "git",
@@ -45,5 +45,5 @@
   "bugs": {
     "url": "https://github.com/Stanko/kaplay-inspector/issues"
   },
-  "homepage": "https://github.com/Stanko/kaplay-inspector"
+  "homepage": "https://muffinman.io/kaplay-inspector/"
 }