Asset panel grouped by kind with icons: assets are listed under a header per kind (Sprites, Behaviors, ...) with the count on the right, empty groups are not shown, every group starts folded when a project is opened, a click on the header folds and unfolds it, selecting an asset elsewhere unfolds its group and folding the group of the selected asset clears the selection; every asset kind has an SVG icon in src/editor/panels/icons/ drawn before the name, the pure rule for grouping and sorting lives in assetGroups.ts; the same icons replace the kind word in document tabs and the overflow menu (a list icon for the List tab, which also fixes the close x lying over the end of the active tab's text), stand before every entry of the + menu (Button got an icon option) and on the right of scene object rows instead of the type name; the colour swatch next to sprite names is gone from both panels; the SVG loader moved to src/ui/svg.ts for both icon sets; test hook assetRow unfolds the group and scrolls to the row, assetRowShown only reads, new hook menuIcons; e2e 4g and 4h, 14 and 44a check the icons (#176)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/editor/debugHook.ts

@@ -1,6 +1,7 @@
 import { type Application, Color, type ColorSource, type Container, Mesh, Rectangle, Text } from 'pixi.js';
 import { NameTransitionCommand } from '../core/commands/graphCommands';
 import { previewObjectId } from '../core/model/animationPreview';
+import type { AssetType } from '../core/model/AssetTypes';
 import { resolveObjects } from '../core/model/instance';
 import { findAsset, findAssetOf, findObjectHolder } from '../core/model/Project';
 import type { FrameRect } from '../core/model/texture';
@@ -259,6 +260,8 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     overlayRect,
     /** Entries of the open menu in drawn order, `null` for a separator line (#43). */
     menuRows: () => currentMenu()?.rowsDrawn() ?? null,
+    /** Per entry of `menuRows`, whether an icon stands in front of it. */
+    menuIcons: () => currentMenu()?.iconsDrawn() ?? null,
     textOverflows,
     labelsDropped,
     shownLabel,
@@ -304,8 +307,13 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     /** The panel-to-view drag in flight, if any – a drop that never started looks like a refused one. */
     dragPayload: () => activeDrag(),
     /** An asset row by id – two assets can share a name with the container picker's label. */
-    assetRow: (id: string) => assets.rowGlobal(id),
+    /** An asset's row, its group unfolded first as a user would; `assetRowShown` leaves it folded. */
+    assetRow: (id: string) => assets.rowGlobal(id, true),
+    assetRowShown: (id: string) => assets.rowGlobal(id),
     assetRowColor: (id: string) => assets.rowColor(id),
+    /** The asset panel's groups in order; a heading's row is `assetRow('group:<type>')`. */
+    assetGroups: () => assets.groups(),
+    assetGroupIcon: (type: AssetType) => assets.groupIcon(type),
     /** The panel's own rectangle – what tells a row in view from one scrolled past its edge. */
     assetsRect: () => rectOf(assets),
     gameInfo: () => gameView.debugInfo(),
@@ -655,6 +663,8 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     /** Centre of a hierarchy row, clear of the chevron – for clicks that must hit the row itself. */
     hierarchyRow: (id: string) => hierarchy.rowPosition(id),
     hierarchyRowColor: (id: string) => hierarchy.rowColor(id),
+    /** Centre of the type icon at the right edge of a hierarchy row. */
+    hierarchyIcon: (id: string) => hierarchy.iconPosition(id),
     hierarchyExpandAll: () => hierarchy.expandAll(),
     hierarchyCollapseAll: () => hierarchy.collapseAll(),
     pixelAt,