@grida/hud 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -1,2 +1,106 @@
-import { A as HUDPolyline, C as marqueeToHUDDraw, D as HUDCanvasOptions, E as HUDCanvas, M as HUDRule, N as HUDScreenRect, O as HUDDraw, S as lassoToHUDDraw, T as snapGuideToHUDDraw, _ as Modifiers, a as RenderShape, b as SurfaceEvent, c as HUDStyle, d as Intent, f as IntentPhase, g as RotationCorner, h as ResizeDirection, i as OverlayElement, j as HUDRect, k as HUDLine, l as SelectionGroup, m as CursorIcon, n as MIN_CHROME_VISIBLE_SIZE, o as Surface, p as SurfaceGesture, r as MIN_HIT_SIZE, s as SurfaceOptions, t as HitShape, u as SelectionShape, v as NO_MODS, w as measurementToHUDDraw, x as SurfaceResponse, y as PointerButton } from "./index-CBqCh-ZM.mjs";
-export { type CursorIcon, HUDCanvas, type HUDCanvasOptions, type HUDDraw, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectionGroup, type SelectionShape, Surface, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };
+import { a as cursorEquals, i as RotationCorner, n as CursorRenderer, o as cursorToCss, r as ResizeDirection, t as CursorIcon } from "./cursor-BFGUuD2M.mjs";
+import { A as HUDCanvas, B as HUDRect, C as SurfaceEvent, D as measurementToHUDDraw, E as marqueeToHUDDraw, F as PixelGridConfig, H as HUDScreenRect, I as drawPixelGrid, L as HUDDraw, M as DEFAULT_PIXEL_GRID_COLOR, N as DEFAULT_PIXEL_GRID_STEPS, O as snapGuideToHUDDraw, P as DrawPixelGridParams, R as HUDLine, S as PointerButton, T as lassoToHUDDraw, U as HUDSemantic, V as HUDRule, W as HUDSemanticGroup, _ as SurfaceGesture, a as SurfaceVisibilityPolicy, b as Modifiers, c as MIN_CHROME_VISIBLE_SIZE, d as RenderShape, f as HUDStyle, g as Rect, h as SelectMode, i as SurfaceVisibilityContext, j as HUDCanvasOptions, k as filterHUDDrawByGroup, l as MIN_HIT_SIZE, m as IntentPhase, n as SurfaceOptions, o as SurfaceChromeGroups, p as Intent, r as SurfaceVisibility, s as HitShape, t as Surface, u as OverlayElement, v as SelectionGroup, w as SurfaceResponse, x as NO_MODS, y as SelectionShape, z as HUDPolyline } from "./index-DhGdcuQz.mjs";
+
+//#region event/selection-controls.d.ts
+declare const HUDHitPriority: {
+  /** Line endpoints — sole resize affordance on lines; nothing outranks them. */readonly ENDPOINT_HANDLE: 10;
+  /** Edge priority when promoted (parallel axis violated). Edge strip
+   *  extends into the body interior on the perpendicular axis when that
+   *  axis is comfortable; in that case the edge must outrank the
+   *  (also-promoted) body to keep the resize affordance. */
+  readonly RESIZE_HANDLE_EDGE_SMALL: 22;
+  /** Body priority when promoted (any axis violated). Lets the user drag
+   *  from anywhere inside small selections (instead of the corner
+   *  extension stealing the interior). */
+  readonly TRANSLATE_BODY_SMALL: 25;
+  /** Side resize handles (N/S/W/E). Lower than corner so that on the 1-px
+   *  shared boundary between an edge strip and an adjacent corner slot,
+   *  edge wins ("sides take priority over corners"). */
+  readonly RESIZE_HANDLE_EDGE: 30; /** Corner resize handles (NW/NE/SE/SW). */
+  readonly RESIZE_HANDLE_CORNER: 31; /** Translate-body — default value. */
+  readonly TRANSLATE_BODY: 40;
+  /** Rotation halo wraps each resize corner — the rotation hit rect
+   *  overlaps body, edges, and the resize corner itself, but has the
+   *  LOWEST priority of any selection-control zone. It only "wins"
+   *  (becomes the topmost hit) where no other affordance claims the
+   *  pixel: the L-strip immediately outside the resize-corner outer
+   *  edges. This is what gives rotation a gap-free wrap around the
+   *  corner with zero pixel-overlap on the cursor, without ever
+   *  intruding on the body, the edge resize strips, or the corner
+   *  resize knob. Do not place anything below this. */
+  readonly ROTATE_HANDLE: 50;
+};
+/** The principle constant — the minimum guaranteed length for the body
+ *  interior on each axis AND for each side strip along its parallel
+ *  axis. Tunable; everything else derives. */
+declare const MIN_GUARANTEED_INTERACTIVE_DIM = 20;
+/** Below this axis dim, body promotes above corner. Derived from the
+ *  principle. */
+declare const BODY_FLIP_THRESHOLD: number;
+type SelectionControlRole = {
+  kind: "translate";
+} | {
+  kind: "resize_corner";
+  direction: "nw" | "ne" | "se" | "sw";
+} | {
+  kind: "resize_edge";
+  direction: "n" | "e" | "s" | "w";
+} | {
+  kind: "rotate";
+  corner: RotationCorner;
+};
+interface SelectionControlZone {
+  rect: Rect;
+  priority: number;
+  role: SelectionControlRole;
+  /** Stable semantic identifier; matches the OverlayElement.label that
+   *  the chrome builder forwards downstream. */
+  label: string;
+}
+interface SelectionControlLayout {
+  /** Zones in declaration order. Hit-test resolution is by priority; order
+   *  serves as tie-break only. */
+  zones: SelectionControlZone[];
+  /** Whether knobs render visually. False below MIN_CHROME_VISIBLE_SIZE.
+   *  The body zone exists and is hit-able regardless. */
+  controls_visible: boolean;
+  /** True when at least one axis is shorter than BODY_FLIP_THRESHOLD,
+   *  promoting body above corner. */
+  small_mode: boolean;
+}
+/**
+ * @returns { corner, edge } — lengths in screen-px summing to `total`
+ * (corner * 2 + edge === total). Each is `>= 0`.
+ *
+ * Three phases:
+ *  - **comfortable** (`total >= 2 * corner_preferred + edge_min`):
+ *    corners at preferred, edge takes the surplus.
+ *  - **squeezed** (`total >= edge_min`): edge at its min, corners share
+ *    the remainder.
+ *  - **tiny** (`total < edge_min`): edge takes everything, corners 0.
+ */
+declare function negotiateAxis(total: number, corner_preferred: number, edge_min: number): {
+  corner: number;
+  edge: number;
+};
+/**
+ * Compute the selection control layout for a screen-space rect.
+ *
+ * Pure: no DOM, no global state. Same inputs → same zones.
+ *
+ * The perimeter ring straddles the bbox edge with `extension =
+ * hit_size / 2` overhang outside. Along each axis the run of length
+ * `axis_dim + 2 * extension` is split via {@link negotiateAxis} into
+ * `[corner | edge | corner]`. The 4 corners and 4 edges in 2D then tile
+ * the ring as a strict 3×3 grid of cells — **non-overlapping**. Body
+ * sits at rect_screen and may overlap with the ring's inside-bbox half
+ * in comfortable mode; priority resolves those overlaps.
+ *
+ * See the comment block in this file for the full principle.
+ */
+declare function computeSelectionControlLayout(rect_screen: Rect, opts: {
+  handle_size: number;
+  show_rotation: boolean;
+}): SelectionControlLayout;
+//#endregion
+export { BODY_FLIP_THRESHOLD, type CursorIcon, type CursorRenderer, DEFAULT_PIXEL_GRID_COLOR, DEFAULT_PIXEL_GRID_STEPS, type DrawPixelGridParams, HUDCanvas, type HUDCanvasOptions, type HUDDraw, HUDHitPriority, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_GUARANTEED_INTERACTIVE_DIM, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PixelGridConfig, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectMode, type SelectionControlLayout, type SelectionControlRole, type SelectionControlZone, type SelectionGroup, type SelectionShape, Surface, type SurfaceChromeGroups, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, type SurfaceVisibility, type SurfaceVisibilityContext, type SurfaceVisibilityPolicy, computeSelectionControlLayout, cursorEquals, cursorToCss, drawPixelGrid, filterHUDDrawByGroup, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, negotiateAxis, snapGuideToHUDDraw };

package/dist/index.d.ts

@@ -1,2 +1,106 @@
-import { A as HUDPolyline, C as marqueeToHUDDraw, D as HUDCanvasOptions, E as HUDCanvas, M as HUDRule, N as HUDScreenRect, O as HUDDraw, S as lassoToHUDDraw, T as snapGuideToHUDDraw, _ as Modifiers, a as RenderShape, b as SurfaceEvent, c as HUDStyle, d as Intent, f as IntentPhase, g as RotationCorner, h as ResizeDirection, i as OverlayElement, j as HUDRect, k as HUDLine, l as SelectionGroup, m as CursorIcon, n as MIN_CHROME_VISIBLE_SIZE, o as Surface, p as SurfaceGesture, r as MIN_HIT_SIZE, s as SurfaceOptions, t as HitShape, u as SelectionShape, v as NO_MODS, w as measurementToHUDDraw, x as SurfaceResponse, y as PointerButton } from "./index-DRBeSiI2.js";
-export { type CursorIcon, HUDCanvas, type HUDCanvasOptions, type HUDDraw, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectionGroup, type SelectionShape, Surface, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };
+import { a as cursorEquals, i as RotationCorner, n as CursorRenderer, o as cursorToCss, r as ResizeDirection, t as CursorIcon } from "./cursor-CIYvFshz.js";
+import { A as HUDCanvas, B as HUDRect, C as SurfaceEvent, D as measurementToHUDDraw, E as marqueeToHUDDraw, F as PixelGridConfig, H as HUDScreenRect, I as drawPixelGrid, L as HUDDraw, M as DEFAULT_PIXEL_GRID_COLOR, N as DEFAULT_PIXEL_GRID_STEPS, O as snapGuideToHUDDraw, P as DrawPixelGridParams, R as HUDLine, S as PointerButton, T as lassoToHUDDraw, U as HUDSemantic, V as HUDRule, W as HUDSemanticGroup, _ as SurfaceGesture, a as SurfaceVisibilityPolicy, b as Modifiers, c as MIN_CHROME_VISIBLE_SIZE, d as RenderShape, f as HUDStyle, g as Rect, h as SelectMode, i as SurfaceVisibilityContext, j as HUDCanvasOptions, k as filterHUDDrawByGroup, l as MIN_HIT_SIZE, m as IntentPhase, n as SurfaceOptions, o as SurfaceChromeGroups, p as Intent, r as SurfaceVisibility, s as HitShape, t as Surface, u as OverlayElement, v as SelectionGroup, w as SurfaceResponse, x as NO_MODS, y as SelectionShape, z as HUDPolyline } from "./index-Cp0X4SV7.js";
+
+//#region event/selection-controls.d.ts
+declare const HUDHitPriority: {
+  /** Line endpoints — sole resize affordance on lines; nothing outranks them. */readonly ENDPOINT_HANDLE: 10;
+  /** Edge priority when promoted (parallel axis violated). Edge strip
+   *  extends into the body interior on the perpendicular axis when that
+   *  axis is comfortable; in that case the edge must outrank the
+   *  (also-promoted) body to keep the resize affordance. */
+  readonly RESIZE_HANDLE_EDGE_SMALL: 22;
+  /** Body priority when promoted (any axis violated). Lets the user drag
+   *  from anywhere inside small selections (instead of the corner
+   *  extension stealing the interior). */
+  readonly TRANSLATE_BODY_SMALL: 25;
+  /** Side resize handles (N/S/W/E). Lower than corner so that on the 1-px
+   *  shared boundary between an edge strip and an adjacent corner slot,
+   *  edge wins ("sides take priority over corners"). */
+  readonly RESIZE_HANDLE_EDGE: 30; /** Corner resize handles (NW/NE/SE/SW). */
+  readonly RESIZE_HANDLE_CORNER: 31; /** Translate-body — default value. */
+  readonly TRANSLATE_BODY: 40;
+  /** Rotation halo wraps each resize corner — the rotation hit rect
+   *  overlaps body, edges, and the resize corner itself, but has the
+   *  LOWEST priority of any selection-control zone. It only "wins"
+   *  (becomes the topmost hit) where no other affordance claims the
+   *  pixel: the L-strip immediately outside the resize-corner outer
+   *  edges. This is what gives rotation a gap-free wrap around the
+   *  corner with zero pixel-overlap on the cursor, without ever
+   *  intruding on the body, the edge resize strips, or the corner
+   *  resize knob. Do not place anything below this. */
+  readonly ROTATE_HANDLE: 50;
+};
+/** The principle constant — the minimum guaranteed length for the body
+ *  interior on each axis AND for each side strip along its parallel
+ *  axis. Tunable; everything else derives. */
+declare const MIN_GUARANTEED_INTERACTIVE_DIM = 20;
+/** Below this axis dim, body promotes above corner. Derived from the
+ *  principle. */
+declare const BODY_FLIP_THRESHOLD: number;
+type SelectionControlRole = {
+  kind: "translate";
+} | {
+  kind: "resize_corner";
+  direction: "nw" | "ne" | "se" | "sw";
+} | {
+  kind: "resize_edge";
+  direction: "n" | "e" | "s" | "w";
+} | {
+  kind: "rotate";
+  corner: RotationCorner;
+};
+interface SelectionControlZone {
+  rect: Rect;
+  priority: number;
+  role: SelectionControlRole;
+  /** Stable semantic identifier; matches the OverlayElement.label that
+   *  the chrome builder forwards downstream. */
+  label: string;
+}
+interface SelectionControlLayout {
+  /** Zones in declaration order. Hit-test resolution is by priority; order
+   *  serves as tie-break only. */
+  zones: SelectionControlZone[];
+  /** Whether knobs render visually. False below MIN_CHROME_VISIBLE_SIZE.
+   *  The body zone exists and is hit-able regardless. */
+  controls_visible: boolean;
+  /** True when at least one axis is shorter than BODY_FLIP_THRESHOLD,
+   *  promoting body above corner. */
+  small_mode: boolean;
+}
+/**
+ * @returns { corner, edge } — lengths in screen-px summing to `total`
+ * (corner * 2 + edge === total). Each is `>= 0`.
+ *
+ * Three phases:
+ *  - **comfortable** (`total >= 2 * corner_preferred + edge_min`):
+ *    corners at preferred, edge takes the surplus.
+ *  - **squeezed** (`total >= edge_min`): edge at its min, corners share
+ *    the remainder.
+ *  - **tiny** (`total < edge_min`): edge takes everything, corners 0.
+ */
+declare function negotiateAxis(total: number, corner_preferred: number, edge_min: number): {
+  corner: number;
+  edge: number;
+};
+/**
+ * Compute the selection control layout for a screen-space rect.
+ *
+ * Pure: no DOM, no global state. Same inputs → same zones.
+ *
+ * The perimeter ring straddles the bbox edge with `extension =
+ * hit_size / 2` overhang outside. Along each axis the run of length
+ * `axis_dim + 2 * extension` is split via {@link negotiateAxis} into
+ * `[corner | edge | corner]`. The 4 corners and 4 edges in 2D then tile
+ * the ring as a strict 3×3 grid of cells — **non-overlapping**. Body
+ * sits at rect_screen and may overlap with the ring's inside-bbox half
+ * in comfortable mode; priority resolves those overlaps.
+ *
+ * See the comment block in this file for the full principle.
+ */
+declare function computeSelectionControlLayout(rect_screen: Rect, opts: {
+  handle_size: number;
+  show_rotation: boolean;
+}): SelectionControlLayout;
+//#endregion
+export { BODY_FLIP_THRESHOLD, type CursorIcon, type CursorRenderer, DEFAULT_PIXEL_GRID_COLOR, DEFAULT_PIXEL_GRID_STEPS, type DrawPixelGridParams, HUDCanvas, type HUDCanvasOptions, type HUDDraw, HUDHitPriority, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_GUARANTEED_INTERACTIVE_DIM, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PixelGridConfig, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectMode, type SelectionControlLayout, type SelectionControlRole, type SelectionControlZone, type SelectionGroup, type SelectionShape, Surface, type SurfaceChromeGroups, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, type SurfaceVisibility, type SurfaceVisibilityContext, type SurfaceVisibilityPolicy, computeSelectionControlLayout, cursorEquals, cursorToCss, drawPixelGrid, filterHUDDrawByGroup, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, negotiateAxis, snapGuideToHUDDraw };

package/dist/index.js

@@ -1,11 +1,23 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_surface = require("./surface-CNlBaEXn.js");
+const require_surface = require("./surface-ofSNTJ8H.js");
+const require_cursor = require("./cursor-DsP9qtN2.js");
+exports.BODY_FLIP_THRESHOLD = require_surface.BODY_FLIP_THRESHOLD;
+exports.DEFAULT_PIXEL_GRID_COLOR = require_surface.DEFAULT_PIXEL_GRID_COLOR;
+exports.DEFAULT_PIXEL_GRID_STEPS = require_surface.DEFAULT_PIXEL_GRID_STEPS;
 exports.HUDCanvas = require_surface.HUDCanvas;
+exports.HUDHitPriority = require_surface.HUDHitPriority;
 exports.MIN_CHROME_VISIBLE_SIZE = require_surface.MIN_CHROME_VISIBLE_SIZE;
+exports.MIN_GUARANTEED_INTERACTIVE_DIM = require_surface.MIN_GUARANTEED_INTERACTIVE_DIM;
 exports.MIN_HIT_SIZE = require_surface.MIN_HIT_SIZE;
 exports.NO_MODS = require_surface.NO_MODS;
 exports.Surface = require_surface.Surface;
+exports.computeSelectionControlLayout = require_surface.computeSelectionControlLayout;
+exports.cursorEquals = require_cursor.cursorEquals;
+exports.cursorToCss = require_cursor.cursorToCss;
+exports.drawPixelGrid = require_surface.drawPixelGrid;
+exports.filterHUDDrawByGroup = require_surface.filterHUDDrawByGroup;
 exports.lassoToHUDDraw = require_surface.lassoToHUDDraw;
 exports.marqueeToHUDDraw = require_surface.marqueeToHUDDraw;
 exports.measurementToHUDDraw = require_surface.measurementToHUDDraw;
+exports.negotiateAxis = require_surface.negotiateAxis;
 exports.snapGuideToHUDDraw = require_surface.snapGuideToHUDDraw;

package/dist/index.mjs

@@ -1,2 +1,3 @@
-import { a as lassoToHUDDraw, c as snapGuideToHUDDraw, i as NO_MODS, l as HUDCanvas, n as MIN_CHROME_VISIBLE_SIZE, o as marqueeToHUDDraw, r as MIN_HIT_SIZE, s as measurementToHUDDraw, t as Surface } from "./surface-hUEeEVdL.mjs";
-export { HUDCanvas, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, NO_MODS, Surface, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };
+import { _ as DEFAULT_PIXEL_GRID_STEPS, a as computeSelectionControlLayout, c as MIN_HIT_SIZE, d as marqueeToHUDDraw, f as measurementToHUDDraw, g as DEFAULT_PIXEL_GRID_COLOR, h as HUDCanvas, i as MIN_GUARANTEED_INTERACTIVE_DIM, l as NO_MODS, m as filterHUDDrawByGroup, n as BODY_FLIP_THRESHOLD, o as negotiateAxis, p as snapGuideToHUDDraw, r as HUDHitPriority, s as MIN_CHROME_VISIBLE_SIZE, t as Surface, u as lassoToHUDDraw, v as drawPixelGrid } from "./surface-BvMmXoEl.mjs";
+import { i as cursorToCss, r as cursorEquals } from "./cursor-BieMVb71.mjs";
+export { BODY_FLIP_THRESHOLD, DEFAULT_PIXEL_GRID_COLOR, DEFAULT_PIXEL_GRID_STEPS, HUDCanvas, HUDHitPriority, MIN_CHROME_VISIBLE_SIZE, MIN_GUARANTEED_INTERACTIVE_DIM, MIN_HIT_SIZE, NO_MODS, Surface, computeSelectionControlLayout, cursorEquals, cursorToCss, drawPixelGrid, filterHUDDrawByGroup, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, negotiateAxis, snapGuideToHUDDraw };

package/dist/react.d.mts

@@ -1,4 +1,4 @@
-import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-CBqCh-ZM.mjs";
+import { L as HUDDraw, n as SurfaceOptions, t as Surface } from "./index-DhGdcuQz.mjs";
 import { Measurement } from "@grida/cmath/_measurement";
 import cmath from "@grida/cmath";
 import * as React from "react";

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-DRBeSiI2.js";
+import { L as HUDDraw, n as SurfaceOptions, t as Surface } from "./index-Cp0X4SV7.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-ofSNTJ8H.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, f as measurementToHUDDraw, h as HUDCanvas, p as snapGuideToHUDDraw, t as Surface, u as lassoToHUDDraw } from "./surface-BvMmXoEl.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;
 }