@nswds/app 1.99.0 → 1.101.0

package/dist/index.cjs

@@ -40,8 +40,6 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var TabsPrimitives = require('@radix-ui/react-tabs');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
-var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
-var TogglePrimitive = require('@radix-ui/react-toggle');
 var cmdk = require('cmdk');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
@@ -49,6 +47,8 @@ var reactTable = require('@tanstack/react-table');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var vaul = require('vaul');
 var reactHookForm = require('react-hook-form');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var TogglePrimitive = require('@radix-ui/react-toggle');
 var Image2 = require('next/image');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
@@ -110,11 +110,11 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var TabsPrimitives__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitives);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
-var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
@@ -7761,7 +7761,7 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-base text-muted-foreground", className),
       ...props
     }
   );
@@ -14973,7 +14973,10 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
   ] }) });
 }
 var recommendedBackgroundTones = [50, 100, 200, 400, 600, 800];
+var recommendedForegroundTones = [50, 200, 400, 600, 800];
 var AAA_NORMAL_TEXT_RATIO = 7;
+var DEFAULT_PRIMARY_FAMILY_KEY = "blue";
+var DEFAULT_ACCENT_FAMILY_KEY = "red";
 var MIN_DARK_BACKGROUND_TONE_FOR_WHITE = 600;
 var WHITE_FOREGROUND = {
   token: "white",
@@ -14982,6 +14985,8 @@ var WHITE_FOREGROUND = {
   rgb: "rgb(255, 255, 255)",
   hsl: "hsl(0, 0%, 100%)",
   oklch: "oklch(1 0 0)",
+  familyKey: "white",
+  familyLabel: "White",
   tone: 0
 };
 function extractTone(token) {
@@ -14992,23 +14997,47 @@ function formatFamilyLabel(name, key) {
   if (key === "grey") return "Grey";
   return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
 }
-function toPairingColor(color2) {
+function toPairingColor(color2, familyKey, familyLabel) {
   return {
     ...color2,
+    familyKey,
+    familyLabel,
     tone: extractTone(color2.token)
   };
 }
-function getPreferredForegroundTone(backgroundTone) {
-  if (backgroundTone <= 200) return 800;
-  if (backgroundTone <= 500) return 700;
-  if (backgroundTone <= 650) return 250;
-  return 200;
+function buildPairingCollections() {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    })
+  };
 }
+var pairingFamilyCollections = buildPairingCollections();
 function getPairRating(contrastRatio) {
   if (contrastRatio >= 7) return "AAA";
   if (contrastRatio >= 4.5) return "AA";
   return "AA Large";
 }
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 600;
+  return 200;
+}
 function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
   if (preferredForegroundTone < backgroundTone) {
     return foregroundTone < backgroundTone;
@@ -15031,15 +15060,27 @@ function buildPair(background, foreground) {
     rating: getPairRating(contrastRatio)
   };
 }
-function pickForeground(colorsToPair, background, minimumRatio) {
+function sortRecommendedPairs(background, pairs) {
   const preferredForegroundTone = getPreferredForegroundTone(background.tone);
-  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
-  if (passingCandidates.length === 0) return null;
-  const preferredCandidates = passingCandidates.filter(
-    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
-  );
-  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
-  return candidates.sort((left, right) => {
+  return [...pairs].sort((left, right) => {
+    const leftPreferred = isPreferredDirection(
+      background.tone,
+      left.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    const rightPreferred = isPreferredDirection(
+      background.tone,
+      right.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    if (leftPreferred !== rightPreferred) {
+      return leftPreferred - rightPreferred;
+    }
+    const leftWhitePenalty = left.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    const rightWhitePenalty = right.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    if (leftWhitePenalty !== rightWhitePenalty) {
+      return leftWhitePenalty - rightWhitePenalty;
+    }
     const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
     const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
     if (leftTargetDelta !== rightTargetDelta) {
@@ -15050,258 +15091,359 @@ function pickForeground(colorsToPair, background, minimumRatio) {
     if (leftToneGap !== rightToneGap) {
       return rightToneGap - leftToneGap;
     }
-    return right.contrastRatio - left.contrastRatio;
-  })[0];
-}
-function buildRecommendedPairs(colorsToPair, minimumRatio) {
-  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
-  const recommendedPairs = [];
-  for (const background of backgrounds) {
-    const pair = pickForeground(colorsToPair, background, minimumRatio);
-    const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
-    if (pair && !recommendedPairs.some((item) => item.id === pair.id)) {
-      recommendedPairs.push(pair);
+    if (left.foreground.familyKey === background.familyKey && right.foreground.familyKey !== background.familyKey) {
+      return -1;
     }
-    if (whitePair && whitePair.contrastRatio >= minimumRatio && !recommendedPairs.some((item) => item.id === whitePair.id)) {
-      recommendedPairs.push(whitePair);
+    if (right.foreground.familyKey === background.familyKey && left.foreground.familyKey !== background.familyKey) {
+      return 1;
     }
+    return right.contrastRatio - left.contrastRatio;
+  });
+}
+function dedupeColors(colorsToDedupe) {
+  return Array.from(new Map(colorsToDedupe.map((color2) => [color2.token, color2])).values());
+}
+function buildRecommendedPairsForBackground(background, foregrounds, minimumRatio) {
+  const candidatePairs = foregrounds.filter((foreground) => foreground.token !== background.token).map((foreground) => buildPair(background, foreground)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
+  if (whitePair && whitePair.contrastRatio >= minimumRatio) {
+    candidatePairs.push(whitePair);
   }
-  return recommendedPairs;
+  const dedupedPairs = Array.from(new Map(candidatePairs.map((pair) => [pair.id, pair])).values());
+  return sortRecommendedPairs(background, dedupedPairs);
+}
+function findGreyFamily(families) {
+  return families.find((family) => family.key.toLowerCase().includes("grey")) ?? families[0];
+}
+function getNonGreyFamilies(families) {
+  const greyFamily = findGreyFamily(families);
+  return families.filter((family) => family.key !== greyFamily.key);
+}
+function findFamilyByKey(families, key) {
+  return key ? families.find((family) => family.key === key) : void 0;
+}
+function getDefaultPrimaryFamily(families) {
+  const nonGreyFamilies = getNonGreyFamilies(families);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_PRIMARY_FAMILY_KEY) ?? findFamilyByKey(nonGreyFamilies, "green") ?? nonGreyFamilies[0] ?? families[0];
+}
+function getDefaultAccentFamily(families, primaryKey) {
+  const nonGreyFamilies = getNonGreyFamilies(families).filter((family) => family.key !== primaryKey);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_ACCENT_FAMILY_KEY) ?? nonGreyFamilies[0] ?? getDefaultPrimaryFamily(families);
+}
+function isApprovedBackgroundTone(color2) {
+  return recommendedBackgroundTones.includes(
+    color2.tone
+  );
+}
+function isApprovedForegroundTone(color2) {
+  return recommendedForegroundTones.includes(
+    color2.tone
+  );
+}
+function getPairingFamilies(themeCategory) {
+  return pairingFamilyCollections[themeCategory];
 }
-function buildRecommendedCollections(minimumRatio) {
+function getDefaultAccentFamilyKey(themeCategory, primaryKey) {
+  return getDefaultAccentFamily(getPairingFamilies(themeCategory), primaryKey).key;
+}
+function getPairingContext(themeCategory, primaryKey, accentKey) {
+  const families = getPairingFamilies(themeCategory);
+  const primary = findFamilyByKey(getNonGreyFamilies(families), primaryKey) ?? getDefaultPrimaryFamily(families);
+  const accent = findFamilyByKey(
+    getNonGreyFamilies(families).filter((family) => family.key !== primary.key),
+    accentKey
+  ) ?? getDefaultAccentFamily(families, primary.key);
+  const grey = findGreyFamily(families);
+  const allFamilies = [primary, accent, grey];
+  const backgroundGroups = [
+    {
+      key: "primary",
+      label: "Primary backgrounds",
+      family: primary,
+      backgrounds: primary.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "accent",
+      label: "Accent backgrounds",
+      family: accent,
+      backgrounds: accent.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "grey",
+      label: "Grey backgrounds",
+      family: grey,
+      backgrounds: grey.colors.filter(isApprovedBackgroundTone)
+    }
+  ];
+  const backgrounds = backgroundGroups.flatMap((group) => group.backgrounds);
+  const candidateForegrounds = dedupeColors(
+    allFamilies.flatMap((family) => family.colors.filter(isApprovedForegroundTone))
+  );
+  const pairsByBackground = {};
+  for (const background of backgrounds) {
+    pairsByBackground[background.token] = buildRecommendedPairsForBackground(
+      background,
+      candidateForegrounds,
+      AAA_NORMAL_TEXT_RATIO
+    );
+  }
   return {
-    brand: Object.entries(colors.brand).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    }),
-    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    })
+    accent,
+    allFamilies,
+    backgroundGroups,
+    backgrounds,
+    grey,
+    pairsByBackground,
+    primary,
+    recommendedPairs: backgrounds.flatMap(
+      (background) => pairsByBackground[background.token] ?? []
+    ),
+    themeCategory
   };
 }
-var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
 function getWhiteForegroundPair(background) {
   return buildPair(background, WHITE_FOREGROUND);
 }
 function supportsWhiteForegroundPreview(background) {
   return background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE;
 }
-function getPairingColorValue(color2, format) {
-  return getColorValue(color2, format);
-}
-var styles3 = {
-  base: [
-    // Base
-    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
-    // States
-    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
-    // Hover
-    "hover:bg-grey-100 hover:text-grey-850",
-    // Focus
-    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
-    // Dark mode
-    "dark:text-white",
-    // Dark mode states
-    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
-    // Dark mode hover
-    "dark:hover:bg-white/10 dark:hover:text-white",
-    // Disabled
-    "disabled:pointer-events-none disabled:opacity-50",
-    // Icon
-    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
-    // Aria invalid
-    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-    // Aria invalid dark mode
-    "dark:aria-invalid:ring-destructive/40"
-  ],
-  outline: [
-    // Base
-    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
-    // States
-    "hover:[--toggle-border:var(--color-grey-400)]",
-    // Dark mode
-    "dark:[--toggle-border:white]/40",
-    // Dark mode states
-    "dark:hover:[--toggle-border:white]/50",
-    // Data on
-    "data-[state=on]:bg-primary-800/10"
-  ]
-};
-var toggleVariants = classVarianceAuthority.cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12__default.default(styles3.outline)
-    },
-    size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "default"
+var SluggerContext = React5__namespace.default.createContext(null);
+function flattenText(nodes) {
+  if (nodes == null || typeof nodes === "boolean") return "";
+  if (typeof nodes === "string" || typeof nodes === "number" || typeof nodes === "bigint")
+    return String(nodes);
+  if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
+  if (React5__namespace.default.isValidElement(nodes)) {
+    return flattenText(nodes.props.children);
   }
-});
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TogglePrimitive__namespace.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
+  return "";
 }
-var ToggleGroupContext = React5__namespace.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
+function baseSlug(input) {
+  return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function Heading({
   className,
-  variant,
-  size,
+  trim = "normal",
+  size = 1,
+  level = 1,
+  display = false,
+  id: idProp,
   children,
   ...props
 }) {
+  const Tag = `h${level}`;
+  const slugger = React5.useContext(SluggerContext);
+  const headingSizeClasses = {
+    1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--heading-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-40)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--heading-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-36)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    5: "text-[calc(var(--heading-font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-32)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    6: "text-[calc(var(--heading-font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-28)] tracking-[calc(var(--letter-spacing-0)_+_var(--heading-letter-spacing))]"
+  };
+  const displaySizeClasses = {
+    1: "text-[calc(var(--display-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-96)] tracking-[calc(var(--heading-letter-spacing-3)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--display-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-60)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--display-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--display-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]"
+  };
+  const sizeClass = display ? displaySizeClasses[size] : headingSizeClasses[size];
+  const trimClasses = {
+    normal: ["before:content-none after:content-none"],
+    start: [
+      'before:content-[""] before:table after:content-none',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    end: [
+      'before:content-none after:content-[""] after:table',
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    both: [
+      'before:content-[""] before:table after:content-[""] after:table',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ]
+  };
+  const computedId = React5.useMemo(() => {
+    if (idProp) return idProp;
+    const text = flattenText(children);
+    if (!text) return void 0;
+    const base = baseSlug(text);
+    return slugger ? slugger.slug(base) : base;
+  }, [idProp, children, slugger]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Root,
+    Tag,
     {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+      id: computedId,
+      "data-anchor": true,
+      className: clsx12__default.default(
+        className,
+        trimClasses[trim],
+        "m-0",
+        "leading-[var(--line-height)] font-[var(--heading-font-family)] font-bold",
+        "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
+        "text-primary-800 dark:text-white",
+        sizeClass
+      ),
+      children
     }
   );
 }
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}) {
-  const context = React5__namespace.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Item,
-    {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-function FormatToggle({ format, setFormat }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
-        ]
-      }
-    )
-  ] });
-}
-function getPreferredFamilyKey(families) {
-  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
-}
-function getDefaultPair(family) {
-  if (!family || family.recommendedPairs.length === 0) return null;
-  return family.recommendedPairs.reduce((bestPair, pair) => {
-    const bestDelta = Math.abs(bestPair.background.tone - 600);
-    const currentDelta = Math.abs(pair.background.tone - 600);
-    return currentDelta < bestDelta ? pair : bestPair;
-  }, family.recommendedPairs[0]);
-}
-function getFamilySwatchColor(family) {
-  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
-}
+var AAA_NORMAL_TEXT_THRESHOLD = "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_THRESHOLD = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
+var PREFERRED_BACKGROUND_TONES = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID = "nsw-blue-800:nsw-blue-200";
 function getToneFromToken(token) {
   if (!token) return null;
   const match = token.match(/-(\d+)$/);
   return match ? Number.parseInt(match[1], 10) : null;
 }
-function isApprovedBackgroundTone(color2) {
-  return recommendedBackgroundTones.includes(
-    color2.tone
-  );
+function getFamilySwatchColor(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 getBackgroundOptions(family) {
-  return family?.colors.filter(isApprovedBackgroundTone) ?? [];
+function getFamilySelectorLabel(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 getActivePaletteFamilyLabel(family, themeCategory, paletteRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = paletteRole === "primary" ? 800 : paletteRole === "accent" ? 600 : 800;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
 }
 function isWhiteForegroundPair(pair) {
   return pair.foreground.token === "white";
 }
-function getRecommendedPairForBackground(family, backgroundToken, preferredPairId) {
-  if (!family) return null;
-  const backgroundPairs = family.recommendedPairs.filter(
-    (pair) => pair.background.token === backgroundToken
-  );
-  if (backgroundPairs.length === 0) return null;
+function getWhiteForegroundGuidance(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 getPreviewGuidance(pair, isRecommended) {
+  if (!isWhiteForegroundPair(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 getWhiteForegroundGuidance(pair);
+}
+function getPairingColorDisplayName(color2) {
+  return color2.name ?? color2.token;
+}
+function WorkflowStep({
+  step,
+  title,
+  description,
+  level = 2,
+  variant = "section",
+  className
+}) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 items-center justify-center rounded-full bg-primary-800 text-sm font-semibold text-white dark:bg-primary-700", children: step }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Heading,
+          {
+            level,
+            size: 5,
+            className: "text-primary-800 dark:text-white",
+            trim: "normal",
+            children: title
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base/6 text-muted-foreground", children: description }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-800 text-sm font-semibold text-white dark:bg-primary-700", children: step }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Heading,
+        {
+          level,
+          size: 4,
+          className: "text-primary-800 dark:text-white",
+          trim: "normal",
+          children: title
+        }
+      ),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base/6 text-muted-foreground", children: description }) : null
+    ] })
+  ] }) });
+}
+function getPreferredPairForBackground(pairs, preferredPairId) {
   if (preferredPairId) {
-    const preferredPair = backgroundPairs.find((pair) => pair.id === preferredPairId);
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
     if (preferredPair) {
       return preferredPair;
     }
   }
-  return backgroundPairs.find((pair) => !isWhiteForegroundPair(pair)) ?? backgroundPairs[0];
+  return pairs.find((pair) => !isWhiteForegroundPair(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES) {
+    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_TONES) {
+    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 getFallbackBackgroundToken(family, preferredTone) {
-  const backgroundOptions = getBackgroundOptions(family);
-  if (preferredTone) {
-    const preferredBackground = backgroundOptions.find((color2) => color2.tone === preferredTone);
-    if (preferredBackground) {
-      return preferredBackground.token;
+function resolveBackgroundToken(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 getDefaultPair(family)?.background.token ?? backgroundOptions[0]?.token ?? "";
+  return getDefaultBackgroundToken(context);
 }
 function ColorPairingToolLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
     ] })
@@ -15309,30 +15451,52 @@ function ColorPairingToolLoading() {
 }
 function getInitialPairingState(searchParams) {
   const paletteParam = searchParams.get("palette");
-  const familyParam = searchParams.get("family");
+  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 families = recommendedAaaPairingCollections[themeCategory];
-  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
-  const backgroundOptions = getBackgroundOptions(activeFamily);
-  const pairBackgroundToken = activeFamily?.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = backgroundOptions.some((color2) => color2.token === backgroundParam) ? backgroundParam : getFallbackBackgroundToken(
-    activeFamily,
-    getToneFromToken(backgroundParam ?? pairBackgroundToken)
-  );
-  const selectedPairId = getRecommendedPairForBackground(activeFamily, selectedBackgroundToken, pairParam)?.id ?? "";
-  return { familyKey, selectedBackgroundToken, selectedPairId, themeCategory };
+  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_TOKEN
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID
+  ) ? DEFAULT_INITIAL_PAIR_ID : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
 }
 function PairPreview({
-  family,
+  familySummary,
   isRecommended,
   pair
 }) {
   const whiteForeground = isWhiteForegroundPair(pair);
   const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
   const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  const fauxButtonStyle = {
+    "--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
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15354,7 +15518,7 @@ function PairPreview({
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
-                family.label
+                familySummary
               ]
             }
           ),
@@ -15375,10 +15539,23 @@ function PairPreview({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Tone on tone" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: getPreviewGuidance(pair, isRecommended) }),
+            /* @__PURE__ */ jsxRuntime.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"
+              }
+            )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15415,24 +15592,94 @@ function PairPreview({
     }
   ) });
 }
+function PreviewFallbackCard({
+  familySummary,
+  selectedBackground
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: selectedBackground.hex,
+        color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+          familySummary
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-current/10 px-4 py-2 text-sm font-semibold", children: [
+            "No recommendation",
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+        ] })
+      ] })
+    }
+  ) });
+}
 function PairDetailCard({
   color: color2,
-  format,
-  role
+  role,
+  visibleFormats
 }) {
   const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
   const [copiedField, setCopiedField] = React5.useState(null);
-  const valueLabel = format.toUpperCase();
-  const formattedValue = getPairingColorValue(color2, format);
+  const copiedFieldTimeoutRef = React5.useRef(null);
+  const hasDisplayTone = color2.token !== "white";
+  const formatRows = visibleFormats.map((format) => ({
+    key: format,
+    label: format.toUpperCase(),
+    value: color2[format],
+    mono: true,
+    copyable: true
+  }));
+  const valueRows = [
+    { key: "token", label: "Token", value: color2.token, mono: true, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      mono: false,
+      copyable: hasDisplayTone
+    },
+    ...formatRows
+  ];
+  React5.useEffect(() => {
+    return () => {
+      if (copiedFieldTimeoutRef.current) {
+        clearTimeout(copiedFieldTimeoutRef.current);
+      }
+    };
+  }, []);
   const copyField = (field) => {
-    const fieldValue = field === "token" ? color2.token : field === "tone" ? String(color2.tone) : formattedValue;
+    if (field === "tone" && !hasDisplayTone) {
+      return;
+    }
+    const fieldValue = valueRows.find((row) => row.key === field)?.value;
+    if (!fieldValue) return;
     copyToClipboardRaw(fieldValue);
     setCopiedField(field);
-    const toastLabel = field === "token" ? "Token" : field === "tone" ? "Tone" : `${valueLabel} value`;
+    const toastLabel = valueRows.find((row) => row.key === field)?.label ?? "Value";
     sonner.toast(`${toastLabel} copied to clipboard`, {
       duration: 2e3
     });
-    setTimeout(() => setCopiedField(null), 2e3);
+    if (copiedFieldTimeoutRef.current) {
+      clearTimeout(copiedFieldTimeoutRef.current);
+    }
+    copiedFieldTimeoutRef.current = setTimeout(() => {
+      setCopiedField(null);
+      copiedFieldTimeoutRef.current = null;
+    }, 2e3);
   };
   const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxRuntime.jsxs(
     Button2,
@@ -15447,43 +15694,39 @@ function PairDetailCard({
       ]
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-4 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          className: "h-14 w-full rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
           style: { backgroundColor: color2.hex }
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: role }),
-        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: color2.name ?? color2.token })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
-          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-base break-all", children: color2.token })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
-          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: color2.tone })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
-          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-0", children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "divide-y divide-grey-100 dark:divide-grey-800", children: valueRows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 px-6 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: row.label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "min-w-0 flex-1 text-base text-foreground",
+              row.mono && "font-mono text-sm break-all sm:text-base"
+            ),
+            children: row.value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 justify-end", children: row.copyable ? renderCopyButton(
+          row.key,
+          `Copy ${role.toLowerCase()} ${row.label.toLowerCase()}`
+        ) : null })
       ] })
-    ] })
+    ] }, row.key)) }) })
   ] });
 }
 function ComplianceRow({
@@ -15491,31 +15734,40 @@ function ComplianceRow({
   passes,
   threshold
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-sm border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: cn(
-          "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
-          passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
-        ),
-        children: [
-          passes ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
-          passes ? "Pass" : "Fail"
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 rounded-sm border px-4 py-3",
+        passes ? "border-success-200 bg-success-50 dark:border-success-900/60 dark:bg-success-950/20" : "border-danger-200 bg-danger-50 dark:border-danger-900/60 dark:bg-danger-950/20"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
+              passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
+            ),
+            children: [
+              passes ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+              passes ? "Pass" : "Fail"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function PairComplianceCard({ pair }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "AAA compliance" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Only pairs that pass AAA normal-text contrast are suggested here. Evaluation uses the raw contrast ratio, not the rounded display value." })
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "This card shows the contrast result for the example above. Evaluation uses the raw contrast ratio, not the rounded display value." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
@@ -15530,7 +15782,7 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA normal text",
           passes: pair.passes.aaaText,
-          threshold: "7.0:1 or higher"
+          threshold: AAA_NORMAL_TEXT_THRESHOLD
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15538,105 +15790,115 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA large text",
           passes: pair.passes.aaaLarge,
-          threshold: "4.5:1 or higher"
+          threshold: AAA_LARGE_TEXT_THRESHOLD
         }
       )
     ] })
   ] });
 }
-function WhiteTextExampleCard({ pair }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "White text example" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "For approved dark backgrounds, white text may be suitable for large text. It is only recommended in this tool when it also passes AAA normal text." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+function ColorFamilySelector({
+  families,
+  label,
+  selectedKey,
+  selectionRole,
+  themeCategory,
+  onSelect
+}) {
+  const swatchTone = selectionRole === "primary colour" ? 800 : 600;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "mb-4 text-foreground", trim: "normal", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isSelected = family.key === selectedKey;
+      const familySelectorLabel = getFamilySelectorLabel(family, themeCategory, selectionRole);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
         {
-          className: "rounded-sm border border-grey-200 p-6 dark:border-grey-700",
-          style: {
-            backgroundColor: pair.background.hex,
-            color: pair.foreground.hex
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-tight font-semibold", children: "Large text example" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm/6", children: [
-                "White text on ",
-                pair.background.token
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm/6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                "AAA normal text: ",
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaText ? "pass" : "fail" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                "AAA large text: ",
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
-              ] })
-            ] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
-            pair.contrastRatio.toFixed(2),
-            ":1"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ComplianceRow,
-          {
-            label: "AAA normal text",
-            passes: pair.passes.aaaText,
-            threshold: "7.0:1 or higher"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ComplianceRow,
-          {
-            label: "AAA large text",
-            passes: pair.passes.aaaLarge,
-            threshold: "4.5:1 or higher"
-          }
-        )
-      ] })
-    ] })
+          type: "button",
+          "aria-label": `Select ${familySelectorLabel} as ${selectionRole}`,
+          "aria-pressed": isSelected,
+          onClick: () => onSelect(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isSelected && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family, swatchTone) }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: familySelectorLabel })
+          ]
+        },
+        family.key
+      );
+    }) })
   ] });
 }
-function ColorPairingToolContent() {
+function ColorPairingToolContent({ visibleFormats }) {
   const searchParams = navigation.useSearchParams();
-  const {
-    familyKey: initialFamilyKey,
-    selectedBackgroundToken: initialSelectedBackgroundToken,
-    selectedPairId: initialSelectedPairId,
-    themeCategory: initialThemeCategory
-  } = getInitialPairingState(searchParams);
-  const [themeCategory, setThemeCategory] = React5.useState(initialThemeCategory);
-  const [format, setFormat] = React5.useState("hex");
-  const [activeFamilyKey, setActiveFamilyKey] = React5.useState(initialFamilyKey);
+  const [initialState] = React5.useState(() => getInitialPairingState(searchParams));
+  const [themeCategory, setThemeCategory] = React5.useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = React5.useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = React5.useState(initialState.accentKey);
+  const [, copyShareLinkRaw] = usehooks.useCopyToClipboard();
+  const [copiedShareLink, setCopiedShareLink] = React5.useState(false);
+  const copiedShareLinkTimeoutRef = React5.useRef(null);
   const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
-    initialSelectedBackgroundToken
-  );
-  const [selectedPairId, setSelectedPairId] = React5.useState(initialSelectedPairId);
-  const families = recommendedAaaPairingCollections[themeCategory];
-  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
-  const backgroundOptions = getBackgroundOptions(activeFamily);
-  const selectedBackground = backgroundOptions.find((color2) => color2.token === selectedBackgroundToken) ?? backgroundOptions[0] ?? activeFamily?.colors[0] ?? null;
-  const selectedPair = selectedBackground ? getRecommendedPairForBackground(activeFamily, selectedBackground.token, selectedPairId) : null;
-  const whiteForegroundExample = selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null;
-  const previewPair = selectedPair ?? whiteForegroundExample;
-  const showWhiteForegroundExample = Boolean(whiteForegroundExample) && (!selectedPair || selectedPair.foreground.token !== "white");
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = React5.useState(initialState.selectedPairId);
+  const themeFamilies = React5.useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = React5.useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = React5.useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = React5.useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = React5.useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = React5.useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = React5.useMemo(
+    () => getPreferredPairForBackground(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = React5.useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
   const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
-  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+  const familySummary = React5.useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.primary.label, context.accent.label, context.grey.label]
+  );
+  React5.useEffect(() => {
+    return () => {
+      if (copiedShareLinkTimeoutRef.current) {
+        clearTimeout(copiedShareLinkTimeoutRef.current);
+      }
+    };
+  }, []);
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
     const params = new URLSearchParams(window.location.search);
+    params.delete("family");
     params.set("palette", nextThemeCategory);
-    params.set("family", nextFamilyKey);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
     params.set("background", nextSelectedBackgroundToken);
     if (nextSelectedPairId) {
       params.set("pair", nextSelectedPairId);
@@ -15649,294 +15911,450 @@ function ColorPairingToolContent() {
       `${window.location.pathname}?${params.toString()}${window.location.hash}`
     );
   };
-  const handleThemeCategoryChange = (nextThemeCategory) => {
-    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
-    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
-    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
-    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
-      nextActiveFamily,
-      getToneFromToken(selectedBackgroundToken)
-    );
-    const nextSelectedPair = getRecommendedPairForBackground(
-      nextActiveFamily,
-      nextSelectedBackgroundToken,
-      selectedPairId
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken(preferredBackgroundToken)
     );
+    const nextSelectedPairId = getPreferredPairForBackground(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
     setThemeCategory(nextThemeCategory);
-    setActiveFamilyKey(nextFamilyKey);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
     setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
+    setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       nextThemeCategory,
-      nextFamilyKey,
+      nextContext.primary.key,
+      nextContext.accent.key,
       nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      nextSelectedPairId
     );
   };
-  const handleFamilyChange = (nextFamilyKey) => {
-    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
-    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
-      nextActiveFamily,
-      getToneFromToken(selectedBackgroundToken)
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
     );
-    const nextSelectedPair = getRecommendedPairForBackground(
-      nextActiveFamily,
-      nextSelectedBackgroundToken,
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
       selectedPairId
     );
-    setActiveFamilyKey(nextFamilyKey);
-    setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
       themeCategory,
-      nextFamilyKey,
-      nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
     );
   };
   const handleBackgroundChange = (nextSelectedBackgroundToken) => {
-    const nextSelectedPair = getRecommendedPairForBackground(
-      activeFamily,
-      nextSelectedBackgroundToken,
+    const nextSelectedPairId = getPreferredPairForBackground(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
       selectedPairId
-    );
+    )?.id ?? "";
     setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
+    setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       themeCategory,
-      resolvedActiveFamilyKey,
+      context.primary.key,
+      context.accent.key,
       nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      nextSelectedPairId
     );
   };
   const handlePairChange = (nextSelectedPairId) => {
-    const nextSelectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
-    if (!nextSelectedPair) return;
-    setSelectedBackgroundToken(nextSelectedPair.background.token);
+    const nextSelectedPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId);
+    if (!nextSelectedPair || !selectedBackground) return;
     setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       themeCategory,
-      resolvedActiveFamilyKey,
-      nextSelectedPair.background.token,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
       nextSelectedPairId
     );
   };
-  if (!activeFamily || !selectedBackground) {
+  if (!selectedBackground) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No approved background tones available" }),
       /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No approved tones are available for the current palette." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+  const handleCopyShareLink = () => {
+    copyShareLinkRaw(window.location.href);
+    setCopiedShareLink(true);
+    sonner.toast("Colour pairing link copied to clipboard", {
+      duration: 2e3
+    });
+    if (copiedShareLinkTimeoutRef.current) {
+      clearTimeout(copiedShareLinkTimeoutRef.current);
+    }
+    copiedShareLinkTimeoutRef.current = setTimeout(() => {
+      setCopiedShareLink(false);
+      copiedShareLinkTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const activePaletteEntries = [
+    {
+      key: `primary-${context.primary.key}`,
+      label: "Primary",
+      family: context.primary,
+      familyLabel: getActivePaletteFamilyLabel(context.primary, themeCategory, "primary"),
+      swatchTone: 800
+    },
+    {
+      key: `accent-${context.accent.key}`,
+      label: "Accent",
+      family: context.accent,
+      familyLabel: getActivePaletteFamilyLabel(context.accent, themeCategory, "accent"),
+      swatchTone: 600
+    },
+    {
+      key: `grey-${context.grey.key}`,
+      label: "Grey",
+      family: context.grey,
+      familyLabel: getActivePaletteFamilyLabel(context.grey, themeCategory, "grey"),
+      swatchTone: 800
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowStep,
+        {
+          step: 1,
+          title: "Select your palette",
+          description: "Choose the palette family you want to work from.",
+          level: 2
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SegmentedControl,
+            {
+              value: themeCategory,
+              onValueChange: (value) => handleThemeCategoryChange(value),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "outline", size: "sm", onClick: handleCopyShareLink, children: [
+          copiedShareLink ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" }),
+          copiedShareLink ? "Link copied" : "Copy link"
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Pick a primary and accent colour. Grey is added automatically.",
+          level: 2
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          SegmentedControl,
+          ColorFamilySelector,
           {
-            value: themeCategory,
-            onValueChange: (value) => handleThemeCategoryChange(value),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
-            ] })
+            label: "Primary colour",
+            families: selectableFamilies,
+            selectedKey: context.primary.key,
+            selectionRole: "primary colour",
+            themeCategory,
+            onSelect: handlePrimaryColorChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColorFamilySelector,
+          {
+            label: "Accent colour",
+            families: selectableAccentFamilies,
+            selectedKey: context.accent.key,
+            selectionRole: "accent colour",
+            themeCategory,
+            onSelect: handleAccentColorChange
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(FormatToggle, { format, setFormat })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
-      const isActive = family.key === resolvedActiveFamilyKey;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4 dark:border-grey-700 dark:bg-grey-900/40", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.14em] text-foreground uppercase", children: "Active palette" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground", children: activePaletteEntries.map(({ family, familyLabel, key, label, swatchTone }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
         {
-          type: "button",
-          onClick: () => handleFamilyChange(family.key),
-          className: cn(
-            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
-            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
-            isActive && "border-grey-800 dark:border-grey-400"
-          ),
+          className: "inline-flex items-center gap-2 rounded-sm border border-grey-200 bg-background px-3 py-2 dark:border-grey-700",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "size-4 shrink-0 rounded-full",
-                style: { backgroundColor: getFamilySwatchColor(family) }
+                className: "size-2.5 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family, swatchTone) }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: family.label })
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: familyLabel })
           ]
         },
-        family.key
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-          previewPair ? /* @__PURE__ */ jsxRuntime.jsx(
-            PairPreview,
-            {
-              family: activeFamily,
-              isRecommended: Boolean(selectedPair),
-              pair: previewPair
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "p-6 sm:min-h-[26rem] sm:p-8",
-              style: {
-                backgroundColor: selectedBackground.hex,
-                color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
-                  activeFamily.label
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-current/10 px-4 py-2 text-sm font-semibold", children: [
-                    "No recommendation",
-                    /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+        key
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-4 border-b", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              WorkflowStep,
+              {
+                step: 3,
+                title: "Pick a background",
+                description: "Select an approved background tone from your primary, accent, or grey families.",
+                level: 3,
+                variant: "card"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "The centre dot shows the recommended foreground colour. A white slash means there is no recommended AAA foreground in this tool." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 rounded-sm border border-grey-200 bg-grey-50 p-4 sm:grid-cols-2 dark:border-grey-700 dark:bg-grey-900/40", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-sm border border-grey-200 bg-background px-3 py-3 dark:border-grey-700", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative block size-8 rounded-[4px] border border-grey-400 bg-background dark:border-grey-500", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-grey-800 dark:bg-grey-100" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Recommended foreground available" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "The centre dot marks the recommended foreground colour." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-sm border border-dashed border-grey-300 bg-background px-3 py-3 dark:border-grey-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative block size-8 rounded-[4px] border-2 border-dashed border-grey-400 bg-grey-500 dark:border-grey-500 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.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)]" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "No recommended AAA foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "A white slash marks swatches that do not currently have a recommended AAA foreground in this tool." })
                 ] })
               ] })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Only approved background tones are shown. Filled chips have a recommended AAA foreground pair, and dark backgrounds may also offer white text where it passes AAA." })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: backgroundOptions.map((color2) => {
-                const pair = getRecommendedPairForBackground(activeFamily, color2.token);
-                const hasWhiteExample = supportsWhiteForegroundPreview(color2);
-                const isSelected = selectedBackground.token === color2.token;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handleBackgroundChange(color2.token),
-                    className: cn(
-                      "group relative h-12 rounded-sm border border-grey-200 transition-transform hover:scale-[1.03] dark:border-grey-700",
-                      isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
-                    ),
-                    style: { backgroundColor: color2.hex },
-                    children: [
-                      pair ? /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
-                          style: { backgroundColor: pair.foreground.hex }
-                        }
-                      ) : null,
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
-                        color2.token,
-                        pair ? ` paired with ${pair.foreground.token}` : hasWhiteExample ? " has a white text example in this tool" : " has no recommended pair in this tool"
-                      ] })
-                    ]
-                  },
-                  color2.token
-                );
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "Selected background:",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+            context.backgroundGroups.map((group) => {
+              const groupFamilyLabel = selectedBackground.familyKey === group.family.key ? selectedBackground.name ?? selectedBackground.token : group.family.label;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: group.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: groupFamilyLabel })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  selectedPair ? "Recommended foreground:" : "White text example:",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
-                ] })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-6", children: group.backgrounds.map((background) => {
+                  const pairs = context.pairsByBackground[background.token] ?? [];
+                  const hasRecommendedForeground = pairs.length > 0;
+                  const preferredPair = selectedBackground.token === background.token ? selectedPair ?? getPreferredPairForBackground(pairs) : getPreferredPairForBackground(pairs);
+                  const hasWhiteExample = supportsWhiteForegroundPreview(background);
+                  const isSelected = selectedBackground.token === background.token;
+                  const ariaLabel = pairs.length > 0 ? `Select ${background.token} background, recommended with ${preferredPair?.foreground.token ?? "an AAA foreground"}` : hasWhiteExample ? `Select ${background.token} background, white text example available` : `Select ${background.token} background, no recommended foreground in this tool`;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": ariaLabel,
+                      "aria-pressed": isSelected,
+                      onClick: () => handleBackgroundChange(background.token),
+                      className: cn(
+                        "group relative h-12 rounded-sm border transition-all",
+                        hasRecommendedForeground && "border-grey-200 hover:scale-[1.03] hover:shadow-sm dark:border-grey-700",
+                        !hasRecommendedForeground && hasWhiteExample && "border-grey-300/80 hover:scale-[1.01] dark:border-grey-600/80",
+                        !hasRecommendedForeground && !hasWhiteExample && "border-dashed border-grey-300/70 hover:scale-[1.01] dark:border-grey-600/70",
+                        isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
+                      ),
+                      style: { backgroundColor: background.hex },
+                      children: [
+                        preferredPair ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                            style: { backgroundColor: preferredPair.foreground.hex }
+                          }
+                        ) : null,
+                        !hasRecommendedForeground ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-6 -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
+                  );
+                }) })
+              ] }, group.key);
+            }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Selected background:",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                selectedPair ? "Selected foreground:" : "White text example:",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
               ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
-            detailForeground ? /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended foreground available" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended pairs list for the same family." }) })
-            ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Recommended AAA combinations for this family, including white on eligible dark backgrounds." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
-            const isActive = selectedPair?.id === pair.id;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => handlePairChange(pair.id),
-                className: cn(
-                  "rounded-sm border p-4 text-left transition-colors",
-                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        previewPair ? /* @__PURE__ */ jsxRuntime.jsx(
+          PairPreview,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: previewPair
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewFallbackCard,
+          {
+            familySummary,
+            selectedBackground
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PairDetailCard,
+            {
+              color: selectedBackground,
+              role: "Background",
+              visibleFormats
+            }
+          ),
+          detailForeground ? /* @__PURE__ */ jsxRuntime.jsx(
+            PairDetailCard,
+            {
+              color: detailForeground,
+              role: "Foreground",
+              visibleFormats
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended foreground available" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended foregrounds for the same background." }) })
+          ] })
+        ] }),
+        previewPair ? /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: previewPair }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-4 border-b", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            WorkflowStep,
+            {
+              step: 4,
+              title: "Choose a foreground",
+              description: `Review the AAA combinations available for ${selectedBackground.token}.`,
+              level: 3,
+              variant: "card"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { children: [
+            "Recommended foregrounds are drawn from ",
+            context.primary.label,
+            ",",
+            " ",
+            context.accent.label,
+            ", Grey, and white where it meets AAA."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: selectedBackgroundPairs.length > 0 ? selectedBackgroundPairs.map((pair) => {
+          const isActive = selectedPair?.id === pair.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Use ${getPairingColorDisplayName(pair.foreground)} on ${getPairingColorDisplayName(pair.background)}`,
+              "aria-pressed": isActive,
+              onClick: () => handlePairChange(pair.id),
+              className: cn(
+                "rounded-sm border p-4 text-left transition-colors",
+                isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-[0.65rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-11 text-center", children: "BG" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-11 text-center", children: "FG" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
                           className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.background.hex }
+                          style: {
+                            backgroundColor: pair.background.hex
+                          }
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
                           className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.foreground.hex }
+                          style: {
+                            backgroundColor: pair.foreground.hex
+                          }
                         }
                       )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
-                      pair.rating
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
-                      pair.background.token,
-                      " / ",
-                      pair.foreground.token
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                      pair.contrastRatio.toFixed(2),
-                      ":1 contrast ratio"
-                    ] })
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-success-200 bg-success-50 px-2.5 py-1 text-xs font-semibold text-success-800 dark:border-success-900/60 dark:bg-success-950/20 dark:text-success-200", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                    pair.rating
                   ] })
-                ]
-              },
-              pair.id
-            );
-          }) })
-        ] }) })
-      ] }),
-      selectedPair ? /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair }) : null,
-      showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsxRuntime.jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
-    ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
+                    getPairingColorDisplayName(pair.background),
+                    " /",
+                    " ",
+                    getPairingColorDisplayName(pair.foreground)
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.foreground.familyLabel,
+                    " on ",
+                    pair.background.familyLabel
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.contrastRatio.toFixed(2),
+                    ":1 contrast ratio"
+                  ] })
+                ] })
+              ]
+            },
+            pair.id
+          );
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 p-4 text-sm text-muted-foreground dark:border-grey-700", children: "No recommended AAA foregrounds are available for this background." }) })
+      ] }) })
+    ] }) })
   ] });
 }
-function ColorPairingTool() {
-  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolContent, {}) });
+function ColorPairingTool({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
 }
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18417,93 +18835,152 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-
-// package.json
-var package_default = {
-  version: "1.98.0"};
-var SluggerContext = React5__namespace.default.createContext(null);
-function flattenText(nodes) {
-  if (nodes == null || typeof nodes === "boolean") return "";
-  if (typeof nodes === "string" || typeof nodes === "number" || typeof nodes === "bigint")
-    return String(nodes);
-  if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
-  if (React5__namespace.default.isValidElement(nodes)) {
-    return flattenText(nodes.props.children);
+var styles3 = {
+  base: [
+    // Base
+    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
+    // States
+    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
+    // Hover
+    "hover:bg-grey-100 hover:text-grey-850",
+    // Focus
+    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
+    // Dark mode
+    "dark:text-white",
+    // Dark mode states
+    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
+    // Dark mode hover
+    "dark:hover:bg-white/10 dark:hover:text-white",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
+    // Aria invalid
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    // Aria invalid dark mode
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  outline: [
+    // Base
+    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
+    // States
+    "hover:[--toggle-border:var(--color-grey-400)]",
+    // Dark mode
+    "dark:[--toggle-border:white]/40",
+    // Dark mode states
+    "dark:hover:[--toggle-border:white]/50",
+    // Data on
+    "data-[state=on]:bg-primary-800/10"
+  ]
+};
+var toggleVariants = classVarianceAuthority.cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12__default.default(styles3.outline)
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-8 px-1.5 min-w-8",
+      lg: "h-10 px-2.5 min-w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "default"
   }
-  return "";
-}
-function baseSlug(input) {
-  return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
+});
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TogglePrimitive__namespace.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
 }
-function Heading({
+var ToggleGroupContext = React5__namespace.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
   className,
-  trim = "normal",
-  size = 1,
-  level = 1,
-  display = false,
-  id: idProp,
+  variant,
+  size,
   children,
   ...props
 }) {
-  const Tag = `h${level}`;
-  const slugger = React5.useContext(SluggerContext);
-  const headingSizeClasses = {
-    1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--heading-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-40)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--heading-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-36)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    5: "text-[calc(var(--heading-font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-32)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    6: "text-[calc(var(--heading-font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-28)] tracking-[calc(var(--letter-spacing-0)_+_var(--heading-letter-spacing))]"
-  };
-  const displaySizeClasses = {
-    1: "text-[calc(var(--display-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-96)] tracking-[calc(var(--heading-letter-spacing-3)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--display-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-60)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--display-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--display-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]"
-  };
-  const sizeClass = display ? displaySizeClasses[size] : headingSizeClasses[size];
-  const trimClasses = {
-    normal: ["before:content-none after:content-none"],
-    start: [
-      'before:content-[""] before:table after:content-none',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    end: [
-      'before:content-none after:content-[""] after:table',
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    both: [
-      'before:content-[""] before:table after:content-[""] after:table',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ]
-  };
-  const computedId = React5.useMemo(() => {
-    if (idProp) return idProp;
-    const text = flattenText(children);
-    if (!text) return void 0;
-    const base = baseSlug(text);
-    return slugger ? slugger.slug(base) : base;
-  }, [idProp, children, slugger]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
+    ToggleGroupPrimitive__namespace.Root,
     {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      ),
       ...props,
-      id: computedId,
-      "data-anchor": true,
-      className: clsx12__default.default(
-        className,
-        trimClasses[trim],
-        "m-0",
-        "leading-[var(--line-height)] font-[var(--heading-font-family)] font-bold",
-        "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
-        "text-primary-800 dark:text-white",
-        sizeClass
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
       ),
+      ...props,
       children
     }
   );
 }
+function FormatToggle({ format, setFormat }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
+        ]
+      }
+    )
+  ] });
+}
+
+// package.json
+var package_default = {
+  version: "1.100.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),