@customviews-js/customviews 1.0.0

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

@@ -0,0 +1,93 @@
+import type { CustomViewsCore } from "./core";
+export interface WidgetOptions {
+    /** The CustomViews core instance to control */
+    core: CustomViewsCore;
+    /** Container element where the widget should be rendered */
+    container?: HTMLElement;
+    /** Widget position: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'middle-left', 'middle-right' */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'middle-left' | 'middle-right';
+    /** Widget theme: 'light' or 'dark' */
+    theme?: 'light' | 'dark';
+    /** Whether to show reset button */
+    showReset?: boolean;
+    /** Widget title */
+    title?: string;
+    /** Widget description text */
+    description?: string;
+    /** Whether to show welcome modal on first visit */
+    showWelcome?: boolean;
+    /** Welcome modal title (only used if showWelcome is true) */
+    welcomeTitle?: string;
+    /** Welcome modal message (only used if showWelcome is true) */
+    welcomeMessage?: string;
+}
+export declare class CustomViewsWidget {
+    private core;
+    private container;
+    private widgetIcon;
+    private options;
+    private modal;
+    constructor(options: WidgetOptions);
+    /**
+     * Render the widget
+     */
+    render(): HTMLElement;
+    /**
+     * Create the simple widget icon
+     */
+    private createWidgetIcon;
+    /**
+     * Remove the widget from DOM
+     */
+    destroy(): void;
+    private attachEventListeners;
+    /**
+     * Close the modal
+     */
+    private closeModal;
+    /**
+     * Open the custom state creator
+     */
+    private openStateModal;
+    /**
+     * Create the custom state creator modal
+     */
+    private createCustomStateModal;
+    /**
+     * Attach event listeners for custom state creator
+     */
+    private attachStateModalEventListeners;
+    /**
+     * Apply theme class to the modal overlay based on options
+     */
+    private applyThemeToModal;
+    /**
+     * Get current state from form values
+     */
+    private getCurrentCustomStateFromModal;
+    /**
+     * Copy shareable URL to clipboard
+     */
+    private copyShareableURL;
+    /**
+     * 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
+     */
+    private showWelcomeModalIfFirstVisit;
+    /**
+     * Create and show the welcome modal
+     */
+    private createWelcomeModal;
+    /**
+     * Attach event listeners for welcome modal
+     */
+    private attachWelcomeModalEventListeners;
+}
+//# sourceMappingURL=widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/core/widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAI9C,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;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;IAqBlC;;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;IAkD9B;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAsDtC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAkBtC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA0BhC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAIxB;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAiBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAiC1B;;OAEG;IACH,OAAO,CAAC,gCAAgC;CAqCzC"}

package/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+import { CustomViewsCore } from "core/core";
+import { Config } from "models/Config";
+export type InitFromJsonOptions = {
+    assetsJsonPath?: string;
+    rootEl?: HTMLElement;
+    config?: Config;
+    configPath?: string;
+};
+export declare class CustomViews {
+    static initFromJson(opts: InitFromJsonOptions): Promise<CustomViewsCore | null>;
+}
+export { CustomViewsCore } from "core/core";
+export type { CustomViewsOptions } from "core/core";
+export { CustomViewsWidget } from "core/widget";
+export type { WidgetOptions } from "core/widget";
+export { PersistenceManager } from "core/persistence";
+export { URLStateManager } from "core/url-state-manager";
+export { AssetsManager } from "models/AssetsManager";
+export { Config as LocalConfig } from "models/Config";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2B,MAAM,WAAW,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,qBAAa,WAAW;WAGT,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;CAqCtF;AAGD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,YAAY,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/types/models/AssetsManager.d.ts

@@ -0,0 +1,10 @@
+import type { CustomViewAsset } from "types/types";
+export declare class AssetsManager {
+    assets: Record<string, CustomViewAsset>;
+    constructor(assets: Record<string, CustomViewAsset>);
+    validate(): boolean;
+    get(assetId: string): CustomViewAsset | undefined;
+    loadFromJSON(json: Record<string, CustomViewAsset>): void;
+    loadAdditionalAssets(additionalAssets: Record<string, CustomViewAsset>): void;
+}
+//# sourceMappingURL=AssetsManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsManager.d.ts","sourceRoot":"","sources":["../../../src/models/AssetsManager.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;gBAE5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IAQnD,QAAQ,IAAI,OAAO;IAInB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAIjD,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/models/Config.d.ts

@@ -0,0 +1,10 @@
+import type { State } from "types/types";
+/**
+ * Configuration for the site, has default state and list of toggles
+ */
+export declare class Config {
+    defaultState: State;
+    allToggles?: string[] | undefined;
+    constructor(defaultState: State, allToggles?: string[] | undefined);
+}
+//# sourceMappingURL=Config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../../../src/models/Config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC;;GAEG;AACH,qBAAa,MAAM;IAER,YAAY,EAAE,KAAK;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE;gBADrB,YAAY,EAAE,KAAK,EACnB,UAAU,CAAC,EAAE,MAAM,EAAE,YAAA;CAE/B"}

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

@@ -0,0 +1,5 @@
+/**
+ * Add styles for hiding and showing toggles animations and transitions to the document head
+ */
+export declare function injectCoreStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles/styles.ts"],"names":[],"mappings":"AA8BA;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAOvC"}

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

@@ -0,0 +1,13 @@
+/**
+ * Widget styles for CustomViews
+ * Extracted from widget.ts for better maintainability
+ *
+ * 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  background: white;\n  color: black;\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  background: white;\n  color: black;\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: 8px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  max-width: 400px;\n  width: 90vw;\n  max-height: 80vh;\n  overflow-y: auto;\n  animation: slideIn 0.2s ease;\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-widget-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #f8f9fa;\n  border-radius: 8px 8px 0 0;\n}\n\n.cv-widget-modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.cv-widget-modal-close {\n  background: none;\n  border: none;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: #666;\n}\n\n.cv-widget-modal-close:hover {\n  background: #e9ecef;\n}\n\n.cv-widget-modal-content {\n  padding: 20px;\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/* Dark theme modal styles */\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #2d3748;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header {\n  background: #1a202c;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-header h3 {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-close:hover {\n  background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-widget-modal-actions {\n  border-color: #4a5568;\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form h4 {\n  margin: 20px 0 10px 0;\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-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.cv-custom-toggles {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 10px;\n}\n\n.cv-custom-state-toggle {\n  display: flex;\n  align-items: center;\n}\n\n.cv-custom-state-toggle label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-weight: normal;\n  margin: 0;\n}\n\n.cv-custom-toggle-checkbox {\n  margin-right: 8px;\n  width: auto;\n}\n\n.cv-custom-state-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-custom-state-cancel,\n.cv-custom-state-copy-url {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-custom-state-reset {\n  flex: 1;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  background: #dc3545;\n  color: white;\n}\n\n.cv-custom-state-reset:hover {\n  background: #c82333;\n}\n\n.cv-custom-state-cancel {\n  background: #6c757d;\n  color: white;\n}\n\n.cv-custom-state-cancel:hover {\n  background: #5a6268;\n}\n\n.cv-custom-state-copy-url {\n  background: #28a745;\n  color: white;\n}\n\n.cv-custom-state-copy-url:hover {\n  background: #218838;\n}\n\n/* Dark theme custom state styles */\n.cv-widget-theme-dark .cv-custom-state-form h4 {\n  color: #e2e8f0;\n  border-color: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-custom-state-section label {\n  color: #a0aec0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-input {\n  background: #1a202c;\n  border-color: #4a5568;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-custom-state-actions {\n  border-color: #4a5568;\n}\n\n/* Welcome modal styles */\n.cv-welcome-modal {\n  max-width: 500px;\n}\n\n.cv-welcome-content {\n  text-align: center;\n}\n\n.cv-welcome-content p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n}\n\n.cv-welcome-widget-preview {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 24px;\n}\n\n.cv-welcome-widget-icon {\n  width: 36px;\n  height: 36px;\n  background: white;\n  color: black;\n  border-radius: 0 18px 18px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.cv-welcome-widget-label {\n  font-size: 14px;\n  color: #666;\n  margin: 0;\n  font-weight: 500;\n}\n\n.cv-welcome-got-it {\n  width: 100%;\n  padding: 12px 24px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 600;\n  transition: background 0.2s ease;\n}\n\n.cv-welcome-got-it:hover {\n  background: #0056b3;\n}\n\n.cv-welcome-got-it:active {\n  background: #004494;\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-content p {\n  color: #cbd5e0;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n  background: #1a202c;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n  color: #a0aec0;\n}\n";
+/**
+ * Inject widget styles into the document head
+ */
+export declare function injectWidgetStyles(): void;
+//# sourceMappingURL=widget-styles.d.ts.map

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * Represents an individual asset that can be rendered in a custom view.
+ */
+export interface CustomViewAsset {
+    /** Optional type. If not provided, auto-detected from src/content. */
+    type?: 'image' | 'text' | 'html' | string;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for images */
+    alt?: string;
+    /** Text or HTML content */
+    content?: string;
+    /** CSS class name(s) to apply */
+    className?: string;
+    /** Inline CSS styles to apply */
+    style?: string;
+    [key: string]: any;
+}
+/**
+ * Represents a specific state of a custom view.
+ * States contain the list of toggle categories that should be displayed in this state.
+ */
+export interface State {
+    toggles: ToggleId[];
+}
+export type ToggleId = string;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@customviews-js/customviews",
+  "version": "1.0.0",
+  "description": "A JavaScript dynamic custom views Library.",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/custom-views.cjs.js",
+  "module": "dist/custom-views.esm.js",
+  "browser": "dist/custom-views.umd.js",
+  "unpkg": "dist/custom-views.umd.min.js",
+  "jsdelivr": "dist/custom-views.umd.min.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/customviews-js/customviews.git"
+  },
+  "files": [
+    "dist/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/custom-views.esm.js",
+      "require": "./dist/custom-views.cjs.js",
+      "browser": "./dist/custom-views.umd.js"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc --project tsconfig.json",
+    "build:js": "rollup -c",
+    "build": "npm run clean && npm run build:types && npm run build:js",
+    "dev": "rollup -c -w",
+    "test": "vitest"
+  },
+  "keywords": [
+    "javascript",
+    "library",
+    "custom views"
+  ],
+  "author": "Chan Ger Teck",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/node": "^24.3.1",
+    "jsdom": "^27.0.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.46.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "bugs": {
+    "url": "https://github.com/customviews-js/customviews/issues"
+  },
+  "homepage": "https://github.com/customviews-js/customviews#readme"
+}