tembro 2.1.13 → 3.1.1

package/packages/cli/vendor/src/components/display/virtual-list.tsx

@@ -0,0 +1,184 @@
+import * as React from "react"
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
+
+import { cn } from "@/lib/utils"
+
+export type VirtualListRange = {
+  startIndex: number
+  endIndex: number
+  visibleItems: VirtualItem[]
+}
+
+export type VirtualListRenderContext = {
+  index: number
+  virtualItem: VirtualItem
+}
+
+export type VirtualListProps<TItem> = Omit<
+  React.ComponentProps<"div">,
+  "children"
+> & {
+  items: TItem[]
+  renderItem: (item: TItem, context: VirtualListRenderContext) => React.ReactNode
+  getItemKey?: (item: TItem, index: number) => React.Key
+  estimateSize?: number | ((index: number) => number)
+  overscan?: number
+  height?: number | string
+  gap?: number
+  empty?: React.ReactNode
+  itemClassName?: string | ((item: TItem, context: VirtualListRenderContext) => string)
+  onRangeChange?: (range: VirtualListRange) => void
+  scrollToIndex?: number
+  scrollToAlignment?: "auto" | "start" | "center" | "end"
+}
+
+function createInitialVirtualItems(
+  count: number,
+  viewportHeight: number,
+  overscan: number,
+  gap: number,
+  estimateSize: (index: number) => number,
+  getItemKey: (index: number) => React.Key
+) {
+  const items: VirtualItem[] = []
+  let start = 0
+  const targetHeight = viewportHeight + overscan * estimateSize(0)
+
+  for (let index = 0; index < count && start < targetHeight; index += 1) {
+    const size = estimateSize(index)
+    items.push({
+      key: getItemKey(index),
+      index,
+      start,
+      end: start + size,
+      size,
+      lane: 0,
+    })
+    start += size + gap
+  }
+
+  return items
+}
+
+function VirtualList<TItem>({
+  items,
+  renderItem,
+  getItemKey,
+  estimateSize = 48,
+  overscan = 6,
+  height = 400,
+  gap = 8,
+  empty = "No items.",
+  itemClassName,
+  onRangeChange,
+  scrollToIndex,
+  scrollToAlignment = "auto",
+  className,
+  style,
+  "aria-label": ariaLabel = "Virtual list",
+  ...props
+}: VirtualListProps<TItem>) {
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const estimateItemSize = React.useCallback(
+    (index: number) =>
+      typeof estimateSize === "function" ? estimateSize(index) : estimateSize,
+    [estimateSize]
+  )
+  const itemKey = React.useCallback(
+    (index: number) => getItemKey?.(items[index], index) ?? index,
+    [getItemKey, items]
+  )
+
+  // TanStack Virtual returns imperative helpers that React Compiler flags by design.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: estimateItemSize,
+    getItemKey: itemKey,
+    overscan,
+    gap,
+    initialRect: {
+      width: 0,
+      height: typeof height === "number" ? height : 400,
+    },
+    onChange(instance) {
+      if (!onRangeChange) return
+      const visibleItems = instance.getVirtualItems()
+      onRangeChange({
+        startIndex: visibleItems[0]?.index ?? -1,
+        endIndex: visibleItems.at(-1)?.index ?? -1,
+        visibleItems,
+      })
+    },
+  })
+
+  React.useEffect(() => {
+    if (scrollToIndex === undefined || scrollToIndex < 0 || scrollToIndex >= items.length) return
+    virtualizer.scrollToIndex(scrollToIndex, { align: scrollToAlignment })
+  }, [items.length, scrollToAlignment, scrollToIndex, virtualizer])
+
+  const virtualItems = virtualizer.getVirtualItems()
+  const renderedVirtualItems = virtualItems.length > 0
+    ? virtualItems
+    : createInitialVirtualItems(
+        items.length,
+        typeof height === "number" ? height : 400,
+        overscan,
+        gap,
+        estimateItemSize,
+        itemKey
+      )
+
+  return (
+    <div
+      {...props}
+      ref={scrollRef}
+      role="list"
+      aria-label={ariaLabel}
+      aria-setsize={items.length}
+      data-slot="virtual-list"
+      className={cn("relative overflow-auto overscroll-contain", className)}
+      style={{ height, ...style }}
+    >
+      {items.length === 0 ? (
+        <div className="grid min-h-full place-items-center p-6 text-center text-sm text-muted-foreground">
+          {empty}
+        </div>
+      ) : (
+        <div
+          className="relative w-full"
+          style={{ height: virtualizer.getTotalSize() }}
+        >
+          {renderedVirtualItems.map((virtualItem) => {
+            const item = items[virtualItem.index]
+            const context: VirtualListRenderContext = {
+              index: virtualItem.index,
+              virtualItem,
+            }
+            const resolvedItemClassName =
+              typeof itemClassName === "function" ? itemClassName(item, context) : itemClassName
+
+            return (
+              <div
+                key={virtualItem.key}
+                ref={virtualizer.measureElement}
+                role="listitem"
+                aria-posinset={virtualItem.index + 1}
+                aria-setsize={items.length}
+                data-index={virtualItem.index}
+                data-slot="virtual-list-item"
+                className={cn("absolute left-0 top-0 w-full", resolvedItemClassName)}
+                style={{ transform: `translateY(${virtualItem.start}px)` }}
+              >
+                {renderItem(item, context)}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { VirtualList }

package/packages/cli/vendor/src/components/dnd/index.ts

@@ -0,0 +1 @@
+export * from "./sortable-list"

package/packages/cli/vendor/src/components/dnd/sortable-list.tsx

@@ -0,0 +1,257 @@
+import * as React from "react"
+import { arrayMove } from "@dnd-kit/helpers"
+import {
+  DragDropProvider,
+  DragOverlay,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/react"
+import { isSortable, useSortable } from "@dnd-kit/react/sortable"
+import { GripVerticalIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type SortableListChange<TItem> = {
+  activeId: string
+  overId: string | null
+  oldIndex: number
+  newIndex: number
+  item: TItem
+}
+
+export type SortableListRenderContext = {
+  index: number
+  isDragging: boolean
+  isDropTarget: boolean
+  handle: React.ReactNode
+}
+
+export type SortableListProps<TItem> = Omit<
+  React.ComponentProps<"div">,
+  "children" | "defaultValue" | "onChange"
+> & {
+  items?: TItem[]
+  defaultItems?: TItem[]
+  getItemId: (item: TItem) => string
+  getItemLabel?: (item: TItem) => string
+  renderItem: (item: TItem, context: SortableListRenderContext) => React.ReactNode
+  onItemsChange?: (items: TItem[], change: SortableListChange<TItem>) => void
+  disabled?: boolean | ((item: TItem) => boolean)
+  orientation?: "vertical" | "horizontal" | "grid"
+  empty?: React.ReactNode
+  handleLabel?: (item: TItem) => string
+  itemClassName?: string | ((item: TItem, context: SortableListRenderContext) => string)
+  overlayClassName?: string
+}
+
+type SortableListItemProps<TItem> = {
+  item: TItem
+  index: number
+  itemId: string
+  label: string
+  disabled: boolean
+  renderItem: SortableListProps<TItem>["renderItem"]
+  itemClassName: SortableListProps<TItem>["itemClassName"]
+  handleLabel: string
+}
+
+function SortableListItem<TItem>({
+  item,
+  index,
+  itemId,
+  label,
+  disabled,
+  renderItem,
+  itemClassName,
+  handleLabel,
+}: SortableListItemProps<TItem>) {
+  const { ref, handleRef, isDragging, isDropTarget } = useSortable({
+    id: itemId,
+    index,
+    type: "tembro-sortable-list-item",
+    accept: "tembro-sortable-list-item",
+    disabled,
+    transition: { duration: 180, easing: "cubic-bezier(0.2, 0, 0, 1)", idle: true },
+  })
+  const handle = (
+    <button
+      ref={handleRef as React.Ref<HTMLButtonElement>}
+      type="button"
+      className="inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45"
+      aria-label={handleLabel}
+      disabled={disabled}
+    >
+      <GripVerticalIcon className="size-4" aria-hidden="true" />
+    </button>
+  )
+  const context: SortableListRenderContext = {
+    index,
+    isDragging,
+    isDropTarget,
+    handle,
+  }
+  const resolvedItemClassName =
+    typeof itemClassName === "function" ? itemClassName(item, context) : itemClassName
+
+  return (
+    <div
+      ref={ref as React.Ref<HTMLDivElement>}
+      role="listitem"
+      aria-label={label}
+      data-slot="sortable-list-item"
+      data-dragging={isDragging || undefined}
+      data-drop-target={isDropTarget || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(
+        "flex min-w-0 items-center gap-2 rounded-lg border bg-card p-2 shadow-sm transition-[border-color,box-shadow,opacity]",
+        isDropTarget && "border-primary/60 ring-2 ring-primary/15",
+        isDragging && "opacity-35",
+        disabled && "opacity-55",
+        resolvedItemClassName
+      )}
+    >
+      {handle}
+      <div className="min-w-0 flex-1">{renderItem(item, context)}</div>
+    </div>
+  )
+}
+
+function SortableList<TItem>({
+  items: itemsProp,
+  defaultItems = [],
+  getItemId,
+  getItemLabel,
+  renderItem,
+  onItemsChange,
+  disabled = false,
+  orientation = "vertical",
+  empty = "No items.",
+  handleLabel,
+  itemClassName,
+  overlayClassName,
+  className,
+  "aria-label": ariaLabel = "Sortable list",
+  ...props
+}: SortableListProps<TItem>) {
+  const [internalItems, setInternalItems] = React.useState<TItem[]>(() => defaultItems)
+  const [activeId, setActiveId] = React.useState<string | null>(null)
+  const items = itemsProp ?? internalItems
+  const isControlled = itemsProp !== undefined
+  const itemById = React.useMemo(
+    () => new Map(items.map((item) => [getItemId(item), item] as const)),
+    [getItemId, items]
+  )
+
+  function isItemDisabled(item: TItem) {
+    return typeof disabled === "function" ? disabled(item) : disabled
+  }
+
+  function getLabel(item: TItem) {
+    return getItemLabel?.(item) ?? getItemId(item)
+  }
+
+  function handleDragStart(event: DragStartEvent) {
+    const source = event.operation.source
+    if (!source) return
+
+    const id = String(source.id)
+    setActiveId(id)
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const source = event.operation.source
+    const target = event.operation.target
+    setActiveId(null)
+
+    if (event.canceled || !source || !isSortable(source)) {
+      return
+    }
+
+    const oldIndex = source.initialIndex
+    const newIndex = source.index
+    const item = items[oldIndex]
+    if (!item || oldIndex === newIndex) {
+      return
+    }
+
+    const nextItems = arrayMove(items, oldIndex, newIndex)
+    const activeItemId = getItemId(item)
+    if (!isControlled) setInternalItems(nextItems)
+    onItemsChange?.(nextItems, {
+      activeId: activeItemId,
+      overId: target ? String(target.id) : null,
+      oldIndex,
+      newIndex,
+      item,
+    })
+  }
+
+  const activeItem = activeId ? itemById.get(activeId) : undefined
+
+  return (
+    <DragDropProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      <div
+        {...props}
+        role="list"
+        aria-label={ariaLabel}
+        data-slot="sortable-list"
+        data-orientation={orientation}
+        className={cn(
+          "gap-2",
+          orientation === "vertical" && "grid",
+          orientation === "horizontal" && "flex overflow-x-auto pb-2",
+          orientation === "grid" && "grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))]",
+          className
+        )}
+      >
+        {items.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+            {empty}
+          </div>
+        ) : (
+          items.map((item, index) => {
+            const id = getItemId(item)
+            const label = getLabel(item)
+            return (
+              <SortableListItem
+                key={id}
+                item={item}
+                index={index}
+                itemId={id}
+                label={label}
+                disabled={isItemDisabled(item)}
+                renderItem={renderItem}
+                itemClassName={itemClassName}
+                handleLabel={handleLabel?.(item) ?? `Move ${label}`}
+              />
+            )
+          })
+        )}
+      </div>
+
+      <DragOverlay>
+        {activeItem ? (
+          <div
+            className={cn(
+              "flex min-w-56 items-center gap-2 rounded-lg border bg-card p-2 shadow-xl ring-1 ring-primary/15",
+              overlayClassName
+            )}
+          >
+            <GripVerticalIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <div className="min-w-0 flex-1">
+              {renderItem(activeItem, {
+                index: items.findIndex((item) => getItemId(item) === activeId),
+                isDragging: true,
+                isDropTarget: false,
+                handle: null,
+              })}
+            </div>
+          </div>
+        ) : null}
+      </DragOverlay>
+
+    </DragDropProvider>
+  )
+}
+
+export { SortableList }