@vite-hub/ui 0.0.4 → 0.1.0

package/dist/comments-Cq5eewsu.d.ts

@@ -0,0 +1,537 @@
+import { n as AvatarStackPerson } from "./avatar-stack-DXmCQhxd.js";
+import { i as CommentsState } from "./comments-ChNJkV1d.js";
+import { PropType } from "vue";
+import { CommentMessage, CommentStatus, CommentSubject, CommentThread, CommentUser, CommentsClient } from "@vite-hub/comments/client";
+//#region src/components/comment-composer.d.ts
+type CommentComposerVariant = "comment" | "reply" | "edit";
+/** What `submit` sends: the text and the ids of the people mentioned in it. */
+interface CommentComposerSubmit {
+  body: string;
+  mentions: string[];
+}
+declare const CommentComposer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  modelValue: {
+    default: string;
+    type: StringConstructor;
+  };
+  /** The ids of the people mentioned so far. */
+  mentions: {
+    default: () => never[];
+    type: PropType<string[]>;
+  };
+  /** Whose avatar shows beside the box. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  variant: {
+    default: string;
+    type: PropType<CommentComposerVariant>;
+  };
+  placeholder: {
+    type: StringConstructor;
+  };
+  /** A send is running. The box keeps its text and cannot send again. */
+  busy: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Why the last send failed. */
+  error: {
+    type: StringConstructor;
+  };
+  /** Focus the box when it appears. */
+  autofocus: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Treat a click outside as a close, or as a shake when there is text. Turn it off when the parent decides. */
+  guard: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** People whose names the text may hold, such as the authors of a thread. Only mentions of a person whose `@name` is still in the text are sent. */
+  people: {
+    default: () => never[];
+    type: PropType<CommentUser[]>;
+  };
+  /** Finds people for `@mentions`. Without it the box has no mention menu. */
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "submit" | "update:modelValue" | "update:mentions")[], "cancel" | "submit" | "update:modelValue" | "update:mentions", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  modelValue: {
+    default: string;
+    type: StringConstructor;
+  };
+  /** The ids of the people mentioned so far. */
+  mentions: {
+    default: () => never[];
+    type: PropType<string[]>;
+  };
+  /** Whose avatar shows beside the box. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  variant: {
+    default: string;
+    type: PropType<CommentComposerVariant>;
+  };
+  placeholder: {
+    type: StringConstructor;
+  };
+  /** A send is running. The box keeps its text and cannot send again. */
+  busy: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Why the last send failed. */
+  error: {
+    type: StringConstructor;
+  };
+  /** Focus the box when it appears. */
+  autofocus: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Treat a click outside as a close, or as a shake when there is text. Turn it off when the parent decides. */
+  guard: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** People whose names the text may hold, such as the authors of a thread. Only mentions of a person whose `@name` is still in the text are sent. */
+  people: {
+    default: () => never[];
+    type: PropType<CommentUser[]>;
+  };
+  /** Finds people for `@mentions`. Without it the box has no mention menu. */
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+}>> & Readonly<{
+  onCancel?: ((...args: any[]) => any) | undefined;
+  onSubmit?: ((...args: any[]) => any) | undefined;
+  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+  "onUpdate:mentions"?: ((...args: any[]) => any) | undefined;
+}>, {
+  people: CommentUser[];
+  variant: CommentComposerVariant;
+  modelValue: string;
+  mentions: string[];
+  busy: boolean;
+  autofocus: boolean;
+  guard: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/comment-layer.d.ts
+declare const CommentLayer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  client: {
+    type: PropType<CommentsClient>;
+  };
+  /** What the threads of this page are about. For a page, `{ kind: "page", id: "/pricing" }`. */
+  subject: {
+    type: PropType<CommentSubject>;
+  };
+  /** The signed-in user. Defaults to the client's user. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  /** A state from `useComments()`, instead of `client` and `subject`. */
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** The people on this page, shown in the toolbar. */
+  people: {
+    default: () => never[];
+    type: PropType<AvatarStackPerson[]>;
+  };
+  /** The key that toggles comment mode. `false` turns it off. */
+  hotkey: {
+    default: string;
+    type: PropType<string | false>;
+  };
+  /** Hide thread mutation controls when the viewer may only read. */
+  readOnly: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The URL of the page that a subject lives on, for the links of threads that are not page threads. */
+  subjectUrl: {
+    type: PropType<(subject: CommentSubject) => string | undefined>;
+  };
+  /** Navigates to the page of a thread from the list. Defaults to `location.assign`. */
+  navigate: {
+    type: PropType<(href: string) => void>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  client: {
+    type: PropType<CommentsClient>;
+  };
+  /** What the threads of this page are about. For a page, `{ kind: "page", id: "/pricing" }`. */
+  subject: {
+    type: PropType<CommentSubject>;
+  };
+  /** The signed-in user. Defaults to the client's user. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  /** A state from `useComments()`, instead of `client` and `subject`. */
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** The people on this page, shown in the toolbar. */
+  people: {
+    default: () => never[];
+    type: PropType<AvatarStackPerson[]>;
+  };
+  /** The key that toggles comment mode. `false` turns it off. */
+  hotkey: {
+    default: string;
+    type: PropType<string | false>;
+  };
+  /** Hide thread mutation controls when the viewer may only read. */
+  readOnly: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The URL of the page that a subject lives on, for the links of threads that are not page threads. */
+  subjectUrl: {
+    type: PropType<(subject: CommentSubject) => string | undefined>;
+  };
+  /** Navigates to the page of a thread from the list. Defaults to `location.assign`. */
+  navigate: {
+    type: PropType<(href: string) => void>;
+  };
+}>> & Readonly<{}>, {
+  people: AvatarStackPerson[];
+  readOnly: boolean;
+  hotkey: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/comment-list.d.ts
+declare const CommentFilters: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const CommentList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** Goes to the page of a thread that is not on this page. Defaults to `location.assign`. */
+  navigate: {
+    type: PropType<(href: string) => void>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** Goes to the page of a thread that is not on this page. Defaults to `location.assign`. */
+  navigate: {
+    type: PropType<(href: string) => void>;
+  };
+}>> & Readonly<{
+  onSelect?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const CommentToolbar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** The people on this page, from Realtime. Shown as a stack of avatars. */
+  people: {
+    default: () => never[];
+    type: PropType<AvatarStackPerson[]>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  comments: {
+    type: PropType<CommentsState>;
+  };
+  /** The people on this page, from Realtime. Shown as a stack of avatars. */
+  people: {
+    default: () => never[];
+    type: PropType<AvatarStackPerson[]>;
+  };
+}>> & Readonly<{}>, {
+  people: AvatarStackPerson[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/comment-pin.d.ts
+declare const CommentPin: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The thread number. A draft has none. */
+  n: {
+    type: NumberConstructor;
+  };
+  author: {
+    type: PropType<CommentUser>;
+  };
+  status: {
+    default: string;
+    type: PropType<CommentStatus>;
+  };
+  /** A short piece of the comment. It is part of the label that a screen reader says. */
+  excerpt: {
+    type: StringConstructor;
+  };
+  /** The thread of this pin is open. */
+  active: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The comment is still being written. */
+  draft: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "hover" | "leave")[], "select" | "hover" | "leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The thread number. A draft has none. */
+  n: {
+    type: NumberConstructor;
+  };
+  author: {
+    type: PropType<CommentUser>;
+  };
+  status: {
+    default: string;
+    type: PropType<CommentStatus>;
+  };
+  /** A short piece of the comment. It is part of the label that a screen reader says. */
+  excerpt: {
+    type: StringConstructor;
+  };
+  /** The thread of this pin is open. */
+  active: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The comment is still being written. */
+  draft: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+}>> & Readonly<{
+  onSelect?: ((...args: any[]) => any) | undefined;
+  onHover?: ((...args: any[]) => any) | undefined;
+  onLeave?: ((...args: any[]) => any) | undefined;
+}>, {
+  status: CommentStatus;
+  active: boolean;
+  draft: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/comment-thread.d.ts
+type Done = Promise<unknown> | void;
+declare const CommentReply: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  message: {
+    required: true;
+    type: PropType<CommentMessage>;
+  };
+  /** The signed-in user may edit and delete this message. */
+  editable: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The message, and its author, show in one line without actions. */
+  compact: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Deleting asks first. Deleting the first message of a thread deletes the whole thread, so a thread sets it there. */
+  confirmDelete: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** People whose `@name` the message may hold, so an edit keeps their mentions. */
+  people: {
+    default: () => never[];
+    type: PropType<CommentUser[]>;
+  };
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+  /** Saves an edit. Gets `(messageId, body, mentions)`. */
+  onEdit: {
+    type: PropType<(messageId: string, body: string, mentions: string[]) => Done>;
+  };
+  /** Deletes the message. Gets `(messageId)`. */
+  onDelete: {
+    type: PropType<(messageId: string) => Done>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  message: {
+    required: true;
+    type: PropType<CommentMessage>;
+  };
+  /** The signed-in user may edit and delete this message. */
+  editable: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** The message, and its author, show in one line without actions. */
+  compact: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Deleting asks first. Deleting the first message of a thread deletes the whole thread, so a thread sets it there. */
+  confirmDelete: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** People whose `@name` the message may hold, so an edit keeps their mentions. */
+  people: {
+    default: () => never[];
+    type: PropType<CommentUser[]>;
+  };
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+  /** Saves an edit. Gets `(messageId, body, mentions)`. */
+  onEdit: {
+    type: PropType<(messageId: string, body: string, mentions: string[]) => Done>;
+  };
+  /** Deletes the message. Gets `(messageId)`. */
+  onDelete: {
+    type: PropType<(messageId: string) => Done>;
+  };
+}>> & Readonly<{}>, {
+  compact: boolean;
+  people: CommentUser[];
+  editable: boolean;
+  confirmDelete: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const CommentThread$1: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  thread: {
+    required: true;
+    type: PropType<CommentThread>;
+  };
+  /** The signed-in user. Their messages can be edited and deleted. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  /** A read-only card for hovering a pin. */
+  preview: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Keep the full thread readable without reply, edit, delete, or status controls. */
+  readOnly: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Show a reply as being sent, on top of the thread's own tracking. */
+  busy: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** An error to show, on top of the ones from the handlers. */
+  error: {
+    type: StringConstructor;
+  };
+  /** The thread is no longer on the page, so no pin shows where it was. */
+  detached: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+  /** Sends a reply. Gets `(body, mentions)`. */
+  onReply: {
+    type: PropType<(body: string, mentions: string[]) => Done>;
+  };
+  /** Saves an edited message. Gets `(messageId, body, mentions)`. */
+  onEdit: {
+    type: PropType<(messageId: string, body: string, mentions: string[]) => Done>;
+  };
+  /** Deletes a message. Gets `(messageId)`. Deleting the first message deletes the thread. */
+  onDelete: {
+    type: PropType<(messageId: string) => Done>;
+  };
+  onResolve: {
+    type: PropType<() => Done>;
+  };
+  onReopen: {
+    type: PropType<() => Done>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  thread: {
+    required: true;
+    type: PropType<CommentThread>;
+  };
+  /** The signed-in user. Their messages can be edited and deleted. */
+  user: {
+    type: PropType<CommentUser>;
+  };
+  /** A read-only card for hovering a pin. */
+  preview: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Keep the full thread readable without reply, edit, delete, or status controls. */
+  readOnly: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** Show a reply as being sent, on top of the thread's own tracking. */
+  busy: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  /** An error to show, on top of the ones from the handlers. */
+  error: {
+    type: StringConstructor;
+  };
+  /** The thread is no longer on the page, so no pin shows where it was. */
+  detached: {
+    default: boolean;
+    type: BooleanConstructor;
+  };
+  users: {
+    type: PropType<(query: string) => Promise<CommentUser[]>>;
+  };
+  /** Sends a reply. Gets `(body, mentions)`. */
+  onReply: {
+    type: PropType<(body: string, mentions: string[]) => Done>;
+  };
+  /** Saves an edited message. Gets `(messageId, body, mentions)`. */
+  onEdit: {
+    type: PropType<(messageId: string, body: string, mentions: string[]) => Done>;
+  };
+  /** Deletes a message. Gets `(messageId)`. Deleting the first message deletes the thread. */
+  onDelete: {
+    type: PropType<(messageId: string) => Done>;
+  };
+  onResolve: {
+    type: PropType<() => Done>;
+  };
+  onReopen: {
+    type: PropType<() => Done>;
+  };
+}>> & Readonly<{
+  onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+  busy: boolean;
+  preview: boolean;
+  readOnly: boolean;
+  detached: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { CommentList as a, CommentComposer as c, CommentFilters as i, CommentComposerSubmit as l, CommentThread$1 as n, CommentToolbar as o, CommentPin as r, CommentLayer as s, CommentReply as t, CommentComposerVariant as u };

package/dist/comments.d.ts

@@ -0,0 +1,2 @@
+import { a as CommentList, c as CommentComposer, i as CommentFilters, l as CommentComposerSubmit, n as CommentThread, o as CommentToolbar, r as CommentPin, s as CommentLayer, t as CommentReply, u as CommentComposerVariant } from "./comments-Cq5eewsu.js";
+export { CommentComposer, CommentComposerSubmit, CommentComposerVariant, CommentFilters, CommentLayer, CommentList, CommentPin, CommentReply, CommentThread, CommentToolbar };

package/dist/comments.js

@@ -0,0 +1,2 @@
+import { a as CommentFilters, c as CommentComposer, i as CommentPin, n as CommentReply, o as CommentList, r as CommentThread, s as CommentToolbar, t as CommentLayer } from "./comment-layer-CBlxJ8eK.js";
+export { CommentComposer, CommentFilters, CommentLayer, CommentList, CommentPin, CommentReply, CommentThread, CommentToolbar };

package/dist/{config-BwhBDTjC.d.ts → config-Bux_AJzm.d.ts}

@@ -1,5 +1,4 @@
 import { InjectionKey, Plugin } from "vue";
-
 //#region src/config.d.ts
 interface ViteHubUIDefaults {
   markdown?: {

package/dist/{config-CzOjpPth.js → config-bHqE4JOs.js}

@@ -8,14 +8,9 @@ const defaultOptions = {
 	}
 };
 const runtimeComponents = {
-	UBadge: defineAsyncComponent(() => import("@nuxt/ui/components/Badge.vue")),
 	UButton: defineAsyncComponent(() => import("@nuxt/ui/components/Button.vue")),
-	UChatMessage: defineAsyncComponent(() => import("@nuxt/ui/components/ChatMessage.vue")),
-	UChatPrompt: defineAsyncComponent(() => import("@nuxt/ui/components/ChatPrompt.vue")),
-	UChatPromptSubmit: defineAsyncComponent(() => import("@nuxt/ui/components/ChatPromptSubmit.vue")),
-	UChatReasoning: defineAsyncComponent(() => import("@nuxt/ui/components/ChatReasoning.vue")),
-	UChatTool: defineAsyncComponent(() => import("@nuxt/ui/components/ChatTool.vue")),
-	UCollapsible: defineAsyncComponent(() => import("@nuxt/ui/components/Collapsible.vue"))
+	UIcon: defineAsyncComponent(() => import("@nuxt/ui/runtime/vue/components/Icon.vue")),
+	UModal: defineAsyncComponent(() => import("@nuxt/ui/components/Modal.vue"))
 };
 const ViteHubUIInjectionKey = Symbol("ViteHubUI");
 function resolveViteHubUIDefaults(options = {}) {

package/dist/connection-status-CzuWBENf.js

@@ -0,0 +1,65 @@
+import { computed, defineComponent, h, inject, onBeforeUnmount, provide, ref, watch } from "vue";
+//#region src/components/connection-status.ts
+const stateKey = Symbol("ConnectionStatus");
+const labels = {
+	connected: "Connected",
+	connecting: "Connecting",
+	reconnecting: "Reconnecting"
+};
+const ConnectionStatus = defineComponent({
+	name: "ConnectionStatus",
+	props: {
+		status: {
+			required: true,
+			type: String
+		},
+		/** How long, in ms, a lost connection stays "connected" before it shows "reconnecting". Most drops are back sooner. */
+		delay: {
+			default: 1500,
+			type: Number
+		}
+	},
+	setup(props, { slots }) {
+		const joined = ref(props.status === "connected");
+		const lost = ref(false);
+		let timer;
+		watch(() => props.status, (status, previous) => {
+			if (status === "connected") {
+				clearTimeout(timer);
+				joined.value = true;
+				lost.value = false;
+			} else if (previous === "connected") timer = setTimeout(() => lost.value = true, props.delay);
+		});
+		onBeforeUnmount(() => clearTimeout(timer));
+		const state = computed(() => !joined.value ? "connecting" : lost.value ? "reconnecting" : "connected");
+		provide(stateKey, state);
+		return () => h("div", {
+			"data-slot": "connection-status",
+			"data-status": state.value,
+			role: "status"
+		}, slots.default?.({ state: state.value }) ?? [h(ConnectionStatusIndicator), h(ConnectionStatusLabel)]);
+	}
+});
+const ConnectionStatusIndicator = defineComponent({
+	name: "ConnectionStatusIndicator",
+	setup() {
+		const state = inject(stateKey, ref("connecting"));
+		return () => h("span", {
+			"aria-hidden": "true",
+			"data-slot": "connection-status-indicator",
+			"data-status": state.value
+		});
+	}
+});
+const ConnectionStatusLabel = defineComponent({
+	name: "ConnectionStatusLabel",
+	setup(_props, { slots }) {
+		const state = inject(stateKey, ref("connecting"));
+		return () => h("span", {
+			"data-slot": "connection-status-label",
+			"data-status": state.value
+		}, slots.default?.({ state: state.value }) ?? labels[state.value]);
+	}
+});
+//#endregion
+export { ConnectionStatusIndicator as n, ConnectionStatusLabel as r, ConnectionStatus as t };

package/dist/connection-status-DjGBw6xX.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from "vue";
+//#region src/components/connection-status.d.ts
+/** A realtime provider's connection status. */
+type ConnectionStatusValue = "connecting" | "connected" | "disconnected";
+/** What the parts show: the first connection, a live connection, or a lost one that is coming back. */
+type ConnectionStatusState = "connecting" | "connected" | "reconnecting";
+declare const ConnectionStatus: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  status: {
+    required: true;
+    type: PropType<ConnectionStatusValue>;
+  };
+  /** How long, in ms, a lost connection stays "connected" before it shows "reconnecting". Most drops are back sooner. */
+  delay: {
+    default: number;
+    type: NumberConstructor;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  status: {
+    required: true;
+    type: PropType<ConnectionStatusValue>;
+  };
+  /** How long, in ms, a lost connection stays "connected" before it shows "reconnecting". Most drops are back sooner. */
+  delay: {
+    default: number;
+    type: NumberConstructor;
+  };
+}>> & Readonly<{}>, {
+  delay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const ConnectionStatusIndicator: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const ConnectionStatusLabel: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ConnectionStatusValue as a, ConnectionStatusState as i, ConnectionStatusIndicator as n, ConnectionStatusLabel as r, ConnectionStatus as t };

package/dist/connection-status.d.ts

@@ -0,0 +1,2 @@
+import { a as ConnectionStatusValue, i as ConnectionStatusState, n as ConnectionStatusIndicator, r as ConnectionStatusLabel, t as ConnectionStatus } from "./connection-status-DjGBw6xX.js";
+export { ConnectionStatus, ConnectionStatusIndicator, ConnectionStatusLabel, ConnectionStatusState, ConnectionStatusValue };

package/dist/connection-status.js

@@ -0,0 +1,2 @@
+import { n as ConnectionStatusIndicator, r as ConnectionStatusLabel, t as ConnectionStatus } from "./connection-status-CzuWBENf.js";
+export { ConnectionStatus, ConnectionStatusIndicator, ConnectionStatusLabel };