@veap/plugins 0.0.0-stage → 0.1.0

package/dist/widgets/plugin-extension-point.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+export interface PluginExtensionPointProps {
+    target: string;
+    point: string;
+    mode?: "single" | "multiple";
+    className?: string;
+    props?: any;
+    fallback?: React.ReactNode;
+    children?: React.ReactNode;
+    as?: React.ElementType;
+    includeDisabled?: boolean;
+}
+export declare function PluginExtensionPoint({ target, point, mode, className, props, fallback, children, as: Container, includeDisabled, }: PluginExtensionPointProps): Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined>;
+export { PluginExtensionPoint as ExtensionPoint };

package/dist/widgets/plugin-extension-point.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCurrentSession } from "@veap/auth";
+import { isPluginsContextBound, pluginsContext } from "../common/context";
+export async function PluginExtensionPoint({ target, point, mode = "multiple", className, props, fallback, children, as: Container, includeDisabled = false, }) {
+    const g = globalThis;
+    if (g.__VEAP_BOOTSTRAPPING_PROMISE__) {
+        try {
+            await g.__VEAP_BOOTSTRAPPING_PROMISE__;
+        }
+        catch { }
+    }
+    const fallbackContent = (children ?? fallback ?? null);
+    if (!isPluginsContextBound()) {
+        return fallbackContent;
+    }
+    let user = null;
+    try {
+        const sessionData = await getCurrentSession();
+        user = sessionData?.user ?? null;
+    }
+    catch {
+        user = null;
+    }
+    const userRoles = user?.roles || [];
+    const userPermissions = user?.permissions || [];
+    const extensions = await pluginsContext().registry.getExtensions(target, point, includeDisabled, {
+        roles: userRoles,
+        permissions: userPermissions,
+    });
+    if (extensions.length === 0)
+        return fallbackContent;
+    if (mode === "single") {
+        const ext = extensions[0];
+        const Component = ext?.component;
+        if (!Component)
+            return fallbackContent;
+        if (Container || className) {
+            const Wrapper = Container || "div";
+            return (_jsx(Wrapper, { className: className, children: _jsx(Component, { ...props }, ext.id) }));
+        }
+        return _jsx(Component, { ...props }, ext.id);
+    }
+    const Wrapper = Container || "div";
+    return (_jsx(Wrapper, { className: className, children: extensions.map((ext) => {
+            const Component = ext.component;
+            if (!Component)
+                return null;
+            return _jsx(Component, { ...props }, ext.id);
+        }) }));
+}
+export { PluginExtensionPoint as ExtensionPoint };

package/dist/widgets/plugin-widget-area-client.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+interface PluginWidgetAreaClientProps {
+    area: string;
+    className?: string;
+    props?: any;
+    fallback?: React.ReactNode;
+    as?: React.ElementType;
+}
+export declare function usePluginWidgets(area: string): any[];
+export declare function PluginWidgetAreaClient({ area, className, props, fallback, as: Container, }: PluginWidgetAreaClientProps): any;
+export { PluginWidgetAreaClient as WidgetAreaClient };

package/dist/widgets/plugin-widget-area-client.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { getPluginWidgetsAction } from "../actions/index";
+import { onPluginsChanged } from "../common/events";
+export function usePluginWidgets(area) {
+    const [widgets, setWidgets] = useState([]);
+    const fetchWidgets = useCallback(() => {
+        getPluginWidgetsAction(area).then(setWidgets);
+    }, [area]);
+    useEffect(() => {
+        fetchWidgets();
+        const unsubscribe = onPluginsChanged(() => {
+            fetchWidgets();
+        });
+        return unsubscribe;
+    }, [fetchWidgets]);
+    return widgets;
+}
+export function PluginWidgetAreaClient({ area, className, props, fallback, as: Container = "div", }) {
+    const widgets = usePluginWidgets(area);
+    if (widgets.length === 0)
+        return fallback || null;
+    return (_jsx(Container, { className: className, children: widgets.map((widget) => {
+            const Component = widget.component;
+            if (!Component)
+                return null;
+            return _jsx(Component, { ...props }, widget.id);
+        }) }));
+}
+export { PluginWidgetAreaClient as WidgetAreaClient };

package/dist/widgets/plugin-widget-area.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+interface PluginWidgetAreaProps {
+    area: string;
+    className?: string;
+    props?: any;
+    fallback?: React.ReactNode;
+    as?: React.ElementType;
+}
+export declare function PluginWidgetArea({ area, className, props, fallback, as: Container, }: PluginWidgetAreaProps): Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined>;
+export { PluginWidgetArea as WidgetArea };

package/dist/widgets/plugin-widget-area.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCurrentSession } from "@veap/auth";
+import { pluginsContext } from "../common/context";
+export async function PluginWidgetArea({ area, className, props, fallback, as: Container = "div", }) {
+    const { user } = await getCurrentSession();
+    const userRoles = user?.roles || [];
+    const userPermissions = user?.permissions || [];
+    const widgets = await pluginsContext().registry.getWidgets(area, {
+        roles: userRoles,
+        permissions: userPermissions,
+    });
+    if (widgets.length === 0)
+        return fallback || null;
+    return (_jsx(Container, { className: className, children: widgets.map((widget) => {
+            const Component = widget.component;
+            return _jsx(Component, { ...props }, widget.id);
+        }) }));
+}
+export { PluginWidgetArea as WidgetArea };

package/dist/widgets/use-confirm-action.d.ts

@@ -0,0 +1,19 @@
+export type ConfirmOptions = {
+    action?: string;
+    title?: string;
+    description?: string;
+    preferredMethod?: string;
+    rememberMinutes?: number;
+    metadata?: Record<string, any>;
+};
+export type ConfirmResult = {
+    confirmed: boolean;
+    method?: string;
+};
+/**
+ * Hook for confirming sensitive actions via password/passkey.
+ *
+ * If the action-confirm plugin is enabled, shows an action verification dialog.
+ * If it's disabled, falls back to the native browser confirm().
+ */
+export declare function useConfirmAction(): (options: ConfirmOptions) => Promise<ConfirmResult>;

package/dist/widgets/use-confirm-action.js

@@ -0,0 +1,68 @@
+"use client";
+import { eventBus } from "@veap/kernel/events";
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * Hook for confirming sensitive actions via password/passkey.
+ *
+ * If the action-confirm plugin is enabled, shows an action verification dialog.
+ * If it's disabled, falls back to the native browser confirm().
+ */
+export function useConfirmAction() {
+    const pendingRequests = useRef(new Map());
+    const subscriberId = useRef(`use-confirm-action-${Math.random().toString(36).slice(2, 9)}`).current;
+    useEffect(() => {
+        const responseHandler = (event) => {
+            const { requestId, confirmed, method } = event.payload;
+            const pending = pendingRequests.current.get(requestId);
+            if (pending) {
+                clearTimeout(pending.timeout);
+                pendingRequests.current.delete(requestId);
+                pending.resolve({ confirmed, method });
+            }
+        };
+        eventBus.subscribe("action:confirm:response", subscriberId, responseHandler);
+        return () => {
+            eventBus.unsubscribe("action:confirm:response", subscriberId);
+            for (const [, pending] of pendingRequests.current) {
+                clearTimeout(pending.timeout);
+            }
+            pendingRequests.current.clear();
+        };
+    }, [subscriberId]);
+    const confirmAction = useCallback((options) => {
+        return new Promise((resolve) => {
+            const requestId = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+            const ackSubId = `${subscriberId}-ack-${requestId}`;
+            const fallbackTimeout = setTimeout(() => {
+                eventBus.unsubscribe("action:confirm:ack", ackSubId);
+                const confirmed = window.confirm(options.description || options.title || "Confirm action?");
+                resolve({ confirmed });
+            }, 500);
+            const ackHandler = (event) => {
+                if (event.payload?.requestId !== requestId)
+                    return;
+                eventBus.unsubscribe("action:confirm:ack", ackSubId);
+                clearTimeout(fallbackTimeout);
+                const responseTimeout = setTimeout(() => {
+                    pendingRequests.current.delete(requestId);
+                    resolve({ confirmed: false });
+                }, 5 * 60 * 1000);
+                pendingRequests.current.set(requestId, {
+                    resolve,
+                    timeout: responseTimeout,
+                });
+            };
+            eventBus.subscribe("action:confirm:ack", ackSubId, ackHandler);
+            eventBus.publish("action:confirm:request", {
+                requestId,
+                action: options.action ?? "confirm",
+                title: options.title ?? "Confirm action",
+                description: options.description,
+                preferredMethod: options.preferredMethod,
+                rememberMinutes: options.rememberMinutes,
+                metadata: options.metadata,
+            });
+        });
+    }, [subscriberId]);
+    return confirmAction;
+}

package/dist/widgets/widget-composer-client.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+interface WidgetState {
+    id: string;
+    enabled: boolean;
+    colSpan: number;
+    rowSpan?: number;
+}
+interface WidgetComposerClientProps {
+    slot: string;
+    defaultWidgets: {
+        id: string;
+        name: string;
+        component: React.ReactNode;
+        defaultColSpan?: number;
+        defaultRowSpan?: number;
+    }[];
+    userState: WidgetState[] | null;
+    columns?: number;
+}
+export declare function WidgetComposerClient({ slot, defaultWidgets, userState, columns, }: WidgetComposerClientProps): React.JSX.Element | null;
+export {};

package/dist/widgets/widget-composer-client.js

@@ -0,0 +1,281 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Icon } from "@iconify/react";
+import { useTranslation } from "@veap/intl";
+import { Button, cn } from "@veap/ui";
+import { Grip, Trash, UnfoldHorizontal, UnfoldVertical } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { saveUserWidgetsState } from "../actions/index";
+const activeEditSections = new Set();
+const sectionHandlers = new Map();
+let listenerCount = 0;
+function registerSection(slot, handler) {
+    sectionHandlers.set(slot, handler);
+    return () => {
+        sectionHandlers.delete(slot);
+        activeEditSections.delete(slot);
+    };
+}
+function setSectionEditMode(slot, edit) {
+    if (edit) {
+        activeEditSections.add(slot);
+    }
+    else {
+        activeEditSections.delete(slot);
+    }
+    sectionHandlers.get(slot)?.setEdit(edit);
+}
+function toggleAllSections() {
+    const anyActive = activeEditSections.size > 0;
+    if (anyActive) {
+        for (const [slot, handler] of sectionHandlers.entries()) {
+            handler.revert();
+            handler.setEdit(false);
+        }
+        activeEditSections.clear();
+    }
+    else {
+        for (const [slot, handler] of sectionHandlers.entries()) {
+            activeEditSections.add(slot);
+            handler.setEdit(true);
+        }
+    }
+}
+function closeAllSections() {
+    for (const handler of sectionHandlers.values()) {
+        handler.revert();
+        handler.setEdit(false);
+    }
+    activeEditSections.clear();
+}
+function handleGlobalKeyDown(e) {
+    const isKeyW = e.key?.toLowerCase() === "w" || e.code === "KeyW";
+    const isKeyE = e.key?.toLowerCase() === "e" || e.code === "KeyE";
+    // Alt+W, Alt+E, Cmd+W, Ctrl+W, Ctrl+Shift+W
+    const isAltShortcut = e.altKey && (isKeyW || isKeyE);
+    const isCmdOrCtrlW = (e.metaKey || e.ctrlKey) && isKeyW;
+    if (isAltShortcut || isCmdOrCtrlW) {
+        const target = e.target;
+        const isInputField = target &&
+            (target.tagName === "INPUT" ||
+                target.tagName === "TEXTAREA" ||
+                target.isContentEditable);
+        if (isInputField && !e.metaKey && !e.altKey) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        toggleAllSections();
+    }
+    else if (e.key === "Escape") {
+        if (activeEditSections.size > 0) {
+            e.preventDefault();
+            closeAllSections();
+        }
+    }
+}
+function handleCustomToggle() {
+    toggleAllSections();
+}
+function handleCustomClose() {
+    closeAllSections();
+}
+function attachGlobalListener() {
+    listenerCount++;
+    if (listenerCount === 1 && typeof window !== "undefined") {
+        window.addEventListener("keydown", handleGlobalKeyDown);
+        window.addEventListener("veap:toggle-widgets-edit", handleCustomToggle);
+        window.addEventListener("veap:close-widgets-edit", handleCustomClose);
+    }
+}
+function detachGlobalListener() {
+    listenerCount = Math.max(0, listenerCount - 1);
+    if (listenerCount === 0 && typeof window !== "undefined") {
+        window.removeEventListener("keydown", handleGlobalKeyDown);
+        window.removeEventListener("veap:toggle-widgets-edit", handleCustomToggle);
+        window.removeEventListener("veap:close-widgets-edit", handleCustomClose);
+    }
+}
+function computeInitialState(userState, defaultWidgets, columns) {
+    if (userState && userState.length > 0) {
+        const defaultMap = new Map(defaultWidgets.map((dw) => [dw.id, dw]));
+        const stateMap = new Map(userState.map((w) => [w.id, w]));
+        const newState = userState
+            .filter((w) => w.id.startsWith("spacer-") || defaultMap.has(w.id))
+            .map((w) => {
+            const def = defaultMap.get(w.id);
+            return {
+                ...w,
+                colSpan: w.colSpan ?? Math.min(def?.defaultColSpan ?? 1, columns),
+                rowSpan: w.rowSpan ?? def?.defaultRowSpan ?? 1,
+            };
+        });
+        for (const w of defaultWidgets) {
+            if (!stateMap.has(w.id)) {
+                newState.push({
+                    id: w.id,
+                    enabled: true,
+                    colSpan: Math.min(w.defaultColSpan ?? 1, columns),
+                    rowSpan: w.defaultRowSpan ?? 1,
+                });
+            }
+        }
+        return newState;
+    }
+    else {
+        return defaultWidgets.map((w) => ({
+            id: w.id,
+            enabled: true,
+            colSpan: Math.min(w.defaultColSpan ?? 1, columns),
+            rowSpan: w.defaultRowSpan ?? 1,
+        }));
+    }
+}
+function SortableWidget({ id, widget, isEditMode, colSpan, rowSpan = 1, onToggle, onResize, onResizeRow, maxColumns, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({
+        id,
+    });
+    const { t } = useTranslation();
+    const isSpacer = id.startsWith("spacer-");
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : 1,
+        opacity: isDragging ? 0.8 : 1,
+        gridColumn: `span ${Math.min(colSpan, maxColumns)} / span ${Math.min(colSpan, maxColumns)}`,
+        gridRow: `span ${rowSpan} / span ${rowSpan}`,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: `relative flex flex-col ${isEditMode ? (isSpacer ? "border-primary/50 bg-primary/5 min-h-[100px] rounded-xl border border-dashed" : "squircle -m-2 rounded-xl border border-dashed p-2") : ""}`, children: [isEditMode && (_jsxs("div", { className: "bg-background squircle absolute -top-3 right-3 z-20 flex items-center gap-1 rounded-lg border p-1 shadow-sm", children: [_jsx("button", { type: "button", className: "hover:bg-muted cursor-pointer rounded p-1", onClick: () => {
+                            const nextSpan = colSpan >= maxColumns ? 1 : colSpan + 1;
+                            onResize(id, nextSpan);
+                        }, title: t("widgets.change-width"), children: _jsx(UnfoldHorizontal, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "hover:bg-muted cursor-pointer rounded p-1", onClick: () => {
+                            const nextRowSpan = rowSpan >= 4 ? 1 : rowSpan + 1;
+                            onResizeRow(id, nextRowSpan);
+                        }, title: t("widgets.change-row-span"), children: _jsx(UnfoldVertical, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "hover:bg-muted text-destructive cursor-pointer rounded p-1", onClick: () => onToggle(id), title: isSpacer
+                            ? t("widgets.remove-spacer")
+                            : t("widgets.disable-widget"), children: _jsx(Trash, { className: "h-4 w-4" }) }), _jsx("div", { ...attributes, ...listeners, className: "hover:bg-muted cursor-grab rounded p-1 active:cursor-grabbing", title: t("widgets.drag-to-move"), children: _jsx(Grip, { className: "h-4 w-4" }) })] })), _jsx("div", { className: `h-full w-full flex-1 [&>*]:min-h-full [&>*]:w-full ${isEditMode ? "pointer-events-none opacity-50" : ""}`, children: widget?.component })] }));
+}
+export function WidgetComposerClient({ slot, defaultWidgets, userState, columns = 4, }) {
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [widgetsState, setWidgetsState] = useState(() => computeInitialState(userState, defaultWidgets, columns));
+    const [savedWidgetsState, setSavedWidgetsState] = useState(() => computeInitialState(userState, defaultWidgets, columns));
+    const [isSaving, setIsSaving] = useState(false);
+    const { t } = useTranslation();
+    useEffect(() => {
+        const initial = computeInitialState(userState, defaultWidgets, columns);
+        setWidgetsState(initial);
+        setSavedWidgetsState(initial);
+    }, [userState, defaultWidgets, columns]);
+    useEffect(() => {
+        attachGlobalListener();
+        const unsubscribe = registerSection(slot, {
+            setEdit: setIsEditMode,
+            revert: () => {
+                setWidgetsState(savedWidgetsState);
+            },
+        });
+        return () => {
+            unsubscribe();
+            detachGlobalListener();
+        };
+    }, [slot, savedWidgetsState]);
+    const resetToDefaultLayout = () => {
+        setWidgetsState(defaultWidgets.map((w) => ({
+            id: w.id,
+            enabled: true,
+            colSpan: Math.min(w.defaultColSpan ?? 1, columns),
+            rowSpan: w.defaultRowSpan ?? 1,
+        })));
+    };
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            setWidgetsState((items) => {
+                const oldIndex = items.findIndex((i) => i.id === active.id);
+                const newIndex = items.findIndex((i) => i.id === over.id);
+                return arrayMove(items, oldIndex, newIndex);
+            });
+        }
+    };
+    const toggleWidget = (id) => {
+        if (id.startsWith("spacer-")) {
+            setWidgetsState((items) => items.filter((i) => i.id !== id));
+        }
+        else {
+            setWidgetsState((items) => items.map((i) => (i.id === id ? { ...i, enabled: !i.enabled } : i)));
+        }
+    };
+    const resizeWidget = (id, newColSpan) => {
+        setWidgetsState((items) => items.map((i) => (i.id === id ? { ...i, colSpan: newColSpan } : i)));
+    };
+    const resizeRowWidget = (id, newRowSpan) => {
+        setWidgetsState((items) => items.map((i) => (i.id === id ? { ...i, rowSpan: newRowSpan } : i)));
+    };
+    const addSpacer = () => {
+        const newId = `spacer-${Date.now()}`;
+        setWidgetsState((items) => [
+            ...items,
+            { id: newId, enabled: true, colSpan: 1, rowSpan: 1 },
+        ]);
+    };
+    const handleCancel = () => {
+        setWidgetsState(savedWidgetsState);
+        setSectionEditMode(slot, false);
+    };
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            await saveUserWidgetsState(slot, widgetsState);
+            setSavedWidgetsState(widgetsState);
+            setSectionEditMode(slot, false);
+            toast.success(t("widgets.save-success"));
+        }
+        catch (_e) {
+            toast.error(t("widgets.save-error"));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const enabledWidgets = widgetsState.filter((w) => w.enabled);
+    const disabledWidgets = widgetsState.filter((w) => !w.enabled && !w.id.startsWith("spacer-"));
+    if (defaultWidgets.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-4 transition-all duration-200", isEditMode &&
+            "border-primary/40 bg-primary/[0.02] dark:bg-primary/[0.04] rounded-2xl border-2 border-dashed p-4 shadow-sm"), children: [isEditMode && (_jsxs("div", { className: "border-primary/20 flex flex-wrap items-center justify-between gap-3 border-b border-dashed pb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-muted-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase", children: [_jsx(Icon, { icon: "solar:widget-add-linear", className: "text-primary h-4 w-4" }), slot.replace(/-/g, " ")] }) }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: addSpacer, className: "squircle text-xs", children: [_jsx(Icon, { icon: "solar:programming-linear", className: "mr-1.5 h-3.5 w-3.5" }), t("widgets.add-spacer")] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: resetToDefaultLayout, className: "squircle text-xs", children: [_jsx(Icon, { icon: "solar:restart-bold", className: "mr-1.5 h-3.5 w-3.5" }), t("widgets.reset-layout")] }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, className: "squircle text-xs", children: t("widgets.cancel") }), _jsx(Button, { size: "sm", onClick: handleSave, disabled: isSaving, className: "squircle text-xs", children: isSaving ? t("widgets.saving") : t("widgets.save-layout") })] })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx("div", { className: "grid grid-cols-1 gap-6 xl:grid-flow-row-dense", style: {
+                        gridTemplateColumns: typeof window !== "undefined" && window.innerWidth >= 640
+                            ? `repeat(${columns}, minmax(0, 1fr))`
+                            : undefined,
+                        gridAutoRows: typeof window !== "undefined" && window.innerWidth >= 640
+                            ? "minmax(120px, auto)"
+                            : undefined,
+                        gridAutoFlow: typeof window !== "undefined" && window.innerWidth >= 640
+                            ? "row dense"
+                            : undefined,
+                    }, children: _jsx(SortableContext, { items: enabledWidgets.map((w) => w.id), strategy: rectSortingStrategy, children: enabledWidgets.map((ws) => {
+                            const isSpacer = ws.id.startsWith("spacer-");
+                            const widgetDef = isSpacer
+                                ? {
+                                    id: ws.id,
+                                    name: "Spacer",
+                                    component: (_jsx("div", { className: "invisible h-full min-h-[100px] w-full" })),
+                                }
+                                : defaultWidgets.find((w) => w.id === ws.id);
+                            if (!widgetDef)
+                                return null;
+                            return (_jsx(SortableWidget, { id: ws.id, widget: widgetDef, isEditMode: isEditMode, colSpan: ws.colSpan, rowSpan: ws.rowSpan, onToggle: toggleWidget, onResize: resizeWidget, onResizeRow: resizeRowWidget, maxColumns: columns }, ws.id));
+                        }) }) }) }), isEditMode && disabledWidgets.length > 0 && (_jsxs("div", { className: "bg-muted/30 mt-4 rounded-xl border p-4", children: [_jsx("h4", { className: "mb-3 text-sm font-medium", children: t("widgets.available-widgets") }), _jsx("div", { className: "flex flex-wrap gap-2", children: disabledWidgets.map((ws) => {
+                            const widgetDef = defaultWidgets.find((w) => w.id === ws.id);
+                            if (!widgetDef)
+                                return null;
+                            return (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => toggleWidget(ws.id), children: [_jsx(Icon, { icon: "solar:add-circle-linear", className: "mr-2 h-4 w-4" }), widgetDef.name] }, ws.id));
+                        }) })] }))] }));
+}

package/dist/widgets/widget-composer.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+interface WidgetComposerProps {
+    slot: string;
+    columns?: number;
+    fallback?: React.ReactNode;
+}
+export declare function WidgetComposer({ slot, columns, fallback, }: WidgetComposerProps): Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined>;
+export {};

package/dist/widgets/widget-composer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCurrentSession } from "@veap/auth";
+import { getUserWidgetsState } from "../actions/index";
+import { pluginsContext } from "../common/context";
+import { WidgetComposerClient } from "./widget-composer-client";
+export async function WidgetComposer({ slot, columns = 4, fallback, }) {
+    const { user } = await getCurrentSession();
+    const userRoles = user?.roles || [];
+    const userPermissions = user?.permissions || [];
+    const defaultWidgetsRaw = await pluginsContext().registry.getWidgets(slot, {
+        roles: userRoles,
+        permissions: userPermissions,
+    });
+    if (defaultWidgetsRaw.length === 0)
+        return fallback || null;
+    const userState = await getUserWidgetsState(slot);
+    const defaultWidgets = defaultWidgetsRaw.map((w) => {
+        const Component = w.component;
+        return {
+            id: w.id,
+            name: w.name,
+            component: _jsx(Component, {}),
+            defaultColSpan: w.defaultColSpan,
+            defaultRowSpan: w.defaultRowSpan,
+        };
+    });
+    return (_jsx(WidgetComposerClient, { slot: slot, defaultWidgets: defaultWidgets, userState: userState, columns: columns }));
+}