@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/chunk-YDNJLLG6.js

@@ -0,0 +1,516 @@
+import { useDraggable, useDropZone } from './chunk-L2DEKY4J.js';
+import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-MBQAMMSE.js';
+import React, { createContext, useState, useCallback, useRef, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function fileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "file-code";
+    case "js":
+    case "jsx":
+      return "file-code";
+    case "json":
+    case "orb":
+      return "file-json";
+    case "css":
+    case "scss":
+      return "file-text";
+    case "md":
+      return "file-text";
+    case "py":
+      return "file-code";
+    case "html":
+      return "file-code";
+    default:
+      return "file";
+  }
+}
+var TreeNavContext = createContext({ activeKey: void 0, setActive: () => {
+} });
+function levelOf(el) {
+  return Number(el.getAttribute("aria-level") ?? "1");
+}
+function treeRowKeyDown(e, state) {
+  if (e.target !== e.currentTarget) return;
+  const row = e.currentTarget;
+  const tree = row.closest('[role="tree"]');
+  if (!tree) return;
+  const rows = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+  const idx = rows.indexOf(row);
+  const focusRow = (target) => {
+    if (!target) return;
+    e.preventDefault();
+    target.focus();
+  };
+  switch (e.key) {
+    case "Enter":
+    case " ":
+      e.preventDefault();
+      row.click();
+      return;
+    case "ArrowDown":
+      focusRow(rows[idx + 1]);
+      return;
+    case "ArrowUp":
+      focusRow(rows[idx - 1]);
+      return;
+    case "Home":
+      focusRow(rows[0]);
+      return;
+    case "End":
+      focusRow(rows[rows.length - 1]);
+      return;
+    case "ArrowRight":
+      if (state.expanded === false) {
+        e.preventDefault();
+        state.toggle();
+      } else if (state.expanded === true) {
+        const next = rows[idx + 1];
+        if (next && levelOf(next) > levelOf(row)) focusRow(next);
+      }
+      return;
+    case "ArrowLeft":
+      if (state.expanded === true) {
+        e.preventDefault();
+        state.toggle();
+      } else {
+        const level = levelOf(row);
+        focusRow(rows.slice(0, idx).reverse().find((r) => levelOf(r) < level));
+      }
+      return;
+  }
+}
+function TreeRoot({
+  defaultKey,
+  className,
+  rest,
+  children
+}) {
+  const [active, setActive] = useState(void 0);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (active === void 0) return;
+    if (!rootRef.current?.querySelector('[role="treeitem"][tabindex="0"]')) setActive(void 0);
+  });
+  const value = React.useMemo(() => ({ activeKey: active ?? defaultKey, setActive }), [active, defaultKey]);
+  return /* @__PURE__ */ jsx(TreeNavContext.Provider, { value, children: /* @__PURE__ */ jsx(Box, { ref: rootRef, className: `py-1 overflow-y-auto ${className ?? ""}`, ...domPassthrough(rest), role: "tree", children }) });
+}
+var TreeNodeItem = ({
+  node,
+  depth,
+  indent,
+  selectedPath,
+  onFileSelect,
+  onNodeExpand,
+  expandedPaths,
+  defaultExpanded = false
+}) => {
+  const isDir = node.type === "dir";
+  const hasDerived = !isDir && ((node.children?.length ?? 0) > 0 || node.expandable === true);
+  const askedRef = useRef(false);
+  const revealed = expandedPaths?.includes(node.path) === true;
+  useEffect(() => {
+    if (!revealed) return;
+    setExpanded(true);
+    if (node.expandable === true && !askedRef.current) {
+      askedRef.current = true;
+      onNodeExpand?.(node.path);
+    }
+  }, [revealed, node.expandable, node.path, onNodeExpand]);
+  const [expanded, setExpanded] = useState(isDir && (defaultExpanded || depth < 1));
+  const isSelected = node.path === selectedPath;
+  const { t } = useTranslate();
+  const nav = useContext(TreeNavContext);
+  const toggleDerived = useCallback(() => {
+    if (!expanded && node.expandable === true && !askedRef.current) {
+      askedRef.current = true;
+      onNodeExpand?.(node.path);
+    }
+    setExpanded((prev) => !prev);
+  }, [expanded, node.expandable, node.path, onNodeExpand]);
+  const handleClick = useCallback(() => {
+    if (isDir) {
+      setExpanded((prev) => !prev);
+    } else {
+      onFileSelect?.(node.path);
+    }
+  }, [isDir, node.path, onFileSelect]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: `flex items-center gap-1.5 py-0.5 px-2 cursor-pointer rounded-interactive transition-colors ${isSelected ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`,
+        style: { paddingLeft: depth * indent + 8 },
+        onClick: handleClick,
+        role: "treeitem",
+        tabIndex: nav.activeKey === node.path ? 0 : -1,
+        "aria-level": depth + 1,
+        "aria-selected": isSelected,
+        "aria-expanded": isDir || hasDerived ? expanded : void 0,
+        onFocus: () => nav.setActive(node.path),
+        onKeyDown: (e) => treeRowKeyDown(e, {
+          expanded: isDir || hasDerived ? expanded : void 0,
+          toggle: isDir ? () => setExpanded((prev) => !prev) : toggleDerived
+        }),
+        children: [
+          isDir ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: expanded ? "chevron-down" : "chevron-right",
+              size: "xs",
+              className: "text-[var(--color-muted-foreground)] flex-shrink-0"
+            }
+          ) : hasDerived ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              ...pressableProps((e) => {
+                e.stopPropagation();
+                toggleDerived();
+              }),
+              tabIndex: -1,
+              "aria-expanded": expanded,
+              "aria-label": expanded ? t("fileTree.collapse") : t("fileTree.expand"),
+              "data-testid": `file-tree-toggle-${node.path}`,
+              className: "flex-shrink-0 flex items-center",
+              children: /* @__PURE__ */ jsx(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "xs", className: "text-[var(--color-muted-foreground)]" })
+            }
+          ) : /* @__PURE__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: isDir ? expanded ? "folder-open" : "folder" : fileIcon(node.name),
+              size: "xs",
+              className: isSelected ? "text-inherit" : isDir ? "text-[var(--color-warning)]" : "text-[var(--color-muted-foreground)]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              className: `truncate font-mono text-xs !text-inherit ${isSelected ? "font-semibold" : ""}`,
+              children: node.name
+            }
+          ),
+          node.note !== void 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: `text-[9px] flex-shrink-0 ${isSelected ? "!text-inherit opacity-80" : "text-[var(--color-muted-foreground)]"}`, children: node.note }),
+          !isDir && node.size !== void 0 && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              className: `text-[9px] ml-auto flex-shrink-0 ${isSelected ? "!text-inherit opacity-80" : "text-[var(--color-muted-foreground)]"}`,
+              children: node.size < 1024 ? `${node.size}B` : `${Math.round(node.size / 1024)}KB`
+            }
+          )
+        ]
+      }
+    ),
+    (isDir || hasDerived) && expanded && node.children && /* @__PURE__ */ jsx(Box, { role: "group", children: node.children.map((child) => /* @__PURE__ */ jsx(
+      TreeNodeItem,
+      {
+        node: child,
+        depth: depth + 1,
+        indent,
+        selectedPath,
+        onFileSelect,
+        onNodeExpand,
+        expandedPaths,
+        defaultExpanded: depth < 0
+      },
+      child.path
+    )) })
+  ] });
+};
+function siblingsOf(target, roots, childrenByParent) {
+  if (target.parentId) {
+    const parentSiblings = childrenByParent.get(target.parentId);
+    if (parentSiblings?.some((sibling) => sibling.id === target.id)) return parentSiblings;
+  }
+  return roots;
+}
+var FlatTreeNodeItem = ({
+  item,
+  depth,
+  indent,
+  childrenByParent,
+  roots,
+  onNodeSelect,
+  onNodeAction,
+  nodeActionIcon,
+  nodeActionLabel,
+  onNodeReorder,
+  selectedId,
+  look,
+  isExpanded,
+  onToggle
+}) => {
+  const { t } = useTranslate();
+  const children = childrenByParent.get(item.id);
+  const hasChildren = !!children && children.length > 0;
+  const expanded = hasChildren && isExpanded(item.id, depth);
+  const isSelected = selectedId !== void 0 && selectedId !== "" && item.id === selectedId;
+  const nav = look === "nav";
+  const rowRef = useRef(null);
+  const treeNav = useContext(TreeNavContext);
+  const handleClick = useCallback(() => {
+    if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
+    onNodeSelect?.(item.id);
+  }, [hasChildren, expanded, item.id, onNodeSelect, onToggle]);
+  const handleChevron = useCallback((e) => {
+    e.stopPropagation();
+    onToggle(item.id, expanded);
+  }, [item.id, expanded, onToggle]);
+  const handleAction = useCallback((e) => {
+    e.stopPropagation();
+    onNodeAction?.(item.id);
+  }, [item.id, onNodeAction]);
+  const { dragProps } = useDraggable({
+    payload: { kind: "tree-node", data: { id: item.id } },
+    disabled: !onNodeReorder
+  });
+  const handleRowDrop = useCallback(
+    (payload, position) => {
+      if (!onNodeReorder) return;
+      const draggedId = typeof payload.data.id === "string" ? payload.data.id : void 0;
+      if (!draggedId || draggedId === item.id) return;
+      const rect = rowRef.current?.getBoundingClientRect();
+      if (!rect || rect.height === 0) return;
+      const relY = position.y - rect.top;
+      const third = rect.height / 3;
+      if (relY >= third && relY <= third * 2) {
+        const existingChildren = childrenByParent.get(item.id);
+        onNodeReorder(draggedId, item.id, existingChildren ? existingChildren.length : 0);
+        return;
+      }
+      const siblings = siblingsOf(item, roots, childrenByParent);
+      const newParentId = siblings === roots ? null : item.parentId ?? null;
+      const targetIndex = siblings.findIndex((sibling) => sibling.id === item.id);
+      const index = relY < third ? targetIndex < 0 ? 0 : targetIndex : targetIndex < 0 ? siblings.length : targetIndex + 1;
+      onNodeReorder(draggedId, newParentId, index);
+    },
+    [onNodeReorder, item, roots, childrenByParent]
+  );
+  const { dropProps } = useDropZone({
+    accepts: ["tree-node"],
+    onDrop: handleRowDrop,
+    disabled: !onNodeReorder
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: rowRef,
+        className: `group/treerow flex items-center gap-1.5 px-2 cursor-pointer rounded-interactive transition-colors ${nav ? "py-1" : "py-0.5"} ${isSelected ? "bg-primary text-primary-foreground" : nav ? "text-foreground hover:bg-muted" : "hover:bg-muted"}`,
+        style: { paddingLeft: depth * indent + 8 },
+        onClick: handleClick,
+        role: "treeitem",
+        tabIndex: treeNav.activeKey === item.id ? 0 : -1,
+        "aria-level": depth + 1,
+        "aria-selected": isSelected,
+        "aria-expanded": hasChildren ? expanded : void 0,
+        onFocus: () => treeNav.setActive(item.id),
+        onKeyDown: (e) => treeRowKeyDown(e, {
+          expanded: hasChildren ? expanded : void 0,
+          toggle: () => onToggle(item.id, expanded)
+        }),
+        ...dragProps,
+        ...dropProps,
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx(Box, { ...pressableProps(handleChevron), tabIndex: -1, className: "flex items-center flex-shrink-0", "aria-label": expanded ? t("fileTree.collapse") : t("fileTree.expand"), children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: expanded ? "chevron-down" : "chevron-right",
+              size: "xs",
+              className: isSelected ? "text-inherit" : "text-[var(--color-muted-foreground)]"
+            }
+          ) }) : /* @__PURE__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: item.icon || (nav ? "file-text" : hasChildren ? expanded ? "folder-open" : "folder" : "file"),
+              size: "xs",
+              className: isSelected ? "text-inherit" : nav || !hasChildren ? "text-[var(--color-muted-foreground)]" : "text-[var(--color-warning)]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              className: `truncate ${nav ? "text-sm" : "font-mono text-xs"} !text-inherit ${isSelected ? "font-semibold" : ""}`,
+              children: item.label
+            }
+          ),
+          onNodeAction && /* @__PURE__ */ jsx(
+            Box,
+            {
+              ...pressableProps(handleAction),
+              tabIndex: treeNav.activeKey === item.id ? 0 : -1,
+              "aria-label": nodeActionLabel ?? t("fileTree.nodeAction"),
+              title: nodeActionLabel,
+              className: `ml-auto flex-shrink-0 rounded-interactive p-0.5 opacity-0 group-hover/treerow:opacity-100 group-focus-within/treerow:opacity-100 transition-opacity ${isSelected ? "hover:bg-primary-foreground/20" : "hover:bg-border"}`,
+              children: /* @__PURE__ */ jsx(Icon, { name: nodeActionIcon ?? "plus", size: "xs", className: "text-inherit" })
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && expanded && /* @__PURE__ */ jsx(Box, { role: "group", children: children.map((child) => /* @__PURE__ */ jsx(
+      FlatTreeNodeItem,
+      {
+        item: child,
+        depth: depth + 1,
+        indent,
+        childrenByParent,
+        roots,
+        onNodeSelect,
+        onNodeAction,
+        nodeActionIcon,
+        nodeActionLabel,
+        onNodeReorder,
+        selectedId,
+        look,
+        isExpanded,
+        onToggle
+      },
+      child.id
+    )) })
+  ] });
+};
+function ancestorsOf(id, byId) {
+  const out = /* @__PURE__ */ new Set();
+  if (!id) return out;
+  let cur = byId.get(id)?.parentId;
+  while (cur && byId.has(cur) && !out.has(cur)) {
+    out.add(cur);
+    cur = byId.get(cur)?.parentId;
+  }
+  return out;
+}
+var FlatFileTree = ({
+  items,
+  selectedId,
+  look = "files",
+  onNodeSelect,
+  onNodeAction,
+  nodeActionIcon,
+  nodeActionLabel,
+  onNodeReorder,
+  className,
+  indent = 16,
+  ...rest
+}) => {
+  const [overrides, setOverrides] = useState(() => /* @__PURE__ */ new Map());
+  const byId = React.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
+  const selectedAncestors = React.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
+  const lastSelectedRef = React.useRef(selectedId);
+  React.useEffect(() => {
+    if (selectedId === lastSelectedRef.current) return;
+    lastSelectedRef.current = selectedId;
+    setOverrides((prev) => {
+      if (![...selectedAncestors].some((a) => prev.get(a) === false)) return prev;
+      const next = new Map(prev);
+      for (const a of selectedAncestors) if (next.get(a) === false) next.delete(a);
+      return next;
+    });
+  }, [selectedId, selectedAncestors]);
+  const isExpanded = useCallback(
+    (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id)),
+    [overrides, selectedAncestors]
+  );
+  const onToggle = useCallback((id, effective) => {
+    setOverrides((prev) => {
+      const next = new Map(prev);
+      next.set(id, !effective);
+      return next;
+    });
+  }, []);
+  if (items.length === 0) return null;
+  const ids = new Set(items.map((node) => node.id));
+  const childrenByParent = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const item of items) {
+    if (item.parentId && ids.has(item.parentId)) {
+      const siblings = childrenByParent.get(item.parentId);
+      if (siblings) siblings.push(item);
+      else childrenByParent.set(item.parentId, [item]);
+    } else {
+      roots.push(item);
+    }
+  }
+  return /* @__PURE__ */ jsx(TreeRoot, { defaultKey: roots[0]?.id, className, rest, children: roots.map((item) => /* @__PURE__ */ jsx(
+    FlatTreeNodeItem,
+    {
+      item,
+      depth: 0,
+      indent,
+      childrenByParent,
+      roots,
+      onNodeSelect,
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      onNodeReorder,
+      selectedId,
+      look,
+      isExpanded,
+      onToggle
+    },
+    item.id
+  )) });
+};
+var FileTree = ({
+  tree,
+  items,
+  selectedPath,
+  selectedId,
+  look = "files",
+  onFileSelect,
+  onNodeExpand,
+  expandedPaths,
+  onNodeSelect,
+  onNodeAction,
+  nodeActionIcon,
+  nodeActionLabel,
+  onNodeReorder,
+  className,
+  indent = 16,
+  ...rest
+}) => {
+  if (items) {
+    return /* @__PURE__ */ jsx(
+      FlatFileTree,
+      {
+        ...rest,
+        items,
+        selectedId,
+        look,
+        onNodeSelect,
+        onNodeAction,
+        nodeActionIcon,
+        nodeActionLabel,
+        onNodeReorder,
+        className,
+        indent
+      }
+    );
+  }
+  if (!tree || tree.length === 0) return null;
+  return /* @__PURE__ */ jsx(TreeRoot, { defaultKey: tree[0]?.path, className, rest, children: tree.map((node) => /* @__PURE__ */ jsx(
+    TreeNodeItem,
+    {
+      node,
+      depth: 0,
+      indent,
+      selectedPath,
+      onFileSelect,
+      onNodeExpand,
+      expandedPaths,
+      defaultExpanded: true
+    },
+    node.path
+  )) });
+};
+FileTree.displayName = "FileTree";
+
+export { FileTree };