@fluid-app/rep-widgets 0.1.16 → 0.1.17

package/dist/ScreenRenderer-CVJMpQ9A.mjs

@@ -0,0 +1,76 @@
+import { n as RegistryProvider, r as useRegistry } from "./RegistryContext-CscXrsRa.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { WIDGET_TYPE_NAMES } from "@fluid-app/rep-core/types";
+//#region src/core/ScreenRenderer.tsx
+/**
+* Internal component that uses the registry from context.
+* This allows us to avoid prop drilling the registry.
+*/
+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
+		} : {};
+		return /* @__PURE__ */ jsx("div", {
+			className: "h-full w-full overflow-x-hidden",
+			children: /* @__PURE__ */ jsx(Component, {
+				...widget.props,
+				...additionalProps
+			})
+		}, 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, []);
+		})
+	});
+}
+/**
+* ScreenRenderer - View-only component for rendering widget screens.
+*
+* This is a simplified version designed for the SDK that only handles
+* rendering widgets without edit mode or drag-and-drop functionality.
+*
+* Features:
+* - Static rendering of widgets
+* - Registry context: No prop drilling for widget registry
+* - Container widget support with path tracking
+*
+* Usage:
+* ```tsx
+* import { ScreenRenderer } from '@fluid-app/rep-widgets/core';
+* import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';
+*
+* <ScreenRenderer
+*   screen={widgets}
+*   registry={WIDGET_REGISTRY}
+* />
+* ```
+*/
+function ScreenRenderer(props) {
+	const { screen, registry, containerWidgetTypes = [WIDGET_TYPE_NAMES.Layout, WIDGET_TYPE_NAMES.Container], className } = props;
+	return /* @__PURE__ */ jsx(RegistryProvider, {
+		...registry !== void 0 ? { registry } : {},
+		children: /* @__PURE__ */ jsx(ScreenRendererContent, {
+			screen,
+			containerWidgetTypes,
+			className
+		})
+	});
+}
+//#endregion
+export { ScreenRenderer as t };
+
+//# sourceMappingURL=ScreenRenderer-CVJMpQ9A.mjs.map

package/dist/ScreenRenderer-CVJMpQ9A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenRenderer-CVJMpQ9A.mjs","names":[],"sources":["../src/core/ScreenRenderer.tsx"],"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"],"mappings":";;;;;;;;;AAkCA,SAAS,sBAAsB,EAC7B,QACA,sBACA,aAC6B;CAC7B,MAAM,WAAW,aAAa;CAG9B,MAAM,oBAAoB,aACvB,eAAuB,qBAAqB,SAAS,WAAW,EACjE,CAAC,qBAAqB,CACvB;CAGD,MAAM,eAAe,aAClB,QAAsB,OAAe,gBAA4B;EAChE,MAAM,YAAY,SAAS,OAAO;AAClC,MAAI,CAAC,WAAW;AACd,WAAQ,KACN,gBAAgB,OAAO,OAAO,KAAK,CAAC,yBACrC;AACD,UAAO;;EAGT,MAAM,aAAa,CAAC,GAAG,aAAa,MAAM;EAG1C,MAAM,kBAAkB,kBAAkB,OAAO,KAAK,GAClD;GACE,UAAU,OAAO;GACjB;GACD,GACD,EAAE;AAON,SACE,oBAAC,OAAD;GAEE,WAAU;aAEV,oBAAC,WAAD;IATF,GAAG,OAAO;IACV,GAAG;IAQuB,CAAA;GACpB,EAJC,OAAO,MAAM,MAId;IAGV,CAAC,UAAU,kBAAkB,CAC9B;AAED,QACE,oBAAC,OAAD;EAAK,WAAW,aAAa;YAC1B,QAAQ,KAAK,MAAM,UAAU;AAE5B,OAAI,CAAC,KAAM,QAAO;AAClB,UAAO,aAAa,MAAM,OAAO,EAAE,CAAC;IACpC;EACE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,SAAgB,eAGd,OAA+B;CAC/B,MAAM,EACJ,QACA,UACA,uBAAuB,CACrB,kBAAkB,QAClB,kBAAkB,UACnB,EACD,cACE;AAMJ,QACE,oBAAC,kBAAD;EAAkB,GAHU,aAAa,KAAA,IAAY,EAAE,UAAU,GAAG,EAAE;YAQpE,oBAAC,uBAAD;GACU;GACc;GACX;GACX,CAAA;EACe,CAAA"}

package/dist/ScreenRendererContext-D62_Fazh.cjs

@@ -0,0 +1,35 @@
+require("./chunk-CZWwpsFl.cjs");
+let react = require("react");
+//#region src/contexts/ScreenRendererContext.tsx
+/**
+* Context for providing an alternative ScreenRenderer component.
+*
+* This allows packages like rep-builder to inject their own ScreenRenderer
+* (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets
+* use the richer renderer instead of the basic view-only one.
+*
+* Default is undefined — container widgets fall back to the local ScreenRenderer import.
+*/
+const ScreenRendererContext = (0, react.createContext)(void 0);
+/**
+* Hook to get the ScreenRenderer component from context.
+* Returns undefined if no override has been provided.
+*/
+function useScreenRenderer() {
+	return (0, react.useContext)(ScreenRendererContext);
+}
+//#endregion
+Object.defineProperty(exports, "ScreenRendererContext", {
+	enumerable: true,
+	get: function() {
+		return ScreenRendererContext;
+	}
+});
+Object.defineProperty(exports, "useScreenRenderer", {
+	enumerable: true,
+	get: function() {
+		return useScreenRenderer;
+	}
+});
+
+//# sourceMappingURL=ScreenRendererContext-D62_Fazh.cjs.map

package/dist/ScreenRendererContext-D62_Fazh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenRendererContext-D62_Fazh.cjs","names":[],"sources":["../src/contexts/ScreenRendererContext.tsx"],"sourcesContent":["import { createContext, useContext, type ComponentType } from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\nimport type { WidgetRegistry } from \"./RegistryContext\";\n\n/**\n * Props that any ScreenRenderer must accept.\n * This is the minimal interface used by container widgets (e.g. LayoutWidget)\n * to render their children.\n */\nexport interface ScreenRendererComponentProps {\n  screen: WidgetSchema[];\n  registry?: WidgetRegistry;\n  className?: string;\n}\n\n/**\n * Context for providing an alternative ScreenRenderer component.\n *\n * This allows packages like rep-builder to inject their own ScreenRenderer\n * (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets\n * use the richer renderer instead of the basic view-only one.\n *\n * Default is undefined — container widgets fall back to the local ScreenRenderer import.\n */\nexport const ScreenRendererContext = createContext<\n  ComponentType<ScreenRendererComponentProps> | undefined\n>(undefined);\n\n/**\n * Hook to get the ScreenRenderer component from context.\n * Returns undefined if no override has been provided.\n */\nexport function useScreenRenderer():\n  | ComponentType<ScreenRendererComponentProps>\n  | undefined {\n  return useContext(ScreenRendererContext);\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,yBAAA,GAAA,MAAA,eAEX,KAAA,EAAU;;;;;AAMZ,SAAgB,oBAEF;AACZ,SAAA,GAAA,MAAA,YAAkB,sBAAsB"}

package/dist/ScreenRendererContext-DaldtZnX.mjs

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+//#region src/contexts/ScreenRendererContext.tsx
+/**
+* Context for providing an alternative ScreenRenderer component.
+*
+* This allows packages like rep-builder to inject their own ScreenRenderer
+* (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets
+* use the richer renderer instead of the basic view-only one.
+*
+* Default is undefined — container widgets fall back to the local ScreenRenderer import.
+*/
+const ScreenRendererContext = createContext(void 0);
+/**
+* Hook to get the ScreenRenderer component from context.
+* Returns undefined if no override has been provided.
+*/
+function useScreenRenderer() {
+	return useContext(ScreenRendererContext);
+}
+//#endregion
+export { useScreenRenderer as n, ScreenRendererContext as t };
+
+//# sourceMappingURL=ScreenRendererContext-DaldtZnX.mjs.map

package/dist/ScreenRendererContext-DaldtZnX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenRendererContext-DaldtZnX.mjs","names":[],"sources":["../src/contexts/ScreenRendererContext.tsx"],"sourcesContent":["import { createContext, useContext, type ComponentType } from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\nimport type { WidgetRegistry } from \"./RegistryContext\";\n\n/**\n * Props that any ScreenRenderer must accept.\n * This is the minimal interface used by container widgets (e.g. LayoutWidget)\n * to render their children.\n */\nexport interface ScreenRendererComponentProps {\n  screen: WidgetSchema[];\n  registry?: WidgetRegistry;\n  className?: string;\n}\n\n/**\n * Context for providing an alternative ScreenRenderer component.\n *\n * This allows packages like rep-builder to inject their own ScreenRenderer\n * (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets\n * use the richer renderer instead of the basic view-only one.\n *\n * Default is undefined — container widgets fall back to the local ScreenRenderer import.\n */\nexport const ScreenRendererContext = createContext<\n  ComponentType<ScreenRendererComponentProps> | undefined\n>(undefined);\n\n/**\n * Hook to get the ScreenRenderer component from context.\n * Returns undefined if no override has been provided.\n */\nexport function useScreenRenderer():\n  | ComponentType<ScreenRendererComponentProps>\n  | undefined {\n  return useContext(ScreenRendererContext);\n}\n"],"mappings":";;;;;;;;;;;AAwBA,MAAa,wBAAwB,cAEnC,KAAA,EAAU;;;;;AAMZ,SAAgB,oBAEF;AACZ,QAAO,WAAW,sBAAsB"}

package/dist/SpacerWidget-Bs18KYH9.mjs

@@ -0,0 +1,43 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { getHeightField } from "@fluid-app/rep-core/registries";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsUpDown } from "@fortawesome/pro-regular-svg-icons";
+//#region src/widgets/SpacerWidget.tsx
+var SpacerWidget_exports = /* @__PURE__ */ __exportAll({
+	SpacerWidget: () => SpacerWidget,
+	spacerWidgetPropertySchema: () => spacerWidgetPropertySchema
+});
+function SpacerWidget({ customHeight = "128px", previewMode = false, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full ${className ?? ""}`,
+		style: {
+			height: customHeight,
+			...style
+		},
+		"aria-hidden": "true",
+		...props,
+		children: previewMode && /* @__PURE__ */ jsxs("div", {
+			className: "border-muted-400 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed",
+			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faArrowsUpDown }), /* @__PURE__ */ jsx("span", { children: "SPACER" })]
+		})
+	});
+}
+const spacerWidgetPropertySchema = {
+	widgetType: "SpacerWidget",
+	displayName: "Spacer",
+	fields: [getHeightField({
+		key: "customHeight",
+		label: "Height",
+		description: "Height of the spacer",
+		min: 1,
+		max: 1200,
+		step: 1,
+		defaultValue: "128px",
+		group: "Spacing"
+	})]
+};
+//#endregion
+export { SpacerWidget_exports as n, spacerWidgetPropertySchema as r, SpacerWidget as t };
+
+//# sourceMappingURL=SpacerWidget-Bs18KYH9.mjs.map

package/dist/SpacerWidget-Bs18KYH9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacerWidget-Bs18KYH9.mjs","names":[],"sources":["../src/widgets/SpacerWidget.tsx"],"sourcesContent":["import {\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport { faArrowsUpDown } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { ComponentProps } from \"react\";\n\ntype SpacerWidgetProps = ComponentProps<\"div\"> & {\n  /**\n   * Custom height as a CSS value (e.g., \"128px\", \"8rem\", \"20vh\")\n   */\n  customHeight?: string;\n  /**\n   * Not customizable, determines if we should show a preview image in the container\n   */\n  previewMode?: boolean;\n};\n\nexport function SpacerWidget({\n  customHeight = \"128px\",\n  previewMode = false,\n  className,\n  style,\n  ...props\n}: SpacerWidgetProps) {\n  return (\n    <div\n      className={`w-full ${className ?? \"\"}`}\n      style={{ height: customHeight, ...style }}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {previewMode && (\n        <div className=\"border-muted-400 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed\">\n          <FontAwesomeIcon icon={faArrowsUpDown} />\n          <span>SPACER</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const spacerWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"SpacerWidget\",\n  displayName: \"Spacer\",\n  fields: [\n    getHeightField({\n      key: \"customHeight\",\n      label: \"Height\",\n      description: \"Height of the spacer\",\n      min: 1,\n      max: 1200,\n      step: 1,\n      defaultValue: \"128px\",\n      group: \"Spacing\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,aAAa,EAC3B,eAAe,SACf,cAAc,OACd,WACA,OACA,GAAG,SACiB;AACpB,QACE,oBAAC,OAAD;EACE,WAAW,UAAU,aAAa;EAClC,OAAO;GAAE,QAAQ;GAAc,GAAG;GAAO;EACzC,eAAY;EACZ,GAAI;YAEH,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,iBAAD,EAAiB,MAAM,gBAAkB,CAAA,EACzC,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA,CACf;;EAEJ,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ,CACN,eAAe;EACb,KAAK;EACL,OAAO;EACP,aAAa;EACb,KAAK;EACL,KAAK;EACL,MAAM;EACN,cAAc;EACd,OAAO;EACR,CAAC,CACH;CACF"}

package/dist/SpacerWidget-D-Foe9wG.cjs

@@ -0,0 +1,60 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fortawesome_react_fontawesome = require("@fortawesome/react-fontawesome");
+let _fortawesome_pro_regular_svg_icons = require("@fortawesome/pro-regular-svg-icons");
+//#region src/widgets/SpacerWidget.tsx
+var SpacerWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	SpacerWidget: () => SpacerWidget,
+	spacerWidgetPropertySchema: () => spacerWidgetPropertySchema
+});
+function SpacerWidget({ customHeight = "128px", previewMode = false, className, style, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `w-full ${className ?? ""}`,
+		style: {
+			height: customHeight,
+			...style
+		},
+		"aria-hidden": "true",
+		...props,
+		children: previewMode && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-muted-400 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, { icon: _fortawesome_pro_regular_svg_icons.faArrowsUpDown }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "SPACER" })]
+		})
+	});
+}
+const spacerWidgetPropertySchema = {
+	widgetType: "SpacerWidget",
+	displayName: "Spacer",
+	fields: [(0, _fluid_app_rep_core_registries.getHeightField)({
+		key: "customHeight",
+		label: "Height",
+		description: "Height of the spacer",
+		min: 1,
+		max: 1200,
+		step: 1,
+		defaultValue: "128px",
+		group: "Spacing"
+	})]
+};
+//#endregion
+Object.defineProperty(exports, "SpacerWidget", {
+	enumerable: true,
+	get: function() {
+		return SpacerWidget;
+	}
+});
+Object.defineProperty(exports, "SpacerWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return SpacerWidget_exports;
+	}
+});
+Object.defineProperty(exports, "spacerWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return spacerWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=SpacerWidget-D-Foe9wG.cjs.map

package/dist/SpacerWidget-D-Foe9wG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacerWidget-D-Foe9wG.cjs","names":["FontAwesomeIcon","faArrowsUpDown"],"sources":["../src/widgets/SpacerWidget.tsx"],"sourcesContent":["import {\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport { faArrowsUpDown } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { ComponentProps } from \"react\";\n\ntype SpacerWidgetProps = ComponentProps<\"div\"> & {\n  /**\n   * Custom height as a CSS value (e.g., \"128px\", \"8rem\", \"20vh\")\n   */\n  customHeight?: string;\n  /**\n   * Not customizable, determines if we should show a preview image in the container\n   */\n  previewMode?: boolean;\n};\n\nexport function SpacerWidget({\n  customHeight = \"128px\",\n  previewMode = false,\n  className,\n  style,\n  ...props\n}: SpacerWidgetProps) {\n  return (\n    <div\n      className={`w-full ${className ?? \"\"}`}\n      style={{ height: customHeight, ...style }}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {previewMode && (\n        <div className=\"border-muted-400 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed\">\n          <FontAwesomeIcon icon={faArrowsUpDown} />\n          <span>SPACER</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const spacerWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"SpacerWidget\",\n  displayName: \"Spacer\",\n  fields: [\n    getHeightField({\n      key: \"customHeight\",\n      label: \"Height\",\n      description: \"Height of the spacer\",\n      min: 1,\n      max: 1200,\n      step: 1,\n      defaultValue: \"128px\",\n      group: \"Spacing\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,aAAa,EAC3B,eAAe,SACf,cAAc,OACd,WACA,OACA,GAAG,SACiB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,UAAU,aAAa;EAClC,OAAO;GAAE,QAAQ;GAAc,GAAG;GAAO;EACzC,eAAY;EACZ,GAAI;YAEH,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,iBAAD,EAAiB,MAAMC,mCAAAA,gBAAkB,CAAA,EACzC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAM,UAAa,CAAA,CACf;;EAEJ,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ,EAAA,GAAA,+BAAA,gBACS;EACb,KAAK;EACL,OAAO;EACP,aAAa;EACb,KAAK;EACL,KAAK;EACL,MAAM;EACN,cAAc;EACd,OAAO;EACR,CAAC,CACH;CACF"}