{"version":3,"file":"cssettings.umd.cjs","sources":["../src/scripts/config.ts","../src/scripts/state.ts","../src/scripts/utils.ts","../src/scripts/storage.ts","../src/scripts/styles.ts","../src/scripts/panel.ts","../src/scripts/parser.ts","../src/main.ts"],"sourcesContent":["import packageJson from \"../../package.json\";\n\nexport const CONFIG = {\n VERSION: packageJson.version,\n PANEL_ID: \"settings-panel\",\n STORAGE_PREFIX: \"settings-\",\n SELECTORS: {\n STYLE_TAGS: \"style\"\n },\n PATTERNS: {\n INLINE_SETTING: /(--[\\w-]+):\\s*([^;]+);?\\s*\\/\\*\\s*@settings\\s+(?:\\[(data-[\\w-]+)\\]\\s*)?(.+?)\\s*\\*\\//,\n VARIABLE: /(--[\\w-]+):\\s*([^;]+);?/,\n COMMENT_SETTING: /\\/\\*\\s*@settings\\s+(?:\\[(data-[\\w-]+)\\]\\s*)?(.+?)\\s*\\*\\//\n },\n};\n","export interface Setting {\n variable: string;\n value: string;\n values: string[];\n dataAttr?: string;\n selector: string;\n}\n\nexport interface PendingBlock {\n selector: string;\n settings: Setting[];\n id: number;\n}\n\nexport interface State {\n settings: Setting[];\n pendingBlocks: PendingBlock[];\n blockId: number;\n storageKey: string;\n lockPosition: string;\n offsetX: number;\n offsetY: number;\n initialX: number;\n initialY: number;\n isCollapsed: boolean;\n panelSize: {\n width: number | null;\n height: number | null;\n };\n collapsedGroups: Set;\n}\n\nexport let isRestoring = false;\n\nexport const CANONICAL_ID = (() => {\n const canonicalLink = document.querySelector('link[rel=\"canonical\"]');\n if (!canonicalLink) return null;\n const href = canonicalLink.getAttribute(\"href\");\n const match = href?.match(/pen\\/([\\w-]+)/);\n return match?.[1] || null;\n})();\n\nexport const STORAGE_KEY = (suffix: string) => {\n const id = `${CANONICAL_ID}-${location.pathname}-${window.location}`;\n return `settings-panel-${id}-${suffix}`;\n};\n\nexport const state: State = {\n settings: [],\n pendingBlocks: [],\n blockId: 0,\n storageKey: STORAGE_KEY(\"main\"),\n lockPosition: \"\",\n offsetX: 0,\n offsetY: 0,\n initialX: 0,\n initialY: 0,\n isCollapsed: false,\n panelSize: { width: null, height: null },\n collapsedGroups: new Set()\n};\n\nexport const setIsRestoring = (value: boolean) => {\n isRestoring = value;\n};\n","export const utils = {\n createElement(tag: string, styles = {}, domProps = {}, htmlAttributes = {}) {\n const element = document.createElement(tag);\n Object.assign(element.style, styles);\n\n // Séparer les propriétés DOM des attributs HTML\n for (const [key, value] of Object.entries(domProps)) {\n if (key in element) {\n (element as any)[key] = value;\n } else {\n element.setAttribute(key, String(value));\n }\n }\n\n // Appliquer les attributs HTML explicites\n for (const [key, value] of Object.entries(htmlAttributes)) {\n element.setAttribute(key, String(value));\n }\n\n return element;\n },\n\n applyStyles(element: HTMLElement, styles: Record) {\n Object.assign(element.style, styles);\n },\n\n safeQuerySelector(selector: string) {\n try {\n return document.querySelector(selector);\n } catch (err) {\n console.warn(`❌ Selector issue: ${selector}`, err);\n return null;\n }\n },\n\n getComputedValue(selector: string, variable: string, defaultValue: string) {\n try {\n const element = this.safeQuerySelector(selector);\n if (element) {\n const computedValue = getComputedStyle(element).getPropertyValue(\n variable\n );\n return computedValue ? computedValue.trim() : defaultValue;\n }\n } catch (err) {\n console.warn(\n `❌ Failed to get computed value for ${variable} on ${selector}`,\n err\n );\n }\n return defaultValue;\n },\n\n isHorizontalLock(position: string) {\n return position === \"top\" || position === \"bottom\";\n },\n\n isVerticalLock(position: string) {\n return position === \"left\" || position === \"right\";\n }\n};\n","import { isRestoring, state } from \"./state\";\nimport { utils } from \"./utils\";\n\nexport const storage = {\n save() {\n console.log(\n \"💾 save() called\",\n JSON.stringify(storage.getVariableValues())\n );\n\n if (isRestoring) {\n console.log(\"⏸️ Skipping save during restore\");\n return;\n }\n const data = {\n lockPosition: state.lockPosition,\n isCollapsed: state.isCollapsed,\n panelSize: state.panelSize,\n collapsedGroups: Array.from(state.collapsedGroups),\n variableValues: this.getVariableValues()\n };\n localStorage.setItem(state.storageKey, JSON.stringify(data));\n console.log(\"💾 Settings saved to localStorage\");\n },\n\n applyVariableValues(variableValues: Record) {\n Object.entries(variableValues).forEach(([key, value]) => {\n const lastColon = key.lastIndexOf(\":\");\n if (lastColon <= 0) return;\n\n const selector = key.slice(0, lastColon);\n const variable = key.slice(lastColon);\n\n try {\n const targets = document.querySelectorAll(selector);\n targets.forEach((target) => {\n if (target instanceof HTMLElement) {\n target.style.setProperty(variable, value);\n }\n });\n console.log(`🎯 ${variable} = ${value} on ${selector}`);\n } catch (e) {\n console.warn(\n `⚠️ Failed to apply variable ${variable} on ${selector}:`,\n e\n );\n }\n });\n },\n\n load() {\n const raw = localStorage.getItem(state.storageKey);\n if (!raw) return null;\n try {\n const data = JSON.parse(raw);\n\n if (data.collapsedGroups && Array.isArray(data.collapsedGroups)) {\n state.collapsedGroups = new Set(data.collapsedGroups);\n }\n\n console.log(\"📂 Settings loaded from localStorage\");\n return data;\n } catch (err) {\n console.warn(\"⚠️ Failed to parse settings from localStorage\", err);\n return null;\n }\n },\n getVariableValues() {\n const values: Record = {};\n state.settings.forEach((setting: { selector: string; variable: string }) => {\n const element = utils.safeQuerySelector(setting.selector);\n if (!element) return;\n\n let value = (element as HTMLElement).style.getPropertyValue(setting.variable)?.trim();\n if (!value) {\n value = getComputedStyle(element)\n .getPropertyValue(setting.variable)\n ?.trim();\n }\n\n if (value) {\n values[`${setting.selector}:${setting.variable}`] = value;\n }\n });\n return values;\n },\n\n\n};\n","import type { CONFIG } from \"./config\";\n\nexport const PANEL_STYLES = (config: typeof CONFIG) => `\n /* Reset styles for shadow DOM */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n /* Global styles */\n :host {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n pointer-events: none;\n z-index: 9999;\n letter-spacing: normal;\n word-spacing: normal;\n line-height: 1.4;\n text-transform: none;\n font-weight: normal;\n font-style: normal;\n text-decoration: none;\n }\n\n /* Panel states */\n #${config.PANEL_ID} {\n pointer-events: auto;\n position: fixed;\n background: rgba(15, 23, 42, 0.95);\n backdrop-filter: blur(20px) saturate(180%);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 8px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n color: #f8fafc;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow: hidden;\n z-index: 9999;\n max-width: 420px;\n min-width: 280px;\n width: auto;\n height: auto;\n max-height: 500px;\n user-select: none;\n bottom: 1.5rem;\n left: 1.5rem;\n display: flex;\n flex-direction: column;\n resize: both;\n opacity: 1;\n transform: translateY(0) scale(1);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n /* Panel states classes */\n #${config.PANEL_ID}.panel-hidden {\n display: none;\n }\n\n #${config.PANEL_ID}.panel-opening {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n\n #${config.PANEL_ID}.panel-closing {\n opacity: 0;\n transform: translateY(10px) scale(0.98);\n }\n\n #${config.PANEL_ID}.panel-visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n /* Content visibility states */\n #${config.PANEL_ID} .content-visible {\n opacity: 1;\n transform: translateY(0);\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n gap: 0.5rem;\n padding: 0.5rem;\n }\n\n #${config.PANEL_ID} .content-hidden {\n display: none !important;\n opacity: 0;\n transform: translateY(-5px);\n }\n\n /* Description block styles */\n #${config.PANEL_ID} .description-block {\n flex-shrink: 0;\n padding: 0.75rem;\n background: rgba(15, 23, 42, 0.6);\n border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n text-wrap: pretty;\n }\n\n #${config.PANEL_ID} .description-text {\n color: #cbd5e1;\n font-size: 0.75rem;\n line-height: 1.4;\n margin: 0;\n opacity: 0.9;\n text-wrap: pretty;\n }\n\n /* Scrollbar styles */\n #${config.PANEL_ID} *::-webkit-scrollbar {\n width: 6px;\n }\n #${config.PANEL_ID} *::-webkit-scrollbar-track {\n background: rgba(30, 41, 59, 0.3);\n border-radius: 3px;\n }\n #${config.PANEL_ID} *::-webkit-scrollbar-thumb {\n background: rgba(148, 163, 184, 0.3);\n border-radius: 3px;\n transition: background 0.2s ease;\n }\n #${config.PANEL_ID} *::-webkit-scrollbar-thumb:hover {\n background: rgba(148, 163, 184, 0.5);\n }\n \n /* Range slider styles */\n #${config.PANEL_ID} input[type=\"range\"] {\n -webkit-appearance: none;\n height: 6px;\n background: rgba(148, 163, 184, 0.3);\n border-radius: 3px;\n outline: none;\n opacity: 0.7;\n transition: opacity 0.2s;\n flex: 1 1 auto;\n min-width: 100px;\n cursor: pointer;\n }\n \n #${config.PANEL_ID} input[type=\"range\"]:hover {\n opacity: 1;\n }\n \n #${config.PANEL_ID} input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n transition: all 0.2s ease;\n }\n \n #${config.PANEL_ID} input[type=\"range\"]::-webkit-slider-thumb:hover {\n background: #818cf8;\n transform: scale(1.1);\n }\n \n #${config.PANEL_ID} input[type=\"range\"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n border: none;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n /* Header styles */\n #${config.PANEL_ID} .panel-header {\n flex-shrink: 0;\n position: sticky;\n top: 0;\n z-index: 2;\n background: rgba(15, 23, 42, 0.95);\n background-image: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);\n border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n padding: 0.5rem 0.75rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #${config.PANEL_ID} .panel-header .header-left {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n #${config.PANEL_ID} .panel-header .header-title {\n font-weight: 600;\n color: #e2e8f0;\n font-size: 0.9rem;\n }\n\n #${config.PANEL_ID} .panel-header.draggable {\n cursor: grab;\n }\n\n #${config.PANEL_ID} .panel-header.dragging {\n cursor: grabbing;\n }\n\n /* Button styles */\n #${config.PANEL_ID} .btn {\n background: rgba(148, 163, 184, 0.1);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 8px;\n color: #cbd5e1;\n cursor: pointer;\n font-size: 12px;\n padding: 0.25rem 0.5rem;\n transition: all 0.2s ease;\n min-width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #${config.PANEL_ID} .btn:hover {\n background: rgba(148, 163, 184, 0.2);\n border-color: rgba(148, 163, 184, 0.3);\n color: #f8fafc;\n }\n\n #${config.PANEL_ID} .btn-close {\n background: rgba(239, 68, 68, 0.1);\n border-color: rgba(239, 68, 68, 0.2);\n color: #fca5a5;\n }\n\n #${config.PANEL_ID} .btn-close:hover {\n background: rgba(239, 68, 68, 0.2);\n border-color: rgba(239, 68, 68, 0.3);\n color: #f87171;\n }\n\n /* Select control styles */\n #${config.PANEL_ID} .lock-select {\n background: rgba(30, 41, 59, 0.8);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 8px;\n color: #cbd5e1;\n cursor: pointer;\n font-size: 12px;\n padding: 0.25rem 0.5rem;\n transition: all 0.2s ease;\n min-width: 100px;\n }\n\n #${config.PANEL_ID} .lock-select:focus {\n border-color: rgba(99, 102, 241, 0.5);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n }\n\n /* Group styles */\n #${config.PANEL_ID} .group {\n margin-bottom: 0;\n background: rgba(30, 41, 59, 0.3);\n border-radius: 6px;\n padding: 0;\n border: 1px solid rgba(148, 163, 184, 0.1);\n transition: all 0.2s ease;\n overflow: hidden;\n width: 100%;\n }\n\n #${config.PANEL_ID} .group:hover {\n background: rgba(30, 41, 59, 0.4);\n border-color: rgba(148, 163, 184, 0.2);\n }\n\n #${config.PANEL_ID} .group-header {\n font-weight: 600;\n color: #e2e8f0;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: rgba(15, 23, 42, 0.2);\n }\n\n #${config.PANEL_ID} .group-header:hover {\n background: rgba(15, 23, 42, 0.4);\n }\n\n #${config.PANEL_ID} .group-header.has-border {\n border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n }\n\n #${config.PANEL_ID} .chevron {\n font-size: 0.7rem;\n transition: transform 0.2s ease;\n color: #94a3b8;\n }\n\n #${config.PANEL_ID} .chevron.rotated {\n transform: rotate(-90deg);\n }\n\n #${config.PANEL_ID} .selector-text {\n flex: 1;\n }\n\n #${config.PANEL_ID} .count-badge {\n background: rgba(99, 102, 241, 0.2);\n color: #a5b4fc;\n padding: 0.125rem 0.375rem;\n border-radius: 10px;\n font-size: 0.7rem;\n font-weight: 500;\n }\n\n #${config.PANEL_ID} .group-content {\n padding: 0.5rem;\n max-height: none;\n overflow: hidden;\n opacity: 1;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n #${config.PANEL_ID} .group-content.collapsed {\n max-height: 0;\n opacity: 0;\n padding: 0;\n }\n\n /* Variable control styles */\n #${config.PANEL_ID} .variable-control {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-direction: row;\n flex: 1 1 auto;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n border-radius: 8px;\n background: rgba(15, 23, 42, 0.5);\n border: 1px solid rgba(148, 163, 184, 0.05);\n transition: all 0.2s ease;\n }\n\n #${config.PANEL_ID} .variable-control:hover {\n background: rgba(15, 23, 42, 0.7);\n border-color: rgba(148, 163, 184, 0.1);\n }\n\n #${config.PANEL_ID} .variable-label {\n font-weight: 500;\n color: #cbd5e1;\n font-size: 0.8rem;\n min-width: 80px;\n flex: 0 0 auto;\n }\n\n /* Control specific styles */\n #${config.PANEL_ID} .select-control {\n padding: 0.25rem 0.35rem;\n border-radius: 8px;\n border: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.8);\n color: #f8fafc;\n cursor: pointer;\n font-size: 0.8rem;\n flex: 1 1 auto;\n transition: all 0.2s ease;\n min-width: 120px;\n }\n\n #${config.PANEL_ID} .select-control:focus {\n border-color: rgba(99, 102, 241, 0.5);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n background: rgba(30, 41, 59, 0.9);\n }\n\n #${config.PANEL_ID} .select-option {\n background: #1e293b;\n color: #f8fafc;\n }\n\n /* Color control styles */\n #${config.PANEL_ID} .color-control {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex: 1 1 auto;\n }\n\n #${config.PANEL_ID} .color-input {\n border-radius: 6px;\n border: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.8);\n cursor: pointer;\n width: 40px;\n height: 32px;\n padding: 2px;\n }\n\n #${config.PANEL_ID} .color-palette {\n display: flex;\n gap: 0.25rem;\n flex-wrap: wrap;\n flex: 1 1 auto;\n }\n\n #${config.PANEL_ID} .color-swatch {\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 2px solid rgba(148, 163, 184, 0.3);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n #${config.PANEL_ID} .color-swatch:hover {\n transform: scale(1.1);\n border-color: rgba(99, 102, 241, 0.5);\n }\n\n #${config.PANEL_ID} .color-swatch.selected {\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);\n }\n\n /* Range control styles */\n #${config.PANEL_ID} .range-control {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex: 1 1 auto;\n }\n\n #${config.PANEL_ID} .range-value {\n min-width: 50px;\n font-size: 0.8rem;\n color: #cbd5e1;\n font-weight: 500;\n text-align: center;\n background: rgba(30, 41, 59, 0.6);\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n border: 1px solid rgba(148, 163, 184, 0.2);\n }\n \n /* Footer styles */\n #${config.PANEL_ID} .panel-footer {\n flex-shrink: 0;\n position: fixed;\n bottom: 0;\n z-index: 2;\n background: rgba(15, 23, 42, 0.95);\n background-image: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);\n border-top: 1px solid rgba(148, 163, 184, 0.1);\n padding: 0.5rem 0.75rem;\n width: 100%;\n bottom: 0;\n z-index: 1000;\n }\n\n #${config.PANEL_ID} .footer-text {\n color: #cbd5e1;\n font-size: 12px;\n text-align: center;\n margin: 0;\n }\n `\n","import { CONFIG } from \"./config\"\nimport { state } from \"./state\"\nimport { storage } from \"./storage\"\nimport { utils } from \"./utils\"\nimport type { Setting } from \"./state\"\nimport { PANEL_STYLES } from \"./styles\"\n\nconst COG_SVG = ``\n\n\n\nfunction injectSettingsToggle(panelInstance: SettingsPanel) {\n const cog = utils.createElement(\n \"button\",\n {\n position: \"fixed\",\n bottom: \"1.5rem\",\n right: \"1.5rem\",\n zIndex: 9998,\n background: \"rgba(10, 18, 52, 0.4)\",\n backdropFilter: \"blur(10px)\",\n color: \"#fff\",\n border: \"none\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n fontSize: \"18px\",\n cursor: \"pointer\",\n boxShadow: \"0 8px 25px rgba(102, 126, 234, 0.4), 0 4px 10px rgba(0,0,0,0.15)\",\n transition: \"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n {\n id: \"settings-cog\",\n innerHTML: COG_SVG,\n title: \"Open Settings Panel\",\n },\n )\n\n // Enhanced hover effects\n cog.addEventListener(\"mouseenter\", () => {\n utils.applyStyles(cog, {\n transform: \"scale(1.1) rotate(90deg)\",\n boxShadow: \"0 12px 35px rgba(102, 126, 234, 0.6), 0 6px 15px rgba(0,0,0,0.2)\",\n })\n })\n\n cog.addEventListener(\"mouseleave\", () => {\n utils.applyStyles(cog, {\n transform: \"scale(1) rotate(0deg)\",\n boxShadow: \"0 8px 25px rgba(102, 126, 234, 0.4), 0 4px 10px rgba(0,0,0,0.15)\",\n })\n })\n\n cog.onclick = () => panelInstance.handleOpen()\n\n document.body.appendChild(cog)\n}\n\nexport class SettingsPanel {\n panel: HTMLElement | null\n content: HTMLElement | null\n lockSelect: HTMLElement | null\n toggleBtn: HTMLElement | null\n resizeObserver: ResizeObserver | null\n shadowHost: HTMLElement | null\n shadowRoot: ShadowRoot | null\n isDragging = false;\n startX = 0;\n startY = 0;\n startWidth = 0;\n startHeight = 0;\n private boundHandleMouseDown = this.handleMouseDown.bind(this);\n // Créez des méthodes bound une fois\n private boundMouseEnter = () => {\n this.isMouseOverPanel = true;\n this.handleBodyScroll();\n };\n\n private boundMouseLeave = () => {\n this.isMouseOverPanel = false;\n this.handleBodyScroll();\n };\n\n private highlightedElements: Element[] = [];\n\n constructor() {\n this.panel = null\n this.content = null\n this.lockSelect = null\n this.toggleBtn = null\n this.resizeObserver = null\n this.shadowHost = null\n this.shadowRoot = null\n this.highlightedElements = []\n }\n\n private isMouseOverPanel: boolean = false\n private handleBodyScroll() {\n if (this.isMouseOverPanel && !state.isCollapsed) {\n document.body.style.overflow = \"hidden\"\n } else {\n document.body.style.overflow = \"\"\n }\n }\n\n create() {\n this.destroy()\n console.log(\"🔄 Creating shadow DOM...\")\n this.createShadowDOM()\n console.log(\"🔄 Creating main panel...\")\n this.createMainPanel()\n console.log(\"🔄 Creating header...\")\n this.createHeader()\n\n console.log(\"🔄 Creating content...\")\n this.createContent()\n console.log(\"🔄 Creating description block...\")\n this.createDescriptionBlock()\n console.log(\"🔄 Creating footer...\")\n this.createFooter()\n console.log(\"🔄 Setting up event listeners...\")\n this.setupEventListeners()\n console.log(\"🔄 Rendering settings...\")\n this.renderSettings()\n console.log(\"🔄 Applying initial state...\")\n this.applyInitialState()\n\n if (this.panel && this.shadowHost) {\n this.panel.style.display = \"none\"\n this.shadowRoot?.appendChild(this.panel)\n document.body.appendChild(this.shadowHost)\n injectSettingsToggle(this)\n console.log(\"🧩 Injected enhanced settings panel in Shadow DOM.\")\n\n\n\n // Puis utilisez-les\n this.panel.addEventListener('mouseenter', this.boundMouseEnter);\n this.panel.addEventListener('mouseleave', this.boundMouseLeave);\n }\n }\n\n private restoreBodyStyles() {\n // Supprimer tous les styles de docking\n document.body.style.removeProperty('height');\n document.body.style.removeProperty('width');\n document.body.style.removeProperty('margin-top');\n document.body.style.removeProperty('margin-bottom');\n document.body.style.removeProperty('margin-left');\n document.body.style.removeProperty('margin-right');\n document.body.style.removeProperty('position');\n document.body.style.removeProperty('top');\n document.body.style.removeProperty('bottom');\n document.body.style.removeProperty('left');\n document.body.style.removeProperty('right');\n document.body.style.removeProperty('box-sizing');\n }\n\n\n createShadowDOM() {\n // Create shadow host element\n this.shadowHost = document.createElement('div')\n this.shadowHost.id = 'settings-panel-shadow-host'\n\n // Attach shadow root\n this.shadowRoot = this.shadowHost.attachShadow({ mode: 'closed' })\n\n // Add global styles to shadow DOM\n const styleSheet = document.createElement('style')\n styleSheet.textContent = PANEL_STYLES(CONFIG)\n this.shadowRoot.appendChild(styleSheet)\n }\n\n private handleClose() {\n if (this.panel) {\n // Remove any active highlights\n this.removeHighlight();\n\n // Animation de fermeture avec classes CSS\n this.panel.classList.remove('panel-visible');\n this.panel.classList.add('panel-closing');\n\n // Attendre la fin de l'animation\n setTimeout(() => {\n this.destroy();\n\n // Supprimer tous les cogs existants\n const existingCogs = document.querySelectorAll('#settings-cog');\n existingCogs.forEach(cog => cog.remove());\n\n // Réinjecter un nouveau cog\n injectSettingsToggle(this);\n\n // Mettre à jour l'état\n state.isCollapsed = true;\n storage.save();\n }, 300); // Durée de l'animation CSS\n this.restoreBodyStyles()\n }\n }\n\n public handleOpen() {\n const existingCogs = document.querySelectorAll('#settings-cog');\n existingCogs.forEach(cog => cog.remove());\n\n // Supprimer l'ancien panel s'il existe\n if (this.panel) {\n this.panel.remove();\n }\n\n // Recréer complètement le panel\n this.create();\n\n // Animation d'ouverture avec classes CSS\n if (this.panel) {\n this.panel.classList.add('panel-opening');\n this.panel.style.display = \"block\";\n\n // Mettre à jour le contenu\n if (this.content) {\n this.content.classList.add('content-visible');\n this.content.classList.remove('content-hidden');\n }\n\n // Déclencher l'animation d'ouverture\n requestAnimationFrame(() => {\n this.panel?.classList.remove('panel-opening');\n this.panel?.classList.add('panel-visible');\n });\n }\n\n // Mettre à jour l'état\n state.isCollapsed = false;\n storage.save();\n }\n\n destroy() {\n // Remove any active highlights before destroying\n this.removeHighlight();\n\n // Nettoyer tous les événements\n if (this.panel) {\n const newPanel = this.panel.cloneNode(true) as HTMLElement;\n this.panel.parentNode?.replaceChild(newPanel, this.panel);\n this.panel = newPanel;\n console.log(\"🗑️ Settings panel destroyed.\")\n\n const header = this.panel.querySelector(\"div\");\n if (header) {\n header.removeEventListener(\"mousedown\", this.boundHandleMouseDown);\n }\n\n console.log(\"🗑️ Event listeners removed.\")\n }\n\n // Nettoyer le ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n console.log(\"🗑️ ResizeObserver destroyed.\")\n }\n\n // Supprimer le panel\n if (this.panel) {\n this.panel.remove();\n this.panel = null;\n }\n\n // Nettoyer le Shadow DOM\n if (this.shadowHost && this.shadowHost.parentNode) {\n this.shadowHost.parentNode.removeChild(this.shadowHost);\n document.body.style.overflow = \"\";\n console.log(\"🗑️ ShadowHost destroyed.\")\n }\n\n // Réinitialiser toutes les propriétés\n this.panel = null;\n this.content = null;\n this.lockSelect = null;\n this.toggleBtn = null;\n this.shadowHost = null;\n this.shadowRoot = null;\n this.isMouseOverPanel = false;\n this.resizeObserver = null;\n this.highlightedElements = [];\n\n // Forcer le garbage collector (si possible)\n if ((window as any).gc) {\n (window as any).gc();\n }\n }\n\n update() {\n if (this.panel) {\n this.destroy()\n }\n this.create()\n console.log(\"🔄 Settings panel updated.\")\n }\n\n createMainPanel() {\n this.panel = utils.createElement(\n \"div\",\n {}, // Remove all styles since they're now in Shadow DOM CSS\n {\n id: CONFIG.PANEL_ID,\n },\n )\n this.setupResizeCapability()\n }\n\n createDescriptionBlock() {\n const descriptionBlock = utils.createElement(\n \"div\",\n {},\n {\n className: 'description-block',\n }\n )\n const descriptionText = utils.createElement(\n \"p\",\n {},\n {\n className: 'description-text',\n textContent: `CSSettings is a tool that allows you to easily manage your CSS variables.\n You can use it to change the values of your CSS variables and see the changes in real time.\n You can also use it to create a styleguide for your project. A simple syntax to annotate your CSS variables is available. Learn more at https://github.com/cssettings/cssettings`,\n }\n )\n descriptionBlock.appendChild(descriptionText)\n this.panel?.appendChild(descriptionBlock)\n }\n\n createFooter() {\n const footer = utils.createElement(\n \"div\",\n {},\n {\n className: 'panel-footer',\n }\n )\n\n const footerText = utils.createElement(\n \"p\",\n {},\n {\n className: 'footer-text',\n textContent: `Powered by CSSettings (v${CONFIG.VERSION})`,\n }\n )\n\n footer.appendChild(footerText)\n this.panel?.appendChild(footer)\n }\n\n setupResizeCapability() {\n if (window.ResizeObserver) {\n let timeout: number;\n const observer: ResizeObserver = new ResizeObserver((entries) => {\n // Debounce les mises à jour\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n for (const entry of entries) {\n const { width, height } = entry.contentRect;\n if (state.panelSize) {\n state.panelSize.width = width;\n state.panelSize.height = height;\n }\n }\n\n }, 100);\n });\n\n if (this.panel) {\n observer.observe(this.panel);\n this.resizeObserver = observer;\n }\n }\n }\n\n createHeader() {\n const header = utils.createElement(\n \"div\",\n {},\n {\n className: `panel-header ${state.lockPosition ? '' : 'draggable'}`,\n }\n )\n\n const leftSide = utils.createElement(\n \"div\",\n {},\n {\n className: 'header-left',\n }\n )\n\n const title = utils.createElement(\n \"strong\",\n {},\n {\n className: 'header-title',\n textContent: \"⚙️ Settings Panel\",\n }\n )\n\n const toggleBtn = utils.createElement(\n \"button\",\n {},\n {\n className: 'btn',\n textContent: state.isCollapsed ? \"▼\" : \"▲\",\n title: \"Toggle panel\",\n }\n )\n leftSide.appendChild(title)\n\n toggleBtn.onclick = () => this.toggleCollapse()\n this.toggleBtn = toggleBtn\n leftSide.appendChild(toggleBtn)\n\n header.appendChild(leftSide)\n\n const rightSide = utils.createElement(\"div\", {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"0.25rem\",\n })\n\n this.lockSelect = this.createLockSelect()\n rightSide.appendChild(this.lockSelect)\n\n const closeBtn = utils.createElement(\n \"button\",\n {},\n {\n className: 'btn btn-close',\n textContent: \"✕\",\n title: \"Close panel\",\n },\n )\n\n closeBtn.onclick = () => {\n this.handleClose()\n }\n\n rightSide.appendChild(closeBtn)\n header.appendChild(rightSide)\n this.panel?.appendChild(header)\n\n return header\n }\n\n createLockSelect() {\n const select = utils.createElement(\n \"select\",\n {},\n {\n className: 'lock-select',\n },\n ) as HTMLSelectElement\n\n const options = [\n { value: \"\", text: \"🔓 Draggable\" },\n { value: \"top\", text: \"📌 Top\" },\n { value: \"bottom\", text: \"📌 Bottom\" },\n { value: \"left\", text: \"📌 Left\" },\n { value: \"right\", text: \"📌 Right\" },\n ]\n\n options.forEach(({ value, text }) => {\n const option = utils.createElement(\"option\", {}, {\n value,\n textContent: text,\n selected: value === state.lockPosition,\n })\n select.appendChild(option)\n })\n\n select.onchange = () => this.handleLockChange()\n return select\n }\n\n createContent() {\n this.content = utils.createElement(\"div\", {}, {\n className: state.isCollapsed ? 'content-hidden' : 'content-visible'\n })\n\n this.panel?.appendChild(this.content)\n }\n\n toggleCollapse() {\n state.isCollapsed = !state.isCollapsed\n if (this.content) {\n if (state.isCollapsed) {\n utils.applyStyles(this.content, {\n opacity: \"0\",\n transform: \"translateY(-10px)\",\n transition: \"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n })\n setTimeout(() => {\n if (this.content) {\n this.content.style.display = \"none\"\n }\n }, 300)\n } else {\n this.content.style.display = \"flex\"\n utils.applyStyles(this.content, {\n opacity: \"0\",\n transform: \"translateY(-10px)\",\n })\n requestAnimationFrame(() => {\n utils.applyStyles(this.content as HTMLElement, {\n opacity: \"1\",\n transform: \"translateY(0)\",\n transition: \"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n })\n })\n }\n }\n if (this.toggleBtn) {\n this.toggleBtn.textContent = state.isCollapsed ? \"▼\" : \"▲\"\n }\n this.handleBodyScroll()\n\n console.log(`📁 Panel ${state.isCollapsed ? \"collapsed\" : \"expanded\"}`)\n }\n\n handleLockChange() {\n const select = this.lockSelect as HTMLSelectElement;\n const oldPosition = state.lockPosition;\n state.lockPosition = select.value;\n\n // Si on passe de locked à unlocked\n if (oldPosition && !state.lockPosition) {\n this.resetToDefaultPosition();\n }\n // Si on passe de unlocked à locked ou qu'on change de position\n else if (state.lockPosition) {\n this.applyLockStyles();\n }\n\n // Sauvegarder l'état\n storage.save();\n\n console.log(`🔒 Lock position changed from \"${oldPosition}\" to \"${state.lockPosition}\"`);\n }\n\n applyLockPosition() {\n this.restoreBodyStyles();\n\n // Reset toutes les positions du panel\n utils.applyStyles(this.panel as HTMLElement, {\n top: \"\",\n bottom: \"\",\n left: \"\",\n right: \"\",\n });\n\n if (!state.lockPosition) return;\n\n // Obtenir les dimensions réelles du panel\n const panelRect = this.panel!.getBoundingClientRect();\n const panelHeight = Math.round(panelRect.height);\n const panelWidth = Math.round(panelRect.width);\n\n // Appliquer le positionnement du panel\n const positions = {\n left: { left: \"0\", top: \"0\", bottom: \"0\", right: \"unset\" },\n right: { right: \"0\", top: \"0\", bottom: \"0\", left: \"unset\" },\n top: { top: \"0\", left: \"0\", right: \"0\", bottom: \"unset\" },\n bottom: { bottom: \"0\", left: \"0\", right: \"0\", top: \"unset\" },\n };\n\n if (positions[state.lockPosition as keyof typeof positions]) {\n utils.applyStyles(this.panel as HTMLElement, positions[state.lockPosition as keyof typeof positions]);\n }\n\n // Ajuster le body pour faire de la place au panel\n this.adjustBodyForPanel(state.lockPosition, panelWidth, panelHeight);\n }\n\n private adjustBodyForPanel(position: string, panelWidth: number, panelHeight: number) {\n // S'assurer que le body utilise box-sizing: border-box\n document.body.style.boxSizing = 'border-box';\n\n switch (position) {\n case 'top':\n document.body.style.marginTop = `${panelHeight}px`;\n break;\n\n case 'bottom':\n document.body.style.marginBottom = `${panelHeight}px`;\n break;\n\n case 'left':\n document.body.style.marginLeft = `${panelWidth}px`;\n break;\n\n case 'right':\n document.body.style.marginRight = `${panelWidth}px`;\n break;\n }\n }\n\n applyLockStyles() {\n this.restoreBodyStyles();\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n const panelStyles: Record = {\n borderRadius: \"0\",\n minHeight: \"60px\",\n minWidth: \"280px\",\n };\n\n if (utils.isHorizontalLock(state.lockPosition)) {\n // Pour top/bottom : le panel prend toute la largeur\n Object.assign(panelStyles, {\n maxWidth: \"100%\",\n width: \"100%\",\n resize: \"vertical\",\n maxHeight: \"50vh\", // Limite à 50% de la hauteur de l'écran\n height: state.panelSize.height ? `${Math.min(state.panelSize.height, window.innerHeight * 0.5)}px` : \"auto\",\n });\n } else if (utils.isVerticalLock(state.lockPosition)) {\n // Pour left/right : le panel garde sa largeur et prend toute la hauteur\n Object.assign(panelStyles, {\n height: \"100vh\",\n maxHeight: \"100vh\",\n resize: \"horizontal\",\n maxWidth: \"50vw\", // Limite à 50% de la largeur de l'écran\n width: state.panelSize.width ? `${Math.min(state.panelSize.width, window.innerWidth * 0.5)}px` : \"320px\",\n overflowY: \"auto\",\n });\n }\n\n utils.applyStyles(this.panel as HTMLElement, panelStyles);\n\n // Réactiver l'observer après avoir appliqué les styles\n if (this.resizeObserver) {\n this.resizeObserver.observe(this.panel as HTMLElement);\n }\n\n // Appliquer la position après que les styles soient appliqués\n requestAnimationFrame(() => {\n this.applyLockPosition();\n });\n }\n\n\n\n resetToDefaultPosition() {\n // Nettoyer les styles du body\n this.restoreBodyStyles();\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n // Remettre le panel à sa position par défaut\n utils.applyStyles(this.panel as HTMLElement, {\n position: \"fixed\", // S'assurer que c'est bien fixed\n top: \"\",\n bottom: \"1.5rem\",\n left: \"1.5rem\",\n right: \"\",\n maxWidth: \"420px\",\n minWidth: \"280px\",\n width: \"\",\n height: \"\",\n maxHeight: \"500px\",\n borderRadius: \"16px\",\n resize: \"none\",\n });\n\n if (this.content) {\n this.content.style.flexDirection = \"column\";\n }\n\n // Réactiver l'observer\n if (this.resizeObserver) {\n this.resizeObserver.observe(this.panel as HTMLElement);\n }\n }\n\n applyInitialState() {\n if (state.lockPosition) {\n this.applyLockStyles()\n this.applyLockPosition()\n }\n\n if (this.resizeObserver && this.panel) {\n this.resizeObserver.observe(this.panel)\n }\n }\n\n setupEventListeners() {\n const header = this.panel?.querySelector(\"div\")\n if (header) {\n header.addEventListener(\"mousedown\", this.boundHandleMouseDown)\n\n // Add visual feedback for dragging\n header.addEventListener(\"mousedown\", () => {\n if (!state.lockPosition) {\n utils.applyStyles(header, {\n cursor: \"grabbing\",\n })\n }\n })\n\n document.addEventListener(\"mouseup\", () => {\n utils.applyStyles(header, {\n cursor: state.lockPosition ? \"default\" : \"grab\",\n })\n })\n }\n }\n\n handleMouseDown(e: MouseEvent) {\n if (state.lockPosition || e.target === this.toggleBtn || e.target === this.lockSelect) return\n\n state.offsetX = e.clientX - (this.panel?.offsetLeft || 0)\n state.offsetY = e.clientY - (this.panel?.offsetTop || 0)\n\n const handleMouseMove = (e: MouseEvent) => this.handleDrag(e)\n const handleMouseUp = () => {\n document.removeEventListener(\"mousemove\", handleMouseMove)\n document.removeEventListener(\"mouseup\", handleMouseUp)\n }\n\n document.addEventListener(\"mousemove\", handleMouseMove)\n document.addEventListener(\"mouseup\", handleMouseUp)\n }\n\n handleDrag(e: MouseEvent) {\n utils.applyStyles(this.panel as HTMLElement, {\n left: e.clientX - state.offsetX + \"px\",\n top: e.clientY - state.offsetY + \"px\",\n bottom: \"\",\n right: \"\",\n translate: \"\",\n })\n }\n\n renderSettings() {\n const { selectorOrder, settingsBySelector } = this.organizeSettings()\n console.log(\"📚 Final selectorOrder:\", selectorOrder)\n\n selectorOrder.forEach((selector) => {\n console.log(`🧱 Rendering block for selector: \"${selector}\"`)\n this.renderSelectorGroup(selector, settingsBySelector[selector as keyof typeof settingsBySelector])\n })\n }\n\n organizeSettings() {\n const selectorOrder = []\n const settingsBySelector: Record = {}\n for (const setting of state.settings) {\n const selector = (setting as any).selector\n if (!settingsBySelector[selector]) {\n selectorOrder.push(selector)\n settingsBySelector[selector] = []\n }\n settingsBySelector[selector].push(setting)\n }\n\n return { selectorOrder, settingsBySelector }\n }\n\n renderSelectorGroup(selector: string, variables: Setting[]) {\n const group = utils.createElement(\n \"div\",\n {},\n {\n className: 'group',\n }\n )\n\n const header = utils.createElement(\n \"div\",\n {},\n {\n className: 'group-header',\n title: \"Click to toggle group\",\n }\n )\n\n const isCollapsed = state.collapsedGroups.has(selector)\n\n // Chevron indicator\n const chevron = utils.createElement(\"span\", {}, {\n className: isCollapsed ? 'chevron rotated' : 'chevron',\n textContent: \"▼\"\n })\n\n // Selector text\n const selectorText = utils.createElement(\"span\", {}, {\n className: 'selector-text',\n textContent: `🎯 ${selector}`\n })\n\n // Variables count\n const countBadge = utils.createElement(\"span\", {}, {\n className: 'count-badge',\n textContent: variables.length.toString()\n })\n\n header.appendChild(chevron)\n header.appendChild(selectorText)\n header.appendChild(countBadge)\n\n // Content container for variables\n const content = utils.createElement(\"div\", {}, {\n className: isCollapsed ? 'group-content collapsed' : 'group-content',\n })\n\n // Add variables to content\n variables.forEach((variable) => {\n const container = this.createVariableControl(variable as any)\n content.appendChild(container)\n })\n\n // Toggle functionality\n header.addEventListener(\"click\", () => {\n const wasCollapsed = state.collapsedGroups.has(selector)\n\n if (wasCollapsed) {\n state.collapsedGroups.delete(selector)\n // Expand\n content.classList.remove('collapsed')\n chevron.classList.remove('rotated')\n header.classList.add('has-border')\n } else {\n state.collapsedGroups.add(selector)\n // Collapse\n content.classList.add('collapsed')\n chevron.classList.add('rotated')\n header.classList.remove('has-border')\n }\n\n storage.save()\n console.log(`📁 Group \"${selector}\" ${wasCollapsed ? 'expanded' : 'collapsed'}`)\n })\n\n // Highlight functionality on hover\n group.addEventListener(\"mouseenter\", () => {\n this.highlightElements(selector);\n });\n\n group.addEventListener(\"mouseleave\", () => {\n this.removeHighlight();\n });\n\n group.appendChild(header)\n group.appendChild(content)\n this.content?.appendChild(group)\n }\n\n createVariableControl({\n variable,\n value,\n values,\n dataAttr,\n selector,\n }: { variable: string; value: string; values: string[]; dataAttr: string; selector: string }) {\n const container = utils.createElement(\"div\", {}, {\n className: 'variable-control',\n })\n\n const label = utils.createElement(\n \"label\",\n {},\n {\n textContent: variable.replace(\"--\", \"\"),\n className: 'variable-label',\n },\n )\n\n // Determine the type of control needed\n const computedValue = utils.getComputedValue(selector, variable, value)\n\n // Check if all values are colors\n const areAllColors = values.every(v => this.isColor(v))\n\n // Check if values form a numeric range\n const rangeInfo = this.isNumericRange(values)\n\n let control: HTMLElement\n\n // Debug logging\n console.log(`🔍 Variable: ${variable}`)\n console.log(`📊 Values: [${values.join(', ')}]`)\n console.log(`🎨 Are all colors: ${areAllColors}`)\n console.log(`📏 Range info:`, rangeInfo)\n\n if (areAllColors) {\n // Create color picker control\n console.log(`🎨 Creating color control for ${variable}`)\n control = this.createColorControl(variable, computedValue, values, dataAttr, selector)\n } else if (rangeInfo.isRange) {\n // Create range slider control\n console.log(`📏 Creating range control for ${variable} (${rangeInfo.min} - ${rangeInfo.max}, step: ${rangeInfo.step})`)\n control = this.createRangeControl(variable, computedValue, values, dataAttr, selector, rangeInfo)\n } else {\n // Create default select control\n console.log(`📋 Creating select control for ${variable}`)\n control = this.createSelect(variable, computedValue, values, dataAttr, selector)\n }\n\n container.appendChild(label)\n container.appendChild(control)\n return container\n }\n\n createSelect(variable: string, value: string, values: string[], dataAttr: string, selector: string) {\n const select = utils.createElement(\"select\", {}, {\n className: 'select-control',\n })\n\n const computedValue = utils.getComputedValue(selector, variable, value)\n\n values.forEach((optionValue) => {\n const option = utils.createElement(\n \"option\",\n {},\n {\n className: 'select-option',\n value: optionValue,\n textContent: optionValue,\n selected: optionValue === computedValue,\n },\n )\n select.appendChild(option)\n })\n\n select.onchange = (e) => this.handleVariableChange(e, variable, dataAttr, selector)\n return select\n }\n\n createColorControl(variable: string, value: string, values: string[], dataAttr: string, selector: string) {\n const container = utils.createElement(\"div\", {}, {\n className: 'color-control',\n })\n\n // Color input\n const colorInput = utils.createElement(\"input\", {}, {\n className: 'color-input',\n value: this.colorToHex(value)\n }) as HTMLInputElement\n colorInput.type = \"color\"\n\n // Color palette (clickable color swatches)\n const palette = utils.createElement(\"div\", {}, {\n className: 'color-palette',\n })\n\n values.forEach((colorValue) => {\n const swatch = utils.createElement(\"div\", {\n background: colorValue,\n }, {\n title: colorValue,\n className: value === colorValue ? 'color-swatch selected' : 'color-swatch',\n })\n\n swatch.addEventListener(\"click\", () => {\n // Update the color input\n colorInput.value = this.colorToHex(colorValue)\n\n // Update visual feedback\n palette.querySelectorAll(\".color-swatch\").forEach(s => {\n s.classList.remove('selected')\n })\n swatch.classList.add('selected')\n\n // Trigger change\n this.handleVariableChange({ target: { value: colorValue } } as any, variable, dataAttr, selector)\n })\n\n palette.appendChild(swatch)\n })\n\n colorInput.addEventListener(\"input\", (e) => {\n // Clear swatch selection\n palette.querySelectorAll(\".color-swatch\").forEach(s => {\n s.classList.remove('selected')\n })\n\n this.handleVariableChange(e, variable, dataAttr, selector)\n })\n\n container.appendChild(colorInput)\n container.appendChild(palette)\n return container\n }\n\n createRangeControl(variable: string, value: string, values: string[], dataAttr: string, selector: string, rangeInfo: { min: number; max: number; step: number }) {\n const container = utils.createElement(\"div\", {}, {\n className: 'range-control',\n })\n\n // Extract numeric value from the current value\n const currentNumericValue = parseFloat(value.match(/-?\\d+(\\.\\d+)?/)?.[0] || rangeInfo.min.toString())\n\n // Range slider\n const rangeInput = document.createElement(\"input\")\n rangeInput.type = \"range\"\n rangeInput.min = rangeInfo.min.toString()\n rangeInput.max = rangeInfo.max.toString()\n rangeInput.step = rangeInfo.step.toString()\n rangeInput.value = currentNumericValue.toString()\n\n // Value display\n const valueDisplay = utils.createElement(\"span\", {}, {\n textContent: value,\n className: 'range-value',\n })\n\n rangeInput.addEventListener(\"input\", (e) => {\n const numericValue = (e.target as HTMLInputElement).value\n\n // Find the corresponding original value format\n let matchedValue = numericValue\n const targetNumber = parseFloat(numericValue)\n\n for (const originalValue of values) {\n const originalNumber = parseFloat(originalValue.match(/-?\\d+(\\.\\d+)?/)?.[0] || \"0\")\n if (Math.abs(originalNumber - targetNumber) < rangeInfo.step / 2) {\n matchedValue = originalValue\n break\n }\n }\n\n valueDisplay.textContent = matchedValue\n this.handleVariableChange({ target: { value: matchedValue } } as any, variable, dataAttr, selector)\n })\n\n container.appendChild(rangeInput)\n container.appendChild(valueDisplay)\n return container\n }\n\n handleVariableChange(event: Event, variable: string, dataAttr: string, selector: string) {\n const newValue = (event.target as HTMLSelectElement).value\n const targets = document.querySelectorAll(selector)\n\n if (!targets.length) {\n console.warn(`⚠️ No elements match ${selector}`)\n return\n }\n\n targets.forEach((target) => {\n console.log(`🎯 ${variable} = ${newValue} on ${selector}`)\n ; (target as HTMLElement).style.setProperty(variable, newValue)\n\n if (dataAttr) {\n target.setAttribute(dataAttr, newValue)\n console.log(`🏷️ [${dataAttr}=\"${newValue}\"] set`)\n }\n })\n\n\n }\n\n // Helper function to check if a value is a color\n private isColor(value: string): boolean {\n // Check for hex colors\n if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(value)) {\n return true;\n }\n\n // Check for rgb/rgba\n if (/^rgba?\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*(,\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for hsl/hsla\n if (/^hsla?\\(\\s*\\d+\\s*,\\s*\\d+%\\s*,\\s*\\d+%\\s*(,\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for oklch colors\n if (/^oklch\\(\\s*[\\d.]+[\\s,]+[\\d.]+[\\s,]+[\\d.]+(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for oklab colors\n if (/^oklab\\(\\s*[\\d.]+[\\s,]+[\\d.-]+[\\s,]+[\\d.-]+(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for lch colors\n if (/^lch\\(\\s*[\\d.]+%?[\\s,]+[\\d.]+[\\s,]+[\\d.]+(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for lab colors\n if (/^lab\\(\\s*[\\d.]+%?[\\s,]+[\\d.-]+[\\s,]+[\\d.-]+(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for hwb colors\n if (/^hwb\\(\\s*\\d+\\s+[\\d.]+%\\s+[\\d.]+%(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for p3 colors\n if (/^p3\\(\\s*[\\d.]+%?\\s+[\\d.]+%?\\s+[\\d.]+%?(\\s*\\/\\s*[\\d.]+)?\\s*\\)$/.test(value)) {\n return true;\n }\n\n // Check for CSS color names\n const cssColors = [\n 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond',\n 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral',\n 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray',\n 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred',\n 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet',\n 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen',\n 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow',\n 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush',\n 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow',\n 'lightgray', 'lightgreen', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue',\n 'lightslategray', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta',\n 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen',\n 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue',\n 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab',\n 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred',\n 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'red', 'rosybrown',\n 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver',\n 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal',\n 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen',\n ]\n\n return cssColors.includes(value.toLowerCase())\n }\n\n // Helper function to check if values form a numeric range\n private isNumericRange(values: string[]): { isRange: boolean; min: number; max: number; step: number } {\n // Need at least 2 values\n if (values.length < 2) {\n return { isRange: false, min: 0, max: 0, step: 1 }\n }\n\n const numbers = values.map(v => {\n // Extract number from string, handling units like px, em, %, etc.\n const match = v.match(/-?\\d+(\\.\\d+)?/)\n return match ? parseFloat(match[0]) : NaN\n })\n\n const validNumbers = numbers.filter(n => !isNaN(n))\n\n // All values must be valid numbers\n if (validNumbers.length !== values.length) {\n return { isRange: false, min: 0, max: 0, step: 1 }\n }\n\n // Sort to get min/max\n const sorted = [...validNumbers].sort((a, b) => a - b)\n const min = sorted[0]\n const max = sorted[sorted.length - 1]\n\n // If we have more than 2 values, check if it's a sequence\n if (sorted.length >= 3) {\n const step = sorted[1] - sorted[0]\n // Check if it forms a reasonably consistent sequence\n const isSequence = sorted.every((num, index) => {\n if (index === 0) return true\n const expectedValue = sorted[0] + step * index\n return Math.abs(num - expectedValue) < Math.max(0.1, step * 0.1) // Allow some tolerance\n })\n\n if (isSequence && step > 0) {\n return { isRange: true, min, max, step }\n }\n }\n\n // Even if not a perfect sequence, if all values are numbers and span a range, treat as range\n if (validNumbers.length >= 2 && max > min) {\n const step = Math.min(1, (max - min) / (validNumbers.length - 1))\n return { isRange: true, min, max, step }\n }\n\n return { isRange: false, min, max, step: 1 }\n }\n\n // Helper function to convert color to hex for input[type=\"color\"]\n private colorToHex(color: string): string {\n // If already hex, return as is\n if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color)) {\n return color.length === 4 ?\n '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] :\n color\n }\n\n // For modern color formats (oklch, oklab, lch, lab, hwb), \n // we'll use a temporary element to get computed color\n if (/^(oklch|oklab|lch|lab|hwb)\\(/.test(color)) {\n try {\n const temp = document.createElement('div')\n temp.style.color = color\n document.body.appendChild(temp)\n const computedColor = getComputedStyle(temp).color\n document.body.removeChild(temp)\n\n // Extract RGB values and convert to hex\n const match = computedColor.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/)\n if (match) {\n const r = parseInt(match[1])\n const g = parseInt(match[2])\n const b = parseInt(match[3])\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)\n }\n } catch (error) {\n console.warn(`⚠️ Could not convert color \"${color}\" to hex:`, error)\n }\n }\n\n // For other formats, we'll use a temporary element to get computed color\n const temp = document.createElement('div')\n temp.style.color = color\n document.body.appendChild(temp)\n const computedColor = getComputedStyle(temp).color\n document.body.removeChild(temp)\n\n // Extract RGB values and convert to hex\n const match = computedColor.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/)\n if (match) {\n const r = parseInt(match[1])\n const g = parseInt(match[2])\n const b = parseInt(match[3])\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)\n }\n\n return '#000000' // Fallback\n }\n\n /**\n * Highlight elements that match the given selector\n */\n private highlightElements(selector: string) {\n try {\n // Find all elements that match the selector\n const elements = document.querySelectorAll(selector);\n\n if (elements.length === 0) {\n console.warn(`⚠️ No elements found for selector: ${selector}`);\n return;\n }\n\n // Store the highlighted elements\n this.highlightedElements = Array.from(elements);\n\n // Apply highlight styles to each element\n this.highlightedElements.forEach((element, index) => {\n const htmlElement = element as HTMLElement;\n\n // Store the original styles\n const originalOutline = htmlElement.style.outline;\n const originalBoxShadow = htmlElement.style.boxShadow;\n const originalZIndex = htmlElement.style.zIndex;\n const originalPosition = htmlElement.style.position;\n\n // Store original values as data attributes\n htmlElement.setAttribute('data-original-outline', originalOutline || '');\n htmlElement.setAttribute('data-original-box-shadow', originalBoxShadow || '');\n htmlElement.setAttribute('data-original-z-index', originalZIndex || '');\n htmlElement.setAttribute('data-original-position', originalPosition || '');\n\n // Apply highlight styles\n htmlElement.style.outline = '2px dashed #667eea';\n htmlElement.style.boxShadow = '0 0 0 4px rgba(102, 126, 234, 0.2), 0 0 20px rgba(102, 126, 234, 0.3)';\n htmlElement.style.zIndex = '9998';\n\n // If element is not positioned, make it relative\n const computedPosition = getComputedStyle(htmlElement).position;\n if (computedPosition === 'static') {\n htmlElement.style.position = 'relative';\n }\n\n // Add a number badge for multiple elements\n if (elements.length > 1) {\n const badge = document.createElement('div');\n badge.className = 'css-settings-highlight-badge';\n badge.textContent = (index + 1).toString();\n badge.style.cssText = `\n position: absolute;\n top: -8px;\n right: -8px;\n background: #667eea;\n color: white;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n font-size: 10px;\n font-weight: bold;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n `;\n htmlElement.appendChild(badge);\n }\n });\n\n console.log(`✨ Highlighted ${this.highlightedElements.length} element(s) for selector: ${selector}`);\n\n } catch (error) {\n console.error(`❌ Error highlighting elements for selector \"${selector}\":`, error);\n }\n }\n\n /**\n * Remove highlight from all previously highlighted elements\n */\n private removeHighlight() {\n this.highlightedElements.forEach(element => {\n const htmlElement = element as HTMLElement;\n\n // Restore original styles\n const originalOutline = htmlElement.getAttribute('data-original-outline') || '';\n const originalBoxShadow = htmlElement.getAttribute('data-original-box-shadow') || '';\n const originalZIndex = htmlElement.getAttribute('data-original-z-index') || '';\n const originalPosition = htmlElement.getAttribute('data-original-position') || '';\n\n htmlElement.style.outline = originalOutline;\n htmlElement.style.boxShadow = originalBoxShadow;\n htmlElement.style.zIndex = originalZIndex;\n htmlElement.style.position = originalPosition;\n\n // Remove data attributes\n htmlElement.removeAttribute('data-original-outline');\n htmlElement.removeAttribute('data-original-box-shadow');\n htmlElement.removeAttribute('data-original-z-index');\n htmlElement.removeAttribute('data-original-position');\n\n // Remove highlight badge if it exists\n const badge = htmlElement.querySelector('.css-settings-highlight-badge');\n if (badge) {\n badge.remove();\n }\n });\n\n this.highlightedElements = [];\n console.log('🧹 Removed all highlights');\n }\n}\n","import { CONFIG } from './config';\nimport { state } from './state';\n\nexport class CSSParser {\n styleTags: Element[];\n constructor() {\n this.styleTags = [\n ...document.querySelectorAll(CONFIG.SELECTORS.STYLE_TAGS)\n ];\n console.log(`📄 Found ${this.styleTags.length}