pretrunc 0.0.0-stage → 0.1.0

package/dist/metrics.js

@@ -0,0 +1,73 @@
+import { r as face } from "./face-pICHAjvk.js";
+//#region src/metrics.ts
+var UNKNOWN = 1.5;
+var decoded = /* @__PURE__ */ new WeakMap();
+var decode = (metrics) => {
+	let d = decoded.get(metrics);
+	if (!d) {
+		const codes = Array.from(metrics.chars, (c) => c.codePointAt(0));
+		const advance = /* @__PURE__ */ new Map();
+		for (let i = 0; i < codes.length; i++) advance.set(codes[i], metrics.advances[i]);
+		const kern = /* @__PURE__ */ new Map();
+		const k = metrics.kerning;
+		for (let i = 0; i < k.length; i += 3) kern.set(codes[k[i]] * 1114112 + codes[k[i + 1]], k[i + 2]);
+		decoded.set(metrics, d = {
+			advance,
+			kern
+		});
+	}
+	return d;
+};
+var up = (units, scale) => Math.ceil(units * scale * 60) / 60;
+/** Measures text in `metrics` at `px` px: each character's advance plus each pair's kerning. */
+var measure = (metrics, px, text) => {
+	const { advance, kern } = decode(metrics);
+	const em = metrics.unitsPerEm;
+	const scale = px / em;
+	let width = 0;
+	let glyph = 0;
+	let previous = -1;
+	for (const char of text) {
+		const code = char.codePointAt(0);
+		if (previous >= 0) width += up(glyph + (kern.get(previous * 1114112 + code) ?? 0), scale);
+		glyph = advance.get(code) ?? UNKNOWN * em;
+		previous = code;
+	}
+	return previous < 0 ? 0 : width + up(glyph, scale);
+};
+/** A face that measures with `metrics` at `px` px, for `prepare` with no canvas. */
+var tableFace = (metrics, px) => face((text) => measure(metrics, px, text));
+/**
+* A stand-in for `OffscreenCanvas` that measures with tables instead of a font engine,
+* for pretext and `pretrunc/lines` where there is no canvas: install it as
+* `globalThis.OffscreenCanvas` before the first `prepareLines`. The context reads the
+* size and the first family with a table from its `font`, and falls back to the first.
+*/
+var tableCanvas = (tables) => class {
+	getContext() {
+		let px = 16;
+		let metrics = tables[0];
+		return {
+			get font() {
+				return `${px}px ${metrics.family}`;
+			},
+			set font(font) {
+				const parts = /([\d.]+)px(?:\/\S+)?\s+(.*)$/.exec(font);
+				px = Number.parseFloat(parts?.[1] ?? "16");
+				metrics = tables[0];
+				search: for (const family of (parts?.[2] ?? "").split(",")) {
+					const name = family.trim().replace(/^["']|["']$/g, "");
+					for (const table of tables) if (table.family === name) {
+						metrics = table;
+						break search;
+					}
+				}
+			},
+			measureText: (text) => ({ width: measure(metrics, px, text) })
+		};
+	}
+};
+//#endregion
+export { measure, tableCanvas, tableFace };
+
+//# sourceMappingURL=metrics.js.map

package/dist/metrics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics.js","names":[],"sources":["../src/metrics.ts"],"sourcesContent":["import { type Face, face } from \"./face.ts\";\n\n/**\n * A font's widths, written by `scripts/metrics.ts` from the font file: what a face needs\n * to measure text with no canvas, on a server, in a worker, or before the font loads.\n */\nexport interface Metrics {\n  /** The family it was read from, as CSS names it. */\n  readonly family: string;\n  readonly unitsPerEm: number;\n  /** The characters covered, in order. */\n  readonly chars: string;\n  /** Each covered character's advance, in font units, in the order of `chars`. */\n  readonly advances: ReadonlyArray<number>;\n  /** Kerned pairs as triples: first's index in `chars`, second's, adjustment in font units. */\n  readonly kerning: ReadonlyArray<number>;\n}\n\n// A character the table doesn't cover comes from some fallback font, so it is counted\n// wider than any fallback glyph a cut is likely to meet, CJK and emoji included.\nconst UNKNOWN = 1.5;\n\ninterface Decoded {\n  readonly advance: Map<number, number>;\n  readonly kern: Map<number, number>;\n}\nconst decoded = new WeakMap<Metrics, Decoded>();\nconst decode = (metrics: Metrics): Decoded => {\n  let d = decoded.get(metrics);\n  if (!d) {\n    const codes = Array.from(metrics.chars, (c) => c.codePointAt(0)!);\n    const advance = new Map<number, number>();\n    for (let i = 0; i < codes.length; i++) advance.set(codes[i]!, metrics.advances[i]!);\n    const kern = new Map<number, number>();\n    const k = metrics.kerning;\n    for (let i = 0; i < k.length; i += 3) {\n      kern.set(codes[k[i]!]! * 0x110000 + codes[k[i + 1]!]!, k[i + 2]!);\n    }\n    decoded.set(metrics, (d = { advance, kern }));\n  }\n  return d;\n};\n\n// Firefox rounds each glyph's advance, kerning to the next glyph included, to the nearest\n// 1/60 px, its layout unit, so a run of glyphs that round up lays out wider than their\n// sum: 0.4 px over 352 characters of Inter at 15 px. Each glyph is rounded up instead,\n// never less than Firefox and never less than the exact widths Chrome and WebKit use.\nconst up = (units: number, scale: number) => Math.ceil(units * scale * 60) / 60;\n\n/** Measures text in `metrics` at `px` px: each character's advance plus each pair's kerning. */\nexport const measure = (metrics: Metrics, px: number, text: string): number => {\n  const { advance, kern } = decode(metrics);\n  const em = metrics.unitsPerEm;\n  const scale = px / em;\n  let width = 0;\n  // The previous glyph's advance in font units, waiting for its kerning to this one.\n  let glyph = 0;\n  let previous = -1;\n  for (const char of text) {\n    const code = char.codePointAt(0)!;\n    if (previous >= 0) width += up(glyph + (kern.get(previous * 0x110000 + code) ?? 0), scale);\n    glyph = advance.get(code) ?? UNKNOWN * em;\n    previous = code;\n  }\n  return previous < 0 ? 0 : width + up(glyph, scale);\n};\n\n/** A face that measures with `metrics` at `px` px, for `prepare` with no canvas. */\nexport const tableFace = (metrics: Metrics, px: number): Face =>\n  face((text) => measure(metrics, px, text));\n\n/**\n * A stand-in for `OffscreenCanvas` that measures with tables instead of a font engine,\n * for pretext and `pretrunc/lines` where there is no canvas: install it as\n * `globalThis.OffscreenCanvas` before the first `prepareLines`. The context reads the\n * size and the first family with a table from its `font`, and falls back to the first.\n */\nexport const tableCanvas = (tables: ReadonlyArray<Metrics>) =>\n  class {\n    getContext() {\n      let px = 16;\n      let metrics = tables[0]!;\n      return {\n        get font() {\n          return `${px}px ${metrics.family}`;\n        },\n        set font(font: string) {\n          // `[style] [weight] 15px[/line-height] \"Family\", fallback`\n          const parts = /([\\d.]+)px(?:\\/\\S+)?\\s+(.*)$/.exec(font);\n          px = Number.parseFloat(parts?.[1] ?? \"16\");\n          metrics = tables[0]!;\n          // The first family named that has a table.\n          search: for (const family of (parts?.[2] ?? \"\").split(\",\")) {\n            const name = family.trim().replace(/^[\"']|[\"']$/g, \"\");\n            for (const table of tables) {\n              if (table.family === name) {\n                metrics = table;\n                break search;\n              }\n            }\n          }\n        },\n        measureText: (text: string) => ({ width: measure(metrics, px, text) }),\n      };\n    }\n  };\n"],"mappings":";;AAoBA,IAAM,UAAU;AAMhB,IAAM,0BAAU,IAAI,QAA0B;AAC9C,IAAM,UAAU,YAA8B;CAC5C,IAAI,IAAI,QAAQ,IAAI,OAAO;CAC3B,IAAI,CAAC,GAAG;EACN,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,MAAM,EAAE,YAAY,CAAC,CAAE;EAChE,MAAM,0BAAU,IAAI,IAAoB;EACxC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI,MAAM,IAAK,QAAQ,SAAS,EAAG;EAClF,MAAM,uBAAO,IAAI,IAAoB;EACrC,MAAM,IAAI,QAAQ;EAClB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK,GACjC,KAAK,IAAI,MAAM,EAAE,MAAQ,UAAW,MAAM,EAAE,IAAI,KAAO,EAAE,IAAI,EAAG;EAElE,QAAQ,IAAI,SAAU,IAAI;GAAE;GAAS;EAAK,CAAE;CAC9C;CACA,OAAO;AACT;AAMA,IAAM,MAAM,OAAe,UAAkB,KAAK,KAAK,QAAQ,QAAQ,EAAE,IAAI;;AAG7E,IAAa,WAAW,SAAkB,IAAY,SAAyB;CAC7E,MAAM,EAAE,SAAS,SAAS,OAAO,OAAO;CACxC,MAAM,KAAK,QAAQ;CACnB,MAAM,QAAQ,KAAK;CACnB,IAAI,QAAQ;CAEZ,IAAI,QAAQ;CACZ,IAAI,WAAW;CACf,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,OAAO,KAAK,YAAY,CAAC;EAC/B,IAAI,YAAY,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,WAAW,UAAW,IAAI,KAAK,IAAI,KAAK;EACzF,QAAQ,QAAQ,IAAI,IAAI,KAAK,UAAU;EACvC,WAAW;CACb;CACA,OAAO,WAAW,IAAI,IAAI,QAAQ,GAAG,OAAO,KAAK;AACnD;;AAGA,IAAa,aAAa,SAAkB,OAC1C,MAAM,SAAS,QAAQ,SAAS,IAAI,IAAI,CAAC;;;;;;;AAQ3C,IAAa,eAAe,WAC1B,MAAM;CACJ,aAAa;EACX,IAAI,KAAK;EACT,IAAI,UAAU,OAAO;EACrB,OAAO;GACL,IAAI,OAAO;IACT,OAAO,GAAG,GAAG,KAAK,QAAQ;GAC5B;GACA,IAAI,KAAK,MAAc;IAErB,MAAM,QAAQ,+BAA+B,KAAK,IAAI;IACtD,KAAK,OAAO,WAAW,QAAQ,MAAM,IAAI;IACzC,UAAU,OAAO;IAEjB,QAAQ,KAAK,MAAM,WAAW,QAAQ,MAAM,GAAA,CAAI,MAAM,GAAG,GAAG;KAC1D,MAAM,OAAO,OAAO,KAAK,CAAC,CAAC,QAAQ,gBAAgB,EAAE;KACrD,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,WAAW,MAAM;MACzB,UAAU;MACV,MAAM;KACR;IAEJ;GACF;GACA,cAAc,UAAkB,EAAE,OAAO,QAAQ,SAAS,IAAI,IAAI,EAAE;EACtE;CACF;AACF"}

package/dist/react-CnQfjWyS.js

@@ -0,0 +1,156 @@
+import { c as widthOf, i as faceOf } from "./face-pICHAjvk.js";
+import { a as prepare, l as truncated, r as head, s as tail, t as cut } from "./cut-D7qi2yZl.js";
+import { i as spacingOf, n as observe, r as onFonts, t as fontOf } from "./dom-CPL0-qc3.js";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/react.ts
+var Fonts = createContext({
+	font: void 0,
+	letterSpacing: void 0
+});
+/**
+* Gives every `Truncate`, `Clamp` and `useBox` inside the font and letter spacing their
+* text renders in, once for a list. Each would otherwise read its element's computed
+* style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow what's
+* given, so give what the rows really render in.
+*/
+function FontProvider(props) {
+	const { font, letterSpacing } = props;
+	const value = useMemo(() => ({
+		font,
+		letterSpacing
+	}), [font, letterSpacing]);
+	return createElement(Fonts, { value }, props.children);
+}
+/**
+* The width and font text is cut to: the ones given, then a `FontProvider`'s, or an
+* element's. The width is a store, not state, so a component can read what it derives
+* from it with `useSyncExternalStore` and render only when that changes.
+*/
+var useBox = (props) => {
+	const provided = useContext(Fonts);
+	const given = props.font ?? provided.font;
+	const givenSpacing = props.letterSpacing ?? provided.letterSpacing;
+	const [element, setElement] = useState(null);
+	const [computed, setComputed] = useState();
+	const [fonts, setFonts] = useState(0);
+	const observed = useRef(void 0);
+	useEffect(() => onFonts(() => setFonts((n) => n + 1)), []);
+	const readFont = given === void 0;
+	const readSpacing = givenSpacing === void 0;
+	const ref = useCallback((e) => {
+		setElement(e);
+		if (!e || !readFont && !readSpacing) return;
+		const style = getComputedStyle(e);
+		setComputed({
+			font: fontOf(e, style),
+			spacing: spacingOf(e, style)
+		});
+	}, [readFont, readSpacing]);
+	const observing = props.width === void 0;
+	const subscribe = useCallback((change) => {
+		if (!element || !observing) return () => {};
+		return observe(element, (width) => {
+			observed.current = width;
+			change();
+		});
+	}, [element, observing]);
+	const width = props.width;
+	return {
+		ref,
+		font: given ?? computed?.font,
+		spacing: givenSpacing ?? computed?.spacing ?? 0,
+		fonts,
+		subscribe,
+		width: () => width ?? observed.current
+	};
+};
+/**
+* `protect` kept by what it says, not by identity: an inline literal is new on every
+* render, and this returns one value while its patterns, weights and wholes stay the same.
+*/
+var useProtect = (protect) => {
+	let key = "";
+	if (protect) for (const given of "length" in protect ? protect : [protect]) {
+		const { pattern, weight = 1, whole = false } = given instanceof RegExp ? { pattern: given } : given;
+		key += `${pattern}${weight}${whole} `;
+	}
+	const [kept, setKept] = useState({
+		key,
+		protect
+	});
+	if (kept.key !== key) setKept({
+		key,
+		protect
+	});
+	return kept.key === key ? kept.protect : protect;
+};
+var useCutWith = (props, apart) => {
+	const box = useBox(props);
+	const { font, spacing, fonts } = box;
+	const { text } = props;
+	const protect = useProtect(props.protect);
+	const prepared = useMemo(() => font === void 0 ? void 0 : prepare(text, font, {
+		...protect ? { protect } : {},
+		letterSpacing: spacing
+	}), [
+		text,
+		font,
+		spacing,
+		protect,
+		fonts
+	]);
+	const snapshot = () => {
+		const width = box.width();
+		if (prepared === void 0 || width === void 0 || font === void 0) return void 0;
+		const ellipsis = props.ellipsis ?? "…";
+		return apart && typeof ellipsis === "string" ? cut(prepared, width, {
+			...props,
+			ellipsis: widthOf(faceOf(font), ellipsis) + spacing * ellipsis.length
+		}) : cut(prepared, width, props);
+	};
+	const result = useSyncExternalStore(box.subscribe, snapshot, () => void 0);
+	return {
+		ref: box.ref,
+		prepared,
+		cut: result
+	};
+};
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+var useCut = (props) => useCutWith(props, props.separateEllipsis === true);
+var line = {
+	display: "block",
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+	textOverflow: "ellipsis"
+};
+var collapsed = { fontSize: 0 };
+var unselectable = {
+	userSelect: "none",
+	WebkitUserSelect: "none"
+};
+/** One line of text, cut to fit its box. */
+function Truncate(props) {
+	const full = props.render === "full";
+	const handle = useCutWith(props, full);
+	const { prepared: p, cut: c } = handle;
+	const ellipsis = props.ellipsis ?? "…";
+	const cutNow = p !== void 0 && c !== void 0 && truncated(c);
+	const text = p?.text ?? props.text;
+	const kept = cutNow ? text.slice(0, head(c)) : text;
+	const rest = cutNow ? text.slice(tail(c)) : "";
+	const own = {
+		ref: handle.ref,
+		className: props.className,
+		style: line,
+		title: !full && cutNow ? text : void 0
+	};
+	if (!full) return createElement("span", own, kept + (cutNow ? ellipsis + rest : ""));
+	return createElement("span", own, kept, createElement("span", { style: collapsed }, cutNow ? text.slice(head(c), tail(c)) : ""), cutNow ? createElement("span", {
+		"aria-hidden": true,
+		style: unselectable
+	}, ellipsis) : null, rest);
+}
+//#endregion
+export { useProtect as a, useCut as i, Truncate as n, useBox as r, FontProvider as t };
+
+//# sourceMappingURL=react-CnQfjWyS.js.map

package/dist/react-CnQfjWyS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-CnQfjWyS.js","names":[],"sources":["../src/react.ts"],"sourcesContent":["// Written with createElement, not JSX: every .tsx file here compiles as Solid, so plain\n// .ts keeps the React adapter clear of the Solid compiler without a second JSX setup.\nimport {\n  createContext,\n  createElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport {\n  cut,\n  type Cut,\n  type CutOptions,\n  head,\n  prepare,\n  type Prepared,\n  type Protect,\n  tail,\n  truncated,\n} from \"./cut.ts\";\nimport { fontOf, observe, onFonts, spacingOf } from \"./dom.ts\";\nimport { faceOf, widthOf } from \"./face.ts\";\n\nexport interface BoxProps {\n  /** The room in px. Left out, it is observed from the element. */\n  readonly width?: number;\n  /** A CSS font shorthand. Left out, it is read from the element's computed style. */\n  readonly font?: string;\n  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */\n  readonly letterSpacing?: number;\n}\n\nexport interface Box {\n  /** Give it the element whose width and font the text follows. */\n  readonly ref: (element: Element | null) => void;\n  /** The font given, or the element's; undefined until it mounts. */\n  readonly font: string | undefined;\n  /** The letter spacing given, or the element's, in px. */\n  readonly spacing: number;\n  /** Changes whenever web fonts load: a dependency wherever text is prepared. */\n  readonly fonts: number;\n  /** Subscribes to the width, for `useSyncExternalStore`. */\n  readonly subscribe: (change: () => void) => () => void;\n  /** The width given, or the element's content width; undefined until observed. */\n  readonly width: () => number | undefined;\n}\n\nexport interface FontProviderProps {\n  /** A CSS font shorthand that every cut inside is in, unless it's given its own. */\n  readonly font?: string;\n  /** CSS `letter-spacing` in px for every cut inside, unless it's given its own. */\n  readonly letterSpacing?: number;\n  readonly children?: ReactNode;\n}\n\ninterface Provided {\n  readonly font: string | undefined;\n  readonly letterSpacing: number | undefined;\n}\n\nconst Fonts = createContext<Provided>({ font: undefined, letterSpacing: undefined });\n\n/**\n * Gives every `Truncate`, `Clamp` and `useBox` inside the font and letter spacing their\n * text renders in, once for a list. Each would otherwise read its element's computed\n * style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow what's\n * given, so give what the rows really render in.\n */\nexport function FontProvider(props: FontProviderProps): ReactNode {\n  const { font, letterSpacing } = props;\n  const value = useMemo(() => ({ font, letterSpacing }), [font, letterSpacing]);\n  return createElement(Fonts, { value }, props.children);\n}\n\n/**\n * The width and font text is cut to: the ones given, then a `FontProvider`'s, or an\n * element's. The width is a store, not state, so a component can read what it derives\n * from it with `useSyncExternalStore` and render only when that changes.\n */\nexport const useBox = (props: BoxProps): Box => {\n  const provided = useContext(Fonts);\n  const given = props.font ?? provided.font;\n  const givenSpacing = props.letterSpacing ?? provided.letterSpacing;\n  const [element, setElement] = useState<Element | null>(null);\n  const [computed, setComputed] = useState<{ font: string; spacing: number }>();\n  const [fonts, setFonts] = useState(0);\n  const observed = useRef<number | undefined>(undefined);\n  useEffect(() => onFonts(() => setFonts((n) => n + 1)), []);\n  const readFont = given === undefined;\n  const readSpacing = givenSpacing === undefined;\n  // The style is read once per element as it mounts, before it paints, and only for what\n  // wasn't given.\n  const ref = useCallback(\n    (e: Element | null) => {\n      setElement(e);\n      if (!e || (!readFont && !readSpacing)) return;\n      const style = getComputedStyle(e);\n      setComputed({ font: fontOf(e, style), spacing: spacingOf(e, style) });\n    },\n    [readFont, readSpacing],\n  );\n  const observing = props.width === undefined;\n  const subscribe = useCallback(\n    (change: () => void) => {\n      if (!element || !observing) return () => {};\n      return observe(element, (width) => {\n        observed.current = width;\n        change();\n      });\n    },\n    [element, observing],\n  );\n  const width = props.width;\n  return {\n    ref,\n    font: given ?? computed?.font,\n    spacing: givenSpacing ?? computed?.spacing ?? 0,\n    fonts,\n    subscribe,\n    width: () => width ?? observed.current,\n  };\n};\n\nexport interface CutProps extends CutOptions, BoxProps {\n  readonly text: string;\n  readonly protect?: Protect;\n}\n\n/**\n * `protect` kept by what it says, not by identity: an inline literal is new on every\n * render, and this returns one value while its patterns, weights and wholes stay the same.\n */\nexport const useProtect = (protect: Protect | undefined): Protect | undefined => {\n  let key = \"\";\n  if (protect) {\n    for (const given of \"length\" in protect ? protect : [protect]) {\n      const {\n        pattern,\n        weight = 1,\n        whole = false,\n      } = given instanceof RegExp ? { pattern: given } : given;\n      key += `${pattern}${weight}${whole} `;\n    }\n  }\n  // The value from the render that first saw this key, as React's derived state is kept.\n  const [kept, setKept] = useState({ key, protect });\n  if (kept.key !== key) setKept({ key, protect });\n  return kept.key === key ? kept.protect : protect;\n};\n\nexport interface UseCutProps extends CutProps {\n  /**\n   * The ellipsis is painted in an element of its own, so it is measured as a run of its\n   * own and no kerning across it counts.\n   */\n  readonly separateEllipsis?: boolean;\n}\n\nexport interface CutHandle {\n  /** Give it the element whose width and font the cut follows. */\n  readonly ref: (element: Element | null) => void;\n  readonly prepared: Prepared | undefined;\n  /** Undefined until the width and font are known. */\n  readonly cut: Cut | undefined;\n}\n\nconst useCutWith = (props: CutProps, apart: boolean): CutHandle => {\n  const box = useBox(props);\n  const { font, spacing, fonts } = box;\n  const { text } = props;\n  const protect = useProtect(props.protect);\n  const prepared = useMemo(\n    () =>\n      font === undefined\n        ? undefined\n        : prepare(text, font, { ...(protect ? { protect } : {}), letterSpacing: spacing }),\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- fonts changes when a web font loads, after forget() has dropped the widths the last prepare used\n    [text, font, spacing, protect, fonts],\n  );\n  // The cut is the snapshot: a number, so a resize that doesn't move it renders nothing.\n  const snapshot = (): Cut | undefined => {\n    const width = box.width();\n    if (prepared === undefined || width === undefined || font === undefined) return undefined;\n    const ellipsis = props.ellipsis ?? \"…\";\n    return apart && typeof ellipsis === \"string\"\n      ? cut(prepared, width, {\n          ...props,\n          ellipsis: widthOf(faceOf(font), ellipsis) + spacing * ellipsis.length,\n        })\n      : cut(prepared, width, props);\n  };\n  const result = useSyncExternalStore(box.subscribe, snapshot, () => undefined);\n  return { ref: box.ref, prepared, cut: result };\n};\n\n/** The cut of `props.text` for an element's width and font, or for the ones given. */\nexport const useCut = (props: UseCutProps): CutHandle =>\n  useCutWith(props, props.separateEllipsis === true);\n\nexport interface TruncateProps extends CutProps {\n  readonly ellipsis?: string;\n  /**\n   * \"kept\" (default) paints the kept text, with the whole text in `title` once cut.\n   * \"full\" paints all of it with the cut part collapsed to no width, so copy,\n   * find-in-page and screen readers get the whole text.\n   */\n  readonly render?: \"kept\" | \"full\";\n  readonly className?: string;\n}\n\n// Until the first cut, the browser's own end ellipsis stands in.\nconst line = {\n  display: \"block\",\n  overflow: \"hidden\",\n  whiteSpace: \"nowrap\",\n  textOverflow: \"ellipsis\",\n} as const;\nconst collapsed = { fontSize: 0 } as const;\nconst unselectable = { userSelect: \"none\", WebkitUserSelect: \"none\" } as const;\n\n/** One line of text, cut to fit its box. */\nexport function Truncate(props: TruncateProps): ReactNode {\n  const full = props.render === \"full\";\n  const handle = useCutWith(props, full);\n  const { prepared: p, cut: c } = handle;\n  const ellipsis = props.ellipsis ?? \"…\";\n  const cutNow = p !== undefined && c !== undefined && truncated(c);\n  const text = p?.text ?? props.text;\n  const kept = cutNow ? text.slice(0, head(c)) : text;\n  const rest = cutNow ? text.slice(tail(c)) : \"\";\n  const own = {\n    ref: handle.ref,\n    className: props.className,\n    style: line,\n    title: !full && cutNow ? text : undefined,\n  };\n  if (!full) return createElement(\"span\", own, kept + (cutNow ? ellipsis + rest : \"\"));\n  return createElement(\n    \"span\",\n    own,\n    kept,\n    createElement(\"span\", { style: collapsed }, cutNow ? text.slice(head(c), tail(c)) : \"\"),\n    cutNow ? createElement(\"span\", { \"aria-hidden\": true, style: unselectable }, ellipsis) : null,\n    rest,\n  );\n}\n"],"mappings":"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"}

package/dist/react-lines.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import { type CutOptions, type Protect } from "./cut.js";
+export interface ClampProps extends Omit<CutOptions, "tailGraphemes"> {
+    readonly text: string;
+    /** How many lines to keep. */
+    readonly lines: number;
+    readonly ellipsis?: string;
+    /**
+     * Painted after the text whenever it is cut or `expanded`, such as a "more" or
+     * "less" button. Its width is observed and kept free on the last line.
+     */
+    readonly after?: ReactNode;
+    /** Show every line, with `after` following the last one, on its own if it doesn't fit. */
+    readonly expanded?: boolean;
+    /** The room in px. Left out, it is observed from the element. */
+    readonly width?: number;
+    /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+    readonly font?: string;
+    /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+    readonly letterSpacing?: number;
+    readonly protect?: Protect;
+    readonly whiteSpace?: "normal" | "pre-wrap";
+    readonly wordBreak?: "normal" | "keep-all";
+    readonly className?: string;
+}
+/** A paragraph cut to a number of lines at its end, start or middle. */
+export declare function Clamp(props: ClampProps): ReactNode;

package/dist/react-lines.js

@@ -0,0 +1,74 @@
+import { l as truncated, r as head, s as tail } from "./cut-D7qi2yZl.js";
+import { n as observe } from "./dom-CPL0-qc3.js";
+import { n as prepareLines, t as clamp } from "./lines-DOj2DQLl.js";
+import { a as useProtect, r as useBox } from "./react-CnQfjWyS.js";
+import { createElement, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+//#region src/react-lines.ts
+var box = { display: "inline-block" };
+/** A paragraph cut to a number of lines at its end, start or middle. */
+function Clamp(props) {
+	const b = useBox(props);
+	const { font, spacing, fonts } = b;
+	const { text, lines, at, ratio, words, trim, ellipsis = "…", whiteSpace, wordBreak } = props;
+	const hasAfter = props.after !== void 0;
+	const [after, setAfter] = useState(null);
+	const [afterWidth, setAfterWidth] = useState(0);
+	useEffect(() => after ? observe(after, setAfterWidth) : void 0, [after]);
+	const protect = useProtect(props.protect);
+	const prepared = useMemo(() => font === void 0 ? void 0 : prepareLines(text, font, {
+		...protect ? { protect } : {},
+		...whiteSpace ? { whiteSpace } : {},
+		...wordBreak ? { wordBreak } : {},
+		letterSpacing: spacing
+	}), [
+		text,
+		font,
+		spacing,
+		protect,
+		whiteSpace,
+		wordBreak,
+		fonts
+	]);
+	const width = useSyncExternalStore(b.subscribe, b.width, () => void 0);
+	const within = typeof words === "object" ? words.within : words;
+	const c = useMemo(() => {
+		if (prepared === void 0 || width === void 0) return void 0;
+		return clamp(prepared, width, {
+			lines,
+			ellipsis,
+			after: hasAfter ? afterWidth : 0,
+			...at === void 0 ? {} : { at },
+			...ratio === void 0 ? {} : { ratio },
+			...within === void 0 ? {} : { words: typeof within === "number" ? { within } : within },
+			...trim === void 0 ? {} : { trim }
+		});
+	}, [
+		prepared,
+		width,
+		lines,
+		ellipsis,
+		hasAfter,
+		afterWidth,
+		at,
+		ratio,
+		within,
+		trim
+	]);
+	const cutNow = c !== void 0 && truncated(c);
+	const shown = props.expanded || prepared === void 0 || !cutNow ? text : prepared.text.slice(0, head(c)) + ellipsis + prepared.text.slice(tail(c));
+	return createElement("div", {
+		ref: b.ref,
+		className: props.className,
+		style: {
+			overflowWrap: "break-word",
+			whiteSpace: whiteSpace ?? "normal"
+		}
+	}, shown, hasAfter && (props.expanded || cutNow) ? createElement("span", {
+		ref: setAfter,
+		style: box
+	}, props.after) : null);
+}
+//#endregion
+export { Clamp };
+
+//# sourceMappingURL=react-lines.js.map

package/dist/react-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-lines.js","names":[],"sources":["../src/react-lines.ts"],"sourcesContent":["// Written with createElement, not JSX, as react.ts is.\nimport {\n  createElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { type CutOptions, head, type Protect, tail, truncated } from \"./cut.ts\";\nimport { observe } from \"./dom.ts\";\nimport { clamp, prepareLines } from \"./lines.ts\";\nimport { useBox, useProtect } from \"./react.ts\";\n\nexport interface ClampProps extends Omit<CutOptions, \"tailGraphemes\"> {\n  readonly text: string;\n  /** How many lines to keep. */\n  readonly lines: number;\n  readonly ellipsis?: string;\n  /**\n   * Painted after the text whenever it is cut or `expanded`, such as a \"more\" or\n   * \"less\" button. Its width is observed and kept free on the last line.\n   */\n  readonly after?: ReactNode;\n  /** Show every line, with `after` following the last one, on its own if it doesn't fit. */\n  readonly expanded?: boolean;\n  /** The room in px. Left out, it is observed from the element. */\n  readonly width?: number;\n  /** A CSS font shorthand. Left out, it is read from the element's computed style. */\n  readonly font?: string;\n  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */\n  readonly letterSpacing?: number;\n  readonly protect?: Protect;\n  readonly whiteSpace?: \"normal\" | \"pre-wrap\";\n  readonly wordBreak?: \"normal\" | \"keep-all\";\n  readonly className?: string;\n}\n\nconst box = { display: \"inline-block\" } as const;\n\n/** A paragraph cut to a number of lines at its end, start or middle. */\nexport function Clamp(props: ClampProps): ReactNode {\n  const b = useBox(props);\n  const { font, spacing, fonts } = b;\n  const { text, lines, at, ratio, words, trim, ellipsis = \"…\", whiteSpace, wordBreak } = props;\n  const hasAfter = props.after !== undefined;\n  // `after` mounts only once the text is cut, so it is observed from its own ref.\n  const [after, setAfter] = useState<Element | null>(null);\n  const [afterWidth, setAfterWidth] = useState(0);\n  useEffect(() => (after ? observe(after, setAfterWidth) : undefined), [after]);\n  const protect = useProtect(props.protect);\n  const prepared = useMemo(\n    () =>\n      font === undefined\n        ? undefined\n        : prepareLines(text, font, {\n            ...(protect ? { protect } : {}),\n            ...(whiteSpace ? { whiteSpace } : {}),\n            ...(wordBreak ? { wordBreak } : {}),\n            letterSpacing: spacing,\n          }),\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- fonts changes when a web font loads, after forget() has dropped the widths the last prepare used\n    [text, font, spacing, protect, whiteSpace, wordBreak, fonts],\n  );\n  // Clamps are few beside a table's rows, so each renders on a width change and clamps\n  // only when something it reads has changed.\n  const width = useSyncExternalStore(b.subscribe, b.width, () => undefined);\n  const within = typeof words === \"object\" ? words.within : words;\n  const c = useMemo(() => {\n    if (prepared === undefined || width === undefined) return undefined;\n    return clamp(prepared, width, {\n      lines,\n      ellipsis,\n      // `after` is an element here and a width to `clamp`, so it's always given as one.\n      after: hasAfter ? afterWidth : 0,\n      ...(at === undefined ? {} : { at }),\n      ...(ratio === undefined ? {} : { ratio }),\n      ...(within === undefined ? {} : { words: typeof within === \"number\" ? { within } : within }),\n      ...(trim === undefined ? {} : { trim }),\n    });\n  }, [prepared, width, lines, ellipsis, hasAfter, afterWidth, at, ratio, within, trim]);\n  const cutNow = c !== undefined && truncated(c);\n  const shown =\n    props.expanded || prepared === undefined || !cutNow\n      ? text\n      : prepared.text.slice(0, head(c)) + ellipsis + prepared.text.slice(tail(c));\n  return createElement(\n    \"div\",\n    {\n      ref: b.ref,\n      className: props.className,\n      style: { overflowWrap: \"break-word\", whiteSpace: whiteSpace ?? \"normal\" },\n    },\n    shown,\n    hasAfter && (props.expanded || cutNow)\n      ? createElement(\"span\", { ref: setAfter, style: box }, props.after)\n      : null,\n  );\n}\n"],"mappings":";;;;;;AAsCA,IAAM,MAAM,EAAE,SAAS,eAAe;;AAGtC,SAAgB,MAAM,OAA8B;CAClD,MAAM,IAAI,OAAO,KAAK;CACtB,MAAM,EAAE,MAAM,SAAS,UAAU;CACjC,MAAM,EAAE,MAAM,OAAO,IAAI,OAAO,OAAO,MAAM,WAAW,KAAK,YAAY,cAAc;CACvF,MAAM,WAAW,MAAM,UAAU,KAAA;CAEjC,MAAM,CAAC,OAAO,YAAY,SAAyB,IAAI;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,gBAAiB,QAAQ,QAAQ,OAAO,aAAa,IAAI,KAAA,GAAY,CAAC,KAAK,CAAC;CAC5E,MAAM,UAAU,WAAW,MAAM,OAAO;CACxC,MAAM,WAAW,cAEb,SAAS,KAAA,IACL,KAAA,IACA,aAAa,MAAM,MAAM;EACvB,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;EAC7B,GAAI,aAAa,EAAE,WAAW,IAAI,CAAC;EACnC,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;EACjC,eAAe;CACjB,CAAC,GAEP;EAAC;EAAM;EAAM;EAAS;EAAS;EAAY;EAAW;CAAK,CAC7D;CAGA,MAAM,QAAQ,qBAAqB,EAAE,WAAW,EAAE,aAAa,KAAA,CAAS;CACxE,MAAM,SAAS,OAAO,UAAU,WAAW,MAAM,SAAS;CAC1D,MAAM,IAAI,cAAc;EACtB,IAAI,aAAa,KAAA,KAAa,UAAU,KAAA,GAAW,OAAO,KAAA;EAC1D,OAAO,MAAM,UAAU,OAAO;GAC5B;GACA;GAEA,OAAO,WAAW,aAAa;GAC/B,GAAI,OAAO,KAAA,IAAY,CAAC,IAAI,EAAE,GAAG;GACjC,GAAI,UAAU,KAAA,IAAY,CAAC,IAAI,EAAE,MAAM;GACvC,GAAI,WAAW,KAAA,IAAY,CAAC,IAAI,EAAE,OAAO,OAAO,WAAW,WAAW,EAAE,OAAO,IAAI,OAAO;GAC1F,GAAI,SAAS,KAAA,IAAY,CAAC,IAAI,EAAE,KAAK;EACvC,CAAC;CACH,GAAG;EAAC;EAAU;EAAO;EAAO;EAAU;EAAU;EAAY;EAAI;EAAO;EAAQ;CAAI,CAAC;CACpF,MAAM,SAAS,MAAM,KAAA,KAAa,UAAU,CAAC;CAC7C,MAAM,QACJ,MAAM,YAAY,aAAa,KAAA,KAAa,CAAC,SACzC,OACA,SAAS,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,IAAI,WAAW,SAAS,KAAK,MAAM,KAAK,CAAC,CAAC;CAC9E,OAAO,cACL,OACA;EACE,KAAK,EAAE;EACP,WAAW,MAAM;EACjB,OAAO;GAAE,cAAc;GAAc,YAAY,cAAc;EAAS;CAC1E,GACA,OACA,aAAa,MAAM,YAAY,UAC3B,cAAc,QAAQ;EAAE,KAAK;EAAU,OAAO;CAAI,GAAG,MAAM,KAAK,IAChE,IACN;AACF"}

package/dist/react.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+import { type Cut, type CutOptions, type Prepared, type Protect } from "./cut.js";
+export interface BoxProps {
+    /** The room in px. Left out, it is observed from the element. */
+    readonly width?: number;
+    /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+    readonly font?: string;
+    /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+    readonly letterSpacing?: number;
+}
+export interface Box {
+    /** Give it the element whose width and font the text follows. */
+    readonly ref: (element: Element | null) => void;
+    /** The font given, or the element's; undefined until it mounts. */
+    readonly font: string | undefined;
+    /** The letter spacing given, or the element's, in px. */
+    readonly spacing: number;
+    /** Changes whenever web fonts load: a dependency wherever text is prepared. */
+    readonly fonts: number;
+    /** Subscribes to the width, for `useSyncExternalStore`. */
+    readonly subscribe: (change: () => void) => () => void;
+    /** The width given, or the element's content width; undefined until observed. */
+    readonly width: () => number | undefined;
+}
+export interface FontProviderProps {
+    /** A CSS font shorthand that every cut inside is in, unless it's given its own. */
+    readonly font?: string;
+    /** CSS `letter-spacing` in px for every cut inside, unless it's given its own. */
+    readonly letterSpacing?: number;
+    readonly children?: ReactNode;
+}
+/**
+ * Gives every `Truncate`, `Clamp` and `useBox` inside the font and letter spacing their
+ * text renders in, once for a list. Each would otherwise read its element's computed
+ * style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow what's
+ * given, so give what the rows really render in.
+ */
+export declare function FontProvider(props: FontProviderProps): ReactNode;
+/**
+ * The width and font text is cut to: the ones given, then a `FontProvider`'s, or an
+ * element's. The width is a store, not state, so a component can read what it derives
+ * from it with `useSyncExternalStore` and render only when that changes.
+ */
+export declare const useBox: (props: BoxProps) => Box;
+export interface CutProps extends CutOptions, BoxProps {
+    readonly text: string;
+    readonly protect?: Protect;
+}
+/**
+ * `protect` kept by what it says, not by identity: an inline literal is new on every
+ * render, and this returns one value while its patterns, weights and wholes stay the same.
+ */
+export declare const useProtect: (protect: Protect | undefined) => Protect | undefined;
+export interface UseCutProps extends CutProps {
+    /**
+     * The ellipsis is painted in an element of its own, so it is measured as a run of its
+     * own and no kerning across it counts.
+     */
+    readonly separateEllipsis?: boolean;
+}
+export interface CutHandle {
+    /** Give it the element whose width and font the cut follows. */
+    readonly ref: (element: Element | null) => void;
+    readonly prepared: Prepared | undefined;
+    /** Undefined until the width and font are known. */
+    readonly cut: Cut | undefined;
+}
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+export declare const useCut: (props: UseCutProps) => CutHandle;
+export interface TruncateProps extends CutProps {
+    readonly ellipsis?: string;
+    /**
+     * "kept" (default) paints the kept text, with the whole text in `title` once cut.
+     * "full" paints all of it with the cut part collapsed to no width, so copy,
+     * find-in-page and screen readers get the whole text.
+     */
+    readonly render?: "kept" | "full";
+    readonly className?: string;
+}
+/** One line of text, cut to fit its box. */
+export declare function Truncate(props: TruncateProps): ReactNode;

package/dist/react.js

@@ -0,0 +1 @@
+export { t as FontProvider, n as Truncate, r as useBox, i as useCut, a as useProtect } from "./react-CnQfjWyS.js";

package/dist/solid-BWC32VMg.js

@@ -0,0 +1,155 @@
+import { c as widthOf, i as faceOf } from "./face-pICHAjvk.js";
+import { a as prepare, l as truncated, r as head, s as tail, t as cut } from "./cut-D7qi2yZl.js";
+import { i as spacingOf, n as observe, r as onFonts, t as fontOf } from "./dom-CPL0-qc3.js";
+import { className, createComponent, effect, insert, memo, readShallow, ref, setAttribute, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, onSettled, untrack, useContext } from "solid-js";
+//#region src/solid.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span style=display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span style=font-size:0>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span aria-hidden=true style=user-select:none;-webkit-user-select:none>`);
+var Fonts = createContext({});
+/**
+* Gives every `Truncate`, `Clamp` and `createBox` inside the font and letter spacing
+* their text renders in, once for a list. Each would otherwise read its element's
+* computed style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow
+* what's given, so give what the rows really render in.
+*/
+function FontProvider(props) {
+	return createComponent(Fonts, {
+		value: props,
+		get children() {
+			return props.children;
+		}
+	});
+}
+/**
+* The width and font text is cut to: the ones given, then a `FontProvider`'s, or an
+* element's, observed. Whether to observe the width and read the font is decided once,
+* when it settles.
+*/
+var createBox = (props) => {
+	const provided = useContext(Fonts);
+	const given = () => props.font ?? provided.font;
+	const spacing = () => props.letterSpacing ?? provided.letterSpacing;
+	let element;
+	const [observed, setObserved] = createSignal();
+	const [computed, setComputed] = createSignal();
+	const [spaced, setSpaced] = createSignal(0);
+	const [fonts, setFonts] = createSignal(0);
+	onSettled(() => {
+		const stops = [onFonts(() => setFonts((n) => n + 1))];
+		const readFont = untrack(given) === void 0;
+		const readSpacing = untrack(spacing) === void 0;
+		if (element && (readFont || readSpacing)) {
+			const style = getComputedStyle(element);
+			if (readFont) setComputed(fontOf(element, style));
+			if (readSpacing) setSpaced(spacingOf(element, style));
+		}
+		if (element && untrack(() => props.width) === void 0) stops.push(observe(element, setObserved));
+		return () => {
+			for (const stop of stops) stop();
+		};
+	});
+	return {
+		ref: (e) => element = e,
+		width: () => props.width ?? observed(),
+		font: () => given() ?? computed(),
+		spacing: () => spacing() ?? spaced(),
+		fonts
+	};
+};
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+var createCut = (props) => cutOf(props, untrack(() => props.separateEllipsis));
+var cutOf = (props, apart) => {
+	const box = createBox(props);
+	const font = box.font;
+	const prepared = createMemo(() => {
+		box.fonts();
+		const f = font();
+		if (f === void 0) return void 0;
+		return prepare(props.text, f, {
+			...props.protect ? { protect: props.protect } : {},
+			letterSpacing: box.spacing()
+		});
+	});
+	const result = createMemo(() => {
+		const p = prepared();
+		const width = box.width();
+		const f = font();
+		if (p === void 0 || width === void 0 || f === void 0) return void 0;
+		const ellipsis = props.ellipsis ?? "…";
+		return apart && typeof ellipsis === "string" ? cut(p, width, {
+			...props,
+			ellipsis: widthOf(faceOf(f), ellipsis) + box.spacing() * ellipsis.length
+		}) : cut(p, width, props);
+	});
+	return {
+		ref: box.ref,
+		prepared,
+		cut: result
+	};
+};
+/** One line of text, cut to fit its box. */
+function Truncate(props) {
+	const full = untrack(() => props.render === "full");
+	const handle = cutOf(props, full);
+	const ellipsis = () => props.ellipsis ?? "…";
+	const parts = createMemo(() => {
+		const p = handle.prepared();
+		const c = handle.cut();
+		if (p === void 0 || c === void 0) return void 0;
+		const text = p.text;
+		return [
+			text.slice(0, head(c)),
+			text.slice(head(c), tail(c)),
+			text.slice(tail(c)),
+			truncated(c) ? text : void 0
+		];
+	});
+	var _el$ = _tmpl$();
+	var _ref$ = handle.ref;
+	typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+		return _ref$;
+	}, _el$) : handle.ref = _el$;
+	insert(_el$, full ? [
+		memo(() => {
+			return parts()?.[0] ?? props.text;
+		}),
+		(() => {
+			var _el$2 = _tmpl$2();
+			insert(_el$2, () => {
+				return parts()?.[1];
+			});
+			return _el$2;
+		})(),
+		createComponent(Show, {
+			get when() {
+				return parts()?.[3];
+			},
+			get children() {
+				var _el$3 = _tmpl$3();
+				insert(_el$3, ellipsis);
+				return _el$3;
+			}
+		}),
+		memo(() => {
+			return parts()?.[2];
+		})
+	] : memo(() => {
+		return (parts()?.[0] ?? props.text) + (parts()?.[3] ? ellipsis() + parts()[2] : "");
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class),
+			t: full ? void 0 : parts()?.[3]
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$, e, _p$?.e);
+		t !== _p$?.t && setAttribute(_el$, "title", t);
+	});
+	return _el$;
+}
+//#endregion
+export { createCut as i, Truncate as n, createBox as r, FontProvider as t };
+
+//# sourceMappingURL=solid-BWC32VMg.js.map

package/dist/solid-BWC32VMg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid-BWC32VMg.js","names":["<Fonts value={props}>{props.children}</Fonts>","value={props}","ref={handle.ref}","{parts()?.[0] ?? props.text}","<Show when={parts()?.[3]}>\n            <span\n              aria-hidden=\"true\"\n              style={{ \"user-select\": \"none\", \"-webkit-user-select\": \"none\" }}\n            >\n              {ellipsis()}\n            </span>\n          </Show>","<span\n              aria-hidden=\"true\"\n              style={{ \"user-select\": \"none\", \"-webkit-user-select\": \"none\" }}\n            >\n              {ellipsis()}\n            </span>","{parts()?.[2]}","{(parts()?.[0] ?? props.text) + (parts()?.[3] ? ellipsis() + parts()![2] : \"\")}","title={full ? undefined : parts()?.[3]}","<span\n      ref={handle.ref}\n      class={props.class}\n      style={{\n        display: \"block\",\n        overflow: \"hidden\",\n        \"white-space\": \"nowrap\",\n        \"text-overflow\": \"ellipsis\",\n      }}\n      title={full ? undefined : parts()?.[3]}\n    >\n      {full ? (\n        <>\n          {parts()?.[0] ?? props.text}\n          <span style={{ \"font-size\": \"0\" }}>{parts()?.[1]}</span>\n          <Show when={parts()?.[3]}>\n            <span\n              aria-hidden=\"true\"\n              style={{ \"user-select\": \"none\", \"-webkit-user-select\": \"none\" }}\n            >\n              {ellipsis()}\n            </span>\n          </Show>\n          {parts()?.[2]}\n        </>\n      ) : (\n        <>{(parts()?.[0] ?? props.text) + (parts()?.[3] ? ellipsis() + parts()![2] : \"\")}</>\n      )}\n    </span>","_$createComponent","_$ref","_$memo","_$readShallow","_$setAttribute"],"sources":["../src/solid.tsx"],"sourcesContent":["import type { JSX } from \"@solidjs/web\";\nimport {\n  type Accessor,\n  createContext,\n  createMemo,\n  createSignal,\n  onSettled,\n  Show,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport {\n  cut,\n  type Cut,\n  type CutOptions,\n  head,\n  prepare,\n  type Prepared,\n  type Protect,\n  tail,\n  truncated,\n} from \"./cut.ts\";\nimport { fontOf, observe, onFonts, spacingOf } from \"./dom.ts\";\nimport { faceOf, widthOf } from \"./face.ts\";\n\nexport interface CutProps extends CutOptions {\n  readonly text: string;\n  /** The room in px. Left out, it is observed from the element. */\n  readonly width?: number;\n  /** A CSS font shorthand. Left out, it is read from the element's computed style. */\n  readonly font?: string;\n  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */\n  readonly letterSpacing?: number;\n  readonly protect?: Protect;\n}\n\nexport interface CutHandle {\n  /** Give it the element whose width and font the cut follows. */\n  readonly ref: (element: Element) => void;\n  readonly prepared: Accessor<Prepared | undefined>;\n  /** Undefined until the width and font are known. */\n  readonly cut: Accessor<Cut | undefined>;\n}\n\nexport interface Box {\n  /** Give it the element whose width and font the text follows. */\n  readonly ref: (element: Element) => void;\n  /** The width given, or the element's content width; undefined until observed. */\n  readonly width: Accessor<number | undefined>;\n  /** The font given, or the element's; undefined until it mounts. */\n  readonly font: Accessor<string | undefined>;\n  /** The letter spacing given, or the element's, in px. */\n  readonly spacing: Accessor<number>;\n  /** Changes whenever web fonts load: read it where text is prepared. */\n  readonly fonts: Accessor<number>;\n}\n\nexport interface FontProviderProps {\n  /** A CSS font shorthand that every cut inside is in, unless it's given its own. */\n  readonly font?: string;\n  /** CSS `letter-spacing` in px for every cut inside, unless it's given its own. */\n  readonly letterSpacing?: number;\n  readonly children?: JSX.Element;\n}\n\nconst Fonts = createContext<FontProviderProps>({});\n\n/**\n * Gives every `Truncate`, `Clamp` and `createBox` inside the font and letter spacing\n * their text renders in, once for a list. Each would otherwise read its element's\n * computed style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow\n * what's given, so give what the rows really render in.\n */\nexport function FontProvider(props: FontProviderProps): JSX.Element {\n  return <Fonts value={props}>{props.children}</Fonts>;\n}\n\n/**\n * The width and font text is cut to: the ones given, then a `FontProvider`'s, or an\n * element's, observed. Whether to observe the width and read the font is decided once,\n * when it settles.\n */\nexport const createBox = (props: {\n  readonly width?: number;\n  readonly font?: string;\n  readonly letterSpacing?: number;\n}): Box => {\n  const provided = useContext(Fonts);\n  const given = () => props.font ?? provided.font;\n  const spacing = () => props.letterSpacing ?? provided.letterSpacing;\n  let element: Element | undefined;\n  const [observed, setObserved] = createSignal<number>();\n  const [computed, setComputed] = createSignal<string>();\n  const [spaced, setSpaced] = createSignal(0);\n  const [fonts, setFonts] = createSignal(0);\n  onSettled(() => {\n    const stops = [onFonts(() => setFonts((n) => n + 1))];\n    const readFont = untrack(given) === undefined;\n    const readSpacing = untrack(spacing) === undefined;\n    if (element && (readFont || readSpacing)) {\n      const style = getComputedStyle(element);\n      if (readFont) setComputed(fontOf(element, style));\n      if (readSpacing) setSpaced(spacingOf(element, style));\n    }\n    if (element && untrack(() => props.width) === undefined) {\n      stops.push(observe(element, setObserved));\n    }\n    return () => {\n      for (const stop of stops) stop();\n    };\n  });\n  return {\n    ref: (e) => (element = e),\n    width: () => props.width ?? observed(),\n    font: () => given() ?? computed(),\n    spacing: () => spacing() ?? spaced(),\n    fonts,\n  };\n};\n\nexport interface CreateCutProps extends CutProps {\n  /**\n   * The ellipsis is painted in an element of its own, so it is measured as a run of its\n   * own and no kerning across it counts. Read once.\n   */\n  readonly separateEllipsis?: boolean;\n}\n\n/** The cut of `props.text` for an element's width and font, or for the ones given. */\nexport const createCut = (props: CreateCutProps): CutHandle =>\n  cutOf(\n    props,\n    untrack(() => props.separateEllipsis),\n  );\n\nconst cutOf = (props: CutProps, apart: boolean | undefined): CutHandle => {\n  const box = createBox(props);\n  const font = box.font;\n  const prepared = createMemo(() => {\n    box.fonts();\n    const f = font();\n    if (f === undefined) return undefined;\n    return prepare(props.text, f, {\n      ...(props.protect ? { protect: props.protect } : {}),\n      letterSpacing: box.spacing(),\n    });\n  });\n  const result = createMemo(() => {\n    const p = prepared();\n    const width = box.width();\n    const f = font();\n    if (p === undefined || width === undefined || f === undefined) return undefined;\n    const ellipsis = props.ellipsis ?? \"…\";\n    return apart && typeof ellipsis === \"string\"\n      ? cut(p, width, {\n          ...props,\n          ellipsis: widthOf(faceOf(f), ellipsis) + box.spacing() * ellipsis.length,\n        })\n      : cut(p, width, props);\n  });\n  return { ref: box.ref, prepared, cut: result };\n};\n\nexport interface TruncateProps extends CutProps {\n  readonly ellipsis?: string;\n  /**\n   * \"kept\" (default) paints the kept text, with the whole text in `title` once cut.\n   * \"full\" paints all of it with the cut part collapsed to no width, so copy,\n   * find-in-page and screen readers get the whole text. Read once.\n   */\n  readonly render?: \"kept\" | \"full\";\n  readonly class?: string;\n}\n\n/** One line of text, cut to fit its box. */\nexport function Truncate(props: TruncateProps): JSX.Element {\n  const full = untrack(() => props.render === \"full\");\n  const handle = cutOf(props, full);\n  const ellipsis = () => props.ellipsis ?? \"…\";\n  // Head, cut part, tail and, once cut, the whole text. Undefined until the first cut.\n  const parts = createMemo(() => {\n    const p = handle.prepared();\n    const c = handle.cut();\n    if (p === undefined || c === undefined) return undefined;\n    const text = p.text;\n    return [\n      text.slice(0, head(c)),\n      text.slice(head(c), tail(c)),\n      text.slice(tail(c)),\n      truncated(c) ? text : undefined,\n    ] as const;\n  });\n  // Until the first cut, the browser's own end ellipsis stands in.\n  return (\n    <span\n      ref={handle.ref}\n      class={props.class}\n      style={{\n        display: \"block\",\n        overflow: \"hidden\",\n        \"white-space\": \"nowrap\",\n        \"text-overflow\": \"ellipsis\",\n      }}\n      title={full ? undefined : parts()?.[3]}\n    >\n      {full ? (\n        <>\n          {parts()?.[0] ?? props.text}\n          <span style={{ \"font-size\": \"0\" }}>{parts()?.[1]}</span>\n          <Show when={parts()?.[3]}>\n            <span\n              aria-hidden=\"true\"\n              style={{ \"user-select\": \"none\", \"-webkit-user-select\": \"none\" }}\n            >\n              {ellipsis()}\n            </span>\n          </Show>\n          {parts()?.[2]}\n        </>\n      ) : (\n        <>{(parts()?.[0] ?? props.text) + (parts()?.[3] ? ellipsis() + parts()![2] : \"\")}</>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;AAiEA,IAAM,QAAQ,cAAiC,CAAC,CAAC;;;;;;;AAQjD,SAAgB,aAAa,OAAuC;CAClE,OAAOA,gBAAAA,OAAAA;EAAOC,OAAO;EAAd,IAAA,WAAA;GAAsB,OAAA,MAAM;EAAgB;;AACrD;;;;;;AAOA,IAAa,aAAa,UAIf;CACT,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,cAAc,MAAM,QAAQ,SAAS;CAC3C,MAAM,gBAAgB,MAAM,iBAAiB,SAAS;CACtD,IAAI;CACJ,MAAM,CAAC,UAAU,eAAe,aAAqB;CACrD,MAAM,CAAC,UAAU,eAAe,aAAqB;CACrD,MAAM,CAAC,QAAQ,aAAa,aAAa,CAAC;CAC1C,MAAM,CAAC,OAAO,YAAY,aAAa,CAAC;CACxC,gBAAgB;EACd,MAAM,QAAQ,CAAC,cAAc,UAAU,MAAM,IAAI,CAAC,CAAC,CAAC;EACpD,MAAM,WAAW,QAAQ,KAAK,MAAM,KAAA;EACpC,MAAM,cAAc,QAAQ,OAAO,MAAM,KAAA;EACzC,IAAI,YAAY,YAAY,cAAc;GACxC,MAAM,QAAQ,iBAAiB,OAAO;GACtC,IAAI,UAAU,YAAY,OAAO,SAAS,KAAK,CAAC;GAChD,IAAI,aAAa,UAAU,UAAU,SAAS,KAAK,CAAC;EACtD;EACA,IAAI,WAAW,cAAc,MAAM,KAAK,MAAM,KAAA,GAC5C,MAAM,KAAK,QAAQ,SAAS,WAAW,CAAC;EAE1C,aAAa;GACX,KAAK,MAAM,QAAQ,OAAO,KAAK;EACjC;CACF,CAAC;CACD,OAAO;EACL,MAAM,MAAO,UAAU;EACvB,aAAa,MAAM,SAAS,SAAS;EACrC,YAAY,MAAM,KAAK,SAAS;EAChC,eAAe,QAAQ,KAAK,OAAO;EACnC;CACF;AACF;;AAWA,IAAa,aAAa,UACxB,MACE,OACA,cAAc,MAAM,gBAAgB,CACtC;AAEF,IAAM,SAAS,OAAiB,UAA0C;CACxE,MAAM,MAAM,UAAU,KAAK;CAC3B,MAAM,OAAO,IAAI;CACjB,MAAM,WAAW,iBAAiB;EAChC,IAAI,MAAM;EACV,MAAM,IAAI,KAAK;EACf,IAAI,MAAM,KAAA,GAAW,OAAO,KAAA;EAC5B,OAAO,QAAQ,MAAM,MAAM,GAAG;GAC5B,GAAI,MAAM,UAAU,EAAE,SAAS,MAAM,QAAQ,IAAI,CAAC;GAClD,eAAe,IAAI,QAAQ;EAC7B,CAAC;CACH,CAAC;CACD,MAAM,SAAS,iBAAiB;EAC9B,MAAM,IAAI,SAAS;EACnB,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,IAAI,KAAK;EACf,IAAI,MAAM,KAAA,KAAa,UAAU,KAAA,KAAa,MAAM,KAAA,GAAW,OAAO,KAAA;EACtE,MAAM,WAAW,MAAM,YAAY;EACnC,OAAO,SAAS,OAAO,aAAa,WAChC,IAAI,GAAG,OAAO;GACZ,GAAG;GACH,UAAU,QAAQ,OAAO,CAAC,GAAG,QAAQ,IAAI,IAAI,QAAQ,IAAI,SAAS;EACpE,CAAC,IACD,IAAI,GAAG,OAAO,KAAK;CACzB,CAAC;CACD,OAAO;EAAE,KAAK,IAAI;EAAK;EAAU,KAAK;CAAO;AAC/C;;AAcA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,OAAO,cAAc,MAAM,WAAW,MAAM;CAClD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,iBAAiB,MAAM,YAAY;CAEzC,MAAM,QAAQ,iBAAiB;EAC7B,MAAM,IAAI,OAAO,SAAS;EAC1B,MAAM,IAAI,OAAO,IAAI;EACrB,IAAI,MAAM,KAAA,KAAa,MAAM,KAAA,GAAW,OAAO,KAAA;EAC/C,MAAM,OAAO,EAAE;EACf,OAAO;GACL,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC;GACrB,KAAK,MAAM,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;GAC3B,KAAK,MAAM,KAAK,CAAC,CAAC;GAClB,UAAU,CAAC,IAAI,OAAO,KAAA;EACxB;CACF,CAAC;CAGC,IAAA,OAAA,OA4BM;CA3BJ,IAAA,QAAK,OAAO;CAAZ,OAAA,UAAA,cAAA,MAAA,QAAA,KAAe,IAAfC,UAAAA;;CAAe,GAAfA,IAAe,IAAf,OAAY,MAAZA;CADF,OAAA,MAWG,OACG;EACAC,WAAAA;GAAC,OAAA,MAAM,CAAC,GAAG,MAAM,MAAM;EAAI,CAAA;SAC3B;GAAuD,IAAA,QAAA,QAAA;GAAvD,OAAA,aAAmC;IAAC,OAAA,MAAM,CAAC,GAAG;GAAE,CAAO;GAAvD,OAAA;EAAuD,EAAA,CAAA;EACvDC,gBAAAA,MAAAA;GAAM,IAAA,OAAA;IAAM,OAAA,MAAM,CAAC,GAAG;GAAE;GAAxB,IAAA,WAAA;IACE,IAAA,QAAA,QAKM;IALN,OAAA,OAIG,QACG;IANR,OACEC;GAMI;;EACNC,WAAAA;GAAC,OAAA,MAAM,CAAC,GAAG;EAAE,CAAA;CAVd,IAaCC,WAAAA;EAAE,QAAA,MAAM,CAAC,GAAG,MAAM,MAAM,SAAS,MAAM,CAAC,GAAG,KAAK,SAAS,IAAI,MAAM,CAAC,CAAE,KAAK;CAAG,CAAA,CAE9E;CA1BJ,aAAA;;GAAO,GAAAM,YAAA,MAAM,KAAK;GAOlBL,GAAO,OAAO,KAAA,IAAY,MAAM,CAAC,GAAG;EAPlB;CAAlB,IAAA,EAAA,GAAA,KAAA,QAAA;EAAkB,UAAA,MAAA,GAAA,KAAA,CAAA;EAOlB,MAAA,KAAA,KAAAM,aAAA,MAAA,SAAA,CAAsC;CAPpB,CAAA;CAHtB,OACEL;AA8BJ"}