virtual-tree-canvas 0.7.0 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +12 -1
- package/docs/icon-catalog.html +68 -66
- package/docs/icon-catalog.md +111 -111
- package/docs/performance/dynamic-updates-0.7.1.md +38 -0
- package/package.json +3 -2
- package/src/assets/icons.js +10 -4
- package/src/core/dynamic-state.js +19 -29
- package/src/core/patch-batcher.js +4 -0
- package/src/core/theme-manager.js +238 -64
- package/src/core/tree-cell-layout.js +4 -2
- package/src/core/tree-column-model.js +72 -24
- package/src/core/tree-model.js +4 -2
- package/src/core/view-options.js +98 -25
- package/src/core/visible-row-model.js +50 -20
- package/src/index.d.ts +22 -0
- package/src/input/row-actions.js +224 -83
- package/src/input/row-reorder-input.js +112 -39
- package/src/input/tree-tooltip.js +39 -5
- package/src/input/tree-view-input-controller.js +33 -10
- package/src/inspector/cell-editor-manager.js +110 -31
- package/src/inspector/pane-layout.js +11 -3
- package/src/renderers/checkbox.js +12 -13
- package/src/renderers/tree-row-renderer.js +325 -68
- package/src/tree-view-controller.js +919 -213
- package/src/tree-view.js +215 -53
- package/src/view/styles.js +83 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.7.2 — 2026-09-13
|
|
4
|
+
|
|
5
|
+
### Fixed
|
|
6
|
+
|
|
7
|
+
- Repaint initially visible row-action icons when their asynchronous SVG raster finishes loading.
|
|
8
|
+
|
|
9
|
+
## 0.7.1
|
|
10
|
+
|
|
11
|
+
- Coalesce dynamic state patches by node until the next frame and ignore repeated values.
|
|
12
|
+
- Skip Canvas2D renders for dynamic changes outside the visible/overscan and sticky rows.
|
|
13
|
+
- Incrementally synchronize RowActions for dirty visible rows without redundant DOM or icon writes.
|
|
14
|
+
- Avoid copying active sort snapshots into every render scene; serialize them only for worker calls.
|
|
15
|
+
- Add dynamic-update counters, regression coverage, and a 10,000-node browser benchmark.
|
|
16
|
+
- Keep an open truncated-value tooltip visible and refresh its text across live state/data updates while the pointer remains on the same cell.
|
|
17
|
+
|
|
3
18
|
## 0.7.0 — 2026-09-10
|
|
4
19
|
|
|
5
20
|
### Added
|
package/README.md
CHANGED
|
@@ -130,6 +130,14 @@ tree.setDynamicState([
|
|
|
130
130
|
]);
|
|
131
131
|
```
|
|
132
132
|
|
|
133
|
+
Calls made before the next animation frame are coalesced by node ID and property
|
|
134
|
+
(the last value wins). Repeated values and changes wholly outside the current
|
|
135
|
+
viewport/overscan do not repaint. `render()`, `createRenderScene()`, sorting,
|
|
136
|
+
filtering, TreeView configuration flushes, inspector writes, search and selection
|
|
137
|
+
operations apply pending patches before they read dynamic state. The controller's
|
|
138
|
+
`flushDynamicState()` method is also available when an integration needs an
|
|
139
|
+
explicit synchronous boundary.
|
|
140
|
+
|
|
133
141
|
`setData()`, expand/collapse, sorting and filtering are structural operations
|
|
134
142
|
and may rebuild the visible row list. For very large datasets,
|
|
135
143
|
`enableWorkers()` moves search and filtered row rebuilds off the main thread
|
|
@@ -384,7 +392,10 @@ Open [the reorder demo](./examples/reorder-table.html) through a local HTTP serv
|
|
|
384
392
|
|
|
385
393
|
## Icon catalogue
|
|
386
394
|
|
|
387
|
-
65 SVGs are included, with a
|
|
395
|
+
65 SVGs are included, with a
|
|
396
|
+
[rendered visual sheet](https://htmlpreview.github.io/?https://github.com/mploscos/virtual-tree-canvas/blob/main/docs/icon-catalog.html), and a
|
|
397
|
+
[reference of available icons](./docs/icon-catalog.md). `builtinIconNames`
|
|
398
|
+
exposes available IDs.
|
|
388
399
|
|
|
389
400
|
## Row actions and data dragging
|
|
390
401
|
|
package/docs/icon-catalog.html
CHANGED
|
@@ -1,67 +1,69 @@
|
|
|
1
|
-
<!doctype html><html lang="
|
|
1
|
+
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Icon catalog · virtual-tree-canvas</title>
|
|
2
2
|
<style>body{font:15px system-ui;margin:32px;background:#0f172a;color:#e2e8f0}body.light{background:#f8fafc;color:#162033}h1{font-size:26px}header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}input,button,select{font:inherit;padding:9px;border:1px solid #64748b;border-radius:6px;background:transparent;color:inherit}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}article{border:1px solid #64748b55;border-radius:9px;display:flex;flex-direction:column;gap:6px;padding:16px;min-height:118px}article[hidden]{display:none}.glyph{height:40px;display:flex;align-items:center;color:#38bdf8}body.light .glyph{color:#0369a1}svg{width:var(--icon-size,24px);height:var(--icon-size,24px)}small{font-size:11px;opacity:.75}code{font-size:12px}p{max-width:850px;line-height:1.5}option{color:#162033}</style>
|
|
3
|
-
<h1>
|
|
4
|
-
<header><input aria-label="
|
|
5
|
-
</div><strong>
|
|
6
|
-
</div><strong>
|
|
7
|
-
</div><strong>
|
|
8
|
-
</div><strong>
|
|
9
|
-
</div><strong>
|
|
10
|
-
</div><strong>
|
|
11
|
-
</div><strong>
|
|
12
|
-
</div><strong>
|
|
13
|
-
</div><strong
|
|
14
|
-
</div><strong>
|
|
15
|
-
</div><strong>
|
|
16
|
-
</div><strong>
|
|
17
|
-
</div><strong>
|
|
18
|
-
</div><strong>
|
|
19
|
-
</div><strong>
|
|
20
|
-
</div><strong>
|
|
21
|
-
</div><strong>
|
|
22
|
-
</div><strong>
|
|
23
|
-
</div><strong>
|
|
24
|
-
</div><strong>
|
|
25
|
-
</div><strong>
|
|
26
|
-
</div><strong>
|
|
27
|
-
</div><strong>
|
|
28
|
-
</div><strong>
|
|
29
|
-
</div><strong>
|
|
30
|
-
</div><strong>
|
|
31
|
-
</div><strong>
|
|
32
|
-
</div><strong>
|
|
33
|
-
</div><strong>
|
|
34
|
-
</div><strong>
|
|
35
|
-
</div><strong>
|
|
36
|
-
</div><strong>
|
|
37
|
-
</div><strong>
|
|
38
|
-
</div><strong>
|
|
39
|
-
</div><strong>
|
|
40
|
-
</div><strong>
|
|
41
|
-
</div><strong>
|
|
42
|
-
</div><strong>
|
|
43
|
-
</div><strong>
|
|
44
|
-
</div><strong>Radar</strong><code>radar</code><small>
|
|
45
|
-
</div><strong>
|
|
46
|
-
</div><strong>
|
|
47
|
-
</div><strong>
|
|
48
|
-
</div><strong>
|
|
49
|
-
</div><strong>
|
|
50
|
-
</div><strong>
|
|
51
|
-
</div><strong>Array</strong><code>inspector-array</code><small>Inspector
|
|
52
|
-
</div><strong>
|
|
53
|
-
</div><strong>
|
|
54
|
-
</div><strong>Error</strong><code>error</code><small>
|
|
55
|
-
</div><strong>
|
|
56
|
-
</div><strong>
|
|
57
|
-
</div><strong>
|
|
58
|
-
</div><strong>
|
|
59
|
-
</div><strong>Control</strong><code>control</code><small>
|
|
60
|
-
</div><strong>
|
|
61
|
-
</div><strong>
|
|
62
|
-
</div><strong>
|
|
63
|
-
</div><strong>
|
|
64
|
-
</div><strong>
|
|
65
|
-
</div><strong>
|
|
66
|
-
</div><strong>
|
|
67
|
-
</div><strong>
|
|
3
|
+
<h1>Icons · virtual-tree-canvas</h1><p>65 SVG icons available. Data bus and passenger bus are different symbols. Compare the actual row size on both backgrounds; always pair an icon with a label.</p>
|
|
4
|
+
<header><input aria-label="Search icons" id="search" type="search" placeholder="Search by name or family"><label>Size <select id="size"><option>16</option><option>20</option><option selected>24</option><option>32</option></select></label><button id="theme">Toggle background</button></header><main><article data-search="person person people and organization"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/></svg>
|
|
5
|
+
</div><strong>Person</strong><code>person</code><small>People and organization</small></article><article data-search="people group people and organization"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><path d="M2 21v-3a7 7 0 0 1 14 0v3M17 4a3 3 0 0 1 0 6m2 4a6 6 0 0 1 3 5v2"/></svg>
|
|
6
|
+
</div><strong>Group</strong><code>people</code><small>People and organization</small></article><article data-search="child child people and organization"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="3"/><path d="M12 8v8m-6-5 6 2 6-2m-6 5-4 5m4-5 4 5"/></svg>
|
|
7
|
+
</div><strong>Child</strong><code>child</code><small>People and organization</small></article><article data-search="dog dog animals"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6q4-3 8 0l2 10q-6 8-12 0ZM8 6 4 5 2 13l4 3M16 6l4-1 2 8-4 3M9 11h.01M15 11h.01m-4 4 1 1 1-1"/></svg>
|
|
8
|
+
</div><strong>Dog</strong><code>dog</code><small>Animals</small></article><article data-search="cat cat animals"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 9-1-6 6 4h4l6-4-1 6a7 7 0 1 1-14 0ZM2 13h5m10 0h5M9 11h.01M15 11h.01m-4 4 1 1 1-1"/></svg>
|
|
9
|
+
</div><strong>Cat</strong><code>cat</code><small>Animals</small></article><article data-search="bird bird animals"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13q6 0 8-7 3-4 6 0l4 2-4 2q0 9-11 9l-3-6Zm5 2 5-4M10 19v3m4-4v4"/><circle cx="15" cy="6" r=".6" fill="currentColor"/></svg>
|
|
10
|
+
</div><strong>Bird</strong><code>bird</code><small>Animals</small></article><article data-search="fish fish animals"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12q7-12 15-2l4-5v14l-4-5Q10 24 3 12Zm10-7v14"/><circle cx="8" cy="11" r=".7" fill="currentColor"/></svg>
|
|
11
|
+
</div><strong>Fish</strong><code>fish</code><small>Animals</small></article><article data-search="insect insect animals"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="14" rx="5" ry="7"/><path d="M9 7V5l-2-2m8 4V5l2-2M7 11 3 8m4 7H2m5 3-4 3m14-10 4-3m-4 7h5m-5 3 4 3M12 7v14"/></svg>
|
|
12
|
+
</div><strong>Insect</strong><code>insect</code><small>Animals</small></article><article data-search="tree tree plants and ecosystems"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2-6 8h3l-6 7h7v5h4v-5h7l-6-7h3Z"/></svg>
|
|
13
|
+
</div><strong>Tree</strong><code>tree</code><small>Plants and ecosystems</small></article><article data-search="leaf leaf plants and ecosystems"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3Q3 1 3 13q0 8 8 8 12-1 9-18ZM3 21 16 8"/></svg>
|
|
14
|
+
</div><strong>Leaf</strong><code>leaf</code><small>Plants and ecosystems</small></article><article data-search="flower flower plants and ecosystems"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 14v8m0-4q-7 1-7-4 5-1 7 4m0 2q7 0 7-4-5-1-7 4M9 6C5 0 1 7 7 9c-5 5 3 9 5 3 3 6 10 1 5-3 6-2 1-9-3-3 1-7-7-7-5 0Z"/><circle cx="12" cy="8" r="2"/></svg>
|
|
15
|
+
</div><strong>Flower</strong><code>flower</code><small>Plants and ecosystems</small></article><article data-search="seedling seedling plants and ecosystems"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V11M12 15C3 15 2 10 3 5c6-1 10 2 9 10Zm0-4c0-7 4-9 9-8 1 5-2 9-9 8Z"/></svg>
|
|
16
|
+
</div><strong>Seedling</strong><code>seedling</code><small>Plants and ecosystems</small></article><article data-search="sun sun weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1"/></svg>
|
|
17
|
+
</div><strong>Sun</strong><code>sun</code><small>Weather</small></article><article data-search="moon moon weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 15A9 9 0 0 1 9 3a9 9 0 1 0 11 12Z"/></svg>
|
|
18
|
+
</div><strong>Moon</strong><code>moon</code><small>Weather</small></article><article data-search="cloud cloud weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18a5 5 0 1 1 1-10 6 6 0 0 1 11 1 4.5 4.5 0 0 1 0 9Z"/></svg>
|
|
19
|
+
</div><strong>Cloud</strong><code>cloud</code><small>Weather</small></article><article data-search="rain rain weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 15a4 4 0 1 1 1-8 5 5 0 0 1 10 1 3.5 3.5 0 0 1 2 7M7 18l-1 3m6-3-1 3m6-3-1 3"/></svg>
|
|
20
|
+
</div><strong>Rain</strong><code>rain</code><small>Weather</small></article><article data-search="snow snow weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M3 7l18 10M3 17 21 7M9 4l3 3 3-3m-6 16 3-3 3 3M3 10l4-1-1-4m12 14-1-4 4-1M3 14l4 1-1 4M18 5l-1 4 4 1"/></svg>
|
|
21
|
+
</div><strong>Snow</strong><code>snow</code><small>Weather</small></article><article data-search="wind wind weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h12a3 3 0 1 0-3-3M2 12h17a3 3 0 1 1-3 3M4 16h5a3 3 0 1 1-3 3"/></svg>
|
|
22
|
+
</div><strong>Wind</strong><code>wind</code><small>Weather</small></article><article data-search="storm storm weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15a4 4 0 1 1 0-8 5 5 0 0 1 10 1 3.5 3.5 0 0 1 2 7m-5-4-5 7h5l-2 5 6-8h-5Z"/></svg>
|
|
23
|
+
</div><strong>Storm</strong><code>storm</code><small>Weather</small></article><article data-search="fog fog weather"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 11a3.5 3.5 0 0 1-.6-6.95A5 5 0 0 1 15 5h2a3 3 0 0 1 0 6H6Z"/><path d="M4 15h16M2 19h7m4 0h9"/></svg>
|
|
24
|
+
</div><strong>Fog</strong><code>fog</code><small>Weather</small></article><article data-search="ground ground domain terrain and water"><div class="glyph"><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>
|
|
25
|
+
</div><strong>Ground domain</strong><code>ground</code><small>Terrain and water</small></article><article data-search="surface surface domain terrain and water"><div class="glyph"><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>
|
|
26
|
+
</div><strong>Surface domain</strong><code>surface</code><small>Terrain and water</small></article><article data-search="subsurface subsurface domain terrain and water"><div class="glyph"><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>
|
|
27
|
+
</div><strong>Subsurface domain</strong><code>subsurface</code><small>Terrain and water</small></article><article data-search="car car ground transportation"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 2-6h12l2 6M3 10h18v8H3Zm2 8v3m14-3v3M6 14h2m8 0h2"/></svg>
|
|
28
|
+
</div><strong>Car</strong><code>car</code><small>Ground transportation</small></article><article data-search="bicycle bicycle ground transportation"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="16" r="4"/><circle cx="19" cy="16" r="4"/><path d="m5 16 5-9 5 9H5m10 0 3-12h-4M8 7h5m5-3h3"/></svg>
|
|
29
|
+
</div><strong>Bicycle</strong><code>bicycle</code><small>Ground transportation</small></article><article data-search="bus-vehicle passenger bus ground transportation"><div class="glyph"><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>
|
|
30
|
+
</div><strong>Passenger bus</strong><code>bus-vehicle</code><small>Ground transportation</small></article><article data-search="aircraft aircraft aviation and space"><div class="glyph"><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>
|
|
31
|
+
</div><strong>Aircraft</strong><code>aircraft</code><small>Aviation and space</small></article><article data-search="helicopter helicopter aviation and space"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 17V9h8q6 0 6 7l-5 2H6L2 8m4 5H2m9-4V4M3 4h17M7 18v3m9-3v3M4 21h16M14 9v5h5"/></svg>
|
|
32
|
+
</div><strong>Helicopter</strong><code>helicopter</code><small>Aviation and space</small></article><article data-search="drone drone aviation and space"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="6" height="6" rx="2"/><path d="m9 9-4-4m10 4 4-4M9 15l-4 4m10-4 4 4"/><circle cx="5" cy="5" r="3"/><circle cx="19" cy="5" r="3"/><circle cx="5" cy="19" r="3"/><circle cx="19" cy="19" r="3"/></svg>
|
|
33
|
+
</div><strong>Drone</strong><code>drone</code><small>Aviation and space</small></article><article data-search="space space domain aviation and space"><div class="glyph"><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>
|
|
34
|
+
</div><strong>Space domain</strong><code>space</code><small>Aviation and space</small></article><article data-search="ship ship maritime environment"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m3 13 9-4 9 4-3 6M6 19l-3-6m4-2V5h10v6M12 5V2M2 21q3-4 6 0 4-4 8 0 3-4 6 0"/></svg>
|
|
35
|
+
</div><strong>Ship</strong><code>ship</code><small>Maritime environment</small></article><article data-search="box box objects and facilities"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-5 9 5v10l-9 5-9-5Zm0 0 9 5 9-5m-9 5v10M8 4l9 5"/></svg>
|
|
36
|
+
</div><strong>Box</strong><code>box</code><small>Objects and facilities</small></article><article data-search="building building objects and facilities"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V3h16v19M2 22h20M9 22v-5h6v5M8 7h1m6 0h1M8 12h1m6 0h1"/></svg>
|
|
37
|
+
</div><strong>Building</strong><code>building</code><small>Objects and facilities</small></article><article data-search="data-bus data bus data and networks"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18M6 8v4m6 0v4m6-8v4"/><rect x="3" y="3" width="6" height="5" rx="1"/><rect x="15" y="3" width="6" height="5" rx="1"/><rect x="9" y="16" width="6" height="5" rx="1"/></svg>
|
|
38
|
+
</div><strong>Data bus</strong><code>data-bus</code><small>Data and networks</small></article><article data-search="network network data and networks"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="5" rx="1"/><rect x="2" y="17" width="6" height="5" rx="1"/><rect x="16" y="17" width="6" height="5" rx="1"/><path d="M12 7v5M5 17v-5h14v5"/></svg>
|
|
39
|
+
</div><strong>Network</strong><code>network</code><small>Data and networks</small></article><article data-search="server server data and networks"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01M12 6.5h5m-5 11h5"/></svg>
|
|
40
|
+
</div><strong>Server</strong><code>server</code><small>Data and networks</small></article><article data-search="database database data and networks"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 4 18 4 18 0V5M3 12c0 4 18 4 18 0"/></svg>
|
|
41
|
+
</div><strong>Database</strong><code>database</code><small>Data and networks</small></article><article data-search="link link data and networks"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 15 6-6m-4-4 2-2a5 5 0 0 1 7 7l-3 3a5 5 0 0 1-6 1m2 5-2 2a5 5 0 0 1-7-7l3-3a5 5 0 0 1 6-1"/></svg>
|
|
42
|
+
</div><strong>Link</strong><code>link</code><small>Data and networks</small></article><article data-search="sensor generic sensor sensors and measurements"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M7 7a7 7 0 0 0 0 10m10-10a7 7 0 0 1 0 10M4 4a11 11 0 0 0 0 16M20 4a11 11 0 0 1 0 16"/></svg>
|
|
43
|
+
</div><strong>Generic sensor</strong><code>sensor</code><small>Sensors and measurements</small></article><article data-search="radar radar sensors and measurements"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4.5"/><path d="m12 12 6.4-6.4"/><g fill="currentColor" stroke="none"><circle cx="12" cy="12" r="1.1"/><circle cx="7" cy="15" r="1.1"/></g></svg>
|
|
44
|
+
</div><strong>Radar</strong><code>radar</code><small>Sensors and measurements</small></article><article data-search="thermometer thermometer sensors and measurements"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14V5a3 3 0 0 1 6 0v9a5 5 0 1 1-6 0ZM12 8v9"/></svg>
|
|
45
|
+
</div><strong>Thermometer</strong><code>thermometer</code><small>Sensors and measurements</small></article><article data-search="globe globe geography and navigation"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><ellipse cx="12" cy="12" rx="4" ry="10"/><path d="M2 12h20"/></svg>
|
|
46
|
+
</div><strong>Globe</strong><code>globe</code><small>Geography and navigation</small></article><article data-search="point point geography and navigation"><div class="glyph"><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>
|
|
47
|
+
</div><strong>Point</strong><code>point</code><small>Geography and navigation</small></article><article data-search="track track geography and navigation"><div class="glyph"><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>
|
|
48
|
+
</div><strong>Track</strong><code>track</code><small>Geography and navigation</small></article><article data-search="folder folder inspector and documents"><div class="glyph"><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>
|
|
49
|
+
</div><strong>Folder</strong><code>folder</code><small>Inspector and documents</small></article><article data-search="inspector-object data object inspector and documents"><div class="glyph"><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>
|
|
50
|
+
</div><strong>Data object</strong><code>inspector-object</code><small>Inspector and documents</small></article><article data-search="inspector-array array inspector and documents"><div class="glyph"><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>
|
|
51
|
+
</div><strong>Array</strong><code>inspector-array</code><small>Inspector and documents</small></article><article data-search="inspector-value scalar value inspector and documents"><div class="glyph"><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>
|
|
52
|
+
</div><strong>Scalar value</strong><code>inspector-value</code><small>Inspector and documents</small></article><article data-search="warning warning states and alerts"><div class="glyph"><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>
|
|
53
|
+
</div><strong>Warning</strong><code>warning</code><small>States and alerts</small></article><article data-search="error error states and alerts"><div class="glyph"><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>
|
|
54
|
+
</div><strong>Error</strong><code>error</code><small>States and alerts</small></article><article data-search="placeholder unknown type states and alerts"><div class="glyph"><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>
|
|
55
|
+
</div><strong>Unknown type</strong><code>placeholder</code><small>States and alerts</small></article><article data-search="damage damage states and alerts"><div class="glyph"><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>
|
|
56
|
+
</div><strong>Damage</strong><code>damage</code><small>States and alerts</small></article><article data-search="situation situation states and alerts"><div class="glyph"><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>
|
|
57
|
+
</div><strong>Situation</strong><code>situation</code><small>States and alerts</small></article><article data-search="lock locked states and alerts"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="12" rx="2"/><path d="M7 10V7a5 5 0 0 1 10 0v3M12 15v3"/></svg>
|
|
58
|
+
</div><strong>Locked</strong><code>lock</code><small>States and alerts</small></article><article data-search="control control actions and controls"><div class="glyph"><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>
|
|
59
|
+
</div><strong>Control</strong><code>control</code><small>Actions and controls</small></article><article data-search="task task actions and controls"><div class="glyph"><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>
|
|
60
|
+
</div><strong>Task</strong><code>task</code><small>Actions and controls</small></article><article data-search="star favorite actions and controls"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>
|
|
61
|
+
</div><strong>Favorite</strong><code>star</code><small>Actions and controls</small></article><article data-search="pin pinned actions and controls"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8 3 8 0-1 6 4 4v2H5v-2l4-4-1-6ZM12 15v7"/></svg>
|
|
62
|
+
</div><strong>Pinned</strong><code>pin</code><small>Actions and controls</small></article><article data-search="heart favorite actions and controls"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21 3 12C-2 5 7-1 12 6c5-7 14-1 9 6Z"/></svg>
|
|
63
|
+
</div><strong>Favorite</strong><code>heart</code><small>Actions and controls</small></article><article data-search="grip drag handle actions and controls"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="5" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="19" r="1"/></svg>
|
|
64
|
+
</div><strong>Drag handle</strong><code>grip</code><small>Actions and controls</small></article><article data-search="star-filled active favorite actions and controls"><div class="glyph"><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 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>
|
|
65
|
+
</div><strong>Active favorite</strong><code>star-filled</code><small>Actions and controls</small></article><article data-search="trash delete remove actions and controls"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7m4-7v7"/></svg>
|
|
66
|
+
</div><strong>Delete or remove</strong><code>trash</code><small>Actions and controls</small></article><article data-search="clock clock time and simulation"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
67
|
+
</div><strong>Clock</strong><code>clock</code><small>Time and simulation</small></article><article data-search="calendar calendar time and simulation"><div class="glyph"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v5m8-5v5M7 14h2m3 0h2m3 0h1M7 18h2m3 0h2"/></svg>
|
|
68
|
+
</div><strong>Calendar</strong><code>calendar</code><small>Time and simulation</small></article><article data-search="munition munition time and simulation"><div class="glyph"><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>
|
|
69
|
+
</div><strong>Munition</strong><code>munition</code><small>Time and simulation</small></article></main><script>search.oninput=()=>document.querySelectorAll('article').forEach(el=>el.hidden=!el.dataset.search.includes(search.value.toLowerCase()));size.onchange=()=>document.documentElement.style.setProperty('--icon-size',size.value+'px');theme.onclick=()=>document.body.classList.toggle('light');</script></html>
|