@alfakit/react 0.1.9 → 0.1.10

package/dist/components/widgets/stats-overview.js.map

@@ -1 +1 @@
-{"version":3,"file":"stats-overview.js","names":[],"sources":["../../../src/components/widgets/stats-overview.tsx"],"sourcesContent":["import type { StatSchema, StatsOverviewWidgetSchema } from '@alfakit/core'\nimport { gridColumnsClasses, widgetPollTarget } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { useEffect } from 'react'\nimport { usePollComponent } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport {\n  colorClass,\n  cssColor,\n  iconBackgroundColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { useLiveUpdates } from '../realtime/live-records-pill'\nimport { Card } from '../ui/card'\n\nexport function StatsOverviewWidget({ widget }: { widget: StatsOverviewWidgetSchema }) {\n  const columns = widget.columns ?? {\n    default: 1,\n    md: Math.min(widget.stats.length, 2),\n    lg: Math.min(widget.stats.length, 4),\n  }\n\n  // Polls refresh only this widget, share one request with other components on the same\n  // interval and pause while the tab is hidden.\n  const pollTarget = widgetPollTarget(widget)\n  const pollComponent = usePollComponent()\n\n  useEffect(\n    () => pollComponent(pollTarget, widget.pollingInterval),\n    [pollComponent, pollTarget, widget.pollingInterval],\n  )\n\n  // `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\n  useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) })\n\n  return (\n    <section\n      className=\"flex flex-col gap-3\"\n      {...(widget.heading ? { 'aria-label': widget.heading } : {})}\n    >\n      {(widget.heading || widget.description) && (\n        <div>\n          {widget.heading && <h3 className=\"text-base font-semibold\">{widget.heading}</h3>}\n          {widget.description && (\n            <p className=\"text-muted-foreground text-sm\">{widget.description}</p>\n          )}\n        </div>\n      )}\n      <div className={cn('grid gap-4', gridColumnsClasses(columns))}>\n        {widget.stats.map((stat, index) => (\n          <StatCard key={index} stat={stat} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nfunction StatCard({ stat }: { stat: StatSchema }) {\n  const content = (\n    <Card\n      {...extraProps(\n        stat.extraAttributes,\n        cn(\n          'relative gap-2 overflow-hidden px-5 py-4',\n          stat.url && 'hover:bg-accent/40 transition-colors',\n        ),\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-muted-foreground text-sm font-medium\">{stat.label}</span>\n          {(stat.value === null || stat.value === '') && stat.placeholder ? (\n            <span\n              className=\"text-muted-foreground text-2xl font-semibold tracking-tight\"\n              data-slot=\"stat-placeholder\"\n            >\n              {stat.placeholder}\n            </span>\n          ) : (\n            <span\n              className={cn(\n                'text-2xl font-semibold tracking-tight',\n                stat.color && textColorClasses[stat.color],\n              )}\n            >\n              {stat.value}\n            </span>\n          )}\n          {stat.description && (\n            <span\n              className={cn(\n                'inline-flex items-center gap-1 text-xs',\n                stat.descriptionColor\n                  ? textColorClasses[stat.descriptionColor]\n                  : 'text-muted-foreground',\n              )}\n            >\n              {stat.descriptionIcon && stat.descriptionIconPosition !== 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n              {stat.description}\n              {stat.descriptionIcon && stat.descriptionIconPosition === 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n            </span>\n          )}\n        </div>\n        {stat.icon && (\n          <span\n            className={cn(\n              'flex size-9 shrink-0 items-center justify-center rounded-md',\n              colorClass(iconBackgroundColorClasses, stat.color, 'gray'),\n            )}\n          >\n            <Icon name={stat.icon} className=\"size-5\" />\n          </span>\n        )}\n      </div>\n      {stat.chart && stat.chart.length > 1 && (\n        <Sparkline data={stat.chart} color={cssColor(stat.chartColor ?? stat.color)} />\n      )}\n    </Card>\n  )\n\n  if (stat.url) {\n    return stat.openUrlInNewTab ? (\n      <a href={stat.url} target=\"_blank\" rel=\"noopener noreferrer\">\n        {content}\n        <NewTabHint />\n      </a>\n    ) : (\n      <Link href={stat.url}>{content}</Link>\n    )\n  }\n\n  return content\n}\n\nfunction Sparkline({ data, color }: { data: number[]; color: string }) {\n  const width = 200\n  const height = 40\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const points = data.map(\n    (value, index) =>\n      [\n        (index / (data.length - 1)) * width,\n        height - ((value - min) / range) * (height - 4) - 2,\n      ] as const,\n  )\n  const path = points\n    .map(([x, y], index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)\n    .join(' ')\n  const area = `${path} L${width},${height} L0,${height} Z`\n\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      className=\"mt-1 h-10 w-full\"\n      preserveAspectRatio=\"none\"\n      aria-hidden=\"true\"\n      data-slot=\"stat-chart\"\n    >\n      <path\n        d={area}\n        fill={color}\n        data-slot=\"stat-chart-area\"\n        style={{ opacity: 'var(--stat-chart-fill-opacity, 0.12)' }}\n      />\n      <path\n        d={path}\n        fill=\"none\"\n        stroke={color}\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        data-slot=\"stat-chart-line\"\n        style={{ strokeWidth: 'var(--stat-chart-stroke-width, 2)' }}\n      />\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAgB,oBAAoB,EAAE,UAAiD;CACrF,MAAM,UAAU,OAAO,WAAW;EAChC,SAAS;EACT,IAAI,KAAK,IAAI,OAAO,MAAM,QAAQ,CAAC;EACnC,IAAI,KAAK,IAAI,OAAO,MAAM,QAAQ,CAAC;CACrC;CAIA,MAAM,aAAa,iBAAiB,MAAM;CAC1C,MAAM,gBAAgB,iBAAiB;CAEvC,gBACQ,cAAc,YAAY,OAAO,eAAe,GACtD;EAAC;EAAe;EAAY,OAAO;CAAe,CACpD;CAGA,eAAe,OAAO,MAAM,YAAY,EAAE,SAAS,QAAQ,OAAO,eAAe,EAAE,CAAC;CAEpF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,GAAK,OAAO,UAAU,EAAE,cAAc,OAAO,QAAQ,IAAI,CAAC;EAF5D,UAAA,EAII,OAAO,WAAW,OAAO,gBACzB,qBAAC,OAAD,EAAA,UAAA,CACG,OAAO,WAAW,oBAAC,MAAD;GAAI,WAAU;GAA2B,UAAA,OAAO;EAAY,CAAA,GAC9E,OAAO,eACN,oBAAC,KAAD;GAAG,WAAU;GAAiC,UAAA,OAAO;EAAe,CAAA,CAEnE,EAAA,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAW,GAAG,cAAc,mBAAmB,OAAO,CAAC;GACzD,UAAA,OAAO,MAAM,KAAK,MAAM,UACvB,oBAAC,UAAD,EAA4B,KAAO,GAApB,KAAoB,CACpC;EACE,CAAA,CACE;;AAEb;AAEA,SAAS,SAAS,EAAE,QAA8B;CAChD,MAAM,UACJ,qBAAC,MAAD;EACE,GAAI,WACF,KAAK,iBACL,GACE,4CACA,KAAK,OAAO,sCACd,CACF;EAPF,UAAA,CASE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAA6C,UAAA,KAAK;KAAY,CAAA;MAC5E,KAAK,UAAU,QAAQ,KAAK,UAAU,OAAO,KAAK,cAClD,oBAAC,QAAD;MACE,WAAU;MACV,aAAU;MAET,UAAA,KAAK;KACF,CAAA,IAEN,oBAAC,QAAD;MACE,WAAW,GACT,yCACA,KAAK,SAAS,iBAAiB,KAAK,MACtC;MAEC,UAAA,KAAK;KACF,CAAA;KAEP,KAAK,eACJ,qBAAC,QAAD;MACE,WAAW,GACT,0CACA,KAAK,mBACD,iBAAiB,KAAK,oBACtB,uBACN;MANF,UAAA;OAQG,KAAK,mBAAmB,KAAK,4BAA4B,WACxD,oBAAC,MAAD;QAAM,MAAM,KAAK;QAAiB,WAAU;OAAY,CAAA;OAEzD,KAAK;OACL,KAAK,mBAAmB,KAAK,4BAA4B,WACxD,oBAAC,MAAD;QAAM,MAAM,KAAK;QAAiB,WAAU;OAAY,CAAA;MAEtD;;IAEL;GACJ,CAAA,GAAA,KAAK,QACJ,oBAAC,QAAD;IACE,WAAW,GACT,+DACA,WAAW,4BAA4B,KAAK,OAAO,MAAM,CAC3D;IAEA,UAAA,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAM,WAAU;IAAU,CAAA;GACvC,CAAA,CAEL;EACJ,CAAA,GAAA,KAAK,SAAS,KAAK,MAAM,SAAS,KACjC,oBAAC,WAAD;GAAW,MAAM,KAAK;GAAO,OAAO,SAAS,KAAK,cAAc,KAAK,KAAK;EAAI,CAAA,CAE5E;;CAGR,IAAI,KAAK,KACP,OAAO,KAAK,kBACV,qBAAC,KAAD;EAAG,MAAM,KAAK;EAAK,QAAO;EAAS,KAAI;EAAvC,UAAA,CACG,SACD,oBAAC,YAAD,CAAa,CAAA,CACZ;CAEH,CAAA,IAAA,oBAAC,MAAD;EAAM,MAAM,KAAK;EAAM,UAAA;CAAc,CAAA;CAIzC,OAAO;AACT;AAEA,SAAS,UAAU,EAAE,MAAM,SAA4C;CACrE,MAAM,QAAQ;CACd,MAAM,SAAS;CACf,MAAM,MAAM,KAAK,IAAI,GAAG,IAAI;CAE5B,MAAM,QADM,KAAK,IAAI,GAAG,IACR,IAAI,OAAO;CAQ3B,MAAM,OAPS,KAAK,KACjB,OAAO,UACN,CACG,SAAS,KAAK,SAAS,KAAM,OAC9B,UAAW,QAAQ,OAAO,QAAU,KAAc,CACpD,CAEc,CAAC,CAChB,KAAK,CAAC,GAAG,IAAI,UAAU,GAAG,UAAU,IAAI,MAAM,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,CACnF,KAAK,GAAG;CACX,MAAM,OAAO,GAAG,KAAK,IAAI,MAAM,GAAG,OAAO,MAAM,OAAO;CAEtD,OACE,qBAAC,OAAD;EACE,SAAS,OAAO,MAAM,GAAG;EACzB,WAAU;EACV,qBAAoB;EACpB,eAAY;EACZ,aAAU;EALZ,UAAA,CAOE,oBAAC,QAAD;GACE,GAAG;GACH,MAAM;GACN,aAAU;GACV,OAAO,EAAE,SAAS,uCAAuC;EAC1D,CAAA,GACD,oBAAC,QAAD;GACE,GAAG;GACH,MAAK;GACL,QAAQ;GACR,gBAAe;GACf,eAAc;GACd,aAAU;GACV,OAAO,EAAE,aAAa,oCAAoC;EAC3D,CAAA,CACE;;AAET"}
+{"version":3,"file":"stats-overview.js","names":[],"sources":["../../../src/components/widgets/stats-overview.tsx"],"sourcesContent":["import type { StatSchema, StatsOverviewWidgetSchema } from '@alfakit/core'\nimport { gridColumnsClasses, widgetPollTarget } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { useEffect } from 'react'\nimport { usePollComponent } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport {\n  colorClass,\n  cssColor,\n  iconBackgroundColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { useLiveUpdates } from '../realtime/live-records-pill'\nimport { Card } from '../ui/card'\n\nexport function StatsOverviewWidget({ widget }: { widget: StatsOverviewWidgetSchema }) {\n  const columns = widget.columns ?? {\n    default: 1,\n    md: Math.min(widget.stats.length, 2),\n    lg: Math.min(widget.stats.length, 4),\n  }\n\n  // Polls refresh only this widget, share one request with other components on the same\n  // interval and pause while the tab is hidden.\n  const pollTarget = widgetPollTarget(widget)\n  const pollComponent = usePollComponent()\n\n  useEffect(\n    () => pollComponent(pollTarget, widget.pollingInterval),\n    [pollComponent, pollTarget, widget.pollingInterval],\n  )\n\n  // `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\n  useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) })\n\n  return (\n    <section\n      className=\"flex flex-col gap-3\"\n      {...(widget.heading ? { 'aria-label': widget.heading } : {})}\n    >\n      {(widget.heading || widget.description) && (\n        <div>\n          {widget.heading && <h3 className=\"text-base font-semibold\">{widget.heading}</h3>}\n          {widget.description && (\n            <p className=\"text-muted-foreground text-sm\">{widget.description}</p>\n          )}\n        </div>\n      )}\n      <div className={cn('grid gap-4', gridColumnsClasses(columns))}>\n        {widget.stats.map((stat, index) => (\n          <StatCard key={index} stat={stat} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nfunction StatCard({ stat }: { stat: StatSchema }) {\n  const content = (\n    <Card\n      {...extraProps(\n        stat.extraAttributes,\n        cn(\n          'relative gap-2 overflow-hidden px-5 py-4',\n          stat.url && 'hover:bg-accent/40 transition-colors',\n        ),\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-muted-foreground text-sm font-medium\">\n            <bdi>{stat.label}</bdi>\n          </span>\n          {(stat.value === null || stat.value === '') && stat.placeholder ? (\n            <span\n              className=\"text-muted-foreground text-2xl font-semibold tracking-tight\"\n              data-slot=\"stat-placeholder\"\n            >\n              {stat.placeholder}\n            </span>\n          ) : (\n            <span\n              className={cn(\n                'text-2xl font-semibold tracking-tight',\n                stat.color && textColorClasses[stat.color],\n              )}\n            >\n              <bdi>{stat.value}</bdi>\n            </span>\n          )}\n          {stat.description && (\n            <span\n              className={cn(\n                'inline-flex items-center gap-1 text-xs',\n                stat.descriptionColor\n                  ? textColorClasses[stat.descriptionColor]\n                  : 'text-muted-foreground',\n              )}\n            >\n              {stat.descriptionIcon && stat.descriptionIconPosition !== 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n              {/* Mixed-direction text (a Latin \"-3% this month\" in Arabic) keeps its order. */}\n              <bdi>{stat.description}</bdi>\n              {stat.descriptionIcon && stat.descriptionIconPosition === 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n            </span>\n          )}\n        </div>\n        {stat.icon && (\n          <span\n            className={cn(\n              'flex size-9 shrink-0 items-center justify-center rounded-md',\n              colorClass(iconBackgroundColorClasses, stat.color, 'gray'),\n            )}\n          >\n            <Icon name={stat.icon} className=\"size-5\" />\n          </span>\n        )}\n      </div>\n      {stat.chart && stat.chart.length > 1 && (\n        <Sparkline data={stat.chart} color={cssColor(stat.chartColor ?? stat.color)} />\n      )}\n    </Card>\n  )\n\n  if (stat.url) {\n    return stat.openUrlInNewTab ? (\n      <a href={stat.url} target=\"_blank\" rel=\"noopener noreferrer\">\n        {content}\n        <NewTabHint />\n      </a>\n    ) : (\n      <Link href={stat.url}>{content}</Link>\n    )\n  }\n\n  return content\n}\n\nfunction Sparkline({ data, color }: { data: number[]; color: string }) {\n  const width = 200\n  const height = 40\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const points = data.map(\n    (value, index) =>\n      [\n        (index / (data.length - 1)) * width,\n        height - ((value - min) / range) * (height - 4) - 2,\n      ] as const,\n  )\n  const path = points\n    .map(([x, y], index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)\n    .join(' ')\n  const area = `${path} L${width},${height} L0,${height} Z`\n\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      className=\"mt-1 h-10 w-full\"\n      preserveAspectRatio=\"none\"\n      aria-hidden=\"true\"\n      data-slot=\"stat-chart\"\n    >\n      <path\n        d={area}\n        fill={color}\n        data-slot=\"stat-chart-area\"\n        style={{ opacity: 'var(--stat-chart-fill-opacity, 0.12)' }}\n      />\n      <path\n        d={path}\n        fill=\"none\"\n        stroke={color}\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        data-slot=\"stat-chart-line\"\n        style={{ strokeWidth: 'var(--stat-chart-stroke-width, 2)' }}\n      />\n    </svg>\n  )\n}\n"],"mappings":"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"}

package/dist/eject-manifest.json

@@ -1,8 +1,8 @@
 {
   "package": "@alfakit/react",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "adapter": "react",
-  "generatedAt": "2026-10-25T05:35:46.937Z",
+  "generatedAt": "2026-10-25T11:21:24.983Z",
   "components": {
     "TextInput": {
       "file": "src/components/fields/text-input.tsx",

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

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

package/dist/pages/page.js

@@ -18,7 +18,7 @@ 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 { BlankLayout } from "../layouts/blank-layout.js";
-import { RELATION_QUERY_KEY, applyBodyAttributes, hasRelationManagerTabs, isLazyPlaceholder, openDefaultAction, relationManagerTabs, relationTabFromQuery, relationTabSlug, resolveLazyComponents } from "@alfakit/core";
+import { RELATION_QUERY_KEY, applyBodyAttributes, customPageProps, 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";
@@ -47,12 +47,9 @@ function AlfakitPage() {
 				token: page.token,
 				component: "page"
 			},
-			children: [/* @__PURE__ */ jsx(Head, { title }), /* @__PURE__ */ jsx(PageShell, {
-				page,
-				children: /* @__PURE__ */ jsx(Custom, {
-					...page.view.props,
-					page
-				})
+			children: [/* @__PURE__ */ jsx(Head, { title }), /* @__PURE__ */ jsx(Custom, {
+				...customPageProps(page.view.props, props),
+				page
 			})]
 		});
 	}

package/dist/pages/page.js.map

@@ -1 +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 {\n  useActionRunner,\n  useAlfakit,\n  useAlfakitProps,\n  usePanel,\n  useT,\n  type AnyComponent,\n} from '../context'\nimport { BlankLayout } from '../layouts/blank-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\n/**\n * The registered layout: `createAlfakit()` registers the panel's (`panelLayouts`), the starter\n * kit its content layout. Without one the page renders bare: importing the panel layouts here\n * would put the sidebar and top bar in every starter kit page.\n */\nfunction layout(registry: { resolve(key: string): AnyComponent | undefined }, key: string) {\n  return registry.resolve(key) ?? BlankLayout\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      layout(registry, 'layout:auth'),\n      { heading: page.heading ?? page.title, subheading: page.subheading, page },\n      children,\n    )\n  }\n\n  if (page.layout === 'blank') {\n    return createElement(layout(registry, 'layout:blank'), { page }, children)\n  }\n\n  if (page.layout === 'fullscreen') {\n    return createElement(layout(registry, 'layout:fullscreen'), { page }, children)\n  }\n\n  return createElement(\n    layout(registry, 'layout:app'),\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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"}
+{"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  customPageProps,\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 {\n  useActionRunner,\n  useAlfakit,\n  useAlfakitProps,\n  usePanel,\n  useT,\n  type AnyComponent,\n} from '../context'\nimport { BlankLayout } from '../layouts/blank-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        {/* The component brings its own PageShell (as in panel mode, where it is the Inertia\n            page itself) and takes the live props, so `reloadProps()` reaches it. */}\n        <Custom\n          {...customPageProps(page.view.props, props as Record<string, unknown>)}\n          page={page}\n        />\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\n/**\n * The registered layout: `createAlfakit()` registers the panel's (`panelLayouts`), the starter\n * kit its content layout. Without one the page renders bare: importing the panel layouts here\n * would put the sidebar and top bar in every starter kit page.\n */\nfunction layout(registry: { resolve(key: string): AnyComponent | undefined }, key: string) {\n  return registry.resolve(key) ?? BlankLayout\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      layout(registry, 'layout:auth'),\n      { heading: page.heading ?? page.title, subheading: page.subheading, page },\n      children,\n    )\n  }\n\n  if (page.layout === 'blank') {\n    return createElement(layout(registry, 'layout:blank'), { page }, children)\n  }\n\n  if (page.layout === 'fullscreen') {\n    return createElement(layout(registry, 'layout:fullscreen'), { page }, children)\n  }\n\n  return createElement(\n    layout(registry, 'layout:app'),\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/standalone/alfakit-component.d.ts

@@ -15,16 +15,6 @@ export interface AlfakitComponentProps {
   /** Render each content block yourself (e.g. to lay a form and a table side by side). */
   children?: (blocks: ContentBlock[], render: (block: ContentBlock) => ReactNode) => ReactNode;
 }
-/**
- * Renders an Alfakit component outside a panel: a form, table, infolist, widgets or any mix
- * (`AlfaSix\Alfakit\Standalone\*`) in any Inertia page of the application. Needs no
- * `createAlfakit()` and no panel layout: it provides its own translator, registry, action
- * runner and modals, and inherits the application's shadcn tokens.
- *
- * ```tsx
- * <AlfakitComponent component={orders} className="max-w-4xl" />
- * ```
- */
 export declare function AlfakitComponent({ component, components, className, header, footer, children }: AlfakitComponentProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=alfakit-component.d.ts.map

package/dist/standalone/alfakit-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alfakit-component.d.ts","names":[],"sources":["../../src/standalone/alfakit-component.tsx"],"mappings":";;;;iBAiCiB;;EAEf,WAAW;;EAEX,aAAa,eAAe;EAC5B;;EAEA,SAAS;;EAET,SAAS;;EAET,YAAY,QAAQ,gBAAgB,SAAS,OAAO,iBAAiB,cAAc;;;;;;;;;;;;wBAarE,mBACd,WACA,YACA,WACA,QACA,QACA,YACC,wCAAqB,IAAA"}
+{"version":3,"file":"alfakit-component.d.ts","names":[],"sources":["../../src/standalone/alfakit-component.tsx"],"mappings":";;;;iBAiCiB;;EAEf,WAAW;;EAEX,aAAa,eAAe;EAC5B;;EAEA,SAAS;;EAET,SAAS;;EAET,YAAY,QAAQ,gBAAgB,SAAS,OAAO,iBAAiB,cAAc;;wBAgBrE,mBACd,WACA,YACA,WACA,QACA,QACA,YACC,wCAAqB,IAAA"}

package/dist/standalone/alfakit-component.js

@@ -9,7 +9,7 @@ import { ActionModals } from "../components/actions/action-modals.js";
 import { AlfakitToaster } from "./alfakit-toaster.js";
 import { StandaloneComponentState, findStandalonePropName, registerStandaloneProp, standalonePanelSchema } from "@alfakit/core";
 import { usePage } from "@inertiajs/react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Direction } from "radix-ui";
 //#region src/standalone/alfakit-component.tsx
@@ -23,6 +23,7 @@ import { Direction } from "radix-ui";
 * <AlfakitComponent component={orders} className="max-w-4xl" />
 * ```
 */
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function AlfakitComponent({ component, components, className, header, footer, children }) {
 	const parent = useOptionalAlfakit();
 	const props = useOptionalPageProps();
@@ -73,7 +74,7 @@ function AlfakitComponent({ component, components, className, header, footer, ch
 		ensureStandaloneRuntime();
 	}, []);
 	const propName = findStandalonePropName(props, component);
-	useEffect(() => registerStandaloneProp(propName ?? null), [propName]);
+	useIsomorphicLayoutEffect(() => registerStandaloneProp(propName ?? null), [propName]);
 	useEffect(() => {
 		state.loadLazy(component);
 	}, [state, component.token]);

package/dist/standalone/alfakit-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"alfakit-component.js","names":[],"sources":["../../src/standalone/alfakit-component.tsx"],"sourcesContent":["import {\n  StandaloneComponentState,\n  findStandalonePropName,\n  registerStandaloneProp,\n  standalonePanelSchema,\n  type ContentBlock,\n  type StandaloneComponentSchema,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { Direction } from 'radix-ui'\nimport { useEffect, useMemo, useState, type ReactNode } from 'react'\nimport { PageActionProvider } from '../components/actions/action-context'\nimport { ActionList } from '../components/actions/action-list'\nimport { ActionModals } from '../components/actions/action-modals'\nimport { TooltipProvider } from '../components/ui/tooltip'\nimport {\n  AlfakitProvider,\n  StandaloneProvider,\n  useOptionalAlfakit,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { cn } from '../lib/utils'\nimport { ContentBlockRenderer } from '../pages/page'\nimport { AlfakitToaster } from './alfakit-toaster'\nimport {\n  claimToaster,\n  createStandaloneContext,\n  createStandaloneRegistry,\n  ensureStandaloneRuntime,\n  hasToaster,\n} from './runtime'\n\nexport interface AlfakitComponentProps {\n  /** The payload: `ContactForm::make()` passed as an Inertia prop. */\n  component: StandaloneComponentSchema\n  /** Renderer overrides for this instance (`{ TextInput: MyInput }`), on top of `configureAlfakit()`. */\n  components?: Record<string, AnyComponent>\n  className?: string\n  /** Rendered above the content blocks (after the heading and actions). */\n  header?: ReactNode\n  /** Rendered below the content blocks. */\n  footer?: ReactNode\n  /** Render each content block yourself (e.g. to lay a form and a table side by side). */\n  children?: (blocks: ContentBlock[], render: (block: ContentBlock) => ReactNode) => ReactNode\n}\n\n/**\n * Renders an Alfakit component outside a panel: a form, table, infolist, widgets or any mix\n * (`AlfaSix\\Alfakit\\Standalone\\*`) in any Inertia page of the application. Needs no\n * `createAlfakit()` and no panel layout: it provides its own translator, registry, action\n * runner and modals, and inherits the application's shadcn tokens.\n *\n * ```tsx\n * <AlfakitComponent component={orders} className=\"max-w-4xl\" />\n * ```\n */\nexport function AlfakitComponent({\n  component,\n  components,\n  className,\n  header,\n  footer,\n  children,\n}: AlfakitComponentProps) {\n  const parent = useOptionalAlfakit()\n  const props = useOptionalPageProps()\n  const [, setVersion] = useState(0)\n  // The registry overrides are an object literal in JSX: compare them by their keys.\n  const overrideKeys = Object.keys(components ?? {}).join(',')\n\n  // Lazy and polled schemas of this component, merged into the page it renders.\n  const state = useMemo(\n    () => new StandaloneComponentState(component, () => setVersion((value) => value + 1)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  )\n  state.setComponent(component)\n\n  const context = useMemo<AlfakitContextValue>(() => {\n    const poll = (target: string, interval: string | number | null | undefined) =>\n      state.poll(target, interval)\n    const refresh = (targets: string[]) => state.refresh(targets)\n\n    if (parent) {\n      // Inside a panel page: the panel's registry and translator, but this component's own\n      // action runner, so its actions post to its own endpoints with its own token (sharing\n      // the panel's runner sent them to the panel's endpoint: 403).\n      const own = createStandaloneContext(\n        { action: component.endpoints.action, modal: component.endpoints.modal },\n        components,\n        poll,\n      )\n\n      return {\n        ...parent,\n        actions: own.actions,\n        registry: createStandaloneRegistry(components, parent.registry),\n        poll,\n        refresh,\n      }\n    }\n\n    return {\n      ...createStandaloneContext(\n        { action: component.endpoints.action, modal: component.endpoints.modal },\n        components,\n        poll,\n      ),\n      refresh,\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parent, state, overrideKeys])\n\n  // Endpoints follow the latest payload (they change per locale or path).\n  context.actions.setEndpoints({\n    action: component.endpoints.action,\n    modal: component.endpoints.modal,\n  })\n\n  // Inside `createAlfakit()` the panel feeds the shared translator; on a page without the\n  // `alfakit` prop (the rest of the app) the component's own translations apply.\n  const ownsTranslator = !parent || !props?.alfakit\n\n  if (ownsTranslator) {\n    context.translator.setTranslations(component.translations ?? {})\n    context.translator.setLocale(component.localization?.tag ?? 'en')\n  }\n\n  const panel = useMemo(() => standalonePanelSchema(component), [component])\n  const page = state.page\n  const direction = component.localization?.direction ?? 'ltr'\n\n  useEffect(() => {\n    ensureStandaloneRuntime()\n  }, [])\n\n  // Partial reloads (sorting, paging, inline edits) request this component's own prop.\n  const propName = findStandalonePropName(props, component)\n\n  useEffect(() => registerStandaloneProp(propName ?? null), [propName])\n\n  useEffect(() => {\n    void state.loadLazy(component)\n    // The token identifies a new payload.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state, component.token])\n\n  // Toasts: use the layout's <AlfakitToaster /> when there is one, else the first component\n  // on the page renders one (checked after every component's effects ran).\n  const [ownsToaster, setOwnsToaster] = useState(false)\n\n  useEffect(() => {\n    if (parent) return\n\n    let release: (() => void) | null = null\n    let cancelled = false\n\n    queueMicrotask(() => {\n      if (cancelled || hasToaster()) return\n\n      release = claimToaster()\n      setOwnsToaster(true)\n    })\n\n    return () => {\n      cancelled = true\n      release?.()\n    }\n  }, [parent])\n\n  const render = (block: ContentBlock) => <ContentBlockRenderer key={block.key} block={block} />\n  const actionContext = useMemo(\n    () => ({ token: component.token, component: 'page' }),\n    [component.token],\n  )\n\n  const body = (\n    <PageActionProvider value={actionContext}>\n      <div\n        data-slot=\"standalone\"\n        data-alfakit-component={component.class}\n        dir={direction}\n        className={cn('flex flex-col gap-6', className)}\n      >\n        {(page.heading || page.headerActions?.length) && (\n          <header\n            data-slot=\"page-header\"\n            className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n          >\n            <div className=\"min-w-0\">\n              {page.heading && (\n                <h2 className=\"text-xl font-semibold tracking-tight\">{page.heading}</h2>\n              )}\n              {page.subheading && (\n                <p className=\"text-muted-foreground mt-1 text-sm\">{page.subheading}</p>\n              )}\n            </div>\n            {page.headerActions && page.headerActions.length > 0 && (\n              <ActionList\n                actions={page.headerActions}\n                context={actionContext}\n                align=\"end\"\n                className=\"max-w-full shrink-0\"\n              />\n            )}\n          </header>\n        )}\n        {header}\n        {children ? children(page.content, render) : page.content.map(render)}\n        {footer}\n      </div>\n      <ActionModals />\n      {ownsToaster && <AlfakitToaster claimed dir={direction} />}\n    </PageActionProvider>\n  )\n\n  return (\n    <AlfakitProvider value={context}>\n      <StandaloneProvider value={{ panel, page }}>\n        {parent ? (\n          body\n        ) : (\n          <Direction.Provider dir={direction}>\n            <TooltipProvider delayDuration={0}>{body}</TooltipProvider>\n          </Direction.Provider>\n        )}\n      </StandaloneProvider>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The host page's Inertia props, or undefined when rendered outside an Inertia app (a\n * component test, Storybook, a plain server render): partial reloads then reload every prop.\n */\nfunction useOptionalPageProps(): Record<string, unknown> | undefined {\n  try {\n    return usePage().props as Record<string, unknown>\n  } catch {\n    return undefined\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alfakit-component.js","names":[],"sources":["../../src/standalone/alfakit-component.tsx"],"sourcesContent":["import {\n  StandaloneComponentState,\n  findStandalonePropName,\n  registerStandaloneProp,\n  standalonePanelSchema,\n  type ContentBlock,\n  type StandaloneComponentSchema,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { Direction } from 'radix-ui'\nimport { useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from 'react'\nimport { PageActionProvider } from '../components/actions/action-context'\nimport { ActionList } from '../components/actions/action-list'\nimport { ActionModals } from '../components/actions/action-modals'\nimport { TooltipProvider } from '../components/ui/tooltip'\nimport {\n  AlfakitProvider,\n  StandaloneProvider,\n  useOptionalAlfakit,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { cn } from '../lib/utils'\nimport { ContentBlockRenderer } from '../pages/page'\nimport { AlfakitToaster } from './alfakit-toaster'\nimport {\n  claimToaster,\n  createStandaloneContext,\n  createStandaloneRegistry,\n  ensureStandaloneRuntime,\n  hasToaster,\n} from './runtime'\n\nexport interface AlfakitComponentProps {\n  /** The payload: `ContactForm::make()` passed as an Inertia prop. */\n  component: StandaloneComponentSchema\n  /** Renderer overrides for this instance (`{ TextInput: MyInput }`), on top of `configureAlfakit()`. */\n  components?: Record<string, AnyComponent>\n  className?: string\n  /** Rendered above the content blocks (after the heading and actions). */\n  header?: ReactNode\n  /** Rendered below the content blocks. */\n  footer?: ReactNode\n  /** Render each content block yourself (e.g. to lay a form and a table side by side). */\n  children?: (blocks: ContentBlock[], render: (block: ContentBlock) => ReactNode) => ReactNode\n}\n\n/**\n * Renders an Alfakit component outside a panel: a form, table, infolist, widgets or any mix\n * (`AlfaSix\\Alfakit\\Standalone\\*`) in any Inertia page of the application. Needs no\n * `createAlfakit()` and no panel layout: it provides its own translator, registry, action\n * runner and modals, and inherits the application's shadcn tokens.\n *\n * ```tsx\n * <AlfakitComponent component={orders} className=\"max-w-4xl\" />\n * ```\n */\n// `useLayoutEffect` warns during a server render, where nothing registers anyway.\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect\n\nexport function AlfakitComponent({\n  component,\n  components,\n  className,\n  header,\n  footer,\n  children,\n}: AlfakitComponentProps) {\n  const parent = useOptionalAlfakit()\n  const props = useOptionalPageProps()\n  const [, setVersion] = useState(0)\n  // The registry overrides are an object literal in JSX: compare them by their keys.\n  const overrideKeys = Object.keys(components ?? {}).join(',')\n\n  // Lazy and polled schemas of this component, merged into the page it renders.\n  const state = useMemo(\n    () => new StandaloneComponentState(component, () => setVersion((value) => value + 1)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  )\n  state.setComponent(component)\n\n  const context = useMemo<AlfakitContextValue>(() => {\n    const poll = (target: string, interval: string | number | null | undefined) =>\n      state.poll(target, interval)\n    const refresh = (targets: string[]) => state.refresh(targets)\n\n    if (parent) {\n      // Inside a panel page: the panel's registry and translator, but this component's own\n      // action runner, so its actions post to its own endpoints with its own token (sharing\n      // the panel's runner sent them to the panel's endpoint: 403).\n      const own = createStandaloneContext(\n        { action: component.endpoints.action, modal: component.endpoints.modal },\n        components,\n        poll,\n      )\n\n      return {\n        ...parent,\n        actions: own.actions,\n        registry: createStandaloneRegistry(components, parent.registry),\n        poll,\n        refresh,\n      }\n    }\n\n    return {\n      ...createStandaloneContext(\n        { action: component.endpoints.action, modal: component.endpoints.modal },\n        components,\n        poll,\n      ),\n      refresh,\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parent, state, overrideKeys])\n\n  // Endpoints follow the latest payload (they change per locale or path).\n  context.actions.setEndpoints({\n    action: component.endpoints.action,\n    modal: component.endpoints.modal,\n  })\n\n  // Inside `createAlfakit()` the panel feeds the shared translator; on a page without the\n  // `alfakit` prop (the rest of the app) the component's own translations apply.\n  const ownsTranslator = !parent || !props?.alfakit\n\n  if (ownsTranslator) {\n    context.translator.setTranslations(component.translations ?? {})\n    context.translator.setLocale(component.localization?.tag ?? 'en')\n  }\n\n  const panel = useMemo(() => standalonePanelSchema(component), [component])\n  const page = state.page\n  const direction = component.localization?.direction ?? 'ltr'\n\n  useEffect(() => {\n    ensureStandaloneRuntime()\n  }, [])\n\n  // Partial reloads (sorting, paging, inline edits) request this component's own prop.\n  const propName = findStandalonePropName(props, component)\n\n  // A layout effect runs before the children's effects: a `deferLoading()` table's first\n  // reload must already ask for this component's prop, not the panel `page` prop.\n  useIsomorphicLayoutEffect(() => registerStandaloneProp(propName ?? null), [propName])\n\n  useEffect(() => {\n    void state.loadLazy(component)\n    // The token identifies a new payload.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state, component.token])\n\n  // Toasts: use the layout's <AlfakitToaster /> when there is one, else the first component\n  // on the page renders one (checked after every component's effects ran).\n  const [ownsToaster, setOwnsToaster] = useState(false)\n\n  useEffect(() => {\n    if (parent) return\n\n    let release: (() => void) | null = null\n    let cancelled = false\n\n    queueMicrotask(() => {\n      if (cancelled || hasToaster()) return\n\n      release = claimToaster()\n      setOwnsToaster(true)\n    })\n\n    return () => {\n      cancelled = true\n      release?.()\n    }\n  }, [parent])\n\n  const render = (block: ContentBlock) => <ContentBlockRenderer key={block.key} block={block} />\n  const actionContext = useMemo(\n    () => ({ token: component.token, component: 'page' }),\n    [component.token],\n  )\n\n  const body = (\n    <PageActionProvider value={actionContext}>\n      <div\n        data-slot=\"standalone\"\n        data-alfakit-component={component.class}\n        dir={direction}\n        className={cn('flex flex-col gap-6', className)}\n      >\n        {(page.heading || page.headerActions?.length) && (\n          <header\n            data-slot=\"page-header\"\n            className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n          >\n            <div className=\"min-w-0\">\n              {page.heading && (\n                <h2 className=\"text-xl font-semibold tracking-tight\">{page.heading}</h2>\n              )}\n              {page.subheading && (\n                <p className=\"text-muted-foreground mt-1 text-sm\">{page.subheading}</p>\n              )}\n            </div>\n            {page.headerActions && page.headerActions.length > 0 && (\n              <ActionList\n                actions={page.headerActions}\n                context={actionContext}\n                align=\"end\"\n                className=\"max-w-full shrink-0\"\n              />\n            )}\n          </header>\n        )}\n        {header}\n        {children ? children(page.content, render) : page.content.map(render)}\n        {footer}\n      </div>\n      <ActionModals />\n      {ownsToaster && <AlfakitToaster claimed dir={direction} />}\n    </PageActionProvider>\n  )\n\n  return (\n    <AlfakitProvider value={context}>\n      <StandaloneProvider value={{ panel, page }}>\n        {parent ? (\n          body\n        ) : (\n          <Direction.Provider dir={direction}>\n            <TooltipProvider delayDuration={0}>{body}</TooltipProvider>\n          </Direction.Provider>\n        )}\n      </StandaloneProvider>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The host page's Inertia props, or undefined when rendered outside an Inertia app (a\n * component test, Storybook, a plain server render): partial reloads then reload every prop.\n */\nfunction useOptionalPageProps(): Record<string, unknown> | undefined {\n  try {\n    return usePage().props as Record<string, unknown>\n  } catch {\n    return undefined\n  }\n}\n"],"mappings":"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"}

package/dist/standalone/runtime.js

@@ -1,7 +1,7 @@
 import { createDefaultRegistry } from "../registry.js";
 import { getStandaloneDefaults } from "./configure.js";
 import { showToast } from "../components/notifications/flash-toasts.js";
-import { ActionRunner, ComponentRegistry, FlashNotificationTracker, Translator, reloadOnExpiredPage, resolveRequestErrorNotification } from "@alfakit/core";
+import { ActionRunner, ComponentRegistry, FlashNotificationTracker, Translator, installPrefetchInvalidation, reloadOnExpiredPage, resolveRequestErrorNotification } from "@alfakit/core";
 import { router } from "@inertiajs/react";
 //#region src/standalone/runtime.ts
 const isServer = typeof window === "undefined";
@@ -12,6 +12,7 @@ function ensureStandaloneRuntime() {
 	if (isServer || browserReady) return;
 	browserReady = true;
 	reloadOnExpiredPage();
+	installPrefetchInvalidation();
 }
 /**
 * The registry of a standalone component: the built-in renderers, the `configureAlfakit()`

package/dist/standalone/runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.js","names":[],"sources":["../../src/standalone/runtime.ts"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  FlashNotificationTracker,\n  Translator,\n  reloadOnExpiredPage,\n  resolveRequestErrorNotification,\n  type NotificationSchema,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { showToast } from '../components/notifications/flash-toasts'\nimport type { AlfakitContextValue, AnyComponent } from '../context'\nimport { createDefaultRegistry } from '../registry'\nimport { getStandaloneDefaults } from './configure'\n\nconst isServer = typeof window === 'undefined'\n\n// Translations are the same for every component of a page, so the browser shares one\n// translator; a server render gets its own so concurrent requests never share a locale.\nconst browserTranslator = isServer ? null : new Translator()\n\nlet browserReady = false\n\n/** Browser-wide listeners every panel app installs; once per page load. */\nexport function ensureStandaloneRuntime(): void {\n  if (isServer || browserReady) return\n\n  browserReady = true\n  reloadOnExpiredPage()\n}\n\n/**\n * The registry of a standalone component: the built-in renderers, the `configureAlfakit()`\n * defaults (or the surrounding panel's registry), then the component's own overrides.\n */\nexport function createStandaloneRegistry(\n  overrides?: Record<string, AnyComponent>,\n  base?: ComponentRegistry<AnyComponent>,\n): ComponentRegistry<AnyComponent> {\n  if (!base) {\n    return createDefaultRegistry()\n      .registerMany(getStandaloneDefaults().components ?? {})\n      .registerMany(overrides ?? {})\n  }\n\n  if (!overrides || Object.keys(overrides).length === 0) {\n    return base\n  }\n\n  const registry = new ComponentRegistry<AnyComponent>()\n\n  for (const type of base.types()) {\n    const component = base.resolve(type)\n\n    if (component) registry.register(type, component)\n  }\n\n  return registry.registerMany(overrides)\n}\n\n/**\n * The context value of one `<AlfakitComponent>` rendered outside `createAlfakit()`: its\n * own registry and action runner (so its modals are its own), the shared translator.\n */\nexport function createStandaloneContext(\n  endpoints: { action: string; modal: string },\n  overrides: Record<string, AnyComponent> | undefined,\n  poll: AlfakitContextValue['poll'],\n): AlfakitContextValue {\n  const translator = browserTranslator ?? new Translator()\n\n  return {\n    registry: createStandaloneRegistry(overrides),\n    pages: {},\n    translator,\n    actions: new ActionRunner({\n      endpoints: { ...endpoints },\n      // Outside a panel there is no `errorNotifications` config: a generic toast.\n      onError: (error) => {\n        const notification = resolveRequestErrorNotification(\n          error,\n          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n    poll,\n  }\n}\n\n// ---------------------------------------------------------------- Toaster ownership\n\nlet toasters = 0\n\n/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */\nexport function claimToaster(): () => void {\n  toasters++\n\n  return () => {\n    toasters--\n  }\n}\n\nexport function hasToaster(): boolean {\n  return toasters > 0\n}\n\n// ---------------------------------------------------------------- Flashed notifications\n\nconst flashTracker = new FlashNotificationTracker()\nlet flashRegistry: ComponentRegistry<AnyComponent> | null = null\nlet flashListening = false\n\n/**\n * Show the notifications the server flashed (`Notification::make()->send()`), from the\n * `flash` Inertia event after each visit and from the initial page (whose event fired\n * before the app mounted). One listener per page load, so it survives layouts that remount\n * between visits; the registry of the last mounted toaster renders custom toast views.\n */\nexport function ensureFlashToasts(registry: ComponentRegistry<AnyComponent>): void {\n  flashRegistry = registry\n\n  if (isServer || flashListening) return\n\n  flashListening = true\n\n  const show = (flash: unknown) => {\n    const flashed = (flash as { alfakitNotifications?: NotificationSchema[] } | undefined)\n      ?.alfakitNotifications\n\n    for (const notification of flashTracker.fresh(flashed)) {\n      showToast(notification, flashRegistry?.resolve(notification.view ?? ''))\n    }\n  }\n\n  show(initialFlash())\n  router.on('flash', (event) => show(event.detail.flash))\n}\n\n/** The initial page's flash data (fired as an event before the app mounted). */\nexport function initialFlash(): unknown {\n  if (isServer) return undefined\n\n  try {\n    const page = document.querySelector<HTMLElement>('[data-page]')?.dataset.page\n\n    return page ? (JSON.parse(page) as { flash?: unknown }).flash : undefined\n  } catch {\n    return undefined\n  }\n}\n"],"mappings":";;;;;;AAeA,MAAM,WAAW,OAAO,WAAW;AAInC,MAAM,oBAAoB,WAAW,OAAO,IAAI,WAAW;AAE3D,IAAI,eAAe;;AAGnB,SAAgB,0BAAgC;CAC9C,IAAI,YAAY,cAAc;CAE9B,eAAe;CACf,oBAAoB;AACtB;;;;;AAMA,SAAgB,yBACd,WACA,MACiC;CACjC,IAAI,CAAC,MACH,OAAO,sBAAsB,CAAC,CAC3B,aAAa,sBAAsB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CACtD,aAAa,aAAa,CAAC,CAAC;CAGjC,IAAI,CAAC,aAAa,OAAO,KAAK,SAAS,CAAC,CAAC,WAAW,GAClD,OAAO;CAGT,MAAM,WAAW,IAAI,kBAAgC;CAErD,KAAK,MAAM,QAAQ,KAAK,MAAM,GAAG;EAC/B,MAAM,YAAY,KAAK,QAAQ,IAAI;EAEnC,IAAI,WAAW,SAAS,SAAS,MAAM,SAAS;CAClD;CAEA,OAAO,SAAS,aAAa,SAAS;AACxC;;;;;AAMA,SAAgB,wBACd,WACA,WACA,MACqB;CACrB,MAAM,aAAa,qBAAqB,IAAI,WAAW;CAEvD,OAAO;EACL,UAAU,yBAAyB,SAAS;EAC5C,OAAO,CAAC;EACR;EACA,SAAS,IAAI,aAAa;GACxB,WAAW,EAAE,GAAG,UAAU;GAE1B,UAAU,UAAU;IAClB,MAAM,eAAe,gCACnB,OACA,OACC,KAAK,cAAc,aAAa,WAAW,EAAE,KAAK,cAAc,QAAQ,CAC3E;IAEA,IAAI,cAAc,UAAU,YAAY;GAC1C;EACF,CAAC;EACD;CACF;AACF;AAIA,IAAI,WAAW;;AAGf,SAAgB,eAA2B;CACzC;CAEA,aAAa;EACX;CACF;AACF;AAEA,SAAgB,aAAsB;CACpC,OAAO,WAAW;AACpB;AAIA,MAAM,eAAe,IAAI,yBAAyB;AAClD,IAAI,gBAAwD;AAC5D,IAAI,iBAAiB;;;;;;;AAQrB,SAAgB,kBAAkB,UAAiD;CACjF,gBAAgB;CAEhB,IAAI,YAAY,gBAAgB;CAEhC,iBAAiB;CAEjB,MAAM,QAAQ,UAAmB;EAC/B,MAAM,UAAW,OACb;EAEJ,KAAK,MAAM,gBAAgB,aAAa,MAAM,OAAO,GACnD,UAAU,cAAc,eAAe,QAAQ,aAAa,QAAQ,EAAE,CAAC;CAE3E;CAEA,KAAK,aAAa,CAAC;CACnB,OAAO,GAAG,UAAU,UAAU,KAAK,MAAM,OAAO,KAAK,CAAC;AACxD;;AAGA,SAAgB,eAAwB;CACtC,IAAI,UAAU,OAAO,KAAA;CAErB,IAAI;EACF,MAAM,OAAO,SAAS,cAA2B,aAAa,CAAC,EAAE,QAAQ;EAEzE,OAAO,OAAQ,KAAK,MAAM,IAAI,CAAC,CAAyB,QAAQ,KAAA;CAClE,QAAQ;EACN;CACF;AACF"}
+{"version":3,"file":"runtime.js","names":[],"sources":["../../src/standalone/runtime.ts"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  FlashNotificationTracker,\n  Translator,\n  installPrefetchInvalidation,\n  reloadOnExpiredPage,\n  resolveRequestErrorNotification,\n  type NotificationSchema,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { showToast } from '../components/notifications/flash-toasts'\nimport type { AlfakitContextValue, AnyComponent } from '../context'\nimport { createDefaultRegistry } from '../registry'\nimport { getStandaloneDefaults } from './configure'\n\nconst isServer = typeof window === 'undefined'\n\n// Translations are the same for every component of a page, so the browser shares one\n// translator; a server render gets its own so concurrent requests never share a locale.\nconst browserTranslator = isServer ? null : new Translator()\n\nlet browserReady = false\n\n/** Browser-wide listeners every panel app installs; once per page load. */\nexport function ensureStandaloneRuntime(): void {\n  if (isServer || browserReady) return\n\n  browserReady = true\n  reloadOnExpiredPage()\n  // Pages restored by Back after a change are reloaded; shared with a surrounding panel.\n  installPrefetchInvalidation()\n}\n\n/**\n * The registry of a standalone component: the built-in renderers, the `configureAlfakit()`\n * defaults (or the surrounding panel's registry), then the component's own overrides.\n */\nexport function createStandaloneRegistry(\n  overrides?: Record<string, AnyComponent>,\n  base?: ComponentRegistry<AnyComponent>,\n): ComponentRegistry<AnyComponent> {\n  if (!base) {\n    return createDefaultRegistry()\n      .registerMany(getStandaloneDefaults().components ?? {})\n      .registerMany(overrides ?? {})\n  }\n\n  if (!overrides || Object.keys(overrides).length === 0) {\n    return base\n  }\n\n  const registry = new ComponentRegistry<AnyComponent>()\n\n  for (const type of base.types()) {\n    const component = base.resolve(type)\n\n    if (component) registry.register(type, component)\n  }\n\n  return registry.registerMany(overrides)\n}\n\n/**\n * The context value of one `<AlfakitComponent>` rendered outside `createAlfakit()`: its\n * own registry and action runner (so its modals are its own), the shared translator.\n */\nexport function createStandaloneContext(\n  endpoints: { action: string; modal: string },\n  overrides: Record<string, AnyComponent> | undefined,\n  poll: AlfakitContextValue['poll'],\n): AlfakitContextValue {\n  const translator = browserTranslator ?? new Translator()\n\n  return {\n    registry: createStandaloneRegistry(overrides),\n    pages: {},\n    translator,\n    actions: new ActionRunner({\n      endpoints: { ...endpoints },\n      // Outside a panel there is no `errorNotifications` config: a generic toast.\n      onError: (error) => {\n        const notification = resolveRequestErrorNotification(\n          error,\n          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n    poll,\n  }\n}\n\n// ---------------------------------------------------------------- Toaster ownership\n\nlet toasters = 0\n\n/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */\nexport function claimToaster(): () => void {\n  toasters++\n\n  return () => {\n    toasters--\n  }\n}\n\nexport function hasToaster(): boolean {\n  return toasters > 0\n}\n\n// ---------------------------------------------------------------- Flashed notifications\n\nconst flashTracker = new FlashNotificationTracker()\nlet flashRegistry: ComponentRegistry<AnyComponent> | null = null\nlet flashListening = false\n\n/**\n * Show the notifications the server flashed (`Notification::make()->send()`), from the\n * `flash` Inertia event after each visit and from the initial page (whose event fired\n * before the app mounted). One listener per page load, so it survives layouts that remount\n * between visits; the registry of the last mounted toaster renders custom toast views.\n */\nexport function ensureFlashToasts(registry: ComponentRegistry<AnyComponent>): void {\n  flashRegistry = registry\n\n  if (isServer || flashListening) return\n\n  flashListening = true\n\n  const show = (flash: unknown) => {\n    const flashed = (flash as { alfakitNotifications?: NotificationSchema[] } | undefined)\n      ?.alfakitNotifications\n\n    for (const notification of flashTracker.fresh(flashed)) {\n      showToast(notification, flashRegistry?.resolve(notification.view ?? ''))\n    }\n  }\n\n  show(initialFlash())\n  router.on('flash', (event) => show(event.detail.flash))\n}\n\n/** The initial page's flash data (fired as an event before the app mounted). */\nexport function initialFlash(): unknown {\n  if (isServer) return undefined\n\n  try {\n    const page = document.querySelector<HTMLElement>('[data-page]')?.dataset.page\n\n    return page ? (JSON.parse(page) as { flash?: unknown }).flash : undefined\n  } catch {\n    return undefined\n  }\n}\n"],"mappings":";;;;;;AAgBA,MAAM,WAAW,OAAO,WAAW;AAInC,MAAM,oBAAoB,WAAW,OAAO,IAAI,WAAW;AAE3D,IAAI,eAAe;;AAGnB,SAAgB,0BAAgC;CAC9C,IAAI,YAAY,cAAc;CAE9B,eAAe;CACf,oBAAoB;CAEpB,4BAA4B;AAC9B;;;;;AAMA,SAAgB,yBACd,WACA,MACiC;CACjC,IAAI,CAAC,MACH,OAAO,sBAAsB,CAAC,CAC3B,aAAa,sBAAsB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CACtD,aAAa,aAAa,CAAC,CAAC;CAGjC,IAAI,CAAC,aAAa,OAAO,KAAK,SAAS,CAAC,CAAC,WAAW,GAClD,OAAO;CAGT,MAAM,WAAW,IAAI,kBAAgC;CAErD,KAAK,MAAM,QAAQ,KAAK,MAAM,GAAG;EAC/B,MAAM,YAAY,KAAK,QAAQ,IAAI;EAEnC,IAAI,WAAW,SAAS,SAAS,MAAM,SAAS;CAClD;CAEA,OAAO,SAAS,aAAa,SAAS;AACxC;;;;;AAMA,SAAgB,wBACd,WACA,WACA,MACqB;CACrB,MAAM,aAAa,qBAAqB,IAAI,WAAW;CAEvD,OAAO;EACL,UAAU,yBAAyB,SAAS;EAC5C,OAAO,CAAC;EACR;EACA,SAAS,IAAI,aAAa;GACxB,WAAW,EAAE,GAAG,UAAU;GAE1B,UAAU,UAAU;IAClB,MAAM,eAAe,gCACnB,OACA,OACC,KAAK,cAAc,aAAa,WAAW,EAAE,KAAK,cAAc,QAAQ,CAC3E;IAEA,IAAI,cAAc,UAAU,YAAY;GAC1C;EACF,CAAC;EACD;CACF;AACF;AAIA,IAAI,WAAW;;AAGf,SAAgB,eAA2B;CACzC;CAEA,aAAa;EACX;CACF;AACF;AAEA,SAAgB,aAAsB;CACpC,OAAO,WAAW;AACpB;AAIA,MAAM,eAAe,IAAI,yBAAyB;AAClD,IAAI,gBAAwD;AAC5D,IAAI,iBAAiB;;;;;;;AAQrB,SAAgB,kBAAkB,UAAiD;CACjF,gBAAgB;CAEhB,IAAI,YAAY,gBAAgB;CAEhC,iBAAiB;CAEjB,MAAM,QAAQ,UAAmB;EAC/B,MAAM,UAAW,OACb;EAEJ,KAAK,MAAM,gBAAgB,aAAa,MAAM,OAAO,GACnD,UAAU,cAAc,eAAe,QAAQ,aAAa,QAAQ,EAAE,CAAC;CAE3E;CAEA,KAAK,aAAa,CAAC;CACnB,OAAO,GAAG,UAAU,UAAU,KAAK,MAAM,OAAO,KAAK,CAAC;AACxD;;AAGA,SAAgB,eAAwB;CACtC,IAAI,UAAU,OAAO,KAAA;CAErB,IAAI;EACF,MAAM,OAAO,SAAS,cAA2B,aAAa,CAAC,EAAE,QAAQ;EAEzE,OAAO,OAAQ,KAAK,MAAM,IAAI,CAAC,CAAyB,QAAQ,KAAA;CAClE,QAAQ;EACN;CACF;AACF"}

package/dist/standalone.css

@@ -134,7 +134,8 @@
   @apply border px-2 py-1;
 }
 .alfakit-prose :where(.alfakit-mention) {
-  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+  /* Full-contrast text on the tint (WCAG AA); the ring marks it as a mention. */
+  @apply bg-primary/10 text-foreground ring-primary/30 rounded px-1 font-medium ring-1;
 }
 .alfakit-prose :where(.alfakit-merge-tag) {
   @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;

package/dist/starter-kit/navigation.d.ts

@@ -1,10 +1,15 @@
-import { StarterKitNavGroup, StarterKitNavigationSchema } from "@alfakit/core";
+import { StarterKitNavGroup, StarterKitNavigationSchema, StarterKitUserMenuItem } from "@alfakit/core";
 //#region src/starter-kit/navigation.d.ts
 export interface AlfakitNavigation {
   /** The panel's navigation as the server shared it, or null for guests. */
   navigation: StarterKitNavigationSchema | null;
   /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */
   groups: StarterKitNavGroup[];
+  /**
+   * The panel's user menu links (`userMenuItems()`, Billing's entry…) for the kit's user
+   * menu: `<AlfakitUserMenuItems />` renders them with the app's dropdown items.
+   */
+  userMenuItems: StarterKitUserMenuItem[];
 }
 /**
  * The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the

package/dist/starter-kit/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","names":[],"sources":["../../src/starter-kit/navigation.ts"],"mappings":";;iBASiB;;EAEf,YAAY;;EAEZ,QAAQ;;;;;;;;;;;wBAYM,qBAAqB,mBAAmB"}
+{"version":3,"file":"navigation.d.ts","names":[],"sources":["../../src/starter-kit/navigation.ts"],"mappings":";;iBAWiB;;EAEf,YAAY;;EAEZ,QAAQ;;;;;EAKR,eAAe;;;;;;;;;;;wBAYD,qBAAqB,mBAAmB"}

package/dist/starter-kit/navigation.js

@@ -1,4 +1,4 @@
-import { starterKitNavigation, toStarterKitNavGroups } from "@alfakit/core";
+import { starterKitNavigation, toStarterKitNavGroups, toStarterKitUserMenuItems } from "@alfakit/core";
 import { usePage } from "@inertiajs/react";
 import { useMemo } from "react";
 //#region src/starter-kit/navigation.ts
@@ -16,7 +16,8 @@ function useAlfakitNavigation(panelId) {
 	const navigation = starterKitNavigation(props, panelId);
 	return useMemo(() => ({
 		navigation,
-		groups: toStarterKitNavGroups(navigation?.groups)
+		groups: toStarterKitNavGroups(navigation?.groups),
+		userMenuItems: toStarterKitUserMenuItems(navigation?.userMenu)
 	}), [navigation]);
 }
 //#endregion

package/dist/starter-kit/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":[],"sources":["../../src/starter-kit/navigation.ts"],"sourcesContent":["import {\n  starterKitNavigation,\n  toStarterKitNavGroups,\n  type StarterKitNavGroup,\n  type StarterKitNavigationSchema,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useMemo } from 'react'\n\nexport interface AlfakitNavigation {\n  /** The panel's navigation as the server shared it, or null for guests. */\n  navigation: StarterKitNavigationSchema | null\n  /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */\n  groups: StarterKitNavGroup[]\n}\n\n/**\n * The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the\n * host's sidebar. Every Inertia page of the application carries it, so the host's own pages\n * list the panel's resources too.\n *\n * ```tsx\n * const { groups } = useAlfakitNavigation()\n * ```\n */\nexport function useAlfakitNavigation(panelId?: string): AlfakitNavigation {\n  const props = usePage().props\n  const navigation = starterKitNavigation(props, panelId)\n\n  return useMemo(\n    () => ({ navigation, groups: toStarterKitNavGroups(navigation?.groups) }),\n    [navigation],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,qBAAqB,SAAqC;CACxE,MAAM,QAAQ,QAAQ,CAAC,CAAC;CACxB,MAAM,aAAa,qBAAqB,OAAO,OAAO;CAEtD,OAAO,eACE;EAAE;EAAY,QAAQ,sBAAsB,YAAY,MAAM;CAAE,IACvE,CAAC,UAAU,CACb;AACF"}
+{"version":3,"file":"navigation.js","names":[],"sources":["../../src/starter-kit/navigation.ts"],"sourcesContent":["import {\n  starterKitNavigation,\n  toStarterKitNavGroups,\n  toStarterKitUserMenuItems,\n  type StarterKitNavGroup,\n  type StarterKitNavigationSchema,\n  type StarterKitUserMenuItem,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useMemo } from 'react'\n\nexport interface AlfakitNavigation {\n  /** The panel's navigation as the server shared it, or null for guests. */\n  navigation: StarterKitNavigationSchema | null\n  /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */\n  groups: StarterKitNavGroup[]\n  /**\n   * The panel's user menu links (`userMenuItems()`, Billing's entry…) for the kit's user\n   * menu: `<AlfakitUserMenuItems />` renders them with the app's dropdown items.\n   */\n  userMenuItems: StarterKitUserMenuItem[]\n}\n\n/**\n * The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the\n * host's sidebar. Every Inertia page of the application carries it, so the host's own pages\n * list the panel's resources too.\n *\n * ```tsx\n * const { groups } = useAlfakitNavigation()\n * ```\n */\nexport function useAlfakitNavigation(panelId?: string): AlfakitNavigation {\n  const props = usePage().props\n  const navigation = starterKitNavigation(props, panelId)\n\n  return useMemo(\n    () => ({\n      navigation,\n      groups: toStarterKitNavGroups(navigation?.groups),\n      userMenuItems: toStarterKitUserMenuItems(navigation?.userMenu),\n    }),\n    [navigation],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAgCA,SAAgB,qBAAqB,SAAqC;CACxE,MAAM,QAAQ,QAAQ,CAAC,CAAC;CACxB,MAAM,aAAa,qBAAqB,OAAO,OAAO;CAEtD,OAAO,eACE;EACL;EACA,QAAQ,sBAAsB,YAAY,MAAM;EAChD,eAAe,0BAA0B,YAAY,QAAQ;CAC/D,IACA,CAAC,UAAU,CACb;AACF"}

package/dist/starter-kit/starter-kit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"starter-kit.d.ts","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"mappings":";;;;;;YAsCY,mBAAmB;EAC7B,cAAc;EACd,UAAU;;iBAGK,8BAA8B,KAC7C,eAAe;;;;;;EAQf,SAAS;;;;;;EAMT,WAAW,eAAe;;;;;;;wBAQZ,0BAA0B,UAAU,mBAAmB,iCAAc,IAAA;;;;;;wBAuErE,wBACd,SACA;EAEA,UAAU;EACV,WAAW;oBACZ,IAAA;;;;;;;;;;;;;;wBAmEe,qBAAqB,UAAS;;EAYL,OAAA,OAAA,qCAAuB"}
+{"version":3,"file":"starter-kit.d.ts","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"mappings":";;;;;;YAsCY,mBAAmB;EAC7B,cAAc;EACd,UAAU;;iBAGK,8BAA8B,KAC7C,eAAe;;;;;;EAQf,SAAS;;;;;;EAMT,WAAW,eAAe;;;;;;;wBAQZ,0BAA0B,UAAU,mBAAmB,iCAAc,IAAA;;;;;;wBAuErE,wBACd,SACA;EAEA,UAAU;EACV,WAAW;oBACZ,IAAA;;;;;;;;;;;;;;wBAoEe,qBAAqB,UAAS;;EAYL,OAAA,OAAA,qCAAuB"}

package/dist/starter-kit/starter-kit.js

@@ -100,7 +100,7 @@ function AlfakitStarterKitRoot({ options, children }) {
 				toasterId: STARTER_KIT_TOASTER_ID,
 				children: [children, /* @__PURE__ */ jsx("div", {
 					"data-slot": "starter-kit-debug-panel",
-					className: "fixed end-16 bottom-4 z-40",
+					className: "fixed right-16 bottom-16 z-40",
 					children: /* @__PURE__ */ jsx(DebugPanelSlot, {})
 				})]
 			})

package/dist/starter-kit/starter-kit.js.map

@@ -1 +1 @@
-{"version":3,"file":"starter-kit.js","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  STARTER_KIT_TOASTER_ID,\n  Translator,\n  configureCharts,\n  installStarterKitRuntime,\n  registerRichEditorExtensions,\n  resolveRequestErrorNotification,\n  starterKitBreadcrumbsFromProps,\n  syncStarterKitPage,\n  usesStarterKitHostLayout,\n  type AlfakitOptions,\n  type AlfakitPageProps,\n  type StarterKitBreadcrumb,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { DebugPanelSlot } from '../components/panel/debug-panel-slot'\nimport { Slot } from '../components/panel/slot'\nimport {\n  AlfakitProvider,\n  useAlfakitProps,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { AlfakitRoot } from '../create-alfakit'\nimport type { AppLayoutProps } from '../layouts/app-layout'\nimport { AuthLayout } from '../layouts/auth-layout'\nimport { lazyPanelLayouts } from '../layouts/lazy-layouts'\nimport { MAX_WIDTHS } from '../layouts/max-widths'\nimport { discoverComponents } from '../lib/discovery'\nimport { preloadIcons } from '../lib/icons'\nimport { cn } from '../lib/utils'\nimport { AlfakitPage } from '../pages/page'\nimport { createDefaultRegistry } from '../registry'\n\n/** The host's layout, as the starter kits' `AppLayout` takes its props. */\nexport type StarterKitLayout = ComponentType<{\n  breadcrumbs?: StarterKitBreadcrumb[]\n  children: ReactNode\n}>\n\nexport interface StarterKitPageOptions extends Pick<\n  AlfakitOptions<AnyComponent>,\n  'components' | 'pages' | 'chartFormatters' | 'chartPlugins' | 'richEditorExtensions'\n> {\n  /**\n   * The host layout Alfakit pages render in, usually the starter kit's `AppLayout`\n   * (`@/layouts/app-layout`). It receives the page's breadcrumbs as `{ title, href }`.\n   * `null` renders the pages without a host layout.\n   */\n  layout?: StarterKitLayout | null\n  /**\n   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass\n   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\\/*.tsx')`\n   * from `resources/js/pages/Alfakit/Page.tsx` and every file there registers under its name.\n   */\n  discover?: AlfakitOptions<AnyComponent>['discover']\n}\n\n/**\n * The content area of an Alfakit page inside the host layout: what `layout:app` renders in\n * starter kit mode instead of Alfakit's sidebar and top bar. Replace it with\n * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.\n */\nexport function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps) {\n  const props = useAlfakitProps()\n  // The host's pages fill the content area, so starter kit pages default to the full width.\n  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? 'full'\n\n  return (\n    <div\n      data-slot=\"content\"\n      data-alfakit-embedded=\"\"\n      className={cn(\n        'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',\n        MAX_WIDTHS[width] ?? 'max-w-full',\n      )}\n    >\n      <Slot name=\"content.start\" />\n      {children}\n      <Slot name=\"content.end\" />\n    </div>\n  )\n}\n\n// One context for the browser session (it survives navigations between host and Alfakit\n// pages); a server render builds one per request so concurrent renders never share a locale.\nlet browserContext: AlfakitContextValue | null = null\n\nfunction createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)\n  // keep the panel's card; the fullscreen layout loads on demand.\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(lazyPanelLayouts)\n    .register('layout:auth', AuthLayout)\n    .register('layout:app', StarterKitContentLayout)\n    .registerMany(discovered.components)\n    .registerMany(options.components ?? {})\n  const translator = new Translator()\n\n  return {\n    registry,\n    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },\n    translator,\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          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n  }\n}\n\nfunction starterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  if (typeof window === 'undefined') return createStarterKitContext(options)\n\n  browserContext ??= createStarterKitContext(options)\n\n  return browserContext\n}\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nexport function AlfakitStarterKitRoot({\n  options,\n  children,\n}: {\n  options?: StarterKitPageOptions\n  children?: ReactNode\n}) {\n  const [context] = useState(() => starterKitContext(options ?? {}))\n  const props = usePage<AlfakitPageProps>().props\n  const panel = props.alfakit\n\n  // Endpoints and error notifications follow the open page.\n  if (panel) {\n    context.actions.setEndpoints({\n      action: panel.endpoints.action ?? '',\n      modal: panel.endpoints.modal ?? '',\n    })\n  }\n\n  useEffect(() => {\n    syncStarterKitPage(props)\n  }, [props])\n\n  useEffect(() => {\n    installStarterKitRuntime(\n      (notification) => showToast(notification),\n      (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n    )\n    setToasterId(STARTER_KIT_TOASTER_ID)\n\n    return () => {\n      // A host page is open: its errors and toasts are the host's again.\n      syncStarterKitPage(null)\n      setToasterId(undefined)\n    }\n  }, [context])\n\n  return (\n    <AlfakitProvider value={context}>\n      {/* The reading direction and language of Alfakit's content only: the host layout around\n          it (sidebar, header) and the app's own pages keep the document's. */}\n      <div\n        data-slot=\"starter-kit-root\"\n        dir={panel?.localization?.direction ?? 'ltr'}\n        lang={panel?.localization?.tag}\n        className=\"contents\"\n      >\n        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>\n          {children}\n          {/* The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't\n              render: float it in the corner instead (nothing without `alfakitDebug`). */}\n          <div data-slot=\"starter-kit-debug-panel\" className=\"fixed end-16 bottom-4 z-40\">\n            <DebugPanelSlot />\n          </div>\n        </AlfakitRoot>\n      </div>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The page component for `Alfakit/Page` in a starter kit app: the host's\n * `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,\n * so Inertia's page resolution, the root view's page preload and SSR all find it like any\n * other host page.\n *\n * ```tsx\n * import { createStarterKitPage } from '@alfakit/react'\n * import AppLayout from '@/layouts/app-layout'\n *\n * export default createStarterKitPage({ layout: AppLayout })\n * ```\n */\nexport function createStarterKitPage(options: StarterKitPageOptions = {}) {\n  // Panel pages draw named icons: fetch `lucide-react/dynamic` with the page.\n  preloadIcons()\n  // `'js:name'` chart option callbacks, Chart.js plugins and rich editor extensions.\n  configureCharts(options)\n  registerRichEditorExtensions(options.richEditorExtensions ?? {})\n\n  function AlfakitStarterKitPage() {\n    return <AlfakitPage />\n  }\n\n  // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.\n  AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [\n    ...(options.layout && usesStarterKitHostLayout(props)\n      ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]\n      : []),\n    [AlfakitStarterKitRoot, { options }] as const,\n  ]\n\n  return AlfakitStarterKitPage\n}\n"],"mappings":"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"}
+{"version":3,"file":"starter-kit.js","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  STARTER_KIT_TOASTER_ID,\n  Translator,\n  configureCharts,\n  installStarterKitRuntime,\n  registerRichEditorExtensions,\n  resolveRequestErrorNotification,\n  starterKitBreadcrumbsFromProps,\n  syncStarterKitPage,\n  usesStarterKitHostLayout,\n  type AlfakitOptions,\n  type AlfakitPageProps,\n  type StarterKitBreadcrumb,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { DebugPanelSlot } from '../components/panel/debug-panel-slot'\nimport { Slot } from '../components/panel/slot'\nimport {\n  AlfakitProvider,\n  useAlfakitProps,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { AlfakitRoot } from '../create-alfakit'\nimport type { AppLayoutProps } from '../layouts/app-layout'\nimport { AuthLayout } from '../layouts/auth-layout'\nimport { lazyPanelLayouts } from '../layouts/lazy-layouts'\nimport { MAX_WIDTHS } from '../layouts/max-widths'\nimport { discoverComponents } from '../lib/discovery'\nimport { preloadIcons } from '../lib/icons'\nimport { cn } from '../lib/utils'\nimport { AlfakitPage } from '../pages/page'\nimport { createDefaultRegistry } from '../registry'\n\n/** The host's layout, as the starter kits' `AppLayout` takes its props. */\nexport type StarterKitLayout = ComponentType<{\n  breadcrumbs?: StarterKitBreadcrumb[]\n  children: ReactNode\n}>\n\nexport interface StarterKitPageOptions extends Pick<\n  AlfakitOptions<AnyComponent>,\n  'components' | 'pages' | 'chartFormatters' | 'chartPlugins' | 'richEditorExtensions'\n> {\n  /**\n   * The host layout Alfakit pages render in, usually the starter kit's `AppLayout`\n   * (`@/layouts/app-layout`). It receives the page's breadcrumbs as `{ title, href }`.\n   * `null` renders the pages without a host layout.\n   */\n  layout?: StarterKitLayout | null\n  /**\n   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass\n   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\\/*.tsx')`\n   * from `resources/js/pages/Alfakit/Page.tsx` and every file there registers under its name.\n   */\n  discover?: AlfakitOptions<AnyComponent>['discover']\n}\n\n/**\n * The content area of an Alfakit page inside the host layout: what `layout:app` renders in\n * starter kit mode instead of Alfakit's sidebar and top bar. Replace it with\n * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.\n */\nexport function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps) {\n  const props = useAlfakitProps()\n  // The host's pages fill the content area, so starter kit pages default to the full width.\n  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? 'full'\n\n  return (\n    <div\n      data-slot=\"content\"\n      data-alfakit-embedded=\"\"\n      className={cn(\n        'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',\n        MAX_WIDTHS[width] ?? 'max-w-full',\n      )}\n    >\n      <Slot name=\"content.start\" />\n      {children}\n      <Slot name=\"content.end\" />\n    </div>\n  )\n}\n\n// One context for the browser session (it survives navigations between host and Alfakit\n// pages); a server render builds one per request so concurrent renders never share a locale.\nlet browserContext: AlfakitContextValue | null = null\n\nfunction createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)\n  // keep the panel's card; the fullscreen layout loads on demand.\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(lazyPanelLayouts)\n    .register('layout:auth', AuthLayout)\n    .register('layout:app', StarterKitContentLayout)\n    .registerMany(discovered.components)\n    .registerMany(options.components ?? {})\n  const translator = new Translator()\n\n  return {\n    registry,\n    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },\n    translator,\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          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n  }\n}\n\nfunction starterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  if (typeof window === 'undefined') return createStarterKitContext(options)\n\n  browserContext ??= createStarterKitContext(options)\n\n  return browserContext\n}\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nexport function AlfakitStarterKitRoot({\n  options,\n  children,\n}: {\n  options?: StarterKitPageOptions\n  children?: ReactNode\n}) {\n  const [context] = useState(() => starterKitContext(options ?? {}))\n  const props = usePage<AlfakitPageProps>().props\n  const panel = props.alfakit\n\n  // Endpoints and error notifications follow the open page.\n  if (panel) {\n    context.actions.setEndpoints({\n      action: panel.endpoints.action ?? '',\n      modal: panel.endpoints.modal ?? '',\n    })\n  }\n\n  useEffect(() => {\n    syncStarterKitPage(props)\n  }, [props])\n\n  useEffect(() => {\n    installStarterKitRuntime(\n      (notification) => showToast(notification),\n      (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n    )\n    setToasterId(STARTER_KIT_TOASTER_ID)\n\n    return () => {\n      // A host page is open: its errors and toasts are the host's again.\n      syncStarterKitPage(null)\n      setToasterId(undefined)\n    }\n  }, [context])\n\n  return (\n    <AlfakitProvider value={context}>\n      {/* The reading direction and language of Alfakit's content only: the host layout around\n          it (sidebar, header) and the app's own pages keep the document's. */}\n      <div\n        data-slot=\"starter-kit-root\"\n        dir={panel?.localization?.direction ?? 'ltr'}\n        lang={panel?.localization?.tag}\n        className=\"contents\"\n      >\n        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>\n          {children}\n          {/* The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't\n              render: float it in the corner instead (nothing without `alfakitDebug`). The corner is the\n              document's right: the kit's sidebar stays on the left in a right-to-left panel language. */}\n          <div data-slot=\"starter-kit-debug-panel\" className=\"fixed right-16 bottom-16 z-40\">\n            <DebugPanelSlot />\n          </div>\n        </AlfakitRoot>\n      </div>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The page component for `Alfakit/Page` in a starter kit app: the host's\n * `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,\n * so Inertia's page resolution, the root view's page preload and SSR all find it like any\n * other host page.\n *\n * ```tsx\n * import { createStarterKitPage } from '@alfakit/react'\n * import AppLayout from '@/layouts/app-layout'\n *\n * export default createStarterKitPage({ layout: AppLayout })\n * ```\n */\nexport function createStarterKitPage(options: StarterKitPageOptions = {}) {\n  // Panel pages draw named icons: fetch `lucide-react/dynamic` with the page.\n  preloadIcons()\n  // `'js:name'` chart option callbacks, Chart.js plugins and rich editor extensions.\n  configureCharts(options)\n  registerRichEditorExtensions(options.richEditorExtensions ?? {})\n\n  function AlfakitStarterKitPage() {\n    return <AlfakitPage />\n  }\n\n  // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.\n  AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [\n    ...(options.layout && usesStarterKitHostLayout(props)\n      ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]\n      : []),\n    [AlfakitStarterKitRoot, { options }] as const,\n  ]\n\n  return AlfakitStarterKitPage\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -289,7 +289,8 @@
 }
 /* Rich editor mentions, merge tags and custom blocks (RichEditor extensions) */
 .alfakit-prose :where(.alfakit-mention):not(:where(.alfakit-not-prose *)) {
-  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+  /* Full-contrast text on the tint (WCAG AA); the ring marks it as a mention. */
+  @apply bg-primary/10 text-foreground ring-primary/30 rounded px-1 font-medium ring-1;
 }
 .alfakit-prose :where(.alfakit-merge-tag):not(:where(.alfakit-not-prose *)) {
   @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;

package/dist/themes.css

@@ -742,6 +742,10 @@
     max-height: none;
     width: 100%;
     max-width: 100%;
+    /* The shadcn centring utilities read these variables. Resetting them survives a
+       minifier that drops `translate: none` in favour of the utilities' `translate`. */
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
     translate: none;
     transform: none;
     border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/react",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "React + shadcn/ui renderer for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",
@@ -96,7 +96,7 @@
     "react-day-picker": "^10.0.2",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
-    "@alfakit/core": "0.1.9"
+    "@alfakit/core": "0.1.10"
   },
   "peerDependencies": {
     "@inertiajs/react": "^3.0.0",

package/src/components/dev-tools/dev-tools-inspector.tsx

@@ -80,7 +80,7 @@ export function DevToolsInspector() {
           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"
+          className="fixed end-4 bottom-16 z-40 rounded-full shadow-md [[data-slot=starter-kit-root]_&]:end-auto [[data-slot=starter-kit-root]_&]:right-4"
         >
           <BracesIcon />
         </Button>

package/src/components/fields/checkbox-list.tsx

@@ -66,7 +66,7 @@ export function CheckboxListField({ component }: { component: CheckboxListSchema
     <FieldWrapper field={component} htmlFor={id} error={error}>
       <div className="flex flex-col gap-2">
         {(component.searchable || (component.bulkToggleable && !readOnly)) && (
-          <div className="flex items-center gap-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
             {component.searchable && (
               <Input
                 value={search}
@@ -77,7 +77,7 @@ export function CheckboxListField({ component }: { component: CheckboxListSchema
               />
             )}
             {component.bulkToggleable && !readOnly && (
-              <div className="flex gap-1">
+              <div className="flex flex-wrap gap-1">
                 {!selectAll?.hidden && (
                   <Button
                     type="button"