@alfakit/react 0.1.10 → 0.1.11

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,
@@ -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`). 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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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/react",
-  "version": "0.1.10",
+  "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.10"
+    "@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,
@@ -86,7 +87,11 @@ export function DevToolsInspector() {
         </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/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/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>
+  )
+}

package/src/components/table/cells.tsx

@@ -220,7 +220,9 @@ function ImageCell({ column, cell }: CellProps) {
         <img
           key={index}
           src={url}
-          alt={cell.alt ?? ''}
+          // Without `alt()` the first image is named after the column, so a record link that
+          // wraps it has a name (W-V4-20).
+          alt={cell.alt ?? (index === 0 ? (column.label ?? '') : '')}
           style={{
             height: schema.height ?? size,
             width: schema.width ?? (schema.square || schema.circular ? size : undefined),

package/src/components/ui/calendar.tsx

@@ -1,6 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import type { ComponentProps } from 'react'
 import { DayPicker } from 'react-day-picker'
+import { useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { buttonVariants } from './button'
 
@@ -10,9 +11,16 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }: ComponentProps<typeof DayPicker>) {
+  const t = useT()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
+      labels={{
+        labelPrevious: () => t('form.previous_month', {}, 'Previous month'),
+        labelNext: () => t('form.next_month', {}, 'Next month'),
+        ...props.labels,
+      }}
       className={cn('p-3', className)}
       classNames={{
         months: 'flex flex-col sm:flex-row gap-2',

package/src/components/widgets/dashboard-customizer.tsx

@@ -24,7 +24,7 @@ import { useEffect, useId, useMemo, type ReactNode } from 'react'
 import { useDirection, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { cn } from '../../lib/utils'
-import { LazyPlaceholder } from '../panel/lazy-placeholder'
+import { LazyWidgetPlaceholder } from '../panel/lazy-placeholder'
 import { Button } from '../ui/button'
 
 /**
@@ -150,7 +150,7 @@ export function CustomizableWidgetGrid({
 
             const content = widget ? (
               isLazyPlaceholder(widget) ? (
-                <LazyPlaceholder variant={widget.type === 'TableWidget' ? 'table' : 'widget'} />
+                <LazyWidgetPlaceholder widget={widget} />
               ) : (
                 renderWidget(widget)
               )

package/src/components/widgets/widgets-block.tsx

@@ -10,7 +10,7 @@ import { createElement, type ComponentProps } from 'react'
 import { useRegistry, useT } from '../../context'
 import { lazyComponent } from '../../lib/lazy'
 import { cn } from '../../lib/utils'
-import { LazyPlaceholder } from '../panel/lazy-placeholder'
+import { LazyWidgetPlaceholder } from '../panel/lazy-placeholder'
 import { Slot } from '../panel/slot'
 import { DataTable } from '../table/table-block'
 import { ChartWidget } from './chart-lazy'
@@ -49,7 +49,7 @@ function StaticWidgetGrid({ block }: { block: WidgetsBlockSchema }) {
       {block.widgets.map((widget) => (
         <div key={widget.key} className={cn('min-w-0', columnSpanClasses(widget.columnSpan))}>
           {isLazyPlaceholder(widget) ? (
-            <LazyPlaceholder variant={widget.type === 'TableWidget' ? 'table' : 'widget'} />
+            <LazyWidgetPlaceholder widget={widget} />
           ) : (
             <WidgetRenderer widget={widget} />
           )}

package/src/create-alfakit.tsx

@@ -13,10 +13,12 @@ import {
   installErrorNotifications,
   installPrefetchInvalidation,
   installSpaUrlExceptions,
+  overlayPlacementDirection,
   registerRichEditorExtensions,
   reloadOnExpiredPage,
   resolveRequestErrorNotification,
   resolveToastPosition,
+  setIconAliases,
   setRequestErrorReporter,
   whenIdle,
   type AlfakitOptions,
@@ -72,6 +74,9 @@ export function AlfakitRoot({
   if (panel) {
     translator.setTranslations(panel.translations ?? {})
     translator.setLocale(localization?.tag ?? 'en')
+    // Chrome icons replaced with `Icons::register()`, also in a server render, so the server
+    // and the browser draw the same glyph (W-V3-28).
+    setIconAliases(panel.theme?.icons)
   }
 
   // Starter kit mode: the host app owns `<html lang dir>` (its own pages and layout are not
@@ -104,7 +109,10 @@ export function AlfakitRoot({
           })}
         <Toaster
           id={toasterId}
-          position={resolveToastPosition(panel?.toastPosition, direction)}
+          position={resolveToastPosition(
+            panel?.toastPosition,
+            overlayPlacementDirection(direction, panel?.starterKit),
+          )}
           offset={PANEL_TOAST_OFFSET}
           mobileOffset={PANEL_TOAST_OFFSET}
           dir={direction}

package/src/standalone/alfakit-component.tsx

@@ -193,7 +193,7 @@ export function AlfakitComponent({
             data-slot="page-header"
             className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
           >
-            <div className="min-w-0">
+            <div className="min-w-0 sm:max-w-[50%] sm:shrink-0">
               {page.heading && (
                 <h2 className="text-xl font-semibold tracking-tight">{page.heading}</h2>
               )}
@@ -206,7 +206,7 @@ export function AlfakitComponent({
                 actions={page.headerActions}
                 context={actionContext}
                 align="end"
-                className="max-w-full shrink-0"
+                className="max-w-full min-w-0"
               />
             )}
           </header>

package/src/starter-kit/index.ts

@@ -3,6 +3,7 @@ export { useAlfakitNavigation, type AlfakitNavigation } from './navigation'
 export {
   AlfakitStarterKitRoot,
   StarterKitContentLayout,
+  StarterKitFullscreenLayout,
   createStarterKitPage,
   type StarterKitLayout,
   type StarterKitPageOptions,

package/src/starter-kit/starter-kit.tsx

@@ -85,6 +85,27 @@ export function StarterKitContentLayout({ children, maxContentWidth }: AppLayout
   )
 }
 
+/**
+ * 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 function StarterKitFullscreenLayout({ children }: { children: ReactNode }) {
+  return (
+    <div
+      data-slot="content"
+      data-layout="fullscreen"
+      data-alfakit-embedded=""
+      className="flex min-h-0 w-full min-w-0 flex-1 flex-col"
+    >
+      <Slot name="content.start" />
+      {children}
+      <Slot name="content.end" />
+    </div>
+  )
+}
+
 // One context for the browser session (it survives navigations between host and Alfakit
 // pages); a server render builds one per request so concurrent renders never share a locale.
 let browserContext: AlfakitContextValue | null = null
@@ -98,6 +119,7 @@ function createStarterKitContext(options: StarterKitPageOptions): AlfakitContext
     .registerMany(lazyPanelLayouts)
     .register('layout:auth', AuthLayout)
     .register('layout:app', StarterKitContentLayout)
+    .register('layout:fullscreen', StarterKitFullscreenLayout)
     .registerMany(discovered.components)
     .registerMany(options.components ?? {})
   const translator = new Translator()