@fluid-app/portal-widgets 0.1.19 → 0.1.21

package/dist/TableWidget-bpvdvJHI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWidget-bpvdvJHI.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/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 background, inner elements should be transparent\n  // so the image shows through. Otherwise use the configured colors.\n  const innerBg = isImageBackground\n    ? \"bg-transparent\"\n    : `bg-${backgroundColor}`;\n  const innerBgAlt = isImageBackground\n    ? \"bg-black/5\"\n    : `bg-${backgroundColor}-400`;\n  const innerBorder = isImageBackground\n    ? \"border-white/20\"\n    : `border-${backgroundColor}-600`;\n  const headerBg = isImageBackground\n    ? \"bg-black/10\"\n    : `bg-${headerBackgroundColor}-400`;\n  const headerBorder = isImageBackground\n    ? \"border-white/20\"\n    : `border-${headerBackgroundColor}-600`;\n  const paginationBg = isImageBackground\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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ACb,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"}

package/dist/{ToDoWidget-D8YIsl7y.mjs → ToDoWidget-4EZIWq_Z.mjs}

@@ -271,4 +271,4 @@ const toDoWidgetPropertySchema = {
 //#endregion
 export { ToDoWidget_exports as n, toDoWidgetPropertySchema as r, ToDoWidget as t };
 
-//# sourceMappingURL=ToDoWidget-D8YIsl7y.mjs.map
+//# sourceMappingURL=ToDoWidget-4EZIWq_Z.mjs.map

package/dist/{ToDoWidget-D8YIsl7y.mjs.map → ToDoWidget-4EZIWq_Z.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ToDoWidget-D8YIsl7y.mjs","names":[],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n  const d = new Date(now);\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n  {\n    id: 1,\n    body: \"Send follow-up email to new leads\",\n    dueAt: daysFromNow(1),\n    completedAt: null,\n    createdAt: daysFromNow(-2),\n    contactName: \"Sarah Johnson\",\n  },\n  {\n    id: 2,\n    body: \"Prepare slides for team training\",\n    dueAt: daysFromNow(3),\n    completedAt: null,\n    createdAt: daysFromNow(-1),\n    contactName: null,\n  },\n  {\n    id: 3,\n    body: \"Review monthly sales report\",\n    dueAt: daysFromNow(-1),\n    completedAt: null,\n    createdAt: daysFromNow(-5),\n    contactName: \"Mike Chen\",\n  },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"todos\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\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 todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/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 { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = 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  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\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  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps): 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: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <FontAwesomeIcon\n              icon={faListCheck}\n              className={`h-5 w-5 text-${accentColor}-foreground`}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <FontAwesomeIcon\n                icon={faPlus}\n                className={`h-5 w-5 text-${textColor}/50`}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do 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 todo list\",\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 todo list\",\n      defaultValue: \"To-Do\",\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 todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\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} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
+{"version":3,"file":"ToDoWidget-4EZIWq_Z.mjs","names":[],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n  const d = new Date(now);\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n  {\n    id: 1,\n    body: \"Send follow-up email to new leads\",\n    dueAt: daysFromNow(1),\n    completedAt: null,\n    createdAt: daysFromNow(-2),\n    contactName: \"Sarah Johnson\",\n  },\n  {\n    id: 2,\n    body: \"Prepare slides for team training\",\n    dueAt: daysFromNow(3),\n    completedAt: null,\n    createdAt: daysFromNow(-1),\n    contactName: null,\n  },\n  {\n    id: 3,\n    body: \"Review monthly sales report\",\n    dueAt: daysFromNow(-1),\n    completedAt: null,\n    createdAt: daysFromNow(-5),\n    contactName: \"Mike Chen\",\n  },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"todos\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\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 todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/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 { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = 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  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\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  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps): 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: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <FontAwesomeIcon\n              icon={faListCheck}\n              className={`h-5 w-5 text-${accentColor}-foreground`}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <FontAwesomeIcon\n                icon={faPlus}\n                className={`h-5 w-5 text-${textColor}/50`}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do 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 todo list\",\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 todo list\",\n      defaultValue: \"To-Do\",\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 todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\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} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/{ToDoWidget-Dvs0GDkx.cjs → ToDoWidget-D5BFKUrZ.cjs}

@@ -288,4 +288,4 @@ Object.defineProperty(exports, "toDoWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ToDoWidget-Dvs0GDkx.cjs.map
+//# sourceMappingURL=ToDoWidget-D5BFKUrZ.cjs.map

package/dist/{ToDoWidget-Dvs0GDkx.cjs.map → ToDoWidget-D5BFKUrZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ToDoWidget-Dvs0GDkx.cjs","names":["FontAwesomeIcon","faListCheck","ErrorState","faPlus"],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n  const d = new Date(now);\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n  {\n    id: 1,\n    body: \"Send follow-up email to new leads\",\n    dueAt: daysFromNow(1),\n    completedAt: null,\n    createdAt: daysFromNow(-2),\n    contactName: \"Sarah Johnson\",\n  },\n  {\n    id: 2,\n    body: \"Prepare slides for team training\",\n    dueAt: daysFromNow(3),\n    completedAt: null,\n    createdAt: daysFromNow(-1),\n    contactName: null,\n  },\n  {\n    id: 3,\n    body: \"Review monthly sales report\",\n    dueAt: daysFromNow(-1),\n    completedAt: null,\n    createdAt: daysFromNow(-5),\n    contactName: \"Mike Chen\",\n  },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"todos\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\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 todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/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 { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = 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  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\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  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps): 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: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <FontAwesomeIcon\n              icon={faListCheck}\n              className={`h-5 w-5 text-${accentColor}-foreground`}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <FontAwesomeIcon\n                icon={faPlus}\n                className={`h-5 w-5 text-${textColor}/50`}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do 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 todo list\",\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 todo list\",\n      defaultValue: \"To-Do\",\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 todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\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} as const satisfies WidgetPropertySchema;\n"],"mappings":"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P,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;uDACY;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;uDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR;yDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;8DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
+{"version":3,"file":"ToDoWidget-D5BFKUrZ.cjs","names":["FontAwesomeIcon","faListCheck","ErrorState","faPlus"],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n  const d = new Date(now);\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n  {\n    id: 1,\n    body: \"Send follow-up email to new leads\",\n    dueAt: daysFromNow(1),\n    completedAt: null,\n    createdAt: daysFromNow(-2),\n    contactName: \"Sarah Johnson\",\n  },\n  {\n    id: 2,\n    body: \"Prepare slides for team training\",\n    dueAt: daysFromNow(3),\n    completedAt: null,\n    createdAt: daysFromNow(-1),\n    contactName: null,\n  },\n  {\n    id: 3,\n    body: \"Review monthly sales report\",\n    dueAt: daysFromNow(-1),\n    completedAt: null,\n    createdAt: daysFromNow(-5),\n    contactName: \"Mike Chen\",\n  },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"todos\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\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 todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/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 { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = 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  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\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  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps): 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: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <FontAwesomeIcon\n              icon={faListCheck}\n              className={`h-5 w-5 text-${accentColor}-foreground`}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <FontAwesomeIcon\n                icon={faPlus}\n                className={`h-5 w-5 text-${textColor}/50`}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do 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 todo list\",\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 todo list\",\n      defaultValue: \"To-Do\",\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 todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\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} as const satisfies WidgetPropertySchema;\n"],"mappings":"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P,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;uDACY;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;uDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR;yDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;8DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}

package/dist/{VideoWidget-D_1kluGw.mjs → VideoWidget-CYSOjVec.mjs}

@@ -186,4 +186,4 @@ const videoWidgetPropertySchema = {
 //#endregion
 export { VideoWidget_exports as n, videoWidgetPropertySchema as r, VideoWidget as t };
 
-//# sourceMappingURL=VideoWidget-D_1kluGw.mjs.map
+//# sourceMappingURL=VideoWidget-CYSOjVec.mjs.map

package/dist/{VideoWidget-D_1kluGw.mjs.map → VideoWidget-CYSOjVec.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"VideoWidget-D_1kluGw.mjs","names":[],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/portal-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  poster?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  controls?: boolean;\n  autoplay?: boolean;\n  loop?: boolean;\n  muted?: boolean;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n  src = \"\",\n  poster = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  controls = true,\n  autoplay = false,\n  loop = false,\n  muted = false,\n  resource,\n  useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n  const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n  const effectivePoster = useCustomUrl\n    ? poster\n    : (resource?.imageUrl ?? poster);\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  return (\n    <div\n      className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"video\"\n        src={effectiveSrc}\n        poster={effectivePoster}\n        objectFit={isFixed ? displayFit : undefined}\n        focusPoint={isFixed ? focusPoint : undefined}\n        controls={controls}\n        autoplay={autoplay}\n        loop={loop}\n        muted={muted}\n      />\n    </div>\n  );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"VideoWidget\",\n  displayName: \"Video\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n  ],\n  fields: [\n    // Styling tab - Content group\n    {\n      key: \"resource\",\n      label: \"Select Video\",\n      type: \"resource\",\n      description: \"Browse and select a video\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom video URL instead of selecting media\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Video URL\",\n      type: \"text\",\n      description: \"The source URL of the video\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"poster\",\n      label: \"Poster Image URL\",\n      type: \"text\",\n      description: \"Thumbnail image displayed before video plays\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n\n    // Styling tab - Design group\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the calendar container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the video height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the video container\",\n      defaultValue: \"200px\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    }),\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the video fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the video within its container\",\n      defaultValue: \"center\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Behavior tab\n    {\n      key: \"controls\",\n      label: \"Show Controls\",\n      type: \"boolean\",\n      description: \"Display video playback controls\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"autoplay\",\n      label: \"Autoplay\",\n      type: \"boolean\",\n      description: \"Automatically start playing the video\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"loop\",\n      label: \"Loop\",\n      type: \"boolean\",\n      description: \"Repeat the video when it ends\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"muted\",\n      label: \"Muted\",\n      type: \"boolean\",\n      description: \"Start with audio muted\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,MAAM,IACN,SAAS,IACT,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,WAAW,MACX,WAAW,OACX,OAAO,OACP,QAAQ,OACR,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,kBAAkB,eACpB,SACC,UAAU,YAAY;CAE3B,MAAM,UAAU,mBAAmB;AAEnC,QACE,oBAAC,OAAD;EACE,WAAW,2CAA2C;EACtD,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,QAAQ;GACR,WAAW,UAAU,aAAa,KAAA;GAClC,YAAY,UAAU,aAAa,KAAA;GACzB;GACA;GACJ;GACC;GACP,CAAA;EACE,CAAA;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAY,OAAO;EAAY,CACtC;CACD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,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;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;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,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}
+{"version":3,"file":"VideoWidget-CYSOjVec.mjs","names":[],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/portal-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  poster?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  controls?: boolean;\n  autoplay?: boolean;\n  loop?: boolean;\n  muted?: boolean;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n  src = \"\",\n  poster = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  controls = true,\n  autoplay = false,\n  loop = false,\n  muted = false,\n  resource,\n  useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n  const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n  const effectivePoster = useCustomUrl\n    ? poster\n    : (resource?.imageUrl ?? poster);\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  return (\n    <div\n      className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"video\"\n        src={effectiveSrc}\n        poster={effectivePoster}\n        objectFit={isFixed ? displayFit : undefined}\n        focusPoint={isFixed ? focusPoint : undefined}\n        controls={controls}\n        autoplay={autoplay}\n        loop={loop}\n        muted={muted}\n      />\n    </div>\n  );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"VideoWidget\",\n  displayName: \"Video\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n  ],\n  fields: [\n    // Styling tab - Content group\n    {\n      key: \"resource\",\n      label: \"Select Video\",\n      type: \"resource\",\n      description: \"Browse and select a video\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom video URL instead of selecting media\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Video URL\",\n      type: \"text\",\n      description: \"The source URL of the video\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"poster\",\n      label: \"Poster Image URL\",\n      type: \"text\",\n      description: \"Thumbnail image displayed before video plays\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n\n    // Styling tab - Design group\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the calendar container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the video height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the video container\",\n      defaultValue: \"200px\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    }),\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the video fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the video within its container\",\n      defaultValue: \"center\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Behavior tab\n    {\n      key: \"controls\",\n      label: \"Show Controls\",\n      type: \"boolean\",\n      description: \"Display video playback controls\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"autoplay\",\n      label: \"Autoplay\",\n      type: \"boolean\",\n      description: \"Automatically start playing the video\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"loop\",\n      label: \"Loop\",\n      type: \"boolean\",\n      description: \"Repeat the video when it ends\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"muted\",\n      label: \"Muted\",\n      type: \"boolean\",\n      description: \"Start with audio muted\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,MAAM,IACN,SAAS,IACT,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,WAAW,MACX,WAAW,OACX,OAAO,OACP,QAAQ,OACR,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,kBAAkB,eACpB,SACC,UAAU,YAAY;CAE3B,MAAM,UAAU,mBAAmB;AAEnC,QACE,oBAAC,OAAD;EACE,WAAW,2CAA2C;EACtD,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,QAAQ;GACR,WAAW,UAAU,aAAa,KAAA;GAClC,YAAY,UAAU,aAAa,KAAA;GACzB;GACA;GACJ;GACC;GACP,CAAA;EACE,CAAA;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAY,OAAO;EAAY,CACtC;CACD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,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;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;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,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/{VideoWidget-D3Fw1jZE.cjs → VideoWidget-CqRHfFnI.cjs}

@@ -203,4 +203,4 @@ Object.defineProperty(exports, "videoWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=VideoWidget-D3Fw1jZE.cjs.map
+//# sourceMappingURL=VideoWidget-CqRHfFnI.cjs.map

package/dist/{VideoWidget-D3Fw1jZE.cjs.map → VideoWidget-CqRHfFnI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"VideoWidget-D3Fw1jZE.cjs","names":["MediaRenderer"],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/portal-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  poster?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  controls?: boolean;\n  autoplay?: boolean;\n  loop?: boolean;\n  muted?: boolean;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n  src = \"\",\n  poster = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  controls = true,\n  autoplay = false,\n  loop = false,\n  muted = false,\n  resource,\n  useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n  const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n  const effectivePoster = useCustomUrl\n    ? poster\n    : (resource?.imageUrl ?? poster);\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  return (\n    <div\n      className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"video\"\n        src={effectiveSrc}\n        poster={effectivePoster}\n        objectFit={isFixed ? displayFit : undefined}\n        focusPoint={isFixed ? focusPoint : undefined}\n        controls={controls}\n        autoplay={autoplay}\n        loop={loop}\n        muted={muted}\n      />\n    </div>\n  );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"VideoWidget\",\n  displayName: \"Video\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n  ],\n  fields: [\n    // Styling tab - Content group\n    {\n      key: \"resource\",\n      label: \"Select Video\",\n      type: \"resource\",\n      description: \"Browse and select a video\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom video URL instead of selecting media\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Video URL\",\n      type: \"text\",\n      description: \"The source URL of the video\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"poster\",\n      label: \"Poster Image URL\",\n      type: \"text\",\n      description: \"Thumbnail image displayed before video plays\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n\n    // Styling tab - Design group\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the calendar container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the video height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the video container\",\n      defaultValue: \"200px\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    }),\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the video fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the video within its container\",\n      defaultValue: \"center\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Behavior tab\n    {\n      key: \"controls\",\n      label: \"Show Controls\",\n      type: \"boolean\",\n      description: \"Display video playback controls\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"autoplay\",\n      label: \"Autoplay\",\n      type: \"boolean\",\n      description: \"Automatically start playing the video\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"loop\",\n      label: \"Loop\",\n      type: \"boolean\",\n      description: \"Repeat the video when it ends\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"muted\",\n      label: \"Muted\",\n      type: \"boolean\",\n      description: \"Start with audio muted\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,MAAM,IACN,SAAS,IACT,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,WAAW,MACX,WAAW,OACX,OAAO,OACP,QAAQ,OACR,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,kBAAkB,eACpB,SACC,UAAU,YAAY;CAE3B,MAAM,UAAU,mBAAmB;AAEnC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,2CAA2C;EACtD,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,eAAD;GACE,WAAU;GACV,KAAK;GACL,QAAQ;GACR,WAAW,UAAU,aAAa,KAAA;GAClC,YAAY,UAAU,aAAa,KAAA;GACzB;GACA;GACJ;GACC;GACP,CAAA;EACE,CAAA;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAY,OAAO;EAAY,CACtC;CACD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,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;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;8DAGoB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;wDACc;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;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,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}
+{"version":3,"file":"VideoWidget-CqRHfFnI.cjs","names":["MediaRenderer"],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/portal-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  poster?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  controls?: boolean;\n  autoplay?: boolean;\n  loop?: boolean;\n  muted?: boolean;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n  src = \"\",\n  poster = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  controls = true,\n  autoplay = false,\n  loop = false,\n  muted = false,\n  resource,\n  useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n  const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n  const effectivePoster = useCustomUrl\n    ? poster\n    : (resource?.imageUrl ?? poster);\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  return (\n    <div\n      className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"video\"\n        src={effectiveSrc}\n        poster={effectivePoster}\n        objectFit={isFixed ? displayFit : undefined}\n        focusPoint={isFixed ? focusPoint : undefined}\n        controls={controls}\n        autoplay={autoplay}\n        loop={loop}\n        muted={muted}\n      />\n    </div>\n  );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"VideoWidget\",\n  displayName: \"Video\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n  ],\n  fields: [\n    // Styling tab - Content group\n    {\n      key: \"resource\",\n      label: \"Select Video\",\n      type: \"resource\",\n      description: \"Browse and select a video\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom video URL instead of selecting media\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Video URL\",\n      type: \"text\",\n      description: \"The source URL of the video\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"poster\",\n      label: \"Poster Image URL\",\n      type: \"text\",\n      description: \"Thumbnail image displayed before video plays\",\n      defaultValue: \"\",\n      tab: \"styling\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n\n    // Styling tab - Design group\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the calendar container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the video height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the video container\",\n      defaultValue: \"200px\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    }),\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the video fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the video within its container\",\n      defaultValue: \"center\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Behavior tab\n    {\n      key: \"controls\",\n      label: \"Show Controls\",\n      type: \"boolean\",\n      description: \"Display video playback controls\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"autoplay\",\n      label: \"Autoplay\",\n      type: \"boolean\",\n      description: \"Automatically start playing the video\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"loop\",\n      label: \"Loop\",\n      type: \"boolean\",\n      description: \"Repeat the video when it ends\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n    {\n      key: \"muted\",\n      label: \"Muted\",\n      type: \"boolean\",\n      description: \"Start with audio muted\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Behavior\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,MAAM,IACN,SAAS,IACT,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,WAAW,MACX,WAAW,OACX,OAAO,OACP,QAAQ,OACR,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,kBAAkB,eACpB,SACC,UAAU,YAAY;CAE3B,MAAM,UAAU,mBAAmB;AAEnC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,2CAA2C;EACtD,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,eAAD;GACE,WAAU;GACV,KAAK;GACL,QAAQ;GACR,WAAW,UAAU,aAAa,KAAA;GAClC,YAAY,UAAU,aAAa,KAAA;GACzB;GACA;GACJ;GACC;GACP,CAAA;EACE,CAAA;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAY,OAAO;EAAY,CACtC;CACD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,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;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;8DAGoB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;wDACc;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;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,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/WidgetInteractionContext-DjlpWpTR.cjs

@@ -0,0 +1,31 @@
+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/WidgetInteractionContext.tsx
+const WidgetInteractionContext = (0, react.createContext)({});
+function WidgetInteractionProvider({ onItemClick, children }) {
+	const value = (0, react.useMemo)(() => onItemClick ? { onItemClick } : {}, [onItemClick]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetInteractionContext.Provider, {
+		value,
+		children
+	});
+}
+function useWidgetInteraction() {
+	return (0, react.useContext)(WidgetInteractionContext);
+}
+//#endregion
+Object.defineProperty(exports, "WidgetInteractionProvider", {
+	enumerable: true,
+	get: function() {
+		return WidgetInteractionProvider;
+	}
+});
+Object.defineProperty(exports, "useWidgetInteraction", {
+	enumerable: true,
+	get: function() {
+		return useWidgetInteraction;
+	}
+});
+
+//# sourceMappingURL=WidgetInteractionContext-DjlpWpTR.cjs.map

package/dist/WidgetInteractionContext-DjlpWpTR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetInteractionContext-DjlpWpTR.cjs","names":[],"sources":["../src/contexts/WidgetInteractionContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactNode,\n} from \"react\";\n\nexport interface WidgetInteractionItem {\n  id: string | number;\n  [key: string]: unknown;\n}\n\ninterface WidgetInteractionContextValue {\n  onItemClick?: (item: WidgetInteractionItem) => void;\n}\n\nconst WidgetInteractionContext = createContext<WidgetInteractionContextValue>(\n  {},\n);\n\nexport interface WidgetInteractionProviderProps {\n  onItemClick?: (item: WidgetInteractionItem) => void;\n  children: ReactNode;\n}\n\nexport function WidgetInteractionProvider({\n  onItemClick,\n  children,\n}: WidgetInteractionProviderProps): React.JSX.Element {\n  const value: WidgetInteractionContextValue = useMemo(\n    () => (onItemClick ? { onItemClick } : {}),\n    [onItemClick],\n  );\n  return (\n    <WidgetInteractionContext.Provider value={value}>\n      {children}\n    </WidgetInteractionContext.Provider>\n  );\n}\n\nexport function useWidgetInteraction(): WidgetInteractionContextValue {\n  return useContext(WidgetInteractionContext);\n}\n"],"mappings":";;;;;AAgBA,MAAM,4BAAA,GAAA,MAAA,eACJ,EAAE,CACH;AAOD,SAAgB,0BAA0B,EACxC,aACA,YACoD;CACpD,MAAM,SAAA,GAAA,MAAA,eACG,cAAc,EAAE,aAAa,GAAG,EAAE,EACzC,CAAC,YAAY,CACd;AACD,QACE,iBAAA,GAAA,kBAAA,KAAC,yBAAyB,UAA1B;EAA0C;EACvC;EACiC,CAAA;;AAIxC,SAAgB,uBAAsD;AACpE,SAAA,GAAA,MAAA,YAAkB,yBAAyB"}

package/dist/WidgetInteractionContext-awLrJeAK.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+//#region src/contexts/WidgetInteractionContext.tsx
+const WidgetInteractionContext = createContext({});
+function WidgetInteractionProvider({ onItemClick, children }) {
+	const value = useMemo(() => onItemClick ? { onItemClick } : {}, [onItemClick]);
+	return /* @__PURE__ */ jsx(WidgetInteractionContext.Provider, {
+		value,
+		children
+	});
+}
+function useWidgetInteraction() {
+	return useContext(WidgetInteractionContext);
+}
+//#endregion
+export { useWidgetInteraction as n, WidgetInteractionProvider as t };
+
+//# sourceMappingURL=WidgetInteractionContext-awLrJeAK.mjs.map

package/dist/WidgetInteractionContext-awLrJeAK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetInteractionContext-awLrJeAK.mjs","names":[],"sources":["../src/contexts/WidgetInteractionContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactNode,\n} from \"react\";\n\nexport interface WidgetInteractionItem {\n  id: string | number;\n  [key: string]: unknown;\n}\n\ninterface WidgetInteractionContextValue {\n  onItemClick?: (item: WidgetInteractionItem) => void;\n}\n\nconst WidgetInteractionContext = createContext<WidgetInteractionContextValue>(\n  {},\n);\n\nexport interface WidgetInteractionProviderProps {\n  onItemClick?: (item: WidgetInteractionItem) => void;\n  children: ReactNode;\n}\n\nexport function WidgetInteractionProvider({\n  onItemClick,\n  children,\n}: WidgetInteractionProviderProps): React.JSX.Element {\n  const value: WidgetInteractionContextValue = useMemo(\n    () => (onItemClick ? { onItemClick } : {}),\n    [onItemClick],\n  );\n  return (\n    <WidgetInteractionContext.Provider value={value}>\n      {children}\n    </WidgetInteractionContext.Provider>\n  );\n}\n\nexport function useWidgetInteraction(): WidgetInteractionContextValue {\n  return useContext(WidgetInteractionContext);\n}\n"],"mappings":";;;AAgBA,MAAM,2BAA2B,cAC/B,EAAE,CACH;AAOD,SAAgB,0BAA0B,EACxC,aACA,YACoD;CACpD,MAAM,QAAuC,cACpC,cAAc,EAAE,aAAa,GAAG,EAAE,EACzC,CAAC,YAAY,CACd;AACD,QACE,oBAAC,yBAAyB,UAA1B;EAA0C;EACvC;EACiC,CAAA;;AAIxC,SAAgB,uBAAsD;AACpE,QAAO,WAAW,yBAAyB"}

package/dist/contexts/index.cjs

@@ -1,8 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_RegistryContext = require("../RegistryContext-xjea4xVV.cjs");
 const require_ScreenRendererContext = require("../ScreenRendererContext-CK1IsFTn.cjs");
+const require_WidgetInteractionContext = require("../WidgetInteractionContext-DjlpWpTR.cjs");
 exports.RegistryContext = require_RegistryContext.RegistryContext;
 exports.RegistryProvider = require_RegistryContext.RegistryProvider;
 exports.ScreenRendererContext = require_ScreenRendererContext.ScreenRendererContext;
+exports.WidgetInteractionProvider = require_WidgetInteractionContext.WidgetInteractionProvider;
 exports.useRegistry = require_RegistryContext.useRegistry;
 exports.useScreenRenderer = require_ScreenRendererContext.useScreenRenderer;
+exports.useWidgetInteraction = require_WidgetInteractionContext.useWidgetInteraction;

package/dist/contexts/index.d.cts

@@ -73,5 +73,23 @@ declare const ScreenRendererContext: React.Context<ComponentType<ScreenRendererC
 */
 declare function useScreenRenderer(): ComponentType<ScreenRendererComponentProps> | undefined;
 //#endregion
-export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetRegistry, useRegistry, useScreenRenderer };
+//#region src/contexts/WidgetInteractionContext.d.ts
+interface WidgetInteractionItem {
+  id: string | number;
+  [key: string]: unknown;
+}
+interface WidgetInteractionContextValue {
+  onItemClick?: (item: WidgetInteractionItem) => void;
+}
+interface WidgetInteractionProviderProps {
+  onItemClick?: (item: WidgetInteractionItem) => void;
+  children: ReactNode;
+}
+declare function WidgetInteractionProvider({
+  onItemClick,
+  children
+}: WidgetInteractionProviderProps): React.JSX.Element;
+declare function useWidgetInteraction(): WidgetInteractionContextValue;
+//#endregion
+export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetInteractionItem, WidgetInteractionProvider, type WidgetInteractionProviderProps, type WidgetRegistry, useRegistry, useScreenRenderer, useWidgetInteraction };
 //# sourceMappingURL=index.d.cts.map

package/dist/contexts/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx","../../src/contexts/WidgetInteractionContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA;;;UC5BD,qBAAA;EACf,EAAA;EAAA,CAAA,GAAA;AAAA;AAAA,UAIQ,6BAAA;EACR,WAAA,IAAe,IAAA,EAAM,qBAAA;AAAA;AAAA,UAON,8BAAA;EACf,WAAA,IAAe,IAAA,EAAM,qBAAA;EACrB,QAAA,EAAU,SAAA;AAAA;AAAA,iBAGI,yBAAA,CAAA;EACd,WAAA;EACA;AAAA,GACC,8BAAA,GAAiC,KAAA,CAAM,GAAA,CAAI,OAAA;AAAA,iBAY9B,oBAAA,CAAA,GAAwB,6BAAA"}

package/dist/contexts/index.d.mts

@@ -73,5 +73,23 @@ declare const ScreenRendererContext: React.Context<ComponentType<ScreenRendererC
 */
 declare function useScreenRenderer(): ComponentType<ScreenRendererComponentProps> | undefined;
 //#endregion
-export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetRegistry, useRegistry, useScreenRenderer };
+//#region src/contexts/WidgetInteractionContext.d.ts
+interface WidgetInteractionItem {
+  id: string | number;
+  [key: string]: unknown;
+}
+interface WidgetInteractionContextValue {
+  onItemClick?: (item: WidgetInteractionItem) => void;
+}
+interface WidgetInteractionProviderProps {
+  onItemClick?: (item: WidgetInteractionItem) => void;
+  children: ReactNode;
+}
+declare function WidgetInteractionProvider({
+  onItemClick,
+  children
+}: WidgetInteractionProviderProps): React.JSX.Element;
+declare function useWidgetInteraction(): WidgetInteractionContextValue;
+//#endregion
+export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetInteractionItem, WidgetInteractionProvider, type WidgetInteractionProviderProps, type WidgetRegistry, useRegistry, useScreenRenderer, useWidgetInteraction };
 //# sourceMappingURL=index.d.mts.map

package/dist/contexts/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx","../../src/contexts/WidgetInteractionContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA;;;UC5BD,qBAAA;EACf,EAAA;EAAA,CAAA,GAAA;AAAA;AAAA,UAIQ,6BAAA;EACR,WAAA,IAAe,IAAA,EAAM,qBAAA;AAAA;AAAA,UAON,8BAAA;EACf,WAAA,IAAe,IAAA,EAAM,qBAAA;EACrB,QAAA,EAAU,SAAA;AAAA;AAAA,iBAGI,yBAAA,CAAA;EACd,WAAA;EACA;AAAA,GACC,8BAAA,GAAiC,KAAA,CAAM,GAAA,CAAI,OAAA;AAAA,iBAY9B,oBAAA,CAAA,GAAwB,6BAAA"}

package/dist/contexts/index.mjs

@@ -1,3 +1,4 @@
 import { n as RegistryProvider, r as useRegistry, t as RegistryContext } from "../RegistryContext-CscXrsRa.mjs";
 import { n as useScreenRenderer, t as ScreenRendererContext } from "../ScreenRendererContext-DKcdcmiT.mjs";
-export { RegistryContext, RegistryProvider, ScreenRendererContext, useRegistry, useScreenRenderer };
+import { n as useWidgetInteraction, t as WidgetInteractionProvider } from "../WidgetInteractionContext-awLrJeAK.mjs";
+export { RegistryContext, RegistryProvider, ScreenRendererContext, WidgetInteractionProvider, useRegistry, useScreenRenderer, useWidgetInteraction };

package/dist/core/index.d.mts

@@ -1,4 +1,4 @@
-import { a as getFontSizeField, i as getColorField, n as getBorderRadiusField, o as getGapField, r as getButtonSizeField, s as getPaddingField, t as gapValues } from "../fields-4FC6JUNH.mjs";
+import { a as getFontSizeField, i as getColorField, n as getBorderRadiusField, o as getGapField, r as getButtonSizeField, s as getPaddingField, t as gapValues } from "../fields-BGGlw1MW.mjs";
 import React, { ComponentType } from "react";
 import { ShareableItem, TypedWidgetSchema, WidgetSchema } from "@fluid-app/portal-core/types";
 

package/dist/widgets/index.cjs

@@ -10,15 +10,15 @@ const require_LayoutWidget = require("../LayoutWidget-C4-ka0Ge.cjs");
 const require_ContainerWidget = require("../ContainerWidget-rGsakG66.cjs");
 const require_EmbedWidget = require("../EmbedWidget-BENxbwxX.cjs");
 const require_ImageWidget = require("../ImageWidget-B2stGyqB.cjs");
-const require_ListWidget = require("../ListWidget-RHQ2fQXa.cjs");
-const require_MySiteWidget = require("../MySiteWidget-A_cYFgxJ.cjs");
-const require_NestedWidget = require("../NestedWidget-Dbo3dXEi.cjs");
-const require_QuickShareWidget = require("../QuickShareWidget-DWvgEy74.cjs");
-const require_RecentActivityWidget = require("../RecentActivityWidget-wODng8dt.cjs");
-const require_SpacerWidget = require("../SpacerWidget-BFboILmz.cjs");
-const require_TableWidget = require("../TableWidget-iS_DwHOX.cjs");
-const require_ToDoWidget = require("../ToDoWidget-Dvs0GDkx.cjs");
-const require_VideoWidget = require("../VideoWidget-D3Fw1jZE.cjs");
+const require_ListWidget = require("../ListWidget-DPVLRWoB.cjs");
+const require_MySiteWidget = require("../MySiteWidget-1xqN0Bcg.cjs");
+const require_NestedWidget = require("../NestedWidget-DszMmpt7.cjs");
+const require_QuickShareWidget = require("../QuickShareWidget-Dg2OcMYg.cjs");
+const require_RecentActivityWidget = require("../RecentActivityWidget-_3h0KmQP.cjs");
+const require_SpacerWidget = require("../SpacerWidget-BdVf_Yqm.cjs");
+const require_TableWidget = require("../TableWidget-BQNVZUkg.cjs");
+const require_ToDoWidget = require("../ToDoWidget-D5BFKUrZ.cjs");
+const require_VideoWidget = require("../VideoWidget-CqRHfFnI.cjs");
 let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
 //#region src/widgets/index.ts
 const widgetPropertySchemas = {
@@ -31,16 +31,16 @@ const widgetPropertySchemas = {
 	EmbedWidget: () => Promise.resolve().then(() => require("../EmbedWidget-BENxbwxX.cjs")).then((n) => n.EmbedWidget_exports).then((m) => m.embedWidgetPropertySchema),
 	ImageWidget: () => Promise.resolve().then(() => require("../ImageWidget-B2stGyqB.cjs")).then((n) => n.ImageWidget_exports).then((m) => m.imageWidgetPropertySchema),
 	LayoutWidget: () => Promise.resolve().then(() => require("../LayoutWidget-D4haEqTQ.cjs")).then((m) => m.layoutWidgetPropertySchema),
-	ListWidget: () => Promise.resolve().then(() => require("../ListWidget-RHQ2fQXa.cjs")).then((n) => n.ListWidget_exports).then((m) => m.listWidgetPropertySchema),
-	MySiteWidget: () => Promise.resolve().then(() => require("../MySiteWidget-A_cYFgxJ.cjs")).then((n) => n.MySiteWidget_exports).then((m) => m.mySiteWidgetPropertySchema),
-	NestedWidget: () => Promise.resolve().then(() => require("../NestedWidget-Dbo3dXEi.cjs")).then((n) => n.NestedWidget_exports).then((m) => m.nestedWidgetPropertySchema),
-	QuickShareWidget: () => Promise.resolve().then(() => require("../QuickShareWidget-DWvgEy74.cjs")).then((n) => n.QuickShareWidget_exports).then((m) => m.quickShareWidgetPropertySchema),
-	RecentActivityWidget: () => Promise.resolve().then(() => require("../RecentActivityWidget-wODng8dt.cjs")).then((n) => n.RecentActivityWidget_exports).then((m) => m.recentActivityWidgetPropertySchema),
-	SpacerWidget: () => Promise.resolve().then(() => require("../SpacerWidget-BFboILmz.cjs")).then((n) => n.SpacerWidget_exports).then((m) => m.spacerWidgetPropertySchema),
-	TableWidget: () => Promise.resolve().then(() => require("../TableWidget-iS_DwHOX.cjs")).then((n) => n.TableWidget_exports).then((m) => m.tableWidgetPropertySchema),
+	ListWidget: () => Promise.resolve().then(() => require("../ListWidget-C0RDtImi.cjs")).then((m) => m.listWidgetPropertySchema),
+	MySiteWidget: () => Promise.resolve().then(() => require("../MySiteWidget-1xqN0Bcg.cjs")).then((n) => n.MySiteWidget_exports).then((m) => m.mySiteWidgetPropertySchema),
+	NestedWidget: () => Promise.resolve().then(() => require("../NestedWidget-DjZYPLc7.cjs")).then((m) => m.nestedWidgetPropertySchema),
+	QuickShareWidget: () => Promise.resolve().then(() => require("../QuickShareWidget-Dg2OcMYg.cjs")).then((n) => n.QuickShareWidget_exports).then((m) => m.quickShareWidgetPropertySchema),
+	RecentActivityWidget: () => Promise.resolve().then(() => require("../RecentActivityWidget-_3h0KmQP.cjs")).then((n) => n.RecentActivityWidget_exports).then((m) => m.recentActivityWidgetPropertySchema),
+	SpacerWidget: () => Promise.resolve().then(() => require("../SpacerWidget-BdVf_Yqm.cjs")).then((n) => n.SpacerWidget_exports).then((m) => m.spacerWidgetPropertySchema),
+	TableWidget: () => Promise.resolve().then(() => require("../TableWidget-amUotAZN.cjs")).then((m) => m.tableWidgetPropertySchema),
 	TextWidget: () => Promise.resolve().then(() => require("../TextWidget-D6Ug_2Z1.cjs")).then((n) => n.TextWidget_exports).then((m) => m.textWidgetPropertySchema),
-	ToDoWidget: () => Promise.resolve().then(() => require("../ToDoWidget-Dvs0GDkx.cjs")).then((n) => n.ToDoWidget_exports).then((m) => m.toDoWidgetPropertySchema),
-	VideoWidget: () => Promise.resolve().then(() => require("../VideoWidget-D3Fw1jZE.cjs")).then((n) => n.VideoWidget_exports).then((m) => m.videoWidgetPropertySchema)
+	ToDoWidget: () => Promise.resolve().then(() => require("../ToDoWidget-D5BFKUrZ.cjs")).then((n) => n.ToDoWidget_exports).then((m) => m.toDoWidgetPropertySchema),
+	VideoWidget: () => Promise.resolve().then(() => require("../VideoWidget-CqRHfFnI.cjs")).then((n) => n.VideoWidget_exports).then((m) => m.videoWidgetPropertySchema)
 };
 //#endregion
 exports.AlertWidget = require_AlertWidget.AlertWidget;