@design-edito/tools 0.4.19 → 0.4.20

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
-export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
+export * as make from './make/index.js'
 export * as shuffle from './shuffle/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
-export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
+export * as make from './make/index.js'
 export * as shuffle from './shuffle/index.js'

package/agnostic/colors/index.d.ts

@@ -1,7 +1,6 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
+export * as channels from './channels/index.js'
 export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
@@ -10,3 +9,4 @@ export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as distance from './distance/index.js'

package/agnostic/colors/index.js

@@ -1,7 +1,6 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
+export * as channels from './channels/index.js'
 export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
@@ -10,3 +9,4 @@ export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as distance from './distance/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
-export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as bem from './bem/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
-export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as bem from './bem/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/index.js'
 export * as addclass from './addclass/index.js'
+export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
 export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as if from './if/index.js'
+export * as equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as join from './join/index.js'
+export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
 export * as length from './length/index.js'
-export * as map from './map/index.js'
+export * as join from './join/index.js'
+export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
-export * as negate from './negate/index.js'
+export * as populate from './populate/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as print from './print/index.js'
-export * as push from './push/index.js'
+export * as map from './map/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as push from './push/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as removeclass from './removeclass/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
+export * as select from './select/index.js'
 export * as sorton from './sorton/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as populate from './populate/index.js'
-export * as split from './split/index.js'
 export * as spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
-export * as toref from './toref/index.js'
 export * as torecord from './torecord/index.js'
-export * as totext from './totext/index.js'
+export * as tonull from './tonull/index.js'
+export * as toref from './toref/index.js'
+export * as tostring from './tostring/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'
-export * as tostring from './tostring/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/index.js'
 export * as addclass from './addclass/index.js'
+export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
 export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as if from './if/index.js'
+export * as equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as join from './join/index.js'
+export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
 export * as length from './length/index.js'
-export * as map from './map/index.js'
+export * as join from './join/index.js'
+export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
-export * as negate from './negate/index.js'
+export * as populate from './populate/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as print from './print/index.js'
-export * as push from './push/index.js'
+export * as map from './map/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as push from './push/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as removeclass from './removeclass/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
+export * as select from './select/index.js'
 export * as sorton from './sorton/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as populate from './populate/index.js'
-export * as split from './split/index.js'
 export * as spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
-export * as toref from './toref/index.js'
 export * as torecord from './torecord/index.js'
-export * as totext from './totext/index.js'
+export * as tonull from './tonull/index.js'
+export * as toref from './toref/index.js'
+export * as tostring from './tostring/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'
-export * as tostring from './tostring/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -1,13 +1,13 @@
+export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as any from './any/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as guess from './guess/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
+export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -1,13 +1,13 @@
+export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as any from './any/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as guess from './guess/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
+export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
+export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
+export * as hyperJson from './hyper-json/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as insertNode from './insert-node/index.js'
-export * as hyperJson from './hyper-json/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
-export * as stringToNodes from './string-to-nodes/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as deepSelect from './deep-select/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
+export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
+export * as hyperJson from './hyper-json/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as insertNode from './insert-node/index.js'
-export * as hyperJson from './hyper-json/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
-export * as stringToNodes from './string-to-nodes/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as deepSelect from './deep-select/index.js'

package/agnostic/index.d.ts

@@ -1,5 +1,5 @@
-export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
+export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'

package/agnostic/index.js

@@ -1,5 +1,5 @@
-export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
+export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
-export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as assert from './assert/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
-export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
-export * as outcome from './outcome/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
-export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as assert from './assert/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
-export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
-export * as outcome from './outcome/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as outcome from './outcome/index.js'

package/agnostic/misc/logs/index.d.ts

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as styles from './styles/index.js'
 export * as makeTextBlock from './make-text-block/index.js'
+export * as styles from './styles/index.js'

package/agnostic/misc/logs/index.js

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as styles from './styles/index.js'
 export * as makeTextBlock from './make-text-block/index.js'
+export * as styles from './styles/index.js'

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
+export * as approximateRational from './approximate-rational/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
+export * as approximateRational from './approximate-rational/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'

package/agnostic/objects/index.d.ts

@@ -1,8 +1,8 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'

package/agnostic/objects/index.js

@@ -1,8 +1,8 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'

package/agnostic/optim/index.d.ts

@@ -1,2 +1,2 @@
-export * as throttleDebounce from './throttle-debounce/index.js'
 export * as memoize from './memoize/index.js'
+export * as throttleDebounce from './throttle-debounce/index.js'

package/agnostic/optim/index.js

@@ -1,2 +1,2 @@
-export * as throttleDebounce from './throttle-debounce/index.js'
 export * as memoize from './memoize/index.js'
+export * as throttleDebounce from './throttle-debounce/index.js'

package/agnostic/sanitization/index.d.ts

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as html from './html/index.js'
 export * as path from './path/index.js'
+export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/sanitization/index.js

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as html from './html/index.js'
 export * as path from './path/index.js'
+export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/strings/index.d.ts

@@ -3,6 +3,6 @@ export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/index.js'
-export * as trim from './trim/index.js'
 export * as splitTrim from './split-trim/index.js'
+export * as trim from './trim/index.js'
+export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/strings/index.js

@@ -3,6 +3,6 @@ export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/index.js'
-export * as trim from './trim/index.js'
 export * as splitTrim from './split-trim/index.js'
+export * as trim from './trim/index.js'
+export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as transitions from './transitions/index.js'
 export * as timeout from './timeout/index.js'
+export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
+export * as dates from './dates/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as transitions from './transitions/index.js'
 export * as timeout from './timeout/index.js'
+export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
+export * as dates from './dates/index.js'

package/components/Button/index.d.ts

@@ -0,0 +1,7 @@
+import { type FunctionComponent, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+export type Props = ButtonHTMLAttributes<HTMLButtonElement> & WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>;
+export declare const Button: FunctionComponent<Props>;

package/components/Button/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { button as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+export const Button = ({ label, error, className, ...rest }) => {
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsx("button", { ...rest, className: c(rootClss) });
+};

package/components/Input/index.d.ts

@@ -0,0 +1,7 @@
+import { type FunctionComponent, type InputHTMLAttributes, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+export type Props = InputHTMLAttributes<HTMLInputElement> & WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>;
+export declare const Input: FunctionComponent<Props>;

package/components/Input/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { input as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+export const Input = ({ label, error, className, ...rest }) => {
+    const [id] = useState(`_${randomHash(12)}`);
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsxs("span", { className: rootClss, children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("input", { ...rest, className: c('input'), id: id }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+};

package/components/JsonEditor/index.d.ts

@@ -0,0 +1,20 @@
+import { type FunctionComponent } from 'react';
+import { type ZodType, type core } from 'zod';
+import type { WithClassName } from '../utils/types.js';
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonValue[] | {
+    [k: string]: JsonValue;
+};
+export type Props = WithClassName<{
+    defaultValue?: JsonValue;
+    onChange?: (val: JsonValue) => void;
+    onValidationError?: (issues: core.$ZodIssue[]) => void;
+    schema?: ZodType<JsonValue>;
+}>;
+export declare const JsonEditor: FunctionComponent<Props>;
+export declare const ValueEditor: FunctionComponent<{
+    defaultValue?: JsonValue;
+    onChange?: (newValue: JsonValue) => void;
+    path?: Array<string | number>;
+}>;
+export {};

package/components/JsonEditor/index.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ZodError } from 'zod';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNonNullObject } from '../../agnostic/objects/is-object/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { Input } from '../Input/index.js';
+import { Select } from '../Select/index.js';
+import { Textarea } from '../Textarea/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { jsonEditor as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+const c = clss(publicClassName, { cssModule });
+export const JsonEditor = ({ defaultValue = null, onChange, onValidationError, schema, className }) => {
+    const [value, setValue] = useState(defaultValue);
+    const setValueAndDispatch = (val) => {
+        setValue(val);
+        onChange?.(val);
+        try {
+            schema?.parse(val);
+        }
+        catch (err) {
+            if (err instanceof ZodError) {
+                const { issues } = err;
+                onValidationError?.(issues);
+            }
+            else
+                throw err;
+        }
+    };
+    const rootClss = mergeClassNames(c(null, {}), className);
+    return _jsxs("div", { className: rootClss, children: [_jsx(ValueEditor, { defaultValue: defaultValue, onChange: val => setValueAndDispatch(val), path: [] }), _jsx("pre", { children: JSON.stringify(value, null, 2) })] });
+};
+export const ValueEditor = ({ defaultValue = {}, onChange, path = [] }) => {
+    // State
+    const [value, setValue] = useState(defaultValue);
+    const setValueAndDispatch = (newValue) => {
+        setValue(newValue);
+        onChange?.(newValue);
+    };
+    // Handlers
+    const handleTypeSelectChange = e => {
+        const newType = e.target.value;
+        if (newType === 'string')
+            return setValueAndDispatch('');
+        if (newType === 'number')
+            return setValueAndDispatch(0);
+        if (newType === 'boolean')
+            return setValueAndDispatch(false);
+        if (newType === 'null')
+            return setValueAndDispatch(null);
+        if (newType === 'record')
+            return setValueAndDispatch({ a: 0, b: false });
+        if (newType === 'array')
+            return setValueAndDispatch([]);
+    };
+    const handleStringValueChange = e => setValueAndDispatch(e.target.value);
+    const handleNumberValueChange = e => setValueAndDispatch(parseFloat(e.target.value));
+    const handleBooleanValueChange = e => setValueAndDispatch(e.target.checked);
+    const handleRecordValueChange = e => setValueAndDispatch(e);
+    const handleArrayValueChange = e => setValueAndDispatch(e);
+    // Rendering
+    const valueEditorClss = c('value', {
+        string: typeof value === 'string',
+        number: typeof value === 'number',
+        boolean: typeof value === 'boolean',
+        null: value === null,
+        array: Array.isArray(value),
+        record: !Array.isArray(value) && isNonNullObject(value)
+    });
+    const pathStringDataAttr = (path ?? []).map(e => e.toString()).join('.');
+    return _jsxs("span", { className: valueEditorClss, "data-path": pathStringDataAttr, children: [_jsxs(Select, { className: c('type'), onChange: handleTypeSelectChange, children: [_jsx("option", { value: 'string', selected: typeof value === 'string', children: "string" }), _jsx("option", { value: 'number', selected: typeof value === 'number', children: "number" }), _jsx("option", { value: 'boolean', selected: typeof value === 'boolean', children: "boolean" }), _jsx("option", { value: 'null', selected: value === null, children: "null" }), _jsx("option", { value: 'record', selected: isNonNullObject(value) && !Array.isArray(value), children: "record" }), _jsx("option", { value: 'array', selected: Array.isArray(value), children: "array" })] }), typeof value === 'string' && _jsx(StringEditor, { type: 'textarea', defaultValue: value, onChange: handleStringValueChange }), typeof value === 'number' && _jsx(NumberEditor, { defaultValue: value, onChange: handleNumberValueChange }), typeof value === 'boolean' && _jsx(BooleanEditor, { defaultValue: value, onChange: handleBooleanValueChange }), value === null && _jsx(NullEditor, { defaultValue: value }), isNonNullObject(value) && !Array.isArray(value) && _jsx(RecordEditor, { defaultValue: value, onChange: handleRecordValueChange, path: path }), Array.isArray(value) && _jsx(ArrayEditor, { defaultValue: value, onChange: handleArrayValueChange, path: path })] });
+};
+const StringEditor = (props) => props.type === 'textarea'
+    ? _jsx(Textarea, { className: c('string'), defaultValue: props.defaultValue ?? '', onChange: props.onChange })
+    : _jsx(Input, { type: 'text', className: c('string'), defaultValue: props.defaultValue ?? '', onChange: props.onChange });
+const NumberEditor = (props) => _jsx(Input, { className: c('number'), type: 'number', defaultValue: props.defaultValue ?? 0, onChange: props.onChange });
+const BooleanEditor = (props) => _jsx(Input, { className: c('boolean'), type: 'checkbox', defaultChecked: props.defaultValue ?? false, onChange: props.onChange });
+const NullEditor = () => _jsx("span", { className: c('null'), children: "null" });
+const RecordEditor = ({ defaultValue = {}, onChange, path }) => {
+    const [value, setValue] = useState(new Map(Object
+        .entries(defaultValue)
+        .map(([key, val]) => [key, {
+            id: randomHash(8),
+            val
+        }])));
+    const setValueAndDispatch = (newValue) => {
+        setValue(newValue);
+        onChange?.(Array.from(newValue).reduce((acc, [key, { val }]) => ({
+            ...acc,
+            [key]: val
+        }), {}));
+    };
+    const handleDeleteProp = (key) => {
+        const newValue = new Map(value);
+        newValue.delete(key);
+        setValueAndDispatch(newValue);
+    };
+    const handleCreateProp = () => {
+        let propName = '';
+        while (value.get(propName) !== undefined) {
+            propName = randomHash(4);
+        }
+        const newValue = new Map(value);
+        newValue.set(propName, { id: randomHash(8), val: null });
+        setValueAndDispatch(newValue);
+    };
+    const handleRenameProp = (oldName) => e => {
+        const newName = e.target.value;
+        const newValue = new Map(Array
+            .from(value)
+            .map(([key, { id, val }]) => [
+            key === oldName ? newName : key,
+            { id, val }
+        ]));
+        setValueAndDispatch(newValue);
+    };
+    const handleChangeProp = (changedKey) => (newValue) => {
+        const newVal = new Map(Array.from(value).map(([key, { id, val }]) => [key, {
+                id,
+                val: key === changedKey ? newValue : val
+            }]));
+        setValueAndDispatch(newVal);
+    };
+    return _jsxs("ul", { className: c('record'), children: [Array.from(value).map(([key, { id, val }]) => _jsxs("li", { "data-key": key, "data-path": [...(path ?? []), key].join('.'), children: [_jsx("button", { className: c('delete-prop'), onClick: () => handleDeleteProp(key), children: "x" }), _jsx("span", { className: c('prop-name'), children: _jsx(StringEditor, { type: 'input', defaultValue: key, onChange: handleRenameProp(key) }) }), _jsx(ValueEditor, { defaultValue: val, onChange: handleChangeProp(key), path: [...(path ?? []), key] })] }, id)), _jsx("button", { className: c('create-prop'), onClick: handleCreateProp, children: "+" })] });
+};
+const ArrayEditor = ({ defaultValue = [], onChange, path }) => {
+    const [value, setValue] = useState(new Map(defaultValue.map(val => [randomHash(8), val])));
+    const setValueAndDispatch = (newValue) => {
+        setValue(newValue);
+        onChange?.(Array.from(newValue).map(([, val]) => val));
+    };
+    const handleDeleteProp = (pos) => setValueAndDispatch(new Map([
+        ...Array.from(value).slice(0, pos),
+        ...Array.from(value).slice(pos + 1)
+    ]));
+    const handleCreateProp = () => {
+        const newValue = new Map([...Array.from(value), [randomHash(8), null]]);
+        setValueAndDispatch(newValue);
+    };
+    const handleChangeProp = (pos) => (newValue) => setValueAndDispatch(new Map([
+        ...Array.from(value).slice(0, pos),
+        [Array.from(value)[pos]?.[0] ?? randomHash(8), newValue],
+        ...Array.from(value).slice(pos + 1)
+    ]));
+    const handleLiftProp = (pos) => setValueAndDispatch(new Map([
+        ...Array.from(value).slice(0, pos - 1),
+        Array.from(value)[pos],
+        Array.from(value)[pos - 1],
+        ...Array.from(value).slice(pos + 1)
+    ].filter(e => e !== undefined)));
+    const handleDropProp = (pos) => setValueAndDispatch(new Map([
+        ...Array.from(value).slice(0, pos),
+        Array.from(value)[pos + 1],
+        Array.from(value)[pos],
+        ...Array.from(value).slice(pos + 2)
+    ].filter(e => e !== undefined)));
+    return _jsxs("ol", { children: [Array.from(value).map(([id, val], pos) => _jsxs("li", { className: c('array'), "data-path": [...(path ?? []), pos].join('.'), children: [_jsx("button", { className: c('delete-prop'), onClick: () => handleDeleteProp(pos), children: "x" }), _jsx("button", { className: c('lift-prop'), disabled: pos === 0, onClick: () => handleLiftProp(pos), children: "\u2191" }), _jsx("button", { className: c('drop-prop'), disabled: pos === value.size - 1, onClick: () => handleDropProp(pos), children: "\u2193" }), _jsx(ValueEditor, { defaultValue: val, onChange: handleChangeProp(pos), path: [...(path ?? []), pos] })] }, id)), _jsx("button", { className: c('create-prop'), onClick: handleCreateProp, children: "+" })] });
+};

package/components/Select/index.d.ts

@@ -0,0 +1,7 @@
+import { type FunctionComponent, type SelectHTMLAttributes, type ReactNode, type PropsWithChildren } from 'react';
+import type { WithClassName } from '../utils/types.js';
+export type Props = SelectHTMLAttributes<HTMLSelectElement> & PropsWithChildren<WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>>;
+export declare const Select: FunctionComponent<Props>;

package/components/Select/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { select as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+export const Select = ({ label, error, className, children, ...rest }) => {
+    const [id] = useState(`_${randomHash(12)}`);
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsxs("span", { className: rootClss, children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("select", { ...rest, className: c('select'), id: id, children: children }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+};

package/components/Textarea/index.d.ts

@@ -0,0 +1,7 @@
+import { type FunctionComponent, type TextareaHTMLAttributes, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>;
+export declare const Textarea: FunctionComponent<Props>;

package/components/Textarea/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { textarea as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+export const Textarea = ({ label, error, className, ...rest }) => {
+    const [id] = useState(`_${randomHash(12)}`);
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsxs("span", { className: rootClss, children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("textarea", { ...rest, className: c('textarea'), id: id }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+};

package/components/index.d.ts

@@ -1,20 +1,25 @@
 export * as beforeAfter from './BeforeAfter/index.js'
+export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
-export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
+export * as disclaimer from './Disclaimer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
+export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
+export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
-export * as subtitles from './Subtitles/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
+export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'

package/components/index.js

@@ -1,20 +1,25 @@
 export * as beforeAfter from './BeforeAfter/index.js'
+export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
-export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
+export * as disclaimer from './Disclaimer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
+export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
+export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
-export * as subtitles from './Subtitles/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
+export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'

package/components/public-classnames.d.ts

@@ -1,4 +1,5 @@
 export declare const beforeAfter = "lm-before-after";
+export declare const button = "lm-button";
 export declare const clippable = "lm-clippable";
 export declare const disclaimer = "lm-disclaimer";
 export declare const drawer = "lm-drawer";
@@ -6,15 +7,19 @@ export declare const eventListener = "lm-event-listener";
 export declare const gallery = "lm-gallery";
 export declare const iframe = "lm-iframe";
 export declare const image = "lm-image";
+export declare const input = "lm-input";
 export declare const intersectionObserver = "lm-intersection-observer";
+export declare const jsonEditor = "lm-json-editor";
 export declare const overlayer = "lm-overlayer";
 export declare const paginator = "lm-paginator";
 export declare const resizeObserver = "lm-resize-observer";
 export declare const scrllgngn = "lm-scrllgngn";
 export declare const scrollListener = "lm-scroll-listener";
+export declare const select = "lm-select";
 export declare const sequencer = "lm-sequencer";
 export declare const shadowRoot = "lm-shadow-root";
 export declare const subtitles = "lm-subtitles";
+export declare const textarea = "lm-textarea";
 export declare const theatre = "lm-theatre";
 export declare const uiModule = "lm-ui-module";
 export declare const video = "lm-video";

package/components/public-classnames.js

@@ -1,4 +1,5 @@
 export const beforeAfter = 'lm-before-after';
+export const button = 'lm-button';
 export const clippable = 'lm-clippable';
 export const disclaimer = 'lm-disclaimer';
 export const drawer = 'lm-drawer';
@@ -6,15 +7,19 @@ export const eventListener = 'lm-event-listener';
 export const gallery = 'lm-gallery';
 export const iframe = 'lm-iframe';
 export const image = 'lm-image';
+export const input = 'lm-input';
 export const intersectionObserver = 'lm-intersection-observer';
+export const jsonEditor = 'lm-json-editor';
 export const overlayer = 'lm-overlayer';
 export const paginator = 'lm-paginator';
 export const resizeObserver = 'lm-resize-observer';
 export const scrllgngn = 'lm-scrllgngn';
 export const scrollListener = 'lm-scroll-listener';
+export const select = 'lm-select';
 export const sequencer = 'lm-sequencer';
 export const shadowRoot = 'lm-shadow-root';
 export const subtitles = 'lm-subtitles';
+export const textarea = 'lm-textarea';
 export const theatre = 'lm-theatre';
 export const uiModule = 'lm-ui-module';
 export const video = 'lm-video';

package/node/@google-cloud/storage/file/index.d.ts

@@ -8,5 +8,5 @@ export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
-export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'
+export * as updateMetadata from './update-metadata/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -8,5 +8,5 @@ export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
-export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'
+export * as updateMetadata from './update-metadata/index.js'

package/node/ftps/file/index.d.ts

@@ -3,5 +3,5 @@ export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
-export * as upload from './upload/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'

package/node/ftps/file/index.js

@@ -3,5 +3,5 @@ export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
-export * as upload from './upload/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'

package/node/images/index.d.ts

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
-export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as format from './format/index.js'

package/node/images/index.js

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
-export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as format from './format/index.js'

package/node/images/transform/operations/index.d.ts

@@ -10,6 +10,6 @@ export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
-export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'
+export * as resize from './resize/index.js'

package/node/images/transform/operations/index.js

@@ -10,6 +10,6 @@ export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
-export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'
+export * as resize from './resize/index.js'

package/node/index.d.ts

@@ -1,6 +1,6 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as express from './@express/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'

package/node/index.js

@@ -1,6 +1,6 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as express from './@express/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",
@@ -1360,6 +1360,13 @@
     "./components/BeforeAfter/index.js": {
       "import": "./components/BeforeAfter/index.js"
     },
+    "./components/Button": {
+      "import": "./components/Button/index.js",
+      "types": "./components/Button/index.d.ts"
+    },
+    "./components/Button/index.js": {
+      "import": "./components/Button/index.js"
+    },
     "./components/Clippable": {
       "import": "./components/Clippable/index.js",
       "types": "./components/Clippable/index.d.ts"
@@ -1412,6 +1419,13 @@
     "./components/index.js": {
       "import": "./components/index.js"
     },
+    "./components/Input": {
+      "import": "./components/Input/index.js",
+      "types": "./components/Input/index.d.ts"
+    },
+    "./components/Input/index.js": {
+      "import": "./components/Input/index.js"
+    },
     "./components/IntersectionObserver": {
       "import": "./components/IntersectionObserver/index.js",
       "types": "./components/IntersectionObserver/index.d.ts"
@@ -1419,6 +1433,13 @@
     "./components/IntersectionObserver/index.js": {
       "import": "./components/IntersectionObserver/index.js"
     },
+    "./components/JsonEditor": {
+      "import": "./components/JsonEditor/index.js",
+      "types": "./components/JsonEditor/index.d.ts"
+    },
+    "./components/JsonEditor/index.js": {
+      "import": "./components/JsonEditor/index.js"
+    },
     "./components/Overlayer": {
       "import": "./components/Overlayer/index.js",
       "types": "./components/Overlayer/index.d.ts"
@@ -1454,6 +1475,13 @@
     "./components/ScrollListener/index.js": {
       "import": "./components/ScrollListener/index.js"
     },
+    "./components/Select": {
+      "import": "./components/Select/index.js",
+      "types": "./components/Select/index.d.ts"
+    },
+    "./components/Select/index.js": {
+      "import": "./components/Select/index.js"
+    },
     "./components/Sequencer": {
       "import": "./components/Sequencer/index.js",
       "types": "./components/Sequencer/index.d.ts"
@@ -1479,6 +1507,13 @@
       "import": "./components/Subtitles/types.js",
       "types": "./components/Subtitles/types.d.ts"
     },
+    "./components/Textarea": {
+      "import": "./components/Textarea/index.js",
+      "types": "./components/Textarea/index.d.ts"
+    },
+    "./components/Textarea/index.js": {
+      "import": "./components/Textarea/index.js"
+    },
     "./components/Theatre": {
       "import": "./components/Theatre/index.js",
       "types": "./components/Theatre/index.d.ts"