@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/language-switcher/createI18n.d.ts

@@ -0,0 +1,102 @@
+import { type JSX, type FlowComponent } from "solid-js";
+export interface Language {
+    code: string;
+    name: string;
+}
+export interface I18nOptions {
+    /**
+     * List of supported languages
+     */
+    languages: Language[];
+    /**
+     * Default language code
+     * @default first language in the list
+     */
+    defaultLanguage?: string;
+    /**
+     * Storage key for persisting locale
+     */
+    storageKey: string;
+    /**
+     * Function to load translations for a locale
+     * Should return a record of translation keys to values
+     */
+    loadTranslations?: (locale: string) => Promise<Record<string, unknown>>;
+    /**
+     * Initial translations (for default language)
+     */
+    initialTranslations?: Record<string, unknown>;
+}
+export interface I18nStore {
+    /**
+     * Current locale code (getter, reactive)
+     */
+    readonly locale: string;
+    /**
+     * Whether translations are currently loading (getter, reactive)
+     */
+    readonly isLoading: boolean;
+    /**
+     * Translation function
+     */
+    t: (key: string) => string;
+    /**
+     * Set the current locale
+     */
+    setLocale: (lang: string) => Promise<void>;
+    /**
+     * Initialize the store (detect language from URL, storage, browser)
+     */
+    init: () => Promise<void>;
+    /**
+     * Available languages
+     */
+    readonly languages: Language[];
+    /**
+     * Language names map for quick lookup
+     */
+    readonly languageNames: Record<string, string>;
+    /**
+     * Supported language codes
+     */
+    readonly supportedCodes: string[];
+}
+/**
+ * Creates an i18n store with configurable options.
+ * API matches nofilter.io's i18nStore for easy migration.
+ *
+ * @example
+ * ```tsx
+ * // Create the store
+ * const i18n = createI18n({
+ *   languages: [
+ *     { code: "en", name: "English" },
+ *     { code: "es", name: "Español" },
+ *   ],
+ *   storageKey: "myapp_locale",
+ *   initialTranslations: enTranslations,
+ *   loadTranslations: (locale) => fetch(`/locales/${locale}.json`).then(r => r.json()),
+ * });
+ *
+ * // Use in components
+ * <p>{i18n.t("greeting")}</p>
+ * <p>Current: {i18n.locale}</p>
+ *
+ * // Initialize on app mount
+ * onMount(() => i18n.init());
+ * ```
+ */
+export declare function createI18n(options: I18nOptions): I18nStore;
+export interface I18nContextValue {
+    i18n: I18nStore;
+}
+export declare const I18nContext: import("solid-js").Context<I18nContextValue | undefined>;
+export declare function useI18n(): I18nStore;
+export interface I18nProviderProps {
+    i18n: I18nStore;
+    children: JSX.Element;
+}
+/**
+ * Provider component for i18n context
+ */
+export declare const I18nProvider: FlowComponent<I18nProviderProps>;

package/dist/components/language-switcher/createI18n.js

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function getNestedValue(obj, path) {
+    const keys = path.split(".");
+    let value = obj;
+    for (const key of keys){
+        value = value?.[key];
+        if (void 0 === value) return path;
+    }
+    return "string" == typeof value ? value : path;
+}
+function createI18n(options) {
+    const { languages, defaultLanguage = languages[0]?.code ?? "en", storageKey, loadTranslations, initialTranslations = {} } = options;
+    const supportedCodes = languages.map((l)=>l.code);
+    const languageNames = languages.reduce((acc, lang)=>({
+            ...acc,
+            [lang.code]: lang.name
+        }), {});
+    const [localeSignal, setLocaleSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(defaultLanguage);
+    const [translations, setTranslations] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialTranslations);
+    const [isLoadingSignal, setIsLoading] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const t = (key)=>getNestedValue(translations(), key);
+    const setLocale = async (lang)=>{
+        if (!supportedCodes.includes(lang)) lang = defaultLanguage;
+        if (lang === localeSignal() && Object.keys(translations()).length > 0) return;
+        setIsLoading(true);
+        try {
+            const minDelay = new Promise((resolve)=>setTimeout(resolve, 100));
+            let data;
+            await minDelay;
+            data = lang === defaultLanguage && Object.keys(initialTranslations).length > 0 ? initialTranslations : loadTranslations ? await loadTranslations(lang) : initialTranslations;
+            setTranslations(data);
+            setLocaleSignal(lang);
+            if ("undefined" != typeof window) localStorage.setItem(storageKey, lang);
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    const init = async ()=>{
+        if ("undefined" == typeof window) return;
+        const urlParams = new URLSearchParams(globalThis.location.search);
+        const urlLang = urlParams.get("lang");
+        const saved = localStorage.getItem(storageKey);
+        const browserLang = navigator.language.split("-")[0];
+        let detected;
+        if (urlLang && supportedCodes.includes(urlLang)) {
+            detected = urlLang;
+            urlParams.delete("lang");
+            const newUrl = urlParams.toString() ? `${globalThis.location.pathname}?${urlParams.toString()}` : globalThis.location.pathname;
+            globalThis.history.replaceState({}, "", newUrl);
+        } else detected = saved && supportedCodes.includes(saved) ? saved : supportedCodes.includes(browserLang) ? browserLang : defaultLanguage;
+        await setLocale(detected);
+    };
+    return {
+        get locale () {
+            return localeSignal();
+        },
+        get isLoading () {
+            return isLoadingSignal();
+        },
+        t,
+        setLocale,
+        init,
+        languages,
+        languageNames,
+        supportedCodes
+    };
+}
+const I18nContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+function useI18n() {
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(I18nContext);
+    if (!context) throw new Error("useI18n must be used within an I18nProvider");
+    return context.i18n;
+}
+const I18nProvider = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(I18nContext.Provider, {
+        get value () {
+            return {
+                i18n: props.i18n
+            };
+        },
+        get children () {
+            return props.children;
+        }
+    });
+export { I18nContext, I18nProvider, createI18n, useI18n };

package/dist/components/language-switcher/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LanguageSwitcher } from "./LanguageSwitcher";
+export type { LanguageSwitcherProps } from "./LanguageSwitcher";
+export { createI18n, I18nProvider, I18nContext, useI18n, type I18nStore, type I18nOptions, type I18nContextValue, type I18nProviderProps, type Language, } from "./createI18n";

package/dist/components/language-switcher/index.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__ from "./LanguageSwitcher.js";
+import * as __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__ from "./createI18n.js";
+var __webpack_exports__I18nContext = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nContext;
+var __webpack_exports__I18nProvider = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nProvider;
+var __webpack_exports__LanguageSwitcher = __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__["default"];
+var __webpack_exports__createI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.createI18n;
+var __webpack_exports__useI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.useI18n;
+export { __webpack_exports__I18nContext as I18nContext, __webpack_exports__I18nProvider as I18nProvider, __webpack_exports__LanguageSwitcher as LanguageSwitcher, __webpack_exports__createI18n as createI18n, __webpack_exports__useI18n as useI18n };

package/dist/components/link/Link.d.ts

@@ -0,0 +1,13 @@
+import "./link.css";
+import { type JSX } from "solid-js";
+import type { ComponentColor, IComponentBaseProps } from "../types";
+export type LinkProps = JSX.AnchorHTMLAttributes<HTMLAnchorElement> & IComponentBaseProps & {
+    color?: ComponentColor;
+    hover?: boolean;
+    asChild?: boolean;
+    "aria-current"?: "page" | "step" | "location" | "date" | "time" | boolean;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+};
+declare const Link: (props: LinkProps) => JSX.Element;
+export default Link;

package/dist/components/link/Link.js

@@ -0,0 +1,70 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./link.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>");
+const Link = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "href",
+        "color",
+        "hover",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "asChild",
+        "aria-current",
+        "aria-label",
+        "aria-describedby"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("link", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "link-hover": false !== local.hover,
+            "link-neutral": "neutral" === local.color,
+            "link-primary": "primary" === local.color,
+            "link-secondary": "secondary" === local.color,
+            "link-accent": "accent" === local.color,
+            "link-info": "info" === local.color,
+            "link-success": "success" === local.color,
+            "link-warning": "warning" === local.color,
+            "link-error": "error" === local.color,
+            "link-ghost": "ghost" === local.color
+        }), local.class, local.className));
+    const ariaCurrent = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-current"]);
+    const ariaLabel = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-label"]);
+    const ariaDescribedby = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-describedby"]);
+    if (local.asChild) return resolvedChildren();
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get href () {
+                return local.href;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["aria-current"] () {
+                return ariaCurrent();
+            },
+            get ["aria-label"] () {
+                return ariaLabel();
+            },
+            get ["aria-describedby"] () {
+                return ariaDescribedby();
+            },
+            rel: "noopener noreferrer"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const link_Link = Link;
+export { link_Link as default };

package/dist/components/link/index.d.ts

@@ -0,0 +1 @@
+export { default, type LinkProps } from "./Link";

package/dist/components/link/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Link_js_42733813__ from "./Link.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Link_js_42733813__["default"];
+export { __webpack_exports__default as default };

package/dist/components/link/link.css

@@ -0,0 +1,153 @@
+@layer components {
+  .link {
+      cursor: pointer;
+      text-decoration-line: underline;
+    }
+
+  .link:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .link:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .link:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+  .link-accent {
+      color: var(--color-accent);
+    }
+
+  @media (hover: hover) {
+    .link-accent:hover {
+      color: var(--color-accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-accent:hover {
+      color: color-mix(in oklab, var(--color-accent) 80%, #000);
+    }
+    }
+    }
+
+  .link-error {
+      color: var(--color-error);
+    }
+
+  @media (hover: hover) {
+    .link-error:hover {
+      color: var(--color-error);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-error:hover {
+      color: color-mix(in oklab, var(--color-error) 80%, #000);
+    }
+    }
+    }
+
+  .link-info {
+      color: var(--color-info);
+    }
+
+  @media (hover: hover) {
+    .link-info:hover {
+      color: var(--color-info);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-info:hover {
+      color: color-mix(in oklab, var(--color-info) 80%, #000);
+    }
+    }
+    }
+
+  .link-neutral {
+      color: var(--color-neutral);
+    }
+
+  @media (hover: hover) {
+    .link-neutral:hover {
+      color: var(--color-neutral);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-neutral:hover {
+      color: color-mix(in oklab, var(--color-neutral) 80%, #000);
+    }
+    }
+    }
+
+  .link-primary {
+      color: var(--color-primary);
+    }
+
+  @media (hover: hover) {
+    .link-primary:hover {
+      color: var(--color-primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-primary:hover {
+      color: color-mix(in oklab, var(--color-primary) 80%, #000);
+    }
+    }
+    }
+
+  .link-secondary {
+      color: var(--color-secondary);
+    }
+
+  @media (hover: hover) {
+    .link-secondary:hover {
+      color: var(--color-secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-secondary:hover {
+      color: color-mix(in oklab, var(--color-secondary) 80%, #000);
+    }
+    }
+    }
+
+  .link-success {
+      color: var(--color-success);
+    }
+
+  @media (hover: hover) {
+    .link-success:hover {
+      color: var(--color-success);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-success:hover {
+      color: color-mix(in oklab, var(--color-success) 80%, #000);
+    }
+    }
+    }
+
+  .link-warning {
+      color: var(--color-warning);
+    }
+
+  @media (hover: hover) {
+    .link-warning:hover {
+      color: var(--color-warning);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-warning:hover {
+      color: color-mix(in oklab, var(--color-warning) 80%, #000);
+    }
+    }
+    }
+
+  .link-hover {
+      text-decoration-line: none;
+    }
+
+  @media (hover: hover) {
+    .link-hover:hover {
+      text-decoration-line: underline;
+    }
+    }
+}

package/dist/components/live-chat/LiveChatBubble.d.ts

@@ -0,0 +1,53 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { LiveChatPanelProps } from "./LiveChatPanel";
+export interface LiveChatBubbleProps extends IComponentBaseProps {
+    /**
+     * Position of the chat bubble
+     * @default "bottom-right"
+     */
+    position?: "bottom-right" | "bottom-left";
+    /**
+     * ARIA label for the button
+     * @default "Open chat"
+     */
+    "aria-label"?: string;
+    /**
+     * Number of unread messages to show in badge
+     * @default 0
+     */
+    unreadCount?: number;
+    /**
+     * Auto-scroll to the latest message when new messages are appended
+     * @default true
+     */
+    autoScrollOnNewMessage?: boolean;
+    /**
+     * Auto-scroll behavior when moving to the latest message
+     * @default "instant"
+     */
+    autoScrollBehavior?: "instant" | "smooth";
+    /**
+     * Reserved for backward compatibility.
+     * Auto-scroll now always follows new messages when enabled.
+     */
+    stickToBottomThreshold?: number;
+    /**
+     * Props to pass to the LiveChatPanel when opened
+     */
+    panelProps?: Omit<LiveChatPanelProps, "onClose">;
+    /**
+     * Callback when chat is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when chat is closed
+     */
+    onClose?: () => void;
+    /**
+     * Custom children to render inside the button (replaces default icons)
+     */
+    children?: JSX.Element;
+}
+declare const LiveChatBubble: Component<LiveChatBubbleProps>;
+export default LiveChatBubble;

package/dist/components/live-chat/LiveChatBubble.js

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__ from "./LiveChatPanel.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="absolute -top-1 -right-1 w-5 h-5 bg-error text-error-content text-xs font-bold rounded-full flex items-center justify-center animate-pulse">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button><span class="pointer-events-none absolute inset-0 rounded-full bg-primary animate-ping opacity-20 group-hover:opacity-0 transition-opacity">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5 sm:w-6 sm:h-6"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5 sm:w-6 sm:h-6"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">');
+const LiveChatBubble = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "position",
+        "aria-label",
+        "unreadCount",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
+        "panelProps",
+        "onOpen",
+        "onClose",
+        "children",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [internalUnread, setInternalUnread] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.unreadCount ?? 0);
+    const unreadCount = ()=>local.unreadCount ?? internalUnread();
+    const toggleChat = ()=>{
+        const newState = !isOpen();
+        setIsOpen(newState);
+        if (newState) {
+            setInternalUnread(0);
+            local.onOpen?.();
+        } else local.onClose?.();
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        local.onClose?.();
+    };
+    const positionClasses = ()=>{
+        const pos = local.position ?? "bottom-right";
+        return "bottom-left" === pos ? "left-4" : "right-4";
+    };
+    const buttonClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("fixed bottom-5 z-50 w-12 h-12 sm:w-14 sm:h-14 bg-primary text-primary-content rounded-full shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 flex items-center justify-center group", positionClasses(), (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    return [
+        (()=>{
+            var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                onClick: toggleChat,
+                get ["class"] () {
+                    return buttonClasses();
+                },
+                get style () {
+                    return local.style;
+                },
+                get ["aria-label"] () {
+                    return local["aria-label"] ?? "Open chat";
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return !isOpen();
+                    },
+                    get fallback () {
+                        return _tmpl$4();
+                    },
+                    get children () {
+                        return _tmpl$3();
+                    }
+                }), _el$3);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>unreadCount() > 0)() && !isOpen();
+                },
+                get children () {
+                    var _el$2 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
+                        var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>unreadCount() > 9);
+                        return ()=>_c$() ? "9+" : unreadCount();
+                    })());
+                    return _el$2;
+                }
+            }), _el$3);
+            return _el$;
+        })(),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return isOpen();
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>local.panelProps ?? {}, {
+                    get autoScrollOnNewMessage () {
+                        return local.panelProps?.autoScrollOnNewMessage ?? local.autoScrollOnNewMessage;
+                    },
+                    get autoScrollBehavior () {
+                        return local.panelProps?.autoScrollBehavior ?? local.autoScrollBehavior;
+                    },
+                    get stickToBottomThreshold () {
+                        return local.panelProps?.stickToBottomThreshold ?? local.stickToBottomThreshold;
+                    },
+                    onClose: handleClose
+                }));
+            }
+        })
+    ];
+};
+const live_chat_LiveChatBubble = LiveChatBubble;
+export { live_chat_LiveChatBubble as default };

package/dist/components/live-chat/LiveChatPanel.d.ts

@@ -0,0 +1,69 @@
+import { type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";
+export interface LiveChatPanelProps extends IComponentBaseProps {
+    /**
+     * Callback when the panel close button is clicked
+     */
+    onClose: () => void;
+    /**
+     * Title shown in the header
+     * @default "Chat with us"
+     */
+    title?: string;
+    /**
+     * Placeholder text for the input field
+     * @default "Message support..."
+     */
+    placeholder?: string;
+    /**
+     * Label for the close button (for accessibility)
+     * @default "Close chat"
+     */
+    closeLabel?: string;
+    /**
+     * Label for the send button
+     * @default "Send"
+     */
+    sendLabel?: string;
+    /**
+     * Empty state message when there are no messages
+     * @default "No messages yet. Start a conversation!"
+     */
+    emptyMessage?: string;
+    /**
+     * Enable mock mode with demo messages
+     * @default false
+     */
+    mockMode?: boolean;
+    /**
+     * Initial messages to display (only used if mockMode is false)
+     */
+    messages?: ChatMessage[];
+    /**
+     * Callback when a message is sent
+     * Should return the message ID and timestamp from the server
+     */
+    onSendMessage?: (payload: SendMessagePayload) => Promise<SendMessageResponse>;
+    /**
+     * Whether a message is currently being sent
+     */
+    isSending?: boolean;
+    /**
+     * Auto-scroll to the latest message when new messages are appended
+     * @default true
+     */
+    autoScrollOnNewMessage?: boolean;
+    /**
+     * Auto-scroll behavior when moving to the latest message
+     * @default "instant"
+     */
+    autoScrollBehavior?: "instant" | "smooth";
+    /**
+     * Reserved for backward compatibility.
+     * Auto-scroll now always follows new messages when enabled.
+     */
+    stickToBottomThreshold?: number;
+}
+declare const LiveChatPanel: Component<LiveChatPanelProps>;
+export default LiveChatPanel;