@hyper-elements/react 0.3.0 → 0.3.1
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/GUIDE.md +47 -28
- package/README.md +24 -5
- package/REFERENCE.md +487 -485
- package/dist/builder.cjs +795 -206
- package/dist/builder.cjs.map +1 -1
- package/dist/builder.js +795 -206
- package/dist/builder.js.map +1 -1
- package/dist/image.cjs +1 -1
- package/dist/image.cjs.map +1 -1
- package/dist/image.js +1 -1
- package/dist/image.js.map +1 -1
- package/dist/inspect.cjs +3601 -0
- package/dist/inspect.cjs.map +1 -0
- package/dist/inspect.d.cts +472 -0
- package/dist/inspect.d.ts +472 -0
- package/dist/inspect.js +3572 -0
- package/dist/inspect.js.map +1 -0
- package/dist/pdf.cjs +54 -9
- package/dist/pdf.cjs.map +1 -1
- package/dist/pdf.js +54 -9
- package/dist/pdf.js.map +1 -1
- package/dist/primitives.cjs +738 -142
- package/dist/primitives.cjs.map +1 -1
- package/dist/primitives.d.cts +558 -158
- package/dist/primitives.d.ts +558 -158
- package/dist/primitives.js +736 -143
- package/dist/primitives.js.map +1 -1
- package/package.json +10 -1
package/dist/pdf.js
CHANGED
|
@@ -438,7 +438,12 @@ var textStyle = {
|
|
|
438
438
|
fontFamily: { kind: fontFamily(), label: "Font", inherited: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
|
|
439
439
|
// Word rounds sizes to half points (13px is 10pt): a fraction of a px.
|
|
440
440
|
fontSize: { kind: length(["px"], { min: 1 }), label: "Font size", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
|
|
441
|
-
fontWeight: {
|
|
441
|
+
fontWeight: {
|
|
442
|
+
kind: fontWeight(),
|
|
443
|
+
label: "Font weight",
|
|
444
|
+
inherited: true,
|
|
445
|
+
support: { email: { level: "outlook", values: [100, 200, 300, 500], shows: "normal weight: Word draws only normal and bold (600 and over)", source: "caniemail", feature: "css-font-weight" }, web: css }
|
|
446
|
+
},
|
|
442
447
|
fontStyle: { kind: enumOf(["normal", "italic"]), label: "Font style", inherited: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
|
|
443
448
|
// Written in px with mso-line-height-rule: exactly, which Word keeps (it drops unitless ones).
|
|
444
449
|
lineHeight: { kind: lineHeight(), label: "Line height", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
|
|
@@ -450,8 +455,21 @@ var textStyle = {
|
|
|
450
455
|
support: { email: { level: "outlook", shows: "normal spacing: Word keeps letter spacing but doesn't draw it", source: "outlook-captures" }, web: css }
|
|
451
456
|
},
|
|
452
457
|
textAlign: { kind: enumOf(["left", "center", "right", "justify"]), label: "Alignment", inherited: true, mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
|
|
453
|
-
textTransform: {
|
|
454
|
-
|
|
458
|
+
textTransform: {
|
|
459
|
+
kind: enumOf(["none", "uppercase", "lowercase", "capitalize"]),
|
|
460
|
+
label: "Letter case",
|
|
461
|
+
inherited: true,
|
|
462
|
+
support: { email: { level: "outlook", values: ["lowercase"], shows: "the text as written: Word doesn't lowercase it", source: "caniemail", feature: "css-text-transform" }, web: css }
|
|
463
|
+
},
|
|
464
|
+
textDecoration: {
|
|
465
|
+
kind: enumOf(["none", "underline", "line-through"]),
|
|
466
|
+
label: "Decoration",
|
|
467
|
+
support: {
|
|
468
|
+
// Removed, so "none" leaves a link the client's own underline: said only where a line is asked for.
|
|
469
|
+
email: { level: "partial", values: ["underline", "line-through"], shows: "no line: the client removes it", source: "caniemail", feature: "css-text-decoration", clients: ["gmail-app-other", "protonmail", "orange", "sfr"] },
|
|
470
|
+
web: css
|
|
471
|
+
}
|
|
472
|
+
}
|
|
455
473
|
};
|
|
456
474
|
var inheritedTextStyle = (({ textDecoration: _, ...rest }) => rest)(textStyle);
|
|
457
475
|
var boxStyle = {
|
|
@@ -464,7 +482,17 @@ var boxStyle = {
|
|
|
464
482
|
padding: { kind: insets(), label: "Padding", mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
|
|
465
483
|
backgroundColor: { kind: color(), label: "Background color", support: { email: writer, web: css } },
|
|
466
484
|
border: { kind: border(), label: "Border", mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
|
|
467
|
-
borderRadius: {
|
|
485
|
+
borderRadius: {
|
|
486
|
+
kind: radius(),
|
|
487
|
+
label: "Corner radius",
|
|
488
|
+
support: {
|
|
489
|
+
email: [
|
|
490
|
+
{ level: "outlook", shows: "square corners", source: "caniemail", feature: "css-border-radius" },
|
|
491
|
+
{ level: "partial", shows: "square corners", source: "caniemail", feature: "css-border-radius", clients: ["gmx", "web-de", "orange"] }
|
|
492
|
+
],
|
|
493
|
+
web: css
|
|
494
|
+
}
|
|
495
|
+
},
|
|
468
496
|
overflow: {
|
|
469
497
|
kind: enumOf(["visible", "hidden"]),
|
|
470
498
|
label: "Overflow",
|
|
@@ -492,13 +520,27 @@ function pick(group, ...keys) {
|
|
|
492
520
|
return Object.fromEntries(keys.map((key) => [key, group[key]]));
|
|
493
521
|
}
|
|
494
522
|
var WRITTEN = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
|
|
523
|
+
var NO_WEB_FONTS = ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "protonmail", "fastmail", "gmx", "web-de", "orange", "sfr", "laposte", "mail-ru", "ionos"];
|
|
495
524
|
var ROOT_PROPS = {
|
|
496
525
|
title: prop(text(), { support: WRITTEN, label: "Title", description: "The document's title (shown in a browser tab, and by some email clients)." }),
|
|
497
|
-
lang: prop(text({ maxLength: 35 }), {
|
|
498
|
-
|
|
526
|
+
lang: prop(text({ maxLength: 35 }), {
|
|
527
|
+
support: {
|
|
528
|
+
...WRITTEN,
|
|
529
|
+
email: { level: "partial", shows: "no language: the client removes it, and a screen reader reads the email in its own", source: "caniemail", feature: "html-lang", clients: ["hey", "gmx", "web-de", "orange", "ionos"] }
|
|
530
|
+
},
|
|
531
|
+
label: "Language",
|
|
532
|
+
description: 'Its language, as a BCP 47 tag ("en", "ar").'
|
|
533
|
+
}),
|
|
534
|
+
dir: prop(enumOf(["ltr", "rtl", "auto"]), {
|
|
535
|
+
support: {
|
|
536
|
+
...WRITTEN,
|
|
537
|
+
email: { level: "partial", values: ["rtl", "auto"], shows: "left to right: the client removes the direction", source: "caniemail", feature: "html-dir", clients: ["gmx", "web-de"] }
|
|
538
|
+
},
|
|
539
|
+
label: "Text direction"
|
|
540
|
+
}),
|
|
499
541
|
fonts: prop(fontFaces(), {
|
|
500
542
|
support: {
|
|
501
|
-
email: { level: "partial", shows: "
|
|
543
|
+
email: { level: "partial", shows: "no web font loads: the next font in each stack shows", source: "caniemail", feature: "css-at-font-face", clients: NO_WEB_FONTS },
|
|
502
544
|
web: { level: "full", source: "writer" }
|
|
503
545
|
},
|
|
504
546
|
label: "Web fonts",
|
|
@@ -590,7 +632,10 @@ defineComponent({
|
|
|
590
632
|
style: {},
|
|
591
633
|
children: {},
|
|
592
634
|
sizing: "none",
|
|
593
|
-
targets: { web: {} }
|
|
635
|
+
targets: { web: {} },
|
|
636
|
+
// A Page's or a Canvas's text has no page to number.
|
|
637
|
+
roots: ["Document"],
|
|
638
|
+
notAllowed: { code: "document/page-number", message: (root) => `A PageNumber is a page's number in a Document; this ${root} has no pages` }
|
|
594
639
|
});
|
|
595
640
|
function documentPages(root) {
|
|
596
641
|
const pages = [];
|
|
@@ -709,7 +754,7 @@ var flex2 = (value) => typeof value === "string" ? FLEX[value] : void 0;
|
|
|
709
754
|
function alignSelf(child, stack) {
|
|
710
755
|
const sized = child.style.width !== void 0 || child.style.maxWidth !== void 0;
|
|
711
756
|
if (child.type === "Divider" || child.definition.sizing !== "shrink" && !sized) return void 0;
|
|
712
|
-
const align = stack.style.alignItems;
|
|
757
|
+
const align = child.style.alignSelf ?? stack.style.alignItems;
|
|
713
758
|
if (align === "stretch") return void 0;
|
|
714
759
|
if (align) return flex2(align);
|
|
715
760
|
return { left: "flex-start", justify: "flex-start", center: "center", right: "flex-end" }[stack.text.textAlign];
|