@almadar/ui 5.163.0 → 5.164.0

package/dist/runtime/index.js

@@ -24445,6 +24445,7 @@ var init_DashboardLayout = __esm({
       onNotificationClick,
       showThemeToggle = true,
       sidebarFooter,
+      sidebarContent,
       onSignOut: onSignOutProp,
       currentPath,
       layoutMode = "sidebar",
@@ -24570,7 +24571,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__ */ jsx(
                         NavLink,
                         {
@@ -24582,6 +24587,7 @@ var init_DashboardLayout = __esm({
                       ))
                     }
                   ),
+                  sidebarContent && !isRail && /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto border-t border-border dark:border-border px-2 py-3", children: sidebarContent }),
                   sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
                 ]
               }
@@ -26991,7 +26997,17 @@ function fileIcon(name) {
       return "file";
   }
 }
-var TreeNodeItem, FlatTreeNodeItem, FileTree;
+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, FileTree;
 var init_FileTree = __esm({
   "components/core/molecules/FileTree.tsx"() {
     "use client";
@@ -27082,42 +27098,77 @@ var init_FileTree = __esm({
       indent,
       childrenByParent,
       onNodeSelect,
-      defaultExpanded = false
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      selectedId,
+      look,
+      isExpanded,
+      onToggle
     }) => {
-      const [expanded, setExpanded] = 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 = 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 = useCallback((e) => {
+        e.stopPropagation();
+        onToggle(item.id, expanded);
+      }, [item.id, expanded, onToggle]);
+      const handleAction = useCallback((e) => {
+        e.stopPropagation();
+        onNodeAction?.(item.id);
+      }, [item.id, onNodeAction]);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           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__ */ jsx(
+              hasChildren ? /* @__PURE__ */ jsx(Box, { onClick: handleChevron, className: "flex items-center flex-shrink-0", role: "button", "aria-label": expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
                 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__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
+              ) }) : /* @__PURE__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
               /* @__PURE__ */ jsx(
                 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__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: `truncate ${nav ? "text-sm" : "font-mono text-xs"} !text-inherit ${isSelected ? "font-semibold" : ""}`,
+                  children: item.label
                 }
               ),
-              /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "truncate font-mono text-xs", children: item.label })
+              onNodeAction && /* @__PURE__ */ jsx(
+                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__ */ jsx(Icon, { name: nodeActionIcon ?? "plus", size: "xs", className: "text-inherit" })
+                }
+              )
             ]
           }
         ),
@@ -27128,47 +27179,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] = useState(() => /* @__PURE__ */ new Map());
+      const byId = React85__default.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
+      const selectedAncestors = React85__default.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
+      const lastSelectedRef = React85__default.useRef(selectedId);
+      React85__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 = 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(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsx(
+        FlatTreeNodeItem,
+        {
+          item,
+          depth: 0,
+          indent,
+          childrenByParent,
+          onNodeSelect,
+          onNodeAction,
+          nodeActionIcon,
+          nodeActionLabel,
+          selectedId,
+          look,
+          isExpanded,
+          onToggle
+        },
+        item.id
+      )) });
+    };
     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__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsx(
-          FlatTreeNodeItem,
+        return /* @__PURE__ */ 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__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsx(
@@ -36410,13 +36530,35 @@ var init_RichTextEditor = __esm({
         document.execCommand("createLink", false, safe);
         afterEdit();
       }, [afterEdit, t, toolbar.link]);
+      const imageInputRef = useRef(null);
+      const savedRangeRef = useRef(null);
       const execImage = 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 = 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 = useCallback(() => {
         document.execCommand("insertHorizontalRule", false);
         afterEdit();
@@ -36429,6 +36571,18 @@ var init_RichTextEditor = __esm({
       }
       return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-2", className), children: [
         /* @__PURE__ */ jsx(RichTextStyles, {}),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: imageInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onChange: handleImageFile
+          }
+        ),
         showToolbar && /* @__PURE__ */ jsxs(
           Box,
           {
@@ -43328,15 +43482,6 @@ var init_Form = __esm({
                   "data-testid": `image-preview-${fieldName2}`
                 }
               ) : null,
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  ...commonProps,
-                  type: "url",
-                  value: imageUrl,
-                  onChange: (e) => handleChange(fieldName2, e.target.value)
-                }
-              ),
               /* @__PURE__ */ jsx(
                 UploadDropZone,
                 {
@@ -43355,6 +43500,16 @@ var init_Form = __esm({
                     reader.readAsDataURL(f3);
                   }
                 }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...commonProps,
+                  type: "url",
+                  placeholder: t("form.imageUrlFallback"),
+                  value: imageUrl,
+                  onChange: (e) => handleChange(fieldName2, e.target.value)
+                }
               )
             ] });
           }

package/locales/ar.json

@@ -550,5 +550,6 @@
   "richTextEditor.linkPrompt": "عنوان الرابط",
   "richTextEditor.image": "إدراج صورة",
   "richTextEditor.imagePrompt": "رابط الصورة",
-  "richTextEditor.placeholder": "ابدأ الكتابة…"
+  "richTextEditor.placeholder": "ابدأ الكتابة…",
+  "form.imageUrlFallback": "…أو الصق رابط الصورة"
 }

package/locales/en.json

@@ -550,5 +550,6 @@
   "richTextEditor.linkPrompt": "Link address",
   "richTextEditor.image": "Insert image",
   "richTextEditor.imagePrompt": "Image URL",
-  "richTextEditor.placeholder": "Start writing…"
+  "richTextEditor.placeholder": "Start writing…",
+  "form.imageUrlFallback": "…or paste an image address"
 }

package/locales/sl.json

@@ -550,5 +550,6 @@
   "richTextEditor.linkPrompt": "Naslov povezave",
   "richTextEditor.image": "Vstavi sliko",
   "richTextEditor.imagePrompt": "URL slike",
-  "richTextEditor.placeholder": "Začnite pisati …"
+  "richTextEditor.placeholder": "Začnite pisati …",
+  "form.imageUrlFallback": "…ali prilepite naslov slike"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.163.0",
+  "version": "5.164.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.73.0",
+    "@almadar/core": "^10.74.0",
     "@almadar/evaluator": "^2.42.0",
     "@almadar/logger": "^1.11.0",
     "@almadar/runtime": "^6.63.0",
-    "@almadar/std": "^16.192.0",
+    "@almadar/std": "^16.193.0",
     "@almadar/syntax": "^1.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",