@karibukit/ranger-widget 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RangerChatProps {
+    apiUrl: string;
+    propertySlug: string;
+    embedToken: string;
+    mode: 'embedded' | 'floating';
+    riveUrl?: string;
+    className?: string;
+}
+
+declare function RangerChat(props: RangerChatProps): react_jsx_runtime.JSX.Element;
+
+export { RangerChat, type RangerChatProps };

package/dist/index.js

@@ -0,0 +1,506 @@
+// src/EmbeddedChat.tsx
+import { useEffect as useEffect4, useState as useState5, useCallback as useCallback3 } from "react";
+
+// src/hooks/useRangerSession.ts
+import { useState, useCallback, useEffect } from "react";
+var STORAGE_PREFIX = "ranger_session_";
+function useRangerSession(apiUrl, propertySlug, embedToken) {
+  const storageKey = `${STORAGE_PREFIX}${propertySlug}`;
+  const [state, setState] = useState({
+    token: null,
+    sessionId: null,
+    config: null,
+    isCreating: false,
+    error: null
+  });
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        const payload = JSON.parse(atob(parsed.token.split(".")[1]));
+        if (payload.exp * 1e3 > Date.now()) {
+          setState((s) => ({ ...s, token: parsed.token, sessionId: parsed.sessionId, config: parsed.config }));
+          return;
+        }
+      }
+    } catch {
+    }
+    localStorage.removeItem(storageKey);
+  }, [storageKey]);
+  const createSession = useCallback(async () => {
+    if (state.isCreating) return;
+    setState((s) => ({ ...s, isCreating: true, error: null }));
+    try {
+      const res = await fetch(`${apiUrl}/api/ranger/web/session`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Widget-Token": embedToken
+        },
+        body: JSON.stringify({ propertySlug })
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error?.message || "Session creation failed");
+      }
+      const data = await res.json();
+      const newState = { token: data.token, sessionId: data.sessionId, config: data.config, isCreating: false, error: null };
+      setState(newState);
+      localStorage.setItem(storageKey, JSON.stringify({ token: data.token, sessionId: data.sessionId, config: data.config }));
+    } catch (err) {
+      setState((s) => ({ ...s, isCreating: false, error: err instanceof Error ? err.message : "Session creation failed" }));
+    }
+  }, [apiUrl, propertySlug, embedToken, storageKey, state.isCreating]);
+  const clearSession = useCallback(() => {
+    localStorage.removeItem(storageKey);
+    setState({ token: null, sessionId: null, config: null, isCreating: false, error: null });
+  }, [storageKey]);
+  return { ...state, createSession, clearSession };
+}
+
+// src/ChatPanel.tsx
+import { useRef, useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/hooks/useChat.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+var messageCounter = 0;
+function useChat(apiUrl, token) {
+  const [messages, setMessages] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [chatState, setChatState] = useState2("idle");
+  const sendMessage = useCallback2(async (text, retryMessageId) => {
+    if (!token || isLoading) return;
+    const clientMessageId = retryMessageId || `msg_${Date.now()}_${++messageCounter}`;
+    if (!retryMessageId) {
+      const visitorMsg = { id: clientMessageId, role: "visitor", content: text };
+      setMessages((prev) => [...prev, visitorMsg]);
+    }
+    setIsLoading(true);
+    setChatState("thinking");
+    try {
+      const res = await fetch(`${apiUrl}/api/ranger/web/chat`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({ message: text, clientMessageId })
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error?.message || "Chat failed");
+      }
+      const contentType = res.headers.get("content-type") || "";
+      if (contentType.includes("application/json")) {
+        const data = await res.json();
+        if (res.status === 202 || data.error?.code === "TURN_IN_PROGRESS") {
+          setIsLoading(false);
+          setChatState("idle");
+          setTimeout(() => sendMessage(text, clientMessageId), 2e3);
+          return;
+        }
+        setChatState("responding");
+        const assistantMsg = {
+          id: `resp_${clientMessageId}`,
+          role: "assistant",
+          content: data.content,
+          suggestions: data.suggestions
+        };
+        setMessages((prev) => [...prev, assistantMsg]);
+        setChatState("idle");
+        setIsLoading(false);
+        return;
+      }
+      const reader = res.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) throw new Error("No response body");
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.content !== void 0) {
+                setChatState("responding");
+                const assistantMsg = {
+                  id: `resp_${clientMessageId}`,
+                  role: "assistant",
+                  content: data.content,
+                  suggestions: data.suggestions
+                };
+                setMessages((prev) => [...prev, assistantMsg]);
+              }
+            } catch {
+            }
+          }
+        }
+      }
+    } catch {
+      const errorMsg = {
+        id: `err_${clientMessageId}`,
+        role: "assistant",
+        content: "Something went wrong. Please try again."
+      };
+      setMessages((prev) => [...prev, errorMsg]);
+    } finally {
+      setChatState("idle");
+      setIsLoading(false);
+    }
+  }, [apiUrl, token, isLoading]);
+  const clearMessages = useCallback2(() => setMessages([]), []);
+  return { messages, isLoading, chatState, sendMessage, clearMessages };
+}
+
+// src/MessageBubble.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MessageBubble({ message, onSuggestionClick, isLast }) {
+  return /* @__PURE__ */ jsxs("div", { className: `ranger-message ranger-message--${message.role}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "ranger-bubble", children: message.content }),
+    isLast && message.role === "assistant" && message.suggestions && message.suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "ranger-chips", children: message.suggestions.map((s) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "ranger-chip",
+        onClick: () => onSuggestionClick?.(s),
+        type: "button",
+        children: s
+      },
+      s
+    )) })
+  ] });
+}
+
+// src/SuggestionChips.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SuggestionChips({ suggestions, onSelect }) {
+  if (!suggestions.length) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "ranger-chips", children: suggestions.map((s) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: "ranger-chip",
+      onClick: () => onSelect(s),
+      type: "button",
+      children: s
+    },
+    s
+  )) });
+}
+
+// src/ChatPanel.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatPanel({ apiUrl, token, config, onNewChat, onChatStateChange, className }) {
+  const { messages, isLoading, chatState, sendMessage, clearMessages } = useChat(apiUrl, token);
+  const [input, setInput] = useState3("");
+  const messagesEndRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect2(() => {
+    onChatStateChange?.(chatState);
+  }, [chatState, onChatStateChange]);
+  useEffect2(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isLoading]);
+  useEffect2(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }, [input]);
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text || isLoading || !token) return;
+    setInput("");
+    sendMessage(text);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleSuggestion = (text) => {
+    if (isLoading || !token) return;
+    sendMessage(text);
+  };
+  const handleNewChat = () => {
+    clearMessages();
+    onNewChat?.();
+  };
+  const showWelcome = messages.length === 0 && !isLoading;
+  return /* @__PURE__ */ jsxs2("div", { className: `ranger-widget ranger-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ranger-header", children: [
+      /* @__PURE__ */ jsx3("span", { className: "ranger-header-name", children: config.assistantName }),
+      messages.length > 0 && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: "ranger-new-chat-btn",
+          onClick: handleNewChat,
+          type: "button",
+          style: { marginLeft: "auto", background: "none", border: "none", color: "rgba(255,255,255,0.8)", cursor: "pointer", fontSize: 12 },
+          children: "New chat"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "ranger-messages", children: [
+      showWelcome && /* @__PURE__ */ jsx3("div", { className: "ranger-message ranger-message--assistant", children: /* @__PURE__ */ jsx3("div", { className: "ranger-bubble", children: config.welcomeMessage }) }),
+      showWelcome && config.welcomeSuggestions.length > 0 && /* @__PURE__ */ jsx3(SuggestionChips, { suggestions: config.welcomeSuggestions, onSelect: handleSuggestion }),
+      messages.map((msg, i) => /* @__PURE__ */ jsx3(
+        MessageBubble,
+        {
+          message: msg,
+          onSuggestionClick: handleSuggestion,
+          isLast: i === messages.length - 1
+        },
+        msg.id
+      )),
+      isLoading && chatState === "thinking" && /* @__PURE__ */ jsxs2("div", { className: "ranger-thinking", children: [
+        /* @__PURE__ */ jsx3("span", {}),
+        /* @__PURE__ */ jsx3("span", {}),
+        /* @__PURE__ */ jsx3("span", {})
+      ] }),
+      /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "ranger-input-area", children: [
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: "ranger-input",
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: token ? "Type a message\u2026" : "Starting session\u2026",
+          disabled: !token || isLoading,
+          rows: 1
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: "ranger-send-btn",
+          onClick: handleSend,
+          disabled: !input.trim() || !token || isLoading,
+          type: "button",
+          "aria-label": "Send",
+          children: /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx3("path", { d: "M14 8L2 2l3 6-3 6 12-6z", fill: "currentColor" }) })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/RangerCharacter.tsx
+import { useState as useState4, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function RangerCharacter({ state, size = 96, className, riveUrl }) {
+  const [riveLoaded, setRiveLoaded] = useState4(false);
+  const [riveFailed, setRiveFailed] = useState4(false);
+  const canvasRef = useRef2(null);
+  useEffect3(() => {
+    if (!riveUrl) {
+      setRiveFailed(true);
+      return;
+    }
+    let cancelled = false;
+    import("@rive-app/react-canvas").then(({ Rive }) => {
+      if (cancelled || !canvasRef.current) return;
+      const canvas = document.createElement("canvas");
+      canvas.width = size;
+      canvas.height = size;
+      canvasRef.current.appendChild(canvas);
+      const r = new Rive({
+        src: riveUrl,
+        canvas,
+        stateMachines: "main",
+        autoplay: true,
+        onLoad: () => {
+          if (!cancelled) setRiveLoaded(true);
+        },
+        onLoadError: () => {
+          if (!cancelled) setRiveFailed(true);
+        }
+      });
+      const inputs = r.stateMachineInputs("main") || [];
+      const stateInput = inputs.find((i) => i.name === "state");
+      const stateMap = { idle: 0, listening: 1, thinking: 2, responding: 3 };
+      if (stateInput) stateInput.value = stateMap[state];
+      return () => {
+        cancelled = true;
+        r.cleanup();
+      };
+    }).catch(() => {
+      if (!cancelled) setRiveFailed(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [riveUrl, size]);
+  const showFallback = riveFailed || !riveUrl && !riveLoaded;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: { width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center" },
+      children: [
+        !showFallback && /* @__PURE__ */ jsx4("div", { ref: canvasRef, style: { width: size, height: size } }),
+        showFallback && /* @__PURE__ */ jsx4(RangerSVG, { state, size })
+      ]
+    }
+  );
+}
+function RangerSVG({ state, size }) {
+  const colors = {
+    idle: "#a08060",
+    listening: "#7ba05b",
+    thinking: "#6b7ab8",
+    responding: "#c07850"
+  };
+  const color = colors[state];
+  const isAnimating = state === "thinking" || state === "responding";
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 96 96",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: isAnimating ? { animation: "ranger-pulse 1.5s ease-in-out infinite" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx4("style", { children: `@keyframes ranger-pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }` }),
+        /* @__PURE__ */ jsx4("ellipse", { cx: "48", cy: "28", rx: "22", ry: "5", fill: color, opacity: "0.9" }),
+        /* @__PURE__ */ jsx4("rect", { x: "34", y: "16", width: "28", height: "14", rx: "4", fill: color }),
+        /* @__PURE__ */ jsx4("circle", { cx: "48", cy: "44", r: "16", fill: "#f5d6b0" }),
+        state === "thinking" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4("path", { d: "M40 42 Q42 40 44 42", stroke: "#5a3e28", strokeWidth: "1.5", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx4("path", { d: "M52 42 Q54 40 56 42", stroke: "#5a3e28", strokeWidth: "1.5", strokeLinecap: "round" })
+        ] }) : state === "responding" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4("circle", { cx: "42", cy: "42", r: "3", fill: "#5a3e28" }),
+          /* @__PURE__ */ jsx4("circle", { cx: "54", cy: "42", r: "3", fill: "#5a3e28" }),
+          /* @__PURE__ */ jsx4("circle", { cx: "43", cy: "41", r: "1", fill: "#fff" }),
+          /* @__PURE__ */ jsx4("circle", { cx: "55", cy: "41", r: "1", fill: "#fff" })
+        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4("ellipse", { cx: "42", cy: "43", rx: "3", ry: "2.5", fill: "#5a3e28" }),
+          /* @__PURE__ */ jsx4("ellipse", { cx: "54", cy: "43", rx: "3", ry: "2.5", fill: "#5a3e28" })
+        ] }),
+        state === "idle" ? /* @__PURE__ */ jsx4("path", { d: "M43 50 Q48 54 53 50", stroke: "#c4855a", strokeWidth: "1.5", strokeLinecap: "round" }) : state === "listening" ? /* @__PURE__ */ jsx4("ellipse", { cx: "48", cy: "51", rx: "4", ry: "2.5", fill: "#c4855a" }) : state === "thinking" ? /* @__PURE__ */ jsx4("path", { d: "M44 51 Q48 49 52 51", stroke: "#c4855a", strokeWidth: "1.5", strokeLinecap: "round" }) : /* @__PURE__ */ jsx4("path", { d: "M43 49 Q48 55 53 49", stroke: "#c4855a", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx4("path", { d: "M30 64 Q30 58 48 58 Q66 58 66 64 L70 82 H26 Z", fill: color }),
+        /* @__PURE__ */ jsx4("rect", { x: "43", y: "62", width: "10", height: "8", rx: "2", fill: "#fff", opacity: "0.8" }),
+        /* @__PURE__ */ jsx4("circle", { cx: "48", cy: "66", r: "2", fill: color })
+      ]
+    }
+  );
+}
+
+// src/EmbeddedChat.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function EmbeddedChat({ apiUrl, propertySlug, embedToken, className, riveUrl }) {
+  const session = useRangerSession(apiUrl, propertySlug, embedToken);
+  const [charState, setCharState] = useState5("idle");
+  useEffect4(() => {
+    if (!session.token && !session.isCreating) {
+      session.createSession();
+    }
+  }, [session.token, session.isCreating]);
+  const handleChatStateChange = useCallback3((s) => {
+    setCharState(s);
+  }, []);
+  if (session.error) {
+    return /* @__PURE__ */ jsx5("div", { className: `ranger-widget ranger-embedded${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx5("p", { style: { color: "#ef4444", fontSize: 14 }, children: "Unable to load chat. Please try again later." }) });
+  }
+  if (!session.config) {
+    return /* @__PURE__ */ jsx5("div", { className: `ranger-widget ranger-embedded${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx5("div", { style: { padding: 24, color: "#78716c", fontSize: 14 }, children: "Loading\u2026" }) });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: `ranger-widget ranger-embedded${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ranger-embedded-character", children: [
+      /* @__PURE__ */ jsx5(RangerCharacter, { state: charState, size: 160, riveUrl }),
+      /* @__PURE__ */ jsx5("div", { style: { fontSize: 13, color: "#78716c", textAlign: "center", fontWeight: 500 }, children: session.config.assistantName })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "ranger-embedded-chat", children: /* @__PURE__ */ jsx5(
+      ChatPanel,
+      {
+        apiUrl,
+        token: session.token,
+        config: session.config,
+        onNewChat: session.clearSession,
+        onChatStateChange: handleChatStateChange
+      }
+    ) })
+  ] });
+}
+
+// src/FloatingChat.tsx
+import { useState as useState6, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function FloatingChat({ apiUrl, propertySlug, embedToken, className, riveUrl }) {
+  const [isOpen, setIsOpen] = useState6(false);
+  const [charState, setCharState] = useState6("idle");
+  const session = useRangerSession(apiUrl, propertySlug, embedToken);
+  useEffect5(() => {
+    if (isOpen && !session.token && !session.isCreating) {
+      session.createSession();
+    }
+  }, [isOpen, session.token, session.isCreating]);
+  const handleNewChat = () => {
+    session.clearSession();
+    setIsOpen(false);
+  };
+  const handleChatStateChange = useCallback4((s) => {
+    setCharState(s);
+  }, []);
+  const primaryColor = session.config?.primaryColor;
+  return /* @__PURE__ */ jsxs5("div", { className: `ranger-widget${className ? ` ${className}` : ""}`, children: [
+    isOpen && session.config && /* @__PURE__ */ jsx6("div", { className: "ranger-float-panel", children: /* @__PURE__ */ jsx6(
+      ChatPanel,
+      {
+        apiUrl,
+        token: session.token,
+        config: session.config,
+        onNewChat: handleNewChat,
+        onChatStateChange: handleChatStateChange
+      }
+    ) }),
+    isOpen && !session.config && /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "ranger-float-panel",
+        style: { display: "flex", alignItems: "center", justifyContent: "center", background: "#fff" },
+        children: /* @__PURE__ */ jsx6("div", { style: { color: "#78716c", fontSize: 14 }, children: "Loading\u2026" })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        className: "ranger-float-btn",
+        onClick: () => setIsOpen((o) => !o),
+        type: "button",
+        "aria-label": isOpen ? "Close chat" : "Open chat",
+        style: primaryColor ? { "--ranger-primary": primaryColor } : void 0,
+        children: isOpen ? /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx6("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) : /* @__PURE__ */ jsx6(
+          RangerCharacter,
+          {
+            state: charState,
+            size: 36,
+            riveUrl
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/RangerChat.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function RangerChat(props) {
+  if (props.mode === "floating") {
+    return /* @__PURE__ */ jsx7(FloatingChat, { ...props, mode: "floating" });
+  }
+  return /* @__PURE__ */ jsx7(EmbeddedChat, { ...props, mode: "embedded" });
+}
+export {
+  RangerChat
+};

package/dist/styles.css

@@ -0,0 +1,295 @@
+/* Ranger Widget Styles */
+:root {
+  --ranger-primary: #a08060;
+  --ranger-primary-hover: #8a6e50;
+  --ranger-bg: #ffffff;
+  --ranger-surface: #f5f5f4;
+  --ranger-border: #e7e5e4;
+  --ranger-text: #1c1917;
+  --ranger-text-muted: #78716c;
+  --ranger-visitor-bubble: #a08060;
+  --ranger-visitor-text: #ffffff;
+  --ranger-assistant-bubble: #f5f5f4;
+  --ranger-assistant-text: #1c1917;
+  --ranger-radius: 12px;
+  --ranger-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+}
+
+/* Container */
+.ranger-widget {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--ranger-text);
+  box-sizing: border-box;
+}
+
+.ranger-widget *,
+.ranger-widget *::before,
+.ranger-widget *::after {
+  box-sizing: inherit;
+}
+
+/* Chat panel */
+.ranger-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--ranger-bg);
+  border-radius: var(--ranger-radius);
+  overflow: hidden;
+}
+
+/* Header */
+.ranger-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--ranger-primary);
+  color: #fff;
+}
+
+.ranger-header-name {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+/* Messages */
+.ranger-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  scroll-behavior: smooth;
+}
+
+.ranger-message {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+
+.ranger-message--visitor {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.ranger-message--assistant {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.ranger-bubble {
+  padding: 10px 14px;
+  border-radius: 16px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ranger-message--visitor .ranger-bubble {
+  background: var(--ranger-visitor-bubble);
+  color: var(--ranger-visitor-text);
+  border-bottom-right-radius: 4px;
+}
+
+.ranger-message--assistant .ranger-bubble {
+  background: var(--ranger-assistant-bubble);
+  color: var(--ranger-assistant-text);
+  border-bottom-left-radius: 4px;
+}
+
+/* Suggestion chips */
+.ranger-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.ranger-chip {
+  padding: 6px 12px;
+  border-radius: 20px;
+  border: 1px solid var(--ranger-primary);
+  background: transparent;
+  color: var(--ranger-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.ranger-chip:hover {
+  background: var(--ranger-primary);
+  color: #fff;
+}
+
+/* Input area */
+.ranger-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--ranger-border);
+  background: var(--ranger-bg);
+}
+
+.ranger-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--ranger-border);
+  border-radius: 20px;
+  padding: 9px 14px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--ranger-text);
+  background: var(--ranger-surface);
+  outline: none;
+  max-height: 120px;
+  min-height: 38px;
+  line-height: 1.4;
+  transition: border-color 0.15s;
+}
+
+.ranger-input:focus {
+  border-color: var(--ranger-primary);
+}
+
+.ranger-send-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--ranger-primary);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.ranger-send-btn:hover:not(:disabled) {
+  background: var(--ranger-primary-hover);
+}
+
+.ranger-send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Thinking indicator */
+.ranger-thinking {
+  display: flex;
+  gap: 4px;
+  padding: 10px 14px;
+  background: var(--ranger-assistant-bubble);
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  width: fit-content;
+}
+
+.ranger-thinking span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ranger-text-muted);
+  animation: ranger-bounce 1.2s ease-in-out infinite;
+}
+
+.ranger-thinking span:nth-child(2) { animation-delay: 0.2s; }
+.ranger-thinking span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes ranger-bounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+
+/* Floating button */
+.ranger-float-btn {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--ranger-primary);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--ranger-shadow);
+  transition: transform 0.2s, background 0.15s;
+  z-index: 9999;
+}
+
+.ranger-float-btn:hover {
+  transform: scale(1.08);
+  background: var(--ranger-primary-hover);
+}
+
+/* Floating panel */
+.ranger-float-panel {
+  position: fixed;
+  bottom: 92px;
+  right: 24px;
+  width: 360px;
+  height: 540px;
+  box-shadow: var(--ranger-shadow);
+  border-radius: var(--ranger-radius);
+  overflow: hidden;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 480px) {
+  .ranger-float-panel {
+    bottom: 0;
+    right: 0;
+    width: 100vw;
+    height: 100dvh;
+    border-radius: 0;
+  }
+
+  .ranger-float-btn {
+    bottom: 16px;
+    right: 16px;
+  }
+}
+
+/* Embedded layout */
+.ranger-embedded {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 24px;
+  align-items: stretch;
+}
+
+@media (max-width: 640px) {
+  .ranger-embedded {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}
+
+.ranger-embedded-character {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.ranger-embedded-chat {
+  min-height: 480px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ranger-border);
+  border-radius: var(--ranger-radius);
+  overflow: hidden;
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@karibukit/ranger-widget",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom && cp src/styles.css dist/styles.css",
+    "dev": "tsup src/index.ts --format esm --dts --watch --external react --external react-dom"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@rive-app/react-canvas": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}