@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/domains/chat/attachments/composer-attachment.cjs.js

@@ -4,42 +4,184 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
+const React = require('react');
 const domains_chat_attachments_composerAttachmentContext = require('./composer-attachment-context.cjs.js');
-const icons_Icon = require('../../../icons/Icon.cjs.js');
+const Button = require('../../../Button-BTuu6_hv.cjs');
+const contextMenu = require('../../../context-menu-Dpm8dBLw.cjs');
 const primitives_raisedSurface = require('../../../primitives/raised-surface.cjs.js');
-const primitives_transitions = require('../../../primitives/transitions.cjs.js');
-const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_cn = require('../../../cn-TqD01zH-.cjs');
 
-function ComposerAttachment({ name, children, onRemove, variant = "thumbnail" }) {
+const attachmentSurfaceStyle = utils_cn.cn(primitives_raisedSurface.raisedSurfaceStyle, "dark:bg-linear-to-b dark:from-fill dark:to-fill");
+function ComposerAttachment({
+  name,
+  children,
+  onRemove,
+  onEdit,
+  onPreview,
+  variant = "thumbnail"
+}) {
+  const triggerRef = React.useRef(null);
+  const focusTargetRef = React.useRef(void 0);
+  const menuContentRef = React.useRef(null);
+  const actionSelected = React.useRef(false);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [menuAnchor, setMenuAnchor] = React.useState();
+  function openMenu(anchor) {
+    const focused = triggerRef.current?.ownerDocument.activeElement;
+    focusTargetRef.current = anchor;
+    if (!anchor && focused instanceof HTMLElement && triggerRef.current?.contains(focused)) {
+      focusTargetRef.current = focused;
+    }
+    actionSelected.current = false;
+    setMenuAnchor(anchor);
+    setMenuOpen(true);
+  }
+  function runMenuAction(action) {
+    actionSelected.current = true;
+    setMenuOpen(false);
+    action();
+    focusTargetRef.current = focusOutsideMenu() ?? focusTargetRef.current;
+  }
+  function focusOutsideMenu() {
+    const focused = triggerRef.current?.ownerDocument.activeElement;
+    if (focused instanceof HTMLElement && focused !== focused.ownerDocument.body && !menuContentRef.current?.contains(focused)) {
+      return focused;
+    }
+  }
+  function returnFocus() {
+    if (actionSelected.current && focusOutsideMenu()) return false;
+    if (focusTargetRef.current?.isConnected) return focusTargetRef.current;
+    return triggerRef.current;
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    contextMenu.ContextMenu,
     {
-      className: utils_cn.cn(
-        primitives_raisedSurface.raisedSurfaceStyle,
-        primitives_raisedSurface.surfaceStateLayerStyle,
-        "group/attachment relative flex h-14 min-w-24 shrink-0 items-center overflow-hidden rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)]",
-        variant === "inline" ? "max-w-56" : "max-w-48"
-      ),
-      title: name,
+      open: menuOpen,
+      onOpenChange: (open) => {
+        if (open) openMenu();
+        else setMenuOpen(false);
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-w-0 flex-1 items-center justify-center rounded-[inherit] pr-9 pointer-coarse:pr-12", children: /* @__PURE__ */ jsxRuntime.jsx(domains_chat_attachments_composerAttachmentContext.ComposerAttachmentContext.Provider, { value: name, children }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          contextMenu.ContextMenu.Trigger,
           {
-            type: "button",
-            "aria-label": `Remove ${name}`,
-            title: `Remove ${name}`,
-            onClick: onRemove,
+            ref: triggerRef,
+            "data-slot": "composer-attachment",
+            title: name,
             className: utils_cn.cn(
-              "absolute top-0 right-0 z-10 flex size-7 cursor-pointer items-center justify-center rounded-tr-[inherit] rounded-bl-lg bg-fill-subtle text-muted-foreground hover:bg-fill hover:text-foreground",
-              // Follow actual hover state so a secondary mouse can reveal the tab too.
-              "opacity-0 group-focus-within/attachment:opacity-100 group-[:hover]/attachment:opacity-100 focus-visible:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100",
-              "motion-safe:transition-opacity motion-safe:duration-fast",
-              primitives_transitions.focusRingInset
+              attachmentSurfaceStyle,
+              "group/attachment relative h-17 shrink-0 rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)] [--attachment-thumbnail-size:--spacing(15)]",
+              // Concentric corners: the inner radius is the outer radius minus its inset.
+              "[--attachment-action-inset:--spacing(1)] [--attachment-action-radius:max(0px,calc(var(--attachment-radius)-var(--attachment-action-inset)))] [--attachment-action-width:--spacing(9)] [--attachment-sleeve-width:calc(var(--attachment-action-width)+2*var(--attachment-action-inset))]",
+              variant === "inline" ? "w-72" : "w-66"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+            onClickCapture: (event) => {
+              if (menuOpen && !actionSelected.current) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            },
+            onKeyDown: (event) => {
+              if (!(event.target instanceof HTMLElement) || !event.currentTarget.contains(event.target)) return;
+              if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+                event.preventDefault();
+                openMenu(event.target);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "composer-attachment-cover",
+                  className: utils_cn.cn(
+                    attachmentSurfaceStyle,
+                    primitives_raisedSurface.surfaceStateLayerStyle,
+                    "absolute inset-0 z-10 flex min-w-0 items-center overflow-hidden rounded-[inherit]",
+                    "motion-safe:transition-[right,border-radius] motion-safe:duration-normal motion-safe:ease-out-custom",
+                    "group-focus-within/attachment:right-(--attachment-sleeve-width) group-data-popup-open/attachment:right-(--attachment-sleeve-width) group-[:hover]/attachment:right-(--attachment-sleeve-width)",
+                    // Tighten the facing edge so two large curves do not widen the visible gutter.
+                    "group-focus-within/attachment:rounded-r-(--attachment-action-inset) group-data-popup-open/attachment:rounded-r-(--attachment-action-inset) group-[:hover]/attachment:rounded-r-(--attachment-action-inset)",
+                    "max-sm:rounded-r-[inherit]! pointer-coarse:rounded-r-[inherit]!",
+                    "max-sm:right-0! max-sm:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]",
+                    "pointer-coarse:right-0! pointer-coarse:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(domains_chat_attachments_composerAttachmentContext.ComposerAttachmentContext.Provider, { value: name, children })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "composer-attachment-actions",
+                  className: utils_cn.cn(
+                    "absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) flex w-(--attachment-action-width) flex-col gap-(--attachment-action-inset)",
+                    "translate-x-2 opacity-0 motion-safe:transition-[translate,opacity] motion-safe:duration-normal motion-safe:ease-out-custom",
+                    "group-[:hover]/attachment:translate-x-0 group-[:hover]/attachment:opacity-100",
+                    "group-focus-within/attachment:translate-x-0 group-focus-within/attachment:opacity-100",
+                    "group-data-popup-open/attachment:translate-x-0 group-data-popup-open/attachment:opacity-100",
+                    "max-sm:hidden pointer-coarse:hidden"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
+                      {
+                        type: "button",
+                        variant: "destructive-ghost",
+                        size: "icon-sm",
+                        className: "h-auto w-full flex-1 rounded-(--attachment-action-radius)",
+                        onClick: onRemove,
+                        "aria-label": `Remove ${name}`,
+                        title: `Remove ${name}`,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+                      }
+                    ),
+                    onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-sm",
+                        className: "h-auto w-full flex-1 rounded-(--attachment-action-radius)",
+                        onClick: onEdit,
+                        "aria-label": `Edit ${name}`,
+                        title: `Edit ${name}`,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button.Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) z-20 hidden h-auto w-11 rounded-(--attachment-action-radius) max-sm:flex pointer-coarse:flex",
+                  "aria-label": `Actions for ${name}`,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": menuOpen,
+                  onClick: (event) => openMenu(event.currentTarget),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, {})
+                }
+              )
+            ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(contextMenu.ContextMenu.Content, { ref: menuContentRef, anchor: menuAnchor, collisionPadding: 8, finalFocus: returnFocus, children: [
+          onPreview && /* @__PURE__ */ jsxRuntime.jsxs(contextMenu.ContextMenu.Item, { className: "min-h-11", onSelect: () => runMenuAction(onPreview), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preview" })
+          ] }),
+          onEdit && /* @__PURE__ */ jsxRuntime.jsxs(contextMenu.ContextMenu.Item, { className: "min-h-11", onSelect: () => runMenuAction(onEdit), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Edit" })
+          ] }),
+          (onPreview || onEdit) && /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(contextMenu.ContextMenu.Item, { className: "min-h-11", variant: "destructive", onSelect: () => runMenuAction(onRemove), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Remove" })
+          ] })
+        ] })
       ]
     }
   );

package/dist/domains/chat/attachments/composer-attachment.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer-attachment.cjs.js","sources":["../../../../src/domains/chat/attachments/composer-attachment.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ComposerAttachmentContext } from './composer-attachment-context';\nimport { Icon } from '@/ds/icons/Icon';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/utils/cn';\n\nexport interface ComposerAttachmentProps {\n  name: string;\n  children: ReactNode;\n  onRemove: () => void;\n  /** Inline entries allow a little more width for long filenames. */\n  variant?: 'thumbnail' | 'inline';\n}\n\nexport function ComposerAttachment({ name, children, onRemove, variant = 'thumbnail' }: ComposerAttachmentProps) {\n  return (\n    <div\n      className={cn(\n        raisedSurfaceStyle,\n        surfaceStateLayerStyle,\n        'group/attachment relative flex h-14 min-w-24 shrink-0 items-center overflow-hidden rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)]',\n        variant === 'inline' ? 'max-w-56' : 'max-w-48',\n      )}\n      title={name}\n    >\n      <div className=\"flex h-full min-w-0 flex-1 items-center justify-center rounded-[inherit] pr-9 pointer-coarse:pr-12\">\n        <ComposerAttachmentContext.Provider value={name}>{children}</ComposerAttachmentContext.Provider>\n      </div>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${name}`}\n        title={`Remove ${name}`}\n        onClick={onRemove}\n        className={cn(\n          'absolute top-0 right-0 z-10 flex size-7 cursor-pointer items-center justify-center rounded-tr-[inherit] rounded-bl-lg bg-fill-subtle text-muted-foreground hover:bg-fill hover:text-foreground',\n          // Follow actual hover state so a secondary mouse can reveal the tab too.\n          'opacity-0 group-focus-within/attachment:opacity-100 group-[:hover]/attachment:opacity-100 focus-visible:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100',\n          'motion-safe:transition-opacity motion-safe:duration-fast',\n          focusRingInset,\n        )}\n      >\n        <Icon size=\"sm\" aria-hidden=\"true\">\n          <X />\n        </Icon>\n      </button>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","raisedSurfaceStyle","surfaceStateLayerStyle","jsx","ComposerAttachmentContext","focusRingInset","Icon","X"],"mappings":";;;;;;;;;;;;AAgBO,SAAS,mBAAmB,EAAE,IAAA,EAAM,UAAU,QAAA,EAAU,OAAA,GAAU,aAAY,EAA4B;AAC/G,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACTC,2CAAA;AAAA,QACAC,+CAAA;AAAA,QACA,yJAAA;AAAA,QACA,OAAA,KAAY,WAAW,UAAA,GAAa;AAAA,OACtC;AAAA,MACA,KAAA,EAAO,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oGAAA,EACb,QAAA,kBAAAA,cAAA,CAACC,4EAAA,CAA0B,UAA1B,EAAmC,KAAA,EAAO,IAAA,EAAO,QAAA,EAAS,CAAA,EAC7D,CAAA;AAAA,wBACAD,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,YAAA,EAAY,UAAU,IAAI,CAAA,CAAA;AAAA,YAC1B,KAAA,EAAO,UAAU,IAAI,CAAA,CAAA;AAAA,YACrB,OAAA,EAAS,QAAA;AAAA,YACT,SAAA,EAAWH,WAAA;AAAA,cACT,gMAAA;AAAA;AAAA,cAEA,uKAAA;AAAA,cACA,0DAAA;AAAA,cACAK;AAAA,aACF;AAAA,YAEA,QAAA,kBAAAF,cAAA,CAACG,mBAAK,IAAA,EAAK,IAAA,EAAK,eAAY,MAAA,EAC1B,QAAA,kBAAAH,cAAA,CAACI,iBAAE,CAAA,EACL;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"composer-attachment.cjs.js","sources":["../../../../src/domains/chat/attachments/composer-attachment.tsx"],"sourcesContent":["import { Ellipsis, Eye, Pencil, X } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { ComposerAttachmentContext } from './composer-attachment-context';\nimport { Button } from '@/ds/components/Button/Button';\nimport { ContextMenu } from '@/ds/components/ContextMenu/context-menu';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/utils/cn';\n\n// Dark attachments need a fill above the muted composer. Light attachments keep\n// the white card material and use the shared rim and shadow for elevation.\n// Both stay opaque so the sleeve controls cannot show through the cover.\nconst attachmentSurfaceStyle = cn(raisedSurfaceStyle, 'dark:bg-linear-to-b dark:from-fill dark:to-fill');\n\nexport interface ComposerAttachmentProps {\n  name: string;\n  children: ReactNode;\n  onRemove: () => void;\n  /** Optional application-owned editor, available in the sleeve and context menu. */\n  onEdit?: () => void;\n  /** Explicitly enables the context-menu preview action. Applications own preview state or navigation. */\n  onPreview?: () => void;\n  /** Inline entries allow a little more width for long filenames. */\n  variant?: 'thumbnail' | 'inline';\n}\n\nexport function ComposerAttachment({\n  name,\n  children,\n  onRemove,\n  onEdit,\n  onPreview,\n  variant = 'thumbnail',\n}: ComposerAttachmentProps) {\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const focusTargetRef = useRef<HTMLElement | undefined>(undefined);\n  const menuContentRef = useRef<HTMLDivElement>(null);\n  const actionSelected = useRef(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [menuAnchor, setMenuAnchor] = useState<HTMLElement>();\n\n  function openMenu(anchor?: HTMLElement) {\n    const focused = triggerRef.current?.ownerDocument.activeElement;\n    // Pointer menus keep their cursor position while remembering keyboard focus.\n    focusTargetRef.current = anchor;\n    if (!anchor && focused instanceof HTMLElement && triggerRef.current?.contains(focused)) {\n      focusTargetRef.current = focused;\n    }\n    actionSelected.current = false;\n    setMenuAnchor(anchor);\n    setMenuOpen(true);\n  }\n\n  function runMenuAction(action: () => void) {\n    actionSelected.current = true;\n    setMenuOpen(false);\n    action();\n    // The menu's focus trap may remain until its exit transition completes.\n    // Remember a synchronous application focus change across that teardown.\n    focusTargetRef.current = focusOutsideMenu() ?? focusTargetRef.current;\n  }\n\n  function focusOutsideMenu() {\n    const focused = triggerRef.current?.ownerDocument.activeElement;\n    if (\n      focused instanceof HTMLElement &&\n      focused !== focused.ownerDocument.body &&\n      !menuContentRef.current?.contains(focused)\n    ) {\n      return focused;\n    }\n  }\n\n  function returnFocus() {\n    // Preserve focus moved by the application (for example into an editor).\n    // Otherwise, an inline action still needs to return focus to its opener.\n    if (actionSelected.current && focusOutsideMenu()) return false;\n    if (focusTargetRef.current?.isConnected) return focusTargetRef.current;\n    return triggerRef.current;\n  }\n\n  return (\n    <ContextMenu\n      open={menuOpen}\n      onOpenChange={open => {\n        if (open) openMenu();\n        else setMenuOpen(false);\n      }}\n    >\n      <ContextMenu.Trigger\n        ref={triggerRef}\n        data-slot=\"composer-attachment\"\n        title={name}\n        className={cn(\n          attachmentSurfaceStyle,\n          'group/attachment relative h-17 shrink-0 rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)] [--attachment-thumbnail-size:--spacing(15)]',\n          // Concentric corners: the inner radius is the outer radius minus its inset.\n          '[--attachment-action-inset:--spacing(1)] [--attachment-action-radius:max(0px,calc(var(--attachment-radius)-var(--attachment-action-inset)))] [--attachment-action-width:--spacing(9)] [--attachment-sleeve-width:calc(var(--attachment-action-width)+2*var(--attachment-action-inset))]',\n          variant === 'inline' ? 'w-72' : 'w-66',\n        )}\n        onClickCapture={event => {\n          // Releasing a long press must not also activate the underlying file.\n          if (menuOpen && !actionSelected.current) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }}\n        onKeyDown={event => {\n          // Portalled preview dialogs also bubble through this React ancestor.\n          if (!(event.target instanceof HTMLElement) || !event.currentTarget.contains(event.target)) return;\n          if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {\n            event.preventDefault();\n            openMenu(event.target);\n          }\n        }}\n      >\n        <div\n          data-slot=\"composer-attachment-cover\"\n          className={cn(\n            attachmentSurfaceStyle,\n            surfaceStateLayerStyle,\n            'absolute inset-0 z-10 flex min-w-0 items-center overflow-hidden rounded-[inherit]',\n            'motion-safe:transition-[right,border-radius] motion-safe:duration-normal motion-safe:ease-out-custom',\n            'group-focus-within/attachment:right-(--attachment-sleeve-width) group-data-popup-open/attachment:right-(--attachment-sleeve-width) group-[:hover]/attachment:right-(--attachment-sleeve-width)',\n            // Tighten the facing edge so two large curves do not widen the visible gutter.\n            'group-focus-within/attachment:rounded-r-(--attachment-action-inset) group-data-popup-open/attachment:rounded-r-(--attachment-action-inset) group-[:hover]/attachment:rounded-r-(--attachment-action-inset)',\n            'max-sm:rounded-r-[inherit]! pointer-coarse:rounded-r-[inherit]!',\n            'max-sm:right-0! max-sm:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]',\n            'pointer-coarse:right-0! pointer-coarse:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]',\n          )}\n        >\n          <ComposerAttachmentContext.Provider value={name}>{children}</ComposerAttachmentContext.Provider>\n        </div>\n        <div\n          data-slot=\"composer-attachment-actions\"\n          className={cn(\n            'absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) flex w-(--attachment-action-width) flex-col gap-(--attachment-action-inset)',\n            'translate-x-2 opacity-0 motion-safe:transition-[translate,opacity] motion-safe:duration-normal motion-safe:ease-out-custom',\n            'group-[:hover]/attachment:translate-x-0 group-[:hover]/attachment:opacity-100',\n            'group-focus-within/attachment:translate-x-0 group-focus-within/attachment:opacity-100',\n            'group-data-popup-open/attachment:translate-x-0 group-data-popup-open/attachment:opacity-100',\n            'max-sm:hidden pointer-coarse:hidden',\n          )}\n        >\n          <Button\n            type=\"button\"\n            variant=\"destructive-ghost\"\n            size=\"icon-sm\"\n            className=\"h-auto w-full flex-1 rounded-(--attachment-action-radius)\"\n            onClick={onRemove}\n            aria-label={`Remove ${name}`}\n            title={`Remove ${name}`}\n          >\n            <X />\n          </Button>\n          {onEdit && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"h-auto w-full flex-1 rounded-(--attachment-action-radius)\"\n              onClick={onEdit}\n              aria-label={`Edit ${name}`}\n              title={`Edit ${name}`}\n            >\n              <Pencil />\n            </Button>\n          )}\n        </div>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) z-20 hidden h-auto w-11 rounded-(--attachment-action-radius) max-sm:flex pointer-coarse:flex\"\n          aria-label={`Actions for ${name}`}\n          aria-haspopup=\"menu\"\n          aria-expanded={menuOpen}\n          onClick={event => openMenu(event.currentTarget)}\n        >\n          <Ellipsis />\n        </Button>\n      </ContextMenu.Trigger>\n      <ContextMenu.Content ref={menuContentRef} anchor={menuAnchor} collisionPadding={8} finalFocus={returnFocus}>\n        {onPreview && (\n          <ContextMenu.Item className=\"min-h-11\" onSelect={() => runMenuAction(onPreview)}>\n            <Eye />\n            <span>Preview</span>\n          </ContextMenu.Item>\n        )}\n        {onEdit && (\n          <ContextMenu.Item className=\"min-h-11\" onSelect={() => runMenuAction(onEdit)}>\n            <Pencil />\n            <span>Edit</span>\n          </ContextMenu.Item>\n        )}\n        {(onPreview || onEdit) && <ContextMenu.Separator />}\n        <ContextMenu.Item className=\"min-h-11\" variant=\"destructive\" onSelect={() => runMenuAction(onRemove)}>\n          <X />\n          <span>Remove</span>\n        </ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  );\n}\n"],"names":["cn","raisedSurfaceStyle","useRef","useState","jsxs","ContextMenu","jsx","surfaceStateLayerStyle","ComposerAttachmentContext","Button","X","Pencil","Ellipsis","Eye"],"mappings":"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"}

package/dist/domains/chat/attachments/composer-attachment.es.js

@@ -1,41 +1,183 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { X } from 'lucide-react';
+import { X, Pencil, Ellipsis, Eye } from 'lucide-react';
+import { useRef, useState } from 'react';
 import { ComposerAttachmentContext } from './composer-attachment-context.es.js';
-import { Icon } from '../../../icons/Icon.es.js';
-import { surfaceStateLayerStyle, raisedSurfaceStyle } from '../../../primitives/raised-surface.es.js';
-import { focusRingInset } from '../../../primitives/transitions.es.js';
-import { c as cn } from '../../../cn-65Adrsfj.js';
+import { B as Button } from '../../../Button-D76HGlPP.js';
+import { C as ContextMenu } from '../../../context-menu-BVth1SD9.js';
+import { raisedSurfaceStyle, surfaceStateLayerStyle } from '../../../primitives/raised-surface.es.js';
+import { c as cn } from '../../../cn-coERSHz5.js';
 
-function ComposerAttachment({ name, children, onRemove, variant = "thumbnail" }) {
+const attachmentSurfaceStyle = cn(raisedSurfaceStyle, "dark:bg-linear-to-b dark:from-fill dark:to-fill");
+function ComposerAttachment({
+  name,
+  children,
+  onRemove,
+  onEdit,
+  onPreview,
+  variant = "thumbnail"
+}) {
+  const triggerRef = useRef(null);
+  const focusTargetRef = useRef(void 0);
+  const menuContentRef = useRef(null);
+  const actionSelected = useRef(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuAnchor, setMenuAnchor] = useState();
+  function openMenu(anchor) {
+    const focused = triggerRef.current?.ownerDocument.activeElement;
+    focusTargetRef.current = anchor;
+    if (!anchor && focused instanceof HTMLElement && triggerRef.current?.contains(focused)) {
+      focusTargetRef.current = focused;
+    }
+    actionSelected.current = false;
+    setMenuAnchor(anchor);
+    setMenuOpen(true);
+  }
+  function runMenuAction(action) {
+    actionSelected.current = true;
+    setMenuOpen(false);
+    action();
+    focusTargetRef.current = focusOutsideMenu() ?? focusTargetRef.current;
+  }
+  function focusOutsideMenu() {
+    const focused = triggerRef.current?.ownerDocument.activeElement;
+    if (focused instanceof HTMLElement && focused !== focused.ownerDocument.body && !menuContentRef.current?.contains(focused)) {
+      return focused;
+    }
+  }
+  function returnFocus() {
+    if (actionSelected.current && focusOutsideMenu()) return false;
+    if (focusTargetRef.current?.isConnected) return focusTargetRef.current;
+    return triggerRef.current;
+  }
   return /* @__PURE__ */ jsxs(
-    "div",
+    ContextMenu,
     {
-      className: cn(
-        raisedSurfaceStyle,
-        surfaceStateLayerStyle,
-        "group/attachment relative flex h-14 min-w-24 shrink-0 items-center overflow-hidden rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)]",
-        variant === "inline" ? "max-w-56" : "max-w-48"
-      ),
-      title: name,
+      open: menuOpen,
+      onOpenChange: (open) => {
+        if (open) openMenu();
+        else setMenuOpen(false);
+      },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-full min-w-0 flex-1 items-center justify-center rounded-[inherit] pr-9 pointer-coarse:pr-12", children: /* @__PURE__ */ jsx(ComposerAttachmentContext.Provider, { value: name, children }) }),
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsxs(
+          ContextMenu.Trigger,
           {
-            type: "button",
-            "aria-label": `Remove ${name}`,
-            title: `Remove ${name}`,
-            onClick: onRemove,
+            ref: triggerRef,
+            "data-slot": "composer-attachment",
+            title: name,
             className: cn(
-              "absolute top-0 right-0 z-10 flex size-7 cursor-pointer items-center justify-center rounded-tr-[inherit] rounded-bl-lg bg-fill-subtle text-muted-foreground hover:bg-fill hover:text-foreground",
-              // Follow actual hover state so a secondary mouse can reveal the tab too.
-              "opacity-0 group-focus-within/attachment:opacity-100 group-[:hover]/attachment:opacity-100 focus-visible:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100",
-              "motion-safe:transition-opacity motion-safe:duration-fast",
-              focusRingInset
+              attachmentSurfaceStyle,
+              "group/attachment relative h-17 shrink-0 rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)] [--attachment-thumbnail-size:--spacing(15)]",
+              // Concentric corners: the inner radius is the outer radius minus its inset.
+              "[--attachment-action-inset:--spacing(1)] [--attachment-action-radius:max(0px,calc(var(--attachment-radius)-var(--attachment-action-inset)))] [--attachment-action-width:--spacing(9)] [--attachment-sleeve-width:calc(var(--attachment-action-width)+2*var(--attachment-action-inset))]",
+              variant === "inline" ? "w-72" : "w-66"
             ),
-            children: /* @__PURE__ */ jsx(Icon, { size: "sm", "aria-hidden": "true", children: /* @__PURE__ */ jsx(X, {}) })
+            onClickCapture: (event) => {
+              if (menuOpen && !actionSelected.current) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            },
+            onKeyDown: (event) => {
+              if (!(event.target instanceof HTMLElement) || !event.currentTarget.contains(event.target)) return;
+              if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+                event.preventDefault();
+                openMenu(event.target);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "composer-attachment-cover",
+                  className: cn(
+                    attachmentSurfaceStyle,
+                    surfaceStateLayerStyle,
+                    "absolute inset-0 z-10 flex min-w-0 items-center overflow-hidden rounded-[inherit]",
+                    "motion-safe:transition-[right,border-radius] motion-safe:duration-normal motion-safe:ease-out-custom",
+                    "group-focus-within/attachment:right-(--attachment-sleeve-width) group-data-popup-open/attachment:right-(--attachment-sleeve-width) group-[:hover]/attachment:right-(--attachment-sleeve-width)",
+                    // Tighten the facing edge so two large curves do not widen the visible gutter.
+                    "group-focus-within/attachment:rounded-r-(--attachment-action-inset) group-data-popup-open/attachment:rounded-r-(--attachment-action-inset) group-[:hover]/attachment:rounded-r-(--attachment-action-inset)",
+                    "max-sm:rounded-r-[inherit]! pointer-coarse:rounded-r-[inherit]!",
+                    "max-sm:right-0! max-sm:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]",
+                    "pointer-coarse:right-0! pointer-coarse:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]"
+                  ),
+                  children: /* @__PURE__ */ jsx(ComposerAttachmentContext.Provider, { value: name, children })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "composer-attachment-actions",
+                  className: cn(
+                    "absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) flex w-(--attachment-action-width) flex-col gap-(--attachment-action-inset)",
+                    "translate-x-2 opacity-0 motion-safe:transition-[translate,opacity] motion-safe:duration-normal motion-safe:ease-out-custom",
+                    "group-[:hover]/attachment:translate-x-0 group-[:hover]/attachment:opacity-100",
+                    "group-focus-within/attachment:translate-x-0 group-focus-within/attachment:opacity-100",
+                    "group-data-popup-open/attachment:translate-x-0 group-data-popup-open/attachment:opacity-100",
+                    "max-sm:hidden pointer-coarse:hidden"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "destructive-ghost",
+                        size: "icon-sm",
+                        className: "h-auto w-full flex-1 rounded-(--attachment-action-radius)",
+                        onClick: onRemove,
+                        "aria-label": `Remove ${name}`,
+                        title: `Remove ${name}`,
+                        children: /* @__PURE__ */ jsx(X, {})
+                      }
+                    ),
+                    onEdit && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-sm",
+                        className: "h-auto w-full flex-1 rounded-(--attachment-action-radius)",
+                        onClick: onEdit,
+                        "aria-label": `Edit ${name}`,
+                        title: `Edit ${name}`,
+                        children: /* @__PURE__ */ jsx(Pencil, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) z-20 hidden h-auto w-11 rounded-(--attachment-action-radius) max-sm:flex pointer-coarse:flex",
+                  "aria-label": `Actions for ${name}`,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": menuOpen,
+                  onClick: (event) => openMenu(event.currentTarget),
+                  children: /* @__PURE__ */ jsx(Ellipsis, {})
+                }
+              )
+            ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs(ContextMenu.Content, { ref: menuContentRef, anchor: menuAnchor, collisionPadding: 8, finalFocus: returnFocus, children: [
+          onPreview && /* @__PURE__ */ jsxs(ContextMenu.Item, { className: "min-h-11", onSelect: () => runMenuAction(onPreview), children: [
+            /* @__PURE__ */ jsx(Eye, {}),
+            /* @__PURE__ */ jsx("span", { children: "Preview" })
+          ] }),
+          onEdit && /* @__PURE__ */ jsxs(ContextMenu.Item, { className: "min-h-11", onSelect: () => runMenuAction(onEdit), children: [
+            /* @__PURE__ */ jsx(Pencil, {}),
+            /* @__PURE__ */ jsx("span", { children: "Edit" })
+          ] }),
+          (onPreview || onEdit) && /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+          /* @__PURE__ */ jsxs(ContextMenu.Item, { className: "min-h-11", variant: "destructive", onSelect: () => runMenuAction(onRemove), children: [
+            /* @__PURE__ */ jsx(X, {}),
+            /* @__PURE__ */ jsx("span", { children: "Remove" })
+          ] })
+        ] })
       ]
     }
   );

package/dist/domains/chat/attachments/composer-attachment.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer-attachment.es.js","sources":["../../../../src/domains/chat/attachments/composer-attachment.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ComposerAttachmentContext } from './composer-attachment-context';\nimport { Icon } from '@/ds/icons/Icon';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/utils/cn';\n\nexport interface ComposerAttachmentProps {\n  name: string;\n  children: ReactNode;\n  onRemove: () => void;\n  /** Inline entries allow a little more width for long filenames. */\n  variant?: 'thumbnail' | 'inline';\n}\n\nexport function ComposerAttachment({ name, children, onRemove, variant = 'thumbnail' }: ComposerAttachmentProps) {\n  return (\n    <div\n      className={cn(\n        raisedSurfaceStyle,\n        surfaceStateLayerStyle,\n        'group/attachment relative flex h-14 min-w-24 shrink-0 items-center overflow-hidden rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)]',\n        variant === 'inline' ? 'max-w-56' : 'max-w-48',\n      )}\n      title={name}\n    >\n      <div className=\"flex h-full min-w-0 flex-1 items-center justify-center rounded-[inherit] pr-9 pointer-coarse:pr-12\">\n        <ComposerAttachmentContext.Provider value={name}>{children}</ComposerAttachmentContext.Provider>\n      </div>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${name}`}\n        title={`Remove ${name}`}\n        onClick={onRemove}\n        className={cn(\n          'absolute top-0 right-0 z-10 flex size-7 cursor-pointer items-center justify-center rounded-tr-[inherit] rounded-bl-lg bg-fill-subtle text-muted-foreground hover:bg-fill hover:text-foreground',\n          // Follow actual hover state so a secondary mouse can reveal the tab too.\n          'opacity-0 group-focus-within/attachment:opacity-100 group-[:hover]/attachment:opacity-100 focus-visible:opacity-100 pointer-coarse:size-11 pointer-coarse:opacity-100',\n          'motion-safe:transition-opacity motion-safe:duration-fast',\n          focusRingInset,\n        )}\n      >\n        <Icon size=\"sm\" aria-hidden=\"true\">\n          <X />\n        </Icon>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBO,SAAS,mBAAmB,EAAE,IAAA,EAAM,UAAU,QAAA,EAAU,OAAA,GAAU,aAAY,EAA4B;AAC/G,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,kBAAA;AAAA,QACA,sBAAA;AAAA,QACA,yJAAA;AAAA,QACA,OAAA,KAAY,WAAW,UAAA,GAAa;AAAA,OACtC;AAAA,MACA,KAAA,EAAO,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oGAAA,EACb,QAAA,kBAAA,GAAA,CAAC,yBAAA,CAA0B,UAA1B,EAAmC,KAAA,EAAO,IAAA,EAAO,QAAA,EAAS,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,YAAA,EAAY,UAAU,IAAI,CAAA,CAAA;AAAA,YAC1B,KAAA,EAAO,UAAU,IAAI,CAAA,CAAA;AAAA,YACrB,OAAA,EAAS,QAAA;AAAA,YACT,SAAA,EAAW,EAAA;AAAA,cACT,gMAAA;AAAA;AAAA,cAEA,uKAAA;AAAA,cACA,0DAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAK,IAAA,EAAK,eAAY,MAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,KAAE,CAAA,EACL;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"composer-attachment.es.js","sources":["../../../../src/domains/chat/attachments/composer-attachment.tsx"],"sourcesContent":["import { Ellipsis, Eye, Pencil, X } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { ComposerAttachmentContext } from './composer-attachment-context';\nimport { Button } from '@/ds/components/Button/Button';\nimport { ContextMenu } from '@/ds/components/ContextMenu/context-menu';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/utils/cn';\n\n// Dark attachments need a fill above the muted composer. Light attachments keep\n// the white card material and use the shared rim and shadow for elevation.\n// Both stay opaque so the sleeve controls cannot show through the cover.\nconst attachmentSurfaceStyle = cn(raisedSurfaceStyle, 'dark:bg-linear-to-b dark:from-fill dark:to-fill');\n\nexport interface ComposerAttachmentProps {\n  name: string;\n  children: ReactNode;\n  onRemove: () => void;\n  /** Optional application-owned editor, available in the sleeve and context menu. */\n  onEdit?: () => void;\n  /** Explicitly enables the context-menu preview action. Applications own preview state or navigation. */\n  onPreview?: () => void;\n  /** Inline entries allow a little more width for long filenames. */\n  variant?: 'thumbnail' | 'inline';\n}\n\nexport function ComposerAttachment({\n  name,\n  children,\n  onRemove,\n  onEdit,\n  onPreview,\n  variant = 'thumbnail',\n}: ComposerAttachmentProps) {\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const focusTargetRef = useRef<HTMLElement | undefined>(undefined);\n  const menuContentRef = useRef<HTMLDivElement>(null);\n  const actionSelected = useRef(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [menuAnchor, setMenuAnchor] = useState<HTMLElement>();\n\n  function openMenu(anchor?: HTMLElement) {\n    const focused = triggerRef.current?.ownerDocument.activeElement;\n    // Pointer menus keep their cursor position while remembering keyboard focus.\n    focusTargetRef.current = anchor;\n    if (!anchor && focused instanceof HTMLElement && triggerRef.current?.contains(focused)) {\n      focusTargetRef.current = focused;\n    }\n    actionSelected.current = false;\n    setMenuAnchor(anchor);\n    setMenuOpen(true);\n  }\n\n  function runMenuAction(action: () => void) {\n    actionSelected.current = true;\n    setMenuOpen(false);\n    action();\n    // The menu's focus trap may remain until its exit transition completes.\n    // Remember a synchronous application focus change across that teardown.\n    focusTargetRef.current = focusOutsideMenu() ?? focusTargetRef.current;\n  }\n\n  function focusOutsideMenu() {\n    const focused = triggerRef.current?.ownerDocument.activeElement;\n    if (\n      focused instanceof HTMLElement &&\n      focused !== focused.ownerDocument.body &&\n      !menuContentRef.current?.contains(focused)\n    ) {\n      return focused;\n    }\n  }\n\n  function returnFocus() {\n    // Preserve focus moved by the application (for example into an editor).\n    // Otherwise, an inline action still needs to return focus to its opener.\n    if (actionSelected.current && focusOutsideMenu()) return false;\n    if (focusTargetRef.current?.isConnected) return focusTargetRef.current;\n    return triggerRef.current;\n  }\n\n  return (\n    <ContextMenu\n      open={menuOpen}\n      onOpenChange={open => {\n        if (open) openMenu();\n        else setMenuOpen(false);\n      }}\n    >\n      <ContextMenu.Trigger\n        ref={triggerRef}\n        data-slot=\"composer-attachment\"\n        title={name}\n        className={cn(\n          attachmentSurfaceStyle,\n          'group/attachment relative h-17 shrink-0 rounded-(--attachment-radius) [--attachment-radius:var(--radius-xl)] [--attachment-thumbnail-size:--spacing(15)]',\n          // Concentric corners: the inner radius is the outer radius minus its inset.\n          '[--attachment-action-inset:--spacing(1)] [--attachment-action-radius:max(0px,calc(var(--attachment-radius)-var(--attachment-action-inset)))] [--attachment-action-width:--spacing(9)] [--attachment-sleeve-width:calc(var(--attachment-action-width)+2*var(--attachment-action-inset))]',\n          variant === 'inline' ? 'w-72' : 'w-66',\n        )}\n        onClickCapture={event => {\n          // Releasing a long press must not also activate the underlying file.\n          if (menuOpen && !actionSelected.current) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }}\n        onKeyDown={event => {\n          // Portalled preview dialogs also bubble through this React ancestor.\n          if (!(event.target instanceof HTMLElement) || !event.currentTarget.contains(event.target)) return;\n          if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {\n            event.preventDefault();\n            openMenu(event.target);\n          }\n        }}\n      >\n        <div\n          data-slot=\"composer-attachment-cover\"\n          className={cn(\n            attachmentSurfaceStyle,\n            surfaceStateLayerStyle,\n            'absolute inset-0 z-10 flex min-w-0 items-center overflow-hidden rounded-[inherit]',\n            'motion-safe:transition-[right,border-radius] motion-safe:duration-normal motion-safe:ease-out-custom',\n            'group-focus-within/attachment:right-(--attachment-sleeve-width) group-data-popup-open/attachment:right-(--attachment-sleeve-width) group-[:hover]/attachment:right-(--attachment-sleeve-width)',\n            // Tighten the facing edge so two large curves do not widen the visible gutter.\n            'group-focus-within/attachment:rounded-r-(--attachment-action-inset) group-data-popup-open/attachment:rounded-r-(--attachment-action-inset) group-[:hover]/attachment:rounded-r-(--attachment-action-inset)',\n            'max-sm:rounded-r-[inherit]! pointer-coarse:rounded-r-[inherit]!',\n            'max-sm:right-0! max-sm:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]',\n            'pointer-coarse:right-0! pointer-coarse:pr-[calc(--spacing(11)+2*var(--attachment-action-inset))]',\n          )}\n        >\n          <ComposerAttachmentContext.Provider value={name}>{children}</ComposerAttachmentContext.Provider>\n        </div>\n        <div\n          data-slot=\"composer-attachment-actions\"\n          className={cn(\n            'absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) flex w-(--attachment-action-width) flex-col gap-(--attachment-action-inset)',\n            'translate-x-2 opacity-0 motion-safe:transition-[translate,opacity] motion-safe:duration-normal motion-safe:ease-out-custom',\n            'group-[:hover]/attachment:translate-x-0 group-[:hover]/attachment:opacity-100',\n            'group-focus-within/attachment:translate-x-0 group-focus-within/attachment:opacity-100',\n            'group-data-popup-open/attachment:translate-x-0 group-data-popup-open/attachment:opacity-100',\n            'max-sm:hidden pointer-coarse:hidden',\n          )}\n        >\n          <Button\n            type=\"button\"\n            variant=\"destructive-ghost\"\n            size=\"icon-sm\"\n            className=\"h-auto w-full flex-1 rounded-(--attachment-action-radius)\"\n            onClick={onRemove}\n            aria-label={`Remove ${name}`}\n            title={`Remove ${name}`}\n          >\n            <X />\n          </Button>\n          {onEdit && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"h-auto w-full flex-1 rounded-(--attachment-action-radius)\"\n              onClick={onEdit}\n              aria-label={`Edit ${name}`}\n              title={`Edit ${name}`}\n            >\n              <Pencil />\n            </Button>\n          )}\n        </div>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute inset-y-(--attachment-action-inset) right-(--attachment-action-inset) z-20 hidden h-auto w-11 rounded-(--attachment-action-radius) max-sm:flex pointer-coarse:flex\"\n          aria-label={`Actions for ${name}`}\n          aria-haspopup=\"menu\"\n          aria-expanded={menuOpen}\n          onClick={event => openMenu(event.currentTarget)}\n        >\n          <Ellipsis />\n        </Button>\n      </ContextMenu.Trigger>\n      <ContextMenu.Content ref={menuContentRef} anchor={menuAnchor} collisionPadding={8} finalFocus={returnFocus}>\n        {onPreview && (\n          <ContextMenu.Item className=\"min-h-11\" onSelect={() => runMenuAction(onPreview)}>\n            <Eye />\n            <span>Preview</span>\n          </ContextMenu.Item>\n        )}\n        {onEdit && (\n          <ContextMenu.Item className=\"min-h-11\" onSelect={() => runMenuAction(onEdit)}>\n            <Pencil />\n            <span>Edit</span>\n          </ContextMenu.Item>\n        )}\n        {(onPreview || onEdit) && <ContextMenu.Separator />}\n        <ContextMenu.Item className=\"min-h-11\" variant=\"destructive\" onSelect={() => runMenuAction(onRemove)}>\n          <X />\n          <span>Remove</span>\n        </ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/chat/attachments/message-attachment.cjs.js

@@ -7,7 +7,7 @@ const React = require('react');
 const domains_chat_attachments_attachmentPreviewDialog = require('./attachment-preview-dialog.cjs.js');
 const domains_chat_attachments_messageAttachmentInfo = require('./message-attachment-info.cjs.js');
 const domains_chat_attachments_messageImageAttachment = require('./message-image-attachment.cjs.js');
-const attachmentCard = require('../../../attachment-card-B95kgvBs.cjs');
+const attachmentCard = require('../../../attachment-card-C2Bau6E7.cjs');
 const schemes = require('../../../schemes-BicAGr8-.cjs');
 
 function MessageAttachment({ type, contentType, src, data, name }) {

package/dist/domains/chat/attachments/message-attachment.es.js

@@ -3,7 +3,7 @@ import { useState, useRef } from 'react';
 import { PdfPreviewDialog, TxtPreviewDialog } from './attachment-preview-dialog.es.js';
 import { textAttachment, attachmentName, attachmentInfo } from './message-attachment-info.es.js';
 import { MessageImageAttachment } from './message-image-attachment.es.js';
-import { A as AttachmentCard } from '../../../attachment-card-Q-77luib.js';
+import { A as AttachmentCard } from '../../../attachment-card-DCw9QEa3.js';
 import { a as isBrowserFetchableUrl } from '../../../schemes-CGK3gQJ6.js';
 
 function MessageAttachment({ type, contentType, src, data, name }) {

package/dist/domains/chat/attachments/message-image-attachment.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_chat_attachments_attachmentPreviewDialog = require('./attachment-preview-dialog.cjs.js');
-const attachmentCard = require('../../../attachment-card-B95kgvBs.cjs');
+const attachmentCard = require('../../../attachment-card-C2Bau6E7.cjs');
 
 function MessageImageAttachment({ src, name, typeLabel }) {
   const [open, setOpen] = React.useState(false);

package/dist/domains/chat/attachments/message-image-attachment.es.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FileImage } from 'lucide-react';
 import { useState, useRef } from 'react';
 import { ImagePreviewDialog } from './attachment-preview-dialog.es.js';
-import { A as AttachmentCard } from '../../../attachment-card-Q-77luib.js';
+import { A as AttachmentCard } from '../../../attachment-card-DCw9QEa3.js';
 
 function MessageImageAttachment({ src, name, typeLabel }) {
   const [open, setOpen] = useState(false);

package/dist/domains/chat/attachments/use-attachment-preview.cjs.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function useAttachmentPreview({ open, onOpenChange }) {
+  const [localOpen, setLocalOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  function setOpen(nextOpen) {
+    if (open === void 0) setLocalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }
+  return { open: open ?? localOpen, setOpen, triggerRef };
+}
+
+exports.useAttachmentPreview = useAttachmentPreview;
+//# sourceMappingURL=use-attachment-preview.cjs.js.map

package/dist/domains/chat/attachments/use-attachment-preview.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attachment-preview.cjs.js","sources":["../../../../src/domains/chat/attachments/use-attachment-preview.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport interface AttachmentPreviewProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/** Previews can share composer state or manage their own state when used alone. */\nexport function useAttachmentPreview({ open, onOpenChange }: AttachmentPreviewProps) {\n  const [localOpen, setLocalOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  function setOpen(nextOpen: boolean) {\n    if (open === undefined) setLocalOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n  }\n\n  return { open: open ?? localOpen, setOpen, triggerRef };\n}\n"],"names":["useState","useRef"],"mappings":";;;;;;AAQO,SAAS,oBAAA,CAAqB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA2B;AACnF,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,UAAA,GAAaC,aAA0B,IAAI,CAAA;AAEjD,EAAA,SAAS,QAAQ,QAAA,EAAmB;AAClC,IAAA,IAAI,IAAA,KAAS,MAAA,EAAW,YAAA,CAAa,QAAQ,CAAA;AAC7C,IAAA,YAAA,GAAe,QAAQ,CAAA;AAAA,EACzB;AAEA,EAAA,OAAO,EAAE,IAAA,EAAM,IAAA,IAAQ,SAAA,EAAW,SAAS,UAAA,EAAW;AACxD;;;;"}

package/dist/domains/chat/attachments/use-attachment-preview.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/chat/attachments/use-attachment-preview'
+export {}

package/dist/domains/chat/attachments/use-attachment-preview.es.js

@@ -0,0 +1,14 @@
+import { useState, useRef } from 'react';
+
+function useAttachmentPreview({ open, onOpenChange }) {
+  const [localOpen, setLocalOpen] = useState(false);
+  const triggerRef = useRef(null);
+  function setOpen(nextOpen) {
+    if (open === void 0) setLocalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }
+  return { open: open ?? localOpen, setOpen, triggerRef };
+}
+
+export { useAttachmentPreview };
+//# sourceMappingURL=use-attachment-preview.es.js.map

package/dist/domains/chat/attachments/use-attachment-preview.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attachment-preview.es.js","sources":["../../../../src/domains/chat/attachments/use-attachment-preview.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport interface AttachmentPreviewProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/** Previews can share composer state or manage their own state when used alone. */\nexport function useAttachmentPreview({ open, onOpenChange }: AttachmentPreviewProps) {\n  const [localOpen, setLocalOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  function setOpen(nextOpen: boolean) {\n    if (open === undefined) setLocalOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n  }\n\n  return { open: open ?? localOpen, setOpen, triggerRef };\n}\n"],"names":[],"mappings":";;AAQO,SAAS,oBAAA,CAAqB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA2B;AACnF,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,UAAA,GAAa,OAA0B,IAAI,CAAA;AAEjD,EAAA,SAAS,QAAQ,QAAA,EAAmB;AAClC,IAAA,IAAI,IAAA,KAAS,MAAA,EAAW,YAAA,CAAa,QAAQ,CAAA;AAC7C,IAAA,YAAA,GAAe,QAAQ,CAAA;AAAA,EACzB;AAEA,EAAA,OAAO,EAAE,IAAA,EAAM,IAAA,IAAQ,SAAA,EAAW,SAAS,UAAA,EAAW;AACxD;;;;"}

package/dist/domains/chat/components/badge-wrapper.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_chat_context_chatContext = require('../context/chat-context.cjs.js');
-const activity = require('../../../activity-C3F5Z6U2.cjs');
-const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const activity = require('../../../activity-pXCpwxxi.cjs');
+const utils_cn = require('../../../cn-TqD01zH-.cjs');
 
 const BadgeWrapper = ({
   children,