@pixel-point/toolcraft 0.0.2

package/templates/ui/components/controls/boolean/boolean-controls.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Checkbox, Field, Switch } from "../../primitives";
+
+type BooleanControlBaseProps = {
+  checked: boolean;
+  name: string;
+  onCheckedChange?: (checked: boolean) => void;
+  showLabel?: boolean;
+};
+
+export type SwitchControlProps = BooleanControlBaseProps;
+export type CheckboxControlProps = BooleanControlBaseProps;
+
+function useBooleanControlValue({
+  checked,
+  onCheckedChange,
+}: {
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}): [boolean, (checked: boolean) => void] {
+  const [currentChecked, setCurrentChecked] = React.useState(checked);
+
+  React.useEffect(() => {
+    setCurrentChecked(checked);
+  }, [checked]);
+
+  return [
+    currentChecked,
+    (nextChecked: boolean) => {
+      setCurrentChecked(nextChecked);
+      onCheckedChange?.(nextChecked);
+    },
+  ];
+}
+
+export function SwitchControl({
+  checked,
+  name,
+  onCheckedChange,
+  showLabel = true,
+}: SwitchControlProps): React.JSX.Element {
+  const [currentChecked, updateChecked] = useBooleanControlValue({ checked, onCheckedChange });
+
+  return (
+    <Field className="h-fit justify-start py-1" orientation="horizontal" style={{ gap: 8 }}>
+      <Switch
+        aria-label={showLabel ? undefined : name}
+        checked={currentChecked}
+        onCheckedChange={updateChecked}
+        size="default"
+      />
+      {showLabel ? <ControlFieldLabel textClassName="opacity-90">{name}</ControlFieldLabel> : null}
+    </Field>
+  );
+}
+
+export function CheckboxControl({
+  checked,
+  name,
+  onCheckedChange,
+  showLabel = true,
+}: CheckboxControlProps): React.JSX.Element {
+  const [currentChecked, updateChecked] = useBooleanControlValue({ checked, onCheckedChange });
+
+  return (
+    <Field className="h-fit justify-start py-1" orientation="horizontal" style={{ gap: 8 }}>
+      <Checkbox
+        aria-label={showLabel ? undefined : name}
+        checked={currentChecked}
+        onCheckedChange={(nextChecked) => updateChecked(nextChecked === true)}
+      />
+      {showLabel ? <ControlFieldLabel textClassName="opacity-90">{name}</ControlFieldLabel> : null}
+    </Field>
+  );
+}

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

@@ -0,0 +1,4 @@
+"use client";
+
+export { CheckboxControl, SwitchControl } from "./boolean-controls";
+export type { CheckboxControlProps, SwitchControlProps } from "./boolean-controls";

package/templates/ui/components/controls/channel-mixer/channel-mixer-control.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+
+import type { MixerChannel } from "../control-types";
+import { ChannelTabs } from "../channel-tabs";
+import { SliderControl } from "../slider";
+
+export type ChannelMixerValues = Record<
+  MixerChannel,
+  Record<MixerChannel, number>
+>;
+
+export type ChannelMixerControlProps = {
+  baseValues?: ChannelMixerValues;
+  name?: string;
+  onValueChange?: (value: {
+    activeChannel: MixerChannel;
+    baseValues?: ChannelMixerValues;
+    values: ChannelMixerValues;
+  }) => void;
+  values: ChannelMixerValues;
+};
+
+const anchorChannels = [
+  "R",
+  "G",
+  "B",
+] as const satisfies readonly MixerChannel[];
+const channelMixerSliderMax = 200;
+const channelMixerSliderMin = -200;
+const defaultActiveChannel = anchorChannels[0];
+const channelMeta = {
+  B: { label: "Blue" },
+  G: { label: "Green" },
+  R: { label: "Red" },
+} as const;
+
+export function ChannelMixerControl({
+  baseValues,
+  name = "Channels",
+  onValueChange,
+  values,
+}: ChannelMixerControlProps): React.JSX.Element {
+  const [activeChannel, setActiveChannel] =
+    React.useState<MixerChannel>(defaultActiveChannel);
+  const activeValues = values[activeChannel];
+
+  function updateValue(channel: MixerChannel, nextValue: number): void {
+    onValueChange?.({
+      activeChannel,
+      baseValues,
+      values: {
+        ...values,
+        [activeChannel]: { ...activeValues, [channel]: nextValue },
+      },
+    });
+  }
+
+  function updateActiveChannel(nextChannel: MixerChannel): void {
+    setActiveChannel(nextChannel);
+    onValueChange?.({
+      activeChannel: nextChannel,
+      baseValues,
+      values,
+    });
+  }
+
+  return (
+    <div className="flex min-w-0 flex-col gap-3" aria-label={name}>
+      <div className="flex min-w-0 flex-col gap-2">
+        <ChannelTabs
+          ariaLabel={name}
+          channels={anchorChannels}
+          name={name}
+          onValueChange={updateActiveChannel}
+          value={activeChannel}
+        />
+      </div>
+      {anchorChannels.map((channel) => (
+        <SliderControl
+          baseValue={baseValues?.[activeChannel]?.[channel]}
+          key={channel}
+          max={channelMixerSliderMax}
+          min={channelMixerSliderMin}
+          name={channelMeta[channel].label}
+          onValueChange={(nextValue) => updateValue(channel, nextValue)}
+          step={1}
+          unit="%"
+          value={activeValues[channel]}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/ui/components/controls/channel-mixer/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { ChannelMixerControl } from "./channel-mixer-control";
+export type { ChannelMixerControlProps, ChannelMixerValues } from "./channel-mixer-control";

package/templates/ui/components/controls/channel-tabs/channel-tabs.tsx

@@ -0,0 +1,42 @@
+import type * as React from "react";
+
+import type { CurveChannel, MixerChannel } from "../control-types";
+import { SegmentedControl } from "../segmented";
+
+type Channel = CurveChannel | MixerChannel;
+
+export const channelMeta = {
+  B: { color: "#147CE4" },
+  G: { color: "#3BA641" },
+  R: { color: "var(--destructive)" },
+  RGB: { color: "var(--foreground)" },
+} as const;
+
+export function ChannelTabs<T extends Channel>({
+  ariaLabel,
+  channels,
+  name,
+  onValueChange,
+  value,
+}: {
+  ariaLabel?: string;
+  channels: readonly T[];
+  name: string;
+  onValueChange: (value: T) => void;
+  value: T;
+}): React.JSX.Element {
+  return (
+    <SegmentedControl
+      ariaLabel={ariaLabel ?? name}
+      name={name}
+      onValueChange={(nextValue) => onValueChange(nextValue as T)}
+      options={channels.map((channel) => ({
+        indicatorColor: channelMeta[channel].color,
+        label: channel,
+        value: channel,
+      }))}
+      value={value}
+      variant="dots"
+    />
+  );
+}

package/templates/ui/components/controls/channel-tabs/index.ts

@@ -0,0 +1,6 @@
+"use client";
+
+export {
+  ChannelTabs,
+  channelMeta,
+} from "./channel-tabs";

package/templates/ui/components/controls/code-textarea/code-textarea-control.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field, Textarea } from "../../primitives";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+} from "../control-types";
+
+export type CodeTextareaControlProps = {
+  defaultValue?: string;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<string>;
+  value: string;
+};
+
+export function CodeTextareaControl({
+  name,
+  onValueChange,
+  value,
+}: CodeTextareaControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const valueRef = React.useRef(value);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    valueRef.current = value;
+    setCurrentValue(value);
+  }, [value]);
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`code:${name}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function finishLiveHistoryGroup(): void {
+    liveHistoryGroupRef.current = null;
+  }
+
+  function updateValue(nextValue: string): void {
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue, getLiveHistoryMeta());
+  }
+
+  function resetToCurrentValue(): void {
+    setCurrentValue(valueRef.current);
+
+    if (valueRef.current !== currentValue) {
+      onValueChange?.(valueRef.current);
+    }
+
+    finishLiveHistoryGroup();
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <div className="flex items-center">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+      </div>
+      <Textarea
+        aria-label={name}
+        className="max-h-[calc(12lh+12px)] min-h-[84px] overflow-y-auto font-mono"
+        onBlur={finishLiveHistoryGroup}
+        onChange={(event) => updateValue(event.target.value)}
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            finishLiveHistoryGroup();
+            event.currentTarget.blur();
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            resetToCurrentValue();
+            event.currentTarget.blur();
+          }
+        }}
+        size="sm"
+        value={currentValue}
+      />
+    </Field>
+  );
+}

package/templates/ui/components/controls/code-textarea/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { CodeTextareaControl } from "./code-textarea-control";
+export type { CodeTextareaControlProps } from "./code-textarea-control";