@liiift-studio/steadygray 0.0.1 → 1.0.0

package/README.md

@@ -1,7 +1,11 @@
 # Steady Gray
 
+Compositors call it colour — the aggregate grey of a text block. When some lines are denser than others, the paragraph looks uneven. Steady Gray measures ink pixel density per line by rendering to an off-screen Canvas, then adjusts letter-spacing until every line matches the target. Even colour, line by line.
+
 **[steadygray.com](https://steadygray.com)** · [npm](https://www.npmjs.com/package/@liiift-studio/steadygray) · [GitHub](https://github.com/Liiift-Studio/SteadyGray)
 
+TypeScript · Canvas pixel sampling · React + Vanilla JS
+
 ---
 
 ## Install
@@ -10,7 +14,92 @@
 npm install @liiift-studio/steadygray
 ```
 
-See [steadygray.com](https://steadygray.com) for full API docs and a live demo.
+---
+
+## Usage
+
+> **Next.js App Router:** this library uses browser APIs. Add `"use client"` to any component file that imports from it.
+
+### React component
+
+```tsx
+import { GrayValueText } from '@liiift-studio/steadygray'
+
+<GrayValueText maxAdjustment={0.05} calibrationFactor={2} linePreservation="scale">
+  Your paragraph text here...
+</GrayValueText>
+```
+
+`linePreservation="scale"` prevents line overflow by applying a `scaleX` transform after the spacing correction. Omit it if slight overflow is acceptable (e.g. when the element already has `overflow-x: hidden`).
+
+### React hook
+
+```tsx
+import { useGrayValue } from '@liiift-studio/steadygray'
+
+// Inside a React component:
+const ref = useGrayValue({ maxAdjustment: 0.05, calibrationFactor: 2 })
+return <p ref={ref}>{children}</p>
+```
+
+The hook re-runs automatically on resize via `ResizeObserver` and after fonts load via `document.fonts.ready`.
+
+### Vanilla JS
+
+```ts
+import { applyGrayValue, removeGrayValue, getCleanHTML } from '@liiift-studio/steadygray'
+
+const el = document.querySelector('p')
+const original = getCleanHTML(el)
+const opts = { maxAdjustment: 0.05, calibrationFactor: 2 }
+
+function run() {
+  applyGrayValue(el, original, opts)
+}
+
+run()
+document.fonts.ready.then(run)
+
+const ro = new ResizeObserver(() => run())
+ro.observe(el)
+
+// Later — disconnect and restore original markup:
+// ro.disconnect()
+// removeGrayValue(el, original)
+```
+
+### TypeScript
+
+```ts
+import type { GrayValueOptions } from '@liiift-studio/steadygray'
+
+const opts: GrayValueOptions = { targetDensity: 0.35, maxAdjustment: 0.05, linePreservation: 'scale' }
+```
+
+---
+
+## Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `targetDensity` | `'auto'` | Target optical density ratio (0–1). `'auto'` uses the average of all measured lines |
+| `method` | `'letter-spacing'` | CSS spacing property to adjust per line: `'letter-spacing'` or `'word-spacing'` |
+| `maxAdjustment` | `0.05` | Maximum spacing correction in em units. Positive and negative adjustments are both clamped to this value |
+| `tolerance` | `0.01` | Minimum density difference before a correction is applied. Lines within this threshold of the target are left untouched |
+| `calibrationFactor` | `2` | Correction strength — em spacing change per 1.0 density unit difference. Increase for more aggressive corrections |
+| `lineDetection` | `'bcr'` | `'bcr'` reads actual browser layout — ground truth, works with any font and inline HTML. `'canvas'` uses `@chenglou/pretext` for arithmetic line breaking with no forced reflow on resize (`npm install @chenglou/pretext`). Falls back to `'bcr'` while pretext loads |
+| `linePreservation` | `'none'` | `'none'` — line widths vary with the spacing correction (bounded by `maxAdjustment`). `'scale'` — applies a `scaleX` transform after correction so every line occupies exactly its original width; the density difference remains visible in glyph spacing but no line ever overflows the container |
+| `as` | `'p'` | HTML element to render. *(React component only)* |
+
+---
+
+## How it works
+
+Each detected line of text is rendered to an off-screen Canvas at the correct font size, weight, and family. The raw pixel data (`getImageData`) is read and ink pixels are counted — any pixel with alpha above a threshold is considered ink. The ratio of ink pixels to total pixels is the line's optical density. The average across all lines becomes the target (or you can set `targetDensity` manually). Each line then receives a `letter-spacing` (or `word-spacing`) correction proportional to its deviation from the target, clamped to `maxAdjustment`. The correction re-runs on resize and after fonts finish loading (`document.fonts.ready`).
+
+**Line break safety:** Line breaks are always derived from the browser's natural layout — each run starts from the original HTML snapshot, detects lines at zero spacing, then locks them with `white-space: nowrap`. Word breaks never change as a result of the density correction.
+
+**Width overflow:** The spacing correction intentionally changes each line's visual width. The maximum change is `maxAdjustment × characterCount`. At the default `maxAdjustment: 0.05em` and 60 characters per line at 16px, peak overflow is approximately 48px. Use `linePreservation: 'scale'` to prevent overflow entirely, or add `overflow-x: hidden` to the element's CSS if a small amount of clipping is acceptable.
 
 ---
 
@@ -21,3 +110,17 @@ See [steadygray.com](https://steadygray.com) for full API docs and a live demo.
 `package.json` at the repo root lists `next` as a devDependency. This is a **Vercel detection workaround** — not a real dependency of the npm package. Vercel's build system inspects the root `package.json` to detect the framework; without `next` present it falls back to a static build and skips the Next.js pipeline, breaking the `/site` subdirectory deploy.
 
 The package itself has zero runtime dependencies. Do not remove this entry.
+
+---
+
+## Future improvements
+
+- **Variable axis equalization** — use `wght` or `wdth` instead of letter-spacing as the equalization mechanism, for fonts where spacing is less flexible than weight
+- **Dark mode awareness** — invert the pixel-counting logic when rendering on a dark background, so the density measurement is consistent regardless of color scheme
+- **Configurable canvas DPR** — allow overriding the device pixel ratio used for the measurement canvas, to trade accuracy for performance on high-density displays
+- **Iterative convergence** — apply corrections in multiple passes until all lines converge within `tolerance`, rather than a single-pass linear estimate
+- **Per-paragraph target** — `measureLineDensity` is exported as a low-level canvas primitive; a high-level `measureDensity(el)` wrapper that takes just an element would allow cross-paragraph normalization without manually building font strings and canvas contexts
+
+---
+
+Current version: v1.0.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),W=require("react/jsx-runtime"),L={word:"gv-word",line:"gv-line"},C={targetDensity:"auto",method:"letter-spacing",maxAdjustment:.05,calibrationFactor:2};function z(o){const r=getComputedStyle(o),s=r.fontWeight,a=r.fontSize,t=r.fontFamily.split(",")[0].replace(/['"]/g,"").trim();return`${s} ${a} ${t}`}function v(o,r,s,a,t){const i=t.getContext("2d");if(!i)return 0;t.width=Math.max(1,Math.ceil(s)),t.height=Math.max(1,Math.ceil(a)),i.clearRect(0,0,t.width,t.height),i.fillStyle="white",i.fillRect(0,0,t.width,t.height),i.fillStyle="black",i.font=r,i.fillText(o,0,t.height*.75);const c=i.getImageData(0,0,t.width,t.height).data;let p=0;const f=t.width*t.height;for(let u=0;u<c.length;u+=4){const A=c[u],b=c[u+1],y=c[u+2];(A<200||b<200||y<200)&&p++}return f>0?p/f:0}function G(o){const r=o.cloneNode(!0);return r.querySelectorAll(`.${L.word}, .${L.line}`).forEach(a=>{const t=a.parentNode;if(t){for(;a.firstChild;)t.insertBefore(a.firstChild,a);t.removeChild(a)}}),r.querySelectorAll("br[data-gv-break]").forEach(a=>a.remove()),r.innerHTML}function V(o,r,s={},a){if(typeof window>"u")return;const t=window.scrollY,i=s.targetDensity??C.targetDensity,d=s.method??C.method,c=s.maxAdjustment??C.maxAdjustment,p=s.calibrationFactor??C.calibrationFactor;if(o.innerHTML=r,!o.offsetWidth){requestAnimationFrame(()=>{Math.abs(window.scrollY-t)>2&&window.scrollTo({top:t,behavior:"instant"})});return}const f=o.offsetWidth,u=parseFloat(getComputedStyle(o).fontSize)||16,A=z(o),b=[];(function n(e){e.nodeType===Node.TEXT_NODE?b.push(e):e.childNodes.forEach(n)})(o);const y=[];for(const n of b){const e=n.textContent??"";if(!e.trim())continue;const l=e.split(/(\S+)/),D=document.createDocumentFragment();for(let h=0;h<l.length;h+=2){const N=l[h],S=l[h+1];if(!S)continue;const M=l[h+3]===void 0?l[h+2]??"":"",x=document.createElement("span");x.className=L.word,x.style.cssText="display:inline-block;white-space:nowrap;",x.appendChild(document.createTextNode(N+S+M)),D.appendChild(x),y.push(x)}n.parentNode.replaceChild(D,n)}if(y.length===0){requestAnimationFrame(()=>{Math.abs(window.scrollY-t)>2&&window.scrollTo({top:t,behavior:"instant"})});return}const m=[];let F=null,g=null;for(const n of y){const e=n.getBoundingClientRect(),l=Math.round(e.top);F===null||l!==F?(F=l,g={text:"",width:e.width,height:e.height||u,spans:[n]},m.push(g)):(g.width+=e.width,e.height>g.height&&(g.height=e.height),g.spans.push(n))}for(const n of m)n.text=n.spans.map(e=>e.textContent??"").join("").trim();if(m.length===0){requestAnimationFrame(()=>{Math.abs(window.scrollY-t)>2&&window.scrollTo({top:t,behavior:"instant"})});return}const k=a??document.createElement("canvas"),T=m.map(n=>v(n.text,A,f,n.height||u,k));let E;if(typeof i=="number")E=i;else{const n=T.reduce((e,l)=>e+l,0);E=T.length>0?n/T.length:0}const Y=T.map(n=>{const e=(E-n)*p;return Math.max(-c,Math.min(c,e))});o.innerHTML=r;const H="display:inline-block;white-space:nowrap;vertical-align:top;";let R="";m.forEach((n,e)=>{const l=Y[e],h=`${H}${d==="word-spacing"?"word-spacing":"letter-spacing"}:${l}em;`,N=n.spans.map((S,j)=>{const M=S.textContent??"";return j===0?M.replace(/^[^\S\u00a0]+/,""):M}).join("");R+=`<span class="${L.line}" style="${h}">${N}</span>`,e<m.length-1&&(R+='<br data-gv-break="1">')}),o.innerHTML=R,requestAnimationFrame(()=>{Math.abs(window.scrollY-t)>2&&window.scrollTo({top:t,behavior:"instant"})})}function P(o,r){o.innerHTML=r}function $(o){const r=w.useRef(null),s=w.useRef(null),a=w.useRef(o);a.current=o;const t=w.useCallback(()=>{const i=r.current;i&&(s.current===null&&(s.current=G(i)),V(i,s.current,a.current))},[]);return w.useLayoutEffect(()=>{t();let i=0,d=0;const c=new ResizeObserver(p=>{const f=Math.round(p[0].contentRect.width);f!==i&&(i=f,cancelAnimationFrame(d),d=requestAnimationFrame(t))});return c.observe(r.current),()=>{c.disconnect(),cancelAnimationFrame(d)}},[t]),r}const q=w.forwardRef(function({children:r,className:s,style:a,as:t="p",...i},d){const c=$(i);return W.jsx(t,{ref:c,className:s,style:a,children:r})});q.displayName="GrayValueText";exports.GrayValueText=q;exports.applyGrayValue=V;exports.getCleanHTML=G;exports.measureLineDensity=v;exports.removeGrayValue=P;exports.useGrayValue=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),U=require("react/jsx-runtime"),D={word:"gv-word",line:"gv-line"};let E=null,k=!1;function X(){E!==null||k||(k=!0,Promise.resolve().then(()=>require("./steadygray-BcPniuRQ.cjs")).then(t=>{E=t}).catch(()=>{console.warn("[steadygray] canvas lineDetection requires @chenglou/pretext — falling back to BCR")}))}const G=new WeakMap;function J(t){const o=getComputedStyle(t),s=parseFloat(o.lineHeight);return isNaN(s)?parseFloat(o.fontSize)*1.2:s}const A={targetDensity:"auto",method:"letter-spacing",maxAdjustment:.05,tolerance:.01,calibrationFactor:2};function P(t){const o=getComputedStyle(t),s=o.fontWeight,c=o.fontSize,n=o.fontFamily.split(",")[0].replace(/['"]/g,"").trim();return`${s} ${c} ${n}`}function V(t,o,s,c,n){const u=n.getContext("2d",{willReadFrequently:!0});if(!u)return 0;const f=typeof window<"u"&&window.devicePixelRatio||1;n.width=Math.max(1,Math.ceil(s*f)),n.height=Math.max(1,Math.ceil(c*f)),u.setTransform(f,0,0,f,0,0),u.clearRect(0,0,s,c),u.fillStyle="white",u.fillRect(0,0,s,c),u.fillStyle="black",u.font=o,u.fillText(t,0,c*.75);const p=u.getImageData(0,0,n.width,n.height).data;let g=0;const m=n.width*n.height;for(let l=0;l<p.length;l+=4){const S=p[l],L=p[l+1],M=p[l+2];(S<140||L<140||M<140)&&g++}return m>0?g/m:0}function W(t){const o=t.cloneNode(!0);return o.querySelectorAll(`.${D.word}, .${D.line}`).forEach(c=>{const n=c.parentNode;if(n){for(;c.firstChild;)n.insertBefore(c.firstChild,c);n.removeChild(c)}}),o.querySelectorAll("br[data-gv-break]").forEach(c=>c.remove()),o.innerHTML}function Y(t,o,s={},c){var q;if(typeof window>"u")return;const n=window.scrollY,u=s.targetDensity??A.targetDensity,f=s.method??A.method,b=s.maxAdjustment??A.maxAdjustment,p=s.tolerance??A.tolerance,g=s.calibrationFactor??A.calibrationFactor,m=s.linePreservation??"none";if(t.innerHTML=o,!t.offsetWidth){requestAnimationFrame(()=>{Math.abs(window.scrollY-n)>2&&window.scrollTo({top:n,behavior:"instant"})});return}const l=t.offsetWidth,S=parseFloat(getComputedStyle(t).fontSize)||16,L=P(t),M=[];(function r(e){e.nodeType===Node.TEXT_NODE?M.push(e):e.childNodes.forEach(r)})(t);const d=[];for(const r of M){const e=r.textContent??"";if(!e.trim())continue;const i=e.split(/(\S+)/),h=document.createDocumentFragment();for(let a=0;a<i.length;a+=2){const y=i[a],C=i[a+1];if(!C)continue;const x=i[a+3]===void 0?i[a+2]??"":"",T=document.createElement("span");T.className=D.word,T.style.cssText="display:inline-block;white-space:nowrap;",T.appendChild(document.createTextNode(y+C+x)),h.appendChild(T),d.push(T)}r.parentNode.replaceChild(h,r)}if(d.length===0){requestAnimationFrame(()=>{Math.abs(window.scrollY-n)>2&&window.scrollTo({top:n,behavior:"instant"})});return}const j=s.lineDetection??"bcr";j==="canvas"&&X();const _=j==="canvas"&&E!==null,w=[];if(_){const r=G.get(t);let e;r&&r.originalHTML===o?e=r.prepared:(e=E.prepareWithSegments(t.textContent??"",P(t)),G.set(t,{originalHTML:o,prepared:e}));const i=J(t),{lines:h}=E.layoutWithLines(e,l,i);let a=0;for(const y of h){const C=y.text.replace(/\s+/g," ").trim(),F=[];let x="";for(;a<d.length;){const T=(d[a].textContent??"").replace(/\s+/g," ").trim();if(x=x?x+" "+T:T,F.push(d[a]),a++,x===C)break}F.length>0&&w.push({text:y.text.trim(),width:y.width,height:i,spans:F})}for(;a<d.length;)(q=w[w.length-1])==null||q.spans.push(d[a++]);for(const y of w)y.text=y.spans.map(C=>C.textContent??"").join("").trim()}else{let r=null,e=null;for(const i of d){const h=i.getBoundingClientRect(),a=Math.round(h.top);r===null||a!==r?(r=a,e={text:"",width:h.width,height:h.height||S,spans:[i]},w.push(e)):(e.width+=h.width,h.height>e.height&&(e.height=h.height),e.spans.push(i))}for(const i of w)i.text=i.spans.map(h=>h.textContent??"").join("").trim()}if(w.length===0){requestAnimationFrame(()=>{Math.abs(window.scrollY-n)>2&&window.scrollTo({top:n,behavior:"instant"})});return}const O=c??document.createElement("canvas"),N=w.map(r=>V(r.text,L,l,r.height||S,O));let R;if(typeof u=="number")R=u;else{const r=N.reduce((e,i)=>e+i,0);R=N.length>0?r/N.length:0}const B=N.map(r=>{const e=(R-r)*g;return Math.abs(e)<p?0:Math.max(-b,Math.min(b,e))});t.innerHTML=o;const I="display:inline-block;white-space:nowrap;vertical-align:top;";let $="";if(w.forEach((r,e)=>{const i=B[e],a=`${I}${f==="word-spacing"?"word-spacing":"letter-spacing"}:${i}em;`,y=r.spans.map((C,F)=>{const x=C.textContent??"";return F===0?x.replace(/^[^\S\u00a0]+/,""):x}).join("");$+=`<span class="${D.line}" style="${a}">${y}</span>`,e<w.length-1&&($+='<br data-gv-break="1">')}),t.innerHTML=$,m==="scale"){const r=Array.from(t.querySelectorAll(`.${D.line}`)),e=r.map(i=>i.getBoundingClientRect().width);r.forEach((i,h)=>{const a=e[h];a>.5&&Math.abs(a-l)>.5&&(i.style.width=`${l}px`,i.style.transform=`scaleX(${(l/a).toFixed(6)})`,i.style.transformOrigin="left center")})}requestAnimationFrame(()=>{Math.abs(window.scrollY-n)>2&&window.scrollTo({top:n,behavior:"instant"})})}function K(t,o){t.innerHTML=o}function z(t){const o=v.useRef(null),s=v.useRef(null),c=v.useRef(t);c.current=t;const{maxAdjustment:n,calibrationFactor:u,method:f,tolerance:b,targetDensity:p,lineDetection:g}=t,m=v.useCallback(()=>{const l=o.current;l&&(s.current===null&&(s.current=W(l)),Y(l,s.current,c.current))},[n,u,f,b,p,g]);return v.useLayoutEffect(()=>{m();let l=0,S=0;const L=new ResizeObserver(M=>{const d=Math.round(M[0].contentRect.width);d!==l&&(l=d,cancelAnimationFrame(S),S=requestAnimationFrame(m))});return L.observe(o.current),()=>{L.disconnect(),cancelAnimationFrame(S)}},[m]),v.useEffect(()=>{document.fonts.ready.then(m)},[m]),o}const H=v.forwardRef(function({children:o,className:s,style:c,as:n="p",...u},f){const b=z(u),p=v.useCallback(g=>{b.current=g,typeof f=="function"?f(g):f&&(f.current=g)},[b,f]);return U.jsx(n,{ref:p,className:s,style:c,children:o})});H.displayName="GrayValueText";exports.GrayValueText=H;exports.applyGrayValue=Y;exports.getCleanHTML=W;exports.measureLineDensity=V;exports.removeGrayValue=K;exports.useGrayValue=z;

package/dist/index.d.ts

@@ -34,6 +34,18 @@ export declare function getCleanHTML(el: HTMLElement): string;
 
 /** Options controlling the gray-value density-equalization algorithm */
 export declare interface GrayValueOptions {
+    /**
+     * Line detection method. Default: 'bcr'
+     *
+     * - **'bcr'** (default) — uses `getBoundingClientRect()` on injected word spans.
+     *   Ground truth: reads actual browser layout, handles all inline HTML and any font.
+     *
+     * - **'canvas'** — uses `@chenglou/pretext` canvas measurement for arithmetic line
+     *   breaking. No forced reflow on resize. Requires `@chenglou/pretext` to be installed.
+     *   Falls back to 'bcr' on the first render while pretext loads.
+     *   Avoid with `system-ui` font (canvas resolves differently on macOS).
+     */
+    lineDetection?: 'bcr' | 'canvas';
     /**
      * Target optical density ratio (0–1).
      * 'auto' = average of all measured line densities (default).
@@ -61,6 +73,22 @@ export declare interface GrayValueOptions {
      * Default: 2.0
      */
     calibrationFactor?: number;
+    /**
+     * Line width preservation strategy after the spacing correction is applied. Default: 'none'
+     *
+     * Density equalization adjusts letter-spacing per line, which alters each line's visual width.
+     * Lines that receive positive spacing grow wider than the container; lines that receive
+     * negative spacing leave a gap. Both are bounded by `maxAdjustment`.
+     *
+     * - **'none'** (default) — no compensation. Line widths vary up to ±maxAdjustment × charCount.
+     *   Suitable when `maxAdjustment` is small (≤ 0.05em) and slight overflow is acceptable.
+     *
+     * - **'scale'** — after applying spacing, a CSS `scaleX` transform is added to each line so it
+     *   occupies exactly its original width. The density correction remains visible as a change in
+     *   glyph spacing ratio, but lines never overflow the container. Slightly alters glyph
+     *   proportions at large correction values.
+     */
+    linePreservation?: 'none' | 'scale';
 }
 
 /**

package/dist/index.js

@@ -1,161 +1,218 @@
-import { useRef as R, useCallback as Y, useLayoutEffect as q, forwardRef as G } from "react";
-import { jsx as V } from "react/jsx-runtime";
-const A = {
+import { useRef as R, useCallback as Y, useLayoutEffect as H, useEffect as B, forwardRef as O } from "react";
+import { jsx as I } from "react/jsx-runtime";
+const M = {
   word: "gv-word",
   line: "gv-line"
-}, M = {
+};
+let D = null, q = !1;
+function U() {
+  D !== null || q || (q = !0, import("./steadygray-DjWw6Iqb.js").then((t) => {
+    D = t;
+  }).catch(() => {
+    console.warn("[steadygray] canvas lineDetection requires @chenglou/pretext — falling back to BCR");
+  }));
+}
+const P = /* @__PURE__ */ new WeakMap();
+function X(t) {
+  const o = getComputedStyle(t), s = parseFloat(o.lineHeight);
+  return isNaN(s) ? parseFloat(o.fontSize) * 1.2 : s;
+}
+const L = {
   targetDensity: "auto",
   method: "letter-spacing",
   maxAdjustment: 0.05,
+  tolerance: 0.01,
   calibrationFactor: 2
 };
-function W(o) {
-  const i = getComputedStyle(o), a = i.fontWeight, s = i.fontSize, t = i.fontFamily.split(",")[0].replace(/['"]/g, "").trim();
-  return `${a} ${s} ${t}`;
+function W(t) {
+  const o = getComputedStyle(t), s = o.fontWeight, c = o.fontSize, n = o.fontFamily.split(",")[0].replace(/['"]/g, "").trim();
+  return `${s} ${c} ${n}`;
 }
-function H(o, i, a, s, t) {
-  const r = t.getContext("2d");
-  if (!r) return 0;
-  t.width = Math.max(1, Math.ceil(a)), t.height = Math.max(1, Math.ceil(s)), r.clearRect(0, 0, t.width, t.height), r.fillStyle = "white", r.fillRect(0, 0, t.width, t.height), r.fillStyle = "black", r.font = i, r.fillText(o, 0, t.height * 0.75);
-  const c = r.getImageData(0, 0, t.width, t.height).data;
-  let p = 0;
-  const f = t.width * t.height;
-  for (let h = 0; h < c.length; h += 4) {
-    const C = c[h], x = c[h + 1], w = c[h + 2];
-    (C < 200 || x < 200 || w < 200) && p++;
+function J(t, o, s, c, n) {
+  const u = n.getContext("2d", { willReadFrequently: !0 });
+  if (!u) return 0;
+  const f = typeof window < "u" && window.devicePixelRatio || 1;
+  n.width = Math.max(1, Math.ceil(s * f)), n.height = Math.max(1, Math.ceil(c * f)), u.setTransform(f, 0, 0, f, 0, 0), u.clearRect(0, 0, s, c), u.fillStyle = "white", u.fillRect(0, 0, s, c), u.fillStyle = "black", u.font = o, u.fillText(t, 0, c * 0.75);
+  const p = u.getImageData(0, 0, n.width, n.height).data;
+  let m = 0;
+  const g = n.width * n.height;
+  for (let l = 0; l < p.length; l += 4) {
+    const S = p[l], v = p[l + 1], F = p[l + 2];
+    (S < 140 || v < 140 || F < 140) && m++;
   }
-  return f > 0 ? p / f : 0;
+  return g > 0 ? m / g : 0;
 }
-function z(o) {
-  const i = o.cloneNode(!0);
-  return i.querySelectorAll(
-    `.${A.word}, .${A.line}`
-  ).forEach((s) => {
-    const t = s.parentNode;
-    if (t) {
-      for (; s.firstChild; ) t.insertBefore(s.firstChild, s);
-      t.removeChild(s);
+function K(t) {
+  const o = t.cloneNode(!0);
+  return o.querySelectorAll(
+    `.${M.word}, .${M.line}`
+  ).forEach((c) => {
+    const n = c.parentNode;
+    if (n) {
+      for (; c.firstChild; ) n.insertBefore(c.firstChild, c);
+      n.removeChild(c);
     }
-  }), i.querySelectorAll("br[data-gv-break]").forEach((s) => s.remove()), i.innerHTML;
+  }), o.querySelectorAll("br[data-gv-break]").forEach((c) => c.remove()), o.innerHTML;
 }
-function _(o, i, a = {}, s) {
+function Q(t, o, s = {}, c) {
+  var k;
   if (typeof window > "u") return;
-  const t = window.scrollY, r = a.targetDensity ?? M.targetDensity, d = a.method ?? M.method, c = a.maxAdjustment ?? M.maxAdjustment, p = a.calibrationFactor ?? M.calibrationFactor;
-  if (o.innerHTML = i, !o.offsetWidth) {
+  const n = window.scrollY, u = s.targetDensity ?? L.targetDensity, f = s.method ?? L.method, b = s.maxAdjustment ?? L.maxAdjustment, p = s.tolerance ?? L.tolerance, m = s.calibrationFactor ?? L.calibrationFactor, g = s.linePreservation ?? "none";
+  if (t.innerHTML = o, !t.offsetWidth) {
     requestAnimationFrame(() => {
-      Math.abs(window.scrollY - t) > 2 && window.scrollTo({ top: t, behavior: "instant" });
+      Math.abs(window.scrollY - n) > 2 && window.scrollTo({ top: n, behavior: "instant" });
     });
     return;
   }
-  const f = o.offsetWidth, h = parseFloat(getComputedStyle(o).fontSize) || 16, C = W(o), x = [];
-  (function n(e) {
-    e.nodeType === Node.TEXT_NODE ? x.push(e) : e.childNodes.forEach(n);
-  })(o);
-  const w = [];
-  for (const n of x) {
-    const e = n.textContent ?? "";
+  const l = t.offsetWidth, S = parseFloat(getComputedStyle(t).fontSize) || 16, v = W(t), F = [];
+  (function r(e) {
+    e.nodeType === Node.TEXT_NODE ? F.push(e) : e.childNodes.forEach(r);
+  })(t);
+  const d = [];
+  for (const r of F) {
+    const e = r.textContent ?? "";
     if (!e.trim()) continue;
-    const l = e.split(/(\S+)/), N = document.createDocumentFragment();
-    for (let u = 0; u < l.length; u += 2) {
-      const D = l[u], T = l[u + 1];
-      if (!T) continue;
-      const S = l[u + 3] === void 0 ? l[u + 2] ?? "" : "", y = document.createElement("span");
-      y.className = A.word, y.style.cssText = "display:inline-block;white-space:nowrap;", y.appendChild(document.createTextNode(D + T + S)), N.appendChild(y), w.push(y);
+    const i = e.split(/(\S+)/), h = document.createDocumentFragment();
+    for (let a = 0; a < i.length; a += 2) {
+      const y = i[a], C = i[a + 1];
+      if (!C) continue;
+      const x = i[a + 3] === void 0 ? i[a + 2] ?? "" : "", T = document.createElement("span");
+      T.className = M.word, T.style.cssText = "display:inline-block;white-space:nowrap;", T.appendChild(document.createTextNode(y + C + x)), h.appendChild(T), d.push(T);
     }
-    n.parentNode.replaceChild(N, n);
+    r.parentNode.replaceChild(h, r);
   }
-  if (w.length === 0) {
+  if (d.length === 0) {
     requestAnimationFrame(() => {
-      Math.abs(window.scrollY - t) > 2 && window.scrollTo({ top: t, behavior: "instant" });
+      Math.abs(window.scrollY - n) > 2 && window.scrollTo({ top: n, behavior: "instant" });
     });
     return;
   }
-  const m = [];
-  let F = null, g = null;
-  for (const n of w) {
-    const e = n.getBoundingClientRect(), l = Math.round(e.top);
-    F === null || l !== F ? (F = l, g = {
-      text: "",
-      width: e.width,
-      height: e.height || h,
-      spans: [n]
-    }, m.push(g)) : (g.width += e.width, e.height > g.height && (g.height = e.height), g.spans.push(n));
+  const j = s.lineDetection ?? "bcr";
+  j === "canvas" && U();
+  const G = j === "canvas" && D !== null, w = [];
+  if (G) {
+    const r = P.get(t);
+    let e;
+    r && r.originalHTML === o ? e = r.prepared : (e = D.prepareWithSegments(t.textContent ?? "", W(t)), P.set(t, { originalHTML: o, prepared: e }));
+    const i = X(t), { lines: h } = D.layoutWithLines(e, l, i);
+    let a = 0;
+    for (const y of h) {
+      const C = y.text.replace(/\s+/g, " ").trim(), A = [];
+      let x = "";
+      for (; a < d.length; ) {
+        const T = (d[a].textContent ?? "").replace(/\s+/g, " ").trim();
+        if (x = x ? x + " " + T : T, A.push(d[a]), a++, x === C) break;
+      }
+      A.length > 0 && w.push({ text: y.text.trim(), width: y.width, height: i, spans: A });
+    }
+    for (; a < d.length; )
+      (k = w[w.length - 1]) == null || k.spans.push(d[a++]);
+    for (const y of w)
+      y.text = y.spans.map((C) => C.textContent ?? "").join("").trim();
+  } else {
+    let r = null, e = null;
+    for (const i of d) {
+      const h = i.getBoundingClientRect(), a = Math.round(h.top);
+      r === null || a !== r ? (r = a, e = {
+        text: "",
+        width: h.width,
+        height: h.height || S,
+        spans: [i]
+      }, w.push(e)) : (e.width += h.width, h.height > e.height && (e.height = h.height), e.spans.push(i));
+    }
+    for (const i of w)
+      i.text = i.spans.map((h) => h.textContent ?? "").join("").trim();
   }
-  for (const n of m)
-    n.text = n.spans.map((e) => e.textContent ?? "").join("").trim();
-  if (m.length === 0) {
+  if (w.length === 0) {
     requestAnimationFrame(() => {
-      Math.abs(window.scrollY - t) > 2 && window.scrollTo({ top: t, behavior: "instant" });
+      Math.abs(window.scrollY - n) > 2 && window.scrollTo({ top: n, behavior: "instant" });
     });
     return;
   }
-  const j = s ?? document.createElement("canvas"), b = m.map(
-    (n) => H(
-      n.text,
-      C,
-      f,
-      n.height || h,
-      j
+  const V = c ?? document.createElement("canvas"), E = w.map(
+    (r) => J(
+      r.text,
+      v,
+      l,
+      r.height || S,
+      V
     )
   );
-  let L;
-  if (typeof r == "number")
-    L = r;
+  let N;
+  if (typeof u == "number")
+    N = u;
   else {
-    const n = b.reduce((e, l) => e + l, 0);
-    L = b.length > 0 ? n / b.length : 0;
+    const r = E.reduce((e, i) => e + i, 0);
+    N = E.length > 0 ? r / E.length : 0;
   }
-  const v = b.map((n) => {
-    const e = (L - n) * p;
-    return Math.max(-c, Math.min(c, e));
+  const z = E.map((r) => {
+    const e = (N - r) * m;
+    return Math.abs(e) < p ? 0 : Math.max(-b, Math.min(b, e));
   });
-  o.innerHTML = i;
-  const k = "display:inline-block;white-space:nowrap;vertical-align:top;";
-  let E = "";
-  m.forEach((n, e) => {
-    const l = v[e], u = `${k}${d === "word-spacing" ? "word-spacing" : "letter-spacing"}:${l}em;`, D = n.spans.map((T, $) => {
-      const S = T.textContent ?? "";
-      return $ === 0 ? S.replace(/^[^\S\u00a0]+/, "") : S;
+  t.innerHTML = o;
+  const _ = "display:inline-block;white-space:nowrap;vertical-align:top;";
+  let $ = "";
+  if (w.forEach((r, e) => {
+    const i = z[e], a = `${_}${f === "word-spacing" ? "word-spacing" : "letter-spacing"}:${i}em;`, y = r.spans.map((C, A) => {
+      const x = C.textContent ?? "";
+      return A === 0 ? x.replace(/^[^\S\u00a0]+/, "") : x;
     }).join("");
-    E += `<span class="${A.line}" style="${u}">${D}</span>`, e < m.length - 1 && (E += '<br data-gv-break="1">');
-  }), o.innerHTML = E, requestAnimationFrame(() => {
-    Math.abs(window.scrollY - t) > 2 && window.scrollTo({ top: t, behavior: "instant" });
+    $ += `<span class="${M.line}" style="${a}">${y}</span>`, e < w.length - 1 && ($ += '<br data-gv-break="1">');
+  }), t.innerHTML = $, g === "scale") {
+    const r = Array.from(
+      t.querySelectorAll(`.${M.line}`)
+    ), e = r.map((i) => i.getBoundingClientRect().width);
+    r.forEach((i, h) => {
+      const a = e[h];
+      a > 0.5 && Math.abs(a - l) > 0.5 && (i.style.width = `${l}px`, i.style.transform = `scaleX(${(l / a).toFixed(6)})`, i.style.transformOrigin = "left center");
+    });
+  }
+  requestAnimationFrame(() => {
+    Math.abs(window.scrollY - n) > 2 && window.scrollTo({ top: n, behavior: "instant" });
   });
 }
-function U(o, i) {
-  o.innerHTML = i;
+function ot(t, o) {
+  t.innerHTML = o;
 }
-function P(o) {
-  const i = R(null), a = R(null), s = R(o);
-  s.current = o;
-  const t = Y(() => {
-    const r = i.current;
-    r && (a.current === null && (a.current = z(r)), _(r, a.current, s.current));
-  }, []);
-  return q(() => {
-    t();
-    let r = 0, d = 0;
-    const c = new ResizeObserver((p) => {
-      const f = Math.round(p[0].contentRect.width);
-      f !== r && (r = f, cancelAnimationFrame(d), d = requestAnimationFrame(t));
+function Z(t) {
+  const o = R(null), s = R(null), c = R(t);
+  c.current = t;
+  const { maxAdjustment: n, calibrationFactor: u, method: f, tolerance: b, targetDensity: p, lineDetection: m } = t, g = Y(() => {
+    const l = o.current;
+    l && (s.current === null && (s.current = K(l)), Q(l, s.current, c.current));
+  }, [n, u, f, b, p, m]);
+  return H(() => {
+    g();
+    let l = 0, S = 0;
+    const v = new ResizeObserver((F) => {
+      const d = Math.round(F[0].contentRect.width);
+      d !== l && (l = d, cancelAnimationFrame(S), S = requestAnimationFrame(g));
     });
-    return c.observe(i.current), () => {
-      c.disconnect(), cancelAnimationFrame(d);
+    return v.observe(o.current), () => {
+      v.disconnect(), cancelAnimationFrame(S);
     };
-  }, [t]), i;
+  }, [g]), B(() => {
+    document.fonts.ready.then(g);
+  }, [g]), o;
 }
-const I = G(
-  function({ children: i, className: a, style: s, as: t = "p", ...r }, d) {
-    const c = P(r);
-    return /* @__PURE__ */ V(t, { ref: c, className: a, style: s, children: i });
+const tt = O(
+  function({ children: o, className: s, style: c, as: n = "p", ...u }, f) {
+    const b = Z(u), p = Y(
+      (m) => {
+        b.current = m, typeof f == "function" ? f(m) : f && (f.current = m);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [b, f]
+    );
+    return /* @__PURE__ */ I(n, { ref: p, className: s, style: c, children: o });
   }
 );
-I.displayName = "GrayValueText";
+tt.displayName = "GrayValueText";
 export {
-  I as GrayValueText,
-  _ as applyGrayValue,
-  z as getCleanHTML,
-  H as measureLineDensity,
-  U as removeGrayValue,
-  P as useGrayValue
+  tt as GrayValueText,
+  Q as applyGrayValue,
+  K as getCleanHTML,
+  J as measureLineDensity,
+  ot as removeGrayValue,
+  Z as useGrayValue
 };

package/dist/steadygray-BcPniuRQ.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={};exports.default=e;

package/dist/steadygray-DjWw6Iqb.js

@@ -0,0 +1,4 @@
+const a = {};
+export {
+  a as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@liiift-studio/steadygray",
-	"version": "0.0.1",
-	"description": "Paragraph optical density equalization — measure actual glyph area per line and equalize visual density across all lines",
+	"version": "1.0.0",
+	"description": "Paragraph optical density equalization \u2014 measure actual glyph area per line and equalize visual density across all lines",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -25,7 +25,8 @@
 	},
 	"peerDependencies": {
 		"react": ">=17",
-		"react-dom": ">=17"
+		"react-dom": ">=17",
+		"@chenglou/pretext": ">=0.0.5"
 	},
 	"peerDependenciesMeta": {
 		"react": {
@@ -33,6 +34,9 @@
 		},
 		"react-dom": {
 			"optional": true
+		},
+		"@chenglou/pretext": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -50,9 +54,14 @@
 		"typography",
 		"gray-value",
 		"optical-density",
+		"glyph-area",
+		"canvas",
+		"letter-spacing",
 		"typesetting",
+		"zero-dependencies",
 		"react",
-		"typescript"
+		"typescript",
+		"css"
 	],
 	"author": "Quinn Keaveney <quinn@liiift.studio>",
 	"license": "MIT",
@@ -64,5 +73,8 @@
 	"bugs": {
 		"url": "https://github.com/Liiift-Studio/SteadyGray/issues"
 	},
-	"sideEffects": false
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	}
 }