@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/form/form-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-block.js","names":["FormBlock"],"sources":["../../../src/components/form/form-block.tsx"],"sourcesContent":["import type { ActionContext, ActionSchema, FormBlock as FormBlockSchema } from '@alfakit/core'\nimport {\n  FormStore,\n  applyFormRefresh,\n  formActionsVisible,\n  formIdentity,\n  formRefreshFor,\n  isImplicitSubmit,\n  isLeavingVisit,\n  pageFlash,\n  pageFormName,\n  registerConflictForm,\n  registerFormSubmitter,\n  registerPageForm,\n  resolvePartialProps,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { ActionList } from '../actions/action-list'\nimport { showToast } from '../notifications/flash-toasts'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { FormProvider } from './form-context'\n\n/**\n * A page form: its state lives in a FormStore, and its buttons are actions that post the\n * current values through the action endpoint.\n */\nexport function FormBlock({ block }: { block: FormBlockSchema }) {\n  const panel = usePanel()\n  const page = usePageSchema()\n  const props = useAlfakitProps()\n  const runner = useActionRunner()\n  const t = useT()\n  const token = page?.token ?? ''\n\n  // The store survives reloads of the same form (table sorting/paging, polling,\n  // relation-manager actions all deliver a new `block` object); only a different form\n  // identity starts from server state again. The token is re-issued per response, so it\n  // is swapped in place instead of being part of the identity.\n  const identity = formIdentity(page, block)\n\n  const store = useMemo(\n    () =>\n      new FormStore(block, {\n        token,\n        component: block.component,\n        refreshUrl: panel.endpoints.schemaRefresh,\n        optionsUrl: panel.endpoints.schemaOptions,\n        validateUrl: panel.endpoints.schemaValidate,\n        // A halted wizard step shows what its hook sent.\n        onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n        // Live dashboard filters are applied by the refresh; the widgets reload to follow.\n        onRefreshed: () => {\n          if (latestBlock.current.liveFilters)\n            router.reload({ only: resolvePartialProps(['page']) })\n        },\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [identity],\n  )\n\n  useEffect(() => () => store.destroy(), [store])\n\n  // Named forms of custom pages (`<PageForm name>`) publish their store for page method calls.\n  useEffect(() => {\n    const name = pageFormName(block.component)\n\n    return name ? registerPageForm(name, store) : undefined\n  }, [block.component, store])\n\n  // Edit pages: the conflict banner diffs and merges the main form (`detectConflicts()`).\n  useEffect(\n    () => (block.component === 'form' ? registerConflictForm(store) : undefined),\n    [block.component, store],\n  )\n\n  useEffect(() => {\n    store.setToken(token)\n  }, [store, token])\n\n  useEffect(() => {\n    store.setErrors((props.errors as Record<string, string>) ?? {})\n  }, [props.errors, store])\n\n  const state = useStore(store.store)\n  const context = useMemo<ActionContext>(() => ({ token, component: 'page' }), [token])\n  const submitting = useRef(false)\n  // After this form's own successful submit, refill from the server's new state. The new\n  // block may arrive before or after Inertia's `success` event, so handle both orders.\n  const latestBlock = useRef(block)\n  const submittedBlock = useRef<FormBlockSchema | null>(null)\n  const refillPending = useRef(false)\n\n  useEffect(() => {\n    latestBlock.current = block\n\n    if (refillPending.current) {\n      refillPending.current = false\n      store.fill(block)\n    }\n  }, [block, store])\n\n  const actions: ActionSchema[] = useMemo(\n    () => block.actions.map((action) => ({ ...action, hasModal: false })),\n    [block.actions],\n  )\n\n  const trigger = useCallback(\n    async (action: ActionSchema, ctx: ActionContext) => {\n      if (action.url && !action.hasAction) {\n        return runner.trigger(action, ctx)\n      }\n\n      submitting.current = true\n      submittedBlock.current = latestBlock.current\n      store.setProcessing(true)\n      runner.execute(action, ctx, store.state.values)\n    },\n    [runner, store],\n  )\n\n  // Buttons elsewhere with `formId('form')` (a header \"Save\") submit through this form.\n  useEffect(() => registerFormSubmitter(block.component, trigger), [block.component, trigger])\n\n  // `refreshFormData([...])`: an action changed the record; copy those fields in.\n  useEffect(\n    () =>\n      router.on('success', (event) => {\n        const refresh = formRefreshFor(pageFlash(event.detail.page), block.component)\n\n        if (refresh) applyFormRefresh(store, refresh)\n      }),\n    [block.component, store],\n  )\n\n  // Wizard forms (`HasWizard` pages) show their buttons on the last step only.\n  const progressStore = useMemo(() => wizardProgressStore(store), [store])\n  const progress = useStore(progressStore)\n  const showActions = formActionsVisible(block, progress)\n\n  // Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,\n  // relation-manager paging) neither end its processing state nor count as its success.\n  const submitVisit = useRef<string | null>(null)\n\n  useEffect(() => {\n    const offStart = router.on('start', (event) => {\n      const visit = event.detail.visit\n\n      if (submitting.current && !submitVisit.current && visit.method !== 'get') {\n        submitVisit.current = visit.id\n      }\n    })\n\n    const offSuccess = router.on('success', (event) => {\n      const id = submitVisit.current\n\n      if (!id || (event.detail.visitId ?? id) !== id) return\n\n      // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.\n      if (pageFlash(event.detail.page).alfakitAction?.status === 'halted') return\n\n      if (latestBlock.current !== submittedBlock.current) {\n        store.fill(latestBlock.current)\n      } else {\n        refillPending.current = true\n      }\n    })\n\n    const offFinish = router.on('finish', (event) => {\n      if (submitVisit.current && event.detail.visit.id !== submitVisit.current) return\n\n      store.setProcessing(false)\n      submitting.current = false\n      submitVisit.current = null\n    })\n\n    return () => {\n      offStart()\n      offSuccess()\n      offFinish()\n    }\n  }, [store])\n\n  useEffect(() => {\n    if (!panel.unsavedChangesAlerts) {\n      return\n    }\n\n    return router.on('before', (event) => {\n      if (\n        store.isDirty &&\n        !submitting.current &&\n        isLeavingVisit(event.detail.visit) &&\n        !window.confirm(t('unsaved_changes', {}, 'You have unsaved changes. Leave anyway?'))\n      ) {\n        event.preventDefault()\n      }\n    })\n  }, [panel.unsavedChangesAlerts, store, t])\n\n  const primary = actions[0]\n\n  return (\n    <FormProvider store={store}>\n      <form\n        data-slot=\"form-block\"\n        className=\"flex flex-col gap-6\"\n        onSubmit={(event) => {\n          event.preventDefault()\n\n          if (primary && showActions) {\n            void trigger(primary, context)\n          }\n        }}\n        onKeyDown={(event) => {\n          // Enter in a text field runs the primary action (actions are type=\"button\").\n          if (primary && showActions && isImplicitSubmit(event.nativeEvent, event.currentTarget)) {\n            event.preventDefault()\n            void trigger(primary, context)\n          }\n        }}\n      >\n        <fieldset disabled={state.processing || block.operation === 'view'} className=\"contents\">\n          <SchemaRenderer components={state.components} columns={state.columns} />\n        </fieldset>\n        {actions.length > 0 && showActions && (\n          <div data-slot=\"form-actions\" className=\"border-t pt-6\">\n            <ActionList actions={actions} context={context} onTrigger={trigger} />\n          </div>\n        )}\n      </form>\n    </FormProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/form/form-context.d.ts

@@ -0,0 +1,27 @@
+import { BaseField, FieldAriaAttributes, FormState, FormStore } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/form/form-context.d.ts
+export declare function FormProvider({ store, children }: {
+  store: FormStore;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useFormStore(): FormStore;
+export declare function useOptionalFormStore(): FormStore | null;
+export declare function useFormState(): FormState;
+export interface FieldBinding<T = unknown> {
+  value: T;
+  setValue: (value: T) => void;
+  blur: () => void;
+  error: string | undefined;
+  id: string;
+  /** The field cannot be interacted with at all (`disabled()`). */
+  disabled: boolean;
+  /** The field shows its value but the user cannot change it (`readOnly()`). */
+  readOnly: boolean;
+  /** `aria-describedby` (hint, helper text, error), `aria-invalid` and `aria-required` for the control. */
+  aria: FieldAriaAttributes;
+}
+/** Bind a field schema (a built-in or custom field) to the form store. */
+export declare function useField<T = unknown>(field: BaseField): FieldBinding<T>;
+//#endregion
+//# sourceMappingURL=form-context.d.ts.map

package/dist/components/form/form-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.d.ts","names":[],"sources":["../../../src/components/form/form-context.tsx"],"mappings":";;;wBAOgB,eAAe,OAAO;EAAc,OAAO;EAAW,UAAU;oBAAW,IAAA;wBAI3E,gBAAgB;wBAUhB,wBAAwB;wBAIxB,gBAAgB;iBAIf,aAAa;EAC5B,OAAO;EACP,WAAW,OAAO;EAClB;EACA;EACA;;EAEA;;EAEA;;EAEA,MAAM;;;wBAIQ,SAAS,aAAa,OAAO,YAAY,aAAa"}

package/dist/components/form/form-context.js

@@ -0,0 +1,65 @@
+import { useStore, useStoreSelector } from "../../hooks/use-store.js";
+import { fieldAria } from "@alfakit/core";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/form-context.tsx
+const FormStoreContext = createContext(null);
+function FormProvider({ store, children }) {
+	return /* @__PURE__ */ jsx(FormStoreContext.Provider, {
+		value: store,
+		children
+	});
+}
+function useFormStore() {
+	const store = useContext(FormStoreContext);
+	if (!store) throw new Error("Form fields must be rendered inside a FormProvider.");
+	return store;
+}
+function useOptionalFormStore() {
+	return useContext(FormStoreContext);
+}
+function useFormState() {
+	return useStore(useFormStore().store);
+}
+/** Bind a field schema (a built-in or custom field) to the form store. */
+function useField(field) {
+	const store = useFormStore();
+	const path = field.statePath;
+	const value = useStoreSelector(store.store, (state) => {
+		let current = state.values;
+		for (const segment of path.split(".")) {
+			if (current === null || current === void 0 || typeof current !== "object") return;
+			current = current[segment];
+		}
+		return current;
+	});
+	const error = useStoreSelector(store.store, (state) => state.errors[path]?.[0]);
+	const setValue = useCallback((next) => store.setValue(path, next), [store, path]);
+	const blur = useCallback(() => store.blur(path), [store, path]);
+	const id = useMemo(() => field.id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, "-")}`, [field.id, path]);
+	const aria = useMemo(() => fieldAria(id, {
+		hint: field.hint,
+		helperText: field.helperText,
+		required: field.required
+	}, error), [
+		id,
+		field.hint,
+		field.helperText,
+		field.required,
+		error
+	]);
+	return {
+		value,
+		setValue,
+		blur,
+		error,
+		id,
+		disabled: Boolean(field.disabled),
+		readOnly: Boolean(field.readOnly),
+		aria
+	};
+}
+//#endregion
+export { FormProvider, useField, useFormState, useFormStore, useOptionalFormStore };
+
+//# sourceMappingURL=form-context.js.map

package/dist/components/form/form-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.js","names":[],"sources":["../../../src/components/form/form-context.tsx"],"sourcesContent":["import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'\nimport { fieldAria } from '@alfakit/core'\nimport { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react'\nimport { useStore, useStoreSelector } from '../../hooks/use-store'\n\nconst FormStoreContext = createContext<FormStore | null>(null)\n\nexport function FormProvider({ store, children }: { store: FormStore; children: ReactNode }) {\n  return <FormStoreContext.Provider value={store}>{children}</FormStoreContext.Provider>\n}\n\nexport function useFormStore(): FormStore {\n  const store = useContext(FormStoreContext)\n\n  if (!store) {\n    throw new Error('Form fields must be rendered inside a FormProvider.')\n  }\n\n  return store\n}\n\nexport function useOptionalFormStore(): FormStore | null {\n  return useContext(FormStoreContext)\n}\n\nexport function useFormState(): FormState {\n  return useStore(useFormStore().store)\n}\n\nexport interface FieldBinding<T = unknown> {\n  value: T\n  setValue: (value: T) => void\n  blur: () => void\n  error: string | undefined\n  id: string\n  /** The field cannot be interacted with at all (`disabled()`). */\n  disabled: boolean\n  /** The field shows its value but the user cannot change it (`readOnly()`). */\n  readOnly: boolean\n  /** `aria-describedby` (hint, helper text, error), `aria-invalid` and `aria-required` for the control. */\n  aria: FieldAriaAttributes\n}\n\n/** Bind a field schema (a built-in or custom field) to the form store. */\nexport function useField<T = unknown>(field: BaseField): FieldBinding<T> {\n  const store = useFormStore()\n  const path = field.statePath\n\n  const value = useStoreSelector(store.store, (state) => {\n    let current: unknown = state.values\n\n    for (const segment of path.split('.')) {\n      if (current === null || current === undefined || typeof current !== 'object') {\n        return undefined as T\n      }\n\n      current = (current as Record<string, unknown>)[segment]\n    }\n\n    return current as T\n  })\n\n  const error = useStoreSelector(store.store, (state) => state.errors[path]?.[0])\n\n  const setValue = useCallback((next: T) => store.setValue(path, next), [store, path])\n  const blur = useCallback(() => store.blur(path), [store, path])\n\n  const id = useMemo(\n    () => field.id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n    [field.id, path],\n  )\n\n  const aria = useMemo(\n    () =>\n      fieldAria(\n        id,\n        { hint: field.hint, helperText: field.helperText, required: field.required },\n        error,\n      ),\n    [id, field.hint, field.helperText, field.required, error],\n  )\n\n  // Fields stay enabled during a live refresh: the store keeps edits made while the request\n  // is in flight, so locking inputs would only swallow keystrokes.\n  return {\n    value,\n    setValue,\n    blur,\n    error,\n    id,\n    disabled: Boolean(field.disabled),\n    readOnly: Boolean(field.readOnly),\n    aria,\n  }\n}\n"],"mappings":";;;;;AAKA,MAAM,mBAAmB,cAAgC,IAAI;AAE7D,SAAgB,aAAa,EAAE,OAAO,YAAuD;CAC3F,OAAO,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAAQ;CAAoC,CAAA;AACvF;AAEA,SAAgB,eAA0B;CACxC,MAAM,QAAQ,WAAW,gBAAgB;CAEzC,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,qDAAqD;CAGvE,OAAO;AACT;AAEA,SAAgB,uBAAyC;CACvD,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,eAA0B;CACxC,OAAO,SAAS,aAAa,CAAC,CAAC,KAAK;AACtC;;AAiBA,SAAgB,SAAsB,OAAmC;CACvE,MAAM,QAAQ,aAAa;CAC3B,MAAM,OAAO,MAAM;CAEnB,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,UAAU;EACrD,IAAI,UAAmB,MAAM;EAE7B,KAAK,MAAM,WAAW,KAAK,MAAM,GAAG,GAAG;GACrC,IAAI,YAAY,QAAQ,YAAY,KAAA,KAAa,OAAO,YAAY,UAClE;GAGF,UAAW,QAAoC;EACjD;EAEA,OAAO;CACT,CAAC;CAED,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,UAAU,MAAM,OAAO,KAAK,GAAG,EAAE;CAE9E,MAAM,WAAW,aAAa,SAAY,MAAM,SAAS,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC;CACnF,MAAM,OAAO,kBAAkB,MAAM,KAAK,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC;CAE9D,MAAM,KAAK,cACH,MAAM,MAAM,WAAW,KAAK,QAAQ,mBAAmB,GAAG,KAChE,CAAC,MAAM,IAAI,IAAI,CACjB;CAEA,MAAM,OAAO,cAET,UACE,IACA;EAAE,MAAM,MAAM;EAAM,YAAY,MAAM;EAAY,UAAU,MAAM;CAAS,GAC3E,KACF,GACF;EAAC;EAAI,MAAM;EAAM,MAAM;EAAY,MAAM;EAAU;CAAK,CAC1D;CAIA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,UAAU,QAAQ,MAAM,QAAQ;EAChC,UAAU,QAAQ,MAAM,QAAQ;EAChC;CACF;AACF"}

package/dist/components/helpdesk/chat-panel.js

@@ -0,0 +1,209 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SendIcon, XIcon } from "lucide-react";
+//#region src/components/helpdesk/chat-panel.tsx
+function HelpdeskChatPanel({ client, onClose, className }) {
+	const state = useStore(client.store);
+	const titleId = useId();
+	const composerId = useId();
+	const emailHintId = useId();
+	const logRef = useRef(null);
+	const composerRef = useRef(null);
+	const t = (key, fallback, replacements = {}) => client.t(key, fallback, replacements);
+	const conversation = state.conversation;
+	const started = Boolean(conversation?.key);
+	const closed = Boolean(conversation?.closed);
+	const config = state.config;
+	useEffect(() => {
+		composerRef.current?.focus();
+	}, []);
+	useEffect(() => {
+		const element = logRef.current;
+		if (element) element.scrollTop = element.scrollHeight;
+	}, [conversation?.messages.length, conversation?.agentTyping]);
+	const onKeyDown = (event) => {
+		if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			client.send();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-labelledby": titleId,
+		"data-slot": "helpdesk-chat",
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		},
+		className: cn("bg-background text-foreground flex h-[min(36rem,calc(100svh-7rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-xl border shadow-xl", className),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "bg-primary text-primary-foreground flex items-start gap-2 px-4 py-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "text-sm font-semibold",
+						children: t("title", "Chat with us")
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-xs opacity-80",
+						children: t("subtitle", "We usually reply in a few minutes.")
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: onClose,
+					"aria-label": t("close", "Close chat"),
+					className: "hover:bg-primary-foreground/10 text-primary-foreground hover:text-primary-foreground -me-2",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				ref: logRef,
+				role: "log",
+				"aria-live": "polite",
+				"aria-label": t("messages", "Messages"),
+				className: "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-3",
+				children: state.status === "loading" && !config ? /* @__PURE__ */ jsx("li", {
+					className: "m-auto",
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					config?.greeting && /* @__PURE__ */ jsx("li", {
+						"data-from": "agent",
+						className: "bg-muted max-w-[85%] self-start rounded-2xl rounded-ss-sm px-3 py-2 text-sm",
+						children: config.greeting
+					}),
+					conversation?.messages.map((message) => /* @__PURE__ */ jsxs("li", {
+						"data-from": message.from,
+						className: cn("flex max-w-[85%] flex-col gap-0.5", message.from === "visitor" ? "items-end self-end" : "items-start self-start"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground px-1 text-xs",
+							children: message.name
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn("prose prose-sm dark:prose-invert max-w-none rounded-2xl px-3 py-2 break-words [&_p]:my-0", message.from === "visitor" ? "bg-primary text-primary-foreground prose-a:text-primary-foreground rounded-se-sm" : "bg-muted rounded-ss-sm"),
+							dangerouslySetInnerHTML: { __html: message.html }
+						})]
+					}, message.key)),
+					conversation?.agentTyping && /* @__PURE__ */ jsx("li", {
+						role: "status",
+						className: "text-muted-foreground animate-pulse self-start px-1 text-xs",
+						children: t("typing", ":name is typing…", { name: conversation.agentTyping })
+					})
+				] })
+			}),
+			closed ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2 border-t p-3 text-center text-sm",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: t("closed", "This chat has ended.")
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					onClick: () => void client.startNew(),
+					children: t("new_chat", "Start a new chat")
+				})]
+			}) : /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-2 border-t p-3",
+				onSubmit: (event) => {
+					event.preventDefault();
+					client.send();
+				},
+				children: [
+					!started && config?.askContact && /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Input, {
+								value: state.name,
+								onChange: (event) => client.setContact({ name: event.target.value }),
+								placeholder: t("name", "Your name"),
+								"aria-label": t("name", "Your name"),
+								autoComplete: "name",
+								maxLength: 255
+							}),
+							/* @__PURE__ */ jsx(Input, {
+								type: "email",
+								value: state.email,
+								onChange: (event) => client.setContact({ email: event.target.value }),
+								placeholder: t("email", "Your email"),
+								"aria-label": t("email", "Your email"),
+								"aria-describedby": emailHintId,
+								autoComplete: "email",
+								required: config.requireEmail,
+								maxLength: 255
+							}),
+							/* @__PURE__ */ jsx("p", {
+								id: emailHintId,
+								className: "sr-only",
+								children: t("email_hint", "So we can follow up if you leave.")
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "text",
+								name: config.honeypot,
+								value: state.trap,
+								onChange: (event) => client.setContact({ trap: event.target.value }),
+								tabIndex: -1,
+								autoComplete: "off",
+								"aria-hidden": "true",
+								className: "absolute -start-[10000px] size-px overflow-hidden"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: composerId,
+						className: "sr-only",
+						children: t("message", "Message")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-end gap-2",
+						children: [/* @__PURE__ */ jsx(Textarea, {
+							ref: composerRef,
+							id: composerId,
+							rows: 1,
+							value: state.draft,
+							maxLength: config?.maxLength,
+							onChange: (event) => client.setDraft(event.target.value),
+							onKeyDown,
+							placeholder: t("placeholder", "Write a message…"),
+							"aria-invalid": state.error ? true : void 0,
+							className: "max-h-32 min-h-10 flex-1 resize-none"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "icon",
+							disabled: state.sending || state.draft.trim() === "",
+							"aria-label": state.sending ? t("sending", "Sending…") : started ? t("send", "Send") : t("start", "Start chat"),
+							children: state.sending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(SendIcon, { className: "rtl:-scale-x-100" })
+						})]
+					}),
+					state.error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-destructive text-xs",
+						children: state.error
+					}),
+					config?.contactUrl && !started && /* @__PURE__ */ jsx("a", {
+						href: config.contactUrl,
+						className: "text-muted-foreground self-center text-xs underline-offset-4 hover:underline",
+						children: t("contact", "Prefer email? Contact us")
+					})
+				]
+			}),
+			config?.poweredBy && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				dangerouslySetInnerHTML: { __html: config.poweredBy }
+			})
+		]
+	});
+}
+//#endregion
+export { HelpdeskChatPanel };
+
+//# sourceMappingURL=chat-panel.js.map

package/dist/components/helpdesk/chat-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-panel.js","names":[],"sources":["../../../src/components/helpdesk/chat-panel.tsx"],"sourcesContent":["import type { HelpdeskChatClient } from '@alfakit/core'\nimport { SendIcon, XIcon } from 'lucide-react'\nimport { useEffect, useId, useRef, type KeyboardEvent } from 'react'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport { Input } from '../ui/input'\nimport { Spinner } from '../ui/spinner'\nimport { Textarea } from '../ui/textarea'\n\n/**\n * The open live chat: the conversation (a polite live log), the visitor's contact details\n * before the first message, and the composer. Texts come from the server.\n */\nexport interface HelpdeskChatPanelProps {\n  client: HelpdeskChatClient\n  onClose: () => void\n  className?: string\n}\n\nexport function HelpdeskChatPanel({ client, onClose, className }: HelpdeskChatPanelProps) {\n  const state = useStore(client.store)\n  const titleId = useId()\n  const composerId = useId()\n  const emailHintId = useId()\n  const logRef = useRef<HTMLOListElement>(null)\n  const composerRef = useRef<HTMLTextAreaElement>(null)\n  const t = (key: string, fallback: string, replacements: Record<string, string> = {}) =>\n    client.t(key, fallback, replacements)\n  const conversation = state.conversation\n  const started = Boolean(conversation?.key)\n  const closed = Boolean(conversation?.closed)\n  const config = state.config\n\n  useEffect(() => {\n    composerRef.current?.focus()\n  }, [])\n\n  useEffect(() => {\n    const element = logRef.current\n\n    if (element) element.scrollTop = element.scrollHeight\n  }, [conversation?.messages.length, conversation?.agentTyping])\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n      event.preventDefault()\n      void client.send()\n    }\n  }\n\n  return (\n    <div\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      data-slot=\"helpdesk-chat\"\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.stopPropagation()\n          onClose()\n        }\n      }}\n      className={cn(\n        'bg-background text-foreground flex h-[min(36rem,calc(100svh-7rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-xl border shadow-xl',\n        className,\n      )}\n    >\n      <header className=\"bg-primary text-primary-foreground flex items-start gap-2 px-4 py-3\">\n        <div className=\"min-w-0 flex-1\">\n          <h2 id={titleId} className=\"text-sm font-semibold\">\n            {t('title', 'Chat with us')}\n          </h2>\n          <p className=\"text-xs opacity-80\">\n            {t('subtitle', 'We usually reply in a few minutes.')}\n          </p>\n        </div>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          onClick={onClose}\n          aria-label={t('close', 'Close chat')}\n          className=\"hover:bg-primary-foreground/10 text-primary-foreground hover:text-primary-foreground -me-2\"\n        >\n          <XIcon />\n        </Button>\n      </header>\n\n      <ol\n        ref={logRef}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-label={t('messages', 'Messages')}\n        className=\"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-3\"\n      >\n        {state.status === 'loading' && !config ? (\n          <li className=\"m-auto\">\n            <Spinner />\n          </li>\n        ) : (\n          <>\n            {config?.greeting && (\n              <li\n                data-from=\"agent\"\n                className=\"bg-muted max-w-[85%] self-start rounded-2xl rounded-ss-sm px-3 py-2 text-sm\"\n              >\n                {config.greeting}\n              </li>\n            )}\n            {conversation?.messages.map((message) => (\n              <li\n                key={message.key}\n                data-from={message.from}\n                className={cn(\n                  'flex max-w-[85%] flex-col gap-0.5',\n                  message.from === 'visitor' ? 'items-end self-end' : 'items-start self-start',\n                )}\n              >\n                <span className=\"text-muted-foreground px-1 text-xs\">{message.name}</span>\n                <div\n                  className={cn(\n                    'prose prose-sm dark:prose-invert max-w-none rounded-2xl px-3 py-2 break-words [&_p]:my-0',\n                    message.from === 'visitor'\n                      ? 'bg-primary text-primary-foreground prose-a:text-primary-foreground rounded-se-sm'\n                      : 'bg-muted rounded-ss-sm',\n                  )}\n                  dangerouslySetInnerHTML={{ __html: message.html }}\n                />\n              </li>\n            ))}\n            {conversation?.agentTyping && (\n              <li\n                role=\"status\"\n                className=\"text-muted-foreground animate-pulse self-start px-1 text-xs\"\n              >\n                {t('typing', ':name is typing…', { name: conversation.agentTyping })}\n              </li>\n            )}\n          </>\n        )}\n      </ol>\n\n      {closed ? (\n        <div className=\"flex flex-col items-center gap-2 border-t p-3 text-center text-sm\">\n          <p className=\"text-muted-foreground\">{t('closed', 'This chat has ended.')}</p>\n          <Button type=\"button\" size=\"sm\" onClick={() => void client.startNew()}>\n            {t('new_chat', 'Start a new chat')}\n          </Button>\n        </div>\n      ) : (\n        <form\n          className=\"flex flex-col gap-2 border-t p-3\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            void client.send()\n          }}\n        >\n          {!started && config?.askContact && (\n            <div className=\"grid grid-cols-2 gap-2\">\n              <Input\n                value={state.name}\n                onChange={(event) => client.setContact({ name: event.target.value })}\n                placeholder={t('name', 'Your name')}\n                aria-label={t('name', 'Your name')}\n                autoComplete=\"name\"\n                maxLength={255}\n              />\n              <Input\n                type=\"email\"\n                value={state.email}\n                onChange={(event) => client.setContact({ email: event.target.value })}\n                placeholder={t('email', 'Your email')}\n                aria-label={t('email', 'Your email')}\n                aria-describedby={emailHintId}\n                autoComplete=\"email\"\n                required={config.requireEmail}\n                maxLength={255}\n              />\n              <p id={emailHintId} className=\"sr-only\">\n                {t('email_hint', 'So we can follow up if you leave.')}\n              </p>\n              {/* People never see or fill this; bots that fill every input do. */}\n              <input\n                type=\"text\"\n                name={config.honeypot}\n                value={state.trap}\n                onChange={(event) => client.setContact({ trap: event.target.value })}\n                tabIndex={-1}\n                autoComplete=\"off\"\n                aria-hidden=\"true\"\n                className=\"absolute -start-[10000px] size-px overflow-hidden\"\n              />\n            </div>\n          )}\n          <label htmlFor={composerId} className=\"sr-only\">\n            {t('message', 'Message')}\n          </label>\n          <div className=\"flex items-end gap-2\">\n            <Textarea\n              ref={composerRef}\n              id={composerId}\n              rows={1}\n              value={state.draft}\n              maxLength={config?.maxLength}\n              onChange={(event) => client.setDraft(event.target.value)}\n              onKeyDown={onKeyDown}\n              placeholder={t('placeholder', 'Write a message…')}\n              aria-invalid={state.error ? true : undefined}\n              className=\"max-h-32 min-h-10 flex-1 resize-none\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"icon\"\n              disabled={state.sending || state.draft.trim() === ''}\n              aria-label={\n                state.sending\n                  ? t('sending', 'Sending…')\n                  : started\n                    ? t('send', 'Send')\n                    : t('start', 'Start chat')\n              }\n            >\n              {state.sending ? <Spinner /> : <SendIcon className=\"rtl:-scale-x-100\" />}\n            </Button>\n          </div>\n          {state.error && (\n            <p role=\"alert\" className=\"text-destructive text-xs\">\n              {state.error}\n            </p>\n          )}\n          {config?.contactUrl && !started && (\n            <a\n              href={config.contactUrl}\n              className=\"text-muted-foreground self-center text-xs underline-offset-4 hover:underline\"\n            >\n              {t('contact', 'Prefer email? Contact us')}\n            </a>\n          )}\n        </form>\n      )}\n      {config?.poweredBy && (\n        <div className=\"shrink-0\" dangerouslySetInnerHTML={{ __html: config.poweredBy }} />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/helpdesk/chat-widget.d.ts

@@ -0,0 +1,23 @@
+import { HelpdeskChatOptions } from "@alfakit/core";
+//#region src/components/helpdesk/chat-widget.d.ts
+export interface HelpdeskChatProps extends HelpdeskChatOptions {
+  /** Which corner, in the reading direction (`end` by default: bottom right in LTR). */
+  position?: 'start' | 'end';
+  /** Open on load. */
+  defaultOpen?: boolean;
+  /** The launcher's accessible name before the server's texts arrive. */
+  label?: string;
+  className?: string;
+}
+/**
+ * The helpdesk's live chat widget for your public pages (alfasix/alfakit-helpdesk): a
+ * launcher button that opens the chat. The chat's code loads when it is first opened;
+ * nothing renders on the server. Works outside panels (no `AlfakitRoot` needed).
+ *
+ * ```tsx
+ * <HelpdeskChat endpoint="/support/chat" />
+ * ```
+ */
+export declare function HelpdeskChat({ position, defaultOpen, label, className, ...options }: HelpdeskChatProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=chat-widget.d.ts.map

package/dist/components/helpdesk/chat-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-widget.d.ts","names":[],"sources":["../../../src/components/helpdesk/chat-widget.tsx"],"mappings":";;iBAciB,0BAA0B;;EAEzC;;EAEA;;EAEA;EACA;;;;;;;;;;;wBAYc,eACd,UACA,aACA,OACA,cACG,WACF,oCAAiB,IAAA"}

package/dist/components/helpdesk/chat-widget.js

@@ -0,0 +1,76 @@
+import { cn } from "../../lib/utils.js";
+import { useStore } from "../../hooks/use-store.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { useHydrated } from "../../hooks/use-hydrated.js";
+import { HelpdeskChatClient } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageCircleIcon, XIcon } from "lucide-react";
+//#region src/components/helpdesk/chat-widget.tsx
+const ChatPanel = lazyComponent(() => import("./chat-panel.js").then((module) => module.HelpdeskChatPanel), () => null);
+/**
+* The helpdesk's live chat widget for your public pages (alfasix/alfakit-helpdesk): a
+* launcher button that opens the chat. The chat's code loads when it is first opened;
+* nothing renders on the server. Works outside panels (no `AlfakitRoot` needed).
+*
+* ```tsx
+* <HelpdeskChat endpoint="/support/chat" />
+* ```
+*/
+function HelpdeskChat({ position = "end", defaultOpen = false, label, className, ...options }) {
+	const [client] = useState(() => new HelpdeskChatClient(options));
+	const mounted = useHydrated();
+	const state = useStore(client.store);
+	const launcher = useRef(null);
+	const panelId = useId();
+	useEffect(() => {
+		client.load();
+		if (defaultOpen) client.setOpen(true);
+		return () => client.stop();
+	}, [client, defaultOpen]);
+	if (!mounted || state.config?.enabled === false) return null;
+	const close = () => {
+		client.setOpen(false);
+		launcher.current?.focus();
+	};
+	const name = state.open ? client.t("close", "Close chat") : client.t("open", label ?? "Open chat");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "helpdesk-chat-widget",
+		className: cn("fixed bottom-4 z-50 flex flex-col gap-3", position === "end" ? "end-4 items-end" : "start-4 items-start", className),
+		children: [state.open && /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			children: /* @__PURE__ */ jsx(ChatPanel, {
+				client,
+				onClose: close
+			})
+		}), /* @__PURE__ */ jsxs("button", {
+			ref: launcher,
+			type: "button",
+			"aria-expanded": state.open,
+			"aria-controls": state.open ? panelId : void 0,
+			"aria-label": name,
+			title: name,
+			onClick: () => state.open ? close() : client.setOpen(true),
+			onMouseEnter: () => void ChatPanel.preload(),
+			onFocus: () => void ChatPanel.preload(),
+			className: "bg-primary text-primary-foreground focus-visible:ring-ring/50 relative flex size-14 items-center justify-center rounded-full shadow-lg transition-transform outline-none hover:scale-105 focus-visible:ring-[3px]",
+			children: [state.open ? /* @__PURE__ */ jsx(XIcon, {
+				className: "size-6",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(MessageCircleIcon, {
+				className: "size-6 rtl:-scale-x-100",
+				"aria-hidden": "true"
+			}), !state.open && state.unread > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "bg-destructive text-destructive-foreground absolute -end-0.5 -top-0.5 flex min-w-5 items-center justify-center rounded-full px-1 text-xs font-semibold",
+				children: [new Intl.NumberFormat(document.documentElement.lang || void 0).format(state.unread), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: client.t("new_message", "New message from :name", { name: client.t("agent", "Support") })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { HelpdeskChat };
+
+//# sourceMappingURL=chat-widget.js.map

package/dist/components/helpdesk/chat-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-widget.js","names":[],"sources":["../../../src/components/helpdesk/chat-widget.tsx"],"sourcesContent":["import { HelpdeskChatClient, type HelpdeskChatOptions } from '@alfakit/core'\nimport { MessageCircleIcon, XIcon } from 'lucide-react'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { useHydrated } from '../../hooks/use-hydrated'\nimport { useStore } from '../../hooks/use-store'\nimport { lazyComponent } from '../../lib/lazy'\nimport { cn } from '../../lib/utils'\nimport type { HelpdeskChatPanelProps } from './chat-panel'\n\nconst ChatPanel = lazyComponent<HelpdeskChatPanelProps>(\n  () => import('./chat-panel').then((module) => module.HelpdeskChatPanel),\n  () => null,\n)\n\nexport interface HelpdeskChatProps extends HelpdeskChatOptions {\n  /** Which corner, in the reading direction (`end` by default: bottom right in LTR). */\n  position?: 'start' | 'end'\n  /** Open on load. */\n  defaultOpen?: boolean\n  /** The launcher's accessible name before the server's texts arrive. */\n  label?: string\n  className?: string\n}\n\n/**\n * The helpdesk's live chat widget for your public pages (alfasix/alfakit-helpdesk): a\n * launcher button that opens the chat. The chat's code loads when it is first opened;\n * nothing renders on the server. Works outside panels (no `AlfakitRoot` needed).\n *\n * ```tsx\n * <HelpdeskChat endpoint=\"/support/chat\" />\n * ```\n */\nexport function HelpdeskChat({\n  position = 'end',\n  defaultOpen = false,\n  label,\n  className,\n  ...options\n}: HelpdeskChatProps) {\n  const [client] = useState(() => new HelpdeskChatClient(options))\n  const mounted = useHydrated()\n  const state = useStore(client.store)\n  const launcher = useRef<HTMLButtonElement>(null)\n  const panelId = useId()\n\n  useEffect(() => {\n    void client.load()\n\n    if (defaultOpen) client.setOpen(true)\n\n    return () => client.stop()\n  }, [client, defaultOpen])\n\n  if (!mounted || state.config?.enabled === false) return null\n\n  const close = () => {\n    client.setOpen(false)\n    launcher.current?.focus()\n  }\n  const name = state.open ? client.t('close', 'Close chat') : client.t('open', label ?? 'Open chat')\n\n  return (\n    <div\n      data-slot=\"helpdesk-chat-widget\"\n      className={cn(\n        'fixed bottom-4 z-50 flex flex-col gap-3',\n        position === 'end' ? 'end-4 items-end' : 'start-4 items-start',\n        className,\n      )}\n    >\n      {state.open && (\n        <div id={panelId}>\n          <ChatPanel client={client} onClose={close} />\n        </div>\n      )}\n      <button\n        ref={launcher}\n        type=\"button\"\n        aria-expanded={state.open}\n        aria-controls={state.open ? panelId : undefined}\n        aria-label={name}\n        title={name}\n        onClick={() => (state.open ? close() : client.setOpen(true))}\n        onMouseEnter={() => void ChatPanel.preload()}\n        onFocus={() => void ChatPanel.preload()}\n        className=\"bg-primary text-primary-foreground focus-visible:ring-ring/50 relative flex size-14 items-center justify-center rounded-full shadow-lg transition-transform outline-none hover:scale-105 focus-visible:ring-[3px]\"\n      >\n        {state.open ? (\n          <XIcon className=\"size-6\" aria-hidden=\"true\" />\n        ) : (\n          <MessageCircleIcon className=\"size-6 rtl:-scale-x-100\" aria-hidden=\"true\" />\n        )}\n        {!state.open && state.unread > 0 && (\n          <span className=\"bg-destructive text-destructive-foreground absolute -end-0.5 -top-0.5 flex min-w-5 items-center justify-center rounded-full px-1 text-xs font-semibold\">\n            {new Intl.NumberFormat(document.documentElement.lang || undefined).format(state.unread)}\n            <span className=\"sr-only\">\n              {client.t('new_message', 'New message from :name', {\n                name: client.t('agent', 'Support'),\n              })}\n            </span>\n          </span>\n        )}\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,YAAY,oBACV,OAAO,kBAAe,CAAC,MAAM,WAAW,OAAO,iBAAiB,SAChE,IACR;;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,WAAW,OACX,cAAc,OACd,OACA,WACA,GAAG,WACiB;CACpB,MAAM,CAAC,UAAU,eAAe,IAAI,mBAAmB,OAAO,CAAC;CAC/D,MAAM,UAAU,YAAY;CAC5B,MAAM,QAAQ,SAAS,OAAO,KAAK;CACnC,MAAM,WAAW,OAA0B,IAAI;CAC/C,MAAM,UAAU,MAAM;CAEtB,gBAAgB;EACd,OAAY,KAAK;EAEjB,IAAI,aAAa,OAAO,QAAQ,IAAI;EAEpC,aAAa,OAAO,KAAK;CAC3B,GAAG,CAAC,QAAQ,WAAW,CAAC;CAExB,IAAI,CAAC,WAAW,MAAM,QAAQ,YAAY,OAAO,OAAO;CAExD,MAAM,cAAc;EAClB,OAAO,QAAQ,KAAK;EACpB,SAAS,SAAS,MAAM;CAC1B;CACA,MAAM,OAAO,MAAM,OAAO,OAAO,EAAE,SAAS,YAAY,IAAI,OAAO,EAAE,QAAQ,SAAS,WAAW;CAEjG,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2CACA,aAAa,QAAQ,oBAAoB,uBACzC,SACF;EANF,UAAA,CAQG,MAAM,QACL,oBAAC,OAAD;GAAK,IAAI;GACP,UAAA,oBAAC,WAAD;IAAmB;IAAQ,SAAS;GAAQ,CAAA;EACzC,CAAA,GAEP,qBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,iBAAe,MAAM;GACrB,iBAAe,MAAM,OAAO,UAAU,KAAA;GACtC,cAAY;GACZ,OAAO;GACP,eAAgB,MAAM,OAAO,MAAM,IAAI,OAAO,QAAQ,IAAI;GAC1D,oBAAoB,KAAK,UAAU,QAAQ;GAC3C,eAAe,KAAK,UAAU,QAAQ;GACtC,WAAU;GAVZ,UAAA,CAYG,MAAM,OACL,oBAAC,OAAD;IAAO,WAAU;IAAS,eAAY;GAAQ,CAAA,IAE9C,oBAAC,mBAAD;IAAmB,WAAU;IAA0B,eAAY;GAAQ,CAAA,GAE5E,CAAC,MAAM,QAAQ,MAAM,SAAS,KAC7B,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,IAAI,KAAK,aAAa,SAAS,gBAAgB,QAAQ,KAAA,CAAS,CAAC,CAAC,OAAO,MAAM,MAAM,GACtF,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,OAAO,EAAE,eAAe,0BAA0B,EACjD,MAAM,OAAO,EAAE,SAAS,SAAS,EACnC,CAAC;IACG,CAAA,CACF;GAEF,CAAA,CAAA;EACL,CAAA,CAAA;;AAET"}

package/dist/components/helpdesk/inbox-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { HelpdeskInboxSchema } from "@alfakit/core";
+//#region src/components/helpdesk/inbox-lazy.d.ts
+/** The helpdesk inbox; its code loads the first time the inbox is shown. */
+export declare const HelpdeskInbox: LazyComponent<{
+  component: HelpdeskInboxSchema;
+}>;
+//#endregion
+//# sourceMappingURL=inbox-lazy.d.ts.map

package/dist/components/helpdesk/inbox-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/helpdesk/inbox-lazy.tsx"],"mappings":";;;;qBAsCa,eAA2CA;EAAA,WAAA"}

package/dist/components/helpdesk/inbox-lazy.js

@@ -0,0 +1,46 @@
+import { useT } from "../../context.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/helpdesk/inbox-lazy.tsx
+/** The server render and the first paint: the inbox's outline. */
+function HelpdeskInboxSkeleton() {
+	const t = useT();
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "helpdesk-inbox",
+		"aria-busy": "true",
+		className: "grid h-[calc(100svh-12rem)] min-h-[34rem] grid-cols-1 gap-0 overflow-hidden py-0 md:grid-cols-[18rem_1fr] xl:grid-cols-[13rem_20rem_1fr]",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("helpdesk.loading", {}, "Loading…")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2 border-e p-2 max-xl:hidden",
+				"aria-hidden": "true",
+				children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-7" }, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 border-e p-2",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9" }), Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16" }, index))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 p-4 max-md:hidden",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/2" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-24" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-24" })
+				]
+			})
+		]
+	});
+}
+/** The helpdesk inbox; its code loads the first time the inbox is shown. */
+const HelpdeskInbox = lazyComponent(() => import("./inbox.js").then((module) => module.HelpdeskInbox), () => /* @__PURE__ */ jsx(HelpdeskInboxSkeleton, {}));
+//#endregion
+export { HelpdeskInbox };
+
+//# sourceMappingURL=inbox-lazy.js.map

package/dist/components/helpdesk/inbox-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox-lazy.js","names":[],"sources":["../../../src/components/helpdesk/inbox-lazy.tsx"],"sourcesContent":["import type { HelpdeskInboxSchema } from '@alfakit/core'\nimport { useT } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\n\n/** The server render and the first paint: the inbox's outline. */\nfunction HelpdeskInboxSkeleton() {\n  const t = useT()\n\n  return (\n    <Card\n      data-slot=\"helpdesk-inbox\"\n      aria-busy=\"true\"\n      className=\"grid h-[calc(100svh-12rem)] min-h-[34rem] grid-cols-1 gap-0 overflow-hidden py-0 md:grid-cols-[18rem_1fr] xl:grid-cols-[13rem_20rem_1fr]\"\n    >\n      <span className=\"sr-only\">{t('helpdesk.loading', {}, 'Loading…')}</span>\n      <div className=\"flex flex-col gap-2 border-e p-2 max-xl:hidden\" aria-hidden=\"true\">\n        {Array.from({ length: 6 }, (_, index) => (\n          <Skeleton key={index} className=\"h-7\" />\n        ))}\n      </div>\n      <div className=\"flex flex-col gap-2 border-e p-2\" aria-hidden=\"true\">\n        <Skeleton className=\"h-9\" />\n        {Array.from({ length: 6 }, (_, index) => (\n          <Skeleton key={index} className=\"h-16\" />\n        ))}\n      </div>\n      <div className=\"flex flex-col gap-3 p-4 max-md:hidden\" aria-hidden=\"true\">\n        <Skeleton className=\"h-6 w-1/2\" />\n        <Skeleton className=\"h-24\" />\n        <Skeleton className=\"h-24\" />\n      </div>\n    </Card>\n  )\n}\n\n/** The helpdesk inbox; its code loads the first time the inbox is shown. */\nexport const HelpdeskInbox = lazyComponent<{ component: HelpdeskInboxSchema }>(\n  () => import('./inbox').then((module) => module.HelpdeskInbox),\n  () => <HelpdeskInboxSkeleton />,\n)\n"],"mappings":";;;;;;;AAOA,SAAS,wBAAwB;CAC/B,MAAM,IAAI,KAAK;CAEf,OACE,qBAAC,MAAD;EACE,aAAU;EACV,aAAU;EACV,WAAU;EAHZ,UAAA;GAKE,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAE,oBAAoB,CAAC,GAAG,UAAU;GAAQ,CAAA;GACvE,oBAAC,OAAD;IAAK,WAAU;IAAiD,eAAY;IACzE,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC7B,oBAAC,UAAD,EAAsB,WAAU,MAAO,GAAxB,KAAwB,CACxC;GACE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;IAAmC,eAAY;IAA9D,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,MAAO,CAAA,GAC1B,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC7B,oBAAC,UAAD,EAAsB,WAAU,OAAQ,GAAzB,KAAyB,CACzC,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAwC,eAAY;IAAnE,UAAA;KACE,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;KACjC,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA;KAC5B,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA;IACzB;;EACD;;AAEV;;AAGA,MAAa,gBAAgB,oBACrB,OAAO,aAAU,CAAC,MAAM,WAAW,OAAO,aAAa,SACvD,oBAAC,uBAAD,CAAwB,CAAA,CAChC"}