@pibbl/core 0.0.1

package/dist/lib/components/text-layout.js

@@ -0,0 +1,139 @@
+function resolveTextLayout(measureText, text, style) {
+  const {
+    x = 0,
+    y = 0,
+    width,
+    height,
+    lineHeight = 13,
+    wrap = false,
+    fit = "visible"
+  } = style;
+  const literalLines = wrap ? wrapText(measureText, text, y, width, height, lineHeight, fit) : [{ text: ellipsize(measureText, text, width, fit), y }];
+  const lines = literalLines.map(({ text: lineText, y: lineY }) => {
+    const metrics = measureText(lineText);
+    const squishWidth = fit === "squish" ? width : void 0;
+    const horizontalScale = squishWidth !== void 0 && metrics.width > squishWidth ? Math.max(0, squishWidth) / metrics.width : 1;
+    return {
+      text: lineText,
+      x,
+      y: lineY,
+      bounds: {
+        x: x - metrics.actualBoundingBoxLeft * horizontalScale,
+        y: lineY - metrics.actualBoundingBoxAscent,
+        width: (metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight) * horizontalScale,
+        height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+      },
+      ...squishWidth === void 0 ? {} : { squishWidth }
+    };
+  });
+  return {
+    lines,
+    bounds: unionBounds(lines.map((line) => line.bounds)),
+    clipBounds: resolveTextClipBounds(style)
+  };
+}
+function resolveTextClipBounds(style, fallbackHeight) {
+  const {
+    width,
+    fit = "visible",
+    textAlign = "left",
+    textBaseline = "top"
+  } = style;
+  if (fit !== "clip" || width === void 0) return void 0;
+  const x = style.x ?? 0;
+  const y = style.y ?? 0;
+  const height = style.height ?? fallbackHeight;
+  if (height === void 0) return void 0;
+  return {
+    x: alignedLeft(x, width, textAlign),
+    y: baselineTop(y, height, textBaseline),
+    width,
+    height
+  };
+}
+function wrapText(measureText, text, y, width, height, lineHeight, fit) {
+  const maxWidth = width ?? Infinity;
+  const maxHeight = height ?? Infinity;
+  const words = text.split(" ");
+  const lines = [];
+  let line = "";
+  for (const word of words) {
+    const candidate = line ? `${line} ${word}` : word;
+    if (line && measureText(candidate).width > maxWidth) {
+      lines.push({ text: line, y: y + lines.length * lineHeight });
+      line = word;
+    } else {
+      line = candidate;
+    }
+  }
+  if (line || words.length === 1) {
+    lines.push({ text: line, y: y + lines.length * lineHeight });
+  }
+  const maxLines = Number.isFinite(maxHeight) ? Math.max(0, Math.floor(maxHeight / lineHeight)) : lines.length;
+  if (lines.length <= maxLines) return lines;
+  if (maxLines === 0) return [];
+  const visible = lines.slice(0, maxLines);
+  if (fit === "ellipsis" && Number.isFinite(maxWidth)) {
+    const remaining = lines.slice(maxLines - 1).map((value) => value.text).join(" ");
+    visible[maxLines - 1] = {
+      text: getEllipsisText(measureText, remaining, maxWidth),
+      y: visible[maxLines - 1].y
+    };
+  }
+  return visible;
+}
+function ellipsize(measureText, text, width, fit) {
+  return fit === "ellipsis" && width !== void 0 ? getEllipsisText(measureText, text, width) : text;
+}
+function alignedLeft(x, width, textAlign) {
+  if (textAlign === "center") return x - width / 2;
+  if (textAlign === "right" || textAlign === "end") return x - width;
+  return x;
+}
+function baselineTop(y, height, textBaseline) {
+  if (textBaseline === "middle") return y - height / 2;
+  if (textBaseline === "bottom" || textBaseline === "ideographic") {
+    return y - height;
+  }
+  return y;
+}
+let graphemeSegmenter;
+function getEllipsisText(measureText, text, maxWidth) {
+  if (measureText(text).width <= maxWidth) return text;
+  if (maxWidth <= 0 || measureText("...").width > maxWidth) return "";
+  graphemeSegmenter ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  const boundaries = [0];
+  for (const segment of graphemeSegmenter.segment(text)) {
+    boundaries.push(segment.index + segment.segment.length);
+  }
+  let low = 0;
+  let high = boundaries.length - 1;
+  while (1 + low < high) {
+    const mid = low + (high - low >> 1);
+    if (measureText(`${text.substring(0, boundaries[mid])}...`).width > maxWidth) {
+      high = mid;
+    } else {
+      low = mid;
+    }
+  }
+  return `${text.substring(0, boundaries[low])}...`;
+}
+function unionBounds(bounds) {
+  if (bounds.length === 0) return void 0;
+  let left = bounds[0].x;
+  let top = bounds[0].y;
+  let right = bounds[0].x + bounds[0].width;
+  let bottom = bounds[0].y + bounds[0].height;
+  for (const value of bounds.slice(1)) {
+    left = Math.min(left, value.x);
+    top = Math.min(top, value.y);
+    right = Math.max(right, value.x + value.width);
+    bottom = Math.max(bottom, value.y + value.height);
+  }
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+export {
+  resolveTextClipBounds,
+  resolveTextLayout
+};
+//# sourceMappingURL=text-layout.js.map

package/dist/lib/components/text-layout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/text-layout.ts"],
+  "sourcesContent": ["import type { TextStyle } from '../style/types.js';\n\ntype TextLayoutStyle = Omit<TextStyle, 'x' | 'y' | 'width' | 'height'> & {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n};\n\nexport interface TextBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface TextLayoutLine {\n  text: string;\n  x: number;\n  y: number;\n  bounds: TextBounds;\n  squishWidth?: number;\n}\n\nexport interface TextLayout {\n  lines: readonly TextLayoutLine[];\n  bounds: TextBounds | undefined;\n  clipBounds: TextBounds | undefined;\n}\n\nexport type MeasureText = (text: string) => TextMetrics;\n\n/** Resolves text line breaking and geometry without rendering or runtime state. */\nexport function resolveTextLayout(\n  measureText: MeasureText,\n  text: string,\n  style: Readonly<TextLayoutStyle>,\n): TextLayout {\n  const {\n    x = 0,\n    y = 0,\n    width,\n    height,\n    lineHeight = 13,\n    wrap = false,\n    fit = 'visible',\n  } = style;\n  const literalLines = wrap\n    ? wrapText(measureText, text, y, width, height, lineHeight, fit)\n    : [{ text: ellipsize(measureText, text, width, fit), y }];\n  const lines = literalLines.map(({ text: lineText, y: lineY }) => {\n    const metrics = measureText(lineText);\n    const squishWidth = fit === 'squish' ? width : undefined;\n    const horizontalScale =\n      squishWidth !== undefined && metrics.width > squishWidth\n        ? Math.max(0, squishWidth) / metrics.width\n        : 1;\n\n    return {\n      text: lineText,\n      x,\n      y: lineY,\n      bounds: {\n        x: x - metrics.actualBoundingBoxLeft * horizontalScale,\n        y: lineY - metrics.actualBoundingBoxAscent,\n        width:\n          (metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight) *\n          horizontalScale,\n        height:\n          metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n      },\n      ...(squishWidth === undefined ? {} : { squishWidth }),\n    } satisfies TextLayoutLine;\n  });\n\n  return {\n    lines,\n    bounds: unionBounds(lines.map((line) => line.bounds)),\n    clipBounds: resolveTextClipBounds(style),\n  };\n}\n\n/** Resolves finite clip geometry, with an optional pure height fallback. */\nexport function resolveTextClipBounds(\n  style: Readonly<TextLayoutStyle>,\n  fallbackHeight?: number,\n): TextBounds | undefined {\n  const {\n    width,\n    fit = 'visible',\n    textAlign = 'left',\n    textBaseline = 'top',\n  } = style;\n  if (fit !== 'clip' || width === undefined) return undefined;\n\n  const x = style.x ?? 0;\n  const y = style.y ?? 0;\n  const height = style.height ?? fallbackHeight;\n  if (height === undefined) return undefined;\n\n  return {\n    x: alignedLeft(x, width, textAlign),\n    y: baselineTop(y, height, textBaseline),\n    width,\n    height,\n  };\n}\n\ninterface LiteralTextLine {\n  text: string;\n  y: number;\n}\n\nfunction wrapText(\n  measureText: MeasureText,\n  text: string,\n  y: number,\n  width: number | undefined,\n  height: number | undefined,\n  lineHeight: number,\n  fit: TextStyle['fit'],\n): LiteralTextLine[] {\n  const maxWidth = width ?? Infinity;\n  const maxHeight = height ?? Infinity;\n  const words = text.split(' ');\n  const lines: LiteralTextLine[] = [];\n  let line = '';\n\n  for (const word of words) {\n    const candidate = line ? `${line} ${word}` : word;\n    if (line && measureText(candidate).width > maxWidth) {\n      lines.push({ text: line, y: y + lines.length * lineHeight });\n      line = word;\n    } else {\n      line = candidate;\n    }\n  }\n\n  if (line || words.length === 1) {\n    lines.push({ text: line, y: y + lines.length * lineHeight });\n  }\n\n  const maxLines = Number.isFinite(maxHeight)\n    ? Math.max(0, Math.floor(maxHeight / lineHeight))\n    : lines.length;\n  if (lines.length <= maxLines) return lines;\n  if (maxLines === 0) return [];\n\n  const visible = lines.slice(0, maxLines);\n  if (fit === 'ellipsis' && Number.isFinite(maxWidth)) {\n    const remaining = lines\n      .slice(maxLines - 1)\n      .map((value) => value.text)\n      .join(' ');\n    visible[maxLines - 1] = {\n      text: getEllipsisText(measureText, remaining, maxWidth),\n      y: visible[maxLines - 1].y,\n    };\n  }\n  return visible;\n}\n\nfunction ellipsize(\n  measureText: MeasureText,\n  text: string,\n  width: number | undefined,\n  fit: TextStyle['fit'],\n): string {\n  return fit === 'ellipsis' && width !== undefined\n    ? getEllipsisText(measureText, text, width)\n    : text;\n}\n\nfunction alignedLeft(\n  x: number,\n  width: number,\n  textAlign: CanvasTextAlign,\n): number {\n  if (textAlign === 'center') return x - width / 2;\n  if (textAlign === 'right' || textAlign === 'end') return x - width;\n  return x;\n}\n\nfunction baselineTop(\n  y: number,\n  height: number,\n  textBaseline: CanvasTextBaseline,\n): number {\n  if (textBaseline === 'middle') return y - height / 2;\n  if (textBaseline === 'bottom' || textBaseline === 'ideographic') {\n    return y - height;\n  }\n  return y;\n}\n\nlet graphemeSegmenter: Intl.Segmenter | undefined;\n\nfunction getEllipsisText(\n  measureText: MeasureText,\n  text: string,\n  maxWidth: number,\n): string {\n  if (measureText(text).width <= maxWidth) return text;\n  if (maxWidth <= 0 || measureText('...').width > maxWidth) return '';\n\n  // Search only complete grapheme boundaries: UTF-16 offsets can split a\n  // surrogate pair, combining sequence, flag or joined emoji.\n  graphemeSegmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n  const boundaries = [0];\n  for (const segment of graphemeSegmenter.segment(text)) {\n    boundaries.push(segment.index + segment.segment.length);\n  }\n  let low = 0;\n  let high = boundaries.length - 1;\n\n  while (1 + low < high) {\n    const mid = low + ((high - low) >> 1);\n    if (measureText(`${text.substring(0, boundaries[mid])}...`).width > maxWidth) {\n      high = mid;\n    } else {\n      low = mid;\n    }\n  }\n\n  return `${text.substring(0, boundaries[low])}...`;\n}\n\nfunction unionBounds(bounds: readonly TextBounds[]): TextBounds | undefined {\n  if (bounds.length === 0) return undefined;\n\n  let left = bounds[0].x;\n  let top = bounds[0].y;\n  let right = bounds[0].x + bounds[0].width;\n  let bottom = bounds[0].y + bounds[0].height;\n\n  for (const value of bounds.slice(1)) {\n    left = Math.min(left, value.x);\n    top = Math.min(top, value.y);\n    right = Math.max(right, value.x + value.width);\n    bottom = Math.max(bottom, value.y + value.height);\n  }\n\n  return { x: left, y: top, width: right - left, height: bottom - top };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/components/text.d.ts

@@ -0,0 +1,29 @@
+import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from '../events/types.js';
+import type { TextStyle } from '../style/types.js';
+import type { PibblTextInput } from '../types.js';
+import type { PibblPhysics2DPropExtension } from '../types.js';
+/**
+ * Authored inputs for Text, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link PibblTextInput}
+ * @see {@link Text}
+ */
+export interface TextProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+    /** Descendant content or the callback that supplies it. See {@link PibblTextInput}. */
+    children?: PibblTextInput;
+}
+/**
+ * Draws Canvas text from textual children using the resolved font, wrapping, fitting, and paint
+ * style.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link TextProps}
+ * @see {@link TextStyle}
+ */
+export declare const Text: import("@pibbl/core").PibblPrimitiveComponent<TextProps, import("@pibbl/core").PrimitiveInput<TextProps, TextStyle>>;

package/dist/lib/components/text.js

@@ -0,0 +1,174 @@
+import { resolveTexturePaint } from "../textures/texture-protocol.js";
+import { definePrimitive } from "../define-primitive.js";
+import { materializeTextChildren } from "../element/children.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import {
+  resolveOptionalLength,
+  stripLayoutParticipation
+} from "../style/resolve-built-in.js";
+import { registerOpaqueStyleProperties } from "../style/resolve-dispatch.js";
+import { resolveLength } from "../style/resolve-length.js";
+import { wireCommonEvents } from "../util/wire-common-events.js";
+import { pushClippingPath } from "../util/push-clipping-path.js";
+import { resolveTextClipBounds, resolveTextLayout } from "./text-layout.js";
+import { withReceiverInputProvision } from "../signals/input-provision.js";
+const materializedTextTransactions = /* @__PURE__ */ new WeakMap();
+function renderText(props, style, ctx) {
+  const text = materializeTextContent(props);
+  const {
+    font = "13px sans-serif",
+    textBaseline = "top",
+    textAlign = "left",
+    fill,
+    stroke,
+    strokeWidth = 0,
+    opacity,
+    cursor
+  } = style;
+  if (opacity !== void 0) {
+    ctx.globalAlpha = ctx.globalAlpha * opacity;
+  }
+  ctx.font = font;
+  ctx.textBaseline = textBaseline;
+  ctx.textAlign = textAlign;
+  const layout = resolveTextLayout(
+    (value) => ctx.measureText(value),
+    text,
+    style
+  );
+  const clipBounds = layout.clipBounds ?? resolveTextClipBounds(style, ctx.canvas.height);
+  let releaseClip;
+  if (clipBounds) {
+    const clipPath = new Path2D();
+    clipPath.rect(
+      clipBounds.x,
+      clipBounds.y,
+      clipBounds.width,
+      clipBounds.height
+    );
+    releaseClip = pushClippingPath(ctx, clipPath);
+  }
+  try {
+    const textBounds = props.pointerEvents === "none" ? void 0 : new Path2D();
+    for (const line of layout.lines) {
+      if (stroke && strokeWidth) {
+        ctx.strokeStyle = resolveTexturePaint(stroke, ctx, layout.bounds ?? line.bounds);
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeText(line.text, line.x, line.y, line.squishWidth);
+      }
+      if (fill) {
+        ctx.fillStyle = resolveTexturePaint(fill, ctx, layout.bounds ?? line.bounds);
+        ctx.fillText(line.text, line.x, line.y, line.squishWidth);
+      }
+      if (textBounds) {
+        textBounds.moveTo(line.bounds.x, line.bounds.y);
+        textBounds.lineTo(line.bounds.x + line.bounds.width, line.bounds.y);
+        textBounds.lineTo(
+          line.bounds.x + line.bounds.width,
+          line.bounds.y + line.bounds.height
+        );
+        textBounds.lineTo(line.bounds.x, line.bounds.y + line.bounds.height);
+        textBounds.closePath();
+      }
+    }
+    wireCommonEvents(
+      props,
+      textBounds,
+      true,
+      strokeWidth,
+      cursor,
+      layout.bounds
+    );
+  } finally {
+    releaseClip?.();
+  }
+}
+const Text = definePrimitive(renderText, {
+  childInput: "text",
+  resolveStyle: (style, context) => ({
+    ...stripLayoutParticipation(style),
+    x: 0,
+    y: 0,
+    width: resolveOptionalLength(
+      style.width,
+      context.percentageBasis.width,
+      "width",
+      context
+    ),
+    height: resolveOptionalLength(
+      style.height,
+      context.percentageBasis.height,
+      "height",
+      context
+    )
+  }),
+  measure: ({ props, style, constraints, service }) => measureTextStyle(
+    materializeTextContent(props),
+    style,
+    constraints,
+    service
+  )
+});
+registerOpaqueStyleProperties(Text, [
+  "font",
+  "fill",
+  "stroke",
+  "cursor",
+  "fit",
+  "textBaseline",
+  "textAlign"
+]);
+function measureTextStyle(text, style, constraints, service) {
+  const context = {
+    component: "Text",
+    algorithm: "measurement",
+    constraints
+  };
+  const specifiedWidth = style.width === void 0 ? void 0 : resolveLength(style.width, constraints.maxWidth, "width", context);
+  const specifiedHeight = style.height === void 0 ? void 0 : resolveLength(style.height, constraints.maxHeight, "height", context);
+  const layoutWidth = specifiedWidth ?? (style.wrap && Number.isFinite(constraints.maxWidth) ? constraints.maxWidth : void 0);
+  const font = style.font ?? "13px sans-serif";
+  const layout = resolveTextLayout(
+    (value) => service.measureText(value, font),
+    text,
+    {
+      ...style,
+      x: 0,
+      y: 0,
+      width: layoutWidth,
+      height: specifiedHeight
+    }
+  );
+  return {
+    status: "measured",
+    size: {
+      width: specifiedWidth ?? (style.wrap && layoutWidth !== void 0 ? layoutWidth : layout.bounds?.width ?? 0),
+      height: specifiedHeight ?? (style.wrap ? layout.lines.length * (style.lineHeight ?? 13) : layout.bounds?.height ?? 0)
+    }
+  };
+}
+function materializeTextContent(props) {
+  const transaction = GLOBAL_STATE.renderTransaction;
+  const receiver = GLOBAL_STATE.primitiveReceiverToken;
+  if (!transaction || !receiver) {
+    return materializeTextChildren(props.children, "Text");
+  }
+  let receivers = materializedTextTransactions.get(transaction);
+  if (!receivers) {
+    receivers = /* @__PURE__ */ new WeakMap();
+    materializedTextTransactions.set(transaction, receivers);
+  }
+  const cached = receivers.get(receiver);
+  if (cached !== void 0) return cached;
+  const materialized = withReceiverInputProvision(
+    transaction,
+    receiver,
+    () => materializeTextChildren(props.children, "Text")
+  );
+  receivers.set(receiver, materialized);
+  return materialized;
+}
+export {
+  Text
+};
+//# sourceMappingURL=text.js.map

package/dist/lib/components/text.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/text.ts"],
+  "sourcesContent": ["import { resolveTexturePaint } from '../textures/texture-protocol.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { materializeTextChildren } from '../element/children.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport {\n  resolveOptionalLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type { ResolvedTextStyle, TextStyle } from '../style/types.js';\nimport {\n  CanvasMeasurementService,\n  MeasureResult,\n  RenderingContext2D,\n} from '../types.js';\nimport type { Constraints } from '../layout/types.js';\nimport type { PibblRenderTransaction, PibblTextInput } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport { resolveLength } from '../style/resolve-length.js';\nimport { wireCommonEvents } from '../util/wire-common-events.js';\nimport { pushClippingPath } from '../util/push-clipping-path.js';\nimport { resolveTextClipBounds, resolveTextLayout } from './text-layout.js';\nimport { withReceiverInputProvision } from '../signals/input-provision.js';\n\n/**\n * Authored inputs for Text, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link PibblTextInput}\n * @see {@link Text}\n */\nexport interface TextProps\n  extends\n    PibblEventHandlers,\n    PibblEventFocusOptions,\n    PibblEventParticipationOptions,\n    PibblPhysics2DPropExtension {\n  /** Descendant content or the callback that supplies it. See {@link PibblTextInput}. */\n  children?: PibblTextInput;\n}\n\nconst materializedTextTransactions = new WeakMap<\n  PibblRenderTransaction,\n  WeakMap<object, string>\n>();\n\nfunction renderText(\n  props: TextProps,\n  style: Readonly<ResolvedTextStyle>,\n  ctx: RenderingContext2D,\n) {\n  const text = materializeTextContent(props);\n  const {\n    font = '13px sans-serif',\n    textBaseline = 'top',\n    textAlign = 'left',\n    fill,\n    stroke,\n    strokeWidth = 0,\n    opacity,\n    cursor,\n  } = style;\n\n  if (opacity !== undefined) {\n    ctx.globalAlpha = ctx.globalAlpha * opacity;\n  }\n\n  ctx.font = font;\n  ctx.textBaseline = textBaseline;\n  ctx.textAlign = textAlign;\n\n  const layout = resolveTextLayout(\n    value => ctx.measureText(value),\n    text,\n    style,\n  );\n  const clipBounds =\n    layout.clipBounds ?? resolveTextClipBounds(style, ctx.canvas.height);\n\n  let releaseClip: (() => void) | undefined;\n  if (clipBounds) {\n    const clipPath = new Path2D();\n    clipPath.rect(\n      clipBounds.x,\n      clipBounds.y,\n      clipBounds.width,\n      clipBounds.height,\n    );\n    releaseClip = pushClippingPath(ctx, clipPath);\n  }\n\n  try {\n    const textBounds = props.pointerEvents === 'none' ? undefined : new Path2D();\n\n    for (const line of layout.lines) {\n      if (stroke && strokeWidth) {\n        ctx.strokeStyle = resolveTexturePaint(stroke, ctx, layout.bounds ?? line.bounds);\n        ctx.lineWidth = strokeWidth;\n        ctx.strokeText(line.text, line.x, line.y, line.squishWidth);\n      }\n\n      if (fill) {\n        ctx.fillStyle = resolveTexturePaint(fill, ctx, layout.bounds ?? line.bounds);\n        ctx.fillText(line.text, line.x, line.y, line.squishWidth);\n      }\n\n      if (textBounds) {\n        textBounds.moveTo(line.bounds.x, line.bounds.y);\n        textBounds.lineTo(line.bounds.x + line.bounds.width, line.bounds.y);\n        textBounds.lineTo(\n          line.bounds.x + line.bounds.width,\n          line.bounds.y + line.bounds.height,\n        );\n        textBounds.lineTo(line.bounds.x, line.bounds.y + line.bounds.height);\n        textBounds.closePath();\n      }\n    }\n\n    wireCommonEvents(\n      props,\n      textBounds,\n      true,\n      strokeWidth,\n      cursor,\n      layout.bounds,\n    );\n  } finally {\n    releaseClip?.();\n  }\n}\n\n/**\n * Draws Canvas text from textual children using the resolved font, wrapping, fitting, and paint\n * style.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link TextProps}\n * @see {@link TextStyle}\n */\nexport const Text = definePrimitive<\n  TextProps,\n  TextStyle,\n  TextStyle,\n  ResolvedTextStyle\n>(renderText, {\n  childInput: 'text',\n  resolveStyle: (style, context) => ({\n    ...stripLayoutParticipation(style),\n    x: 0,\n    y: 0,\n    width: resolveOptionalLength(\n      style.width,\n      context.percentageBasis.width,\n      'width',\n      context,\n    ),\n    height: resolveOptionalLength(\n      style.height,\n      context.percentageBasis.height,\n      'height',\n      context,\n    ),\n  }) as ResolvedTextStyle,\n  measure: ({ props, style, constraints, service }) =>\n    measureTextStyle(\n      materializeTextContent(props),\n      style,\n      constraints,\n      service,\n    ),\n});\nregisterOpaqueStyleProperties(Text, [\n  'font',\n  'fill',\n  'stroke',\n  'cursor',\n  'fit',\n  'textBaseline',\n  'textAlign',\n]);\n\nfunction measureTextStyle(\n  text: string,\n  style: Readonly<TextStyle>,\n  constraints: Readonly<Constraints>,\n  service: CanvasMeasurementService,\n): MeasureResult {\n  const context = {\n    component: 'Text',\n    algorithm: 'measurement',\n    constraints,\n  };\n  const specifiedWidth = style.width === undefined ? undefined :\n    resolveLength(style.width, constraints.maxWidth, 'width', context);\n  const specifiedHeight = style.height === undefined ? undefined :\n    resolveLength(style.height, constraints.maxHeight, 'height', context);\n  const layoutWidth = specifiedWidth ?? (\n    style.wrap && Number.isFinite(constraints.maxWidth) ?\n      constraints.maxWidth :\n      undefined\n  );\n  const font = style.font ?? '13px sans-serif';\n  const layout = resolveTextLayout(\n    value => service.measureText(value, font),\n    text,\n    {\n      ...style,\n      x: 0,\n      y: 0,\n      width: layoutWidth,\n      height: specifiedHeight,\n    },\n  );\n  return {\n    status: 'measured',\n    size: {\n      width: specifiedWidth ?? (style.wrap && layoutWidth !== undefined ?\n        layoutWidth :\n        layout.bounds?.width ?? 0),\n      height: specifiedHeight ?? (style.wrap ?\n        layout.lines.length * (style.lineHeight ?? 13) :\n        layout.bounds?.height ?? 0),\n    },\n  };\n}\n\nfunction materializeTextContent(props: Readonly<TextProps>): string {\n  const transaction = GLOBAL_STATE.renderTransaction;\n  const receiver = GLOBAL_STATE.primitiveReceiverToken;\n  if (!transaction || !receiver) {\n    return materializeTextChildren(props.children, 'Text');\n  }\n\n  let receivers = materializedTextTransactions.get(transaction);\n  if (!receivers) {\n    receivers = new WeakMap();\n    materializedTextTransactions.set(transaction, receivers);\n  }\n  const cached = receivers.get(receiver);\n  if (cached !== undefined) return cached;\n  const materialized = withReceiverInputProvision(\n    transaction,\n    receiver,\n    () => materializeTextChildren(props.children, 'Text'),\n  );\n  receivers.set(receiver, materialized);\n  return materialized;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/lib/components/vertical-line.d.ts

@@ -0,0 +1,57 @@
+import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from '../events/types.js';
+import { PixelGridAlignment, SystemStyle } from '../types.js';
+import type { PibblPhysics2DPropExtension } from '../types.js';
+import type { BoxStyle, LayoutItemStyle, Length } from '../style/types.js';
+import { type LineStyle } from './line.js';
+/**
+ * Authored inputs for VerticalLine, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link VerticalLine}
+ */
+export interface VerticalLineProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+}
+/**
+ * Supported geometry and presentation properties for VerticalLine.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link LineStyle}
+ * @see {@link Length}
+ * @see {@link PixelGridAlignment}
+ * @see {@link VerticalLine}
+ */
+export interface VerticalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'> {
+    /**
+     * Horizontal coordinate or displacement in the containing coordinate system. See {@link Length}
+     * .
+     */
+    x: Exclude<Length, 'auto'>;
+    /** Vertical coordinate of the first endpoint. See {@link Length}. */
+    y1?: Exclude<Length, 'auto'>;
+    /** Vertical coordinate of the second endpoint. See {@link Length}. */
+    y2?: Exclude<Length, 'auto'>;
+    /**
+     * Pixel-grid alignment policy applied to the resolved geometry. See {@link PixelGridAlignment}.
+     */
+    alignToPixelGrid?: PixelGridAlignment;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link VerticalLineStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * Describes a vertical-line primitive for JSX or createElement authoring.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link VerticalLineProps}
+ * @see {@link VerticalLineStyle}
+ */
+export declare const VerticalLine: import("@pibbl/core").PibblPrimitiveComponent<VerticalLineProps, import("@pibbl/core").PrimitiveInput<VerticalLineProps, VerticalLineStyle>>;

package/dist/lib/components/vertical-line.js

@@ -0,0 +1,71 @@
+import { definePrimitive } from "../define-primitive.js";
+import { adjustForPixelGrid } from "../util/pixel-grid-adjustments.js";
+import {
+  resolveLocalOffset,
+  resolveRequiredLength,
+  stripLayoutParticipation
+} from "../style/resolve-built-in.js";
+import { registerOpaqueStyleProperties } from "../style/resolve-dispatch.js";
+import { renderLine } from "./line.js";
+function renderVerticalLine(props, style, ctx) {
+  const {
+    x: initialX,
+    y1 = 0,
+    y2 = ctx.canvas.height,
+    alignToPixelGrid = "none",
+    stroke,
+    strokeWidth,
+    opacity,
+    cursor,
+    lineInteractionWidth
+  } = style;
+  const x = adjustForPixelGrid(
+    initialX,
+    strokeWidth,
+    alignToPixelGrid
+  );
+  const coords = [
+    [x, y1],
+    [x, y2]
+  ];
+  return renderLine(
+    props,
+    {
+      coords,
+      stroke,
+      strokeWidth,
+      opacity,
+      cursor,
+      lineInteractionWidth
+    },
+    ctx
+  );
+}
+const VerticalLine = definePrimitive(renderVerticalLine, {
+  resolveStyle: (style, context) => ({
+    ...stripLayoutParticipation(style),
+    x: resolveRequiredLength(
+      style.x,
+      context.percentageBasis.width,
+      "x",
+      context
+    ),
+    y1: resolveLocalOffset(
+      style.y1,
+      context.percentageBasis.height,
+      "y1",
+      context
+    ),
+    y2: resolveRequiredLength(
+      style.y2 ?? context.allocation.height,
+      context.percentageBasis.height,
+      "y2",
+      context
+    )
+  })
+});
+registerOpaqueStyleProperties(VerticalLine, ["stroke", "cursor"]);
+export {
+  VerticalLine
+};
+//# sourceMappingURL=vertical-line.js.map

package/dist/lib/components/vertical-line.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/vertical-line.ts"],
+  "sourcesContent": ["import { definePrimitive } from '../define-primitive.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport {\n  PixelGridAlignment,\n  RenderingContext2D,\n  SystemStyle,\n} from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport { adjustForPixelGrid } from '../util/pixel-grid-adjustments.js';\nimport {\n  resolveLocalOffset,\n  resolveRequiredLength,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  Length,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\nimport { renderLine, type LineStyle } from './line.js';\n\n/**\n * Authored inputs for VerticalLine, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link VerticalLine}\n */\nexport interface VerticalLineProps\n  extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\n/**\n * Supported geometry and presentation properties for VerticalLine.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link LineStyle}\n * @see {@link Length}\n * @see {@link PixelGridAlignment}\n * @see {@link VerticalLine}\n */\nexport interface VerticalLineStyle\n  extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'> {\n  /**\n   * Horizontal coordinate or displacement in the containing coordinate system. See {@link Length}\n   * .\n   */\n  x: Exclude<Length, 'auto'>;\n  /** Vertical coordinate of the first endpoint. See {@link Length}. */\n  y1?: Exclude<Length, 'auto'>;\n  /** Vertical coordinate of the second endpoint. See {@link Length}. */\n  y2?: Exclude<Length, 'auto'>;\n  /**\n   * Pixel-grid alignment policy applied to the resolved geometry. See {@link PixelGridAlignment}.\n   */\n  alignToPixelGrid?: PixelGridAlignment;\n  /**\n   * Width used for line hit testing independently of the visible stroke width. See\n   * {@link VerticalLineStyle}.\n   */\n  lineInteractionWidth?: number;\n}\n\ntype ResolvedVerticalLineStyle = ResolvedDrawingStyle<VerticalLineStyle> & {\n  x: number;\n  y1: number;\n  y2: number;\n};\n\nfunction renderVerticalLine(\n  props: VerticalLineProps,\n  style: Readonly<ResolvedVerticalLineStyle>,\n  ctx: RenderingContext2D,\n) {\n  const {\n    x: initialX,\n    y1 = 0,\n    y2 = ctx.canvas.height,\n    alignToPixelGrid = 'none',\n    stroke,\n    strokeWidth,\n    opacity,\n    cursor,\n    lineInteractionWidth,\n  } = style;\n  const x = adjustForPixelGrid(\n    initialX,\n    strokeWidth,\n    alignToPixelGrid,\n  );\n  const coords: [number, number][] = [\n    [x, y1],\n    [x, y2],\n  ];\n\n  return renderLine(\n    props,\n    {\n      coords,\n      stroke,\n      strokeWidth,\n      opacity,\n      cursor,\n      lineInteractionWidth,\n    },\n    ctx,\n  );\n}\n\n/**\n * Describes a vertical-line primitive for JSX or createElement authoring.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link VerticalLineProps}\n * @see {@link VerticalLineStyle}\n */\nexport const VerticalLine = definePrimitive<\n  VerticalLineProps,\n  VerticalLineStyle,\n  VerticalLineStyle,\n  ResolvedVerticalLineStyle\n>(renderVerticalLine, {\n  resolveStyle: (style, context) => ({\n    ...stripLayoutParticipation(style),\n    x: resolveRequiredLength(\n      style.x,\n      context.percentageBasis.width,\n      'x',\n      context,\n    ),\n    y1: resolveLocalOffset(\n      style.y1,\n      context.percentageBasis.height,\n      'y1',\n      context,\n    ),\n    y2: resolveRequiredLength(\n      style.y2 ?? context.allocation.height,\n      context.percentageBasis.height,\n      'y2',\n      context,\n    ),\n  }) as ResolvedVerticalLineStyle,\n});\nregisterOpaqueStyleProperties(VerticalLine, ['stroke', 'cursor']);\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAYhC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAO9C,SAAS,kBAAkC;AAoD3C,SAAS,mBACP,OACA,OACA,KACA;AACA,QAAM;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,KAAK,IAAI,OAAO;AAAA,IAChB,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,IAAI;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,SAA6B;AAAA,IACjC,CAAC,GAAG,EAAE;AAAA,IACN,CAAC,GAAG,EAAE;AAAA,EACR;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;AAYO,MAAM,eAAe,gBAK1B,oBAAoB;AAAA,EACpB,cAAc,CAAC,OAAO,aAAa;AAAA,IACjC,GAAG,yBAAyB,KAAK;AAAA,IACjC,GAAG;AAAA,MACD,MAAM;AAAA,MACN,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,IACA,IAAI;AAAA,MACF,MAAM,MAAM,QAAQ,WAAW;AAAA,MAC/B,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF,CAAC;AACD,8BAA8B,cAAc,CAAC,UAAU,QAAQ,CAAC;",
+  "names": []
+}

package/dist/lib/components/wedge.d.ts

@@ -0,0 +1,55 @@
+import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from "../events/types.js";
+import type { BoxStyle, CursorStyle, LayoutItemStyle, Length, PaintStyle } from "../style/types.js";
+import type { SystemStyle } from "../types.js";
+import type { PibblPhysics2DPropExtension } from "../types.js";
+/**
+ * Authored inputs for Wedge, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link Wedge}
+ */
+export interface WedgeProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+}
+/**
+ * Supported geometry and presentation properties for Wedge.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link Length}
+ * @see {@link Wedge}
+ */
+export interface WedgeStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /** Radius in the coordinate system of this geometry or effect. See {@link Length}. */
+    radius: Exclude<Length, "auto">;
+    /** Angle at which the arc or slice begins. See {@link WedgeStyle}. */
+    startAngle: number;
+    /** Angle at which the arc or slice ends. See {@link WedgeStyle}. */
+    endAngle: number;
+    /** Horizontal coordinate of the center. See {@link Length}. */
+    cx?: Exclude<Length, "auto">;
+    /** Vertical coordinate of the center. See {@link Length}. */
+    cy?: Exclude<Length, "auto">;
+    /** Whether the arc follows the counterclockwise direction. See {@link WedgeStyle}. */
+    counterclockwise?: boolean;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link WedgeStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * Describes a center-closed circular wedge primitive for JSX or createElement authoring.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link WedgeProps}
+ * @see {@link WedgeStyle}
+ */
+export declare const Wedge: import("@pibbl/core").PibblPrimitiveComponent<WedgeProps, import("@pibbl/core").PrimitiveInput<WedgeProps, WedgeStyle>>;