@design-edito/tools 0.5.25 → 0.5.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/agnostic/arrays/index.d.ts +1 -1
  2. package/agnostic/arrays/index.js +1 -1
  3. package/agnostic/colors/index.d.ts +2 -2
  4. package/agnostic/colors/index.js +2 -2
  5. package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts +6 -6
  6. package/agnostic/html/hyper-json/smart-tags/coalesced/index.js +6 -6
  7. package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts +1 -1
  8. package/agnostic/html/hyper-json/smart-tags/isolated/index.js +1 -1
  9. package/agnostic/html/index.d.ts +1 -1
  10. package/agnostic/html/index.js +1 -1
  11. package/agnostic/index.d.ts +6 -6
  12. package/agnostic/index.js +6 -6
  13. package/agnostic/misc/index.d.ts +2 -2
  14. package/agnostic/misc/index.js +2 -2
  15. package/agnostic/objects/index.d.ts +2 -2
  16. package/agnostic/objects/index.js +2 -2
  17. package/agnostic/strings/index.d.ts +2 -2
  18. package/agnostic/strings/index.js +2 -2
  19. package/components/Clippable/index.d.ts +12 -1
  20. package/components/Clippable/index.js +2 -2
  21. package/components/Overlayer/index.d.ts +12 -9
  22. package/components/Overlayer/index.js +20 -12
  23. package/components/index.d.ts +2 -2
  24. package/components/index.js +2 -2
  25. package/node/@google-cloud/storage/file/index.d.ts +1 -1
  26. package/node/@google-cloud/storage/file/index.js +1 -1
  27. package/node/@google-cloud/storage/index.d.ts +1 -1
  28. package/node/@google-cloud/storage/index.js +1 -1
  29. package/node/cloud-storage/index.d.ts +1 -1
  30. package/node/cloud-storage/index.js +1 -1
  31. package/node/cloud-storage/operations/index.d.ts +2 -2
  32. package/node/cloud-storage/operations/index.js +2 -2
  33. package/node/index.d.ts +2 -2
  34. package/node/index.js +2 -2
  35. package/node/process/index.d.ts +1 -1
  36. package/node/process/index.js +1 -1
  37. package/node/sftp/file/index.d.ts +2 -2
  38. package/node/sftp/file/index.js +2 -2
  39. package/package.json +1 -1
@@ -2,5 +2,5 @@ export * as dedupe from './dedupe/index.js'
2
2
  export * as findDuplicates from './find-duplicates/index.js'
3
3
  export * as isArrayOf from './is-array-of/index.js'
4
4
  export * as make from './make/index.js'
5
- export * as shuffle from './shuffle/index.js'
6
5
  export * as randomPick from './random-pick/index.js'
6
+ export * as shuffle from './shuffle/index.js'
@@ -2,5 +2,5 @@ export * as dedupe from './dedupe/index.js'
2
2
  export * as findDuplicates from './find-duplicates/index.js'
3
3
  export * as isArrayOf from './is-array-of/index.js'
4
4
  export * as make from './make/index.js'
5
- export * as shuffle from './shuffle/index.js'
6
5
  export * as randomPick from './random-pick/index.js'
6
+ export * as shuffle from './shuffle/index.js'
@@ -1,12 +1,12 @@
1
1
  export * as channels from './channels/index.js'
2
2
  export * as contrast from './contrast/index.js'
3
3
  export * as convert from './convert/index.js'
4
- export * as grayscale from './grayscale/index.js'
5
4
  export * as distance from './distance/index.js'
5
+ export * as grayscale from './grayscale/index.js'
6
6
  export * as invert from './invert/index.js'
7
- export * as palette from './palette/index.js'
8
7
  export * as lerp from './lerp/index.js'
9
8
  export * as luminance from './luminance/index.js'
9
+ export * as palette from './palette/index.js'
10
10
  export * as rotate from './rotate/index.js'
11
11
  export * as tidy from './tidy/index.js'
12
12
  export * as typechecks from './typechecks/index.js'
@@ -1,12 +1,12 @@
1
1
  export * as channels from './channels/index.js'
2
2
  export * as contrast from './contrast/index.js'
3
3
  export * as convert from './convert/index.js'
4
- export * as grayscale from './grayscale/index.js'
5
4
  export * as distance from './distance/index.js'
5
+ export * as grayscale from './grayscale/index.js'
6
6
  export * as invert from './invert/index.js'
7
- export * as palette from './palette/index.js'
8
7
  export * as lerp from './lerp/index.js'
9
8
  export * as luminance from './luminance/index.js'
9
+ export * as palette from './palette/index.js'
10
10
  export * as rotate from './rotate/index.js'
11
11
  export * as tidy from './tidy/index.js'
12
12
  export * as typechecks from './typechecks/index.js'
@@ -2,20 +2,20 @@ export * as add from './add/index.js'
2
2
  export * as addclass from './addclass/index.js'
3
3
  export * as and from './and/index.js'
4
4
  export * as append from './append/index.js'
5
- export * as at from './at/index.js'
6
5
  export * as call from './call/index.js'
7
6
  export * as clone from './clone/index.js'
8
7
  export * as deleteproperties from './deleteproperties/index.js'
9
8
  export * as equals from './equals/index.js'
10
- export * as getproperties from './getproperties/index.js'
11
9
  export * as getattribute from './getattribute/index.js'
10
+ export * as getproperties from './getproperties/index.js'
11
+ export * as at from './at/index.js'
12
12
  export * as getproperty from './getproperty/index.js'
13
13
  export * as hjparse from './hjparse/index.js'
14
14
  export * as hjstringify from './hjstringify/index.js'
15
- export * as initialize from './initialize/index.js'
16
15
  export * as if from './if/index.js'
17
16
  export * as join from './join/index.js'
18
17
  export * as length from './length/index.js'
18
+ export * as initialize from './initialize/index.js'
19
19
  export * as map from './map/index.js'
20
20
  export * as negate from './negate/index.js'
21
21
  export * as notrailing from './notrailing/index.js'
@@ -23,8 +23,8 @@ export * as or from './or/index.js'
23
23
  export * as pickrandom from './pickrandom/index.js'
24
24
  export * as populate from './populate/index.js'
25
25
  export * as print from './print/index.js'
26
- export * as pusheach from './pusheach/index.js'
27
26
  export * as push from './push/index.js'
27
+ export * as pusheach from './pusheach/index.js'
28
28
  export * as recordtoarray from './recordtoarray/index.js'
29
29
  export * as removeattribute from './removeattribute/index.js'
30
30
  export * as removeclass from './removeclass/index.js'
@@ -35,8 +35,8 @@ export * as set from './set/index.js'
35
35
  export * as setattribute from './setattribute/index.js'
36
36
  export * as setproperty from './setproperty/index.js'
37
37
  export * as sorton from './sorton/index.js'
38
- export * as spread from './spread/index.js'
39
38
  export * as split from './split/index.js'
39
+ export * as spread from './spread/index.js'
40
40
  export * as toarray from './toarray/index.js'
41
41
  export * as toboolean from './toboolean/index.js'
42
42
  export * as toelement from './toelement/index.js'
@@ -46,7 +46,7 @@ export * as tonull from './tonull/index.js'
46
46
  export * as tonumber from './tonumber/index.js'
47
47
  export * as torecord from './torecord/index.js'
48
48
  export * as toref from './toref/index.js'
49
- export * as totext from './totext/index.js'
50
49
  export * as tostring from './tostring/index.js'
50
+ export * as totext from './totext/index.js'
51
51
  export * as transformselected from './transformselected/index.js'
52
52
  export * as trim from './trim/index.js'
@@ -2,20 +2,20 @@ export * as add from './add/index.js'
2
2
  export * as addclass from './addclass/index.js'
3
3
  export * as and from './and/index.js'
4
4
  export * as append from './append/index.js'
5
- export * as at from './at/index.js'
6
5
  export * as call from './call/index.js'
7
6
  export * as clone from './clone/index.js'
8
7
  export * as deleteproperties from './deleteproperties/index.js'
9
8
  export * as equals from './equals/index.js'
10
- export * as getproperties from './getproperties/index.js'
11
9
  export * as getattribute from './getattribute/index.js'
10
+ export * as getproperties from './getproperties/index.js'
11
+ export * as at from './at/index.js'
12
12
  export * as getproperty from './getproperty/index.js'
13
13
  export * as hjparse from './hjparse/index.js'
14
14
  export * as hjstringify from './hjstringify/index.js'
15
- export * as initialize from './initialize/index.js'
16
15
  export * as if from './if/index.js'
17
16
  export * as join from './join/index.js'
18
17
  export * as length from './length/index.js'
18
+ export * as initialize from './initialize/index.js'
19
19
  export * as map from './map/index.js'
20
20
  export * as negate from './negate/index.js'
21
21
  export * as notrailing from './notrailing/index.js'
@@ -23,8 +23,8 @@ export * as or from './or/index.js'
23
23
  export * as pickrandom from './pickrandom/index.js'
24
24
  export * as populate from './populate/index.js'
25
25
  export * as print from './print/index.js'
26
- export * as pusheach from './pusheach/index.js'
27
26
  export * as push from './push/index.js'
27
+ export * as pusheach from './pusheach/index.js'
28
28
  export * as recordtoarray from './recordtoarray/index.js'
29
29
  export * as removeattribute from './removeattribute/index.js'
30
30
  export * as removeclass from './removeclass/index.js'
@@ -35,8 +35,8 @@ export * as set from './set/index.js'
35
35
  export * as setattribute from './setattribute/index.js'
36
36
  export * as setproperty from './setproperty/index.js'
37
37
  export * as sorton from './sorton/index.js'
38
- export * as spread from './spread/index.js'
39
38
  export * as split from './split/index.js'
39
+ export * as spread from './spread/index.js'
40
40
  export * as toarray from './toarray/index.js'
41
41
  export * as toboolean from './toboolean/index.js'
42
42
  export * as toelement from './toelement/index.js'
@@ -46,7 +46,7 @@ export * as tonull from './tonull/index.js'
46
46
  export * as tonumber from './tonumber/index.js'
47
47
  export * as torecord from './torecord/index.js'
48
48
  export * as toref from './toref/index.js'
49
- export * as totext from './totext/index.js'
50
49
  export * as tostring from './tostring/index.js'
50
+ export * as totext from './totext/index.js'
51
51
  export * as transformselected from './transformselected/index.js'
52
52
  export * as trim from './trim/index.js'
@@ -9,5 +9,5 @@ export * as null from './null/index.js'
9
9
  export * as number from './number/index.js'
10
10
  export * as record from './record/index.js'
11
11
  export * as string from './string/index.js'
12
- export * as text from './text/index.js'
13
12
  export * as ref from './ref/index.js'
13
+ export * as text from './text/index.js'
@@ -9,5 +9,5 @@ export * as null from './null/index.js'
9
9
  export * as number from './number/index.js'
10
10
  export * as record from './record/index.js'
11
11
  export * as string from './string/index.js'
12
- export * as text from './text/index.js'
13
12
  export * as ref from './ref/index.js'
13
+ export * as text from './text/index.js'
@@ -1,4 +1,3 @@
1
- export * as deepSelect from './deep-select/index.js'
2
1
  export * as getNodeAncestors from './get-node-ancestors/index.js'
3
2
  export * as getPositionInsideParent from './get-position-inside-parent/index.js'
4
3
  export * as hyperJson from './hyper-json/index.js'
@@ -8,3 +7,4 @@ export * as replaceInElement from './replace-in-element/index.js'
8
7
  export * as selectorToElement from './selector-to-element/index.js'
9
8
  export * as stringToNodes from './string-to-nodes/index.js'
10
9
  export * as watchSelection from './watch-selection/index.js'
10
+ export * as deepSelect from './deep-select/index.js'
@@ -1,4 +1,3 @@
1
- export * as deepSelect from './deep-select/index.js'
2
1
  export * as getNodeAncestors from './get-node-ancestors/index.js'
3
2
  export * as getPositionInsideParent from './get-position-inside-parent/index.js'
4
3
  export * as hyperJson from './hyper-json/index.js'
@@ -8,3 +7,4 @@ export * as replaceInElement from './replace-in-element/index.js'
8
7
  export * as selectorToElement from './selector-to-element/index.js'
9
8
  export * as stringToNodes from './string-to-nodes/index.js'
10
9
  export * as watchSelection from './watch-selection/index.js'
10
+ export * as deepSelect from './deep-select/index.js'
@@ -1,17 +1,17 @@
1
- export * as booleans from './booleans/index.js'
2
1
  export * as arrays from './arrays/index.js'
3
- export * as css from './css/index.js'
2
+ export * as booleans from './booleans/index.js'
4
3
  export * as colors from './colors/index.js'
5
- export * as html from './html/index.js'
4
+ export * as css from './css/index.js'
6
5
  export * as errors from './errors/index.js'
6
+ export * as html from './html/index.js'
7
7
  export * as misc from './misc/index.js'
8
8
  export * as numbers from './numbers/index.js'
9
- export * as optim from './optim/index.js'
10
9
  export * as objects from './objects/index.js'
11
- export * as regexps from './regexps/index.js'
12
10
  export * as random from './random/index.js'
11
+ export * as optim from './optim/index.js'
12
+ export * as regexps from './regexps/index.js'
13
+ export * as sanitization from './sanitization/index.js'
13
14
  export * as strings from './strings/index.js'
14
15
  export * as subtitles from './subtitles/index.js'
15
16
  export * as time from './time/index.js'
16
- export * as sanitization from './sanitization/index.js'
17
17
  export * as typescript from './typescript/index.js'
package/agnostic/index.js CHANGED
@@ -1,17 +1,17 @@
1
- export * as booleans from './booleans/index.js'
2
1
  export * as arrays from './arrays/index.js'
3
- export * as css from './css/index.js'
2
+ export * as booleans from './booleans/index.js'
4
3
  export * as colors from './colors/index.js'
5
- export * as html from './html/index.js'
4
+ export * as css from './css/index.js'
6
5
  export * as errors from './errors/index.js'
6
+ export * as html from './html/index.js'
7
7
  export * as misc from './misc/index.js'
8
8
  export * as numbers from './numbers/index.js'
9
- export * as optim from './optim/index.js'
10
9
  export * as objects from './objects/index.js'
11
- export * as regexps from './regexps/index.js'
12
10
  export * as random from './random/index.js'
11
+ export * as optim from './optim/index.js'
12
+ export * as regexps from './regexps/index.js'
13
+ export * as sanitization from './sanitization/index.js'
13
14
  export * as strings from './strings/index.js'
14
15
  export * as subtitles from './subtitles/index.js'
15
16
  export * as time from './time/index.js'
16
- export * as sanitization from './sanitization/index.js'
17
17
  export * as typescript from './typescript/index.js'
@@ -1,11 +1,11 @@
1
1
  export * as assert from './assert/index.js'
2
2
  export * as cast from './cast/index.js'
3
+ export * as connection from './connection/index.js'
3
4
  export * as crawler from './crawler/index.js'
4
5
  export * as crossenv from './crossenv/index.js'
5
- export * as connection from './connection/index.js'
6
6
  export * as dataSize from './data-size/index.js'
7
- export * as isNullish from './is-nullish/index.js'
8
7
  export * as isConstructorFunction from './is-constructor-function/index.js'
8
+ export * as isNullish from './is-nullish/index.js'
9
9
  export * as logs from './logs/index.js'
10
10
  export * as loremIpsum from './lorem-ipsum/index.js'
11
11
  export * as normalizeExtension from './normalize-extension/index.js'
@@ -1,11 +1,11 @@
1
1
  export * as assert from './assert/index.js'
2
2
  export * as cast from './cast/index.js'
3
+ export * as connection from './connection/index.js'
3
4
  export * as crawler from './crawler/index.js'
4
5
  export * as crossenv from './crossenv/index.js'
5
- export * as connection from './connection/index.js'
6
6
  export * as dataSize from './data-size/index.js'
7
- export * as isNullish from './is-nullish/index.js'
8
7
  export * as isConstructorFunction from './is-constructor-function/index.js'
8
+ export * as isNullish from './is-nullish/index.js'
9
9
  export * as logs from './logs/index.js'
10
10
  export * as loremIpsum from './lorem-ipsum/index.js'
11
11
  export * as normalizeExtension from './normalize-extension/index.js'
@@ -1,9 +1,9 @@
1
1
  export * as deepGetProperty from './deep-get-property/index.js'
2
- export * as flattenGetters from './flatten-getters/index.js'
3
2
  export * as enums from './enums/index.js'
3
+ export * as flattenGetters from './flatten-getters/index.js'
4
4
  export * as isObject from './is-object/index.js'
5
5
  export * as isRecord from './is-record/index.js'
6
6
  export * as recordFormat from './record-format/index.js'
7
7
  export * as recordMap from './record-map/index.js'
8
- export * as validation from './validation/index.js'
9
8
  export * as sortKeys from './sort-keys/index.js'
9
+ export * as validation from './validation/index.js'
@@ -1,9 +1,9 @@
1
1
  export * as deepGetProperty from './deep-get-property/index.js'
2
- export * as flattenGetters from './flatten-getters/index.js'
3
2
  export * as enums from './enums/index.js'
3
+ export * as flattenGetters from './flatten-getters/index.js'
4
4
  export * as isObject from './is-object/index.js'
5
5
  export * as isRecord from './is-record/index.js'
6
6
  export * as recordFormat from './record-format/index.js'
7
7
  export * as recordMap from './record-map/index.js'
8
- export * as validation from './validation/index.js'
9
8
  export * as sortKeys from './sort-keys/index.js'
9
+ export * as validation from './validation/index.js'
@@ -1,8 +1,8 @@
1
1
  export * as charCodes from './char-codes/index.js'
2
2
  export * as matches from './matches/index.js'
3
3
  export * as normalizeIndent from './normalize-indent/index.js'
4
+ export * as parseTable from './parse-table/index.js'
4
5
  export * as replaceAll from './replace-all/index.js'
5
6
  export * as splitTrim from './split-trim/index.js'
6
- export * as trim from './trim/index.js'
7
7
  export * as toAlphanum from './to-alphanum/index.js'
8
- export * as parseTable from './parse-table/index.js'
8
+ export * as trim from './trim/index.js'
@@ -1,8 +1,8 @@
1
1
  export * as charCodes from './char-codes/index.js'
2
2
  export * as matches from './matches/index.js'
3
3
  export * as normalizeIndent from './normalize-indent/index.js'
4
+ export * as parseTable from './parse-table/index.js'
4
5
  export * as replaceAll from './replace-all/index.js'
5
6
  export * as splitTrim from './split-trim/index.js'
6
- export * as trim from './trim/index.js'
7
7
  export * as toAlphanum from './to-alphanum/index.js'
8
- export * as parseTable from './parse-table/index.js'
8
+ export * as trim from './trim/index.js'
@@ -1,4 +1,4 @@
1
- import { type PropsWithChildren, type FunctionComponent, type MouseEvent } from 'react';
1
+ import { type PropsWithChildren, type FunctionComponent, type MouseEvent, type ReactNode } from 'react';
2
2
  import type { WithClassName } from '../utils/types.js';
3
3
  /**
4
4
  * Props for the {@link Clippable} component.
@@ -6,6 +6,15 @@ import type { WithClassName } from '../utils/types.js';
6
6
  * @property toClip - Content written to the clipboard. When omitted, the
7
7
  * content container's `innerHTML` is used. A function may be provided to
8
8
  * transform that current content before it is written.
9
+ * @property copyBtnContent - What the copy button shows at rest. Left out, the button
10
+ * renders empty and a stylesheet fills it — `:empty::before` — which is how every
11
+ * control in this library takes its default look without the component deciding on a
12
+ * word or a glyph.
13
+ * @property clippedBtnContent - What it shows during the three seconds after a
14
+ * successful write. Left out, the button is empty in that state too, and the same
15
+ * stylesheet hook applies. It does **not** fall back to `copyBtnContent`: the two states
16
+ * say different things, and an article that names one without the other means the other
17
+ * to come from the stylesheet.
9
18
  * @property onCopyClicked - Called when the copy button is clicked, before the
10
19
  * clipboard content is resolved, with the container's raw HTML.
11
20
  * @property onClipped - Called once content has been written to the clipboard.
@@ -17,6 +26,8 @@ import type { WithClassName } from '../utils/types.js';
17
26
  */
18
27
  export type Props = PropsWithChildren<WithClassName<{
19
28
  toClip?: string | ((curr: string | undefined) => string | undefined);
29
+ copyBtnContent?: ReactNode;
30
+ clippedBtnContent?: ReactNode;
20
31
  onCopyClicked?: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, rawContent: string | undefined) => void;
21
32
  onClipped?: (content: string) => void;
22
33
  onCopyFailed?: (error: unknown) => void;
@@ -26,7 +26,7 @@ const clippedModifierDurationMs = 3000;
26
26
  * unset) and leaves the component untouched: neither `onClipped` nor the
27
27
  * `clipped` modifier fires.
28
28
  */
29
- export const Clippable = ({ className, children, toClip, onCopyClicked, onClipped, onCopyFailed }) => {
29
+ export const Clippable = ({ className, children, toClip, copyBtnContent, clippedBtnContent, onCopyClicked, onClipped, onCopyFailed }) => {
30
30
  // State & refs
31
31
  const [hasBeenRecentlyClipped, setHasBeenRecentlyClipped] = useState(false);
32
32
  const contentRef = useRef(null);
@@ -71,5 +71,5 @@ export const Clippable = ({ className, children, toClip, onCopyClicked, onClippe
71
71
  }), className);
72
72
  const copyClss = c('copy');
73
73
  const contentClss = c('content');
74
- 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 })] });
74
+ return _jsxs("div", { className: rootClss, children: [_jsx("button", { type: 'button', className: copyClss, onClick: e => { void handleCopyClick(e); }, children: hasBeenRecentlyClipped ? clippedBtnContent : copyBtnContent }), _jsx("div", { ref: contentRef, className: contentClss, children: children })] });
75
75
  };
@@ -34,9 +34,10 @@ export type Props = PropsWithChildren<WithClassName<{
34
34
  overlays?: Overlay[];
35
35
  }>>;
36
36
  /**
37
- * Absolute positioning overlay component. Renders a base content layer and
38
- * stacks one or more overlays on top of it, each independently positioned via
39
- * percentage coordinates and a justify alignment.
37
+ * Positions overlays over a base layer — **by publishing where they go, not by placing
38
+ * them**. Each overlay carries its anchor and its shift as custom properties, and a
39
+ * consumer's stylesheet turns them into a position. Naked like the rest of the library:
40
+ * without such a sheet, the overlays render in the flow, under the base.
40
41
  *
41
42
  * ### Child elements
42
43
  * - `__base` — wrapping `<div>` that contains `children`.
@@ -44,12 +45,14 @@ export type Props = PropsWithChildren<WithClassName<{
44
45
  * are omitted).
45
46
  *
46
47
  * ### CSS custom properties on each overlay element
47
- * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
48
- * to set the horizontal anchor position.
49
- * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
50
- * to set the vertical anchor position.
51
- * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
52
- * the overlay relative to its anchor.
48
+ * **They are the whole of what this component does**, and they are public: it computes
49
+ * three values and writes them down, and a consumer's stylesheet decides what to do with
50
+ * them. It renders no positioning of its own — `styles.module.css` is empty, as for every
51
+ * component here whose JavaScript measures nothing.
52
+ * - `--lm-overlayer-anchor-x` — `xPercent` as a percentage (e.g. `42%`).
53
+ * - `--lm-overlayer-anchor-y` — `yPercent` as a percentage (e.g. `10%`).
54
+ * - `--lm-overlayer-translate-x` — `justify` as the shift it means: `0%` for `'left'`,
55
+ * `-50%` for `'center'`, `-100%` for `'right'`, `-n%` for a number.
53
56
  *
54
57
  * @param props - Component properties.
55
58
  * @see {@link Props}
@@ -5,9 +5,10 @@ import { mergeClassNames } from '../utils/index.js';
5
5
  import { overlayer as publicClassName } from '../public-classnames.js';
6
6
  import cssModule from './styles.module.css';
7
7
  /**
8
- * Absolute positioning overlay component. Renders a base content layer and
9
- * stacks one or more overlays on top of it, each independently positioned via
10
- * percentage coordinates and a justify alignment.
8
+ * Positions overlays over a base layer — **by publishing where they go, not by placing
9
+ * them**. Each overlay carries its anchor and its shift as custom properties, and a
10
+ * consumer's stylesheet turns them into a position. Naked like the rest of the library:
11
+ * without such a sheet, the overlays render in the flow, under the base.
11
12
  *
12
13
  * ### Child elements
13
14
  * - `__base` — wrapping `<div>` that contains `children`.
@@ -15,12 +16,14 @@ import cssModule from './styles.module.css';
15
16
  * are omitted).
16
17
  *
17
18
  * ### CSS custom properties on each overlay element
18
- * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
19
- * to set the horizontal anchor position.
20
- * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
21
- * to set the vertical anchor position.
22
- * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
23
- * the overlay relative to its anchor.
19
+ * **They are the whole of what this component does**, and they are public: it computes
20
+ * three values and writes them down, and a consumer's stylesheet decides what to do with
21
+ * them. It renders no positioning of its own — `styles.module.css` is empty, as for every
22
+ * component here whose JavaScript measures nothing.
23
+ * - `--lm-overlayer-anchor-x` — `xPercent` as a percentage (e.g. `42%`).
24
+ * - `--lm-overlayer-anchor-y` — `yPercent` as a percentage (e.g. `10%`).
25
+ * - `--lm-overlayer-translate-x` — `justify` as the shift it means: `0%` for `'left'`,
26
+ * `-50%` for `'center'`, `-100%` for `'right'`, `-n%` for a number.
24
27
  *
25
28
  * @param props - Component properties.
26
29
  * @see {@link Props}
@@ -48,10 +51,15 @@ export const Overlayer = ({ overlays, children, className }) => {
48
51
  else {
49
52
  computedTranslateX = '-50%';
50
53
  }
54
+ // Written out in full, one literal per line: they are this component's public API,
55
+ // a consumer greps for the exact string, and it has to exist in the source they
56
+ // read. Public and not `--PRIVATE-`, because they are a conversion of props an
57
+ // article wrote — three numbers given back as percentages — and not a mechanism
58
+ // this component keeps to itself.
51
59
  const overlayCustomProps = {
52
- '--PRIVATE-left': `${xPercent}%`,
53
- '--PRIVATE-top': `${yPercent}%`,
54
- '--PRIVATE-translate-x': computedTranslateX
60
+ '--lm-overlayer-anchor-x': `${xPercent}%`,
61
+ '--lm-overlayer-anchor-y': `${yPercent}%`,
62
+ '--lm-overlayer-translate-x': computedTranslateX
55
63
  };
56
64
  if (isFalsy(overlayChildren))
57
65
  return null;
@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
5
5
  export * as drawer from './Drawer/index.js'
6
6
  export * as eventListener from './EventListener/index.js'
7
7
  export * as gallery from './Gallery/index.js'
8
- export * as iframe from './Iframe/index.js'
9
8
  export * as image from './Image/index.js'
9
+ export * as iframe from './Iframe/index.js'
10
10
  export * as input from './Input/index.js'
11
11
  export * as intersectionObserver from './IntersectionObserver/index.js'
12
12
  export * as jsonEditor from './JsonEditor/index.js'
@@ -22,8 +22,8 @@ export * as sequencer from './Sequencer/index.js'
22
22
  export * as shadowRoot from './ShadowRoot/index.js'
23
23
  export * as subtitles from './Subtitles/index.js'
24
24
  export * as textarea from './Textarea/index.js'
25
- export * as video from './Video/index.js'
26
25
  export * as uiModule from './UIModule/index.js'
26
+ export * as video from './Video/index.js'
27
27
  export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
28
28
  export * as wipIcon from './_WIP_Icon/index.js'
29
29
  export * as utils from './utils/index.js'
@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
5
5
  export * as drawer from './Drawer/index.js'
6
6
  export * as eventListener from './EventListener/index.js'
7
7
  export * as gallery from './Gallery/index.js'
8
- export * as iframe from './Iframe/index.js'
9
8
  export * as image from './Image/index.js'
9
+ export * as iframe from './Iframe/index.js'
10
10
  export * as input from './Input/index.js'
11
11
  export * as intersectionObserver from './IntersectionObserver/index.js'
12
12
  export * as jsonEditor from './JsonEditor/index.js'
@@ -22,8 +22,8 @@ export * as sequencer from './Sequencer/index.js'
22
22
  export * as shadowRoot from './ShadowRoot/index.js'
23
23
  export * as subtitles from './Subtitles/index.js'
24
24
  export * as textarea from './Textarea/index.js'
25
- export * as video from './Video/index.js'
26
25
  export * as uiModule from './UIModule/index.js'
26
+ export * as video from './Video/index.js'
27
27
  export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
28
28
  export * as wipIcon from './_WIP_Icon/index.js'
29
29
  export * as utils from './utils/index.js'
@@ -1,6 +1,6 @@
1
1
  export * as copy from './copy/index.js'
2
- export * as exists from './exists/index.js'
3
2
  export * as download from './download/index.js'
3
+ export * as exists from './exists/index.js'
4
4
  export * as generateSignedUrl from './generate-signed-url/index.js'
5
5
  export * as getMetadata from './get-metadata/index.js'
6
6
  export * as getPermissions from './get-permissions/index.js'
@@ -1,6 +1,6 @@
1
1
  export * as copy from './copy/index.js'
2
- export * as exists from './exists/index.js'
3
2
  export * as download from './download/index.js'
3
+ export * as exists from './exists/index.js'
4
4
  export * as generateSignedUrl from './generate-signed-url/index.js'
5
5
  export * as getMetadata from './get-metadata/index.js'
6
6
  export * as getPermissions from './get-permissions/index.js'
@@ -1,3 +1,3 @@
1
1
  export * as bucket from './bucket/index.js'
2
- export * as file from './file/index.js'
3
2
  export * as directory from './directory/index.js'
3
+ export * as file from './file/index.js'
@@ -1,3 +1,3 @@
1
1
  export * as bucket from './bucket/index.js'
2
- export * as file from './file/index.js'
3
2
  export * as directory from './directory/index.js'
3
+ export * as file from './file/index.js'
@@ -1,2 +1,2 @@
1
- export * as clients from './clients/index.js'
2
1
  export * as operations from './operations/index.js'
2
+ export * as clients from './clients/index.js'
@@ -1,2 +1,2 @@
1
- export * as clients from './clients/index.js'
2
1
  export * as operations from './operations/index.js'
2
+ export * as clients from './clients/index.js'
@@ -1,11 +1,11 @@
1
1
  export * as copyDir from './copy-dir/index.js'
2
2
  export * as copyFile from './copy-file/index.js'
3
- export * as downloadFile from './download-file/index.js'
4
- export * as existsFile from './exists-file/index.js'
5
3
  export * as listDir from './list-dir/index.js'
6
4
  export * as moveDir from './move-dir/index.js'
7
5
  export * as moveFile from './move-file/index.js'
6
+ export * as downloadFile from './download-file/index.js'
8
7
  export * as removeDir from './remove-dir/index.js'
9
8
  export * as removeFile from './remove-file/index.js'
10
9
  export * as statFile from './stat-file/index.js'
10
+ export * as existsFile from './exists-file/index.js'
11
11
  export * as uploadFile from './upload-file/index.js'
@@ -1,11 +1,11 @@
1
1
  export * as copyDir from './copy-dir/index.js'
2
2
  export * as copyFile from './copy-file/index.js'
3
- export * as downloadFile from './download-file/index.js'
4
- export * as existsFile from './exists-file/index.js'
5
3
  export * as listDir from './list-dir/index.js'
6
4
  export * as moveDir from './move-dir/index.js'
7
5
  export * as moveFile from './move-file/index.js'
6
+ export * as downloadFile from './download-file/index.js'
8
7
  export * as removeDir from './remove-dir/index.js'
9
8
  export * as removeFile from './remove-file/index.js'
10
9
  export * as statFile from './stat-file/index.js'
10
+ export * as existsFile from './exists-file/index.js'
11
11
  export * as uploadFile from './upload-file/index.js'
package/node/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  export * as awsS3 from './@aws-s3/index.js'
2
2
  export * as designEdito from './@design-edito/index.js'
3
3
  export * as express from './@express/index.js'
4
- export * as cloudStorage from './cloud-storage/index.js'
5
4
  export * as googleCloud from './@google-cloud/index.js'
5
+ export * as cloudStorage from './cloud-storage/index.js'
6
6
  export * as encryption from './encryption/index.js'
7
7
  export * as files from './files/index.js'
8
8
  export * as ftps from './ftps/index.js'
9
9
  export * as images from './images/index.js'
10
- export * as process from './process/index.js'
11
10
  export * as sftp from './sftp/index.js'
11
+ export * as process from './process/index.js'
package/node/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  export * as awsS3 from './@aws-s3/index.js'
2
2
  export * as designEdito from './@design-edito/index.js'
3
3
  export * as express from './@express/index.js'
4
- export * as cloudStorage from './cloud-storage/index.js'
5
4
  export * as googleCloud from './@google-cloud/index.js'
5
+ export * as cloudStorage from './cloud-storage/index.js'
6
6
  export * as encryption from './encryption/index.js'
7
7
  export * as files from './files/index.js'
8
8
  export * as ftps from './ftps/index.js'
9
9
  export * as images from './images/index.js'
10
- export * as process from './process/index.js'
11
10
  export * as sftp from './sftp/index.js'
11
+ export * as process from './process/index.js'
@@ -1,3 +1,3 @@
1
1
  export * as onExit from './on-exit/index.js'
2
- export * as spawner from './spawner/index.js'
3
2
  export * as promptContinue from './prompt-continue/index.js'
3
+ export * as spawner from './spawner/index.js'
@@ -1,3 +1,3 @@
1
1
  export * as onExit from './on-exit/index.js'
2
- export * as spawner from './spawner/index.js'
3
2
  export * as promptContinue from './prompt-continue/index.js'
3
+ export * as spawner from './spawner/index.js'
@@ -1,7 +1,7 @@
1
1
  export * as copy from './copy/index.js'
2
2
  export * as download from './download/index.js'
3
- export * as remove from './remove/index.js'
4
- export * as move from './move/index.js'
5
3
  export * as exists from './exists/index.js'
4
+ export * as move from './move/index.js'
5
+ export * as remove from './remove/index.js'
6
6
  export * as stat from './stat/index.js'
7
7
  export * as upload from './upload/index.js'
@@ -1,7 +1,7 @@
1
1
  export * as copy from './copy/index.js'
2
2
  export * as download from './download/index.js'
3
- export * as remove from './remove/index.js'
4
- export * as move from './move/index.js'
5
3
  export * as exists from './exists/index.js'
4
+ export * as move from './move/index.js'
5
+ export * as remove from './remove/index.js'
6
6
  export * as stat from './stat/index.js'
7
7
  export * as upload from './upload/index.js'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design-edito/tools",
3
- "version": "0.5.25",
3
+ "version": "0.5.28",
4
4
  "description": "",
5
5
  "author": "Maxime Fabas",
6
6
  "license": "ISC",