@optilogic/core 1.0.0-beta.0

package/src/components/resizable-panel.tsx

@@ -0,0 +1,434 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+import { ResizeHandle } from "./resize-handle";
+
+export interface ResizablePanelProps {
+  /**
+   * Which edge the panel anchors to
+   */
+  orientation: "left" | "right";
+
+  /**
+   * Default collapsed width in vw
+   */
+  collapsedSizeVW: number;
+
+  /**
+   * Current expanded width in vw (controlled prop)
+   */
+  expandedWidthVW?: number;
+
+  /**
+   * Minimum width in vw
+   */
+  minWidthVW?: number;
+
+  /**
+   * Maximum width in vw
+   */
+  maxWidthVW?: number;
+
+  /**
+   * Whether the panel is expanded (drawer) vs collapsed
+   */
+  isExpanded: boolean;
+
+  /**
+   * Whether the panel is in overlay mode
+   */
+  isOverlay?: boolean;
+
+  /**
+   * When in overlay mode, the outer panel width in vw
+   */
+  outerWidthVW?: number;
+
+  /**
+   * When in overlay mode, the inner panel width in vw
+   */
+  innerWidthVW?: number;
+
+  /**
+   * Current left panel width in vw (needed for overlay positioning and dynamic constraints)
+   */
+  leftWidthVW?: number;
+
+  /**
+   * Whether the panel is resizable
+   */
+  resizable?: boolean;
+
+  /**
+   * Show/hide the resize handle
+   */
+  showHandle?: boolean;
+
+  /**
+   * Callback during resize; emits clamped value in vw
+   */
+  onResize?: (widthVW: number) => void;
+
+  /**
+   * Callback for collapse/expand toggle
+   */
+  onToggle?: (next: boolean) => void;
+
+  /**
+   * Callback to promote to overlay mode
+   */
+  onPromoteToOverlay?: () => void;
+
+  /**
+   * Callback to demote from overlay mode
+   */
+  onDemoteFromOverlay?: () => void;
+
+  /**
+   * Callback when resizing the overlay outer/inner split
+   */
+  onResizeOverlay?: (outerWidthVW: number) => void;
+
+  /**
+   * ARIA label for the resize handle
+   */
+  handleAriaLabel?: string;
+
+  /**
+   * Optional header slot
+   */
+  slotHeader?: React.ReactNode;
+
+  /**
+   * Optional footer slot
+   */
+  slotFooter?: React.ReactNode;
+
+  /**
+   * Optional inner panel content (for overlay mode)
+   */
+  innerPanelContent?: React.ReactNode;
+
+  /**
+   * Panel content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional class names
+   */
+  className?: string;
+
+  /**
+   * Data attributes for styling/state
+   */
+  dataAttributes?: Record<string, string>;
+}
+
+/**
+ * ResizablePanel component
+ *
+ * A generic, framework-agnostic panel that can collapse, expand, resize,
+ * and promote to overlay mode. Backs both left (search) and right (preview) panels.
+ */
+export function ResizablePanel({
+  orientation,
+  collapsedSizeVW,
+  expandedWidthVW,
+  minWidthVW = 5,
+  maxWidthVW = 90,
+  isExpanded,
+  isOverlay = false,
+  outerWidthVW,
+  innerWidthVW,
+  leftWidthVW,
+  resizable = true,
+  showHandle = true,
+  onResize,
+  onToggle: _onToggle,
+  onPromoteToOverlay: _onPromoteToOverlay,
+  onDemoteFromOverlay,
+  onResizeOverlay,
+  handleAriaLabel,
+  slotHeader,
+  slotFooter,
+  innerPanelContent,
+  children,
+  className,
+  dataAttributes = {},
+}: ResizablePanelProps) {
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [localWidth, setLocalWidth] = React.useState<number | null>(null);
+  const [localOuterWidth, setLocalOuterWidth] = React.useState<number | null>(null);
+
+  const currentWidthVW = isExpanded
+    ? (isDragging && localWidth !== null ? localWidth : expandedWidthVW) ||
+      collapsedSizeVW
+    : collapsedSizeVW;
+
+  const clampWidth = React.useCallback(
+    (width: number): number => {
+      let effectiveMinWidth = minWidthVW;
+      let effectiveMaxWidth = maxWidthVW;
+
+      if (orientation === "right" && leftWidthVW !== undefined && !isOverlay) {
+        const availableSpace = 100 - leftWidthVW - 3;
+        const maxFromSpace = Math.max(effectiveMinWidth, availableSpace - 33);
+        effectiveMaxWidth = Math.min(maxWidthVW, maxFromSpace);
+      }
+
+      return Math.max(effectiveMinWidth, Math.min(effectiveMaxWidth, width));
+    },
+    [minWidthVW, maxWidthVW, orientation, leftWidthVW, isOverlay]
+  );
+
+  const handleDragStart = React.useCallback(() => {
+    setIsDragging(true);
+    setLocalWidth(currentWidthVW);
+  }, [currentWidthVW]);
+
+  const handleDrag = React.useCallback(
+    (deltaX: number) => {
+      if (!isExpanded || isOverlay) return;
+
+      const viewportWidth = window.innerWidth;
+      const deltaVW = (deltaX / viewportWidth) * 100;
+
+      const adjustedDelta = orientation === "left" ? deltaVW : -deltaVW;
+      const baseWidth = localWidth !== null ? localWidth : currentWidthVW;
+      const newWidth = clampWidth(baseWidth + adjustedDelta);
+
+      setLocalWidth(newWidth);
+    },
+    [
+      isExpanded,
+      isOverlay,
+      orientation,
+      localWidth,
+      currentWidthVW,
+      clampWidth,
+    ]
+  );
+
+  const handleDragEnd = React.useCallback(() => {
+    if (localWidth !== null && onResize) {
+      onResize(localWidth);
+    }
+    setIsDragging(false);
+    setLocalWidth(null);
+  }, [localWidth, onResize]);
+
+  const handleKeyboardResize = React.useCallback(
+    (direction: 1 | -1) => {
+      if (!isExpanded || isOverlay || !onResize) return;
+
+      const step = 1;
+      const newWidth = clampWidth(currentWidthVW + step * direction);
+      onResize(newWidth);
+    },
+    [isExpanded, isOverlay, onResize, currentWidthVW, clampWidth]
+  );
+
+  const handleOverlayDragStart = React.useCallback(() => {
+    if (outerWidthVW) {
+      setIsDragging(true);
+      setLocalOuterWidth(outerWidthVW);
+    }
+  }, [outerWidthVW]);
+
+  const handleOverlayDrag = React.useCallback(
+    (deltaX: number) => {
+      if (!isOverlay) return;
+
+      const viewportWidth = window.innerWidth;
+      const deltaVW = (deltaX / viewportWidth) * 100;
+
+      const baseWidth =
+        localOuterWidth !== null ? localOuterWidth : outerWidthVW || 30;
+      const newOuterWidth = baseWidth - deltaVW;
+
+      setLocalOuterWidth(newOuterWidth);
+    },
+    [isOverlay, localOuterWidth, outerWidthVW]
+  );
+
+  const handleOverlayDragEnd = React.useCallback(() => {
+    if (localOuterWidth !== null && onResizeOverlay) {
+      onResizeOverlay(localOuterWidth);
+    }
+    setIsDragging(false);
+    setLocalOuterWidth(null);
+  }, [localOuterWidth, onResizeOverlay]);
+
+  React.useEffect(() => {
+    if (isOverlay && panelRef.current) {
+      const focusableElement = panelRef.current.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      focusableElement?.focus();
+    }
+  }, [isOverlay]);
+
+  React.useEffect(() => {
+    if (!isOverlay) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onDemoteFromOverlay?.();
+      }
+    };
+
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isOverlay, onDemoteFromOverlay]);
+
+  if (!isExpanded && !isOverlay) {
+    return (
+      <div
+        ref={panelRef}
+        className={cn(
+          "flex flex-col h-full",
+          "bg-background border-border",
+          orientation === "left" ? "border-r" : "border-l",
+          className
+        )}
+        style={{
+          width: `${collapsedSizeVW}vw`,
+          minWidth: "48px", // Ensure minimum pixel width to prevent squishing
+        }}
+        {...dataAttributes}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isOverlay && outerWidthVW && innerWidthVW) {
+    const displayOuterWidth =
+      isDragging && localOuterWidth !== null ? localOuterWidth : outerWidthVW;
+    const displayInnerWidth =
+      isDragging && localOuterWidth !== null
+        ? outerWidthVW + innerWidthVW - localOuterWidth
+        : innerWidthVW;
+
+    const overlayLeftPosition = leftWidthVW || 3;
+
+    return (
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        className={cn("fixed inset-y-0 z-30", "flex", className)}
+        style={{
+          left: `${overlayLeftPosition}vw`, // Start after left panel
+          right: `${3}vw`, // End before nav gutter (fixed right edge) - matches icon nav width
+          width: `${displayOuterWidth + displayInnerWidth}vw`,
+        }}
+        {...dataAttributes}
+      >
+        <div
+          className={cn(
+            "flex flex-col h-full",
+            "bg-background border-r border-border"
+          )}
+          style={{
+            width: `${displayInnerWidth}vw`,
+          }}
+        >
+          <div className="flex-1 overflow-auto p-4">
+            {innerPanelContent || (
+              <div className="text-muted-foreground text-sm">
+                Inner panel content area
+              </div>
+            )}
+          </div>
+        </div>
+
+        <ResizeHandle
+          orientation="right"
+          resizable={resizable}
+          showHandle={showHandle}
+          onDragStart={handleOverlayDragStart}
+          onDrag={handleOverlayDrag}
+          onDragEnd={handleOverlayDragEnd}
+          ariaLabel={handleAriaLabel || "Resize overlay panels"}
+        />
+
+        <div
+          className={cn("flex flex-col h-full", "bg-background border-border")}
+          style={{
+            width: `${displayOuterWidth}vw`,
+          }}
+        >
+          {slotHeader && (
+            <div className="flex-shrink-0 border-b border-border">
+              {slotHeader}
+            </div>
+          )}
+          <div className="flex-1 overflow-auto">{children}</div>
+          {slotFooter && (
+            <div className="flex-shrink-0 border-t border-border">
+              {slotFooter}
+          </div>
+        )}
+        </div>
+
+        <div
+          className="absolute inset-0 -z-10 bg-black/20"
+          onClick={() => onDemoteFromOverlay?.()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={panelRef}
+      className={cn(
+        "relative flex h-full min-w-0 overflow-hidden",
+        !isDragging && "transition-[width] duration-200 ease-out",
+        orientation === "left" ? "flex-row" : "flex-row-reverse",
+        className
+      )}
+      style={{
+        width: `${currentWidthVW}vw`,
+      }}
+      {...dataAttributes}
+    >
+      <div
+        className={cn(
+          "flex flex-col flex-1 min-w-0 overflow-hidden",
+          "bg-background border-border",
+          orientation === "left" ? "border-r" : "border-l"
+        )}
+      >
+        {slotHeader && (
+          <div className="flex-shrink-0 border-b border-border min-w-0 overflow-hidden">
+            {slotHeader}
+          </div>
+        )}
+        <div className="flex-1 overflow-hidden min-w-0">{children}</div>
+        {slotFooter && (
+          <div className="flex-shrink-0 border-t border-border">
+            {slotFooter}
+          </div>
+        )}
+      </div>
+
+      {isExpanded && (
+        <ResizeHandle
+          orientation={orientation}
+          resizable={resizable}
+          showHandle={showHandle}
+          onDragStart={handleDragStart}
+          onDrag={handleDrag}
+          onDragEnd={handleDragEnd}
+          onKeyboardResize={handleKeyboardResize}
+          ariaLabel={handleAriaLabel}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/resize-handle.tsx

@@ -0,0 +1,187 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+export interface ResizeHandleProps {
+  /**
+   * Orientation of the resize handle
+   */
+  orientation: "left" | "right";
+
+  /**
+   * Whether the handle is resizable (draggable)
+   */
+  resizable?: boolean;
+
+  /**
+   * Show/hide the handle UI
+   */
+  showHandle?: boolean;
+
+  /**
+   * Callback when drag starts
+   */
+  onDragStart?: () => void;
+
+  /**
+   * Callback during drag; receives pixel delta
+   */
+  onDrag?: (deltaX: number) => void;
+
+  /**
+   * Callback when drag ends
+   */
+  onDragEnd?: () => void;
+
+  /**
+   * Callback for keyboard resize (arrow keys)
+   */
+  onKeyboardResize?: (direction: 1 | -1) => void;
+
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel?: string;
+
+  /**
+   * Additional class names
+   */
+  className?: string;
+}
+
+/**
+ * ResizeHandle component
+ *
+ * A draggable handle for resizing panels with full keyboard and mouse support.
+ * Includes visual feedback, accessibility features, and smooth interactions.
+ */
+export function ResizeHandle({
+  orientation,
+  resizable = true,
+  showHandle = true,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  onKeyboardResize,
+  ariaLabel,
+  className,
+}: ResizeHandleProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const startXRef = React.useRef<number>(0);
+  const handleRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable) return;
+
+      e.preventDefault();
+      setIsDragging(true);
+      startXRef.current = e.clientX;
+
+      // Prevent text selection during drag
+      document.body.style.userSelect = "none";
+
+      // Notify start
+      onDragStart?.();
+    },
+    [resizable, onDragStart]
+  );
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+
+      const deltaX = e.clientX - startXRef.current;
+      startXRef.current = e.clientX;
+
+      onDrag?.(deltaX);
+    },
+    [isDragging, onDrag]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+    onDragEnd?.();
+  }, [isDragging, onDragEnd]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!resizable || !onKeyboardResize) return;
+
+      let direction: 1 | -1 | null = null;
+
+      // Left arrow = shrink from right / expand from left
+      // Right arrow = expand from right / shrink from left
+      if (e.key === "ArrowLeft") {
+        direction = orientation === "right" ? -1 : 1;
+      } else if (e.key === "ArrowRight") {
+        direction = orientation === "right" ? 1 : -1;
+      }
+
+      if (direction !== null) {
+        e.preventDefault();
+        const multiplier = e.shiftKey ? 5 : 1; // Shift = 5vw steps
+        for (let i = 0; i < multiplier; i++) {
+          onKeyboardResize(direction);
+        }
+      }
+    },
+    [resizable, onKeyboardResize, orientation]
+  );
+
+  // Attach global mouse listeners during drag
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  if (!showHandle) return null;
+
+  return (
+    <div
+      ref={handleRef}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={ariaLabel || `Resize handle ${orientation}`}
+      aria-valuenow={undefined}
+      tabIndex={resizable ? 0 : -1}
+      onMouseDown={handleMouseDown}
+      onKeyDown={handleKeyDown}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      className={cn(
+        // Base styles
+        "relative z-10 flex items-center justify-center",
+        "transition-colors duration-150",
+
+        // Hit area (wider for better UX)
+        "w-3",
+
+        // Cursor
+        resizable ? "cursor-col-resize" : "cursor-default",
+
+        // Focus state - no visible outline
+        "outline-none",
+
+        // Disabled state
+        !resizable && "opacity-50",
+
+        className
+      )}
+      style={{
+        touchAction: "none",
+      }}
+    />
+  );
+}