@asteby/metacore-runtime-react 39.2.0 → 39.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 39.2.2
+
+### Patch Changes
+
+- 4556375: Add data-aby-target model.{Model}.create on ModelActionToolbar create button for Aby UI tours.
+
+## 39.2.1
+
+### Patch Changes
+
+- dcc37b2: Discord-style SidebarLayoutManager (drag, rename, resolveLabel).
+
 ## 39.2.0
 
 ### Minor Changes

package/dist/model-action-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-action-toolbar.d.ts","sourceRoot":"","sources":["../src/model-action-toolbar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACpC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACtD;AAID;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAgBzD;AAiBD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,eAAe,EAAuB,EAClD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,GAC9B,gBAAgB,EAAE,CA2BpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAA+B,EAC/B,QAAQ,EACR,SAAS,EACT,cAAc,GACjB,EAAE,uBAAuB,sCAgEzB"}
+{"version":3,"file":"model-action-toolbar.d.ts","sourceRoot":"","sources":["../src/model-action-toolbar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACpC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACtD;AAID;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAgBzD;AAiBD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,eAAe,EAAuB,EAClD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,GAC9B,gBAAgB,EAAE,CA2BpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAA+B,EAC/B,QAAQ,EACR,SAAS,EACT,cAAc,GACjB,EAAE,uBAAuB,sCAqEzB"}

package/dist/model-action-toolbar.js

@@ -109,7 +109,9 @@ export function ModelActionToolbar({ model, endpoint, actions, placements = DEFA
         return null;
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: className ?? 'flex items-center gap-2', children: surfaced.map((a) => {
                     const isCreate = (a.placement ?? 'row') === 'create';
-                    return (_jsxs(Button, { variant: isCreate ? 'default' : 'outline', onClick: () => {
+                    return (_jsxs(Button, { variant: isCreate ? 'default' : 'outline', "data-aby-target": isCreate
+                            ? `model.${model}.create`
+                            : `model.${model}.action.${a.key}`, onClick: () => {
                             onActionIntent?.(a);
                             setActive(toActionMetadata(a));
                         }, onMouseEnter: () => onActionIntent?.(a), onFocus: () => onActionIntent?.(a), style: a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined, children: [_jsx(DynamicIcon, { name: a.icon || (isCreate ? 'Plus' : 'Zap'), className: "mr-2 h-4 w-4" }), t(a.label, { defaultValue: humanizeActionLabel(a.label) })] }, a.key));

package/dist/sidebar-layout-manager.d.ts

@@ -1,7 +1,6 @@
 /**
- * SidebarLayoutManager — admin editor for the org-wide sidebar overlay.
- * Transport-agnostic (loaders/mutators via props), same pattern as
- * PermissionsManager. Hosts wire fetchers to /api/org/sidebar-layout.
+ * SidebarLayoutManager — Discord-style org sidebar editor.
+ * The canvas IS the sidebar: sections, folders, leaves — drag, rename, nest.
  */
 import * as React from 'react';
 import { type CatalogLeaf, type SidebarLayoutDoc, type SidebarLayoutNode } from './apply-sidebar-layout';
@@ -9,12 +8,7 @@ export interface SidebarLayoutManagerProps {
     loadLayout: () => Promise<SidebarLayoutDoc>;
     saveLayout: (doc: SidebarLayoutDoc) => Promise<void>;
     resetLayout: () => Promise<void>;
-    /** Live catalog of every leaf the shell can show (core + addons). */
     catalog: CatalogLeaf[];
-    /**
-     * Optional: current live nav groups — used by "Partir del menú actual" to
-     * seed a tree when the org has no layout yet.
-     */
     currentGroups?: Array<{
         title: string;
         items: Array<{
@@ -28,9 +22,11 @@ export interface SidebarLayoutManagerProps {
             }>;
         }>;
     }>;
+    /** Resolve i18n keys / raw titles to human labels. */
+    resolveLabel?: (title: string) => string;
     title?: string;
     description?: string;
 }
-export declare function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, catalog, currentGroups, title, description, }: SidebarLayoutManagerProps): React.JSX.Element;
+export declare function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, catalog, currentGroups, resolveLabel, title, description, }: SidebarLayoutManagerProps): React.JSX.Element;
 export type { CatalogLeaf, SidebarLayoutDoc, SidebarLayoutNode };
 //# sourceMappingURL=sidebar-layout-manager.d.ts.map

package/dist/sidebar-layout-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-manager.d.ts","sourceRoot":"","sources":["../src/sidebar-layout-manager.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA2B9B,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,wBAAwB,CAAA;AAE/B,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,MAAM,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAC3C,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,qEAAqE;IACrE,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,KAAK,CAAC;YACX,KAAK,EAAE,MAAM,CAAA;YACb,GAAG,EAAE,MAAM,CAAA;YACX,IAAI,CAAC,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAA;SAC7D,CAAC,CAAA;KACH,CAAC,CAAA;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAmED,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,aAAa,EACb,KAAsB,EACtB,WAAsI,GACvI,EAAE,yBAAyB,qBA4X3B;AAED,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"sidebar-layout-manager.d.ts","sourceRoot":"","sources":["../src/sidebar-layout-manager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwC9B,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,wBAAwB,CAAA;AAE/B,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,MAAM,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAC3C,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,KAAK,CAAC;YACX,KAAK,EAAE,MAAM,CAAA;YACb,GAAG,EAAE,MAAM,CAAA;YACX,IAAI,CAAC,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,KAAK,CAAC;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAA;SAC7D,CAAC,CAAA;KACH,CAAC,CAAA;IACF,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AA4TD,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,aAAa,EACb,YAAuB,EACvB,KAAsB,EACtB,WAA8F,GAC/F,EAAE,yBAAyB,qBAgb3B;AAED,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/sidebar-layout-manager.js

@@ -1,14 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * SidebarLayoutManager — admin editor for the org-wide sidebar overlay.
- * Transport-agnostic (loaders/mutators via props), same pattern as
- * PermissionsManager. Hosts wire fetchers to /api/org/sidebar-layout.
+ * SidebarLayoutManager — Discord-style org sidebar editor.
+ * The canvas IS the sidebar: sections, folders, leaves — drag, rename, nest.
  */
 import * as React from 'react';
-import { ChevronDown, ChevronRight, FolderPlus, GripVertical, RotateCcw, Save, Trash2, Eye, EyeOff, Folder, FileText, } from 'lucide-react';
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ChevronDown, ChevronRight, FolderPlus, GripVertical, Pencil, Plus, RotateCcw, Save, Trash2, Eye, EyeOff, Hash, Folder, } from 'lucide-react';
 import { toast } from 'sonner';
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, ScrollArea, Badge, } from '@asteby/metacore-ui/primitives';
-import { applySidebarLayout, collectFolderKeys, folderAccessCapability, layoutTreeFromNavGroups, slugifyFolderKey, } from './apply-sidebar-layout';
+import { Button, Input, ScrollArea, } from '@asteby/metacore-ui/primitives';
+import { cn } from '@asteby/metacore-ui/lib';
+import { collectFolderKeys, folderAccessCapability, layoutTreeFromNavGroups, leafRefFor, slugifyFolderKey, } from './apply-sidebar-layout';
+function pathKey(path) {
+    return path.length ? path.join('.') : 'root';
+}
+function getAt(tree, path) {
+    let cur = tree;
+    let node = null;
+    for (const i of path) {
+        node = cur[i] ?? null;
+        if (!node)
+            return null;
+        cur = node.children ?? [];
+    }
+    return node;
+}
+function setChildren(tree, parentPath, children) {
+    if (parentPath.length === 0)
+        return children;
+    const clone = structuredClone(tree);
+    let cur = clone;
+    for (let d = 0; d < parentPath.length - 1; d++) {
+        const n = cur[parentPath[d]];
+        if (!n)
+            return tree;
+        n.children = n.children ?? [];
+        cur = n.children;
+    }
+    const parent = cur[parentPath[parentPath.length - 1]];
+    if (!parent)
+        return tree;
+    parent.children = children;
+    return clone;
+}
+function removeAt(tree, path) {
+    if (path.length === 0)
+        return { tree, node: null };
+    const parentPath = path.slice(0, -1);
+    const idx = path[path.length - 1];
+    const parentKids = parentPath.length === 0
+        ? [...tree]
+        : [...(getAt(tree, parentPath)?.children ?? [])];
+    const [node] = parentKids.splice(idx, 1);
+    return { tree: setChildren(tree, parentPath, parentKids), node: node ?? null };
+}
+function insertAt(tree, parentPath, index, node) {
+    const kids = parentPath.length === 0
+        ? [...tree]
+        : [...(getAt(tree, parentPath)?.children ?? [])];
+    const i = Math.max(0, Math.min(index, kids.length));
+    kids.splice(i, 0, node);
+    return setChildren(tree, parentPath, kids);
+}
+function updateAt(tree, path, patch) {
+    const clone = structuredClone(tree);
+    let cur = clone;
+    for (let d = 0; d < path.length - 1; d++) {
+        const n = cur[path[d]];
+        if (!n)
+            return tree;
+        n.children = n.children ?? [];
+        cur = n.children;
+    }
+    const i = path[path.length - 1];
+    if (!cur[i])
+        return tree;
+    cur[i] = { ...cur[i], ...patch };
+    return clone;
+}
 function collectUsedRefs(tree) {
     const used = new Set();
     const walk = (nodes) => {
@@ -22,86 +92,177 @@ function collectUsedRefs(tree) {
     walk(tree);
     return used;
 }
-function updateAt(tree, path, fn) {
-    if (path.length === 0)
-        return tree;
-    const [head, ...rest] = path;
-    return tree
-        .map((n, i) => {
-        if (i !== head)
-            return n;
-        if (rest.length === 0)
-            return fn(n);
-        const kids = updateAt(n.children ?? [], rest, fn);
-        return { ...n, children: kids };
-    })
-        .filter((n) => n != null);
-}
-function removeAt(tree, path) {
-    return updateAt(tree, path, () => null).filter(Boolean);
+function labelOf(node, catalogByRef, resolveLabel) {
+    if (node.type === 'leaf') {
+        const leaf = node.ref ? catalogByRef.get(node.ref) : undefined;
+        const raw = node.title || leaf?.title || node.ref || '…';
+        return resolveLabel(raw);
+    }
+    return resolveLabel(node.title || node.key || '…');
 }
-function moveSibling(tree, path, dir) {
-    if (path.length === 0)
-        return tree;
-    const parentPath = path.slice(0, -1);
-    const idx = path[path.length - 1];
-    const getList = (nodes, p) => {
-        if (p.length === 0)
-            return nodes;
-        let cur = nodes;
-        for (const i of p) {
-            cur = cur[i]?.children ?? [];
-        }
-        return cur;
+// ── Sortable row ──────────────────────────────────────────────────────────
+function SortableRow({ id, depth, kind, label, hidden, collapsed, onToggleCollapse, onRename, onToggleHidden, onDelete, onAddFolder, onAddLeaf, unusedLeaves, children, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(label);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (editing) {
+            setDraft(label);
+            requestAnimationFrame(() => inputRef.current?.select());
+        }
+    }, [editing, label]);
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.45 : hidden ? 0.45 : 1,
+        paddingLeft: 8 + depth * 14,
     };
-    const list = [...getList(tree, parentPath)];
-    const j = idx + dir;
-    if (j < 0 || j >= list.length)
-        return tree;
-    [list[idx], list[j]] = [list[j], list[idx]];
-    if (parentPath.length === 0)
-        return list;
-    return updateAt(tree, parentPath, (n) => ({ ...n, children: list }));
-}
-function appendChild(tree, parentPath, child) {
-    if (parentPath.length === 0)
-        return [...tree, child];
-    return updateAt(tree, parentPath, (n) => ({
-        ...n,
-        children: [...(n.children ?? []), child],
-    }));
+    const isCategory = kind === 'group' || kind === 'folder';
+    const commitRename = () => {
+        const next = draft.trim();
+        setEditing(false);
+        if (next && next !== label)
+            onRename(next);
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: "group/row", children: [_jsxs("div", { className: cn('flex items-center gap-1 rounded-md py-1 pr-1', isCategory ? 'mt-2 first:mt-0' : 'hover:bg-muted/50', isDragging && 'bg-muted/80'), children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-grab px-0.5 active:cursor-grabbing", "aria-label": "Arrastrar", ...attributes, ...listeners, children: _jsx(GripVertical, { className: "size-3.5 opacity-40 group-hover/row:opacity-100" }) }), isCategory ? (_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground p-0.5", onClick: onToggleCollapse, children: collapsed ? (_jsx(ChevronRight, { className: "size-3.5" })) : (_jsx(ChevronDown, { className: "size-3.5" })) })) : (_jsx(Hash, { className: "text-muted-foreground size-3.5 shrink-0 opacity-60" })), kind === 'folder' ? (_jsx(Folder, { className: "size-3.5 shrink-0 text-amber-500/90" })) : null, editing ? (_jsx(Input, { ref: inputRef, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commitRename, onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                commitRename();
+                            if (e.key === 'Escape')
+                                setEditing(false);
+                        }, className: "h-7 flex-1 text-sm" })) : (_jsx("button", { type: "button", className: cn('min-w-0 flex-1 truncate text-left text-sm', isCategory
+                            ? 'text-muted-foreground text-[11px] font-semibold uppercase tracking-wider'
+                            : 'font-medium'), onDoubleClick: () => setEditing(true), title: "Doble clic para renombrar", children: label })), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100", children: [kind === 'group' || kind === 'folder' ? (_jsxs(_Fragment, { children: [onAddFolder ? (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: "Nueva carpeta", onClick: onAddFolder, children: _jsx(FolderPlus, { className: "size-3" }) })) : null, onAddLeaf && unusedLeaves && unusedLeaves.length > 0 ? (_jsxs("select", { className: "border-input bg-background h-6 max-w-[110px] rounded border px-1 text-[10px]", defaultValue: "", title: "Agregar \u00EDtem", onChange: (e) => {
+                                            const ref = e.target.value;
+                                            e.target.value = '';
+                                            if (ref)
+                                                onAddLeaf(ref);
+                                        }, children: [_jsx("option", { value: "", children: "+ \u00EDtem" }), unusedLeaves.map((l) => (_jsx("option", { value: l.ref, children: l.title }, l.ref)))] })) : null] })) : null, _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: "Renombrar", onClick: () => setEditing(true), children: _jsx(Pencil, { className: "size-3" }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: hidden ? 'Mostrar' : 'Ocultar', onClick: onToggleHidden, children: hidden ? _jsx(EyeOff, { className: "size-3" }) : _jsx(Eye, { className: "size-3" }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "text-destructive size-6", title: "Quitar", onClick: onDelete, children: _jsx(Trash2, { className: "size-3" }) })] })] }), !collapsed ? children : null] }));
 }
-export function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, catalog, currentGroups, title = 'Menú lateral', description = 'Organizá carpetas y el orden del sidebar para toda la organización. Los permisos de cada carpeta aparecen en Permisos.', }) {
+// ── Manager ───────────────────────────────────────────────────────────────
+export function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, catalog, currentGroups, resolveLabel = (s) => s, title = 'Menú lateral', description = 'Arrastrá, renombrá y agrupá como en Discord. Así lo verá toda la organización.', }) {
     const [tree, setTree] = React.useState([]);
     const [baseline, setBaseline] = React.useState('[]');
     const [loading, setLoading] = React.useState(true);
     const [saving, setSaving] = React.useState(false);
-    const [newFolderTitle, setNewFolderTitle] = React.useState('');
-    const [expanded, setExpanded] = React.useState({});
+    const [collapsed, setCollapsed] = React.useState({});
+    const [activeId, setActiveId] = React.useState(null);
+    const [newCategory, setNewCategory] = React.useState('');
+    const catalogByRef = React.useMemo(() => {
+        const m = new Map();
+        for (const l of catalog) {
+            m.set(l.ref, { ...l, title: resolveLabel(l.title) });
+            for (const a of l.aliases ?? [])
+                m.set(a, m.get(l.ref));
+        }
+        return m;
+    }, [catalog, resolveLabel]);
+    const unused = React.useMemo(() => {
+        const used = collectUsedRefs(tree);
+        return catalog
+            .filter((l) => !used.has(l.ref) && !(l.aliases ?? []).some((a) => used.has(a)))
+            .map((l) => ({ ...l, title: resolveLabel(l.title) }));
+    }, [catalog, tree, resolveLabel]);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+    const seedFromCurrent = React.useCallback(() => {
+        if (!currentGroups?.length) {
+            toast.message('No hay menú actual para copiar');
+            return [];
+        }
+        return layoutTreeFromNavGroups(currentGroups, (u) => leafRefFor(u));
+    }, [currentGroups]);
     const reload = React.useCallback(async () => {
         setLoading(true);
         try {
             const doc = await loadLayout();
-            const t = doc.tree ?? [];
+            let t = doc.tree ?? [];
+            // Empty overlay → show live menu as editable draft (Discord empty-server feel).
+            if (t.length === 0 && currentGroups?.length) {
+                t = seedFromCurrent();
+                setBaseline('[]'); // still "unsaved overlay"
+            }
+            else {
+                setBaseline(JSON.stringify(t));
+            }
             setTree(t);
-            setBaseline(JSON.stringify(t));
         }
         catch (e) {
-            toast.error(e instanceof Error ? e.message : 'No se pudo cargar el layout');
+            toast.error(e instanceof Error ? e.message : 'No se pudo cargar el menú');
         }
         finally {
             setLoading(false);
         }
-    }, [loadLayout]);
+    }, [loadLayout, currentGroups, seedFromCurrent]);
     React.useEffect(() => {
         void reload();
     }, [reload]);
     const dirty = JSON.stringify(tree) !== baseline;
-    const used = React.useMemo(() => collectUsedRefs(tree), [tree]);
-    const unused = React.useMemo(() => catalog.filter((l) => !used.has(l.ref) && !(l.aliases ?? []).some((a) => used.has(a))), [catalog, used]);
     const folderKeys = React.useMemo(() => collectFolderKeys(tree), [tree]);
-    const preview = React.useMemo(() => applySidebarLayout(catalog, tree), [catalog, tree]);
-    const pathKey = (path) => path.join('.');
+    // Flat id → path index for DnD (ids are path keys)
+    const idToPath = React.useMemo(() => {
+        const map = new Map();
+        const walk = (nodes, parent) => {
+            nodes.forEach((_, i) => {
+                const path = [...parent, i];
+                map.set(pathKey(path), path);
+                const n = nodes[i];
+                if (n.children?.length)
+                    walk(n.children, path);
+            });
+        };
+        walk(tree, []);
+        return map;
+    }, [tree]);
+    const handleDragStart = (e) => {
+        setActiveId(String(e.active.id));
+    };
+    const handleDragEnd = (e) => {
+        setActiveId(null);
+        const { active, over } = e;
+        if (!over || active.id === over.id)
+            return;
+        const fromPath = idToPath.get(String(active.id));
+        const toPath = idToPath.get(String(over.id));
+        if (!fromPath || !toPath)
+            return;
+        // Same parent → reorder siblings
+        const fromParent = fromPath.slice(0, -1);
+        const toParent = toPath.slice(0, -1);
+        if (pathKey(fromParent) === pathKey(toParent)) {
+            const kids = fromParent.length === 0
+                ? [...tree]
+                : [...(getAt(tree, fromParent)?.children ?? [])];
+            const oldIndex = fromPath[fromPath.length - 1];
+            const newIndex = toPath[toPath.length - 1];
+            setTree(setChildren(tree, fromParent, arrayMove(kids, oldIndex, newIndex)));
+            return;
+        }
+        // Different parent → move node under target's parent at target index
+        // (or into target if it's a folder/group)
+        const overNode = getAt(tree, toPath);
+        let destParent = toParent;
+        let destIndex = toPath[toPath.length - 1];
+        if (overNode && (overNode.type === 'group' || overNode.type === 'folder')) {
+            destParent = toPath;
+            destIndex = overNode.children?.length ?? 0;
+        }
+        // Prevent dropping into own descendant
+        const fromKey = pathKey(fromPath);
+        if (pathKey(destParent).startsWith(fromKey + '.') || pathKey(destParent) === fromKey) {
+            return;
+        }
+        setTree((prev) => {
+            const { tree: without, node } = removeAt(prev, fromPath);
+            if (!node)
+                return prev;
+            // Recompute dest index if we removed from earlier sibling in same parent
+            let idx = destIndex;
+            if (pathKey(fromParent) === pathKey(destParent) && fromPath[fromPath.length - 1] < destIndex) {
+                idx = Math.max(0, destIndex - 1);
+            }
+            return insertAt(without, destParent, idx, node);
+        });
+    };
     const handleSave = async () => {
         setSaving(true);
         try {
@@ -120,9 +281,10 @@ export function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, cata
         setSaving(true);
         try {
             await resetLayout();
-            setTree([]);
+            const seeded = seedFromCurrent();
+            setTree(seeded);
             setBaseline('[]');
-            toast.success('Menú restaurado al default (addons + core)');
+            toast.success('Overlay restaurado — mostrando el menú default');
         }
         catch (e) {
             toast.error(e instanceof Error ? e.message : 'Error al resetear');
@@ -131,74 +293,92 @@ export function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, cata
             setSaving(false);
         }
     };
-    const seedFromCurrent = () => {
-        if (!currentGroups?.length) {
-            toast.message('No hay menú actual para copiar');
-            return;
-        }
-        const seeded = layoutTreeFromNavGroups(currentGroups);
-        setTree(seeded);
-        toast.message('Árbol partido del menú actual — guardá para aplicar');
-    };
-    const addRootFolder = () => {
-        const titleText = newFolderTitle.trim() || 'Nueva carpeta';
-        const key = slugifyFolderKey(titleText);
+    const addRootCategory = () => {
+        const name = newCategory.trim() || 'Nueva sección';
+        const key = slugifyFolderKey(name);
         setTree((t) => [
             ...t,
             {
                 type: 'group',
-                key: `group_${key}`,
-                title: titleText,
-                children: [{ type: 'folder', key, title: titleText, icon: 'Folder', children: [] }],
+                key: `group_${key}_${Date.now() % 10000}`,
+                title: name,
+                children: [],
             },
         ]);
-        setNewFolderTitle('');
-    };
-    const addLeafTo = (parentPath, leaf) => {
-        setTree((t) => appendChild(t, parentPath, {
-            type: 'leaf',
-            ref: leaf.ref,
-            title: leaf.title,
-            icon: leaf.icon,
-        }));
+        setNewCategory('');
     };
-    const renderNode = (node, path) => {
-        const k = pathKey(path);
-        const isOpen = expanded[k] ?? true;
-        const isFolderish = node.type === 'group' || node.type === 'folder';
-        return (_jsxs("div", { className: "border-border/60 rounded-md border bg-background/50", children: [_jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [isFolderish ? (_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground p-0.5", onClick: () => setExpanded((e) => ({ ...e, [k]: !isOpen })), children: isOpen ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) })) : (_jsx(GripVertical, { className: "text-muted-foreground size-4 shrink-0 opacity-40" })), node.type === 'folder' ? (_jsx(Folder, { className: "text-amber-600 size-4 shrink-0" })) : node.type === 'leaf' ? (_jsx(FileText, { className: "text-muted-foreground size-4 shrink-0" })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: node.title || node.key || node.ref }), node.type === 'folder' && node.key ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: folderAccessCapability(node.key) })) : null, _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-7", title: node.hidden ? 'Mostrar' : 'Ocultar', onClick: () => setTree((t) => updateAt(t, path, (n) => ({ ...n, hidden: !n.hidden }))), children: node.hidden ? _jsx(EyeOff, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-7", onClick: () => setTree((t) => moveSibling(t, path, -1)), children: "\u2191" }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-7", onClick: () => setTree((t) => moveSibling(t, path, 1)), children: "\u2193" }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "text-destructive size-7", onClick: () => setTree((t) => removeAt(t, path)), children: _jsx(Trash2, { className: "size-3.5" }) })] }), isFolderish && isOpen ? (_jsxs("div", { className: "border-border/40 space-y-1 border-t px-2 py-2 pl-6", children: [(node.children ?? []).map((child, i) => renderNode(child, [...path, i])), unused.length > 0 ? (_jsxs("select", { className: "border-input bg-background w-full rounded-md border px-2 py-1 text-xs", defaultValue: "", onChange: (e) => {
-                                const ref = e.target.value;
-                                e.target.value = '';
-                                const leaf = catalog.find((l) => l.ref === ref);
-                                if (leaf)
-                                    addLeafTo(path, leaf);
-                            }, children: [_jsx("option", { value: "", children: "+ Agregar \u00EDtem\u2026" }), unused.map((l) => (_jsxs("option", { value: l.ref, children: [l.title, " (", l.ref, ")"] }, l.ref)))] })) : null, node.type === 'group' ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 text-xs", onClick: () => {
-                                const titleText = 'Nueva carpeta';
-                                const key = slugifyFolderKey(`${titleText}_${path.join('')}_${Date.now() % 1000}`);
-                                setTree((t) => appendChild(t, path, {
-                                    type: 'folder',
-                                    key,
-                                    title: titleText,
-                                    icon: 'Folder',
-                                    children: [],
-                                }));
-                            }, children: [_jsx(FolderPlus, { className: "mr-1 size-3.5" }), "Subcarpeta"] })) : null] })) : null] }, k));
+    const renderList = (nodes, parentPath) => {
+        const ids = nodes.map((_, i) => pathKey([...parentPath, i]));
+        return (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: nodes.map((node, i) => {
+                const path = [...parentPath, i];
+                const id = pathKey(path);
+                const depth = parentPath.length;
+                const isOpen = !(collapsed[id] ?? false);
+                const lbl = labelOf(node, catalogByRef, resolveLabel);
+                return (_jsx(SortableRow, { id: id, depth: depth, kind: node.type, label: lbl, hidden: node.hidden, collapsed: !isOpen, onToggleCollapse: () => setCollapsed((c) => ({ ...c, [id]: !(c[id] ?? false) })), onRename: (next) => setTree((t) => updateAt(t, path, { title: next })), onToggleHidden: () => setTree((t) => updateAt(t, path, { hidden: !node.hidden })), onDelete: () => setTree((t) => removeAt(t, path).tree), onAddFolder: node.type === 'group' || node.type === 'folder'
+                        ? () => {
+                            const key = slugifyFolderKey(`carpeta_${Date.now() % 1000}`);
+                            setTree((t) => insertAt(t, path, node.children?.length ?? 0, {
+                                type: 'folder',
+                                key,
+                                title: 'Nueva carpeta',
+                                icon: 'Folder',
+                                children: [],
+                            }));
+                            setCollapsed((c) => ({ ...c, [id]: false }));
+                        }
+                        : undefined, onAddLeaf: node.type === 'group' || node.type === 'folder'
+                        ? (ref) => {
+                            const leaf = catalog.find((l) => l.ref === ref);
+                            setTree((t) => insertAt(t, path, node.children?.length ?? 0, {
+                                type: 'leaf',
+                                ref,
+                                title: leaf?.title,
+                                icon: leaf?.icon,
+                            }));
+                        }
+                        : undefined, unusedLeaves: unused, children: node.type !== 'leaf' && isOpen
+                        ? renderList(node.children ?? [], path)
+                        : null }, id));
+            }) }));
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-muted-foreground max-w-2xl text-sm", children: description })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: seedFromCurrent, children: "Partir del men\u00FA actual" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: saving, onClick: () => void handleReset(), children: [_jsx(RotateCcw, { className: "mr-1 size-3.5" }), "Restaurar default"] }), _jsxs(Button, { type: "button", size: "sm", disabled: !dirty || saving, onClick: () => void handleSave(), children: [_jsx(Save, { className: "mr-1 size-3.5" }), saving ? 'Guardando…' : dirty ? 'Guardar' : 'Guardado'] })] })] }), loading ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Cargando\u2026" })) : (_jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "\u00C1rbol del men\u00FA" }), _jsxs(CardDescription, { children: ["Carpetas nuevas otorgan el permiso", ' ', _jsx("code", { className: "text-xs", children: "folder.<key>.access" }), "."] })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex-1 space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Nueva secci\u00F3n + carpeta" }), _jsx(Input, { value: newFolderTitle, onChange: (e) => setNewFolderTitle(e.target.value), placeholder: "Configuraci\u00F3n" })] }), _jsxs(Button, { type: "button", className: "mt-5", size: "sm", onClick: addRootFolder, children: [_jsx(FolderPlus, { className: "mr-1 size-3.5" }), "Crear"] })] }), _jsx(ScrollArea, { className: "h-[420px] pr-2", children: _jsx("div", { className: "space-y-2", children: tree.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Sin overlay \u2014 el sidebar usa el merge default. Part\u00ED del men\u00FA actual o cre\u00E1 una carpeta." })) : (tree.map((n, i) => renderNode(n, [i]))) }) }), folderKeys.length > 0 ? (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["Carpetas con permiso: ", folderKeys.map((k) => folderAccessCapability(k)).join(', ')] })) : null] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Cat\u00E1logo sin usar / vista previa" }), _jsx(CardDescription, { children: "\u00CDtems disponibles para colocar. La vista previa aplica el overlay sobre el cat\u00E1logo vivo." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(ScrollArea, { className: "h-[200px] rounded-md border p-2", children: unused.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Todos los \u00EDtems est\u00E1n en el \u00E1rbol." })) : (_jsx("ul", { className: "space-y-1", children: unused.map((l) => (_jsxs("li", { className: "flex items-center justify-between gap-2 text-xs", children: [_jsxs("span", { className: "truncate", children: [l.title, ' ', _jsx("span", { className: "text-muted-foreground font-mono", children: l.ref })] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-6 shrink-0 text-xs", onClick: () => {
-                                                            if (tree.length === 0) {
-                                                                setTree([
-                                                                    {
-                                                                        type: 'group',
-                                                                        key: 'sidebar.general',
-                                                                        title: 'sidebar.general',
-                                                                        children: [
-                                                                            { type: 'leaf', ref: l.ref, title: l.title, icon: l.icon },
-                                                                        ],
-                                                                    },
-                                                                ]);
-                                                            }
-                                                            else {
-                                                                addLeafTo([0], l);
-                                                            }
-                                                        }, children: "+" })] }, l.ref))) })) }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Preview" }), !preview ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Default merge (sin overlay)." })) : (_jsx("ul", { className: "space-y-2 text-sm", children: preview.map((g) => (_jsxs("li", { children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide", children: g.title }), _jsx("ul", { className: "mt-1 space-y-0.5 pl-2", children: g.items.map((it) => (_jsxs("li", { children: [it.folderKey ? `📁 ${it.title}` : it.title, it.items?.length ? (_jsx("ul", { className: "text-muted-foreground pl-4 text-xs", children: it.items.map((c) => (_jsx("li", { children: c.title }, c.ref || c.url))) })) : null] }, `${it.title}-${it.url}`))) })] }, g.title))) }))] })] })] })] }))] }));
+    const activeLabel = activeId
+        ? (() => {
+            const p = idToPath.get(activeId);
+            if (!p)
+                return null;
+            const n = getAt(tree, p);
+            return n ? labelOf(n, catalogByRef, resolveLabel) : null;
+        })()
+        : null;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-muted-foreground max-w-xl text-sm", children: description })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: saving, onClick: () => {
+                                    setTree(seedFromCurrent());
+                                    toast.message('Árbol recargado desde el menú actual');
+                                }, children: "Recargar men\u00FA actual" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: saving, onClick: () => void handleReset(), children: [_jsx(RotateCcw, { className: "mr-1 size-3.5" }), "Restaurar default"] }), _jsxs(Button, { type: "button", size: "sm", disabled: !dirty || saving, onClick: () => void handleSave(), children: [_jsx(Save, { className: "mr-1 size-3.5" }), saving ? 'Guardando…' : dirty ? 'Guardar cambios' : 'Guardado'] })] })] }), loading ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Cargando men\u00FA\u2026" })) : (_jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_240px]", children: [_jsxs("div", { className: "bg-muted/20 border-border overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border/60 flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-muted-foreground text-[11px] font-semibold uppercase tracking-wider", children: "Vista del men\u00FA" }), baseline === '[]' && dirty ? (_jsx("span", { className: "text-amber-600 text-[11px]", children: "Sin guardar \u00B7 borrador del men\u00FA actual" })) : dirty ? (_jsx("span", { className: "text-amber-600 text-[11px]", children: "Cambios sin guardar" })) : (_jsx("span", { className: "text-muted-foreground text-[11px]", children: folderKeys.length
+                                            ? `${folderKeys.length} carpeta(s) con permiso`
+                                            : 'Layout activo' }))] }), _jsx(ScrollArea, { className: "h-[min(70vh,640px)]", children: _jsxs("div", { className: "p-2 pb-4", children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [tree.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-8 text-center text-sm", children: "Men\u00FA vac\u00EDo. Cre\u00E1 una secci\u00F3n o recarg\u00E1 el men\u00FA actual." })) : (renderList(tree, [])), _jsx(DragOverlay, { children: activeLabel ? (_jsx("div", { className: "bg-background border-border rounded-md border px-3 py-1.5 text-sm shadow-lg", children: activeLabel })) : null })] }), _jsxs("div", { className: "mt-3 flex gap-2 px-2", children: [_jsx(Input, { value: newCategory, onChange: (e) => setNewCategory(e.target.value), placeholder: "Nombre de secci\u00F3n\u2026", className: "h-8 text-sm", onKeyDown: (e) => {
+                                                        if (e.key === 'Enter')
+                                                            addRootCategory();
+                                                    } }), _jsxs(Button, { type: "button", size: "sm", className: "h-8 shrink-0", onClick: addRootCategory, children: [_jsx(Plus, { className: "mr-1 size-3.5" }), "Secci\u00F3n"] })] })] }) })] }), _jsxs("div", { className: "bg-muted/10 border-border flex flex-col overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border/60 border-b px-3 py-2", children: [_jsx("p", { className: "text-muted-foreground text-[11px] font-semibold uppercase tracking-wider", children: "Sin colocar" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-[11px]", children: "Agregalos desde el men\u00FA + de cada secci\u00F3n" })] }), _jsx(ScrollArea, { className: "flex-1", children: _jsx("ul", { className: "space-y-1 p-2", children: unused.length === 0 ? (_jsx("li", { className: "text-muted-foreground px-1 py-4 text-center text-xs", children: "Todo est\u00E1 en el men\u00FA" })) : (unused.map((l) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "hover:bg-muted/60 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs", title: l.ref, onClick: () => {
+                                                if (tree.length === 0) {
+                                                    setTree([
+                                                        {
+                                                            type: 'group',
+                                                            key: 'sidebar.general',
+                                                            title: 'General',
+                                                            children: [
+                                                                { type: 'leaf', ref: l.ref, title: l.title, icon: l.icon },
+                                                            ],
+                                                        },
+                                                    ]);
+                                                }
+                                                else {
+                                                    setTree((t) => insertAt(t, [0], t[0]?.children?.length ?? 0, {
+                                                        type: 'leaf',
+                                                        ref: l.ref,
+                                                        title: l.title,
+                                                        icon: l.icon,
+                                                    }));
+                                                }
+                                            }, children: [_jsx(Hash, { className: "text-muted-foreground size-3 shrink-0" }), _jsx("span", { className: "truncate font-medium", children: l.title }), _jsx(Plus, { className: "text-muted-foreground ml-auto size-3 shrink-0 opacity-50" })] }) }, l.ref)))) }) }), folderKeys.length > 0 ? (_jsxs("div", { className: "border-border/60 text-muted-foreground border-t px-3 py-2 text-[10px] leading-relaxed", children: ["Permisos:", ' ', folderKeys.map((k) => folderAccessCapability(k)).join(', ')] })) : null] })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "39.2.0",
+  "version": "39.2.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/model-action-toolbar.tsx

@@ -166,6 +166,11 @@ export function ModelActionToolbar({
                         <Button
                             key={a.key}
                             variant={isCreate ? 'default' : 'outline'}
+                            data-aby-target={
+                                isCreate
+                                    ? `model.${model}.create`
+                                    : `model.${model}.action.${a.key}`
+                            }
                             onClick={() => {
                                 onActionIntent?.(a)
                                 setActive(toActionMetadata(a))