@fluid-app/rep-widgets 0.1.0

package/dist/chunk-PNVBMN27.cjs

@@ -0,0 +1,380 @@
+'use strict';
+
+var chunkD4ULCQ42_cjs = require('./chunk-D4ULCQ42.cjs');
+var chunkCM7D7WGL_cjs = require('./chunk-CM7D7WGL.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var defaultData = [
+  { name: "Jan", value: 186 },
+  { name: "Feb", value: 305 },
+  { name: "Mar", value: 237 },
+  { name: "Apr", value: 273 },
+  { name: "May", value: 209 },
+  { name: "Jun", value: 214 }
+];
+var defaultPieData = [
+  { name: "Jan", value: 186, fill: "var(--chart-1)" },
+  { name: "Feb", value: 305, fill: "var(--chart-2)" },
+  { name: "Mar", value: 237, fill: "var(--chart-3)" },
+  { name: "Apr", value: 273, fill: "var(--chart-4)" },
+  { name: "May", value: 209, fill: "var(--chart-5)" }
+];
+var defaultChartConfig = {
+  value: {
+    label: "Value",
+    color: "var(--chart-1)"
+  }
+};
+function ChartWidget({
+  titleEnabled = true,
+  title = "Chart Widget",
+  titleFontSize = "lg",
+  titleColor = "foreground",
+  description = "Displaying sample data",
+  descriptionFontSize = "md",
+  descriptionColor = "foreground",
+  chartType = "bar",
+  showLegend = false,
+  showTooltip = true,
+  showGrid = true,
+  width = "100%",
+  height = "300px",
+  background = {
+    type: "solid",
+    color: "background"
+  },
+  padding = 4,
+  borderRadius = "md",
+  dataKey = "value",
+  xAxisKey = "name",
+  data,
+  chartConfig,
+  className,
+  ...props
+}) {
+  const backgroundColor = background.color || "background";
+  const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+  const chartData = data ?? defaultData;
+  const chartPieData = chartType === "pie" && data ? data.map((item, index) => ({
+    ...item,
+    fill: `var(--chart-${index % 5 + 1})`
+  })) : defaultPieData;
+  const config = chartConfig ?? defaultChartConfig;
+  const renderChart = () => {
+    switch (chartType) {
+      case "bar":
+        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: chartData, children: [
+          showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltipContent, {}) }),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegendContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey, fill: "var(--color-value)", radius: 8 })
+        ] });
+      case "line":
+        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: chartData, children: [
+          showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltipContent, {}) }),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegendContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Line,
+            {
+              type: "monotone",
+              dataKey,
+              stroke: "var(--color-value)",
+              strokeWidth: 2,
+              dot: { r: 4 }
+            }
+          )
+        ] });
+      case "area":
+        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data: chartData, children: [
+          showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltipContent, {}) }),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegendContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              type: "monotone",
+              dataKey,
+              stroke: "var(--color-value)",
+              fill: "var(--color-value)",
+              fillOpacity: 0.6
+            }
+          )
+        ] });
+      case "pie":
+        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltipContent, { hideLabel: true }) }),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegendContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Pie,
+            {
+              data: chartPieData,
+              dataKey,
+              nameKey: xAxisKey,
+              cx: "50%",
+              cy: "50%",
+              outerRadius: 80,
+              label: true
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: chartData, children: [
+          showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartTooltipContent, {}) }),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartLegendContent, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey, fill: "var(--color-value)", radius: 8 })
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkD4ULCQ42_cjs.Card,
+    {
+      className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className}`,
+      style: {
+        width,
+        maxWidth: "100%",
+        backgroundImage
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+          titleEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: `text-${titleFontSize} text-${titleColor} font-bold`,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: `text-${descriptionFontSize} text-${descriptionColor}`,
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkD4ULCQ42_cjs.ChartContainer, { config, style: { height }, children: renderChart() })
+      ] })
+    }
+  );
+}
+var chartWidgetPropertySchema = {
+  widgetType: "ChartWidget",
+  displayName: "Chart",
+  tabsConfig: [
+    { id: "styling", label: "Styling" },
+    { id: "data", label: "Data" }
+  ],
+  dataSourceTargetProps: ["data", "chartConfig"],
+  fields: [
+    // Content Tab - Title Group
+    {
+      key: "titleEnabled",
+      label: "Widget Title",
+      type: "boolean",
+      description: "Enable the title displayed above the chart",
+      defaultValue: true,
+      tab: "styling",
+      group: "Title"
+    },
+    {
+      key: "title",
+      label: "Title",
+      type: "text",
+      description: "The chart title",
+      defaultValue: "Chart Widget",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    },
+    chunkCM7D7WGL_cjs.getFontSizeField({
+      key: "titleFontSize",
+      label: "Title Font Size",
+      description: "Font size for the chart title",
+      defaultValue: "lg",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    chunkCM7D7WGL_cjs.getColorField({
+      key: "titleColor",
+      label: "Title Color",
+      description: "Color for the chart title",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    // Content Tab - Description Group
+    {
+      key: "description",
+      label: "Description",
+      type: "textarea",
+      description: "The chart description",
+      rows: 2,
+      defaultValue: "Displaying sample data",
+      tab: "styling",
+      group: "Description"
+    },
+    chunkCM7D7WGL_cjs.getFontSizeField({
+      key: "descriptionFontSize",
+      label: "Description Font Size",
+      description: "Font size for the chart description",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Description"
+    }),
+    chunkCM7D7WGL_cjs.getColorField({
+      key: "descriptionColor",
+      label: "Description Color",
+      description: "Color for the chart description",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Description"
+    }),
+    // Styling Tab - Design Group
+    {
+      key: "chartType",
+      label: "Chart Type",
+      type: "select",
+      description: "Type of chart to display",
+      options: [
+        { label: "Bar Chart", value: "bar" },
+        { label: "Line Chart", value: "line" },
+        { label: "Area Chart", value: "area" },
+        { label: "Pie Chart", value: "pie" }
+      ],
+      defaultValue: "bar",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "showLegend",
+      label: "Show Legend",
+      type: "boolean",
+      description: "Display chart legend",
+      defaultValue: false,
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "showTooltip",
+      label: "Show Tooltip",
+      type: "boolean",
+      description: "Display tooltip on hover",
+      defaultValue: true,
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "showGrid",
+      label: "Show Grid",
+      type: "boolean",
+      description: "Display background grid lines",
+      defaultValue: true,
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "separator",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "width",
+      label: "Width",
+      type: "text",
+      description: "Width of the chart container (CSS value, e.g., 100%, 600px)",
+      defaultValue: "100%",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "height",
+      label: "Height",
+      type: "text",
+      description: "Height of the chart (CSS value, e.g., 300px, 400px)",
+      defaultValue: "300px",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "separator2",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      type: "background",
+      key: "background",
+      label: "Background",
+      description: "Background for the chart container",
+      defaultValue: "background",
+      tab: "styling",
+      group: "Design"
+    },
+    chunkCM7D7WGL_cjs.getPaddingField({
+      key: "padding",
+      label: "Padding",
+      description: "Padding for the chart container",
+      defaultValue: 4,
+      tab: "styling",
+      group: "Design"
+    }),
+    chunkCM7D7WGL_cjs.getBorderRadiusField({
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Border radius for the chart container",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Design"
+    }),
+    // Data Tab - Data Group
+    {
+      key: "dataSource",
+      label: "Data Source",
+      type: "dataSource",
+      description: "Configure dynamic data fetching from an API",
+      tab: "data",
+      group: "Data"
+    },
+    {
+      key: "dataKey",
+      label: "Data Key",
+      type: "select",
+      description: "Key in the data to use for chart values",
+      options: [{ label: "value", value: "value" }],
+      defaultValue: "value",
+      tab: "data",
+      group: "Data"
+    },
+    {
+      key: "xAxisKey",
+      label: "X-Axis Key",
+      type: "select",
+      description: "Key in the data to use for X-axis labels",
+      options: [{ label: "name", value: "name" }],
+      defaultValue: "name",
+      tab: "data",
+      group: "Data"
+    }
+  ]
+};
+
+exports.ChartWidget = ChartWidget;
+exports.chartWidgetPropertySchema = chartWidgetPropertySchema;
+//# sourceMappingURL=chunk-PNVBMN27.cjs.map
+//# sourceMappingURL=chunk-PNVBMN27.cjs.map

package/dist/chunk-PNVBMN27.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/ChartWidget.tsx"],"names":["jsxs","RechartsBarChart","jsx","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","RechartsLineChart","Line","RechartsAreaChart","Area","RechartsPieChart","Pie","Card","ChartContainer","getFontSizeField","getColorField","getPaddingField","getBorderRadiusField"],"mappings":"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","file":"chunk-PNVBMN27.cjs","sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport { Card } from \"../ui/card\";\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from \"../ui/chart\";\nimport type { ComponentProps } from \"react\";\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  Line,\n  LineChart as RechartsLineChart,\n  Area,\n  AreaChart as RechartsAreaChart,\n  Pie,\n  PieChart as RechartsPieChart,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype ChartDataPoint = Record<string, unknown>;\n\ntype ChartWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Description\n  description?: string;\n  descriptionFontSize?: FontSizeOptions;\n  descriptionColor?: ColorOptions;\n\n  // Design\n  chartType?: \"bar\" | \"line\" | \"area\" | \"pie\";\n  showLegend?: boolean;\n  showTooltip?: boolean;\n  showGrid?: boolean;\n  width?: string;\n  height?: string;\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  dataKey?: string;\n  xAxisKey?: string;\n  /** Chart data - when provided via dataSource, this overrides defaultData */\n  data?: ChartDataPoint[];\n  /** Chart configuration - can be dynamically provided via dataSource */\n  chartConfig?: Record<string, { label: string; color: string }>;\n};\n\n// Default sample data for demonstration\nconst defaultData = [\n  { name: \"Jan\", value: 186 },\n  { name: \"Feb\", value: 305 },\n  { name: \"Mar\", value: 237 },\n  { name: \"Apr\", value: 273 },\n  { name: \"May\", value: 209 },\n  { name: \"Jun\", value: 214 },\n];\n\n// Pie chart data with individual fill properties\nconst defaultPieData = [\n  { name: \"Jan\", value: 186, fill: \"var(--chart-1)\" },\n  { name: \"Feb\", value: 305, fill: \"var(--chart-2)\" },\n  { name: \"Mar\", value: 237, fill: \"var(--chart-3)\" },\n  { name: \"Apr\", value: 273, fill: \"var(--chart-4)\" },\n  { name: \"May\", value: 209, fill: \"var(--chart-5)\" },\n];\n\nconst defaultChartConfig = {\n  value: {\n    label: \"Value\",\n    color: \"var(--chart-1)\",\n  },\n};\n\nexport function ChartWidget({\n  titleEnabled = true,\n  title = \"Chart Widget\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  description = \"Displaying sample data\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n\n  chartType = \"bar\",\n  showLegend = false,\n  showTooltip = true,\n  showGrid = true,\n  width = \"100%\",\n  height = \"300px\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n\n  dataKey = \"value\",\n  xAxisKey = \"name\",\n  data,\n  chartConfig,\n  className,\n  ...props\n}: ChartWidgetProps) {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  // Use provided data or fall back to default\n  const chartData = data ?? defaultData;\n  const chartPieData =\n    chartType === \"pie\" && data\n      ? data.map((item, index) => ({\n          ...item,\n          fill: `var(--chart-${(index % 5) + 1})`,\n        }))\n      : defaultPieData;\n  const config = chartConfig ?? defaultChartConfig;\n  const renderChart = () => {\n    switch (chartType) {\n      case \"bar\":\n        return (\n          <RechartsBarChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Bar dataKey={dataKey} fill=\"var(--color-value)\" radius={8} />\n          </RechartsBarChart>\n        );\n\n      case \"line\":\n        return (\n          <RechartsLineChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Line\n              type=\"monotone\"\n              dataKey={dataKey}\n              stroke=\"var(--color-value)\"\n              strokeWidth={2}\n              dot={{ r: 4 }}\n            />\n          </RechartsLineChart>\n        );\n\n      case \"area\":\n        return (\n          <RechartsAreaChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Area\n              type=\"monotone\"\n              dataKey={dataKey}\n              stroke=\"var(--color-value)\"\n              fill=\"var(--color-value)\"\n              fillOpacity={0.6}\n            />\n          </RechartsAreaChart>\n        );\n\n      case \"pie\":\n        return (\n          <RechartsPieChart>\n            {showTooltip && (\n              <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Pie\n              data={chartPieData}\n              dataKey={dataKey}\n              nameKey={xAxisKey}\n              cx=\"50%\"\n              cy=\"50%\"\n              outerRadius={80}\n              label\n            />\n          </RechartsPieChart>\n        );\n\n      default:\n        // Fallback to bar chart for unknown chart types\n        return (\n          <RechartsBarChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Bar dataKey={dataKey} fill=\"var(--color-value)\" radius={8} />\n          </RechartsBarChart>\n        );\n    }\n  };\n\n  return (\n    <Card\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className}`}\n      style={{\n        width,\n        maxWidth: \"100%\",\n        backgroundImage,\n      }}\n      {...props}\n    >\n      <div className=\"p-6\">\n        <div className=\"mb-4\">\n          {titleEnabled && (\n            <h3\n              className={`text-${titleFontSize} text-${titleColor} font-bold`}\n            >\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p\n              className={`text-${descriptionFontSize} text-${descriptionColor}`}\n            >\n              {description}\n            </p>\n          )}\n        </div>\n        <ChartContainer config={config} style={{ height }}>\n          {renderChart()}\n        </ChartContainer>\n      </div>\n    </Card>\n  );\n}\n\nexport const chartWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ChartWidget\",\n  displayName: \"Chart\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\", \"chartConfig\"],\n  fields: [\n    // Content Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the chart\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The chart title\",\n      defaultValue: \"Chart Widget\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the chart title\",\n      defaultValue: \"lg\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the chart title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The chart description\",\n      rows: 2,\n      defaultValue: \"Displaying sample data\",\n      tab: \"styling\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the chart description\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"Color for the chart description\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Description\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      key: \"chartType\",\n      label: \"Chart Type\",\n      type: \"select\",\n      description: \"Type of chart to display\",\n      options: [\n        { label: \"Bar Chart\", value: \"bar\" },\n        { label: \"Line Chart\", value: \"line\" },\n        { label: \"Area Chart\", value: \"area\" },\n        { label: \"Pie Chart\", value: \"pie\" },\n      ],\n      defaultValue: \"bar\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showLegend\",\n      label: \"Show Legend\",\n      type: \"boolean\",\n      description: \"Display chart legend\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showTooltip\",\n      label: \"Show Tooltip\",\n      type: \"boolean\",\n      description: \"Display tooltip on hover\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showGrid\",\n      label: \"Show Grid\",\n      type: \"boolean\",\n      description: \"Display background grid lines\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"width\",\n      label: \"Width\",\n      type: \"text\",\n      description:\n        \"Width of the chart container (CSS value, e.g., 100%, 600px)\",\n      defaultValue: \"100%\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"height\",\n      label: \"Height\",\n      type: \"text\",\n      description: \"Height of the chart (CSS value, e.g., 300px, 400px)\",\n      defaultValue: \"300px\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the chart container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the chart container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the chart container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Data Tab - Data Group\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n    {\n      key: \"dataKey\",\n      label: \"Data Key\",\n      type: \"select\",\n      description: \"Key in the data to use for chart values\",\n      options: [{ label: \"value\", value: \"value\" }],\n      defaultValue: \"value\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n    {\n      key: \"xAxisKey\",\n      label: \"X-Axis Key\",\n      type: \"select\",\n      description: \"Key in the data to use for X-axis labels\",\n      options: [{ label: \"name\", value: \"name\" }],\n      defaultValue: \"name\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n  ],\n};\n"]}

package/dist/chunk-RKDOQV4T.js

@@ -0,0 +1,73 @@
+import { RegistryProvider, useRegistry } from './chunk-6GF46P3S.js';
+import { useCallback } from 'react';
+import { WIDGET_TYPE_NAMES } from '@fluid-app/rep-core/types';
+import { jsx } from 'react/jsx-runtime';
+
+function ScreenRendererContent({
+  screen,
+  containerWidgetTypes,
+  className
+}) {
+  const registry = useRegistry();
+  const isContainerWidget = useCallback(
+    (widgetType) => containerWidgetTypes.includes(widgetType),
+    [containerWidgetTypes]
+  );
+  const renderWidget = useCallback(
+    (widget, index, currentPath) => {
+      const Component = registry[widget.type];
+      if (!Component) {
+        console.warn(
+          `Widget type "${String(widget.type)}" not found in registry`
+        );
+        return null;
+      }
+      const widgetPath = [...currentPath, index];
+      const additionalProps = isContainerWidget(widget.type) ? {
+        widgetId: widget.id,
+        widgetPath
+      } : {};
+      const props = {
+        ...widget.props,
+        ...additionalProps
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full w-full overflow-x-hidden",
+          children: /* @__PURE__ */ jsx(Component, { ...props })
+        },
+        widget.id || index
+      );
+    },
+    [registry, isContainerWidget]
+  );
+  return /* @__PURE__ */ jsx("div", { className: className || "h-full w-full", children: screen?.map((item, index) => {
+    if (!item) return null;
+    return renderWidget(item, index, []);
+  }) });
+}
+function ScreenRenderer(props) {
+  const {
+    screen,
+    registry,
+    containerWidgetTypes = [
+      WIDGET_TYPE_NAMES.Layout,
+      WIDGET_TYPE_NAMES.Container
+    ],
+    className
+  } = props;
+  const registryProviderProps = registry !== void 0 ? { registry } : {};
+  return /* @__PURE__ */ jsx(RegistryProvider, { ...registryProviderProps, children: /* @__PURE__ */ jsx(
+    ScreenRendererContent,
+    {
+      screen,
+      containerWidgetTypes,
+      className
+    }
+  ) });
+}
+
+export { ScreenRenderer };
+//# sourceMappingURL=chunk-RKDOQV4T.js.map
+//# sourceMappingURL=chunk-RKDOQV4T.js.map

package/dist/chunk-RKDOQV4T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ScreenRenderer.tsx"],"names":[],"mappings":";;;;;AAkCA,SAAS,qBAAA,CAAsB;AAAA,EAC7B,MAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,WAAW,WAAA,EAAY;AAG7B,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,CAAC,UAAA,KAAuB,oBAAA,CAAqB,QAAA,CAAS,UAAU,CAAA;AAAA,IAChE,CAAC,oBAAoB;AAAA,GACvB;AAGA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,MAAA,EAAsB,KAAA,EAAe,WAAA,KAA4B;AAChE,MAAA,MAAM,SAAA,GAAY,QAAA,CAAS,MAAA,CAAO,IAAI,CAAA;AACtC,MAAA,IAAI,CAAC,SAAA,EAAW;AACd,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN,CAAA,aAAA,EAAgB,MAAA,CAAO,MAAA,CAAO,IAAI,CAAC,CAAA,uBAAA;AAAA,SACrC;AACA,QAAA,OAAO,IAAA;AAAA,MACT;AAEA,MAAA,MAAM,UAAA,GAAa,CAAC,GAAG,WAAA,EAAa,KAAK,CAAA;AAGzC,MAAA,MAAM,eAAA,GAAkB,iBAAA,CAAkB,MAAA,CAAO,IAAI,CAAA,GACjD;AAAA,QACE,UAAU,MAAA,CAAO,EAAA;AAAA,QACjB;AAAA,UAEF,EAAC;AAEL,MAAA,MAAM,KAAA,GAAQ;AAAA,QACZ,GAAG,MAAA,CAAO,KAAA;AAAA,QACV,GAAG;AAAA,OACL;AAEA,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,iCAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAW,GAAG,KAAA,EAAO;AAAA,SAAA;AAAA,QAHjB,OAAO,EAAA,IAAM;AAAA,OAIpB;AAAA,IAEJ,CAAA;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,GAC9B;AAEA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,SAAA,IAAa,iBAC1B,QAAA,EAAA,MAAA,EAAQ,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAE5B,IAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,IAAA,OAAO,YAAA,CAAa,IAAA,EAAM,KAAA,EAAO,EAAE,CAAA;AAAA,EACrC,CAAC,CAAA,EACH,CAAA;AAEJ;AAwBO,SAAS,eAGd,KAAA,EAA+B;AAC/B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAA,GAAuB;AAAA,MACrB,iBAAA,CAAkB,MAAA;AAAA,MAClB,iBAAA,CAAkB;AAAA,KACpB;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAIJ,EAAA,MAAM,wBAAwB,QAAA,KAAa,MAAA,GAAY,EAAE,QAAA,KAAa,EAAC;AAEvE,EAAA,uBACE,GAAA,CAAC,gBAAA,EAAA,EAAkB,GAAG,qBAAA,EAKpB,QAAA,kBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"chunk-RKDOQV4T.js","sourcesContent":["import type { ComponentType } from \"react\";\nimport { useCallback } from \"react\";\nimport type {\n  WidgetSchema,\n  TypedWidgetSchema,\n  WidgetPath,\n} from \"@fluid-app/rep-core/types\";\nimport { WIDGET_TYPE_NAMES } from \"@fluid-app/rep-core/types\";\nimport { RegistryProvider, useRegistry } from \"../contexts/RegistryContext\";\n\nexport interface ScreenRendererProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n> {\n  /** Array of widget schemas to render */\n  screen: TypedWidgetSchema<T>[] | WidgetSchema[];\n  /** Widget registry mapping type names to components */\n  registry?: T;\n  /** Container widgets (like LayoutWidget) receive these additional props */\n  containerWidgetTypes?: string[];\n  /** Additional CSS classes for the wrapper div */\n  className?: string;\n}\n\ninterface ScreenRendererContentProps {\n  screen: WidgetSchema[];\n  containerWidgetTypes: string[];\n  className?: string | undefined;\n}\n\n/**\n * Internal component that uses the registry from context.\n * This allows us to avoid prop drilling the registry.\n */\nfunction ScreenRendererContent({\n  screen,\n  containerWidgetTypes,\n  className,\n}: ScreenRendererContentProps) {\n  const registry = useRegistry();\n\n  // Check if a widget type is a container\n  const isContainerWidget = useCallback(\n    (widgetType: string) => containerWidgetTypes.includes(widgetType),\n    [containerWidgetTypes],\n  );\n\n  // Render widgets recursively with path tracking\n  const renderWidget = useCallback(\n    (widget: WidgetSchema, index: number, currentPath: WidgetPath) => {\n      const Component = registry[widget.type];\n      if (!Component) {\n        console.warn(\n          `Widget type \"${String(widget.type)}\" not found in registry`,\n        );\n        return null;\n      }\n\n      const widgetPath = [...currentPath, index];\n\n      // Build additional props for container widgets\n      const additionalProps = isContainerWidget(widget.type)\n        ? {\n            widgetId: widget.id,\n            widgetPath,\n          }\n        : {};\n\n      const props = {\n        ...widget.props,\n        ...additionalProps,\n      };\n\n      return (\n        <div\n          key={widget.id || index}\n          className=\"h-full w-full overflow-x-hidden\"\n        >\n          <Component {...props} />\n        </div>\n      );\n    },\n    [registry, isContainerWidget],\n  );\n\n  return (\n    <div className={className || \"h-full w-full\"}>\n      {screen?.map((item, index) => {\n        // Skip null items (empty grid cells)\n        if (!item) return null;\n        return renderWidget(item, index, []);\n      })}\n    </div>\n  );\n}\n\n/**\n * ScreenRenderer - View-only component for rendering widget screens.\n *\n * This is a simplified version designed for the SDK that only handles\n * rendering widgets without edit mode or drag-and-drop functionality.\n *\n * Features:\n * - Static rendering of widgets\n * - Registry context: No prop drilling for widget registry\n * - Container widget support with path tracking\n *\n * Usage:\n * ```tsx\n * import { ScreenRenderer } from '@fluid-app/rep-widgets/core';\n * import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';\n *\n * <ScreenRenderer\n *   screen={widgets}\n *   registry={WIDGET_REGISTRY}\n * />\n * ```\n */\nexport function ScreenRenderer<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(props: ScreenRendererProps<T>) {\n  const {\n    screen,\n    registry,\n    containerWidgetTypes = [\n      WIDGET_TYPE_NAMES.Layout,\n      WIDGET_TYPE_NAMES.Container,\n    ],\n    className,\n  } = props;\n\n  // Conditionally pass registry prop to satisfy exactOptionalPropertyTypes\n  // When registry is undefined, we omit it entirely and let RegistryProvider inherit from parent\n  const registryProviderProps = registry !== undefined ? { registry } : {};\n\n  return (\n    <RegistryProvider {...registryProviderProps}>\n      {/* Type assertion required: TypedWidgetSchema<T>[] is a subtype of WidgetSchema[]\n          when T's components accept props compatible with WidgetSchema props.\n          This enables type-safe widget rendering with custom registries while allowing\n          the internal renderer to work with the base WidgetSchema type. */}\n      <ScreenRendererContent\n        screen={screen as WidgetSchema[]}\n        containerWidgetTypes={containerWidgetTypes}\n        className={className}\n      />\n    </RegistryProvider>\n  );\n}\n"]}

package/dist/chunk-RMZFC7HF.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkDW6V4ZCT_cjs = require('./chunk-DW6V4ZCT.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function AlertWidget(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkDW6V4ZCT_cjs.TextWidget, { ...props });
+}
+var alertWidgetPropertySchema = {
+  ...chunkDW6V4ZCT_cjs.textWidgetPropertySchema,
+  widgetType: "AlertWidget"
+};
+
+exports.AlertWidget = AlertWidget;
+exports.alertWidgetPropertySchema = alertWidgetPropertySchema;
+//# sourceMappingURL=chunk-RMZFC7HF.cjs.map
+//# sourceMappingURL=chunk-RMZFC7HF.cjs.map

package/dist/chunk-RMZFC7HF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/AlertWidget.tsx"],"names":["jsx","TextWidget","textWidgetPropertySchema"],"mappings":";;;;;AAOO,SAAS,YAAY,KAAA,EAA0C;AACpE,EAAA,uBAAOA,cAAA,CAACC,4BAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAChC;AAEO,IAAM,yBAAA,GAAkD;AAAA,EAC7D,GAAGC,0CAAA;AAAA,EACH,UAAA,EAAY;AACd","file":"chunk-RMZFC7HF.cjs","sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(props: ComponentProps<typeof TextWidget>) {\n  return <TextWidget {...props} />;\n}\n\nexport const alertWidgetPropertySchema: WidgetPropertySchema = {\n  ...textWidgetPropertySchema,\n  widgetType: \"AlertWidget\",\n};\n"]}

package/dist/chunk-SBHL3GFW.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/widgets/SpacerWidget.tsx
+function SpacerWidget({
+  customHeight = 32,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-full ${className ?? ""}`,
+      style: { height: `calc(var(--spacing) * ${customHeight})`, ...style },
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+}
+var spacerWidgetPropertySchema = {
+  widgetType: "SpacerWidget",
+  displayName: "Spacer",
+  fields: [
+    {
+      key: "customHeight",
+      label: "Height",
+      type: "number",
+      description: "Height in pixels (only used when size is 'custom')",
+      min: 1,
+      max: 500,
+      step: 1,
+      defaultValue: 32,
+      group: "Spacing"
+    }
+  ]
+};
+
+export { SpacerWidget, spacerWidgetPropertySchema };
+//# sourceMappingURL=chunk-SBHL3GFW.js.map
+//# sourceMappingURL=chunk-SBHL3GFW.js.map

package/dist/chunk-SBHL3GFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/SpacerWidget.tsx"],"names":[],"mappings":";;;AAUO,SAAS,YAAA,CAAa;AAAA,EAC3B,YAAA,GAAe,EAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,OAAA,EAAU,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACpC,OAAO,EAAE,MAAA,EAAQ,yBAAyB,YAAY,CAAA,CAAA,CAAA,EAAK,GAAG,KAAA,EAAM;AAAA,MACpE,aAAA,EAAY,MAAA;AAAA,MACX,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,IAAM,0BAAA,GAAmD;AAAA,EAC9D,UAAA,EAAY,cAAA;AAAA,EACZ,WAAA,EAAa,QAAA;AAAA,EACb,MAAA,EAAQ;AAAA,IACN;AAAA,MACE,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,oDAAA;AAAA,MACb,GAAA,EAAK,CAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,YAAA,EAAc,EAAA;AAAA,MACd,KAAA,EAAO;AAAA;AACT;AAEJ","file":"chunk-SBHL3GFW.js","sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\n\ntype SpacerWidgetProps = ComponentProps<\"div\"> & {\n  /**\n   * Custom height in pixels (only used when size is \"custom\")\n   */\n  customHeight?: number;\n};\n\nexport function SpacerWidget({\n  customHeight = 32,\n  className,\n  style,\n  ...props\n}: SpacerWidgetProps) {\n  return (\n    <div\n      className={`w-full ${className ?? \"\"}`}\n      style={{ height: `calc(var(--spacing) * ${customHeight})`, ...style }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  );\n}\n\nexport const spacerWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"SpacerWidget\",\n  displayName: \"Spacer\",\n  fields: [\n    {\n      key: \"customHeight\",\n      label: \"Height\",\n      type: \"number\",\n      description: \"Height in pixels (only used when size is 'custom')\",\n      min: 1,\n      max: 500,\n      step: 1,\n      defaultValue: 32,\n      group: \"Spacing\",\n    },\n  ],\n};\n"]}