@fluid-app/rep-widgets 0.1.17 → 0.1.19

package/dist/CatchUpWidget-DiqdwPvE.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CatchUpWidget-DiqdwPvE.cjs","names":["FontAwesomeIcon","faSpinnerThird","ErrorState","faSparkles"],"sources":["../src/hooks/use-catchups.preview.ts","../src/hooks/use-catchups.ts","../src/widgets/CatchUpWidget.tsx"],"sourcesContent":["import type { CatchUp } from \"./use-catchups.types\";\n\nexport const PREVIEW_DATA: CatchUp[] = [\n  { id: 1, suggestion_title: \"Check in with Sarah about her recent order\" },\n  { id: 2, suggestion_title: \"Follow up with Mike on product samples\" },\n  { id: 3, suggestion_title: \"Reconnect with Lisa — last contact 30 days ago\" },\n  { id: 4, suggestion_title: \"Thank Alex for their referral last week\" },\n  { id: 5, suggestion_title: \"Share new catalog with Jordan\" },\n];\n","import { useQuery } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-catchups.preview\";\n\nimport type { CatchUp } from \"./use-catchups.types\";\n\nexport type { CatchUp } from \"./use-catchups.types\";\n\nexport function useCatchUps() {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"rep-widget-use\",\n      \"catchups\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<CatchUp[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/affiliate_catch_up_actions.json`\n        : \"/affiliate_catch_up_actions.json\";\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 catch ups: ${response.status}`);\n      }\n\n      return response.json();\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\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 { useCatchUps } from \"../hooks/use-catchups\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSpinnerThird, faSparkles } from \"@fortawesome/pro-regular-svg-icons\";\nimport { ErrorState } from \"../components/error-state\";\n\n// Font size mapping for title\nconst fontSizeClasses: Record<FontSizeOptions, string> = {\n  \"2xl\": \"text-2xl\",\n  xl: \"text-xl\",\n  lg: \"text-lg\",\n  md: \"text-base\",\n  sm: \"text-sm\",\n  xs: \"text-xs\",\n};\n\ntype CatchUpWidgetProps = ComponentProps<\"div\"> & {\n  // Title settings\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  // Design settings\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  // Display settings\n  maxItems?: number;\n};\n\nexport function CatchUpWidget({\n  // Title settings with defaults\n  titleEnabled = true,\n  titleText = \"Catch Ups\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  // Design settings with defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  // Display settings with defaults\n  maxItems = 5,\n  className,\n  ...props\n}: CatchUpWidgetProps) {\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 = [], isLoading, isError } = useCatchUps();\n\n  const catchUpsToShow = data.slice(0, maxItems);\n  const moreCatchUps = data.length - catchUpsToShow.length;\n\n  return (\n    <div\n      className={`flex flex-col rounded-${borderRadius} bg-${backgroundColor} p-${padding} text-${textColor} ${className || \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        {titleEnabled && (\n          <h3\n            className={`${fontSizeClasses[titleFontSize]} font-semibold text-${titleColor}`}\n          >\n            {titleText}\n          </h3>\n        )}\n        {!isLoading && !isError && data.length > 0 && (\n          <span className={`text-3xl font-bold text-${accentColor}`}>\n            {data.length}\n          </span>\n        )}\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[150px] flex-1 items-center justify-center\">\n          <FontAwesomeIcon\n            icon={faSpinnerThird}\n            spin\n            className={`h-8 w-8 text-${accentColor}`}\n          />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : data.length === 0 ? (\n        /* Empty state */\n        <div className=\"flex min-h-[150px] flex-1 flex-col items-center justify-center gap-2\">\n          <FontAwesomeIcon\n            icon={faSparkles}\n            className={`h-8 w-8 text-${accentColor}`}\n          />\n          <p className=\"text-center font-semibold\">\n            You&apos;re all caught up.\n          </p>\n          <p className=\"text-sm opacity-60\">See you next time!</p>\n        </div>\n      ) : (\n        /* Default state with catch ups */\n        <>\n          <div className=\"mt-3 flex-1\">\n            {catchUpsToShow.map((catchUp, index: number) => (\n              <div\n                key={catchUp.id || index}\n                className={`py-2 ${index !== catchUpsToShow.length - 1 ? \"border-b border-current/10\" : \"\"}`}\n              >\n                <p className=\"line-clamp-1 text-sm\">\n                  {catchUp.suggestion_title}\n                </p>\n              </div>\n            ))}\n          </div>\n\n          {/* More indicator */}\n          {moreCatchUps > 0 && (\n            <p className=\"mt-2 text-sm opacity-60\">\n              {moreCatchUps} more catch up{moreCatchUps > 1 ? \"s\" : \"\"}\n            </p>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n// Property schema for the widget editor\nexport const catchUpWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"CatchUpWidget\",\n  displayName: \"Catch Up 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 catch ups\",\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 catch ups\",\n      defaultValue: \"Catch Ups\",\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 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 catch up 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 display and icons\",\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 catch ups to display\",\n      defaultValue: 5,\n      min: 1,\n      max: 10,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the 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 container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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,eAAe,IAAI,MAAM;IACpD;KAEL,EAAA,CAAA,CAED;;;AAKV,MAAa,8BAAoD;CAC/D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,KAAK;GACL,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
+{"version":3,"file":"CatchUpWidget-DiqdwPvE.cjs","names":["FontAwesomeIcon","faSpinnerThird","ErrorState","faSparkles"],"sources":["../src/hooks/use-catchups.preview.ts","../src/hooks/use-catchups.ts","../src/widgets/CatchUpWidget.tsx"],"sourcesContent":["import type { CatchUp } from \"./use-catchups.types\";\n\nexport const PREVIEW_DATA: CatchUp[] = [\n  { id: 1, suggestion_title: \"Check in with Sarah about her recent order\" },\n  { id: 2, suggestion_title: \"Follow up with Mike on product samples\" },\n  { id: 3, suggestion_title: \"Reconnect with Lisa — last contact 30 days ago\" },\n  { id: 4, suggestion_title: \"Thank Alex for their referral last week\" },\n  { id: 5, suggestion_title: \"Share new catalog with Jordan\" },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-catchups.preview\";\n\nimport type { CatchUp } from \"./use-catchups.types\";\n\nexport type { CatchUp } from \"./use-catchups.types\";\n\nexport function useCatchUps(): UseQueryResult<CatchUp[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"rep-widget-use\",\n      \"catchups\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<CatchUp[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/affiliate_catch_up_actions.json`\n        : \"/affiliate_catch_up_actions.json\";\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 catch ups: ${response.status}`);\n      }\n\n      return response.json();\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import type { ComponentProps } from \"react\";\nimport type React 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 { useCatchUps } from \"../hooks/use-catchups\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSpinnerThird, faSparkles } from \"@fortawesome/pro-regular-svg-icons\";\nimport { ErrorState } from \"../components/error-state\";\n\n// Font size mapping for title\nconst fontSizeClasses: Record<FontSizeOptions, string> = {\n  \"2xl\": \"text-2xl\",\n  xl: \"text-xl\",\n  lg: \"text-lg\",\n  md: \"text-base\",\n  sm: \"text-sm\",\n  xs: \"text-xs\",\n};\n\ntype CatchUpWidgetProps = ComponentProps<\"div\"> & {\n  // Title settings\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  // Design settings\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  // Display settings\n  maxItems?: number;\n};\n\nexport function CatchUpWidget({\n  // Title settings with defaults\n  titleEnabled = true,\n  titleText = \"Catch Ups\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  // Design settings with defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  // Display settings with defaults\n  maxItems = 5,\n  className,\n  ...props\n}: CatchUpWidgetProps): React.JSX.Element {\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 = [], isLoading, isError } = useCatchUps();\n\n  const catchUpsToShow = data.slice(0, maxItems);\n  const moreCatchUps = data.length - catchUpsToShow.length;\n\n  return (\n    <div\n      className={`flex flex-col rounded-${borderRadius} bg-${backgroundColor} p-${padding} text-${textColor} ${className || \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        {titleEnabled && (\n          <h3\n            className={`${fontSizeClasses[titleFontSize]} font-semibold text-${titleColor}`}\n          >\n            {titleText}\n          </h3>\n        )}\n        {!isLoading && !isError && data.length > 0 && (\n          <span className={`text-3xl font-bold text-${accentColor}`}>\n            {data.length}\n          </span>\n        )}\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[150px] flex-1 items-center justify-center\">\n          <FontAwesomeIcon\n            icon={faSpinnerThird}\n            spin\n            className={`h-8 w-8 text-${accentColor}`}\n          />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : data.length === 0 ? (\n        /* Empty state */\n        <div className=\"flex min-h-[150px] flex-1 flex-col items-center justify-center gap-2\">\n          <FontAwesomeIcon\n            icon={faSparkles}\n            className={`h-8 w-8 text-${accentColor}`}\n          />\n          <p className=\"text-center font-semibold\">\n            You&apos;re all caught up.\n          </p>\n          <p className=\"text-sm opacity-60\">See you next time!</p>\n        </div>\n      ) : (\n        /* Default state with catch ups */\n        <>\n          <div className=\"mt-3 flex-1\">\n            {catchUpsToShow.map((catchUp, index: number) => (\n              <div\n                key={catchUp.id || index}\n                className={`py-2 ${index !== catchUpsToShow.length - 1 ? \"border-b border-current/10\" : \"\"}`}\n              >\n                <p className=\"line-clamp-1 text-sm\">\n                  {catchUp.suggestion_title}\n                </p>\n              </div>\n            ))}\n          </div>\n\n          {/* More indicator */}\n          {moreCatchUps > 0 && (\n            <p className=\"mt-2 text-sm opacity-60\">\n              {moreCatchUps} more catch up{moreCatchUps > 1 ? \"s\" : \"\"}\n            </p>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n// Property schema for the widget editor\nexport const catchUpWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"CatchUpWidget\",\n  displayName: \"Catch Up 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 catch ups\",\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 catch ups\",\n      defaultValue: \"Catch Ups\",\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 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 catch up 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 display and icons\",\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 catch ups to display\",\n      defaultValue: 5,\n      min: 1,\n      max: 10,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the 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 container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;;;AAEA,MAAa,eAA0B;CACrC;EAAE,IAAI;EAAG,kBAAkB;EAA8C;CACzE;EAAE,IAAI;EAAG,kBAAkB;EAA0C;CACrE;EAAE,IAAI;EAAG,kBAAkB;EAAkD;CAC7E;EAAE,IAAI;EAAG,kBAAkB;EAA2C;CACtE;EAAE,IAAI;EAAG,kBAAkB;EAAiC;CAC7D;;;ACCD,SAAgB,cAAgD;CAC9D,MAAM,EAAE,SAAS,mBAAA,GAAA,yCAAA,sBAAuC;CACxD,MAAM,EAAE,eAAA,GAAA,iDAAA,0BAAuC;AAE/C,SAAA,GAAA,sBAAA,UAAgB;EACd,UAAU;GACR;GACA;GACA,YAAY,YAAY;GACzB;EACD,SAAS,OAAO,EAAE,aAAiC;GACjD,MAAM,MAAM,UACR,GAAG,QAAQ,oCACX;GACJ,MAAM,WAAW,MAAM,MAAM,KAAK;IAChC,SAAS;KACP,gBAAgB;KAChB,GAAG,iBAAiB;KACrB;IACD;IACD,CAAC;AAEF,OAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MAAM,8BAA8B,SAAS,SAAS;AAGlE,UAAO,SAAS,MAAM;;EAExB,SAAS,CAAC;EACV,GAAI,aAAa,EAAE,iBAAiB,cAAc;EACnD,CAAC;;;;;;;;ACjBJ,MAAM,kBAAmD;CACvD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAkBD,SAAgB,cAAc,EAE5B,eAAe,MACf,YAAY,aACZ,gBAAgB,MAChB,aAAa,cAEb,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,YAAY,cACZ,cAAc,WACd,UAAU,GACV,eAAe,MAEf,WAAW,GACX,WACA,GAAG,SACqC;CACxC,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;CACN,MAAM,EAAE,OAAO,EAAE,EAAE,WAAW,YAAY,aAAa;CAEvD,MAAM,iBAAiB,KAAK,MAAM,GAAG,SAAS;CAC9C,MAAM,eAAe,KAAK,SAAS,eAAe;AAElD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,yBAAyB,aAAa,MAAM,gBAAgB,KAAK,QAAQ,QAAQ,UAAU,GAAG,aAAa;EACtH,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAME,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACG,gBACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;IACE,WAAW,GAAG,gBAAgB,eAAe,sBAAsB;cAElE;IACE,CAAA,EAEN,CAAC,aAAa,CAAC,WAAW,KAAK,SAAS,KACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,2BAA2B;cACzC,KAAK;IACD,CAAA,CAEL;MAGL,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,iBAAD;IACE,MAAMC,mCAAAA;IACN,MAAA;IACA,WAAW,gBAAgB;IAC3B,CAAA;GACE,CAAA,GACJ,UAEF,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,YAAD,EAAc,CAAA,GACZ,KAAK,WAAW,IAElB,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,iBAAD;KACE,MAAMG,mCAAAA;KACN,WAAW,gBAAgB;KAC3B,CAAA;IACF,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eAA4B;KAErC,CAAA;IACJ,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eAAqB;KAAsB,CAAA;IACpD;OAGN,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,eAAe,KAAK,SAAS,UAC5B,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAEE,WAAW,QAAQ,UAAU,eAAe,SAAS,IAAI,+BAA+B;cAExF,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eACV,QAAQ;KACP,CAAA;IACA,EANC,QAAQ,MAAM,MAMf,CACN;GACE,CAAA,EAGL,eAAe,KACd,iBAAA,GAAA,kBAAA,MAAC,KAAD;GAAG,WAAU;aAAb;IACG;IAAa;IAAe,eAAe,IAAI,MAAM;IACpD;KAEL,EAAA,CAAA,CAED;;;AAKV,MAAa,8BAAoD;CAC/D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,KAAK;GACL,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}

package/dist/ChartWidget-DhAVW8w4.cjs.map

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

package/dist/ChartWidget-DrF1e1sy.mjs.map

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

package/dist/ContainerWidget-8FdPHgLz.cjs

@@ -0,0 +1,2 @@
+const require_ContainerWidget = require("./ContainerWidget-BTKOl5XX.cjs");
+exports.containerWidgetPropertySchema = require_ContainerWidget.containerWidgetPropertySchema;

package/dist/{ContainerWidget-Cp0_vPZB.cjs → ContainerWidget-BTKOl5XX.cjs}

@@ -1,12 +1,8 @@
-const require_chunk = require("./chunk-CZWwpsFl.cjs");
-const require_LayoutWidget = require("./LayoutWidget-CWE_9JB5.cjs");
+require("./chunk-CZWwpsFl.cjs");
+const require_LayoutWidget = require("./LayoutWidget-BVv--tp3.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
 //#region src/widgets/ContainerWidget.tsx
-var ContainerWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
-	ContainerWidget: () => ContainerWidget,
-	containerWidgetPropertySchema: () => containerWidgetPropertySchema
-});
 function ContainerWidget(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LayoutWidget.LayoutWidget, { ...props });
 }
@@ -45,12 +41,6 @@ Object.defineProperty(exports, "ContainerWidget", {
 		return ContainerWidget;
 	}
 });
-Object.defineProperty(exports, "ContainerWidget_exports", {
-	enumerable: true,
-	get: function() {
-		return ContainerWidget_exports;
-	}
-});
 Object.defineProperty(exports, "containerWidgetPropertySchema", {
 	enumerable: true,
 	get: function() {
@@ -58,4 +48,4 @@ Object.defineProperty(exports, "containerWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ContainerWidget-Cp0_vPZB.cjs.map
+//# sourceMappingURL=ContainerWidget-BTKOl5XX.cjs.map

package/dist/ContainerWidget-BTKOl5XX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerWidget-BTKOl5XX.cjs","names":["LayoutWidget"],"sources":["../src/widgets/ContainerWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React 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(\n  props: ContainerWidgetProps,\n): React.JSX.Element {\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"],"mappings":";;;;;AAiBA,SAAgB,gBACd,OACmB;AAEnB,QAAO,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,cAAD,EAAc,GAAI,OAAS,CAAA;;AAGpC,MAAa,gCAAsD;CACjE,YAAY;CACZ,aAAa;CACb,QAAQ;kDACM;GACV,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;sDACc;GACd,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;EACF;CACF"}

package/dist/ContainerWidget-Xd231yys.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContainerWidget-Xd231yys.mjs","names":[],"sources":["../src/widgets/ContainerWidget.tsx"],"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"],"mappings":";;;;;;;;;AAgBA,SAAgB,gBAAgB,OAA6B;AAE3D,QAAO,oBAAC,cAAD,EAAc,GAAI,OAAS,CAAA;;AAGpC,MAAa,gCAAsD;CACjE,YAAY;CACZ,aAAa;CACb,QAAQ;EACN,YAAY;GACV,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF,gBAAgB;GACd,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;EACF;CACF"}
+{"version":3,"file":"ContainerWidget-Xd231yys.mjs","names":[],"sources":["../src/widgets/ContainerWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React 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(\n  props: ContainerWidgetProps,\n): React.JSX.Element {\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"],"mappings":";;;;;;;;;AAiBA,SAAgB,gBACd,OACmB;AAEnB,QAAO,oBAAC,cAAD,EAAc,GAAI,OAAS,CAAA;;AAGpC,MAAa,gCAAsD;CACjE,YAAY;CACZ,aAAa;CACb,QAAQ;EACN,YAAY;GACV,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF,gBAAgB;GACd,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;EACF;CACF"}

package/dist/{EmbedWidget-BQyYm50g.cjs → EmbedWidget-Cfv65pBr.cjs}

@@ -170,4 +170,4 @@ Object.defineProperty(exports, "embedWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=EmbedWidget-BQyYm50g.cjs.map
+//# sourceMappingURL=EmbedWidget-Cfv65pBr.cjs.map

package/dist/EmbedWidget-Cfv65pBr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedWidget-Cfv65pBr.cjs","names":["FontAwesomeIcon","faGlobe"],"sources":["../src/widgets/EmbedWidget.tsx"],"sourcesContent":["import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faGlobe } from \"@fortawesome/pro-regular-svg-icons\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type { BorderRadiusOptions } from \"@fluid-app/rep-core/types\";\n\ntype EmbedWidgetProps = ComponentProps<\"div\"> & {\n  url?: string;\n  title?: string;\n  height?: string;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n  editMode?: boolean;\n  isSelected?: boolean;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height = \"400px\",\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  editMode = false,\n  isSelected = false,\n  className,\n  ...props\n}: EmbedWidgetProps): React.JSX.Element {\n  const isFullScreen = fullScreen;\n\n  // Show placeholder if no URL is provided\n  if (!url) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const normalizedUrl =\n    url.startsWith(\"http://\") || url.startsWith(\"https://\")\n      ? url\n      : `https://${url}`;\n\n  let isValidUrl = false;\n  try {\n    const parsed = new URL(normalizedUrl);\n    isValidUrl =\n      (parsed.protocol === \"http:\" || parsed.protocol === \"https:\") &&\n      (parsed.hostname.includes(\".\") || parsed.hostname === \"localhost\");\n  } catch {\n    // invalid URL\n  }\n\n  if (!isValidUrl) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`relative w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={normalizedUrl}\n        title={title}\n        width=\"100%\"\n        style={isFullScreen ? { height: \"100%\" } : { height }}\n        loading={loading}\n        allowFullScreen={allowFullscreen}\n        className={`rounded-${borderRadius} border-border border`}\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\"\n      />\n      {editMode && !isSelected && <div className=\"absolute inset-0 z-10\" />}\n    </div>\n  );\n}\n\nexport const embedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"EmbedWidget\",\n  displayName: \"Embed\",\n  fields: [\n    // Content\n    {\n      key: \"url\",\n      label: \"URL\",\n      type: \"text\",\n      description: \"The URL of the external site to embed\",\n      placeholder: \"https://example.com\",\n      defaultValue: \"\",\n      group: \"Content\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Accessibility title for the embedded content\",\n      defaultValue: \"Embedded Content\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the embed container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"fullScreen\",\n      label: \"Full Screen\",\n      type: \"boolean\",\n      description: \"When enabled, the embed fills the available space\",\n      defaultValue: false,\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the embedded iframe\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\n      group: \"Design\",\n      requiresKeyValue: {\n        key: \"fullScreen\",\n        value: false,\n      },\n    }),\n\n    // Settings\n    {\n      key: \"allowFullscreen\",\n      label: \"Allow Fullscreen\",\n      type: \"boolean\",\n      description: \"Allow the embedded content to use fullscreen mode\",\n      defaultValue: true,\n      group: \"Settings\",\n    },\n    {\n      key: \"loading\",\n      label: \"Loading\",\n      type: \"select\",\n      description: \"When to load the embedded content\",\n      options: [\n        { label: \"Lazy (on scroll)\", value: \"lazy\" },\n        { label: \"Eager (immediately)\", value: \"eager\" },\n      ],\n      defaultValue: \"lazy\",\n      group: \"Settings\",\n    },\n  ],\n};\n"],"mappings":"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"}

package/dist/EmbedWidget-DQ2rCA4j.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedWidget-DQ2rCA4j.mjs","names":[],"sources":["../src/widgets/EmbedWidget.tsx"],"sourcesContent":["import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faGlobe } from \"@fortawesome/pro-regular-svg-icons\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type { BorderRadiusOptions } from \"@fluid-app/rep-core/types\";\n\ntype EmbedWidgetProps = ComponentProps<\"div\"> & {\n  url?: string;\n  title?: string;\n  height?: string;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n  editMode?: boolean;\n  isSelected?: boolean;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height = \"400px\",\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  editMode = false,\n  isSelected = false,\n  className,\n  ...props\n}: EmbedWidgetProps) {\n  const isFullScreen = fullScreen;\n\n  // Show placeholder if no URL is provided\n  if (!url) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const normalizedUrl =\n    url.startsWith(\"http://\") || url.startsWith(\"https://\")\n      ? url\n      : `https://${url}`;\n\n  let isValidUrl = false;\n  try {\n    const parsed = new URL(normalizedUrl);\n    isValidUrl =\n      (parsed.protocol === \"http:\" || parsed.protocol === \"https:\") &&\n      (parsed.hostname.includes(\".\") || parsed.hostname === \"localhost\");\n  } catch {\n    // invalid URL\n  }\n\n  if (!isValidUrl) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`relative w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={normalizedUrl}\n        title={title}\n        width=\"100%\"\n        style={isFullScreen ? { height: \"100%\" } : { height }}\n        loading={loading}\n        allowFullScreen={allowFullscreen}\n        className={`rounded-${borderRadius} border-border border`}\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\"\n      />\n      {editMode && !isSelected && <div className=\"absolute inset-0 z-10\" />}\n    </div>\n  );\n}\n\nexport const embedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"EmbedWidget\",\n  displayName: \"Embed\",\n  fields: [\n    // Content\n    {\n      key: \"url\",\n      label: \"URL\",\n      type: \"text\",\n      description: \"The URL of the external site to embed\",\n      placeholder: \"https://example.com\",\n      defaultValue: \"\",\n      group: \"Content\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Accessibility title for the embedded content\",\n      defaultValue: \"Embedded Content\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the embed container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"fullScreen\",\n      label: \"Full Screen\",\n      type: \"boolean\",\n      description: \"When enabled, the embed fills the available space\",\n      defaultValue: false,\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the embedded iframe\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\n      group: \"Design\",\n      requiresKeyValue: {\n        key: \"fullScreen\",\n        value: false,\n      },\n    }),\n\n    // Settings\n    {\n      key: \"allowFullscreen\",\n      label: \"Allow Fullscreen\",\n      type: \"boolean\",\n      description: \"Allow the embedded content to use fullscreen mode\",\n      defaultValue: true,\n      group: \"Settings\",\n    },\n    {\n      key: \"loading\",\n      label: \"Loading\",\n      type: \"select\",\n      description: \"When to load the embedded content\",\n      options: [\n        { label: \"Lazy (on scroll)\", value: \"lazy\" },\n        { label: \"Eager (immediately)\", value: \"eager\" },\n      ],\n      defaultValue: \"lazy\",\n      group: \"Settings\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,YAAY,EAC1B,MAAM,IACN,QAAQ,oBACR,SAAS,SACT,aAAa,OACb,kBAAkB,MAClB,UAAU,QACV,eAAe,MACf,WAAW,OACX,aAAa,OACb,WACA,GAAG,SACgB;CACnB,MAAM,eAAe;AAGrB,KAAI,CAAC,IACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;CAIV,MAAM,gBACJ,IAAI,WAAW,UAAU,IAAI,IAAI,WAAW,WAAW,GACnD,MACA,WAAW;CAEjB,IAAI,aAAa;AACjB,KAAI;EACF,MAAM,SAAS,IAAI,IAAI,cAAc;AACrC,gBACG,OAAO,aAAa,WAAW,OAAO,aAAa,cACnD,OAAO,SAAS,SAAS,IAAI,IAAI,OAAO,aAAa;SAClD;AAIR,KAAI,CAAC,WACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;AAIV,QACE,qBAAC,OAAD;EACE,WAAW,mBAAmB,eAAe,WAAW,GAAG,GAAG;EAC9D,GAAI;YAFN,CAIE,oBAAC,UAAD;GACE,KAAK;GACE;GACP,OAAM;GACN,OAAO,eAAe,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ;GAC5C;GACT,iBAAiB;GACjB,WAAW,WAAW,aAAa;GACnC,SAAQ;GACR,CAAA,EACD,YAAY,CAAC,cAAc,oBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA,CACjE;;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,OAAO;GACP,kBAAkB;IAChB,KAAK;IACL,OAAO;IACR;GACF,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAoB,OAAO;IAAQ,EAC5C;IAAE,OAAO;IAAuB,OAAO;IAAS,CACjD;GACD,cAAc;GACd,OAAO;GACR;EACF;CACF"}
+{"version":3,"file":"EmbedWidget-DQ2rCA4j.mjs","names":[],"sources":["../src/widgets/EmbedWidget.tsx"],"sourcesContent":["import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faGlobe } from \"@fortawesome/pro-regular-svg-icons\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type { BorderRadiusOptions } from \"@fluid-app/rep-core/types\";\n\ntype EmbedWidgetProps = ComponentProps<\"div\"> & {\n  url?: string;\n  title?: string;\n  height?: string;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n  editMode?: boolean;\n  isSelected?: boolean;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height = \"400px\",\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  editMode = false,\n  isSelected = false,\n  className,\n  ...props\n}: EmbedWidgetProps): React.JSX.Element {\n  const isFullScreen = fullScreen;\n\n  // Show placeholder if no URL is provided\n  if (!url) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const normalizedUrl =\n    url.startsWith(\"http://\") || url.startsWith(\"https://\")\n      ? url\n      : `https://${url}`;\n\n  let isValidUrl = false;\n  try {\n    const parsed = new URL(normalizedUrl);\n    isValidUrl =\n      (parsed.protocol === \"http:\" || parsed.protocol === \"https:\") &&\n      (parsed.hostname.includes(\".\") || parsed.hostname === \"localhost\");\n  } catch {\n    // invalid URL\n  }\n\n  if (!isValidUrl) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`relative w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={normalizedUrl}\n        title={title}\n        width=\"100%\"\n        style={isFullScreen ? { height: \"100%\" } : { height }}\n        loading={loading}\n        allowFullScreen={allowFullscreen}\n        className={`rounded-${borderRadius} border-border border`}\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\"\n      />\n      {editMode && !isSelected && <div className=\"absolute inset-0 z-10\" />}\n    </div>\n  );\n}\n\nexport const embedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"EmbedWidget\",\n  displayName: \"Embed\",\n  fields: [\n    // Content\n    {\n      key: \"url\",\n      label: \"URL\",\n      type: \"text\",\n      description: \"The URL of the external site to embed\",\n      placeholder: \"https://example.com\",\n      defaultValue: \"\",\n      group: \"Content\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Accessibility title for the embedded content\",\n      defaultValue: \"Embedded Content\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the embed container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"fullScreen\",\n      label: \"Full Screen\",\n      type: \"boolean\",\n      description: \"When enabled, the embed fills the available space\",\n      defaultValue: false,\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the embedded iframe\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\n      group: \"Design\",\n      requiresKeyValue: {\n        key: \"fullScreen\",\n        value: false,\n      },\n    }),\n\n    // Settings\n    {\n      key: \"allowFullscreen\",\n      label: \"Allow Fullscreen\",\n      type: \"boolean\",\n      description: \"Allow the embedded content to use fullscreen mode\",\n      defaultValue: true,\n      group: \"Settings\",\n    },\n    {\n      key: \"loading\",\n      label: \"Loading\",\n      type: \"select\",\n      description: \"When to load the embedded content\",\n      options: [\n        { label: \"Lazy (on scroll)\", value: \"lazy\" },\n        { label: \"Eager (immediately)\", value: \"eager\" },\n      ],\n      defaultValue: \"lazy\",\n      group: \"Settings\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,YAAY,EAC1B,MAAM,IACN,QAAQ,oBACR,SAAS,SACT,aAAa,OACb,kBAAkB,MAClB,UAAU,QACV,eAAe,MACf,WAAW,OACX,aAAa,OACb,WACA,GAAG,SACmC;CACtC,MAAM,eAAe;AAGrB,KAAI,CAAC,IACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;CAIV,MAAM,gBACJ,IAAI,WAAW,UAAU,IAAI,IAAI,WAAW,WAAW,GACnD,MACA,WAAW;CAEjB,IAAI,aAAa;AACjB,KAAI;EACF,MAAM,SAAS,IAAI,IAAI,cAAc;AACrC,gBACG,OAAO,aAAa,WAAW,OAAO,aAAa,cACnD,OAAO,SAAS,SAAS,IAAI,IAAI,OAAO,aAAa;SAClD;AAIR,KAAI,CAAC,WACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;AAIV,QACE,qBAAC,OAAD;EACE,WAAW,mBAAmB,eAAe,WAAW,GAAG,GAAG;EAC9D,GAAI;YAFN,CAIE,oBAAC,UAAD;GACE,KAAK;GACE;GACP,OAAM;GACN,OAAO,eAAe,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ;GAC5C;GACT,iBAAiB;GACjB,WAAW,WAAW,aAAa;GACnC,SAAQ;GACR,CAAA,EACD,YAAY,CAAC,cAAc,oBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA,CACjE;;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,OAAO;GACP,kBAAkB;IAChB,KAAK;IACL,OAAO;IACR;GACF,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAoB,OAAO;IAAQ,EAC5C;IAAE,OAAO;IAAuB,OAAO;IAAS,CACjD;GACD,cAAc;GACd,OAAO;GACR;EACF;CACF"}

package/dist/{ImageWidget-DTwM7xCz.cjs → ImageWidget-BXkjWEEn.cjs}

@@ -164,4 +164,4 @@ Object.defineProperty(exports, "imageWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ImageWidget-DTwM7xCz.cjs.map
+//# sourceMappingURL=ImageWidget-BXkjWEEn.cjs.map

package/dist/ImageWidget-BXkjWEEn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWidget-BXkjWEEn.cjs","names":["MediaRenderer"],"sources":["../src/widgets/ImageWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React 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): React.JSX.Element {\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":";;;;;;;;;AA0BA,SAAgB,YAAY,EAC1B,MAAM,IACN,MAAM,IACN,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,SACA,UACA,gBACsC;CACtC,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/ImageWidget-DBBul7ca.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWidget-DBBul7ca.mjs","names":[],"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,oBAAC,OAAD;EACE,WAAW,kBAAkB,aAAa;EAC1C,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,KAAK;GACL,WAAW,UAAU,aAAa;GAClC,YAAY,UAAU,aAAa,KAAA;GACnC,CAAA;EACE,CAAA;AAGR,KAAI,QACF,QACE,oBAAC,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;EAGD,qBAAqB;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;EACD,eAAe;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"}
+{"version":3,"file":"ImageWidget-DBBul7ca.mjs","names":[],"sources":["../src/widgets/ImageWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React 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): React.JSX.Element {\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":";;;;;;;;;AA0BA,SAAgB,YAAY,EAC1B,MAAM,IACN,MAAM,IACN,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,SACA,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,eAAe,UAAU,SAAS;CAExC,MAAM,UAAU,mBAAmB;CAEnC,MAAM,UACJ,oBAAC,OAAD;EACE,WAAW,kBAAkB,aAAa;EAC1C,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,KAAK;GACL,WAAW,UAAU,aAAa;GAClC,YAAY,UAAU,aAAa,KAAA;GACnC,CAAA;EACE,CAAA;AAGR,KAAI,QACF,QACE,oBAAC,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;EAGD,qBAAqB;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;EACD,eAAe;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.map

@@ -1 +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"}
+{"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 React 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>): React.JSX.Element => {\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":";;;;;;;;;;;;;AAwBA,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,gBACuC;CAEvC,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 → LayoutWidget-BVv--tp3.cjs}

@@ -1,16 +1,12 @@
-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");
+require("./chunk-CZWwpsFl.cjs");
+const require_RegistryContext = require("./RegistryContext-xjea4xVV.cjs");
+const require_ScreenRenderer = require("./ScreenRenderer-B-nGFObe.cjs");
+const require_ScreenRendererContext = require("./ScreenRendererContext-B660JoZO.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"
@@ -108,12 +104,6 @@ Object.defineProperty(exports, "LayoutWidget", {
 		return LayoutWidget;
 	}
 });
-Object.defineProperty(exports, "LayoutWidget_exports", {
-	enumerable: true,
-	get: function() {
-		return LayoutWidget_exports;
-	}
-});
 Object.defineProperty(exports, "layoutWidgetPropertySchema", {
 	enumerable: true,
 	get: function() {
@@ -121,4 +111,4 @@ Object.defineProperty(exports, "layoutWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=LayoutWidget-CWE_9JB5.cjs.map
+//# sourceMappingURL=LayoutWidget-BVv--tp3.cjs.map