@mieweb/ui 0.6.1-dev.156 → 0.6.1-dev.159

package/dist/components/SuperChat/index.js

@@ -1,7 +1,7 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
 import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon } from '../../chunk-NQME7MCK.js';
-import { MessageComposer } from '../../chunk-UHPQYBXQ.js';
+import { MessageComposer } from '../../chunk-7QZSJFYT.js';
 import { Dropdown, DropdownItem } from '../../chunk-M7BLVBL4.js';
 import '../../chunk-KAKH2UZA.js';
 import '../../chunk-PVUDXJAI.js';
@@ -100,7 +100,7 @@ function baseComponents() {
       {
         ...props,
         className: cn(
-          "text-primary-700 hover:text-primary-800 dark:text-primary-300 underline underline-offset-2",
+          "text-primary-800 hover:text-primary-900 dark:text-primary-300 underline underline-offset-2",
           props.className
         ),
         target: props.target ?? "_blank",
@@ -112,6 +112,7 @@ function baseComponents() {
       "pre",
       {
         ...props,
+        tabIndex: 0,
         className: cn(
           "overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
           props.className
@@ -125,12 +126,24 @@ function baseComponents() {
         {
           ...props,
           className: cn(
-            !isBlock && "rounded bg-neutral-200 px-1 py-0.5 text-[0.85em] dark:bg-neutral-700",
+            !isBlock && "rounded bg-neutral-200 px-1 py-0.5 text-[0.85em] text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100",
             props.className
           )
         }
       );
     },
+    input: ({ node: _node, ...props }) => {
+      if (props.type === "checkbox") {
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : "Task list item")
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("input", { ...props });
+    },
     table: ({ node: _node, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsx(
       "table",
       {
@@ -311,6 +324,43 @@ function lastMessageByTime(thread) {
   }
   return latest;
 }
+function parseHexColor(value) {
+  const hex = value.trim();
+  if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return null;
+  const normalized = hex.length === 4 ? "#" + [...hex.slice(1)].map((char) => char + char).join("") : hex;
+  return [1, 3, 5].map(
+    (start) => parseInt(normalized.slice(start, start + 2), 16)
+  );
+}
+function relativeLuminanceChannel(channel) {
+  const normalized = channel / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(value) {
+  const rgb = parseHexColor(value);
+  if (!rgb) return null;
+  const [red, green, blue] = rgb;
+  return 0.2126 * relativeLuminanceChannel(red) + 0.7152 * relativeLuminanceChannel(green) + 0.0722 * relativeLuminanceChannel(blue);
+}
+function contrastRatio(foreground, background) {
+  const foregroundLuminance = relativeLuminance(foreground);
+  const backgroundLuminance = relativeLuminance(background);
+  if (foregroundLuminance === null || backgroundLuminance === null) return null;
+  const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+  const darker = Math.min(foregroundLuminance, backgroundLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function minimumContrastRatio(value, backgrounds) {
+  const contrasts = backgrounds.map((background) => contrastRatio(value, background)).filter((contrast) => contrast !== null);
+  if (contrasts.length !== backgrounds.length) return null;
+  return Math.min(...contrasts);
+}
+function accessibleAccentTextColor(value) {
+  if (!value) return void 0;
+  const contrast = minimumContrastRatio(value, ["#f5f5f5", "#262626"]);
+  if (contrast === null) return value;
+  return contrast < 4.5 ? void 0 : value;
+}
 function ParticipantAvatar({
   participant
 }) {
@@ -552,6 +602,7 @@ var MessageRow = React4.memo(function MessageRow2({
     );
   }
   const accent = participant?.color;
+  const accentTextColor = accessibleAccentTextColor(accent);
   const authorName = participant?.name ?? "Unknown";
   const canEdit = !!editable && isSelf && !streaming && typeof message.text === "string" && !message.content?.length;
   const startEdit = () => {
@@ -632,17 +683,17 @@ ${block.text}
                   "span",
                   {
                     className: "text-xs font-medium",
-                    style: accent ? { color: accent } : void 0,
+                    style: accentTextColor ? { color: accentTextColor } : void 0,
                     children: authorName
                   }
                 ),
-                participant?.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: participant.role }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: formatTime(message.time) }),
+                participant?.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
                 message.editedAt && /* @__PURE__ */ jsx(
                   "span",
                   {
                     "data-slot": "superchat-edited-indicator",
-                    className: "text-[10px] text-neutral-400",
+                    className: "text-[10px] text-neutral-500 dark:text-neutral-400",
                     title: `Edited ${formatTime(message.editedAt)}`,
                     children: "(edited)"
                   }
@@ -685,7 +736,7 @@ ${block.text}
                     "data-slot": "superchat-bubble",
                     variant: isSelf ? "user" : "assistant",
                     hasError: message.status === "error",
-                    className: "text-sm",
+                    className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
                     children: isEditing ? /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -1166,7 +1217,7 @@ function SuperChatConversations({
                   children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate", children: [
                       /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: c.title }),
-                      last?.text && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-400", children: last.text })
+                      last?.text && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-600 dark:text-neutral-400", children: last.text })
                     ] }),
                     !!c.unread && /* @__PURE__ */ jsxs("span", { className: "bg-primary-600 ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white", children: [
                       c.unread,