@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,401 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { EditableSliderValueLabel, Field, Input } from "../../primitives";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+  type CurvePoint,
+} from "../control-types";
+import { cn } from "../../../lib/utils";
+
+export type VectorControlValue = {
+  x: string;
+  y: string;
+};
+
+export type VectorPadVariant =
+  | "default"
+  | "whiteBalance"
+  | "colorBalance"
+  | "chromaOffset"
+  | "toneBias";
+
+export type VectorControlProps = VectorControlValue & {
+  defaultValue?: Partial<VectorControlValue>;
+  name: string;
+  onValueChange?: ControlValueChangeHandler<VectorControlValue>;
+  padShape?: "compact" | "square";
+  padVariant?: VectorPadVariant;
+  xLabel?: string;
+  yLabel?: string;
+};
+
+function clamp(value: number, min = 0, max = 1): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function pointFromEvent(event: React.PointerEvent<HTMLElement>): 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);
+
+  return { x, y };
+}
+
+type VectorPadStyle = React.CSSProperties & {
+  "--xy-pad-display-x": string;
+  "--xy-pad-display-y": string;
+  "--xy-pad-handle-margin": string;
+  "--xy-pad-x": string;
+  "--xy-pad-y": string;
+};
+
+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%)";
+
+const colorBalancePadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #1dbdd3 70%, transparent),color-mix(in oklab, var(--foreground) 7%, transparent) 50%,color-mix(in oklab, #ff4a45 74%, transparent)),linear-gradient(180deg,color-mix(in oklab, #f2d94c 66%, transparent),transparent 50%,color-mix(in oklab, #315cff 70%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const chromaOffsetPadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #ff2f55 68%, transparent),transparent 38%,transparent 62%,color-mix(in oklab, #25c7ff 70%, transparent)),linear-gradient(180deg,color-mix(in oklab, #56ff72 54%, transparent),transparent 42%,transparent 58%,color-mix(in oklab, #7b5cff 62%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 8%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const toneBiasPadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #3f56ff 60%, transparent),color-mix(in oklab, var(--foreground) 7%, transparent) 50%,color-mix(in oklab, #ffb23f 68%, transparent)),linear-gradient(180deg,color-mix(in oklab, #f05bb5 55%, transparent),transparent 50%,color-mix(in oklab, #1fbf9a 60%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const vectorPadBackgroundImages: Partial<Record<VectorPadVariant, string>> = {
+  chromaOffset: chromaOffsetPadBackgroundImage,
+  colorBalance: colorBalancePadBackgroundImage,
+  toneBias: toneBiasPadBackgroundImage,
+  whiteBalance: whiteBalancePadBackgroundImage,
+};
+
+function getVectorPoint(x: string, y: string): 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}%`;
+
+  return {
+    "--xy-pad-display-x":
+      "clamp(var(--xy-pad-handle-margin), var(--xy-pad-x), calc(100% - var(--xy-pad-handle-margin)))",
+    "--xy-pad-display-y":
+      "clamp(var(--xy-pad-handle-margin), var(--xy-pad-y), calc(100% - var(--xy-pad-handle-margin)))",
+    "--xy-pad-handle-margin": "12px",
+    "--xy-pad-x": xPosition,
+    "--xy-pad-y": yPosition,
+  };
+}
+
+function getVectorValueLabel(x: string, y: string): string {
+  return `${x}, ${y}`;
+}
+
+function normalizeVectorCoordinate(value: string | undefined): string {
+  return typeof value === "string" && value.trim() ? value : "0.00";
+}
+
+function parseVectorValueDraft(value: string): VectorControlValue | null {
+  const matches = value.match(/[+-]?(?:\d+(?:[.,]\d+)?|[.,]\d+)/g);
+
+  if (!matches || matches.length < 2) {
+    return null;
+  }
+
+  const [rawX, rawY] = matches;
+  const nextX = Number.parseFloat(rawX.replace(",", "."));
+  const nextY = Number.parseFloat(rawY.replace(",", "."));
+
+  if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) {
+    return null;
+  }
+
+  return {
+    x: clamp(nextX, -1, 1).toFixed(2),
+    y: clamp(nextY, -1, 1).toFixed(2),
+  };
+}
+
+function VectorSizeField({
+  defaultValue,
+  name,
+  onValueChange,
+  x,
+  xLabel = "X",
+  y,
+  yLabel = "Y",
+}: VectorControlProps): React.JSX.Element {
+  const [draftValue, setDraftValue] = React.useState({ x, y });
+  const committedValueRef = React.useRef({ x, y });
+  const defaultValueRef = React.useRef({
+    x: normalizeVectorCoordinate(defaultValue?.x),
+    y: normalizeVectorCoordinate(defaultValue?.y),
+  });
+
+  React.useEffect(() => {
+    committedValueRef.current = { x, y };
+    setDraftValue({ x, y });
+  }, [x, y]);
+
+  React.useEffect(() => {
+    defaultValueRef.current = {
+      x: normalizeVectorCoordinate(defaultValue?.x),
+      y: normalizeVectorCoordinate(defaultValue?.y),
+    };
+  }, [defaultValue?.x, defaultValue?.y]);
+
+  function commitVector(): void {
+    const nextValue = {
+      x: draftValue.x.trim() === "" ? defaultValueRef.current.x : draftValue.x,
+      y: draftValue.y.trim() === "" ? defaultValueRef.current.y : draftValue.y,
+    };
+
+    setDraftValue(nextValue);
+
+    if (
+      nextValue.x !== committedValueRef.current.x ||
+      nextValue.y !== committedValueRef.current.y
+    ) {
+      onValueChange?.(nextValue);
+    }
+  }
+
+  function cancelDraft(): void {
+    setDraftValue(committedValueRef.current);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitVector();
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelDraft();
+      event.currentTarget.blur();
+    }
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <div className="flex items-center justify-between gap-3">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+      </div>
+      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-1.5">
+        <Input
+          aria-label={`${name} ${xLabel}`}
+          className="font-mono"
+          onBlur={commitVector}
+          onChange={(event) =>
+            setDraftValue((current) => ({ ...current, x: event.target.value }))
+          }
+          onKeyDown={handleKeyDown}
+          size="default"
+          value={draftValue.x}
+        />
+        <Input
+          aria-label={`${name} ${yLabel}`}
+          className="font-mono"
+          onBlur={commitVector}
+          onChange={(event) =>
+            setDraftValue((current) => ({ ...current, y: event.target.value }))
+          }
+          onKeyDown={handleKeyDown}
+          size="default"
+          value={draftValue.y}
+        />
+      </div>
+    </Field>
+  );
+}
+
+function VectorPadGuides({ isDragging }: { isDragging: boolean }): React.JSX.Element {
+  const motionClass = isDragging
+    ? "transition-none"
+    : "transition-[top] duration-[260ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]";
+  const verticalMotionClass = isDragging
+    ? "transition-none"
+    : "transition-[left] duration-[260ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]";
+
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-x-0 z-10 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_20%,transparent),transparent)]",
+          motionClass,
+        )}
+        style={{ top: "var(--xy-pad-display-y)" }}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute top-0 bottom-0 z-10 w-px bg-[linear-gradient(180deg,transparent,color-mix(in_oklab,var(--foreground)_20%,transparent),transparent)]",
+          verticalMotionClass,
+        )}
+        style={{ left: "var(--xy-pad-display-x)" }}
+      />
+    </>
+  );
+}
+
+function VectorPadHandle({ isDragging }: { isDragging: boolean }): React.JSX.Element {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "xy-handle group/xy-handle pointer-events-auto absolute z-20 size-3 -translate-x-1/2 -translate-y-1/2 cursor-default will-change-[left,top,transform]",
+        isDragging
+          ? "cursor-pointer transition-transform duration-[120ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+          : "transition-[left,top,transform] duration-[260ms,260ms,120ms] ease-[cubic-bezier(0.34,1.56,0.64,1),cubic-bezier(0.34,1.56,0.64,1),cubic-bezier(0.22,1,0.36,1)] hover:cursor-pointer",
+      )}
+      style={{ left: "var(--xy-pad-display-x)", top: "var(--xy-pad-display-y)" }}
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute inset-[-5px] rounded-full bg-[color:color-mix(in_oklab,var(--foreground)_12%,transparent)] opacity-0 blur-[8px] transition-[opacity,scale] duration-200 ease-out",
+            isDragging ? "scale-[1.45] opacity-100" : "scale-95",
+          )}
+        />
+      <span
+        className={cn(
+          "relative block size-full rounded-full bg-[radial-gradient(circle_at_30%_30%,color-mix(in_oklab,var(--foreground)_95%,transparent),color-mix(in_oklab,var(--foreground)_76%,transparent)),linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_20%,transparent),color-mix(in_oklab,var(--foreground)_6%,transparent))] shadow-[0_4px_10px_color-mix(in_oklab,var(--background)_20%,transparent)] transition-[scale,background-color,box-shadow] duration-200 ease-out will-change-transform motion-reduce:transition-none",
+          isDragging ? "scale-[1.3333]" : "group-hover/xy-handle:scale-[1.3333]",
+        )}
+      />
+    </div>
+  );
+}
+
+function VectorPadField({
+  name,
+  onValueChange,
+  padShape = "compact",
+  padVariant = "default",
+  x,
+  y,
+}: VectorControlProps): React.JSX.Element {
+  const [isPointerDragging, setIsPointerDragging] = React.useState(false);
+  const normalizedX = normalizeVectorCoordinate(x);
+  const normalizedY = normalizeVectorCoordinate(y);
+  const point = getVectorPoint(normalizedX, normalizedY);
+  const valueLabel = getVectorValueLabel(normalizedX, normalizedY);
+  const vectorPadBackgroundImage = vectorPadBackgroundImages[padVariant];
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+  const updateVector = (
+    nextX: string,
+    nextY: string,
+    meta?: ControlChangeMeta,
+  ) => {
+    if (meta) {
+      onValueChange?.({ x: nextX, y: nextY }, meta);
+      return;
+    }
+
+    onValueChange?.({ x: nextX, y: nextY });
+  };
+  const commitVectorValue = (nextValue: string) => {
+    const nextVector = parseVectorValueDraft(nextValue);
+
+    if (nextVector) {
+      updateVector(nextVector.x, nextVector.y);
+    }
+  };
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`vector:${name}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function updateFromPointer(event: React.PointerEvent<HTMLButtonElement>): void {
+    const nextPoint = pointFromEvent(event);
+
+    updateVector(
+      (nextPoint.x * 2 - 1).toFixed(2),
+      (nextPoint.y * 2 - 1).toFixed(2),
+      getLiveHistoryMeta(),
+    );
+  }
+
+  function stopPointerDrag(): void {
+    setIsPointerDragging(false);
+    liveHistoryGroupRef.current = null;
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
+        <ControlFieldLabel className="min-w-0">{name}</ControlFieldLabel>
+        <EditableSliderValueLabel
+          ariaLabel={`${name} value`}
+          maxValueLabel="-1.00, -1.00"
+          onCommit={commitVectorValue}
+          valueLabel={valueLabel}
+        />
+      </div>
+      <button
+        aria-label={`${name} X/Y pad`}
+        className={cn(
+          "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-shape={padShape}
+        data-vector-pad-variant={padVariant}
+        onLostPointerCapture={stopPointerDrag}
+        onPointerCancel={stopPointerDrag}
+        onPointerDown={(event) => {
+          setIsPointerDragging(true);
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromPointer(event);
+        }}
+        onPointerMove={(event) => {
+          if (event.buttons === 1) {
+            updateFromPointer(event);
+          }
+        }}
+        onPointerUp={stopPointerDrag}
+        style={point}
+        type="button"
+      >
+        {vectorPadBackgroundImage ? (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-40"
+            style={{ backgroundImage: vectorPadBackgroundImage }}
+          />
+        ) : null}
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 rounded-[inherit] bg-[radial-gradient(circle,color-mix(in_oklab,var(--foreground)_8%,transparent)_1px,transparent_1px)] bg-[length:14px_14px]"
+        />
+        <VectorPadGuides isDragging={isPointerDragging} />
+        <VectorPadHandle isDragging={isPointerDragging} />
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-30 rounded-[inherit] border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]"
+        />
+      </button>
+    </Field>
+  );
+}
+
+export function VectorControl(props: VectorControlProps): React.JSX.Element {
+  if (props.xLabel === "Width" || props.yLabel === "Height") {
+    return <VectorSizeField {...props} />;
+  }
+
+  return <VectorPadField {...props} />;
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+export { Panel } from "./panel";
+export type { PanelProps } from "./panel";
+export { PanelActions } from "./panel-actions";
+export type {
+  PanelActionIconName,
+  PanelActionObjectOption,
+  PanelActionOption,
+  PanelActionsProps,
+} from "./panel-actions";
+export { PanelHeader } from "./panel-header";
+export {
+  PanelIconButton,
+  stopPanelHeaderButtonPointerDown,
+} from "./panel-icon-button";
+export { PanelSection } from "./panel-section";
+export type { PanelSectionProps } from "./panel-section";
+export { PanelContentSurface, PanelSurface } from "./panel-surface";

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

@@ -0,0 +1,165 @@
+"use client";
+
+import type { ReactElement, ReactNode } from "react";
+import * as React from "react";
+import {
+  ArrowCounterClockwiseIcon,
+  CheckIcon,
+  CopySimpleIcon,
+  DownloadSimpleIcon,
+  EraserIcon,
+  ExportIcon,
+  MagicWandIcon,
+  ShuffleIcon,
+  UploadSimpleIcon,
+} from "@phosphor-icons/react";
+
+import { Button } from "../primitives";
+import { cn } from "../../lib/utils";
+
+export type PanelActionIconName =
+  | "check"
+  | "copy"
+  | "download"
+  | "download-simple"
+  | "eraser"
+  | "export"
+  | "rotate-ccw"
+  | "shuffle"
+  | "upload-simple"
+  | "wand-sparkles";
+
+const panelActionIconComponents = {
+  check: CheckIcon,
+  copy: CopySimpleIcon,
+  download: DownloadSimpleIcon,
+  "download-simple": DownloadSimpleIcon,
+  eraser: EraserIcon,
+  export: ExportIcon,
+  "rotate-ccw": ArrowCounterClockwiseIcon,
+  shuffle: ShuffleIcon,
+  "upload-simple": UploadSimpleIcon,
+  "wand-sparkles": MagicWandIcon,
+} as const;
+
+type PanelActionVariant = NonNullable<
+  React.ComponentProps<typeof Button>["variant"]
+>;
+
+export type PanelActionObjectOption = {
+  children?: ReactNode;
+  className?: string;
+  icon?: PanelActionIconName | ReactElement;
+  name: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  value?: string;
+  variant: PanelActionVariant;
+};
+
+export type PanelActionOption = PanelActionObjectOption;
+
+export type PanelActionsProps = {
+  actions?: readonly PanelActionOption[];
+  children?: ReactNode;
+  className?: string;
+  columns?: 1 | 2;
+  onAction?: (value: string) => void;
+};
+
+function getPanelActionValue(action: PanelActionOption): string {
+  return action.value ?? action.name;
+}
+
+function getPanelActionContent(action: PanelActionOption): ReactNode {
+  return action.children ?? action.name;
+}
+
+function getPanelActionIcon(action: PanelActionOption): ReactNode {
+  if (action.icon == null) {
+    return null;
+  }
+
+  if (typeof action.icon !== "string") {
+    return action.icon;
+  }
+
+  const Icon = panelActionIconComponents[action.icon];
+
+  return <Icon data-icon="inline-start" />;
+}
+
+function getPanelActionAriaLabel(
+  action: PanelActionOption,
+  content: ReactNode,
+): string | undefined {
+  if (typeof content === "string") {
+    return undefined;
+  }
+
+  return action.name;
+}
+
+function shouldSpanFullActionRow(
+  index: number,
+  actionCount: number,
+  columns: 1 | 2,
+): boolean {
+  return columns === 2 && actionCount % 2 === 1 && index === actionCount - 1;
+}
+
+export function PanelActions({
+  actions,
+  children,
+  className,
+  columns,
+  onAction,
+}: PanelActionsProps): React.JSX.Element {
+  const actionCount = actions?.length ?? React.Children.count(children);
+  const resolvedColumns = columns ?? (actionCount > 1 ? 2 : 1);
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-0 gap-2",
+        resolvedColumns === 2 ? "grid-cols-2" : "grid-cols-1",
+        className,
+      )}
+      data-slot="panel-actions"
+    >
+      {actions
+        ? actions.map((action, index) => {
+            const actionContent = getPanelActionContent(action);
+            const actionValue = getPanelActionValue(action);
+            const handleActionClick: React.MouseEventHandler<
+              HTMLButtonElement
+            > = (event) => {
+              action.onClick?.(event);
+
+              if (!event.defaultPrevented) {
+                onAction?.(actionValue);
+              }
+            };
+
+            return (
+              <Button
+                aria-label={getPanelActionAriaLabel(action, actionContent)}
+                className={cn(
+                  "w-full",
+                  shouldSpanFullActionRow(index, actionCount, resolvedColumns) &&
+                    "col-span-2",
+                  action.className,
+                )}
+                key={actionValue}
+                onClick={handleActionClick}
+                type="button"
+                variant={action.variant}
+              >
+                {getPanelActionIcon(action)}
+                {actionContent}
+              </Button>
+            );
+          })
+        : children}
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { ArrowCounterClockwiseIcon } from "@phosphor-icons/react";
+
+import { PrimitiveArrowIcon } from "../primitives";
+import {
+  PanelIconButton,
+  stopPanelHeaderButtonPointerDown,
+} from "./panel-icon-button";
+
+type PanelHeaderProps = {
+  collapsed: boolean;
+  collapseLabel?: string;
+  expandLabel?: string;
+  onResetControls?: () => void;
+  onToggleCollapsed: () => void;
+  title: string;
+};
+
+export function PanelHeader({
+  collapsed,
+  collapseLabel = "Collapse controls",
+  expandLabel = "Expand controls",
+  onResetControls,
+  onToggleCollapsed,
+  title,
+}: PanelHeaderProps): React.JSX.Element {
+  return (
+    <div className="shrink-0" data-slot="properties-panel-header-shell">
+      <div
+        className="flex h-9 touch-none items-center justify-between gap-3 pr-1 pl-3 hover:cursor-grab active:cursor-grabbing"
+        data-panel-drag-handle=""
+        data-slot="properties-panel-header"
+      >
+        <p className="m-0 min-w-0 truncate text-xs-plus font-medium text-[color:var(--foreground)]">
+          {title}
+        </p>
+        <div className="inline-flex shrink-0 items-center gap-1">
+          {collapsed || !onResetControls ? null : (
+            <PanelIconButton
+              label="Reset controls"
+              onClick={onResetControls}
+              onPointerDown={stopPanelHeaderButtonPointerDown}
+              spinOnClick
+            >
+              <ArrowCounterClockwiseIcon />
+            </PanelIconButton>
+          )}
+          <PanelIconButton
+            label={collapsed ? expandLabel : collapseLabel}
+            onClick={onToggleCollapsed}
+            onPointerDown={stopPanelHeaderButtonPointerDown}
+          >
+            <PrimitiveArrowIcon direction={collapsed ? "down" : "up"} />
+          </PanelIconButton>
+        </div>
+      </div>
+    </div>
+  );
+}