@alfakit/react 0.1.8 → 0.1.10

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 { 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}>{children}</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":";;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,wBAAwB,EAAE,UAAU,mBAAmC;CACrF,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,QAAQ,mBAAmB,MAAM,QAAQ,mBAAmB;CAElE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,yBAAsB;EACtB,WAAW,GACT,gEACA,WAAW,UAAU,YACvB;EANF,UAAA;GAQE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;GAC3B;GACD,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA;EACvB;;AAET;AAIA,IAAI,iBAA6C;AAEjD,SAAS,wBAAwB,SAAqD;CAIpF,MAAM,aAAa,mBAAmB,QAAQ,QAAQ;CACtD,MAAM,WAAW,sBAAsB,CAAC,CACrC,aAAa,gBAAgB,CAAC,CAC9B,SAAS,eAAe,UAAU,CAAC,CACnC,SAAS,cAAc,uBAAuB,CAAC,CAC/C,aAAa,WAAW,UAAU,CAAC,CACnC,aAAa,QAAQ,cAAc,CAAC,CAAC;CACxC,MAAM,aAAa,IAAI,WAAW;CAElC,OAAO;EACL;EACA,OAAO;GAAE,gBAAgB;GAAa,GAAG,WAAW;GAAO,GAAG,QAAQ;EAAM;EAC5E;EACA,SAAS,IAAI,aAAa;GACxB,WAAW;IAAE,QAAQ;IAAI,OAAO;GAAG;GAEnC,UAAU,UAAU;IAClB,MAAM,eAAe,gCACnB,OACA,OACC,KAAK,cAAc,aAAa,WAAW,EAAE,KAAK,cAAc,QAAQ,CAC3E;IAEA,IAAI,cAAc,UAAU,YAAY;GAC1C;EACF,CAAC;CACH;AACF;AAEA,SAAS,kBAAkB,SAAqD;CAC9E,IAAI,OAAO,WAAW,aAAa,OAAO,wBAAwB,OAAO;CAEzE,mBAAmB,wBAAwB,OAAO;CAElD,OAAO;AACT;;;;;;AAOA,SAAgB,sBAAsB,EACpC,SACA,YAIC;CACD,MAAM,CAAC,WAAW,eAAe,kBAAkB,WAAW,CAAC,CAAC,CAAC;CACjE,MAAM,QAAQ,QAA0B,CAAC,CAAC;CAC1C,MAAM,QAAQ,MAAM;CAGpB,IAAI,OACF,QAAQ,QAAQ,aAAa;EAC3B,QAAQ,MAAM,UAAU,UAAU;EAClC,OAAO,MAAM,UAAU,SAAS;CAClC,CAAC;CAGH,gBAAgB;EACd,mBAAmB,KAAK;CAC1B,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,0BACG,iBAAiB,UAAU,YAAY,IACvC,KAAK,cAAc,aAAa,QAAQ,WAAW,EAAE,KAAK,cAAc,QAAQ,CACnF;EACA,aAAa,sBAAsB;EAEnC,aAAa;GAEX,mBAAmB,IAAI;GACvB,aAAa,KAAA,CAAS;EACxB;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,iBAAD;EAAiB,OAAO;EAGtB,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,KAAK,OAAO,cAAc,aAAa;GACvC,MAAM,OAAO,cAAc;GAC3B,WAAU;GAEV,UAAA,oBAAC,aAAD;IAAa,WAAW;IAAyB;GAAsB,CAAA;EACpE,CAAA;CACU,CAAA;AAErB;;;;;;;;;;;;;;AAeA,SAAgB,qBAAqB,UAAiC,CAAC,GAAG;CAExE,aAAa;CAEb,gBAAgB,OAAO;CACvB,6BAA6B,QAAQ,wBAAwB,CAAC,CAAC;CAE/D,SAAS,wBAAwB;EAC/B,OAAO,oBAAC,aAAD,CAAc,CAAA;CACvB;CAGA,sBAAsB,UAAU,UAAmC,CACjE,GAAI,QAAQ,UAAU,yBAAyB,KAAK,IAChD,CAAC,CAAC,QAAQ,QAAQ,EAAE,aAAa,+BAA+B,KAAK,EAAE,CAAC,CAAU,IAClF,CAAC,GACL,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CACrC;CAEA,OAAO;AACT"}
+{"version":3,"file":"starter-kit.js","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  STARTER_KIT_TOASTER_ID,\n  Translator,\n  configureCharts,\n  installStarterKitRuntime,\n  registerRichEditorExtensions,\n  resolveRequestErrorNotification,\n  starterKitBreadcrumbsFromProps,\n  syncStarterKitPage,\n  usesStarterKitHostLayout,\n  type AlfakitOptions,\n  type AlfakitPageProps,\n  type StarterKitBreadcrumb,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { DebugPanelSlot } from '../components/panel/debug-panel-slot'\nimport { Slot } from '../components/panel/slot'\nimport {\n  AlfakitProvider,\n  useAlfakitProps,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { AlfakitRoot } from '../create-alfakit'\nimport type { AppLayoutProps } from '../layouts/app-layout'\nimport { AuthLayout } from '../layouts/auth-layout'\nimport { lazyPanelLayouts } from '../layouts/lazy-layouts'\nimport { MAX_WIDTHS } from '../layouts/max-widths'\nimport { discoverComponents } from '../lib/discovery'\nimport { preloadIcons } from '../lib/icons'\nimport { cn } from '../lib/utils'\nimport { AlfakitPage } from '../pages/page'\nimport { createDefaultRegistry } from '../registry'\n\n/** The host's layout, as the starter kits' `AppLayout` takes its props. */\nexport type StarterKitLayout = ComponentType<{\n  breadcrumbs?: StarterKitBreadcrumb[]\n  children: ReactNode\n}>\n\nexport interface StarterKitPageOptions extends Pick<\n  AlfakitOptions<AnyComponent>,\n  'components' | 'pages' | 'chartFormatters' | 'chartPlugins' | 'richEditorExtensions'\n> {\n  /**\n   * The host layout Alfakit pages render in, usually the starter kit's `AppLayout`\n   * (`@/layouts/app-layout`). It receives the page's breadcrumbs as `{ title, href }`.\n   * `null` renders the pages without a host layout.\n   */\n  layout?: StarterKitLayout | null\n  /**\n   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass\n   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\\/*.tsx')`\n   * from `resources/js/pages/Alfakit/Page.tsx` and every file there registers under its name.\n   */\n  discover?: AlfakitOptions<AnyComponent>['discover']\n}\n\n/**\n * The content area of an Alfakit page inside the host layout: what `layout:app` renders in\n * starter kit mode instead of Alfakit's sidebar and top bar. Replace it with\n * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.\n */\nexport function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps) {\n  const props = useAlfakitProps()\n  // The host's pages fill the content area, so starter kit pages default to the full width.\n  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? 'full'\n\n  return (\n    <div\n      data-slot=\"content\"\n      data-alfakit-embedded=\"\"\n      className={cn(\n        'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',\n        MAX_WIDTHS[width] ?? 'max-w-full',\n      )}\n    >\n      <Slot name=\"content.start\" />\n      {children}\n      <Slot name=\"content.end\" />\n    </div>\n  )\n}\n\n// One context for the browser session (it survives navigations between host and Alfakit\n// pages); a server render builds one per request so concurrent renders never share a locale.\nlet browserContext: AlfakitContextValue | null = null\n\nfunction createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)\n  // keep the panel's card; the fullscreen layout loads on demand.\n  // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.\n  const discovered = discoverComponents(options.discover)\n  const registry = createDefaultRegistry()\n    .registerMany(lazyPanelLayouts)\n    .register('layout:auth', AuthLayout)\n    .register('layout:app', StarterKitContentLayout)\n    .registerMany(discovered.components)\n    .registerMany(options.components ?? {})\n  const translator = new Translator()\n\n  return {\n    registry,\n    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },\n    translator,\n    actions: new ActionRunner({\n      endpoints: { action: '', modal: '' },\n      // A failed action request is a toast, never a silent no-op.\n      onError: (error) => {\n        const notification = resolveRequestErrorNotification(\n          error,\n          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n  }\n}\n\nfunction starterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  if (typeof window === 'undefined') return createStarterKitContext(options)\n\n  browserContext ??= createStarterKitContext(options)\n\n  return browserContext\n}\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nexport function AlfakitStarterKitRoot({\n  options,\n  children,\n}: {\n  options?: StarterKitPageOptions\n  children?: ReactNode\n}) {\n  const [context] = useState(() => starterKitContext(options ?? {}))\n  const props = usePage<AlfakitPageProps>().props\n  const panel = props.alfakit\n\n  // Endpoints and error notifications follow the open page.\n  if (panel) {\n    context.actions.setEndpoints({\n      action: panel.endpoints.action ?? '',\n      modal: panel.endpoints.modal ?? '',\n    })\n  }\n\n  useEffect(() => {\n    syncStarterKitPage(props)\n  }, [props])\n\n  useEffect(() => {\n    installStarterKitRuntime(\n      (notification) => showToast(notification),\n      (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n    )\n    setToasterId(STARTER_KIT_TOASTER_ID)\n\n    return () => {\n      // A host page is open: its errors and toasts are the host's again.\n      syncStarterKitPage(null)\n      setToasterId(undefined)\n    }\n  }, [context])\n\n  return (\n    <AlfakitProvider value={context}>\n      {/* The reading direction and language of Alfakit's content only: the host layout around\n          it (sidebar, header) and the app's own pages keep the document's. */}\n      <div\n        data-slot=\"starter-kit-root\"\n        dir={panel?.localization?.direction ?? 'ltr'}\n        lang={panel?.localization?.tag}\n        className=\"contents\"\n      >\n        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>\n          {children}\n          {/* The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't\n              render: float it in the corner instead (nothing without `alfakitDebug`). The corner is the\n              document's right: the kit's sidebar stays on the left in a right-to-left panel language. */}\n          <div data-slot=\"starter-kit-debug-panel\" className=\"fixed right-16 bottom-16 z-40\">\n            <DebugPanelSlot />\n          </div>\n        </AlfakitRoot>\n      </div>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The page component for `Alfakit/Page` in a starter kit app: the host's\n * `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,\n * so Inertia's page resolution, the root view's page preload and SSR all find it like any\n * other host page.\n *\n * ```tsx\n * import { createStarterKitPage } from '@alfakit/react'\n * import AppLayout from '@/layouts/app-layout'\n *\n * export default createStarterKitPage({ layout: AppLayout })\n * ```\n */\nexport function createStarterKitPage(options: StarterKitPageOptions = {}) {\n  // Panel pages draw named icons: fetch `lucide-react/dynamic` with the page.\n  preloadIcons()\n  // `'js:name'` chart option callbacks, Chart.js plugins and rich editor extensions.\n  configureCharts(options)\n  registerRichEditorExtensions(options.richEditorExtensions ?? {})\n\n  function AlfakitStarterKitPage() {\n    return <AlfakitPage />\n  }\n\n  // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.\n  AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [\n    ...(options.layout && usesStarterKitHostLayout(props)\n      ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]\n      : []),\n    [AlfakitStarterKitRoot, { options }] as const,\n  ]\n\n  return AlfakitStarterKitPage\n}\n"],"mappings":"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"}

package/dist/styles.css

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

package/dist/themes.css

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

package/package.json

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

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

@@ -469,6 +469,8 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
             // Pinned to the top of the scrolling dialog, edge to edge.
             schema.stickyHeader &&
               'bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4',
+            // Room for the close button (X): a long heading would run under it.
+            schema.closeButton !== false && (schema.stickyHeader ? 'pe-12' : 'pe-6'),
           )}
         >
           {header}

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

@@ -80,7 +80,7 @@ export function DevToolsInspector() {
           size="icon"
           aria-label={t('dev_tools.open', {}, 'Open schema inspector')}
           data-slot="dev-tools-toggle"
-          className="fixed end-4 bottom-4 z-40 rounded-full shadow-md"
+          className="fixed end-4 bottom-16 z-40 rounded-full shadow-md [[data-slot=starter-kit-root]_&]:end-auto [[data-slot=starter-kit-root]_&]:right-4"
         >
           <BracesIcon />
         </Button>

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

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

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/form/form-block.tsx

@@ -3,6 +3,7 @@ import {
   FormStore,
   applyFormRefresh,
   formActionsVisible,
+  formIdPrefix,
   formIdentity,
   formRefreshFor,
   isImplicitSubmit,
@@ -17,8 +18,15 @@ import {
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'
+import { useCallback, useEffect, useId, useMemo, useRef } from 'react'
+import {
+  useActionRunner,
+  useAlfakitProps,
+  usePageSchema,
+  usePanel,
+  useStandalone,
+  useT,
+} from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { ActionList } from '../actions/action-list'
 import { showToast } from '../notifications/flash-toasts'
@@ -42,12 +50,17 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
   // identity starts from server state again. The token is re-issued per response, so it
   // is swapped in place instead of being part of the identity.
   const identity = formIdentity(page, block)
+  // Several standalone components can share a page (and field names): each form gets its
+  // own field id prefix, so labels and errors point at their own inputs.
+  const standalone = useStandalone()
+  const instanceId = useId()
 
   const store = useMemo(
     () =>
       new FormStore(block, {
         token,
         component: block.component,
+        idPrefix: standalone ? formIdPrefix(`form-${instanceId}`) : undefined,
         refreshUrl: panel.endpoints.schemaRefresh,
         optionsUrl: panel.endpoints.schemaOptions,
         validateUrl: panel.endpoints.schemaValidate,

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/app-sidebar.tsx

@@ -133,7 +133,7 @@ function NavSubItem({ item }: { item: NavigationItemSchema }) {
           <CollapsibleContent>
             <SidebarMenuSub>
               {item.children.map((child) => (
-                <NavSubItem key={child.label} item={child} />
+                <NavSubItem key={child.url ?? child.label} item={child} />
               ))}
             </SidebarMenuSub>
           </CollapsibleContent>
@@ -175,7 +175,7 @@ function NavItem({ item }: { item: NavigationItemSchema }) {
           <CollapsibleContent>
             <SidebarMenuSub>
               {item.children.map((child) => (
-                <NavSubItem key={child.label} item={child} />
+                <NavSubItem key={child.url ?? child.label} item={child} />
               ))}
             </SidebarMenuSub>
           </CollapsibleContent>
@@ -263,7 +263,7 @@ function NavGroup({ group }: { group: NavigationGroupSchema }) {
     <SidebarGroupContent className={cn(flyout && 'group-data-[collapsible=icon]:hidden')}>
       <SidebarMenu>
         {group.items.map((item) => (
-          <NavItem key={item.label} item={item} />
+          <NavItem key={item.url ?? item.label} item={item} />
         ))}
       </SidebarMenu>
     </SidebarGroupContent>

package/src/components/panel/bottom-nav.tsx

@@ -81,7 +81,7 @@ export function BottomNav() {
       className="md:hidden"
     >
       {primary.map((item) => (
-        <BottomNavLink key={item.label} item={item} />
+        <BottomNavLink key={item.url ?? item.label} item={item} />
       ))}
       {overflow.length > 0 && (
         <Sheet open={open} onOpenChange={setOpen}>
@@ -109,7 +109,7 @@ export function BottomNav() {
                 .flatMap((item) => [item, ...(item.children ?? [])])
                 .map((item) => (
                   <Link
-                    key={item.label}
+                    key={item.url ?? item.label}
                     href={navigationItemUrl(item) ?? '#'}
                     onClick={() => setOpen(false)}
                     data-active={isNavigationItemActive(item) ? 'true' : undefined}

package/src/components/panel/keyboard-shortcuts.tsx

@@ -47,7 +47,7 @@ export function KeyboardShortcuts() {
   const overrides = JSON.stringify(config ? (config.overrides ?? {}) : {})
   const token = page?.token ?? ''
   const commands = panel.commandPalette?.commands
-  const home = panel.url
+  const home = panel.dashboardUrl ?? panel.url
   // Strings, so the effect below doesn't re-run on every render (`t` is a new function each time).
   const overlayLabel = t('shortcuts.show_overlay', {}, 'Show keyboard shortcuts')
   const searchLabel = t('shortcuts.focus_search', {}, 'Search the table')

package/src/components/panel/shortcuts-overlay.tsx

@@ -1,6 +1,6 @@
 import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'
 import {
-  bindingFromEvent,
+  ShortcutRecorder,
   flattenActionGroup,
   saveShortcutOverrides,
   shortcutOverlayGroups,
@@ -52,50 +52,55 @@ export function ShortcutsOverlay({
     }
   }
 
-  // While recording, the next key press is the new binding (Escape cancels). Listening in the
-  // capture phase keeps the key from closing the dialog or running another shortcut.
+  // While recording, the keys pressed are the new binding: one key (with modifiers) or a
+  // sequence ("g o"), finished a second after the last key (Escape cancels). Listening in
+  // the capture phase keeps the keys from closing the dialog or running another shortcut.
   useEffect(() => {
     if (!recording) return
 
     shortcuts.setPaused(true)
 
-    const listener = (event: KeyboardEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (event.key === 'Escape') {
+    const recorder = new ShortcutRecorder({
+      onDone: (binding) => {
         setRecording(null)
-        setMessage(t('shortcuts.cancelled', {}, 'Change cancelled.'))
 
-        return
-      }
+        const conflict = shortcuts.conflict([binding], recording)
 
-      const binding = bindingFromEvent(event)
+        if (conflict) {
+          setMessage(
+            t(
+              'shortcuts.conflict',
+              { label: conflict.label },
+              `Already used by “${conflict.label}”.`,
+            ),
+          )
 
-      if (!binding) return
+          return
+        }
 
-      const conflict = shortcuts.conflict([binding], recording)
+        void save(recording, [binding])
+      },
+    })
 
-      setRecording(null)
+    const listener = (event: KeyboardEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
 
-      if (conflict) {
-        setMessage(
-          t(
-            'shortcuts.conflict',
-            { label: conflict.label },
-            `Already used by “${conflict.label}”.`,
-          ),
-        )
+      if (event.key === 'Escape') {
+        recorder.cancel()
+        setRecording(null)
+        setMessage(t('shortcuts.cancelled', {}, 'Change cancelled.'))
 
         return
       }
 
-      void save(recording, [binding])
+      recorder.press(event)
     }
 
     window.addEventListener('keydown', listener, true)
 
     return () => {
+      recorder.cancel()
       window.removeEventListener('keydown', listener, true)
       shortcuts.setPaused(false)
     }

package/src/components/table/column-manager.tsx

@@ -114,13 +114,13 @@ export function ColumnManager({
     }
   }
 
-  const save = async (order: string[]): Promise<boolean> => {
+  const save = async (order: string[], options: { reload?: boolean } = {}): Promise<boolean> => {
     if (!panel.endpoints.tableColumns) return false
 
     setSaving(true)
 
     try {
-      await saveColumnOrder(panel.endpoints.tableColumns, token, component, order)
+      await saveColumnOrder(panel.endpoints.tableColumns, token, component, order, options)
 
       return true
     } catch (error) {
@@ -203,7 +203,8 @@ export function ColumnManager({
     setAnnouncement('')
     setOpen(false)
 
-    if (orderDraft && orderChanged) await save(orderDraft)
+    // The visibility visit renders the new order too: no second reload racing it.
+    if (orderDraft && orderChanged) await save(orderDraft, { reload: !columns })
 
     if (columns) visitTable(table.identifier, { columns }, ['page'])
   }
@@ -212,7 +213,8 @@ export function ColumnManager({
   const reset = async () => {
     if (reorderable) {
       setOrderDraft(null)
-      await save([])
+      // The visibility visit below renders the defined order too.
+      await save([], { reload: !toggleable })
     }
 
     if (toggleable) {