@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/cms/page.js

@@ -0,0 +1,180 @@
+import { useOptionalRegistry } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { CmsProvider, useCms } from "./context.js";
+import { CmsBlocks } from "./blocks.js";
+import { CmsHead } from "./head.js";
+import { CmsLanguageSwitcher, CmsMenuList, CmsNav } from "./menu.js";
+import { CMS_FOOTER_KEY, CMS_HEADER_KEY, cmsPayload } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { Fragment, createElement, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon } from "lucide-react";
+//#region src/components/cms/page.tsx
+/** The admin bar loads only for signed-in editors (the server sends `cms.admin` to them alone). */
+const CmsAdminBar = lazyComponent(() => import("./admin-bar.js").then((module) => module.CmsAdminBar), () => null);
+/** The site header: the site name, the `main` menu and the language links. */
+function CmsHeader({ cms }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "cms-header",
+		className: "bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-30 border-b backdrop-blur",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8",
+			children: [/* @__PURE__ */ jsx("a", {
+				href: cms.site.url,
+				className: "focus-visible:ring-ring/50 rounded-md text-lg font-semibold tracking-tight outline-none focus-visible:ring-[3px]",
+				children: cms.site.name
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(CmsNav, {
+					menu: cms.menus.main,
+					children: /* @__PURE__ */ jsx(CmsLanguageSwitcher, {
+						site: cms.site,
+						className: "hidden sm:block"
+					})
+				})
+			})]
+		})
+	});
+}
+/** The site footer: the `footer` menu and the site name. */
+function CmsFooter({ cms }) {
+	const { t } = useCms();
+	const footer = cms.menus.footer;
+	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "cms-footer",
+		className: "border-t",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-6xl flex-col gap-6 px-4 py-10 sm:flex-row sm:items-start sm:justify-between sm:px-6 lg:px-8",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "font-semibold",
+					children: cms.site.name
+				}),
+				footer && footer.items.length > 0 && /* @__PURE__ */ jsx("nav", {
+					"aria-label": t("cms.footer_navigation", {}, "Footer navigation"),
+					children: /* @__PURE__ */ jsx(CmsMenuList, {
+						items: footer.items,
+						className: "flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-x-4"
+					})
+				}),
+				/* @__PURE__ */ jsx(CmsLanguageSwitcher, {
+					site: cms.site,
+					className: "sm:hidden"
+				})
+			]
+		})
+	});
+}
+function CmsBreadcrumbs({ cms }) {
+	const { t } = useCms();
+	const crumbs = cms.page.breadcrumbs;
+	if (crumbs.length < 2) return null;
+	return /* @__PURE__ */ jsx(Breadcrumb, {
+		"aria-label": t("cms.breadcrumbs", {}, "Breadcrumbs"),
+		className: "mx-auto max-w-6xl px-4 pt-6 sm:px-6 lg:px-8",
+		children: /* @__PURE__ */ jsx(BreadcrumbList, { children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: index === crumbs.length - 1 ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: crumb.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+			href: crumb.url,
+			children: crumb.label
+		}) })] }, crumb.url)) })
+	});
+}
+function PreviewBanner() {
+	const { t } = useCms();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "cms-preview-banner",
+		className: "flex items-center justify-center gap-2 bg-amber-100 px-4 py-2 text-sm text-amber-950 dark:bg-amber-950 dark:text-amber-100",
+		children: [/* @__PURE__ */ jsx(EyeIcon, {
+			className: "size-4 shrink-0",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("strong", {
+				className: "font-semibold",
+				children: t("cms.preview", {}, "Preview")
+			}),
+			" ·",
+			" ",
+			t("cms.preview_notice", {}, "This is a preview. Visitors don't see unpublished changes.")
+		] })]
+	});
+}
+/** The page body inside `CmsPage`: header, breadcrumbs, blocks and footer. */
+function CmsPageLayout({ cms, children }) {
+	const registry = useOptionalRegistry();
+	const { t } = useCms();
+	const header = registry?.resolve(CMS_HEADER_KEY) ?? CmsHeader;
+	const footer = registry?.resolve(CMS_FOOTER_KEY) ?? CmsFooter;
+	return /* @__PURE__ */ jsxs("div", {
+		dir: cms.site.direction,
+		lang: cms.site.tag,
+		"data-slot": "cms-page",
+		"data-layout": cms.page.layout ?? void 0,
+		className: "bg-background text-foreground flex min-h-svh flex-col",
+		children: [
+			/* @__PURE__ */ jsx("a", {
+				href: "#cms-content",
+				className: "bg-background focus-visible:ring-ring/50 sr-only z-50 rounded-md px-4 py-2 focus:not-sr-only focus:absolute focus:start-4 focus:top-4 focus-visible:ring-[3px]",
+				children: t("cms.skip_to_content", {}, "Skip to content")
+			}),
+			cms.preview && /* @__PURE__ */ jsx(PreviewBanner, {}),
+			createElement(header, { cms }),
+			/* @__PURE__ */ jsxs("main", {
+				id: "cms-content",
+				tabIndex: -1,
+				className: cn("flex-1 outline-none"),
+				"data-slot": "cms-content",
+				children: [/* @__PURE__ */ jsx(CmsBreadcrumbs, { cms }), children ?? (cms.page.blocks.length > 0 ? /* @__PURE__ */ jsx(CmsBlocks, { blocks: cms.page.blocks }) : /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mx-auto max-w-3xl px-4 py-24 text-center",
+					children: t("cms.empty_page", {}, "This page has no content yet.")
+				}))]
+			}),
+			createElement(footer, { cms }),
+			cms.poweredBy && /* @__PURE__ */ jsx("div", {
+				"data-slot": "cms-powered-by",
+				dangerouslySetInnerHTML: { __html: cms.poweredBy }
+			}),
+			cms.admin && /* @__PURE__ */ jsx(CmsAdminBar, { admin: cms.admin })
+		]
+	});
+}
+/**
+* The `Alfakit/CmsPage` Inertia page (public CMS pages and previews). Register it in your
+* public site's Inertia app:
+*
+* ```tsx
+* createAlfakit({ pages: { 'Alfakit/CmsPage': CmsPage } })
+* ```
+*
+* Replace the header or footer with `cms:header` / `cms:footer` registry components, a
+* block with `cms:block:{type}`, or build your own page from `CmsBlocks` and `CmsHead`.
+*/
+function CmsPage({ cms: cmsProp, components }) {
+	const page = usePageProps();
+	const cms = cmsProp ?? cmsPayload(page);
+	const tag = cms?.site.tag;
+	const direction = cms?.site.direction;
+	useEffect(() => {
+		if (!tag || !direction) return;
+		document.documentElement.lang = tag;
+		document.documentElement.dir = direction;
+	}, [tag, direction]);
+	if (!cms) return null;
+	return /* @__PURE__ */ jsxs(CmsProvider, {
+		payload: cms,
+		components,
+		children: [/* @__PURE__ */ jsx(CmsHead, { seo: cms.page.seo }), /* @__PURE__ */ jsx(CmsPageLayout, { cms })]
+	});
+}
+function usePageProps() {
+	try {
+		return usePage().props;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { CmsFooter, CmsHeader, CmsPage };
+
+//# sourceMappingURL=page.js.map

package/dist/components/cms/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":[],"sources":["../../../src/components/cms/page.tsx"],"sourcesContent":["import {\n  CMS_FOOTER_KEY,\n  CMS_HEADER_KEY,\n  cmsPayload,\n  type CmsPageProps,\n  type CmsPayload,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { EyeIcon } from 'lucide-react'\nimport { Fragment, createElement, useEffect, type ReactNode } from 'react'\nimport { useOptionalRegistry, type AnyComponent } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\nimport { cn } from '../../lib/utils'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '../ui/breadcrumb'\nimport { CmsBlocks } from './blocks'\nimport { CmsProvider, useCms } from './context'\nimport { CmsHead } from './head'\nimport { CmsLanguageSwitcher, CmsMenuList, CmsNav } from './menu'\n\n/** The admin bar loads only for signed-in editors (the server sends `cms.admin` to them alone). */\nconst CmsAdminBar = lazyComponent<{ admin: NonNullable<CmsPayload['admin']> }>(\n  () => import('./admin-bar').then((module) => module.CmsAdminBar),\n  () => null,\n)\n\n/** The site header: the site name, the `main` menu and the language links. */\nexport function CmsHeader({ cms }: { cms: CmsPayload }) {\n  return (\n    <header\n      data-slot=\"cms-header\"\n      className=\"bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-30 border-b backdrop-blur\"\n    >\n      <div className=\"relative mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8\">\n        <a\n          href={cms.site.url}\n          className=\"focus-visible:ring-ring/50 rounded-md text-lg font-semibold tracking-tight outline-none focus-visible:ring-[3px]\"\n        >\n          {cms.site.name}\n        </a>\n        <div className=\"flex items-center gap-2\">\n          <CmsNav menu={cms.menus.main}>\n            <CmsLanguageSwitcher site={cms.site} className=\"hidden sm:block\" />\n          </CmsNav>\n        </div>\n      </div>\n    </header>\n  )\n}\n\n/** The site footer: the `footer` menu and the site name. */\nexport function CmsFooter({ cms }: { cms: CmsPayload }) {\n  const { t } = useCms()\n  const footer = cms.menus.footer\n\n  return (\n    <footer data-slot=\"cms-footer\" className=\"border-t\">\n      <div className=\"mx-auto flex max-w-6xl flex-col gap-6 px-4 py-10 sm:flex-row sm:items-start sm:justify-between sm:px-6 lg:px-8\">\n        <p className=\"font-semibold\">{cms.site.name}</p>\n        {footer && footer.items.length > 0 && (\n          <nav aria-label={t('cms.footer_navigation', {}, 'Footer navigation')}>\n            <CmsMenuList\n              items={footer.items}\n              className=\"flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-x-4\"\n            />\n          </nav>\n        )}\n        <CmsLanguageSwitcher site={cms.site} className=\"sm:hidden\" />\n      </div>\n    </footer>\n  )\n}\n\nfunction CmsBreadcrumbs({ cms }: { cms: CmsPayload }) {\n  const { t } = useCms()\n  const crumbs = cms.page.breadcrumbs\n\n  if (crumbs.length < 2) return null\n\n  return (\n    <Breadcrumb\n      aria-label={t('cms.breadcrumbs', {}, 'Breadcrumbs')}\n      className=\"mx-auto max-w-6xl px-4 pt-6 sm:px-6 lg:px-8\"\n    >\n      <BreadcrumbList>\n        {crumbs.map((crumb, index) => (\n          <Fragment key={crumb.url}>\n            {index > 0 && <BreadcrumbSeparator />}\n            <BreadcrumbItem>\n              {index === crumbs.length - 1 ? (\n                <BreadcrumbPage>{crumb.label}</BreadcrumbPage>\n              ) : (\n                <BreadcrumbLink href={crumb.url}>{crumb.label}</BreadcrumbLink>\n              )}\n            </BreadcrumbItem>\n          </Fragment>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n\nfunction PreviewBanner() {\n  const { t } = useCms()\n\n  return (\n    <div\n      role=\"status\"\n      data-slot=\"cms-preview-banner\"\n      className=\"flex items-center justify-center gap-2 bg-amber-100 px-4 py-2 text-sm text-amber-950 dark:bg-amber-950 dark:text-amber-100\"\n    >\n      <EyeIcon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n      <span>\n        <strong className=\"font-semibold\">{t('cms.preview', {}, 'Preview')}</strong> ·{' '}\n        {t('cms.preview_notice', {}, \"This is a preview. Visitors don't see unpublished changes.\")}\n      </span>\n    </div>\n  )\n}\n\n/** The page body inside `CmsPage`: header, breadcrumbs, blocks and footer. */\nfunction CmsPageLayout({ cms, children }: { cms: CmsPayload; children?: ReactNode }) {\n  const registry = useOptionalRegistry()\n  const { t } = useCms()\n  const header: AnyComponent = registry?.resolve(CMS_HEADER_KEY) ?? CmsHeader\n  const footer: AnyComponent = registry?.resolve(CMS_FOOTER_KEY) ?? CmsFooter\n\n  return (\n    <div\n      dir={cms.site.direction}\n      lang={cms.site.tag}\n      data-slot=\"cms-page\"\n      data-layout={cms.page.layout ?? undefined}\n      className=\"bg-background text-foreground flex min-h-svh flex-col\"\n    >\n      <a\n        href=\"#cms-content\"\n        className=\"bg-background focus-visible:ring-ring/50 sr-only z-50 rounded-md px-4 py-2 focus:not-sr-only focus:absolute focus:start-4 focus:top-4 focus-visible:ring-[3px]\"\n      >\n        {t('cms.skip_to_content', {}, 'Skip to content')}\n      </a>\n      {cms.preview && <PreviewBanner />}\n      {createElement(header, { cms })}\n      <main\n        id=\"cms-content\"\n        tabIndex={-1}\n        className={cn('flex-1 outline-none')}\n        data-slot=\"cms-content\"\n      >\n        <CmsBreadcrumbs cms={cms} />\n        {children ??\n          (cms.page.blocks.length > 0 ? (\n            <CmsBlocks blocks={cms.page.blocks} />\n          ) : (\n            <p className=\"text-muted-foreground mx-auto max-w-3xl px-4 py-24 text-center\">\n              {t('cms.empty_page', {}, 'This page has no content yet.')}\n            </p>\n          ))}\n      </main>\n      {createElement(footer, { cms })}\n      {cms.poweredBy && (\n        <div data-slot=\"cms-powered-by\" dangerouslySetInnerHTML={{ __html: cms.poweredBy }} />\n      )}\n      {cms.admin && <CmsAdminBar admin={cms.admin} />}\n    </div>\n  )\n}\n\n/**\n * The `Alfakit/CmsPage` Inertia page (public CMS pages and previews). Register it in your\n * public site's Inertia app:\n *\n * ```tsx\n * createAlfakit({ pages: { 'Alfakit/CmsPage': CmsPage } })\n * ```\n *\n * Replace the header or footer with `cms:header` / `cms:footer` registry components, a\n * block with `cms:block:{type}`, or build your own page from `CmsBlocks` and `CmsHead`.\n */\nexport function CmsPage({\n  cms: cmsProp,\n  components,\n}: Partial<CmsPageProps> & { components?: Record<string, AnyComponent> }) {\n  const page = usePageProps()\n  const cms = cmsProp ?? cmsPayload(page)\n\n  const tag = cms?.site.tag\n  const direction = cms?.site.direction\n\n  useEffect(() => {\n    if (!tag || !direction) return\n\n    document.documentElement.lang = tag\n    document.documentElement.dir = direction\n  }, [tag, direction])\n\n  if (!cms) return null\n\n  return (\n    <CmsProvider payload={cms} components={components}>\n      <CmsHead seo={cms.page.seo} />\n      <CmsPageLayout cms={cms} />\n    </CmsProvider>\n  )\n}\n\nfunction usePageProps(): unknown {\n  try {\n    return usePage().props\n  } catch {\n    return null\n  }\n}\n"],"mappings":"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"}

package/dist/components/cms/parts.d.ts

@@ -0,0 +1,24 @@
+import { CmsImageSchema, CmsLinkSchema } from "@alfakit/core";
+//#region src/components/cms/parts.d.ts
+/** A button link from a block (`primaryAction` / `secondaryAction`). */
+export declare function CmsLinkButton({ link, variant, size, className }: {
+  link: CmsLinkSchema | null | undefined;
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'default' | 'lg' | 'sm';
+  className?: string;
+}): import("react").JSX.Element | null;
+/** A lazily loaded image with its alternative text; decorative images get `alt=""`. */
+export declare function CmsImage({ image, className, sizes, eager }: {
+  image: CmsImageSchema | null | undefined;
+  className?: string;
+  sizes?: string;
+  eager?: boolean;
+}): import("react").JSX.Element | null;
+/** A block's optional heading and introduction. */
+export declare function CmsBlockHeading({ heading, intro, className }: {
+  heading?: string | null;
+  intro?: string | null;
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=parts.d.ts.map

package/dist/components/cms/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../../src/components/cms/parts.tsx"],"mappings":";;;wBAMgB,gBACd,MACA,SACA,MACA;EAEA,MAAM;EACN;EACA;EACA;oBACD,IAAA;;wBAuBe,WACd,OACA,WACA,OACA;EAEA,OAAO;EACP;EACA;EACA;oBACD,IAAA;;wBAiBe,kBACd,SACA,OACA;EAEA;EACA;EACA;oBACD,IAAA"}

package/dist/components/cms/parts.js

@@ -0,0 +1,58 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useCms } from "./context.js";
+import { cmsLinkRel } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cms/parts.tsx
+/** A button link from a block (`primaryAction` / `secondaryAction`). */
+function CmsLinkButton({ link, variant = "default", size = "lg", className }) {
+	const { t } = useCms();
+	if (!link) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant,
+		size,
+		className,
+		children: /* @__PURE__ */ jsxs("a", {
+			href: link.url,
+			target: link.newTab ? "_blank" : void 0,
+			rel: cmsLinkRel(link.newTab),
+			"data-slot": "cms-link-button",
+			children: [link.label, link.newTab && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", t("cms.new_tab", {}, "(opens in a new tab)")]
+			})]
+		})
+	});
+}
+/** A lazily loaded image with its alternative text; decorative images get `alt=""`. */
+function CmsImage({ image, className, sizes, eager = false }) {
+	if (!image) return null;
+	return /* @__PURE__ */ jsx("img", {
+		src: image.url,
+		alt: image.alt ?? "",
+		loading: eager ? "eager" : "lazy",
+		decoding: "async",
+		sizes,
+		className: cn("h-auto max-w-full", className),
+		"data-slot": "cms-image"
+	});
+}
+/** A block's optional heading and introduction. */
+function CmsBlockHeading({ heading, intro, className }) {
+	if (!heading && !intro) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto mb-10 max-w-2xl text-center", className),
+		children: [heading && /* @__PURE__ */ jsx("h2", {
+			className: "text-3xl font-semibold tracking-tight text-balance",
+			children: heading
+		}), intro && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mt-3 text-lg text-pretty",
+			children: intro
+		})]
+	});
+}
+//#endregion
+export { CmsBlockHeading, CmsImage, CmsLinkButton };
+
+//# sourceMappingURL=parts.js.map

package/dist/components/cms/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":[],"sources":["../../../src/components/cms/parts.tsx"],"sourcesContent":["import { cmsLinkRel, type CmsImageSchema, type CmsLinkSchema } from '@alfakit/core'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport { useCms } from './context'\n\n/** A button link from a block (`primaryAction` / `secondaryAction`). */\nexport function CmsLinkButton({\n  link,\n  variant = 'default',\n  size = 'lg',\n  className,\n}: {\n  link: CmsLinkSchema | null | undefined\n  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link'\n  size?: 'default' | 'lg' | 'sm'\n  className?: string\n}) {\n  const { t } = useCms()\n\n  if (!link) return null\n\n  return (\n    <Button asChild variant={variant} size={size} className={className}>\n      <a\n        href={link.url}\n        target={link.newTab ? '_blank' : undefined}\n        rel={cmsLinkRel(link.newTab)}\n        data-slot=\"cms-link-button\"\n      >\n        {link.label}\n        {link.newTab && (\n          <span className=\"sr-only\"> {t('cms.new_tab', {}, '(opens in a new tab)')}</span>\n        )}\n      </a>\n    </Button>\n  )\n}\n\n/** A lazily loaded image with its alternative text; decorative images get `alt=\"\"`. */\nexport function CmsImage({\n  image,\n  className,\n  sizes,\n  eager = false,\n}: {\n  image: CmsImageSchema | null | undefined\n  className?: string\n  sizes?: string\n  eager?: boolean\n}) {\n  if (!image) return null\n\n  return (\n    <img\n      src={image.url}\n      alt={image.alt ?? ''}\n      loading={eager ? 'eager' : 'lazy'}\n      decoding=\"async\"\n      sizes={sizes}\n      className={cn('h-auto max-w-full', className)}\n      data-slot=\"cms-image\"\n    />\n  )\n}\n\n/** A block's optional heading and introduction. */\nexport function CmsBlockHeading({\n  heading,\n  intro,\n  className,\n}: {\n  heading?: string | null\n  intro?: string | null\n  className?: string\n}) {\n  if (!heading && !intro) return null\n\n  return (\n    <div className={cn('mx-auto mb-10 max-w-2xl text-center', className)}>\n      {heading && <h2 className=\"text-3xl font-semibold tracking-tight text-balance\">{heading}</h2>}\n      {intro && <p className=\"text-muted-foreground mt-3 text-lg text-pretty\">{intro}</p>}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,cAAc,EAC5B,MACA,UAAU,WACV,OAAO,MACP,aAMC;CACD,MAAM,EAAE,MAAM,OAAO;CAErB,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAiB;EAAe;EAAiB;EACvD,UAAA,qBAAC,KAAD;GACE,MAAM,KAAK;GACX,QAAQ,KAAK,SAAS,WAAW,KAAA;GACjC,KAAK,WAAW,KAAK,MAAM;GAC3B,aAAU;GAJZ,UAAA,CAMG,KAAK,OACL,KAAK,UACJ,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA0B,KAAE,EAAE,eAAe,CAAC,GAAG,sBAAsB,CAAQ;GAEhF,CAAA,CAAA;;CACG,CAAA;AAEZ;;AAGA,SAAgB,SAAS,EACvB,OACA,WACA,OACA,QAAQ,SAMP;CACD,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,OAAD;EACE,KAAK,MAAM;EACX,KAAK,MAAM,OAAO;EAClB,SAAS,QAAQ,UAAU;EAC3B,UAAS;EACF;EACP,WAAW,GAAG,qBAAqB,SAAS;EAC5C,aAAU;CACX,CAAA;AAEL;;AAGA,SAAgB,gBAAgB,EAC9B,SACA,OACA,aAKC;CACD,IAAI,CAAC,WAAW,CAAC,OAAO,OAAO;CAE/B,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uCAAuC,SAAS;EAAnE,UAAA,CACG,WAAW,oBAAC,MAAD;GAAI,WAAU;GAAsD,UAAA;EAAY,CAAA,GAC3F,SAAS,oBAAC,KAAD;GAAG,WAAU;GAAkD,UAAA;EAAS,CAAA,CAC/E;;AAET"}

package/dist/components/dev-tools/dev-tools-inspector.js

@@ -0,0 +1,302 @@
+import { useAlfakitProps, useDirection, useFormatter, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { byteLength, formatBytes, inspectableProps, jsonEntries, jsonScalar, jsonSize, latestServerTiming, prettyJson, searchJson } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BracesIcon, CheckIcon, ChevronRightIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+//#region src/components/dev-tools/dev-tools-inspector.tsx
+/**
+* The schema inspector: a floating developer button that opens a drawer with the page's
+* props as a searchable JSON tree (with a copy button), what the context token identifies,
+* the server time reported in `Server-Timing`, the payload size and editor links for the
+* PHP classes behind the page. Rendered only for pages that carry `alfakitDevTools`.
+*/
+function DevToolsInspector() {
+	const props = useAlfakitProps();
+	const t = useT();
+	const formatter = useFormatter();
+	const direction = useDirection();
+	const tools = props.alfakitDevTools;
+	const data = useMemo(() => inspectableProps(props), [props]);
+	const payload = useMemo(() => byteLength(props), [props]);
+	const [query, setQuery] = useState("");
+	const [copied, setCopied] = useState(false);
+	const [serverTime, setServerTime] = useState(() => latestServerTiming());
+	const search = useMemo(() => searchJson(data, query), [data, query]);
+	useEffect(() => router.on("finish", () => setServerTime(latestServerTiming())), []);
+	useEffect(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	if (!tools) return null;
+	const copy = () => {
+		navigator.clipboard?.writeText(prettyJson(data)).then(() => setCopied(true));
+	};
+	const time = (value) => value === null ? t("dev_tools.never", {}, "Never") : formatter.dateTime(value * 1e3);
+	const parameters = Object.entries(tools.context.parameters);
+	return /* @__PURE__ */ jsxs(Sheet, { children: [/* @__PURE__ */ jsx(SheetTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "icon",
+			"aria-label": t("dev_tools.open", {}, "Open schema inspector"),
+			"data-slot": "dev-tools-toggle",
+			className: "fixed end-4 bottom-4 z-40 rounded-full shadow-md",
+			children: /* @__PURE__ */ jsx(BracesIcon, {})
+		})
+	}), /* @__PURE__ */ jsx(SheetContent, {
+		side: direction === "rtl" ? "left" : "right",
+		className: "flex w-full flex-col gap-0 p-0 sm:max-w-xl",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "dev-tools",
+			className: "flex min-h-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "border-b",
+				children: [/* @__PURE__ */ jsxs(SheetTitle, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(BracesIcon, { className: "size-4" }), t("dev_tools.title", {}, "Schema inspector")]
+				}), /* @__PURE__ */ jsx(SheetDescription, {
+					className: "truncate font-mono text-xs",
+					title: tools.context.page,
+					children: tools.context.page
+				})]
+			}), /* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-5 p-4 text-sm",
+					children: [
+						/* @__PURE__ */ jsxs("dl", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ jsx(Stat, {
+								label: t("dev_tools.server_time", {}, "Server time"),
+								value: serverTime === null ? t("dev_tools.not_measured", {}, "Not measured") : t("dev_tools.milliseconds", { value: formatter.number(serverTime) }, ":value ms")
+							}), /* @__PURE__ */ jsx(Stat, {
+								label: t("dev_tools.payload", {}, "Payload size"),
+								value: formatBytes(payload)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("section", {
+							"data-slot": "dev-tools-context",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "mb-2 text-sm font-medium",
+								children: t("dev_tools.context", {}, "Context token")
+							}), /* @__PURE__ */ jsxs("dl", {
+								className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs",
+								children: [
+									/* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.panel", {}, "Panel"),
+										value: tools.context.panel
+									}),
+									/* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.page", {}, "Page"),
+										value: tools.context.page
+									}),
+									tools.context.component && /* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.component", {}, "Component"),
+										value: tools.context.component
+									}),
+									tools.tenant !== null && /* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.tenant", {}, "Tenant"),
+										value: tools.tenant
+									}),
+									parameters.map(([key, value]) => /* @__PURE__ */ jsx(Row, {
+										label: key,
+										value: jsonScalar(value)
+									}, key)),
+									/* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.bound_to_user", {}, "Bound to the user"),
+										value: tools.context.boundToUser ? t("dev_tools.yes", {}, "Yes") : t("dev_tools.no", {}, "No"),
+										plain: true
+									}),
+									/* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.issued_at", {}, "Issued"),
+										value: time(tools.context.issuedAt),
+										plain: true
+									}),
+									/* @__PURE__ */ jsx(Row, {
+										label: t("dev_tools.expires_at", {}, "Expires"),
+										value: time(tools.context.expiresAt),
+										plain: true
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("section", {
+							"data-slot": "dev-tools-classes",
+							children: [
+								/* @__PURE__ */ jsx("h3", {
+									className: "mb-2 text-sm font-medium",
+									children: t("dev_tools.classes", {}, "Classes")
+								}),
+								/* @__PURE__ */ jsx("ul", {
+									className: "divide-y rounded-md border text-xs",
+									children: tools.classes.map((item) => /* @__PURE__ */ jsxs("li", {
+										className: "flex items-center gap-2 px-3 py-1.5",
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: "text-muted-foreground w-16 shrink-0",
+												children: t(`dev_tools.roles.${item.role}`, {}, item.role)
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "min-w-0 flex-1 truncate font-mono",
+												title: item.file ? `${item.file}:${item.line ?? 1}` : item.class,
+												children: item.class
+											}),
+											item.url && /* @__PURE__ */ jsx("a", {
+												href: item.url,
+												className: "text-primary inline-flex shrink-0 items-center gap-1 hover:underline",
+												"aria-label": t("dev_tools.open_in_editor", {
+													class: item.class,
+													editor: tools.editor ?? ""
+												}, "Open :class in :editor"),
+												children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3.5" })
+											})
+										]
+									}, item.role))
+								}),
+								tools.editor === null && /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mt-2 text-xs",
+									children: t("dev_tools.no_editor", {}, "Set APP_EDITOR (config app.editor) to open these classes in your editor.")
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("section", {
+							"data-slot": "dev-tools-schema",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "mb-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("h3", {
+										className: "me-auto text-sm font-medium",
+										children: t("dev_tools.schema", {}, "Schema")
+									}), /* @__PURE__ */ jsxs(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "sm",
+										onClick: copy,
+										children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}), copied ? t("dev_tools.copied", {}, "Copied") : t("dev_tools.copy", {}, "Copy JSON")]
+									})]
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									type: "search",
+									value: query,
+									onChange: (event) => setQuery(event.target.value),
+									placeholder: t("dev_tools.search", {}, "Search keys and values"),
+									"aria-label": t("dev_tools.search", {}, "Search keys and values"),
+									className: "mb-2 h-8"
+								}),
+								query.trim() !== "" && search.matches.size === 0 ? /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-sm",
+									children: t("dev_tools.no_matches", { query: query.trim() }, "Nothing matches “:query”.")
+								}) : /* @__PURE__ */ jsx("ul", {
+									dir: "ltr",
+									role: "tree",
+									"aria-label": t("dev_tools.schema", {}, "Schema"),
+									className: "bg-muted/40 overflow-x-auto rounded-md p-2 text-start font-mono text-xs leading-relaxed",
+									children: jsonEntries(data).map((entry) => /* @__PURE__ */ jsx(JsonNode, {
+										entry,
+										depth: 0,
+										search,
+										query
+									}, entry.path))
+								})
+							]
+						})
+					]
+				})
+			})]
+		})
+	})] });
+}
+function JsonNode({ entry, depth, search, query }) {
+	const t = useT();
+	const formatter = useFormatter();
+	const searching = query.trim() !== "";
+	const [open, setOpen] = useState(depth < 1);
+	if (searching && !search.visible.has(entry.path)) return null;
+	const container = entry.kind === "object" || entry.kind === "array";
+	const expanded = searching || open;
+	const matched = search.matches.has(entry.path);
+	const size = jsonSize(entry.value);
+	const key = /* @__PURE__ */ jsx("span", {
+		className: cn("text-foreground", matched && "bg-primary/15 rounded-sm"),
+		children: entry.key
+	});
+	if (!container) return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-selected": false,
+		className: "py-px",
+		style: { paddingInlineStart: `${depth * 12 + 16}px` },
+		children: [
+			key,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(entry.kind === "string" && "text-emerald-700 dark:text-emerald-400", entry.kind === "number" && "text-sky-700 dark:text-sky-400", entry.kind === "boolean" && "text-violet-700 dark:text-violet-400", entry.kind === "null" && "text-muted-foreground", "break-all"),
+				children: jsonScalar(entry.value)
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-selected": false,
+		"aria-expanded": expanded,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:bg-muted flex w-full items-center gap-1 rounded py-px text-start",
+			style: { paddingInlineStart: `${depth * 12}px` },
+			onClick: () => setOpen(!open),
+			"aria-label": expanded ? t("dev_tools.collapse", { key: entry.key }, "Collapse :key") : t("dev_tools.expand", { key: entry.key }, "Expand :key"),
+			children: [
+				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-3 shrink-0 transition-transform", expanded && "rotate-90") }),
+				key,
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: entry.kind === "array" ? `[${formatter.number(size)}]` : `{${formatter.number(size)}}`
+				})
+			]
+		}), expanded && size > 0 && /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			children: jsonEntries(entry.value, entry.path).map((child) => /* @__PURE__ */ jsx(JsonNode, {
+				entry: child,
+				depth: depth + 1,
+				search,
+				query
+			}, child.path))
+		})]
+	});
+}
+function Stat({ label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border p-3",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground text-xs",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "font-mono text-sm font-semibold tabular-nums",
+			children: value
+		})]
+	});
+}
+function Row({ label, value, plain = false }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("dd", {
+		className: cn("min-w-0 truncate", !plain && "font-mono"),
+		title: value,
+		children: value
+	})] });
+}
+//#endregion
+export { DevToolsInspector };
+
+//# sourceMappingURL=dev-tools-inspector.js.map