@alfakit/react 0.1.2 → 0.1.6

package/dist/starter-kit/widgets.js

@@ -1,8 +1,9 @@
 import { lazyComponent } from "../lib/lazy.js";
-import { NotificationsTrigger, SearchTrigger, TenantSwitcherTrigger } from "./widgets-triggers.js";
-import { starterKitWidgets } from "@alfakit/core";
+import { CopilotTrigger, NotificationsTrigger, SearchTrigger, TenantSwitcherTrigger } from "./widgets-triggers.js";
+import { isAlfakitPage, starterKitWidgets } from "@alfakit/core";
 import { usePage } from "@inertiajs/react";
-import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/starter-kit/widgets.tsx
 const load = () => import("./widgets-loaded.js");
 const LoadedSearch = lazyComponent(() => load().then((module) => module.LoadedSearch), (props) => /* @__PURE__ */ jsx(SearchTrigger, {
@@ -14,8 +15,26 @@ function preloadSearch() {
 }
 const LoadedNotifications = lazyComponent(() => load().then((module) => module.LoadedNotifications), (props) => /* @__PURE__ */ jsx(NotificationsTrigger, { ...props }));
 const LoadedTenantSwitcher = lazyComponent(() => load().then((module) => module.LoadedTenantSwitcher), (props) => /* @__PURE__ */ jsx(TenantSwitcherTrigger, { ...props }));
-function useWidgets(panelId) {
-	return starterKitWidgets(usePage().props, panelId);
+const LoadedCopilot = lazyComponent(() => load().then((module) => module.LoadedCopilot), (props) => /* @__PURE__ */ jsx(CopilotTrigger, {
+	...props,
+	onLoad: preloadCopilot
+}));
+function preloadCopilot() {
+	LoadedCopilot.preload();
+}
+const LazyImpersonationBanner = lazy(() => import("./impersonation-banner.js"));
+/** While impersonating, the first header component shows the banner on host pages. */
+function StarterKitImpersonationBanner({ source }) {
+	const props = usePage().props;
+	const impersonation = source?.widgets.impersonation;
+	if (!impersonation || isAlfakitPage(props)) return null;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(LazyImpersonationBanner, { impersonation })
+	});
+}
+function useWidgets(panelId, part) {
+	return starterKitWidgets(usePage().props, panelId, part);
 }
 /**
 * AlfaKit's command palette and global search: the search field opens it, and so do the
@@ -23,13 +42,14 @@ function useWidgets(panelId) {
 * nothing for guests or without global search and a command palette.
 */
 function AlfakitSearch({ panel } = {}) {
-	const source = useWidgets(panel);
-	if (!source?.widgets.search) return null;
-	return /* @__PURE__ */ jsx("span", {
+	const source = useWidgets(panel, "search");
+	const banner = /* @__PURE__ */ jsx(StarterKitImpersonationBanner, { source });
+	if (!source?.widgets.search) return banner;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [banner, /* @__PURE__ */ jsx("span", {
 		"data-slot": "starter-kit-search",
 		className: "inline-flex",
 		children: /* @__PURE__ */ jsx(LoadedSearch, { source })
-	});
+	})] });
 }
 /**
 * The bell with the user's database notifications (`databaseNotifications()`), polling and
@@ -37,28 +57,46 @@ function AlfakitSearch({ panel } = {}) {
 * notifications.
 */
 function AlfakitNotifications({ panel } = {}) {
-	const source = useWidgets(panel);
-	if (!source?.widgets.notifications) return null;
-	return /* @__PURE__ */ jsx("span", {
+	const source = useWidgets(panel, "notifications");
+	const banner = /* @__PURE__ */ jsx(StarterKitImpersonationBanner, { source });
+	if (!source?.widgets.notifications) return banner;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [banner, /* @__PURE__ */ jsx("span", {
 		"data-slot": "starter-kit-notifications",
 		className: "inline-flex",
 		children: /* @__PURE__ */ jsx(LoadedNotifications, { source })
-	});
+	})] });
 }
 /**
 * The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu
 * to choose one on the host's own pages. Renders nothing for guests or other panels.
 */
 function AlfakitTenantSwitcher({ panel } = {}) {
-	const source = useWidgets(panel);
-	if (!source?.widgets.tenancy) return null;
-	return /* @__PURE__ */ jsx("span", {
+	const source = useWidgets(panel, "tenancy");
+	const banner = /* @__PURE__ */ jsx(StarterKitImpersonationBanner, { source });
+	if (!source?.widgets.tenancy) return banner;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [banner, /* @__PURE__ */ jsx("span", {
 		"data-slot": "starter-kit-tenant-switcher",
 		className: "inline-flex",
 		children: /* @__PURE__ */ jsx(LoadedTenantSwitcher, { source })
-	});
+	})] });
+}
+/**
+* The AI copilot of alfasix/alfakit-ai (`AiPlugin::copilot()`): its button and chat
+* slide-over, opened with its key bindings (`mod+j`) from any page. Renders nothing for
+* guests, without the plugin's copilot, for users who may not use it and (tenancy panels)
+* outside a tenant.
+*/
+function AlfakitCopilot({ panel } = {}) {
+	const source = useWidgets(panel, "copilot");
+	const banner = /* @__PURE__ */ jsx(StarterKitImpersonationBanner, { source });
+	if (!source?.widgets.copilot) return banner;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [banner, /* @__PURE__ */ jsx("span", {
+		"data-slot": "starter-kit-copilot",
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(LoadedCopilot, { source })
+	})] });
 }
 //#endregion
-export { AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher };
+export { AlfakitCopilot, AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher };
 
 //# sourceMappingURL=widgets.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"widgets.js","names":[],"sources":["../../src/starter-kit/widgets.tsx"],"sourcesContent":["import { starterKitWidgets, type StarterKitWidgets } from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { lazyComponent } from '../lib/lazy'\nimport {\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * Drop-in header components of starter kit mode (`Panel::starterKit()`): AlfaKit's search,\n * notifications bell and tenant switcher in the host's own header, on every page of the\n * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger\n * straight away, and load their code and the panel data the first time they render\n * (in the browser, never during SSR).\n *\n * ```tsx\n * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/react'\n *\n * <AlfakitSearch />\n * <AlfakitNotifications />\n * ```\n */\nexport interface AlfakitHeaderWidgetProps {\n  /** The `starterKit()` panel to use (the first one by default). */\n  panel?: string\n}\n\nconst load = () => import('./widgets-loaded')\n\nconst LoadedSearch = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedSearch),\n  (props) => <SearchTrigger {...props} onLoad={preloadSearch} />,\n)\n\nfunction preloadSearch() {\n  void LoadedSearch.preload()\n}\n\nconst LoadedNotifications = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedNotifications),\n  (props) => <NotificationsTrigger {...props} />,\n)\n\nconst LoadedTenantSwitcher = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedTenantSwitcher),\n  (props) => <TenantSwitcherTrigger {...props} />,\n)\n\nfunction useWidgets(panelId: string | undefined): StarterKitWidgets | null {\n  return starterKitWidgets(usePage().props, panelId)\n}\n\n/**\n * AlfaKit's command palette and global search: the search field opens it, and so do the\n * panel's key bindings (⌘K / Ctrl+K by default), registered once for the page. Renders\n * nothing for guests or without global search and a command palette.\n */\nexport function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.search) return null\n\n  return (\n    <span data-slot=\"starter-kit-search\" className=\"inline-flex\">\n      <LoadedSearch source={source} />\n    </span>\n  )\n}\n\n/**\n * The bell with the user's database notifications (`databaseNotifications()`), polling and\n * realtime updates as in the panel. Renders nothing for guests or without database\n * notifications.\n */\nexport function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.notifications) return null\n\n  return (\n    <span data-slot=\"starter-kit-notifications\" className=\"inline-flex\">\n      <LoadedNotifications source={source} />\n    </span>\n  )\n}\n\n/**\n * The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu\n * to choose one on the host's own pages. Renders nothing for guests or other panels.\n */\nexport function AlfakitTenantSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.tenancy) return null\n\n  return (\n    <span data-slot=\"starter-kit-tenant-switcher\" className=\"inline-flex\">\n      <LoadedTenantSwitcher source={source} />\n    </span>\n  )\n}\n"],"mappings":";;;;;;AA6BA,MAAM,aAAa,OAAO;AAE1B,MAAM,eAAe,oBACb,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,YAAY,IAChD,UAAU,oBAAC,eAAD;CAAe,GAAI;CAAO,QAAQ;AAAgB,CAAA,CAC/D;AAEA,SAAS,gBAAgB;CACvB,aAAkB,QAAQ;AAC5B;AAEA,MAAM,sBAAsB,oBACpB,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,mBAAmB,IACvD,UAAU,oBAAC,sBAAD,EAAsB,GAAI,MAAQ,CAAA,CAC/C;AAEA,MAAM,uBAAuB,oBACrB,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,oBAAoB,IACxD,UAAU,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CAChD;AAEA,SAAS,WAAW,SAAuD;CACzE,OAAO,kBAAkB,QAAQ,CAAC,CAAC,OAAO,OAAO;AACnD;;;;;;AAOA,SAAgB,cAAc,EAAE,UAAoC,CAAC,GAAG;CACtE,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,QAAQ,OAAO;CAEpC,OACE,oBAAC,QAAD;EAAM,aAAU;EAAqB,WAAU;EAC7C,UAAA,oBAAC,cAAD,EAAsB,OAAS,CAAA;CAC3B,CAAA;AAEV;;;;;;AAOA,SAAgB,qBAAqB,EAAE,UAAoC,CAAC,GAAG;CAC7E,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,eAAe,OAAO;CAE3C,OACE,oBAAC,QAAD;EAAM,aAAU;EAA4B,WAAU;EACpD,UAAA,oBAAC,qBAAD,EAA6B,OAAS,CAAA;CAClC,CAAA;AAEV;;;;;AAMA,SAAgB,sBAAsB,EAAE,UAAoC,CAAC,GAAG;CAC9E,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,SAAS,OAAO;CAErC,OACE,oBAAC,QAAD;EAAM,aAAU;EAA8B,WAAU;EACtD,UAAA,oBAAC,sBAAD,EAA8B,OAAS,CAAA;CACnC,CAAA;AAEV"}
+{"version":3,"file":"widgets.js","names":[],"sources":["../../src/starter-kit/widgets.tsx"],"sourcesContent":["import {\n  isAlfakitPage,\n  starterKitWidgets,\n  type StarterKitWidgets,\n  type StarterKitWidgetsSchema,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { lazy, Suspense } from 'react'\nimport { lazyComponent } from '../lib/lazy'\nimport {\n  CopilotTrigger,\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * Drop-in header components of starter kit mode (`Panel::starterKit()`): AlfaKit's search,\n * notifications bell and tenant switcher in the host's own header, on every page of the\n * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger\n * straight away, and load their code and the panel data the first time they render\n * (in the browser, never during SSR).\n *\n * ```tsx\n * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/react'\n *\n * <AlfakitSearch />\n * <AlfakitNotifications />\n * <AlfakitCopilot />\n * ```\n */\nexport interface AlfakitHeaderWidgetProps {\n  /** The `starterKit()` panel to use (by default the open AlfaKit page's panel, else the first one that has this component). */\n  panel?: string\n}\n\nconst load = () => import('./widgets-loaded')\n\nconst LoadedSearch = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedSearch),\n  (props) => <SearchTrigger {...props} onLoad={preloadSearch} />,\n)\n\nfunction preloadSearch() {\n  void LoadedSearch.preload()\n}\n\nconst LoadedNotifications = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedNotifications),\n  (props) => <NotificationsTrigger {...props} />,\n)\n\nconst LoadedTenantSwitcher = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedTenantSwitcher),\n  (props) => <TenantSwitcherTrigger {...props} />,\n)\n\nconst LoadedCopilot = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedCopilot),\n  (props) => <CopilotTrigger {...props} onLoad={preloadCopilot} />,\n)\n\nfunction preloadCopilot() {\n  void LoadedCopilot.preload()\n}\n\n// Only needed while impersonating: its code loads then (and never on AlfaKit pages).\nconst LazyImpersonationBanner = lazy(() => import('./impersonation-banner'))\n\n/** While impersonating, the first header component shows the banner on host pages. */\nfunction StarterKitImpersonationBanner({ source }: { source: StarterKitWidgets | null }) {\n  const props = usePage().props\n  const impersonation = source?.widgets.impersonation\n\n  if (!impersonation || isAlfakitPage(props)) return null\n\n  return (\n    <Suspense fallback={null}>\n      <LazyImpersonationBanner impersonation={impersonation} />\n    </Suspense>\n  )\n}\n\nfunction useWidgets(\n  panelId: string | undefined,\n  part: keyof StarterKitWidgetsSchema,\n): StarterKitWidgets | null {\n  return starterKitWidgets(usePage().props, panelId, part)\n}\n\n/**\n * AlfaKit's command palette and global search: the search field opens it, and so do the\n * panel's key bindings (⌘K / Ctrl+K by default), registered once for the page. Renders\n * nothing for guests or without global search and a command palette.\n */\nexport function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel, 'search')\n\n  const banner = <StarterKitImpersonationBanner source={source} />\n\n  if (!source?.widgets.search) return banner\n\n  return (\n    <>\n      {banner}\n      <span data-slot=\"starter-kit-search\" className=\"inline-flex\">\n        <LoadedSearch source={source} />\n      </span>\n    </>\n  )\n}\n\n/**\n * The bell with the user's database notifications (`databaseNotifications()`), polling and\n * realtime updates as in the panel. Renders nothing for guests or without database\n * notifications.\n */\nexport function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel, 'notifications')\n\n  const banner = <StarterKitImpersonationBanner source={source} />\n\n  if (!source?.widgets.notifications) return banner\n\n  return (\n    <>\n      {banner}\n      <span data-slot=\"starter-kit-notifications\" className=\"inline-flex\">\n        <LoadedNotifications source={source} />\n      </span>\n    </>\n  )\n}\n\n/**\n * The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu\n * to choose one on the host's own pages. Renders nothing for guests or other panels.\n */\nexport function AlfakitTenantSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel, 'tenancy')\n\n  const banner = <StarterKitImpersonationBanner source={source} />\n\n  if (!source?.widgets.tenancy) return banner\n\n  return (\n    <>\n      {banner}\n      <span data-slot=\"starter-kit-tenant-switcher\" className=\"inline-flex\">\n        <LoadedTenantSwitcher source={source} />\n      </span>\n    </>\n  )\n}\n\n/**\n * The AI copilot of alfasix/alfakit-ai (`AiPlugin::copilot()`): its button and chat\n * slide-over, opened with its key bindings (`mod+j`) from any page. Renders nothing for\n * guests, without the plugin's copilot, for users who may not use it and (tenancy panels)\n * outside a tenant.\n */\nexport function AlfakitCopilot({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel, 'copilot')\n\n  const banner = <StarterKitImpersonationBanner source={source} />\n\n  if (!source?.widgets.copilot) return banner\n\n  return (\n    <>\n      {banner}\n      <span data-slot=\"starter-kit-copilot\" className=\"inline-flex\">\n        <LoadedCopilot source={source} />\n      </span>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -11,8 +11,21 @@
 /* Built-in themes (alfakit, minimal, soft, corporate, filament); neutral is below. */
 @import './themes.css';
 
+/*
+ * Toast styles, as in the Vue renderer. Sonner also injects them at runtime, which a
+ * nonce-based Content Security Policy blocks; from the stylesheet they always apply.
+ */
+@import 'sonner/dist/styles.css';
+
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Class lists that live in @alfakit/core (stacked-on-mobile tables, filter and column manager
+ * widths in `table.ts`, …): scan core's build too. Relative to this file in
+ * node_modules/@alfakit/<renderer>/dist, next to node_modules/@alfakit/core.
+ */
+@source '../../core/dist';
+
 /*
  * Grid classes are composed at runtime from schema breakpoints (`columns`, `columnSpan`),
  * so force Tailwind to generate every variant the renderers can produce.
@@ -116,10 +129,10 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.54 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: var(--alfakit-danger, oklch(0.55 0.245 27.325));
+  --destructive: var(--alfakit-danger, oklch(0.5 0.245 27.325));
   --destructive-foreground: var(--alfakit-danger-foreground, oklch(0.985 0 0));
   --border: oklch(0.922 0 0);
   --input: oklch(0.64 0 0);

package/dist/themes.css

@@ -287,7 +287,7 @@
   --secondary: oklch(0.967 0.003 264.542);
   --secondary-foreground: oklch(0.21 0.034 264.665);
   --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted-foreground: oklch(0.535 0.027 264.364);
   --accent: oklch(0.967 0.003 264.542);
   --accent-foreground: oklch(0.21 0.034 264.665);
   --border: oklch(0.928 0.006 264.531);
@@ -678,6 +678,11 @@
     color: var(--primary);
   }
 
+  /* The schema inspector's round button (dev tools) sits above the bar, not on its last item. */
+  :root[data-mobile='bottom'] [data-slot='dev-tools-toggle'] {
+    bottom: calc(var(--alfakit-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
+  }
+
   /* Room for the bar, sticky actions sit right above it. */
   :root[data-mobile='bottom'] [data-slot='content'] {
     padding-bottom: calc(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/react",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "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.2"
+    "@alfakit/core": "0.1.6"
   },
   "peerDependencies": {
     "@inertiajs/react": "^3.0.0",

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

@@ -222,6 +222,16 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
 
   const submit = (createAnother = false) => {
     submittedRef.current = true
+
+    // A click that blurred a live field started a refresh: send the state it returns.
+    if (form) {
+      form.whenSettled(() => run(createAnother))
+    } else {
+      run(createAnother)
+    }
+  }
+
+  const run = (createAnother: boolean) => {
     const values = form?.state.values ?? {}
     const options = {
       ...(schema.passwordConfirmation ? { password } : {}),

package/src/components/ai/copilot.tsx

@@ -29,7 +29,14 @@ export function useCopilotState(controller: CopilotController): CopilotState {
  * a chat slide-over. Questions, tools and actions run on the server; proposed actions
  * run only when the user confirms them in the chat.
  */
-export function AiCopilot({ component }: { component: AiCopilotSchema }) {
+export function AiCopilot({
+  component,
+  autoOpen = false,
+}: {
+  component: AiCopilotSchema
+  /** Open once mounted (starter kit header: clicked or `mod+j` before its code loaded). */
+  autoOpen?: boolean
+}) {
   const t = useT()
   // One controller per panel: Inertia visits pass new props objects.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -42,6 +49,12 @@ export function AiCopilot({ component }: { component: AiCopilotSchema }) {
   // The panel mounts the first time the copilot opens (button or shortcut), then stays.
   useEffect(() => controller.subscribe((next) => next.open && setMounted(true)), [controller])
 
+  useEffect(() => {
+    if (autoOpen && component.canUse !== false) controller.open()
+    // Only when it mounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controller])
+
   useEffect(() => {
     const bindings = JSON.parse(keys) as string[]
 

package/src/components/cms/live-preview.tsx

@@ -78,6 +78,9 @@ export function CmsLivePreview({ component }: { component: CmsLivePreviewSchema
   const autosaveRef = useRef<CmsAutosave | null>(null)
   const status =
     snapshot.hasChanges && component.changedStatus ? component.changedStatus : component.status
+  // "Publish changes" appears as soon as an autosave makes the draft differ.
+  const actions =
+    snapshot.hasChanges && component.changedActions ? component.changedActions : component.actions
 
   // Measured in the browser after mounting: stick right under the panel's topbar when it
   // sticks too, and open the pane beside the form on wide screens (the viewer's last
@@ -220,9 +223,9 @@ export function CmsLivePreview({ component }: { component: CmsLivePreviewSchema
               : t('cms.live_preview', {}, 'Live preview')}
           </Button>
         )}
-        {component.actions && component.actions.length > 0 && (
+        {actions && actions.length > 0 && (
           <div onPointerDownCapture={() => void autosaveRef.current?.flush()}>
-            <ActionList actions={component.actions} context={actionContext} size="sm" />
+            <ActionList actions={actions} context={actionContext} size="sm" />
           </div>
         )}
       </div>

package/src/components/fields/builder.tsx

@@ -89,7 +89,7 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
   const context = useFieldActionContext(component)
   const runner = useActionRunner()
   const runItemAction = useRunItemAction(context)
-  const fallbacks = useItemActionFallbacks(component.addActionLabel)
+  const fallbacks = useItemActionFallbacks(component.addActionLabel, 'builder')
   const resolve = useItemActions(component, fallbacks)
   // Long lists render only the visible blocks (plus a few around them).
   const virtual = useVirtualList(
@@ -142,6 +142,13 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
   }
 
   const blockOf = (type: string) => component.blocks.find((block) => block.name === type)
+  // Summaries are made on the server: collapsing items whose block has one brings them up
+  // to date with the edits.
+  const refreshSummaries = (indexes: number[]) => {
+    if (indexes.some((index) => blockOf(items[index]?.type ?? '')?.summary)) {
+      void form?.refresh(component.statePath)
+    }
+  }
   const underMax = component.maxItems == null || items.length < component.maxItems
   const canAdd = component.addable && !locked && underMax
   const canDelete =
@@ -197,9 +204,10 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
           <CollapseAllActions
             context={context}
             resolve={(name) => resolve(name)}
-            onCollapseAll={() =>
+            onCollapseAll={() => {
               setCollapsed(Object.fromEntries(items.map((_, index) => [index, true])))
-            }
+              refreshSummaries(items.map((_, index) => index))
+            }}
             onExpandAll={() =>
               setCollapsed(Object.fromEntries(items.map((_, index) => [index, false])))
             }
@@ -317,9 +325,10 @@ function BuilderFieldContent({ component }: { component: BuilderSchema }) {
                       onMove={moveWithButton}
                       onClone={() => cloneItem(index)}
                       onDelete={() => removeItem(index)}
-                      onToggle={() =>
+                      onToggle={() => {
                         setCollapsed((state) => ({ ...state, [index]: !isCollapsed }))
-                      }
+                        if (!isCollapsed) refreshSummaries([index])
+                      }}
                     >
                       {hasPreview && !locked && (
                         <Button

package/src/components/fields/image-editor-dialog.tsx

@@ -4,7 +4,7 @@ import type {
   ImageEditorData,
   ImageEditorDragMode,
 } from '@alfakit/core'
-import { ImageEditor, loadEditorImage } from '@alfakit/core'
+import { ImageEditor, imageEditorOptionsKey, loadEditorImage } from '@alfakit/core'
 import {
   FlipHorizontal2Icon,
   FlipVertical2Icon,
@@ -63,9 +63,14 @@ export function ImageEditorDialog({
   const [saving, setSaving] = useState(false)
   const hintId = useId()
 
+  // Restart only for another image or other settings: the schema object itself is new on
+  // every render of a template item (a new builder block), which kept restarting the load.
+  const optionsKey = imageEditorOptionsKey(options)
+
   useEffect(() => {
     if (!request) return
 
+    const options = JSON.parse(optionsKey) as FileUploadImageEditorSchema
     let cancelled = false
 
     loadEditorImage(request.file)
@@ -97,7 +102,7 @@ export function ImageEditorDialog({
         return null
       })
     }
-  }, [request, options])
+  }, [request, optionsKey])
 
   const finish = (file: File | null) => {
     request?.resolve(file)

package/src/components/fields/item-actions.tsx

@@ -12,6 +12,7 @@ import {
   ItemMoveTracker,
   addActionJustify,
   itemActionContext,
+  itemActionIcon,
   resolveItemAction,
   withItemActionState,
 } from '@alfakit/core'
@@ -154,19 +155,41 @@ export function useRunItemAction(context: ActionContext) {
   }
 }
 
-/** Default looks of the built-in actions, for payloads without `itemActions`. */
-export function useItemActionFallbacks(addLabel = ''): Record<ItemActionName, ItemActionFallback> {
+/** Default looks of the built-in actions, for payloads without `itemActions` (icons follow their `alfakit::` aliases). */
+export function useItemActionFallbacks(
+  addLabel = '',
+  kind: 'repeater' | 'builder' = 'repeater',
+): Record<ItemActionName, ItemActionFallback> {
   const t = useT()
 
   return {
     add: { label: addLabel, icon: 'plus', variant: 'outline' },
-    delete: { label: t('form.remove_item', {}, 'Remove'), icon: 'trash-2', color: 'danger' },
-    clone: { label: t('form.clone', {}, 'Clone'), icon: 'copy' },
-    reorder: { label: t('form.reorder_item', {}, 'Reorder'), icon: 'grip-vertical' },
-    moveUp: { label: t('form.move_up', {}, 'Move up'), icon: 'chevron-up' },
-    moveDown: { label: t('form.move_down', {}, 'Move down'), icon: 'chevron-down' },
-    collapse: { label: t('form.collapse_item', {}, 'Collapse'), icon: 'chevron-up' },
-    expand: { label: t('form.expand_item', {}, 'Expand'), icon: 'chevron-down' },
+    delete: {
+      label: t('form.remove_item', {}, 'Remove'),
+      icon: itemActionIcon(kind, 'delete', 'trash-2'),
+      color: 'danger',
+    },
+    clone: { label: t('form.clone', {}, 'Clone'), icon: itemActionIcon(kind, 'clone', 'copy') },
+    reorder: {
+      label: t('form.reorder_item', {}, 'Reorder'),
+      icon: itemActionIcon(kind, 'reorder', 'grip-vertical'),
+    },
+    moveUp: {
+      label: t('form.move_up', {}, 'Move up'),
+      icon: itemActionIcon(kind, 'move-up', 'chevron-up'),
+    },
+    moveDown: {
+      label: t('form.move_down', {}, 'Move down'),
+      icon: itemActionIcon(kind, 'move-down', 'chevron-down'),
+    },
+    collapse: {
+      label: t('form.collapse_item', {}, 'Collapse'),
+      icon: itemActionIcon(kind, 'collapse', 'chevron-up'),
+    },
+    expand: {
+      label: t('form.expand_item', {}, 'Expand'),
+      icon: itemActionIcon(kind, 'expand', 'chevron-down'),
+    },
     collapseAll: {
       label: t('form.collapse_all', {}, 'Collapse all'),
       icon: 'chevrons-down-up',

package/src/components/fields/key-value.tsx

@@ -1,5 +1,6 @@
 import {
   fieldIds,
+  itemActionIcon,
   moveRepeaterItem,
   reorderedItemKeys,
   resolveItemAction,
@@ -51,11 +52,11 @@ export function KeyValueField({ component }: { component: KeyValueSchema }) {
   })
   const deleteAction = resolveItemAction('delete', component, undefined, {
     label: t('form.remove_row', {}, 'Remove row'),
-    icon: 'trash-2',
+    icon: itemActionIcon('key-value', 'delete', 'trash-2'),
   })
   const reorderAction = resolveItemAction('reorder', component, undefined, {
     label: t('form.reorder_item', {}, 'Reorder'),
-    icon: 'grip-vertical',
+    icon: itemActionIcon('key-value', 'reorder', 'grip-vertical'),
   })
 
   const update = (next: Row[]) => setValue(next)

package/src/components/fields/modal-table-select.tsx

@@ -20,7 +20,7 @@ import {
   XIcon,
 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useChoice, useT } from '../../context'
+import { useChoice, useFormatter, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -135,6 +135,7 @@ interface PickerProps {
 
 function ModalTablePicker({ component, initial, onClose, onConfirm }: PickerProps) {
   const t = useT()
+  const format = useFormatter()
   const choice = useChoice()
   const form = useFormStore()
   const multiple = Boolean(component.multiple)
@@ -399,8 +400,12 @@ function ModalTablePicker({ component, initial, onClose, onConfirm }: PickerProp
                 {paging.total !== undefined
                   ? t(
                       'table.showing',
-                      { first: paging.from, last: paging.to, total: paging.total },
-                      `Showing ${paging.from}–${paging.to} of ${paging.total}`,
+                      {
+                        first: format.number(paging.from),
+                        last: format.number(paging.to),
+                        total: format.number(paging.total),
+                      },
+                      'Showing :first–:last of :total',
                     )
                   : `${paging.from}–${paging.to}`}
               </span>

package/src/components/fields/repeater.tsx

@@ -13,7 +13,7 @@ import {
   removeIndexedState,
   removeRepeaterItem,
   reorderedItemKeys,
-  replacePlaceholder,
+  templateForIndex,
   virtualizeOptions,
 } from '@alfakit/core'
 import { useState } from 'react'
@@ -125,8 +125,7 @@ function RepeaterFieldContent({ component }: { component: RepeaterSchema }) {
     )
 
   const schemaFor = (index: number): SchemaComponent[] =>
-    component.items[index]?.schema ??
-    replacePlaceholder(component.template, '__INDEX__', String(index))
+    component.items[index]?.schema ?? templateForIndex(component.template, index)
 
   const canAdd =
     component.addable &&

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

@@ -9,6 +9,7 @@ import {
   attachToolbarKeyboard,
   commandLabel,
   detailsNodeConfigs,
+  documentNonce,
   EditorAttachments,
   fieldIds,
   fileAttachmentError,
@@ -403,6 +404,8 @@ function RichEditorInput({
   useEffect(() => () => attachments.destroy(), [attachments])
 
   const editor = useEditor({
+    // TipTap injects its base CSS; with the page's CSP nonce a nonce-based policy allows it.
+    injectNonce: documentNonce(),
     extensions: [
       StarterKit.configure({ link: false }),
       Link.configure(linkExtensionOptions(component.linkProtocols)),

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

@@ -128,7 +128,8 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       submitting.current = true
       submittedBlock.current = latestBlock.current
       store.setProcessing(true)
-      runner.execute(action, ctx, store.state.values)
+      // A click that blurred a live field started a refresh: send the state it returns.
+      store.whenSettled(() => runner.execute(action, ctx, store.state.values))
     },
     [runner, store],
   )

package/src/components/form/form-context.tsx

@@ -1,5 +1,5 @@
 import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'
-import { fieldAria, fieldDomId } from '@alfakit/core'
+import { fieldAria, fieldDomId, fieldError } from '@alfakit/core'
 import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react'
 import { useStore, useStoreSelector } from '../../hooks/use-store'
 
@@ -60,7 +60,7 @@ export function useField<T = unknown>(field: BaseField): FieldBinding<T> {
     return current as T
   })
 
-  const error = useStoreSelector(store.store, (state) => state.errors[path]?.[0])
+  const error = useStoreSelector(store.store, (state) => fieldError(state.errors, path))
 
   const setValue = useCallback((next: T) => store.setValue(path, next), [store, path])
   const blur = useCallback(() => store.blur(path), [store, path])

package/src/components/kanban/kanban.tsx

@@ -28,7 +28,14 @@ import {
   SearchIcon,
 } from 'lucide-react'
 import { Fragment, useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'
-import { useActionRunner, useDirection, useFormatter, usePanel, useT } from '../../context'
+import {
+  useActionRunner,
+  useChoice,
+  useDirection,
+  useFormatter,
+  usePanel,
+  useT,
+} from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { badgeColorClasses, colorClass, cssColor } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
@@ -424,6 +431,7 @@ function ColumnHeader({
   onCreate: () => void
   t: Translate
 }) {
+  const choice = useChoice()
   const wip = kanbanWipState(column)
   const shown =
     column.wipLimit !== undefined ? column.count : filtered ? column.total : column.count
@@ -436,7 +444,7 @@ function ColumnHeader({
             { shown: column.total, count: column.count },
             ':shown of :count cards',
           )
-        : t('kanban.count', { count: column.count }, ':count cards')
+        : choice('kanban.count', column.count, {}, '{1} :count card|[0,*] :count cards')
   const style = column.color ? { borderTopColor: cssColor(column.color) } : undefined
   const toggleLabel = collapsed
     ? t('kanban.expand', { column: column.label }, 'Expand :column')
@@ -532,7 +540,12 @@ function ColumnHeader({
       )}
       {wip === 'over' && (
         <p className="text-destructive text-xs">
-          {t('kanban.wip_over', { limit: column.wipLimit ?? 0 }, 'Over the limit of :limit cards')}
+          {choice(
+            'kanban.wip_over',
+            column.wipLimit ?? 0,
+            { limit: column.wipLimit ?? 0 },
+            '{1} Over the limit of :limit card|[0,*] Over the limit of :limit cards',
+          )}
         </p>
       )}
       {wip === 'full' && column.wipStrict && (

package/src/components/layout/section.tsx

@@ -76,11 +76,11 @@ export function SectionComponent({ component }: { component: SectionSchema }) {
         {component.heading &&
           createElement(
             headingTag(component.headingLevel),
-            { className: 'text-base leading-6 font-semibold' },
+            { className: 'text-base leading-6 font-semibold break-words' },
             component.heading,
           )}
         {component.description && (
-          <p className="text-muted-foreground mt-1 text-sm">{component.description}</p>
+          <p className="text-muted-foreground mt-1 text-sm break-words">{component.description}</p>
         )}
       </div>
       {component.headerActions && component.headerActions.length > 0 && (