import { clsx } from "clsx"
import { extendTailwindMerge } from "tailwind-merge"

/**
 * The design system adds named type-scale utilities (`text-title`, `text-body-sm`,
 * `text-caption`…). tailwind-merge does not know them, so by default it files
 * them under the text-colour group and treats `text-title-lg text-ink-1` as a
 * conflict — silently dropping one of the two.
 *
 * Registering the scale as font sizes makes size and colour independent again,
 * which is what lets components set both without ordering mattering.
 */
const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [
        {
          text: [
            'display-lg', 'display',
            'title-lg', 'title',
            'body-lg', 'body', 'body-sm',
            'caption', 'overline',
          ],
        },
      ],
    },
  },
})

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

export const isIframe = window.self !== window.top;