@nice2dev/icons 1.3.4 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.6
+
+### Patch Changes
+
+- 4bdd01c: NiceIconStacker builds stacks nested any number of levels deep:
+
+  - **Nesting:** a layer sits in its `parent` (a new optional field). A layer without one sits in
+    the base, as in 1.3.5.
+  - **Where icons go:** "Add" puts the current icon into the selected layer and then selects it, so
+    adding again nests one level deeper (`<NtdBitcoin><NtdStar><NtdSparkle>1</NtdSparkle></NtdStar></NtdBitcoin>`).
+    Select an outer layer to put icons side by side.
+  - **Display:**
+    - layers are indented by depth;
+    - text is the innermost level, offered under the deepest icons;
+    - the colours flip at every level.
+  - **Removing:** removing a layer moves what sat in it up into its parent.
+  - **Handle:** a ref handle (`NiceIconStackerHandle`: `add`, `clear`) lets a parent run "add" from a
+    button of its own.
+  - **Translations:** new keys `iconStacker.addInto` and `iconStacker.target`.
+  - **Smaller text:** the default size of stacked text is three quarters of the 1.3.5 size (9, 7.5,
+    6, 5 by length).
+  - **`stackRotation`:** turns a stacked icon about its own centre.
+  - **NiceIconStacker:** every layer can turn and take its own primary, secondary and accent colours
+    (with "auto" to follow its parent), and its text a size and colour of its own.
+  - **Bound text:**
+    - in the stacker, text can be bound to a value ("Bind to"): the code writes `{count}`, and the
+      text stays a sample;
+    - the new `NiceIconStack` draws a stack kept as data with live values (`values={{ count }}`).
+  - **`renderIconStack`** draws a stack as one icon tree.
+  - **`half-` positions:** `stackAlign` takes every position again with `half-` (`half-top`,
+    `half-top-right`, `half-bottom`, …). The icon sits halfway between the centre and that edge or
+    corner, inside the parent, so it is cut out like centred content (only full corners are
+    badges).
+
+## 1.3.5
+
+### Patch Changes
+
+- 2b49cd7: Icon browser feedback, round 36:
+
+  - `NtdMonitor`: neck and base twice the stroke width in every variant but `outline`; the base
+    30% wider. Vivid's stand is secondary (it had a fixed `#3B82F6`).
+  - `NtdPieChart`: the larger part is a proper three-quarter sector from the centre (it was a segment
+    cut off by a chord). The two sectors have a gap between them; duotone uses fills only.
+  - `NtdCopy`:
+    - the front, filled sheet at the top right;
+    - the back sheet's line stops 1 short of it at any stroke width;
+    - `sharp` draws the back sheet with square corners;
+    - duotone uses fills only.
+  - `NtdStar4` is now a deprecated alias of `NtdSparkle`, and `NtdHydropower` of `NtdDroplet`. Both
+    are duplicates; the old names still work.
+
+- 16d420b: Stack icons by nesting them, and build stacks in NiceIconStacker:
+
+  - An icon draws its children in its own SVG:
+    `<NtdSquare><NtdStar stackAlign="center">1</NtdStar></NtdSquare>`.
+    - **Child icons** sit where `stackAlign` says: `center`, an edge or a corner. `stackSize` sets
+      their share of the parent (default 0.6 centred, 0.5 elsewhere).
+    - **Text children** are centred on the icon's visual centre. `NtdStar`, `NtdHeart`, `NtdShield`
+      and `NtdTriangle` have their own centre (`textCenter` in `createIcon`). `textColor` and
+      `textSize` override the text's colour and size.
+    - **Colours** follow the parent: a filled parent cuts centred and edge content out (the parent's
+      accent); a corner badge keeps the parent's colours on an accent-coloured gap. Colours given on
+      a child win.
+  - `NiceIconStacker`:
+    - lists the base icon and the icons stacked in it, each with its position, size and text;
+    - adds the `current` icon, removes one or clears the stack;
+    - previews the stack at three sizes and writes its JSX (`niceIconStackCode`).
+  - New translation keys `iconStacker.*` (en, pl, de, fr, es, uk).
+
 ## 1.3.4
 
 ### Patch Changes

package/README.md

@@ -205,6 +205,54 @@ See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
 ---
 
+### Stacking icons
+
+Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says, and text is
+centred on the icon:
+
+```tsx
+<NtdSquare variant="solid">
+  <NtdStar stackAlign="center">1</NtdStar>
+</NtdSquare>
+
+<NtdFolder>
+  <NtdPlus stackAlign="top-right" />
+</NtdFolder>
+
+<NtdCircle>42</NtdCircle>
+
+<NtdBitcoin>
+  <NtdStar>
+    <NtdSparkle>1</NtdSparkle>
+  </NtdStar>
+</NtdBitcoin>
+```
+
+Stacks nest any number of levels deep, with the colours flipping at every level.
+
+- **`stackAlign`:** `center` (default), `top`, `bottom`, `left`, `right`, `top-left`,
+  `top-right`, `bottom-left`, `bottom-right`, plus each of them with `half-` (`half-top`,
+  `half-bottom-right`, …), halfway from the centre to that edge or corner.
+- **`stackSize`:** the child's share of its parent. Default `0.6` centred, `0.5` elsewhere.
+- **Colours** follow the parent unless the child sets its own:
+  - In the centre or at an edge, a filled parent cuts the content out. The child takes the
+    parent's accent and its text the parent's primary. On `outline` / `wireframe` everything stays
+    in primary.
+  - A corner badge keeps the parent's colours and sits on an accent-coloured gap.
+- **`stackRotation`:** turns a stacked icon about its own centre, in degrees clockwise. Its
+  contents and text turn with it.
+- **Text:** the default size is 9, 7.5, 6 or 5 in the 24-unit box (by length). `textColor` and
+  `textSize` override the text's colour and size.
+- **Data:** `NiceIconStack` draws a stack kept as data (NiceIconStacker's layers), its bound text
+  filled from `values`. This works with live numbers, for example
+  `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
+- **Builder:** `NiceIconStacker` builds a stack interactively and writes the JSX
+  (`niceIconStackCode`). Each icon you add goes into the selected layer, which is the newest one,
+  so adding nests deeper. Select an outer layer to put icons side by side. Text is the innermost
+  level.
+
+---
+
 ### Gradient Fills
 
 Apply gradient fills using the `gradient` prop with one of 12 built-in presets:

package/dist/cjs/NiceIconStacker.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
+var React = require('react');
+var actions = require('./icons/actions.js');
+var navigation = require('./icons/navigation.js');
+var iconStack = require('./iconStack.js');
+var stacking = require('./stacking.js');
+
+const ALIGNS = [
+    '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',
+];
+const PREVIEW_SIZES = [96, 48, 24];
+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. */
+function walk(layers) {
+    const out = [];
+    const visit = (layer, depth) => {
+        out.push({ layer, depth });
+        for (const child of iconStack.stackChildrenOf(layers, layer.id)) {
+            visit(child, depth + 1);
+        }
+    };
+    if (layers[0]) {
+        visit(layers[0], 0);
+    }
+    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 ? iconStack.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] = iconStack.stackChildrenOf(layers, base.id);
+    if (!heir) {
+        return [];
+    }
+    const newBase = {
+        ...heir,
+        parent: undefined,
+        align: undefined,
+        size: undefined,
+        rotation: 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 (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__color", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value ? (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) })) : (jsxRuntime.jsx("small", { className: "nice-icon-stacker__auto", children: autoLabel }))] }));
+}
+/**
+ * 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.
+ */
+const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className }, ref) {
+    var _a, _b, _c, _d;
+    const { t } = uiCore.useNiceTranslation();
+    const [layers, setLayers] = uiCore.useControllableState({
+        value: layersProp,
+        defaultValue: defaultLayers,
+        fallbackValue: NO_LAYERS,
+        onChange: onLayersChange,
+        componentName: 'NiceIconStacker',
+    });
+    const nextId = React.useRef(0);
+    const targetGroup = React.useId();
+    const [copied, setCopied] = React.useState(false);
+    // The layer the next icon goes into — the newest by default, so adding nests deeper.
+    const [selected, setSelected] = React.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 resolve = React.useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
+    const tree = React.useMemo(() => walk(layers), [layers]);
+    const code = React.useMemo(() => iconStack.niceIconStackCode(layers), [layers]);
+    const update = (id, patch) => setLayers((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
+    const add = () => {
+        if (!current) {
+            return;
+        }
+        nextId.current += 1;
+        const id = `${current.icon}-${Date.now().toString(36)}-${nextId.current}`;
+        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];
+        });
+        setSelected(id);
+    };
+    const remove = (id) => {
+        setLayers((prev) => removeLayer(prev, id));
+        if (selected === id) {
+            setSelected(undefined);
+        }
+    };
+    const clear = () => {
+        setLayers(NO_LAYERS);
+        setSelected(undefined);
+    };
+    React.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);
+        }));
+    };
+    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 (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), " ", addLabel] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [iconStack.renderIconStack(layers, icons, {
+                                    baseProps: { ...previewProps, size: s, title: base.icon },
+                                }), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.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;
+                            const Icon = resolve(l.icon);
+                            const isBase = l === base;
+                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
+                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : stacking.defaultStackSize(align);
+                            const innermost = iconStack.stackChildrenOf(layers, l.id).length === 0;
+                            const textSize = (_c = l.textSize) !== null && _c !== void 0 ? _c : stacking.defaultTextSize(((_d = l.text) !== null && _d !== void 0 ? _d : '').length || 1);
+                            const bindingInvalid = !!l.textBinding && !iconStack.isValidTextBinding(l.textBinding);
+                            const depthStyle = {
+                                ['--nice-icon-stacker-depth']: String(depth),
+                            };
+                            const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
+                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.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}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.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: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_g = l.text) !== null && _g !== void 0 ? _g : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), l.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) }))] }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_h = l.textBinding) !== null && _h !== void 0 ? _h : '', "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));
+                        }) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied
+                                        ? t('iconStacker.copied', 'Copied')
+                                        : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStacker.displayName = 'NiceIconStacker';
+}
+
+exports.niceIconStackCode = iconStack.niceIconStackCode;
+exports.NiceIconStacker = NiceIconStacker;

package/dist/cjs/client.js

@@ -2,6 +2,8 @@
 
 var animationControls = require('./animationControls.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
+var NiceIconStacker = require('./NiceIconStacker.js');
+var iconStack = require('./iconStack.js');
 var NtdIconMorph = require('./NtdIconMorph.js');
 var NtdIconBadge = require('./NtdIconBadge.js');
 var smilAnimations = require('./smilAnimations.js');
@@ -18,6 +20,11 @@ exports.createHoverAnimation = animationControls.createHoverAnimation;
 exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
 exports.useAnimationSequence = animationControls.useAnimationSequence;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
+exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
+exports.NiceIconStack = iconStack.NiceIconStack;
+exports.isValidTextBinding = iconStack.isValidTextBinding;
+exports.niceIconStackCode = iconStack.niceIconStackCode;
+exports.renderIconStack = iconStack.renderIconStack;
 exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
 exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
 exports.NtdPathMorph = NtdIconMorph.NtdPathMorph;

package/dist/cjs/createIcon.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sharpen = require('./sharpen.js');
 var smilAnimations = require('./smilAnimations.js');
+var stacking = require('./stacking.js');
 var types = require('./types.js');
 
 /* ── Dark mode detection hook ───────────────────────── */
@@ -27,6 +28,7 @@ function subscribeColorScheme(callback) {
 function useColorScheme() {
     return React.useSyncExternalStore(subscribeColorScheme, getColorScheme, () => 'light');
 }
+const BOX_CENTER = [12, 12];
 /**
  * Factory function that creates a React icon component from SVG path renderers.
  *
@@ -113,10 +115,12 @@ function renderCutoutShape(shape, fill, maskId) {
     }
 }
 function createIcon(options) {
-    const { displayName, viewBox = '0 0 24 24', paths } = options;
+    const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
     const Icon = React.forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 2, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
     // Transform props
-    rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', title, className, style, ...rest }, ref) => {
+    rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', 
+    // stacking (1.3.5): the parent icon reads a child's own align / size from its props
+    children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, textColor, textSize, title, className, style, ...rest }, ref) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const resolvedSize = typeof size === 'number' ? size : ((_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = React.useId();
@@ -225,7 +229,19 @@ function createIcon(options) {
                     : variant === 'wireframe'
                         ? sharpen.wireTree(renderer(renderProps), effectivePrimary)
                         : renderer(renderProps);
-        const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${sharpen.MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: rendered })) : (rendered);
+        // Children stacked in the icon (1.3.5) — drawn as they are, not re-drawn as the variant.
+        const stacked = stacking.renderStackChildren(children, {
+            variant,
+            primaryColor: effectivePrimary,
+            accentColor: resolvedAccent,
+            tileColor: gradient ? effectivePrimary : resolvedSecondary,
+            strokeWidth,
+            textCenter,
+            textColor,
+            textSize,
+        });
+        const drawn = stacked ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [rendered, stacked] })) : (rendered);
+        const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${sharpen.MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: drawn })) : (drawn);
         return (jsxRuntime.jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, className: classes, style: animStyle, role: title ? 'img' : 'presentation', "aria-hidden": title ? undefined : true, "aria-label": title, ...rest, children: [title && jsxRuntime.jsx("title", { children: title }), gradient && (jsxRuntime.jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) })), is3d && jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }), isCutout && (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: maskId, children: [jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
                                     ...renderProps,
                                     primaryColor: 'black',
@@ -238,6 +254,8 @@ function createIcon(options) {
                                 }) })] }) })), smilAnimation ? (needsSmilScaleWrapper ? (jsxRuntime.jsxs("g", { transform: `translate(${center.x}, ${center.y})`, filter: is3d ? `url(#${filterId})` : undefined, children: [jsxRuntime.jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }), smilAnimationElements] })) : (jsxRuntime.jsxs("g", { filter: is3d ? `url(#${filterId})` : undefined, children: [iconContent, smilAnimationElements] }))) : is3d ? (jsxRuntime.jsx("g", { filter: `url(#${filterId})`, children: iconContent })) : (iconContent)] }));
     });
     Icon.displayName = displayName;
+    // lets a parent icon tell this one among its children (stacking, 1.3.5)
+    Icon[stacking.NTD_ICON_MARK] = true;
     return Icon;
 }
 

package/dist/cjs/iconStack.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/** A name `textBinding` can take: a JavaScript identifier. */
+function isValidTextBinding(name) {
+    return !!name && /^[A-Za-z_$][\w$]*$/.test(name);
+}
+/** The id of the layer `layer` sits in, `undefined` for the base. */
+function stackParentId(layers, layer) {
+    var _a, _b;
+    return layer === layers[0] ? undefined : ((_a = layer.parent) !== null && _a !== void 0 ? _a : (_b = layers[0]) === null || _b === void 0 ? void 0 : _b.id);
+}
+/** The layers that sit directly in layer `id`, in order. */
+function stackChildrenOf(layers, id) {
+    return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
+}
+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) {
+    const base = layers[0];
+    if (!base) {
+        return '';
+    }
+    const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
+    const write = (layer, parent, indent) => {
+        var _a;
+        const attrs = [
+            parent ? `stackAlign="${(_a = layer.align) !== null && _a !== void 0 ? _a : 'center'}"` : '',
+            parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
+            parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
+            layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
+            ...COLOR_PROPS.map((p) => (layer[p] ? `${p}="${layer[p]}"` : '')),
+            layer.textSize !== undefined ? `textSize={${layer.textSize}}` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const open = `${layer.icon}${attrs ? ` ${attrs}` : ''}`;
+        const text = isValidTextBinding(layer.textBinding) ? `{${layer.textBinding}}` : layer.text;
+        const inner = stackChildrenOf(layers, layer.id);
+        if (inner.length === 0) {
+            return text ? `${indent}<${open}>${text}</${layer.icon}>` : `${indent}<${open} />`;
+        }
+        return [
+            `${indent}<${open}>`,
+            ...(text ? [`${indent}  ${text}`] : []),
+            ...inner.map((child) => write(child, layer, `${indent}  `)),
+            `${indent}</${layer.icon}>`,
+        ].join('\n');
+    };
+    const notes = bound.map((l) => `// {${l.textBinding}}: bound text${l.text ? `, e.g. "${l.text}"` : ''}`);
+    return [...notes, write(base, undefined, '')].join('\n');
+}
+/**
+ * The stack drawn as icons — the base wrapping the layers that sit in it, text innermost (1.3.6).
+ * One SVG, as nesting the icons by hand would give.
+ */
+function renderIconStack(layers, icons, { baseProps, values } = {}) {
+    const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
+    const draw = (layer, parent) => {
+        var _a, _b;
+        const Icon = resolve(layer.icon);
+        if (!Icon) {
+            return null;
+        }
+        const bound = isValidTextBinding(layer.textBinding) ? values === null || values === void 0 ? void 0 : values[layer.textBinding] : undefined;
+        const text = bound !== null && bound !== void 0 ? bound : layer.text;
+        const own = {
+            primaryColor: layer.primaryColor,
+            secondaryColor: layer.secondaryColor,
+            accentColor: layer.accentColor,
+            textColor: layer.textColor,
+            textSize: layer.textSize,
+        };
+        const inner = stackChildrenOf(layers, layer.id).map((child) => draw(child, layer));
+        if (!parent) {
+            const props = { ...baseProps };
+            for (const [k, v] of Object.entries(own)) {
+                if (v !== undefined) {
+                    props[k] = v;
+                }
+            }
+            return (React.createElement(Icon, { ...props, key: layer.id, variant: (_a = layer.variant) !== null && _a !== void 0 ? _a : baseProps === null || baseProps === void 0 ? void 0 : baseProps.variant },
+                inner,
+                text));
+        }
+        return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, variant: layer.variant !== parent.variant ? layer.variant : undefined },
+            inner,
+            text));
+    };
+    return layers[0] ? draw(layers[0], undefined) : null;
+}
+/**
+ * NiceIconStack (1.3.6) — draws a stack kept as data (NiceIconStacker's layers) as one icon, its
+ * bound text filled from `values`: `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
+ * The rest of the props go to the base icon.
+ */
+function NiceIconStack({ layers, icons, values, ...baseProps }) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderIconStack(layers, icons, { baseProps, values }) });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStack.displayName = 'NiceIconStack';
+}
+
+exports.NiceIconStack = NiceIconStack;
+exports.isValidTextBinding = isValidTextBinding;
+exports.niceIconStackCode = niceIconStackCode;
+exports.renderIconStack = renderIconStack;
+exports.stackChildrenOf = stackChildrenOf;
+exports.stackParentId = stackParentId;

package/dist/cjs/icons/actions.js

@@ -121,13 +121,34 @@ const NtdShare = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor, strokeWidth }) => shareFilled(primaryColor, secondaryColor, strokeWidth),
     },
 });
+// NtdCopy: the front sheet at the top right (it was at the bottom right), the back one showing at
+// the bottom left as a line that stops 1 short of the front — closer than before. The gap is
+// worked out from the stroke width, so it stays the same at any weight; `sharp` draws the back
+// sheet with square corners (the derived one kept their arcs). Duotone, fills only: the back sheet
+// secondary under the primary front one; vivid: the back line secondary.
+const COPY_FRONT = { x: 8.5, y: 3, width: 12.5, height: 12.5, rx: 2.5 };
+const COPY_BACK = { x: 3, y: 8.5, width: 12.5, height: 12.5, rx: 2.5 };
+/** What shows of the back sheet: its edges outside the front one, `gap` short of it. */
+function copyBack(gap, square = false) {
+    const top = COPY_FRONT.x - gap;
+    const right = COPY_FRONT.y + COPY_FRONT.height + gap;
+    return square
+        ? `M${top} 8.5H3V21h12.5V${right}`
+        : `M${top} 8.5H5.5a2.5 2.5 0 00-2.5 2.5v7.5a2.5 2.5 0 002.5 2.5h7.5a2.5 2.5 0 002.5-2.5V${right}`;
+}
+/** The front sheet filled and the back one as a line 1 short of it (past its round cap). */
+function copyFilled(front, back, strokeWidth, square = false) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_FRONT, fill: front }), jsxRuntime.jsx("path", { d: copyBack(1 + strokeWidth / 2, square), stroke: back, strokeWidth: strokeWidth, fill: "none" })] }));
+}
 const NtdCopy = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdCopy',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "13", height: "13", rx: "2.5", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: secondaryColor, strokeWidth: "1.8" })] })),
+        solid: ({ primaryColor, strokeWidth }) => copyFilled(primaryColor, primaryColor, strokeWidth),
+        sharp: ({ primaryColor, strokeWidth }) => copyFilled(primaryColor, primaryColor, strokeWidth, true),
+        // both sheets stroked: the back line stops 1 short of the front sheet's line
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_FRONT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: copyBack(1 + strokeWidth), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_BACK, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...COPY_FRONT, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => copyFilled(primaryColor, secondaryColor, strokeWidth),
     },
 });
 /** NtdClipboard's two lines of text, high on the board (they sat below its middle). */

package/dist/cjs/icons/ai.js

@@ -132,6 +132,8 @@ const NtdSparkle = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z", fill: "white", opacity: "0.1" })] })),
     },
 });
+/** @deprecated The same four-pointed star as {@link NtdSparkle} — use that. */
+const NtdStar4 = NtdSparkle;
 const NtdMagicWand = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdMagicWand',
     paths: {
@@ -184,6 +186,7 @@ exports.NtdNeuralNetwork = NtdNeuralNetwork;
 exports.NtdPrompt = NtdPrompt;
 exports.NtdRobot = NtdRobot;
 exports.NtdSparkle = NtdSparkle;
+exports.NtdStar4 = NtdStar4;
 exports.NtdTensor = NtdTensor;
 exports.NtdTraining = NtdTraining;
 exports.NtdVoiceAssistant = NtdVoiceAssistant;