@fluid-app/rep-widgets 0.1.15 → 0.1.17

package/dist/ImageWidget-DTwM7xCz.cjs

@@ -0,0 +1,167 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_MediaRenderer = require("./MediaRenderer-CcJvyOJ1.cjs");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/widgets/ImageWidget.tsx
+var ImageWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	ImageWidget: () => ImageWidget,
+	imageWidgetPropertySchema: () => imageWidgetPropertySchema
+});
+function ImageWidget({ src = "", alt = "", borderRadius = "md", verticalSizing = "auto", fixedHeight = "200px", displayFit = "cover", focusPoint, linkUrl, resource, useCustomUrl }) {
+	const effectiveSrc = useCustomUrl ? src : resource?.imageUrl ?? src;
+	const effectiveAlt = resource?.title ?? alt;
+	const isFixed = verticalSizing === "fixed";
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `w-full rounded-${borderRadius} overflow-hidden`,
+		style: isFixed ? { height: fixedHeight } : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, {
+			mediaType: "image",
+			src: effectiveSrc,
+			alt: effectiveAlt,
+			objectFit: isFixed ? displayFit : "contain",
+			focusPoint: isFixed ? focusPoint : void 0
+		})
+	});
+	if (linkUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: linkUrl,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: content
+	});
+	return content;
+}
+const imageWidgetPropertySchema = {
+	widgetType: "ImageWidget",
+	displayName: "Image",
+	fields: [
+		{
+			key: "resource",
+			label: "Select Image",
+			type: "resource",
+			description: "Browse and select an image",
+			allowedTypes: ["Medium"],
+			group: "Content"
+		},
+		{
+			key: "useCustomUrl",
+			label: "Use Custom URL",
+			type: "boolean",
+			description: "Enter a custom image URL instead of selecting media",
+			defaultValue: false,
+			group: "Content"
+		},
+		{
+			key: "src",
+			label: "Image URL",
+			type: "text",
+			description: "The source URL of the image",
+			defaultValue: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop",
+			group: "Content",
+			requiresKeyToBeTrue: "useCustomUrl"
+		},
+		{
+			key: "alt",
+			label: "Alt Text",
+			type: "text",
+			description: "Alternative text for the image (for accessibility)",
+			defaultValue: "Placeholder image",
+			group: "Content"
+		},
+		(0, _fluid_app_rep_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the container",
+			defaultValue: "md",
+			group: "Design"
+		}),
+		{
+			key: "verticalSizing",
+			label: "Vertical Sizing",
+			type: "buttonGroup",
+			description: "How the image height is determined",
+			options: [{
+				label: "Auto",
+				value: "auto"
+			}, {
+				label: "Fixed",
+				value: "fixed"
+			}],
+			defaultValue: "auto",
+			group: "Design"
+		},
+		(0, _fluid_app_rep_core_registries.getHeightField)({
+			key: "fixedHeight",
+			label: "Height",
+			description: "Fixed height of the image container",
+			min: 10,
+			max: 1200,
+			step: 10,
+			defaultValue: "200px",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		}),
+		{
+			key: "displayFit",
+			label: "Display Fit",
+			type: "buttonGroup",
+			description: "How the image fills its container",
+			options: [{
+				label: "Cover",
+				value: "cover"
+			}, {
+				label: "Contain",
+				value: "contain"
+			}],
+			defaultValue: "cover",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "focusPoint",
+			label: "Focus Point",
+			type: "contentPosition",
+			description: "The focal point of the image within its container",
+			defaultValue: "center",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "linkUrl",
+			label: "Link URL",
+			type: "text",
+			description: "Optional URL to wrap the image in a link",
+			defaultValue: "",
+			group: "Link"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "ImageWidget", {
+	enumerable: true,
+	get: function() {
+		return ImageWidget;
+	}
+});
+Object.defineProperty(exports, "ImageWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return ImageWidget_exports;
+	}
+});
+Object.defineProperty(exports, "imageWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return imageWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=ImageWidget-DTwM7xCz.cjs.map

package/dist/ImageWidget-DTwM7xCz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWidget-DTwM7xCz.cjs","names":["MediaRenderer"],"sources":["../src/widgets/ImageWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\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    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the image container\",\n      min: 10,\n      max: 1200,\n      step: 10,\n      defaultValue: \"200px\",\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"],"mappings":";;;;;;;;;AAyBA,SAAgB,YAAY,EAC1B,MAAM,IACN,MAAM,IACN,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,SACA,UACA,gBACmB;CACnB,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,eAAe,UAAU,SAAS;CAExC,MAAM,UAAU,mBAAmB;CAEnC,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,kBAAkB,aAAa;EAC1C,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,eAAD;GACE,WAAU;GACV,KAAK;GACL,KAAK;GACL,WAAW,UAAU,aAAa;GAClC,YAAY,UAAU,aAAa,KAAA;GACnC,CAAA;EACE,CAAA;AAGR,KAAI,QACF,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,MAAM;EAAS,QAAO;EAAS,KAAI;YACnC;EACC,CAAA;AAIR,QAAO;;AAGT,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cACE;GACF,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;2DAGoB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,OAAO;GACR;qDACc;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACF;CACF"}

package/dist/LayoutWidget-B1itwSsn.mjs

@@ -0,0 +1,107 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { c as getPaddingField, n as getBorderRadiusField, o as getGapField, t as gapValues } from "./fields-C29fgJje.mjs";
+import { r as useRegistry } from "./RegistryContext-CscXrsRa.mjs";
+import { t as ScreenRenderer } from "./ScreenRenderer-CVJMpQ9A.mjs";
+import { n as useScreenRenderer } from "./ScreenRendererContext-DaldtZnX.mjs";
+import { jsx } from "react/jsx-runtime";
+import { sectionLayoutConfig } from "@fluid-app/rep-core/types";
+import { groupChildrenByColumn } from "@fluid-app/rep-core/widget-utils";
+//#region src/widgets/LayoutWidget.tsx
+var LayoutWidget_exports = /* @__PURE__ */ __exportAll({
+	LayoutWidget: () => LayoutWidget,
+	layoutWidgetPropertySchema: () => layoutWidgetPropertySchema
+});
+const DEFAULT_BACKGROUND = {
+	type: "solid",
+	color: "background"
+};
+const DEFAULT_CHILDREN = [];
+const LayoutWidget = ({ sectionLayout = "single-column", gap = 4, gapSize, background = DEFAULT_BACKGROUND, padding = 0, borderRadius = "md", children = DEFAULT_CHILDREN, registry, className = "", minHeight }) => {
+	const contextRegistry = useRegistry();
+	const effectiveRegistry = registry || contextRegistry;
+	const ScreenRenderer$1 = useScreenRenderer() ?? ScreenRenderer;
+	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 layoutConfig = sectionLayoutConfig[sectionLayout];
+	const columnCount = layoutConfig.columns;
+	const gapSizeValue = gapSize ? gapValues[gapSize] : gap;
+	const layoutClasses = [
+		"grid",
+		"grid-cols-1",
+		layoutConfig.gridClasses,
+		`bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,
+		`gap-${gapSizeValue}`,
+		className
+	].filter(Boolean).join(" ");
+	const containerStyle = {
+		...minHeight ? { minHeight: `${minHeight}px` } : {},
+		alignItems: "start",
+		backgroundImage
+	};
+	if (!effectiveRegistry) {
+		console.warn("Layout widget: No registry provided, cannot render children");
+		return /* @__PURE__ */ jsx("div", {
+			className: layoutClasses,
+			style: containerStyle
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container",
+		children: /* @__PURE__ */ jsx("div", {
+			className: layoutClasses,
+			style: containerStyle,
+			children: groupChildrenByColumn(children, columnCount).map((columnChildren, colIndex) => /* @__PURE__ */ jsx(ScreenRenderer$1, {
+				screen: columnChildren,
+				registry: effectiveRegistry,
+				className: `flex flex-col gap-${gapSizeValue}`
+			}, colIndex))
+		})
+	});
+};
+const layoutWidgetPropertySchema = {
+	widgetType: "LayoutWidget",
+	displayName: "Layout",
+	fields: [
+		{
+			key: "sectionLayout",
+			label: "Layout Type",
+			type: "sectionLayoutSelect",
+			description: "Column layout configuration",
+			defaultValue: "single-column",
+			group: "Layout"
+		},
+		getGapField({
+			key: "gapSize",
+			label: "Gap",
+			description: "Gap between columns and widgets",
+			defaultValue: "md",
+			group: "Design"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the layout container",
+			defaultValue: "background",
+			group: "Design"
+		},
+		getPaddingField({
+			key: "padding",
+			label: "Padding",
+			description: "Padding for the layout container",
+			defaultValue: 4,
+			group: "Design"
+		}),
+		getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the layout container",
+			defaultValue: "md",
+			group: "Design"
+		})
+	]
+};
+//#endregion
+export { LayoutWidget_exports as n, layoutWidgetPropertySchema as r, LayoutWidget as t };
+
+//# sourceMappingURL=LayoutWidget-B1itwSsn.mjs.map

package/dist/LayoutWidget-B1itwSsn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutWidget-B1itwSsn.mjs","names":["ScreenRenderer","DefaultScreenRenderer"],"sources":["../src/widgets/LayoutWidget.tsx"],"sourcesContent":["import { ScreenRenderer as DefaultScreenRenderer } from \"../core/ScreenRenderer\";\nimport { useRegistry } from \"../contexts/RegistryContext\";\nimport { useScreenRenderer } from \"../contexts/ScreenRendererContext\";\nimport type {\n  TypedWidgetSchema,\n  WidgetSchema,\n  BorderRadiusOptions,\n  PaddingOptions,\n  GapOptions,\n  SectionLayoutType,\n  BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport { sectionLayoutConfig } from \"@fluid-app/rep-core/types\";\nimport type { ComponentType } from \"react\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { groupChildrenByColumn } from \"@fluid-app/rep-core/widget-utils\";\n\nconst DEFAULT_BACKGROUND: BackgroundValue = {\n  type: \"solid\",\n  color: \"background\",\n};\nconst DEFAULT_CHILDREN: (WidgetSchema | null)[] = [];\n\ntype LayoutProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>> = Record<\n    string,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ComponentType<any>\n  >,\n> = {\n  // Section layout type (masonry-style column configuration)\n  sectionLayout?: SectionLayoutType;\n\n  // Legacy props (deprecated, kept for backward compatibility)\n  type?: \"flex\" | \"grid\";\n  columns?: number;\n  rows?: number;\n  direction?: string;\n  justify?: string;\n  align?: string;\n  wrap?: boolean;\n\n  // Spacing\n  gap?: number; // deprecated, use gapSize instead\n  gapSize?: GapOptions;\n\n  // Design\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Content - widgets with columnIndex property for masonry layout\n  children: (TypedWidgetSchema<T> | null)[] | (WidgetSchema | null)[];\n\n  // Widget registry (passed down from parent renderer)\n  registry?: T;\n\n  // Styling\n  className?: string;\n  minHeight?: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutWidget = <T extends Record<string, ComponentType<any>>>({\n  sectionLayout = \"single-column\",\n  gap = 4,\n  gapSize,\n  background = DEFAULT_BACKGROUND,\n  padding = 0,\n  borderRadius = \"md\",\n  children = DEFAULT_CHILDREN,\n  registry,\n  className = \"\",\n  minHeight,\n}: LayoutProps<T>) => {\n  // Get registry from context if not provided as prop\n  const contextRegistry = useRegistry();\n  const effectiveRegistry = registry || contextRegistry;\n\n  // Use ScreenRenderer from context (e.g. rep-builder's), fall back to local\n  const ContextScreenRenderer = useScreenRenderer();\n  const ScreenRenderer = ContextScreenRenderer ?? DefaultScreenRenderer;\n\n  // Extract background values\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\n  // Get layout configuration\n  const layoutConfig = sectionLayoutConfig[sectionLayout];\n  const columnCount = layoutConfig.columns;\n\n  // Calculate gap size\n  const gapSizeValue = gapSize ? gapValues[gapSize] : gap;\n\n  // Build CSS classes for masonry layout with responsive columns\n  const layoutClasses = [\n    \"grid\",\n    \"grid-cols-1\", // Mobile: single column\n    layoutConfig.gridClasses, // Desktop (@md+): configured columns\n    `bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,\n    `gap-${gapSizeValue}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Container style\n  const containerStyle: React.CSSProperties = {\n    ...(minHeight ? { minHeight: `${minHeight}px` } : {}),\n    alignItems: \"start\", // Masonry-style: columns don't stretch to match height\n    backgroundImage,\n  };\n\n  // If no registry is available, we can't render the children\n  if (!effectiveRegistry) {\n    console.warn(\"Layout widget: No registry provided, cannot render children\");\n    return <div className={layoutClasses} style={containerStyle} />;\n  }\n\n  // Group children by column\n  const columnGroups = groupChildrenByColumn(\n    children as WidgetSchema[],\n    columnCount,\n  );\n\n  // Regular render mode - render each column as a flex column\n  return (\n    <div className=\"@container\">\n      <div className={layoutClasses} style={containerStyle}>\n        {columnGroups.map((columnChildren, colIndex) => (\n          <ScreenRenderer\n            key={colIndex}\n            screen={columnChildren}\n            registry={effectiveRegistry}\n            className={`flex flex-col gap-${gapSizeValue}`}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport const layoutWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"LayoutWidget\",\n  displayName: \"Layout\",\n  fields: [\n    // Layout Configuration - Visual selector matching Figma design\n    {\n      key: \"sectionLayout\",\n      label: \"Layout Type\",\n      type: \"sectionLayoutSelect\",\n      description: \"Column layout configuration\",\n      defaultValue: \"single-column\",\n      group: \"Layout\",\n    },\n\n    // Design\n    getGapField({\n      key: \"gapSize\",\n      label: \"Gap\",\n      description: \"Gap between columns and widgets\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the layout container\",\n      defaultValue: \"background\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the layout container\",\n      defaultValue: 4,\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the layout container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,qBAAsC;CAC1C,MAAM;CACN,OAAO;CACR;AACD,MAAM,mBAA4C,EAAE;AA2CpD,MAAa,gBAA8D,EACzE,gBAAgB,iBAChB,MAAM,GACN,SACA,aAAa,oBACb,UAAU,GACV,eAAe,MACf,WAAW,kBACX,UACA,YAAY,IACZ,gBACoB;CAEpB,MAAM,kBAAkB,aAAa;CACrC,MAAM,oBAAoB,YAAY;CAItC,MAAMA,mBADwB,mBAAmB,IACDC;CAGhD,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;CAGN,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,aAAa;CAGjC,MAAM,eAAe,UAAU,UAAU,WAAW;CAGpD,MAAM,gBAAgB;EACpB;EACA;EACA,aAAa;EACb,MAAM,gBAAgB,KAAK,QAAQ,WAAW;EAC9C,OAAO;EACP;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;CAGZ,MAAM,iBAAsC;EAC1C,GAAI,YAAY,EAAE,WAAW,GAAG,UAAU,KAAK,GAAG,EAAE;EACpD,YAAY;EACZ;EACD;AAGD,KAAI,CAAC,mBAAmB;AACtB,UAAQ,KAAK,8DAA8D;AAC3E,SAAO,oBAAC,OAAD;GAAK,WAAW;GAAe,OAAO;GAAkB,CAAA;;AAUjE,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAW;GAAe,OAAO;aARrB,sBACnB,UACA,YACD,CAMmB,KAAK,gBAAgB,aACjC,oBAACD,kBAAD;IAEE,QAAQ;IACR,UAAU;IACV,WAAW,qBAAqB;IAChC,EAJK,SAIL,CACF;GACE,CAAA;EACF,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EAGD,YAAY;GACV,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD,gBAAgB;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACH;CACF"}

package/dist/LayoutWidget-CWE_9JB5.cjs

@@ -0,0 +1,124 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_RegistryContext = require("./RegistryContext-6KXd4t6d.cjs");
+const require_ScreenRenderer = require("./ScreenRenderer-BCd4Rsba.cjs");
+const require_ScreenRendererContext = require("./ScreenRendererContext-D62_Fazh.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fluid_app_rep_core_types = require("@fluid-app/rep-core/types");
+let _fluid_app_rep_core_widget_utils = require("@fluid-app/rep-core/widget-utils");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+//#region src/widgets/LayoutWidget.tsx
+var LayoutWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	LayoutWidget: () => LayoutWidget,
+	layoutWidgetPropertySchema: () => layoutWidgetPropertySchema
+});
+const DEFAULT_BACKGROUND = {
+	type: "solid",
+	color: "background"
+};
+const DEFAULT_CHILDREN = [];
+const LayoutWidget = ({ sectionLayout = "single-column", gap = 4, gapSize, background = DEFAULT_BACKGROUND, padding = 0, borderRadius = "md", children = DEFAULT_CHILDREN, registry, className = "", minHeight }) => {
+	const contextRegistry = require_RegistryContext.useRegistry();
+	const effectiveRegistry = registry || contextRegistry;
+	const ScreenRenderer$1 = require_ScreenRendererContext.useScreenRenderer() ?? require_ScreenRenderer.ScreenRenderer;
+	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 layoutConfig = _fluid_app_rep_core_types.sectionLayoutConfig[sectionLayout];
+	const columnCount = layoutConfig.columns;
+	const gapSizeValue = gapSize ? _fluid_app_rep_core_registries.gapValues[gapSize] : gap;
+	const layoutClasses = [
+		"grid",
+		"grid-cols-1",
+		layoutConfig.gridClasses,
+		`bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,
+		`gap-${gapSizeValue}`,
+		className
+	].filter(Boolean).join(" ");
+	const containerStyle = {
+		...minHeight ? { minHeight: `${minHeight}px` } : {},
+		alignItems: "start",
+		backgroundImage
+	};
+	if (!effectiveRegistry) {
+		console.warn("Layout widget: No registry provided, cannot render children");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: layoutClasses,
+			style: containerStyle
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "@container",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: layoutClasses,
+			style: containerStyle,
+			children: (0, _fluid_app_rep_core_widget_utils.groupChildrenByColumn)(children, columnCount).map((columnChildren, colIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScreenRenderer$1, {
+				screen: columnChildren,
+				registry: effectiveRegistry,
+				className: `flex flex-col gap-${gapSizeValue}`
+			}, colIndex))
+		})
+	});
+};
+const layoutWidgetPropertySchema = {
+	widgetType: "LayoutWidget",
+	displayName: "Layout",
+	fields: [
+		{
+			key: "sectionLayout",
+			label: "Layout Type",
+			type: "sectionLayoutSelect",
+			description: "Column layout configuration",
+			defaultValue: "single-column",
+			group: "Layout"
+		},
+		(0, _fluid_app_rep_core_registries.getGapField)({
+			key: "gapSize",
+			label: "Gap",
+			description: "Gap between columns and widgets",
+			defaultValue: "md",
+			group: "Design"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the layout container",
+			defaultValue: "background",
+			group: "Design"
+		},
+		(0, _fluid_app_rep_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding for the layout container",
+			defaultValue: 4,
+			group: "Design"
+		}),
+		(0, _fluid_app_rep_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the layout container",
+			defaultValue: "md",
+			group: "Design"
+		})
+	]
+};
+//#endregion
+Object.defineProperty(exports, "LayoutWidget", {
+	enumerable: true,
+	get: function() {
+		return LayoutWidget;
+	}
+});
+Object.defineProperty(exports, "LayoutWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return LayoutWidget_exports;
+	}
+});
+Object.defineProperty(exports, "layoutWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return layoutWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=LayoutWidget-CWE_9JB5.cjs.map

package/dist/LayoutWidget-CWE_9JB5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutWidget-CWE_9JB5.cjs","names":["useRegistry","ScreenRenderer","useScreenRenderer","DefaultScreenRenderer","sectionLayoutConfig","gapValues"],"sources":["../src/widgets/LayoutWidget.tsx"],"sourcesContent":["import { ScreenRenderer as DefaultScreenRenderer } from \"../core/ScreenRenderer\";\nimport { useRegistry } from \"../contexts/RegistryContext\";\nimport { useScreenRenderer } from \"../contexts/ScreenRendererContext\";\nimport type {\n  TypedWidgetSchema,\n  WidgetSchema,\n  BorderRadiusOptions,\n  PaddingOptions,\n  GapOptions,\n  SectionLayoutType,\n  BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport { sectionLayoutConfig } from \"@fluid-app/rep-core/types\";\nimport type { ComponentType } from \"react\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { groupChildrenByColumn } from \"@fluid-app/rep-core/widget-utils\";\n\nconst DEFAULT_BACKGROUND: BackgroundValue = {\n  type: \"solid\",\n  color: \"background\",\n};\nconst DEFAULT_CHILDREN: (WidgetSchema | null)[] = [];\n\ntype LayoutProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>> = Record<\n    string,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ComponentType<any>\n  >,\n> = {\n  // Section layout type (masonry-style column configuration)\n  sectionLayout?: SectionLayoutType;\n\n  // Legacy props (deprecated, kept for backward compatibility)\n  type?: \"flex\" | \"grid\";\n  columns?: number;\n  rows?: number;\n  direction?: string;\n  justify?: string;\n  align?: string;\n  wrap?: boolean;\n\n  // Spacing\n  gap?: number; // deprecated, use gapSize instead\n  gapSize?: GapOptions;\n\n  // Design\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Content - widgets with columnIndex property for masonry layout\n  children: (TypedWidgetSchema<T> | null)[] | (WidgetSchema | null)[];\n\n  // Widget registry (passed down from parent renderer)\n  registry?: T;\n\n  // Styling\n  className?: string;\n  minHeight?: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutWidget = <T extends Record<string, ComponentType<any>>>({\n  sectionLayout = \"single-column\",\n  gap = 4,\n  gapSize,\n  background = DEFAULT_BACKGROUND,\n  padding = 0,\n  borderRadius = \"md\",\n  children = DEFAULT_CHILDREN,\n  registry,\n  className = \"\",\n  minHeight,\n}: LayoutProps<T>) => {\n  // Get registry from context if not provided as prop\n  const contextRegistry = useRegistry();\n  const effectiveRegistry = registry || contextRegistry;\n\n  // Use ScreenRenderer from context (e.g. rep-builder's), fall back to local\n  const ContextScreenRenderer = useScreenRenderer();\n  const ScreenRenderer = ContextScreenRenderer ?? DefaultScreenRenderer;\n\n  // Extract background values\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\n  // Get layout configuration\n  const layoutConfig = sectionLayoutConfig[sectionLayout];\n  const columnCount = layoutConfig.columns;\n\n  // Calculate gap size\n  const gapSizeValue = gapSize ? gapValues[gapSize] : gap;\n\n  // Build CSS classes for masonry layout with responsive columns\n  const layoutClasses = [\n    \"grid\",\n    \"grid-cols-1\", // Mobile: single column\n    layoutConfig.gridClasses, // Desktop (@md+): configured columns\n    `bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,\n    `gap-${gapSizeValue}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Container style\n  const containerStyle: React.CSSProperties = {\n    ...(minHeight ? { minHeight: `${minHeight}px` } : {}),\n    alignItems: \"start\", // Masonry-style: columns don't stretch to match height\n    backgroundImage,\n  };\n\n  // If no registry is available, we can't render the children\n  if (!effectiveRegistry) {\n    console.warn(\"Layout widget: No registry provided, cannot render children\");\n    return <div className={layoutClasses} style={containerStyle} />;\n  }\n\n  // Group children by column\n  const columnGroups = groupChildrenByColumn(\n    children as WidgetSchema[],\n    columnCount,\n  );\n\n  // Regular render mode - render each column as a flex column\n  return (\n    <div className=\"@container\">\n      <div className={layoutClasses} style={containerStyle}>\n        {columnGroups.map((columnChildren, colIndex) => (\n          <ScreenRenderer\n            key={colIndex}\n            screen={columnChildren}\n            registry={effectiveRegistry}\n            className={`flex flex-col gap-${gapSizeValue}`}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport const layoutWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"LayoutWidget\",\n  displayName: \"Layout\",\n  fields: [\n    // Layout Configuration - Visual selector matching Figma design\n    {\n      key: \"sectionLayout\",\n      label: \"Layout Type\",\n      type: \"sectionLayoutSelect\",\n      description: \"Column layout configuration\",\n      defaultValue: \"single-column\",\n      group: \"Layout\",\n    },\n\n    // Design\n    getGapField({\n      key: \"gapSize\",\n      label: \"Gap\",\n      description: \"Gap between columns and widgets\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the layout container\",\n      defaultValue: \"background\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the layout container\",\n      defaultValue: 4,\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the layout container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,qBAAsC;CAC1C,MAAM;CACN,OAAO;CACR;AACD,MAAM,mBAA4C,EAAE;AA2CpD,MAAa,gBAA8D,EACzE,gBAAgB,iBAChB,MAAM,GACN,SACA,aAAa,oBACb,UAAU,GACV,eAAe,MACf,WAAW,kBACX,UACA,YAAY,IACZ,gBACoB;CAEpB,MAAM,kBAAkBA,wBAAAA,aAAa;CACrC,MAAM,oBAAoB,YAAY;CAItC,MAAMC,mBADwBC,8BAAAA,mBAAmB,IACDC,uBAAAA;CAGhD,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;CAGN,MAAM,eAAeC,0BAAAA,oBAAoB;CACzC,MAAM,cAAc,aAAa;CAGjC,MAAM,eAAe,UAAUC,+BAAAA,UAAU,WAAW;CAGpD,MAAM,gBAAgB;EACpB;EACA;EACA,aAAa;EACb,MAAM,gBAAgB,KAAK,QAAQ,WAAW;EAC9C,OAAO;EACP;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;CAGZ,MAAM,iBAAsC;EAC1C,GAAI,YAAY,EAAE,WAAW,GAAG,UAAU,KAAK,GAAG,EAAE;EACpD,YAAY;EACZ;EACD;AAGD,KAAI,CAAC,mBAAmB;AACtB,UAAQ,KAAK,8DAA8D;AAC3E,SAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAW;GAAe,OAAO;GAAkB,CAAA;;AAUjE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAW;GAAe,OAAO;yEAPxC,UACA,YACD,CAMmB,KAAK,gBAAgB,aACjC,iBAAA,GAAA,kBAAA,KAACJ,kBAAD;IAEE,QAAQ;IACR,UAAU;IACV,WAAW,qBAAqB;IAChC,EAJK,SAIL,CACF;GACE,CAAA;EACF,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;kDAGW;GACV,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACH;CACF"}