@fluid-app/portal-sdk 0.1.217 → 0.1.219

package/dist/{NestedWidget-Dw0QHoqw.mjs.map → NestedWidget-CEeQeCq0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NestedWidget-Dw0QHoqw.mjs","names":[],"sources":["../../widgets/src/widgets/NestedWidget.tsx"],"sourcesContent":["import { useRef, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport type {\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n  AlignOptions,\n  GapOptions,\n  BackgroundValue,\n} from \"@fluid-app/portal-core/types\";\nimport {\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  borderWidthClasses,\n  borderColorClasses,\n  getColorField,\n  getFontSizeField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport { type ShareableItem } from \"@fluid-app/portal-core/types\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\n\nconst DEFAULT_SHAREABLES: ShareableItem[] = [];\n\ntype NestedWidgetProps = ComponentProps<\"div\"> & {\n  // Content\n  resource?: ShareableItem;\n  titleEnabled?: boolean;\n  titleText?: string;\n  shareables?: ShareableItem[];\n\n  // Layout\n  gap?: GapOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n  primaryMediaHeight?: string;\n\n  // Title styling\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  titleAlignment?: AlignOptions;\n\n  // Nested media styling\n  nestedTextColor?: ColorOptions;\n  background?: BackgroundValue;\n\n  // Overlay\n  overlayEnabled?: boolean;\n  overlayType?: \"solid\" | \"gradient\";\n  overlayIntensity?: number;\n};\n\nexport function NestedWidget({\n  resource,\n  titleEnabled = true,\n  titleText = \"Featured Collection\",\n  shareables = DEFAULT_SHAREABLES,\n  gap = \"md\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n  primaryMediaHeight = \"400px\",\n  titleFontSize = \"xl\",\n  titleColor = \"background\",\n  titleAlignment = { horizontal: \"left\", vertical: \"bottom\" },\n  nestedTextColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  overlayEnabled = true,\n  overlayType = \"gradient\",\n  overlayIntensity = 50,\n  className,\n  ...props\n}: NestedWidgetProps): React.JSX.Element {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const scrollByAmount = (direction: \"prev\" | \"next\") => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;\n    const firstItem = container.firstElementChild as HTMLElement | null;\n    const itemWidth = firstItem?.offsetWidth ?? 0;\n    const scrollAmount = itemWidth + computedGap;\n\n    container.scrollTo({\n      left:\n        container.scrollLeft +\n        (direction === \"next\" ? scrollAmount : -scrollAmount),\n      behavior: \"smooth\",\n    });\n  };\n\n  // Cap border radius for the primary media container: \"full\" creates a circle that clips\n  // the absolutely-positioned title overlay to the narrow bottom of the circle.\n  const primaryMediaRadius = borderRadius === \"full\" ? \"2xl\" : borderRadius;\n\n  const { onItemClick } = useWidgetInteraction();\n\n  const hasNestedMedia = shareables.length > 0;\n\n  const titleAlignmentClasses = {\n    left: \"text-left\",\n    center: \"text-center\",\n    right: \"text-right\",\n  };\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  return (\n    <div\n      className={`@container flex w-full overflow-hidden p-${padding} rounded-${borderRadius} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} bg-${backgroundColor} ${className}`}\n      {...props}\n      style={{\n        maxHeight: primaryMediaHeight,\n        backgroundImage: backgroundImage,\n      }}\n    >\n      {/* Primary Media Container - Full width on mobile, fixed on desktop */}\n      <div\n        className={`relative @md:flex-none`}\n        style={{\n          width: primaryMediaHeight,\n        }}\n      >\n        {/* Media + overlay clipped to rounded shape — title is a sibling so it isn't clipped */}\n        <div\n          className={`overflow-hidden rounded-${primaryMediaRadius} absolute inset-0`}\n        >\n          <MediaRenderer\n            {...(resource ? getMediaPropsFromShareable(resource) : {})}\n            autoplay\n            loop\n            muted\n          />\n\n          {/* Overlay */}\n          {overlayEnabled && (\n            <div\n              className={`pointer-events-none absolute inset-0 z-10 ${\n                overlayType === \"gradient\"\n                  ? \"bg-gradient-to-t from-black to-transparent\"\n                  : \"bg-black\"\n              }`}\n              style={{\n                opacity:\n                  (Number(String(overlayIntensity).replace(\"%\", \"\")) || 50) /\n                  100,\n              }}\n            />\n          )}\n        </div>\n\n        {/* Title and Mobile Nested Media — outside the overflow-hidden clip */}\n        {((titleEnabled && titleText) || hasNestedMedia) && (\n          <div\n            className={`absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? \"left\"]} p-${padding} ${\n              titleAlignment.vertical === \"top\"\n                ? `top-0 pt-${padding}`\n                : titleAlignment.vertical === \"center\"\n                  ? \"top-1/2 -translate-y-1/2\"\n                  : `bottom-0 pb-${padding}`\n            }`}\n          >\n            {titleEnabled && titleText && (\n              <h2\n                className={`font-header leading-tight font-bold text-${titleColor} text-${titleFontSize === \"md\" ? \"base\" : titleFontSize}`}\n              >\n                {titleText}\n              </h2>\n            )}\n\n            {/* Mobile: Products overlay inside primary media */}\n            {hasNestedMedia && (\n              <div className={`pt-${padding} @md:hidden`}>\n                <div\n                  className={`flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`}\n                >\n                  {shareables.map((shareable) => (\n                    <div\n                      key={shareable.id}\n                      className={`flex shrink-0 flex-col items-center ${onItemClick ? \"cursor-pointer\" : \"\"}`}\n                      {...(onItemClick\n                        ? {\n                            role: \"button\",\n                            tabIndex: 0,\n                            onClick: () => onItemClick(shareable),\n                            onKeyDown: (e: React.KeyboardEvent) => {\n                              if (e.key === \"Enter\" || e.key === \" \") {\n                                e.preventDefault();\n                                onItemClick(shareable);\n                              }\n                            },\n                          }\n                        : {})}\n                    >\n                      <div\n                        className={`aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`}\n                      >\n                        <MediaRenderer\n                          {...getMediaPropsFromShareable(shareable)}\n                        />\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Desktop: Products Container - Single row beside primary media */}\n      {hasNestedMedia && (\n        <div\n          className={`relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`}\n        >\n          <div\n            ref={scrollContainerRef}\n            className={`flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`}\n            style={{ scrollSnapType: \"x mandatory\" }}\n          >\n            {shareables.map((shareable) => (\n              <div\n                key={shareable.id}\n                className={`flex shrink-0 flex-col gap-1 ${onItemClick ? \"cursor-pointer\" : \"\"}`}\n                style={{\n                  width: `calc(${primaryMediaHeight} * 0.75)`,\n                  scrollSnapAlign: \"start\",\n                }}\n                {...(onItemClick\n                  ? {\n                      role: \"button\",\n                      tabIndex: 0,\n                      onClick: () => onItemClick(shareable),\n                      onKeyDown: (e: React.KeyboardEvent) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          onItemClick(shareable);\n                        }\n                      },\n                    }\n                  : {})}\n              >\n                <div\n                  className={`aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`}\n                >\n                  <MediaRenderer {...getMediaPropsFromShareable(shareable)} />\n                </div>\n                <span className={`flex-none text-sm text-${nestedTextColor}`}>\n                  <p className=\"truncate\">{shareable.title || \"\"}</p>\n                  <p className=\"truncate\">\n                    {((shareable.display_price as string) ?? shareable.price) ||\n                      \"\"}\n                  </p>\n                </span>\n              </div>\n            ))}\n          </div>\n\n          {/* Navigation arrows */}\n          <div\n            className={`absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`}\n          >\n            <ScrollArrows\n              onPrevious={() => scrollByAmount(\"prev\")}\n              onNext={() => scrollByAmount(\"next\")}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const nestedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"NestedWidget\",\n  displayName: \"Nested Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"shareables\"],\n  fields: [\n    // Content tab - Resource group\n    {\n      key: \"resource\",\n      label: \"Primary Media\",\n      type: \"resource\",\n      description: \"Select the primary media displayed in the large panel\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    // Content tab - Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed over the primary media\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Main title displayed over the primary media\",\n      defaultValue: \"Featured Collection\",\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      defaultValue: \"background\",\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Styling tab - Design group\n    getHeightField({\n      key: \"primaryMediaHeight\",\n      label: \"Primary Media Height\",\n      description: \"Height of the primary media container\",\n      defaultValue: \"400px\",\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: \"titleAlignment\",\n      label: \"Content Alignment\",\n      type: \"alignment\",\n      description: \"Alignment of the content inside the primary media\",\n      defaultValue: { horizontal: \"left\", vertical: \"bottom\" },\n      options: {\n        horizontalEnabled: true,\n        verticalEnabled: true,\n      },\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      defaultValue: 4,\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding used throughout the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      defaultValue: \"md\",\n      label: \"Border Radius\",\n      key: \"borderRadius\",\n      description: \"Rounded corners for the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Border width for the widget\",\n      defaultValue: \"none\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Border color for the widget\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"overlayEnabled\",\n      label: \"Enable Overlay\",\n      type: \"boolean\",\n      description:\n        \"Add a dark overlay to the primary media for better text readability\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"overlayType\",\n      label: \"Overlay Type\",\n      type: \"buttonGroup\",\n      description: \"Type of overlay effect\",\n      defaultValue: \"gradient\",\n      options: [\n        { label: \"Solid\", value: \"solid\" },\n        { label: \"Gradient\", value: \"gradient\" },\n      ],\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    {\n      key: \"overlayIntensity\",\n      label: \"Overlay Intensity\",\n      type: \"slider\",\n      description: \"Opacity of the overlay (0-100)\",\n      min: 0,\n      max: 100,\n      step: 5,\n      defaultValue: 50,\n      unit: \"%\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    // Styling tab - Nested Media Styling group\n    getGapField({\n      label: \"Gap\",\n      defaultValue: \"md\",\n      key: \"gap\",\n      description: \"Gap between nested media items\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    getColorField({\n      defaultValue: \"foreground\",\n      key: \"nestedTextColor\",\n      label: \"Nested Text Color\",\n      description: \"Color for nested media labels\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    {\n      type: \"background\",\n      defaultValue: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background color for nested media container\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    },\n    // Data tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n  // Per-item configuration schema for custom data sources\n  itemConfigSchema: {\n    description: \"Configure settings for this item\",\n    fields: [\n      {\n        key: \"title\",\n        label: \"Custom Title\",\n        type: \"text\",\n        description: \"Override the item's title for this widget\",\n      },\n    ],\n  },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAM,qBAAsC,EAAE;AAgC9C,SAAgB,aAAa,EAC3B,UACA,eAAe,MACf,YAAY,uBACZ,aAAa,oBACb,MAAM,MACN,UAAU,GACV,eAAe,MACf,cAAc,QACd,cAAc,SACd,qBAAqB,SACrB,gBAAgB,MAChB,aAAa,cACb,iBAAiB;CAAE,YAAY;CAAQ,UAAU;CAAU,EAC3D,kBAAkB,cAClB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,iBAAiB,MACjB,cAAc,YACd,mBAAmB,IACnB,WACA,GAAG,SACoC;CACvC,MAAM,qBAAqB,OAAuB,KAAK;CAEvD,MAAM,kBAAkB,cAA+B;EACrD,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UAAW;EAEhB,MAAM,cAAc,WAAW,iBAAiB,UAAU,CAAC,IAAI,IAAI;EAGnE,MAAM,gBAFY,UAAU,mBACC,eAAe,KACX;AAEjC,YAAU,SAAS;GACjB,MACE,UAAU,cACT,cAAc,SAAS,eAAe,CAAC;GAC1C,UAAU;GACX,CAAC;;CAKJ,MAAM,qBAAqB,iBAAiB,SAAS,QAAQ;CAE7D,MAAM,EAAE,gBAAgB,sBAAsB;CAE9C,MAAM,iBAAiB,WAAW,SAAS;CAE3C,MAAM,wBAAwB;EAC5B,MAAM;EACN,QAAQ;EACR,OAAO;EACR;CAED,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AAEN,QACE,qBAAC,OAAD;EACE,WAAW,4CAA4C,QAAQ,WAAW,aAAa,GAAG,mBAAmB,aAAa,GAAG,gBAAgB,SAAS,mBAAmB,eAAe,GAAG,MAAM,gBAAgB,GAAG;EACpN,GAAI;EACJ,OAAO;GACL,WAAW;GACM;GAClB;YANH,CASE,qBAAC,OAAD;GACE,WAAW;GACX,OAAO,EACL,OAAO,oBACR;aAJH,CAOE,qBAAC,OAAD;IACE,WAAW,2BAA2B,mBAAmB;cAD3D,CAGE,oBAAC,eAAD;KACE,GAAK,WAAW,2BAA2B,SAAS,GAAG,EAAE;KACzD,UAAA;KACA,MAAA;KACA,OAAA;KACA,CAAA,EAGD,kBACC,oBAAC,OAAD;KACE,WAAW,6CACT,gBAAgB,aACZ,+CACA;KAEN,OAAO,EACL,UACG,OAAO,OAAO,iBAAiB,CAAC,QAAQ,KAAK,GAAG,CAAC,IAAI,MACtD,KACH;KACD,CAAA,CAEA;QAGH,gBAAgB,aAAc,mBAC/B,qBAAC,OAAD;IACE,WAAW,wBAAwB,sBAAsB,gBAAgB,cAAc,QAAQ,KAAK,QAAQ,GAC1G,eAAe,aAAa,QACxB,YAAY,YACZ,eAAe,aAAa,WAC1B,6BACA,eAAe;cANzB,CASG,gBAAgB,aACf,oBAAC,MAAD;KACE,WAAW,4CAA4C,WAAW,QAAQ,kBAAkB,OAAO,SAAS;eAE3G;KACE,CAAA,EAIN,kBACC,oBAAC,OAAD;KAAK,WAAW,MAAM,QAAQ;eAC5B,oBAAC,OAAD;MACE,WAAW,4BAA4B,UAAU,KAAK;gBAErD,WAAW,KAAK,cACf,oBAAC,OAAD;OAEE,WAAW,uCAAuC,cAAc,mBAAmB;OACnF,GAAK,cACD;QACE,MAAM;QACN,UAAU;QACV,eAAe,YAAY,UAAU;QACrC,YAAY,MAA2B;AACrC,aAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,gBAAgB;AAClB,sBAAY,UAAU;;;QAG3B,GACD,EAAE;iBAEN,oBAAC,OAAD;QACE,WAAW,2CAA2C;kBAEtD,oBAAC,eAAD,EACE,GAAI,2BAA2B,UAAU,EACzC,CAAA;QACE,CAAA;OACF,EAvBC,UAAU,GAuBX,CACN;MACE,CAAA;KACF,CAAA,CAEJ;MAEJ;MAGL,kBACC,qBAAC,OAAD;GACE,WAAW,+DAA+D;aAD5E,CAGE,oBAAC,OAAD;IACE,KAAK;IACL,WAAW,4CAA4C,UAAU;IACjE,OAAO,EAAE,gBAAgB,eAAe;cAEvC,WAAW,KAAK,cACf,qBAAC,OAAD;KAEE,WAAW,gCAAgC,cAAc,mBAAmB;KAC5E,OAAO;MACL,OAAO,QAAQ,mBAAmB;MAClC,iBAAiB;MAClB;KACD,GAAK,cACD;MACE,MAAM;MACN,UAAU;MACV,eAAe,YAAY,UAAU;MACrC,YAAY,MAA2B;AACrC,WAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,gBAAgB;AAClB,oBAAY,UAAU;;;MAG3B,GACD,EAAE;eAnBR,CAqBE,oBAAC,OAAD;MACE,WAAW,6BAA6B,aAAa;gBAErD,oBAAC,eAAD,EAAe,GAAI,2BAA2B,UAAU,EAAI,CAAA;MACxD,CAAA,EACN,qBAAC,QAAD;MAAM,WAAW,0BAA0B;gBAA3C,CACE,oBAAC,KAAD;OAAG,WAAU;iBAAY,UAAU,SAAS;OAAO,CAAA,EACnD,oBAAC,KAAD;OAAG,WAAU;kBACR,UAAU,iBAA4B,UAAU,UACjD;OACA,CAAA,CACC;QACH;OAhCC,UAAU,GAgCX,CACN;IACE,CAAA,EAGN,oBAAC,OAAD;IACE,WAAW;cAEX,oBAAC,cAAD;KACE,kBAAkB,eAAe,OAAO;KACxC,cAAc,eAAe,OAAO;KACpC,CAAA;IACE,CAAA,CACF;KAEJ;;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAQ,OAAO;EAAQ,CAC9B;CACD,uBAAuB,CAAC,aAAa;CACrC,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,KAAK;GACL,OAAO;GACR;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD,iBAAiB;GACf,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;IAAE,YAAY;IAAQ,UAAU;IAAU;GACxD,SAAS;IACP,mBAAmB;IACnB,iBAAiB;IAClB;GACD,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,gBAAgB;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,qBAAqB;GACnB,cAAc;GACd,OAAO;GACP,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;GACD,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,MAAM;GACN,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED,YAAY;GACV,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ,CACN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACd,CACF;EACF;CACF"}
+{"version":3,"file":"NestedWidget-CEeQeCq0.mjs","names":[],"sources":["../../widgets/src/widgets/NestedWidget.tsx"],"sourcesContent":["import { useRef, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport type {\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n  AlignOptions,\n  GapOptions,\n  BackgroundValue,\n} from \"@fluid-app/portal-core/types\";\nimport {\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  borderWidthClasses,\n  borderColorClasses,\n  getColorField,\n  getFontSizeField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport { type ShareableItem } from \"@fluid-app/portal-core/types\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\n\nconst DEFAULT_SHAREABLES: ShareableItem[] = [];\n\ntype NestedWidgetProps = ComponentProps<\"div\"> & {\n  // Content\n  resource?: ShareableItem;\n  titleEnabled?: boolean;\n  titleText?: string;\n  shareables?: ShareableItem[];\n\n  // Layout\n  gap?: GapOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n  primaryMediaHeight?: string;\n\n  // Title styling\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  titleAlignment?: AlignOptions;\n\n  // Nested media styling\n  nestedTextColor?: ColorOptions;\n  background?: BackgroundValue;\n\n  // Overlay\n  overlayEnabled?: boolean;\n  overlayType?: \"solid\" | \"gradient\";\n  overlayIntensity?: number;\n};\n\nexport function NestedWidget({\n  resource,\n  titleEnabled = true,\n  titleText = \"Featured Collection\",\n  shareables = DEFAULT_SHAREABLES,\n  gap = \"md\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n  primaryMediaHeight = \"400px\",\n  titleFontSize = \"xl\",\n  titleColor = \"background\",\n  titleAlignment = { horizontal: \"left\", vertical: \"bottom\" },\n  nestedTextColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  overlayEnabled = true,\n  overlayType = \"gradient\",\n  overlayIntensity = 50,\n  className,\n  ...props\n}: NestedWidgetProps): React.JSX.Element {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const scrollByAmount = (direction: \"prev\" | \"next\") => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;\n    const firstItem = container.firstElementChild as HTMLElement | null;\n    const itemWidth = firstItem?.offsetWidth ?? 0;\n    const scrollAmount = itemWidth + computedGap;\n\n    container.scrollTo({\n      left:\n        container.scrollLeft +\n        (direction === \"next\" ? scrollAmount : -scrollAmount),\n      behavior: \"smooth\",\n    });\n  };\n\n  // Cap border radius for the primary media container: \"full\" creates a circle that clips\n  // the absolutely-positioned title overlay to the narrow bottom of the circle.\n  const primaryMediaRadius = borderRadius === \"full\" ? \"2xl\" : borderRadius;\n\n  const { onItemClick } = useWidgetInteraction();\n\n  const hasNestedMedia = shareables.length > 0;\n\n  const titleAlignmentClasses = {\n    left: \"text-left\",\n    center: \"text-center\",\n    right: \"text-right\",\n  };\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  return (\n    <div\n      className={`@container flex w-full overflow-hidden p-${padding} rounded-${borderRadius} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} bg-${backgroundColor} ${className}`}\n      {...props}\n      style={{\n        maxHeight: primaryMediaHeight,\n        backgroundImage: backgroundImage,\n      }}\n    >\n      {/* Primary Media Container - Full width on mobile, fixed on desktop */}\n      <div\n        className={`relative @md:flex-none`}\n        style={{\n          width: primaryMediaHeight,\n        }}\n      >\n        {/* Media + overlay clipped to rounded shape — title is a sibling so it isn't clipped */}\n        <div\n          className={`overflow-hidden rounded-${primaryMediaRadius} absolute inset-0`}\n        >\n          <MediaRenderer\n            {...(resource ? getMediaPropsFromShareable(resource) : {})}\n            autoplay\n            loop\n            muted\n          />\n\n          {/* Overlay */}\n          {overlayEnabled && (\n            <div\n              className={`pointer-events-none absolute inset-0 z-10 ${\n                overlayType === \"gradient\"\n                  ? \"bg-gradient-to-t from-black to-transparent\"\n                  : \"bg-black\"\n              }`}\n              style={{\n                opacity:\n                  (Number(String(overlayIntensity).replace(\"%\", \"\")) || 50) /\n                  100,\n              }}\n            />\n          )}\n        </div>\n\n        {/* Title and Mobile Nested Media — outside the overflow-hidden clip */}\n        {((titleEnabled && titleText) || hasNestedMedia) && (\n          <div\n            className={`absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? \"left\"]} p-${padding} ${\n              titleAlignment.vertical === \"top\"\n                ? `top-0 pt-${padding}`\n                : titleAlignment.vertical === \"center\"\n                  ? \"top-1/2 -translate-y-1/2\"\n                  : `bottom-0 pb-${padding}`\n            }`}\n          >\n            {titleEnabled && titleText && (\n              <h2\n                className={`font-header leading-tight font-bold text-${titleColor} text-${titleFontSize === \"md\" ? \"base\" : titleFontSize}`}\n              >\n                {titleText}\n              </h2>\n            )}\n\n            {/* Mobile: Products overlay inside primary media */}\n            {hasNestedMedia && (\n              <div className={`pt-${padding} @md:hidden`}>\n                <div\n                  className={`flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`}\n                >\n                  {shareables.map((shareable) => (\n                    <div\n                      key={shareable.id}\n                      className={`flex shrink-0 flex-col items-center ${onItemClick ? \"cursor-pointer\" : \"\"}`}\n                      {...(onItemClick\n                        ? {\n                            role: \"button\",\n                            tabIndex: 0,\n                            onClick: () => onItemClick(shareable),\n                            onKeyDown: (e: React.KeyboardEvent) => {\n                              if (e.key === \"Enter\" || e.key === \" \") {\n                                e.preventDefault();\n                                onItemClick(shareable);\n                              }\n                            },\n                          }\n                        : {})}\n                    >\n                      <div\n                        className={`aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`}\n                      >\n                        <MediaRenderer\n                          {...getMediaPropsFromShareable(shareable)}\n                        />\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Desktop: Products Container - Single row beside primary media */}\n      {hasNestedMedia && (\n        <div\n          className={`relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`}\n        >\n          <div\n            ref={scrollContainerRef}\n            className={`flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`}\n            style={{ scrollSnapType: \"x mandatory\" }}\n          >\n            {shareables.map((shareable) => (\n              <div\n                key={shareable.id}\n                className={`flex shrink-0 flex-col gap-1 ${onItemClick ? \"cursor-pointer\" : \"\"}`}\n                style={{\n                  width: `calc(${primaryMediaHeight} * 0.75)`,\n                  scrollSnapAlign: \"start\",\n                }}\n                {...(onItemClick\n                  ? {\n                      role: \"button\",\n                      tabIndex: 0,\n                      onClick: () => onItemClick(shareable),\n                      onKeyDown: (e: React.KeyboardEvent) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          onItemClick(shareable);\n                        }\n                      },\n                    }\n                  : {})}\n              >\n                <div\n                  className={`aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`}\n                >\n                  <MediaRenderer {...getMediaPropsFromShareable(shareable)} />\n                </div>\n                <span className={`flex-none text-sm text-${nestedTextColor}`}>\n                  <p className=\"truncate\">{shareable.title || \"\"}</p>\n                  <p className=\"truncate\">\n                    {((shareable.display_price as string) ?? shareable.price) ||\n                      \"\"}\n                  </p>\n                </span>\n              </div>\n            ))}\n          </div>\n\n          {/* Navigation arrows */}\n          <div\n            className={`absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`}\n          >\n            <ScrollArrows\n              onPrevious={() => scrollByAmount(\"prev\")}\n              onNext={() => scrollByAmount(\"next\")}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const nestedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"NestedWidget\",\n  displayName: \"Nested Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"shareables\"],\n  fields: [\n    // Content tab - Resource group\n    {\n      key: \"resource\",\n      label: \"Primary Media\",\n      type: \"resource\",\n      description: \"Select the primary media displayed in the large panel\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    // Content tab - Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed over the primary media\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Main title displayed over the primary media\",\n      defaultValue: \"Featured Collection\",\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      defaultValue: \"background\",\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Styling tab - Design group\n    getHeightField({\n      key: \"primaryMediaHeight\",\n      label: \"Primary Media Height\",\n      description: \"Height of the primary media container\",\n      defaultValue: \"400px\",\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: \"titleAlignment\",\n      label: \"Content Alignment\",\n      type: \"alignment\",\n      description: \"Alignment of the content inside the primary media\",\n      defaultValue: { horizontal: \"left\", vertical: \"bottom\" },\n      options: {\n        horizontalEnabled: true,\n        verticalEnabled: true,\n      },\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      defaultValue: 4,\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding used throughout the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      defaultValue: \"md\",\n      label: \"Border Radius\",\n      key: \"borderRadius\",\n      description: \"Rounded corners for the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Border width for the widget\",\n      defaultValue: \"none\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Border color for the widget\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"overlayEnabled\",\n      label: \"Enable Overlay\",\n      type: \"boolean\",\n      description:\n        \"Add a dark overlay to the primary media for better text readability\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"overlayType\",\n      label: \"Overlay Type\",\n      type: \"buttonGroup\",\n      description: \"Type of overlay effect\",\n      defaultValue: \"gradient\",\n      options: [\n        { label: \"Solid\", value: \"solid\" },\n        { label: \"Gradient\", value: \"gradient\" },\n      ],\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    {\n      key: \"overlayIntensity\",\n      label: \"Overlay Intensity\",\n      type: \"slider\",\n      description: \"Opacity of the overlay (0-100)\",\n      min: 0,\n      max: 100,\n      step: 5,\n      defaultValue: 50,\n      unit: \"%\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    // Styling tab - Nested Media Styling group\n    getGapField({\n      label: \"Gap\",\n      defaultValue: \"md\",\n      key: \"gap\",\n      description: \"Gap between nested media items\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    getColorField({\n      defaultValue: \"foreground\",\n      key: \"nestedTextColor\",\n      label: \"Nested Text Color\",\n      description: \"Color for nested media labels\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    {\n      type: \"background\",\n      defaultValue: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background color for nested media container\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    },\n    // Data tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n  // Per-item configuration schema for custom data sources\n  itemConfigSchema: {\n    description: \"Configure settings for this item\",\n    fields: [\n      {\n        key: \"title\",\n        label: \"Custom Title\",\n        type: \"text\",\n        description: \"Override the item's title for this widget\",\n      },\n    ],\n  },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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ACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;IAAE,YAAY;IAAQ,UAAU;IAAU;GACxD,SAAS;IACP,mBAAmB;IACnB,iBAAiB;IAClB;GACD,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,gBAAgB;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,qBAAqB;GACnB,cAAc;GACd,OAAO;GACP,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;GACD,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,MAAM;GACN,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED,YAAY;GACV,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ,CACN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACd,CACF;EACF;CACF"}

package/dist/{NestedWidget--suTLM6l.cjs → NestedWidget-D4amXykk.cjs}

@@ -3,6 +3,6 @@ require("./WidgetInteractionContext-Bd1hEEV2.cjs");
 require("./registries-CpUM406S.cjs");
 require("./fields-C8gY9GlT.cjs");
 require("./MediaRenderer-D4HnIAbN.cjs");
-require("./scroll-arrows-DVwMDTt3.cjs");
-const require_NestedWidget = require("./NestedWidget-ChAWwsRP.cjs");
+require("./scroll-arrows-i0E2N-ct.cjs");
+const require_NestedWidget = require("./NestedWidget-BjT-UrSi.cjs");
 exports.nestedWidgetPropertySchema = require_NestedWidget.nestedWidgetPropertySchema;

package/dist/{PortalContentApiProvider-RXBp8FNj.cjs → PortalContentApiProvider-DXnplIOD.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
-const require_portal_tenant_content = require("./portal_tenant_content-0zpnjBot.cjs");
+const require_portal_tenant_content = require("./portal_tenant_content-BvYxmADB.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-CVv-4rQ9.cjs");
 const require_src = require("./src-aItPhUAR.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-BXgWydjB.cjs");
@@ -288,6 +288,25 @@ const useUpdatePlaylistMutation = (options) => {
 		}
 	});
 };
+const useReorderPlaylistItemsMutation = (options) => {
+	const api = useShareablesApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ playlistId, data }) => {
+			if (!api.playlists.reorderPlaylistItems) return Promise.resolve();
+			return api.playlists.reorderPlaylistItems(playlistId, data);
+		},
+		onSuccess: (_, { playlistId }) => {
+			if (api.playlists.reorderPlaylistItems) queryClient.invalidateQueries({ queryKey: shareablesKeys.playlists.detail(playlistId) });
+			options?.onSuccess?.(playlistId);
+		},
+		onError: (error, { playlistId }) => {
+			if (isCancellationError(error)) return;
+			console.error("Error reordering playlist items:", error);
+			options?.onError?.(error, playlistId);
+		}
+	});
+};
 //#endregion
 //#region ../../shareables/ui/src/context.tsx
 const MISSING_PROVIDER = Symbol("missing-shareables-provider");
@@ -578,6 +597,83 @@ function ShareableListLayout({ filters, children, isLoading, error, errorMessage
 	});
 }
 //#endregion
+//#region ../../shareables/ui/src/components/shared/ShareableListRow.tsx
+/**
+* Container className for a list-view rendering of shareables. Pairs with
+* `ShareableListRow` and mirrors `SHAREABLE_GRID_CLASS` for symmetry.
+*/
+const SHAREABLE_LIST_CLASS = "divide-border divide-y rounded-lg border";
+/**
+* Single row in a shareables list view. The row body (thumbnail + title) is
+* a `<button>` for keyboard/click navigation; `leading` and `trailing` slots
+* are siblings so their interactive elements don't nest inside the body
+* button. Hover styling applies to the entire row container.
+*/
+function ShareableListRow({ imageUrl, imageAlt, title, subtitle, onClick, leading, trailing }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "hover:bg-muted flex items-center gap-3 px-4 py-3 transition-colors",
+		children: [
+			leading,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick,
+				className: "flex min-w-0 flex-1 items-center gap-4 text-left",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
+					children: imageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: imageUrl,
+						alt: imageAlt ?? title,
+						className: "h-full w-full object-cover"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-full w-full" })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-foreground truncate text-sm font-medium",
+						children: title || "Untitled"
+					}), subtitle != null && subtitle !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground flex items-center gap-1.5 text-xs",
+						children: subtitle
+					})]
+				})]
+			}),
+			trailing
+		]
+	});
+}
+//#endregion
+//#region ../../shareables/ui/src/components/shared/ViewModeToggle.tsx
+/**
+* Segmented list/grid toggle used in the filter bar of every shareable
+* listing screen. Stateless — callers own the `viewMode` state.
+*/
+function ViewModeToggle({ value, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+			active: value === "list",
+			label: "List view",
+			onClick: () => onChange("list"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+			active: value === "grid",
+			label: "Grid view",
+			onClick: () => onChange("grid"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
+		})]
+	});
+}
+function ToggleButton({ active, label, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		title: label,
+		"aria-label": label,
+		"aria-pressed": active,
+		className: require_src.cn("flex h-8 w-8 items-center justify-center rounded-md transition-all", active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/ProductsScreen.tsx
 const PAGE_SIZE$4 = 24;
 const SORT_OPTIONS$1 = [
@@ -608,6 +704,7 @@ const SORT_OPTIONS$1 = [
 ];
 function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNavigate }) {
 	const client = useShareablesClient();
+	const { navigate } = useShareablesUI();
 	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
 		className: "text-lg",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
@@ -618,6 +715,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("created_at_desc");
+	const [viewMode, setViewMode] = (0, react.useState)("grid");
 	const observerTarget = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const timer = setTimeout(() => {
@@ -705,9 +803,9 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 		errorMessage: "Failed to load products. Please try again.",
 		isEmpty: products.length === 0,
 		emptyMessage: debouncedSearch ? "No products match your search." : "No products available.",
-		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex justify-end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-end gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "w-full max-w-sm",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
 					searchValue: searchTerm,
@@ -717,14 +815,18 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 					sortValue,
 					onSortChange: setSortValue
 				})
-			})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		}),
+		loadingFilterShape: "search-view",
 		footer: isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-center py-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
 		}),
 		sentinelRef: observerTarget,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareProductCard, {
 				product: {
@@ -734,6 +836,14 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 				},
 				mediaCount: product.media_count
 			}, product.id))
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_LIST_CLASS,
+			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+				imageUrl: product.image_url,
+				title: product.title,
+				subtitle: product.media_count != null ? `${product.media_count} assets` : void 0,
+				onClick: () => navigate(`product/${product.id}`)
+			}, product.id))
 		})
 	});
 }
@@ -1703,21 +1813,9 @@ function MediaListingScreen({ onNavigate }) {
 						}), kindFilter === opt.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "text-muted-foreground size-4" })]
 					}, opt.value))
 				})] }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => setViewMode("list"),
-						className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-						title: "List view",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => setViewMode("grid"),
-						className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-						title: "Grid view",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
-					})]
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+					value: viewMode,
+					onChange: setViewMode
 				})
 			]
 		})]
@@ -1787,37 +1885,20 @@ function MediaListingScreen({ onNavigate }) {
 				}, item.id);
 			})
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "divide-border divide-y rounded-lg border",
+			className: SHAREABLE_LIST_CLASS,
 			children: filteredItems.map((item) => {
 				const canEdit = !readOnly && item.owner_type === "user";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "hover:bg-muted flex items-center gap-4 px-4 py-3 transition-colors",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: () => navigate(`media/${item.id}`),
-						className: "flex min-w-0 flex-1 items-center gap-4 text-left",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
-							children: item.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-								src: item.image_url,
-								alt: item.title ?? "",
-								className: "h-full w-full object-cover"
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-full w-full" })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-foreground truncate text-sm font-medium",
-								children: item.title ?? "Untitled"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "text-muted-foreground flex items-center gap-1.5 text-xs",
-								children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
-									variant: "secondary",
-									className: "px-1.5 py-0 text-[10px] leading-4",
-									children: "My Media"
-								})]
-							})]
-						})]
-					}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })]
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+					imageUrl: item.image_url,
+					imageAlt: item.title ?? "",
+					title: item.title ?? "Untitled",
+					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+						variant: "secondary",
+						className: "px-1.5 py-0 text-[10px] leading-4",
+						children: "My Media"
+					})] }),
+					onClick: () => navigate(`media/${item.id}`),
+					trailing: canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
 				}, item.id);
 			})
 		})
@@ -8936,6 +9017,7 @@ function PlaylistsListingScreen(_props) {
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("title");
 	const [ownerFilter, setOwnerFilter] = (0, react.useState)("all");
+	const [viewMode, setViewMode] = (0, react.useState)("grid");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
 	const [pendingDeleteId, setPendingDeleteId] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
@@ -9106,33 +9188,39 @@ function PlaylistsListingScreen(_props) {
 			value: ownerFilter,
 			onValueChange: setOwnerFilter,
 			myLabel: "My Playlists"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "ml-auto w-full max-w-sm",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-				searchValue: searchTerm,
-				onSearchChange: setSearchTerm,
-				placeholder: "Search playlists...",
-				sortOptions: [
-					{
-						label: "Name (A-Z)",
-						value: "title"
-					},
-					{
-						label: "Name (Z-A)",
-						value: "-title"
-					},
-					{
-						label: "Date Created (Newest)",
-						value: "-created_at"
-					},
-					{
-						label: "Date Created (Oldest)",
-						value: "created_at"
-					}
-				],
-				sortValue,
-				onSortChange: setSortValue
-			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ml-auto flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full max-w-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+					searchValue: searchTerm,
+					onSearchChange: setSearchTerm,
+					placeholder: "Search playlists...",
+					sortOptions: [
+						{
+							label: "Name (A-Z)",
+							value: "title"
+						},
+						{
+							label: "Name (Z-A)",
+							value: "-title"
+						},
+						{
+							label: "Date Created (Newest)",
+							value: "-created_at"
+						},
+						{
+							label: "Date Created (Oldest)",
+							value: "created_at"
+						}
+					],
+					sortValue,
+					onSortChange: setSortValue
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		})]
 	});
 	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9154,8 +9242,8 @@ function PlaylistsListingScreen(_props) {
 		}),
 		footer,
 		sentinelRef: observerTarget,
-		loadingFilterShape: "search-action",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		loadingFilterShape: "search-view",
+		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: GRID_CLASS,
 			children: filteredPlaylists.map((playlist) => {
 				const firstItem = playlist.items?.[0];
@@ -9177,6 +9265,61 @@ function PlaylistsListingScreen(_props) {
 					onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
 				}, playlist.id);
 			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_LIST_CLASS,
+			children: filteredPlaylists.map((playlist) => {
+				const firstItem = playlist.items?.[0];
+				const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
+				const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
+				const canEdit = !readOnly && playlist.user_id === user?.id;
+				const isSelected = selectedIds.has(playlist.id);
+				const title = playlist.title || "Untitled Playlist";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+					imageUrl,
+					title,
+					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Badge, {
+						variant: "secondary",
+						className: "px-1.5 py-0 text-[10px] leading-4",
+						children: [
+							itemCount,
+							" ",
+							itemCount === 1 ? "item" : "items"
+						]
+					}),
+					onClick: () => navigate(`playlists/${playlist.id}`),
+					leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Checkbox, {
+						checked: isSelected,
+						onCheckedChange: (checked) => handleToggleSelection(playlist.id, checked === true),
+						"aria-label": `Select ${title}`
+					}),
+					trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onToggleFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => handleFavorite(playlist.id),
+						"aria-label": playlist.is_favorited ? "Unfavorite" : "Favorite",
+						className: "hover:bg-muted-foreground/10 flex h-8 w-8 items-center justify-center rounded-md transition-colors",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heart, { className: require_src.cn("h-4 w-4 transition-colors", playlist.is_favorited ? "fill-destructive text-destructive" : "text-muted-foreground") })
+					}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 w-8 p-0",
+							"aria-label": "Playlist actions",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+						align: "end",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+							onClick: () => handleEdit(playlist.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-2 h-4 w-4" }), "Edit"]
+						}), onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+							variant: "destructive",
+							onClick: () => setPendingDeleteId(playlist.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+						})] })]
+					})] })] })
+				}, playlist.id);
+			})
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
 		open: pendingDeleteId !== null,
@@ -10065,6 +10208,7 @@ function SortableTable({ items, setItems, onDeleteItem, isDeletePending, enableR
 }
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/form/PlaylistItemsSection.tsx
+const REORDER_DEBOUNCE_MS = 500;
 const PLAYLIST_CONTENT_TYPES = new Set([
 	"Medium",
 	"Page",
@@ -10134,9 +10278,53 @@ function PlaylistItemsSection({ playlistId }) {
 			});
 		}
 	});
+	const reorderItemsMutation = useReorderPlaylistItemsMutation();
+	const reorderTimerRef = (0, react.useRef)(null);
+	const reorderRollbackRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
+	}, []);
+	const canPersistReorder = !!api.playlists.reorderPlaylistItems;
 	const mergeAndOrder = (0, react.useCallback)((reorderedContent) => {
-		updateItems(computeOrderedItems([...reorderedContent, ...tailItems]));
-	}, [tailItems, updateItems]);
+		const ordered = computeOrderedItems([...reorderedContent, ...tailItems]);
+		if (playlistId && canPersistReorder && reorderTimerRef.current === null && reorderRollbackRef.current === null) reorderRollbackRef.current = tableItems;
+		updateItems(ordered);
+		if (!playlistId || !canPersistReorder) return;
+		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
+		reorderTimerRef.current = setTimeout(() => {
+			reorderTimerRef.current = null;
+			const rollback = reorderRollbackRef.current;
+			reorderItemsMutation.mutate({
+				playlistId,
+				data: { items: ordered.filter((item) => Number.isInteger(item.id) && typeof item.order === "number").map((item) => ({
+					id: item.id,
+					order: item.order
+				})) }
+			}, {
+				onSuccess: () => {
+					if (reorderTimerRef.current === null) reorderRollbackRef.current = null;
+					else reorderRollbackRef.current = ordered;
+				},
+				onError: (error) => {
+					if (rollback) updateItems(rollback);
+					reorderRollbackRef.current = null;
+					showToast({
+						title: "Failed to save new item order",
+						type: "error",
+						error
+					});
+				}
+			});
+		}, REORDER_DEBOUNCE_MS);
+	}, [
+		tailItems,
+		tableItems,
+		updateItems,
+		playlistId,
+		canPersistReorder,
+		reorderItemsMutation.mutate,
+		showToast
+	]);
 	const handleDeleteItem = (itemId) => {
 		removeItem(itemId);
 		if (playlistId) removeItemMutation.mutate({
@@ -11490,6 +11678,9 @@ function createPlaylistsAdapter(client) {
 				items: [],
 				items_count: 0
 			};
+		},
+		reorderPlaylistItems: async (playlistId, data) => {
+			await require_portal_tenant_content.playlists_items_reorder(client, playlistId, { items: data.items });
 		}
 	};
 }
@@ -11905,4 +12096,4 @@ Object.defineProperty(exports, "usePortalContentContext", {
 	}
 });
 
-//# sourceMappingURL=PortalContentApiProvider-RXBp8FNj.cjs.map
+//# sourceMappingURL=PortalContentApiProvider-DXnplIOD.cjs.map