@adecore/ui 0.18.4 → 0.20.0

package/dist/workspace/preview.d.ts

@@ -0,0 +1,35 @@
+export declare const TAB_TOP_INSET = 4;
+export declare const TAB_RADIUS = 6;
+export declare const BODY_RADIUS = 4;
+export declare const DROP_STROKE = 2;
+export interface DropPreviewShape {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    barHeight: number;
+    tabLeft: number;
+    tabWidth: number;
+    tabTop: number;
+    radius: number;
+}
+export interface PreviewRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function rectPreview({ x, y, width, height }: PreviewRect): DropPreviewShape;
+export declare function tabPreview(drop: TabDrop, origin: {
+    x: number;
+    y: number;
+}): DropPreviewShape;
+export declare function dropPreviewPath({ x, y, width, height, barHeight, tabLeft, tabWidth, tabTop, radius }: DropPreviewShape, inset?: number): string;
+export interface TabDrop {
+    gap: number;
+    left: number;
+    tabWidth: number;
+    width: number;
+    height: number;
+    barHeight: number;
+}

package/dist/workspace/preview.js

@@ -0,0 +1,72 @@
+/* The gap above the indicator's tab, so it reads as a tab standing in the bar. */
+export const TAB_TOP_INSET = 4;
+/* The corner of the indicator's tab, and of its body, which is `rounded-sm` like the other drop indicator. */
+export const TAB_RADIUS = 6;
+export const BODY_RADIUS = 4;
+/* The stroke is centered on the path, so the path runs half of it inside the box to keep the outer edge on it. */
+export const DROP_STROKE = 2;
+function coordinate(value) {
+    return String(Math.round(value * 100) / 100 + 0);
+}
+/*
+ * The preview for a split or a trade: the rectangle as a tab with no height, parked just inside its
+ * top left corner so the corner keeps its radius. It is where a tab target grows out of the rectangle.
+ */
+export function rectPreview({ x, y, width, height }) {
+    return { x, y, width, height, barHeight: 0, tabLeft: x + BODY_RADIUS, tabWidth: 0, tabTop: y, radius: TAB_RADIUS };
+}
+/* The preview for a tab: the tab and the body of the cell it lands in, `origin` being the cell's top left in the grid. */
+export function tabPreview(drop, origin) {
+    return {
+        x: origin.x,
+        y: origin.y,
+        width: drop.width,
+        height: drop.height,
+        barHeight: drop.barHeight,
+        tabLeft: origin.x + drop.left,
+        tabWidth: drop.tabWidth,
+        tabTop: origin.y + TAB_TOP_INSET,
+        radius: TAB_RADIUS
+    };
+}
+/*
+ * The outline of a tab grown into the body under it, as one closed path so no line runs between the
+ * two. The commands are the same whatever the numbers are (an arc of radius 0 is a straight line), so
+ * the browser can move one outline into another with a transition on `d`. `inset` is how far the
+ * path runs inside the box, which is half the stroke, so the outer edge of the line is on the box.
+ */
+export function dropPreviewPath({ x, y, width, height, barHeight, tabLeft, tabWidth, tabTop, radius }, inset = DROP_STROKE / 2) {
+    const left = inset;
+    const right = width - inset;
+    const bottom = height - inset;
+    const top = barHeight + inset;
+    const tabStart = Math.max(left, Math.min(tabLeft - x + inset, right));
+    const tabEnd = Math.max(tabStart, Math.min(tabLeft - x + tabWidth - inset, right));
+    const tabY = Math.min(tabTop - y + inset, top);
+    const tabCorner = Math.max(0, Math.min(radius - inset, (tabEnd - tabStart) / 2, top - tabY));
+    const bodyCorner = Math.max(0, BODY_RADIUS - inset);
+    // A tab flush with a side of the box continues that side, so the body has no corner there.
+    const cornerLeft = Math.min(bodyCorner, tabStart - left);
+    const cornerRight = Math.min(bodyCorner, right - tabEnd);
+    const cornerBottom = Math.max(0, Math.min(bodyCorner, (right - left) / 2, (bottom - top) / 2));
+    const at = (px, py) => `${coordinate(x + px)},${coordinate(y + py)}`;
+    const arc = (corner, px, py) => `A${coordinate(corner)},${coordinate(corner)} 0 0 1 ${at(px, py)}`;
+    return [
+        `M${at(left + cornerLeft, top)}`,
+        `H${coordinate(x + tabStart)}`,
+        `V${coordinate(y + tabY + tabCorner)}`,
+        arc(tabCorner, tabStart + tabCorner, tabY),
+        `H${coordinate(x + tabEnd - tabCorner)}`,
+        arc(tabCorner, tabEnd, tabY + tabCorner),
+        `V${coordinate(y + top)}`,
+        `H${coordinate(x + right - cornerRight)}`,
+        arc(cornerRight, right, top + cornerRight),
+        `V${coordinate(y + bottom - cornerBottom)}`,
+        arc(cornerBottom, right - cornerBottom, bottom),
+        `H${coordinate(x + left + cornerBottom)}`,
+        arc(cornerBottom, left, bottom - cornerBottom),
+        `V${coordinate(y + top + cornerLeft)}`,
+        arc(cornerLeft, left + cornerLeft, top),
+        'Z'
+    ].join(' ');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.18.4",
+  "version": "0.20.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/ColumnResizeHandle.tsx

@@ -1,4 +1,4 @@
-import type { PointerEvent as ReactPointerEvent, Ref } from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { ColumnEdge } from './useColumnResize.ts';
 
@@ -7,6 +7,7 @@ export interface ColumnResizeHandleProps {
     from: ColumnEdge;
     onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
     className?: string;
+    style?: CSSProperties;
     ref?: Ref<HTMLDivElement>;
 }
 
@@ -18,6 +19,6 @@ const PLACEMENT: Record<ColumnEdge, string> = {
 };
 
 /* An invisible strip over the free edge of a column, so the column needs `relative` and draws its own border. */
-export function ColumnResizeHandle({ from, onPointerDown, className, ref }: ColumnResizeHandleProps) {
-    return <div ref={ref} className={clsx('absolute z-10', PLACEMENT[from], className)} onPointerDown={onPointerDown} />;
+export function ColumnResizeHandle({ from, onPointerDown, className, style, ref }: ColumnResizeHandleProps) {
+    return <div ref={ref} className={clsx('absolute z-10', PLACEMENT[from], className)} style={style} onPointerDown={onPointerDown} />;
 }

package/src/SlidingColumn.tsx

@@ -11,6 +11,8 @@ export interface SlidingColumnProps {
     open: boolean;
     /* Already clamped by the caller, which knows what has to stay beside it (`clampColumnSize`). */
     width: number;
+    /* Space before the surface, in pixels. Replaces the border and carries the resize handle. */
+    gap?: number;
     bounds: { min: number; max(): number };
     onWidthChange(width: number): void;
     /*
@@ -38,7 +40,7 @@ export interface SlidingColumnProps {
  * moves, and they stay mounted until the slide is over, so a close plays out. The left edge is the
  * drag handle.
  */
-export function SlidingColumn({ open, width, bounds, onWidthChange, instant = false, body, className, ref, children }: SlidingColumnProps) {
+export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }: SlidingColumnProps) {
     /* Closed and done animating. Until then the contents stay mounted, so a close plays out. */
     const [settled, setSettled] = useState(!open);
     /* A width that lands without a transition fires no `transitionend`, so the motion it would have
@@ -48,7 +50,14 @@ export function SlidingColumn({ open, width, bounds, onWidthChange, instant = fa
     }
     const present = open || !settled;
     const column = useRef<HTMLElement>(null);
-    const { startResize } = useColumnResize(column, { ...bounds, size: width, from: 'right', onSize: onWidthChange });
+    const spacing = Math.max(0, Math.round(gap));
+    const { startResize } = useColumnResize(column, {
+        min: bounds.min + spacing,
+        max: () => bounds.max() + spacing,
+        size: width + spacing,
+        from: 'right',
+        onSize: (next) => onWidthChange(next - spacing)
+    });
 
     useEffect(() => {
         if (open || settled) {
@@ -66,8 +75,9 @@ export function SlidingColumn({ open, width, bounds, onWidthChange, instant = fa
             ref={mergeRefs(column, ref)}
             inert={!open}
             data-instant={instant ? '' : undefined}
+            data-gap={spacing > 0 ? '' : undefined}
             className={clsx('sliding-column flex h-full shrink-0 justify-end overflow-hidden', className)}
-            style={{ width: open ? width : 0 }}
+            style={{ width: open ? width + spacing : 0 }}
             onTransitionEnd={(event) => {
                 if (event.propertyName === 'width' && event.target === event.currentTarget) {
                     setSettled(!open);
@@ -78,11 +88,18 @@ export function SlidingColumn({ open, width, bounds, onWidthChange, instant = fa
                 <div
                     ref={body?.ref}
                     tabIndex={body ? -1 : undefined}
-                    className="relative flex h-full shrink-0 flex-col border-l border-border bg-surface outline-none"
-                    style={{ width }}
+                    className={clsx('relative flex h-full shrink-0 flex-col bg-surface outline-none', spacing === 0 && 'border-l border-border')}
+                    style={{ width, marginLeft: spacing }}
                     onKeyDown={body?.onKeyDown}
                 >
-                    {open && <ColumnResizeHandle from="right" onPointerDown={startResize} />}
+                    {open && (
+                        <ColumnResizeHandle
+                            from="right"
+                            className="sliding-column-resize"
+                            style={spacing > 0 ? { left: -spacing, width: spacing } : undefined}
+                            onPointerDown={startResize}
+                        />
+                    )}
                     {children}
                 </div>
             )}

package/src/index.ts

@@ -122,3 +122,22 @@ export type {
     TreeControlProps,
     TreeCheckboxProps
 } from './tree/parts.tsx';
+
+export { Workspace, type WorkspaceProps } from './workspace/Workspace.tsx';
+export type { WorkspaceLayout } from './workspace/context.ts';
+export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
+export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';
+export {
+    createSplitLayout,
+    normalizeSplitLayout,
+    updateSplitLayout,
+    splitPanes,
+    type SplitAxis,
+    type SplitSide,
+    type SplitPane,
+    type SplitBranch,
+    type SplitNode,
+    type SplitLayout,
+    type SplitCommand
+} from './workspace/model.ts';
+export type { SplitRect, SplitEdges, SplitMinimum } from './workspace/geometry.ts';

package/src/locales/en.json

@@ -64,5 +64,15 @@
         "label": "Files",
         "expand": "Expand",
         "collapse": "Collapse"
+    },
+    "workspace": {
+        "tabs": "Open views",
+        "unsaved": "Unsaved changes",
+        "closeTab": "Close {{name}}",
+        "resize": "Resize panels",
+        "pane": "Panel",
+        "movePane": "Move panel",
+        "maximize": "Maximize panel",
+        "restore": "Restore panels"
     }
 }

package/src/locales/nl.json

@@ -64,5 +64,15 @@
         "label": "Bestanden",
         "expand": "Uitvouwen",
         "collapse": "Invouwen"
+    },
+    "workspace": {
+        "tabs": "Open views",
+        "unsaved": "Niet-opgeslagen wijzigingen",
+        "closeTab": "Sluit {{name}}",
+        "resize": "Panelen vergroten of verkleinen",
+        "pane": "Paneel",
+        "movePane": "Paneel verplaatsen",
+        "maximize": "Paneel maximaliseren",
+        "restore": "Panelen herstellen"
     }
 }

package/src/theme.css

@@ -26,6 +26,8 @@
        own clips its background to the padding box (see `@layer base`), or the border would blend
        with that surface and never with the ground behind it. */
     --border: rgb(0 0 0 / 0.11);
+    /* Opaque, so a gap has the same color on every surface. */
+    --separator: oklch(0.922 0.003 286.347);
     --border-strong: rgb(0 0 0 / 0.2);
     /* A hairline that stays out of the way: on a sunken field a full `--border` draws a box. */
     --border-soft: rgb(0 0 0 / 0.06);
@@ -94,6 +96,7 @@
     --surface-active: #28282e;
     /* White at a low alpha, which is what gives a dark surface its lifted edge. */
     --border: rgb(255 255 255 / 0.07);
+    --separator: oklch(0.236 0.006 285.956);
     --border-strong: rgb(255 255 255 / 0.13);
     --border-soft: rgb(255 255 255 / 0.03);
     --text: #ececf1;
@@ -205,6 +208,7 @@
     --color-surface-hover: var(--surface-hover);
     --color-surface-active: var(--surface-active);
     --color-border: var(--border);
+    --color-separator: var(--separator);
     --color-border-strong: var(--border-strong);
     --color-border-soft: var(--border-soft);
     --color-text: var(--text);
@@ -567,6 +571,17 @@
 
     /* A `SlidingColumn` opening and closing. A drag or a width restored on load lands at once. */
     .sliding-column { transition: width 200ms cubic-bezier(0, 0, 0.2, 1); }
+    .sliding-column[data-gap] { background: var(--separator); }
+    .sliding-column-resize { touch-action: none; }
+    .sliding-column[data-gap] .sliding-column-resize::after {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        left: calc(50% - 1px);
+        width: 2px;
+    }
+    .sliding-column[data-gap] .sliding-column-resize:hover::after,
+    .sliding-column[data-gap][data-resizing] .sliding-column-resize::after { background: var(--accent); }
     .sliding-column[data-resizing],
     .sliding-column[data-instant] { transition: none; }
 }
@@ -706,3 +721,169 @@
         }
     }
 }
+
+@layer components {
+    .ade-workspace {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--separator);
+        --border: var(--separator);
+    }
+    .ade-workspace-center {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        flex-direction: column;
+    }
+    .ade-workspace-sidebar, .ade-workspace-side-panel {
+        flex: none;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--surface);
+    }
+    .ade-workspace-sidebar { border-right: 1px solid var(--separator); }
+    .ade-workspace-side-panel { border-left: 1px solid var(--separator); }
+    .ade-workspace-toolbar {
+        flex: none;
+        overflow: hidden;
+        background: var(--surface);
+        border-bottom: 1px solid var(--separator);
+    }
+    .ade-workspace-content {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--surface);
+    }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-center { gap: 8px; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
+    .ade-workspace-sidebar[data-auto], .ade-workspace-side-panel[data-auto] { display: contents; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sidebar,
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel,
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-center > .ade-workspace-toolbar { border: 0; }
+    .ade-workspace[data-layout="roomy"][data-sidebar] > .ade-workspace-center > .ade-workspace-toolbar { border-bottom-left-radius: 8px; }
+    .ade-workspace[data-layout="roomy"][data-side-panel] > .ade-workspace-center > .ade-workspace-toolbar { border-bottom-right-radius: 8px; }
+    .ade-split-view {
+        position: relative;
+        isolation: isolate;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--separator);
+        --border: var(--separator);
+    }
+    .ade-split-pane, .ade-split-content {
+        position: absolute;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--surface);
+    }
+    .ade-split-pane[hidden], .ade-split-content[hidden] { display: none; }
+    .ade-split-header {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        border-bottom: 1px solid var(--separator);
+    }
+    .ade-split-content { outline-offset: -2px; }
+    .ade-split-view[data-dragging] > .ade-split-content { pointer-events: none; }
+    .ade-split-divider {
+        position: absolute;
+        z-index: 3;
+        touch-action: none;
+        outline-offset: 2px;
+    }
+    /* The 2px line also marks keyboard focus. */
+    .ade-split-divider:focus-visible { outline: none; }
+    .ade-split-divider[aria-orientation="vertical"] { cursor: col-resize; }
+    .ade-split-divider[aria-orientation="horizontal"] { cursor: row-resize; }
+    .ade-split-divider > span {
+        position: absolute;
+        inset: 0;
+    }
+    .ade-split-divider[aria-orientation="vertical"] > span { left: -3px; right: -3px; }
+    .ade-split-divider[aria-orientation="horizontal"] > span { top: -3px; bottom: -3px; }
+    .ade-split-view[data-layout="roomy"] > .ade-split-divider > span { inset: 0; }
+    .ade-split-divider::after { content: ""; position: absolute; pointer-events: none; }
+    .ade-split-divider[aria-orientation="vertical"]::after { inset-block: 0; left: -1px; width: 2px; }
+    .ade-split-divider[aria-orientation="horizontal"]::after { inset-inline: 0; top: -1px; height: 2px; }
+    .ade-split-view[data-layout="roomy"] > .ade-split-divider[aria-orientation="vertical"]::after { left: 3px; }
+    .ade-split-view[data-layout="roomy"] > .ade-split-divider[aria-orientation="horizontal"]::after { top: 3px; }
+    .ade-workspace[data-layout="roomy"][data-toolbar][data-sidebar] > .ade-workspace-center > .ade-workspace-content { border-top-left-radius: 8px; }
+    .ade-workspace[data-layout="roomy"][data-toolbar][data-side-panel] > .ade-workspace-center > .ade-workspace-content { border-top-right-radius: 8px; }
+    .ade-split-divider:is(:hover, :focus-visible, [data-resizing])::after { background: var(--accent); }
+    .ade-split-preview {
+        position: absolute;
+        inset: 0;
+        z-index: 4;
+        pointer-events: none;
+        overflow: visible;
+    }
+    .ade-split-preview path {
+        fill: color-mix(in srgb, var(--accent) 8%, transparent);
+        stroke: var(--accent);
+        stroke-width: 2px;
+        transition: d 150ms ease-out;
+    }
+    .ade-tab-strip {
+        position: relative;
+        display: flex;
+        flex: 1;
+        height: 100%;
+        min-width: 0;
+        align-items: stretch;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+    .ade-tab-strip::-webkit-scrollbar { display: none; }
+    .ade-document-tab {
+        position: relative;
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        gap: 4px;
+        padding: 0 8px 0 12px;
+        color: var(--text-muted);
+    }
+    .ade-document-tab:hover { color: var(--text); background: var(--surface-raised); }
+    .ade-document-tab[data-active] { color: var(--text); }
+    .ade-document-tab[data-active]::after {
+        content: "";
+        position: absolute;
+        inset-inline: 0;
+        bottom: 0;
+        height: 2px;
+        background: var(--text-muted);
+    }
+    .ade-tab-strip[data-focused] .ade-document-tab[data-active]::after { background: var(--accent); }
+    .ade-document-tab-open {
+        display: inline-flex;
+        height: 100%;
+        min-width: 0;
+        max-width: 160px;
+        align-items: center;
+        gap: 6px;
+        font-size: var(--text-sm);
+        color: inherit;
+        outline-offset: -2px;
+        white-space: nowrap;
+    }
+    .ade-document-tab-close { opacity: 0; }
+    .ade-document-tab:is(:hover, :focus-within, [data-active]) .ade-document-tab-close { opacity: 1; }
+    .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }
+    .ade-tab-unsaved { width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--text-muted); }
+    .ade-tab-insertion { position: absolute; top: 4px; bottom: 4px; width: 2px; pointer-events: none; background: var(--accent); }
+    @media (prefers-reduced-motion: reduce) { .ade-split-preview path { transition: none; } }
+}

package/src/useColumnResize.ts

@@ -28,20 +28,6 @@ export const clampColumnSize = (options: Pick<ColumnResizeOptions, 'min' | 'max'
 /* Where the pointer sits on the axis this edge belongs to. */
 const along = (from: ColumnEdge, event: { clientX: number; clientY: number }): number => (from === 'left' || from === 'right' ? event.clientX : event.clientY);
 
-/* The edge the column is pinned to, in page coordinates, or the window's own when there is no box yet. */
-const anchorOf = (from: ColumnEdge, rect: DOMRect | undefined): number => {
-    switch (from) {
-        case 'left':
-            return rect?.left ?? 0;
-        case 'right':
-            return rect?.right ?? window.innerWidth;
-        case 'top':
-            return rect?.top ?? 0;
-        case 'bottom':
-            return rect?.bottom ?? window.innerHeight;
-    }
-};
-
 /*
  * One resizable column or row: a handle that drags the size its owner keeps. The handle takes the
  * pointer capture, so the drag survives leaving the few pixels it is wide, and `[data-resizing]` on
@@ -52,23 +38,31 @@ export const useColumnResize = (ref: RefObject<HTMLElement | null>, options: Col
         event.preventDefault();
         const handle = event.currentTarget;
         const column = ref.current;
-        const anchor = anchorOf(options.from, column?.getBoundingClientRect());
+        const rect = column?.getBoundingClientRect();
+        const size = (options.from === 'left' || options.from === 'right' ? rect?.width : rect?.height) ?? options.size;
+        const start = along(options.from, event);
         /* The far edge grows as the pointer comes towards it; the near edge grows as it goes away. */
         const growsTowardsAnchor = options.from === 'right' || options.from === 'bottom';
         column?.setAttribute('data-resizing', 'true');
         const onMove = (move: PointerEvent): void => {
-            const reach = along(options.from, move);
-            options.onSize(clampColumnSize(options, growsTowardsAnchor ? anchor - reach : reach - anchor));
+            const delta = along(options.from, move) - start;
+            options.onSize(clampColumnSize(options, size + (growsTowardsAnchor ? -delta : delta)));
         };
         const onUp = (): void => {
             handle.removeEventListener('pointermove', onMove);
             handle.removeEventListener('pointerup', onUp);
-            handle.releasePointerCapture(event.pointerId);
+            handle.removeEventListener('pointercancel', onUp);
+            handle.removeEventListener('lostpointercapture', onUp);
+            if (handle.hasPointerCapture(event.pointerId)) {
+                handle.releasePointerCapture(event.pointerId);
+            }
             column?.removeAttribute('data-resizing');
         };
         handle.setPointerCapture(event.pointerId);
         handle.addEventListener('pointermove', onMove);
         handle.addEventListener('pointerup', onUp);
+        handle.addEventListener('pointercancel', onUp);
+        handle.addEventListener('lostpointercapture', onUp);
     };
 
     return { startResize };