@nomideusz/svelte-calendar 1.8.0 → 1.8.2

package/dist/text-fit.d.ts

@@ -50,10 +50,14 @@ export declare function fontOf(el: Element): string;
  * that does not come from its own text (block, or a flex item with min-width: 0).
  */
 export declare function fitLabel(candidates: readonly string[], lines?: number): Attachment<HTMLElement>;
+/** The badness of the loosest line but the last, were `lines` justified at `width`. */
+export declare function looseness(lines: readonly string[], font: string, width: number): number;
 export declare function breakLines(text: string, font: string, width: number): string[];
 /**
  * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
  * lines, one block span per line, re-done on resize and after webfonts load.
+ * A paragraph that cannot be justified without gaps (`TOLERANCE`) goes back to
+ * the browser as plain text, set however the element sets it (ragged).
  * Progressive: the server-rendered text is what crawlers and no-JS get; if the
  * browser's own measure disagrees with ours (a line overflows), the plain
  * text goes back and the browser breaks it. Pass the text, not the DOM — the

package/dist/text-fit.js

@@ -96,6 +96,23 @@ export function fitLabel(candidates, lines = 1) {
 // (10 + badness)² plus 50² for ending inside a word, plus 10000 when the line
 // above did too. ponytail: no fitness classes, no shrink; O(n·k).
 const SHY = '­';
+const badness = (slackPx, spaces, space) => {
+    const r = slackPx / (Math.max(spaces, 1) * space * 0.5);
+    return Math.min(10000, 100 * r * r * r);
+};
+// TeX's default \tolerance. A narrow column (a phone) sometimes has no set of
+// breaks that keeps every space under ~1.6× its width; justified, those lines
+// read as holes, so typeset leaves that paragraph to the browser, ragged.
+const TOLERANCE = 200;
+/** The badness of the loosest line but the last, were `lines` justified at `width`. */
+export function looseness(lines, font, width) {
+    const measure = (s) => measureNaturalWidth(prepareWithSegments(s, font));
+    const space = measure('a a') - measure('aa');
+    let worst = 0;
+    for (const l of lines.slice(0, -1))
+        worst = Math.max(worst, badness(width - measure(l), l.split(' ').length - 1, space));
+    return worst;
+}
 export function breakLines(text, font, width) {
     const measure = (s) => measureNaturalWidth(prepareWithSegments(s, font));
     const boxes = [];
@@ -119,10 +136,6 @@ export function breakLines(text, font, width) {
     const bw = boxes.map(measure);
     const space = measure('a a') - measure('aa');
     const hyphen = measure('-');
-    const badness = (slackPx, spaces) => {
-        const r = slackPx / (Math.max(spaces, 1) * space * 0.5);
-        return Math.min(10000, 100 * r * r * r);
-    };
     // best[h][k]: cheapest way to set boxes[0..k) with a break after, h = 1 when
     // that last line ended inside a word; prev[h][k]: [start of that line, its h].
     const best = [new Array(n + 1).fill(Infinity), new Array(n + 1).fill(Infinity)];
@@ -144,7 +157,7 @@ export function breakLines(text, font, width) {
                         break;
                     continue; // only the hyphen overflows — try the next box
                 }
-                const b = last ? 0 : badness(width - lineW, spaces);
+                const b = last ? 0 : badness(width - lineW, spaces, space);
                 const cost = last ? 0 : (10 + b) ** 2 + (h ? 50 ** 2 : 0) + (h && ph ? 10000 : 0);
                 if (best[ph][i] + cost < best[h][j + 1]) {
                     best[h][j + 1] = best[ph][i] + cost;
@@ -177,6 +190,8 @@ export function breakLines(text, font, width) {
 /**
  * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
  * lines, one block span per line, re-done on resize and after webfonts load.
+ * A paragraph that cannot be justified without gaps (`TOLERANCE`) goes back to
+ * the browser as plain text, set however the element sets it (ragged).
  * Progressive: the server-rendered text is what crawlers and no-JS get; if the
  * browser's own measure disagrees with ours (a line overflows), the plain
  * text goes back and the browser breaks it. Pass the text, not the DOM — the
@@ -204,6 +219,10 @@ export function typeset(text) {
             'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap';
         const set = (w) => {
             const lines = breakLines(text, font, w);
+            if (looseness(lines, font, w) > TOLERANCE) {
+                el.textContent = text;
+                return true;
+            }
             const spans = lines.map((l, i) => {
                 const s = document.createElement('span');
                 s.setAttribute('aria-hidden', 'true');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [

package/widget/widget.js

@@ -21056,5 +21056,15 @@ createHTML: (html) => {
 			return props;
 		}
 	};
-	if (!customElements.get("day-calendar")) customElements.define("day-calendar", DayCalendarElement);
+	if (!customElements.get("day-calendar")) {
+		customElements.define("day-calendar", DayCalendarElement);
+		const registry = customElements;
+		for (const el of document.querySelectorAll("day-calendar")) {
+			if (el instanceof DayCalendarElement) continue;
+			try {
+				registry.initialize?.(el);
+			} catch {}
+			customElements.upgrade(el);
+		}
+	}
 })();