@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/ui/components/controls/color/color-footer.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useMemo, type ChangeEvent, type KeyboardEvent } from "react";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "../../primitives/input-group";
+import { StaticSelect } from "../select";
+import {
+  getColorChannels,
+  getEditableChannelHex,
+  type ColorChannels,
+  type ColorFormatMode,
+} from "./style-guide-color-picker-channel-utils";
+
+type ColorFooterProps = {
+  resolvedHexInputId: string;
+  hexInputLabel: string;
+  disabled: boolean;
+  draftHexValue: string;
+  onHexFocus: () => void;
+  onHexChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onHexBlur: () => void;
+  onHexKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onColorValueFocus: () => void;
+  onColorValueChange: (nextHex: string) => void;
+  onColorValueBlur: () => void;
+  mode: ColorFormatMode;
+  onModeChange: (nextMode: ColorFormatMode) => void;
+  showOpacity?: boolean;
+};
+
+const COLOR_FORMAT_MODES = [
+  { label: "Hex", value: "hex" },
+  { label: "RGB", value: "rgb" },
+  { label: "HSL", value: "hsl" },
+  { label: "HSB", value: "hsb" },
+] as const satisfies ReadonlyArray<{ label: string; value: ColorFormatMode }>;
+
+const colorFormatSelectWidth = `calc(${Math.max(
+  ...COLOR_FORMAT_MODES.map((formatMode) => formatMode.label.length),
+)}ch + 2rem)`;
+
+const colorValueInputGroupClassName = "h-6 min-w-0 flex-1";
+
+const colorValueInputClassName =
+  "min-w-0 px-1 text-center text-xs font-mono";
+
+const colorValueCellSeparatorClassName =
+  "pointer-events-none absolute top-0 bottom-0 w-px bg-[color:color-mix(in_oklab,var(--border)_12%,transparent)]";
+
+function toColorFormatMode(value: unknown): ColorFormatMode | null {
+  const candidate =
+    typeof value === "string"
+      ? value
+      : value && typeof value === "object" && "value" in value
+        ? String(value.value)
+        : null;
+
+  return COLOR_FORMAT_MODES.some((formatMode) => formatMode.value === candidate)
+    ? (candidate as ColorFormatMode)
+    : null;
+}
+
+function ColorFormatSelect({
+  disabled,
+  mode,
+  onModeChange,
+}: {
+  disabled: boolean;
+  mode: ColorFormatMode;
+  onModeChange: (nextMode: ColorFormatMode) => void;
+}) {
+  return (
+    <div className="min-w-0 shrink-0" style={{ width: colorFormatSelectWidth }}>
+      <StaticSelect
+        disabled={disabled}
+        options={COLOR_FORMAT_MODES}
+        scrollFadeValue={false}
+        size="sm"
+        triggerClassName="text-[11px]"
+        value={mode}
+        onValueChange={(nextMode) => {
+          const resolvedMode = toColorFormatMode(nextMode);
+
+          if (resolvedMode) onModeChange(resolvedMode);
+        }}
+      />
+    </div>
+  );
+}
+
+function ColorValueCells({
+  channels,
+  disabled,
+  mode,
+  onColorValueBlur,
+  onColorValueChange,
+  onColorValueFocus,
+  showOpacity,
+}: {
+  channels: ColorChannels;
+  disabled: boolean;
+  mode: ColorFormatMode;
+  onColorValueBlur: () => void;
+  onColorValueChange: (nextHex: string) => void;
+  onColorValueFocus: () => void;
+  showOpacity: boolean;
+}) {
+  if (mode === "css") {
+    const [red, green, blue] = channels.rgb;
+
+    return (
+      <InputGroup
+        data-slot="style-guide-color-value-cells"
+        className={colorValueInputGroupClassName}
+        size="sm"
+      >
+        <InputGroupInput
+          aria-label="CSS color value"
+          className="min-w-0 px-2 font-mono text-xs"
+          disabled={disabled}
+          readOnly
+          value={`rgb(${red} ${green} ${blue})`}
+        />
+      </InputGroup>
+    );
+  }
+
+  const colorValues =
+    mode === "rgb"
+      ? channels.rgb
+      : mode === "hsl"
+        ? channels.hsl
+        : channels.hsb;
+  const values = showOpacity ? [...colorValues, 100] : colorValues;
+
+  return (
+    <InputGroup
+      data-slot="style-guide-color-value-cells"
+      className={colorValueInputGroupClassName}
+      size="sm"
+    >
+      <div className="relative flex h-full min-w-0 flex-1">
+        {values.slice(1).map((_, index) => (
+          <span
+            aria-hidden
+            className={colorValueCellSeparatorClassName}
+            key={`${mode}-separator-${index}`}
+            style={{ left: `${((index + 1) / values.length) * 100}%` }}
+          />
+        ))}
+        {values.map((value, index) => {
+          const isAlphaChannel = index === 3;
+
+          return (
+            <InputGroupInput
+              aria-label={`${mode.toUpperCase()} channel ${index + 1}`}
+              className={colorValueInputClassName}
+              disabled={disabled}
+              inputMode="numeric"
+              key={`${mode}-${index}`}
+              readOnly={isAlphaChannel}
+              value={String(value)}
+              onBlur={isAlphaChannel ? undefined : onColorValueBlur}
+              onChange={(event) => {
+                const nextHex = getEditableChannelHex({
+                  channels,
+                  channelIndex: index,
+                  mode,
+                  rawValue: event.target.value,
+                });
+
+                if (nextHex) onColorValueChange(nextHex);
+              }}
+              onFocus={
+                isAlphaChannel
+                  ? undefined
+                  : () => {
+                      onColorValueFocus();
+                    }
+              }
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === "Escape") {
+                  event.currentTarget.blur();
+                }
+              }}
+            />
+          );
+        })}
+      </div>
+      {showOpacity ? (
+        <InputGroupAddon align="inline-end" className="pr-1.5 pl-0">
+          <InputGroupText>%</InputGroupText>
+        </InputGroupAddon>
+      ) : null}
+    </InputGroup>
+  );
+}
+
+export function ColorFooter({
+  resolvedHexInputId,
+  hexInputLabel,
+  disabled,
+  draftHexValue,
+  onHexFocus,
+  onHexChange,
+  onHexBlur,
+  onHexKeyDown,
+  onColorValueFocus,
+  onColorValueChange,
+  onColorValueBlur,
+  mode,
+  onModeChange,
+  showOpacity = false,
+}: ColorFooterProps) {
+  const channels = useMemo(
+    () => getColorChannels(draftHexValue),
+    [draftHexValue],
+  );
+
+  return (
+    <div
+      data-slot="style-guide-color-footer"
+      className="flex w-full shrink-0 items-center border-t border-[color:color-mix(in_oklab,var(--border)_6%,transparent)] px-2 py-3"
+    >
+      <div
+        data-slot="style-guide-color-footer-row"
+        className="flex w-full min-w-0 items-center gap-1.5"
+      >
+        <ColorFormatSelect
+          disabled={disabled}
+          mode={mode}
+          onModeChange={onModeChange}
+        />
+        {mode === "hex" ? (
+          <InputGroup className="h-6 min-w-0 flex-1" size="sm">
+            <InputGroupInput
+              id={resolvedHexInputId}
+              type="text"
+              inputMode="text"
+              spellCheck={false}
+              autoCapitalize="characters"
+              autoCorrect="off"
+              disabled={disabled}
+              aria-label={hexInputLabel}
+              className="min-w-0 font-mono text-xs"
+              value={draftHexValue}
+              onFocus={onHexFocus}
+              onChange={onHexChange}
+              onBlur={onHexBlur}
+              onKeyDown={onHexKeyDown}
+            />
+          </InputGroup>
+        ) : (
+          <ColorValueCells
+            channels={channels}
+            disabled={disabled}
+            mode={mode}
+            onColorValueBlur={onColorValueBlur}
+            onColorValueChange={onColorValueChange}
+            onColorValueFocus={onColorValueFocus}
+            showOpacity={showOpacity}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/ui/components/controls/color/color-model-slider.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+
+import { type HsvColor } from "../../../lib/style-guide-color-utils";
+import { cn } from "../../../lib/utils";
+import {
+  getColorChannels,
+  type ColorSurfaceModel,
+} from "./style-guide-color-picker-channel-utils";
+
+const HUE_RAIL_BACKGROUND =
+  "linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)";
+const RGB_BLUE_RAIL_BACKGROUND =
+  "linear-gradient(90deg, rgb(0 0 0), rgb(0 0 255))";
+
+function clampSliderValue(value: number, max: number): number {
+  return Math.min(max, Math.max(0, value));
+}
+
+function getSliderValueFromClientX(
+  clientX: number,
+  bounds: DOMRect,
+  max: number,
+): number {
+  if (bounds.width === 0) return 0;
+
+  return clampSliderValue(
+    Math.round(((clientX - bounds.left) / bounds.width) * max),
+    max,
+  );
+}
+
+type ColorModelSliderProps = {
+  label: string;
+  disabled: boolean;
+  max: number;
+  railBackground: string;
+  value: number;
+  onDragStateChange: (nextIsDragging: boolean) => void;
+  onPreviewChange: (nextValue: number) => void;
+  onCommit: (nextValue: number) => void;
+};
+
+export function getColorSurfaceSliderConfig({
+  colorModel,
+  currentColorHex,
+  hueLabel,
+  optimisticColor,
+}: {
+  colorModel: ColorSurfaceModel;
+  currentColorHex: string;
+  hueLabel: string;
+  optimisticColor: HsvColor;
+}): {
+  label: string;
+  max: number;
+  railBackground: string;
+  value: number;
+} {
+  if (colorModel === "rgb") {
+    const [, , blue] = getColorChannels(currentColorHex).rgb;
+
+    return {
+      label: "RGB blue channel",
+      max: 255,
+      railBackground: RGB_BLUE_RAIL_BACKGROUND,
+      value: blue,
+    };
+  }
+
+  return {
+    label: hueLabel,
+    max: 360,
+    railBackground: HUE_RAIL_BACKGROUND,
+    value: optimisticColor.h,
+  };
+}
+
+export function ColorModelSlider({
+  label,
+  disabled,
+  max,
+  railBackground,
+  value,
+  onDragStateChange,
+  onPreviewChange,
+  onCommit,
+}: ColorModelSliderProps) {
+  const sliderRef = useRef<HTMLDivElement | null>(null);
+  const dragBoundsRef = useRef<DOMRect | null>(null);
+  const latestDragValueRef = useRef(value);
+  const callbacksRef = useRef({ onCommit, onDragStateChange, onPreviewChange });
+  const [isDragging, setIsDragging] = useState(false);
+  const activeValue = isDragging ? latestDragValueRef.current : value;
+  const valuePercent =
+    max === 0 ? 0 : (clampSliderValue(activeValue, max) / max) * 100;
+
+  useEffect(() => {
+    callbacksRef.current = { onCommit, onDragStateChange, onPreviewChange };
+  }, [onCommit, onDragStateChange, onPreviewChange]);
+
+  useEffect(() => {
+    if (!isDragging) {
+      latestDragValueRef.current = value;
+    }
+  }, [isDragging, value]);
+
+  const previewFromClientX = useCallback(
+    (clientX: number) => {
+      const bounds = dragBoundsRef.current;
+      if (!bounds) return;
+
+      const nextValue = getSliderValueFromClientX(clientX, bounds, max);
+      latestDragValueRef.current = nextValue;
+      callbacksRef.current.onPreviewChange(nextValue);
+    },
+    [max],
+  );
+
+  const finishDrag = useCallback((shouldCommit: boolean) => {
+    const nextValue = latestDragValueRef.current;
+
+    dragBoundsRef.current = null;
+    setIsDragging(false);
+    callbacksRef.current.onDragStateChange(false);
+
+    if (shouldCommit) {
+      callbacksRef.current.onCommit(nextValue);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      event.preventDefault();
+      previewFromClientX(event.clientX);
+    };
+    const handlePointerUp = (event: PointerEvent) => {
+      event.preventDefault();
+      previewFromClientX(event.clientX);
+      finishDrag(true);
+    };
+    const handlePointerCancel = () => finishDrag(false);
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+    window.addEventListener("blur", handlePointerCancel);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
+      window.removeEventListener("blur", handlePointerCancel);
+    };
+  }, [finishDrag, isDragging, previewFromClientX]);
+
+  const beginDrag = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (disabled) return;
+
+      const bounds = sliderRef.current?.getBoundingClientRect();
+      if (!bounds || bounds.width === 0) return;
+
+      event.preventDefault();
+      dragBoundsRef.current = bounds;
+      setIsDragging(true);
+      callbacksRef.current.onDragStateChange(true);
+      previewFromClientX(event.clientX);
+    },
+    [disabled, previewFromClientX],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+
+      const step = event.shiftKey ? 10 : 1;
+      let nextValue: number | null = null;
+
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+        nextValue = clampSliderValue(activeValue - step, max);
+      } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+        nextValue = clampSliderValue(activeValue + step, max);
+      } else if (event.key === "Home") {
+        nextValue = 0;
+      } else if (event.key === "End") {
+        nextValue = max;
+      }
+
+      if (nextValue == null) return;
+
+      event.preventDefault();
+      latestDragValueRef.current = nextValue;
+      callbacksRef.current.onPreviewChange(nextValue);
+      callbacksRef.current.onCommit(nextValue);
+    },
+    [activeValue, disabled, max],
+  );
+
+  return (
+    <div
+      data-slot="style-guide-color-hue"
+      className={cn(
+        "relative w-full",
+        disabled && "cursor-not-allowed opacity-60",
+      )}
+    >
+      <div
+        data-slot="style-guide-color-hue-rail"
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 top-1/2 h-px -translate-y-1/2"
+        style={{ background: railBackground }}
+      />
+      <div
+        aria-label={label}
+        aria-valuemax={max}
+        aria-valuemin={0}
+        aria-valuenow={activeValue}
+        className={cn(
+          "relative h-[18px] w-full touch-none cursor-pointer select-none [--slider-active-color:var(--foreground)] [--slider-track-color:transparent]",
+          disabled && "cursor-not-allowed",
+        )}
+        data-slot="slider"
+        data-variant="continuous"
+        onKeyDown={handleKeyDown}
+        onPointerDown={beginDrag}
+        ref={sliderRef}
+        role="slider"
+        tabIndex={disabled ? -1 : 0}
+      >
+        <div
+          className="group/slider-control relative flex h-[18px] w-full touch-none items-center select-none"
+          data-orientation="horizontal"
+          data-slot="slider-control"
+        >
+          <div
+            className="group/slider-track relative h-px w-full grow overflow-visible rounded-full bg-[color:var(--slider-track-color)] select-none"
+            data-slot="slider-track"
+          />
+          <div
+            className="group/slider-thumb absolute top-1/2 block size-[9px] -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full select-none before:absolute before:top-1/2 before:left-1/2 before:block before:size-[18px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']"
+            data-dragging={isDragging ? "" : undefined}
+            data-slot="slider-thumb"
+            style={{ left: `${valuePercent}%` }}
+          >
+            <span
+              aria-hidden
+              className={cn(
+                "pointer-events-none absolute inset-0 block rounded-full bg-[color:var(--slider-active-color)] transition-[scale,background-color] duration-200 ease-out motion-reduce:transition-none",
+                disabled
+                  ? null
+                  : "group-hover/slider-thumb:scale-[1.4] group-data-[dragging]/slider-thumb:scale-[1.4]",
+              )}
+              data-slot="slider-dot"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ui/components/controls/color/color-opacity-input.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "../../primitives";
+import type { ControlChangeMeta } from "../control-types";
+
+export function parseOpacityValue(opacity: number | undefined): number {
+  return Math.min(100, Math.max(0, Math.round(opacity ?? 100)));
+}
+
+function normalizeOpacityInput(value: string): number {
+  const parsedValue = Number.parseFloat(value);
+
+  return Number.isFinite(parsedValue)
+    ? Math.min(100, Math.max(0, Math.round(parsedValue)))
+    : 100;
+}
+
+export function ColorOpacityInput({
+  label,
+  name,
+  onOpacityChange,
+  opacity,
+}: {
+  label: string;
+  name?: string;
+  onOpacityChange: (nextOpacity: number, meta?: ControlChangeMeta) => void;
+  opacity: number;
+}): React.JSX.Element {
+  const committedOpacity = String(parseOpacityValue(opacity));
+  const [draftOpacity, setDraftOpacity] = React.useState(committedOpacity);
+
+  React.useEffect(() => {
+    setDraftOpacity(committedOpacity);
+  }, [committedOpacity]);
+
+  function commitOpacity(nextDraft = draftOpacity): void {
+    const trimmedDraft = nextDraft.trim();
+
+    if (trimmedDraft === "" || !Number.isFinite(Number.parseFloat(trimmedDraft))) {
+      setDraftOpacity(committedOpacity);
+      return;
+    }
+
+    const nextOpacity = normalizeOpacityInput(trimmedDraft);
+
+    setDraftOpacity(String(nextOpacity));
+
+    if (nextOpacity !== parseOpacityValue(opacity)) {
+      onOpacityChange(nextOpacity);
+    }
+  }
+
+  return (
+    <InputGroup className="w-14 flex-none rounded-l-none [&:not(:focus-within):hover]:!border-[color:color-mix(in_oklab,var(--border)_20%,transparent)] [&:not(:focus-within):hover]:text-[color:var(--foreground)]">
+      <InputGroupInput
+        aria-label={`${label} opacity`}
+        autoComplete="off"
+        className="pl-2 pr-1 text-right font-mono"
+        inputMode="numeric"
+        name={name}
+        onBlur={() => commitOpacity()}
+        onChange={(event) => setDraftOpacity(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitOpacity(event.currentTarget.value);
+            event.currentTarget.blur();
+            return;
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setDraftOpacity(committedOpacity);
+            event.currentTarget.blur();
+          }
+        }}
+        type="text"
+        value={draftOpacity}
+      />
+      <InputGroupAddon align="inline-end" className="pr-1.5 pl-0">
+        <InputGroupText className="group-hover/input-group:text-[color:var(--foreground)]">
+          %
+        </InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}