@pixerate/editor 0.256.0 → 0.258.0

package/dist/chunk-VR6OGHU5.js

@@ -0,0 +1,276 @@
+import {
+  formatHex,
+  normalizeColor,
+  toSrgbGamut
+} from "./chunk-JC2SHA4A.js";
+import {
+  contrastLevel,
+  contrastRatio,
+  oklabToOklch,
+  oklabToRgb,
+  oklchToOklab,
+  parseColor,
+  rgbToOklab
+} from "./chunk-MHLU6GRJ.js";
+
+// src/color/dual.ts
+var DEFAULT_SCHEME_SURFACES = {
+  light: "#ffffff",
+  dark: "#0b0b0f"
+};
+var clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+function isDualColor(value) {
+  return typeof value === "object" && value !== null && typeof value.light === "string" && typeof value.dark === "string";
+}
+function parseDualColor(input) {
+  if (input === null || input === void 0) return null;
+  if (isDualColor(input)) {
+    if (parseColor(input.light) === null || parseColor(input.dark) === null) {
+      return null;
+    }
+    return { light: input.light, dark: input.dark };
+  }
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    if (trimmed.toLowerCase().startsWith("light-dark(") && trimmed.endsWith(")")) {
+      const inner = trimmed.slice("light-dark(".length, -1).trim();
+      if (inner.toLowerCase().includes("light-dark(")) {
+        return null;
+      }
+      let depth = 0;
+      let commaIndex = -1;
+      for (let i = 0; i < inner.length; i++) {
+        const char = inner[i];
+        if (char === "(") {
+          depth++;
+        } else if (char === ")") {
+          depth--;
+          if (depth < 0) return null;
+        } else if (char === "," && depth === 0) {
+          if (commaIndex !== -1) {
+            return null;
+          }
+          commaIndex = i;
+        }
+      }
+      if (depth !== 0 || commaIndex === -1) {
+        return null;
+      }
+      const lightPart = inner.slice(0, commaIndex).trim();
+      const darkPart = inner.slice(commaIndex + 1).trim();
+      if (!lightPart || !darkPart) return null;
+      if (parseColor(lightPart) === null || parseColor(darkPart) === null) {
+        return null;
+      }
+      return { light: lightPart, dark: darkPart };
+    }
+    if (parseColor(trimmed) !== null) {
+      return { light: trimmed, dark: trimmed };
+    }
+  }
+  return null;
+}
+function normalizeDualColor(input) {
+  const parsed = parseDualColor(input);
+  if (!parsed) return null;
+  const light = normalizeColor(parsed.light);
+  const dark = normalizeColor(parsed.dark);
+  if (!light || !dark) return null;
+  return { light, dark };
+}
+function resolveColor(value, scheme) {
+  const normalized = normalizeDualColor(value);
+  if (!normalized) return null;
+  return scheme === "dark" ? normalized.dark : normalized.light;
+}
+function formatDualColor(value) {
+  const light = normalizeColor(value.light) ?? value.light;
+  const dark = normalizeColor(value.dark) ?? value.dark;
+  if (light === dark) {
+    return light;
+  }
+  return `light-dark(${light}, ${dark})`;
+}
+function isSameInBothSchemes(value) {
+  const light = normalizeColor(value.light);
+  const dark = normalizeColor(value.dark);
+  if (!light || !dark) return value.light === value.dark;
+  return light === dark;
+}
+function setDualColorSide(value, scheme, color) {
+  const base = normalizeDualColor(value) ?? { light: "#000000", dark: "#000000" };
+  const normColor = normalizeColor(color) ?? color;
+  return {
+    light: scheme === "light" ? normColor : base.light,
+    dark: scheme === "dark" ? normColor : base.dark
+  };
+}
+function deriveDualColor(color, options) {
+  const fromScheme = options?.from ?? "light";
+  const baseRgba = parseColor(color);
+  if (!baseRgba) {
+    throw new Error(`"${String(color)}" is not a colour; pass hex, rgb(), hsl(), oklch() or a CSS colour name.`);
+  }
+  if (options?.surfaces && !normalizeDualColor(options.surfaces)) {
+    throw new Error('The surfaces need a readable light and dark colour, e.g. { light: "#ffffff", dark: "#0b0b0f" }.');
+  }
+  const baseHex = formatHex(baseRgba);
+  const lab = rgbToOklab(baseRgba);
+  const lch = oklabToOklch(lab);
+  const startL = clamp(1.05 - lch.l, 0.12, 0.95);
+  const targetC = lch.c * 0.9;
+  const targetH = lch.h;
+  let derivedHex;
+  if (options?.surfaces) {
+    const surfaces = options.surfaces;
+    const fromSurfaceRgba = parseColor(surfaces[fromScheme]);
+    const targetScheme = fromScheme === "light" ? "dark" : "light";
+    const targetSurfaceRgba = parseColor(surfaces[targetScheme]);
+    const targetRatio = contrastRatio(baseRgba, fromSurfaceRgba);
+    const targetSurfaceL = oklabToOklch(rgbToOklab(targetSurfaceRgba)).l;
+    const preferHigherL = targetSurfaceL < 0.5;
+    let bestDiff = Infinity;
+    let bestL = startL;
+    for (let candL = 0.05; candL <= 0.98; candL += 5e-3) {
+      const candRgb = toSrgbGamut(
+        oklabToRgb(oklchToOklab({ l: candL, c: targetC, h: targetH, alpha: baseRgba.a }))
+      );
+      const ratio = contrastRatio(candRgb, targetSurfaceRgba);
+      const diff = Math.abs(ratio - targetRatio);
+      const isBetter = diff < bestDiff - 1e-4 || Math.abs(diff - bestDiff) <= 1e-4 && (preferHigherL ? candL > bestL : candL < bestL);
+      if (isBetter) {
+        bestDiff = diff;
+        bestL = candL;
+      }
+    }
+    const finalRgba = toSrgbGamut(
+      oklabToRgb(oklchToOklab({ l: bestL, c: targetC, h: targetH, alpha: baseRgba.a }))
+    );
+    derivedHex = formatHex(finalRgba);
+  } else {
+    const finalRgba = toSrgbGamut(
+      oklabToRgb(oklchToOklab({ l: startL, c: targetC, h: targetH, alpha: baseRgba.a }))
+    );
+    derivedHex = formatHex(finalRgba);
+  }
+  return fromScheme === "light" ? { light: baseHex, dark: derivedHex } : { light: derivedHex, dark: baseHex };
+}
+function checkDualColorContrast(foreground, background, options) {
+  const large = options?.large ?? false;
+  const requiredRatio = large ? 3 : 4.5;
+  const fg = normalizeDualColor(foreground);
+  const bg = normalizeDualColor(background);
+  if (!fg) throw new Error(`The foreground "${describeValue(foreground)}" is not a colour, light-dark() or { light, dark }.`);
+  if (!bg) throw new Error(`The background "${describeValue(background)}" is not a colour, light-dark() or { light, dark }.`);
+  const lightFgHex = fg.light;
+  const lightBgHex = bg.light;
+  const darkFgHex = fg.dark;
+  const darkBgHex = bg.dark;
+  const lightFg = parseColor(lightFgHex);
+  const lightBg = parseColor(lightBgHex);
+  const darkFg = parseColor(darkFgHex);
+  const darkBg = parseColor(darkBgHex);
+  const lightRatio = Math.round(contrastRatio(lightFg, lightBg) * 100) / 100;
+  const darkRatio = Math.round(contrastRatio(darkFg, darkBg) * 100) / 100;
+  const lightLevel = contrastLevel(lightRatio, { large });
+  const darkLevel = contrastLevel(darkRatio, { large });
+  const issues = [];
+  if (lightLevel === "fail") {
+    issues.push(
+      `In light mode, ${lightFgHex} on ${lightBgHex} has a contrast of ${lightRatio.toFixed(1)} (needs ${requiredRatio} for AA).`
+    );
+  }
+  if (darkLevel === "fail") {
+    issues.push(
+      `In dark mode, ${darkFgHex} on ${darkBgHex} has a contrast of ${darkRatio.toFixed(1)} (needs ${requiredRatio} for AA).`
+    );
+  }
+  return {
+    light: { ratio: lightRatio, level: lightLevel },
+    dark: { ratio: darkRatio, level: darkLevel },
+    issues
+  };
+}
+var CSS_VARIABLE_NAME = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+function describeValue(value) {
+  return typeof value === "string" ? value : JSON.stringify(value) ?? String(value);
+}
+function dualColorsToCss(colors, options) {
+  const selector = options?.selector ?? ":root";
+  const strategy = options?.strategy ?? "light-dark";
+  const darkSelector = options?.darkSelector ?? ".dark";
+  for (const [label, sel] of [["selector", selector], ["darkSelector", darkSelector]]) {
+    if (!sel.trim() || /[{};]/.test(sel)) {
+      throw new Error(`The ${label} "${sel}" is not a CSS selector (it can't be empty or contain "{", "}" or ";").`);
+    }
+  }
+  const normalized = {};
+  for (const [key, value] of Object.entries(colors)) {
+    if (!CSS_VARIABLE_NAME.test(key)) {
+      throw new Error(`"${key}" is not a CSS variable name; use letters, digits, "-" and "_" without the leading "--" (e.g. "brand-color").`);
+    }
+    const dual = normalizeDualColor(value);
+    if (!dual) throw new Error(`"${key}" has "${describeValue(value)}", which is not a colour, light-dark() or { light, dark }.`);
+    normalized[key] = dual;
+  }
+  const sortedKeys = Object.keys(normalized).sort();
+  switch (strategy) {
+    case "light-dark": {
+      const lines = [
+        `${selector} {`,
+        ...selector === ":root" ? ["  color-scheme: light dark;"] : [],
+        ...sortedKeys.map((k) => {
+          return `  --${k}: ${formatDualColor(normalized[k])};`;
+        }),
+        "}"
+      ];
+      return lines.join("\n");
+    }
+    case "media": {
+      const lightLines = [
+        `${selector} {`,
+        ...sortedKeys.map((k) => `  --${k}: ${normalized[k].light};`),
+        "}"
+      ];
+      const darkLines = [
+        `@media (prefers-color-scheme: dark) {`,
+        `  ${selector} {`,
+        ...sortedKeys.map((k) => `    --${k}: ${normalized[k].dark};`),
+        `  }`,
+        `}`
+      ];
+      return `${lightLines.join("\n")}
+
+${darkLines.join("\n")}`;
+    }
+    case "class": {
+      const lightLines = [
+        `${selector} {`,
+        ...sortedKeys.map((k) => `  --${k}: ${normalized[k].light};`),
+        "}"
+      ];
+      const darkLines = [
+        `${darkSelector} {`,
+        ...sortedKeys.map((k) => `  --${k}: ${normalized[k].dark};`),
+        "}"
+      ];
+      return `${lightLines.join("\n")}
+
+${darkLines.join("\n")}`;
+    }
+  }
+}
+
+export {
+  DEFAULT_SCHEME_SURFACES,
+  isDualColor,
+  parseDualColor,
+  normalizeDualColor,
+  resolveColor,
+  formatDualColor,
+  isSameInBothSchemes,
+  setDualColorSide,
+  deriveDualColor,
+  checkDualColorContrast,
+  dualColorsToCss
+};

package/dist/{chunk-AF23QK5F.js → chunk-YQ4PQTBB.js}

@@ -7,7 +7,7 @@ import {
   listPresets,
   normalizeBrushSpec,
   resolveBrush
-} from "./chunk-JVRLGV3C.js";
+} from "./chunk-SMTUQWGY.js";
 import {
   parseProvenance
 } from "./chunk-M6DNZNVY.js";