@drawnagency/primitives 0.1.76 → 0.1.78

package/src/components/shell/MediaBreadcrumb.tsx

@@ -0,0 +1,77 @@
+import { Fragment, useRef } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { MediaFolder, MediaItem } from "../../media/types";
+import { folderPathIds } from "../../lib/media-folders";
+import { useFolderDropTarget } from "../../hooks/useMediaFolderDnd";
+import type { MediaFolderDndBindings } from "./MediaFolderTree";
+
+export interface MediaBreadcrumbProps {
+  folders: Record<string, MediaFolder>;
+  currentFolderId: string | null;
+  onNavigate: (id: string | null) => void;
+  dnd?: MediaFolderDndBindings;
+}
+
+
+function Segment({
+  label, target, onNavigate, dnd, isCurrent,
+}: {
+  label: string;
+  target: string | null;
+  onNavigate: (id: string | null) => void;
+  dnd?: MediaFolderDndBindings;
+  isCurrent: boolean;
+}) {
+  const emptyFoldersRef = useRef<Record<string, MediaFolder>>({});
+  const emptyItemsRef = useRef<Record<string, MediaItem>>({});
+  const { ref, isDropTarget } = useFolderDropTarget<HTMLButtonElement>({
+    targetFolderId: target,
+    enabled: dnd !== undefined && !isCurrent,
+    foldersRef: dnd?.foldersRef ?? emptyFoldersRef,
+    itemsByIdRef: dnd?.itemsByIdRef ?? emptyItemsRef,
+    onMoveMedia: dnd?.onMoveMedia ?? (() => {}),
+    onMoveFolder: dnd?.onMoveFolder ?? (() => {}),
+  });
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={isCurrent}
+      onClick={() => onNavigate(target)}
+      className={cn(
+        "max-w-40 truncate rounded px-1 py-0.5 text-sm",
+        isCurrent
+          ? "font-medium text-base-contrast"
+          : "cursor-pointer text-base-contrast-light hover:text-base-contrast",
+        isDropTarget && "ring-2 ring-primary ring-inset",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+export function MediaBreadcrumb({ folders, currentFolderId, onNavigate, dnd }: MediaBreadcrumbProps) {
+  if (currentFolderId === null) return null;
+  const pathIds = folderPathIds(folders, currentFolderId);
+
+  return (
+    <div className="flex flex-wrap items-center gap-0.5">
+      <Segment label="All media" target={null} onNavigate={onNavigate} dnd={dnd} isCurrent={false} />
+      {pathIds.map((id, i) => (
+        <Fragment key={id}>
+          <ChevronRight size={12} className="shrink-0 text-base-contrast-light" />
+          <Segment
+            label={folders[id].name}
+            target={id}
+            onNavigate={onNavigate}
+            dnd={dnd}
+            isCurrent={i === pathIds.length - 1}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/components/shell/MediaFolderTile.tsx

@@ -0,0 +1,141 @@
+import { useState, useRef, useEffect } from "react";
+import { Folder, MoreVertical } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { buildFolderDragData } from "../../lib/media-dnd";
+import type { MediaFolder, MediaItem } from "../../media/types";
+import { useFolderDropTarget, useMediaDraggable } from "../../hooks/useMediaFolderDnd";
+import type { MediaFolderDndBindings } from "./MediaFolderTree";
+
+export interface MediaFolderTileProps {
+  id: string;
+  name: string;
+  count: number;
+  onOpen: (id: string) => void;
+  manage: boolean;
+  onRename?: (id: string, name: string) => void;
+  onDeleteRequest?: (id: string) => void;
+  dnd?: MediaFolderDndBindings;
+  /** Optional accessible label override for the root element (e.g. "Open folder Logos"). */
+  ariaLabel?: string;
+}
+
+
+export function MediaFolderTile({
+  id, name, count, onOpen, manage, onRename, onDeleteRequest, dnd, ariaLabel,
+}: MediaFolderTileProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [draft, setDraft] = useState(name);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const emptyFoldersRef = useRef<Record<string, MediaFolder>>({});
+  const emptyItemsRef = useRef<Record<string, MediaItem>>({});
+
+  const drag = useMediaDraggable<HTMLDivElement>({
+    enabled: manage && dnd !== undefined && !renaming,
+    getDragData: () => buildFolderDragData(id),
+  });
+  const drop = useFolderDropTarget<HTMLDivElement>({
+    targetFolderId: id,
+    enabled: dnd !== undefined,
+    foldersRef: dnd?.foldersRef ?? emptyFoldersRef,
+    itemsByIdRef: dnd?.itemsByIdRef ?? emptyItemsRef,
+    onMoveMedia: dnd?.onMoveMedia ?? (() => {}),
+    onMoveFolder: dnd?.onMoveFolder ?? (() => {}),
+  });
+
+  // Dismiss the kebab menu on any pointerdown outside its container.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: PointerEvent) => {
+      if (menuRef.current && e.target instanceof Node && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [menuOpen]);
+
+  const commitRename = () => {
+    setRenaming(false);
+    const next = draft.trim();
+    if (next && next !== name) onRename?.(id, next);
+    else setDraft(name);
+  };
+
+  return (
+    <div
+      // The tile is both a draggable and a drop target — a callback ref fills
+      // both hook refs at commit time, BEFORE either hook's registration
+      // effect runs (an effect-based sync would run after and never register).
+      ref={(el) => { drag.ref.current = el; drop.ref.current = el; }}
+      role="button"
+      tabIndex={0}
+      aria-label={ariaLabel}
+      onClick={() => { if (!renaming) onOpen(id); }}
+      onKeyDown={(e) => { if (e.key === "Enter" && !renaming) onOpen(id); }}
+      className={cn(
+        "group/tile relative flex items-center gap-2 rounded-lg border border-base-200 px-3 py-2.5 transition-colors",
+        "cursor-pointer hover:border-base-300 hover:bg-base-accent",
+        drag.isDragging && "opacity-40",
+        drop.isDropTarget && "border-primary ring-2 ring-primary ring-inset",
+      )}
+    >
+      <Folder size={16} className="shrink-0 text-base-contrast-light" />
+      {renaming ? (
+        <input
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitRename();
+            if (e.key === "Escape") { setRenaming(false); setDraft(name); }
+          }}
+          onBlur={commitRename}
+          className="min-w-0 flex-1 rounded border border-base-200 bg-base px-1 py-0.5 text-sm text-base-contrast focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      ) : (
+        <span className="min-w-0 flex-1 truncate text-sm text-base-contrast">{name}</span>
+      )}
+      {!renaming && count > 0 && (
+        <span className="shrink-0 text-xs text-base-contrast-light">{count}</span>
+      )}
+      {manage && !renaming && (
+        <div ref={menuRef} className="relative shrink-0">
+          <button
+            type="button"
+            aria-label={`Folder actions: ${name}`}
+            onClick={(e) => { e.stopPropagation(); setMenuOpen((v) => !v); }}
+            // Enter/Space keydown bubbles to the tile root BEFORE the button's
+            // synthetic click fires — stop it so the tile doesn't open (see
+            // the matching chevron fix in MediaFolderTree.tsx).
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
+            className="rounded p-1 opacity-0 transition-opacity hover:bg-base-200/50 focus:opacity-100 group-hover/tile:opacity-100"
+          >
+            <MoreVertical size={16} />
+          </button>
+          {menuOpen && (
+            <div className="absolute right-0 top-6 z-20 w-28 rounded-md border border-base-200 bg-base py-1 shadow-lg">
+              <button
+                type="button"
+                className="block w-full px-3 py-1.5 text-left text-sm text-base-contrast hover:bg-base-accent"
+                onClick={(e) => { e.stopPropagation(); setMenuOpen(false); setDraft(name); setRenaming(true); }}
+                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
+              >
+                Rename
+              </button>
+              <button
+                type="button"
+                className="block w-full px-3 py-1.5 text-left text-sm text-red-600 hover:bg-base-accent dark:text-red-400"
+                onClick={(e) => { e.stopPropagation(); setMenuOpen(false); onDeleteRequest?.(id); }}
+                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
+              >
+                Delete
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/MediaFolderTree.tsx

@@ -0,0 +1,127 @@
+import { useRef } from "react";
+import { ChevronRight, Folder, LayoutGrid } from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { MediaFolder, MediaItem } from "../../media/types";
+import { buildFolderTree, type FolderTreeNode } from "../../lib/media-folders";
+import { useFolderDropTarget } from "../../hooks/useMediaFolderDnd";
+
+export interface MediaFolderDndBindings {
+  foldersRef: React.RefObject<Record<string, MediaFolder>>;
+  itemsByIdRef: React.RefObject<Record<string, MediaItem>>;
+  onMoveMedia: (ids: string[], target: string | null) => void;
+  onMoveFolder: (id: string, target: string | null) => void;
+}
+
+export interface MediaFolderTreeProps {
+  folders: Record<string, MediaFolder>;
+  counts: Record<string, number>;
+  totalCount: number;
+  currentFolderId: string | null;
+  onNavigate: (id: string | null) => void;
+  expandedIds: Set<string>;
+  onExpand: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  dnd?: MediaFolderDndBindings;
+}
+
+
+function useRowDropTarget(
+  targetFolderId: string | null,
+  dnd: MediaFolderDndBindings | undefined,
+  onDragHover?: () => void,
+) {
+  const emptyFoldersRef = useRef<Record<string, MediaFolder>>({});
+  const emptyItemsRef = useRef<Record<string, MediaItem>>({});
+  return useFolderDropTarget<HTMLDivElement>({
+    targetFolderId,
+    enabled: dnd !== undefined,
+    foldersRef: dnd?.foldersRef ?? emptyFoldersRef,
+    itemsByIdRef: dnd?.itemsByIdRef ?? emptyItemsRef,
+    onMoveMedia: dnd?.onMoveMedia ?? (() => {}),
+    onMoveFolder: dnd?.onMoveFolder ?? (() => {}),
+    onDragHover,
+  });
+}
+
+const rowClass = (active: boolean, isDropTarget: boolean) =>
+  cn(
+    "flex w-full cursor-pointer items-center gap-1.5 rounded px-2 py-1.5 text-sm transition-colors",
+    active ? "bg-primary/10 font-medium text-primary" : "text-base-contrast hover:bg-base-accent",
+    isDropTarget && "ring-2 ring-primary ring-inset",
+  );
+
+function TreeRow({
+  node, depth, props,
+}: { node: FolderTreeNode; depth: number; props: MediaFolderTreeProps }) {
+  const { currentFolderId, onNavigate, expandedIds, onExpand, onToggleExpand, counts, dnd } = props;
+  const expanded = expandedIds.has(node.id);
+  const { ref, isDropTarget } = useRowDropTarget(node.id, dnd, () => onExpand(node.id));
+
+  return (
+    <div>
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        onClick={() => onNavigate(node.id)}
+        onKeyDown={(e) => { if (e.key === "Enter") onNavigate(node.id); }}
+        className={rowClass(currentFolderId === node.id, isDropTarget)}
+        style={{ paddingLeft: `${8 + depth * 14}px` }}
+      >
+        {node.children.length > 0 ? (
+          <button
+            type="button"
+            aria-label={`${expanded ? "Collapse" : "Expand"} ${node.name}`}
+            aria-expanded={expanded}
+            onClick={(e) => { e.stopPropagation(); onToggleExpand(node.id); }}
+            // Enter/Space keydown bubbles to the row BEFORE the button's
+            // synthetic click fires — stop it so the row doesn't navigate.
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
+            className="shrink-0 rounded p-0.5 hover:bg-base-200"
+          >
+            <ChevronRight size={12} className={cn("transition-transform", expanded && "rotate-90")} />
+          </button>
+        ) : (
+          <span className="w-[17px] shrink-0" />
+        )}
+        <Folder size={14} className="shrink-0 text-base-contrast-light" />
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
+        {(counts[node.id] ?? 0) > 0 && (
+          <span className="shrink-0 text-xs text-base-contrast-light">{counts[node.id]}</span>
+        )}
+      </div>
+      {expanded &&
+        node.children.map((child) => (
+          <TreeRow key={child.id} node={child} depth={depth + 1} props={props} />
+        ))}
+    </div>
+  );
+}
+
+export function MediaFolderTree(props: MediaFolderTreeProps) {
+  const { folders, totalCount, currentFolderId, onNavigate, dnd } = props;
+  const tree = buildFolderTree(folders);
+  const root = useRowDropTarget(null, dnd);
+
+  return (
+    <nav aria-label="Media folders" className="flex flex-col gap-0.5">
+      <div
+        ref={root.ref}
+        role="button"
+        tabIndex={0}
+        onClick={() => onNavigate(null)}
+        onKeyDown={(e) => { if (e.key === "Enter") onNavigate(null); }}
+        className={rowClass(currentFolderId === null, root.isDropTarget)}
+      >
+        <LayoutGrid size={14} className="shrink-0 text-base-contrast-light" />
+        <span className="min-w-0 flex-1 truncate">All media</span>
+        {totalCount > 0 && (
+          <span className="shrink-0 text-xs text-base-contrast-light">{totalCount}</span>
+        )}
+      </div>
+      {tree.map((node) => (
+        <TreeRow key={node.id} node={node} depth={0} props={props} />
+      ))}
+    </nav>
+  );
+}