@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,437 @@
+import * as React from "react";
+import { QuestionIcon } from "@phosphor-icons/react";
+
+import {
+  Button,
+  FieldLabel,
+  PrimitiveArrowIcon,
+  ScrollFade,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../primitives";
+import { cn } from "../../lib/utils";
+
+type ControlFieldLabelActionContextValue = {
+  action: React.ReactNode;
+  label: string;
+};
+
+type ControlFieldLabelHelpContextValue = {
+  help: string;
+  label: string;
+};
+
+const ControlFieldLabelActionContext =
+  React.createContext<ControlFieldLabelActionContextValue | null>(null);
+const ControlFieldLabelHelpContext =
+  React.createContext<ControlFieldLabelHelpContextValue | null>(null);
+
+export const panelSectionSurfaceClassName = [
+  "flex flex-col pt-2 pb-6 first:border-t-0 data-[toolcraft-section-actions]:first:border-t",
+  "border-t border-[color:color-mix(in_oklab,var(--border)_8%,transparent)]",
+  "transition-colors duration-150 ease-out hover:bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)]",
+].join(" ");
+
+export function ControlSection({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLElement>): React.JSX.Element {
+  return (
+    <section
+      {...props}
+      className={cn(
+        panelSectionSurfaceClassName,
+        "group/control-section gap-[14px]",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+
+export function ControlList({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): React.JSX.Element {
+  return (
+    <div
+      className={cn("flex min-w-0 flex-col gap-[14px]", className)}
+      data-control-list=""
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ControlInlineGroup({
+  children,
+  className,
+  columns = 2,
+  kind = "default",
+  style,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  columns?: number;
+  kind?: "default" | "slider" | "toggleParameter";
+}): React.JSX.Element {
+  const gridTemplateColumns =
+    kind === "toggleParameter"
+      ? "auto minmax(0, 1fr)"
+      : `repeat(${Math.max(1, Math.floor(columns))}, minmax(0, 1fr))`;
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        "grid min-w-0",
+        kind === "slider" ? "gap-4" : "gap-2",
+        kind === "toggleParameter" && "items-end",
+        className,
+      )}
+      data-control-layout="inline"
+      data-control-layout-columns={columns}
+      data-control-layout-group=""
+      data-control-layout-kind={kind}
+      style={{
+        ...style,
+        gridTemplateColumns,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ControlSectionHeader({
+  action,
+  collapsed = false,
+  collapsible = false,
+  children,
+  onCollapsedChange,
+}: {
+  action?: React.ReactNode;
+  collapsed?: boolean;
+  collapsible?: boolean;
+  children: React.ReactNode;
+  onCollapsedChange?: (collapsed: boolean) => void;
+}): React.JSX.Element {
+  const titleText = getControlSectionHeaderText(children);
+  const collapseLabel = collapsed
+    ? `Expand ${titleText} section`
+    : `Collapse ${titleText} section`;
+  const toggleCollapsed = React.useCallback(() => {
+    if (!collapsible) {
+      return;
+    }
+
+    onCollapsedChange?.(!collapsed);
+  }, [collapsed, collapsible, onCollapsedChange]);
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
+    if (!collapsible || (event.key !== "Enter" && event.key !== " ")) {
+      return;
+    }
+
+    event.preventDefault();
+    toggleCollapsed();
+  }
+
+  function stopHeaderToggle(event: React.SyntheticEvent): void {
+    event.stopPropagation();
+  }
+
+  return (
+    <div
+      aria-expanded={collapsible ? !collapsed : undefined}
+      aria-label={collapsible ? collapseLabel : undefined}
+      className={cn(
+        "flex h-9 min-w-0 items-center justify-between gap-2 px-3",
+        collapsible && "cursor-pointer select-none",
+      )}
+      data-collapsed={collapsible ? String(collapsed) : undefined}
+      data-collapsible={collapsible ? "" : undefined}
+      data-slot="control-section-header"
+      onClick={collapsible ? toggleCollapsed : undefined}
+      onKeyDown={handleKeyDown}
+      role={collapsible ? "button" : undefined}
+      tabIndex={collapsible ? 0 : undefined}
+    >
+      <div className="flex min-w-0 items-center gap-1 has-data-[icon-active=true]:[&_[data-slot=panel-title]]:text-[color:var(--link)]">
+        {children}
+      </div>
+      {action || collapsible ? (
+        <div
+          className="inline-flex shrink-0 items-center gap-1"
+          onClick={stopHeaderToggle}
+          onKeyDown={stopHeaderToggle}
+          onPointerDown={stopHeaderToggle}
+        >
+          {action}
+          {collapsible ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    aria-expanded={!collapsed}
+                    aria-label={collapseLabel}
+                    data-control-section-collapse-button=""
+                    onClick={toggleCollapsed}
+                    size="icon-sm"
+                    type="button"
+                    variant="ghost"
+                  />
+                }
+              >
+                <PrimitiveArrowIcon direction={collapsed ? "down" : "up"} />
+              </TooltipTrigger>
+              <TooltipContent side="top">{collapseLabel}</TooltipContent>
+            </Tooltip>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function getControlSectionHeaderText(children: React.ReactNode): string {
+  const text = getReactNodeText(children).trim();
+
+  return text.length > 0 ? text : "section";
+}
+
+function getReactNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+
+  if (!React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    if (Array.isArray(node)) {
+      return node.map(getReactNodeText).join("");
+    }
+
+    return "";
+  }
+
+  return getReactNodeText(node.props.children);
+}
+
+export function ControlItem({
+  allowCompoundDividers = false,
+  children,
+  compoundDividerPlacement = "both",
+  flush = false,
+}: {
+  allowCompoundDividers?: boolean;
+  children: React.ReactNode;
+  compoundDividerPlacement?: "both" | "bottom";
+  flush?: boolean;
+}): React.JSX.Element {
+  const showCompoundTopDivider = compoundDividerPlacement === "both";
+
+  return (
+    <div
+      className={cn(
+        "min-w-0",
+        !flush && "px-3",
+        allowCompoundDividers &&
+          "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 &&
+          (flush
+            ? "has-data-[control-section-divider=compound]:after:inset-x-0"
+            : "has-data-[control-section-divider=compound]:after:inset-x-3"),
+        allowCompoundDividers &&
+          showCompoundTopDivider &&
+          (flush
+            ? "has-data-[control-section-divider=compound]:before:inset-x-0"
+            : "has-data-[control-section-divider=compound]:before:inset-x-3"),
+      )}
+      data-control-item-compound-divider-placement={
+        allowCompoundDividers ? compoundDividerPlacement : undefined
+      }
+      data-control-item-compound-context={allowCompoundDividers ? "" : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function PanelTitle({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <p
+      className="m-0 text-2xs leading-none font-semibold text-[color:color-mix(in_oklab,var(--foreground)_75%,transparent)] uppercase transition-colors duration-150 ease-out"
+      data-slot="panel-title"
+    >
+      {children}
+    </p>
+  );
+}
+
+export type ControlFieldLabelProps = React.ComponentProps<typeof FieldLabel> & {
+  textClassName?: string;
+};
+
+export function ControlFieldLabelActionProvider({
+  action,
+  children,
+  label,
+}: ControlFieldLabelActionContextValue & {
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <ControlFieldLabelActionContext.Provider value={{ action, label }}>
+      {children}
+    </ControlFieldLabelActionContext.Provider>
+  );
+}
+
+export function ControlFieldLabelHelpProvider({
+  children,
+  help,
+  label,
+}: ControlFieldLabelHelpContextValue & {
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <ControlFieldLabelHelpContext.Provider value={{ help, label }}>
+      {children}
+    </ControlFieldLabelHelpContext.Provider>
+  );
+}
+
+export function useControlFieldLabelAction(
+  label: string | undefined,
+): React.ReactNode {
+  const context = React.useContext(ControlFieldLabelActionContext);
+
+  return context && context.label === label ? context.action : null;
+}
+
+export function useControlFieldLabelHelp(
+  label: string | undefined,
+): string | null {
+  const context = React.useContext(ControlFieldLabelHelpContext);
+
+  return context && context.label === label ? context.help : null;
+}
+
+export function ControlFieldLabel({
+  children,
+  className,
+  textClassName,
+  title: titleProp,
+  ...props
+}: ControlFieldLabelProps): React.JSX.Element {
+  const title = getControlFieldLabelTitle(children);
+  const displayChildren = getControlFieldLabelDisplayChildren(children, title);
+  const labelAction = useControlFieldLabelAction(title);
+  const labelHelp = useControlFieldLabelHelp(title);
+
+  return (
+    <span
+      className={cn(
+        "group/keyframe-control-label inline-flex min-w-0 max-w-full items-center gap-0 has-data-[icon-active=true]:[&_[data-slot=template-field-label-text]]:text-[color:var(--link)] has-data-[icon-active=true]:[&_[data-slot=template-field-label-text]]:opacity-100",
+        className,
+      )}
+      data-control-field-label=""
+      data-slot="field-label"
+    >
+      <FieldLabel
+        className="min-w-0 max-w-full gap-0"
+        title={titleProp ?? title}
+        {...props}
+      >
+        <ScrollFade
+          className="no-scrollbar min-w-0 max-w-full"
+          containerClassName="min-w-0 max-w-full"
+          preset="compact"
+          side="right"
+          watch={[title ?? ""]}
+        >
+          <span
+            className={cn(
+              "block whitespace-nowrap opacity-60",
+              textClassName,
+              "min-w-max",
+            )}
+            data-slot="template-field-label-text"
+            title={title}
+          >
+            {displayChildren}
+          </span>
+        </ScrollFade>
+      </FieldLabel>
+      {labelHelp ? (
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label={`${title ?? "Control"} help`}
+                className="ml-[3px] inline-flex size-3.5 shrink-0 items-center justify-center rounded-full text-[color:color-mix(in_oklab,var(--foreground)_40%,transparent)] transition-colors duration-150 ease-out hover:text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] focus-visible:outline-none"
+                data-control-field-help=""
+                type="button"
+              />
+            }
+          >
+            <QuestionIcon className="size-3.5" weight="fill" />
+          </TooltipTrigger>
+          <TooltipContent className="max-w-[240px] whitespace-normal text-left" side="top">
+            {labelHelp}
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+      {labelAction}
+    </span>
+  );
+}
+
+function getControlFieldLabelTitle(
+  children: React.ReactNode,
+): string | undefined {
+  const textParts = React.Children.toArray(children).map((child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return String(child);
+    }
+
+    return null;
+  });
+
+  if (!textParts.length || textParts.some((part) => part === null)) {
+    return undefined;
+  }
+
+  const title = textParts.join("").trim();
+
+  return title || undefined;
+}
+
+function getControlFieldLabelDisplayChildren(
+  children: React.ReactNode,
+  title: string | undefined,
+): React.ReactNode {
+  if (!title || React.Children.count(children) !== 1) {
+    return children;
+  }
+
+  const [child] = React.Children.toArray(children);
+
+  if (typeof child !== "string" && typeof child !== "number") {
+    return children;
+  }
+
+  const displayTitle = title.replace(/\s+\([^)]{1,80}\)\s*$/u, "").trim();
+
+  return displayTitle || title;
+}

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

@@ -0,0 +1,139 @@
+"use client";
+
+import type { ReactElement, ReactNode } from "react";
+import {
+  ArrowCounterClockwiseIcon,
+  CheckIcon,
+  CopySimpleIcon,
+  DownloadSimpleIcon,
+  EraserIcon,
+  ExportIcon,
+  MagicWandIcon,
+  ShuffleIcon,
+} from "@phosphor-icons/react";
+
+import { Button, Field } from "../../primitives";
+import { ControlFieldLabel } from "../../control-layout";
+import { cn } from "../../../lib/utils";
+
+export type ActionControlIconName =
+  | "check"
+  | "copy"
+  | "download"
+  | "download-simple"
+  | "eraser"
+  | "export"
+  | "rotate-ccw"
+  | "shuffle"
+  | "wand-sparkles";
+
+const actionIconComponents = {
+  check: CheckIcon,
+  copy: CopySimpleIcon,
+  download: DownloadSimpleIcon,
+  "download-simple": DownloadSimpleIcon,
+  eraser: EraserIcon,
+  export: ExportIcon,
+  "rotate-ccw": ArrowCounterClockwiseIcon,
+  shuffle: ShuffleIcon,
+  "wand-sparkles": MagicWandIcon,
+} as const;
+
+export type ActionControlObjectOption = {
+  children?: ReactNode;
+  label?: string;
+  value: string;
+  icon?: ActionControlIconName | ReactElement;
+};
+
+export type ActionControlOption = string | ActionControlObjectOption;
+
+function getActionValue(action: ActionControlOption): string {
+  return typeof action === "string" ? action : action.value;
+}
+
+function getActionContent(action: ActionControlOption): ReactNode {
+  if (typeof action === "string") {
+    return action;
+  }
+
+  return action.children ?? action.label ?? action.value;
+}
+
+function getActionIcon(action: ActionControlOption): ReactNode {
+  if (typeof action === "string" || action.icon == null) {
+    return null;
+  }
+
+  if (typeof action.icon !== "string") {
+    return action.icon;
+  }
+
+  const Icon = actionIconComponents[action.icon];
+
+  return <Icon data-icon="inline-start" />;
+}
+
+function getActionAriaLabel(
+  action: ActionControlOption,
+  content: ReactNode,
+): string | undefined {
+  if (typeof content === "string") {
+    return undefined;
+  }
+
+  return typeof action === "string" ? action : (action.label ?? action.value);
+}
+
+export type ActionsControlProps = {
+  actions: readonly ActionControlOption[];
+  name: string;
+  onAction?: (value: string) => void;
+  showLabel?: boolean;
+};
+
+export function ActionsControl({
+  actions,
+  name,
+  onAction,
+  showLabel = true,
+}: ActionsControlProps): React.JSX.Element {
+  return (
+    <Field
+      aria-label={showLabel ? undefined : name}
+      className="h-fit min-w-0 flex-wrap items-center justify-between gap-y-2!"
+      orientation="horizontal"
+    >
+      {showLabel ? (
+        <ControlFieldLabel className="min-w-0" textClassName="min-w-0 truncate">
+          {name}
+        </ControlFieldLabel>
+      ) : null}
+      <div
+        className={cn(
+          "flex max-w-full shrink-0 flex-wrap items-center justify-start gap-1.5",
+          showLabel && "ml-auto",
+        )}
+      >
+        {actions.map((action) => {
+          const actionContent = getActionContent(action);
+          const actionValue = getActionValue(action);
+
+          return (
+            <Button
+              aria-label={getActionAriaLabel(action, actionContent)}
+              key={actionValue}
+              onClick={() => onAction?.(actionValue)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {getActionIcon(action)}
+              {actionContent}
+            </Button>
+          );
+        })}
+      </div>
+    </Field>
+  );
+}

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

@@ -0,0 +1,9 @@
+"use client";
+
+export { ActionsControl } from "./actions-control";
+export type {
+  ActionControlIconName,
+  ActionControlObjectOption,
+  ActionControlOption,
+  ActionsControlProps,
+} from "./actions-control";

package/templates/ui/components/controls/anchor-grid/anchor-grid-control.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+
+import { Button, Field } from "../../primitives";
+import { ControlFieldLabel } from "../../control-layout";
+import {
+  hoverImportantSelectedItemBorderClassName,
+  hoverImportantSelectedItemSurfaceClassName,
+  importantSelectedItemBorderClassName,
+  importantSelectedItemSurfaceClassName,
+} from "../../primitives/selection-state";
+import { cn } from "../../../lib/utils";
+
+export type AnchorGridValue =
+  | "bottom-center"
+  | "bottom-left"
+  | "bottom-right"
+  | "center"
+  | "center-left"
+  | "center-right"
+  | "top-center"
+  | "top-left"
+  | "top-right";
+
+export type AnchorGridControlProps = {
+  name: string;
+  onValueChange?: (value: AnchorGridValue) => void;
+  value?: AnchorGridValue;
+};
+
+const anchorOptions = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "center-left",
+  "center",
+  "center-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+] as const satisfies readonly AnchorGridValue[];
+
+const anchorLabels = {
+  "bottom-center": "Bottom Center",
+  "bottom-left": "Bottom Left",
+  "bottom-right": "Bottom Right",
+  center: "Center",
+  "center-left": "Center Left",
+  "center-right": "Center Right",
+  "top-center": "Top Center",
+  "top-left": "Top Left",
+  "top-right": "Top Right",
+} as const satisfies Record<AnchorGridValue, string>;
+
+export function AnchorGridControl({
+  name,
+  onValueChange,
+  value = "center",
+}: AnchorGridControlProps): React.JSX.Element {
+  const [currentValue, setCurrentValue] = React.useState(value);
+
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  function updateValue(nextValue: AnchorGridValue): void {
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  return (
+    <Field className="min-w-0 !gap-2">
+      <ControlFieldLabel>{name}</ControlFieldLabel>
+      <div className="grid w-full grid-cols-3 gap-1.5">
+        {anchorOptions.map((option) => (
+          <Button
+            aria-label={anchorLabels[option]}
+            aria-pressed={currentValue === option}
+            className={cn(
+              "h-9 w-full rounded-lg !bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] px-0 transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out hover:!bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] active:scale-[0.98] active:!bg-[color:color-mix(in_oklab,var(--input)_10%,transparent)]",
+              currentValue === option && [
+                importantSelectedItemBorderClassName,
+                importantSelectedItemSurfaceClassName,
+                hoverImportantSelectedItemBorderClassName,
+                hoverImportantSelectedItemSurfaceClassName,
+              ],
+            )}
+            key={option}
+            onClick={() => updateValue(option)}
+            type="button"
+            variant="outline"
+          >
+            <span
+              aria-hidden="true"
+              className={cn(
+                "pointer-events-none inline-flex size-2 rounded-full bg-[color:color-mix(in_oklab,var(--foreground)_18%,transparent)] transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out",
+                currentValue === option &&
+                  "scale-110 bg-[color:var(--foreground)]",
+              )}
+            />
+          </Button>
+        ))}
+      </div>
+    </Field>
+  );
+}

package/templates/ui/components/controls/anchor-grid/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { AnchorGridControl } from "./anchor-grid-control";
+export type { AnchorGridControlProps, AnchorGridValue } from "./anchor-grid-control";