@grida/hud 0.1.0 → 0.2.1

package/dist/overlay-dsG32baA.d.mts

@@ -0,0 +1,241 @@
+import { f as HUDSemanticGroup, r as HUDPaint } from "./types-3wwFisZs.mjs";
+import cmath from "@grida/cmath";
+
+//#region primitives/cursor.d.ts
+/** 8 cardinal/diagonal resize directions. */
+type ResizeDirection = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+/** 4 corner positions for rotation handles. */
+type RotationCorner = "nw" | "ne" | "se" | "sw";
+/**
+ * Logical cursor icon names.
+ *
+ * `baseAngle` (radians) tilts the rendered arrow by an additional
+ * amount on top of the variant's canonical orientation; the
+ * orchestrator sets it when a gesture rotates a selection so the
+ * cursor tracks live rotation.
+ */
+type CursorIcon = "default" | "pointer" | "move" | "crosshair" | "grab" | "grabbing" | "text" | {
+  kind: "resize";
+  direction: ResizeDirection;
+  baseAngle?: number;
+} | {
+  kind: "rotate";
+  corner: RotationCorner;
+  baseAngle?: number;
+};
+/**
+ * Angle quantization bucket — 0.5° in radians. Two rotated cursors
+ * compare equal when their `baseAngle`s round to the same bucket.
+ *
+ * 0.5° is below human perception for cursor orientation, so the
+ * quantization is visually free.
+ */
+declare const CURSOR_ANGLE_BUCKET_RAD: number;
+/** Quantize an angle (radians) to its `CURSOR_ANGLE_BUCKET_RAD` bucket. */
+declare function angleBucket(rad: number | undefined): number;
+/**
+ * Pluggable cursor renderer — maps a logical `CursorIcon` to a CSS
+ * `cursor:` value. Bedrock ships {@link cursorToCss} as the default;
+ * hosts compose their own to substitute SVG data-URLs or platform
+ * extensions.
+ */
+type CursorRenderer = (icon: CursorIcon) => string;
+/**
+ * Default mapping from `CursorIcon` to CSS `cursor` value.
+ */
+declare function cursorToCss(c: CursorIcon): string;
+/**
+ * Cursor equality with `baseAngle` bucketing.
+ *
+ * Lets a hot path (a rotate-in-progress gesture's per-frame setCursor)
+ * emit `cursorChanged` only on visible motion (≥ one bucket of
+ * rotation).
+ */
+declare function cursorEquals(a: CursorIcon, b: CursorIcon): boolean;
+//#endregion
+//#region primitives/overlay.d.ts
+/**
+ * Minimum hit-target size in screen-px.
+ *
+ * Visual knobs are typically 8px; the hit region is 16px so the user
+ * does not need pixel-perfect aim (Fitts'). Bedrock constant — value
+ * mirrors the legacy `event/overlay.ts` constant during the additive
+ * migration.
+ */
+declare const MIN_HIT_SIZE = 16;
+/**
+ * Below this selection size (in screen-px on either axis), chrome is
+ * suppressed — both the visual handles AND the hit regions. The
+ * consumer enforces this when computing per-frame `HUDObject`s.
+ */
+declare const MIN_CHROME_VISIBLE_SIZE = 12;
+/**
+ * The hit region of a `HUDObject`. Always screen-space; the variants
+ * differ on how the region is anchored.
+ *
+ * **Variants** (closed taxonomy — no host extension):
+ *
+ *  - `screen_rect_at_doc` — fixed screen-pixel rect, anchored to a
+ *    doc-space point. The hit region tracks the document under camera
+ *    changes; dimensions stay constant in CSS px. Used by handles.
+ *
+ *  - `screen_aabb` — pre-projected screen-space AABB. Used for
+ *    overlays whose layout is already screen-space (edge strips).
+ *
+ *  - `screen_obb` — oriented bounding box. `rect` is axis-aligned in
+ *    a shadow space; `inverse_transform` maps screen → shadow. Lets
+ *    rotated chrome stay exact without AABB inflation.
+ *
+ *  - `screen_circle_at_doc` — fixed screen-pixel circle, anchored to a
+ *    doc-space point. Used by vector-handle dots and parametric-handle
+ *    knobs where a square hit region would feel wrong at the corners.
+ *
+ *  - `screen_polygon` — pre-projected screen-space polygon. Used by
+ *    curved zones (variable-width controls, lasso previews) where AABB
+ *    plus a `customHitTest` callback would otherwise leak host code
+ *    into bedrock.
+ */
+type HitShape = {
+  readonly kind: "screen_rect_at_doc";
+  readonly anchor_doc: cmath.Vector2; /** Screen-space size in CSS px. */
+  readonly width: number;
+  readonly height: number; /** Which point of the rect sits on the anchor. Default: "center". */
+  readonly placement?: "center" | "tl" | "tr" | "bl" | "br";
+} | {
+  readonly kind: "screen_aabb";
+  readonly rect: cmath.Rectangle;
+} | {
+  readonly kind: "screen_obb"; /** Axis-aligned rect in shadow space. */
+  readonly rect: cmath.Rectangle; /** screen → shadow. Applied to the pointer before AABB containment. */
+  readonly inverse_transform: cmath.Transform;
+} | {
+  readonly kind: "screen_circle_at_doc";
+  readonly anchor_doc: cmath.Vector2; /** Radius in screen CSS px. */
+  readonly radius: number;
+} | {
+  readonly kind: "screen_polygon"; /** Pre-projected screen-space polygon vertices. */
+  readonly points: ReadonlyArray<readonly [number, number]>;
+};
+/**
+ * The visual representation of a `HUDObject`. Maps directly onto the
+ * primitive layer's `HUDDraw` entries; the consumer (or the deferred
+ * orchestrator) fans these into one merged `HUDDraw` per frame.
+ *
+ * Closed taxonomy — same set as the legacy `OverlayElement.render`
+ * union (`screen_rect`, `doc_rect`, `doc_line`, `doc_polyline`). No
+ * new variants in bedrock; new render kinds land here only with ≥2
+ * internal consumers shaped (sdk-design promotion bar).
+ */
+type RenderShape = {
+  readonly kind: "screen_rect";
+  readonly anchor_doc: cmath.Vector2;
+  readonly width: number;
+  readonly height: number;
+  readonly placement?: "center" | "tl" | "tr" | "bl" | "br";
+  readonly fill?: boolean;
+  readonly stroke?: boolean;
+  readonly fillColor?: string;
+  readonly strokeColor?: string;
+  readonly angle?: number;
+  readonly shape?: "rect" | "circle";
+} | {
+  readonly kind: "doc_rect";
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly stroke?: boolean;
+  readonly fill?: boolean;
+  readonly fillOpacity?: number;
+  readonly dashed?: boolean;
+} | {
+  readonly kind: "doc_line";
+  readonly x1: number;
+  readonly y1: number;
+  readonly x2: number;
+  readonly y2: number;
+  readonly dashed?: boolean;
+  readonly strokeWidth?: number;
+  readonly color?: string;
+} | {
+  readonly kind: "doc_polyline";
+  readonly points: ReadonlyArray<readonly [number, number]>;
+  readonly stroke?: boolean;
+  readonly fill?: boolean;
+  readonly fillOpacity?: number;
+  readonly strokeOpacity?: number;
+  readonly strokeWidth?: number;
+  readonly dashed?: boolean;
+  readonly color?: string;
+  readonly fillPaint?: HUDPaint;
+};
+/**
+ * Fields common to every `HUDObject` variant.
+ */
+interface HUDObjectCommon {
+  /** Optional debug label. Stable semantic identifier, e.g.
+   *  `"resize_handle:nw"`, `"my-class:knob"`. */
+  readonly label?: string;
+  /** Semantic group, used by the consumer for visibility filtering. */
+  readonly group?: HUDSemanticGroup;
+  /** Lower wins on overlap. The consumer assigns the integer; bedrock
+   *  treats it opaquely (sort key only). */
+  readonly priority: number;
+}
+/**
+ * Paint-only object: visual chrome that is never hit-tested.
+ * `render` is required; `hit`, `intent`, `cursor` are forbidden.
+ */
+interface HUDObjectPaintOnly extends HUDObjectCommon {
+  readonly render: RenderShape;
+  readonly hit?: never;
+  readonly intent?: never;
+  readonly cursor?: never;
+}
+/**
+ * Interactive object: hit-testable; may also paint, carry an intent,
+ * and a cursor. `hit` is required; the rest are optional.
+ *
+ * Sub-states (none enforced; documented for readers):
+ *  - `intent` absent → silent / hover-only.
+ *  - `intent` present → fully interactive.
+ *  - `render` absent → silent affordance (invisible hit padding around
+ *    a pre-painted target).
+ */
+interface HUDObjectInteractive<I = unknown> extends HUDObjectCommon {
+  readonly hit: HitShape;
+  readonly render?: RenderShape;
+  readonly intent?: I;
+  readonly cursor?: CursorIcon;
+  /**
+   * Optional refinement applied AFTER `hit` containment passes. Return
+   * `false` to reject the hit even though the shape contained the point.
+   *
+   * The point passed is the same screen-space point handed to
+   * `HitRegistry.queryPoint`. Used by curve-shaped affordances (a path
+   * segment's hit region is the bezier's bbox; the refinement asks "are
+   * you actually near the curve in screen-px?") — the one real case that
+   * an AABB/circle/polygon cannot express on its own.
+   *
+   * This is a deliberate, narrow escape hatch, restored after the
+   * vector-path consumer proved an AABB-only hit model drops the
+   * curve-near refinement. It is NOT a general "host runs arbitrary code
+   * in the hit loop" door: it only *narrows* a shape that already
+   * matched; it cannot widen one.
+   */
+  readonly refine?: (p: cmath.Vector2) => boolean;
+}
+/**
+ * The canonical bedrock primitive — the value type a consumer
+ * constructs to participate in HUD.
+ *
+ * Generic over the opaque intent type `I` the consumer supplies; both
+ * bedrock and `HitRegistry<I>` propagate `I` unchanged.
+ *
+ * The discriminated union enforces the (`render` ∨ `hit`) invariant
+ * at compile time: an object with neither field is not assignable to
+ * either variant.
+ */
+type HUDObject<I = unknown> = HUDObjectPaintOnly | HUDObjectInteractive<I>;
+//#endregion
+export { MIN_CHROME_VISIBLE_SIZE as a, CURSOR_ANGLE_BUCKET_RAD as c, ResizeDirection as d, RotationCorner as f, cursorToCss as h, HitShape as i, CursorIcon as l, cursorEquals as m, HUDObjectInteractive as n, MIN_HIT_SIZE as o, angleBucket as p, HUDObjectPaintOnly as r, RenderShape as s, HUDObject as t, CursorRenderer as u };

package/dist/primitives/bedrock.d.mts

@@ -0,0 +1,47 @@
+import { a as HUDPaintStripes, c as HUDRect, d as HUDSemantic, f as HUDSemanticGroup, i as HUDPaintSolid, l as HUDRule, n as HUDLine, o as HUDPoint, r as HUDPaint, s as HUDPolyline, t as HUDDraw, u as HUDScreenRect } from "../types-3wwFisZs.mjs";
+import { a as MIN_CHROME_VISIBLE_SIZE, c as CURSOR_ANGLE_BUCKET_RAD, d as ResizeDirection, f as RotationCorner, h as cursorToCss, i as HitShape, l as CursorIcon, m as cursorEquals, n as HUDObjectInteractive, o as MIN_HIT_SIZE, p as angleBucket, r as HUDObjectPaintOnly, s as RenderShape, t as HUDObject, u as CursorRenderer } from "../overlay-dsG32baA.mjs";
+import cmath from "@grida/cmath";
+
+//#region primitives/painter.d.ts
+/**
+ * Per-frame viewport state handed to `beginFrame`.
+ */
+interface PainterViewport {
+  /** Width in CSS pixels. */
+  readonly w: number;
+  /** Height in CSS pixels. */
+  readonly h: number;
+  /** Device-pixel ratio. */
+  readonly dpr: number;
+}
+/**
+ * Backend-agnostic chrome painter.
+ *
+ * Bedrock contract — exactly four methods. Concrete implementations
+ * (`primitives/painter-canvas2d.ts` ships canvas2d) may add private
+ * helpers, but the public interface is frozen at this shape.
+ *
+ * Frame lifecycle:
+ *
+ *   1. `beginFrame(viewport)` — clear or prepare the backing surface.
+ *   2. `setTransform(t)` — set the camera (doc → screen affine). May
+ *      be called multiple times within a frame.
+ *   3. `draw(d)` — submit a `HUDDraw` payload. May be called multiple
+ *      times within a frame; payloads accumulate.
+ *   4. `endFrame()` — commit. The backing surface displays the frame.
+ *
+ * Implementations MAY no-op `endFrame` (canvas2d does); SVG/DOM
+ * backends use it to flush DOM mutations in a single batch.
+ */
+interface Painter {
+  /** Start a new frame. Implementations clear / reset state here. */
+  beginFrame(viewport: PainterViewport): void;
+  /** Set the camera (doc → screen). */
+  setTransform(t: cmath.Transform): void;
+  /** Paint a `HUDDraw` payload. Calls accumulate within a frame. */
+  draw(d: HUDDraw): void;
+  /** Commit the frame. Implementations flush their backing surface. */
+  endFrame(): void;
+}
+//#endregion
+export { CURSOR_ANGLE_BUCKET_RAD, type CursorIcon, type CursorRenderer, type HUDDraw, type HUDLine, type HUDObject, type HUDObjectInteractive, type HUDObjectPaintOnly, type HUDPaint, type HUDPaintSolid, type HUDPaintStripes, type HUDPoint, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HitShape, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Painter, type PainterViewport, type RenderShape, type ResizeDirection, type RotationCorner, angleBucket, cursorEquals, cursorToCss };

package/dist/primitives/bedrock.d.ts

@@ -0,0 +1,47 @@
+import { a as HUDPaintStripes, c as HUDRect, d as HUDSemantic, f as HUDSemanticGroup, i as HUDPaintSolid, l as HUDRule, n as HUDLine, o as HUDPoint, r as HUDPaint, s as HUDPolyline, t as HUDDraw, u as HUDScreenRect } from "../types-3wwFisZs.js";
+import { a as MIN_CHROME_VISIBLE_SIZE, c as CURSOR_ANGLE_BUCKET_RAD, d as ResizeDirection, f as RotationCorner, h as cursorToCss, i as HitShape, l as CursorIcon, m as cursorEquals, n as HUDObjectInteractive, o as MIN_HIT_SIZE, p as angleBucket, r as HUDObjectPaintOnly, s as RenderShape, t as HUDObject, u as CursorRenderer } from "../overlay-CVV4s3IL.js";
+import cmath from "@grida/cmath";
+
+//#region primitives/painter.d.ts
+/**
+ * Per-frame viewport state handed to `beginFrame`.
+ */
+interface PainterViewport {
+  /** Width in CSS pixels. */
+  readonly w: number;
+  /** Height in CSS pixels. */
+  readonly h: number;
+  /** Device-pixel ratio. */
+  readonly dpr: number;
+}
+/**
+ * Backend-agnostic chrome painter.
+ *
+ * Bedrock contract — exactly four methods. Concrete implementations
+ * (`primitives/painter-canvas2d.ts` ships canvas2d) may add private
+ * helpers, but the public interface is frozen at this shape.
+ *
+ * Frame lifecycle:
+ *
+ *   1. `beginFrame(viewport)` — clear or prepare the backing surface.
+ *   2. `setTransform(t)` — set the camera (doc → screen affine). May
+ *      be called multiple times within a frame.
+ *   3. `draw(d)` — submit a `HUDDraw` payload. May be called multiple
+ *      times within a frame; payloads accumulate.
+ *   4. `endFrame()` — commit. The backing surface displays the frame.
+ *
+ * Implementations MAY no-op `endFrame` (canvas2d does); SVG/DOM
+ * backends use it to flush DOM mutations in a single batch.
+ */
+interface Painter {
+  /** Start a new frame. Implementations clear / reset state here. */
+  beginFrame(viewport: PainterViewport): void;
+  /** Set the camera (doc → screen). */
+  setTransform(t: cmath.Transform): void;
+  /** Paint a `HUDDraw` payload. Calls accumulate within a frame. */
+  draw(d: HUDDraw): void;
+  /** Commit the frame. Implementations flush their backing surface. */
+  endFrame(): void;
+}
+//#endregion
+export { CURSOR_ANGLE_BUCKET_RAD, type CursorIcon, type CursorRenderer, type HUDDraw, type HUDLine, type HUDObject, type HUDObjectInteractive, type HUDObjectPaintOnly, type HUDPaint, type HUDPaintSolid, type HUDPaintStripes, type HUDPoint, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HitShape, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Painter, type PainterViewport, type RenderShape, type ResizeDirection, type RotationCorner, angleBucket, cursorEquals, cursorToCss };

package/dist/primitives/bedrock.js

@@ -0,0 +1,71 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region primitives/overlay.ts
+/**
+* Minimum hit-target size in screen-px.
+*
+* Visual knobs are typically 8px; the hit region is 16px so the user
+* does not need pixel-perfect aim (Fitts'). Bedrock constant — value
+* mirrors the legacy `event/overlay.ts` constant during the additive
+* migration.
+*/
+const MIN_HIT_SIZE = 16;
+/**
+* Below this selection size (in screen-px on either axis), chrome is
+* suppressed — both the visual handles AND the hit regions. The
+* consumer enforces this when computing per-frame `HUDObject`s.
+*/
+const MIN_CHROME_VISIBLE_SIZE = 12;
+//#endregion
+//#region primitives/cursor.ts
+/**
+* Angle quantization bucket — 0.5° in radians. Two rotated cursors
+* compare equal when their `baseAngle`s round to the same bucket.
+*
+* 0.5° is below human perception for cursor orientation, so the
+* quantization is visually free.
+*/
+const CURSOR_ANGLE_BUCKET_RAD = Math.PI / 360;
+/** Quantize an angle (radians) to its `CURSOR_ANGLE_BUCKET_RAD` bucket. */
+function angleBucket(rad) {
+	if (rad === void 0 || rad === 0) return 0;
+	return Math.round(rad / CURSOR_ANGLE_BUCKET_RAD);
+}
+/**
+* Default mapping from `CursorIcon` to CSS `cursor` value.
+*/
+function cursorToCss(c) {
+	if (typeof c === "string") switch (c) {
+		case "default": return "default";
+		case "pointer": return "pointer";
+		case "move": return "move";
+		case "crosshair": return "crosshair";
+		case "grab": return "grab";
+		case "grabbing": return "grabbing";
+		case "text": return "text";
+	}
+	if (c.kind === "resize") return `${c.direction}-resize`;
+	return "crosshair";
+}
+/**
+* Cursor equality with `baseAngle` bucketing.
+*
+* Lets a hot path (a rotate-in-progress gesture's per-frame setCursor)
+* emit `cursorChanged` only on visible motion (≥ one bucket of
+* rotation).
+*/
+function cursorEquals(a, b) {
+	if (typeof a === "string" && typeof b === "string") return a === b;
+	if (typeof a !== "string" && typeof b !== "string") {
+		if (a.kind === "resize" && b.kind === "resize") return a.direction === b.direction && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
+		if (a.kind === "rotate" && b.kind === "rotate") return a.corner === b.corner && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
+		return false;
+	}
+	return false;
+}
+//#endregion
+exports.CURSOR_ANGLE_BUCKET_RAD = CURSOR_ANGLE_BUCKET_RAD;
+exports.MIN_CHROME_VISIBLE_SIZE = MIN_CHROME_VISIBLE_SIZE;
+exports.MIN_HIT_SIZE = MIN_HIT_SIZE;
+exports.angleBucket = angleBucket;
+exports.cursorEquals = cursorEquals;
+exports.cursorToCss = cursorToCss;

package/dist/primitives/bedrock.mjs

@@ -0,0 +1,65 @@
+//#region primitives/overlay.ts
+/**
+* Minimum hit-target size in screen-px.
+*
+* Visual knobs are typically 8px; the hit region is 16px so the user
+* does not need pixel-perfect aim (Fitts'). Bedrock constant — value
+* mirrors the legacy `event/overlay.ts` constant during the additive
+* migration.
+*/
+const MIN_HIT_SIZE = 16;
+/**
+* Below this selection size (in screen-px on either axis), chrome is
+* suppressed — both the visual handles AND the hit regions. The
+* consumer enforces this when computing per-frame `HUDObject`s.
+*/
+const MIN_CHROME_VISIBLE_SIZE = 12;
+//#endregion
+//#region primitives/cursor.ts
+/**
+* Angle quantization bucket — 0.5° in radians. Two rotated cursors
+* compare equal when their `baseAngle`s round to the same bucket.
+*
+* 0.5° is below human perception for cursor orientation, so the
+* quantization is visually free.
+*/
+const CURSOR_ANGLE_BUCKET_RAD = Math.PI / 360;
+/** Quantize an angle (radians) to its `CURSOR_ANGLE_BUCKET_RAD` bucket. */
+function angleBucket(rad) {
+	if (rad === void 0 || rad === 0) return 0;
+	return Math.round(rad / CURSOR_ANGLE_BUCKET_RAD);
+}
+/**
+* Default mapping from `CursorIcon` to CSS `cursor` value.
+*/
+function cursorToCss(c) {
+	if (typeof c === "string") switch (c) {
+		case "default": return "default";
+		case "pointer": return "pointer";
+		case "move": return "move";
+		case "crosshair": return "crosshair";
+		case "grab": return "grab";
+		case "grabbing": return "grabbing";
+		case "text": return "text";
+	}
+	if (c.kind === "resize") return `${c.direction}-resize`;
+	return "crosshair";
+}
+/**
+* Cursor equality with `baseAngle` bucketing.
+*
+* Lets a hot path (a rotate-in-progress gesture's per-frame setCursor)
+* emit `cursorChanged` only on visible motion (≥ one bucket of
+* rotation).
+*/
+function cursorEquals(a, b) {
+	if (typeof a === "string" && typeof b === "string") return a === b;
+	if (typeof a !== "string" && typeof b !== "string") {
+		if (a.kind === "resize" && b.kind === "resize") return a.direction === b.direction && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
+		if (a.kind === "rotate" && b.kind === "rotate") return a.corner === b.corner && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
+		return false;
+	}
+	return false;
+}
+//#endregion
+export { CURSOR_ANGLE_BUCKET_RAD, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, angleBucket, cursorEquals, cursorToCss };

package/dist/react.d.mts

@@ -1,6 +1,7 @@
-import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-CBqCh-ZM.mjs";
-import { Measurement } from "@grida/cmath/_measurement";
+import { t as HUDDraw } from "./types-3wwFisZs.mjs";
+import { n as SurfaceOptions, t as Surface } from "./index-Cmbe2X5b.mjs";
 import cmath from "@grida/cmath";
+import { Measurement } from "@grida/cmath/_measurement";
 import * as React from "react";
 import { SnapResult } from "@grida/cmath/_snap";
 

package/dist/react.d.ts

@@ -1,4 +1,5 @@
-import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-DRBeSiI2.js";
+import { t as HUDDraw } from "./types-3wwFisZs.js";
+import { n as SurfaceOptions, t as Surface } from "./index-BrfEdWbQ.js";
 import cmath from "@grida/cmath";
 import { SnapResult } from "@grida/cmath/_snap";
 import { Measurement } from "@grida/cmath/_measurement";

package/dist/react.js

@@ -1,6 +1,6 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_surface = require("./surface-CNlBaEXn.js");
+const require_surface = require("./surface-BHQVvRFC.js");
 let react = require("react");
 react = require_surface.__toESM(react);
 let _grida_cmath__snap = require("@grida/cmath/_snap");
@@ -33,7 +33,10 @@ function useHUDSurface(canvasRef, options) {
 			onIntent: (i) => onIntentRef.current(i),
 			style: options.style,
 			readonly: options.readonly,
-			color: options.color
+			color: options.color,
+			pixelGrid: options.pixelGrid,
+			groups: options.groups,
+			visibility: options.visibility
 		});
 		setSurface(s);
 		return () => {
@@ -45,10 +48,12 @@ function useHUDSurface(canvasRef, options) {
 		if (!surface) return;
 		if (options.style) surface.setStyle(options.style);
 		if (options.readonly !== void 0) surface.setReadonly(options.readonly);
+		surface.setColor(options.color ?? null);
 	}, [
 		surface,
 		options.style,
-		options.readonly
+		options.readonly,
+		options.color
 	]);
 	return surface;
 }

package/dist/react.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { a as lassoToHUDDraw, c as snapGuideToHUDDraw, l as HUDCanvas, o as marqueeToHUDDraw, s as measurementToHUDDraw, t as Surface } from "./surface-hUEeEVdL.mjs";
+import { D as marqueeToHUDDraw, E as lassoToHUDDraw, O as measurementToHUDDraw, j as HUDCanvas, k as snapGuideToHUDDraw, t as Surface } from "./surface-NHSzUR8r.mjs";
 import * as React from "react";
 import { guide } from "@grida/cmath/_snap";
 import { jsx } from "react/jsx-runtime";
@@ -31,7 +31,10 @@ function useHUDSurface(canvasRef, options) {
 			onIntent: (i) => onIntentRef.current(i),
 			style: options.style,
 			readonly: options.readonly,
-			color: options.color
+			color: options.color,
+			pixelGrid: options.pixelGrid,
+			groups: options.groups,
+			visibility: options.visibility
 		});
 		setSurface(s);
 		return () => {
@@ -43,10 +46,12 @@ function useHUDSurface(canvasRef, options) {
 		if (!surface) return;
 		if (options.style) surface.setStyle(options.style);
 		if (options.readonly !== void 0) surface.setReadonly(options.readonly);
+		surface.setColor(options.color ?? null);
 	}, [
 		surface,
 		options.style,
-		options.readonly
+		options.readonly,
+		options.color
 	]);
 	return surface;
 }