pretrunc 0.0.0-stage → 0.1.0

package/dist/solid-lines.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from "@solidjs/web";
+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?: JSX.Element;
+    /** 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 class?: string;
+}
+/** A paragraph cut to a number of lines at its end, start or middle. */
+export declare function Clamp(props: ClampProps): JSX.Element;

package/dist/solid-lines.js

@@ -0,0 +1,90 @@
+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 { r as createBox } from "./solid-BWC32VMg.js";
+import { className, createComponent, effect, insert, memo, readShallow, ref, setStyleProperty, template } from "@solidjs/web";
+import { Show, createMemo, createSignal, onSettled } from "solid-js";
+//#region src/solid-lines.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span style=display:inline-block>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div style=overflow-wrap:break-word><!><!>`);
+/** A paragraph cut to a number of lines at its end, start or middle. */
+function Clamp(props) {
+	const box = createBox(props);
+	const [afterWidth, setAfterWidth] = createSignal(0);
+	let stop;
+	const watch = (element) => {
+		stop?.();
+		stop = observe(element, setAfterWidth);
+	};
+	onSettled(() => () => stop?.());
+	const prepared = createMemo(() => {
+		box.fonts();
+		const font = box.font();
+		if (font === void 0) return void 0;
+		return prepareLines(props.text, font, {
+			...props.protect ? { protect: props.protect } : {},
+			...props.whiteSpace ? { whiteSpace: props.whiteSpace } : {},
+			...props.wordBreak ? { wordBreak: props.wordBreak } : {},
+			letterSpacing: box.spacing()
+		});
+	});
+	const cut = createMemo(() => {
+		const p = prepared();
+		const width = box.width();
+		const font = box.font();
+		if (p === void 0 || width === void 0 || font === void 0) return void 0;
+		return clamp(p, width, {
+			...props,
+			after: props.after === void 0 ? 0 : afterWidth()
+		});
+	});
+	const cutNow = () => {
+		const c = cut();
+		return c !== void 0 && truncated(c);
+	};
+	const text = () => {
+		const p = prepared();
+		const c = cut();
+		if (props.expanded || p === void 0 || c === void 0 || !truncated(c)) return props.text;
+		return p.text.slice(0, head(c)) + (props.ellipsis ?? "…") + p.text.slice(tail(c));
+	};
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	var _el$4 = _el$2.nextSibling;
+	var _ref$ = box.ref;
+	typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+		return _ref$;
+	}, _el$) : box.ref = _el$;
+	insert(_el$, text, _el$2);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return props.after !== void 0;
+			})() && (props.expanded || cutNow());
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			ref(() => {
+				return watch;
+			}, _el$3);
+			insert(_el$3, () => {
+				return props.after;
+			});
+			return _el$3;
+		}
+	}), _el$4);
+	effect(() => {
+		return {
+			e: readShallow(props.class),
+			t: props.whiteSpace ?? "normal"
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$, e, _p$?.e);
+		t !== _p$?.t && setStyleProperty(_el$, "white-space", t);
+	});
+	return _el$;
+}
+//#endregion
+export { Clamp };
+
+//# sourceMappingURL=solid-lines.js.map

package/dist/solid-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid-lines.js","names":["ref={box.ref}","<div\n      ref={box.ref}\n      class={props.class}\n      style={{ \"overflow-wrap\": \"break-word\", \"white-space\": props.whiteSpace ?? \"normal\" }}\n    >\n      {text()}\n      <Show when={props.after !== undefined && (props.expanded || cutNow())}>\n        <span ref={watch} style={{ display: \"inline-block\" }}>\n          {props.after}\n        </span>\n      </Show>\n    </div>","<Show when={props.after !== undefined && (props.expanded || cutNow())}>\n        <span ref={watch} style={{ display: \"inline-block\" }}>\n          {props.after}\n        </span>\n      </Show>","props.after !== undefined && (props.expanded || cutNow())","ref={watch}","<span ref={watch} style={{ display: \"inline-block\" }}>\n          {props.after}\n        </span>","\"white-space\": props.whiteSpace ?? \"normal\"","_$ref","_$createComponent","_$memo","_$readShallow","_$setStyleProperty"],"sources":["../src/solid-lines.tsx"],"sourcesContent":["import type { JSX } from \"@solidjs/web\";\nimport { createMemo, createSignal, onSettled, Show } from \"solid-js\";\nimport { type CutOptions, head, type Protect, tail, truncated } from \"./cut.ts\";\nimport { observe } from \"./dom.ts\";\nimport { clamp, prepareLines } from \"./lines.ts\";\nimport { createBox } from \"./solid.tsx\";\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?: JSX.Element;\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 class?: string;\n}\n\n/** A paragraph cut to a number of lines at its end, start or middle. */\nexport function Clamp(props: ClampProps): JSX.Element {\n  const box = createBox(props);\n  const [afterWidth, setAfterWidth] = createSignal(0);\n  // `after` mounts only once the text is cut, so it is observed from its own ref.\n  let stop: (() => void) | undefined;\n  const watch = (element: Element) => {\n    stop?.();\n    stop = observe(element, setAfterWidth);\n  };\n  onSettled(() => () => stop?.());\n  const prepared = createMemo(() => {\n    box.fonts();\n    const font = box.font();\n    if (font === undefined) return undefined;\n    return prepareLines(props.text, font, {\n      ...(props.protect ? { protect: props.protect } : {}),\n      ...(props.whiteSpace ? { whiteSpace: props.whiteSpace } : {}),\n      ...(props.wordBreak ? { wordBreak: props.wordBreak } : {}),\n      letterSpacing: box.spacing(),\n    });\n  });\n  const cut = createMemo(() => {\n    const p = prepared();\n    const width = box.width();\n    const font = box.font();\n    if (p === undefined || width === undefined || font === undefined) return undefined;\n    // `after` is an element here and a width to `clamp`, so it's always given as one.\n    return clamp(p, width, {\n      ...props,\n      after: props.after === undefined ? 0 : afterWidth(),\n    });\n  });\n  const cutNow = () => {\n    const c = cut();\n    return c !== undefined && truncated(c);\n  };\n  const text = () => {\n    const p = prepared();\n    const c = cut();\n    if (props.expanded || p === undefined || c === undefined || !truncated(c)) return props.text;\n    return p.text.slice(0, head(c)) + (props.ellipsis ?? \"…\") + p.text.slice(tail(c));\n  };\n  return (\n    <div\n      ref={box.ref}\n      class={props.class}\n      style={{ \"overflow-wrap\": \"break-word\", \"white-space\": props.whiteSpace ?? \"normal\" }}\n    >\n      {text()}\n      <Show when={props.after !== undefined && (props.expanded || cutNow())}>\n        <span ref={watch} style={{ display: \"inline-block\" }}>\n          {props.after}\n        </span>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgCA,SAAgB,MAAM,OAAgC;CACpD,MAAM,MAAM,UAAU,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,aAAa,CAAC;CAElD,IAAI;CACJ,MAAM,SAAS,YAAqB;EAClC,OAAO;EACP,OAAO,QAAQ,SAAS,aAAa;CACvC;CACA,sBAAsB,OAAO,CAAC;CAC9B,MAAM,WAAW,iBAAiB;EAChC,IAAI,MAAM;EACV,MAAM,OAAO,IAAI,KAAK;EACtB,IAAI,SAAS,KAAA,GAAW,OAAO,KAAA;EAC/B,OAAO,aAAa,MAAM,MAAM,MAAM;GACpC,GAAI,MAAM,UAAU,EAAE,SAAS,MAAM,QAAQ,IAAI,CAAC;GAClD,GAAI,MAAM,aAAa,EAAE,YAAY,MAAM,WAAW,IAAI,CAAC;GAC3D,GAAI,MAAM,YAAY,EAAE,WAAW,MAAM,UAAU,IAAI,CAAC;GACxD,eAAe,IAAI,QAAQ;EAC7B,CAAC;CACH,CAAC;CACD,MAAM,MAAM,iBAAiB;EAC3B,MAAM,IAAI,SAAS;EACnB,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,OAAO,IAAI,KAAK;EACtB,IAAI,MAAM,KAAA,KAAa,UAAU,KAAA,KAAa,SAAS,KAAA,GAAW,OAAO,KAAA;EAEzE,OAAO,MAAM,GAAG,OAAO;GACrB,GAAG;GACH,OAAO,MAAM,UAAU,KAAA,IAAY,IAAI,WAAW;EACpD,CAAC;CACH,CAAC;CACD,MAAM,eAAe;EACnB,MAAM,IAAI,IAAI;EACd,OAAO,MAAM,KAAA,KAAa,UAAU,CAAC;CACvC;CACA,MAAM,aAAa;EACjB,MAAM,IAAI,SAAS;EACnB,MAAM,IAAI,IAAI;EACd,IAAI,MAAM,YAAY,MAAM,KAAA,KAAa,MAAM,KAAA,KAAa,CAAC,UAAU,CAAC,GAAG,OAAO,MAAM;EACxF,OAAO,EAAE,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,KAAK,MAAM,YAAY,OAAO,EAAE,KAAK,MAAM,KAAK,CAAC,CAAC;CAClF;CAEE,IAAA,OAAA,QAWK;CAXL,IAAA,QAAA,KAAA;;CACE,IAAA,QAAK,IAAI;CAAT,OAAA,UAAA,cAAA,MAAA,QAAA,KAAY,IAAZA,UAAAA;;CAAY,GAAZA,IAAY,IAAZ,IAAS,MAATA;CADF,OAAA,MAKG,MALHC,KAWK;CAXL,OAAA,MAMEC,gBAAAA,MAAAA;EAAM,IAAA,OAAA;GAAMC,OAAAA,WAAAA;IAAM,OAAA,MAAA,UAAU,KAAA;GAAwC,CAAA,CAAC,CAAD,MAA1B,MAAM,YAAY,OAAO;EAAE;EAArE,IAAA,WAAA;GACE,IAAA,QAAA,OAEM;GAFA,UAAA;IAAK,OAAA;GAAK,GAAVC,KAAU;GAAhB,OAAA,aACE;IAAC,OAAA,MAAM;GAAK,CACR;GAHR,OACEC;EAGI;CAVRJ,CAAAA,GAAAA,KAWK;CATH,aAAA;;GAAO,GAAAS,YAAA,MAAM,KAAK;GACsBJ,GAAe,MAAM,cAAc;EADzD;CAAlB,IAAA,EAAA,GAAA,KAAA,QAAA;EAAkB,UAAA,MAAA,GAAA,KAAA,CAAA;EACsB,MAAA,KAAA,KAAAK,iBAAA,MAAA,eAAA,CAA0C;CADhE,CAAA;CAHtB,OACEV;AAaJ"}

package/dist/solid.d.ts

@@ -0,0 +1,77 @@
+import type { JSX } from "@solidjs/web";
+import { type Accessor } from "solid-js";
+import { type Cut, type CutOptions, type Prepared, type Protect } from "./cut.js";
+export interface CutProps extends CutOptions {
+    readonly text: string;
+    /** 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;
+}
+export interface CutHandle {
+    /** Give it the element whose width and font the cut follows. */
+    readonly ref: (element: Element) => void;
+    readonly prepared: Accessor<Prepared | undefined>;
+    /** Undefined until the width and font are known. */
+    readonly cut: Accessor<Cut | undefined>;
+}
+export interface Box {
+    /** Give it the element whose width and font the text follows. */
+    readonly ref: (element: Element) => void;
+    /** The width given, or the element's content width; undefined until observed. */
+    readonly width: Accessor<number | undefined>;
+    /** The font given, or the element's; undefined until it mounts. */
+    readonly font: Accessor<string | undefined>;
+    /** The letter spacing given, or the element's, in px. */
+    readonly spacing: Accessor<number>;
+    /** Changes whenever web fonts load: read it where text is prepared. */
+    readonly fonts: Accessor<number>;
+}
+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?: JSX.Element;
+}
+/**
+ * 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.
+ */
+export declare function FontProvider(props: FontProviderProps): JSX.Element;
+/**
+ * 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.
+ */
+export declare const createBox: (props: {
+    readonly width?: number;
+    readonly font?: string;
+    readonly letterSpacing?: number;
+}) => Box;
+export interface CreateCutProps 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. Read once.
+     */
+    readonly separateEllipsis?: boolean;
+}
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+export declare const createCut: (props: CreateCutProps) => 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. Read once.
+     */
+    readonly render?: "kept" | "full";
+    readonly class?: string;
+}
+/** One line of text, cut to fit its box. */
+export declare function Truncate(props: TruncateProps): JSX.Element;

package/dist/solid.js

@@ -0,0 +1 @@
+export { t as FontProvider, n as Truncate, r as createBox, i as createCut } from "./solid-BWC32VMg.js";

package/package.json

@@ -1,6 +1,148 @@
 {
   "name": "pretrunc",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Cut text at its start, middle or end to fit a width, measured before it paints, never overflowing",
+  "keywords": [
+    "canvas",
+    "clamp",
+    "ellipsis",
+    "middle-ellipsis",
+    "pretext",
+    "react",
+    "solid",
+    "text",
+    "truncate"
+  ],
+  "homepage": "https://lewisalderman.github.io/pretrunc/",
+  "bugs": "https://github.com/LewisAlderman/pretrunc/issues",
+  "license": "MIT",
+  "author": "Lewis Alderman",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LewisAlderman/pretrunc.git"
+  },
+  "bin": {
+    "pretrunc-metrics": "./dist/metrics-cli.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "DESIGN.md",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "solid": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./dom": {
+      "solid": "./src/dom.ts",
+      "types": "./dist/dom.d.ts",
+      "default": "./dist/dom.js"
+    },
+    "./lines": {
+      "solid": "./src/lines.ts",
+      "types": "./dist/lines.d.ts",
+      "default": "./dist/lines.js"
+    },
+    "./metrics": {
+      "solid": "./src/metrics.ts",
+      "types": "./dist/metrics.d.ts",
+      "default": "./dist/metrics.js"
+    },
+    "./solid": {
+      "solid": "./src/solid.tsx",
+      "types": "./dist/solid.d.ts",
+      "default": "./dist/solid.js"
+    },
+    "./solid/lines": {
+      "solid": "./src/solid-lines.tsx",
+      "types": "./dist/solid-lines.d.ts",
+      "default": "./dist/solid-lines.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./react/lines": {
+      "types": "./dist/react-lines.d.ts",
+      "default": "./dist/react-lines.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@changesets/cli": "3.0.3",
+    "@chenglou/pretext": "1.0.0",
+    "@effect/tsgo": "0.53.1",
+    "@effect/vitest": "4.0.5",
+    "@fontsource-variable/inter": "5.3.0",
+    "@shikijs/twoslash": "4.5.0",
+    "@solidjs/testing-library": "1.0.0-beta.3",
+    "@solidjs/vite-plugin": "3.0.0-next.50",
+    "@solidjs/web": "2.0.0-rc.15",
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/react": "16.3.3",
+    "@types/fontkit": "2.0.9",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/browser-playwright": "5.0.4",
+    "effect": "4.0.5",
+    "eslint-plugin-solid": "0.18.1",
+    "fontkit": "2.0.4",
+    "knip": "6.39.0",
+    "playwright": "1.64.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "shiki": "4.5.0",
+    "solid-js": "2.0.0-rc.15",
+    "twoslash": "0.3.9",
+    "typescript": "7.0.2",
+    "typescript-twoslash": "npm:typescript@5.9.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.2.0",
+    "vite-plus": "1.2.0"
+  },
+  "peerDependencies": {
+    "@chenglou/pretext": "^1.0.0",
+    "@solidjs/web": "^2.0.0-rc.15",
+    "fontkit": "^2.0.4",
+    "react": "^19.0.0",
+    "solid-js": "^2.0.0-rc.15"
+  },
+  "peerDependenciesMeta": {
+    "@chenglou/pretext": {
+      "optional": true
+    },
+    "fontkit": {
+      "optional": true
+    },
+    "@solidjs/web": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "12.11.2",
+      "onFail": "download"
+    },
+    "runtime": {
+      "name": "node",
+      "version": "26.12.0",
+      "onFail": "download"
+    }
+  },
+  "scripts": {
+    "setup": "vp config && effect-tsgo patch --oxlint"
+  }
 }