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/TabStrip.ts

@@ -17,9 +17,11 @@ export interface TabPlace<T extends string> {
   close?: { x: number; y: number };
 }
 
-/** A document's tab: its kind before the name, and an × that calls `onClose`. */
+/** A document's tab: the icon of its kind before the name, and an × that calls `onClose`. */
 export interface DocumentSpec {
+  /** The kind as a word, for the check scripts; the tab shows `icon`. */
   kind: string;
+  icon: string;
   onClose: () => void;
 }
 
@@ -30,6 +32,8 @@ export interface DocumentSpec {
 export class TabStrip<T extends string> extends HStack {
   private readonly order: T[] = [];
   private readonly buttons = new Map<T, Button>();
+  /** A document's icon, which the `»` menu shows in front of its name too. */
+  private readonly icons = new Map<T, string>();
   private readonly overflow: Button;
   private hiddenTabs: T[] = [];
   private active: T | null;
@@ -62,6 +66,7 @@ export class TabStrip<T extends string> extends HStack {
     if (!button) return;
     this.order.splice(this.order.indexOf(tab), 1);
     this.buttons.delete(tab);
+    this.icons.delete(tab);
     this.hiddenTabs = this.hiddenTabs.filter((hidden) => hidden !== tab);
     button.destroy({ children: true });
     this.relayout();
@@ -88,10 +93,11 @@ export class TabStrip<T extends string> extends HStack {
     // Half the theme padding: nine tabs at the full 8 px overflow the centre column of a 1280 px
     // window by 27 px, and a button past its edge sits under the inspector (measured, CI run 5).
     const button = document
-      ? new DocumentTab(label, document.kind, () => this.onPick(tab), document.onClose)
+      ? new DocumentTab(label, document.kind, document.icon, () => this.onPick(tab), document.onClose)
       : new Button(label, { variant: 'ghost', padding: 4, onClick: () => this.onPick(tab) });
     this.order.splice(at, 0, tab);
     this.buttons.set(tab, button);
+    if (document) this.icons.set(tab, document.icon);
     // The `»` button is the first child, so a tab's index among the children is one past its place.
     this.addChildAt(button, at + 1);
     this.setChildIndex(this.overflow, this.children.length - 1);
@@ -149,8 +155,7 @@ export class TabStrip<T extends string> extends HStack {
   private openMenu(): void {
     const items = this.hiddenTabs.map((tab) => {
       const button = this.buttons.get(tab)!;
-      const kind = button instanceof DocumentTab ? `${button.kindLabel} · ` : '';
-      return { label: `${kind}${button.text}`, onSelect: () => this.onPick(tab) };
+      return { label: button.text, icon: this.icons.get(tab), onSelect: () => this.onPick(tab) };
     });
     new Menu(items).openBelow(this.overflow);
   }