@mieweb/ui 0.10.0-dev.9 → 0.11.0-dev.0

package/dist/{chunk-HZ4MBUC3.js → chunk-TI3TQQ7F.js}

@@ -1,7 +1,7 @@
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 var avatarVariants = cva(
   [
@@ -70,56 +70,7 @@ var Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React.forwardRef(
-  ({ className, max, size = "md", children, ...props }, ref) => {
-    const childrenArray = React.Children.toArray(children);
-    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
-    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "avatar-group",
-        className: cn("flex -space-x-2 rtl:space-x-reverse", className),
-        ...props,
-        children: [
-          visibleChildren.map((child, index) => {
-            if (React.isValidElement(child)) {
-              return React.cloneElement(
-                child,
-                {
-                  key: index,
-                  size,
-                  className: cn(
-                    "ring-2 ring-white dark:ring-neutral-900",
-                    child.props.className
-                  )
-                }
-              );
-            }
-            return child;
-          }),
-          remainingCount > 0 && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                avatarVariants({ size }),
-                "bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300",
-                "ring-2 ring-white dark:ring-neutral-900"
-              ),
-              children: [
-                "+",
-                remainingCount
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-AvatarGroup.displayName = "AvatarGroup";
 
-export { Avatar, AvatarGroup, avatarVariants, getInitials };
-//# sourceMappingURL=chunk-HZ4MBUC3.js.map
-//# sourceMappingURL=chunk-HZ4MBUC3.js.map
+export { Avatar, avatarVariants, getInitials };
+//# sourceMappingURL=chunk-TI3TQQ7F.js.map
+//# sourceMappingURL=chunk-TI3TQQ7F.js.map

package/dist/chunk-TI3TQQ7F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;AAQA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,kDAAA;AAAA,IACA,8BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,4BAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR;AAEJ;AAmBA,SAAS,YAAY,IAAA,EAAsB;AACzC,EAAA,OAAO,KACJ,KAAA,CAAM,GAAG,EACT,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,CAAC,CAAC,CAAA,CACrB,KAAK,EAAE,CAAA,CACP,aAAY,CACZ,KAAA,CAAM,GAAG,CAAC,CAAA;AACf;AAiBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,GAAA,EAAK,GAAA,EAAK,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtE,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAU,eAAS,KAAK,CAAA;AAGxD,IAAM,gBAAU,MAAM;AACpB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,IAAA,MAAM,SAAA,GAAY,OAAO,CAAC,UAAA;AAC1B,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,WAAA,CAAY,IAAI,CAAA,GAAI,IAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QACtD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,GAAA,EAAK,GAAA,KAAQ,MAAA,GAAY,GAAA,GAAM,IAAA,IAAQ,QAAA;AAAA,YACvC,SAAA,EAAU,4BAAA;AAAA,YACV,OAAA,EAAS,MAAM,aAAA,CAAc,IAAI;AAAA;AAAA,YAE3B,KAAA,CAAA,cAAA,CAAe,QAAQ,CAAA,GAC/B,QAAA,GACE,WACF,QAAA,mBAEA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU,+BAAA;AAAA,YACV,IAAA,EAAK,cAAA;AAAA,YACL,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+GAAA,EAAgH;AAAA;AAAA;AAC1H;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-TI3TQQ7F.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Avatar Component\n// ============================================================================\n\nconst avatarVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'rounded-full overflow-hidden',\n    'bg-primary-800 text-white font-semibold',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-6 w-6 text-xs',\n        sm: 'h-8 w-8 text-sm',\n        md: 'h-10 w-10 text-sm',\n        lg: 'h-12 w-12 text-base',\n        xl: 'h-16 w-16 text-lg',\n      },\n      ring: {\n        true: 'ring-2 ring-primary-400/30',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      ring: false,\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarVariants> {\n  /** Image URL for the avatar */\n  src?: string | null;\n  /** Alt text for the avatar image */\n  alt?: string;\n  /** Name to generate initials from (used as fallback when no src) */\n  name?: string;\n  /** Custom fallback content (overrides name initials) */\n  fallback?: React.ReactElement | null;\n}\n\n/**\n * Get initials from a name string.\n */\nfunction getInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n}\n\n/**\n * An avatar component for displaying user profile images with fallback to initials.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"/user.jpg\" alt=\"John Doe\" />\n *\n * // With initials fallback\n * <Avatar name=\"John Doe\" />\n *\n * // With custom fallback\n * <Avatar fallback={<UserIcon />} />\n * ```\n */\nconst Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, src, alt, name, fallback, size, ring, ...props }, ref) => {\n    const [imageError, setImageError] = React.useState(false);\n\n    // Reset error state when src changes\n    React.useEffect(() => {\n      setImageError(false);\n    }, [src]);\n\n    const showImage = src && !imageError;\n    const initials = name ? getInitials(name) : null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(avatarVariants({ size, ring }), className)}\n        {...props}\n      >\n        {showImage ? (\n          <img\n            src={src}\n            alt={alt !== undefined ? alt : name || 'Avatar'}\n            className=\"h-full w-full object-cover\"\n            onError={() => setImageError(true)}\n          />\n        ) : React.isValidElement(fallback) ? (\n          fallback\n        ) : initials ? (\n          initials\n        ) : (\n          <svg\n            aria-hidden=\"true\"\n            className=\"h-[60%] w-[60%] text-white/80\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n          </svg>\n        )}\n      </div>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, avatarVariants, getInitials };\n"]}

package/dist/{chunk-ACCAXVOG.js → chunk-TJ4GWQPM.js}

@@ -1,8 +1,9 @@
-import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-ZGRCSNPK.js';
+import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-OYUIEJPN.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
 import { useClickOutside } from './chunk-62ZOA6PX.js';
 import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
-import { useEscapeKey } from './chunk-T4ME7QCT.js';
 import { AlertTriangle, X2, Paperclip, Plus, Mic, Square, Loader2, ArrowUp, Check, Bot, ChevronUp } from './chunk-BKSPDTX4.js';
+import { isRtl } from './chunk-YVKBXNPK.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
@@ -193,7 +194,8 @@ function ComposerModelSelector({
       event.preventDefault();
       setEffortHighlight(efforts.length - 1);
     }
-    if (event.key === "ArrowLeft" || event.key === "Backspace") {
+    const backKey = isRtl(triggerRef.current) ? "ArrowRight" : "ArrowLeft";
+    if (event.key === backKey || event.key === "Backspace") {
       event.preventDefault();
       setView("models");
     }
@@ -1251,6 +1253,27 @@ var selectorTriggerClasses = cn(
   "disabled:pointer-events-none disabled:opacity-40"
 );
 var MAX_INPUT_HEIGHT = 160;
+var TOUCH_DEVICE_QUERY = "(hover: none) and (pointer: coarse)";
+var subscribeTouchDevice = (onChange) => {
+  const query = window.matchMedia?.(TOUCH_DEVICE_QUERY);
+  query?.addEventListener("change", onChange);
+  return () => query?.removeEventListener("change", onChange);
+};
+var getTouchDeviceSnapshot = () => window.matchMedia?.(TOUCH_DEVICE_QUERY).matches ?? false;
+var getServerTouchDeviceSnapshot = () => false;
+var CARD_INTERACTIVE_SELECTOR = [
+  "button",
+  "a",
+  "input",
+  "textarea",
+  "select",
+  "label",
+  "video",
+  '[role="listbox"]',
+  '[role="menu"]',
+  '[data-slot="chat-composer-reply-preview"]',
+  '[data-slot="chat-composer-attachments"]'
+].join(",");
 var ChatComposer = React.forwardRef(function ChatComposer2({
   onSend,
   value: controlledValue,
@@ -1262,8 +1285,10 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   maxLength,
   showCharacterCount = false,
   canSendWhenEmpty = false,
+  submitOnEnter = "desktop",
   maxHeight = MAX_INPUT_HEIGHT,
   textareaProps,
+  leadingSlot,
   addMenuItems,
   allowAttachments = true,
   acceptedFileTypes,
@@ -1313,12 +1338,23 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   const fileInputRef = React.useRef(null);
   const [addMenuOpen, setAddMenuOpen] = React.useState(false);
   const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
+  const isTouchDevice = React.useSyncExternalStore(
+    subscribeTouchDevice,
+    getTouchDeviceSnapshot,
+    getServerTouchDeviceSnapshot
+  );
+  const sendsOnEnter = submitOnEnter === "always" || submitOnEnter === "desktop" && !isTouchDevice;
   const replyToId = replyTo?.id;
   React.useEffect(() => {
     if (replyToId !== void 0) {
       textareaRef.current?.focus();
     }
   }, [replyToId]);
+  React.useEffect(() => {
+    if (!autoFocus) return;
+    if (window.matchMedia?.(TOUCH_DEVICE_QUERY).matches) return;
+    textareaRef.current?.focus();
+  }, []);
   const hasText = value.trim().length > 0;
   const hasContent = hasText || attachments.length > 0;
   const isOverLimit = maxLength !== void 0 && value.length > maxLength;
@@ -1470,9 +1506,20 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
     }
     textareaRef.current?.focus();
   };
+  const keepInputFocus = (event) => {
+    event.preventDefault();
+  };
+  const focusInputFromCard = (event) => {
+    if (disabled) return;
+    const target = event.target;
+    if (target.closest(CARD_INTERACTIVE_SELECTOR)) return;
+    event.preventDefault();
+    textareaRef.current?.focus();
+  };
   const handleKeyDown = (event) => {
     if (mention.handleKeyDown(event)) return;
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.nativeEvent.isComposing) return;
+    if (event.key === "Enter" && !event.shiftKey && sendsOnEnter) {
       event.preventDefault();
       handleSend();
     }
@@ -1570,6 +1617,12 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
         /* @__PURE__ */ jsx(
           "textarea",
           {
+            enterKeyHint: sendsOnEnter ? "send" : "enter",
+            inputMode: "text",
+            autoCapitalize: "sentences",
+            autoCorrect: "on",
+            spellCheck: true,
+            dir: "auto",
             ...textareaProps,
             ref: textareaRef,
             "data-slot": "chat-composer-input",
@@ -1600,7 +1653,6 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             },
             placeholder,
             disabled,
-            autoFocus,
             rows: 1,
             "aria-label": inputLabel,
             ...mention.inputProps,
@@ -1610,7 +1662,9 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             },
             className: cn(
               "block w-full resize-none bg-transparent",
-              "rounded-lg text-sm",
+              // 16px below `sm`: iOS zooms the page when focusing an input
+              // with a smaller font.
+              "rounded-lg text-base sm:text-sm",
               cells.textarea,
               "text-neutral-900 placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500",
               // Ring the input itself on focus rather than the whole shell.
@@ -1621,54 +1675,73 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
           }
         )
       ] }),
-      showAddMenu && /* @__PURE__ */ jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxs(
-        Dropdown,
+      (showAddMenu || leadingSlot != null) && /* @__PURE__ */ jsxs(
+        "div",
         {
-          placement: "top-start",
-          open: addMenuOpen,
-          onOpenChange: setAddMenuOpen,
-          trigger: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "data-slot": "chat-composer-add-button",
-              "aria-label": addMenuLabel,
-              disabled,
-              className: iconButtonClasses,
-              children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" })
-            }
+          className: cn(
+            cells.add,
+            leadingSlot != null && "flex items-center gap-0.5"
           ),
           children: [
-            allowAttachments && /* @__PURE__ */ jsx(
-              DropdownItem,
+            leadingSlot != null && /* @__PURE__ */ jsx(
+              "div",
               {
-                icon: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
-                onClick: () => {
-                  setAddMenuOpen(false);
-                  fileInputRef.current?.click();
-                },
-                children: attachFilesLabel
+                "data-slot": "chat-composer-leading-slot",
+                className: "flex h-8 shrink-0 items-center",
+                children: leadingSlot
               }
             ),
-            allowAttachments && addMenuItems && addMenuItems.length > 0 && /* @__PURE__ */ jsx(DropdownSeparator, {}),
-            addMenuItems?.map((item) => /* @__PURE__ */ jsx(
-              DropdownItem,
+            showAddMenu && /* @__PURE__ */ jsxs(
+              Dropdown,
               {
-                icon: item.icon,
-                disabled: item.disabled,
-                variant: item.variant,
-                checked: item.checked,
-                onClick: () => {
-                  setAddMenuOpen(false);
-                  item.onSelect?.();
-                },
-                children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
-              },
-              item.id
-            ))
+                placement: "top-start",
+                open: addMenuOpen,
+                onOpenChange: setAddMenuOpen,
+                trigger: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "chat-composer-add-button",
+                    "aria-label": addMenuLabel,
+                    disabled,
+                    className: iconButtonClasses,
+                    children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                ),
+                children: [
+                  allowAttachments && /* @__PURE__ */ jsx(
+                    DropdownItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
+                      onClick: () => {
+                        setAddMenuOpen(false);
+                        fileInputRef.current?.click();
+                      },
+                      children: attachFilesLabel
+                    }
+                  ),
+                  allowAttachments && addMenuItems && addMenuItems.length > 0 && /* @__PURE__ */ jsx(DropdownSeparator, {}),
+                  addMenuItems?.map((item) => /* @__PURE__ */ jsx(
+                    DropdownItem,
+                    {
+                      icon: item.icon,
+                      disabled: item.disabled,
+                      variant: item.variant,
+                      checked: item.checked,
+                      onClick: () => {
+                        setAddMenuOpen(false);
+                        item.onSelect?.();
+                      },
+                      children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
+                    },
+                    item.id
+                  ))
+                ]
+              }
+            )
           ]
         }
-      ) }),
+      ),
       allowAttachments && /* @__PURE__ */ jsx(
         "input",
         {
@@ -1731,6 +1804,7 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             "data-slot": "chat-composer-stop-button",
             "aria-label": stopLabel,
             disabled,
+            onMouseDown: keepInputFocus,
             onClick: onStop,
             className: cn(
               iconButtonClasses,
@@ -1752,6 +1826,7 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             "aria-label": isSending ? sendingLabel : sendLabel,
             "aria-busy": isSending || void 0,
             disabled: !canSend,
+            onMouseDown: keepInputFocus,
             onClick: handleSend,
             className: cn(
               iconButtonClasses,
@@ -1835,16 +1910,21 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
       ]
     }
   );
-  const card = /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "chat-composer-card",
-      className: cn(
-        "rounded-2xl border border-neutral-200 bg-white shadow-sm",
-        "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
-      ),
-      children: composerCard
-    }
+  const card = (
+    // Pointer-only convenience: the textarea stays the keyboard/AT target.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "chat-composer-card",
+        onMouseDown: focusInputFromCard,
+        className: cn(
+          "cursor-text rounded-2xl border border-neutral-200 bg-white shadow-sm",
+          "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+        ),
+        children: composerCard
+      }
+    )
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1884,5 +1964,5 @@ function notifyComposerMigrationOnce(surface) {
 }
 
 export { AttachmentPicker, AttachmentPreviewItem, CameraButton, ChatComposer, ComposerModelSelector, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DragDropZone, generateAttachmentId, getFileType, notifyComposerMigrationOnce, validateFile };
-//# sourceMappingURL=chunk-ACCAXVOG.js.map
-//# sourceMappingURL=chunk-ACCAXVOG.js.map
+//# sourceMappingURL=chunk-TJ4GWQPM.js.map
+//# sourceMappingURL=chunk-TJ4GWQPM.js.map