@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,192 @@
+"use client";
+
+export { ActionsControl, ActionsControl as Actions } from "./actions";
+export type {
+  ActionControlIconName,
+  ActionControlObjectOption,
+  ActionControlOption,
+  ActionsControlProps as ActionsProps,
+  ActionsControlProps,
+} from "./actions";
+export {
+  AnchorGridControl,
+  AnchorGridControl as AnchorGrid,
+} from "./anchor-grid";
+export type {
+  AnchorGridControlProps,
+  AnchorGridControlProps as AnchorGridProps,
+  AnchorGridValue,
+} from "./anchor-grid";
+export {
+  CheckboxControl,
+  CheckboxControl as Checkbox,
+  SwitchControl,
+  SwitchControl as Switch,
+} from "./boolean";
+export type {
+  CheckboxControlProps,
+  CheckboxControlProps as CheckboxProps,
+  SwitchControlProps,
+  SwitchControlProps as SwitchProps,
+} from "./boolean";
+export {
+  CodeTextareaControl,
+  CodeTextareaControl as CodeTextarea,
+} from "./code-textarea";
+export type {
+  CodeTextareaControlProps,
+  CodeTextareaControlProps as CodeTextareaProps,
+} from "./code-textarea";
+export {
+  ColorControl,
+  ColorControl as Color,
+  ColorOpacity,
+  ColorOpacityControl,
+  ColorValueControl,
+  ColorValueControl as ColorValue,
+  DEFAULT_COLOR_FORMAT_MODE,
+  getColorSurfaceModel,
+  getColorSurfaceSliderConfig,
+  getColorSurfaceStyle,
+  getColorSurfaceThumbPosition,
+  getSurfaceHsvColor,
+  PaletteControl,
+  PaletteControl as Palette,
+} from "./color";
+export type {
+  ColorFormatMode,
+  ColorControlInput,
+  ColorControlInputPair,
+  ColorControlProps,
+  ColorControlProps as ColorProps,
+  ColorOpacityControlProps,
+  ColorOpacityValue,
+  ColorSurfaceModel,
+  PaletteColorFamily,
+  PaletteControlChangeMeta,
+  PaletteControlProps,
+  PaletteControlProps as PaletteProps,
+  PaletteControlValue,
+  PaletteShadeStep,
+} from "./color";
+export {
+  PALETTE_SHADE_STEPS,
+  STYLE_GUIDE_PRIMARY_FAMILY_OPTIONS,
+  TAILWIND_COLOR_PALETTE,
+  getPaletteHex,
+} from "./color";
+export {
+  ChannelMixerControl,
+  ChannelMixerControl as ChannelMixer,
+} from "./channel-mixer";
+export type {
+  ChannelMixerControlProps,
+  ChannelMixerControlProps as ChannelMixerProps,
+  ChannelMixerValues,
+} from "./channel-mixer";
+export { createControlHistoryGroupId } from "./control-types";
+export type {
+  ControlChangeHistoryMode,
+  ControlChangeMeta,
+  ControlOption,
+  ControlValueChangeHandler,
+} from "./control-types";
+export type {
+  CurveChannel,
+  CurvePoint,
+  GradientStop,
+  GradientType,
+  MixerChannel,
+} from "./control-types";
+export { CurvesControl, CurvesControl as Curves, getCurvePointAtX } from "./curves";
+export type {
+  CurveInterpolation,
+  CurvesControlProps,
+  CurvesControlProps as CurvesProps,
+  CurvesControlVariant,
+} from "./curves";
+export { FileDropControl, FileDropControl as FileDrop } from "./file-drop";
+export type {
+  FileDropControlProps,
+  FileDropControlProps as FileDropProps,
+  FileDropPreview,
+} from "./file-drop";
+export {
+  FontPickerControl,
+  FontPickerControl as FontPicker,
+  getDefaultFontPickerFontId,
+  getFontPickerCatalog,
+  getFontPickerFontById,
+  resolveFontPickerFontId,
+} from "./font-picker";
+export type {
+  FontPickerControlProps,
+  FontPickerControlProps as FontPickerProps,
+  FontPickerFontCatalogEntry,
+  FontPickerFontCategory,
+  FontPickerFontFilterValue,
+  FontPickerLetterSpacingPreset,
+  FontPickerLineHeightPreset,
+  FontPickerTextCasePreset,
+  FontPickerValue,
+} from "./font-picker";
+export { GradientControl, GradientControl as Gradient } from "./gradient";
+export type {
+  GradientControlProps,
+  GradientControlProps as GradientProps,
+} from "./gradient";
+export {
+  ImagePickerControl,
+  ImagePickerControl as ImagePicker,
+} from "./image-picker";
+export type {
+  ImagePickerControlProps,
+  ImagePickerControlProps as ImagePickerProps,
+  ImagePickerItem,
+} from "./image-picker";
+export {
+  RangeSliderControl,
+  RangeSliderControl as RangeSlider,
+} from "./range-slider";
+export type {
+  RangeSliderControlProps,
+  RangeSliderControlProps as RangeSliderProps,
+} from "./range-slider";
+export {
+  RangeInputControl,
+  RangeInputControl as RangeInput,
+} from "./range-input";
+export type {
+  RangeInputControlProps,
+  RangeInputControlProps as RangeInputProps,
+} from "./range-input";
+export { SegmentedControl, SegmentedControl as Segmented } from "./segmented";
+export type {
+  SegmentedControlOption,
+  SegmentedControlProps,
+  SegmentedControlProps as SegmentedProps,
+  SegmentedControlVariant,
+} from "./segmented";
+export { SelectControl, SelectControl as Select, StaticSelect } from "./select";
+export type {
+  SelectControlProps,
+  SelectControlProps as SelectProps,
+} from "./select";
+export { SliderControl, SliderControl as Slider } from "./slider";
+export type {
+  SliderControlProps,
+  SliderControlProps as SliderProps,
+} from "./slider";
+export { TextInputControl, TextInputControl as TextInput } from "./text-input";
+export type {
+  TextInputControlProps,
+  TextInputControlProps as TextInputProps,
+} from "./text-input";
+export { VectorControl, VectorControl as Vector } from "./vector";
+export type {
+  VectorControlProps,
+  VectorControlProps as VectorProps,
+  VectorControlValue,
+  VectorControlValue as VectorValue,
+  VectorPadVariant,
+} from "./vector";

package/templates/ui/components/controls/range-input/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { RangeInputControl } from "./range-input-control";
+export type { RangeInputControlProps } from "./range-input-control";

package/templates/ui/components/controls/range-input/range-input-control.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field, Input } from "../../primitives";
+import { type ControlValueChangeHandler } from "../control-types";
+import { cn } from "../../../lib/utils";
+
+export type RangeInputControlProps = {
+  defaultValue?: { end: string; start: string };
+  end: string;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<{ start: string; end: string }>;
+  start: string;
+};
+
+const RANGE_FULL_WIDTH_VALUE_LENGTH = 7;
+
+function shouldUseFullWidthRangeInputs(start: string, end: string): boolean {
+  return Math.max(start.length, end.length) > RANGE_FULL_WIDTH_VALUE_LENGTH;
+}
+
+function RangeInputs({
+  className,
+  end,
+  name,
+  onCancel,
+  onCommit,
+  onDraftChange,
+  start,
+}: RangeInputControlProps & {
+  className?: string;
+  onCancel: () => void;
+  onCommit: () => void;
+  onDraftChange: (nextValue: { start: string; end: string }) => void;
+}): React.JSX.Element {
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onCommit();
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onCancel();
+      event.currentTarget.blur();
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-1.5",
+        className,
+      )}
+    >
+      <Input
+        aria-label={`${name} start`}
+        className="font-mono"
+        onBlur={onCommit}
+        onChange={(event) =>
+          onDraftChange({ end, start: event.target.value })
+        }
+        onKeyDown={handleKeyDown}
+        size="default"
+        value={start}
+      />
+      <Input
+        aria-label={`${name} end`}
+        className="font-mono"
+        onBlur={onCommit}
+        onChange={(event) =>
+          onDraftChange({ end: event.target.value, start })
+        }
+        onKeyDown={handleKeyDown}
+        size="default"
+        value={end}
+      />
+    </div>
+  );
+}
+
+export function RangeInputControl({
+  defaultValue,
+  end,
+  name,
+  onValueChange,
+  start,
+}: RangeInputControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState({ end, start });
+  const committedValueRef = React.useRef({ end, start });
+  const defaultValueRef = React.useRef(defaultValue ?? { end, start });
+
+  React.useEffect(() => {
+    committedValueRef.current = { end, start };
+    setCurrentValue({ end, start });
+  }, [end, start]);
+
+  React.useEffect(() => {
+    defaultValueRef.current = defaultValue ?? { end, start };
+  }, [defaultValue, end, start]);
+
+  function updateDraft(nextValue: { start: string; end: string }): void {
+    setCurrentValue(nextValue);
+  }
+
+  function getCommittedValue(): { start: string; end: string } {
+    const nextValue = {
+      end:
+        currentValue.end.trim() === ""
+          ? defaultValueRef.current.end
+          : currentValue.end,
+      start:
+        currentValue.start.trim() === ""
+          ? defaultValueRef.current.start
+          : currentValue.start,
+    };
+
+    return nextValue;
+  }
+
+  function commitValue(): void {
+    const nextValue = getCommittedValue();
+
+    setCurrentValue(nextValue);
+
+    if (
+      nextValue.start !== committedValueRef.current.start ||
+      nextValue.end !== committedValueRef.current.end
+    ) {
+      onValueChange?.(nextValue);
+    }
+  }
+
+  function cancelDraft(): void {
+    setCurrentValue(committedValueRef.current);
+  }
+
+  if (shouldUseFullWidthRangeInputs(start, end)) {
+    return (
+      <Field className="h-fit min-w-0 gap-2">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+        <RangeInputs
+          className="w-full"
+          end={currentValue.end}
+          name={name}
+          onCancel={cancelDraft}
+          onCommit={commitValue}
+          onDraftChange={updateDraft}
+          start={currentValue.start}
+        />
+      </Field>
+    );
+  }
+
+  return (
+    <Field className="h-fit min-w-0 items-center justify-between gap-3" orientation="horizontal">
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <RangeInputs
+        className="w-1/2 shrink-0"
+        end={currentValue.end}
+        name={name}
+        onCancel={cancelDraft}
+        onCommit={commitValue}
+        onDraftChange={updateDraft}
+        start={currentValue.start}
+      />
+    </Field>
+  );
+}

package/templates/ui/components/controls/range-slider/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { RangeSliderControl } from "./range-slider-control";
+export type { RangeSliderControlProps } from "./range-slider-control";

package/templates/ui/components/controls/range-slider/range-slider-control.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  EditableSliderValueLabel,
+  Field,
+  Slider,
+} from "../../primitives";
+import { ControlFieldLabel } from "../../control-layout";
+import {
+  formatRangeSliderValue,
+  parseRangeSliderDraft,
+} from "./range-slider-value";
+import { applySliderValueLabelUnit } from "../slider/slider-value";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+} from "../control-types";
+
+export type RangeSliderControlProps = {
+  baseValue?: readonly [number, number] | readonly number[];
+  disabled?: boolean;
+  markerCount?: number;
+  max?: number;
+  min?: number;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<readonly number[]>;
+  step?: number;
+  unit?: string;
+  value: readonly [number, number] | readonly number[];
+  valueLabel?: string;
+  variant?: "continuous" | "discrete";
+};
+
+export function RangeSliderControl({
+  baseValue,
+  disabled = false,
+  markerCount,
+  max = 100,
+  min = 0,
+  name,
+  onValueChange,
+  step = 0.1,
+  unit,
+  value,
+  valueLabel,
+  variant = "continuous",
+}: RangeSliderControlProps): React.JSX.Element {
+  const [rangeValue, setRangeValue] = React.useState<readonly number[]>(value);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+  const resolvedValueLabel = valueLabel
+    ? applySliderValueLabelUnit(valueLabel, unit)
+    : formatRangeSliderValue(rangeValue, unit);
+
+  React.useEffect(() => {
+    setRangeValue(value);
+  }, [value]);
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`range-slider:${name}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function finishLiveHistoryGroup(): void {
+    liveHistoryGroupRef.current = null;
+  }
+
+  function updateValue(
+    nextValue: number | readonly number[],
+    meta?: ControlChangeMeta,
+  ): void {
+    const resolvedValue =
+      typeof nextValue === "number" ? [nextValue, nextValue] : [...nextValue];
+
+    setRangeValue(resolvedValue);
+    onValueChange?.(resolvedValue, meta);
+  }
+
+  function commitValueLabel(nextValueLabel: string): void {
+    const nextValue = parseRangeSliderDraft(nextValueLabel, { max, min, step });
+
+    if (!nextValue) {
+      return;
+    }
+
+    setRangeValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  return (
+    <Field className="min-w-0 gap-1!" data-disabled={disabled}>
+      <div className="flex w-full min-w-0 items-center justify-between gap-3">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+        <EditableSliderValueLabel
+          ariaLabel={`${name} value`}
+          disabled={disabled}
+          onCommit={commitValueLabel}
+          valueLabel={resolvedValueLabel}
+        />
+      </div>
+      <Slider
+        className="w-full"
+        markerCount={markerCount}
+        max={max}
+        min={min}
+        disabled={disabled}
+        onValueChange={(nextValue) => updateValue(nextValue, getLiveHistoryMeta())}
+        onValueCommitted={finishLiveHistoryGroup}
+        resetValue={baseValue ?? value}
+        step={step}
+        value={rangeValue}
+        variant={variant}
+      />
+    </Field>
+  );
+}

package/templates/ui/components/controls/range-slider/range-slider-value.ts

@@ -0,0 +1,61 @@
+export function formatRangeSliderValue(
+  value: readonly number[],
+  unit?: string,
+): string {
+  const formatValue = (item: number): string => `${Math.round(item)}${unit ?? ""}`;
+
+  if (value.length >= 2 && value[0] === value[1]) {
+    return formatValue(value[0] ?? 0);
+  }
+
+  return value.map(formatValue).join(" – ");
+}
+
+export function snapRangeSliderValue(
+  value: number,
+  {
+    max,
+    min,
+    step,
+  }: {
+    max: number;
+    min: number;
+    step: number;
+  },
+): number {
+  const clampedValue = Math.min(max, Math.max(min, value));
+  const steppedValue = Math.round((clampedValue - min) / step) * step + min;
+
+  return Number(steppedValue.toFixed(4));
+}
+
+export function parseRangeSliderDraft(
+  draftValue: string,
+  {
+    max,
+    min,
+    step,
+  }: {
+    max: number;
+    min: number;
+    step: number;
+  },
+): [number, number] | null {
+  const normalizedDraftValue = draftValue.replace(/(\d)\s*-\s*(?=\d)/g, "$1 ");
+  const values = Array.from(
+    normalizedDraftValue.matchAll(/-?\d+(?:[.,]\d+)?/g),
+    ([match]) => Number(match.replace(",", ".")),
+  ).filter(Number.isFinite);
+
+  if (values.length === 0) {
+    return null;
+  }
+
+  const [first = min, second = first] = values;
+  const sortedValues = [
+    snapRangeSliderValue(first, { max, min, step }),
+    snapRangeSliderValue(second, { max, min, step }),
+  ].sort((left, right) => left - right) as [number, number];
+
+  return sortedValues;
+}

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

@@ -0,0 +1,8 @@
+"use client";
+
+export { SegmentedControl } from "./segmented-control";
+export type {
+  SegmentedControlOption,
+  SegmentedControlProps,
+  SegmentedControlVariant,
+} from "./segmented-control";

package/templates/ui/components/controls/segmented/segmented-control.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field, ToggleGroup, ToggleGroupItem } from "../../primitives";
+import type { ControlOption } from "../control-types";
+
+export type SegmentedControlVariant = "default" | "dots";
+
+export type SegmentedControlOption = ControlOption & {
+  indicatorColor?: string;
+};
+
+export type SegmentedControlProps = {
+  ariaLabel?: string;
+  name: string;
+  onValueChange?: (value: string) => void;
+  options: readonly SegmentedControlOption[];
+  value?: string;
+  variant?: SegmentedControlVariant;
+};
+
+export function SegmentedControl({
+  ariaLabel,
+  name,
+  onValueChange,
+  options,
+  value,
+  variant = "default",
+}: SegmentedControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(
+    () => value ?? options[0]?.value ?? "",
+  );
+  const selectedValue = value ?? currentValue;
+
+  React.useEffect(() => {
+    if (typeof value !== "undefined") {
+      setCurrentValue(value);
+      return;
+    }
+
+    if (!options.some((option) => option.value === currentValue)) {
+      setCurrentValue(options[0]?.value ?? "");
+    }
+  }, [currentValue, options, value]);
+
+  function updateValue(nextValue: string): void {
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <ToggleGroup
+        aria-label={ariaLabel ?? name}
+        className="w-full"
+        onValueChange={(nextValue) => {
+          const [selectedValue] = nextValue;
+
+          if (selectedValue) {
+            updateValue(selectedValue);
+          }
+        }}
+        size="default"
+        value={selectedValue ? [selectedValue] : []}
+        variant="outline"
+      >
+        {options.map((option) => (
+          <ToggleGroupItem
+            aria-label={option.label}
+            className={
+              variant === "dots" ? "min-w-0 flex-1 gap-[7px]" : "min-w-0 flex-1"
+            }
+            key={option.value}
+            value={option.value}
+          >
+            {variant === "dots" ? (
+              <span
+                aria-hidden="true"
+                className="size-2 shrink-0 rounded-full"
+                style={{
+                  backgroundColor: option.indicatorColor ?? "currentColor",
+                }}
+              />
+            ) : null}
+            {option.label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </Field>
+  );
+}

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

@@ -0,0 +1,4 @@
+"use client";
+
+export { SelectControl, StaticSelect } from "./select-control";
+export type { SelectControlProps } from "./select-control";