@customviews-js/customviews 1.4.1-beta.2 → 1.4.1-beta.4

package/dist/custom-views.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.4.1-beta.2
+ * @customviews-js/customviews v1.4.1-beta.4
  * (c) 2026 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -7162,6 +7162,26 @@ function get_binding_group_value(group, __value, checked) {
 	return Array.from(value);
 }
 
+/**
+ * Makes an `export`ed (non-prop) variable available on the `$$props` object
+ * so that consumers can do `bind:x` on the component.
+ * @template V
+ * @param {Record<string, unknown>} props
+ * @param {string} prop
+ * @param {V} value
+ * @returns {void}
+ */
+function bind_prop(props, prop, value) {
+	var desc = get_descriptor(props, prop);
+
+	if (desc && desc.set) {
+		props[prop] = value;
+		teardown(() => {
+			props[prop] = null;
+		});
+	}
+}
+
 /**
  * @param {any} bound_value
  * @param {Element} element_or_component
@@ -9387,31 +9407,58 @@ class CustomViewsCore {
 	}
 }
 
-enable_legacy_mode_flag();
-
-var root$a = from_html(`<div role="button" tabindex="0" aria-label="Open Custom Views">⚙</div>`);
+var root$a = from_html(`<div><div role="alert"><button class="close-btn svelte-1jgbyi0" aria-label="Dismiss intro">×</button> <p class="text svelte-1jgbyi0"> </p></div></div>`);
 
 const $$css$e = {
-	hash: 'svelte-1k25pvs',
-	code: '.cv-widget-icon.svelte-1k25pvs {position:fixed;background:rgba(255, 255, 255, 0.92);color:rgba(0, 0, 0, 0.9);opacity:0.6;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;cursor:pointer;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);z-index:9998;transition:all 0.3s ease;font-family:-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;}.cv-widget-icon.svelte-1k25pvs:hover {background:rgba(255, 255, 255, 1);color:rgba(0, 0, 0, 1);opacity:1;}\n\n  /* Top-right */.cv-widget-top-right.svelte-1k25pvs {top:20px;right:0;border-radius:18px 0 0 18px;padding-left:8px;justify-content:flex-start;}\n\n  /* Top-left */.cv-widget-top-left.svelte-1k25pvs {top:20px;left:0;border-radius:0 18px 18px 0;padding-right:8px;justify-content:flex-end;}\n\n  /* Bottom-right */.cv-widget-bottom-right.svelte-1k25pvs {bottom:20px;right:0;border-radius:18px 0 0 18px;padding-left:8px;justify-content:flex-start;}\n\n  /* Bottom-left */.cv-widget-bottom-left.svelte-1k25pvs {bottom:20px;left:0;border-radius:0 18px 18px 0;padding-right:8px;justify-content:flex-end;}\n\n  /* Middle-left */.cv-widget-middle-left.svelte-1k25pvs {top:50%;left:0;transform:translateY(-50%);border-radius:0 18px 18px 0;padding-right:8px;justify-content:flex-end;}\n\n  /* Middle-right */.cv-widget-middle-right.svelte-1k25pvs {top:50%;right:0;transform:translateY(-50%);border-radius:18px 0 0 18px;padding-left:8px;justify-content:flex-start;}.cv-widget-top-right.svelte-1k25pvs,\n  .cv-widget-middle-right.svelte-1k25pvs,\n  .cv-widget-bottom-right.svelte-1k25pvs,\n  .cv-widget-top-left.svelte-1k25pvs,\n  .cv-widget-middle-left.svelte-1k25pvs,\n  .cv-widget-bottom-left.svelte-1k25pvs {height:36px;width:36px;}.cv-widget-middle-right.svelte-1k25pvs:hover,\n  .cv-widget-top-right.svelte-1k25pvs:hover,\n  .cv-widget-bottom-right.svelte-1k25pvs:hover,\n  .cv-widget-top-left.svelte-1k25pvs:hover,\n  .cv-widget-middle-left.svelte-1k25pvs:hover,\n  .cv-widget-bottom-left.svelte-1k25pvs:hover {width:55px;}.cv-pulse {\n    animation: svelte-1k25pvs-pulse 2s infinite;}\n\n  @keyframes svelte-1k25pvs-pulse {\n    0% {\n      box-shadow: 0 0 0 0 rgba(62, 132, 244, 0.7);\n    }\n    70% {\n      box-shadow: 0 0 0 10px rgba(62, 132, 244, 0);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(62, 132, 244, 0);\n    }\n  }\n\n  @media (max-width: 768px) {.cv-widget-top-right.svelte-1k25pvs,\n    .cv-widget-top-left.svelte-1k25pvs {top:10px;}.cv-widget-bottom-right.svelte-1k25pvs,\n    .cv-widget-bottom-left.svelte-1k25pvs {bottom:10px;}.cv-widget-top-right.svelte-1k25pvs,\n    .cv-widget-bottom-right.svelte-1k25pvs,\n    .cv-widget-middle-right.svelte-1k25pvs {right:0;}.cv-widget-top-left.svelte-1k25pvs,\n    .cv-widget-bottom-left.svelte-1k25pvs,\n    .cv-widget-middle-left.svelte-1k25pvs {left:0;}.cv-widget-icon.svelte-1k25pvs {width:60px;height:32px;}.cv-widget-icon.svelte-1k25pvs:hover {width:75px;}\n  }'
+	hash: 'svelte-1jgbyi0',
+	code: '\n  /* Animation */\n  @keyframes svelte-1jgbyi0-popIn {\n    0% { opacity: 0; transform: scale(0.9) translateY(-50%); }\n    100% { opacity: 1; transform: scale(1) translateY(-50%); }\n  }\n\n  /* Reset transform for top/bottom positions */\n  @keyframes svelte-1jgbyi0-popInVertical {\n    0% { opacity: 0; transform: scale(0.9); }\n    100% { opacity: 1; transform: scale(1); }\n  }\n\n  /* Simplified Pulse Animation - Shadow Only */\n  @keyframes svelte-1jgbyi0-pulse {\n    0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0.7); }\n    50% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(62, 132, 244, 0); }\n    100% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0); }\n  }\n\n  /* Wrapper handles Positioning & Entry Animation */.callout-wrapper.svelte-1jgbyi0 {position:fixed;z-index:9999;\n    \n    /* Default animation (centered ones) */\n    animation: svelte-1jgbyi0-popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}\n\n  /* Inner handles Visuals & Pulse Animation */.callout.svelte-1jgbyi0 {background:var(--cv-callout-bg, white);padding:1rem 1.25rem;border-radius:0.5rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);max-width:250px;font-size:0.9rem;line-height:1.5;color:var(--cv-callout-text, #1a1a1a);display:flex;align-items:flex-start;gap:0.75rem;font-family:inherit;border:2px solid rgba(0,0,0,0.1); /* Subtle border */}\n\n  /* Apply pulse to inner callout if enabled */.callout.cv-pulse.svelte-1jgbyi0 {\n    animation: svelte-1jgbyi0-pulse 2s infinite 0.5s;}\n\n  /* Arrow Base */.callout.svelte-1jgbyi0::before {content:\'\';position:absolute;width:1rem;height:1rem;background:var(--cv-callout-bg, white);transform:rotate(45deg);border:2px solid rgba(0,0,0,0.1);z-index:-1;}.close-btn.svelte-1jgbyi0 {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-1jgbyi0:hover {color:currentColor;opacity:1;}.text.svelte-1jgbyi0 {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-1jgbyi0, .pos-middle-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {right:80px;}.pos-top-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n  \n  /* X Button Spacing Adjustments */.pos-top-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {margin-right:0;margin-left:-0.5rem;}\n\n  /* Left-side positions (Icon on Left -> Callout on Right) */.pos-top-left.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {left:80px;}.pos-top-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {order:2; /* Move to end */margin-right:-0.5rem;margin-left:0;}.pos-top-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n\n  /* Vertical Alignment */.pos-middle-right.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0 {top:50%;\n    /* transform handled by popIn animation (translateY -50%) */}.pos-top-right.svelte-1jgbyi0, .pos-top-left.svelte-1jgbyi0 {top:20px;}.pos-bottom-right.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {bottom:20px;}\n\n\n  /* Arrow Positioning (Child of .callout, dependent on Wrapper .pos-*) */\n  \n  /* Pointing Right */.pos-top-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {right:-0.5rem;border-left:none;border-bottom:none;}\n\n  /* Pointing Left */.pos-top-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {left:-0.5rem;border-right:none;border-top:none;}\n\n  /* Vertical placement of arrow */.pos-middle-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-middle-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {top:50%;margin-top:-0.5rem;}.pos-top-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-top-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {top:1.25rem;}.pos-bottom-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-bottom-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {bottom:1.25rem;}\n\n\n  /* Dark Theme */.cv-settings-theme-dark .callout.svelte-1jgbyi0 {background:#1f2937;color:#e5e7eb;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .callout.svelte-1jgbyi0::before {background:#1f2937;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0 {color:#9ca3af;}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0:hover {color:#f3f4f6;}'
 };
 
-function WidgetIcon($$anchor, $$props) {
+function IntroCallout($$anchor, $$props) {
 	append_styles$1($$anchor, $$css$e);
 
-	let position = prop($$props, 'position', 8, 'middle-left');
-	let title = prop($$props, 'title', 8, 'Customize View');
-	let pulse = prop($$props, 'pulse', 8, false);
-	let onclick = prop($$props, 'onclick', 8, undefined);
-	var div = root$a();
+	let position = prop($$props, 'position', 3, 'middle-left'),
+		message = prop($$props, 'message', 3, 'Customize your reading experience here.'),
+		onclose = prop($$props, 'onclose', 3, () => {}),
+		enablePulse = prop($$props, 'enablePulse', 3, true),
+		backgroundColor = prop($$props, 'backgroundColor', 3, undefined),
+		textColor = prop($$props, 'textColor', 3, undefined);
 
-	div.__click = function (...$$args) {
-		onclick()?.apply(this, $$args);
+	var // Map widget position to callout position logic
+	/*
+	  Positions need to be adjusted based on the widget icon location.
+	  "right" positions -> callout appears to the left of the icon
+	  "left" positions -> callout appears to the right of the icon
+	  "top" -> aligned top
+	  "bottom" -> aligned bottom
+	*/
+	div = root$a();
+
+	var div_1 = child(div);
+	let styles;
+	var button = child(div_1);
+
+	button.__click = function (...$$args) {
+		onclose()?.apply(this, $$args);
 	};
 
+	var p = sibling(button, 2);
+	var text = child(p, true);
+
+	reset(p);
+	reset(div_1);
+	reset(div);
+
 	template_effect(() => {
-		set_class(div, 1, `cv-widget-icon cv-widget-${position() ?? ''} ${pulse() ? 'cv-pulse' : ''}`, 'svelte-1k25pvs');
-		set_attribute(div, 'title', title());
+		set_class(div, 1, `callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
+		set_class(div_1, 1, `callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
+
+		styles = set_style(div_1, '', styles, {
+			'--cv-callout-bg': backgroundColor(),
+			'--cv-callout-text': textColor()
+		});
+
+		set_text(text, message());
 	});
 
 	append($$anchor, div);
@@ -9419,6 +9466,207 @@ function WidgetIcon($$anchor, $$props) {
 
 delegate(['click']);
 
+enable_legacy_mode_flag();
+
+var root$9 = from_html(`<div role="button" tabindex="0" aria-label="Open Custom Views Settings"><span class="cv-gear svelte-11erbyi">⚙</span></div>`);
+
+const $$css$d = {
+	hash: 'svelte-11erbyi',
+	code: '.cv-settings-icon.svelte-11erbyi {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, background 0.3s ease, color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; /* Removed transform transition to allow smooth dragging */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-11erbyi:active {cursor:grabbing;}.cv-settings-icon.svelte-11erbyi: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  /* Top-right */.cv-settings-top-right.svelte-11erbyi {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-11erbyi {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-11erbyi {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-11erbyi {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-11erbyi {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-11erbyi {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-11erbyi,\n  .cv-settings-middle-right.svelte-11erbyi,\n  .cv-settings-bottom-right.svelte-11erbyi,\n  .cv-settings-top-left.svelte-11erbyi,\n  .cv-settings-middle-left.svelte-11erbyi,\n  .cv-settings-bottom-left.svelte-11erbyi {height:36px;width:36px;}.cv-settings-middle-right.svelte-11erbyi:hover,\n  .cv-settings-top-right.svelte-11erbyi:hover,\n  .cv-settings-bottom-right.svelte-11erbyi:hover,\n  .cv-settings-top-left.svelte-11erbyi:hover,\n  .cv-settings-middle-left.svelte-11erbyi:hover,\n  .cv-settings-bottom-left.svelte-11erbyi:hover {width:55px;}.cv-pulse {\n    animation: svelte-11erbyi-pulse 2s infinite;}\n\n  @keyframes svelte-11erbyi-pulse {\n    0% {\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(62, 132, 244, 0.7);\n    }\n    70% {\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(62, 132, 244, 0);\n    }\n    100% {\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(62, 132, 244, 0);\n    }\n  }\n\n  @media (max-width: 768px) {.cv-settings-top-right.svelte-11erbyi,\n    .cv-settings-top-left.svelte-11erbyi {top:10px;}.cv-settings-bottom-right.svelte-11erbyi,\n    .cv-settings-bottom-left.svelte-11erbyi {bottom:10px;}.cv-settings-top-right.svelte-11erbyi,\n    .cv-settings-bottom-right.svelte-11erbyi,\n    .cv-settings-middle-right.svelte-11erbyi {right:0;}.cv-settings-top-left.svelte-11erbyi,\n    .cv-settings-bottom-left.svelte-11erbyi,\n    .cv-settings-middle-left.svelte-11erbyi {left:0;}.cv-settings-icon.svelte-11erbyi {width:60px;height:32px;}.cv-settings-icon.svelte-11erbyi:hover {width:75px;}\n  }'
+};
+
+function SettingsIcon($$anchor, $$props) {
+	push($$props, false);
+	append_styles$1($$anchor, $$css$d);
+
+	let position = prop($$props, 'position', 8, 'middle-left');
+	let title = prop($$props, 'title', 8, 'Customize View');
+	let pulse = prop($$props, 'pulse', 8, false);
+	let onclick = prop($$props, 'onclick', 8, undefined);
+
+	// Custom Styles
+	let iconColor = prop($$props, 'iconColor', 8, undefined);
+
+	let backgroundColor = prop($$props, 'backgroundColor', 8, undefined);
+	let opacity = prop($$props, 'opacity', 8, undefined);
+	let scale = prop($$props, 'scale', 8, undefined);
+
+	function resetPosition() {
+		set(currentOffset, 0);
+		startOffset = 0;
+		localStorage.removeItem(STORAGE_KEY);
+	}
+
+	let isDragging = mutable_source(false);
+	let startY = 0;
+	let startOffset = 0;
+	let currentOffset = mutable_source(0);
+	const STORAGE_KEY = 'cv-settings-icon-offset';
+
+	onMount(() => {
+		// Load persisted offset
+		const saved = localStorage.getItem(STORAGE_KEY);
+
+		if (saved) {
+			set(currentOffset, parseFloat(saved));
+		}
+
+		// Global event listeners to handle drag leaving the element
+		window.addEventListener('mousemove', onGlobalMove);
+
+		window.addEventListener('mouseup', onGlobalEnd);
+		window.addEventListener('touchmove', onGlobalMove, { passive: false });
+		window.addEventListener('touchend', onGlobalEnd);
+
+		return () => {
+			window.removeEventListener('mousemove', onGlobalMove);
+			window.removeEventListener('mouseup', onGlobalEnd);
+			window.removeEventListener('touchmove', onGlobalMove);
+			window.removeEventListener('touchend', onGlobalEnd);
+		};
+	});
+
+	// Refined Click Logic:
+	// We'll capture the specific startY of the interaction.
+	// If at mouseup (which happens before click), the delta is > 5, we set a flag 'suppressClick'.
+	// On click, if suppressClick is true, we reset it and return.
+	let suppressClick = false;
+
+	function onMouseDown(e) {
+		if (e.button !== 0) return;
+
+		handleRefinedStart(e.clientY);
+	}
+
+	function onTouchStart(e) {
+		if (e.touches.length !== 1) return;
+
+		handleRefinedStart(e.touches[0].clientY);
+	}
+
+	function handleRefinedStart(clientY) {
+		set(isDragging, true);
+		startY = clientY;
+		startOffset = get$1(currentOffset);
+		suppressClick = false;
+	}
+
+	function onGlobalMove(e) {
+		if (!get$1(isDragging)) return;
+
+		let clientY;
+
+		// Safer type check and access
+		if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 0) {
+			clientY = e.touches[0].clientY;
+		} else if (e instanceof MouseEvent) {
+			clientY = e.clientY;
+		} else {
+			return;
+		}
+
+		const deltaY = clientY - startY;
+
+		set(currentOffset, startOffset + deltaY);
+
+		if (Math.abs(deltaY) > 5) {
+			suppressClick = true;
+		}
+	}
+
+	function onGlobalEnd() {
+		if (!get$1(isDragging)) return;
+
+		set(isDragging, false);
+		localStorage.setItem(STORAGE_KEY, get$1(currentOffset).toString());
+	}
+
+	function onClick(e) {
+		if (suppressClick) {
+			e.stopImmediatePropagation();
+			e.preventDefault();
+			suppressClick = false;
+
+			return;
+		}
+
+		if (onclick()) onclick()();
+	}
+
+	// Key handler for accessibility
+	function onKeyDown(e) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+
+			if (onclick()) onclick()();
+		}
+	}
+
+	// Helper for transforms
+	function getTransform(pos, offset, s) {
+		const isMiddle = pos && pos.includes('middle');
+		let t = '';
+
+		if (isMiddle) {
+			t = `translateY(calc(-50% + ${offset}px))`;
+		} else {
+			t = `translateY(${offset}px)`;
+		}
+
+		if (s && s !== 1) {
+			t += ` scale(${s})`;
+		}
+
+		return t;
+	}
+
+	var $$exports = { resetPosition };
+
+	init();
+
+	var div = root$9();
+
+	event('mousemove', $window, onGlobalMove);
+	event('mouseup', $window, onGlobalEnd);
+	event('touchmove', $window, onGlobalMove, void 0, false);
+	event('touchend', $window, onGlobalEnd);
+
+	let styles;
+
+	template_effect(
+		($0) => {
+			set_class(div, 1, `cv-settings-icon cv-settings-${position() ?? ''} ${pulse() ? 'cv-pulse' : ''}`, 'svelte-11erbyi');
+			set_attribute(div, 'title', title());
+			styles = set_style(div, '', styles, $0);
+		},
+		[
+			() => ({
+				'--cv-icon-color': iconColor(),
+				'--cv-icon-bg': backgroundColor(),
+				'--cv-icon-opacity': opacity(),
+
+				transform: (
+					deep_read_state(position()),
+					get$1(currentOffset),
+					deep_read_state(scale()),
+					untrack(() => getTransform(position(), get$1(currentOffset), scale()))
+				),
+
+				cursor: get$1(isDragging) ? 'grabbing' : 'grab'
+			})
+		]
+	);
+
+	event('mousedown', div, onMouseDown);
+	event('touchstart', div, onTouchStart, void 0, false);
+	event('click', div, onClick);
+	event('keydown', div, onKeyDown);
+	append($$anchor, div);
+	bind_prop($$props, 'resetPosition', resetPosition);
+
+	return pop($$exports);
+}
+
 /** @import { BlurParams, CrossfadeParams, DrawParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from './public' */
 
 
@@ -9556,7 +9804,7 @@ function scale(
 }
 
 /**
- * Icon utilities for CustomViews widget
+ * Icon utilities for CustomViews settings
  * Centralized SVG icons for better maintainability and reusability
  */
 /**
@@ -9692,16 +9940,16 @@ function getChevronUpIcon() {
 }
 
 var root_1$8 = from_html(`<p class="description svelte-dp7a9f"> </p>`);
-var root$9 = from_html(`<div class="card svelte-dp7a9f"><div class="content svelte-dp7a9f"><div><p class="title svelte-dp7a9f"> </p> <!></div> <div class="radios svelte-dp7a9f"><label class="radio-label svelte-dp7a9f" title="Hide"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Hide</span></label> <label class="radio-label svelte-dp7a9f" title="Peek"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Peek</span></label> <label class="radio-label svelte-dp7a9f" title="Show"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Show</span></label></div></div></div>`);
+var root$8 = from_html(`<div class="card svelte-dp7a9f"><div class="content svelte-dp7a9f"><div><p class="title svelte-dp7a9f"> </p> <!></div> <div class="radios svelte-dp7a9f"><label class="radio-label svelte-dp7a9f" title="Hide"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Hide</span></label> <label class="radio-label svelte-dp7a9f" title="Peek"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Peek</span></label> <label class="radio-label svelte-dp7a9f" title="Show"><input class="toggle-input svelte-dp7a9f" type="radio"/> <span>Show</span></label></div></div></div>`);
 
-const $$css$d = {
+const $$css$c = {
 	hash: 'svelte-dp7a9f',
-	code: '.card.svelte-dp7a9f {background:white;}.content.svelte-dp7a9f {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;}.title.svelte-dp7a9f {font-weight:500;font-size:0.875rem;color:rgba(0, 0, 0, 0.9);margin:0;}.description.svelte-dp7a9f {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0.125rem 0 0 0;}.radios.svelte-dp7a9f {display:flex;gap:8px;}.radio-label.svelte-dp7a9f {display:flex;align-items:center;gap:4px;font-size:0.85rem;cursor:pointer;}.toggle-input.svelte-dp7a9f {margin:0;opacity:1;width:auto;height:auto;}.cv-widget-theme-dark .card.svelte-dp7a9f {background:#101722;}.cv-widget-theme-dark .title.svelte-dp7a9f {color:#e2e8f0;}.cv-widget-theme-dark .description.svelte-dp7a9f {color:rgba(255, 255, 255, 0.6);}'
+	code: '.card.svelte-dp7a9f {background:white;}.content.svelte-dp7a9f {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;}.title.svelte-dp7a9f {font-weight:500;font-size:0.875rem;color:rgba(0, 0, 0, 0.9);margin:0;}.description.svelte-dp7a9f {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0.125rem 0 0 0;}.radios.svelte-dp7a9f {display:flex;gap:8px;}.radio-label.svelte-dp7a9f {display:flex;align-items:center;gap:4px;font-size:0.85rem;cursor:pointer;}.toggle-input.svelte-dp7a9f {margin:0;opacity:1;width:auto;height:auto;}.cv-settings-theme-dark .card.svelte-dp7a9f {background:#101722;}.cv-settings-theme-dark .title.svelte-dp7a9f {color:#e2e8f0;}.cv-settings-theme-dark .description.svelte-dp7a9f {color:rgba(255, 255, 255, 0.6);}'
 };
 
 function ToggleItem($$anchor, $$props) {
 	push($$props, false);
-	append_styles$1($$anchor, $$css$d);
+	append_styles$1($$anchor, $$css$c);
 
 	const binding_group = [];
 	let toggle = prop($$props, 'toggle', 8);
@@ -9710,7 +9958,7 @@ function ToggleItem($$anchor, $$props) {
 
 	init();
 
-	var div = root$9();
+	var div = root$8();
 	var div_1 = child(div);
 	var div_2 = child(div_1);
 	var p = child(div_2);
@@ -9808,17 +10056,17 @@ function ToggleItem($$anchor, $$props) {
 delegate(['change']);
 
 var root_1$7 = from_html(`<p class="description svelte-741mad"> </p>`);
-var root_2$3 = from_html(`<option> </option>`);
-var root$8 = from_html(`<div class="root svelte-741mad"><div class="header svelte-741mad"><label class="label svelte-741mad"> </label> <!></div> <select class="select svelte-741mad"></select></div>`);
+var root_2$4 = from_html(`<option> </option>`);
+var root$7 = from_html(`<div class="root svelte-741mad"><div class="header svelte-741mad"><label class="label svelte-741mad"> </label> <!></div> <select class="select svelte-741mad"></select></div>`);
 
-const $$css$c = {
+const $$css$b = {
 	hash: 'svelte-741mad',
-	code: '.root.svelte-741mad {display:flex;flex-direction:column;gap:0.75rem;padding:0.75rem;background:white;border:1px solid rgba(0, 0, 0, 0.1);border-radius:0.5rem;}\n\n  /* Remove special handling for last child since they are now separate cards */.root.svelte-741mad:last-child {border-bottom:1px solid rgba(0, 0, 0, 0.1);}.header.svelte-741mad {display:flex;flex-direction:column;gap:0.25rem;}.label.svelte-741mad {font-size:0.875rem;color:rgba(0, 0, 0, 0.8);margin:0;line-height:1.4;font-weight:500;display:block;cursor:pointer;}.description.svelte-741mad {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0;line-height:1.4;}.select.svelte-741mad {width:100%;border-radius:0.5rem;background:white;border:1px solid rgba(0, 0, 0, 0.15);color:rgba(0, 0, 0, 0.9);padding:0.5rem 0.75rem;font-size:0.875rem;cursor:pointer;transition:all 0.15s ease;font-family:inherit;}.select.svelte-741mad:hover {border-color:rgba(0, 0, 0, 0.25);}.select.svelte-741mad:focus {outline:none;border-color:#3e84f4;box-shadow:0 0 0 2px rgba(62, 132, 244, 0.2);}\n\n  /* Dark Theme */.cv-widget-theme-dark .root.svelte-741mad {background:#101722;border-color:rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .label.svelte-741mad {color:#e2e8f0;}.cv-widget-theme-dark .description.svelte-741mad {color:rgba(255, 255, 255, 0.6);}.cv-widget-theme-dark .select.svelte-741mad {background:#101722;border-color:rgba(255, 255, 255, 0.2);color:#e2e8f0;}'
+	code: '.root.svelte-741mad {display:flex;flex-direction:column;gap:0.75rem;padding:0.75rem;background:white;border:1px solid rgba(0, 0, 0, 0.1);border-radius:0.5rem;}\n\n  /* Remove special handling for last child since they are now separate cards */.root.svelte-741mad:last-child {border-bottom:1px solid rgba(0, 0, 0, 0.1);}.header.svelte-741mad {display:flex;flex-direction:column;gap:0.25rem;}.label.svelte-741mad {font-size:0.875rem;color:rgba(0, 0, 0, 0.8);margin:0;line-height:1.4;font-weight:500;display:block;cursor:pointer;}.description.svelte-741mad {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0;line-height:1.4;}.select.svelte-741mad {width:100%;border-radius:0.5rem;background:white;border:1px solid rgba(0, 0, 0, 0.15);color:rgba(0, 0, 0, 0.9);padding:0.5rem 0.75rem;font-size:0.875rem;cursor:pointer;transition:all 0.15s ease;font-family:inherit;}.select.svelte-741mad:hover {border-color:rgba(0, 0, 0, 0.25);}.select.svelte-741mad:focus {outline:none;border-color:#3e84f4;box-shadow:0 0 0 2px rgba(62, 132, 244, 0.2);}\n\n  /* Dark Theme */.cv-settings-theme-dark .root.svelte-741mad {background:#101722;border-color:rgba(255, 255, 255, 0.1);}.cv-settings-theme-dark .label.svelte-741mad {color:#e2e8f0;}.cv-settings-theme-dark .description.svelte-741mad {color:rgba(255, 255, 255, 0.6);}.cv-settings-theme-dark .select.svelte-741mad {background:#101722;border-color:rgba(255, 255, 255, 0.2);color:#e2e8f0;}'
 };
 
 function TabGroupItem($$anchor, $$props) {
 	push($$props, false);
-	append_styles$1($$anchor, $$css$c);
+	append_styles$1($$anchor, $$css$b);
 
 	let group = prop($$props, 'group', 8);
 	let activeTabId = prop($$props, 'activeTabId', 12, '');
@@ -9833,7 +10081,7 @@ function TabGroupItem($$anchor, $$props) {
 
 	init();
 
-	var div = root$8();
+	var div = root$7();
 	var div_1 = child(div);
 	var label = child(div_1);
 	var text = child(label, true);
@@ -9872,7 +10120,7 @@ function TabGroupItem($$anchor, $$props) {
 	select.__change = onChange;
 
 	each(select, 5, () => (deep_read_state(group()), untrack(() => group().tabs)), index, ($$anchor, tab) => {
-		var option = root_2$3();
+		var option = root_2$4();
 		var text_2 = child(option, true);
 
 		reset(option);
@@ -9924,23 +10172,23 @@ function TabGroupItem($$anchor, $$props) {
 
 delegate(['change']);
 
-var root_1$6 = from_html(`<p class="description svelte-1tduk3b"> </p>`);
-var root_3 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Toggles</div> <div class="toggles-container svelte-1tduk3b"></div></div>`);
+var root_2$3 = from_html(`<p class="description svelte-1tduk3b"> </p>`);
+var root_3$1 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Toggles</div> <div class="toggles-container svelte-1tduk3b"></div></div>`);
 var root_5 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Tab Groups</div> <div class="tabgroups-container svelte-1tduk3b"><div class="tabgroup-card header-card svelte-1tduk3b" role="group"><div class="tabgroup-row svelte-1tduk3b"><div class="logo-box svelte-1tduk3b" id="cv-nav-icon-box"><div class="nav-icon svelte-1tduk3b"><!></div></div> <div class="tabgroup-info svelte-1tduk3b"><div class="tabgroup-title-container"><p class="tabgroup-title svelte-1tduk3b">Show only the selected tab</p></div> <p class="tabgroup-description svelte-1tduk3b">Hide the navigation headers</p></div> <label class="toggle-switch nav-toggle svelte-1tduk3b"><input class="nav-pref-input svelte-1tduk3b" type="checkbox" aria-label="Show only the selected tab"/> <span class="switch-bg svelte-1tduk3b"></span> <span class="switch-knob svelte-1tduk3b"></span></label></div></div> <div class="tab-groups-list svelte-1tduk3b"></div></div></div>`);
-var root_2$2 = from_html(`<div class="tab-content active svelte-1tduk3b"><!> <!></div>`);
+var root_1$6 = from_html(`<div class="tab-content active svelte-1tduk3b"><!> <!> <!></div>`);
 var root_7 = from_html(`<div class="tab-content active svelte-1tduk3b"><div class="share-content svelte-1tduk3b"><div class="share-instruction svelte-1tduk3b">Create a shareable link for your current customization, or select specific parts of the page to share.</div> <button class="share-action-btn primary start-share-btn svelte-1tduk3b"><span class="btn-icon svelte-1tduk3b"><!></span> <span>Select elements to share</span></button> <button class="share-action-btn copy-url-btn svelte-1tduk3b"><span class="btn-icon svelte-1tduk3b"><!></span> <span><!></span></button></div></div>`);
 var root_12 = from_html(`<button class="reset-btn svelte-1tduk3b" title="Reset to Default"><span><!></span> <span>Reset</span></button>`);
 var root_13 = from_html(`<div></div>`);
-var root$7 = from_html(`<div class="modal-overlay svelte-1tduk3b" role="presentation"><div class="modal-box cv-custom-state-modal svelte-1tduk3b" role="dialog" aria-modal="true"><header class="header svelte-1tduk3b"><div class="header-content svelte-1tduk3b"><div class="modal-icon svelte-1tduk3b"><!></div> <div class="title svelte-1tduk3b"> </div></div> <button class="close-btn svelte-1tduk3b" aria-label="Close modal"><!></button></header> <main class="main svelte-1tduk3b"><!> <div class="tabs svelte-1tduk3b"><button>Customize</button> <button>Share</button></div> <!></main> <footer class="footer svelte-1tduk3b"><!> <a href="https://github.com/customviews-js/customviews" target="_blank" class="footer-link svelte-1tduk3b"><!> <span>View on GitHub</span></a> <button class="done-btn svelte-1tduk3b">Done</button></footer></div></div>`);
+var root$6 = from_html(`<div class="modal-overlay svelte-1tduk3b" role="presentation"><div class="modal-box cv-custom-state-modal svelte-1tduk3b" role="dialog" aria-modal="true"><header class="header svelte-1tduk3b"><div class="header-content svelte-1tduk3b"><div class="modal-icon svelte-1tduk3b"><!></div> <div class="title svelte-1tduk3b"> </div></div> <button class="close-btn svelte-1tduk3b" aria-label="Close modal"><!></button></header> <main class="main svelte-1tduk3b"><div class="tabs svelte-1tduk3b"><button>Customize</button> <button>Share</button></div> <!></main> <footer class="footer svelte-1tduk3b"><!> <a href="https://github.com/customviews-js/customviews" target="_blank" class="footer-link svelte-1tduk3b"><!> <span>View on GitHub</span></a> <button class="done-btn svelte-1tduk3b">Done</button></footer></div></div>`);
 
-const $$css$b = {
+const $$css$a = {
 	hash: 'svelte-1tduk3b',
-	code: '\n/* \n  Styles from widget.ts/widget-styles.ts \n  Adapted for Svelte\n*/\n\n/* Modal Overlay & Modal Frame */.modal-overlay.svelte-1tduk3b {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-1tduk3b {background:white;border-radius:0.75rem;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);max-width:32rem;width:90vw;max-height:80vh;display:flex;flex-direction:column;}.header.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;border-bottom:1px solid rgba(0, 0, 0, 0.1);}.header-content.svelte-1tduk3b {display:flex;align-items:center;gap:0.75rem;}.modal-icon.svelte-1tduk3b {position:relative;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;}.title.svelte-1tduk3b {font-size:1.125rem;font-weight:bold;color:rgba(0, 0, 0, 0.9);margin:0;}.close-btn.svelte-1tduk3b {width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:transparent;border:none;color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:all 0.2s ease;}.close-btn.svelte-1tduk3b:hover {background:rgba(62, 132, 244, 0.1);color:#3e84f4;}.main.svelte-1tduk3b {padding:1rem;flex:1;display:flex;flex-direction:column;overflow-y:auto;max-height:calc(80vh - 8rem);}.description.svelte-1tduk3b {font-size:0.875rem;color:rgba(0, 0, 0, 0.8);margin:0 0 1rem 0;line-height:1.4;}\n\n/* Tabs */.tabs.svelte-1tduk3b {display:flex;margin-bottom:1rem;border-bottom:2px solid #eee;}.tab.svelte-1tduk3b {background:transparent;border:none;padding:0.5rem 1rem;font-size:0.9rem;font-weight:600;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}.tab.active.svelte-1tduk3b {color:#3e84f4;border-bottom-color:#3e84f4;}.tab-content.svelte-1tduk3b {display:none;}.tab-content.active.svelte-1tduk3b {display:block;}\n\n/* Section Styling */.section.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1.5rem;}.section-heading.svelte-1tduk3b {font-size:1rem;font-weight:bold;color:rgba(0, 0, 0, 0.9);margin:0;}.toggles-container.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.5rem;overflow:hidden;}\n\n/* Tab Groups Section specific */.tabgroups-container.svelte-1tduk3b {border-radius:0.5rem;}\n\n/* Nav Toggle Card */.tabgroup-card.svelte-1tduk3b {background:white;border-bottom:1px solid rgba(0, 0, 0, 0.1);}.tabgroup-card.header-card.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border:1px solid rgba(0, 0, 0, 0.1);border-radius:0.5rem;margin-bottom:0.75rem;}.tabgroup-row.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;}.logo-box.svelte-1tduk3b {width:3rem;height:3rem;background:rgba(0, 0, 0, 0.08);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.nav-icon.svelte-1tduk3b {width:2rem;height:2rem;color:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s ease;}.tabgroup-info.svelte-1tduk3b {flex:1;display:flex;flex-direction:column;gap:0.25rem;}.tabgroup-title.svelte-1tduk3b {font-weight:500;font-size:0.875rem;color:rgba(0, 0, 0, 0.9);margin:0 0 0 0;}.tabgroup-description.svelte-1tduk3b {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0;line-height:1.3;}\n\n/* Toggle Switch */.toggle-switch.svelte-1tduk3b {position:relative;display:inline-flex;align-items:center;width:44px;height:24px;background:rgba(0, 0, 0, 0.1);border-radius:9999px;padding:2px;box-sizing:border-box;cursor:pointer;transition:background-color 0.2s ease;border:none;}.toggle-switch.svelte-1tduk3b input:where(.svelte-1tduk3b) {display:none;}.toggle-switch.svelte-1tduk3b .switch-bg:where(.svelte-1tduk3b) {position:absolute;inset:0;border-radius:9999px;background:rgba(0, 0, 0, 0.1);transition:background-color 0.2s ease;pointer-events:none;}.toggle-switch.svelte-1tduk3b .switch-knob:where(.svelte-1tduk3b) {position:relative;width:20px;height:20px;background:white;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-1tduk3b input:where(.svelte-1tduk3b):checked ~ .switch-knob:where(.svelte-1tduk3b) {transform:translateX(20px);}.toggle-switch.svelte-1tduk3b input:where(.svelte-1tduk3b):checked ~ .switch-bg:where(.svelte-1tduk3b) {background:#3e84f4;}\n\n/* Tab Groups List */.tab-groups-list.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.75rem;}\n\n/* Footer */.footer.svelte-1tduk3b {padding:1rem;border-top:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;border-bottom-left-radius:0.75rem;border-bottom-right-radius:0.75rem;}.footer-link.svelte-1tduk3b {display:flex;align-items:center;gap:0.5rem;color:rgba(0, 0, 0, 0.5);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.15s ease;}.footer-link.svelte-1tduk3b:hover {color:rgba(0, 0, 0, 0.8);}.reset-btn.svelte-1tduk3b {display:flex;align-items:center;gap:0.5rem;background:transparent;border:none;font-size:0.875rem;font-weight:500;color:#dc2626;cursor:pointer;padding:0.5rem 0.75rem;border-radius:0.375rem;transition:background-color 0.15s ease;}.reset-btn.svelte-1tduk3b:hover {background:rgba(220, 38, 38, 0.1);}.done-btn.svelte-1tduk3b {background:#3e84f4;color:white;border:none;padding:0.5rem 1rem;border-radius:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer;transition:background-color 0.15s ease;}.done-btn.svelte-1tduk3b:hover {background:#2563eb;}.reset-btn-icon.svelte-1tduk3b {display:flex;align-items:center;width:1.25rem;height:1.25rem;}.spinning {\n  animation: svelte-1tduk3b-spin 1s linear infinite;}\n\n@keyframes svelte-1tduk3b-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Share Tab Styles */.share-content.svelte-1tduk3b {display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;padding:1rem 0;}.share-instruction.svelte-1tduk3b {font-size:0.95rem;color:#666;margin-bottom:0.5rem;}.share-action-btn.svelte-1tduk3b {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 #ddd;background:white;color:#333;}.share-action-btn.svelte-1tduk3b:hover {border-color:#3e84f4;color:#3e84f4;background:#f8fbfd;}.share-action-btn.primary.svelte-1tduk3b {background:#3e84f4;border-color:#3e84f4;color:white;}.share-action-btn.primary.svelte-1tduk3b:hover {background:#2563eb;border-color:#2563eb;}.btn-icon.svelte-1tduk3b {display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;}\n\n/* Dark Theme Overrides */.cv-widget-theme-dark .modal-box.svelte-1tduk3b {background:#101722;color:#e2e8f0;}.cv-widget-theme-dark .header.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .title.svelte-1tduk3b {color:#e2e8f0;}.cv-widget-theme-dark .close-btn.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-widget-theme-dark .close-btn.svelte-1tduk3b:hover {background:rgba(62, 132, 244, 0.2);color:#3e84f4;}.cv-widget-theme-dark .description.svelte-1tduk3b {color:rgba(255, 255, 255, 0.8);}.cv-widget-theme-dark .section-heading.svelte-1tduk3b {color:#e2e8f0;}.cv-widget-theme-dark .toggles-container.svelte-1tduk3b,\n.cv-widget-theme-dark .tabgroups-container.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .tabgroup-card.svelte-1tduk3b {background:#101722;border-color:rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .tabgroup-title.svelte-1tduk3b {color:#e2e8f0;}.cv-widget-theme-dark .tabgroup-description.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-widget-theme-dark .footer.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);background:#101722;}.cv-widget-theme-dark .footer-link.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-widget-theme-dark .reset-btn.svelte-1tduk3b {color:#f87171;}.cv-widget-theme-dark .reset-btn.svelte-1tduk3b:hover {background:rgba(248, 113, 113, 0.1);}.cv-widget-theme-dark .tab-groups-list.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .nav-icon.svelte-1tduk3b {color:rgba(255, 255, 255, 0.8);}'
+	code: '\n/* \n  Styles from widget.ts/widget-styles.ts \n  Adapted for Svelte\n*/\n\n/* Modal Overlay & Modal Frame */.modal-overlay.svelte-1tduk3b {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-1tduk3b {background:white;border-radius:0.75rem;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);max-width:32rem;width:90vw;max-height:80vh;display:flex;flex-direction:column;}.header.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;border-bottom:1px solid rgba(0, 0, 0, 0.1);}.header-content.svelte-1tduk3b {display:flex;align-items:center;gap:0.75rem;}.modal-icon.svelte-1tduk3b {position:relative;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;}.title.svelte-1tduk3b {font-size:1.125rem;font-weight:bold;color:rgba(0, 0, 0, 0.9);margin:0;}.close-btn.svelte-1tduk3b {width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:transparent;border:none;color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:all 0.2s ease;}.close-btn.svelte-1tduk3b:hover {background:rgba(62, 132, 244, 0.1);color:#3e84f4;}.main.svelte-1tduk3b {padding:1rem;flex:1;display:flex;flex-direction:column;overflow-y:auto;max-height:calc(80vh - 8rem);}.description.svelte-1tduk3b {font-size:0.875rem;color:rgba(0, 0, 0, 0.8);margin:0 0 1rem 0;line-height:1.4;}\n\n/* Tabs */.tabs.svelte-1tduk3b {display:flex;margin-bottom:1rem;border-bottom:2px solid #eee;}.tab.svelte-1tduk3b {background:transparent;border:none;padding:0.5rem 1rem;font-size:0.9rem;font-weight:600;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}.tab.active.svelte-1tduk3b {color:#3e84f4;border-bottom-color:#3e84f4;}.tab-content.svelte-1tduk3b {display:none;}.tab-content.active.svelte-1tduk3b {display:block;}\n\n/* Section Styling */.section.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1.5rem;}.section-heading.svelte-1tduk3b {font-size:1rem;font-weight:bold;color:rgba(0, 0, 0, 0.9);margin:0;}.toggles-container.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.5rem;overflow:hidden;}\n\n/* Tab Groups Section specific */.tabgroups-container.svelte-1tduk3b {border-radius:0.5rem;}\n\n/* Nav Toggle Card */.tabgroup-card.svelte-1tduk3b {background:white;border-bottom:1px solid rgba(0, 0, 0, 0.1);}.tabgroup-card.header-card.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border:1px solid rgba(0, 0, 0, 0.1);border-radius:0.5rem;margin-bottom:0.75rem;}.tabgroup-row.svelte-1tduk3b {display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;}.logo-box.svelte-1tduk3b {width:3rem;height:3rem;background:rgba(0, 0, 0, 0.08);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.nav-icon.svelte-1tduk3b {width:2rem;height:2rem;color:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s ease;}.tabgroup-info.svelte-1tduk3b {flex:1;display:flex;flex-direction:column;gap:0.25rem;}.tabgroup-title.svelte-1tduk3b {font-weight:500;font-size:0.875rem;color:rgba(0, 0, 0, 0.9);margin:0 0 0 0;}.tabgroup-description.svelte-1tduk3b {font-size:0.75rem;color:rgba(0, 0, 0, 0.6);margin:0;line-height:1.3;}\n\n/* Toggle Switch */.toggle-switch.svelte-1tduk3b {position:relative;display:inline-flex;align-items:center;width:44px;height:24px;background:rgba(0, 0, 0, 0.1);border-radius:9999px;padding:2px;box-sizing:border-box;cursor:pointer;transition:background-color 0.2s ease;border:none;}.toggle-switch.svelte-1tduk3b input:where(.svelte-1tduk3b) {display:none;}.toggle-switch.svelte-1tduk3b .switch-bg:where(.svelte-1tduk3b) {position:absolute;inset:0;border-radius:9999px;background:rgba(0, 0, 0, 0.1);transition:background-color 0.2s ease;pointer-events:none;}.toggle-switch.svelte-1tduk3b .switch-knob:where(.svelte-1tduk3b) {position:relative;width:20px;height:20px;background:white;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-1tduk3b input:where(.svelte-1tduk3b):checked ~ .switch-knob:where(.svelte-1tduk3b) {transform:translateX(20px);}.toggle-switch.svelte-1tduk3b input:where(.svelte-1tduk3b):checked ~ .switch-bg:where(.svelte-1tduk3b) {background:#3e84f4;}\n\n/* Tab Groups List */.tab-groups-list.svelte-1tduk3b {display:flex;flex-direction:column;gap:0.75rem;}\n\n/* Footer */.footer.svelte-1tduk3b {padding:1rem;border-top:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;border-bottom-left-radius:0.75rem;border-bottom-right-radius:0.75rem;}.footer-link.svelte-1tduk3b {display:flex;align-items:center;gap:0.5rem;color:rgba(0, 0, 0, 0.5);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.15s ease;}.footer-link.svelte-1tduk3b:hover {color:rgba(0, 0, 0, 0.8);}.reset-btn.svelte-1tduk3b {display:flex;align-items:center;gap:0.5rem;background:transparent;border:none;font-size:0.875rem;font-weight:500;color:#dc2626;cursor:pointer;padding:0.5rem 0.75rem;border-radius:0.375rem;transition:background-color 0.15s ease;}.reset-btn.svelte-1tduk3b:hover {background:rgba(220, 38, 38, 0.1);}.done-btn.svelte-1tduk3b {background:#3e84f4;color:white;border:none;padding:0.5rem 1rem;border-radius:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer;transition:background-color 0.15s ease;}.done-btn.svelte-1tduk3b:hover {background:#2563eb;}.reset-btn-icon.svelte-1tduk3b {display:flex;align-items:center;width:1.25rem;height:1.25rem;}.spinning {\n  animation: svelte-1tduk3b-spin 1s linear infinite;}\n\n@keyframes svelte-1tduk3b-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Share Tab Styles */.share-content.svelte-1tduk3b {display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;padding:1rem 0;}.share-instruction.svelte-1tduk3b {font-size:0.95rem;color:#666;margin-bottom:0.5rem;}.share-action-btn.svelte-1tduk3b {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 #ddd;background:white;color:#333;}.share-action-btn.svelte-1tduk3b:hover {border-color:#3e84f4;color:#3e84f4;background:#f8fbfd;}.share-action-btn.primary.svelte-1tduk3b {background:#3e84f4;border-color:#3e84f4;color:white;}.share-action-btn.primary.svelte-1tduk3b:hover {background:#2563eb;border-color:#2563eb;}.btn-icon.svelte-1tduk3b {display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;}\n\n/* Dark Theme Overrides */.cv-settings-theme-dark .modal-box.svelte-1tduk3b {background:#101722;color:#e2e8f0;}.cv-settings-theme-dark .header.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-settings-theme-dark .title.svelte-1tduk3b {color:#e2e8f0;}.cv-settings-theme-dark .close-btn.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-settings-theme-dark .close-btn.svelte-1tduk3b:hover {background:rgba(62, 132, 244, 0.2);color:#3e84f4;}.cv-settings-theme-dark .description.svelte-1tduk3b {color:rgba(255, 255, 255, 0.8);}.cv-settings-theme-dark .section-heading.svelte-1tduk3b {color:#e2e8f0;}.cv-settings-theme-dark .toggles-container.svelte-1tduk3b,\n.cv-settings-theme-dark .tabgroups-container.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-settings-theme-dark .tabgroup-card.svelte-1tduk3b {background:#101722;border-color:rgba(255, 255, 255, 0.1);}.cv-settings-theme-dark .tabgroup-title.svelte-1tduk3b {color:#e2e8f0;}.cv-settings-theme-dark .tabgroup-description.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-settings-theme-dark .footer.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);background:#101722;}.cv-settings-theme-dark .footer-link.svelte-1tduk3b {color:rgba(255, 255, 255, 0.6);}.cv-settings-theme-dark .reset-btn.svelte-1tduk3b {color:#f87171;}.cv-settings-theme-dark .reset-btn.svelte-1tduk3b:hover {background:rgba(248, 113, 113, 0.1);}.cv-settings-theme-dark .tab-groups-list.svelte-1tduk3b {border-color:rgba(255, 255, 255, 0.1);}.cv-settings-theme-dark .nav-icon.svelte-1tduk3b {color:rgba(255, 255, 255, 0.8);}'
 };
 
 function Modal($$anchor, $$props) {
 	push($$props, false);
-	append_styles$1($$anchor, $$css$b);
+	append_styles$1($$anchor, $$css$a);
 
 	let title = prop($$props, 'title', 8, 'Customize View');
 	let description = prop($$props, 'description', 8, '');
@@ -10023,7 +10271,7 @@ function Modal($$anchor, $$props) {
 	legacy_pre_effect_reset();
 	init();
 
-	var div = root$7();
+	var div = root$6();
 
 	div.__click = (e) => {
 		if (e.target === e.currentTarget) onclose()();
@@ -10057,24 +10305,7 @@ function Modal($$anchor, $$props) {
 	reset(header);
 
 	var main = sibling(header, 2);
-	var node_2 = child(main);
-
-	{
-		var consequent = ($$anchor) => {
-			var p = root_1$6();
-			var text_1 = child(p, true);
-
-			reset(p);
-			template_effect(() => set_text(text_1, description()));
-			append($$anchor, p);
-		};
-
-		if_block(node_2, ($$render) => {
-			if (description()) $$render(consequent);
-		});
-	}
-
-	var div_5 = sibling(node_2, 2);
+	var div_5 = child(main);
 	var button_1 = child(div_5);
 
 	button_1.__click = () => set(activeTab, 'customize');
@@ -10084,16 +10315,33 @@ function Modal($$anchor, $$props) {
 	button_2.__click = () => set(activeTab, 'share');
 	reset(div_5);
 
-	var node_3 = sibling(div_5, 2);
+	var node_2 = sibling(div_5, 2);
 
 	{
 		var consequent_3 = ($$anchor) => {
-			var div_6 = root_2$2();
-			var node_4 = child(div_6);
+			var div_6 = root_1$6();
+			var node_3 = child(div_6);
+
+			{
+				var consequent = ($$anchor) => {
+					var p = root_2$3();
+					var text_1 = child(p, true);
+
+					reset(p);
+					template_effect(() => set_text(text_1, description()));
+					append($$anchor, p);
+				};
+
+				if_block(node_3, ($$render) => {
+					if (description()) $$render(consequent);
+				});
+			}
+
+			var node_4 = sibling(node_3, 2);
 
 			{
 				var consequent_1 = ($$anchor) => {
-					var div_7 = root_3();
+					var div_7 = root_3$1();
 					var div_8 = sibling(child(div_7), 2);
 
 					each(div_8, 5, toggles, (toggle) => toggle.toggleId, ($$anchor, toggle) => {
@@ -10282,7 +10530,7 @@ function Modal($$anchor, $$props) {
 			append($$anchor, div_16);
 		};
 
-		if_block(node_3, ($$render) => {
+		if_block(node_2, ($$render) => {
 			if (get$1(activeTab) === 'customize') $$render(consequent_3); else $$render(alternate_2, false);
 		});
 	}
@@ -10353,62 +10601,6 @@ function Modal($$anchor, $$props) {
 
 delegate(['click', 'change']);
 
-var root$6 = from_html(`<div role="alert"><button class="close-btn svelte-ixixmj" aria-label="Dismiss intro">×</button> <p class="text svelte-ixixmj"> </p></div>`);
-
-const $$css$a = {
-	hash: 'svelte-ixixmj',
-	code: '.callout.svelte-ixixmj {position:fixed;background:white;padding:12px 16px;border-radius:8px;box-shadow:0 4px 15px rgba(0, 0, 0, 0.15);z-index:9999;max-width:260px;font-size:14px;line-height:1.5;color:#333;display:flex;align-items:flex-start;gap:10px;font-family:-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;}.close-btn.svelte-ixixmj {background:transparent;border:none;color:#999;font-size:18px;line-height:1;cursor:pointer;padding:0;margin-right:-4px;margin-top:-2px;}.close-btn.svelte-ixixmj:hover {color:#333;}.text.svelte-ixixmj {margin:0;flex:1;}\n\n  /* Position specifics */.pos-top-right.svelte-ixixmj {top:20px;right:60px; /* offset from icon */}.pos-top-left.svelte-ixixmj {top:20px;left:60px;}.pos-bottom-right.svelte-ixixmj {bottom:20px;right:60px;}.pos-bottom-left.svelte-ixixmj {bottom:20px;left:60px;}.pos-middle-right.svelte-ixixmj {top:50%;right:60px;transform:translateY(-50%);}.pos-middle-left.svelte-ixixmj {top:50%;left:60px;transform:translateY(-50%);}.cv-widget-theme-dark .callout.svelte-ixixmj {background:#101722;color:#e2e8f0;border:1px solid rgba(255, 255, 255, 0.1);}.cv-widget-theme-dark .close-btn.svelte-ixixmj {color:rgba(255, 255, 255, 0.5);}.cv-widget-theme-dark .close-btn.svelte-ixixmj:hover {color:rgba(255, 255, 255, 0.9);}'
-};
-
-function IntroCallout($$anchor, $$props) {
-	push($$props, false);
-	append_styles$1($$anchor, $$css$a);
-
-	let position = prop($$props, 'position', 8, 'middle-left');
-	let message = prop($$props, 'message', 8, 'Customize your reading experience here.');
-	let onclose = prop($$props, 'onclose', 8, () => {});
-
-	// Map widget position to callout position logic
-	/*
-	  Positions need to be adjusted based on the widget icon location.
-	  "right" positions -> callout appears to the left of the icon
-	  "left" positions -> callout appears to the right of the icon
-	  "top" -> aligned top
-	  "bottom" -> aligned bottom
-	*/
-	function getTransitionParams() {
-		if (position() && position().includes('right')) return { x: 20, duration: 300 };
-
-		return { x: -20, duration: 300 };
-	}
-
-	init();
-
-	var div = root$6();
-	var button = child(div);
-
-	button.__click = function (...$$args) {
-		onclose()?.apply(this, $$args);
-	};
-
-	var p = sibling(button, 2);
-	var text = child(p, true);
-
-	reset(p);
-	reset(div);
-
-	template_effect(() => {
-		set_class(div, 1, `callout pos-${position() ?? ''}`, 'svelte-ixixmj');
-		set_text(text, message());
-	});
-
-	transition(3, div, () => fly, getTransitionParams);
-	append($$anchor, div);
-	pop();
-}
-
-delegate(['click']);
-
 const SELECTED_CLASS = 'cv-share-selected';
 const HIGHLIGHT_TARGET_CLASS = 'cv-highlight-target';
 const CV_CUSTOM_ELEMENTS = 'cv-tabgroup, cv-toggle';
@@ -10722,7 +10914,7 @@ function ShareToolbar($$anchor, $$props) {
 
 delegate(['click']);
 
-var root_2$1 = from_html(`<button class="action-btn up svelte-2rmv56" title="Select Parent">↰</button>`);
+var root_2$2 = from_html(`<button class="action-btn up svelte-2rmv56" title="Select Parent">↰</button>`);
 var root_1$4 = from_html(`<div class="hover-helper svelte-2rmv56"><span class="tag svelte-2rmv56"> </span> <button> </button> <!></div>`);
 
 const $$css$7 = {
@@ -10825,7 +11017,7 @@ function HoverHelper($$anchor, $$props) {
 
 			{
 				var consequent = ($$anchor) => {
-					var button_1 = root_2$1();
+					var button_1 = root_2$2();
 
 					button_1.__click = handleUp;
 					append($$anchor, button_1);
@@ -11114,7 +11306,7 @@ function scrollToElement(element) {
 
 var root_1$2 = from_html(`<!> <!> <!> <!> <!> <!>`, 1);
 
-function MainWidget($$anchor, $$props) {
+function Settings($$anchor, $$props) {
 	push($$props, true);
 
 	const $shareStore = () => store_get(shareStore, '$shareStore', $$stores);
@@ -11129,6 +11321,7 @@ function MainWidget($$anchor, $$props) {
 	let showCallout = state(false);
 	let isResetting = state(false);
 	let showPulse = state(false);
+	let settingsIcon = state(void 0);
 
 	// Nav Visibility
 	let navsVisible = state(true);
@@ -11154,7 +11347,7 @@ function MainWidget($$anchor, $$props) {
 	// Init
 	onMount(() => {
 		// Check for callout
-		if ($$props.options.showWelcome && get$1(store).hasActiveComponents) {
+		if ($$props.options.callout?.show && get$1(store).hasActiveComponents) {
 			checkIntro();
 		}
 
@@ -11204,6 +11397,7 @@ function MainWidget($$anchor, $$props) {
 	function handleReset() {
 		set(isResetting, true);
 		$$props.core.resetToDefault();
+		get$1(settingsIcon)?.resetPosition();
 
 		// Sync local state
 		set(navsVisible, true);
@@ -11279,17 +11473,36 @@ function MainWidget($$anchor, $$props) {
 
 			{
 				var consequent = ($$anchor) => {
-					IntroCallout($$anchor, {
-						get position() {
-							return $$props.options.position;
-						},
-
-						get message() {
-							return $$props.options.welcomeMessage;
-						},
-
-						onclose: dismissCallout
-					});
+					{
+						let $0 = user_derived(() => $$props.options.callout?.message);
+						let $1 = user_derived(() => $$props.options.callout?.enablePulse);
+						let $2 = user_derived(() => $$props.options.callout?.backgroundColor);
+						let $3 = user_derived(() => $$props.options.callout?.textColor);
+
+						IntroCallout($$anchor, {
+							get position() {
+								return $$props.options.icon.position;
+							},
+
+							get message() {
+								return get$1($0);
+							},
+
+							get enablePulse() {
+								return get$1($1);
+							},
+
+							get backgroundColor() {
+								return get$1($2);
+							},
+
+							get textColor() {
+								return get$1($3);
+							},
+
+							onclose: dismissCallout
+						});
+					}
 				};
 
 				if_block(node_1, ($$render) => {
@@ -11327,21 +11540,48 @@ function MainWidget($$anchor, $$props) {
 
 			var node_5 = sibling(node_4, 2);
 
-			WidgetIcon(node_5, {
-				get position() {
-					return $$props.options.position;
-				},
+			{
+				let $0 = user_derived(() => $$props.options.icon?.color);
+				let $1 = user_derived(() => $$props.options.icon?.backgroundColor);
+				let $2 = user_derived(() => $$props.options.icon?.opacity);
+				let $3 = user_derived(() => $$props.options.icon?.scale);
 
-				get title() {
-					return $$props.options.title;
-				},
+				bind_this(
+					SettingsIcon(node_5, {
+						get position() {
+							return $$props.options.icon.position;
+						},
 
-				get pulse() {
-					return get$1(showPulse);
-				},
+						get title() {
+							return $$props.options.panel.title;
+						},
 
-				onclick: openModal
-			});
+						get pulse() {
+							return get$1(showPulse);
+						},
+
+						onclick: openModal,
+
+						get iconColor() {
+							return get$1($0);
+						},
+
+						get backgroundColor() {
+							return get$1($1);
+						},
+
+						get opacity() {
+							return get$1($2);
+						},
+
+						get scale() {
+							return get$1($3);
+						}
+					}),
+					($$value) => set(settingsIcon, $$value, true),
+					() => get$1(settingsIcon)
+				);
+			}
 
 			var node_6 = sibling(node_5, 2);
 
@@ -11349,19 +11589,19 @@ function MainWidget($$anchor, $$props) {
 				var consequent_2 = ($$anchor) => {
 					Modal($$anchor, {
 						get title() {
-							return $$props.options.title;
+							return $$props.options.panel.title;
 						},
 
 						get description() {
-							return $$props.options.description;
+							return $$props.options.panel.description;
 						},
 
 						get showReset() {
-							return $$props.options.showReset;
+							return $$props.options.panel.showReset;
 						},
 
 						get showTabGroups() {
-							return $$props.options.showTabGroups;
+							return $$props.options.panel.showTabGroups;
 						},
 
 						get toggles() {
@@ -11420,33 +11660,46 @@ function MainWidget($$anchor, $$props) {
 	$$cleanup();
 }
 
-class CustomViewsWidget {
+class CustomViewsSettings {
     app = null;
     options;
     constructor(options) {
         // Set defaults
         this.options = {
-            core: options.core,
+            core: options.core, // 'core' is a required property and must be explicitly passed
             container: options.container || document.body,
-            position: options.position || 'middle-left',
             theme: options.theme || 'light',
-            showReset: options.showReset ?? true,
-            title: options.title || 'Customize View',
-            description: options.description || '',
-            showWelcome: options.showWelcome ?? false,
-            welcomeMessage: options.welcomeMessage || 'Customize your reading experience (theme, toggles, tabs) here.',
-            showTabGroups: options.showTabGroups ?? true
+            panel: {
+                title: options.panel?.title || 'Customize View',
+                description: options.panel?.description || '',
+                showTabGroups: options.panel?.showTabGroups ?? true,
+                showReset: options.panel?.showReset ?? true
+            },
+            callout: {
+                show: options.callout?.show ?? false,
+                message: options.callout?.message || 'Customize your reading experience here.',
+                enablePulse: options.callout?.enablePulse ?? true,
+                backgroundColor: options.callout?.backgroundColor,
+                textColor: options.callout?.textColor
+            },
+            icon: {
+                position: options.icon?.position || 'middle-left',
+                color: options.icon?.color,
+                backgroundColor: options.icon?.backgroundColor,
+                opacity: options.icon?.opacity,
+                scale: options.icon?.scale ?? 1
+            }
         };
     }
     /**
-     * Render the widget
+     * Render the settings widget
      */
     renderModalIcon() {
         if (this.app) {
             return;
         }
         // Mount Svelte App using Svelte 5 API
-        this.app = mount(MainWidget, {
+        this.app = mount(Settings, {
             target: this.options.container,
             props: {
                 core: this.options.core,
@@ -11455,7 +11708,7 @@ class CustomViewsWidget {
         });
     }
     /**
-     * Remove the widget from DOM
+     * Remove the settings widget from DOM
      */
     destroy() {
         if (this.app) {
@@ -11607,12 +11860,13 @@ function renderAssetInto(el, assetId, assetsManager) {
     }
 }
 
-var root_1$1 = from_html(`<button class="cv-expand-btn svelte-1x95rqi"><!></button>`);
-var root$2 = from_html(`<div><div class="cv-toggle-content svelte-1x95rqi"><!></div> <!></div>`);
+var root_1$1 = from_html(`<div class="cv-toggle-label svelte-1x95rqi"> </div>`);
+var root_2$1 = from_html(`<button class="cv-expand-btn svelte-1x95rqi"><!></button>`);
+var root$2 = from_html(`<div><!> <div class="cv-toggle-content svelte-1x95rqi"><div class="cv-toggle-inner svelte-1x95rqi"><!></div></div> <!></div>`);
 
 const $$css$4 = {
 	hash: 'svelte-1x95rqi',
-	code: ':host {display:block;margin-bottom:24px;position:relative;z-index:1;overflow:visible;}\n\n  /* Host visibility control */:host([hidden]) {display:none;}.cv-toggle-wrapper.svelte-1x95rqi {position:relative;width:100%;transition:all 0.3s ease;}.cv-toggle-content.svelte-1x95rqi {overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease;}\n\n  /* Hidden State */.hidden.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {max-height:0;opacity:0;pointer-events:none;}\n  \n  /* Visible / Expanded State */.expanded.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {max-height:none; /* or a large value if we want transition, but \'none\' is cleaner for layout */opacity:1;transform:translateY(0);}\n\n  /* Peek State */.peeking.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {max-height:70px;opacity:1;\n    /* Mask for fade out effect */mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}\n\n  /* Expand Button */.cv-expand-btn.svelte-1x95rqi {position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:flex;background:transparent;border:none;border-radius:50%;padding:4px;width:32px;height:32px;cursor:pointer;z-index:100;align-items:center;justify-content:center;color:#888;transition:all 0.2s ease;}.cv-expand-btn.svelte-1x95rqi:hover {background:rgba(0, 0, 0, 0.05);color:#000;transform:translateX(-50%) scale(1.1);}\n\n  /* Accessing SVG inside button - might need :global if SVG is injected as HTML or just plain styles since it adheres to current scope */.cv-expand-btn.svelte-1x95rqi svg {display:block;opacity:0.6;width:24px;height:24px;transition:opacity 0.2s;}.cv-expand-btn.svelte-1x95rqi:hover svg {opacity:1;}'
+	code: ':host {display:block;position:relative;z-index:1;overflow:visible;}\n\n  /* Host visibility control */:host([hidden]) {display:none;}.cv-toggle-wrapper.svelte-1x95rqi {position:relative;width:100%;transition:all 0.3s ease;margin-bottom:4px;}.cv-toggle-wrapper.hidden.svelte-1x95rqi {margin-bottom:0;}.cv-toggle-wrapper.peek-mode.svelte-1x95rqi {margin-bottom:24px;}.cv-toggle-content.svelte-1x95rqi {overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0s;\n    /* CSS max-height defaults are handled by inline styles now */}.cv-toggle-inner.svelte-1x95rqi {display:flow-root; /* Ensures margins of children are contained */}\n\n  /* Hidden State */.hidden.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:0;pointer-events:none;}\n\n  /* Bordered State */.has-border.svelte-1x95rqi {box-sizing:border-box; /* Ensure padding/border doesn\'t increase width */\n    \n    /* Dashed border */border:2px dashed rgba(0, 0, 0, 0.15);border-bottom:none;\n    \n    /* Inner shadow to look like it\'s going into something + outer shadow */box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), /* Subtle outer */\n      inset 0 -15px 10px -10px rgba(0, 0, 0, 0.1); /* Inner bottom shadow */border-radius:8px 8px 0 0;padding:12px 0 0 0; /* bottom 0 px until expanded */margin-top:4px;}\n  \n  /* Visible / Expanded State */.expanded.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:1;transform:translateY(0);overflow:visible;transition:max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0.3s;}\n\n  /* When expanded, complete the border */.has-border.expanded.svelte-1x95rqi {border-bottom:2px dashed rgba(0, 0, 0, 0.15);border-radius:8px; /* Round all corners */padding-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05); /* Remove inner shadow when expanded */}\n\n  /* Peek State */.peeking.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:1;\n    /* Mask for fade out effect */mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}\n  \n  /* Label Style */.cv-toggle-label.svelte-1x95rqi {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-1x95rqi .cv-toggle-label:where(.svelte-1x95rqi) {top:-10px;left:0;}\n\n  /* Expand Button */.cv-expand-btn.svelte-1x95rqi {position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);display:flex;background:transparent;border:none;border-radius:50%;padding:4px;width:32px;height:32px;cursor:pointer;z-index:100;align-items:center;justify-content:center;color:#888;transition:all 0.2s ease;}.cv-expand-btn.svelte-1x95rqi:hover {background:rgba(0, 0, 0, 0.05);color:#000;transform:translateX(-50%) scale(1.1);}\n\n  /* Accessing SVG inside button - might need :global if SVG is injected as HTML or just plain styles since it adheres to current scope */.cv-expand-btn.svelte-1x95rqi svg {display:block;opacity:0.6;width:24px;height:24px;transition:opacity 0.2s;}.cv-expand-btn.svelte-1x95rqi:hover svg {opacity:1;}'
 };
 
 function Toggle($$anchor, $$props) {
@@ -11621,18 +11875,32 @@ function Toggle($$anchor, $$props) {
 
 	// Props using Svelte 5 runes
 	let toggleId = prop($$props, 'toggleId', 7, ''),
-		assetId = prop($$props, 'assetId', 7, '');
+		assetId = prop($$props, 'assetId', 7, ''),
+		showPeekBorder = prop($$props, 'showPeekBorder', 7, false),
+		showLabel = prop($$props, 'showLabel', 7, false);
 
 	// Derive toggle IDs from toggle-id prop (can have multiple space-separated IDs)
 	let toggleIds = user_derived(() => (toggleId() || '').split(/\s+/).filter(Boolean));
 
+	let toggleConfig = user_derived(() => store.config.toggles?.find((t) => t.toggleId === get$1(toggleIds)[0]));
+
 	user_effect(() => {
 		get$1(toggleIds).forEach((id) => store.registerToggle(id));
 	});
 
+	// Derive label text from config
+	let labelText = user_derived(() => {
+		if (!get$1(toggleConfig)) return '';
+
+		return get$1(toggleConfig).label || get$1(toggleIds)[0];
+	});
+
 	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);
 
 	// Derive visibility from store state
 	let showState = user_derived(() => {
@@ -11651,21 +11919,77 @@ function Toggle($$anchor, $$props) {
 	const PEEK_HEIGHT = 70;
 	let isSmallContent = state(false);
 
-	// Check content height when peeking
+	// Setup ResizeObserver to track content height changes (e.g. images loading, window resize)
 	user_effect(() => {
-		if (contentEl && get$1(peekState)) {
-			// We only care if it's small when we are effectively peeking
-			set(isSmallContent, contentEl.scrollHeight <= PEEK_HEIGHT);
+		if (!contentEl) return;
+
+		const observer = new ResizeObserver(() => {
+			// We measure the inner element's height
+			// contentEl is the window, innerEl is the content
+			if (innerEl) {
+				set(scrollHeight, innerEl.offsetHeight, true);
+			}
+
+			// Always track small content state to avoid race conditions/stale state
+			if (get$1(scrollHeight) > 0) {
+				if (get$1(scrollHeight) <= PEEK_HEIGHT) {
+					set(isSmallContent, true);
+				} else if (!get$1(isSmallContent)) {
+					// Only set to false if it wasn't already true (latch behavior)
+					// This ensures if it STARTS small, growing won't add the button.
+					set(isSmallContent, false);
+				}
+			}
+		});
+
+		if (innerEl) {
+			observer.observe(innerEl);
+			set(scrollHeight, innerEl.offsetHeight, true);
 		}
+
+		return () => {
+			observer.disconnect();
+		};
 	});
 
-	let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded));
+	let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded) || get$1(peekState) && get$1(isSmallContent));
+
+	// Reset unconstrained state when toggling
+	user_effect(() => {
+		if (get$1(showFullContent)) {
+			// Expanding: start constrained (to animate), will unlock on transitionend
+			set(isUnconstrained, false);
+		} else {
+			// Collapsing: must recapture height immediately (snap) or stay constrained
+			set(isUnconstrained, false);
+		}
+	});
 
 	// Only show peek styling (mask) if it's peeking, not expanded locally, AND content is actually taller than peek height
 	let showPeekContent = user_derived(() => !get$1(showState) && get$1(peekState) && !get$1(localExpanded) && !get$1(isSmallContent));
 
 	let isHidden = user_derived(() => !get$1(showState) && !get$1(peekState));
 
+	// Calculate dynamic max-height for animation
+	let currentMaxHeight = user_derived(() => {
+		if (get$1(isHidden)) return '0px';
+		if (get$1(isUnconstrained) && get$1(showFullContent)) return 'none'; /* Release constraint when stable */
+		if (get$1(showPeekContent)) return `${PEEK_HEIGHT}px`;
+		if (get$1(showFullContent)) return get$1(scrollHeight) > 0 ? `${get$1(scrollHeight)}px` : '9999px';
+
+		return '0px';
+	});
+
+	function handleTransitionEnd(e) {
+		// Only care about max-height transitions on the content element
+		if (e.propertyName !== 'max-height' || e.target !== contentEl) return;
+
+		// If we finished expanding, release the height constraint
+		if (get$1(showFullContent)) {
+			set(isUnconstrained, true);
+		}
+	}
+
 	function toggleExpand(e) {
 		e.stopPropagation();
 		set(localExpanded, !get$1(localExpanded));
@@ -11696,47 +12020,93 @@ function Toggle($$anchor, $$props) {
 		set assetId($$value = '') {
 			assetId($$value);
 			flushSync();
+		},
+
+		get showPeekBorder() {
+			return showPeekBorder();
+		},
+
+		set showPeekBorder($$value = false) {
+			showPeekBorder($$value);
+			flushSync();
+		},
+
+		get showLabel() {
+			return showLabel();
+		},
+
+		set showLabel($$value = false) {
+			showLabel($$value);
+			flushSync();
 		}
 	};
 
 	var div = root$2();
 	let classes;
-	var div_1 = child(div);
-	var node = child(div_1);
+	var node = child(div);
 
-	slot(node, $$props, 'default', {});
-	reset(div_1);
-	bind_this(div_1, ($$value) => contentEl = $$value, () => contentEl);
+	{
+		var consequent = ($$anchor) => {
+			var div_1 = root_1$1();
+			var text = child(div_1, true);
+
+			reset(div_1);
+			template_effect(() => set_text(text, get$1(labelText)));
+			append($$anchor, div_1);
+		};
 
-	var node_1 = sibling(div_1, 2);
+		if_block(node, ($$render) => {
+			if (showLabel() && get$1(labelText) && !get$1(isHidden)) $$render(consequent);
+		});
+	}
+
+	var div_2 = sibling(node, 2);
+	let styles;
+	var div_3 = child(div_2);
+	var node_1 = child(div_3);
+
+	slot(node_1, $$props, 'default', {});
+	reset(div_3);
+	bind_this(div_3, ($$value) => innerEl = $$value, () => innerEl);
+	reset(div_2);
+	bind_this(div_2, ($$value) => contentEl = $$value, () => contentEl);
+
+	var node_2 = sibling(div_2, 2);
 
 	{
-		var consequent = ($$anchor) => {
-			var button = root_1$1();
+		var consequent_1 = ($$anchor) => {
+			var button = root_2$1();
 
 			button.__click = toggleExpand;
 
-			var node_2 = child(button);
+			var node_3 = child(button);
 
-			html(node_2, () => get$1(localExpanded) ? getChevronUpIcon() : getChevronDownIcon());
+			html(node_3, () => get$1(localExpanded) ? getChevronUpIcon() : getChevronDownIcon());
 			reset(button);
 			template_effect(() => set_attribute(button, 'aria-label', get$1(localExpanded) ? "Collapse content" : "Expand content"));
 			append($$anchor, button);
 		};
 
-		if_block(node_1, ($$render) => {
-			if (get$1(peekState) && !get$1(isSmallContent)) $$render(consequent);
+		if_block(node_2, ($$render) => {
+			if (get$1(peekState) && !get$1(isSmallContent)) $$render(consequent_1);
 		});
 	}
 
 	reset(div);
 
-	template_effect(() => classes = set_class(div, 1, 'cv-toggle-wrapper svelte-1x95rqi', null, classes, {
-		expanded: get$1(showFullContent) && !get$1(showPeekContent),
-		peeking: get$1(showPeekContent),
-		hidden: get$1(isHidden)
-	}));
+	template_effect(() => {
+		classes = set_class(div, 1, 'cv-toggle-wrapper svelte-1x95rqi', null, classes, {
+			expanded: get$1(showFullContent) && !get$1(showPeekContent),
+			peeking: get$1(showPeekContent),
+			'peek-mode': get$1(peekState),
+			hidden: get$1(isHidden),
+			'has-border': showPeekBorder() && get$1(peekState)
+		});
 
+		styles = set_style(div_2, '', styles, { 'max-height': get$1(currentMaxHeight) });
+	});
+
+	event('transitionend', div_2, handleTransitionEnd);
 	append($$anchor, div);
 
 	return pop($$exports);
@@ -11748,7 +12118,15 @@ customElements.define('cv-toggle', create_custom_element(
 	Toggle,
 	{
 		toggleId: { attribute: 'toggle-id', reflect: true, type: 'String' },
-		assetId: { attribute: 'asset-id', reflect: true, type: 'String' }
+		assetId: { attribute: 'asset-id', reflect: true, type: 'String' },
+
+		showPeekBorder: {
+			attribute: 'show-peek-border',
+			reflect: true,
+			type: 'Boolean'
+		},
+
+		showLabel: { attribute: 'show-label', reflect: true, type: 'Boolean' }
 	},
 	['default'],
 	[],
@@ -11759,7 +12137,7 @@ var root$1 = from_html(`<div><!></div>`);
 
 const $$css$3 = {
 	hash: 'svelte-17fgzpj',
-	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-17fgzpj {display:none;\n    animation: svelte-17fgzpj-fade-in 0.2s ease-in-out;padding:1rem 0.5rem 0.5rem 0.5rem;}.cv-tab-content.active.svelte-17fgzpj {display:block;}\n\n  /* Hide cv-tab-header source element; content is extracted to nav link */.svelte-17fgzpj::slotted(cv-tab-header) {display:none !important;}\n\n  /* Allow cv-tab-body to flow naturally */.svelte-17fgzpj::slotted(cv-tab-body) {display:block;}\n\n  @keyframes svelte-17fgzpj-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }'
+	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-17fgzpj {display:none;\n    animation: svelte-17fgzpj-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-17fgzpj {display:block;}\n\n  /* Hide cv-tab-header source element; content is extracted to nav link */.svelte-17fgzpj::slotted(cv-tab-header) {display:none !important;}\n\n  /* Allow cv-tab-body to flow naturally */.svelte-17fgzpj::slotted(cv-tab-body) {display:block;}\n\n  @keyframes svelte-17fgzpj-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }'
 };
 
 function Tab($$anchor, $$props) {
@@ -11808,7 +12186,8 @@ customElements.define('cv-tab', create_custom_element(
 
 var root_2 = from_html(`<li class="nav-item svelte-1630cmg"><a role="tab" title="Double-click a tab to 'pin' it in all similar tab groups."><span class="cv-tab-header-container svelte-1630cmg"><span class="cv-tab-header-text svelte-1630cmg"><!></span> <span class="cv-tab-pin-icon svelte-1630cmg"><!></span></span></a></li>`);
 var root_1 = from_html(`<ul class="cv-tabs-nav nav-tabs svelte-1630cmg" role="tablist"></ul>`);
-var root = from_html(`<div class="cv-tabgroup-container"><!> <div class="cv-tabgroup-content"><!></div> <div class="cv-tabgroup-bottom-border svelte-1630cmg"></div></div>`);
+var root_3 = from_html(`<link rel="stylesheet"/>`);
+var root = from_html(`<div class="cv-tabgroup-container"><!> <!> <div class="cv-tabgroup-content"><!></div> <div class="cv-tabgroup-bottom-border svelte-1630cmg"></div></div>`);
 
 const $$css$2 = {
 	hash: 'svelte-1630cmg',
@@ -12062,10 +12441,19 @@ function TabGroup($$anchor, $$props) {
 		});
 	}
 
-	var div_1 = sibling(node, 2);
-	var node_3 = child(div_1);
+	var node_3 = sibling(node, 2);
+
+	each(node_3, 16, () => Array.from(document.querySelectorAll('link[rel="stylesheet"]')), index, ($$anchor, link) => {
+		var link_1 = root_3();
+
+		template_effect(() => set_attribute(link_1, 'href', link.href));
+		append($$anchor, link_1);
+	});
+
+	var div_1 = sibling(node_3, 2);
+	var node_4 = child(div_1);
 
-	slot(node_3, $$props, 'default', {});
+	slot(node_4, $$props, 'default', {});
 	reset(div_1);
 	bind_this(div_1, ($$value) => set(contentWrapper, $$value), () => get$1(contentWrapper));
 	next(2);
@@ -12174,7 +12562,7 @@ class CustomViews {
 exports.AssetsManager = AssetsManager;
 exports.CustomViews = CustomViews;
 exports.CustomViewsCore = CustomViewsCore;
-exports.CustomViewsWidget = CustomViewsWidget;
+exports.CustomViewsSettings = CustomViewsSettings;
 exports.PersistenceManager = PersistenceManager;
 exports.URLStateManager = URLStateManager;
 //# sourceMappingURL=custom-views.cjs.js.map