@alfakit/react 0.1.1 → 0.1.6

package/dist/components/ui/popover.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-import { Popover } from "radix-ui";
+import { Direction, Popover } from "radix-ui";
 //#region src/components/ui/popover.tsx
 function Popover$1({ ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
@@ -15,7 +15,9 @@ function PopoverTrigger({ ...props }) {
 	});
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	const dir = Direction.useDirection();
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		dir,
 		"data-slot": "popover-content",
 		align,
 		sideOffset,

package/dist/components/ui/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nfunction Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;AAIA,SAASA,UAAQ,EAAE,GAAG,SAAuD;CAC3E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EAAE,GAAG,SAA0D;CACrF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SAC+C;CAClD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GACT,keACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B;AAEA,SAAS,cAAc,EAAE,GAAG,SAAyD;CACnF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE"}
+{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["import { Direction, Popover as PopoverPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nfunction Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Content>) {\n  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and\n  // standalone components leave <html dir> to the host).\n  const dir = Direction.useDirection()\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        dir={dir}\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;AAIA,SAASA,UAAQ,EAAE,GAAG,SAAuD;CAC3E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EAAE,GAAG,SAA0D;CACrF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SAC+C;CAGlD,MAAM,MAAM,UAAU,aAAa;CACnC,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACO;EACL,aAAU;EACH;EACK;EACZ,WAAW,GACT,keACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B;AAEA,SAAS,cAAc,EAAE,GAAG,SAAyD;CACnF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE"}

package/dist/components/ui/sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","names":["SheetPrimitive"],"sources":["../../../src/components/ui/sheet.tsx"],"mappings":";;;iBAOS,WAAW,SAAS,sBAAsBA,OAAe,wBAAK,IAAA;iBAI9D,kBAAkB,SAAS,sBAAsBA,OAAe,2BAAQ,IAAA;iBAIxE,gBAAgB,SAAS,sBAAsBA,OAAe,yBAAM,IAAA;iBAqBpE,eACP,WACA,UACA,MACA,oBACG,SACF,sBAAsBA,OAAe;EACtC;EACA;oBACD,IAAA;iBAiCQ,cAAc,cAAc,SAAS,wCAAqB,IAAA;iBAU1D,cAAc,cAAc,SAAS,wCAAqB,IAAA;iBAU1D,aAAa,cAAc,SAAS,sBAAsBA,OAAe,yBAAM,IAAA;iBAU/E,mBACP,cACG,SACF,sBAAsBA,OAAe,+BAAY,IAAA"}
+{"version":3,"file":"sheet.d.ts","names":["SheetPrimitive"],"sources":["../../../src/components/ui/sheet.tsx"],"mappings":";;;iBAOS,WAAW,SAAS,sBAAsBA,OAAe,wBAAK,IAAA;iBAI9D,kBAAkB,SAAS,sBAAsBA,OAAe,2BAAQ,IAAA;iBAIxE,gBAAgB,SAAS,sBAAsBA,OAAe,yBAAM,IAAA;iBAqBpE,eACP,WACA,UACA,MACA,oBACG,SACF,sBAAsBA,OAAe;EACtC;EACA;oBACD,IAAA;iBAqCQ,cAAc,cAAc,SAAS,wCAAqB,IAAA;iBAU1D,cAAc,cAAc,SAAS,wCAAqB,IAAA;iBAU1D,aAAa,cAAc,SAAS,sBAAsBA,OAAe,yBAAM,IAAA;iBAU/E,mBACP,cACG,SACF,sBAAsBA,OAAe,+BAAY,IAAA"}

package/dist/components/ui/sheet.js

@@ -2,7 +2,7 @@ import { useT } from "../../context.js";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../lib/icons.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Dialog } from "radix-ui";
+import { Dialog, Direction } from "radix-ui";
 import { XIcon } from "lucide-react";
 //#region src/components/ui/sheet.tsx
 function Sheet({ ...props }) {
@@ -37,8 +37,10 @@ function SheetOverlay({ className, ...props }) {
 	});
 }
 function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+	const dir = Direction.useDirection();
 	const t = useT();
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		dir,
 		"data-slot": "sheet-content",
 		className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
 		...props,

package/dist/components/ui/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react'\nimport { Dialog as SheetPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\n\nfunction Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  showCloseButton?: boolean\n}) {\n  const t = useT()\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n          side === 'right' &&\n            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n          side === 'left' &&\n            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n          side === 'top' &&\n            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n          side === 'bottom' &&\n            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon name=\"alfakit::support.modal.close-button\" fallback={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">{t('close', {}, 'Close')}</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":";;;;;;;AAOA,SAAS,MAAM,EAAE,GAAG,SAAqD;CACvE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,EAAE,GAAG,SAAwD;CACjF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,EAAE,GAAG,SAAsD;CAC7E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,YAAY,EAAE,GAAG,SAAuD;CAC/E,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAwD;CAC5F,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,SAIF;CACD,MAAM,IAAI,KAAK;CACf,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,8MACA,SAAS,WACP,oIACF,SAAS,UACP,iIACF,SAAS,SACP,4GACF,SAAS,YACP,qHACF,SACF;EACA,GAAI;EAdN,UAAA,CAgBG,UACA,mBACC,qBAACA,OAAe,OAAhB;GAAsB,WAAU;GAAhC,UAAA,CACE,oBAAC,MAAD;IAAM,MAAK;IAAsC,UAAU;IAAO,WAAU;GAAU,CAAA,GACtF,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAE,SAAS,CAAC,GAAG,OAAO;GAAQ,CAAA,CACrC;EAEF,CAAA,CAAA;CACb,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAgC;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAgC;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsD;CACxF,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACiD;CACpD,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react'\nimport { Direction, Dialog as SheetPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\n\nfunction Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  showCloseButton?: boolean\n}) {\n  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and\n  // standalone components leave <html dir> to the host).\n  const dir = Direction.useDirection()\n  const t = useT()\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        dir={dir}\n        data-slot=\"sheet-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n          side === 'right' &&\n            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n          side === 'left' &&\n            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n          side === 'top' &&\n            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n          side === 'bottom' &&\n            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon name=\"alfakit::support.modal.close-button\" fallback={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">{t('close', {}, 'Close')}</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":";;;;;;;AAOA,SAAS,MAAM,EAAE,GAAG,SAAqD;CACvE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,EAAE,GAAG,SAAwD;CACjF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,EAAE,GAAG,SAAsD;CAC7E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,YAAY,EAAE,GAAG,SAAuD;CAC/E,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAwD;CAC5F,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,SAIF;CAGD,MAAM,MAAM,UAAU,aAAa;CACnC,MAAM,IAAI,KAAK;CACf,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAACA,OAAe,SAAhB;EACO;EACL,aAAU;EACV,WAAW,GACT,8MACA,SAAS,WACP,oIACF,SAAS,UACP,iIACF,SAAS,SACP,4GACF,SAAS,YACP,qHACF,SACF;EACA,GAAI;EAfN,UAAA,CAiBG,UACA,mBACC,qBAACA,OAAe,OAAhB;GAAsB,WAAU;GAAhC,UAAA,CACE,oBAAC,MAAD;IAAM,MAAK;IAAsC,UAAU;IAAO,WAAU;GAAU,CAAA,GACtF,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAE,SAAS,CAAC,GAAG,OAAO;GAAQ,CAAA,CACrC;EAEF,CAAA,CAAA;CACb,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAgC;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAgC;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsD;CACxF,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACiD;CACpD,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/tooltip.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip } from "radix-ui";
+import { Direction, Tooltip } from "radix-ui";
 //#region src/components/ui/tooltip.tsx
 function TooltipProvider({ delayDuration = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
@@ -22,7 +22,9 @@ function TooltipTrigger({ ...props }) {
 	});
 }
 function TooltipContent({ className, sideOffset = 4, children, ...props }) {
+	const dir = Direction.useDirection();
 	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
+		dir,
 		"data-slot": "tooltip-content",
 		sideOffset,
 		className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),

package/dist/components/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 4,\n  children,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":";;;;AAIA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACgD;CACnD,OACE,oBAACA,QAAiB,UAAlB;EACE,aAAU;EACK;EACf,GAAI;CACL,CAAA;AAEL;AAEA,SAASC,UAAQ,EAAE,GAAG,SAAuD;CAC3E,OAAO,oBAACD,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EAAE,GAAG,SAA0D;CACrF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SAC+C;CAClD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,qBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,qaACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACD,oBAACA,QAAiB,OAAlB,EAAwB,WAAU,qGAAsG,CAAA,CAChH;CACH,CAAA,EAAA,CAAA;AAE7B"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import { Direction, Tooltip as TooltipPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 4,\n  children,\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content>) {\n  // Portaled outside Alfakit's root: carry the reading direction (starter kit pages and\n  // standalone components leave <html dir> to the host).\n  const dir = Direction.useDirection()\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        dir={dir}\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":";;;;AAIA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACgD;CACnD,OACE,oBAACA,QAAiB,UAAlB;EACE,aAAU;EACK;EACf,GAAI;CACL,CAAA;AAEL;AAEA,SAASC,UAAQ,EAAE,GAAG,SAAuD;CAC3E,OAAO,oBAACD,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EAAE,GAAG,SAA0D;CACrF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SAC+C;CAGlD,MAAM,MAAM,UAAU,aAAa;CACnC,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,qBAACA,QAAiB,SAAlB;EACO;EACL,aAAU;EACE;EACZ,WAAW,GACT,qaACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACD,oBAACA,QAAiB,OAAlB,EAAwB,WAAU,qGAAsG,CAAA,CAChH;CACH,CAAA,EAAA,CAAA;AAE7B"}

package/dist/components.css

@@ -0,0 +1,347 @@
+/*
+ * Component styles shared by panels (themes.css) and by Alfakit outside panels
+ * (standalone.css, starter-kit panels): chart colours, RichEditor columns, the calendar,
+ * tree and Kanban plugins, and field positioning. They read the theme tokens (`--primary`,
+ * `--border`…), whichever stylesheet defines them. Copied into each renderer's dist.
+ */
+
+/* ------------------------------------------------------------------ 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;
+}
+/* Clipped titles keep their beginning and end with an ellipsis, also a Latin title in a
+   right-to-left calendar (its direction follows its own text). */
+.fc[data-slot='calendar'] .fc-event-title {
+  text-overflow: ellipsis;
+  unicode-bidi: plaintext;
+  text-align: start;
+}
+.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/dist/context.d.ts

@@ -13,6 +13,11 @@ export interface AlfakitContextValue {
    * their own schemas by token.
    */
   poll?: (target: string, interval: string | number | null | undefined) => () => void;
+  /**
+   * Fetches fresh schemas of components now (`live()` tables and widgets after a record
+   * change). Panels leave it out (a partial reload); components outside panels fetch theirs.
+   */
+  refresh?: (targets: string[]) => Promise<void>;
 }
 /**
  * Outside panels there is no shared `alfakit` prop and no `page` prop: `<AlfakitComponent>`

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.tsx"],"mappings":";;;YAiBY,eAAe;iBAEV;EACf,UAAU,kBAAkB;EAC5B,OAAO,eAAe;EACtB,SAAS;EACT,YAAY;;;;;;EAMZ,QAAQ,gBAAgB;;;;;;iBAwBT;EACf,OAAO;EACP,MAAM;;wBAKQ,qBACd,OACA;EAEA,OAAO;EACP,UAAU;oBACX,IAAA;wBAIe,iBAAiB;wBAIjB,kBACd,OACA;EAEA,OAAO;EACP,UAAU;oBACX,IAAA;wBAIe,cAAc;;wBAmBd,sBAAsB;;wBAKtB,YAAY;wBAQZ,iBAAiB;;wBAQjB,oBAAoB,YAAY;wBAIhC,mBAAmB;;wBAWnB,QAAQ;;wBAOR,aAAa;;wBAOb,mBAAmB;wBAInB;;wBAQA,gBAAgB;wBAehB,mBAAmB;wBAInB,eAAe,kBAAkB"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.tsx"],"mappings":";;;YAiBY,eAAe;iBAEV;EACf,UAAU,kBAAkB;EAC5B,OAAO,eAAe;EACtB,SAAS;EACT,YAAY;;;;;;EAMZ,QAAQ,gBAAgB;;;;;EAKxB,WAAW,sBAAsB;;;;;;iBAwBlB;EACf,OAAO;EACP,MAAM;;wBAKQ,qBACd,OACA;EAEA,OAAO;EACP,UAAU;oBACX,IAAA;wBAIe,iBAAiB;wBAIjB,kBACd,OACA;EAEA,OAAO;EACP,UAAU;oBACX,IAAA;wBAIe,cAAc;;wBAmBd,sBAAsB;;wBAKtB,YAAY;wBAQZ,iBAAiB;;wBAQjB,oBAAoB,YAAY;wBAShC,mBAAmB;;wBAWnB,QAAQ;;wBAOR,aAAa;;wBAOb,mBAAmB;wBAInB;;wBAQA,gBAAgB;wBAehB,mBAAmB;wBAInB,eAAe,kBAAkB"}

package/dist/context.js

@@ -64,6 +64,10 @@ function usePageSchema() {
 function usePollComponent() {
 	return useContext(AlfakitContext)?.poll ?? pollComponent;
 }
+/** How `live()` components refresh: their own fetch outside panels, else a partial reload. */
+function useRefreshComponents() {
+	return useContext(AlfakitContext)?.refresh;
+}
 function useAlfakitProps() {
 	return useOptionalPageProps();
 }
@@ -110,6 +114,6 @@ function useRegistry() {
 	return useAlfakit().registry;
 }
 //#endregion
-export { AlfakitProvider, StandaloneProvider, useActionRunner, useAlfakit, useAlfakitProps, useChoice, useDirection, useFormatter, useLocalization, useOptionalAlfakit, useOptionalRegistry, usePageSchema, usePanel, usePollComponent, useRegistry, useStandalone, useT };
+export { AlfakitProvider, StandaloneProvider, useActionRunner, useAlfakit, useAlfakitProps, useChoice, useDirection, useFormatter, useLocalization, useOptionalAlfakit, useOptionalRegistry, usePageSchema, usePanel, usePollComponent, useRefreshComponents, useRegistry, useStandalone, useT };
 
 //# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["globalTranslator"],"sources":["../src/context.tsx"],"sourcesContent":["import {\n  translator as globalTranslator,\n  LocaleFormatter,\n  pollComponent,\n  resolvePanelNavigation,\n  type ActionRunner,\n  type AlfakitPageProps,\n  type ComponentRegistry,\n  type LocalizationSchema,\n  type PageSchema,\n  type PanelSchema,\n  type Translator,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { createContext, useContext, useMemo, type ComponentType, type ReactNode } from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyComponent = ComponentType<any>\n\nexport interface AlfakitContextValue {\n  registry: ComponentRegistry<AnyComponent>\n  pages: Record<string, AnyComponent>\n  actions: ActionRunner\n  translator: Translator\n  /**\n   * Polls a component (`table`, `widget:<id>`) and returns an unsubscribe. Panels use the\n   * shared `pollComponent()` (an Inertia partial reload); components outside panels fetch\n   * their own schemas by token.\n   */\n  poll?: (target: string, interval: string | number | null | undefined) => () => void\n}\n\nconst AlfakitContext = createContext<AlfakitContextValue | null>(null)\n\nconst NO_PROPS: AlfakitPageProps = {} as AlfakitPageProps\n\n/**\n * The Inertia page props, or an empty object outside an Inertia app (component tests,\n * Storybook, a plain server render of an `<AlfakitComponent>`). `usePage()` only reads a\n * context before throwing, so the hook order is the same on both paths.\n */\nfunction useOptionalPageProps(): AlfakitPageProps {\n  try {\n    return usePage<AlfakitPageProps>().props\n  } catch {\n    return NO_PROPS\n  }\n}\n\n/**\n * Outside panels there is no shared `alfakit` prop and no `page` prop: `<AlfakitComponent>`\n * provides both from its payload, and the hooks below read them first.\n */\nexport interface StandaloneContextValue {\n  panel: PanelSchema\n  page: PageSchema\n}\n\nconst StandaloneContext = createContext<StandaloneContextValue | null>(null)\n\nexport function StandaloneProvider({\n  value,\n  children,\n}: {\n  value: StandaloneContextValue\n  children: ReactNode\n}) {\n  return <StandaloneContext.Provider value={value}>{children}</StandaloneContext.Provider>\n}\n\nexport function useStandalone(): StandaloneContextValue | null {\n  return useContext(StandaloneContext)\n}\n\nexport function AlfakitProvider({\n  value,\n  children,\n}: {\n  value: AlfakitContextValue\n  children: ReactNode\n}) {\n  return <AlfakitContext.Provider value={value}>{children}</AlfakitContext.Provider>\n}\n\nexport function useAlfakit(): AlfakitContextValue {\n  const context = useContext(AlfakitContext)\n\n  if (!context) {\n    throw new Error('Alfakit components must be rendered inside createAlfakit().')\n  }\n\n  return context\n}\n\n/**\n * The component registry when rendered inside `createAlfakit()`, otherwise null (primitives\n * rendered on their own in tests or Storybook).\n */\nexport function useOptionalRegistry(): ComponentRegistry<AnyComponent> | null {\n  return useContext(AlfakitContext)?.registry ?? null\n}\n\n/** The context the component renders in, or null outside `createAlfakit()` and `<AlfakitComponent>`. */\nexport function useOptionalAlfakit(): AlfakitContextValue | null {\n  return useContext(AlfakitContext)\n}\n\n/** The shared `alfakit` prop (panel, navigation, user, endpoints…). */\nexport function usePanel(): PanelSchema {\n  const standalone = useContext(StandaloneContext)\n  const props = useOptionalPageProps()\n\n  // The navigation structure is a once prop; its active items and badges are merged in here.\n  return resolvePanelNavigation(standalone?.panel ?? props.alfakit, props.alfakitNavigationBadges)\n}\n\nexport function usePageSchema(): PageSchema | undefined {\n  const standalone = useContext(StandaloneContext)\n  const page = useOptionalPageProps().page\n\n  return standalone?.page ?? page\n}\n\n/** Poll a component (`table`, `widget:<id>`); the returned function stops it. */\nexport function usePollComponent(): NonNullable<AlfakitContextValue['poll']> {\n  return useContext(AlfakitContext)?.poll ?? pollComponent\n}\n\nexport function useAlfakitProps(): AlfakitPageProps {\n  return useOptionalPageProps()\n}\n\nfunction useTranslator(): Translator {\n  // Primitives may render outside createAlfakit() (tests, Storybook); fall back to the\n  // shared translator so they still show their English defaults.\n  return useContext(AlfakitContext)?.translator ?? globalTranslator\n}\n\n/** `t('table.showing', { first: 1, last: 10, total: 42 }, 'Fallback')` */\nexport function useT(): Translator['t'] {\n  const translator = useTranslator()\n\n  return translator.t.bind(translator)\n}\n\n/** Plural-aware lines: `choice('table.selected', 3)` (Laravel `trans_choice` syntax). */\nexport function useChoice(): Translator['choice'] {\n  const translator = useTranslator()\n\n  return translator.choice.bind(translator)\n}\n\n/** The current language, direction, currency, timezone and language list. */\nexport function useLocalization(): LocalizationSchema {\n  return usePanel().localization\n}\n\nexport function useDirection(): 'ltr' | 'rtl' {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n\n  return (standalone?.panel ?? panel)?.localization?.direction ?? 'ltr'\n}\n\n/** `Intl` formatting in the user's locale: `format.money(12.5)`, `format.relative(date)`. */\nexport function useFormatter(): LocaleFormatter {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n  const localization = (standalone?.panel ?? panel)?.localization\n\n  const tag = localization?.tag\n  const currency = localization?.currency\n  const timezone = localization?.timezone\n\n  return useMemo(\n    () => new LocaleFormatter(tag ?? 'en', currency ?? 'USD', timezone),\n    [tag, currency, timezone],\n  )\n}\n\nexport function useActionRunner(): ActionRunner {\n  return useAlfakit().actions\n}\n\nexport function useRegistry(): ComponentRegistry<AnyComponent> {\n  return useAlfakit().registry\n}\n"],"mappings":";;;;;AAgCA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAM,WAA6B,CAAC;;;;;;AAOpC,SAAS,uBAAyC;CAChD,IAAI;EACF,OAAO,QAA0B,CAAC,CAAC;CACrC,QAAQ;EACN,OAAO;CACT;AACF;AAWA,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,SAAgB,mBAAmB,EACjC,OACA,YAIC;CACD,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,gBAA+C;CAC7D,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,gBAAgB,EAC9B,OACA,YAIC;CACD,OAAO,oBAAC,eAAe,UAAhB;EAAgC;EAAQ;CAAkC,CAAA;AACnF;AAEA,SAAgB,aAAkC;CAChD,MAAM,UAAU,WAAW,cAAc;CAEzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,6DAA6D;CAG/E,OAAO;AACT;;;;;AAMA,SAAgB,sBAA8D;CAC5E,OAAO,WAAW,cAAc,CAAC,EAAE,YAAY;AACjD;;AAGA,SAAgB,qBAAiD;CAC/D,OAAO,WAAW,cAAc;AAClC;;AAGA,SAAgB,WAAwB;CACtC,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB;CAGnC,OAAO,uBAAuB,YAAY,SAAS,MAAM,SAAS,MAAM,uBAAuB;AACjG;AAEA,SAAgB,gBAAwC;CACtD,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,OAAO,qBAAqB,CAAC,CAAC;CAEpC,OAAO,YAAY,QAAQ;AAC7B;;AAGA,SAAgB,mBAA6D;CAC3E,OAAO,WAAW,cAAc,CAAC,EAAE,QAAQ;AAC7C;AAEA,SAAgB,kBAAoC;CAClD,OAAO,qBAAqB;AAC9B;AAEA,SAAS,gBAA4B;CAGnC,OAAO,WAAW,cAAc,CAAC,EAAE,cAAcA;AACnD;;AAGA,SAAgB,OAAwB;CACtC,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,EAAE,KAAK,UAAU;AACrC;;AAGA,SAAgB,YAAkC;CAChD,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,OAAO,KAAK,UAAU;AAC1C;;AAGA,SAAgB,kBAAsC;CACpD,OAAO,SAAS,CAAC,CAAC;AACpB;AAEA,SAAgB,eAA8B;CAC5C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CAErC,QAAQ,YAAY,SAAS,MAAA,EAAQ,cAAc,aAAa;AAClE;;AAGA,SAAgB,eAAgC;CAC9C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CACrC,MAAM,gBAAgB,YAAY,SAAS,MAAA,EAAQ;CAEnD,MAAM,MAAM,cAAc;CAC1B,MAAM,WAAW,cAAc;CAC/B,MAAM,WAAW,cAAc;CAE/B,OAAO,cACC,IAAI,gBAAgB,OAAO,MAAM,YAAY,OAAO,QAAQ,GAClE;EAAC;EAAK;EAAU;CAAQ,CAC1B;AACF;AAEA,SAAgB,kBAAgC;CAC9C,OAAO,WAAW,CAAC,CAAC;AACtB;AAEA,SAAgB,cAA+C;CAC7D,OAAO,WAAW,CAAC,CAAC;AACtB"}
+{"version":3,"file":"context.js","names":["globalTranslator"],"sources":["../src/context.tsx"],"sourcesContent":["import {\n  translator as globalTranslator,\n  LocaleFormatter,\n  pollComponent,\n  resolvePanelNavigation,\n  type ActionRunner,\n  type AlfakitPageProps,\n  type ComponentRegistry,\n  type LocalizationSchema,\n  type PageSchema,\n  type PanelSchema,\n  type Translator,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { createContext, useContext, useMemo, type ComponentType, type ReactNode } from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyComponent = ComponentType<any>\n\nexport interface AlfakitContextValue {\n  registry: ComponentRegistry<AnyComponent>\n  pages: Record<string, AnyComponent>\n  actions: ActionRunner\n  translator: Translator\n  /**\n   * Polls a component (`table`, `widget:<id>`) and returns an unsubscribe. Panels use the\n   * shared `pollComponent()` (an Inertia partial reload); components outside panels fetch\n   * their own schemas by token.\n   */\n  poll?: (target: string, interval: string | number | null | undefined) => () => void\n  /**\n   * Fetches fresh schemas of components now (`live()` tables and widgets after a record\n   * change). Panels leave it out (a partial reload); components outside panels fetch theirs.\n   */\n  refresh?: (targets: string[]) => Promise<void>\n}\n\nconst AlfakitContext = createContext<AlfakitContextValue | null>(null)\n\nconst NO_PROPS: AlfakitPageProps = {} as AlfakitPageProps\n\n/**\n * The Inertia page props, or an empty object outside an Inertia app (component tests,\n * Storybook, a plain server render of an `<AlfakitComponent>`). `usePage()` only reads a\n * context before throwing, so the hook order is the same on both paths.\n */\nfunction useOptionalPageProps(): AlfakitPageProps {\n  try {\n    return usePage<AlfakitPageProps>().props\n  } catch {\n    return NO_PROPS\n  }\n}\n\n/**\n * Outside panels there is no shared `alfakit` prop and no `page` prop: `<AlfakitComponent>`\n * provides both from its payload, and the hooks below read them first.\n */\nexport interface StandaloneContextValue {\n  panel: PanelSchema\n  page: PageSchema\n}\n\nconst StandaloneContext = createContext<StandaloneContextValue | null>(null)\n\nexport function StandaloneProvider({\n  value,\n  children,\n}: {\n  value: StandaloneContextValue\n  children: ReactNode\n}) {\n  return <StandaloneContext.Provider value={value}>{children}</StandaloneContext.Provider>\n}\n\nexport function useStandalone(): StandaloneContextValue | null {\n  return useContext(StandaloneContext)\n}\n\nexport function AlfakitProvider({\n  value,\n  children,\n}: {\n  value: AlfakitContextValue\n  children: ReactNode\n}) {\n  return <AlfakitContext.Provider value={value}>{children}</AlfakitContext.Provider>\n}\n\nexport function useAlfakit(): AlfakitContextValue {\n  const context = useContext(AlfakitContext)\n\n  if (!context) {\n    throw new Error('Alfakit components must be rendered inside createAlfakit().')\n  }\n\n  return context\n}\n\n/**\n * The component registry when rendered inside `createAlfakit()`, otherwise null (primitives\n * rendered on their own in tests or Storybook).\n */\nexport function useOptionalRegistry(): ComponentRegistry<AnyComponent> | null {\n  return useContext(AlfakitContext)?.registry ?? null\n}\n\n/** The context the component renders in, or null outside `createAlfakit()` and `<AlfakitComponent>`. */\nexport function useOptionalAlfakit(): AlfakitContextValue | null {\n  return useContext(AlfakitContext)\n}\n\n/** The shared `alfakit` prop (panel, navigation, user, endpoints…). */\nexport function usePanel(): PanelSchema {\n  const standalone = useContext(StandaloneContext)\n  const props = useOptionalPageProps()\n\n  // The navigation structure is a once prop; its active items and badges are merged in here.\n  return resolvePanelNavigation(standalone?.panel ?? props.alfakit, props.alfakitNavigationBadges)\n}\n\nexport function usePageSchema(): PageSchema | undefined {\n  const standalone = useContext(StandaloneContext)\n  const page = useOptionalPageProps().page\n\n  return standalone?.page ?? page\n}\n\n/** Poll a component (`table`, `widget:<id>`); the returned function stops it. */\nexport function usePollComponent(): NonNullable<AlfakitContextValue['poll']> {\n  return useContext(AlfakitContext)?.poll ?? pollComponent\n}\n\n/** How `live()` components refresh: their own fetch outside panels, else a partial reload. */\nexport function useRefreshComponents(): AlfakitContextValue['refresh'] {\n  return useContext(AlfakitContext)?.refresh\n}\n\nexport function useAlfakitProps(): AlfakitPageProps {\n  return useOptionalPageProps()\n}\n\nfunction useTranslator(): Translator {\n  // Primitives may render outside createAlfakit() (tests, Storybook); fall back to the\n  // shared translator so they still show their English defaults.\n  return useContext(AlfakitContext)?.translator ?? globalTranslator\n}\n\n/** `t('table.showing', { first: 1, last: 10, total: 42 }, 'Fallback')` */\nexport function useT(): Translator['t'] {\n  const translator = useTranslator()\n\n  return translator.t.bind(translator)\n}\n\n/** Plural-aware lines: `choice('table.selected', 3)` (Laravel `trans_choice` syntax). */\nexport function useChoice(): Translator['choice'] {\n  const translator = useTranslator()\n\n  return translator.choice.bind(translator)\n}\n\n/** The current language, direction, currency, timezone and language list. */\nexport function useLocalization(): LocalizationSchema {\n  return usePanel().localization\n}\n\nexport function useDirection(): 'ltr' | 'rtl' {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n\n  return (standalone?.panel ?? panel)?.localization?.direction ?? 'ltr'\n}\n\n/** `Intl` formatting in the user's locale: `format.money(12.5)`, `format.relative(date)`. */\nexport function useFormatter(): LocaleFormatter {\n  const standalone = useContext(StandaloneContext)\n  const panel = useOptionalPageProps().alfakit\n  const localization = (standalone?.panel ?? panel)?.localization\n\n  const tag = localization?.tag\n  const currency = localization?.currency\n  const timezone = localization?.timezone\n\n  return useMemo(\n    () => new LocaleFormatter(tag ?? 'en', currency ?? 'USD', timezone),\n    [tag, currency, timezone],\n  )\n}\n\nexport function useActionRunner(): ActionRunner {\n  return useAlfakit().actions\n}\n\nexport function useRegistry(): ComponentRegistry<AnyComponent> {\n  return useAlfakit().registry\n}\n"],"mappings":";;;;;AAqCA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAM,WAA6B,CAAC;;;;;;AAOpC,SAAS,uBAAyC;CAChD,IAAI;EACF,OAAO,QAA0B,CAAC,CAAC;CACrC,QAAQ;EACN,OAAO;CACT;AACF;AAWA,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,SAAgB,mBAAmB,EACjC,OACA,YAIC;CACD,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,gBAA+C;CAC7D,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,gBAAgB,EAC9B,OACA,YAIC;CACD,OAAO,oBAAC,eAAe,UAAhB;EAAgC;EAAQ;CAAkC,CAAA;AACnF;AAEA,SAAgB,aAAkC;CAChD,MAAM,UAAU,WAAW,cAAc;CAEzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,6DAA6D;CAG/E,OAAO;AACT;;;;;AAMA,SAAgB,sBAA8D;CAC5E,OAAO,WAAW,cAAc,CAAC,EAAE,YAAY;AACjD;;AAGA,SAAgB,qBAAiD;CAC/D,OAAO,WAAW,cAAc;AAClC;;AAGA,SAAgB,WAAwB;CACtC,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB;CAGnC,OAAO,uBAAuB,YAAY,SAAS,MAAM,SAAS,MAAM,uBAAuB;AACjG;AAEA,SAAgB,gBAAwC;CACtD,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,OAAO,qBAAqB,CAAC,CAAC;CAEpC,OAAO,YAAY,QAAQ;AAC7B;;AAGA,SAAgB,mBAA6D;CAC3E,OAAO,WAAW,cAAc,CAAC,EAAE,QAAQ;AAC7C;;AAGA,SAAgB,uBAAuD;CACrE,OAAO,WAAW,cAAc,CAAC,EAAE;AACrC;AAEA,SAAgB,kBAAoC;CAClD,OAAO,qBAAqB;AAC9B;AAEA,SAAS,gBAA4B;CAGnC,OAAO,WAAW,cAAc,CAAC,EAAE,cAAcA;AACnD;;AAGA,SAAgB,OAAwB;CACtC,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,EAAE,KAAK,UAAU;AACrC;;AAGA,SAAgB,YAAkC;CAChD,MAAM,aAAa,cAAc;CAEjC,OAAO,WAAW,OAAO,KAAK,UAAU;AAC1C;;AAGA,SAAgB,kBAAsC;CACpD,OAAO,SAAS,CAAC,CAAC;AACpB;AAEA,SAAgB,eAA8B;CAC5C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CAErC,QAAQ,YAAY,SAAS,MAAA,EAAQ,cAAc,aAAa;AAClE;;AAGA,SAAgB,eAAgC;CAC9C,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CACrC,MAAM,gBAAgB,YAAY,SAAS,MAAA,EAAQ;CAEnD,MAAM,MAAM,cAAc;CAC1B,MAAM,WAAW,cAAc;CAC/B,MAAM,WAAW,cAAc;CAE/B,OAAO,cACC,IAAI,gBAAgB,OAAO,MAAM,YAAY,OAAO,QAAQ,GAClE;EAAC;EAAK;EAAU;CAAQ,CAC1B;AACF;AAEA,SAAgB,kBAAgC;CAC9C,OAAO,WAAW,CAAC,CAAC;AACtB;AAEA,SAAgB,cAA+C;CAC7D,OAAO,WAAW,CAAC,CAAC;AACtB"}

package/dist/create-alfakit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-alfakit.d.ts","names":[],"sources":["../src/create-alfakit.tsx"],"mappings":";;;;;iBAgHiB,6BAA6B,eAAe;;EAE3D,WAAW,KAAK,cAAc;EAC9B;;;;;;;;;;;;;;wBAmLoB,cAAc,UAAS,uBAA4B"}
+{"version":3,"file":"create-alfakit.d.ts","names":[],"sources":["../src/create-alfakit.tsx"],"mappings":";;;;;iBAsHiB,6BAA6B,eAAe;;EAE3D,WAAW,KAAK,cAAc;EAC9B;;;;;;;;;;;;;;wBAsLoB,cAAc,UAAS,uBAA4B"}

package/dist/create-alfakit.js

@@ -4,15 +4,16 @@ import { TooltipProvider } from "./components/ui/tooltip.js";
 import { discoverComponents } from "./lib/discovery.js";
 import { builtInComponents, createDefaultRegistry } from "./registry.js";
 import { FlashToasts, showToast } from "./components/notifications/flash-toasts.js";
-import { PwaManager } from "./components/panel/pwa.js";
 import { AlfakitPage } from "./pages/page.js";
 import { ActionModals } from "./components/actions/action-modals.js";
 import { RealtimeNotifications } from "./components/notifications/realtime-notifications.js";
+import { PwaManager } from "./components/panel/pwa.js";
 import { ImpersonationBanner } from "./components/panel/impersonation-banner.js";
 import { DevToolsSlot } from "./components/dev-tools/dev-tools-slot.js";
 import { SchemaContractGuard } from "./components/panel/schema-contract-guard.js";
 import { Toaster } from "./components/ui/sonner.js";
-import { ActionRunner, PANEL_TOAST_OFFSET, Translator, applyDocumentLocale, applyPanelTheme, configureCharts, configureRealtime, debugRecorder, effectiveErrorNotifications, initializeAppearance, installErrorNotifications, installPrefetchInvalidation, installSpaUrlExceptions, registerRichEditorExtensions, reloadOnExpiredPage, resolveRequestErrorNotification, resolveToastPosition, setRequestErrorReporter, whenIdle } from "@alfakit/core";
+import { panelLayouts } from "./layouts/panel-layouts.js";
+import { ActionRunner, PANEL_TOAST_OFFSET, Translator, applyDocumentLocale, applyPanelTheme, configureCharts, configureRealtime, debugRecorder, documentNonce, effectiveErrorNotifications, initializeAppearance, installErrorNotifications, installPrefetchInvalidation, installSpaUrlExceptions, registerRichEditorExtensions, reloadOnExpiredPage, resolveRequestErrorNotification, resolveToastPosition, setRequestErrorReporter, whenIdle } from "@alfakit/core";
 import { createInertiaApp, router, usePage } from "@inertiajs/react";
 import { StrictMode, createElement, useLayoutEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -31,9 +32,10 @@ function AlfakitRoot({ children, toasterId }) {
 		translator.setTranslations(panel.translations ?? {});
 		translator.setLocale(localization?.tag ?? "en");
 	}
+	const ownsDocument = panel?.starterKit !== true;
 	useLayoutEffect(() => {
-		applyDocumentLocale(localization);
-	}, [localization]);
+		if (ownsDocument) applyDocumentLocale(localization);
+	}, [localization, ownsDocument]);
 	useLayoutEffect(() => {
 		applyPanelTheme(panel);
 	}, [panel]);
@@ -72,7 +74,7 @@ function AlfakitRoot({ children, toasterId }) {
 */
 function bootAlfakit(options = {}) {
 	const discovered = discoverComponents(options.discover);
-	const registry = createDefaultRegistry().registerMany(discovered.components).registerMany(options.components ?? {});
+	const registry = createDefaultRegistry().registerMany(panelLayouts).registerMany(discovered.components).registerMany(options.components ?? {});
 	const pages = {
 		"Alfakit/Page": AlfakitPage,
 		...discovered.pages,
@@ -138,6 +140,7 @@ function bootAlfakit(options = {}) {
 	return createInertiaApp({
 		title: (title) => title,
 		progress: options.progress === void 0 ? { color: "var(--primary)" } : options.progress,
+		nonce: documentNonce(),
 		resolve: (name, page) => {
 			const component = pages[name];
 			if (!component) throw new Error(`Alfakit: page component "${name}" is not registered. Pass it to createAlfakit({ pages }).`);