@finsweet/webflow-apps-utils 1.0.24 → 1.0.26

package/dist/ui/components/button-group/ButtonGroup.stories.d.ts

@@ -0,0 +1,45 @@
+import type { StoryObj } from '@storybook/sveltekit';
+import type { ButtonGroupProps } from './types.js';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<ButtonGroupProps, {}, "selected">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        buttons: {
+            control: "object";
+            description: string;
+        };
+        selected: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        id: {
+            control: "text";
+            description: string;
+        };
+        onselect: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutSelection: Story;
+export declare const Disabled: Story;
+export declare const LongLabels: Story;
+export declare const ManyOptions: Story;
+export declare const Interactive: Story;

package/dist/ui/components/button-group/ButtonGroup.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	interface Props {
-		id?: string;
-		buttons?: { name: string; value: string }[];
-		selected?: string;
-		disabled?: boolean;
-		onselect?: (value: string) => void;
-	}
+	import type { ButtonGroupProps } from './types.js';
 
-	let { id, buttons = [], selected = $bindable(), disabled = false, onselect }: Props = $props();
+	let {
+		id,
+		buttons = [],
+		selected = $bindable(),
+		disabled = false,
+		onselect
+	}: ButtonGroupProps = $props();
 
 	/**
 	 * Sets selected value and dispatches the select event.

package/dist/ui/components/button-group/ButtonGroup.svelte.d.ts

@@ -1,13 +1,4 @@
-interface Props {
-    id?: string;
-    buttons?: {
-        name: string;
-        value: string;
-    }[];
-    selected?: string;
-    disabled?: boolean;
-    onselect?: (value: string) => void;
-}
-declare const ButtonGroup: import("svelte").Component<Props, {}, "selected">;
+import type { ButtonGroupProps } from './types.js';
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "selected">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -50,28 +50,6 @@
 		id
 	}: Props = $props();
 
-	// Remove local inputValue state
-	// let inputValue = $state(color);
-
-	// Helper: normalize hex to 6-digit uppercase
-	// function normalizeHex(value: string): string {
-	// 	if (/^#[A-Fa-f0-9]{3}$/.test(value)) {
-	// 		return (
-	// 			'#' +
-	// 			value
-	// 				.slice(1)
-	// 				.split('')
-	// 				.map((c) => c + c)
-	// 				.join('')
-	// 				.toUpperCase()
-	// 		);
-	// 	}
-	// 	if (/^#[A-Fa-f0-9]{6}$/.test(value)) {
-	// 		return value.toUpperCase();
-	// 	}
-	// 	return value;
-	// }
-
 	function isValidColor(value: string): boolean {
 		const hexRegex = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
 		return hexRegex.test(value.startsWith('#') ? value.slice(1) : value);
@@ -211,11 +189,19 @@
 		color = fullColor.hex;
 	}
 
+	function handleDragEnd() {
+		// Signal the tooltip to ignore the next click event
+		// This prevents the tooltip from closing when dragging and releasing outside
+		tooltipRef?.ignoreNextClickEvent?.();
+	}
+
 	let showColorSelect = $state(defaultShowColorSelect);
+	let tooltipRef: { ignoreNextClickEvent?: () => void } | undefined = $state();
 </script>
 
 <div class="color-picker">
 	<Tooltip
+		bind:this={tooltipRef}
 		listener="click"
 		listenerout="click"
 		showArrow={false}
@@ -235,7 +221,7 @@
 		{/snippet}
 		{#snippet tooltip()}
 			{#if showColorSelect}
-				<ColorSelect bind:color oncolorchange={handleFullColorChange} />
+				<ColorSelect bind:color oncolorchange={handleFullColorChange} ondragend={handleDragEnd} />
 			{/if}
 		{/snippet}
 	</Tooltip>
@@ -275,6 +261,11 @@
 			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
 			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
 			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
 	}
 
 	.color-picker__swatch {

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -12,9 +12,14 @@
 		alpha: number;
 	}
 
-	let { color = $bindable('#fff'), oncolorchange } = $props<{
+	let {
+		color = $bindable('#fff'),
+		oncolorchange,
+		ondragend
+	} = $props<{
 		color?: string;
 		oncolorchange?: (fullColor: ColorObject) => void;
+		ondragend?: () => void;
 	}>();
 
 	function setColor(newColor: string) {
@@ -510,6 +515,8 @@
 		if (isDragging) {
 			isDragging = false;
 			dragTarget = null;
+			// Signal that a drag operation just ended
+			ondragend?.();
 		}
 
 		// Reset drag detection state

package/dist/ui/components/color-picker/ColorSelect.svelte.d.ts

@@ -24,6 +24,7 @@ interface ColorObject {
 type $$ComponentProps = {
     color?: string;
     oncolorchange?: (fullColor: ColorObject) => void;
+    ondragend?: () => void;
 };
 declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
 type ColorSelect = ReturnType<typeof ColorSelect>;

package/dist/ui/components/copy-text/CopyText.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import ClipboardJS from 'clipboard';
+	import copy from 'copy-text-to-clipboard';
 	import type { Snippet } from 'svelte';
-	import { onDestroy } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	import { CopyIcon, EyeIcon } from '../../icons';
@@ -30,7 +29,6 @@
 	let isCopied = $state(false);
 	let isCooldown = $state(false);
 	let copyButtonElement: HTMLDivElement | undefined = $state();
-	let clipboard: ClipboardJS | null = null;
 
 	function getProcessedContent() {
 		if (raw) {
@@ -63,50 +61,45 @@
 		}
 	};
 
-	// Initialize ClipboardJS when the element is available and not disabled
-	$effect(() => {
-		// Cleanup previous instance
-		clipboard?.destroy();
-		clipboard = null;
-
-		if (copyButtonElement && !disabled) {
-			clipboard = new ClipboardJS(copyButtonElement, {
-				text: () => {
-					if (disabled) {
-						const errorMessage = 'Copy is disabled';
-						handleNotification('Error', errorMessage);
-						onError?.(errorMessage);
-						return '';
-					}
-
-					return getProcessedContent();
-				}
-			});
-
-			clipboard.on('success', (e) => {
-				const copiedText = getProcessedContent();
-				isCopied = true;
-				handleNotification('Success', 'Copied to clipboard!');
-				onCopy?.(copiedText);
-				e.clearSelection();
-
-				// Reset copied state after 2 seconds
-				setTimeout(() => {
-					isCopied = false;
-				}, 2000);
-			});
-
-			clipboard.on('error', () => {
-				const errorMessage = 'Failed to copy. Please try again.';
-				handleNotification('Error', errorMessage);
-				onError?.(errorMessage);
-			});
+	/**
+	 * Handles copying text to clipboard
+	 */
+	const handleCopy = () => {
+		if (disabled) {
+			const errorMessage = 'Copy is disabled';
+			handleNotification('Error', errorMessage);
+			onError?.(errorMessage);
+			return;
+		}
+
+		const contentToCopy = getProcessedContent();
+		const success = copy(contentToCopy);
+
+		if (success) {
+			isCopied = true;
+			handleNotification('Success', 'Copied to clipboard!');
+			onCopy?.(contentToCopy);
+
+			// Reset copied state after 2 seconds
+			setTimeout(() => {
+				isCopied = false;
+			}, 2000);
+		} else {
+			const errorMessage = 'Failed to copy. Please try again.';
+			handleNotification('Error', errorMessage);
+			onError?.(errorMessage);
 		}
-	});
+	};
 
-	onDestroy(() => {
-		clipboard?.destroy();
-	});
+	/**
+	 * Handle keyboard events for accessibility
+	 */
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleCopy();
+		}
+	};
 </script>
 
 {#if !hidden}
@@ -128,6 +121,8 @@
 			tabindex="0"
 			aria-label={disabled ? 'Copy disabled' : tooltip}
 			title={tooltip}
+			onclick={handleCopy}
+			onkeydown={handleKeydown}
 		>
 			<div class="copy-button__content" id="copy-content">
 				{getProcessedContent()}

package/dist/ui/components/section/Section.stories.svelte

@@ -32,7 +32,7 @@
 			},
 			scrollable: {
 				control: 'boolean',
-				description: 'Enable scrollable content with OverlayScrollbars'
+				description: 'Enable scrollable content with native browser scrollbars'
 			},
 			class: {
 				control: 'text',

package/dist/ui/components/section/Section.svelte

@@ -1,9 +1,4 @@
 <script lang="ts">
-	import 'overlayscrollbars/overlayscrollbars.css';
-
-	import type { PartialOptions } from 'overlayscrollbars';
-	import { OverlayScrollbarsComponent } from 'overlayscrollbars-svelte';
-
 	import { WarningCircleOutlineIcon } from '../../icons';
 	import { Tooltip } from '../tooltip';
 	import type { SectionProps } from './types.js';
@@ -128,20 +123,6 @@
 		disabledMessage ||
 			`This option is disabled in edit mode. If you want to change it, please generate a new Component.`
 	);
-
-	// OverlayScrollbars options
-	let overlayScrollbarsOptions: PartialOptions = {
-		overflow: {
-			x: 'hidden',
-			y: 'scroll'
-		},
-		scrollbars: {
-			theme: 'os-theme-dark',
-			visibility: 'auto',
-			autoHide: 'leave',
-			autoHideDelay: 800
-		}
-	};
 </script>
 
 {#snippet sectionContent()}
@@ -166,11 +147,11 @@
 		{...restProps}
 	>
 		{#if scrollable}
-			<OverlayScrollbarsComponent options={overlayScrollbarsOptions} defer>
+			<div class="scrollable-content">
 				{#if children}
 					{@render children()}
 				{/if}
-			</OverlayScrollbarsComponent>
+			</div>
 		{:else if children}
 			{@render children()}
 		{/if}
@@ -290,38 +271,19 @@
 		transform: none !important;
 	}
 
-	.section-wrap.scrollable :global([data-overlayscrollbars-initialize]) {
-		width: 100% !important;
-		height: 100% !important;
-	}
-
 	/* Scrollable content styles */
 	.section-wrap.scrollable {
-		overflow: hidden; /* Let OverlayScrollbars handle the overflow */
-	}
-
-	/* OverlayScrollbars dark theme customization using design system */
-	.section-wrap :global(.os-scrollbar) {
-		--os-size: var(--sb-size);
-		--os-padding-perpendicular: 2px;
-		--os-padding-axis: 2px;
+		overflow: hidden; /* Parent container hides overflow */
 	}
 
-	.section-wrap :global(.os-scrollbar-track) {
-		background: var(--sb-track-color);
-		border-radius: 4px;
-	}
-
-	.section-wrap :global(.os-scrollbar-handle) {
-		background: var(--sb-thumb-color);
-		border-radius: 4px;
-	}
-
-	.section-wrap :global(.os-scrollbar-handle:hover) {
-		background: var(--background3);
-	}
-
-	.section-wrap :global(.os-scrollbar-handle:active) {
-		background: var(--background2);
+	.section-wrap.scrollable .scrollable-content {
+		width: 100%;
+		height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		/* Enable smooth scrolling */
+		scroll-behavior: smooth;
+		/* Add scrollbar gutter for consistent layout */
+		scrollbar-gutter: stable;
 	}
 </style>

package/dist/ui/components/section/Section.svelte.d.ts

@@ -1,4 +1,3 @@
-import 'overlayscrollbars/overlayscrollbars.css';
 import type { SectionProps } from './types.js';
 declare const Section: import("svelte").Component<SectionProps, {}, "">;
 type Section = ReturnType<typeof Section>;

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -64,6 +64,7 @@
 	let arrowElement: HTMLDivElement | undefined = $state();
 	let observer: MutationObserver | null = null;
 	let documentClickListener: ((event: MouseEvent) => void) | null = null;
+	let ignoreNextClick = $state(false);
 	const tooltipId = `tooltip-${uuidv4()}`;
 
 	/**
@@ -214,6 +215,12 @@
 
 			// Store reference to the click handler for cleanup
 			documentClickListener = (event: MouseEvent) => {
+				// Ignore clicks that happen immediately after a drag operation
+				if (ignoreNextClick) {
+					ignoreNextClick = false;
+					return;
+				}
+
 				if (
 					tooltipElement &&
 					toggle &&
@@ -263,6 +270,9 @@
 
 	export const show = () => tooltipInstance?.showTooltip();
 	export const hide = () => tooltipInstance?.hideTooltip();
+	export const ignoreNextClickEvent = () => {
+		ignoreNextClick = true;
+	};
 
 	// Svelte 5 effect for hidden prop
 	$effect(() => {

package/dist/ui/components/tooltip/Tooltip.svelte.d.ts

@@ -3,6 +3,7 @@ import type { TooltipProps } from './types';
 declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
+    ignoreNextClickEvent: () => void;
 }, "hidden" | "isActive">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/ui/icons/CMSIcon.svelte.d.ts

@@ -1,12 +1,12 @@
-export default CmsIcon;
-type CmsIcon = SvelteComponent<{
+export default CMSIcon;
+type CMSIcon = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const CmsIcon: $$__sveltets_2_IsomorphicComponent<{
+declare const CMSIcon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/ui/icons/DOMElement.svelte.d.ts

@@ -1,5 +1,5 @@
-export default DomElement;
-type DomElement = SvelteComponent<{
+export default DOMElement;
+type DOMElement = SvelteComponent<{
     width?: number | undefined;
     height?: number | undefined;
 }, {
@@ -7,7 +7,7 @@ type DomElement = SvelteComponent<{
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const DomElement: $$__sveltets_2_IsomorphicComponent<{
+declare const DOMElement: $$__sveltets_2_IsomorphicComponent<{
     width?: number | undefined;
     height?: number | undefined;
 }, {

package/dist/ui/icons/XL.svelte.d.ts

@@ -11,11 +11,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Xl: $$__sveltets_2_IsomorphicComponent<{
+declare const XL: $$__sveltets_2_IsomorphicComponent<{
     width?: number;
     height?: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Xl = InstanceType<typeof Xl>;
-export default Xl;
+type XL = InstanceType<typeof XL>;
+export default XL;

package/dist/ui/icons/XXL.svelte.d.ts

@@ -11,11 +11,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Xxl: $$__sveltets_2_IsomorphicComponent<{
+declare const XXL: $$__sveltets_2_IsomorphicComponent<{
     width?: number;
     height?: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Xxl = InstanceType<typeof Xxl>;
-export default Xxl;
+type XXL = InstanceType<typeof XXL>;
+export default XXL;

package/dist/ui/icons/XXXL.svelte.d.ts

@@ -11,11 +11,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Xxxl: $$__sveltets_2_IsomorphicComponent<{
+declare const XXXL: $$__sveltets_2_IsomorphicComponent<{
     width?: number;
     height?: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Xxxl = InstanceType<typeof Xxxl>;
-export default Xxxl;
+type XXXL = InstanceType<typeof XXXL>;
+export default XXXL;

package/dist/ui/index.css

@@ -4,7 +4,7 @@
 	/* custom scrollbar related */
 	--sb-track-color: #1e1e1e;
 	--sb-thumb-color: #373737;
-	--sb-size: 8px;
+	--sb-size: 6px;
 
 	/* Webflow colors */
 	--background1: #292929;
@@ -272,41 +272,6 @@ label {
 .not-allowed {
 	cursor: not-allowed !important;
 }
-/* OverlayScrollbars Global Theme */
-:root {
-	/* OverlayScrollbars theme variables using design system colors */
-	--os-size: var(--sb-size, 6px);
-	--os-padding-perpendicular: 0px;
-	--os-padding-axis: 0px;
-	--os-track-bg: var(--background1);
-	--os-handle-bg: var(--background4);
-	--os-handle-bg-hover: var(--background3);
-	--os-handle-bg-active: var(--background2);
-}
-
-/* OverlayScrollbars global dark theme */
-.os-theme-dark .os-scrollbar {
-	--os-size: var(--sb-size, 6px);
-}
-
-.os-theme-dark .os-scrollbar-track {
-	background: var(--background1);
-	border-radius: 4px;
-}
-
-.os-theme-dark .os-scrollbar-handle {
-	background: var(--background4);
-	border-radius: 4px;
-	transition: background-color 0.2s ease;
-}
-
-.os-theme-dark .os-scrollbar-handle:hover {
-	background: var(--background3);
-}
-
-.os-theme-dark .os-scrollbar-handle:active {
-	background: var(--background2);
-}
 
 input {
 	/* Remove default appearance for some browsers */
@@ -503,8 +468,9 @@ input::-webkit-inner-spin-button {
 	align-self: stretch;
 }
 
-/* Pure CSS Scrollbar */
+/* Modern Native Scrollbar Styles */
 
+/* Webkit browsers (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
 	width: var(--sb-size);
 	height: var(--sb-size);
@@ -518,10 +484,33 @@ input::-webkit-inner-spin-button {
 ::-webkit-scrollbar-thumb {
 	background: var(--sb-thumb-color);
 	border-radius: 4px;
+	transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--background3);
+}
+
+::-webkit-scrollbar-thumb:active {
+	background: var(--background2);
+}
+
+::-webkit-scrollbar-corner {
+	background: var(--sb-track-color);
+}
+
+/* Firefox scrollbar styling */
+@supports selector(::-moz-scrollbar-thumb) {
+	* {
+		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+		scrollbar-width: thin;
+	}
 }
 
+/* Fallback for Firefox without newer scrollbar support */
 @supports not selector(::-webkit-scrollbar) {
-	body {
+	html {
 		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+		scrollbar-width: thin;
 	}
 }

package/dist/ui/providers/globalContext.svelte.js

@@ -1,3 +1,4 @@
+/* eslint-disable svelte/prefer-svelte-reactivity */
 import { getContext, setContext } from 'svelte';
 import { createDebouncedUpdate, hasConfiguratorChanged, validateWatchOptions } from './configuratorUtils';
 const GLOBAL_CONTEXT_KEY = Symbol('global-context');

package/dist/ui/router/hooks.svelte.js

@@ -1,3 +1,4 @@
+/* eslint-disable svelte/prefer-svelte-reactivity */
 import { getContext } from 'svelte';
 /**
  * Get the router instance from context

package/dist/ui/router/router.svelte.js

@@ -1,3 +1,4 @@
+/* eslint-disable svelte/prefer-svelte-reactivity */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { routerStore } from '../../utils/stores';
 /**

package/dist/ui/utils/copy.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Copies the provided text to the clipboard.
+ */
+export declare const copyText: (text: string) => boolean;

package/dist/ui/utils/copy.js

@@ -0,0 +1,7 @@
+import copy from 'copy-text-to-clipboard';
+/**
+ * Copies the provided text to the clipboard.
+ */
+export const copyText = (text) => {
+    return copy(text);
+};

package/dist/ui/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './copy';
 export * from './diff-mapper';
 export * from './helpers';
 export * from './color-utils';

package/dist/ui/utils/index.js

@@ -1,3 +1,4 @@
+export * from './copy';
 export * from './diff-mapper';
 export * from './helpers';
 export * from './color-utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -87,7 +87,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "cheerio": "^1.1.0",
-    "clipboard": "^2.0.11",
+    "copy-text-to-clipboard": "^3.2.2",
     "csv-parse": "^5.6.0",
     "js-cookie": "^3.0.5",
     "just-debounce": "^1.1.0",
@@ -96,8 +96,6 @@
     "logrocket": "^10.1.0",
     "luxon": "^3.6.1",
     "motion": "^10.18.0",
-    "overlayscrollbars": "^2.11.4",
-    "overlayscrollbars-svelte": "^0.5.5",
     "svelte-routing": "^2.13.0",
     "swiper": "^11.2.8",
     "terser": "^5.43.1",