kempo-ui 0.0.76 → 0.0.77

package/.github/skills/get-icon/SKILL.md

@@ -0,0 +1,144 @@
+---
+name: get-icon
+description: Fetches icons from the Google Material Design Icon set, saves it to this project, and then formats it.
+---
+
+# Get Icon
+
+## When to Use
+
+Use this skill any time an icon is needed — whether the user explicitly asks for one or you determine that a UI element (button, control, action, etc.) would benefit from one. For example, if a user asks you to build a "bold" button for a WYSIWYG toolbar, you should proactively source an appropriate icon without being explicitly told to.
+
+## Overview
+
+Icons live in the `icons/` directory as SVG files. The project uses the **Material Symbols Outlined** style from Google's CDN. The workflow has three stages:
+
+1. **Check local icons first** — the icon may already exist
+2. **Find** the correct Material Symbols name if it doesn't
+3. **Fetch, format, and save** using the script (directional handling is automatic)
+
+---
+
+## Stage 1: Check Local Icons First
+
+Before going to the internet, list the contents of `icons/` and look for an existing icon that fits the need. Use `file_search` or `list_dir` on the `icons/` directory.
+
+- If a **clear match** exists (e.g. `icons/format_bold.svg` for a bold button), use it — no download needed.
+- If a **reasonable match** exists for a directional icon (e.g. `icons/arrow.svg` for a left-arrow), use it with the appropriate `direction` attribute — no download needed.
+- If **nothing fits**, proceed to Stage 2.
+
+---
+
+## Stage 2: Find the Icon Name
+
+If the user describes an icon but doesn't supply an exact name, search Google Material Symbols to find the right one.
+
+Run the search script, which fetches icon names and tags from GitHub and caches them locally in `node_modules/.cache/kempo-ui/`. On subsequent runs it only re-downloads if the icon list has changed (SHA check — ~1KB request vs ~500KB full list). Search matches both icon names **and tags**, so searching `chevron` will also surface `keyboard_arrow_right` because it has a `chevron` tag:
+
+```bash
+npm run listicons -- <search_term>
+```
+
+Example:
+```bash
+npm run listicons -- bold
+# → format_bold
+```
+
+```bash
+npm run listicons -- chevron
+# → chevron_right
+#   chevron_left
+#   keyboard_arrow_right
+#   keyboard_arrow_left
+#   ...
+```
+
+The results show **full icon names including direction suffixes** so you can see what variants are available. Pick the best match for the user's intent. If no results are returned, try different search terms (e.g. `type` instead of `font`, `text` instead of `word`).
+
+---
+
+## Stage 3: Fetch, Format, and Save
+
+Run the fetch script with the chosen icon name. The script automatically handles directional icons — if the name you pass is directional (has a `_left`, `_up`, `_down`, `_backward` suffix, or has no exact match but a `_right`/`_forward` variant exists), it will prompt:
+
+```
+"chevron_left" is a directional icon. kempo-ui uses right direction only and applies CSS rotation.
+Save right-facing variant as "chevron.svg"? (Y/n)
+```
+
+```bash
+npm run geticon -- <icon_name> [custom_name] [-y]
+```
+
+- `icon_name` — the Material Symbols name as returned by the search script
+- `custom_name` — optional rename (e.g. `keyboard_double_arrow_right double_chevron` saves as `double_chevron.svg`)
+- `-y` — auto-accept the directional prompt without user interaction
+
+Examples:
+```bash
+# Non-directional — downloads silently
+npm run geticon -- format_bold
+
+# Directional — prompts to confirm saving right-facing variant as "chevron"
+npm run geticon -- chevron_left
+
+# Directional with rename and auto-accept
+npm run geticon -- keyboard_double_arrow_up double_chevron -y
+```
+
+If the script exits with a non-zero code mentioning a 404, the icon name is wrong — return to Stage 2 and search for the correct name.
+
+The script produces minified output with only `xmlns` and `viewBox` on `<svg>`, and only `fill="currentColor"` and `d` on each `<path>`:
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="..."/></svg>
+```
+
+---
+
+## Directional Icons and `<k-icon>`
+
+When the script saves a right-facing icon (after a directional prompt), the `<k-icon>` component handles rotation via its `direction` attribute:
+
+| `direction` value | Rotation applied |
+|---|---|
+| *(omitted)* | 0° — points right |
+| `down` | 90° |
+| `left` | 180° |
+| `up` | 270° |
+
+**Example:** A user asking for a "left arrow" after downloading `arrow.svg`:
+```html
+<k-icon name="arrow" direction="left"></k-icon>
+```
+
+---
+
+## Complete Example
+
+**User asks to "add a bold button" (implicit icon need)**
+
+1. **Local check:** `icons/format_bold.svg` exists → use it directly, no download needed
+2. **Use:** `<k-icon name="format_bold"></k-icon>`
+
+**User asks to "add a thumbs up icon" (explicit, not in local icons)**
+
+1. **Local check:** No match in `icons/`
+2. **Find:** Search Material Symbols for `thumbs+up` → `thumb_up`
+3. **Arrow check:** Not directional, proceed normally
+4. **Run:** `node .github/skills/get-icon/get_icon.js thumb_up`
+5. **Result:** `icons/thumb_up.svg` saved and build triggered
+
+**User asks for a "left arrow icon"**
+
+1. **Local check:** `icons/arrow.svg` exists and is right-facing
+2. **Arrow check:** Directional — right-facing variant already present
+3. **No download needed:** use `<k-icon name="arrow" direction="left"></k-icon>`
+
+**User asks for a "left arrow icon" (no arrow in local icons)**
+
+1. **Local check:** No arrow icon found
+2. **Find:** Search for `arrow_forward` or `arrow_right`
+3. **Arrow check:** Directional — download the right-facing variant with a generic name
+4. **Run:** `node .github/skills/get-icon/get_icon.js arrow_forward arrow`
+5. **Use:** `<k-icon name="arrow" direction="left"></k-icon>`

package/.github/skills/highlight-code/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: highlight-code
+description: Generates syntax-highlighted HTML for use in documentation code examples. USE THIS instead of creating temporary scripts.
+---
+
+# Highlight Code
+
+## When to Use
+
+Use this skill whenever you need syntax-highlighted HTML to embed in a documentation page — for example, when updating a `<pre><code class="hljs ...">` block in a `docs/components/*.html` file. **Do not create temporary `.mjs` scripts to do this.**
+
+## Usage
+
+```bash
+npm run highlightcode -- <lang> "<code>"
+```
+
+Or via npx:
+```bash
+npx kempo-highlightcode <lang> "<code>"
+```
+
+**Supported languages:** `html`, `css`, `js` / `javascript`, `ts` / `typescript`, `json`, `md` / `markdown`, `sh` / `bash`, `xml`
+
+## Output
+
+The script returns the **inner highlighted content only** — the hljs span markup without any `<pre><code>` wrapper. Paste it directly inside an existing `<pre><code class="hljs <lang>">...</code></pre>` block.
+
+## Example
+
+```bash
+npm run highlightcode -- html "<p>Hello World</p>"
+```
+
+Returns:
+```
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+```
+
+## Multi-line Code
+
+For multi-line code, use a here-string in PowerShell:
+
+```powershell
+$code = @"
+class Foo extends Bar {
+  render(){ return html`<p>hello</p>`; }
+}
+"@
+node bin/highlight_code.js js $code
+```
+
+## Workflow for Updating Doc Code Samples
+
+1. Run `npm run highlightcode -- <lang> "<new code>"` to get the highlighted HTML.
+2. Replace the inner content of the matching `<pre><code class="hljs ...">` block in the doc file with the output.
+3. Also update the live demo `<script type="module">` block with the raw (unhighlighted) code.

package/README.md

@@ -22,7 +22,7 @@ npm install kempo-ui
   <script>
     window.kempo = {
       pathToStylesheet: '/kempo.min.css',
-      pathToIcons: '/icons'
+      pathsToIcons: ['/icons']
     };
   </script>
 </head>
@@ -63,6 +63,88 @@ Import and use components in your HTML:
 ```
 
 
+## Icons
+
+kempo-ui ships a small set of icons used internally by its components. The `<k-icon>` component can also serve icons from your own directory, so you can add project-specific icons alongside the built-in ones.
+
+### Interactive picker (for humans)
+
+Run a single command, type to filter, arrow keys to navigate, Enter to select:
+
+```bash
+npx kempo-icon
+```
+
+### Finding an icon (for scripts/LLMs)
+
+Search the full Material Symbols library by name or tag:
+
+```bash
+npx kempo-listicons <search_term>
+```
+
+```bash
+npx kempo-listicons chevron
+# → chevron_right
+#   chevron_left
+#   keyboard_arrow_right
+#   ...
+```
+
+### Downloading an icon
+
+```bash
+npx kempo-geticon <icon_name> [custom_name] [--dir <path>] [-y]
+```
+
+By default icons are saved to `icons/` in your project root. Use `--dir` to point to your own assets directory:
+
+```bash
+# Save to icons/ (default)
+npx kempo-geticon format_bold
+
+# Save to a custom directory
+npx kempo-geticon format_bold --dir src/assets/icons
+
+# Rename on download
+npx kempo-geticon content_copy copy
+
+# Auto-accept directional icon prompt
+npx kempo-geticon chevron_left -y
+```
+
+**Directional icons:** Material Symbols has separate icons for each direction (`chevron_left`, `chevron_right`, etc.). kempo-ui only stores the right-facing version and uses the `direction` attribute to rotate it, so you only need one file per icon. If you pass a non-right directional name, the script will prompt you to download the right-facing variant instead and save it under the base name.
+
+### Configuring icon directories
+
+Tell kempo-ui where to look for icons in your page config. It checks directories in order and uses the first match, so your icons override the built-in ones:
+
+```html
+<script>
+  window.kempo = {
+    pathToStylesheet: '/kempo.min.css',
+    pathsToIcons: ['/my-icons', '/node_modules/kempo-ui/icons']
+  };
+</script>
+```
+
+### Using icons in markup
+
+```html
+<k-icon name="format_bold"></k-icon>
+<k-icon name="chevron" direction="left"></k-icon>
+<k-icon name="chevron" direction="down"></k-icon>
+```
+
+| `direction` | Rotation |
+|---|---|
+| *(omitted)* | 0° — right |
+| `down` | 90° |
+| `left` | 180° |
+| `up` | 270° |
+
+---
+
 ## Documentation
 
  **Full Documentation**: [https://dustinpoissant.github.io/kempo-ui/](https://dustinpoissant.github.io/kempo-ui/)

package/bin/get_icon.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+import fs from 'fs/promises';
+import path from 'path';
+import { spawn } from 'child_process';
+import readline from 'readline';
+
+const CWD = process.cwd();
+const CACHE_DIR = path.join(CWD, 'node_modules', '.cache', 'kempo-ui');
+
+const yFlag = process.argv.includes('-y') || process.argv.includes('--yes') || process.env.npm_config_yes === 'true';
+const rawArgs = process.argv.slice(2).filter(a => a !== '-y' && a !== '--yes');
+
+let iconDir = 'icons';
+const dirIdx = rawArgs.indexOf('--dir');
+if(dirIdx !== -1){
+	iconDir = rawArgs[dirIdx + 1];
+	rawArgs.splice(dirIdx, 2);
+}
+
+const iconName = rawArgs[0];
+const customName = rawArgs[1];
+
+if(!iconName){
+	console.error('Usage: kempo-geticon <icon_name> [custom_name] [--dir <path>] [-y]');
+	console.error('Example: kempo-geticon format_bold');
+	console.error('Example: kempo-geticon content_copy copy');
+	console.error('Example: kempo-geticon chevron_left --dir src/assets/icons');
+	process.exit(1);
+}
+
+const RIGHT_SUFFIXES = ['_right', '_forward'];
+const ALL_SUFFIXES = ['_right', '_forward', '_left', '_backward', '_up', '_down'];
+
+const fetchSvg = async (name) => {
+	const res = await fetch(`https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/${name}/default/24px.svg`);
+	return res.ok ? res.text() : null;
+};
+
+const confirm = async (question) => {
+	if(yFlag) return true;
+	const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+	return new Promise(resolve => {
+		rl.question(question, answer => {
+			rl.close();
+			resolve(answer.trim().toLowerCase() !== 'n');
+		});
+	});
+};
+
+const dirSuffix = ALL_SUFFIXES.find(s => iconName.endsWith(s));
+const baseName = dirSuffix ? iconName.slice(0, -dirSuffix.length) : iconName;
+const fileName = customName || baseName;
+
+let raw;
+
+if(dirSuffix && !RIGHT_SUFFIXES.includes(dirSuffix)){
+	// Passed a non-right directional (e.g. chevron_left) — find right-facing equivalent
+	for(const rs of RIGHT_SUFFIXES){
+		raw = await fetchSvg(`${baseName}${rs}`);
+		if(raw) break;
+	}
+	if(!raw){
+		console.error(`Error: No right-facing variant found for "${baseName}"`);
+		process.exit(1);
+	}
+	const ok = await confirm(`"${iconName}" is a directional icon. kempo-ui uses right direction only and applies CSS rotation.\nSave right-facing variant as "${fileName}.svg"? (Y/n) `);
+	if(!ok) process.exit(0);
+} else {
+	raw = await fetchSvg(iconName);
+	if(raw && dirSuffix){
+		// Passed chevron_right or chevron_forward explicitly
+		const ok = await confirm(`"${iconName}" is a directional icon. kempo-ui uses right direction only and applies CSS rotation.\nSave as "${fileName}.svg"? (Y/n) `);
+		if(!ok) process.exit(0);
+	} else if(!raw){
+		// No exact match — check if right-facing variants exist
+		let rightName;
+		for(const rs of RIGHT_SUFFIXES){
+			const candidate = `${iconName}${rs}`;
+			raw = await fetchSvg(candidate);
+			if(raw){ rightName = candidate; break; }
+		}
+		if(!raw){
+			console.error(`Error: "${iconName}" not found`);
+			process.exit(1);
+		}
+		const ok = await confirm(`"${iconName}" appears to be a directional icon (found "${rightName}"). kempo-ui uses right direction only and applies CSS rotation.\nSave as "${fileName}.svg"? (Y/n) `);
+		if(!ok) process.exit(0);
+	}
+}
+
+const viewBox = raw.match(/viewBox="([^"]+)"/)?.[1];
+const paths = [...raw.matchAll(/<path[^>]*\sd="([^"]+)"/g)].map(m => m[1]);
+
+if(!viewBox || !paths.length){
+	console.error('Error: Unexpected SVG structure');
+	process.exit(1);
+}
+
+const formatted = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${paths.map(d => `<path fill="currentColor" d="${d}"/>`).join('')}</svg>\n`;
+const outputDir = path.resolve(CWD, iconDir);
+
+await fs.mkdir(outputDir, { recursive: true });
+await fs.writeFile(path.join(outputDir, `${fileName}.svg`), formatted, 'utf8');
+console.log(`✓ Saved ${iconDir}/${fileName}.svg`);
+
+spawn('npm', ['run', 'build', '--if-present'], { stdio: 'inherit', shell: true, cwd: CWD });

package/bin/highlight_code.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { highlight } from '../tools/highlight.js';
+
+const LANG_ALIASES = {
+  js: 'javascript',
+  ts: 'typescript',
+  html: 'html',
+  css: 'css',
+  json: 'json',
+  md: 'markdown',
+  sh: 'bash',
+  bash: 'bash',
+  xml: 'xml',
+  javascript: 'javascript',
+  typescript: 'typescript',
+  markdown: 'markdown'
+};
+
+const args = process.argv.slice(2);
+
+if(args.length < 2){
+  console.error('Usage: kempo-highlightcode <lang> <code>');
+  console.error('Example: kempo-highlightcode html "<p>Hello World</p>"');
+  process.exit(1);
+}
+
+const [langArg, ...rest] = args;
+const lang = LANG_ALIASES[langArg.toLowerCase()];
+
+if(!lang){
+  console.error(`Unknown language: "${langArg}"`);
+  console.error(`Supported: ${Object.keys(LANG_ALIASES).join(', ')}`);
+  process.exit(1);
+}
+
+const code = rest.join(' ');
+const full = highlight(code, lang);
+// Strip the <pre><code> wrapper — return just the inner highlighted content
+process.stdout.write(full.replace(/^<pre><code class="hljs [^"]*">/, '').replace(/<\/code><\/pre>\n?$/, '') + '\n');

package/bin/icon.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+import fs from 'fs/promises';
+import path from 'path';
+import { spawn } from 'child_process';
+import { search, input, confirm } from '@inquirer/prompts';
+
+const CWD = process.cwd();
+const CACHE_DIR = path.join(CWD, 'node_modules', '.cache', 'kempo-ui');
+const CACHE_FILE = path.join(CACHE_DIR, 'icons-cache.json');
+const SYMBOLS_URL = 'https://api.github.com/repos/google/material-design-icons/contents/symbols';
+
+const RIGHT_SUFFIXES = ['_right', '_forward'];
+const ALL_SUFFIXES = ['_right', '_forward', '_left', '_backward', '_up', '_down'];
+
+const fetchJson = async (url) => {
+	const response = await fetch(url, { headers: { 'Accept': 'application/vnd.github+json' } });
+	if(!response.ok) throw new Error(`HTTP ${response.status}: ${url}`);
+	return response.json();
+};
+
+const fetchSvg = async (name) => {
+	const res = await fetch(`https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/${name}/default/24px.svg`);
+	return res.ok ? res.text() : null;
+};
+
+let cache = null;
+
+try {
+	cache = JSON.parse(await fs.readFile(CACHE_FILE, 'utf8'));
+} catch {
+	// no cache yet
+}
+
+const currentSha = await (async () => {
+	const entries = await fetchJson(SYMBOLS_URL);
+	return entries.find(e => e.name === 'web')?.sha;
+})();
+
+if(cache?.sha !== currentSha){
+	process.stderr.write('Updating icon list cache...\n');
+	const [tree, metaRes] = await Promise.all([
+		fetchJson(`https://api.github.com/repos/google/material-design-icons/git/trees/${currentSha}`),
+		fetch('https://fonts.google.com/metadata/icons').then(r => r.text())
+	]);
+	const icons = tree.tree.map(e => e.path);
+	const meta = JSON.parse(metaRes.replace(/^\)\]\}'\n/, ''));
+	const tagMap = {};
+	for(const icon of meta.icons) tagMap[icon.name] = icon.tags || [];
+	cache = { sha: currentSha, icons, tagMap };
+	await fs.mkdir(CACHE_DIR, { recursive: true });
+	await fs.writeFile(CACHE_FILE, JSON.stringify(cache), 'utf8');
+}
+
+const tagMap = cache.tagMap || {};
+
+const matchesQuery = (name, query) => {
+	if(name.includes(query)) return true;
+	return (tagMap[name] || []).some(t => t.includes(query));
+};
+
+const iconName = await search({
+	message: 'Search for an icon',
+	source: (query) => {
+		if(!query) return [];
+		return cache.icons
+			.filter(name => matchesQuery(name, query))
+			.slice(0, 20)
+			.map(name => ({ name, value: name }));
+	}
+});
+
+const dirSuffix = ALL_SUFFIXES.find(s => iconName.endsWith(s));
+const baseName = dirSuffix ? iconName.slice(0, -dirSuffix.length) : iconName;
+
+const customName = await input({
+	message: 'Save as',
+	default: baseName
+});
+
+const fileName = customName || baseName;
+let raw;
+
+if(dirSuffix && !RIGHT_SUFFIXES.includes(dirSuffix)){
+	for(const rs of RIGHT_SUFFIXES){
+		raw = await fetchSvg(`${baseName}${rs}`);
+		if(raw) break;
+	}
+	if(!raw){
+		console.error(`Error: No right-facing variant found for "${baseName}"`);
+		process.exit(1);
+	}
+	const ok = await confirm({ message: `"${iconName}" is directional. kempo-ui stores right-facing only and uses CSS rotation. Download right-facing variant as "${fileName}.svg"?`, default: true });
+	if(!ok) process.exit(0);
+} else {
+	raw = await fetchSvg(iconName);
+	if(raw && dirSuffix){
+		const ok = await confirm({ message: `"${iconName}" is directional. kempo-ui stores right-facing only and uses CSS rotation. Save as "${fileName}.svg"?`, default: true });
+		if(!ok) process.exit(0);
+	} else if(!raw){
+		let rightName;
+		for(const rs of RIGHT_SUFFIXES){
+			const candidate = `${iconName}${rs}`;
+			raw = await fetchSvg(candidate);
+			if(raw){ rightName = candidate; break; }
+		}
+		if(!raw){
+			console.error(`Error: "${iconName}" not found`);
+			process.exit(1);
+		}
+		const ok = await confirm({ message: `"${iconName}" appears directional (found "${rightName}"). kempo-ui stores right-facing only and uses CSS rotation. Save as "${fileName}.svg"?`, default: true });
+		if(!ok) process.exit(0);
+	}
+}
+
+const viewBox = raw.match(/viewBox="([^"]+)"/)?.[1];
+const paths = [...raw.matchAll(/<path[^>]*\sd="([^"]+)"/g)].map(m => m[1]);
+
+if(!viewBox || !paths.length){
+	console.error('Error: Unexpected SVG structure');
+	process.exit(1);
+}
+
+const iconDir = 'icons';
+const formatted = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${paths.map(d => `<path fill="currentColor" d="${d}"/>`).join('')}</svg>\n`;
+const outputDir = path.resolve(CWD, iconDir);
+
+await fs.mkdir(outputDir, { recursive: true });
+await fs.writeFile(path.join(outputDir, `${fileName}.svg`), formatted, 'utf8');
+console.log(`✓ Saved ${iconDir}/${fileName}.svg`);
+
+spawn('npm', ['run', 'build', '--if-present'], { stdio: 'inherit', shell: true, cwd: CWD });

package/bin/list_icons.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import fs from 'fs/promises';
+import path from 'path';
+
+const CACHE_DIR = path.join(process.cwd(), 'node_modules', '.cache', 'kempo-ui');
+const CACHE_FILE = path.join(CACHE_DIR, 'icons-cache.json');
+const SYMBOLS_URL = 'https://api.github.com/repos/google/material-design-icons/contents/symbols';
+
+const query = process.argv[2];
+
+if(!query){
+	console.error('Usage: kempo-listicons <search_term>');
+	process.exit(1);
+}
+
+const fetchJson = async (url) => {
+	const response = await fetch(url, { headers: { 'Accept': 'application/vnd.github+json' } });
+	if(!response.ok) throw new Error(`HTTP ${response.status}: ${url}`);
+	return response.json();
+};
+
+const getCurrentSha = async () => {
+	const entries = await fetchJson(SYMBOLS_URL);
+	return entries.find(e => e.name === 'web')?.sha;
+};
+
+const fetchAllIcons = async (treeSha) => {
+	const [tree, metaRes] = await Promise.all([
+		fetchJson(`https://api.github.com/repos/google/material-design-icons/git/trees/${treeSha}`),
+		fetch('https://fonts.google.com/metadata/icons').then(r => r.text())
+	]);
+	const icons = tree.tree.map(e => e.path);
+	const meta = JSON.parse(metaRes.replace(/^\)\]\}'\n/, ''));
+	const tagMap = {};
+	for(const icon of meta.icons) tagMap[icon.name] = icon.tags || [];
+	return { icons, tagMap };
+};
+
+let cache = null;
+
+try {
+	cache = JSON.parse(await fs.readFile(CACHE_FILE, 'utf8'));
+} catch {
+	// no cache yet
+}
+
+const currentSha = await getCurrentSha();
+
+if(cache?.sha !== currentSha){
+	process.stderr.write('Cache outdated or missing, fetching icon list...\n');
+	const { icons, tagMap } = await fetchAllIcons(currentSha);
+	cache = { sha: currentSha, icons, tagMap };
+	await fs.mkdir(CACHE_DIR, { recursive: true });
+	await fs.writeFile(CACHE_FILE, JSON.stringify(cache), 'utf8');
+}
+
+const tagMap = cache.tagMap || {};
+
+const matchesQuery = (name) => {
+	if(name.includes(query)) return true;
+	return (tagMap[name] || []).some(t => t.includes(query));
+};
+
+const results = cache.icons.filter(matchesQuery);
+
+if(results.length === 0){
+	console.log(`No icons found matching "${query}"`);
+} else {
+	console.log(results.join('\n'));
+}

package/dist/components/Resize.js

@@ -60,6 +60,7 @@ import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from".
 		}
 		:host(:not([resizing=""])) #main {
 			pointer-events: none;
+			user-select: none;
 		}
 		:host([resizing="side"]) #side,
 		:host([resizing="corner"]) #side,

package/dist/components/Tree.js

@@ -6,7 +6,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			<div class="tree-root">
 				${e?e.map(([e,t])=>Tree.renderValue(t,e,1,this.depth)):Tree.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,n=0){const r=Tree.nodes.find(t=>t.detect(e));if(r){const s=new r(e),n=null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:"";return html`<span class="d-b">${n}${s.renderLabel()}</span>`}const a=document.createElement(TreeNode.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=n,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
+		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,n=0){const r=Tree.nodes.find(t=>t.detect(e));if(r&&r.prototype.getChildren===TreeNode.prototype.getChildren){const s=null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:"";return html`<span class="d-b">${s}${new r(e).renderLabel()}</span>`}const o=document.createElement((r??TreeNode).nodeTag);return o.value=e,o.key=t,o.depth=s,o.maxDepth=n,o}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
 			<div>
 				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					${this.renderIcon()}