@tcn/ui 0.16.0 → 0.17.0

package/src/utils/resize/resizable.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo, useRef } from 'react';
+import { clsx } from 'clsx';
+import { useForkRef } from '../hooks/use_fork_ref.js';
+import { ResizableContext } from './context.js';
+import type {
+  OnWidthResize,
+  OnWidthResizeEnd,
+  OnHeightResize,
+  OnHeightResizeEnd,
+  ResizableContextValue,
+} from './types.js';
+import styles from './resizable.module.css';
+
+export interface ResizableProps {
+  children: React.ReactNode;
+  onWidthResize?: OnWidthResize;
+  onWidthResizeEnd?: OnWidthResizeEnd;
+  onHeightResize?: OnHeightResize;
+  onHeightResizeEnd?: OnHeightResizeEnd;
+}
+
+interface ResizableTargetProps {
+  className?: string;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement>;
+}
+
+type ResizableTarget = React.ReactElement<ResizableTargetProps>;
+
+function isResizableTarget(child: React.ReactNode): child is ResizableTarget {
+  if (!React.isValidElement(child)) return false;
+  const type = child.type;
+  if (typeof type === 'string') return true;
+  if (typeof type === 'function' || typeof type === 'object') {
+    return (type as { displayName?: string }).displayName !== 'ResizeHandle';
+  }
+  return false;
+}
+
+function isResizeHandle(child: React.ReactNode): boolean {
+  return React.isValidElement(child) && !isResizableTarget(child);
+}
+
+export function Resizable({
+  children,
+  onWidthResize,
+  onWidthResizeEnd,
+  onHeightResize,
+  onHeightResizeEnd,
+}: ResizableProps) {
+  const targetRef = useRef<HTMLElement | null>(null);
+
+  const childArray = React.Children.toArray(children);
+  const targetChild = childArray.find(isResizableTarget);
+  const handleChildren = childArray.filter(isResizeHandle);
+
+  const contextValue = useMemo<ResizableContextValue>(
+    () => ({
+      targetRef,
+      onWidthResize,
+      onWidthResizeEnd,
+      onHeightResize,
+      onHeightResizeEnd,
+    }),
+    [onWidthResize, onWidthResizeEnd, onHeightResize, onHeightResizeEnd]
+  );
+
+  const forkedRef = useForkRef(targetRef, targetChild?.props.ref);
+
+  if (!targetChild) {
+    return (
+      <ResizableContext.Provider value={contextValue}>
+        {children}
+      </ResizableContext.Provider>
+    );
+  }
+
+  const clonedTarget = React.cloneElement(
+    targetChild,
+    {
+      ref: forkedRef,
+      className: clsx(
+        targetChild.props.className,
+        styles['resizable-target'],
+        'tcn-resizable-target'
+      ),
+    },
+    targetChild.props.children,
+    ...handleChildren
+  );
+
+  return (
+    <ResizableContext.Provider value={contextValue}>
+      {clonedTarget}
+    </ResizableContext.Provider>
+  );
+}

package/src/utils/resize/resize_handle.module.css

@@ -0,0 +1,146 @@
+@layer tcn-system {
+  .resize-handle {
+    position: absolute;
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  /* Horizontal edges: left, right, start, end */
+  :where(.resize-handle[data-position="left"]),
+  :where(.resize-handle[data-position="right"]),
+  :where(.resize-handle[data-position="start"]),
+  :where(.resize-handle[data-position="end"]) {
+    top: 0;
+    height: 100%;
+    width: 16px;
+    cursor: ew-resize;
+  }
+
+  :where(.resize-handle[data-position="left"]) {
+    left: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="right"]) {
+    right: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="start"]:dir(ltr)) {
+    left: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="start"]:dir(rtl)) {
+    right: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="end"]:dir(ltr)) {
+    right: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="end"]:dir(rtl)) {
+    left: var(--resize-offset, 0px);
+  }
+
+  /* Vertical edges: top, bottom */
+  :where(.resize-handle[data-position="top"]),
+  :where(.resize-handle[data-position="bottom"]) {
+    left: 0;
+    width: 100%;
+    height: 16px;
+    cursor: ns-resize;
+  }
+
+  :where(.resize-handle[data-position="top"]) {
+    top: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="bottom"]) {
+    bottom: var(--resize-offset, 0px);
+  }
+
+  /* Corners: small square at intersection */
+  :where(.resize-handle[data-position="top-left"]),
+  :where(.resize-handle[data-position="top-right"]),
+  :where(.resize-handle[data-position="bottom-left"]),
+  :where(.resize-handle[data-position="bottom-right"]),
+  :where(.resize-handle[data-position="top-start"]),
+  :where(.resize-handle[data-position="top-end"]),
+  :where(.resize-handle[data-position="bottom-start"]),
+  :where(.resize-handle[data-position="bottom-end"]) {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Physical corners */
+  :where(.resize-handle[data-position="top-left"]) {
+    top: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="top-right"]) {
+    top: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-left"]) {
+    bottom: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-right"]) {
+    bottom: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  /* Logical corners (RTL-aware) */
+  :where(.resize-handle[data-position="top-start"]:dir(ltr)) {
+    top: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="top-start"]:dir(rtl)) {
+    top: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="top-end"]:dir(ltr)) {
+    top: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="top-end"]:dir(rtl)) {
+    top: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-start"]:dir(ltr)) {
+    bottom: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-start"]:dir(rtl)) {
+    bottom: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-end"]:dir(ltr)) {
+    bottom: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-end"]:dir(rtl)) {
+    bottom: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+}

package/src/utils/resize/resize_handle.tsx

@@ -0,0 +1,165 @@
+import React, { forwardRef, useMemo } from 'react';
+import { clsx } from 'clsx';
+import { useResizable } from './context.js';
+import { getHandleConfig } from './handle_config.js';
+import { ResizeHandleStrategy } from './resize_strategy.js';
+import { detectResizeBounds } from '../../stacks/box/detect_resize_bounds.js';
+import type { ResizeHandlePosition } from './types.js';
+import styles from './resize_handle.module.css';
+
+export interface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+  position: ResizeHandlePosition;
+}
+
+export const ResizeHandle = forwardRef<HTMLDivElement, ResizeHandleProps>(
+  function ResizeHandle({ position, className, ...rest }, ref) {
+    const {
+      targetRef,
+      onWidthResize,
+      onWidthResizeEnd,
+      onHeightResize,
+      onHeightResizeEnd,
+    } = useResizable();
+
+    const config = getHandleConfig(position);
+    const axis =
+      config.horizontal && config.vertical
+        ? 'corner'
+        : config.horizontal
+          ? 'horizontal'
+          : 'vertical';
+
+    const strategy = useMemo(() => new ResizeHandleStrategy(position), [position]);
+
+    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+      const target = targetRef.current;
+      if (target == null) return;
+
+      const rect = target.getBoundingClientRect();
+      strategy.startResize({
+        rectangle: {
+          dimensions: {
+            width: rect.width,
+            height: rect.height,
+          },
+          position: {
+            x: event.clientX,
+            y: event.clientY,
+          },
+        },
+        languageDirection: window.getComputedStyle(target).direction,
+      });
+
+      let frameId = 0;
+
+      const drag = (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        cancelAnimationFrame(frameId);
+        frameId = requestAnimationFrame(() => {
+          const result = strategy.resize({ x: e.clientX, y: e.clientY });
+
+          let appliedWidth = rect.width;
+          let appliedHeight = rect.height;
+
+          if (result.horizontal) {
+            const bounds = detectResizeBounds({
+              element: target,
+              axis: 'width',
+              nextSize: result.horizontal.newSize,
+            });
+            if (!bounds.clamped) {
+              appliedWidth = result.horizontal.newSize;
+              target.style.width = `${result.horizontal.newSize}px`;
+              onWidthResize?.({
+                width: result.horizontal.newSize,
+                origin: result.horizontal.origin,
+                totalDelta: result.horizontal.totalDelta,
+                currentDelta: result.horizontal.currentDelta,
+              });
+            } else if (
+              bounds.clampedSize !== null &&
+              bounds.clampedSize !== appliedWidth
+            ) {
+              appliedWidth = bounds.clampedSize;
+              target.style.width = `${bounds.clampedSize}px`;
+              onWidthResize?.({
+                width: bounds.clampedSize,
+                origin: result.horizontal.origin,
+                totalDelta: result.horizontal.totalDelta,
+                currentDelta: result.horizontal.currentDelta,
+              });
+            }
+          }
+
+          if (result.vertical) {
+            const bounds = detectResizeBounds({
+              element: target,
+              axis: 'height',
+              nextSize: result.vertical.newSize,
+            });
+            if (!bounds.clamped) {
+              appliedHeight = result.vertical.newSize;
+              target.style.height = `${result.vertical.newSize}px`;
+              onHeightResize?.({
+                height: result.vertical.newSize,
+                origin: result.vertical.origin,
+                totalDelta: result.vertical.totalDelta,
+                currentDelta: result.vertical.currentDelta,
+              });
+            } else if (
+              bounds.clampedSize !== null &&
+              bounds.clampedSize !== appliedHeight
+            ) {
+              appliedHeight = bounds.clampedSize;
+              target.style.height = `${bounds.clampedSize}px`;
+              onHeightResize?.({
+                height: bounds.clampedSize,
+                origin: result.vertical.origin,
+                totalDelta: result.vertical.totalDelta,
+                currentDelta: result.vertical.currentDelta,
+              });
+            }
+          }
+
+          strategy.commitResize({ width: appliedWidth, height: appliedHeight });
+        });
+      };
+
+      const endDrag = () => {
+        cancelAnimationFrame(frameId);
+        document.body.removeEventListener('mousemove', drag);
+        document.body.removeEventListener('mouseup', endDrag);
+        window.removeEventListener('blur', endDrag);
+
+        const result = strategy.endResize();
+        if (result.horizontal) {
+          onWidthResizeEnd?.(result.horizontal.width, result.horizontal.origin);
+        }
+        if (result.vertical) {
+          onHeightResizeEnd?.(result.vertical.height, result.vertical.origin);
+        }
+      };
+
+      document.body.addEventListener('mousemove', drag);
+      document.body.addEventListener('mouseup', endDrag);
+      window.addEventListener('blur', endDrag);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(styles['resize-handle'], 'tcn-resize-handle', className)}
+        data-position={position}
+        data-axis={axis}
+        onMouseDown={handleMouseDown}
+        {...rest}
+      />
+    );
+  }
+);
+
+ResizeHandle.displayName = 'ResizeHandle';

package/src/utils/resize/resize_strategy.ts

@@ -0,0 +1,190 @@
+import {
+  getHandleConfig,
+  resolveDirection,
+  computeResizeState,
+} from './handle_config.js';
+import type {
+  AxisConfig,
+  ResizeHandlePosition,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+} from './types.js';
+import type { Dimensions, Position, Rectangle } from '../types/dimensions.js';
+
+export interface StartResizeParams {
+  rectangle: Rectangle;
+  languageDirection: string;
+}
+
+export interface AxisResizeResult {
+  newSize: number;
+  totalDelta: number;
+  currentDelta: number;
+}
+
+export interface HorizontalResizeResult extends AxisResizeResult {
+  origin: WidthResizeOrigin;
+}
+
+export interface VerticalResizeResult extends AxisResizeResult {
+  origin: HeightResizeOrigin;
+}
+
+export interface ResizeResult {
+  horizontal?: HorizontalResizeResult;
+  vertical?: VerticalResizeResult;
+}
+
+export interface EndResizeResult {
+  horizontal?: { width: number; origin: WidthResizeOrigin };
+  vertical?: { height: number; origin: HeightResizeOrigin };
+}
+
+/**
+ * Single-axis resize handler. Pure — no DOM, no React.
+ * Subclasses extract the correct axis from uniform args.
+ */
+abstract class AxisResizeHandler {
+  protected direction = 1;
+  protected startSize = 0;
+  protected startCoord = 0;
+  protected currentSize = 0;
+
+  constructor(protected axisConfig: AxisConfig) {}
+
+  get origin() {
+    return this.axisConfig.origin;
+  }
+
+  get size() {
+    return this.currentSize;
+  }
+
+  protected abstract extractSize(dimensions: Dimensions): number;
+  protected abstract extractCoord(coord: Position): number;
+  abstract applyResize(coord: Position): Partial<ResizeResult>;
+  abstract applyEnd(): Partial<EndResizeResult>;
+
+  start(rect: Rectangle, languageDirection: string) {
+    this.direction = resolveDirection(
+      languageDirection,
+      this.axisConfig.invert,
+      this.axisConfig.disableDirection
+    );
+    this.startSize = this.extractSize(rect.dimensions);
+    this.startCoord = this.extractCoord(rect.position);
+    this.currentSize = this.startSize;
+  }
+
+  resize(coord: Position): AxisResizeResult {
+    return computeResizeState(
+      this.startSize,
+      this.startCoord,
+      this.extractCoord(coord),
+      this.direction,
+      this.currentSize
+    );
+  }
+
+  commit(dimensions: Dimensions) {
+    this.currentSize = this.extractSize(dimensions);
+  }
+}
+
+class HorizontalAxisResizeHandler extends AxisResizeHandler {
+  protected extractSize(dimensions: Dimensions) {
+    return dimensions.width;
+  }
+
+  protected extractCoord(coord: Position) {
+    return coord.x;
+  }
+
+  applyResize(coord: Position): Partial<ResizeResult> {
+    return {
+      horizontal: {
+        ...this.resize(coord),
+        origin: this.origin as WidthResizeOrigin,
+      },
+    };
+  }
+
+  applyEnd(): Partial<EndResizeResult> {
+    return {
+      horizontal: {
+        width: this.size,
+        origin: this.origin as WidthResizeOrigin,
+      },
+    };
+  }
+}
+
+class VerticalAxisResizeHandler extends AxisResizeHandler {
+  protected extractSize(dimensions: Dimensions) {
+    return dimensions.height;
+  }
+
+  protected extractCoord(coord: Position) {
+    return coord.y;
+  }
+
+  applyResize(coord: Position): Partial<ResizeResult> {
+    return {
+      vertical: {
+        ...this.resize(coord),
+        origin: this.origin as HeightResizeOrigin,
+      },
+    };
+  }
+
+  applyEnd(): Partial<EndResizeResult> {
+    return {
+      vertical: {
+        height: this.size,
+        origin: this.origin as HeightResizeOrigin,
+      },
+    };
+  }
+}
+
+/**
+ * Flow:
+ *   1. adapter calls startResize() with rect/coords from DOM
+ *   2. adapter calls resize() on each mousemove with coord
+ *   3. adapter checks bounds (DOM), applies style, then calls commitResize()
+ *   4. adapter calls endResize() on mouseup to get final state
+ */
+export class ResizeHandleStrategy {
+  private handlers: AxisResizeHandler[];
+
+  constructor(position: ResizeHandlePosition) {
+    const config = getHandleConfig(position);
+    this.handlers = [];
+    if (config.horizontal) {
+      this.handlers.push(new HorizontalAxisResizeHandler(config.horizontal));
+    }
+    if (config.vertical) {
+      this.handlers.push(new VerticalAxisResizeHandler(config.vertical));
+    }
+  }
+
+  startResize(params: StartResizeParams): void {
+    for (const handler of this.handlers) {
+      handler.start(params.rectangle, params.languageDirection);
+    }
+  }
+
+  resize(position: Position): ResizeResult {
+    return Object.assign({}, ...this.handlers.map(h => h.applyResize(position)));
+  }
+
+  commitResize(dimensions: Dimensions): void {
+    for (const handler of this.handlers) {
+      handler.commit(dimensions);
+    }
+  }
+
+  endResize(): EndResizeResult {
+    return Object.assign({}, ...this.handlers.map(h => h.applyEnd()));
+  }
+}

package/src/utils/resize/types.ts

@@ -0,0 +1,64 @@
+import type {
+  OnWidthResize,
+  OnWidthResizeEnd,
+  OnHeightResize,
+  OnHeightResizeEnd,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+} from '../../stacks/box/types.js';
+
+export type {
+  OnWidthResize,
+  OnWidthResizeEnd,
+  OnHeightResize,
+  OnHeightResizeEnd,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+};
+
+export type ResizeHandlePosition =
+  // Edges (single axis)
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'start'
+  | 'end'
+  // Corners (dual axis)
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export interface AxisConfig {
+  origin: WidthResizeOrigin | HeightResizeOrigin;
+  invert: boolean;
+  disableDirection: boolean;
+}
+
+export interface HandleConfig {
+  horizontal?: AxisConfig;
+  vertical?: AxisConfig;
+}
+
+export interface ResolvedAxisConfig {
+  origin: WidthResizeOrigin | HeightResizeOrigin;
+  direction: number;
+}
+
+export interface ResolvedHandleConfig {
+  horizontal?: ResolvedAxisConfig;
+  vertical?: ResolvedAxisConfig;
+}
+
+export interface ResizableContextValue {
+  targetRef: React.RefObject<HTMLElement | null>;
+  onWidthResize?: OnWidthResize;
+  onWidthResizeEnd?: OnWidthResizeEnd;
+  onHeightResize?: OnHeightResize;
+  onHeightResizeEnd?: OnHeightResizeEnd;
+}

package/dist/containers.module-DlGySre0.js

@@ -1,5 +0,0 @@
-import './containers.css';const a = "_scaffold_7e9ff51", c = "_rail_9474c96", t = "_container_336e83e", s = "_container-stack_0d2e80a", o = "_scaffold-stack_3a72ba8", n = "_rail-stack_2e4d934", e = { scaffold: a, rail: c, container: t, "container-stack": s, "scaffold-stack": o, "rail-stack": n };
-export {
-  e as s
-};
-//# sourceMappingURL=containers.module-DlGySre0.js.map

package/dist/containers.module-DlGySre0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"containers.module-DlGySre0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}