@alfakit/react 0.1.9 → 0.1.11

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

@@ -28,6 +28,15 @@ export interface StarterKitPageOptions extends Pick<AlfakitOptions<AnyComponent>
  * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.
  */
 export declare function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps): import("react").JSX.Element;
+/**
+ * A `$layout = 'fullscreen'` page inside the host layout: what `layout:fullscreen` renders in
+ * starter kit mode. The host layout is the chrome, so there is no AlfaKit header (brand, top
+ * bar slots, user menu, Exit); the screen gets the whole content area. Replace it with
+ * `{ components: { 'layout:fullscreen': MyScreen } }`.
+ */
+export declare function StarterKitFullscreenLayout({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
 /**
  * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:
  * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the

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;;;;;;;wBA2BrE,6BAA6B;EAAc,UAAU;oBAAW,IAAA;;;;;;wBAkEhE,wBACd,SACA;EAEA,UAAU;EACV,WAAW;oBACZ,IAAA;;;;;;;;;;;;;;wBAoEe,qBAAqB,UAAS;;EAYL,OAAA,OAAA,qCAAuB"}

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

@@ -35,10 +35,29 @@ function StarterKitContentLayout({ children, maxContentWidth }) {
 		]
 	});
 }
+/**
+* A `$layout = 'fullscreen'` page inside the host layout: what `layout:fullscreen` renders in
+* starter kit mode. The host layout is the chrome, so there is no AlfaKit header (brand, top
+* bar slots, user menu, Exit); the screen gets the whole content area. Replace it with
+* `{ components: { 'layout:fullscreen': MyScreen } }`.
+*/
+function StarterKitFullscreenLayout({ children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "content",
+		"data-layout": "fullscreen",
+		"data-alfakit-embedded": "",
+		className: "flex min-h-0 w-full min-w-0 flex-1 flex-col",
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "content.start" }),
+			children,
+			/* @__PURE__ */ jsx(Slot, { name: "content.end" })
+		]
+	});
+}
 let browserContext = null;
 function createStarterKitContext(options) {
 	const discovered = discoverComponents(options.discover);
-	const registry = createDefaultRegistry().registerMany(lazyPanelLayouts).register("layout:auth", AuthLayout).register("layout:app", StarterKitContentLayout).registerMany(discovered.components).registerMany(options.components ?? {});
+	const registry = createDefaultRegistry().registerMany(lazyPanelLayouts).register("layout:auth", AuthLayout).register("layout:app", StarterKitContentLayout).register("layout:fullscreen", StarterKitFullscreenLayout).registerMany(discovered.components).registerMany(options.components ?? {});
 	const translator = new Translator();
 	return {
 		registry,
@@ -100,7 +119,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, {})
 				})]
 			})
@@ -131,6 +150,6 @@ function createStarterKitPage(options = {}) {
 	return AlfakitStarterKitPage;
 }
 //#endregion
-export { AlfakitStarterKitRoot, StarterKitContentLayout, createStarterKitPage };
+export { AlfakitStarterKitRoot, StarterKitContentLayout, StarterKitFullscreenLayout, createStarterKitPage };
 
 //# sourceMappingURL=starter-kit.js.map

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/**\n * A `$layout = 'fullscreen'` page inside the host layout: what `layout:fullscreen` renders in\n * starter kit mode. The host layout is the chrome, so there is no AlfaKit header (brand, top\n * bar slots, user menu, Exit); the screen gets the whole content area. Replace it with\n * `{ components: { 'layout:fullscreen': MyScreen } }`.\n */\nexport function StarterKitFullscreenLayout({ children }: { children: ReactNode }) {\n  return (\n    <div\n      data-slot=\"content\"\n      data-layout=\"fullscreen\"\n      data-alfakit-embedded=\"\"\n      className=\"flex min-h-0 w-full min-w-0 flex-1 flex-col\"\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    .register('layout:fullscreen', StarterKitFullscreenLayout)\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.11",
   "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.11"
   },
   "peerDependencies": {
     "@inertiajs/react": "^3.0.0",

package/src/components/actions/action-button.tsx

@@ -180,7 +180,21 @@ export function ActionButton({
   const ariaLabel = isIconOnly || labeledFrom ? accessibleName : undefined
 
   const button = isPlainLink ? (
-    action.openUrlInNewTab ? (
+    action.download ? (
+      // `download()`: a plain link that saves the file (an Inertia visit would discard it).
+      <Button
+        asChild
+        variant="plain"
+        size={sizeProp}
+        disabled={action.disabled}
+        aria-label={ariaLabel}
+        {...extraProps(action.extraAttributes, classes)}
+      >
+        <a href={action.url} download="">
+          {content}
+        </a>
+      </Button>
+    ) : action.openUrlInNewTab ? (
       <Button
         asChild
         variant="plain"

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

@@ -6,6 +6,7 @@ import {
   jsonScalar,
   jsonSize,
   latestServerTiming,
+  overlayPlacementDirection,
   prettyJson,
   searchJson,
   type JsonEntry,
@@ -80,13 +81,17 @@ 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>
       </SheetTrigger>
       <SheetContent
-        side={direction === 'rtl' ? 'left' : 'right'}
+        side={
+          overlayPlacementDirection(direction, props.alfakit?.starterKit) === 'rtl'
+            ? 'left'
+            : 'right'
+        }
         className="flex w-full flex-col gap-0 p-0 sm:max-w-xl"
       >
         <div data-slot="dev-tools" className="flex min-h-0 flex-1 flex-col">

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"

package/src/components/fields/money-input.tsx

@@ -13,13 +13,6 @@ import { Input } from '../ui/input'
  * it, accepts the locale's separators and digits ("1.234,50", "١٢٫٥"), and rounds to
  * the currency's precision on blur. The form value is a plain decimal string ("1234.50").
  */
-export function clampAmount(amount: number, min?: number | null, max?: number | null): number {
-  const lower = min ?? Number.NEGATIVE_INFINITY
-  const upper = max ?? Number.POSITIVE_INFINITY
-
-  return Math.min(upper, Math.max(lower, amount))
-}
-
 export function MoneyInputField({ component }: { component: MoneyInputSchema }) {
   const { value, setValue, blur, error, id, disabled, aria } = useField<string | number | null>(
     component,
@@ -46,13 +39,9 @@ export function MoneyInputField({ component }: { component: MoneyInputSchema })
 
     const parsed = format.parseNumber(text)
 
-    // Unparseable input is kept as typed so server validation can explain the problem;
-    // amounts are brought inside `minValue()` / `maxValue()`.
-    setValue(
-      parsed === null
-        ? text
-        : clampAmount(parsed, component.min, component.max).toFixed(component.decimals),
-    )
+    // Unparseable input is kept as typed and out-of-range amounts are kept as well, so the
+    // server's `minValue()` / `maxValue()` rules report them (W-V3-11).
+    setValue(parsed === null ? text : parsed.toFixed(component.decimals))
   }
 
   const affix = (text: string, icon: string | undefined, side: 'start' | 'end') =>

package/src/components/fields/rich-editor-extensions.tsx

@@ -11,6 +11,7 @@ import {
   customBlockNodeConfig,
   EditorSuggestions,
   fieldActionContext,
+  fixedContainingBlockOffset,
   groupCustomBlocks,
   groupTriggerButton,
   isCustomBlockResult,
@@ -358,6 +359,9 @@ export function ToolbarGroupButton({
   onRun: (name: string) => void
 }) {
   const buttons = group.buttons.filter((name) => commands[name])
+  // After a pick, typing goes on in the editor (the command focused it); the menu would
+  // otherwise return focus to its trigger. Closing without a pick (Escape) still does.
+  const picked = useRef(false)
 
   if (buttons.length === 0) return null
 
@@ -385,6 +389,13 @@ export function ToolbarGroupButton({
         align="start"
         aria-label={group.label}
         className={cn(!group.textual && 'flex min-w-0 flex-row gap-0.5')}
+        onCloseAutoFocus={(event) => {
+          if (!picked.current) return
+
+          picked.current = false
+          event.preventDefault()
+          editor.commands.focus()
+        }}
       >
         {buttons.map((name) => {
           const label = commandLabel(name, commands, translate)
@@ -396,7 +407,10 @@ export function ToolbarGroupButton({
               aria-label={group.textual ? undefined : label}
               title={label}
               className={cn(pressed && 'bg-accent text-accent-foreground')}
-              onSelect={() => onRun(name)}
+              onSelect={() => {
+                picked.current = true
+                onRun(name)
+              }}
             >
               {icons(name)}
               {group.textual && <span>{label}</span>}
@@ -436,7 +450,15 @@ export function SuggestionPopup({
       data-slot="rich-editor-suggestions"
       className="bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md"
       // Runtime coordinates cannot be Tailwind classes.
-      style={state.coords ? { left: state.coords.left, top: state.coords.bottom + 4 } : undefined}
+      // Inside a modal the dialog's transform is the containing block of this fixed list.
+      style={
+        state.coords
+          ? {
+              left: state.coords.left - fixedContainingBlockOffset(editor.view.dom).x,
+              top: state.coords.bottom + 4 - fixedContainingBlockOffset(editor.view.dom).y,
+            }
+          : undefined
+      }
     >
       {state.loading && state.items.length === 0 ? (
         <div className="text-muted-foreground px-2 py-1.5 text-sm">

package/src/components/file-manager/file-manager.tsx

@@ -1389,7 +1389,8 @@ function Dialogs({
         open={dialog?.type === 'createFolder' || dialog?.type === 'rename'}
         onOpenChange={(open) => !open && close()}
       >
-        <DialogContent data-slot="file-manager-dialog">
+        {/* The title and the labelled field say it all: no description. */}
+        <DialogContent data-slot="file-manager-dialog" aria-describedby={undefined}>
           <form
             className="flex flex-col gap-4"
             onSubmit={(event) => {
@@ -1763,6 +1764,7 @@ function Preview({
         <DialogContent
           className="flex max-h-[90vh] flex-col sm:max-w-4xl"
           data-slot="file-manager-preview"
+          aria-describedby={undefined}
           onKeyDown={onKeyDown}
         >
           <DialogHeader>

package/src/components/layout/elements.tsx

@@ -25,6 +25,8 @@ import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
 import { ActionList } from '../actions/action-list'
+import { useOptionalFormStore } from '../form/form-context'
+import { useFieldActionContext } from '../schema/field-actions'
 import { RenderComponent } from '../schema/schema-renderer'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import { MixedContent } from './mixed-content'
@@ -67,7 +69,12 @@ const CALLOUT_ICON_SIZES: Record<string, string> = {
 }
 
 export function CalloutComponent({ component }: { component: CalloutSchema }) {
-  const context = usePageActionContext()
+  // Inside a form the actions run as field actions of this component, so `$get` / `$set`
+  // reach the form (like a section's header actions).
+  const form = useOptionalFormStore()
+  const pageContext = usePageActionContext()
+  const fieldContext = useFieldActionContext(component)
+  const context = form ? fieldContext : pageContext
   const tone = component.color ?? component.status
   // `iconColor()`, or the status colour once `color(null)` removed the background.
   const iconColor = component.iconColor ?? (component.color ? undefined : component.status)
@@ -113,19 +120,30 @@ export function CalloutComponent({ component }: { component: CalloutSchema }) {
             className={cn('mt-2', actionsAlignmentClass(component.footerActionsAlignment))}
           />
         )}
-        <MixedContent items={component.footer} name="callout-footer" className="mt-2" />
+        <MixedContent
+          items={component.footer}
+          name="callout-footer"
+          className="mt-2"
+          context={context}
+        />
       </div>
       <MixedContent
         items={component.controls}
         name="callout-controls"
         className="-me-1 -mt-1 shrink-0 gap-1"
+        context={context}
       />
     </div>
   )
 }
 
 export function EmptyStateComponent({ component }: { component: EmptyStateComponentSchema }) {
-  const context = usePageActionContext()
+  // Inside a form the actions run as field actions of this component, so `$get` / `$set`
+  // reach the form (like a section's header actions).
+  const form = useOptionalFormStore()
+  const pageContext = usePageActionContext()
+  const fieldContext = useFieldActionContext(component)
+  const context = form ? fieldContext : pageContext
 
   return (
     <div
@@ -158,7 +176,12 @@ export function EmptyStateComponent({ component }: { component: EmptyStateCompon
       {component.actions && component.actions.length > 0 && (
         <ActionList actions={component.actions} context={context} className="mt-2 justify-center" />
       )}
-      <MixedContent items={component.footer} name="empty-state-footer" className="justify-center" />
+      <MixedContent
+        items={component.footer}
+        name="empty-state-footer"
+        className="justify-center"
+        context={context}
+      />
     </div>
   )
 }

package/src/components/layout/mixed-content.tsx

@@ -1,4 +1,4 @@
-import type { AnyActionSchema, ContentSlotItem } from '@alfakit/core'
+import type { ActionContext, AnyActionSchema, ContentSlotItem } from '@alfakit/core'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
@@ -7,19 +7,23 @@ import { RenderComponent } from '../schema/schema-renderer'
 
 /**
  * Actions and components placed in a layout component's fixed spot (a section's
- * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
- * like section header actions.
+ * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context
+ * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the
+ * page's.
  */
 export function MixedContent({
   items,
   name,
   className,
+  context: ownerContext,
 }: {
   items: ContentSlotItem[] | undefined
   name: string
   className?: string
+  context?: ActionContext
 }) {
-  const context = usePageActionContext()
+  const pageContext = usePageActionContext()
+  const context = ownerContext ?? pageContext
 
   if (!items?.length) {
     return null

package/src/components/layout/section.tsx

@@ -86,7 +86,7 @@ export function SectionComponent({ component }: { component: SectionSchema }) {
       {component.headerActions && component.headerActions.length > 0 && (
         <ActionList actions={component.headerActions} context={context} size="sm" />
       )}
-      <MixedContent items={component.afterHeader} name="section-after-header" />
+      <MixedContent items={component.afterHeader} name="section-after-header" context={context} />
       {component.collapsible && (
         <CollapsibleTrigger asChild>
           <Button
@@ -123,7 +123,7 @@ export function SectionComponent({ component }: { component: SectionSchema }) {
             className={actionsAlignmentClass(component.footerActionsAlignment) || undefined}
           />
         )}
-        <MixedContent items={component.footer} name="section-footer-content" />
+        <MixedContent items={component.footer} name="section-footer-content" context={context} />
       </div>
     ) : null
 

package/src/components/notifications/notifications-menu.tsx

@@ -3,9 +3,13 @@ import {
   notificationTintStyles,
   onDatabaseNotificationsSent,
   onOpenDatabaseNotifications,
+  pwaStore,
+  startPwa,
+  togglePushNotifications,
 } from '@alfakit/core'
-import { BellIcon, CheckCheckIcon, Trash2Icon } from 'lucide-react'
+import { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
 import { useDirection, useFormatter, usePanel, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { cssColor, textColorClasses } from '../../lib/colors'
@@ -86,6 +90,29 @@ export function NotificationsMenu({ variant = 'topbar' }: NotificationsMenuProps
     [center],
   )
 
+  // `pwa(push: true)` in a starter kit: the app's user menu has no AlfaKit entries, so Web
+  // Push is turned on or off from the bell's menu.
+  const pwa = useStore(pwaStore)
+  const kitPush = Boolean(panel.starterKit && panel.pwa?.push)
+  const pushToggle = kitPush && pwa.push !== 'unsupported'
+
+  useEffect(() => {
+    if (kitPush) startPwa(panel.pwa)
+  }, [kitPush, panel.pwa])
+
+  const togglePush = async () => {
+    const { message } = await togglePushNotifications()
+    const text = t(message.key, {}, message.fallback)
+
+    if (message.error) toast.error(text)
+    else toast.success(text)
+  }
+
+  const pushLabel =
+    pwa.push === 'subscribed'
+      ? t('pwa.notifications.disable', {}, 'Turn off notifications')
+      : t('pwa.notifications.enable', {}, 'Turn on notifications')
+
   if (!config || !center) {
     return null
   }
@@ -145,6 +172,20 @@ export function NotificationsMenu({ variant = 'topbar' }: NotificationsMenuProps
         <div className="flex items-center justify-between border-b px-3 py-2">
           <span className="text-sm font-semibold">{t('notifications', {}, 'Notifications')}</span>
           <div className="flex items-center gap-1">
+            {pushToggle && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                data-slot="pwa-push"
+                disabled={pwa.pushBusy || pwa.push === 'denied'}
+                title={pushLabel}
+                aria-label={pushLabel}
+                onClick={() => void togglePush()}
+              >
+                {pwa.push === 'subscribed' ? <BellOffIcon /> : <BellRingIcon />}
+              </Button>
+            )}
             {state.unreadCount > 0 && (
               <Button
                 type="button"

package/src/components/panel/lazy-placeholder.tsx

@@ -1,5 +1,8 @@
-import { useT } from '../../context'
+import { widgetPollTarget, type LazyWidgetSchema } from '@alfakit/core'
+import { useState } from 'react'
+import { useRefreshComponents, useT } from '../../context'
 import { cn } from '../../lib/utils'
+import { Button } from '../ui/button'
 import { Skeleton } from '../ui/skeleton'
 
 /**
@@ -37,3 +40,40 @@ export function LazyPlaceholder({
     </div>
   )
 }
+
+/**
+ * A lazy widget's cell: the skeleton while its schema loads, or, when the request failed
+ * (outside panels: a refused or failed fetch), a message with a retry.
+ */
+export function LazyWidgetPlaceholder({ widget }: { widget: LazyWidgetSchema }) {
+  const t = useT()
+  const refresh = useRefreshComponents()
+  const [retrying, setRetrying] = useState(false)
+  const variant = widget.type === 'TableWidget' ? 'table' : 'widget'
+
+  if (!widget.failed) return <LazyPlaceholder variant={variant} />
+
+  const retry = () => {
+    if (!refresh) return
+
+    setRetrying(true)
+    void Promise.resolve(refresh([widgetPollTarget(widget)])).finally(() => setRetrying(false))
+  }
+
+  return (
+    <div
+      data-slot="lazy-placeholder"
+      data-variant={variant}
+      data-failed=""
+      role="alert"
+      className="bg-card text-muted-foreground flex min-h-28 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center text-sm"
+    >
+      <p>{t('widget_failed', {}, 'This widget could not be loaded.')}</p>
+      {refresh && (
+        <Button type="button" variant="outline" size="sm" disabled={retrying} onClick={retry}>
+          {t('retry', {}, 'Retry')}
+        </Button>
+      )}
+    </div>
+  )
+}