@solidrt/core 0.0.68 → 0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -33,8 +33,8 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.68",
-    "@solidrt/test": "0.0.68"
+    "@solidrt/flux-types": "0.0.70",
+    "@solidrt/test": "0.0.70"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",

package/src/core.ts

@@ -402,6 +402,30 @@ export function warmText(styles: tree.MeasureTextOptions[]): void {
   tree.warmText(styles)
 }
 
+export type TextRenderingOptions = tree.TextRenderingOptions
+export type TextRenderingPolicy = tree.TextRenderingPolicy
+
+/**
+ * Changes how every text is rendered: the coverage-to-color mode and its
+ * gamma or contrast, and the stem darkening and hinting of the glyph cells. Each option
+ * given replaces its part of the current policy, the rest stays; every text
+ * redraws at the next frame. The defaults are what an app that says nothing
+ * gets; this is the knob for judging a policy by eye on a running app.
+ */
+export function setTextRendering(options: TextRenderingOptions): void {
+  tree.setTextRendering(options)
+}
+
+/**
+ * The text rendering policy as it stands, resolved for this display: the
+ * shape setTextRendering takes, with a darkening or hinting left at its
+ * default read as the value the display scale gives it. What a settings
+ * screen shows; setting it back changes nothing on this display.
+ */
+export function textRendering(): TextRenderingPolicy {
+  return tree.textRendering()
+}
+
 /** One laid-out line from layoutNextLine. */
 export type TextLine = {
   /** Unit range [from, to) into prepared.units. */
@@ -426,6 +450,13 @@ export type TextLine = {
  * every glued piece that follows, plus the last piece's ink. What must fit on
  * the line for the unit to go on it.
  */
+// Slack a line's width may be exceeded by and still fit, logical px: the
+// width a laid-out box hands back is a float ulp off the width its text
+// measured (the rendertree's layout::FIT_SLACK, the same value), so an
+// exact fit wraps a word inside its own box. 1/64 px is a browser layout
+// unit: far above any ulp drift, far below a visible overhang.
+export const FIT_SLACK = 1 / 64
+
 export function unitInk(units: tree.TextUnit[], index: number): number {
   let ink = units[index]!.width
   let advance = 0
@@ -439,7 +470,8 @@ export function unitInk(units: tree.TextUnit[], index: number): number {
 /**
  * The next line of `prepared` from unit `cursor` that fits `width`, or null
  * when the text is used up. Greedy: units go on the line while the pen plus
- * the unit's ink stays within `width`; a hard break ends the line; a unit
+ * the unit's ink stays within `width` (a hair of slack for float drift
+ * included); a hard break ends the line; a unit
  * wider than `width` on its own goes on the line whole and overflows. Draw a
  * line as `<d-text x y w={line.width + 1}>{prepared.text.slice(line.start, line.end)}</d-text>`
  * with the same font options; its words are already shaped, so that is
@@ -458,7 +490,7 @@ export function layoutNextLine(prepared: tree.PreparedText, cursor: number, widt
     let unit = units[i]!
     // Glued pieces stay with the unit they continue: the whole wrap unit
     // (this piece through the last glued one) must fit for any of it to go on.
-    if (i > cursor && !unit.glue && pen + unitInk(units, i) > width) break
+    if (i > cursor && !unit.glue && pen + unitInk(units, i) > width + FIT_SLACK) break
     pen += unit.advance
     if (unit.ascent > ascent) ascent = unit.ascent
     if (unit.descent > descent) descent = unit.descent

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from "./renderer"
-export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, warmText, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, getLayoutBox, snapshotTexture, onPointerMove } from "./core"
-export type { BoundingBox, GlobalPointerEvent, TextLine } from "./core"
+export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, warmText, setTextRendering, textRendering, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, getLayoutBox, snapshotTexture, onPointerMove } from "./core"
+export type { BoundingBox, GlobalPointerEvent, TextLine, TextRenderingOptions, TextRenderingPolicy } from "./core"
 export { parseColor, mixColors, withAlpha, brightness, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
 export { onFrame, frameTime, onBeforeRender, onLayout, onResize, onWindowFocus, onWindowBlur, onBack, onLink, onSuspend, onQuit, exit, background, registerProtocolHandler } from "./window"
@@ -25,6 +25,7 @@ export { Logo } from "./logo"
 export type { LogoProps } from "./logo"
 export type { SvgDocument, SvgDraw } from "./svg"
 export { createScroll } from "./scroll"
+export { warnOnce } from "./warn"
 export type { Scroll, ScrollAxis, ScrollBehavior, ScrollOffset, ScrollOptions, ScrollToOptions } from "./scroll"
 export { arena } from "./arena"
 export type { ArenaOwner } from "./arena"

package/src/scroll.ts

@@ -7,6 +7,7 @@
 import { createSignal } from "@solidjs/signals"
 import { getBoundingBox } from "./core"
 import { onLayout } from "./window"
+import { warnOnce } from "./warn"
 
 export type ScrollAxis = "vertical" | "horizontal" | "both"
 
@@ -75,11 +76,9 @@ export function createScroll(
 
   // A scroll viewport with no explicit main-axis size resolves to 0 in flex
   // layout and its content silently vanishes - a classic trap (maxHeight alone
-  // does not size it either). Detect it at measure time and warn once, with a
-  // stack captured at creation so the warning points at the component that
-  // built the scroller (the dev server remaps the frames to .tsx).
-  let origin = new Error().stack ?? ""
-  let warnedCollapsed = false
+  // does not size it either). Detect it at measure time and warn once, from
+  // the component that built the scroller (warnOnce captures its stack here).
+  let warnCollapsed = warnOnce()
 
   // Last measured overflow, refreshed each layout. scrollBy/scrollTo clamp
   // against these between layouts; onLayout re-clamps once new sizes are known.
@@ -110,17 +109,14 @@ export function createScroll(
     let vb = getBoundingBox(vp)
     let cb = getBoundingBox(ct)
     if (!vb || !cb) return
-    if (!warnedCollapsed) {
-      let zeroY = canY && vb.height === 0 && cb.height > 0
-      let zeroX = canX && vb.width === 0 && cb.width > 0
-      if (zeroY || zeroX) {
-        warnedCollapsed = true
-        let axisName = zeroY ? "height" : "width"
-        console.warn(
-          `Scroll container resolved to ${axisName} 0, so its content is invisible. ` +
-            `Give it an explicit ${axisName} or flex; maxHeight/maxWidth alone does not size it.\n${origin}`,
-        )
-      }
+    let zeroY = canY && vb.height === 0 && cb.height > 0
+    let zeroX = canX && vb.width === 0 && cb.width > 0
+    if (zeroY || zeroX) {
+      let axisName = zeroY ? "height" : "width"
+      warnCollapsed(
+        `Scroll container resolved to ${axisName} 0, so its content is invisible. ` +
+          `Give it an explicit ${axisName} or flex; maxHeight/maxWidth alone does not size it.`,
+      )
     }
     maxX = Math.max(0, cb.width - vb.width)
     maxY = Math.max(0, cb.height - vb.height)

package/src/text-input.ts

@@ -5,7 +5,7 @@
 // are policy and belong to the component (the "skin") that composes these.
 
 import { createMemo, createSignal, flush, untrack } from "@solidjs/signals"
-import { getLayoutBox, layoutNextLine, measureText, prepareText, unitInk } from "./core"
+import { FIT_SLACK, getLayoutBox, layoutNextLine, measureText, prepareText, unitInk } from "./core"
 import type { MeasureTextOptions, PreparedText, TextRunRange, TextUnit } from "flux:rendertree"
 import { onLayout } from "./window"
 
@@ -542,12 +542,12 @@ export function createTextEditorLayout(
 // through as is.
 function splitWide(prepared: PreparedText, width: number): PreparedText {
   let all = prepared.units
-  if (!all.some((u, i) => !u.glue && unitInk(all, i) > width)) return prepared
+  if (!all.some((u, i) => !u.glue && unitInk(all, i) > width + FIT_SLACK)) return prepared
   let wide = false
   let units: TextUnit[] = []
   for (let u = 0; u < all.length; u++) {
     let unit = all[u]!
-    if (!unit.glue) wide = unitInk(all, u) > width
+    if (!unit.glue) wide = unitInk(all, u) > width + FIT_SLACK
     let stops = unit.carets
     if (!wide || !stops || stops.length <= 2) {
       units.push(unit)

package/src/types.d.ts

@@ -103,6 +103,21 @@ export interface LayoutProps extends FlexboxProps, GridProps {
    * resolves against whatever relative element is above all of them.
    */
   position?: "relative" | "absolute"
+  /**
+   * CSS size containment: the element sizes as if it had no content. A
+   * texture or text measures as zero on every axis layout does not hand it,
+   * and a view's children add nothing to its box; they lay out inside
+   * whatever box it gets. The one CSS `contain` value with a meaning here.
+   * The element still needs a size from its own props or its parent (a
+   * `flexGrow` in a sized column), or it comes out empty.
+   *
+   * What takes the place of the web's `minHeight={0}` escape from the flex
+   * automatic minimum, declared on the element whose content would
+   * otherwise pin its ancestors: a fill-mode `<Scene>` or `<SpriteLayer>`
+   * leaf sets it, so the target that follows the leaf's box never feeds its
+   * pixel size back into layout.
+   */
+  contain?: "size"
 
   top?: Dimension
   right?: Dimension

package/src/warn.ts

@@ -0,0 +1,22 @@
+// A development warning for a misuse that shows later than the code that
+// caused it: a layout that comes out empty, an event that never arrives. The
+// site of the misuse is the component that built the thing, not the layout
+// pass that notices, so the warning carries that component's stack.
+
+/**
+ * A once-only dev warning bound to the place it is created: `let warn =
+ * warnOnce()` where a component builds something whose misuse surfaces
+ * later (a scroller, a fill-mode scene), `warn(message)` from the layout
+ * or event read that notices. The first call reports, with the stack of the
+ * creation site under the message (the dev server remaps the frames to
+ * .tsx); later calls are silent.
+ */
+export function warnOnce(): (message: string) => void {
+  let origin = new Error().stack ?? ""
+  let warned = false
+  return message => {
+    if (warned) return
+    warned = true
+    console.warn(`${message}\n${origin}`)
+  }
+}