@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/overlay/measureAnchoredOverlayPanel.ts

@@ -1,107 +1,107 @@
-export type AnchoredOverlayPlacement = 'side' | 'below' | 'above';
-
-export interface MeasureAnchoredOverlayPanelOptions {
-  readonly panelWidthPx?: number;
-  readonly viewportPaddingPx?: number;
-  readonly anchorGapPx?: number;
-  readonly maxHeightRatio?: number;
-  readonly sidePreferTriggerLeftRatio?: number;
-}
-
-export interface AnchoredOverlayPanelRect {
-  readonly top: number;
-  readonly left: number;
-  readonly width: number;
-  readonly maxHeight: number;
-  readonly placement: AnchoredOverlayPlacement;
-}
-
-const DEFAULT_PANEL_WIDTH_PX = 360;
-const DEFAULT_VIEWPORT_PADDING_PX = 8;
-const DEFAULT_ANCHOR_GAP_PX = 6;
-const DEFAULT_MAX_HEIGHT_RATIO = 0.72;
-const DEFAULT_SIDE_PREFER_TRIGGER_LEFT_RATIO = 0.42;
-/** Assumed minimum panel height when clamping side placement into the viewport. */
-const SIDE_MIN_VISIBLE_HEIGHT_PX = 240;
-/** Prefer below when at least this many pixels are available under the trigger. */
-const BELOW_MIN_SPACE_PX = 12;
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Measure a panel-sized overlay anchored to a trigger element.
- * Prefers a side flyout when the trigger sits in the left portion of the
- * viewport and there is room; otherwise places below or above.
- */
-export function measureAnchoredOverlayPanel(
-  trigger: HTMLElement,
-  options: MeasureAnchoredOverlayPanelOptions = {},
-): AnchoredOverlayPanelRect {
-  const panelWidthPx = options.panelWidthPx ?? DEFAULT_PANEL_WIDTH_PX;
-  const viewportPaddingPx = options.viewportPaddingPx ?? DEFAULT_VIEWPORT_PADDING_PX;
-  const anchorGapPx = options.anchorGapPx ?? DEFAULT_ANCHOR_GAP_PX;
-  const maxHeightRatio = options.maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
-  const sidePreferTriggerLeftRatio =
-    options.sidePreferTriggerLeftRatio ?? DEFAULT_SIDE_PREFER_TRIGGER_LEFT_RATIO;
-
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  const triggerRect = trigger.getBoundingClientRect();
-
-  const maxHeight = Math.min(
-    viewportHeight * maxHeightRatio,
-    viewportHeight - viewportPaddingPx * 2,
-  );
-  const width = Math.min(panelWidthPx, viewportWidth - viewportPaddingPx * 2);
-
-  const spaceRight = Math.max(0, viewportWidth - triggerRect.right - viewportPaddingPx);
-  const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - viewportPaddingPx);
-  const spaceAbove = Math.max(0, triggerRect.top - viewportPaddingPx);
-
-  const preferSide =
-    triggerRect.left < sidePreferTriggerLeftRatio * viewportWidth && spaceRight >= width;
-
-  if (preferSide) {
-    const minVisibleHeight = Math.min(SIDE_MIN_VISIBLE_HEIGHT_PX, maxHeight);
-    const top = clamp(
-      triggerRect.top,
-      viewportPaddingPx,
-      viewportHeight - viewportPaddingPx - minVisibleHeight,
-    );
-    return {
-      placement: 'side',
-      top,
-      left: triggerRect.right + anchorGapPx,
-      width,
-      maxHeight,
-    };
-  }
-
-  // Align the panel's right edge toward the trigger's right, then clamp.
-  const left = clamp(
-    triggerRect.right - width,
-    viewportPaddingPx,
-    viewportWidth - viewportPaddingPx - width,
-  );
-
-  if (spaceBelow >= BELOW_MIN_SPACE_PX || spaceBelow >= spaceAbove) {
-    return {
-      placement: 'below',
-      top: triggerRect.bottom + anchorGapPx,
-      left,
-      width,
-      maxHeight,
-    };
-  }
-
-  const aboveHeight = Math.min(maxHeight, spaceAbove);
-  return {
-    placement: 'above',
-    top: triggerRect.top - anchorGapPx - aboveHeight,
-    left,
-    width,
-    maxHeight,
-  };
-}
+export type AnchoredOverlayPlacement = 'side' | 'below' | 'above';
+
+export interface MeasureAnchoredOverlayPanelOptions {
+  readonly panelWidthPx?: number;
+  readonly viewportPaddingPx?: number;
+  readonly anchorGapPx?: number;
+  readonly maxHeightRatio?: number;
+  readonly sidePreferTriggerLeftRatio?: number;
+}
+
+export interface AnchoredOverlayPanelRect {
+  readonly top: number;
+  readonly left: number;
+  readonly width: number;
+  readonly maxHeight: number;
+  readonly placement: AnchoredOverlayPlacement;
+}
+
+const DEFAULT_PANEL_WIDTH_PX = 360;
+const DEFAULT_VIEWPORT_PADDING_PX = 8;
+const DEFAULT_ANCHOR_GAP_PX = 6;
+const DEFAULT_MAX_HEIGHT_RATIO = 0.72;
+const DEFAULT_SIDE_PREFER_TRIGGER_LEFT_RATIO = 0.42;
+/** Assumed minimum panel height when clamping side placement into the viewport. */
+const SIDE_MIN_VISIBLE_HEIGHT_PX = 240;
+/** Prefer below when at least this many pixels are available under the trigger. */
+const BELOW_MIN_SPACE_PX = 12;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Measure a panel-sized overlay anchored to a trigger element.
+ * Prefers a side flyout when the trigger sits in the left portion of the
+ * viewport and there is room; otherwise places below or above.
+ */
+export function measureAnchoredOverlayPanel(
+  trigger: HTMLElement,
+  options: MeasureAnchoredOverlayPanelOptions = {},
+): AnchoredOverlayPanelRect {
+  const panelWidthPx = options.panelWidthPx ?? DEFAULT_PANEL_WIDTH_PX;
+  const viewportPaddingPx = options.viewportPaddingPx ?? DEFAULT_VIEWPORT_PADDING_PX;
+  const anchorGapPx = options.anchorGapPx ?? DEFAULT_ANCHOR_GAP_PX;
+  const maxHeightRatio = options.maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
+  const sidePreferTriggerLeftRatio =
+    options.sidePreferTriggerLeftRatio ?? DEFAULT_SIDE_PREFER_TRIGGER_LEFT_RATIO;
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const triggerRect = trigger.getBoundingClientRect();
+
+  const maxHeight = Math.min(
+    viewportHeight * maxHeightRatio,
+    viewportHeight - viewportPaddingPx * 2,
+  );
+  const width = Math.min(panelWidthPx, viewportWidth - viewportPaddingPx * 2);
+
+  const spaceRight = Math.max(0, viewportWidth - triggerRect.right - viewportPaddingPx);
+  const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - viewportPaddingPx);
+  const spaceAbove = Math.max(0, triggerRect.top - viewportPaddingPx);
+
+  const preferSide =
+    triggerRect.left < sidePreferTriggerLeftRatio * viewportWidth && spaceRight >= width;
+
+  if (preferSide) {
+    const minVisibleHeight = Math.min(SIDE_MIN_VISIBLE_HEIGHT_PX, maxHeight);
+    const top = clamp(
+      triggerRect.top,
+      viewportPaddingPx,
+      viewportHeight - viewportPaddingPx - minVisibleHeight,
+    );
+    return {
+      placement: 'side',
+      top,
+      left: triggerRect.right + anchorGapPx,
+      width,
+      maxHeight,
+    };
+  }
+
+  // Align the panel's right edge toward the trigger's right, then clamp.
+  const left = clamp(
+    triggerRect.right - width,
+    viewportPaddingPx,
+    viewportWidth - viewportPaddingPx - width,
+  );
+
+  if (spaceBelow >= BELOW_MIN_SPACE_PX || spaceBelow >= spaceAbove) {
+    return {
+      placement: 'below',
+      top: triggerRect.bottom + anchorGapPx,
+      left,
+      width,
+      maxHeight,
+    };
+  }
+
+  const aboveHeight = Math.min(maxHeight, spaceAbove);
+  return {
+    placement: 'above',
+    top: triggerRect.top - anchorGapPx - aboveHeight,
+    left,
+    width,
+    maxHeight,
+  };
+}

package/src/overlay/overlay.css

@@ -1,2 +1,2 @@
-/* Overlay surfaces */
-@import './context-menu.css';
+/* Overlay surfaces */
+@import './context-menu.css';

package/src/overlay/pointerPassthroughRegion.ts

@@ -1,83 +1,83 @@
-export interface PointerPassthroughPort {
-  setPointerPassthrough(enabled: boolean): void | Promise<void>;
-}
-
-export interface PointerOverHitRegionOptions {
-  readonly hitSelectors: readonly string[];
-  readonly controlSelectors?: readonly string[];
-  readonly root?: HTMLElement | null;
-}
-
-/**
- * Returns true when `target` matches any host-provided hit/control selector
- * (and, when `root` is set, lies inside that root).
- */
-export function isPointerOverHitRegion(
-  target: EventTarget | null,
-  options: PointerOverHitRegionOptions,
-): boolean {
-  if (!(target instanceof Element)) {
-    return false;
-  }
-
-  const root = options.root ?? null;
-  if (root !== null && !root.contains(target)) {
-    return false;
-  }
-
-  const selectors = [...options.hitSelectors, ...(options.controlSelectors ?? [])];
-  for (const selector of selectors) {
-    if (selector.length === 0) {
-      continue;
-    }
-    if (target.closest(selector) !== null) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export interface PointerPassthroughControllerOptions extends PointerOverHitRegionOptions {
-  readonly enabled: boolean;
-  readonly port: PointerPassthroughPort;
-}
-
-export interface PointerPassthroughController {
-  handlePointerTarget(target: EventTarget | null): void;
-  /** Force the next decision to notify the port even if unchanged. */
-  reset(): void;
-}
-
-/**
- * Pure controller for overlay click-through: when the pointer is outside
- * host-provided selectors, ask the port to enable passthrough.
- * Pair with platform `applyWindowResidency(..., 'click-through')` on the main side.
- */
-export function createPointerPassthroughController(
-  options: PointerPassthroughControllerOptions,
-): PointerPassthroughController {
-  let lastPassthrough: boolean | null = null;
-
-  return {
-    reset() {
-      lastPassthrough = null;
-    },
-    handlePointerTarget(target: EventTarget | null) {
-      if (!options.enabled) {
-        if (lastPassthrough !== false) {
-          lastPassthrough = false;
-          void options.port.setPointerPassthrough(false);
-        }
-        return;
-      }
-
-      const overHit = isPointerOverHitRegion(target, options);
-      const passthrough = !overHit;
-      if (passthrough === lastPassthrough) {
-        return;
-      }
-      lastPassthrough = passthrough;
-      void options.port.setPointerPassthrough(passthrough);
-    },
-  };
-}
+export interface PointerPassthroughPort {
+  setPointerPassthrough(enabled: boolean): void | Promise<void>;
+}
+
+export interface PointerOverHitRegionOptions {
+  readonly hitSelectors: readonly string[];
+  readonly controlSelectors?: readonly string[];
+  readonly root?: HTMLElement | null;
+}
+
+/**
+ * Returns true when `target` matches any host-provided hit/control selector
+ * (and, when `root` is set, lies inside that root).
+ */
+export function isPointerOverHitRegion(
+  target: EventTarget | null,
+  options: PointerOverHitRegionOptions,
+): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  const root = options.root ?? null;
+  if (root !== null && !root.contains(target)) {
+    return false;
+  }
+
+  const selectors = [...options.hitSelectors, ...(options.controlSelectors ?? [])];
+  for (const selector of selectors) {
+    if (selector.length === 0) {
+      continue;
+    }
+    if (target.closest(selector) !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export interface PointerPassthroughControllerOptions extends PointerOverHitRegionOptions {
+  readonly enabled: boolean;
+  readonly port: PointerPassthroughPort;
+}
+
+export interface PointerPassthroughController {
+  handlePointerTarget(target: EventTarget | null): void;
+  /** Force the next decision to notify the port even if unchanged. */
+  reset(): void;
+}
+
+/**
+ * Pure controller for overlay click-through: when the pointer is outside
+ * host-provided selectors, ask the port to enable passthrough.
+ * Pair with platform `applyWindowResidency(..., 'click-through')` on the main side.
+ */
+export function createPointerPassthroughController(
+  options: PointerPassthroughControllerOptions,
+): PointerPassthroughController {
+  let lastPassthrough: boolean | null = null;
+
+  return {
+    reset() {
+      lastPassthrough = null;
+    },
+    handlePointerTarget(target: EventTarget | null) {
+      if (!options.enabled) {
+        if (lastPassthrough !== false) {
+          lastPassthrough = false;
+          void options.port.setPointerPassthrough(false);
+        }
+        return;
+      }
+
+      const overHit = isPointerOverHitRegion(target, options);
+      const passthrough = !overHit;
+      if (passthrough === lastPassthrough) {
+        return;
+      }
+      lastPassthrough = passthrough;
+      void options.port.setPointerPassthrough(passthrough);
+    },
+  };
+}