@pixel-point/toolcraft 0.0.2

package/templates/ui/components/controls/gradient/gradient-stop-list.tsx

@@ -0,0 +1,400 @@
+import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import {
+  Button,
+  Field,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "../../primitives";
+import { selectedItemSurfaceClassName } from "../../primitives/selection-state";
+import { cn } from "../../../lib/utils";
+
+import {
+  formatStopPosition,
+  maxGradientStops,
+  minGradientStops,
+  normalizeStopOpacity,
+  parseStopOpacity,
+  parseStopPosition,
+  type IndexedGradientStop,
+} from "./gradient-control-utils";
+import { ColorValueControl } from "../color";
+import { ControlFieldLabel } from "../../control-layout";
+
+function GradientStopsHeader({
+  canAdd,
+  onAdd,
+}: {
+  canAdd: boolean;
+  onAdd: () => void;
+}): React.JSX.Element {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <ControlFieldLabel>Stops</ControlFieldLabel>
+      <Button
+        aria-label="Add gradient stop"
+        disabled={!canAdd}
+        onClick={onAdd}
+        size="icon-sm"
+        type="button"
+        variant="ghost"
+      >
+        <PlusIcon />
+      </Button>
+    </div>
+  );
+}
+
+function GradientStopColorControls({
+  onColorChange,
+  onOpacityChange,
+  stop,
+  stopLabel,
+  stopName,
+}: {
+  onColorChange: (nextColor: string) => void;
+  onOpacityChange: (nextOpacity: number) => void;
+  stop: IndexedGradientStop;
+  stopLabel: string;
+  stopName: string;
+}): React.JSX.Element {
+  return (
+    <ColorValueControl
+      className="min-w-0"
+      color={stop.color}
+      inputName={`${stopName}-color`}
+      label={stopLabel}
+      nativeInputName={`${stopName}-native-color`}
+      onColorChange={onColorChange}
+    >
+      <GradientStopOpacityInput
+        onOpacityChange={onOpacityChange}
+        stop={stop}
+        stopLabel={stopLabel}
+        stopName={stopName}
+      />
+    </ColorValueControl>
+  );
+}
+
+function GradientStopOpacityInput({
+  onOpacityChange,
+  stop,
+  stopLabel,
+  stopName,
+}: {
+  onOpacityChange: (nextOpacity: number) => void;
+  stop: IndexedGradientStop;
+  stopLabel: string;
+  stopName: string;
+}): React.JSX.Element {
+  const committedOpacity = String(parseStopOpacity(stop.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 = normalizeStopOpacity(trimmedDraft);
+
+    setDraftOpacity(String(nextOpacity));
+
+    if (nextOpacity !== parseStopOpacity(stop.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={`${stopLabel} opacity`}
+        autoComplete="off"
+        className="pl-[5px] pr-1 text-right font-mono"
+        inputMode="numeric"
+        name={`${stopName}-opacity`}
+        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>
+  );
+}
+
+function getStopPositionInputValue(position: string): string {
+  return String(Math.round(parseStopPosition(position) * 100));
+}
+
+function getNormalizedStopPositionFromInputValue(value: string): string | null {
+  const parsedValue = Number.parseFloat(value);
+
+  if (!Number.isFinite(parsedValue)) {
+    return null;
+  }
+
+  return formatStopPosition(parsedValue / 100);
+}
+
+function GradientStopPositionInput({
+  onPositionChange,
+  stop,
+  stopLabel,
+  stopName,
+}: {
+  onPositionChange: (nextPosition: string) => void;
+  stop: IndexedGradientStop;
+  stopLabel: string;
+  stopName: string;
+}): React.JSX.Element {
+  const committedPosition = formatStopPosition(parseStopPosition(stop.position));
+  const committedInputValue = getStopPositionInputValue(stop.position);
+  const [draftValue, setDraftValue] = React.useState(committedInputValue);
+  const skipNextBlurCommitRef = React.useRef(false);
+
+  React.useEffect(() => {
+    setDraftValue(committedInputValue);
+  }, [committedInputValue]);
+
+  function commitPosition(nextValue = draftValue): void {
+    const nextPosition = getNormalizedStopPositionFromInputValue(nextValue);
+
+    if (nextPosition === null) {
+      setDraftValue(committedInputValue);
+      return;
+    }
+
+    setDraftValue(getStopPositionInputValue(nextPosition));
+
+    if (nextPosition !== committedPosition) {
+      onPositionChange(nextPosition);
+    }
+  }
+
+  return (
+    <InputGroup className="min-w-0">
+      <InputGroupInput
+        aria-label={`${stopLabel} position`}
+        autoComplete="off"
+        className="pl-[5px] pr-1 text-left font-mono"
+        inputMode="numeric"
+        name={`${stopName}-position`}
+        onBlur={() => {
+          if (skipNextBlurCommitRef.current) {
+            skipNextBlurCommitRef.current = false;
+            return;
+          }
+
+          commitPosition();
+        }}
+        onChange={(event) => setDraftValue(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitPosition(event.currentTarget.value);
+            skipNextBlurCommitRef.current = true;
+            event.currentTarget.blur();
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setDraftValue(committedInputValue);
+            skipNextBlurCommitRef.current = true;
+            event.currentTarget.blur();
+          }
+        }}
+        type="text"
+        value={draftValue}
+      />
+      <InputGroupAddon align="inline-end" className="pr-1.5 pl-0">
+        <InputGroupText className="group-hover/input-group:text-[color:var(--foreground)]">
+          %
+        </InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}
+
+function GradientStopRowSelectionSurface({
+  isSelected,
+}: {
+  isSelected: boolean;
+}): React.JSX.Element {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute -inset-[5px] rounded-[7px] opacity-0 data-[selected=true]:opacity-100",
+        selectedItemSurfaceClassName,
+      )}
+      data-selected={isSelected}
+      data-slot="gradient-stop-row-surface"
+    />
+  );
+}
+
+function GradientStopRow({
+  canRemove,
+  isSelected,
+  onColorChange,
+  onOpacityChange,
+  onPositionChange,
+  onRemove,
+  onSelect,
+  stop,
+}: {
+  canRemove: boolean;
+  isSelected: boolean;
+  onColorChange: (nextColor: string) => void;
+  onOpacityChange: (nextOpacity: number) => void;
+  onPositionChange: (nextPosition: string) => void;
+  onRemove: () => void;
+  onSelect: () => void;
+  stop: IndexedGradientStop;
+}): React.JSX.Element {
+  const stopLabel = `Stop ${stop.originalIndex + 1}`;
+  const stopName = `gradient-stop-${stop.originalIndex + 1}`;
+
+  function selectAndChangeColor(nextColor: string): void {
+    onSelect();
+    onColorChange(nextColor);
+  }
+
+  function selectAndChangeOpacity(nextOpacity: number): void {
+    onSelect();
+    onOpacityChange(nextOpacity);
+  }
+
+  function selectAndChangePosition(nextPosition: string): void {
+    onSelect();
+    onPositionChange(nextPosition);
+  }
+
+  return (
+    <Field
+      className="min-w-0 rounded-none p-0"
+      data-selected={isSelected}
+      onFocusCapture={onSelect}
+      onPointerDownCapture={onSelect}
+      orientation="horizontal"
+    >
+      <div className="min-w-0 flex-1 py-1" data-slot="gradient-stop-row-gutter">
+        <div className="relative min-w-0" data-slot="gradient-stop-row-content">
+          <GradientStopRowSelectionSurface isSelected={isSelected} />
+          <div
+            className="relative grid min-w-0 grid-cols-[3.5rem_minmax(0,1fr)_1.5rem] items-center gap-[6px]"
+            data-slot="gradient-stop-row-grid"
+          >
+            <GradientStopPositionInput
+              onPositionChange={selectAndChangePosition}
+              stop={stop}
+              stopLabel={stopLabel}
+              stopName={stopName}
+            />
+            <GradientStopColorControls
+              onColorChange={selectAndChangeColor}
+              onOpacityChange={selectAndChangeOpacity}
+              stop={stop}
+              stopLabel={stopLabel}
+              stopName={stopName}
+            />
+            <Button
+              aria-label={`Remove ${stopLabel.toLowerCase()}`}
+              disabled={!canRemove}
+              onClick={onRemove}
+              size="icon-sm"
+              type="button"
+              variant="ghost"
+            >
+              <MinusIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Field>
+  );
+}
+
+export function GradientStopsList({
+  onAdd,
+  onColorChange,
+  onOpacityChange,
+  onPositionChange,
+  onRemove,
+  onSelect,
+  selectedIndex,
+  stops,
+}: {
+  onAdd: () => void;
+  onColorChange: (index: number, nextColor: string) => void;
+  onOpacityChange: (index: number, nextOpacity: number) => void;
+  onPositionChange: (index: number, nextPosition: string) => void;
+  onRemove: (index: number) => void;
+  onSelect: (index: number) => void;
+  selectedIndex: number | null;
+  stops: readonly IndexedGradientStop[];
+}): React.JSX.Element {
+  const canAdd = stops.length < maxGradientStops;
+  const canRemove = stops.length > minGradientStops;
+
+  return (
+    <div
+      className="flex min-w-0 flex-col gap-1"
+      data-slot="gradient-stops-list"
+    >
+      <GradientStopsHeader canAdd={canAdd} onAdd={onAdd} />
+      <div
+        className="flex min-w-0 flex-col gap-[2px]"
+        data-slot="gradient-stops-list-rows"
+      >
+        {stops.map((stop) => (
+          <GradientStopRow
+            canRemove={canRemove}
+            isSelected={selectedIndex === stop.originalIndex}
+            key={stop.originalIndex}
+            onColorChange={(nextColor) =>
+              onColorChange(stop.originalIndex, nextColor)
+            }
+            onOpacityChange={(nextOpacity) =>
+              onOpacityChange(stop.originalIndex, nextOpacity)
+            }
+            onPositionChange={(nextPosition) =>
+              onPositionChange(stop.originalIndex, nextPosition)
+            }
+            onRemove={() => onRemove(stop.originalIndex)}
+            onSelect={() => onSelect(stop.originalIndex)}
+            stop={stop}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/ui/components/controls/gradient/gradient-toolbar.tsx

@@ -0,0 +1,152 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  Field,
+} from "../../primitives";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../primitives";
+import { useRef, useState } from "react";
+
+import type { GradientType } from "../control-types";
+import { ControlFieldLabel } from "../../control-layout";
+import {
+  gradientTypeOptions,
+  normalizeGradientAngle,
+} from "./gradient-control-utils";
+
+function GradientTypeSelect({
+  onTypeChange,
+  type,
+}: {
+  onTypeChange: (nextType: GradientType) => void;
+  type: GradientType;
+}): React.JSX.Element {
+  const selectedOption =
+    gradientTypeOptions.find((option) => option.value === type) ??
+    gradientTypeOptions[0];
+
+  return (
+    <Select
+      items={gradientTypeOptions}
+      onValueChange={(nextValue) => onTypeChange(nextValue as GradientType)}
+      value={type}
+    >
+      <SelectTrigger className="w-full justify-between rounded-lg">
+        <SelectValue>{() => selectedOption.label}</SelectValue>
+      </SelectTrigger>
+      <SelectContent align="start" alignItemWithTrigger={false}>
+        <SelectGroup>
+          {gradientTypeOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function GradientToolbar({
+  angle,
+  name,
+  onAngleChange,
+  onTypeChange,
+  type,
+}: {
+  angle: number;
+  name: string;
+  onAngleChange: (nextAngle: number) => void;
+  onTypeChange: (nextType: GradientType) => void;
+  type: GradientType;
+}): React.JSX.Element {
+  const [angleDraft, setAngleDraft] = useState<string | null>(null);
+  const angleBeforeEditRef = useRef(angle);
+  const displayedAngle = angleDraft ?? String(angle);
+
+  function handleAngleFocus(): void {
+    angleBeforeEditRef.current = angle;
+    setAngleDraft(String(angle));
+  }
+
+  function handleAngleChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setAngleDraft(event.target.value);
+  }
+
+  function handleAngleBlur(): void {
+    const nextDraft = angleDraft?.trim() ?? "";
+
+    if (nextDraft === "" || !Number.isFinite(Number.parseFloat(nextDraft))) {
+      onAngleChange(angleBeforeEditRef.current);
+      setAngleDraft(null);
+      return;
+    }
+
+    const nextAngle = normalizeGradientAngle(nextDraft);
+
+    if (nextAngle !== angle) {
+      onAngleChange(nextAngle);
+    }
+
+    setAngleDraft(null);
+  }
+
+  return (
+    <div
+      className="grid min-w-0 gap-x-2.5 gap-y-3"
+      data-slot="gradient-toolbar-grid"
+      style={{ gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }}
+    >
+      <Field className="h-fit min-w-0 gap-2" orientation="vertical">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+        <div className="min-w-0 w-full">
+          <GradientTypeSelect onTypeChange={onTypeChange} type={type} />
+        </div>
+      </Field>
+      <Field className="h-fit min-w-0 gap-2" orientation="vertical">
+        <ControlFieldLabel>Angle</ControlFieldLabel>
+        <div className="min-w-0 w-full">
+          <InputGroup>
+            <InputGroupInput
+              aria-label="Gradient angle"
+              autoComplete="off"
+              className="text-left font-mono"
+              inputMode="numeric"
+              name="gradient-angle"
+              onBlur={handleAngleBlur}
+              onChange={handleAngleChange}
+              onFocus={handleAngleFocus}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleAngleBlur();
+                  event.currentTarget.blur();
+                  return;
+                }
+
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setAngleDraft(String(angle));
+                  event.currentTarget.blur();
+                }
+              }}
+              type="text"
+              value={displayedAngle}
+            />
+            <InputGroupAddon align="inline-end" className="pr-1.5 pl-0">
+              <InputGroupText>°</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </Field>
+    </div>
+  );
+}

package/templates/ui/components/controls/gradient/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { GradientControl } from "./gradient-control";
+export type { GradientControlProps } from "./gradient-control";

package/templates/ui/components/controls/image-picker/image-picker-control.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field } from "../../primitives";
+import { cn } from "../../../lib/utils";
+
+type ImagePickerColumns = 2 | 3 | 4;
+
+export type ImagePickerItem = {
+  alt?: string;
+  src: string;
+  value: string;
+};
+
+export type ImagePickerControlProps = {
+  items?: readonly ImagePickerItem[];
+  name?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+};
+
+const defaultImageSrc =
+  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 220"%3E%3C/svg%3E';
+
+const defaultImagePickerItems = [
+  { alt: "Image 1", src: defaultImageSrc, value: "image-1" },
+  { alt: "Image 2", src: defaultImageSrc, value: "image-2" },
+  { alt: "Image 3", src: defaultImageSrc, value: "image-3" },
+  { alt: "Image 4", src: defaultImageSrc, value: "image-4" },
+  { alt: "Image 5", src: defaultImageSrc, value: "image-5" },
+  { alt: "Image 6", src: defaultImageSrc, value: "image-6" },
+  { alt: "Image 7", src: defaultImageSrc, value: "image-7" },
+  { alt: "Image 8", src: defaultImageSrc, value: "image-8" },
+] satisfies readonly ImagePickerItem[];
+
+const columnClassNames: Record<ImagePickerColumns, string> = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+
+function getInitialValue(
+  items: readonly ImagePickerItem[],
+  value: string | undefined,
+): string {
+  return value ?? items[0]?.value ?? "";
+}
+
+function getImagePickerColumns(itemCount: number): ImagePickerColumns {
+  if (itemCount === 2) {
+    return 2;
+  }
+
+  if (itemCount === 3 || itemCount === 6) {
+    return 3;
+  }
+
+  return 4;
+}
+
+export function ImagePickerControl({
+  items = defaultImagePickerItems,
+  name = "Image",
+  value,
+  onValueChange,
+}: ImagePickerControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(() =>
+    getInitialValue(items, value),
+  );
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setCurrentValue(value);
+      return;
+    }
+
+    setCurrentValue((previousValue) =>
+      items.some((item) => item.value === previousValue)
+        ? previousValue
+        : (items[0]?.value ?? ""),
+    );
+  }, [items, value]);
+
+  function updateValue(nextValue: string): void {
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  const columns = getImagePickerColumns(items.length);
+
+  return (
+    <Field className="min-w-0 !gap-[10px]">
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <div
+        className={cn(
+          "grid min-w-0 gap-[10px] overflow-visible",
+          columnClassNames[columns],
+        )}
+      >
+        {items.map((item) => {
+          const isSelected = item.value === currentValue;
+
+          return (
+            <button
+              aria-label={item.alt ?? item.value}
+              aria-pressed={isSelected}
+              className={cn(
+                "group/image-picker-item relative min-w-0 cursor-pointer rounded-lg border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] bg-[color:var(--muted)] p-0 outline-none transition-[border-color,background-color,box-shadow] duration-150 ease-out",
+                "hover:border-[color:color-mix(in_oklab,var(--border)_22%,transparent)] hover:bg-[color:var(--muted)]",
+                "focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklab,var(--ring)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
+                "data-[selected=true]:outline data-[selected=true]:outline-[1px] data-[selected=true]:outline-offset-2 data-[selected=true]:outline-[color:var(--border)] data-[selected=true]:[outline-style:solid]",
+              )}
+              data-selected={isSelected}
+              key={item.value}
+              onClick={() => updateValue(item.value)}
+              type="button"
+            >
+              <span
+                className={cn(
+                  "relative block w-full overflow-hidden rounded-[inherit] bg-[color:var(--muted)]",
+                  "aspect-[4/3]",
+                )}
+              >
+                <img
+                  alt=""
+                  className="h-full w-full object-cover"
+                  draggable={false}
+                  src={item.src}
+                />
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </Field>
+  );
+}

package/templates/ui/components/controls/image-picker/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+export { ImagePickerControl } from "./image-picker-control";
+export type {
+  ImagePickerControlProps,
+  ImagePickerItem,
+} from "./image-picker-control";