@trebired/frontend 28.2.0 → 29.1.0
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.
- package/CHANGELOG.md +36 -0
- package/README.md +84 -20
- package/dist/actions/copy-components.js +1 -1
- package/dist/actions/copy-components.js.map +1 -1
- package/dist/config/default/component-tokens.d.ts +2 -0
- package/dist/config/default/component-tokens.d.ts.map +1 -1
- package/dist/config/default/component-tokens.js +1 -0
- package/dist/config/default/component-tokens.js.map +1 -1
- package/dist/config/default/config.d.ts.map +1 -1
- package/dist/config/default/config.js +3 -0
- package/dist/config/default/config.js.map +1 -1
- package/dist/config/default/primitive-tokens.d.ts +1 -0
- package/dist/config/default/primitive-tokens.d.ts.map +1 -1
- package/dist/config/default/primitive-tokens.js +1 -0
- package/dist/config/default/primitive-tokens.js.map +1 -1
- package/dist/config/index.d.ts +1 -1
- package/dist/config/index.d.ts.map +1 -1
- package/dist/config/index.js.map +1 -1
- package/dist/config/links.d.ts +5 -0
- package/dist/config/links.d.ts.map +1 -0
- package/dist/config/links.js +134 -0
- package/dist/config/links.js.map +1 -0
- package/dist/config/normalize.d.ts.map +1 -1
- package/dist/config/normalize.js +15 -5
- package/dist/config/normalize.js.map +1 -1
- package/dist/config/scss.d.ts.map +1 -1
- package/dist/config/scss.js +9 -1
- package/dist/config/scss.js.map +1 -1
- package/dist/config/titles.d.ts +28 -0
- package/dist/config/titles.d.ts.map +1 -0
- package/dist/config/titles.js +178 -0
- package/dist/config/titles.js.map +1 -0
- package/dist/config/types/design.d.ts +3 -0
- package/dist/config/types/design.d.ts.map +1 -1
- package/dist/config/types/language.d.ts +16 -0
- package/dist/config/types/language.d.ts.map +1 -0
- package/dist/config/types/language.js +2 -0
- package/dist/config/types/language.js.map +1 -0
- package/dist/config/types/links.d.ts +71 -0
- package/dist/config/types/links.d.ts.map +1 -0
- package/dist/config/types/links.js +2 -0
- package/dist/config/types/links.js.map +1 -0
- package/dist/config/types.d.ts +8 -16
- package/dist/config/types.d.ts.map +1 -1
- package/dist/config/typography.d.ts +2 -1
- package/dist/config/typography.d.ts.map +1 -1
- package/dist/config/typography.js +14 -1
- package/dist/config/typography.js.map +1 -1
- package/dist/document/components/index.js +1 -1
- package/dist/document/components/index.js.map +1 -1
- package/dist/editor/components/surface.js +1 -1
- package/dist/editor/components/surface.js.map +1 -1
- package/dist/entity/list.js +1 -1
- package/dist/entity/list.js.map +1 -1
- package/dist/entries/react/02.d.ts +1 -1
- package/dist/entries/react/02.d.ts.map +1 -1
- package/dist/entries/react/02.js +1 -1
- package/dist/entries/react/02.js.map +1 -1
- package/dist/entries/root/02.d.ts +1 -1
- package/dist/entries/root/02.d.ts.map +1 -1
- package/dist/entries/root/02.js +1 -1
- package/dist/entries/root/02.js.map +1 -1
- package/dist/graph/advanced/graph/details.js +1 -1
- package/dist/graph/advanced/graph/details.js.map +1 -1
- package/dist/heading/glyphs.d.ts +7 -0
- package/dist/heading/glyphs.d.ts.map +1 -0
- package/dist/heading/glyphs.js +79 -0
- package/dist/heading/glyphs.js.map +1 -0
- package/dist/heading/index.d.ts +3 -1
- package/dist/heading/index.d.ts.map +1 -1
- package/dist/heading/index.js +19 -4
- package/dist/heading/index.js.map +1 -1
- package/dist/hollow/bitmap.d.ts +5 -0
- package/dist/hollow/bitmap.d.ts.map +1 -0
- package/dist/hollow/bitmap.js +45 -0
- package/dist/hollow/bitmap.js.map +1 -0
- package/dist/hollow/component.d.ts +18 -0
- package/dist/hollow/component.d.ts.map +1 -0
- package/dist/hollow/component.js +44 -0
- package/dist/hollow/component.js.map +1 -0
- package/dist/hollow/index.d.ts +7 -0
- package/dist/hollow/index.d.ts.map +1 -0
- package/dist/hollow/index.js +4 -0
- package/dist/hollow/index.js.map +1 -0
- package/dist/hollow/print.d.ts +19 -0
- package/dist/hollow/print.d.ts.map +1 -0
- package/dist/hollow/print.js +103 -0
- package/dist/hollow/print.js.map +1 -0
- package/dist/hollow/shapes.d.ts +11 -0
- package/dist/hollow/shapes.d.ts.map +1 -0
- package/dist/hollow/shapes.js +65 -0
- package/dist/hollow/shapes.js.map +1 -0
- package/dist/hollow/styles/index.scss +56 -0
- package/dist/inputs/styles/primitives.scss +7 -2
- package/dist/language/source/modal.js +1 -1
- package/dist/language/source/modal.js.map +1 -1
- package/dist/language/source/visualizer.js +1 -1
- package/dist/language/source/visualizer.js.map +1 -1
- package/dist/layer/index.d.ts +2 -1
- package/dist/layer/index.d.ts.map +1 -1
- package/dist/layer/index.js +6 -2
- package/dist/layer/index.js.map +1 -1
- package/dist/layout/components/outline.d.ts +20 -4
- package/dist/layout/components/outline.d.ts.map +1 -1
- package/dist/layout/components/outline.js +147 -70
- package/dist/layout/components/outline.js.map +1 -1
- package/dist/layout/components/outline_dock.d.ts +5 -0
- package/dist/layout/components/outline_dock.d.ts.map +1 -0
- package/dist/layout/components/outline_dock.js +139 -0
- package/dist/layout/components/outline_dock.js.map +1 -0
- package/dist/layout/components/site/category.d.ts +11 -0
- package/dist/layout/components/site/category.d.ts.map +1 -0
- package/dist/layout/components/site/category.js +9 -0
- package/dist/layout/components/site/category.js.map +1 -0
- package/dist/layout/components/site/footer.d.ts +3 -17
- package/dist/layout/components/site/footer.d.ts.map +1 -1
- package/dist/layout/components/site/footer.js +16 -15
- package/dist/layout/components/site/footer.js.map +1 -1
- package/dist/layout/components/site/header/groups.d.ts +2 -0
- package/dist/layout/components/site/header/groups.d.ts.map +1 -1
- package/dist/layout/components/site/header/groups.js +6 -6
- package/dist/layout/components/site/header/groups.js.map +1 -1
- package/dist/layout/components/site/header.d.ts +0 -1
- package/dist/layout/components/site/header.d.ts.map +1 -1
- package/dist/layout/components/site/header.js +8 -3
- package/dist/layout/components/site/header.js.map +1 -1
- package/dist/layout/components/site/link.d.ts +6 -3
- package/dist/layout/components/site/link.d.ts.map +1 -1
- package/dist/layout/components/site/link.js +16 -8
- package/dist/layout/components/site/link.js.map +1 -1
- package/dist/layout/header/tone.d.ts.map +1 -1
- package/dist/layout/header/tone.js +4 -2
- package/dist/layout/header/tone.js.map +1 -1
- package/dist/layout/index.d.ts +2 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/index.js +1 -0
- package/dist/layout/index.js.map +1 -1
- package/dist/layout/links.d.ts +29 -0
- package/dist/layout/links.d.ts.map +1 -0
- package/dist/layout/links.js +77 -0
- package/dist/layout/links.js.map +1 -0
- package/dist/layout/scroll.d.ts.map +1 -1
- package/dist/layout/scroll.js +13 -3
- package/dist/layout/scroll.js.map +1 -1
- package/dist/layout/styles/index.scss +1 -0
- package/dist/layout/styles/outline.scss +126 -0
- package/dist/layout/styles/site/category.scss +16 -0
- package/dist/layout/styles/site/footer.scss +8 -11
- package/dist/layout/styles/site/menu.scss +5 -12
- package/dist/layout/styles/site/sheet.scss +25 -15
- package/dist/logs/view/detail_modal.js +1 -1
- package/dist/logs/view/detail_modal.js.map +1 -1
- package/dist/popover/index.d.ts.map +1 -1
- package/dist/popover/index.js +6 -10
- package/dist/popover/index.js.map +1 -1
- package/dist/primitives/components/index.d.ts +1 -0
- package/dist/primitives/components/index.d.ts.map +1 -1
- package/dist/primitives/components/index.js +1 -0
- package/dist/primitives/components/index.js.map +1 -1
- package/dist/primitives/components/prose.d.ts.map +1 -1
- package/dist/primitives/components/prose.js +4 -3
- package/dist/primitives/components/prose.js.map +1 -1
- package/dist/primitives/components/quote.d.ts +9 -0
- package/dist/primitives/components/quote.d.ts.map +1 -0
- package/dist/primitives/components/quote.js +16 -0
- package/dist/primitives/components/quote.js.map +1 -0
- package/dist/primitives/styles/_link.scss +20 -6
- package/dist/primitives/styles/_quote.scss +34 -0
- package/dist/primitives/styles/index.scss +1 -0
- package/dist/reveal/index.d.ts.map +1 -1
- package/dist/reveal/index.js +41 -4
- package/dist/reveal/index.js.map +1 -1
- package/dist/reveal/styles/index.scss +10 -20
- package/dist/src/actions/copy-components.js +1 -1
- package/dist/src/actions/copy-components.js.map +1 -1
- package/dist/src/config/default/component-tokens.d.ts +2 -0
- package/dist/src/config/default/component-tokens.d.ts.map +1 -1
- package/dist/src/config/default/component-tokens.js +1 -0
- package/dist/src/config/default/component-tokens.js.map +1 -1
- package/dist/src/config/default/config.d.ts.map +1 -1
- package/dist/src/config/default/config.js +3 -0
- package/dist/src/config/default/config.js.map +1 -1
- package/dist/src/config/default/primitive-tokens.d.ts +1 -0
- package/dist/src/config/default/primitive-tokens.d.ts.map +1 -1
- package/dist/src/config/default/primitive-tokens.js +1 -0
- package/dist/src/config/default/primitive-tokens.js.map +1 -1
- package/dist/src/config/index.d.ts +1 -1
- package/dist/src/config/index.d.ts.map +1 -1
- package/dist/src/config/index.js.map +1 -1
- package/dist/src/config/links.d.ts +5 -0
- package/dist/src/config/links.d.ts.map +1 -0
- package/dist/src/config/links.js +134 -0
- package/dist/src/config/links.js.map +1 -0
- package/dist/src/config/normalize.d.ts.map +1 -1
- package/dist/src/config/normalize.js +15 -5
- package/dist/src/config/normalize.js.map +1 -1
- package/dist/src/config/scss.d.ts.map +1 -1
- package/dist/src/config/scss.js +9 -1
- package/dist/src/config/scss.js.map +1 -1
- package/dist/src/config/titles.d.ts +28 -0
- package/dist/src/config/titles.d.ts.map +1 -0
- package/dist/src/config/titles.js +178 -0
- package/dist/src/config/titles.js.map +1 -0
- package/dist/src/config/types/design.d.ts +3 -0
- package/dist/src/config/types/design.d.ts.map +1 -1
- package/dist/src/config/types/language.d.ts +16 -0
- package/dist/src/config/types/language.d.ts.map +1 -0
- package/dist/src/config/types/language.js +2 -0
- package/dist/src/config/types/language.js.map +1 -0
- package/dist/src/config/types/links.d.ts +71 -0
- package/dist/src/config/types/links.d.ts.map +1 -0
- package/dist/src/config/types/links.js +2 -0
- package/dist/src/config/types/links.js.map +1 -0
- package/dist/src/config/types.d.ts +8 -16
- package/dist/src/config/types.d.ts.map +1 -1
- package/dist/src/config/typography.d.ts +2 -1
- package/dist/src/config/typography.d.ts.map +1 -1
- package/dist/src/config/typography.js +14 -1
- package/dist/src/config/typography.js.map +1 -1
- package/dist/src/document/components/index.js +1 -1
- package/dist/src/document/components/index.js.map +1 -1
- package/dist/src/editor/components/surface.js +1 -1
- package/dist/src/editor/components/surface.js.map +1 -1
- package/dist/src/entity/list.js +1 -1
- package/dist/src/entity/list.js.map +1 -1
- package/dist/src/entries/react/02.d.ts +1 -1
- package/dist/src/entries/react/02.d.ts.map +1 -1
- package/dist/src/entries/react/02.js +1 -1
- package/dist/src/entries/react/02.js.map +1 -1
- package/dist/src/entries/root/02.d.ts +1 -1
- package/dist/src/entries/root/02.d.ts.map +1 -1
- package/dist/src/entries/root/02.js +1 -1
- package/dist/src/entries/root/02.js.map +1 -1
- package/dist/src/graph/advanced/graph/details.js +1 -1
- package/dist/src/graph/advanced/graph/details.js.map +1 -1
- package/dist/src/heading/glyphs.d.ts +7 -0
- package/dist/src/heading/glyphs.d.ts.map +1 -0
- package/dist/src/heading/glyphs.js +79 -0
- package/dist/src/heading/glyphs.js.map +1 -0
- package/dist/src/heading/index.d.ts +3 -1
- package/dist/src/heading/index.d.ts.map +1 -1
- package/dist/src/heading/index.js +19 -4
- package/dist/src/heading/index.js.map +1 -1
- package/dist/src/hollow/bitmap.d.ts +5 -0
- package/dist/src/hollow/bitmap.d.ts.map +1 -0
- package/dist/src/hollow/bitmap.js +45 -0
- package/dist/src/hollow/bitmap.js.map +1 -0
- package/dist/src/hollow/component.d.ts +18 -0
- package/dist/src/hollow/component.d.ts.map +1 -0
- package/dist/src/hollow/component.js +44 -0
- package/dist/src/hollow/component.js.map +1 -0
- package/dist/src/hollow/index.d.ts +7 -0
- package/dist/src/hollow/index.d.ts.map +1 -0
- package/dist/src/hollow/index.js +4 -0
- package/dist/src/hollow/index.js.map +1 -0
- package/dist/src/hollow/print.d.ts +19 -0
- package/dist/src/hollow/print.d.ts.map +1 -0
- package/dist/src/hollow/print.js +103 -0
- package/dist/src/hollow/print.js.map +1 -0
- package/dist/src/hollow/shapes.d.ts +11 -0
- package/dist/src/hollow/shapes.d.ts.map +1 -0
- package/dist/src/hollow/shapes.js +65 -0
- package/dist/src/hollow/shapes.js.map +1 -0
- package/dist/src/language/source/modal.js +1 -1
- package/dist/src/language/source/modal.js.map +1 -1
- package/dist/src/language/source/visualizer.js +1 -1
- package/dist/src/language/source/visualizer.js.map +1 -1
- package/dist/src/layer/index.d.ts +2 -1
- package/dist/src/layer/index.d.ts.map +1 -1
- package/dist/src/layer/index.js +6 -2
- package/dist/src/layer/index.js.map +1 -1
- package/dist/src/layout/components/outline.d.ts +20 -4
- package/dist/src/layout/components/outline.d.ts.map +1 -1
- package/dist/src/layout/components/outline.js +147 -70
- package/dist/src/layout/components/outline.js.map +1 -1
- package/dist/src/layout/components/outline_dock.d.ts +5 -0
- package/dist/src/layout/components/outline_dock.d.ts.map +1 -0
- package/dist/src/layout/components/outline_dock.js +139 -0
- package/dist/src/layout/components/outline_dock.js.map +1 -0
- package/dist/src/layout/components/site/category.d.ts +11 -0
- package/dist/src/layout/components/site/category.d.ts.map +1 -0
- package/dist/src/layout/components/site/category.js +9 -0
- package/dist/src/layout/components/site/category.js.map +1 -0
- package/dist/src/layout/components/site/footer.d.ts +3 -17
- package/dist/src/layout/components/site/footer.d.ts.map +1 -1
- package/dist/src/layout/components/site/footer.js +16 -15
- package/dist/src/layout/components/site/footer.js.map +1 -1
- package/dist/src/layout/components/site/header/groups.d.ts +2 -0
- package/dist/src/layout/components/site/header/groups.d.ts.map +1 -1
- package/dist/src/layout/components/site/header/groups.js +6 -6
- package/dist/src/layout/components/site/header/groups.js.map +1 -1
- package/dist/src/layout/components/site/header.d.ts +0 -1
- package/dist/src/layout/components/site/header.d.ts.map +1 -1
- package/dist/src/layout/components/site/header.js +8 -3
- package/dist/src/layout/components/site/header.js.map +1 -1
- package/dist/src/layout/components/site/link.d.ts +6 -3
- package/dist/src/layout/components/site/link.d.ts.map +1 -1
- package/dist/src/layout/components/site/link.js +16 -8
- package/dist/src/layout/components/site/link.js.map +1 -1
- package/dist/src/layout/header/tone.d.ts.map +1 -1
- package/dist/src/layout/header/tone.js +4 -2
- package/dist/src/layout/header/tone.js.map +1 -1
- package/dist/src/layout/index.d.ts +2 -0
- package/dist/src/layout/index.d.ts.map +1 -1
- package/dist/src/layout/index.js +1 -0
- package/dist/src/layout/index.js.map +1 -1
- package/dist/src/layout/links.d.ts +29 -0
- package/dist/src/layout/links.d.ts.map +1 -0
- package/dist/src/layout/links.js +77 -0
- package/dist/src/layout/links.js.map +1 -0
- package/dist/src/layout/scroll.d.ts.map +1 -1
- package/dist/src/layout/scroll.js +13 -3
- package/dist/src/layout/scroll.js.map +1 -1
- package/dist/src/logs/view/detail_modal.js +1 -1
- package/dist/src/logs/view/detail_modal.js.map +1 -1
- package/dist/src/popover/index.d.ts.map +1 -1
- package/dist/src/popover/index.js +6 -10
- package/dist/src/popover/index.js.map +1 -1
- package/dist/src/primitives/components/index.d.ts +1 -0
- package/dist/src/primitives/components/index.d.ts.map +1 -1
- package/dist/src/primitives/components/index.js +1 -0
- package/dist/src/primitives/components/index.js.map +1 -1
- package/dist/src/primitives/components/prose.d.ts.map +1 -1
- package/dist/src/primitives/components/prose.js +4 -3
- package/dist/src/primitives/components/prose.js.map +1 -1
- package/dist/src/primitives/components/quote.d.ts +9 -0
- package/dist/src/primitives/components/quote.d.ts.map +1 -0
- package/dist/src/primitives/components/quote.js +16 -0
- package/dist/src/primitives/components/quote.js.map +1 -0
- package/dist/src/reveal/index.d.ts.map +1 -1
- package/dist/src/reveal/index.js +41 -4
- package/dist/src/reveal/index.js.map +1 -1
- package/dist/src/steps/panel.js +1 -1
- package/dist/src/steps/panel.js.map +1 -1
- package/dist/src/tooltip/index.d.ts.map +1 -1
- package/dist/src/tooltip/index.js +2 -1
- package/dist/src/tooltip/index.js.map +1 -1
- package/dist/steps/panel.js +1 -1
- package/dist/steps/panel.js.map +1 -1
- package/dist/styles/tokens.scss +1 -0
- package/dist/styles/utils/text/core.scss +25 -0
- package/dist/tooltip/index.d.ts.map +1 -1
- package/dist/tooltip/index.js +2 -1
- package/dist/tooltip/index.js.map +1 -1
- package/package.json +10 -1
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { frontendCssVar } from "./../namespace/index.js";
|
|
2
|
+
const GLYPH_FIRST = 32;
|
|
3
|
+
const GLYPH_LAST = 126;
|
|
4
|
+
const OTHER = "other";
|
|
5
|
+
function glyphKey(char) {
|
|
6
|
+
const code = char.codePointAt(0) ?? 0;
|
|
7
|
+
return code >= GLYPH_FIRST && code <= GLYPH_LAST ? String(code) : OTHER;
|
|
8
|
+
}
|
|
9
|
+
function glyphVar(key) {
|
|
10
|
+
return frontendCssVar(`glyph-${key}`);
|
|
11
|
+
}
|
|
12
|
+
function plainChars(text) {
|
|
13
|
+
return [...text.normalize("NFD").replace(/\p{M}/gu, "")];
|
|
14
|
+
}
|
|
15
|
+
function glyphSum(text) {
|
|
16
|
+
const counts = new Map();
|
|
17
|
+
for (const char of plainChars(text))
|
|
18
|
+
counts.set(glyphKey(char), (counts.get(glyphKey(char)) || 0) + 1);
|
|
19
|
+
const terms = [...counts].sort(([a], [b]) => a.localeCompare(b)).map(([key, count]) => {
|
|
20
|
+
const ref = `var(${glyphVar(key)})`;
|
|
21
|
+
return count > 1 ? `${count} * ${ref}` : ref;
|
|
22
|
+
});
|
|
23
|
+
return terms.length ? `calc(${terms.join(" + ")})` : "0";
|
|
24
|
+
}
|
|
25
|
+
const MAX_LINES = 6;
|
|
26
|
+
const FIT = "100cqi / (%s * 1.04)";
|
|
27
|
+
function charWidth(char) {
|
|
28
|
+
return char === " " ? 0.4 : 1;
|
|
29
|
+
}
|
|
30
|
+
function lengthOf(words) {
|
|
31
|
+
return words.reduce((sum, word, index) => sum + (index ? 0.4 : 0) + [...word].reduce((width, char) => width + charWidth(char), 0), 0);
|
|
32
|
+
}
|
|
33
|
+
function balanced(words, lines) {
|
|
34
|
+
const count = words.length;
|
|
35
|
+
const best = Array.from({ length: lines + 1 }, () => Array(count + 1).fill(Infinity));
|
|
36
|
+
const cut = Array.from({ length: lines + 1 }, () => Array(count + 1).fill(0));
|
|
37
|
+
best[0][0] = 0;
|
|
38
|
+
for (let line = 1; line <= lines; line++) {
|
|
39
|
+
for (let end = line; end <= count; end++) {
|
|
40
|
+
for (let start = line - 1; start < end; start++) {
|
|
41
|
+
const worst = Math.max(best[line - 1][start], lengthOf(words.slice(start, end)));
|
|
42
|
+
if (worst >= best[line][end])
|
|
43
|
+
continue;
|
|
44
|
+
best[line][end] = worst;
|
|
45
|
+
cut[line][end] = start;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
const ranges = [];
|
|
50
|
+
for (let line = lines, end = count; line > 0; line--) {
|
|
51
|
+
const start = cut[line][end];
|
|
52
|
+
ranges.unshift(Array.from({ length: end - start }, (_, index) => start + index));
|
|
53
|
+
end = start;
|
|
54
|
+
}
|
|
55
|
+
return ranges;
|
|
56
|
+
}
|
|
57
|
+
function lineSum(indexes) {
|
|
58
|
+
const terms = indexes.map((index) => `var(${frontendCssVar(`title-w${index}`)})`);
|
|
59
|
+
const spaces = indexes.length - 1;
|
|
60
|
+
return `calc(${[...terms, ...(spaces ? [`${spaces} * var(${glyphVar("32")})`] : [])].join(" + ")})`;
|
|
61
|
+
}
|
|
62
|
+
function candidate(words, lines, last) {
|
|
63
|
+
const widest = balanced(words, lines).map(lineSum);
|
|
64
|
+
const size = FIT.replace("%s", widest.length > 1 ? `max(${widest.join(", ")})` : widest[0]);
|
|
65
|
+
return last ? `calc(${size})` : `calc(${size} + clamp(0px, (1em - ${size}) * 1000, 1px) * 100000)`;
|
|
66
|
+
}
|
|
67
|
+
function titleFitVars(text) {
|
|
68
|
+
const words = text.replace(/\s+/gu, " ").trim().split(" ").filter(Boolean);
|
|
69
|
+
if (!words.length)
|
|
70
|
+
return null;
|
|
71
|
+
const most = Math.min(words.length, MAX_LINES);
|
|
72
|
+
const sizes = Array.from({ length: most }, (_, index) => candidate(words, index + 1, index + 1 === most));
|
|
73
|
+
return {
|
|
74
|
+
...Object.fromEntries(words.map((word, index) => [frontendCssVar(`title-w${index}`), glyphSum(word)])),
|
|
75
|
+
[frontendCssVar("title-size")]: sizes.length > 1 ? `min(${sizes.join(", ")})` : sizes[0],
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
export { GLYPH_FIRST, GLYPH_LAST, OTHER as GLYPH_OTHER, glyphVar, titleFitVars };
|
|
79
|
+
//# sourceMappingURL=glyphs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glyphs.js","sourceRoot":"","sources":["../../../src/heading/glyphs.ts"],"names":[],"mappings":"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"}
|
package/dist/heading/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
-
type HeadingLevel = 2 | 3 | 4 | 5 | 6;
|
|
2
|
+
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
3
3
|
type TitleProps = HTMLAttributes<HTMLHeadingElement> & {
|
|
4
4
|
children?: ReactNode;
|
|
5
|
+
fit?: boolean;
|
|
5
6
|
level?: HeadingLevel;
|
|
7
|
+
text?: string;
|
|
6
8
|
};
|
|
7
9
|
type HeadingScopeProps = {
|
|
8
10
|
children?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/heading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/heading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK/G,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,KAAK,UAAU,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAQF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,CAGzD;AA2BD,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,+BAQ/B;AAED,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAS7C;AAED,iBAAS,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CAAE,+BAEtE;AAED,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/heading/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext } from "react";
|
|
2
|
+
import { createContext, isValidElement } from "react";
|
|
3
|
+
import { FRONTEND_PREFIX } from "./../namespace/index.js";
|
|
4
|
+
import { titleFitVars } from "./glyphs.js";
|
|
3
5
|
const PAGE_DEPTH = 0;
|
|
4
6
|
const MIN_LEVEL = 2;
|
|
5
7
|
const MAX_LEVEL = 6;
|
|
@@ -10,12 +12,25 @@ function headingLevelForDepth(depth) {
|
|
|
10
12
|
}
|
|
11
13
|
function explicitLevel(value) {
|
|
12
14
|
const level = Number(value);
|
|
13
|
-
return Number.isInteger(level) && level >=
|
|
15
|
+
return Number.isInteger(level) && level >= 1 && level <= MAX_LEVEL ? level : null;
|
|
16
|
+
}
|
|
17
|
+
function textOf(node) {
|
|
18
|
+
if (typeof node === "string" || typeof node === "number")
|
|
19
|
+
return String(node);
|
|
20
|
+
if (Array.isArray(node))
|
|
21
|
+
return node.map(textOf).join("");
|
|
22
|
+
if (isValidElement(node))
|
|
23
|
+
return textOf(node.props.children);
|
|
24
|
+
return "";
|
|
14
25
|
}
|
|
15
26
|
function renderHeading(level, props) {
|
|
16
|
-
const { children, level: _level, ...rest } = props;
|
|
27
|
+
const { children, className, fit = true, level: _level, style, text, ...rest } = props;
|
|
17
28
|
const Tag = `h${level}`;
|
|
18
|
-
|
|
29
|
+
const vars = fit ? titleFitVars(text ?? textOf(children)) : null;
|
|
30
|
+
if (!vars)
|
|
31
|
+
return _jsx(Tag, { className: className, style: style, ...rest, children: children });
|
|
32
|
+
const classes = [`${FRONTEND_PREFIX}-title`, className].filter(Boolean).join(" ");
|
|
33
|
+
return (_jsx(Tag, { className: classes, style: { ...style, ...vars }, ...rest, children: _jsx("span", { className: `${FRONTEND_PREFIX}-title__fit`, children: children }) }));
|
|
19
34
|
}
|
|
20
35
|
function Title(props) {
|
|
21
36
|
const fixed = explicitLevel(props.level);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/heading/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/heading/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { HollowPrint } from "./print.js";
|
|
2
|
+
type Urls = (images: readonly string[], ink: 0 | 1) => string;
|
|
3
|
+
declare function bindHollowBitmaps(element: HTMLElement, print: HollowPrint, urls: Urls): () => void;
|
|
4
|
+
export { bindHollowBitmaps };
|
|
5
|
+
//# sourceMappingURL=bitmap.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bitmap.d.ts","sourceRoot":"","sources":["../../../src/hollow/bitmap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC;AAqB9D,iBAAS,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,IAAI,CAuB3F;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { frontendCssVar } from "../namespace/index.js";
|
|
2
|
+
const PREFIX = "data:image/svg+xml,";
|
|
3
|
+
function sized(image, width, height) {
|
|
4
|
+
const markup = decodeURIComponent(image.slice(image.indexOf(PREFIX) + PREFIX.length, image.lastIndexOf("\"")));
|
|
5
|
+
const resized = markup.replace(/ width="[^"]*"/u, ` width="${width}"`).replace(/ height="[^"]*"/u, ` height="${height}"`);
|
|
6
|
+
return `${PREFIX}${encodeURIComponent(resized)}`;
|
|
7
|
+
}
|
|
8
|
+
async function rasterOf(image, width, height) {
|
|
9
|
+
const source = new Image();
|
|
10
|
+
source.src = sized(image, width, height);
|
|
11
|
+
await source.decode();
|
|
12
|
+
const canvas = document.createElement("canvas");
|
|
13
|
+
canvas.width = width;
|
|
14
|
+
canvas.height = height;
|
|
15
|
+
canvas.getContext("2d")?.drawImage(source, 0, 0, width, height);
|
|
16
|
+
return canvas.toDataURL("image/png");
|
|
17
|
+
}
|
|
18
|
+
function bindHollowBitmaps(element, print, urls) {
|
|
19
|
+
let drawn = 0;
|
|
20
|
+
let live = true;
|
|
21
|
+
const draw = async () => {
|
|
22
|
+
const style = getComputedStyle(element);
|
|
23
|
+
const font = Number.parseFloat(style.fontSize);
|
|
24
|
+
const line = Number.parseFloat(style.lineHeight) || font * 1.2;
|
|
25
|
+
const scale = Math.min(3, window.devicePixelRatio || 1);
|
|
26
|
+
const height = Math.round(line * scale);
|
|
27
|
+
if (!height || height === drawn)
|
|
28
|
+
return;
|
|
29
|
+
drawn = height;
|
|
30
|
+
const width = Math.round(print.width * font * scale);
|
|
31
|
+
const next = await Promise.all(print.layers.map((layer) => rasterOf(layer.image, width, height).catch(() => null)));
|
|
32
|
+
if (!live || drawn !== height || next.some((url) => !url))
|
|
33
|
+
return;
|
|
34
|
+
element.style.setProperty(frontendCssVar("hollow-a"), urls(next, 0));
|
|
35
|
+
element.style.setProperty(frontendCssVar("hollow-b"), urls(next, 1));
|
|
36
|
+
};
|
|
37
|
+
const observer = new ResizeObserver(() => void draw());
|
|
38
|
+
observer.observe(element);
|
|
39
|
+
return () => {
|
|
40
|
+
live = false;
|
|
41
|
+
observer.disconnect();
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
export { bindHollowBitmaps };
|
|
45
|
+
//# sourceMappingURL=bitmap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bitmap.js","sourceRoot":"","sources":["../../../src/hollow/bitmap.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { type HollowPrint } from "./print.js";
|
|
3
|
+
type HollowTag = "h1" | "h2" | "h3" | "h4" | "li" | "p" | "span" | "strong";
|
|
4
|
+
type HollowTextProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
5
|
+
as?: HollowTag;
|
|
6
|
+
children: number | string;
|
|
7
|
+
dark?: boolean;
|
|
8
|
+
inks?: readonly [string, string];
|
|
9
|
+
};
|
|
10
|
+
declare function HollowPalette({ children, tones }: {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
tones: readonly string[];
|
|
13
|
+
}): import("react").JSX.Element;
|
|
14
|
+
declare function hollowStyle(print: HollowPrint): CSSProperties;
|
|
15
|
+
declare function HollowText(props: HollowTextProps): import("react").JSX.Element;
|
|
16
|
+
export { HollowPalette, HollowText, hollowStyle };
|
|
17
|
+
export type { HollowTag, HollowTextProps };
|
|
18
|
+
//# sourceMappingURL=component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/hollow/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE5E,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAIF,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,+BAE5F;AAaD,iBAAS,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,aAAa,CAatD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BAuBzC;AAED,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
|
3
|
+
import { classNames } from "../components/index.js";
|
|
4
|
+
import { frontendClassName, frontendCssVar, frontendModifierClass } from "../namespace/index.js";
|
|
5
|
+
import { bindHollowBitmaps } from "./bitmap.js";
|
|
6
|
+
import { hollowPrint } from "./print.js";
|
|
7
|
+
const PaletteContext = createContext([]);
|
|
8
|
+
function HollowPalette({ children, tones }) {
|
|
9
|
+
return _jsx(PaletteContext.Provider, { value: tones, children: children });
|
|
10
|
+
}
|
|
11
|
+
function urlsOf(print, ink, images) {
|
|
12
|
+
return print.layers
|
|
13
|
+
.map((layer, index) => (layer.ink === ink ? `url("${images?.[index] ?? layer.image.slice(5, -2)}")` : ""))
|
|
14
|
+
.filter(Boolean)
|
|
15
|
+
.join(", ");
|
|
16
|
+
}
|
|
17
|
+
function positionsOf(print, ink) {
|
|
18
|
+
return print.layers.filter((layer) => layer.ink === ink).map((layer) => `${layer.offset[0]}em ${layer.offset[1]}em`).join(", ");
|
|
19
|
+
}
|
|
20
|
+
function hollowStyle(print) {
|
|
21
|
+
const [first, second] = print.inks;
|
|
22
|
+
return {
|
|
23
|
+
[frontendCssVar("hollow-a")]: urlsOf(print, 0),
|
|
24
|
+
[frontendCssVar("hollow-a-at")]: positionsOf(print, 0),
|
|
25
|
+
[frontendCssVar("hollow-a-dark")]: first.dark,
|
|
26
|
+
[frontendCssVar("hollow-a-light")]: first.light,
|
|
27
|
+
[frontendCssVar("hollow-b")]: urlsOf(print, 1),
|
|
28
|
+
[frontendCssVar("hollow-b-at")]: positionsOf(print, 1),
|
|
29
|
+
[frontendCssVar("hollow-b-dark")]: second.dark,
|
|
30
|
+
[frontendCssVar("hollow-b-light")]: second.light,
|
|
31
|
+
[frontendCssVar("hollow-size")]: `${print.width}em 1lh`,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function HollowText(props) {
|
|
35
|
+
const { as: Tag = "span", children, className, dark, inks, style, ...rest } = props;
|
|
36
|
+
const text = String(children);
|
|
37
|
+
const palette = useContext(PaletteContext);
|
|
38
|
+
const print = useMemo(() => hollowPrint(text, inks, palette), [inks?.[0], inks?.[1], palette, text]);
|
|
39
|
+
const ref = useRef(null);
|
|
40
|
+
useEffect(() => (ref.current ? bindHollowBitmaps(ref.current, print, (images, ink) => urlsOf(print, ink, images)) : undefined), [print]);
|
|
41
|
+
return (_jsx(Tag, { ...rest, className: classNames(frontendClassName("hollow"), frontendClassName("text-outline"), dark ? frontendModifierClass("hollow", "dark") : "", className), "data-hollow": text, ref: ref, style: { ...hollowStyle(print), ...style }, children: text }));
|
|
42
|
+
}
|
|
43
|
+
export { HollowPalette, HollowText, hollowStyle };
|
|
44
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/hollow/component.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { HollowPalette, HollowText, hollowStyle } from "./component.js";
|
|
2
|
+
export { hollowPrint } from "./print.js";
|
|
3
|
+
export { scatter, seeded } from "./shapes.js";
|
|
4
|
+
export type { HollowTag, HollowTextProps } from "./component.js";
|
|
5
|
+
export type { HollowInk, HollowLayer, HollowPrint } from "./print.js";
|
|
6
|
+
export type { Frame, Rng } from "./shapes.js";
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hollow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hollow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type Point } from "@trebired/overprint";
|
|
2
|
+
type HollowLayer = {
|
|
3
|
+
image: string;
|
|
4
|
+
ink: 0 | 1;
|
|
5
|
+
offset: Point;
|
|
6
|
+
};
|
|
7
|
+
type HollowInk = {
|
|
8
|
+
dark: string;
|
|
9
|
+
light: string;
|
|
10
|
+
};
|
|
11
|
+
type HollowPrint = {
|
|
12
|
+
inks: [HollowInk, HollowInk];
|
|
13
|
+
layers: HollowLayer[];
|
|
14
|
+
width: number;
|
|
15
|
+
};
|
|
16
|
+
declare function hollowPrint(text: string, inks?: readonly [string, string], palette?: readonly string[]): HollowPrint;
|
|
17
|
+
export { hollowPrint };
|
|
18
|
+
export type { HollowInk, HollowLayer, HollowPrint };
|
|
19
|
+
//# sourceMappingURL=print.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../../src/hollow/print.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,KAAK,EAA0B,MAAM,qBAAqB,CAAC;AAG5G,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,CAAC;AAEhE,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAqF1F,iBAAS,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAE,SAAS,MAAM,EAAO,GAAG,WAAW,CAsBjH;AAED,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { printLayers } from "@trebired/overprint";
|
|
2
|
+
import { scatter, seeded } from "./shapes.js";
|
|
3
|
+
const UNIT = 100;
|
|
4
|
+
const STYLES = ["lines", "squares", "cross", "bayer"];
|
|
5
|
+
const COOL = ["#a6c6f3", "#c2a9f2", "#a7e0c2", "#b2b8ef", "#9ed3f2", "#a4ddd6"];
|
|
6
|
+
function pick(next, items) {
|
|
7
|
+
return items[Math.floor(next() * items.length)];
|
|
8
|
+
}
|
|
9
|
+
function hslOf(hex) {
|
|
10
|
+
const value = Number.parseInt(hex.replace("#", ""), 16);
|
|
11
|
+
const [r, g, b] = [(value >> 16) & 255, (value >> 8) & 255, value & 255].map((channel) => channel / 255);
|
|
12
|
+
const max = Math.max(r, g, b);
|
|
13
|
+
const min = Math.min(r, g, b);
|
|
14
|
+
const light = (max + min) / 2;
|
|
15
|
+
const span = max - min;
|
|
16
|
+
if (!span)
|
|
17
|
+
return [0, 0, light];
|
|
18
|
+
const hue = max === r ? ((g - b) / span) % 6 : max === g ? (b - r) / span + 2 : (r - g) / span + 4;
|
|
19
|
+
return [(hue * 60 + 360) % 360, span / (1 - Math.abs(2 * light - 1)), light];
|
|
20
|
+
}
|
|
21
|
+
function inkOf(hex) {
|
|
22
|
+
const [hue, saturation, lightness] = hslOf(hex);
|
|
23
|
+
const css = (chroma, light) => `hsl(${Math.round(hue)} ${Math.round(chroma * 100)}% ${Math.round(light * 100)}%)`;
|
|
24
|
+
const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
|
|
25
|
+
return {
|
|
26
|
+
dark: css(clamp(saturation * 0.6, 0.15, 0.55), clamp(lightness * 0.85, 0.55, 0.72)),
|
|
27
|
+
light: css(clamp(saturation * 0.6, 0.2, 0.55), clamp(lightness * 0.78, 0.52, 0.66)),
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function tonesFor(seed, palette) {
|
|
31
|
+
const next = seeded(`print:${seed}`);
|
|
32
|
+
const own = [...new Set(palette)];
|
|
33
|
+
if (own.length >= 2) {
|
|
34
|
+
const [first, second] = own;
|
|
35
|
+
return next() < 0.5 ? [first, second] : [second, first];
|
|
36
|
+
}
|
|
37
|
+
const first = own[0] || pick(next, COOL);
|
|
38
|
+
return [first, pick(next, COOL.filter((tone) => tone !== first))];
|
|
39
|
+
}
|
|
40
|
+
function widthOf(text) {
|
|
41
|
+
const em = [...text].reduce((total, char) => {
|
|
42
|
+
if (char === " ")
|
|
43
|
+
return total + 0.28;
|
|
44
|
+
if (/[.,:;'!|]/u.test(char))
|
|
45
|
+
return total + 0.3;
|
|
46
|
+
if (/[iIl1]/u.test(char))
|
|
47
|
+
return total + 0.38;
|
|
48
|
+
if (/[mMwW@]/u.test(char))
|
|
49
|
+
return total + 0.98;
|
|
50
|
+
return total + 0.76;
|
|
51
|
+
}, 0);
|
|
52
|
+
return Math.max(1, Math.round(em * 100) / 100);
|
|
53
|
+
}
|
|
54
|
+
function screenOf(style, angle) {
|
|
55
|
+
const cell = Math.max(5, Math.round(UNIT * 0.07));
|
|
56
|
+
if (style === "bayer")
|
|
57
|
+
return { grain: Math.max(2, Math.round(UNIT / 45)), kind: "dither", mode: "bayer" };
|
|
58
|
+
const dot = style === "lines" ? "line" : style === "cross" ? "cross" : "square";
|
|
59
|
+
return { angle, cell, dot, kind: "halftone" };
|
|
60
|
+
}
|
|
61
|
+
function fadeOf(next, flip, strength) {
|
|
62
|
+
const angle = next() * Math.PI * 2;
|
|
63
|
+
const along = [0.5 + Math.cos(angle) * 0.5, 0.5 + Math.sin(angle) * 0.5];
|
|
64
|
+
const back = [1 - along[0], 1 - along[1]];
|
|
65
|
+
return { from: flip ? back : along, kind: "linear", range: [strength, 0.06], to: flip ? along : back };
|
|
66
|
+
}
|
|
67
|
+
function platesOf(next, art, style) {
|
|
68
|
+
const shift = Math.max(3, Math.round(UNIT * 0.035));
|
|
69
|
+
const angle = Math.round(next() * 180);
|
|
70
|
+
const offsets = [[-shift, shift * 0.7], [shift, -shift * 0.5]];
|
|
71
|
+
return offsets.map((offset, index) => ({
|
|
72
|
+
art,
|
|
73
|
+
ink: [0, 0, 0],
|
|
74
|
+
offset,
|
|
75
|
+
screen: index === 0 ? { grain: Math.max(2, Math.round(UNIT / 60)), kind: "dither", mode: "atkinson" } : screenOf(style, angle + 35),
|
|
76
|
+
tone: fadeOf(next, index === 1, index === 0 ? 0.95 : 0.85),
|
|
77
|
+
}));
|
|
78
|
+
}
|
|
79
|
+
function hollowPrint(text, inks, palette = []) {
|
|
80
|
+
const width = widthOf(text);
|
|
81
|
+
const frame = { box: [width * UNIT, UNIT], font: UNIT };
|
|
82
|
+
const next = seeded(`riso:${text}`);
|
|
83
|
+
const shapes = scatter(next, frame);
|
|
84
|
+
const groups = [[], []];
|
|
85
|
+
shapes.forEach((shape) => groups[next() < 0.55 ? 0 : 1].push(shape));
|
|
86
|
+
const used = groups.map((parts, group) => ({ group, parts })).filter((entry) => entry.parts.length);
|
|
87
|
+
const lead = pick(next, STYLES);
|
|
88
|
+
const styles = [lead, pick(next, STYLES.filter((style) => style !== lead))];
|
|
89
|
+
const plates = used.flatMap((entry) => platesOf(next, { kind: "group", parts: entry.parts }, styles[entry.group]));
|
|
90
|
+
const { layers } = printLayers({ plates, size: frame.box }, { id: "hollow" });
|
|
91
|
+
const tones = inks ? [inks[0], inks[1]] : tonesFor(text, palette);
|
|
92
|
+
return {
|
|
93
|
+
inks: [inkOf(tones[0]), inkOf(tones[1])],
|
|
94
|
+
layers: layers.map((layer, index) => {
|
|
95
|
+
const group = used[Math.floor(index / 2)].group;
|
|
96
|
+
const ink = ((index % 2) ^ group);
|
|
97
|
+
return { image: layer.image, ink, offset: [layer.offset[0] / UNIT, layer.offset[1] / UNIT] };
|
|
98
|
+
}),
|
|
99
|
+
width,
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
export { hollowPrint };
|
|
103
|
+
//# sourceMappingURL=print.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"print.js","sourceRoot":"","sources":["../../../src/hollow/print.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Art, Point } from "@trebired/overprint";
|
|
2
|
+
type Rng = () => number;
|
|
3
|
+
declare function seeded(seed: string): Rng;
|
|
4
|
+
type Frame = {
|
|
5
|
+
box: Point;
|
|
6
|
+
font: number;
|
|
7
|
+
};
|
|
8
|
+
declare function scatter(next: Rng, frame: Frame): Art[];
|
|
9
|
+
export { scatter, seeded };
|
|
10
|
+
export type { Frame, Rng };
|
|
11
|
+
//# sourceMappingURL=shapes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shapes.d.ts","sourceRoot":"","sources":["../../../src/hollow/shapes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAW,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE/D,KAAK,GAAG,GAAG,MAAM,MAAM,CAAC;AAIxB,iBAAS,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAMjC;AAoCD,KAAK,KAAK,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAW1C,iBAAS,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,CAe/C;AAED,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAC3B,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const fixed = (value) => String(Math.round(value * 1000) / 1000);
|
|
2
|
+
function seeded(seed) {
|
|
3
|
+
let state = [...seed].reduce((total, letter) => (total * 31 + letter.charCodeAt(0)) >>> 0, 2166136261);
|
|
4
|
+
return () => {
|
|
5
|
+
state = (state * 1664525 + 1013904223) >>> 0;
|
|
6
|
+
return state / 4294967296;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
function polygon(points) {
|
|
10
|
+
return `M${points.map(([x, y]) => `${fixed(x)} ${fixed(y)}`).join("L")}Z`;
|
|
11
|
+
}
|
|
12
|
+
function irregular(next) {
|
|
13
|
+
const corners = 3 + Math.floor(next() * 5);
|
|
14
|
+
const cuts = Array.from({ length: corners }, () => next() * Math.PI * 2).sort((left, right) => left - right);
|
|
15
|
+
return polygon(cuts.map((angle) => {
|
|
16
|
+
const reach = 0.25 + next() * 0.25;
|
|
17
|
+
return [0.5 + Math.cos(angle) * reach, 0.5 + Math.sin(angle) * reach];
|
|
18
|
+
}));
|
|
19
|
+
}
|
|
20
|
+
function sliver(next) {
|
|
21
|
+
const lean = (next() - 0.5) * 0.6;
|
|
22
|
+
const thin = 0.1 + next() * 0.2;
|
|
23
|
+
return polygon([[0.02 + lean, 0.5 - thin], [0.98, 0.5 - thin * next()], [0.98 - lean, 0.5 + thin], [0.02, 0.5 + thin * next()]]);
|
|
24
|
+
}
|
|
25
|
+
function arcPoint(angle, reach) {
|
|
26
|
+
return `${fixed(0.5 + Math.cos(angle) * reach)} ${fixed(0.5 + Math.sin(angle) * reach)}`;
|
|
27
|
+
}
|
|
28
|
+
function sector(next) {
|
|
29
|
+
const start = next() * Math.PI * 2;
|
|
30
|
+
const sweep = Math.PI * (0.35 + next() * 0.9);
|
|
31
|
+
const inner = next() < 0.5 ? 0 : 0.12 + next() * 0.24;
|
|
32
|
+
const large = sweep > Math.PI ? 1 : 0;
|
|
33
|
+
const end = start + sweep;
|
|
34
|
+
const rim = `M${arcPoint(start, 0.48)}A0.48 0.48 0 ${large} 1 ${arcPoint(end, 0.48)}`;
|
|
35
|
+
if (!inner)
|
|
36
|
+
return `${rim}L0.5 0.5Z`;
|
|
37
|
+
return `${rim}L${arcPoint(end, inner)}A${fixed(inner)} ${fixed(inner)} 0 ${large} 0 ${arcPoint(start, inner)}Z`;
|
|
38
|
+
}
|
|
39
|
+
function shapesFor(next, count) {
|
|
40
|
+
const curved = next() < 0.4 ? Math.floor(next() * count) : -1;
|
|
41
|
+
const makers = [irregular, irregular, sliver];
|
|
42
|
+
return Array.from({ length: count }, (_, index) => {
|
|
43
|
+
if (index === curved)
|
|
44
|
+
return sector(next);
|
|
45
|
+
return makers[Math.floor(next() * makers.length)](next);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function scatter(next, frame) {
|
|
49
|
+
const [width, height] = frame.box;
|
|
50
|
+
const lines = Math.max(1, Math.round(height / (frame.font * 0.95)));
|
|
51
|
+
const count = Math.max(2, Math.min(8, Math.round((width * lines) / (frame.font * 1.5)) + Math.floor(next() * 2)));
|
|
52
|
+
const slot = width / Math.ceil(count / lines);
|
|
53
|
+
return shapesFor(next, count).map((path, index) => {
|
|
54
|
+
const row = index % lines;
|
|
55
|
+
const column = Math.floor(index / lines);
|
|
56
|
+
const side = frame.font * (1 + next() * 1.4);
|
|
57
|
+
const across = side * (0.7 + next() * 0.8);
|
|
58
|
+
const centerX = slot * (column + 0.1 + next() * 0.8);
|
|
59
|
+
const centerY = (height / lines) * (row + 0.2 + next() * 0.6);
|
|
60
|
+
const box = { height: side / height, width: across / width, x: (centerX - across / 2) / width, y: (centerY - side / 2) / height };
|
|
61
|
+
return { box, d: path, fit: "fill", kind: "path", rotate: Math.round(next() * 360) };
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
export { scatter, seeded };
|
|
65
|
+
//# sourceMappingURL=shapes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../src/hollow/shapes.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
@use "@trebired/bundler/namespace" as ns;
|
|
2
|
+
|
|
3
|
+
@function token($name, $fallback) {
|
|
4
|
+
@return var(#{ns.css-var("hollow-" + $name)}, $fallback);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
#{ns.class("hollow")} {
|
|
8
|
+
position: relative;
|
|
9
|
+
isolation: isolate;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(span, strong):where(#{ns.class("hollow")}) {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#{ns.class("hollow")}::before,
|
|
17
|
+
|
|
18
|
+
#{ns.class("hollow")}::after {
|
|
19
|
+
position: absolute;
|
|
20
|
+
inset: 0;
|
|
21
|
+
-webkit-text-stroke: 0;
|
|
22
|
+
color: transparent;
|
|
23
|
+
-webkit-background-clip: text;
|
|
24
|
+
background-clip: text;
|
|
25
|
+
content: attr(data-hollow) / "";
|
|
26
|
+
mask-repeat: repeat;
|
|
27
|
+
mask-size: token("size", 4em 1em);
|
|
28
|
+
mix-blend-mode: multiply;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
#{ns.class("hollow")}::before {
|
|
33
|
+
background-color: token("a-light", #6f8fd0);
|
|
34
|
+
mask-image: token("a", none);
|
|
35
|
+
mask-position: token("a-at", 0 0);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
#{ns.class("hollow")}::after {
|
|
39
|
+
background-color: token("b-light", #8f6fd0);
|
|
40
|
+
mask-image: token("b", none);
|
|
41
|
+
mask-position: token("b-at", 0 0);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:where(#{ns.data("dark")}) #{ns.class("hollow")}::before,
|
|
45
|
+
|
|
46
|
+
#{ns.class("hollow")}#{ns.class("hollow--dark")}::before {
|
|
47
|
+
background-color: token("a-dark", #8a93b0);
|
|
48
|
+
mix-blend-mode: screen;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:where(#{ns.data("dark")}) #{ns.class("hollow")}::after,
|
|
52
|
+
|
|
53
|
+
#{ns.class("hollow")}#{ns.class("hollow--dark")}::after {
|
|
54
|
+
background-color: token("b-dark", #9a8ab0);
|
|
55
|
+
mix-blend-mode: screen;
|
|
56
|
+
}
|