@cimplify/sdk 0.89.0 → 0.92.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  useEffect,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatWidgetStarter } from \"../types/support\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\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  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName = \"Support\",\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  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [unread, setUnread] = useState(0);\n\n  const { messages, isLoading, isSending, error, isActive, send, startConversation } =\n    useChat({ client, starters, pollInterval });\n\n  const prevCountRef = useRef(messages.length);\n\n  // Track unread when panel is closed\n  useEffect(() => {\n    if (!open && messages.length > prevCountRef.current) {\n      const newMessages = messages.slice(prevCountRef.current);\n      const incomingCount = newMessages.filter(\n        (m) => m.sender_type !== \"customer\",\n      ).length;\n      if (incomingCount > 0) setUnread((n) => n + incomingCount);\n    }\n    prevCountRef.current = messages.length;\n  }, [messages, open]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    setUnread(0);\n  }, []);\n\n  const handleClose = useCallback(() => setOpen(false), []);\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          businessName={businessName}\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          placeholder={placeholder}\n          messages={messages}\n          isLoading={isLoading}\n          isSending={isSending}\n          error={error}\n          isActive={isActive}\n          isLeft={isLeft}\n          onClose={handleClose}\n          onSend={send}\n          onStartConversation={startConversation}\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-red-500 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  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  error,\n  isActive,\n  isLeft,\n  onClose,\n  onSend,\n  onStartConversation,\n  classNames,\n}: {\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  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  onClose: () => void;\n  onSend: (content: string) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<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        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          isLoading={isLoading}\n          isSending={isSending}\n          className={classNames?.messages}\n        />\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-red-200 bg-red-50 px-4 py-2 text-xs text-red-600\">\n          Something went wrong. Please try again.\n        </div>\n      )}\n\n      {/* Input — shown once conversation is active or loading */}\n      {(isActive || isLoading) && (\n        <ChatInput\n          placeholder={placeholder}\n          isSending={isSending}\n          onSend={onSend}\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  onClose,\n  className,\n}: {\n  businessName: string;\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-white/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        <div className=\"flex items-center gap-1.5 text-xs text-white/60\">\n          <span className=\"h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400\" />\n          Online\n        </div>\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-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white\",\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\nfunction MessageList({\n  messages,\n  isLoading,\n  isSending,\n  className,\n}: {\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  className?: string;\n}) {\n  const bottomRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [messages.length, isSending]);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col gap-1 overflow-y-auto bg-muted/50 px-5 py-5\",\n        className,\n      )}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {messages.map((msg, i) => {\n        const isCustomer = msg.sender_type === \"customer\";\n        const prev = messages[i - 1];\n        const sameSenderAsPrev = prev?.sender_type === msg.sender_type;\n        const isOptimistic = msg.id.startsWith(\"opt_\");\n\n        return (\n          <div key={msg.id}>\n            {!sameSenderAsPrev && i > 0 && <div className=\"h-3\" />}\n            <div\n              className={cn(\n                \"flex max-w-[85%]\",\n                isCustomer ? \"ml-auto\" : \"mr-auto\",\n              )}\n            >\n              <div\n                className={cn(\n                  \"rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed\",\n                  isCustomer\n                    ? \"bg-foreground text-background\"\n                    : \"border border-border bg-background text-foreground\",\n                  isCustomer\n                    ? sameSenderAsPrev\n                      ? \"rounded-tr\"\n                      : \"rounded-br\"\n                    : sameSenderAsPrev\n                      ? \"rounded-tl\"\n                      : \"rounded-bl\",\n                  isOptimistic && \"opacity-70\",\n                )}\n              >\n                {!isCustomer && !sameSenderAsPrev && (\n                  <span className=\"mb-1 inline-flex items-center gap-1 rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-600\">\n                    <SparkleIcon className=\"h-[11px] w-[11px]\" />\n                    AI\n                  </span>\n                )}\n                <div className=\"whitespace-pre-wrap\">{msg.content}</div>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\n        </div>\n      )}\n\n      <div ref={bottomRef} />\n    </div>\n  );\n}\n\n/* ─── Input ───────────────────────────────────────────────── */\n\nfunction ChatInput({\n  placeholder,\n  isSending,\n  onSend,\n  className,\n}: {\n  placeholder: string;\n  isSending: boolean;\n  onSend: (content: string) => Promise<void>;\n  className?: string;\n}) {\n  const [value, setValue] = useState(\"\");\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const handleSend = useCallback(() => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    onSend(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      <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 SparkleIcon({ 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.5}\n    >\n      <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\" />\n    </svg>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatUploadAttachment, ChatWidgetStarter } from \"../types/support\";\nimport { ChatMarkdown } from \"./chat-markdown\";\nimport { partitionMessages } from \"./chat-model\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\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  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName = \"Support\",\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  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [readCount, setReadCount] = useState(0);\n\n  const {\n    messages,\n    isLoading,\n    isSending,\n    awaitingReply,\n    seenAt,\n    error,\n    isActive,\n    claimedAs,\n    signOut,\n    send,\n    react,\n    startConversation,\n  } = useChat({ client, starters, pollInterval });\n  const showTyping = isSending || awaitingReply;\n\n  const attachPhoto = useCallback(\n    async (file: File) => {\n      if (!client || !file.type.startsWith(\"image/\") || file.size > 5 * 1024 * 1024) return;\n      const uploaded = await client.uploads.upload(file);\n      if (!uploaded.ok) return;\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  // Unread badge: derived in render as \"incoming messages since the panel\n  // closed\" — the close handler snapshots the count, no effect needed.\n  const unread = open\n    ? 0\n    : messages.slice(readCount).filter((m) => m.sender_type !== \"customer\").length;\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setReadCount(messages.length);\n    setOpen(false);\n  }, [messages.length]);\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          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          error={error}\n          isActive={isActive}\n          isLeft={isLeft}\n          claimedAs={claimedAs}\n          onSignOut={() => void signOut()}\n          onClose={handleClose}\n          onSend={send}\n          onReact={react}\n          onAttach={attachPhoto}\n          onStartConversation={startConversation}\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-red-500 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  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  isTyping,\n  seenAt,\n  error,\n  isActive,\n  isLeft,\n  claimedAs,\n  onSignOut,\n  onClose,\n  onSend,\n  onReact,\n  onAttach,\n  onStartConversation,\n  classNames,\n}: {\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  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  onSend: (content: string) => Promise<unknown>;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onAttach: (file: File) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<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          isLoading={isLoading}\n          isSending={isTyping}\n          seenAt={seenAt}\n          onReact={onReact}\n          className={classNames?.messages}\n        />\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-red-200 bg-red-50 px-4 py-2 text-xs text-red-600\">\n          Something went wrong. Please try again.\n        </div>\n      )}\n\n      {/* Input — shown once conversation is active or loading */}\n      {(isActive || isLoading) && (\n        <ChatInput\n          placeholder={placeholder}\n          isSending={isSending}\n          onSend={onSend}\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-white/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-white/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-white\"\n            >\n              Not you?\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1.5 text-xs text-white/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-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white\",\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 lastSeenCustomerMessageId(\n  bubbles: ChatMessage[],\n  seenAt: string | null,\n): string | null {\n  if (!seenAt || !bubbles.some((m) => m.sender_type === \"agent\")) return null;\n  for (let i = bubbles.length - 1; i >= 0; i--) {\n    if (bubbles[i].sender_type !== \"customer\") continue;\n    return bubbles[i].created_at <= seenAt ? bubbles[i].id : null;\n  }\n  return null;\n}\n\nfunction MessageList({\n  messages,\n  isLoading,\n  isSending,\n  seenAt,\n  onReact,\n  className,\n}: {\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  seenAt: string | null;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  className?: string;\n}) {\n  const { bubbles, reactionsByTarget } = partitionMessages(messages);\n  const seenMessageId = lastSeenCustomerMessageId(bubbles, seenAt);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col gap-1 overflow-y-auto bg-muted/50 px-5 py-5\",\n        className,\n      )}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {bubbles.map((msg, i) => {\n        const isCustomer = msg.sender_type === \"customer\";\n        const prev = bubbles[i - 1];\n        const sameSenderAsPrev = prev?.sender_type === msg.sender_type;\n        const isOptimistic = msg.id.startsWith(\"opt_\");\n        const reactions = reactionsByTarget.get(msg.id);\n\n        return (\n          <div key={msg.id}>\n            {!sameSenderAsPrev && i > 0 && <div className=\"h-3\" />}\n            <div\n              className={cn(\n                \"group relative flex max-w-[85%]\",\n                isCustomer ? \"ml-auto\" : \"mr-auto\",\n              )}\n            >\n              {!isCustomer && !isOptimistic && (\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(msg, 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                </div>\n              )}\n              <div\n                className={cn(\n                  \"rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed\",\n                  isCustomer\n                    ? \"bg-foreground text-background\"\n                    : \"border border-border bg-background text-foreground\",\n                  isCustomer\n                    ? sameSenderAsPrev\n                      ? \"rounded-tr\"\n                      : \"rounded-br\"\n                    : sameSenderAsPrev\n                      ? \"rounded-tl\"\n                      : \"rounded-bl\",\n                  isOptimistic && \"opacity-70\",\n                )}\n              >\n                {!isCustomer && !sameSenderAsPrev && (\n                  <span className=\"mb-1 inline-flex items-center gap-1 rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-600\">\n                    <SparkleIcon className=\"h-[11px] w-[11px]\" />\n                    AI\n                  </span>\n                )}\n                {msg.reply_to && (\n                  <div\n                    className={cn(\n                      \"mb-1.5 flex gap-1.5 rounded-lg px-2 py-1 text-xs\",\n                      isCustomer ? \"bg-background/15\" : \"bg-muted\",\n                    )}\n                  >\n                    <span\n                      className={cn(\n                        \"w-[3px] shrink-0 self-stretch rounded-full\",\n                        isCustomer ? \"bg-background/40\" : \"bg-muted-foreground/40\",\n                      )}\n                    />\n                    <span className=\"min-w-0 truncate opacity-80\">{msg.reply_to.preview}</span>\n                  </div>\n                )}\n                {msg.attachments.length > 0 && (\n                  <div className={cn(\"flex flex-wrap gap-1.5\", msg.content && \"mb-1.5\")}>\n                    {msg.attachments.map((attachment, index) =>\n                      attachment.mime_type?.startsWith(\"image/\") ? (\n                        <a key={index} href={attachment.url} target=\"_blank\" rel=\"noreferrer\">\n                          <img\n                            src={attachment.url}\n                            alt={attachment.filename ?? \"Photo\"}\n                            loading=\"lazy\"\n                            className=\"max-h-48 max-w-full rounded-lg object-cover\"\n                          />\n                        </a>\n                      ) : (\n                        <a\n                          key={index}\n                          href={attachment.url}\n                          target=\"_blank\"\n                          rel=\"noreferrer\"\n                          className=\"truncate text-xs underline\"\n                        >\n                          {attachment.filename ?? \"Attachment\"}\n                        </a>\n                      ),\n                    )}\n                  </div>\n                )}\n                {isCustomer ? (\n                  msg.content && <div className=\"whitespace-pre-wrap\">{msg.content}</div>\n                ) : (\n                  <ChatMarkdown\n                    text={msg.content}\n                    className=\"[&_p]:my-0 [&_p+p]:mt-1.5 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5 [&_h1]:text-sm [&_h1]:font-bold [&_h2]:text-sm [&_h2]:font-bold [&_h3]:text-sm [&_h3]:font-semibold [&_hr]:my-2 [&_table]:my-1 [&_table]:w-full [&_th]:pb-1 [&_th]:text-left [&_th]:text-[10px] [&_th]:font-semibold [&_th]:uppercase [&_td]:py-1 [&_td:last-child]:text-right [&_td:last-child]:font-semibold [&_td:last-child]:tabular-nums [&_a]:underline\"\n                  />\n                )}\n              </div>\n            </div>\n            {reactions && reactions.length > 0 && (\n              <div className={cn(\"mt-0.5 flex gap-1\", isCustomer ? \"justify-end\" : \"justify-start\")}>\n                {reactions.map((reaction) => (\n                  <span\n                    key={reaction.id}\n                    className=\"rounded-full border border-border bg-background px-1.5 py-0.5 text-xs shadow-sm\"\n                  >\n                    {reaction.content}\n                  </span>\n                ))}\n              </div>\n            )}\n            {msg.id === seenMessageId && (\n              <div className=\"mt-0.5 text-right text-[10px] font-medium text-muted-foreground\">\n                Seen\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\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 without an effect.\n          node?.scrollIntoView({ behavior: \"smooth\" });\n        }}\n      />\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<unknown>;\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(() => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    onSend(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=\"image/*\"\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 SparkleIcon({ 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.5}\n    >\n      <path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\" />\n    </svg>\n  );\n}\n"
     }
   ]
 }

package/registry/customer-input-fields.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "customer-input-fields.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport { INPUT_FIELD_TYPE, type AddressValue, type DateRangeValue, type LocationValue, type PhoneValue, type ProductInputField, type SignatureValue } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { DatePicker } from \"./date-picker\";\nimport { TimePicker } from \"./time-picker\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CustomerInputFieldsClassNames {\n  root?: string;\n  field?: string;\n  label?: string;\n  required?: string;\n  helpText?: string;\n  input?: string;\n  select?: string;\n  textarea?: string;\n  fileInput?: string;\n  colorInput?: string;\n  radioGroup?: string;\n  radioOption?: string;\n  checkboxLabel?: string;\n  priceAdjustment?: string;\n  addressInput?: string;\n  phoneInput?: string;\n  signatureCanvas?: string;\n  multiSelectGroup?: string;\n  multiSelectOption?: string;\n  dateRangeInput?: string;\n  locationInput?: string;\n}\n\nexport interface CustomerInputFieldsProps {\n  fields: ProductInputField[];\n  values: Record<string, unknown>;\n  onChange: (values: Record<string, unknown>) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  currency?: CurrencyCode;\n  className?: string;\n  classNames?: CustomerInputFieldsClassNames;\n}\n\nexport function CustomerInputFields({\n  fields,\n  values,\n  onChange,\n  onFileUpload,\n  currency,\n  className,\n  classNames,\n}: CustomerInputFieldsProps): React.ReactElement | null {\n  const clientContext = useOptionalCimplifyClient();\n\n  if (fields.length === 0) return null;\n\n  const sorted = [...fields].sort((a, b) => a.display_order - b.display_order);\n\n  const setValue = useCallback(\n    (fieldId: string, value: unknown) => {\n      onChange({ ...values, [fieldId]: value });\n    },\n    [values, onChange],\n  );\n\n  const defaultFileUpload = useCallback(\n    async (file: File): Promise<string> => {\n      if (onFileUpload) return onFileUpload(file, {} as ProductInputField);\n      if (!clientContext?.client) throw new Error(\"No upload provider available\");\n      const result = await clientContext.client.uploads.upload(file);\n      if (!result.ok) throw new Error(result.error.message);\n      return result.value.url;\n    },\n    [onFileUpload, clientContext],\n  );\n\n  return (\n    <div data-cimplify-customer-inputs className={cn(\"space-y-4\", className, classNames?.root)}>\n      {sorted.map((field) => (\n        <InputField\n          key={field.id}\n          field={field}\n          value={values[field.id]}\n          onValueChange={(value) => setValue(field.id, value)}\n          onFileUpload={onFileUpload ?? (clientContext?.client ? (_file, _field) => defaultFileUpload(_file) : undefined)}\n          currency={currency}\n          classNames={classNames}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction InputField({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  currency,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  currency?: CurrencyCode;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const hasPriceAdjustment = field.price_adjustment != null && parsePrice(field.price_adjustment) > 0;\n\n  return (\n    <div data-cimplify-customer-input data-field-type={field.field_type} className={classNames?.field}>\n      <div className=\"flex items-center gap-2 mb-1.5\">\n        <label className={cn(\"text-sm font-semibold\", classNames?.label)}>\n          {field.name}\n        </label>\n        {field.is_required && (\n          <span className={cn(\"text-xs text-destructive\", classNames?.required)}>Required</span>\n        )}\n        {hasPriceAdjustment && (\n          <span className={cn(\"text-xs text-muted-foreground\", classNames?.priceAdjustment)}>\n            +<Price amount={field.price_adjustment!} currency={currency} />\n          </span>\n        )}\n      </div>\n\n      {field.help_text && (\n        <p className={cn(\"text-xs text-muted-foreground mb-1.5\", classNames?.helpText)}>\n          {field.help_text}\n        </p>\n      )}\n\n      <FieldInput\n        field={field}\n        value={value}\n        onValueChange={onValueChange}\n        onFileUpload={onFileUpload}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n\nfunction FieldInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const inputClass = 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\",\n    classNames?.input,\n  );\n\n  switch (field.field_type) {\n    case INPUT_FIELD_TYPE.Text:\n    case INPUT_FIELD_TYPE.Url:\n      return (\n        <input\n          type={field.field_type === INPUT_FIELD_TYPE.Url ? \"url\" : \"text\"}\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Textarea:\n      return (\n        <textarea\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          rows={3}\n          className={cn(inputClass, \"resize-none\", classNames?.textarea)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Number:\n      return (\n        <input\n          type=\"number\"\n          value={typeof value === \"number\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value ? parseFloat(e.target.value) : undefined)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          min={field.validation?.min_value ?? undefined}\n          max={field.validation?.max_value ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Select:\n      return (\n        <select\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={cn(inputClass, classNames?.select)}\n        >\n          <option value=\"\">{field.placeholder || \"Select...\"}</option>\n          {(field.options || []).map((opt) => (\n            <option key={opt} value={opt}>{opt}</option>\n          ))}\n        </select>\n      );\n\n    case INPUT_FIELD_TYPE.Radio:\n      return (\n        <div className={cn(\"space-y-2\", classNames?.radioGroup)}>\n          {(field.options || []).map((opt) => (\n            <label\n              key={opt}\n              className={cn(\n                \"flex items-center gap-2 text-sm cursor-pointer\",\n                classNames?.radioOption,\n              )}\n            >\n              <input\n                type=\"radio\"\n                name={field.id}\n                value={opt}\n                checked={value === opt}\n                onChange={() => onValueChange(opt)}\n                className=\"accent-primary\"\n              />\n              {opt}\n            </label>\n          ))}\n        </div>\n      );\n\n    case INPUT_FIELD_TYPE.Checkbox:\n      return (\n        <label className={cn(\"flex items-center gap-2 text-sm cursor-pointer\", classNames?.checkboxLabel)}>\n          <input\n            type=\"checkbox\"\n            checked={value === true}\n            onChange={(e) => onValueChange(e.target.checked)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {field.placeholder || field.name}\n        </label>\n      );\n\n    case INPUT_FIELD_TYPE.Color:\n      return (\n        <input\n          type=\"color\"\n          value={typeof value === \"string\" ? value : \"#000000\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          className={cn(\"w-12 h-10 rounded-md border border-input cursor-pointer\", classNames?.colorInput)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Date:\n      return (\n        <DatePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a date\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.File:\n    case INPUT_FIELD_TYPE.Image:\n      return (\n        <FileUploadInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          onFileUpload={onFileUpload}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Email:\n      return (\n        <input\n          type=\"email\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder || \"email@example.com\"}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateTime: {\n      const stringValue = typeof value === \"string\" ? value : \"\";\n      const [datePart, timePartRaw] = stringValue.includes(\"T\")\n        ? stringValue.split(\"T\", 2)\n        : [stringValue, \"\"];\n      const timePart = (timePartRaw ?? \"\").slice(0, 5);\n      const commit = (nextDate: string, nextTime: string): void => {\n        if (!nextDate && !nextTime) {\n          onValueChange(undefined);\n          return;\n        }\n        if (!nextDate) {\n          onValueChange(`${nextTime}`);\n          return;\n        }\n        const combined = `${nextDate}T${nextTime || \"00:00\"}`;\n        const parsed = new Date(combined);\n        onValueChange(Number.isNaN(parsed.getTime()) ? combined : parsed.toISOString());\n      };\n      return (\n        <div className=\"grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2\">\n          <DatePicker\n            value={datePart ?? \"\"}\n            onChange={(next) => commit(next, timePart)}\n            placeholder={field.placeholder ?? \"Select a date\"}\n            aria-label={`${field.name} date`}\n            required={field.is_required}\n          />\n          <TimePicker\n            value={timePart}\n            onChange={(next) => commit(datePart ?? \"\", next)}\n            placeholder=\"Time\"\n            aria-label={`${field.name} time`}\n          />\n        </div>\n      );\n    }\n\n    case INPUT_FIELD_TYPE.Time:\n      return (\n        <TimePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a time\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.MultiSelect:\n      return (\n        <MultiSelectInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateRange:\n      return (\n        <DateRangeInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Address:\n      return (\n        <AddressInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Location:\n      return (\n        <LocationInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Phone:\n      return (\n        <PhoneInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Signature:\n      return (\n        <SignatureInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    default:\n      return (\n        <input\n          type=\"text\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          className={inputClass}\n        />\n      );\n  }\n}\n\nfunction FileUploadInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const [isUploading, setIsUploading] = React.useState(false);\n  const fileUrl = typeof value === \"string\" ? value : undefined;\n  const acceptedFormats = field.validation?.accepted_formats;\n  const accept = acceptedFormats\n    ? acceptedFormats.map((f) => `.${f}`).join(\",\")\n    : field.field_type === INPUT_FIELD_TYPE.Image\n      ? \"image/*\"\n      : undefined;\n\n  const handleFile = async (file: File) => {\n    if (!onFileUpload) return;\n\n    if (field.validation?.max_size_mb) {\n      const maxBytes = field.validation.max_size_mb * 1024 * 1024;\n      if (file.size > maxBytes) {\n        return;\n      }\n    }\n\n    setIsUploading(true);\n    try {\n      const url = await onFileUpload(file, field);\n      onValueChange(url);\n    } finally {\n      setIsUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.fileInput)}>\n      {fileUrl ? (\n        <div className=\"flex items-center gap-3\">\n          {field.field_type === INPUT_FIELD_TYPE.Image && (\n            <img src={fileUrl} alt=\"Uploaded\" className=\"w-16 h-16 object-cover rounded-md border border-border\" />\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm text-foreground truncate\">{fileUrl.split(\"/\").pop()}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onValueChange(undefined)}\n            className=\"text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Remove\n          </button>\n        </div>\n      ) : (\n        <label className=\"flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-primary/40 transition-colors\">\n          <input\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => {\n              const file = e.target.files?.[0];\n              if (file) void handleFile(file);\n            }}\n            className=\"hidden\"\n            disabled={isUploading}\n          />\n          {isUploading ? (\n            <span className=\"text-sm text-muted-foreground\">Uploading...</span>\n          ) : (\n            <>\n              <span className=\"text-sm text-muted-foreground\">\n                {field.placeholder || `Upload ${field.field_type === INPUT_FIELD_TYPE.Image ? \"image\" : \"file\"}`}\n              </span>\n              {acceptedFormats && (\n                <span className=\"text-xs text-muted-foreground/60 mt-1\">\n                  {acceptedFormats.map((f) => f.toUpperCase()).join(\", \")}\n                  {field.validation?.max_size_mb && ` · Max ${field.validation.max_size_mb}MB`}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction MultiSelectInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n  const options = field.options || [];\n  const maxSelections = field.validation?.max_selections;\n\n  const toggle = (opt: string) => {\n    const next = selected.includes(opt)\n      ? selected.filter((s) => s !== opt)\n      : maxSelections && selected.length >= maxSelections\n        ? selected\n        : [...selected, opt];\n    onValueChange(next.length > 0 ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.multiSelectGroup)}>\n      {options.map((opt) => (\n        <label\n          key={opt}\n          className={cn(\n            \"flex items-center gap-2 text-sm cursor-pointer\",\n            classNames?.multiSelectOption,\n          )}\n        >\n          <input\n            type=\"checkbox\"\n            checked={selected.includes(opt)}\n            onChange={() => toggle(opt)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {opt}\n        </label>\n      ))}\n      {maxSelections && (\n        <p className=\"text-xs text-muted-foreground\">\n          {selected.length}/{maxSelections} selected\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction DateRangeInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const range = (value && typeof value === \"object\" ? value : {}) as DateRangeValue;\n\n  const update = (key: \"start\" | \"end\", v: string) => {\n    const next = { ...range, [key]: v };\n    onValueChange(next.start || next.end ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-1 sm:grid-cols-2 gap-3\", classNames?.dateRangeInput)}>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">Start</label>\n        <DatePicker\n          value={range.start || \"\"}\n          onChange={(next) => update(\"start\", next)}\n          required={field.is_required}\n          placeholder=\"Start date\"\n          aria-label={`${field.name} start date`}\n          maxDate={range.end ? new Date(`${range.end}T00:00`) : undefined}\n        />\n      </div>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">End</label>\n        <DatePicker\n          value={range.end || \"\"}\n          onChange={(next) => update(\"end\", next)}\n          required={field.is_required}\n          placeholder=\"End date\"\n          aria-label={`${field.name} end date`}\n          minDate={range.start ? new Date(`${range.start}T00:00`) : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction AddressInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const addr = (value && typeof value === \"object\" ? value : null) as AddressValue | null;\n  const [inputText, setInputText] = React.useState(addr?.formatted_address ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const fallback = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(fallback);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      const addressValue: AddressValue = {\n        formatted_address: d.formatted_address || fallback,\n        street_address: d.street_address,\n        apartment: d.apartment,\n        city: d.city,\n        region: d.region,\n        postal_code: d.postal_code,\n        country: d.country,\n        latitude: d.latitude,\n        longitude: d.longitude,\n        place_id: d.place_id,\n      };\n      setInputText(addressValue.formatted_address);\n      onValueChange(addressValue);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"space-y-2 relative\", classNames?.addressInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for an address...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {addr && (\n        <input\n          type=\"text\"\n          value={addr.apartment || \"\"}\n          onChange={(e) => onValueChange({ ...addr, apartment: e.target.value || undefined })}\n          placeholder=\"Apt, suite, unit (optional)\"\n          className={inputClass}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction LocationInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const loc = (value && typeof value === \"object\" ? value : null) as LocationValue | null;\n  const [inputText, setInputText] = React.useState(loc?.label ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const label = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(label);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      onValueChange({\n        latitude: d.latitude,\n        longitude: d.longitude,\n        label: d.formatted_address || label,\n      } satisfies LocationValue);\n      setInputText(d.formatted_address || label);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"relative\", classNames?.locationInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for a location...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {loc && (\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {loc.latitude.toFixed(4)}, {loc.longitude.toFixed(4)}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction PhoneInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const phone = (value && typeof value === \"object\" ? value : null) as PhoneValue | null;\n  const [code, setCode] = React.useState(phone?.country_code ?? \"+1\");\n  const [number, setNumber] = React.useState(phone?.number ?? \"\");\n\n  const update = (nextCode: string, nextNumber: string) => {\n    setCode(nextCode);\n    setNumber(nextNumber);\n    if (nextNumber) {\n      onValueChange({\n        country_code: nextCode,\n        number: nextNumber,\n        formatted: `${nextCode} ${nextNumber}`,\n      } satisfies PhoneValue);\n    } else {\n      onValueChange(undefined);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex gap-2\", classNames?.phoneInput)}>\n      <input\n        type=\"text\"\n        value={code}\n        onChange={(e) => update(e.target.value, number)}\n        placeholder=\"+1\"\n        className={cn(inputClass, \"w-20 shrink-0\")}\n      />\n      <input\n        type=\"tel\"\n        value={number}\n        onChange={(e) => update(code, e.target.value)}\n        placeholder={field.placeholder || \"Phone number\"}\n        required={field.is_required}\n        className={inputClass}\n      />\n    </div>\n  );\n}\n\nfunction SignatureInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const sig = (value && typeof value === \"object\" ? value : null) as SignatureValue | null;\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const isDrawing = React.useRef(false);\n\n  const getCtx = () => canvasRef.current?.getContext(\"2d\") ?? null;\n\n  const startDraw = (e: React.PointerEvent) => {\n    const ctx = getCtx();\n    if (!ctx) return;\n    isDrawing.current = true;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.beginPath();\n    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);\n    canvasRef.current!.setPointerCapture(e.pointerId);\n  };\n\n  const draw = (e: React.PointerEvent) => {\n    if (!isDrawing.current) return;\n    const ctx = getCtx();\n    if (!ctx) return;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.lineWidth = 2;\n    ctx.lineCap = \"round\";\n    const style = getComputedStyle(canvasRef.current!);\n    ctx.strokeStyle = style.color || \"#000\";\n    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);\n    ctx.stroke();\n  };\n\n  const endDraw = () => {\n    if (!isDrawing.current) return;\n    isDrawing.current = false;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    onValueChange({\n      data_url: canvas.toDataURL(\"image/png\"),\n      signer_name: sig?.signer_name,\n    } satisfies SignatureValue);\n  };\n\n  const clear = () => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);\n    onValueChange(undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.signatureCanvas)}>\n      <div className=\"relative rounded-md border border-input overflow-hidden\">\n        <canvas\n          ref={canvasRef}\n          width={400}\n          height={150}\n          className=\"w-full touch-none cursor-crosshair bg-background text-foreground\"\n          onPointerDown={startDraw}\n          onPointerMove={draw}\n          onPointerUp={endDraw}\n          onPointerLeave={endDraw}\n        />\n        {sig?.data_url && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute top-1.5 right-1.5 text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Clear\n          </button>\n        )}\n      </div>\n      {!sig?.data_url && (\n        <p className=\"text-xs text-muted-foreground\">\n          {field.placeholder || \"Draw your signature above\"}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction createSessionToken(): string {\n  if (typeof crypto !== \"undefined\" && crypto.randomUUID) {\n    return crypto.randomUUID();\n  }\n  return `places_${Date.now()}_${Math.random().toString(16).slice(2)}`;\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport { INPUT_FIELD_TYPE, type AddressValue, type DateRangeValue, type LocationValue, type PhoneValue, type ProductInputField, type SignatureValue } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { AddressAutocomplete } from \"./address-autocomplete\";\nimport { DatePicker } from \"./date-picker\";\nimport { TimePicker } from \"./time-picker\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CustomerInputFieldsClassNames {\n  root?: string;\n  field?: string;\n  label?: string;\n  required?: string;\n  helpText?: string;\n  input?: string;\n  select?: string;\n  textarea?: string;\n  fileInput?: string;\n  colorInput?: string;\n  radioGroup?: string;\n  radioOption?: string;\n  checkboxLabel?: string;\n  priceAdjustment?: string;\n  addressInput?: string;\n  phoneInput?: string;\n  signatureCanvas?: string;\n  multiSelectGroup?: string;\n  multiSelectOption?: string;\n  dateRangeInput?: string;\n  locationInput?: string;\n}\n\nexport interface CustomerInputFieldsProps {\n  fields: ProductInputField[];\n  values: Record<string, unknown>;\n  onChange: (values: Record<string, unknown>) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  currency?: CurrencyCode;\n  className?: string;\n  classNames?: CustomerInputFieldsClassNames;\n}\n\nexport function CustomerInputFields({\n  fields,\n  values,\n  onChange,\n  onFileUpload,\n  currency,\n  className,\n  classNames,\n}: CustomerInputFieldsProps): React.ReactElement | null {\n  const clientContext = useOptionalCimplifyClient();\n\n  if (fields.length === 0) return null;\n\n  const sorted = [...fields].sort((a, b) => a.display_order - b.display_order);\n\n  const setValue = useCallback(\n    (fieldId: string, value: unknown) => {\n      onChange({ ...values, [fieldId]: value });\n    },\n    [values, onChange],\n  );\n\n  const defaultFileUpload = useCallback(\n    async (file: File): Promise<string> => {\n      if (onFileUpload) return onFileUpload(file, {} as ProductInputField);\n      if (!clientContext?.client) throw new Error(\"No upload provider available\");\n      const result = await clientContext.client.uploads.upload(file);\n      if (!result.ok) throw new Error(result.error.message);\n      return result.value.url;\n    },\n    [onFileUpload, clientContext],\n  );\n\n  return (\n    <div data-cimplify-customer-inputs className={cn(\"space-y-4\", className, classNames?.root)}>\n      {sorted.map((field) => (\n        <InputField\n          key={field.id}\n          field={field}\n          value={values[field.id]}\n          onValueChange={(value) => setValue(field.id, value)}\n          onFileUpload={onFileUpload ?? (clientContext?.client ? (_file, _field) => defaultFileUpload(_file) : undefined)}\n          currency={currency}\n          classNames={classNames}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction InputField({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  currency,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  currency?: CurrencyCode;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const hasPriceAdjustment = field.price_adjustment != null && parsePrice(field.price_adjustment) > 0;\n\n  return (\n    <div data-cimplify-customer-input data-field-type={field.field_type} className={classNames?.field}>\n      <div className=\"flex items-center gap-2 mb-1.5\">\n        <label className={cn(\"text-sm font-semibold\", classNames?.label)}>\n          {field.name}\n        </label>\n        {field.is_required && (\n          <span className={cn(\"text-xs text-destructive\", classNames?.required)}>Required</span>\n        )}\n        {hasPriceAdjustment && (\n          <span className={cn(\"text-xs text-muted-foreground\", classNames?.priceAdjustment)}>\n            +<Price amount={field.price_adjustment!} currency={currency} />\n          </span>\n        )}\n      </div>\n\n      {field.help_text && (\n        <p className={cn(\"text-xs text-muted-foreground mb-1.5\", classNames?.helpText)}>\n          {field.help_text}\n        </p>\n      )}\n\n      <FieldInput\n        field={field}\n        value={value}\n        onValueChange={onValueChange}\n        onFileUpload={onFileUpload}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n\nfunction FieldInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const inputClass = 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\",\n    classNames?.input,\n  );\n\n  switch (field.field_type) {\n    case INPUT_FIELD_TYPE.Text:\n    case INPUT_FIELD_TYPE.Url:\n      return (\n        <input\n          type={field.field_type === INPUT_FIELD_TYPE.Url ? \"url\" : \"text\"}\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Textarea:\n      return (\n        <textarea\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          rows={3}\n          className={cn(inputClass, \"resize-none\", classNames?.textarea)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Number:\n      return (\n        <input\n          type=\"number\"\n          value={typeof value === \"number\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value ? parseFloat(e.target.value) : undefined)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          min={field.validation?.min_value ?? undefined}\n          max={field.validation?.max_value ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Select:\n      return (\n        <select\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={cn(inputClass, classNames?.select)}\n        >\n          <option value=\"\">{field.placeholder || \"Select...\"}</option>\n          {(field.options || []).map((opt) => (\n            <option key={opt} value={opt}>{opt}</option>\n          ))}\n        </select>\n      );\n\n    case INPUT_FIELD_TYPE.Radio:\n      return (\n        <div className={cn(\"space-y-2\", classNames?.radioGroup)}>\n          {(field.options || []).map((opt) => (\n            <label\n              key={opt}\n              className={cn(\n                \"flex items-center gap-2 text-sm cursor-pointer\",\n                classNames?.radioOption,\n              )}\n            >\n              <input\n                type=\"radio\"\n                name={field.id}\n                value={opt}\n                checked={value === opt}\n                onChange={() => onValueChange(opt)}\n                className=\"accent-primary\"\n              />\n              {opt}\n            </label>\n          ))}\n        </div>\n      );\n\n    case INPUT_FIELD_TYPE.Checkbox:\n      return (\n        <label className={cn(\"flex items-center gap-2 text-sm cursor-pointer\", classNames?.checkboxLabel)}>\n          <input\n            type=\"checkbox\"\n            checked={value === true}\n            onChange={(e) => onValueChange(e.target.checked)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {field.placeholder || field.name}\n        </label>\n      );\n\n    case INPUT_FIELD_TYPE.Color:\n      return (\n        <input\n          type=\"color\"\n          value={typeof value === \"string\" ? value : \"#000000\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          className={cn(\"w-12 h-10 rounded-md border border-input cursor-pointer\", classNames?.colorInput)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Date:\n      return (\n        <DatePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a date\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.File:\n    case INPUT_FIELD_TYPE.Image:\n      return (\n        <FileUploadInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          onFileUpload={onFileUpload}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Email:\n      return (\n        <input\n          type=\"email\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder || \"email@example.com\"}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateTime: {\n      const stringValue = typeof value === \"string\" ? value : \"\";\n      const [datePart, timePartRaw] = stringValue.includes(\"T\")\n        ? stringValue.split(\"T\", 2)\n        : [stringValue, \"\"];\n      const timePart = (timePartRaw ?? \"\").slice(0, 5);\n      const commit = (nextDate: string, nextTime: string): void => {\n        if (!nextDate && !nextTime) {\n          onValueChange(undefined);\n          return;\n        }\n        if (!nextDate) {\n          onValueChange(`${nextTime}`);\n          return;\n        }\n        const combined = `${nextDate}T${nextTime || \"00:00\"}`;\n        const parsed = new Date(combined);\n        onValueChange(Number.isNaN(parsed.getTime()) ? combined : parsed.toISOString());\n      };\n      return (\n        <div className=\"grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2\">\n          <DatePicker\n            value={datePart ?? \"\"}\n            onChange={(next) => commit(next, timePart)}\n            placeholder={field.placeholder ?? \"Select a date\"}\n            aria-label={`${field.name} date`}\n            required={field.is_required}\n          />\n          <TimePicker\n            value={timePart}\n            onChange={(next) => commit(datePart ?? \"\", next)}\n            placeholder=\"Time\"\n            aria-label={`${field.name} time`}\n          />\n        </div>\n      );\n    }\n\n    case INPUT_FIELD_TYPE.Time:\n      return (\n        <TimePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a time\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.MultiSelect:\n      return (\n        <MultiSelectInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateRange:\n      return (\n        <DateRangeInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Address:\n      return (\n        <AddressInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Location:\n      return (\n        <LocationInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Phone:\n      return (\n        <PhoneInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Signature:\n      return (\n        <SignatureInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    default:\n      return (\n        <input\n          type=\"text\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          className={inputClass}\n        />\n      );\n  }\n}\n\nfunction FileUploadInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const [isUploading, setIsUploading] = React.useState(false);\n  const fileUrl = typeof value === \"string\" ? value : undefined;\n  const acceptedFormats = field.validation?.accepted_formats;\n  const accept = acceptedFormats\n    ? acceptedFormats.map((f) => `.${f}`).join(\",\")\n    : field.field_type === INPUT_FIELD_TYPE.Image\n      ? \"image/*\"\n      : undefined;\n\n  const handleFile = async (file: File) => {\n    if (!onFileUpload) return;\n\n    if (field.validation?.max_size_mb) {\n      const maxBytes = field.validation.max_size_mb * 1024 * 1024;\n      if (file.size > maxBytes) {\n        return;\n      }\n    }\n\n    setIsUploading(true);\n    try {\n      const url = await onFileUpload(file, field);\n      onValueChange(url);\n    } finally {\n      setIsUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.fileInput)}>\n      {fileUrl ? (\n        <div className=\"flex items-center gap-3\">\n          {field.field_type === INPUT_FIELD_TYPE.Image && (\n            <img src={fileUrl} alt=\"Uploaded\" className=\"w-16 h-16 object-cover rounded-md border border-border\" />\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm text-foreground truncate\">{fileUrl.split(\"/\").pop()}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onValueChange(undefined)}\n            className=\"text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Remove\n          </button>\n        </div>\n      ) : (\n        <label className=\"flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-primary/40 transition-colors\">\n          <input\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => {\n              const file = e.target.files?.[0];\n              if (file) void handleFile(file);\n            }}\n            className=\"hidden\"\n            disabled={isUploading}\n          />\n          {isUploading ? (\n            <span className=\"text-sm text-muted-foreground\">Uploading...</span>\n          ) : (\n            <>\n              <span className=\"text-sm text-muted-foreground\">\n                {field.placeholder || `Upload ${field.field_type === INPUT_FIELD_TYPE.Image ? \"image\" : \"file\"}`}\n              </span>\n              {acceptedFormats && (\n                <span className=\"text-xs text-muted-foreground/60 mt-1\">\n                  {acceptedFormats.map((f) => f.toUpperCase()).join(\", \")}\n                  {field.validation?.max_size_mb && ` · Max ${field.validation.max_size_mb}MB`}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction MultiSelectInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n  const options = field.options || [];\n  const maxSelections = field.validation?.max_selections;\n\n  const toggle = (opt: string) => {\n    const next = selected.includes(opt)\n      ? selected.filter((s) => s !== opt)\n      : maxSelections && selected.length >= maxSelections\n        ? selected\n        : [...selected, opt];\n    onValueChange(next.length > 0 ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.multiSelectGroup)}>\n      {options.map((opt) => (\n        <label\n          key={opt}\n          className={cn(\n            \"flex items-center gap-2 text-sm cursor-pointer\",\n            classNames?.multiSelectOption,\n          )}\n        >\n          <input\n            type=\"checkbox\"\n            checked={selected.includes(opt)}\n            onChange={() => toggle(opt)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {opt}\n        </label>\n      ))}\n      {maxSelections && (\n        <p className=\"text-xs text-muted-foreground\">\n          {selected.length}/{maxSelections} selected\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction DateRangeInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const range = (value && typeof value === \"object\" ? value : {}) as DateRangeValue;\n\n  const update = (key: \"start\" | \"end\", v: string) => {\n    const next = { ...range, [key]: v };\n    onValueChange(next.start || next.end ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-1 sm:grid-cols-2 gap-3\", classNames?.dateRangeInput)}>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">Start</label>\n        <DatePicker\n          value={range.start || \"\"}\n          onChange={(next) => update(\"start\", next)}\n          required={field.is_required}\n          placeholder=\"Start date\"\n          aria-label={`${field.name} start date`}\n          maxDate={range.end ? new Date(`${range.end}T00:00`) : undefined}\n        />\n      </div>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">End</label>\n        <DatePicker\n          value={range.end || \"\"}\n          onChange={(next) => update(\"end\", next)}\n          required={field.is_required}\n          placeholder=\"End date\"\n          aria-label={`${field.name} end date`}\n          minDate={range.start ? new Date(`${range.start}T00:00`) : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction AddressInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const addr = (value && typeof value === \"object\" ? value : null) as AddressValue | null;\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.addressInput)}>\n      <AddressAutocomplete\n        value={addr}\n        onSelect={onValueChange}\n        placeholder={field.placeholder || \"Search for an address...\"}\n        required={field.is_required}\n        classNames={{ input: inputClass }}\n      />\n      {addr && (\n        <input\n          type=\"text\"\n          value={addr.apartment || \"\"}\n          onChange={(e) => onValueChange({ ...addr, apartment: e.target.value || undefined })}\n          placeholder=\"Apt, suite, unit (optional)\"\n          className={inputClass}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction LocationInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const loc = (value && typeof value === \"object\" ? value : null) as LocationValue | null;\n\n  return (\n    <div className={cn(classNames?.locationInput)}>\n      <AddressAutocomplete\n        value={\n          loc\n            ? { formatted_address: loc.label ?? \"\", latitude: loc.latitude, longitude: loc.longitude }\n            : null\n        }\n        onSelect={(address) =>\n          onValueChange({\n            latitude: address.latitude,\n            longitude: address.longitude,\n            label: address.formatted_address,\n          } satisfies LocationValue)\n        }\n        placeholder={field.placeholder || \"Search for a location...\"}\n        required={field.is_required}\n        classNames={{ input: inputClass }}\n      />\n      {loc && (\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {loc.latitude.toFixed(4)}, {loc.longitude.toFixed(4)}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction PhoneInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const phone = (value && typeof value === \"object\" ? value : null) as PhoneValue | null;\n  const [code, setCode] = React.useState(phone?.country_code ?? \"+1\");\n  const [number, setNumber] = React.useState(phone?.number ?? \"\");\n\n  const update = (nextCode: string, nextNumber: string) => {\n    setCode(nextCode);\n    setNumber(nextNumber);\n    if (nextNumber) {\n      onValueChange({\n        country_code: nextCode,\n        number: nextNumber,\n        formatted: `${nextCode} ${nextNumber}`,\n      } satisfies PhoneValue);\n    } else {\n      onValueChange(undefined);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex gap-2\", classNames?.phoneInput)}>\n      <input\n        type=\"text\"\n        value={code}\n        onChange={(e) => update(e.target.value, number)}\n        placeholder=\"+1\"\n        className={cn(inputClass, \"w-20 shrink-0\")}\n      />\n      <input\n        type=\"tel\"\n        value={number}\n        onChange={(e) => update(code, e.target.value)}\n        placeholder={field.placeholder || \"Phone number\"}\n        required={field.is_required}\n        className={inputClass}\n      />\n    </div>\n  );\n}\n\nfunction SignatureInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const sig = (value && typeof value === \"object\" ? value : null) as SignatureValue | null;\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const isDrawing = React.useRef(false);\n\n  const getCtx = () => canvasRef.current?.getContext(\"2d\") ?? null;\n\n  const startDraw = (e: React.PointerEvent) => {\n    const ctx = getCtx();\n    if (!ctx) return;\n    isDrawing.current = true;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.beginPath();\n    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);\n    canvasRef.current!.setPointerCapture(e.pointerId);\n  };\n\n  const draw = (e: React.PointerEvent) => {\n    if (!isDrawing.current) return;\n    const ctx = getCtx();\n    if (!ctx) return;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.lineWidth = 2;\n    ctx.lineCap = \"round\";\n    const style = getComputedStyle(canvasRef.current!);\n    ctx.strokeStyle = style.color || \"#000\";\n    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);\n    ctx.stroke();\n  };\n\n  const endDraw = () => {\n    if (!isDrawing.current) return;\n    isDrawing.current = false;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    onValueChange({\n      data_url: canvas.toDataURL(\"image/png\"),\n      signer_name: sig?.signer_name,\n    } satisfies SignatureValue);\n  };\n\n  const clear = () => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);\n    onValueChange(undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.signatureCanvas)}>\n      <div className=\"relative rounded-md border border-input overflow-hidden\">\n        <canvas\n          ref={canvasRef}\n          width={400}\n          height={150}\n          className=\"w-full touch-none cursor-crosshair bg-background text-foreground\"\n          onPointerDown={startDraw}\n          onPointerMove={draw}\n          onPointerUp={endDraw}\n          onPointerLeave={endDraw}\n        />\n        {sig?.data_url && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute top-1.5 right-1.5 text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Clear\n          </button>\n        )}\n      </div>\n      {!sig?.data_url && (\n        <p className=\"text-xs text-muted-foreground\">\n          {field.placeholder || \"Draw your signature above\"}\n        </p>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/date-slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "date-slot-picker.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  currency,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          currency={currency}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Whole units needed — forwarded to availability so short days drop out. */\n  units?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  units,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  currency,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      units,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          currency={currency}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n        />\n      </div>\n    </Tabs.Root>\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 { parsePrice, getUnitPriceAtQuantity, getProductCurrency } from \"@cimplify/sdk\";\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  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?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => void;\n  showSpecialInstructions?: boolean;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\nexport function ProductCustomizer({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\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 [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\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\n  const cart = useCart();\n\n  const currency = getProductCurrency(product);\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  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  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n    setSelectedStaffId(null);\n  }, [product.id, product.min_order_quantity]);\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(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).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 = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\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  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\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: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\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 { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\n\n  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setSelectedVariantId(variantId);\n      setSelectedVariant(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 (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: 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: 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          }\n        : {}),\n      customerInputs: 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  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);\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          currency={currency}\n        />\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 data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} currency={currency} /></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 data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\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 data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\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        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\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 data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} currency={currency} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : 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 ? \"Added to Cart\" : (\n              <>\n                Add to Cart &middot; <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\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 { parsePrice, getUnitPriceAtQuantity, getProductCurrency } 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?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => 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\nexport function ProductCustomizer({\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 [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\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 currency = getProductCurrency(product);\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  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n    setSelectedStaffId(null);\n    setUnitsCount(1);\n  }, [product.id, product.min_order_quantity]);\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(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).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 = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\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  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\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: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\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 { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\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      setSelectedVariantId(variantId);\n      setSelectedVariant(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 (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: 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: 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: 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  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, unitsCount, isSubmitting, onAddToCart, cart]);\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 data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} currency={currency} /></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 data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\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 data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\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        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\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 data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} currency={currency} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : 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 ? \"Added\" : (\n              <>\n                {submitLabel ?? \"Add to Cart\"} &middot;{\" \"}\n                <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/rental-service-card.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "cards/rental-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  minutes: \"min\",\n  hours: \"hr\",\n  days: \"day\",\n  nights: \"night\",\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function RentalServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"day\";\n  const status = product.inventory_status;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Per-unit pill */}\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        {/* Price */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} currency={currency} />/{unit}\n        </span>\n\n        {/* Capacity badge */}\n        {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            Up to {product.general_service_capacity} guests\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Info pills */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} currency={currency} /> deposit\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {/* Availability */}\n          {status && (\n            <div className=\"flex items-center gap-1.5 text-[12px]\">\n              <span className={cn(\n                \"w-[7px] h-[7px] rounded-full shrink-0\",\n                status.in_stock ? \"bg-emerald-500\" : \"bg-red-500\",\n              )} />\n              <span className={status.in_stock ? \"text-muted-foreground\" : \"text-red-600\"}>\n                {status.in_stock\n                  ? status.stock_level != null\n                    ? `${status.stock_level} available`\n                    : \"Available\"\n                  : \"Unavailable\"\n                }\n              </span>\n            </div>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Reserve now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  minutes: \"min\",\n  hours: \"hr\",\n  days: \"day\",\n  nights: \"night\",\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function RentalServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"day\";\n  const priceUnit =\n    product.price_basis === \"per_person\" ? \"guest\" : product.price_basis === \"flat\" ? \"\" : unit;\n  const status = product.inventory_status;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Per-unit pill */}\n        {priceUnit && (\n          <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n            Per {priceUnit}\n          </span>\n        )}\n\n        {/* Price */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} currency={currency} />\n          {priceUnit && `/${priceUnit}`}\n        </span>\n\n        {/* Capacity badge */}\n        {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            Up to {product.general_service_capacity} guests\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Info pills */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} currency={currency} /> deposit\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {/* Availability */}\n          {status && (\n            <div className=\"flex items-center gap-1.5 text-[12px]\">\n              <span className={cn(\n                \"w-[7px] h-[7px] rounded-full shrink-0\",\n                status.in_stock ? \"bg-emerald-500\" : \"bg-red-500\",\n              )} />\n              <span className={status.in_stock ? \"text-muted-foreground\" : \"text-red-600\"}>\n                {status.in_stock\n                  ? status.stock_level != null\n                    ? `${status.stock_level} available`\n                    : \"Available\"\n                  : \"Unavailable\"\n                }\n              </span>\n            </div>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Reserve now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }