@fluid-app/rep-widgets 0.1.18 → 0.1.20

package/dist/RecentActivityWidget-CxEgRz3c.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RecentActivityWidget-CxEgRz3c.mjs","names":[],"sources":["../src/hooks/use-activities.preview.ts","../src/hooks/use-activities.ts","../src/widgets/RecentActivityWidget.tsx"],"sourcesContent":["import type { Activity } from \"./use-activities.types\";\n\nconst now = new Date();\n\nfunction minutesAgo(minutes: number): string {\n  return new Date(now.getTime() - minutes * 60_000).toISOString();\n}\n\nexport const PREVIEW_DATA: Activity[] = [\n  {\n    id: 1,\n    userName: \"Sarah Johnson\",\n    avatarUrl: null,\n    activityType: \"Order Placed\",\n    targetName: \"Wellness Starter Kit\",\n    timestamp: minutesAgo(12),\n    slug: \"order_placed\",\n  },\n  {\n    id: 2,\n    userName: \"Mike Chen\",\n    avatarUrl: null,\n    activityType: \"New Lead\",\n    targetName: \"Signed up from Instagram link\",\n    timestamp: minutesAgo(45),\n    slug: \"new_lead\",\n  },\n  {\n    id: 3,\n    userName: \"Visitor from Austin, TX\",\n    avatarUrl: null,\n    activityType: \"Page Views\",\n    targetName: \"Viewed product catalog (3 pages)\",\n    timestamp: minutesAgo(90),\n    slug: \"page_views\",\n  },\n  {\n    id: 4,\n    userName: \"Lisa Park\",\n    avatarUrl: null,\n    activityType: \"Video Complete\",\n    targetName: \"Watched: Getting Started Guide\",\n    timestamp: minutesAgo(180),\n    slug: \"video_complete\",\n  },\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-activities.preview\";\nimport type {\n  Activity,\n  ActivityContact,\n  ActivityVisitor,\n  ApiActivity,\n} from \"./use-activities.types\";\n\nexport type {\n  ActivityContact,\n  ActivityVisitor,\n  ActivitySlug,\n  ApiActivity,\n  Activity,\n} from \"./use-activities.types\";\n\ntype PaginationInfo = {\n  current: number;\n  previous: number | null;\n  next: number | null;\n  per_page: number;\n  pages: number;\n  count: number;\n};\n\ntype ApiResponse = [{ pagination: PaginationInfo }, { items: ApiActivity[] }];\n\nexport function useActivities() {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"rep-widget-use\",\n      \"activities\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Activity[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/v1.1/activities.json`\n        : \"/v1.1/activities.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 activities: ${response.status}`);\n      }\n\n      const data: ApiResponse = await response.json();\n      return transformActivities(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\n// Transform and format helpers\nfunction getUserName(\n  contact: ActivityContact | null,\n  visitor: ActivityVisitor | null,\n): string {\n  if (contact?.full_name) {\n    return contact.full_name;\n  }\n  if (contact?.first_name && contact?.last_name) {\n    return `${contact.first_name} ${contact.last_name}`;\n  }\n  if (visitor?.city && visitor?.state) {\n    return `Visitor from ${visitor.city}, ${visitor.state}`;\n  }\n  return \"Unknown Visitor\";\n}\n\nfunction transformActivities(rawData: ApiResponse): Activity[] {\n  const itemsObj = rawData[1];\n  if (!itemsObj?.items) return [];\n\n  return itemsObj.items\n    .map((activity) => ({\n      id: activity.id,\n      userName: getUserName(activity.contact, activity.visitor),\n      avatarUrl: activity.contact?.avatar_url ?? null,\n      activityType: formatActivityType(activity.slug),\n      targetName: activity.description || activity.title,\n      timestamp: activity.created_at,\n      slug: activity.slug,\n    }))\n    .sort(\n      (a, b) =>\n        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),\n    );\n}\n\nfunction formatActivityType(slug: string): string {\n  return slug\n    .split(\"_\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \");\n}\n","import { useMemo, 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 {\n  useActivities,\n  type Activity,\n  type ActivitySlug,\n} from \"../hooks/use-activities\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  faBell,\n  faCalendar,\n  faSquareCheck,\n  faEye,\n  faComment,\n  faPlay,\n  faCartShopping,\n  faStar,\n  faTrophy,\n  faUser,\n  faUserPlus,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Format timestamp to time string\nconst formatTimestamp = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleTimeString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    hour12: true,\n  });\n};\n\n// Format date for grouping header\nconst formatDateHeader = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n  });\n};\n\n// Get date string for grouping (without time)\nconst getDateKey = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toISOString().split(\"T\")[0] ?? timestamp;\n};\n\n// Group activities by date\nconst groupActivitiesByDate = (\n  activities: Activity[],\n): Map<string, Activity[]> => {\n  const grouped = new Map<string, Activity[]>();\n\n  for (const activity of activities) {\n    const dateKey = getDateKey(activity.timestamp);\n    const existing = grouped.get(dateKey);\n    if (existing) {\n      existing.push(activity);\n    } else {\n      grouped.set(dateKey, [activity]);\n    }\n  }\n\n  return grouped;\n};\n\n// Activity slug to icon mapping\nconst ACTIVITY_ICON_MAP: Record<ActivitySlug, IconDefinition> = {\n  // Orders/Cart\n  order_placed: faCartShopping,\n  abandoned_cart: faCartShopping,\n  cart_items_added: faCartShopping,\n  new_cart_items_added: faCartShopping,\n  // Messages\n  direct_message: faComment,\n  comment_reply: faComment,\n  message_received: faComment,\n  message_sent: faComment,\n  // Video\n  video: faPlay,\n  video_complete: faPlay,\n  video_contact: faPlay,\n  video_complete_contact: faPlay,\n  // Leads\n  new_lead: faUserPlus,\n  page_views_contact: faUserPlus,\n  smart_link_clicked: faUserPlus,\n  // Page Views\n  page_views: faEye,\n  // Events\n  upcoming_event: faCalendar,\n  // Reviews\n  review_left: faStar,\n  // Tasks\n  tasks: faSquareCheck,\n  // Announcements\n  announcements: faBell,\n  // Fantasy\n  fantasy_point: faTrophy,\n};\n\nconst getActivityIcon = (slug: ActivitySlug) =>\n  ACTIVITY_ICON_MAP[slug] ?? faUser;\n\n// Activity feed item component\ntype ActivityFeedItemProps = {\n  activity: Activity;\n  accentColor: ColorOptions;\n  textColor: ColorOptions;\n};\n\nfunction ActivityFeedItem({\n  activity,\n  accentColor,\n  textColor,\n}: ActivityFeedItemProps) {\n  const icon = getActivityIcon(activity.slug);\n\n  return (\n    <div className=\"flex w-full items-start gap-1.5\">\n      {/* Avatar */}\n      <div className=\"shrink-0\">\n        {activity.avatarUrl ? (\n          <div className=\"relative size-8 overflow-hidden rounded-full\">\n            <img\n              src={activity.avatarUrl}\n              alt={activity.userName}\n              className=\"size-full object-cover\"\n            />\n            <div className=\"border-foreground/[0.08] absolute inset-0 rounded-full border\" />\n          </div>\n        ) : (\n          <div\n            className={`bg-muted flex size-8 items-center justify-center rounded-full`}\n          >\n            <FontAwesomeIcon\n              icon={icon}\n              className={`size-3.5 text-${textColor} opacity-60`}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex w-full items-center gap-1.5\">\n          <p\n            className={`flex-1 text-base font-semibold text-${textColor} truncate`}\n          >\n            {activity.activityType}\n          </p>\n          <p className={`text-xs text-${textColor} shrink-0 opacity-50`}>\n            {formatTimestamp(activity.timestamp)}\n          </p>\n        </div>\n        <p className={`text-sm text-${textColor} opacity-80`}>\n          <span className={`font-medium text-${accentColor}`}>\n            {activity.userName}\n          </span>{\" \"}\n          {activity.targetName}\n        </p>\n      </div>\n    </div>\n  );\n}\n\ntype RecentActivityWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Activity settings\n  maxItemsToShow?: number;\n};\n\nexport function RecentActivityWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Recent Activity\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Activity defaults\n  maxItemsToShow = 5,\n\n  className,\n  ...props\n}: RecentActivityWidgetProps) {\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: activities = [], isLoading, isError } = useActivities();\n\n  const groupedActivities = useMemo(\n    () => groupActivitiesByDate(activities),\n    [activities],\n  );\n\n  const totalCount = Math.min(activities.length, maxItemsToShow);\n\n  // Get activities to display (limited by maxItemsToShow)\n  const activitiesToShow = useMemo(() => {\n    const result: { date: string; items: Activity[] }[] = [];\n    let count = 0;\n\n    for (const [dateKey, items] of groupedActivities) {\n      if (count >= maxItemsToShow) break;\n\n      const remainingSlots = maxItemsToShow - count;\n      const itemsToAdd = items.slice(0, remainingSlots);\n\n      if (itemsToAdd.length > 0) {\n        result.push({\n          date: formatDateHeader(items[0]?.timestamp ?? dateKey),\n          items: itemsToAdd,\n        });\n        count += itemsToAdd.length;\n      }\n    }\n\n    return result;\n  }, [groupedActivities, maxItemsToShow]);\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border-muted border ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2`}>\n        {/* Header */}\n        {titleEnabled && titleText && (\n          <div className=\"flex w-full items-start gap-2\">\n            <h2\n              className={`flex-1 text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n            {!isLoading && (\n              <span\n                className={`text-4xl font-bold text-${textColor} leading-none`}\n              >\n                {totalCount.toString().padStart(2, \"0\")}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Loading state */}\n        {isLoading ? (\n          <div className=\"flex min-h-[200px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          /* Error state */\n          <ErrorState />\n        ) : activities.length === 0 ? (\n          /* Empty state */\n          <div className=\"flex min-h-[200px] flex-col items-center justify-center gap-2\">\n            <FontAwesomeIcon\n              icon={faUser}\n              className={`size-12 text-${textColor} opacity-30`}\n            />\n            <p\n              className={`text-base font-semibold text-${textColor} opacity-50`}\n            >\n              No Activity To Report\n            </p>\n            <p className={`text-sm text-${textColor} opacity-40`}>\n              You&apos;ll Do Great!\n            </p>\n          </div>\n        ) : (\n          /* Activity list */\n          <div className=\"flex flex-col gap-4\">\n            {activitiesToShow.map((group, groupIndex) => (\n              <div key={groupIndex} className=\"flex flex-col gap-4\">\n                {/* Date header */}\n                <p className={`text-base font-semibold text-${textColor}`}>\n                  {group.date}\n                </p>\n\n                {/* Activity items */}\n                <div className=\"flex flex-col gap-4\">\n                  {group.items.map((activity) => (\n                    <ActivityFeedItem\n                      key={activity.id}\n                      activity={activity}\n                      accentColor={accentColor}\n                      textColor={textColor}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const recentActivityWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"RecentActivityWidget\",\n  displayName: \"Recent Activity 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 activity feed\",\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 activity feed\",\n      defaultValue: \"Recent Activity\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for activity content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for links and highlights\",\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    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the widget container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the widget container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"maxItemsToShow\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of activity items to display\",\n      defaultValue: 5,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
+{"version":3,"file":"RecentActivityWidget-CxEgRz3c.mjs","names":[],"sources":["../src/hooks/use-activities.preview.ts","../src/hooks/use-activities.ts","../src/widgets/RecentActivityWidget.tsx"],"sourcesContent":["import type { Activity } from \"./use-activities.types\";\n\nconst now = new Date();\n\nfunction minutesAgo(minutes: number): string {\n  return new Date(now.getTime() - minutes * 60_000).toISOString();\n}\n\nexport const PREVIEW_DATA: Activity[] = [\n  {\n    id: 1,\n    userName: \"Sarah Johnson\",\n    avatarUrl: null,\n    activityType: \"Order Placed\",\n    targetName: \"Wellness Starter Kit\",\n    timestamp: minutesAgo(12),\n    slug: \"order_placed\",\n  },\n  {\n    id: 2,\n    userName: \"Mike Chen\",\n    avatarUrl: null,\n    activityType: \"New Lead\",\n    targetName: \"Signed up from Instagram link\",\n    timestamp: minutesAgo(45),\n    slug: \"new_lead\",\n  },\n  {\n    id: 3,\n    userName: \"Visitor from Austin, TX\",\n    avatarUrl: null,\n    activityType: \"Page Views\",\n    targetName: \"Viewed product catalog (3 pages)\",\n    timestamp: minutesAgo(90),\n    slug: \"page_views\",\n  },\n  {\n    id: 4,\n    userName: \"Lisa Park\",\n    avatarUrl: null,\n    activityType: \"Video Complete\",\n    targetName: \"Watched: Getting Started Guide\",\n    timestamp: minutesAgo(180),\n    slug: \"video_complete\",\n  },\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-activities.preview\";\nimport type {\n  Activity,\n  ActivityContact,\n  ActivityVisitor,\n  ApiActivity,\n} from \"./use-activities.types\";\n\nexport type {\n  ActivityContact,\n  ActivityVisitor,\n  ActivitySlug,\n  ApiActivity,\n  Activity,\n} from \"./use-activities.types\";\n\ntype PaginationInfo = {\n  current: number;\n  previous: number | null;\n  next: number | null;\n  per_page: number;\n  pages: number;\n  count: number;\n};\n\ntype ApiResponse = [{ pagination: PaginationInfo }, { items: ApiActivity[] }];\n\nexport function useActivities(): UseQueryResult<Activity[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"rep-widget-use\",\n      \"activities\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Activity[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/v1.1/activities.json`\n        : \"/v1.1/activities.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 activities: ${response.status}`);\n      }\n\n      const data: ApiResponse = await response.json();\n      return transformActivities(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\n// Transform and format helpers\nfunction getUserName(\n  contact: ActivityContact | null,\n  visitor: ActivityVisitor | null,\n): string {\n  if (contact?.full_name) {\n    return contact.full_name;\n  }\n  if (contact?.first_name && contact?.last_name) {\n    return `${contact.first_name} ${contact.last_name}`;\n  }\n  if (visitor?.city && visitor?.state) {\n    return `Visitor from ${visitor.city}, ${visitor.state}`;\n  }\n  return \"Unknown Visitor\";\n}\n\nfunction transformActivities(rawData: ApiResponse): Activity[] {\n  const itemsObj = rawData[1];\n  if (!itemsObj?.items) return [];\n\n  return itemsObj.items\n    .map((activity) => ({\n      id: activity.id,\n      userName: getUserName(activity.contact, activity.visitor),\n      avatarUrl: activity.contact?.avatar_url ?? null,\n      activityType: formatActivityType(activity.slug),\n      targetName: activity.description || activity.title,\n      timestamp: activity.created_at,\n      slug: activity.slug,\n    }))\n    .sort(\n      (a, b) =>\n        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),\n    );\n}\n\nfunction formatActivityType(slug: string): string {\n  return slug\n    .split(\"_\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \");\n}\n","import { useMemo, 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 {\n  useActivities,\n  type Activity,\n  type ActivitySlug,\n} from \"../hooks/use-activities\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  faBell,\n  faCalendar,\n  faSquareCheck,\n  faEye,\n  faComment,\n  faPlay,\n  faCartShopping,\n  faStar,\n  faTrophy,\n  faUser,\n  faUserPlus,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Format timestamp to time string\nconst formatTimestamp = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleTimeString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    hour12: true,\n  });\n};\n\n// Format date for grouping header\nconst formatDateHeader = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n  });\n};\n\n// Get date string for grouping (without time)\nconst getDateKey = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toISOString().split(\"T\")[0] ?? timestamp;\n};\n\n// Group activities by date\nconst groupActivitiesByDate = (\n  activities: Activity[],\n): Map<string, Activity[]> => {\n  const grouped = new Map<string, Activity[]>();\n\n  for (const activity of activities) {\n    const dateKey = getDateKey(activity.timestamp);\n    const existing = grouped.get(dateKey);\n    if (existing) {\n      existing.push(activity);\n    } else {\n      grouped.set(dateKey, [activity]);\n    }\n  }\n\n  return grouped;\n};\n\n// Activity slug to icon mapping\nconst ACTIVITY_ICON_MAP: Record<ActivitySlug, IconDefinition> = {\n  // Orders/Cart\n  order_placed: faCartShopping,\n  abandoned_cart: faCartShopping,\n  cart_items_added: faCartShopping,\n  new_cart_items_added: faCartShopping,\n  // Messages\n  direct_message: faComment,\n  comment_reply: faComment,\n  message_received: faComment,\n  message_sent: faComment,\n  // Video\n  video: faPlay,\n  video_complete: faPlay,\n  video_contact: faPlay,\n  video_complete_contact: faPlay,\n  // Leads\n  new_lead: faUserPlus,\n  page_views_contact: faUserPlus,\n  smart_link_clicked: faUserPlus,\n  // Page Views\n  page_views: faEye,\n  // Events\n  upcoming_event: faCalendar,\n  // Reviews\n  review_left: faStar,\n  // Tasks\n  tasks: faSquareCheck,\n  // Announcements\n  announcements: faBell,\n  // Fantasy\n  fantasy_point: faTrophy,\n};\n\nconst getActivityIcon = (slug: ActivitySlug) =>\n  ACTIVITY_ICON_MAP[slug] ?? faUser;\n\n// Activity feed item component\ntype ActivityFeedItemProps = {\n  activity: Activity;\n  accentColor: ColorOptions;\n  textColor: ColorOptions;\n};\n\nfunction ActivityFeedItem({\n  activity,\n  accentColor,\n  textColor,\n}: ActivityFeedItemProps) {\n  const icon = getActivityIcon(activity.slug);\n\n  return (\n    <div className=\"flex w-full items-start gap-1.5\">\n      {/* Avatar */}\n      <div className=\"shrink-0\">\n        {activity.avatarUrl ? (\n          <div className=\"relative size-8 overflow-hidden rounded-full\">\n            <img\n              src={activity.avatarUrl}\n              alt={activity.userName}\n              className=\"size-full object-cover\"\n            />\n            <div className=\"border-foreground/[0.08] absolute inset-0 rounded-full border\" />\n          </div>\n        ) : (\n          <div\n            className={`bg-muted flex size-8 items-center justify-center rounded-full`}\n          >\n            <FontAwesomeIcon\n              icon={icon}\n              className={`size-3.5 text-${textColor} opacity-60`}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex w-full items-center gap-1.5\">\n          <p\n            className={`flex-1 text-base font-semibold text-${textColor} truncate`}\n          >\n            {activity.activityType}\n          </p>\n          <p className={`text-xs text-${textColor} shrink-0 opacity-50`}>\n            {formatTimestamp(activity.timestamp)}\n          </p>\n        </div>\n        <p className={`text-sm text-${textColor} opacity-80`}>\n          <span className={`font-medium text-${accentColor}`}>\n            {activity.userName}\n          </span>{\" \"}\n          {activity.targetName}\n        </p>\n      </div>\n    </div>\n  );\n}\n\ntype RecentActivityWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Activity settings\n  maxItemsToShow?: number;\n};\n\nexport function RecentActivityWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Recent Activity\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Activity defaults\n  maxItemsToShow = 5,\n\n  className,\n  ...props\n}: RecentActivityWidgetProps): 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: activities = [], isLoading, isError } = useActivities();\n\n  const groupedActivities = useMemo(\n    () => groupActivitiesByDate(activities),\n    [activities],\n  );\n\n  const totalCount = Math.min(activities.length, maxItemsToShow);\n\n  // Get activities to display (limited by maxItemsToShow)\n  const activitiesToShow = useMemo(() => {\n    const result: { date: string; items: Activity[] }[] = [];\n    let count = 0;\n\n    for (const [dateKey, items] of groupedActivities) {\n      if (count >= maxItemsToShow) break;\n\n      const remainingSlots = maxItemsToShow - count;\n      const itemsToAdd = items.slice(0, remainingSlots);\n\n      if (itemsToAdd.length > 0) {\n        result.push({\n          date: formatDateHeader(items[0]?.timestamp ?? dateKey),\n          items: itemsToAdd,\n        });\n        count += itemsToAdd.length;\n      }\n    }\n\n    return result;\n  }, [groupedActivities, maxItemsToShow]);\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border-muted border ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2`}>\n        {/* Header */}\n        {titleEnabled && titleText && (\n          <div className=\"flex w-full items-start gap-2\">\n            <h2\n              className={`flex-1 text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n            {!isLoading && (\n              <span\n                className={`text-4xl font-bold text-${textColor} leading-none`}\n              >\n                {totalCount.toString().padStart(2, \"0\")}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Loading state */}\n        {isLoading ? (\n          <div className=\"flex min-h-[200px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          /* Error state */\n          <ErrorState />\n        ) : activities.length === 0 ? (\n          /* Empty state */\n          <div className=\"flex min-h-[200px] flex-col items-center justify-center gap-2\">\n            <FontAwesomeIcon\n              icon={faUser}\n              className={`size-12 text-${textColor} opacity-30`}\n            />\n            <p\n              className={`text-base font-semibold text-${textColor} opacity-50`}\n            >\n              No Activity To Report\n            </p>\n            <p className={`text-sm text-${textColor} opacity-40`}>\n              You&apos;ll Do Great!\n            </p>\n          </div>\n        ) : (\n          /* Activity list */\n          <div className=\"flex flex-col gap-4\">\n            {activitiesToShow.map((group, groupIndex) => (\n              <div key={groupIndex} className=\"flex flex-col gap-4\">\n                {/* Date header */}\n                <p className={`text-base font-semibold text-${textColor}`}>\n                  {group.date}\n                </p>\n\n                {/* Activity items */}\n                <div className=\"flex flex-col gap-4\">\n                  {group.items.map((activity) => (\n                    <ActivityFeedItem\n                      key={activity.id}\n                      activity={activity}\n                      accentColor={accentColor}\n                      textColor={textColor}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const recentActivityWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"RecentActivityWidget\",\n  displayName: \"Recent Activity 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 activity feed\",\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 activity feed\",\n      defaultValue: \"Recent Activity\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for activity content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for links and highlights\",\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    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the widget container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the widget container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"maxItemsToShow\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of activity items to display\",\n      defaultValue: 5,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/RegistryContext-CscXrsRa.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RegistryContext-CscXrsRa.mjs","names":[],"sources":["../src/contexts/RegistryContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext = createContext<WidgetRegistry | undefined>(\n  undefined,\n);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps) {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAa,kBAAkB,cAC7B,KAAA,EACD;;;;;AAWD,SAAgB,iBAAiB,EAC/B,UACA,YACwB;CAExB,MAAM,iBAAiB,WAAW,gBAAgB;CAClD,MAAM,eAAe,YAAY;AAEjC,KAAI,CAAC,aACH,OAAM,IAAI,MACR,+FACD;AAGH,QACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC9B;EACwB,CAAA;;;;;;AAQ/B,SAAgB,cAA8B;CAC5C,MAAM,WAAW,WAAW,gBAAgB;AAE5C,KAAI,CAAC,SACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}
+{"version":3,"file":"RegistryContext-CscXrsRa.mjs","names":[],"sources":["../src/contexts/RegistryContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext: React.Context<WidgetRegistry | undefined> =\n  createContext<WidgetRegistry | undefined>(undefined);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps): React.JSX.Element {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAa,kBACX,cAA0C,KAAA,EAAU;;;;;AAWtD,SAAgB,iBAAiB,EAC/B,UACA,YAC2C;CAE3C,MAAM,iBAAiB,WAAW,gBAAgB;CAClD,MAAM,eAAe,YAAY;AAEjC,KAAI,CAAC,aACH,OAAM,IAAI,MACR,+FACD;AAGH,QACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC9B;EACwB,CAAA;;;;;;AAQ/B,SAAgB,cAA8B;CAC5C,MAAM,WAAW,WAAW,gBAAgB;AAE5C,KAAI,CAAC,SACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}

package/dist/{RegistryContext-6KXd4t6d.cjs → RegistryContext-xjea4xVV.cjs}

@@ -1,6 +1,7 @@
-require("./chunk-CZWwpsFl.cjs");
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+react = require_chunk.__toESM(react);
 //#region src/contexts/RegistryContext.tsx
 /**
 * Context for providing the widget registry to all components in the tree.
@@ -51,4 +52,4 @@ Object.defineProperty(exports, "useRegistry", {
 	}
 });
 
-//# sourceMappingURL=RegistryContext-6KXd4t6d.cjs.map
+//# sourceMappingURL=RegistryContext-xjea4xVV.cjs.map

package/dist/RegistryContext-xjea4xVV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistryContext-xjea4xVV.cjs","names":[],"sources":["../src/contexts/RegistryContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/rep-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext: React.Context<WidgetRegistry | undefined> =\n  createContext<WidgetRegistry | undefined>(undefined);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps): React.JSX.Element {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"],"mappings":";;;;;;;;;;;AAwCA,MAAa,mBAAA,GAAA,MAAA,eAC+B,KAAA,EAAU;;;;;AAWtD,SAAgB,iBAAiB,EAC/B,UACA,YAC2C;CAE3C,MAAM,kBAAA,GAAA,MAAA,YAA4B,gBAAgB;CAClD,MAAM,eAAe,YAAY;AAEjC,KAAI,CAAC,aACH,OAAM,IAAI,MACR,+FACD;AAGH,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC9B;EACwB,CAAA;;;;;;AAQ/B,SAAgB,cAA8B;CAC5C,MAAM,YAAA,GAAA,MAAA,YAAsB,gBAAgB;AAE5C,KAAI,CAAC,SACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}

package/dist/{ScreenRenderer-BCd4Rsba.cjs → ScreenRenderer-B-nGFObe.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-CZWwpsFl.cjs");
-const require_RegistryContext = require("./RegistryContext-6KXd4t6d.cjs");
+const require_RegistryContext = require("./RegistryContext-xjea4xVV.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _fluid_app_rep_core_types = require("@fluid-app/rep-core/types");
@@ -79,4 +79,4 @@ Object.defineProperty(exports, "ScreenRenderer", {
 	}
 });
 
-//# sourceMappingURL=ScreenRenderer-BCd4Rsba.cjs.map
+//# sourceMappingURL=ScreenRenderer-B-nGFObe.cjs.map

package/dist/ScreenRenderer-B-nGFObe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenRenderer-B-nGFObe.cjs","names":["useRegistry","WIDGET_TYPE_NAMES","RegistryProvider"],"sources":["../src/core/ScreenRenderer.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { useCallback } from \"react\";\nimport type React from \"react\";\nimport type {\n  WidgetSchema,\n  TypedWidgetSchema,\n  WidgetPath,\n} from \"@fluid-app/rep-core/types\";\nimport { WIDGET_TYPE_NAMES } from \"@fluid-app/rep-core/types\";\nimport { RegistryProvider, useRegistry } from \"../contexts/RegistryContext\";\n\nexport interface ScreenRendererProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n> {\n  /** Array of widget schemas to render */\n  screen: TypedWidgetSchema<T>[] | WidgetSchema[];\n  /** Widget registry mapping type names to components */\n  registry?: T;\n  /** Container widgets (like LayoutWidget) receive these additional props */\n  containerWidgetTypes?: string[];\n  /** Additional CSS classes for the wrapper div */\n  className?: string;\n}\n\ninterface ScreenRendererContentProps {\n  screen: WidgetSchema[];\n  containerWidgetTypes: string[];\n  className?: string | undefined;\n}\n\n/**\n * Internal component that uses the registry from context.\n * This allows us to avoid prop drilling the registry.\n */\nfunction ScreenRendererContent({\n  screen,\n  containerWidgetTypes,\n  className,\n}: ScreenRendererContentProps) {\n  const registry = useRegistry();\n\n  // Check if a widget type is a container\n  const isContainerWidget = useCallback(\n    (widgetType: string) => containerWidgetTypes.includes(widgetType),\n    [containerWidgetTypes],\n  );\n\n  // Render widgets recursively with path tracking\n  const renderWidget = useCallback(\n    (widget: WidgetSchema, index: number, currentPath: WidgetPath) => {\n      const Component = registry[widget.type];\n      if (!Component) {\n        console.warn(\n          `Widget type \"${String(widget.type)}\" not found in registry`,\n        );\n        return null;\n      }\n\n      const widgetPath = [...currentPath, index];\n\n      // Build additional props for container widgets\n      const additionalProps = isContainerWidget(widget.type)\n        ? {\n            widgetId: widget.id,\n            widgetPath,\n          }\n        : {};\n\n      const props = {\n        ...widget.props,\n        ...additionalProps,\n      };\n\n      return (\n        <div\n          key={widget.id || index}\n          className=\"h-full w-full overflow-x-hidden\"\n        >\n          <Component {...props} />\n        </div>\n      );\n    },\n    [registry, isContainerWidget],\n  );\n\n  return (\n    <div className={className || \"h-full w-full\"}>\n      {screen?.map((item, index) => {\n        // Skip null items (empty grid cells)\n        if (!item) return null;\n        return renderWidget(item, index, []);\n      })}\n    </div>\n  );\n}\n\n/**\n * ScreenRenderer - View-only component for rendering widget screens.\n *\n * This is a simplified version designed for the SDK that only handles\n * rendering widgets without edit mode or drag-and-drop functionality.\n *\n * Features:\n * - Static rendering of widgets\n * - Registry context: No prop drilling for widget registry\n * - Container widget support with path tracking\n *\n * Usage:\n * ```tsx\n * import { ScreenRenderer } from '@fluid-app/rep-widgets/core';\n * import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';\n *\n * <ScreenRenderer\n *   screen={widgets}\n *   registry={WIDGET_REGISTRY}\n * />\n * ```\n */\nexport function ScreenRenderer<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(props: ScreenRendererProps<T>): React.JSX.Element {\n  const {\n    screen,\n    registry,\n    containerWidgetTypes = [\n      WIDGET_TYPE_NAMES.Layout,\n      WIDGET_TYPE_NAMES.Container,\n    ],\n    className,\n  } = props;\n\n  // Conditionally pass registry prop to satisfy exactOptionalPropertyTypes\n  // When registry is undefined, we omit it entirely and let RegistryProvider inherit from parent\n  const registryProviderProps = registry !== undefined ? { registry } : {};\n\n  return (\n    <RegistryProvider {...registryProviderProps}>\n      {/* Type assertion required: TypedWidgetSchema<T>[] is a subtype of WidgetSchema[]\n          when T's components accept props compatible with WidgetSchema props.\n          This enables type-safe widget rendering with custom registries while allowing\n          the internal renderer to work with the base WidgetSchema type. */}\n      <ScreenRendererContent\n        screen={screen as WidgetSchema[]}\n        containerWidgetTypes={containerWidgetTypes}\n        className={className}\n      />\n    </RegistryProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAmCA,SAAS,sBAAsB,EAC7B,QACA,sBACA,aAC6B;CAC7B,MAAM,WAAWA,wBAAAA,aAAa;CAG9B,MAAM,qBAAA,GAAA,MAAA,cACH,eAAuB,qBAAqB,SAAS,WAAW,EACjE,CAAC,qBAAqB,CACvB;CAGD,MAAM,gBAAA,GAAA,MAAA,cACH,QAAsB,OAAe,gBAA4B;EAChE,MAAM,YAAY,SAAS,OAAO;AAClC,MAAI,CAAC,WAAW;AACd,WAAQ,KACN,gBAAgB,OAAO,OAAO,KAAK,CAAC,yBACrC;AACD,UAAO;;EAGT,MAAM,aAAa,CAAC,GAAG,aAAa,MAAM;EAG1C,MAAM,kBAAkB,kBAAkB,OAAO,KAAK,GAClD;GACE,UAAU,OAAO;GACjB;GACD,GACD,EAAE;AAON,SACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAEE,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,WAAD;IATF,GAAG,OAAO;IACV,GAAG;IAQuB,CAAA;GACpB,EAJC,OAAO,MAAM,MAId;IAGV,CAAC,UAAU,kBAAkB,CAC9B;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,aAAa;YAC1B,QAAQ,KAAK,MAAM,UAAU;AAE5B,OAAI,CAAC,KAAM,QAAO;AAClB,UAAO,aAAa,MAAM,OAAO,EAAE,CAAC;IACpC;EACE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,SAAgB,eAGd,OAAkD;CAClD,MAAM,EACJ,QACA,UACA,uBAAuB,CACrBC,0BAAAA,kBAAkB,QAClBA,0BAAAA,kBAAkB,UACnB,EACD,cACE;AAMJ,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,kBAAD;EAAkB,GAHU,aAAa,KAAA,IAAY,EAAE,UAAU,GAAG,EAAE;YAQpE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;GACU;GACc;GACX;GACX,CAAA;EACe,CAAA"}

package/dist/ScreenRenderer-CVJMpQ9A.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenRenderer-CVJMpQ9A.mjs","names":[],"sources":["../src/core/ScreenRenderer.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { useCallback } from \"react\";\nimport type {\n  WidgetSchema,\n  TypedWidgetSchema,\n  WidgetPath,\n} from \"@fluid-app/rep-core/types\";\nimport { WIDGET_TYPE_NAMES } from \"@fluid-app/rep-core/types\";\nimport { RegistryProvider, useRegistry } from \"../contexts/RegistryContext\";\n\nexport interface ScreenRendererProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n> {\n  /** Array of widget schemas to render */\n  screen: TypedWidgetSchema<T>[] | WidgetSchema[];\n  /** Widget registry mapping type names to components */\n  registry?: T;\n  /** Container widgets (like LayoutWidget) receive these additional props */\n  containerWidgetTypes?: string[];\n  /** Additional CSS classes for the wrapper div */\n  className?: string;\n}\n\ninterface ScreenRendererContentProps {\n  screen: WidgetSchema[];\n  containerWidgetTypes: string[];\n  className?: string | undefined;\n}\n\n/**\n * Internal component that uses the registry from context.\n * This allows us to avoid prop drilling the registry.\n */\nfunction ScreenRendererContent({\n  screen,\n  containerWidgetTypes,\n  className,\n}: ScreenRendererContentProps) {\n  const registry = useRegistry();\n\n  // Check if a widget type is a container\n  const isContainerWidget = useCallback(\n    (widgetType: string) => containerWidgetTypes.includes(widgetType),\n    [containerWidgetTypes],\n  );\n\n  // Render widgets recursively with path tracking\n  const renderWidget = useCallback(\n    (widget: WidgetSchema, index: number, currentPath: WidgetPath) => {\n      const Component = registry[widget.type];\n      if (!Component) {\n        console.warn(\n          `Widget type \"${String(widget.type)}\" not found in registry`,\n        );\n        return null;\n      }\n\n      const widgetPath = [...currentPath, index];\n\n      // Build additional props for container widgets\n      const additionalProps = isContainerWidget(widget.type)\n        ? {\n            widgetId: widget.id,\n            widgetPath,\n          }\n        : {};\n\n      const props = {\n        ...widget.props,\n        ...additionalProps,\n      };\n\n      return (\n        <div\n          key={widget.id || index}\n          className=\"h-full w-full overflow-x-hidden\"\n        >\n          <Component {...props} />\n        </div>\n      );\n    },\n    [registry, isContainerWidget],\n  );\n\n  return (\n    <div className={className || \"h-full w-full\"}>\n      {screen?.map((item, index) => {\n        // Skip null items (empty grid cells)\n        if (!item) return null;\n        return renderWidget(item, index, []);\n      })}\n    </div>\n  );\n}\n\n/**\n * ScreenRenderer - View-only component for rendering widget screens.\n *\n * This is a simplified version designed for the SDK that only handles\n * rendering widgets without edit mode or drag-and-drop functionality.\n *\n * Features:\n * - Static rendering of widgets\n * - Registry context: No prop drilling for widget registry\n * - Container widget support with path tracking\n *\n * Usage:\n * ```tsx\n * import { ScreenRenderer } from '@fluid-app/rep-widgets/core';\n * import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';\n *\n * <ScreenRenderer\n *   screen={widgets}\n *   registry={WIDGET_REGISTRY}\n * />\n * ```\n */\nexport function ScreenRenderer<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(props: ScreenRendererProps<T>) {\n  const {\n    screen,\n    registry,\n    containerWidgetTypes = [\n      WIDGET_TYPE_NAMES.Layout,\n      WIDGET_TYPE_NAMES.Container,\n    ],\n    className,\n  } = props;\n\n  // Conditionally pass registry prop to satisfy exactOptionalPropertyTypes\n  // When registry is undefined, we omit it entirely and let RegistryProvider inherit from parent\n  const registryProviderProps = registry !== undefined ? { registry } : {};\n\n  return (\n    <RegistryProvider {...registryProviderProps}>\n      {/* Type assertion required: TypedWidgetSchema<T>[] is a subtype of WidgetSchema[]\n          when T's components accept props compatible with WidgetSchema props.\n          This enables type-safe widget rendering with custom registries while allowing\n          the internal renderer to work with the base WidgetSchema type. */}\n      <ScreenRendererContent\n        screen={screen as WidgetSchema[]}\n        containerWidgetTypes={containerWidgetTypes}\n        className={className}\n      />\n    </RegistryProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAS,sBAAsB,EAC7B,QACA,sBACA,aAC6B;CAC7B,MAAM,WAAW,aAAa;CAG9B,MAAM,oBAAoB,aACvB,eAAuB,qBAAqB,SAAS,WAAW,EACjE,CAAC,qBAAqB,CACvB;CAGD,MAAM,eAAe,aAClB,QAAsB,OAAe,gBAA4B;EAChE,MAAM,YAAY,SAAS,OAAO;AAClC,MAAI,CAAC,WAAW;AACd,WAAQ,KACN,gBAAgB,OAAO,OAAO,KAAK,CAAC,yBACrC;AACD,UAAO;;EAGT,MAAM,aAAa,CAAC,GAAG,aAAa,MAAM;EAG1C,MAAM,kBAAkB,kBAAkB,OAAO,KAAK,GAClD;GACE,UAAU,OAAO;GACjB;GACD,GACD,EAAE;AAON,SACE,oBAAC,OAAD;GAEE,WAAU;aAEV,oBAAC,WAAD;IATF,GAAG,OAAO;IACV,GAAG;IAQuB,CAAA;GACpB,EAJC,OAAO,MAAM,MAId;IAGV,CAAC,UAAU,kBAAkB,CAC9B;AAED,QACE,oBAAC,OAAD;EAAK,WAAW,aAAa;YAC1B,QAAQ,KAAK,MAAM,UAAU;AAE5B,OAAI,CAAC,KAAM,QAAO;AAClB,UAAO,aAAa,MAAM,OAAO,EAAE,CAAC;IACpC;EACE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,SAAgB,eAGd,OAA+B;CAC/B,MAAM,EACJ,QACA,UACA,uBAAuB,CACrB,kBAAkB,QAClB,kBAAkB,UACnB,EACD,cACE;AAMJ,QACE,oBAAC,kBAAD;EAAkB,GAHU,aAAa,KAAA,IAAY,EAAE,UAAU,GAAG,EAAE;YAQpE,oBAAC,uBAAD;GACU;GACc;GACX;GACX,CAAA;EACe,CAAA"}
+{"version":3,"file":"ScreenRenderer-CVJMpQ9A.mjs","names":[],"sources":["../src/core/ScreenRenderer.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { useCallback } from \"react\";\nimport type React from \"react\";\nimport type {\n  WidgetSchema,\n  TypedWidgetSchema,\n  WidgetPath,\n} from \"@fluid-app/rep-core/types\";\nimport { WIDGET_TYPE_NAMES } from \"@fluid-app/rep-core/types\";\nimport { RegistryProvider, useRegistry } from \"../contexts/RegistryContext\";\n\nexport interface ScreenRendererProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n> {\n  /** Array of widget schemas to render */\n  screen: TypedWidgetSchema<T>[] | WidgetSchema[];\n  /** Widget registry mapping type names to components */\n  registry?: T;\n  /** Container widgets (like LayoutWidget) receive these additional props */\n  containerWidgetTypes?: string[];\n  /** Additional CSS classes for the wrapper div */\n  className?: string;\n}\n\ninterface ScreenRendererContentProps {\n  screen: WidgetSchema[];\n  containerWidgetTypes: string[];\n  className?: string | undefined;\n}\n\n/**\n * Internal component that uses the registry from context.\n * This allows us to avoid prop drilling the registry.\n */\nfunction ScreenRendererContent({\n  screen,\n  containerWidgetTypes,\n  className,\n}: ScreenRendererContentProps) {\n  const registry = useRegistry();\n\n  // Check if a widget type is a container\n  const isContainerWidget = useCallback(\n    (widgetType: string) => containerWidgetTypes.includes(widgetType),\n    [containerWidgetTypes],\n  );\n\n  // Render widgets recursively with path tracking\n  const renderWidget = useCallback(\n    (widget: WidgetSchema, index: number, currentPath: WidgetPath) => {\n      const Component = registry[widget.type];\n      if (!Component) {\n        console.warn(\n          `Widget type \"${String(widget.type)}\" not found in registry`,\n        );\n        return null;\n      }\n\n      const widgetPath = [...currentPath, index];\n\n      // Build additional props for container widgets\n      const additionalProps = isContainerWidget(widget.type)\n        ? {\n            widgetId: widget.id,\n            widgetPath,\n          }\n        : {};\n\n      const props = {\n        ...widget.props,\n        ...additionalProps,\n      };\n\n      return (\n        <div\n          key={widget.id || index}\n          className=\"h-full w-full overflow-x-hidden\"\n        >\n          <Component {...props} />\n        </div>\n      );\n    },\n    [registry, isContainerWidget],\n  );\n\n  return (\n    <div className={className || \"h-full w-full\"}>\n      {screen?.map((item, index) => {\n        // Skip null items (empty grid cells)\n        if (!item) return null;\n        return renderWidget(item, index, []);\n      })}\n    </div>\n  );\n}\n\n/**\n * ScreenRenderer - View-only component for rendering widget screens.\n *\n * This is a simplified version designed for the SDK that only handles\n * rendering widgets without edit mode or drag-and-drop functionality.\n *\n * Features:\n * - Static rendering of widgets\n * - Registry context: No prop drilling for widget registry\n * - Container widget support with path tracking\n *\n * Usage:\n * ```tsx\n * import { ScreenRenderer } from '@fluid-app/rep-widgets/core';\n * import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';\n *\n * <ScreenRenderer\n *   screen={widgets}\n *   registry={WIDGET_REGISTRY}\n * />\n * ```\n */\nexport function ScreenRenderer<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(props: ScreenRendererProps<T>): React.JSX.Element {\n  const {\n    screen,\n    registry,\n    containerWidgetTypes = [\n      WIDGET_TYPE_NAMES.Layout,\n      WIDGET_TYPE_NAMES.Container,\n    ],\n    className,\n  } = props;\n\n  // Conditionally pass registry prop to satisfy exactOptionalPropertyTypes\n  // When registry is undefined, we omit it entirely and let RegistryProvider inherit from parent\n  const registryProviderProps = registry !== undefined ? { registry } : {};\n\n  return (\n    <RegistryProvider {...registryProviderProps}>\n      {/* Type assertion required: TypedWidgetSchema<T>[] is a subtype of WidgetSchema[]\n          when T's components accept props compatible with WidgetSchema props.\n          This enables type-safe widget rendering with custom registries while allowing\n          the internal renderer to work with the base WidgetSchema type. */}\n      <ScreenRendererContent\n        screen={screen as WidgetSchema[]}\n        containerWidgetTypes={containerWidgetTypes}\n        className={className}\n      />\n    </RegistryProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAmCA,SAAS,sBAAsB,EAC7B,QACA,sBACA,aAC6B;CAC7B,MAAM,WAAW,aAAa;CAG9B,MAAM,oBAAoB,aACvB,eAAuB,qBAAqB,SAAS,WAAW,EACjE,CAAC,qBAAqB,CACvB;CAGD,MAAM,eAAe,aAClB,QAAsB,OAAe,gBAA4B;EAChE,MAAM,YAAY,SAAS,OAAO;AAClC,MAAI,CAAC,WAAW;AACd,WAAQ,KACN,gBAAgB,OAAO,OAAO,KAAK,CAAC,yBACrC;AACD,UAAO;;EAGT,MAAM,aAAa,CAAC,GAAG,aAAa,MAAM;EAG1C,MAAM,kBAAkB,kBAAkB,OAAO,KAAK,GAClD;GACE,UAAU,OAAO;GACjB;GACD,GACD,EAAE;AAON,SACE,oBAAC,OAAD;GAEE,WAAU;aAEV,oBAAC,WAAD;IATF,GAAG,OAAO;IACV,GAAG;IAQuB,CAAA;GACpB,EAJC,OAAO,MAAM,MAId;IAGV,CAAC,UAAU,kBAAkB,CAC9B;AAED,QACE,oBAAC,OAAD;EAAK,WAAW,aAAa;YAC1B,QAAQ,KAAK,MAAM,UAAU;AAE5B,OAAI,CAAC,KAAM,QAAO;AAClB,UAAO,aAAa,MAAM,OAAO,EAAE,CAAC;IACpC;EACE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AA0BV,SAAgB,eAGd,OAAkD;CAClD,MAAM,EACJ,QACA,UACA,uBAAuB,CACrB,kBAAkB,QAClB,kBAAkB,UACnB,EACD,cACE;AAMJ,QACE,oBAAC,kBAAD;EAAkB,GAHU,aAAa,KAAA,IAAY,EAAE,UAAU,GAAG,EAAE;YAQpE,oBAAC,uBAAD;GACU;GACc;GACX;GACX,CAAA;EACe,CAAA"}

package/dist/{ScreenRendererContext-D62_Fazh.cjs → ScreenRendererContext-B660JoZO.cjs}

@@ -1,5 +1,6 @@
-require("./chunk-CZWwpsFl.cjs");
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
 let react = require("react");
+react = require_chunk.__toESM(react);
 //#region src/contexts/ScreenRendererContext.tsx
 /**
 * Context for providing an alternative ScreenRenderer component.
@@ -32,4 +33,4 @@ Object.defineProperty(exports, "useScreenRenderer", {
 	}
 });
 
-//# sourceMappingURL=ScreenRendererContext-D62_Fazh.cjs.map
+//# sourceMappingURL=ScreenRendererContext-B660JoZO.cjs.map

package/dist/ScreenRendererContext-B660JoZO.cjs.map

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

package/dist/ScreenRendererContext-DaldtZnX.mjs.map

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

package/dist/SpacerWidget-Bs18KYH9.mjs.map

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

package/dist/{SpacerWidget-D-Foe9wG.cjs → SpacerWidget-DGccATXA.cjs}

@@ -57,4 +57,4 @@ Object.defineProperty(exports, "spacerWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SpacerWidget-D-Foe9wG.cjs.map
+//# sourceMappingURL=SpacerWidget-DGccATXA.cjs.map

package/dist/SpacerWidget-DGccATXA.cjs.map

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

package/dist/TableWidget-Cc4kQaOE.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableWidget-Cc4kQaOE.mjs","names":[],"sources":["../src/widgets/TableWidget.tsx"],"sourcesContent":["import { useState, useMemo, 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 { Input } from \"@fluid-app/ui-primitives\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport { type ShareableItem } from \"@fluid-app/rep-core/types\";\n\n// Column definition for the table\ntype ColumnDef = {\n  key: string;\n  label: string;\n  sortable: boolean;\n  render?: (value: unknown, item: ShareableItem) => React.ReactNode;\n};\n\nconst DEFAULT_DATA: ShareableItem[] = [];\n\n// ---------------------------------------------------------------------------\n// Column cell renderers\n// ---------------------------------------------------------------------------\n\nfunction ImageCellRenderer(_value: unknown, item: ShareableItem) {\n  return (\n    <div className=\"h-10 w-10 rounded object-cover\">\n      <MediaRenderer {...getMediaPropsFromShareable(item)} />\n    </div>\n  );\n}\n\nfunction PriceCellRenderer(_value: unknown, item: ShareableItem) {\n  return ((item.display_price as string) ?? item.price) || \"-\";\n}\n\nfunction StatusCellRenderer(value: unknown) {\n  const status = String(value || \"unknown\").toLowerCase();\n  const statusStyles: Record<string, string> = {\n    active: \"bg-primary text-primary-foreground\",\n    inactive: \"bg-secondary text-secondary-foreground\",\n    unknown: \"bg-muted text-muted-foreground\",\n  };\n  return (\n    <span\n      className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${statusStyles[status] || \"bg-muted text-foreground\"}`}\n    >\n      {String(value || \"Unknown\")}\n    </span>\n  );\n}\n\n// Default columns for product data\nconst defaultColumns: ColumnDef[] = [\n  {\n    key: \"imageUrl\",\n    label: \"Image\",\n    sortable: false,\n    render: ImageCellRenderer,\n  },\n  {\n    key: \"title\",\n    label: \"Title\",\n    sortable: true,\n  },\n  {\n    key: \"price\",\n    label: \"Price\",\n    sortable: true,\n    render: PriceCellRenderer,\n  },\n  {\n    key: \"status\",\n    label: \"Status\",\n    sortable: true,\n    render: StatusCellRenderer,\n  },\n];\n\ntype TableWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  alternatingColorEnabled?: boolean;\n  textColor?: ColorOptions;\n  headerBackgroundColor?: ColorOptions;\n  headerTextColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  data?: ShareableItem[];\n\n  // Features\n  filterEnabled?: boolean;\n  sortingEnabled?: boolean;\n  paginationEnabled?: boolean;\n  maxRowsPerPage?: number;\n};\n\nexport function TableWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Products\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  alternatingColorEnabled = true,\n  textColor = \"foreground\",\n  headerBackgroundColor = \"muted\",\n  headerTextColor = \"foreground\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Data\n  data = DEFAULT_DATA,\n\n  // Feature defaults\n  filterEnabled = true,\n  sortingEnabled = true,\n  paginationEnabled = true,\n  maxRowsPerPage = 5,\n\n  className,\n  ...props\n}: TableWidgetProps) {\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 pageSize = maxRowsPerPage;\n\n  // State for filtering, sorting, and pagination\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n  const [sortConfig, setSortConfig] = useState<{\n    key: string;\n    direction: \"asc\" | \"desc\";\n  } | null>(null);\n  const [currentPage, setCurrentPage] = useState(1);\n\n  const columns = defaultColumns;\n\n  // Filter data\n  const filteredData = useMemo(() => {\n    let result = [...data];\n\n    if (globalFilter) {\n      const lowerFilter = globalFilter.toLowerCase();\n      result = result.filter((item) =>\n        columns.some((col) => {\n          const value = item[col.key];\n          return String(value ?? \"\")\n            .toLowerCase()\n            .includes(lowerFilter);\n        }),\n      );\n    }\n\n    return result;\n  }, [data, globalFilter, columns]);\n\n  // Sort data\n  const sortedData = useMemo(() => {\n    if (!sortConfig) return filteredData;\n\n    return [...filteredData].sort((a, b) => {\n      const aValue = a[sortConfig.key];\n      const bValue = b[sortConfig.key];\n\n      // Handle null/undefined\n      if (aValue == null && bValue == null) return 0;\n      if (aValue == null) return sortConfig.direction === \"asc\" ? 1 : -1;\n      if (bValue == null) return sortConfig.direction === \"asc\" ? -1 : 1;\n\n      // Compare values\n      let comparison = 0;\n      if (typeof aValue === \"number\" && typeof bValue === \"number\") {\n        comparison = aValue - bValue;\n      } else {\n        comparison = String(aValue).localeCompare(String(bValue));\n      }\n\n      return sortConfig.direction === \"asc\" ? comparison : -comparison;\n    });\n  }, [filteredData, sortConfig]);\n\n  // Paginate data\n  const paginatedData = useMemo(() => {\n    if (!paginationEnabled) return sortedData;\n\n    const startIndex = (currentPage - 1) * pageSize;\n    return sortedData.slice(startIndex, startIndex + pageSize);\n  }, [sortedData, currentPage, pageSize, paginationEnabled]);\n\n  const totalPages = Math.ceil(sortedData.length / pageSize);\n\n  // Reset to page 1 when filters change\n  const handleGlobalFilterChange = (value: string) => {\n    setGlobalFilter(value);\n    setCurrentPage(1);\n  };\n\n  // Handle sort\n  const handleSort = (key: string) => {\n    if (!sortingEnabled) return;\n\n    setSortConfig((prev) => {\n      if (prev?.key !== key) return { key, direction: \"asc\" };\n      if (prev.direction === \"asc\") return { key, direction: \"desc\" };\n      return null;\n    });\n  };\n\n  // Get sort indicator\n  const getSortIndicator = (key: string) => {\n    if (sortConfig?.key !== key) return null;\n    return sortConfig.direction === \"asc\" ? \" ↑\" : \" ↓\";\n  };\n\n  // Empty state\n  if (data.length === 0) {\n    return (\n      <div\n        className={`@container rounded-${borderRadius} bg-${backgroundColor} p-${padding} ${className}`}\n        style={{ backgroundImage }}\n        {...props}\n      >\n        <div className=\"text-muted-foreground flex min-h-[200px] flex-col items-center justify-center gap-2\">\n          <div className=\"text-4xl\">📋</div>\n          <p className=\"text-sm\">No data available</p>\n          <p className=\"text-muted-foreground/70 text-xs\">\n            Connect a data source to display table data\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden ${paginationEnabled ? \"\" : \"overflow-y-auto\"} rounded-${borderRadius} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div\n        className={`flex items-center justify-between p-${padding} bg-${backgroundColor}`}\n      >\n        {/* Title */}\n        {titleEnabled && titleText && (\n          <h2\n            className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor}`}\n          >\n            {titleText}\n          </h2>\n        )}\n\n        {/* Global Search */}\n        {filterEnabled && (\n          <Input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              handleGlobalFilterChange(e.target.value)\n            }\n            className={`w-full rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor}-400 ring-offset-muted px-3 py-2 text-sm placeholder:text-${headerTextColor}-900 focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none md:w-64`}\n          />\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr\n              className={`bg-${headerBackgroundColor}-400 border-${headerBackgroundColor}-600 border-y`}\n            >\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  className={`px-4 py-3 text-left text-sm font-semibold text-${headerTextColor} ${col.sortable && sortingEnabled ? \"cursor-pointer select-none hover:opacity-80\" : \"\"}`}\n                  {...(col.sortable && sortingEnabled\n                    ? {\n                        role: \"button\" as const,\n                        tabIndex: 0,\n                        onClick: () => handleSort(col.key),\n                        onKeyDown: (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleSort(col.key);\n                          }\n                        },\n                      }\n                    : {})}\n                >\n                  <div className=\"flex flex-col gap-1\">\n                    <span>\n                      {col.label}\n                      {col.sortable &&\n                        sortingEnabled &&\n                        getSortIndicator(col.key)}\n                    </span>\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paginatedData.map((item, index) => (\n              <tr\n                key={item.id ?? index}\n                className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n              >\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-3 text-sm\">\n                    {col.render\n                      ? col.render(item[col.key], item)\n                      : String(item[col.key] ?? \"-\")}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            {/* Empty rows to fill the last page for consistent pagination position */}\n            {paginationEnabled &&\n              paginatedData.length < pageSize &&\n              paginatedData.length > 0 &&\n              Array.from({ length: pageSize - paginatedData.length }).map(\n                (_, index) => (\n                  <tr\n                    key={`empty-${index}`}\n                    className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className=\"px-4 py-3 text-sm\">\n                        &nbsp;\n                      </td>\n                    ))}\n                  </tr>\n                ),\n              )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* No results message */}\n      {paginatedData.length === 0 && data.length > 0 && (\n        <div className={`py-8 text-center bg-${backgroundColor}`}>\n          <p className=\"text-sm\">No results found</p>\n          <p className=\"text-xs\">Try adjusting your search</p>\n        </div>\n      )}\n\n      {/* Pagination */}\n      {paginationEnabled && totalPages > 1 && (\n        <div\n          className={`flex flex-col items-center justify-between gap-2 border-t border-${backgroundColor}-600 p-${padding} @md:flex-row bg-${backgroundColor}-400 text-${textColor}`}\n        >\n          <p className=\"text-sm\">\n            Showing {(currentPage - 1) * pageSize + 1}-\n            {Math.min(currentPage * pageSize, sortedData.length)} of{\" \"}\n            {sortedData.length} results\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n              disabled={currentPage === 1}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Previous\n            </button>\n            <span className=\"text-sm\">\n              Page {currentPage} of {totalPages}\n            </span>\n            <button\n              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n              disabled={currentPage === totalPages}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const tableWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TableWidget\",\n  displayName: \"Table Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\"],\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 table\",\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 table\",\n      defaultValue: \"Products\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\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 table container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"alternatingColorEnabled\",\n      label: \"Enable Alternating Colors\",\n      type: \"boolean\",\n      description: \"Enable alternating colors for table rows\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"headerBackgroundColor\",\n      label: \"Header Background\",\n      description: \"Background color for the table header\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for table content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"headerTextColor\",\n      label: \"Header Text Color\",\n      description: \"Text color for the table header\",\n      defaultValue: \"foreground\",\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    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the table 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 table container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Behavior Tab - Features Group\n    {\n      key: \"filterEnabled\",\n      label: \"Enable Filters\",\n      type: \"boolean\",\n      description: \"Show global search and column filters\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"sortingEnabled\",\n      label: \"Enable Sorting\",\n      type: \"boolean\",\n      description: \"Allow sorting by clicking column headers\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"paginationEnabled\",\n      label: \"Enable Pagination\",\n      type: \"boolean\",\n      description: \"Split data into pages\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"maxRowsPerPage\",\n      label: \"Max Rows Per Page\",\n      type: \"number\",\n      description: \"Maximum number of rows to display per page\",\n      min: 1,\n      max: 50,\n      step: 1,\n      defaultValue: 5,\n      tab: \"behavior\",\n      group: \"Features\",\n      requiresKeyToBeTrue: \"paginationEnabled\",\n    },\n\n    // Data Tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure data source for the table\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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F;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,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,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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CACF"}
+{"version":3,"file":"TableWidget-Cc4kQaOE.mjs","names":[],"sources":["../src/widgets/TableWidget.tsx"],"sourcesContent":["import { useState, useMemo, 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 { Input } from \"@fluid-app/ui-primitives\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport { type ShareableItem } from \"@fluid-app/rep-core/types\";\n\n// Column definition for the table\ntype ColumnDef = {\n  key: string;\n  label: string;\n  sortable: boolean;\n  render?: (value: unknown, item: ShareableItem) => React.ReactNode;\n};\n\nconst DEFAULT_DATA: ShareableItem[] = [];\n\n// ---------------------------------------------------------------------------\n// Column cell renderers\n// ---------------------------------------------------------------------------\n\nfunction ImageCellRenderer(_value: unknown, item: ShareableItem) {\n  return (\n    <div className=\"h-10 w-10 rounded object-cover\">\n      <MediaRenderer {...getMediaPropsFromShareable(item)} />\n    </div>\n  );\n}\n\nfunction PriceCellRenderer(_value: unknown, item: ShareableItem) {\n  return ((item.display_price as string) ?? item.price) || \"-\";\n}\n\nfunction StatusCellRenderer(value: unknown) {\n  const status = String(value || \"unknown\").toLowerCase();\n  const statusStyles: Record<string, string> = {\n    active: \"bg-primary text-primary-foreground\",\n    inactive: \"bg-secondary text-secondary-foreground\",\n    unknown: \"bg-muted text-muted-foreground\",\n  };\n  return (\n    <span\n      className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${statusStyles[status] || \"bg-muted text-foreground\"}`}\n    >\n      {String(value || \"Unknown\")}\n    </span>\n  );\n}\n\n// Default columns for product data\nconst defaultColumns: ColumnDef[] = [\n  {\n    key: \"imageUrl\",\n    label: \"Image\",\n    sortable: false,\n    render: ImageCellRenderer,\n  },\n  {\n    key: \"title\",\n    label: \"Title\",\n    sortable: true,\n  },\n  {\n    key: \"price\",\n    label: \"Price\",\n    sortable: true,\n    render: PriceCellRenderer,\n  },\n  {\n    key: \"status\",\n    label: \"Status\",\n    sortable: true,\n    render: StatusCellRenderer,\n  },\n];\n\ntype TableWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  alternatingColorEnabled?: boolean;\n  textColor?: ColorOptions;\n  headerBackgroundColor?: ColorOptions;\n  headerTextColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  data?: ShareableItem[];\n\n  // Features\n  filterEnabled?: boolean;\n  sortingEnabled?: boolean;\n  paginationEnabled?: boolean;\n  maxRowsPerPage?: number;\n};\n\nexport function TableWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Products\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  alternatingColorEnabled = true,\n  textColor = \"foreground\",\n  headerBackgroundColor = \"muted\",\n  headerTextColor = \"foreground\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Data\n  data = DEFAULT_DATA,\n\n  // Feature defaults\n  filterEnabled = true,\n  sortingEnabled = true,\n  paginationEnabled = true,\n  maxRowsPerPage = 5,\n\n  className,\n  ...props\n}: TableWidgetProps): 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 pageSize = maxRowsPerPage;\n\n  // State for filtering, sorting, and pagination\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n  const [sortConfig, setSortConfig] = useState<{\n    key: string;\n    direction: \"asc\" | \"desc\";\n  } | null>(null);\n  const [currentPage, setCurrentPage] = useState(1);\n\n  const columns = defaultColumns;\n\n  // Filter data\n  const filteredData = useMemo(() => {\n    let result = [...data];\n\n    if (globalFilter) {\n      const lowerFilter = globalFilter.toLowerCase();\n      result = result.filter((item) =>\n        columns.some((col) => {\n          const value = item[col.key];\n          return String(value ?? \"\")\n            .toLowerCase()\n            .includes(lowerFilter);\n        }),\n      );\n    }\n\n    return result;\n  }, [data, globalFilter, columns]);\n\n  // Sort data\n  const sortedData = useMemo(() => {\n    if (!sortConfig) return filteredData;\n\n    return [...filteredData].sort((a, b) => {\n      const aValue = a[sortConfig.key];\n      const bValue = b[sortConfig.key];\n\n      // Handle null/undefined\n      if (aValue == null && bValue == null) return 0;\n      if (aValue == null) return sortConfig.direction === \"asc\" ? 1 : -1;\n      if (bValue == null) return sortConfig.direction === \"asc\" ? -1 : 1;\n\n      // Compare values\n      let comparison = 0;\n      if (typeof aValue === \"number\" && typeof bValue === \"number\") {\n        comparison = aValue - bValue;\n      } else {\n        comparison = String(aValue).localeCompare(String(bValue));\n      }\n\n      return sortConfig.direction === \"asc\" ? comparison : -comparison;\n    });\n  }, [filteredData, sortConfig]);\n\n  // Paginate data\n  const paginatedData = useMemo(() => {\n    if (!paginationEnabled) return sortedData;\n\n    const startIndex = (currentPage - 1) * pageSize;\n    return sortedData.slice(startIndex, startIndex + pageSize);\n  }, [sortedData, currentPage, pageSize, paginationEnabled]);\n\n  const totalPages = Math.ceil(sortedData.length / pageSize);\n\n  // Reset to page 1 when filters change\n  const handleGlobalFilterChange = (value: string) => {\n    setGlobalFilter(value);\n    setCurrentPage(1);\n  };\n\n  // Handle sort\n  const handleSort = (key: string) => {\n    if (!sortingEnabled) return;\n\n    setSortConfig((prev) => {\n      if (prev?.key !== key) return { key, direction: \"asc\" };\n      if (prev.direction === \"asc\") return { key, direction: \"desc\" };\n      return null;\n    });\n  };\n\n  // Get sort indicator\n  const getSortIndicator = (key: string) => {\n    if (sortConfig?.key !== key) return null;\n    return sortConfig.direction === \"asc\" ? \" ↑\" : \" ↓\";\n  };\n\n  // Empty state\n  if (data.length === 0) {\n    return (\n      <div\n        className={`@container rounded-${borderRadius} bg-${backgroundColor} p-${padding} ${className}`}\n        style={{ backgroundImage }}\n        {...props}\n      >\n        <div className=\"text-muted-foreground flex min-h-[200px] flex-col items-center justify-center gap-2\">\n          <div className=\"text-4xl\">📋</div>\n          <p className=\"text-sm\">No data available</p>\n          <p className=\"text-muted-foreground/70 text-xs\">\n            Connect a data source to display table data\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden ${paginationEnabled ? \"\" : \"overflow-y-auto\"} rounded-${borderRadius} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div\n        className={`flex items-center justify-between p-${padding} bg-${backgroundColor}`}\n      >\n        {/* Title */}\n        {titleEnabled && titleText && (\n          <h2\n            className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor}`}\n          >\n            {titleText}\n          </h2>\n        )}\n\n        {/* Global Search */}\n        {filterEnabled && (\n          <Input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              handleGlobalFilterChange(e.target.value)\n            }\n            className={`w-full rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor}-400 ring-offset-muted px-3 py-2 text-sm placeholder:text-${headerTextColor}-900 focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none md:w-64`}\n          />\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr\n              className={`bg-${headerBackgroundColor}-400 border-${headerBackgroundColor}-600 border-y`}\n            >\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  className={`px-4 py-3 text-left text-sm font-semibold text-${headerTextColor} ${col.sortable && sortingEnabled ? \"cursor-pointer select-none hover:opacity-80\" : \"\"}`}\n                  {...(col.sortable && sortingEnabled\n                    ? {\n                        role: \"button\" as const,\n                        tabIndex: 0,\n                        onClick: () => handleSort(col.key),\n                        onKeyDown: (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleSort(col.key);\n                          }\n                        },\n                      }\n                    : {})}\n                >\n                  <div className=\"flex flex-col gap-1\">\n                    <span>\n                      {col.label}\n                      {col.sortable &&\n                        sortingEnabled &&\n                        getSortIndicator(col.key)}\n                    </span>\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paginatedData.map((item, index) => (\n              <tr\n                key={item.id ?? index}\n                className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n              >\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-3 text-sm\">\n                    {col.render\n                      ? col.render(item[col.key], item)\n                      : String(item[col.key] ?? \"-\")}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            {/* Empty rows to fill the last page for consistent pagination position */}\n            {paginationEnabled &&\n              paginatedData.length < pageSize &&\n              paginatedData.length > 0 &&\n              Array.from({ length: pageSize - paginatedData.length }).map(\n                (_, index) => (\n                  <tr\n                    key={`empty-${index}`}\n                    className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className=\"px-4 py-3 text-sm\">\n                        &nbsp;\n                      </td>\n                    ))}\n                  </tr>\n                ),\n              )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* No results message */}\n      {paginatedData.length === 0 && data.length > 0 && (\n        <div className={`py-8 text-center bg-${backgroundColor}`}>\n          <p className=\"text-sm\">No results found</p>\n          <p className=\"text-xs\">Try adjusting your search</p>\n        </div>\n      )}\n\n      {/* Pagination */}\n      {paginationEnabled && totalPages > 1 && (\n        <div\n          className={`flex flex-col items-center justify-between gap-2 border-t border-${backgroundColor}-600 p-${padding} @md:flex-row bg-${backgroundColor}-400 text-${textColor}`}\n        >\n          <p className=\"text-sm\">\n            Showing {(currentPage - 1) * pageSize + 1}-\n            {Math.min(currentPage * pageSize, sortedData.length)} of{\" \"}\n            {sortedData.length} results\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n              disabled={currentPage === 1}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Previous\n            </button>\n            <span className=\"text-sm\">\n              Page {currentPage} of {totalPages}\n            </span>\n            <button\n              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n              disabled={currentPage === totalPages}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const tableWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TableWidget\",\n  displayName: \"Table Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\"],\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 table\",\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 table\",\n      defaultValue: \"Products\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\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 table container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"alternatingColorEnabled\",\n      label: \"Enable Alternating Colors\",\n      type: \"boolean\",\n      description: \"Enable alternating colors for table rows\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"headerBackgroundColor\",\n      label: \"Header Background\",\n      description: \"Background color for the table header\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for table content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"headerTextColor\",\n      label: \"Header Text Color\",\n      description: \"Text color for the table header\",\n      defaultValue: \"foreground\",\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    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the table 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 table container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Behavior Tab - Features Group\n    {\n      key: \"filterEnabled\",\n      label: \"Enable Filters\",\n      type: \"boolean\",\n      description: \"Show global search and column filters\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"sortingEnabled\",\n      label: \"Enable Sorting\",\n      type: \"boolean\",\n      description: \"Allow sorting by clicking column headers\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"paginationEnabled\",\n      label: \"Enable Pagination\",\n      type: \"boolean\",\n      description: \"Split data into pages\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"maxRowsPerPage\",\n      label: \"Max Rows Per Page\",\n      type: \"number\",\n      description: \"Maximum number of rows to display per page\",\n      min: 1,\n      max: 50,\n      step: 1,\n      defaultValue: 5,\n      tab: \"behavior\",\n      group: \"Features\",\n      requiresKeyToBeTrue: \"paginationEnabled\",\n    },\n\n    // Data Tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure data source for the table\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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F;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,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,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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/{TableWidget-BeG92tkU.cjs → TableWidget-GSCLhWDu.cjs}

@@ -452,4 +452,4 @@ Object.defineProperty(exports, "tableWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=TableWidget-BeG92tkU.cjs.map
+//# sourceMappingURL=TableWidget-GSCLhWDu.cjs.map

package/dist/TableWidget-GSCLhWDu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWidget-GSCLhWDu.cjs","names":["MediaRenderer","getMediaPropsFromShareable","Input"],"sources":["../src/widgets/TableWidget.tsx"],"sourcesContent":["import { useState, useMemo, 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 { Input } from \"@fluid-app/ui-primitives\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport { type ShareableItem } from \"@fluid-app/rep-core/types\";\n\n// Column definition for the table\ntype ColumnDef = {\n  key: string;\n  label: string;\n  sortable: boolean;\n  render?: (value: unknown, item: ShareableItem) => React.ReactNode;\n};\n\nconst DEFAULT_DATA: ShareableItem[] = [];\n\n// ---------------------------------------------------------------------------\n// Column cell renderers\n// ---------------------------------------------------------------------------\n\nfunction ImageCellRenderer(_value: unknown, item: ShareableItem) {\n  return (\n    <div className=\"h-10 w-10 rounded object-cover\">\n      <MediaRenderer {...getMediaPropsFromShareable(item)} />\n    </div>\n  );\n}\n\nfunction PriceCellRenderer(_value: unknown, item: ShareableItem) {\n  return ((item.display_price as string) ?? item.price) || \"-\";\n}\n\nfunction StatusCellRenderer(value: unknown) {\n  const status = String(value || \"unknown\").toLowerCase();\n  const statusStyles: Record<string, string> = {\n    active: \"bg-primary text-primary-foreground\",\n    inactive: \"bg-secondary text-secondary-foreground\",\n    unknown: \"bg-muted text-muted-foreground\",\n  };\n  return (\n    <span\n      className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${statusStyles[status] || \"bg-muted text-foreground\"}`}\n    >\n      {String(value || \"Unknown\")}\n    </span>\n  );\n}\n\n// Default columns for product data\nconst defaultColumns: ColumnDef[] = [\n  {\n    key: \"imageUrl\",\n    label: \"Image\",\n    sortable: false,\n    render: ImageCellRenderer,\n  },\n  {\n    key: \"title\",\n    label: \"Title\",\n    sortable: true,\n  },\n  {\n    key: \"price\",\n    label: \"Price\",\n    sortable: true,\n    render: PriceCellRenderer,\n  },\n  {\n    key: \"status\",\n    label: \"Status\",\n    sortable: true,\n    render: StatusCellRenderer,\n  },\n];\n\ntype TableWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  alternatingColorEnabled?: boolean;\n  textColor?: ColorOptions;\n  headerBackgroundColor?: ColorOptions;\n  headerTextColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  data?: ShareableItem[];\n\n  // Features\n  filterEnabled?: boolean;\n  sortingEnabled?: boolean;\n  paginationEnabled?: boolean;\n  maxRowsPerPage?: number;\n};\n\nexport function TableWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Products\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  alternatingColorEnabled = true,\n  textColor = \"foreground\",\n  headerBackgroundColor = \"muted\",\n  headerTextColor = \"foreground\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Data\n  data = DEFAULT_DATA,\n\n  // Feature defaults\n  filterEnabled = true,\n  sortingEnabled = true,\n  paginationEnabled = true,\n  maxRowsPerPage = 5,\n\n  className,\n  ...props\n}: TableWidgetProps): 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 pageSize = maxRowsPerPage;\n\n  // State for filtering, sorting, and pagination\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n  const [sortConfig, setSortConfig] = useState<{\n    key: string;\n    direction: \"asc\" | \"desc\";\n  } | null>(null);\n  const [currentPage, setCurrentPage] = useState(1);\n\n  const columns = defaultColumns;\n\n  // Filter data\n  const filteredData = useMemo(() => {\n    let result = [...data];\n\n    if (globalFilter) {\n      const lowerFilter = globalFilter.toLowerCase();\n      result = result.filter((item) =>\n        columns.some((col) => {\n          const value = item[col.key];\n          return String(value ?? \"\")\n            .toLowerCase()\n            .includes(lowerFilter);\n        }),\n      );\n    }\n\n    return result;\n  }, [data, globalFilter, columns]);\n\n  // Sort data\n  const sortedData = useMemo(() => {\n    if (!sortConfig) return filteredData;\n\n    return [...filteredData].sort((a, b) => {\n      const aValue = a[sortConfig.key];\n      const bValue = b[sortConfig.key];\n\n      // Handle null/undefined\n      if (aValue == null && bValue == null) return 0;\n      if (aValue == null) return sortConfig.direction === \"asc\" ? 1 : -1;\n      if (bValue == null) return sortConfig.direction === \"asc\" ? -1 : 1;\n\n      // Compare values\n      let comparison = 0;\n      if (typeof aValue === \"number\" && typeof bValue === \"number\") {\n        comparison = aValue - bValue;\n      } else {\n        comparison = String(aValue).localeCompare(String(bValue));\n      }\n\n      return sortConfig.direction === \"asc\" ? comparison : -comparison;\n    });\n  }, [filteredData, sortConfig]);\n\n  // Paginate data\n  const paginatedData = useMemo(() => {\n    if (!paginationEnabled) return sortedData;\n\n    const startIndex = (currentPage - 1) * pageSize;\n    return sortedData.slice(startIndex, startIndex + pageSize);\n  }, [sortedData, currentPage, pageSize, paginationEnabled]);\n\n  const totalPages = Math.ceil(sortedData.length / pageSize);\n\n  // Reset to page 1 when filters change\n  const handleGlobalFilterChange = (value: string) => {\n    setGlobalFilter(value);\n    setCurrentPage(1);\n  };\n\n  // Handle sort\n  const handleSort = (key: string) => {\n    if (!sortingEnabled) return;\n\n    setSortConfig((prev) => {\n      if (prev?.key !== key) return { key, direction: \"asc\" };\n      if (prev.direction === \"asc\") return { key, direction: \"desc\" };\n      return null;\n    });\n  };\n\n  // Get sort indicator\n  const getSortIndicator = (key: string) => {\n    if (sortConfig?.key !== key) return null;\n    return sortConfig.direction === \"asc\" ? \" ↑\" : \" ↓\";\n  };\n\n  // Empty state\n  if (data.length === 0) {\n    return (\n      <div\n        className={`@container rounded-${borderRadius} bg-${backgroundColor} p-${padding} ${className}`}\n        style={{ backgroundImage }}\n        {...props}\n      >\n        <div className=\"text-muted-foreground flex min-h-[200px] flex-col items-center justify-center gap-2\">\n          <div className=\"text-4xl\">📋</div>\n          <p className=\"text-sm\">No data available</p>\n          <p className=\"text-muted-foreground/70 text-xs\">\n            Connect a data source to display table data\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden ${paginationEnabled ? \"\" : \"overflow-y-auto\"} rounded-${borderRadius} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div\n        className={`flex items-center justify-between p-${padding} bg-${backgroundColor}`}\n      >\n        {/* Title */}\n        {titleEnabled && titleText && (\n          <h2\n            className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor}`}\n          >\n            {titleText}\n          </h2>\n        )}\n\n        {/* Global Search */}\n        {filterEnabled && (\n          <Input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              handleGlobalFilterChange(e.target.value)\n            }\n            className={`w-full rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor}-400 ring-offset-muted px-3 py-2 text-sm placeholder:text-${headerTextColor}-900 focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none md:w-64`}\n          />\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr\n              className={`bg-${headerBackgroundColor}-400 border-${headerBackgroundColor}-600 border-y`}\n            >\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  className={`px-4 py-3 text-left text-sm font-semibold text-${headerTextColor} ${col.sortable && sortingEnabled ? \"cursor-pointer select-none hover:opacity-80\" : \"\"}`}\n                  {...(col.sortable && sortingEnabled\n                    ? {\n                        role: \"button\" as const,\n                        tabIndex: 0,\n                        onClick: () => handleSort(col.key),\n                        onKeyDown: (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleSort(col.key);\n                          }\n                        },\n                      }\n                    : {})}\n                >\n                  <div className=\"flex flex-col gap-1\">\n                    <span>\n                      {col.label}\n                      {col.sortable &&\n                        sortingEnabled &&\n                        getSortIndicator(col.key)}\n                    </span>\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paginatedData.map((item, index) => (\n              <tr\n                key={item.id ?? index}\n                className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n              >\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-3 text-sm\">\n                    {col.render\n                      ? col.render(item[col.key], item)\n                      : String(item[col.key] ?? \"-\")}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            {/* Empty rows to fill the last page for consistent pagination position */}\n            {paginationEnabled &&\n              paginatedData.length < pageSize &&\n              paginatedData.length > 0 &&\n              Array.from({ length: pageSize - paginatedData.length }).map(\n                (_, index) => (\n                  <tr\n                    key={`empty-${index}`}\n                    className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className=\"px-4 py-3 text-sm\">\n                        &nbsp;\n                      </td>\n                    ))}\n                  </tr>\n                ),\n              )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* No results message */}\n      {paginatedData.length === 0 && data.length > 0 && (\n        <div className={`py-8 text-center bg-${backgroundColor}`}>\n          <p className=\"text-sm\">No results found</p>\n          <p className=\"text-xs\">Try adjusting your search</p>\n        </div>\n      )}\n\n      {/* Pagination */}\n      {paginationEnabled && totalPages > 1 && (\n        <div\n          className={`flex flex-col items-center justify-between gap-2 border-t border-${backgroundColor}-600 p-${padding} @md:flex-row bg-${backgroundColor}-400 text-${textColor}`}\n        >\n          <p className=\"text-sm\">\n            Showing {(currentPage - 1) * pageSize + 1}-\n            {Math.min(currentPage * pageSize, sortedData.length)} of{\" \"}\n            {sortedData.length} results\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n              disabled={currentPage === 1}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Previous\n            </button>\n            <span className=\"text-sm\">\n              Page {currentPage} of {totalPages}\n            </span>\n            <button\n              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n              disabled={currentPage === totalPages}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const tableWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TableWidget\",\n  displayName: \"Table Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\"],\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 table\",\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 table\",\n      defaultValue: \"Products\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\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 table container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"alternatingColorEnabled\",\n      label: \"Enable Alternating Colors\",\n      type: \"boolean\",\n      description: \"Enable alternating colors for table rows\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"headerBackgroundColor\",\n      label: \"Header Background\",\n      description: \"Background color for the table header\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for table content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"headerTextColor\",\n      label: \"Header Text Color\",\n      description: \"Text color for the table header\",\n      defaultValue: \"foreground\",\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    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the table 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 table container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Behavior Tab - Features Group\n    {\n      key: \"filterEnabled\",\n      label: \"Enable Filters\",\n      type: \"boolean\",\n      description: \"Show global search and column filters\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"sortingEnabled\",\n      label: \"Enable Sorting\",\n      type: \"boolean\",\n      description: \"Allow sorting by clicking column headers\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"paginationEnabled\",\n      label: \"Enable Pagination\",\n      type: \"boolean\",\n      description: \"Split data into pages\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"maxRowsPerPage\",\n      label: \"Max Rows Per Page\",\n      type: \"number\",\n      description: \"Maximum number of rows to display per page\",\n      min: 1,\n      max: 50,\n      step: 1,\n      defaultValue: 5,\n      tab: \"behavior\",\n      group: \"Features\",\n      requiresKeyToBeTrue: \"paginationEnabled\",\n    },\n\n    // Data Tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure data source for the table\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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AAO;GACP,qBAAqB;GACtB;uDACgB;GACf,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,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;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,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;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;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,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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/TextWidget-CQxOWNZK.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextWidget-CQxOWNZK.mjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype TextWidgetProps = 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  // Styling\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n  titleEnabled = true,\n  title = \"Text Widget\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  description = \"This is a text widget\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n  className,\n  ...props\n}: TextWidgetProps) {\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  return (\n    <div\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {titleEnabled && (\n        <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n          {title}\n        </h2>\n      )}\n      <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n        {description}\n      </p>\n    </div>\n  );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TextWidget\",\n  displayName: \"Text Widget\",\n  tabsConfig: [{ id: \"content\", label: \"Content\" }],\n  dataSourceTargetProps: [\"title\", \"description\"],\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 text\",\n      defaultValue: true,\n      tab: \"content\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The title\",\n      defaultValue: \"Heads up!\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"xl\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"The color of the title\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The text message\",\n      rows: 3,\n      defaultValue:\n        \"You can add components and dependencies to your app using the cli.\",\n      tab: \"content\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the text\",\n      defaultValue: \"md\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"The color of the text\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    // Content Tab - Style Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the text container\",\n      defaultValue: \"background\",\n      tab: \"content\",\n      group: \"Style\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"The padding of the text container\",\n      defaultValue: 4,\n      tab: \"content\",\n      group: \"Style\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      description: \"The border radius of the text container\",\n      label: \"Border Radius\",\n      tab: \"content\",\n      group: \"Style\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;AAkCA,SAAgB,WAAW,EACzB,eAAe,MACf,QAAQ,eACR,gBAAgB,MAChB,aAAa,cACb,cAAc,yBACd,sBAAsB,MACtB,mBAAmB,cACnB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,UAAU,GACV,eAAe,MACf,WACA,GAAG,SACe;CAClB,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AACN,QACE,qBAAC,OAAD;EACE,WAAW,MAAM,gBAAgB,KAAK,QAAQ,WAAW,aAAa,GAAG,aAAa;EACtF,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAKG,gBACC,oBAAC,MAAD;GAAI,WAAW,QAAQ,cAAc,QAAQ,WAAW;aACrD;GACE,CAAA,EAEP,oBAAC,KAAD;GAAG,WAAW,QAAQ,oBAAoB,QAAQ;aAC/C;GACC,CAAA,CACA;;;AAIV,MAAa,2BAAiD;CAC5D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,uBAAuB,CAAC,SAAS,cAAc;CAC/C,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;EACD,iBAAiB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,cAAc;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cACE;GACF,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;EAEF;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,aAAa;GACb,OAAO;GACP,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
+{"version":3,"file":"TextWidget-CQxOWNZK.mjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype TextWidgetProps = 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  // Styling\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n  titleEnabled = true,\n  title = \"Text Widget\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  description = \"This is a text widget\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n  className,\n  ...props\n}: TextWidgetProps): 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  return (\n    <div\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {titleEnabled && (\n        <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n          {title}\n        </h2>\n      )}\n      <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n        {description}\n      </p>\n    </div>\n  );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TextWidget\",\n  displayName: \"Text Widget\",\n  tabsConfig: [{ id: \"content\", label: \"Content\" }],\n  dataSourceTargetProps: [\"title\", \"description\"],\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 text\",\n      defaultValue: true,\n      tab: \"content\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The title\",\n      defaultValue: \"Heads up!\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"xl\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"The color of the title\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The text message\",\n      rows: 3,\n      defaultValue:\n        \"You can add components and dependencies to your app using the cli.\",\n      tab: \"content\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the text\",\n      defaultValue: \"md\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"The color of the text\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    // Content Tab - Style Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the text container\",\n      defaultValue: \"background\",\n      tab: \"content\",\n      group: \"Style\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"The padding of the text container\",\n      defaultValue: 4,\n      tab: \"content\",\n      group: \"Style\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      description: \"The border radius of the text container\",\n      label: \"Border Radius\",\n      tab: \"content\",\n      group: \"Style\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;AAmCA,SAAgB,WAAW,EACzB,eAAe,MACf,QAAQ,eACR,gBAAgB,MAChB,aAAa,cACb,cAAc,yBACd,sBAAsB,MACtB,mBAAmB,cACnB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,UAAU,GACV,eAAe,MACf,WACA,GAAG,SACkC;CACrC,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AACN,QACE,qBAAC,OAAD;EACE,WAAW,MAAM,gBAAgB,KAAK,QAAQ,WAAW,aAAa,GAAG,aAAa;EACtF,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAKG,gBACC,oBAAC,MAAD;GAAI,WAAW,QAAQ,cAAc,QAAQ,WAAW;aACrD;GACE,CAAA,EAEP,oBAAC,KAAD;GAAG,WAAW,QAAQ,oBAAoB,QAAQ;aAC/C;GACC,CAAA,CACA;;;AAIV,MAAa,2BAAiD;CAC5D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,uBAAuB,CAAC,SAAS,cAAc;CAC/C,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;EACD,iBAAiB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,cAAc;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cACE;GACF,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;EAEF;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,aAAa;GACb,OAAO;GACP,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}