@antscorp/antsomi-ui 2.0.84 → 2.0.86-text-editor-beta.1

package/es/components/organism/TextEditor/utils/smartTag.d.ts

@@ -0,0 +1,49 @@
+import { EditorView } from '@tiptap/pm/view';
+import { SmartTagHandler } from '../types';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export declare const handleSmartTagAction: (event: React.MouseEvent, view: EditorView, smartTagHandler?: SmartTagHandler) => void;
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export declare const getSmartTagAtPosition: (view: EditorView, pos: number) => import("prosemirror-model").Node | null;
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export declare const getAllSmartTags: (view: EditorView) => {
+    node: any;
+    pos: number;
+}[];
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export declare const findSmartTagById: (view: EditorView, id: string) => null;
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export declare const isPositionInSmartTag: (view: EditorView, pos: number) => boolean;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export declare const getSmartTagAtCursor: (view: EditorView) => {
+    id: any;
+    content: any;
+    node: import("prosemirror-model").Node;
+} | null;

package/es/components/organism/TextEditor/utils/smartTag.js

@@ -0,0 +1,89 @@
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export const handleSmartTagAction = (event, view, smartTagHandler) => {
+    const { state } = view;
+    const { from, to } = state.selection;
+    const smartTagNode = state.doc.nodeAt(from);
+    const smartTagId = smartTagNode?.attrs.id;
+    if (smartTagId) {
+        smartTagHandler?.edit?.(smartTagId, event);
+    }
+    else {
+        const selectedText = state.doc.textBetween(from, to);
+        if (selectedText) {
+            smartTagHandler?.setNew?.({
+                selectionText: selectedText,
+            });
+        }
+    }
+};
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export const getSmartTagAtPosition = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (node && node.type.name === 'smartTag') {
+        return node;
+    }
+    return null;
+};
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export const getAllSmartTags = (view) => {
+    const smartTags = [];
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag') {
+            smartTags.push({ node, pos });
+        }
+    });
+    return smartTags;
+};
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export const findSmartTagById = (view, id) => {
+    let result = null;
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag' && node.attrs.id === id) {
+            result = { node, pos };
+            return false; // Stop traversal
+        }
+    });
+    return result;
+};
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export const isPositionInSmartTag = (view, pos) => getSmartTagAtPosition(view, pos) !== null;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export const getSmartTagAtCursor = (view) => {
+    const { selection } = view.state;
+    const node = getSmartTagAtPosition(view, selection.from);
+    return node
+        ? {
+            id: node.attrs.id,
+            content: node.attrs.content,
+            node,
+        }
+        : null;
+};

package/es/components/organism/TextEditor/utils/style.d.ts

@@ -0,0 +1,78 @@
+import { TextStyle } from '../types';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export declare const textStyleFromElStyle: <T extends CSSStyleDeclaration>(style: T) => Partial<TextStyle>;
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export declare const appendTextStyleToEl: (el: HTMLElement, style: Partial<TextStyle>) => void;
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export declare function styleObjectToString(styleObj: Record<string, unknown>): string;
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export declare function normalizeFontFamily(fontFamily: string): string;
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export declare const fontWithFallback: (fontFamily: string, defaultFont?: string) => string;
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export declare const isLinkColor: (color: string) => boolean;
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export declare function extractCSSVariables(styleObj: Record<string, unknown>): {
+    cssVariables: Record<string, unknown>;
+    regularStyles: Record<string, unknown>;
+};
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export declare function mergeTextStyles(...styles: Partial<TextStyle>[]): Partial<TextStyle>;
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export declare function isCompleteTextStyle(style: Partial<TextStyle>): style is TextStyle;
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export declare function textStyleToCSSStyle(textStyle: Partial<TextStyle>): React.CSSProperties;

package/es/components/organism/TextEditor/utils/style.js

@@ -0,0 +1,193 @@
+import { DEFAULT_TEXT_STYLE, LINK_TEXT_COLOR } from '../constants';
+import { uniqBy } from 'lodash';
+import tinycolor from 'tinycolor2';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export const textStyleFromElStyle = (style) => ({
+    color: style.color || DEFAULT_TEXT_STYLE.color,
+    fontFamily: style.fontFamily || DEFAULT_TEXT_STYLE.fontFamily,
+    fontSize: style.fontSize || DEFAULT_TEXT_STYLE.fontSize,
+    backgroundColor: style.backgroundColor,
+    lineHeight: style.lineHeight || DEFAULT_TEXT_STYLE.lineHeight,
+});
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export const appendTextStyleToEl = (el, style) => {
+    if (style.color) {
+        el.style.color = style.color;
+    }
+    if (style.fontSize) {
+        el.style.fontSize = style.fontSize;
+    }
+    if (style.fontFamily) {
+        el.style.fontFamily = style.fontFamily;
+    }
+    if (style.backgroundColor) {
+        el.style.backgroundColor = style.backgroundColor;
+    }
+    if (style.lineHeight) {
+        el.style.lineHeight = style.lineHeight;
+    }
+    if (style.fontWeight) {
+        el.style.fontWeight = style.fontWeight;
+    }
+};
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export function styleObjectToString(styleObj) {
+    return Object.entries(styleObj)
+        .map(([key, value]) => {
+        // Nếu key đã là kebab-case hoặc bắt đầu bằng dấu '-', giữ nguyên
+        const isPrefixed = key.startsWith('-');
+        const kebabKey = isPrefixed ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+        return `${kebabKey}: ${value}`;
+    })
+        .join('; ');
+}
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export function normalizeFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string')
+        return '';
+    const genericFamilies = new Set([
+        'serif',
+        'sans-serif',
+        'monospace',
+        'cursive',
+        'fantasy',
+        'system-ui',
+        'ui-serif',
+        'ui-sans-serif',
+        'ui-monospace',
+        'ui-rounded',
+        'math',
+        'emoji',
+        'fangsong',
+    ]);
+    return uniqBy(fontFamily.split(','), name => name.trim())
+        .map(name => {
+        const trimmed = name.trim();
+        // Preserve already quoted names
+        const isQuoted = (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+            (trimmed.startsWith("'") && trimmed.endsWith("'"));
+        if (isQuoted)
+            return trimmed;
+        // Do not quote generic family names
+        if (genericFamilies.has(trimmed))
+            return trimmed;
+        // Quote if contains whitespace or special characters
+        const needsQuotes = /[^\w-]/.test(trimmed);
+        return needsQuotes ? `"${trimmed}"` : trimmed;
+    })
+        .join(', ');
+}
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export const fontWithFallback = (fontFamily, defaultFont = DEFAULT_TEXT_STYLE.fontFamily) => normalizeFontFamily(fontFamily ? `${fontFamily}, ${defaultFont}` : defaultFont);
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export const isLinkColor = (color) => tinycolor.equals(color, LINK_TEXT_COLOR);
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export function extractCSSVariables(styleObj) {
+    const cssVariables = {};
+    const regularStyles = {};
+    Object.entries(styleObj).forEach(([key, value]) => {
+        if (key.startsWith('--')) {
+            cssVariables[key] = value;
+        }
+        else {
+            regularStyles[key] = value;
+        }
+    });
+    return { cssVariables, regularStyles };
+}
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export function mergeTextStyles(...styles) {
+    return styles.reduce((merged, style) => ({
+        ...merged,
+        ...Object.fromEntries(Object.entries(style).filter(([_, value]) => value !== undefined && value !== null)),
+    }), {});
+}
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export function isCompleteTextStyle(style) {
+    const requiredProps = [
+        'fontFamily',
+        'fontSize',
+        'color',
+        'backgroundColor',
+        'lineHeight',
+        'fontWeight',
+    ];
+    return requiredProps.every(prop => style[prop] !== undefined);
+}
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export function textStyleToCSSStyle(textStyle) {
+    const cssStyle = {};
+    if (textStyle.fontFamily) {
+        cssStyle.fontFamily = textStyle.fontFamily;
+    }
+    if (textStyle.fontSize) {
+        cssStyle.fontSize = textStyle.fontSize;
+    }
+    if (textStyle.color) {
+        cssStyle.color = textStyle.color;
+    }
+    if (textStyle.backgroundColor) {
+        cssStyle.backgroundColor = textStyle.backgroundColor;
+    }
+    if (textStyle.lineHeight) {
+        cssStyle.lineHeight = textStyle.lineHeight;
+    }
+    if (textStyle.fontWeight) {
+        cssStyle.fontWeight = textStyle.fontWeight;
+    }
+    return cssStyle;
+}

package/es/components/organism/index.d.ts

@@ -15,4 +15,5 @@ export { AccountProfile, type AccountSettingProps } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -15,4 +15,5 @@ export { AccountProfile } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.scss

@@ -0,0 +1 @@
+@import url('./TextEditor/index.scss');

package/es/config/index.d.ts

@@ -4,6 +4,7 @@ export declare const ENV: {
     readonly SANDBOX: "sandbox";
     readonly SANDBOX_CDP: "sandbox-cdp";
     readonly STAGING: "staging";
+    readonly PRO_VN: "pro-vn";
 };
 export declare const isDev: boolean;
 export declare const ENDPOINT: {

package/es/config/index.js

@@ -5,6 +5,7 @@ export const ENV = {
     SANDBOX: 'sandbox',
     SANDBOX_CDP: 'sandbox-cdp',
     STAGING: 'staging',
+    PRO_VN: 'pro-vn',
 };
 export const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'sandbox';
 /* VERSION */

package/es/constants/api.d.ts

@@ -8,6 +8,7 @@ export declare const CDP_API: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const MEDIA_TEMPLATE_API: {
     development: string;
@@ -15,6 +16,7 @@ export declare const MEDIA_TEMPLATE_API: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const ANTALYSER_API: {
     development: string;
@@ -22,6 +24,7 @@ export declare const ANTALYSER_API: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const CDP_ROUTE: {
     development: string;
@@ -29,6 +32,7 @@ export declare const CDP_ROUTE: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const ISSUE_API: {
     development: string;
@@ -36,6 +40,7 @@ export declare const ISSUE_API: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const PLATFORM_API = "https://platform.ants.tech";
 export declare const PERMISSION_API = "https://permission.antsomi.com";
@@ -48,6 +53,7 @@ export declare const APP_PERMISSION_DOMAIN: {
         "sandbox-cdp": string;
         staging: string;
         production: string;
+        "pro-vn": string;
     };
 };
 export declare const PERMISSION_ENV_API: {
@@ -56,6 +62,7 @@ export declare const PERMISSION_ENV_API: {
     "sandbox-cdp": string;
     staging: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const APP_IAM_DOMAIN: {
     [x: string]: {
@@ -63,15 +70,18 @@ export declare const APP_IAM_DOMAIN: {
         sandbox: string;
         staging: string;
         production: string;
+        "pro-vn": string;
     };
 };
 export declare const COLUMN_DOMAIN: {
     development: string;
     sandbox: string;
     production: string;
+    "pro-vn": string;
 };
 export declare const FILTER_DOMAIN: {
     development: string;
     sandbox: string;
     production: string;
+    "pro-vn": string;
 };

package/es/constants/api.js

@@ -12,6 +12,7 @@ export const CDP_API = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-app.cdp.asia',
     [ENV.STAGING]: 'https://staging-cdp.antsomi.com',
     [ENV.PROD]: 'https://cdp.antsomi.com',
+    [ENV.PRO_VN]: 'https://ap2-cdp.antsomi.com',
 };
 export const MEDIA_TEMPLATE_API = {
     [ENV.DEV]: 'https://sandbox-media-template.antsomi.com/cdp',
@@ -19,6 +20,7 @@ export const MEDIA_TEMPLATE_API = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-media-template.antsomi.com/cdp',
     [ENV.STAGING]: 'https://staging-media-template.antsomi.com',
     [ENV.PROD]: 'https://media-template.antsomi.com',
+    [ENV.PRO_VN]: 'https://staging-media-template.antsomi.com',
 };
 export const ANTALYSER_API = {
     [ENV.DEV]: 'https://sandbox-antalyser.antsomi.com',
@@ -26,6 +28,7 @@ export const ANTALYSER_API = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-antalyser.antsomi.com',
     [ENV.STAGING]: 'https://sandbox-antalyser.ants.vn',
     [ENV.PROD]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.PRO_VN]: 'https://sandbox-antalyser.ants.vn',
 };
 export const CDP_ROUTE = {
     [ENV.DEV]: 'https://sandbox-cdp.antsomi.com',
@@ -33,6 +36,7 @@ export const CDP_ROUTE = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-cdp.antsomi.com',
     [ENV.STAGING]: 'https://staging-cdp.antsomi.com',
     [ENV.PROD]: 'https://cdp.antsomi.com',
+    [ENV.PRO_VN]: 'https://ap2-cdp.antsomi.com',
 };
 export const ISSUE_API = {
     [ENV.DEV]: 'https://sandbox-issue.antsomi.com',
@@ -40,6 +44,7 @@ export const ISSUE_API = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-issue.antsomi.com',
     [ENV.STAGING]: 'https://issue.antsomi.com',
     [ENV.PROD]: 'https://issue.antsomi.com',
+    [ENV.PRO_VN]: 'https://issue.antsomi.com',
 };
 export const PLATFORM_API = 'https://platform.ants.tech';
 export const PERMISSION_API = 'https://permission.antsomi.com';
@@ -51,6 +56,7 @@ const PERMISSION_URLS = {
     [ENV.SANDBOX_CDP]: 'https://sandbox-permission.ants.vn',
     [ENV.STAGING]: 'https://permission.antsomi.com',
     [ENV.PROD]: 'https://permission.antsomi.com',
+    [ENV.PRO_VN]: 'https://permission.antsomi.com',
 };
 export const APP_PERMISSION_DOMAIN = {
     [DATAFLOWS]: PERMISSION_URLS,
@@ -63,12 +69,14 @@ export const APP_IAM_DOMAIN = {
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
         [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
+        [ENV.PRO_VN]: 'https://iam.ants.tech',
     },
     [APP_ANTALYSER]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
         [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
+        [ENV.PRO_VN]: 'https://iam.ants.tech',
     },
 };
 /* Data Table Performance */
@@ -76,9 +84,11 @@ export const COLUMN_DOMAIN = {
     [ENV.DEV]: 'https://column.ants.tech',
     [ENV.SANDBOX]: 'https://column.ants.tech',
     [ENV.PROD]: 'https://column.ants.tech',
+    [ENV.PRO_VN]: 'https://column.ants.tech',
 };
 export const FILTER_DOMAIN = {
     [ENV.DEV]: 'https://column.ants.tech',
     [ENV.SANDBOX]: 'https://column.ants.tech',
     [ENV.PROD]: 'https://column.ants.tech',
+    [ENV.PRO_VN]: 'https://column.ants.tech',
 };

package/es/hooks/index.d.ts

@@ -26,3 +26,4 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';

package/es/hooks/index.js

@@ -45,3 +45,4 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';

package/es/hooks/useBroadcastedLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export declare function useBroadcastedLocalStorage<T>(key: string, initialValue: T): {
+    readonly value: T;
+    readonly setValue: (next: T | ((prev: T) => T)) => void;
+    readonly remove: () => void;
+};

package/es/hooks/useBroadcastedLocalStorage.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import { useEffect, useState, useRef } from 'react';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+export function useBroadcastedLocalStorage(key, initialValue) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === 'undefined')
+            return initialValue;
+        try {
+            const saved = window.localStorage.getItem(key);
+            return saved != null ? JSON.parse(saved) : initialValue;
+        }
+        catch {
+            return initialValue;
+        }
+    });
+    // We keep a ref to avoid re-creating the channel on every render
+    const channelRef = useRef(null);
+    // Initialize BroadcastChannel once
+    useEffect(() => {
+        if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+            console.warn('BroadcastChannel not supported in this environment');
+            return;
+        }
+        const channel = new BroadcastChannel(`localstorage_${key}`);
+        channelRef.current = channel;
+        // Listen for incoming messages
+        const onMessage = (event) => {
+            setValue(event.data.value);
+        };
+        channel.addEventListener('message', onMessage);
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+        };
+    }, [key]);
+    // Whenever `value` changes, persist and broadcast
+    useDeepCompareEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (err) {
+            console.error('Failed to write to localStorage:', err);
+        }
+        if (channelRef.current) {
+            channelRef.current.postMessage({ value });
+        }
+    }, [key, value]);
+    // Expose setter that mirrors functional API of useState
+    const setValueAndBroadcast = (next) => {
+        setValue(prev => {
+            const computed = next instanceof Function ? next(prev) : next;
+            return computed;
+        });
+    };
+    // Optional: a remove function
+    const remove = () => {
+        try {
+            window.localStorage.removeItem(key);
+            setValue(initialValue);
+            if (channelRef.current) {
+                channelRef.current.postMessage({ value: initialValue });
+            }
+        }
+        catch (err) {
+            console.error('Failed to remove localStorage item:', err);
+        }
+    };
+    return { value, setValue: setValueAndBroadcast, remove };
+}