@alfakit/react 0.0.0-stage → 0.1.0

package/dist/context.js

@@ -0,0 +1,115 @@
+import { LocaleFormatter, pollComponent, resolvePanelNavigation, translator } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/context.tsx
+const AlfakitContext = createContext(null);
+const NO_PROPS = {};
+/**
+* The Inertia page props, or an empty object outside an Inertia app (component tests,
+* Storybook, a plain server render of an `<AlfakitComponent>`). `usePage()` only reads a
+* context before throwing, so the hook order is the same on both paths.
+*/
+function useOptionalPageProps() {
+	try {
+		return usePage().props;
+	} catch {
+		return NO_PROPS;
+	}
+}
+const StandaloneContext = createContext(null);
+function StandaloneProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(StandaloneContext.Provider, {
+		value,
+		children
+	});
+}
+function useStandalone() {
+	return useContext(StandaloneContext);
+}
+function AlfakitProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(AlfakitContext.Provider, {
+		value,
+		children
+	});
+}
+function useAlfakit() {
+	const context = useContext(AlfakitContext);
+	if (!context) throw new Error("Alfakit components must be rendered inside createAlfakit().");
+	return context;
+}
+/**
+* The component registry when rendered inside `createAlfakit()`, otherwise null (primitives
+* rendered on their own in tests or Storybook).
+*/
+function useOptionalRegistry() {
+	return useContext(AlfakitContext)?.registry ?? null;
+}
+/** The context the component renders in, or null outside `createAlfakit()` and `<AlfakitComponent>`. */
+function useOptionalAlfakit() {
+	return useContext(AlfakitContext);
+}
+/** The shared `alfakit` prop (panel, navigation, user, endpoints…). */
+function usePanel() {
+	const standalone = useContext(StandaloneContext);
+	const props = useOptionalPageProps();
+	return resolvePanelNavigation(standalone?.panel ?? props.alfakit, props.alfakitNavigationBadges);
+}
+function usePageSchema() {
+	const standalone = useContext(StandaloneContext);
+	const page = useOptionalPageProps().page;
+	return standalone?.page ?? page;
+}
+/** Poll a component (`table`, `widget:<id>`); the returned function stops it. */
+function usePollComponent() {
+	return useContext(AlfakitContext)?.poll ?? pollComponent;
+}
+function useAlfakitProps() {
+	return useOptionalPageProps();
+}
+function useTranslator() {
+	return useContext(AlfakitContext)?.translator ?? translator;
+}
+/** `t('table.showing', { first: 1, last: 10, total: 42 }, 'Fallback')` */
+function useT() {
+	const translator = useTranslator();
+	return translator.t.bind(translator);
+}
+/** Plural-aware lines: `choice('table.selected', 3)` (Laravel `trans_choice` syntax). */
+function useChoice() {
+	const translator = useTranslator();
+	return translator.choice.bind(translator);
+}
+/** The current language, direction, currency, timezone and language list. */
+function useLocalization() {
+	return usePanel().localization;
+}
+function useDirection() {
+	const standalone = useContext(StandaloneContext);
+	const panel = useOptionalPageProps().alfakit;
+	return (standalone?.panel ?? panel)?.localization?.direction ?? "ltr";
+}
+/** `Intl` formatting in the user's locale: `format.money(12.5)`, `format.relative(date)`. */
+function useFormatter() {
+	const standalone = useContext(StandaloneContext);
+	const panel = useOptionalPageProps().alfakit;
+	const localization = (standalone?.panel ?? panel)?.localization;
+	const tag = localization?.tag;
+	const currency = localization?.currency;
+	const timezone = localization?.timezone;
+	return useMemo(() => new LocaleFormatter(tag ?? "en", currency ?? "USD", timezone), [
+		tag,
+		currency,
+		timezone
+	]);
+}
+function useActionRunner() {
+	return useAlfakit().actions;
+}
+function useRegistry() {
+	return useAlfakit().registry;
+}
+//#endregion
+export { AlfakitProvider, StandaloneProvider, useActionRunner, useAlfakit, useAlfakitProps, useChoice, useDirection, useFormatter, useLocalization, useOptionalAlfakit, useOptionalRegistry, usePageSchema, usePanel, usePollComponent, useRegistry, useStandalone, useT };
+
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["globalTranslator"],"sources":["../src/context.tsx"],"sourcesContent":["import {\n  translator as globalTranslator,\n  LocaleFormatter,\n  pollComponent,\n  resolvePanelNavigation,\n  type ActionRunner,\n  type AlfakitPageProps,\n  type ComponentRegistry,\n  type LocalizationSchema,\n  type PageSchema,\n  type PanelSchema,\n  type Translator,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { createContext, useContext, useMemo, type ComponentType, type ReactNode } from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyComponent = ComponentType<any>\n\nexport interface AlfakitContextValue {\n  registry: ComponentRegistry<AnyComponent>\n  pages: Record<string, AnyComponent>\n  actions: ActionRunner\n  translator: Translator\n  /**\n   * Polls a component (`table`, `widget:<id>`) and returns an unsubscribe. Panels use the\n   * shared `pollComponent()` (an Inertia partial reload); components outside panels fetch\n   * their own schemas by token.\n   */\n  poll?: (target: string, interval: string | number | null | undefined) => () => void\n}\n\nconst AlfakitContext = createContext<AlfakitContextValue | null>(null)\n\nconst NO_PROPS: AlfakitPageProps = {} as AlfakitPageProps\n\n/**\n * The Inertia page props, or an empty object outside an Inertia app (component tests,\n * Storybook, a plain server render of an `<AlfakitComponent>`). `usePage()` only reads a\n * context before throwing, so the hook order is the same on both paths.\n */\nfunction useOptionalPageProps(): AlfakitPageProps {\n  try {\n    return usePage<AlfakitPageProps>().props\n  } catch {\n    return NO_PROPS\n  }\n}\n\n/**\n * Outside panels there is no shared `alfakit` prop and no `page` prop: `<AlfakitComponent>`\n * provides both from its payload, and the hooks below read them first.\n */\nexport interface StandaloneContextValue {\n  panel: PanelSchema\n  page: PageSchema\n}\n\nconst StandaloneContext = createContext<StandaloneContextValue | null>(null)\n\nexport function StandaloneProvider({\n  value,\n  children,\n}: {\n  value: StandaloneContextValue\n  children: ReactNode\n}) {\n  return <StandaloneContext.Provider value={value}>{children}</StandaloneContext.Provider>\n}\n\nexport function useStandalone(): StandaloneContextValue | null {\n  return useContext(StandaloneContext)\n}\n\nexport function AlfakitProvider({\n  value,\n  children,\n}: {\n  value: AlfakitContextValue\n  children: ReactNode\n}) {\n  return <AlfakitContext.Provider value={value}>{children}</AlfakitContext.Provider>\n}\n\nexport function useAlfakit(): AlfakitContextValue {\n  const context = useContext(AlfakitContext)\n\n  if (!context) {\n    throw new Error('Alfakit components must be rendered inside createAlfakit().')\n  }\n\n  return context\n}\n\n/**\n * The component registry when rendered inside `createAlfakit()`, otherwise null (primitives\n * rendered on their own in tests or Storybook).\n */\nexport function useOptionalRegistry(): ComponentRegistry<AnyComponent> | null {\n  return useContext(AlfakitContext)?.registry ?? null\n}\n\n/** The context the component renders in, or null outside `createAlfakit()` and `<AlfakitComponent>`. */\nexport function useOptionalAlfakit(): AlfakitContextValue | null {\n  return useContext(AlfakitContext)\n}\n\n/** The shared `alfakit` prop (panel, navigation, user, endpoints…). */\nexport function usePanel(): PanelSchema {\n  const standalone = useContext(StandaloneContext)\n  const props = useOptionalPageProps()\n\n  // The navigation structure is a once prop; its active items and badges are merged in here.\n  return resolvePanelNavigation(standalone?.panel ?? props.alfakit, props.alfakitNavigationBadges)\n}\n\nexport function usePageSchema(): PageSchema | undefined {\n  const standalone = useContext(StandaloneContext)\n  const page = useOptionalPageProps().page\n\n  return standalone?.page ?? page\n}\n\n/** Poll a component (`table`, `widget:<id>`); the returned function stops it. */\nexport function usePollComponent(): NonNullable<AlfakitContextValue['poll']> {\n  return useContext(AlfakitContext)?.poll ?? pollComponent\n}\n\nexport function useAlfakitProps(): AlfakitPageProps {\n  return useOptionalPageProps()\n}\n\nfunction useTranslator(): Translator {\n  // Primitives may render outside createAlfakit() (tests, Storybook); fall back to the\n  // shared translator so they still show their English defaults.\n  return useContext(AlfakitContext)?.translator ?? globalTranslator\n}\n\n/** `t('table.showing', { first: 1, last: 10, total: 42 }, 'Fallback')` */\nexport function useT(): Translator['t'] {\n  const translator = useTranslator()\n\n  return translator.t.bind(translator)\n}\n\n/** Plural-aware lines: `choice('table.selected', 3)` (Laravel `trans_choice` syntax). */\nexport function useChoice(): Translator['choice'] {\n  const translator = useTranslator()\n\n  return translator.choice.bind(translator)\n}\n\n/** The current language, direction, currency, timezone and language list. */\nexport function useLocalization(): LocalizationSchema {\n  return usePanel().localization\n}\n\nexport function useDirection(): 'ltr' | 'rtl' {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n\n  return (standalone?.panel ?? panel)?.localization?.direction ?? 'ltr'\n}\n\n/** `Intl` formatting in the user's locale: `format.money(12.5)`, `format.relative(date)`. */\nexport function useFormatter(): LocaleFormatter {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n  const localization = (standalone?.panel ?? panel)?.localization\n\n  const tag = localization?.tag\n  const currency = localization?.currency\n  const timezone = localization?.timezone\n\n  return useMemo(\n    () => new LocaleFormatter(tag ?? 'en', currency ?? 'USD', timezone),\n    [tag, currency, timezone],\n  )\n}\n\nexport function useActionRunner(): ActionRunner {\n  return useAlfakit().actions\n}\n\nexport function useRegistry(): ComponentRegistry<AnyComponent> {\n  return useAlfakit().registry\n}\n"],"mappings":";;;;;AAgCA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAM,WAA6B,CAAC;;;;;;AAOpC,SAAS,uBAAyC;CAChD,IAAI;EACF,OAAO,QAA0B,CAAC,CAAC;CACrC,QAAQ;EACN,OAAO;CACT;AACF;AAWA,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,SAAgB,mBAAmB,EACjC,OACA,YAIC;CACD,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,gBAA+C;CAC7D,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,gBAAgB,EAC9B,OACA,YAIC;CACD,OAAO,oBAAC,eAAe,UAAhB;EAAgC;EAAQ;CAAkC,CAAA;AACnF;AAEA,SAAgB,aAAkC;CAChD,MAAM,UAAU,WAAW,cAAc;CAEzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,6DAA6D;CAG/E,OAAO;AACT;;;;;AAMA,SAAgB,sBAA8D;CAC5E,OAAO,WAAW,cAAc,CAAC,EAAE,YAAY;AACjD;;AAGA,SAAgB,qBAAiD;CAC/D,OAAO,WAAW,cAAc;AAClC;;AAGA,SAAgB,WAAwB;CACtC,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB;CAGnC,OAAO,uBAAuB,YAAY,SAAS,MAAM,SAAS,MAAM,uBAAuB;AACjG;AAEA,SAAgB,gBAAwC;CACtD,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,OAAO,qBAAqB,CAAC,CAAC;CAEpC,OAAO,YAAY,QAAQ;AAC7B;;AAGA,SAAgB,mBAA6D;CAC3E,OAAO,WAAW,cAAc,CAAC,EAAE,QAAQ;AAC7C;AAEA,SAAgB,kBAAoC;CAClD,OAAO,qBAAqB;AAC9B;AAEA,SAAS,gBAA4B;CAGnC,OAAO,WAAW,cAAc,CAAC,EAAE,cAAcA;AACnD;;AAGA,SAAgB,OAAwB;CACtC,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,EAAE,KAAK,UAAU;AACrC;;AAGA,SAAgB,YAAkC;CAChD,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,OAAO,KAAK,UAAU;AAC1C;;AAGA,SAAgB,kBAAsC;CACpD,OAAO,SAAS,CAAC,CAAC;AACpB;AAEA,SAAgB,eAA8B;CAC5C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CAErC,QAAQ,YAAY,SAAS,MAAA,EAAQ,cAAc,aAAa;AAClE;;AAGA,SAAgB,eAAgC;CAC9C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CACrC,MAAM,gBAAgB,YAAY,SAAS,MAAA,EAAQ;CAEnD,MAAM,MAAM,cAAc;CAC1B,MAAM,WAAW,cAAc;CAC/B,MAAM,WAAW,cAAc;CAE/B,OAAO,cACC,IAAI,gBAAgB,OAAO,MAAM,YAAY,OAAO,QAAQ,GAClE;EAAC;EAAK;EAAU;CAAQ,CAC1B;AACF;AAEA,SAAgB,kBAAgC;CAC9C,OAAO,WAAW,CAAC,CAAC;AACtB;AAEA,SAAgB,cAA+C;CAC7D,OAAO,WAAW,CAAC,CAAC;AACtB"}

package/dist/create-alfakit.d.ts

@@ -0,0 +1,25 @@
+import { AnyComponent } from "./context.js";
+import { AlfakitOptions } from "@alfakit/core";
+import { ReactElement, ReactNode } from "react";
+import { Page } from "@inertiajs/core";
+//#region src/create-alfakit.d.ts
+export interface CreateAlfakitOptions extends AlfakitOptions<AnyComponent> {
+  /** Wrap the whole app (e.g. with your own providers). */
+  withApp?: (app: ReactNode) => ReactNode;
+  strictMode?: boolean;
+}
+/**
+ * Boot the Alfakit panel frontend. Call once from your panel entry file. Markup rendered by
+ * `createAlfakitServer()` (`@alfakit/react/server`) is hydrated instead of re-rendered.
+ *
+ * ```tsx
+ * createAlfakit({
+ *   // Files in resources/js/alfakit/fields, columns, … register themselves.
+ *   discover: import.meta.glob('./{fields,columns,entries,widgets,pages,components,blocks}/**\/*.tsx'),
+ *   components: { 'map-picker': MapPicker },
+ * })
+ * ```
+ */
+export declare function createAlfakit(options?: CreateAlfakitOptions): Promise<void>;
+//#endregion
+//# sourceMappingURL=create-alfakit.d.ts.map

package/dist/create-alfakit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-alfakit.d.ts","names":[],"sources":["../src/create-alfakit.tsx"],"mappings":";;;;;iBAgHiB,6BAA6B,eAAe;;EAE3D,WAAW,KAAK,cAAc;EAC9B;;;;;;;;;;;;;;wBAmLoB,cAAc,UAAS,uBAA4B"}

package/dist/create-alfakit.js

@@ -0,0 +1,182 @@
+import { AlfakitProvider, useAlfakit } from "./context.js";
+import { preloadIcons } from "./lib/icons.js";
+import { TooltipProvider } from "./components/ui/tooltip.js";
+import { discoverComponents } from "./lib/discovery.js";
+import { builtInComponents, createDefaultRegistry } from "./registry.js";
+import { FlashToasts, showToast } from "./components/notifications/flash-toasts.js";
+import { PwaManager } from "./components/panel/pwa.js";
+import { AlfakitPage } from "./pages/page.js";
+import { ActionModals } from "./components/actions/action-modals.js";
+import { RealtimeNotifications } from "./components/notifications/realtime-notifications.js";
+import { ImpersonationBanner } from "./components/panel/impersonation-banner.js";
+import { DevToolsSlot } from "./components/dev-tools/dev-tools-slot.js";
+import { SchemaContractGuard } from "./components/panel/schema-contract-guard.js";
+import { Toaster } from "./components/ui/sonner.js";
+import { ActionRunner, PANEL_TOAST_OFFSET, Translator, applyDocumentLocale, applyPanelTheme, configureCharts, configureRealtime, debugRecorder, effectiveErrorNotifications, initializeAppearance, installErrorNotifications, installPrefetchInvalidation, installSpaUrlExceptions, registerRichEditorExtensions, reloadOnExpiredPage, resolveRequestErrorNotification, resolveToastPosition, setRequestErrorReporter, whenIdle } from "@alfakit/core";
+import { createInertiaApp, router, usePage } from "@inertiajs/react";
+import { StrictMode, createElement, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Direction } from "radix-ui";
+//#region src/create-alfakit.tsx
+/**
+* Rendered inside Inertia's page tree, so it follows the current page: the reading
+* direction for Radix primitives, modals and toasts.
+*/
+function AlfakitRoot({ children, toasterId }) {
+	const panel = usePage().props.alfakit;
+	const { translator, registry } = useAlfakit();
+	const localization = panel?.localization;
+	const direction = localization?.direction ?? "ltr";
+	if (panel) {
+		translator.setTranslations(panel.translations ?? {});
+		translator.setLocale(localization?.tag ?? "en");
+	}
+	useLayoutEffect(() => {
+		applyDocumentLocale(localization);
+	}, [localization]);
+	useLayoutEffect(() => {
+		applyPanelTheme(panel);
+	}, [panel]);
+	return /* @__PURE__ */ jsx(Direction.Provider, {
+		dir: direction,
+		children: /* @__PURE__ */ jsxs(TooltipProvider, {
+			delayDuration: 0,
+			children: [
+				/* @__PURE__ */ jsx(SchemaContractGuard, {
+					panel,
+					children
+				}),
+				/* @__PURE__ */ jsx(ActionModals, {}),
+				/* @__PURE__ */ jsx(FlashToasts, {}),
+				/* @__PURE__ */ jsx(RealtimeNotifications, {}),
+				/* @__PURE__ */ jsx(PwaManager, {}),
+				/* @__PURE__ */ jsx(DevToolsSlot, {}),
+				panel?.impersonation && createElement(registry.resolve("panel:impersonation-banner") ?? ImpersonationBanner, { impersonation: panel.impersonation }),
+				/* @__PURE__ */ jsx(Toaster, {
+					id: toasterId,
+					position: resolveToastPosition(panel?.toastPosition, direction),
+					offset: PANEL_TOAST_OFFSET,
+					mobileOffset: PANEL_TOAST_OFFSET,
+					dir: direction,
+					richColors: true,
+					closeButton: true
+				})
+			]
+		})
+	});
+}
+/**
+* The Inertia app shared by `createAlfakit()` (browser) and `createAlfakitServer()` (Node):
+* the same registry, pages, layout and providers. In the browser it mounts, or hydrates
+* server-rendered markup; on the server (no `window`) Inertia returns a render function.
+*/
+function bootAlfakit(options = {}) {
+	const discovered = discoverComponents(options.discover);
+	const registry = createDefaultRegistry().registerMany(discovered.components).registerMany(options.components ?? {});
+	const pages = {
+		"Alfakit/Page": AlfakitPage,
+		...discovered.pages,
+		...options.pages
+	};
+	const isServer = typeof window === "undefined";
+	preloadIcons();
+	configureCharts(options);
+	if (options.echo !== void 0 && !isServer) configureRealtime(null, { echo: options.echo });
+	registerRichEditorExtensions(options.richEditorExtensions ?? {});
+	let currentPanel = null;
+	let currentErrorNotifications;
+	const createContext = () => {
+		const translator = new Translator();
+		return {
+			registry,
+			pages,
+			translator,
+			actions: new ActionRunner({
+				endpoints: {
+					action: "",
+					modal: ""
+				},
+				onError: (error) => {
+					const notification = resolveRequestErrorNotification(error, currentErrorNotifications, (key, replacements, fallback) => translator.t(key, replacements, fallback));
+					if (notification) showToast(notification);
+				}
+			})
+		};
+	};
+	const browserContext = isServer ? null : createContext();
+	const sync = (context, page, applyToDocument) => {
+		const props = page.props;
+		const panel = props.alfakit;
+		if (!panel) return;
+		if (context === browserContext) {
+			currentPanel = panel;
+			currentErrorNotifications = effectiveErrorNotifications(panel, props.page);
+		}
+		context.translator.setTranslations(panel.translations ?? {});
+		context.translator.setLocale(panel.localization?.tag ?? "en");
+		context.actions.setEndpoints({
+			action: panel.endpoints.action ?? "",
+			modal: panel.endpoints.modal ?? ""
+		});
+		if (applyToDocument) {
+			applyDocumentLocale(panel.localization);
+			applyPanelTheme(panel);
+			debugRecorder.setEnabled(props.alfakitDebug !== void 0);
+		}
+	};
+	if (browserContext) {
+		router.on("navigate", (event) => sync(browserContext, event.detail.page, true));
+		reloadOnExpiredPage();
+		installPrefetchInvalidation();
+		installSpaUrlExceptions(() => currentPanel);
+		installErrorNotifications(() => ({ errorNotifications: currentErrorNotifications }), (notification) => showToast(notification));
+		setRequestErrorReporter((error) => {
+			const notification = resolveRequestErrorNotification(error, currentErrorNotifications, (key, replacements, fallback) => browserContext.translator.t(key, replacements, fallback));
+			if (notification) showToast(notification);
+		});
+	}
+	return createInertiaApp({
+		title: (title) => title,
+		progress: options.progress === void 0 ? { color: "var(--primary)" } : options.progress,
+		resolve: (name, page) => {
+			const component = pages[name];
+			if (!component) throw new Error(`Alfakit: page component "${name}" is not registered. Pass it to createAlfakit({ pages }).`);
+			const pending = [builtInComponents.preloadFor(page), discovered.discovery.preloadFor(page)].filter((promise) => promise !== void 0);
+			return pending.length > 0 ? Promise.all(pending).then(() => component) : component;
+		},
+		layout: () => AlfakitRoot,
+		strictMode: options.strictMode ?? true,
+		withApp: (app, { page, ssr }) => {
+			const context = browserContext ?? createContext();
+			sync(context, page, !ssr);
+			const panel = page.props.alfakit;
+			if (!ssr && panel) initializeAppearance(panel);
+			const tree = /* @__PURE__ */ jsx(AlfakitProvider, {
+				value: context,
+				children: app
+			});
+			const wrapped = options.withApp ? options.withApp(tree) : tree;
+			return options.strictMode === false ? /* @__PURE__ */ jsx(Fragment$1, { children: wrapped }) : /* @__PURE__ */ jsx(StrictMode, { children: wrapped });
+		}
+	});
+}
+/**
+* Boot the Alfakit panel frontend. Call once from your panel entry file. Markup rendered by
+* `createAlfakitServer()` (`@alfakit/react/server`) is hydrated instead of re-rendered.
+*
+* ```tsx
+* createAlfakit({
+*   // Files in resources/js/alfakit/fields, columns, … register themselves.
+*   discover: import.meta.glob('./{fields,columns,entries,widgets,pages,components,blocks}/**\/*.tsx'),
+*   components: { 'map-picker': MapPicker },
+* })
+* ```
+*/
+async function createAlfakit(options = {}) {
+	await bootAlfakit(options);
+	whenIdle(() => void builtInComponents.preloadAll());
+}
+//#endregion
+export { AlfakitRoot, bootAlfakit, createAlfakit };
+
+//# sourceMappingURL=create-alfakit.js.map

package/dist/create-alfakit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-alfakit.js","names":[],"sources":["../src/create-alfakit.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  PANEL_TOAST_OFFSET,\n  Translator,\n  applyDocumentLocale,\n  applyPanelTheme,\n  configureCharts,\n  configureRealtime,\n  debugRecorder,\n  effectiveErrorNotifications,\n  initializeAppearance,\n  installErrorNotifications,\n  installPrefetchInvalidation,\n  installSpaUrlExceptions,\n  registerRichEditorExtensions,\n  reloadOnExpiredPage,\n  resolveRequestErrorNotification,\n  resolveToastPosition,\n  setRequestErrorReporter,\n  whenIdle,\n  type AlfakitOptions,\n  type AlfakitPageProps,\n  type ErrorNotificationsSchema,\n  type PanelSchema,\n} from '@alfakit/core'\nimport type { InertiaAppSSRResponse, Page } from '@inertiajs/core'\nimport { createInertiaApp, router, usePage } from '@inertiajs/react'\nimport { Direction } from 'radix-ui'\nimport {\n  StrictMode,\n  createElement,\n  useLayoutEffect,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { ActionModals } from './components/actions/action-modals'\nimport { DevToolsSlot } from './components/dev-tools/dev-tools-slot'\nimport { FlashToasts, showToast } from './components/notifications/flash-toasts'\nimport { RealtimeNotifications } from './components/notifications/realtime-notifications'\nimport { ImpersonationBanner } from './components/panel/impersonation-banner'\nimport { PwaManager } from './components/panel/pwa'\nimport { SchemaContractGuard } from './components/panel/schema-contract-guard'\nimport { Toaster } from './components/ui/sonner'\nimport { TooltipProvider } from './components/ui/tooltip'\nimport { AlfakitProvider, useAlfakit, type AlfakitContextValue, type AnyComponent } from './context'\nimport { discoverComponents } from './lib/discovery'\nimport { preloadIcons } from './lib/icons'\nimport { AlfakitPage } from './pages/page'\nimport { builtInComponents, createDefaultRegistry } from './registry'\n\n/**\n * Rendered inside Inertia's page tree, so it follows the current page: the reading\n * direction for Radix primitives, modals and toasts.\n */\nexport function AlfakitRoot({\n  children,\n  toasterId,\n}: {\n  children: ReactNode\n  /** Starter kit mode: Alfakit's toaster gets an id so the host's id-less one never doubles its toasts. */\n  toasterId?: string\n}) {\n  const panel = usePage<AlfakitPageProps>().props.alfakit\n  const { translator, registry } = useAlfakit()\n  const localization = panel?.localization\n  const direction = localization?.direction ?? 'ltr'\n\n  // Every visit (including the redirect after a language switch) may carry new strings,\n  // so the translator is updated before children render.\n  if (panel) {\n    translator.setTranslations(panel.translations ?? {})\n    translator.setLocale(localization?.tag ?? 'en')\n  }\n\n  useLayoutEffect(() => {\n    applyDocumentLocale(localization)\n  }, [localization])\n\n  useLayoutEffect(() => {\n    applyPanelTheme(panel)\n  }, [panel])\n\n  return (\n    <Direction.Provider dir={direction}>\n      <TooltipProvider delayDuration={0}>\n        <SchemaContractGuard panel={panel}>{children}</SchemaContractGuard>\n        <ActionModals />\n        <FlashToasts />\n        <RealtimeNotifications />\n        {/* `Panel::pwa()`: service worker and the \"new version\" toast. */}\n        <PwaManager />\n        {/* Schema inspector: renders (and loads its code) only with `alfakitDevTools`. */}\n        <DevToolsSlot />\n        {/* Replace with createAlfakit({ components: { 'panel:impersonation-banner': … } }). */}\n        {panel?.impersonation &&\n          createElement(registry.resolve('panel:impersonation-banner') ?? ImpersonationBanner, {\n            impersonation: panel.impersonation,\n          })}\n        <Toaster\n          id={toasterId}\n          position={resolveToastPosition(panel?.toastPosition, direction)}\n          offset={PANEL_TOAST_OFFSET}\n          mobileOffset={PANEL_TOAST_OFFSET}\n          dir={direction}\n          richColors\n          closeButton\n        />\n      </TooltipProvider>\n    </Direction.Provider>\n  )\n}\n\nexport interface CreateAlfakitOptions extends AlfakitOptions<AnyComponent> {\n  /** Wrap the whole app (e.g. with your own providers). */\n  withApp?: (app: ReactNode) => ReactNode\n  strictMode?: boolean\n}\n\n/** Renders one Inertia page to HTML: what `createInertiaApp` returns on the server. */\nexport type AlfakitRenderFunction = (\n  page: Page,\n  renderToString: (element: ReactElement) => string,\n) => Promise<InertiaAppSSRResponse>\n\n/**\n * The Inertia app shared by `createAlfakit()` (browser) and `createAlfakitServer()` (Node):\n * the same registry, pages, layout and providers. In the browser it mounts, or hydrates\n * server-rendered markup; on the server (no `window`) Inertia returns a render function.\n */\nexport function bootAlfakit(\n  options: CreateAlfakitOptions = {},\n): Promise<void | AlfakitRenderFunction> {\n  // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.\n  const discovered = discoverComponents(options.discover)\n  const registry = createDefaultRegistry()\n    .registerMany(discovered.components)\n    .registerMany(options.components ?? {})\n  const pages: Record<string, AnyComponent> = {\n    'Alfakit/Page': AlfakitPage,\n    ...discovered.pages,\n    ...options.pages,\n  }\n  const isServer = typeof window === 'undefined'\n\n  // Every panel page draws named icons: fetch `lucide-react/dynamic` while booting.\n  preloadIcons()\n\n  // `'js:name'` chart option callbacks and Chart.js plugins for every chart widget.\n  configureCharts(options)\n  // `createAlfakit({ echo })`: Laravel Echo for `Panel::realtime()` without `window.Echo`.\n  if (options.echo !== undefined && !isServer) configureRealtime(null, { echo: options.echo })\n  // Rich content plugin extensions, loaded when an editor needs them.\n  registerRichEditorExtensions(options.richEditorExtensions ?? {})\n\n  // The browser's current panel, read by the SPA-exception and error-notification listeners.\n  let currentPanel: PanelSchema | null = null\n  // The open page's error notifications (its override, else the panel's).\n  let currentErrorNotifications: ErrorNotificationsSchema | false | undefined\n\n  // One translator and action runner for the browser session; a server render gets fresh\n  // ones per request so concurrent renders never share a locale or endpoints.\n  const createContext = (): AlfakitContextValue => {\n    const translator = new Translator()\n\n    return {\n      registry,\n      pages,\n      translator,\n      // The runner's endpoints are refreshed on every navigation from the shared props.\n      actions: new ActionRunner({\n        endpoints: { action: '', modal: '' },\n        // A failed action request is a toast, never a silent no-op.\n        onError: (error) => {\n          const notification = resolveRequestErrorNotification(\n            error,\n            currentErrorNotifications,\n            (key, replacements, fallback) => translator.t(key, replacements, fallback),\n          )\n\n          if (notification) showToast(notification)\n        },\n      }),\n    }\n  }\n\n  const browserContext = isServer ? null : createContext()\n\n  const sync = (context: AlfakitContextValue, page: Page, applyToDocument: boolean) => {\n    const props = page.props as unknown as AlfakitPageProps\n    const panel = props.alfakit\n\n    if (!panel) return\n\n    if (context === browserContext) {\n      currentPanel = panel\n      currentErrorNotifications = effectiveErrorNotifications(panel, props.page)\n    }\n\n    context.translator.setTranslations(panel.translations ?? {})\n    context.translator.setLocale(panel.localization?.tag ?? 'en')\n    context.actions.setEndpoints({\n      action: panel.endpoints.action ?? '',\n      modal: panel.endpoints.modal ?? '',\n    })\n\n    if (applyToDocument) {\n      applyDocumentLocale(panel.localization)\n      applyPanelTheme(panel)\n      // Internal requests and form stores are only recorded while the page carries the debug prop.\n      debugRecorder.setEnabled(props.alfakitDebug !== undefined)\n    }\n  }\n\n  if (browserContext) {\n    router.on('navigate', (event) => sync(browserContext, event.detail.page, true))\n    reloadOnExpiredPage()\n    // Prefetched pages and deferred table totals are dropped after every mutation.\n    installPrefetchInvalidation()\n    installSpaUrlExceptions(() => currentPanel)\n    installErrorNotifications(\n      () => ({ errorNotifications: currentErrorNotifications }),\n      (notification) => showToast(notification),\n    )\n    // Failed internal requests without their own handler (form live refreshes, step\n    // validation) show the configured error notification too.\n    setRequestErrorReporter((error) => {\n      const notification = resolveRequestErrorNotification(\n        error,\n        currentErrorNotifications,\n        (key, replacements, fallback) => browserContext.translator.t(key, replacements, fallback),\n      )\n\n      if (notification) showToast(notification)\n    })\n  }\n\n  return createInertiaApp<AlfakitPageProps>({\n    title: (title) => title,\n    progress: options.progress === undefined ? { color: 'var(--primary)' } : options.progress,\n    resolve: (name, page) => {\n      const component = pages[name]\n\n      if (!component) {\n        throw new Error(\n          `Alfakit: page component \"${name}\" is not registered. Pass it to createAlfakit({ pages }).`,\n        )\n      }\n\n      // The page's auto-registered components load first, so the server render and the\n      // hydration both show them (no flash, no mismatch).\n      // Built-ins split per type (`builtInComponents`) load the same way.\n      const pending = [\n        builtInComponents.preloadFor(page),\n        discovered.discovery.preloadFor(page),\n      ].filter((promise) => promise !== undefined)\n\n      return pending.length > 0 ? Promise.all(pending).then(() => component) : component\n    },\n    layout: () => AlfakitRoot,\n    strictMode: options.strictMode ?? true,\n    withApp: (app, { page, ssr }) => {\n      const context = browserContext ?? createContext()\n\n      sync(context, page as Page, !ssr)\n\n      // Panel pages only: other pages (`pages` option) follow the application's own dark\n      // mode, like standalone components do.\n      const panel = (page.props as unknown as Partial<AlfakitPageProps>).alfakit\n\n      if (!ssr && panel) {\n        initializeAppearance(panel)\n      }\n\n      const tree = <AlfakitProvider value={context}>{app}</AlfakitProvider>\n\n      const wrapped = options.withApp ? options.withApp(tree) : tree\n\n      return options.strictMode === false ? <>{wrapped}</> : <StrictMode>{wrapped}</StrictMode>\n    },\n  }) as Promise<void | AlfakitRenderFunction>\n}\n\n/**\n * Boot the Alfakit panel frontend. Call once from your panel entry file. Markup rendered by\n * `createAlfakitServer()` (`@alfakit/react/server`) is hydrated instead of re-rendered.\n *\n * ```tsx\n * createAlfakit({\n *   // Files in resources/js/alfakit/fields, columns, … register themselves.\n *   discover: import.meta.glob('./{fields,columns,entries,widgets,pages,components,blocks}/**\\/*.tsx'),\n *   components: { 'map-picker': MapPicker },\n * })\n * ```\n */\nexport async function createAlfakit(options: CreateAlfakitOptions = {}): Promise<void> {\n  await bootAlfakit(options)\n\n  // After the first render: the remaining split built-ins (action modals' fields).\n  whenIdle(() => void builtInComponents.preloadAll())\n}\n"],"mappings":"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"}