@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/widgets/dashboard-customizer.js

@@ -0,0 +1,219 @@
+import { useDirection, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { LazyPlaceholder } from "../panel/lazy-placeholder.js";
+import { DashboardEditor, columnSpanClasses, dashboardMoveForKey, gridColumnsClasses, isLazyPlaceholder } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useId, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, EyeOffIcon, GripVerticalIcon, LayoutDashboardIcon, PlusIcon, RotateCcwIcon, XIcon } from "lucide-react";
+//#region src/components/widgets/dashboard-customizer.tsx
+/**
+* A customizable dashboard (`Dashboard::customizable()`): the widget grid plus an "Edit
+* dashboard" mode where widgets are dragged (pointer) or moved with the arrow keys on their
+* handle, resized, hidden and added from the library. The layout is saved on the server.
+*/
+function CustomizableWidgetGrid({ block, customize, renderWidget }) {
+	const t = useT();
+	const dir = useDirection();
+	const helpId = useId();
+	const editor = useMemo(() => new DashboardEditor(customize, {
+		t,
+		onSaved: () => router.reload()
+	}), [customize.endpoint, customize.token]);
+	useEffect(() => editor.sync(customize), [editor, customize]);
+	const state = useStore(editor.store);
+	const widgets = new Map(block.widgets.map((widget) => [widget.id, widget]));
+	const visible = state.layout.filter((entry) => !entry.hidden);
+	const available = editor.available();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dashboard",
+		"data-editing": state.editing ? "" : void 0,
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "dashboard-toolbar",
+				role: "toolbar",
+				"aria-label": t("dashboard.customize.toolbar", {}, "Dashboard layout"),
+				className: "flex flex-wrap items-center justify-end gap-2",
+				children: state.editing ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						disabled: state.saving,
+						onClick: () => {
+							editor.resetDraft();
+						},
+						children: [/* @__PURE__ */ jsx(RotateCcwIcon, { "aria-hidden": "true" }), t("dashboard.customize.reset", {}, "Reset to default")]
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: state.saving,
+						onClick: () => editor.cancel(),
+						children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), t("dashboard.customize.cancel", {}, "Cancel")]
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						size: "sm",
+						disabled: state.saving,
+						onClick: () => void editor.save(),
+						children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), t("dashboard.customize.save", {}, "Save")]
+					})
+				] }) : /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					onClick: () => editor.start(),
+					children: [/* @__PURE__ */ jsx(LayoutDashboardIcon, { "aria-hidden": "true" }), t("dashboard.customize.edit", {}, "Edit dashboard")]
+				})
+			}),
+			state.error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-destructive text-sm",
+				children: state.error
+			}),
+			state.editing && /* @__PURE__ */ jsx("p", {
+				id: helpId,
+				className: "sr-only",
+				children: t("dashboard.customize.move_help", {}, "Use the arrow keys to move the widget, Home or End to move it to the start or end.")
+			}),
+			visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "dashboard-empty",
+				className: "text-muted-foreground rounded-xl border border-dashed p-6 text-center text-sm",
+				children: t("dashboard.customize.empty", {}, "No widgets on this dashboard yet.")
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-slot": "widgets",
+				className: cn("grid gap-6", gridColumnsClasses(block.columns)),
+				children: visible.map((entry) => {
+					const widget = widgets.get(entry.id);
+					const library = editor.widget(entry.id);
+					const label = editor.label(entry.id);
+					const span = editor.spanOf(entry.id);
+					const columnSpan = state.editing && library ? library.spans.find((option) => option.value === span)?.columnSpan ?? widget?.columnSpan : widget?.columnSpan;
+					const content = widget ? isLazyPlaceholder(widget) ? /* @__PURE__ */ jsx(LazyPlaceholder, { variant: widget.type === "TableWidget" ? "table" : "widget" }) : renderWidget(widget) : /* @__PURE__ */ jsx("div", {
+						className: "bg-card text-muted-foreground flex min-h-24 items-center justify-center rounded-xl border border-dashed p-6 text-sm",
+						children: t("dashboard.customize.pending", { widget: label }, ":widget appears once you save.")
+					});
+					if (!state.editing) return /* @__PURE__ */ jsx("div", {
+						className: cn("min-w-0", columnSpanClasses(columnSpan)),
+						children: content
+					}, entry.id);
+					return /* @__PURE__ */ jsxs("div", {
+						"data-slot": "dashboard-widget",
+						"data-dragging": state.dragging === entry.id ? "" : void 0,
+						role: "group",
+						"aria-label": label,
+						className: cn("relative min-w-0 rounded-xl border-2 border-dashed p-1", state.dragging === entry.id && "opacity-50", columnSpanClasses(columnSpan)),
+						onDragOver: (event) => {
+							if (state.dragging !== null) event.preventDefault();
+						},
+						onDrop: (event) => {
+							event.preventDefault();
+							editor.dropOn(entry.id);
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							"data-slot": "dashboard-widget-controls",
+							className: "bg-background/95 absolute inset-x-2 top-2 z-10 flex items-center gap-1 rounded-md border p-1 shadow-sm",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"data-slot": "dashboard-widget-handle",
+									draggable: true,
+									"aria-label": t("dashboard.customize.move", { widget: label }, "Move :widget"),
+									"aria-describedby": helpId,
+									"aria-roledescription": t("dashboard.customize.sortable", {}, "sortable"),
+									className: "hover:bg-accent focus-visible:ring-ring/50 cursor-grab rounded p-1 outline-none focus-visible:ring-[3px] active:cursor-grabbing",
+									onDragStart: (event) => {
+										event.dataTransfer.effectAllowed = "move";
+										event.dataTransfer.setData("text/plain", entry.id);
+										editor.dragStart(entry.id);
+									},
+									onDragEnd: () => editor.dragEnd(),
+									onKeyDown: (event) => {
+										const move = dashboardMoveForKey(event.key, dir);
+										if (move !== null) {
+											event.preventDefault();
+											editor.move(entry.id, move);
+											const target = event.currentTarget;
+											requestAnimationFrame(() => target.focus());
+										}
+									},
+									children: /* @__PURE__ */ jsx(GripVerticalIcon, {
+										className: "size-4",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate text-sm font-medium",
+									children: label
+								}),
+								library && library.spans.length > 1 && /* @__PURE__ */ jsx("select", {
+									"data-slot": "dashboard-widget-span",
+									"aria-label": t("dashboard.customize.size", { widget: label }, "Size of :widget"),
+									className: "border-input bg-background h-7 rounded-md border px-1 text-xs",
+									value: span,
+									onChange: (event) => editor.setSpan(entry.id, Number(event.target.value)),
+									children: library.spans.map((option) => /* @__PURE__ */ jsx("option", {
+										value: option.value,
+										children: option.label
+									}, option.value))
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "icon-xs",
+									"aria-label": t("dashboard.customize.hide", { widget: label }, "Hide :widget"),
+									onClick: () => editor.hide(entry.id),
+									children: /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true" })
+								})
+							]
+						}), /* @__PURE__ */ jsx("div", {
+							inert: true,
+							className: "pointer-events-none pt-12 select-none",
+							"aria-hidden": "true",
+							children: content
+						})]
+					}, entry.id);
+				})
+			}),
+			state.editing && /* @__PURE__ */ jsxs("section", {
+				"data-slot": "dashboard-library",
+				"aria-label": t("dashboard.customize.library", {}, "Widget library"),
+				className: "bg-muted/40 flex flex-col gap-3 rounded-xl border p-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-sm font-medium",
+					children: t("dashboard.customize.add", {}, "Add widget")
+				}), available.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: t("dashboard.customize.library_empty", {}, "Every widget is on the dashboard.")
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-wrap gap-2",
+					children: available.map((widget) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						title: widget.description,
+						"aria-label": t("dashboard.customize.add_widget", { widget: widget.label }, "Add :widget"),
+						onClick: () => editor.add(widget.id),
+						children: [/* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" }), widget.label]
+					}) }, widget.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "dashboard-announcer",
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: state.announcement
+			})
+		]
+	});
+}
+//#endregion
+export { CustomizableWidgetGrid };
+
+//# sourceMappingURL=dashboard-customizer.js.map

package/dist/components/widgets/dashboard-customizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-customizer.js","names":[],"sources":["../../../src/components/widgets/dashboard-customizer.tsx"],"sourcesContent":["import type {\n  DashboardCustomizeSchema,\n  WidgetsBlock as WidgetsBlockSchema,\n  WidgetSchema,\n} from '@alfakit/core'\nimport {\n  columnSpanClasses,\n  DashboardEditor,\n  dashboardMoveForKey,\n  gridColumnsClasses,\n  isLazyPlaceholder,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport {\n  CheckIcon,\n  EyeOffIcon,\n  GripVerticalIcon,\n  LayoutDashboardIcon,\n  PlusIcon,\n  RotateCcwIcon,\n  XIcon,\n} from 'lucide-react'\nimport { useEffect, useId, useMemo, type ReactNode } from 'react'\nimport { useDirection, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { LazyPlaceholder } from '../panel/lazy-placeholder'\nimport { Button } from '../ui/button'\n\n/**\n * A customizable dashboard (`Dashboard::customizable()`): the widget grid plus an \"Edit\n * dashboard\" mode where widgets are dragged (pointer) or moved with the arrow keys on their\n * handle, resized, hidden and added from the library. The layout is saved on the server.\n */\nexport function CustomizableWidgetGrid({\n  block,\n  customize,\n  renderWidget,\n}: {\n  block: WidgetsBlockSchema\n  customize: DashboardCustomizeSchema\n  renderWidget: (widget: WidgetSchema) => ReactNode\n}) {\n  const t = useT()\n  const dir = useDirection()\n  const helpId = useId()\n  const editor = useMemo(\n    () => new DashboardEditor(customize, { t, onSaved: () => router.reload() }),\n    // One editor per dashboard; `sync()` follows later schemas.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [customize.endpoint, customize.token],\n  )\n\n  useEffect(() => editor.sync(customize), [editor, customize])\n\n  const state = useStore(editor.store)\n  const widgets = new Map(block.widgets.map((widget) => [widget.id, widget]))\n  const visible = state.layout.filter((entry) => !entry.hidden)\n  const available = editor.available()\n\n  return (\n    <div\n      data-slot=\"dashboard\"\n      data-editing={state.editing ? '' : undefined}\n      className=\"flex flex-col gap-4\"\n    >\n      <div\n        data-slot=\"dashboard-toolbar\"\n        role=\"toolbar\"\n        aria-label={t('dashboard.customize.toolbar', {}, 'Dashboard layout')}\n        className=\"flex flex-wrap items-center justify-end gap-2\"\n      >\n        {state.editing ? (\n          <>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              disabled={state.saving}\n              onClick={() => {\n                editor.resetDraft()\n              }}\n            >\n              <RotateCcwIcon aria-hidden=\"true\" />\n              {t('dashboard.customize.reset', {}, 'Reset to default')}\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={state.saving}\n              onClick={() => editor.cancel()}\n            >\n              <XIcon aria-hidden=\"true\" />\n              {t('dashboard.customize.cancel', {}, 'Cancel')}\n            </Button>\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              disabled={state.saving}\n              onClick={() => void editor.save()}\n            >\n              <CheckIcon aria-hidden=\"true\" />\n              {t('dashboard.customize.save', {}, 'Save')}\n            </Button>\n          </>\n        ) : (\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => editor.start()}>\n            <LayoutDashboardIcon aria-hidden=\"true\" />\n            {t('dashboard.customize.edit', {}, 'Edit dashboard')}\n          </Button>\n        )}\n      </div>\n\n      {state.error && (\n        <p role=\"alert\" className=\"text-destructive text-sm\">\n          {state.error}\n        </p>\n      )}\n\n      {state.editing && (\n        <p id={helpId} className=\"sr-only\">\n          {t(\n            'dashboard.customize.move_help',\n            {},\n            'Use the arrow keys to move the widget, Home or End to move it to the start or end.',\n          )}\n        </p>\n      )}\n\n      {visible.length === 0 ? (\n        <p\n          data-slot=\"dashboard-empty\"\n          className=\"text-muted-foreground rounded-xl border border-dashed p-6 text-center text-sm\"\n        >\n          {t('dashboard.customize.empty', {}, 'No widgets on this dashboard yet.')}\n        </p>\n      ) : (\n        <div data-slot=\"widgets\" className={cn('grid gap-6', gridColumnsClasses(block.columns))}>\n          {visible.map((entry) => {\n            const widget = widgets.get(entry.id)\n            const library = editor.widget(entry.id)\n            const label = editor.label(entry.id)\n            const span = editor.spanOf(entry.id)\n            const columnSpan =\n              state.editing && library\n                ? (library.spans.find((option) => option.value === span)?.columnSpan ??\n                  widget?.columnSpan)\n                : widget?.columnSpan\n\n            const content = widget ? (\n              isLazyPlaceholder(widget) ? (\n                <LazyPlaceholder variant={widget.type === 'TableWidget' ? 'table' : 'widget'} />\n              ) : (\n                renderWidget(widget)\n              )\n            ) : (\n              <div className=\"bg-card text-muted-foreground flex min-h-24 items-center justify-center rounded-xl border border-dashed p-6 text-sm\">\n                {t(\n                  'dashboard.customize.pending',\n                  { widget: label },\n                  ':widget appears once you save.',\n                )}\n              </div>\n            )\n\n            if (!state.editing) {\n              return (\n                <div key={entry.id} className={cn('min-w-0', columnSpanClasses(columnSpan))}>\n                  {content}\n                </div>\n              )\n            }\n\n            return (\n              <div\n                key={entry.id}\n                data-slot=\"dashboard-widget\"\n                data-dragging={state.dragging === entry.id ? '' : undefined}\n                role=\"group\"\n                aria-label={label}\n                className={cn(\n                  'relative min-w-0 rounded-xl border-2 border-dashed p-1',\n                  state.dragging === entry.id && 'opacity-50',\n                  columnSpanClasses(columnSpan),\n                )}\n                onDragOver={(event) => {\n                  if (state.dragging !== null) event.preventDefault()\n                }}\n                onDrop={(event) => {\n                  event.preventDefault()\n                  editor.dropOn(entry.id)\n                }}\n              >\n                <div\n                  data-slot=\"dashboard-widget-controls\"\n                  className=\"bg-background/95 absolute inset-x-2 top-2 z-10 flex items-center gap-1 rounded-md border p-1 shadow-sm\"\n                >\n                  <button\n                    type=\"button\"\n                    data-slot=\"dashboard-widget-handle\"\n                    draggable\n                    aria-label={t('dashboard.customize.move', { widget: label }, 'Move :widget')}\n                    aria-describedby={helpId}\n                    aria-roledescription={t('dashboard.customize.sortable', {}, 'sortable')}\n                    className=\"hover:bg-accent focus-visible:ring-ring/50 cursor-grab rounded p-1 outline-none focus-visible:ring-[3px] active:cursor-grabbing\"\n                    onDragStart={(event) => {\n                      event.dataTransfer.effectAllowed = 'move'\n                      event.dataTransfer.setData('text/plain', entry.id)\n                      editor.dragStart(entry.id)\n                    }}\n                    onDragEnd={() => editor.dragEnd()}\n                    onKeyDown={(event) => {\n                      const move = dashboardMoveForKey(event.key, dir)\n\n                      if (move !== null) {\n                        event.preventDefault()\n                        editor.move(entry.id, move)\n                        // Keep focus on the moved widget's handle.\n                        const target = event.currentTarget\n                        requestAnimationFrame(() => target.focus())\n                      }\n                    }}\n                  >\n                    <GripVerticalIcon className=\"size-4\" aria-hidden=\"true\" />\n                  </button>\n                  <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">{label}</span>\n                  {library && library.spans.length > 1 && (\n                    <select\n                      data-slot=\"dashboard-widget-span\"\n                      aria-label={t(\n                        'dashboard.customize.size',\n                        { widget: label },\n                        'Size of :widget',\n                      )}\n                      className=\"border-input bg-background h-7 rounded-md border px-1 text-xs\"\n                      value={span}\n                      onChange={(event) => editor.setSpan(entry.id, Number(event.target.value))}\n                    >\n                      {library.spans.map((option) => (\n                        <option key={option.value} value={option.value}>\n                          {option.label}\n                        </option>\n                      ))}\n                    </select>\n                  )}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-xs\"\n                    aria-label={t('dashboard.customize.hide', { widget: label }, 'Hide :widget')}\n                    onClick={() => editor.hide(entry.id)}\n                  >\n                    <EyeOffIcon aria-hidden=\"true\" />\n                  </Button>\n                </div>\n                {/* The widget itself is inert while editing: focus stays on the controls. */}\n                <div inert className=\"pointer-events-none pt-12 select-none\" aria-hidden=\"true\">\n                  {content}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {state.editing && (\n        <section\n          data-slot=\"dashboard-library\"\n          aria-label={t('dashboard.customize.library', {}, 'Widget library')}\n          className=\"bg-muted/40 flex flex-col gap-3 rounded-xl border p-4\"\n        >\n          <h2 className=\"text-sm font-medium\">{t('dashboard.customize.add', {}, 'Add widget')}</h2>\n          {available.length === 0 ? (\n            <p className=\"text-muted-foreground text-sm\">\n              {t('dashboard.customize.library_empty', {}, 'Every widget is on the dashboard.')}\n            </p>\n          ) : (\n            <ul className=\"flex flex-wrap gap-2\">\n              {available.map((widget) => (\n                <li key={widget.id}>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    title={widget.description}\n                    aria-label={t(\n                      'dashboard.customize.add_widget',\n                      { widget: widget.label },\n                      'Add :widget',\n                    )}\n                    onClick={() => editor.add(widget.id)}\n                  >\n                    <PlusIcon aria-hidden=\"true\" />\n                    {widget.label}\n                  </Button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </section>\n      )}\n\n      <div data-slot=\"dashboard-announcer\" role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {state.announcement}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/index.d.ts

@@ -0,0 +1,6 @@
+import { CalendarWidget } from "./calendar-lazy.js";
+import { ChartWidget } from "./chart-lazy.js";
+import { CustomizableWidgetGrid } from "./dashboard-customizer.js";
+import { StatsOverviewWidget } from "./stats-overview.js";
+import { WidgetGrid, WidgetRenderer } from "./widgets-block.js";
+export { CalendarWidget, ChartWidget, CustomizableWidgetGrid, StatsOverviewWidget, WidgetGrid, WidgetRenderer };

package/dist/components/widgets/stats-overview.d.ts

@@ -0,0 +1,7 @@
+import { StatsOverviewWidgetSchema } from "@alfakit/core";
+//#region src/components/widgets/stats-overview.d.ts
+export declare function StatsOverviewWidget({ widget }: {
+  widget: StatsOverviewWidgetSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=stats-overview.d.ts.map

package/dist/components/widgets/stats-overview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-overview.d.ts","names":[],"sources":["../../../src/components/widgets/stats-overview.tsx"],"mappings":";;wBAkBgB,sBAAsB;EAAY,QAAQ;oBAA2B,IAAA"}

package/dist/components/widgets/stats-overview.js

@@ -0,0 +1,133 @@
+import { usePollComponent } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, cssColor, iconBackgroundColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Card } from "../ui/card.js";
+import { useLiveUpdates } from "../realtime/live-records-pill.js";
+import { NewTabHint } from "../../lib/new-tab-hint.js";
+import { gridColumnsClasses, widgetPollTarget } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/widgets/stats-overview.tsx
+function StatsOverviewWidget({ widget }) {
+	const columns = widget.columns ?? {
+		default: 1,
+		md: Math.min(widget.stats.length, 2),
+		lg: Math.min(widget.stats.length, 4)
+	};
+	const pollTarget = widgetPollTarget(widget);
+	const pollComponent = usePollComponent();
+	useEffect(() => pollComponent(pollTarget, widget.pollingInterval), [
+		pollComponent,
+		pollTarget,
+		widget.pollingInterval
+	]);
+	useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) });
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex flex-col gap-3",
+		...widget.heading ? { "aria-label": widget.heading } : {},
+		children: [(widget.heading || widget.description) && /* @__PURE__ */ jsxs("div", { children: [widget.heading && /* @__PURE__ */ jsx("h3", {
+			className: "text-base font-semibold",
+			children: widget.heading
+		}), widget.description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: widget.description
+		})] }), /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-4", gridColumnsClasses(columns)),
+			children: widget.stats.map((stat, index) => /* @__PURE__ */ jsx(StatCard, { stat }, index))
+		})]
+	});
+}
+function StatCard({ stat }) {
+	const content = /* @__PURE__ */ jsxs(Card, {
+		...extraProps(stat.extraAttributes, cn("relative gap-2 overflow-hidden px-5 py-4", stat.url && "hover:bg-accent/40 transition-colors")),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-sm font-medium",
+						children: stat.label
+					}),
+					(stat.value === null || stat.value === "") && stat.placeholder ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-2xl font-semibold tracking-tight",
+						"data-slot": "stat-placeholder",
+						children: stat.placeholder
+					}) : /* @__PURE__ */ jsx("span", {
+						className: cn("text-2xl font-semibold tracking-tight", stat.color && textColorClasses[stat.color]),
+						children: stat.value
+					}),
+					stat.description && /* @__PURE__ */ jsxs("span", {
+						className: cn("inline-flex items-center gap-1 text-xs", stat.descriptionColor ? textColorClasses[stat.descriptionColor] : "text-muted-foreground"),
+						children: [
+							stat.descriptionIcon && stat.descriptionIconPosition !== "after" && /* @__PURE__ */ jsx(Icon, {
+								name: stat.descriptionIcon,
+								className: "size-3.5"
+							}),
+							stat.description,
+							stat.descriptionIcon && stat.descriptionIconPosition === "after" && /* @__PURE__ */ jsx(Icon, {
+								name: stat.descriptionIcon,
+								className: "size-3.5"
+							})
+						]
+					})
+				]
+			}), stat.icon && /* @__PURE__ */ jsx("span", {
+				className: cn("flex size-9 shrink-0 items-center justify-center rounded-md", colorClass(iconBackgroundColorClasses, stat.color, "gray")),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: stat.icon,
+					className: "size-5"
+				})
+			})]
+		}), stat.chart && stat.chart.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+			data: stat.chart,
+			color: cssColor(stat.chartColor ?? stat.color)
+		})]
+	});
+	if (stat.url) return stat.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+		href: stat.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: [content, /* @__PURE__ */ jsx(NewTabHint, {})]
+	}) : /* @__PURE__ */ jsx(Link, {
+		href: stat.url,
+		children: content
+	});
+	return content;
+}
+function Sparkline({ data, color }) {
+	const width = 200;
+	const height = 40;
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const path = data.map((value, index) => [index / (data.length - 1) * width, height - (value - min) / range * 36 - 2]).map(([x, y], index) => `${index === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+	const area = `${path} L${width},${height} L0,${height} Z`;
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${width} ${height}`,
+		className: "mt-1 h-10 w-full",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		"data-slot": "stat-chart",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: area,
+			fill: color,
+			"data-slot": "stat-chart-area",
+			style: { opacity: "var(--stat-chart-fill-opacity, 0.12)" }
+		}), /* @__PURE__ */ jsx("path", {
+			d: path,
+			fill: "none",
+			stroke: color,
+			strokeLinejoin: "round",
+			strokeLinecap: "round",
+			"data-slot": "stat-chart-line",
+			style: { strokeWidth: "var(--stat-chart-stroke-width, 2)" }
+		})]
+	});
+}
+//#endregion
+export { StatsOverviewWidget };
+
+//# sourceMappingURL=stats-overview.js.map

package/dist/components/widgets/stats-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-overview.js","names":[],"sources":["../../../src/components/widgets/stats-overview.tsx"],"sourcesContent":["import type { StatSchema, StatsOverviewWidgetSchema } from '@alfakit/core'\nimport { gridColumnsClasses, widgetPollTarget } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { useEffect } from 'react'\nimport { usePollComponent } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport {\n  colorClass,\n  cssColor,\n  iconBackgroundColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { useLiveUpdates } from '../realtime/live-records-pill'\nimport { Card } from '../ui/card'\n\nexport function StatsOverviewWidget({ widget }: { widget: StatsOverviewWidgetSchema }) {\n  const columns = widget.columns ?? {\n    default: 1,\n    md: Math.min(widget.stats.length, 2),\n    lg: Math.min(widget.stats.length, 4),\n  }\n\n  // Polls refresh only this widget, share one request with other components on the same\n  // interval and pause while the tab is hidden.\n  const pollTarget = widgetPollTarget(widget)\n  const pollComponent = usePollComponent()\n\n  useEffect(\n    () => pollComponent(pollTarget, widget.pollingInterval),\n    [pollComponent, pollTarget, widget.pollingInterval],\n  )\n\n  // `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\n  useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) })\n\n  return (\n    <section\n      className=\"flex flex-col gap-3\"\n      {...(widget.heading ? { 'aria-label': widget.heading } : {})}\n    >\n      {(widget.heading || widget.description) && (\n        <div>\n          {widget.heading && <h3 className=\"text-base font-semibold\">{widget.heading}</h3>}\n          {widget.description && (\n            <p className=\"text-muted-foreground text-sm\">{widget.description}</p>\n          )}\n        </div>\n      )}\n      <div className={cn('grid gap-4', gridColumnsClasses(columns))}>\n        {widget.stats.map((stat, index) => (\n          <StatCard key={index} stat={stat} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nfunction StatCard({ stat }: { stat: StatSchema }) {\n  const content = (\n    <Card\n      {...extraProps(\n        stat.extraAttributes,\n        cn(\n          'relative gap-2 overflow-hidden px-5 py-4',\n          stat.url && 'hover:bg-accent/40 transition-colors',\n        ),\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-muted-foreground text-sm font-medium\">{stat.label}</span>\n          {(stat.value === null || stat.value === '') && stat.placeholder ? (\n            <span\n              className=\"text-muted-foreground text-2xl font-semibold tracking-tight\"\n              data-slot=\"stat-placeholder\"\n            >\n              {stat.placeholder}\n            </span>\n          ) : (\n            <span\n              className={cn(\n                'text-2xl font-semibold tracking-tight',\n                stat.color && textColorClasses[stat.color],\n              )}\n            >\n              {stat.value}\n            </span>\n          )}\n          {stat.description && (\n            <span\n              className={cn(\n                'inline-flex items-center gap-1 text-xs',\n                stat.descriptionColor\n                  ? textColorClasses[stat.descriptionColor]\n                  : 'text-muted-foreground',\n              )}\n            >\n              {stat.descriptionIcon && stat.descriptionIconPosition !== 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n              {stat.description}\n              {stat.descriptionIcon && stat.descriptionIconPosition === 'after' && (\n                <Icon name={stat.descriptionIcon} className=\"size-3.5\" />\n              )}\n            </span>\n          )}\n        </div>\n        {stat.icon && (\n          <span\n            className={cn(\n              'flex size-9 shrink-0 items-center justify-center rounded-md',\n              colorClass(iconBackgroundColorClasses, stat.color, 'gray'),\n            )}\n          >\n            <Icon name={stat.icon} className=\"size-5\" />\n          </span>\n        )}\n      </div>\n      {stat.chart && stat.chart.length > 1 && (\n        <Sparkline data={stat.chart} color={cssColor(stat.chartColor ?? stat.color)} />\n      )}\n    </Card>\n  )\n\n  if (stat.url) {\n    return stat.openUrlInNewTab ? (\n      <a href={stat.url} target=\"_blank\" rel=\"noopener noreferrer\">\n        {content}\n        <NewTabHint />\n      </a>\n    ) : (\n      <Link href={stat.url}>{content}</Link>\n    )\n  }\n\n  return content\n}\n\nfunction Sparkline({ data, color }: { data: number[]; color: string }) {\n  const width = 200\n  const height = 40\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const points = data.map(\n    (value, index) =>\n      [\n        (index / (data.length - 1)) * width,\n        height - ((value - min) / range) * (height - 4) - 2,\n      ] as const,\n  )\n  const path = points\n    .map(([x, y], index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)\n    .join(' ')\n  const area = `${path} L${width},${height} L0,${height} Z`\n\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      className=\"mt-1 h-10 w-full\"\n      preserveAspectRatio=\"none\"\n      aria-hidden=\"true\"\n      data-slot=\"stat-chart\"\n    >\n      <path\n        d={area}\n        fill={color}\n        data-slot=\"stat-chart-area\"\n        style={{ opacity: 'var(--stat-chart-fill-opacity, 0.12)' }}\n      />\n      <path\n        d={path}\n        fill=\"none\"\n        stroke={color}\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        data-slot=\"stat-chart-line\"\n        style={{ strokeWidth: 'var(--stat-chart-stroke-width, 2)' }}\n      />\n    </svg>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/widgets-block.d.ts

@@ -0,0 +1,10 @@
+import { WidgetSchema, WidgetsBlock } from "@alfakit/core";
+//#region src/components/widgets/widgets-block.d.ts
+export declare function WidgetGrid({ block }: {
+  block: WidgetsBlock;
+}): import("react").JSX.Element;
+export declare function WidgetRenderer({ widget }: {
+  widget: WidgetSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=widgets-block.d.ts.map

package/dist/components/widgets/widgets-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-block.d.ts","names":["WidgetsBlockSchema"],"sources":["../../../src/components/widgets/widgets-block.tsx"],"mappings":";;wBA+BgB,aAAa;EAAW,OAAOA;oBAAoB,IAAA;wBA8BnD,iBAAiB;EAAY,QAAQ;oBAAc,IAAA"}

package/dist/components/widgets/widgets-block.js

@@ -0,0 +1,72 @@
+import { useRegistry, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { LazyPlaceholder } from "../panel/lazy-placeholder.js";
+import { Slot } from "../panel/slot.js";
+import { DataTable } from "../table/table-block.js";
+import { ChartWidget } from "./chart-lazy.js";
+import { StatsOverviewWidget } from "./stats-overview.js";
+import { columnSpanClasses, gridColumnsClasses, isLazyPlaceholder, resolveFirst, widgetRegistryKeys } from "@alfakit/core";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/widgets/widgets-block.tsx
+/**
+* `Dashboard::customizable()`: the grid with its "Edit dashboard" mode. The editor's code
+* loads with the first customizable dashboard; until then (and on the server) the widgets
+* show in the plain grid.
+*/
+const CustomizableWidgetGrid = lazyComponent(() => import("./dashboard-customizer.js").then((module) => module.CustomizableWidgetGrid), ({ block }) => /* @__PURE__ */ jsx(StaticWidgetGrid, { block }));
+function WidgetGrid({ block }) {
+	if (block.customize) return /* @__PURE__ */ jsx(CustomizableWidgetGrid, {
+		block,
+		customize: block.customize,
+		renderWidget: (widget) => /* @__PURE__ */ jsx(WidgetRenderer, { widget })
+	});
+	return /* @__PURE__ */ jsx(StaticWidgetGrid, { block });
+}
+function StaticWidgetGrid({ block }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "widgets",
+		className: cn("grid gap-6", gridColumnsClasses(block.columns)),
+		children: block.widgets.map((widget) => /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", columnSpanClasses(widget.columnSpan)),
+			children: isLazyPlaceholder(widget) ? /* @__PURE__ */ jsx(LazyPlaceholder, { variant: widget.type === "TableWidget" ? "table" : "widget" }) : /* @__PURE__ */ jsx(WidgetRenderer, { widget })
+		}, widget.key))
+	});
+}
+function WidgetRenderer({ widget }) {
+	const registry = useRegistry();
+	const t = useT();
+	const Custom = resolveFirst(registry, widgetRegistryKeys(widget));
+	if (Custom) return createElement(Custom, {
+		...widget.type === "View" ? widget.props ?? {} : {},
+		widget
+	});
+	switch (widget.type) {
+		case "StatsOverviewWidget": return /* @__PURE__ */ jsx(StatsOverviewWidget, { widget });
+		case "Chart": return /* @__PURE__ */ jsx(ChartWidget, { widget });
+		case "TableWidget": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table-widget.start",
+				scope: widget.component
+			}),
+			/* @__PURE__ */ jsx(DataTable, {
+				table: widget.table,
+				component: widget.component
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table-widget.end",
+				scope: widget.component
+			})
+		] });
+		case "View": return /* @__PURE__ */ jsx("div", {
+			className: "text-destructive rounded-md border border-dashed p-3 text-xs",
+			children: t("widget_not_registered", { component: widget.component }, "Widget component :component is not registered.")
+		});
+		default: return null;
+	}
+}
+//#endregion
+export { WidgetGrid, WidgetRenderer };
+
+//# sourceMappingURL=widgets-block.js.map

package/dist/components/widgets/widgets-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-block.js","names":[],"sources":["../../../src/components/widgets/widgets-block.tsx"],"sourcesContent":["import type { WidgetSchema, WidgetsBlock as WidgetsBlockSchema } from '@alfakit/core'\nimport {\n  columnSpanClasses,\n  gridColumnsClasses,\n  isLazyPlaceholder,\n  resolveFirst,\n  widgetRegistryKeys,\n} from '@alfakit/core'\nimport { createElement, type ComponentProps } from 'react'\nimport { useRegistry, useT } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\nimport { cn } from '../../lib/utils'\nimport { LazyPlaceholder } from '../panel/lazy-placeholder'\nimport { Slot } from '../panel/slot'\nimport { DataTable } from '../table/table-block'\nimport { ChartWidget } from './chart-lazy'\nimport type { CustomizableWidgetGrid as CustomizableWidgetGridComponent } from './dashboard-customizer'\nimport { StatsOverviewWidget } from './stats-overview'\n\n/**\n * `Dashboard::customizable()`: the grid with its \"Edit dashboard\" mode. The editor's code\n * loads with the first customizable dashboard; until then (and on the server) the widgets\n * show in the plain grid.\n */\nconst CustomizableWidgetGrid = lazyComponent<\n  ComponentProps<typeof CustomizableWidgetGridComponent>\n>(\n  () => import('./dashboard-customizer').then((module) => module.CustomizableWidgetGrid),\n  ({ block }) => <StaticWidgetGrid block={block} />,\n)\n\nexport function WidgetGrid({ block }: { block: WidgetsBlockSchema }) {\n  if (block.customize) {\n    return (\n      <CustomizableWidgetGrid\n        block={block}\n        customize={block.customize}\n        renderWidget={(widget) => <WidgetRenderer widget={widget} />}\n      />\n    )\n  }\n\n  return <StaticWidgetGrid block={block} />\n}\n\nfunction StaticWidgetGrid({ block }: { block: WidgetsBlockSchema }) {\n  return (\n    <div data-slot=\"widgets\" className={cn('grid gap-6', gridColumnsClasses(block.columns))}>\n      {block.widgets.map((widget) => (\n        <div key={widget.key} className={cn('min-w-0', columnSpanClasses(widget.columnSpan))}>\n          {isLazyPlaceholder(widget) ? (\n            <LazyPlaceholder variant={widget.type === 'TableWidget' ? 'table' : 'widget'} />\n          ) : (\n            <WidgetRenderer widget={widget} />\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function WidgetRenderer({ widget }: { widget: WidgetSchema }) {\n  const registry = useRegistry()\n  const t = useT()\n  // Registered components win over the built-in renderers: `Widget::$component`,\n  // then `widget:<type>` (e.g. `widget:Chart`), then a custom widget's own type.\n  const Custom = resolveFirst(registry, widgetRegistryKeys(widget))\n\n  if (Custom) {\n    return createElement(Custom, {\n      ...(widget.type === 'View' ? (widget.props ?? {}) : {}),\n      widget,\n    })\n  }\n\n  switch (widget.type) {\n    case 'StatsOverviewWidget':\n      return <StatsOverviewWidget widget={widget} />\n    case 'Chart':\n      return <ChartWidget widget={widget} />\n    case 'TableWidget':\n      return (\n        <>\n          <Slot name=\"table-widget.start\" scope={widget.component} />\n          <DataTable table={widget.table} component={widget.component} />\n          <Slot name=\"table-widget.end\" scope={widget.component} />\n        </>\n      )\n    case 'View':\n      return (\n        <div className=\"text-destructive rounded-md border border-dashed p-3 text-xs\">\n          {t(\n            'widget_not_registered',\n            { component: widget.component },\n            'Widget component :component is not registered.',\n          )}\n        </div>\n      )\n    default:\n      return null\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,yBAAyB,oBAGvB,OAAO,4BAAyB,CAAC,MAAM,WAAW,OAAO,sBAAsB,IACpF,EAAE,YAAY,oBAAC,kBAAD,EAAyB,MAAQ,CAAA,CAClD;AAEA,SAAgB,WAAW,EAAE,SAAwC;CACnE,IAAI,MAAM,WACR,OACE,oBAAC,wBAAD;EACS;EACP,WAAW,MAAM;EACjB,eAAe,WAAW,oBAAC,gBAAD,EAAwB,OAAS,CAAA;CAC5D,CAAA;CAIL,OAAO,oBAAC,kBAAD,EAAyB,MAAQ,CAAA;AAC1C;AAEA,SAAS,iBAAiB,EAAE,SAAwC;CAClE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAU,WAAW,GAAG,cAAc,mBAAmB,MAAM,OAAO,CAAC;EACnF,UAAA,MAAM,QAAQ,KAAK,WAClB,oBAAC,OAAD;GAAsB,WAAW,GAAG,WAAW,kBAAkB,OAAO,UAAU,CAAC;GAChF,UAAA,kBAAkB,MAAM,IACvB,oBAAC,iBAAD,EAAiB,SAAS,OAAO,SAAS,gBAAgB,UAAU,SAAW,CAAA,IAE/E,oBAAC,gBAAD,EAAwB,OAAS,CAAA;EAEhC,GANK,OAAO,GAMZ,CACN;CACE,CAAA;AAET;AAEA,SAAgB,eAAe,EAAE,UAAoC;CACnE,MAAM,WAAW,YAAY;CAC7B,MAAM,IAAI,KAAK;CAGf,MAAM,SAAS,aAAa,UAAU,mBAAmB,MAAM,CAAC;CAEhE,IAAI,QACF,OAAO,cAAc,QAAQ;EAC3B,GAAI,OAAO,SAAS,SAAU,OAAO,SAAS,CAAC,IAAK,CAAC;EACrD;CACF,CAAC;CAGH,QAAQ,OAAO,MAAf;EACE,KAAK,uBACH,OAAO,oBAAC,qBAAD,EAA6B,OAAS,CAAA;EAC/C,KAAK,SACH,OAAO,oBAAC,aAAD,EAAqB,OAAS,CAAA;EACvC,KAAK,eACH,OACE,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,MAAD;IAAM,MAAK;IAAqB,OAAO,OAAO;GAAY,CAAA;GAC1D,oBAAC,WAAD;IAAW,OAAO,OAAO;IAAO,WAAW,OAAO;GAAY,CAAA;GAC9D,oBAAC,MAAD;IAAM,MAAK;IAAmB,OAAO,OAAO;GAAY,CAAA;EACxD,EAAA,CAAA;EAEN,KAAK,QACH,OACE,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,EACC,yBACA,EAAE,WAAW,OAAO,UAAU,GAC9B,gDACF;EACG,CAAA;EAET,SACE,OAAO;CACX;AACF"}

package/dist/context.d.ts

@@ -0,0 +1,55 @@
+import { ActionRunner, AlfakitPageProps, ComponentRegistry, LocaleFormatter, LocalizationSchema, PageSchema, PanelSchema, Translator } from "@alfakit/core";
+import { ComponentType, ReactNode } from "react";
+//#region src/context.d.ts
+export type AnyComponent = ComponentType<any>;
+export interface AlfakitContextValue {
+  registry: ComponentRegistry<AnyComponent>;
+  pages: Record<string, AnyComponent>;
+  actions: ActionRunner;
+  translator: Translator;
+  /**
+   * Polls a component (`table`, `widget:<id>`) and returns an unsubscribe. Panels use the
+   * shared `pollComponent()` (an Inertia partial reload); components outside panels fetch
+   * their own schemas by token.
+   */
+  poll?: (target: string, interval: string | number | null | undefined) => () => void;
+}
+/**
+ * Outside panels there is no shared `alfakit` prop and no `page` prop: `<AlfakitComponent>`
+ * provides both from its payload, and the hooks below read them first.
+ */
+export interface StandaloneContextValue {
+  panel: PanelSchema;
+  page: PageSchema;
+}
+export declare function StandaloneProvider({ value, children }: {
+  value: StandaloneContextValue;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useStandalone(): StandaloneContextValue | null;
+export declare function AlfakitProvider({ value, children }: {
+  value: AlfakitContextValue;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useAlfakit(): AlfakitContextValue;
+/** The context the component renders in, or null outside `createAlfakit()` and `<AlfakitComponent>`. */
+export declare function useOptionalAlfakit(): AlfakitContextValue | null;
+/** The shared `alfakit` prop (panel, navigation, user, endpoints…). */
+export declare function usePanel(): PanelSchema;
+export declare function usePageSchema(): PageSchema | undefined;
+/** Poll a component (`table`, `widget:<id>`); the returned function stops it. */
+export declare function usePollComponent(): NonNullable<AlfakitContextValue['poll']>;
+export declare function useAlfakitProps(): AlfakitPageProps;
+/** `t('table.showing', { first: 1, last: 10, total: 42 }, 'Fallback')` */
+export declare function useT(): Translator['t'];
+/** Plural-aware lines: `choice('table.selected', 3)` (Laravel `trans_choice` syntax). */
+export declare function useChoice(): Translator['choice'];
+/** The current language, direction, currency, timezone and language list. */
+export declare function useLocalization(): LocalizationSchema;
+export declare function useDirection(): 'ltr' | 'rtl';
+/** `Intl` formatting in the user's locale: `format.money(12.5)`, `format.relative(date)`. */
+export declare function useFormatter(): LocaleFormatter;
+export declare function useActionRunner(): ActionRunner;
+export declare function useRegistry(): ComponentRegistry<AnyComponent>;
+//#endregion
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +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"}