@adecore/ui 0.23.0 → 0.24.0

package/src/workspace/SplitView.tsx

@@ -12,7 +12,7 @@ import {
     type KeyboardEvent,
     type ReactNode
 } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,8 @@ import {
 } from './geometry.ts';
 import { splitPanes, updateSplitLayout, type SplitCommand, type SplitLayout, type SplitPane } from './model.ts';
 import { TabStrip, type TabStripItem, type TabStripProps } from './TabStrip.tsx';
-import { dropPreviewPath, rectPreview, tabPreview, type DropPreviewShape } from './preview.ts';
+import { DropPreview } from './DropPreview.tsx';
+import { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape } from './preview.ts';
 
 export interface SplitViewInfo {
     paneId: string;
@@ -150,6 +151,7 @@ function Divider({
                 event.preventDefault();
                 cleanup.current?.();
                 const element = event.currentTarget;
+                const view = element.ownerDocument.defaultView;
                 const pointerId = event.pointerId;
                 const start = horizontal ? event.clientX : event.clientY;
                 const parent = element.parentElement;
@@ -157,16 +159,46 @@ function Divider({
                 const scale = horizontal ? (rect?.width ?? 1) / (parent?.clientWidth || 1) : (rect?.height ?? 1) / (parent?.clientHeight || 1);
                 element.dataset.resizing = '';
                 element.focus();
+                // A pointer reports more often than the screen draws; one resize per frame is all that shows.
+                let frame = 0;
+                let pending: PointerEvent | null = null;
+                const apply = (): void => {
+                    frame = 0;
+                    const next = pending;
+                    pending = null;
+                    if (next) {
+                        const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
+                        onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
+                    }
+                };
                 const move = (next: PointerEvent): void => {
                     if (next.pointerId !== pointerId) {
                         return;
                     }
-                    const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
-                    onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
+                    pending = next;
+                    if (frame !== 0) {
+                        return;
+                    }
+                    if (view) {
+                        frame = view.requestAnimationFrame(apply);
+                    } else {
+                        apply();
+                    }
+                };
+                const release = (): void => {
+                    if (frame !== 0) {
+                        view?.cancelAnimationFrame(frame);
+                        apply();
+                    }
+                    end();
                 };
                 const end = (): void => {
+                    if (frame !== 0) {
+                        view?.cancelAnimationFrame(frame);
+                        frame = 0;
+                    }
                     element.removeEventListener('pointermove', move);
-                    element.removeEventListener('pointerup', end);
+                    element.removeEventListener('pointerup', release);
                     element.removeEventListener('pointercancel', end);
                     element.removeEventListener('lostpointercapture', end);
                     element.ownerDocument.defaultView?.removeEventListener('blur', end);
@@ -179,7 +211,7 @@ function Divider({
                 cleanup.current = end;
                 element.setPointerCapture(pointerId);
                 element.addEventListener('pointermove', move);
-                element.addEventListener('pointerup', end);
+                element.addEventListener('pointerup', release);
                 element.addEventListener('pointercancel', end);
                 element.addEventListener('lostpointercapture', end);
                 element.ownerDocument.defaultView?.addEventListener('blur', end);
@@ -243,6 +275,14 @@ export function SplitView({
     const [dragging, setDragging] = useState(false);
     const drag = useRef<(SplitDrag & { width: number }) | null>(null);
     const [preview, setPreview] = useState<DropPreviewShape | null>(null);
+    // A dragover fires many times a second; only a different shape is worth a render.
+    const shownPreview = useRef<DropPreviewShape | null>(null);
+    const showPreview = useCallback((shape: DropPreviewShape | null): void => {
+        if (!sameDropPreview(shownPreview.current, shape)) {
+            shownPreview.current = shape;
+            setPreview(shape);
+        }
+    }, []);
     const latest = useRef({ value, onValueChange });
     useLayoutEffect(() => {
         latest.current = { value, onValueChange };
@@ -290,8 +330,8 @@ export function SplitView({
     const stopDrag = useCallback((): void => {
         drag.current = null;
         setDragging(false);
-        setPreview(null);
-    }, []);
+        showPreview(null);
+    }, [showPreview]);
     useEffect(() => {
         if (!dragging) {
             return;
@@ -391,9 +431,9 @@ export function SplitView({
             return null;
         }
         const header = Math.min(barHeight, rect.height);
-        const strip = paneElement(root.current, 'splitHeader', rect.pane.id);
-        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
         const inHeader = y < rect.y + header;
+        const strip = inHeader ? paneElement(root.current, 'splitHeader', rect.pane.id) : undefined;
+        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
         const side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
         const index = inHeader ? tabGapAt(tabRects, event.clientX) : undefined;
         const target: SplitDropTarget = { paneId: rect.pane.id, side, index };
@@ -406,7 +446,7 @@ export function SplitView({
             return null;
         }
         if (side === 'center') {
-            return { target, shape: rectPreview(rect) };
+            return { target, shape: rectDropPreview(rect) };
         }
         if (side) {
             const horizontal = side === 'left' || side === 'right';
@@ -414,7 +454,7 @@ export function SplitView({
             const height = horizontal ? rect.height : Math.max(0, (rect.height - gap) / 2);
             return {
                 target,
-                shape: rectPreview({
+                shape: rectDropPreview({
                     x: side === 'right' ? rect.x + rect.width - width : rect.x,
                     y: side === 'bottom' ? rect.y + rect.height - height : rect.y,
                     width,
@@ -423,7 +463,7 @@ export function SplitView({
             };
         }
         if (header === 0) {
-            return { target, shape: rectPreview(rect) };
+            return { target, shape: rectDropPreview(rect) };
         }
         const tabWidth = Math.min(rect.width, (drag.current?.width ?? 128) / (measurement.scaleX || 1));
         const next = tabRects[index ?? tabRects.length];
@@ -431,7 +471,7 @@ export function SplitView({
         const relative = Math.max(0, Math.min(rect.width - tabWidth, (left - measurement.left) / (measurement.scaleX || 1) - rect.x));
         return {
             target,
-            shape: tabPreview(
+            shape: tabDropPreview(
                 { gap: index ?? rect.pane.views.length, left: relative, tabWidth, width: rect.width, height: rect.height, barHeight: header },
                 { x: rect.x, y: rect.y }
             )
@@ -493,11 +533,11 @@ export function SplitView({
             onDragOver: (event: DragEvent<HTMLDivElement>) => {
                 props.onDragOver?.(event);
                 if (event.defaultPrevented) {
-                    setPreview(null);
+                    showPreview(null);
                     return;
                 }
                 const drop = locateDrop(event);
-                setPreview(drop?.shape ?? null);
+                showPreview(drop?.shape ?? null);
                 if (drop) {
                     event.preventDefault();
                     event.dataTransfer.dropEffect = drag.current ? 'move' : 'copy';
@@ -506,7 +546,7 @@ export function SplitView({
             onDragLeave: (event: DragEvent<HTMLDivElement>) => {
                 props.onDragLeave?.(event);
                 if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
-                    setPreview(null);
+                    showPreview(null);
                 }
             },
             onDrop: (event: DragEvent<HTMLDivElement>) => {
@@ -648,11 +688,7 @@ export function SplitView({
                             }
                         />
                     ))}
-                    {preview && (
-                        <svg className="ade-split-preview" width="100%" height="100%" aria-hidden="true">
-                            <path style={{ d: `path("${dropPreviewPath(preview)}")` }} />
-                        </svg>
-                    )}
+                    <DropPreview shape={preview} />
                 </>
             )
         }

package/src/workspace/TabStrip.tsx

@@ -12,7 +12,7 @@ import {
     type UIEvent,
     type WheelEvent
 } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { Pin, X } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';

package/src/workspace/Workspace.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { WorkspaceContext, type WorkspaceLayout } from './context.ts';
 
 export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
@@ -70,5 +70,9 @@ export function Workspace({
             )
         }
     });
-    return <WorkspaceContext value={{ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }}>{element}</WorkspaceContext>;
+    const context = useMemo(
+        () => ({ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }),
+        [layout, hasToolbar, rightOpen, leftOpen]
+    );
+    return <WorkspaceContext value={context}>{element}</WorkspaceContext>;
 }

package/src/workspace/preview.ts

@@ -1,3 +1,5 @@
+import type { SplitRect } from './geometry.ts';
+
 /* The gap above the indicator's tab, so it reads as a tab standing in the bar. */
 export const TAB_TOP_INSET = 4;
 
@@ -27,13 +29,6 @@ export interface DropPreviewShape {
     radius: number;
 }
 
-export interface PreviewRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
 function coordinate(value: number): string {
     return String(Math.round(value * 100) / 100 + 0);
 }
@@ -42,12 +37,12 @@ function coordinate(value: number): string {
  * 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 }: PreviewRect): DropPreviewShape {
+export function rectDropPreview({ x, y, width, height }: SplitRect): DropPreviewShape {
     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: TabDrop, origin: { x: number; y: number }): DropPreviewShape {
+export function tabDropPreview(drop: TabDrop, origin: { x: number; y: number }): DropPreviewShape {
     return {
         x: origin.x,
         y: origin.y,
@@ -61,6 +56,24 @@ export function tabPreview(drop: TabDrop, origin: { x: number; y: number }): Dro
     };
 }
 
+/* Two shapes that draw the same outline, so a drag that stays in one place can skip a render. */
+export function sameDropPreview(left: DropPreviewShape | null, right: DropPreviewShape | null): boolean {
+    if (left === null || right === null) {
+        return left === right;
+    }
+    return (
+        left.x === right.x &&
+        left.y === right.y &&
+        left.width === right.width &&
+        left.height === right.height &&
+        left.barHeight === right.barHeight &&
+        left.tabLeft === right.tabLeft &&
+        left.tabWidth === right.tabWidth &&
+        left.tabTop === right.tabTop &&
+        left.radius === right.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

package/dist/locales/en.json

@@ -1,82 +0,0 @@
-{
-    "action": {
-        "cancel": "Cancel",
-        "copy": "Copy",
-        "copyError": "Copy error",
-        "dismiss": "Dismiss",
-        "reload": "Reload",
-        "retry": "Try again",
-        "select": "Select",
-        "selectAll": "Select all"
-    },
-    "accent": {
-        "more": "More colors"
-    },
-    "settings": {
-        "title": "Settings",
-        "section": "Settings section",
-        "sections": "Settings sections",
-        "close": "Close settings",
-        "failed": "This settings page failed to render",
-        "search": {
-            "placeholder": "Search settings",
-            "clear": "Clear search",
-            "none": "Nothing matches \"{{query}}\".",
-            "results": "Search results",
-            "pane": "Section"
-        }
-    },
-    "controls": {
-        "stepper": {
-            "smaller": "Smaller",
-            "larger": "Larger",
-            "smallerFor": "{{label}}: smaller",
-            "largerFor": "{{label}}: larger"
-        }
-    },
-    "select": {
-        "search": "Search",
-        "noMatch": "No option matches “{{query}}”"
-    },
-    "iconPicker": {
-        "label": "Icon",
-        "none": "No icon",
-        "search": "Find an icon",
-        "clear": "Clear search",
-        "noMatch": "No icon matches “{{query}}”"
-    },
-    "zoom": {
-        "out": "Zoom out",
-        "in": "Zoom in",
-        "presets": "Zoom presets",
-        "fit": "Zoom to fit",
-        "fitEverything": "Fit everything"
-    },
-    "waveform": {
-        "position": "{{time}} of {{duration}}"
-    },
-    "projectSwitcher": {
-        "label": "Projects",
-        "recent": "Recent projects",
-        "actionsFor": "Actions for {{name}}"
-    },
-    "tabs": {
-        "more": "More",
-        "close": "Close tab"
-    },
-    "tree": {
-        "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

@@ -1,82 +0,0 @@
-{
-    "action": {
-        "cancel": "Annuleren",
-        "copy": "Kopiëren",
-        "copyError": "Fout kopiëren",
-        "dismiss": "Sluiten",
-        "reload": "Herladen",
-        "retry": "Opnieuw proberen",
-        "select": "Selecteren",
-        "selectAll": "Alles selecteren"
-    },
-    "accent": {
-        "more": "Meer kleuren"
-    },
-    "settings": {
-        "title": "Instellingen",
-        "section": "Onderdeel van de instellingen",
-        "sections": "Onderdelen van de instellingen",
-        "close": "Instellingen sluiten",
-        "failed": "Deze instellingenpagina kon niet worden getekend",
-        "search": {
-            "placeholder": "Instellingen zoeken",
-            "clear": "Zoekopdracht wissen",
-            "none": "Niets komt overeen met \"{{query}}\".",
-            "results": "Zoekresultaten",
-            "pane": "Onderdeel"
-        }
-    },
-    "controls": {
-        "stepper": {
-            "smaller": "Kleiner",
-            "larger": "Groter",
-            "smallerFor": "{{label}}: kleiner",
-            "largerFor": "{{label}}: groter"
-        }
-    },
-    "select": {
-        "search": "Zoeken",
-        "noMatch": "Geen optie past bij “{{query}}”"
-    },
-    "iconPicker": {
-        "label": "Icoon",
-        "none": "Geen icoon",
-        "search": "Zoek een icoon",
-        "clear": "Zoekopdracht wissen",
-        "noMatch": "Geen icoon past bij “{{query}}”"
-    },
-    "zoom": {
-        "out": "Uitzoomen",
-        "in": "Inzoomen",
-        "presets": "Zoomstanden",
-        "fit": "Zoomen tot alles past",
-        "fitEverything": "Alles laten passen"
-    },
-    "waveform": {
-        "position": "{{time}} van {{duration}}"
-    },
-    "projectSwitcher": {
-        "label": "Projecten",
-        "recent": "Recente projecten",
-        "actionsFor": "Acties voor {{name}}"
-    },
-    "tabs": {
-        "more": "Meer",
-        "close": "Tabblad sluiten"
-    },
-    "tree": {
-        "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/locales/en.json

@@ -1,82 +0,0 @@
-{
-    "action": {
-        "cancel": "Cancel",
-        "copy": "Copy",
-        "copyError": "Copy error",
-        "dismiss": "Dismiss",
-        "reload": "Reload",
-        "retry": "Try again",
-        "select": "Select",
-        "selectAll": "Select all"
-    },
-    "accent": {
-        "more": "More colors"
-    },
-    "settings": {
-        "title": "Settings",
-        "section": "Settings section",
-        "sections": "Settings sections",
-        "close": "Close settings",
-        "failed": "This settings page failed to render",
-        "search": {
-            "placeholder": "Search settings",
-            "clear": "Clear search",
-            "none": "Nothing matches \"{{query}}\".",
-            "results": "Search results",
-            "pane": "Section"
-        }
-    },
-    "controls": {
-        "stepper": {
-            "smaller": "Smaller",
-            "larger": "Larger",
-            "smallerFor": "{{label}}: smaller",
-            "largerFor": "{{label}}: larger"
-        }
-    },
-    "select": {
-        "search": "Search",
-        "noMatch": "No option matches “{{query}}”"
-    },
-    "iconPicker": {
-        "label": "Icon",
-        "none": "No icon",
-        "search": "Find an icon",
-        "clear": "Clear search",
-        "noMatch": "No icon matches “{{query}}”"
-    },
-    "zoom": {
-        "out": "Zoom out",
-        "in": "Zoom in",
-        "presets": "Zoom presets",
-        "fit": "Zoom to fit",
-        "fitEverything": "Fit everything"
-    },
-    "waveform": {
-        "position": "{{time}} of {{duration}}"
-    },
-    "projectSwitcher": {
-        "label": "Projects",
-        "recent": "Recent projects",
-        "actionsFor": "Actions for {{name}}"
-    },
-    "tabs": {
-        "more": "More",
-        "close": "Close tab"
-    },
-    "tree": {
-        "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

@@ -1,82 +0,0 @@
-{
-    "action": {
-        "cancel": "Annuleren",
-        "copy": "Kopiëren",
-        "copyError": "Fout kopiëren",
-        "dismiss": "Sluiten",
-        "reload": "Herladen",
-        "retry": "Opnieuw proberen",
-        "select": "Selecteren",
-        "selectAll": "Alles selecteren"
-    },
-    "accent": {
-        "more": "Meer kleuren"
-    },
-    "settings": {
-        "title": "Instellingen",
-        "section": "Onderdeel van de instellingen",
-        "sections": "Onderdelen van de instellingen",
-        "close": "Instellingen sluiten",
-        "failed": "Deze instellingenpagina kon niet worden getekend",
-        "search": {
-            "placeholder": "Instellingen zoeken",
-            "clear": "Zoekopdracht wissen",
-            "none": "Niets komt overeen met \"{{query}}\".",
-            "results": "Zoekresultaten",
-            "pane": "Onderdeel"
-        }
-    },
-    "controls": {
-        "stepper": {
-            "smaller": "Kleiner",
-            "larger": "Groter",
-            "smallerFor": "{{label}}: kleiner",
-            "largerFor": "{{label}}: groter"
-        }
-    },
-    "select": {
-        "search": "Zoeken",
-        "noMatch": "Geen optie past bij “{{query}}”"
-    },
-    "iconPicker": {
-        "label": "Icoon",
-        "none": "Geen icoon",
-        "search": "Zoek een icoon",
-        "clear": "Zoekopdracht wissen",
-        "noMatch": "Geen icoon past bij “{{query}}”"
-    },
-    "zoom": {
-        "out": "Uitzoomen",
-        "in": "Inzoomen",
-        "presets": "Zoomstanden",
-        "fit": "Zoomen tot alles past",
-        "fitEverything": "Alles laten passen"
-    },
-    "waveform": {
-        "position": "{{time}} van {{duration}}"
-    },
-    "projectSwitcher": {
-        "label": "Projecten",
-        "recent": "Recente projecten",
-        "actionsFor": "Acties voor {{name}}"
-    },
-    "tabs": {
-        "more": "Meer",
-        "close": "Tabblad sluiten"
-    },
-    "tree": {
-        "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"
-    }
-}