@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,223 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { cn } from "../../../lib/utils";
+import {
+  Field,
+  ScrollFade,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../primitives";
+import type { ControlOption } from "../control-types";
+import { useMeasuredElementWidth } from "../use-measured-element-width";
+
+export type SelectControlInput = {
+  name: string;
+  onValueChange?: (value: string) => void;
+  options: readonly ControlOption[];
+  value: string;
+};
+
+type StaticSelectSize = "sm" | "default" | "lg" | "xl";
+type SelectControlFieldLayout = "auto" | "stacked";
+
+type SelectControlSingleProps = SelectControlInput & {
+  inputs?: never;
+  inputsPerRow?: never;
+  layout?: SelectControlFieldLayout;
+};
+
+type SelectControlGroupProps = {
+  inputs: readonly SelectControlInput[];
+  inputsPerRow?: number;
+  layout?: never;
+};
+
+export type SelectControlProps =
+  | SelectControlSingleProps
+  | SelectControlGroupProps;
+
+const compactHorizontalFieldClassName = "h-fit min-w-0 items-center justify-between gap-3";
+const WIDE_SELECT_OPTION_LABEL_LENGTH = 32;
+
+function hasWideSelectContent(options: readonly ControlOption[]): boolean {
+  return options.some((option) => option.label.length >= WIDE_SELECT_OPTION_LABEL_LENGTH);
+}
+
+function isSelectControlGroupProps(
+  props: SelectControlProps,
+): props is SelectControlGroupProps {
+  return Array.isArray((props as SelectControlGroupProps).inputs);
+}
+
+function getInputsPerRow(inputsPerRow: number | undefined): number {
+  if (typeof inputsPerRow !== "number" || !Number.isFinite(inputsPerRow)) {
+    return 1;
+  }
+
+  return Math.min(2, Math.max(1, Math.floor(inputsPerRow)));
+}
+
+export function StaticSelect({
+  ariaLabel,
+  disabled,
+  onValueChange,
+  options,
+  popupMaxWidth,
+  scrollFadeValue = true,
+  size = "default",
+  triggerClassName,
+  value,
+}: {
+  ariaLabel?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  options: readonly ControlOption[];
+  popupMaxWidth?: number;
+  scrollFadeValue?: boolean;
+  size?: StaticSelectSize;
+  triggerClassName?: string;
+  value: string;
+}): React.JSX.Element {
+  const selected = options.find((option) => option.value === value) ?? options[0];
+  const shouldConstrainPopup = hasWideSelectContent(options);
+
+  return (
+    <Select
+      items={options.map((option) => ({ label: option.label, value: option.value }))}
+      onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
+      value={selected?.value}
+    >
+      <SelectTrigger
+        aria-label={ariaLabel}
+        className={cn("w-full justify-between", triggerClassName)}
+        disabled={disabled}
+        size={size}
+        title={selected?.label}
+      >
+        <SelectValue>
+          {() =>
+            scrollFadeValue ? (
+              <ScrollFade
+                className="no-scrollbar min-w-0"
+                containerClassName="min-w-0 flex-1"
+                preset="compact"
+                side="right"
+                watch={[selected?.label]}
+              >
+                <span className="block min-w-max whitespace-nowrap pr-2" title={selected?.label}>
+                  {selected?.label ?? ""}
+                </span>
+              </ScrollFade>
+            ) : (
+              <span className="block min-w-0 flex-1 whitespace-nowrap pr-2" title={selected?.label}>
+                {selected?.label ?? ""}
+              </span>
+            )
+          }
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent
+        align="end"
+        alignItemWithTrigger={false}
+        style={shouldConstrainPopup && popupMaxWidth ? { maxWidth: popupMaxWidth } : undefined}
+      >
+        <SelectGroup>
+          {options.map((item) => (
+            <SelectItem key={item.value} title={item.label} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+function SelectControlField({
+  layout = "auto",
+  name,
+  onValueChange,
+  options,
+  value,
+}: SelectControlInput & {
+  layout?: SelectControlFieldLayout;
+}): React.JSX.Element {
+  const fieldRef = React.useRef<HTMLDivElement>(null);
+  const popupMaxWidth = useMeasuredElementWidth(fieldRef);
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const selected = options.find((option) => option.value === currentValue) ?? options[0];
+  const hasLongSelectedValue =
+    (selected?.label.length ?? 0) >= WIDE_SELECT_OPTION_LABEL_LENGTH;
+  const isStacked = layout === "stacked" || hasLongSelectedValue;
+
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  function updateValue(nextValue: string): void {
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  return (
+    <Field
+      className={cn(
+        isStacked
+          ? "h-fit min-w-0 gap-2"
+          : compactHorizontalFieldClassName,
+      )}
+      orientation={isStacked ? "vertical" : "horizontal"}
+      ref={fieldRef}
+    >
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <div
+        className={cn(
+          "min-w-0",
+          isStacked ? "w-full" : "w-1/2 shrink-0",
+        )}
+      >
+        <StaticSelect
+          onValueChange={updateValue}
+          options={options}
+          popupMaxWidth={popupMaxWidth}
+          value={currentValue}
+        />
+      </div>
+    </Field>
+  );
+}
+
+export function SelectControl(
+  props: SelectControlProps,
+): React.JSX.Element {
+  if (isSelectControlGroupProps(props)) {
+    const inputsPerRow = getInputsPerRow(props.inputsPerRow);
+
+    return (
+      <div
+        className="grid min-w-0 gap-x-2.5 gap-y-3"
+        data-slot="select-control-grid"
+        style={{
+          gridTemplateColumns: `repeat(${inputsPerRow}, minmax(0, 1fr))`,
+        }}
+      >
+        {props.inputs.map((input, index) => (
+          <SelectControlField
+            key={`${input.name}-${index}`}
+            layout="stacked"
+            {...input}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return <SelectControlField {...props} />;
+}

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

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

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

@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  EditableSliderValueLabel,
+  Field,
+  getNumericValueLabelWidthReference,
+  Slider,
+} from "../../primitives";
+import { ControlFieldLabel } from "../../control-layout";
+import { cn } from "../../../lib/utils";
+import {
+  clampSliderValue,
+  applySliderValueLabelUnit,
+  formatSliderValueWithUnit,
+  getSliderControlValue,
+  parseSliderValueLabel,
+} from "./slider-value";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+} from "../control-types";
+
+export type SliderControlProps = {
+  baseValue?: number;
+  className?: string;
+  disabled?: boolean;
+  markerCount?: number;
+  max?: number;
+  min?: number;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<number>;
+  showFill?: boolean;
+  step?: number;
+  unit?: string;
+  value: number;
+  valueLabel?: string;
+  variant?: "continuous" | "discrete";
+};
+
+export function SliderControl({
+  baseValue,
+  className,
+  disabled = false,
+  markerCount,
+  max = 100,
+  min = 0,
+  name,
+  onValueChange,
+  showFill,
+  step = 1,
+  unit,
+  value,
+  valueLabel,
+  variant = "continuous",
+}: SliderControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  const displayValueLabel =
+    valueLabel && currentValue === value
+      ? applySliderValueLabelUnit(valueLabel, unit)
+      : formatSliderValueWithUnit(currentValue, step, unit);
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`slider:${name}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function finishLiveHistoryGroup(): void {
+    liveHistoryGroupRef.current = null;
+  }
+
+  function commitValue(nextValue: number, meta?: ControlChangeMeta): void {
+    const clampedValue = clampSliderValue(nextValue, min, max);
+
+    setCurrentValue(clampedValue);
+    onValueChange?.(clampedValue, meta);
+  }
+
+  function stepEditableValue(direction: -1 | 1, currentDraft: string): string | undefined {
+    const parsedDraftValue = parseSliderValueLabel(currentDraft);
+    const baseValue =
+      typeof parsedDraftValue === "number" ? parsedDraftValue : currentValue;
+    const nextValue = clampSliderValue(baseValue + direction * step, min, max);
+
+    commitValue(nextValue, getLiveHistoryMeta());
+
+    return formatSliderValueWithUnit(nextValue, step, unit);
+  }
+
+  return (
+    <Field className={cn("min-w-0 gap-1!", className)} data-disabled={disabled}>
+      <div className="flex w-full min-w-0 items-center justify-between gap-3">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+        <div className="inline-flex h-5 shrink-0 items-center gap-1.5">
+          <EditableSliderValueLabel
+            ariaLabel={`${name} value`}
+            disabled={disabled}
+            maxValueLabel={getNumericValueLabelWidthReference(
+              displayValueLabel,
+              { max, min },
+            )}
+            onCommit={(nextValueLabel) => {
+              const parsedValue = parseSliderValueLabel(nextValueLabel);
+
+              if (typeof parsedValue === "number") {
+                commitValue(parsedValue);
+              }
+
+              finishLiveHistoryGroup();
+            }}
+            onStep={stepEditableValue}
+            valueLabel={displayValueLabel}
+          />
+        </div>
+      </div>
+      <Slider
+        getAriaLabel={() => name}
+        markerCount={markerCount}
+        max={max}
+        min={min}
+        disabled={disabled}
+        onValueChange={(nextValue) => {
+          const resolvedValue = getSliderControlValue(nextValue);
+
+          if (typeof resolvedValue === "number") {
+            commitValue(resolvedValue, getLiveHistoryMeta());
+          }
+        }}
+        onValueCommitted={finishLiveHistoryGroup}
+        resetValue={typeof baseValue === "number" ? [baseValue] : undefined}
+        showFill={showFill}
+        step={step}
+        value={[currentValue]}
+        variant={variant}
+      />
+    </Field>
+  );
+}

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

@@ -0,0 +1,56 @@
+export function clampSliderValue(
+  value: number,
+  min: number,
+  max: number,
+): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function getDecimalPrecision(step: number): number {
+  return String(step).split(".")[1]?.length ?? 0;
+}
+
+export function formatSliderValue(value: number, step: number): string {
+  const decimals = getDecimalPrecision(step);
+  const rounded = Number(value.toFixed(decimals));
+
+  return String(rounded);
+}
+
+export function applySliderValueLabelUnit(
+  valueLabel: string,
+  unit?: string,
+): string {
+  if (!unit || typeof parseSliderValueLabel(valueLabel) !== "number") {
+    return valueLabel;
+  }
+
+  return valueLabel.replaceAll(/-?\d+(?:\.\d+)?/g, (match, offset) => {
+    const textAfterMatch = valueLabel.slice(offset + match.length).trimStart();
+
+    return textAfterMatch.startsWith(unit) ? match : `${match}${unit}`;
+  });
+}
+
+export function formatSliderValueWithUnit(
+  value: number,
+  step: number,
+  unit?: string,
+): string {
+  return applySliderValueLabelUnit(formatSliderValue(value, step), unit);
+}
+
+export function parseSliderValueLabel(valueLabel: string): number | undefined {
+  const match = valueLabel.match(/-?\d+(?:\.\d+)?/);
+  const parsedValue = match ? Number.parseFloat(match[0]) : Number.NaN;
+
+  return Number.isFinite(parsedValue) ? parsedValue : undefined;
+}
+
+export function getSliderControlValue(
+  nextValue: number | readonly number[],
+): number | undefined {
+  const resolvedValue = Array.isArray(nextValue) ? nextValue[0] : nextValue;
+
+  return typeof resolvedValue === "number" ? resolvedValue : undefined;
+}

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

@@ -0,0 +1,4 @@
+"use client";
+
+export { TextInputControl } from "./text-input-control";
+export type { TextInputControlProps } from "./text-input-control";

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

@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field, Input } from "../../primitives";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+} from "../control-types";
+
+export type TextInputControlInput = {
+  commitOnBlur?: boolean;
+  defaultValue?: string;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<string>;
+  value: string;
+};
+
+type TextInputControlSingleProps = TextInputControlInput & {
+  inputs?: never;
+  inputsPerRow?: never;
+};
+
+type TextInputControlGroupProps = {
+  inputs: readonly TextInputControlInput[];
+  inputsPerRow?: number;
+};
+
+export type TextInputControlProps =
+  | TextInputControlSingleProps
+  | TextInputControlGroupProps;
+
+function isTextInputControlGroupProps(
+  props: TextInputControlProps,
+): props is TextInputControlGroupProps {
+  return Array.isArray((props as TextInputControlGroupProps).inputs);
+}
+
+function getInputsPerRow(inputsPerRow: number | undefined): number {
+  if (typeof inputsPerRow !== "number" || !Number.isFinite(inputsPerRow)) {
+    return 1;
+  }
+
+  return Math.max(1, Math.floor(inputsPerRow));
+}
+
+function TextInputControlField({
+  commitOnBlur = false,
+  defaultValue,
+  name,
+  onValueChange,
+  value,
+}: TextInputControlInput): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const valueRef = React.useRef(value);
+  const defaultValueRef = React.useRef(defaultValue ?? value);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    valueRef.current = value;
+    setCurrentValue(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    defaultValueRef.current = defaultValue ?? value;
+  }, [defaultValue, value]);
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`text:${name}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function finishLiveHistoryGroup(): void {
+    liveHistoryGroupRef.current = null;
+  }
+
+  function updateValue(nextValue: string): void {
+    setCurrentValue(nextValue);
+
+    if (!commitOnBlur) {
+      onValueChange?.(nextValue, getLiveHistoryMeta());
+    }
+  }
+
+  function commitValue(nextValue = currentValue): void {
+    const committedValue =
+      nextValue.trim() === "" ? defaultValueRef.current : nextValue;
+
+    setCurrentValue(committedValue);
+
+    if (committedValue !== valueRef.current) {
+      onValueChange?.(committedValue);
+    }
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <Input
+        className="font-mono"
+        onBlur={commitOnBlur ? () => commitValue() : finishLiveHistoryGroup}
+        onChange={(event) => updateValue(event.target.value)}
+        onKeyDown={
+          commitOnBlur
+            ? (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitValue(event.currentTarget.value);
+                  event.currentTarget.blur();
+                }
+
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setCurrentValue(valueRef.current);
+                  event.currentTarget.blur();
+                }
+              }
+            : undefined
+        }
+        size="default"
+        value={currentValue}
+      />
+    </Field>
+  );
+}
+
+export function TextInputControl(
+  props: TextInputControlProps,
+): React.JSX.Element {
+  if (isTextInputControlGroupProps(props)) {
+    const inputsPerRow = getInputsPerRow(props.inputsPerRow);
+
+    return (
+      <div
+        className="grid min-w-0 gap-2"
+        data-slot="text-input-control-grid"
+        style={{
+          gridTemplateColumns: `repeat(${inputsPerRow}, minmax(0, 1fr))`,
+        }}
+      >
+        {props.inputs.map((input, index) => (
+          <TextInputControlField
+            key={`${input.name}-${index}`}
+            {...input}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return <TextInputControlField {...props} />;
+}

package/templates/ui/components/controls/use-measured-element-width.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import * as React from "react";
+
+function getMeasuredWidth(element: HTMLElement): number | undefined {
+  const width = Math.round(element.getBoundingClientRect().width);
+
+  return width > 0 ? width : undefined;
+}
+
+export function useMeasuredElementWidth(
+  ref: React.RefObject<HTMLElement | null>,
+): number | undefined {
+  const [width, setWidth] = React.useState<number | undefined>(undefined);
+
+  React.useEffect(() => {
+    const element = ref.current;
+
+    if (!element) {
+      return undefined;
+    }
+
+    const updateWidth = () => {
+      setWidth(getMeasuredWidth(element));
+    };
+
+    updateWidth();
+
+    if (typeof ResizeObserver === "undefined") {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return width;
+}

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

@@ -0,0 +1,8 @@
+"use client";
+
+export { VectorControl } from "./vector-control";
+export type {
+  VectorControlProps,
+  VectorControlValue,
+  VectorPadVariant,
+} from "./vector-control";