@stanko/kaplay-inspector 0.0.1

package/README.md

@@ -0,0 +1,71 @@
+# Kaplay Inspector
+
+A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and inspect the game object tree.
+
+## Features
+
+- Navigate the game object tree
+- Updates every 100ms (configurable) 
+- 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 and text
+- Pause an object
+- Dark theme (is this a feature?)
+
+## Usage
+
+This is a dev tool, so I strongly recommend you import it only in development mode. If you are using vite, it exposes the dev flag in `import.meta.env.DEV`. For other bundlers check their documentation.
+
+You'll need to import the CSS and `init` method, here is an example using vite:
+
+```ts
+import kaplay from "kaplay";
+
+// Init you kaplay game
+const k = kaplay({})
+
+if (
+  // Make sure to load it only in development mode
+  import.meta.env.DEV &&
+  // I like to enable it only when ?inspector is available in the URL (this is optional)
+  // This gives you an easy way to enable or disable it
+  new URLSearchParams(window.location.search).get("inspector") !== null
+) {
+  import("@stanko/kaplay-inspector/styles.css");
+  import("@stanko/kaplay-inspector").then(({ default: init }) => {
+    // Pass the "k" instance to the inspector
+    init(k);
+  });
+}
+```
+
+### Options
+
+You can pass options object to the init method as a second parameter:
+
+```ts
+init(k, {
+  updateTimeout: 250,
+})
+```
+
+available options are:
+
+```ts
+interface InspectorOptions {
+  updateTimeout?: number; // in milliseconds
+}
+```
+
+
+## TODO
+
+* [ ] Show/Hide button
+* [ ] 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
+* [ ] Build and deploy simple demo
+* [ ] Figure out why child bounding box are drawn in the wrong position
+* [ ] Check if all of CSS is namespaced

package/dist/components/breadcrumbs.d.ts

@@ -0,0 +1,7 @@
+import type { GameObj } from "kaplay";
+interface BreadcrumbsProps {
+    obj: GameObj;
+    setRenderRoot: (obj: GameObj) => void;
+}
+export declare const Breadcrumbs: ({ obj, setRenderRoot }: BreadcrumbsProps) => import("preact").JSX.Element;
+export {};

package/dist/components/breadcrumbs.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+import { getObjectInfo } from "../lib/get-object-info";
+export const Breadcrumbs = ({ obj, setRenderRoot }) => {
+    const breadcrumbs = [];
+    let parent = obj.parent;
+    while (parent) {
+        const { tags, compsLabel } = getObjectInfo(parent);
+        breadcrumbs.unshift({
+            id: parent.id,
+            tags,
+            compsLabel,
+            object: parent,
+        });
+        parent = parent.parent;
+    }
+    return (_jsxs("div", { class: "breadcrumbs", children: ["Back to", breadcrumbs.map((breadcrumb) => (_jsxs("button", { class: "btn", onClick: () => setRenderRoot(breadcrumb.object), children: ["ID ", breadcrumb.id, ": ", breadcrumb.tags || breadcrumb.compsLabel] })))] }));
+};

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

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

package/dist/components/game-object.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { 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, }) => {
+    const [isExpanded, setIsExpanded] = useState(isExpandedExternal);
+    const mouseHoverController = useRef(null);
+    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;
+    useEffect(() => {
+        return () => {
+            mouseHoverController.current?.cancel();
+        };
+    }, []);
+    const handleToggleClick = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleMouseEnter = () => {
+        mouseHoverController.current?.cancel();
+        if (!obj.hidden) {
+            mouseHoverController.current = obj.onDraw(() => {
+                obj.drawInspect();
+                drawBoundingBox(obj, k);
+            });
+        }
+    };
+    const handleMouseLeave = () => {
+        mouseHoverController.current?.cancel();
+    };
+    return (_jsxs("div", { class: cx("obj", className, {
+            "obj--no-children": !hasChildren,
+        }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "obj__content", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("button", { class: cx("obj__header", {
+                            "obj__header--expandable": showExpandTree,
+                        }), onClick: handleToggleClick, children: [_jsx("span", { class: "obj__expand-icon", children: isExpanded ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) }), _jsxs("div", { class: "obj__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "obj__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "obj__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && _jsx("div", { class: "obj__destroyed", children: "DESTROYED" })] }), _jsxs("div", { class: "obj__buttons", children: [!isRenderRoot && (_jsx("button", { class: "btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "obj__comps-wrapper", children: _jsxs("div", { class: "obj__comps", children: [_jsxs("div", { class: "obj__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: "obj__comps-row", children: [_jsx("div", { children: _jsx("b", { children: comp.tag }) }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "obj__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot }, child.id))) }))] }, obj.id));
+};

package/dist/components/icons.d.ts

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

package/dist/components/icons.js

@@ -0,0 +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 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 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 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 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 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" }) }) }));
+};

package/dist/components/inspector.d.ts

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

package/dist/components/inspector.js

@@ -0,0 +1,19 @@
+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, k }) => {
+    const [root, setRoot] = useState(k.getTreeRoot());
+    const [renderIndex, setRenderIndex] = useState(0);
+    // Force re-render every updateTimeout milliseconds
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setRenderIndex(renderIndex + 1);
+        }, updateTimeout);
+        return () => clearInterval(interval);
+    }, [renderIndex, updateTimeout]);
+    const handlePauseClick = () => {
+        const root = k.getTreeRoot();
+        root.paused = !root.paused;
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "exp__header", children: [_jsx("button", { class: "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("div", { class: "exp__objects", children: _jsx(GameObject, { k: k, className: "obj--root", obj: root, setRenderRoot: setRoot, isExpanded: true, isRenderRoot: true }) })] }));
+};

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

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

package/dist/components/position-controls.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { roundToDecimal } from "../lib/round-to-decimal";
+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: "btn", onClick: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { class: "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: "btn", onClick: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx("button", { class: "btn", onClick: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
+};

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export const TextControls = ({ obj }) => {
+    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;
+            } }) }));
+};

package/dist/init.d.ts

@@ -0,0 +1,5 @@
+import type { KAPLAYCtx } from "kaplay";
+export interface InspectorOptions {
+    updateTimeout?: number;
+}
+export default function init(k: KAPLAYCtx, props?: InspectorOptions): void;

package/dist/init.js

@@ -0,0 +1,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 appElement = document.createElement("div");
+    appElement.className = "exp";
+    document.body.appendChild(appElement);
+    render(_jsx(Inspector, { k: k, ...props }), appElement);
+}

package/dist/lib/cx.d.ts

@@ -0,0 +1 @@
+export declare const cx: (...classes: (string | Record<string, any>)[]) => string;

package/dist/lib/cx.js

@@ -0,0 +1,12 @@
+export const cx = (...classes) => {
+    return classes
+        .map((cls) => {
+        if (typeof cls === "string") {
+            return cls;
+        }
+        return Object.keys(cls)
+            .filter((key) => cls[key])
+            .join(" ");
+    })
+        .join(" ");
+};

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

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

package/dist/lib/draw-bbox.js

@@ -0,0 +1,38 @@
+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);
+        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;
+        }
+        else {
+            offset.y = rect.height / 2;
+        }
+        rect.pos = rect.pos.sub(offset);
+        k.drawRect({
+            ...rect,
+            fill: false,
+            outline: {
+                width: 1,
+                color: k.GREEN,
+                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

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

package/dist/lib/get-object-info.js

@@ -0,0 +1,11 @@
+import { inspectComps } from "./inspect-comps";
+export const getObjectInfo = (obj) => {
+    const compsData = inspectComps(obj);
+    const tags = obj.id === 0 ? "Root" : obj.tags.slice(1).join(", ");
+    const compsLabel = compsData.map((comp) => comp.tag).join(", ");
+    return {
+        compsData,
+        tags,
+        compsLabel,
+    };
+};

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

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

package/dist/lib/inspect-comps.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { stringify } from "./stringify";
+import { PositionControls } from "../components/position-controls";
+import { TextControls } from "../components/text-controls";
+export const inspectComps = (obj) => {
+    const info = {};
+    for (const [tag, comp] of obj._compStates) {
+        info[tag] = comp.inspect?.() ?? null;
+    }
+    for (const [i, comp] of obj._anonymousCompStates.entries()) {
+        if (comp.inspect) {
+            info[i] = 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 }),
+                });
+            }
+            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 {
+                // pushes only the tag (name of the component)
+                lines.push({
+                    tag,
+                });
+            }
+        }
+    }
+    return lines.sort((a, b) => a.tag.localeCompare(b.tag));
+};

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

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

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

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

package/dist/lib/stringify.d.ts

@@ -0,0 +1 @@
+export declare const stringify: (obj: any, maxDepth?: number, currentDepth?: number) => string;

package/dist/lib/stringify.js

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

package/dist/styles.css

@@ -0,0 +1,313 @@
+.exp {
+  --exp-bg: rgb(250 250 250);
+  --exp-fg: rgb(25 25 25);
+  --exp-red: #d9174b;
+  --exp-gray-light: rgb(238 238 238);
+  --exp-gray-bg: rgb(244 244 244);
+  --exp-border: rgb(170 170 170);
+  --exp-border-light: rgb(210 210 210);
+
+  --exp-l: 0.62;
+  --exp-c: 0.2;
+  --exp-h: 250;
+  --exp-lch: var(--exp-l) var(--exp-c) var(--exp-h);
+  --exp-h-secondary: 150;
+  --exp-secondary-lch: var(--exp-l) var(--exp-c) var(--exp-h-secondary);
+
+  --exp-primary: oklch(var(--exp-lch));
+  --exp-primary-light: oklch(var(--exp-lch) / 0.1);
+  --exp-secondary: oklch(var(--exp-secondary-lch));
+
+  @media (prefers-color-scheme: dark) {
+    --exp-bg: rgb(30 30 30);
+    --exp-fg: rgb(230 230 230);
+    --exp-red: #ff4073;
+    --exp-gray-light: rgb(50 50 50);
+    --exp-gray-bg: rgb(40 40 40);
+    --exp-border: rgb(80 80 80);
+    --exp-border-light: rgb(60 60 60);
+
+    --exp-l: 0.7;
+    --exp-c: 0.15;
+  }
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--exp-bg);
+  color: var(--exp-fg);
+  max-height: 45vh;
+  overflow: auto;
+  font-family:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+    "DejaVu Sans Mono", monospace;
+  font-size: 0.875rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--exp-border) transparent;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
+  border-top: 1px solid var(--exp-gray-light);
+
+  * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    accent-color: var(--exp-primary);
+    font: inherit;
+    color: inherit;
+  }
+
+  button {
+    border: none;
+    cursor: pointer;
+    background: none;
+    outline-offset: 2px;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--exp-primary);
+  }
+
+  button:active {
+    transform: translateY(1px);
+  }
+
+  .btn {
+    padding: 0.25rem 0.375rem;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    background-color: var(--exp-gray-light);
+    border: 1px solid var(--exp-border-light);
+  }
+
+  .btn:hover {
+    border: 1px solid var(--exp-primary);
+  }
+
+  svg {
+    display: block;
+  }
+
+  .exp__header {
+    position: sticky;
+    top: 0;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    align-items: center;
+    z-index: 2;
+    background-color: var(--exp-bg);
+    border-bottom: 1px solid var(--exp-gray-light);
+  }
+
+  .exp__objects {
+    padding: 0.5rem;
+  }
+
+  /* Game object */
+
+  .obj {
+    transition: background 500ms;
+    position: relative;
+  }
+
+  .obj .obj {
+    padding-left: 1.5rem;
+  }
+
+  .obj .obj::before,
+  .obj .obj__comps-wrapper::before {
+    content: "";
+    height: 100%;
+    position: absolute;
+    left: 0.75rem;
+    top: 0;
+    border-left: 1px solid var(--exp-border);
+  }
+
+  .obj .obj__comps-wrapper::before {
+    left: -1rem;
+  }
+
+  .obj .obj:last-child:before {
+    height: 1rem;
+  }
+
+  .obj--no-children .obj__comps-wrapper:last-child::before {
+    display: none;
+  }
+
+  .obj--root > .obj__content .obj__header::before {
+    display: none;
+  }
+
+  .obj__content {
+    position: relative;
+  }
+
+  /* Header */
+
+  .obj__header {
+    position: relative;
+    display: flex;
+    padding: 0.25rem 0.25rem;
+    margin-right: -0.25rem;
+    gap: 0.25rem;
+    align-items: center;
+    height: 2rem;
+    width: calc(100% + 0.25rem);
+    border-radius: 4px;
+    outline-offset: 0;
+
+    svg rect {
+      fill: var(--exp-bg);
+    }
+  }
+
+  .obj__header:hover {
+    background-color: var(--exp-primary-light);
+  }
+
+  .obj__header::before {
+    content: "";
+    position: absolute;
+    left: calc(-0.75rem);
+    width: 0.75rem;
+    top: 50%;
+    border-bottom: 1px solid var(--exp-border);
+  }
+
+  /* Header info and actions */
+
+  .obj__tags {
+    color: var(--exp-primary);
+    font-weight: bold;
+  }
+
+  .obj__comp-names {
+    color: var(--exp-secondary);
+    font-weight: bold;
+  }
+
+  .obj__buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    height: 2rem;
+  }
+
+  .obj__destroyed {
+    color: var(--exp-red);
+    font-weight: bold;
+  }
+
+  /* Expand tree button */
+
+  .obj__expand-icon {
+    margin-right: 0.25rem;
+  }
+
+  .obj__header:hover .obj__expand-icon {
+    color: var(--exp-primary);
+  }
+
+  /* Comps */
+
+  .obj__comps-wrapper {
+    position: relative;
+    padding: 0.5rem 0;
+    margin-left: 1.75rem;
+  }
+
+  .obj__comps {
+    border: 1px solid var(--exp-border-light);
+    border-radius: 4px;
+    overflow: hidden;
+    font-size: 0.75rem;
+  }
+
+  .obj__comps-row {
+    display: grid;
+    align-items: center;
+    padding: 0.375rem 0.5rem;
+    gap: 0.5rem;
+    grid-template-columns: 10rem 1fr;
+
+    input {
+      display: block;
+    }
+  }
+
+  .obj__comps-row:nth-child(even) {
+    background-color: var(--exp-gray-bg);
+  }
+
+  /* Children */
+
+  .obj__children {
+    padding-bottom: 1rem;
+  }
+
+  /* Position controls */
+
+  .pos-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    width: fit-content;
+    min-width: 12rem;
+  }
+
+  .pos-controls__.btn,
+  .pos-controls__value {
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+  .pos-controls__value {
+    width: 5rem;
+  }
+
+  /* Text Controls */
+
+  .text-controls__input {
+    background-color: var(--exp-bg);
+    border: none;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--exp-border-light);
+    font-size: 0.75rem;
+    border-radius: 4px;
+    width: 100%;
+  }
+
+  .text-controls__input:focus-visible {
+    outline: none;
+    border-color: var(--exp-primary);
+  }
+}
+
+/* Breadcrumbs */
+
+.breadcrumbs {
+  font-size: 0.75rem;
+  display: flex;
+  margin-bottom: 0.5rem;
+  gap: 0.25rem;
+  align-items: center;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@stanko/kaplay-inspector",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/init.js",
+  "types": "./dist/init.d.ts",
+  "files": [
+    "./dist",
+    "./public"
+  ],
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "preview": "vite preview",
+    "copy-css": "cp ./src/styles/styles.css ./dist/",
+    "build": "tsc -b && rm -rf ./docs && vite build && touch ./docs/.nojekyll",
+    "build-lib": "rm -rf ./dist && tsc -p ./tsconfig-lib.json && npm run copy-css",
+    "prepare": "cp ./pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit",
+    "prepublish": "npm run build-lib"
+  },
+  "peerDependencies": {
+    "kaplay": "^4000.0.0-alpha.20"
+  },
+  "dependencies": {
+    "preact": "^10.27.2"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@types/node": "^24.10.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Stanko/kaplay-inspector.git"
+  },
+  "keywords": [
+    "kaplay",
+    "inspector",
+    "dev tools"
+  ],
+  "author": "Stanko",
+  "bugs": {
+    "url": "https://github.com/Stanko/kaplay-inspector/issues"
+  },
+  "homepage": "https://github.com/Stanko/kaplay-inspector"
+}