@nextlyhq/ui 0.0.2-alpha.6 → 0.0.2-alpha.62

package/dist/color.d.cts

@@ -0,0 +1,251 @@
+/**
+ * Conversions between the colour models an editing surface needs.
+ *
+ * ## Why each model is here
+ *
+ * - **sRGB** is what a screen displays and what `#rrggbb` encodes. Everything ends here.
+ * - **HSV** is what a colour picker is: a square of saturation against value, beside a hue
+ *   strip. No other model puts those three controls in the shape people expect.
+ * - **OKLCH** is what this product's own theme is written in — every token in `theme.css` is an
+ *   `oklch()` value. A picker that cannot read it cannot edit the theme.
+ *
+ * ## Why the maths is here rather than in a library
+ *
+ * These are fixed, published transforms: the sRGB transfer function and the OKLab matrices are
+ * specified in CSS Color 4 and do not change. The package ships no runtime colour dependency, and
+ * this module keeps it that way. `culori` remains a DEV dependency used as a test oracle — the
+ * conversions here are cross-checked against it rather than trusted on their own.
+ *
+ * ## The part that is genuinely hard
+ *
+ * OKLCH describes more colours than a screen can show. Converting one that falls outside sRGB has
+ * no correct answer, only choices, and the naive choice — clamp each channel independently — is
+ * the wrong one: it shifts hue, because clipping red without clipping green changes the ratio
+ * between them. {@link oklchToRgb} reduces chroma instead, holding lightness and hue, which is the
+ * approach CSS Color 4 describes for gamut mapping.
+ *
+ * @module lib/color/convert
+ */
+/**
+ * An sRGB colour with channels in [0, 1]. Alpha is carried separately.
+ *
+ * @experimental
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Hue in [0, 360), saturation and value in [0, 1].
+ *
+ * @experimental
+ */
+interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/**
+ * Perceptual lightness in [0, 1], chroma from 0, hue in [0, 360).
+ *
+ * @experimental
+ */
+interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+/**
+ * Wrap a hue into [0, 360), so -30 and 330 are the same angle.
+ *
+ * @experimental
+ */
+declare function normalizeHue(hue: number): number;
+/**
+ * HSV to sRGB.
+ * Saturation and value are clamped rather than rejected: a picker drags them, and a drag that
+ * overshoots by a rounding error should saturate rather than throw.
+ *
+ * @experimental
+ */
+declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+/**
+ * sRGB to HSV.
+ * Hue is UNDEFINED for a grey and value is undefined for black, and this returns 0 for both. A
+ * picker must not take that 0 as the user's hue: it is the absence of one. Holding hue across a
+ * drag to zero saturation is the caller's job, which is why a picker keeps HSV as its state
+ * rather than deriving it from the colour each render.
+ *
+ * @experimental
+ */
+declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+/**
+ * sRGB to OKLCH.
+ *
+ * @experimental
+ */
+declare function rgbToOklch({ r, g, b }: Rgb): Oklch;
+/**
+ * OKLCH to sRGB, reducing chroma until the colour fits on screen.
+ * OKLCH can name colours a display cannot show. Clamping the channels independently is the
+ * obvious response and the wrong one: clipping red without clipping green changes the ratio
+ * between them, so the colour that appears is a DIFFERENT HUE from the one asked for. Lightness
+ * and hue are what a person chose; chroma is the part they will not miss, so chroma is what is
+ * given up.
+ * The search is a bisection on chroma, which converges to well under a perceptible step in the
+ * fixed number of rounds below — no loop that might not terminate.
+ *
+ * **The gamut is not always monotonic along this ray, and that is a deliberate trade.** At some
+ * lightness and hue pairs the boundary is crossed more than once: at `l = 0.2, h = 264.1` the ray
+ * is inside up to c ≈ 0.1192, outside until c ≈ 0.1368, briefly inside again to c ≈ 0.1386. A
+ * bisection therefore finds the FIRST boundary rather than the outermost reachable chroma.
+ *
+ * That is the intended behaviour rather than a limitation. Those islands span roughly a tenth of
+ * a degree of hue, so preferring the outermost value would make chroma jump by about 0.021
+ * between h = 264.05 and h = 264.10 — a visible step while dragging a hue slider, over a change
+ * no one can aim at. Taking the first boundary gives 0.1160, 0.1175, 0.1192, 0.1255, 0.1383
+ * across the same sweep: continuous, and one step less saturated at worst. It is also what the
+ * CSS Color 4 gamut-mapping algorithm does.
+ *
+ * @experimental
+ */
+declare function oklchToRgb({ l, c, h }: Oklch): Rgb;
+
+/**
+ * Hex is the notation people type, so it is the picker's front door.
+ *
+ * It lives beside the conversions rather than in the component that reads it, for the same reason
+ * they do: parsing `#3b82f6` is arithmetic on a string, a server rendering a token swatch needs it
+ * as much as an editing surface does, and pulling it into client code would put it behind the
+ * `"use client"` boundary for no benefit.
+ *
+ * @module lib/color/hex
+ */
+
+/**
+ * An sRGB colour with its alpha, which is what a hex string can carry and {@link Rgb} cannot.
+ *
+ * `alpha` is in [0, 1] like the channels, rather than 0-255, so it composes with the conversions
+ * without a second unit in play.
+ *
+ * @experimental
+ */
+interface Rgba extends Rgb {
+    alpha: number;
+}
+/**
+ * Read a hex colour, or `null` if the input is not one.
+ *
+ * Returns `null` rather than throwing or substituting black: this reads what someone is part-way
+ * through typing, where "not a colour yet" is the ordinary case and neither an exception nor a
+ * silent black is a useful answer. A caller decides whether to hold the last good value, show a
+ * message, or wait.
+ *
+ * Both short forms are accepted because both are what people paste. `#abc` expands by REPEATING
+ * each digit rather than padding with zero — `#abc` is `#aabbcc`, not `#a0b0c0` — which is what CSS
+ * does and the only expansion under which `#fff` is white.
+ *
+ * @experimental
+ */
+declare function parseHex(input: string): Rgba | null;
+/**
+ * Write a colour as `#rrggbb`, or `#rrggbbaa` when it is not fully opaque.
+ *
+ * The alpha pair is omitted at 1 rather than always written, because `#3b82f6ff` is the same colour
+ * and the shorter form is what someone expects to see in a field they typed `#3b82f6` into.
+ *
+ * Channels outside [0, 1] are clamped, so the result is always a valid six- or eight-digit hex
+ * string whatever a caller passes. Not for floating-point drift, which rounds to the right byte on
+ * its own: it is for a value that is wrong by a lot — a channel still in 0-255, or a computation
+ * that overshot — where the alternative is emitting `#17f00-80`, a string nothing downstream can
+ * parse and no error explains.
+ *
+ * @experimental
+ */
+declare function toHex(color: Rgb, alpha?: number): string;
+
+/**
+ * The mapping between a pointer on a picker surface and a colour.
+ *
+ * Kept apart from the component for two reasons. It is arithmetic on numbers,
+ * so it belongs on the server-safe side with the rest of `@nextlyhq/ui/color`;
+ * and a saturation square is the one part of a picker that cannot be checked by
+ * rendering it — jsdom reports every element as zero-sized, so a component test
+ * measures nothing and passes. Measured here instead, against known corners.
+ *
+ * @module lib/color/picker-geometry
+ */
+/** A position on a surface, each axis in [0, 1] from the top-left. */
+interface SurfacePoint {
+    x: number;
+    y: number;
+}
+/**
+ * A pointer position as a fraction of a surface.
+ *
+ * Clamped, because a drag that begins inside the surface continues to report
+ * while the pointer leaves it — which is the interaction people actually use to
+ * reach full saturation, and without clamping it produces values outside the
+ * colour space rather than the corner they are aiming at.
+ *
+ * A zero-sized surface answers the top-left rather than dividing by zero. That
+ * happens in a test environment and on the first frame before layout.
+ *
+ * @experimental
+ */
+declare function pointOnSurface(clientX: number, clientY: number, rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}): SurfacePoint;
+/**
+ * The saturation and value a point on the square stands for.
+ *
+ * Value runs UPWARD while a surface's y runs downward, so the vertical axis is
+ * inverted here. Getting that wrong produces a picker that looks correct and
+ * selects the colour vertically mirrored from the one under the cursor.
+ *
+ * @experimental
+ */
+declare function saturationValueAt(point: SurfacePoint): {
+    s: number;
+    v: number;
+};
+/**
+ * Where the handle sits for a given saturation and value — the inverse of
+ * {@link saturationValueAt}.
+ *
+ * Derived from that function's own inversion rather than written independently,
+ * so the two cannot disagree about which way the axis runs.
+ *
+ * @experimental
+ */
+declare function surfacePointFor(s: number, v: number): SurfacePoint;
+/**
+ * The hue a horizontal position stands for, in [0, 360).
+ *
+ * The upper bound is exclusive: 360 and 0 are the same hue, and returning 360
+ * lets a handle at the far end read back as a position outside the strip.
+ *
+ * @experimental
+ */
+declare function hueAt(fraction: number): number;
+/** Where the hue handle sits, as a fraction of the strip. @experimental */
+declare function huePosition(hue: number): number;
+/**
+ * The integer step a hue occupies on a strip whose last step is `max`.
+ *
+ * Rounding is what makes this more than a multiplication. A hue just below 360
+ * — `#ff0001` is about 359.76 — rounds UP to a step past the end of the strip,
+ * and the obvious repair of wrapping it with a modulo sends it to 0: the far
+ * LEFT, the opposite end from where that colour belongs. The handle then sits
+ * on the wrong side and any keyboard adjustment starts from there. Held at the
+ * last step instead, which is where it visually belongs.
+ *
+ * @experimental
+ */
+declare function hueSliderValue(hue: number, max: number): number;
+
+export { type Hsv, type Oklch, type Rgb, type Rgba, type SurfacePoint, hsvToRgb, hueAt, huePosition, hueSliderValue, normalizeHue, oklchToRgb, parseHex, pointOnSurface, rgbToHsv, rgbToOklch, saturationValueAt, surfacePointFor, toHex };

package/dist/color.d.ts

@@ -0,0 +1,251 @@
+/**
+ * Conversions between the colour models an editing surface needs.
+ *
+ * ## Why each model is here
+ *
+ * - **sRGB** is what a screen displays and what `#rrggbb` encodes. Everything ends here.
+ * - **HSV** is what a colour picker is: a square of saturation against value, beside a hue
+ *   strip. No other model puts those three controls in the shape people expect.
+ * - **OKLCH** is what this product's own theme is written in — every token in `theme.css` is an
+ *   `oklch()` value. A picker that cannot read it cannot edit the theme.
+ *
+ * ## Why the maths is here rather than in a library
+ *
+ * These are fixed, published transforms: the sRGB transfer function and the OKLab matrices are
+ * specified in CSS Color 4 and do not change. The package ships no runtime colour dependency, and
+ * this module keeps it that way. `culori` remains a DEV dependency used as a test oracle — the
+ * conversions here are cross-checked against it rather than trusted on their own.
+ *
+ * ## The part that is genuinely hard
+ *
+ * OKLCH describes more colours than a screen can show. Converting one that falls outside sRGB has
+ * no correct answer, only choices, and the naive choice — clamp each channel independently — is
+ * the wrong one: it shifts hue, because clipping red without clipping green changes the ratio
+ * between them. {@link oklchToRgb} reduces chroma instead, holding lightness and hue, which is the
+ * approach CSS Color 4 describes for gamut mapping.
+ *
+ * @module lib/color/convert
+ */
+/**
+ * An sRGB colour with channels in [0, 1]. Alpha is carried separately.
+ *
+ * @experimental
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Hue in [0, 360), saturation and value in [0, 1].
+ *
+ * @experimental
+ */
+interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/**
+ * Perceptual lightness in [0, 1], chroma from 0, hue in [0, 360).
+ *
+ * @experimental
+ */
+interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+/**
+ * Wrap a hue into [0, 360), so -30 and 330 are the same angle.
+ *
+ * @experimental
+ */
+declare function normalizeHue(hue: number): number;
+/**
+ * HSV to sRGB.
+ * Saturation and value are clamped rather than rejected: a picker drags them, and a drag that
+ * overshoots by a rounding error should saturate rather than throw.
+ *
+ * @experimental
+ */
+declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+/**
+ * sRGB to HSV.
+ * Hue is UNDEFINED for a grey and value is undefined for black, and this returns 0 for both. A
+ * picker must not take that 0 as the user's hue: it is the absence of one. Holding hue across a
+ * drag to zero saturation is the caller's job, which is why a picker keeps HSV as its state
+ * rather than deriving it from the colour each render.
+ *
+ * @experimental
+ */
+declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+/**
+ * sRGB to OKLCH.
+ *
+ * @experimental
+ */
+declare function rgbToOklch({ r, g, b }: Rgb): Oklch;
+/**
+ * OKLCH to sRGB, reducing chroma until the colour fits on screen.
+ * OKLCH can name colours a display cannot show. Clamping the channels independently is the
+ * obvious response and the wrong one: clipping red without clipping green changes the ratio
+ * between them, so the colour that appears is a DIFFERENT HUE from the one asked for. Lightness
+ * and hue are what a person chose; chroma is the part they will not miss, so chroma is what is
+ * given up.
+ * The search is a bisection on chroma, which converges to well under a perceptible step in the
+ * fixed number of rounds below — no loop that might not terminate.
+ *
+ * **The gamut is not always monotonic along this ray, and that is a deliberate trade.** At some
+ * lightness and hue pairs the boundary is crossed more than once: at `l = 0.2, h = 264.1` the ray
+ * is inside up to c ≈ 0.1192, outside until c ≈ 0.1368, briefly inside again to c ≈ 0.1386. A
+ * bisection therefore finds the FIRST boundary rather than the outermost reachable chroma.
+ *
+ * That is the intended behaviour rather than a limitation. Those islands span roughly a tenth of
+ * a degree of hue, so preferring the outermost value would make chroma jump by about 0.021
+ * between h = 264.05 and h = 264.10 — a visible step while dragging a hue slider, over a change
+ * no one can aim at. Taking the first boundary gives 0.1160, 0.1175, 0.1192, 0.1255, 0.1383
+ * across the same sweep: continuous, and one step less saturated at worst. It is also what the
+ * CSS Color 4 gamut-mapping algorithm does.
+ *
+ * @experimental
+ */
+declare function oklchToRgb({ l, c, h }: Oklch): Rgb;
+
+/**
+ * Hex is the notation people type, so it is the picker's front door.
+ *
+ * It lives beside the conversions rather than in the component that reads it, for the same reason
+ * they do: parsing `#3b82f6` is arithmetic on a string, a server rendering a token swatch needs it
+ * as much as an editing surface does, and pulling it into client code would put it behind the
+ * `"use client"` boundary for no benefit.
+ *
+ * @module lib/color/hex
+ */
+
+/**
+ * An sRGB colour with its alpha, which is what a hex string can carry and {@link Rgb} cannot.
+ *
+ * `alpha` is in [0, 1] like the channels, rather than 0-255, so it composes with the conversions
+ * without a second unit in play.
+ *
+ * @experimental
+ */
+interface Rgba extends Rgb {
+    alpha: number;
+}
+/**
+ * Read a hex colour, or `null` if the input is not one.
+ *
+ * Returns `null` rather than throwing or substituting black: this reads what someone is part-way
+ * through typing, where "not a colour yet" is the ordinary case and neither an exception nor a
+ * silent black is a useful answer. A caller decides whether to hold the last good value, show a
+ * message, or wait.
+ *
+ * Both short forms are accepted because both are what people paste. `#abc` expands by REPEATING
+ * each digit rather than padding with zero — `#abc` is `#aabbcc`, not `#a0b0c0` — which is what CSS
+ * does and the only expansion under which `#fff` is white.
+ *
+ * @experimental
+ */
+declare function parseHex(input: string): Rgba | null;
+/**
+ * Write a colour as `#rrggbb`, or `#rrggbbaa` when it is not fully opaque.
+ *
+ * The alpha pair is omitted at 1 rather than always written, because `#3b82f6ff` is the same colour
+ * and the shorter form is what someone expects to see in a field they typed `#3b82f6` into.
+ *
+ * Channels outside [0, 1] are clamped, so the result is always a valid six- or eight-digit hex
+ * string whatever a caller passes. Not for floating-point drift, which rounds to the right byte on
+ * its own: it is for a value that is wrong by a lot — a channel still in 0-255, or a computation
+ * that overshot — where the alternative is emitting `#17f00-80`, a string nothing downstream can
+ * parse and no error explains.
+ *
+ * @experimental
+ */
+declare function toHex(color: Rgb, alpha?: number): string;
+
+/**
+ * The mapping between a pointer on a picker surface and a colour.
+ *
+ * Kept apart from the component for two reasons. It is arithmetic on numbers,
+ * so it belongs on the server-safe side with the rest of `@nextlyhq/ui/color`;
+ * and a saturation square is the one part of a picker that cannot be checked by
+ * rendering it — jsdom reports every element as zero-sized, so a component test
+ * measures nothing and passes. Measured here instead, against known corners.
+ *
+ * @module lib/color/picker-geometry
+ */
+/** A position on a surface, each axis in [0, 1] from the top-left. */
+interface SurfacePoint {
+    x: number;
+    y: number;
+}
+/**
+ * A pointer position as a fraction of a surface.
+ *
+ * Clamped, because a drag that begins inside the surface continues to report
+ * while the pointer leaves it — which is the interaction people actually use to
+ * reach full saturation, and without clamping it produces values outside the
+ * colour space rather than the corner they are aiming at.
+ *
+ * A zero-sized surface answers the top-left rather than dividing by zero. That
+ * happens in a test environment and on the first frame before layout.
+ *
+ * @experimental
+ */
+declare function pointOnSurface(clientX: number, clientY: number, rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}): SurfacePoint;
+/**
+ * The saturation and value a point on the square stands for.
+ *
+ * Value runs UPWARD while a surface's y runs downward, so the vertical axis is
+ * inverted here. Getting that wrong produces a picker that looks correct and
+ * selects the colour vertically mirrored from the one under the cursor.
+ *
+ * @experimental
+ */
+declare function saturationValueAt(point: SurfacePoint): {
+    s: number;
+    v: number;
+};
+/**
+ * Where the handle sits for a given saturation and value — the inverse of
+ * {@link saturationValueAt}.
+ *
+ * Derived from that function's own inversion rather than written independently,
+ * so the two cannot disagree about which way the axis runs.
+ *
+ * @experimental
+ */
+declare function surfacePointFor(s: number, v: number): SurfacePoint;
+/**
+ * The hue a horizontal position stands for, in [0, 360).
+ *
+ * The upper bound is exclusive: 360 and 0 are the same hue, and returning 360
+ * lets a handle at the far end read back as a position outside the strip.
+ *
+ * @experimental
+ */
+declare function hueAt(fraction: number): number;
+/** Where the hue handle sits, as a fraction of the strip. @experimental */
+declare function huePosition(hue: number): number;
+/**
+ * The integer step a hue occupies on a strip whose last step is `max`.
+ *
+ * Rounding is what makes this more than a multiplication. A hue just below 360
+ * — `#ff0001` is about 359.76 — rounds UP to a step past the end of the strip,
+ * and the obvious repair of wrapping it with a modulo sends it to 0: the far
+ * LEFT, the opposite end from where that colour belongs. The handle then sits
+ * on the wrong side and any keyboard adjustment starts from there. Held at the
+ * last step instead, which is where it visually belongs.
+ *
+ * @experimental
+ */
+declare function hueSliderValue(hue: number, max: number): number;
+
+export { type Hsv, type Oklch, type Rgb, type Rgba, type SurfacePoint, hsvToRgb, hueAt, huePosition, hueSliderValue, normalizeHue, oklchToRgb, parseHex, pointOnSurface, rgbToHsv, rgbToOklch, saturationValueAt, surfacePointFor, toHex };

package/dist/color.mjs

@@ -0,0 +1,179 @@
+// src/lib/color/convert.ts
+var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+var MAX_SRGB_CHROMA = 0.5;
+function normalizeHue(hue) {
+  if (!Number.isFinite(hue)) return 0;
+  const wrapped = hue % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+function hsvToRgb({ h, s, v }) {
+  const hue = normalizeHue(h);
+  const sat = clamp01(s);
+  const val = clamp01(v);
+  const sector = hue / 60;
+  const chroma = val * sat;
+  const x = chroma * (1 - Math.abs(sector % 2 - 1));
+  const base = val - chroma;
+  let rgb;
+  if (sector < 1) rgb = [chroma, x, 0];
+  else if (sector < 2) rgb = [x, chroma, 0];
+  else if (sector < 3) rgb = [0, chroma, x];
+  else if (sector < 4) rgb = [0, x, chroma];
+  else if (sector < 5) rgb = [x, 0, chroma];
+  else rgb = [chroma, 0, x];
+  return { r: rgb[0] + base, g: rgb[1] + base, b: rgb[2] + base };
+}
+function rgbToHsv({ r, g, b }) {
+  const red = clamp01(r);
+  const green = clamp01(g);
+  const blue = clamp01(b);
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const chroma = max - min;
+  let hue = 0;
+  if (chroma !== 0) {
+    if (max === red) hue = (green - blue) / chroma % 6;
+    else if (max === green) hue = (blue - red) / chroma + 2;
+    else hue = (red - green) / chroma + 4;
+    hue *= 60;
+  }
+  return {
+    h: normalizeHue(hue),
+    s: max === 0 ? 0 : chroma / max,
+    v: max
+  };
+}
+function toLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+}
+function toGamma(channel) {
+  return channel <= 31308e-7 ? channel * 12.92 : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055;
+}
+function linearRgbToOklab(r, g, b) {
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  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 oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  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
+  ];
+}
+function rgbToOklch({ r, g, b }) {
+  const [L, A, B] = linearRgbToOklab(
+    toLinear(clamp01(r)),
+    toLinear(clamp01(g)),
+    toLinear(clamp01(b))
+  );
+  const chroma = Math.sqrt(A * A + B * B);
+  const hue = chroma < 1e-6 ? 0 : normalizeHue(Math.atan2(B, A) * 180 / Math.PI);
+  return { l: L, c: chroma, h: hue };
+}
+function inGamut([r, g, b]) {
+  const epsilon = 0;
+  return r >= -epsilon && r <= 1 + epsilon && g >= -epsilon && g <= 1 + epsilon && b >= -epsilon && b <= 1 + epsilon;
+}
+function oklchToRgb({ l, c, h }) {
+  const lightness = clamp01(l);
+  const hueRadians = normalizeHue(h) * Math.PI / 180;
+  const at = (chroma) => oklabToLinearRgb(
+    lightness,
+    chroma * Math.cos(hueRadians),
+    chroma * Math.sin(hueRadians)
+  );
+  const requested = Math.max(0, c);
+  let fitting = at(requested);
+  if (!inGamut(fitting)) {
+    let low = 0;
+    let high = Math.min(requested, MAX_SRGB_CHROMA);
+    for (let i = 0; i < 20; i++) {
+      const mid = (low + high) / 2;
+      if (inGamut(at(mid))) low = mid;
+      else high = mid;
+    }
+    fitting = at(low);
+  }
+  return {
+    r: clamp01(toGamma(fitting[0])),
+    g: clamp01(toGamma(fitting[1])),
+    b: clamp01(toGamma(fitting[2]))
+  };
+}
+
+// src/lib/color/hex.ts
+var HEX = /^#?(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var clamp012 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+function pair(channel) {
+  const value = Number.isFinite(channel) ? clamp012(channel) : 0;
+  return Math.round(value * 255).toString(16).padStart(2, "0");
+}
+function parseHex(input) {
+  const text = input.trim();
+  if (!HEX.test(text)) return null;
+  const digits = text.replace("#", "");
+  const short = digits.length < 6;
+  const size = short ? 1 : 2;
+  const channel = (index) => {
+    const slice = digits.slice(index * size, index * size + size);
+    return parseInt(short ? slice + slice : slice, 16) / 255;
+  };
+  const hasAlpha = digits.length === 4 || digits.length === 8;
+  return {
+    r: channel(0),
+    g: channel(1),
+    b: channel(2),
+    alpha: hasAlpha ? channel(3) : 1
+  };
+}
+function toHex(color, alpha = 1) {
+  const opacity = Number.isFinite(alpha) ? clamp012(alpha) : 1;
+  const opaque = `#${pair(color.r)}${pair(color.g)}${pair(color.b)}`;
+  return opacity === 1 ? opaque : `${opaque}${pair(opacity)}`;
+}
+
+// src/lib/color/picker-geometry.ts
+var clamp013 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+function pointOnSurface(clientX, clientY, rect) {
+  return {
+    x: rect.width === 0 ? 0 : clamp013((clientX - rect.left) / rect.width),
+    y: rect.height === 0 ? 0 : clamp013((clientY - rect.top) / rect.height)
+  };
+}
+function saturationValueAt(point) {
+  return { s: clamp013(point.x), v: 1 - clamp013(point.y) };
+}
+function surfacePointFor(s, v) {
+  return { x: clamp013(s), y: 1 - clamp013(v) };
+}
+function hueAt(fraction) {
+  const hue = clamp013(fraction) * 360;
+  return hue >= 360 ? 0 : hue;
+}
+function huePosition(hue) {
+  const wrapped = (hue % 360 + 360) % 360;
+  return wrapped / 360;
+}
+function hueSliderValue(hue, max) {
+  const step = Math.round(huePosition(hue) * (max + 1));
+  return step > max ? max : step;
+}
+
+export { hsvToRgb, hueAt, huePosition, hueSliderValue, normalizeHue, oklchToRgb, parseHex, pointOnSurface, rgbToHsv, rgbToOklch, saturationValueAt, surfacePointFor, toHex };
+//# sourceMappingURL=color.mjs.map
+//# sourceMappingURL=color.mjs.map