rift-ds 1.3.0 → 1.4.0

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,
@@ -17,6 +29,19 @@ const Composer = React.forwardRef(
     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,
@@ -25,6 +50,7 @@ const Composer = React.forwardRef(
     className = "",
     onChange,
     onKeyDown,
+    onPaste,
     ...rest
   }, ref) => {
     const baseClass = "ds-composer";
@@ -34,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);
@@ -57,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);
@@ -83,6 +205,7 @@ 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` : "",
@@ -107,8 +230,28 @@ const Composer = React.forwardRef(
         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: [
           !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",
@@ -120,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(
@@ -147,7 +303,24 @@ 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 })
         ]
       }
     );

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/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/MessageCard/MessageCard.d.ts

@@ -18,7 +18,7 @@ type MessageCardOwnProps = {
     actions?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Body content between the description and the footer — rich content, a Prose block, a DocumentChip row. */
+    /** Body content between the description and the footer — rich content, a Prose block, an AttachmentGroup. */
     children?: React.ReactNode;
 };
 export interface MessageCardProps extends MessageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageCardOwnProps> {

package/components/registry.json

@@ -161,6 +161,42 @@
       "folder": "Chart",
       "recharts": true
     },
+    {
+      "name": "AttachmentDropZone",
+      "label": "Attachment drop zone",
+      "slug": "attachment-drop-zone",
+      "description": "A wrapper that makes a whole surface a file drop target, with an outlined overlay while files hover over it.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentGroup",
+      "label": "Attachment group",
+      "slug": "attachment-group",
+      "description": "The files on a sent message: one picture at its own shape, or a grid of tiles that collapses behind a count.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentTile",
+      "label": "Attachment tile",
+      "slug": "attachment-tile",
+      "description": "One file as a square: a picture, a coloured mark for well-known formats, or a neutral badge, with upload states.",
+      "category": "ai",
+      "client": false,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentViewer",
+      "label": "Attachment viewer",
+      "slug": "attachment-viewer",
+      "description": "A preview dialog for a message's files, with download, stepping, and plain states for files it cannot show.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
     {
       "name": "Avatar",
       "label": "Avatar",
@@ -369,7 +405,7 @@
       "name": "Composer",
       "label": "Composer",
       "slug": "composer",
-      "description": "An auto-growing message input with send and stop states, a page-context note, an attachment slot, and Enter-to-send.",
+      "description": "An auto-growing message input with send and stop states, a page-context note, a file tray fed by picker, paste and drop, and Enter-to-send.",
       "category": "ai",
       "client": true
     },
@@ -441,7 +477,7 @@
       "name": "DocumentChip",
       "label": "Document chip",
       "slug": "document-chip",
-      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "description": "A legacy one-row file reference, superseded by the attachment tile and kept for existing consumers.",
       "category": "ai",
       "client": false
     },

package/components/registry.json.d.ts

@@ -161,6 +161,42 @@ declare const _default: {
       "folder": "Chart",
       "recharts": true
     },
+    {
+      "name": "AttachmentDropZone",
+      "label": "Attachment drop zone",
+      "slug": "attachment-drop-zone",
+      "description": "A wrapper that makes a whole surface a file drop target, with an outlined overlay while files hover over it.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentGroup",
+      "label": "Attachment group",
+      "slug": "attachment-group",
+      "description": "The files on a sent message: one picture at its own shape, or a grid of tiles that collapses behind a count.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentTile",
+      "label": "Attachment tile",
+      "slug": "attachment-tile",
+      "description": "One file as a square: a picture, a coloured mark for well-known formats, or a neutral badge, with upload states.",
+      "category": "ai",
+      "client": false,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentViewer",
+      "label": "Attachment viewer",
+      "slug": "attachment-viewer",
+      "description": "A preview dialog for a message's files, with download, stepping, and plain states for files it cannot show.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
     {
       "name": "Avatar",
       "label": "Avatar",
@@ -369,7 +405,7 @@ declare const _default: {
       "name": "Composer",
       "label": "Composer",
       "slug": "composer",
-      "description": "An auto-growing message input with send and stop states, a page-context note, an attachment slot, and Enter-to-send.",
+      "description": "An auto-growing message input with send and stop states, a page-context note, a file tray fed by picker, paste and drop, and Enter-to-send.",
       "category": "ai",
       "client": true
     },
@@ -441,7 +477,7 @@ declare const _default: {
       "name": "DocumentChip",
       "label": "Document chip",
       "slug": "document-chip",
-      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "description": "A legacy one-row file reference, superseded by the attachment tile and kept for existing consumers.",
       "category": "ai",
       "client": false
     },