@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/modal/modal.css

@@ -0,0 +1,291 @@
+.ui-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ui-modal-z-index, 200);
+  display: block;
+  background: var(--ui-modal-overlay-bg, rgba(0, 0, 0, 0.48));
+  /* Opt in: .ide-workbench-overlays stays pointer-events:none so empty host
+     space does not shield the workbench; the modal surface must accept input. */
+  pointer-events: auto;
+}
+
+.ui-modal {
+  position: fixed;
+  margin: 0;
+  width: var(--ui-modal-width, 640px);
+  height: var(--ui-modal-height, auto);
+  max-width: none;
+  max-height: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+}
+
+.ui-modal[data-ready='false']:not([data-maximized='true']) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ui-modal[data-maximized='true'] {
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+
+.ide-workbench-overlays .ui-modal-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.ide-workbench-overlays .ui-modal {
+  position: absolute;
+  margin: 0;
+}
+
+.ide-workbench-overlays .ui-modal[data-maximized='true'] {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-modal__titlebar {
+  position: relative;
+  z-index: 2;
+  height: 34px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 10px 0 0;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-modal__titlebar-drag {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+}
+
+.ui-modal:not([data-maximized='true']) .ui-modal__titlebar-drag {
+  cursor: move;
+}
+
+.ui-modal__surface {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-modal__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-modal__title {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-modal__controls {
+  position: relative;
+  z-index: 3;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  align-self: center;
+  gap: 2px;
+}
+
+.ui-modal__control {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-modal__control:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-modal__body.ui-scroll-area--both {
+  overflow: auto;
+}
+
+.ui-modal__body.ui-scroll-area--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.ui-modal__body.ui-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ui-modal__body--stack {
+  display: grid;
+  align-content: start;
+  gap: var(--ui-modal-body-gap, 18px);
+}
+
+.ui-modal__body--padding-md {
+  padding: 20px;
+}
+
+.ui-modal__body--padding-lg {
+  padding: 22px 24px 24px;
+}
+
+.ui-modal__footer {
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 16px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.ui-modal__resize-handle {
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-modal__resize-handle--n,
+.ui-modal__resize-handle--s {
+  left: 8px;
+  right: 8px;
+  height: 6px;
+}
+
+.ui-modal__resize-handle--e,
+.ui-modal__resize-handle--w {
+  top: 8px;
+  bottom: 8px;
+  width: 6px;
+}
+
+.ui-modal__resize-handle--n {
+  top: 0;
+  cursor: ns-resize;
+}
+
+.ui-modal__resize-handle--s {
+  bottom: -3px;
+  cursor: ns-resize;
+}
+
+.ui-modal__resize-handle--e {
+  right: -3px;
+  cursor: ew-resize;
+}
+
+.ui-modal__resize-handle--w {
+  left: -3px;
+  cursor: ew-resize;
+}
+
+.ui-modal__resize-handle--ne,
+.ui-modal__resize-handle--nw,
+.ui-modal__resize-handle--se,
+.ui-modal__resize-handle--sw {
+  width: 12px;
+  height: 12px;
+}
+
+.ui-modal__resize-handle--ne {
+  top: 0;
+  right: -3px;
+  cursor: nesw-resize;
+}
+
+.ui-modal__resize-handle--nw {
+  top: 0;
+  left: -3px;
+  cursor: nwse-resize;
+}
+
+.ui-modal__resize-handle--se {
+  right: -3px;
+  bottom: -3px;
+  cursor: nwse-resize;
+}
+
+.ui-modal__resize-handle--sw {
+  left: -3px;
+  bottom: -3px;
+  cursor: nesw-resize;
+}
+
+.ui-confirm-dialog {
+  --ui-modal-width: 420px;
+}
+
+.ui-confirm-dialog__body {
+  padding: 20px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.ui-confirm-dialog__message {
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.ui-confirm-dialog__detail {
+  display: block;
+  padding: 8px;
+  overflow: hidden;
+  color: var(--color-text);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-confirm-dialog__detail code {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+}

package/src/modal/modalContainer.ts

@@ -0,0 +1,36 @@
+export const WORKBENCH_OVERLAYS_CLASS = 'ide-workbench-overlays';
+
+export interface ModalContainerBounds {
+  height: number;
+  width: number;
+}
+
+export function resolveModalContainer(element: HTMLElement | null): HTMLElement | null {
+  if (element === null) {
+    return null;
+  }
+
+  return element.closest(`.${WORKBENCH_OVERLAYS_CLASS}`);
+}
+
+export function readWindowViewportBounds(): ModalContainerBounds {
+  if (typeof window === 'undefined') {
+    return { height: 0, width: 0 };
+  }
+
+  return {
+    height: window.innerHeight,
+    width: window.innerWidth,
+  };
+}
+
+export function readModalContainerBounds(container: HTMLElement | null): ModalContainerBounds {
+  if (container !== null) {
+    return {
+      height: container.clientHeight,
+      width: container.clientWidth,
+    };
+  }
+
+  return readWindowViewportBounds();
+}

package/src/modal/modalPosition.ts

@@ -0,0 +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);
+}

package/src/modal/modalSize.ts

@@ -0,0 +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;
+}

package/src/modal/modalTypes.ts

@@ -0,0 +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';

package/src/modal/useModalContainerViewport.ts

@@ -0,0 +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;
+}

package/src/modal/useModalDrag.ts

@@ -0,0 +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,
+  };
+}