@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/widgets/value-widget.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/value-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAuBA;AAkCwB,UAlCP,gBAAA,CAkCkB;EAAG,MAAA,EAjC5B,iBAiC4B;;;;;;;;;;;;;;;;;;;;;;iBAAd,WAAA;;GAAwB,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/client/components/widgets/value-widget.mjs

@@ -0,0 +1,111 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
+import { ValueWidgetSkeleton } from "./widget-skeletons.mjs";
+import { useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/value-widget.tsx
+/**
+* Value Widget
+*
+* Flexible widget with async data fetching and full Tailwind customization.
+* Uses WidgetCard for consistent styling while allowing custom classNames.
+*/
+/**
+* Format value for display
+*/
+function formatValue(value) {
+	if (typeof value === "number") return value.toLocaleString();
+	return value;
+}
+/**
+* Value Widget Component
+*
+* Fetches data via async function and renders with full customization.
+*
+* @example
+* ```tsx
+* <ValueWidget
+*   config={{
+*     type: "value",
+*     id: "total-revenue",
+*     fetchFn: async (client) => ({
+*       value: 42,
+*       label: "Total",
+*       classNames: { root: "bg-blue-50" },
+*     }),
+*   }}
+* />
+* ```
+*/
+function ValueWidget({ config }) {
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const useServerData = !!config.hasFetchFn;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: useServerData,
+		refreshInterval: config.refreshInterval
+	});
+	const clientQuery = useQuery({
+		queryKey: [
+			"widget",
+			"value",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		enabled: !useServerData && !!config.fetchFn,
+		refetchInterval: config.refreshInterval
+	});
+	const { data, isLoading, error, refetch, isFetching } = useServerData ? serverQuery : clientQuery;
+	const isFeatured = config.cardVariant === "featured";
+	if (isLoading || error || !data) return /* @__PURE__ */ jsx(WidgetCard, {
+		title: config.title ? resolveText(config.title) : void 0,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ValueWidgetSkeleton, { featured: isFeatured }),
+		error: error instanceof Error ? error : !data && !isLoading ? /* @__PURE__ */ new Error("No data returned") : null,
+		onRefresh: () => refetch(),
+		className: data?.classNames?.root
+	});
+	const cls = data.classNames ?? {};
+	const Icon = data.icon;
+	const TrendIcon = data.trend?.icon;
+	const label = data.label ? resolveText(data.label) : void 0;
+	const subtitle = data.subtitle ? resolveText(data.subtitle) : void 0;
+	const footer = data.footer ? resolveText(data.footer) : void 0;
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: label,
+		icon: Icon,
+		onRefresh: () => refetch(),
+		isRefreshing: isFetching && !isLoading,
+		className: cls.root,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", cls.content),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("text-2xl font-bold", cls.value),
+					children: data.formatted ?? formatValue(data.value)
+				}),
+				data.trend && /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-1 text-sm", cls.trend),
+					children: [resolveIconElement(TrendIcon, { className: cn("h-3 w-3", cls.trendIcon) }), /* @__PURE__ */ jsx("span", { children: data.trend.value })]
+				}),
+				subtitle && /* @__PURE__ */ jsx("p", {
+					className: cn("text-xs text-muted-foreground", cls.subtitle),
+					children: subtitle
+				}),
+				footer && /* @__PURE__ */ jsx("p", {
+					className: cn("text-xs text-muted-foreground pt-2", cls.footer),
+					children: footer
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { ValueWidget as default };
+//# sourceMappingURL=value-widget.mjs.map

package/dist/client/components/widgets/value-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-widget.mjs","names":[],"sources":["../../../../src/client/components/widgets/value-widget.tsx"],"sourcesContent":["/**\n * Value Widget\n *\n * Flexible widget with async data fetching and full Tailwind customization.\n * Uses WidgetCard for consistent styling while allowing custom classNames.\n */\n\nimport { useQuery } from \"@tanstack/react-query\";\nimport type {\n  ValueWidgetConfig,\n  ValueWidgetResult,\n} from \"../../builder/types/widget-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { useServerWidgetData } from \"../../hooks/use-server-widget-data\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectClient, useAdminStore } from \"../../runtime\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { ValueWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Value widget props\n */\nexport interface ValueWidgetProps {\n  config: ValueWidgetConfig;\n}\n\n/**\n * Format value for display\n */\nfunction formatValue(value: number | string): string {\n  if (typeof value === \"number\") {\n    return value.toLocaleString();\n  }\n  return value;\n}\n\n/**\n * Value Widget Component\n *\n * Fetches data via async function and renders with full customization.\n *\n * @example\n * ```tsx\n * <ValueWidget\n *   config={{\n *     type: \"value\",\n *     id: \"total-revenue\",\n *     fetchFn: async (client) => ({\n *       value: 42,\n *       label: \"Total\",\n *       classNames: { root: \"bg-blue-50\" },\n *     }),\n *   }}\n * />\n * ```\n */\nexport default function ValueWidget({ config }: ValueWidgetProps) {\n  const client = useAdminStore(selectClient);\n  const resolveText = useResolveText();\n\n  const useServerData = !!config.hasFetchFn;\n  const serverQuery = useServerWidgetData<ValueWidgetResult>(config.id, {\n    enabled: useServerData,\n    refreshInterval: config.refreshInterval,\n  });\n  const clientQuery = useQuery<ValueWidgetResult>({\n    queryKey: [\"widget\", \"value\", config.id],\n    queryFn: () => config.fetchFn!(client),\n    enabled: !useServerData && !!config.fetchFn,\n    refetchInterval: config.refreshInterval,\n  });\n  const { data, isLoading, error, refetch, isFetching } = useServerData\n    ? serverQuery\n    : clientQuery;\n\n  // Determine if this is a featured variant based on config\n  const isFeatured = config.cardVariant === \"featured\";\n\n  // Handle loading/error via WidgetCard\n  if (isLoading || error || !data) {\n    return (\n      <WidgetCard\n        title={config.title ? resolveText(config.title) : undefined}\n        isLoading={isLoading}\n        loadingSkeleton={<ValueWidgetSkeleton featured={isFeatured} />}\n        error={\n          error instanceof Error\n            ? error\n            : !data && !isLoading\n              ? new Error(\"No data returned\")\n              : null\n        }\n        onRefresh={() => refetch()}\n        className={data?.classNames?.root}\n      />\n    );\n  }\n\n  const cls = data.classNames ?? {};\n  const Icon = data.icon;\n  const TrendIcon = data.trend?.icon;\n\n  // Resolve all text fields (supports both string and i18n objects)\n  const label = data.label ? resolveText(data.label) : undefined;\n  const subtitle = data.subtitle ? resolveText(data.subtitle) : undefined;\n  const footer = data.footer ? resolveText(data.footer) : undefined;\n\n  return (\n    <WidgetCard\n      title={label}\n      icon={Icon}\n      onRefresh={() => refetch()}\n      isRefreshing={isFetching && !isLoading}\n      className={cls.root}\n    >\n      <div className={cn(\"space-y-1\", cls.content)}>\n        {/* Main value */}\n        <div className={cn(\"text-2xl font-bold\", cls.value)}>\n          {data.formatted ?? formatValue(data.value)}\n        </div>\n\n        {/* Trend indicator */}\n        {data.trend && (\n          <div className={cn(\"flex items-center gap-1 text-sm\", cls.trend)}>\n            {resolveIconElement(TrendIcon, {\n              className: cn(\"h-3 w-3\", cls.trendIcon),\n            })}\n            <span>{data.trend.value}</span>\n          </div>\n        )}\n\n        {/* Subtitle */}\n        {subtitle && (\n          <p className={cn(\"text-xs text-muted-foreground\", cls.subtitle)}>\n            {subtitle}\n          </p>\n        )}\n\n        {/* Footer */}\n        {footer && (\n          <p className={cn(\"text-xs text-muted-foreground pt-2\", cls.footer)}>\n            {footer}\n          </p>\n        )}\n      </div>\n    </WidgetCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,SAAS,YAAY,OAAgC;AACnD,KAAI,OAAO,UAAU,SACnB,QAAO,MAAM,gBAAgB;AAE/B,QAAO;;;;;;;;;;;;;;;;;;;;;;AAuBT,SAAwB,YAAY,EAAE,UAA4B;CAChE,MAAM,SAAS,cAAc,aAAa;CAC1C,MAAM,cAAc,gBAAgB;CAEpC,MAAM,gBAAgB,CAAC,CAAC,OAAO;CAC/B,MAAM,cAAc,oBAAuC,OAAO,IAAI;EACpE,SAAS;EACT,iBAAiB,OAAO;EACzB,CAAC;CACF,MAAM,cAAc,SAA4B;EAC9C,UAAU;GAAC;GAAU;GAAS,OAAO;GAAG;EACxC,eAAe,OAAO,QAAS,OAAO;EACtC,SAAS,CAAC,iBAAiB,CAAC,CAAC,OAAO;EACpC,iBAAiB,OAAO;EACzB,CAAC;CACF,MAAM,EAAE,MAAM,WAAW,OAAO,SAAS,eAAe,gBACpD,cACA;CAGJ,MAAM,aAAa,OAAO,gBAAgB;AAG1C,KAAI,aAAa,SAAS,CAAC,KACzB,QACE,oBAAC;EACC,OAAO,OAAO,QAAQ,YAAY,OAAO,MAAM,GAAG;EACvC;EACX,iBAAiB,oBAAC,uBAAoB,UAAU,aAAc;EAC9D,OACE,iBAAiB,QACb,QACA,CAAC,QAAQ,CAAC,4BACR,IAAI,MAAM,mBAAmB,GAC7B;EAER,iBAAiB,SAAS;EAC1B,WAAW,MAAM,YAAY;GAC7B;CAIN,MAAM,MAAM,KAAK,cAAc,EAAE;CACjC,MAAM,OAAO,KAAK;CAClB,MAAM,YAAY,KAAK,OAAO;CAG9B,MAAM,QAAQ,KAAK,QAAQ,YAAY,KAAK,MAAM,GAAG;CACrD,MAAM,WAAW,KAAK,WAAW,YAAY,KAAK,SAAS,GAAG;CAC9D,MAAM,SAAS,KAAK,SAAS,YAAY,KAAK,OAAO,GAAG;AAExD,QACE,oBAAC;EACC,OAAO;EACP,MAAM;EACN,iBAAiB,SAAS;EAC1B,cAAc,cAAc,CAAC;EAC7B,WAAW,IAAI;YAEf,qBAAC;GAAI,WAAW,GAAG,aAAa,IAAI,QAAQ;;IAE1C,oBAAC;KAAI,WAAW,GAAG,sBAAsB,IAAI,MAAM;eAChD,KAAK,aAAa,YAAY,KAAK,MAAM;MACtC;IAGL,KAAK,SACJ,qBAAC;KAAI,WAAW,GAAG,mCAAmC,IAAI,MAAM;gBAC7D,mBAAmB,WAAW,EAC7B,WAAW,GAAG,WAAW,IAAI,UAAU,EACxC,CAAC,EACF,oBAAC,oBAAM,KAAK,MAAM,QAAa;MAC3B;IAIP,YACC,oBAAC;KAAE,WAAW,GAAG,iCAAiC,IAAI,SAAS;eAC5D;MACC;IAIL,UACC,oBAAC;KAAE,WAAW,GAAG,sCAAsC,IAAI,OAAO;eAC/D;MACC;;IAEF;GACK"}

package/dist/client/components/widgets/widget-skeletons.mjs

@@ -0,0 +1,145 @@
+import { cn } from "../../lib/utils.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/widget-skeletons.tsx
+/**
+* Widget Skeletons
+*
+* Loading skeleton components for different widget types.
+* Provides visual feedback while data is being fetched.
+*/
+function StatsWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })]
+	});
+}
+function ChartWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-48 w-full flex items-end gap-2 pt-4",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[40%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[65%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[45%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[80%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[55%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[70%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[50%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[75%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[60%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[85%]" })
+		]
+	});
+}
+function RecentItemsWidgetSkeleton({ count = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 1 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 2 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 3 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 4 && /* @__PURE__ */ jsx(SkeletonRow, {})
+		]
+	});
+}
+function SkeletonRow() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-3 p-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })]
+		})
+	});
+}
+function TableWidgetSkeleton({ rows = 5, columns = 3 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "-mx-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-4 px-5 py-2 border-b border-border/50",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+					columns > 1 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }),
+					columns > 2 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
+				]
+			}),
+			/* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 1 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 2 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 3 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 4 && /* @__PURE__ */ jsx(TableSkeletonRow, {
+				columns,
+				last: true
+			})
+		]
+	});
+}
+function TableSkeletonRow({ columns = 3, last = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-4 px-5 py-3 border-b border-border/30", last && "border-0"),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+			columns > 1 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }),
+			columns > 2 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
+		]
+	});
+}
+function TimelineWidgetSkeleton({ count = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 1 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 2 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 3 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 4 && /* @__PURE__ */ jsx(TimelineSkeletonItem, { last: true })
+		]
+	});
+}
+function TimelineSkeletonItem({ last = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 rounded-full" }), !last && /* @__PURE__ */ jsx(Skeleton, { className: "w-0.5 flex-1 mt-1" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-1 pb-4",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+			]
+		})]
+	});
+}
+function ProgressWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-center",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" })]
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-full rounded-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+		]
+	});
+}
+function ValueWidgetSkeleton({ featured = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-md shrink-0" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: cn("h-8", featured ? "w-40" : "w-24") })]
+			})]
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" })]
+	});
+}
+
+//#endregion
+export { ChartWidgetSkeleton, ProgressWidgetSkeleton, RecentItemsWidgetSkeleton, StatsWidgetSkeleton, TableWidgetSkeleton, TimelineWidgetSkeleton, ValueWidgetSkeleton };
+//# sourceMappingURL=widget-skeletons.mjs.map

package/dist/client/components/widgets/widget-skeletons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-skeletons.mjs","names":[],"sources":["../../../../src/client/components/widgets/widget-skeletons.tsx"],"sourcesContent":["/**\n * Widget Skeletons\n *\n * Loading skeleton components for different widget types.\n * Provides visual feedback while data is being fetched.\n */\n\nimport { cn } from \"../../lib/utils\";\nimport { Skeleton } from \"../ui/skeleton\";\n\n// ============================================================================\n// Stats Widget Skeleton\n// ============================================================================\n\nexport function StatsWidgetSkeleton() {\n  return (\n    <div className=\"space-y-3\">\n      <Skeleton className=\"h-8 w-20\" />\n      <Skeleton className=\"h-4 w-32\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Chart Widget Skeleton\n// ============================================================================\n\nexport function ChartWidgetSkeleton() {\n  return (\n    <div className=\"h-48 w-full flex items-end gap-2 pt-4\">\n      {/* Bar chart style skeleton */}\n      <Skeleton className=\"flex-1 rounded-t h-[40%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[65%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[45%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[80%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[55%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[70%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[50%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[75%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[60%]\" />\n      <Skeleton className=\"flex-1 rounded-t h-[85%]\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Recent Items Widget Skeleton\n// ============================================================================\n\nexport function RecentItemsWidgetSkeleton({ count = 5 }: { count?: number }) {\n  return (\n    <div className=\"space-y-1\">\n      <SkeletonRow />\n      {count > 1 && <SkeletonRow />}\n      {count > 2 && <SkeletonRow />}\n      {count > 3 && <SkeletonRow />}\n      {count > 4 && <SkeletonRow />}\n    </div>\n  );\n}\n\nfunction SkeletonRow() {\n  return (\n    <div className=\"flex items-center gap-3 p-2\">\n      <div className=\"flex-1 space-y-2\">\n        <Skeleton className=\"h-4 w-3/4\" />\n        <Skeleton className=\"h-3 w-1/2\" />\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Quick Actions Widget Skeleton\n// ============================================================================\n\nexport function QuickActionsWidgetSkeleton({\n  count = 3,\n  layout = \"list\",\n}: {\n  count?: number;\n  layout?: \"list\" | \"grid\";\n}) {\n  if (layout === \"grid\") {\n    return (\n      <div className=\"grid grid-cols-2 gap-2\">\n        <ActionGridItem />\n        {count > 1 && <ActionGridItem />}\n        {count > 2 && <ActionGridItem />}\n        {count > 3 && <ActionGridItem />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-1 -mx-1\">\n      <ActionListItem />\n      {count > 1 && <ActionListItem />}\n      {count > 2 && <ActionListItem />}\n    </div>\n  );\n}\n\nfunction ActionGridItem() {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-2 p-3\">\n      <Skeleton className=\"h-9 w-9 rounded-md\" />\n      <Skeleton className=\"h-3 w-16\" />\n    </div>\n  );\n}\n\nfunction ActionListItem() {\n  return (\n    <div className=\"flex items-center gap-3 px-2 py-2\">\n      <Skeleton className=\"h-8 w-8 rounded-md shrink-0\" />\n      <Skeleton className=\"h-4 flex-1\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Table Widget Skeleton\n// ============================================================================\n\nexport function TableWidgetSkeleton({\n  rows = 5,\n  columns = 3,\n}: {\n  rows?: number;\n  columns?: number;\n}) {\n  return (\n    <div className=\"-mx-5\">\n      {/* Header */}\n      <div className=\"flex gap-4 px-5 py-2 border-b border-border/50\">\n        <Skeleton className=\"h-4 w-24\" />\n        {columns > 1 && <Skeleton className=\"h-4 flex-1\" />}\n        {columns > 2 && <Skeleton className=\"h-4 flex-1\" />}\n      </div>\n      {/* Rows */}\n      <TableSkeletonRow columns={columns} />\n      {rows > 1 && <TableSkeletonRow columns={columns} />}\n      {rows > 2 && <TableSkeletonRow columns={columns} />}\n      {rows > 3 && <TableSkeletonRow columns={columns} />}\n      {rows > 4 && <TableSkeletonRow columns={columns} last />}\n    </div>\n  );\n}\n\nfunction TableSkeletonRow({\n  columns = 3,\n  last = false,\n}: {\n  columns?: number;\n  last?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex gap-4 px-5 py-3 border-b border-border/30\",\n        last && \"border-0\",\n      )}\n    >\n      <Skeleton className=\"h-4 w-20\" />\n      {columns > 1 && <Skeleton className=\"h-4 flex-1\" />}\n      {columns > 2 && <Skeleton className=\"h-4 flex-1\" />}\n    </div>\n  );\n}\n\n// ============================================================================\n// Timeline Widget Skeleton\n// ============================================================================\n\nexport function TimelineWidgetSkeleton({ count = 5 }: { count?: number }) {\n  return (\n    <div className=\"space-y-4\">\n      <TimelineSkeletonItem />\n      {count > 1 && <TimelineSkeletonItem />}\n      {count > 2 && <TimelineSkeletonItem />}\n      {count > 3 && <TimelineSkeletonItem />}\n      {count > 4 && <TimelineSkeletonItem last />}\n    </div>\n  );\n}\n\nfunction TimelineSkeletonItem({ last = false }: { last?: boolean }) {\n  return (\n    <div className=\"flex gap-3\">\n      {/* Timeline dot */}\n      <div className=\"flex flex-col items-center\">\n        <Skeleton className=\"h-3 w-3 rounded-full\" />\n        {!last && <Skeleton className=\"w-0.5 flex-1 mt-1\" />}\n      </div>\n      {/* Content */}\n      <div className=\"flex-1 space-y-1 pb-4\">\n        <Skeleton className=\"h-4 w-3/4\" />\n        <Skeleton className=\"h-3 w-1/2\" />\n        <Skeleton className=\"h-3 w-20\" />\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Progress Widget Skeleton\n// ============================================================================\n\nexport function ProgressWidgetSkeleton() {\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex justify-between items-center\">\n        <Skeleton className=\"h-4 w-32\" />\n        <Skeleton className=\"h-4 w-12\" />\n      </div>\n      <Skeleton className=\"h-2 w-full rounded-full\" />\n      <Skeleton className=\"h-3 w-24\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Value Widget Skeleton\n// ============================================================================\n\nexport function ValueWidgetSkeleton({\n  featured = false,\n}: {\n  featured?: boolean;\n}) {\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-start gap-3\">\n        <Skeleton className=\"h-10 w-10 rounded-md shrink-0\" />\n        <div className=\"flex-1 space-y-2\">\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className={cn(\"h-8\", featured ? \"w-40\" : \"w-24\")} />\n        </div>\n      </div>\n      <Skeleton className=\"h-3 w-32\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Generic Widget Skeleton\n// ============================================================================\n\nexport function GenericWidgetSkeleton() {\n  return (\n    <div className=\"space-y-4\">\n      <Skeleton className=\"h-20 w-full\" />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/context/focus-context.d.mts

@@ -0,0 +1,88 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+
+//#region src/client/context/focus-context.d.ts
+
+/**
+ * Focus state types:
+ * - idle: nothing focused
+ * - field: regular field focused (e.g., "title", "slug")
+ * - block: block field focused, optionally with specific field within block
+ * - relation: relation field focused (opens ResourceSheet for editing)
+ */
+type FocusState = {
+  type: "idle";
+} | {
+  type: "field";
+  fieldPath: string;
+} | {
+  type: "block";
+  blockId: string;
+  fieldPath?: string;
+} | {
+  type: "relation";
+  fieldPath: string;
+  targetCollection?: string;
+};
+type FocusContextValue = {
+  /** Current focus state */
+  state: FocusState;
+  /** Focus a regular field by path */
+  focusField: (fieldPath: string) => void;
+  /** Focus a block, optionally a specific field within it */
+  focusBlock: (blockId: string, fieldPath?: string) => void;
+  /** Focus a relation field (opens ResourceSheet) */
+  focusRelation: (fieldPath: string, targetCollection?: string) => void;
+  /** Clear focus */
+  clearFocus: () => void;
+  /** Check if a field is focused */
+  isFieldFocused: (fieldPath: string) => boolean;
+  /** Check if a block is focused */
+  isBlockFocused: (blockId: string) => boolean;
+};
+type FocusProviderProps = {
+  children: React$1.ReactNode;
+  /** Callback when focus changes - useful for scrolling to field */
+  onFocusChange?: (state: FocusState) => void;
+};
+declare function FocusProvider({
+  children,
+  onFocusChange
+}: FocusProviderProps): react_jsx_runtime20.JSX.Element;
+/**
+ * Use the focus context
+ */
+declare function useFocus(): FocusContextValue;
+/**
+ * Use focus context if available (doesn't throw)
+ */
+declare function useFocusOptional(): FocusContextValue | null;
+/**
+ * Hook for checking if a specific field is focused
+ */
+declare function useIsFieldFocused(fieldPath: string): boolean;
+/**
+ * Hook for checking if a specific block is focused
+ */
+declare function useIsBlockFocused(blockId: string): boolean;
+/**
+ * Parse a preview field path into focus state with optional context hints
+ * Examples:
+ * - "title" → { type: "field", fieldPath: "title" }
+ * - "content._values.abc123.title" → { type: "block", blockId: "abc123", fieldPath: "title" }
+ * - "author" + { fieldType: "relation" } → { type: "relation", fieldPath: "author" }
+ * - "title" + { blockId: "abc123" } → { type: "block", blockId: "abc123", fieldPath: "title" }
+ */
+declare function parsePreviewFieldPath(path: string, context?: {
+  blockId?: string;
+  fieldType?: "regular" | "block" | "relation";
+  targetCollection?: string;
+}): FocusState;
+/**
+ * Scroll a field into view and focus it.
+ * Finds the field wrapper by data-field-path within the preview form scope.
+ */
+declare function scrollFieldIntoView(fieldPath: string): void;
+//#endregion
+export { FocusContextValue, FocusProvider, FocusProviderProps, FocusState, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused };
+//# sourceMappingURL=focus-context.d.mts.map

package/dist/client/context/focus-context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-context.d.mts","names":[],"sources":["../../../src/client/context/focus-context.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AA6IA;AAWA;AAOgB,KAxIJ,UAAA,GAwIqB;EASjB,IAAA,EAAA,MAAA;AAkBhB,CAAA,GAAgB;EAgEA,IAAA,EAAA,OAAA;;;;;;;;;;;KA7NJ,iBAAA;;SAEH;;;;;;;;;;;;;;KAyBG,kBAAA;YACA,OAAA,CAAM;;0BAEQ;;iBAGV,aAAA;;;GAA2C,qBAAkB,mBAAA,CAAA,GAAA,CAAA;;;;iBA+E7D,QAAA,CAAA,GAAY;;;;iBAWZ,gBAAA,CAAA,GAAoB;;;;iBAOpB,iBAAA;;;;iBASA,iBAAA;;;;;;;;;iBAkBA,qBAAA;;;;IAOb;;;;;iBAyDa,mBAAA"}

package/dist/client/context/focus-context.mjs

@@ -0,0 +1,178 @@
+"use client";
+
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/context/focus-context.tsx
+/**
+* Focus Context
+*
+* State machine for managing field focus across the form editor.
+* Supports focusing regular fields and nested block fields.
+* Used for preview click-to-focus functionality.
+*/
+const FocusContext = React$1.createContext(null);
+function FocusProvider({ children, onFocusChange }) {
+	const [state, setState] = React$1.useState({ type: "idle" });
+	const focusField = React$1.useCallback((fieldPath) => {
+		const newState = {
+			type: "field",
+			fieldPath
+		};
+		setState(newState);
+		onFocusChange?.(newState);
+	}, [onFocusChange]);
+	const focusBlock = React$1.useCallback((blockId, fieldPath) => {
+		const newState = {
+			type: "block",
+			blockId,
+			fieldPath
+		};
+		setState(newState);
+		onFocusChange?.(newState);
+	}, [onFocusChange]);
+	const focusRelation = React$1.useCallback((fieldPath, targetCollection) => {
+		const newState = {
+			type: "relation",
+			fieldPath,
+			targetCollection
+		};
+		setState(newState);
+		onFocusChange?.(newState);
+	}, [onFocusChange]);
+	const clearFocus = React$1.useCallback(() => {
+		const newState = { type: "idle" };
+		setState(newState);
+		onFocusChange?.(newState);
+	}, [onFocusChange]);
+	const focusedFieldPath = state.type === "field" ? state.fieldPath : void 0;
+	const focusedBlockId = state.type === "block" ? state.blockId : void 0;
+	const value = React$1.useMemo(() => ({
+		state,
+		focusField,
+		focusBlock,
+		focusRelation,
+		clearFocus,
+		isFieldFocused: (path) => focusedFieldPath === path,
+		isBlockFocused: (id) => focusedBlockId === id
+	}), [
+		state,
+		focusField,
+		focusBlock,
+		focusRelation,
+		clearFocus,
+		focusedFieldPath,
+		focusedBlockId
+	]);
+	return /* @__PURE__ */ jsx(FocusContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Use the focus context
+*/
+function useFocus() {
+	const context = React$1.useContext(FocusContext);
+	if (!context) throw new Error("useFocus must be used within a FocusProvider");
+	return context;
+}
+/**
+* Use focus context if available (doesn't throw)
+*/
+function useFocusOptional() {
+	return React$1.useContext(FocusContext);
+}
+/**
+* Hook for checking if a specific field is focused
+*/
+function useIsFieldFocused(fieldPath) {
+	const context = React$1.useContext(FocusContext);
+	if (!context) return false;
+	return context.isFieldFocused(fieldPath);
+}
+/**
+* Hook for checking if a specific block is focused
+*/
+function useIsBlockFocused(blockId) {
+	const context = React$1.useContext(FocusContext);
+	if (!context) return false;
+	return context.isBlockFocused(blockId);
+}
+/**
+* Parse a preview field path into focus state with optional context hints
+* Examples:
+* - "title" → { type: "field", fieldPath: "title" }
+* - "content._values.abc123.title" → { type: "block", blockId: "abc123", fieldPath: "title" }
+* - "author" + { fieldType: "relation" } → { type: "relation", fieldPath: "author" }
+* - "title" + { blockId: "abc123" } → { type: "block", blockId: "abc123", fieldPath: "title" }
+*/
+function parsePreviewFieldPath(path, context) {
+	if (context?.fieldType === "relation") return {
+		type: "relation",
+		fieldPath: path,
+		targetCollection: context.targetCollection
+	};
+	const blockMatch = path.match(/^content\._values\.([^.]+)(?:\.(.+))?$/);
+	if (blockMatch) {
+		const [, blockId, fieldPath] = blockMatch;
+		return {
+			type: "block",
+			blockId,
+			fieldPath
+		};
+	}
+	const legacyBlockMatch = path.match(/^content\.blocks\.([^.]+)(?:\.(.+))?$/);
+	if (legacyBlockMatch) {
+		const [, blockId, fieldPath] = legacyBlockMatch;
+		return {
+			type: "block",
+			blockId,
+			fieldPath
+		};
+	}
+	if (context?.blockId) {
+		const relativeField = extractRelativeField(path, context.blockId);
+		return {
+			type: "block",
+			blockId: context.blockId,
+			fieldPath: relativeField
+		};
+	}
+	return {
+		type: "field",
+		fieldPath: path
+	};
+}
+/**
+* Extract relative field path from a full path given a block ID
+* Examples:
+* - extractRelativeField("content._values.abc123.title", "abc123") → "title"
+* - extractRelativeField("title", "abc123") → "title"
+*/
+function extractRelativeField(path, blockId) {
+	const prefix = `content._values.${blockId}.`;
+	if (path.startsWith(prefix)) return path.slice(prefix.length);
+	return path;
+}
+/**
+* Scroll a field into view and focus it.
+* Finds the field wrapper by data-field-path within the preview form scope.
+*/
+function scrollFieldIntoView(fieldPath) {
+	const wrapper = (document.querySelector("[data-preview-form-scope]") ?? document).querySelector(`[data-field-path="${fieldPath}"]`);
+	if (!wrapper) return;
+	const focusable = wrapper.querySelector("input:not([type=\"hidden\"]), textarea, button, select, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]");
+	(focusable ?? wrapper).scrollIntoView({
+		behavior: "smooth",
+		block: "center"
+	});
+	if (focusable) requestAnimationFrame(() => {
+		window.focus();
+		focusable.focus();
+	});
+}
+
+//#endregion
+export { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused };
+//# sourceMappingURL=focus-context.mjs.map

package/dist/client/context/focus-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-context.mjs","names":["React","newState: FocusState"],"sources":["../../../src/client/context/focus-context.tsx"],"sourcesContent":["/**\n * Focus Context\n *\n * State machine for managing field focus across the form editor.\n * Supports focusing regular fields and nested block fields.\n * Used for preview click-to-focus functionality.\n */\n\n\"use client\";\n\nimport * as React from \"react\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Focus state types:\n * - idle: nothing focused\n * - field: regular field focused (e.g., \"title\", \"slug\")\n * - block: block field focused, optionally with specific field within block\n * - relation: relation field focused (opens ResourceSheet for editing)\n */\nexport type FocusState =\n  | { type: \"idle\" }\n  | { type: \"field\"; fieldPath: string }\n  | { type: \"block\"; blockId: string; fieldPath?: string }\n  | { type: \"relation\"; fieldPath: string; targetCollection?: string };\n\nexport type FocusContextValue = {\n  /** Current focus state */\n  state: FocusState;\n  /** Focus a regular field by path */\n  focusField: (fieldPath: string) => void;\n  /** Focus a block, optionally a specific field within it */\n  focusBlock: (blockId: string, fieldPath?: string) => void;\n  /** Focus a relation field (opens ResourceSheet) */\n  focusRelation: (fieldPath: string, targetCollection?: string) => void;\n  /** Clear focus */\n  clearFocus: () => void;\n  /** Check if a field is focused */\n  isFieldFocused: (fieldPath: string) => boolean;\n  /** Check if a block is focused */\n  isBlockFocused: (blockId: string) => boolean;\n};\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst FocusContext = React.createContext<FocusContextValue | null>(null);\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport type FocusProviderProps = {\n  children: React.ReactNode;\n  /** Callback when focus changes - useful for scrolling to field */\n  onFocusChange?: (state: FocusState) => void;\n};\n\nexport function FocusProvider({ children, onFocusChange }: FocusProviderProps) {\n  const [state, setState] = React.useState<FocusState>({ type: \"idle\" });\n\n  // Use functional setState for stable callbacks (React best practice)\n  const focusField = React.useCallback(\n    (fieldPath: string) => {\n      const newState: FocusState = { type: \"field\", fieldPath };\n      setState(newState);\n      onFocusChange?.(newState);\n    },\n    [onFocusChange],\n  );\n\n  const focusBlock = React.useCallback(\n    (blockId: string, fieldPath?: string) => {\n      const newState: FocusState = { type: \"block\", blockId, fieldPath };\n      setState(newState);\n      onFocusChange?.(newState);\n    },\n    [onFocusChange],\n  );\n\n  const focusRelation = React.useCallback(\n    (fieldPath: string, targetCollection?: string) => {\n      const newState: FocusState = {\n        type: \"relation\",\n        fieldPath,\n        targetCollection,\n      };\n      setState(newState);\n      onFocusChange?.(newState);\n    },\n    [onFocusChange],\n  );\n\n  const clearFocus = React.useCallback(() => {\n    const newState: FocusState = { type: \"idle\" };\n    setState(newState);\n    onFocusChange?.(newState);\n  }, [onFocusChange]);\n\n  // Derive focused field/block from state for direct comparison\n  const focusedFieldPath = state.type === \"field\" ? state.fieldPath : undefined;\n  const focusedBlockId = state.type === \"block\" ? state.blockId : undefined;\n\n  const value = React.useMemo(\n    (): FocusContextValue => ({\n      state,\n      focusField,\n      focusBlock,\n      focusRelation,\n      clearFocus,\n      // Simple equality checks - no callback overhead\n      isFieldFocused: (path: string) => focusedFieldPath === path,\n      isBlockFocused: (id: string) => focusedBlockId === id,\n    }),\n    [\n      state,\n      focusField,\n      focusBlock,\n      focusRelation,\n      clearFocus,\n      focusedFieldPath,\n      focusedBlockId,\n    ],\n  );\n\n  return (\n    <FocusContext.Provider value={value}>{children}</FocusContext.Provider>\n  );\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * Use the focus context\n */\nexport function useFocus(): FocusContextValue {\n  const context = React.useContext(FocusContext);\n  if (!context) {\n    throw new Error(\"useFocus must be used within a FocusProvider\");\n  }\n  return context;\n}\n\n/**\n * Use focus context if available (doesn't throw)\n */\nexport function useFocusOptional(): FocusContextValue | null {\n  return React.useContext(FocusContext);\n}\n\n/**\n * Hook for checking if a specific field is focused\n */\nexport function useIsFieldFocused(fieldPath: string): boolean {\n  const context = React.useContext(FocusContext);\n  if (!context) return false;\n  return context.isFieldFocused(fieldPath);\n}\n\n/**\n * Hook for checking if a specific block is focused\n */\nexport function useIsBlockFocused(blockId: string): boolean {\n  const context = React.useContext(FocusContext);\n  if (!context) return false;\n  return context.isBlockFocused(blockId);\n}\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\n/**\n * Parse a preview field path into focus state with optional context hints\n * Examples:\n * - \"title\" → { type: \"field\", fieldPath: \"title\" }\n * - \"content._values.abc123.title\" → { type: \"block\", blockId: \"abc123\", fieldPath: \"title\" }\n * - \"author\" + { fieldType: \"relation\" } → { type: \"relation\", fieldPath: \"author\" }\n * - \"title\" + { blockId: \"abc123\" } → { type: \"block\", blockId: \"abc123\", fieldPath: \"title\" }\n */\nexport function parsePreviewFieldPath(\n  path: string,\n  context?: {\n    blockId?: string;\n    fieldType?: \"regular\" | \"block\" | \"relation\";\n    targetCollection?: string;\n  },\n): FocusState {\n  // Relation field from context\n  if (context?.fieldType === \"relation\") {\n    return {\n      type: \"relation\",\n      fieldPath: path,\n      targetCollection: context.targetCollection,\n    };\n  }\n\n  // Check if it's a block field path (content._values.{id}.{field})\n  const blockMatch = path.match(/^content\\._values\\.([^.]+)(?:\\.(.+))?$/);\n  if (blockMatch) {\n    const [, blockId, fieldPath] = blockMatch;\n    return { type: \"block\", blockId, fieldPath };\n  }\n\n  // Legacy block path format (content.blocks.{id}.{field})\n  const legacyBlockMatch = path.match(/^content\\.blocks\\.([^.]+)(?:\\.(.+))?$/);\n  if (legacyBlockMatch) {\n    const [, blockId, fieldPath] = legacyBlockMatch;\n    return { type: \"block\", blockId, fieldPath };\n  }\n\n  // Block field from context hint\n  if (context?.blockId) {\n    // Extract relative field path if present\n    const relativeField = extractRelativeField(path, context.blockId);\n    return {\n      type: \"block\",\n      blockId: context.blockId,\n      fieldPath: relativeField,\n    };\n  }\n\n  // Regular field\n  return { type: \"field\", fieldPath: path };\n}\n\n/**\n * Extract relative field path from a full path given a block ID\n * Examples:\n * - extractRelativeField(\"content._values.abc123.title\", \"abc123\") → \"title\"\n * - extractRelativeField(\"title\", \"abc123\") → \"title\"\n */\nfunction extractRelativeField(path: string, blockId: string): string {\n  const prefix = `content._values.${blockId}.`;\n  if (path.startsWith(prefix)) {\n    return path.slice(prefix.length);\n  }\n  return path;\n}\n\n/**\n * Scroll a field into view and focus it.\n * Finds the field wrapper by data-field-path within the preview form scope.\n */\nexport function scrollFieldIntoView(fieldPath: string): void {\n  // First try to find within the preview form scope (to avoid matching fields in other forms)\n  const formScope = document.querySelector<HTMLElement>(\n    \"[data-preview-form-scope]\",\n  );\n  const searchRoot = formScope ?? document;\n\n  const wrapper = searchRoot.querySelector<HTMLElement>(\n    `[data-field-path=\"${fieldPath}\"]`,\n  );\n  if (!wrapper) return;\n\n  // Find first focusable element inside the wrapper\n  const focusable = wrapper.querySelector<HTMLElement>(\n    'input:not([type=\"hidden\"]), textarea, button, select, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]',\n  );\n\n  const target = focusable ?? wrapper;\n  target.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n\n  if (focusable) {\n    // Use requestAnimationFrame to focus after scroll starts\n    requestAnimationFrame(() => {\n      // Pull focus from iframe back to parent window\n      window.focus();\n      focusable.focus();\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/client/contexts/breadcrumb-context.mjs

@@ -0,0 +1,32 @@
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/contexts/breadcrumb-context.tsx
+const BreadcrumbContext = React$1.createContext(null);
+function BreadcrumbProvider({ children }) {
+	const [breadcrumbs, setBreadcrumbs] = React$1.useState([]);
+	const value = React$1.useMemo(() => ({
+		breadcrumbs,
+		setBreadcrumbs
+	}), [breadcrumbs]);
+	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Get breadcrumb context (optional - returns null if not in provider)
+*/
+function useBreadcrumbContextOptional() {
+	return React$1.useContext(BreadcrumbContext);
+}
+/**
+* Get current breadcrumbs (read-only)
+*/
+function useCurrentBreadcrumbs() {
+	return useBreadcrumbContextOptional()?.breadcrumbs ?? [];
+}
+
+//#endregion
+export { BreadcrumbProvider, useCurrentBreadcrumbs };
+//# sourceMappingURL=breadcrumb-context.mjs.map

package/dist/client/contexts/breadcrumb-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-context.mjs","names":["React"],"sources":["../../../src/client/contexts/breadcrumb-context.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { I18nText } from \"../i18n/types\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Simple icon component type for breadcrumbs\n */\ntype BreadcrumbIcon = React.ComponentType<{ className?: string }>;\n\n/**\n * Menu item for breadcrumb dropdown\n */\nexport interface BreadcrumbMenuItem {\n  label: I18nText;\n  href: string;\n  icon?: BreadcrumbIcon;\n}\n\n/**\n * Single breadcrumb item\n */\nexport interface Breadcrumb {\n  /**\n   * Display label (supports I18nText for localization)\n   */\n  label: I18nText;\n\n  /**\n   * Navigation href (optional - last item usually doesn't have one)\n   */\n  href?: string;\n\n  /**\n   * Icon component (optional)\n   */\n  icon?: BreadcrumbIcon;\n\n  /**\n   * Dropdown menu items for quick navigation\n   * e.g., switch between collections or items\n   */\n  menu?: {\n    items: BreadcrumbMenuItem[];\n  };\n}\n\n/**\n * Breadcrumb context value\n */\ninterface BreadcrumbContextValue {\n  breadcrumbs: Breadcrumb[];\n  setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue | null>(\n  null,\n);\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface BreadcrumbProviderProps {\n  children: React.ReactNode;\n}\n\nexport function BreadcrumbProvider({\n  children,\n}: BreadcrumbProviderProps): React.ReactElement {\n  const [breadcrumbs, setBreadcrumbs] = React.useState<Breadcrumb[]>([]);\n\n  const value = React.useMemo(\n    () => ({\n      breadcrumbs,\n      setBreadcrumbs,\n    }),\n    [breadcrumbs],\n  );\n\n  return (\n    <BreadcrumbContext.Provider value={value}>\n      {children}\n    </BreadcrumbContext.Provider>\n  );\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * Get breadcrumb context\n * @throws if used outside BreadcrumbProvider\n */\nexport function useBreadcrumbContext(): BreadcrumbContextValue {\n  const context = React.useContext(BreadcrumbContext);\n  if (!context) {\n    throw new Error(\n      \"useBreadcrumbContext must be used within a BreadcrumbProvider\",\n    );\n  }\n  return context;\n}\n\n/**\n * Get breadcrumb context (optional - returns null if not in provider)\n */\nexport function useBreadcrumbContextOptional(): BreadcrumbContextValue | null {\n  return React.useContext(BreadcrumbContext);\n}\n\n/**\n * Set breadcrumbs for the current page\n * Automatically cleans up on unmount\n *\n * @example\n * ```tsx\n * function PostsListPage() {\n *   useBreadcrumbs([\n *     { label: \"Dashboard\", href: \"/admin\", icon: House },\n *     { label: \"Posts\", icon: Article },\n *   ]);\n *\n *   return <div>...</div>;\n * }\n * ```\n */\nexport function useBreadcrumbs(breadcrumbs: Breadcrumb[]): void {\n  const context = useBreadcrumbContextOptional();\n\n  React.useEffect(() => {\n    if (!context) return;\n\n    context.setBreadcrumbs(breadcrumbs);\n\n    return () => {\n      context.setBreadcrumbs([]);\n    };\n  }, [context, breadcrumbs]);\n}\n\n/**\n * Get current breadcrumbs (read-only)\n */\nexport function useCurrentBreadcrumbs(): Breadcrumb[] {\n  const context = useBreadcrumbContextOptional();\n  return context?.breadcrumbs ?? [];\n}\n"],"mappings":";;;;AA6DA,MAAM,oBAAoBA,QAAM,cAC9B,KACD;AAUD,SAAgB,mBAAmB,EACjC,YAC8C;CAC9C,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAuB,EAAE,CAAC;CAEtE,MAAM,QAAQA,QAAM,eACX;EACL;EACA;EACD,GACD,CAAC,YAAY,CACd;AAED,QACE,oBAAC,kBAAkB;EAAgB;EAChC;GAC0B;;;;;AAyBjC,SAAgB,+BAA8D;AAC5E,QAAOA,QAAM,WAAW,kBAAkB;;;;;AAoC5C,SAAgB,wBAAsC;AAEpD,QADgB,8BAA8B,EAC9B,eAAe,EAAE"}