@cimplify/sdk 0.109.0 → 0.111.0

package/registry/chat-widget.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "chat-widget.tsx",
-      "content": "\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatUploadAttachment, ChatWidgetStarter } from \"../types/support\";\nimport { isOptimistic } from \"./chat-model\";\nimport {\n  ChatKitProgram,\n  ChatReplyCards,\n  MessageBubble,\n  Seam,\n  chatTimeline,\n  dayLabel,\n  deliveryState,\n  groupPosition,\n  proseOf,\n  sameDay,\n  type GenUIActionEvent,\n} from \"./chat-kit\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst MAX_ATTACHMENT_BYTES = 25 * 1024 * 1024;\n\n/** Mirrors the server allowlist: images plus inert document types. */\nconst DOCUMENT_MIME_TYPES = new Set([\n  \"application/pdf\",\n  \"text/plain\",\n  \"text/csv\",\n  \"application/msword\",\n  \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  \"application/vnd.ms-excel\",\n  \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n]);\n\nconst ATTACHMENT_ACCEPT = [\"image/*\", ...DOCUMENT_MIME_TYPES].join(\",\");\n\nfunction isAllowedAttachment(file: File): boolean {\n  return file.type.startsWith(\"image/\") || DOCUMENT_MIME_TYPES.has(file.type);\n}\nconst KEEP_DISMISSED_KEY = \"cimplify_keep_chat_dismissed\";\n/** How close to the bottom still counts as reading the live edge. */\nconst AT_BOTTOM_SLACK_PX = 48;\n\n/* ─── Public API ──────────────────────────────────────────── */\n\nexport interface ChatWidgetClassNames {\n  root?: string;\n  bubble?: string;\n  panel?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  welcome?: string;\n}\n\nexport interface ChatWidgetProps {\n  client?: CimplifyClient;\n  /** Business display name shown in the header */\n  businessName?: string;\n  /** Greeting text on the welcome screen */\n  greeting?: string;\n  /** Subtitle on the welcome screen */\n  subtitle?: string;\n  /** Conversation starters */\n  starters?: ChatWidgetStarter[];\n  /** Input placeholder */\n  placeholder?: string;\n  /** Position of the bubble */\n  position?: \"bottom-right\" | \"bottom-left\";\n  /** Start with the panel open */\n  defaultOpen?: boolean;\n  /** Poll interval in ms (default: 3000) */\n  pollInterval?: number;\n  /** Currency for structured product cards (e.g. \"GHS\"). */\n  currency?: string;\n  /**\n   * Receives taps on GenUI buttons and structured cards\n   * (`chat:view_product:{id}`, `chat:view_order:{id}`). Without it, cards\n   * render read-only and program buttons no-op.\n   */\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName: businessNameProp,\n  greeting = \"Hi there!\",\n  subtitle = \"Ask us anything — we typically reply in a few seconds.\",\n  starters,\n  placeholder = \"Type a message\\u2026\",\n  position = \"bottom-right\",\n  defaultOpen = false,\n  pollInterval,\n  currency: currencyProp,\n  onGenUIAction,\n  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n  // Provider-wrapped hosts get the real identity with zero config.\n  const businessName = businessNameProp ?? context?.business?.name ?? \"Support\";\n  const currency = currencyProp ?? context?.baseCurrency;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [readAt, setReadAt] = useState<string | null>(null);\n  const [attachError, setAttachError] = useState<CimplifyError | null>(null);\n  const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);\n\n  const {\n    messages,\n    isLoading,\n    isSending,\n    awaitingReply,\n    seenAt,\n    error,\n    isActive,\n    humanRequested,\n    claimedAs,\n    signOut,\n    send,\n    react,\n    requestHuman,\n    startConversation,\n    loadOlder,\n    mayHaveOlder,\n    openIfExisting,\n  } = useChat({ client, starters, pollInterval });\n  const showTyping = isSending || awaitingReply;\n\n  const attachFile = useCallback(\n    async (file: File) => {\n      if (!client) return;\n      setAttachError(null);\n      if (!isAllowedAttachment(file)) {\n        setAttachError(\n          new CimplifyError(\"invalid_attachment\", \"Only photos and documents can be attached.\"),\n        );\n        return;\n      }\n      if (file.size > MAX_ATTACHMENT_BYTES) {\n        setAttachError(new CimplifyError(\"attachment_too_large\", \"Files must be under 25MB.\"));\n        return;\n      }\n      const uploaded = await client.uploads.upload(file);\n      if (!uploaded.ok) {\n        setAttachError(uploaded.error);\n        return;\n      }\n      const attachment: ChatUploadAttachment = {\n        upload_id: uploaded.value.id,\n        url: uploaded.value.url,\n        mime_type: uploaded.value.content_type,\n        filename: uploaded.value.filename,\n        size: uploaded.value.size_bytes,\n      };\n      await send(\"\", { attachments: [attachment] });\n    },\n    [client, send],\n  );\n\n  const handleSend = useCallback(\n    (content: string) => {\n      setAttachError(null);\n      const target = replyTo;\n      setReplyTo(null);\n      return send(content, target ? { replyTo: target } : undefined);\n    },\n    [send, replyTo],\n  );\n\n  // Unread badge: incoming messages newer than the watermark snapshotted\n  // when the panel last closed.\n  const unread = open\n    ? 0\n    : messages.filter(\n        (m) => m.sender_type !== \"customer\" && (!readAt || m.created_at > readAt),\n      ).length;\n\n  useState(() => {\n    if (defaultOpen) void openIfExisting();\n  });\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    void openIfExisting();\n  }, [openIfExisting]);\n\n  const handleClose = useCallback(() => {\n    const newest = messages[messages.length - 1];\n    setReadAt(newest?.created_at ?? null);\n    setOpen(false);\n  }, [messages]);\n\n  const isLeft = position === \"bottom-left\";\n\n  return (\n    <div\n      className={cn(\n        \"fixed bottom-6 z-[9999]\",\n        isLeft ? \"left-6\" : \"right-6\",\n        className,\n        classNames?.root,\n      )}\n    >\n      {/* Bubble */}\n      {!open && (\n        <Bubble\n          unread={unread}\n          onClick={handleOpen}\n          className={classNames?.bubble}\n        />\n      )}\n\n      {/* Panel */}\n      {open && (\n        <Panel\n          client={client}\n          businessName={businessName}\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          placeholder={placeholder}\n          messages={messages}\n          isLoading={isLoading}\n          isSending={isSending}\n          isTyping={showTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          error={error ?? attachError}\n          isActive={isActive}\n          isLeft={isLeft}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          replyTo={replyTo}\n          claimedAs={claimedAs}\n          onSignOut={() => void signOut()}\n          onClose={handleClose}\n          onSend={handleSend}\n          onReact={react}\n          onReply={setReplyTo}\n          onCancelReply={() => setReplyTo(null)}\n          onRequestHuman={() => void requestHuman()}\n          onLoadOlder={() => void loadOlder()}\n          onAttach={attachFile}\n          onStartConversation={startConversation}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          classNames={classNames}\n        />\n      )}\n    </div>\n  );\n}\n\n/* ─── Bubble ──────────────────────────────────────────────── */\n\nfunction Bubble({\n  unread,\n  onClick,\n  className,\n}: {\n  unread: number;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label=\"Open chat\"\n      className={cn(\n        \"relative flex h-14 w-14 items-center justify-center rounded-full\",\n        \"bg-foreground text-background shadow-lg\",\n        \"transition-transform duration-300 ease-out\",\n        \"hover:scale-[1.08] active:scale-95\",\n        className,\n      )}\n    >\n      <ChatIcon className=\"h-6 w-6\" />\n      {unread > 0 && (\n        <span\n          className={cn(\n            \"absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center\",\n            \"rounded-full bg-destructive text-[10px] font-bold text-white\",\n            \"ring-2 ring-background\",\n          )}\n        >\n          {unread > 9 ? \"9+\" : unread}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/* ─── Panel ───────────────────────────────────────────────── */\n\nfunction Panel({\n  client,\n  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  isTyping,\n  seenAt,\n  readAt,\n  error,\n  isActive,\n  isLeft,\n  humanRequested,\n  mayHaveOlder,\n  replyTo,\n  claimedAs,\n  onSignOut,\n  onClose,\n  onSend,\n  onReact,\n  onReply,\n  onCancelReply,\n  onRequestHuman,\n  onLoadOlder,\n  onAttach,\n  onStartConversation,\n  currency,\n  onGenUIAction,\n  classNames,\n}: {\n  client: CimplifyClient | undefined;\n  businessName: string;\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  placeholder: string;\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  isTyping: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  replyTo: ChatMessage | null;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  onSend: (content: string) => Promise<boolean>;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onCancelReply: () => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  onAttach: (file: File) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<void>;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  classNames?: ChatWidgetClassNames;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col overflow-hidden rounded-2xl bg-background shadow-2xl\",\n        \"w-[400px] max-w-[calc(100vw-3rem)]\",\n        \"h-[min(600px,calc(100vh-6rem))]\",\n        \"animate-in fade-in slide-in-from-bottom-4 duration-300\",\n        isLeft ? \"origin-bottom-left\" : \"origin-bottom-right\",\n        classNames?.panel,\n      )}\n    >\n      {/* Header */}\n      <Header\n        businessName={businessName}\n        claimedAs={claimedAs}\n        onSignOut={onSignOut}\n        onClose={onClose}\n        className={classNames?.header}\n      />\n\n      {/* Body */}\n      {!isActive && !isLoading ? (\n        <Welcome\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          onStarter={onStartConversation}\n          className={classNames?.welcome}\n        />\n      ) : (\n        <MessageList\n          messages={messages}\n          businessName={businessName}\n          isLoading={isLoading}\n          isSending={isTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          onReact={onReact}\n          onReply={onReply}\n          onRequestHuman={onRequestHuman}\n          onLoadOlder={onLoadOlder}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          className={classNames?.messages}\n        />\n      )}\n\n      {isActive && !claimedAs && client && <KeepConversation client={client} />}\n\n      {humanRequested && isActive && (\n        <div className=\"flex items-center gap-2 border-t border-border bg-muted/50 px-4 py-2 text-[11px] text-muted-foreground\">\n          <span className=\"h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-amber-500\" />\n          Waiting for {businessName} — usually replies in minutes\n        </div>\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive\">\n          {error.userMessage || \"Something went wrong. Please try again.\"}\n        </div>\n      )}\n\n      {replyTo && (\n        <div className=\"flex items-start gap-2 border-t border-border bg-muted/50 px-4 py-2\">\n          <span className=\"w-[3px] shrink-0 self-stretch rounded-full bg-foreground/40\" />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-[11px] font-semibold text-foreground\">\n              Replying to {replyTo.sender_type === \"customer\" ? \"yourself\" : businessName}\n            </div>\n            <div className=\"truncate text-[11px] text-muted-foreground\">\n              {proseOf(replyTo.content) || \"Photo\"}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Cancel reply\"\n            onClick={onCancelReply}\n            className=\"flex-shrink-0 p-0.5 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {/* Always present: gating on an active conversation left a visitor who\n          wants to type their own question with only the starter buttons. */}\n      <ChatInput\n        placeholder={placeholder}\n        isSending={isSending}\n        onSend={isActive ? onSend : async (text) => { await onStartConversation(text); return true; }}\n        onAttach={onAttach}\n        className={classNames?.input}\n      />\n\n\n      {/* Footer */}\n      <div className=\"flex-shrink-0 border-t border-border bg-background px-4 py-1.5 text-center text-[10px] text-muted-foreground\">\n        Powered by{\" \"}\n        <span className=\"font-semibold text-foreground\">Cimplify</span>\n      </div>\n    </div>\n  );\n}\n\n/* ─── Header ──────────────────────────────────────────────── */\n\nfunction Header({\n  businessName,\n  claimedAs,\n  onSignOut,\n  onClose,\n  className,\n}: {\n  businessName: string;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-center gap-3 bg-foreground px-5 py-4 text-background\",\n        className,\n      )}\n    >\n      <div className=\"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-background/15\">\n        <ChatIcon className=\"h-5 w-5\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-[15px] font-semibold leading-tight\">\n          {businessName}\n        </div>\n        {claimedAs ? (\n          <div className=\"flex items-center gap-1 truncate text-xs text-background/60\">\n            <span className=\"truncate\">Chatting as {claimedAs}</span>\n            <span aria-hidden=\"true\">·</span>\n            <button\n              type=\"button\"\n              onClick={onSignOut}\n              className=\"flex-shrink-0 underline underline-offset-2 hover:text-background\"\n            >\n              Not you?\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1.5 text-xs text-background/60\">\n            <span className=\"h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400\" />\n            Online\n          </div>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        onClick={onClose}\n        aria-label=\"Close chat\"\n        className={cn(\n          \"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg\",\n          \"bg-background/10 text-background/70 transition-colors hover:bg-background/20 hover:text-background\",\n        )}\n      >\n        <CloseIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Welcome ─────────────────────────────────────────────── */\n\nfunction Welcome({\n  greeting,\n  subtitle,\n  starters,\n  onStarter,\n  className,\n}: {\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  onStarter: (text?: string) => Promise<void>;\n  className?: string;\n}) {\n  const defaultStarters: ChatWidgetStarter[] = [\n    { icon: \"\\ud83d\\udd0d\", text: \"Help me find a product\" },\n    { icon: \"\\ud83d\\uded2\", text: \"Check my cart\" },\n    { icon: \"\\ud83d\\udce6\", text: \"Track my order\" },\n  ];\n\n  const items = starters ?? defaultStarters;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center overflow-y-auto bg-muted/50 px-8 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted\">\n        <ChatIcon className=\"h-7 w-7 text-muted-foreground\" />\n      </div>\n      <h3 className=\"mb-2 text-xl font-bold text-foreground\">{greeting}</h3>\n      <p className=\"mb-6 max-w-[280px] text-sm leading-relaxed text-muted-foreground\">\n        {subtitle}\n      </p>\n      <div className=\"flex w-full max-w-[300px] flex-col gap-2\">\n        {items.map((s) => (\n          <button\n            key={s.text}\n            type=\"button\"\n            onClick={() => onStarter(s.text)}\n            className={cn(\n              \"flex items-center gap-3 rounded-xl border border-border bg-background px-4 py-3\",\n              \"text-left text-[13px] font-medium text-foreground\",\n              \"transition-all hover:-translate-y-px hover:border-foreground hover:shadow-sm\",\n            )}\n          >\n            {s.icon && (\n              <span className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-[15px]\">\n                {s.icon}\n              </span>\n            )}\n            <span>{s.text}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ─── Messages ────────────────────────────────────────────── */\n\nconst QUICK_REACTIONS = [\"👍\", \"❤️\"] as const;\n\nfunction LetterAvatar({ name }: { name: string }) {\n  return (\n    <span className=\"flex size-6 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background\">\n      {name.charAt(0).toUpperCase()}\n    </span>\n  );\n}\n\nfunction MessageList({\n  messages,\n  businessName,\n  isLoading,\n  isSending,\n  seenAt,\n  readAt,\n  humanRequested,\n  mayHaveOlder,\n  onReact,\n  onReply,\n  onRequestHuman,\n  onLoadOlder,\n  currency,\n  onGenUIAction,\n  className,\n}: {\n  messages: ChatMessage[];\n  businessName: string;\n  isLoading: boolean;\n  isSending: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n}) {\n  const scrolledUpRef = useRef(false);\n  const timeline = chatTimeline(messages, { readAt, rendersPrograms: true });\n  const { bubbles, reactionsByTarget, firstUnreadId, unreadOnOpen, firstAgentMessageId } =\n    timeline;\n  const lastBubble = bubbles[bubbles.length - 1];\n  const offerHuman = !humanRequested && lastBubble?.sender_type === \"bot\" && !isSending;\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const node = event.currentTarget;\n    scrolledUpRef.current =\n      node.scrollHeight - node.scrollTop - node.clientHeight >= AT_BOTTOM_SLACK_PX;\n  };\n\n  return (\n    <div\n      onScroll={handleScroll}\n      style={{ background: \"var(--color-chat-canvas, var(--color-muted, #f3f5f3))\" }}\n      className={cn(\"flex flex-1 flex-col gap-0.5 overflow-y-auto px-3.5 py-3.5\", className)}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {mayHaveOlder && (\n        <div className=\"flex justify-center pb-1\">\n          <button\n            type=\"button\"\n            onClick={onLoadOlder}\n            className=\"rounded-full border border-foreground/[0.06] bg-background px-3.5 py-[7px] text-xs font-semibold text-muted-foreground shadow-[0_1px_2px_rgba(15,23,42,0.04)]\"\n          >\n            Show earlier messages\n          </button>\n        </div>\n      )}\n\n      {bubbles.map((msg, i) => {\n        const prev = bubbles[i - 1];\n        const newDay = !prev || !sameDay(prev.created_at, msg.created_at);\n        const group = groupPosition(timeline, i);\n        const startsRun = group === \"single\" || group === \"first\";\n        const delivery = deliveryState(msg, timeline, seenAt, isOptimistic);\n\n        return (\n          <div\n            key={msg.id}\n            className={cn(\"flex flex-col gap-1.5\", startsRun && i > 0 && \"mt-2.5\")}\n          >\n            {newDay && <Seam variant=\"chip\" label={dayLabel(msg.created_at)} />}\n            {msg.id === firstUnreadId && (\n              <Seam\n                variant=\"unread\"\n                label={`${unreadOnOpen} new message${unreadOnOpen === 1 ? \"\" : \"s\"}`}\n              />\n            )}\n            {msg.id === firstAgentMessageId && <Seam label=\"A person joined\" />}\n            {msg.sender_type === \"system\" ? (\n              <Seam label=\"Passing you to the team\" />\n            ) : (\n              <div className=\"group relative\">\n                {msg.sender_type !== \"customer\" && !isOptimistic(msg) && (\n                  <HoverRail message={msg} onReact={onReact} onReply={onReply} />\n                )}\n                <MessageBubble\n                  message={msg}\n                  reactions={reactionsByTarget.get(msg.id)}\n                  businessName={businessName}\n                  group={group}\n                  delivery={delivery}\n                  onReply={onReply}\n                  avatar={<LetterAvatar name={businessName} />}\n                  renderProgram={(source) => (\n                    <ChatKitProgram source={source} onAction={onGenUIAction} />\n                  )}\n                  renderCards={(target) => (\n                    <ChatReplyCards message={target} currency={currency} onAction={onGenUIAction} />\n                  )}\n                  onQuoteMiss={async () => {\n                    onLoadOlder();\n                    return true;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\n        </div>\n      )}\n\n      {offerHuman && (\n        <div className=\"mt-2\">\n          <button\n            type=\"button\"\n            onClick={onRequestHuman}\n            className=\"rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:border-foreground\"\n          >\n            Talk to a person\n          </button>\n        </div>\n      )}\n\n      <div\n        key={`${messages.length}:${isSending}`}\n        ref={(node) => {\n          // Keyed so the callback re-fires per new message/typing change —\n          // follows the conversation, but never yanks a reader out of history.\n          if (node && !scrolledUpRef.current) node.scrollIntoView({ behavior: \"smooth\" });\n        }}\n      />\n    </div>\n  );\n}\n\nfunction HoverRail({\n  message,\n  onReact,\n  onReply,\n}: {\n  message: ChatMessage;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n}) {\n  return (\n    <div className=\"absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex\">\n      {QUICK_REACTIONS.map((emoji) => (\n        <button\n          key={emoji}\n          type=\"button\"\n          aria-label={`React ${emoji}`}\n          onClick={() => void onReact(message, emoji)}\n          className=\"flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted\"\n        >\n          {emoji}\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        aria-label=\"Reply\"\n        onClick={() => onReply(message)}\n        className=\"flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground\"\n      >\n        <ReplyIcon className=\"h-3.5 w-3.5\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Keep this conversation ──────────────────────────────── */\n\nfunction readKeepDismissed(): boolean {\n  try {\n    return typeof window !== \"undefined\" && window.localStorage.getItem(KEEP_DISMISSED_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction writeKeepDismissed(): void {\n  try {\n    window.localStorage.setItem(KEEP_DISMISSED_KEY, \"1\");\n  } catch {}\n}\n\nfunction KeepConversation({ client }: { client: CimplifyClient }) {\n  const [step, setStep] = useState<\"row\" | \"contact\" | \"code\">(\"row\");\n  const [dismissed, setDismissed] = useState(readKeepDismissed);\n  const [contact, setContact] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [challengeId, setChallengeId] = useState<string | null | undefined>(null);\n  const [busy, setBusy] = useState(false);\n  const [verifyError, setVerifyError] = useState<string | null>(null);\n\n  if (dismissed) return null;\n\n  const contactType = contact.includes(\"@\") ? \"email\" : \"phone\";\n\n  const requestCode = async () => {\n    const trimmed = contact.trim();\n    if (!trimmed || busy) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.requestOtp({ contact: trimmed, contact_type: contactType });\n    setBusy(false);\n    if (result.ok) {\n      setChallengeId(result.value.challenge_id);\n      setCode(\"\");\n      setStep(\"code\");\n    } else {\n      setVerifyError(result.error.userMessage || \"Couldn't send a code — try again.\");\n    }\n  };\n\n  const verify = async (value: string) => {\n    if (value.length !== 6 || busy || challengeId === null) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.verifyOtp({\n      ...(challengeId === undefined ? {} : { challenge_id: challengeId }),\n      contact: contact.trim(),\n      contact_type: contactType,\n      otp_code: value,\n    });\n    setBusy(false);\n    if (!result.ok) {\n      setCode(\"\");\n      setVerifyError(result.error.userMessage || \"Invalid or expired code.\");\n    }\n  };\n\n  return (\n    <div className=\"flex-shrink-0 border-t border-border bg-muted/50 px-4 py-2.5\">\n      {step === \"row\" && (\n        <div className=\"flex items-center gap-2.5\">\n          <button\n            type=\"button\"\n            onClick={() => setStep(\"contact\")}\n            className=\"flex min-w-0 flex-1 flex-col text-left\"\n          >\n            <span className=\"text-xs font-semibold text-foreground\">Keep this conversation</span>\n            <span className=\"truncate text-[11px] text-muted-foreground\">\n              Verify your number and it follows you — any device\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            onClick={() => {\n              writeKeepDismissed();\n              setDismissed(true);\n            }}\n            className=\"flex-shrink-0 p-1 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {step === \"contact\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"email\"\n            value={contact}\n            onChange={(e) => setContact(e.target.value)}\n            onKeyDown={(e) => e.key === \"Enter\" && void requestCode()}\n            placeholder=\"Phone or email\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={!contact.trim() || busy}\n            className=\"h-9 flex-shrink-0 rounded-lg bg-foreground px-3 text-xs font-semibold text-background disabled:opacity-50\"\n          >\n            {busy ? \"Sending…\" : \"Send code\"}\n          </button>\n        </div>\n      )}\n\n      {step === \"code\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            maxLength={6}\n            value={code}\n            onChange={(e) => {\n              const digits = e.target.value.replace(/\\D/g, \"\").slice(0, 6);\n              setCode(digits);\n              if (digits.length === 6) void verify(digits);\n            }}\n            placeholder=\"6-digit code\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs tracking-[0.2em] text-foreground outline-none placeholder:tracking-normal placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={busy}\n            className=\"h-9 flex-shrink-0 rounded-lg px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50\"\n          >\n            Resend\n          </button>\n        </div>\n      )}\n\n      {verifyError && <p className=\"mt-1.5 text-[11px] text-destructive\">{verifyError}</p>}\n    </div>\n  );\n}\n\n/* ─── Input ───────────────────────────────────────────────── */\n\nfunction ChatInput({\n  placeholder,\n  isSending,\n  onSend,\n  onAttach,\n  className,\n}: {\n  placeholder: string;\n  isSending: boolean;\n  onSend: (content: string) => Promise<boolean>;\n  onAttach: (file: File) => Promise<void>;\n  className?: string;\n}) {\n  const [value, setValue] = useState(\"\");\n  const [uploading, setUploading] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileRef = useRef<HTMLInputElement>(null);\n\n  const handleAttach = useCallback(\n    async (file: File) => {\n      setUploading(true);\n      try {\n        await onAttach(file);\n      } finally {\n        setUploading(false);\n      }\n    },\n    [onAttach],\n  );\n\n  const handleSend = useCallback(async () => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    const sent = await onSend(trimmed);\n    // A failed send must not eat the message — put it back to retry.\n    if (!sent) setValue((current) => current || trimmed);\n  }, [value, isSending, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;\n  }, []);\n\n  const hasContent = value.trim().length > 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-end gap-2 border-t border-border bg-background px-4 py-3\",\n        className,\n      )}\n    >\n      <input\n        ref={fileRef}\n        type=\"file\"\n        accept={ATTACHMENT_ACCEPT}\n        className=\"hidden\"\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        onChange={(e) => {\n          const file = e.target.files?.[0];\n          e.target.value = \"\";\n          if (file) void handleAttach(file);\n        }}\n      />\n      <button\n        type=\"button\"\n        aria-label=\"Attach a photo\"\n        disabled={uploading}\n        onClick={() => fileRef.current?.click()}\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"bg-muted text-muted-foreground transition-colors hover:text-foreground\",\n          uploading && \"animate-pulse\",\n        )}\n      >\n        <ImageIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n      <div\n        className={cn(\n          \"flex flex-1 items-end rounded-xl border-[1.5px] border-transparent bg-muted px-1\",\n          \"transition-colors focus-within:border-foreground focus-within:bg-background\",\n        )}\n      >\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onInput={handleInput}\n          placeholder={placeholder}\n          rows={1}\n          className={cn(\n            \"max-h-[100px] min-h-[20px] flex-1 resize-none bg-transparent px-2.5 py-2\",\n            \"text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n          )}\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleSend}\n        disabled={!hasContent || isSending}\n        aria-label=\"Send message\"\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"transition-all duration-200\",\n          hasContent && !isSending\n            ? \"bg-foreground text-background hover:scale-105 active:scale-95\"\n            : \"bg-muted text-muted-foreground\",\n        )}\n      >\n        <SendIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Typing dots ─────────────────────────────────────────── */\n\nfunction TypingDots() {\n  return (\n    <div className=\"flex items-center gap-1 px-4 py-3\">\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          className=\"h-[7px] w-[7px] animate-bounce rounded-full bg-muted-foreground/40\"\n          style={{ animationDelay: `${i * 160}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n/* ─── Icons (inline SVG — no icon library) ────────────────── */\n\nfunction ChatIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6L6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nfunction SendIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  );\n}\n\nfunction ImageIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  );\n}\n\nfunction ReplyIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"9 17 4 12 9 7\" />\n      <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\" />\n    </svg>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useRef, useCallback, type KeyboardEvent } from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatUploadAttachment, ChatWidgetStarter } from \"../types/support\";\nimport { isOptimistic } from \"./chat-model\";\nimport {\n  ChatKitProgram,\n  ChatReplyCards,\n  MessageBubble,\n  Seam,\n  chatTimeline,\n  dayLabel,\n  deliveryState,\n  groupPosition,\n  proseOf,\n  sameDay,\n  type GenUIActionEvent,\n} from \"./chat-kit\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst MAX_ATTACHMENT_BYTES = 25 * 1024 * 1024;\n\n/** Mirrors the server allowlist: images plus inert document types. */\nconst DOCUMENT_MIME_TYPES = new Set([\n  \"application/pdf\",\n  \"text/plain\",\n  \"text/csv\",\n  \"application/msword\",\n  \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  \"application/vnd.ms-excel\",\n  \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n]);\n\nconst ATTACHMENT_ACCEPT = [\"image/*\", ...DOCUMENT_MIME_TYPES].join(\",\");\n\nfunction isAllowedAttachment(file: File): boolean {\n  return file.type.startsWith(\"image/\") || DOCUMENT_MIME_TYPES.has(file.type);\n}\nconst KEEP_DISMISSED_KEY = \"cimplify_keep_chat_dismissed\";\n/** How close to the bottom still counts as reading the live edge. */\nconst AT_BOTTOM_SLACK_PX = 48;\n\n/* ─── Public API ──────────────────────────────────────────── */\n\nexport interface ChatWidgetClassNames {\n  root?: string;\n  bubble?: string;\n  panel?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  welcome?: string;\n}\n\nexport interface ChatWidgetProps {\n  client?: CimplifyClient;\n  /** Business display name shown in the header */\n  businessName?: string;\n  /** Greeting text on the welcome screen */\n  greeting?: string;\n  /** Subtitle on the welcome screen */\n  subtitle?: string;\n  /** Conversation starters */\n  starters?: ChatWidgetStarter[];\n  /** Input placeholder */\n  placeholder?: string;\n  /** Position of the bubble */\n  position?: \"bottom-right\" | \"bottom-left\";\n  /** Start with the panel open */\n  defaultOpen?: boolean;\n  /** Poll interval in ms (default: 3000) */\n  pollInterval?: number;\n  /** Currency for structured product cards (e.g. \"GHS\"). */\n  currency?: string;\n  /**\n   * Receives taps on GenUI buttons and structured cards\n   * (`chat:view_product:{id}`, `chat:view_order:{id}`). Without it, cards\n   * render read-only and program buttons no-op.\n   */\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName: businessNameProp,\n  greeting = \"Hi there!\",\n  subtitle = \"Ask us anything — we typically reply in a few seconds.\",\n  starters,\n  placeholder = \"Type a message\\u2026\",\n  position = \"bottom-right\",\n  defaultOpen = false,\n  pollInterval,\n  currency: currencyProp,\n  onGenUIAction,\n  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n  // Provider-wrapped hosts get the real identity with zero config.\n  const businessName = businessNameProp ?? context?.business?.name ?? \"Support\";\n  const currency = currencyProp ?? context?.baseCurrency ?? undefined;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [readAt, setReadAt] = useState<string | null>(null);\n  const [attachError, setAttachError] = useState<CimplifyError | null>(null);\n  const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);\n\n  const {\n    messages,\n    isLoading,\n    isSending,\n    awaitingReply,\n    seenAt,\n    error,\n    isActive,\n    humanRequested,\n    claimedAs,\n    signOut,\n    send,\n    react,\n    requestHuman,\n    startConversation,\n    loadOlder,\n    mayHaveOlder,\n    openIfExisting,\n  } = useChat({ client, starters, pollInterval });\n  const showTyping = isSending || awaitingReply;\n\n  const attachFile = useCallback(\n    async (file: File) => {\n      if (!client) return;\n      setAttachError(null);\n      if (!isAllowedAttachment(file)) {\n        setAttachError(\n          new CimplifyError(\"invalid_attachment\", \"Only photos and documents can be attached.\"),\n        );\n        return;\n      }\n      if (file.size > MAX_ATTACHMENT_BYTES) {\n        setAttachError(new CimplifyError(\"attachment_too_large\", \"Files must be under 25MB.\"));\n        return;\n      }\n      const uploaded = await client.uploads.upload(file);\n      if (!uploaded.ok) {\n        setAttachError(uploaded.error);\n        return;\n      }\n      const attachment: ChatUploadAttachment = {\n        upload_id: uploaded.value.id,\n        url: uploaded.value.url,\n        mime_type: uploaded.value.content_type,\n        filename: uploaded.value.filename,\n        size: uploaded.value.size_bytes,\n      };\n      await send(\"\", { attachments: [attachment] });\n    },\n    [client, send],\n  );\n\n  const handleSend = useCallback(\n    (content: string) => {\n      setAttachError(null);\n      const target = replyTo;\n      setReplyTo(null);\n      return send(content, target ? { replyTo: target } : undefined);\n    },\n    [send, replyTo],\n  );\n\n  // Unread badge: incoming messages newer than the watermark snapshotted\n  // when the panel last closed.\n  const unread = open\n    ? 0\n    : messages.filter((m) => m.sender_type !== \"customer\" && (!readAt || m.created_at > readAt))\n        .length;\n\n  useState(() => {\n    if (defaultOpen) void openIfExisting();\n  });\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    void openIfExisting();\n  }, [openIfExisting]);\n\n  const handleClose = useCallback(() => {\n    const newest = messages[messages.length - 1];\n    setReadAt(newest?.created_at ?? null);\n    setOpen(false);\n  }, [messages]);\n\n  const isLeft = position === \"bottom-left\";\n\n  return (\n    <div\n      className={cn(\n        \"fixed bottom-6 z-[9999]\",\n        isLeft ? \"left-6\" : \"right-6\",\n        className,\n        classNames?.root,\n      )}\n    >\n      {/* Bubble */}\n      {!open && <Bubble unread={unread} onClick={handleOpen} className={classNames?.bubble} />}\n\n      {/* Panel */}\n      {open && (\n        <Panel\n          client={client}\n          businessName={businessName}\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          placeholder={placeholder}\n          messages={messages}\n          isLoading={isLoading}\n          isSending={isSending}\n          isTyping={showTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          error={error ?? attachError}\n          isActive={isActive}\n          isLeft={isLeft}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          replyTo={replyTo}\n          claimedAs={claimedAs}\n          onSignOut={() => void signOut()}\n          onClose={handleClose}\n          onSend={handleSend}\n          onReact={react}\n          onReply={setReplyTo}\n          onCancelReply={() => setReplyTo(null)}\n          onRequestHuman={() => void requestHuman()}\n          onLoadOlder={() => void loadOlder()}\n          onAttach={attachFile}\n          onStartConversation={startConversation}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          classNames={classNames}\n        />\n      )}\n    </div>\n  );\n}\n\n/* ─── Bubble ──────────────────────────────────────────────── */\n\nfunction Bubble({\n  unread,\n  onClick,\n  className,\n}: {\n  unread: number;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label=\"Open chat\"\n      className={cn(\n        \"relative flex h-14 w-14 items-center justify-center rounded-full\",\n        \"bg-foreground text-background shadow-lg\",\n        \"transition-transform duration-300 ease-out\",\n        \"hover:scale-[1.08] active:scale-95\",\n        className,\n      )}\n    >\n      <ChatIcon className=\"h-6 w-6\" />\n      {unread > 0 && (\n        <span\n          className={cn(\n            \"absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center\",\n            \"rounded-full bg-destructive text-[10px] font-bold text-white\",\n            \"ring-2 ring-background\",\n          )}\n        >\n          {unread > 9 ? \"9+\" : unread}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/* ─── Panel ───────────────────────────────────────────────── */\n\nfunction Panel({\n  client,\n  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  isTyping,\n  seenAt,\n  readAt,\n  error,\n  isActive,\n  isLeft,\n  humanRequested,\n  mayHaveOlder,\n  replyTo,\n  claimedAs,\n  onSignOut,\n  onClose,\n  onSend,\n  onReact,\n  onReply,\n  onCancelReply,\n  onRequestHuman,\n  onLoadOlder,\n  onAttach,\n  onStartConversation,\n  currency,\n  onGenUIAction,\n  classNames,\n}: {\n  client: CimplifyClient | undefined;\n  businessName: string;\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  placeholder: string;\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  isTyping: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  replyTo: ChatMessage | null;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  onSend: (content: string) => Promise<boolean>;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onCancelReply: () => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  onAttach: (file: File) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<void>;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  classNames?: ChatWidgetClassNames;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col overflow-hidden rounded-2xl bg-background shadow-2xl\",\n        \"w-[400px] max-w-[calc(100vw-3rem)]\",\n        \"h-[min(600px,calc(100vh-6rem))]\",\n        \"animate-in fade-in slide-in-from-bottom-4 duration-300\",\n        isLeft ? \"origin-bottom-left\" : \"origin-bottom-right\",\n        classNames?.panel,\n      )}\n    >\n      {/* Header */}\n      <Header\n        businessName={businessName}\n        claimedAs={claimedAs}\n        onSignOut={onSignOut}\n        onClose={onClose}\n        className={classNames?.header}\n      />\n\n      {/* Body */}\n      {!isActive && !isLoading ? (\n        <Welcome\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          onStarter={onStartConversation}\n          className={classNames?.welcome}\n        />\n      ) : (\n        <MessageList\n          messages={messages}\n          businessName={businessName}\n          isLoading={isLoading}\n          isSending={isTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          onReact={onReact}\n          onReply={onReply}\n          onRequestHuman={onRequestHuman}\n          onLoadOlder={onLoadOlder}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          className={classNames?.messages}\n        />\n      )}\n\n      {isActive && !claimedAs && client && <KeepConversation client={client} />}\n\n      {humanRequested && isActive && (\n        <div className=\"flex items-center gap-2 border-t border-border bg-muted/50 px-4 py-2 text-[11px] text-muted-foreground\">\n          <span className=\"h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-amber-500\" />\n          Waiting for {businessName} — usually replies in minutes\n        </div>\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive\">\n          {error.userMessage || \"Something went wrong. Please try again.\"}\n        </div>\n      )}\n\n      {replyTo && (\n        <div className=\"flex items-start gap-2 border-t border-border bg-muted/50 px-4 py-2\">\n          <span className=\"w-[3px] shrink-0 self-stretch rounded-full bg-foreground/40\" />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-[11px] font-semibold text-foreground\">\n              Replying to {replyTo.sender_type === \"customer\" ? \"yourself\" : businessName}\n            </div>\n            <div className=\"truncate text-[11px] text-muted-foreground\">\n              {proseOf(replyTo.content) || \"Photo\"}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Cancel reply\"\n            onClick={onCancelReply}\n            className=\"flex-shrink-0 p-0.5 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {/* Always present: gating on an active conversation left a visitor who\n          wants to type their own question with only the starter buttons. */}\n      <ChatInput\n        placeholder={placeholder}\n        isSending={isSending}\n        onSend={\n          isActive\n            ? onSend\n            : async (text) => {\n                await onStartConversation(text);\n                return true;\n              }\n        }\n        onAttach={onAttach}\n        className={classNames?.input}\n      />\n\n      {/* Footer */}\n      <div className=\"flex-shrink-0 border-t border-border bg-background px-4 py-1.5 text-center text-[10px] text-muted-foreground\">\n        Powered by <span className=\"font-semibold text-foreground\">Cimplify</span>\n      </div>\n    </div>\n  );\n}\n\n/* ─── Header ──────────────────────────────────────────────── */\n\nfunction Header({\n  businessName,\n  claimedAs,\n  onSignOut,\n  onClose,\n  className,\n}: {\n  businessName: string;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-center gap-3 bg-foreground px-5 py-4 text-background\",\n        className,\n      )}\n    >\n      <div className=\"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-background/15\">\n        <ChatIcon className=\"h-5 w-5\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-[15px] font-semibold leading-tight\">{businessName}</div>\n        {claimedAs ? (\n          <div className=\"flex items-center gap-1 truncate text-xs text-background/60\">\n            <span className=\"truncate\">Chatting as {claimedAs}</span>\n            <span aria-hidden=\"true\">·</span>\n            <button\n              type=\"button\"\n              onClick={onSignOut}\n              className=\"flex-shrink-0 underline underline-offset-2 hover:text-background\"\n            >\n              Not you?\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1.5 text-xs text-background/60\">\n            <span className=\"h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400\" />\n            Online\n          </div>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        onClick={onClose}\n        aria-label=\"Close chat\"\n        className={cn(\n          \"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg\",\n          \"bg-background/10 text-background/70 transition-colors hover:bg-background/20 hover:text-background\",\n        )}\n      >\n        <CloseIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Welcome ─────────────────────────────────────────────── */\n\nfunction Welcome({\n  greeting,\n  subtitle,\n  starters,\n  onStarter,\n  className,\n}: {\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  onStarter: (text?: string) => Promise<void>;\n  className?: string;\n}) {\n  const defaultStarters: ChatWidgetStarter[] = [\n    { icon: \"\\ud83d\\udd0d\", text: \"Help me find a product\" },\n    { icon: \"\\ud83d\\uded2\", text: \"Check my cart\" },\n    { icon: \"\\ud83d\\udce6\", text: \"Track my order\" },\n  ];\n\n  const items = starters ?? defaultStarters;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center overflow-y-auto bg-muted/50 px-8 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted\">\n        <ChatIcon className=\"h-7 w-7 text-muted-foreground\" />\n      </div>\n      <h3 className=\"mb-2 text-xl font-bold text-foreground\">{greeting}</h3>\n      <p className=\"mb-6 max-w-[280px] text-sm leading-relaxed text-muted-foreground\">{subtitle}</p>\n      <div className=\"flex w-full max-w-[300px] flex-col gap-2\">\n        {items.map((s) => (\n          <button\n            key={s.text}\n            type=\"button\"\n            onClick={() => onStarter(s.text)}\n            className={cn(\n              \"flex items-center gap-3 rounded-xl border border-border bg-background px-4 py-3\",\n              \"text-left text-[13px] font-medium text-foreground\",\n              \"transition-all hover:-translate-y-px hover:border-foreground hover:shadow-sm\",\n            )}\n          >\n            {s.icon && (\n              <span className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-[15px]\">\n                {s.icon}\n              </span>\n            )}\n            <span>{s.text}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ─── Messages ────────────────────────────────────────────── */\n\nconst QUICK_REACTIONS = [\"👍\", \"❤️\"] as const;\n\nfunction LetterAvatar({ name }: { name: string }) {\n  return (\n    <span className=\"flex size-6 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background\">\n      {name.charAt(0).toUpperCase()}\n    </span>\n  );\n}\n\nfunction MessageList({\n  messages,\n  businessName,\n  isLoading,\n  isSending,\n  seenAt,\n  readAt,\n  humanRequested,\n  mayHaveOlder,\n  onReact,\n  onReply,\n  onRequestHuman,\n  onLoadOlder,\n  currency,\n  onGenUIAction,\n  className,\n}: {\n  messages: ChatMessage[];\n  businessName: string;\n  isLoading: boolean;\n  isSending: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n}) {\n  const scrolledUpRef = useRef(false);\n  const timeline = chatTimeline(messages, { readAt, rendersPrograms: true });\n  const { bubbles, reactionsByTarget, firstUnreadId, unreadOnOpen, firstAgentMessageId } = timeline;\n  const lastBubble = bubbles[bubbles.length - 1];\n  const offerHuman = !humanRequested && lastBubble?.sender_type === \"bot\" && !isSending;\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const node = event.currentTarget;\n    scrolledUpRef.current =\n      node.scrollHeight - node.scrollTop - node.clientHeight >= AT_BOTTOM_SLACK_PX;\n  };\n\n  return (\n    <div\n      onScroll={handleScroll}\n      style={{ background: \"var(--color-chat-canvas, var(--color-muted, #f3f5f3))\" }}\n      className={cn(\"flex flex-1 flex-col gap-0.5 overflow-y-auto px-3.5 py-3.5\", className)}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {mayHaveOlder && (\n        <div className=\"flex justify-center pb-1\">\n          <button\n            type=\"button\"\n            onClick={onLoadOlder}\n            className=\"rounded-full border border-foreground/[0.06] bg-background px-3.5 py-[7px] text-xs font-semibold text-muted-foreground shadow-[0_1px_2px_rgba(15,23,42,0.04)]\"\n          >\n            Show earlier messages\n          </button>\n        </div>\n      )}\n\n      {bubbles.map((msg, i) => {\n        const prev = bubbles[i - 1];\n        const newDay = !prev || !sameDay(prev.created_at, msg.created_at);\n        const group = groupPosition(timeline, i);\n        const startsRun = group === \"single\" || group === \"first\";\n        const delivery = deliveryState(msg, timeline, seenAt, isOptimistic);\n\n        return (\n          <div key={msg.id} className={cn(\"flex flex-col gap-1.5\", startsRun && i > 0 && \"mt-2.5\")}>\n            {newDay && <Seam variant=\"chip\" label={dayLabel(msg.created_at)} />}\n            {msg.id === firstUnreadId && (\n              <Seam\n                variant=\"unread\"\n                label={`${unreadOnOpen} new message${unreadOnOpen === 1 ? \"\" : \"s\"}`}\n              />\n            )}\n            {msg.id === firstAgentMessageId && <Seam label=\"A person joined\" />}\n            {msg.sender_type === \"system\" ? (\n              <Seam label=\"Passing you to the team\" />\n            ) : (\n              <div className=\"group relative\">\n                {msg.sender_type !== \"customer\" && !isOptimistic(msg) && (\n                  <HoverRail message={msg} onReact={onReact} onReply={onReply} />\n                )}\n                <MessageBubble\n                  message={msg}\n                  reactions={reactionsByTarget.get(msg.id)}\n                  businessName={businessName}\n                  group={group}\n                  delivery={delivery}\n                  onReply={onReply}\n                  avatar={<LetterAvatar name={businessName} />}\n                  renderProgram={(source) => (\n                    <ChatKitProgram source={source} onAction={onGenUIAction} />\n                  )}\n                  renderCards={(target) => (\n                    <ChatReplyCards message={target} currency={currency} onAction={onGenUIAction} />\n                  )}\n                  onQuoteMiss={async () => {\n                    onLoadOlder();\n                    return true;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\n        </div>\n      )}\n\n      {offerHuman && (\n        <div className=\"mt-2\">\n          <button\n            type=\"button\"\n            onClick={onRequestHuman}\n            className=\"rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:border-foreground\"\n          >\n            Talk to a person\n          </button>\n        </div>\n      )}\n\n      <div\n        key={`${messages.length}:${isSending}`}\n        ref={(node) => {\n          // Keyed so the callback re-fires per new message/typing change —\n          // follows the conversation, but never yanks a reader out of history.\n          if (node && !scrolledUpRef.current) node.scrollIntoView({ behavior: \"smooth\" });\n        }}\n      />\n    </div>\n  );\n}\n\nfunction HoverRail({\n  message,\n  onReact,\n  onReply,\n}: {\n  message: ChatMessage;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n}) {\n  return (\n    <div className=\"absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex\">\n      {QUICK_REACTIONS.map((emoji) => (\n        <button\n          key={emoji}\n          type=\"button\"\n          aria-label={`React ${emoji}`}\n          onClick={() => void onReact(message, emoji)}\n          className=\"flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted\"\n        >\n          {emoji}\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        aria-label=\"Reply\"\n        onClick={() => onReply(message)}\n        className=\"flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground\"\n      >\n        <ReplyIcon className=\"h-3.5 w-3.5\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Keep this conversation ──────────────────────────────── */\n\nfunction readKeepDismissed(): boolean {\n  try {\n    return typeof window !== \"undefined\" && window.localStorage.getItem(KEEP_DISMISSED_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction writeKeepDismissed(): void {\n  try {\n    window.localStorage.setItem(KEEP_DISMISSED_KEY, \"1\");\n  } catch {}\n}\n\nfunction KeepConversation({ client }: { client: CimplifyClient }) {\n  const [step, setStep] = useState<\"row\" | \"contact\" | \"code\">(\"row\");\n  const [dismissed, setDismissed] = useState(readKeepDismissed);\n  const [contact, setContact] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [challengeId, setChallengeId] = useState<string | null | undefined>(null);\n  const [busy, setBusy] = useState(false);\n  const [verifyError, setVerifyError] = useState<string | null>(null);\n\n  if (dismissed) return null;\n\n  const contactType = contact.includes(\"@\") ? \"email\" : \"phone\";\n\n  const requestCode = async () => {\n    const trimmed = contact.trim();\n    if (!trimmed || busy) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.requestOtp({ contact: trimmed, contact_type: contactType });\n    setBusy(false);\n    if (result.ok) {\n      setChallengeId(result.value.challenge_id);\n      setCode(\"\");\n      setStep(\"code\");\n    } else {\n      setVerifyError(result.error.userMessage || \"Couldn't send a code — try again.\");\n    }\n  };\n\n  const verify = async (value: string) => {\n    if (value.length !== 6 || busy || challengeId === null) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.verifyOtp({\n      ...(challengeId === undefined ? {} : { challenge_id: challengeId }),\n      contact: contact.trim(),\n      contact_type: contactType,\n      otp_code: value,\n    });\n    setBusy(false);\n    if (!result.ok) {\n      setCode(\"\");\n      setVerifyError(result.error.userMessage || \"Invalid or expired code.\");\n    }\n  };\n\n  return (\n    <div className=\"flex-shrink-0 border-t border-border bg-muted/50 px-4 py-2.5\">\n      {step === \"row\" && (\n        <div className=\"flex items-center gap-2.5\">\n          <button\n            type=\"button\"\n            onClick={() => setStep(\"contact\")}\n            className=\"flex min-w-0 flex-1 flex-col text-left\"\n          >\n            <span className=\"text-xs font-semibold text-foreground\">Keep this conversation</span>\n            <span className=\"truncate text-[11px] text-muted-foreground\">\n              Verify your number and it follows you — any device\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            onClick={() => {\n              writeKeepDismissed();\n              setDismissed(true);\n            }}\n            className=\"flex-shrink-0 p-1 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {step === \"contact\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"email\"\n            value={contact}\n            onChange={(e) => setContact(e.target.value)}\n            onKeyDown={(e) => e.key === \"Enter\" && void requestCode()}\n            placeholder=\"Phone or email\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={!contact.trim() || busy}\n            className=\"h-9 flex-shrink-0 rounded-lg bg-foreground px-3 text-xs font-semibold text-background disabled:opacity-50\"\n          >\n            {busy ? \"Sending…\" : \"Send code\"}\n          </button>\n        </div>\n      )}\n\n      {step === \"code\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            maxLength={6}\n            value={code}\n            onChange={(e) => {\n              const digits = e.target.value.replace(/\\D/g, \"\").slice(0, 6);\n              setCode(digits);\n              if (digits.length === 6) void verify(digits);\n            }}\n            placeholder=\"6-digit code\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs tracking-[0.2em] text-foreground outline-none placeholder:tracking-normal placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={busy}\n            className=\"h-9 flex-shrink-0 rounded-lg px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50\"\n          >\n            Resend\n          </button>\n        </div>\n      )}\n\n      {verifyError && <p className=\"mt-1.5 text-[11px] text-destructive\">{verifyError}</p>}\n    </div>\n  );\n}\n\n/* ─── Input ───────────────────────────────────────────────── */\n\nfunction ChatInput({\n  placeholder,\n  isSending,\n  onSend,\n  onAttach,\n  className,\n}: {\n  placeholder: string;\n  isSending: boolean;\n  onSend: (content: string) => Promise<boolean>;\n  onAttach: (file: File) => Promise<void>;\n  className?: string;\n}) {\n  const [value, setValue] = useState(\"\");\n  const [uploading, setUploading] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileRef = useRef<HTMLInputElement>(null);\n\n  const handleAttach = useCallback(\n    async (file: File) => {\n      setUploading(true);\n      try {\n        await onAttach(file);\n      } finally {\n        setUploading(false);\n      }\n    },\n    [onAttach],\n  );\n\n  const handleSend = useCallback(async () => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    const sent = await onSend(trimmed);\n    // A failed send must not eat the message — put it back to retry.\n    if (!sent) setValue((current) => current || trimmed);\n  }, [value, isSending, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;\n  }, []);\n\n  const hasContent = value.trim().length > 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-end gap-2 border-t border-border bg-background px-4 py-3\",\n        className,\n      )}\n    >\n      <input\n        ref={fileRef}\n        type=\"file\"\n        accept={ATTACHMENT_ACCEPT}\n        className=\"hidden\"\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        onChange={(e) => {\n          const file = e.target.files?.[0];\n          e.target.value = \"\";\n          if (file) void handleAttach(file);\n        }}\n      />\n      <button\n        type=\"button\"\n        aria-label=\"Attach a photo\"\n        disabled={uploading}\n        onClick={() => fileRef.current?.click()}\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"bg-muted text-muted-foreground transition-colors hover:text-foreground\",\n          uploading && \"animate-pulse\",\n        )}\n      >\n        <ImageIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n      <div\n        className={cn(\n          \"flex flex-1 items-end rounded-xl border-[1.5px] border-transparent bg-muted px-1\",\n          \"transition-colors focus-within:border-foreground focus-within:bg-background\",\n        )}\n      >\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onInput={handleInput}\n          placeholder={placeholder}\n          rows={1}\n          className={cn(\n            \"max-h-[100px] min-h-[20px] flex-1 resize-none bg-transparent px-2.5 py-2\",\n            \"text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n          )}\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleSend}\n        disabled={!hasContent || isSending}\n        aria-label=\"Send message\"\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"transition-all duration-200\",\n          hasContent && !isSending\n            ? \"bg-foreground text-background hover:scale-105 active:scale-95\"\n            : \"bg-muted text-muted-foreground\",\n        )}\n      >\n        <SendIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Typing dots ─────────────────────────────────────────── */\n\nfunction TypingDots() {\n  return (\n    <div className=\"flex items-center gap-1 px-4 py-3\">\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          className=\"h-[7px] w-[7px] animate-bounce rounded-full bg-muted-foreground/40\"\n          style={{ animationDelay: `${i * 160}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n/* ─── Icons (inline SVG — no icon library) ────────────────── */\n\nfunction ChatIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6L6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nfunction SendIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  );\n}\n\nfunction ImageIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  );\n}\n\nfunction ReplyIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"9 17 4 12 9 7\" />\n      <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\" />\n    </svg>\n  );\n}\n"
     }
   ]
 }

package/registry/price.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "price.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { formatPrice } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\n\nexport interface PriceProps {\n  /** The amount, denominated in `currency` (or the business base currency). */\n  amount: number | string;\n  /**\n   * Currency the `amount` is denominated in. Pass the product/order currency\n   * so the value renders correctly during SSR — before the provider has\n   * loaded the business client-side. Falls back to the provider's base\n   * currency, then USD.\n   */\n  currency?: CurrencyCode;\n  /** Optional CSS class name for the wrapping span. */\n  className?: string;\n  /** Optional prefix rendered before the formatted price (e.g. \"+\"). */\n  prefix?: string;\n  /**\n   * Apply the provider's FX display-currency override when one is active.\n   * Default true. The conversion is a post-hydration enhancement: it only\n   * engages once an FX rate has loaded client-side, so SSR and first-paint\n   * output always match and no currency flash occurs.\n   */\n  convert?: boolean;\n}\n\n/**\n * Price — renders a formatted price value.\n *\n * Currency is resolved from the `currency` prop (the amount's source currency),\n * falling back to the provider's base currency, then USD. Because the source\n * currency comes from data rather than the client-only provider bootstrap, an\n * explicit `currency` renders correctly during SSR.\n *\n * FX display-currency conversion (when a user picks a non-base display\n * currency) is layered on top after hydration, and only when the source is the\n * base currency the FX rate is computed from. It never affects the server or\n * first-paint render, so there is no hydration mismatch.\n */\nexport function Price({\n  amount,\n  currency,\n  className,\n  prefix,\n  convert = true,\n}: PriceProps): React.ReactElement {\n  const context = useOptionalCimplify();\n  const sourceCurrency =\n    currency ?? (context?.baseCurrency as CurrencyCode | undefined) ?? \"USD\";\n\n  const fxActive =\n    convert &&\n    context?.fxRate != null &&\n    context.displayCurrency !== sourceCurrency &&\n    sourceCurrency === context.baseCurrency;\n\n  const resolvedCurrency = (fxActive ? context!.displayCurrency : sourceCurrency) as CurrencyCode;\n  const resolvedAmount = fxActive\n    ? context!.convertPrice(amount)\n    : typeof amount === \"string\"\n      ? parseFloat(amount) || 0\n      : amount;\n\n  return (\n    <span className={className}>\n      {prefix}\n      {formatPrice(resolvedAmount, resolvedCurrency)}\n    </span>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { formatCurrencyAmount } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\n\nexport interface PriceProps {\n  /** The amount, denominated in `currency` (or the business base currency). */\n  amount: number | string;\n  /**\n   * Currency the `amount` is denominated in. Pass the product/order currency\n   * so the value renders correctly during SSR, before the provider has\n   * loaded the business client-side. Falls back to the provider's base\n   * currency. When neither is known the component renders nothing rather\n   * than guessing a currency.\n   */\n  currency?: CurrencyCode | null;\n  /** Optional CSS class name for the wrapping span. */\n  className?: string;\n  /** Optional prefix rendered before the formatted price (e.g. \"+\"). */\n  prefix?: string;\n  /**\n   * Apply the provider's FX display-currency override when one is active.\n   * Default true. The conversion is a post-hydration enhancement: it only\n   * engages once an FX rate has loaded client-side, so SSR and first-paint\n   * output always match and no currency flash occurs.\n   */\n  convert?: boolean;\n}\n\n/**\n * Price — renders a formatted price value.\n *\n * Currency is resolved from the `currency` prop (the amount's source currency),\n * falling back to the provider's base currency. With neither known it renders\n * null, a loading state, and never a guessed currency. Because the source\n * currency comes from data rather than the client-only provider bootstrap, an\n * explicit `currency` renders correctly during SSR.\n *\n * FX display-currency conversion (when a user picks a non-base display\n * currency) is layered on top after hydration, and only when the source is the\n * base currency the FX rate is computed from. It never affects the server or\n * first-paint render, so there is no hydration mismatch.\n */\nexport function Price({\n  amount,\n  currency,\n  className,\n  prefix,\n  convert = true,\n}: PriceProps): React.ReactElement | null {\n  const context = useOptionalCimplify();\n  const sourceCurrency = currency ?? context?.baseCurrency ?? null;\n  if (sourceCurrency === null) return null;\n\n  const displayCurrency = context?.displayCurrency ?? null;\n  const fxActive =\n    convert &&\n    context !== null &&\n    context.fxRate != null &&\n    displayCurrency !== null &&\n    displayCurrency !== sourceCurrency &&\n    sourceCurrency === context.baseCurrency;\n\n  const formatted =\n    fxActive && context !== null && displayCurrency !== null\n      ? formatCurrencyAmount(context.convertPrice(amount), displayCurrency)\n      : formatCurrencyAmount(amount, sourceCurrency);\n  if (formatted === null) return null;\n\n  return (\n    <span className={className}>\n      {prefix}\n      {formatted}\n    </span>\n  );\n}\n"
     }
   ]
 }

package/registry/product-customizer.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "product-customizer.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport {\n  getProductCurrency,\n  getUnitPriceAtQuantity,\n  getVariantUnitPrice,\n  parsePrice,\n} from \"@cimplify/sdk\";\nimport { isMultiDayService, serviceBillingMultiplier } from \"../utils/price-basis\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { BookingSummary } from \"./booking-summary\";\nimport type { Staff } from \"@cimplify/sdk\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  units?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (variantId: string | undefined, variant: VariantView | undefined) => void;\n  showSpecialInstructions?: boolean;\n  /** Submit button verb; the running total is appended. Defaults to \"Add to Cart\". */\n  submitLabel?: string;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\ninterface VariantSelection {\n  id?: string;\n  variant?: VariantView;\n}\n\nconst REQUIRED_OPTIONS_MESSAGE = \"Please select all required options\";\nconst QUOTE_LOADING_MESSAGE = \"Updating price…\";\nconst QUOTE_UNAVAILABLE_MESSAGE = \"Price is unavailable. Please try again.\";\nconst CUSTOMIZER_VALIDATION_ID = \"cimplify-customizer-validation\";\n\nfunction initialVariantSelection(product: ProductWithDetails): VariantSelection {\n  const variant =\n    product.variants?.find((candidate) => candidate.is_default) ?? product.variants?.[0];\n  return { id: variant?.id, variant };\n}\n\nexport function ProductCustomizer(props: ProductCustomizerProps): React.ReactElement {\n  // A product change represents a new customization session. Keying the\n  // stateful implementation resets it synchronously and avoids an effect that\n  // briefly renders the previous product's variant and quote.\n  return <ProductCustomizerContent key={props.product.id} {...props} />;\n}\n\nfunction ProductCustomizerContent({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  submitLabel,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [variantSelection, setVariantSelection] = useState<VariantSelection>(() =>\n    initialVariantSelection(product),\n  );\n  const selectedVariantId = variantSelection.id;\n  const selectedVariant = variantSelection.variant;\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [unitsCount, setUnitsCount] = useState(1);\n\n  const cart = useCart();\n\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  // Whole-stay services can reserve N interchangeable units (rooms, kayaks,\n  // pitches) per booking — mirrors desk's wizard, which gates the input the\n  // same way; intraday party size is already the quantity.\n  const offersUnits = isService && isMultiDayService(product);\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  // Staff offered for the chosen slot. SlotStaffInfo carries id + name; richer\n  // profiles (avatars/bios) would come from a staff roster fetch.\n  const slotStaff = useMemo<Staff[]>(\n    () =>\n      (selectedSlot?.available_staff ?? []).map((member) => ({\n        id: member.staff_id,\n        name: member.name,\n      })),\n    [selectedSlot],\n  );\n  const selectedStaffName = selectedStaffId\n    ? (slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null)\n    : null;\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(\n      new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean)),\n    ).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = getVariantUnitPrice(product, selectedVariant);\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [\n    product.default_price,\n    selectedVariant,\n    selectedAddOnOptions,\n    quantity,\n    isComposite,\n    compositePrice,\n    isBundle,\n    bundleTotalPrice,\n  ]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [\n      product.id,\n      quantity,\n      selectedVariantId,\n      normalizedAddOnOptionIds,\n      isBundle,\n      bundleSelections,\n      isComposite,\n      compositeSelections,\n    ],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const {\n    quote,\n    isLoading: isQuoteLoading,\n    error: quoteError,\n    isExpired: isQuoteExpired,\n  } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const currency = quote?.currency ?? getProductCurrency(product);\n  const quoteId = quote?.quote_id;\n  const quotedUnitPrice = (quote?.quoted_total_price_info ?? quote?.final_price_info)?.final_price;\n  const quotedTotalPrice = useMemo(() => {\n    if (quotedUnitPrice === undefined || quotedUnitPrice === null) return undefined;\n    return parsePrice(quotedUnitPrice) * quantity;\n  }, [quotedUnitPrice, quantity]);\n\n  const quoteIsReady =\n    quoteEnabled && quote !== null && !isQuoteLoading && !quoteError && !isQuoteExpired;\n  const validationMessage = !quoteEnabled\n    ? REQUIRED_OPTIONS_MESSAGE\n    : quoteError\n      ? QUOTE_UNAVAILABLE_MESSAGE\n      : !quoteIsReady\n        ? QUOTE_LOADING_MESSAGE\n        : null;\n\n  // Services bill by basis × periods × units server-side, not by quantity —\n  // mirror billing_multiplier so the preview matches the cart. Both totals\n  // above already include × quantity, so divide it back out to the unit\n  // price before applying the real multiplier.\n  const displayTotalPrice = useMemo(() => {\n    const total = quotedTotalPrice ?? localTotalPrice;\n    const multiplier = serviceBillingMultiplier(product, {\n      quantity,\n      units: unitsCount,\n      scheduledStart: selectedSlot?.start_time,\n      scheduledEnd: selectedSlot?.end_time,\n    });\n    if (multiplier === null) return total;\n    return (total / Math.max(1, quantity)) * multiplier;\n  }, [quotedTotalPrice, localTotalPrice, product, quantity, unitsCount, selectedSlot]);\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setVariantSelection({ id: variantId, variant });\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (\n      isSubmitting ||\n      !quoteIsReady ||\n      !quote ||\n      quotedUnitPrice === undefined ||\n      quotedUnitPrice === null\n    ) {\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      locationId: quote.location_id ?? undefined,\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? {\n            id: selectedVariant.id,\n            name: selectedVariant.name || \"\",\n            price_adjustment: selectedVariant.price_adjustment,\n            price_info: selectedVariant.price_info,\n          }\n        : undefined,\n      quoteId,\n      quotedUnitPrice,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions:\n        selectedAddOnOptions.length > 0\n          ? selectedAddOnOptions.map((opt) => ({\n              id: opt.id,\n              name: opt.name,\n              add_on_id: opt.add_on_id,\n              default_price: opt.default_price,\n            }))\n          : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n            units: unitsCount > 1 ? unitsCount : undefined,\n          }\n        : {}),\n      customerInputs:\n        Object.keys(customerInputValues).length > 0\n          ? Object.entries(customerInputValues)\n              .filter(([, v]) => v !== undefined && v !== \"\")\n              .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n          : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [\n    product,\n    quantity,\n    selectedVariantId,\n    selectedVariant,\n    quoteId,\n    quotedUnitPrice,\n    normalizedAddOnOptionIds,\n    selectedAddOnOptions,\n    isComposite,\n    compositeSelections,\n    isBundle,\n    bundleSelections,\n    selectedBillingPlan,\n    customerInputValues,\n    specialInstructions,\n    isService,\n    selectedSlot,\n    selectedStaffId,\n    unitsCount,\n    isSubmitting,\n    onAddToCart,\n    cart,\n    quoteIsReady,\n    quote,\n  ]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          currency={currency}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          currency={currency}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => {\n            setSelectedSlot(slot);\n            setSelectedStaffId(null);\n          }}\n          participantCount={quantity}\n          units={offersUnits ? unitsCount : undefined}\n          currency={currency}\n          // Without the resolved mode the picker renders intraday slots for\n          // whole-stay services — stays need the stay-range treatment.\n          schedulingMode={product.scheduling_mode ?? (offersUnits ? \"multi_day\" : \"intraday\")}\n          durationUnit={product.duration_unit}\n          durationValue={product.duration_value}\n        />\n      )}\n\n      {offersUnits && (\n        <div data-cimplify-customizer-units className={classNames?.units}>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Units\n          </label>\n          <QuantitySelector value={unitsCount} onChange={setUnitsCount} min={1} />\n        </div>\n      )}\n\n      {isService && slotStaff.length > 0 && (\n        <div data-cimplify-customizer-staff>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Choose your specialist\n          </label>\n          <StaffPicker\n            staff={slotStaff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={setSelectedStaffId}\n            className=\"flex flex-wrap gap-2\"\n            classNames={{\n              option:\n                \"inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:border-foreground/40 cursor-pointer data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background\",\n              avatar: \"w-6 h-6 rounded-full object-cover\",\n            }}\n          />\n        </div>\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          currency={currency}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n          currency={currency}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          currency={currency}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n          currency={currency}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n          currency={currency}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div\n          data-cimplify-customizer-deposit\n          className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}\n        >\n          {product.deposit_type === \"fixed\" ? (\n            <span>\n              Deposit required: <Price amount={product.deposit_amount} currency={currency} />\n            </span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div\n          data-cimplify-customizer-allergens\n          className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}\n        >\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div\n          data-cimplify-customizer-duration\n          className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}\n        >\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      {isService && selectedSlot && (\n        <BookingSummary\n          slot={selectedSlot}\n          total={displayTotalPrice}\n          staffName={selectedStaffName}\n          durationMinutes={product.duration_minutes}\n          depositType={product.deposit_type}\n          depositAmount={product.deposit_amount}\n          currency={currency}\n        />\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {validationMessage && (\n          <p\n            id={CUSTOMIZER_VALIDATION_ID}\n            data-cimplify-customizer-validation\n            className={cn(\n              \"text-sm mb-3\",\n              quoteError ? \"text-destructive\" : \"text-muted-foreground\",\n              classNames?.validation,\n            )}\n          >\n            {validationMessage}\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span\n                data-cimplify-customizer-min-hint\n                className=\"text-xs text-muted-foreground text-center\"\n              >\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div\n              data-cimplify-customizer-unit-price\n              className=\"text-sm text-muted-foreground text-right shrink-0\"\n            >\n              <Price\n                amount={getUnitPriceAtQuantity(\n                  product.quantity_pricing,\n                  quantity,\n                  parsePrice(product.default_price),\n                )}\n                currency={currency}\n                className=\"font-medium text-foreground\"\n              />{\" \"}\n              ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteIsReady}\n            aria-describedby={validationMessage ? CUSTOMIZER_VALIDATION_ID : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? (\n              \"Added\"\n            ) : !quoteEnabled ? (\n              (submitLabel ?? \"Add to Cart\")\n            ) : !quoteIsReady ? (\n              quoteError ? (\n                QUOTE_UNAVAILABLE_MESSAGE\n              ) : (\n                QUOTE_LOADING_MESSAGE\n              )\n            ) : (\n              <>\n                {submitLabel ?? \"Add to Cart\"} &middot;{\" \"}\n                <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport {\n  getProductCurrency,\n  getUnitPriceAtQuantity,\n  getVariantUnitPrice,\n  parsePrice,\n} from \"@cimplify/sdk\";\nimport { isMultiDayService, serviceBillingMultiplier } from \"../utils/price-basis\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { BookingSummary } from \"./booking-summary\";\nimport type { Staff } from \"@cimplify/sdk\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  units?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (variantId: string | undefined, variant: VariantView | undefined) => void;\n  showSpecialInstructions?: boolean;\n  /** Submit button verb; the running total is appended. Defaults to \"Add to Cart\". */\n  submitLabel?: string;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\ninterface VariantSelection {\n  id?: string;\n  variant?: VariantView;\n}\n\nconst REQUIRED_OPTIONS_MESSAGE = \"Please select all required options\";\nconst QUOTE_LOADING_MESSAGE = \"Updating price…\";\nconst QUOTE_UNAVAILABLE_MESSAGE = \"Price is unavailable. Please try again.\";\nconst CUSTOMIZER_VALIDATION_ID = \"cimplify-customizer-validation\";\n\nfunction initialVariantSelection(product: ProductWithDetails): VariantSelection {\n  const variant =\n    product.variants?.find((candidate) => candidate.is_default) ?? product.variants?.[0];\n  return { id: variant?.id, variant };\n}\n\nexport function ProductCustomizer(props: ProductCustomizerProps): React.ReactElement {\n  // A product change represents a new customization session. Keying the\n  // stateful implementation resets it synchronously and avoids an effect that\n  // briefly renders the previous product's variant and quote.\n  return <ProductCustomizerContent key={props.product.id} {...props} />;\n}\n\nfunction ProductCustomizerContent({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  submitLabel,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [variantSelection, setVariantSelection] = useState<VariantSelection>(() =>\n    initialVariantSelection(product),\n  );\n  const selectedVariantId = variantSelection.id;\n  const selectedVariant = variantSelection.variant;\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [unitsCount, setUnitsCount] = useState(1);\n\n  const cart = useCart();\n\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  // Whole-stay services can reserve N interchangeable units (rooms, kayaks,\n  // pitches) per booking — mirrors desk's wizard, which gates the input the\n  // same way; intraday party size is already the quantity.\n  const offersUnits = isService && isMultiDayService(product);\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  // Staff offered for the chosen slot. SlotStaffInfo carries id + name; richer\n  // profiles (avatars/bios) would come from a staff roster fetch.\n  const slotStaff = useMemo<Staff[]>(\n    () =>\n      (selectedSlot?.available_staff ?? []).map((member) => ({\n        id: member.staff_id,\n        name: member.name,\n      })),\n    [selectedSlot],\n  );\n  const selectedStaffName = selectedStaffId\n    ? (slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null)\n    : null;\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(\n      new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean)),\n    ).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = getVariantUnitPrice(product, selectedVariant);\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [\n    product.default_price,\n    selectedVariant,\n    selectedAddOnOptions,\n    quantity,\n    isComposite,\n    compositePrice,\n    isBundle,\n    bundleTotalPrice,\n  ]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [\n      product.id,\n      quantity,\n      selectedVariantId,\n      normalizedAddOnOptionIds,\n      isBundle,\n      bundleSelections,\n      isComposite,\n      compositeSelections,\n    ],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const {\n    quote,\n    isLoading: isQuoteLoading,\n    error: quoteError,\n    isExpired: isQuoteExpired,\n  } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quotedPriceInfo = quote?.quoted_total_price_info ?? quote?.final_price_info;\n  const currency = quote?.currency ?? quotedPriceInfo?.currency ?? getProductCurrency(product);\n  const quoteId = quote?.quote_id;\n  const quotedUnitPrice = quotedPriceInfo?.final_price;\n  const quotedTotalPrice = useMemo(() => {\n    if (quotedUnitPrice === undefined || quotedUnitPrice === null) return undefined;\n    return parsePrice(quotedUnitPrice) * quantity;\n  }, [quotedUnitPrice, quantity]);\n\n  const quoteIsReady =\n    quoteEnabled && quote !== null && !isQuoteLoading && !quoteError && !isQuoteExpired;\n  const validationMessage = !quoteEnabled\n    ? REQUIRED_OPTIONS_MESSAGE\n    : quoteError\n      ? QUOTE_UNAVAILABLE_MESSAGE\n      : !quoteIsReady\n        ? QUOTE_LOADING_MESSAGE\n        : null;\n\n  // Services bill by basis × periods × units server-side, not by quantity —\n  // mirror billing_multiplier so the preview matches the cart. Both totals\n  // above already include × quantity, so divide it back out to the unit\n  // price before applying the real multiplier.\n  const displayTotalPrice = useMemo(() => {\n    const total = quotedTotalPrice ?? localTotalPrice;\n    const multiplier = serviceBillingMultiplier(product, {\n      quantity,\n      units: unitsCount,\n      scheduledStart: selectedSlot?.start_time,\n      scheduledEnd: selectedSlot?.end_time,\n    });\n    if (multiplier === null) return total;\n    return (total / Math.max(1, quantity)) * multiplier;\n  }, [quotedTotalPrice, localTotalPrice, product, quantity, unitsCount, selectedSlot]);\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setVariantSelection({ id: variantId, variant });\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (\n      isSubmitting ||\n      !quoteIsReady ||\n      !quote ||\n      quotedUnitPrice === undefined ||\n      quotedUnitPrice === null\n    ) {\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      locationId: quote.location_id ?? undefined,\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? {\n            id: selectedVariant.id,\n            name: selectedVariant.name || \"\",\n            price_adjustment: selectedVariant.price_adjustment,\n            price_info: selectedVariant.price_info,\n          }\n        : undefined,\n      quoteId,\n      quotedUnitPrice,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions:\n        selectedAddOnOptions.length > 0\n          ? selectedAddOnOptions.map((opt) => ({\n              id: opt.id,\n              name: opt.name,\n              add_on_id: opt.add_on_id,\n              default_price: opt.default_price,\n            }))\n          : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n            units: unitsCount > 1 ? unitsCount : undefined,\n          }\n        : {}),\n      customerInputs:\n        Object.keys(customerInputValues).length > 0\n          ? Object.entries(customerInputValues)\n              .filter(([, v]) => v !== undefined && v !== \"\")\n              .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n          : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [\n    product,\n    quantity,\n    selectedVariantId,\n    selectedVariant,\n    quoteId,\n    quotedUnitPrice,\n    normalizedAddOnOptionIds,\n    selectedAddOnOptions,\n    isComposite,\n    compositeSelections,\n    isBundle,\n    bundleSelections,\n    selectedBillingPlan,\n    customerInputValues,\n    specialInstructions,\n    isService,\n    selectedSlot,\n    selectedStaffId,\n    unitsCount,\n    isSubmitting,\n    onAddToCart,\n    cart,\n    quoteIsReady,\n    quote,\n  ]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          currency={currency}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          currency={currency}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => {\n            setSelectedSlot(slot);\n            setSelectedStaffId(null);\n          }}\n          participantCount={quantity}\n          units={offersUnits ? unitsCount : undefined}\n          currency={currency}\n          // Without the resolved mode the picker renders intraday slots for\n          // whole-stay services — stays need the stay-range treatment.\n          schedulingMode={product.scheduling_mode ?? (offersUnits ? \"multi_day\" : \"intraday\")}\n          durationUnit={product.duration_unit}\n          durationValue={product.duration_value}\n        />\n      )}\n\n      {offersUnits && (\n        <div data-cimplify-customizer-units className={classNames?.units}>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Units\n          </label>\n          <QuantitySelector value={unitsCount} onChange={setUnitsCount} min={1} />\n        </div>\n      )}\n\n      {isService && slotStaff.length > 0 && (\n        <div data-cimplify-customizer-staff>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Choose your specialist\n          </label>\n          <StaffPicker\n            staff={slotStaff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={setSelectedStaffId}\n            className=\"flex flex-wrap gap-2\"\n            classNames={{\n              option:\n                \"inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:border-foreground/40 cursor-pointer data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background\",\n              avatar: \"w-6 h-6 rounded-full object-cover\",\n            }}\n          />\n        </div>\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          currency={currency}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n          currency={currency}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          currency={currency}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n          currency={currency}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n          currency={currency}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div\n          data-cimplify-customizer-deposit\n          className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}\n        >\n          {product.deposit_type === \"fixed\" ? (\n            <span>\n              Deposit required: <Price amount={product.deposit_amount} currency={currency} />\n            </span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div\n          data-cimplify-customizer-allergens\n          className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}\n        >\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div\n          data-cimplify-customizer-duration\n          className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}\n        >\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      {isService && selectedSlot && (\n        <BookingSummary\n          slot={selectedSlot}\n          total={displayTotalPrice}\n          staffName={selectedStaffName}\n          durationMinutes={product.duration_minutes}\n          depositType={product.deposit_type}\n          depositAmount={product.deposit_amount}\n          currency={currency}\n        />\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {validationMessage && (\n          <p\n            id={CUSTOMIZER_VALIDATION_ID}\n            data-cimplify-customizer-validation\n            className={cn(\n              \"text-sm mb-3\",\n              quoteError ? \"text-destructive\" : \"text-muted-foreground\",\n              classNames?.validation,\n            )}\n          >\n            {validationMessage}\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span\n                data-cimplify-customizer-min-hint\n                className=\"text-xs text-muted-foreground text-center\"\n              >\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div\n              data-cimplify-customizer-unit-price\n              className=\"text-sm text-muted-foreground text-right shrink-0\"\n            >\n              <Price\n                amount={getUnitPriceAtQuantity(\n                  product.quantity_pricing,\n                  quantity,\n                  parsePrice(product.default_price),\n                )}\n                currency={currency}\n                className=\"font-medium text-foreground\"\n              />{\" \"}\n              ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteIsReady}\n            aria-describedby={validationMessage ? CUSTOMIZER_VALIDATION_ID : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? (\n              \"Added\"\n            ) : !quoteEnabled ? (\n              (submitLabel ?? \"Add to Cart\")\n            ) : !quoteIsReady ? (\n              quoteError ? (\n                QUOTE_UNAVAILABLE_MESSAGE\n              ) : (\n                QUOTE_LOADING_MESSAGE\n              )\n            ) : (\n              <>\n                {submitLabel ?? \"Add to Cart\"} &middot;{\" \"}\n                <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/search-input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "search-input.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Input } from \"@base-ui/react/input\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { useSearch } from \"@cimplify/sdk/react\";\nimport type { UseSearchOptions } from \"@cimplify/sdk/react\";\nimport { prefetchProduct } from \"./hooks/use-product\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatPrice } from \"@cimplify/sdk\";\n\nexport interface SearchInputClassNames {\n  root?: string;\n  input?: string;\n  clearButton?: string;\n  results?: string;\n  resultItem?: string;\n  empty?: string;\n  loading?: string;\n  resultImage?: string;\n  resultName?: string;\n  resultPrice?: string;\n  categoryFilter?: string;\n}\n\nexport interface SearchInputProps {\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Search options forwarded to useSearch. */\n  searchOptions?: UseSearchOptions;\n  /** Called when a product result is clicked. */\n  onResultClick?: (product: Product) => void;\n  /** Custom result item renderer. */\n  renderResult?: (product: Product) => React.ReactNode;\n  /** Show inline results dropdown. Default: true. */\n  showResults?: boolean;\n  /** Optional category ID to scope search results. */\n  categoryId?: string;\n  /** Display name for the active category filter. */\n  categoryName?: string;\n  className?: string;\n  classNames?: SearchInputClassNames;\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    data-cimplify-search-icon\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n);\n\n/**\n * SearchInput — search bar with debounced results dropdown.\n *\n * Wraps `useSearch` with a controlled input and optional inline results list.\n * Uses Base UI Field.Root + Input for accessible form semantics.\n */\nexport function SearchInput({\n  placeholder = \"Search products...\",\n  searchOptions,\n  onResultClick,\n  renderResult,\n  showResults = true,\n  categoryId,\n  categoryName,\n  className,\n  classNames,\n}: SearchInputProps): React.ReactElement {\n  const mergedOptions = useMemo<UseSearchOptions>(\n    () => (categoryId ? { ...searchOptions, category: categoryId } : searchOptions ?? {}),\n    [searchOptions, categoryId],\n  );\n  const { results, isLoading, query, setQuery, clear } = useSearch(mergedOptions);\n\n  const context = useOptionalCimplifyClient();\n  const warmResult = useCallback(\n    (product: Product) => {\n      const client = mergedOptions.client ?? context?.client;\n      if (!client || context?.prefetch.mode === \"off\") return;\n      speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    },\n    [mergedOptions.client, context],\n  );\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <Field.Root\n      data-cimplify-search\n      className={cn(className, classNames?.root)}\n      style={{ position: \"relative\" }}\n    >\n      <Field.Label className=\"sr-only\">Search products</Field.Label>\n\n      <div style={{ position: \"relative\", display: \"flex\", alignItems: \"center\" }}>\n        <span\n          data-cimplify-search-icon-wrapper\n          style={{\n            position: \"absolute\",\n            left: \"0.5rem\",\n            pointerEvents: \"none\",\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <SearchIcon />\n        </span>\n\n        <Input\n          type=\"search\"\n          value={query}\n          onValueChange={handleValueChange}\n          placeholder={placeholder}\n          data-cimplify-search-input\n          className={classNames?.input}\n        />\n\n        {query.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            data-cimplify-search-clear\n            className={classNames?.clearButton}\n            aria-label=\"Clear search\"\n          >\n            &times;\n          </button>\n        )}\n      </div>\n\n      {categoryId && (\n        <div data-cimplify-search-category-filter className={classNames?.categoryFilter}>\n          Filtered by: {categoryName || categoryId}\n        </div>\n      )}\n\n      {showResults && query.length > 0 && (\n        <div data-cimplify-search-results className={classNames?.results}>\n          {isLoading && (\n            <div data-cimplify-search-loading className={classNames?.loading} aria-busy=\"true\">\n              Searching...\n            </div>\n          )}\n\n          {!isLoading && results.length === 0 && query.length >= 2 && (\n            <div data-cimplify-search-empty className={classNames?.empty}>\n              No results found\n            </div>\n          )}\n\n          {!isLoading &&\n            results.map((product) => (\n              <button\n                key={product.id}\n                type=\"button\"\n                onClick={() => onResultClick?.(product)}\n                onPointerEnter={() => warmResult(product)}\n                onFocus={() => warmResult(product)}\n                data-cimplify-search-result\n                className={classNames?.resultItem}\n                style={!renderResult ? { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\", width: \"100%\" } : undefined}\n              >\n                {renderResult ? (\n                  renderResult(product)\n                ) : (\n                  <>\n                    {(product.images?.[0] || product.image_url) && (\n                      <img\n                        src={product.images?.[0] || product.image_url}\n                        alt=\"\"\n                        data-cimplify-search-result-image\n                        className={classNames?.resultImage}\n                        style={{ width: \"2rem\", height: \"2rem\", objectFit: \"cover\", borderRadius: \"0.25rem\", flexShrink: 0 }}\n                      />\n                    )}\n                    <span data-cimplify-search-result-name className={classNames?.resultName} style={{ flex: 1, textAlign: \"left\" }}>\n                      {product.name}\n                    </span>\n                    {product.default_price !== undefined && (\n                      <span data-cimplify-search-result-price className={classNames?.resultPrice} style={{ flexShrink: 0 }}>\n                        {formatPrice(product.default_price)}\n                      </span>\n                    )}\n                  </>\n                )}\n              </button>\n            ))}\n        </div>\n      )}\n    </Field.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Input } from \"@base-ui/react/input\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { useSearch } from \"@cimplify/sdk/react\";\nimport type { UseSearchOptions } from \"@cimplify/sdk/react\";\nimport { prefetchProduct } from \"./hooks/use-product\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\n\nexport interface SearchInputClassNames {\n  root?: string;\n  input?: string;\n  clearButton?: string;\n  results?: string;\n  resultItem?: string;\n  empty?: string;\n  loading?: string;\n  resultImage?: string;\n  resultName?: string;\n  resultPrice?: string;\n  categoryFilter?: string;\n}\n\nexport interface SearchInputProps {\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Search options forwarded to useSearch. */\n  searchOptions?: UseSearchOptions;\n  /** Called when a product result is clicked. */\n  onResultClick?: (product: Product) => void;\n  /** Custom result item renderer. */\n  renderResult?: (product: Product) => React.ReactNode;\n  /** Show inline results dropdown. Default: true. */\n  showResults?: boolean;\n  /** Optional category ID to scope search results. */\n  categoryId?: string;\n  /** Display name for the active category filter. */\n  categoryName?: string;\n  className?: string;\n  classNames?: SearchInputClassNames;\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    data-cimplify-search-icon\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n);\n\n/**\n * SearchInput — search bar with debounced results dropdown.\n *\n * Wraps `useSearch` with a controlled input and optional inline results list.\n * Uses Base UI Field.Root + Input for accessible form semantics.\n */\nexport function SearchInput({\n  placeholder = \"Search products...\",\n  searchOptions,\n  onResultClick,\n  renderResult,\n  showResults = true,\n  categoryId,\n  categoryName,\n  className,\n  classNames,\n}: SearchInputProps): React.ReactElement {\n  const mergedOptions = useMemo<UseSearchOptions>(\n    () => (categoryId ? { ...searchOptions, category: categoryId } : (searchOptions ?? {})),\n    [searchOptions, categoryId],\n  );\n  const { results, isLoading, query, setQuery, clear } = useSearch(mergedOptions);\n\n  const context = useOptionalCimplifyClient();\n  const warmResult = useCallback(\n    (product: Product) => {\n      const client = mergedOptions.client ?? context?.client;\n      if (!client || context?.prefetch.mode === \"off\") return;\n      speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    },\n    [mergedOptions.client, context],\n  );\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <Field.Root\n      data-cimplify-search\n      className={cn(className, classNames?.root)}\n      style={{ position: \"relative\" }}\n    >\n      <Field.Label className=\"sr-only\">Search products</Field.Label>\n\n      <div style={{ position: \"relative\", display: \"flex\", alignItems: \"center\" }}>\n        <span\n          data-cimplify-search-icon-wrapper\n          style={{\n            position: \"absolute\",\n            left: \"0.5rem\",\n            pointerEvents: \"none\",\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <SearchIcon />\n        </span>\n\n        <Input\n          type=\"search\"\n          value={query}\n          onValueChange={handleValueChange}\n          placeholder={placeholder}\n          data-cimplify-search-input\n          className={classNames?.input}\n        />\n\n        {query.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            data-cimplify-search-clear\n            className={classNames?.clearButton}\n            aria-label=\"Clear search\"\n          >\n            &times;\n          </button>\n        )}\n      </div>\n\n      {categoryId && (\n        <div data-cimplify-search-category-filter className={classNames?.categoryFilter}>\n          Filtered by: {categoryName || categoryId}\n        </div>\n      )}\n\n      {showResults && query.length > 0 && (\n        <div data-cimplify-search-results className={classNames?.results}>\n          {isLoading && (\n            <div data-cimplify-search-loading className={classNames?.loading} aria-busy=\"true\">\n              Searching...\n            </div>\n          )}\n\n          {!isLoading && results.length === 0 && query.length >= 2 && (\n            <div data-cimplify-search-empty className={classNames?.empty}>\n              No results found\n            </div>\n          )}\n\n          {!isLoading &&\n            results.map((product) => (\n              <button\n                key={product.id}\n                type=\"button\"\n                onClick={() => onResultClick?.(product)}\n                onPointerEnter={() => warmResult(product)}\n                onFocus={() => warmResult(product)}\n                data-cimplify-search-result\n                className={classNames?.resultItem}\n                style={\n                  !renderResult\n                    ? { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\", width: \"100%\" }\n                    : undefined\n                }\n              >\n                {renderResult ? (\n                  renderResult(product)\n                ) : (\n                  <>\n                    {(product.images?.[0] || product.image_url) && (\n                      <img\n                        src={product.images?.[0] || product.image_url}\n                        alt=\"\"\n                        data-cimplify-search-result-image\n                        className={classNames?.resultImage}\n                        style={{\n                          width: \"2rem\",\n                          height: \"2rem\",\n                          objectFit: \"cover\",\n                          borderRadius: \"0.25rem\",\n                          flexShrink: 0,\n                        }}\n                      />\n                    )}\n                    <span\n                      data-cimplify-search-result-name\n                      className={classNames?.resultName}\n                      style={{ flex: 1, textAlign: \"left\" }}\n                    >\n                      {product.name}\n                    </span>\n                    {product.default_price !== undefined && (\n                      <span\n                        data-cimplify-search-result-price\n                        className={classNames?.resultPrice}\n                        style={{ flexShrink: 0 }}\n                      >\n                        <Price\n                          amount={product.default_price}\n                          currency={getProductCurrency(product)}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n              </button>\n            ))}\n        </div>\n      )}\n    </Field.Root>\n  );\n}\n"
     }
   ]
 }

package/dist/chunk-2LKAOU3L.mjs

@@ -1,96 +0,0 @@
-import { GameError } from './chunk-XJIHN3BY.mjs';
-
-// src/game/backends/engine/split.ts
-var PLACEHOLDER_NAMESPACE = "placeholder.deferred", PRIMARY_NAMESPACE = "primary", MAX_REST_BYTES = 16 * 1024 * 1024, LANE_LINK_WAIT_MS = 2e3, LANE_STATE = 0, LANE_LENGTH = 1, LANE_HEADER_WORDS = 2, LANE_PUBLISHED = 1;
-function placeholders(module) {
-  return WebAssembly.Module.imports(module).filter((i) => i.module === PLACEHOLDER_NAMESPACE).length;
-}
-var DeferredEngine = class _DeferredEngine {
-  constructor(slots, code) {
-    this.slots = slots;
-    this.code = code;
-    this.table = null;
-    this.linked = false;
-    this.arrived = null;
-    this.exports = null;
-    this.shared = null;
-    this.published = null;
-    /** Settles once the rest of the code is linked asynchronously. */
-    this.linking = Promise.resolve();
-    /** Placeholder calls: each one is a deferred function reached before the rest was linked. */
-    this.hits = 0;
-    /** Placeholder calls that had to fetch or compile the rest synchronously. */
-    this.blocked = 0;
-  }
-  /** A linker for `module`, or null when the module is not split. */
-  static of(module, code) {
-    let slots = placeholders(module);
-    if (slots === 0) return null;
-    if (code == null) throw new GameError("not_initialized", "a split engine core needs the rest of its code");
-    return new _DeferredEngine(slots, code);
-  }
-  get ready() {
-    return this.linked;
-  }
-  imports() {
-    let out = {};
-    for (let i = 0; i < this.slots; i++) out[String(i)] = (...args) => this.call(i, args);
-    return out;
-  }
-  /** The handoff for worker lanes, created on first use; the rest is published into it as soon as it is known. */
-  lanes() {
-    return this.shared === null && (this.shared = { header: new Int32Array(new SharedArrayBuffer((2) * Int32Array.BYTES_PER_ELEMENT)), bytes: new SharedArrayBuffer(MAX_REST_BYTES), slots: this.slots }, this.published !== null && this.publish(this.published)), this.shared;
-  }
-  publish(bytes) {
-    this.published = bytes;
-    let lanes = this.shared;
-    if (!(lanes === null || Atomics.load(lanes.header, (0)) === (1))) {
-      if (bytes.length > lanes.bytes.byteLength) throw new GameError("capacity_exceeded", `the rest of the engine is ${bytes.length} bytes, past the ${MAX_REST_BYTES} lanes can take`);
-      new Uint8Array(lanes.bytes).set(bytes), Atomics.store(lanes.header, (1), bytes.length), Atomics.store(lanes.header, (0), (1)), Atomics.notify(lanes.header, (0));
-    }
-  }
-  remember(source) {
-    source instanceof WebAssembly.Module || this.publish(source instanceof Uint8Array ? source : ArrayBuffer.isView(source) ? new Uint8Array(source.buffer, source.byteOffset, source.byteLength) : new Uint8Array(source));
-  }
-  /** Binds the instantiated core and starts linking the rest when it arrives. */
-  bind(instance) {
-    this.exports = instance.exports;
-    for (let value of Object.values(instance.exports))
-      value instanceof WebAssembly.Table && value.length === this.slots && (this.table = value);
-    if (this.table === null) throw new GameError("not_initialized", "the split engine core exports no placeholder table");
-    return this.linking = this.code.rest.then(async (arrival) => {
-      let compiling = arrival instanceof WebAssembly.Module || !("compiled" in arrival) ? null : arrival, source = compiling === null ? arrival : compiling.bytes;
-      if (this.arrived = source, this.remember(source), this.linked) return;
-      let module = source instanceof WebAssembly.Module ? source : await (compiling?.compiled.catch(() => WebAssembly.compile(source)) ?? WebAssembly.compile(source));
-      this.linked || (await WebAssembly.instantiate(module, this.restImports()), this.linked = true);
-    }), this.linking;
-  }
-  restImports() {
-    return { [PRIMARY_NAMESPACE]: this.exports };
-  }
-  /** Links synchronously, for a deferred call that cannot wait; browsers allow it on the main thread only below 8 MB. */
-  link(module) {
-    new WebAssembly.Instance(module, this.restImports()), this.linked = true;
-  }
-  linkNow(slot) {
-    this.blocked++;
-    let source = this.arrived ?? this.code.fetchSync?.() ?? null;
-    if (source === null) throw new GameError("not_initialized", `deferred engine code (placeholder ${slot}) ran before the rest of the engine arrived`);
-    this.remember(source), this.link(source instanceof WebAssembly.Module ? source : new WebAssembly.Module(source));
-  }
-  call(slot, args) {
-    return this.hits++, this.linked || this.linkNow(slot), this.table.get(slot)(...args);
-  }
-};
-function restArrival(fetchSync = null) {
-  let arrive = () => {
-  }, rest = new Promise((resolve) => {
-    arrive = resolve;
-  });
-  return {
-    code: fetchSync === null ? { rest } : { rest, fetchSync },
-    arrive: (bytes, compiled = null) => arrive(compiled === null ? bytes : { bytes, compiled })
-  };
-}
-
-export { DeferredEngine, LANE_LENGTH, LANE_LINK_WAIT_MS, LANE_STATE, PLACEHOLDER_NAMESPACE, PRIMARY_NAMESPACE, restArrival };

package/dist/chunk-UWPQL2IQ.js

@@ -1,104 +0,0 @@
-'use strict';
-
-var chunk2V7IL4HC_js = require('./chunk-2V7IL4HC.js');
-
-// src/game/backends/engine/split.ts
-var PLACEHOLDER_NAMESPACE = "placeholder.deferred", PRIMARY_NAMESPACE = "primary", MAX_REST_BYTES = 16 * 1024 * 1024, LANE_LINK_WAIT_MS = 2e3, LANE_STATE = 0, LANE_LENGTH = 1, LANE_HEADER_WORDS = 2, LANE_PUBLISHED = 1;
-function placeholders(module) {
-  return WebAssembly.Module.imports(module).filter((i) => i.module === PLACEHOLDER_NAMESPACE).length;
-}
-var DeferredEngine = class _DeferredEngine {
-  constructor(slots, code) {
-    this.slots = slots;
-    this.code = code;
-    this.table = null;
-    this.linked = false;
-    this.arrived = null;
-    this.exports = null;
-    this.shared = null;
-    this.published = null;
-    /** Settles once the rest of the code is linked asynchronously. */
-    this.linking = Promise.resolve();
-    /** Placeholder calls: each one is a deferred function reached before the rest was linked. */
-    this.hits = 0;
-    /** Placeholder calls that had to fetch or compile the rest synchronously. */
-    this.blocked = 0;
-  }
-  /** A linker for `module`, or null when the module is not split. */
-  static of(module, code) {
-    let slots = placeholders(module);
-    if (slots === 0) return null;
-    if (code == null) throw new chunk2V7IL4HC_js.GameError("not_initialized", "a split engine core needs the rest of its code");
-    return new _DeferredEngine(slots, code);
-  }
-  get ready() {
-    return this.linked;
-  }
-  imports() {
-    let out = {};
-    for (let i = 0; i < this.slots; i++) out[String(i)] = (...args) => this.call(i, args);
-    return out;
-  }
-  /** The handoff for worker lanes, created on first use; the rest is published into it as soon as it is known. */
-  lanes() {
-    return this.shared === null && (this.shared = { header: new Int32Array(new SharedArrayBuffer((2) * Int32Array.BYTES_PER_ELEMENT)), bytes: new SharedArrayBuffer(MAX_REST_BYTES), slots: this.slots }, this.published !== null && this.publish(this.published)), this.shared;
-  }
-  publish(bytes) {
-    this.published = bytes;
-    let lanes = this.shared;
-    if (!(lanes === null || Atomics.load(lanes.header, (0)) === (1))) {
-      if (bytes.length > lanes.bytes.byteLength) throw new chunk2V7IL4HC_js.GameError("capacity_exceeded", `the rest of the engine is ${bytes.length} bytes, past the ${MAX_REST_BYTES} lanes can take`);
-      new Uint8Array(lanes.bytes).set(bytes), Atomics.store(lanes.header, (1), bytes.length), Atomics.store(lanes.header, (0), (1)), Atomics.notify(lanes.header, (0));
-    }
-  }
-  remember(source) {
-    source instanceof WebAssembly.Module || this.publish(source instanceof Uint8Array ? source : ArrayBuffer.isView(source) ? new Uint8Array(source.buffer, source.byteOffset, source.byteLength) : new Uint8Array(source));
-  }
-  /** Binds the instantiated core and starts linking the rest when it arrives. */
-  bind(instance) {
-    this.exports = instance.exports;
-    for (let value of Object.values(instance.exports))
-      value instanceof WebAssembly.Table && value.length === this.slots && (this.table = value);
-    if (this.table === null) throw new chunk2V7IL4HC_js.GameError("not_initialized", "the split engine core exports no placeholder table");
-    return this.linking = this.code.rest.then(async (arrival) => {
-      let compiling = arrival instanceof WebAssembly.Module || !("compiled" in arrival) ? null : arrival, source = compiling === null ? arrival : compiling.bytes;
-      if (this.arrived = source, this.remember(source), this.linked) return;
-      let module = source instanceof WebAssembly.Module ? source : await (compiling?.compiled.catch(() => WebAssembly.compile(source)) ?? WebAssembly.compile(source));
-      this.linked || (await WebAssembly.instantiate(module, this.restImports()), this.linked = true);
-    }), this.linking;
-  }
-  restImports() {
-    return { [PRIMARY_NAMESPACE]: this.exports };
-  }
-  /** Links synchronously, for a deferred call that cannot wait; browsers allow it on the main thread only below 8 MB. */
-  link(module) {
-    new WebAssembly.Instance(module, this.restImports()), this.linked = true;
-  }
-  linkNow(slot) {
-    this.blocked++;
-    let source = this.arrived ?? this.code.fetchSync?.() ?? null;
-    if (source === null) throw new chunk2V7IL4HC_js.GameError("not_initialized", `deferred engine code (placeholder ${slot}) ran before the rest of the engine arrived`);
-    this.remember(source), this.link(source instanceof WebAssembly.Module ? source : new WebAssembly.Module(source));
-  }
-  call(slot, args) {
-    return this.hits++, this.linked || this.linkNow(slot), this.table.get(slot)(...args);
-  }
-};
-function restArrival(fetchSync = null) {
-  let arrive = () => {
-  }, rest = new Promise((resolve) => {
-    arrive = resolve;
-  });
-  return {
-    code: fetchSync === null ? { rest } : { rest, fetchSync },
-    arrive: (bytes, compiled = null) => arrive(compiled === null ? bytes : { bytes, compiled })
-  };
-}
-
-exports.DeferredEngine = DeferredEngine;
-exports.LANE_LENGTH = (1);
-exports.LANE_LINK_WAIT_MS = (2e3);
-exports.LANE_STATE = (0);
-exports.PLACEHOLDER_NAMESPACE = PLACEHOLDER_NAMESPACE;
-exports.PRIMARY_NAMESPACE = PRIMARY_NAMESPACE;
-exports.restArrival = restArrival;