@pipelex/mthds-form 0.30.0 → 0.32.0

package/dist/chunk-3GO65HWP.js

@@ -0,0 +1,693 @@
+import { z } from 'zod';
+
+// src/brand/contract.ts
+var COLOR_TOKEN_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring"
+];
+function isColorTokenName(name) {
+  return COLOR_TOKEN_NAMES.includes(name);
+}
+var COLOR_PAINTS = {
+  background: "The page canvas.",
+  foreground: "Text on the canvas.",
+  card: "A raised surface on the canvas: the rail's panel, a list's rows. May be translucent.",
+  "card-foreground": "Text on a card.",
+  popover: "A floating surface: a select's menu, a tooltip. Opaque.",
+  "popover-foreground": "Text on a popover.",
+  primary: "The accent: the run button, a selected pill, a section number, a highlight.",
+  "primary-foreground": "Text on the accent.",
+  secondary: "A quiet filled surface: a secondary button, an unselected segment.",
+  "secondary-foreground": "Text on a secondary surface.",
+  muted: "A subdued fill: a table's header band, an inactive tab strip.",
+  "muted-foreground": "Secondary text: descriptions, hints, a summary row's label. Most of the text on the page that is not a heading or a value.",
+  accent: "A hover fill: a menu item under the pointer.",
+  "accent-foreground": "Text on an accent fill.",
+  destructive: "The error colour: an invalid mark, a remove button.",
+  "destructive-foreground": "Text on the destructive colour.",
+  border: "The hairline: every border and divider.",
+  input: "The control surface, a field's own fill - a step off the canvas, so fields read as one family.",
+  ring: "The focus ring."
+};
+var BRAND_CONTRACT = [
+  ...COLOR_TOKEN_NAMES.map((name) => ({
+    id: `color.${name}`,
+    variable: `--${name}`,
+    type: "color",
+    paints: COLOR_PAINTS[name]
+  })),
+  {
+    id: "radius.base",
+    variable: "--radius",
+    type: "dimension",
+    paints: "The corner radius of a control; cards take one and a half of it."
+  },
+  {
+    id: "font.sans",
+    variable: "--font-sans",
+    type: "fontFamily",
+    paints: "The typeface of everything on the page."
+  },
+  {
+    id: "font.mono",
+    variable: "--font-mono",
+    type: "fontFamily",
+    paints: "Tags, numbers, the receipt."
+  }
+];
+var MIN_CONTRAST = 4.5;
+var MIN_CONTROL_CONTRAST = 3;
+var CONTRAST_PAIRS = [
+  { foreground: "foreground", background: "background", minimum: MIN_CONTRAST },
+  { foreground: "muted-foreground", background: "background", minimum: MIN_CONTRAST },
+  {
+    foreground: "muted-foreground",
+    background: "input",
+    over: "background",
+    minimum: MIN_CONTROL_CONTRAST
+  },
+  { foreground: "destructive", background: "background", minimum: MIN_CONTROL_CONTRAST },
+  {
+    foreground: "destructive",
+    background: "card",
+    over: "background",
+    minimum: MIN_CONTROL_CONTRAST
+  }
+];
+var byId = new Map(BRAND_CONTRACT.map((token) => [token.id, token]));
+function contractVariable(id) {
+  const token = byId.get(id);
+  if (!token) throw new Error(`The brand contract has no token ${id}.`);
+  return token.variable;
+}
+var component = z.number().min(0).max(1);
+var srgbColorSchema = z.strictObject({
+  colorSpace: z.literal("srgb"),
+  components: z.tuple([component, component, component]),
+  alpha: z.number().min(0).max(1),
+  hex: z.string().regex(/^#[0-9a-f]{6}$/i, "a hex colour is #rrggbb").optional()
+});
+var colorAliasSchema = z.string().regex(/^\{color\.[a-z][a-z-]*\}$/, 'an alias is "{color.<name>}"');
+var colorValueSchema = z.union([srgbColorSchema, colorAliasSchema]);
+var description = z.string().min(1, "every token carries a $description");
+function isControlCharacter(char) {
+  const code = char.codePointAt(0);
+  return code < 32 || code === 127;
+}
+var colorTokenSchema = z.strictObject({
+  $value: colorValueSchema,
+  $description: description,
+  $extensions: z.strictObject({
+    mode: z.strictObject({ dark: colorValueSchema })
+  }).optional()
+}).refine((token) => token.$extensions !== void 0 || typeof token.$value === "string", {
+  message: "a colour carries $extensions.mode.dark; only an alias may stand for both modes",
+  path: ["$extensions"]
+});
+var dimensionTokenSchema = z.strictObject({
+  $value: z.strictObject({ value: z.number().min(0), unit: z.enum(["rem", "px"]) }),
+  $description: description
+});
+var fontFamilyTokenSchema = z.strictObject({
+  $value: z.array(
+    z.string().min(1).refine((name) => ![...name].some(isControlCharacter), {
+      message: "a family name holds no control characters"
+    })
+  ).min(1),
+  $description: description
+});
+var brandTokensSchema = z.strictObject({
+  color: z.strictObject({
+    $type: z.literal("color"),
+    ...Object.fromEntries(COLOR_TOKEN_NAMES.map((name) => [name, colorTokenSchema]))
+  }),
+  radius: z.strictObject({ $type: z.literal("dimension"), base: dimensionTokenSchema }),
+  font: z.strictObject({
+    $type: z.literal("fontFamily"),
+    sans: fontFamilyTokenSchema,
+    mono: fontFamilyTokenSchema
+  })
+});
+function aliasTarget(value) {
+  return typeof value === "string" ? value.slice("{color.".length, -1) : null;
+}
+function darkValue(token) {
+  return token.$extensions?.mode.dark ?? token.$value;
+}
+function modeValue(token, mode) {
+  return mode === "light" ? token.$value : darkValue(token);
+}
+function colorHex(color) {
+  return `#${color.components.map(
+    (channel) => Math.round(channel * 255).toString(16).padStart(2, "0")
+  ).join("")}`;
+}
+function colorIsHex(color, hex) {
+  return colorHex(color) === hex.toLowerCase();
+}
+function asWritten(color) {
+  const alpha = Number(Math.min(color.alpha, 1).toFixed(3));
+  return {
+    colorSpace: "srgb",
+    components: color.components.map((channel) => Math.round(channel * 255) / 255),
+    alpha
+  };
+}
+function checkHexAgreement(name, mode, value, problems) {
+  if (typeof value === "string" || !value.hex) return;
+  if (!colorIsHex(value, value.hex)) {
+    problems.push(
+      `color.${name} (${mode}): hex ${value.hex} does not agree with components [${value.components.join(", ")}]`
+    );
+  }
+}
+function checkAliases(tokens, mode, problems) {
+  for (const name of COLOR_TOKEN_NAMES) {
+    const seen = /* @__PURE__ */ new Set([name]);
+    let current = name;
+    for (; ; ) {
+      const target = aliasTarget(modeValue(tokens.color[current], mode));
+      if (target === null) break;
+      if (!isColorTokenName(target)) {
+        problems.push(
+          `color.${name} (${mode}): aliases {color.${target}}, which the contract has no token for`
+        );
+        break;
+      }
+      if (seen.has(target)) {
+        problems.push(`color.${name} (${mode}): alias cycle through {color.${target}}`);
+        break;
+      }
+      seen.add(target);
+      current = target;
+    }
+  }
+}
+function resolveColor(tokens, name, mode) {
+  const seen = /* @__PURE__ */ new Set();
+  let current = name;
+  for (; ; ) {
+    if (seen.has(current)) return null;
+    seen.add(current);
+    const value = modeValue(tokens.color[current], mode);
+    const target = aliasTarget(value);
+    if (target === null) return value;
+    if (!isColorTokenName(target)) return null;
+    current = target;
+  }
+}
+function linearChannel(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function luminance(color) {
+  const [r, g, b] = color.components.map(linearChannel);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  const [light, dark] = la > lb ? [la, lb] : [lb, la];
+  return (light + 0.05) / (dark + 0.05);
+}
+function composite(color, over) {
+  const components = color.components.map(
+    (channel, index) => channel * color.alpha + over.components[index] * (1 - color.alpha)
+  );
+  return { colorSpace: "srgb", components, alpha: 1 };
+}
+function checkContrast(tokens, mode, problems) {
+  for (const pair of CONTRAST_PAIRS) {
+    const canvasName = pair.over ?? pair.background;
+    const foreground = resolveColor(tokens, pair.foreground, mode);
+    const background = resolveColor(tokens, pair.background, mode);
+    const canvasColor = resolveColor(tokens, canvasName, mode);
+    if (!foreground || !background || !canvasColor) continue;
+    if (canvasColor.alpha < 1) {
+      const problem = `color.${canvasName} (${mode}): alpha ${canvasColor.alpha}, but text is measured against it, so it must be opaque (alpha 1)`;
+      if (!problems.includes(problem)) problems.push(problem);
+      continue;
+    }
+    const canvas = asWritten(canvasColor);
+    const surface = pair.over ? composite(asWritten(background), canvas) : canvas;
+    const ratio = contrastRatio(composite(asWritten(foreground), surface), surface);
+    if (ratio < pair.minimum) {
+      const on = pair.over ? `color.${pair.background} over color.${pair.over}` : `color.${pair.background}`;
+      const level = pair.minimum >= MIN_CONTRAST ? "WCAG AA" : "WCAG AA for a control";
+      problems.push(
+        `color.${pair.foreground} on ${on} (${mode}): contrast ${ratio.toFixed(2)}, expected ${pair.minimum} (${level})`
+      );
+    }
+  }
+}
+function validateBrandTokens(doc) {
+  const parsed = brandTokensSchema.safeParse(doc);
+  if (!parsed.success) {
+    return {
+      ok: false,
+      problems: parsed.error.issues.map((issue) => {
+        const where = issue.path.map(String).join(".") || "(root)";
+        return `${where}: ${issue.message}`;
+      })
+    };
+  }
+  const tokens = parsed.data;
+  const problems = [];
+  for (const name of COLOR_TOKEN_NAMES) {
+    const token = tokens.color[name];
+    checkHexAgreement(name, "light", token.$value, problems);
+    checkHexAgreement(name, "dark", darkValue(token), problems);
+  }
+  checkAliases(tokens, "light", problems);
+  checkAliases(tokens, "dark", problems);
+  if (problems.length === 0) {
+    checkContrast(tokens, "light", problems);
+    checkContrast(tokens, "dark", problems);
+  }
+  return problems.length === 0 ? { ok: true, tokens } : { ok: false, problems };
+}
+
+// src/brand/seed-roles.ts
+var ACCENT_FILL_STRENGTH = 0.12;
+var SEARCH_STEPS = 32;
+function deriveBrandRoles(seeds, page, surfaces = []) {
+  const canvas = parseHex(page, "The page colour");
+  const extreme = textOn(canvas) === "#000000" ? BLACK : WHITE;
+  const others = surfaces.map((surface, index) => parseHex(surface, `Surface ${index + 1}`));
+  const action = seeds?.action == null ? null : parseHex(seeds.action, "The action seed");
+  const accent = seeds?.accent == null ? action : parseHex(seeds.accent, "The accent seed");
+  const header = seeds?.header == null ? null : parseHex(seeds.header, "The header seed");
+  const actionRoles = action === null ? {} : { action: colorHex(action), onAction: textOn(action) };
+  const accentRoles = accent === null ? {} : accentRolesOf(accent, canvas, extreme, others);
+  const headerRoles = header === null ? {} : { header: colorHex(header), onHeader: textOn(header) };
+  return { ...actionRoles, ...accentRoles, ...headerRoles };
+}
+function accentRolesOf(accent, canvas, extreme, surfaces) {
+  const accentFill = paleFill(accent, canvas, extreme);
+  const backgrounds = [canvas, accentFill, ...surfaces];
+  const accentInk = inkFor(accent, backgrounds, extreme);
+  if (accentInk === void 0) {
+    throw new Error(
+      `No accent ink can read on every surface at once: no shade of ${colorHex(accent)} reaches ${MIN_CONTRAST}:1 on the page ${colorHex(canvas)}, the pale fill ${colorHex(accentFill)} and ${surfaces.map(colorHex).join(", ")}.`
+    );
+  }
+  return {
+    accent: colorHex(accent),
+    accentFill: colorHex(accentFill),
+    accentInk: colorHex(accentInk)
+  };
+}
+function isActionFaint(seeds, page) {
+  const canvas = parseHex(page, "The page colour");
+  if (seeds?.action == null) return false;
+  return contrastRatio(parseHex(seeds.action, "The action seed"), canvas) < MIN_CONTROL_CONTRAST;
+}
+function isAccentAdjusted(seeds, page, surfaces = []) {
+  const roles = deriveBrandRoles(seeds, page, surfaces);
+  return roles.accentInk !== void 0 && roles.accentInk !== roles.accent;
+}
+function resolveDarkSeeds(colors, darkColors) {
+  return {
+    action: darkColors?.action ?? colors?.action ?? null,
+    accent: darkColors?.accent ?? colors?.accent ?? null,
+    header: darkColors?.header ?? colors?.header ?? null
+  };
+}
+function readableTextOn(fill) {
+  return textOn(parseHex(fill, "The fill"));
+}
+var BLACK = { components: [0, 0, 0]};
+var WHITE = { components: [1, 1, 1]};
+function textOn(fill) {
+  return contrastRatio(BLACK, fill) >= contrastRatio(WHITE, fill) ? "#000000" : "#ffffff";
+}
+function parseHex(value, what) {
+  if (typeof value !== "string" || !/^#[0-9a-f]{6}$/i.test(value)) {
+    throw new Error(`${what} must be a #rrggbb colour, not ${JSON.stringify(value)}.`);
+  }
+  const channel = (at) => parseInt(value.slice(at, at + 2), 16) / 255;
+  return { colorSpace: "srgb", components: [channel(1), channel(3), channel(5)], alpha: 1 };
+}
+function snapped(components) {
+  const [r, g, b] = components.map(
+    (channel) => Math.round(Math.min(1, Math.max(0, channel)) * 255) / 255
+  );
+  return { colorSpace: "srgb", components: [r, g, b], alpha: 1 };
+}
+function paleFill(accent, page, extreme) {
+  const at = (strength) => snapped(
+    page.components.map(
+      (channel, index) => channel + (accent.components[index] - channel) * strength
+    )
+  );
+  const nominal = at(ACCENT_FILL_STRENGTH);
+  if (contrastRatio(extreme, nominal) >= MIN_CONTRAST) return nominal;
+  let enough = 0;
+  let short = ACCENT_FILL_STRENGTH;
+  for (let step = 0; step < SEARCH_STEPS; step++) {
+    const middle = (enough + short) / 2;
+    if (contrastRatio(extreme, at(middle)) >= MIN_CONTRAST) enough = middle;
+    else short = middle;
+  }
+  return at(enough);
+}
+function shadeLightnesses(hue, saturation) {
+  const bounds = /* @__PURE__ */ new Set([0, 0.5, 1]);
+  for (const [low, high] of [
+    [0, 0.5],
+    [0.5, 1]
+  ]) {
+    const from = fromHsl(hue, saturation, low);
+    const to = fromHsl(hue, saturation, high);
+    for (let channel = 0; channel < 3; channel++) {
+      const start = from[channel] * 255;
+      const rise = to[channel] * 255 - start;
+      if (rise === 0) continue;
+      for (let byte = 0; byte < 255; byte++) {
+        const at = low + (byte + 0.5 - start) / rise * (high - low);
+        if (at > low && at < high) bounds.add(at);
+      }
+    }
+  }
+  const sorted = [...bounds].sort((a, b) => a - b);
+  return sorted.slice(1).map((bound, index) => (sorted[index] + bound) / 2);
+}
+function inkFor(accent, backgrounds, extreme) {
+  const reads = (color) => backgrounds.every((background) => contrastRatio(color, background) >= MIN_CONTRAST);
+  if (reads(accent)) return accent;
+  const [hue, saturation, lightness] = toHsl(accent.components);
+  const at = (value) => snapped(fromHsl(hue, saturation, value));
+  const narrowed = (short, enough) => {
+    for (let step = 0; step < SEARCH_STEPS; step++) {
+      const middle = (short + enough) / 2;
+      if (reads(at(middle))) enough = middle;
+      else short = middle;
+    }
+    return at(enough);
+  };
+  const toward = extreme === BLACK ? 0 : 1;
+  if (reads(extreme)) return narrowed(lightness, toward);
+  const shades = shadeLightnesses(hue, saturation);
+  const darker = shades.filter((value) => value < lightness).reverse();
+  const lighter = shades.filter((value) => value > lightness);
+  for (const side of toward === 0 ? [darker, lighter] : [lighter, darker]) {
+    for (const value of side) {
+      const shade = at(value);
+      if (reads(shade)) return shade;
+    }
+  }
+  return void 0;
+}
+function toHsl(components) {
+  const [r, g, b] = components;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const lightness = (max + min) / 2;
+  const chroma = max - min;
+  if (chroma === 0) return [0, 0, lightness];
+  const saturation = chroma / (1 - Math.abs(2 * lightness - 1));
+  const sector = max === r ? ((g - b) / chroma + 6) % 6 : max === g ? (b - r) / chroma + 2 : (r - g) / chroma + 4;
+  return [sector * 60, Math.min(1, saturation), lightness];
+}
+function fromHsl(hue, saturation, lightness) {
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const sector = hue / 60;
+  const second = chroma * (1 - Math.abs(sector % 2 - 1));
+  const [r, g, b] = sector < 1 ? [chroma, second, 0] : sector < 2 ? [second, chroma, 0] : sector < 3 ? [0, chroma, second] : sector < 4 ? [0, second, chroma] : sector < 5 ? [second, 0, chroma] : [chroma, 0, second];
+  const offset = lightness - chroma / 2;
+  return [r + offset, g + offset, b + offset];
+}
+
+// src/brand/styles.ts
+var SANS_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+var SERIF_FALLBACK = 'ui-serif, Georgia, Cambria, "Times New Roman", serif';
+var WEIGHTS = [300, 400, 500, 600, 700];
+function face(id, family, category, use) {
+  const fallback = category === "serif" ? SERIF_FALLBACK : SANS_FALLBACK;
+  return {
+    id,
+    family,
+    category,
+    weights: WEIGHTS,
+    fallback,
+    stack: `"${family}", ${fallback}`,
+    use
+  };
+}
+var TYPEFACES = deepFreeze([
+  face("inter", "Inter", "sans-serif", "body"),
+  face("dm-sans", "DM Sans", "sans-serif", "body"),
+  face("plus-jakarta-sans", "Plus Jakarta Sans", "sans-serif", "body"),
+  face("manrope", "Manrope", "sans-serif", "body"),
+  face("ibm-plex-sans", "IBM Plex Sans", "sans-serif", "body"),
+  face("source-sans-3", "Source Sans 3", "sans-serif", "body"),
+  face("work-sans", "Work Sans", "sans-serif", "body"),
+  face("space-grotesk", "Space Grotesk", "sans-serif", "body"),
+  face("newsreader", "Newsreader", "serif", "heading")
+]);
+var FACES = new Map(TYPEFACES.map((candidate) => [candidate.id, candidate]));
+function isTypeface(value) {
+  return typeof value === "string" && FACES.get(value)?.use === "body";
+}
+function faceOf(id) {
+  return FACES.get(id);
+}
+var role = (name, more = {}) => ({
+  role: name,
+  ...more
+});
+var DEFINITIONS = {
+  // The host's own look, named: it sets nothing, and a team's typeface is its
+  // body and its headings.
+  quiet: {
+    name: "Quiet",
+    direction: "The host\u2019s own look, unstyled: its light titles and hairline panels, generous air, nothing decorated.",
+    bodyFace: null,
+    headingFace: "body",
+    roles: {}
+  },
+  soft: {
+    name: "Soft",
+    direction: "Friendly and rounded: generous corners, panels that float on a soft shadow with no outline, warm medium-weight titles.",
+    bodyFace: "dm-sans",
+    headingFace: "body",
+    roles: {
+      headingWeight: 500,
+      headingTracking: "-0.015em",
+      radius: 12,
+      panel: {
+        light: {
+          fill: role("card"),
+          edge: null,
+          edgeWidth: 1,
+          shadow: "0 1px 2px rgb(16 24 40 / 0.05), 0 12px 32px -10px rgb(16 24 40 / 0.16)",
+          field: role("card")
+        },
+        // On a dark page a shadow barely shows, so the panel is lifted by its
+        // fill instead, the card a little toward the foreground, with a faint
+        // highlight along its top edge where light would catch it, and its
+        // fields sink back to the page's own background.
+        dark: {
+          fill: role("card", { toward: { role: "foreground", share: 0.07 } }),
+          edge: null,
+          edgeWidth: 1,
+          shadow: "inset 0 1px 0 rgb(255 255 255 / 0.07), 0 2px 4px rgb(0 0 0 / 0.55), 0 24px 56px -12px rgb(0 0 0 / 0.95)",
+          field: role("background")
+        }
+      },
+      // A short shadow in the button colour on a light page, kept within the
+      // gap a host leaves under its button. On a dark page the panel is lifted
+      // by its fill, and a glow in a light button colour reads as a smear.
+      actionShadow: {
+        light: { x: 0, y: 6, blur: 14, spread: -6, color: role("primary", { alpha: 0.5 }) },
+        dark: "none"
+      },
+      density: 1.08
+    }
+  },
+  editorial: {
+    name: "Editorial",
+    direction: "Considered and literary: serif display titles, fine hairlines, wide margins and a reading rhythm.",
+    bodyFace: "source-sans-3",
+    headingFace: "newsreader",
+    roles: {
+      headingWeight: 500,
+      headingTracking: "-0.01em",
+      radius: 2,
+      // Hairlines all the way in: the fields inside the panel take its own
+      // fill, so each reads as its fine edge rather than as a grey block.
+      panel: {
+        light: {
+          fill: role("card"),
+          edge: role("border"),
+          edgeWidth: 1,
+          shadow: null,
+          field: role("card")
+        },
+        dark: {
+          fill: role("card"),
+          edge: role("border"),
+          edgeWidth: 1,
+          shadow: null,
+          field: role("card")
+        }
+      },
+      actionShadow: { light: "none", dark: "none" },
+      density: 1.25
+    }
+  },
+  bold: {
+    name: "Bold",
+    direction: "Confident and graphic: heavy, tightly set titles, solid panels with firm edges, a compact rhythm.",
+    bodyFace: "space-grotesk",
+    headingFace: "body",
+    roles: {
+      headingWeight: 700,
+      headingTracking: "-0.03em",
+      radius: 6,
+      // One firm edge around a solid panel, softer on a dark page. The panel
+      // is the muted fill, which the host's fields all but match, so fields
+      // set into it take the card on a light page and the page's background
+      // on a dark one.
+      panel: {
+        light: {
+          fill: role("muted"),
+          edge: role("foreground", { alpha: 0.62 }),
+          edgeWidth: 2,
+          shadow: null,
+          field: role("card")
+        },
+        dark: {
+          fill: role("muted"),
+          edge: role("foreground", { alpha: 0.3 }),
+          edgeWidth: 2,
+          shadow: null,
+          field: role("background")
+        }
+      },
+      actionShadow: { light: "none", dark: "none" },
+      density: 0.85
+    }
+  }
+};
+var APP_STYLE_IDS = Object.freeze([
+  "quiet",
+  "soft",
+  "editorial",
+  "bold"
+]);
+function isAppStyle(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(DEFINITIONS, value);
+}
+function deriveStyleRoles(style, typeface) {
+  const definition = DEFINITIONS[isAppStyle(style) ? style : "quiet"];
+  const roles = {};
+  const body = isTypeface(typeface) ? faceOf(typeface) : definition.bodyFace === null ? void 0 : faceOf(definition.bodyFace);
+  if (body) roles.bodyFace = body;
+  const heading = definition.headingFace === "body" ? body : faceOf(definition.headingFace);
+  if (heading) roles.headingFace = heading;
+  return copyData({ ...roles, ...definition.roles });
+}
+var APP_STYLES = deepFreeze(
+  Object.fromEntries(
+    APP_STYLE_IDS.map((id) => [
+      id,
+      {
+        id,
+        name: DEFINITIONS[id].name,
+        direction: DEFINITIONS[id].direction,
+        roles: deriveStyleRoles(id)
+      }
+    ])
+  )
+);
+function copyData(value) {
+  if (Array.isArray(value)) return value.map(copyData);
+  if (value !== null && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, inner]) => [key, copyData(inner)])
+    );
+  }
+  return value;
+}
+function deepFreeze(value) {
+  if (value !== null && typeof value === "object" && !Object.isFrozen(value)) {
+    for (const inner of Object.values(value)) deepFreeze(inner);
+    Object.freeze(value);
+  }
+  return value;
+}
+function resolveRoleColor(color, palette, behind) {
+  const of = (name) => {
+    const value = palette[name];
+    if (!isColorTokenName(name) || value === void 0) {
+      throw new Error(`The palette has no ${name} to resolve a style's colour against.`);
+    }
+    return parseHex(value, `The palette's ${name}`);
+  };
+  let rgb = of(color.role).components;
+  if (color.toward) {
+    const share = clampUnit(color.toward.share);
+    rgb = mixOklab(rgb, of(color.toward.role).components, share);
+  }
+  if (color.alpha !== void 0 && color.alpha < 1) {
+    if (behind === void 0) {
+      throw new Error(`A translucent ${color.role} has no one colour: say what it lies over.`);
+    }
+    const under = parseHex(behind, "The colour behind").components;
+    const alpha = clampUnit(color.alpha);
+    rgb = rgb.map((channel, index) => under[index] + (channel - under[index]) * alpha);
+  }
+  return colorHex({ components: rgb});
+}
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function mixOklab(a, b, share) {
+  const [l1, a1, b1] = toOklab(a);
+  const [l2, a2, b2] = toOklab(b);
+  const at = (from, to) => from + (to - from) * share;
+  return fromOklab([at(l1, l2), at(a1, a2), at(b1, b2)]).map(clampUnit);
+}
+var fromLinear = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function toOklab(rgb) {
+  const [r, g, b] = rgb.map(linearChannel);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function fromOklab([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ].map((channel) => fromLinear(clampUnit(channel)));
+}
+
+export { APP_STYLES, APP_STYLE_IDS, BRAND_CONTRACT, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, MIN_CONTRAST, MIN_CONTROL_CONTRAST, TYPEFACES, aliasTarget, asWritten, colorHex, colorIsHex, contractVariable, contrastRatio, deriveBrandRoles, deriveStyleRoles, isAccentAdjusted, isActionFaint, isAppStyle, isColorTokenName, isControlCharacter, isTypeface, modeValue, readableTextOn, resolveColor, resolveDarkSeeds, resolveRoleColor, srgbColorSchema, validateBrandTokens };
+//# sourceMappingURL=chunk-3GO65HWP.js.map
+//# sourceMappingURL=chunk-3GO65HWP.js.map