rift-ds 1.2.0 → 1.4.0

package/components/Composer/Composer.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AttachmentItem } from '../Attachment/fileTypes';
 /** Props owned by Composer itself — everything else falls through to the <textarea>. */
 type ComposerOwnProps = {
     /** Current value for controlled use. Pair with `onValueChange`. */
@@ -13,10 +14,12 @@ type ComposerOwnProps = {
     onValueChange?: (value: string) => void;
     /**
      * Fires with the current value on Enter (without Shift) and on the send
-     * button — never while `streaming`, and never when the trimmed value is
-     * empty. Composer does not clear the value: the consumer owns it and clears
-     * it after a successful submit. Shadows the native `onSubmit` attribute,
-     * which never fires on a textarea anyway.
+     * button — never while `streaming`, never while a file in `files` is
+     * still uploading, and never when there is nothing to send. Text is
+     * enough, and so is a ready file on its own, in which case the value is
+     * an empty string. Composer does not clear the value: the consumer owns
+     * it and clears it after a successful submit. Shadows the native
+     * `onSubmit` attribute, which never fires on a textarea anyway.
      */
     onSubmit?: (value: string) => void;
     /**
@@ -38,14 +41,22 @@ type ComposerOwnProps = {
      */
     aiGlow?: boolean;
     /**
-     * Contextual note rendered as a full-width, non-interactive chip at the
-     * very top of the shell, above any attachments — the "what the model is
-     * looking at" line a chat host pins over the message ("Looking at
-     * “Page name”"). One line: a note too long for the shell truncates with
-     * an ellipsis. Composer owns the chip's chrome; the caller passes the
-     * text.
+     * Contextual note rendered as a full-width, non-interactive chip — the
+     * "what the model is looking at" line a chat host pins over the message
+     * ("Looking at “Page name”"). `contextPlacement` decides where it sits.
+     * One line: a note too long for the shell truncates with an ellipsis.
+     * Composer owns the chip's chrome; the caller passes the text.
      */
     context?: React.ReactNode;
+    /**
+     * Where the `context` chip sits. `inside` (the default) pins it at the very
+     * top of the shell, above any attachments. `above` lifts it out of the
+     * shell into its own bar a small gap above it, so it reads as what the
+     * model can see rather than part of the message being typed. Either way
+     * its icon starts on the shell's text rail, and a click on it focuses the
+     * textarea.
+     */
+    contextPlacement?: 'inside' | 'above';
     /**
      * Icon at the left of the context chip — Material Symbol name (string,
      * e.g. `visibility`, `article`) or custom element (ReactNode). Decorative
@@ -55,11 +66,57 @@ type ComposerOwnProps = {
      */
     contextIcon?: string | React.ReactNode;
     /**
-     * Attachment row rendered above the textarea (DocumentChips). Fully
-     * controlled by the caller — Composer never owns the list.
+     * The files queued on this message, drawn as a scrolling row of square
+     * tiles above the textarea. Controlled by the caller: Composer draws the
+     * list and reports what was added or removed, and never stores a file.
+     * `useAttachments` is the usual owner.
+     */
+    files?: AttachmentItem[];
+    /**
+     * Fires with the files a person picked, pasted or dropped. Providing it
+     * arms all three: the attach button and its picker, file paste in the
+     * textarea, and drop on the shell.
+     */
+    onFilesSelected?: (files: File[]) => void;
+    /** Fires with the id of the file whose remove button was pressed. Its presence renders the buttons. */
+    onFileRemove?: (id: string) => void;
+    /** Fires with a queued file when its tile is pressed. Its presence makes the tiles buttons. */
+    onFileClick?: (item: AttachmentItem) => void;
+    /** File types the picker offers, in the native `accept` syntax. */
+    accept?: string;
+    /** Whether the picker allows several files at once. */
+    multiple?: boolean;
+    /** Whether the built-in attach button shows when `onFilesSelected` is set. */
+    attachButton?: boolean;
+    /**
+     * Pasted text at least this many characters long becomes an attachment
+     * instead of landing in the textarea. Off unless set, and inert without
+     * `onPasteAsAttachment`.
+     */
+    pasteThreshold?: number;
+    /** Receives pasted text that met `pasteThreshold`. */
+    onPasteAsAttachment?: (text: string) => void;
+    /** Accessible label for the attach button. */
+    attachLabel?: string;
+    /** Text shown on the shell while files are dragged over it. */
+    dropLabel?: string;
+    /** Accessible label for the list of queued files. */
+    filesLabel?: string;
+    /**
+     * Builds the sentence announced to assistive technology when files join
+     * the queue, leave it, or fail.
+     */
+    formatFileAnnouncement?: (change: {
+        type: 'added' | 'removed' | 'failed';
+        names: string[];
+    }) => string;
+    /**
+     * Free-form row rendered above the textarea, after any `files`.
+     *
+     * @deprecated Use `files` with `onFilesSelected` and `onFileRemove`, which draw the queue as tiles.
      */
     attachments?: React.ReactNode;
-    /** Leading actions on the left of the action bar (attach button, model picker). */
+    /** Leading actions on the left of the action bar, after the attach button (a model picker). */
     actions?: React.ReactNode;
     /**
      * Trailing actions on the right of the action bar, just before the send
@@ -77,7 +134,7 @@ export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPro
 }
 /**
  * Composer is the chat input shell: an optional context note ("Looking at
- * “Page name”"), an attachments row, an auto-growing textarea, a leading
+ * “Page name”"), a tray of queued files, an auto-growing textarea, a leading
  * actions slot, and a trailing send button — the one sanctioned
  * primary-action teal in the chat set, because sending a message is a
  * genuine primary CTA. While `streaming`, send becomes stop and Enter

package/components/Composer/Composer.js

@@ -1,9 +1,21 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useState, useLayoutEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect, useEffect } from "react";
+import { AttachmentTile } from "../Attachment/AttachmentTile.js";
+import { formatBytes } from "../Attachment/fileTypes.js";
 import { CircularButton } from "../CircularButton/CircularButton.js";
 import "../../fonts/material-symbols.css";
 import "./Composer.css";
+const defaultFileAnnouncement = ({
+  type,
+  names
+}) => {
+  const list = names.join(", ");
+  if (type === "added") return `Attached ${list}`;
+  if (type === "removed") return `Removed ${list}`;
+  return `Could not attach ${list}`;
+};
+const dragCarriesFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
 const Composer = React.forwardRef(
   ({
     value,
@@ -16,6 +28,20 @@ const Composer = React.forwardRef(
     aiGlow = false,
     context,
     contextIcon,
+    contextPlacement = "inside",
+    files,
+    onFilesSelected,
+    onFileRemove,
+    onFileClick,
+    accept,
+    multiple = true,
+    attachButton = true,
+    pasteThreshold,
+    onPasteAsAttachment,
+    attachLabel = "Attach files",
+    dropLabel = "Drop files to attach",
+    filesLabel = "Attachments",
+    formatFileAnnouncement = defaultFileAnnouncement,
     attachments,
     actions,
     trailingActions,
@@ -24,6 +50,7 @@ const Composer = React.forwardRef(
     className = "",
     onChange,
     onKeyDown,
+    onPaste,
     ...rest
   }, ref) => {
     const baseClass = "ds-composer";
@@ -33,7 +60,17 @@ const Composer = React.forwardRef(
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
     const currentValue = isControlled ? value : uncontrolledValue;
     const disabled = Boolean(rest.disabled);
-    const canSend = !disabled && currentValue.trim() !== "";
+    const queued = files ?? [];
+    const hasFiles = queued.length > 0;
+    const armed = Boolean(onFilesSelected);
+    const anyUploading = queued.some((file) => file.status === "uploading");
+    const anyReady = queued.some((file) => file.status === "ready");
+    const canSend = !disabled && !anyUploading && (currentValue.trim() !== "" || anyReady);
+    const fileInputRef = useRef(null);
+    const trayRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const dragDepth = useRef(0);
+    const [announcement, setAnnouncement] = useState("");
     const setTextareaRef = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -56,6 +93,92 @@ const Composer = React.forwardRef(
       observer.observe(node);
       return () => observer.disconnect();
     }, []);
+    const previousFiles = useRef(queued);
+    const announceRef = useRef(formatFileAnnouncement);
+    announceRef.current = formatFileAnnouncement;
+    useEffect(() => {
+      const before = previousFiles.current;
+      const now = files ?? [];
+      previousFiles.current = now;
+      if (before === now) return;
+      const beforeById = new Map(before.map((file) => [file.id, file]));
+      const nowIds = new Set(now.map((file) => file.id));
+      const added = now.filter((file) => !beforeById.has(file.id)).map((file) => file.name);
+      const removed = before.filter((file) => !nowIds.has(file.id)).map((file) => file.name);
+      const failed = now.filter((file) => file.status === "error" && beforeById.get(file.id)?.status !== "error").map((file) => file.name);
+      const parts = [
+        failed.length > 0 ? announceRef.current({ type: "failed", names: failed }) : "",
+        added.length > 0 ? announceRef.current({ type: "added", names: added }) : "",
+        removed.length > 0 ? announceRef.current({ type: "removed", names: removed }) : ""
+      ].filter(Boolean);
+      if (parts.length > 0) setAnnouncement(parts.join(". "));
+    }, [files]);
+    const focusAfterRemove = useRef(null);
+    useEffect(() => {
+      const index = focusAfterRemove.current;
+      if (index === null) return;
+      focusAfterRemove.current = null;
+      const buttons = trayRef.current?.querySelectorAll(
+        ".ds-attachment-tile__remove"
+      );
+      const next = buttons?.[Math.min(index, (buttons?.length ?? 0) - 1)];
+      if (next) next.focus();
+      else textareaRef.current?.focus();
+    }, [files]);
+    const handleFileRemove = (id, index) => {
+      focusAfterRemove.current = index;
+      onFileRemove?.(id);
+    };
+    const handlePick = (event) => {
+      const picked = Array.from(event.target.files ?? []);
+      event.target.value = "";
+      if (picked.length > 0) onFilesSelected?.(picked);
+    };
+    const handlePaste = (event) => {
+      onPaste?.(event);
+      if (event.defaultPrevented) return;
+      const pasted = Array.from(event.clipboardData?.files ?? []);
+      if (armed && pasted.length > 0) {
+        event.preventDefault();
+        onFilesSelected?.(pasted);
+        return;
+      }
+      if (pasteThreshold === void 0 || !onPasteAsAttachment) return;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length >= pasteThreshold) {
+        event.preventDefault();
+        onPasteAsAttachment(text);
+      }
+    };
+    const takesDrag = (event) => armed && !disabled && dragCarriesFiles(event);
+    const handleDragEnter = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dragDepth.current += 1;
+      setDragging(true);
+    };
+    const handleDragOver = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = "copy";
+    };
+    const handleDragLeave = (event) => {
+      if (!takesDrag(event)) return;
+      event.stopPropagation();
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    };
+    const handleDrop = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dragDepth.current = 0;
+      setDragging(false);
+      const dropped = Array.from(event.dataTransfer.files ?? []);
+      if (dropped.length > 0) onFilesSelected?.(dropped);
+    };
     const submit = () => {
       if (streaming || !canSend) return;
       onSubmit?.(currentValue);
@@ -82,20 +205,53 @@ const Composer = React.forwardRef(
       aiGlow ? `${baseClass}--ai-glow` : "",
       streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
+      dragging ? `${baseClass}--dragging` : "",
+      // The above placement moves the text onto the chip's rail; the shell
+      // needs to know, since the chip is no longer inside it.
+      context && contextPlacement === "above" ? `${baseClass}--context-above` : "",
       className
     ].filter(Boolean).join(" ");
     const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
-    return /* @__PURE__ */ jsxs(
+    const contextAbove = contextPlacement === "above";
+    const contextChip = context ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__context${contextAbove ? ` ${baseClass}__context--above` : ""}`,
+        onClick: contextAbove ? handleShellClick : void 0,
+        children: [
+          contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: typeof contextIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) : contextIcon }),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
+        ]
+      }
+    ) : null;
+    const shell = /* @__PURE__ */ jsxs(
       "div",
       {
         className: classes,
         style: { "--ds-composer-max-rows": maxRows },
         onClick: handleShellClick,
+        onDragEnter: armed ? handleDragEnter : void 0,
+        onDragOver: armed ? handleDragOver : void 0,
+        onDragLeave: armed ? handleDragLeave : void 0,
+        onDrop: armed ? handleDrop : void 0,
         children: [
-          context && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__context`, children: [
-            contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: typeof contextIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) : contextIcon }),
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
-          ] }),
+          !contextAbove && contextChip,
+          hasFiles && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__tray`, ref: trayRef, "aria-label": filesLabel, children: queued.map((file, index) => /* @__PURE__ */ jsx("li", { className: `${baseClass}__tray-item`, children: /* @__PURE__ */ jsx(
+            AttachmentTile,
+            {
+              name: file.name,
+              kind: file.kind,
+              status: file.status,
+              progress: file.progress,
+              error: file.error,
+              previewSrc: file.previewSrc,
+              previewAlt: file.previewAlt,
+              excerpt: file.excerpt,
+              meta: file.size === void 0 ? void 0 : formatBytes(file.size),
+              onClick: onFileClick ? () => onFileClick(file) : void 0,
+              onRemove: onFileRemove && !disabled ? () => handleFileRemove(file.id, index) : void 0
+            }
+          ) }, file.id)) }),
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
           /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",
@@ -107,11 +263,24 @@ const Composer = React.forwardRef(
               value: currentValue,
               "aria-label": ariaLabel,
               onChange: handleChange,
-              onKeyDown: handleKeyDown
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
-            actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+            (actions || armed && attachButton) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__actions`, children: [
+              armed && attachButton && /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "add",
+                  variant: "tertiary",
+                  ariaLabel: attachLabel,
+                  disabled,
+                  onClick: () => fileInputRef.current?.click()
+                }
+              ),
+              actions
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: `${baseClass}__trailing`, children: [
               trailingActions,
               streaming ? /* @__PURE__ */ jsx(
@@ -134,10 +303,34 @@ const Composer = React.forwardRef(
                 }
               )
             ] })
-          ] })
+          ] }),
+          armed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                className: `${baseClass}__file-input`,
+                type: "file",
+                accept,
+                multiple,
+                tabIndex: -1,
+                "aria-hidden": "true",
+                onChange: handlePick
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__drop-hint`, "aria-hidden": "true", children: dropLabel })
+          ] }),
+          (armed || hasFiles) && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: announcement })
         ]
       }
     );
+    if (contextAbove && contextChip) {
+      return /* @__PURE__ */ jsxs("div", { className: `${baseClass}-group`, children: [
+        contextChip,
+        shell
+      ] });
+    }
+    return shell;
   }
 );
 Composer.displayName = "Composer";

package/components/DatePicker/DatePicker.css

@@ -138,7 +138,7 @@
 
 /* Today indicator */
 .ds-date-picker__cell--today {
-  border: var(--border-025) solid var(--color-action-primary-bg);
+  border: var(--border-025) solid var(--color-bg-page-inverse);
 }
 
 /* Selected */

package/components/DocumentChip/DocumentChip.d.ts

@@ -28,14 +28,16 @@ type DocumentChipOwnProps = {
 export interface DocumentChipProps extends DocumentChipOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DocumentChipOwnProps> {
 }
 /**
- * DocumentChip is a compact file reference: a two-line tile with a type
- * icon, name, metadata line, upload progress, and an optional remove
- * button. It references documents attached to chat messages or queued
- * above a composer — Chip stays the one-line pill for attributes, and
- * FileInput stays the form control that owns selection.
+ * DocumentChip is the earlier, one-row file reference: a type icon, name,
+ * metadata line, upload progress, and an optional remove button. It keeps
+ * working for existing consumers, and new work uses the attachment family:
+ * AttachmentTile for a file, Composer's `files` for a queue, and
+ * AttachmentGroup for the files on a sent message.
  *
  * The root is always a `<div>`; passing `onClick` turns the body into a
  * `<button>` so click and remove coexist without nesting controls.
+ *
+ * @deprecated Use `AttachmentTile` instead.
  */
 export declare const DocumentChip: React.ForwardRefExoticComponent<DocumentChipProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/EventCalendar/EventCalendar.css

@@ -7,7 +7,7 @@
    cell height.
 
    Event accents use the core accent roles —
-   never the action teal, which stays reserved
+   never the action colour, which stays reserved
    for actions.
    ============================================ */
 
@@ -190,7 +190,7 @@ button.ds-event-calendar__day:focus-visible {
   letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
 }
 
-/* Selected — the teal selection chip (the selected item of a mutually
+/* Selected — the action-colour selection chip (the selected item of a mutually
    exclusive set, DatePicker's convention). Declared after the today block
    so a selected today reads as selected. */
 .ds-event-calendar__cell--selected .ds-event-calendar__day {

package/components/FileInput/FileInput.css

@@ -178,7 +178,7 @@
   display: block;
   height: 100%;
   border-radius: var(--radius-pill);
-  background-color: var(--color-action-primary-bg);
+  background-color: var(--color-core-accent-mint);
   transition: width var(--motion-duration-base) var(--motion-ease-standard);
 }
 

package/components/FileInput/FileInput.js

@@ -3,14 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId } from "react";
 import { Field } from "../Field/Field.js";
 import "./FileInput.css";
+import { formatBytes } from "../Attachment/fileTypes.js";
 import "../../fonts/material-symbols.css";
-const formatBytes = (bytes) => {
-  if (bytes === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-  const value = bytes / Math.pow(1024, exponent);
-  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
-};
 const FileInput = React.forwardRef(
   ({
     label,

package/components/Globe/Globe.d.ts

@@ -54,9 +54,11 @@ type GlobeOwnProps = {
     /** Fires whenever the view changes — drag, keys, or the auto-rotation. */
     onRotationChange?: (rotation: GlobeRotation) => void;
     /**
-     * Spin slowly on its own, in degrees per second. Pauses while the pointer
-     * is over the globe or it has focus, and never runs under
-     * `prefers-reduced-motion`. `0` switches it off.
+     * Spin slowly on its own, in degrees per second at the shipped motion
+     * tempo. The speed follows `--motion-duration-orbit`, so a theme that
+     * stretches or shortens its durations slows or quickens the spin with
+     * them. Pauses while the pointer is over the globe or it has focus, and
+     * never runs under `prefers-reduced-motion`. `0` switches it off.
      */
     autoRotate?: number;
     /** Drag to rotate, and rotate with the arrow keys (or W, A, S, D) when focused. */

package/components/Globe/Globe.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useState, useRef, useCallback, useSyncExternalStore, useEffect } from "react";
+import { MOTION_ORBIT_REFERENCE_MS } from "../../tokens/motion.js";
 import "./Globe.css";
 const VIEW = 480;
 const CENTER = VIEW / 2;
@@ -11,6 +12,15 @@ const DRAG_DEGREES_PER_RADIUS = 90;
 const KEY_STEP = 10;
 const MAX_LAT = 80;
 const MARKER = 5;
+const ORBIT_READ_INTERVAL_MS = 250;
+const readOrbitTempo = (node) => {
+  if (!node) return 1;
+  const raw = getComputedStyle(node).getPropertyValue("--motion-duration-orbit").trim();
+  const m = raw.match(/^([\d.]+)(ms|s)$/);
+  if (!m) return 1;
+  const ms = parseFloat(m[1]) * (m[2] === "s" ? 1e3 : 1);
+  return ms > 0 ? MOTION_ORBIT_REFERENCE_MS / Math.max(ms, MOTION_ORBIT_REFERENCE_MS / 20) : 1;
+};
 const DEG = Math.PI / 180;
 const toVec = (lat, lng) => {
   const φ = lat * DEG;
@@ -148,22 +158,28 @@ const Globe = React.forwardRef(
       getReducedMotion,
       getServerReducedMotion
     );
+    const rootRef = useRef(null);
     const spinning = autoRotate !== 0 && !paused && !reducedMotion;
     useEffect(() => {
       if (!spinning) return;
       let frame = 0;
       let last = performance.now();
+      let tempo = readOrbitTempo(rootRef.current);
+      let lastRead = last;
       const tick = (now) => {
         const dt = (now - last) / 1e3;
         last = now;
+        if (now - lastRead >= ORBIT_READ_INTERVAL_MS) {
+          tempo = readOrbitTempo(rootRef.current);
+          lastRead = now;
+        }
         const [lng, lat] = rotationRef.current;
-        commit([lng - autoRotate * dt, lat]);
+        commit([lng - autoRotate * tempo * dt, lat]);
         frame = requestAnimationFrame(tick);
       };
       frame = requestAnimationFrame(tick);
       return () => cancelAnimationFrame(frame);
     }, [spinning, autoRotate, commit]);
-    const rootRef = useRef(null);
     const drag = useRef(null);
     const [dragging, setDragging] = useState(false);
     const setRef = (node) => {