hypercrm 1.0.4 → 1.0.6

package/assets/widget.js

@@ -53,8 +53,8 @@
   const styles = `
     .hypercrm-widget-container {
       position: fixed;
-      bottom: 24px;
-      right: 24px;
+      bottom: calc(24px + var(--hypercrm-offset-bottom, 0px));
+      right: calc(24px + var(--hypercrm-offset-side, 0px));
       z-index: 2147483000;
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       color: var(--hypercrm-text-primary, #111827);
@@ -78,13 +78,15 @@
       --hypercrm-radius-lg: 20px;
       --hypercrm-radius-md: 16px;
       --hypercrm-radius-sm: 12px;
+      --hypercrm-offset-bottom: 0px;
+      --hypercrm-offset-side: 0px;
       color-scheme: light;
       -webkit-font-smoothing: antialiased;
     }
 
     .hypercrm-widget-container.hypercrm-position-left {
       right: auto;
-      left: 24px;
+      left: calc(24px + var(--hypercrm-offset-side, 0px));
     }
 
     .hypercrm-widget-container.hypercrm-position-left .hypercrm-widget-panel {
@@ -1291,12 +1293,12 @@
 
     @media (max-width: 640px) {
       .hypercrm-widget-container {
-        bottom: 16px;
-        right: 16px;
+        bottom: calc(16px + var(--hypercrm-offset-bottom, 0px));
+        right: calc(16px + var(--hypercrm-offset-side, 0px));
       }
 
       .hypercrm-widget-container.hypercrm-position-left {
-        left: 16px;
+        left: calc(16px + var(--hypercrm-offset-side, 0px));
         right: auto;
       }
 
@@ -1331,6 +1333,7 @@
       this.theme = { ...DEFAULT_THEME, ...(this.options.theme || {}) };
       this.colorModePreference = this.options.colorMode || 'light';
       this.position = this.normalizePosition(this.options.position);
+      this.offset = this.normalizeOffsets(this.options.offset);
       this.mediaColorQuery = null;
       this.systemColorListener = null;
       this.systemColorListenerAttached = false;
@@ -1401,6 +1404,22 @@
       return value === 'left' ? 'left' : 'right';
     }
 
+    normalizeOffsetValue(value) {
+      if (value === null || value === undefined || value === '') return 0;
+      const num = Number(value);
+      return Number.isFinite(num) ? num : 0;
+    }
+
+    normalizeOffsets(value) {
+      if (!value || typeof value !== 'object') {
+        return { bottom: 0, side: 0 };
+      }
+      return {
+        bottom: this.normalizeOffsetValue(value.bottom),
+        side: this.normalizeOffsetValue(value.side),
+      };
+    }
+
     applyPosition() {
       if (!this.container) return;
       const position = this.normalizePosition(this.position || this.options.position);
@@ -1414,6 +1433,19 @@
       this.applyPosition();
     }
 
+    applyOffsets() {
+      if (!this.container) return;
+      const offset = this.offset || { bottom: 0, side: 0 };
+      this.container.style.setProperty('--hypercrm-offset-bottom', `${offset.bottom}px`);
+      this.container.style.setProperty('--hypercrm-offset-side', `${offset.side}px`);
+    }
+
+    setOffset(offset) {
+      this.offset = this.normalizeOffsets(offset);
+      this.options.offset = this.offset;
+      this.applyOffsets();
+    }
+
     absUrl(url) {
       if (!url) return url;
       if (/^https?:/i.test(url)) return url;
@@ -1618,6 +1650,7 @@
       document.body.appendChild(container);
       this.container = container;
       this.applyPosition();
+      this.applyOffsets();
 
       // Lightbox overlay
       const lightbox = document.createElement('div');
@@ -2371,6 +2404,10 @@
         if (!this.options.position && this.orgInfo?.widget?.position) {
           this.setPosition(this.orgInfo.widget.position);
         }
+        const orgOffset = this.orgInfo?.widget?.offset;
+        if (!this.options.offset && orgOffset) {
+          this.setOffset(orgOffset);
+        }
         const iconUrl = this.orgInfo?.widget?.iconUrl;
         this.orgIconUrl = iconUrl ? this.absUrl(iconUrl) : null;
         this.updateHeaderIcons();
@@ -2954,6 +2991,9 @@
     setPosition(position) {
       if (activeWidget) activeWidget.setPosition(position);
     },
+    setOffset(offset) {
+      if (activeWidget) activeWidget.setOffset(offset);
+    },
     open() {
       if (activeWidget) activeWidget.openWidget();
     },

package/dist/index.d.ts

@@ -6,6 +6,10 @@ export interface WidgetOptions {
     theme?: Record<string, string>;
     colorMode?: 'light' | 'dark' | 'auto';
     position?: 'left' | 'right';
+    offset?: {
+        bottom?: number;
+        side?: number;
+    };
     autoOpen?: boolean;
     debug?: boolean;
     scriptUrl?: string;
@@ -15,12 +19,20 @@ export declare const destroyWidget: () => void;
 export declare const setWidgetTheme: (theme: Record<string, string>) => Promise<void>;
 export declare const setWidgetColorMode: (mode: "light" | "dark" | "auto") => Promise<void>;
 export declare const setWidgetPosition: (position: "left" | "right") => Promise<void>;
+export declare const setWidgetOffset: (offset: {
+    bottom?: number;
+    side?: number;
+}) => Promise<void>;
 declare const _default: {
     init: (options?: WidgetOptions) => Promise<any>;
     destroy: () => void;
     setTheme: (theme: Record<string, string>) => Promise<void>;
     setColorMode: (mode: "light" | "dark" | "auto") => Promise<void>;
     setPosition: (position: "left" | "right") => Promise<void>;
+    setOffset: (offset: {
+        bottom?: number;
+        side?: number;
+    }) => Promise<void>;
 };
 export default _default;
 declare global {
@@ -31,6 +43,10 @@ declare global {
             setTheme: (theme?: Record<string, string>) => void;
             setColorMode: (mode: 'light' | 'dark' | 'auto') => void;
             setPosition: (position: 'left' | 'right') => void;
+            setOffset: (offset: {
+                bottom?: number;
+                side?: number;
+            }) => void;
             open: () => void;
             close: () => void;
             toggle: () => void;

package/dist/index.js

@@ -95,10 +95,15 @@ export const setWidgetPosition = async (position) => {
     await ensureScriptLoaded();
     window.HyperCRMWidget.setPosition(position);
 };
+export const setWidgetOffset = async (offset) => {
+    await ensureScriptLoaded();
+    window.HyperCRMWidget.setOffset(offset || {});
+};
 export default {
     init: initWidget,
     destroy: destroyWidget,
     setTheme: setWidgetTheme,
     setColorMode: setWidgetColorMode,
     setPosition: setWidgetPosition,
+    setOffset: setWidgetOffset,
 };

package/dist/react.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
-import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, } from './index';
+import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, setWidgetOffset, } from './index';
 export const useHyperCRMWidget = (options = {}) => {
-    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, autoOpen, debug, scriptUrl, } = options;
+    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, offset, autoOpen, debug, scriptUrl, } = options;
     const readyRef = useRef(false);
-    const latestRef = useRef({ theme, colorMode, position });
+    const latestRef = useRef({ theme, colorMode, position, offset });
     useEffect(() => {
-        latestRef.current = { theme, colorMode, position };
-    }, [theme, colorMode, position]);
+        latestRef.current = { theme, colorMode, position, offset };
+    }, [theme, colorMode, position, offset]);
     useEffect(() => {
         let cancelled = false;
         readyRef.current = false;
@@ -18,6 +18,7 @@ export const useHyperCRMWidget = (options = {}) => {
             theme: latestRef.current.theme,
             colorMode: latestRef.current.colorMode,
             position: latestRef.current.position,
+            offset: latestRef.current.offset,
             autoOpen,
             debug,
             scriptUrl,
@@ -32,6 +33,8 @@ export const useHyperCRMWidget = (options = {}) => {
                 setWidgetColorMode(latest.colorMode);
             if (latest.position)
                 setWidgetPosition(latest.position);
+            if (latest.offset)
+                setWidgetOffset(latest.offset);
         })
             .catch((err) => {
             if (debug)
@@ -58,6 +61,11 @@ export const useHyperCRMWidget = (options = {}) => {
             return;
         setWidgetPosition(position);
     }, [position]);
+    useEffect(() => {
+        if (!readyRef.current || !offset)
+            return;
+        setWidgetOffset(offset);
+    }, [offset]);
 };
 export const HyperCRMWidget = (props) => {
     useHyperCRMWidget(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hypercrm",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "HyperCRM widget loader with optional React component.",
   "type": "module",
   "main": "./dist/index.js",