@nice2dev/icons 1.3.9 → 1.3.10

package/dist/esm/iconHtml.js

@@ -1,6 +1,3 @@
-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
@@ -99,19 +96,5 @@ function scopeIconHtmlIds(markup) {
     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 };
+export { iconHtmlAttributes, parseIconHtml, scopeIconHtmlIds };

package/dist/esm/iconStack.js

@@ -125,7 +125,9 @@ function niceIconStackCode(layers) {
  * 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 lookup = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
+    // a stack kept as text names its icons without `Ntd` (1.3.10)
+    const resolve = (name) => { var _a; return (_a = lookup(name)) !== null && _a !== void 0 ? _a : lookup(`Ntd${name}`); };
     const draw = (layer, parent) => {
         var _a;
         const Icon = resolve(layer.icon);

package/dist/esm/iconValue.js

@@ -0,0 +1,470 @@
+import { parseIconHtml } from './iconHtml.js';
+import { iconDisplayName, stackChildrenOf } from './iconStack.js';
+
+/**
+ * An icon — or a stack of icons — kept as short text (1.3.10): what NiceIconPicker stores with
+ * `valueFormat="name"` (the default) or `"json"`, as short as a database value can be and still be
+ * read by people.
+ *
+ * **The code** (`'name'`) — a plain icon is its name (`NtdFolder`); a stack nests like a function
+ * call, the parent first, each setting behind a sign of its own:
+ *
+ * ```
+ * Folder(Star@tr)                        a star in the folder's top-right corner
+ * Bell(Circle@tr'3')                     a circle with "3" in the bell's corner
+ * Folder(Star@tr%40^15,Lock@bl)          two icons in the folder: 40 %, turned 15°; a lock
+ * User:o(Circle@br#2a2{count}'5'#fff)    an outline user, a green circle bound to `count`
+ * ```
+ *
+ * | sign | meaning | example |
+ * |---|---|---|
+ * | `( , )` | what sits in the icon, side by side | `Folder(Star,Lock)` |
+ * | `:` | variant — `so` solid, `sh` sharp, `o` outline, `w` wireframe, `d` duotone, `c` cutout, `r` rounded, `m` mini, `3d`, `v` vivid | `:o` |
+ * | `@` | position in the parent — `c t b l r tl tr bl br`, `h…` halfway (`ht`, `hbr`…); the parent's own spot when absent | `@tr` |
+ * | `%` | size, percent of the parent | `%40` |
+ * | `^` | turn, degrees clockwise | `^-30` |
+ * | `~` | nudge right / down, percent of the parent | `~5/-3` |
+ * | `#` | colours: primary, secondary, accent (`##0f0` — secondary only) | `#2a2` |
+ * | `'…'` | text; `#` and `%` after it are the text's colour and size | `'3'#fff%60` |
+ * | `{…}` | the value the text is bound to (the text after it is a sample) | `{count}'5'` |
+ *
+ * Names drop `Ntd` inside a stack. A name or colour holding any of the signs goes in backticks
+ * (`` `fa:home` ``); `\` escapes inside quotes.
+ *
+ * **JSON** (`'json'`) — the same tree as JsonML: `["Folder",["Star",{"a":"tr"}]]`, a node being
+ * `[name, {settings}?, ...nodes, "text"?]` with the settings `v a s r x y p sc ac b tc ts` written
+ * as in the code; a plain icon is its name as a JSON string.
+ */
+const VARIANT_CODE = {
+    solid: 'so',
+    sharp: 'sh',
+    outline: 'o',
+    wireframe: 'w',
+    duotone: 'd',
+    cutout: 'c',
+    rounded: 'r',
+    mini: 'm',
+    '3d': '3d',
+    vivid: 'v',
+};
+const ALIGN_CODE = {
+    center: 'c',
+    top: 't',
+    bottom: 'b',
+    left: 'l',
+    right: 'r',
+    'top-left': 'tl',
+    'top-right': 'tr',
+    'bottom-left': 'bl',
+    'bottom-right': 'br',
+    'half-top': 'ht',
+    'half-bottom': 'hb',
+    'half-left': 'hl',
+    'half-right': 'hr',
+    'half-top-left': 'htl',
+    'half-top-right': 'htr',
+    'half-bottom-left': 'hbl',
+    'half-bottom-right': 'hbr',
+};
+/** A code or a full name → the value; an unknown one (a newer writer's) reads as unset. */
+function reverse(codes) {
+    const map = new Map();
+    for (const [full, code] of Object.entries(codes)) {
+        map.set(code, full);
+        map.set(full, full);
+    }
+    return map;
+}
+const VARIANTS = reverse(VARIANT_CODE);
+const ALIGNS = reverse({ ...ALIGN_CODE, perfect: 'p' });
+/** The signs of the code; a name or colour holding one of them goes in backticks. */
+const SIGNS = new Set(['(', ')', ',', ':', '@', '%', '^', '~', '#', "'", '{', '}', '`', '\\']);
+/** A plain icon: one layer and nothing set on it but its name. */
+function isPlain(layers) {
+    return (layers.length === 1 &&
+        Object.entries(layers[0]).every(([key, value]) => key === 'id' || key === 'icon' || value === undefined));
+}
+function quote(text, mark) {
+    return mark + text.replace(/[\\`']/g, (c) => (c === mark || c === '\\' ? `\\${c}` : c)) + mark;
+}
+function writeName(name) {
+    const needsQuotes = name === '' ||
+        name !== name.trim() ||
+        [...name].some((c) => SIGNS.has(c)) ||
+        /^["[<]/.test(name);
+    return needsQuotes ? quote(name, '`') : name;
+}
+function writeNumber(n) {
+    return String(Math.round(n * 1000) / 1000);
+}
+/** `#22aa22` → `2a2`, any other hex as is; another colour (`var(--x)`) in backticks. */
+function writeColor(color) {
+    if (!color) {
+        return '';
+    }
+    const hex = /^#([0-9a-f]{3,8})$/i.exec(color);
+    if (!hex) {
+        return quote(color, '`');
+    }
+    const h = hex[1].toLowerCase();
+    return h.length === 6 && h[0] === h[1] && h[2] === h[3] && h[4] === h[5] ? h[0] + h[2] + h[4] : h;
+}
+function writeCode(layers, shortName) {
+    const write = (layer, isBase) => {
+        var _a, _b, _c, _d;
+        let out = writeName(shortName(layer.icon));
+        if (layer.variant) {
+            out += `:${(_a = VARIANT_CODE[layer.variant]) !== null && _a !== void 0 ? _a : layer.variant}`;
+        }
+        if (!isBase) {
+            if (layer.align && layer.align !== 'perfect') {
+                out += `@${(_b = ALIGN_CODE[layer.align]) !== null && _b !== void 0 ? _b : layer.align}`;
+            }
+            if (layer.size !== undefined) {
+                out += `%${writeNumber(layer.size * 100)}`;
+            }
+            if (layer.rotation !== undefined) {
+                out += `^${writeNumber(layer.rotation)}`;
+            }
+            if (layer.offsetX || layer.offsetY) {
+                out += `~${writeNumber((_c = layer.offsetX) !== null && _c !== void 0 ? _c : 0)}`;
+                if (layer.offsetY) {
+                    out += `/${writeNumber(layer.offsetY)}`;
+                }
+            }
+        }
+        const colors = [layer.primaryColor, layer.secondaryColor, layer.accentColor];
+        const lastColor = colors.reduce((last, c, i) => (c ? i : last), -1);
+        for (let i = 0; i <= lastColor; i++) {
+            out += `#${writeColor(colors[i])}`;
+        }
+        const bound = !!layer.textBinding && /^[A-Za-z_$][\w$]*$/.test(layer.textBinding);
+        if (bound) {
+            out += `{${layer.textBinding}}`;
+        }
+        // text settings need a text part to follow; an empty text carries them
+        if (layer.text || (!bound && (layer.textColor || layer.textSize !== undefined))) {
+            out += quote((_d = layer.text) !== null && _d !== void 0 ? _d : '', "'");
+        }
+        if (layer.textColor) {
+            out += `#${writeColor(layer.textColor)}`;
+        }
+        if (layer.textSize !== undefined) {
+            out += `%${writeNumber(layer.textSize)}`;
+        }
+        const inner = stackChildrenOf(layers, layer.id);
+        return inner.length > 0 ? `${out}(${inner.map((l) => write(l, false)).join(',')})` : out;
+    };
+    return write(layers[0], true);
+}
+function writeJson(layers, shortName) {
+    const write = (layer, isBase) => {
+        var _a, _b;
+        const s = {};
+        const set = (key, value) => {
+            if (value !== undefined && value !== '' && value !== 0) {
+                s[key] = value;
+            }
+        };
+        set('v', layer.variant && ((_a = VARIANT_CODE[layer.variant]) !== null && _a !== void 0 ? _a : layer.variant));
+        if (!isBase) {
+            if (layer.align && layer.align !== 'perfect') {
+                set('a', (_b = ALIGN_CODE[layer.align]) !== null && _b !== void 0 ? _b : layer.align);
+            }
+            if (layer.size !== undefined) {
+                s.s = Math.round(layer.size * 100000) / 1000;
+            }
+            if (layer.rotation !== undefined) {
+                s.r = layer.rotation;
+            }
+            set('x', layer.offsetX);
+            set('y', layer.offsetY);
+        }
+        set('p', layer.primaryColor);
+        set('sc', layer.secondaryColor);
+        set('ac', layer.accentColor);
+        set('b', layer.textBinding);
+        set('tc', layer.textColor);
+        if (layer.textSize !== undefined) {
+            s.ts = layer.textSize;
+        }
+        const node = [shortName(layer.icon)];
+        if (Object.keys(s).length > 0) {
+            node.push(s);
+        }
+        for (const child of stackChildrenOf(layers, layer.id)) {
+            node.push(write(child, false));
+        }
+        if (layer.text) {
+            node.push(layer.text);
+        }
+        return node;
+    };
+    return write(layers[0], true);
+}
+/**
+ * Writes an icon or a stack as short text (1.3.10): `'name'` — a plain icon's name, a stack's code
+ * (`Folder(Star@tr)`) — or `'json'` (`["Folder",["Star",{"a":"tr"}]]`). Empty for no layers.
+ * `parseIconValue` reads it back; the ids of the layers are not kept.
+ */
+function formatIconValue(layers, format = 'name', { shortName = iconDisplayName } = {}) {
+    if (layers.length === 0) {
+        return '';
+    }
+    if (isPlain(layers)) {
+        return format === 'json' ? JSON.stringify(layers[0].icon) : layers[0].icon;
+    }
+    return format === 'json'
+        ? JSON.stringify(writeJson(layers, shortName))
+        : writeCode(layers, shortName);
+}
+/* ─── Reading ─── */
+class IconValueError extends Error {
+}
+/** Collects the layers in document order, ids `'1'`, `'2'`…; what sits in the base has no parent. */
+class LayerSink {
+    constructor() {
+        this.layers = [];
+    }
+    add(layer, parent, isBase) {
+        const data = isBase
+            ? // where a layer sits means nothing for the base
+                { ...layer, align: undefined, size: undefined, rotation: undefined }
+            : layer;
+        if (isBase || !data.offsetX) {
+            data.offsetX = undefined;
+        }
+        if (isBase || !data.offsetY) {
+            data.offsetY = undefined;
+        }
+        if (data.align === 'perfect') {
+            data.align = undefined;
+        }
+        const id = String(this.layers.length + 1);
+        const clean = Object.fromEntries(Object.entries(data).filter(([, v]) => v !== undefined && v !== ''));
+        this.layers.push({ id, ...clean, ...(parent && parent !== '1' ? { parent } : {}) });
+        return id;
+    }
+}
+function readCode(code) {
+    const sink = new LayerSink();
+    let i = 0;
+    const peek = () => code[i];
+    const skipSpaces = () => {
+        while (i < code.length && /\s/.test(code[i])) {
+            i++;
+        }
+    };
+    const quoted = (mark) => {
+        i++;
+        let out = '';
+        while (i < code.length && code[i] !== mark) {
+            if (code[i] === '\\' && i + 1 < code.length) {
+                i++;
+            }
+            out += code[i];
+            i++;
+        }
+        if (code[i] !== mark) {
+            throw new IconValueError('unclosed quote');
+        }
+        i++;
+        return out;
+    };
+    const name = () => {
+        skipSpaces();
+        if (peek() === '`') {
+            return quoted('`');
+        }
+        const start = i;
+        while (i < code.length && !SIGNS.has(code[i])) {
+            i++;
+        }
+        const out = code.slice(start, i).trim();
+        if (!out) {
+            throw new IconValueError('name expected');
+        }
+        return out;
+    };
+    const word = () => {
+        var _a, _b;
+        const hit = (_b = (_a = /^[A-Za-z0-9-]*/.exec(code.slice(i))) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+        i += hit.length;
+        return hit;
+    };
+    const number = () => {
+        var _a;
+        const hit = (_a = /^-?(?:\d+(?:\.\d*)?|\.\d+)/.exec(code.slice(i))) === null || _a === void 0 ? void 0 : _a[0];
+        if (!hit) {
+            throw new IconValueError('number expected');
+        }
+        i += hit.length;
+        return Number(hit);
+    };
+    const color = () => {
+        var _a, _b;
+        if (peek() === '`') {
+            return quoted('`');
+        }
+        const hit = (_b = (_a = /^[0-9a-fA-F]{0,8}/.exec(code.slice(i))) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+        i += hit.length;
+        return hit ? `#${hit.toLowerCase()}` : undefined;
+    };
+    const node = (parent, isBase) => {
+        const layer = { icon: name() };
+        const colors = [];
+        let settings = true;
+        while (settings) {
+            const sign = peek();
+            if (sign === ':' ||
+                sign === '@' ||
+                sign === '%' ||
+                sign === '^' ||
+                sign === '~' ||
+                sign === '#') {
+                i++;
+            }
+            if (sign === ':') {
+                layer.variant = VARIANTS.get(word());
+            }
+            else if (sign === '@') {
+                layer.align = ALIGNS.get(word());
+            }
+            else if (sign === '%') {
+                layer.size = Math.round(number() * 1000) / 100000;
+            }
+            else if (sign === '^') {
+                layer.rotation = number();
+            }
+            else if (sign === '~') {
+                layer.offsetX = number();
+                if (peek() === '/') {
+                    i++;
+                    layer.offsetY = number();
+                }
+            }
+            else if (sign === '#') {
+                colors.push(color());
+            }
+            else {
+                settings = false;
+            }
+        }
+        [layer.primaryColor, layer.secondaryColor, layer.accentColor] = colors;
+        if (peek() === '{') {
+            const end = code.indexOf('}', i);
+            if (end < 0) {
+                throw new IconValueError('unclosed binding');
+            }
+            layer.textBinding = code.slice(i + 1, end).trim();
+            i = end + 1;
+        }
+        if (peek() === "'") {
+            layer.text = quoted("'");
+        }
+        if (layer.text !== undefined || layer.textBinding) {
+            for (let sign = peek(); sign === '#' || sign === '%'; sign = peek()) {
+                i++;
+                if (sign === '#') {
+                    layer.textColor = color();
+                }
+                else {
+                    layer.textSize = number();
+                }
+            }
+        }
+        const id = sink.add(layer, parent, isBase);
+        skipSpaces();
+        if (peek() === '(') {
+            i++;
+            let more = true;
+            while (more) {
+                node(id, false);
+                skipSpaces();
+                more = peek() === ',';
+                if (more) {
+                    i++;
+                }
+            }
+            if (peek() !== ')') {
+                throw new IconValueError(') expected');
+            }
+            i++;
+            skipSpaces();
+        }
+    };
+    node(undefined, true);
+    if (i < code.length) {
+        throw new IconValueError('unexpected text');
+    }
+    return sink.layers;
+}
+function readJson(json) {
+    const parsed = JSON.parse(json);
+    if (typeof parsed === 'string') {
+        return parsed.trim() ? [{ id: '1', icon: parsed }] : null;
+    }
+    const sink = new LayerSink();
+    const str = (v) => (typeof v === 'string' ? v : undefined);
+    const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : undefined);
+    const node = (value, parent, isBase) => {
+        var _a, _b;
+        if (!Array.isArray(value) || typeof value[0] !== 'string' || !value[0]) {
+            throw new IconValueError('node expected');
+        }
+        const [icon, ...rest] = value;
+        const first = rest[0];
+        const s = (first && typeof first === 'object' && !Array.isArray(first) ? rest.shift() : {});
+        const text = rest.filter((v) => typeof v === 'string').join('');
+        const size = num(s.s);
+        const id = sink.add({
+            icon,
+            variant: VARIANTS.get((_a = str(s.v)) !== null && _a !== void 0 ? _a : ''),
+            align: ALIGNS.get((_b = str(s.a)) !== null && _b !== void 0 ? _b : ''),
+            size: size === undefined ? undefined : Math.round(size * 1000) / 100000,
+            rotation: num(s.r),
+            offsetX: num(s.x),
+            offsetY: num(s.y),
+            primaryColor: str(s.p),
+            secondaryColor: str(s.sc),
+            accentColor: str(s.ac),
+            text: text || undefined,
+            textBinding: str(s.b),
+            textColor: str(s.tc),
+            textSize: num(s.ts),
+        }, parent, isBase);
+        for (const child of rest) {
+            if (Array.isArray(child)) {
+                node(child, id, false);
+            }
+        }
+    };
+    node(parsed, undefined, true);
+    return sink.layers;
+}
+/**
+ * Reads an icon kept as text (1.3.10) — a name, the code (`Folder(Star@tr)`), JSON or the HTML of
+ * NiceIconPicker 1.3.9 — into stack layers (ids `'1'`, `'2'`… in document order). `null` for empty
+ * or unreadable text. Names stay as written: `renderIconStack` resolves `Star` to `NtdStar`.
+ */
+function parseIconValue(value) {
+    var _a, _b;
+    const text = value === null || value === void 0 ? void 0 : value.trim();
+    if (!text) {
+        return null;
+    }
+    try {
+        if (text.startsWith('<')) {
+            return (_b = (_a = parseIconHtml(text)) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : null;
+        }
+        if (text.startsWith('[') || text.startsWith('"')) {
+            return readJson(text);
+        }
+        return readCode(text);
+    }
+    catch (_c) {
+        return null;
+    }
+}
+
+export { formatIconValue, parseIconValue };

package/dist/esm/icons/actions.js

@@ -129,16 +129,19 @@ const NtdShare = /* @__PURE__ */ createIcon({
 // 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.
+// secondary under the primary front one; vivid: the back line secondary. Round 40: the back sheet
+// smaller, 11 (was 12.5), kept in the bottom-left corner.
 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 };
+const COPY_BACK = { x: 3, y: 10, width: 11, height: 11, 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 { x, y, width, height, rx } = COPY_BACK;
     const top = COPY_FRONT.x - gap;
     const right = COPY_FRONT.y + COPY_FRONT.height + gap;
+    const arc = `a${rx} ${rx} 0 00`;
     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}`;
+        ? `M${top} ${y}H${x}V${y + height}H${x + width}V${right}`
+        : `M${top} ${y}H${x + rx}${arc}-${rx} ${rx}V${y + height - rx}${arc}${rx} ${rx}H${x + width - rx}${arc}${rx}-${rx}V${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) {
@@ -342,15 +345,42 @@ const NtdUnlock = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: secondaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: "#3B82F6" }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: "white", strokeWidth: "1" })] })),
     },
 });
+// The selection frame of four corners, shared by NtdFrameCorners and NtdGroup (round 40: the user
+// asked for the frame as an icon of its own). A frame glyph: twice the stroke width in every variant
+// but `outline`, mitred corners.
+/** The top-left and bottom-right corners. */
+const FRAME_CORNERS_MAIN = 'M3 7V3h4M21 17v4h-4';
+/** The top-right and bottom-left corners. */
+const FRAME_CORNERS_OTHER = 'M17 3h4v4M7 21H3v-4';
+function frameCorners(main, other, width) {
+    return main === other ? (jsx("path", { d: `${FRAME_CORNERS_MAIN}${FRAME_CORNERS_OTHER}`, stroke: main, strokeWidth: width, strokeLinejoin: "miter", fill: "none" })) : (jsxs(Fragment, { children: [jsx("path", { d: FRAME_CORNERS_MAIN, stroke: main, strokeWidth: width, strokeLinejoin: "miter", fill: "none" }), jsx("path", { d: FRAME_CORNERS_OTHER, stroke: other, strokeWidth: width, strokeLinejoin: "miter", fill: "none" })] }));
+}
+// Duotone and vivid: two opposite corners primary, the other two secondary.
+const NtdFrameCorners = /* @__PURE__ */ createIcon({
+    displayName: 'NtdFrameCorners',
+    paths: {
+        solid: ({ primaryColor, strokeWidth }) => frameCorners(primaryColor, primaryColor, strokeWidth * 2),
+        outline: ({ primaryColor, strokeWidth }) => frameCorners(primaryColor, primaryColor, strokeWidth),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => frameCorners(primaryColor, secondaryColor, strokeWidth * 2),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => frameCorners(primaryColor, secondaryColor, strokeWidth * 2),
+    },
+});
 // Group / ungroup selected objects (1.2.2: the diagram toolbar drew them as ⊞ / ⊟).
 // Group: two objects inside the corners of one selection frame; ungroup: the two apart.
+// Round 40: the frame is NtdFrameCorners' (2× the stroke width; the solid one was 1×, vivid's a
+// fixed 2.2). Duotone, fills and the frame: the frame and the top-left object primary, the other
+// object secondary; vivid puts the frame in the accent colour.
+const GROUP_OBJECTS = ['M7 7h5v5H7z', 'M12 12h5v5h-5z'];
+function groupFilled(frame, first, second, strokeWidth, frameOpacity) {
+    return (jsxs(Fragment, { children: [jsx("g", { opacity: frameOpacity, children: frameCorners(frame, frame, strokeWidth * 2) }), jsx("path", { d: GROUP_OBJECTS[0], fill: first }), jsx("path", { d: GROUP_OBJECTS[1], fill: second })] }));
+}
 const NtdGroup = /* @__PURE__ */ createIcon({
     displayName: 'NtdGroup',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => groupFilled(primaryColor, primaryColor, primaryColor, strokeWidth),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [frameCorners(primaryColor, primaryColor, strokeWidth), jsx("path", { d: GROUP_OBJECTS.join(''), stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => groupFilled(primaryColor, primaryColor, secondaryColor, strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => groupFilled(accentColor, primaryColor, secondaryColor, strokeWidth, accentOpacity),
     },
 });
 const NtdUngroup = /* @__PURE__ */ createIcon({
@@ -363,4 +393,4 @@ const NtdUngroup = /* @__PURE__ */ createIcon({
     },
 });
 
-export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut };
+export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdFrameCorners, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut };

package/dist/esm/icons/files.js

@@ -375,12 +375,33 @@ const NtdTarget = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: "white", opacity: "0.1" }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
+// NtdTruck, round 40: the filled variants all primary (the cab was a lighter primary with a stroke
+// that also pushed its bottom 0.5 below the box's). The box and the cab are one shape, level at the
+// bottom above the wheels — two shapes of one colour show a seam, and the box's rounded corner left
+// a notch where it met the cab. Duotone and vivid on the theme's colours (vivid had fixed blue and
+// amber wheels): the box primary, the cab secondary; the wheels primary with a ring — secondary in
+// duotone, the accent in vivid, as in solid.
+const TRUCK_BODY = 'M2 3h13a1 1 0 011 1v4h4l3 3v5H2a1 1 0 01-1-1V4a1 1 0 011-1z';
+/** The body with `rounded`'s corners — the derived variant cannot round a path. */
+const TRUCK_BODY_ROUNDED = 'M4 3h9a3 3 0 013 3v2h4l3 3v3a2 2 0 01-2 2H4a3 3 0 01-3-3V6a3 3 0 013-3z';
+/** Duotone and vivid: the box, square where the cab covers it, and the cab 0.5 over it. */
+const TRUCK_BOX = 'M2 3h13a1 1 0 011 1v12H2a1 1 0 01-1-1V4a1 1 0 011-1z';
+const TRUCK_CAB = 'M15.5 8H20l3 3v5h-7.5z';
+const TRUCK_WHEELS = [5.5, 18.5];
+function truckWheels(fill, ring, opacity) {
+    return TRUCK_WHEELS.map((cx) => (jsx("circle", { cx: cx, cy: "18.5", r: "2.5", fill: fill, stroke: ring, strokeWidth: "1.5", opacity: opacity }, cx)));
+}
+function truckSolid(body, { primaryColor, accentColor, accentOpacity }) {
+    return (jsxs(Fragment, { children: [jsx("path", { d: body, fill: primaryColor }), truckWheels(primaryColor, accentColor, accentOpacity)] }));
+}
 const NtdTruck = /* @__PURE__ */ createIcon({
     displayName: 'NtdTruck',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: primaryColor }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: primaryColor, opacity: "0.7", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        solid: (props) => truckSolid(TRUCK_BODY, props),
+        rounded: (props) => truckSolid(TRUCK_BODY_ROUNDED, props),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 3h15v13H1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: primaryColor }), jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: "white", opacity: "0.08" }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: secondaryColor, opacity: "0.7", stroke: secondaryColor, strokeWidth: "2" }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: "#3B82F6", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: "#F59E0B", stroke: "#F59E0B", strokeWidth: "1.5" })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: TRUCK_BOX, fill: primaryColor }), jsx("path", { d: TRUCK_CAB, fill: secondaryColor, opacity: secondaryOpacity }), truckWheels(primaryColor, secondaryColor)] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: TRUCK_BOX, fill: primaryColor }), jsx("path", { d: TRUCK_CAB, fill: secondaryColor }), truckWheels(primaryColor, accentColor, accentOpacity)] })),
     },
 });