bsmnt 0.12.0 → 0.13.0

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/schemas/shared/spacing.ts

@@ -0,0 +1,164 @@
+export const spacingBreakpoints = ["mobile", "tablet", "desktop"] as const;
+
+export type SpacingBreakpoint = (typeof spacingBreakpoints)[number];
+
+export const spacingBreakpointMinWidth: Record<SpacingBreakpoint, number> = {
+	mobile: 0,
+	tablet: 768,
+	desktop: 1440,
+};
+
+export type SpacingStep = {
+	key: string;
+	name: string;
+	isDefault: boolean;
+} & Record<SpacingBreakpoint, number>;
+
+const fallbackSpacingStep: SpacingStep = {
+	key: "md",
+	name: "MD",
+	mobile: 24,
+	tablet: 28,
+	desktop: 32,
+	isDefault: true,
+};
+
+export const defaultSpacingSteps: SpacingStep[] = [
+	{
+		key: "xs",
+		name: "XS",
+		mobile: 12,
+		tablet: 14,
+		desktop: 16,
+		isDefault: false,
+	},
+	{
+		key: "sm",
+		name: "SM",
+		mobile: 16,
+		tablet: 20,
+		desktop: 24,
+		isDefault: false,
+	},
+	fallbackSpacingStep,
+	{
+		key: "lg",
+		name: "LG",
+		mobile: 32,
+		tablet: 40,
+		desktop: 48,
+		isDefault: false,
+	},
+	{
+		key: "xl",
+		name: "XL",
+		mobile: 48,
+		tablet: 64,
+		desktop: 80,
+		isDefault: false,
+	},
+];
+
+export type SpacingStepSource = {
+	_key?: string | null;
+	name?: string | null;
+	mobile?: number | null;
+	tablet?: number | null;
+	desktop?: number | null;
+	isDefault?: boolean | null;
+};
+
+export const spacingStepKey = (raw: string) =>
+	raw
+		.toLowerCase()
+		.replace(/[^a-z0-9-]/g, "")
+		.slice(0, 40);
+
+export const spacingVariable = (key: string) => `--section-space-${key}`;
+
+export const defaultSpacingVariable = spacingVariable("default");
+
+const FALLBACK_PADDING = "2.5rem";
+
+const readPx = (value: number | null | undefined) =>
+	typeof value === "number" && Number.isFinite(value) && value >= 0
+		? Math.round(value)
+		: null;
+
+export const resolveSpacingSteps = (
+	source?: readonly SpacingStepSource[] | null,
+): SpacingStep[] => {
+	const steps = (source ?? []).flatMap<SpacingStep>((entry) => {
+		const key = spacingStepKey(entry?._key ?? "");
+		const name = entry?.name?.trim();
+		const desktop = readPx(entry?.desktop);
+
+		if (!(key && name && desktop !== null)) return [];
+
+		return [
+			{
+				key,
+				name,
+				desktop,
+				tablet: readPx(entry?.tablet) ?? desktop,
+				mobile: readPx(entry?.mobile) ?? desktop,
+				isDefault: entry?.isDefault === true,
+			},
+		];
+	});
+
+	if (steps.length === 0) return defaultSpacingSteps;
+
+	if (steps.some((step) => step.isDefault)) {
+		let seen = false;
+		return steps.map((step) => {
+			const isDefault = step.isDefault && !seen;
+			if (isDefault) seen = true;
+			return { ...step, isDefault };
+		});
+	}
+
+	const middle = Math.floor((steps.length - 1) / 2);
+	return steps.map((step, index) => ({ ...step, isDefault: index === middle }));
+};
+
+export const getDefaultSpacingStep = (steps: SpacingStep[]): SpacingStep =>
+	steps.find((step) => step.isDefault) ?? steps[0] ?? fallbackSpacingStep;
+
+export const spacingPaddingValue = (key?: string | null) => {
+	const safe = key ? spacingStepKey(key) : "";
+	const fallback = `var(${defaultSpacingVariable}, ${FALLBACK_PADDING})`;
+
+	if (!safe || safe === "default") return fallback;
+
+	return `var(${spacingVariable(safe)}, ${fallback})`;
+};
+
+export const spacingScaleCss = (steps: SpacingStep[]) => {
+	const defaultStep = getDefaultSpacingStep(steps);
+
+	const rule = (breakpoint: SpacingBreakpoint) => {
+		const declarations = [
+			...steps.map(
+				(step) => `${spacingVariable(step.key)}:${step[breakpoint]}px`,
+			),
+			`${defaultSpacingVariable}:${defaultStep[breakpoint]}px`,
+		].join(";");
+
+		return `:root{${declarations}}`;
+	};
+
+	return [
+		rule("mobile"),
+		`@media (min-width:${spacingBreakpointMinWidth.tablet}px){${rule("tablet")}}`,
+		`@media (min-width:${spacingBreakpointMinWidth.desktop}px){${rule("desktop")}}`,
+	].join("");
+};
+
+export const spacingStepOptions = (steps: SpacingStep[]) =>
+	steps.map((step) => ({
+		value: step.key,
+		title: `${step.name} (${step.desktop}px · ${step.mobile}px mobile)${
+			step.isDefault ? " · default" : ""
+		}`,
+	}));

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/singletons.ts

@@ -3,6 +3,7 @@ import {
 	footerIcon,
 	navbarIcon,
 	pageListIcon,
+	spacingSettingsIcon,
 	structuredDataIcon,
 } from "./icons";
 
@@ -42,6 +43,12 @@ export const singletonLayout = [
 		title: "Structured Data",
 		icon: structuredDataIcon,
 	},
+	{
+		schemaType: "spacingSettings",
+		documentId: "spacingSettings",
+		title: "Spacing Scale",
+		icon: spacingSettingsIcon,
+	},
 ] as const;
 
 export const singletonComponentTypes: Set<string> = new Set(

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/tags.ts

@@ -8,12 +8,14 @@ export const SANITY_NAVBAR_TAG = "navbar";
 export const SANITY_FOOTER_TAG = "footer";
 export const SANITY_COMPANY_DATA_TAG = "companyData";
 export const SANITY_STRUCTURED_DATA_TAG = "structuredData";
+export const SANITY_SPACING_SETTINGS_TAG = "spacingSettings";
 
 export const SANITY_LAYOUT_TAGS = [
 	SANITY_NAVBAR_TAG,
 	SANITY_FOOTER_TAG,
 	SANITY_COMPANY_DATA_TAG,
 	SANITY_STRUCTURED_DATA_TAG,
+	SANITY_SPACING_SETTINGS_TAG,
 ] as const;
 
 export const SANITY_REDIRECTS_TAG = "redirect";

package/src/modules/features/consent/ketch/files/lib/integrations/check-integration.ts

@@ -0,0 +1,25 @@
+import { ketchBootUrl } from "@/lib/integrations/ketch/env"
+
+/**
+ * Integration Configuration Checker
+ *
+ * Utilities to check if integrations are configured via environment variables.
+ * This helps with tree-shaking unused integrations from the bundle.
+ *
+ * Usage:
+ * ```ts
+ * import { isKetchConfigured } from '@/integrations/check-integration'
+ *
+ * if (isKetchConfigured()) {
+ *   // Only render the CMP once it's actually configured
+ * }
+ * ```
+ */
+
+/**
+ * Check if Ketch (consent management) is configured. Derived from env.ts, not
+ * a second read of `process.env`.
+ */
+export function isKetchConfigured(): boolean {
+  return Boolean(ketchBootUrl)
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/README.md

@@ -0,0 +1,70 @@
+# Ketch consent integration (CMP)
+
+[Ketch](https://app.ketch.com) is the consent management platform. It decides,
+per visitor and per region, whether the site may run analytics or marketing
+trackers. **No tracking script may fire without asking it first.**
+
+## 1. Environment
+
+Both codes are public — they appear in the boot URL in the page source — so
+they go in as plain values:
+
+```bash
+NEXT_PUBLIC_KETCH_ORG_CODE=
+NEXT_PUBLIC_KETCH_PROPERTY_CODE=
+```
+
+Get them from the Ketch dashboard at https://app.ketch.com, or read them out
+of the boot URL if all you have is the raw `<script>` snippet:
+
+```
+https://global.ketchcdn.com/web/v3/config/<org>/<property>/boot.js
+```
+
+## 2. Checking consent
+
+One helper, always — categories are `essential`, `analytics`, `marketing`:
+
+```tsx
+const { hasConsent } = useConsent() // @/lib/integrations/ketch/use-consent
+
+useEffect(() => {
+  if (!hasConsent("analytics")) return
+  const tracker = start()
+  return () => tracker.stop() // this is what makes revocation work
+}, [hasConsent])
+```
+
+It returns `false` until Ketch resolves, so a tracker written this way cannot
+fire early. Never read `window.ketch`, cookies or `localStorage` directly —
+outside React, subscribe to `consentStore` from `./consent-store` instead.
+
+Map each tracker to a category in `categories.ts`'s `TRACKER_CONSENT_CATEGORY`
+so the mapping lives in one place and is reviewable. See the
+`ketch-consent-check` agent skill for the full walkthrough (loader shape,
+cleanup, SDKs without teardown).
+
+Preferences are reachable from `<ConsentPreferencesButton />` in the footer
+and from Ketch's own floating button (kept by default, since the footer entry
+point isn't guaranteed on every project this integration is added to). Hide
+the floating button in `ketch-experience.css` only once another entry point
+is confirmed to exist — see the `ketch-consent-setup` skill's UI reference.
+
+## 3. Region behaviour
+
+Ketch resolves a jurisdiction from the visitor's IP — nothing to configure in
+code. EEA/UK/Switzerland, California and Quebec are opt-in (nothing runs until
+the visitor accepts); Canada and 14 US states are opt-out (on until refused);
+everywhere else falls to `default`, which is notice-only. Because the helper
+stays denied until Ketch confirms, the site's own trackers wait for the
+record in every region.
+
+In a notice-only region the purpose toggles render locked as "Always Active"
+and the Accept/Reject buttons have nothing to change — that is the
+jurisdiction's configuration, not a bug.
+
+Also true for opt-out regions: consent is granted automatically with no
+banner interaction, so the banner won't come back on reload either. To test
+the real Accept/Reject UI from a region that defaults to notice-only, append
+`?ketch_jurisdiction=gdpr` to the URL — see the `ketch-consent-setup` skill's
+UI reference for the full mechanism.

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/categories.ts

@@ -0,0 +1,20 @@
+export const CONSENT_CATEGORIES = {
+  essential: "essential_services",
+  analytics: "analytics",
+  marketing: "targeted_advertising",
+} as const
+
+export type ConsentCategory = keyof typeof CONSENT_CATEGORIES
+
+export type KetchPurposeCode = (typeof CONSENT_CATEGORIES)[ConsentCategory]
+
+export const CONSENT_CATEGORY_LIST = Object.keys(
+  CONSENT_CATEGORIES
+) as ConsentCategory[]
+
+export const TRACKER_CONSENT_CATEGORY = {} as const satisfies Record<
+  string,
+  ConsentCategory
+>
+
+export type TrackedService = keyof typeof TRACKER_CONSENT_CATEGORY

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/consent-store.ts

@@ -0,0 +1,107 @@
+import {
+  CONSENT_CATEGORIES,
+  CONSENT_CATEGORY_LIST,
+  type ConsentCategory,
+} from "./categories"
+import type { KetchConsent, KetchJurisdictionEvent, KetchWindow } from "./types"
+
+export type ConsentSnapshot = {
+  isResolved: boolean
+  jurisdiction: string | null
+  granted: Readonly<Record<ConsentCategory, boolean>>
+}
+
+const denyAll = () =>
+  Object.fromEntries(
+    CONSENT_CATEGORY_LIST.map((category) => [category, false])
+  ) as Record<ConsentCategory, boolean>
+
+const UNRESOLVED: ConsentSnapshot = {
+  isResolved: false,
+  jurisdiction: null,
+  granted: denyAll(),
+}
+
+let snapshot: ConsentSnapshot = UNRESOLVED
+let isListening = false
+const listeners = new Set<() => void>()
+
+const notify = () => {
+  for (const listener of listeners) listener()
+}
+
+const getKetchWindow = () =>
+  typeof window === "undefined" ? null : (window as KetchWindow)
+
+const sendKetchCommand = (...command: unknown[]) => {
+  const ketchWindow = getKetchWindow()
+  if (!ketchWindow) return
+
+  if (typeof ketchWindow.ketch === "function") {
+    ketchWindow.ketch(...command)
+    return
+  }
+
+  ketchWindow.semaphore = ketchWindow.semaphore ?? []
+  ketchWindow.semaphore.push(command)
+}
+
+const readGranted = (consent: KetchConsent) => {
+  const purposes = consent?.purposes ?? {}
+  const granted = denyAll()
+
+  for (const category of CONSENT_CATEGORY_LIST) {
+    const value = purposes[CONSENT_CATEGORIES[category]]
+    granted[category] = value === true || value === "true"
+  }
+
+  return granted
+}
+
+const isSameGranted = (
+  a: Readonly<Record<ConsentCategory, boolean>>,
+  b: Readonly<Record<ConsentCategory, boolean>>
+) => CONSENT_CATEGORY_LIST.every((category) => a[category] === b[category])
+
+const handleConsent = (consent: KetchConsent) => {
+  const granted = readGranted(consent)
+  if (snapshot.isResolved && isSameGranted(snapshot.granted, granted)) return
+
+  snapshot = { ...snapshot, isResolved: true, granted }
+  notify()
+}
+
+const handleJurisdiction = (event: KetchJurisdictionEvent) => {
+  const code = typeof event === "string" ? event : event?.code
+  if (!code || code === snapshot.jurisdiction) return
+
+  snapshot = { ...snapshot, jurisdiction: code }
+  notify()
+}
+
+const startListening = () => {
+  if (isListening || !getKetchWindow()) return
+  isListening = true
+
+  sendKetchCommand("on", "consent", handleConsent)
+  sendKetchCommand("on", "jurisdiction", handleJurisdiction)
+}
+
+export const consentStore = {
+  subscribe: (listener: () => void) => {
+    startListening()
+    listeners.add(listener)
+
+    return () => {
+      listeners.delete(listener)
+    }
+  },
+  getSnapshot: () => snapshot,
+  getServerSnapshot: () => UNRESOLVED,
+  hasConsent: (category: ConsentCategory) => snapshot.granted[category],
+  openPreferences: () => {
+    sendKetchCommand("showConsent", {
+      displayHint: "experiences.consent.modal",
+    })
+  },
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/env.ts

@@ -0,0 +1,20 @@
+const KETCH_CODE_PATTERN = /^[a-z0-9_-]+$/i
+
+const readCode = (value: string | undefined) => {
+  const code = value?.trim()
+  if (!code || !KETCH_CODE_PATTERN.test(code)) return ""
+  return code
+}
+
+export const ketchOrganizationCode = readCode(
+  process.env.NEXT_PUBLIC_KETCH_ORG_CODE
+)
+
+export const ketchPropertyCode = readCode(
+  process.env.NEXT_PUBLIC_KETCH_PROPERTY_CODE
+)
+
+export const ketchBootUrl =
+  ketchOrganizationCode && ketchPropertyCode
+    ? `https://global.ketchcdn.com/web/v3/config/${ketchOrganizationCode}/${ketchPropertyCode}/boot.js`
+    : null

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/ketch-experience.css

@@ -0,0 +1,136 @@
+html:root {
+  --k-banner-container-background-color: var(--color-primary);
+  --k-banner-container-backdrop-background-color: transparent;
+  --k-banner-header-title-color: var(--color-secondary);
+  --k-banner-description-text-color: var(--color-secondary);
+  --k-banner-description-link-color: var(--color-contrast);
+  --k-banner-header-returnButton-background-color: var(--color-gray-100);
+  --k-banner-header-returnButton-icon-color: var(--color-secondary);
+  --k-banner-gpcBanner-fill-color: var(--color-gray-50);
+  --k-banner-gpcBanner-outline-color: var(--color-gray-100);
+  --k-banner-gpcBanner-title-text-color: var(--color-secondary);
+  --k-banner-gpcBanner-description-text-color: var(--color-gray-600);
+  --k-banner-gpcBanner-link-text-color: var(--color-contrast);
+
+  --k-banner-buttons-primary-background-color: var(--color-secondary);
+  --k-banner-buttons-primary-text-color: var(--color-primary);
+  --k-banner-buttons-primary-outline-color: var(--color-secondary);
+  --k-banner-buttons-primary-cornerRadius: 8px;
+  --k-banner-buttons-secondary-background-color: var(--color-primary);
+  --k-banner-buttons-secondary-text-color: var(--color-secondary);
+  --k-banner-buttons-secondary-outline-color: var(--color-secondary);
+  --k-banner-buttons-secondary-cornerRadius: 8px;
+  --k-banner-buttons-tertiary-background-color: var(--color-primary);
+  --k-banner-buttons-tertiary-text-color: var(--color-secondary);
+  --k-banner-buttons-tertiary-outline-color: var(--color-secondary);
+  --k-banner-buttons-tertiary-cornerRadius: 8px;
+
+  --k-modal-container-background-color: var(--color-primary);
+  --k-modal-container-backdrop-background-color: color-mix(
+    in srgb,
+    var(--color-secondary) 30%,
+    transparent
+  );
+  --k-modal-header-background-color: var(--color-primary);
+  --k-modal-header-title-color: var(--color-secondary);
+  --k-modal-header-returnButton-background-color: var(--color-gray-100);
+  --k-modal-header-returnButton-icon-color: var(--color-secondary);
+  --k-modal-description-title-color: var(--color-secondary);
+  --k-modal-description-text-color: var(--color-gray-600);
+  --k-modal-description-link-color: var(--color-contrast);
+  --k-modal-footer-background-color: var(--color-primary);
+  --k-modal-footer-actionButton-background-color: var(--color-secondary);
+  --k-modal-footer-actionButton-text-color: var(--color-primary);
+  --k-modal-footer-actionButton-outline-color: var(--color-secondary);
+  --k-modal-footer-actionButton-cornerRadius: 8px;
+
+  --k-modal-purposeListHeader-title-color: var(--color-secondary);
+  --k-modal-purposeListHeader-acceptAllButton-background-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeListHeader-acceptAllButton-text-color: var(--color-primary);
+  --k-modal-purposeListHeader-acceptAllButton-outline-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeListHeader-acceptAllButton-cornerRadius: 8px;
+  --k-modal-purposeListHeader-rejectAllButton-background-color: var(
+    --color-primary
+  );
+  --k-modal-purposeListHeader-rejectAllButton-text-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeListHeader-rejectAllButton-outline-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeListHeader-rejectAllButton-cornerRadius: 8px;
+
+  --k-modal-purposeList-purposeListItems-purposeFill-color: var(
+    --color-gray-50
+  );
+  --k-modal-purposeList-purposeListItems-purposeOutline-color: var(
+    --color-gray-100
+  );
+  --k-modal-purposeList-purposeListItems-purposeContent-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeList-purposeListItems-purposeLinks-color: var(
+    --color-contrast
+  );
+  --k-modal-purposeList-purposeListItems-arrowIcon-color: var(--color-gray-500);
+  --k-modal-purposeList-switchButtons-on-background-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeList-switchButtons-on-thumb-color: var(--color-primary);
+  --k-modal-purposeList-switchButtons-on-text-color: var(--color-secondary);
+  --k-modal-purposeList-switchButtons-off-background-color: var(
+    --color-gray-200
+  );
+  --k-modal-purposeList-switchButtons-off-thumb-color: var(--color-primary);
+  --k-modal-purposeList-switchButtons-off-text-color: var(--color-gray-500);
+  --k-modal-purposeList-checkbox-selected-background-color: var(
+    --color-secondary
+  );
+  --k-modal-purposeList-checkbox-selected-icon-color: var(--color-primary);
+  --k-modal-purposeList-checkbox-selected-label-color: var(--color-secondary);
+  --k-modal-purposeList-checkbox-unselected-background-color: var(
+    --color-primary
+  );
+  --k-modal-purposeList-checkbox-unselected-outline-color: var(
+    --color-gray-200
+  );
+  --k-modal-purposeList-checkbox-unselected-label-color: var(--color-gray-600);
+}
+
+#lanyard_root,
+#lanyard_root * {
+  font-family:
+    var(--font-geist), ui-sans-serif, system-ui, sans-serif !important;
+}
+
+#lanyard_root *:focus-visible {
+  outline: 2px solid var(--color-contrast) !important;
+  outline-offset: 2px !important;
+}
+
+@media (max-width: 640px) {
+  #ketch-banner {
+    inset-inline: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    border-radius: 0 !important;
+    padding-bottom: max(1rem, var(--safe-area-inset-bottom, 0px)) !important;
+  }
+
+  #ketch-banner-buttons-container-standard,
+  #ketch-banner-buttons-container-compact {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    gap: 0.5rem !important;
+  }
+
+  #ketch-banner-buttons-container-standard > *,
+  #ketch-banner-buttons-container-compact > * {
+    width: 100% !important;
+  }
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/preferences-button.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentPropsWithoutRef } from "react"
+import { isKetchConfigured } from "@/lib/integrations/check-integration"
+import { cn } from "@/lib/styles/cn"
+import { useConsent } from "./use-consent"
+
+const preferencesButton = cva("w-fit text-left transition-colors", {
+  variants: {
+    variant: {
+      footer: "text-secondary/60 hover:text-secondary",
+      strong: "text-secondary hover:text-secondary/60",
+      link: "text-secondary underline underline-offset-4 hover:no-underline",
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+    },
+  },
+  defaultVariants: {
+    variant: "footer",
+    size: "md",
+  },
+})
+
+type ConsentPreferencesButtonProps = ComponentPropsWithoutRef<"button"> &
+  VariantProps<typeof preferencesButton>
+
+export const ConsentPreferencesButton = ({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ConsentPreferencesButtonProps) => {
+  const { openPreferences } = useConsent()
+
+  if (!isKetchConfigured()) return null
+
+  return (
+    <button
+      type="button"
+      onClick={openPreferences}
+      className={cn(preferencesButton({ variant, size }), className)}
+      {...props}
+    >
+      {children ?? "Privacy Choices"}
+    </button>
+  )
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/script.tsx

@@ -0,0 +1,8 @@
+import { ketchBootUrl } from "./env"
+import "./ketch-experience.css"
+
+export const KetchConsentScript = () => {
+  if (!ketchBootUrl) return null
+
+  return <script async src={ketchBootUrl} />
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/types.ts

@@ -0,0 +1,15 @@
+export type KetchPurposeValue = boolean | "true" | "false" | undefined
+
+export type KetchConsent = {
+  purposes?: Record<string, KetchPurposeValue>
+  vendors?: string[]
+}
+
+export type KetchJurisdictionEvent = string | { code?: string } | undefined
+
+export type KetchSemaphore = unknown[] & { loaded?: boolean }
+
+export type KetchWindow = Window & {
+  ketch?: (...command: unknown[]) => void
+  semaphore?: KetchSemaphore
+}

package/src/modules/features/consent/ketch/files/lib/integrations/ketch/use-consent.ts

@@ -0,0 +1,26 @@
+"use client"
+
+import { useCallback, useSyncExternalStore } from "react"
+import type { ConsentCategory } from "./categories"
+import { consentStore } from "./consent-store"
+
+export const useConsent = () => {
+  const { isResolved, jurisdiction, granted } = useSyncExternalStore(
+    consentStore.subscribe,
+    consentStore.getSnapshot,
+    consentStore.getServerSnapshot
+  )
+
+  const hasConsent = useCallback(
+    (category: ConsentCategory) => granted[category],
+    [granted]
+  )
+
+  return {
+    hasConsent,
+    granted,
+    isResolved,
+    jurisdiction,
+    openPreferences: consentStore.openPreferences,
+  }
+}