@nswds/app 1.103.0 → 1.105.0

package/dist/index.js

@@ -42,8 +42,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitives from '@radix-ui/react-tabs';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Command as Command$1 } from 'cmdk';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -16860,18 +16860,35 @@ function ColorPairingToolV2Content({ visibleFormats }) {
     initialState.selectedBackgroundToken
   );
   const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
-  const themeFamilies = getPairingFamilies(themeCategory);
-  const context = getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey);
-  const selectableFamilies = themeFamilies.filter((family) => family.key !== context.grey.key);
-  const selectableAccentFamilies = selectableFamilies.filter(
-    (family) => family.key !== context.primary.key
-  );
-  const selectedBackground = context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null;
-  const selectedBackgroundPairs = selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [];
-  const selectedPair = getPreferredPairForBackground2(selectedBackgroundPairs, selectedPairId);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground2(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
   const detailForeground = selectedPair?.foreground ?? null;
-  const familySummary = [context.primary.label, context.accent.label, context.grey.label].join(
-    " + "
+  const familySummary = useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.primary.label, context.accent.label, context.grey.label]
   );
   const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
     const params = new URLSearchParams(window.location.search);
@@ -16890,289 +16907,3626 @@ function ColorPairingToolV2Content({ visibleFormats }) {
       "",
       `${window.location.pathname}?${params.toString()}${window.location.hash}`
     );
-  };
-  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
-    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-    const nextSelectedBackgroundToken = resolveBackgroundToken2(
-      nextContext,
-      preferredBackgroundToken,
-      getToneFromToken2(preferredBackgroundToken)
-    );
-    const nextSelectedPairId = getPreferredPairForBackground2(
-      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
-      preferredPairId
-    )?.id ?? "";
-    setThemeCategory(nextThemeCategory);
-    setPrimaryFamilyKey(nextContext.primary.key);
-    setAccentFamilyKey(nextContext.accent.key);
-    setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPairId);
-    updateUrlParams(
-      nextThemeCategory,
-      nextContext.primary.key,
-      nextContext.accent.key,
-      nextSelectedBackgroundToken,
-      nextSelectedPairId
-    );
-  };
+  };
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken2(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken2(preferredBackgroundToken)
+    );
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
+    setThemeCategory(nextThemeCategory);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      nextThemeCategory,
+      nextContext.primary.key,
+      nextContext.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    if (!selectedBackground) return;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
+      nextSelectedPairId
+    );
+  };
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "px-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "No approved tones are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx("aside", { className: "bg-grey-50/60 p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Choose a palette, set your primary and accent families, then select an approved background." })
+      ] }),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 1, title: "Select your palette", children: /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: ["brand", "aboriginal"].map((palette) => {
+        const isSelected = themeCategory === palette;
+        const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Select ${label}`,
+            "aria-pressed": isSelected,
+            onClick: () => handleThemeCategoryChange(palette),
+            className: cn(
+              "rounded-sm border px-3 py-2.5 text-left text-sm font-semibold transition-colors",
+              isSelected ? "border-primary-800 bg-primary-800 text-white" : "border-grey-300 bg-background text-foreground hover:border-primary-800 hover:bg-primary-50"
+            ),
+            children: label
+          },
+          palette
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx(
+        SidebarStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Grey is added automatically from the selected palette.",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Primary colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableFamilies.map((family) => {
+                const swatchTone = 800;
+                const isSelected = family.key === context.primary.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as primary colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accent colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableAccentFamilies.map((family) => {
+                const swatchTone = 600;
+                const isSelected = family.key === context.accent.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as accent colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleAccentColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 3, title: "Pick a background", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: context.backgrounds.map((background) => {
+          const hasPairs = (context.pairsByBackground[background.token]?.length ?? 0) > 0;
+          const isSelected = selectedBackground.token === background.token;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": hasPairs ? `Select ${background.token} background` : `Select ${background.token} background with no AAA pairings`,
+              "aria-pressed": isSelected,
+              onClick: () => handleBackgroundChange(background.token),
+              className: cn(
+                "relative aspect-square rounded-sm border transition-transform",
+                isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px",
+                !hasPairs && "opacity-80"
+              ),
+              style: {
+                backgroundColor: background.hex,
+                borderColor: "rgba(0, 0, 0, 0.14)"
+              },
+              title: background.token,
+              children: !hasPairs ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+            },
+            background.token
+          );
+        }) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("main", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Live Preview & Results" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Review the selected pairing in context, then compare the available AAA combinations for your chosen background." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        selectedPair ? /* @__PURE__ */ jsx(
+          PreviewHeroCard,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: selectedPair
+          }
+        ) : /* @__PURE__ */ jsx(PreviewFallbackCard2, { background: selectedBackground }),
+        /* @__PURE__ */ jsx(AccessibilityScoreCard, { pair: selectedPair })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Recommended Combinations" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground", children: [
+            "AAA-recommended foregrounds for",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token }),
+            "."
+          ] })
+        ] }),
+        selectedBackgroundPairs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: selectedBackgroundPairs.map((pair) => /* @__PURE__ */ jsx(
+          RecommendedPairCard,
+          {
+            pair,
+            isSelected: selectedPair?.id === pair.id,
+            onSelect: () => handlePairChange(pair.id)
+          },
+          pair.id
+        )) }) : /* @__PURE__ */ jsx(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No recommended combinations" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "Choose another approved background tone to review available AAA pairings." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: selectedBackground,
+            role: "Background",
+            visibleFormats
+          }
+        ),
+        detailForeground ? /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: detailForeground,
+            role: "Foreground",
+            visibleFormats
+          }
+        ) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose another approved tone or review the recommended foregrounds for the same background." }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV2({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showClose = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
+            /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function useSelectorHeight(selector = "header") {
+  const [height, setHeight] = useState(0);
+  const elementRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  useEffect(() => {
+    const element = document.querySelector(selector);
+    if (!element) return;
+    elementRef.current = element;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const target = entry?.target ?? elementRef.current;
+      if (!target) return;
+      setHeight(target.offsetHeight);
+    });
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [selector]);
+  return height;
+}
+
+// src/hooks/useStickyOffset.ts
+function useStickyOffset(extraPadding = 0) {
+  const headerHeight = useSelectorHeight("#nsw-header");
+  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
+  return useMemo(() => {
+    const total = headerHeight + navigationHeight + extraPadding;
+    return total > 0 ? total : 0;
+  }, [extraPadding, headerHeight, navigationHeight]);
+}
+var PREFERRED_BACKGROUND_TONES3 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS3 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN3 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID3 = "nsw-blue-800:nsw-blue-200";
+var COLOR_PAIRING_TOOL_V3_PATH = "/core/colour/colour-pairing-tool-3";
+var AAA_NORMAL_TEXT_THRESHOLD2 = "7.0:1 for text below the WCAG large-text threshold. Sentence-case body copy should generally stay at 16px+ unless it is microcopy.";
+var AAA_LARGE_TEXT_THRESHOLD2 = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
+var MOBILE_RESULT_SCROLL_QUERY = "(max-width: 1023px)";
+var PERSISTENT_DRAWER_MIN_WIDTH_QUERY = "(min-width: 1280px)";
+var COLOR_PAIRING_TOOL_DRAWER_STEPS = [
+  {
+    id: "colours",
+    title: "Choose colours",
+    eyebrow: "Step 1 of 3",
+    description: "Select the palette, primary family, and accent family."
+  },
+  {
+    id: "backgrounds",
+    title: "Choose background",
+    eyebrow: "Step 2 of 3",
+    description: "Pick the background tone that you want to pair."
+  },
+  {
+    id: "combinations",
+    title: "Choose recommended combinations",
+    eyebrow: "Step 3 of 3",
+    description: "Select the foreground pairing that should drive the example."
+  }
+];
+var COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT = "nsw-colour-pairing-tool-v3";
+function getToneFromToken3(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor3(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel3(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName3(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair3(pair) {
+  return pair.foreground.token === "white";
+}
+function isLargeTextOnlyPair(pair) {
+  return pair.passes.aaaLarge && !pair.passes.aaaText;
+}
+function getWhiteForegroundGuidance3(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance3(pair, isRecommended) {
+  if (!isWhiteForegroundPair3(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance3(pair);
+}
+function getPreferredPairForBackground3(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair3(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken3(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken3(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken3(context);
+}
+function getInitialPairingState3(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN3
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN3 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID3
+  ) ? DEFAULT_INITIAL_PAIR_ID3 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken3(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function getReadableTextColor2(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getBackgroundOptionName(background) {
+  return background.name ?? `${background.familyLabel} ${background.tone}`;
+}
+function getResultExplanation(pair, bestPair) {
+  if (!pair) {
+    return "No AAA-compliant foreground options available for this selection.";
+  }
+  if (pair.id === bestPair?.id) {
+    return "Meets AAA for normal and large text. This is the NSW-recommended starting point for this background.";
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return "White meets AAA for large text on this background only. Use a darker foreground for standard body copy and smaller interface text.";
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return "White does not meet AAA for normal or large text on this background. Use another approved background or a darker foreground where one is available.";
+  }
+  return "Meets AAA for normal and large text. This is a valid alternative, while the recommended pairing remains the clearest default.";
+}
+function getBestRecommendationReason(pair, context) {
+  if (isWhiteForegroundPair3(pair)) {
+    return "Recommended because this background is dark enough to support white text at AAA contrast.";
+  }
+  if (pair.foreground.familyKey === pair.background.familyKey) {
+    return "Recommended because it stays within the same colour family while keeping clear AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.grey.key) {
+    return "Recommended because grey provides a strong neutral contrast without competing with the background.";
+  }
+  if (pair.foreground.familyKey === context.accent.key) {
+    return "Recommended because the selected accent family adds emphasis while preserving AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.primary.key) {
+    return "Recommended because the selected primary family gives the clearest AAA-compliant contrast for this background.";
+  }
+  return "Recommended because it is the clearest NSW-approved AAA pairing for this background.";
+}
+function getRecommendationCategory(pair, bestPair, context) {
+  if (pair.id === bestPair?.id) return "best";
+  if (isWhiteForegroundPair3(pair)) return "white";
+  if (pair.foreground.familyKey === pair.background.familyKey) return "same-family";
+  if (pair.foreground.familyKey === context.accent.key) return "accent-family";
+  if (pair.foreground.familyKey === context.grey.key) return "grey-option";
+  if (pair.foreground.familyKey === context.primary.key) return "primary-family";
+  return "approved";
+}
+function getRecommendationCategoryLabel(category) {
+  switch (category) {
+    case "best":
+      return "Best recommended";
+    case "same-family":
+      return "Same family";
+    case "accent-family":
+      return "Accent family";
+    case "grey-option":
+      return "Grey option";
+    case "primary-family":
+      return "Primary family";
+    case "white":
+      return "White";
+    default:
+      return "Approved option";
+  }
+}
+function getRecommendationSortRank(category) {
+  switch (category) {
+    case "best":
+      return 0;
+    case "same-family":
+      return 1;
+    case "accent-family":
+      return 2;
+    case "grey-option":
+      return 3;
+    case "white":
+      return 4;
+    case "primary-family":
+      return 5;
+    default:
+      return 6;
+  }
+}
+function getAvailabilityMeta(isSelected, hasPairs) {
+  if (isSelected && hasPairs) {
+    return {
+      description: "Selected background with AAA foreground options.",
+      icon: Icons.check_circle,
+      label: "Selected",
+      tone: "selected"
+    };
+  }
+  if (isSelected) {
+    return {
+      description: "Selected background with no AAA foreground options.",
+      icon: Icons.warning,
+      label: "Selected, no AAA",
+      tone: "unavailable"
+    };
+  }
+  if (hasPairs) {
+    return {
+      description: "AAA foreground options available.",
+      icon: Icons.radio_button_checked,
+      label: "Available",
+      tone: "available"
+    };
+  }
+  return {
+    description: "No AAA foreground available.",
+    icon: Icons.close,
+    label: "No AAA",
+    tone: "unavailable"
+  };
+}
+function getPairingCopyText(pair) {
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    "Accessibility: Meets AAA for normal and large text"
+  ].join("\n");
+}
+function getLiveAnnouncement(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground options available for this selection.`;
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Fails AAA for normal and large text.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for normal and large text.`;
+}
+function formatValueRows(color2, visibleFormats) {
+  const hasDisplayTone = color2.token !== "white";
+  return [
+    { key: "token", label: "Token", value: color2.token, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      copyable: hasDisplayTone
+    },
+    ...visibleFormats.map((format) => ({
+      key: format,
+      label: format.toUpperCase(),
+      value: color2[format],
+      copyable: true
+    }))
+  ];
+}
+function SelectorButton({
+  description,
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        swatch ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-4 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-xs/5 text-muted-foreground", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function BackgroundSwatchButton({
+  background,
+  hasPairs,
+  isSelected,
+  onClick
+}) {
+  const status = getAvailabilityMeta(isSelected, hasPairs);
+  const StatusIcon = status.icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": `Select ${background.token} background. ${status.description}`,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border bg-white p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : hasPairs ? "border-grey-300 hover:border-primary-500 hover:bg-grey-50" : "border-grey-300 hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: getBackgroundOptionName(background) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-[0.68rem] font-semibold uppercase",
+                status.tone === "selected" && "border-primary-800 bg-primary-800 text-white dark:border-primary-500 dark:bg-primary-500",
+                status.tone === "available" && "border-grey-300 bg-grey-50 text-foreground",
+                status.tone === "unavailable" && "border-danger-300 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950/20 dark:text-danger-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" }),
+                status.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 overflow-hidden rounded-[2px] border border-black/10", children: /* @__PURE__ */ jsx("div", { className: "h-14 w-full", style: { backgroundColor: background.hex } }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: status.description })
+      ]
+    }
+  );
+}
+function ResultSummaryTile({
+  children,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-sm border border-grey-200 bg-white px-4 py-4 sm:px-5", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-grey-700", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-3", children })
+  ] });
+}
+function AccessibilityCheckTile({
+  className,
+  label,
+  passes,
+  threshold
+}) {
+  const status = passes === null ? "unavailable" : passes ? "pass" : "fail";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-sm border px-4 py-4 sm:px-5",
+        className,
+        status === "pass" && "border-success-200 bg-success-50",
+        status === "fail" && "border-danger-200 bg-danger-50",
+        status === "unavailable" && "border-grey-200 bg-white"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm/6 text-muted-foreground", children: status === "unavailable" ? "No contrast ratio available for this result." : threshold })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+              status === "pass" && "bg-success-700 text-white",
+              status === "fail" && "bg-danger-700 text-white",
+              status === "unavailable" && "bg-grey-100 text-foreground"
+            ),
+            children: [
+              status === "pass" ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : status === "fail" ? /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+              status === "pass" ? "Pass" : status === "fail" ? "Fail" : "Unavailable"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ResultColorSummary({
+  color: color2,
+  fallbackLabel
+}) {
+  if (!color2) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: fallbackLabel ?? "Not available" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-1 size-6 shrink-0 rounded-full border border-black/10",
+        style: { backgroundColor: color2.hex }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "leading-7 font-semibold text-foreground", children: getPairingColorDisplayName3(color2) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-sm break-all text-muted-foreground", children: color2.token })
+    ] })
+  ] });
+}
+function CurrentResultCard({
+  bestPair,
+  familySummary,
+  pair,
+  selectedBackground
+}) {
+  const previewForeground = pair?.foreground.hex ?? getReadableTextColor2(selectedBackground.tone);
+  const isRecommended = pair ? pair.id === bestPair?.id : false;
+  const whiteForeground = pair ? isWhiteForegroundPair3(pair) : false;
+  const statusLabel = pair ? pair.passes.aaaText ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only" : "No recommendation";
+  const fauxButtonStyle = pair ? {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  } : null;
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 overflow-hidden py-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: "Current result" }),
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName3(pair.foreground)} on ${getPairingColorDisplayName3(pair.background)}` : `${getPairingColorDisplayName3(selectedBackground)} selected` })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: getResultExplanation(pair, bestPair) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 sm:min-h-[26rem] sm:p-8",
+        style: {
+          backgroundColor: selectedBackground.hex,
+          color: previewForeground
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[18rem] flex-col justify-between gap-6 sm:min-h-[22rem] sm:gap-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor",
+                  backgroundColor: pair ? pair.foreground.hex : "transparent",
+                  color: pair ? pair.background.hex : "currentColor"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                  familySummary
+                ]
+              }
+            ),
+            pair ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair.foreground.hex
+                },
+                children: [
+                  pair.rating,
+                  " ",
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-8 sm:pb-16", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: pair ? whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" : "Approved background" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-5xl sm:leading-none", children: "Pair colour with confidence." }),
+              /* @__PURE__ */ jsx("p", { className: "max-w-full text-base/6 sm:max-w-md sm:text-base/7", children: pair ? getPreviewGuidance3(pair, isRecommended) : "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." }),
+              pair && fauxButtonStyle ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-variant": "solid",
+                  className: cn(
+                    buttonVariants({ variant: "solid", size: "default" }),
+                    "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                  ),
+                  style: fauxButtonStyle,
+                  children: "Get started"
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+                style: pair ? {
+                  backgroundColor: pair.foreground.hex,
+                  color: pair.background.hex
+                } : {
+                  backgroundColor: "rgb(255 255 255 / 0.14)",
+                  color: "currentColor"
+                },
+                children: [
+                  statusLabel,
+                  pair && pair.passes.aaaText ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex max-w-full rounded-full border px-4 py-2 text-[0.82rem] break-all sm:text-sm",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor"
+                },
+                children: pair ? `${pair.background.token} / ${pair.foreground.token}` : selectedBackground.token
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "space-y-5 border-t border-grey-200 bg-grey-50 px-4 py-5 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: selectedBackground }) }),
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsx(
+        ResultColorSummary,
+        {
+          color: pair?.foreground,
+          fallbackLabel: "No AAA foreground available"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(ResultSummaryTile, { label: "Contrast ratio", className: "lg:col-span-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-4xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: pair ? pair.passes.aaaText ? "Meets AAA accessibility" : pair.passes.aaaLarge ? "Meets AAA for large text only" : "Does not meet accessibility requirements" : "Does not meet accessibility requirements" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA normal text",
+          passes: pair ? pair.passes.aaaText : null,
+          threshold: AAA_NORMAL_TEXT_THRESHOLD2
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA large text",
+          passes: pair ? pair.passes.aaaLarge : null,
+          threshold: AAA_LARGE_TEXT_THRESHOLD2
+        }
+      )
+    ] }) })
+  ] });
+}
+function BestRecommendationCard({
+  copiedKey,
+  isCurrentSelection,
+  onCopyPairing,
+  onUsePairing,
+  pair,
+  reason
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-5 border-primary-200 bg-primary-50/60 px-6 py-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-sm bg-primary-800 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: [
+            /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }),
+            "Best recommended pairing"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-sm border border-primary-300 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-primary-900 uppercase", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: [
+            pair.background.token,
+            " / ",
+            pair.foreground.token
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: reason })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center", children: [
+        isCurrentSelection ? null : /* @__PURE__ */ jsx(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-56",
+            color: "primary",
+            onClick: onUsePairing,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            children: "Use best recommendation"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-48",
+            variant: "outline",
+            color: "grey",
+            onClick: onCopyPairing,
+            children: [
+              /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+              copiedKey === "best-pairing" ? "Pairing copied" : "Copy pairing"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: pair.background }) }),
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: pair.foreground }) }),
+      /* @__PURE__ */ jsxs(ResultSummaryTile, { label: "Accessibility", className: "md:col-span-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xl leading-8 font-semibold text-foreground", children: "Meets AAA accessibility" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-base/7 text-muted-foreground", children: "Best NSW default for this background." })
+      ] })
+    ] })
+  ] });
+}
+function RecommendationCard({
+  copiedKey,
+  isSelected,
+  item,
+  onCopyPairing,
+  onSelect
+}) {
+  const { pair } = item;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-sm border bg-white p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50/50" : "border-grey-200 hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            onClick: onSelect,
+            className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative z-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-2 rounded-sm px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
+                  item.category === "best" ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
+                ),
+                children: [
+                  item.category === "best" ? /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                  item.categoryLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxs(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                onClick: onCopyPairing,
+                "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+                children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  copiedKey === `pair:${pair.id}` ? "Copied" : "Copy"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-[4rem_minmax(0,1fr)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[2px] border border-black/10", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-16 w-full", style: { backgroundColor: pair.background.hex } }),
+                /* @__PURE__ */ jsx("div", { className: "h-4 w-full", style: { backgroundColor: pair.foreground.hex } })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: getPairingColorDisplayName3(pair.foreground) }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.74rem] break-all text-muted-foreground", children: pair.foreground.token })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-sm border border-grey-300 px-2.5 py-1 text-sm font-semibold text-foreground", children: [
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-sm bg-success-700 px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: "AAA" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary-800", children: isSelected ? "Selected" : "Use pairing" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TechnicalDetailsPanel({
+  color: color2,
+  copiedKey,
+  onCopyValue,
+  title,
+  visibleFormats
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-5", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      color2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: getPairingColorDisplayName3(color2) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 overflow-hidden rounded-sm border border-black/10 bg-white", children: /* @__PURE__ */ jsx("div", { className: "h-20 w-full sm:h-24", style: { backgroundColor: color2.hex } }) })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "No AAA foreground available." })
+    ] }),
+    color2 ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-200", children: formatValueRows(color2, visibleFormats).map((row) => {
+      const copyKey = `${title}-${row.key}`;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-5",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: row.label }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-sm text-foreground",
+                    row.key !== "tone" && "font-mono break-all"
+                  ),
+                  children: row.value
+                }
+              )
+            ] }),
+            row.copyable ? /* @__PURE__ */ jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onCopyValue(copyKey, row.value, `${row.label} copied`),
+                "aria-label": `Copy ${title.toLowerCase()} ${row.label.toLowerCase()}`,
+                children: copiedKey === copyKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy"
+                ] })
+              }
+            ) : null
+          ]
+        },
+        row.key
+      );
+    }) }) : /* @__PURE__ */ jsx("div", { className: "px-5 py-5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No technical values are shown because there is no AAA-compliant foreground for this background." }) })
+  ] });
+}
+function resolveSelectionState(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
+  const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    preferredBackgroundToken,
+    getToneFromToken3(preferredBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    preferredPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    context,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory: nextThemeCategory
+  };
+}
+function ColorPairingToolV3Loading() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-52 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-[32rem] rounded-sm border border-grey-200 bg-grey-50" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-72 rounded-sm border border-grey-200 bg-grey-50" })
+    ] })
+  ] });
+}
+function ColorPairingToolV3Content({
+  onAnalyticsEvent,
+  visibleFormats
+}) {
+  const searchParams = useSearchParams();
+  const stickyOffset = useStickyOffset(24);
+  const [initialState] = useState(() => getInitialPairingState3(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const [drawerStepIndex, setDrawerStepIndex] = useState(0);
+  const [isCompactControlsOpen, setIsCompactControlsOpen] = useState(false);
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = useState(null);
+  const copiedKeyTimeoutRef = useRef(null);
+  const resultSectionRef = useRef(null);
+  const technicalDetailsSectionRef = useRef(null);
+  const noValidStateRef = useRef(/* @__PURE__ */ new Set());
+  const technicalDetailsViewedRef = useRef(false);
+  const emitAnalyticsEvent = useCallback(
+    (event) => {
+      onAnalyticsEvent(event);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent(COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT, {
+            detail: event
+          })
+        );
+      }
+    },
+    [onAnalyticsEvent]
+  );
+  useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(PERSISTENT_DRAWER_MIN_WIDTH_QUERY);
+    const handleChange = (event) => {
+      if (event?.matches ?? mediaQuery.matches) {
+        setIsCompactControlsOpen(false);
+      }
+    };
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const bestRecommendedPair = useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs),
+    [selectedBackgroundPairs]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const familySummary = useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.accent.label, context.grey.label, context.primary.label]
+  );
+  const recommendationItems = useMemo(() => {
+    return selectedBackgroundPairs.map((pair) => {
+      const category = getRecommendationCategory(pair, bestRecommendedPair, context);
+      return {
+        category,
+        categoryLabel: getRecommendationCategoryLabel(category),
+        pair
+      };
+    }).sort(
+      (left, right) => getRecommendationSortRank(left.category) - getRecommendationSortRank(right.category)
+    );
+  }, [bestRecommendedPair, context, selectedBackgroundPairs]);
+  const liveAnnouncement = useMemo(
+    () => getLiveAnnouncement(previewPair, selectedBackground),
+    [previewPair, selectedBackground]
+  );
+  const shareBackgroundToken = selectedBackground?.token ?? selectedBackgroundToken;
+  const shareUrl = useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("palette", themeCategory);
+    params.set("primary", context.primary.key);
+    params.set("accent", context.accent.key);
+    if (shareBackgroundToken) {
+      params.set("background", shareBackgroundToken);
+    }
+    if (selectedPairId) {
+      params.set("pair", selectedPairId);
+    }
+    const query = params.toString();
+    return `${COLOR_PAIRING_TOOL_V3_PATH}${query ? `?${query}` : ""}`;
+  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+  const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS[drawerStepIndex];
+  const isFirstDrawerStep = drawerStepIndex === 0;
+  const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1;
+  const desktopSidebarStyle = useMemo(
+    () => ({
+      "--tool-sidebar-max-height": `calc(100vh - ${stickyOffset}px)`,
+      "--tool-sidebar-top": `${stickyOffset}px`
+    }),
+    [stickyOffset]
+  );
+  const goToDrawerStep = useCallback((stepIndex) => {
+    setDrawerStepIndex(Math.max(0, Math.min(stepIndex, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)));
+  }, []);
+  const goToNextDrawerStep = useCallback(() => {
+    setDrawerStepIndex(
+      (currentStep) => Math.min(currentStep + 1, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)
+    );
+  }, []);
+  const goToPreviousDrawerStep = useCallback(() => {
+    setDrawerStepIndex((currentStep) => Math.max(currentStep - 1, 0));
+  }, []);
+  const updateUrlParams = useCallback((nextState) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextState.themeCategory);
+    params.set("primary", nextState.primaryKey);
+    params.set("accent", nextState.accentKey);
+    params.set("background", nextState.selectedBackgroundToken);
+    if (nextState.selectedPairId) {
+      params.set("pair", nextState.selectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  }, []);
+  const applyResolvedSelection = useCallback(
+    (nextState) => {
+      setThemeCategory(nextState.themeCategory);
+      setPrimaryFamilyKey(nextState.primaryKey);
+      setAccentFamilyKey(nextState.accentKey);
+      setSelectedBackgroundToken(nextState.selectedBackgroundToken);
+      setSelectedPairId(nextState.selectedPairId);
+      updateUrlParams(nextState);
+    },
+    [updateUrlParams]
+  );
+  const buildAnalyticsContext = useCallback(
+    (overrides) => ({
+      accentKey: context.accent.key,
+      backgroundToken: selectedBackground?.token,
+      foregroundToken: selectedPair?.foreground.token,
+      pairId: selectedPair?.id,
+      palette: themeCategory,
+      primaryKey: context.primary.key,
+      ...overrides
+    }),
+    [context.accent.key, context.primary.key, selectedBackground, selectedPair, themeCategory]
+  );
+  const copyValue = useCallback(
+    (copyKey, value, toastLabel, analyticsEvent) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      toast(toastLabel, { duration: 2e3 });
+      if (analyticsEvent) {
+        emitAnalyticsEvent(analyticsEvent);
+      }
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw, emitAnalyticsEvent]
+  );
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextState = resolveSelectionState(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "palette_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "primary_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "accent_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground3(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    const nextState = {
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: nextSelectedBackgroundToken,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    };
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "background_selection",
+      ...buildAnalyticsContext({
+        backgroundToken: nextSelectedBackgroundToken,
+        foregroundToken: context.pairsByBackground[nextSelectedBackgroundToken]?.find(
+          (pair) => pair.id === nextSelectedPairId
+        )?.foreground.token,
+        pairId: nextSelectedPairId
+      })
+    });
+    if (typeof window !== "undefined" && window.matchMedia(MOBILE_RESULT_SCROLL_QUERY).matches) {
+      requestAnimationFrame(() => {
+        resultSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
+  };
+  const handlePairChange = (nextSelectedPairId, source) => {
+    if (!selectedBackground) return;
+    const nextPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams({
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: selectedBackground.token,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    });
+    emitAnalyticsEvent({
+      name: "foreground_selection",
+      ...buildAnalyticsContext({
+        foregroundToken: nextPair?.foreground.token,
+        pairId: nextSelectedPairId,
+        source
+      })
+    });
+    if (bestRecommendedPair && nextSelectedPairId !== bestRecommendedPair.id) {
+      emitAnalyticsEvent({
+        name: "alternative_combination_selected",
+        ...buildAnalyticsContext({
+          foregroundToken: nextPair?.foreground.token,
+          pairId: nextSelectedPairId,
+          source
+        })
+      });
+    }
+  };
+  useEffect(() => {
+    if (!selectedBackground || selectedBackgroundPairs.length > 0) {
+      return;
+    }
+    const key = `${themeCategory}:${context.primary.key}:${context.accent.key}:${selectedBackground.token}`;
+    if (noValidStateRef.current.has(key)) {
+      return;
+    }
+    noValidStateRef.current.add(key);
+    emitAnalyticsEvent({
+      name: "no_valid_combination_state",
+      ...buildAnalyticsContext({
+        backgroundToken: selectedBackground.token
+      })
+    });
+  }, [
+    buildAnalyticsContext,
+    context.accent.key,
+    context.primary.key,
+    emitAnalyticsEvent,
+    selectedBackground,
+    selectedBackgroundPairs.length,
+    themeCategory
+  ]);
+  useEffect(() => {
+    if (technicalDetailsViewedRef.current) {
+      return;
+    }
+    const section = technicalDetailsSectionRef.current;
+    if (!section) {
+      return;
+    }
+    const emitViewedEvent = () => {
+      if (technicalDetailsViewedRef.current) {
+        return;
+      }
+      technicalDetailsViewedRef.current = true;
+      emitAnalyticsEvent({
+        name: "technical_details_viewed",
+        ...buildAnalyticsContext({
+          source: "details"
+        })
+      });
+    };
+    if (typeof IntersectionObserver === "undefined") {
+      const rect = section.getBoundingClientRect();
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      if (rect.top < viewportHeight && rect.bottom > 0) {
+        emitViewedEvent();
+      }
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry?.isIntersecting) {
+          emitViewedEvent();
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.2
+      }
+    );
+    observer.observe(section);
+    return () => {
+      observer.disconnect();
+    };
+  }, [buildAnalyticsContext, emitAnalyticsEvent]);
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No approved tones are available for the current palette and colour selection." })
+    ] });
+  }
+  const compactControlsSummary = `${themeCategory === "brand" ? "Brand" : "Aboriginal"} palette, ${context.primary.label} primary, ${context.accent.label} accent, ${getPairingColorDisplayName3(
+    selectedBackground
+  )} background.`;
+  const renderControlsPanel = (isOverlay = false) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        !isFirstDrawerStep ? /* @__PURE__ */ jsxs(Button2, { variant: "ghost", color: "grey", size: "sm", onClick: goToPreviousDrawerStep, children: [
+          /* @__PURE__ */ jsx(Icons.west, { "data-slot": "icon", className: "size-5" }),
+          "Back"
+        ] }) : null,
+        isOverlay ? /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "ghost",
+            color: "grey",
+            size: "icon",
+            onClick: () => setIsCompactControlsOpen(false),
+            "aria-label": "Close configuration",
+            children: /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-5" })
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        COLOR_PAIRING_TOOL_DRAWER_STEPS.map((step, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": index === drawerStepIndex ? "step" : void 0,
+            "aria-label": `${step.eyebrow}: ${step.title}`,
+            onClick: () => goToDrawerStep(index),
+            className: "flex-1 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block h-1.5 rounded-full transition-colors",
+                  index <= drawerStepIndex ? "bg-primary-800" : "bg-grey-200"
+                )
+              }
+            )
+          },
+          step.id
+        )),
+        /* @__PURE__ */ jsx("span", { className: "mt-2 basis-full text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase sm:mt-0 sm:ml-2 sm:basis-auto sm:text-[0.72rem]", children: activeDrawerStep.eyebrow })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: activeDrawerStep.title }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: activeDrawerStep.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-full transition-transform duration-300 ease-out",
+        style: { transform: `translateX(-${drawerStepIndex * 100}%)` },
+        children: [
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Palette" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: ["brand", "aboriginal"].map((palette) => {
+                const isSelected = themeCategory === palette;
+                const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected,
+                    onClick: () => handleThemeCategoryChange(palette)
+                  },
+                  palette
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Primary colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.primary.key,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 800)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Accent colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableAccentFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.accent.key,
+                    onClick: () => handleAccentColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 600)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-grey-200 pt-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey is always included" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey options are automatically added so every selection includes a practical fallback family." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsx("div", { className: "space-y-6 pr-1", children: context.backgroundGroups.map((group, index) => /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: cn("space-y-3", index > 0 && "border-t border-grey-200 pt-6"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: [
+                    group.family.label,
+                    " backgrounds"
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: group.label })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: group.backgrounds.map((background) => /* @__PURE__ */ jsx(
+                  BackgroundSwatchButton,
+                  {
+                    background,
+                    hasPairs: (context.pairsByBackground[background.token]?.length ?? 0) > 0,
+                    isSelected: selectedBackground.token === background.token,
+                    onClick: () => handleBackgroundChange(background.token)
+                  },
+                  background.token
+                )) })
+              ]
+            },
+            group.key
+          )) }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 pr-1", children: recommendationItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: recommendationItems.map((item) => /* @__PURE__ */ jsx(
+            RecommendationCard,
+            {
+              copiedKey,
+              item,
+              isSelected: item.pair.id === selectedPair?.id,
+              onCopyPairing: () => copyValue(
+                `pair:${item.pair.id}`,
+                getPairingCopyText(item.pair),
+                "Pairing copied",
+                item.pair.id === bestRecommendedPair?.id ? {
+                  name: "best_recommendation_copied",
+                  ...buildAnalyticsContext({
+                    foregroundToken: item.pair.foreground.token,
+                    pairId: item.pair.id,
+                    source: "recommendations-list"
+                  })
+                } : void 0
+              ),
+              onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+            },
+            item.pair.id
+          )) }) : /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-5 py-5", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No valid combinations available" }),
+            /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options are available for this background." })
+          ] }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-h-10 flex-1", children: isLastDrawerStep ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a combination to update the result immediately." }) : null }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto sm:flex-none", children: [
+        isOverlay && isLastDrawerStep ? /* @__PURE__ */ jsx(
+          Button2,
+          {
+            color: "primary",
+            className: "w-full sm:w-auto sm:min-w-40",
+            onClick: () => setIsCompactControlsOpen(false),
+            children: "Review result"
+          }
+        ) : null,
+        !isLastDrawerStep ? /* @__PURE__ */ jsxs(Button2, { color: "primary", className: "w-full sm:w-auto", onClick: goToNextDrawerStep, children: [
+          "Continue",
+          /* @__PURE__ */ jsx(Icons.east, { "data-slot": "icon", className: "size-5" })
+        ] }) : null
+      ] })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "tool-sidebar",
+        className: "hidden xl:sticky xl:top-[var(--tool-sidebar-top)] xl:block xl:self-start",
+        style: desktopSidebarStyle,
+        children: /* @__PURE__ */ jsx(Card, { className: "h-[40rem] max-h-[40rem] gap-0 overflow-hidden py-0 sm:h-[44rem] sm:max-h-[44rem] xl:h-[var(--tool-sidebar-max-height)] xl:max-h-[var(--tool-sidebar-max-height)]", children: renderControlsPanel() })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "tool-results", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4 xl:hidden", children: [
+        /* @__PURE__ */ jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+            /* @__PURE__ */ jsx(Text, { size: 2, children: "Open the colour pairing drawer to change palette, background, and recommended combinations." }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full sm:w-auto",
+              onClick: () => setIsCompactControlsOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Icons.edit_square, { "data-slot": "icon", className: "size-5" }),
+                "Open configuration"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Sheet, { open: isCompactControlsOpen, onOpenChange: setIsCompactControlsOpen, children: /* @__PURE__ */ jsxs(
+          SheetContent,
+          {
+            side: "left",
+            showClose: false,
+            className: "w-[30rem] max-w-[90vw] overflow-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Colour pairing configuration" }),
+              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col bg-background", children: renderControlsPanel(true) })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { ref: resultSectionRef, className: "space-y-6", "aria-label": "Current result", children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
+        /* @__PURE__ */ jsx(
+          CurrentResultCard,
+          {
+            bestPair: bestRecommendedPair,
+            familySummary,
+            pair: previewPair,
+            selectedBackground
+          }
+        )
+      ] }),
+      bestRecommendedPair ? /* @__PURE__ */ jsx("section", { className: "space-y-4", children: /* @__PURE__ */ jsx(
+        BestRecommendationCard,
+        {
+          copiedKey,
+          isCurrentSelection: selectedPair?.id === bestRecommendedPair.id,
+          pair: bestRecommendedPair,
+          reason: getBestRecommendationReason(bestRecommendedPair, context),
+          onCopyPairing: () => copyValue(
+            "best-pairing",
+            getPairingCopyText(bestRecommendedPair),
+            "Pairing copied",
+            {
+              name: "best_recommendation_copied",
+              ...buildAnalyticsContext({
+                foregroundToken: bestRecommendedPair.foreground.token,
+                pairId: bestRecommendedPair.id,
+                source: "best-recommendation"
+              })
+            }
+          ),
+          onUsePairing: () => handlePairChange(bestRecommendedPair.id, "best-recommendation")
+        }
+      ) }) : /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Best recommended pairing" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options available for this selection." })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { ref: technicalDetailsSectionRef, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "Token, tone, HEX, RGB, HSL, and OKLCH values for the current selection." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Background values",
+              color: selectedBackground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Foreground values",
+              color: detailForeground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Share colour pairing" }),
+          /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your current colour pairing:" }),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  color: "grey",
+                  size: "sm",
+                  className: "shrink-0",
+                  onClick: () => copyValue(
+                    "share-url",
+                    typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
+                    "Colour pairing link copied"
+                  ),
+                  "aria-label": copiedKey === "share-url" ? "Colour pairing URL copied to clipboard" : "Copy colour pairing URL to clipboard",
+                  title: copiedKey === "share-url" ? "Copied" : "Copy URL",
+                  children: copiedKey === "share-url" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                    "Copy URL"
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("code", { className: "mt-3 block w-full rounded-sm border border-grey-200 bg-background px-3 py-2 font-mono text-[11px] break-all text-foreground sm:text-xs", children: shareUrl })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV3({
+  onAnalyticsEvent = () => {
+  },
+  visibleFormats = DEFAULT_VISIBLE_FORMATS3
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV3Loading, {}), children: /* @__PURE__ */ jsx(
+    ColorPairingToolV3Content,
+    {
+      onAnalyticsEvent,
+      visibleFormats: normalizedVisibleFormats
+    }
+  ) });
+}
+var PREFERRED_BACKGROUND_TONES4 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS4 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN4 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID4 = "nsw-blue-800:nsw-blue-200";
+var COLOR_PAIRING_TOOL_V4_PATH = "/core/colour/colour-pairing-tool-4";
+var MOBILE_RESULT_SCROLL_QUERY2 = "(max-width: 1023px)";
+var PERSISTENT_DRAWER_MIN_WIDTH_QUERY2 = "(min-width: 1280px)";
+var COLOR_PAIRING_TOOL_DRAWER_STEPS2 = [
+  {
+    id: "colours",
+    title: "Choose colours",
+    eyebrow: "Step 1 of 3",
+    description: "Select the palette, primary family, and accent family."
+  },
+  {
+    id: "backgrounds",
+    title: "Choose background",
+    eyebrow: "Step 2 of 3",
+    description: "Pick the background tone that you want to pair."
+  },
+  {
+    id: "refine",
+    title: "Refine or override recommendation",
+    eyebrow: "Step 3 of 3",
+    description: "Use the result panel to review the NSW default pairing and override it only when a different approved option is needed."
+  }
+];
+var COLOR_PAIRING_TOOL_V4_ANALYTICS_EVENT = "nsw-colour-pairing-tool-v4";
+function getToneFromToken4(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor4(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel4(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName4(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair4(pair) {
+  return pair.foreground.token === "white";
+}
+function isLargeTextOnlyPair2(pair) {
+  return pair.passes.aaaLarge && !pair.passes.aaaText;
+}
+function getWhiteForegroundGuidance4(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance4(pair, isRecommended) {
+  if (!isWhiteForegroundPair4(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance4(pair);
+}
+function getPreferredPairForBackground4(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair4(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken4(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES4) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES4) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken4(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken4(context);
+}
+function getInitialPairingState4(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN4
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN4 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID4
+  ) ? DEFAULT_INITIAL_PAIR_ID4 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken4(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken4(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground4(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function getReadableTextColor3(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getBackgroundOptionName2(background) {
+  return background.name ?? `${background.familyLabel} ${background.tone}`;
+}
+function getMainPairingLabel(pair, bestPair) {
+  if (!pair) {
+    return "No AAA pairing available";
+  }
+  if (pair.id === bestPair?.id) {
+    return "NSW recommended pairing";
+  }
+  if (isWhiteForegroundPair4(pair) && isLargeTextOnlyPair2(pair)) {
+    return "Large-text example only";
+  }
+  if (isWhiteForegroundPair4(pair) && !pair.passes.aaaLarge) {
+    return "Example only";
+  }
+  return "Approved alternative";
+}
+function getMainPairingSupportCopy(pair, bestPair, context) {
+  if (!pair) {
+    return "No AAA-compliant foreground available for this background.";
+  }
+  if (pair.id === bestPair?.id) {
+    return getBestRecommendationReason2(pair, context);
+  }
+  if (isWhiteForegroundPair4(pair) && isLargeTextOnlyPair2(pair)) {
+    return "White works here for large text only. Use the NSW default for standard body copy and smaller interface text.";
+  }
+  if (isWhiteForegroundPair4(pair) && !pair.passes.aaaLarge) {
+    return "White does not meet AAA on this background. Choose a different approved background or foreground.";
+  }
+  return "Approved AAA alternative when a different tone or emphasis is needed.";
+}
+function getBestRecommendationReason2(pair, context) {
+  if (isWhiteForegroundPair4(pair)) {
+    return "Recommended because this background is dark enough to support white text at AAA contrast.";
+  }
+  if (pair.foreground.familyKey === pair.background.familyKey) {
+    return "Recommended because it stays within the same colour family while keeping clear AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.grey.key) {
+    return "Recommended because grey provides a strong neutral contrast without competing with the background.";
+  }
+  if (pair.foreground.familyKey === context.accent.key) {
+    return "Recommended because the selected accent family adds emphasis while preserving AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.primary.key) {
+    return "Recommended because the selected primary family gives the clearest AAA-compliant contrast for this background.";
+  }
+  return "Recommended because it is the clearest NSW-approved AAA pairing for this background.";
+}
+function getRecommendationCategory2(pair, bestPair, context) {
+  if (pair.id === bestPair?.id) return "best";
+  if (isWhiteForegroundPair4(pair)) return "white";
+  if (pair.foreground.familyKey === pair.background.familyKey) return "same-family";
+  if (pair.foreground.familyKey === context.accent.key) return "accent-family";
+  if (pair.foreground.familyKey === context.grey.key) return "grey-option";
+  if (pair.foreground.familyKey === context.primary.key) return "primary-family";
+  return "approved";
+}
+function getRecommendationCategoryLabel2(category) {
+  switch (category) {
+    case "best":
+      return "Best recommended";
+    case "same-family":
+      return "Same family";
+    case "accent-family":
+      return "Accent family";
+    case "grey-option":
+      return "Grey option";
+    case "primary-family":
+      return "Primary family";
+    case "white":
+      return "White";
+    default:
+      return "Approved option";
+  }
+}
+function getRecommendationSortRank2(category) {
+  switch (category) {
+    case "best":
+      return 0;
+    case "same-family":
+      return 1;
+    case "accent-family":
+      return 2;
+    case "grey-option":
+      return 3;
+    case "white":
+      return 4;
+    case "primary-family":
+      return 5;
+    default:
+      return 6;
+  }
+}
+function getRecommendationGroupId(category) {
+  switch (category) {
+    case "best":
+    case "same-family":
+    case "accent-family":
+    case "grey-option":
+    case "primary-family":
+      return "good-alternatives";
+    case "white":
+    case "approved":
+      return "edge-options";
+    default:
+      return null;
+  }
+}
+function buildRecommendationGroups(items) {
+  const groupedItems = items.reduce(
+    (accumulator, item) => {
+      const groupId = getRecommendationGroupId(item.category);
+      if (!groupId) {
+        return accumulator;
+      }
+      accumulator[groupId].push(item);
+      return accumulator;
+    },
+    {
+      "edge-options": [],
+      "good-alternatives": []
+    }
+  );
+  const groups = [
+    {
+      id: "good-alternatives",
+      title: "Good alternatives",
+      description: "These pairings still meet AAA and stay close to the NSW recommendation in tone, neutrality, or emphasis.",
+      items: groupedItems["good-alternatives"]
+    },
+    {
+      id: "edge-options",
+      title: "Edge and less common options",
+      description: "These are valid AAA pairings, but they are less typical NSW defaults and should be used more deliberately.",
+      items: groupedItems["edge-options"]
+    }
+  ];
+  return groups.filter((group) => group.items.length > 0);
+}
+function getAvailabilityMeta2(isSelected, hasPairs) {
+  if (isSelected && hasPairs) {
+    return {
+      description: "Selected background with AAA foreground options.",
+      icon: Icons.check_circle,
+      label: "Selected",
+      tone: "selected"
+    };
+  }
+  if (isSelected) {
+    return {
+      description: "Selected background with no AAA-compliant foreground available.",
+      icon: Icons.warning,
+      label: "Selected, no AAA",
+      tone: "unavailable"
+    };
+  }
+  if (hasPairs) {
+    return {
+      description: "AAA foreground options available.",
+      icon: Icons.radio_button_checked,
+      label: "Available",
+      tone: "available"
+    };
+  }
+  return {
+    description: "No AAA-compliant foreground available for this background.",
+    icon: Icons.close,
+    label: "No AAA",
+    tone: "unavailable"
+  };
+}
+function getPairingCopyText2(pair) {
+  const accessibilityLine = pair.passes.aaaText ? "Accessibility: Meets AAA for normal and large text" : pair.passes.aaaLarge ? "Accessibility: Meets AAA for large text only" : "Accessibility: Fails AAA for normal and large text";
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    accessibilityLine
+  ].join("\n");
+}
+function getLiveAnnouncement2(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground options available for this selection.`;
+  }
+  if (isWhiteForegroundPair4(pair) && isLargeTextOnlyPair2(pair)) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  if (isWhiteForegroundPair4(pair) && !pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Fails AAA for normal and large text.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for normal and large text.`;
+}
+function formatValueRows2(color2, visibleFormats) {
+  const hasDisplayTone = color2.token !== "white";
+  return [
+    { key: "token", label: "Token", value: color2.token, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      copyable: hasDisplayTone
+    },
+    ...visibleFormats.map((format) => ({
+      key: format,
+      label: format.toUpperCase(),
+      value: color2[format],
+      copyable: true
+    }))
+  ];
+}
+function SelectorButton2({
+  description,
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        swatch ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-4 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-xs/5 text-muted-foreground", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function BackgroundSwatchButton2({
+  background,
+  hasPairs,
+  isSelected,
+  onClick
+}) {
+  const status = getAvailabilityMeta2(isSelected, hasPairs);
+  const StatusIcon = status.icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": `Select ${background.token} background. ${status.description}`,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border bg-white p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : hasPairs ? "border-grey-300 hover:border-primary-500 hover:bg-grey-50" : "border-grey-300 hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: getBackgroundOptionName2(background) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-[0.68rem] font-semibold uppercase",
+                status.tone === "selected" && "border-primary-800 bg-primary-800 text-white dark:border-primary-500 dark:bg-primary-500",
+                status.tone === "available" && "border-grey-300 bg-grey-50 text-foreground",
+                status.tone === "unavailable" && "border-danger-300 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950/20 dark:text-danger-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" }),
+                status.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 overflow-hidden rounded-[2px] border border-black/10", children: /* @__PURE__ */ jsx("div", { className: "h-14 w-full", style: { backgroundColor: background.hex } }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: status.description })
+      ]
+    }
+  );
+}
+function CompactAccessibilityStatus({ label, passes }) {
+  const status = passes === null ? "unavailable" : passes ? "pass" : "fail";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-3 rounded-sm border px-4 py-3",
+        status === "pass" && "border-success-200 bg-success-50",
+        status === "fail" && "border-danger-200 bg-danger-50",
+        status === "unavailable" && "border-grey-200 bg-white"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+              status === "pass" && "bg-success-700 text-white",
+              status === "fail" && "bg-danger-700 text-white",
+              status === "unavailable" && "bg-grey-100 text-foreground"
+            ),
+            children: [
+              status === "pass" ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : status === "fail" ? /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+              status === "pass" ? "Pass" : status === "fail" ? "Fail" : "Unavailable"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AccessibilitySummaryCard({ pair }) {
+  return /* @__PURE__ */ jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 6, className: "text-foreground", trim: "normal", children: "Accessibility summary" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-grey-700", children: "Contrast ratio" }),
+        /* @__PURE__ */ jsx("p", { className: "text-4xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 lg:max-w-[26rem] lg:min-w-[22rem]", children: [
+      /* @__PURE__ */ jsx(
+        CompactAccessibilityStatus,
+        {
+          label: "AAA normal text",
+          passes: pair ? pair.passes.aaaText : null
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CompactAccessibilityStatus,
+        {
+          label: "AAA large text",
+          passes: pair ? pair.passes.aaaLarge : null
+        }
+      )
+    ] })
+  ] }) });
+}
+function CurrentResultCard2({
+  bestPair,
+  copiedKey,
+  onCopyPairing,
+  pair,
+  supportText,
+  selectedBackground
+}) {
+  const previewForeground = pair?.foreground.hex ?? getReadableTextColor3(selectedBackground.tone);
+  const isRecommended = pair ? pair.id === bestPair?.id : false;
+  const whiteForeground = pair ? isWhiteForegroundPair4(pair) : false;
+  const pairingLabel = getMainPairingLabel(pair, bestPair);
+  const fauxButtonStyle = pair ? {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  } : null;
+  return /* @__PURE__ */ jsxs(Card, { className: cn("gap-0 overflow-hidden py-0", isRecommended && "border-primary-200"), children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-2 rounded-sm px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+              isRecommended ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
+            ),
+            children: [
+              isRecommended ? /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+              pairingLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName4(pair.foreground)} on ${getPairingColorDisplayName4(pair.background)}` : `${getPairingColorDisplayName4(selectedBackground)} selected` }),
+          /* @__PURE__ */ jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: supportText })
+        ] })
+      ] }),
+      pair ? /* @__PURE__ */ jsx(
+        Button2,
+        {
+          color: "primary",
+          className: "w-full justify-center lg:w-auto lg:min-w-48",
+          onClick: onCopyPairing,
+          children: copiedKey === "current-pairing" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+            "Pairing copied"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+            "Copy pairing"
+          ] })
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 sm:min-h-[26rem] sm:p-8",
+        style: {
+          backgroundColor: selectedBackground.hex,
+          color: previewForeground
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[18rem] flex-col justify-center gap-6 sm:min-h-[22rem]", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: pair ? whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" : "Approved background" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-5xl sm:leading-none", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-full text-base/6 sm:max-w-md sm:text-base/7", children: pair ? getPreviewGuidance4(pair, isRecommended) : "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." }),
+            pair && fauxButtonStyle ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-variant": "solid",
+                className: cn(
+                  buttonVariants({ variant: "solid", size: "default" }),
+                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                ),
+                style: fauxButtonStyle,
+                children: "Get started"
+              }
+            ) : null
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+}
+function RecommendationCard2({
+  copiedKey,
+  isSelected,
+  item,
+  onCopyPairing,
+  onSelect
+}) {
+  const { pair } = item;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-sm border bg-white p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50/60 ring-1 ring-primary-700" : "border-grey-200 hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            onClick: onSelect,
+            className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative z-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-2 rounded-sm px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
+                  item.category === "best" ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
+                ),
+                children: [
+                  item.category === "best" ? /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                  item.categoryLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxs(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                onClick: onCopyPairing,
+                "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+                children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  copiedKey === `pair:${pair.id}` ? "Copied" : "Copy"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-[7.5rem_minmax(0,1fr)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[2px] border border-black/10", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-20 w-full", style: { backgroundColor: pair.background.hex } }),
+                /* @__PURE__ */ jsx("div", { className: "h-6 w-full", style: { backgroundColor: pair.foreground.hex } })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: getPairingColorDisplayName4(pair.foreground) }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.74rem] break-all text-muted-foreground", children: pair.foreground.token })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-sm border border-grey-300 px-2.5 py-1 text-sm font-semibold text-foreground", children: [
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-sm bg-success-700 px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: "AAA" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary-800", children: isSelected ? "Selected answer" : "Use pairing" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function RecommendationGroupSection({
+  children,
+  description,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      /* @__PURE__ */ jsx(Text, { size: 2, children: description })
+    ] }),
+    children
+  ] });
+}
+function DrawerSummaryItem({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-t border-grey-200 pt-3 first:border-t-0 first:pt-0", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: value })
+  ] });
+}
+function TechnicalDetailsPanel2({
+  color: color2,
+  copiedKey,
+  onCopyValue,
+  title,
+  visibleFormats
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-5", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      color2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: getPairingColorDisplayName4(color2) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 overflow-hidden rounded-sm border border-black/10 bg-white", children: /* @__PURE__ */ jsx("div", { className: "h-20 w-full sm:h-24", style: { backgroundColor: color2.hex } }) })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "No AAA foreground available." })
+    ] }),
+    color2 ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-200", children: formatValueRows2(color2, visibleFormats).map((row) => {
+      const copyKey = `${title}-${row.key}`;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-5",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: row.label }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-sm text-foreground",
+                    row.key !== "tone" && "font-mono break-all"
+                  ),
+                  children: row.value
+                }
+              )
+            ] }),
+            row.copyable ? /* @__PURE__ */ jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onCopyValue(copyKey, row.value, `${row.label} copied`),
+                "aria-label": `Copy ${title.toLowerCase()} ${row.label.toLowerCase()}`,
+                children: copiedKey === copyKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy"
+                ] })
+              }
+            ) : null
+          ]
+        },
+        row.key
+      );
+    }) }) : /* @__PURE__ */ jsx("div", { className: "px-5 py-5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No technical values are shown because there is no AAA-compliant foreground for this background." }) })
+  ] });
+}
+function resolveSelectionState2(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
+  const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+  const selectedBackgroundToken = resolveBackgroundToken4(
+    context,
+    preferredBackgroundToken,
+    getToneFromToken4(preferredBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground4(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    preferredPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    context,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory: nextThemeCategory
+  };
+}
+function ColorPairingToolV4Loading() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-52 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-[32rem] rounded-sm border border-grey-200 bg-grey-50" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-72 rounded-sm border border-grey-200 bg-grey-50" })
+    ] })
+  ] });
+}
+function ColorPairingToolV4Content({
+  onAnalyticsEvent,
+  visibleFormats
+}) {
+  const searchParams = useSearchParams();
+  const stickyOffset = useStickyOffset(24);
+  const [initialState] = useState(() => getInitialPairingState4(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const [drawerStepIndex, setDrawerStepIndex] = useState(0);
+  const [isCompactControlsOpen, setIsCompactControlsOpen] = useState(false);
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = useState(null);
+  const copiedKeyTimeoutRef = useRef(null);
+  const resultSectionRef = useRef(null);
+  const technicalDetailsSectionRef = useRef(null);
+  const noValidStateRef = useRef(/* @__PURE__ */ new Set());
+  const technicalDetailsViewedRef = useRef(false);
+  const emitAnalyticsEvent = useCallback(
+    (event) => {
+      onAnalyticsEvent(event);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent(COLOR_PAIRING_TOOL_V4_ANALYTICS_EVENT, {
+            detail: event
+          })
+        );
+      }
+    },
+    [onAnalyticsEvent]
+  );
+  useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(PERSISTENT_DRAWER_MIN_WIDTH_QUERY2);
+    const handleChange = (event) => {
+      if (event?.matches ?? mediaQuery.matches) {
+        setIsCompactControlsOpen(false);
+      }
+    };
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const bestRecommendedPair = useMemo(
+    () => getPreferredPairForBackground4(selectedBackgroundPairs),
+    [selectedBackgroundPairs]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground4(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const currentPairSupportText = useMemo(
+    () => getMainPairingSupportCopy(previewPair, bestRecommendedPair, context),
+    [bestRecommendedPair, context, previewPair]
+  );
+  const recommendationItems = useMemo(() => {
+    return selectedBackgroundPairs.map((pair) => {
+      const category = getRecommendationCategory2(pair, bestRecommendedPair, context);
+      return {
+        category,
+        categoryLabel: getRecommendationCategoryLabel2(category),
+        pair
+      };
+    }).sort(
+      (left, right) => getRecommendationSortRank2(left.category) - getRecommendationSortRank2(right.category)
+    );
+  }, [bestRecommendedPair, context, selectedBackgroundPairs]);
+  const alternativeRecommendationGroups = useMemo(
+    () => buildRecommendationGroups(
+      recommendationItems.filter((item) => item.pair.id !== selectedPair?.id)
+    ),
+    [recommendationItems, selectedPair?.id]
+  );
+  const liveAnnouncement = useMemo(
+    () => getLiveAnnouncement2(previewPair, selectedBackground),
+    [previewPair, selectedBackground]
+  );
+  const shareBackgroundToken = selectedBackground?.token ?? selectedBackgroundToken;
+  const shareUrl = useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("palette", themeCategory);
+    params.set("primary", context.primary.key);
+    params.set("accent", context.accent.key);
+    if (shareBackgroundToken) {
+      params.set("background", shareBackgroundToken);
+    }
+    if (selectedPairId) {
+      params.set("pair", selectedPairId);
+    }
+    const query = params.toString();
+    return `${COLOR_PAIRING_TOOL_V4_PATH}${query ? `?${query}` : ""}`;
+  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+  const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS2[drawerStepIndex];
+  const isFirstDrawerStep = drawerStepIndex === 0;
+  const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS2.length - 1;
+  const desktopSidebarStyle = useMemo(
+    () => ({
+      "--tool-sidebar-max-height": `calc(100vh - ${stickyOffset}px)`,
+      "--tool-sidebar-top": `${stickyOffset}px`
+    }),
+    [stickyOffset]
+  );
+  const goToDrawerStep = useCallback((stepIndex) => {
+    setDrawerStepIndex(Math.max(0, Math.min(stepIndex, COLOR_PAIRING_TOOL_DRAWER_STEPS2.length - 1)));
+  }, []);
+  const goToNextDrawerStep = useCallback(() => {
+    setDrawerStepIndex(
+      (currentStep) => Math.min(currentStep + 1, COLOR_PAIRING_TOOL_DRAWER_STEPS2.length - 1)
+    );
+  }, []);
+  const goToPreviousDrawerStep = useCallback(() => {
+    setDrawerStepIndex((currentStep) => Math.max(currentStep - 1, 0));
+  }, []);
+  const updateUrlParams = useCallback((nextState) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextState.themeCategory);
+    params.set("primary", nextState.primaryKey);
+    params.set("accent", nextState.accentKey);
+    params.set("background", nextState.selectedBackgroundToken);
+    if (nextState.selectedPairId) {
+      params.set("pair", nextState.selectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  }, []);
+  const applyResolvedSelection = useCallback(
+    (nextState) => {
+      setThemeCategory(nextState.themeCategory);
+      setPrimaryFamilyKey(nextState.primaryKey);
+      setAccentFamilyKey(nextState.accentKey);
+      setSelectedBackgroundToken(nextState.selectedBackgroundToken);
+      setSelectedPairId(nextState.selectedPairId);
+      updateUrlParams(nextState);
+    },
+    [updateUrlParams]
+  );
+  const buildAnalyticsContext = useCallback(
+    (overrides) => ({
+      accentKey: context.accent.key,
+      backgroundToken: selectedBackground?.token,
+      foregroundToken: selectedPair?.foreground.token,
+      pairId: selectedPair?.id,
+      palette: themeCategory,
+      primaryKey: context.primary.key,
+      ...overrides
+    }),
+    [context.accent.key, context.primary.key, selectedBackground, selectedPair, themeCategory]
+  );
+  const copyValue = useCallback(
+    (copyKey, value, toastLabel, analyticsEvent) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      toast(toastLabel, { duration: 2e3 });
+      if (analyticsEvent) {
+        emitAnalyticsEvent(analyticsEvent);
+      }
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw, emitAnalyticsEvent]
+  );
   const handleThemeCategoryChange = (nextThemeCategory) => {
-    syncSelection(
+    const nextState = resolveSelectionState2(
       nextThemeCategory,
       primaryFamilyKey,
       accentFamilyKey,
       selectedBackgroundToken,
-      selectedPairId
+      null
     );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "palette_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
   };
   const handlePrimaryColorChange = (nextPrimaryKey) => {
     const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
-    syncSelection(
+    const nextState = resolveSelectionState2(
       themeCategory,
       nextPrimaryKey,
       nextAccentKey,
       selectedBackgroundToken,
-      selectedPairId
+      null
     );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "primary_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
   };
   const handleAccentColorChange = (nextAccentKey) => {
     if (nextAccentKey === primaryFamilyKey) return;
-    syncSelection(
+    const nextState = resolveSelectionState2(
       themeCategory,
       primaryFamilyKey,
       nextAccentKey,
       selectedBackgroundToken,
-      selectedPairId
+      null
     );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "accent_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
   };
   const handleBackgroundChange = (nextSelectedBackgroundToken) => {
-    const nextSelectedPairId = getPreferredPairForBackground2(
-      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
-      selectedPairId
-    )?.id ?? "";
-    setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPairId);
-    updateUrlParams(
-      themeCategory,
-      context.primary.key,
-      context.accent.key,
-      nextSelectedBackgroundToken,
-      nextSelectedPairId
-    );
+    const nextSelectedPairId = getPreferredPairForBackground4(context.pairsByBackground[nextSelectedBackgroundToken] ?? [])?.id ?? "";
+    const nextState = {
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: nextSelectedBackgroundToken,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    };
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "background_selection",
+      ...buildAnalyticsContext({
+        backgroundToken: nextSelectedBackgroundToken,
+        foregroundToken: context.pairsByBackground[nextSelectedBackgroundToken]?.find(
+          (pair) => pair.id === nextSelectedPairId
+        )?.foreground.token,
+        pairId: nextSelectedPairId
+      })
+    });
+    if (typeof window !== "undefined" && window.matchMedia(MOBILE_RESULT_SCROLL_QUERY2).matches) {
+      requestAnimationFrame(() => {
+        resultSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
   };
-  const handlePairChange = (nextSelectedPairId) => {
+  const handlePairChange = (nextSelectedPairId, source) => {
     if (!selectedBackground) return;
+    const nextPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
     setSelectedPairId(nextSelectedPairId);
-    updateUrlParams(
-      themeCategory,
-      context.primary.key,
-      context.accent.key,
-      selectedBackground.token,
-      nextSelectedPairId
-    );
+    updateUrlParams({
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: selectedBackground.token,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    });
+    emitAnalyticsEvent({
+      name: "foreground_selection",
+      ...buildAnalyticsContext({
+        foregroundToken: nextPair?.foreground.token,
+        pairId: nextSelectedPairId,
+        source
+      })
+    });
+    if (bestRecommendedPair && nextSelectedPairId !== bestRecommendedPair.id) {
+      emitAnalyticsEvent({
+        name: "alternative_combination_selected",
+        ...buildAnalyticsContext({
+          foregroundToken: nextPair?.foreground.token,
+          pairId: nextSelectedPairId,
+          source
+        })
+      });
+    }
   };
+  useEffect(() => {
+    if (!selectedBackground || selectedBackgroundPairs.length > 0) {
+      return;
+    }
+    const key = `${themeCategory}:${context.primary.key}:${context.accent.key}:${selectedBackground.token}`;
+    if (noValidStateRef.current.has(key)) {
+      return;
+    }
+    noValidStateRef.current.add(key);
+    emitAnalyticsEvent({
+      name: "no_valid_combination_state",
+      ...buildAnalyticsContext({
+        backgroundToken: selectedBackground.token
+      })
+    });
+  }, [
+    buildAnalyticsContext,
+    context.accent.key,
+    context.primary.key,
+    emitAnalyticsEvent,
+    selectedBackground,
+    selectedBackgroundPairs.length,
+    themeCategory
+  ]);
+  useEffect(() => {
+    if (technicalDetailsViewedRef.current) {
+      return;
+    }
+    const section = technicalDetailsSectionRef.current;
+    if (!section) {
+      return;
+    }
+    const emitViewedEvent = () => {
+      if (technicalDetailsViewedRef.current) {
+        return;
+      }
+      technicalDetailsViewedRef.current = true;
+      emitAnalyticsEvent({
+        name: "technical_details_viewed",
+        ...buildAnalyticsContext({
+          source: "details"
+        })
+      });
+    };
+    if (typeof IntersectionObserver === "undefined") {
+      const rect = section.getBoundingClientRect();
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      if (rect.top < viewportHeight && rect.bottom > 0) {
+        emitViewedEvent();
+      }
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry?.isIntersecting) {
+          emitViewedEvent();
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.2
+      }
+    );
+    observer.observe(section);
+    return () => {
+      observer.disconnect();
+    };
+  }, [buildAnalyticsContext, emitAnalyticsEvent]);
   if (!selectedBackground) {
-    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "px-6", children: [
-      /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "No approved tones are available for the current palette." })
-    ] }) });
+    return /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No approved tones are available for the current palette and colour selection." })
+    ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
-    /* @__PURE__ */ jsx("aside", { className: "bg-grey-50/60 p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
-        /* @__PURE__ */ jsx(Text, { size: 2, children: "Choose a palette, set your primary and accent families, then select an approved background." })
-      ] }),
-      /* @__PURE__ */ jsx(SidebarStep, { step: 1, title: "Select your palette", children: /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: ["brand", "aboriginal"].map((palette) => {
-        const isSelected = themeCategory === palette;
-        const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
-        return /* @__PURE__ */ jsx(
+  const compactControlsSummary = `${themeCategory === "brand" ? "Brand" : "Aboriginal"} palette, ${context.primary.label} primary, ${context.accent.label} accent, ${getPairingColorDisplayName4(
+    selectedBackground
+  )} background.`;
+  const renderControlsPanel = (isOverlay = false) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        !isFirstDrawerStep ? /* @__PURE__ */ jsxs(Button2, { variant: "ghost", color: "grey", size: "sm", onClick: goToPreviousDrawerStep, children: [
+          /* @__PURE__ */ jsx(Icons.west, { "data-slot": "icon", className: "size-5" }),
+          "Back"
+        ] }) : null,
+        isOverlay ? /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "ghost",
+            color: "grey",
+            size: "icon",
+            onClick: () => setIsCompactControlsOpen(false),
+            "aria-label": "Close configuration",
+            children: /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-5" })
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        COLOR_PAIRING_TOOL_DRAWER_STEPS2.map((step, index) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            "aria-label": `Select ${label}`,
-            "aria-pressed": isSelected,
-            onClick: () => handleThemeCategoryChange(palette),
-            className: cn(
-              "rounded-sm border px-3 py-2.5 text-left text-sm font-semibold transition-colors",
-              isSelected ? "border-primary-800 bg-primary-800 text-white" : "border-grey-300 bg-background text-foreground hover:border-primary-800 hover:bg-primary-50"
-            ),
-            children: label
+            "aria-current": index === drawerStepIndex ? "step" : void 0,
+            "aria-label": `${step.eyebrow}: ${step.title}`,
+            onClick: () => goToDrawerStep(index),
+            className: "flex-1 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block h-1.5 rounded-full transition-colors",
+                  index <= drawerStepIndex ? "bg-primary-800" : "bg-grey-200"
+                )
+              }
+            )
           },
-          palette
-        );
-      }) }) }),
-      /* @__PURE__ */ jsx(
-        SidebarStep,
-        {
-          step: 2,
-          title: "Choose your colours",
-          description: "Grey is added automatically from the selected palette.",
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Primary colour" }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableFamilies.map((family) => {
-                const swatchTone = 800;
-                const isSelected = family.key === context.primary.key;
-                const label = getFamilySelectorLabel2(family, themeCategory, "primary colour");
+          step.id
+        )),
+        /* @__PURE__ */ jsx("span", { className: "mt-2 basis-full text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase sm:mt-0 sm:ml-2 sm:basis-auto sm:text-[0.72rem]", children: activeDrawerStep.eyebrow })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: activeDrawerStep.title }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: activeDrawerStep.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-full transition-transform duration-300 ease-out",
+        style: { transform: `translateX(-${drawerStepIndex * 100}%)` },
+        children: [
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Palette" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: ["brand", "aboriginal"].map((palette) => {
+                const isSelected = themeCategory === palette;
+                const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
                 return /* @__PURE__ */ jsx(
-                  "button",
+                  SelectorButton2,
                   {
-                    type: "button",
-                    "aria-label": `Select ${label} as primary colour`,
-                    "aria-pressed": isSelected,
+                    label,
+                    isSelected,
+                    onClick: () => handleThemeCategoryChange(palette)
+                  },
+                  palette
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Primary colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableFamilies.map((family) => {
+                const label = getFamilySelectorLabel4(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  SelectorButton2,
+                  {
+                    label,
+                    isSelected: family.key === context.primary.key,
                     onClick: () => handlePrimaryColorChange(family.key),
-                    className: cn(
-                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
-                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
-                    ),
-                    style: {
-                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
-                      color: getReadableTextColor(swatchTone),
-                      borderColor: "rgba(0, 0, 0, 0.12)"
-                    },
-                    title: label,
-                    children: label
+                    swatch: getFamilySwatchColor4(family, 800)
                   },
                   family.key
                 );
               }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accent colour" }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableAccentFamilies.map((family) => {
-                const swatchTone = 600;
-                const isSelected = family.key === context.accent.key;
-                const label = getFamilySelectorLabel2(family, themeCategory, "accent colour");
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Accent colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableAccentFamilies.map((family) => {
+                const label = getFamilySelectorLabel4(family, themeCategory, "accent colour");
                 return /* @__PURE__ */ jsx(
-                  "button",
+                  SelectorButton2,
                   {
-                    type: "button",
-                    "aria-label": `Select ${label} as accent colour`,
-                    "aria-pressed": isSelected,
+                    label,
+                    isSelected: family.key === context.accent.key,
                     onClick: () => handleAccentColorChange(family.key),
-                    className: cn(
-                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
-                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
-                    ),
-                    style: {
-                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
-                      color: getReadableTextColor(swatchTone),
-                      borderColor: "rgba(0, 0, 0, 0.12)"
-                    },
-                    title: label,
-                    children: label
+                    swatch: getFamilySwatchColor4(family, 600)
                   },
                   family.key
                 );
               }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-grey-200 pt-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey is always included" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey options are automatically added so every selection includes a practical fallback family." })
             ] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(SidebarStep, { step: 3, title: "Pick a background", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-          "Selected:",
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: context.backgrounds.map((background) => {
-          const hasPairs = (context.pairsByBackground[background.token]?.length ?? 0) > 0;
-          const isSelected = selectedBackground.token === background.token;
-          return /* @__PURE__ */ jsx(
-            "button",
+          ] }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsx("div", { className: "space-y-6 pr-1", children: context.backgroundGroups.map((group, index) => /* @__PURE__ */ jsxs(
+            "section",
             {
-              type: "button",
-              "aria-label": hasPairs ? `Select ${background.token} background` : `Select ${background.token} background with no AAA pairings`,
-              "aria-pressed": isSelected,
-              onClick: () => handleBackgroundChange(background.token),
-              className: cn(
-                "relative aspect-square rounded-sm border transition-transform",
-                isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px",
-                !hasPairs && "opacity-80"
-              ),
-              style: {
-                backgroundColor: background.hex,
-                borderColor: "rgba(0, 0, 0, 0.14)"
-              },
-              title: background.token,
-              children: !hasPairs ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+              className: cn("space-y-3", index > 0 && "border-t border-grey-200 pt-6"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: [
+                    group.family.label,
+                    " backgrounds"
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: group.label })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: group.backgrounds.map((background) => /* @__PURE__ */ jsx(
+                  BackgroundSwatchButton2,
+                  {
+                    background,
+                    hasPairs: (context.pairsByBackground[background.token]?.length ?? 0) > 0,
+                    isSelected: selectedBackground.token === background.token,
+                    onClick: () => handleBackgroundChange(background.token)
+                  },
+                  background.token
+                )) })
+              ]
             },
-            background.token
-          );
-        }) })
-      ] }) })
-    ] }) }),
-    /* @__PURE__ */ jsxs("main", { className: "space-y-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Live Preview & Results" }),
-        /* @__PURE__ */ jsx(Text, { size: 2, children: "Review the selected pairing in context, then compare the available AAA combinations for your chosen background." })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-        selectedPair ? /* @__PURE__ */ jsx(
-          PreviewHeroCard,
+            group.key
+          )) }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-4 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Current configuration" }),
+                /* @__PURE__ */ jsx(Text, { size: 2, children: "The drawer only sets the palette, families, and background. The result panel is where the pairing is shown and, if needed, overridden." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-5 space-y-3", children: [
+                /* @__PURE__ */ jsx(
+                  DrawerSummaryItem,
+                  {
+                    label: "Palette",
+                    value: themeCategory === "brand" ? "Brand palette" : "Aboriginal palette"
+                  }
+                ),
+                /* @__PURE__ */ jsx(DrawerSummaryItem, { label: "Primary family", value: context.primary.label }),
+                /* @__PURE__ */ jsx(DrawerSummaryItem, { label: "Accent family", value: context.accent.label }),
+                /* @__PURE__ */ jsx(
+                  DrawerSummaryItem,
+                  {
+                    label: "Background",
+                    value: getPairingColorDisplayName4(selectedBackground)
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Review the result on the right" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "The right panel always shows the current NSW default pairing for this selection. Alternative AAA options stay there as a secondary override path." })
+            ] }) })
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-h-10 flex-1", children: isLastDrawerStep ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Review the NSW recommendation in the result panel. Use alternatives there only if you need a different approved treatment." }) : null }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto sm:flex-none", children: [
+        isOverlay && isLastDrawerStep ? /* @__PURE__ */ jsx(
+          Button2,
           {
-            familySummary,
-            isRecommended: Boolean(selectedPair),
-            pair: selectedPair
+            color: "primary",
+            className: "w-full sm:w-auto sm:min-w-40",
+            onClick: () => setIsCompactControlsOpen(false),
+            children: "Review result"
           }
-        ) : /* @__PURE__ */ jsx(PreviewFallbackCard2, { background: selectedBackground }),
-        /* @__PURE__ */ jsx(AccessibilityScoreCard, { pair: selectedPair })
-      ] }),
-      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Recommended Combinations" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground", children: [
-            "AAA-recommended foregrounds for",
-            " ",
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token }),
-            "."
-          ] })
-        ] }),
-        selectedBackgroundPairs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: selectedBackgroundPairs.map((pair) => /* @__PURE__ */ jsx(
-          RecommendedPairCard,
+        ) : null,
+        !isLastDrawerStep ? /* @__PURE__ */ jsxs(Button2, { color: "primary", className: "w-full sm:w-auto", onClick: goToNextDrawerStep, children: [
+          "Continue",
+          /* @__PURE__ */ jsx(Icons.east, { "data-slot": "icon", className: "size-5" })
+        ] }) : null
+      ] })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "tool-sidebar",
+        className: "hidden xl:sticky xl:top-[var(--tool-sidebar-top)] xl:block xl:self-start",
+        style: desktopSidebarStyle,
+        children: /* @__PURE__ */ jsx(Card, { className: "h-[40rem] max-h-[40rem] gap-0 overflow-hidden border-grey-200 bg-grey-50/60 py-0 sm:h-[44rem] sm:max-h-[44rem] xl:h-[var(--tool-sidebar-max-height)] xl:max-h-[var(--tool-sidebar-max-height)]", children: renderControlsPanel() })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "tool-results", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4 xl:hidden", children: [
+        /* @__PURE__ */ jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+            /* @__PURE__ */ jsx(Text, { size: 2, children: "Open the drawer to change palette, colour families, or background. The result panel always shows the current NSW pairing for this selection." }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full sm:w-auto",
+              onClick: () => setIsCompactControlsOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Icons.edit_square, { "data-slot": "icon", className: "size-5" }),
+                "Open configuration"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Sheet, { open: isCompactControlsOpen, onOpenChange: setIsCompactControlsOpen, children: /* @__PURE__ */ jsxs(
+          SheetContent,
           {
-            pair,
-            isSelected: selectedPair?.id === pair.id,
-            onSelect: () => handlePairChange(pair.id)
-          },
-          pair.id
-        )) }) : /* @__PURE__ */ jsx(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
-          /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No recommended combinations" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "Choose another approved background tone to review available AAA pairings." })
-        ] }) })
+            side: "left",
+            showClose: false,
+            className: "w-[30rem] max-w-[90vw] overflow-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Colour pairing configuration" }),
+              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col bg-background", children: renderControlsPanel(true) })
+            ]
+          }
+        ) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("section", { ref: resultSectionRef, className: "space-y-6", "aria-label": "Current result", children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
         /* @__PURE__ */ jsx(
-          PairDetailCard2,
+          CurrentResultCard2,
           {
-            color: selectedBackground,
-            role: "Background",
-            visibleFormats
+            bestPair: bestRecommendedPair,
+            copiedKey,
+            onCopyPairing: () => previewPair ? copyValue(
+              "current-pairing",
+              getPairingCopyText2(previewPair),
+              "Pairing copied",
+              previewPair.id === bestRecommendedPair?.id ? {
+                name: "best_recommendation_copied",
+                ...buildAnalyticsContext({
+                  foregroundToken: previewPair.foreground.token,
+                  pairId: previewPair.id,
+                  source: "current-result"
+                })
+              } : void 0
+            ) : void 0,
+            pair: previewPair,
+            supportText: currentPairSupportText,
+            selectedBackground
           }
-        ),
-        detailForeground ? /* @__PURE__ */ jsx(
-          PairDetailCard2,
+        )
+      ] }),
+      /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(AccessibilitySummaryCard, { pair: previewPair }) }),
+      bestRecommendedPair || alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Alternative AAA options" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "These approved alternatives can be used when a different tone, stronger emphasis, or a more neutral system treatment is needed." })
+        ] }),
+        alternativeRecommendationGroups.length > 0 ? alternativeRecommendationGroups.map((group) => /* @__PURE__ */ jsx(
+          RecommendationGroupSection,
           {
-            color: detailForeground,
-            role: "Foreground",
-            visibleFormats
-          }
-        ) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
-          /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
-            /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
-          ] }) }),
-          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose another approved tone or review the recommended foregrounds for the same background." }) })
+            title: group.title,
+            description: group.description,
+            children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: group.items.map((item) => /* @__PURE__ */ jsx(
+              RecommendationCard2,
+              {
+                copiedKey,
+                item,
+                isSelected: item.pair.id === selectedPair?.id,
+                onCopyPairing: () => copyValue(
+                  `pair:${item.pair.id}`,
+                  getPairingCopyText2(item.pair),
+                  "Pairing copied",
+                  item.pair.id === bestRecommendedPair?.id ? {
+                    name: "best_recommendation_copied",
+                    ...buildAnalyticsContext({
+                      foregroundToken: item.pair.foreground.token,
+                      pairId: item.pair.id,
+                      source: "recommendations-list"
+                    })
+                  } : void 0
+                ),
+                onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+              },
+              item.pair.id
+            )) })
+          },
+          group.id
+        )) : /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "No other AAA alternatives" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "The NSW recommended pairing is the only AAA-compliant foreground option for this background." })
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsx("section", { ref: technicalDetailsSectionRef, className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-b border-grey-200 px-4 py-4 sm:px-5", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "Token, tone, HEX, RGB, HSL, and OKLCH values for the current selection." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-5", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel2,
+            {
+              title: "Background values",
+              color: selectedBackground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel2,
+            {
+              title: "Foreground values",
+              color: detailForeground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          )
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "mb-4 text-foreground", trim: "normal", children: "Share colour pairing" }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your current colour pairing:" }),
+            /* @__PURE__ */ jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "shrink-0 self-center",
+                onClick: () => copyValue(
+                  "share-url",
+                  typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
+                  "Colour pairing link copied"
+                ),
+                "aria-label": copiedKey === "share-url" ? "Colour pairing URL copied to clipboard" : "Copy colour pairing URL to clipboard",
+                title: copiedKey === "share-url" ? "Copied" : "Copy URL",
+                children: copiedKey === "share-url" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy URL"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("code", { className: "mt-3 block w-full rounded-sm border border-grey-200 bg-background px-3 py-2 font-mono text-[11px] break-all text-foreground sm:text-xs", children: shareUrl })
         ] })
       ] })
     ] })
   ] });
 }
-function ColorPairingToolV2({
-  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+function ColorPairingToolV4({
+  onAnalyticsEvent = () => {
+  },
+  visibleFormats = DEFAULT_VISIBLE_FORMATS4
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV4Loading, {}), children: /* @__PURE__ */ jsx(
+    ColorPairingToolV4Content,
+    {
+      onAnalyticsEvent,
+      visibleFormats: normalizedVisibleFormats
+    }
+  ) });
 }
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
@@ -18087,23 +21441,23 @@ var ComboChart = React5__default.forwardRef((props, forwardedRef) => {
 });
 ComboChart.displayName = "ComboChart";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    SheetPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -18123,7 +21477,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -18133,7 +21487,7 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
+          showClose && /* @__PURE__ */ jsx(SheetPrimitive.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
             /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] }) })
@@ -18164,7 +21518,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -18177,7 +21531,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -19446,7 +22800,7 @@ function FieldLabel({
     }
   );
 }
-function Description4({
+function Description5({
   className,
   ...props
 }) {
@@ -19798,7 +23152,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.102.0"};
+  version: "1.104.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -21070,28 +24424,6 @@ function Loading() {
     /* @__PURE__ */ jsx(Text, { children: "Loading..." })
   ] });
 }
-function useSelectorHeight(selector = "header") {
-  const [height, setHeight] = useState(0);
-  const elementRef = useRef(null);
-  const resizeObserverRef = useRef(null);
-  useEffect(() => {
-    const element = document.querySelector(selector);
-    if (!element) return;
-    elementRef.current = element;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const target = entry?.target ?? elementRef.current;
-      if (!target) return;
-      setHeight(target.offsetHeight);
-    });
-    resizeObserverRef.current = resizeObserver;
-    resizeObserver.observe(element);
-    return () => {
-      resizeObserverRef.current?.disconnect();
-    };
-  }, [selector]);
-  return height;
-}
 function MainNavigation({ navigation }) {
   const headerHeight = useSelectorHeight();
   return /* @__PURE__ */ jsx(
@@ -30856,110 +34188,6 @@ function ResizableHandle({
     }
   );
 }
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
-}
-function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetClose({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
-}
-function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showClose = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        "data-slot": "sheet-content",
-        className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
-            /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -35687,13 +38915,36 @@ function getHeadings(slugify = slugifyWithCounter()) {
   });
   return result;
 }
-function usePageHeadings() {
+function areHeadingNodesEqual(left, right) {
+  if (left.level !== right.level || left.id !== right.id || left.title !== right.title) {
+    return false;
+  }
+  if (left.children.length !== right.children.length) {
+    return false;
+  }
+  return left.children.every((child, index) => areHeadingNodesEqual(child, right.children[index]));
+}
+function areHeadingTreesEqual(left, right) {
+  if (left.length !== right.length) {
+    return false;
+  }
+  return left.every((heading, index) => areHeadingNodesEqual(heading, right[index]));
+}
+function usePageHeadings(enabled = true) {
   const [headings, setHeadings] = useState([]);
   const pathname = usePathname();
   const observerRef = useRef(null);
   const observedElRef = useRef(null);
   useEffect(() => {
-    const update = () => setHeadings(getHeadings());
+    if (!enabled) {
+      return;
+    }
+    const update = () => {
+      const nextHeadings = getHeadings();
+      setHeadings(
+        (currentHeadings) => areHeadingTreesEqual(currentHeadings, nextHeadings) ? currentHeadings : nextHeadings
+      );
+    };
     const attachToCurrentArticle = () => {
       const article = document.querySelector("article");
       if (!article || observedElRef.current === article) return;
@@ -35740,16 +38991,8 @@ function usePageHeadings() {
       observerRef.current = null;
       observedElRef.current = null;
     };
-  }, [pathname]);
-  return headings;
-}
-function useStickyOffset(extraPadding = 0) {
-  const headerHeight = useSelectorHeight("#nsw-header");
-  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
-  return useMemo(() => {
-    const total = headerHeight + navigationHeight + extraPadding;
-    return total > 0 ? total : 0;
-  }, [extraPadding, headerHeight, navigationHeight]);
+  }, [enabled, pathname]);
+  return enabled ? headings : [];
 }
 function createFormStore(opts) {
   const { storageKey, initialFormData, initialFormStatus } = opts;
@@ -35796,6 +39039,6 @@ var languages = [
   "html"
 ];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorPairingToolV2, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorPairingToolV2, ColorPairingToolV3, ColorPairingToolV4, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description5 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map