@agent-native/core 0.101.13 → 0.102.0

package/corpus/templates/tasks/app/components/custom-fields/editor/config/SelectConfigControl.tsx

@@ -0,0 +1,135 @@
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { SelectColorToken } from "@/hooks/use-custom-fields";
+import { cn } from "@/lib/utils";
+
+import { SELECT_COLOR_OPTIONS } from "./select-colors";
+import {
+  type FieldConfigControlProps,
+  optionsFromConfig,
+  withSortedOptions,
+} from "./utils";
+
+export function SelectConfigControl({
+  config,
+  onChange,
+  disabled = false,
+}: FieldConfigControlProps) {
+  const options = optionsFromConfig(config);
+
+  function updateOption(
+    index: number,
+    patch: Partial<(typeof options)[number]>,
+  ) {
+    onChange({
+      options: withSortedOptions(
+        options.map((option, optionIndex) =>
+          optionIndex === index ? { ...option, ...patch } : option,
+        ),
+      ),
+    });
+  }
+
+  function removeOption(index: number) {
+    onChange({
+      options: withSortedOptions(
+        options.filter((_, optionIndex) => optionIndex !== index),
+      ),
+    });
+  }
+
+  function addOption() {
+    const nextIndex = options.length + 1;
+    onChange({
+      options: [
+        ...options,
+        {
+          id: `opt_${crypto.randomUUID()}`,
+          name: `Option ${nextIndex}`,
+          color: "gray",
+          sortOrder: options.length * 1000,
+        },
+      ],
+    });
+  }
+
+  return (
+    <div className="grid gap-2">
+      <Label>Options</Label>
+      <div className="grid gap-2">
+        {options.map((option, index) => (
+          <div
+            key={`${option.id || "new"}-${index}`}
+            className="grid grid-cols-[1fr_136px_32px] items-center gap-2"
+          >
+            <Input
+              disabled={disabled}
+              value={option.name}
+              onChange={(event) =>
+                updateOption(index, { name: event.currentTarget.value })
+              }
+              aria-label={`Option ${index + 1} name`}
+            />
+            <Select
+              disabled={disabled}
+              value={option.color ?? "gray"}
+              onValueChange={(value) =>
+                updateOption(index, { color: value as SelectColorToken })
+              }
+            >
+              <SelectTrigger aria-label={`Option ${option.name} color`}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {SELECT_COLOR_OPTIONS.map((color) => (
+                    <SelectItem key={color.value} value={color.value}>
+                      <span className="flex items-center gap-2">
+                        <span
+                          className={cn("size-2 rounded-full", color.className)}
+                        />
+                        {color.label}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+              onClick={() => removeOption(index)}
+              aria-label={`Remove ${option.name}`}
+            >
+              <IconTrash className="size-4" />
+            </Button>
+          </div>
+        ))}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+          onClick={addOption}
+          className="justify-self-start gap-2"
+        >
+          <IconPlus className="size-4" />
+          Add option
+        </Button>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/select-colors.ts

@@ -0,0 +1,23 @@
+import type { SelectColorToken } from "@/hooks/use-custom-fields";
+
+export const SELECT_COLOR_OPTIONS: Array<{
+  value: SelectColorToken;
+  label: string;
+  className: string;
+}> = [
+  { value: "red", label: "Red", className: "bg-red-500" },
+  { value: "orange", label: "Orange", className: "bg-orange-500" },
+  { value: "yellow", label: "Yellow", className: "bg-yellow-500" },
+  { value: "green", label: "Green", className: "bg-green-500" },
+  { value: "blue", label: "Blue", className: "bg-blue-500" },
+  { value: "purple", label: "Purple", className: "bg-purple-500" },
+  { value: "pink", label: "Pink", className: "bg-pink-500" },
+  { value: "gray", label: "Gray", className: "bg-muted-foreground" },
+];
+
+export function selectColorClass(color?: SelectColorToken) {
+  return (
+    SELECT_COLOR_OPTIONS.find((option) => option.value === color)?.className ??
+    "bg-muted-foreground"
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/utils.ts

@@ -0,0 +1,52 @@
+import type {
+  FieldConfig,
+  FieldType,
+  SelectOption,
+} from "@/hooks/use-custom-fields";
+
+export type FieldConfigControlProps = {
+  config: FieldConfig;
+  onChange: (config: FieldConfig) => void;
+  disabled?: boolean;
+};
+
+export function precisionFromConfig(config: FieldConfig) {
+  return "precision" in config && typeof config.precision === "number"
+    ? config.precision
+    : 0;
+}
+
+export function positiveOnlyFromConfig(config: FieldConfig) {
+  return "positiveOnly" in config && config.positiveOnly === true;
+}
+
+export function symbolFromConfig(config: FieldConfig) {
+  return "symbol" in config && typeof config.symbol === "string"
+    ? config.symbol
+    : "$";
+}
+
+export function withSortedOptions(options: SelectOption[]) {
+  return options.map((option, index) => ({
+    ...option,
+    sortOrder: index * 1000,
+  }));
+}
+
+export function optionsFromConfig(config: FieldConfig): SelectOption[] {
+  return "options" in config ? config.options : [];
+}
+
+export function defaultConfigForType(type: FieldType): FieldConfig {
+  if (type === "currency") return { symbol: "$", precision: 2 };
+  if (type === "number" || type === "percent") return { precision: 0 };
+  if (type === "single_select" || type === "multi_select") {
+    return { options: [] };
+  }
+  return {};
+}
+
+export function normalizedInitialConfig(type: FieldType, config?: FieldConfig) {
+  if (config) return config;
+  return defaultConfigForType(type);
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/types.ts

@@ -0,0 +1,7 @@
+import type { FieldConfig, FieldType } from "@/hooks/use-custom-fields";
+
+export type FieldDraft = {
+  title: string;
+  type: FieldType;
+  config: FieldConfig;
+};

package/corpus/templates/tasks/app/components/dnd/SortableItem.tsx

@@ -0,0 +1,72 @@
+import type { DraggableAttributes } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { CSSProperties, ReactNode } from "react";
+import type { KeyboardEventHandler, PointerEventHandler } from "react";
+
+import { isBlockDragActive } from "@/components/dnd/reorder-moving-items";
+
+type DragListeners = {
+  onPointerDown?: PointerEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+};
+
+export type SortableItemRenderProps = {
+  setNodeRef: (element: HTMLElement | null) => void;
+  style: CSSProperties;
+  isDragging: boolean;
+  hideForBlockDrag: boolean;
+  attributes: DraggableAttributes;
+  listeners: DragListeners | undefined;
+};
+
+/**
+ * Inert props for rendering a row outside a sortable context — e.g. the drag
+ * overlay, which mounts the real row for its preview but must not register a
+ * second sortable node or apply drag transforms.
+ */
+export const INERT_SORTABLE_PROPS: SortableItemRenderProps = {
+  setNodeRef: () => {},
+  style: {},
+  isDragging: false,
+  hideForBlockDrag: false,
+  attributes: {} as DraggableAttributes,
+  listeners: undefined,
+};
+
+interface SortableItemProps {
+  id: string;
+  activeId: string | null;
+  movingIds: Set<string>;
+  children: (props: SortableItemRenderProps) => ReactNode;
+}
+
+export function SortableItem({
+  id,
+  activeId,
+  movingIds,
+  children,
+}: SortableItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  const hideForBlockDrag =
+    isBlockDragActive(activeId, movingIds) && movingIds.has(id);
+
+  return children({
+    setNodeRef,
+    style: {
+      transform: CSS.Transform.toString(transform),
+      transition,
+    },
+    isDragging,
+    hideForBlockDrag,
+    attributes,
+    listeners,
+  });
+}

package/corpus/templates/tasks/app/components/dnd/SortableList.tsx

@@ -0,0 +1,136 @@
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import {
+  getDragOverlayItem,
+  isBlockDragActive,
+  reorderMovingItems,
+} from "@/components/dnd/reorder-moving-items";
+import {
+  SortableItem,
+  type SortableItemRenderProps,
+} from "@/components/dnd/SortableItem";
+
+export interface SortableListRenderItemProps<T extends { id: string }> {
+  item: T;
+  sortable: SortableItemRenderProps;
+}
+
+export interface SortableListRenderOverlayProps<T extends { id: string }> {
+  item: T;
+  blockDragCount?: number;
+}
+
+export interface SortableListProps<T extends { id: string }> {
+  items: T[];
+  movingIds: Set<string>;
+  onReorder: (nextItems: T[]) => void;
+  renderItem: (props: SortableListRenderItemProps<T>) => ReactNode;
+  renderOverlay?: (props: SortableListRenderOverlayProps<T>) => ReactNode;
+  listClassName?: string;
+}
+
+export function SortableList<T extends { id: string }>({
+  items,
+  movingIds,
+  onReorder,
+  renderItem,
+  renderOverlay,
+  listClassName = "space-y-2 pb-6",
+}: SortableListProps<T>) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const orderedIds = items.map((item) => item.id);
+  const blockDragActive = isBlockDragActive(activeId, movingIds);
+  const overlayItem = getDragOverlayItem(items, activeId, movingIds);
+  const blockDragCount = blockDragActive ? movingIds.size : undefined;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(String(event.active.id));
+  }
+
+  function handleDragCancel() {
+    setActiveId(null);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveId(null);
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const nextItems = reorderMovingItems(
+      items,
+      String(active.id),
+      String(over.id),
+      movingIds,
+    );
+    const unchanged =
+      nextItems.length === items.length &&
+      nextItems.every((item, index) => item.id === items[index]?.id);
+    if (unchanged) return;
+
+    onReorder(nextItems);
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <SortableContext
+        items={orderedIds}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className={listClassName}>
+          {items.map((item) => (
+            <SortableItem
+              key={item.id}
+              id={item.id}
+              activeId={activeId}
+              movingIds={movingIds}
+            >
+              {(sortable) => renderItem({ item, sortable })}
+            </SortableItem>
+          ))}
+        </div>
+      </SortableContext>
+      {renderOverlay && typeof document !== "undefined"
+        ? createPortal(
+            <DragOverlay dropAnimation={null} zIndex={1000}>
+              {overlayItem ? (
+                <div aria-hidden="true" className="w-full">
+                  {renderOverlay({ item: overlayItem, blockDragCount })}
+                </div>
+              ) : null}
+            </DragOverlay>,
+            document.body,
+          )
+        : null}
+    </DndContext>
+  );
+}

package/corpus/templates/tasks/app/components/dnd/reorder-moving-items.ts

@@ -0,0 +1,160 @@
+import { arrayMove } from "@dnd-kit/sortable";
+
+/**
+ * Multi-item drag reorder for sortable lists.
+ *
+ * Single-item drag delegates to dnd-kit `arrayMove`.
+ *
+ * Multi-item drag (active id is in `movingIds` and size > 1):
+ * 1. Split the visible list into `moving` (moving ids, in list order) and
+ *    `withoutMoving` (everything else).
+ * 2. Compute where to splice `moving` into `withoutMoving` from the drop target
+ *    (`overId`) and drag direction (compare active vs over index).
+ * 3. Drop on another moving row → no reorder (insert at current block start).
+ * 4. Drag down onto a row below the block → insert after that row.
+ * 5. Drag up onto a row above the block → insert before that row, except when
+ *    the target is more than one row above the block (then insert after it so
+ *    "drop below row X" lands under X). Drop on the top row with a large gap
+ *    before the block → insert at list start (move block to top).
+ *
+ * The branching looks worse than it is because dnd-kit reports the hovered row,
+ * not an explicit before/after slot; these rules mirror what users expect when
+ * moving a contiguous block.
+ */
+
+function countItemsBeforeIndex<T extends { id: string }>(
+  items: T[],
+  endIndex: number,
+  movingIds: Set<string>,
+) {
+  return items.slice(0, endIndex).filter((item) => !movingIds.has(item.id))
+    .length;
+}
+
+function gapBeforeBlock<T extends { id: string }>(
+  items: T[],
+  overIndex: number,
+  firstMovingIndex: number,
+  movingIds: Set<string>,
+) {
+  return items
+    .slice(overIndex + 1, firstMovingIndex)
+    .filter((item) => !movingIds.has(item.id)).length;
+}
+
+function findLastMovingIndex<T extends { id: string }>(
+  items: T[],
+  movingIds: Set<string>,
+) {
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (movingIds.has(items[index]!.id)) return index;
+  }
+  return -1;
+}
+
+function computeBlockInsertIndex<T extends { id: string }>(
+  items: T[],
+  activeId: string,
+  overId: string,
+  movingIds: Set<string>,
+  withoutMoving: T[],
+) {
+  const activeIndex = items.findIndex((item) => item.id === activeId);
+  const overIndex = items.findIndex((item) => item.id === overId);
+  if (overIndex < 0 || activeIndex < 0) {
+    return null;
+  }
+
+  const firstMovingIndex = items.findIndex((item) => movingIds.has(item.id));
+  const lastMovingIndex = findLastMovingIndex(items, movingIds);
+  const draggingDown = activeIndex < overIndex;
+  const draggingUp = activeIndex > overIndex;
+
+  if (movingIds.has(overId)) {
+    return countItemsBeforeIndex(items, firstMovingIndex, movingIds);
+  }
+
+  const overInWithout = withoutMoving.findIndex((item) => item.id === overId);
+  if (overInWithout < 0) {
+    return countItemsBeforeIndex(items, overIndex, movingIds);
+  }
+
+  if (draggingDown && overIndex > lastMovingIndex) {
+    return overInWithout + 1;
+  }
+
+  if (draggingUp && overIndex < firstMovingIndex) {
+    if (overIndex === 0) {
+      const gap = gapBeforeBlock(items, overIndex, firstMovingIndex, movingIds);
+      if (gap === 1) {
+        return overInWithout + 1;
+      }
+      return 0;
+    }
+
+    if (overIndex < firstMovingIndex - 1) {
+      return overInWithout + 1;
+    }
+
+    return overInWithout;
+  }
+
+  return countItemsBeforeIndex(items, overIndex, movingIds);
+}
+
+/** Reorder a list, moving one item or a contiguous block identified by `movingIds`. */
+export function reorderMovingItems<T extends { id: string }>(
+  items: T[],
+  activeId: string,
+  overId: string,
+  movingIds: Set<string>,
+) {
+  const isBlockDrag = movingIds.has(activeId) && movingIds.size > 1;
+  if (!isBlockDrag) {
+    const oldIndex = items.findIndex((item) => item.id === activeId);
+    const newIndex = items.findIndex((item) => item.id === overId);
+    if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) {
+      return items;
+    }
+    return arrayMove(items, oldIndex, newIndex);
+  }
+
+  const moving = items.filter((item) => movingIds.has(item.id));
+  const withoutMoving = items.filter((item) => !movingIds.has(item.id));
+  const insertIndex = computeBlockInsertIndex(
+    items,
+    activeId,
+    overId,
+    movingIds,
+    withoutMoving,
+  );
+  if (insertIndex === null) {
+    return items;
+  }
+
+  const next = [...withoutMoving];
+  next.splice(insertIndex, 0, ...moving);
+  return next;
+}
+
+export function isBlockDragActive(
+  activeId: string | null,
+  movingIds: Set<string>,
+) {
+  return Boolean(activeId && movingIds.has(activeId) && movingIds.size > 1);
+}
+
+/** Overlay content item: topmost moving row during block drag, else the grabbed row. */
+export function getDragOverlayItem<T extends { id: string }>(
+  items: T[],
+  activeId: string | null,
+  movingIds: Set<string>,
+) {
+  if (!activeId) return null;
+
+  if (isBlockDragActive(activeId, movingIds)) {
+    return items.find((item) => movingIds.has(item.id)) ?? null;
+  }
+
+  return items.find((item) => item.id === activeId) ?? null;
+}

package/corpus/templates/tasks/app/components/dnd/sortable-drag-props.ts

@@ -0,0 +1,60 @@
+import type { DraggableAttributes } from "@dnd-kit/core";
+import type {
+  HTMLAttributes,
+  KeyboardEventHandler,
+  PointerEvent,
+  PointerEventHandler,
+} from "react";
+
+type DragListeners = {
+  onPointerDown?: PointerEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+};
+
+function sharedSortableProps(
+  attributes: DraggableAttributes,
+  listeners: DragListeners | undefined,
+): HTMLAttributes<HTMLElement> {
+  return {
+    ...attributes,
+    ...(listeners?.onKeyDown
+      ? {
+          onKeyDown: listeners.onKeyDown as KeyboardEventHandler<HTMLElement>,
+        }
+      : {}),
+  };
+}
+
+/** Map dnd-kit sortable listeners onto common drag surfaces (grip, row, title). */
+export function getSortableDragProps(
+  attributes: DraggableAttributes,
+  listeners: DragListeners | undefined,
+) {
+  const shared = sharedSortableProps(attributes, listeners);
+  const pointerDown = listeners?.onPointerDown;
+
+  return {
+    dragHandleProps: {
+      ...shared,
+      ...(pointerDown
+        ? {
+            onPointerDown:
+              pointerDown as PointerEventHandler<HTMLButtonElement>,
+          }
+        : {}),
+    },
+    rowDragProps: pointerDown
+      ? {
+          onPointerDown: pointerDown as PointerEventHandler<HTMLDivElement>,
+        }
+      : undefined,
+    titleDragProps: pointerDown
+      ? {
+          onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {
+            pointerDown(event);
+            event.stopPropagation();
+          },
+        }
+      : undefined,
+  };
+}