@customviews-js/customviews 1.1.10 → 1.2.0

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

@@ -1,4 +1,4 @@
-import type { CustomViewAsset } from "types/types";
+import type { CustomViewAsset } from "../types/types";
 export declare class AssetsManager {
     assets: Record<string, CustomViewAsset>;
     private baseURL;

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

@@ -1 +1 @@
-{"version":3,"file":"assets-manager.d.ts","sourceRoot":"","sources":["../../../src/core/assets-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,qBAAa,aAAa;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,OAAO,CAAC,OAAO,CAAS;gBAEZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,GAAE,MAAW;IASzE,QAAQ,IAAI,OAAO;IAInB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAgBjD,OAAO,CAAC,cAAc;IAatB,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IAIlD,oBAAoB,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;CAIvE"}
+{"version":3,"file":"assets-manager.d.ts","sourceRoot":"","sources":["../../../src/core/assets-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,qBAAa,aAAa;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,OAAO,CAAC,OAAO,CAAS;gBAEZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,GAAE,MAAW;IASzE,QAAQ,IAAI,OAAO;IAInB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAgBjD,OAAO,CAAC,cAAc;IAatB,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IAIlD,oBAAoB,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;CAIvE"}

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

@@ -11,11 +11,22 @@ export declare class CustomViewsCore {
     private assetsManager;
     private persistenceManager;
     private visibilityManager;
+    private observer;
+    private componentRegistry;
     private config;
     private stateChangeListeners;
     private showUrlEnabled;
     private lastAppliedState;
     constructor(opt: CustomViewsOptions);
+    /**
+     * 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
+     */
+    private unscan;
     getConfig(): Config;
     /**
      * Get tab groups from config
@@ -36,12 +47,27 @@ export declare class CustomViewsCore {
      */
     setActiveTab(groupId: string, tabId: string, groupEl?: HTMLElement): void;
     init(): Promise<void>;
+    private initializeNewComponents;
+    private initObserver;
     private loadAndCallApplyState;
     /**
     * Apply a custom state, saves to localStorage and updates the URL
+    * Add 'source' in options to indicate the origin of the state change
+    * (e.g., 'widget' to trigger scroll behavior)
+    * Add scrollAnchor in options to maintain scroll position of a specific element
     */
-    applyState(state: State): void;
-    /** Render all toggles for the current state */
+    applyState(state: State, options?: {
+        source?: string;
+        scrollAnchor?: {
+            element: HTMLElement;
+            top: number;
+        };
+    }): void;
+    /**
+     * Renders state on components in ComponentRegistry
+     * Applies the given state.
+     * Disconnects the mutation observer during rendering to prevent loops
+     **/
     private renderState;
     /**
      * Reset to default state

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;AAStD,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;IAE7C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,oBAAoB,CAAyB;IACrD,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,gBAAgB,CAAsB;gBAElC,GAAG,EAAE,kBAAkB;IAU5B,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;YA0CH,qBAAqB;IAmBnC;;MAEE;IACK,UAAU,CAAC,KAAK,EAAE,KAAK;IAW9B,+CAA+C;IAC/C,OAAO,CAAC,WAAW;IAqBnB;;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;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"}

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

@@ -1,3 +1,3 @@
-import type { AssetsManager } from "core/assets-manager";
+import type { AssetsManager } from "./assets-manager";
 export declare function renderAssetInto(el: HTMLElement, assetId: string, assetsManager: AssetsManager): void;
 //# sourceMappingURL=render.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/core/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAoEzD,wBAAgB,eAAe,CAC7B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,aAAa,QAqB7B"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/core/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAoEtD,wBAAgB,eAAe,CAC7B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,aAAa,QAqB7B"}

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

@@ -5,9 +5,9 @@ export declare class TabManager {
      */
     private static splitTabIds;
     /**
-     * Apply tab selections to all tab groups in the DOM
+     * Apply tab selections to a given list of tab group elements
      */
-    static applySelections(rootEl: HTMLElement, tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
+    static applyTabSelections(tabGroups: HTMLElement[], tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
     /**
      * Resolve the active tab for a group based on state, config, and DOM
      *
@@ -27,9 +27,9 @@ export declare class TabManager {
      */
     private static extractTabContent;
     /**
-     * Build navigation for tab groups with nav="auto" (one-time setup)
+     * Build navigation for tab groups (one-time setup)
      */
-    static buildNavs(rootEl: HTMLElement, cfgGroups?: TabGroupConfig[], onTabClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void, onTabDoubleClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void): void;
+    static buildNavs(tabGroups: HTMLElement[], cfgGroups?: TabGroupConfig[], onTabClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void, onTabDoubleClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void): void;
     /**
      * Toggle nav visibility for all tab groups (viewer-controlled)
      */
@@ -49,7 +49,7 @@ export declare class TabManager {
     /**
      * Update active states for all tab groups based on current state
      */
-    static updateAllNavActiveStates(rootEl: HTMLElement, tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
+    static updateAllNavActiveStates(tabGroups: HTMLElement[], tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
     /**
      * Apply tab selection to a specific tabgroup element only (not globally).
      * Used for single-click behavior to update only the clicked tabgroup.
@@ -64,5 +64,10 @@ export declare class TabManager {
      * Returns array of group elements to be synced (excluding source).
      */
     static getTabgroupsWithId(rootEl: HTMLElement, sourceGroupId: string, tabId: string): HTMLElement[];
+    /**
+     * Update pin icon visibility for all tab groups based on current state.
+     * Shows pin icon for tabs that are in the persisted state (i.e., have been double-clicked).
+      */
+    static updatePinIcons(tabGroups: HTMLElement[], tabs: Record<string, string>): void;
 }
 //# sourceMappingURL=tab-manager.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-manager.d.ts","sourceRoot":"","sources":["../../../src/core/tab-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAWrD,qBAAa,UAAU;IACrB;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAM1B;;OAEG;WACW,eAAe,CAC3B,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IA2BP;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,wBAAwB;IAmCvC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAwBhC;;OAEG;WACW,SAAS,CACrB,MAAM,EAAE,WAAW,EACnB,SAAS,CAAC,EAAE,cAAc,EAAE,EAC5B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,EAC3E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,GAChF,IAAI;IAkHP;;OAEG;WACW,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IA6B5E;;OAEG;WACW,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAI1D;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAc1B;;OAEG;WACW,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAmBnF;;OAEG;WACW,wBAAwB,CACpC,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IA+BP;;;OAGG;WACW,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAehF;;;OAGG;WACW,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAYvE;;OAEG;WACW,kBAAkB,CAC9B,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,GACZ,WAAW,EAAE;CAgBjB"}
+{"version":3,"file":"tab-manager.d.ts","sourceRoot":"","sources":["../../../src/core/tab-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYrD,qBAAa,UAAU;IACrB;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAM1B;;OAEG;WACW,kBAAkB,CAC9B,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IAwCP;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,wBAAwB;IAqCvC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAwBhC;;OAEG;WACW,SAAS,CACrB,SAAS,EAAE,WAAW,EAAE,EACxB,SAAS,CAAC,EAAE,cAAc,EAAE,EAC5B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,EAC3E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,GAChF,IAAI;IAiKP;;OAEG;WACW,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IA6B5E;;OAEG;WACW,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAI1D;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAc1B;;OAEG;WACW,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAmBnF;;OAEG;WACW,wBAAwB,CACpC,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IA6BP;;;OAGG;WACW,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAgBhF;;;OAGG;WACW,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAavE;;OAEG;WACW,kBAAkB,CAC9B,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,GACZ,WAAW,EAAE;IAchB;;;QAGI;WACU,cAAc,CACxB,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,IAAI;CA2BV"}

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

@@ -5,13 +5,13 @@ import { AssetsManager } from "./assets-manager";
  */
 export declare class ToggleManager {
     /**
-     * Apply toggle visibility to all toggle elements in the DOM
+     * Apply toggle visibility to a given list of toggle elements
      */
-    static applyToggles(rootEl: HTMLElement, activeToggles: ToggleId[]): void;
+    static applyToggles(elements: HTMLElement[], activeToggles: ToggleId[]): void;
     /**
-     * Render assets into toggle elements that are currently visible
+     * Render assets into a given list of toggle elements that are currently visible
      */
-    static renderAssets(rootEl: HTMLElement, activeToggles: ToggleId[], assetsManager: AssetsManager): void;
+    static renderAssets(elements: HTMLElement[], activeToggles: ToggleId[], assetsManager: AssetsManager): void;
     /**
      * Get toggle categories from an element (supports both data attributes and cv-toggle elements)
      */
@@ -24,5 +24,10 @@ export declare class ToggleManager {
      * Apply simple class-based visibility to a toggle element
      */
     private static applyToggleVisibility;
+    /**
+     * Scans a given DOM subtree for toggle elements and initializes them.
+     * This includes applying visibility and rendering assets.
+     */
+    static initializeToggles(root: HTMLElement, activeToggles: ToggleId[], assetsManager: AssetsManager): void;
 }
 //# sourceMappingURL=toggle-manager.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-manager.d.ts","sourceRoot":"","sources":["../../../src/core/toggle-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD;;GAEG;AACH,qBAAa,aAAa;IACxB;;OAEG;WACW,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQhF;;OAEG;WACW,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,aAAa,EAAE,aAAa,GAAG,IAAI;IAU9G;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAUlC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,qBAAqB;CASrC"}
+{"version":3,"file":"toggle-manager.d.ts","sourceRoot":"","sources":["../../../src/core/toggle-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD;;GAEG;AACH,qBAAa,aAAa;IACxB;;OAEG;WACW,YAAY,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQpF;;OAEG;WACW,YAAY,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,aAAa,EAAE,aAAa,GAAG,IAAI;IAalH;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAUlC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC;;;OAGG;WACW,iBAAiB,CAC7B,IAAI,EAAE,WAAW,EACjB,aAAa,EAAE,QAAQ,EAAE,EACzB,aAAa,EAAE,aAAa,GAC3B,IAAI;CAYR"}

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

@@ -28,12 +28,17 @@ export declare class CustomViewsWidget {
     private container;
     private widgetIcon;
     private options;
-    private modal;
+    private _hasVisibleConfig;
+    private pageToggleIds;
+    private pageTabIds;
+    private stateModal;
     constructor(options: WidgetOptions);
     /**
-     * Render the widget
+     * Render the widget modal icon
+     *
+     * Does not render if there are no visible toggles or tab groups.
      */
-    render(): HTMLElement;
+    renderModalIcon(): HTMLElement | undefined;
     /**
      * Create the simple widget icon
      */
@@ -52,13 +57,21 @@ export declare class CustomViewsWidget {
      */
     private openStateModal;
     /**
-     * Create the custom state creator modal
+     * Create the custom state creator modal shell and attach listeners
      */
-    private createCustomStateModal;
+    private _createStateModal;
     /**
-     * Attach event listeners for custom state creator
+     * Update the content of the state modal
      */
-    private attachStateModalEventListeners;
+    private _updateStateModalContent;
+    /**
+     * Attach event listeners for the modal frame (delegated events)
+     */
+    private _attachStateModalFrameEventListeners;
+    /**
+     * Attach event listeners for custom state creator's dynamic content
+     */
+    private _attachStateModalContentEventListeners;
     /**
      * Apply theme class to the modal overlay based on options
      */
@@ -75,10 +88,6 @@ export declare class CustomViewsWidget {
      * Load current state into form based on currently active toggles
      */
     private loadCurrentStateIntoForm;
-    /**
-     * Format toggle name for display
-     */
-    private formatToggleName;
     /**
      * Check if this is the first visit and show welcome modal
      */

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;IAGzC,OAAO,CAAC,KAAK,CAA4B;gBAG7B,OAAO,EAAE,aAAa;IAsBlC;;OAEG;IACI,MAAM,IAAI,WAAW;IAe5B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACI,OAAO,IAAI,IAAI;IAatB,OAAO,CAAC,oBAAoB;IAO5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAOlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAOtB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA8H9B;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAqJtC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgCtC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAqDhC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAIxB;;OAEG;IACH,OAAO,CAAC,4BAA4B;IA0BpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAqC1B;;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;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"}

package/dist/types/lib/custom-views.d.ts

@@ -8,7 +8,7 @@ export type initOptions = {
     assetsJsonPath?: string;
     /** Root element to apply custom views */
     rootEl?: HTMLElement;
-    /** Config object with allToggles and defaultState */
+    /** Config object with toggles and defaultState */
     config?: Config;
     /** Base URL for all paths */
     baseURL?: string;

package/dist/types/lib/custom-views.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-views.d.ts","sourceRoot":"","sources":["../../../src/lib/custom-views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2B,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAmB,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAA;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB;;;;OAIG;WACU,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;CA0CtE"}
+{"version":3,"file":"custom-views.d.ts","sourceRoot":"","sources":["../../../src/lib/custom-views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2B,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAmB,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAA;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB;;;;OAIG;WACU,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;CA0CtE"}

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

@@ -1,5 +1,5 @@
 /**
  * Styles for tab groups and tab navigation
  */
-export declare const TAB_STYLES = "\n/* Tab navigation styles - Bootstrap-style tabs matching MarkBind */\n.cv-tabs-nav {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin-top: 0.5rem;\n  margin-bottom: 1rem;\n  list-style: none;\n  border-bottom: 1px solid #dee2e6;\n\n  align-items: stretch;\n}\n\n.cv-tabs-nav .nav-item {\n  margin-bottom: -1px;\n  list-style: none;\n  display: flex;              /* was inline-block \u2192 make flex to stretch height */\n  align-items: stretch;       /* stretch link to full height */\n}\n\n.cv-tabs-nav .nav-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  color: #495057;\n  text-decoration: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-top-left-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  cursor: pointer;\n  min-height: 2.5rem;\n  box-sizing: border-box;\n}\n\n.cv-tabs-nav .nav-link p {\n  margin: 0; /* remove default margins */\n  display: inline; /* or inline-block */\n}\n\n.cv-tabs-nav .nav-link:hover,\n.cv-tabs-nav .nav-link:focus {\n  border-color: #e9ecef #e9ecef #dee2e6;\n  isolation: isolate;\n}\n\n.cv-tabs-nav .nav-link.active {\n  color: #495057;\n  background-color: #fff;\n  border-color: #dee2e6 #dee2e6 #fff;\n}\n\n.cv-tabs-nav .nav-link:focus {\n  outline: 0;\n  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n\n/* Legacy button-based nav (deprecated, kept for compatibility) */\n.cv-tabs-nav-item {\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  font-size: 1rem;\n  color: #6c757d;\n  transition: color 150ms ease, border-color 150ms ease;\n}\n\n.cv-tabs-nav-item:hover {\n  color: #495057;\n  border-bottom-color: #dee2e6;\n}\n\n.cv-tabs-nav-item.active {\n  color: #007bff;\n  border-bottom-color: #007bff;\n  font-weight: 500;\n}\n\n.cv-tabs-nav-item:focus {\n  outline: 2px solid #007bff;\n  outline-offset: 2px;\n}\n\n/* Tab panel base styles */\ncv-tab {\n  display: block;\n}\n\n/* Hide cv-tab-header source element; content is extracted to nav link */\ncv-tab-header {\n  display: none !important;\n}\n\n/* Allow cv-tab-body to flow naturally */\ncv-tab-body {\n  display: block;\n}\n\n/* Override visibility for tab panels - use display instead of collapse animation */\ncv-tab.cv-hidden {\n  display: none !important;\n}\n\ncv-tab.cv-visible {\n  display: block !important;\n}\n\ncv-tabgroup {\n  display: block;\n  margin-bottom: 1.5rem;\n}\n\n/* Bottom border line for tab groups */\n.cv-tabgroup-bottom-border {\n  border-bottom: 1px solid #dee2e6;\n  margin-top: 1rem;\n}\n\n/* Tab content wrapper */\n.cv-tab-content {\n  padding: 1rem 0;\n}\n\n/* Viewer-controlled nav visibility: hide nav containers when requested */\n.cv-tabs-nav-hidden {\n  display: none !important;\n}\n\n/* Print-friendly: hide tab navigation when printing to reduce clutter */\n@media print {\n  .cv-tabs-nav {\n    display: none !important;\n  }\n}\n";
+export declare const TAB_STYLES = "\n/* Tab navigation styles - Bootstrap-style tabs matching MarkBind */\n.cv-tabs-nav {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin-top: 0.5rem;\n  margin-bottom: 1rem;\n  list-style: none;\n  border-bottom: 1px solid #dee2e6;\n\n  align-items: stretch;\n}\n\n.cv-tabs-nav .nav-item {\n  margin-bottom: -1px;\n  list-style: none;\n  display: flex;              /* was inline-block \u2192 make flex to stretch height */\n  align-items: stretch;       /* stretch link to full height */\n}\n\n.cv-tabs-nav .nav-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  color: #495057;\n  text-decoration: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-top-left-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  cursor: pointer;\n  min-height: 2.5rem;\n  box-sizing: border-box;\n}\n\n.cv-tabs-nav .nav-link p {\n  margin: 0; /* remove default margins */\n  display: inline; /* or inline-block */\n}\n\n/* Tab header container with pin icon */\n.cv-tab-header-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cv-tab-header-text {\n  flex: 1;\n}\n\n.cv-tab-pin-icon {\n  display: inline-block;\n  line-height: 0;\n  flex-shrink: 0;\n}\n\n.cv-tab-pin-icon svg {\n  vertical-align: middle;\n  width: 14px;\n  height: 14px;\n}\n\n.cv-tabs-nav .nav-link:hover,\n.cv-tabs-nav .nav-link:focus {\n  border-color: #e9ecef #e9ecef #dee2e6;\n  isolation: isolate;\n}\n\n.cv-tabs-nav .nav-link.active {\n  color: #495057;\n  background-color: #fff;\n  border-color: #dee2e6 #dee2e6 #fff;\n}\n\n.cv-tabs-nav .nav-link:focus {\n  outline: 0;\n  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n\n/* Legacy button-based nav (deprecated, kept for compatibility) */\n.cv-tabs-nav-item {\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  font-size: 1rem;\n  color: #6c757d;\n  transition: color 150ms ease, border-color 150ms ease;\n}\n\n.cv-tabs-nav-item:hover {\n  color: #495057;\n  border-bottom-color: #dee2e6;\n}\n\n.cv-tabs-nav-item.active {\n  color: #007bff;\n  border-bottom-color: #007bff;\n  font-weight: 500;\n}\n\n.cv-tabs-nav-item:focus {\n  outline: 2px solid #007bff;\n  outline-offset: 2px;\n}\n\n/* Tab panel base styles */\ncv-tab {\n  display: block;\n}\n\n/* Hide cv-tab-header source element; content is extracted to nav link */\ncv-tab-header {\n  display: none !important;\n}\n\n/* Allow cv-tab-body to flow naturally */\ncv-tab-body {\n  display: block;\n}\n\n/* Override visibility for tab panels - use display instead of collapse animation */\ncv-tab.cv-hidden {\n  display: none !important;\n}\n\ncv-tab.cv-visible {\n  display: block !important;\n}\n\ncv-tabgroup {\n  display: block;\n  margin-bottom: 1.5rem;\n}\n\n/* Bottom border line for tab groups */\n.cv-tabgroup-bottom-border {\n  border-bottom: 1px solid #dee2e6;\n  margin-top: 1rem;\n}\n\n/* Tab content wrapper */\n.cv-tab-content {\n  padding: 1rem 0;\n}\n\n/* Viewer-controlled nav visibility: hide nav containers when requested */\n.cv-tabs-nav-hidden {\n  display: none !important;\n}\n\n/* Print-friendly: hide tab navigation when printing to reduce clutter */\n@media print {\n  .cv-tabs-nav {\n    display: none !important;\n  }\n}\n";
 //# sourceMappingURL=tab-styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/tab-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU,2hGA2ItB,CAAC"}
+{"version":3,"file":"tab-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/tab-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU,03GAkKtB,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@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-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";
 /**
  * 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,g0pBA+iCzB,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,63pBAmjCzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}

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

@@ -46,13 +46,26 @@ export interface TabGroupConfig {
     label?: string;
     /** Available tabs in this group */
     tabs: TabConfig[];
+    /** Determines if the tab group is only shown on pages where it's used. */
+    isLocal?: boolean;
+}
+/**
+ * Configuration for a single toggle.
+ */
+export interface ToggleConfig {
+    /** Toggle identifier */
+    id: string;
+    /** Display label for the toggle */
+    label?: string;
+    /** Determines if the toggle is only shown on pages where it's used. */
+    isLocal?: boolean;
 }
 /**
  * Configuration for the site, has default state and list of toggles
  */
 export interface Config {
     /** All available toggle categories */
-    allToggles?: string[];
+    toggles?: ToggleConfig[];
     /** Default state for the site */
     defaultState?: State;
     /** Optional tab group configurations */
@@ -62,7 +75,7 @@ export interface Config {
  * Represents the configuration file structure for CustomViews auto-initialization.
  */
 export interface ConfigFile {
-    /** Core configuration object with allToggles and defaultState */
+    /** Core configuration object with toggles and defaultState */
     config?: Config;
     /** Path to the assets JSON file */
     assetsJsonPath?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,EAAE,SAAS,EAAE,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,mCAAmC;IACnC,MAAM,CAAC,EAAE;QACP,oCAAoC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,sBAAsB;QACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;QACtG,mBAAmB;QACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,mCAAmC;QACnC,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,mBAAmB;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8BAA8B;QAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,mDAAmD;QACnD,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,0BAA0B;QAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,4BAA4B;QAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mEAAmE;QACnE,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,EAAE,GAAG,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC;QACvB,mBAAmB,CAAC,EAAE;YACpB,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,CAAC,EAAE,GAAG,CAAC;SACd,CAAC;KACH;CACF"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,iCAAiC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,mCAAmC;IACnC,MAAM,CAAC,EAAE;QACP,oCAAoC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,sBAAsB;QACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;QACtG,mBAAmB;QACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,mCAAmC;QACnC,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,mBAAmB;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8BAA8B;QAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,mDAAmD;QACnD,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,0BAA0B;QAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,4BAA4B;QAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mEAAmE;QACnE,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,EAAE,GAAG,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC;QACvB,mBAAmB,CAAC,EAAE;YACpB,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,CAAC,EAAE,GAAG,CAAC;SACd,CAAC;KACH;CACF"}

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

@@ -25,4 +25,5 @@ export declare function getNavHeadingOffIcon(): string;
  * Transition Icon for Navigation Headings
  */
 export declare function getNavDashed(): string;
+export declare function getPinIcon(isPinned?: boolean): 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"}
+{"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"}

package/dist/types/utils/scroll-manager.d.ts

@@ -0,0 +1,26 @@
+export declare class ScrollManager {
+    /**
+     * Finds the highest tab group currently in the viewport.
+     * This is intended to be called BEFORE the state changes, to identify which element to scroll to.
+     * @returns The HTMLElement of the highest visible tab group, or null if none are found.
+     */
+    static findHighestVisibleTabGroup(): HTMLElement | null;
+    /**
+     * Scrolls the page to align the given tab group's header (or the group itself)
+     * to the top of the viewport, accounting for a fixed/sticky page header.
+     * This should be called AFTER the content has changed.
+     * @param groupEl The tab group element to scroll to.
+     */
+    static scrollToTabGroup(groupEl: HTMLElement): void;
+    /**
+     * Adjusts the scroll position to keep a specific element in the same visual location
+     * after a content change. This is useful for preventing the page from jumping when
+     * content above the element is added or removed.
+     * @param scrollAnchor An object containing the element to anchor and its initial top position.
+     */
+    static handleScrollAnchor(scrollAnchor: {
+        element: HTMLElement;
+        top: number;
+    }): void;
+}
+//# sourceMappingURL=scroll-manager.d.ts.map

package/dist/types/utils/scroll-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-manager.d.ts","sourceRoot":"","sources":["../../../src/utils/scroll-manager.ts"],"names":[],"mappings":"AAEA,qBAAa,aAAa;IACxB;;;;OAIG;WACW,0BAA0B,IAAI,WAAW,GAAG,IAAI;IA8C9D;;;;;OAKG;WACW,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IA8B1D;;;;;OAKG;WACW,kBAAkB,CAAC,YAAY,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAe5F"}