@kinetixui/ui 0.11.0 → 0.12.0

package/src/components/diff-viewer.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface DiffViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  oldText: string;
+  newText: string;
+  /** "unified" (one interleaved column, like `git diff`) or "split" (two columns, side by side). Default "unified". */
+  mode?: "unified" | "split";
+  /** column headers, `mode="split"` only */
+  oldLabel?: string;
+  newLabel?: string;
+}
+
+type DiffOp =
+  | { type: "equal"; oldLine: number; newLine: number; text: string }
+  | { type: "remove"; oldLine: number; text: string }
+  | { type: "add"; newLine: number; text: string };
+
+/**
+ * Line-based LCS diff (the same longest-common-subsequence backtrack
+ * `git diff`'s line mode is built on), hand-rolled rather than pulled from
+ * a package: it needs to behave identically across all four platforms, and
+ * a ~30-line DP table is easier to keep in lockstep across React/Compose/
+ * SwiftUI/Flutter than four bindings to (or ports of) someone else's diff
+ * library. O(n·m) time and space — fine for a config file or a token
+ * snapshot, the sizes this dev-tool surface actually sees; not meant for
+ * multi-thousand-line files.
+ */
+function computeLineDiff(oldText: string, newText: string): DiffOp[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const n = oldLines.length;
+  const m = newLines.length;
+
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i]![j] = oldLines[i] === newLines[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!);
+    }
+  }
+
+  const ops: DiffOp[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (oldLines[i] === newLines[j]) {
+      ops.push({ type: "equal", oldLine: i + 1, newLine: j + 1, text: oldLines[i]! });
+      i++;
+      j++;
+    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
+      ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+      i++;
+    } else {
+      ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+      j++;
+    }
+  }
+  while (i < n) {
+    ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+    i++;
+  }
+  while (j < m) {
+    ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+    j++;
+  }
+  return ops;
+}
+
+/**
+ * DiffViewer — a side-by-side / inline text diff with line markers and
+ * gutter line numbers (token diffs, config changes — the site itself could
+ * use this for a "what changed between versions" view). `split` mode
+ * doesn't pair adjacent remove/add runs onto the same row the way GitHub's
+ * split view does — each op renders in its own column, blank on the other
+ * side — a deliberate simplification over that extra alignment heuristic.
+ * Gap-fill addition (not in the original Figma source).
+ */
+const DiffViewer = React.forwardRef<HTMLDivElement, DiffViewerProps>(
+  ({ oldText, newText, mode = "unified", oldLabel = "Before", newLabel = "After", className, ...props }, ref) => {
+    const ops = React.useMemo(() => computeLineDiff(oldText, newText), [oldText, newText]);
+
+    return (
+      <div ref={ref} className={cn("overflow-auto rounded-md border font-mono text-xs", className)} {...props}>
+        {mode === "split" ? (
+          <SplitDiff ops={ops} oldLabel={oldLabel} newLabel={newLabel} />
+        ) : (
+          <UnifiedDiff ops={ops} />
+        )}
+      </div>
+    );
+  },
+);
+DiffViewer.displayName = "DiffViewer";
+
+function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
+  return (
+    <div role="table">
+      {ops.map((op, i) => (
+        <div
+          key={i}
+          role="row"
+          className={cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10")}
+        >
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "add" ? op.oldLine : ""}
+          </span>
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "remove" ? op.newLine : ""}
+          </span>
+          <span
+            className={cn(
+              "w-4 shrink-0 select-none text-center",
+              op.type === "add" && "text-success",
+              op.type === "remove" && "text-destructive",
+            )}
+          >
+            {op.type === "add" ? "+" : op.type === "remove" ? "−" : ""}
+          </span>
+          <span className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SplitDiff({ ops, oldLabel, newLabel }: { ops: DiffOp[]; oldLabel: string; newLabel: string }) {
+  return (
+    <div role="table">
+      <div className="flex border-b bg-muted/40 text-muted-foreground">
+        <div className="flex-1 px-2 py-1">{oldLabel}</div>
+        <div className="flex-1 border-l px-2 py-1">{newLabel}</div>
+      </div>
+      {ops.map((op, i) => (
+        <div key={i} role="row" className="flex">
+          <div className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "add" ? op.oldLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "add" ? op.text : ""}</span>
+          </div>
+          <div className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "remove" ? op.newLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "remove" ? op.text : ""}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { DiffViewer };

package/src/components/json-viewer.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronRight, Copy } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface JsonViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  data: unknown;
+  /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
+  expandDepth?: number;
+  hideCopy?: boolean;
+}
+
+/**
+ * JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
+ * (API responses, registry payloads, token diffs — a dev-tool surface the
+ * site itself needs for `/docs/kinetixui-json` and friends). Distinct from
+ * `TreeView`: this renders a *data structure* (object/array/primitive),
+ * not a caller-composed hierarchy of `TreeItem`s, so expand state is
+ * per-node uncontrolled rather than a lifted `expanded` prop — there's no
+ * stable "value" to key a node by beyond its position in the data, and
+ * nothing external needs to drive which nodes are open. Value colors reuse
+ * the existing semantic tokens (`--success`/`--info`/`--warning`) rather
+ * than introducing a separate syntax-highlighting palette. Gap-fill
+ * addition (not in the original Figma source).
+ */
+const JsonViewer = React.forwardRef<HTMLDivElement, JsonViewerProps>(
+  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      } catch {
+        // clipboard unavailable — no-op
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className)}
+        {...props}
+      >
+        {!hideCopy && (
+          <button
+            type="button"
+            onClick={copy}
+            aria-label="Copy JSON"
+            className="absolute right-2 top-2 inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+          </button>
+        )}
+        <div role="tree">
+          <JsonNode value={data} depth={0} expandDepth={expandDepth} isLast />
+        </div>
+      </div>
+    );
+  },
+);
+JsonViewer.displayName = "JsonViewer";
+
+function JsonNode({
+  name,
+  value,
+  depth,
+  expandDepth,
+  isLast,
+}: {
+  name?: string;
+  value: unknown;
+  depth: number;
+  expandDepth: number;
+  isLast: boolean;
+}) {
+  const isContainer = value !== null && typeof value === "object";
+  const [expanded, setExpanded] = React.useState(depth < expandDepth);
+
+  if (!isContainer) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <JsonPrimitive value={value} />
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  const isArray = Array.isArray(value);
+  const entries: [string, unknown][] = isArray
+    ? (value as unknown[]).map((v, i) => [String(i), v])
+    : Object.entries(value as Record<string, unknown>);
+  const openBracket = isArray ? "[" : "{";
+  const closeBracket = isArray ? "]" : "}";
+
+  if (entries.length === 0) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 + 20 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <span>
+          {openBracket}
+          {closeBracket}
+        </span>
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div role="treeitem" aria-expanded={expanded}>
+      <div style={{ paddingLeft: depth * 16 }} className="flex items-start gap-1">
+        <button
+          type="button"
+          onClick={() => setExpanded((e) => !e)}
+          aria-label={expanded ? "Collapse" : "Expand"}
+          className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+        >
+          <ChevronRight className={cn("size-3 transition-transform", expanded && "rotate-90")} />
+        </button>
+        <span>
+          {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+          <span>{openBracket}</span>
+          {!expanded && (
+            <span className="text-muted-foreground">
+              {" "}
+              {entries.length} {isArray ? "item" : "key"}
+              {entries.length === 1 ? "" : "s"}{" "}
+            </span>
+          )}
+          {!expanded && <span>{closeBracket}</span>}
+          {!expanded && !isLast && <span className="text-muted-foreground">,</span>}
+        </span>
+      </div>
+      {expanded && (
+        <>
+          {entries.map(([key, val], i) => (
+            <JsonNode
+              key={key}
+              name={isArray ? undefined : key}
+              value={val}
+              depth={depth + 1}
+              expandDepth={expandDepth}
+              isLast={i === entries.length - 1}
+            />
+          ))}
+          <div style={{ paddingLeft: depth * 16 }}>
+            <span>{closeBracket}</span>
+            {!isLast && <span className="text-muted-foreground">,</span>}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function JsonPrimitive({ value }: { value: unknown }) {
+  if (value === null) return <span className="italic text-muted-foreground">null</span>;
+  if (value === undefined) return <span className="italic text-muted-foreground">undefined</span>;
+  if (typeof value === "string") return <span className="text-success">{JSON.stringify(value)}</span>;
+  if (typeof value === "number") return <span className="text-info">{value}</span>;
+  if (typeof value === "boolean") return <span className="text-warning">{String(value)}</span>;
+  return <span>{String(value)}</span>;
+}
+
+export { JsonViewer };

package/src/components/kanban-board.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import * as React from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  getFirstCollision,
+  pointerWithin,
+  rectIntersection,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type CollisionDetection,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../lib/utils";
+
+export interface KanbanCard {
+  id: string;
+  content: React.ReactNode;
+}
+
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  cards: KanbanCard[];
+}
+
+export interface KanbanBoardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  columns: KanbanColumn[];
+  onColumnsChange: (columns: KanbanColumn[]) => void;
+}
+
+/**
+ * KanbanBoard — draggable cards across columns, with keyboard DnD. No DnD
+ * primitive existed in this package at all, and hand-rolling accessible
+ * drag-and-drop (pointer + touch + keyboard, collision detection, live
+ * screen-reader announcements) from scratch would both take far longer
+ * than this component's own logic and likely be worse than a battle-tested
+ * library — unlike `DiffViewer`'s hand-rolled LCS diff, there's no
+ * cross-platform-identical-algorithm argument here, since each native
+ * platform reaches for its own idiomatic drag primitive anyway (Compose's
+ * drag gestures, SwiftUI's `.draggable`/`.dropDestination`, Flutter's
+ * `Draggable`/`DragTarget`). `@dnd-kit` is the dependency: no runtime CSS,
+ * accessible by default, and this is exactly its documented "multiple
+ * containers" sortable pattern — `onDragOver` re-parents a card into the
+ * hovered column live (the standard approach; a little re-render churn
+ * mid-drag is expected/upstream-documented), `onDragEnd` commits the
+ * final within-column reorder. Column order itself isn't draggable — the
+ * `COMPONENT-ADDITIONS.md` entry only asked for card dragging.
+ *
+ * `collisionDetectionStrategy` below is dnd-kit's own documented fix for a
+ * specific multi-container gotcha: each column is both a `useDroppable`
+ * (so an empty column, or the space below its last card, is still a valid
+ * drop target) and wraps a `SortableContext` of its cards. A column's rect
+ * is a strict superset of its cards' rects, so plain `closestCorners` (or
+ * `closestCenter`/`rectIntersection` alone) almost always reports the
+ * column itself as the collision, never a specific card underneath — over
+ * gets stuck on the column id and item-level reordering never fires. The
+ * fix (lifted from dnd-kit's own multiple-containers example): try
+ * `pointerWithin` first, fall back to `rectIntersection`, and if the
+ * winning id is a column, re-run `closestCenter` scoped to just that
+ * column's cards to find the specific one under the pointer.
+ */
+const KanbanBoard = React.forwardRef<HTMLDivElement, KanbanBoardProps>(
+  ({ columns, onColumnsChange, className, ...props }, ref) => {
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    );
+    const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null);
+    const lastOverId = React.useRef<string | null>(null);
+
+    const findColumn = React.useCallback(
+      (id: string) => columns.find((col) => col.id === id || col.cards.some((c) => c.id === id)),
+      [columns],
+    );
+
+    const collisionDetectionStrategy: CollisionDetection = React.useCallback(
+      (args) => {
+        const pointerIntersections = pointerWithin(args);
+        const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+        let overId = getFirstCollision(intersections, "id");
+
+        if (overId != null) {
+          const overColumn = columns.find((col) => col.id === overId);
+          if (overColumn && overColumn.cards.length > 0) {
+            const cardIds = new Set(overColumn.cards.map((c) => c.id));
+            const cardCollision = getFirstCollision(
+              closestCenter({
+                ...args,
+                droppableContainers: args.droppableContainers.filter((c) => cardIds.has(String(c.id))),
+              }),
+              "id",
+            );
+            if (cardCollision != null) overId = cardCollision;
+          }
+          lastOverId.current = String(overId);
+          return [{ id: overId }];
+        }
+
+        return lastOverId.current ? [{ id: lastOverId.current }] : [];
+      },
+      [columns],
+    );
+
+    function handleDragStart(event: DragStartEvent) {
+      lastOverId.current = String(event.active.id);
+      const column = findColumn(String(event.active.id));
+      const card = column?.cards.find((c) => c.id === event.active.id);
+      setActiveCard(card ?? null);
+    }
+
+    function handleDragOver(event: DragOverEvent) {
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      if (activeId === overId) return;
+
+      const activeColumn = findColumn(activeId);
+      const overColumn = findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) return;
+
+      onColumnsChange(
+        columns.map((col) => {
+          if (col.id === activeColumn.id) {
+            return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };
+          }
+          if (col.id === overColumn.id) {
+            const movedCard = activeColumn.cards.find((c) => c.id === activeId);
+            if (!movedCard) return col;
+            const overIndex = col.cards.findIndex((c) => c.id === overId);
+            const insertAt = overIndex >= 0 ? overIndex : col.cards.length;
+            const nextCards = [...col.cards];
+            nextCards.splice(insertAt, 0, movedCard);
+            return { ...col, cards: nextCards };
+          }
+          return col;
+        }),
+      );
+    }
+
+    function handleDragEnd(event: DragEndEvent) {
+      setActiveCard(null);
+      lastOverId.current = null;
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      const activeColumn = findColumn(activeId);
+      // overId may be the column itself (dropped in empty space / an empty column)
+      const overColumn = columns.find((col) => col.id === overId) ?? findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id !== overColumn.id) return;
+
+      const activeIndex = activeColumn.cards.findIndex((c) => c.id === activeId);
+      const rawOverIndex = overColumn.cards.findIndex((c) => c.id === overId);
+      const overIndex = rawOverIndex >= 0 ? rawOverIndex : overColumn.cards.length - 1;
+      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return;
+
+      onColumnsChange(
+        columns.map((col) =>
+          col.id === activeColumn.id ? { ...col, cards: arrayMove(col.cards, activeIndex, overIndex) } : col,
+        ),
+      );
+    }
+
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetectionStrategy}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={() => {
+          setActiveCard(null);
+          lastOverId.current = null;
+        }}
+      >
+        <div ref={ref} role="group" className={cn("flex items-start gap-4 overflow-x-auto font-sans", className)} {...props}>
+          {columns.map((column) => (
+            <KanbanColumnView key={column.id} column={column} />
+          ))}
+        </div>
+        <DragOverlay>{activeCard ? <KanbanCardView card={activeCard} /> : null}</DragOverlay>
+      </DndContext>
+    );
+  },
+);
+KanbanBoard.displayName = "KanbanBoard";
+
+function KanbanColumnView({ column }: { column: KanbanColumn }) {
+  const { setNodeRef } = useDroppable({ id: column.id });
+  return (
+    <div className="flex w-64 shrink-0 flex-col gap-2 rounded-md border bg-muted/30 p-2">
+      <div className="flex items-center justify-between px-1 py-1">
+        <span className="text-sm font-medium text-foreground">{column.title}</span>
+        <span className="text-xs text-muted-foreground">{column.cards.length}</span>
+      </div>
+      <SortableContext items={column.cards.map((c) => c.id)} strategy={verticalListSortingStrategy}>
+        <div ref={setNodeRef} className="flex min-h-10 flex-col gap-2">
+          {column.cards.map((card) => (
+            <SortableKanbanCard key={card.id} card={card} />
+          ))}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}
+
+function SortableKanbanCard({ card }: { card: KanbanCard }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: card.id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <KanbanCardView card={card} />
+    </div>
+  );
+}
+
+function KanbanCardView({ card }: { card: KanbanCard }) {
+  return (
+    <div className="cursor-grab touch-none rounded-md border bg-background p-3 text-sm text-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-1 focus-visible:ring-ring">
+      {card.content}
+    </div>
+  );
+}
+
+export { KanbanBoard };