@nice2dev/icons 1.3.8 → 1.3.9

package/dist/esm/NiceIconStacker.js

@@ -1,32 +1,56 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useNiceTranslation, useControllableState } from '@nice2dev/ui-core';
-import { forwardRef, useRef, useId, useState, useCallback, useMemo, useImperativeHandle } from 'react';
+import { useNiceTranslation, useControllableState, useRovingFocus } from '@nice2dev/ui-core';
+import React, { forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
 import { NtdPlus, NtdTrash, NtdCheck, NtdCopy } from './icons/actions.js';
 import { NtdClose } from './icons/navigation.js';
-import { niceIconStackCode, renderIconStack, stackParentId, stackChildrenOf, isValidTextBinding } from './iconStack.js';
+import { niceIconStackCode, iconDisplayName, stackParentId, stackChildrenOf, isValidTextBinding, renderIconStack, addStackLayer, removeStackLayer } from './iconStack.js';
 import { BOX_PERFECT_STACK, defaultStackSize, defaultTextSize, perfectStackOf } from './stacking.js';
 
-const ALIGNS = [
-    'perfect',
-    'center',
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-    'half-top',
-    'half-bottom',
-    'half-left',
-    'half-right',
-    'half-top-left',
-    'half-top-right',
-    'half-bottom-left',
-    'half-bottom-right',
+/** Where a layer can sit, laid out on the 5 × 5 pad as it sits in its parent. */
+const PAD = [
+    { align: 'top-left', row: 1, col: 1 },
+    { align: 'top', row: 1, col: 3 },
+    { align: 'top-right', row: 1, col: 5 },
+    { align: 'half-top-left', row: 2, col: 2 },
+    { align: 'half-top', row: 2, col: 3 },
+    { align: 'half-top-right', row: 2, col: 4 },
+    { align: 'left', row: 3, col: 1 },
+    { align: 'half-left', row: 3, col: 2 },
+    { align: 'center', row: 3, col: 3 },
+    { align: 'half-right', row: 3, col: 4 },
+    { align: 'right', row: 3, col: 5 },
+    { align: 'half-bottom-left', row: 4, col: 2 },
+    { align: 'half-bottom', row: 4, col: 3 },
+    { align: 'half-bottom-right', row: 4, col: 4 },
+    { align: 'bottom-left', row: 5, col: 1 },
+    { align: 'bottom', row: 5, col: 3 },
+    { align: 'bottom-right', row: 5, col: 5 },
 ];
-const PREVIEW_SIZES = [96, 48, 24];
+/** The positions' names, in words. */
+function alignNames(t) {
+    return {
+        perfect: t('iconStacker.align.perfect', 'Auto'),
+        center: t('iconStacker.align.center', 'Centre'),
+        top: t('iconStacker.align.top', 'Top edge'),
+        bottom: t('iconStacker.align.bottom', 'Bottom edge'),
+        left: t('iconStacker.align.left', 'Left edge'),
+        right: t('iconStacker.align.right', 'Right edge'),
+        'top-left': t('iconStacker.align.top-left', 'Top-left corner'),
+        'top-right': t('iconStacker.align.top-right', 'Top-right corner'),
+        'bottom-left': t('iconStacker.align.bottom-left', 'Bottom-left corner'),
+        'bottom-right': t('iconStacker.align.bottom-right', 'Bottom-right corner'),
+        'half-top': t('iconStacker.align.half-top', 'Halfway to the top'),
+        'half-bottom': t('iconStacker.align.half-bottom', 'Halfway to the bottom'),
+        'half-left': t('iconStacker.align.half-left', 'Halfway to the left'),
+        'half-right': t('iconStacker.align.half-right', 'Halfway to the right'),
+        'half-top-left': t('iconStacker.align.half-top-left', 'Halfway to the top-left corner'),
+        'half-top-right': t('iconStacker.align.half-top-right', 'Halfway to the top-right corner'),
+        'half-bottom-left': t('iconStacker.align.half-bottom-left', 'Halfway to the bottom-left corner'),
+        'half-bottom-right': t('iconStacker.align.half-bottom-right', 'Halfway to the bottom-right corner'),
+    };
+}
+const STAGE_SIZE = 64;
+const STAGE_SMALL = [32, 24, 16];
 const NO_LAYERS = [];
 /** What a colour field shows while the colour is unset (follows the parent). */
 const AUTO_SWATCH = '#808080';
@@ -44,57 +68,21 @@ function walk(layers) {
     }
     return out;
 }
-/** Removes a layer; what sat in it moves up into its parent (a removed base hands over to its first child). */
-function removeLayer(layers, id) {
-    const base = layers[0];
-    if (!base) {
-        return [];
-    }
-    if (id !== base.id) {
-        const gone = layers.find((l) => l.id === id);
-        const up = gone ? stackParentId(layers, gone) : undefined;
-        return layers
-            .filter((l) => l.id !== id)
-            .map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
-    }
-    const [heir, ...siblings] = stackChildrenOf(layers, base.id);
-    if (!heir) {
-        return [];
-    }
-    const newBase = {
-        ...heir,
-        parent: undefined,
-        align: undefined,
-        size: undefined,
-        rotation: undefined,
-        offsetX: undefined,
-        offsetY: undefined,
-    };
-    return [
-        newBase,
-        ...layers
-            .filter((l) => l.id !== base.id && l.id !== heir.id)
-            .map((l) => siblings.includes(l)
-            ? { ...l, parent: heir.id }
-            : l.parent === heir.id
-                ? { ...l, parent: undefined }
-                : l),
-    ];
-}
 /** A colour of the layer's own, or "auto" — following its parent — until one is picked. */
-function ColorField({ label, value, onChange, autoLabel, resetLabel }) {
-    return (jsxs("span", { className: "nice-icon-stacker__color", children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: label }), jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value ? (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": resetLabel, title: resetLabel, children: jsx(NtdClose, { size: 12 }) })) : (jsx("small", { className: "nice-icon-stacker__auto", children: autoLabel }))] }));
+function Swatch({ label, value, onChange, autoLabel, resetLabel }) {
+    return (jsxs("span", { className: "nice-icon-stacker__swatch", children: [jsxs("label", { className: `nice-icon-stacker__swatch-pick${value ? '' : ' nice-icon-stacker__swatch-pick--auto'}`, title: `${label}: ${value !== null && value !== void 0 ? value : autoLabel}`, children: [jsx("span", { className: "nice-icon-stacker__swatch-dot", style: value ? { background: value } : undefined }), jsx("span", { children: label }), jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value && (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": `${resetLabel}: ${label}`, title: resetLabel, children: jsx(NtdClose, { size: 10 }) }))] }));
 }
 /**
- * NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, each
- * with its position, size, turn and colours, nested any number of levels deep (1.3.6) with text
- * innermost — its size, colour and the value it is bound to — shown live at three sizes and as the
- * JSX that draws it. The "add" button puts `current` into the selected layer and selects it, so
- * adding again goes one level deeper; select an outer layer to add side by side. Layers leave one
- * by one or all at once. `NiceIconStack` draws a stack built here from data.
+ * NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, nested
+ * any number of levels deep (1.3.6) with text innermost. Since 1.3.9 it is laid out to fit a picker's
+ * panel: the stack drawn large and small, the layers as a list, and under it the selected layer —
+ * where it sits (picked on a pad shaped like its parent), its size and text, with the turn, nudge,
+ * colours and binding folded under "More". A new icon goes into the selected layer and is selected,
+ * so adding again goes one level deeper; select an outer layer to add side by side. The JSX that
+ * draws the stack is folded at the end. `NiceIconStack` draws a stack built here from data.
  */
-const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className }, ref) {
-    var _a, _b, _c, _d;
+const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, onAddClick, previewProps, iconLabel = iconDisplayName, showCode = true, keepBase = false, className, }, ref) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { t } = useNiceTranslation();
     const [layers, setLayers] = useControllableState({
         value: layersProp,
@@ -103,43 +91,47 @@ const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: lay
         onChange: onLayersChange,
         componentName: 'NiceIconStacker',
     });
-    const nextId = useRef(0);
-    const targetGroup = useId();
     const [copied, setCopied] = useState(false);
-    // The layer the next icon goes into — the newest by default, so adding nests deeper.
+    // The layer being edited, which the next icon goes into — the newest by default, so adding nests deeper.
     const [selected, setSelected] = useState(undefined);
     const base = layers[0];
     const target = (_b = (_a = layers.find((l) => l.id === selected)) !== null && _a !== void 0 ? _a : layers[layers.length - 1]) !== null && _b !== void 0 ? _b : undefined;
+    const listRef = useRef(null);
+    useRovingFocus(listRef, {
+        orientation: 'vertical',
+        itemSelector: '.nice-icon-stacker__layer-select',
+    });
+    const padRef = useRef(null);
+    useRovingFocus(padRef, {
+        orientation: 'grid',
+        itemSelector: '[role="radio"]',
+        activateOnMove: true,
+    });
     const resolve = useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
     const tree = useMemo(() => walk(layers), [layers]);
-    const code = useMemo(() => niceIconStackCode(layers), [layers]);
+    const code = useMemo(() => (showCode ? niceIconStackCode(layers) : ''), [layers, showCode]);
     const update = (id, patch) => setLayers((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
-    const add = () => {
-        if (!current) {
+    const add = (icon = current) => {
+        if (!icon) {
             return;
         }
-        nextId.current += 1;
-        const id = `${current.icon}-${Date.now().toString(36)}-${nextId.current}`;
+        let added = '';
         setLayers((prev) => {
-            const into = prev.find((l) => l.id === (target === null || target === void 0 ? void 0 : target.id));
-            const layer = {
-                id,
-                icon: current.icon,
-                variant: current.variant,
-                ...(into && into !== prev[0] ? { parent: into.id } : {}),
-            };
-            return [...prev, layer];
+            var _a;
+            const next = addStackLayer(prev, icon, (_a = prev.find((l) => l.id === (target === null || target === void 0 ? void 0 : target.id))) === null || _a === void 0 ? void 0 : _a.id);
+            added = next.id;
+            return next.layers;
         });
-        setSelected(id);
+        setSelected(added);
     };
     const remove = (id) => {
-        setLayers((prev) => removeLayer(prev, id));
+        setLayers((prev) => removeStackLayer(prev, id));
         if (selected === id) {
             setSelected(undefined);
         }
     };
     const clear = () => {
-        setLayers(NO_LAYERS);
+        setLayers((prev) => (keepBase && prev[0] ? [prev[0]] : NO_LAYERS));
         setSelected(undefined);
     };
     useImperativeHandle(ref, () => ({ add, clear }));
@@ -152,41 +144,66 @@ const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: lay
     };
     const autoLabel = t('iconStacker.auto', 'auto');
     const resetLabel = t('iconStacker.reset', 'Back to auto');
-    const addLabel = base && target
-        ? t('iconStacker.addInto', 'Add {icon} into {target}')
-            .replace('{icon}', (_c = current === null || current === void 0 ? void 0 : current.icon) !== null && _c !== void 0 ? _c : '')
-            .replace('{target}', target.icon)
-        : t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', (_d = current === null || current === void 0 ? void 0 : current.icon) !== null && _d !== void 0 ? _d : '');
-    return (jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsx(NtdPlus, { size: 14 }), " ", addLabel] }), jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsx(NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxs("div", { className: "nice-icon-stacker__body", children: [jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [renderIconStack(layers, icons, {
-                                    baseProps: { ...previewProps, size: s, title: base.icon },
-                                }), jsxs("small", { children: [s, "px"] })] }, s))) }), jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                            const Icon = resolve(l.icon);
-                            const isBase = l === base;
-                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'perfect';
-                            // the spot the parent keeps for stacked icons (1.3.8): its size and turn are the
-                            // layer's defaults while it sits there
-                            const parentId = stackParentId(layers, l);
-                            const parentLayer = parentId ? layers.find((p) => p.id === parentId) : undefined;
-                            const spot = (parentLayer && perfectStackOf(resolve(parentLayer.icon))) || BOX_PERFECT_STACK;
-                            const atSpot = align === 'perfect';
-                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : (atSpot ? spot.size : defaultStackSize(align));
-                            const turnDefault = atSpot ? spot.rotation : 0;
-                            const turn = (_c = l.rotation) !== null && _c !== void 0 ? _c : turnDefault;
-                            const innermost = stackChildrenOf(layers, l.id).length === 0;
-                            const textSize = (_d = l.textSize) !== null && _d !== void 0 ? _d : defaultTextSize(((_e = l.text) !== null && _e !== void 0 ? _e : '').length || 1, (_f = perfectStackOf(Icon)) === null || _f === void 0 ? void 0 : _f.size);
-                            const bindingInvalid = !!l.textBinding && !isValidTextBinding(l.textBinding);
-                            const depthStyle = {
-                                ['--nice-icon-stacker-depth']: String(depth),
-                            };
-                            const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
-                            return (jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.align', 'Position') }), jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.size', 'Size') }), jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsx(NtdTrash, { size: 14 }) })] }), jsxs("details", { className: "nice-icon-stacker__more", children: [jsx("summary", { children: t('iconStacker.more', 'More') }), jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxs(Fragment, { children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsx("input", { type: "range", min: -180, max: 180, step: 15, value: turn, onChange: (e) => {
-                                                                            const v = Number(e.target.value);
-                                                                            update(l.id, { rotation: v === turnDefault ? undefined : v });
-                                                                        } }), jsxs("output", { children: [turn, "\u00B0"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_g = l.offsetX) !== null && _g !== void 0 ? _g : 0, onChange: (e) => update(l.id, { offsetX: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_h = l.offsetX) !== null && _h !== void 0 ? _h : 0, "%"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_j = l.offsetY) !== null && _j !== void 0 ? _j : 0, onChange: (e) => update(l.id, { offsetY: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_k = l.offsetY) !== null && _k !== void 0 ? _k : 0, "%"] })] })] })), jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxs("div", { className: "nice-icon-stacker__text", children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.text', 'Text') }), jsx("input", { type: "text", value: (_l = l.text) !== null && _l !== void 0 ? _l : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsx("output", { children: textSize }), l.textSize !== undefined && (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsx(NtdClose, { size: 12 }) }))] }), jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsx("input", { type: "text", value: (_m = l.textBinding) !== null && _m !== void 0 ? _m : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
-                        }) }), jsxs("div", { className: "nice-icon-stacker__code", children: [jsx("pre", { children: code }), jsxs("button", { type: "button", onClick: copy, children: [copied ? jsx(NtdCheck, { size: 14 }) : jsx(NtdCopy, { size: 14 }), ' ', copied
+    const names = alignNames(t);
+    const alignName = (a) => names[a];
+    const currentName = current ? iconLabel(current.icon) : '';
+    const targetName = target ? iconLabel(target.icon) : '';
+    const asks = !!onAddClick || !current;
+    const addText = asks
+        ? t('iconStacker.addIcon', 'Add an icon')
+        : t('iconStacker.addShort', 'Add {icon}').replace('{icon}', currentName);
+    const addLabel = asks
+        ? base && target
+            ? t('iconStacker.addIconInto', 'Add an icon into {target}').replace('{target}', targetName)
+            : addText
+        : base && target
+            ? t('iconStacker.addInto', 'Add {icon} into {target}')
+                .replace('{icon}', currentName)
+                .replace('{target}', targetName)
+            : t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', currentName);
+    const clearLabel = keepBase
+        ? t('iconStacker.clearOverlays', 'Take off the stacked icons')
+        : t('iconStacker.clear', 'Clear the stack');
+    // the selected layer, as the inspector edits it
+    const edited = target;
+    const editedIcon = edited ? resolve(edited.icon) : undefined;
+    const editedIsBase = !!edited && edited === base;
+    const align = (_c = edited === null || edited === void 0 ? void 0 : edited.align) !== null && _c !== void 0 ? _c : 'perfect';
+    // the spot the parent keeps for stacked icons (1.3.8): its size and turn are the layer's
+    // defaults while it sits there
+    const parentId = edited ? stackParentId(layers, edited) : undefined;
+    const parentLayer = parentId ? layers.find((p) => p.id === parentId) : undefined;
+    const spot = (parentLayer && perfectStackOf(resolve(parentLayer.icon))) || BOX_PERFECT_STACK;
+    const atSpot = align === 'perfect';
+    const share = (_d = edited === null || edited === void 0 ? void 0 : edited.size) !== null && _d !== void 0 ? _d : (atSpot ? spot.size : defaultStackSize(align));
+    const turnDefault = atSpot ? spot.rotation : 0;
+    const turn = (_e = edited === null || edited === void 0 ? void 0 : edited.rotation) !== null && _e !== void 0 ? _e : turnDefault;
+    const innermost = !!edited && stackChildrenOf(layers, edited.id).length === 0;
+    const hasText = !!edited && (innermost || !!edited.text || !!edited.textBinding);
+    const textSize = (_f = edited === null || edited === void 0 ? void 0 : edited.textSize) !== null && _f !== void 0 ? _f : defaultTextSize(((_g = edited === null || edited === void 0 ? void 0 : edited.text) !== null && _g !== void 0 ? _g : '').length || 1, (_h = perfectStackOf(editedIcon)) === null || _h === void 0 ? void 0 : _h.size);
+    const bindingInvalid = !!(edited === null || edited === void 0 ? void 0 : edited.textBinding) && !isValidTextBinding(edited.textBinding);
+    return (jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxs("div", { className: "nice-icon-stacker__bar", children: [jsx("span", { className: "nice-icon-stacker__title", children: t('iconStacker.layers', 'Layers') }), jsxs("button", { type: "button", className: "nice-icon-stacker__add", onClick: () => (onAddClick ? onAddClick(target) : add()), disabled: !onAddClick && !current, "aria-label": addLabel, title: addLabel, children: [jsx(NtdPlus, { size: 14 }), " ", addText] }), jsx("button", { type: "button", className: "nice-icon-stacker__clear", onClick: clear, disabled: keepBase ? layers.length < 2 : layers.length === 0, "aria-label": clearLabel, title: clearLabel, children: jsx(NtdTrash, { size: 14 }) })] }), !base || !edited ? (jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxs(Fragment, { children: [jsxs("div", { className: "nice-icon-stacker__top", children: [jsxs("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: [jsx("span", { className: "nice-icon-stacker__preview-main", title: `${STAGE_SIZE}px`, children: renderIconStack(layers, icons, {
+                                            baseProps: { ...previewProps, size: STAGE_SIZE, title: iconLabel(base.icon) },
+                                        }) }), jsx("span", { className: "nice-icon-stacker__preview-small", children: STAGE_SMALL.map((s) => (jsx("span", { title: `${s}px`, children: renderIconStack(layers, icons, { baseProps: { ...previewProps, size: s } }) }, s))) })] }), jsxs("div", { className: "nice-icon-stacker__layers-wrap", children: [jsx("ol", { ref: listRef, className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
+                                            const Icon = resolve(l.icon);
+                                            const isBase = l === base;
+                                            const isSelected = l === edited;
+                                            const name = iconLabel(l.icon);
+                                            const removable = !(isBase && keepBase);
+                                            const removeLabel = t('iconStacker.remove', 'Remove {icon}').replace('{icon}', name);
+                                            return (jsxs("li", { className: `nice-icon-stacker__layer${isSelected ? ' nice-icon-stacker__layer--selected' : ''}`, style: { ['--nice-icon-stacker-depth']: String(depth) }, children: [jsxs("button", { type: "button", className: "nice-icon-stacker__layer-select", "aria-pressed": isSelected, onClick: () => setSelected(l.id), onKeyDown: (e) => {
+                                                            if (removable && (e.key === 'Delete' || e.key === 'Backspace')) {
+                                                                e.preventDefault();
+                                                                remove(l.id);
+                                                            }
+                                                        }, children: [jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsx(Icon, { size: 18, variant: l.variant }) : null }), jsx("span", { className: "nice-icon-stacker__layer-name", children: name }), l.text && (jsxs(Fragment, { children: [' ', jsx("span", { className: "nice-icon-stacker__layer-text", children: l.text })] })), isBase && (jsxs(Fragment, { children: [' ', jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') })] }))] }), removable && (jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": removeLabel, title: removeLabel, children: jsx(NtdClose, { size: 10 }) }))] }, l.id));
+                                        }) }), jsx("small", { className: "nice-icon-stacker__hint", children: t('iconStacker.hint', 'A new icon goes into the selected layer.') })] })] }), jsxs("div", { className: "nice-icon-stacker__inspector", role: "group", "aria-label": iconLabel(edited.icon), children: [jsxs("div", { className: "nice-icon-stacker__inspector-head", children: [editedIcon &&
+                                        React.createElement(editedIcon, { size: 16, variant: edited.variant }), jsx("span", { children: iconLabel(edited.icon) }), parentLayer && (jsx("small", { children: t('iconStacker.inside', 'in {icon}').replace('{icon}', iconLabel(parentLayer.icon)) }))] }), jsxs("div", { className: "nice-icon-stacker__inspector-body", children: [!editedIsBase && (jsxs("div", { ref: padRef, className: "nice-icon-stacker__pad", role: "radiogroup", "aria-label": t('iconStacker.align', 'Position'), children: [jsx("button", { type: "button", role: "radio", "aria-checked": align === 'perfect', className: "nice-icon-stacker__pad-auto", title: t('iconStacker.align.perfectHint', 'The spot the icon keeps for what is stacked in it'), onClick: () => update(edited.id, { align: undefined }), children: alignName('perfect') }), jsx("span", { className: "nice-icon-stacker__pad-box", children: PAD.map(({ align: a, row, col }) => (jsx("button", { type: "button", role: "radio", "aria-checked": align === a, "aria-label": alignName(a), title: alignName(a), className: "nice-icon-stacker__pad-dot", style: { gridRow: row, gridColumn: col }, onClick: () => update(edited.id, { align: a }) }, a))) })] })), jsxs("div", { className: "nice-icon-stacker__fields", children: [!editedIsBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.size', 'Size') }), jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(edited.id, { size: Number(e.target.value) }) }), jsxs("output", { children: [Math.round(share * 100), "%"] })] })), hasText && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.text', 'Text') }), jsx("input", { type: "text", value: (_j = edited.text) !== null && _j !== void 0 ? _j : '', maxLength: 4, onChange: (e) => update(edited.id, { text: e.target.value || undefined }) })] }))] })] }), jsxs("details", { className: "nice-icon-stacker__more", children: [jsx("summary", { children: t('iconStacker.more', 'More') }), jsxs("div", { className: "nice-icon-stacker__more-body", children: [!editedIsBase && (jsxs(Fragment, { children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsx("input", { type: "range", min: -180, max: 180, step: 15, value: turn, onChange: (e) => {
+                                                                    const v = Number(e.target.value);
+                                                                    update(edited.id, { rotation: v === turnDefault ? undefined : v });
+                                                                } }), jsxs("output", { children: [turn, "\u00B0"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_k = edited.offsetX) !== null && _k !== void 0 ? _k : 0, onChange: (e) => update(edited.id, { offsetX: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_l = edited.offsetX) !== null && _l !== void 0 ? _l : 0, "%"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_m = edited.offsetY) !== null && _m !== void 0 ? _m : 0, onChange: (e) => update(edited.id, { offsetY: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_o = edited.offsetY) !== null && _o !== void 0 ? _o : 0, "%"] })] })] })), jsxs("div", { className: "nice-icon-stacker__swatches", children: [jsx(Swatch, { label: t('iconStacker.primary', 'Primary'), value: edited.primaryColor, onChange: (v) => update(edited.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(Swatch, { label: t('iconStacker.secondary', 'Secondary'), value: edited.secondaryColor, onChange: (v) => update(edited.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(Swatch, { label: t('iconStacker.accent', 'Accent'), value: edited.accentColor, onChange: (v) => update(edited.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), hasText && (jsx(Swatch, { label: t('iconStacker.textColor', 'Text colour'), value: edited.textColor, onChange: (v) => update(edited.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }))] }), hasText && (jsxs(Fragment, { children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(edited.id, { textSize: Number(e.target.value) }) }), jsx("output", { children: textSize }), edited.textSize !== undefined && (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(edited.id, { textSize: undefined }), "aria-label": `${resetLabel}: ${t('iconStacker.textSize', 'Text size')}`, title: resetLabel, children: jsx(NtdClose, { size: 10 }) }))] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsx("input", { type: "text", value: (_p = edited.textBinding) !== null && _p !== void 0 ? _p : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(edited.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] })] })] }), showCode && (jsxs("details", { className: "nice-icon-stacker__code", children: [jsx("summary", { children: t('iconStacker.code', 'JSX code') }), jsx("pre", { children: code }), jsxs("button", { type: "button", onClick: copy, children: [copied ? jsx(NtdCheck, { size: 14 }) : jsx(NtdCopy, { size: 14 }), ' ', copied
                                         ? t('iconStacker.copied', 'Copied')
-                                        : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
+                                        : t('iconStacker.copy', 'Copy the code')] })] }))] }))] }));
 });
 if (process.env.NODE_ENV !== 'production') {
     NiceIconStacker.displayName = 'NiceIconStacker';

package/dist/esm/client.js

@@ -1,7 +1,8 @@
 export { AnimationController, InteractiveIcon, PRESET_INTERACTIONS, PRESET_SEQUENCES, createAnimationSequence, createClickAnimation, createHoverAnimation, createVisibilityAnimation, useAnimationSequence } from './animationControls.js';
 export { NiceIconPicker } from './NiceIconPicker.js';
+export { NiceIconHtml, parseIconHtml } from './iconHtml.js';
 export { NiceIconStacker } from './NiceIconStacker.js';
-export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack } from './iconStack.js';
+export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack } from './iconStack.js';
 export { NtdIconMorph, NtdMorphPair, NtdPathMorph, useMorphState } from './NtdIconMorph.js';
 export { NtdBadge, NtdIconOverlay, NtdIconStack, NtdStatusDot } from './NtdIconBadge.js';
 export { SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported } from './smilAnimations.js';

package/dist/esm/iconHtml.js

@@ -0,0 +1,117 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { renderIconStack } from './iconStack.js';
+
+/**
+ * An icon — or a stack of icons — kept as HTML (1.3.9): the `<svg>` NiceIconPicker draws, ready to
+ * store in a database and to show anywhere, even without React. What it was drawn from rides along
+ * in data attributes on the root, so the picker reads its own value back.
+ */
+const ATTR_ICON = 'data-ntd-icon';
+const ATTR_VARIANT = 'data-ntd-variant';
+const ATTR_STACK = 'data-ntd-stack';
+const ENTITIES = {
+    amp: '&',
+    quot: '"',
+    apos: "'",
+    '#39': "'",
+    lt: '<',
+    gt: '>',
+};
+/** The value of a data attribute of the root element (the first one in the markup). */
+function readAttr(html, name) {
+    const hit = new RegExp(`\\s${name}="([^"]*)"`).exec(html);
+    return hit
+        ? hit[1].replace(/&(amp|quot|apos|#39|lt|gt);/g, (_, e) => ENTITIES[e])
+        : undefined;
+}
+function isLayer(value) {
+    const layer = value;
+    return (!!layer &&
+        typeof layer === 'object' &&
+        typeof layer.id === 'string' &&
+        typeof layer.icon === 'string');
+}
+/**
+ * Reads back what an icon's HTML was drawn from — the base icon and the stack. `null` for anything
+ * else: empty, plain text or HTML the picker did not write.
+ */
+function parseIconHtml(html) {
+    if (!html) {
+        return null;
+    }
+    const icon = readAttr(html, ATTR_ICON);
+    if (!icon) {
+        return null;
+    }
+    const stack = readAttr(html, ATTR_STACK);
+    if (stack) {
+        try {
+            const parsed = JSON.parse(stack);
+            const layers = Array.isArray(parsed) ? parsed.filter(isLayer) : [];
+            if (layers.length > 0) {
+                return { icon: layers[0].icon, layers };
+            }
+        }
+        catch (_a) {
+            // a damaged stack still shows its base
+        }
+    }
+    const variant = readAttr(html, ATTR_VARIANT);
+    return { icon, layers: [{ id: '1', icon, ...(variant ? { variant } : {}) }] };
+}
+/** The data attributes that let the HTML of a stack be read back: the base, and the stack unless it is a plain icon. */
+function iconHtmlAttributes(layers) {
+    const base = layers[0];
+    if (!base) {
+        return {};
+    }
+    const plain = layers.length === 1 &&
+        Object.entries(base).every(([key, value]) => value === undefined || key === 'id' || key === 'icon' || key === 'variant');
+    if (plain) {
+        return { [ATTR_ICON]: base.icon, ...(base.variant ? { [ATTR_VARIANT]: base.variant } : {}) };
+    }
+    return { [ATTR_ICON]: base.icon, [ATTR_STACK]: JSON.stringify(layers) };
+}
+/** djb2, base 36 — a short, stable name for a drawing. */
+function hash(text) {
+    let h = 5381;
+    for (let i = 0; i < text.length; i++) {
+        h = ((h << 5) + h + text.charCodeAt(i)) | 0;
+    }
+    return (h >>> 0).toString(36);
+}
+/**
+ * Renames the ids inside an icon's markup (masks, gradients, clip paths) after the drawing itself.
+ * React's ids (`_r_3_`) are unique only within the page that drew them; pasted into another page they
+ * could hit an element of its own and borrow the wrong mask. Named after the drawing, two copies of
+ * one icon share ids that point at identical definitions.
+ */
+function scopeIconHtmlIds(markup) {
+    const ids = [...new Set([...markup.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]))];
+    if (ids.length === 0) {
+        return markup;
+    }
+    const index = new Map(ids.map((id, i) => [id, i]));
+    const rename = (fn) => markup
+        .replace(/(\sid=")([^"]+)(")/g, (all, a, id, b) => index.has(id) ? a + fn(id) + b : all)
+        .replace(/url\(#([^)]+)\)/g, (all, id) => (index.has(id) ? `url(#${fn(id)})` : all))
+        .replace(/(href=")#([^"]+)(")/g, (all, a, id, b) => index.has(id) ? `${a}#${fn(id)}${b}` : all);
+    const name = hash(rename((id) => `#${index.get(id)}`));
+    return rename((id) => `ntd-${name}-${index.get(id)}`);
+}
+/**
+ * NiceIconHtml (1.3.9) — shows an icon kept as HTML in a React page by drawing it again from its
+ * data attributes; the markup itself is never injected, so HTML from a database cannot run anything.
+ * A plain export name (`'NtdStar'`) works too. The rest of the props go to the base icon.
+ */
+function NiceIconHtml({ html, icons, values, fallback = null, ...baseProps }) {
+    var _a;
+    const source = (_a = parseIconHtml(html)) !== null && _a !== void 0 ? _a : (html && !html.includes('<') ? { layers: [{ id: '1', icon: html }] } : null);
+    const drawn = source ? renderIconStack(source.layers, icons, { baseProps, values }) : null;
+    return jsx(Fragment, { children: drawn !== null && drawn !== void 0 ? drawn : fallback });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconHtml.displayName = 'NiceIconHtml';
+}
+
+export { NiceIconHtml, iconHtmlAttributes, parseIconHtml, scopeIconHtmlIds };

package/dist/esm/iconStack.js

@@ -14,6 +14,74 @@ function stackParentId(layers, layer) {
 function stackChildrenOf(layers, id) {
     return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
 }
+/** An icon's name as people read it: the export name without `Ntd` — `NtdAlertBell` → `AlertBell`. */
+function iconDisplayName(name) {
+    return name.replace(/^Ntd(?=[A-Z0-9])/, '');
+}
+/** A short id no layer of the stack has yet: `'1'`, `'2'`… (1.3.9 — it was the icon name and a timestamp). */
+function nextStackLayerId(layers) {
+    const taken = new Set(layers.map((l) => l.id));
+    let n = layers.length + 1;
+    while (taken.has(String(n))) {
+        n += 1;
+    }
+    return String(n);
+}
+/**
+ * Puts an icon on the stack (1.3.9): into layer `into` (the base when absent or unknown), or as the
+ * base of an empty stack. Returns the new layers and the new layer's id.
+ */
+function addStackLayer(layers, icon, into) {
+    const id = nextStackLayerId(layers);
+    const parent = layers.find((l) => l.id === into);
+    const layer = {
+        id,
+        icon: icon.icon,
+        ...(icon.variant ? { variant: icon.variant } : {}),
+        ...(parent && parent !== layers[0] ? { parent: parent.id } : {}),
+    };
+    return { layers: [...layers, layer], id };
+}
+/**
+ * Takes a layer off the stack (1.3.9; NiceIconStacker's own until then): what sat in it moves up
+ * into its parent, and a removed base hands over to its first child.
+ */
+function removeStackLayer(layers, id) {
+    const base = layers[0];
+    if (!base) {
+        return [];
+    }
+    if (id !== base.id) {
+        const gone = layers.find((l) => l.id === id);
+        const up = gone ? stackParentId(layers, gone) : undefined;
+        return layers
+            .filter((l) => l.id !== id)
+            .map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
+    }
+    const [heir, ...siblings] = stackChildrenOf(layers, base.id);
+    if (!heir) {
+        return [];
+    }
+    const newBase = {
+        ...heir,
+        parent: undefined,
+        align: undefined,
+        size: undefined,
+        rotation: undefined,
+        offsetX: undefined,
+        offsetY: undefined,
+    };
+    return [
+        newBase,
+        ...layers
+            .filter((l) => l.id !== base.id && l.id !== heir.id)
+            .map((l) => siblings.includes(l)
+            ? { ...l, parent: heir.id }
+            : l.parent === heir.id
+                ? { ...l, parent: undefined }
+                : l),
+    ];
+}
 const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
 /** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
 function niceIconStackCode(layers) {
@@ -103,4 +171,4 @@ if (process.env.NODE_ENV !== 'production') {
     NiceIconStack.displayName = 'NiceIconStack';
 }
 
-export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack, stackChildrenOf, stackParentId };
+export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack, stackChildrenOf, stackParentId };

package/dist/esm/index.js

@@ -2,8 +2,9 @@ export { GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SEMANTIC_COLOR_VARS, SIZE_MA
 export { createIcon } from './createIcon.js';
 export { SmilAnimationWrapper as NiceSmilAnimationWrapper, SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported } from './smilAnimations.js';
 export { NiceIconPicker } from './NiceIconPicker.js';
+export { NiceIconHtml, parseIconHtml } from './iconHtml.js';
 export { NiceIconStacker } from './NiceIconStacker.js';
-export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack } from './iconStack.js';
+export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack } from './iconStack.js';
 export { AnimationController, InteractiveIcon, AnimationController as NiceAnimationController, InteractiveIcon as NiceInteractiveIcon, PRESET_INTERACTIONS, PRESET_SEQUENCES, createAnimationSequence, createClickAnimation, createHoverAnimation, createVisibilityAnimation, useAnimationSequence } from './animationControls.js';
 export { batchExportIcons, copyIconToClipboard, downloadIconAsPng, downloadIconAsSvg, exportIconToDataUrl, exportIconToFigmaNode, exportIconToSvgString, generateFigmaPluginManifest } from './figmaExport.js';
 export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh } from './icons/navigation.js';