@alfakit/react 0.1.0 → 0.1.2

package/dist/standalone/alfakit-toaster.js

@@ -1,7 +1,8 @@
 import { useOptionalAlfakit } from "../context.js";
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from "./runtime.js";
+import { setToasterId } from "../components/notifications/flash-toasts.js";
 import { Toaster } from "../components/ui/sonner.js";
-import { resolveToastPosition } from "@alfakit/core";
+import { STARTER_KIT_TOASTER_ID, resolveToastPosition } from "@alfakit/core";
 import { useEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/standalone/alfakit-toaster.tsx
@@ -24,8 +25,14 @@ function AlfakitToaster({ position, dir = "ltr", toaster = true, claimed = false
 	useEffect(() => {
 		ensureFlashToasts(context.registry);
 	}, [context]);
+	useEffect(() => {
+		if (!toaster) return void 0;
+		setToasterId(STARTER_KIT_TOASTER_ID);
+		return () => setToasterId(void 0);
+	}, [toaster]);
 	if (!toaster) return null;
 	return /* @__PURE__ */ jsx(Toaster, {
+		id: STARTER_KIT_TOASTER_ID,
 		position: resolveToastPosition(position, dir),
 		dir,
 		richColors: true,

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

@@ -1 +1 @@
-{"version":3,"file":"alfakit-toaster.js","names":[],"sources":["../../src/standalone/alfakit-toaster.tsx"],"sourcesContent":["import { resolveToastPosition, type ToastPosition } from '@alfakit/core'\nimport { useEffect, useMemo } from 'react'\nimport { Toaster } from '../components/ui/sonner'\nimport { useOptionalAlfakit, type AlfakitContextValue } from '../context'\nimport { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'\n\nexport interface AlfakitToasterProps {\n  /** Where toasts appear; `start`/`end` follow the reading direction. */\n  position?: ToastPosition\n  dir?: 'ltr' | 'rtl'\n  /**\n   * Render sonner's `<Toaster>` too (default). Pass `false` when your layout already mounts\n   * one: flashed Alfakit notifications are then shown through it.\n   */\n  toaster?: boolean\n  /** @internal Set by `<AlfakitComponent>` when it takes the toaster role. */\n  claimed?: boolean\n}\n\n/**\n * Shows notifications flashed by standalone components (`Notification::make()->send()`\n * from `submit()` or an action) as toasts. Place it once in your app layout; a page whose\n * layout has none gets one from its first `<AlfakitComponent>`.\n *\n * ```tsx\n * <AlfakitToaster />\n * ```\n */\nexport function AlfakitToaster({\n  position,\n  dir = 'ltr',\n  toaster = true,\n  claimed = false,\n}: AlfakitToasterProps) {\n  const parent = useOptionalAlfakit()\n\n  // Outside <AlfakitComponent> the flash reader needs a registry for custom toast views.\n  const context = useMemo<AlfakitContextValue>(\n    () => parent ?? createStandaloneContext({ action: '', modal: '' }, undefined, undefined),\n    [parent],\n  )\n\n  useEffect(() => (claimed ? undefined : claimToaster()), [claimed])\n\n  useEffect(() => {\n    ensureFlashToasts(context.registry)\n  }, [context])\n\n  if (!toaster) return null\n\n  return <Toaster position={resolveToastPosition(position, dir)} dir={dir} richColors closeButton />\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,SAAgB,eAAe,EAC7B,UACA,MAAM,OACN,UAAU,MACV,UAAU,SACY;CACtB,MAAM,SAAS,mBAAmB;CAGlC,MAAM,UAAU,cACR,UAAU,wBAAwB;EAAE,QAAQ;EAAI,OAAO;CAAG,GAAG,KAAA,GAAW,KAAA,CAAS,GACvF,CAAC,MAAM,CACT;CAEA,gBAAiB,UAAU,KAAA,IAAY,aAAa,GAAI,CAAC,OAAO,CAAC;CAEjE,gBAAgB;EACd,kBAAkB,QAAQ,QAAQ;CACpC,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,oBAAC,SAAD;EAAS,UAAU,qBAAqB,UAAU,GAAG;EAAQ;EAAK,YAAA;EAAW,aAAA;CAAa,CAAA;AACnG"}
+{"version":3,"file":"alfakit-toaster.js","names":[],"sources":["../../src/standalone/alfakit-toaster.tsx"],"sourcesContent":["import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'\nimport { useEffect, useMemo } from 'react'\nimport { setToasterId } from '../components/notifications/flash-toasts'\nimport { Toaster } from '../components/ui/sonner'\nimport { useOptionalAlfakit, type AlfakitContextValue } from '../context'\nimport { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'\n\nexport interface AlfakitToasterProps {\n  /** Where toasts appear; `start`/`end` follow the reading direction. */\n  position?: ToastPosition\n  dir?: 'ltr' | 'rtl'\n  /**\n   * Render sonner's `<Toaster>` too (default). Pass `false` when your layout already mounts\n   * one: flashed Alfakit notifications are then shown through it.\n   */\n  toaster?: boolean\n  /** @internal Set by `<AlfakitComponent>` when it takes the toaster role. */\n  claimed?: boolean\n}\n\n/**\n * Shows notifications flashed by standalone components (`Notification::make()->send()`\n * from `submit()` or an action) as toasts. Place it once in your app layout; a page whose\n * layout has none gets one from its first `<AlfakitComponent>`.\n *\n * ```tsx\n * <AlfakitToaster />\n * ```\n */\nexport function AlfakitToaster({\n  position,\n  dir = 'ltr',\n  toaster = true,\n  claimed = false,\n}: AlfakitToasterProps) {\n  const parent = useOptionalAlfakit()\n\n  // Outside <AlfakitComponent> the flash reader needs a registry for custom toast views.\n  const context = useMemo<AlfakitContextValue>(\n    () => parent ?? createStandaloneContext({ action: '', modal: '' }, undefined, undefined),\n    [parent],\n  )\n\n  useEffect(() => (claimed ? undefined : claimToaster()), [claimed])\n\n  useEffect(() => {\n    ensureFlashToasts(context.registry)\n  }, [context])\n\n  // Our own toaster gets an id, so a `<Toaster />` the app's layout already mounts (the\n  // starter kits have one) doesn't show every Alfakit toast a second time.\n  useEffect(() => {\n    if (!toaster) return undefined\n\n    setToasterId(STARTER_KIT_TOASTER_ID)\n\n    return () => setToasterId(undefined)\n  }, [toaster])\n\n  if (!toaster) return null\n\n  return (\n    <Toaster\n      id={STARTER_KIT_TOASTER_ID}\n      position={resolveToastPosition(position, dir)}\n      dir={dir}\n      richColors\n      closeButton\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,SAAgB,eAAe,EAC7B,UACA,MAAM,OACN,UAAU,MACV,UAAU,SACY;CACtB,MAAM,SAAS,mBAAmB;CAGlC,MAAM,UAAU,cACR,UAAU,wBAAwB;EAAE,QAAQ;EAAI,OAAO;CAAG,GAAG,KAAA,GAAW,KAAA,CAAS,GACvF,CAAC,MAAM,CACT;CAEA,gBAAiB,UAAU,KAAA,IAAY,aAAa,GAAI,CAAC,OAAO,CAAC;CAEjE,gBAAgB;EACd,kBAAkB,QAAQ,QAAQ;CACpC,GAAG,CAAC,OAAO,CAAC;CAIZ,gBAAgB;EACd,IAAI,CAAC,SAAS,OAAO,KAAA;EAErB,aAAa,sBAAsB;EAEnC,aAAa,aAAa,KAAA,CAAS;CACrC,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,SAAD;EACE,IAAI;EACJ,UAAU,qBAAqB,UAAU,GAAG;EACvC;EACL,YAAA;EACA,aAAA;CACD,CAAA;AAEL"}

package/dist/standalone.css

@@ -13,6 +13,8 @@
  * your own `:root`. Shared by the React, Vue and Svelte renderers (copied into each dist).
  */
 
+@import './components.css';
+
 @custom-variant dark (&:is(.dark *));
 
 /*
@@ -148,3 +150,48 @@
   content: attr(data-placeholder);
   @apply text-muted-foreground pointer-events-none float-left;
 }
+
+/*
+ * "Developed by Alfa Six" (`[data-slot='credit']`) in the footer of panel pages. Starter-kit
+ * panels load this stylesheet instead of `themes.css`, so its rules are repeated here
+ * (keep them in step with the Credit section of themes.css).
+ */
+[data-slot='credit'] {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 1rem 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--muted-foreground);
+}
+
+[data-slot='credit'] a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: inherit;
+  text-decoration: none;
+  transition: color 150ms;
+}
+
+[data-slot='credit'] svg {
+  width: auto;
+  height: 1.125rem;
+  flex-shrink: 0;
+  color: #073b78;
+}
+
+.dark [data-slot='credit'] svg {
+  color: #ffffff;
+}
+
+[data-slot='credit'] a:hover,
+[data-slot='credit'] a:focus-visible {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+[data-slot='credit'] strong {
+  font-weight: 600;
+}

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

@@ -161,7 +161,7 @@ function TenantChooser({ panel }) {
 				children: [/* @__PURE__ */ jsx(Icon, {
 					name: "alfakit::panels.tenant-menu.registration-button",
 					fallback: PlusIcon
-				}), t("tenancy.register", {}, "New")]
+				}), tenancy.registrationLabel ?? t("tenancy.register", {}, "New")]
 			})] })
 		]
 	})] });

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

@@ -1 +1 @@
-{"version":3,"file":"widgets-loaded.js","names":["DropdownMenu","Avatar"],"sources":["../../src/starter-kit/widgets-loaded.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  Translator,\n  initials,\n  isAlfakitPage,\n  loadStarterKitPanel,\n  loadedStarterKitPanel,\n  openRequestedStarterKitSearch,\n  starterKitWidgetsPage,\n  starterKitWidgetsPanel,\n  tenantNameText,\n  type PanelSchema,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { router, usePage } from '@inertiajs/react'\nimport { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'\nimport { Direction } from 'radix-ui'\nimport { useEffect, useMemo, useState, type ReactNode } from 'react'\nimport { NotificationsMenu } from '../components/notifications/notifications-menu'\nimport { RealtimeNotifications } from '../components/notifications/realtime-notifications'\nimport { GlobalSearch } from '../components/panel/global-search'\nimport { TenantName } from '../components/panel/nav-label'\nimport { TenantMenu } from '../components/panel/tenant-menu'\nimport { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../components/ui/dropdown-menu'\nimport { TooltipProvider } from '../components/ui/tooltip'\nimport {\n  AlfakitProvider,\n  StandaloneProvider,\n  useT,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { Icon } from '../lib/icons'\nimport {\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * The loaded header components of starter kit mode: the panel's own search palette,\n * notifications menu and tenant menu, rendered outside Alfakit pages with the panel data\n * from `widgets.endpoint`. This module only loads in the browser.\n */\n\n// One context for the browser session: its own translator (the panel's strings), an empty\n// registry (only `panel:icon` overrides are looked up here) and an idle action runner.\nlet widgetsContext: AlfakitContextValue | null = null\n\nfunction useWidgetsContext(panel: PanelSchema): AlfakitContextValue {\n  widgetsContext ??= {\n    registry: new ComponentRegistry<AnyComponent>(),\n    pages: {},\n    translator: new Translator(),\n    actions: new ActionRunner({ endpoints: { action: '', modal: '' } }),\n  }\n\n  widgetsContext.translator.setTranslations(panel.translations ?? {})\n  widgetsContext.translator.setLocale(panel.localization?.tag ?? 'en')\n\n  return widgetsContext\n}\n\n/** The panel the components render with, once its data has loaded (null until then). */\nfunction useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {\n  const endpoint = source.widgets.endpoint\n  const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint))\n  const base = loadedStarterKitPanel(endpoint) ?? loaded\n\n  useEffect(() => {\n    let active = true\n\n    // Another endpoint (a tenant switch) loads its own panel data.\n    void loadStarterKitPanel(endpoint).then(\n      (panel) => active && setLoaded(panel),\n      () => {},\n    )\n\n    return () => {\n      active = false\n    }\n  }, [endpoint])\n\n  const { navigation, widgets } = source\n\n  return useMemo(\n    () => (base ? starterKitWidgetsPanel(base, { navigation, widgets }) : null),\n    [base, navigation, widgets],\n  )\n}\n\nfunction WidgetShell({ panel, children }: { panel: PanelSchema; children: ReactNode }) {\n  const context = useWidgetsContext(panel)\n  const page = useMemo(() => starterKitWidgetsPage(), [])\n\n  return (\n    <AlfakitProvider value={context}>\n      <StandaloneProvider value={{ panel, page }}>\n        <Direction.Provider dir={panel.localization?.direction ?? 'ltr'}>\n          <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n        </Direction.Provider>\n      </StandaloneProvider>\n    </AlfakitProvider>\n  )\n}\n\n/** The panel's command palette and global search. */\nexport function LoadedSearch({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  // A click or the key bindings before the palette loaded open it now (after its own\n  // effects registered the shortcut).\n  useEffect(() => {\n    if (panel) openRequestedStarterKitSearch()\n  }, [panel])\n\n  if (!panel) return <SearchTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <GlobalSearch />\n    </WidgetShell>\n  )\n}\n\n/** The notifications bell, with realtime notifications on the host's own pages. */\nexport function LoadedNotifications({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n  // Alfakit pages subscribe to realtime notifications themselves.\n  const alfakitPage = isAlfakitPage(usePage().props)\n\n  if (!panel) return <NotificationsTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <NotificationsMenu />\n      {!alfakitPage && <RealtimeNotifications />}\n    </WidgetShell>\n  )\n}\n\n/** The panel's tenant menu inside a tenant, a menu to choose one elsewhere. */\nexport function LoadedTenantSwitcher({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  if (!panel) return <TenantSwitcherTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      {panel.tenancy?.current ? <TenantMenu variant=\"topbar\" /> : <TenantChooser panel={panel} />}\n    </WidgetShell>\n  )\n}\n\n/** The user's tenants on a page outside the panel (no current tenant). */\nfunction TenantChooser({ panel }: { panel: PanelSchema }) {\n  const t = useT()\n  const tenancy = panel.tenancy\n\n  if (!tenancy || (tenancy.tenants.length === 0 && !tenancy.registrationUrl)) return null\n\n  const label = t('starter_kit.choose_tenant', {}, 'Choose a tenant')\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"tenant-menu\"\n          className=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n        >\n          <span className=\"sr-only lg:not-sr-only lg:truncate\">{label}</span>\n          <Icon\n            name=\"alfakit::panels.tenant-menu.toggle-button\"\n            fallback={ChevronsUpDownIcon}\n            className=\"text-muted-foreground size-4 shrink-0\"\n          />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" sideOffset={4}>\n        {tenancy.tenants.length > 0 && (\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs\">{label}</DropdownMenuLabel>\n        )}\n        {tenancy.tenants.map((tenant) => (\n          <DropdownMenuItem key={String(tenant.id)} onSelect={() => router.visit(tenant.url)}>\n            <Avatar className=\"size-6 rounded-sm\">\n              {tenant.avatar && <AvatarImage src={tenant.avatar} alt=\"\" />}\n              <AvatarFallback className=\"rounded-sm text-[10px]\">\n                {initials(tenantNameText(tenant))}\n              </AvatarFallback>\n            </Avatar>\n            <TenantName tenant={tenant} className=\"flex-1 truncate\" />\n          </DropdownMenuItem>\n        ))}\n        {tenancy.registrationUrl && (\n          <>\n            {tenancy.tenants.length > 0 && <DropdownMenuSeparator />}\n            <DropdownMenuItem onSelect={() => router.visit(tenancy.registrationUrl!)}>\n              <Icon name=\"alfakit::panels.tenant-menu.registration-button\" fallback={PlusIcon} />\n              {t('tenancy.register', {}, 'New')}\n            </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"widgets-loaded.js","names":["DropdownMenu","Avatar"],"sources":["../../src/starter-kit/widgets-loaded.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  Translator,\n  initials,\n  isAlfakitPage,\n  loadStarterKitPanel,\n  loadedStarterKitPanel,\n  openRequestedStarterKitSearch,\n  starterKitWidgetsPage,\n  starterKitWidgetsPanel,\n  tenantNameText,\n  type PanelSchema,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { router, usePage } from '@inertiajs/react'\nimport { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'\nimport { Direction } from 'radix-ui'\nimport { useEffect, useMemo, useState, type ReactNode } from 'react'\nimport { NotificationsMenu } from '../components/notifications/notifications-menu'\nimport { RealtimeNotifications } from '../components/notifications/realtime-notifications'\nimport { GlobalSearch } from '../components/panel/global-search'\nimport { TenantName } from '../components/panel/nav-label'\nimport { TenantMenu } from '../components/panel/tenant-menu'\nimport { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../components/ui/dropdown-menu'\nimport { TooltipProvider } from '../components/ui/tooltip'\nimport {\n  AlfakitProvider,\n  StandaloneProvider,\n  useT,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { Icon } from '../lib/icons'\nimport {\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * The loaded header components of starter kit mode: the panel's own search palette,\n * notifications menu and tenant menu, rendered outside Alfakit pages with the panel data\n * from `widgets.endpoint`. This module only loads in the browser.\n */\n\n// One context for the browser session: its own translator (the panel's strings), an empty\n// registry (only `panel:icon` overrides are looked up here) and an idle action runner.\nlet widgetsContext: AlfakitContextValue | null = null\n\nfunction useWidgetsContext(panel: PanelSchema): AlfakitContextValue {\n  widgetsContext ??= {\n    registry: new ComponentRegistry<AnyComponent>(),\n    pages: {},\n    translator: new Translator(),\n    actions: new ActionRunner({ endpoints: { action: '', modal: '' } }),\n  }\n\n  widgetsContext.translator.setTranslations(panel.translations ?? {})\n  widgetsContext.translator.setLocale(panel.localization?.tag ?? 'en')\n\n  return widgetsContext\n}\n\n/** The panel the components render with, once its data has loaded (null until then). */\nfunction useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {\n  const endpoint = source.widgets.endpoint\n  const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint))\n  const base = loadedStarterKitPanel(endpoint) ?? loaded\n\n  useEffect(() => {\n    let active = true\n\n    // Another endpoint (a tenant switch) loads its own panel data.\n    void loadStarterKitPanel(endpoint).then(\n      (panel) => active && setLoaded(panel),\n      () => {},\n    )\n\n    return () => {\n      active = false\n    }\n  }, [endpoint])\n\n  const { navigation, widgets } = source\n\n  return useMemo(\n    () => (base ? starterKitWidgetsPanel(base, { navigation, widgets }) : null),\n    [base, navigation, widgets],\n  )\n}\n\nfunction WidgetShell({ panel, children }: { panel: PanelSchema; children: ReactNode }) {\n  const context = useWidgetsContext(panel)\n  const page = useMemo(() => starterKitWidgetsPage(), [])\n\n  return (\n    <AlfakitProvider value={context}>\n      <StandaloneProvider value={{ panel, page }}>\n        <Direction.Provider dir={panel.localization?.direction ?? 'ltr'}>\n          <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n        </Direction.Provider>\n      </StandaloneProvider>\n    </AlfakitProvider>\n  )\n}\n\n/** The panel's command palette and global search. */\nexport function LoadedSearch({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  // A click or the key bindings before the palette loaded open it now (after its own\n  // effects registered the shortcut).\n  useEffect(() => {\n    if (panel) openRequestedStarterKitSearch()\n  }, [panel])\n\n  if (!panel) return <SearchTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <GlobalSearch />\n    </WidgetShell>\n  )\n}\n\n/** The notifications bell, with realtime notifications on the host's own pages. */\nexport function LoadedNotifications({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n  // Alfakit pages subscribe to realtime notifications themselves.\n  const alfakitPage = isAlfakitPage(usePage().props)\n\n  if (!panel) return <NotificationsTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <NotificationsMenu />\n      {!alfakitPage && <RealtimeNotifications />}\n    </WidgetShell>\n  )\n}\n\n/** The panel's tenant menu inside a tenant, a menu to choose one elsewhere. */\nexport function LoadedTenantSwitcher({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  if (!panel) return <TenantSwitcherTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      {panel.tenancy?.current ? <TenantMenu variant=\"topbar\" /> : <TenantChooser panel={panel} />}\n    </WidgetShell>\n  )\n}\n\n/** The user's tenants on a page outside the panel (no current tenant). */\nfunction TenantChooser({ panel }: { panel: PanelSchema }) {\n  const t = useT()\n  const tenancy = panel.tenancy\n\n  if (!tenancy || (tenancy.tenants.length === 0 && !tenancy.registrationUrl)) return null\n\n  const label = t('starter_kit.choose_tenant', {}, 'Choose a tenant')\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"tenant-menu\"\n          className=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n        >\n          <span className=\"sr-only lg:not-sr-only lg:truncate\">{label}</span>\n          <Icon\n            name=\"alfakit::panels.tenant-menu.toggle-button\"\n            fallback={ChevronsUpDownIcon}\n            className=\"text-muted-foreground size-4 shrink-0\"\n          />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" sideOffset={4}>\n        {tenancy.tenants.length > 0 && (\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs\">{label}</DropdownMenuLabel>\n        )}\n        {tenancy.tenants.map((tenant) => (\n          <DropdownMenuItem key={String(tenant.id)} onSelect={() => router.visit(tenant.url)}>\n            <Avatar className=\"size-6 rounded-sm\">\n              {tenant.avatar && <AvatarImage src={tenant.avatar} alt=\"\" />}\n              <AvatarFallback className=\"rounded-sm text-[10px]\">\n                {initials(tenantNameText(tenant))}\n              </AvatarFallback>\n            </Avatar>\n            <TenantName tenant={tenant} className=\"flex-1 truncate\" />\n          </DropdownMenuItem>\n        ))}\n        {tenancy.registrationUrl && (\n          <>\n            {tenancy.tenants.length > 0 && <DropdownMenuSeparator />}\n            <DropdownMenuItem onSelect={() => router.visit(tenancy.registrationUrl!)}>\n              <Icon name=\"alfakit::panels.tenant-menu.registration-button\" fallback={PlusIcon} />\n              {tenancy.registrationLabel ?? t('tenancy.register', {}, 'New')}\n            </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}

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

@@ -35,6 +35,7 @@ function SearchTrigger({ source, onLoad }) {
 				children: placeholder
 			}),
 			hydrated && binding && /* @__PURE__ */ jsx("kbd", {
+				dir: "ltr",
 				className: "bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline",
 				children: formatKeyBinding(binding)
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"widgets-triggers.js","names":[],"sources":["../../src/starter-kit/widgets-triggers.tsx"],"sourcesContent":["import {\n  formatKeyBinding,\n  initials,\n  registerStarterKitSearchShortcut,\n  requestStarterKitSearch,\n  tenantNameText,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { BellIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'\nimport { useEffect } from 'react'\nimport { useHydrated } from '../hooks/use-hydrated'\n\n/**\n * What the starter kit header components show until their code and the panel data have\n * loaded: the same look as the loaded triggers, from the shared prop alone.\n */\nexport interface WidgetProps {\n  source: StarterKitWidgets\n}\n\nconst triggerClasses =\n  'border-input bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 inline-flex h-8 shrink-0 items-center rounded-md border text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50'\n\n/** The search field until the palette has loaded: the same look, and it remembers a click. */\nexport function SearchTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {\n  const hydrated = useHydrated()\n  const search = source.widgets.search\n  const keys = JSON.stringify(search?.keyBindings ?? ['mod+k'])\n  const placeholder = search?.placeholder ?? ''\n  // `onLoad` is a stable function (it starts loading the palette's code).\n  useEffect(\n    () =>\n      registerStarterKitSearchShortcut(JSON.parse(keys) as string[], placeholder, () => onLoad?.()),\n    [keys, placeholder, onLoad],\n  )\n\n  const binding = search?.keyBindings[0]\n\n  return (\n    <button\n      type=\"button\"\n      className={`${triggerClasses} text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5`}\n      onPointerEnter={() => onLoad?.()}\n      onClick={() => {\n        requestStarterKitSearch()\n        onLoad?.()\n      }}\n    >\n      <SearchIcon className=\"size-4\" aria-hidden=\"true\" />\n      <span className=\"sr-only sm:not-sr-only sm:flex-1 sm:text-start\">{placeholder}</span>\n      {hydrated && binding && (\n        <kbd className=\"bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline\">\n          {formatKeyBinding(binding)}\n        </kbd>\n      )}\n    </button>\n  )\n}\n\n/** The bell and its unread count until the menu has loaded. */\nexport function NotificationsTrigger({ source }: WidgetProps) {\n  const notifications = source.widgets.notifications\n  const count = notifications?.unreadCount ?? 0\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"notifications-trigger\"\n      aria-label={notifications?.label}\n      className=\"hover:bg-accent hover:text-accent-foreground relative inline-flex size-9 items-center justify-center rounded-md\"\n    >\n      <BellIcon className=\"size-4\" aria-hidden=\"true\" />\n      {count > 0 && (\n        <span className=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\">\n          {count > 99 ? '99+' : count}\n        </span>\n      )}\n    </button>\n  )\n}\n\n/** The current tenant (or an empty avatar) until the switcher has loaded: a placeholder. */\nexport function TenantSwitcherTrigger({ source }: WidgetProps) {\n  const current = source.widgets.tenancy?.current\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"tenant-menu\"\n      aria-hidden=\"true\"\n      tabIndex={-1}\n      className=\"hover:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n    >\n      <span className=\"bg-muted flex size-6 items-center justify-center rounded-md text-[10px]\">\n        {current ? initials(tenantNameText(current)) : ''}\n      </span>\n      {current && (\n        <span className=\"sr-only min-w-0 truncate lg:not-sr-only\">{tenantNameText(current)}</span>\n      )}\n      <ChevronsUpDownIcon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAoBA,MAAM,iBACJ;;AAGF,SAAgB,cAAc,EAAE,QAAQ,UAAiD;CACvF,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,OAAO,KAAK,UAAU,QAAQ,eAAe,CAAC,OAAO,CAAC;CAC5D,MAAM,cAAc,QAAQ,eAAe;CAE3C,gBAEI,iCAAiC,KAAK,MAAM,IAAI,GAAe,mBAAmB,SAAS,CAAC,GAC9F;EAAC;EAAM;EAAa;CAAM,CAC5B;CAEA,MAAM,UAAU,QAAQ,YAAY;CAEpC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,WAAW,GAAG,eAAe;EAC7B,sBAAsB,SAAS;EAC/B,eAAe;GACb,wBAAwB;GACxB,SAAS;EACX;EAPF,UAAA;GASE,oBAAC,YAAD;IAAY,WAAU;IAAS,eAAY;GAAQ,CAAA;GACnD,oBAAC,QAAD;IAAM,WAAU;IAAkD,UAAA;GAAkB,CAAA;GACnF,YAAY,WACX,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,iBAAiB,OAAO;GACtB,CAAA;EAED;;AAEZ;;AAGA,SAAgB,qBAAqB,EAAE,UAAuB;CAC5D,MAAM,gBAAgB,OAAO,QAAQ;CACrC,MAAM,QAAQ,eAAe,eAAe;CAE5C,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY,eAAe;EAC3B,WAAU;EAJZ,UAAA,CAME,oBAAC,UAAD;GAAU,WAAU;GAAS,eAAY;EAAQ,CAAA,GAChD,QAAQ,KACP,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,QAAQ,KAAK,QAAQ;EAClB,CAAA,CAEF;;AAEZ;;AAGA,SAAgB,sBAAsB,EAAE,UAAuB;CAC7D,MAAM,UAAU,OAAO,QAAQ,SAAS;CAExC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,eAAY;EACZ,UAAU;EACV,WAAU;EALZ,UAAA;GAOE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,UAAU,SAAS,eAAe,OAAO,CAAC,IAAI;GAC3C,CAAA;GACL,WACC,oBAAC,QAAD;IAAM,WAAU;IAA2C,UAAA,eAAe,OAAO;GAAQ,CAAA;GAE3F,oBAAC,oBAAD;IAAoB,WAAU;IAAwC,eAAY;GAAQ,CAAA;EACpF;;AAEZ"}
+{"version":3,"file":"widgets-triggers.js","names":[],"sources":["../../src/starter-kit/widgets-triggers.tsx"],"sourcesContent":["import {\n  formatKeyBinding,\n  initials,\n  registerStarterKitSearchShortcut,\n  requestStarterKitSearch,\n  tenantNameText,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { BellIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'\nimport { useEffect } from 'react'\nimport { useHydrated } from '../hooks/use-hydrated'\n\n/**\n * What the starter kit header components show until their code and the panel data have\n * loaded: the same look as the loaded triggers, from the shared prop alone.\n */\nexport interface WidgetProps {\n  source: StarterKitWidgets\n}\n\nconst triggerClasses =\n  'border-input bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 inline-flex h-8 shrink-0 items-center rounded-md border text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50'\n\n/** The search field until the palette has loaded: the same look, and it remembers a click. */\nexport function SearchTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {\n  const hydrated = useHydrated()\n  const search = source.widgets.search\n  const keys = JSON.stringify(search?.keyBindings ?? ['mod+k'])\n  const placeholder = search?.placeholder ?? ''\n  // `onLoad` is a stable function (it starts loading the palette's code).\n  useEffect(\n    () =>\n      registerStarterKitSearchShortcut(JSON.parse(keys) as string[], placeholder, () => onLoad?.()),\n    [keys, placeholder, onLoad],\n  )\n\n  const binding = search?.keyBindings[0]\n\n  return (\n    <button\n      type=\"button\"\n      className={`${triggerClasses} text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5`}\n      onPointerEnter={() => onLoad?.()}\n      onClick={() => {\n        requestStarterKitSearch()\n        onLoad?.()\n      }}\n    >\n      <SearchIcon className=\"size-4\" aria-hidden=\"true\" />\n      <span className=\"sr-only sm:not-sr-only sm:flex-1 sm:text-start\">{placeholder}</span>\n      {hydrated && binding && (\n        <kbd dir=\"ltr\" className=\"bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline\">\n          {formatKeyBinding(binding)}\n        </kbd>\n      )}\n    </button>\n  )\n}\n\n/** The bell and its unread count until the menu has loaded. */\nexport function NotificationsTrigger({ source }: WidgetProps) {\n  const notifications = source.widgets.notifications\n  const count = notifications?.unreadCount ?? 0\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"notifications-trigger\"\n      aria-label={notifications?.label}\n      className=\"hover:bg-accent hover:text-accent-foreground relative inline-flex size-9 items-center justify-center rounded-md\"\n    >\n      <BellIcon className=\"size-4\" aria-hidden=\"true\" />\n      {count > 0 && (\n        <span className=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\">\n          {count > 99 ? '99+' : count}\n        </span>\n      )}\n    </button>\n  )\n}\n\n/** The current tenant (or an empty avatar) until the switcher has loaded: a placeholder. */\nexport function TenantSwitcherTrigger({ source }: WidgetProps) {\n  const current = source.widgets.tenancy?.current\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"tenant-menu\"\n      aria-hidden=\"true\"\n      tabIndex={-1}\n      className=\"hover:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n    >\n      <span className=\"bg-muted flex size-6 items-center justify-center rounded-md text-[10px]\">\n        {current ? initials(tenantNameText(current)) : ''}\n      </span>\n      {current && (\n        <span className=\"sr-only min-w-0 truncate lg:not-sr-only\">{tenantNameText(current)}</span>\n      )}\n      <ChevronsUpDownIcon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAoBA,MAAM,iBACJ;;AAGF,SAAgB,cAAc,EAAE,QAAQ,UAAiD;CACvF,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,OAAO,KAAK,UAAU,QAAQ,eAAe,CAAC,OAAO,CAAC;CAC5D,MAAM,cAAc,QAAQ,eAAe;CAE3C,gBAEI,iCAAiC,KAAK,MAAM,IAAI,GAAe,mBAAmB,SAAS,CAAC,GAC9F;EAAC;EAAM;EAAa;CAAM,CAC5B;CAEA,MAAM,UAAU,QAAQ,YAAY;CAEpC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,WAAW,GAAG,eAAe;EAC7B,sBAAsB,SAAS;EAC/B,eAAe;GACb,wBAAwB;GACxB,SAAS;EACX;EAPF,UAAA;GASE,oBAAC,YAAD;IAAY,WAAU;IAAS,eAAY;GAAQ,CAAA;GACnD,oBAAC,QAAD;IAAM,WAAU;IAAkD,UAAA;GAAkB,CAAA;GACnF,YAAY,WACX,oBAAC,OAAD;IAAK,KAAI;IAAM,WAAU;IACtB,UAAA,iBAAiB,OAAO;GACtB,CAAA;EAED;;AAEZ;;AAGA,SAAgB,qBAAqB,EAAE,UAAuB;CAC5D,MAAM,gBAAgB,OAAO,QAAQ;CACrC,MAAM,QAAQ,eAAe,eAAe;CAE5C,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY,eAAe;EAC3B,WAAU;EAJZ,UAAA,CAME,oBAAC,UAAD;GAAU,WAAU;GAAS,eAAY;EAAQ,CAAA,GAChD,QAAQ,KACP,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,QAAQ,KAAK,QAAQ;EAClB,CAAA,CAEF;;AAEZ;;AAGA,SAAgB,sBAAsB,EAAE,UAAuB;CAC7D,MAAM,UAAU,OAAO,QAAQ,SAAS;CAExC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,eAAY;EACZ,UAAU;EACV,WAAU;EALZ,UAAA;GAOE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,UAAU,SAAS,eAAe,OAAO,CAAC,IAAI;GAC3C,CAAA;GACL,WACC,oBAAC,QAAD;IAAM,WAAU;IAA2C,UAAA,eAAe,OAAO;GAAQ,CAAA;GAE3F,oBAAC,oBAAD;IAAoB,WAAU;IAAwC,eAAY;GAAQ,CAAA;EACpF;;AAEZ"}

package/dist/themes.css

@@ -1,3 +1,5 @@
+@import './components.css';
+
 /*
  * Alfakit themes. Shared by every renderer and imported by their `styles.css`.
  *
@@ -1004,337 +1006,3 @@
   box-shadow: none;
   outline: none;
 }
-
-/* ------------------------------------------------------------------ Charts */
-
-/*
- * Chart.js paints axes, legends and tooltips on the canvas, so chart widgets read these
- * properties from <html> (re-read when the theme or dark mode changes). Colours take any
- * CSS colour; the widths and radius are unitless numbers. Override them in a theme:
- *   :root[data-alfakit-theme~='acme'] { --chart-tooltip-bg: oklch(0.2 0 0); }
- * Stat sparklines (`[data-slot='stat-chart']`) use the `--stat-chart-*` properties.
- */
-:root {
-  --chart-text: var(--muted-foreground);
-  --chart-grid: var(--border);
-  --chart-legend-foreground: var(--muted-foreground);
-  --chart-tooltip-bg: var(--popover);
-  --chart-tooltip-foreground: var(--popover-foreground);
-  --chart-tooltip-border: var(--border);
-  --chart-tooltip-border-width: 1;
-  --chart-tooltip-radius: 6;
-  --stat-chart-stroke-width: 2;
-  --stat-chart-fill-opacity: 0.12;
-}
-
-/*
- * RichEditor `grid` column blocks and `lead` / `small` text, in the editor and in rendered
- * content (`RichContentRenderer`). Columns stack on small screens. Stored as
- * `<div data-type="grid" class="alfakit-grid alfakit-grid-cols-2"><div data-type="gridColumn">`
- * and `<p class="alfakit-lead">`; copy these rules when showing content outside a panel.
- */
-:where(.alfakit-grid) {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr);
-  margin-block: 0.5rem;
-}
-:where(.alfakit-grid-column) {
-  min-width: 0;
-}
-:where(.alfakit-grid-column) > :first-child {
-  margin-block-start: 0;
-}
-@media (min-width: 768px) {
-  :where(.alfakit-grid-cols-2) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-3) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-4) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-5) {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-  :where(.alfakit-grid-cols-6) {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-:where([contenteditable] .alfakit-grid-column) {
-  border: 1px dashed var(--border);
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-}
-:where(.alfakit-lead) {
-  font-size: 1.125em;
-  line-height: 1.6;
-}
-:where(.alfakit-prose small) {
-  font-size: 0.8125em;
-}
-
-/* ---------------------------------------------------------- Calendar and tree */
-
-/*
- * The calendar widget (alfasix/alfakit-calendar) draws FullCalendar inside
- * `[data-slot="calendar"]`; FullCalendar reads these `--fc-*` variables, so every theme's
- * tokens (and dark mode) apply. Override them on the slot to restyle one calendar.
- */
-:where(.fc[data-slot='calendar']) {
-  --fc-small-font-size: 0.75rem;
-  --fc-page-bg-color: var(--card);
-  --fc-neutral-bg-color: var(--muted);
-  --fc-neutral-text-color: var(--muted-foreground);
-  --fc-border-color: var(--border);
-  --fc-button-text-color: var(--foreground);
-  --fc-button-bg-color: var(--background);
-  --fc-button-border-color: var(--border);
-  --fc-button-hover-bg-color: var(--accent);
-  --fc-button-hover-border-color: var(--border);
-  --fc-button-active-bg-color: var(--secondary);
-  --fc-button-active-border-color: var(--border);
-  --fc-event-bg-color: var(--primary);
-  --fc-event-border-color: var(--primary);
-  --fc-event-text-color: var(--primary-foreground);
-  --fc-event-selected-overlay-color: color-mix(in oklab, var(--foreground) 25%, transparent);
-  --fc-more-link-bg-color: var(--muted);
-  --fc-more-link-text-color: var(--foreground);
-  --fc-non-business-color: color-mix(in oklab, var(--muted) 60%, transparent);
-  --fc-bg-event-color: var(--primary);
-  --fc-bg-event-opacity: 0.2;
-  --fc-highlight-color: color-mix(in oklab, var(--primary) 15%, transparent);
-  --fc-today-bg-color: color-mix(in oklab, var(--primary) 6%, transparent);
-  --fc-now-indicator-color: var(--destructive);
-  --fc-list-event-hover-bg-color: var(--accent);
-  color: var(--card-foreground);
-}
-/*
- * FullCalendar puts its `fc` class on the slot element itself and injects its own CSS
- * (`.fc .fc-button`, two classes), so these rules are plain selectors anchored on
- * `.fc[data-slot='calendar']` (three) rather than `:where()`, which would always lose.
- * Restyle one calendar with a more specific selector or with the `--fc-*` variables.
- */
-.fc[data-slot='calendar'] .fc-toolbar-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.75rem;
-  color: var(--foreground);
-}
-.fc[data-slot='calendar'] .fc-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.25rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: var(--radius);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  box-shadow: none;
-  text-transform: capitalize;
-}
-.fc[data-slot='calendar'] .fc-button .fc-icon {
-  font-size: 1.125rem;
-}
-.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:first-child) {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:last-child) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.fc[data-slot='calendar'] .fc-button-primary:disabled {
-  opacity: 0.5;
-}
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active {
-  color: var(--secondary-foreground);
-}
-.fc[data-slot='calendar'] .fc-button-primary:focus,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active:focus,
-.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active:focus {
-  box-shadow: none;
-}
-.fc[data-slot='calendar'] .fc-button:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-  z-index: 2;
-}
-.fc[data-slot='calendar'] a {
-  color: inherit;
-}
-.fc[data-slot='calendar'] .fc-daygrid-day-number,
-.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
-  text-decoration: none;
-}
-.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
-  padding-block: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--muted-foreground);
-}
-.fc[data-slot='calendar'] .fc-daygrid-day-number {
-  font-size: 0.875rem;
-}
-.fc[data-slot='calendar'] .fc-day-other .fc-daygrid-day-number {
-  color: var(--muted-foreground);
-}
-/* Today: a tinted cell (`--fc-today-bg-color`) and the date in a primary pill. */
-.fc[data-slot='calendar'] .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.75rem;
-  height: 1.75rem;
-  margin: 0.25rem;
-  padding: 0 0.375rem;
-  border-radius: 9999px;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: 600;
-}
-.fc[data-slot='calendar'] .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
-  color: var(--primary);
-  font-weight: 600;
-}
-.fc[data-slot='calendar'] .fc-event {
-  border-radius: min(var(--radius), 0.375rem);
-}
-.fc[data-slot='calendar'] .fc-daygrid-event,
-.fc[data-slot='calendar'] .fc-timegrid-event .fc-event-main,
-.fc[data-slot='calendar'] .fc-list-event td {
-  font-size: 0.75rem;
-}
-.fc[data-slot='calendar'] .fc-daygrid-dot-event:hover,
-.fc[data-slot='calendar'] .fc-daygrid-dot-event.fc-event-mirror {
-  background: var(--accent);
-}
-.fc[data-slot='calendar'] .fc-list-day-cushion,
-.fc[data-slot='calendar'] .fc-popover-header {
-  color: var(--foreground);
-}
-.fc[data-slot='calendar'] .fc-popover {
-  border-radius: var(--radius);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  overflow: hidden;
-}
-.fc[data-slot='calendar'] .fc-timegrid-slot-label,
-.fc[data-slot='calendar'] .fc-timegrid-axis,
-.fc[data-slot='calendar'] .fc-list-event-time {
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
-}
-/*
- * The list view hides its column headers for screen readers with `left: -10000px`. Right to
- * left that is scrollable overflow: the whole page gains a 10 000 px horizontal scroll and the
- * top bar slides under the sidebar. Clip it in place instead (still read by screen readers).
- */
-.fc[data-slot='calendar'] .fc-list-table thead {
-  left: auto;
-  inset-inline-start: 0;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * Fields contain what they position. Headless switches, checkboxes and radios render a
- * visually hidden native input beside the control, absolutely positioned (and shifted by
- * -100%); without a positioned field it lands at the page edge and, right to left, widens
- * the page on phones.
- */
-:where([data-slot='field']) {
-  position: relative;
-}
-
-/*
- * Narrow screens: FullCalendar keeps its header toolbar on one row, wider than a phone.
- * Its chunks (navigation, title, views) wrap instead, and the title shrinks. Flex gaps and
- * `justify-content` follow the writing direction, so this works right to left too. (Plain
- * selectors: FullCalendar injects its own CSS, which would beat `:where()`; the slot is
- * the `.fc` element itself.)
- */
-@media (max-width: 39.99rem) {
-  [data-slot='calendar'] .fc-toolbar.fc-header-toolbar {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-toolbar-chunk {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.25rem;
-    min-width: 0;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-toolbar-title {
-    font-size: 1rem;
-    overflow-wrap: anywhere;
-  }
-  [data-slot='calendar'] .fc-toolbar .fc-button {
-    font-size: 0.8125rem;
-  }
-}
-
-/*
- * The tree (alfasix/alfakit-tree): the drop indicator while dragging. Rows carry
- * `data-drop="before|after|inside"`; lines are drawn above or below the row, so they
- * need no direction.
- */
-:where([data-slot='tree-item'][data-drop='before']) {
-  box-shadow: inset 0 2px 0 0 var(--primary);
-}
-:where([data-slot='tree-item'][data-drop='after']) {
-  box-shadow: inset 0 -2px 0 0 var(--primary);
-}
-:where([data-slot='tree-item'][data-drop='inside']) {
-  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  outline: 1px dashed var(--primary);
-  outline-offset: -1px;
-}
-
-/*
- * The Kanban board (alfasix/alfakit-kanban). A card being dragged leaves a dashed
- * placeholder (`data-picked="pointer"`) while a copy follows the pointer
- * (`data-slot="kanban-ghost"`); a card picked up with the keyboard is lifted
- * (`data-picked="keyboard"`). A list the picked card may not enter has `data-refused`.
- */
-:where([data-slot='kanban-card'][data-picked='pointer']) {
-  opacity: 0.45;
-}
-:where([data-slot='kanban-card'][data-picked='pointer'] > [data-slot='kanban-card-body']) {
-  border-style: dashed;
-  box-shadow: none;
-}
-:where([data-slot='kanban-card'][data-picked='keyboard'] > [data-slot='kanban-card-body']) {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
-}
-:where([data-slot='kanban-card'][data-saving]) {
-  opacity: 0.7;
-}
-:where([data-slot='kanban-ghost']) {
-  cursor: grabbing;
-  list-style: none;
-  box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--foreground) 55%, transparent);
-}
-:where([data-slot='kanban-dropzone'][data-refused]) {
-  background-color: color-mix(in oklab, var(--destructive) 8%, transparent);
-  outline: 1px dashed var(--destructive);
-  outline-offset: -1px;
-}
-:where(body[data-kanban-dragging]) {
-  cursor: grabbing;
-  user-select: none;
-  -webkit-user-select: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  :where([data-slot='kanban-card'] > [data-slot='kanban-card-body']) {
-    transition: none;
-  }
-}

package/package.json

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

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

@@ -3,6 +3,8 @@ import {
   bindsKeyBindings,
   formatKeyBinding,
   iconButtonSize,
+  isActionLoading,
+  isActionProcessing,
   registerKeyBindings,
   resolveActionSize,
 } from '@alfakit/core'
@@ -71,7 +73,7 @@ function buttonClasses(action: ActionSchema, variant: ActionSchema['variant']):
       return colorClass(ghostButtonColorClasses, color, 'gray')
     case 'link':
       return cn(
-        'h-auto p-0 underline-offset-4 hover:underline',
+        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',
         colorClass(textColorClasses, color, 'primary'),
       )
     case 'icon-button':
@@ -95,9 +97,10 @@ export function ActionButton({
 }: ActionButtonProps) {
   const runner = useActionRunner()
   const t = useT()
-  const loading = useStoreSelector(runner.store, (state) => state.loading === action.name)
+  // Only this run (this record's button), not the same action in every table row.
+  const loading = useStoreSelector(runner.store, (state) => isActionLoading(state, action, context))
   const processing = useStoreSelector(runner.store, (state) =>
-    state.modals.some((modal) => modal.action.name === action.name && modal.processing),
+    isActionProcessing(state, action, context),
   )
 
   const variant =
@@ -244,7 +247,7 @@ export function ActionButton({
       <TooltipContent>
         {tooltip}
         {shortcut && (
-          <kbd className="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]">
+          <kbd dir="ltr" className="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]">
             {formatKeyBinding(shortcut)}
           </kbd>
         )}

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

@@ -4,6 +4,7 @@ import {
   actionFormParams,
   actionPath,
   confirmModalClose,
+  formIdPrefix,
   FormStore,
   guardModalUnload,
   isModalHiddenByChild,
@@ -156,6 +157,8 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
     return new FormStore(schema.form, {
       token: context.token,
       component: actionFormComponent(action, context),
+      // Own field ids: the modal opens over a form whose fields may share names.
+      idPrefix: formIdPrefix(actionFormComponent(action, context)),
       record: context.record ?? null,
       refreshUrl: panel.endpoints.schemaRefresh,
       optionsUrl: panel.endpoints.schemaOptions,
@@ -472,7 +475,6 @@ function ActionModal({ modal, hidden = false }: { modal: OpenModal; hidden?: boo
             {footer}
           </DialogFooter>
         )}
-        <span className="sr-only">{t('close', {}, 'Close')}</span>
       </DialogContent>
     </Dialog>
   )

package/src/components/fields/color-picker.tsx

@@ -36,6 +36,7 @@ export function ColorPickerField({ component }: { component: ColorPickerSchema }
         <Input
           id={id}
           name={component.name}
+          dir="ltr"
           value={value ?? ''}
           onChange={(event) => setValue(event.target.value)}
           onBlur={blur}