@protobase/ui 0.4.1 → 0.5.0

package/dist/app/app.js

@@ -10,6 +10,7 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { Router, matchRoute, useRouter } from "./router.js";
@@ -18,8 +19,8 @@ import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
-import { ProjectUiProvider, useProjectUi } from "./pages/project-ui.js";
 import { ComposedPage } from "./pages/composed-page.js";
+import { ProjectUiProvider } from "./pages/project-ui-provider.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";

package/dist/app/assistant-shell.js

@@ -25,7 +25,8 @@ const ConnectedDock = ({ client, page, onClose }) => {
 		error,
 		onSend: (text) => send(text, page),
 		onAction: act,
-		onClose
+		onClose,
+		client
 	});
 };
 const OwnDock = ({ url, ...props }) => /* @__PURE__ */ jsx(ConnectedDock, {

package/dist/app/pages/merge-ui.d.ts

@@ -0,0 +1,9 @@
+import { ProjectUi } from "./project-ui.js";
+//#region src/app/pages/merge-ui.d.ts
+/**
+ * One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
+ * handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
+ * the extended configs' first.
+ */
+export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
+//#endregion

package/dist/app/pages/merge-ui.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/merge-ui.tsx
+const flatten = (ui, label) => [...(ui.extends ?? []).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
+	ui,
+	label
+}];
+const union = (kind, named, pick) => {
+	const merged = {};
+	const owners = /* @__PURE__ */ new Map();
+	for (const { ui, label } of named) for (const [name, value] of Object.entries(pick(ui) ?? {})) {
+		if (Object.hasOwn(merged, name) && merged[name] !== value) throw new Error(`${kind} "${name}" is defined twice, by ${owners.get(name)} and by ${label}; rename one of them`);
+		merged[name] = value;
+		owners.set(name, owners.get(name) ?? label);
+	}
+	return merged;
+};
+const slot = (slots) => {
+	if (slots.length <= 1) return slots[0];
+	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
+	return All;
+};
+/**
+* One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
+* handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
+* the extended configs' first.
+*/
+const mergeUi = (...uis) => {
+	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
+	const components = union("The component", named, (ui) => ui.components);
+	const actions = union("The action handler", named, (ui) => ui.actions);
+	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
+	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
+	const name = uis.at(-1)?.name;
+	return {
+		...name && { name },
+		components,
+		actions,
+		...(actionSlot || rightPanel) && { shell: {
+			...actionSlot && { actions: actionSlot },
+			...rightPanel && { rightPanel }
+		} }
+	};
+};
+//#endregion
+export { mergeUi };

package/dist/app/pages/project-ui-provider.js

@@ -0,0 +1,15 @@
+import { ProjectUiContext } from "./project-ui.js";
+import { mergeUi } from "./merge-ui.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/project-ui-provider.tsx
+/** Provides `ui` merged with the UI configs it extends. */
+const ProjectUiProvider = ({ ui, children }) => {
+	const merged = useMemo(() => ui ? mergeUi(ui) : {}, [ui]);
+	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
+		value: merged,
+		children
+	});
+};
+//#endregion
+export { ProjectUiProvider };

package/dist/app/pages/project-ui.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "react";
+import { ComponentType } from "react";
 import { Client } from "@protobase/client";
 //#region src/app/pages/project-ui.d.ts
 /** What a named action's handler gets: the record it runs on (inside a RecordCard or CardRow), the API and the router. */
@@ -14,9 +14,12 @@ export type ActionContext = {
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
- * (`component('UsageChart')`), handlers for named actions that have no built-in behaviour, and the shell's slots.
+ * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour, and
+ * the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`); `name` names it in their errors.
  */
 export type ProjectUi = {
+  name?: string;
+  extends?: ProjectUi[];
   components?: Record<string, ComponentType<any>>;
   actions?: Record<string, ActionHandler>;
   /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
@@ -25,6 +28,6 @@ export type ProjectUi = {
     rightPanel?: ComponentType;
   };
 };
-/** Typed identity, for `export default defineUi({ components, actions })` in `protobase.ui.tsx`. */
+/** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
 //#endregion

package/dist/app/pages/project-ui.js

@@ -1,13 +1,9 @@
 import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/project-ui.tsx
-/** Typed identity, for `export default defineUi({ components, actions })` in `protobase.ui.tsx`. */
+/** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
+/** The project's UI, merged with the UI configs it extends; `ProjectUiProvider` provides it. */
 const ProjectUiContext = createContext({});
-const ProjectUiProvider = ({ ui, children }) => /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
-	value: ui ?? {},
-	children
-});
 const useProjectUi = () => useContext(ProjectUiContext);
 //#endregion
-export { ProjectUiProvider, defineUi, useProjectUi };
+export { ProjectUiContext, defineUi, useProjectUi };

package/dist/app/pages/use-run-action.js

@@ -1,10 +1,10 @@
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
+import { useProjectUi } from "./project-ui.js";
 import { useRouter } from "../router.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { can } from "../permissions.js";
 import { fillHref, isAppPath } from "./action-href.js";
-import { useProjectUi } from "./project-ui.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
 //#region src/app/pages/use-run-action.ts

package/dist/assistant-dock/assistant-dock.d.ts

@@ -1,3 +1,4 @@
+import { AssistantClient } from "@protobase/client";
 import { AssistantState } from "@protobase/schema";
 //#region src/assistant-dock/assistant-dock.d.ts
 export type AssistantDockProps = {
@@ -9,7 +10,12 @@ export type AssistantDockProps = {
   onSend?: (text: string) => void;
   onAction?: (partId: string, actionId: string) => void;
   onClose?: () => void;
+  /** The backend's client, which widgets read and post through with `useBackendData`. */
+  client?: AssistantClient;
 };
-/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
-export declare const AssistantDock: ({ state, offline, error, onSend, onAction, onClose }: AssistantDockProps) => import("react").JSX.Element;
+/**
+ * The assistant beside the app: renders a backend's chat, its cards, the app's widgets and status line, and sends
+ * messages and clicks back.
+ */
+export declare const AssistantDock: ({ state, offline, error, onSend, onAction, onClose, client }: AssistantDockProps) => import("react").JSX.Element;
 //#endregion

package/dist/assistant-dock/assistant-dock.js

@@ -3,13 +3,17 @@ import { ChatThread } from "../chat/chat-thread.js";
 import { Composer } from "../chat/composer.js";
 import { SidePanel } from "../side-panel/side-panel.js";
 import { PartView } from "./part-view.js";
+import { AssistantBackendContext } from "./use-backend-data.js";
 import { useEffect, useRef } from "react";
 import { Sparkles } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/assistant-dock/assistant-dock.tsx
 const defaultPlaceholder = "Ask a question...";
-/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
-const AssistantDock = ({ state, offline, error, onSend, onAction, onClose }) => {
+/**
+* The assistant beside the app: renders a backend's chat, its cards, the app's widgets and status line, and sends
+* messages and clicks back.
+*/
+const AssistantDock = ({ state, offline, error, onSend, onAction, onClose, client }) => {
 	const input = useRef(null);
 	useEffect(() => {
 		if (state.placeholder) input.current?.focus();
@@ -29,16 +33,19 @@ const AssistantDock = ({ state, offline, error, onSend, onAction, onClose }) =>
 			busy: state.replying,
 			placeholder: state.placeholder ?? defaultPlaceholder
 		})] }),
-		children: /* @__PURE__ */ jsx(ChatThread, {
-			length: state.messages.reduce((sum, message) => sum + message.parts.length, 0),
-			empty: "Ask a question about this app or its data.",
-			children: state.messages.map((message) => /* @__PURE__ */ jsx(ChatMessage, {
-				from: message.from,
-				children: message.parts.map((part) => /* @__PURE__ */ jsx(PartView, {
-					part,
-					onAction
-				}, part.id))
-			}, message.id))
+		children: /* @__PURE__ */ jsx(AssistantBackendContext.Provider, {
+			value: client,
+			children: /* @__PURE__ */ jsx(ChatThread, {
+				length: state.messages.reduce((sum, message) => sum + message.parts.length, 0),
+				empty: "Ask a question about this app or its data.",
+				children: state.messages.map((message) => /* @__PURE__ */ jsx(ChatMessage, {
+					from: message.from,
+					children: message.parts.map((part) => /* @__PURE__ */ jsx(PartView, {
+						part,
+						onAction
+					}, part.id))
+				}, message.id))
+			})
 		})
 	});
 };

package/dist/assistant-dock/index.d.ts

@@ -2,4 +2,6 @@ import { AssistantDock, AssistantDockProps } from "./assistant-dock.js";
 import { PartView } from "./part-view.js";
 import { useAssistant } from "./use-assistant.js";
 import { useAssistantClient } from "./use-assistant-client.js";
-export { AssistantDock, type AssistantDockProps, PartView, useAssistant, useAssistantClient };
+import { BackendData, BackendRefresh, useBackendData } from "./use-backend-data.js";
+import "./widget-view.js";
+export { AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, PartView, useAssistant, useAssistantClient, useBackendData };

package/dist/assistant-dock/part-view.d.ts

@@ -1,6 +1,6 @@
 import { AssistantPart } from "@protobase/schema";
 //#region src/assistant-dock/part-view.d.ts
-/** One part of a message, drawn with the primitive it names. */
+/** One part of a message, drawn with the primitive it names, or a widget with the app's component it names. */
 export declare const PartView: ({ part, onAction }: {
   part: AssistantPart;
   onAction?: (partId: string, actionId: string) => void;

package/dist/assistant-dock/part-view.js

@@ -3,9 +3,10 @@ import { FieldList } from "../action-card/field-list.js";
 import { CompactTable } from "../compact-table/compact-table.js";
 import { DiffView } from "../diff-view/diff-view.js";
 import { StepList } from "../step-list/step-list.js";
+import { WidgetView } from "./widget-view.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/assistant-dock/part-view.tsx
-/** One part of a message, drawn with the primitive it names. */
+/** One part of a message, drawn with the primitive it names, or a widget with the app's component it names. */
 const PartView = ({ part, onAction }) => {
 	switch (part.type) {
 		case "text": return /* @__PURE__ */ jsx("p", { children: part.text });
@@ -41,6 +42,7 @@ const PartView = ({ part, onAction }) => {
 				}, `${index}-${diff.path}`))
 			]
 		});
+		case "widget": return /* @__PURE__ */ jsx(WidgetView, { part });
 	}
 };
 //#endregion

package/dist/assistant-dock/use-backend-data.d.ts

@@ -0,0 +1,23 @@
+import { AssistantClient } from "@protobase/client";
+//#region src/assistant-dock/use-backend-data.d.ts
+/** How long to wait before reading again: a number of milliseconds while the data can still change, `false` once it cannot. */
+export type BackendRefresh<T> = number | false | ((data: T | undefined) => number | false);
+export type BackendData<T> = {
+  /** The last answer read or posted; `undefined` until the first one. */
+  data?: T;
+  /** Why the last read or post failed, such as an `ApiError` with the backend's detail; cleared by the next success. */
+  error?: Error;
+  /** Reads again now. */
+  reload: () => void;
+  /** Posts `body` as JSON to `path` on the backend; its answer replaces `data`. */
+  post: (path: string, body?: unknown) => Promise<void>;
+};
+/**
+ * JSON from the assistant backend at `path` (see `AssistantClient.fetch`), read as the signed-in user each time the
+ * widget mounts, so a widget in an old chat shows the data as it is now; with `refreshMs`, read again while it can
+ * still change. Only inside the dock, which provides the backend.
+ */
+export declare const useBackendData: <T = unknown>(path: string, { refreshMs }?: {
+  refreshMs?: BackendRefresh<T>;
+}) => BackendData<T>;
+//#endregion

package/dist/assistant-dock/use-backend-data.js

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/assistant-dock/use-backend-data.ts
+/** The assistant backend the dock talks to, for the widgets it draws; `AssistantDock` provides it from its `client`. */
+const AssistantBackendContext = createContext(void 0);
+const asError = (reason) => reason instanceof Error ? reason : /* @__PURE__ */ new Error("The assistant backend did not answer");
+const refreshOf = (refresh, data) => typeof refresh === "function" ? refresh(data) : refresh;
+/**
+* JSON from the assistant backend at `path` (see `AssistantClient.fetch`), read as the signed-in user each time the
+* widget mounts, so a widget in an old chat shows the data as it is now; with `refreshMs`, read again while it can
+* still change. Only inside the dock, which provides the backend.
+*/
+const useBackendData = (path, { refreshMs = false } = {}) => {
+	const client = useContext(AssistantBackendContext);
+	const [state, setState] = useState({});
+	const [reads, setReads] = useState(0);
+	const refresh = useRef(refreshMs);
+	refresh.current = refreshMs;
+	const latest = useRef(void 0);
+	useEffect(() => {
+		if (!client) {
+			setState({ error: /* @__PURE__ */ new Error("useBackendData works only in a widget the assistant dock draws") });
+			return;
+		}
+		let active = true;
+		let timer;
+		const read = async () => {
+			const answer = await client.fetch(path).then((response) => response.json()).then((data) => ({ data }), (reason) => ({
+				data: latest.current,
+				error: asError(reason)
+			}));
+			if (!active) return;
+			latest.current = answer.data;
+			setState(answer);
+			const wait = refreshOf(refresh.current, answer.data);
+			if (wait !== false) timer = setTimeout(read, wait);
+		};
+		read();
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [
+		client,
+		path,
+		reads
+	]);
+	return {
+		...state,
+		reload: () => setReads((count) => count + 1),
+		post: async (to, body) => {
+			if (!client) throw new Error("useBackendData works only in a widget the assistant dock draws");
+			const init = {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body ?? {})
+			};
+			const answer = await client.fetch(to, init).then((response) => response.json()).then((data) => ({ data }), (reason) => ({
+				data: latest.current,
+				error: asError(reason)
+			}));
+			latest.current = answer.data;
+			setState(answer);
+		}
+	};
+};
+//#endregion
+export { AssistantBackendContext, useBackendData };

package/dist/assistant-dock/widget-view.d.ts

@@ -0,0 +1 @@
+import "@protobase/schema";

package/dist/assistant-dock/widget-view.js

@@ -0,0 +1,44 @@
+import { ActionCard } from "../action-card/action-card.js";
+import { useProjectUi } from "../app/pages/project-ui.js";
+import { Component } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/assistant-dock/widget-view.tsx
+/** The part's fallback as a plain card with `note`, or a muted line naming the component when it has none. */
+const Fallback = ({ part, note }) => part.fallback ? /* @__PURE__ */ jsx(ActionCard, {
+	title: part.fallback.title,
+	note,
+	children: part.fallback.body && /* @__PURE__ */ jsx("p", {
+		className: "text-[13px]",
+		children: part.fallback.body
+	})
+}) : /* @__PURE__ */ jsx("p", {
+	className: "text-xs text-muted-foreground",
+	children: `${part.name}: ${note}`
+});
+var WidgetBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	render() {
+		return this.state.failed ? /* @__PURE__ */ jsx(Fallback, {
+			part: this.props.part,
+			note: "It could not be drawn."
+		}) : this.props.children;
+	}
+};
+/** A widget part, drawn by the app's component of its name with its props; the fallback when the app has none. */
+const WidgetView = ({ part }) => {
+	const { components = {} } = useProjectUi();
+	const Widget = Object.hasOwn(components, part.name) ? components[part.name] : void 0;
+	if (!Widget) return /* @__PURE__ */ jsx(Fallback, {
+		part,
+		note: "This version of the app cannot show it live."
+	});
+	return /* @__PURE__ */ jsx(WidgetBoundary, {
+		part,
+		children: /* @__PURE__ */ jsx(Widget, { ...part.props })
+	});
+};
+//#endregion
+export { WidgetView };

package/dist/index.d.ts

@@ -8,12 +8,14 @@ import { useList } from "./data/use-list.js";
 import { useRecord } from "./data/use-record.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
+import { mergeUi } from "./app/pages/merge-ui.js";
 import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
+import { BackendData, BackendRefresh, useBackendData } from "./assistant-dock/use-backend-data.js";
 import "./assistant-dock/index.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { ChatThread, ChatThreadProps } from "./chat/chat-thread.js";
@@ -28,4 +30,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, AssistantDock, type AssistantDockProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, parseDiff, useApiToken, useAssistant, useAssistantClient, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/index.js

@@ -11,15 +11,17 @@ import { CompactTable } from "./compact-table/compact-table.js";
 import { diffStats, parseDiff } from "./diff-view/diff.js";
 import { DiffView } from "./diff-view/diff-view.js";
 import { StepList } from "./step-list/step-list.js";
+import { defineUi } from "./app/pages/project-ui.js";
 import { PartView } from "./assistant-dock/part-view.js";
+import { useBackendData } from "./assistant-dock/use-backend-data.js";
 import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
-import { defineUi } from "./app/pages/project-ui.js";
+import { mergeUi } from "./app/pages/merge-ui.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
-export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, parseDiff, useApiToken, useAssistant, useAssistantClient, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.4.1",
-    "@protobase/layout": "0.4.1",
-    "@protobase/schema": "0.4.1",
+    "@protobase/client": "0.5.0",
+    "@protobase/layout": "0.5.0",
+    "@protobase/schema": "0.5.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",