@nice2dev/icons 1.3.9 → 1.3.10

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.10
+
+### Patch Changes
+
+- c694c87: **NiceIconPicker: a stack in every value format, stored as short code by default.**
+
+  `stackable` no longer needs HTML. With the default `valueFormat="name"` a plain icon stays its export
+  name (`NtdFolder`, as before), and a stack becomes short code. A folder with a star in its corner is
+  `Folder(Star@tr)`: 15 characters, against close to 1 kB as HTML.
+
+  The code nests like a function call, parent first, and gives each setting a sign of its own:
+
+  - `( , )`: what sits in the icon;
+  - `:o`: variant;
+  - `@tr`: position (`c t b l r`, corners, `h…` halfway);
+  - `%40`: size;
+  - `^15`: turn;
+  - `~5/-3`: nudge;
+  - `#2a2`: colours;
+  - `'3'`: text, with its own colour and size after it;
+  - `{count}`: bound text.
+
+  Names drop `Ntd`; a name or colour with one of the signs goes in backticks.
+
+  - **`valueFormat="json"`:** the same tree as JsonML, `["Folder",["Star",{"a":"tr"}]]`.
+    `valueFormat="html"` stays as in 1.3.9.
+  - **Every format is read, whatever the picker writes:** names, code, JSON and the HTML of 1.3.9.
+    Changing the format later breaks no stored value.
+  - **New:**
+    - `formatIconValue(layers, 'name' | 'json')` and `parseIconValue(text)`, outside React;
+    - `NiceIconValue`, which draws a stored value in any format and never injects markup.
+  - **`NiceIconHtml`** is now a deprecated wrapper of `NiceIconValue`.
+  - **`renderIconStack` / `NiceIconStack`** resolve a name without `Ntd` (`Star` → `NtdStar`).
+
+  Behaviour change: `stackable` without `valueFormat` used to write HTML (1.3.9) and now writes the
+  code. Pass `valueFormat="html"` to keep HTML. Values stored as HTML are still read; the next change
+  writes the picker's format.
+
+- 4409530: Icons, showcase feedback round 40:
+
+  - **NtdFrameCorners** (new): the four-corner selection frame, shared with NtdGroup.
+  - NtdGroup: the frame is 2× the stroke width in the filled variants. Duotone shows the frame and
+    the top-left object in primary and the other object in secondary; vivid puts the frame in the
+    accent colour.
+  - NtdShuffle: redrawn as two S-curves, 2× the stroke width except in `outline`. The arrow
+    underneath breaks where the arrows cross, and the gap is worked out from the stroke width.
+  - NtdTruck: the filled variants are all primary. The box and the cab are one shape, level at
+    the bottom. Duotone and vivid now use the theme's colours (vivid had fixed blue and amber
+    wheels).
+  - NtdBitcoin: the ₿ alone, without the disc, 1.5× the stroke width.
+  - NtdBluetooth: 1.5× the stroke width except in `outline` (vivid had a fixed 2.2).
+  - NtdCopy: the back sheet is smaller; NtdApartment: the building and the door are narrower.
+
 ## 1.3.9
 
 ### Patch Changes

package/dist/cjs/NiceIconPicker.js

@@ -10,6 +10,7 @@ var media = require('./icons/media.js');
 var navigation = require('./icons/navigation.js');
 var ui = require('./icons/ui.js');
 var iconStack = require('./iconStack.js');
+var iconValue = require('./iconValue.js');
 var NiceIconStacker = require('./NiceIconStacker.js');
 
 const MAX_HISTORY_ITEMS = 20;
@@ -73,8 +74,8 @@ function saveToStorage(key, value) {
  * A fully-featured icon picker dropdown component.
  *
  * Provides a trigger button that opens a searchable, categorized icon grid. The value binds both
- * ways — `value` / `defaultValue` + `onChange` (1.3.9) — as the icon's export name or, with
- * `valueFormat="html"`, as the icon drawn in HTML, ready to store. With `stackable` the panel gets
+ * ways — `value` / `defaultValue` + `onChange` (1.3.9) — as the icon's export name, a stack as
+ * short code (`Folder(Star@tr)`), JSON or HTML (`valueFormat`). With `stackable` the panel gets
  * an "Overlays" tab where icons are stacked on the chosen one. Names show without `Ntd`; the
  * trigger shows the icon alone or the icon and its name (`displayMode`). Keyboard: arrows in the
  * grid, Escape to close.
@@ -87,7 +88,7 @@ function saveToStorage(key, value) {
  * import { NiceIconPicker } from '@nice2dev/icons';
  *
  * function IconField({ icons, value, onChange }) {
- *   // stores `<svg data-ntd-icon="NtdStar" …>…</svg>`, a stack included
+ *   // stores `NtdFolder`, or `Folder(Star@tr)` with a star stacked in its corner
  *   return <NiceIconPicker icons={icons} value={value} onChange={onChange} stackable />;
  * }
  * ```
@@ -106,8 +107,8 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
     const [view, setView] = React.useState('icons');
     const [picking, setPicking] = React.useState(null);
     const panelId = React.useId();
-    const valueFormat = valueFormatProp !== null && valueFormatProp !== void 0 ? valueFormatProp : (stackable ? 'html' : 'name');
-    const canStack = stackable && !multiSelect && valueFormat === 'html';
+    const valueFormat = valueFormatProp !== null && valueFormatProp !== void 0 ? valueFormatProp : 'name';
+    const canStack = stackable && !multiSelect;
     const drawProps = React.useMemo(() => ({ accentColor: PAGE_ACCENT, ...iconProps, variant }), [iconProps, variant]);
     // Virtualization state
     const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: virtualizedItemCount });
@@ -143,41 +144,61 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
     }, [entryOf]);
     const resolve = React.useCallback((n) => { var _a; return (_a = entryOf(n)) === null || _a === void 0 ? void 0 : _a.Component; }, [entryOf]);
     /* ─── The single value as a stack — a plain icon is a stack of one ─── */
+    // The last value emitted with its layers: read back, the text would number the layers anew
+    // (it keeps no ids) and the stacker would lose the layer it has selected.
+    const [emitted, setEmitted] = React.useState(null);
     const model = React.useMemo(() => {
         if (!value) {
             return NO_LAYERS;
         }
-        const source = iconHtml.parseIconHtml(value);
-        if (source) {
-            return source.layers;
+        if ((emitted === null || emitted === void 0 ? void 0 : emitted.value) === value) {
+            return emitted.layers;
         }
-        const entry = value.includes('<') ? undefined : entryOf(value);
-        return entry ? [{ id: '1', icon: entry.name }] : NO_LAYERS;
-    }, [value, entryOf]);
+        // a name as is first: an older value may hold one of the code's signs
+        const exact = value.includes('<') ? undefined : entryOf(value);
+        if (exact) {
+            return [{ id: '1', icon: exact.name }];
+        }
+        const layers = iconValue.parseIconValue(value);
+        if (!layers || !entryOf(layers[0].icon)) {
+            return NO_LAYERS;
+        }
+        // the code names icons without `Ntd`; the stacker and the grid know them by entry name
+        return layers.map((l) => {
+            const entry = entryOf(l.icon);
+            return entry && entry.name !== l.icon ? { ...l, icon: entry.name } : l;
+        });
+    }, [value, emitted, entryOf]);
     // A stack waiting to be drawn into HTML: shown at once, emitted once drawn (below).
     const [pending, setPending] = React.useState(null);
     const shown = pending !== null && pending !== void 0 ? pending : model;
     const base = shown[0];
+    /** The name a stack's code gives an icon: without `Ntd`, unless that is another icon's name. */
+    const shortName = React.useCallback((n) => {
+        const short = iconStack.iconDisplayName(n);
+        return short !== n && !byName.has(short) ? short : n;
+    }, [byName]);
     const onChangeRef = React.useRef(onChange);
     onChangeRef.current = onChange;
-    const emit = React.useCallback((next, baseName) => {
-        var _a, _b;
+    const emit = React.useCallback((next, layers) => {
+        var _a, _b, _c;
+        setEmitted(next === null ? null : { value: next, layers });
         setValue(next);
-        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, (_b = entryOf(baseName)) !== null && _b !== void 0 ? _b : null);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, (_c = entryOf((_b = layers[0]) === null || _b === void 0 ? void 0 : _b.icon)) !== null && _c !== void 0 ? _c : null);
     }, [setValue, entryOf]);
-    /** Sets the single value to a stack: its base's name, or the stack drawn as HTML. */
+    /** Sets the single value to a stack: written as `valueFormat` holds it, HTML once drawn. */
     const commit = React.useCallback((layers) => {
         if (layers.length === 0) {
             setPending(null);
-            emit(null);
+            emit(null, NO_LAYERS);
         }
-        else if (valueFormat === 'name') {
-            emit(layers[0].icon, layers[0].icon);
+        else if (valueFormat === 'html') {
+            setPending(layers);
         }
         else {
-            setPending(layers);
+            emit(iconValue.formatIconValue(layers, valueFormat, { shortName }), layers);
         }
-    }, [valueFormat, emit]);
+    }, [valueFormat, emit, shortName]);
     // The HTML is the icon as drawn: the hidden copy below renders the pending stack, and its
     // markup — ids renamed after the drawing — is the new value, emitted before the paint.
     useIsoLayoutEffect(() => {
@@ -188,7 +209,7 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
         const svg = (_a = serializerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         setPending(null);
         if (svg) {
-            emit(iconHtml.scopeIconHtmlIds(svg.outerHTML), pending[0].icon);
+            emit(iconHtml.scopeIconHtmlIds(svg.outerHTML), pending);
         }
     }, [pending, emit]);
     const selectedValues = React.useMemo(() => (multiSelect ? values : base ? [base.icon] : NO_NAMES), [multiSelect, values, base]);

package/dist/cjs/NiceIconValue.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconStack = require('./iconStack.js');
+var iconValue = require('./iconValue.js');
+
+/** The value's layers: a name the resolver knows as is (it may hold the code's signs), else parsed. */
+function layersOf(value, icons) {
+    const text = value === null || value === void 0 ? void 0 : value.trim();
+    if (!text) {
+        return null;
+    }
+    const known = typeof icons === 'function' ? icons(text) : icons[text];
+    const plain = [{ id: '1', icon: text }];
+    return known ? plain : iconValue.parseIconValue(text);
+}
+/**
+ * NiceIconValue (1.3.10) — shows an icon as NiceIconPicker stored it, whatever the format: a name,
+ * the code of a stack, JSON or HTML. It draws the icon again from the data; stored markup is never
+ * injected, so a value from a database cannot run anything. The rest of the props go to the base
+ * icon.
+ */
+function NiceIconValue({ value, icons, values, fallback = null, ...baseProps }) {
+    const layers = layersOf(value, icons);
+    const drawn = layers ? iconStack.renderIconStack(layers, icons, { baseProps, values }) : null;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: drawn !== null && drawn !== void 0 ? drawn : fallback });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconValue.displayName = 'NiceIconValue';
+}
+/**
+ * NiceIconHtml (1.3.9) — shows an icon kept as HTML.
+ *
+ * @deprecated Since 1.3.10 use `NiceIconValue`, which reads every format the picker writes.
+ */
+function NiceIconHtml({ html, ...props }) {
+    return jsxRuntime.jsx(NiceIconValue, { value: html, ...props });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconHtml.displayName = 'NiceIconHtml';
+}
+
+exports.NiceIconHtml = NiceIconHtml;
+exports.NiceIconValue = NiceIconValue;

package/dist/cjs/client.js

@@ -2,6 +2,8 @@
 
 var animationControls = require('./animationControls.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
+var NiceIconValue = require('./NiceIconValue.js');
+var iconValue = require('./iconValue.js');
 var iconHtml = require('./iconHtml.js');
 var NiceIconStacker = require('./NiceIconStacker.js');
 var iconStack = require('./iconStack.js');
@@ -21,7 +23,10 @@ exports.createHoverAnimation = animationControls.createHoverAnimation;
 exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
 exports.useAnimationSequence = animationControls.useAnimationSequence;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
-exports.NiceIconHtml = iconHtml.NiceIconHtml;
+exports.NiceIconHtml = NiceIconValue.NiceIconHtml;
+exports.NiceIconValue = NiceIconValue.NiceIconValue;
+exports.formatIconValue = iconValue.formatIconValue;
+exports.parseIconValue = iconValue.parseIconValue;
 exports.parseIconHtml = iconHtml.parseIconHtml;
 exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
 exports.NiceIconStack = iconStack.NiceIconStack;

package/dist/cjs/iconHtml.js

@@ -1,8 +1,5 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var iconStack = require('./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
@@ -101,22 +98,7 @@ 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 ? iconStack.renderIconStack(source.layers, icons, { baseProps, values }) : null;
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: drawn !== null && drawn !== void 0 ? drawn : fallback });
-}
-if (process.env.NODE_ENV !== 'production') {
-    NiceIconHtml.displayName = 'NiceIconHtml';
-}
 
-exports.NiceIconHtml = NiceIconHtml;
 exports.iconHtmlAttributes = iconHtmlAttributes;
 exports.parseIconHtml = parseIconHtml;
 exports.scopeIconHtmlIds = scopeIconHtmlIds;

package/dist/cjs/iconStack.js

@@ -127,7 +127,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);