@refraction-ui/react 0.10.0 → 0.12.0

package/dist/index.js

@@ -2731,6 +2731,7 @@ function createConversation(config = {}) {
   const messagesByConv = /* @__PURE__ */ new Map();
   let activeConversationId = config.activeConversationId ?? null;
   let openThreadRootId = null;
+  let replyTarget = null;
   let status = "idle";
   let error = null;
   let abortController = null;
@@ -2752,6 +2753,7 @@ function createConversation(config = {}) {
       activeConversationId,
       messages: activeConversationId ? messagesByConv.get(activeConversationId) ?? [] : [],
       openThreadRootId,
+      replyTarget,
       threadingMode,
       status,
       error
@@ -2848,6 +2850,7 @@ function createConversation(config = {}) {
     newConversation(opts) {
       const conversation = createConversationInternal(opts ?? {});
       openThreadRootId = null;
+      replyTarget = null;
       emit();
       return conversation;
     },
@@ -2855,6 +2858,7 @@ function createConversation(config = {}) {
       if (!conversations.has(conversationId) || activeConversationId === conversationId) return;
       activeConversationId = conversationId;
       openThreadRootId = null;
+      replyTarget = null;
       emit();
     },
     deleteConversation(conversationId) {
@@ -2864,6 +2868,7 @@ function createConversation(config = {}) {
       if (activeConversationId === conversationId) {
         activeConversationId = orderedConversations()[0]?.id ?? null;
         openThreadRootId = null;
+        replyTarget = null;
       }
       emit();
     },
@@ -2901,6 +2906,7 @@ function createConversation(config = {}) {
       const next = list.filter((m) => !removeIds.has(m.id));
       messagesByConv.set(activeConversationId, next);
       if (openThreadRootId && removeIds.has(openThreadRootId)) openThreadRootId = null;
+      if (replyTarget && removeIds.has(replyTarget)) replyTarget = openThreadRootId;
       emit();
     },
     react(messageId, emoji) {
@@ -2931,6 +2937,7 @@ function createConversation(config = {}) {
       const conversationId = ensureActiveConversation(opts);
       const list = messagesByConv.get(conversationId);
       const parentId = opts?.replyTo ? rootIdOf(list, opts.replyTo) : void 0;
+      const replyToId = opts?.replyTo;
       const isFirstRoot = !parentId && selectRoots(list).length === 0;
       const userMsg = {
         id: generateId("rfr-msg"),
@@ -2941,6 +2948,7 @@ function createConversation(config = {}) {
         timestamp: /* @__PURE__ */ new Date(),
         status: "sent",
         parentId,
+        replyToId,
         attachments: opts?.attachments,
         metadata: opts?.metadata
       };
@@ -2997,11 +3005,20 @@ function createConversation(config = {}) {
     },
     openThread(rootId) {
       openThreadRootId = rootId;
+      replyTarget = rootId;
+      emit();
+    },
+    replyTo(messageId) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      openThreadRootId = rootIdOf(list, messageId);
+      replyTarget = messageId;
       emit();
     },
     closeThread() {
-      if (openThreadRootId === null) return;
+      if (openThreadRootId === null && replyTarget === null) return;
       openThreadRootId = null;
+      replyTarget = null;
       emit();
     },
     setThreadingMode(mode) {
@@ -3345,6 +3362,7 @@ function useConversation(config) {
     retryLast: api.retryLast,
     stop: api.stop,
     openThread: api.openThread,
+    replyTo: api.replyTo,
     closeThread: api.closeThread,
     setThreadingMode: api.setThreadingMode
   };
@@ -3409,6 +3427,8 @@ function Composer({
   toolbar = true,
   emoji = true,
   attachments = true,
+  error,
+  onRetry,
   onSubmit,
   onStop,
   onSlashCommand,
@@ -3549,148 +3569,154 @@ ${sel}
       submit();
     }
   }
+  const iconBtn = "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground";
   const toolbarBtn = (label, 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",
+      className: cn(iconBtn, "text-xs font-medium"),
       onMouseDown: (e) => e.preventDefault(),
       // keep textarea selection
       onClick: () => format(kind)
     },
     label
   );
-  return h(
+  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() }, "\u{1F4CE}")
+          ) : null,
+          attachments && toolbar ? h("span", { className: "mx-1 h-5 w-px bg-border" }) : null,
+          toolbar ? h(
+            React11.Fragment,
+            null,
+            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,
+          h("div", { className: "flex-1" }),
+          busy ? h(
+            "button",
+            { type: "button", "aria-label": "Stop", className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", onClick: () => onStop?.() },
+            "\u25A0"
+          ) : 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-8 w-8 items-center justify-center rounded-lg bg-primary text-base font-semibold text-primary-foreground transition disabled:opacity-40",
+              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
+            "\u2191"
           )
         )
-      ) : 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"
       )
     )
   );
@@ -3807,7 +3833,7 @@ function HoverActions({
   onToggleEmojis,
   align
 }) {
-  const { state, openThread, deleteMessage } = conversation;
+  const { replyTo, deleteMessage } = conversation;
   return h2(
     "div",
     {
@@ -3816,7 +3842,8 @@ function HoverActions({
         align === "end" && "justify-end"
       )
     },
-    h2("button", { type: "button", className: "hover:text-foreground", onClick: () => openThread(rootIdOf(state.messages, message.id)) }, "Reply"),
+    // Reply targets this specific message but groups under the originating root.
+    h2("button", { type: "button", className: "hover:text-foreground", onClick: () => replyTo(message.id) }, "Reply"),
     h2("button", { type: "button", className: "hover:text-foreground", onClick: onToggleEmojis }, "React"),
     isOwn ? h2("button", { type: "button", className: "hover:text-foreground", onClick: onEdit }, "Edit") : null,
     isOwn ? h2("button", { type: "button", className: "hover:text-destructive", onClick: () => deleteMessage(message.id) }, "Delete") : null
@@ -3878,7 +3905,7 @@ function MessageRow({
   const inner = h2(
     React11.Fragment,
     null,
-    quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(quotedParent.id) }) : null,
+    quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(rootIdOf(state.messages, quotedParent.id)) }) : null,
     editing ? h2(EditField, { message, conversation, onDone: () => setEditing(false) }) : isUser ? h2("div", { className: "inline-block rounded-2xl rounded-br-sm bg-primary/10 px-3 py-2 text-left" }, h2(MessageBody, { message })) : h2(MessageBody, { message }),
     h2(Reactions, { message, onReact: (e) => react(message.id, e), align }),
     showThreadAffordance && replyCount > 0 ? h2(
@@ -3978,13 +4005,14 @@ function ThreadPanel({ conversation, currentUserId, composer }) {
   const rootId = state.openThreadRootId;
   if (!rootId) return null;
   const messages = selectThreadMessages(state.messages, rootId);
+  const target = state.replyTarget && state.replyTarget !== rootId ? findMessage(state.messages, state.replyTarget) : void 0;
   return h2(
     "aside",
     { className: "flex w-80 flex-col border-l border-border", "aria-label": "Thread" },
     h2(
       "div",
       { className: "flex items-center justify-between border-b border-border px-3 py-2" },
-      h2("span", { className: "text-sm font-semibold" }, "Thread"),
+      h2("span", { className: "text-sm font-semibold" }, `Thread \xB7 ${messages.length - 1} ${messages.length - 1 === 1 ? "reply" : "replies"}`),
       h2("button", { type: "button", className: "text-muted-foreground hover:text-foreground", "aria-label": "Close thread", onClick: () => conversation.closeThread() }, "\u2715")
     ),
     h2(
@@ -3992,6 +4020,12 @@ function ThreadPanel({ conversation, currentUserId, composer }) {
       { className: "flex-1 overflow-y-auto p-1" },
       ...messages.map((m) => h2(MessageRow, { key: m.id, message: m, conversation, currentUserId, showThreadAffordance: false }))
     ),
+    target ? h2(
+      "div",
+      { className: "flex items-center justify-between gap-2 border-t border-border bg-muted/40 px-3 py-1 text-xs text-muted-foreground" },
+      h2("span", { className: "truncate" }, `\u21B3 Replying to ${target.author.name}`),
+      h2("button", { type: "button", className: "hover:text-foreground", onClick: () => conversation.openThread(rootId) }, "Reply to thread instead")
+    ) : null,
     composer
   );
 }
@@ -4030,9 +4064,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,
@@ -4043,11 +4081,13 @@ function Chat({
   const threadComposer = state.openThreadRootId ? h2(Composer, {
     placeholder: "Reply\u2026",
     busy,
+    error,
+    onRetry,
     slashCommands,
     mentions,
     onSlashCommand,
     toolbar: composerToolbar,
-    onSubmit: (content, atts) => void sendMessage(content, { replyTo: state.openThreadRootId, attachments: atts }),
+    onSubmit: (content, atts) => void sendMessage(content, { replyTo: state.replyTarget ?? state.openThreadRootId, attachments: atts }),
     onStop: () => conversation.stop()
   }) : null;
   const body = timeline.length === 0 ? h2("div", { className: "flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground" }, emptyState ?? "No messages yet. Say hello \u{1F44B}") : h2(
@@ -4059,8 +4099,10 @@ function Chat({
         message: m,
         conversation,
         currentUserId,
-        showThreadAffordance: state.threadingMode === "panel",
-        quotedParent: state.threadingMode === "inline" && m.parentId ? findMessage(state.messages, m.parentId) : void 0
+        // Show the "N replies" count on originating messages in BOTH modes.
+        showThreadAffordance: true,
+        // Inline: quote the specific message replied to (falls back to the root).
+        quotedParent: state.threadingMode === "inline" && m.parentId ? findMessage(state.messages, m.replyToId ?? m.parentId) : void 0
       })
     )
   );
@@ -4344,14 +4386,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
@@ -4359,64 +4443,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)
   );
 }