@almadar/ui 5.163.0 → 5.164.0

package/dist/components/index.cjs

@@ -22637,6 +22637,7 @@ var init_DashboardLayout = __esm({
       onNotificationClick,
       showThemeToggle = true,
       sidebarFooter,
+      sidebarContent,
       onSignOut: onSignOutProp,
       currentPath,
       layoutMode = "sidebar",
@@ -22766,7 +22767,11 @@ var init_DashboardLayout = __esm({
                     {
                       as: "nav",
                       gap: "none",
-                      className: cn("flex-1 py-4 space-y-1 overflow-y-auto", isRail ? "px-2" : "px-3"),
+                      className: cn(
+                        "py-4 space-y-1 overflow-y-auto",
+                        sidebarContent && !isRail ? "shrink-0" : "flex-1",
+                        isRail ? "px-2" : "px-3"
+                      ),
                       children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
                         NavLink,
                         {
@@ -22778,6 +22783,7 @@ var init_DashboardLayout = __esm({
                       ))
                     }
                   ),
+                  sidebarContent && !isRail && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 overflow-y-auto border-t border-border dark:border-border px-2 py-3", children: sidebarContent }),
                   sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
                 ]
               }
@@ -25848,7 +25854,17 @@ function fileIcon(name) {
       return "file";
   }
 }
-var TreeNodeItem, FlatTreeNodeItem; exports.FileTree = void 0;
+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 TreeNodeItem, FlatTreeNodeItem, FlatFileTree; exports.FileTree = void 0;
 var init_FileTree = __esm({
   "components/core/molecules/FileTree.tsx"() {
     "use client";
@@ -25939,42 +25955,77 @@ var init_FileTree = __esm({
       indent,
       childrenByParent,
       onNodeSelect,
-      defaultExpanded = false
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      selectedId,
+      look,
+      isExpanded,
+      onToggle
     }) => {
-      const [expanded, setExpanded] = React77.useState(defaultExpanded || depth < 1);
       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 handleClick = React77.useCallback(() => {
-        if (hasChildren) setExpanded((prev) => !prev);
+        if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
         onNodeSelect?.(item.id);
-      }, [hasChildren, item.id, onNodeSelect]);
+      }, [hasChildren, expanded, item.id, onNodeSelect, onToggle]);
+      const handleChevron = React77.useCallback((e) => {
+        e.stopPropagation();
+        onToggle(item.id, expanded);
+      }, [item.id, expanded, onToggle]);
+      const handleAction = React77.useCallback((e) => {
+        e.stopPropagation();
+        onNodeAction?.(item.id);
+      }, [item.id, onNodeAction]);
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           exports.Box,
           {
-            className: "flex items-center gap-1.5 py-0.5 px-2 cursor-pointer rounded-sm transition-colors hover:bg-muted",
+            className: `group/treerow flex items-center gap-1.5 px-2 cursor-pointer rounded-sm 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",
+            "aria-selected": isSelected,
             "aria-expanded": hasChildren ? expanded : void 0,
             children: [
-              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { onClick: handleChevron, className: "flex items-center flex-shrink-0", role: "button", "aria-label": expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Icon,
                 {
                   name: expanded ? "chevron-down" : "chevron-right",
                   size: "xs",
-                  className: "text-[var(--color-muted-foreground)] flex-shrink-0"
+                  className: isSelected ? "text-inherit" : "text-[var(--color-muted-foreground)]"
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { style: { width: 12, flexShrink: 0 } }),
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { style: { width: 12, flexShrink: 0 } }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Icon,
                 {
-                  name: item.icon ?? (hasChildren ? expanded ? "folder-open" : "folder" : "file"),
+                  name: item.icon || (nav ? "file-text" : hasChildren ? expanded ? "folder-open" : "folder" : "file"),
                   size: "xs",
-                  className: hasChildren ? "text-[var(--color-warning)]" : "text-[var(--color-muted-foreground)]"
+                  className: isSelected ? "text-inherit" : nav || !hasChildren ? "text-[var(--color-muted-foreground)]" : "text-[var(--color-warning)]"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Typography,
+                {
+                  variant: "caption",
+                  className: `truncate ${nav ? "text-sm" : "font-mono text-xs"} !text-inherit ${isSelected ? "font-semibold" : ""}`,
+                  children: item.label
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "truncate font-mono text-xs", children: item.label })
+              onNodeAction && /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Box,
+                {
+                  onClick: handleAction,
+                  role: "button",
+                  "aria-label": nodeActionLabel ?? "Node action",
+                  title: nodeActionLabel,
+                  className: `ml-auto flex-shrink-0 rounded-sm p-0.5 opacity-0 group-hover/treerow:opacity-100 transition-opacity ${isSelected ? "hover:bg-primary-foreground/20" : "hover:bg-border"}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: nodeActionIcon ?? "plus", size: "xs", className: "text-inherit" })
+                }
+              )
             ]
           }
         ),
@@ -25985,47 +26036,116 @@ var init_FileTree = __esm({
             depth: depth + 1,
             indent,
             childrenByParent,
-            onNodeSelect
+            onNodeSelect,
+            onNodeAction,
+            nodeActionIcon,
+            nodeActionLabel,
+            selectedId,
+            look,
+            isExpanded,
+            onToggle
           },
           child.id
         )) })
       ] });
     };
+    FlatFileTree = ({
+      items,
+      selectedId,
+      look = "files",
+      onNodeSelect,
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      className,
+      indent = 16
+    }) => {
+      const [overrides, setOverrides] = React77.useState(() => /* @__PURE__ */ new Map());
+      const byId = React77__namespace.default.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
+      const selectedAncestors = React77__namespace.default.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
+      const lastSelectedRef = React77__namespace.default.useRef(selectedId);
+      React77__namespace.default.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 = React77.useCallback(
+        (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id)),
+        [overrides, selectedAncestors]
+      );
+      const onToggle = React77.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__ */ jsxRuntime.jsx(exports.Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        FlatTreeNodeItem,
+        {
+          item,
+          depth: 0,
+          indent,
+          childrenByParent,
+          onNodeSelect,
+          onNodeAction,
+          nodeActionIcon,
+          nodeActionLabel,
+          selectedId,
+          look,
+          isExpanded,
+          onToggle
+        },
+        item.id
+      )) });
+    };
     exports.FileTree = ({
       tree,
       items,
       selectedPath,
+      selectedId,
+      look = "files",
       onFileSelect,
       onNodeSelect,
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
       className,
       indent = 16
     }) => {
       if (items) {
-        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__ */ jsxRuntime.jsx(exports.Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          FlatTreeNodeItem,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FlatFileTree,
           {
-            item,
-            depth: 0,
-            indent,
-            childrenByParent,
+            items,
+            selectedId,
+            look,
             onNodeSelect,
-            defaultExpanded: true
-          },
-          item.id
-        )) });
+            onNodeAction,
+            nodeActionIcon,
+            nodeActionLabel,
+            className,
+            indent
+          }
+        );
       }
       if (!tree || tree.length === 0) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -38159,13 +38279,35 @@ var init_RichTextEditor = __esm({
         document.execCommand("createLink", false, safe);
         afterEdit();
       }, [afterEdit, t, toolbar.link]);
+      const imageInputRef = React77.useRef(null);
+      const savedRangeRef = React77.useRef(null);
       const execImage = React77.useCallback(() => {
-        const url = window.prompt(t("richTextEditor.imagePrompt"));
-        if (!url) return;
-        const safe = safeUrl(url, ["http://", "https://", "data:image/"]) ?? `https://${url}`;
-        document.execCommand("insertImage", false, safe);
-        afterEdit();
-      }, [afterEdit, t]);
+        const root = ref.current;
+        const sel = window.getSelection();
+        savedRangeRef.current = root && sel && sel.rangeCount > 0 && root.contains(sel.anchorNode) ? sel.getRangeAt(0).cloneRange() : null;
+        imageInputRef.current?.click();
+      }, []);
+      const handleImageFile = React77.useCallback((e) => {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+          const url = typeof reader.result === "string" ? reader.result : "";
+          if (!url.startsWith("data:image/")) return;
+          const root = ref.current;
+          if (!root) return;
+          root.focus();
+          const sel = window.getSelection();
+          if (sel && savedRangeRef.current && root.contains(savedRangeRef.current.startContainer)) {
+            sel.removeAllRanges();
+            sel.addRange(savedRangeRef.current);
+          }
+          document.execCommand("insertImage", false, url);
+          afterEdit();
+        };
+        reader.readAsDataURL(file);
+      }, [afterEdit]);
       const execRule = React77.useCallback(() => {
         document.execCommand("insertHorizontalRule", false);
         afterEdit();
@@ -38178,6 +38320,18 @@ var init_RichTextEditor = __esm({
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn("flex flex-col gap-2", className), children: [
         /* @__PURE__ */ jsxRuntime.jsx(RichTextStyles, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: imageInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onChange: handleImageFile
+          }
+        ),
         showToolbar && /* @__PURE__ */ jsxRuntime.jsxs(
           exports.Box,
           {
@@ -45304,15 +45458,6 @@ var init_Form = __esm({
                   "data-testid": `image-preview-${fieldName2}`
                 }
               ) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                exports.Input,
-                {
-                  ...commonProps,
-                  type: "url",
-                  value: imageUrl,
-                  onChange: (e) => handleChange(fieldName2, e.target.value)
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 exports.UploadDropZone,
                 {
@@ -45331,6 +45476,16 @@ var init_Form = __esm({
                     reader.readAsDataURL(f3);
                   }
                 }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Input,
+                {
+                  ...commonProps,
+                  type: "url",
+                  placeholder: t("form.imageUrlFallback"),
+                  value: imageUrl,
+                  onChange: (e) => handleChange(fieldName2, e.target.value)
+                }
               )
             ] });
           }
@@ -54102,7 +54257,8 @@ var en_default = {
   "richTextEditor.linkPrompt": "Link address",
   "richTextEditor.image": "Insert image",
   "richTextEditor.imagePrompt": "Image URL",
-  "richTextEditor.placeholder": "Start writing\u2026"
+  "richTextEditor.placeholder": "Start writing\u2026",
+  "form.imageUrlFallback": "\u2026or paste an image address"
 };
 
 // hooks/useTranslate.ts

package/dist/components/index.d.cts

@@ -3755,6 +3755,14 @@ interface FileTreeProps {
     items?: FileTreeItem[];
     /** Currently selected file path */
     selectedPath?: string;
+    /** Currently selected node id, in flat `items` mode: the row highlights
+     *  and every ancestor auto-expands so the selection is always visible —
+     *  the "you are here" a navigation tree needs. */
+    selectedId?: string;
+    /** Visual treatment for flat `items` mode: `files` (default) keeps the
+     *  monospace file-browser look; `nav` renders a sidebar navigation tree —
+     *  regular font, document icons, roomier hit areas. */
+    look?: 'files' | 'nav';
     /** Called when a file is clicked */
     onFileSelect?: (path: string) => void;
     /** Called when a node is clicked, in flat `items` mode; carries the
@@ -3762,6 +3770,14 @@ interface FileTreeProps {
      *  the click-to-select affordance, mirroring Badge's `onRemove`.
      *  @offByDefault */
     onNodeSelect?: (id: string) => void;
+    /** Called from the row's hover action button, in flat `items` mode;
+     *  carries that node's id. Presence-gated: binding it renders the action.
+     *  @offByDefault */
+    onNodeAction?: (id: string) => void;
+    /** Icon for the row hover action (default: plus). */
+    nodeActionIcon?: string;
+    /** Accessible label/tooltip for the row hover action. */
+    nodeActionLabel?: string;
     /** CSS class */
     className?: string;
     /** Indent size per level in px (default: 16) */
@@ -12650,6 +12666,10 @@ interface DashboardLayoutProps {
     /** Custom sidebar footer (optional). When omitted, the sidebar has
      *  no footer — apps that need Settings/etc. add them via navItems. */
     sidebarFooter?: React__default.ReactNode;
+    /** Optional content region rendered between the nav links and the footer —
+     *  a page tree or any consumer navigation surface; scrolls independently
+     *  and takes the sidebar's remaining height. Hidden in the collapsed rail. */
+    sidebarContent?: React__default.ReactNode;
     /** Active path used to highlight the matching nav item. Falls back
      *  to `useCurrentPagePath()` (set by `CurrentPagePathProvider`), then
      *  to `useLocation().pathname`. Production deploys can omit it; the

package/dist/components/index.d.ts

@@ -3755,6 +3755,14 @@ interface FileTreeProps {
     items?: FileTreeItem[];
     /** Currently selected file path */
     selectedPath?: string;
+    /** Currently selected node id, in flat `items` mode: the row highlights
+     *  and every ancestor auto-expands so the selection is always visible —
+     *  the "you are here" a navigation tree needs. */
+    selectedId?: string;
+    /** Visual treatment for flat `items` mode: `files` (default) keeps the
+     *  monospace file-browser look; `nav` renders a sidebar navigation tree —
+     *  regular font, document icons, roomier hit areas. */
+    look?: 'files' | 'nav';
     /** Called when a file is clicked */
     onFileSelect?: (path: string) => void;
     /** Called when a node is clicked, in flat `items` mode; carries the
@@ -3762,6 +3770,14 @@ interface FileTreeProps {
      *  the click-to-select affordance, mirroring Badge's `onRemove`.
      *  @offByDefault */
     onNodeSelect?: (id: string) => void;
+    /** Called from the row's hover action button, in flat `items` mode;
+     *  carries that node's id. Presence-gated: binding it renders the action.
+     *  @offByDefault */
+    onNodeAction?: (id: string) => void;
+    /** Icon for the row hover action (default: plus). */
+    nodeActionIcon?: string;
+    /** Accessible label/tooltip for the row hover action. */
+    nodeActionLabel?: string;
     /** CSS class */
     className?: string;
     /** Indent size per level in px (default: 16) */
@@ -12650,6 +12666,10 @@ interface DashboardLayoutProps {
     /** Custom sidebar footer (optional). When omitted, the sidebar has
      *  no footer — apps that need Settings/etc. add them via navItems. */
     sidebarFooter?: React__default.ReactNode;
+    /** Optional content region rendered between the nav links and the footer —
+     *  a page tree or any consumer navigation surface; scrolls independently
+     *  and takes the sidebar's remaining height. Hidden in the collapsed rail. */
+    sidebarContent?: React__default.ReactNode;
     /** Active path used to highlight the matching nav item. Falls back
      *  to `useCurrentPagePath()` (set by `CurrentPagePathProvider`), then
      *  to `useLocation().pathname`. Production deploys can omit it; the