@fluid-app/rep-widgets 0.1.0

package/dist/chunk-3RV7AYQZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/ImageWidget.tsx"],"names":[],"mappings":"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","file":"chunk-3RV7AYQZ.js","sourcesContent":["import type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/rep-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype ImageWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  alt?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  linkUrl?: string;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function ImageWidget({\n  src = \"\",\n  alt = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  linkUrl,\n  resource,\n  useCustomUrl,\n}: ImageWidgetProps) {\n  const effectiveSrc = useCustomUrl ? src : (resource?.imageUrl ?? src);\n  const effectiveAlt = resource?.title ?? alt;\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  const content = (\n    <div\n      className={`w-full rounded-${borderRadius} overflow-hidden`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"image\"\n        src={effectiveSrc}\n        alt={effectiveAlt}\n        objectFit={isFixed ? displayFit : \"contain\"}\n        focusPoint={isFixed ? focusPoint : undefined}\n      />\n    </div>\n  );\n\n  if (linkUrl) {\n    return (\n      <a href={linkUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n        {content}\n      </a>\n    );\n  }\n\n  return content;\n}\n\nexport const imageWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ImageWidget\",\n  displayName: \"Image\",\n  fields: [\n    // Content\n    {\n      key: \"resource\",\n      label: \"Select Image\",\n      type: \"resource\",\n      description: \"Browse and select an image\",\n      allowedTypes: [\"Medium\"],\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom image URL instead of selecting media\",\n      defaultValue: false,\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Image URL\",\n      type: \"text\",\n      description: \"The source URL of the image\",\n      defaultValue:\n        \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"alt\",\n      label: \"Alt Text\",\n      type: \"text\",\n      description: \"Alternative text for the image (for accessibility)\",\n      defaultValue: \"Placeholder image\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the image height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      group: \"Design\",\n    },\n    {\n      key: \"fixedHeight\",\n      label: \"Height\",\n      type: \"slider\",\n      description: \"Fixed height of the image container in pixels\",\n      min: 80,\n      max: 500,\n      step: 10,\n      defaultValue: 200,\n      unit: \"px\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the image fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the image within its container\",\n      defaultValue: \"center\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Link\n    {\n      key: \"linkUrl\",\n      label: \"Link URL\",\n      type: \"text\",\n      description: \"Optional URL to wrap the image in a link\",\n      defaultValue: \"\",\n      group: \"Link\",\n    },\n  ],\n};\n"]}

package/dist/chunk-4M2A5W2D.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkEUOP3MWJ_cjs = require('./chunk-EUOP3MWJ.cjs');
+var chunkCM7D7WGL_cjs = require('./chunk-CM7D7WGL.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ContainerWidget(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkEUOP3MWJ_cjs.LayoutWidget, { ...props });
+}
+var containerWidgetPropertySchema = {
+  widgetType: "ContainerWidget",
+  displayName: "Canvas Settings",
+  fields: [
+    chunkCM7D7WGL_cjs.getGapField({
+      key: "gapSize",
+      label: "Gap",
+      description: "Gap between widgets",
+      defaultValue: "md",
+      group: "Design"
+    }),
+    chunkCM7D7WGL_cjs.getPaddingField({
+      key: "padding",
+      label: "Padding",
+      description: "Padding for the container",
+      defaultValue: 4,
+      group: "Design"
+    }),
+    {
+      type: "background",
+      key: "background",
+      label: "Background",
+      description: "Background for the container",
+      defaultValue: "background",
+      group: "Design"
+    }
+  ]
+};
+
+exports.ContainerWidget = ContainerWidget;
+exports.containerWidgetPropertySchema = containerWidgetPropertySchema;
+//# sourceMappingURL=chunk-4M2A5W2D.cjs.map
+//# sourceMappingURL=chunk-4M2A5W2D.cjs.map

package/dist/chunk-4M2A5W2D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/ContainerWidget.tsx"],"names":["jsx","LayoutWidget","getGapField","getPaddingField"],"mappings":";;;;;;AAgBO,SAAS,gBAAgB,KAAA,EAA6B;AAE3D,EAAA,uBAAOA,cAAA,CAACC,8BAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEO,IAAM,6BAAA,GAAsD;AAAA,EACjE,UAAA,EAAY,iBAAA;AAAA,EACZ,WAAA,EAAa,iBAAA;AAAA,EACb,MAAA,EAAQ;AAAA,IACNC,6BAAA,CAAY;AAAA,MACV,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,KAAA;AAAA,MACP,WAAA,EAAa,qBAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACDC,iCAAA,CAAgB;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,2BAAA;AAAA,MACb,YAAA,EAAc,CAAA;AAAA,MACd,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,8BAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,KAAA,EAAO;AAAA;AACT;AAEJ","file":"chunk-4M2A5W2D.cjs","sourcesContent":["import type { ComponentProps } from \"react\";\nimport { LayoutWidget } from \"./LayoutWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport { getGapField, getPaddingField } from \"../core/fields\";\n\n/**\n * ContainerWidget - Root container widget for screens\n *\n * This widget wraps LayoutWidget and serves as the foundational container\n * for every screen. It cannot be added, deleted, moved, or copied by users.\n *\n * Only exposes limited settings: gap, padding, and backgroundColor\n */\n\ntype ContainerWidgetProps = ComponentProps<typeof LayoutWidget>;\n\nexport function ContainerWidget(props: ContainerWidgetProps) {\n  // Pass all props through to LayoutWidget\n  return <LayoutWidget {...props} />;\n}\n\nexport const containerWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ContainerWidget\",\n  displayName: \"Canvas Settings\",\n  fields: [\n    getGapField({\n      key: \"gapSize\",\n      label: \"Gap\",\n      description: \"Gap between widgets\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the container\",\n      defaultValue: 4,\n      group: \"Design\",\n    }),\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the container\",\n      defaultValue: \"background\",\n      group: \"Design\",\n    },\n  ],\n};\n"]}

package/dist/chunk-4XJCU4HY.js

@@ -0,0 +1,248 @@
+import { ErrorState } from './chunk-GRFCSQ2M.js';
+import { getFontSizeField, getColorField, getPaddingField, getBorderRadiusField } from './chunk-ZS7C474P.js';
+import { ListChecks, Plus } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { useDataSourceConfig } from '@fluid-app/rep-core/data-sources/context';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var todoKeys = {
+  all: ["todos"],
+  list: () => [...todoKeys.all, "list"]
+};
+function useTodos() {
+  const { baseUrl, getApiHeaders } = useDataSourceConfig();
+  return useQuery({
+    queryKey: todoKeys.list(),
+    queryFn: async ({ signal }) => {
+      const url = baseUrl ? `${baseUrl}/tasks` : "/tasks";
+      const response = await fetch(url, {
+        headers: {
+          "content-type": "application/json",
+          ...getApiHeaders?.()
+        },
+        signal
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch todos: ${response.status}`);
+      }
+      const data = await response.json();
+      return transformTodos(data);
+    }
+  });
+}
+function transformTodos(rawData) {
+  return rawData.map((todo) => ({
+    id: todo.id,
+    body: todo.body,
+    dueAt: todo.due_at,
+    completedAt: todo.completed_at,
+    createdAt: todo.created_at,
+    contactName: todo.contact ? `${todo.contact.first_name} ${todo.contact.last_name}` : null
+  }));
+}
+function ToDoWidget({
+  // Title defaults
+  titleEnabled = true,
+  titleText = "To-Do",
+  titleFontSize = "lg",
+  titleColor = "foreground",
+  // Styling defaults
+  background = {
+    type: "solid",
+    color: "background"
+  },
+  textColor = "foreground",
+  accentColor = "primary",
+  padding = 4,
+  borderRadius = "md",
+  // Content defaults
+  maxItems = 5,
+  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 { data: todos = [], isLoading, isError } = useTodos();
+  const displayTodos = todos.length > 0 ? todos : [];
+  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);
+  const todosToShow = activeTodos.slice(0, maxItems);
+  const remainingCount = activeTodos.length - todosToShow.length;
+  const isEmpty = activeTodos.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? ""}`,
+      style: { backgroundImage },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: titleEnabled && titleText && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: `text-${titleFontSize} font-bold text-${titleColor}`,
+              children: titleText
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !isEmpty && !isLoading && /* @__PURE__ */ jsx("span", { className: `text-2xl font-bold text-${accentColor}`, children: activeTodos.length }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex h-10 w-10 shrink-0 items-center justify-center`,
+                children: /* @__PURE__ */ jsx(ListChecks, { className: `h-5 w-5 text-${accentColor}-foreground` })
+              }
+            )
+          ] })
+        ] }),
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent" }) }) : isError ? (
+          /* Error state */
+          /* @__PURE__ */ jsx(ErrorState, {})
+        ) : isEmpty ? (
+          /* Empty state */
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-8", children: /* @__PURE__ */ jsx("p", { className: `text-center text-${textColor}/60`, children: "You've got nothing else To-Do!" }) })
+        ) : (
+          /* Todo List */
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: todosToShow.map((todo, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `flex items-center gap-3 py-2.5 ${index !== todosToShow.length - 1 ? `border-b border-${textColor}/10` : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: `h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`,
+                      checked: !!todo.completedAt,
+                      readOnly: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "line-clamp-1 flex-1 text-sm", children: todo.body })
+                ]
+              },
+              todo.id
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+              remainingCount > 0 && /* @__PURE__ */ jsxs("span", { className: `text-sm text-${textColor}/50 underline`, children: [
+                remainingCount,
+                " more task",
+                remainingCount > 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(Plus, { className: `h-5 w-5 text-${textColor}/50` }) })
+            ] })
+          ] })
+        )
+      ]
+    }
+  );
+}
+var toDoWidgetPropertySchema = {
+  widgetType: "ToDoWidget",
+  displayName: "To-Do Widget",
+  tabsConfig: [{ id: "styling", label: "Styling" }],
+  fields: [
+    // Styling Tab - Title Group
+    {
+      key: "titleEnabled",
+      label: "Widget Title",
+      type: "boolean",
+      description: "Enable the title displayed above the todo list",
+      defaultValue: true,
+      tab: "styling",
+      group: "Title"
+    },
+    {
+      key: "titleText",
+      label: "Title",
+      type: "text",
+      description: "Title text displayed above the todo list",
+      defaultValue: "To-Do",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    },
+    getFontSizeField({
+      key: "titleFontSize",
+      label: "Title Font Size",
+      description: "Font size for the widget title",
+      defaultValue: "xl",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    getColorField({
+      key: "titleColor",
+      label: "Title Color",
+      description: "Color for the widget title",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    // Styling Tab - Design Group
+    {
+      type: "background",
+      key: "background",
+      label: "Background",
+      description: "Background for the widget container",
+      defaultValue: "background",
+      tab: "styling",
+      group: "Design"
+    },
+    getColorField({
+      key: "textColor",
+      label: "Text Color",
+      description: "Default text color for todo items",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Design"
+    }),
+    getColorField({
+      key: "accentColor",
+      label: "Accent Color",
+      description: "Color used for count badge and icon",
+      defaultValue: "primary",
+      tab: "styling",
+      group: "Design"
+    }),
+    {
+      key: "separator",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "maxItems",
+      label: "Max Items",
+      type: "number",
+      description: "Maximum number of todo items to display",
+      min: 1,
+      max: 20,
+      step: 1,
+      defaultValue: 5,
+      tab: "styling",
+      group: "Design"
+    },
+    getPaddingField({
+      key: "padding",
+      label: "Padding",
+      description: "Padding around the widget container",
+      defaultValue: 4,
+      tab: "styling",
+      group: "Design"
+    }),
+    getBorderRadiusField({
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Border radius for the widget container",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Design"
+    })
+  ]
+};
+
+export { ToDoWidget, toDoWidgetPropertySchema };
+//# sourceMappingURL=chunk-4XJCU4HY.js.map
+//# sourceMappingURL=chunk-4XJCU4HY.js.map

package/dist/chunk-4XJCU4HY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"names":[],"mappings":";;;;;;;AAIO,IAAM,QAAA,GAAW;AAAA,EACtB,GAAA,EAAK,CAAC,OAAO,CAAA;AAAA,EACb,MAAM,MAAM,CAAC,GAAG,QAAA,CAAS,KAAK,MAAM;AACtC,CAAA;AA4BO,SAAS,QAAA,GAAW;AACzB,EAAA,MAAM,EAAE,OAAA,EAAS,aAAA,EAAc,GAAI,mBAAA,EAAoB;AAEvD,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,SAAS,IAAA,EAAK;AAAA,IACxB,OAAA,EAAS,OAAO,EAAE,MAAA,EAAO,KAAuB;AAC9C,MAAA,MAAM,GAAA,GAAM,OAAA,GAAU,CAAA,EAAG,OAAO,CAAA,MAAA,CAAA,GAAW,QAAA;AAC3C,MAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,QAChC,OAAA,EAAS;AAAA,UACP,cAAA,EAAgB,kBAAA;AAAA,UAChB,GAAG,aAAA;AAAgB,SACrB;AAAA,QACA;AAAA,OACD,CAAA;AAED,MAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,QAAA,MAAM,IAAI,KAAA,CAAM,CAAA,uBAAA,EAA0B,QAAA,CAAS,MAAM,CAAA,CAAE,CAAA;AAAA,MAC7D;AAEA,MAAA,MAAM,IAAA,GAAkB,MAAM,QAAA,CAAS,IAAA,EAAK;AAC5C,MAAA,OAAO,eAAe,IAAI,CAAA;AAAA,IAC5B;AAAA,GACD,CAAA;AACH;AAEA,SAAS,eAAe,OAAA,EAA4B;AAClD,EAAA,OAAO,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,IAC5B,IAAI,IAAA,CAAK,EAAA;AAAA,IACT,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,OAAO,IAAA,CAAK,MAAA;AAAA,IACZ,aAAa,IAAA,CAAK,YAAA;AAAA,IAClB,WAAW,IAAA,CAAK,UAAA;AAAA,IAChB,WAAA,EAAa,IAAA,CAAK,OAAA,GACd,CAAA,EAAG,IAAA,CAAK,OAAA,CAAQ,UAAU,CAAA,CAAA,EAAI,IAAA,CAAK,OAAA,CAAQ,SAAS,CAAA,CAAA,GACpD;AAAA,GACN,CAAE,CAAA;AACJ;AClCO,SAAS,UAAA,CAAW;AAAA;AAAA,EAEzB,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY,OAAA;AAAA,EACZ,aAAA,GAAgB,IAAA;AAAA,EAChB,UAAA,GAAa,YAAA;AAAA;AAAA,EAGb,UAAA,GAAa;AAAA,IACX,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,SAAA,GAAY,YAAA;AAAA,EACZ,WAAA,GAAc,SAAA;AAAA,EACd,OAAA,GAAU,CAAA;AAAA,EACV,YAAA,GAAe,IAAA;AAAA;AAAA,EAGf,QAAA,GAAW,CAAA;AAAA,EAEX,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,eAAA,GAAkB,WAAW,KAAA,IAAS,YAAA;AAC5C,EAAA,MAAM,mBACH,UAAA,CAAW,QAAA,EAAU,SAAA,IAAa,UAAA,CAAW,UAAU,QAAA,KACxD,UAAA,CAAW,IAAA,KAAS,OAAA,GAChB,OAAO,UAAA,CAAW,QAAA,CAAS,aAAa,UAAA,CAAW,QAAA,CAAS,QAAQ,CAAA,CAAA,CAAA,GACpE,MAAA;AACN,EAAA,MAAM,EAAE,MAAM,KAAA,GAAQ,IAAI,SAAA,EAAW,OAAA,KAAY,QAAA,EAAS;AAG1D,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,MAAA,GAAS,CAAA,GAAI,QAAQ,EAAC;AAGjD,EAAA,MAAM,cAAc,YAAA,CAAa,MAAA,CAAO,CAAC,IAAA,KAAS,CAAC,KAAK,WAAW,CAAA;AACnE,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,KAAA,CAAM,CAAA,EAAG,QAAQ,CAAA;AACjD,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,MAAA,GAAS,WAAA,CAAY,MAAA;AACxD,EAAA,MAAM,OAAA,GAAU,YAAY,MAAA,KAAW,CAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,wBAAA,EAA2B,YAAY,CAAA,IAAA,EAAO,eAAe,CAAA,MAAA,EAAS,SAAS,CAAA,GAAA,EAAM,OAAO,CAAA,CAAA,EAAI,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MAC1H,KAAA,EAAO,EAAE,eAAA,EAAgB;AAAA,MACxB,GAAG,KAAA;AAAA,MAGJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA,YAAA,IAAgB,SAAA,oBACf,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,KAAA,EAAQ,aAAa,CAAA,gBAAA,EAAmB,UAAU,CAAA,CAAA;AAAA,cAE5D,QAAA,EAAA;AAAA;AAAA,WACH,EAEJ,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,CAAC,OAAA,IAAW,CAAC,SAAA,oBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,wBAAA,EAA2B,WAAW,CAAA,CAAA,EACpD,QAAA,EAAA,WAAA,CAAY,MAAA,EACf,CAAA;AAAA,4BAEF,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,CAAA,mDAAA,CAAA;AAAA,gBAEX,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,CAAA,aAAA,EAAgB,WAAW,CAAA,WAAA,CAAA,EAAe;AAAA;AAAA;AACnE,WAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,QAGC,SAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EACb,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EAAiF,CAAA,EAClG,CAAA,GACE,OAAA;AAAA;AAAA,8BAED,UAAA,EAAA,EAAW;AAAA,YACV,OAAA;AAAA;AAAA,0BAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EACb,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,CAAA,iBAAA,EAAoB,SAAS,CAAA,GAAA,CAAA,EAAO,QAAA,EAAA,gCAAA,EAElD,CAAA,EACF;AAAA;AAAA;AAAA,0BAGA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACZ,sBAAY,GAAA,CAAI,CAAC,MAAM,KAAA,qBACtB,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAW,kCACT,KAAA,KAAU,WAAA,CAAY,SAAS,CAAA,GAC3B,CAAA,gBAAA,EAAmB,SAAS,CAAA,GAAA,CAAA,GAC5B,EACN,CAAA,CAAA;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,OAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,UAAA;AAAA,sBACL,SAAA,EAAW,wCAAwC,SAAS,CAAA,kBAAA,CAAA;AAAA,sBAC5D,OAAA,EAAS,CAAC,CAAC,IAAA,CAAK,WAAA;AAAA,sBAChB,QAAA,EAAQ;AAAA;AAAA,mBACV;AAAA,kCACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,eAAK,IAAA,EAAK;AAAA;AAAA,eAAA;AAAA,cAbpD,IAAA,CAAK;AAAA,aAeb,CAAA,EACH,CAAA;AAAA,4BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EACZ,QAAA,EAAA;AAAA,cAAA,cAAA,GAAiB,qBAChB,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,CAAA,aAAA,CAAA,EACvC,QAAA,EAAA;AAAA,gBAAA,cAAA;AAAA,gBAAe,YAAA;AAAA,gBAAW,cAAA,GAAiB,IAAI,GAAA,GAAM;AAAA,eAAA,EACxD,CAAA;AAAA,8BAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,CAAA,GAAA,CAAA,EAAO,CAAA,EACnD;AAAA,aAAA,EACF;AAAA,WAAA,EACF;AAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEO,IAAM,wBAAA,GAAiD;AAAA,EAC5D,UAAA,EAAY,YAAA;AAAA,EACZ,WAAA,EAAa,cAAA;AAAA,EACb,YAAY,CAAC,EAAE,IAAI,SAAA,EAAW,KAAA,EAAO,WAAW,CAAA;AAAA,EAChD,MAAA,EAAQ;AAAA;AAAA,IAEN;AAAA,MACE,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,gDAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,WAAA,EAAa,0CAAA;AAAA,MACb,YAAA,EAAc,OAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACA,gBAAA,CAAiB;AAAA,MACf,GAAA,EAAK,eAAA;AAAA,MACL,KAAA,EAAO,iBAAA;AAAA,MACP,WAAA,EAAa,gCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA,IACD,aAAA,CAAc;AAAA,MACZ,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,WAAA,EAAa,4BAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA;AAAA,IAGD;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,aAAA,CAAc;AAAA,MACZ,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,mCAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,aAAA,CAAc;AAAA,MACZ,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,SAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EAAO,WAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,yCAAA;AAAA,MACb,GAAA,EAAK,CAAA;AAAA,MACL,GAAA,EAAK,EAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,eAAA,CAAgB;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,oBAAA,CAAqB;AAAA,MACnB,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,WAAA,EAAa,wCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR;AAAA;AAEL","file":"chunk-4XJCU4HY.js","sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\n\n// Query key factory\nexport const todoKeys = {\n  all: [\"todos\"] as const,\n  list: () => [...todoKeys.all, \"list\"] as const,\n};\n\n// API types matching the Fluid API response\nexport type TodoContact = {\n  id: number;\n  first_name: string;\n  last_name: string;\n};\n\nexport type ApiTodo = {\n  id: number;\n  body: string;\n  due_at: string | null;\n  completed_at: string | null;\n  created_at: string;\n  contact: TodoContact | null;\n};\n\n// Transformed todo for display\nexport type Todo = {\n  id: number;\n  body: string;\n  dueAt: string | null;\n  completedAt: string | null;\n  createdAt: string;\n  contactName: string | null;\n};\n\nexport function useTodos() {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n\n  return useQuery({\n    queryKey: todoKeys.list(),\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\n      const response = await fetch(url, {\n        headers: {\n          \"content-type\": \"application/json\",\n          ...getApiHeaders?.(),\n        },\n        signal,\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport { ListChecks, Plus } from \"lucide-react\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps) {\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  const { data: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <ListChecks className={`h-5 w-5 text-${accentColor}-foreground`} />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <Plus className={`h-5 w-5 text-${textColor}/50`} />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do Widget\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [\n    // Styling Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the todo list\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the todo list\",\n      defaultValue: \"To-Do\",\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 widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\n      defaultValue: \"primary\",\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: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the widget 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 widget container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"]}

package/dist/chunk-5HHN5MRZ.js

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=chunk-5HHN5MRZ.js.map
+//# sourceMappingURL=chunk-5HHN5MRZ.js.map

package/dist/chunk-5HHN5MRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAA+B;AACnD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-5HHN5MRZ.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: readonly ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/chunk-6GF46P3S.js

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/contexts/RegistryContext.tsx
+var RegistryContext = createContext(
+  void 0
+);
+function RegistryProvider({
+  registry,
+  children
+}) {
+  const parentRegistry = useContext(RegistryContext);
+  const contextValue = registry ?? parentRegistry;
+  if (!contextValue) {
+    throw new Error(
+      "RegistryProvider requires a registry prop or must be nested within another RegistryProvider."
+    );
+  }
+  return /* @__PURE__ */ jsx(RegistryContext.Provider, { value: contextValue, children });
+}
+function useRegistry() {
+  const registry = useContext(RegistryContext);
+  if (!registry) {
+    throw new Error(
+      "useRegistry must be used within a RegistryProvider with a registry prop."
+    );
+  }
+  return registry;
+}
+
+export { RegistryContext, RegistryProvider, useRegistry };
+//# sourceMappingURL=chunk-6GF46P3S.js.map
+//# sourceMappingURL=chunk-6GF46P3S.js.map

package/dist/chunk-6GF46P3S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/RegistryContext.tsx"],"names":[],"mappings":";;;;AAwCO,IAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B;AACF;AAWO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA;AACF,CAAA,EAA0B;AAExB,EAAA,MAAM,cAAA,GAAiB,WAAW,eAAe,CAAA;AACjD,EAAA,MAAM,eAAe,QAAA,IAAY,cAAA;AAEjC,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,2BACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;AAMO,SAAS,WAAA,GAA8B;AAC5C,EAAA,MAAM,QAAA,GAAW,WAAW,eAAe,CAAA;AAE3C,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT","file":"chunk-6GF46P3S.js","sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext = createContext<WidgetRegistry | undefined>(\n  undefined,\n);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps) {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"]}

package/dist/chunk-7JIRJTGY.js

@@ -0,0 +1,32 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/ui/scroll-arrows.tsx
+function ScrollArrows({ onPrevious, onNext }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "flex h-6 w-6 items-center justify-center rounded-2xl bg-foreground text-background opacity-70 transition-colors hover:opacity-50 disabled:opacity-30",
+        onClick: onPrevious,
+        "aria-label": "Previous slide",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "flex h-6 w-6 items-center justify-center rounded-2xl bg-foreground text-background opacity-70 transition-colors hover:opacity-50 disabled:opacity-30",
+        onClick: onNext,
+        "aria-label": "Next slide",
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+
+export { ScrollArrows };
+//# sourceMappingURL=chunk-7JIRJTGY.js.map
+//# sourceMappingURL=chunk-7JIRJTGY.js.map

package/dist/chunk-7JIRJTGY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/scroll-arrows.tsx"],"names":[],"mappings":";;;;AAOO,SAAS,YAAA,CAAa,EAAE,UAAA,EAAY,MAAA,EAAO,EAAsB;AACtE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAU,sJAAA;AAAA,QACV,OAAA,EAAS,UAAA;AAAA,QACT,YAAA,EAAW,gBAAA;AAAA,QAEX,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,KACnC;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAU,sJAAA;AAAA,QACV,OAAA,EAAS,MAAA;AAAA,QACT,YAAA,EAAW,YAAA;AAAA,QAEX,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA;AACpC,GAAA,EACF,CAAA;AAEJ","file":"chunk-7JIRJTGY.js","sourcesContent":["import { ChevronLeft, ChevronRight } from \"lucide-react\";\n\ntype ScrollArrowsProps = {\n  onPrevious: () => void;\n  onNext: () => void;\n};\n\nexport function ScrollArrows({ onPrevious, onNext }: ScrollArrowsProps) {\n  return (\n    <>\n      <button\n        type=\"button\"\n        className=\"flex h-6 w-6 items-center justify-center rounded-2xl bg-foreground text-background opacity-70 transition-colors hover:opacity-50 disabled:opacity-30\"\n        onClick={onPrevious}\n        aria-label=\"Previous slide\"\n      >\n        <ChevronLeft className=\"h-4 w-4\" />\n      </button>\n      <button\n        type=\"button\"\n        className=\"flex h-6 w-6 items-center justify-center rounded-2xl bg-foreground text-background opacity-70 transition-colors hover:opacity-50 disabled:opacity-30\"\n        onClick={onNext}\n        aria-label=\"Next slide\"\n      >\n        <ChevronRight className=\"h-4 w-4\" />\n      </button>\n    </>\n  );\n}\n"]}