@vmz/ui-icons 0.2.5 → 0.2.7

package/README.md

@@ -12,8 +12,16 @@ semantic name  →  registry mark  →  <Icon name="tool.base64" />
 - Closed thin: semantic `name`, built-in registry, decorative vs labelled a11y, size density.
 - Still open: multi-surface path sets, locale-aware marks, icon-only Button integration depth.
 
+Registry kinds: `stroke` (outlined UI chrome and tools), `text-badge` (proprietary converter names such as `tool.base64` → `B64`). `feature.ssr` is intentionally absent — use title copy instead of an icon.
+
 Verify:
 
 ```bash
 pnpm verify -- ui-icons
 ```
+
+Contact sheet (local review):
+
+```bash
+node packages/ui/vmz-ui-icons/scripts/contact-sheet.mjs
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui-icons",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "description": "VMZ UI Icons — semantic icon names + glyph registry. Reuses @vmz/ui tokens; not a second Button/Tooltip shell or loose SVG dump.",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@vmz/ui": "0.2.5"
+    "@vmz/ui": "0.2.7"
   },
   "keywords": [
     "vmz",

package/src/Icon.vmz

@@ -1,7 +1,20 @@
 <template>
     <span data-vmz-ui="icon" :data-icon="name" :data-size="size" :role="roleAttr" :aria-hidden="hiddenAttr" :aria-label="labelAttr" class="vmz-ui-icon">
-        <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" class="vmz-ui-icon__svg">
-            <path fill="currentColor" :d="iconPath()" />
+        <span v-if="isTextBadge()" class="vmz-ui-icon__badge">
+            {{ badgeLabel() }}
+        </span>
+        <svg v-else viewBox="0 0 24 24" focusable="false" aria-hidden="true" class="vmz-ui-icon__svg">
+            <g v-if="isStroke()" fill="none" stroke="currentColor" :stroke-width="strokeWidth()" stroke-linecap="round" stroke-linejoin="round">
+                <path v-for="d in strokePaths()" :key="d" :d="d" />
+                <circle v-for="c in strokeCircles()" :key="circleKey(c)" :cx="c.cx" :cy="c.cy" :r="c.r" />
+                <circle v-for="dot in strokeDots()" :key="dotKey(dot)" :cx="dot.cx" :cy="dot.cy" :r="dot.r" fill="currentColor" stroke="none" />
+            </g>
+            <g v-else-if="isMixed()">
+                <path v-for="node in mixedPaths()" :key="node.key" :d="node.d" :fill="node.fill" :stroke="node.stroke" :stroke-width="node.strokeWidth" :fill-rule="node.fillRule" />
+                <circle v-for="node in mixedCircles()" :key="node.key" :cx="node.cx" :cy="node.cy" :r="node.r" :fill="node.fill" :stroke="node.stroke" :stroke-width="node.strokeWidth" />
+                <rect v-for="node in mixedRects()" :key="node.key" :x="node.x" :y="node.y" :width="node.width" :height="node.height" :rx="node.rx" :fill="node.fill" :stroke="node.stroke" :stroke-width="node.strokeWidth" />
+            </g>
+            <path v-else-if="isFill()" fill="currentColor" :fill-rule="fillRule()" :d="fillD()" />
         </svg>
     </span>
 </template>
@@ -12,7 +25,7 @@
     justify-content: center;
     flex-shrink: 0;
     box-sizing: border-box;
-    color: var(--vmz-action-primary-background);
+    color: inherit;
     line-height: 1;
     vertical-align: middle;
     user-select: none;
@@ -24,6 +37,24 @@
     height: 1em;
 }
 
+.vmz-ui-icon__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 1.65em;
+    padding: 0.12em 0.22em;
+    border: 1.5px solid currentColor;
+    border-radius: 0.2em;
+    font-family: var(--vmz-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: 0.52em;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    text-align: center;
+    text-transform: uppercase;
+}
+
 .vmz-ui-icon[data-size="sm"] {
     width: 1.5rem;
     height: 1.5rem;
@@ -43,13 +74,14 @@
 }
 </style>
 <script client>
-import { FALLBACK_PATH, resolveIconPath } from "./registry.ts";
+import { DEFAULT_STROKE_WIDTH, resolveIconDef } from "./registry.ts";
 
 /**
  * VMZ UI Icons — semantic Icon backed by the shared registry export.
  * Optional package: apps that only need UI chrome can use `@vmz/ui/Icon` instead.
  */
 export default class Icon {
+    static __vmzHostBox = "contents";
     /** Semantic icon id, e.g. tool.base64 / action.search */
     public name: string = "";
     /** sm | md | lg */
@@ -65,8 +97,127 @@ export default class Icon {
         this.syncA11y();
     }
 
-    iconPath() {
-        return resolveIconPath(this.name) || FALLBACK_PATH;
+    iconDef() {
+        return resolveIconDef(this.name);
+    }
+
+    isStroke() {
+        const def = this.iconDef();
+        return def?.kind === "stroke";
+    }
+
+    isFill() {
+        const def = this.iconDef();
+        return def?.kind === "fill";
+    }
+
+    isMixed() {
+        const def = this.iconDef();
+        return def?.kind === "mixed";
+    }
+
+    isTextBadge() {
+        const def = this.iconDef();
+        return def?.kind === "text-badge";
+    }
+
+    badgeLabel() {
+        const def = this.iconDef();
+        if (def?.kind !== "text-badge") return "";
+        return def.label;
+    }
+
+    strokeWidth() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return DEFAULT_STROKE_WIDTH;
+        return def.strokeWidth ?? DEFAULT_STROKE_WIDTH;
+    }
+
+    strokePaths() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.paths ?? [];
+    }
+
+    strokeCircles() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.circles ?? [];
+    }
+
+    strokeDots() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.dots ?? [];
+    }
+
+    circleKey(c) {
+        return `c-${c.cx}-${c.cy}-${c.r}`;
+    }
+
+    dotKey(dot) {
+        return `d-${dot.cx}-${dot.cy}-${dot.r}`;
+    }
+
+    fillD() {
+        const def = this.iconDef();
+        if (def?.kind !== "fill") return "";
+        return def.d;
+    }
+
+    fillRule() {
+        const def = this.iconDef();
+        if (def?.kind !== "fill" || !def.fillRule) return "";
+        return def.fillRule;
+    }
+
+    mixedPaths() {
+        const def = this.iconDef();
+        if (def?.kind !== "mixed") return [];
+        return def.nodes
+            .filter((node) => node.tag === "path")
+            .map((node, index) => ({
+                key: `p-${index}`,
+                d: node.attrs.d ?? "",
+                fill: node.attrs.fill ?? "none",
+                stroke: node.attrs.stroke ?? "currentColor",
+                strokeWidth: node.attrs["stroke-width"] ?? DEFAULT_STROKE_WIDTH,
+                fillRule: node.attrs["fill-rule"] ?? "",
+            }));
+    }
+
+    mixedCircles() {
+        const def = this.iconDef();
+        if (def?.kind !== "mixed") return [];
+        return def.nodes
+            .filter((node) => node.tag === "circle")
+            .map((node, index) => ({
+                key: `c-${index}`,
+                cx: node.attrs.cx ?? "12",
+                cy: node.attrs.cy ?? "12",
+                r: node.attrs.r ?? "9",
+                fill: node.attrs.fill ?? "none",
+                stroke: node.attrs.stroke ?? "currentColor",
+                strokeWidth: node.attrs["stroke-width"] ?? DEFAULT_STROKE_WIDTH,
+            }));
+    }
+
+    mixedRects() {
+        const def = this.iconDef();
+        if (def?.kind !== "mixed") return [];
+        return def.nodes
+            .filter((node) => node.tag === "rect")
+            .map((node, index) => ({
+                key: `r-${index}`,
+                x: node.attrs.x ?? "0",
+                y: node.attrs.y ?? "0",
+                width: node.attrs.width ?? "24",
+                height: node.attrs.height ?? "24",
+                rx: node.attrs.rx ?? "",
+                fill: node.attrs.fill ?? "none",
+                stroke: node.attrs.stroke ?? "currentColor",
+                strokeWidth: node.attrs["stroke-width"] ?? DEFAULT_STROKE_WIDTH,
+            }));
     }
 
     syncA11y() {

package/src/icon-types.ts

@@ -0,0 +1,35 @@
+/** Structured icon definitions for `@vmz/ui-icons` registry. */
+
+export type IconStrokeDef = {
+    kind: 'stroke';
+    paths: readonly string[];
+    circles?: readonly Readonly<{ cx: number; cy: number; r: number }>[];
+    dots?: readonly Readonly<{ cx: number; cy: number; r: number }>[];
+    strokeWidth?: number;
+};
+
+export type IconFillDef = {
+    kind: 'fill';
+    d: string;
+    fillRule?: 'evenodd' | 'nonzero';
+};
+
+export type IconMixedNode = {
+    tag: 'path' | 'circle' | 'rect' | 'line';
+    attrs: Readonly<Record<string, string>>;
+};
+
+export type IconMixedDef = {
+    kind: 'mixed';
+    nodes: readonly IconMixedNode[];
+};
+
+/** Monospace text mark for proprietary converter names (2–4 chars). */
+export type IconTextBadgeDef = {
+    kind: 'text-badge';
+    label: string;
+};
+
+export type IconDef = IconStrokeDef | IconFillDef | IconMixedDef | IconTextBadgeDef;
+
+export const DEFAULT_STROKE_WIDTH = 1.75;

package/src/icons-stroke.ts

@@ -0,0 +1,169 @@
+import type { IconDef } from './icon-types.ts';
+
+/** Outlined icon set — 24 grid, 1.75 stroke, 3–21 safe area. */
+export const STROKE_ICONS: Record<string, IconDef> = {
+    'action.search': {
+        kind: 'stroke',
+        circles: [{ cx: 10.5, cy: 10.5, r: 7.5 }],
+        paths: ['M15.8 15.8L20 20'],
+    },
+    'action.close': {
+        kind: 'stroke',
+        paths: ['M7 7L17 17', 'M17 7L7 17'],
+    },
+    'action.check': {
+        kind: 'stroke',
+        paths: ['M5 12L10 17L19 7'],
+    },
+    'action.chevron-down': {
+        kind: 'stroke',
+        paths: ['M7 10L12 15L17 10'],
+    },
+    'action.chevron-right': {
+        kind: 'stroke',
+        paths: ['M10 7L15 12L10 17'],
+    },
+    'action.menu': {
+        kind: 'stroke',
+        paths: ['M4 7H20', 'M4 12H20', 'M4 17H20'],
+    },
+    'action.plus': {
+        kind: 'stroke',
+        paths: ['M12 5V19', 'M5 12H19'],
+    },
+    'action.copy': {
+        kind: 'stroke',
+        paths: ['M9 9H17V17H9Z', 'M6 6H14V14'],
+    },
+    'nav.home': {
+        kind: 'stroke',
+        paths: ['M4 10.5L12 4L20 10.5', 'M6 10V19H18V10', 'M10 19V13H14V19'],
+    },
+    'nav.language': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 12, r: 9 }],
+        paths: ['M12 3V21', 'M3 12H21', 'M5.5 7.5C8 5.5 16 5.5 18.5 7.5', 'M5.5 16.5C8 18.5 16 18.5 18.5 16.5'],
+    },
+    'status.info': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 12, r: 9 }],
+        paths: ['M12 11V16'],
+        dots: [{ cx: 12, cy: 8, r: 1 }],
+    },
+    'status.warning': {
+        kind: 'stroke',
+        paths: ['M12 4L20 19H4L12 4Z', 'M12 10V14'],
+        dots: [{ cx: 12, cy: 17, r: 1 }],
+    },
+    'status.success': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 12, r: 9 }],
+        paths: ['M8 12L11 15L16 9'],
+    },
+    'status.danger': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 12, r: 9 }],
+        paths: ['M12 8V13'],
+        dots: [{ cx: 12, cy: 16.5, r: 1 }],
+    },
+    'feature.incremental': {
+        kind: 'stroke',
+        circles: [
+            { cx: 5, cy: 12, r: 2 },
+            { cx: 19, cy: 12, r: 2 },
+            { cx: 12, cy: 6, r: 2 },
+        ],
+        paths: ['M7 12H10', 'M14 12H17', 'M12 8V10', 'M8.2 11.2L11 8.5', 'M12.8 8.5L15.6 11.2'],
+    },
+    'feature.runtime': {
+        kind: 'stroke',
+        paths: ['M8.5 7.5H15.5V16.5H8.5Z', 'M11 10L14.5 12L11 14Z'],
+    },
+    'feature.deploy': {
+        kind: 'stroke',
+        paths: ['M4 16H20', 'M12 6V14', 'M8.5 10.5L12 6L15.5 10.5'],
+    },
+    'tool.url': {
+        kind: 'stroke',
+        paths: ['M10.5 8.5a3 3 0 0 1 4.2 0l.8.8a3 3 0 0 1 0 4.2l-.8.8', 'M13.5 15.5a3 3 0 0 1-4.2 0l-.8-.8a3 3 0 0 1 0-4.2l.8-.8'],
+    },
+    'tool.temperature': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 18, r: 3 }],
+        paths: ['M12 4V15', 'M10 9H14'],
+    },
+    'tool.length': {
+        kind: 'stroke',
+        paths: ['M4 12H20', 'M6 9V15', 'M10 10V14', 'M14 10V14', 'M18 9V15', 'M4 12L7 9', 'M4 12L7 15', 'M20 12L17 9', 'M20 12L17 15'],
+    },
+    'tool.weight': {
+        kind: 'stroke',
+        paths: ['M6 8H18', 'M12 8V16', 'M8 16H16', 'M9 6H15'],
+    },
+    'tool.time-units': {
+        kind: 'stroke',
+        circles: [{ cx: 12, cy: 12, r: 9 }],
+        paths: ['M12 7V12L15.5 14'],
+    },
+    'tool.color': {
+        kind: 'stroke',
+        paths: ['M12 4C8.5 4 6 6.5 6 10s2.5 6 6 6', 'M12 4c3.5 0 6 2.5 6 6s-2.5 6-6 6'],
+        dots: [
+            { cx: 8, cy: 10, r: 1.2 },
+            { cx: 12, cy: 8, r: 1.2 },
+            { cx: 16, cy: 10, r: 1.2 },
+        ],
+    },
+    'tool.percentage': {
+        kind: 'stroke',
+        circles: [
+            { cx: 9.5, cy: 9.5, r: 2 },
+            { cx: 14.5, cy: 14.5, r: 2 },
+        ],
+        paths: ['M16 8L8 16'],
+    },
+    'tool.area': {
+        kind: 'stroke',
+        paths: ['M5 5H19V19H5Z', 'M8 8H16V16H8Z'],
+    },
+    'tool.volume': {
+        kind: 'stroke',
+        paths: ['M5 9H19V19H5Z', 'M8 6H16', 'M8 6V9', 'M16 6V9'],
+    },
+    'tool.data-size': {
+        kind: 'stroke',
+        paths: ['M5 7H19', 'M5 11H15', 'M5 15H19'],
+    },
+    'tool.ratio': {
+        kind: 'stroke',
+        paths: ['M5 7H19', 'M5 17H19', 'M8 10V14', 'M16 10V14'],
+    },
+    'tool.average': {
+        kind: 'stroke',
+        paths: ['M4 18H20', 'M6 15L10 9L14 13L18 7'],
+    },
+    'tool.tip': {
+        kind: 'stroke',
+        paths: ['M12 4C9.5 4 8 6 8 8.5c0 1.8 1 3.2 2.5 4V15h3v-2.5c1.5-.8 2.5-2.2 2.5-4C16 6 14.5 4 12 4Z', 'M9.5 18H14.5', 'M10 20H14'],
+    },
+    'tool.aspect-ratio': {
+        kind: 'stroke',
+        paths: ['M5 7H19V17H5Z', 'M8 9H16V15H8Z'],
+    },
+    'tool.bandwidth': {
+        kind: 'stroke',
+        paths: ['M4 12H6', 'M8 8V16', 'M11 10V14', 'M14 6V18', 'M17 9V15', 'M20 12H22'],
+    },
+    'tool.percent-change': {
+        kind: 'stroke',
+        paths: ['M5 17L12 9L15 13L19 6', 'M4 19H20'],
+    },
+    'tool.ohm': {
+        kind: 'stroke',
+        paths: ['M8 11c0-2.2 1.8-4 4-4s4 1.8 4 4', 'M8 11V16', 'M16 11V16', 'M8 16H16'],
+    },
+    'tool.speed': {
+        kind: 'stroke',
+        paths: ['M5.5 14A7 7 0 0 1 18.5 14', 'M12 12L15.5 8.5'],
+    },
+};

package/src/icons-text-badge.ts

@@ -0,0 +1,17 @@
+import type { IconDef } from './icon-types.ts';
+
+/** Proprietary tool names — text badges instead of unreadable SVG silhouettes. */
+export const TEXT_BADGE_ICONS: Record<string, IconDef> = {
+    'tool.base64': { kind: 'text-badge', label: 'B64' },
+    'tool.base36': { kind: 'text-badge', label: 'B36' },
+    'tool.hex': { kind: 'text-badge', label: 'HEX' },
+    'tool.radix': { kind: 'text-badge', label: 'RAD' },
+    'tool.html-entities': { kind: 'text-badge', label: 'ENT' },
+    'tool.ascii': { kind: 'text-badge', label: 'ASC' },
+    'tool.binary-text': { kind: 'text-badge', label: '01' },
+    'tool.rgb-hsl': { kind: 'text-badge', label: 'HSL' },
+    'tool.px-rem': { kind: 'text-badge', label: 'px' },
+    'tool.gpa': { kind: 'text-badge', label: 'GPA' },
+    'tool.nearest-tenth': { kind: 'text-badge', label: '.1' },
+    'tool.grade-curve': { kind: 'text-badge', label: 'CV' },
+};

package/src/registry.ts

@@ -1,64 +1,16 @@
-/** Shared SVG path registry for `@vmz/ui-icons` and optional app-level Icon shims. */
-export const REGISTRY = {
-    'action.search': 'M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z',
-    'action.close': 'M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z',
-    'action.copy': 'M8 4h9a2 2 0 0 1 2 2v11h-2V6H8V4zm-2 4h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zm0 2v10h9V10H6z',
-    'nav.home': 'M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5z',
-    'nav.language':
-        'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 2.1a8 8 0 0 0-3.2 6.9H5.1a8 8 0 0 1 3.3-5.8L11 4.1zm2 0 .6.1a8 8 0 0 1 3.3 5.8h-3.7A8 8 0 0 0 13 4.1zM5.1 13h3.7a8 8 0 0 0 3.2 6.9l-2.6-.2A8 8 0 0 1 5.1 13zm8.8 0h3.7a8 8 0 0 1-3.3 5.8l-.4.1a8 8 0 0 0-3.2-5.9h3.2z',
-    'status.info':
-        'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
-    'status.warning':
-        'M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
-    'status.success': 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z',
-    'feature.incremental': 'M13 2 4 14h7l-1 8 10-14h-7l0-6z',
-    'feature.runtime': 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-.5 3.5v4.2l3.6 2.1.9-1.5-2.8-1.6V8.5h-1.7z',
-    'feature.ssr': 'M4 6h16v4H4V6zm0 6h10v4H4v-4zm12 0h4v4h-4v-4z',
-    'feature.deploy': 'M4 5h7v7H4V5zm9 0h7v7h-7V5zM4 14h7v5H4v-5zm9 3h7v2h-7v-2z',
-    'tool.base64': 'M5 5h6v3H8v3h3v3H5V5zm8 0h6v14h-6V5zm2 2v10h2V7h-2z',
-    'tool.base36': 'M6 6h4l3 6-3 6H6l3-6-3-6zm8 0h4v12h-4V6z',
-    'tool.hex': 'M7 5h3l2 4-2 4H7l2-4-2-4zm7 0h3l2 4-2 4h-3l2-4-2-4z',
-    'tool.radix': 'M5 7h14v2H5V7zm0 4h10v2H5v-2zm0 4h14v2H5v-2z',
-    'tool.url':
-        'M10.6 8.4a3.5 3.5 0 0 1 4.9 0l1.1 1.1a3.5 3.5 0 0 1 0 4.9l-.8.8-1.4-1.4.8-.8a1.5 1.5 0 0 0 0-2.1l-1.1-1.1a1.5 1.5 0 0 0-2.1 0l-.8.8L9.8 9.2l.8-.8zm2.8 2.8 1.4 1.4-4.2 4.2a3.5 3.5 0 0 1-4.9 0l-1.1-1.1a3.5 3.5 0 0 1 0-4.9l.8-.8 1.4 1.4-.8.8a1.5 1.5 0 0 0 0 2.1l1.1 1.1a1.5 1.5 0 0 0 2.1 0l4.2-4.2z',
-    'tool.html-entities': 'M8 7 5 12l3 5h2l-2.5-5L10 7H8zm8 0h-2l2.5 5L14 17h2l3-5-3-5zM11 16h2v2h-2v-2z',
-    'tool.ascii': 'M6 16V8h3a3 3 0 0 1 0 6H8v2H6zm2-4h1a1 1 0 1 0 0-2H8v2zm5 4V8h2v8h-2zm4 0V8h2l-2 4 2 4h-2z',
-    'tool.binary-text':
-        'M5 5h4v4H5V5zm10 0h4v4h-4V5zM5 15h4v4H5v-4zm6-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z',
-    'tool.temperature':
-        'M12 3a4 4 0 0 0-4 4v6.1a6 6 0 1 0 8 0V7a4 4 0 0 0-4-4zm0 2a2 2 0 0 1 2 2v6.3a4 4 0 1 1-4 0V7a2 2 0 0 1 2-2zm0 4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z',
-    'tool.length': 'M4 11h16v2H4v-2zm2-4 3 3-1.4 1.4L4.6 8.4 6 7zm12 0 1.4 1.4-3 3L15 10l3-3z',
-    'tool.weight': 'M12 3a3 3 0 0 1 2.8 4H19l-2 11H7L5 7h4.2A3 3 0 0 1 12 3zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z',
-    'tool.speed': 'M13 4.1A8 8 0 1 0 12 20v-2a6 6 0 1 1 1-11.9V4.1zM12 8l4.5 2.6L12 13.2 7.5 10.6 12 8zm0 3.8 2.7 1.6L12 15 9.3 13.4 12 11.8z',
-    'tool.area': 'M5 5h14v14H5V5zm2 2v10h10V7H7z',
-    'tool.volume': 'M6 8h12v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zm2 2v8h8v-8H8zm2-6h4v2H10V4z',
-    'tool.time-units': 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-.8 3.5V12l3.2 1.9.8-1.4-2.4-1.4V8.5h-1.6z',
-    'tool.data-size': 'M5 6h14v3H5V6zm0 5h10v3H5v-3zm0 5h14v2H5v-2z',
-    'tool.color':
-        'M12 3c-3.9 0-7 2.7-7 6.2 0 2.2 1.4 3.8 3.5 3.8 1 0 1.8-.5 2.4-1.2.6.7 1.4 1.2 2.4 1.2 2.1 0 3.5-1.6 3.5-3.8C17 5.7 13.9 3 12 3zm-4.5 5.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm9 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z',
-    'tool.rgb-hsl': 'M6 18 10 6h1l4 12h-2l-.8-2.4H8.8L8 18H6zm2.6-4.4h2.8L9.7 9.8 8.6 13.6zm7.1 4.4V6h2v12h-2z',
-    'tool.px-rem': 'M6 16V8h3l2 4-2 4H6zm8 0V8h2v8h-2zm-6-4h1.2l.8-1.6.8 1.6H11z',
-    'tool.percentage': 'M7 7h4v4H7V7zm6 6h4v4h-4v-4zM8.8 15.2 15.2 8.8l1.4 1.4-6.4 6.4-1.4-1.4z',
-    'tool.ratio': 'M5 7h14v2H5V7zm0 8h14v2H5v-2zm4-6h2v8h-2V9zm6 0h2v8h-2V9z',
-    'tool.average': 'M5 18h14v2H5v-2zm2.2-4 2.4-7 2.2 5.5L14.4 8l2.6 6H5.2z',
-    'tool.tip': 'M12 3c-3.3 0-6 2-6 4.5 0 1.4.8 2.6 2.1 3.3L7 14h10l-1.1-3.2c1.3-.7 2.1-1.9 2.1-3.3C18 5 15.3 3 12 3zm-2 15h4v2h-4v-2z',
-    'tool.discount': 'M7 7h4v4H7V7zm6 6h4v4h-4v-4zM8.8 15.2 15.2 8.8l1.4 1.4-6.4 6.4-1.4-1.4zM5 18h3v2H5v-2zm11 0h3v2h-3v-2z',
-    'tool.aspect-ratio': 'M5 7h14v10H5V7zm2 2v6h10V9H7z',
-    'tool.nearest-tenth': 'M6 7h12v2H6V7zm0 4h8v2H6v-2zm0 4h12v2H6v-2z',
-    'tool.gpa': 'M6 6h4v12H6V6zm8 0h4v12h-4V6zm-8 8h12v2H6v-2z',
-    'tool.bandwidth': 'M4 12h3l2-4 3 8 2-4h6v2h-4.5l-2 4-3-8-2 4H4v-2z',
-    'tool.percent-change': 'M6 16 12 8l3 4 5-8 2 3v5H6zm-1 2h14v2H5v-2z',
-    'tool.grade-curve': 'M5 17c2-6 4-8 7-8s5 2 7 8H5z',
-    'tool.ohm': 'M7 8h2v3h6V8h2v8h-2v-3H9v3H7V8z',
-    'action.check': 'M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z',
-    'action.chevron-down': 'M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z',
-    'action.chevron-right': 'M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z',
-    'action.menu': 'M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z',
-    'action.plus': 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z',
-    'status.danger': 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z',
-};
+/** Shared icon registry for `@vmz/ui-icons` and optional app-level Icon shims. */
+import type { IconDef, IconFillDef } from './icon-types.ts';
+import { DEFAULT_STROKE_WIDTH } from './icon-types.ts';
+import { STROKE_ICONS } from './icons-stroke.ts';
+import { TEXT_BADGE_ICONS } from './icons-text-badge.ts';
+
+export type { IconDef, IconFillDef, IconMixedDef, IconMixedNode, IconStrokeDef, IconTextBadgeDef } from './icon-types.ts';
+export { DEFAULT_STROKE_WIDTH } from './icon-types.ts';
 
-export const FALLBACK_PATH = 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z';
+export const REGISTRY: Record<string, IconDef> = {
+    ...STROKE_ICONS,
+    ...TEXT_BADGE_ICONS,
+};
 
 export const LEGACY_ICON_ALIASES: Record<string, string> = {
     check: 'action.check',
@@ -72,6 +24,10 @@ export const LEGACY_ICON_ALIASES: Record<string, string> = {
     danger: 'status.danger',
     menu: 'action.menu',
     plus: 'action.plus',
+    home: 'nav.home',
+    language: 'nav.language',
+    copy: 'action.copy',
+    discount: 'tool.percentage',
 };
 
 export function resolveIconName(name: string): string {
@@ -81,9 +37,23 @@ export function resolveIconName(name: string): string {
     return key;
 }
 
-export function resolveIconPath(name: string): string {
+export function resolveIconDef(name: string): IconDef | null {
     const key = resolveIconName(name);
-    if (!key) return FALLBACK_PATH;
-    if (REGISTRY[key]) return REGISTRY[key];
-    return FALLBACK_PATH;
+    if (!key) return null;
+    const def = REGISTRY[key];
+    if (!def) {
+        throw new Error(`@vmz/ui-icons: unknown icon name "${name}" (resolved: "${key}")`);
+    }
+    return def;
+}
+
+/** @deprecated Prefer `resolveIconDef`. Returns primary path data for fill icons or first stroke path. */
+export function resolveIconPath(name: string): string {
+    const def = resolveIconDef(name);
+    if (!def) return '';
+    if (def.kind === 'fill') return def.d;
+    if (def.kind === 'text-badge') return '';
+    if (def.kind === 'stroke') return def.paths[0] ?? '';
+    const pathNode = def.nodes.find((node) => node.tag === 'path');
+    return pathNode?.attrs.d ?? '';
 }