@custardui/custardui 2.1.1 → 2.1.2-beta.1

package/dist/custardui.js

@@ -1,5 +1,5 @@
 /*!
- * @custardui/custardui v2.1.1
+ * @custardui/custardui v2.1.2-beta.1
  * (c) 2026 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -28,58 +28,61 @@
         return cleanbaseUrl + cleanPath;
     }
 
+    const SCRIPT_ATTRIBUTE_DEFAULTS = {
+        baseURL: '/',
+        configPath: '/custardui.config.json',
+    };
+    const FALLBACK_CONFIG = {
+        config: {},
+        settings: { enabled: false },
+    };
     /**
      * Finds the script tag that loaded the library and extracts configuration attributes.
      * Looks for `data-base-url` and `data-config-path`.
      */
     function getScriptAttributes() {
-        let scriptTag = document.currentScript;
-        const defaults = { baseURL: '', configPath: '/custardui.config.json' };
-        if (!scriptTag || !scriptTag.hasAttribute('data-base-url')) {
-            const dataAttrMatch = document.querySelector('script[data-base-url]');
-            if (dataAttrMatch) {
-                scriptTag = dataAttrMatch;
-            }
-            else {
-                // Fallback: try to find script by src pattern
-                for (const script of document.scripts) {
-                    const src = script.src || '';
-                    if (/(?:custard(?:ui)?|@custardui\/custard(?:ui)?)(?:\.min)?\.(?:esm\.)?js($|\?)/i.test(src)) {
-                        scriptTag = script;
-                        break;
-                    }
-                }
+        const scriptTag = findScriptTag();
+        if (!scriptTag)
+            return SCRIPT_ATTRIBUTE_DEFAULTS;
+        return {
+            baseURL: scriptTag.getAttribute('data-base-url') || SCRIPT_ATTRIBUTE_DEFAULTS.baseURL,
+            configPath: scriptTag.getAttribute('data-config-path') || SCRIPT_ATTRIBUTE_DEFAULTS.configPath,
+        };
+    }
+    function findScriptTag() {
+        const current = document.currentScript;
+        if (current?.hasAttribute('data-base-url'))
+            return current;
+        const byAttr = document.querySelector('script[data-base-url]');
+        if (byAttr)
+            return byAttr;
+        // Fallback: find script by src pattern
+        for (const script of document.scripts) {
+            if (/(?:custard(?:ui)?|@custardui\/custard(?:ui)?)(?:\.min)?\.(?:esm\.)?js($|\?)/i.test(script.src)) {
+                return script;
             }
         }
-        if (scriptTag) {
-            return {
-                baseURL: scriptTag.getAttribute('data-base-url') || defaults.baseURL,
-                configPath: scriptTag.getAttribute('data-config-path') || defaults.configPath,
-            };
-        }
-        return defaults;
+        return null;
     }
     /**
      * Fetches and parses the configuration file.
+     * Returns the fallback config silently if the file is not found (404),
+     * since operating without a config file is a valid use case.
      */
     async function fetchConfig(configPath, baseURL) {
-        const fallbackMinimalConfig = {
-            config: {},
-            settings: { enabled: true },
-        };
         try {
             const fullConfigPath = prependBaseUrl(configPath, baseURL);
             const response = await fetch(fullConfigPath);
-            if (!response.ok) {
-                console.warn(`[CustardUI] Config file not found at ${fullConfigPath}. Using defaults.`);
-                return fallbackMinimalConfig;
-            }
-            const config = await response.json();
-            return config;
+            if (!response.ok)
+                return FALLBACK_CONFIG;
+            const text = await response.text();
+            if (!text.trim())
+                return FALLBACK_CONFIG;
+            return JSON.parse(text);
         }
         catch (error) {
             console.error('[CustardUI] Error loading config file:', error);
-            return fallbackMinimalConfig;
+            return FALLBACK_CONFIG;
         }
     }
 
@@ -9203,8 +9206,8 @@
                 config.placeholders.forEach((def) => {
                     placeholderRegistryStore.register({
                         ...def,
-                        // adaptationPlaceholder implies hidden from user-facing settings
-                        hiddenFromSettings: def.adaptationPlaceholder ? true : def.hiddenFromSettings,
+                        // siteManaged implies hidden from user-facing settings
+                        hiddenFromSettings: def.siteManaged ? true : def.hiddenFromSettings,
                         source: 'config',
                     });
                 });
@@ -9264,7 +9267,7 @@
         }
         /**
          * Filters a record of incoming placeholders to only those that can be set by users.
-         * Extends filterValidPlaceholders() by also excluding adaptation-only placeholders.
+         * Extends filterValidPlaceholders() by also excluding siteManaged placeholders.
          * Use this for persistence loads and URL delta application.
          */
         filterUserSettablePlaceholders(placeholders = {}) {
@@ -9272,8 +9275,8 @@
             const userSettable = {};
             for (const [key, value] of Object.entries(valid)) {
                 const def = placeholderRegistryStore.get(key);
-                if (def?.adaptationPlaceholder) {
-                    // Silently skip — adaptation-only placeholders cannot be user-set
+                if (def?.siteManaged) {
+                    // Silently skip — site-managed placeholders cannot be user-set
                     continue;
                 }
                 userSettable[key] = value;
@@ -9461,8 +9464,8 @@
     		const defaults = this.computeDefaultState();
     		const validatedTabs = this.filterValidTabs(newState.tabs ?? {});
     		const validatedPlaceholders = placeholderManager.filterUserSettablePlaceholders(newState.placeholders ?? {});
-    		const validatedShownToggles = this.filterValidToggles(newState.shownToggles ?? defaults.shownToggles ?? []);
-    		const validatedPeekToggles = this.filterValidToggles(newState.peekToggles ?? defaults.peekToggles ?? []);
+    		const validatedShownToggles = this.filterNonSiteManagedToggleIds(this.filterValidToggles(newState.shownToggles ?? defaults.shownToggles ?? []));
+    		const validatedPeekToggles = this.filterNonSiteManagedToggleIds(this.filterValidToggles(newState.peekToggles ?? defaults.peekToggles ?? []));
 
     		this.state = {
     			shownToggles: validatedShownToggles,
@@ -9499,20 +9502,28 @@
     	}
 
     	/**
-    	 * Applies adaptation defaults on top of the config defaults, before persisted state.
+    	 * Applies adaptation preset on top of the config defaults, before persisted state.
     	 * User choices applied later via applyState() will override these.
     	 *
-    	 * @param defaults The defaults section from the adaptation config
+    	 * @param preset The preset section from the adaptation config
     	 */
-    	applyAdaptationDefaults(defaults) {
-    		if (!defaults) return;
+    	applyAdaptationDefaults(preset) {
+    		if (!preset) return;
 
-    		if (defaults.toggles) {
-    			this.applyToggleMap(defaults.toggles);
+    		if (preset.toggles) {
+    			this.applyToggleMap(preset.toggles);
     		}
 
-    		if (defaults.placeholders) {
-    			const validated = placeholderManager.filterValidPlaceholders(defaults.placeholders);
+    		if (preset.tabs) {
+    			const validated = this.filterValidTabs(preset.tabs);
+
+    			if (!this.state.tabs) this.state.tabs = {};
+
+    			Object.assign(this.state.tabs, validated);
+    		}
+
+    		if (preset.placeholders) {
+    			const validated = placeholderManager.filterValidPlaceholders(preset.placeholders);
 
     			if (!this.state.placeholders) this.state.placeholders = {};
 
@@ -9569,11 +9580,11 @@
     			}
     		}
 
-    		// 3. Seed author-controlled (adaptationPlaceholder) defaults.
+    		// 3. Seed site-managed (siteManaged) defaults.
     		// These are set by adaptations when active, and fall back to defaultValue when no adaptation is active.
     		// This is intentionally separate from regular user-settable placeholder defaults (see PR #206).
     		for (const def of placeholderRegistryStore.definitions) {
-    			if (def.adaptationPlaceholder && def.defaultValue !== undefined && def.defaultValue !== '') {
+    			if (def.siteManaged && def.defaultValue !== undefined && def.defaultValue !== '') {
     				placeholders[def.name] = def.defaultValue;
     			}
     		}
@@ -9631,13 +9642,13 @@
     	 */
     	applyToggleDelta(deltaState) {
     		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-    		const toShow = new Set(this.filterValidToggles(deltaState.shownToggles ?? []));
+    		const toShow = new Set(this.filterNonSiteManagedToggleIds(this.filterValidToggles(deltaState.shownToggles ?? [])));
 
     		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-    		const toPeek = new Set(this.filterValidToggles(deltaState.peekToggles ?? []));
+    		const toPeek = new Set(this.filterNonSiteManagedToggleIds(this.filterValidToggles(deltaState.peekToggles ?? [])));
 
     		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-    		const toHide = new Set(this.filterValidToggles(deltaState.hiddenToggles ?? []));
+    		const toHide = new Set(this.filterNonSiteManagedToggleIds(this.filterValidToggles(deltaState.hiddenToggles ?? [])));
 
     		// eslint-disable-next-line svelte/prefer-svelte-reactivity
     		const allMentioned = new Set([...toShow, ...toPeek, ...toHide]);
@@ -9685,6 +9696,18 @@
     		Object.assign(this.state.placeholders, validatedPlaceholders);
     	}
 
+    	/**
+    	 * Removes toggle IDs belonging to siteManaged toggles.
+    	 * Used to prevent user-supplied state (URL, localStorage) from overriding site-controlled toggles.
+    	 */
+    	filterNonSiteManagedToggleIds(ids) {
+    		return ids.filter((id) => {
+    			const toggle = this.config.toggles?.find((t) => t.toggleId === id);
+
+    			return !toggle?.siteManaged;
+    		});
+    	}
+
     	/**
     	 * Validates an incoming tab record against the configuration.
     	 * Drops any groupId that doesn't exist in `config.tabGroups`,
@@ -9826,14 +9849,14 @@
     		set(this.#detectedPlaceholders, value, true);
     	}
 
-    	#hasPageElements = user_derived(() => this.detectedToggles.size > 0 || this.detectedTabGroups.size > 0);
+    	#hasElementsOnCurrentPage = user_derived(() => this.detectedToggles.size > 0 || this.detectedTabGroups.size > 0 || this.detectedPlaceholders.size > 0);
 
-    	get hasPageElements() {
-    		return get(this.#hasPageElements);
+    	get hasElementsOnCurrentPage() {
+    		return get(this.#hasElementsOnCurrentPage);
     	}
 
-    	set hasPageElements(value) {
-    		set(this.#hasPageElements, value);
+    	set hasElementsOnCurrentPage(value) {
+    		set(this.#hasElementsOnCurrentPage, value);
     	}
 
     	registerToggle(id) {
@@ -9937,21 +9960,15 @@
     /* derived-store.svelte.ts generated by Svelte v5.46.1 */
 
     class DerivedStateStore {
-    	#assetsManager = state(undefined);
-
-    	get assetsManager() {
-    		return get(this.#assetsManager);
-    	}
-
-    	set assetsManager(value) {
-    		set(this.#assetsManager, value, true);
-    	}
-
-    	#menuToggles = user_derived(() => {
-    		if (!activeStateStore.config.toggles) return [];
+    	#menuToggles = user_derived(
+    		// Menu toggles are those that are either global or
+    		// local but present and registered in the DOM
+    		() => {
+    			if (!activeStateStore.config.toggles) return [];
 
-    		return activeStateStore.config.toggles.filter((t) => !t.isLocal || elementStore.detectedToggles.has(t.toggleId));
-    	});
+    			return activeStateStore.config.toggles.filter((t) => (!t.isLocal || elementStore.detectedToggles.has(t.toggleId)) && !t.siteManaged);
+    		}
+    	);
 
     	get menuToggles() {
     		return get(this.#menuToggles);
@@ -10019,23 +10036,19 @@
     	set hasMenuOptions(value) {
     		set(this.#hasMenuOptions, value);
     	}
-
-    	setAssetsManager(manager) {
-    		this.assetsManager = manager;
-    	}
     }
 
     const derivedStore = new DerivedStateStore();
 
     var root$w = from_html(`<div><div role="alert"><button type="button" class="close-btn svelte-ysaqmb" aria-label="Dismiss intro">×</button> <p class="text svelte-ysaqmb"> </p></div></div>`);
 
-    const $$css$o = {
+    const $$css$p = {
     	hash: 'svelte-ysaqmb',
     	code: '\n  /* Animation */\n  @keyframes svelte-ysaqmb-popIn {\n    0% {\n      opacity: 0;\n      transform: scale(0.9) translateY(-50%);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1) translateY(-50%);\n    }\n  }\n\n  /* Reset transform for top/bottom positions */\n  @keyframes svelte-ysaqmb-popInVertical {\n    0% {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  /* Simplified Pulse Animation - Shadow Only */\n  @keyframes svelte-ysaqmb-pulse {\n    0% {\n      transform: scale(1);\n      box-shadow:\n        0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 0 0 0 rgba(62, 132, 244, 0.7);\n    }\n    50% {\n      transform: scale(1);\n      box-shadow:\n        0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 0 0 10px rgba(62, 132, 244, 0);\n    }\n    100% {\n      transform: scale(1);\n      box-shadow:\n        0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 0 0 0 rgba(62, 132, 244, 0);\n    }\n  }\n\n  /* Wrapper handles Positioning & Entry Animation */.cv-callout-wrapper.svelte-ysaqmb {position:fixed;z-index:9999;\n\n    /* Default animation (centered ones) */\n    animation: svelte-ysaqmb-popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}\n\n  /* Inner handles Visuals & Pulse Animation */.cv-callout.svelte-ysaqmb {background:var(--cv-callout-bg, var(--cv-bg));padding:1rem 1.25rem;border-radius:0.5rem;box-shadow:0 4px 6px -1px var(--cv-shadow),\n      0 2px 4px -1px var(--cv-shadow); /* adapt shadow? */max-width:250px;font-size:0.9rem;line-height:1.5;color:var(--cv-callout-text, var(--cv-text));display:flex;align-items:flex-start;gap:0.75rem;font-family:inherit;border:2px solid var(--cv-border);}\n\n  /* Apply pulse to inner callout if enabled */.cv-callout.cv-pulse.svelte-ysaqmb {\n    animation: svelte-ysaqmb-pulse 2s infinite 0.5s;}\n\n  /* Arrow Base */.cv-callout.svelte-ysaqmb::before {content:\'\';position:absolute;width:1rem;height:1rem;background:var(--cv-callout-bg, var(--cv-bg));transform:rotate(45deg);border:2px solid var(--cv-border);z-index:-1;}.close-btn.svelte-ysaqmb {background:transparent;border:none;color:currentColor;opacity:0.7;font-size:1.25rem;line-height:1;cursor:pointer;padding:0;margin:-0.25rem -0.5rem 0 0;transition:opacity 0.15s;flex-shrink:0;}.close-btn.svelte-ysaqmb:hover {color:currentColor;opacity:1;}.text.svelte-ysaqmb {margin:0;flex:1;font-weight:500;}\n\n  /* \n     Position Specifics (Applied to Wrapper)\n  */\n\n  /* Right-side positions (Icon on Right -> Callout on Left) */.pos-top-right.svelte-ysaqmb,\n  .pos-middle-right.svelte-ysaqmb,\n  .pos-bottom-right.svelte-ysaqmb {right:80px;}.pos-top-right.svelte-ysaqmb,\n  .pos-bottom-right.svelte-ysaqmb {\n    animation-name: svelte-ysaqmb-popInVertical;}\n\n  /* X Button Spacing Adjustments */.pos-top-right.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb),\n  .pos-middle-right.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb),\n  .pos-bottom-right.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb) {margin-right:0;margin-left:-0.5rem;}\n\n  /* Left-side positions (Icon on Left -> Callout on Right) */.pos-top-left.svelte-ysaqmb,\n  .pos-middle-left.svelte-ysaqmb,\n  .pos-bottom-left.svelte-ysaqmb {left:80px;}.pos-top-left.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb),\n  .pos-middle-left.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb),\n  .pos-bottom-left.svelte-ysaqmb .close-btn:where(.svelte-ysaqmb) {order:2; /* Move to end */margin-right:-0.5rem;margin-left:0;}.pos-top-left.svelte-ysaqmb,\n  .pos-bottom-left.svelte-ysaqmb {\n    animation-name: svelte-ysaqmb-popInVertical;}\n\n  /* Vertical Alignment */.pos-middle-right.svelte-ysaqmb,\n  .pos-middle-left.svelte-ysaqmb {top:50%;\n    /* transform handled by popIn animation (translateY -50%) */}.pos-top-right.svelte-ysaqmb,\n  .pos-top-left.svelte-ysaqmb {top:20px;}.pos-bottom-right.svelte-ysaqmb,\n  .pos-bottom-left.svelte-ysaqmb {bottom:20px;}\n\n  /* Arrow Positioning (Child of .callout, dependent on Wrapper .pos-*) */\n\n  /* Pointing Right */.pos-top-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-middle-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-bottom-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before {right:-0.5rem;border-left:none;border-bottom:none;}\n\n  /* Pointing Left */.pos-top-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-middle-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-bottom-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before {left:-0.5rem;border-right:none;border-top:none;}\n\n  /* Vertical placement of arrow */.pos-middle-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-middle-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before {top:50%;margin-top:-0.5rem;}.pos-top-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-top-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before {top:1.25rem;}.pos-bottom-right.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before,\n  .pos-bottom-left.svelte-ysaqmb .cv-callout:where(.svelte-ysaqmb)::before {bottom:1.25rem;}\n\n  @media print {.cv-callout-wrapper.svelte-ysaqmb {display:none !important;}\n  }'
     };
 
     function IntroCallout($$anchor, $$props) {
-    	append_styles$1($$anchor, $$css$o);
+    	append_styles$1($$anchor, $$css$p);
 
     	let position = prop($$props, 'position', 3, 'middle-left'),
     		message = prop($$props, 'message', 3, 'Customize your reading experience here.'),
@@ -10103,17 +10116,17 @@
     	append($$anchor, svg);
     }
 
-    var root_1$f = from_html(`<button type="button" class="cv-dismiss-btn svelte-122ln5" aria-label="Dismiss settings icon">✕</button>`);
+    var root_1$g = from_html(`<button type="button" class="cv-dismiss-btn svelte-122ln5" aria-label="Dismiss settings icon">✕</button>`);
     var root$u = from_html(`<div role="none"><button type="button" class="cv-settings-main-btn svelte-122ln5"><span class="cv-gear svelte-122ln5"><!></span></button> <button type="button" class="cv-collapse-btn svelte-122ln5" aria-label="Collapse settings icon"> </button> <!></div>`);
 
-    const $$css$n = {
+    const $$css$o = {
     	hash: 'svelte-122ln5',
     	code: '.cv-settings-main-btn.svelte-122ln5 {appearance:none;-webkit-appearance:none;background:transparent;border:none;padding:0;margin:0;flex:1;height:100%;width:100%;display:flex;align-items:inherit;justify-content:inherit;color:inherit;cursor:inherit;border-radius:inherit;}.cv-settings-main-btn.svelte-122ln5:focus-visible {outline:2px solid currentColor;outline-offset:-2px;}.cv-gear.svelte-122ln5 {display:flex;align-items:center;justify-content:center;width:18px;height:18px;}.cv-gear.svelte-122ln5 svg {width:18px;height:18px;}.cv-gear.svelte-122ln5 svg path {fill:currentColor;}.cv-settings-icon.svelte-122ln5 {position:fixed;background:var(--cv-icon-bg, rgba(255, 255, 255, 0.92));color:var(--cv-icon-color, rgba(0, 0, 0, 0.9));opacity:var(--cv-icon-opacity, 0.6);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;cursor:grab; /* Default cursor */box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:2px solid rgba(0, 0, 0, 0.2);z-index:9998;transition:width 0.3s ease,\n      background 0.3s ease,\n      color 0.3s ease,\n      opacity 0.3s ease,\n      border-color 0.3s ease,\n      transform 0.4s ease; /* transform transition drives the peek slide animation */touch-action:none; /* Crucial for touch dragging */font-family:-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;box-sizing:border-box;user-select:none; /* Prevent text selection while dragging */}.cv-settings-icon.svelte-122ln5:active {cursor:grabbing;}.cv-settings-icon.svelte-122ln5:hover {background:var(--cv-icon-bg, rgba(255, 255, 255, 1));color:var(--cv-icon-color, rgba(0, 0, 0, 1));opacity:1;border-color:rgba(0, 0, 0, 0.3);}\n\n  /* Remove transform transition during drag so it tracks the pointer without lag */.cv-settings-icon.cv-is-dragging.svelte-122ln5 {transition:width 0.3s ease,\n      background 0.3s ease,\n      color 0.3s ease,\n      opacity 0.3s ease,\n      border-color 0.3s ease;}\n\n  /* When collapsed, dim the strip */.cv-settings-icon.cv-is-collapsed.svelte-122ln5 {opacity:0.5;}.cv-settings-icon.cv-is-collapsed.svelte-122ln5:hover {opacity:0.85;}.cv-collapse-btn.svelte-122ln5 {position:absolute;top:0;bottom:0;width:16px;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.12);border:none;padding:0;cursor:pointer;font-size:13px;line-height:1;color:inherit;opacity:0.5;transition:opacity 0.15s ease, background 0.15s ease;}.cv-collapse-btn[data-side=\'left\'].svelte-122ln5 {left:0; /* outer = screen-edge side for left icons */border-radius:0 6px 6px 0;}.cv-collapse-btn[data-side=\'right\'].svelte-122ln5 {right:0; /* outer = screen-edge side for right icons */border-radius:6px 0 0 6px;}.cv-collapse-btn.svelte-122ln5:hover {opacity:1;background:rgba(0, 0, 0, 0.22);}\n\n  /* Hide collapse tab when already collapsed */.cv-settings-icon.cv-is-collapsed.svelte-122ln5 .cv-collapse-btn:where(.svelte-122ln5) {display:none;}.cv-dismiss-btn.svelte-122ln5 {position:absolute;bottom:calc(100% + 4px);width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.15);border:none;border-radius:50%;padding:0;cursor:pointer;font-size:9px;line-height:1;color:inherit;opacity:0.5;transition:opacity 0.15s ease, background 0.15s ease;}.cv-dismiss-btn[data-side=\'left\'].svelte-122ln5 {left:0;}.cv-dismiss-btn[data-side=\'right\'].svelte-122ln5 {right:0;}.cv-dismiss-btn.svelte-122ln5:hover {opacity:1;background:rgba(0, 0, 0, 0.25);}\n\n\n  /* Top-right */.cv-settings-top-right.svelte-122ln5 {top:20px;right:0;border-radius:18px 0 0 18px;padding-left:6px;justify-content:flex-start;border-right:none;}\n\n  /* Top-left */.cv-settings-top-left.svelte-122ln5 {top:20px;left:0;border-radius:0 18px 18px 0;padding-right:6px;justify-content:flex-end;border-left:none;}\n\n  /* Bottom-right */.cv-settings-bottom-right.svelte-122ln5 {bottom:20px;right:0;border-radius:18px 0 0 18px;padding-left:6px;justify-content:flex-start;border-right:none;}\n\n  /* Bottom-left */.cv-settings-bottom-left.svelte-122ln5 {bottom:20px;left:0;border-radius:0 18px 18px 0;padding-right:6px;justify-content:flex-end;border-left:none;}\n\n  /* Middle-left */.cv-settings-middle-left.svelte-122ln5 {top:50%;left:0;\n    /* transform handled by inline style now */border-radius:0 18px 18px 0;padding-right:6px;justify-content:flex-end;border-left:none;}\n\n  /* Middle-right */.cv-settings-middle-right.svelte-122ln5 {top:50%;right:0;\n    /* transform handled by inline style now */border-radius:18px 0 0 18px;padding-left:6px;justify-content:flex-start;border-right:none;}.cv-settings-top-right.svelte-122ln5,\n  .cv-settings-middle-right.svelte-122ln5,\n  .cv-settings-bottom-right.svelte-122ln5,\n  .cv-settings-top-left.svelte-122ln5,\n  .cv-settings-middle-left.svelte-122ln5,\n  .cv-settings-bottom-left.svelte-122ln5 {height:36px;width:36px;}.cv-settings-middle-right.svelte-122ln5:hover,\n  .cv-settings-top-right.svelte-122ln5:hover,\n  .cv-settings-bottom-right.svelte-122ln5:hover,\n  .cv-settings-top-left.svelte-122ln5:hover,\n  .cv-settings-middle-left.svelte-122ln5:hover,\n  .cv-settings-bottom-left.svelte-122ln5:hover {width:55px;}.cv-pulse {\n    animation: svelte-122ln5-pulse 2s infinite;}\n\n  @keyframes svelte-122ln5-pulse {\n    0% {\n      box-shadow:\n        0 4px 12px rgba(0, 0, 0, 0.15),\n        0 0 0 0 rgba(62, 132, 244, 0.7);\n    }\n    70% {\n      box-shadow:\n        0 4px 12px rgba(0, 0, 0, 0.15),\n        0 0 0 10px rgba(62, 132, 244, 0);\n    }\n    100% {\n      box-shadow:\n        0 4px 12px rgba(0, 0, 0, 0.15),\n        0 0 0 0 rgba(62, 132, 244, 0);\n    }\n  }\n\n  @media (max-width: 768px) {.cv-settings-top-right.svelte-122ln5,\n    .cv-settings-top-left.svelte-122ln5 {top:10px;}.cv-settings-bottom-right.svelte-122ln5,\n    .cv-settings-bottom-left.svelte-122ln5 {bottom:10px;}.cv-settings-top-right.svelte-122ln5,\n    .cv-settings-bottom-right.svelte-122ln5,\n    .cv-settings-middle-right.svelte-122ln5 {right:0;}.cv-settings-top-left.svelte-122ln5,\n    .cv-settings-bottom-left.svelte-122ln5,\n    .cv-settings-middle-left.svelte-122ln5 {left:0;}.cv-settings-icon.svelte-122ln5 {width:60px;height:32px;}.cv-settings-icon.svelte-122ln5:hover {width:75px;}\n  }\n\n  @media print {.cv-settings-icon.svelte-122ln5 {display:none !important;}\n  }'
     };
 
     function SettingsIcon($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$n);
+    	append_styles$1($$anchor, $$css$o);
 
     	/* eslint-disable @typescript-eslint/no-explicit-any */
     	const iconSettingsStore = getContext(ICON_SETTINGS_CTX);
@@ -10358,7 +10371,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var button_2 = root_1$f();
+    			var button_2 = root_1$g();
 
     			button_2.__click = (e) => {
     				e.stopPropagation();
@@ -10677,7 +10690,12 @@
     const PARAM_HIDE_TOGGLE = 't-hide';
     const PARAM_TABS = 'tabs';
     const PARAM_PH = 'ph';
+    const PARAM_CV_SHOW = 'cv-show';
+    const PARAM_CV_HIDE = 'cv-hide';
+    const PARAM_CV_HIGHLIGHT = 'cv-highlight';
+    /** Parameters owned by URLStateManager */
     const MANAGED_PARAMS = [PARAM_SHOW_TOGGLE, PARAM_PEEK_TOGGLE, PARAM_HIDE_TOGGLE, PARAM_TABS, PARAM_PH];
+
     /**
      * Encodes a list of IDs into a comma-separated query-safe string.
      *
@@ -10752,12 +10770,12 @@
         }
         return result;
     }
-    // --- URL Parsing ---
+
     /**
      * Parses toggle visibility state from the current URL search string.
      * Returns partial state containing only the toggle fields that are present.
      */
-    function parseTogglesFromSearch(search) {
+    function parseTogglesFromURL(search) {
         const partial = {};
         const showIds = splitAndDecode(search, PARAM_SHOW_TOGGLE);
         if (showIds.length > 0)
@@ -10774,7 +10792,7 @@
      * Parses tab group selections from the current URL search string.
      * Returns partial state containing the `tabs` record, or empty object if absent.
      */
-    function parseTabsFromSearch(search) {
+    function parseTabsFromURL(search) {
         const tabs = decodePairs(search, PARAM_TABS);
         return Object.keys(tabs).length > 0 ? { tabs } : {};
     }
@@ -10782,11 +10800,169 @@
      * Parses placeholder values from the current URL search string.
      * Returns partial state containing the `placeholders` record, or empty object if absent.
      */
-    function parsePlaceholdersFromSearch(search) {
+    function parsePlaceholdersFromURL(search) {
         const placeholders = decodePairs(search, PARAM_PH);
         return Object.keys(placeholders).length > 0 ? { placeholders } : {};
     }
-    // --- URL Generation ---
+
+    /**
+     * Strips placeholder entries that should not appear in shareable URLs:
+     * - Tab-group-derived placeholders (source: 'tabgroup') — implied by ?tabs=
+     * - Site-managed placeholders (siteManaged: true) — site-controlled, not shareable
+     */
+    function stripNonShareablePlaceholders(placeholders, config) {
+        const shareable = {};
+        for (const [key, value] of Object.entries(placeholders)) {
+            const definition = placeholderRegistryStore.get(key) || config.placeholders?.find(p => p.name === key);
+            if (!definition)
+                continue; // skip unknown keys (injection prevention)
+            // Note: PlaceholderDefinition from registry has 'source', but config doesn't.
+            // That's fine as 'tabgroup' placeholders are mostly a runtime artifact.
+            if ('source' in definition && definition.source === 'tabgroup')
+                continue; // implied by ?tabs=
+            if ('siteManaged' in definition && definition.siteManaged)
+                continue; // site-managed, not shareable
+            shareable[key] = value;
+        }
+        return shareable;
+    }
+    /**
+     * Filters the current toggle state (shown, peeked) and derives the explicit
+     * hidden list for the shareable URL.
+     */
+    function getShareableToggles(currentState, pageTogglesSet, config) {
+        const currentShown = currentState.shownToggles ?? [];
+        const currentPeek = currentState.peekToggles ?? [];
+        const shouldInclude = (id) => {
+            const toggleConfig = config.toggles?.find(t => t.toggleId === id);
+            // Case 1: Not found in configuration
+            if (!toggleConfig) {
+                return pageTogglesSet.has(id);
+            }
+            // Site-managed toggles are never included in shareable URLs
+            if (toggleConfig.siteManaged)
+                return false;
+            // Case 2: Configured as Global
+            if (!toggleConfig.isLocal) {
+                return true;
+            }
+            // Case 3: Configured as Local
+            return pageTogglesSet.has(id);
+        };
+        const shareableShown = currentShown.filter(shouldInclude);
+        const shareablePeek = currentPeek.filter(shouldInclude);
+        const shownSet = new Set(shareableShown);
+        const peekSet = new Set(shareablePeek);
+        const absoluteHide = [];
+        const relevantToggles = new Set(pageTogglesSet);
+        for (const t of (config.toggles ?? [])) {
+            if (!t.isLocal && !t.siteManaged)
+                relevantToggles.add(t.toggleId);
+        }
+        // Build a set of siteManaged toggle IDs to exclude from absoluteHide
+        const siteManagedToggleIds = new Set((config.toggles ?? []).filter(t => t.siteManaged).map(t => t.toggleId));
+        for (const id of relevantToggles) {
+            if (!shownSet.has(id) && !peekSet.has(id) && !siteManagedToggleIds.has(id)) {
+                absoluteHide.push(id);
+            }
+        }
+        const result = {};
+        if (shareableShown.length > 0)
+            result.shownToggles = shareableShown;
+        if (shareablePeek.length > 0)
+            result.peekToggles = shareablePeek;
+        if (absoluteHide.length > 0)
+            result.hiddenToggles = absoluteHide;
+        return result;
+    }
+    /**
+     * Filters the active tab selections for the shareable URL.
+     */
+    function getShareableTabs(currentState, pageTabGroupsSet, config) {
+        if (!currentState.tabs)
+            return {};
+        const shareableTabs = {};
+        for (const [groupId, tabId] of Object.entries(currentState.tabs)) {
+            const groupConfig = config.tabGroups?.find(g => g.groupId === groupId);
+            let shouldInclude = false;
+            if (!groupConfig) {
+                // Unknown group: Only include if explicitly detected on page to prevent injection
+                shouldInclude = pageTabGroupsSet.has(groupId);
+            }
+            else if (!groupConfig.isLocal) {
+                // Global group: Always include
+                shouldInclude = true;
+            }
+            else {
+                // Local group: Only include if detected on page
+                shouldInclude = pageTabGroupsSet.has(groupId);
+            }
+            if (shouldInclude) {
+                shareableTabs[groupId] = tabId;
+            }
+        }
+        return Object.keys(shareableTabs).length > 0 ? { tabs: shareableTabs } : {};
+    }
+    /**
+     * Filters the custom placeholder values for the shareable URL.
+     */
+    function getShareablePlaceholders(currentState, pagePlaceholdersSet, config) {
+        if (!currentState.placeholders)
+            return {};
+        const strippedPlaceholders = stripNonShareablePlaceholders(currentState.placeholders, config);
+        const shareablePlaceholders = {};
+        for (const [key, value] of Object.entries(strippedPlaceholders)) {
+            const definition = placeholderRegistryStore.get(key) || config.placeholders?.find(p => p.name === key);
+            let shouldInclude = false;
+            if (!definition) {
+                // Note: definition is guaranteed to exist here due to stripNonShareablePlaceholders,
+                // but we handle it explicitly for clarity and future-proofing.
+                shouldInclude = pagePlaceholdersSet.has(key);
+            }
+            else if (!definition.isLocal) {
+                // Global placeholder: Always include
+                shouldInclude = true;
+            }
+            else {
+                // Local placeholder: Only include if detected on page
+                shouldInclude = pagePlaceholdersSet.has(key);
+            }
+            if (shouldInclude) {
+                shareablePlaceholders[key] = value;
+            }
+        }
+        return Object.keys(shareablePlaceholders).length > 0 ? { placeholders: shareablePlaceholders } : {};
+    }
+    /**
+     * Computes a shareable state object from the current state.
+     *
+     * Toggles, tabs, and placeholders marked as `isLocal: true` are only included
+     * if they are present on the current page.
+     *
+     * Global elements (not `isLocal`) are always included regardless of whether
+     * they are detected on the current page.
+     *
+     * Every toggle known to the page (or global) is explicitly encoded as shown,
+     * peeked, or hidden, so the recipient's view exactly matches the sender's
+     * regardless of their local settings.
+     *
+     * Tab-group-derived placeholders are omitted — the `?tabs=` param is their source of truth.
+     *
+     * @param currentState The current application state.
+     * @param elementsOnCurrentPage The active elements detected on the current page.
+     * @param config The application configuration.
+     */
+    function computeShareableSettingState(currentState, elementsOnCurrentPage, config) {
+        const pageTogglesSet = new Set(elementsOnCurrentPage.toggles);
+        const pageTabGroupsSet = new Set(elementsOnCurrentPage.tabGroups);
+        const pagePlaceholdersSet = new Set(elementsOnCurrentPage.placeholders);
+        return {
+            ...getShareableToggles(currentState, pageTogglesSet, config),
+            ...getShareableTabs(currentState, pageTabGroupsSet, config),
+            ...getShareablePlaceholders(currentState, pagePlaceholdersSet, config),
+        };
+    }
+
     /**
      * Builds the query string fragment for the managed URL parameters from a state object.
      *
@@ -10797,7 +10973,7 @@
      * By building the string directly, each value is encoded exactly once,
      * and structural separators (`,` `:`) remain as literal characters in the URL.
      */
-    function buildManagedSearch(state) {
+    function generateManagedQuery(state) {
         const parts = [];
         if (state.shownToggles && state.shownToggles.length > 0) {
             parts.push(`${PARAM_SHOW_TOGGLE}=${encodeList(state.shownToggles)}`);
@@ -10819,100 +10995,17 @@
     /**
      * Builds a full absolute URL string from the base URL and managed params.
      */
-    function buildFullUrl(url, managedSearch) {
+    function buildFullUrl(url, managedQuery) {
         const preservedSearch = url.searchParams.toString();
-        const search = [preservedSearch, managedSearch].filter(Boolean).join('&');
+        const search = [preservedSearch, managedQuery].filter(Boolean).join('&');
         return url.origin + url.pathname + (search ? `?${search}` : '') + (url.hash || '');
     }
-    /**
-     * Strips placeholder entries that should not appear in shareable URLs:
-     * - Tab-group-derived placeholders (source: 'tabgroup') — implied by ?tabs=
-     * - Adaptation-only placeholders (adaptationPlaceholder: true) — author-controlled, not shareable
-     */
-    function stripNonShareablePlaceholders(placeholders) {
-        const shareable = {};
-        for (const [key, value] of Object.entries(placeholders)) {
-            const definition = placeholderRegistryStore.get(key);
-            if (definition?.source === 'tabgroup')
-                continue; // implied by ?tabs=
-            if (definition?.adaptationPlaceholder)
-                continue; // author-only, not shareable
-            shareable[key] = value;
-        }
-        return shareable;
-    }
-    /**
-     * Computes a shareable state object from the current state.
-     *
-     * Every toggle known to the page is explicitly encoded as shown, peeked, or hidden,
-     * so the recipient's view exactly matches the sender's regardless of their local settings.
-     *
-     * Toggles, tabs, and placeholders NOT present on the current page are omitted,
-     * preventing cross-page state pollution.
-     *
-     * Tab-group-derived placeholders are omitted — the `?tabs=` param is their source of truth.
-     *
-     * @param currentState The current application state.
-     * @param pageElements The active elements detected on the current page.
-     */
-    function computeShareableState(currentState, pageElements) {
-        const currentShown = currentState.shownToggles ?? [];
-        const currentPeek = currentState.peekToggles ?? [];
-        const pageTogglesSet = new Set(pageElements.toggles);
-        const pageTabGroupsSet = new Set(pageElements.tabGroups);
-        const pagePlaceholdersSet = new Set(pageElements.placeholders);
-        // 1. Filter toggles to only those present on the page
-        const pageShown = currentShown.filter((id) => pageTogglesSet.has(id));
-        const pagePeek = currentPeek.filter((id) => pageTogglesSet.has(id));
-        const shownSet = new Set(pageShown);
-        const peekSet = new Set(pagePeek);
-        // Every toggle on the page that isn't shown or peeked must be explicitly hidden.
-        const absoluteHide = [];
-        for (const id of pageTogglesSet) {
-            if (!shownSet.has(id) && !peekSet.has(id)) {
-                absoluteHide.push(id);
-            }
-        }
-        const shareable = {};
-        if (pageShown.length > 0)
-            shareable.shownToggles = pageShown;
-        if (pagePeek.length > 0)
-            shareable.peekToggles = pagePeek;
-        if (absoluteHide.length > 0)
-            shareable.hiddenToggles = absoluteHide;
-        // 2. Filter tabs to only those present on the page
-        if (currentState.tabs) {
-            const pageTabs = {};
-            for (const [groupId, tabId] of Object.entries(currentState.tabs)) {
-                if (pageTabGroupsSet.has(groupId)) {
-                    pageTabs[groupId] = tabId;
-                }
-            }
-            if (Object.keys(pageTabs).length > 0) {
-                shareable.tabs = pageTabs;
-            }
-        }
-        // 3. Filter placeholders to only those present on the page
-        if (currentState.placeholders) {
-            const shareablePlaceholders = stripNonShareablePlaceholders(currentState.placeholders);
-            const pagePlaceholders = {};
-            for (const [key, value] of Object.entries(shareablePlaceholders)) {
-                if (pagePlaceholdersSet.has(key)) {
-                    pagePlaceholders[key] = value;
-                }
-            }
-            if (Object.keys(pagePlaceholders).length > 0) {
-                shareable.placeholders = pagePlaceholders;
-            }
-        }
-        return shareable;
-    }
-    // --- URL State Manager ---
+
     /**
      * URL State Manager for CustardUI.
      * Handles encoding/decoding of view states as human-readable URL parameters.
      *
-     * URL Schema:
+     * URL Schema (defined in url-constants.ts):
      *   ?t-show=A,B        — toggle IDs to explicitly show
      *   ?t-peek=C          — toggle IDs to explicitly peek
      *   ?t-hide=D          — toggle IDs to explicitly hide
@@ -10944,37 +11037,29 @@
                 return null;
             const search = window.location.search;
             return {
-                ...parseTogglesFromSearch(search),
-                ...parseTabsFromSearch(search),
-                ...parsePlaceholdersFromSearch(search),
+                ...parseTogglesFromURL(search),
+                ...parseTabsFromURL(search),
+                ...parsePlaceholdersFromURL(search),
             };
         }
         /**
-         * Generates a shareable URL that encodes the full current state.
-         *
-         * Encodes every toggle on the page explicitly (shown, peeked, or hidden)
-         * so the recipient sees the exact same view regardless of their local settings.
-         *
-         * Tab-group-derived placeholders are omitted from the URL — they are implied
-         * by the `?tabs=` parameter and will be re-derived by the recipient's store.
-         *
-         * Toggles, tabs, and placeholders NOT present on the current page are omitted,
-         * preventing cross-page state pollution.
+         * Generates a shareable URL that encodes the current state based on Config and State.
          *
          * @param currentState The full application state to encode.
-         * @param pageElements The active elements detected on the current page.
+         * @param config The application configuration.
+         * @param elementsOnCurrentPage The active elements detected on the current page.
          */
-        static generateShareableURL(currentState, pageElements = { toggles: [], tabGroups: [], placeholders: [] }) {
+        static generateShareableURL(currentState, config, elementsOnCurrentPage = { toggles: [], tabGroups: [], placeholders: [] }) {
             const url = new URL(window.location.href);
             for (const param of MANAGED_PARAMS) {
                 url.searchParams.delete(param);
             }
-            let managedSearch = '';
+            let managedQuery = '';
             if (currentState) {
-                const shareable = computeShareableState(currentState, pageElements);
-                managedSearch = buildManagedSearch(shareable);
+                const shareable = computeShareableSettingState(currentState, elementsOnCurrentPage, config);
+                managedQuery = generateManagedQuery(shareable);
             }
-            return buildFullUrl(url, managedSearch);
+            return buildFullUrl(url, managedQuery);
         }
         /**
          * Clears all managed parameters from the current browser URL.
@@ -11176,19 +11261,19 @@
     	append($$anchor, svg);
     }
 
-    var root_1$e = from_html(`<p class="description svelte-gwkhja"> </p>`);
+    var root_1$f = from_html(`<p class="description svelte-gwkhja"> </p>`);
     var root_3$7 = from_html(`<span class="segment-icon svelte-gwkhja"><!></span>`);
     var root_2$a = from_html(`<button type="button"><!> <span class="segment-label svelte-gwkhja"> </span></button>`);
     var root$k = from_html(`<div class="card svelte-gwkhja"><div class="content svelte-gwkhja"><div><p class="title svelte-gwkhja"> </p> <!></div> <div class="segmented svelte-gwkhja" role="group" aria-label="Visibility"></div></div></div>`);
 
-    const $$css$m = {
+    const $$css$n = {
     	hash: 'svelte-gwkhja',
     	code: '.card.svelte-gwkhja {background:var(--cv-bg);border:1px solid var(--cv-border);border-radius:var(--cv-card-radius, 0.5rem);transition:background 0.15s ease;}.card.svelte-gwkhja:hover {background:var(--cv-bg-hover);}.content.svelte-gwkhja {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;}.title.svelte-gwkhja {font-weight:500;font-size:0.875rem;color:var(--cv-text);margin:0;}.description.svelte-gwkhja {font-size:0.75rem;color:var(--cv-text-secondary);margin:0.125rem 0 0 0;}.segmented.svelte-gwkhja {display:flex;border:1px solid var(--cv-border);border-radius:0.375rem;overflow:hidden;flex-shrink:0;}.segment-btn.svelte-gwkhja {display:flex;align-items:center;gap:0.25rem;background:transparent;border:none;border-left:1px solid var(--cv-border);padding:0.3rem 0.6rem;font-size:0.8rem;font-weight:500;color:var(--cv-text-secondary);cursor:pointer;transition:background 0.15s ease, color 0.15s ease;font-family:inherit;line-height:1;}.segment-icon.svelte-gwkhja {display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;}.segment-icon.svelte-gwkhja svg {width:100%;height:100%;}.segment-label.svelte-gwkhja {font-size:0.75rem;}.segment-btn.svelte-gwkhja:first-child {border-left:none;}.segment-btn.svelte-gwkhja:hover:not(.active) {background:var(--cv-bg-hover);color:var(--cv-text);}.segment-btn.active.svelte-gwkhja {background:var(--cv-primary);color:white;box-shadow:0 1px 3px rgba(0, 0, 0, 0.15);}'
     };
 
     function ToggleItem($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$m);
+    	append_styles$1($$anchor, $$css$n);
 
     	let value = prop($$props, 'value', 15, 'show'),
     		onchange = prop($$props, 'onchange', 3, () => {});
@@ -11206,7 +11291,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var p_1 = root_1$e();
+    			var p_1 = root_1$f();
     			var text_1 = child(p_1, true);
 
     			reset(p_1);
@@ -11284,18 +11369,18 @@
 
     delegate(['click']);
 
-    var root_1$d = from_html(`<p class="description svelte-uub3h8"> </p>`);
+    var root_1$e = from_html(`<p class="description svelte-uub3h8"> </p>`);
     var root_2$9 = from_html(`<option> </option>`);
     var root$j = from_html(`<div class="root svelte-uub3h8"><div class="header svelte-uub3h8"><label class="label svelte-uub3h8"> </label> <!></div> <select class="select svelte-uub3h8"></select></div>`);
 
-    const $$css$l = {
+    const $$css$m = {
     	hash: 'svelte-uub3h8',
     	code: '.root.svelte-uub3h8 {display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem;background:var(--cv-bg);border:1px solid var(--cv-border);border-radius:var(--cv-card-radius, 0.5rem);transition:background 0.15s ease;}.root.svelte-uub3h8:hover {background:var(--cv-bg-hover);}\n\n  /* Remove special handling for last child since they are now separate cards */.root.svelte-uub3h8:last-child {border-bottom:1px solid var(--cv-border);}.header.svelte-uub3h8 {display:flex;flex-direction:column;gap:0.25rem;}.label.svelte-uub3h8 {font-size:0.875rem;color:var(--cv-text);margin:0;line-height:1.4;font-weight:500;display:block;cursor:pointer;}.description.svelte-uub3h8 {font-size:0.75rem;color:var(--cv-text-secondary);margin:0;line-height:1.4;}.select.svelte-uub3h8 {width:100%;border-radius:0.5rem;background:var(--cv-input-bg);border:1px solid var(--cv-input-border);color:var(--cv-text);padding:0.5rem 0.75rem;font-size:0.875rem;cursor:pointer;transition:all 0.15s ease;font-family:inherit;}.select.svelte-uub3h8:hover {border-color:var(--cv-text-secondary);}.select.svelte-uub3h8:focus {outline:none;border-color:var(--cv-primary);box-shadow:0 0 0 2px var(--cv-focus-ring);}'
     };
 
     function TabGroupItem($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$l);
+    	append_styles$1($$anchor, $$css$m);
 
     	let activeTabId = prop($$props, 'activeTabId', 15, ''),
     		onchange = prop($$props, 'onchange', 3, () => {});
@@ -11318,7 +11403,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var p = root_1$d();
+    			var p = root_1$e();
     			var text_1 = child(p, true);
 
     			reset(p);
@@ -11384,14 +11469,14 @@
 
     var root$i = from_html(`<div class="placeholder-item svelte-1vp05mb"><label class="placeholder-label svelte-1vp05mb"> </label> <input class="placeholder-input svelte-1vp05mb" type="text"/></div>`);
 
-    const $$css$k = {
+    const $$css$l = {
     	hash: 'svelte-1vp05mb',
     	code: '.placeholder-item.svelte-1vp05mb {display:flex;flex-direction:column;gap:0.25rem;}.placeholder-label.svelte-1vp05mb {font-size:0.85rem;font-weight:500;color:var(--cv-text);}.placeholder-input.svelte-1vp05mb {padding:0.5rem 0.75rem;border:1px solid var(--cv-input-border);border-radius:var(--cv-card-radius, 0.5rem);font-size:0.9rem;transition:border-color 0.2s;background:var(--cv-input-bg);color:var(--cv-text);}.placeholder-input.svelte-1vp05mb:focus {outline:none;border-color:var(--cv-primary);box-shadow:0 0 0 2px var(--cv-focus-ring);}'
     };
 
     function PlaceholderItem($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$k);
+    	append_styles$1($$anchor, $$css$l);
 
     	let value = prop($$props, 'value', 15, ''),
     		onchange = prop($$props, 'onchange', 3, () => {});
@@ -11471,7 +11556,7 @@
         }
     }
 
-    var root_1$c = from_html(`<button type="button">Customize</button>`);
+    var root_1$d = from_html(`<button type="button">Customize</button>`);
     var root_3$6 = from_html(`<p class="description svelte-16uy9h6"> </p>`);
     var root_5$2 = from_html(`<div class="section svelte-16uy9h6"><div class="section-heading svelte-16uy9h6">Toggles</div> <div class="toggles-container svelte-16uy9h6"></div></div>`);
     var root_7$2 = from_html(`<div class="section svelte-16uy9h6"><div class="section-heading svelte-16uy9h6">Placeholders</div> <div class="placeholders-container svelte-16uy9h6"></div></div>`);
@@ -11487,14 +11572,14 @@
     var root_22 = from_html(`<div></div>`);
     var root$h = from_html(`<div class="modal-overlay svelte-16uy9h6" role="presentation"><div class="modal-box cv-custom-state-modal svelte-16uy9h6" role="dialog" aria-modal="true"><header class="header svelte-16uy9h6"><div class="header-content svelte-16uy9h6"><div class="modal-icon svelte-16uy9h6"><!></div> <div class="title svelte-16uy9h6"> </div></div> <button type="button" class="close-btn svelte-16uy9h6" aria-label="Close modal"><!></button></header> <main class="main svelte-16uy9h6"><div class="tabs svelte-16uy9h6"><!> <button type="button">Share</button></div> <!></main> <footer class="footer svelte-16uy9h6"><!> <div class="footer-attribution svelte-16uy9h6"><span class="footer-tagline svelte-16uy9h6">Browser-side page customisations provided by</span> <a href="https://custardui.js.org" target="_blank" rel="noopener noreferrer" class="footer-link svelte-16uy9h6">custardui.js.org</a></div> <button type="button" class="done-btn svelte-16uy9h6">Done</button></footer></div></div>`);
 
-    const $$css$j = {
+    const $$css$k = {
     	hash: 'svelte-16uy9h6',
     	code: '\n  /* Modal Overlay & Modal Frame */.modal-overlay.svelte-16uy9h6 {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:10002;}.modal-box.svelte-16uy9h6 {background:var(--cv-bg);border-radius:var(--cv-modal-radius, 0.75rem);box-shadow:0 25px 50px -12px var(--cv-shadow);max-width:32rem;width:90vw;max-height:80vh;display:flex;flex-direction:column;}.header.svelte-16uy9h6 {display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;border-bottom:1px solid var(--cv-border);}.header-content.svelte-16uy9h6 {display:flex;align-items:center;gap:0.75rem;}.modal-icon.svelte-16uy9h6 {position:relative;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;color:var(--cv-text);}.modal-icon.svelte-16uy9h6 svg {fill:currentColor;}.title.svelte-16uy9h6 {font-size:1.125rem;font-weight:bold;color:var(--cv-text);margin:0;}.close-btn.svelte-16uy9h6 {width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:transparent;border:none;color:var(--cv-text-secondary);cursor:pointer;transition:all 0.2s ease;}.close-btn.svelte-16uy9h6:hover {background:rgba(62, 132, 244, 0.1);color:var(--cv-primary);}.main.svelte-16uy9h6 {padding:1rem;flex:1;display:flex;flex-direction:column;overflow-y:auto;max-height:calc(80vh - 8rem);min-height:var(--cv-modal-min-height, 20rem);}.description.svelte-16uy9h6 {font-size:0.875rem;color:var(--cv-text);margin:0 0 1rem 0;line-height:1.4;}\n\n  /* Tabs */.tabs.svelte-16uy9h6 {display:flex;margin-bottom:1rem;border-bottom:2px solid var(--cv-border);}.tab.svelte-16uy9h6 {background:transparent;border:none;padding:0.5rem 1rem;font-size:0.9rem;font-weight:600;color:var(--cv-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}.tab.active.svelte-16uy9h6 {color:var(--cv-primary);border-bottom-color:var(--cv-primary);}.tab-content.svelte-16uy9h6 {display:none;}.tab-content.active.svelte-16uy9h6 {display:block;}\n\n  /* Section Styling */.section.svelte-16uy9h6 {display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1.5rem;}.section-heading.svelte-16uy9h6 {font-size:0.7rem;font-weight:600;color:var(--cv-text-secondary);text-transform:var(--cv-section-label-transform, uppercase);letter-spacing:0.08em;margin:0;}.toggles-container.svelte-16uy9h6 {display:flex;flex-direction:column;gap:0.5rem;overflow:hidden;}\n\n  /* Tab Groups Section specific */.tabgroups-container.svelte-16uy9h6 {border-radius:0.5rem;}\n\n  /* Nav Toggle Card */.tabgroup-card.svelte-16uy9h6 {background:var(--cv-bg);border-bottom:1px solid var(--cv-border);}.tabgroup-card.header-card.svelte-16uy9h6 {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border:1px solid var(--cv-border);border-radius:0.5rem;margin-bottom:0.75rem;}.tabgroup-row.svelte-16uy9h6 {display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;}.logo-box.svelte-16uy9h6 {width:3rem;height:3rem;background:var(--cv-modal-icon-bg);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.nav-icon.svelte-16uy9h6 {width:2rem;height:2rem;color:var(--cv-text);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s ease;}.tabgroup-info.svelte-16uy9h6 {flex:1;display:flex;flex-direction:column;gap:0.25rem;}.tabgroup-title.svelte-16uy9h6 {font-weight:500;font-size:0.875rem;color:var(--cv-text);margin:0 0 0 0;}.tabgroup-description.svelte-16uy9h6 {font-size:0.75rem;color:var(--cv-text-secondary);margin:0;line-height:1.3;}\n\n  /* Toggle Switch */.toggle-switch.svelte-16uy9h6 {position:relative;display:inline-flex;align-items:center;width:44px;height:24px;background:var(--cv-switch-bg);border-radius:9999px;padding:2px;box-sizing:border-box;cursor:pointer;transition:background-color 0.2s ease;border:none;}.toggle-switch.svelte-16uy9h6 input:where(.svelte-16uy9h6) {display:none;}.toggle-switch.svelte-16uy9h6 .switch-bg:where(.svelte-16uy9h6) {position:absolute;inset:0;border-radius:9999px;background:var(--cv-switch-bg);transition:background-color 0.2s ease;pointer-events:none;}.toggle-switch.svelte-16uy9h6 .switch-knob:where(.svelte-16uy9h6) {position:relative;width:20px;height:20px;background:var(--cv-switch-knob);border-radius:50%;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);transition:transform 0.2s ease;transform:translateX(0);}.toggle-switch.svelte-16uy9h6 input:where(.svelte-16uy9h6):checked ~ .switch-knob:where(.svelte-16uy9h6) {transform:translateX(20px);}.toggle-switch.svelte-16uy9h6 input:where(.svelte-16uy9h6):checked ~ .switch-bg:where(.svelte-16uy9h6) {background:var(--cv-primary);}\n\n  /* Tab Groups List */.tab-groups-list.svelte-16uy9h6 {display:flex;flex-direction:column;gap:0.75rem;}\n\n  /* Footer */.footer.svelte-16uy9h6 {padding:0.75rem 1rem;border-top:1px solid var(--cv-border);display:flex;align-items:center;justify-content:space-between;background:var(--cv-bg);border-bottom-left-radius:var(--cv-modal-radius, 0.75rem);border-bottom-right-radius:var(--cv-modal-radius, 0.75rem);}.footer-attribution.svelte-16uy9h6 {display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.1rem;opacity:0.5;transition:opacity 0.15s ease;}.footer-attribution.svelte-16uy9h6:hover {opacity:1;}.footer-tagline.svelte-16uy9h6 {font-size:0.6rem;color:var(--cv-text-secondary);letter-spacing:0.04em;}.footer-link.svelte-16uy9h6 {color:var(--cv-text-secondary);text-decoration:none;font-size:0.68rem;font-weight:600;letter-spacing:0.08em;transition:color 0.15s ease;}.footer-link.svelte-16uy9h6:hover {color:var(--cv-primary);}.reset-btn.svelte-16uy9h6 {display:flex;align-items:center;gap:0.4rem;background:transparent;border:none;font-size:0.875rem;font-weight:500;color:var(--cv-text-secondary);cursor:pointer;padding:0.4rem 0.5rem;border-radius:0.5rem;transition:all 0.2s ease;}.reset-btn.svelte-16uy9h6:hover {background:var(--cv-danger-bg);color:var(--cv-danger);}.done-btn.svelte-16uy9h6 {background:var(--cv-primary);color:white;border:none;padding:0.5rem 1.1rem;border-radius:0.5rem;font-weight:600;font-size:0.875rem;cursor:pointer;box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);transition:background-color 0.15s ease, box-shadow 0.15s ease;}.done-btn.svelte-16uy9h6:hover {background:var(--cv-primary-hover);box-shadow:0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);}\n\n  /* Share Tab Styles */.share-content.svelte-16uy9h6 {display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;padding:1rem 0;}.share-instruction.svelte-16uy9h6 {font-size:0.95rem;color:var(--cv-text-secondary);margin-bottom:0.5rem;}.share-action-btn.svelte-16uy9h6 {display:flex;align-items:center;justify-content:center;gap:0.75rem;width:100%;max-width:320px;padding:0.75rem 1rem;border-radius:0.5rem;font-weight:500;font-size:0.95rem;cursor:pointer;transition:all 0.2s ease;border:1px solid var(--cv-border);background:var(--cv-bg);color:var(--cv-text);}.share-action-btn.svelte-16uy9h6:hover {border-color:var(--cv-primary);color:var(--cv-primary);background:var(--cv-bg-hover);}.share-action-btn.primary.svelte-16uy9h6 {background:var(--cv-primary);border-color:var(--cv-primary);color:white;}.share-action-btn.primary.svelte-16uy9h6:hover {background:var(--cv-primary-hover);border-color:var(--cv-primary-hover);}.btn-icon.svelte-16uy9h6 {display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;}\n\n  /* Placeholder Inputs */.placeholders-container.svelte-16uy9h6 {display:flex;flex-direction:column;gap:0.75rem;}'
     };
 
     function Modal($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$j);
+    	append_styles$1($$anchor, $$css$k);
 
     	/* eslint-disable @typescript-eslint/no-explicit-any */
     	let onclose = prop($$props, 'onclose', 3, () => {}),
@@ -11593,7 +11678,7 @@
     	}
 
     	async function copyShareUrl() {
-    		const url = URLStateManager.generateShareableURL(activeStateStore.state, {
+    		const url = URLStateManager.generateShareableURL(activeStateStore.state, activeStateStore.config, {
     			toggles: elementStore.detectedToggles,
     			tabGroups: elementStore.detectedTabGroups,
     			placeholders: elementStore.detectedPlaceholders
@@ -11663,7 +11748,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var button_1 = root_1$c();
+    			var button_1 = root_1$d();
 
     			button_1.__click = () => set(activeTab, 'customize');
     			template_effect(() => set_class(button_1, 1, `tab ${get(activeTab) === 'customize' ? 'active' : ''}`, 'svelte-16uy9h6'));
@@ -12128,33 +12213,45 @@
         return getStableTextContent(el).trim().replace(/\s+/g, ' ');
     }
 
+    /**
+     * Walks the ancestor chain of `el` to find the first element with a non-empty
+     * `id` attribute. Returns both the id string and the ancestor element so the
+     * caller can use the element itself as a query scope.
+     * Returns `ancestorEl: null` when no id-bearing ancestor exists.
+     */
+    function findNearestIdAncestor(el) {
+        let node = el.parentElement;
+        while (node) {
+            if (node.id)
+                return { parentId: node.id, ancestorEl: node };
+            node = node.parentElement;
+        }
+        return { parentId: undefined, ancestorEl: null };
+    }
     /**
      * Creates an AnchorDescriptor for a given DOM element.
      */
     function createDescriptor(el) {
         const tag = el.tagName;
         const normalizedText = getStableNormalizedText(el);
-        // Find nearest parent with an ID
-        let parentId;
-        let parent = el.parentElement;
-        while (parent) {
-            if (parent.id) {
-                parentId = parent.id;
-                break;
-            }
-            parent = parent.parentElement;
-        }
-        // Calculate index relative to the container
-        const container = parent || document.body;
+        const { parentId, ancestorEl: idAncestor } = findNearestIdAncestor(el);
+        const container = idAncestor ?? document.body;
         const siblings = Array.from(container.querySelectorAll(tag));
-        const index = siblings.indexOf(el);
+        const rawIndex = siblings.indexOf(el);
+        if (rawIndex === -1) {
+            console.error('[CustardUI] createDescriptor: element not found in container, ' +
+                'element may be detached from the DOM. Please open an issue.', el);
+        }
+        const index = rawIndex !== -1 ? rawIndex : 0;
         const descriptor = {
             tag,
-            index: index !== -1 ? index : 0,
+            index,
             textSnippet: normalizedText.substring(0, 32),
             textHash: hashCode(normalizedText),
-            elementId: el.id,
         };
+        if (el.id) {
+            descriptor.elementId = el.id;
+        }
         if (parentId) {
             descriptor.parentId = parentId;
         }
@@ -12356,7 +12453,7 @@
      * Returns an array of elements. For specific descriptors, usually contains 0 or 1 element.
      * For ID-only descriptors (tag='ANY'), may return multiple if duplicates exist.
      */
-    function resolve(root, descriptor) {
+    function resolve(descriptor) {
         // 0. Direct ID Shortcut
         if (descriptor.elementId) {
             // Always support duplicate IDs for consistency, even if technically invalid HTML.
@@ -12368,19 +12465,15 @@
                 return [];
         }
         // 1. Determine Scope
-        let scope = root;
-        // Optimization: If parentId exists, try to narrow scope immediately
+        // Default to document.body so index pool matches descriptor.ts,
+        // which also falls back to document.body when no id-bearing ancestor is found.
+        let scope = document.body;
+        // Optimization: If parentId exists, try to narrow scope immediately.
         if (descriptor.parentId) {
-            const foundParent = root.querySelector(`#${descriptor.parentId}`);
+            const foundParent = document.getElementById(descriptor.parentId);
             if (foundParent instanceof HTMLElement) {
                 scope = foundParent;
             }
-            else {
-                const globalParent = document.getElementById(descriptor.parentId);
-                if (globalParent) {
-                    scope = globalParent;
-                }
-            }
         }
         // 2. Candidate Search & Scoring
         const candidates = scope.querySelectorAll(descriptor.tag);
@@ -12963,23 +13056,23 @@
     	return zoom;
     }
 
-    var root_1$b = from_html(`<div role="alert" aria-live="polite"> </div>`);
+    var root_1$c = from_html(`<div role="alert" aria-live="polite"> </div>`);
     var root$g = from_html(`<div class="toast-container svelte-14irt8g"></div>`);
 
-    const $$css$i = {
+    const $$css$j = {
     	hash: 'svelte-14irt8g',
     	code: '.toast-container.svelte-14irt8g {position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:20000;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none; /* Let clicks pass through container */}.toast-item.svelte-14irt8g {background:rgba(0, 0, 0, 0.85);color:white;padding:10px 20px;border-radius:4px;font-size:14px;box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);pointer-events:auto; /* Re-enable clicks on toasts */max-width:300px;text-align:center;}'
     };
 
     function Toast($$anchor, $$props) {
     	push($$props, false);
-    	append_styles$1($$anchor, $$css$i);
+    	append_styles$1($$anchor, $$css$j);
     	init();
 
     	var div = root$g();
 
     	each(div, 13, () => toast.items, (t) => t.id, ($$anchor, t) => {
-    		var div_1 = root_1$b();
+    		var div_1 = root_1$c();
     		var text = child(div_1, true);
 
     		reset(div_1);
@@ -13002,14 +13095,14 @@
 
     var root$f = from_html(`<div class="floating-bar svelte-bs8cbd"><div class="mode-toggle svelte-bs8cbd"><button type="button" title="Highlight selected elements">Highlight</button> <button type="button" title="Show only selected elements">Show</button> <button type="button" title="Hide selected elements">Hide</button></div> <span class="divider svelte-bs8cbd"></span> <span class="count svelte-bs8cbd"> </span> <button type="button" class="btn clear svelte-bs8cbd">Clear</button> <button type="button" class="btn preview svelte-bs8cbd">Preview</button> <button type="button" class="btn generate svelte-bs8cbd">Copy Link</button> <button type="button" class="btn exit svelte-bs8cbd">Exit</button></div>`);
 
-    const $$css$h = {
+    const $$css$i = {
     	hash: 'svelte-bs8cbd',
     	code: '.floating-bar.svelte-bs8cbd {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#2c2c2c;color:#f1f1f1;border-radius:8px;padding:8px 12px;box-shadow:0 8px 20px rgba(0, 0, 0, 0.4);display:grid;grid-template-columns:auto auto 1fr auto auto auto auto;align-items:center;gap:12px;z-index:99999;font-family:system-ui,\n      -apple-system,\n      sans-serif;font-size:14px;border:1px solid #4a4a4a;pointer-events:auto;white-space:nowrap;min-width:500px;}.mode-toggle.svelte-bs8cbd {display:flex;background:#1a1a1a;border-radius:6px;padding:2px;border:1px solid #4a4a4a;}.mode-btn.svelte-bs8cbd {background:transparent;color:#aeaeae;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-weight:500;font-size:13px;transition:all 0.2s;}.mode-btn.svelte-bs8cbd:hover {color:#fff;}.mode-btn.active.svelte-bs8cbd {background:#4a4a4a;color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);}.divider.svelte-bs8cbd {width:1px;height:20px;background:#4a4a4a;margin:0 4px;}.count.svelte-bs8cbd {font-weight:500;min-width:120px;text-align:center;font-size:13px;color:#ccc;}.btn.svelte-bs8cbd {background-color:#0078d4;color:white;border:none;padding:6px 12px;border-radius:5px;cursor:pointer;font-weight:500;transition:background-color 0.2s;font-size:13px;}.btn.svelte-bs8cbd:hover {background-color:#005a9e;}.btn.clear.svelte-bs8cbd {background-color:transparent;border:1px solid #5a5a5a;color:#dadada;}.btn.clear.svelte-bs8cbd:hover {background-color:#3a3a3a;color:white;}.btn.preview.svelte-bs8cbd {background-color:#333;border:1px solid #555;}.btn.preview.svelte-bs8cbd:hover {background-color:#444;}.btn.exit.svelte-bs8cbd {background-color:transparent;color:#ff6b6b;padding:6px 10px;}.btn.exit.svelte-bs8cbd:hover {background-color:rgba(255, 107, 107, 0.1);}\n\n  @media (max-width: 600px) {.floating-bar.svelte-bs8cbd {display:flex;flex-wrap:wrap;min-width:unset;width:90%;max-width:400px;height:auto;padding:12px;gap:10px;bottom:30px;}.mode-toggle.svelte-bs8cbd {margin-right:auto;order:1;}.btn.exit.svelte-bs8cbd {margin-left:auto;order:2;}.divider.svelte-bs8cbd {display:none;}.count.svelte-bs8cbd {width:100%;text-align:center;order:3;padding:8px 0;border-top:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a;margin:4px 0;}.btn.clear.svelte-bs8cbd,\n    .btn.preview.svelte-bs8cbd,\n    .btn.generate.svelte-bs8cbd {flex:1;text-align:center;font-size:12px;padding:8px 4px;order:4;}.btn.generate.svelte-bs8cbd {flex:1.5;}\n  }'
     };
 
     function ShareToolbar($$anchor, $$props) {
     	push($$props, false);
-    	append_styles$1($$anchor, $$css$h);
+    	append_styles$1($$anchor, $$css$i);
 
     	function handleClear() {
     		shareStore.clearAllSelections();
@@ -13089,16 +13182,16 @@
 
     var root_2$7 = from_html(`<span class="id-badge svelte-64gpkh" title="ID detection active"> </span>`);
     var root_3$5 = from_html(`<button type="button" class="action-btn up svelte-64gpkh" title="Select Parent">↰</button>`);
-    var root_1$a = from_html(`<div class="hover-helper svelte-64gpkh"><div class="info svelte-64gpkh"><span class="tag svelte-64gpkh"> </span> <!></div> <button type="button"> </button> <!></div>`);
+    var root_1$b = from_html(`<div class="hover-helper svelte-64gpkh"><div class="info svelte-64gpkh"><span class="tag svelte-64gpkh"> </span> <!></div> <button type="button"> </button> <!></div>`);
 
-    const $$css$g = {
+    const $$css$h = {
     	hash: 'svelte-64gpkh',
     	code: '.hover-helper.svelte-64gpkh {position:fixed;z-index:99999;background-color:#333;color:white;padding:4px 8px;border-radius:4px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);font-family:monospace;pointer-events:auto;}.info.svelte-64gpkh {display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:2px;}.tag.svelte-64gpkh {font-size:12px;font-weight:bold;color:#aeaeae;}.id-badge.svelte-64gpkh {font-size:10px;color:#64d2ff;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.action-btn.svelte-64gpkh {background:#555;border:none;color:white;border-radius:3px;cursor:pointer;padding:2px 6px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color 0.1s;}.action-btn.svelte-64gpkh:hover {background:#777;}.action-btn.deselect.svelte-64gpkh {background-color:#d13438;}.action-btn.deselect.svelte-64gpkh:hover {background-color:#a42628;}'
     };
 
     function HoverHelper($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$g);
+    	append_styles$1($$anchor, $$css$h);
 
     	// Derived state for easier access
     	let target = user_derived(() => shareStore.currentHoverTarget);
@@ -13197,7 +13290,7 @@
 
     	{
     		var consequent_2 = ($$anchor) => {
-    			var div = root_1$a();
+    			var div = root_1$b();
     			var div_1 = child(div);
     			var span = child(div_1);
     			var text = child(span, true);
@@ -13273,17 +13366,17 @@
     delegate(['click']);
 
     var root_2$6 = from_html(`<button type="button"></button>`);
-    var root_1$9 = from_html(`<div class="cv-color-swatches svelte-1r78n4c" role="none"></div>`);
+    var root_1$a = from_html(`<div class="cv-color-swatches svelte-1r78n4c" role="none"></div>`);
     var root$e = from_html(`<div class="cv-color-picker svelte-1r78n4c" role="none"><button type="button" class="cv-color-trigger svelte-1r78n4c" title="Choose highlight color" aria-label="Choose highlight color"><span class="cv-color-dot svelte-1r78n4c"></span></button> <!></div>`);
 
-    const $$css$f = {
+    const $$css$g = {
     	hash: 'svelte-1r78n4c',
     	code: '.cv-color-picker.svelte-1r78n4c {position:fixed;transform:translateX(-50%) translateY(-100%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;z-index:9500;\n    /* Nudge down so the trigger peeks above the element edge */margin-top:8px;}.cv-color-trigger.svelte-1r78n4c {width:22px;height:16px;border-radius:100px;border:1.5px solid rgba(0, 0, 0, 0.18);background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);transition:box-shadow 0.15s;}.cv-color-trigger.svelte-1r78n4c:hover {box-shadow:0 3px 12px rgba(0, 0, 0, 0.22);}.cv-color-dot.svelte-1r78n4c {width:10px;height:10px;border-radius:50%;display:block;border:1px solid rgba(0, 0, 0, 0.12);}.cv-color-swatches.svelte-1r78n4c {display:flex;flex-direction:row;gap:4px;background:white;border-radius:100px;padding:4px 6px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.18);border:1px solid rgba(0, 0, 0, 0.1);}.cv-color-swatch.svelte-1r78n4c {width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform 0.1s, border-color 0.1s;}.cv-color-swatch.svelte-1r78n4c:hover {transform:scale(1.2);border-color:rgba(0, 0, 0, 0.3);}.cv-color-swatch.active.svelte-1r78n4c {border-color:rgba(0, 0, 0, 0.5);transform:scale(1.15);}'
     };
 
     function HighlightColorPicker($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$f);
+    	append_styles$1($$anchor, $$css$g);
 
     	let isExpanded = state(false);
     	let rect = state(proxy({ top: 0, left: 0, width: 0 }));
@@ -13357,7 +13450,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var div_1 = root_1$9();
+    			var div_1 = root_1$a();
 
     			each(div_1, 21, () => HIGHLIGHT_COLORS, index, ($$anchor, color) => {
     				var button_1 = root_2$6();
@@ -13400,20 +13493,20 @@
 
     delegate(['click', 'dblclick']);
 
-    var root_1$8 = from_html(`<span class="cv-annotation-tab-preview svelte-1r1spmr"> </span>`);
+    var root_1$9 = from_html(`<span class="cv-annotation-tab-preview svelte-1r1spmr"> </span>`);
     var root_2$5 = from_html(`<span class="cv-annotation-tab-icon svelte-1r1spmr"> </span>`);
     var root_4$2 = from_html(`<button type="button"> </button>`);
     var root_3$4 = from_html(`<div class="cv-annotation-panel svelte-1r1spmr" role="none"><textarea class="cv-annotation-textarea svelte-1r1spmr" placeholder="Add a note…" rows="3"></textarea> <div class="cv-annotation-footer svelte-1r1spmr"><div class="cv-corner-selector svelte-1r1spmr" role="group" aria-label="Anchor corner"></div> <span class="cv-char-counter svelte-1r1spmr"> </span></div></div>`);
     var root$d = from_html(`<div class="cv-annotation-editor svelte-1r1spmr" role="none"><button type="button" aria-label="Annotation"><!></button> <!></div>`);
 
-    const $$css$e = {
+    const $$css$f = {
     	hash: 'svelte-1r1spmr',
     	code: '.cv-annotation-editor.svelte-1r1spmr {position:fixed;z-index:9400;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}.cv-annotation-tab.svelte-1r1spmr {height:20px;padding:0 8px;border-radius:100px;border:1.5px solid rgba(0, 0, 0, 0.18);background:white;cursor:pointer;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);transition:box-shadow 0.15s;max-width:160px;overflow:hidden;}.cv-annotation-tab.svelte-1r1spmr:hover {box-shadow:0 3px 12px rgba(0, 0, 0, 0.22);}.cv-annotation-tab--has-text.svelte-1r1spmr {background:#fffbe6;border-color:rgba(180, 83, 9, 0.4);}.cv-annotation-tab-icon.svelte-1r1spmr {font-size:10px;line-height:1;color:#6b7280;}.cv-annotation-tab-preview.svelte-1r1spmr {font-size:9px;font-weight:600;color:#1a1a1a;font-family:ui-sans-serif, system-ui, sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}.cv-annotation-panel.svelte-1r1spmr {background:white;border-radius:8px;border:1px solid rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.18);padding:8px;width:220px;display:flex;flex-direction:column;gap:6px;}.cv-annotation-textarea.svelte-1r1spmr {width:100%;box-sizing:border-box;resize:vertical;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;padding:5px 7px;font-size:11px;font-family:ui-sans-serif, system-ui, sans-serif;color:#1a1a1a;line-height:1.5;outline:none;min-height:56px;}.cv-annotation-textarea.svelte-1r1spmr:focus {border-color:#b45309;box-shadow:0 0 0 2px rgba(180, 83, 9, 0.15);}.cv-annotation-footer.svelte-1r1spmr {display:flex;align-items:center;justify-content:space-between;}.cv-corner-selector.svelte-1r1spmr {display:flex;gap:2px;}.cv-corner-btn.svelte-1r1spmr {width:20px;height:20px;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.12);background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:#6b7280;padding:0;transition:background 0.1s, border-color 0.1s;}.cv-corner-btn.svelte-1r1spmr:hover {background:#fef3c7;border-color:#b45309;color:#1a1a1a;}.cv-corner-btn.active.svelte-1r1spmr {background:#fef3c7;border-color:#b45309;color:#92400e;font-weight:700;}.cv-char-counter.svelte-1r1spmr {font-size:9px;color:#9ca3af;font-family:ui-sans-serif, system-ui, sans-serif;font-variant-numeric:tabular-nums;}'
     };
 
     function HighlightAnnotationEditor($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$e);
+    	append_styles$1($$anchor, $$css$f);
 
     	let isExpanded = state(false);
     	let rect = state(proxy({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 }));
@@ -13500,7 +13593,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var span = root_1$8();
+    			var span = root_1$9();
     			var text = child(span, true);
 
     			reset(span);
@@ -13605,14 +13698,14 @@
     var root_3$3 = from_html(`<div><span class="selection-label svelte-1dbf58w"> </span></div>`);
     var root$c = from_html(`<div class="share-overlay-ui"><!> <!> <!> <!></div>`);
 
-    const $$css$d = {
+    const $$css$e = {
     	hash: 'svelte-1dbf58w',
     	code: '\n  /* Global styles injected when active */body.cv-share-active {cursor:default;user-select:none;-webkit-user-select:none;}\n\n  /* Highlight outlines */.cv-highlight-target {outline:2px dashed #0078d4 !important;outline-offset:2px;cursor:crosshair;}.cv-share-selected {outline:3px solid #005a9e !important;outline-offset:2px;background-color:rgba(0, 120, 212, 0.05);}.cv-highlight-target-hide {outline:2px dashed #d13438 !important;outline-offset:2px;cursor:crosshair;}.cv-share-selected-hide {outline:3px solid #a4262c !important;outline-offset:2px;background-color:rgba(209, 52, 56, 0.05);}.cv-highlight-target-mode {outline:2px dashed #d97706 !important;outline-offset:2px;cursor:crosshair;}.cv-share-selected-highlight {outline:3px solid #b45309 !important;outline-offset:2px;background-color:rgba(245, 158, 11, 0.05);}.selection-box.svelte-1dbf58w {position:fixed;border:1px solid rgba(0, 120, 212, 0.4);background-color:rgba(0, 120, 212, 0.1);pointer-events:none;z-index:10000;box-sizing:border-box;}.selection-box.hide-mode.svelte-1dbf58w {border:1px solid rgba(209, 52, 56, 0.4);background-color:rgba(209, 52, 56, 0.1);}.selection-box.highlight-mode.svelte-1dbf58w {border:1px solid rgba(255, 140, 0, 0.6); /* Orange/Gold for highlight */background-color:rgba(255, 140, 0, 0.1);}.selection-label.svelte-1dbf58w {position:absolute;top:-24px;left:0;background:#0078d4;color:white;padding:2px 6px;font-size:11px;border-radius:3px;white-space:nowrap;font-family:sans-serif;opacity:0.9;}.hide-mode.svelte-1dbf58w .selection-label:where(.svelte-1dbf58w) {background:#d13438;}.highlight-mode.svelte-1dbf58w .selection-label:where(.svelte-1dbf58w) {background:#d97706; /* Darker orange for text bg */}'
     };
 
     function ShareOverlay($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$d);
+    	append_styles$1($$anchor, $$css$e);
 
     	let excludedTags = prop($$props, 'excludedTags', 19, () => ['HEADER', 'NAV', 'FOOTER']),
     		excludedIds = prop($$props, 'excludedIds', 19, () => []);
@@ -13935,16 +14028,16 @@
     	pop();
     }
 
-    var root_1$7 = from_html(`<div class="cv-focus-banner-wrapper svelte-1yqpn7e"><div id="cv-exit-focus-banner" data-cv-scroll-offset="" class="svelte-1yqpn7e"><span>You are viewing a 'focused view' generated by CustardUI.</span> <button type="button" class="svelte-1yqpn7e">See Original Page</button></div></div>`);
+    var root_1$8 = from_html(`<div class="cv-focus-banner-wrapper svelte-1yqpn7e"><div id="cv-exit-focus-banner" data-cv-scroll-offset="" class="svelte-1yqpn7e"><span>You are viewing a 'focused view' generated by CustardUI.</span> <button type="button" class="svelte-1yqpn7e">See Original Page</button></div></div>`);
 
-    const $$css$c = {
+    const $$css$d = {
     	hash: 'svelte-1yqpn7e',
     	code: '.cv-focus-banner-wrapper.svelte-1yqpn7e {position:fixed;top:0;left:0;right:0;z-index:9000;background-color:#f3cb52;box-shadow:0 2px 8px rgba(44, 26, 14, 0.15);font-family:system-ui, sans-serif;}#cv-exit-focus-banner.svelte-1yqpn7e {color:#2c1a0e;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:16px;}button.svelte-1yqpn7e {background:#804b18;color:#fdf6e3;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-weight:600;}button.svelte-1yqpn7e:hover {background:#c4853a;}'
     };
 
     function FocusBanner($$anchor, $$props) {
     	push($$props, false);
-    	append_styles$1($$anchor, $$css$c);
+    	append_styles$1($$anchor, $$css$d);
 
     	function handleExit() {
     		focusStore.exit();
@@ -13957,7 +14050,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var div = root_1$7();
+    			var div = root_1$8();
     			var div_1 = child(div);
     			var button = sibling(child(div_1), 2);
 
@@ -14169,13 +14262,13 @@
 
     	/**
     	 * Initializes the manager. Should be called when the component is ready
-    	 * and we know there are elements on the page.
+    	 * and we know there are elements on the current page (toggles, tab groups, or placeholders).
     	 */
-    	init(hasPageElements, settingsEnabled) {
+    	init(hasElementsOnCurrentPage, settingsEnabled) {
     		const options = this.getOptions();
 
     		if (settingsEnabled && !this.hasChecked && options?.show) {
-    			if (hasPageElements) {
+    			if (hasElementsOnCurrentPage) {
     				this.hasChecked = true;
     				this.checkAndShow();
     			}
@@ -14203,14 +14296,14 @@
 
     var root$b = from_html(`<div class="cv-widget-root" data-cv-share-ignore=""><!> <!> <!> <!> <!> <!></div>`);
 
-    const $$css$b = {
+    const $$css$c = {
     	hash: 'svelte-1vlfixd',
     	code: '\n  /* Root should allow clicks to pass through to the page unless hitting checking/interactive element */.cv-widget-root {position:fixed;top:0;left:0;width:0;height:0;z-index:9999;pointer-events:none; /* Crucial: Allow clicks to pass through */\n\n    /* Light Theme Defaults */--cv-bg: white;--cv-text: rgba(0, 0, 0, 0.9);--cv-text-secondary: rgba(0, 0, 0, 0.6);--cv-border: rgba(0, 0, 0, 0.1);--cv-bg-hover: rgba(0, 0, 0, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #2563eb;--cv-danger: #dc2626;--cv-danger-bg: rgba(220, 38, 38, 0.1);--cv-shadow: rgba(0, 0, 0, 0.25);--cv-input-bg: white;--cv-input-border: rgba(0, 0, 0, 0.15);--cv-switch-bg: rgba(0, 0, 0, 0.1);--cv-switch-knob: white;--cv-modal-icon-bg: rgba(0, 0, 0, 0.08);--cv-icon-bg: rgba(255, 255, 255, 0.92);--cv-icon-color: rgba(0, 0, 0, 0.9);--cv-focus-ring: rgba(62, 132, 244, 0.2);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);--cv-modal-radius: 0.75rem;--cv-card-radius: 0.5rem;--cv-section-label-transform: uppercase;font-family:inherit; /* Inherit font from host */}\n\n  /* But interactive children need pointer-events back */.cv-widget-root > * {pointer-events:auto;}\n\n  /* Exception: ShareOverlay manages its own pointer events */.cv-widget-root .cv-share-overlay {pointer-events:none; /* Overlay often passes clicks until specialized handles active */}.cv-widget-root[data-theme=\'dark\'] {\n    /* Dark Theme Overrides */--cv-bg: #101722;--cv-text: #e2e8f0;--cv-text-secondary: rgba(255, 255, 255, 0.6);--cv-border: rgba(255, 255, 255, 0.1);--cv-bg-hover: rgba(255, 255, 255, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #60a5fa;--cv-danger: #f87171;--cv-danger-bg: rgba(248, 113, 113, 0.1);--cv-shadow: rgba(0, 0, 0, 0.5);--cv-input-bg: #1e293b;--cv-input-border: rgba(255, 255, 255, 0.1);--cv-switch-bg: rgba(255, 255, 255, 0.1);--cv-switch-knob: #e2e8f0;--cv-modal-icon-bg: rgba(255, 255, 255, 0.08);--cv-icon-bg: #1e293b;--cv-icon-color: #e2e8f0;--cv-focus-ring: rgba(62, 132, 244, 0.5);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);--cv-modal-radius: 0.75rem;--cv-card-radius: 0.5rem;--cv-section-label-transform: uppercase;}.cv-hidden {display:none !important;}'
     };
 
     function UIRoot($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$b);
+    	append_styles$1($$anchor, $$css$c);
 
     	const { persistenceManager, resetToDefault } = getContext(RUNTIME_CALLBACKS_CTX);
     	const iconSettingsStore = getContext(ICON_SETTINGS_CTX);
@@ -14252,7 +14345,7 @@
 
     	// --- Effects ---
     	user_effect(() => {
-    		introManager.init(elementStore.hasPageElements, get(settingsEnabled));
+    		introManager.init(elementStore.hasElementsOnCurrentPage, get(settingsEnabled));
     	});
 
     	// --- Modal Actions ---
@@ -14485,7 +14578,8 @@
      * Initializes the UI manager (settings and share UI) using the provided config.
      */
     function initUIManager(runtime, config) {
-        const settingsEnabled = config.settings?.enabled === true;
+        const { enabled, ...widgetSettings } = config.settings ?? {};
+        const settingsEnabled = enabled === true;
         const callbacks = {
             resetToDefault: () => runtime.resetToDefault(),
             iconSettings: runtime.iconSettingsStore,
@@ -14494,7 +14588,7 @@
         const uiManager = new CustardUIManager({
             callbacks,
             settingsEnabled,
-            ...config.settings,
+            ...widgetSettings,
         });
         uiManager.render();
         return uiManager;
@@ -14795,14 +14889,14 @@
 
     var root$a = from_html(`<div class="cv-context-divider svelte-1a535nn" role="button" tabindex="0"> </div>`);
 
-    const $$css$a = {
+    const $$css$b = {
     	hash: 'svelte-1a535nn',
     	code: '.cv-context-divider.svelte-1a535nn {padding:12px;margin:16px 0;background-color:#f8f8f8;border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;color:#555;text-align:center;cursor:pointer;font-family:system-ui, sans-serif;font-size:13px;transition:background-color 0.2s;}.cv-context-divider.svelte-1a535nn:hover {background-color:#e8e8e8;color:#333;}'
     };
 
     function FocusDivider($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$a);
+    	append_styles$1($$anchor, $$css$b);
 
     	// Component is mounted manually via `mount`, use props for communication.
     	let hiddenCount = prop($$props, 'hiddenCount', 3, 0);
@@ -14948,18 +15042,18 @@
     var root_3$2 = from_html(`<!> <span class="cv-ribbon-text cv-ribbon-text--right svelte-1asb212"> </span> <span class="cv-ribbon-grip svelte-1asb212" aria-hidden="true"><span class="svelte-1asb212"></span><span class="svelte-1asb212"></span> <span class="svelte-1asb212"></span><span class="svelte-1asb212"></span> <span class="svelte-1asb212"></span><span class="svelte-1asb212"></span></span>`, 1);
     var root_6$1 = from_html(`<span>▾</span>`);
     var root_5$1 = from_html(`<span class="cv-ribbon-grip svelte-1asb212" aria-hidden="true"><span class="svelte-1asb212"></span><span class="svelte-1asb212"></span> <span class="svelte-1asb212"></span><span class="svelte-1asb212"></span> <span class="svelte-1asb212"></span><span class="svelte-1asb212"></span></span> <span class="cv-ribbon-text svelte-1asb212"> </span> <!>`, 1);
-    var root_1$6 = from_html(`<button type="button"><!></button>`);
+    var root_1$7 = from_html(`<button type="button"><!></button>`);
     var root_7$1 = from_html(`<div class="cv-annotation-card svelte-1asb212" role="region" aria-label="Annotation"><button type="button" class="cv-card-close svelte-1asb212" aria-label="Collapse annotation">✕</button> <span class="cv-card-text svelte-1asb212"> </span></div>`);
     var root$9 = from_html(`<div><!></div>`);
 
-    const $$css$9 = {
+    const $$css$a = {
     	hash: 'svelte-1asb212',
     	code: '\n  /* ==============================\n     CONTAINER (position, drag, opacity)\n     ============================== */.cv-annotation-container.svelte-1asb212 {position:absolute;z-index:100;pointer-events:auto;touch-action:none;user-select:none;cursor:default;opacity:0.88;transition:opacity 0.2s ease, z-index 0s;}.cv-annotation-container.svelte-1asb212:hover {opacity:1;z-index:110;}\n\n  /* ==============================\n     RIBBON (home-plate)\n     ============================== */.cv-annotation-ribbon.svelte-1asb212 {border:none;padding:6px 20px 6px 8px;min-width:28px;min-height:24px;background:var(--cv-highlight-color);cursor:default;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);display:flex;align-items:center;justify-content:flex-start;gap:5px;transform-origin:center center;}.cv-annotation-ribbon--intro.svelte-1asb212 {\n    animation: svelte-1asb212-cv-wiggle-intro 0.75s ease-in-out forwards;}.cv-annotation-ribbon--periodic.svelte-1asb212 {\n    animation: svelte-1asb212-cv-wiggle-periodic 5s ease-in-out infinite;}.cv-annotation-ribbon--right.svelte-1asb212 {padding:6px 8px 6px 20px;justify-content:flex-end;}.cv-annotation-ribbon--empty.svelte-1asb212 {min-width:24px;padding:6px 16px 6px 8px;}.cv-annotation-ribbon--expandable.svelte-1asb212 {cursor:pointer;}.cv-annotation-ribbon--expandable.svelte-1asb212:hover {filter:brightness(1.1);}\n\n  /* ==============================\n     RIBBON TEXT (single line)\n     ============================== */.cv-ribbon-text.svelte-1asb212 {display:block;font-family:\'Segoe Print\', \'Bradley Hand\', \'Chilanka\', cursive;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;color:#fff;text-shadow:0 1px 3px rgba(0, 0, 0, 0.25);}.cv-ribbon-text--right.svelte-1asb212 {text-align:right;}.cv-ribbon-chevron.svelte-1asb212 {font-size:22px;opacity:1;flex-shrink:0;line-height:1;color:#fff;text-shadow:0 1px 4px rgba(0, 0, 0, 0.4);}.cv-ribbon-chevron--bounce.svelte-1asb212 {\n    animation: svelte-1asb212-cv-chevron-bounce 3s ease-in-out infinite;}\n\n  /* ==============================\n     DRAG GRIP (6-dot grid on flat side)\n     ============================== */.cv-ribbon-grip.svelte-1asb212 {display:grid;grid-template-columns:repeat(2, 3px);gap:3px;flex-shrink:0;opacity:0.7;cursor:grab;padding:2px;}.cv-ribbon-grip.svelte-1asb212:active {cursor:grabbing;}.cv-ribbon-grip.svelte-1asb212 > span:where(.svelte-1asb212) {width:3px;height:3px;border-radius:50%;background:rgba(255, 255, 255, 0.9);box-shadow:0 0 1px rgba(0, 0, 0, 0.4);}\n\n  /* ==============================\n     CARD (sticky note)\n     ============================== */.cv-annotation-card.svelte-1asb212 {background:#FFFDF5;border:1.5px solid var(--cv-highlight-color);border-radius:4px;padding:10px 12px;max-width:280px;min-width:120px;box-shadow:0 4px 20px rgba(0, 0, 0, 0.18);position:relative;\n    animation: svelte-1asb212-cv-cardPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.cv-card-close.svelte-1asb212 {position:absolute;top:3px;right:5px;border:none;background:transparent;cursor:pointer;font-size:12px;color:#aaa;padding:2px 4px;line-height:1;font-family:sans-serif;}.cv-card-close.svelte-1asb212:hover {color:#555;}.cv-card-text.svelte-1asb212 {display:block;font-family:\'Segoe Print\', \'Bradley Hand\', \'Chilanka\', cursive;font-size:13px;font-weight:600;color:#333;line-height:1.45;word-break:break-word;white-space:pre-wrap;padding-right:15px;}\n\n  /* ==============================\n     ANIMATIONS\n     ============================== */\n  @keyframes svelte-1asb212-cv-wiggle-intro {\n    0%   { transform: rotate(0deg); }\n    10%  { transform: rotate(-6deg); }\n    25%  { transform: rotate(6deg); }\n    40%  { transform: rotate(-5deg); }\n    55%  { transform: rotate(5deg); }\n    68%  { transform: rotate(-3deg); }\n    80%  { transform: rotate(2.5deg); }\n    90%  { transform: rotate(-1deg); }\n    100% { transform: rotate(0deg); }\n  }\n\n  @keyframes svelte-1asb212-cv-wiggle-periodic {\n    0%, 85%, 100% { transform: rotate(0deg); }\n    87% { transform: rotate(1.2deg); }\n    90% { transform: rotate(-1.2deg); }\n    93% { transform: rotate(0.8deg); }\n    96% { transform: rotate(-0.5deg); }\n  }\n\n  @keyframes svelte-1asb212-cv-cardPop {\n    from { opacity: 0; transform: scale(0.9) translateY(5px); }\n    to { opacity: 1; transform: scale(1) translateY(0); }\n  }\n\n  @keyframes svelte-1asb212-cv-chevron-bounce {\n    0%, 70%, 100% { transform: translateY(0); }\n    78%           { transform: translateY(-3px); }\n    86%           { transform: translateY(1px); }\n    93%           { transform: translateY(-1.5px); }\n  }'
     };
 
     function HighlightTextAnnotation($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$9);
+    	append_styles$1($$anchor, $$css$a);
 
     	const corner = user_derived(() => $$props.annotationCorner ?? DEFAULT_ANNOTATION_CORNER);
     	const hasText = user_derived(() => $$props.annotation.length > 0);
@@ -15121,9 +15215,9 @@
     		const pointsRight = c === 'tl' || c === 'bl';
 
     		if (pointsRight) {
-    			return 'polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%)';
+    			return 'polygon(0% 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 0% 100%)';
     		} else {
-    			return 'polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%)';
+    			return 'polygon(14px 0%, 100% 0%, 100% 100%, 14px 100%, 0% 50%)';
     		}
     	}
 
@@ -15138,7 +15232,7 @@
 
     	{
     		var consequent_4 = ($$anchor) => {
-    			var button = root_1$6();
+    			var button = root_1$7();
     			let classes_1;
 
     			button.__click = handleInteraction;
@@ -15294,15 +15388,15 @@
 
     delegate(['pointerdown', 'pointermove', 'pointerup', 'click']);
 
-    var root_1$5 = from_html(`<div class="cv-annotation-container svelte-ii1txw"><div role="img" aria-label="Annotation marker"></div> <button type="button" class="cv-empty-dismiss svelte-ii1txw" aria-label="Dismiss marker">✕</button></div>`);
+    var root_1$6 = from_html(`<div class="cv-annotation-container svelte-ii1txw"><div role="img" aria-label="Annotation marker"></div> <button type="button" class="cv-empty-dismiss svelte-ii1txw" aria-label="Dismiss marker">✕</button></div>`);
 
-    const $$css$8 = {
+    const $$css$9 = {
     	hash: 'svelte-ii1txw',
     	code: '.cv-annotation-container.svelte-ii1txw {position:absolute;z-index:100;pointer-events:auto;touch-action:none;user-select:none;opacity:0.95;transition:opacity 0.2s ease, z-index 0s;}.cv-annotation-container.svelte-ii1txw:hover {opacity:1;z-index:110;}.cv-empty-ribbon.svelte-ii1txw {min-width:45px;min-height:22px;background:var(--cv-highlight-color);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);transform-origin:center center;padding:5px 22px 5px 10px;opacity:0.95;transition:opacity 0.2s ease;}.cv-annotation-container.svelte-ii1txw:hover .cv-empty-ribbon:where(.svelte-ii1txw) {opacity:1;}.cv-empty-ribbon--right.svelte-ii1txw {padding:5px 10px 5px 22px;}.cv-empty-ribbon--intro.svelte-ii1txw {\n    animation: svelte-ii1txw-cv-wiggle-intro 0.75s ease-in-out forwards;}.cv-empty-ribbon--periodic.svelte-ii1txw {\n    animation: svelte-ii1txw-cv-wiggle-periodic 5s ease-in-out infinite;}\n\n  /* Dismiss button — hidden until container is hovered */.cv-empty-dismiss.svelte-ii1txw {position:absolute;border:none;background:rgba(100, 100, 100, 0.55);color:#fff;font-size:8px;cursor:pointer;width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;border-radius:50%;box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);opacity:0;pointer-events:none;transition:opacity 0.15s ease, background 0.15s ease, color 0.15s ease;}.cv-annotation-container.svelte-ii1txw:hover .cv-empty-dismiss:where(.svelte-ii1txw) {opacity:1;pointer-events:auto;}.cv-empty-dismiss.svelte-ii1txw:hover {background:rgba(80, 80, 80, 0.8);box-shadow:0 1px 6px rgba(0, 0, 0, 0.28);}\n\n  @keyframes svelte-ii1txw-cv-wiggle-intro {\n    0%   { transform: rotate(0deg); }\n    10%  { transform: rotate(-6deg); }\n    25%  { transform: rotate(6deg); }\n    40%  { transform: rotate(-5deg); }\n    55%  { transform: rotate(5deg); }\n    68%  { transform: rotate(-3deg); }\n    80%  { transform: rotate(2.5deg); }\n    90%  { transform: rotate(-1deg); }\n    100% { transform: rotate(0deg); }\n  }\n\n  @keyframes svelte-ii1txw-cv-wiggle-periodic {\n    0%, 85%, 100% { transform: rotate(0deg); }\n    87% { transform: rotate(1.2deg); }\n    90% { transform: rotate(-1.2deg); }\n    93% { transform: rotate(0.8deg); }\n    96% { transform: rotate(-0.5deg); }\n  }'
     };
 
     function HighlightEmptyAnnotation($$anchor, $$props) {
-    	append_styles$1($$anchor, $$css$8);
+    	append_styles$1($$anchor, $$css$9);
 
     	const corner = user_derived(() => $$props.annotationCorner ?? DEFAULT_ANNOTATION_CORNER);
     	const isRightCorner = user_derived(() => get(corner) === 'tr' || get(corner) === 'br');
@@ -15367,7 +15461,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var div = root_1$5();
+    			var div = root_1$6();
     			var div_1 = child(div);
     			let classes;
     			var button = sibling(div_1, 2);
@@ -15410,17 +15504,17 @@
     delegate(['click']);
 
     var root_2$3 = from_html(`<button type="button" aria-label="Previous highlight">↑</button> <button type="button" aria-label="Next highlight">↓</button>`, 1);
-    var root_1$4 = from_html(`<div class="cv-highlight-group svelte-1mz0neo"><div class="cv-highlight-marker svelte-1mz0neo"></div> <!> <div class="cv-highlight-pill svelte-1mz0neo"><a href="https://custardui.js.org" target="_blank" rel="noopener noreferrer" class="svelte-1mz0neo">Annotated by: CustardUI↗</a></div> <!></div>`);
+    var root_1$5 = from_html(`<div class="cv-highlight-group svelte-1mz0neo"><div class="cv-highlight-marker svelte-1mz0neo"></div> <!> <div class="cv-highlight-pill svelte-1mz0neo"><a href="https://custardui.js.org" target="_blank" rel="noopener noreferrer" class="svelte-1mz0neo">Annotated by: CustardUI↗</a></div> <!></div>`);
     var root$8 = from_html(`<div class="cv-highlight-overlay svelte-1mz0neo"></div>`);
 
-    const $$css$7 = {
+    const $$css$8 = {
     	hash: 'svelte-1mz0neo',
     	code: '.cv-highlight-overlay.svelte-1mz0neo {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8000;}.cv-highlight-group.svelte-1mz0neo {position:absolute;pointer-events:none;}.cv-highlight-marker.svelte-1mz0neo {position:absolute;inset:0;pointer-events:none;\n    \n    /* Marker Style */border:3.5px solid var(--cv-highlight-color);border-radius:200px 15px 225px 15px / 15px 225px 15px 255px;transform:rotate(-0.5deg);\n    \n    /* 3D INTERNAL VOLUME:\n       Adds depth to the yellow border itself so it looks rounded.\n    */box-shadow:inset 0 1px 2px rgba(129, 73, 25, 0.2),\n      inset 0 -1px 1px rgba(255, 255, 255, 0.7);\n\n    /* 2A-3 DOUBLE LIGHT PROJECTION:\n       Stacks multiple drop-shadows to cast into the box interior.\n    */filter:/* Sharp contact shadow for grounding */\n      drop-shadow(0 2px 2px rgba(44, 26, 14, 0.15)) \n      /* Light Source A: Casts shadow from top-left to bottom-right */\n      drop-shadow(-8px 12px 10px rgba(44, 26, 14, 0.12))\n      /* Light Source B: Casts shadow from top-right to bottom-left */\n      drop-shadow(8px 12px 10px rgba(44, 26, 14, 0.12));\n    \n    animation: svelte-1mz0neo-highlightFadeIn 0.3s ease-out forwards;}.cv-nav-arrow.svelte-1mz0neo {position:absolute;z-index:10;right:-5px;pointer-events:auto;width:14px;height:14px;border-radius:100px;border:1px solid var(--cv-highlight-color);background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:7px;color:#814919;font-weight:700;font-family:ui-sans-serif, system-ui, sans-serif;line-height:1;padding:0;box-shadow:0 4px 12px rgba(44, 26, 14, 0.15);opacity:0.7;}.cv-nav-arrow.svelte-1mz0neo:hover {opacity:1;}.cv-nav-arrow--up.svelte-1mz0neo {top:0px;}.cv-nav-arrow--down.svelte-1mz0neo {bottom:0px;}.cv-nav-arrow--hidden.svelte-1mz0neo {visibility:hidden;pointer-events:none;}.cv-highlight-pill.svelte-1mz0neo {position:absolute;z-index:10;bottom:-2px;right:14px;background:white;height:14px;padding:0 8px;display:flex;align-items:center;border-radius:100px;border:1px solid var(--cv-highlight-color);pointer-events:auto;white-space:nowrap;\n    \n    /* Stronger shadow to match the frame\'s new altitude */box-shadow:0 4px 12px rgba(44, 26, 14, 0.15);}.cv-highlight-pill.svelte-1mz0neo a:where(.svelte-1mz0neo) {font-size:8px;font-weight:700;color:#814919;text-decoration:none;font-family:ui-sans-serif, system-ui, sans-serif;line-height:1;}.cv-highlight-pill.svelte-1mz0neo:hover a:where(.svelte-1mz0neo) {opacity:0.8;}\n\n  @keyframes svelte-1mz0neo-highlightFadeIn {\n    from { \n      opacity: 0; \n      transform: scale(0.98) rotate(-1deg); \n    }\n    to { \n      opacity: 1; \n      transform: scale(1) rotate(-0.5deg); \n    }\n  }'
     };
 
     function HighlightOverlay($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$7);
+    	append_styles$1($$anchor, $$css$8);
 
     	let rects = user_derived(() => $$props.box.rects);
 
@@ -15437,7 +15531,7 @@
     	var div = root$8();
 
     	each(div, 23, () => get(rects), (rect) => rect.element, ($$anchor, rect, i) => {
-    		var div_1 = root_1$4();
+    		var div_1 = root_1$5();
     		var node = sibling(child(div_1), 2);
 
     		{
@@ -15629,7 +15723,6 @@
 
     /* highlight-service.svelte.ts generated by Svelte v5.46.1 */
 
-    const HIGHLIGHT_PARAM = 'cv-highlight';
     const BODY_HIGHLIGHT_CLASS = 'cv-highlight-mode';
 
     const ARROW_OVERLAY_ID = 'cv-highlight-overlay';
@@ -15647,7 +15740,6 @@
     }
 
     class HighlightService {
-    	rootEl;
     	overlayApp;
     	state = new HighlightState();
     	resizeObserver;
@@ -15656,9 +15748,7 @@
     	activeAnnotations = new Map();
     	onWindowResize = () => this.updatePositions();
 
-    	constructor(rootEl) {
-    		this.rootEl = rootEl;
-
+    	constructor() {
     		this.resizeObserver = new ResizeObserver(() => {
     			this.updatePositions();
     		});
@@ -15672,7 +15762,7 @@
     		const targets = [];
 
     		descriptors.forEach((desc) => {
-    			const matchingEls = resolve(this.rootEl, desc);
+    			const matchingEls = resolve(desc);
 
     			if (matchingEls && matchingEls.length > 0) targets.push(...matchingEls);
     		});
@@ -15690,7 +15780,7 @@
     		const annotations = new Map();
 
     		descriptors.forEach((desc) => {
-    			const matchingEls = resolve(this.rootEl, desc);
+    			const matchingEls = resolve(desc);
 
     			if (matchingEls && matchingEls.length > 0) {
     				targets.push(...matchingEls);
@@ -15851,14 +15941,11 @@
 
     /* focus-service.svelte.ts generated by Svelte v5.46.1 */
 
-    const SHOW_PARAM = 'cv-show';
-    const HIDE_PARAM = 'cv-hide';
     const BODY_SHOW_CLASS = 'cv-show-mode';
     const HIDDEN_CLASS = 'cv-hidden';
     const SHOW_ELEMENT_CLASS = 'cv-show-element';
 
     class FocusService {
-    	rootEl;
     	hiddenElements = new SvelteSet();
     	dividers = new SvelteSet(); // Store Svelte App instances
     	excludedTags;
@@ -15869,15 +15956,13 @@
 
     	highlightService;
 
-    	constructor(rootEl, options) {
-    		this.rootEl = rootEl;
-
+    	constructor(options) {
     		const userTags = options.shareExclusions?.tags || [];
     		const userIds = options.shareExclusions?.ids || [];
 
     		this.excludedTags = new SvelteSet([...DEFAULT_EXCLUDED_TAGS, ...userTags].map((t) => t.toUpperCase()));
     		this.excludedIds = new SvelteSet([...DEFAULT_EXCLUDED_IDS, ...userIds]);
-    		this.highlightService = new HighlightService(this.rootEl);
+    		this.highlightService = new HighlightService();
 
     		// Subscribe to store for exit signal
     		this.unsubscribe = effect_root(() => {
@@ -15910,9 +15995,9 @@
     		// eslint-disable-next-line svelte/prefer-svelte-reactivity
     		const url = new URL(window.location.href);
 
-    		const showDescriptors = url.searchParams.get(SHOW_PARAM);
-    		const hideDescriptors = url.searchParams.get(HIDE_PARAM);
-    		const highlightDescriptors = url.searchParams.get(HIGHLIGHT_PARAM);
+    		const showDescriptors = url.searchParams.get(PARAM_CV_SHOW);
+    		const hideDescriptors = url.searchParams.get(PARAM_CV_HIDE);
+    		const highlightDescriptors = url.searchParams.get(PARAM_CV_HIGHLIGHT);
     		const hasAnyMode = showDescriptors || hideDescriptors || highlightDescriptors;
 
     		if (!hasAnyMode) {
@@ -15969,7 +16054,7 @@
     		const targets = [];
 
     		descriptors.forEach((desc) => {
-    			const matchingEls = resolve(this.rootEl, desc);
+    			const matchingEls = resolve(desc);
 
     			if (matchingEls && matchingEls.length > 0) {
     				targets.push(...matchingEls);
@@ -16008,7 +16093,7 @@
     		const targets = [];
 
     		descriptors.forEach((desc) => {
-    			const matchingEls = resolve(this.rootEl, desc);
+    			const matchingEls = resolve(desc);
 
     			if (matchingEls && matchingEls.length > 0) {
     				targets.push(...matchingEls);
@@ -16198,18 +16283,18 @@
 
     			let changed = false;
 
-    			if (url.searchParams.has(SHOW_PARAM)) {
-    				url.searchParams.delete(SHOW_PARAM);
+    			if (url.searchParams.has(PARAM_CV_SHOW)) {
+    				url.searchParams.delete(PARAM_CV_SHOW);
     				changed = true;
     			}
 
-    			if (url.searchParams.has(HIDE_PARAM)) {
-    				url.searchParams.delete(HIDE_PARAM);
+    			if (url.searchParams.has(PARAM_CV_HIDE)) {
+    				url.searchParams.delete(PARAM_CV_HIDE);
     				changed = true;
     			}
 
-    			if (url.searchParams.has(HIGHLIGHT_PARAM)) {
-    				url.searchParams.delete(HIGHLIGHT_PARAM);
+    			if (url.searchParams.has(PARAM_CV_HIGHLIGHT)) {
+    				url.searchParams.delete(PARAM_CV_HIGHLIGHT);
     				changed = true;
     			}
 
@@ -16226,6 +16311,131 @@
     	}
     }
 
+    /* label-registry-store.svelte.ts generated by Svelte v5.46.1 */
+
+    class LabelRegistryStore {
+    	_labels = new SvelteMap();
+
+    	/**
+    	 * Registers a label definition. Overwrites any existing entry with the same name.
+    	 */
+    	register(def) {
+    		this._labels.set(def.name, { ...def });
+    	}
+
+    	/**
+    	 * Merges overrides onto an existing label entry.
+    	 * Warns and skips if the label name is not registered.
+    	 */
+    	override(name, overrides) {
+    		const existing = this._labels.get(name);
+
+    		if (!existing) {
+    			console.warn(`[CustardUI] Label "${name}" is not in the config and cannot be overridden.`);
+
+    			return;
+    		}
+
+    		this._labels.set(name, { ...existing, ...overrides });
+    	}
+
+    	/**
+    	 * Returns the label definition for the given name, or undefined if not registered.
+    	 */
+    	get(name) {
+    		return this._labels.get(name);
+    	}
+    }
+
+    const labelRegistryStore = new LabelRegistryStore();
+
+    /**
+     * Manages registration and adaptation overrides for label definitions.
+     */
+    const labelManager = {
+        /**
+         * Registers all labels from the config into the label registry store.
+         */
+        registerConfigLabels(config) {
+            for (const label of (config.labels ?? [])) {
+                labelRegistryStore.register(label);
+            }
+        },
+        /**
+         * Applies adaptation preset overrides to registered labels.
+         * Unknown label names produce a warning and are skipped.
+         */
+        applyAdaptationOverrides(overrides) {
+            for (const [name, override] of Object.entries(overrides)) {
+                labelRegistryStore.override(name, override);
+            }
+        },
+    };
+
+    /* color-scheme-store.svelte.ts generated by Svelte v5.46.1 */
+
+    class ColorSchemeStore {
+    	#isDark = state(false);
+
+    	get isDark() {
+    		return get(this.#isDark);
+    	}
+
+    	set isDark(value) {
+    		set(this.#isDark, value, true);
+    	}
+
+    	#mq = null;
+    	#handler = null;
+
+    	#removeListener() {
+    		if (this.#mq && this.#handler) {
+    			this.#mq.removeEventListener('change', this.#handler);
+    			this.#mq = null;
+    			this.#handler = null;
+    		}
+    	}
+
+    	init(scheme = 'light') {
+    		this.#removeListener();
+
+    		if (scheme === 'dark') {
+    			this.isDark = true;
+
+    			return;
+    		}
+
+    		if (scheme === 'auto') {
+    			if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    				// SSR or environment without matchMedia — default to light
+    				this.isDark = false;
+
+    				return;
+    			}
+
+    			this.#mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    			this.#handler = (e) => {
+    				this.isDark = e.matches;
+    			};
+
+    			this.isDark = this.#mq.matches;
+    			this.#mq.addEventListener('change', this.#handler);
+
+    			return;
+    		}
+
+    		// 'light' (default)
+    		this.isDark = false;
+    	}
+
+    	destroy() {
+    		this.#removeListener();
+    	}
+    }
+
+    const colorSchemeStore = new ColorSchemeStore();
+
     /**
      * DOM Scanner for Variable Interpolation
      *
@@ -16526,18 +16736,23 @@
 
     /* runtime.svelte.ts generated by Svelte v5.46.1 */
 
-    function stripAdaptationPlaceholders(state) {
-    	if (!state.placeholders) return state;
+    function stripSiteManaged(state) {
+    	// Strip siteManaged toggle values
+    	const siteManagedToggleIds = new Set((activeStateStore.config.toggles ?? []).filter((t) => t.siteManaged).map((t) => t.toggleId));
+
+    	const shownToggles = (state.shownToggles ?? []).filter((id) => !siteManagedToggleIds.has(id));
+    	const peekToggles = (state.peekToggles ?? []).filter((id) => !siteManagedToggleIds.has(id));
 
-    	const filtered = {};
+    	// Strip siteManaged placeholder keys
+    	const placeholders = {};
 
-    	for (const [key, value] of Object.entries(state.placeholders)) {
+    	for (const [key, value] of Object.entries(state.placeholders ?? {})) {
     		const def = placeholderRegistryStore.get(key);
 
-    		if (!def?.adaptationPlaceholder) filtered[key] = value;
+    		if (!def?.siteManaged) placeholders[key] = value;
     	}
 
-    	return { ...state, placeholders: filtered };
+    	return { ...state, shownToggles, peekToggles, placeholders };
     }
 
     /**
@@ -16565,15 +16780,12 @@
     		// Initialize adaptation store
     		adaptationStore.init(opt.adaptationConfig ?? null);
 
-    		// Store assetsManager for component access
-    		derivedStore.setAssetsManager(opt.assetsManager);
-
     		// Initial State Resolution:
-    		// URL (Sparse Override) > Persistence (Full) > Adaptation Defaults > Config Default
+    		// URL (Sparse Override) > Persistence (Full) > Adaptation Preset > Config Default
     		this.resolveInitialState(opt.adaptationConfig ?? null);
 
     		// Resolve Exclusions
-    		this.focusService = new FocusService(this.rootEl, {
+    		this.focusService = new FocusService({
     			shareExclusions: opt.configFile.config?.shareExclusions || {}
     		});
     	}
@@ -16595,6 +16807,15 @@
     		// Register tab-group placeholders AFTER global config placeholders to preserve precedence
     		placeholderManager.registerTabGroupPlaceholders(config);
 
+    		// Register label definitions
+    		labelManager.registerConfigLabels(config);
+
+    		// Initialize color scheme for site for general color resolution
+    		// Ensure any previous listeners cleaned up before re-initializing
+    		colorSchemeStore.destroy();
+
+    		colorSchemeStore.init(configFile.colorScheme ?? 'light');
+
     		// Initialize UI Options from Settings
     		uiStore.setUIOptions({
     			showTabGroups: settings.showTabGroups ?? true,
@@ -16608,7 +16829,7 @@
     	 * Resolves the starting application state by layering sources:
     	 *
     	 * 1. **Baseline**: `ActiveStateStore` initializes with defaults from the config file.
-    	 * 2. **Adaptation Defaults**: If an adaptation is active, its defaults are applied
+    	 * 2. **Adaptation Preset**: If an adaptation is active, its preset is applied
     	 *    on top of the config defaults (before persisted state, so user choices can win).
     	 * 3. **Persistence**: If local storage has a saved state, it replaces the baseline (`applyState`).
     	 * 4. **URL Overrides**: If the URL contains parameters (`?t-show=X`), these are applied
@@ -16616,9 +16837,13 @@
     	 *    retain their values from persistence/defaults.
     	 */
     	resolveInitialState(adaptationConfig) {
-    		// 1. Apply adaptation defaults on top of config defaults (before persisted state)
-    		if (adaptationConfig?.defaults) {
-    			activeStateStore.applyAdaptationDefaults(adaptationConfig.defaults);
+    		// 1. Apply adaptation preset on top of config defaults (before persisted state)
+    		if (adaptationConfig?.preset) {
+    			activeStateStore.applyAdaptationDefaults(adaptationConfig.preset);
+
+    			if (adaptationConfig.preset.labels) {
+    				labelManager.applyAdaptationOverrides(adaptationConfig.preset.labels);
+    			}
     		}
 
     		// 2. Apply persisted base state on top of defaults (user choices win over adaptation defaults).
@@ -16674,7 +16899,7 @@
     		this.destroyEffectRoot = effect_root(() => {
     			// Automatic Persistence
     			user_effect(() => {
-    				this.persistenceManager.persistState(stripAdaptationPlaceholders(activeStateStore.state));
+    				this.persistenceManager.persistState(stripSiteManaged(activeStateStore.state));
     				this.persistenceManager.persistTabNavVisibility(uiStore.isTabGroupNavHeadingVisible);
     			});
 
@@ -16745,9 +16970,9 @@
     		this.persistenceManager.clearAll();
     		activeStateStore.reset();
 
-    		// Re-apply adaptation defaults so adaptation-controlled placeholders are not wiped by reset.
-    		if (adaptationStore.activeConfig?.defaults) {
-    			activeStateStore.applyAdaptationDefaults(adaptationStore.activeConfig.defaults);
+    		// Re-apply adaptation preset so adaptation-controlled placeholders are not wiped by reset.
+    		if (adaptationStore.activeConfig?.preset) {
+    			activeStateStore.applyAdaptationDefaults(adaptationStore.activeConfig.preset);
     		}
 
     		uiStore.reset();
@@ -16758,6 +16983,7 @@
     		this.observer?.disconnect();
     		this.destroyEffectRoot?.();
     		this.focusService.destroy();
+    		colorSchemeStore.destroy();
 
     		if (this.onHashChange) {
     			window.removeEventListener('hashchange', this.onHashChange);
@@ -16765,52 +16991,6 @@
     	}
     }
 
-    class AssetsManager {
-        assets;
-        baseURL;
-        constructor(assets, baseURL = '') {
-            this.assets = assets;
-            this.baseURL = baseURL;
-            if (!this.validate()) {
-                console.warn('Invalid assets:', this.assets);
-            }
-        }
-        // Check each asset has content or src
-        validate() {
-            return Object.values(this.assets).every((a) => a.src || a.content);
-        }
-        get(assetId) {
-            const asset = this.assets[assetId];
-            if (!asset)
-                return undefined;
-            // If there's a baseURL and the asset has a src property, prepend the baseURL
-            if (this.baseURL && asset.src) {
-                // Create a shallow copy to avoid mutating the original asset
-                return {
-                    ...asset,
-                    src: this.prependBaseURL(asset.src),
-                };
-            }
-            return asset;
-        }
-        prependBaseURL(path) {
-            // Don't prepend if the path is already absolute (starts with http:// or https://)
-            if (path.startsWith('http://') || path.startsWith('https://')) {
-                return path;
-            }
-            // Ensure baseURL doesn't end with / and path starts with /
-            const cleanBaseURL = this.baseURL.endsWith('/') ? this.baseURL.slice(0, -1) : this.baseURL;
-            const cleanPath = path.startsWith('/') ? path : '/' + path;
-            return cleanBaseURL + cleanPath;
-        }
-        loadFromJSON(json) {
-            this.assets = json;
-        }
-        loadAdditionalAssets(additionalAssets) {
-            this.assets = { ...this.assets, ...additionalAssets };
-        }
-    }
-
     var root$7 = from_svg(`<svg><polyline points="6 9 12 15 18 9"></polyline></svg>`);
 
     function IconChevronDown($$anchor, $$props) {
@@ -16853,86 +17033,9 @@
     	append($$anchor, svg);
     }
 
-    /** --- Basic renderers --- */
-    function renderImage(el, asset) {
-        if (!asset.src)
-            return;
-        el.innerHTML = '';
-        const img = document.createElement('img');
-        img.src = asset.src;
-        img.alt = asset.alt || '';
-        // Apply custom styling if provided
-        if (asset.className) {
-            img.className = asset.className;
-        }
-        if (asset.style) {
-            img.setAttribute('style', asset.style);
-        }
-        // Default styles (can be overridden by asset.style)
-        img.style.maxWidth = img.style.maxWidth || '100%';
-        img.style.height = img.style.height || 'auto';
-        img.style.display = img.style.display || 'block';
-        el.appendChild(img);
-    }
-    function renderText(el, asset) {
-        if (asset.content != null) {
-            el.textContent = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    function renderHtml(el, asset) {
-        if (asset.content != null) {
-            el.innerHTML = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    /** --- Unified asset renderer --- */
-    function detectAssetType(asset) {
-        // If src exists, it's an image
-        if (asset.src)
-            return 'image';
-        // If content contains HTML tags, it's HTML
-        if (asset.content && /<[^>]+>/.test(asset.content)) {
-            return 'html';
-        }
-        return 'text';
-    }
-    function renderAssetInto(el, assetId, assetsManager) {
-        const asset = assetsManager.get(assetId);
-        if (!asset)
-            return;
-        const type = asset.type || detectAssetType(asset);
-        switch (type) {
-            case 'image':
-                renderImage(el, asset);
-                break;
-            case 'text':
-                renderText(el, asset);
-                break;
-            case 'html':
-                renderHtml(el, asset);
-                break;
-            default:
-                el.innerHTML = asset.content || String(asset);
-                console.warn('[Custard] Unknown asset type:', type);
-        }
-    }
-
     var root_2$2 = from_html(`<span class="cv-placeholder-label svelte-1ka2eec"> </span>`);
     var root_3$1 = from_html(`<button type="button"></button>`);
-    var root_1$3 = from_html(`<div class="cv-toggle-placeholder svelte-1ka2eec" role="group"><!> <div class="cv-state-dots svelte-1ka2eec" role="group" aria-label="Visibility states"></div></div>`);
+    var root_1$4 = from_html(`<div class="cv-toggle-placeholder svelte-1ka2eec" role="group"><!> <div class="cv-state-dots svelte-1ka2eec" role="group" aria-label="Visibility states"></div></div>`);
     var root_4 = from_html(`<div class="cv-toggle-label svelte-1ka2eec"> </div>`);
     var root_6 = from_html(`<button type="button"></button>`);
     var root_5 = from_html(`<div class="cv-state-dots cv-state-dots--floating svelte-1ka2eec" role="group" aria-label="Visibility states"></div>`);
@@ -16941,18 +17044,17 @@
     var root_7 = from_html(`<button type="button" class="cv-expand-btn svelte-1ka2eec"><!></button>`);
     var root$5 = from_html(`<!> <div><!> <!> <div class="cv-toggle-content svelte-1ka2eec"><div class="cv-toggle-inner svelte-1ka2eec"><!></div></div> <!></div>`, 1);
 
-    const $$css$6 = {
+    const $$css$7 = {
     	hash: 'svelte-1ka2eec',
     	code: ':host {display:block;position:relative;z-index:1;overflow:visible;}\n\n  /* Host visibility control */:host([hidden]) {display:none;}.cv-toggle-wrapper.svelte-1ka2eec {position:relative;width:100%;transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:4px;}.cv-toggle-wrapper.hidden.svelte-1ka2eec {margin-bottom:0;}.cv-toggle-wrapper.peek-mode.svelte-1ka2eec {margin-bottom:28px;}.cv-toggle-content.svelte-1ka2eec {overflow:hidden;transition:max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 0.3s ease,\n      overflow 0s 0s;}.cv-toggle-inner.svelte-1ka2eec {display:flow-root; /* Ensures margins of children are contained */}\n\n  /* Hidden State */.hidden.svelte-1ka2eec .cv-toggle-content:where(.svelte-1ka2eec) {opacity:0;pointer-events:none;}\n\n  /* Bordered State */.has-border.svelte-1ka2eec {box-sizing:border-box;border:2px dashed rgba(0, 0, 0, 0.15);border-bottom:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05),\n      inset 0 -15px 10px -10px rgba(0, 0, 0, 0.1);border-radius:8px 8px 0 0;padding:12px 0 0 0;margin-top:4px;}\n\n  /* Visible / Expanded State */.expanded.svelte-1ka2eec .cv-toggle-content:where(.svelte-1ka2eec) {opacity:1;transform:translateY(0);overflow:visible;transition:max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 0.3s ease,\n      overflow 0s 0.35s;}\n\n  /* When expanded, complete the border */.has-border.expanded.svelte-1ka2eec {border-bottom:2px dashed rgba(0, 0, 0, 0.15);border-radius:8px;padding-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05);}\n\n  /* Peek State — smoother gradient */.peeking.svelte-1ka2eec .cv-toggle-content:where(.svelte-1ka2eec) {opacity:1;mask-image:linear-gradient(to bottom, black 30%, rgba(0,0,0,0.5) 70%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 30%, rgba(0,0,0,0.5) 70%, transparent 100%);}\n\n  /* Label Style */.cv-toggle-label.svelte-1ka2eec {position:absolute;top:-12px;left:0;background:#e0e0e0;color:#333;font-size:0.75rem;font-weight:600;padding:2px 8px;border-radius:4px;z-index:10;pointer-events:auto;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);}\n\n  /* Adjust label position if bordered */.has-border.svelte-1ka2eec .cv-toggle-label:where(.svelte-1ka2eec) {top:-10px;left:0;}\n\n  /* Hidden-state placeholder bar */.cv-toggle-placeholder.svelte-1ka2eec {display:flex;align-items:center;justify-content:space-between;padding:4px 8px;min-height:24px;border:1px solid rgba(0, 0, 0, 0.06);border-radius:6px;background:rgba(0, 0, 0, 0.015);margin-bottom:4px;transition:border-color 0.2s ease, background 0.2s ease;}.cv-toggle-placeholder.svelte-1ka2eec:hover {border-color:rgba(0, 0, 0, 0.12);background:rgba(0, 0, 0, 0.025);}.cv-placeholder-label.svelte-1ka2eec {font-size:0.7rem;font-weight:500;color:rgba(0, 0, 0, 0.35);letter-spacing:0.02em;user-select:none;}\n\n  /* 3-dot state indicator */.cv-state-dots.svelte-1ka2eec {display:flex;align-items:center;gap:5px;}\n\n  /* Floating position (top-right of content) */.cv-state-dots--floating.svelte-1ka2eec {position:absolute;top:-2px;right:0;z-index:10;opacity:0;transition:opacity 0.2s ease;}.cv-toggle-wrapper.svelte-1ka2eec:hover .cv-state-dots--floating:where(.svelte-1ka2eec),\n  .cv-state-dots--floating.svelte-1ka2eec:focus-within {opacity:1;}\n\n  /* Adjust floating dots when bordered */.has-border.svelte-1ka2eec .cv-state-dots--floating:where(.svelte-1ka2eec) {top:4px;right:8px;}.cv-dot.svelte-1ka2eec {position:relative;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(0, 0, 0, 0.2);background:transparent;padding:0;cursor:pointer;transition:all 0.15s ease;flex-shrink:0;}\n\n  /* Expand tap target to ~20px while keeping dot visually small */.cv-dot.svelte-1ka2eec::before {content:\'\';position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%, -50%);border-radius:50%;}.cv-dot.svelte-1ka2eec:hover {border-color:rgba(0, 0, 0, 0.5);transform:scale(1.3);}.cv-dot.active.svelte-1ka2eec {background:var(--cv-primary, #3E84F4);border-color:var(--cv-primary, #3E84F4);}.cv-dot.active.svelte-1ka2eec:hover {transform:scale(1.3);}\n\n  /* Expand Button — upgraded to pill style */.cv-expand-btn.svelte-1ka2eec {position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(0, 0, 0, 0.04);border:1px solid rgba(0, 0, 0, 0.08);border-radius:999px;padding:3px 12px;cursor:pointer;z-index:100;color:#666;font-size:0.7rem;font-weight:500;font-family:inherit;line-height:1;transition:all 0.2s ease;}.cv-expand-btn.svelte-1ka2eec:hover {background:rgba(0, 0, 0, 0.08);border-color:rgba(0, 0, 0, 0.15);color:#333;transform:translateX(-50%) scale(1.02);}.cv-expand-btn.svelte-1ka2eec svg {display:block;width:14px;height:14px;opacity:0.6;flex-shrink:0;}.cv-expand-btn.svelte-1ka2eec:hover svg {opacity:1;}.cv-expand-label.svelte-1ka2eec {white-space:nowrap;}'
     };
 
     function Toggle($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$6);
+    	append_styles$1($$anchor, $$css$7);
 
     	// Props using Svelte 5 runes
     	let toggleId = prop($$props, 'toggleId', 7, ''),
-    		assetId = prop($$props, 'assetId', 7, ''),
     		showPeekBorder = prop($$props, 'showPeekBorder', 7, false),
     		showLabel = prop($$props, 'showLabel', 7, false),
     		showInlineControl = prop($$props, 'showInlineControl', 7, false),
@@ -16993,6 +17095,8 @@
     		if (placeholderId()) elementStore.registerPlaceholder(get(placeholderName));
     	});
 
+    	let isSiteManaged = user_derived(() => get(toggleConfig)?.siteManaged ?? false);
+
     	// Derive label text from config
     	let labelText = user_derived(() => {
     		if (!get(toggleConfig)) return '';
@@ -17002,7 +17106,6 @@
 
     	let localExpanded = state(false);
     	let isUnconstrained = state(false /* New state to track if we can release max-height */);
-    	let hasRendered = state(false);
     	let contentEl;
     	let innerEl;
     	let scrollHeight = state(0);
@@ -17121,14 +17224,6 @@
     		get(toggleIds).forEach((id) => activeStateStore.updateToggleState(id, targetState));
     	}
 
-    	// Reactive asset rendering - renders assets when toggle becomes visible
-    	user_effect(() => {
-    		if (get(showFullContent) && assetId() && !get(hasRendered) && derivedStore.assetsManager && contentEl) {
-    			renderAssetInto(contentEl, assetId(), derivedStore.assetsManager);
-    			set(hasRendered, true);
-    		}
-    	});
-
     	var $$exports = {
     		get toggleId() {
     			return toggleId();
@@ -17139,15 +17234,6 @@
     			flushSync();
     		},
 
-    		get assetId() {
-    			return assetId();
-    		},
-
-    		set assetId($$value = '') {
-    			assetId($$value);
-    			flushSync();
-    		},
-
     		get showPeekBorder() {
     			return showPeekBorder();
     		},
@@ -17190,7 +17276,7 @@
 
     	{
     		var consequent_1 = ($$anchor) => {
-    			var div = root_1$3();
+    			var div = root_1$4();
     			var node_1 = child(div);
 
     			{
@@ -17238,7 +17324,7 @@
     		};
 
     		if_block(node, ($$render) => {
-    			if (showInlineControl() && !get(isPlaceholderMode) && get(isHidden)) $$render(consequent_1);
+    			if (showInlineControl() && !get(isPlaceholderMode) && !get(isSiteManaged) && get(isHidden)) $$render(consequent_1);
     		});
     	}
 
@@ -17293,7 +17379,7 @@
     		};
 
     		if_block(node_3, ($$render) => {
-    			if (showInlineControl() && !get(isPlaceholderMode) && !get(isHidden)) $$render(consequent_3);
+    			if (showInlineControl() && !get(isPlaceholderMode) && !get(isSiteManaged) && !get(isHidden)) $$render(consequent_3);
     		});
     	}
 
@@ -17361,7 +17447,7 @@
     			'peek-mode': get(peekState),
     			hidden: get(isHidden),
     			'has-border': showPeekBorder() && get(peekState),
-    			'has-inline-control': showInlineControl() && !get(isPlaceholderMode)
+    			'has-inline-control': showInlineControl() && !get(isPlaceholderMode) && !get(isSiteManaged)
     		});
 
     		styles = set_style(div_5, '', styles, { 'max-height': get(currentMaxHeight) });
@@ -17379,7 +17465,6 @@
     	Toggle,
     	{
     		toggleId: { attribute: 'toggle-id', reflect: true, type: 'String' },
-    		assetId: { attribute: 'asset-id', reflect: true, type: 'String' },
 
     		showPeekBorder: {
     			attribute: 'show-peek-border',
@@ -17404,14 +17489,14 @@
 
     var root$4 = from_html(`<div><!></div>`);
 
-    const $$css$5 = {
+    const $$css$6 = {
     	hash: 'svelte-8qj5x2',
     	code: ':host {display:block;}:host(.cv-hidden) {display:none !important;}:host(.cv-visible) {display:block !important;}:host([active=\'true\']) {display:block;}.cv-tab-content.svelte-8qj5x2 {display:none;\n    animation: svelte-8qj5x2-fade-in 0.2s ease-in-out;padding-top:1rem;padding-bottom:0.5rem;padding-left:0;padding-right:0;}.cv-tab-content.active.svelte-8qj5x2 {display:block;}\n\n  /* Hide cv-tab-header source element; content is extracted to nav link */.svelte-8qj5x2::slotted(cv-tab-header) {display:none !important;}\n\n  /* Allow cv-tab-body to flow naturally */.svelte-8qj5x2::slotted(cv-tab-body) {display:block;}\n\n  @keyframes svelte-8qj5x2-fade-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }'
     };
 
     function Tab($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$5);
+    	append_styles$1($$anchor, $$css$6);
 
     	// Props using Svelte 5 runes
     	// tabId and header are used in TabGroup directly.
@@ -17453,7 +17538,7 @@
     	true
     ));
 
-    var root_1$2 = from_svg(`<path d="M4 2v13l4-2.5L12 15V2H4z"></path>`);
+    var root_1$3 = from_svg(`<path d="M4 2v13l4-2.5L12 15V2H4z"></path>`);
     var root_2$1 = from_svg(`<path d="M4 2v13l4-2.5L12 15V2H4zm1 1h6v10.5l-3-1.88L5 13.5V3z"></path>`);
     var root$3 = from_svg(`<svg><!></svg>`);
 
@@ -17480,7 +17565,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var path = root_1$2();
+    			var path = root_1$3();
 
     			append($$anchor, path);
     		};
@@ -17501,18 +17586,18 @@
     }
 
     var root_2 = from_html(`<li class="cv-tabgroup-item svelte-1ujqpe3"><div><a role="tab" title="Double-click a tab to 'mark' it in all similar tab groups."><span class="cv-tab-header-text svelte-1ujqpe3"><!></span></a> <button type="button"><!></button></div></li>`);
-    var root_1$1 = from_html(`<ul class="cv-tabgroup-nav svelte-1ujqpe3" role="tablist"></ul>`);
+    var root_1$2 = from_html(`<ul class="cv-tabgroup-nav svelte-1ujqpe3" role="tablist"></ul>`);
     var root_3 = from_html(`<link rel="stylesheet"/>`);
     var root$2 = from_html(`<div class="cv-tabgroup-container"><!> <!> <div class="cv-tabgroup-content"><!></div> <div class="cv-tabgroup-bottom-border svelte-1ujqpe3"></div></div>`);
 
-    const $$css$4 = {
+    const $$css$5 = {
     	hash: 'svelte-1ujqpe3',
     	code: ':host {display:block;margin-bottom:24px;}\n\n  /* Tab navigation styles */ul.cv-tabgroup-nav.svelte-1ujqpe3 {display:flex;flex-wrap:wrap;padding-left:0;margin-top:0.5rem;margin-bottom:0;list-style:none;border-bottom:1px solid var(--cv-border, rgba(128, 128, 128, 0.3));align-items:stretch;gap:0.5rem;}.cv-tabgroup-item.svelte-1ujqpe3 {margin-bottom:-1px;list-style:none;display:flex;align-items:stretch;}.cv-tabgroup-link.svelte-1ujqpe3 {display:flex;align-items:center;justify-content:center;padding:0.5rem 0.75rem;color:inherit;opacity:0.7;text-decoration:none;background-color:transparent !important;border:none;border-bottom:2px solid transparent;transition:opacity 0.15s ease-in-out,\n      border-color 0.15s ease-in-out;cursor:pointer;min-height:2.5rem;box-sizing:border-box;font-weight:500;}.cv-tabgroup-link.svelte-1ujqpe3 p {margin:0;display:inline;}.cv-tabgroup-link.svelte-1ujqpe3:hover,\n  .cv-tabgroup-link.svelte-1ujqpe3:focus {opacity:1;border-bottom-color:var(--cv-border, rgba(128, 128, 128, 0.3));isolation:isolate;}.cv-tabgroup-link.active.svelte-1ujqpe3 {opacity:1;background-color:transparent !important;}.cv-tabgroup-link.svelte-1ujqpe3:focus {outline:0;}.cv-tab-wrapper.svelte-1ujqpe3 {display:flex;align-items:center;border-bottom:2px solid transparent;transition:border-color 0.15s ease-in-out;}.cv-tab-wrapper.svelte-1ujqpe3:hover,\n  .cv-tab-wrapper.svelte-1ujqpe3:focus-within {border-bottom-color:var(--cv-border, rgba(128, 128, 128, 0.3));}.cv-tab-wrapper.active.svelte-1ujqpe3 {border-bottom-color:currentColor;}.cv-tab-header-text.svelte-1ujqpe3 {line-height:1;}.cv-tab-marked-icon.svelte-1ujqpe3 {display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0;opacity:0;transition:opacity 0.15s ease-out;background:none;border:none;padding:0 8px 0 0;margin:0;cursor:pointer;color:inherit;height:100%;}.cv-tab-wrapper.svelte-1ujqpe3:hover .cv-tab-marked-icon:where(.svelte-1ujqpe3),\n  .cv-tab-wrapper.svelte-1ujqpe3:focus-within .cv-tab-marked-icon:where(.svelte-1ujqpe3),\n  .cv-tab-marked-icon.is-marked.svelte-1ujqpe3 {opacity:1;}.cv-tab-marked-icon.svelte-1ujqpe3 svg {vertical-align:middle;width:14px;height:14px;}.cv-tabgroup-bottom-border.svelte-1ujqpe3 {border-bottom:1px solid var(--cv-border, rgba(128, 128, 128, 0.3));}\n\n  @media print {ul.cv-tabgroup-nav.svelte-1ujqpe3 {display:none !important;}\n  }'
     };
 
     function TabGroup($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$4);
+    	append_styles$1($$anchor, $$css$5);
 
     	//  ID of the tabgroup Group
     	let groupId = prop($$props, 'groupId', 7),
@@ -17745,7 +17830,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var ul = root_1$1();
+    			var ul = root_1$2();
 
     			each(ul, 21, () => get(tabs), (tab) => tab.id, ($$anchor, tab) => {
     				const splitIds = user_derived(() => splitTabIds(get(tab).rawId));
@@ -17855,13 +17940,13 @@
     	true
     ));
 
-    const $$css$3 = {
+    const $$css$4 = {
     	hash: 'svelte-1hl11lz',
     	code: ':host {display:none; /* Semantic container only, usually read by parent and hidden */}'
     };
 
     function TabHeader($$anchor, $$props) {
-    	append_styles$1($$anchor, $$css$3);
+    	append_styles$1($$anchor, $$css$4);
 
     	var fragment = comment();
     	var node = first_child(fragment);
@@ -17873,10 +17958,10 @@
 
     customElements.define('cv-tab-header', create_custom_element(TabHeader, {}, ['default'], [], true));
 
-    const $$css$2 = { hash: 'svelte-eizj8y', code: ':host {display:block;}' };
+    const $$css$3 = { hash: 'svelte-eizj8y', code: ':host {display:block;}' };
 
     function TabBody($$anchor, $$props) {
-    	append_styles$1($$anchor, $$css$2);
+    	append_styles$1($$anchor, $$css$3);
 
     	var fragment = comment();
     	var node = first_child(fragment);
@@ -17889,11 +17974,11 @@
     customElements.define('cv-tab-body', create_custom_element(TabBody, {}, ['default'], [], true));
 
     var root$1 = from_html(`<span class="cv-var"> </span>`);
-    const $$css$1 = { hash: 'svelte-1tffxwo', code: ':host {display:inline;}' };
+    const $$css$2 = { hash: 'svelte-1tffxwo', code: ':host {display:inline;}' };
 
     function Placeholder($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css$1);
+    	append_styles$1($$anchor, $$css$2);
 
     	let name = prop($$props, 'name', 7),
     		fallback = prop($$props, 'fallback', 7),
@@ -18017,17 +18102,17 @@
     	true
     ));
 
-    var root_1 = from_html(`<label class="placeholder-label svelte-dpk3ag"> </label>`);
+    var root_1$1 = from_html(`<label class="placeholder-label svelte-dpk3ag"> </label>`);
     var root = from_html(`<div><!> <input type="text"/></div>`);
 
-    const $$css = {
+    const $$css$1 = {
     	hash: 'svelte-dpk3ag',
     	code: ':host {display:inline-block;width:auto;margin:0 0.25rem; /* Add breathing room for inline text */}\n\n  /* Host display overrides based on layout */:host([layout=\'stacked\']),\n  :host([layout=\'horizontal\']) {display:block;width:100%;margin:0 0 0.5rem 0; /* Reset margins for block layouts */}\n  \n  /* Wrapper Grid/Flex Layouts */.cv-input-wrapper.svelte-dpk3ag {display:flex;width:100%;box-sizing:border-box;}\n\n  /* INLINE */.cv-input-wrapper.inline.svelte-dpk3ag {display:inline-block;width:auto;}\n\n  /* STACKED */.cv-input-wrapper.stacked.svelte-dpk3ag {flex-direction:column;gap:0.25rem;}\n\n  /* HORIZONTAL */.cv-input-wrapper.horizontal.svelte-dpk3ag {flex-direction:row;align-items:center;gap:0.75rem;}\n\n  /* Label Styles */.placeholder-label.svelte-dpk3ag {font-size:0.85rem;font-weight:500;color:var(--cv-text, #333);white-space:nowrap;}.stacked.svelte-dpk3ag .placeholder-label:where(.svelte-dpk3ag) {margin-bottom:2px;width:100%; /* Ensure label context is full width */text-align:left; /* Reset text align */}\n\n  /* Input Styles */.placeholder-input.svelte-dpk3ag {padding:0.5rem 0.75rem;border:1px solid var(--cv-input-border, rgba(0, 0, 0, 0.1));border-radius:0.375rem;font-size:0.9rem;transition:all 0.2s;background:var(--cv-input-bg, white);color:var(--cv-text, #333);box-sizing:border-box;width:100%;}.stacked.svelte-dpk3ag .placeholder-input:where(.svelte-dpk3ag) {width:100%;}.inline.svelte-dpk3ag .placeholder-input:where(.svelte-dpk3ag) {width:var(--cv-input-width, auto);padding:0.3rem 0.5rem;display:inline-block;text-align:center;}.horizontal.svelte-dpk3ag .placeholder-input:where(.svelte-dpk3ag) {width:var(--cv-input-width, auto);flex:1;}\n\n  /* APPEARANCES */\n  \n  /* Outline (Default) - handled by base styles above */\n\n  /* Underline */.placeholder-input.underline.svelte-dpk3ag {border:none;border-bottom:1px solid var(--cv-input-border, rgba(0, 0, 0, 0.2));border-radius:0;background:transparent;padding-left:0;padding-right:0;}.placeholder-input.underline.svelte-dpk3ag:focus {box-shadow:none;border-bottom-color:var(--cv-primary, #3e84f4);}\n\n  /* Ghost */.placeholder-input.ghost.svelte-dpk3ag {border-color:transparent;background:transparent;}.placeholder-input.ghost.svelte-dpk3ag:hover {background:var(--cv-input-bg-hover, rgba(0,0,0,0.05));}.placeholder-input.ghost.svelte-dpk3ag:focus {background:var(--cv-input-bg, white);border-color:var(--cv-primary, #3e84f4);box-shadow:0 0 0 2px var(--cv-focus-ring, rgba(62, 132, 244, 0.2));}\n\n  /* Focus states for standard inputs */.placeholder-input.svelte-dpk3ag:not(.underline):focus {outline:none;border-color:var(--cv-primary, #3e84f4);box-shadow:0 0 0 2px var(--cv-focus-ring, rgba(62, 132, 244, 0.2));}'
     };
 
     function PlaceholderInput($$anchor, $$props) {
     	push($$props, true);
-    	append_styles$1($$anchor, $$css);
+    	append_styles$1($$anchor, $$css$1);
 
     	let name = prop($$props, 'name', 7),
     		label = prop($$props, 'label', 7),
@@ -18139,7 +18224,7 @@
 
     	{
     		var consequent = ($$anchor) => {
-    			var label_1 = root_1();
+    			var label_1 = root_1$1();
     			var text = child(label_1, true);
 
     			reset(label_1);
@@ -18200,6 +18285,178 @@
     	true
     ));
 
+    /**
+     * Single-letter shorthand color aliases.
+     * Each maps to a light-theme and dark-theme hex value.
+     */
+    const SHORTHAND_COLORS = {
+        r: { light: '#fca5a5', dark: '#dc2626' }, // Pale red / Deep red
+        g: { light: '#4ade80', dark: '#16a34a' }, // Neon green / Forest green
+        b: { light: '#93c5fd', dark: '#2563eb' }, // Light blue / Royal blue
+        c: { light: '#67e8f9', dark: '#0d9488' }, // Aqua cyan / Teal cyan
+        m: { light: '#f0abfc', dark: '#a21caf' }, // Bright magenta / Deep magenta
+        y: { light: '#fde047', dark: '#92400e' }, // Bright yellow / Golden yellow
+        w: { light: '#f1f5f9', dark: '#94a3b8' }, // White / Silver grey
+        k: { light: '#e2e8f0', dark: '#0f172a' }, // Light grey / Pure black
+    };
+    /**
+     * Resolves a color value, expanding single-letter shorthands to hex.
+     * Pass `isDark=true` to get the dark-theme variant of a shorthand.
+     * Non-shorthand values are returned unchanged.
+     */
+    function resolveColor(color, isDark) {
+        const trimmed = color.trim();
+        const entry = SHORTHAND_COLORS[trimmed];
+        if (entry)
+            return isDark ? entry.dark : entry.light;
+        return trimmed;
+    }
+    /**
+     * Computes a contrasting text color (black or white) for a given background color.
+     * Supports #rrggbb and #rgb hex strings. Falls back to white for non-hex inputs.
+     */
+    function computeTextColor(bgColor) {
+        const hex = bgColor.replace(/^#/, '');
+        let r, g, b;
+        if (hex.length === 3) {
+            r = parseInt((hex[0] ?? '') + (hex[0] ?? ''), 16);
+            g = parseInt((hex[1] ?? '') + (hex[1] ?? ''), 16);
+            b = parseInt((hex[2] ?? '') + (hex[2] ?? ''), 16);
+        }
+        else if (hex.length === 6) {
+            r = parseInt(hex.slice(0, 2), 16);
+            g = parseInt(hex.slice(2, 4), 16);
+            b = parseInt(hex.slice(4, 6), 16);
+        }
+        else {
+            return '#ffffff';
+        }
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
+
+    var root_1 = from_html(`<span class="cv-label svelte-10fc57e"><!></span>`);
+
+    const $$css = {
+    	hash: 'svelte-10fc57e',
+    	code: ':host {display:inline;}.cv-label.svelte-10fc57e {display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:0.75em;font-weight:600;white-space:nowrap;line-height:1.5;letter-spacing:0.02em;vertical-align:middle;}'
+    };
+
+    function Label($$anchor, $$props) {
+    	push($$props, true);
+    	append_styles$1($$anchor, $$css);
+
+    	let name = prop($$props, 'name', 7, ''),
+    		color = prop($$props, 'color', 7, '');
+
+    	const DEFAULT_COLOR = '#6b7280';
+    	let hasSlotContent = state(false);
+
+    	user_effect(() => {
+    		const host = $$props.$$host;
+
+    		function update() {
+    			set(hasSlotContent, Array.from(host.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent?.trim() ?? '') !== ''), true);
+    		}
+
+    		update();
+
+    		const observer = new MutationObserver(update);
+
+    		observer.observe(host, { childList: true, characterData: true, subtree: true });
+
+    		return () => observer.disconnect();
+    	});
+
+    	let labelDef = user_derived(() => labelRegistryStore.get(name()));
+    	let rawColor = user_derived(() => get(labelDef)?.color ?? (color() || DEFAULT_COLOR));
+    	let bgColor = user_derived(() => resolveColor(get(rawColor), colorSchemeStore.isDark));
+    	let textColor = user_derived(() => computeTextColor(get(bgColor)));
+
+    	var $$exports = {
+    		get name() {
+    			return name();
+    		},
+
+    		set name($$value = '') {
+    			name($$value);
+    			flushSync();
+    		},
+
+    		get color() {
+    			return color();
+    		},
+
+    		set color($$value = '') {
+    			color($$value);
+    			flushSync();
+    		}
+    	};
+
+    	var fragment = comment();
+    	var node = first_child(fragment);
+
+    	{
+    		var consequent_1 = ($$anchor) => {
+    			var span = root_1();
+    			let styles;
+    			var node_1 = child(span);
+
+    			{
+    				var consequent = ($$anchor) => {
+    					var text$1 = text();
+
+    					template_effect(() => set_text(text$1, get(labelDef).value));
+    					append($$anchor, text$1);
+    				};
+
+    				var alternate = ($$anchor) => {
+    					var fragment_2 = comment();
+    					var node_2 = first_child(fragment_2);
+
+    					slot(node_2, $$props, 'default', {});
+    					append($$anchor, fragment_2);
+    				};
+
+    				if_block(node_1, ($$render) => {
+    					if (get(labelDef)?.value) $$render(consequent); else $$render(alternate, false);
+    				});
+    			}
+
+    			reset(span);
+    			template_effect(() => styles = set_style(span, '', styles, { background: get(bgColor), color: get(textColor) }));
+    			append($$anchor, span);
+    		};
+
+    		var alternate_1 = ($$anchor) => {
+    			var fragment_3 = comment();
+    			var node_3 = first_child(fragment_3);
+
+    			slot(node_3, $$props, 'default', {});
+    			append($$anchor, fragment_3);
+    		};
+
+    		if_block(node, ($$render) => {
+    			if (get(labelDef)?.value || get(hasSlotContent)) $$render(consequent_1); else $$render(alternate_1, false);
+    		});
+    	}
+
+    	append($$anchor, fragment);
+
+    	return pop($$exports);
+    }
+
+    customElements.define('cv-label', create_custom_element(
+    	Label,
+    	{
+    		name: { attribute: 'name', reflect: true, type: 'String' },
+    		color: { attribute: 'color', reflect: true, type: 'String' }
+    	},
+    	['default'],
+    	[],
+    	true
+    ));
+
     // --- No Public API Exports ---
     // The script auto-initializes via initializeFromScript().
     /**
@@ -18225,7 +18482,7 @@
                 // Fetch Config first to retrieve storageKey prefix
                 const configFile = await fetchConfig(configPath, baseURL);
                 // Determine effective baseURL (data attribute takes precedence)
-                const effectiveBaseURL = baseURL || configFile.baseUrl || '';
+                const effectiveBaseURL = baseURL;
                 // Initialize Adaptation early (before AppRuntime):
                 // - Theme CSS injected ASAP (FOUC prevention)
                 // - ?adapt= param cleaned before URLStateManager.parseURL() runs
@@ -18234,24 +18491,7 @@
                 if (adaptationConfig?.id) {
                     AdaptationManager.rewriteUrlIndicator(adaptationConfig.id);
                 }
-                // Initialize Assets
-                let assetsManager;
-                if (configFile.assetsJsonPath) {
-                    const assetsPath = prependBaseUrl(configFile.assetsJsonPath, effectiveBaseURL);
-                    try {
-                        const assetsJson = await (await fetch(assetsPath)).json();
-                        assetsManager = new AssetsManager(assetsJson, effectiveBaseURL);
-                    }
-                    catch (error) {
-                        console.error(`[Custard] Failed to load assets JSON from ${assetsPath}:`, error);
-                        assetsManager = new AssetsManager({}, effectiveBaseURL);
-                    }
-                }
-                else {
-                    assetsManager = new AssetsManager({}, effectiveBaseURL);
-                }
                 const coreOptions = {
-                    assetsManager,
                     configFile,
                     rootEl: document.body,
                     storageKey: configFile.storageKey,