@lattice-php/lattice 0.17.0 → 0.17.2

package/dist/chat/index.d.ts

@@ -1 +1 @@
-export declare const chatPlugin: import('../core/registry').Plugin;
+export declare const chatComponents: import('../core/registry').Plugin;

package/dist/chat/index.js

@@ -3,8 +3,8 @@ import { ChatBox } from "./components/chat-box.js";
 import { TextPart } from "./parts/text.js";
 import { ToolCallPart } from "./parts/tool-call.js";
 //#region resources/js/chat/index.ts
-var chatPlugin = createPlugin({
-	name: "chat",
+var chatComponents = createPlugin({
+	name: "lattice/chat",
 	components: {
 		"chat.box": eagerComponent(ChatBox),
 		"chat.part.text": eagerComponent(TextPart),
@@ -12,6 +12,6 @@ var chatPlugin = createPlugin({
 	}
 });
 //#endregion
-export { chatPlugin };
+export { chatComponents };
 
 //# sourceMappingURL=index.js.map

package/dist/chat/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/chat/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport ChatBoxComponent from \"./components/chat-box\";\nimport { TextPart } from \"./parts/text\";\nimport { ToolCallPart } from \"./parts/tool-call\";\n\nexport const chatPlugin = createPlugin({\n  name: \"chat\",\n  components: {\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"chat.part.text\": eagerComponent(TextPart),\n    \"chat.part.tool-call\": eagerComponent(ToolCallPart),\n  },\n});\n"],"mappings":";;;;;AAKA,IAAa,aAAa,aAAa;CACrC,MAAM;CACN,YAAY;EACV,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,QAAQ;EACzC,uBAAuB,eAAe,YAAY;CACpD;AACF,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/chat/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport ChatBoxComponent from \"./components/chat-box\";\nimport { TextPart } from \"./parts/text\";\nimport { ToolCallPart } from \"./parts/tool-call\";\n\nexport const chatComponents = createPlugin({\n  name: \"lattice/chat\",\n  components: {\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"chat.part.text\": eagerComponent(TextPart),\n    \"chat.part.tool-call\": eagerComponent(ToolCallPart),\n  },\n});\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,aAAa;CACzC,MAAM;CACN,YAAY;EACV,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,QAAQ;EACzC,uBAAuB,eAAe,YAAY;CACpD;AACF,CAAC"}

package/dist/core/components/chart-view.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../types';
+declare const ChartView: RendererComponent<"chart">;
+export default ChartView;

package/dist/core/components/chart-view.js

@@ -0,0 +1,225 @@
+import { useLocale } from "../../i18n/locale.js";
+import { useTimezone } from "../../i18n/timezone.js";
+import { nodeIdentity } from "../test-id.js";
+import { formatValue } from "../../format/value.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region resources/js/core/components/chart-view.tsx
+var chartMargin = {
+	bottom: 0,
+	left: 0,
+	right: 16,
+	top: 8
+};
+var compactLegendProps = {
+	align: "center",
+	height: 24,
+	iconSize: 7,
+	verticalAlign: "top",
+	wrapperStyle: {
+		fontSize: 11,
+		lineHeight: "14px",
+		paddingBottom: 6
+	}
+};
+var axisTick = { fontSize: 10 };
+var tooltipProps = {
+	contentStyle: {
+		background: "var(--lt-surface)",
+		border: "1px solid var(--lt-border)",
+		borderRadius: "var(--lt-radius-sm)",
+		boxShadow: "var(--lt-shadow-sm)",
+		color: "var(--lt-surface-fg)",
+		fontSize: 12
+	},
+	itemStyle: { color: "var(--lt-surface-fg)" },
+	labelStyle: { color: "var(--lt-muted-fg)" }
+};
+var palette = [
+	"var(--lt-primary)",
+	"var(--lt-success)",
+	"var(--lt-info)",
+	"var(--lt-warning)",
+	"var(--lt-danger)",
+	"var(--lt-muted-fg)"
+];
+function colorAt(index) {
+	return palette[index % palette.length] ?? "var(--lt-primary)";
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function datumColor(datum, series, index) {
+	if (isRecord(datum) && typeof datum.color === "string") return datum.color;
+	return series.color ?? colorAt(index);
+}
+function isCartesianSeries(series) {
+	return series.type === "area" || series.type === "bar" || series.type === "line";
+}
+function cartesianChartFor(series) {
+	const types = new Set(series.map((item) => item.type));
+	const firstSeries = series[0];
+	if (firstSeries === void 0 || types.size !== 1) return ComposedChart;
+	switch (firstSeries.type) {
+		case "area": return AreaChart;
+		case "bar": return BarChart;
+		case "line": return LineChart;
+	}
+}
+function ChartFrame({ children, description, id, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm",
+		"data-lattice-component": id,
+		children: [(title !== null || description !== null) && /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [title !== null && /* @__PURE__ */ jsx("div", {
+				className: "text-sm font-semibold leading-tight",
+				children: title
+			}), description !== null && /* @__PURE__ */ jsx("div", {
+				className: "text-xs leading-5 text-lt-muted-fg",
+				children: description
+			})]
+		}), children]
+	});
+}
+function CartesianChart({ props }) {
+	const series = props.series.filter(isCartesianSeries);
+	const RechartsChart = cartesianChartFor(series);
+	const { locale } = useLocale();
+	const { timezone } = useTimezone();
+	const ctx = {
+		locale,
+		timezone
+	};
+	const formatCategory = (value) => formatValue(value, props.categoryFormat, ctx);
+	const formatValueTick = (value) => formatValue(value, props.valueFormat, ctx);
+	const tooltipCursor = series.some((item) => item.type === "bar") ? {
+		fill: "var(--lt-muted-fg)",
+		fillOpacity: .15
+	} : {
+		stroke: "var(--lt-muted-fg)",
+		strokeOpacity: .4
+	};
+	return /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width: "100%",
+		height: props.height,
+		debounce: 100,
+		children: /* @__PURE__ */ jsxs(RechartsChart, {
+			data: props.data,
+			margin: chartMargin,
+			children: [
+				props.grid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--lt-border)"
+				}),
+				props.xAxis && props.categoryKey !== null && /* @__PURE__ */ jsx(XAxis, {
+					dataKey: props.categoryKey,
+					stroke: "var(--lt-muted-fg)",
+					tick: axisTick,
+					tickFormatter: formatCategory,
+					tickLine: false
+				}),
+				props.yAxis && /* @__PURE__ */ jsx(YAxis, {
+					stroke: "var(--lt-muted-fg)",
+					tick: axisTick,
+					tickFormatter: formatValueTick,
+					tickLine: false,
+					width: 42
+				}),
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
+					...tooltipProps,
+					cursor: tooltipCursor,
+					formatter: formatValueTick,
+					labelFormatter: formatCategory
+				}),
+				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
+				series.map((item, index) => {
+					const color = item.color ?? colorAt(index);
+					const key = `${item.type}:${item.dataKey}`;
+					if (item.type === "area") return /* @__PURE__ */ jsx(Area, {
+						dataKey: item.dataKey,
+						fill: color,
+						fillOpacity: .16,
+						name: item.name ?? void 0,
+						stackId: item.stackId ?? void 0,
+						stroke: color,
+						type: "monotone"
+					}, key);
+					if (item.type === "bar") return /* @__PURE__ */ jsx(Bar, {
+						dataKey: item.dataKey,
+						fill: color,
+						name: item.name ?? void 0,
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						stackId: item.stackId ?? void 0
+					}, key);
+					return /* @__PURE__ */ jsx(Line, {
+						dataKey: item.dataKey,
+						dot: false,
+						name: item.name ?? void 0,
+						stroke: color,
+						strokeWidth: 2,
+						type: "monotone"
+					}, key);
+				})
+			]
+		})
+	});
+}
+function PieChartView({ props, series }) {
+	const { locale } = useLocale();
+	const { timezone } = useTimezone();
+	const ctx = {
+		locale,
+		timezone
+	};
+	return /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width: "100%",
+		height: props.height,
+		debounce: 100,
+		children: /* @__PURE__ */ jsxs(PieChart, {
+			margin: chartMargin,
+			children: [
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
+					...tooltipProps,
+					formatter: (value) => formatValue(value, props.valueFormat, ctx),
+					labelFormatter: (value) => formatValue(value, props.categoryFormat, ctx)
+				}),
+				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
+				/* @__PURE__ */ jsx(Pie, {
+					data: props.data,
+					dataKey: series.dataKey,
+					name: series.name ?? void 0,
+					nameKey: series.nameKey ?? void 0,
+					outerRadius: "68%",
+					children: props.data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datumColor(datum, series, index) }, index))
+				})
+			]
+		})
+	});
+}
+var ChartView = ({ node }) => {
+	const props = node.props;
+	const pieSeries = props.series.find((series) => series.type === "pie");
+	const hasCartesianSeries = props.series.some(isCartesianSeries);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		description: props.description,
+		id: nodeIdentity(node),
+		title: props.title,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 w-full",
+			children: pieSeries && !hasCartesianSeries ? /* @__PURE__ */ jsx(PieChartView, {
+				props,
+				series: pieSeries
+			}) : /* @__PURE__ */ jsx(CartesianChart, { props })
+		})
+	});
+};
+//#endregion
+export { ChartView as default };
+
+//# sourceMappingURL=chart-view.js.map

package/dist/core/components/chart-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-view.js","names":[],"sources":["../../../resources/js/core/components/chart-view.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale, useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { formatValue } from \"../../format/value\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\nconst tooltipProps = {\n  contentStyle: {\n    background: \"var(--lt-surface)\",\n    border: \"1px solid var(--lt-border)\",\n    borderRadius: \"var(--lt-radius-sm)\",\n    boxShadow: \"var(--lt-shadow-sm)\",\n    color: \"var(--lt-surface-fg)\",\n    fontSize: 12,\n  },\n  itemStyle: { color: \"var(--lt-surface-fg)\" },\n  labelStyle: { color: \"var(--lt-muted-fg)\" },\n} as const;\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n  const formatCategory = (value: unknown) => formatValue(value, props.categoryFormat, ctx);\n  const formatValueTick = (value: unknown) => formatValue(value, props.valueFormat, ctx);\n  const hasBarSeries = series.some((item) => item.type === \"bar\");\n  const tooltipCursor = hasBarSeries\n    ? { fill: \"var(--lt-muted-fg)\", fillOpacity: 0.15 }\n    : { stroke: \"var(--lt-muted-fg)\", strokeOpacity: 0.4 };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatCategory}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatValueTick}\n            tickLine={false}\n            width={42}\n          />\n        )}\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            cursor={tooltipCursor}\n            formatter={formatValueTick}\n            labelFormatter={formatCategory}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n            labelFormatter={(value) => formatValue(value, props.categoryFormat, ctx)}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartView: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartView;\n"],"mappings":"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"}

package/dist/core/components/chart.js

@@ -1,224 +1,14 @@
-import { useLocale } from "../../i18n/locale.js";
-import { useTimezone } from "../../i18n/timezone.js";
-import { nodeIdentity } from "../test-id.js";
-import { formatValue } from "../../format/value.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/chart.tsx
-var chartMargin = {
-	bottom: 0,
-	left: 0,
-	right: 16,
-	top: 8
-};
-var compactLegendProps = {
-	align: "center",
-	height: 24,
-	iconSize: 7,
-	verticalAlign: "top",
-	wrapperStyle: {
-		fontSize: 11,
-		lineHeight: "14px",
-		paddingBottom: 6
-	}
-};
-var axisTick = { fontSize: 10 };
-var tooltipProps = {
-	contentStyle: {
-		background: "var(--lt-surface)",
-		border: "1px solid var(--lt-border)",
-		borderRadius: "var(--lt-radius-sm)",
-		boxShadow: "var(--lt-shadow-sm)",
-		color: "var(--lt-surface-fg)",
-		fontSize: 12
-	},
-	itemStyle: { color: "var(--lt-surface-fg)" },
-	labelStyle: { color: "var(--lt-muted-fg)" }
-};
-var palette = [
-	"var(--lt-primary)",
-	"var(--lt-success)",
-	"var(--lt-info)",
-	"var(--lt-warning)",
-	"var(--lt-danger)",
-	"var(--lt-muted-fg)"
-];
-function colorAt(index) {
-	return palette[index % palette.length] ?? "var(--lt-primary)";
-}
-function isRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function datumColor(datum, series, index) {
-	if (isRecord(datum) && typeof datum.color === "string") return datum.color;
-	return series.color ?? colorAt(index);
-}
-function isCartesianSeries(series) {
-	return series.type === "area" || series.type === "bar" || series.type === "line";
-}
-function cartesianChartFor(series) {
-	const types = new Set(series.map((item) => item.type));
-	const firstSeries = series[0];
-	if (firstSeries === void 0 || types.size !== 1) return ComposedChart;
-	switch (firstSeries.type) {
-		case "area": return AreaChart;
-		case "bar": return BarChart;
-		case "line": return LineChart;
-	}
-}
-function ChartFrame({ children, description, id, title }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm",
-		"data-lattice-component": id,
-		children: [(title !== null || description !== null) && /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-col gap-1.5",
-			children: [title !== null && /* @__PURE__ */ jsx("div", {
-				className: "text-sm font-semibold leading-tight",
-				children: title
-			}), description !== null && /* @__PURE__ */ jsx("div", {
-				className: "text-xs leading-5 text-lt-muted-fg",
-				children: description
-			})]
-		}), children]
-	});
-}
-function CartesianChart({ props }) {
-	const series = props.series.filter(isCartesianSeries);
-	const RechartsChart = cartesianChartFor(series);
-	const { locale } = useLocale();
-	const { timezone } = useTimezone();
-	const ctx = {
-		locale,
-		timezone
-	};
-	const formatCategory = (value) => formatValue(value, props.categoryFormat, ctx);
-	const formatValueTick = (value) => formatValue(value, props.valueFormat, ctx);
-	const tooltipCursor = series.some((item) => item.type === "bar") ? {
-		fill: "var(--lt-muted-fg)",
-		fillOpacity: .15
-	} : {
-		stroke: "var(--lt-muted-fg)",
-		strokeOpacity: .4
-	};
-	return /* @__PURE__ */ jsx(ResponsiveContainer, {
-		width: "100%",
-		height: props.height,
-		debounce: 100,
-		children: /* @__PURE__ */ jsxs(RechartsChart, {
-			data: props.data,
-			margin: chartMargin,
-			children: [
-				props.grid && /* @__PURE__ */ jsx(CartesianGrid, {
-					strokeDasharray: "3 3",
-					stroke: "var(--lt-border)"
-				}),
-				props.xAxis && props.categoryKey !== null && /* @__PURE__ */ jsx(XAxis, {
-					dataKey: props.categoryKey,
-					stroke: "var(--lt-muted-fg)",
-					tick: axisTick,
-					tickFormatter: formatCategory,
-					tickLine: false
-				}),
-				props.yAxis && /* @__PURE__ */ jsx(YAxis, {
-					stroke: "var(--lt-muted-fg)",
-					tick: axisTick,
-					tickFormatter: formatValueTick,
-					tickLine: false,
-					width: 42
-				}),
-				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
-					...tooltipProps,
-					cursor: tooltipCursor,
-					formatter: formatValueTick,
-					labelFormatter: formatCategory
-				}),
-				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
-				series.map((item, index) => {
-					const color = item.color ?? colorAt(index);
-					const key = `${item.type}:${item.dataKey}`;
-					if (item.type === "area") return /* @__PURE__ */ jsx(Area, {
-						dataKey: item.dataKey,
-						fill: color,
-						fillOpacity: .16,
-						name: item.name ?? void 0,
-						stackId: item.stackId ?? void 0,
-						stroke: color,
-						type: "monotone"
-					}, key);
-					if (item.type === "bar") return /* @__PURE__ */ jsx(Bar, {
-						dataKey: item.dataKey,
-						fill: color,
-						name: item.name ?? void 0,
-						radius: [
-							4,
-							4,
-							0,
-							0
-						],
-						stackId: item.stackId ?? void 0
-					}, key);
-					return /* @__PURE__ */ jsx(Line, {
-						dataKey: item.dataKey,
-						dot: false,
-						name: item.name ?? void 0,
-						stroke: color,
-						strokeWidth: 2,
-						type: "monotone"
-					}, key);
-				})
-			]
-		})
-	});
-}
-function PieChartView({ props, series }) {
-	const { locale } = useLocale();
-	const { timezone } = useTimezone();
-	const ctx = {
-		locale,
-		timezone
-	};
-	return /* @__PURE__ */ jsx(ResponsiveContainer, {
-		width: "100%",
-		height: props.height,
-		debounce: 100,
-		children: /* @__PURE__ */ jsxs(PieChart, {
-			margin: chartMargin,
-			children: [
-				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
-					...tooltipProps,
-					formatter: (value) => formatValue(value, props.valueFormat, ctx),
-					labelFormatter: (value) => formatValue(value, props.categoryFormat, ctx)
-				}),
-				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
-				/* @__PURE__ */ jsx(Pie, {
-					data: props.data,
-					dataKey: series.dataKey,
-					name: series.name ?? void 0,
-					nameKey: series.nameKey ?? void 0,
-					outerRadius: "68%",
-					children: props.data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datumColor(datum, series, index) }, index))
-				})
-			]
-		})
-	});
-}
-var ChartComponent = ({ node }) => {
-	const props = node.props;
-	const pieSeries = props.series.find((series) => series.type === "pie");
-	const hasCartesianSeries = props.series.some(isCartesianSeries);
-	return /* @__PURE__ */ jsx(ChartFrame, {
-		description: props.description,
-		id: nodeIdentity(node),
-		title: props.title,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "min-h-0 w-full",
-			children: pieSeries && !hasCartesianSeries ? /* @__PURE__ */ jsx(PieChartView, {
-				props,
-				series: pieSeries
-			}) : /* @__PURE__ */ jsx(CartesianChart, { props })
-		})
-	});
-};
+var ChartView = lazy(() => import("./chart-view.js"));
+var ChartComponent = ({ children, node }) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: null,
+	children: /* @__PURE__ */ jsx(ChartView, {
+		node,
+		children
+	})
+});
 //#endregion
 export { ChartComponent as default };
 

package/dist/core/components/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale, useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { formatValue } from \"../../format/value\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\nconst tooltipProps = {\n  contentStyle: {\n    background: \"var(--lt-surface)\",\n    border: \"1px solid var(--lt-border)\",\n    borderRadius: \"var(--lt-radius-sm)\",\n    boxShadow: \"var(--lt-shadow-sm)\",\n    color: \"var(--lt-surface-fg)\",\n    fontSize: 12,\n  },\n  itemStyle: { color: \"var(--lt-surface-fg)\" },\n  labelStyle: { color: \"var(--lt-muted-fg)\" },\n} as const;\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n  const formatCategory = (value: unknown) => formatValue(value, props.categoryFormat, ctx);\n  const formatValueTick = (value: unknown) => formatValue(value, props.valueFormat, ctx);\n  const hasBarSeries = series.some((item) => item.type === \"bar\");\n  const tooltipCursor = hasBarSeries\n    ? { fill: \"var(--lt-muted-fg)\", fillOpacity: 0.15 }\n    : { stroke: \"var(--lt-muted-fg)\", strokeOpacity: 0.4 };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatCategory}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatValueTick}\n            tickLine={false}\n            width={42}\n          />\n        )}\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            cursor={tooltipCursor}\n            formatter={formatValueTick}\n            labelFormatter={formatCategory}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n            labelFormatter={(value) => formatValue(value, props.categoryFormat, ctx)}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartComponent;\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\n\nconst ChartView = lazy(() => import(\"./chart-view\") as unknown as Promise<RendererComponentModule>);\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ children, node }) => (\n  <Suspense fallback={null}>\n    <ChartView node={node}>{children}</ChartView>\n  </Suspense>\n);\n\nexport default ChartComponent;\n"],"mappings":";;;AAGA,IAAM,YAAY,WAAW,OAAO,kBAA8D;AAElG,IAAM,kBAA8C,EAAE,UAAU,WAC9D,oBAAC,UAAD;CAAU,UAAU;WAClB,oBAAC,WAAD;EAAiB;EAAO;CAAoB,CAAA;AACpC,CAAA"}

package/dist/core/components/index.js

@@ -1,7 +1,8 @@
-import { createPlugin, eagerComponent, lazyComponent } from "../registry.js";
+import { createPlugin, eagerComponent } from "../registry.js";
 import ButtonComponent from "./button.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
+import ChartComponent from "./chart.js";
 import CollapsibleComponent from "./collapsible.js";
 import FloatingPanelComponent from "./floating-panel.js";
 import FragmentComponent from "./fragment.js";
@@ -23,7 +24,7 @@ var coreComponents = createPlugin({
 		badge: eagerComponent(BadgeComponent),
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
-		chart: lazyComponent(() => import("./chart.js")),
+		chart: eagerComponent(ChartComponent),
 		collapsible: eagerComponent(CollapsibleComponent),
 		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),

package/dist/core/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}

package/dist/core/renderer.js

@@ -1,10 +1,50 @@
 import { useComponentRegistry } from "./registry-context.js";
 import { useCollapsed } from "./collapsed-context.js";
 import { Suspense } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/renderer.tsx
+function MissingComponentIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: "size-lt-icon-md shrink-0",
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				height: "18",
+				rx: "2",
+				strokeDasharray: "4 3",
+				width: "18",
+				x: "3",
+				y: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+		]
+	});
+}
+/**
+* Fallback for a node whose type has no registered renderer. Always renders a
+* visible, muted marker — icon-only survives tight spots like table cells — so
+* the gap is never invisible. Shows the type inline in development; keeps it
+* screen-reader-only (plus a hover tooltip) in production.
+*/
 function MissingComponent({ node }) {
-	return null;
+	node.type;
+	const label = `Missing component: ${node.type}`;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1.5 align-middle text-lt-muted-fg",
+		"data-lattice-missing-component": node.type,
+		title: label,
+		children: [/* @__PURE__ */ jsx(MissingComponentIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
 }
 function nodeKey(node, index) {
 	return node.key ?? node.id ?? `${node.type}-${index}`;