@pibbl/core 0.0.1

package/dist/lib/components/circle.js

@@ -0,0 +1,46 @@
+import { definePrimitive } from "../define-primitive.js";
+import {
+  resolveLocalOffset,
+  stripLayoutParticipation
+} from "../style/resolve-built-in.js";
+import { registerOpaqueStyleProperties } from "../style/resolve-dispatch.js";
+import {
+  circularPercentageBasis,
+  resolveNonnegativeShapeLength
+} from "./shape-style.js";
+import { renderPath } from "./path.js";
+import { createCirclePath } from "../geometry/circle.js";
+function renderCircle(props, style, ctx) {
+  const { cx, cy, radius, ...pathStyle } = style;
+  const path = createCirclePath({ cx, cy, radius });
+  return renderPath({
+    ...props,
+    keyboardNavigationBounds: props.keyboardNavigationBounds ?? {
+      x: cx - radius,
+      y: cy - radius,
+      width: radius * 2,
+      height: radius * 2
+    }
+  }, {
+    ...pathStyle,
+    d: path
+  }, ctx);
+}
+const Circle = definePrimitive(renderCircle, {
+  resolveStyle: (style, context) => ({
+    ...stripLayoutParticipation(style),
+    cx: resolveLocalOffset(style.cx, context.percentageBasis.width, "cx", context),
+    cy: resolveLocalOffset(style.cy, context.percentageBasis.height, "cy", context),
+    radius: resolveNonnegativeShapeLength(
+      style.radius,
+      circularPercentageBasis(context),
+      "radius",
+      context
+    )
+  })
+});
+registerOpaqueStyleProperties(Circle, ["fill", "stroke", "cursor"]);
+export {
+  Circle
+};
+//# sourceMappingURL=circle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/circle.ts"],
+  "sourcesContent": ["import { definePrimitive } from '../define-primitive.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport type { RenderingContext2D, SystemStyle } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport {\n  resolveLocalOffset,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type {\n  BoxStyle,\n  CursorStyle,\n  LayoutItemStyle,\n  Length,\n  PaintStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\nimport {\n  circularPercentageBasis,\n  resolveNonnegativeShapeLength,\n} from './shape-style.js';\nimport { renderPath } from './path.js';\nimport { createCirclePath } from '../geometry/circle.js';\n\n/**\n * Authored inputs for Circle, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link Circle}\n */\nexport interface CircleProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\n/**\n * Supported geometry and presentation properties for Circle.\n *\n * @see {@link SystemStyle}\n * @see {@link PaintStyle}\n * @see {@link CursorStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Length}\n * @see {@link Circle}\n */\nexport interface CircleStyle\n  extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {\n  /** Radius in the coordinate system of this geometry or effect. See {@link Length}. */\n  radius: Exclude<Length, 'auto'>;\n  /** Horizontal coordinate of the center. See {@link Length}. */\n  cx?: Exclude<Length, 'auto'>;\n  /** Vertical coordinate of the center. See {@link Length}. */\n  cy?: Exclude<Length, 'auto'>;\n  /**\n   * Width used for line hit testing independently of the visible stroke width. See\n   * {@link CircleStyle}.\n   */\n  lineInteractionWidth?: number;\n}\n\ntype ResolvedCircleStyle = ResolvedDrawingStyle<CircleStyle> & {\n  radius: number;\n  cx: number;\n  cy: number;\n};\n\nfunction renderCircle(\n  props: CircleProps,\n  style: Readonly<ResolvedCircleStyle>,\n  ctx: RenderingContext2D,\n) {\n  const { cx, cy, radius, ...pathStyle } = style;\n  const path = createCirclePath({ cx, cy, radius });\n\n  return renderPath({\n    ...props,\n    keyboardNavigationBounds: props.keyboardNavigationBounds ?? {\n      x: cx - radius,\n      y: cy - radius,\n      width: radius * 2,\n      height: radius * 2,\n    },\n  }, {\n    ...pathStyle,\n    d: path,\n  }, ctx);\n}\n\n/**\n * Describes a circle 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 CircleProps}\n * @see {@link CircleStyle}\n */\nexport const Circle = definePrimitive<\n  CircleProps,\n  CircleStyle,\n  CircleStyle,\n  ResolvedCircleStyle\n>(renderCircle, {\n  resolveStyle: (style, context) => ({\n    ...stripLayoutParticipation(style),\n    cx: resolveLocalOffset(style.cx, context.percentageBasis.width, 'cx', context),\n    cy: resolveLocalOffset(style.cy, context.percentageBasis.height, 'cy', context),\n    radius: resolveNonnegativeShapeLength(\n      style.radius,\n      circularPercentageBasis(context),\n      'radius',\n      context,\n    ),\n  }) as ResolvedCircleStyle,\n});\nregisterOpaqueStyleProperties(Circle, ['fill', 'stroke', 'cursor']);\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAQhC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAS9C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AA4CjC,SAAS,aACP,OACA,OACA,KACA;AACA,QAAM,EAAE,IAAI,IAAI,QAAQ,GAAG,UAAU,IAAI;AACzC,QAAM,OAAO,iBAAiB,EAAE,IAAI,IAAI,OAAO,CAAC;AAEhD,SAAO,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,0BAA0B,MAAM,4BAA4B;AAAA,MAC1D,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,OAAO,SAAS;AAAA,MAChB,QAAQ,SAAS;AAAA,IACnB;AAAA,EACF,GAAG;AAAA,IACD,GAAG;AAAA,IACH,GAAG;AAAA,EACL,GAAG,GAAG;AACR;AAYO,MAAM,SAAS,gBAKpB,cAAc;AAAA,EACd,cAAc,CAAC,OAAO,aAAa;AAAA,IACjC,GAAG,yBAAyB,KAAK;AAAA,IACjC,IAAI,mBAAmB,MAAM,IAAI,QAAQ,gBAAgB,OAAO,MAAM,OAAO;AAAA,IAC7E,IAAI,mBAAmB,MAAM,IAAI,QAAQ,gBAAgB,QAAQ,MAAM,OAAO;AAAA,IAC9E,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,wBAAwB,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF,CAAC;AACD,8BAA8B,QAAQ,CAAC,QAAQ,UAAU,QAAQ,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,43 @@
+import { PathGeometry } from '../geometry/path-geometry.js';
+import { PibblNodeInput, SystemStyle } from '../types.js';
+import { type PibblStructuralEventProps } from './structural-events.js';
+import type { BoxStyle, LayoutItemStyle } from '../style/types.js';
+/**
+ * Authored inputs for Clip, including the declared data and presentation options.
+ *
+ * @see {@link PibblNodeInput}
+ * @see {@link Clip}
+ */
+export interface ClipProps extends PibblStructuralEventProps {
+    /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
+    children: PibblNodeInput;
+}
+/**
+ * Supported geometry and presentation properties for Clip.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link PathGeometry}
+ * @see {@link Clip}
+ */
+export interface ClipStyle extends SystemStyle, BoxStyle, LayoutItemStyle {
+    /**
+     * Geometry to draw or clip, supplied in the declared path representation. See
+     * {@link PathGeometry}.
+     */
+    d: Path2D | PathGeometry;
+    /** Canvas winding rule used to determine the path interior. See {@link ClipStyle}. */
+    fillRule?: CanvasFillRule;
+}
+/**
+ * Describes a clipping container 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 ClipProps}
+ * @see {@link ClipStyle}
+ */
+export declare const Clip: import("@pibbl/core").PibblPrimitiveComponent<ClipProps, import("@pibbl/core").PrimitiveInput<ClipProps, ClipStyle>>;

package/dist/lib/components/clip.js

@@ -0,0 +1,24 @@
+import { portablePath } from "../html/portable-clips.js";
+import { definePrimitive } from "../define-primitive.js";
+import { resolvePath } from "../geometry/resolve-path.js";
+import { setPrimitivePresentation } from "../primitive-presentation.js";
+import { stripLayoutParticipation } from "../style/resolve-built-in.js";
+import {
+  wireStructuralEvents
+} from "./structural-events.js";
+function renderClip(props) {
+  wireStructuralEvents(props);
+  return props.children;
+}
+const Clip = definePrimitive(renderClip, {
+  childInput: "structural",
+  resolveStyle: (style) => stripLayoutParticipation(style)
+});
+setPrimitivePresentation(Clip, (style) => {
+  const { d, fillRule = "nonzero" } = style;
+  return { clip: { path: resolvePath(d), fillRule, svgPath: portablePath(d) } };
+});
+export {
+  Clip
+};
+//# sourceMappingURL=clip.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/clip.ts"],
+  "sourcesContent": ["import { portablePath } from '../html/portable-clips.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { PathGeometry } from '../geometry/path-geometry.js';\nimport { resolvePath } from '../geometry/resolve-path.js';\nimport { PibblNodeInput, SystemStyle } from '../types.js';\nimport { setPrimitivePresentation } from '../primitive-presentation.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\n\n/**\n * Authored inputs for Clip, including the declared data and presentation options.\n *\n * @see {@link PibblNodeInput}\n * @see {@link Clip}\n */\nexport interface ClipProps extends PibblStructuralEventProps {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Supported geometry and presentation properties for Clip.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link PathGeometry}\n * @see {@link Clip}\n */\nexport interface ClipStyle extends SystemStyle, BoxStyle, LayoutItemStyle {\n  /**\n   * Geometry to draw or clip, supplied in the declared path representation. See\n   * {@link PathGeometry}.\n   */\n  d: Path2D | PathGeometry;\n  /** Canvas winding rule used to determine the path interior. See {@link ClipStyle}. */\n  fillRule?: CanvasFillRule;\n}\n\ntype ResolvedClipStyle = ResolvedDrawingStyle<ClipStyle>;\n\nfunction renderClip(\n  props: ClipProps,\n) {\n  wireStructuralEvents(props);\n  return props.children;\n}\n\n/**\n * Describes a clipping container 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 ClipProps}\n * @see {@link ClipStyle}\n */\nexport const Clip = definePrimitive<\n  ClipProps,\n  ClipStyle,\n  ClipStyle,\n  ResolvedClipStyle\n>(renderClip, {\n  childInput: 'structural',\n  resolveStyle: style => stripLayoutParticipation(style) as ResolvedClipStyle,\n});\n\nsetPrimitivePresentation<ResolvedClipStyle>(Clip, style => {\n  const { d, fillRule = 'nonzero' } = style;\n  return { clip: { path: resolvePath(d), fillRule, svgPath: portablePath(d) } };\n});\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAE5B,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC;AAAA,EAEE;AAAA,OACK;AAuCP,SAAS,WACP,OACA;AACA,uBAAqB,KAAK;AAC1B,SAAO,MAAM;AACf;AAYO,MAAM,OAAO,gBAKlB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc,WAAS,yBAAyB,KAAK;AACvD,CAAC;AAED,yBAA4C,MAAM,WAAS;AACzD,QAAM,EAAE,GAAG,WAAW,UAAU,IAAI;AACpC,SAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC,GAAG,UAAU,SAAS,aAAa,CAAC,EAAE,EAAE;AAC9E,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from '../events/types.js';
+import type { SystemStyle } from '../types.js';
+import type { PibblPhysics2DPropExtension } from '../types.js';
+import type { BoxStyle, CursorStyle, LayoutItemStyle, Length, PaintStyle } from '../style/types.js';
+/**
+ * Authored inputs for Ellipse, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link Ellipse}
+ */
+export interface EllipseProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+}
+/**
+ * Supported geometry and presentation properties for Ellipse.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PaintStyle}
+ * @see {@link CursorStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link Length}
+ * @see {@link Ellipse}
+ */
+export interface EllipseStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {
+    /** Horizontal ellipse radius. See {@link Length}. */
+    radiusX: Exclude<Length, 'auto'>;
+    /** Vertical ellipse radius. See {@link Length}. */
+    radiusY: Exclude<Length, 'auto'>;
+    /** Horizontal coordinate of the center. See {@link Length}. */
+    cx?: Exclude<Length, 'auto'>;
+    /** Vertical coordinate of the center. See {@link Length}. */
+    cy?: Exclude<Length, 'auto'>;
+    /** Rotation applied to the containing geometry. See {@link EllipseStyle}. */
+    rotation?: number;
+    /**
+     * Width used for line hit testing independently of the visible stroke width. See
+     * {@link EllipseStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * Describes an ellipse 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 EllipseProps}
+ * @see {@link EllipseStyle}
+ */
+export declare const Ellipse: import("@pibbl/core").PibblPrimitiveComponent<EllipseProps, import("@pibbl/core").PrimitiveInput<EllipseProps, EllipseStyle>>;

package/dist/lib/components/ellipse.js

@@ -0,0 +1,59 @@
+import { definePrimitive } from "../define-primitive.js";
+import {
+  resolveLocalOffset,
+  stripLayoutParticipation
+} from "../style/resolve-built-in.js";
+import { registerOpaqueStyleProperties } from "../style/resolve-dispatch.js";
+import {
+  resolveFiniteShapeNumber,
+  resolveNonnegativeShapeLength
+} from "./shape-style.js";
+import { renderPath } from "./path.js";
+import { createEllipsePath } from "../geometry/ellipse.js";
+function renderEllipse(props, style, ctx) {
+  const { cx, cy, radiusX, radiusY, rotation, ...pathStyle } = style;
+  const path = createEllipsePath({ cx, cy, radiusX, radiusY, rotation });
+  const halfWidth = Math.sqrt(
+    (radiusX * Math.cos(rotation)) ** 2 + (radiusY * Math.sin(rotation)) ** 2
+  );
+  const halfHeight = Math.sqrt(
+    (radiusX * Math.sin(rotation)) ** 2 + (radiusY * Math.cos(rotation)) ** 2
+  );
+  return renderPath({
+    ...props,
+    keyboardNavigationBounds: props.keyboardNavigationBounds ?? {
+      x: cx - halfWidth,
+      y: cy - halfHeight,
+      width: halfWidth * 2,
+      height: halfHeight * 2
+    }
+  }, {
+    ...pathStyle,
+    d: path
+  }, ctx);
+}
+const Ellipse = definePrimitive(renderEllipse, {
+  resolveStyle: (style, context) => ({
+    ...stripLayoutParticipation(style),
+    cx: resolveLocalOffset(style.cx, context.percentageBasis.width, "cx", context),
+    cy: resolveLocalOffset(style.cy, context.percentageBasis.height, "cy", context),
+    radiusX: resolveNonnegativeShapeLength(
+      style.radiusX,
+      context.percentageBasis.width,
+      "radiusX",
+      context
+    ),
+    radiusY: resolveNonnegativeShapeLength(
+      style.radiusY,
+      context.percentageBasis.height,
+      "radiusY",
+      context
+    ),
+    rotation: resolveFiniteShapeNumber(style.rotation ?? 0, "rotation", context)
+  })
+});
+registerOpaqueStyleProperties(Ellipse, ["fill", "stroke", "cursor"]);
+export {
+  Ellipse
+};
+//# sourceMappingURL=ellipse.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/ellipse.ts"],
+  "sourcesContent": ["import { definePrimitive } from '../define-primitive.js';\nimport type {\n  PibblEventFocusOptions,\n  PibblEventHandlers,\n  PibblEventParticipationOptions,\n} from '../events/types.js';\nimport type { RenderingContext2D, SystemStyle } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport {\n  resolveLocalOffset,\n  stripLayoutParticipation,\n} from '../style/resolve-built-in.js';\nimport { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';\nimport type {\n  BoxStyle,\n  CursorStyle,\n  LayoutItemStyle,\n  Length,\n  PaintStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\nimport {\n  resolveFiniteShapeNumber,\n  resolveNonnegativeShapeLength,\n} from './shape-style.js';\nimport { renderPath } from './path.js';\nimport { createEllipsePath } from '../geometry/ellipse.js';\n\n/**\n * Authored inputs for Ellipse, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link Ellipse}\n */\nexport interface EllipseProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\n/**\n * Supported geometry and presentation properties for Ellipse.\n *\n * @see {@link SystemStyle}\n * @see {@link PaintStyle}\n * @see {@link CursorStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Length}\n * @see {@link Ellipse}\n */\nexport interface EllipseStyle\n  extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle {\n  /** Horizontal ellipse radius. See {@link Length}. */\n  radiusX: Exclude<Length, 'auto'>;\n  /** Vertical ellipse radius. See {@link Length}. */\n  radiusY: Exclude<Length, 'auto'>;\n  /** Horizontal coordinate of the center. See {@link Length}. */\n  cx?: Exclude<Length, 'auto'>;\n  /** Vertical coordinate of the center. See {@link Length}. */\n  cy?: Exclude<Length, 'auto'>;\n  /** Rotation applied to the containing geometry. See {@link EllipseStyle}. */\n  rotation?: number;\n  /**\n   * Width used for line hit testing independently of the visible stroke width. See\n   * {@link EllipseStyle}.\n   */\n  lineInteractionWidth?: number;\n}\n\ntype ResolvedEllipseStyle = ResolvedDrawingStyle<EllipseStyle> & {\n  radiusX: number;\n  radiusY: number;\n  cx: number;\n  cy: number;\n  rotation: number;\n};\n\nfunction renderEllipse(\n  props: EllipseProps,\n  style: Readonly<ResolvedEllipseStyle>,\n  ctx: RenderingContext2D,\n) {\n  const { cx, cy, radiusX, radiusY, rotation, ...pathStyle } = style;\n  const path = createEllipsePath({ cx, cy, radiusX, radiusY, rotation });\n  const halfWidth = Math.sqrt(\n    (radiusX * Math.cos(rotation)) ** 2 +\n      (radiusY * Math.sin(rotation)) ** 2,\n  );\n  const halfHeight = Math.sqrt(\n    (radiusX * Math.sin(rotation)) ** 2 +\n      (radiusY * Math.cos(rotation)) ** 2,\n  );\n\n  return renderPath({\n    ...props,\n    keyboardNavigationBounds: props.keyboardNavigationBounds ?? {\n      x: cx - halfWidth,\n      y: cy - halfHeight,\n      width: halfWidth * 2,\n      height: halfHeight * 2,\n    },\n  }, {\n    ...pathStyle,\n    d: path,\n  }, ctx);\n}\n\n/**\n * Describes an ellipse 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 EllipseProps}\n * @see {@link EllipseStyle}\n */\nexport const Ellipse = definePrimitive<\n  EllipseProps,\n  EllipseStyle,\n  EllipseStyle,\n  ResolvedEllipseStyle\n>(renderEllipse, {\n  resolveStyle: (style, context) => ({\n    ...stripLayoutParticipation(style),\n    cx: resolveLocalOffset(style.cx, context.percentageBasis.width, 'cx', context),\n    cy: resolveLocalOffset(style.cy, context.percentageBasis.height, 'cy', context),\n    radiusX: resolveNonnegativeShapeLength(\n      style.radiusX,\n      context.percentageBasis.width,\n      'radiusX',\n      context,\n    ),\n    radiusY: resolveNonnegativeShapeLength(\n      style.radiusY,\n      context.percentageBasis.height,\n      'radiusY',\n      context,\n    ),\n    rotation: resolveFiniteShapeNumber(style.rotation ?? 0, 'rotation', context),\n  }) as ResolvedEllipseStyle,\n});\nregisterOpaqueStyleProperties(Ellipse, ['fill', 'stroke', 'cursor']);\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAQhC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAS9C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAkDlC,SAAS,cACP,OACA,OACA,KACA;AACA,QAAM,EAAE,IAAI,IAAI,SAAS,SAAS,UAAU,GAAG,UAAU,IAAI;AAC7D,QAAM,OAAO,kBAAkB,EAAE,IAAI,IAAI,SAAS,SAAS,SAAS,CAAC;AACrE,QAAM,YAAY,KAAK;AAAA,KACpB,UAAU,KAAK,IAAI,QAAQ,MAAM,KAC/B,UAAU,KAAK,IAAI,QAAQ,MAAM;AAAA,EACtC;AACA,QAAM,aAAa,KAAK;AAAA,KACrB,UAAU,KAAK,IAAI,QAAQ,MAAM,KAC/B,UAAU,KAAK,IAAI,QAAQ,MAAM;AAAA,EACtC;AAEA,SAAO,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,0BAA0B,MAAM,4BAA4B;AAAA,MAC1D,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,OAAO,YAAY;AAAA,MACnB,QAAQ,aAAa;AAAA,IACvB;AAAA,EACF,GAAG;AAAA,IACD,GAAG;AAAA,IACH,GAAG;AAAA,EACL,GAAG,GAAG;AACR;AAYO,MAAM,UAAU,gBAKrB,eAAe;AAAA,EACf,cAAc,CAAC,OAAO,aAAa;AAAA,IACjC,GAAG,yBAAyB,KAAK;AAAA,IACjC,IAAI,mBAAmB,MAAM,IAAI,QAAQ,gBAAgB,OAAO,MAAM,OAAO;AAAA,IAC7E,IAAI,mBAAmB,MAAM,IAAI,QAAQ,gBAAgB,QAAQ,MAAM,OAAO;AAAA,IAC9E,SAAS;AAAA,MACP,MAAM;AAAA,MACN,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,QAAQ,gBAAgB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,IACA,UAAU,yBAAyB,MAAM,YAAY,GAAG,YAAY,OAAO;AAAA,EAC7E;AACF,CAAC;AACD,8BAA8B,SAAS,CAAC,QAAQ,UAAU,QAAQ,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,56 @@
+import type { PibblDragHandleStyle } from "../manipulation/handles.js";
+import type { HtmlBoxStyle } from "../html/types.js";
+import { PibblNodeInput, SystemStyle } from '../types.js';
+import type { PibblPhysics2DPropExtension } from '../types.js';
+import { type PibblStructuralEventProps } from './structural-events.js';
+import type { BoxStyle, LayoutItemStyle } from '../style/types.js';
+/**
+ * Authored inputs for Group, including the declared data and presentation options.
+ *
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link PibblNodeInput}
+ * @see {@link Group}
+ */
+export interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension {
+    /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
+    children: PibblNodeInput;
+}
+/**
+ * Transforms, layout participation, and shared style properties for Group.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link Group}
+ * @see {@link PibblDragHandleStyle}
+ * @see {@link HtmlBoxStyle}
+ */
+export interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle {
+    /** Horizontal scale factor. See {@link GStyle}. */
+    scaleX?: number;
+    /** Vertical scale factor. See {@link GStyle}. */
+    scaleY?: number;
+    /** Clockwise rotation in degrees. */
+    rotationDegrees?: number;
+    /** Point around which the rotation is applied. See {@link GStyle}. */
+    rotationOrigin?: [number, number];
+    /** Horizontal translation in the current logical coordinate system. See {@link GStyle}. */
+    translateX?: number;
+    /** Vertical translation in the current logical coordinate system. See {@link GStyle}. */
+    translateY?: number;
+    /** Horizontal skew angle in degrees. */
+    skewX?: number;
+    /** Vertical skew angle in degrees. */
+    skewY?: number;
+}
+/**
+ * Describes a transformation group 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 GroupProps}
+ * @see {@link GStyle}
+ */
+export declare const Group: import("@pibbl/core").PibblPrimitiveComponent<GroupProps, import("@pibbl/core").PrimitiveInput<GroupProps, GStyle>>;

package/dist/lib/components/g.js

@@ -0,0 +1,24 @@
+import { definePrimitive } from "../define-primitive.js";
+import {
+  createGroupTransform,
+  setPrimitivePresentation
+} from "../primitive-presentation.js";
+import { stripLayoutParticipation } from "../style/resolve-built-in.js";
+import {
+  wireStructuralEvents
+} from "./structural-events.js";
+function renderGroup(props) {
+  wireStructuralEvents(props);
+  return props.children;
+}
+const Group = definePrimitive(renderGroup, {
+  childInput: "structural",
+  resolveStyle: (style) => stripLayoutParticipation(style)
+});
+setPrimitivePresentation(Group, (style) => ({
+  transform: createGroupTransform(style)
+}));
+export {
+  Group
+};
+//# sourceMappingURL=g.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/g.ts"],
+  "sourcesContent": ["import type { PibblDragHandleStyle } from '../manipulation/handles.js';\nimport type { HtmlBoxStyle } from '../html/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { PibblNodeInput, SystemStyle } from '../types.js';\nimport type { PibblPhysics2DPropExtension } from '../types.js';\nimport {\n  createGroupTransform,\n  setPrimitivePresentation,\n} from '../primitive-presentation.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\nimport {\n  type PibblStructuralEventProps,\n  wireStructuralEvents,\n} from './structural-events.js';\nimport type {\n  BoxStyle,\n  LayoutItemStyle,\n  ResolvedDrawingStyle,\n} from '../style/types.js';\n\n/**\n * Authored inputs for Group, including the declared data and presentation options.\n *\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link PibblNodeInput}\n * @see {@link Group}\n */\nexport interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension {\n  /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */\n  children: PibblNodeInput;\n}\n\n/**\n * Transforms, layout participation, and shared style properties for Group.\n *\n * @see {@link SystemStyle}\n * @see {@link BoxStyle}\n * @see {@link LayoutItemStyle}\n * @see {@link Group}\n * @see {@link PibblDragHandleStyle}\n * @see {@link HtmlBoxStyle}\n */\nexport interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle {\n  /** Horizontal scale factor. See {@link GStyle}. */\n  scaleX?: number;\n  /** Vertical scale factor. See {@link GStyle}. */\n  scaleY?: number;\n  /** Clockwise rotation in degrees. */\n  rotationDegrees?: number;\n  /** Point around which the rotation is applied. See {@link GStyle}. */\n  rotationOrigin?: [number, number];\n  /** Horizontal translation in the current logical coordinate system. See {@link GStyle}. */\n  translateX?: number;\n  /** Vertical translation in the current logical coordinate system. See {@link GStyle}. */\n  translateY?: number;\n  /** Horizontal skew angle in degrees. */\n  skewX?: number;\n  /** Vertical skew angle in degrees. */\n  skewY?: number;\n}\n\ntype ResolvedGStyle = ResolvedDrawingStyle<GStyle>;\n\nfunction renderGroup(\n  props: GroupProps,\n) {\n  wireStructuralEvents(props);\n  return props.children;\n}\n\n/**\n * Describes a transformation group 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 GroupProps}\n * @see {@link GStyle}\n */\nexport const Group = definePrimitive<\n  GroupProps,\n  GStyle,\n  GStyle,\n  ResolvedGStyle\n>(renderGroup, {\n  childInput: 'structural',\n  resolveStyle: style => stripLayoutParticipation(style) as ResolvedGStyle,\n});\n\nsetPrimitivePresentation<ResolvedGStyle>(Group, style => ({\n  transform: createGroupTransform(style),\n}));\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC;AAAA,EAEE;AAAA,OACK;AAkDP,SAAS,YACP,OACA;AACA,uBAAqB,KAAK;AAC1B,SAAO,MAAM;AACf;AAYO,MAAM,QAAQ,gBAKnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc,WAAS,yBAAyB,KAAK;AACvD,CAAC;AAED,yBAAyC,OAAO,YAAU;AAAA,EACxD,WAAW,qBAAqB,KAAK;AACvC,EAAE;",
+  "names": []
+}

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

@@ -0,0 +1,56 @@
+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 HorizontalLine, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link HorizontalLine}
+ */
+export interface HorizontalLineProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+}
+/**
+ * Supported geometry and presentation properties for HorizontalLine.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link BoxStyle}
+ * @see {@link LayoutItemStyle}
+ * @see {@link LineStyle}
+ * @see {@link Length}
+ * @see {@link PixelGridAlignment}
+ * @see {@link HorizontalLine}
+ */
+export interface HorizontalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'> {
+    /**
+     * Vertical coordinate or displacement in the containing coordinate system. See {@link Length}.
+     */
+    y: Exclude<Length, 'auto'>;
+    /** Horizontal coordinate of the first endpoint. See {@link Length}. */
+    x1?: Exclude<Length, 'auto'>;
+    /** Horizontal coordinate of the second endpoint. See {@link Length}. */
+    x2?: 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 HorizontalLineStyle}.
+     */
+    lineInteractionWidth?: number;
+}
+/**
+ * Describes a horizontal-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 HorizontalLineProps}
+ * @see {@link HorizontalLineStyle}
+ */
+export declare const HorizontalLine: import("@pibbl/core").PibblPrimitiveComponent<HorizontalLineProps, import("@pibbl/core").PrimitiveInput<HorizontalLineProps, HorizontalLineStyle>>;

package/dist/lib/components/horizontal-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 renderHorizontalLine(props, style, ctx) {
+  const {
+    y: initialY,
+    x1 = 0,
+    x2 = ctx.canvas.width,
+    alignToPixelGrid = "none",
+    stroke,
+    strokeWidth,
+    opacity,
+    cursor,
+    lineInteractionWidth
+  } = style;
+  const y = adjustForPixelGrid(
+    initialY,
+    strokeWidth,
+    alignToPixelGrid
+  );
+  const coords = [
+    [x1, y],
+    [x2, y]
+  ];
+  return renderLine(
+    props,
+    {
+      coords,
+      stroke,
+      strokeWidth,
+      opacity,
+      cursor,
+      lineInteractionWidth
+    },
+    ctx
+  );
+}
+const HorizontalLine = definePrimitive(renderHorizontalLine, {
+  resolveStyle: (style, context) => ({
+    ...stripLayoutParticipation(style),
+    y: resolveRequiredLength(
+      style.y,
+      context.percentageBasis.height,
+      "y",
+      context
+    ),
+    x1: resolveLocalOffset(
+      style.x1,
+      context.percentageBasis.width,
+      "x1",
+      context
+    ),
+    x2: resolveRequiredLength(
+      style.x2 ?? context.allocation.width,
+      context.percentageBasis.width,
+      "x2",
+      context
+    )
+  })
+});
+registerOpaqueStyleProperties(HorizontalLine, ["stroke", "cursor"]);
+export {
+  HorizontalLine
+};
+//# sourceMappingURL=horizontal-line.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/horizontal-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 HorizontalLine, including the declared data and presentation options.\n *\n * @see {@link PibblEventHandlers}\n * @see {@link PibblEventParticipationOptions}\n * @see {@link PibblPhysics2DPropExtension}\n * @see {@link HorizontalLine}\n */\nexport interface HorizontalLineProps\n  extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}\n\n/**\n * Supported geometry and presentation properties for HorizontalLine.\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 HorizontalLine}\n */\nexport interface HorizontalLineStyle\n  extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'> {\n  /**\n   * Vertical coordinate or displacement in the containing coordinate system. See {@link Length}.\n   */\n  y: Exclude<Length, 'auto'>;\n  /** Horizontal coordinate of the first endpoint. See {@link Length}. */\n  x1?: Exclude<Length, 'auto'>;\n  /** Horizontal coordinate of the second endpoint. See {@link Length}. */\n  x2?: 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 HorizontalLineStyle}.\n   */\n  lineInteractionWidth?: number;\n}\n\ntype ResolvedHorizontalLineStyle = ResolvedDrawingStyle<HorizontalLineStyle> & {\n  y: number;\n  x1: number;\n  x2: number;\n};\n\nfunction renderHorizontalLine(\n  props: HorizontalLineProps,\n  style: Readonly<ResolvedHorizontalLineStyle>,\n  ctx: RenderingContext2D,\n) {\n  const {\n    y: initialY,\n    x1 = 0,\n    x2 = ctx.canvas.width,\n    alignToPixelGrid = 'none',\n    stroke,\n    strokeWidth,\n    opacity,\n    cursor,\n    lineInteractionWidth,\n  } = style;\n  const y = adjustForPixelGrid(\n    initialY,\n    strokeWidth,\n    alignToPixelGrid,\n  );\n  const coords: [number, number][] = [\n    [x1, y],\n    [x2, y],\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 horizontal-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 HorizontalLineProps}\n * @see {@link HorizontalLineStyle}\n */\nexport const HorizontalLine = definePrimitive<\n  HorizontalLineProps,\n  HorizontalLineStyle,\n  HorizontalLineStyle,\n  ResolvedHorizontalLineStyle\n>(renderHorizontalLine, {\n  resolveStyle: (style, context) => ({\n    ...stripLayoutParticipation(style),\n    y: resolveRequiredLength(\n      style.y,\n      context.percentageBasis.height,\n      'y',\n      context,\n    ),\n    x1: resolveLocalOffset(\n      style.x1,\n      context.percentageBasis.width,\n      'x1',\n      context,\n    ),\n    x2: resolveRequiredLength(\n      style.x2 ?? context.allocation.width,\n      context.percentageBasis.width,\n      'x2',\n      context,\n    ),\n  }) as ResolvedHorizontalLineStyle,\n});\nregisterOpaqueStyleProperties(HorizontalLine, ['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;AAmD3C,SAAS,qBACP,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,IAAI,CAAC;AAAA,IACN,CAAC,IAAI,CAAC;AAAA,EACR;AACA,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,iBAAiB,gBAK5B,sBAAsB;AAAA,EACtB,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,gBAAgB,CAAC,UAAU,QAAQ,CAAC;",
+  "names": []
+}

package/dist/lib/components/html-box.d.ts

@@ -0,0 +1,16 @@
+import type { HtmlMountCallback } from "../html/types.js";
+import type { HtmlBoxProps, HtmlBoxStyle } from '../html/types.js';
+import type { PibblRenderResult, PrimitiveInput } from '../types.js';
+type HtmlBoxInput<Props> = Omit<PrimitiveInput<HtmlBoxProps<Props>, HtmlBoxStyle>, 'data' | 'mount'> & Pick<HtmlBoxProps<Props>, 'data' | 'mount'>;
+type HtmlBoxComponent = {
+    <Props>(props: HtmlBoxInput<Props>): PibblRenderResult;
+};
+/**
+ * A persistent native HTML box projected into Pibbl layout, transforms and clips.
+ *
+ * @see {@link HtmlBoxProps}
+ * @see {@link HtmlBoxStyle}
+ * @see {@link HtmlMountCallback}
+ */
+export declare const HtmlBox: HtmlBoxComponent;
+export {};

package/dist/lib/components/html-box.js

@@ -0,0 +1,57 @@
+import { definePrimitive } from "../define-primitive.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { resolveBox } from "../layout/box.js";
+import { createGroupTransform, setPrimitivePresentation } from "../primitive-presentation.js";
+import { getCurrentWorldTransform } from "../render-target.js";
+import { registerOpaquePrimitiveProps } from "../element/metadata.js";
+import { requireHtmlService, snapshotClips } from "../html/html-service.js";
+import { stripLayoutParticipation } from "../style/resolve-built-in.js";
+function renderHtmlBox(props, style, ctx) {
+  const refs = GLOBAL_STATE.componentRefs;
+  const owner = GLOBAL_STATE.currentPibblInstance;
+  const service = requireHtmlService(owner);
+  let slot = refs.refs[0];
+  if (!slot || slot.disposed) {
+    if (typeof props.mount !== "function") throw new TypeError("HtmlBox mount must be a function.");
+    slot = { owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: void 0, rootBounds: void 0, active: true } };
+    const stable = slot;
+    stable.region = { ...stable.region, onFocusSnapshot(snapshot) {
+      queueMicrotask(() => {
+        if (!stable.disposed) stable.callback?.(snapshot);
+      });
+    } };
+    refs.refs[0] = slot;
+    refs.teardowns.add(() => service.release(stable));
+  }
+  const opacity = style.opacity ?? 1;
+  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) throw new RangeError("HtmlBox opacity must be between 0 and 1.");
+  service.register({
+    slot,
+    data: props.data,
+    matrix: getCurrentWorldTransform(),
+    clips: snapshotClips(GLOBAL_STATE.clippingStack),
+    border: style.borderBox,
+    content: style.contentBox,
+    opacity: ctx.globalAlpha * opacity,
+    interactive: props.pointerEvents !== "none",
+    overflow: style.overflow ?? "clip",
+    onFocusChange: props.onFocusChange
+  });
+}
+const primitive = definePrimitive(renderHtmlBox, {
+  resolveStyle(style, context) {
+    const box = resolveBox({
+      ...style,
+      width: style.width === void 0 || style.width === "auto" ? context.allocation.width : style.width,
+      height: style.height === void 0 || style.height === "auto" ? context.allocation.height : style.height
+    }, context.constraints, { component: "HtmlBox" });
+    return { ...stripLayoutParticipation(style), ...box, overflow: style.overflow ?? "clip" };
+  }
+});
+registerOpaquePrimitiveProps(primitive, ["data"]);
+setPrimitivePresentation(primitive, (style) => ({ transform: createGroupTransform(style) }));
+const HtmlBox = primitive;
+export {
+  HtmlBox
+};
+//# sourceMappingURL=html-box.js.map

package/dist/lib/components/html-box.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/html-box.ts"],
+  "sourcesContent": ["import type { HtmlMountCallback } from '../html/types.js';\nimport type { ResolvedDrawingStyle } from '../style/types.js';\nimport { definePrimitive } from '../define-primitive.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { resolveBox } from '../layout/box.js';\nimport type { LayoutBox } from '../layout/types.js';\nimport { createGroupTransform, setPrimitivePresentation } from '../primitive-presentation.js';\nimport { getCurrentWorldTransform } from '../render-target.js';\nimport { registerOpaquePrimitiveProps } from '../element/metadata.js';\nimport { requireHtmlService, snapshotClips } from '../html/html-service.js';\nimport type { HtmlBoxProps, HtmlBoxSlot, HtmlBoxStyle } from '../html/types.js';\nimport type { PibblRenderResult, PrimitiveInput, RenderingContext2D } from '../types.js';\nimport { stripLayoutParticipation } from '../style/resolve-built-in.js';\n\ntype Resolved = ResolvedDrawingStyle<HtmlBoxStyle> & {\n  borderBox: Readonly<LayoutBox>; contentBox: Readonly<LayoutBox>; overflow: 'visible' | 'clip';\n};\n\nfunction renderHtmlBox(props: HtmlBoxProps<unknown>, style: Readonly<Resolved>, ctx: RenderingContext2D): void {\n  const refs = GLOBAL_STATE.componentRefs!;\n  const owner = GLOBAL_STATE.currentPibblInstance!;\n  const service = requireHtmlService(owner);\n  let slot = refs.refs[0] as HtmlBoxSlot | undefined;\n  if (!slot || slot.disposed) {\n    if (typeof props.mount !== 'function') throw new TypeError('HtmlBox mount must be a function.');\n    slot = { owner, mount: props.mount, disposed: false, region: { identity: {}, owner, content: undefined, rootBounds: undefined, active: true } };\n    const stable = slot;\n    stable.region = { ...stable.region, onFocusSnapshot(snapshot) {\n      queueMicrotask(() => { if (!stable.disposed) stable.callback?.(snapshot); });\n    } };\n    refs.refs[0] = slot;\n    refs.teardowns.add(() => service.release(stable));\n  }\n  const opacity = style.opacity ?? 1;\n  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) throw new RangeError('HtmlBox opacity must be between 0 and 1.');\n  service.register({ slot, data: props.data, matrix: getCurrentWorldTransform(),\n    clips: snapshotClips(GLOBAL_STATE.clippingStack), border: style.borderBox, content: style.contentBox,\n    opacity: ctx.globalAlpha * opacity, interactive: props.pointerEvents !== 'none', overflow: style.overflow ?? 'clip', onFocusChange: props.onFocusChange });\n}\n\nconst primitive = definePrimitive<HtmlBoxProps<unknown>, HtmlBoxStyle, HtmlBoxStyle, Resolved>(renderHtmlBox, {\n  resolveStyle(style, context) {\n    const box = resolveBox({ ...style, width: style.width === undefined || style.width === 'auto' ? context.allocation.width : style.width,\n      height: style.height === undefined || style.height === 'auto' ? context.allocation.height : style.height }, context.constraints, { component: 'HtmlBox' });\n    return { ...stripLayoutParticipation(style), ...box, overflow: style.overflow ?? 'clip' } as Resolved;\n  },\n});\n\nregisterOpaquePrimitiveProps(primitive, ['data']);\nsetPrimitivePresentation<Resolved>(primitive, style => ({ transform: createGroupTransform(style) }));\n\ntype HtmlBoxInput<Props> = Omit<PrimitiveInput<HtmlBoxProps<Props>, HtmlBoxStyle>, 'data' | 'mount'> & Pick<HtmlBoxProps<Props>, 'data' | 'mount'>;\ntype HtmlBoxComponent = {\n  <Props>(props: HtmlBoxInput<Props>): PibblRenderResult;\n};\n/**\n * A persistent native HTML box projected into Pibbl layout, transforms and clips.\n *\n * @see {@link HtmlBoxProps}\n * @see {@link HtmlBoxStyle}\n * @see {@link HtmlMountCallback}\n */\nexport const HtmlBox = primitive as HtmlBoxComponent;\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,gCAAgC;AAC/D,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,qBAAqB;AAGlD,SAAS,gCAAgC;AAMzC,SAAS,cAAc,OAA8B,OAA2B,KAA+B;AAC7G,QAAM,OAAO,aAAa;AAC1B,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,mBAAmB,KAAK;AACxC,MAAI,OAAO,KAAK,KAAK,CAAC;AACtB,MAAI,CAAC,QAAQ,KAAK,UAAU;AAC1B,QAAI,OAAO,MAAM,UAAU,WAAY,OAAM,IAAI,UAAU,mCAAmC;AAC9F,WAAO,EAAE,OAAO,OAAO,MAAM,OAAO,UAAU,OAAO,QAAQ,EAAE,UAAU,CAAC,GAAG,OAAO,SAAS,QAAW,YAAY,QAAW,QAAQ,KAAK,EAAE;AAC9I,UAAM,SAAS;AACf,WAAO,SAAS,EAAE,GAAG,OAAO,QAAQ,gBAAgB,UAAU;AAC5D,qBAAe,MAAM;AAAE,YAAI,CAAC,OAAO,SAAU,QAAO,WAAW,QAAQ;AAAA,MAAG,CAAC;AAAA,IAC7E,EAAE;AACF,SAAK,KAAK,CAAC,IAAI;AACf,SAAK,UAAU,IAAI,MAAM,QAAQ,QAAQ,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,UAAU,MAAM,WAAW;AACjC,MAAI,CAAC,OAAO,SAAS,OAAO,KAAK,UAAU,KAAK,UAAU,EAAG,OAAM,IAAI,WAAW,0CAA0C;AAC5H,UAAQ,SAAS;AAAA,IAAE;AAAA,IAAM,MAAM,MAAM;AAAA,IAAM,QAAQ,yBAAyB;AAAA,IAC1E,OAAO,cAAc,aAAa,aAAa;AAAA,IAAG,QAAQ,MAAM;AAAA,IAAW,SAAS,MAAM;AAAA,IAC1F,SAAS,IAAI,cAAc;AAAA,IAAS,aAAa,MAAM,kBAAkB;AAAA,IAAQ,UAAU,MAAM,YAAY;AAAA,IAAQ,eAAe,MAAM;AAAA,EAAc,CAAC;AAC7J;AAEA,MAAM,YAAY,gBAA6E,eAAe;AAAA,EAC5G,aAAa,OAAO,SAAS;AAC3B,UAAM,MAAM,WAAW;AAAA,MAAE,GAAG;AAAA,MAAO,OAAO,MAAM,UAAU,UAAa,MAAM,UAAU,SAAS,QAAQ,WAAW,QAAQ,MAAM;AAAA,MAC/H,QAAQ,MAAM,WAAW,UAAa,MAAM,WAAW,SAAS,QAAQ,WAAW,SAAS,MAAM;AAAA,IAAO,GAAG,QAAQ,aAAa,EAAE,WAAW,UAAU,CAAC;AAC3J,WAAO,EAAE,GAAG,yBAAyB,KAAK,GAAG,GAAG,KAAK,UAAU,MAAM,YAAY,OAAO;AAAA,EAC1F;AACF,CAAC;AAED,6BAA6B,WAAW,CAAC,MAAM,CAAC;AAChD,yBAAmC,WAAW,YAAU,EAAE,WAAW,qBAAqB,KAAK,EAAE,EAAE;AAa5F,MAAM,UAAU;",
+  "names": []
+}

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

@@ -0,0 +1,24 @@
+import type { PibblEventFocusOptions, PibblEventHandlers, PibblEventParticipationOptions } from '../events/types.js';
+import type { PibblPhysics2DPropExtension } from '../types.js';
+import type { ImgStyle } from '../style/types.js';
+/**
+ * Authored inputs for Image, including the declared data and presentation options.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link PibblEventParticipationOptions}
+ * @see {@link PibblPhysics2DPropExtension}
+ * @see {@link Image}
+ */
+export interface ImageProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {
+}
+/**
+ * Describes a Canvas image 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 ImageProps}
+ * @see {@link ImgStyle}
+ */
+export declare const Image: import("@pibbl/core").PibblPrimitiveComponent<ImageProps, import("@pibbl/core").PrimitiveInput<ImageProps, ImgStyle>>;