@adecore/ui 0.19.0 → 0.20.0

package/README.md

@@ -81,3 +81,7 @@ Nothing else is public. No module does work on import, so a bundler keeps only w
 ## License
 
 FSL-1.1-MIT, see [LICENSE](./LICENSE).
+
+## Workspaces
+
+`Workspace`, `SplitView` and `TabStrip` provide standard or roomy layouts, nested resizable panels and open document tabs. Views stay mounted when they move between panels. Applications own document state, close approval and persistence. See the [workspace guide](https://adecore.dev/ui/layout/workspace) for the controlled layout model and demos.

package/dist/ColumnResizeHandle.d.ts

@@ -1,9 +1,10 @@
-import type { PointerEvent as ReactPointerEvent, Ref } from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import type { ColumnEdge } from './useColumnResize.ts';
 export interface ColumnResizeHandleProps {
     from: ColumnEdge;
     onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
     className?: string;
+    style?: CSSProperties;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function ColumnResizeHandle({ from, onPointerDown, className, ref }: ColumnResizeHandleProps): import("react").JSX.Element;
+export declare function ColumnResizeHandle({ from, onPointerDown, className, style, ref }: ColumnResizeHandleProps): import("react").JSX.Element;

package/dist/ColumnResizeHandle.js

@@ -7,6 +7,6 @@ const PLACEMENT = {
     bottom: 'inset-x-0 top-0 h-2 cursor-row-resize'
 };
 /* 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 }) {
-    return _jsx("div", { ref: ref, className: clsx('absolute z-10', PLACEMENT[from], className), onPointerDown: onPointerDown });
+export function ColumnResizeHandle({ from, onPointerDown, className, style, ref }) {
+    return _jsx("div", { ref: ref, className: clsx('absolute z-10', PLACEMENT[from], className), style: style, onPointerDown: onPointerDown });
 }

package/dist/SlidingColumn.d.ts

@@ -2,6 +2,7 @@ import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, typ
 export interface SlidingColumnProps {
     open: boolean;
     width: number;
+    gap?: number;
     bounds: {
         min: number;
         max(): number;
@@ -16,4 +17,4 @@ export interface SlidingColumnProps {
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
 }
-export declare function SlidingColumn({ open, width, bounds, onWidthChange, instant, body, className, ref, children }: SlidingColumnProps): import("react").JSX.Element;
+export declare function SlidingColumn({ open, width, gap, bounds, onWidthChange, instant, body, className, ref, children }: SlidingColumnProps): import("react").JSX.Element;

package/dist/SlidingColumn.js

@@ -12,7 +12,7 @@ const TRANSITION_MS = 200;
  * 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 }) {
+export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }) {
     /* 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
@@ -22,7 +22,14 @@ export function SlidingColumn({ open, width, bounds, onWidthChange, instant = fa
     }
     const present = open || !settled;
     const column = useRef(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) {
             return;
@@ -33,9 +40,9 @@ export function SlidingColumn({ open, width, bounds, onWidthChange, instant = fa
             window.clearTimeout(timer);
         };
     }, [open, settled]);
-    return (_jsx("aside", { ref: mergeRefs(column, ref), inert: !open, "data-instant": instant ? '' : undefined, className: clsx('sliding-column flex h-full shrink-0 justify-end overflow-hidden', className), style: { width: open ? width : 0 }, onTransitionEnd: (event) => {
+    return (_jsx("aside", { 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 + spacing : 0 }, onTransitionEnd: (event) => {
             if (event.propertyName === 'width' && event.target === event.currentTarget) {
                 setSettled(!open);
             }
-        }, children: present && (_jsxs("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 }, onKeyDown: body?.onKeyDown, children: [open && _jsx(ColumnResizeHandle, { from: "right", onPointerDown: startResize }), children] })) }));
+        }, children: present && (_jsxs("div", { ref: body?.ref, tabIndex: body ? -1 : undefined, 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, children: [open && (_jsx(ColumnResizeHandle, { from: "right", className: "sliding-column-resize", style: spacing > 0 ? { left: -spacing, width: spacing } : undefined, onPointerDown: startResize })), children] })) }));
 }

package/dist/index.d.ts

@@ -83,3 +83,9 @@ export type { FileTreeRootProps } from './file-tree/parts.tsx';
 export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
 export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
 export type { TreeRootProps, TreeRowProps, TreeChevronProps, TreeChevronSlotProps, TreeLabelProps, TreeDecorationProps, 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/dist/index.js

@@ -77,3 +77,7 @@ export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
 export { ZOOM_PRESETS } from './zoom.js';
 export { useFileTree } from './file-tree/use-file-tree.js';
+export { Workspace } from './workspace/Workspace.js';
+export { DocumentTab, TabStrip } from './workspace/TabStrip.js';
+export { SplitView } from './workspace/SplitView.js';
+export { createSplitLayout, normalizeSplitLayout, updateSplitLayout, splitPanes } from './workspace/model.js';

package/dist/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/dist/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/dist/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/dist/useColumnResize.js

@@ -4,19 +4,6 @@ export const clampColumnSize = (options, size) => {
 };
 /* Where the pointer sits on the axis this edge belongs to. */
 const along = (from, event) => (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, rect) => {
-    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
@@ -27,23 +14,31 @@ export const useColumnResize = (ref, options) => {
         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) => {
-            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 = () => {
             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 };
 };

package/dist/workspace/SplitView.d.ts

@@ -0,0 +1,49 @@
+import { type DragEvent, type ReactNode } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { type WorkspaceLayout } from './context.ts';
+import { type SplitEdges, type SplitMinimum, type SplitRect } from './geometry.ts';
+import { type SplitCommand, type SplitLayout, type SplitPane } from './model.ts';
+import { type TabStripItem, type TabStripProps } from './TabStrip.tsx';
+export interface SplitViewInfo {
+    paneId: string;
+    active: boolean;
+}
+export interface SplitViewBounds extends SplitViewInfo {
+    viewId: string;
+    /** Viewport coordinates, suitable for a native surface kept outside the layout's DOM. */
+    rect: SplitRect;
+    borderRadius: string;
+}
+export interface SplitDropTarget {
+    paneId: string;
+    /** A body drop names its zone; an omitted side denotes the tab strip. */
+    side?: 'left' | 'right' | 'top' | 'bottom' | 'center';
+    /** A gap in the original tab order, before the source is lifted out. */
+    index?: number;
+}
+export interface SplitDrag {
+    sourceId: string;
+    viewId?: string;
+}
+export interface SplitViewProps extends Omit<useRender.ComponentProps<'div'>, 'children'> {
+    value: SplitLayout;
+    onValueChange(value: SplitLayout, command: SplitCommand): void;
+    renderView(id: string, info: SplitViewInfo): ReactNode;
+    getTab?(id: string): Omit<TabStripItem, 'id' | 'tabId' | 'panelId'>;
+    renderPaneHeader?(pane: SplitPane): ReactNode;
+    onClose?(id: string): void;
+    onTabDoubleClick?: TabStripProps['onDoubleClick'];
+    onTabContextMenu?: TabStripProps['onContextMenu'];
+    onViewDragStart?(id: string, event: DragEvent<HTMLButtonElement>): void;
+    canDrop?(drag: SplitDrag, target: SplitDropTarget): boolean;
+    canDropExternal?(event: DragEvent<HTMLDivElement>, target: SplitDropTarget): boolean;
+    onExternalDrop?(target: SplitDropTarget, event: DragEvent<HTMLDivElement>): void;
+    onViewBoundsChange?(bounds: readonly SplitViewBounds[]): void;
+    minimumResizeShare?: number;
+    minimumSize?: SplitMinimum | ((pane: SplitPane) => SplitMinimum);
+    layout?: WorkspaceLayout;
+    flushEdges?: SplitEdges;
+    showTabs?: boolean;
+    headerHeight?: number;
+}
+export declare function SplitView({ value, onValueChange, renderView, getTab, renderPaneHeader, onClose, onTabDoubleClick, onTabContextMenu, onViewDragStart, canDrop, canDropExternal, onExternalDrop, onViewBoundsChange, minimumSize, minimumResizeShare, layout: ownLayout, flushEdges, showTabs, headerHeight, render, ref, className, style, ...props }: SplitViewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;