@pixel-point/toolcraft 0.0.2

package/templates/ui/components/panel/panel-icon-button.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../primitives";
+import { cn } from "../../lib/utils";
+
+export type PanelIconButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  label: string;
+  onClick?: () => void;
+  onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
+  spinOnClick?: boolean;
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+};
+
+export const stopPanelHeaderButtonPointerDown: React.PointerEventHandler<
+  HTMLButtonElement
+> = (event) => {
+  event.stopPropagation();
+};
+
+export function PanelIconButton({
+  children,
+  className,
+  disabled,
+  label,
+  onClick,
+  onPointerDown,
+  spinOnClick = false,
+  tooltipSide = "top",
+}: PanelIconButtonProps): React.JSX.Element {
+  const iconRef = React.useRef<HTMLSpanElement>(null);
+
+  function animateIconPress(): void {
+    const icon = iconRef.current;
+    const prefersReducedMotion =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (!spinOnClick || !icon || prefersReducedMotion) {
+      return;
+    }
+
+    for (const animation of icon.getAnimations()) {
+      animation.cancel();
+    }
+
+    icon.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(-360deg)" }],
+      {
+        duration: 420,
+        easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      },
+    );
+  }
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>): void {
+    animateIconPress();
+    onClick?.();
+
+    if (typeof event.currentTarget.blur === "function") {
+      event.currentTarget.blur();
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label={label}
+            className={cn(
+              "data-[icon-active=true]:text-[color:var(--foreground)]",
+              className,
+            )}
+            data-icon-active={false}
+            disabled={disabled}
+            onClick={handleClick}
+            onPointerDown={onPointerDown}
+            size="icon"
+            type="button"
+            variant="ghost"
+          />
+        }
+      >
+        <span ref={iconRef} className="inline-flex origin-center">
+          {children}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side={tooltipSide}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import {
+  ControlItem,
+  ControlList,
+  ControlSection,
+  ControlSectionHeader,
+  PanelTitle,
+} from "../control-layout";
+
+export type PanelSectionProps = {
+  action?: React.ReactNode;
+  actionGroup?: "primary" | "secondary";
+  allowCompoundDividers?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  collapsed?: boolean;
+  collapsible?: boolean;
+  flush?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  spacing?: "default" | "technical";
+  title?: React.ReactNode;
+};
+
+export function PanelSection({
+  action,
+  actionGroup,
+  allowCompoundDividers,
+  children,
+  className,
+  collapsed = false,
+  collapsible = false,
+  flush = false,
+  onCollapsedChange,
+  spacing = "default",
+  title,
+}: PanelSectionProps): React.JSX.Element {
+  const isActionSection = actionGroup !== undefined;
+  const childArray = React.Children.toArray(children);
+  const hasTitle = title !== undefined && title !== null && title !== false;
+  const isSectionCollapsed = Boolean(collapsible && collapsed);
+  const shouldRenderInnerDividers = allowCompoundDividers ?? childArray.length > 1;
+  const body = (
+    <ControlList
+      className={cn(
+        !isActionSection &&
+          (spacing === "technical" ? "py-3" : "pt-2 pb-6"),
+      )}
+    >
+      {childArray.map((child, index) => (
+        <ControlItem
+          allowCompoundDividers={shouldRenderInnerDividers}
+          compoundDividerPlacement={
+            shouldRenderInnerDividers && childArray.length > 1 && index === 0
+              ? "bottom"
+              : "both"
+          }
+          flush={flush || isActionSection}
+          key={getPanelSectionChildKey(child, index)}
+        >
+          {child}
+        </ControlItem>
+      ))}
+    </ControlList>
+  );
+
+  return (
+    <ControlSection
+      className={cn(
+        !isActionSection && "py-0",
+        hasTitle && "gap-0",
+        isActionSection && "p-3",
+        className,
+      )}
+      data-collapsed={collapsible ? String(isSectionCollapsed) : undefined}
+      data-toolcraft-section-action-group={actionGroup}
+      data-toolcraft-section-actions={isActionSection ? "" : undefined}
+    >
+      {hasTitle ? (
+        <ControlSectionHeader
+          action={action}
+          collapsed={isSectionCollapsed}
+          collapsible={collapsible}
+          onCollapsedChange={onCollapsedChange}
+        >
+          <PanelTitle>{title}</PanelTitle>
+        </ControlSectionHeader>
+      ) : null}
+      {collapsible ? (
+        <PanelSectionCollapsibleBody collapsed={isSectionCollapsed}>
+          {body}
+        </PanelSectionCollapsibleBody>
+      ) : (
+        body
+      )}
+    </ControlSection>
+  );
+}
+
+function PanelSectionCollapsibleBody({
+  collapsed,
+  children,
+}: {
+  collapsed: boolean;
+  children: React.ReactNode;
+}): React.JSX.Element | null {
+  const [shouldRender, setShouldRender] = React.useState(!collapsed);
+  const [isVisuallyCollapsed, setIsVisuallyCollapsed] = React.useState(collapsed);
+
+  React.useEffect(() => {
+    if (collapsed) {
+      setIsVisuallyCollapsed(true);
+      return;
+    }
+
+    if (shouldRender) {
+      setIsVisuallyCollapsed(false);
+      return;
+    }
+
+    setShouldRender(true);
+    setIsVisuallyCollapsed(true);
+    const frame = window.requestAnimationFrame(() => {
+      setIsVisuallyCollapsed(false);
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [collapsed, shouldRender]);
+
+  function handleTransitionEnd(event: React.TransitionEvent<HTMLDivElement>): void {
+    if (event.target !== event.currentTarget || !collapsed) {
+      return;
+    }
+
+    setShouldRender(false);
+  }
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <div
+      aria-hidden={collapsed ? "true" : undefined}
+      className={cn(
+        "grid overflow-hidden transition-[grid-template-rows,opacity] duration-180 ease-out motion-reduce:transition-none",
+        isVisuallyCollapsed
+          ? "pointer-events-none grid-rows-[0fr] opacity-0"
+          : "grid-rows-[1fr] opacity-100",
+      )}
+      data-collapsed={String(collapsed)}
+      data-slot="panel-section-collapsible-body"
+      onTransitionEnd={handleTransitionEnd}
+    >
+      <div className="min-h-0 overflow-hidden">{children}</div>
+    </div>
+  );
+}
+
+function getPanelSectionChildKey(
+  child: React.ReactNode,
+  index: number,
+): React.Key {
+  return React.isValidElement(child) && child.key !== null ? child.key : index;
+}

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

@@ -0,0 +1,206 @@
+"use client";
+
+import * as React from "react";
+
+import { ScrollFade } from "../primitives";
+import { cn } from "../../lib/utils";
+
+const panelDividerClassName =
+  "border-t border-[color:color-mix(in_oklab,var(--border)_8%,transparent)]";
+const panelContentScrollFadeHeight = 44;
+const panelContentViewportClassName =
+  "flex min-h-0 flex-col overflow-x-hidden overflow-y-auto overscroll-contain";
+
+export const PanelSurface = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function PanelSurface({ children, className, ...props }, ref) {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={cn(
+        "floating-popup-surface toolcraft-panel-surface isolate border text-[color:var(--popover-foreground)] supports-backdrop-filter:backdrop-blur-2xl supports-backdrop-filter:backdrop-saturate-150",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+export const PanelContentSurface = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    scrollFadeMode?: "always" | "overflow";
+    stickyFooterActive?: boolean;
+    stickyFooterProgress?: number | null;
+    stickyFooter?: React.ReactNode;
+  }
+>(function PanelContentSurface(
+  {
+    children,
+    className,
+    scrollFadeMode = "always",
+    stickyFooter,
+    stickyFooterActive = false,
+    stickyFooterProgress = null,
+    ...props
+  },
+  ref,
+) {
+  const [viewportElement, setViewportElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [hasOverflow, setHasOverflow] = React.useState(
+    scrollFadeMode === "always",
+  );
+  const attachViewport = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setViewportElement(node);
+
+      if (typeof ref === "function") {
+        ref(node);
+        return;
+      }
+
+      if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+  const hasStickyFooter = React.Children.count(stickyFooter) > 0;
+
+  React.useLayoutEffect(() => {
+    if (scrollFadeMode !== "overflow") {
+      setHasOverflow(true);
+      return;
+    }
+
+    if (!viewportElement) {
+      setHasOverflow(false);
+      return;
+    }
+
+    const updateOverflow = () => {
+      setHasOverflow(
+        viewportElement.scrollHeight > viewportElement.clientHeight + 1,
+      );
+    };
+
+    updateOverflow();
+    window.addEventListener("resize", updateOverflow);
+
+    const resizeObserver =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(updateOverflow);
+
+    resizeObserver?.observe(viewportElement);
+
+    const contentNode = viewportElement.firstElementChild;
+    if (contentNode) {
+      resizeObserver?.observe(contentNode);
+    }
+
+    return () => {
+      window.removeEventListener("resize", updateOverflow);
+      resizeObserver?.disconnect();
+    };
+  }, [scrollFadeMode, viewportElement]);
+
+  if (scrollFadeMode === "overflow" && !hasOverflow) {
+    const viewport = (
+      <div
+        {...props}
+        className={cn(
+          panelContentViewportClassName,
+          hasStickyFooter ? "flex-1" : panelDividerClassName,
+          className,
+        )}
+        ref={attachViewport}
+      >
+        {children}
+      </div>
+    );
+
+    return hasStickyFooter ? (
+      <PanelContentWithStickyFooter
+        stickyFooter={stickyFooter}
+        stickyFooterActive={stickyFooterActive}
+        stickyFooterProgress={stickyFooterProgress}
+      >
+        {viewport}
+      </PanelContentWithStickyFooter>
+    ) : (
+      viewport
+    );
+  }
+
+  const viewport = (
+    <ScrollFade
+      {...props}
+      className={cn("flex min-h-0 flex-col", hasStickyFooter && "flex-1", className)}
+      containerClassName={cn(
+        "flex min-h-0 flex-col",
+        hasStickyFooter ? "flex-1" : panelDividerClassName,
+      )}
+      height={panelContentScrollFadeHeight}
+      preset="default"
+      showOppositeSide
+      side="bottom"
+      visibilityMode="terminal"
+      viewportRef={attachViewport}
+    >
+      {children}
+    </ScrollFade>
+  );
+
+  return hasStickyFooter ? (
+    <PanelContentWithStickyFooter
+      stickyFooter={stickyFooter}
+      stickyFooterActive={stickyFooterActive}
+      stickyFooterProgress={stickyFooterProgress}
+    >
+      {viewport}
+    </PanelContentWithStickyFooter>
+  ) : (
+    viewport
+  );
+});
+
+function PanelContentWithStickyFooter({
+  children,
+  stickyFooter,
+  stickyFooterActive,
+  stickyFooterProgress,
+}: {
+  children: React.ReactNode;
+  stickyFooter: React.ReactNode;
+  stickyFooterActive: boolean;
+  stickyFooterProgress: number | null;
+}): React.JSX.Element {
+  const stickyFooterStyle =
+    typeof stickyFooterProgress === "number"
+      ? ({
+          "--sticky-footer-progress": String(stickyFooterProgress),
+        } as React.CSSProperties)
+      : undefined;
+
+  return (
+    <div className={cn("flex min-h-0 flex-col", panelDividerClassName)}>
+      {children}
+      <div
+        className="relative shrink-0 before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-px before:origin-left before:scale-x-[var(--sticky-footer-progress,1)] before:bg-[color:var(--accent)] before:opacity-0 before:transition-[opacity,transform] before:duration-200 before:ease-out before:content-[''] data-[sticky-footer-active=true]:before:opacity-100"
+        data-sticky-footer-progress={
+          typeof stickyFooterProgress === "number" ? stickyFooterProgress : undefined
+        }
+        data-sticky-footer-active={stickyFooterActive ? "true" : undefined}
+        data-slot="toolcraft-panel-sticky-actions"
+        style={stickyFooterStyle}
+      >
+        {stickyFooter}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,210 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlItem, ControlList, ControlSection } from "../control-layout";
+import { cn } from "../../lib/utils";
+import { PanelHeader } from "./panel-header";
+import { PanelContentSurface, PanelSurface } from "./panel-surface";
+import { PanelSection } from "./panel-section";
+
+export type PanelProps = {
+  children: React.ReactNode;
+  className?: string;
+  collapsed?: boolean;
+  contentTransitionSuppressionKey?: unknown;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  onResetControls?: () => void;
+  stickyFooterActive?: boolean;
+  stickyFooterProgress?: number | null;
+  title: string;
+};
+
+export function Panel({
+  children,
+  className,
+  collapsed,
+  contentTransitionSuppressionKey,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  onResetControls = noop,
+  stickyFooterActive = false,
+  stickyFooterProgress = null,
+  title,
+}: PanelProps): React.JSX.Element {
+  const [internalCollapsed, setInternalCollapsed] =
+    React.useState(defaultCollapsed);
+  const resolvedCollapsed = collapsed ?? internalCollapsed;
+  const hasPanelContentSections = hasDirectPanelContentSections(children);
+  const panelContent = hasPanelContentSections ? (
+    children
+  ) : (
+    <ImplicitPanelSection>{children}</ImplicitPanelSection>
+  );
+  const { bodyChildren, stickyFooterChildren } =
+    splitPanelContentStickyFooter(panelContent);
+  const suppressContentTransitions = useInitialPanelContentTransitionSuppression(
+    contentTransitionSuppressionKey === undefined
+      ? resolvedCollapsed
+      : `${resolvedCollapsed}:${String(contentTransitionSuppressionKey)}`,
+  );
+
+  function toggleCollapsed(): void {
+    const nextCollapsed = !resolvedCollapsed;
+    setInternalCollapsed(nextCollapsed);
+    onCollapsedChange?.(nextCollapsed);
+  }
+
+  return (
+    <PanelSurface
+      className={cn(
+        "pointer-events-auto flex max-h-[calc(100dvh-1.25rem)] flex-col overflow-hidden rounded-lg p-0 w-[300px]",
+        className,
+      )}
+      data-panel-id="properties"
+    >
+      <PanelHeader
+        collapsed={resolvedCollapsed}
+        onResetControls={onResetControls}
+        onToggleCollapsed={toggleCollapsed}
+        title={title}
+      />
+      {resolvedCollapsed ? null : (
+        <PanelContentSurface
+          data-toolcraft-controls-mounting={
+            suppressContentTransitions ? "true" : undefined
+          }
+          data-slot="toolcraft-panel-content"
+          stickyFooter={
+            stickyFooterChildren.length > 0 ? stickyFooterChildren : undefined
+          }
+          stickyFooterActive={stickyFooterActive}
+          stickyFooterProgress={stickyFooterProgress}
+        >
+          {bodyChildren}
+        </PanelContentSurface>
+      )}
+    </PanelSurface>
+  );
+}
+
+function noop(): void {}
+
+function useInitialPanelContentTransitionSuppression(
+  dependency: unknown,
+): boolean {
+  const [suppressionState, setSuppressionState] = React.useState(() => ({
+    dependency,
+    isSuppressing: true,
+  }));
+
+  React.useEffect(() => {
+    setSuppressionState({ dependency, isSuppressing: true });
+
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    if (typeof window.requestAnimationFrame !== "function") {
+      const timeout = window.setTimeout(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      }, 0);
+
+      return () => window.clearTimeout(timeout);
+    }
+
+    let secondFrame = 0;
+    const firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [dependency]);
+
+  return (
+    suppressionState.dependency !== dependency || suppressionState.isSuppressing
+  );
+}
+
+function hasDirectPanelContentSections(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(isPanelContentSection);
+}
+
+function isPanelContentSection(child: React.ReactNode): boolean {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+
+  if (child.type === React.Fragment) {
+    const props = child.props as { children?: React.ReactNode };
+
+    return hasDirectPanelContentSections(props.children);
+  }
+
+  return child.type === ControlSection || child.type === PanelSection;
+}
+
+function splitPanelContentStickyFooter(children: React.ReactNode): {
+  bodyChildren: React.ReactNode[];
+  stickyFooterChildren: React.ReactNode[];
+} {
+  const childArray = React.Children.toArray(children);
+  let stickyFooterStartIndex = childArray.length;
+
+  while (
+    stickyFooterStartIndex > 0 &&
+    isPanelStickyFooterSection(childArray[stickyFooterStartIndex - 1])
+  ) {
+    stickyFooterStartIndex -= 1;
+  }
+
+  return {
+    bodyChildren: childArray.slice(0, stickyFooterStartIndex),
+    stickyFooterChildren: childArray.slice(stickyFooterStartIndex),
+  };
+}
+
+function isPanelStickyFooterSection(child: React.ReactNode): boolean {
+  if (!React.isValidElement<Record<string, unknown>>(child)) {
+    return false;
+  }
+
+  return (
+    child.props["data-toolcraft-section-actions"] !== undefined ||
+    child.props.actionGroup !== undefined
+  );
+}
+
+function ImplicitPanelSection({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element {
+  const childArray = React.Children.toArray(children);
+  const shouldRenderInnerDividers = childArray.length > 1;
+
+  return (
+    <ControlSection className="py-0">
+      <ControlList className="pt-2 pb-6">
+        {childArray.map((child, index) => (
+          <ControlItem
+            allowCompoundDividers={shouldRenderInnerDividers}
+            key={getPanelChildKey(child, index)}
+          >
+            {child}
+          </ControlItem>
+        ))}
+      </ControlList>
+    </ControlSection>
+  );
+}
+
+function getPanelChildKey(child: React.ReactNode, index: number): React.Key {
+  return React.isValidElement(child) && child.key !== null ? child.key : index;
+}