@chelone/vue 0.6.0 → 0.9.0

package/dist/components/admin/realtime/comments-thread.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,221 @@
+import { useOptionalIdentity } from "../../../auth/auth-hooks.js";
+import { useCheloneContext, useCheloneNotifications } from "../../../context.js";
+import { useGetList } from "../../../data/queries.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { Badge } from "../../ui/badge.js";
+import button_default from "../../ui/button.js";
+import { Card } from "../../ui/card.js";
+import textarea_default from "../../ui/textarea.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
+import { createMutationOptions, isRealtimeDataProvider, subscribeLiveResource, updateMutationOptions } from "@chelone/core";
+import { useMutation } from "@tanstack/vue-query";
+// src/components/admin/realtime/comments-thread.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-slot": "comments-error",
+	class: "text-sm text-destructive"
+};
+var _hoisted_2 = {
+	key: 1,
+	"data-slot": "comments-empty",
+	class: "rounded-xl border bg-card p-4 text-sm text-muted-foreground shadow"
+};
+var _hoisted_3 = { class: "flex items-baseline gap-2 text-sm" };
+var _hoisted_4 = { class: "font-medium" };
+var _hoisted_5 = ["datetime"];
+var _hoisted_6 = { class: "whitespace-pre-wrap text-sm" };
+var _hoisted_7 = {
+	key: 2,
+	"data-slot": "comments-total",
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_8 = {
+	"data-slot": "comments-form",
+	class: "space-y-2"
+};
+/** A row is a comment when it has a string `body`; any other row is skipped. */
+function isCommentRecord(record) {
+	return "body" in record && typeof record.body === "string";
+}
+var comments_thread_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "comments-thread",
+	props: {
+		reference: {},
+		target: {},
+		resolvable: {
+			type: Boolean,
+			default: false
+		},
+		perPage: { default: 100 },
+		record: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<CommentsThread>` — the comments of a record, oldest first, with a box to
+		* post a new one. On a realtime data provider the thread follows the comments
+		* resource, so a comment posted from another client shows up without a reload.
+		* With no record, or one without an id, it renders nothing and fetches nothing.
+		*/
+		const props = __props;
+		const ctx = useCheloneContext();
+		const translate = useTranslate();
+		const notifications = useCheloneNotifications();
+		const { identity } = useOptionalIdentity();
+		const ambient = inject(RecordContextKey, null);
+		const recordId = computed(() => {
+			const id = (props.record ?? ambient?.value)?.id;
+			return id === void 0 || id === null || id === "" ? void 0 : id;
+		});
+		const { data, isError, isSuccess } = useGetList(() => props.reference, () => ({
+			filter: { [props.target]: recordId.value },
+			sort: {
+				field: "createdAt",
+				order: "ASC"
+			},
+			pagination: {
+				page: 1,
+				perPage: props.perPage
+			}
+		}), { enabled: () => recordId.value !== void 0 });
+		watchEffect((onCleanup) => {
+			if (recordId.value === void 0) return;
+			if (!isRealtimeDataProvider(ctx.dataProvider)) return;
+			onCleanup(subscribeLiveResource(ctx, props.reference).stop);
+		});
+		watch(isError, (failed) => {
+			if (failed) notifications?.notify("chelone.notification.http_error", { type: "error" });
+		});
+		const items = computed(() => (data.value?.data ?? []).filter(isCommentRecord));
+		const total = computed(() => data.value?.total ?? items.value.length);
+		function authorOf(comment) {
+			return comment.authorName ?? (comment.authorId === void 0 ? void 0 : String(comment.authorId)) ?? translate("chelone.comments.anonymous", { _: "anonymous" });
+		}
+		const draft = ref("");
+		const create = useMutation(computed(() => createMutationOptions(ctx, props.reference)));
+		const update = useMutation(computed(() => updateMutationOptions(ctx, props.reference)));
+		const posting = computed(() => create.isPending.value);
+		const canPost = computed(() => draft.value.trim() !== "" && !posting.value);
+		async function post() {
+			const body = draft.value.trim();
+			if (body === "" || posting.value || recordId.value === void 0) return;
+			const author = identity.value;
+			try {
+				await create.mutateAsync({ data: {
+					[props.target]: recordId.value,
+					...author ? {
+						authorId: author.id,
+						authorName: author.fullName
+					} : void 0,
+					body,
+					createdAt: (/* @__PURE__ */ new Date()).toISOString()
+				} });
+			} catch {
+				notifications?.notify("chelone.notification.http_error", { type: "error" });
+				return;
+			}
+			draft.value = "";
+			notifications?.notify("chelone.notification.updated", {
+				type: "info",
+				messageArgs: { smart_count: 1 }
+			});
+		}
+		function onKeydown(event) {
+			if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault();
+				post();
+			}
+		}
+		async function resolve(comment) {
+			try {
+				await update.mutateAsync({
+					id: comment.id,
+					data: { resolvedAt: (/* @__PURE__ */ new Date()).toISOString() },
+					previousData: comment
+				});
+			} catch {
+				notifications?.notify("chelone.notification.http_error", { type: "error" });
+				return;
+			}
+			notifications?.notify("chelone.notification.updated", {
+				type: "info",
+				messageArgs: { smart_count: 1 }
+			});
+		}
+		function timeOf(iso) {
+			if (!iso) return void 0;
+			const date = new Date(iso);
+			if (Number.isNaN(date.getTime())) return void 0;
+			return {
+				iso: date.toISOString(),
+				label: date.toLocaleString()
+			};
+		}
+		return (_ctx, _cache) => {
+			return recordId.value !== void 0 ? (openBlock(), createElementBlock("section", {
+				key: 0,
+				"data-slot": "comments-thread",
+				class: normalizeClass(unref(cn)("space-y-3", props.class))
+			}, [
+				unref(isError) ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(unref(translate)("chelone.comments.load_failed", { _: "Could not load the comments" })), 1)) : unref(isSuccess) && items.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(unref(translate)("chelone.comments.empty", { _: "No comments yet. Be the first." })), 1)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (comment) => {
+					return openBlock(), createBlock(unref(Card), {
+						key: comment.id,
+						"data-slot": "comment",
+						"data-comment-id": comment.id,
+						class: normalizeClass(unref(cn)("flex flex-col items-start gap-2 p-4", comment.resolvedAt && "opacity-60"))
+					}, {
+						default: withCtx(() => [
+							createElementVNode("div", _hoisted_3, [createElementVNode("strong", _hoisted_4, toDisplayString(authorOf(comment)), 1), timeOf(comment.createdAt) ? (openBlock(), createElementBlock("time", {
+								key: 0,
+								datetime: timeOf(comment.createdAt)?.iso,
+								class: "text-xs text-muted-foreground"
+							}, toDisplayString(timeOf(comment.createdAt)?.label), 9, _hoisted_5)) : createCommentVNode("", true)]),
+							createElementVNode("p", _hoisted_6, toDisplayString(comment.body), 1),
+							comment.resolvedAt ? (openBlock(), createBlock(unref(Badge), {
+								key: 0,
+								variant: "secondary"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.comments.resolved", {
+									_: "Resolved {time}",
+									time: timeOf(comment.resolvedAt)?.label ?? ""
+								})), 1)]),
+								_: 2
+							}, 1024)) : props.resolvable ? (openBlock(), createBlock(button_default, {
+								key: 1,
+								variant: "outline",
+								size: "sm",
+								disabled: unref(update).isPending.value,
+								onClick: ($event) => resolve(comment)
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.comments.mark_resolved", { _: "Mark resolved" })), 1)]),
+								_: 1
+							}, 8, ["disabled", "onClick"])) : createCommentVNode("", true)
+						]),
+						_: 2
+					}, 1032, ["data-comment-id", "class"]);
+				}), 128)),
+				total.value > items.value.length ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(translate)("chelone.comments.showing", {
+					shown: items.value.length,
+					total: total.value,
+					_: "Showing the first {shown} of {total} comments"
+				})), 1)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_8, [createVNode(textarea_default, {
+					modelValue: draft.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draft.value = $event),
+					placeholder: unref(translate)("chelone.comments.placeholder", { _: "Write a comment…" }),
+					onKeydown
+				}, null, 8, ["modelValue", "placeholder"]), createVNode(button_default, {
+					disabled: !canPost.value,
+					onClick: post
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.comments.post", { _: "Post" })), 1)]),
+					_: 1
+				}, 8, ["disabled"])])
+			], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { comments_thread_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/realtime/edit-live.js

@@ -0,0 +1,4 @@
+import edit_live_vue_vue_type_script_setup_true_lang_default from "./edit-live.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/realtime/edit-live.vue
+var edit_live_default = edit_live_vue_vue_type_script_setup_true_lang_default;
+export { edit_live_default as default };

package/dist/components/admin/realtime/edit-live.vue.d.ts

@@ -13,7 +13,9 @@ import { type Identifier } from "@chelone/core";
 import type { EditProps } from "../view/edit.vue.js";
 /** Props for {@link EditLive}: the props of `<Edit>`. */
 export type EditLiveProps = EditProps;
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     resource?: string;
     id?: Identifier;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
@@ -24,7 +26,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
 } & {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/realtime/edit-live.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { useCheloneContext } from "../../../context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useRouterAdapterOptional } from "../../../router/adapter.js";
+import edit_default from "../view/edit.js";
+import { useCheloneFormContext } from "../../../form/form-context.js";
+import { subscribeStore } from "../../../form/subscribe-ref.js";
+import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeProps, onScopeDispose, openBlock, ref, renderList, renderSlot, unref, watchEffect, withCtx } from "vue";
+import { subscribeLiveRecord } from "@chelone/core";
+// src/components/admin/realtime/edit-live.vue?vue&type=script&setup=true&lang.ts
+/**
+* Tells `<EditLive>` whether the ambient form holds unsaved edits. It renders
+* nothing and has to sit under `<Edit>`, which is where the form is provided.
+* Dirty is `!isDefaultValue`, as in `useWarnWhenUnsavedChanges`: an edit that
+* was typed back to the saved value is clean.
+*/
+var FormDirtyReporter = defineComponent({
+	emits: { change: (_dirty) => true },
+	setup(_, { emit }) {
+		const { form } = useCheloneFormContext();
+		let dirty = !form.ambient.store.state.isDefaultValue;
+		emit("change", dirty);
+		onScopeDispose(subscribeStore(form.ambient.store, () => {
+			const next = !form.ambient.store.state.isDefaultValue;
+			if (next === dirty) return;
+			dirty = next;
+			emit("change", dirty);
+		}));
+		return () => null;
+	}
+});
+var edit_live_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "edit-live",
+	props: {
+		resource: {},
+		id: {}
+	},
+	setup(__props) {
+		/**
+		* `<EditLive>` — `<Edit>` kept fresh: refetches when the record changes or
+		* the connection comes back, but holds the refetch while the form has unsaved
+		* edits and runs it once when the form turns clean, by save or by reset.
+		*
+		* Only `resource` and `id` are declared here, because the wrapper needs them
+		* itself. Declaring `redirectOnSave` too would make Vue turn an absent one into
+		* `false`, so it and every other attribute go to the `<Edit>` untouched, as
+		* does every slot. The subscription starts in the wrapper's setup, not in the
+		* form, so an event that lands while the record loads is not missed.
+		*/
+		const props = __props;
+		const ctx = useCheloneContext();
+		const ambientResource = useResourceContext();
+		if (!(props.resource ?? ambientResource)) throw new Error("<Edit>: no resource. Pass a `resource` prop or render inside a <Resource>.");
+		const liveResource = props.resource ?? ambientResource;
+		const liveId = props.id ?? useRouterAdapterOptional()?.useParams().value.id;
+		const formIsDirty = ref(false);
+		let subscription;
+		watchEffect((onCleanup) => {
+			if (!liveResource || liveId === void 0) return;
+			const live = subscribeLiveRecord(ctx, liveResource, liveId, { paused: () => formIsDirty.value });
+			subscription = live;
+			onCleanup(() => {
+				live.stop();
+				if (subscription === live) subscription = void 0;
+			});
+		});
+		function onDirtyChange(dirty) {
+			formIsDirty.value = dirty;
+			if (!dirty) subscription?.resume();
+		}
+		const otherSlots = (slots) => Object.keys(slots).filter((name) => name !== "default");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(edit_default, {
+				resource: __props.resource,
+				id: __props.id
+			}, createSlots({
+				default: withCtx((slotProps) => [createVNode(unref(FormDirtyReporter), { onChange: onDirtyChange }), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps ?? {})))]),
+				_: 2
+			}, [renderList(otherSlots(_ctx.$slots), (name) => {
+				return {
+					name,
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps ?? {})))])
+				};
+			})]), 1032, ["resource", "id"]);
+		};
+	}
+});
+export { edit_live_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/realtime/list-live.js

@@ -0,0 +1,4 @@
+import list_live_vue_vue_type_script_setup_true_lang_default from "./list-live.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/realtime/list-live.vue
+var list_live_default = list_live_vue_vue_type_script_setup_true_lang_default;
+export { list_live_default as default };

package/dist/components/admin/realtime/list-live.vue.d.ts

@@ -1,14 +1,15 @@
 import type { ListProps } from "../view/list.vue.js";
 /** Props for {@link ListLive}: the props of `<List>`. */
 export type ListLiveProps = ListProps;
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     resource?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     resource?: string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     [x: string]: ((props: any) => any) | undefined;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/realtime/list-live.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { useCheloneContext } from "../../../context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import list_default from "../view/list.js";
+import { createBlock, createSlots, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderList, renderSlot, watchEffect, withCtx } from "vue";
+import { subscribeLiveResource } from "@chelone/core";
+// src/components/admin/realtime/list-live.vue?vue&type=script&setup=true&lang.ts
+var list_live_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "list-live",
+	props: { resource: {} },
+	setup(__props) {
+		/**
+		* `<ListLive>` — `<List>` kept fresh: refetches when the resource changes or
+		* the connection comes back. Only `resource` is declared here, because the
+		* wrapper needs it itself; every other attribute and every slot goes to the
+		* `<List>`.
+		*/
+		const props = __props;
+		const ctx = useCheloneContext();
+		const ambientResource = useResourceContext();
+		if (!(props.resource ?? ambientResource)) throw new Error("<List>: no resource. Pass a `resource` prop or render inside a <Resource>.");
+		watchEffect((onCleanup) => {
+			const resource = props.resource ?? ambientResource;
+			if (resource) onCleanup(subscribeLiveResource(ctx, resource).stop);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(list_default, { resource: __props.resource }, createSlots({ _: 2 }, [renderList(Object.keys(_ctx.$slots), (name) => {
+				return {
+					name,
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps ?? {})))])
+				};
+			})]), 1032, ["resource"]);
+		};
+	}
+});
+export { list_live_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/realtime/lock-on-mount.js

@@ -0,0 +1,4 @@
+import lock_on_mount_vue_vue_type_script_setup_true_lang_default from "./lock-on-mount.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/realtime/lock-on-mount.vue
+var lock_on_mount_default = lock_on_mount_vue_vue_type_script_setup_true_lang_default;
+export { lock_on_mount_default as default };

package/dist/components/admin/realtime/lock-on-mount.vue.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from "vue";
 import type { Identifier, Lock } from "@chelone/core";
 /** Props for {@link LockOnMount}. Each defaults to the ambient context. */
 export interface LockOnMountProps {
@@ -9,14 +10,15 @@ export interface LockOnMountProps {
     /** Called with a failed lock or release, a conflict included. */
     onLockError?: (error: Error) => void;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LockOnMountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockOnMountProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: () => unknown;
-    loading?: () => unknown;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LockOnMountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockOnMountProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: () => VNode[];
+    loading?: () => VNode[];
     "locked-by"?: (props: {
         lock: Lock;
-    }) => unknown;
+    }) => VNode[];
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/realtime/lock-on-mount.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useLockOnMount } from "../../../realtime/locks.js";
+import { Alert, AlertDescription } from "../../ui/alert.js";
+import skeleton_default from "../../ui/skeleton.js";
+import { computed, createCommentVNode, createTextVNode, createVNode, defineComponent, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { LockConflictError } from "@chelone/core";
+// src/components/admin/realtime/lock-on-mount.vue?vue&type=script&setup=true&lang.ts
+var lock_on_mount_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "lock-on-mount",
+	props: {
+		resource: {},
+		id: {},
+		identity: {},
+		meta: {},
+		onLockError: { type: Function }
+	},
+	setup(__props) {
+		/**
+		* `<LockOnMount>` — holds a record's lock while it is mounted. It shows the
+		* `#loading` slot (a `Skeleton`) while the lock is requested, the default slot
+		* once it is held, and the `#locked-by` slot (an `Alert`) when another
+		* identity has it. Any other lock error renders nothing and reaches
+		* `onLockError`. Divergence from the React twin: slots stand in for the render
+		* props.
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const { lock, isLocking, lockError } = useLockOnMount({
+			resource: () => props.resource,
+			id: () => props.id,
+			identity: () => props.identity,
+			meta: props.meta,
+			onLockError: (error) => props.onLockError?.(error)
+		});
+		const conflict = computed(() => lockError.value instanceof LockConflictError ? lockError.value.existingLock : null);
+		return (_ctx, _cache) => {
+			return unref(isLocking) ? renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(skeleton_default, { class: "h-8 w-full" })], void 0, 0) : conflict.value ? renderSlot(_ctx.$slots, "locked-by", { lock: conflict.value }, () => [createVNode(unref(Alert), null, {
+				default: withCtx(() => [createVNode(unref(AlertDescription), null, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.lock.locked_by", {
+						_: `Locked by ${String(conflict.value.identity)}`,
+						identity: String(conflict.value.identity)
+					})), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})], void 0, 1) : unref(lock) ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2) : createCommentVNode("", true);
+		};
+	}
+});
+export { lock_on_mount_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/realtime/lock-status.js

@@ -0,0 +1,4 @@
+import lock_status_vue_vue_type_script_setup_true_lang_default from "./lock-status.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/realtime/lock-status.vue
+var lock_status_default = lock_status_vue_vue_type_script_setup_true_lang_default;
+export { lock_status_default as default };

package/dist/components/admin/realtime/lock-status.vue.d.ts

@@ -1,16 +1,25 @@
+/**
+ * `<LockStatus>` — who holds a record's lock, kept live. The `#lock` slot
+ * replaces the default secondary `Badge`; the `#free` slot renders when the
+ * record is free. With no resource or id it fetches nothing and renders
+ * nothing. Divergence from the React twin: slots stand in for the render
+ * props.
+ */
+import { type VNode } from "vue";
 import type { Identifier, Lock } from "@chelone/core";
 /** Props for {@link LockStatus}. Each defaults to the ambient context. */
 export interface LockStatusProps {
     resource?: string;
     id?: Identifier;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LockStatusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockStatusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LockStatusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockStatusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     lock?: (props: {
         lock: Lock;
-    }) => unknown;
-    free?: () => unknown;
+    }) => VNode[];
+    free?: () => VNode[];
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/realtime/lock-status.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,78 @@
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetLockLive } from "../../../realtime/locks.js";
+import { Badge } from "../../ui/badge.js";
+import { computed, createBlock, createCommentVNode, createSlots, defineComponent, guardReactiveProps, h, inject, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+// src/components/admin/realtime/lock-status.vue?vue&type=script&setup=true&lang.ts
+/**
+* The query. `useGetLockLive` takes its resource as a plain string, so the
+* parent mounts this only once a resource and an id exist and keys it by
+* resource: a changed resource remounts it instead of reusing a stale query.
+*/
+var LockStatusQuery = defineComponent({
+	props: {
+		resource: {
+			type: String,
+			required: true
+		},
+		id: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		const translate = useTranslate();
+		const { data: lock } = useGetLockLive(props.resource, () => ({ id: props.id }));
+		return () => {
+			if (lock.value) return slots.lock?.({ lock: lock.value }) ?? h(Badge, { variant: "secondary" }, () => translate("chelone.lock.locked_by", {
+				_: `Locked by ${String(lock.value?.identity)}`,
+				identity: String(lock.value?.identity)
+			}));
+			return lock.value === null ? slots.free?.() : null;
+		};
+	}
+});
+var lock_status_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "lock-status",
+	props: {
+		resource: {},
+		id: {}
+	},
+	setup(__props) {
+		/**
+		* `<LockStatus>` — who holds a record's lock, kept live. The `#lock` slot
+		* replaces the default secondary `Badge`; the `#free` slot renders when the
+		* record is free. With no resource or id it fetches nothing and renders
+		* nothing. Divergence from the React twin: slots stand in for the render
+		* props.
+		*/
+		const props = __props;
+		const ambientResource = useResourceContext();
+		const ambientRecord = inject(RecordContextKey, null);
+		const target = computed(() => {
+			const resource = props.resource ?? ambientResource;
+			const id = props.id ?? ambientRecord?.value?.id;
+			return resource === void 0 || id === void 0 || id === null ? void 0 : {
+				resource,
+				id
+			};
+		});
+		return (_ctx, _cache) => {
+			return target.value ? (openBlock(), createBlock(unref(LockStatusQuery), {
+				key: target.value.resource,
+				resource: target.value.resource,
+				id: target.value.id
+			}, createSlots({ _: 2 }, [_ctx.$slots.lock ? {
+				name: "lock",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "lock", normalizeProps(guardReactiveProps(slotProps)))]),
+				key: "0"
+			} : void 0, _ctx.$slots.free ? {
+				name: "free",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "free")]),
+				key: "1"
+			} : void 0]), 1032, ["resource", "id"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { lock_status_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/realtime/menu-live.js

@@ -0,0 +1,4 @@
+import menu_live_vue_vue_type_script_setup_true_lang_default, { MenuLiveItemLink } from "./menu-live.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/realtime/menu-live.vue
+var menu_live_default = menu_live_vue_vue_type_script_setup_true_lang_default;
+export { MenuLiveItemLink, menu_live_default as default };

package/dist/components/admin/realtime/menu-live.vue.d.ts

@@ -82,5 +82,6 @@ export declare const MenuLiveItemLink: import("vue").DefineComponent<import("vue
     events: RealtimeEventType[];
     badgeLabel: (count: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: import("vue").DefineComponent<MenuLiveProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuLiveProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<MenuLiveProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuLiveProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;