@pixel-point/toolcraft 0.0.8 → 0.0.9

package/templates/ui/components/control-layout/index.tsx

@@ -90,7 +90,7 @@ export function ControlInlineGroup({
       {...props}
       className={cn(
         "grid min-w-0",
-        kind === "slider" ? "gap-4" : "gap-2",
+        kind === "slider" ? "gap-4" : "gap-x-2.5 gap-y-2",
         kind === "toggleParameter" && "items-end",
         className,
       )}
@@ -229,10 +229,13 @@ export function ControlItem({
 }: {
   allowCompoundDividers?: boolean;
   children: React.ReactNode;
-  compoundDividerPlacement?: "both" | "bottom";
+  compoundDividerPlacement?: "both" | "bottom" | "top";
   flush?: boolean;
 }): React.JSX.Element {
-  const showCompoundTopDivider = compoundDividerPlacement === "both";
+  const showCompoundTopDivider =
+    compoundDividerPlacement === "both" || compoundDividerPlacement === "top";
+  const showCompoundBottomDivider =
+    compoundDividerPlacement === "both" || compoundDividerPlacement === "bottom";
 
   return (
     <div
@@ -240,11 +243,13 @@ export function ControlItem({
         "min-w-0",
         !flush && "px-3",
         allowCompoundDividers &&
+          showCompoundBottomDivider &&
           "has-data-[control-section-divider=compound]:relative has-data-[control-section-divider=compound]:pb-[18px] has-data-[control-section-divider=compound]:after:absolute has-data-[control-section-divider=compound]:after:bottom-0 has-data-[control-section-divider=compound]:after:h-px has-data-[control-section-divider=compound]:after:bg-[color:color-mix(in_oklab,var(--border)_8%,transparent)]",
         allowCompoundDividers &&
           showCompoundTopDivider &&
           "has-data-[control-section-divider=compound]:pt-[18px] has-data-[control-section-divider=compound]:before:absolute has-data-[control-section-divider=compound]:before:top-0 has-data-[control-section-divider=compound]:before:h-px has-data-[control-section-divider=compound]:before:bg-[color:color-mix(in_oklab,var(--border)_8%,transparent)]",
         allowCompoundDividers &&
+          showCompoundBottomDivider &&
           (flush
             ? "has-data-[control-section-divider=compound]:after:inset-x-0"
             : "has-data-[control-section-divider=compound]:after:inset-x-3"),

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

@@ -14,6 +14,7 @@ import {
 
 import { Button, Field } from "../../primitives";
 import { ControlFieldLabel } from "../../control-layout";
+import { cn } from "../../../lib/utils";
 
 export type ActionControlIconName =
   | "check"
@@ -97,12 +98,14 @@ export function ActionsControl({
   onAction,
   showLabel = true,
 }: ActionsControlProps): React.JSX.Element {
+  const hasSingleAction = actions.length === 1;
+
   return (
     <Field
       aria-label={showLabel ? undefined : name}
-      className="h-fit min-w-0 flex-wrap items-center justify-between gap-y-2!"
+      className="h-fit min-w-0 gap-2"
       data-slot="actions-control"
-      orientation="horizontal"
+      orientation="vertical"
     >
       {showLabel ? (
         <ControlFieldLabel className="min-w-0" textClassName="min-w-0 truncate">
@@ -110,7 +113,11 @@ export function ActionsControl({
         </ControlFieldLabel>
       ) : null}
       <div
-        className="flex max-w-full shrink-0 flex-wrap items-center justify-start gap-1.5"
+        className={cn(
+          "grid max-w-full gap-1.5",
+          hasSingleAction ? "w-1/2 grid-cols-1" : "w-full grid-cols-2",
+        )}
+        data-actions-count={actions.length}
         data-slot="actions-control-buttons"
       >
         {actions.map((action) => {
@@ -122,6 +129,7 @@ export function ActionsControl({
               aria-label={getActionAriaLabel(action, actionContent)}
               key={actionValue}
               onClick={() => onAction?.(actionValue)}
+              className="w-full"
               size="sm"
               type="button"
               variant="outline"

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

@@ -14,12 +14,14 @@ export type CodeTextareaControlProps = {
   defaultValue?: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<string>;
+  showLabel?: boolean;
   value: string;
 };
 
 export function CodeTextareaControl({
   name,
   onValueChange,
+  showLabel = true,
   value,
 }: CodeTextareaControlProps): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState(value);
@@ -61,9 +63,11 @@ export function CodeTextareaControl({
 
   return (
     <Field className="min-w-0 gap-2">
-      <div className="flex items-center">
-        <ControlFieldLabel>{name}</ControlFieldLabel>
-      </div>
+      {showLabel ? (
+        <div className="flex items-center">
+          <ControlFieldLabel>{name}</ControlFieldLabel>
+        </div>
+      ) : null}
       <Textarea
         aria-label={name}
         className="max-h-[calc(12lh+12px)] min-h-[84px] overflow-y-auto font-mono"

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

@@ -18,7 +18,10 @@ export {
   type ColorFormatMode,
   type ColorSurfaceModel,
 } from "./style-guide-color-picker-channel-utils";
-export { DEFAULT_COLOR_FORMAT_MODE } from "./style-guide-color-picker";
+export {
+  DEFAULT_COLOR_FORMAT_MODE,
+  StyleGuideColorPicker,
+} from "./style-guide-color-picker";
 export {
   getColorSurfaceSliderConfig,
   getColorSurfaceStyle,

package/templates/ui/components/controls/color/style-guide-color-picker-logic.ts

@@ -459,9 +459,14 @@ export function useHueHandlers({
 
   const handleHuePreviewChange = useCallback(
     (nextHue: number) => {
-      applyOptimisticColor({ h: nextHue, s: latestHsvRef.current.s, v: latestHsvRef.current.v });
+      const nextHex = applyOptimisticColor({
+        h: nextHue,
+        s: latestHsvRef.current.s,
+        v: latestHsvRef.current.v,
+      });
+      emitChange(nextHex);
     },
-    [applyOptimisticColor, latestHsvRef],
+    [applyOptimisticColor, emitChange, latestHsvRef],
   );
 
   const handleHueCommit = useCallback(

package/templates/ui/components/controls/color/style-guide-color-picker.tsx

@@ -170,9 +170,9 @@ function useRgbBlueHandlers({
 
   const handleSliderPreviewChange = useCallback(
     (nextValue: number) => {
-      applyBlueChannel(nextValue);
+      emitChange(applyBlueChannel(nextValue));
     },
-    [applyBlueChannel],
+    [applyBlueChannel, emitChange],
   );
 
   const handleSliderCommit = useCallback(

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

@@ -52,6 +52,7 @@ export {
   getSurfaceHsvColor,
   PaletteControl,
   PaletteControl as Palette,
+  StyleGuideColorPicker,
 } from "./color";
 export type {
   ColorFormatMode,
@@ -197,5 +198,6 @@ export type {
   VectorControlProps as VectorProps,
   VectorControlValue,
   VectorControlValue as VectorValue,
+  VectorPadCoordinateMode,
   VectorPadVariant,
 } from "./vector";

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

@@ -12,6 +12,7 @@ export type RangeInputControlProps = {
   end: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<{ start: string; end: string }>;
+  showLabel?: boolean;
   start: string;
 };
 
@@ -88,6 +89,7 @@ export function RangeInputControl({
   end,
   name,
   onValueChange,
+  showLabel = true,
   start,
 }: RangeInputControlProps): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState({ end, start });
@@ -142,7 +144,7 @@ export function RangeInputControl({
   if (shouldUseFullWidthRangeInputs(start, end)) {
     return (
       <Field className="h-fit min-w-0 gap-2">
-        <ControlFieldLabel>{name}</ControlFieldLabel>
+        {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
         <RangeInputs
           className="w-full"
           end={currentValue.end}
@@ -157,10 +159,16 @@ export function RangeInputControl({
   }
 
   return (
-    <Field className="h-fit min-w-0 items-center justify-between gap-3" orientation="horizontal">
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+    <Field
+      className={cn(
+        "h-fit min-w-0",
+        showLabel ? "items-center justify-between gap-3" : undefined,
+      )}
+      orientation={showLabel ? "horizontal" : "vertical"}
+    >
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <RangeInputs
-        className="w-1/2 shrink-0"
+        className={showLabel ? "w-1/2 shrink-0" : "w-full"}
         end={currentValue.end}
         name={name}
         onCancel={cancelDraft}

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

@@ -21,6 +21,7 @@ export type SelectControlInput = {
   name: string;
   onValueChange?: (value: string) => void;
   options: readonly ControlOption[];
+  showLabel?: boolean;
   value: string;
 };
 
@@ -145,6 +146,7 @@ function SelectControlField({
   name,
   onValueChange,
   options,
+  showLabel = true,
   value,
 }: SelectControlInput & {
   layout?: SelectControlFieldLayout;
@@ -169,21 +171,24 @@ function SelectControlField({
   return (
     <Field
       className={cn(
-        isStacked
+        !showLabel
+          ? "h-fit min-w-0"
+          : isStacked
           ? "h-fit min-w-0 gap-2"
           : compactHorizontalFieldClassName,
       )}
-      orientation={isStacked ? "vertical" : "horizontal"}
+      orientation={!showLabel || isStacked ? "vertical" : "horizontal"}
       ref={fieldRef}
     >
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <div
         className={cn(
           "min-w-0",
-          isStacked ? "w-full" : "w-1/2 shrink-0",
+          !showLabel || isStacked ? "w-full" : "w-1/2 shrink-0",
         )}
       >
         <StaticSelect
+          ariaLabel={showLabel ? undefined : name}
           onValueChange={updateValue}
           options={options}
           popupMaxWidth={popupMaxWidth}

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

@@ -27,7 +27,6 @@ const compactSliderValueUnits = new Set([
   "vh",
   "vmin",
   "vmax",
-  "x",
   "s",
   "ms",
 ]);

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

@@ -15,6 +15,7 @@ export type TextInputControlInput = {
   defaultValue?: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<string>;
+  showLabel?: boolean;
   value: string;
 };
 
@@ -51,6 +52,7 @@ function TextInputControlField({
   defaultValue,
   name,
   onValueChange,
+  showLabel = true,
   value,
 }: TextInputControlInput): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState(value);
@@ -101,8 +103,9 @@ function TextInputControlField({
 
   return (
     <Field className="min-w-0 gap-2">
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <Input
+        aria-label={showLabel ? undefined : name}
         className="font-mono"
         onBlur={commitOnBlur ? () => commitValue() : finishLiveHistoryGroup}
         onChange={(event) => updateValue(event.target.value)}

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

@@ -4,5 +4,6 @@ export { VectorControl } from "./vector-control";
 export type {
   VectorControlProps,
   VectorControlValue,
+  VectorPadCoordinateMode,
   VectorPadVariant,
 } from "./vector-control";

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

@@ -17,6 +17,14 @@ export type VectorControlValue = {
   y: string;
 };
 
+type VectorPadAxisLock = "x" | "y";
+
+type VectorPadDragStart = {
+  clientX: number;
+  clientY: number;
+  value: VectorControlValue;
+};
+
 export type VectorPadVariant =
   | "default"
   | "whiteBalance"
@@ -24,10 +32,13 @@ export type VectorPadVariant =
   | "chromaOffset"
   | "toneBias";
 
+export type VectorPadCoordinateMode = "cartesian" | "screen";
+
 export type VectorControlProps = VectorControlValue & {
   defaultValue?: Partial<VectorControlValue>;
   name: string;
   onValueChange?: ControlValueChangeHandler<VectorControlValue>;
+  padCoordinateMode?: VectorPadCoordinateMode;
   padShape?: "compact" | "square";
   padVariant?: VectorPadVariant;
   xLabel?: string;
@@ -38,10 +49,20 @@ function clamp(value: number, min = 0, max = 1): number {
   return Math.min(max, Math.max(min, value));
 }
 
-function pointFromEvent(event: React.PointerEvent<HTMLElement>): CurvePoint {
+function getDefaultPadCoordinateMode(
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
+function pointFromEvent(
+  event: React.PointerEvent<HTMLElement>,
+  coordinateMode: VectorPadCoordinateMode,
+): CurvePoint {
   const rect = event.currentTarget.getBoundingClientRect();
   const x = clamp((event.clientX - rect.left) / rect.width);
-  const y = clamp(1 - (event.clientY - rect.top) / rect.height);
+  const yRatio = clamp((event.clientY - rect.top) / rect.height);
+  const y = coordinateMode === "screen" ? yRatio : 1 - yRatio;
 
   return { x, y };
 }
@@ -54,6 +75,8 @@ type VectorPadStyle = React.CSSProperties & {
   "--xy-pad-y": string;
 };
 
+const vectorPadAxisLockThresholdPx = 2;
+
 const whiteBalancePadBackgroundImage =
   "linear-gradient(90deg,color-mix(in oklab, #2f7cff 72%, transparent),color-mix(in oklab, var(--foreground) 8%, transparent) 50%,color-mix(in oklab, #ff9a22 78%, transparent)),linear-gradient(180deg,color-mix(in oklab, #d84f9a 68%, transparent),transparent 49%,color-mix(in oklab, #42ba62 72%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
 
@@ -73,13 +96,20 @@ const vectorPadBackgroundImages: Partial<Record<VectorPadVariant, string>> = {
   whiteBalance: whiteBalancePadBackgroundImage,
 };
 
-function getVectorPoint(x: string, y: string): VectorPadStyle {
+function getVectorPoint(
+  x: string,
+  y: string,
+  coordinateMode: VectorPadCoordinateMode,
+): VectorPadStyle {
   const parsedX = Number.parseFloat(x);
   const parsedY = Number.parseFloat(y);
   const clampedX = Number.isFinite(parsedX) ? clamp(parsedX, -1, 1) : 0;
   const clampedY = Number.isFinite(parsedY) ? clamp(parsedY, -1, 1) : 0;
   const xPosition = `${(clampedX + 1) * 50}%`;
-  const yPosition = `${(1 - (clampedY + 1) / 2) * 100}%`;
+  const yPosition =
+    coordinateMode === "screen"
+      ? `${((clampedY + 1) / 2) * 100}%`
+      : `${(1 - (clampedY + 1) / 2) * 100}%`;
 
   return {
     "--xy-pad-display-x":
@@ -279,6 +309,7 @@ function VectorPadHandle({ isDragging }: { isDragging: boolean }): React.JSX.Ele
 function VectorPadField({
   name,
   onValueChange,
+  padCoordinateMode,
   padShape = "compact",
   padVariant = "default",
   x,
@@ -287,9 +318,13 @@ function VectorPadField({
   const [isPointerDragging, setIsPointerDragging] = React.useState(false);
   const normalizedX = normalizeVectorCoordinate(x);
   const normalizedY = normalizeVectorCoordinate(y);
-  const point = getVectorPoint(normalizedX, normalizedY);
+  const coordinateMode =
+    padCoordinateMode ?? getDefaultPadCoordinateMode(padVariant);
+  const point = getVectorPoint(normalizedX, normalizedY, coordinateMode);
   const valueLabel = getVectorValueLabel(normalizedX, normalizedY);
   const vectorPadBackgroundImage = vectorPadBackgroundImages[padVariant];
+  const axisLockRef = React.useRef<VectorPadAxisLock | null>(null);
+  const dragStartRef = React.useRef<VectorPadDragStart | null>(null);
   const liveHistoryGroupRef = React.useRef<string | null>(null);
   const updateVector = (
     nextX: string,
@@ -321,17 +356,51 @@ function VectorPadField({
   }
 
   function updateFromPointer(event: React.PointerEvent<HTMLButtonElement>): void {
-    const nextPoint = pointFromEvent(event);
+    const nextPoint = pointFromEvent(event, coordinateMode);
+    const nextValue: VectorControlValue = {
+      x: (nextPoint.x * 2 - 1).toFixed(2),
+      y: (nextPoint.y * 2 - 1).toFixed(2),
+    };
+    const dragStart = dragStartRef.current;
+
+    if (event.shiftKey && dragStart) {
+      if (!axisLockRef.current) {
+        const deltaX = event.clientX - dragStart.clientX;
+        const deltaY = event.clientY - dragStart.clientY;
+
+        if (Math.hypot(deltaX, deltaY) < vectorPadAxisLockThresholdPx) {
+          updateVector(
+            dragStart.value.x,
+            dragStart.value.y,
+            getLiveHistoryMeta(),
+          );
+          return;
+        }
+
+        axisLockRef.current = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+      }
+
+      updateVector(
+        axisLockRef.current === "x" ? nextValue.x : dragStart.value.x,
+        axisLockRef.current === "y" ? nextValue.y : dragStart.value.y,
+        getLiveHistoryMeta(),
+      );
+      return;
+    }
+
+    axisLockRef.current = null;
 
     updateVector(
-      (nextPoint.x * 2 - 1).toFixed(2),
-      (nextPoint.y * 2 - 1).toFixed(2),
+      nextValue.x,
+      nextValue.y,
       getLiveHistoryMeta(),
     );
   }
 
   function stopPointerDrag(): void {
     setIsPointerDragging(false);
+    axisLockRef.current = null;
+    dragStartRef.current = null;
     liveHistoryGroupRef.current = null;
   }
 
@@ -352,12 +421,19 @@ function VectorPadField({
           "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
           padShape === "square" ? "aspect-square" : "h-[142px]",
         )}
+        data-vector-pad-coordinate-mode={coordinateMode}
         data-vector-pad-shape={padShape}
         data-vector-pad-variant={padVariant}
         onLostPointerCapture={stopPointerDrag}
         onPointerCancel={stopPointerDrag}
         onPointerDown={(event) => {
           setIsPointerDragging(true);
+          axisLockRef.current = null;
+          dragStartRef.current = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            value: { x: normalizedX, y: normalizedY },
+          };
           event.currentTarget.setPointerCapture(event.pointerId);
           updateFromPointer(event);
         }}

package/templates/ui/components/panel/panel-section.tsx

@@ -53,11 +53,11 @@ export function PanelSection({
       {childArray.map((child, index) => (
         <ControlItem
           allowCompoundDividers={shouldRenderInnerDividers}
-          compoundDividerPlacement={
-            shouldRenderInnerDividers && childArray.length > 1 && index === 0
-              ? "bottom"
-              : "both"
-          }
+          compoundDividerPlacement={getCompoundDividerPlacement({
+            childCount: childArray.length,
+            index,
+            shouldRenderInnerDividers,
+          })}
           flush={flush || isActionSection}
           key={getPanelSectionChildKey(child, index)}
         >
@@ -100,6 +100,30 @@ export function PanelSection({
   );
 }
 
+function getCompoundDividerPlacement({
+  childCount,
+  index,
+  shouldRenderInnerDividers,
+}: {
+  childCount: number;
+  index: number;
+  shouldRenderInnerDividers: boolean;
+}): "both" | "bottom" | "top" {
+  if (!shouldRenderInnerDividers || childCount <= 1) {
+    return "both";
+  }
+
+  if (index === 0) {
+    return "bottom";
+  }
+
+  if (index === childCount - 1) {
+    return "top";
+  }
+
+  return "both";
+}
+
 function PanelSectionCollapsibleBody({
   collapsed,
   children,