@customviews-js/customviews 1.2.0 → 1.4.0

package/dist/types/core/anchor-engine.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Descriptor for an anchor that represents a DOM element.
+ */
+interface AnchorDescriptor {
+    tag: string;
+    index: number;
+    parentId?: string;
+    textSnippet: string;
+    textHash: number;
+}
+/**
+ * Engine for generating and resolving robust anchors.
+ *
+ * It implements a simple anchor generation and resolution algorithm that uses a combination of
+ * structural, contextual, and content-based hints to generate a unique anchor for a given DOM element.
+ *
+ * The anchor is generated by first creating an AnchorDescriptor for the element, which contains
+ * information about the element's tag, index, parent ID, and text content. This descriptor is then
+ * serialized into a URL-safe string using a minification algorithm.
+ *
+ * The anchor is then resolved by searching for the element in the DOM using the serialized string.
+ *
+ */
+export declare class AnchorEngine {
+    /**
+     * Generates a simple hash code for a string.
+     *
+     * It takes each character's Unicode code point and uses it to update the hash value.
+     */
+    private static hashCode;
+    /**
+     * Normalizes text content by removing excessive whitespace.
+     *
+     * It trims leading and trailing whitespace and replaces multiple spaces with a single space.
+     */
+    private static normalizeText;
+    /**
+     * Creates an AnchorDescriptor for a given DOM element.
+     */
+    static createDescriptor(el: HTMLElement): AnchorDescriptor;
+    /**
+     * Serializes a list of AnchorDescriptors into a URL-safe string.
+     */
+    static serialize(descriptors: AnchorDescriptor[]): string;
+    /**
+     * Deserializes a URL-safe string back into a list of AnchorDescriptors.
+     */
+    static deserialize(encoded: string): AnchorDescriptor[];
+    /**
+     * Finds the best DOM element match for a descriptor.
+     */
+    static resolve(root: HTMLElement, descriptor: AnchorDescriptor): HTMLElement | null;
+}
+export {};
+//# sourceMappingURL=anchor-engine.d.ts.map

package/dist/types/core/anchor-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-engine.d.ts","sourceRoot":"","sources":["../../../src/core/anchor-engine.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,UAAU,gBAAgB;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAY;IAErB;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAWvB;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAI5B;;OAEG;IACH,MAAM,CAAC,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB;IAoC1D;;OAEG;IACH,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,gBAAgB,EAAE,GAAG,MAAM;IAczD;;OAEG;IACH,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE;IAiBvD;;OAEG;IACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,GAAG,WAAW,GAAG,IAAI;CA0DtF"}

package/dist/types/core/config.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_EXCLUDED_TAGS: string[];
+export declare const DEFAULT_EXCLUDED_IDS: string[];
+//# sourceMappingURL=config.d.ts.map

package/dist/types/core/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/core/config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,UAAiD,CAAC;AACpF,eAAO,MAAM,oBAAoB,UAAyE,CAAC"}

package/dist/types/core/core.d.ts

@@ -1,5 +1,6 @@
 import type { State, TabGroupConfig, Config } from "../types/types";
 import type { AssetsManager } from "./assets-manager";
+import { ShareManager } from "./share-manager";
 export interface CustomViewsOptions {
     assetsManager: AssetsManager;
     config: Config;
@@ -12,19 +13,26 @@ export declare class CustomViewsCore {
     private persistenceManager;
     private visibilityManager;
     private observer;
+    private shareManager;
+    private focusManager;
     private componentRegistry;
     private config;
     private stateChangeListeners;
     private showUrlEnabled;
     private lastAppliedState;
     constructor(opt: CustomViewsOptions);
+    getShareManager(): ShareManager;
+    /**
+     * Toggles the share mode on or off.
+     */
+    toggleShareMode(): void;
     /**
      * Scan the given element for toggles and tab groups, register them
      * Returns true if new components were found
      */
     private scan;
     /**
-     * Unscan the given element for toggles and tab groups, de-register them
+     * Unscan the given element for toggles and tab groups, de-register them from registry
      */
     private unscan;
     getConfig(): Config;

package/dist/types/core/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/core/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,oBAAoB,CAAyB;IACrD,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,gBAAgB,CAAsB;gBAElC,GAAG,EAAE,kBAAkB;IAUnC;;;OAGG;IACH,OAAO,CAAC,IAAI;IA8BZ;;OAEG;IACH,OAAO,CAAC,MAAM;IAoBP,SAAS,IAAI,MAAM;IAI1B;;OAEG;IACI,YAAY,IAAI,cAAc,EAAE,GAAG,SAAS;IAInD;;;;OAIG;IACH,OAAO,CAAC,uBAAuB;IA+B/B;;OAEG;IACI,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAarD;;OAEG;IACI,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAmBnE,IAAI;IAqBjB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,YAAY;YA+CN,qBAAqB;IAmBnC;;;;;MAKE;IACK,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,WAAW,CAAC;YAAC,GAAG,EAAE,MAAM,CAAC;SAAE,CAAC;KAAE;IA+BrH;;;;QAII;IACJ,OAAO,CAAC,WAAW;IAgCnB;;OAEG;IACI,cAAc;IAiBrB;;OAEG;IACI,uBAAuB,IAAI,MAAM,EAAE;IAY1C;;OAEG;IACI,gBAAgB;IAWhB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAuBpD;;OAEG;IACI,sBAAsB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzD;;OAEG;IACI,yBAAyB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAO5D;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACI,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAItD;;OAEG;IACI,4BAA4B,IAAI,OAAO,GAAG,IAAI;IAIrD,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,uBAAuB;CAYhC"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/core/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAStD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAY/C,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,YAAY,CAAe;IAEnC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,oBAAoB,CAAyB;IACrD,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,gBAAgB,CAAsB;gBAElC,GAAG,EAAE,kBAAkB;IAkB5B,eAAe,IAAI,YAAY;IAItC;;OAEG;IACI,eAAe,IAAI,IAAI;IAI9B;;;OAGG;IACH,OAAO,CAAC,IAAI;IA8BZ;;OAEG;IACH,OAAO,CAAC,MAAM;IAoBP,SAAS,IAAI,MAAM;IAI1B;;OAEG;IACI,YAAY,IAAI,cAAc,EAAE,GAAG,SAAS;IAInD;;;;OAIG;IACH,OAAO,CAAC,uBAAuB;IA+B/B;;OAEG;IACI,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAarD;;OAEG;IACI,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAmBnE,IAAI;IAwBjB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,YAAY;YA+CN,qBAAqB;IAmBnC;;;;;MAKE;IACK,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,WAAW,CAAC;YAAC,GAAG,EAAE,MAAM,CAAC;SAAE,CAAC;KAAE;IA+BrH;;;;QAII;IACJ,OAAO,CAAC,WAAW;IAgCnB;;OAEG;IACI,cAAc;IAiBrB;;OAEG;IACI,uBAAuB,IAAI,MAAM,EAAE;IAY1C;;OAEG;IACI,gBAAgB;IAWhB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAuBpD;;OAEG;IACI,sBAAsB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzD;;OAEG;IACI,yBAAyB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAO5D;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACI,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAItD;;OAEG;IACI,4BAA4B,IAAI,OAAO,GAAG,IAAI;IAIrD,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,uBAAuB;CAYhC"}

package/dist/types/core/custom-elements.d.ts

@@ -1,8 +1,8 @@
 /**
- * Custom Elements for Tab Groups and Tabs
+ * Defines the custom elements used by CustomViews.
  */
 /**
- * Register custom elements
+ * Registers all CustomViews custom elements with the CustomElementRegistry.
  */
 export declare function registerCustomElements(): void;
 //# sourceMappingURL=custom-elements.d.ts.map

package/dist/types/core/custom-elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-elements.d.ts","sourceRoot":"","sources":["../../../src/core/custom-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AAyDH;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAqB7C"}
+{"version":3,"file":"custom-elements.d.ts","sourceRoot":"","sources":["../../../src/core/custom-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AA0DH;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAqB7C"}

package/dist/types/core/focus-manager.d.ts

@@ -0,0 +1,38 @@
+export interface FocusManagerOptions {
+    excludedTags: string[];
+    excludedIds: string[];
+}
+export declare class FocusManager {
+    private rootEl;
+    private hiddenElements;
+    private dividers;
+    private exitBanner;
+    private excludedTags;
+    private excludedIds;
+    constructor(rootEl: HTMLElement, options: FocusManagerOptions);
+    /**
+     * Initializes the Focus Manager. Checks URL for focus parameter.
+     */
+    init(): void;
+    handleUrlChange(): void;
+    /**
+     * Applies Focus Mode based on encoded descriptors.
+     */
+    applyFocusMode(encodedDescriptors: string): void;
+    private injectStyles;
+    /**
+     * Hides irrelevant content and adds dividers.
+     */
+    private renderFocusedView;
+    private hideElement;
+    private insertDividersForContainer;
+    private createDivider;
+    private expandContext;
+    private removeExitBanner;
+    /**
+     * Override of renderFocusedView with robust logic
+     */
+    private showExitBanner;
+    exitFocusMode(): void;
+}
+//# sourceMappingURL=focus-manager.d.ts.map

package/dist/types/core/focus-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-manager.d.ts","sourceRoot":"","sources":["../../../src/core/focus-manager.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,mBAAmB;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,qBAAa,YAAY;IAQT,OAAO,CAAC,MAAM;IAN1B,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAc;gBAEb,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,mBAAmB;IAKrE;;OAEG;IACI,IAAI,IAAI,IAAI;IAIZ,eAAe,IAAI,IAAI;IAc9B;;OAEG;IACI,cAAc,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IA4BvD,OAAO,CAAC,YAAY;IAQpB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAyEzB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,0BAA0B;IAyBlC,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IAGH,OAAO,CAAC,cAAc;IAef,aAAa,IAAI,IAAI;CAyB/B"}

package/dist/types/core/share-manager.d.ts

@@ -0,0 +1,70 @@
+export interface ShareManagerOptions {
+    excludedTags: string[];
+    excludedIds: string[];
+}
+/**
+ * Manages the "Share Mode" for creating custom focus links.
+ * Implementing Robust Granular Sharing with "Innermost Wins" and "Level Up" UI.
+ */
+export declare class ShareManager {
+    private isActive;
+    private selectedElements;
+    private floatingBarEl;
+    private helperEl;
+    private currentHoverTarget;
+    private excludedTags;
+    private excludedIds;
+    private boundHandleHover;
+    private boundHandleClick;
+    private boundHandleKeydown;
+    constructor(options: ShareManagerOptions);
+    private listeners;
+    addStateChangeListener(listener: (isActive: boolean) => void): void;
+    removeStateChangeListener(listener: (isActive: boolean) => void): void;
+    private notifyListeners;
+    toggleShareMode(): void;
+    /**
+     * Activates the share mode.
+     * Injects styles, creates floating bar, and helper element.
+     * Adds event listeners for hover and click.
+     */
+    private activate;
+    private injectStyles;
+    /**
+     * Creates the hover helper element that shows up when hovering over a shareable element.
+     */
+    private createHelperPopover;
+    /**
+     * Handles mouse hover events.
+     *
+     * This function is called when the user hovers over an element.
+     * It checks if the element is shareable and highlights it.
+     * If a parent element is already selected, it highlights the parent instead,
+     * allowing the helper to remain visible for the selected parent.
+     *
+     * @param e The mouse event triggered by the hover.
+     */
+    private handleHover;
+    private setNewHoverTarget;
+    private positionHelper;
+    private handleSelectParent;
+    private handleClick;
+    private handleKeydown;
+    /**
+     * Toggles the selection state of a given HTML element.
+     * Implements selection logic:
+     * - If an ancestor of the element is already selected, the click is ignored.
+     * - If the element being selected is a parent of already selected elements, those children are deselected.
+     * @param el The HTMLElement to toggle selection for.
+     */
+    private toggleSelection;
+    private createFloatingBar;
+    private updateFloatingBarCount;
+    private clearAll;
+    private getShareUrl;
+    private generateLink;
+    private previewLink;
+    private clearHover;
+    cleanup(): void;
+}
+//# sourceMappingURL=share-manager.d.ts.map

package/dist/types/core/share-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-manager.d.ts","sourceRoot":"","sources":["../../../src/core/share-manager.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;GAGG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,gBAAgB,CAA0B;IAClD,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,gBAAgB,CAA0B;IAClD,OAAO,CAAC,gBAAgB,CAA0B;IAClD,OAAO,CAAC,kBAAkB,CAA6B;gBAE3C,OAAO,EAAE,mBAAmB;IAQxC,OAAO,CAAC,SAAS,CAA0C;IAEpD,sBAAsB,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI;IAInE,yBAAyB,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI;IAI7E,OAAO,CAAC,eAAe;IAIhB,eAAe,IAAI,IAAI;IAU9B;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,YAAY;IAOpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA6B3B;;;;;;;;;OASG;IACH,OAAO,CAAC,WAAW;IAkEnB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IA6CtB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,aAAa;IAUrB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IA0CvB,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;YAaL,YAAY;IAgB1B,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IAUX,OAAO,IAAI,IAAI;CA4BvB"}

package/dist/types/core/toast-manager.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Manages toast notifications for the application.
+ */
+export declare class ToastManager {
+    private static isStyleInjected;
+    private static toastEl;
+    private static navTimeout;
+    private static fadeTimeout;
+    static show(message: string, duration?: number): void;
+    private static injectStyles;
+}
+//# sourceMappingURL=toast-manager.d.ts.map

package/dist/types/core/toast-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-manager.d.ts","sourceRoot":"","sources":["../../../src/core/toast-manager.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,YAAY;IACrB,OAAO,CAAC,MAAM,CAAC,eAAe,CAAS;IACvC,OAAO,CAAC,MAAM,CAAC,OAAO,CAA4B;IAClD,OAAO,CAAC,MAAM,CAAC,UAAU,CAAa;IACtC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAa;WAEzB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAa,GAAG,IAAI;IAkClE,OAAO,CAAC,MAAM,CAAC,YAAY;CAa9B"}

package/dist/types/core/url-state-manager.d.ts

@@ -21,11 +21,15 @@ export declare class URLStateManager {
      */
     static generateShareableURL(state: State | null | undefined): string;
     /**
-     * Encode state into URL-safe string (Toggles and Tabs only currently)
+     * Encode state into URL-safe string
+     *
+     * (Covers Toggles, Tabs and Focus currently)
      */
     private static encodeState;
     /**
-     * Decode custom state from URL parameter (Toggles and Tabs only currently)
+     * Decode custom state from URL parameter
+     *
+     * (Covers Toggles, Tabs and Focus currently)
      */
     private static decodeState;
 }

package/dist/types/core/url-state-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"url-state-manager.d.ts","sourceRoot":"","sources":["../../../src/core/url-state-manager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,qBAAa,eAAe;IAC1B;;OAEG;WACW,QAAQ,IAAI,KAAK,GAAG,IAAI;IAiBtC;;OAEG;WACW,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAqB9D;;OAEG;WACW,QAAQ,IAAI,IAAI;IAI9B;;OAEG;WACW,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;IAiB3E;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAmC1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;CAqD3B"}
+{"version":3,"file":"url-state-manager.d.ts","sourceRoot":"","sources":["../../../src/core/url-state-manager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,qBAAa,eAAe;IAC1B;;OAEG;WACW,QAAQ,IAAI,KAAK,GAAG,IAAI;IAiBtC;;OAEG;WACW,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAqB9D;;OAEG;WACW,QAAQ,IAAI,IAAI;IAI9B;;OAEG;WACW,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;IAiB3E;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAwC1B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;CAwD3B"}

package/dist/types/core/widget.d.ts

@@ -31,6 +31,7 @@ export declare class CustomViewsWidget {
     private _hasVisibleConfig;
     private pageToggleIds;
     private pageTabIds;
+    private currentTab;
     private stateModal;
     constructor(options: WidgetOptions);
     /**

package/dist/types/core/widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/core/widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAO9C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,EAAE,eAAe,CAAC;IAEtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;IAEtG,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,CAAC,UAAU,CAA4B;gBAGlC,OAAO,EAAE,aAAa;IAmDlC;;;;OAIG;IACI,eAAe,IAAI,WAAW,GAAG,SAAS;IAmBjD;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACI,OAAO,IAAI,IAAI;IAatB,OAAO,CAAC,oBAAoB;IAO5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAMlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAqIhC;;OAEG;IACH,OAAO,CAAC,oCAAoC;IAgE5C;;OAEG;IACH,OAAO,CAAC,sCAAsC;IA8D9C;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgCtC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAoDhC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAmBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAuC1B;;OAEG;IACH,OAAO,CAAC,gCAAgC;CA6BzC"}
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/core/widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAO9C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,EAAE,eAAe,CAAC;IAEtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;IAEtG,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,UAAU,CAAsC;IAGxD,OAAO,CAAC,UAAU,CAA4B;gBAGlC,OAAO,EAAE,aAAa;IAmDlC;;;;OAIG;IACI,eAAe,IAAI,WAAW,GAAG,SAAS;IAmBjD;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACI,OAAO,IAAI,IAAI;IAatB,OAAO,CAAC,oBAAoB;IAO5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAMlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAiKhC;;OAEG;IACH,OAAO,CAAC,oCAAoC;IAwD5C;;OAEG;IACH,OAAO,CAAC,sCAAsC;IA6G9C;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgCtC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAoDhC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAmBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAuC1B;;OAEG;IACH,OAAO,CAAC,gCAAgC;CA6BzC"}

package/dist/types/styles/focus-mode-styles.d.ts

@@ -0,0 +1,8 @@
+export declare const FOCUS_MODE_STYLE_ID = "cv-focus-mode-styles";
+export declare const BODY_FOCUS_CLASS = "cv-focus-mode";
+export declare const HIDDEN_CLASS = "cv-focus-hidden";
+export declare const FOCUSED_CLASS = "cv-focused-element";
+export declare const DIVIDER_CLASS = "cv-context-divider";
+export declare const EXIT_BANNER_ID = "cv-exit-focus-banner";
+export declare const FOCUS_MODE_STYLES = "\n  body.cv-focus-mode {\n     /* e.g. potentially hide scrollbars or adjust layout */\n  }\n\n  .cv-focus-hidden {\n    display: none !important;\n  }\n\n  .cv-focused-element {\n    /* No visual style for focused elements, just logic class for now. Can add borders for debugging*/\n  }\n\n  .cv-context-divider {\n    padding: 12px;\n    margin: 16px 0;\n    background-color: #f8f8f8;\n    border-top: 1px dashed #ccc;\n    border-bottom: 1px dashed #ccc;\n    color: #555;\n    text-align: center;\n    cursor: pointer;\n    font-family: system-ui, sans-serif;\n    font-size: 13px;\n    transition: background-color 0.2s;\n  }\n  .cv-context-divider:hover {\n    background-color: #e8e8e8;\n    color: #333;\n  }\n\n  #cv-exit-focus-banner {\n    position: sticky;\n    top: 0;\n    left: 0;\n    right: 0;\n    background-color: #0078D4;\n    color: white;\n    padding: 10px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    z-index: 100000;\n    font-family: system-ui, sans-serif;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n  }\n\n  #cv-exit-focus-banner button {\n    background: white;\n    color: #0078D4;\n    border: none;\n    padding: 4px 12px;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n  }\n  #cv-exit-focus-banner button:hover {\n    background: #f0f0f0;\n  }\n";
+//# sourceMappingURL=focus-mode-styles.d.ts.map

package/dist/types/styles/focus-mode-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-mode-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/focus-mode-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAC1D,eAAO,MAAM,gBAAgB,kBAAkB,CAAC;AAChD,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAC9C,eAAO,MAAM,aAAa,uBAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,uBAAuB,CAAC;AAClD,eAAO,MAAM,cAAc,yBAAyB,CAAC;AAgErD,eAAO,MAAM,iBAAiB,w1CAAS,CAAC"}

package/dist/types/styles/share-mode-styles.d.ts

@@ -0,0 +1,10 @@
+export declare const SHARE_MODE_STYLE_ID = "cv-share-mode-styles";
+export declare const FLOATING_ACTION_BAR_ID = "cv-floating-action-bar";
+export declare const HOVER_HELPER_ID = "cv-hover-helper";
+export declare const HIGHLIGHT_TARGET_CLASS = "cv-highlight-target";
+export declare const SELECTED_CLASS = "cv-share-selected";
+/**
+ * CSS styles to be injected during Share Mode.
+ */
+export declare const SHARE_MODE_STYLES = "\n  body.cv-share-mode {\n    cursor: default;\n  }\n\n  /* Highlight outlines */\n  .cv-highlight-target {\n    outline: 2px dashed #0078D4 !important;\n    outline-offset: 2px;\n    cursor: crosshair;\n  }\n\n  .cv-share-selected {\n    outline: 3px solid #005a9e !important;\n    outline-offset: 2px;\n    background-color: rgba(0, 120, 212, 0.05);\n  }\n\n  /* Floating Action Bar */\n  #cv-floating-action-bar {\n    position: fixed;\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #2c2c2c;\n    color: #f1f1f1;\n    border-radius: 8px;\n    padding: 12px 20px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    z-index: 99999;\n    font-family: system-ui, -apple-system, sans-serif;\n    font-size: 14px;\n    border: 1px solid #4a4a4a;\n  }\n\n  #cv-floating-action-bar .cv-action-button {\n    background-color: #0078D4;\n    color: white;\n    border: none;\n    padding: 8px 14px;\n    border-radius: 5px;\n    cursor: pointer;\n    font-weight: 500;\n    transition: background-color 0.2s;\n  }\n  \n  #cv-floating-action-bar .cv-action-button:hover {\n    background-color: #005a9e;\n  }\n\n  #cv-floating-action-bar .cv-action-button.clear {\n    background-color: #5a5a5a;\n  }\n  #cv-floating-action-bar .cv-action-button.clear:hover {\n    background-color: #4a4a4a;\n  }\n  #cv-floating-action-bar .cv-action-button.clear:hover {\n    background-color: #4a4a4a;\n  }\n\n  #cv-floating-action-bar .cv-action-button.preview {\n    background-color: #106ebe;\n  }\n  #cv-floating-action-bar .cv-action-button.preview:hover {\n    background-color: #005a9e;\n  }\n  #cv-floating-action-bar .cv-action-button.exit {\n    background-color: #d13438;\n  }\n  #cv-floating-action-bar .cv-action-button.exit:hover {\n    background-color: #a42628;\n  }\n\n  /* Hover Helper (Smart Label & Level Up) */\n  #cv-hover-helper {\n    position: fixed;\n    z-index: 99999;\n    background-color: #333;\n    color: white;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-family: monospace;\n    display: none;\n    pointer-events: auto; /* Allow clicking buttons inside */\n    align-items: center;\n    gap: 8px;\n    box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n  }\n\n  #cv-hover-helper button {\n    background: #555;\n    border: none;\n    color: white;\n    border-radius: 3px;\n    cursor: pointer;\n    padding: 2px 6px;\n    font-size: 14px;\n    line-height: 1;\n  }\n  #cv-hover-helper button:hover {\n    background: #777;\n  }\n\n";
+//# sourceMappingURL=share-mode-styles.d.ts.map

package/dist/types/styles/share-mode-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-mode-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/share-mode-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAC1D,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,wBAAwB,CAAC;AAC5D,eAAO,MAAM,cAAc,sBAAsB,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,iBAAiB,whFA2G7B,CAAC"}

package/dist/types/styles/toast-styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TOAST_STYLE_ID = "cv-toast-styles";
+export declare const TOAST_CLASS = "cv-toast-notification";
+export declare const TOAST_STYLES = "\n  .cv-toast-notification {\n    position: fixed;\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #323232;\n    color: white;\n    padding: 12px 24px;\n    border-radius: 4px;\n    z-index: 100000;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    pointer-events: none; /* Let clicks pass through if needed, though usually it blocks */\n    font-family: system-ui, -apple-system, sans-serif;\n    font-size: 14px;\n  }\n";
+//# sourceMappingURL=toast-styles.d.ts.map

package/dist/types/styles/toast-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/toast-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,oBAAoB,CAAC;AAChD,eAAO,MAAM,WAAW,0BAA0B,CAAC;AAEnD,eAAO,MAAM,YAAY,ygBAkBxB,CAAC"}

package/dist/types/styles/widget-styles.d.ts

@@ -5,7 +5,7 @@
  * Note: Styles are kept as a TypeScript string for compatibility with the build system.
  * This approach ensures the styles are properly bundled and don't require separate CSS file handling.
  */
-export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n  position: fixed;\n  /* Slightly transparent by default so the widget is subtle at the page edge */\n  background: rgba(255, 255, 255, 0.92);\n  color: rgba(0, 0, 0, 0.9);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 9998;\n  transition: all 0.3s ease;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n  /* Become fully opaque on hover to improve readability */\n  background: rgba(255, 255, 255, 1);\n  color: rgba(0, 0, 0, 1);\n  opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n  top: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n  top: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n  bottom: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n  bottom: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n  height: 36px;\n  width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n  width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n  margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n  margin-bottom: 0;\n}\n\n.cv-widget-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n  background: #f8f9fa;\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.cv-widget-current {\n  margin: 16px 0;\n  padding: 12px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n  font-weight: 500;\n  color: #333;\n}\n\n.cv-widget-reset {\n  width: 100%;\n  padding: 8px 16px;\n  background: #dc3545;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n  background: #c82333;\n}\n\n.cv-widget-reset:active {\n  background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n  .cv-widget-top-right,\n  .cv-widget-top-left {\n    top: 10px;\n  }\n\n  .cv-widget-bottom-right,\n  .cv-widget-bottom-left {\n    bottom: 10px;\n  }\n\n  /* All widgets stay flush with screen edges */\n  .cv-widget-top-right,\n  .cv-widget-bottom-right,\n  .cv-widget-middle-right {\n    right: 0;\n  }\n\n  .cv-widget-top-left,\n  .cv-widget-bottom-left,\n  .cv-widget-middle-left {\n    left: 0;\n  }\n\n  /* Slightly smaller on mobile */\n  .cv-widget-icon {\n    width: 60px;\n    height: 32px;\n  }\n\n  .cv-widget-icon:hover {\n    width: 75px;\n  }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10002;\n  animation: fadeIn 0.2s ease;\n}\n\n.cv-widget-modal-overlay.cv-hidden {\n  display: none;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.cv-widget-modal {\n  background: white;\n  border-radius: 0.75rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  max-width: 32rem;\n  width: 90vw;\n  max-height: 80vh;\n  animation: slideIn 0.2s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n@keyframes slideIn {\n  from { \n    opacity: 0;\n    transform: scale(0.9) translateY(-20px);\n  }\n  to { \n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cv-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 1rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-modal-header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.cv-modal-icon {\n  position: relative;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n}\n\n.cv-modal-icon-svg {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n}\n\n.cv-modal-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-modal-close {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: transparent;\n  border: none;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.1);\n  color: #3e84f4;\n}\n\n.cv-modal-close-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.cv-modal-main {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  overflow-y: auto;\n  max-height: calc(80vh - 8rem);\n}\n\n.cv-modal-description {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n}\n\n.cv-content-section,\n.cv-tab-groups-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.cv-section-heading {\n  font-size: 1rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-widget-modal-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n  width: 100%;\n  padding: 10px 16px;\n  background: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n  background: #218838;\n}\n\n.cv-widget-create-state {\n  width: 100%;\n  padding: 10px 16px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n  background: #0056b3;\n}\n\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #101722;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-header {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-close {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.2);\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-modal-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-section-heading {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggles-container\n.cv-widget-theme-dark .cv-tabgroups-container {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-card,\n.cv-widget-theme-dark .cv-tabgroup-card {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-title,\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-description,\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-toggle-slider {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.cv-widget-theme-dark .cv-tab-group-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.2);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-footer {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: #101722;\n}\n\n.cv-widget-theme-dark .cv-reset-btn {\n  color: #e2e8f0;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-reset-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form .cv-section-header {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  border-bottom: 1px solid #e9ecef;\n  padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n  text-align: justify;\n}\n\n.cv-custom-state-section {\n  margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-custom-state-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n/* Toggles Container */\n.cv-toggles-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.cv-toggle-card,\n.cv-tabgroup-card {\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-toggle-card:last-child {\n  border-bottom: none;\n}\n\n.cv-toggle-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n}\n\n.cv-toggle-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0.125rem 0;\n}\n\n.cv-toggle-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n}\n\n.cv-toggle-label{\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n  cursor: pointer;\n}\n\n.cv-toggle-input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.cv-toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 9999px;\n  transition: background-color 0.2s ease;\n}\n\n.cv-toggle-slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1rem;\n  width: 1rem;\n  left: 0.25rem;\n  bottom: 0.25rem;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider {\n  background: #3e84f4;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider:before {\n  transform: translateX(1.25rem);\n}\n\n/* Dark theme toggle switch styles */\n.cv-widget-theme-dark .cv-toggle-switch {\n  background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch:hover {\n  background: #5a6578;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {\n  background: #63b3ed;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {\n  background: #4299e1;\n}\n\n/* Tab Groups Container */\n.cv-tab-groups-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n  overflow: hidden;\n}\n\n/* Tab Group Card - Header (Navigation Headers toggle) */\n.cv-tabgroup-card.cv-tabgroup-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n  border-bottom: 0px;\n}\n\n.cv-tabgroup-card.cv-tabgroup-header .cv-tabgroup-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 1rem;\n}\n\n/* Navigation toggle icon container */\n.cv-nav-toggle-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cv-nav-icon {\n  width: 2rem;\n  height: 2rem;\n  color: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n\n/* Logo box - centered grey box on its own row */\n.cv-tabgroup-logo-box {\n  width: 3.5rem;\n  height: 3.5rem;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-bottom: 0.5rem;\n}\n\n/* Title container for title alignment (without icon) */\n.cv-tabgroup-title-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Hover state for icon - apply to the entire tabgroup-row */\n.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-nav-icon {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #60a5fa;\n}\n\n/* Tab Group Card - Items */\n.cv-tabgroup-card.cv-tabgroup-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem;\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.cv-tabgroup-card.cv-tabgroup-item:last-child {\n  border-bottom: none;\n}\n\n/* Tab Group Info */\n.cv-tabgroup-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.cv-tabgroup-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0 0;\n}\n\n.cv-tabgroup-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n  line-height: 1.3;\n}\n\n/* Tab Group Label (for select dropdowns) */\n.cv-tabgroup-label {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n  font-weight: 500;\n  display: block;\n  cursor: pointer;\n}\n\n/* Tab Group Select */\n.cv-tabgroup-select {\n  width: 100%;\n  border-radius: 0.5rem;\n  background: white;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  color: rgba(0, 0, 0, 0.9);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  font-family: inherit;\n}\n\n.cv-tabgroup-select:hover {\n  border-color: rgba(0, 0, 0, 0.25);\n}\n\n.cv-tabgroup-select:focus {\n  outline: none;\n  border-color: #3e84f4;\n  box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.2);\n}\n\n/* Modern Toggle Switch */\n.cv-toggle-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 9999px;\n  padding: 2px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border: none;\n}\n\n.cv-toggle-switch input {\n  display: none;\n}\n\n.cv-toggle-switch .cv-switch-bg {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  background: rgba(0, 0, 0, 0.1);\n  transition: background-color 0.2s ease;\n  pointer-events: none;\n}\n\n.cv-toggle-switch .cv-switch-knob {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  transition: transform 0.2s ease;\n  z-index: 1;\n}\n\n.cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #3e84f4;\n}\n\n.cv-toggle-switch input:checked ~ .cv-switch-knob {\n  transform: translateX(20px);\n}\n\n/* Dark Theme - Tab Groups */\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-item {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.05);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-label {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tab-groups-list {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.15);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:hover {\n  border-color: rgba(255, 255, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:focus {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);\n}\n\n/* Dark Theme - Toggle Switch */\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-bg {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-knob {\n  background: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #63b3ed;\n}\n\n.cv-modal-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn,\n.cv-share-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.75rem;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: none;\n}\n\n.cv-reset-btn {\n  color: rgba(0, 0, 0, 0.9);\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.cv-share-btn {\n  color: white;\n  background: #3e84f4;\n}\n\n.cv-share-btn:hover {\n  background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-btn-icon {\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Dark theme custom state styles */\n/* Welcome modal styles */\n.cv-welcome-modal {\n  max-width: 32rem;\n  width: 90vw;\n  background: white;\n  border-radius: 0.75rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  animation: slideIn 0.2s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.cv-modal-main {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  overflow-y: auto;\n  max-height: calc(80vh - 8rem);\n}\n\n.cv-welcome-message {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.cv-welcome-message a {\n  color: #3e84f4;\n  text-align: justify;\n  text-decoration: none;\n}\n\n.cv-welcome-message a:hover {\n  text-decoration: underline;\n}\n\n.cv-welcome-widget-preview {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: #f8f9fa;\n  border-radius: 0.5rem;\n  margin: 1rem 0;\n}\n\n.cv-welcome-widget-icon {\n  width: 2rem;\n  height: 2rem;\n  background: rgba(62, 132, 244, 0.1);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: cv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  color: #3e84f4;\n}\n\n.cv-welcome-widget-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n}\n\n.cv-welcome-got-it {\n  width: 100%;\n  background: #3e84f4;\n  color: white;\n  font-weight: 600;\n  padding: 0.75rem 1rem;\n  border-radius: 0.5rem;\n  border: none;\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background-color 0.2s ease;\n  outline: none;\n}\n\n.cv-welcome-got-it:hover {\n  background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-welcome-got-it:focus {\n  box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.5);\n}\n\n/* Animations */\n@keyframes cv-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-modal {\n  background: #101722;\n}\n\n.cv-widget-theme-dark .cv-welcome-message {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-welcome-message a {\n  color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n  color: #e2e8f0;\n}\n\n/* Dark theme logo box */\n.cv-widget-theme-dark .cv-tabgroup-logo-box {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n/* Spinning animation for reset button icon */\n@keyframes cv-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(-360deg);\n  }\n}\n\n.cv-spinning {\n  animation: cv-spin 0.6s ease-in-out;\n}\n\n/* Hide widget icon in print view */\n@media print {\n  .cv-widget-icon {\n    display: none !important;\n  }\n}\n";
+export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n  position: fixed;\n  /* Slightly transparent by default so the widget is subtle at the page edge */\n  background: rgba(255, 255, 255, 0.92);\n  color: rgba(0, 0, 0, 0.9);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 9998;\n  transition: all 0.3s ease;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n  /* Become fully opaque on hover to improve readability */\n  background: rgba(255, 255, 255, 1);\n  color: rgba(0, 0, 0, 1);\n  opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n  top: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n  top: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n  bottom: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n  bottom: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n  height: 36px;\n  width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n  width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n  margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n  margin-bottom: 0;\n}\n\n.cv-widget-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n  background: #f8f9fa;\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.cv-widget-current {\n  margin: 16px 0;\n  padding: 12px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n  font-weight: 500;\n  color: #333;\n}\n\n.cv-widget-reset {\n  width: 100%;\n  padding: 8px 16px;\n  background: #dc3545;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n  background: #c82333;\n}\n\n.cv-widget-reset:active {\n  background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n  .cv-widget-top-right,\n  .cv-widget-top-left {\n    top: 10px;\n  }\n\n  .cv-widget-bottom-right,\n  .cv-widget-bottom-left {\n    bottom: 10px;\n  }\n\n  /* All widgets stay flush with screen edges */\n  .cv-widget-top-right,\n  .cv-widget-bottom-right,\n  .cv-widget-middle-right {\n    right: 0;\n  }\n\n  .cv-widget-top-left,\n  .cv-widget-bottom-left,\n  .cv-widget-middle-left {\n    left: 0;\n  }\n\n  /* Slightly smaller on mobile */\n  .cv-widget-icon {\n    width: 60px;\n    height: 32px;\n  }\n\n  .cv-widget-icon:hover {\n    width: 75px;\n  }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10002;\n  animation: fadeIn 0.2s ease;\n}\n\n.cv-widget-modal-overlay.cv-hidden {\n  display: none;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.cv-widget-modal {\n  background: white;\n  border-radius: 0.75rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  max-width: 32rem;\n  width: 90vw;\n  max-height: 80vh;\n  animation: slideIn 0.2s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n@keyframes slideIn {\n  from { \n    opacity: 0;\n    transform: scale(0.9) translateY(-20px);\n  }\n  to { \n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cv-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 1rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-modal-header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.cv-modal-icon {\n  position: relative;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n}\n\n.cv-modal-icon-svg {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n}\n\n.cv-modal-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-modal-close {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: transparent;\n  border: none;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.1);\n  color: #3e84f4;\n}\n\n.cv-modal-close-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.cv-modal-main {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  overflow-y: auto;\n  max-height: calc(80vh - 8rem);\n}\n\n.cv-modal-description {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n}\n\n.cv-content-section,\n.cv-tab-groups-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.cv-section-heading {\n  font-size: 1rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-widget-modal-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n  width: 100%;\n  padding: 10px 16px;\n  background: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n  background: #218838;\n}\n\n.cv-widget-create-state {\n  width: 100%;\n  padding: 10px 16px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n  background: #0056b3;\n}\n\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #101722;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-header {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-close {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.2);\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-modal-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-section-heading {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggles-container\n.cv-widget-theme-dark .cv-tabgroups-container {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-card,\n.cv-widget-theme-dark .cv-tabgroup-card {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-title,\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-description,\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-toggle-slider {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.cv-widget-theme-dark .cv-tab-group-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.2);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-footer {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: #101722;\n}\n\n.cv-widget-theme-dark .cv-reset-btn {\n  color: #e2e8f0;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-reset-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form .cv-section-header {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  border-bottom: 1px solid #e9ecef;\n  padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n  text-align: justify;\n}\n\n.cv-custom-state-section {\n  margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-custom-state-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n/* Toggles Container */\n.cv-toggles-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.cv-toggle-card,\n.cv-tabgroup-card {\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-toggle-card:last-child {\n  border-bottom: none;\n}\n\n.cv-toggle-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n}\n\n.cv-toggle-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0.125rem 0;\n}\n\n.cv-toggle-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n}\n\n.cv-toggle-label{\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n  cursor: pointer;\n}\n\n.cv-toggle-input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.cv-toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 9999px;\n  transition: background-color 0.2s ease;\n}\n\n.cv-toggle-slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1rem;\n  width: 1rem;\n  left: 0.25rem;\n  bottom: 0.25rem;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider {\n  background: #3e84f4;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider:before {\n  transform: translateX(1.25rem);\n}\n\n/* Dark theme toggle switch styles */\n.cv-widget-theme-dark .cv-toggle-switch {\n  background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch:hover {\n  background: #5a6578;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {\n  background: #63b3ed;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {\n  background: #4299e1;\n}\n\n/* Tab Groups Container */\n.cv-tab-groups-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n  overflow: hidden;\n}\n\n/* Tab Group Card - Header (Navigation Headers toggle) */\n.cv-tabgroup-card.cv-tabgroup-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n  border-bottom: 0px;\n}\n\n.cv-tabgroup-card.cv-tabgroup-header .cv-tabgroup-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 1rem;\n}\n\n/* Navigation toggle icon container */\n.cv-nav-toggle-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cv-nav-icon {\n  width: 2rem;\n  height: 2rem;\n  color: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n\n/* Logo box - centered grey box on its own row */\n.cv-tabgroup-logo-box {\n  width: 3.5rem;\n  height: 3.5rem;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-bottom: 0.5rem;\n}\n\n/* Title container for title alignment (without icon) */\n.cv-tabgroup-title-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Hover state for icon - apply to the entire tabgroup-row */\n.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-nav-icon {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #60a5fa;\n}\n\n/* Tab Group Card - Items */\n.cv-tabgroup-card.cv-tabgroup-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem;\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.cv-tabgroup-card.cv-tabgroup-item:last-child {\n  border-bottom: none;\n}\n\n/* Tab Group Info */\n.cv-tabgroup-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.cv-tabgroup-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0 0;\n}\n\n.cv-tabgroup-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n  line-height: 1.3;\n}\n\n/* Tab Group Label (for select dropdowns) */\n.cv-tabgroup-label {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n  font-weight: 500;\n  display: block;\n  cursor: pointer;\n}\n\n/* Tab Group Select */\n.cv-tabgroup-select {\n  width: 100%;\n  border-radius: 0.5rem;\n  background: white;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  color: rgba(0, 0, 0, 0.9);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  font-family: inherit;\n}\n\n.cv-tabgroup-select:hover {\n  border-color: rgba(0, 0, 0, 0.25);\n}\n\n.cv-tabgroup-select:focus {\n  outline: none;\n  border-color: #3e84f4;\n  box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.2);\n}\n\n/* Modern Toggle Switch */\n.cv-toggle-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 9999px;\n  padding: 2px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border: none;\n}\n\n.cv-toggle-switch input {\n  display: none;\n}\n\n.cv-toggle-switch .cv-switch-bg {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  background: rgba(0, 0, 0, 0.1);\n  transition: background-color 0.2s ease;\n  pointer-events: none;\n}\n\n.cv-toggle-switch .cv-switch-knob {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  transition: transform 0.2s ease;\n  z-index: 1;\n}\n\n.cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #3e84f4;\n}\n\n.cv-toggle-switch input:checked ~ .cv-switch-knob {\n  transform: translateX(20px);\n}\n\n/* Dark Theme - Tab Groups */\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-item {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.05);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-label {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tab-groups-list {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.15);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:hover {\n  border-color: rgba(255, 255, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:focus {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);\n}\n\n/* Dark Theme - Toggle Switch */\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-bg {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-knob {\n  background: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #63b3ed;\n}\n\n.cv-modal-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n  \n.cv-footer-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.5);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.cv-footer-link:hover {\n  color: #3e84f4;\n}\n\n.cv-footer-link svg {\n  opacity: 0.8;\n}\n\n.cv-widget-theme-dark .cv-footer-link {\n  color: rgba(255, 255, 255, 0.4);\n}\n\n.cv-widget-theme-dark .cv-footer-link:hover {\n  color: #60a5fa;\n}\n\n.cv-reset-btn,\n.cv-share-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.75rem;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: none;\n}\n\n.cv-reset-btn {\n  color: rgba(0, 0, 0, 0.9);\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.cv-share-btn {\n  color: white;\n  background: #3e84f4;\n}\n\n.cv-share-btn:hover {\n  background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-btn-icon {\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Dark theme custom state styles */\n/* Welcome modal styles */\n.cv-welcome-modal {\n  max-width: 32rem;\n  width: 90vw;\n  background: white;\n  border-radius: 0.75rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  animation: slideIn 0.2s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.cv-modal-main {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  overflow-y: auto;\n  max-height: calc(80vh - 8rem);\n}\n\n.cv-welcome-message {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.cv-welcome-message a {\n  color: #3e84f4;\n  text-align: justify;\n  text-decoration: none;\n}\n\n.cv-welcome-message a:hover {\n  text-decoration: underline;\n}\n\n.cv-welcome-widget-preview {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: #f8f9fa;\n  border-radius: 0.5rem;\n  margin: 1rem 0;\n}\n\n.cv-welcome-widget-icon {\n  width: 2rem;\n  height: 2rem;\n  background: rgba(62, 132, 244, 0.1);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: cv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  color: #3e84f4;\n}\n\n.cv-welcome-widget-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n}\n\n.cv-welcome-got-it {\n  width: 100%;\n  background: #3e84f4;\n  color: white;\n  font-weight: 600;\n  padding: 0.75rem 1rem;\n  border-radius: 0.5rem;\n  border: none;\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background-color 0.2s ease;\n  outline: none;\n}\n\n.cv-welcome-got-it:hover {\n  background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-welcome-got-it:focus {\n  box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.5);\n}\n\n/* Animations */\n@keyframes cv-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-modal {\n  background: #101722;\n}\n\n.cv-widget-theme-dark .cv-welcome-message {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-welcome-message a {\n  color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n  color: #e2e8f0;\n}\n\n/* Dark theme logo box */\n.cv-widget-theme-dark .cv-tabgroup-logo-box {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n/* Spinning animation for reset button icon */\n@keyframes cv-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(-360deg);\n  }\n}\n\n.cv-spinning {\n  animation: cv-spin 0.6s ease-in-out;\n}\n\n/* Hide widget icon in print view */\n@media print {\n  .cv-widget-icon {\n    display: none !important;\n  }\n}\n/* Widget Modal Tabs */\n.cv-modal-tabs {\n  display: flex;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  margin-bottom: 0.5rem;\n}\n\n.cv-tab-content > .cv-content-section + .cv-content-section {\n  margin-top: 1.5rem;\n}\n\n.cv-modal-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.6);\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-modal-tab:hover {\n  color: rgba(0, 0, 0, 0.9);\n}\n\n.cv-modal-tab.active {\n  color: #3e84f4;\n  border-bottom-color: #3e84f4;\n}\n\n.cv-tab-content {\n  display: none;\n  animation: fadeIn 0.3s ease;\n}\n\n.cv-tab-content.active {\n  display: block;\n}\n\n/* Share Tab Content */\n.cv-share-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem 0;\n  align-items: center;\n  text-align: center;\n}\n\n.cv-share-instruction {\n  font-size: 0.9rem;\n  color: rgba(0, 0, 0, 0.7);\n  margin-bottom: 1rem;\n}\n\n.cv-share-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 12px 16px;\n  background: white;\n  color: #333;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.9rem;\n  font-weight: 500;\n  transition: all 0.2s ease;\n}\n\n.cv-share-action-btn:hover {\n  background: #f8f9fa;\n  border-color: rgba(0, 0, 0, 0.25);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.cv-share-action-btn.primary {\n  background: #3e84f4;\n  color: white;\n  border-color: #3e84f4;\n}\n\n.cv-share-action-btn.primary:hover {\n  background: #2b74e6;\n  border-color: #2b74e6;\n}\n\n.cv-done-btn {\n  padding: 0.375rem 1rem;\n  background: #3e84f4;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-done-btn:hover {\n  background: #2b74e6;\n}\n\n/* Dark Theme Adjustments */\n.cv-widget-theme-dark .cv-modal-tabs {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-tab {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-tab:hover {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.cv-widget-theme-dark .cv-modal-tab.active {\n  color: #60a5fa;\n  border-bottom-color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-share-instruction {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.cv-widget-theme-dark .cv-share-action-btn {\n  background: #1a202c;\n  color: white;\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n.cv-widget-theme-dark .cv-share-action-btn:hover {\n  background: #2d3748;\n}\n\n.cv-widget-theme-dark .cv-share-action-btn.primary {\n  background: #3e84f4;\n  border-color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-share-action-btn.primary:hover {\n  background: #2b74e6;\n}\n";
 /**
  * Inject widget styles into the document head
  */

package/dist/types/styles/widget-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,63pBAmjCzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}
+{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,urwBAkuCzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}

package/dist/types/types/types.d.ts

@@ -25,6 +25,8 @@ export interface State {
     toggles?: ToggleId[];
     /** Optional tab selections: groupId -> tabId */
     tabs?: Record<string, string>;
+    /** Optional focus selections: array of element IDs */
+    focus?: string[];
 }
 export type ToggleId = string;
 /**
@@ -70,6 +72,11 @@ export interface Config {
     defaultState?: State;
     /** Optional tab group configurations */
     tabGroups?: TabGroupConfig[];
+    /** Excluded tags and IDs for Share/Focus modes */
+    shareExclusions?: {
+        tags?: string[];
+        ids?: string[];
+    };
 }
 /**
  * Represents the configuration file structure for CustomViews auto-initialization.

package/dist/types/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"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"}

package/dist/types/utils/icons.d.ts

@@ -26,4 +26,10 @@ export declare function getNavHeadingOffIcon(): string;
  */
 export declare function getNavDashed(): string;
 export declare function getPinIcon(isPinned?: boolean): string;
+export declare function getLinkIcon(): string;
+export declare function getShareIcon(): string;
+/**
+ * GitHub icon for footer link
+ */
+export declare function getGitHubIcon(): string;
 //# sourceMappingURL=icons.d.ts.map

package/dist/types/utils/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/utils/icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAIrC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAIrC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAYpC;AAED,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED,wBAAgB,mBAAmB,IAAI,MAAM,CAmB5C;AAED,wBAAgB,oBAAoB,IAAI,MAAM,CAU7C;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAmBrC;AAGD,wBAAgB,UAAU,CAAC,QAAQ,GAAE,OAAe,GAAG,MAAM,CAU5D"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/utils/icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAIrC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAIrC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAYpC;AAED,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED,wBAAgB,mBAAmB,IAAI,MAAM,CAmB5C;AAED,wBAAgB,oBAAoB,IAAI,MAAM,CAU7C;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAmBrC;AAGD,wBAAgB,UAAU,CAAC,QAAQ,GAAE,OAAe,GAAG,MAAM,CAU5D;AAED,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED,wBAAgB,YAAY,IAAI,MAAM,CAKrC;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAItC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customviews-js/customviews",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A JavaScript dynamic custom views Library.",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -60,4 +60,4 @@
     "url": "https://github.com/customviews-js/customviews/issues"
   },
   "homepage": "https://github.com/customviews-js/customviews#readme"
-}
+}