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

package/src/modal/modalPosition.ts

@@ -1,36 +1,36 @@
-import type { ModalBounds, ModalPosition, ModalSize } from './modalTypes';
-import type { ModalContainerBounds } from './modalContainer';
-import { readWindowViewportBounds } from './modalContainer';
-
-/**
- * VS Code-style floating window bounds:
- * - Keep the full window inside the viewport when it fits.
- * - When taller than the viewport, pin to the top so the titlebar stays reachable.
- */
-export function clampModalDragPosition(
-  nextPosition: ModalPosition,
-  size: ModalSize,
-  viewport: ModalContainerBounds = readWindowViewportBounds(),
-): ModalPosition {
-  if (typeof window === 'undefined') {
-    return nextPosition;
-  }
-
-  const maxX = Math.max(0, viewport.width - size.width);
-  const x = clamp(nextPosition.x, 0, maxX);
-  const maxY = size.height >= viewport.height ? 0 : Math.max(0, viewport.height - size.height);
-  const y = clamp(nextPosition.y, 0, maxY);
-
-  return { x, y };
-}
-
-export function clampModalBoundsPosition(
-  bounds: ModalBounds,
-  viewport: ModalContainerBounds = readWindowViewportBounds(),
-): ModalBounds {
-  return { ...bounds, ...clampModalDragPosition(bounds, bounds, viewport) };
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
+import type { ModalBounds, ModalPosition, ModalSize } from './modalTypes';
+import type { ModalContainerBounds } from './modalContainer';
+import { readWindowViewportBounds } from './modalContainer';
+
+/**
+ * VS Code-style floating window bounds:
+ * - Keep the full window inside the viewport when it fits.
+ * - When taller than the viewport, pin to the top so the titlebar stays reachable.
+ */
+export function clampModalDragPosition(
+  nextPosition: ModalPosition,
+  size: ModalSize,
+  viewport: ModalContainerBounds = readWindowViewportBounds(),
+): ModalPosition {
+  if (typeof window === 'undefined') {
+    return nextPosition;
+  }
+
+  const maxX = Math.max(0, viewport.width - size.width);
+  const x = clamp(nextPosition.x, 0, maxX);
+  const maxY = size.height >= viewport.height ? 0 : Math.max(0, viewport.height - size.height);
+  const y = clamp(nextPosition.y, 0, maxY);
+
+  return { x, y };
+}
+
+export function clampModalBoundsPosition(
+  bounds: ModalBounds,
+  viewport: ModalContainerBounds = readWindowViewportBounds(),
+): ModalBounds {
+  return { ...bounds, ...clampModalDragPosition(bounds, bounds, viewport) };
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/modal/modalSize.ts

@@ -1,84 +1,84 @@
-import type { ModalBounds, ModalResizeEdge } from './modalTypes';
-import type { ModalContainerBounds } from './modalContainer';
-import { readWindowViewportBounds } from './modalContainer';
-
-export interface ModalSizeConstraints {
-  minWidth: number;
-  minHeight: number;
-}
-
-export function clampModalBounds(
-  bounds: ModalBounds,
-  constraints: ModalSizeConstraints,
-  viewport: ModalContainerBounds = readWindowViewportBounds(),
-): ModalBounds {
-  if (typeof window === 'undefined') {
-    return bounds;
-  }
-
-  let { x, y, width, height } = bounds;
-
-  width = Math.max(constraints.minWidth, width);
-  height = Math.max(constraints.minHeight, height);
-
-  if (x < 0) {
-    width += x;
-    x = 0;
-  }
-
-  if (y < 0) {
-    height += y;
-    y = 0;
-  }
-
-  width = Math.min(width, viewport.width - x);
-  height = Math.min(height, viewport.height - y);
-  height = Math.max(constraints.minHeight, height);
-
-  return { x, y, width, height };
-}
-
-export function applyModalResize(
-  start: ModalBounds,
-  edge: ModalResizeEdge,
-  deltaX: number,
-  deltaY: number,
-  constraints: ModalSizeConstraints,
-  viewport: ModalContainerBounds = readWindowViewportBounds(),
-): ModalBounds {
-  let { x, y, width, height } = start;
-
-  if (edge.includes('e')) {
-    width += deltaX;
-  }
-
-  if (edge.includes('w')) {
-    x += deltaX;
-    width -= deltaX;
-  }
-
-  if (edge.includes('s')) {
-    height += deltaY;
-  }
-
-  if (edge.includes('n')) {
-    y += deltaY;
-    height -= deltaY;
-  }
-
-  return clampModalBounds({ x, y, width, height }, constraints, viewport);
-}
-
-export function readCssModalDimension(
-  element: HTMLElement,
-  variableName: '--ui-modal-width' | '--ui-modal-height',
-  fallback: number,
-): number {
-  const value = getComputedStyle(element).getPropertyValue(variableName).trim();
-  if (!value) {
-    return fallback;
-  }
-
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) ? parsed : fallback;
-}
+import type { ModalBounds, ModalResizeEdge } from './modalTypes';
+import type { ModalContainerBounds } from './modalContainer';
+import { readWindowViewportBounds } from './modalContainer';
+
+export interface ModalSizeConstraints {
+  minWidth: number;
+  minHeight: number;
+}
+
+export function clampModalBounds(
+  bounds: ModalBounds,
+  constraints: ModalSizeConstraints,
+  viewport: ModalContainerBounds = readWindowViewportBounds(),
+): ModalBounds {
+  if (typeof window === 'undefined') {
+    return bounds;
+  }
+
+  let { x, y, width, height } = bounds;
+
+  width = Math.max(constraints.minWidth, width);
+  height = Math.max(constraints.minHeight, height);
+
+  if (x < 0) {
+    width += x;
+    x = 0;
+  }
+
+  if (y < 0) {
+    height += y;
+    y = 0;
+  }
+
+  width = Math.min(width, viewport.width - x);
+  height = Math.min(height, viewport.height - y);
+  height = Math.max(constraints.minHeight, height);
+
+  return { x, y, width, height };
+}
+
+export function applyModalResize(
+  start: ModalBounds,
+  edge: ModalResizeEdge,
+  deltaX: number,
+  deltaY: number,
+  constraints: ModalSizeConstraints,
+  viewport: ModalContainerBounds = readWindowViewportBounds(),
+): ModalBounds {
+  let { x, y, width, height } = start;
+
+  if (edge.includes('e')) {
+    width += deltaX;
+  }
+
+  if (edge.includes('w')) {
+    x += deltaX;
+    width -= deltaX;
+  }
+
+  if (edge.includes('s')) {
+    height += deltaY;
+  }
+
+  if (edge.includes('n')) {
+    y += deltaY;
+    height -= deltaY;
+  }
+
+  return clampModalBounds({ x, y, width, height }, constraints, viewport);
+}
+
+export function readCssModalDimension(
+  element: HTMLElement,
+  variableName: '--ui-modal-width' | '--ui-modal-height',
+  fallback: number,
+): number {
+  const value = getComputedStyle(element).getPropertyValue(variableName).trim();
+  if (!value) {
+    return fallback;
+  }
+
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}

package/src/modal/modalTypes.ts

@@ -1,13 +1,13 @@
-export interface ModalPosition {
-  x: number;
-  y: number;
-}
-
-export interface ModalSize {
-  width: number;
-  height: number;
-}
-
-export interface ModalBounds extends ModalPosition, ModalSize {}
-
-export type ModalResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export interface ModalPosition {
+  x: number;
+  y: number;
+}
+
+export interface ModalSize {
+  width: number;
+  height: number;
+}
+
+export interface ModalBounds extends ModalPosition, ModalSize {}
+
+export type ModalResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';

package/src/modal/useModalContainerViewport.ts

@@ -1,41 +1,41 @@
-import { useEffect, useState, type RefObject } from 'react';
-
-import {
-  readModalContainerBounds,
-  readWindowViewportBounds,
-  resolveModalContainer,
-  type ModalContainerBounds,
-} from './modalContainer';
-
-export function useModalContainerViewport(
-  frameRef: RefObject<HTMLDivElement | HTMLFormElement | null>,
-  frameVersion: number,
-): ModalContainerBounds {
-  const [viewport, setViewport] = useState<ModalContainerBounds>(() => readWindowViewportBounds());
-
-  useEffect(() => {
-    const frame = frameRef.current;
-    const container = resolveModalContainer(frame);
-
-    const updateViewport = (): void => {
-      setViewport(readModalContainerBounds(container));
-    };
-
-    updateViewport();
-
-    if (container !== null) {
-      const observer = new ResizeObserver(updateViewport);
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-      };
-    }
-
-    window.addEventListener('resize', updateViewport);
-    return () => {
-      window.removeEventListener('resize', updateViewport);
-    };
-  }, [frameRef, frameVersion]);
-
-  return viewport;
-}
+import { useEffect, useState, type RefObject } from 'react';
+
+import {
+  readModalContainerBounds,
+  readWindowViewportBounds,
+  resolveModalContainer,
+  type ModalContainerBounds,
+} from './modalContainer';
+
+export function useModalContainerViewport(
+  frameRef: RefObject<HTMLDivElement | HTMLFormElement | null>,
+  frameVersion: number,
+): ModalContainerBounds {
+  const [viewport, setViewport] = useState<ModalContainerBounds>(() => readWindowViewportBounds());
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    const container = resolveModalContainer(frame);
+
+    const updateViewport = (): void => {
+      setViewport(readModalContainerBounds(container));
+    };
+
+    updateViewport();
+
+    if (container !== null) {
+      const observer = new ResizeObserver(updateViewport);
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    window.addEventListener('resize', updateViewport);
+    return () => {
+      window.removeEventListener('resize', updateViewport);
+    };
+  }, [frameRef, frameVersion]);
+
+  return viewport;
+}

package/src/modal/useModalDrag.ts

@@ -1,118 +1,118 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type Dispatch,
-  type PointerEvent as ReactPointerEvent,
-  type SetStateAction,
-} from 'react';
-import { clampModalDragPosition } from './modalPosition';
-import type { ModalContainerBounds } from './modalContainer';
-import type { ModalBounds } from './modalTypes';
-
-interface ModalDragState {
-  pointerId: number;
-  startClientX: number;
-  startClientY: number;
-  startBounds: ModalBounds;
-}
-
-interface UseModalDragOptions {
-  bounds: ModalBounds | null;
-  maximized: boolean;
-  setBounds: Dispatch<SetStateAction<ModalBounds | null>>;
-  viewport: ModalContainerBounds;
-}
-
-export function useModalDrag({ bounds, maximized, setBounds, viewport }: UseModalDragOptions) {
-  const dragStateRef = useRef<ModalDragState | null>(null);
-  const [dragging, setDragging] = useState(false);
-
-  const stopDragging = useCallback(() => {
-    dragStateRef.current = null;
-    setDragging(false);
-  }, []);
-
-  const handleTitlebarPointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (maximized || event.button !== 0 || !bounds) {
-        return;
-      }
-
-      dragStateRef.current = {
-        pointerId: event.pointerId,
-        startBounds: bounds,
-        startClientX: event.clientX,
-        startClientY: event.clientY,
-      };
-
-      event.preventDefault();
-      if (typeof event.currentTarget.setPointerCapture === 'function') {
-        event.currentTarget.setPointerCapture(event.pointerId);
-      }
-      setDragging(true);
-    },
-    [bounds, maximized],
-  );
-
-  useEffect(() => {
-    if (!dragging) {
-      return undefined;
-    }
-
-    const previousCursor = document.body.style.cursor;
-    const previousUserSelect = document.body.style.userSelect;
-
-    document.body.style.cursor = 'move';
-    document.body.style.userSelect = 'none';
-
-    const handlePointerMove = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (!dragState || event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      event.preventDefault();
-      const nextPosition = clampModalDragPosition(
-        {
-          x: dragState.startBounds.x + (event.clientX - dragState.startClientX),
-          y: dragState.startBounds.y + (event.clientY - dragState.startClientY),
-        },
-        dragState.startBounds,
-        viewport,
-      );
-
-      setBounds({
-        ...dragState.startBounds,
-        ...nextPosition,
-      });
-    };
-
-    const handlePointerUp = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (dragState && event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      stopDragging();
-    };
-
-    window.addEventListener('pointermove', handlePointerMove, { passive: false });
-    window.addEventListener('pointerup', handlePointerUp);
-    window.addEventListener('pointercancel', handlePointerUp);
-
-    return () => {
-      document.body.style.cursor = previousCursor;
-      document.body.style.userSelect = previousUserSelect;
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', handlePointerUp);
-      window.removeEventListener('pointercancel', handlePointerUp);
-    };
-  }, [dragging, setBounds, stopDragging, viewport]);
-
-  return {
-    handleTitlebarPointerDown,
-    stopDragging,
-  };
-}
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type PointerEvent as ReactPointerEvent,
+  type SetStateAction,
+} from 'react';
+import { clampModalDragPosition } from './modalPosition';
+import type { ModalContainerBounds } from './modalContainer';
+import type { ModalBounds } from './modalTypes';
+
+interface ModalDragState {
+  pointerId: number;
+  startClientX: number;
+  startClientY: number;
+  startBounds: ModalBounds;
+}
+
+interface UseModalDragOptions {
+  bounds: ModalBounds | null;
+  maximized: boolean;
+  setBounds: Dispatch<SetStateAction<ModalBounds | null>>;
+  viewport: ModalContainerBounds;
+}
+
+export function useModalDrag({ bounds, maximized, setBounds, viewport }: UseModalDragOptions) {
+  const dragStateRef = useRef<ModalDragState | null>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const stopDragging = useCallback(() => {
+    dragStateRef.current = null;
+    setDragging(false);
+  }, []);
+
+  const handleTitlebarPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (maximized || event.button !== 0 || !bounds) {
+        return;
+      }
+
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startBounds: bounds,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+      };
+
+      event.preventDefault();
+      if (typeof event.currentTarget.setPointerCapture === 'function') {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }
+      setDragging(true);
+    },
+    [bounds, maximized],
+  );
+
+  useEffect(() => {
+    if (!dragging) {
+      return undefined;
+    }
+
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+
+    document.body.style.cursor = 'move';
+    document.body.style.userSelect = 'none';
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const dragState = dragStateRef.current;
+      if (!dragState || event.pointerId !== dragState.pointerId) {
+        return;
+      }
+
+      event.preventDefault();
+      const nextPosition = clampModalDragPosition(
+        {
+          x: dragState.startBounds.x + (event.clientX - dragState.startClientX),
+          y: dragState.startBounds.y + (event.clientY - dragState.startClientY),
+        },
+        dragState.startBounds,
+        viewport,
+      );
+
+      setBounds({
+        ...dragState.startBounds,
+        ...nextPosition,
+      });
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      const dragState = dragStateRef.current;
+      if (dragState && event.pointerId !== dragState.pointerId) {
+        return;
+      }
+
+      stopDragging();
+    };
+
+    window.addEventListener('pointermove', handlePointerMove, { passive: false });
+    window.addEventListener('pointerup', handlePointerUp);
+    window.addEventListener('pointercancel', handlePointerUp);
+
+    return () => {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+      window.removeEventListener('pointercancel', handlePointerUp);
+    };
+  }, [dragging, setBounds, stopDragging, viewport]);
+
+  return {
+    handleTitlebarPointerDown,
+    stopDragging,
+  };
+}