virtual-tree-canvas 0.3.9 → 0.4.0

package/README.md

@@ -1,24 +1,23 @@
 # virtual-tree-canvas
 
-`virtual-tree-canvas` is a framework-agnostic Canvas2D virtual tree/table widget for large hierarchical datasets.
+**A fast, framework-agnostic tree and tree-table for large hierarchical data.**
 
-It behaves like a normal TreeView or tree-table component, but renders into a canvas instead of creating one DOM element per row.
+`virtual-tree-canvas` gives applications the interactions users expect from a
+native tree view—expandable branches, columns, selection, search, filtering and
+keyboard navigation—without creating a DOM node for every row. It renders only
+what is visible with Canvas2D, so it stays responsive as data and live updates
+grow.
 
-## Features
+![Editable model inspector built with virtual-tree-canvas](./docs/inspector-demo.png)
 
-- Virtualized tree rows
-- Tree-table columns
-- Expand/collapse
-- Single and multi-selection
-- Search and focus
-- Keyboard navigation
-- Horizontal and vertical scrolling
-- Themes and type-based styles
-- Canvas vector icons and image icons
-- Batched dynamic state updates
-- Benchmark/demo mode
+## Why use it?
 
-No React, Web Components, or frontend framework required.
+- **Built for large trees.** Only visible rows plus a small overscan range are painted.
+- **Interactive by default.** Tree-table columns, sorting, resizing, selection, focus, tooltips and keyboard navigation are included.
+- **Good for live data.** Batched state patches update status, progress and values without rebuilding the tree.
+- **Framework-free.** Use it directly from browser JavaScript; no React or Web Component runtime is required.
+- **Easy to style.** Built-in dark, light and tactical themes, type-based styling, and editable SVG icons.
+- **Ready for inspectors.** Turn plain JavaScript objects into compact editable forms or property tables.
 
 ## Install
 
@@ -26,165 +25,85 @@ No React, Web Components, or frontend framework required.
 npm install virtual-tree-canvas
 ```
 
-## Performance Model
+## Quick start
 
-The renderer only draws visible rows plus a small overscan range.
-
-Dynamic updates are handled as patches:
-
-```js
-tree.setDynamicState([
-  { id: 'node-1', state: { status: 1, progress: 0.7, value: 42 } }
-]);
+```html
+<canvas id="assets-tree"></canvas>
 ```
 
-Dynamic patches update node state without rebuilding:
-
-- tree indexes
-- visible rows
-- expansion state
-- layout
-
-Cold-path operations such as `setData()`, expand/collapse, and search may rebuild the visible row list.
-
-For large datasets, `enableWorkers()` moves search and filtered row rebuilds off the main thread when browser Workers are available. The synchronous APIs remain available for small datasets, tests, and custom integrations.
-
-## Basic Usage
+```css
+#assets-tree {
+  display: block;
+  width: 100%;
+  height: 480px;
+}
+```
 
 ```js
 import { TreeViewController } from 'virtual-tree-canvas';
 
-const canvas = document.querySelector('canvas');
-const tree = new TreeViewController({ canvas });
+const tree = new TreeViewController({
+  canvas: document.querySelector('#assets-tree'),
+  initialExpandDepth: 2,
+});
 
 tree.setData([
-  { id: 'root', label: 'Root', type: 'root' },
-  { id: 'child-1', parentId: 'root', label: 'Child', type: 'sensor' }
+  { id: 'fleet', label: 'Fleet', type: 'root' },
+  { id: 'radar-1', parentId: 'fleet', label: 'Forward radar', type: 'sensor' },
+  { id: 'track-100', parentId: 'radar-1', label: 'Track T-100', type: 'track' },
 ]);
-```
 
-## Public API
-
-```js
-tree.setData(nodes);
-tree.setModel(model, meta, { presentation: 'pane' });
-tree.setDynamicState(patches);
-
-tree.expand(nodeId);
-tree.collapse(nodeId);
-tree.toggle(nodeId);
-tree.expandAll();
-tree.collapseAll();
-
-tree.search(query);
-tree.searchAsync(query);
-tree.clearSearch();
-tree.getSearchState();
-tree.nextSearchResult();
-tree.previousSearchResult();
-tree.setFilter(queryOrPredicate);
-tree.setFilterAsync(query);
-tree.clearFilter();
-
-tree.focusNode(nodeId);
-tree.scrollToNode(nodeId, 'center');
-
-tree.getSelection();
-tree.setSelection(['node-1', 'node-2']);
-tree.clearSelection();
-
-tree.setTheme(theme);
-tree.setColumns(columns);
-tree.resizeColumn(columnId, width);
-tree.moveColumn(columnId, targetIndex);
-tree.sortBy(columnId, 'asc');
-tree.clearSort();
-tree.registerIcon('custom', imageOrUrlOrDrawFunction);
-
-tree.enableWorkers();
-tree.disableWorkers();
-```
-
-## Model Inspector
-
-`setModel(model, meta, options)` renders plain JSON-like objects as an editable inspector.
+tree.setDynamicState([
+  { id: 'radar-1', state: { status: 0, progress: 0.72 } },
+  { id: 'track-100', state: { status: 1, value: 430 } },
+]);
 
-```js
-tree.setModel(
-  {
-    sensor: { enabled: true, range: 72, mode: 'track' },
-    tracks: [{ id: 'T-100', speed: 430 }]
-  },
-  {
-    'sensor.range': { min: 0, max: 120, step: 1, integer: true },
-    'sensor.mode': { options: { Search: 'search', Track: 'track' } },
-    'tracks.*.speed': { min: 0, max: 900, step: 5 },
-    'tracks.*.id': { readonly: true }
-  }
-);
+tree.render();
 ```
 
-Inspector options:
+The controller observes the canvas size. Call `tree.render()` from your own
+animation loop when the data is live, or after changing data in a static view.
 
-```js
-tree.setModel(model, meta, {
-  presentation: 'pane',
-  flatRoot: true,    // render root properties directly
-  enforceMeta: true, // fields without metadata are readonly/disabled
-  filter: true,      // use the header as a filter input
-  markUpdated: false // do not show update dots for local user edits
-});
-```
+![Virtual tree-table with status, progress and SVG icons](./docs/tree-demo.png)
 
-Presentations:
+## Common tasks
 
 ```js
-tree.setModel(model, meta, { presentation: 'pane' });  // compact folders + key/value controls
-tree.setModel(model, meta, { presentation: 'table' }); // Property | Value | Type | Description
-```
+// Navigate and select
+tree.expand('radar-1');
+tree.focusNode('track-100', { align: 'center', select: true });
+tree.setSelection(['track-100']);
+
+// Search and filter
+tree.search('forward radar');
+tree.setFilter('track');
+tree.clearFilter();
 
-Metadata is path-based. Dot paths target object properties, and array items use numeric indexes or `*` wildcards:
+// Configure the tree-table
+tree.setColumns(columns);
+tree.sortBy('status', 'asc');
+tree.resizeColumn('name', 320);
 
-```text
-sensor.range
-tracks.0.speed
-tracks.*.speed
+// Use a worker for expensive search/filter work
+await tree.enableWorkers();
 ```
 
-Inspector editors are inferred from values and metadata: checkbox, range, number, text, select, color, button, object, and array.
+## Live updates and performance
 
-Inspector events:
+Use `setDynamicState()` for values that change frequently. It updates the
+dynamic state of affected nodes while retaining indexes, expansion state and
+visible rows.
 
 ```js
-tree.on('valuechange', (event) => {});
-tree.on('modelchange', (event) => {});
-tree.on('action', (event) => {});
-```
-
-`scrollToNode()` supports:
-
-```text
-start | center | end | nearest
-```
-
-## Events
-
-```js
-tree.on('nodehover', (event) => {});
-tree.on('nodeclick', (event) => {});
-tree.on('nodedblclick', (event) => {});
-tree.on('selectionchange', (event) => {});
-tree.on('expand', (event) => {});
-tree.on('collapse', (event) => {});
-tree.on('focuschange', (event) => {});
-tree.on('searchchange', (event) => {});
-tree.on('filterchange', (event) => {});
-tree.on('sortchange', (event) => {});
-tree.on('columnschange', (event) => {});
-tree.on('viewportchange', (event) => {});
+tree.setDynamicState([
+  { id: 'track-100', state: { status: 1, progress: 0.7, value: 42 } },
+]);
 ```
 
-The event payload is available as `event.detail`.
+`setData()`, expand/collapse, sorting and filtering are structural operations
+and may rebuild the visible row list. For very large datasets,
+`enableWorkers()` moves search and filtered row rebuilds off the main thread
+when Workers are available.
 
 ## Columns
 
@@ -195,9 +114,8 @@ tree.setColumns([
     label: 'Name',
     width: 340,
     minWidth: 160,
-    align: 'left',
     kind: 'tree',
-    value: (node) => node.label ?? node.id
+    value: (node) => node.label ?? node.id,
   },
   {
     id: 'status',
@@ -206,128 +124,149 @@ tree.setColumns([
     minWidth: 64,
     align: 'center',
     kind: 'status',
-    value: (_node, state) => state.status
-  }
+    value: (_node, state) => state.status,
+  },
+  {
+    id: 'progress',
+    label: 'Progress',
+    width: 140,
+    kind: 'progress',
+    value: (_node, state) => state.progress,
+  },
 ]);
 ```
 
-Column shape:
+Available column kinds are `tree`, `status`, `value`, `progress`, `type`,
+`updated` and `text`. A column can also provide `render(ctx, cell)` for custom
+Canvas2D content. Import `builtInColumns` or `defaultTreeTableColumns` to start
+from the default set.
 
-```js
-{
-  id: 'status',
-  label: 'Status',
-  width: 80,
-  minWidth: 40,
-  align: 'left' | 'center' | 'right',
-  kind: 'tree' | 'status' | 'value' | 'progress' | 'type' | 'updated' | 'text',
-  sortable: true,
-  value: (node, state) => string | number,
-  render: (ctx, cell) => {}
-}
-```
+## Themes and icons
 
-Built-in helpers:
+Three themes are included:
 
 ```js
-import { builtInColumns, defaultTreeTableColumns } from 'virtual-tree-canvas';
-```
+import { darkTheme, lightTheme, tacticalTheme } from 'virtual-tree-canvas';
 
-The tree column renders indentation, chevron, icon, and label. Other columns render table cells and participate in horizontal scrolling.
-
-Columns can be resized, reordered, and sorted through the controller API. The demo also supports header click sorting and drag-to-resize on column edges.
+tree.setTheme(tacticalTheme);
+```
 
-## Themes
+Themes can map domain types to a colour and icon:
 
 ```js
 tree.setTheme({
   rowHeight: 28,
-  indentWidth: 18,
   font: '12px system-ui',
-  colors: {
-    background: '#0b1020',
-    row: '#0b1020',
-    rowHover: '#111827',
-    rowSelected: '#1e3a8a',
-    rowHighlighted: '#3b0764',
-    text: '#e5e7eb',
-    textMuted: '#94a3b8',
-    guide: '#1f2937',
-    chevron: '#94a3b8',
-    focus: '#38bdf8',
-    progressTrack: '#1f2937',
-    progressFill: '#22c55e',
-    badgeText: '#ffffff'
-  },
   types: {
     root: { icon: 'folder', color: '#38bdf8' },
     platform: { icon: 'aircraft', color: '#60a5fa' },
     sensor: { icon: 'radar', color: '#34d399' },
     warning: { icon: 'warning', color: '#facc15' },
-    error: { icon: 'error', color: '#ef4444' }
   },
-  statuses: {
-    0: { label: 'OK', color: '#22c55e' },
-    1: { label: 'WARN', color: '#facc15' },
-    2: { label: 'ERR', color: '#ef4444' }
-  }
 });
 ```
 
-Built-in theme exports:
+Built-in icons are editable SVG files in [`src/assets/icons`](./src/assets/icons).
+They are preloaded and rasterized once per icon, colour, CSS size and device
+pixel ratio. Rendering rows then uses a cached `drawImage`, not SVG parsing or
+path drawing.
+
+Register application icons from an SVG URL, inline SVG or an image:
 
 ```js
-import { themes, darkTheme, lightTheme, tacticalTheme } from 'virtual-tree-canvas';
+tree.registerIcon('camera', '/icons/camera.svg');
+tree.registerIcon('satellite', '<svg viewBox="0 0 24 24"><path fill="currentColor" d="..."/></svg>');
+tree.registerIcon('logo', imageElement);
 ```
 
-Style resolution order:
+Use `currentColor` in an SVG to inherit the type or dynamic-state colour.
+`tree.iconRegistry.prepare({ icons, size, color, pixelRatio })` is also
+available when an application wants to warm a known icon set before display.
 
-1. Dynamic state override, such as `state.color`
-2. Node type rule, such as `theme.types.sensor`
-3. Default theme color
+## Model inspector
 
-## Icons
+`setModel()` renders JSON-like data as an editable inspector. Metadata controls
+the editor, bounds, choices, labels and descriptions.
 
-Built-in Canvas2D vector icons:
-
-```text
-folder, aircraft, radar, warning, error, task, track, placeholder
+```js
+tree.setModel(
+  {
+    sensor: { enabled: true, range: 72, mode: 'track' },
+    tracks: [{ id: 'T-100', speed: 430 }],
+  },
+  {
+    'sensor.range': { min: 0, max: 120, step: 1, integer: true },
+    'sensor.mode': { options: { Search: 'search', Track: 'track' } },
+    'tracks.*.speed': { min: 0, max: 900, step: 5 },
+    'tracks.*.id': { readonly: true },
+  },
+  { presentation: 'pane', flatRoot: true },
+);
 ```
 
-Register custom icons:
+Choose `presentation: 'pane'` for a compact folder-and-controls view, or
+`presentation: 'table'` for Property / Value / Type / Description columns.
+Editors are inferred from data and metadata: checkbox, range, number, text,
+select, colour, button, object and array.
+
+Listen for user edits and actions with `valuechange`, `modelchange` and
+`action` events.
+
+## Events
 
 ```js
-tree.registerIcon('camera', imageElement);
-tree.registerIcon('camera-url', '/icons/camera.png');
-tree.registerIcon('custom-vector', (ctx, x, y, size, color) => {
-  ctx.fillStyle = color;
-  ctx.fillRect(x, y, size, size);
+tree.on('nodeclick', (event) => {
+  console.log(event.detail.nodeId);
 });
+tree.on('selectionchange', (event) => {});
+tree.on('expand', (event) => {});
+tree.on('searchchange', (event) => {});
+tree.on('filterchange', (event) => {});
+tree.on('valuechange', (event) => {});
 ```
 
-Icons are cached by name and drawn only for rendered rows.
+Other events include `nodehover`, `nodedblclick`, `collapse`, `focuschange`,
+`sortchange`, `columnschange`, `viewportchange`, `modelchange` and `action`.
+The payload is always available as `event.detail`.
 
-## Demo
+## API overview
 
-```bash
-npm run demo
-```
+```js
+tree.setData(nodes);
+tree.setDynamicState(patches);
+tree.setTheme(theme);
+tree.setColumns(columns);
+
+tree.expand(nodeId);
+tree.collapse(nodeId);
+tree.toggle(nodeId);
+tree.expandAll();
+tree.collapseAll();
+
+tree.search(query, { caseSensitive, wholeWord });
+tree.setFilter(queryOrPredicate, { caseSensitive, wholeWord });
+tree.clearSearch();
+tree.clearFilter();
 
-Open:
+tree.focusNode(nodeId, { align: 'start' | 'center' | 'end' | 'nearest' });
+tree.scrollToNode(nodeId, 'center');
+tree.scrollTo(x, y);
 
-```text
-http://localhost:4173/demo/
+tree.setSelection(ids);
+tree.getSelection();
+tree.registerIcon(name, svgOrImage);
+tree.enableWorkers();
+tree.disableWorkers();
 ```
 
-Inspector demo:
+## Demo
 
-```text
-http://localhost:4173/demo/inspector.html
+```bash
+npm run demo
 ```
 
-The demo includes dataset sizes, update rates, benchmark stats, search, filtering, selection, expand/collapse, themes, and tree-table columns.
-
-Benchmark stats separate frame, patch, scene, render, search, filter, and worker timings. Use "Copy JSON" to export the current sample.
+Open <http://localhost:4173/demo/> for the large-tree benchmark, or
+<http://localhost:4173/demo/inspector.html> for the editable inspector demo.
 
 ## Tests
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",
@@ -20,6 +20,7 @@
   },
   "files": [
     "src",
+    "docs",
     "README.md",
     "LICENSE"
   ],

package/src/assets/icons/air.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5l1.4 8.1 7.2 4.2-7.9-1.3L12 21.5l-.7-8-7.9 1.3 7.2-4.2z"/><path d="M9.8 18.8L6.5 21M14.2 18.8l3.3 2.2" fill="none"/></svg>

package/src/assets/icons/aircraft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5l1.4 8.1 7.2 4.2-7.9-1.3L12 21.5l-.7-8-7.9 1.3 7.2-4.2z"/><path d="M9.8 18.8L6.5 21M14.2 18.8l3.3 2.2" fill="none"/></svg>

package/src/assets/icons/bus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h12v13H6zM4 8h2m12 0h2M6 17l-2 3m14-3 2 3"/><path d="M8 7h3v4H8zm5 0h3v4h-3zM8 15h.01M16 15h.01"/></svg>

package/src/assets/icons/control.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M4 17h16l2 3H2zM12 17l-2-8"/><circle cx="9.5" cy="7" r="2" fill="currentColor"/><circle cx="16" cy="19" r=".8" fill="currentColor"/><circle cx="19" cy="19" r=".8" fill="currentColor"/></svg>

package/src/assets/icons/damage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-linejoin="round"><path d="m12 2 2.5 5L21 5l-3 5 4 3-5.5 1L17 21l-5-3-5 3 .5-7L2 13l4-3-3-5 6.5 2z"/><circle cx="12" cy="12" r="2.2" fill="#fff"/></svg>

package/src/assets/icons/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><path d="m9 9 6 6m0-6-6 6"/></svg>

package/src/assets/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2.1 2H18.5A2.5 2.5 0 0 1 21 8.5v8A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5z"/></svg>

package/src/assets/icons/ground.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 10h12l3 3v5H4zm4-3h7v3H8zM6.5 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/></svg>

package/src/assets/icons/inspector-array.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="12" r="4"/><circle cx="16" cy="12" r="4"/></svg>

package/src/assets/icons/inspector-object.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="1"/><path d="M10 5v14m4-14v14"/></svg>

package/src/assets/icons/inspector-value.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/></svg>

package/src/assets/icons/munition.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-linejoin="round"><path d="m12 2 3 5v10l-3 5-3-5V7z"/><path d="m9 14-6 5 6-1m6-4 6 5-6-1" fill="none" stroke-width="2" stroke-linecap="round"/></svg>

package/src/assets/icons/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>

package/src/assets/icons/point.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="12" r="8"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/></svg>

package/src/assets/icons/radar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 12l6.5-5M12 12a7 7 0 1 0 7 7"/><path d="M12 5a7 7 0 0 1 7 7"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/></svg>

package/src/assets/icons/situation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4" opacity=".55"/><path d="M3 12h18M12 3v18m0-9 6-5"/><circle cx="16" cy="8.5" r="1" fill="currentColor" stroke="none"/></svg>

package/src/assets/icons/space.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><circle cx="12" cy="12" r="3" fill="currentColor"/><path d="M3 9h5v6H3zm13 0h5v6h-5zM8 12h8M4 18c4-3 12-3 16 0"/></svg>

package/src/assets/icons/subsurface.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M3 14c2-3 16-3 18 0-2 3-16 3-18 0M10 8h4v5h-4zM9 7h6"/><path d="M4 20c2-1.5 4-1.5 6 0s4 1.5 6 0" fill="none" stroke-linecap="round"/></svg>

package/src/assets/icons/surface.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M3 14h14l4 3-16 2zM9 8h5v6H9zM12 4v4"/><path d="M4 21c2-1.5 4-1.5 6 0s4 1.5 6 0" fill="none" stroke-linecap="round"/></svg>

package/src/assets/icons/task.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="4" width="14" height="16" rx="2"/><path d="M9 4.5h6M8.5 11.5l2 2 4-4M9 16h6"/></svg>

package/src/assets/icons/track.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="7"/><path d="M12 3v18M3 12h18"/></svg>

package/src/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.27 3.3a2 2 0 0 1 3.46 0l8.02 13.9A2 2 0 0 1 20.02 20H3.98a2 2 0 0 1-1.73-2.8zM11 9v5h2V9zm0 7v2h2v-2z"/></svg>

package/src/assets/icons.js

@@ -0,0 +1,25 @@
+/** Built-in SVG sources. Use registerIcon(name, urlOrSvg) to add application icons. */
+export const builtinIconUrls = Object.freeze({
+  placeholder: new URL('./icons/placeholder.svg', import.meta.url).href,
+  folder: new URL('./icons/folder.svg', import.meta.url).href,
+  aircraft: new URL('./icons/aircraft.svg', import.meta.url).href,
+  radar: new URL('./icons/radar.svg', import.meta.url).href,
+  warning: new URL('./icons/warning.svg', import.meta.url).href,
+  error: new URL('./icons/error.svg', import.meta.url).href,
+  task: new URL('./icons/task.svg', import.meta.url).href,
+  bus: new URL('./icons/bus.svg', import.meta.url).href,
+  track: new URL('./icons/track.svg', import.meta.url).href,
+  point: new URL('./icons/point.svg', import.meta.url).href,
+  munition: new URL('./icons/munition.svg', import.meta.url).href,
+  air: new URL('./icons/air.svg', import.meta.url).href,
+  ground: new URL('./icons/ground.svg', import.meta.url).href,
+  surface: new URL('./icons/surface.svg', import.meta.url).href,
+  subsurface: new URL('./icons/subsurface.svg', import.meta.url).href,
+  space: new URL('./icons/space.svg', import.meta.url).href,
+  control: new URL('./icons/control.svg', import.meta.url).href,
+  situation: new URL('./icons/situation.svg', import.meta.url).href,
+  damage: new URL('./icons/damage.svg', import.meta.url).href,
+  'inspector-object': new URL('./icons/inspector-object.svg', import.meta.url).href,
+  'inspector-array': new URL('./icons/inspector-array.svg', import.meta.url).href,
+  'inspector-value': new URL('./icons/inspector-value.svg', import.meta.url).href,
+});