@design-edito/tools 0.4.12 → 0.4.14

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 bem from './bem/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as generateNiceColor from './generate-nice-color/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 bem from './bem/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as generateNiceColor from './generate-nice-color/index.js'

package/agnostic/html/deep-select/index.js

@@ -36,10 +36,10 @@ export const deepSelect = async (selector, options) => {
     const traverse = async (root) => {
         const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
         let node = walker.currentNode;
-        while (node instanceof Element) {
-            if (node !== root && node.matches(selector))
+        while (node !== null) {
+            if (node !== root && node instanceof Element && node.matches(selector))
                 results.push(node);
-            if (node.shadowRoot !== null)
+            if (node instanceof Element && node.shadowRoot !== null)
                 await traverse(node.shadowRoot);
             nodeCount++;
             if (nodeCount % chunkSize === 0)

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

@@ -1,42 +1,42 @@
 export * as add from './add/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 call from './call/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 addclass from './addclass/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 hjstringify from './hjstringify/index.js'
+export * as initialize from './initialize/index.js'
 export * as if from './if/index.js'
 export * as join from './join/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 negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as hjstringify from './hjstringify/index.js'
 export * as pickrandom from './pickrandom/index.js'
-export * as negate from './negate/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/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 renameproperty from './renameproperty/index.js'
 export * as select from './select/index.js'
+export * as replace from './replace/index.js'
+export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as set from './set/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
@@ -45,8 +45,8 @@ export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as toref from './toref/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'

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

@@ -1,42 +1,42 @@
 export * as add from './add/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 call from './call/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 addclass from './addclass/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 hjstringify from './hjstringify/index.js'
+export * as initialize from './initialize/index.js'
 export * as if from './if/index.js'
 export * as join from './join/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 negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as hjstringify from './hjstringify/index.js'
 export * as pickrandom from './pickrandom/index.js'
-export * as negate from './negate/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/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 renameproperty from './renameproperty/index.js'
 export * as select from './select/index.js'
+export * as replace from './replace/index.js'
+export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as set from './set/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
@@ -45,8 +45,8 @@ export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as toref from './toref/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'

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

@@ -2,12 +2,12 @@ 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 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 get from './get/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as null from './null/index.js'

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

@@ -2,12 +2,12 @@ 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 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 get from './get/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as null from './null/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 getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
-export * as deepSelect from './deep-select/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as replaceInElement from './replace-in-element/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 getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
-export * as deepSelect from './deep-select/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as replaceInElement from './replace-in-element/index.js'

package/agnostic/index.d.ts

@@ -1,12 +1,12 @@
 export * as arrays from './arrays/index.js'
+export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
 export * as html from './html/index.js'
+export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as booleans from './booleans/index.js'
 export * as optim from './optim/index.js'
 export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'

package/agnostic/index.js

@@ -1,12 +1,12 @@
 export * as arrays from './arrays/index.js'
+export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
 export * as html from './html/index.js'
+export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as booleans from './booleans/index.js'
 export * as optim from './optim/index.js'
 export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'

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

@@ -1,2 +1,2 @@
-export * as detectRuntime from './detect-runtime/index.js'
 export * as window from './window/index.js'
+export * as detectRuntime from './detect-runtime/index.js'

package/agnostic/misc/crossenv/index.js

@@ -1,2 +1,2 @@
-export * as detectRuntime from './detect-runtime/index.js'
 export * as window from './window/index.js'
+export * as detectRuntime from './detect-runtime/index.js'

package/agnostic/misc/index.d.ts

@@ -7,6 +7,6 @@ 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 loremIpsum from './lorem-ipsum/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'

package/agnostic/misc/index.js

@@ -7,6 +7,6 @@ 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 loremIpsum from './lorem-ipsum/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'

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

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

package/agnostic/misc/logs/index.js

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

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
 export * as approximateRational from './approximate-rational/index.js'
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as geometricProgressions from './geometric-progressions/index.js'
 export * as clamp from './clamp/index.js'
-export * as round from './round/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 approximateRational from './approximate-rational/index.js'
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as geometricProgressions from './geometric-progressions/index.js'
 export * as clamp from './clamp/index.js'
-export * as round from './round/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,9 +1,9 @@
 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 isRecord from './is-record/index.js'
 export * as isObject from './is-object/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as isRecord from './is-record/index.js'
-export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as recordMap from './record-map/index.js'
 export * as validation from './validation/index.js'
+export * as enums from './enums/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 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 isRecord from './is-record/index.js'
 export * as isObject from './is-object/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as isRecord from './is-record/index.js'
-export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as recordMap from './record-map/index.js'
 export * as validation from './validation/index.js'
+export * as enums from './enums/index.js'

package/agnostic/optim/index.d.ts

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

package/agnostic/optim/index.js

@@ -1,2 +1,2 @@
-export * as memoize from './memoize/index.js'
 export * as throttleDebounce from './throttle-debounce/index.js'
+export * as memoize from './memoize/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 fileName from './file-name/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 fileName from './file-name/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/strings/index.d.ts

@@ -1,8 +1,8 @@
 export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/index.js'
 export * as parseTable from './parse-table/index.js'
+export * as replaceAll from './replace-all/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

@@ -1,8 +1,8 @@
 export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/index.js'
 export * as parseTable from './parse-table/index.js'
+export * as replaceAll from './replace-all/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 timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
+export * as timeout from './timeout/index.js'
 export * as wait from './wait/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 timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
+export * as timeout from './timeout/index.js'
 export * as wait from './wait/index.js'

package/components/Clippable/index.d.ts

@@ -0,0 +1,49 @@
+import { type PropsWithChildren, type FunctionComponent, type MouseEvent } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link Clippable} component.
+ *
+ * Extends {@link WithClassName} with clipboard-related configuration and callbacks.
+ *
+ * @property toClip - Content written to the clipboard. When omitted, the current
+ * content container's `innerHTML` is used. A function may be provided to transform
+ * the current content before it is written.
+ * @property actionHandlers - Optional user action callbacks:
+ *   - `clicked` — called when the copy button is clicked, before clipboard content is resolved.
+ * @property stateHandlers - Optional callbacks invoked when derived state changes:
+ *   - `clipped` — called after content has been successfully written to the clipboard.
+ * @property className - Additional class name(s) applied to the root element.
+ * @property children - Content rendered inside the copyable container.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    toClip?: string | ((curr: string | undefined) => string | undefined);
+    actionHandlers?: {
+        clicked?: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, rawContent: string | undefined) => void;
+    };
+    stateHandlers?: {
+        clipped?: (content: string) => void;
+    };
+}>>;
+/**
+ * Clipboard-enabled container component.
+ *
+ * Renders arbitrary content alongside a copy control. When activated,
+ * the component writes HTML content to the clipboard using the
+ * `text/html` MIME type.
+ *
+ * Supports content overriding and transformation through the `toClip`
+ * prop, as well as action and state callbacks.
+ *
+ * ### CSS modifiers
+ * The following modifiers are applied automatically:
+ * - `clipped` — `true` during the 3 seconds following a successful clipboard write.
+ *
+ * ### CSS elements
+ * - `copy`
+ * - `content`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A copy-enabled content container with clipboard state modifiers applied.
+ */
+export declare const Clippable: FunctionComponent<Props>;

package/components/Clippable/index.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { clippable as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Clipboard-enabled container component.
+ *
+ * Renders arbitrary content alongside a copy control. When activated,
+ * the component writes HTML content to the clipboard using the
+ * `text/html` MIME type.
+ *
+ * Supports content overriding and transformation through the `toClip`
+ * prop, as well as action and state callbacks.
+ *
+ * ### CSS modifiers
+ * The following modifiers are applied automatically:
+ * - `clipped` — `true` during the 3 seconds following a successful clipboard write.
+ *
+ * ### CSS elements
+ * - `copy`
+ * - `content`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A copy-enabled content container with clipboard state modifiers applied.
+ */
+export const Clippable = ({ className, children, toClip, actionHandlers, stateHandlers }) => {
+    // State & refs
+    const [beenRecentlyClipped, setBeenRecentlyClipped] = useState(false);
+    const contentRef = useRef(null);
+    const clippedTimeoutRef = useRef(null);
+    // User action handlers
+    const handleCopyClick = async (e) => {
+        const rawhHtml = contentRef.current?.innerHTML;
+        actionHandlers?.clicked?.(e, rawhHtml);
+        const html = typeof toClip === 'string'
+            ? toClip
+            : typeof toClip === 'function'
+                ? toClip(rawhHtml)
+                : rawhHtml;
+        if (html === undefined)
+            return;
+        try {
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([html], { type: 'text/html' }),
+                    'text/plain': new Blob([html], { type: 'text/plain' })
+                })
+            ]);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        stateHandlers?.clipped?.(html);
+        setBeenRecentlyClipped(true);
+        if (clippedTimeoutRef.current !== null)
+            clearTimeout(clippedTimeoutRef.current);
+        clippedTimeoutRef.current = setTimeout(() => {
+            setBeenRecentlyClipped(false);
+        }, 3000);
+    };
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        clipped: beenRecentlyClipped
+    }), className);
+    const copyClss = c('copy');
+    const contentClss = c('content');
+    return _jsxs("div", { className: rootClss, children: [_jsx("button", { type: 'button', className: copyClss, onClick: e => { void handleCopyClick(e); } }), _jsx("div", { ref: contentRef, className: contentClss, children: children })] });
+};

package/components/Iframe/index.d.ts

@@ -0,0 +1,48 @@
+import { type FunctionComponent, type IframeHTMLAttributes, type PropsWithChildren } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link Iframe} component.
+ *
+ * Extends native {@link IframeHTMLAttributes} with optional class name support.
+ *
+ * @property className - Additional class name(s) applied to the root element.
+ * @property children - React content rendered as the iframe document body.
+ * @property srcDoc - Raw HTML string used as iframe content when `children` is not provided.
+ *
+ * @remarks
+ * This component behaves as a hybrid between a native `<iframe>` and a React renderer.
+ *
+ * Rendering priority:
+ * - `children` takes precedence over `srcDoc` when provided.
+ * - If `children` is `null` or `undefined`, `srcDoc` is used directly.
+ *
+ * When `children` is provided, it is converted to static HTML using
+ * `renderToStaticMarkup` and injected into a complete HTML document:
+ * `<!doctype html><html><body>...</body></html>`.
+ */
+export type Props = PropsWithChildren<WithClassName<Record<never, never>>> & Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'children'>;
+/**
+ * Iframe component with React-to-HTML rendering support.
+ *
+ * Renders either:
+ * - A raw HTML string via the `srcDoc` attribute, or
+ * - A ReactNode rendered into static HTML via `renderToStaticMarkup`.
+ *
+ * ### Rendering strategy
+ * 1. If `children` is defined (non-nullish), it is rendered to static HTML
+ *    and used as iframe content.
+ * 2. Otherwise, `srcDoc` is used as-is.
+ *
+ * The resulting content is wrapped in a minimal HTML document:
+ * `<!doctype html><html><body>...</body></html>`.
+ *
+ * ### Notes
+ * - The iframe content is static (no hydration, no client-side React inside iframe).
+ * - `children` overrides `srcDoc`.
+ * - Useful for embedding server-rendered UI fragments or documentation blocks.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A styled iframe element with computed HTML document content.
+ */
+export declare const Iframe: FunctionComponent<Props>;

package/components/Iframe/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { iframe as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+import { isNotNullish } from '../../agnostic/misc/is-nullish/index.js';
+/**
+ * Iframe component with React-to-HTML rendering support.
+ *
+ * Renders either:
+ * - A raw HTML string via the `srcDoc` attribute, or
+ * - A ReactNode rendered into static HTML via `renderToStaticMarkup`.
+ *
+ * ### Rendering strategy
+ * 1. If `children` is defined (non-nullish), it is rendered to static HTML
+ *    and used as iframe content.
+ * 2. Otherwise, `srcDoc` is used as-is.
+ *
+ * The resulting content is wrapped in a minimal HTML document:
+ * `<!doctype html><html><body>...</body></html>`.
+ *
+ * ### Notes
+ * - The iframe content is static (no hydration, no client-side React inside iframe).
+ * - `children` overrides `srcDoc`.
+ * - Useful for embedding server-rendered UI fragments or documentation blocks.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A styled iframe element with computed HTML document content.
+ */
+export const Iframe = ({ className, children, srcDoc, ...iframeProps }) => {
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    const html = useMemo(() => {
+        const body = isNotNullish(children)
+            ? renderToStaticMarkup(children)
+            : srcDoc;
+        return `<!doctype html><html><body>${body}</body></html>`;
+    }, [children, srcDoc]);
+    return _jsx("iframe", { ...iframeProps, className: rootClss, srcDoc: html });
+};

package/components/index.d.ts

@@ -1,10 +1,12 @@
 export * as beforeAfter from './BeforeAfter/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 eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/index.js'
+export * as iframe from './Iframe/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as image from './Image/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'

package/components/index.js

@@ -1,10 +1,12 @@
 export * as beforeAfter from './BeforeAfter/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 eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/index.js'
+export * as iframe from './Iframe/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as image from './Image/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'

package/components/public-classnames.d.ts

@@ -1,8 +1,10 @@
 export declare const beforeAfter = "dsed-before-after";
+export declare const clippable = "dsed-clippable";
 export declare const disclaimer = "dsed-disclaimer";
 export declare const drawer = "dsed-drawer";
 export declare const eventListener = "dsed-event-listener";
 export declare const gallery = "dsed-gallery";
+export declare const iframe = "dsed-iframe";
 export declare const image = "dsed-image";
 export declare const intersectionObserver = "dsed-intersection-observer";
 export declare const overlayer = "dsed-overlayer";

package/components/public-classnames.js

@@ -1,8 +1,10 @@
 export const beforeAfter = 'dsed-before-after';
+export const clippable = 'dsed-clippable';
 export const disclaimer = 'dsed-disclaimer';
 export const drawer = 'dsed-drawer';
 export const eventListener = 'dsed-event-listener';
 export const gallery = 'dsed-gallery';
+export const iframe = 'dsed-iframe';
 export const image = 'dsed-image';
 export const intersectionObserver = 'dsed-intersection-observer';
 export const overlayer = 'dsed-overlayer';

package/node/@aws-s3/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/@aws-s3/storage/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

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

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

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

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

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

@@ -1,3 +1,4 @@
+export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
@@ -9,4 +10,3 @@ 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 copy from './copy/index.js'

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

@@ -1,3 +1,4 @@
+export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
@@ -9,4 +10,3 @@ 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 copy from './copy/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -2,10 +2,10 @@ export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as listDir from './list-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -2,10 +2,10 @@ export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as listDir from './list-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/sftp/directory/index.d.ts

@@ -1,4 +1,4 @@
-export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
+export * as copyDir from './copy-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/sftp/directory/index.js

@@ -1,4 +1,4 @@
-export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
+export * as copyDir from './copy-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",
@@ -1360,6 +1360,13 @@
     "./components/BeforeAfter/index.js": {
       "import": "./components/BeforeAfter/index.js"
     },
+    "./components/Clippable": {
+      "import": "./components/Clippable/index.js",
+      "types": "./components/Clippable/index.d.ts"
+    },
+    "./components/Clippable/index.js": {
+      "import": "./components/Clippable/index.js"
+    },
     "./components/Disclaimer": {
       "import": "./components/Disclaimer/index.js",
       "types": "./components/Disclaimer/index.d.ts"
@@ -1388,6 +1395,13 @@
     "./components/Gallery/index.js": {
       "import": "./components/Gallery/index.js"
     },
+    "./components/Iframe": {
+      "import": "./components/Iframe/index.js",
+      "types": "./components/Iframe/index.d.ts"
+    },
+    "./components/Iframe/index.js": {
+      "import": "./components/Iframe/index.js"
+    },
     "./components/Image": {
       "import": "./components/Image/index.js",
       "types": "./components/Image/index.d.ts"
@@ -2332,25 +2346,27 @@
     }
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.999.0",
-    "@aws-sdk/lib-storage": "^3.1008.0",
+    "@aws-sdk/client-s3": "^3.1066.0",
+    "@aws-sdk/lib-storage": "^3.1066.0",
     "@google-cloud/storage": "^7.19.0",
-    "@inquirer/prompts": "^8.3.0",
+    "@inquirer/prompts": "^8.5.2",
     "ansi-regex": "^6.2.2",
     "archiver": "^7.0.1",
     "basic-ftp": "^5.1.0",
     "chalk": "^5.6.2",
     "express": "^5.2.1",
+    "i": "^0.3.7",
     "multer": "^2.0.0",
-    "preact-render-to-string": "^6.6.6",
+    "npm": "^11.16.0",
+    "preact-render-to-string": "^6.7.0",
     "quantize": "^1.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "sharp": "^0.34.5",
     "ssh2": "^1.17.0",
-    "ssh2-sftp-client": "^12.1.0",
+    "ssh2-sftp-client": "^12.1.1",
     "xss": "^1.0.15",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.3",
@@ -2359,12 +2375,12 @@
     "@testing-library/react": "^16.3.2",
     "@types/archiver": "^7.0.0",
     "@types/express": "^5.0.6",
-    "@types/jsdom": "^28.0.0",
+    "@types/jsdom": "^28.0.3",
     "@types/multer": "^2.1.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.9.3",
     "@types/prompts": "^2.4.9",
     "@types/quantize": "^1.0.2",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
     "@types/sharp": "^0.31.1",
@@ -2374,21 +2390,21 @@
     "@vitejs/plugin-react": "^5.1.3",
     "change-case": "^5.4.4",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^9.2.1",
-    "esbuild": "^0.27.4",
+    "concurrently": "^10.0.3",
+    "esbuild": "^0.28.0",
     "eslint": "^8.44.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-promise": "^6.1.1",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.1.1",
     "prompts": "^2.4.2",
-    "puppeteer": "^24.39.0",
-    "semver": "^7.7.4",
+    "puppeteer": "^25.1.0",
+    "semver": "^7.8.4",
     "simple-git": "^3.33.0",
     "standard": "^17.1.2",
     "typescript": "^5.3.3",
     "vite": "^6.4.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.8"
   }
 }