@refraction-ui/react 0.11.0 → 0.12.1

package/dist/index.js

@@ -3368,6 +3368,65 @@ function useConversation(config) {
   };
 }
 var h = React11.createElement;
+var svg = (children, size = 16) => h(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  },
+  children
+);
+var IconAttach = () => svg(h("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.81l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
+var IconBold = () => svg([
+  h("path", { key: "a", d: "M6 4h8a4 4 0 0 1 0 8H6z" }),
+  h("path", { key: "b", d: "M6 12h9a4 4 0 0 1 0 8H6z" })
+]);
+var IconItalic = () => svg([
+  h("line", { key: "a", x1: 19, y1: 4, x2: 10, y2: 4 }),
+  h("line", { key: "b", x1: 14, y1: 20, x2: 5, y2: 20 }),
+  h("line", { key: "c", x1: 15, y1: 4, x2: 9, y2: 20 })
+]);
+var IconCode = () => svg([
+  h("polyline", { key: "a", points: "16 18 22 12 16 6" }),
+  h("polyline", { key: "b", points: "8 6 2 12 8 18" })
+]);
+var IconLink = () => svg([
+  h("path", { key: "a", d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  h("path", { key: "b", d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+]);
+var IconQuote = () => svg([
+  h("path", { key: "a", d: "M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" }),
+  h("path", { key: "b", d: "M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" })
+]);
+var IconListUl = () => svg([
+  h("line", { key: "a", x1: 8, y1: 6, x2: 21, y2: 6 }),
+  h("line", { key: "b", x1: 8, y1: 12, x2: 21, y2: 12 }),
+  h("line", { key: "c", x1: 8, y1: 18, x2: 21, y2: 18 }),
+  h("line", { key: "d", x1: 3, y1: 6, x2: 3.01, y2: 6 }),
+  h("line", { key: "e", x1: 3, y1: 12, x2: 3.01, y2: 12 }),
+  h("line", { key: "f", x1: 3, y1: 18, x2: 3.01, y2: 18 })
+]);
+var IconListOl = () => svg([
+  h("line", { key: "a", x1: 10, y1: 6, x2: 21, y2: 6 }),
+  h("line", { key: "b", x1: 10, y1: 12, x2: 21, y2: 12 }),
+  h("line", { key: "c", x1: 10, y1: 18, x2: 21, y2: 18 }),
+  h("path", { key: "d", d: "M4 6h1v4" }),
+  h("path", { key: "e", d: "M4 10h2" }),
+  h("path", { key: "f", d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+]);
+var IconArrowUp = () => svg([
+  h("path", { key: "a", d: "M12 19V5" }),
+  h("path", { key: "b", d: "m5 12 7-7 7 7" })
+]);
+var IconStop = () => svg(h("rect", { x: 7, y: 7, width: 10, height: 10, rx: 1.5 }));
 var EMOJI = {
   smile: "\u{1F604}",
   grin: "\u{1F601}",
@@ -3420,13 +3479,15 @@ function detectTrigger(text, caret) {
   return { type, query, start: caret - query.length - 1, end: caret };
 }
 function Composer({
-  placeholder = "Type a message\u2026  (/ commands, @ mentions, : emoji)",
+  placeholder = "Send a message\u2026",
   busy = false,
   slashCommands = [],
   mentions,
   toolbar = true,
   emoji = true,
   attachments = true,
+  error,
+  onRetry,
   onSubmit,
   onStop,
   onSlashCommand,
@@ -3567,148 +3628,157 @@ ${sel}
       submit();
     }
   }
-  const toolbarBtn = (label, title, kind) => h(
+  const iconBtn = "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground";
+  const toolbarBtn = (icon, title, kind) => h(
     "button",
     {
       key: kind,
       type: "button",
       title,
-      className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+      "aria-label": title,
+      className: iconBtn,
       onMouseDown: (e) => e.preventDefault(),
       // keep textarea selection
       onClick: () => format(kind)
     },
-    label
+    icon
   );
-  return h(
+  const divider = () => h("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true });
+  const menu = menuOpen ? h(
     "div",
-    { className: "border-t border-border" },
-    // attachment chips
-    pending.length > 0 ? h(
+    {
+      className: "absolute bottom-full left-0 z-20 mb-2 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg",
+      role: "listbox"
+    },
+    h(
       "div",
-      { className: "flex flex-wrap gap-2 px-3 pt-2" },
-      ...pending.map(
-        (a) => h(
-          "span",
-          { key: a.id, className: "inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs" },
-          a.name,
-          h(
-            "button",
-            {
-              type: "button",
-              className: "text-muted-foreground hover:text-destructive",
-              onClick: () => setPending((p) => p.filter((x) => x.id !== a.id))
-            },
-            "\u2715"
-          )
-        )
+      { className: "border-b border-border px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" },
+      trigger?.type === "/" ? "Commands" : trigger?.type === "@" ? "Mentions" : "Emoji"
+    ),
+    ...items.map(
+      (it, i) => h(
+        "button",
+        {
+          key: it.key,
+          type: "button",
+          role: "option",
+          "aria-selected": i === active,
+          className: cn(
+            "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+            i === active ? "bg-accent" : "hover:bg-accent/50"
+          ),
+          onMouseEnter: () => setActive(i),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => selectItem(i)
+        },
+        it.icon ? h("span", { className: "w-4 text-center text-muted-foreground" }, it.icon) : null,
+        h("span", { className: "flex-1 truncate" }, it.primary),
+        it.secondary ? h("span", { className: "truncate text-xs text-muted-foreground" }, it.secondary) : null
       )
-    ) : null,
-    // toolbar
-    toolbar ? h(
-      "div",
-      { className: "flex items-center gap-0.5 px-2 pt-2" },
-      toolbarBtn("B", "Bold (\u2318B)", "bold"),
-      toolbarBtn("\u{1D456}", "Italic (\u2318I)", "italic"),
-      toolbarBtn("</>", "Code (\u2318E)", "code"),
-      toolbarBtn("\u{1F517}", "Link (\u2318K)", "link"),
-      toolbarBtn("\u275D", "Quote", "quote"),
-      toolbarBtn("\u2022", "Bulleted list", "ul"),
-      toolbarBtn("1.", "Numbered list", "ol")
-    ) : null,
-    // input row (relative for the popup menu)
+    )
+  ) : null;
+  return h(
+    "div",
+    { className: "p-3" },
     h(
       "div",
-      { className: "relative flex items-end gap-2 p-3" },
-      menuOpen ? h(
+      { className: "relative" },
+      menu,
+      // unified input card
+      h(
         "div",
         {
-          className: "absolute bottom-full left-3 z-20 mb-1 w-72 overflow-hidden rounded-lg border border-border bg-popover shadow-lg",
-          role: "listbox"
+          className: "overflow-hidden rounded-2xl border border-border bg-background transition focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/40"
         },
+        // error banner
+        error ? h(
+          "div",
+          { className: "flex items-center gap-2 border-b border-border bg-destructive/5 px-3 py-2 text-xs text-destructive", role: "alert" },
+          h("span", { className: "flex-1 truncate" }, error),
+          onRetry ? h("button", { type: "button", className: "font-medium underline", onClick: () => onRetry() }, "Retry") : null
+        ) : null,
+        // attachment chips
+        pending.length > 0 ? h(
+          "div",
+          { className: "flex flex-wrap gap-2 px-3 pt-3" },
+          ...pending.map(
+            (a) => h(
+              "span",
+              { key: a.id, className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs" },
+              a.name,
+              h(
+                "button",
+                { type: "button", className: "text-muted-foreground hover:text-destructive", onClick: () => setPending((p) => p.filter((x) => x.id !== a.id)) },
+                "\u2715"
+              )
+            )
+          )
+        ) : null,
+        // textarea (borderless)
+        h("textarea", {
+          ref,
+          className: "block max-h-40 w-full resize-none bg-transparent px-3.5 py-3 text-sm placeholder:text-muted-foreground focus:outline-none",
+          rows: 1,
+          value,
+          placeholder,
+          autoFocus,
+          "aria-label": "Message",
+          onChange: (e) => syncFromTextarea(e.target),
+          onClick: (e) => syncFromTextarea(e.currentTarget),
+          onKeyUp: (e) => syncFromTextarea(e.currentTarget),
+          onKeyDown,
+          onBlur: () => setTimeout(() => setTrigger(null), 120)
+        }),
+        // bottom action bar
         h(
           "div",
-          { className: "border-b border-border px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground" },
-          trigger?.type === "/" ? "Commands" : trigger?.type === "@" ? "Mentions" : "Emoji"
-        ),
-        ...items.map(
-          (it, i) => h(
+          { className: "flex items-center gap-0.5 px-2 pb-2" },
+          attachments ? h(
+            React11.Fragment,
+            null,
+            h("input", {
+              ref: fileRef,
+              type: "file",
+              accept: "image/*",
+              multiple: true,
+              className: "hidden",
+              onChange: (e) => {
+                onFiles(e.target.files);
+                e.target.value = "";
+              }
+            }),
+            h("button", { type: "button", className: iconBtn, "aria-label": "Attach image or GIF", onClick: () => fileRef.current?.click() }, h(IconAttach))
+          ) : null,
+          attachments && toolbar ? divider() : null,
+          toolbar ? h(
+            React11.Fragment,
+            null,
+            toolbarBtn(h(IconBold), "Bold (\u2318B)", "bold"),
+            toolbarBtn(h(IconItalic), "Italic (\u2318I)", "italic"),
+            toolbarBtn(h(IconCode), "Code (\u2318E)", "code"),
+            toolbarBtn(h(IconLink), "Link (\u2318K)", "link"),
+            divider(),
+            toolbarBtn(h(IconQuote), "Quote", "quote"),
+            toolbarBtn(h(IconListUl), "Bulleted list", "ul"),
+            toolbarBtn(h(IconListOl), "Numbered list", "ol")
+          ) : null,
+          h("div", { className: "flex-1" }),
+          busy ? h(
+            "button",
+            { type: "button", "aria-label": "Stop", className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition hover:opacity-90", onClick: () => onStop?.() },
+            h(IconStop)
+          ) : h(
             "button",
             {
-              key: it.key,
               type: "button",
-              role: "option",
-              "aria-selected": i === active,
-              className: cn(
-                "flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm",
-                i === active ? "bg-accent" : "hover:bg-accent/50"
-              ),
-              onMouseEnter: () => setActive(i),
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => selectItem(i)
+              "aria-label": "Send",
+              className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+              disabled: !value.trim() && pending.length === 0,
+              onClick: submit
             },
-            it.icon ? h("span", { className: "w-4 text-center text-muted-foreground" }, it.icon) : null,
-            h("span", { className: "flex-1 truncate" }, it.primary),
-            it.secondary ? h("span", { className: "truncate text-xs text-muted-foreground" }, it.secondary) : null
+            h(IconArrowUp)
           )
         )
-      ) : null,
-      attachments ? h(
-        React11.Fragment,
-        null,
-        h("input", {
-          ref: fileRef,
-          type: "file",
-          accept: "image/*",
-          multiple: true,
-          className: "hidden",
-          onChange: (e) => {
-            onFiles(e.target.files);
-            e.target.value = "";
-          }
-        }),
-        h(
-          "button",
-          {
-            type: "button",
-            className: "rounded-md border border-border px-2 py-2 text-sm hover:bg-accent",
-            "aria-label": "Attach image or GIF",
-            onClick: () => fileRef.current?.click()
-          },
-          "\u{1F4CE}"
-        )
-      ) : null,
-      h("textarea", {
-        ref,
-        className: "max-h-40 flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-        rows: 1,
-        value,
-        placeholder,
-        autoFocus,
-        "aria-label": "Message",
-        onChange: (e) => syncFromTextarea(e.target),
-        onClick: (e) => syncFromTextarea(e.currentTarget),
-        onKeyUp: (e) => syncFromTextarea(e.currentTarget),
-        onKeyDown,
-        onBlur: () => setTimeout(() => setTrigger(null), 120)
-      }),
-      busy ? h(
-        "button",
-        {
-          type: "button",
-          className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground",
-          onClick: () => onStop?.()
-        },
-        "Stop"
-      ) : h(
-        "button",
-        {
-          type: "button",
-          className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50",
-          disabled: !value.trim() && pending.length === 0,
-          onClick: submit
-        },
-        "Send"
       )
     )
   );
@@ -4056,9 +4126,13 @@ function Chat({
   const timeline = selectMainTimeline(state.messages, state.threadingMode);
   const activeConv = state.conversations.find((c) => c.id === state.activeConversationId);
   const busy = state.status === "sending" || state.status === "streaming";
+  const error = state.status === "error" ? state.error : null;
+  const onRetry = () => void conversation.retryLast();
   const mainComposer = h2(Composer, {
     placeholder,
     busy,
+    error,
+    onRetry,
     slashCommands,
     mentions,
     onSlashCommand,
@@ -4069,6 +4143,8 @@ function Chat({
   const threadComposer = state.openThreadRootId ? h2(Composer, {
     placeholder: "Reply\u2026",
     busy,
+    error,
+    onRetry,
     slashCommands,
     mentions,
     onSlashCommand,
@@ -4372,14 +4448,56 @@ function useCookieConsent(config) {
   };
 }
 var h3 = React11.createElement;
-var btnPrimary = "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90";
-var btnGhost = "rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent";
-var btnLink = "text-sm text-muted-foreground underline hover:text-foreground";
+var btnBase = "inline-flex items-center justify-center rounded-lg px-3.5 py-2 text-sm font-medium transition-colors";
+var btnPrimary = cn(btnBase, "bg-primary text-primary-foreground hover:opacity-90");
+var btnGhost = cn(btnBase, "border border-border hover:bg-accent");
+var btnLink = "text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline";
+function Toggle({
+  checked,
+  disabled,
+  onChange,
+  label
+}) {
+  if (disabled) {
+    return h3(
+      "span",
+      { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground" },
+      "Always on"
+    );
+  }
+  return h3(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      onClick: () => onChange(!checked),
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
+        checked ? "bg-primary" : "bg-muted"
+      )
+    },
+    h3("span", {
+      className: cn(
+        "inline-block h-4 w-4 transform rounded-full bg-background shadow transition-transform",
+        checked ? "translate-x-[1.125rem]" : "translate-x-0.5"
+      )
+    })
+  );
+}
+function CookieIcon() {
+  return h3(
+    "div",
+    { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-xl", "aria-hidden": true },
+    "\u{1F36A}"
+  );
+}
 function CookieConsent({
   consent,
   position = "bottom",
   title = "We use cookies",
-  description = "We use cookies to run the site, remember your preferences, and measure traffic. Choose which categories to allow.",
+  description = "We use cookies to run the site, remember your preferences, and measure traffic. Choose which to allow.",
   policyUrl,
   policyLabel = "Cookie policy",
   className
@@ -4387,64 +4505,80 @@ function CookieConsent({
   const { state, acceptAll, rejectAll, savePreferences, setPreference } = consent;
   const [settings, setSettings] = React11.useState(false);
   if (!state.open) return null;
-  const wrapper = cn(
-    "fixed inset-x-0 z-50 p-4",
-    position === "bottom" ? "bottom-0" : "top-0",
-    className
-  );
-  const panel = "mx-auto max-w-3xl rounded-xl border border-border bg-background p-4 shadow-lg";
-  const header = h3(
-    "div",
-    null,
-    h3("h2", { className: "text-base font-semibold" }, title),
-    h3("p", { className: "mt-1 text-sm text-muted-foreground" }, description),
-    policyUrl ? h3("a", { href: policyUrl, target: "_blank", rel: "noreferrer", className: cn(btnLink, "mt-1 inline-block") }, policyLabel) : null
-  );
-  const promptActions = h3(
+  const wrapper = cn("fixed inset-x-0 z-50 p-4", position === "bottom" ? "bottom-0" : "top-0", className);
+  const panel = "mx-auto max-w-2xl overflow-hidden rounded-2xl border border-border bg-background shadow-lg";
+  const policy = policyUrl ? h3("a", { href: policyUrl, target: "_blank", rel: "noreferrer", className: cn(btnLink, "whitespace-nowrap") }, policyLabel) : null;
+  const promptView = h3(
     "div",
-    { className: "mt-3 flex flex-wrap items-center gap-2" },
-    h3("button", { type: "button", className: btnPrimary, onClick: () => acceptAll() }, "Accept all"),
-    h3("button", { type: "button", className: btnGhost, onClick: () => rejectAll() }, "Reject all"),
-    h3("button", { type: "button", className: cn(btnGhost, "ml-auto"), onClick: () => setSettings(true) }, "Manage preferences")
+    { className: "flex flex-col gap-4 p-5 sm:flex-row sm:items-center" },
+    h3(CookieIcon),
+    h3(
+      "div",
+      { className: "min-w-0 flex-1" },
+      h3("p", { className: "text-sm font-semibold" }, title),
+      h3(
+        "p",
+        { className: "mt-0.5 text-sm leading-relaxed text-muted-foreground" },
+        description,
+        policy ? h3(React11.Fragment, null, " ", policy) : null
+      )
+    ),
+    h3(
+      "div",
+      { className: "flex flex-wrap items-center gap-2 sm:shrink-0" },
+      h3("button", { type: "button", className: btnLink, onClick: () => setSettings(true) }, "Customize"),
+      h3("button", { type: "button", className: btnGhost, onClick: () => rejectAll() }, "Reject all"),
+      h3("button", { type: "button", className: btnPrimary, onClick: () => acceptAll() }, "Accept all")
+    )
   );
   const settingsView = h3(
     "div",
-    { className: "mt-3 space-y-2" },
-    ...state.categories.map(
-      (cat) => h3(
-        "label",
-        {
-          key: cat.id,
-          className: "flex items-start justify-between gap-3 rounded-md border border-border p-3"
-        },
-        h3(
-          "span",
-          { className: "min-w-0" },
-          h3("span", { className: "block text-sm font-medium" }, cat.label, cat.required ? " (required)" : ""),
-          cat.description ? h3("span", { className: "block text-xs text-muted-foreground" }, cat.description) : null
-        ),
-        h3("input", {
-          type: "checkbox",
-          className: "mt-0.5 h-4 w-4 accent-[hsl(var(--primary))]",
-          checked: !!state.preferences[cat.id],
-          disabled: cat.required,
-          "aria-label": cat.label,
-          onChange: (e) => setPreference(cat.id, e.target.checked)
-        })
+    { className: "p-5" },
+    h3(
+      "div",
+      { className: "flex items-center gap-3" },
+      h3(CookieIcon),
+      h3(
+        "div",
+        null,
+        h3("p", { className: "text-sm font-semibold" }, "Cookie preferences"),
+        h3("p", { className: "text-xs text-muted-foreground" }, "Toggle the categories you want to allow.")
+      )
+    ),
+    h3(
+      "div",
+      { className: "mt-4 space-y-2" },
+      ...state.categories.map(
+        (cat) => h3(
+          "div",
+          { key: cat.id, className: "flex items-center justify-between gap-4 rounded-xl border border-border p-3" },
+          h3(
+            "div",
+            { className: "min-w-0" },
+            h3("p", { className: "text-sm font-medium" }, cat.label),
+            cat.description ? h3("p", { className: "mt-0.5 text-xs text-muted-foreground" }, cat.description) : null
+          ),
+          h3(Toggle, {
+            checked: !!state.preferences[cat.id],
+            disabled: cat.required,
+            label: cat.label,
+            onChange: (v) => setPreference(cat.id, v)
+          })
+        )
       )
     ),
     h3(
       "div",
-      { className: "flex flex-wrap items-center gap-2 pt-1" },
-      h3("button", { type: "button", className: btnPrimary, onClick: () => savePreferences(state.preferences) }, "Save preferences"),
-      h3("button", { type: "button", className: btnGhost, onClick: () => acceptAll() }, "Accept all"),
-      h3("button", { type: "button", className: cn(btnLink, "ml-auto"), onClick: () => setSettings(false) }, "Back")
+      { className: "mt-4 flex flex-wrap items-center gap-2" },
+      h3("button", { type: "button", className: btnLink, onClick: () => setSettings(false) }, "\u2190 Back"),
+      h3("button", { type: "button", className: cn(btnGhost, "sm:ml-auto"), onClick: () => acceptAll() }, "Accept all"),
+      h3("button", { type: "button", className: btnPrimary, onClick: () => savePreferences(state.preferences) }, "Save preferences")
     )
   );
   return h3(
     "div",
     { className: wrapper, role: "dialog", "aria-label": "Cookie consent", "aria-modal": false },
-    h3("div", { className: panel }, header, settings ? settingsView : promptActions)
+    h3("div", { className: panel }, settings ? settingsView : promptView)
   );
 }