@hyper-elements/react 0.3.0 → 0.3.1

package/dist/pdf.cjs

@@ -440,7 +440,12 @@ var textStyle = {
   fontFamily: { kind: fontFamily(), label: "Font", inherited: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
   // Word rounds sizes to half points (13px is 10pt): a fraction of a px.
   fontSize: { kind: length(["px"], { min: 1 }), label: "Font size", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
-  fontWeight: { kind: fontWeight(), label: "Font weight", inherited: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
+  fontWeight: {
+    kind: fontWeight(),
+    label: "Font weight",
+    inherited: true,
+    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 }
+  },
   fontStyle: { kind: enumOf(["normal", "italic"]), label: "Font style", inherited: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
   // Written in px with mso-line-height-rule: exactly, which Word keeps (it drops unitless ones).
   lineHeight: { kind: lineHeight(), label: "Line height", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
@@ -452,8 +457,21 @@ var textStyle = {
     support: { email: { level: "outlook", shows: "normal spacing: Word keeps letter spacing but doesn't draw it", source: "outlook-captures" }, web: css }
   },
   textAlign: { kind: enumOf(["left", "center", "right", "justify"]), label: "Alignment", inherited: true, mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
-  textTransform: { kind: enumOf(["none", "uppercase", "lowercase", "capitalize"]), label: "Letter case", inherited: true, support: { email: { level: "full", source: "assumed" }, web: css } },
-  textDecoration: { kind: enumOf(["none", "underline", "line-through"]), label: "Decoration", support: { email: { level: "full", source: "caniemail" }, web: css } }
+  textTransform: {
+    kind: enumOf(["none", "uppercase", "lowercase", "capitalize"]),
+    label: "Letter case",
+    inherited: true,
+    support: { email: { level: "outlook", values: ["lowercase"], shows: "the text as written: Word doesn't lowercase it", source: "caniemail", feature: "css-text-transform" }, web: css }
+  },
+  textDecoration: {
+    kind: enumOf(["none", "underline", "line-through"]),
+    label: "Decoration",
+    support: {
+      // Removed, so "none" leaves a link the client's own underline: said only where a line is asked for.
+      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"] },
+      web: css
+    }
+  }
 };
 var inheritedTextStyle = (({ textDecoration: _, ...rest }) => rest)(textStyle);
 var boxStyle = {
@@ -466,7 +484,17 @@ var boxStyle = {
   padding: { kind: insets(), label: "Padding", mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
   backgroundColor: { kind: color(), label: "Background color", support: { email: writer, web: css } },
   border: { kind: border(), label: "Border", mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
-  borderRadius: { kind: radius(), label: "Corner radius", support: { email: { level: "outlook", shows: "square corners", source: "caniemail" }, web: css } },
+  borderRadius: {
+    kind: radius(),
+    label: "Corner radius",
+    support: {
+      email: [
+        { level: "outlook", shows: "square corners", source: "caniemail", feature: "css-border-radius" },
+        { level: "partial", shows: "square corners", source: "caniemail", feature: "css-border-radius", clients: ["gmx", "web-de", "orange"] }
+      ],
+      web: css
+    }
+  },
   overflow: {
     kind: enumOf(["visible", "hidden"]),
     label: "Overflow",
@@ -494,13 +522,27 @@ function pick(group, ...keys) {
   return Object.fromEntries(keys.map((key) => [key, group[key]]));
 }
 var WRITTEN = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+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"];
 var ROOT_PROPS = {
   title: prop(text(), { support: WRITTEN, label: "Title", description: "The document's title (shown in a browser tab, and by some email clients)." }),
-  lang: prop(text({ maxLength: 35 }), { support: WRITTEN, label: "Language", description: 'Its language, as a BCP 47 tag ("en", "ar").' }),
-  dir: prop(enumOf(["ltr", "rtl", "auto"]), { support: WRITTEN, label: "Text direction" }),
+  lang: prop(text({ maxLength: 35 }), {
+    support: {
+      ...WRITTEN,
+      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"] }
+    },
+    label: "Language",
+    description: 'Its language, as a BCP 47 tag ("en", "ar").'
+  }),
+  dir: prop(enumOf(["ltr", "rtl", "auto"]), {
+    support: {
+      ...WRITTEN,
+      email: { level: "partial", values: ["rtl", "auto"], shows: "left to right: the client removes the direction", source: "caniemail", feature: "html-dir", clients: ["gmx", "web-de"] }
+    },
+    label: "Text direction"
+  }),
   fonts: prop(fontFaces(), {
     support: {
-      email: { level: "partial", shows: "Apple Mail and iOS Mail load web fonts; Gmail and classic Outlook don't, and show the next font in each stack", source: "caniemail" },
+      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 },
       web: { level: "full", source: "writer" }
     },
     label: "Web fonts",
@@ -592,7 +634,10 @@ defineComponent({
   style: {},
   children: {},
   sizing: "none",
-  targets: { web: {} }
+  targets: { web: {} },
+  // A Page's or a Canvas's text has no page to number.
+  roots: ["Document"],
+  notAllowed: { code: "document/page-number", message: (root) => `A PageNumber is a page's number in a Document; this ${root} has no pages` }
 });
 function documentPages(root) {
   const pages = [];
@@ -711,7 +756,7 @@ var flex2 = (value) => typeof value === "string" ? FLEX[value] : void 0;
 function alignSelf(child, stack) {
   const sized = child.style.width !== void 0 || child.style.maxWidth !== void 0;
   if (child.type === "Divider" || child.definition.sizing !== "shrink" && !sized) return void 0;
-  const align = stack.style.alignItems;
+  const align = child.style.alignSelf ?? stack.style.alignItems;
   if (align === "stretch") return void 0;
   if (align) return flex2(align);
   return { left: "flex-start", justify: "flex-start", center: "center", right: "flex-end" }[stack.text.textAlign];