@design-edito/tools 0.4.13 → 0.4.15

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 make from './make/index.js'
 export * as isArrayOf from './is-array-of/index.js'
 export * as randomPick from './random-pick/index.js'
-export * as make from './make/index.js'
 export * as shuffle from './shuffle/index.js'
-export * as dedupe from './dedupe/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 make from './make/index.js'
 export * as isArrayOf from './is-array-of/index.js'
 export * as randomPick from './random-pick/index.js'
-export * as make from './make/index.js'
 export * as shuffle from './shuffle/index.js'
-export * as dedupe from './dedupe/index.js'

package/agnostic/colors/index.d.ts

@@ -1,12 +1,12 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
-export * as convert from './convert/index.js'
+export * as channels from './channels/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 grayscale from './grayscale/index.js'
 export * as lerp from './lerp/index.js'
+export * as luminance from './luminance/index.js'
+export * as convert from './convert/index.js'
 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 luminance from './luminance/index.js'

package/agnostic/colors/index.js

@@ -1,12 +1,12 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
-export * as convert from './convert/index.js'
+export * as channels from './channels/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 grayscale from './grayscale/index.js'
 export * as lerp from './lerp/index.js'
+export * as luminance from './luminance/index.js'
+export * as convert from './convert/index.js'
 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 luminance from './luminance/index.js'

package/agnostic/errors/index.d.ts

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

package/agnostic/errors/index.js

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

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

@@ -6,11 +6,11 @@ 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 getattribute from './getattribute/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 getproperty from './getproperty/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
@@ -20,7 +20,6 @@ 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 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'
@@ -29,24 +28,25 @@ export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/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 populate from './populate/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 sorton from './sorton/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 renameproperty from './renameproperty/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
+export * as toarray from './toarray/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as toref from './toref/index.js'
+export * as totext from './totext/index.js'
+export * as tostring from './tostring/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

@@ -6,11 +6,11 @@ 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 getattribute from './getattribute/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 getproperty from './getproperty/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
@@ -20,7 +20,6 @@ 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 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'
@@ -29,24 +28,25 @@ export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/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 populate from './populate/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 sorton from './sorton/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 renameproperty from './renameproperty/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
+export * as toarray from './toarray/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as toref from './toref/index.js'
+export * as totext from './totext/index.js'
+export * as tostring from './tostring/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

@@ -1,13 +1,13 @@
 export * as array from './array/index.js'
+export * as any from './any/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 any from './any/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as text from './text/index.js'
+export * as null from './null/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 array from './array/index.js'
+export * as any from './any/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 any from './any/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as text from './text/index.js'
+export * as null from './null/index.js'
 export * as string from './string/index.js'
+export * as text from './text/index.js'

package/agnostic/index.d.ts

@@ -5,12 +5,12 @@ export * as css from './css/index.js'
 export * as errors from './errors/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 optim from './optim/index.js'
-export * as numbers from './numbers/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
+export * as random from './random/index.js'
 export * as strings from './strings/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/index.js

@@ -5,12 +5,12 @@ export * as css from './css/index.js'
 export * as errors from './errors/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 optim from './optim/index.js'
-export * as numbers from './numbers/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
+export * as random from './random/index.js'
 export * as strings from './strings/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/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 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 cast from './cast/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as loremIpsum from './lorem-ipsum/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'

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 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 cast from './cast/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as loremIpsum from './lorem-ipsum/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'

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/objects/index.d.ts

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

package/agnostic/objects/index.js

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

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
-export * as duration from './duration/index.js'
 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 wait from './wait/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
-export * as duration from './duration/index.js'
 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 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/Scrllgngn/index.d.ts

@@ -71,13 +71,22 @@ export type PropsPage = {
  * - `'after'`  — forces blocks from pages after the current one.
  * - `'both'`   — forces blocks on both sides.
  * - `'none'`   — no forcing (default behaviour).
- * @property className - Optional additional class name(s) applied to the root element.
+ * @property stateHandlers - Optional callbacks invoked in response to
+ * component state changes.
+ * @property stateHandlers.pageChanged - Called whenever the current page
+ * changes. Receives the zero-based index of the current page and the
+ * corresponding page definition, if available.
+ * @property className - Optional additional class name(s) applied to the root
+ * element.
  */
 export type Props = WithClassName<{
     pages?: PropsPage[];
     thresholdOffsetPercent?: number;
     stickyBlocksLazyLoadDistance?: number;
     forceStickBlocks?: 'before' | 'after' | 'both' | 'none';
+    stateHandlers?: {
+        pageChanged?: (currentPagePos: number, pageData?: PropsPage) => void;
+    };
 }>;
 /**
  * Scrollytelling engine component. Orchestrates layered sticky blocks (`back`

package/components/Scrllgngn/index.js

@@ -48,7 +48,7 @@ import cssModule from './styles.module.css';
  * back-blocks layer, front-blocks layer, paginated scrolling content, and
  * bottom-bound sentinel.
  */
-export const Scrllgngn = ({ pages, thresholdOffsetPercent, stickyBlocksLazyLoadDistance = 2, forceStickBlocks, className }) => {
+export const Scrllgngn = ({ pages, thresholdOffsetPercent, stickyBlocksLazyLoadDistance = 2, forceStickBlocks, stateHandlers, className }) => {
     // State
     const [topVisible, setTopVis] = useState(false);
     const [contentVisible, setCntVis] = useState(false);
@@ -113,11 +113,14 @@ export const Scrllgngn = ({ pages, thresholdOffsetPercent, stickyBlocksLazyLoadD
     const handleTopBoundDetect = e => setTopVis(e.ioEntry?.isIntersecting ?? false);
     const handleCntDetect = e => setCntVis(e.ioEntry?.isIntersecting ?? false);
     const handleBtmBoundDetect = e => setBtmVis(e.ioEntry?.isIntersecting ?? false);
-    const handlePageChange = pages => {
-        const curPagePos = pages.findIndex(page => page.position === 'curr');
+    const handlePageChange = statePages => {
+        const curPagePos = statePages.findIndex(page => page.position === 'curr');
         if (curPagePos === -1)
             return;
-        return setCurrentPagePos(curPagePos);
+        if (curPagePos === currentPagePos)
+            return;
+        setCurrentPagePos(curPagePos);
+        stateHandlers?.pageChanged?.(curPagePos, pages?.[curPagePos]);
     };
     const handleResize = ({ boundingClientRect }) => {
         if (partialBoundingRect === undefined

package/components/index.d.ts

@@ -1,13 +1,15 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as disclaimer from './Disclaimer/index.js'
+export * as clippable from './Clippable/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
+export * as disclaimer from './Disclaimer/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 intersectionObserver from './IntersectionObserver/index.js'
 export * as overlayer from './Overlayer/index.js'
-export * as resizeObserver from './ResizeObserver/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 sequencer from './Sequencer/index.js'

package/components/index.js

@@ -1,13 +1,15 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as disclaimer from './Disclaimer/index.js'
+export * as clippable from './Clippable/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
+export * as disclaimer from './Disclaimer/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 intersectionObserver from './IntersectionObserver/index.js'
 export * as overlayer from './Overlayer/index.js'
-export * as resizeObserver from './ResizeObserver/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 sequencer from './Sequencer/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/index.d.ts

@@ -1,3 +1,3 @@
-export * as agnostic from './agnostic/index.js'
 export * as components from './components/index.js'
+export * as agnostic from './agnostic/index.js'
 export * as node from './node/index.js'

package/index.js

@@ -1,3 +1,3 @@
-export * as agnostic from './agnostic/index.js'
 export * as components from './components/index.js'
+export * as agnostic from './agnostic/index.js'
 export * as node from './node/index.js'

package/node/@aws-s3/storage/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/@aws-s3/storage/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/@google-cloud/storage/file/index.d.ts

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/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'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/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/@google-cloud/storage/file/index.js

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/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'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/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/@google-cloud/storage/index.d.ts

@@ -1,3 +1,3 @@
 export * as bucket from './bucket/index.js'
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

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

@@ -1,3 +1,3 @@
 export * as bucket from './bucket/index.js'
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

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

@@ -1,6 +1,6 @@
 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 copyFile from './copy-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'

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

@@ -1,6 +1,6 @@
 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 copyFile from './copy-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'

package/node/files/index.d.ts

@@ -1,3 +1,3 @@
 export * as isInDirectory from './is-in-directory/index.js'
-export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'
+export * as readWrite from './read-write/index.js'

package/node/files/index.js

@@ -1,3 +1,3 @@
 export * as isInDirectory from './is-in-directory/index.js'
-export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'
+export * as readWrite from './read-write/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 create from './create/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 create from './create/index.js'

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

@@ -7,8 +7,8 @@ export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
-export * as normalize from './normalize/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'

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

@@ -7,8 +7,8 @@ export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
-export * as normalize from './normalize/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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "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"
   }
 }