@c15t/svelte 3.0.0-alpha.0

package/dist/components/consent-dev-tools.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { createDevTools } from '@c15t/dev-tools';
+	import { untrack } from 'svelte';
+
+	import { getConsentContext } from '../context.svelte';
+	import type { ConsentDevToolsProps } from '../devtools-options';
+
+	let {
+		clearRecords,
+		getPresentation,
+		defaultOpen,
+		defaultTab,
+		getConsentCategories,
+		maxEvents,
+		position,
+	}: ConsentDevToolsProps = $props();
+	const context = getConsentContext();
+	// Snapshot updates can return a new array with the same categories. Only
+	// recreate the inspector when the displayed scope actually changes.
+	const categoryKey = $derived(
+		JSON.stringify(
+			[
+				...new Set(getConsentCategories?.() ?? context.state.consentCategories),
+			].sort()
+		)
+	);
+
+	const viewKey = $derived(
+		JSON.stringify({
+			categoryKey,
+			defaultOpen,
+			defaultTab,
+			maxEvents,
+			position,
+		})
+	);
+
+	$effect(() => {
+		const { categoryKey: scopeKey, ...settings } = JSON.parse(viewKey) as Pick<
+			ConsentDevToolsProps,
+			'defaultOpen' | 'defaultTab' | 'maxEvents' | 'position'
+		> & { categoryKey: string };
+		const categories = JSON.parse(scopeKey) as ReturnType<
+			NonNullable<ConsentDevToolsProps['getConsentCategories']>
+		>;
+		const options = {
+			...settings,
+			clearRecords: () => (clearRecords ?? context.clearRecords)(),
+			getConsentCategories: () => categories,
+			getPresentation: () =>
+				getPresentation ? getPresentation() : context.state.presentation,
+			kernel: context.kernel,
+		};
+		const devTools = untrack(() => createDevTools(options));
+
+		return () => devTools.destroy();
+	});
+</script>

package/dist/components/consent-dev-tools.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ConsentDevToolsProps } from '../devtools-options';
+declare const ConsentDevTools: import("svelte").Component<ConsentDevToolsProps, {}, "">;
+type ConsentDevTools = ReturnType<typeof ConsentDevTools>;
+export default ConsentDevTools;

package/dist/components/frame.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { AllConsentNames } from '@c15t/core';
+	import { defaultTranslationConfig } from '@c15t/core';
+	import styles from '@c15t/ui/styles/components/frame';
+	import { resolveTranslations } from '@c15t/ui/utils';
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	import { getConsentContext, getThemeContext } from '../context.svelte';
+	import ConsentButton from './action-button.svelte';
+
+	let {
+		category,
+		children,
+		placeholder,
+		noStyle: localNoStyle,
+		class: className,
+	}: {
+		category: AllConsentNames;
+		children?: Snippet;
+		placeholder?: Snippet;
+		noStyle?: boolean;
+		class?: string;
+	} = $props();
+
+	const consent = getConsentContext();
+	const theme = getThemeContext();
+
+	const noStyle = $derived(localNoStyle ?? theme.noStyle ?? false);
+	const hasConsent = $derived(
+		consent.state.effectivePermissions[category] ?? false
+	);
+
+	const translations = $derived(
+		resolveTranslations(
+			consent.state.translationConfig,
+			defaultTranslationConfig
+		)
+	);
+	const frameTitle = $derived(
+		(
+			translations.frame?.title ??
+			'Accept {category} consent to view this content.'
+		).replace(
+			'{category}',
+			translations.consentTypes?.[category]?.title ?? (category as string)
+		)
+	);
+	const frameActionButton = $derived(
+		(translations.frame?.actionButton ?? 'Enable {category} consent').replace(
+			'{category}',
+			translations.consentTypes?.[category]?.title ?? (category as string)
+		)
+	);
+
+	let isMounted = $state(false);
+	let isReady = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+		requestAnimationFrame(() => {
+			isReady = true;
+		});
+	});
+</script>
+
+<div class={className}>
+	{#if !isMounted || !isReady}
+		<!-- Prevent FOUC: show nothing until ready -->
+	{:else if hasConsent}
+		{#if children}
+			{@render children()}
+		{/if}
+	{:else if placeholder}
+		{@render placeholder()}
+	{:else}
+		<!-- Default placeholder -->
+		<div
+			class={noStyle ? '' : styles.placeholder || ''}
+			data-testid="frame-placeholder"
+		>
+			<div class={noStyle ? '' : styles.title || ''}>{frameTitle}</div>
+			<ConsentButton
+				action="open-consent-dialog"
+				variant="primary"
+				mode="stroke"
+				size="small"
+				{noStyle}
+				data-testid="frame-open-dialog"
+			>
+				{frameActionButton}
+			</ConsentButton>
+		</div>
+	{/if}
+</div>

package/dist/components/frame.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AllConsentNames } from '@c15t/core';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    category: AllConsentNames;
+    children?: Snippet;
+    placeholder?: Snippet;
+    noStyle?: boolean;
+    class?: string;
+};
+declare const Frame: import("svelte").Component<$$ComponentProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;