@kenlo/sds-design-system 0.9.9

package/components/ColorPicker/color-picker.marko

@@ -0,0 +1,474 @@
+<!-- sds-color-picker — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/ColorPicker/ColorPicker.tsx.
+
+     A swatch that opens a picker: a saturation canvas, a hue slider, an opacity slider, the
+     eyedropper where the browser has one, and R/G/B/A and HEX fields. The conversions are
+     in color-maths.js and tested there — a round trip through HSV and back is exactly the
+     arithmetic that drifts by one, and a picker whose colour creeps as you drag is a picker
+     nobody trusts.
+
+     Divergences:
+
+     KDLS falls back to [41, 142, 230] when it cannot read the value — #298EE6, Kenlo blue,
+     in a component that is supposed to carry no brand. It was in the stylesheet too. Both
+     now start from the middle of the neutral ramp: a colour with no opinion, which is what
+     a picker with no value should show.
+
+     The trigger is a <button>. KDLS uses a div with role="button" and a hand-written
+     tabindex, which gets focus but not Enter or Space — so the picker cannot be opened from
+     the keyboard at all.
+
+     hexToRgb checks the shape before the value. KDLS relies on parseInt returning NaN, and
+     parseInt reads a valid prefix and stops: "12zzzz" parses as 0x12 and is accepted as a
+     colour.
+
+     The canvas and the sliders take arrow keys. KDLS binds mousedown only, so every control
+     inside the panel is mouse-only — on a picker whose whole job is choosing a precise
+     value.
+
+`overlay` takes the panel out of the flow entirely: a backdrop over the page with the
+panel centred in it, instead of a panel anchored to the trigger. It is for one situation —
+this control living inside another panel, where anchoring would put a panel on top of the
+panel it came from — and for a phone, where there is no room beside a trigger to anchor
+anything. Whatever opened this is told through `onOpenChange`, so it can get out of the
+way.
+-->
+
+import {
+  hsvToRgb, rgbToHex, hexToRgb, hexToAlpha, alphaToHex, rgbToHsv, startingRgb, startingAlpha,
+} from "./color-maths.js";
+import eyedropperIcon from "../../icons/generated/fluent-eyedropper-regular.marko";
+
+class {
+  onCreate(input) {
+    const [h, s, v] = rgbToHsv(...startingRgb(input.value));
+    this.state = {
+      open: false,
+      hue: h,
+      sat: s,
+      bri: v,
+      opacity: startingAlpha(input.value),
+      hexInput: "",
+    };
+    this.lastValue = input.value;
+    // `this.input` is not set during onCreate — Marko passes it in. See
+    // .claude/component-standard.md §3.
+    this.syncHexInput(input);
+  }
+
+  onInput(input) {
+    // Follows the caller when the caller changes it, and not otherwise.
+    if (input.value === this.lastValue) return;
+    this.lastValue = input.value;
+    const [h, s, v] = rgbToHsv(...startingRgb(input.value));
+    this.state.hue = h;
+    this.state.sat = s;
+    this.state.bri = v;
+    this.state.opacity = startingAlpha(input.value);
+    this.syncHexInput();
+  }
+
+  get currentHex() {
+    return rgbToHex(...hsvToRgb(this.state.hue, this.state.sat, this.state.bri));
+  }
+
+  get rgb() {
+    return hsvToRgb(this.state.hue, this.state.sat, this.state.bri);
+  }
+
+  syncHexInput(input = this.input) {
+    const base = this.currentHex.replace("#", "");
+    this.state.hexInput = input.disableAlpha ? base : base + alphaToHex(this.state.opacity);
+  }
+
+  setHsv(h, s, v) {
+    this.state.hue = h;
+    this.state.sat = s;
+    this.state.bri = v;
+    this.syncHexInput();
+  }
+
+  setOpacity(percent) {
+    this.state.opacity = percent;
+    this.syncHexInput();
+  }
+
+  toggle() {
+    if (this.input.disabled) return;
+    this.state.open = !this.state.open;
+  }
+
+  // The backdrop dismisses, the panel does not: a drag that starts on a slider and ends
+  // outside it is still a drag. Escape is listened for on the document because the
+  // backdrop only receives key events while something inside it holds focus.
+  onMount() {
+    this.escape = (event) => this.closeOnEscape(event);
+    document.addEventListener("keydown", this.escape);
+  }
+
+  onDestroy() {
+    document.removeEventListener("keydown", this.escape);
+  }
+
+  closeFromBackdrop(event, element) {
+    if (event.target !== element) return;
+    this.setOpen(false);
+  }
+
+  closeOnEscape(event) {
+    if (event.key !== "Escape") return;
+    if (!this.input.overlay || !(this.input.open ?? this.state.open)) return;
+    event.preventDefault();
+    this.setOpen(false);
+  }
+
+  setOpen(next) {
+    if (this.input.disabled) return;
+    if (this.input.open === undefined) this.state.open = next;
+    this.input.onOpenChange?.(next);
+  }
+
+  /** A drag that keeps following the pointer after it leaves the control. */
+  track(element, read, event) {
+    if (!element) return;
+    const apply = (moveEvent) => {
+      const rect = element.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (moveEvent.clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, (moveEvent.clientY - rect.top) / rect.height));
+      read(x, y);
+    };
+    apply(event);
+    const move = (moveEvent) => apply(moveEvent);
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  dragCanvas(event) {
+    this.track(this.getEl("canvas"), (x, y) => {
+      this.setHsv(this.state.hue, Math.round(x * 100), Math.round((1 - y) * 100));
+    }, event);
+  }
+
+  dragHue(event) {
+    this.track(this.getEl("hue"), (x) => {
+      this.setHsv(Math.round(x * 360), this.state.sat, this.state.bri);
+    }, event);
+  }
+
+  dragOpacity(event) {
+    this.track(this.getEl("opacity"), (x) => this.setOpacity(Math.round(x * 100)), event);
+  }
+
+  /**
+   * Arrow keys on the canvas and the sliders.
+   *
+   * KDLS binds mousedown and nothing else, so a picker whose entire purpose is choosing a
+   * precise value cannot be operated without a mouse.
+   */
+  nudge(which, event) {
+    const step = event.shiftKey ? 10 : 1;
+    const keys = { ArrowLeft: -1, ArrowRight: 1, ArrowDown: -1, ArrowUp: 1 };
+    const direction = keys[event.key];
+    if (direction === undefined) return;
+    event.preventDefault();
+
+    const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+    const clamp = (n, max) => Math.max(0, Math.min(max, n));
+
+    if (which === "hue") {
+      this.setHsv(clamp(this.state.hue + direction * step, 360), this.state.sat, this.state.bri);
+    } else if (which === "opacity") {
+      this.setOpacity(clamp(this.state.opacity + direction * step, 100));
+    } else if (horizontal) {
+      this.setHsv(this.state.hue, clamp(this.state.sat + direction * step, 100), this.state.bri);
+    } else {
+      this.setHsv(this.state.hue, this.state.sat, clamp(this.state.bri + direction * step, 100));
+    }
+  }
+
+  setChannel(channel, raw) {
+    const value = Math.max(0, Math.min(255, Number(raw) || 0));
+    const [r, g, b] = this.rgb;
+    const next = { r: [value, g, b], g: [r, value, b], b: [r, g, value] }[channel];
+    this.setHsv(...rgbToHsv(...next));
+  }
+
+  setAlphaChannel(raw) {
+    const value = Math.max(0, Math.min(255, Number(raw) || 0));
+    this.setOpacity(Math.round((value / 255) * 100));
+  }
+
+  setHex(raw) {
+    this.state.hexInput = String(raw).toUpperCase();
+    const rgb = hexToRgb(raw);
+    if (rgb) this.setHsv(...rgbToHsv(...rgb));
+    if (this.input.disableAlpha) return;
+    const alpha = hexToAlpha(raw);
+    if (alpha !== null) this.state.opacity = alpha;
+  }
+
+  async pickFromScreen() {
+    if (typeof window === "undefined" || !("EyeDropper" in window)) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      const rgb = hexToRgb(result.sRGBHex);
+      if (rgb) this.setHsv(...rgbToHsv(...rgb));
+    } catch {
+      // The visitor pressed Escape. Nothing to do, and nothing to report.
+    }
+  }
+
+  apply() {
+    const hex = this.input.disableAlpha
+      ? this.currentHex
+      : this.currentHex + alphaToHex(this.state.opacity);
+    this.input.onChange?.(hex);
+    this.state.open = false;
+  }
+}
+
+$ {
+  const {
+    label,
+    width = "hug",
+    zIndex,
+    disableAlpha = false,
+    disabled = false,
+    applyLabel = "Aplicar",
+    overlay = false,
+    open: openInput,
+    showTrigger = true,
+    class: extraClass = "",
+  } = input;
+
+  if (!label) throw new Error("sds-color-picker needs a `label`.");
+  if (width !== "hug" && width !== "fill") {
+    throw new Error(`Unknown color picker width: "${width}". Allowed: hug, fill`);
+  }
+
+  const [r, g, b] = component.rgb;
+  const hex = component.currentHex;
+  // Controlled when the caller passes `open`. An overlay picker usually has to be: it is
+  // opened from somewhere that then gets out of the way, and a picker that owns its own
+  // open state dies with whatever it was rendered inside.
+  const open = openInput !== undefined ? openInput : state.open;
+
+  const triggerClass = [
+    "sds-colorpicker__trigger",
+    open ? "sds-colorpicker__trigger--open" : "",
+    disabled ? "sds-colorpicker__trigger--disabled" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<div class=[
+  "sds-colorpicker",
+  showTrigger ? "" : "sds-colorpicker--headless",
+  width === "fill" ? "sds-colorpicker--fill" : "",
+  extraClass,
+].filter(Boolean).join(" ")>
+  <if(showTrigger)>
+  <sds-floating
+    open=open
+    onOpenChange=(next) => component.setOpen(next)
+    placement="bottomLeft"
+    zIndex=zIndex
+  >
+    <@content>
+      <if(!overlay)>
+      <div class="sds-colorpicker__panel">
+        <div
+          key="canvas"
+          class="sds-colorpicker__canvas"
+          style=`--cp-hue:${state.hue}`
+          role="application"
+          aria-label=`Saturação e brilho de ${label}`
+          tabindex=(disabled ? -1 : 0)
+          on-mousedown("dragCanvas")
+          on-keydown("nudge", "canvas")
+        >
+          <div class="sds-colorpicker__handle" style=`left:${state.sat}%;top:${100 - state.bri}%`/>
+        </div>
+
+        <div class="sds-colorpicker__slider-row">
+          <sds-icon-button size="md" aria-label="Selecionar cor da tela"
+            onClick=() => component.pickFromScreen()>
+            <@icon><${eyedropperIcon}/></@icon>
+          </sds-icon-button>
+
+          <div class="sds-colorpicker__sliders">
+            <div
+              key="hue"
+              class="sds-colorpicker__slider sds-colorpicker__slider--hue"
+              role="slider"
+              aria-label="Matiz"
+              aria-valuemin="0"
+              aria-valuemax="360"
+              aria-valuenow=String(state.hue)
+              tabindex="0"
+              on-mousedown("dragHue")
+              on-keydown("nudge", "hue")
+            >
+              <div class="sds-colorpicker__slider-thumb" style=`left:${(state.hue / 360) * 100}%`/>
+            </div>
+
+            <if(!disableAlpha)>
+              <div
+                key="opacity"
+                class="sds-colorpicker__slider sds-colorpicker__slider--opacity"
+                style=`--cp-hex:${hex}`
+                role="slider"
+                aria-label="Opacidade"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-valuenow=String(state.opacity)
+                aria-valuetext=`${state.opacity}%`
+                tabindex="0"
+                on-mousedown("dragOpacity")
+                on-keydown("nudge", "opacity")
+              >
+                <div class="sds-colorpicker__slider-thumb" style=`left:${state.opacity}%`/>
+              </div>
+            </if>
+          </div>
+        </div>
+
+        <div class=[
+          "sds-colorpicker__input-group",
+          !disableAlpha ? "sds-colorpicker__input-group--rgba" : "",
+        ].filter(Boolean).join(" ")>
+          <sds-input label="R" value=String(r) onChange=(event, value) => component.setChannel("r", value)/>
+          <sds-input label="G" value=String(g) onChange=(event, value) => component.setChannel("g", value)/>
+          <sds-input label="B" value=String(b) onChange=(event, value) => component.setChannel("b", value)/>
+          <if(!disableAlpha)>
+            <sds-input
+              label="A"
+              value=String(Math.round((state.opacity / 100) * 255))
+              onChange=(event, value) => component.setAlphaChannel(value)
+            />
+          </if>
+        </div>
+
+        <sds-input label="HEX" value=state.hexInput
+          onChange=(event, value) => component.setHex(value)/>
+
+        <sds-button variant="primary" size="md" label=applyLabel
+          class="sds-colorpicker__apply" onClick=() => component.apply()/>
+      </div>
+      </if>
+    </@content>
+
+    <!-- A real button. KDLS uses a div with role="button" and a tabindex, which takes focus
+         but answers neither Enter nor Space — so the picker cannot be opened by keyboard. -->
+    <button
+      type="button"
+      class=triggerClass
+      disabled=(disabled || null)
+      aria-haspopup="dialog"
+      aria-expanded=(open ? "true" : "false")
+      on-click("toggle")
+    >
+      <span class="sds-colorpicker__swatch" style=`background:${hex}` aria-hidden="true"/>
+      <span class="sds-colorpicker__field">
+        <sds-text as="span" variant="labelRegular">${label}</sds-text>
+        <span class="sds-colorpicker__hex">#${state.hexInput}</span>
+      </span>
+    </button>
+  </sds-floating>
+  </if>
+
+  <!-- Centred, over everything, when `overlay` is on. Escape and the backdrop both close
+       it; the panel itself does not, so a drag that ends outside the panel is still a
+       drag rather than a dismissal. -->
+  <if(overlay && open)>
+    <div
+      class="sds-colorpicker__backdrop"
+      style=(zIndex !== undefined ? `z-index:${zIndex}` : null)
+      on-click("closeFromBackdrop")
+      on-keydown("closeOnEscape")
+    >
+      <div class="sds-colorpicker__panel">
+          <div
+            key="canvas"
+            class="sds-colorpicker__canvas"
+            style=`--cp-hue:${state.hue}`
+            role="application"
+            aria-label=`Saturação e brilho de ${label}`
+            tabindex=(disabled ? -1 : 0)
+            on-mousedown("dragCanvas")
+            on-keydown("nudge", "canvas")
+          >
+            <div class="sds-colorpicker__handle" style=`left:${state.sat}%;top:${100 - state.bri}%`/>
+          </div>
+
+          <div class="sds-colorpicker__slider-row">
+            <sds-icon-button size="md" aria-label="Selecionar cor da tela"
+              onClick=() => component.pickFromScreen()>
+              <@icon><${eyedropperIcon}/></@icon>
+            </sds-icon-button>
+
+            <div class="sds-colorpicker__sliders">
+              <div
+                key="hue"
+                class="sds-colorpicker__slider sds-colorpicker__slider--hue"
+                role="slider"
+                aria-label="Matiz"
+                aria-valuemin="0"
+                aria-valuemax="360"
+                aria-valuenow=String(state.hue)
+                tabindex="0"
+                on-mousedown("dragHue")
+                on-keydown("nudge", "hue")
+              >
+                <div class="sds-colorpicker__slider-thumb" style=`left:${(state.hue / 360) * 100}%`/>
+              </div>
+
+              <if(!disableAlpha)>
+                <div
+                  key="opacity"
+                  class="sds-colorpicker__slider sds-colorpicker__slider--opacity"
+                  style=`--cp-hex:${hex}`
+                  role="slider"
+                  aria-label="Opacidade"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-valuenow=String(state.opacity)
+                  aria-valuetext=`${state.opacity}%`
+                  tabindex="0"
+                  on-mousedown("dragOpacity")
+                  on-keydown("nudge", "opacity")
+                >
+                  <div class="sds-colorpicker__slider-thumb" style=`left:${state.opacity}%`/>
+                </div>
+              </if>
+            </div>
+          </div>
+
+          <div class=[
+            "sds-colorpicker__input-group",
+            !disableAlpha ? "sds-colorpicker__input-group--rgba" : "",
+          ].filter(Boolean).join(" ")>
+            <sds-input label="R" value=String(r) onChange=(event, value) => component.setChannel("r", value)/>
+            <sds-input label="G" value=String(g) onChange=(event, value) => component.setChannel("g", value)/>
+            <sds-input label="B" value=String(b) onChange=(event, value) => component.setChannel("b", value)/>
+            <if(!disableAlpha)>
+              <sds-input
+                label="A"
+                value=String(Math.round((state.opacity / 100) * 255))
+                onChange=(event, value) => component.setAlphaChannel(value)
+              />
+            </if>
+          </div>
+
+          <sds-input label="HEX" value=state.hexInput
+            onChange=(event, value) => component.setHex(value)/>
+
+          <sds-button variant="primary" size="md" label=applyLabel
+            class="sds-colorpicker__apply" onClick=() => component.apply()/>
+        </div>
+    </div>
+  </if>
+</div>