Client hooks and components

@veap/plugins/client is the client-only entry point. It exposes React hooks and components for rendering plugin UI that reacts to plugin state changes at runtime, plus the action-confirmation hook and the interactive widget composer.

Every export here is a client component or hook ("use client"); import it only from client components.

Plugin change listeners#

import { onPluginsChanged, notifyPluginsChanged } from "@veap/plugins/client";

const unsubscribe = onPluginsChanged(() => {
  // re-fetch plugin-provided UI
});

onPluginsChanged(cb) registers a listener and returns an unsubscribe function. notifyPluginsChanged() notifies all listeners; the plugin manager calls it after toggling a plugin so the client widgets below re-fetch their data.

Extension points (client)#

import { ExtensionPointClient, usePluginExtensions } from "@veap/plugins/client";

<ExtensionPointClient target="app" point="navbar" mode="single" fallback={<DefaultNavbar />} />;

PluginExtensionPointClient (alias ExtensionPointClient) takes the same props as the server ExtensionPoint: target, point, mode, className, props, fallback, children, includeDisabled, as.

usePluginExtensions(target, point, includeDisabled = false) returns the resolved extension descriptors for a slot and re-fetches when plugins change. It calls the getPluginExtensionsAction server action.

Widget areas (client)#

import { WidgetAreaClient, usePluginWidgets } from "@veap/plugins/client";

<WidgetAreaClient area="dashboard-stats" className="grid" fallback={<Empty />} />;

PluginWidgetAreaClient (alias WidgetAreaClient) takes area, className, props, fallback, as.

usePluginWidgets(area) returns the widgets for an area and re-fetches on plugin changes; it calls the getPluginWidgetsAction server action.

Neither client hook applies role/permission filtering itself — the server actions filter by the current session.

Action confirmation#

import { useConfirmAction } from "@veap/plugins/client";

const confirm = useConfirmAction();
const { confirmed, method } = await confirm({
  action: "delete-post",
  title: "Delete post",
  description: "This cannot be undone.",
  rememberMinutes: 5,
});

useConfirmAction() returns an async confirmAction(options: ConfirmOptions): Promise<ConfirmResult>.

• ConfirmOptions: action?, title?, description?, preferredMethod?, rememberMinutes?, metadata?.
• ConfirmResult: { confirmed: boolean; method?: string }.

It publishes action:confirm:request on the kernel event bus and resolves from action:confirm:response. If the action-confirm plugin does not acknowledge within ~500 ms, it falls back to the browser's native window.confirm(...); a pending verification times out after 5 minutes with { confirmed: false }. The hook subscribes on mount and cleans up on unmount.

Widget composer (client)#

import { WidgetComposerClient } from "@veap/plugins/client";

WidgetComposerClient is the interactive grid editor behind the server WidgetComposer. Props:

It supports drag-and-drop reordering, per-widget column/row resizing, spacers, enabling/disabling widgets, reset-to-default, and save/cancel. Saving calls the saveUserWidgetsState server action. Edit mode is toggled globally via the Alt+W / Alt+E / Cmd+Ctrl+W shortcuts, the veap:toggle-widgets-edit window event, or by another composer section; Escape / veap:close-widgets-edit closes it.

Path prefix#

import { PathPrefixContext, usePathPrefix } from "@veap/plugins/client";

const prefix = usePathPrefix(); // e.g. "/app"

PathPrefixContext defaults to "/app" and mirrors the configured privatePath; usePathPrefix() reads it. Providers must supply the value for the configured prefix to appear in client links.

Related#

• Widgets and extension points
• Registry
• Server entry point