@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/ui/components/controls/file-drop/{file-drop-model.tsx → file-drop-presentation.tsx}

@@ -5,8 +5,13 @@ import * as React from "react";
 import { cn } from "../../../lib/utils";
 import type { ActionControlOption } from "../actions/actions-control";
 import type {
+  FileDropAssetKind,
+  FileDropImageSize,
   FileDropImageTransform,
   FileDropImageTransformOperation,
+  FileDropPresentation,
+  FileDropPresentationEntry,
+  FileDropPresentationItem,
   FileDropPreview,
 } from "./file-drop-types";
 
@@ -90,7 +95,7 @@ export function getImageTransformStyle(
 }
 
 export function getPreviewFrameStyle(
-  size: FileDropPreview["size"],
+  size: FileDropImageSize | undefined,
 ): React.CSSProperties {
   if (!size || size.height <= 0 || size.width <= 0) {
     return { width: "100%" };
@@ -112,7 +117,7 @@ export function isPreviewQuarterTurn(
 }
 
 export function getPreviewImageStyle(
-  size: FileDropPreview["size"],
+  size: FileDropImageSize | undefined,
   transform?: FileDropImageTransform,
 ): React.CSSProperties {
   const rotationDeg = normalizeImageRotation(transform?.rotationDeg);
@@ -132,6 +137,127 @@ export function getPreviewKey(item: FileDropPreview, index: number): string {
   return item.id ?? `${item.src}:${index}`;
 }
 
+export function getPresentationItemKey(
+  item: FileDropPresentationItem,
+  _index: number,
+): string {
+  return item.id;
+}
+
+export function reorderFileDropPresentationItems<AssetKind extends string>(
+  items: readonly FileDropPresentationItem<AssetKind>[],
+  visibleEntries: readonly FileDropPresentationEntry<AssetKind>[],
+  activeKey: string,
+  overKey: string,
+): FileDropPresentationItem<AssetKind>[] | null {
+  const activeIndex = visibleEntries.findIndex((entry) => entry.key === activeKey);
+  const overIndex = visibleEntries.findIndex((entry) => entry.key === overKey);
+
+  if (activeIndex < 0 || overIndex < 0 || activeIndex === overIndex) {
+    return null;
+  }
+
+  const reorderedEntries = [...visibleEntries];
+  const [movedEntry] = reorderedEntries.splice(activeIndex, 1);
+
+  if (!movedEntry) {
+    return null;
+  }
+
+  reorderedEntries.splice(overIndex, 0, movedEntry);
+  const visibleSourceIndices = visibleEntries
+    .map((entry) => entry.sourceIndex)
+    .sort((left, right) => left - right);
+  const reorderedItems = [...items];
+
+  reorderedEntries.forEach((entry, index) => {
+    const sourceIndex = visibleSourceIndices[index];
+
+    if (sourceIndex !== undefined) {
+      reorderedItems[sourceIndex] = entry.item;
+    }
+  });
+
+  return reorderedItems;
+}
+
+type LegacyFileDropPresentationInput = {
+  accept?: string;
+  assetKind: FileDropAssetKind;
+  multiple: boolean;
+  preview?: FileDropPreview;
+  previews?: readonly FileDropPreview[];
+};
+
+export type LegacyFileDropPresentation = {
+  dropTargetLabel: string;
+  previews: readonly FileDropPreview[];
+  presentation: FileDropPresentation<FileDropAssetKind, never, never>;
+};
+
+export function createLegacyFileDropPresentation({
+  accept = "",
+  assetKind,
+  multiple,
+  preview,
+  previews,
+}: LegacyFileDropPresentationInput): LegacyFileDropPresentation {
+  const previewItems = previews ?? (preview ? [preview] : []);
+  const items = previewItems.map(
+    (item, index): FileDropPresentationItem<FileDropAssetKind> => ({
+      alt: item.alt,
+      assetKind: item.assetKind ?? assetKind,
+      fileName:
+        item.fileName ??
+        item.alt ??
+        (assetKind === "file" ? "Untitled file" : "Untitled image"),
+      id: getPreviewKey(item, index),
+      previewSrc: item.src,
+      size: item.size,
+      transform: item.transform,
+    }),
+  );
+  const hasContent = previewItems.some((item) => Boolean(item.src));
+  const presenter =
+    assetKind === "file"
+      ? "file-list"
+      : multiple && items.length > 1
+        ? "image-grid"
+        : "single-image";
+  const emptyTitle =
+    assetKind === "file" ? "Click to upload a file" : "Click to upload an image";
+  const dropTargetLabel = hasContent
+    ? multiple
+      ? assetKind === "file"
+        ? "Drop files"
+        : "Drop image files"
+      : assetKind === "file"
+        ? "Replace file"
+        : "Replace image file"
+    : multiple
+      ? assetKind === "file"
+        ? "Browse files"
+        : "Browse image files"
+      : assetKind === "file"
+        ? "Browse file"
+        : "Browse image file";
+
+  return {
+    dropTargetLabel,
+    previews: previewItems,
+    presentation: {
+      accept,
+      allowsFileBatch: multiple,
+      allowsFolderSelection: false,
+      emptyDescription: "or drag it onto the canvas",
+      emptyTitle,
+      items,
+      presenter,
+      secondaryActions: [],
+    },
+  };
+}
+
 export function FileDropPlusGlyph({
   className,
 }: {

package/templates/ui/components/controls/file-drop/file-drop-single-preview.tsx

@@ -9,47 +9,54 @@ import {
   getPreviewFrameStyle,
   getPreviewImageStyle,
   isPreviewQuarterTurn,
-} from "./file-drop-model";
-import type { FileDropPreview } from "./file-drop-types";
+} from "./file-drop-presentation";
+import type { FileDropPresentationItem } from "./file-drop-types";
 
 type FileDropSinglePreviewProps = {
-  onClear?: () => void;
-  preview?: FileDropPreview;
+  item: FileDropPresentationItem;
+  onActivate: () => void;
+  onRemove?: () => void;
 };
 
 export function FileDropSinglePreview({
-  onClear,
-  preview,
+  item,
+  onActivate,
+  onRemove,
 }: FileDropSinglePreviewProps): React.JSX.Element {
   return (
-    <>
-      {preview ? (
-        <div
-          className="relative w-full max-w-full overflow-hidden rounded-[calc(var(--radius-lg)-4px)]"
-          data-slot="file-upload-preview-frame"
-          style={getPreviewFrameStyle(preview.size)}
-        >
+    <div
+      className="relative w-full max-w-full overflow-hidden rounded-[calc(var(--radius-lg)-4px)]"
+      data-slot="file-upload-preview-frame"
+      style={getPreviewFrameStyle(item.size)}
+    >
+      <button
+        aria-label={`Replace ${item.alt ?? item.fileName}`}
+        className="absolute inset-0 block size-full border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-inset"
+        onClick={onActivate}
+        type="button"
+      >
+        {item.previewSrc ? (
           <img
-            alt={preview.alt ?? ""}
+            alt={item.alt ?? item.fileName}
             className={cn(
               "absolute top-1/2 left-1/2 block h-auto object-contain",
-              isPreviewQuarterTurn(preview.transform) ? "max-w-none" : "max-h-full max-w-full",
+              isPreviewQuarterTurn(item.transform) ? "max-w-none" : "max-h-full max-w-full",
             )}
             draggable={false}
-            height={preview.size?.height}
-            src={preview.src}
-            style={getPreviewImageStyle(preview.size, preview.transform)}
-            width={preview.size?.width}
+            height={item.size?.height}
+            src={item.previewSrc}
+            style={getPreviewImageStyle(item.size, item.transform)}
+            width={item.size?.width}
           />
-        </div>
-      ) : null}
-      {onClear ? (
+        ) : null}
+      </button>
+      {onRemove ? (
         <Button
-          aria-label="Remove image"
+          aria-label={`Remove ${item.alt ?? item.fileName}`}
           className="absolute top-3 right-3"
           onClick={(event) => {
             event.stopPropagation();
-            onClear();
+            onRemove();
           }}
           size="icon-sm"
           type="button"
@@ -58,6 +65,6 @@ export function FileDropSinglePreview({
           <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
         </Button>
       ) : null}
-    </>
+    </div>
   );
 }

package/templates/ui/components/controls/file-drop/file-drop-types.ts

@@ -1,3 +1,10 @@
+import type { ReactElement } from "react";
+
+import type {
+  ActionControlIconName,
+  ActionsControlItemState,
+} from "../actions/actions-control";
+
 export type FileDropAssetKind = "file" | "image";
 
 export type FileDropImageTransform = {
@@ -12,37 +19,121 @@ export type FileDropImageTransformOperation =
   | "rotate-left"
   | "rotate-right";
 
+export type FileDropImageSize = {
+  height: number;
+  width: number;
+};
+
 export type FileDropPreview = {
   alt?: string;
   assetKind?: FileDropAssetKind;
   fileName?: string;
   id?: string;
-  size?: {
-    height: number;
-    width: number;
-  };
+  size?: FileDropImageSize;
   src: string;
   transform?: FileDropImageTransform;
 };
 
-export type FileDropPreviewEntry = {
-  item: FileDropPreview;
+export type FileDropPresentationItem<AssetKind extends string = string> = {
+  alt?: string;
+  assetKind: AssetKind;
+  fileName: string;
+  id: string;
+  previewSrc?: string;
+  size?: FileDropImageSize;
+  transform?: FileDropImageTransform;
+};
+
+export type FileDropPresentationEntry<AssetKind extends string = string> = {
+  item: FileDropPresentationItem<AssetKind>;
   key: string;
+  sourceIndex: number;
 };
 
-export type FileDropControlProps = {
+export type FileDropPresentationAction = {
+  ariaLabel?: string;
+  icon?: ActionControlIconName | ReactElement;
+  label: string;
+  state?: ActionsControlItemState;
+  value: string;
+};
+
+export type FileDropPresentation<
+  AssetKind extends string = string,
+  Feedback = unknown,
+  Status = unknown,
+> = {
   accept: string;
+  allowsFileBatch: boolean;
+  allowsFolderSelection: boolean;
+  emptyDescription: string;
+  emptyTitle: string;
+  feedback?: Feedback;
+  items: readonly FileDropPresentationItem<AssetKind>[];
+  presenter: "file-list" | "image-grid" | "model-item" | "single-image";
+  secondaryActions: readonly FileDropPresentationAction[];
+  status?: Status;
+};
+
+type FileDropControlSharedProps<AssetKind extends string> = {
+  onClear?: () => void;
+  onItemRemove?: (
+    item: FileDropPresentationItem<AssetKind>,
+    index: number,
+  ) => void;
+  onItemsReorder?: (items: FileDropPresentationItem<AssetKind>[]) => void;
+};
+
+type FileDropPresentationControlProps<
+  AssetKind extends string,
+  Feedback,
+  Status,
+> = FileDropControlSharedProps<AssetKind> & {
+  accept?: never;
+  assetKind?: never;
+  multiple?: never;
+  onFileSelect?: never;
+  onFilesSelect: (files: File[]) => void;
+  onFolderSelect?: (files: File[]) => void;
+  onAction?: (value: string) => void;
+  onItemSelect?: (
+    item: FileDropPresentationItem<AssetKind>,
+    index: number,
+  ) => void;
+  onPreviewRemove?: never;
+  onPreviewReorder?: never;
+  onPreviewTransform?: never;
+  presentation: FileDropPresentation<AssetKind, Feedback, Status>;
+  preview?: never;
+  previews?: never;
+};
+
+type FileDropLegacyControlProps = FileDropControlSharedProps<FileDropAssetKind> & {
+  accept?: string;
   assetKind?: FileDropAssetKind;
   multiple?: boolean;
-  onClear?: () => void;
   onFileSelect?: (file: File) => void;
   onFilesSelect?: (files: File[]) => void;
+  onFolderSelect?: never;
+  onAction?: never;
+  onItemRemove?: never;
+  onItemSelect?: never;
+  onItemsReorder?: never;
   onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
   onPreviewReorder?: (orderedPreviews: FileDropPreview[]) => void;
   onPreviewTransform?: (
     preview: FileDropPreview,
     operation: FileDropImageTransformOperation,
   ) => void;
+  presentation?: undefined;
   preview?: FileDropPreview;
   previews?: readonly FileDropPreview[];
 };
+
+export type FileDropControlProps<
+  AssetKind extends string = FileDropAssetKind,
+  Feedback = unknown,
+  Status = unknown,
+> =
+  | FileDropLegacyControlProps
+  | FileDropPresentationControlProps<AssetKind, Feedback, Status>;

package/templates/ui/components/controls/file-drop/index.ts

@@ -1,10 +1,14 @@
 "use client";
 
 export { FileDropControl } from "./file-drop-control";
-export type { FileDropControlProps } from "./file-drop-types";
 export type {
   FileDropAssetKind,
+  FileDropControlProps,
+  FileDropImageSize,
   FileDropImageTransform,
   FileDropImageTransformOperation,
+  FileDropPresentation,
+  FileDropPresentationAction,
+  FileDropPresentationItem,
   FileDropPreview,
 } from "./file-drop-types";

package/templates/ui/components/controls/font-picker/font-catalog.node-import.test.ts

@@ -0,0 +1,24 @@
+import { spawnSync } from "node:child_process";
+import { pathToFileURL } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+describe("font catalog Node import", () => {
+  it("loads under Node without a missing JSON import attribute", () => {
+    const moduleUrl = pathToFileURL(
+      new URL("./font-catalog.ts", import.meta.url).pathname,
+    ).href;
+    const result = spawnSync(
+      process.execPath,
+      [
+        "--experimental-strip-types",
+        "--input-type=module",
+        "--eval",
+        `await import(${JSON.stringify(moduleUrl)})`,
+      ],
+      { encoding: "utf8" },
+    );
+
+    expect(result.status, result.stderr).toBe(0);
+  });
+});

package/templates/ui/components/controls/font-picker/font-catalog.ts

@@ -1,4 +1,4 @@
-import catalogJson from "./font-catalog.json";
+import catalogJson from "./font-catalog.json" with { type: "json" };
 
 export type FontPickerFontCategory =
   | "display"

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

@@ -5,6 +5,7 @@ export type {
   ActionControlIconName,
   ActionControlObjectOption,
   ActionControlOption,
+  ActionsControlItemState,
   ActionsControlProps as ActionsProps,
   ActionsControlProps,
 } from "./actions";
@@ -119,8 +120,12 @@ export type {
   FileDropAssetKind,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
+  FileDropImageSize,
   FileDropImageTransform,
   FileDropImageTransformOperation,
+  FileDropPresentation,
+  FileDropPresentationAction,
+  FileDropPresentationItem,
   FileDropPreview,
 } from "./file-drop";
 export {
@@ -184,6 +189,8 @@ export type {
   SelectControlProps,
   SelectControlProps as SelectProps,
 } from "./select";
+export { TabsControl, doesTabsControlOverflow } from "./tabs";
+export type { TabsControlProps } from "./tabs";
 export { SliderControl, SliderControl as Slider } from "./slider";
 export type {
   SliderControlProps,

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

@@ -0,0 +1,4 @@
+"use client";
+
+export { TabsControl, doesTabsControlOverflow } from "./tabs-control";
+export type { TabsControlProps } from "./tabs-control";

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

@@ -0,0 +1,166 @@
+"use client";
+
+import * as React from "react";
+
+import { Tabs, TabsList, TabsTrigger } from "../../composites";
+import { cn } from "../../../lib/utils";
+import type { ControlOption } from "../control-types";
+import { StaticSelect } from "../select";
+
+const OVERFLOW_TOLERANCE_PX = 1;
+
+export type TabsControlProps = {
+  ariaLabel: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  options: readonly ControlOption[];
+  value?: string;
+};
+
+export function doesTabsControlOverflow(list: HTMLElement): boolean {
+  if (list.clientWidth <= 0) {
+    return false;
+  }
+
+  if (list.scrollWidth > list.clientWidth + OVERFLOW_TOLERANCE_PX) {
+    return true;
+  }
+
+  return Array.from(
+    list.querySelectorAll<HTMLElement>(
+      '[data-slot="tabs-trigger"], [data-slot="tabs-trigger-label"]',
+    ),
+  ).some(
+    (tab) =>
+      tab.clientWidth > 0 &&
+      tab.scrollWidth > tab.clientWidth + OVERFLOW_TOLERANCE_PX,
+  );
+}
+
+export function TabsControl({
+  ariaLabel,
+  disabled,
+  onValueChange,
+  options,
+  value,
+}: TabsControlProps): React.JSX.Element {
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [usesSelect, setUsesSelect] = React.useState(false);
+  const [currentValue, setCurrentValue] = React.useState(
+    () => value ?? options[0]?.value ?? "",
+  );
+  const selectedValue =
+    options.find((option) => option.value === (value ?? currentValue))?.value ??
+    options[0]?.value ??
+    "";
+
+  React.useEffect(() => {
+    if (typeof value !== "undefined") {
+      setCurrentValue(value);
+      return;
+    }
+
+    if (!options.some((option) => option.value === currentValue)) {
+      setCurrentValue(options[0]?.value ?? "");
+    }
+  }, [currentValue, options, value]);
+
+  React.useLayoutEffect(() => {
+    const list = listRef.current;
+    const wrapper = wrapperRef.current;
+
+    if (!list || !wrapper) {
+      return;
+    }
+
+    const updatePresentation = (): void => {
+      const nextUsesSelect = doesTabsControlOverflow(list);
+
+      setUsesSelect((currentUsesSelect) =>
+        currentUsesSelect === nextUsesSelect
+          ? currentUsesSelect
+          : nextUsesSelect,
+      );
+    };
+
+    updatePresentation();
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(updatePresentation);
+
+    observer.observe(wrapper);
+    observer.observe(list);
+    for (const measurementTarget of list.querySelectorAll<HTMLElement>(
+      '[data-slot="tabs-trigger"], [data-slot="tabs-trigger-label"]',
+    )) {
+      observer.observe(measurementTarget);
+    }
+
+    return () => observer.disconnect();
+  }, [options]);
+
+  return (
+    <div
+      className="relative min-w-0 w-full"
+      data-presentation={usesSelect ? "select" : "tabs"}
+      data-slot="tabs-control"
+      ref={wrapperRef}
+    >
+      <Tabs
+        className={cn(
+          "w-full gap-0",
+          usesSelect &&
+            "pointer-events-none invisible absolute inset-x-0 top-0",
+        )}
+        onValueChange={(nextValue) => {
+          if (typeof nextValue === "string") {
+            setCurrentValue(nextValue);
+            onValueChange?.(nextValue);
+          }
+        }}
+        value={selectedValue}
+      >
+        <TabsList
+          aria-hidden={usesSelect || undefined}
+          aria-label={ariaLabel}
+          className="w-full"
+          ref={listRef}
+          variant="control"
+        >
+          {options.map((option) => (
+            <TabsTrigger
+              disabled={disabled}
+              key={option.value}
+              title={option.label}
+              value={option.value}
+            >
+              <span
+                className="min-w-0 overflow-hidden text-ellipsis"
+                data-slot="tabs-trigger-label"
+              >
+                {option.label}
+              </span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      {usesSelect ? (
+        <StaticSelect
+          ariaLabel={ariaLabel}
+          disabled={disabled}
+          onValueChange={(nextValue) => {
+            setCurrentValue(nextValue);
+            onValueChange?.(nextValue);
+          }}
+          options={options}
+          scrollFadeValue={false}
+          value={selectedValue}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -11,7 +11,10 @@ import {
   PanelTitle,
 } from "../control-layout";
 
-export type PanelSectionProps = {
+export type PanelSectionProps = Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "title"
+> & {
   action?: React.ReactNode;
   actionGroup?: "primary" | "secondary";
   allowCompoundDividers?: boolean;
@@ -37,6 +40,7 @@ export function PanelSection({
   onCollapsedChange,
   spacing = "default",
   title,
+  ...props
 }: PanelSectionProps): React.JSX.Element {
   const isActionSection = actionGroup !== undefined;
   const childArray = React.Children.toArray(children);
@@ -69,6 +73,7 @@ export function PanelSection({
 
   return (
     <ControlSection
+      {...props}
       className={cn(
         !isActionSection && "py-0",
         hasTitle && "gap-0",

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

@@ -137,7 +137,7 @@ function hasDirectPanelContentSections(children: React.ReactNode): boolean {
 }
 
 function isPanelContentSection(child: React.ReactNode): boolean {
-  if (!React.isValidElement(child)) {
+  if (!React.isValidElement<Record<string, unknown>>(child)) {
     return false;
   }
 
@@ -147,7 +147,11 @@ function isPanelContentSection(child: React.ReactNode): boolean {
     return hasDirectPanelContentSections(props.children);
   }
 
-  return child.type === ControlSection || child.type === PanelSection;
+  return (
+    child.type === ControlSection ||
+    child.type === PanelSection ||
+    child.props["data-toolcraft-panel-section"] !== undefined
+  );
 }
 
 function splitPanelContentStickyFooter(children: React.ReactNode): {

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

@@ -53,6 +53,7 @@ export {
 export { PrimitiveArrowIcon } from "./primitive-arrow-icon";
 export type { PrimitiveArrowDirection } from "./primitive-arrow-icon";
 export { ScrollFade } from "./scroll-fade";
+export type { ScrollFadeScrollBoundaryBehavior } from "./scroll-fade-types";
 export * from "./selection-state";
 export {
   Select,