@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/NiceIconStacker.js

@@ -1,212 +1,591 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-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, iconDisplayName, stackParentId, stackChildrenOf, isValidTextBinding, renderIconStack, addStackLayer, removeStackLayer } from './iconStack.js';
-import { BOX_PERFECT_STACK, defaultStackSize, defaultTextSize, perfectStackOf } from './stacking.js';
-
-/** Where a layer can sit, laid out on the 5 × 5 pad as it sits in its parent. */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+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, iconDisplayName, stackParentId, stackChildrenOf, isValidTextBinding, renderIconStack, addStackLayer, removeStackLayer } from "./iconStack.js";
+import { perfectStackOf, BOX_PERFECT_STACK, defaultStackSize, defaultTextSize } from "./stacking.js";
+/* empty css                    */
 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 },
+  { 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 }
 ];
-/** 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'),
-    };
+  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';
-/** The layers in tree order (each followed by what sits in it), with their depth. */
+const AUTO_SWATCH = "#808080";
 function walk(layers) {
-    const out = [];
-    const visit = (layer, depth) => {
-        out.push({ layer, depth });
-        for (const child of stackChildrenOf(layers, layer.id)) {
-            visit(child, depth + 1);
-        }
-    };
-    if (layers[0]) {
-        visit(layers[0], 0);
+  const out = [];
+  const visit = (layer, depth) => {
+    out.push({ layer, depth });
+    for (const child of stackChildrenOf(layers, layer.id)) {
+      visit(child, depth + 1);
     }
-    return out;
+  };
+  if (layers[0]) {
+    visit(layers[0], 0);
+  }
+  return out;
 }
-/** A colour of the layer's own, or "auto" — following its parent — until one is picked. */
 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 }) }))] }));
+  return /* @__PURE__ */ jsxs("span", { className: "nice-icon-stacker__swatch", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `nice-icon-stacker__swatch-pick${value ? "" : " nice-icon-stacker__swatch-pick--auto"}`,
+        title: `${label}: ${value ?? autoLabel}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "nice-icon-stacker__swatch-dot",
+              style: value ? { background: value } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: value ?? AUTO_SWATCH,
+              onChange: (e) => onChange(e.target.value)
+            }
+          )
+        ]
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "nice-icon-stacker__reset",
+        onClick: () => onChange(void 0),
+        "aria-label": `${resetLabel}: ${label}`,
+        title: resetLabel,
+        children: /* @__PURE__ */ jsx(NtdClose, { size: 10 })
+      }
+    )
+  ] });
 }
-/**
- * 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, 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 NiceIconStacker = forwardRef(
+  function NiceIconStacker2({
+    icons,
+    layers: layersProp,
+    defaultLayers,
+    onLayersChange,
+    current,
+    onAddClick,
+    previewProps,
+    iconLabel = iconDisplayName,
+    showCode = true,
+    keepBase = false,
+    className
+  }, ref) {
     const { t } = useNiceTranslation();
     const [layers, setLayers] = useControllableState({
-        value: layersProp,
-        defaultValue: defaultLayers,
-        fallbackValue: NO_LAYERS,
-        onChange: onLayersChange,
-        componentName: 'NiceIconStacker',
+      value: layersProp,
+      defaultValue: defaultLayers,
+      fallbackValue: NO_LAYERS,
+      onChange: onLayersChange,
+      componentName: "NiceIconStacker"
     });
     const [copied, setCopied] = useState(false);
-    // The layer being edited, which the next icon goes into — the newest by default, so adding nests deeper.
-    const [selected, setSelected] = useState(undefined);
+    const [selected, setSelected] = useState(void 0);
     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 target = layers.find((l) => l.id === selected) ?? layers[layers.length - 1] ?? void 0;
     const listRef = useRef(null);
     useRovingFocus(listRef, {
-        orientation: 'vertical',
-        itemSelector: '.nice-icon-stacker__layer-select',
+      orientation: "vertical",
+      itemSelector: ".nice-icon-stacker__layer-select"
     });
     const padRef = useRef(null);
     useRovingFocus(padRef, {
-        orientation: 'grid',
-        itemSelector: '[role="radio"]',
-        activateOnMove: true,
+      orientation: "grid",
+      itemSelector: '[role="radio"]',
+      activateOnMove: true
     });
-    const resolve = useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
+    const resolve = useCallback(
+      (name) => typeof icons === "function" ? icons(name) : icons[name],
+      [icons]
+    );
     const tree = useMemo(() => walk(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 code = useMemo(() => showCode ? niceIconStackCode(layers) : "", [layers, showCode]);
+    const update = (id, patch) => setLayers((prev) => prev.map((l) => l.id === id ? { ...l, ...patch } : l));
     const add = (icon = current) => {
-        if (!icon) {
-            return;
-        }
-        let added = '';
-        setLayers((prev) => {
-            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(added);
+      if (!icon) {
+        return;
+      }
+      let added = "";
+      setLayers((prev) => {
+        const next = addStackLayer(prev, icon, prev.find((l) => l.id === target?.id)?.id);
+        added = next.id;
+        return next.layers;
+      });
+      setSelected(added);
     };
     const remove = (id) => {
-        setLayers((prev) => removeStackLayer(prev, id));
-        if (selected === id) {
-            setSelected(undefined);
-        }
+      setLayers((prev) => removeStackLayer(prev, id));
+      if (selected === id) {
+        setSelected(void 0);
+      }
     };
     const clear = () => {
-        setLayers((prev) => (keepBase && prev[0] ? [prev[0]] : NO_LAYERS));
-        setSelected(undefined);
+      setLayers((prev) => keepBase && prev[0] ? [prev[0]] : NO_LAYERS);
+      setSelected(void 0);
     };
     useImperativeHandle(ref, () => ({ add, clear }));
     const copy = () => {
-        var _a;
-        void ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code).then(() => {
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1500);
-        }));
+      void navigator.clipboard?.writeText(code).then(() => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      });
     };
-    const autoLabel = t('iconStacker.auto', 'auto');
-    const resetLabel = t('iconStacker.reset', 'Back to auto');
+    const autoLabel = t("iconStacker.auto", "auto");
+    const resetLabel = t("iconStacker.reset", "Back to auto");
     const names = alignNames(t);
     const alignName = (a) => names[a];
-    const currentName = current ? iconLabel(current.icon) : '';
-    const targetName = target ? iconLabel(target.icon) : '';
+    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 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");
     const edited = target;
-    const editedIcon = edited ? resolve(edited.icon) : undefined;
+    const editedIcon = edited ? resolve(edited.icon) : void 0;
     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 align = edited?.align ?? "perfect";
+    const parentId = edited ? stackParentId(layers, edited) : void 0;
+    const parentLayer = parentId ? layers.find((p) => p.id === parentId) : void 0;
+    const spot = parentLayer && perfectStackOf(resolve(parentLayer.icon)) || BOX_PERFECT_STACK;
+    const atSpot = align === "perfect";
+    const share = edited?.size ?? (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 turn = edited?.rotation ?? 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')] })] }))] }))] }));
-});
-if (process.env.NODE_ENV !== 'production') {
-    NiceIconStacker.displayName = 'NiceIconStacker';
+    const textSize = edited?.textSize ?? defaultTextSize((edited?.text ?? "").length || 1, perfectStackOf(editedIcon)?.size);
+    const bindingInvalid = !!edited?.textBinding && !isValidTextBinding(edited.textBinding);
+    return /* @__PURE__ */ jsxs("div", { className: ["nice-icon-stacker", className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__bar", children: [
+        /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__title", children: t("iconStacker.layers", "Layers") }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "nice-icon-stacker__add",
+            onClick: () => onAddClick ? onAddClick(target) : add(),
+            disabled: !onAddClick && !current,
+            "aria-label": addLabel,
+            title: addLabel,
+            children: [
+              /* @__PURE__ */ jsx(NtdPlus, { size: 14 }),
+              " ",
+              addText
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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: /* @__PURE__ */ jsx(NtdTrash, { size: 14 })
+          }
+        )
+      ] }),
+      !base || !edited ? /* @__PURE__ */ jsx("p", { className: "nice-icon-stacker__empty", children: t("iconStacker.empty", "The stack is empty. Add an icon to start one.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__top", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "nice-icon-stacker__preview",
+              "aria-label": t("iconStacker.preview", "Preview"),
+              role: "group",
+              children: [
+                /* @__PURE__ */ 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) }
+                }) }),
+                /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__preview-small", children: STAGE_SMALL.map((s) => /* @__PURE__ */ jsx("span", { title: `${s}px`, children: renderIconStack(layers, icons, { baseProps: { ...previewProps, size: s } }) }, s)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__layers-wrap", children: [
+            /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      className: `nice-icon-stacker__layer${isSelected ? " nice-icon-stacker__layer--selected" : ""}`,
+                      style: { ["--nice-icon-stacker-depth"]: String(depth) },
+                      children: [
+                        /* @__PURE__ */ 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: [
+                              /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? /* @__PURE__ */ jsx(Icon, { size: 18, variant: l.variant }) : null }),
+                              /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__layer-name", children: name }),
+                              l.text && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                " ",
+                                /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__layer-text", children: l.text })
+                              ] }),
+                              isBase && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                " ",
+                                /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__badge", children: t("iconStacker.base", "Base") })
+                              ] })
+                            ]
+                          }
+                        ),
+                        removable && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "nice-icon-stacker__remove",
+                            onClick: () => remove(l.id),
+                            "aria-label": removeLabel,
+                            title: removeLabel,
+                            children: /* @__PURE__ */ jsx(NtdClose, { size: 10 })
+                          }
+                        )
+                      ]
+                    },
+                    l.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx("small", { className: "nice-icon-stacker__hint", children: t("iconStacker.hint", "A new icon goes into the selected layer.") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "nice-icon-stacker__inspector",
+            role: "group",
+            "aria-label": iconLabel(edited.icon),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__inspector-head", children: [
+                editedIcon && React.createElement(editedIcon, { size: 16, variant: edited.variant }),
+                /* @__PURE__ */ jsx("span", { children: iconLabel(edited.icon) }),
+                parentLayer && /* @__PURE__ */ jsx("small", { children: t("iconStacker.inside", "in {icon}").replace(
+                  "{icon}",
+                  iconLabel(parentLayer.icon)
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__inspector-body", children: [
+                !editedIsBase && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: padRef,
+                    className: "nice-icon-stacker__pad",
+                    role: "radiogroup",
+                    "aria-label": t("iconStacker.align", "Position"),
+                    children: [
+                      /* @__PURE__ */ 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: void 0 }),
+                          children: alignName("perfect")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "nice-icon-stacker__pad-box", children: PAD.map(({ align: a, row, col }) => /* @__PURE__ */ 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
+                      )) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__fields", children: [
+                  !editedIsBase && /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                    /* @__PURE__ */ jsx("span", { children: t("iconStacker.size", "Size") }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "range",
+                        min: 0.2,
+                        max: 1,
+                        step: 0.05,
+                        value: share,
+                        onChange: (e) => update(edited.id, { size: Number(e.target.value) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("output", { children: [
+                      Math.round(share * 100),
+                      "%"
+                    ] })
+                  ] }),
+                  hasText && /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                    /* @__PURE__ */ jsx("span", { children: t("iconStacker.text", "Text") }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: edited.text ?? "",
+                        maxLength: 4,
+                        onChange: (e) => update(edited.id, { text: e.target.value || void 0 })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("details", { className: "nice-icon-stacker__more", children: [
+                /* @__PURE__ */ jsx("summary", { children: t("iconStacker.more", "More") }),
+                /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__more-body", children: [
+                  !editedIsBase && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                      /* @__PURE__ */ jsx("span", { children: t("iconStacker.rotation", "Turn") }),
+                      /* @__PURE__ */ 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 ? void 0 : v });
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("output", { children: [
+                        turn,
+                        "°"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                      /* @__PURE__ */ jsx("span", { children: t("iconStacker.offsetX", "Shift right") }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "range",
+                          min: -50,
+                          max: 50,
+                          step: 1,
+                          value: edited.offsetX ?? 0,
+                          onChange: (e) => update(edited.id, { offsetX: Number(e.target.value) || void 0 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("output", { children: [
+                        edited.offsetX ?? 0,
+                        "%"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                      /* @__PURE__ */ jsx("span", { children: t("iconStacker.offsetY", "Shift down") }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "range",
+                          min: -50,
+                          max: 50,
+                          step: 1,
+                          value: edited.offsetY ?? 0,
+                          onChange: (e) => update(edited.id, { offsetY: Number(e.target.value) || void 0 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("output", { children: [
+                        edited.offsetY ?? 0,
+                        "%"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "nice-icon-stacker__swatches", children: [
+                    /* @__PURE__ */ jsx(
+                      Swatch,
+                      {
+                        label: t("iconStacker.primary", "Primary"),
+                        value: edited.primaryColor,
+                        onChange: (v) => update(edited.id, { primaryColor: v }),
+                        autoLabel,
+                        resetLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Swatch,
+                      {
+                        label: t("iconStacker.secondary", "Secondary"),
+                        value: edited.secondaryColor,
+                        onChange: (v) => update(edited.id, { secondaryColor: v }),
+                        autoLabel,
+                        resetLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Swatch,
+                      {
+                        label: t("iconStacker.accent", "Accent"),
+                        value: edited.accentColor,
+                        onChange: (v) => update(edited.id, { accentColor: v }),
+                        autoLabel,
+                        resetLabel
+                      }
+                    ),
+                    hasText && /* @__PURE__ */ jsx(
+                      Swatch,
+                      {
+                        label: t("iconStacker.textColor", "Text colour"),
+                        value: edited.textColor,
+                        onChange: (v) => update(edited.id, { textColor: v }),
+                        autoLabel,
+                        resetLabel
+                      }
+                    )
+                  ] }),
+                  hasText && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                      /* @__PURE__ */ jsx("span", { children: t("iconStacker.textSize", "Text size") }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "range",
+                          min: 3,
+                          max: 14,
+                          step: 0.5,
+                          value: textSize,
+                          onChange: (e) => update(edited.id, { textSize: Number(e.target.value) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("output", { children: textSize }),
+                      edited.textSize !== void 0 && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "nice-icon-stacker__reset",
+                          onClick: () => update(edited.id, { textSize: void 0 }),
+                          "aria-label": `${resetLabel}: ${t("iconStacker.textSize", "Text size")}`,
+                          title: resetLabel,
+                          children: /* @__PURE__ */ jsx(NtdClose, { size: 10 })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "nice-icon-stacker__field", children: [
+                      /* @__PURE__ */ jsx("span", { children: t("iconStacker.bind", "Bind to") }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          value: edited.textBinding ?? "",
+                          "aria-invalid": bindingInvalid || void 0,
+                          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() || void 0 })
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        showCode && /* @__PURE__ */ jsxs("details", { className: "nice-icon-stacker__code", children: [
+          /* @__PURE__ */ jsx("summary", { children: t("iconStacker.code", "JSX code") }),
+          /* @__PURE__ */ jsx("pre", { children: code }),
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: copy, children: [
+            copied ? /* @__PURE__ */ jsx(NtdCheck, { size: 14 }) : /* @__PURE__ */ jsx(NtdCopy, { size: 14 }),
+            " ",
+            copied ? t("iconStacker.copied", "Copied") : t("iconStacker.copy", "Copy the code")
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  NiceIconStacker.displayName = "NiceIconStacker";
 }
-
-export { NiceIconStacker, niceIconStackCode };
+export {
+  NiceIconStacker,
+  niceIconStackCode
+};