@alfakit/react 0.0.0-stage → 0.1.0

package/dist/lib/icons.js

@@ -0,0 +1,93 @@
+import { useOptionalRegistry } from "../context.js";
+import { cn } from "./utils.js";
+import { iconAlias, iconAliasOverride, iconSource, isIconAlias } from "@alfakit/core";
+import { createElement, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/icons.tsx
+/**
+* `lucide-react/dynamic` carries a lazy import for every Lucide icon (~2,000 entries), so it
+* is not part of any entry chunk: panels (`createAlfakit()`, starter kit pages) start loading
+* it while they boot, since every page draws named icons, and elsewhere (a host's sidebar)
+* it loads with the first icon. Named icons render asynchronously either way.
+*/
+let dynamicIcon;
+let pendingDynamicIcon;
+function loadDynamicIcon() {
+	pendingDynamicIcon ??= import("lucide-react/dynamic.mjs").then((module) => dynamicIcon = module.DynamicIcon, (error) => {
+		pendingDynamicIcon = void 0;
+		throw error;
+	});
+	return pendingDynamicIcon;
+}
+/** Start loading `lucide-react/dynamic` ahead of the first named icon (browser only). */
+function preloadIcons() {
+	if (typeof window !== "undefined") loadDynamicIcon().catch(() => void 0);
+}
+/** `DynamicIcon`, rendering its `fallback` (or nothing) until `lucide-react/dynamic` loads. */
+function LazyDynamicIcon(props) {
+	const [Dynamic, setDynamic] = useState(() => dynamicIcon);
+	useEffect(() => {
+		if (Dynamic) return;
+		let active = true;
+		loadDynamicIcon().then((component) => active && setDynamic(() => component), () => void 0);
+		return () => {
+			active = false;
+		};
+	}, [Dynamic]);
+	if (Dynamic) return /* @__PURE__ */ jsx(Dynamic, { ...props });
+	return props.fallback ? createElement(props.fallback) : null;
+}
+/**
+* Renders an icon resolved by the server (`Icons::resolve()`): a Lucide name (`users`,
+* `shopping-cart`), an image URL or sanitised `<svg>` markup. `alfakit::` aliases use the
+* app's replacement (`Icons::register()`) or `fallback`. Unknown Lucide names fall back to
+* `fallback`, if any. `fallback` may also be a statically imported glyph
+* (`fallback={SearchIcon}`): renderer chrome uses it so an unreplaced alias draws at once,
+* without loading anything. Register a `panel:icon` component
+* (`createAlfakit({ components: { 'panel:icon': MyIcon } })`) to render every named icon
+* with another icon set; it receives `name`, `fallback` and `className`.
+*/
+function Icon({ name, fallback: fallbackProp, className, ...props }) {
+	const Custom = useOptionalRegistry()?.resolve("panel:icon");
+	if (!name) return null;
+	const classes = cn("size-4 shrink-0", className);
+	const Glyph = typeof fallbackProp === "string" ? void 0 : fallbackProp;
+	const fallback = typeof fallbackProp === "string" ? fallbackProp : void 0;
+	if (Glyph && isIconAlias(name) && iconAliasOverride(name) === void 0) return /* @__PURE__ */ jsx(Glyph, {
+		className: classes,
+		...props
+	});
+	const source = iconSource(iconAlias(name, fallback));
+	if (source.type === "svg") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "icon",
+		className: cn("inline-flex [&>svg]:size-full", classes),
+		dangerouslySetInnerHTML: { __html: source.svg }
+	});
+	if (source.type === "url") return /* @__PURE__ */ jsx("img", {
+		src: source.url,
+		alt: "",
+		"aria-hidden": "true",
+		"data-slot": "icon",
+		className: cn("object-contain", classes)
+	});
+	if (Custom) return createElement(Custom, {
+		name: source.name,
+		fallback,
+		className: classes,
+		...props
+	});
+	return /* @__PURE__ */ jsx(LazyDynamicIcon, {
+		name: source.name,
+		className: classes,
+		fallback: Glyph ? () => /* @__PURE__ */ jsx(Glyph, { className: classes }) : fallback ? () => /* @__PURE__ */ jsx(LazyDynamicIcon, {
+			name: fallback,
+			className: classes
+		}) : void 0,
+		...props
+	});
+}
+//#endregion
+export { Icon, preloadIcons };
+
+//# sourceMappingURL=icons.js.map

package/dist/lib/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/lib/icons.tsx"],"sourcesContent":["import { iconAlias, iconAliasOverride, iconSource, isIconAlias } from '@alfakit/core'\nimport type { LucideProps } from 'lucide-react'\nimport type { DynamicIcon, IconName as LucideIconName } from 'lucide-react/dynamic.mjs'\nimport { createElement, useEffect, useState, type ComponentProps, type ComponentType } from 'react'\nimport { useOptionalRegistry } from '../context'\nimport { cn } from './utils'\n\ntype DynamicIconComponent = typeof DynamicIcon\n\n/**\n * `lucide-react/dynamic` carries a lazy import for every Lucide icon (~2,000 entries), so it\n * is not part of any entry chunk: panels (`createAlfakit()`, starter kit pages) start loading\n * it while they boot, since every page draws named icons, and elsewhere (a host's sidebar)\n * it loads with the first icon. Named icons render asynchronously either way.\n */\nlet dynamicIcon: DynamicIconComponent | undefined\nlet pendingDynamicIcon: Promise<DynamicIconComponent> | undefined\n\nfunction loadDynamicIcon(): Promise<DynamicIconComponent> {\n  pendingDynamicIcon ??= import('lucide-react/dynamic.mjs').then(\n    (module) => (dynamicIcon = module.DynamicIcon),\n    (error: unknown) => {\n      pendingDynamicIcon = undefined\n\n      throw error\n    },\n  )\n\n  return pendingDynamicIcon\n}\n\n/** Start loading `lucide-react/dynamic` ahead of the first named icon (browser only). */\nexport function preloadIcons(): void {\n  if (typeof window !== 'undefined') loadDynamicIcon().catch(() => undefined)\n}\n\n/** `DynamicIcon`, rendering its `fallback` (or nothing) until `lucide-react/dynamic` loads. */\nfunction LazyDynamicIcon(props: ComponentProps<DynamicIconComponent>) {\n  const [Dynamic, setDynamic] = useState(() => dynamicIcon)\n\n  useEffect(() => {\n    if (Dynamic) return\n\n    let active = true\n\n    loadDynamicIcon().then(\n      (component) => active && setDynamic(() => component),\n      () => undefined,\n    )\n\n    return () => {\n      active = false\n    }\n  }, [Dynamic])\n\n  if (Dynamic) return <Dynamic {...props} />\n\n  return props.fallback ? createElement(props.fallback) : null\n}\n\n/** A statically imported glyph (`SearchIcon` from `lucide-react`). */\nexport type IconGlyph = ComponentType<LucideProps>\n\nexport type IconProps = Omit<ComponentProps<DynamicIconComponent>, 'name' | 'fallback'> & {\n  name?: string | null\n  fallback?: LucideIconName | IconGlyph\n}\n\n/**\n * Renders an icon resolved by the server (`Icons::resolve()`): a Lucide name (`users`,\n * `shopping-cart`), an image URL or sanitised `<svg>` markup. `alfakit::` aliases use the\n * app's replacement (`Icons::register()`) or `fallback`. Unknown Lucide names fall back to\n * `fallback`, if any. `fallback` may also be a statically imported glyph\n * (`fallback={SearchIcon}`): renderer chrome uses it so an unreplaced alias draws at once,\n * without loading anything. Register a `panel:icon` component\n * (`createAlfakit({ components: { 'panel:icon': MyIcon } })`) to render every named icon\n * with another icon set; it receives `name`, `fallback` and `className`.\n */\nexport function Icon({ name, fallback: fallbackProp, className, ...props }: IconProps) {\n  const Custom = useOptionalRegistry()?.resolve('panel:icon')\n\n  if (!name) {\n    return null\n  }\n\n  const classes = cn('size-4 shrink-0', className)\n  const Glyph = typeof fallbackProp === 'string' ? undefined : fallbackProp\n  const fallback = typeof fallbackProp === 'string' ? fallbackProp : undefined\n\n  // Chrome icons (`<Icon name=\"alfakit::…\" fallback={SearchIcon} />`) draw their bundled\n  // glyph synchronously unless the app replaced the alias with `Icons::register()`.\n  if (Glyph && isIconAlias(name) && iconAliasOverride(name) === undefined) {\n    return <Glyph className={classes} {...props} />\n  }\n\n  const source = iconSource(iconAlias(name, fallback))\n\n  if (source.type === 'svg') {\n    return (\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n        className={cn('inline-flex [&>svg]:size-full', classes)}\n        // Sanitised on the server (SvgSanitizer): drawing elements only.\n        dangerouslySetInnerHTML={{ __html: source.svg }}\n      />\n    )\n  }\n\n  if (source.type === 'url') {\n    return (\n      <img\n        src={source.url}\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n        className={cn('object-contain', classes)}\n      />\n    )\n  }\n\n  if (Custom) {\n    return createElement(Custom, {\n      name: source.name,\n      fallback,\n      className: classes,\n      ...props,\n    })\n  }\n\n  return (\n    <LazyDynamicIcon\n      name={source.name as LucideIconName}\n      className={classes}\n      fallback={\n        Glyph\n          ? () => <Glyph className={classes} />\n          : fallback\n            ? () => <LazyDynamicIcon name={fallback} className={classes} />\n            : undefined\n      }\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,IAAI;AACJ,IAAI;AAEJ,SAAS,kBAAiD;CACxD,uBAAuB,OAAO,2BAA2B,CAAC,MACvD,WAAY,cAAc,OAAO,cACjC,UAAmB;EAClB,qBAAqB,KAAA;EAErB,MAAM;CACR,CACF;CAEA,OAAO;AACT;;AAGA,SAAgB,eAAqB;CACnC,IAAI,OAAO,WAAW,aAAa,gBAAgB,CAAC,CAAC,YAAY,KAAA,CAAS;AAC5E;;AAGA,SAAS,gBAAgB,OAA6C;CACpE,MAAM,CAAC,SAAS,cAAc,eAAe,WAAW;CAExD,gBAAgB;EACd,IAAI,SAAS;EAEb,IAAI,SAAS;EAEb,gBAAgB,CAAC,CAAC,MACf,cAAc,UAAU,iBAAiB,SAAS,SAC7C,KAAA,CACR;EAEA,aAAa;GACX,SAAS;EACX;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,SAAS,OAAO,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;CAEzC,OAAO,MAAM,WAAW,cAAc,MAAM,QAAQ,IAAI;AAC1D;;;;;;;;;;;AAoBA,SAAgB,KAAK,EAAE,MAAM,UAAU,cAAc,WAAW,GAAG,SAAoB;CACrF,MAAM,SAAS,oBAAoB,CAAC,EAAE,QAAQ,YAAY;CAE1D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,UAAU,GAAG,mBAAmB,SAAS;CAC/C,MAAM,QAAQ,OAAO,iBAAiB,WAAW,KAAA,IAAY;CAC7D,MAAM,WAAW,OAAO,iBAAiB,WAAW,eAAe,KAAA;CAInE,IAAI,SAAS,YAAY,IAAI,KAAK,kBAAkB,IAAI,MAAM,KAAA,GAC5D,OAAO,oBAAC,OAAD;EAAO,WAAW;EAAS,GAAI;CAAQ,CAAA;CAGhD,MAAM,SAAS,WAAW,UAAU,MAAM,QAAQ,CAAC;CAEnD,IAAI,OAAO,SAAS,OAClB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,aAAU;EACV,WAAW,GAAG,iCAAiC,OAAO;EAEtD,yBAAyB,EAAE,QAAQ,OAAO,IAAI;CAC/C,CAAA;CAIL,IAAI,OAAO,SAAS,OAClB,OACE,oBAAC,OAAD;EACE,KAAK,OAAO;EACZ,KAAI;EACJ,eAAY;EACZ,aAAU;EACV,WAAW,GAAG,kBAAkB,OAAO;CACxC,CAAA;CAIL,IAAI,QACF,OAAO,cAAc,QAAQ;EAC3B,MAAM,OAAO;EACb;EACA,WAAW;EACX,GAAG;CACL,CAAC;CAGH,OACE,oBAAC,iBAAD;EACE,MAAM,OAAO;EACb,WAAW;EACX,UACE,cACU,oBAAC,OAAD,EAAO,WAAW,QAAU,CAAA,IAClC,iBACQ,oBAAC,iBAAD;GAAiB,MAAM;GAAU,WAAW;EAAU,CAAA,IAC5D,KAAA;EAER,GAAI;CACL,CAAA;AAEL"}

package/dist/lib/lazy.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType, ReactNode } from "react";
+//#region src/lib/lazy.d.ts
+export type LazyComponent<P extends object> = ComponentType<P> & {
+  /** Start loading the component's code ahead of its first render. */
+  preload(): Promise<void>;
+};
+//#endregion
+//# sourceMappingURL=lazy.d.ts.map

package/dist/lib/lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.d.ts","names":[],"sources":["../../src/lib/lazy.tsx"],"mappings":";;YAWY,cAAc,oBAAoB,cAAc;;EAE1D,WAAW"}

package/dist/lib/lazy.js

@@ -0,0 +1,47 @@
+import { createElement, useEffect, useState, useSyncExternalStore } from "react";
+//#region src/lib/lazy.tsx
+const subscribe = () => () => {};
+/**
+* A component whose code (and heavy dependencies such as Tiptap or Chart.js) loads on
+* first use. The server render and hydration show `fallback` and never start the import;
+* client-side renders load it straight away.
+*
+* Deliberately not `React.lazy` + `<Suspense>`: React throttles revealing a suspended
+* boundary's content by up to 300 ms after its fallback was shown, which delayed every
+* dashboard chart by that much once Chart.js had already arrived. A loaded component
+* renders directly; one still loading swaps in through state as soon as its code arrives.
+*/
+function lazyComponent(load, fallback) {
+	let loading;
+	let loaded;
+	const preload = () => loading ??= load().then((component) => {
+		loaded = component;
+		return component;
+	});
+	function LazyLoaded(props) {
+		const client = useSyncExternalStore(subscribe, () => true, () => false);
+		const [state, setState] = useState(() => ({ component: loaded }));
+		const component = state.component ?? (client ? loaded : void 0);
+		if (client && !component) preload().catch(() => void 0);
+		useEffect(() => {
+			if (component) return;
+			let active = true;
+			preload().then((resolved) => {
+				if (active) setState({ component: resolved });
+			}, (error) => {
+				if (active) setState({ error: error ?? /* @__PURE__ */ new Error("Failed to load component") });
+			});
+			return () => {
+				active = false;
+			};
+		}, [component]);
+		if (state.error !== void 0) throw state.error;
+		if (!client || !component) return fallback(props);
+		return createElement(component, props);
+	}
+	return Object.assign(LazyLoaded, { preload: () => preload().then(() => void 0) });
+}
+//#endregion
+export { lazyComponent };
+
+//# sourceMappingURL=lazy.js.map

package/dist/lib/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","names":[],"sources":["../../src/lib/lazy.tsx"],"sourcesContent":["import {\n  createElement,\n  useEffect,\n  useState,\n  useSyncExternalStore,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\n\nconst subscribe = () => () => {}\n\nexport type LazyComponent<P extends object> = ComponentType<P> & {\n  /** Start loading the component's code ahead of its first render. */\n  preload(): Promise<void>\n}\n\n/**\n * A component whose code (and heavy dependencies such as Tiptap or Chart.js) loads on\n * first use. The server render and hydration show `fallback` and never start the import;\n * client-side renders load it straight away.\n *\n * Deliberately not `React.lazy` + `<Suspense>`: React throttles revealing a suspended\n * boundary's content by up to 300 ms after its fallback was shown, which delayed every\n * dashboard chart by that much once Chart.js had already arrived. A loaded component\n * renders directly; one still loading swaps in through state as soon as its code arrives.\n */\nexport function lazyComponent<P extends object>(\n  load: () => Promise<ComponentType<P>>,\n  fallback: (props: P) => ReactNode,\n): LazyComponent<P> {\n  let loading: Promise<ComponentType<P>> | undefined\n  let loaded: ComponentType<P> | undefined\n  const preload = () =>\n    (loading ??= load().then((component) => {\n      loaded = component\n\n      return component\n    }))\n\n  function LazyLoaded(props: P) {\n    const client = useSyncExternalStore(\n      subscribe,\n      () => true,\n      () => false,\n    )\n    const [state, setState] = useState<{ component?: ComponentType<P>; error?: unknown }>(() => ({\n      component: loaded,\n    }))\n    const component = state.component ?? (client ? loaded : undefined)\n\n    if (client && !component) {\n      void preload().catch(() => undefined)\n    }\n\n    useEffect(() => {\n      if (component) {\n        return\n      }\n\n      let active = true\n\n      preload().then(\n        (resolved) => {\n          if (active) setState({ component: resolved })\n        },\n        (error: unknown) => {\n          // Rethrown while rendering so the nearest error boundary handles a failed import.\n          if (active) setState({ error: error ?? new Error('Failed to load component') })\n        },\n      )\n\n      return () => {\n        active = false\n      }\n    }, [component])\n\n    if (state.error !== undefined) {\n      throw state.error\n    }\n\n    if (!client || !component) {\n      return fallback(props)\n    }\n\n    return createElement(component, props)\n  }\n\n  return Object.assign(LazyLoaded, { preload: () => preload().then(() => undefined) })\n}\n"],"mappings":";;AASA,MAAM,wBAAwB,CAAC;;;;;;;;;;;AAiB/B,SAAgB,cACd,MACA,UACkB;CAClB,IAAI;CACJ,IAAI;CACJ,MAAM,gBACH,YAAY,KAAK,CAAC,CAAC,MAAM,cAAc;EACtC,SAAS;EAET,OAAO;CACT,CAAC;CAEH,SAAS,WAAW,OAAU;EAC5B,MAAM,SAAS,qBACb,iBACM,YACA,KACR;EACA,MAAM,CAAC,OAAO,YAAY,gBAAmE,EAC3F,WAAW,OACb,EAAE;EACF,MAAM,YAAY,MAAM,cAAc,SAAS,SAAS,KAAA;EAExD,IAAI,UAAU,CAAC,WACb,QAAa,CAAC,CAAC,YAAY,KAAA,CAAS;EAGtC,gBAAgB;GACd,IAAI,WACF;GAGF,IAAI,SAAS;GAEb,QAAQ,CAAC,CAAC,MACP,aAAa;IACZ,IAAI,QAAQ,SAAS,EAAE,WAAW,SAAS,CAAC;GAC9C,IACC,UAAmB;IAElB,IAAI,QAAQ,SAAS,EAAE,OAAO,yBAAS,IAAI,MAAM,0BAA0B,EAAE,CAAC;GAChF,CACF;GAEA,aAAa;IACX,SAAS;GACX;EACF,GAAG,CAAC,SAAS,CAAC;EAEd,IAAI,MAAM,UAAU,KAAA,GAClB,MAAM,MAAM;EAGd,IAAI,CAAC,UAAU,CAAC,WACd,OAAO,SAAS,KAAK;EAGvB,OAAO,cAAc,WAAW,KAAK;CACvC;CAEA,OAAO,OAAO,OAAO,YAAY,EAAE,eAAe,QAAQ,CAAC,CAAC,WAAW,KAAA,CAAS,EAAE,CAAC;AACrF"}

package/dist/lib/new-tab-hint.js

@@ -0,0 +1,15 @@
+import { useT } from "../context.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/lib/new-tab-hint.tsx
+/** Screen-reader text for a link that opens in a new tab. */
+function NewTabHint() {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [" ", t("opens_in_new_tab", {}, "(opens in a new tab)")]
+	});
+}
+//#endregion
+export { NewTabHint };
+
+//# sourceMappingURL=new-tab-hint.js.map

package/dist/lib/new-tab-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-tab-hint.js","names":[],"sources":["../../src/lib/new-tab-hint.tsx"],"sourcesContent":["import { useT } from '../context'\n\n/** Screen-reader text for a link that opens in a new tab. */\nexport function NewTabHint() {\n  const t = useT()\n\n  return <span className=\"sr-only\"> {t('opens_in_new_tab', {}, '(opens in a new tab)')}</span>\n}\n"],"mappings":";;;;AAGA,SAAgB,aAAa;CAC3B,MAAM,IAAI,KAAK;CAEf,OAAO,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CAA0B,KAAE,EAAE,oBAAoB,CAAC,GAAG,sBAAsB,CAAQ;;AAC7F"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from "clsx";
+//#region src/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/lib/utils.ts"],"mappings":";;wBAGgB,MAAM,QAAQ"}

package/dist/lib/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAGA,SAAgB,GAAG,GAAG,QAA8B;CAClD,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/pages/page.d.ts

@@ -0,0 +1,23 @@
+import { ContentBlock, PageSchema } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/pages/page.d.ts
+/**
+ * `Alfakit/Page`: renders any schema-driven page. Custom pages (`Page::$component`) are
+ * resolved from the `pages` map passed to `createAlfakit()`.
+ */
+export declare function AlfakitPage(): import("react").JSX.Element | null;
+export declare function PageShell({ page, children }: {
+  page: PageSchema;
+  children: ReactNode;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function PageHeader({ page }: {
+  page: PageSchema;
+}): import("react").JSX.Element;
+export declare function PageContent({ page }: {
+  page: PageSchema;
+}): import("react").JSX.Element;
+export declare function ContentBlockRenderer({ block }: {
+  block: ContentBlock;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=page.d.ts.map

package/dist/pages/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","names":[],"sources":["../../src/pages/page.tsx"],"mappings":";;;;;;;wBA8DgB,+BAAW,IAAA;wBA8EX,YAAY,MAAM;EAAc,MAAM;EAAY,UAAU;oBAAW,2CAAA;wBA+CvE,aAAa;EAAU,MAAM;oBAAY,IAAA;wBA4DzC,cAAc;EAAU,MAAM;oBAAY,IAAA;wBAU1C,uBAAuB;EAAW,OAAO;oBAAc,IAAA"}

package/dist/pages/page.js

@@ -0,0 +1,328 @@
+import { useActionRunner, useAlfakit, useAlfakitProps, usePanel, useT } from "../context.js";
+import { PageActionProvider } from "../components/actions/action-context.js";
+import { cn } from "../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../lib/colors.js";
+import { Icon } from "../lib/icons.js";
+import { Badge } from "../components/ui/badge.js";
+import { ActionList } from "../components/actions/action-list.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs.js";
+import { SchemaRenderer } from "../components/schema/schema-renderer.js";
+import { FormBlock as FormBlock$1 } from "../components/form/form-block.js";
+import { KeyboardShortcuts } from "../components/panel/keyboard-shortcuts.js";
+import { LazyPlaceholder } from "../components/panel/lazy-placeholder.js";
+import { Slot } from "../components/panel/slot.js";
+import { SubNavigationLayout } from "../components/panel/sub-navigation.js";
+import { ConflictBanner } from "../components/realtime/conflict-banner.js";
+import { RecordPresence } from "../components/realtime/record-presence.js";
+import { ListTabs, ListTabsPanel } from "../components/table/list-tabs.js";
+import { DataTable } from "../components/table/table-block.js";
+import { WidgetGrid } from "../components/widgets/widgets-block.js";
+import { AppLayout } from "../layouts/app-layout.js";
+import { AuthLayout } from "../layouts/auth-layout.js";
+import { BlankLayout } from "../layouts/blank-layout.js";
+import { FullscreenLayout } from "../layouts/fullscreen-layout.js";
+import { RELATION_QUERY_KEY, applyBodyAttributes, hasRelationManagerTabs, isLazyPlaceholder, openDefaultAction, relationManagerTabs, relationTabFromQuery, relationTabSlug, resolveLazyComponents } from "@alfakit/core";
+import { Head, Link, usePage } from "@inertiajs/react";
+import { Fragment, createElement, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/page.tsx
+/**
+* `Alfakit/Page`: renders any schema-driven page. Custom pages (`Page::$component`) are
+* resolved from the `pages` map passed to `createAlfakit()`.
+*/
+function AlfakitPage() {
+	const props = useAlfakitProps();
+	const panel = usePanel();
+	const t = useT();
+	const { pages } = useAlfakit();
+	const page = useMemo(() => props.page ? resolveLazyComponents(props.page, props.alfakitLazy) : void 0, [props.page, props.alfakitLazy]);
+	useDefaultAction(page);
+	if (!page) return null;
+	const title = panel.starterKit ? page.title : `${page.title} - ${panel.brandName}`;
+	if (page.view) {
+		const Custom = pages[page.view.component];
+		if (!Custom) return /* @__PURE__ */ jsx("div", {
+			className: "text-destructive p-6",
+			children: t("page_not_registered", { component: page.view.component }, `Page component ${page.view.component} is not registered in createAlfakit({ pages }).`)
+		});
+		return /* @__PURE__ */ jsxs(PageActionProvider, {
+			value: {
+				token: page.token,
+				component: "page"
+			},
+			children: [/* @__PURE__ */ jsx(Head, { title }), /* @__PURE__ */ jsx(PageShell, {
+				page,
+				children: /* @__PURE__ */ jsx(Custom, {
+					...page.view.props,
+					page
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs(PageActionProvider, {
+		value: {
+			token: page.token,
+			component: "page"
+		},
+		children: [/* @__PURE__ */ jsx(Head, { title }), /* @__PURE__ */ jsx(PageShell, {
+			page,
+			children: /* @__PURE__ */ jsx(PageContent, { page })
+		})]
+	});
+}
+/**
+* Opens the page's default action (`$defaultAction`, `?tableAction=`) once the page has
+* hydrated, and once per page: re-renders after the action ran don't open it again.
+*/
+function useDefaultAction(page) {
+	const runner = useActionRunner();
+	const opener = useRef({ opened: null });
+	useEffect(() => {
+		openDefaultAction(page, opener.current, (action, context) => runner.trigger(action, context));
+	}, [page, runner]);
+}
+/** Sets the page's `$extraBodyAttributes` on `<body>` while it is open. */
+function useBodyAttributes(attributes) {
+	const key = attributes ? JSON.stringify(attributes) : "";
+	useEffect(() => applyBodyAttributes(key ? JSON.parse(key) : void 0), [key]);
+}
+function PageShell({ page, children }) {
+	const { registry } = useAlfakit();
+	useBodyAttributes(page.extraBodyAttributes);
+	if (page.layout === "auth") return createElement(registry.resolve("layout:auth") ?? AuthLayout, {
+		heading: page.heading ?? page.title,
+		subheading: page.subheading,
+		page
+	}, children);
+	if (page.layout === "blank") return createElement(registry.resolve("layout:blank") ?? BlankLayout, { page }, children);
+	if (page.layout === "fullscreen") return createElement(registry.resolve("layout:fullscreen") ?? FullscreenLayout, { page }, children);
+	return createElement(registry.resolve("layout:app") ?? AppLayout, {
+		breadcrumbs: page.breadcrumbs,
+		maxContentWidth: page.maxContentWidth,
+		page
+	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(KeyboardShortcuts, {}),
+		/* @__PURE__ */ jsx(Slot, { name: "page.start" }),
+		/* @__PURE__ */ jsx(PageHeader, { page }),
+		page.conflicts && createElement(registry.resolve("page:conflict-banner") ?? ConflictBanner, { page }),
+		page.subNavigation ? /* @__PURE__ */ jsx(SubNavigationLayout, {
+			navigation: page.subNavigation,
+			children
+		}) : children,
+		/* @__PURE__ */ jsx(Slot, { name: "page.end" })
+	] }));
+}
+function PageHeader({ page }) {
+	const { registry } = useAlfakit();
+	const actions = page.headerActions ?? [];
+	const alignment = page.headerActionsAlignment;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Slot, { name: "page.header.before" }),
+		/* @__PURE__ */ jsxs("header", {
+			"data-slot": "page-header",
+			"data-actions-alignment": alignment,
+			className: cn("flex flex-col gap-4", !alignment && "sm:flex-row sm:items-start sm:justify-between"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [
+					/* @__PURE__ */ jsx(Slot, { name: "page.heading.before" }),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: page.heading ?? page.title
+					}),
+					page.subheading && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-1 text-sm",
+						children: page.subheading
+					}),
+					/* @__PURE__ */ jsx(Slot, { name: "page.heading.after" })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn("flex shrink-0 flex-wrap items-center gap-2", alignment === "start" ? "justify-start" : alignment === "center" ? "justify-center" : alignment === "between" || alignment === "justify" ? "justify-between" : "justify-end"),
+				children: [
+					page.presence && createElement(registry.resolve("page:presence") ?? RecordPresence, { presence: page.presence }),
+					/* @__PURE__ */ jsx(Slot, { name: "page.actions.before" }),
+					actions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+						actions,
+						context: {
+							token: page.token,
+							component: "page"
+						},
+						align: "end",
+						className: "max-w-full shrink-0"
+					}),
+					/* @__PURE__ */ jsx(Slot, { name: "page.actions.after" })
+				]
+			})]
+		}),
+		/* @__PURE__ */ jsx(Slot, { name: "page.header.after" })
+	] });
+}
+function PageContent({ page }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-6",
+		children: page.content.map((block) => /* @__PURE__ */ jsx(ContentBlockRenderer, { block }, block.key))
+	});
+}
+function ContentBlockRenderer({ block }) {
+	const { registry } = useAlfakit();
+	const tabsIdBase = `alfakit-list-tabs-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+	switch (block.type) {
+		case "Form": return /* @__PURE__ */ jsx(FormBlock$1, { block });
+		case "Infolist": return /* @__PURE__ */ jsx("div", {
+			"data-slot": "infolist",
+			className: "contents",
+			children: /* @__PURE__ */ jsx(SchemaRenderer, {
+				components: block.components,
+				columns: {
+					default: 1,
+					lg: 2
+				}
+			})
+		});
+		case "Schema": return /* @__PURE__ */ jsx(SchemaRenderer, {
+			components: block.components,
+			columns: { default: 1 }
+		});
+		case "Table": {
+			const table = block;
+			const content = table.tabs?.length ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ jsx(ListTabs, {
+					tabs: table.tabs,
+					activeTab: table.activeTab,
+					tabsQueryKey: table.tabsQueryKey,
+					label: table.pluralModelLabel,
+					idBase: tabsIdBase
+				}), /* @__PURE__ */ jsx(ListTabsPanel, {
+					idBase: tabsIdBase,
+					activeTab: table.activeTab,
+					children: /* @__PURE__ */ jsx(DataTable, {
+						table,
+						component: table.component
+					})
+				})]
+			}) : /* @__PURE__ */ jsx(DataTable, {
+				table,
+				component: table.component
+			});
+			if (block.key !== "table") return content;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "resource.list-records.table.before" }),
+				/* @__PURE__ */ jsx(Slot, { name: "resource.manage-related-records.table.before" }),
+				content,
+				/* @__PURE__ */ jsx(Slot, { name: "resource.manage-related-records.table.after" }),
+				/* @__PURE__ */ jsx(Slot, { name: "resource.list-records.table.after" })
+			] });
+		}
+		case "RelationManagers": return /* @__PURE__ */ jsx(RelationManagers, { block });
+		case "Widgets": return block.key === "headerWidgets" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Slot, { name: "page.header-widgets.before" }),
+			/* @__PURE__ */ jsx(WidgetGrid, { block }),
+			/* @__PURE__ */ jsx(Slot, { name: "page.header-widgets.after" })
+		] }) : block.key === "footerWidgets" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Slot, { name: "page.footer-widgets.before" }),
+			/* @__PURE__ */ jsx(WidgetGrid, { block }),
+			/* @__PURE__ */ jsx(Slot, { name: "page.footer-widgets.after" })
+		] }) : /* @__PURE__ */ jsx(WidgetGrid, { block });
+		case "Links": return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col items-center gap-1 text-center text-sm",
+			children: block.links.map((link) => /* @__PURE__ */ jsx(Link, {
+				href: link.url,
+				className: "text-primary underline-offset-4 hover:underline",
+				children: link.label
+			}, link.url))
+		});
+		default: {
+			const Custom = registry.resolve(block.type);
+			return Custom ? createElement(Custom, { block }) : null;
+		}
+	}
+}
+function RelationManagers({ block }) {
+	const tabs = useMemo(() => relationManagerTabs(block), [block]);
+	const url = usePage().url;
+	const [active, setActive] = useState(() => relationTabFromQuery(tabs, new URL(url, "http://localhost").searchParams.get(RELATION_QUERY_KEY))?.key ?? tabs[0]?.key ?? "");
+	const changeTab = (key) => {
+		setActive(key);
+		if (typeof window === "undefined") return;
+		const next = new URL(window.location.href);
+		const slug = relationTabSlug(tabs, key);
+		if (slug === null) next.searchParams.delete(RELATION_QUERY_KEY);
+		else next.searchParams.set(RELATION_QUERY_KEY, slug);
+		window.history.replaceState(window.history.state, "", next);
+	};
+	if (block.managers.length === 0) return null;
+	if (!hasRelationManagerTabs(block)) {
+		const manager = block.managers[0];
+		return /* @__PURE__ */ jsxs("section", {
+			className: "flex flex-col gap-3",
+			children: [
+				/* @__PURE__ */ jsx(Slot, {
+					name: "resource.relation-manager.before",
+					scope: manager.key
+				}),
+				isLazyPlaceholder(manager) ? /* @__PURE__ */ jsx(LazyPlaceholder, { variant: "table" }) : /* @__PURE__ */ jsx(DataTable, {
+					table: {
+						...manager.table,
+						heading: manager.table.heading ?? manager.title
+					},
+					component: manager.component
+				}),
+				/* @__PURE__ */ jsx(Slot, {
+					name: "resource.relation-manager.after",
+					scope: manager.key
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value: active,
+		onValueChange: changeTab,
+		children: [/* @__PURE__ */ jsxs(TabsList, { children: [
+			/* @__PURE__ */ jsx(Slot, { name: "resource.tabs.start" }),
+			tabs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.key,
+				children: [
+					tab.icon && /* @__PURE__ */ jsx(Icon, { name: tab.icon }),
+					tab.title,
+					tab.badge !== void 0 && tab.badge !== null && tab.badge !== "" && /* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						title: tab.badgeTooltip,
+						className: cn("ms-1 px-1.5 py-0", tab.badgeColor && colorClass(badgeColorClasses, tab.badgeColor, "gray")),
+						children: [tab.badge, tab.badgeTooltip && /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: ` (${tab.badgeTooltip})`
+						})]
+					})
+				]
+			}, tab.key)),
+			/* @__PURE__ */ jsx(Slot, { name: "resource.tabs.end" })
+		] }), tabs.map((tab) => /* @__PURE__ */ jsxs(TabsContent, {
+			value: tab.key,
+			className: "flex flex-col gap-6 pt-2 data-[state=inactive]:hidden",
+			"data-slot": tab.group ? "relation-group" : tab.content ? "relation-content" : void 0,
+			forceMount: tab.content ? true : void 0,
+			children: [tab.content && /* @__PURE__ */ jsx(ContentBlockRenderer, { block: tab.content }), tab.managers.map((manager) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Slot, {
+					name: "resource.relation-manager.before",
+					scope: manager.key
+				}),
+				isLazyPlaceholder(manager) ? /* @__PURE__ */ jsx(LazyPlaceholder, { variant: "table" }) : /* @__PURE__ */ jsx(DataTable, {
+					table: {
+						...manager.table,
+						heading: tab.group ? manager.table.heading ?? manager.title : void 0
+					},
+					component: manager.component
+				}),
+				/* @__PURE__ */ jsx(Slot, {
+					name: "resource.relation-manager.after",
+					scope: manager.key
+				})
+			] }, manager.key))]
+		}, tab.key))]
+	});
+}
+//#endregion
+export { AlfakitPage, ContentBlockRenderer, PageContent, PageHeader, PageShell, useBodyAttributes, useDefaultAction };
+
+//# sourceMappingURL=page.js.map

package/dist/pages/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":["FormBlock"],"sources":["../../src/pages/page.tsx"],"sourcesContent":["import type {\n  ContentBlock,\n  FormBlock as FormBlockSchema,\n  InfolistBlock,\n  LinksBlock,\n  PageSchema,\n  RelationManagersBlock,\n  SchemaBlock,\n  TableBlock as TableBlockSchema,\n  WidgetsBlock as WidgetsBlockSchema,\n} from '@alfakit/core'\nimport {\n  applyBodyAttributes,\n  hasRelationManagerTabs,\n  isLazyPlaceholder,\n  openDefaultAction,\n  RELATION_QUERY_KEY,\n  relationManagerTabs,\n  relationTabFromQuery,\n  relationTabSlug,\n  resolveLazyComponents,\n  type DefaultActionOpener,\n} from '@alfakit/core'\nimport { Head, Link, usePage } from '@inertiajs/react'\nimport {\n  createElement,\n  Fragment,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { PageActionProvider } from '../components/actions/action-context'\nimport { ActionList } from '../components/actions/action-list'\nimport { FormBlock } from '../components/form/form-block'\nimport { KeyboardShortcuts } from '../components/panel/keyboard-shortcuts'\nimport { LazyPlaceholder } from '../components/panel/lazy-placeholder'\nimport { Slot } from '../components/panel/slot'\nimport { SubNavigationLayout } from '../components/panel/sub-navigation'\nimport { ConflictBanner } from '../components/realtime/conflict-banner'\nimport { RecordPresence } from '../components/realtime/record-presence'\nimport { SchemaRenderer } from '../components/schema/schema-renderer'\nimport { ListTabs, ListTabsPanel } from '../components/table/list-tabs'\nimport { DataTable } from '../components/table/table-block'\nimport { Badge } from '../components/ui/badge'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'\nimport { WidgetGrid } from '../components/widgets/widgets-block'\nimport { useActionRunner, useAlfakit, useAlfakitProps, usePanel, useT } from '../context'\nimport { AppLayout } from '../layouts/app-layout'\nimport { AuthLayout } from '../layouts/auth-layout'\nimport { BlankLayout } from '../layouts/blank-layout'\nimport { FullscreenLayout } from '../layouts/fullscreen-layout'\nimport { badgeColorClasses, colorClass } from '../lib/colors'\nimport { Icon } from '../lib/icons'\nimport { cn } from '../lib/utils'\n\n/**\n * `Alfakit/Page`: renders any schema-driven page. Custom pages (`Page::$component`) are\n * resolved from the `pages` map passed to `createAlfakit()`.\n */\nexport function AlfakitPage() {\n  const props = useAlfakitProps()\n  const panel = usePanel()\n  const t = useT()\n  const { pages } = useAlfakit()\n  // Lazy widgets and relation managers arrive in a deferred prop after the first response.\n  const page = useMemo(\n    () => (props.page ? resolveLazyComponents(props.page, props.alfakitLazy) : undefined),\n    [props.page, props.alfakitLazy],\n  )\n\n  useDefaultAction(page)\n\n  if (!page) {\n    return null\n  }\n\n  // Starter kit mode: the host's `title` callback adds the application name.\n  const title = panel.starterKit ? page.title : `${page.title} - ${panel.brandName}`\n\n  if (page.view) {\n    const Custom = pages[page.view.component]\n\n    if (!Custom) {\n      return (\n        <div className=\"text-destructive p-6\">\n          {t(\n            'page_not_registered',\n            { component: page.view.component },\n            `Page component ${page.view.component} is not registered in createAlfakit({ pages }).`,\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <PageActionProvider value={{ token: page.token, component: 'page' }}>\n        <Head title={title} />\n        <PageShell page={page}>\n          <Custom {...page.view.props} page={page} />\n        </PageShell>\n      </PageActionProvider>\n    )\n  }\n\n  return (\n    <PageActionProvider value={{ token: page.token, component: 'page' }}>\n      <Head title={title} />\n      <PageShell page={page}>\n        <PageContent page={page} />\n      </PageShell>\n    </PageActionProvider>\n  )\n}\n\n/**\n * Opens the page's default action (`$defaultAction`, `?tableAction=`) once the page has\n * hydrated, and once per page: re-renders after the action ran don't open it again.\n */\nexport function useDefaultAction(page: PageSchema | undefined) {\n  const runner = useActionRunner()\n  const opener = useRef<DefaultActionOpener>({ opened: null })\n\n  useEffect(() => {\n    openDefaultAction(page, opener.current, (action, context) => runner.trigger(action, context))\n  }, [page, runner])\n}\n\n/** Sets the page's `$extraBodyAttributes` on `<body>` while it is open. */\nexport function useBodyAttributes(attributes: Record<string, string> | undefined) {\n  const key = attributes ? JSON.stringify(attributes) : ''\n\n  useEffect(\n    () => applyBodyAttributes(key ? (JSON.parse(key) as Record<string, string>) : undefined),\n    [key],\n  )\n}\n\nexport function PageShell({ page, children }: { page: PageSchema; children: ReactNode }) {\n  const { registry } = useAlfakit()\n\n  useBodyAttributes(page.extraBodyAttributes)\n\n  // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).\n  if (page.layout === 'auth') {\n    return createElement(\n      registry.resolve('layout:auth') ?? AuthLayout,\n      { heading: page.heading ?? page.title, subheading: page.subheading, page },\n      children,\n    )\n  }\n\n  if (page.layout === 'blank') {\n    return createElement(registry.resolve('layout:blank') ?? BlankLayout, { page }, children)\n  }\n\n  if (page.layout === 'fullscreen') {\n    return createElement(\n      registry.resolve('layout:fullscreen') ?? FullscreenLayout,\n      { page },\n      children,\n    )\n  }\n\n  return createElement(\n    registry.resolve('layout:app') ?? AppLayout,\n    { breadcrumbs: page.breadcrumbs, maxContentWidth: page.maxContentWidth, page },\n    <>\n      {/* `?` overlay, `/`, `g d` and panel command shortcuts (`keyboardShortcuts()`). */}\n      <KeyboardShortcuts />\n      <Slot name=\"page.start\" />\n      <PageHeader page={page} />\n      {/* Edit pages: somebody else saved the record (`detectConflicts()`, `Panel::realtime()`). */}\n      {page.conflicts &&\n        createElement(registry.resolve('page:conflict-banner') ?? ConflictBanner, { page })}\n      {page.subNavigation ? (\n        <SubNavigationLayout navigation={page.subNavigation}>{children}</SubNavigationLayout>\n      ) : (\n        children\n      )}\n      <Slot name=\"page.end\" />\n    </>,\n  )\n}\n\nexport function PageHeader({ page }: { page: PageSchema }) {\n  const { registry } = useAlfakit()\n  const actions = page.headerActions ?? []\n  // `$headerActionsAlignment`: the default (end) sits beside the heading; the others\n  // stack the actions under it.\n  const alignment = page.headerActionsAlignment\n\n  return (\n    <>\n      <Slot name=\"page.header.before\" />\n      <header\n        data-slot=\"page-header\"\n        data-actions-alignment={alignment}\n        className={cn(\n          'flex flex-col gap-4',\n          !alignment && 'sm:flex-row sm:items-start sm:justify-between',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <Slot name=\"page.heading.before\" />\n          <h1 className=\"text-2xl font-semibold tracking-tight\">{page.heading ?? page.title}</h1>\n          {page.subheading && (\n            <p className=\"text-muted-foreground mt-1 text-sm\">{page.subheading}</p>\n          )}\n          <Slot name=\"page.heading.after\" />\n        </div>\n        <div\n          className={cn(\n            'flex shrink-0 flex-wrap items-center gap-2',\n            alignment === 'start'\n              ? 'justify-start'\n              : alignment === 'center'\n                ? 'justify-center'\n                : alignment === 'between' || alignment === 'justify'\n                  ? 'justify-between'\n                  : 'justify-end',\n          )}\n        >\n          {/* Record pages with `Panel::realtime()`: who else is on the record. */}\n          {page.presence &&\n            createElement(registry.resolve('page:presence') ?? RecordPresence, {\n              presence: page.presence,\n            })}\n          <Slot name=\"page.actions.before\" />\n          {actions.length > 0 && (\n            <ActionList\n              actions={actions}\n              context={{ token: page.token, component: 'page' }}\n              align=\"end\"\n              className=\"max-w-full shrink-0\"\n            />\n          )}\n          <Slot name=\"page.actions.after\" />\n        </div>\n      </header>\n      <Slot name=\"page.header.after\" />\n    </>\n  )\n}\n\nexport function PageContent({ page }: { page: PageSchema }) {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      {page.content.map((block) => (\n        <ContentBlockRenderer key={block.key} block={block} />\n      ))}\n    </div>\n  )\n}\n\nexport function ContentBlockRenderer({ block }: { block: ContentBlock }) {\n  const { registry } = useAlfakit()\n  // Links list tabs to the table they control.\n  const tabsIdBase = `alfakit-list-tabs-${useId().replace(/[^A-Za-z0-9_-]/g, '')}`\n\n  switch (block.type) {\n    case 'Form':\n      return <FormBlock block={block as FormBlockSchema} />\n    case 'Infolist':\n      return (\n        <div data-slot=\"infolist\" className=\"contents\">\n          <SchemaRenderer\n            components={(block as InfolistBlock).components}\n            columns={{ default: 1, lg: 2 }}\n          />\n        </div>\n      )\n    case 'Schema':\n      return (\n        <SchemaRenderer components={(block as SchemaBlock).components} columns={{ default: 1 }} />\n      )\n    case 'Table': {\n      const table = block as TableBlockSchema\n      const content = table.tabs?.length ? (\n        <div className=\"flex flex-col gap-4\">\n          <ListTabs\n            tabs={table.tabs}\n            activeTab={table.activeTab}\n            tabsQueryKey={table.tabsQueryKey}\n            label={table.pluralModelLabel}\n            idBase={tabsIdBase}\n          />\n          <ListTabsPanel idBase={tabsIdBase} activeTab={table.activeTab}>\n            <DataTable table={table} component={table.component} />\n          </ListTabsPanel>\n        </div>\n      ) : (\n        <DataTable table={table} component={table.component} />\n      )\n\n      if (block.key !== 'table') {\n        return content\n      }\n\n      // The page's main table: the server sends these slots on List / ManageRelatedRecords pages only.\n      return (\n        <>\n          <Slot name=\"resource.list-records.table.before\" />\n          <Slot name=\"resource.manage-related-records.table.before\" />\n          {content}\n          <Slot name=\"resource.manage-related-records.table.after\" />\n          <Slot name=\"resource.list-records.table.after\" />\n        </>\n      )\n    }\n    case 'RelationManagers':\n      return <RelationManagers block={block as RelationManagersBlock} />\n    case 'Widgets':\n      return block.key === 'headerWidgets' ? (\n        <>\n          <Slot name=\"page.header-widgets.before\" />\n          <WidgetGrid block={block as WidgetsBlockSchema} />\n          <Slot name=\"page.header-widgets.after\" />\n        </>\n      ) : block.key === 'footerWidgets' ? (\n        <>\n          <Slot name=\"page.footer-widgets.before\" />\n          <WidgetGrid block={block as WidgetsBlockSchema} />\n          <Slot name=\"page.footer-widgets.after\" />\n        </>\n      ) : (\n        <WidgetGrid block={block as WidgetsBlockSchema} />\n      )\n    case 'Links':\n      return (\n        <div className=\"flex flex-col items-center gap-1 text-center text-sm\">\n          {(block as LinksBlock).links.map((link) => (\n            <Link\n              key={link.url}\n              href={link.url}\n              className=\"text-primary underline-offset-4 hover:underline\"\n            >\n              {link.label}\n            </Link>\n          ))}\n        </div>\n      )\n    default: {\n      const Custom = registry.resolve(block.type)\n\n      return Custom ? createElement(Custom, { block }) : null\n    }\n  }\n}\n\nfunction RelationManagers({ block }: { block: RelationManagersBlock }) {\n  const tabs = useMemo(() => relationManagerTabs(block), [block])\n  // `?relation=`: a key in `getRelations()` or a position. The page URL (not\n  // `window.location`) so the server renders the same tab as the browser.\n  const url = usePage().url\n  const [active, setActive] = useState(\n    () =>\n      relationTabFromQuery(\n        tabs,\n        new URL(url, 'http://localhost').searchParams.get(RELATION_QUERY_KEY),\n      )?.key ??\n      tabs[0]?.key ??\n      '',\n  )\n\n  const changeTab = (key: string) => {\n    setActive(key)\n\n    if (typeof window === 'undefined') return\n\n    const next = new URL(window.location.href)\n    const slug = relationTabSlug(tabs, key)\n\n    if (slug === null) next.searchParams.delete(RELATION_QUERY_KEY)\n    else next.searchParams.set(RELATION_QUERY_KEY, slug)\n\n    window.history.replaceState(window.history.state, '', next)\n  }\n\n  if (block.managers.length === 0) {\n    return null\n  }\n\n  if (!hasRelationManagerTabs(block)) {\n    const manager = block.managers[0]!\n\n    return (\n      <section className=\"flex flex-col gap-3\">\n        <Slot name=\"resource.relation-manager.before\" scope={manager.key} />\n        {isLazyPlaceholder(manager) ? (\n          <LazyPlaceholder variant=\"table\" />\n        ) : (\n          <DataTable\n            table={{ ...manager.table, heading: manager.table.heading ?? manager.title }}\n            component={manager.component}\n          />\n        )}\n        <Slot name=\"resource.relation-manager.after\" scope={manager.key} />\n      </section>\n    )\n  }\n\n  return (\n    <Tabs value={active} onValueChange={changeTab}>\n      <TabsList>\n        <Slot name=\"resource.tabs.start\" />\n        {tabs.map((tab) => (\n          <TabsTrigger key={tab.key} value={tab.key}>\n            {tab.icon && <Icon name={tab.icon} />}\n            {tab.title}\n            {tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (\n              <Badge\n                variant=\"secondary\"\n                title={tab.badgeTooltip}\n                className={cn(\n                  'ms-1 px-1.5 py-0',\n                  tab.badgeColor && colorClass(badgeColorClasses, tab.badgeColor, 'gray'),\n                )}\n              >\n                {tab.badge}\n                {tab.badgeTooltip && <span className=\"sr-only\">{` (${tab.badgeTooltip})`}</span>}\n              </Badge>\n            )}\n          </TabsTrigger>\n        ))}\n        <Slot name=\"resource.tabs.end\" />\n      </TabsList>\n      {tabs.map((tab) => (\n        <TabsContent\n          key={tab.key}\n          value={tab.key}\n          className=\"flex flex-col gap-6 pt-2 data-[state=inactive]:hidden\"\n          data-slot={tab.group ? 'relation-group' : tab.content ? 'relation-content' : undefined}\n          // The form keeps its unsaved state while another tab is open.\n          forceMount={tab.content ? true : undefined}\n        >\n          {/* The page's form / infolist (`hasCombinedRelationManagerTabsWithContent()`). */}\n          {tab.content && <ContentBlockRenderer block={tab.content as ContentBlock} />}\n          {tab.managers.map((manager) => (\n            <Fragment key={manager.key}>\n              <Slot name=\"resource.relation-manager.before\" scope={manager.key} />\n              {isLazyPlaceholder(manager) ? (\n                <LazyPlaceholder variant=\"table\" />\n              ) : (\n                <DataTable\n                  // Inside a group each table keeps its own heading; a lone manager's is the tab.\n                  table={{\n                    ...manager.table,\n                    heading: tab.group ? (manager.table.heading ?? manager.title) : undefined,\n                  }}\n                  component={manager.component}\n                />\n              )}\n              <Slot name=\"resource.relation-manager.after\" scope={manager.key} />\n            </Fragment>\n          ))}\n        </TabsContent>\n      ))}\n    </Tabs>\n  )\n}\n"],"mappings":"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"}

package/dist/registry.d.ts

@@ -0,0 +1,7 @@
+import { AnyComponent } from "./context.js";
+import { ComponentRegistry } from "@alfakit/core";
+//#region src/registry.d.ts
+/** Built-in renderers for every schema `type` the PHP side emits. */
+export declare function createDefaultRegistry(): ComponentRegistry<AnyComponent>;
+//#endregion
+//# sourceMappingURL=registry.d.ts.map