@fluid-app/portal-sdk 0.1.26 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/{AccountScreen-DTv1-206.cjs → AccountScreen-Dp6QFyEr.cjs} +2 -2
  2. package/dist/{AccountScreen-DTv1-206.cjs.map → AccountScreen-Dp6QFyEr.cjs.map} +1 -1
  3. package/dist/{AccountScreen-BigIbqV5.mjs → AccountScreen-E4ZBgOUS.mjs} +2 -2
  4. package/dist/{AccountScreen-BigIbqV5.mjs.map → AccountScreen-E4ZBgOUS.mjs.map} +1 -1
  5. package/dist/{AccountScreen-B0p9WJoI.cjs → AccountScreen-Vzz8W4Iq.cjs} +3 -3
  6. package/dist/{FluidProvider-PqLUzyvQ.cjs → FluidProvider-BmkSwcgV.cjs} +3 -3
  7. package/dist/{FluidProvider-PqLUzyvQ.cjs.map → FluidProvider-BmkSwcgV.cjs.map} +1 -1
  8. package/dist/{FluidProvider-Bp1sNJnr.mjs → FluidProvider-x96kqsgN.mjs} +3 -3
  9. package/dist/{FluidProvider-Bp1sNJnr.mjs.map → FluidProvider-x96kqsgN.mjs.map} +1 -1
  10. package/dist/LayoutWidget-Dc_wvaLg.mjs.map +1 -1
  11. package/dist/LayoutWidget-fOBC-EML.cjs.map +1 -1
  12. package/dist/{MessagingScreen-CcxyIep3.cjs → MessagingScreen-C33eDdna.cjs} +3 -3
  13. package/dist/{MessagingScreen-D7xu52lk.mjs → MessagingScreen-DVU3c8fX.mjs} +3 -4
  14. package/dist/{MessagingScreen-7pC6SdRs.mjs → MessagingScreen-II_iNqLk.mjs} +3 -3
  15. package/dist/{MessagingScreen-7pC6SdRs.mjs.map → MessagingScreen-II_iNqLk.mjs.map} +1 -1
  16. package/dist/{MessagingScreen-C-kF4Z5h.cjs → MessagingScreen-sAWF7pjl.cjs} +3 -3
  17. package/dist/{MessagingScreen-C-kF4Z5h.cjs.map → MessagingScreen-sAWF7pjl.cjs.map} +1 -1
  18. package/dist/{ProductsScreen-DwcIB1Tp.mjs → ProductsScreen-BOngRxSO.mjs} +4 -4
  19. package/dist/{ProductsScreen-DwcIB1Tp.mjs.map → ProductsScreen-BOngRxSO.mjs.map} +1 -1
  20. package/dist/{ProductsScreen-7t1oNY_N.cjs → ProductsScreen-CdP_m_Ok.cjs} +4 -4
  21. package/dist/{ProductsScreen-FZS6vPqz.mjs → ProductsScreen-DrrBYFl0.mjs} +4 -6
  22. package/dist/{ProductsScreen-DeXWGZXc.cjs → ProductsScreen-DzD-TPh5.cjs} +4 -4
  23. package/dist/{ProductsScreen-DeXWGZXc.cjs.map → ProductsScreen-DzD-TPh5.cjs.map} +1 -1
  24. package/dist/{ShareablesScreen-D2iE3ytr.mjs → ShareablesScreen-BsqZvRSK.mjs} +4 -6
  25. package/dist/{ShareablesScreen-8gKrJQn3.mjs → ShareablesScreen-CQy39TAK.mjs} +4 -4
  26. package/dist/{ShareablesScreen-8gKrJQn3.mjs.map → ShareablesScreen-CQy39TAK.mjs.map} +1 -1
  27. package/dist/{ShareablesScreen-B-kEPPCb.cjs → ShareablesScreen-DYPJgZ3z.cjs} +4 -4
  28. package/dist/{ShareablesScreen-B-kEPPCb.cjs.map → ShareablesScreen-DYPJgZ3z.cjs.map} +1 -1
  29. package/dist/{ShareablesScreen-Cx87emjz.cjs → ShareablesScreen-jHqLmOC6.cjs} +4 -4
  30. package/dist/{ShopScreen-Ds4MVzZT.cjs → ShopScreen--pUsiUNt.cjs} +3 -3
  31. package/dist/{ShopScreen-BMCb4k-O.mjs → ShopScreen-BKBzgkr7.mjs} +3 -3
  32. package/dist/{ShopScreen-BMCb4k-O.mjs.map → ShopScreen-BKBzgkr7.mjs.map} +1 -1
  33. package/dist/{ShopScreen-BstU0BQe.cjs → ShopScreen-BPCwix1m.cjs} +3 -3
  34. package/dist/{ShopScreen-BstU0BQe.cjs.map → ShopScreen-BPCwix1m.cjs.map} +1 -1
  35. package/dist/{TableWidget-D-r0EQ_2.cjs → TableWidget-2ttj9H5g.cjs} +10 -7
  36. package/dist/TableWidget-2ttj9H5g.cjs.map +1 -0
  37. package/dist/{TableWidget-D_6Qi3m8.mjs → TableWidget-BbjQhI2A.mjs} +10 -7
  38. package/dist/TableWidget-BbjQhI2A.mjs.map +1 -0
  39. package/dist/{TableWidget-1Bp4ZHK8.cjs → TableWidget-eVjxq7Lv.cjs} +1 -1
  40. package/dist/index.cjs +28 -21
  41. package/dist/index.cjs.map +1 -1
  42. package/dist/index.d.cts +2 -0
  43. package/dist/index.d.cts.map +1 -1
  44. package/dist/index.d.mts +2 -0
  45. package/dist/index.d.mts.map +1 -1
  46. package/dist/index.mjs +28 -21
  47. package/dist/index.mjs.map +1 -1
  48. package/dist/{products-Bu0IiW0A.mjs → products-BAFSvGSa.mjs} +2 -2
  49. package/dist/{products-Bu0IiW0A.mjs.map → products-BAFSvGSa.mjs.map} +1 -1
  50. package/dist/{products-CzuNSVSG.cjs → products-CH5kIItT.cjs} +2 -2
  51. package/dist/{products-CzuNSVSG.cjs.map → products-CH5kIItT.cjs.map} +1 -1
  52. package/dist/registries-4OQmN6DO.cjs.map +1 -1
  53. package/dist/registries-Qk8P123O.mjs.map +1 -1
  54. package/dist/{src-BFKgg3tf.mjs → src-9pW9wS5O.mjs} +2 -2
  55. package/dist/{src-BFKgg3tf.mjs.map → src-9pW9wS5O.mjs.map} +1 -1
  56. package/dist/{src-MZ0kePDW.cjs → src-DMjlIMO9.cjs} +2 -2
  57. package/dist/{src-MZ0kePDW.cjs.map → src-DMjlIMO9.cjs.map} +1 -1
  58. package/dist/{use-fluid-api-CTRIRz1H.cjs → use-fluid-api-DvJuEWRf.cjs} +2 -2
  59. package/dist/{use-fluid-api-CTRIRz1H.cjs.map → use-fluid-api-DvJuEWRf.cjs.map} +1 -1
  60. package/dist/{use-fluid-api-dCyPDaGZ.mjs → use-fluid-api-Zq9sZ5vk.mjs} +2 -2
  61. package/dist/{use-fluid-api-dCyPDaGZ.mjs.map → use-fluid-api-Zq9sZ5vk.mjs.map} +1 -1
  62. package/package.json +11 -11
  63. package/dist/TableWidget-D-r0EQ_2.cjs.map +0 -1
  64. package/dist/TableWidget-D_6Qi3m8.mjs.map +0 -1
@@ -59,12 +59,15 @@ function TableWidget({ titleEnabled = true, titleText = "Products", titleFontSiz
59
59
  const isImageBackground = background.type === "image";
60
60
  const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && isImageBackground ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
61
61
  const pageSize = maxRowsPerPage;
62
- const innerBg = isImageBackground ? "bg-transparent" : `bg-${backgroundColor}`;
63
- const innerBgAlt = isImageBackground ? "bg-black/5" : `bg-${backgroundColor}-400`;
64
- const innerBorder = isImageBackground ? "border-white/20" : `border-${backgroundColor}-600`;
65
- const headerBg = isImageBackground ? "bg-black/10" : `bg-${headerBackgroundColor}-400`;
66
- const headerBorder = isImageBackground ? "border-white/20" : `border-${headerBackgroundColor}-600`;
67
- const paginationBg = isImageBackground ? "bg-black/10" : `bg-${backgroundColor}-400`;
62
+ const isTransparentBg = backgroundColor === "transparent";
63
+ const useTransparentInner = isImageBackground || isTransparentBg;
64
+ const innerBg = useTransparentInner ? "bg-transparent" : `bg-${backgroundColor}`;
65
+ const innerBgAlt = useTransparentInner ? "bg-black/5" : `bg-${backgroundColor}-400`;
66
+ const transparentBorder = isTransparentBg ? "border-black/20" : "border-white/20";
67
+ const innerBorder = useTransparentInner ? transparentBorder : `border-${backgroundColor}-600`;
68
+ const headerBg = useTransparentInner ? "bg-black/10" : `bg-${headerBackgroundColor}-400`;
69
+ const headerBorder = useTransparentInner ? transparentBorder : `border-${headerBackgroundColor}-600`;
70
+ const paginationBg = useTransparentInner ? "bg-black/10" : `bg-${backgroundColor}-400`;
68
71
  const [globalFilter, setGlobalFilter] = (0, react.useState)("");
69
72
  const [sortConfig, setSortConfig] = (0, react.useState)(null);
70
73
  const [currentPage, setCurrentPage] = (0, react.useState)(1);
@@ -460,4 +463,4 @@ Object.defineProperty(exports, "tableWidgetPropertySchema", {
460
463
  }
461
464
  });
462
465
 
463
- //# sourceMappingURL=TableWidget-D-r0EQ_2.cjs.map
466
+ //# sourceMappingURL=TableWidget-2ttj9H5g.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableWidget-2ttj9H5g.cjs","names":["MediaRenderer","getMediaPropsFromShareable","useWidgetInteraction","Input","getFontSizeField","getColorField","getPaddingField","getBorderRadiusField"],"sources":["../../widgets/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/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-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/portal-core/types\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\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 isImageBackground = background.type === \"image\";\n const backgroundImage =\n (background.resource?.image_url || background.resource?.imageUrl) &&\n isImageBackground\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n const pageSize = maxRowsPerPage;\n\n // When using an image or transparent background, inner elements should be\n // transparent so the image/page shows through. Otherwise use the configured colors.\n const isTransparentBg = backgroundColor === \"transparent\";\n const useTransparentInner = isImageBackground || isTransparentBg;\n const innerBg = useTransparentInner\n ? \"bg-transparent\"\n : `bg-${backgroundColor}`;\n const innerBgAlt = useTransparentInner\n ? \"bg-black/5\"\n : `bg-${backgroundColor}-400`;\n const transparentBorder = isTransparentBg\n ? \"border-black/20\"\n : \"border-white/20\";\n const innerBorder = useTransparentInner\n ? transparentBorder\n : `border-${backgroundColor}-600`;\n const headerBg = useTransparentInner\n ? \"bg-black/10\"\n : `bg-${headerBackgroundColor}-400`;\n const headerBorder = useTransparentInner\n ? transparentBorder\n : `border-${headerBackgroundColor}-600`;\n const paginationBg = useTransparentInner\n ? \"bg-black/10\"\n : `bg-${backgroundColor}-400`;\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 const { onItemClick } = useWidgetInteraction();\n\n // Empty state\n if (data.length === 0) {\n return (\n <div\n className={`@container rounded-${borderRadius} bg-${backgroundColor} bg-cover bg-center 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} bg-${backgroundColor} bg-cover bg-center text-${textColor} ${className}`}\n style={{ backgroundImage }}\n {...props}\n >\n <div\n className={`flex items-center justify-between p-${padding} ${innerBg} space-x-2`}\n >\n {/* Title */}\n {titleEnabled && titleText && (\n <h2\n className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor} min-w-0 truncate`}\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 ${headerBorder} ${headerBg} 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 className={`${headerBg} ${headerBorder} border-y`}>\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 ${innerBorder} last:border-none ${innerBg} ${alternatingColorEnabled ? `even:${innerBgAlt}` : \"\"} ${onItemClick ? \"cursor-pointer hover:opacity-80\" : \"\"}`}\n {...(onItemClick\n ? {\n tabIndex: 0,\n onClick: () => onItemClick(item),\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onItemClick(item);\n }\n },\n }\n : {})}\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 ${innerBorder} last:border-none ${innerBg} ${alternatingColorEnabled ? `even:${innerBgAlt}` : \"\"}`}\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 ${innerBg}`}>\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 ${innerBorder} p-${padding} @md:flex-row ${paginationBg} 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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K;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACDC,mBAAAA,gBAAgB;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACFC,mBAAAA,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"}
@@ -63,12 +63,15 @@ function TableWidget({ titleEnabled = true, titleText = "Products", titleFontSiz
63
63
  const isImageBackground = background.type === "image";
64
64
  const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && isImageBackground ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
65
65
  const pageSize = maxRowsPerPage;
66
- const innerBg = isImageBackground ? "bg-transparent" : `bg-${backgroundColor}`;
67
- const innerBgAlt = isImageBackground ? "bg-black/5" : `bg-${backgroundColor}-400`;
68
- const innerBorder = isImageBackground ? "border-white/20" : `border-${backgroundColor}-600`;
69
- const headerBg = isImageBackground ? "bg-black/10" : `bg-${headerBackgroundColor}-400`;
70
- const headerBorder = isImageBackground ? "border-white/20" : `border-${headerBackgroundColor}-600`;
71
- const paginationBg = isImageBackground ? "bg-black/10" : `bg-${backgroundColor}-400`;
66
+ const isTransparentBg = backgroundColor === "transparent";
67
+ const useTransparentInner = isImageBackground || isTransparentBg;
68
+ const innerBg = useTransparentInner ? "bg-transparent" : `bg-${backgroundColor}`;
69
+ const innerBgAlt = useTransparentInner ? "bg-black/5" : `bg-${backgroundColor}-400`;
70
+ const transparentBorder = isTransparentBg ? "border-black/20" : "border-white/20";
71
+ const innerBorder = useTransparentInner ? transparentBorder : `border-${backgroundColor}-600`;
72
+ const headerBg = useTransparentInner ? "bg-black/10" : `bg-${headerBackgroundColor}-400`;
73
+ const headerBorder = useTransparentInner ? transparentBorder : `border-${headerBackgroundColor}-600`;
74
+ const paginationBg = useTransparentInner ? "bg-black/10" : `bg-${backgroundColor}-400`;
72
75
  const [globalFilter, setGlobalFilter] = useState("");
73
76
  const [sortConfig, setSortConfig] = useState(null);
74
77
  const [currentPage, setCurrentPage] = useState(1);
@@ -453,4 +456,4 @@ const tableWidgetPropertySchema = {
453
456
  //#endregion
454
457
  export { TableWidget_exports as n, tableWidgetPropertySchema as r, TableWidget as t };
455
458
 
456
- //# sourceMappingURL=TableWidget-D_6Qi3m8.mjs.map
459
+ //# sourceMappingURL=TableWidget-BbjQhI2A.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableWidget-BbjQhI2A.mjs","names":[],"sources":["../../widgets/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/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-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/portal-core/types\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\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 isImageBackground = background.type === \"image\";\n const backgroundImage =\n (background.resource?.image_url || background.resource?.imageUrl) &&\n isImageBackground\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n const pageSize = maxRowsPerPage;\n\n // When using an image or transparent background, inner elements should be\n // transparent so the image/page shows through. Otherwise use the configured colors.\n const isTransparentBg = backgroundColor === \"transparent\";\n const useTransparentInner = isImageBackground || isTransparentBg;\n const innerBg = useTransparentInner\n ? \"bg-transparent\"\n : `bg-${backgroundColor}`;\n const innerBgAlt = useTransparentInner\n ? \"bg-black/5\"\n : `bg-${backgroundColor}-400`;\n const transparentBorder = isTransparentBg\n ? \"border-black/20\"\n : \"border-white/20\";\n const innerBorder = useTransparentInner\n ? transparentBorder\n : `border-${backgroundColor}-600`;\n const headerBg = useTransparentInner\n ? \"bg-black/10\"\n : `bg-${headerBackgroundColor}-400`;\n const headerBorder = useTransparentInner\n ? transparentBorder\n : `border-${headerBackgroundColor}-600`;\n const paginationBg = useTransparentInner\n ? \"bg-black/10\"\n : `bg-${backgroundColor}-400`;\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 const { onItemClick } = useWidgetInteraction();\n\n // Empty state\n if (data.length === 0) {\n return (\n <div\n className={`@container rounded-${borderRadius} bg-${backgroundColor} bg-cover bg-center 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} bg-${backgroundColor} bg-cover bg-center text-${textColor} ${className}`}\n style={{ backgroundImage }}\n {...props}\n >\n <div\n className={`flex items-center justify-between p-${padding} ${innerBg} space-x-2`}\n >\n {/* Title */}\n {titleEnabled && titleText && (\n <h2\n className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor} min-w-0 truncate`}\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 ${headerBorder} ${headerBg} 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 className={`${headerBg} ${headerBorder} border-y`}>\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 ${innerBorder} last:border-none ${innerBg} ${alternatingColorEnabled ? `even:${innerBgAlt}` : \"\"} ${onItemClick ? \"cursor-pointer hover:opacity-80\" : \"\"}`}\n {...(onItemClick\n ? {\n tabIndex: 0,\n onClick: () => onItemClick(item),\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onItemClick(item);\n }\n },\n }\n : {})}\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 ${innerBorder} last:border-none ${innerBg} ${alternatingColorEnabled ? `even:${innerBgAlt}` : \"\"}`}\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 ${innerBg}`}>\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 ${innerBorder} p-${padding} @md:flex-row ${paginationBg} 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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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;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;EACD,cAAc;GACZ,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;EACF,cAAc;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,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"}
@@ -4,5 +4,5 @@ require("./registries-4OQmN6DO.cjs");
4
4
  require("./fields-Dw1JK2lA.cjs");
5
5
  require("./src-CaogiXSc.cjs");
6
6
  require("./MediaRenderer-D9Vhmpw3.cjs");
7
- const require_TableWidget = require("./TableWidget-D-r0EQ_2.cjs");
7
+ const require_TableWidget = require("./TableWidget-2ttj9H5g.cjs");
8
8
  exports.tableWidgetPropertySchema = require_TableWidget.tableWidgetPropertySchema;
package/dist/index.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
2
  const require_chunk = require("./chunk-9hOWP6kD.cjs");
3
- const require_FluidProvider = require("./FluidProvider-PqLUzyvQ.cjs");
4
- const require_AccountScreen = require("./AccountScreen-DTv1-206.cjs");
3
+ const require_FluidProvider = require("./FluidProvider-BmkSwcgV.cjs");
4
+ const require_AccountScreen = require("./AccountScreen-Dp6QFyEr.cjs");
5
5
  require("./error-state-BcEAq2rK.cjs");
6
6
  const require_LayoutWidget = require("./LayoutWidget-fOBC-EML.cjs");
7
7
  require("./WidgetInteractionContext-BaEGs5dy.cjs");
@@ -26,22 +26,22 @@ const require_NestedWidget = require("./NestedWidget-DHshO5d0.cjs");
26
26
  const require_QuickShareWidget = require("./QuickShareWidget-DtJlPN8u.cjs");
27
27
  const require_RecentActivityWidget = require("./RecentActivityWidget-CPs5D_bJ.cjs");
28
28
  const require_SpacerWidget = require("./SpacerWidget-DyZ49XpL.cjs");
29
- const require_TableWidget = require("./TableWidget-D-r0EQ_2.cjs");
29
+ const require_TableWidget = require("./TableWidget-2ttj9H5g.cjs");
30
30
  const require_ToDoWidget = require("./ToDoWidget-CrZ9xJV1.cjs");
31
31
  const require_VideoWidget = require("./VideoWidget-BJrnmHCe.cjs");
32
- const require_use_fluid_api = require("./use-fluid-api-CTRIRz1H.cjs");
33
- const require_products = require("./products-CzuNSVSG.cjs");
34
- const require_MessagingScreen = require("./MessagingScreen-C-kF4Z5h.cjs");
32
+ const require_use_fluid_api = require("./use-fluid-api-DvJuEWRf.cjs");
33
+ const require_products = require("./products-CH5kIItT.cjs");
34
+ const require_MessagingScreen = require("./MessagingScreen-sAWF7pjl.cjs");
35
35
  const require_AppNavigationContext = require("./AppNavigationContext-DrayF_RG.cjs");
36
36
  require("./es-kNOrmozy.cjs");
37
37
  const require_CoreScreenPlaceholder = require("./CoreScreenPlaceholder-Cl_zuOBC.cjs");
38
38
  const require_ContactsScreen = require("./ContactsScreen-GPOgZ-Wi.cjs");
39
39
  const require_OrdersScreen = require("./OrdersScreen-Dy-JChVQ.cjs");
40
40
  const require_CustomersScreen = require("./CustomersScreen-CK1jJhvM.cjs");
41
- require("./src-MZ0kePDW.cjs");
42
- const require_ShopScreen = require("./ShopScreen-BstU0BQe.cjs");
43
- const require_ShareablesScreen = require("./ShareablesScreen-B-kEPPCb.cjs");
44
- const require_ProductsScreen = require("./ProductsScreen-DeXWGZXc.cjs");
41
+ require("./src-DMjlIMO9.cjs");
42
+ const require_ShopScreen = require("./ShopScreen-BPCwix1m.cjs");
43
+ const require_ShareablesScreen = require("./ShareablesScreen-DYPJgZ3z.cjs");
44
+ const require_ProductsScreen = require("./ProductsScreen-DzD-TPh5.cjs");
45
45
  let react = require("react");
46
46
  react = require_chunk.__toESM(react);
47
47
  let _tanstack_react_query = require("@tanstack/react-query");
@@ -2044,14 +2044,14 @@ function RequireAuth({ children, fallback = /* @__PURE__ */ (0, react_jsx_runtim
2044
2044
  //#endregion
2045
2045
  //#region src/screens/index.ts
2046
2046
  const screenPropertySchemas = {
2047
- AccountScreen: () => Promise.resolve().then(() => require("./AccountScreen-B0p9WJoI.cjs")).then((m) => m.accountScreenPropertySchema),
2048
- MessagingScreen: () => Promise.resolve().then(() => require("./MessagingScreen-CcxyIep3.cjs")).then((m) => m.messagingScreenPropertySchema),
2047
+ AccountScreen: () => Promise.resolve().then(() => require("./AccountScreen-Vzz8W4Iq.cjs")).then((m) => m.accountScreenPropertySchema),
2048
+ MessagingScreen: () => Promise.resolve().then(() => require("./MessagingScreen-C33eDdna.cjs")).then((m) => m.messagingScreenPropertySchema),
2049
2049
  ContactsScreen: () => Promise.resolve().then(() => require("./ContactsScreen-GPOgZ-Wi.cjs")).then((n) => n.ContactsScreen_exports).then((m) => m.contactsScreenPropertySchema),
2050
2050
  OrdersScreen: () => Promise.resolve().then(() => require("./OrdersScreen-Dy-JChVQ.cjs")).then((n) => n.OrdersScreen_exports).then((m) => m.ordersScreenPropertySchema),
2051
2051
  CustomersScreen: () => Promise.resolve().then(() => require("./CustomersScreen-CK1jJhvM.cjs")).then((n) => n.CustomersScreen_exports).then((m) => m.customersScreenPropertySchema),
2052
- ProductsScreen: () => Promise.resolve().then(() => require("./ProductsScreen-7t1oNY_N.cjs")).then((m) => m.productsScreenPropertySchema),
2053
- ShareablesScreen: () => Promise.resolve().then(() => require("./ShareablesScreen-Cx87emjz.cjs")).then((m) => m.shareablesScreenPropertySchema),
2054
- ShopScreen: () => Promise.resolve().then(() => require("./ShopScreen-Ds4MVzZT.cjs")).then((m) => m.shopScreenPropertySchema)
2052
+ ProductsScreen: () => Promise.resolve().then(() => require("./ProductsScreen-CdP_m_Ok.cjs")).then((m) => m.productsScreenPropertySchema),
2053
+ ShareablesScreen: () => Promise.resolve().then(() => require("./ShareablesScreen-jHqLmOC6.cjs")).then((m) => m.shareablesScreenPropertySchema),
2054
+ ShopScreen: () => Promise.resolve().then(() => require("./ShopScreen--pUsiUNt.cjs")).then((m) => m.shopScreenPropertySchema)
2055
2055
  };
2056
2056
  /**
2057
2057
  * Core page template IDs
@@ -2721,7 +2721,8 @@ const SYSTEM_NAVIGATION_SLUGS = [
2721
2721
  "share/media",
2722
2722
  "share/playlists",
2723
2723
  "share/products",
2724
- "shop"
2724
+ "shop",
2725
+ "upgrade"
2725
2726
  ];
2726
2727
  const SYSTEM_NAVIGATION_ITEMS = {
2727
2728
  account: {
@@ -2801,6 +2802,12 @@ const SYSTEM_NAVIGATION_ITEMS = {
2801
2802
  label: "Subscriptions",
2802
2803
  icon: "arrows-repeat",
2803
2804
  section: "User"
2805
+ },
2806
+ upgrade: {
2807
+ slug: "upgrade",
2808
+ label: "Upgrade",
2809
+ icon: "arrow-up-from-bracket",
2810
+ section: "User"
2804
2811
  }
2805
2812
  };
2806
2813
  /**
@@ -3504,13 +3511,13 @@ function BuilderScreenViewImpl({ screen, className }) {
3504
3511
  const BuilderScreenView = (0, react.memo)(BuilderScreenViewImpl);
3505
3512
  //#endregion
3506
3513
  //#region src/shell/PageRouter.tsx
3507
- const AccountScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./AccountScreen-B0p9WJoI.cjs")).then((m) => ({ default: m.AccountScreen })));
3508
- const MessagingScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./MessagingScreen-CcxyIep3.cjs")).then((m) => ({ default: m.MessagingScreen })));
3514
+ const AccountScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./AccountScreen-Vzz8W4Iq.cjs")).then((m) => ({ default: m.AccountScreen })));
3515
+ const MessagingScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./MessagingScreen-C33eDdna.cjs")).then((m) => ({ default: m.MessagingScreen })));
3509
3516
  const ContactsScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ContactsScreen-GPOgZ-Wi.cjs")).then((n) => n.ContactsScreen_exports).then((m) => ({ default: m.ContactsScreen })));
3510
- const ShopScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ShopScreen-Ds4MVzZT.cjs")).then((m) => ({ default: m.ShopScreen })));
3517
+ const ShopScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ShopScreen--pUsiUNt.cjs")).then((m) => ({ default: m.ShopScreen })));
3511
3518
  const CustomersScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./CustomersScreen-CK1jJhvM.cjs")).then((n) => n.CustomersScreen_exports).then((m) => ({ default: m.CustomersScreen })));
3512
- const ProductsScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ProductsScreen-7t1oNY_N.cjs")).then((m) => ({ default: m.ProductsScreen })));
3513
- const ShareablesScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ShareablesScreen-Cx87emjz.cjs")).then((m) => ({ default: m.ShareablesScreen })));
3519
+ const ProductsScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ProductsScreen-CdP_m_Ok.cjs")).then((m) => ({ default: m.ProductsScreen })));
3520
+ const ShareablesScreen$1 = (0, react.lazy)(() => Promise.resolve().then(() => require("./ShareablesScreen-jHqLmOC6.cjs")).then((m) => ({ default: m.ShareablesScreen })));
3514
3521
  const SYSTEM_SLUG_SCREEN_MAP = {
3515
3522
  account: AccountScreen$1,
3516
3523
  "account/profile": AccountScreen$1,