@stanko/kaplay-inspector 0.1.5 → 0.1.7

package/README.md

@@ -132,6 +132,5 @@ Same as with colors, be sure to have a higher specificity selector if inspector'
 ## TODO
 
 * [ ] Controllable theme - system/light/dark. At the moment it is always matching the system.
-* [ ] Filter/search
 * [ ] Persist search in URL or local storage
 * [ ] Collapse/Expand all button

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

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

package/dist/components/anchor-controls.js

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

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

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

package/dist/components/game-object.js

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

package/dist/components/inspector.d.ts

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

package/dist/components/inspector.js

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

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

@@ -3,4 +3,4 @@ export interface PositionControlsProps {
     className?: string;
     obj: GameObj;
 }
-export declare const PositionControls: ({ obj }: PositionControlsProps) => import("preact").JSX.Element | null;
+export declare const PositionControls: ({ className, obj, }: PositionControlsProps) => import("preact").JSX.Element | null;

package/dist/components/position-controls.js

@@ -1,10 +1,8 @@
-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 }) => {
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { VectorControls } from "./vector-controls";
+export const PositionControls = ({ className = "", obj, }) => {
     if (!obj.pos) {
         return null;
     }
-    return (_jsxs("div", { class: "pos-controls", children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x - 1, obj.pos.y), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x + 1, obj.pos.y), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x, obj.pos.y - 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => obj.moveTo(obj.pos.x, obj.pos.y + 1), children: _jsx(ArrowDownIcon, {}) })] }));
+    return (_jsx(VectorControls, { className: className, value: obj.pos, onChange: (pos) => (obj.pos = pos) }));
 };

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

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

package/dist/components/search-results.js

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

package/dist/components/text-controls.js

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

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

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

package/dist/components/vector-controls.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { roundToDecimal } from "../lib/round-to-decimal";
+import { HoldButton } from "./hold-button";
+import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, } from "./icons";
+import { k } from "../k";
+import { cx } from "../lib/cx";
+export const VectorControls = ({ className = "", value, onChange, step = 1, }) => {
+    return (_jsxs("div", { class: cx(className, "vector-controls"), children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x - step, value.y)), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x + step, value.y)), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "vector-controls__value", children: ["x: ", roundToDecimal(value.x, 2)] }), _jsxs("div", { class: "vector-controls__value", children: ["y: ", roundToDecimal(value.y, 2)] }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x, value.y - step)), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => onChange(k.vec2(value.x, value.y + step)), children: _jsx(ArrowDownIcon, {}) })] }));
+};

package/dist/init.d.ts

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

package/dist/init.js

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

package/dist/k.d.ts

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

package/dist/k.js

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

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

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

package/dist/lib/draw-bbox.js

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

package/dist/lib/inspect-comps.js

@@ -6,11 +6,13 @@ import { SpriteControls } from "../components/sprite-controls";
 import { Color } from "../components/color-controls";
 import { ChildObject } from "../components/child-object";
 import { isGameObj } from "./is-game-obj";
+import { AnchorControls } from "../components/anchor-controls";
 const componentMap = {
     pos: PositionControls,
     text: TextControls,
     sprite: SpriteControls,
     color: Color,
+    anchor: AnchorControls,
 };
 export const inspectComps = (obj) => {
     const object = obj;

package/dist/styles.css

@@ -309,9 +309,9 @@
     padding-bottom: 1rem;
   }
 
-  /* Position controls */
+  /* Vector controls */
 
-  .pos-controls {
+  .vector-controls {
     display: flex;
     align-items: center;
     gap: 0.25rem;
@@ -319,13 +319,13 @@
     min-width: 12rem;
   }
 
-  .pos-controls .ki-btn,
-  .pos-controls__value {
+  .vector-controls .ki-btn,
+  .vector-controls__value {
     flex-shrink: 0;
     text-align: center;
   }
 
-  .pos-controls__value {
+  .vector-controls__value {
     width: 5rem;
   }
 
@@ -335,6 +335,26 @@
     width: 100%;
   }
 
+  /* Anchor controls */
+
+  .anchor-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .anchor-radios {
+    text-align: center;
+  }
+
+  .anchor-row {
+    display: flex;
+  }
+
+  .anchor-radios label {
+    padding: 0.25rem;
+  }
+
   /* Color */
 
   .color-controls {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stanko/kaplay-inspector",
   "description": "A dev tool for Kaplay which allows you to explore and inspect the game object tree real time.",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",
@@ -24,13 +24,13 @@
     "kaplay": "^4000.0.0-alpha.20"
   },
   "dependencies": {
-    "preact": "^10.28.0"
+    "preact": "^10.28.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.2",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.6",
     "typescript": "~5.9.3",
-    "vite": "^7.3.0"
+    "vite": "^7.3.1"
   },
   "repository": {
     "type": "git",