@ohif/app 3.9.0-beta.87 → 3.9.0-beta.88

package/dist/{app.bundle.a2882c170bed21574901.js → app.bundle.ae11954164c4a8113eba.js}

@@ -5336,8 +5336,8 @@ Compose.propTypes = {
 };
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var ui_src = __webpack_require__(50395);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2440 modules
-var ui_next_src = __webpack_require__(45185);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
+var ui_next_src = __webpack_require__(49732);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(52490);
 // EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
@@ -6262,8 +6262,8 @@ function WorkList({
     };
   });
   const hasStudies = numOfStudies > 0;
-  const versionNumber = "3.9.0-beta.87";
-  const commitHash = "365d824b98e03b87db294878abde6823abdcf409";
+  const versionNumber = "3.9.0-beta.88";
+  const commitHash = "7f17d5d733b02af098c450bcc776bfa36551c782";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -13313,7 +13313,7 @@ const detectionOptions = {
   }
 });
 ;// CONCATENATED MODULE: ../../i18n/package.json
-const package_namespaceObject = JSON.parse('{"i8":"3.9.0-beta.86"}');
+const package_namespaceObject = JSON.parse('{"i8":"3.9.0-beta.87"}');
 ;// CONCATENATED MODULE: ../../i18n/src/utils.js
 const languagesMap = {
   ar: 'Arabic',
@@ -25958,8 +25958,8 @@ Input.propTypes = {
 ;// CONCATENATED MODULE: ../../ui/src/components/Input/index.js
 
 /* harmony default export */ const components_Input = (Input_Input);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2440 modules
-var ui_next_src = __webpack_require__(45185);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
+var ui_next_src = __webpack_require__(49732);
 ;// CONCATENATED MODULE: ../../ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
 
 
@@ -76031,7 +76031,7 @@ function uuidv4() {
 
 /***/ }),
 
-/***/ 45185:
+/***/ 49732:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -191282,7 +191282,7 @@ var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
 ]);
 var useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
 var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
-var Tabs = react.forwardRef(
+var dist_Tabs = react.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeTabs,
@@ -191323,9 +191323,9 @@ var Tabs = react.forwardRef(
     );
   }
 );
-Tabs.displayName = TABS_NAME;
+dist_Tabs.displayName = TABS_NAME;
 var TAB_LIST_NAME = "TabsList";
-var TabsList = react.forwardRef(
+var dist_TabsList = react.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTabs, loop = true, ...listProps } = props;
     const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
@@ -191351,9 +191351,9 @@ var TabsList = react.forwardRef(
     );
   }
 );
-TabsList.displayName = TAB_LIST_NAME;
+dist_TabsList.displayName = TAB_LIST_NAME;
 var dist_TRIGGER_NAME = "TabsTrigger";
-var TabsTrigger = react.forwardRef(
+var dist_TabsTrigger = react.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
     const context = useTabsContext(dist_TRIGGER_NAME, __scopeTabs);
@@ -191403,9 +191403,9 @@ var TabsTrigger = react.forwardRef(
     );
   }
 );
-TabsTrigger.displayName = dist_TRIGGER_NAME;
+dist_TabsTrigger.displayName = dist_TRIGGER_NAME;
 var react_tabs_dist_CONTENT_NAME = "TabsContent";
-var TabsContent = react.forwardRef(
+var dist_TabsContent = react.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
     const context = useTabsContext(react_tabs_dist_CONTENT_NAME, __scopeTabs);
@@ -191438,17 +191438,17 @@ var TabsContent = react.forwardRef(
     ) });
   }
 );
-TabsContent.displayName = react_tabs_dist_CONTENT_NAME;
+dist_TabsContent.displayName = react_tabs_dist_CONTENT_NAME;
 function makeTriggerId(baseId, value) {
   return `${baseId}-trigger-${value}`;
 }
 function makeContentId(baseId, value) {
   return `${baseId}-content-${value}`;
 }
-var dist_Root2 = Tabs;
-var dist_List = TabsList;
-var dist_Trigger = TabsTrigger;
-var react_tabs_dist_Content = TabsContent;
+var dist_Root2 = dist_Tabs;
+var dist_List = dist_TabsList;
+var dist_Trigger = dist_TabsTrigger;
+var react_tabs_dist_Content = dist_TabsContent;
 
 //# sourceMappingURL=index.mjs.map
 
@@ -191801,7 +191801,7 @@ ToggleGroupItem.displayName = $6c1fd9e6a8969628$export$6d08773d2e66f8f2.displayN
 function Input_extends() { return Input_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Input_extends.apply(null, arguments); }
 
 
-const Input = /*#__PURE__*/react.forwardRef(({
+const Input_Input = /*#__PURE__*/react.forwardRef(({
   className,
   type,
   ...props
@@ -191812,7 +191812,7 @@ const Input = /*#__PURE__*/react.forwardRef(({
     ref: ref
   }, props));
 });
-Input.displayName = 'Input';
+Input_Input.displayName = 'Input';
 
 ;// CONCATENATED MODULE: ../../ui-next/src/components/Input/index.tsx
 
@@ -191825,7 +191825,7 @@ Input.displayName = 'Input';
 
 
 var react_label_dist_NAME = "Label";
-var Label = react.forwardRef((props, forwardedRef) => {
+var dist_Label = react.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ (0,jsx_runtime.jsx)(
     Primitive.label,
     {
@@ -191840,8 +191840,8 @@ var Label = react.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Label.displayName = react_label_dist_NAME;
-var react_label_dist_Root = Label;
+dist_Label.displayName = react_label_dist_NAME;
+var react_label_dist_Root = dist_Label;
 
 //# sourceMappingURL=index.mjs.map
 
@@ -191896,7 +191896,7 @@ function usePrevious(value) {
 var SWITCH_NAME = "Switch";
 var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
 var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-var Switch = react.forwardRef(
+var dist_Switch = react.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSwitch,
@@ -191957,7 +191957,7 @@ var Switch = react.forwardRef(
     ] });
   }
 );
-Switch.displayName = SWITCH_NAME;
+dist_Switch.displayName = SWITCH_NAME;
 var THUMB_NAME = "SwitchThumb";
 var SwitchThumb = react.forwardRef(
   (props, forwardedRef) => {
@@ -192014,7 +192014,7 @@ var BubbleInput = (props) => {
 function dist_getState(checked) {
   return checked ? "checked" : "unchecked";
 }
-var react_switch_dist_Root = Switch;
+var react_switch_dist_Root = dist_Switch;
 var Thumb = SwitchThumb;
 
 //# sourceMappingURL=index.mjs.map
@@ -192256,7 +192256,7 @@ var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
   createCollectionScope
 ]);
 var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
-var Slider = react.forwardRef(
+var dist_Slider = react.forwardRef(
   (props, forwardedRef) => {
     const {
       name,
@@ -192365,7 +192365,7 @@ var Slider = react.forwardRef(
     );
   }
 );
-Slider.displayName = SLIDER_NAME;
+dist_Slider.displayName = SLIDER_NAME;
 var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
   startEdge: "left",
   endEdge: "right",
@@ -192761,7 +192761,7 @@ function roundValue(value, decimalCount) {
   const rounder = Math.pow(10, decimalCount);
   return Math.round(value * rounder) / rounder;
 }
-var react_slider_dist_Root = Slider;
+var react_slider_dist_Root = dist_Slider;
 var Track = SliderTrack;
 var Range = SliderRange;
 var dist_Thumb = SliderThumb;
@@ -192820,7 +192820,7 @@ function dist_useStateMachine(initialState, machine) {
 var SCROLL_AREA_NAME = "ScrollArea";
 var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
 var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
-var ScrollArea = react.forwardRef(
+var dist_ScrollArea = react.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeScrollArea,
@@ -192881,7 +192881,7 @@ var ScrollArea = react.forwardRef(
     );
   }
 );
-ScrollArea.displayName = SCROLL_AREA_NAME;
+dist_ScrollArea.displayName = SCROLL_AREA_NAME;
 var VIEWPORT_NAME = "ScrollAreaViewport";
 var ScrollAreaViewport = react.forwardRef(
   (props, forwardedRef) => {
@@ -193512,7 +193512,7 @@ function useResizeObserver(element, onResize) {
     }
   }, [element, handleResize]);
 }
-var react_scroll_area_dist_Root = ScrollArea;
+var react_scroll_area_dist_Root = dist_ScrollArea;
 var Viewport = ScrollAreaViewport;
 var Scrollbar = (/* unused pure expression or super */ null && (ScrollAreaScrollbar));
 var react_scroll_area_dist_Thumb = (/* unused pure expression or super */ null && (ScrollAreaThumb));
@@ -196924,6 +196924,720 @@ function Toolbox({
 
 
 
+;// CONCATENATED MODULE: ../../ui-next/src/_prototypes/PanelSplit/ItemList.tsx
+
+ // Updated import path
+
+/**
+ * ItemList Component
+ *
+ * Displays a list of items that can be selected, toggled for visibility,
+ * and added (changing availability).
+ *
+ * @param items - Array of items to display.
+ * @param onSelectItem - Callback when an item is selected.
+ * @param selectedItem - The currently selected item.
+ * @param onToggleVisibility - Callback when an item's visibility is toggled.
+ * @param onAddItem - Callback when an item's availability is changed to 'loaded'.
+ */
+const ItemList_ItemList = ({
+  items,
+  onSelectItem,
+  selectedItem,
+  onToggleVisibility,
+  onAddItem
+}) => {
+  return /*#__PURE__*/React.createElement("ul", {
+    "aria-label": "Item List",
+    className: "space-y-1"
+  }, items.map(item => /*#__PURE__*/React.createElement("li", {
+    key: item.id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, item.availability === 'available' && /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    size: "icon",
+    onClick: e => {
+      e.stopPropagation(); // Prevent parent onClick
+      onAddItem(item.id);
+    },
+    "aria-label": `Add ${item.name}`,
+    className: "ml-1 mr-1"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 5V19",
+    stroke: "#348CFD",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5 12H19",
+    stroke: "#348CFD",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), /*#__PURE__*/React.createElement("button", {
+    onClick: () => onSelectItem(item),
+    className: `text-foreground flex h-7 w-full flex-grow cursor-pointer items-center justify-between rounded p-1 text-sm ${item.id === selectedItem?.id ? 'bg-primary/20' : 'bg-muted hover:bg-primary/30'} focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1`,
+    "aria-pressed": item.id === selectedItem?.id
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ml-1"
+  }, item.name), item.availability === 'available' && /*#__PURE__*/React.createElement("span", {
+    className: "text-muted-foreground text-xs"
+  }, "Available"), item.availability === 'loaded' && /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    size: "icon",
+    onClick: e => {
+      e.stopPropagation(); // Prevent parent onClick
+      onToggleVisibility(item.id);
+    },
+    "aria-label": item.visibility === 'Visible' ? `Hide ${item.name}` : `Show ${item.name}`
+  }, item.visibility === 'Visible' ?
+  /*#__PURE__*/
+  // SVG Icon for "Visible"
+  React.createElement("svg", {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "24",
+    height: "24"
+  }), /*#__PURE__*/React.createElement("circle", {
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    cx: "12.4986195",
+    cy: "11.8041442",
+    r: "2.58684689"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.906611,11.5617197 C20.0470387,10.5861089 16.6094888,7 12.4986195,7 C8.38775024,7 4.95020027,10.5861089 4.090628,11.5617197 C3.96979067,11.7007491 3.96979067,11.9075393 4.090628,12.0465687 C4.95020027,13.0221796 8.38775024,16.6082885 12.4986195,16.6082885 C16.6094888,16.6082885 20.0470387,13.0221796 20.906611,12.0465687 C21.0274483,11.9075393 21.0274483,11.7007491 20.906611,11.5617197 Z",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))) :
+  /*#__PURE__*/
+  // SVG Icon for "Hidden"
+  React.createElement("svg", {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.0567826,8.96286957 C19.1471229,9.75269568 20.1356859,10.674229 21,11.7065217 C21,11.7065217 17.1949565,16.5108696 12.5,16.5108696 C11.7479876,16.5066962 11.0007435,16.3911225 10.2826087,16.167913",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.93286957,14.4413043 C5.84666081,13.6535964 4.86162018,12.7350857 4,11.7065217 C4,11.7065217 7.80504348,6.90217391 12.5,6.90217391 C13.1235541,6.90480509 13.7443251,6.98550531 14.3478261,7.1423913",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.54347826,11.7065217 C9.54347826,10.0736799 10.8671581,8.75 12.5,8.75",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.4565217,11.7065217 C15.4565217,13.3393636 14.1328419,14.6630435 12.5,14.6630435",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "19.7065217",
+    y1: "4.5",
+    x2: "5.29347826",
+    y2: "18.9130435",
+    stroke: "#348CFD",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))))))));
+};
+/* harmony default export */ const PanelSplit_ItemList = ((/* unused pure expression or super */ null && (ItemList_ItemList)));
+;// CONCATENATED MODULE: ../../ui-next/src/_prototypes/PanelSplit/PropertiesPanel.tsx
+
+
+
+
+
+
+
+/**
+ * PropertiesPanel Component
+ *
+ * Displays and manages the properties of the selected item.
+ * Renders different content based on the item's availability state.
+ *
+ * @param selectedItem - The currently selected item.
+ * @param onUpdateProperty - Callback to handle property updates.
+ * @param onAddItem - Callback to handle adding the item.
+ */
+const PropertiesPanel_PropertiesPanel = ({
+  selectedItem,
+  onUpdateProperty,
+  onAddItem
+}) => {
+  if (!selectedItem) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-gray-500"
+    }, /*#__PURE__*/React.createElement("p", null, "No item selected."));
+  }
+  if (selectedItem.availability === 'available') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col items-center p-1.5 text-sm"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: () => onAddItem(selectedItem.id),
+      className: "mb-4 mt-2",
+      variant: "default"
+    }, "Add this item"), /*#__PURE__*/React.createElement("div", {
+      className: "border-primary/30 mb-2 w-full border-b"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-foreground w-full text-left"
+    }, "Series: ", /*#__PURE__*/React.createElement("span", {
+      className: "text-muted-foreground"
+    }, selectedItem.series)));
+  }
+  if (selectedItem.availability === 'loaded') {
+    /**
+     * Handles changes to a property's value.
+     *
+     * @param property - The property being updated.
+     * @param newValue - The new value for the property.
+     */
+    const handleChange = (property, newValue) => {
+      console.log(`Updating property '${property.key}' to`, newValue); // Debug log
+      onUpdateProperty(selectedItem.id, property.key, newValue);
+    };
+
+    // Determine if the selected item is the master
+    const isMaster = selectedItem.controlsAll;
+
+    /**
+     * Handles changes to the display mode via Tabs.
+     *
+     * @param newDisplayMode - The new display mode selected.
+     */
+    const handleDisplayModeChange = newDisplayMode => {
+      console.log(`Display mode changed to`, newDisplayMode); // Debug log
+      onUpdateProperty(selectedItem.id, 'displayMode', newDisplayMode);
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-1.5 text-sm"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "items-top mb-2.5 flex justify-between"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-foreground text-sm font-semibold"
+    }, "Properties ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+      className: "text-muted-foreground font-normal"
+    }, selectedItem.name)), /*#__PURE__*/React.createElement(Tabs, {
+      value: selectedItem.displayMode,
+      onValueChange: handleDisplayModeChange,
+      className: "ml-auto"
+    }, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsTrigger, {
+      value: "Fill & Outline"
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "18px",
+      height: "18px",
+      viewBox: "0 0 18 18"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "view-outline-fill",
+      stroke: "none",
+      strokeWidth: "1",
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "Group-13"
+    }, /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      x: "0",
+      y: "0",
+      width: "18",
+      height: "18"
+    }), /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      stroke: "#348CFD",
+      x: "1.5",
+      y: "1.5",
+      width: "15",
+      height: "15",
+      rx: "1"
+    }), /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      fill: "#348CFD",
+      x: "3.5",
+      y: "3.5",
+      width: "11",
+      height: "11",
+      rx: "1"
+    }))))), /*#__PURE__*/React.createElement(TabsTrigger, {
+      value: "Outline Only"
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "18px",
+      height: "18px",
+      viewBox: "0 0 18 18"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "view-outline",
+      stroke: "none",
+      strokeWidth: "1",
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "Group-13"
+    }, /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      x: "0",
+      y: "0",
+      width: "18",
+      height: "18"
+    }), /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      stroke: "#348CFD",
+      x: "1.5",
+      y: "1.5",
+      width: "15",
+      height: "15",
+      rx: "1"
+    }))))), /*#__PURE__*/React.createElement(TabsTrigger, {
+      value: "Fill Only"
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "18px",
+      height: "18px",
+      viewBox: "0 0 18 18"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "view-fill",
+      stroke: "none",
+      strokeWidth: "1",
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("g", {
+      id: "Group-13"
+    }, /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      x: "0",
+      y: "0",
+      width: "18",
+      height: "18"
+    }), /*#__PURE__*/React.createElement("rect", {
+      id: "Rectangle",
+      fill: "#348CFD",
+      x: "2",
+      y: "2",
+      width: "14",
+      height: "14",
+      rx: "1"
+    })))))), /*#__PURE__*/React.createElement("div", {
+      className: "mt-0"
+    }, /*#__PURE__*/React.createElement(TabsContent, {
+      value: "Fill & Outline"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-muted-foreground text-xxs text-center"
+    }, "Fill & Outline")), /*#__PURE__*/React.createElement(TabsContent, {
+      value: "Outline Only"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-muted-foreground text-xxs text-center"
+    }, "Outline Only")), /*#__PURE__*/React.createElement(TabsContent, {
+      value: "Fill Only"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-muted-foreground text-xxs text-center"
+    }, "Fill Only"))))), /*#__PURE__*/React.createElement("div", {
+      className: "mb-3 space-y-3"
+    }, selectedItem.properties.map(prop => /*#__PURE__*/React.createElement("div", {
+      key: prop.key,
+      className: "flex items-center justify-between space-x-4"
+    }, /*#__PURE__*/React.createElement(Label, {
+      htmlFor: prop.key,
+      className: "flex-grow whitespace-nowrap"
+    }, prop.label), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center space-x-3"
+    }, renderPropertyInput(prop, handleChange))))), !isMaster && /*#__PURE__*/React.createElement("div", {
+      className: "text-foreground mb-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "border-primary/30 mb-2 w-full border-b"
+    }), "Series: ", /*#__PURE__*/React.createElement("span", {
+      className: "text-muted-foreground"
+    }, selectedItem.series)));
+  }
+
+  // For other availability states, you can add additional conditions if needed
+  return /*#__PURE__*/React.createElement("div", {
+    className: "text-gray-500"
+  }, /*#__PURE__*/React.createElement("p", null, "No properties available for the selected item."));
+};
+
+/**
+ * Renders the appropriate input component based on the property's type.
+ *
+ * @param prop - The property to render.
+ * @param handleChange - Function to handle value changes.
+ * @returns JSX Element corresponding to the property type.
+ */
+const renderPropertyInput = (prop, handleChange) => {
+  switch (prop.type) {
+    case 'slider':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
+        id: prop.key,
+        value: [prop.value] // Pass as an array for Radix UI Slider
+        ,
+        min: prop.min,
+        max: prop.max,
+        step: prop.step,
+        onValueChange: values => {
+          console.log(`Slider '${prop.key}' changed to`, values[0]); // Debug log
+          handleChange(prop, values[0]);
+        },
+        className: "w-28"
+      }), /*#__PURE__*/React.createElement(Input, {
+        type: "number",
+        id: prop.key,
+        value: prop.value,
+        min: prop.min,
+        max: prop.max,
+        step: prop.step,
+        onChange: e => {
+          const newVal = Number(e.target.value);
+          console.log(`Input '${prop.key}' changed to`, newVal); // Debug log
+          handleChange(prop, newVal);
+        },
+        className: "w-14"
+      }));
+    case 'boolean':
+      return /*#__PURE__*/React.createElement(Switch, {
+        id: prop.key,
+        checked: prop.value,
+        onCheckedChange: checked => {
+          console.log(`Switch '${prop.key}' toggled to`, checked); // Debug log
+          handleChange(prop, checked);
+        }
+      });
+
+    // Add more cases if you have other property types
+    default:
+      return null;
+  }
+};
+/* harmony default export */ const PanelSplit_PropertiesPanel = ((/* unused pure expression or super */ null && (PropertiesPanel_PropertiesPanel)));
+;// CONCATENATED MODULE: ../../ui-next/src/_prototypes/PanelSplit/PanelSplit.tsx
+
+
+
+
+const PanelSplit = () => {
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [items, setItems] = useState([{
+    id: 1,
+    name: 'All Items',
+    controlsAll: true,
+    // Master item
+    displayMode: 'Fill & Outline',
+    // Default display mode
+    visibility: 'Visible',
+    // Default visibility
+    availability: 'loaded',
+    // Set to 'loaded'
+    properties: [{
+      key: 'opacity',
+      label: 'Opacity',
+      type: 'slider',
+      value: 50,
+      min: 1,
+      max: 100,
+      step: 1
+    }, {
+      key: 'outline',
+      label: 'Outline',
+      type: 'slider',
+      value: 5,
+      min: 1,
+      max: 10,
+      step: 1
+    }, {
+      key: 'displayInactiveSegments',
+      label: 'Display inactive segments',
+      type: 'boolean',
+      value: false
+    }]
+  }, {
+    id: 2,
+    name: 'List item 1',
+    series: 'Series A',
+    displayMode: 'Fill & Outline',
+    // Default display mode
+    visibility: 'Visible',
+    // Default visibility
+    availability: 'loaded',
+    // Set to 'loaded'
+    properties: [{
+      key: 'opacity',
+      label: 'Opacity',
+      type: 'slider',
+      value: 70,
+      min: 1,
+      max: 100,
+      step: 1
+    }, {
+      key: 'outline',
+      label: 'Outline',
+      type: 'slider',
+      value: 7,
+      min: 1,
+      max: 10,
+      step: 1
+    }]
+  }, {
+    id: 3,
+    name: 'List item 2',
+    series: 'Series B',
+    displayMode: 'Fill & Outline',
+    // Default display mode
+    visibility: 'Visible',
+    // Default visibility
+    availability: 'loaded',
+    // Set to 'loaded'
+    properties: [{
+      key: 'opacity',
+      label: 'Opacity',
+      type: 'slider',
+      value: 70,
+      min: 1,
+      max: 100,
+      step: 1
+    }, {
+      key: 'outline',
+      label: 'Outline',
+      type: 'slider',
+      value: 7,
+      min: 1,
+      max: 10,
+      step: 1
+    }]
+  }, {
+    id: 4,
+    name: 'List item 3',
+    series: 'Series C',
+    displayMode: 'Fill & Outline',
+    // Default display mode
+    visibility: 'Visible',
+    // Visibility will not be shown initially
+    availability: 'available',
+    // Set to 'available'
+    properties: [{
+      key: 'opacity',
+      label: 'Opacity',
+      type: 'slider',
+      value: 80,
+      min: 1,
+      max: 100,
+      step: 1
+    }, {
+      key: 'outline',
+      label: 'Outline',
+      type: 'slider',
+      value: 8,
+      min: 1,
+      max: 10,
+      step: 1
+    }]
+  }
+  // Add more items as needed
+  ]);
+
+  // Set the master item as selected by default on mount
+  useEffect(() => {
+    if (items.length > 0 && !selectedItem) {
+      setSelectedItem(items.find(item => item.controlsAll) || items[0]);
+    }
+  }, [items, selectedItem]);
+
+  /**
+   * Handles updating a property's value.
+   *
+   * @param itemId - The ID of the item being updated.
+   * @param propertyKey - The key identifying the property.
+   * @param newValue - The new value for the property.
+   */
+  const handleUpdateProperty = (itemId, propertyKey, newValue) => {
+    const masterItem = items.find(item => item.controlsAll);
+    if (masterItem && itemId === masterItem.id) {
+      if (propertyKey === 'displayMode') {
+        // Update displayMode for all items
+        setItems(prevItems => prevItems.map(item => ({
+          ...item,
+          displayMode: newValue,
+          // Set to the new displayMode
+          properties: item.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        })));
+
+        // Also update the selectedItem if it's the master
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          displayMode: newValue,
+          properties: prevSelected.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        } : prevSelected);
+      } else if (propertyKey === 'visibility') {
+        // Update visibility for all items
+        setItems(prevItems => prevItems.map(item => ({
+          ...item,
+          visibility: newValue // Set to the new visibility
+        })));
+
+        // Also update the selectedItem if it's the master
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          visibility: newValue
+        } : prevSelected);
+      } else {
+        // Update other properties for all items
+        setItems(prevItems => prevItems.map(item => ({
+          ...item,
+          properties: item.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        })));
+
+        // Also update the selectedItem if it's the master
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          properties: prevSelected.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        } : prevSelected);
+      }
+    } else {
+      if (propertyKey === 'displayMode') {
+        // Update displayMode only for the selected item
+        setItems(prevItems => prevItems.map(item => item.id === itemId ? {
+          ...item,
+          displayMode: newValue
+        } : item));
+
+        // Update selectedItem
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          displayMode: newValue
+        } : prevSelected);
+      } else if (propertyKey === 'visibility') {
+        // Toggle visibility only for the selected item
+        setItems(prevItems => prevItems.map(item => item.id === itemId ? {
+          ...item,
+          visibility: newValue
+        } : item));
+
+        // Update selectedItem
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          visibility: newValue
+        } : prevSelected);
+      } else if (propertyKey === 'availability') {
+        // Update availability only for the selected item
+        setItems(prevItems => prevItems.map(item => item.id === itemId ? {
+          ...item,
+          availability: newValue
+        } : item));
+
+        // Update selectedItem
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          availability: newValue
+        } : prevSelected);
+      } else {
+        // Update only the selected item's properties
+        setItems(prevItems => prevItems.map(item => item.id === itemId ? {
+          ...item,
+          properties: item.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        } : item));
+
+        // Update selectedItem
+        setSelectedItem(prevSelected => prevSelected ? {
+          ...prevSelected,
+          properties: prevSelected.properties.map(prop => prop.key === propertyKey ? {
+            ...prop,
+            value: newValue
+          } : prop)
+        } : prevSelected);
+      }
+    }
+  };
+
+  /**
+   * Handles selecting an item from the list.
+   *
+   * @param item - The item being selected.
+   */
+  const handleSelectItem = item => {
+    setSelectedItem(item);
+  };
+
+  /**
+   * Handles toggling the visibility of an item.
+   *
+   * @param itemId - The ID of the item being toggled.
+   */
+  const handleToggleVisibility = itemId => {
+    const item = items.find(item => item.id === itemId);
+    if (item) {
+      const newVisibility = item.visibility === 'Visible' ? 'Hidden' : 'Visible';
+      handleUpdateProperty(itemId, 'visibility', newVisibility);
+    }
+  };
+
+  /**
+   * Handles adding an item (changing availability from 'available' to 'loaded').
+   *
+   * @param itemId - The ID of the item being added.
+   */
+  const handleAddItem = itemId => {
+    handleUpdateProperty(itemId, 'availability', 'loaded');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-[262px] flex-col"
+  }, /*#__PURE__*/React.createElement(ScrollArea, {
+    className: "bg-muted h-[132px] rounded-t border-gray-300 p-1"
+  }, /*#__PURE__*/React.createElement(ItemList, {
+    items: items,
+    onSelectItem: handleSelectItem,
+    selectedItem: selectedItem,
+    onToggleVisibility: handleToggleVisibility // Pass the toggle handler
+    ,
+    onAddItem: handleAddItem // Pass the add handler
+  })), /*#__PURE__*/React.createElement(ScrollArea, {
+    className: "bg-popover max-h-[400px] flex-grow overflow-auto rounded p-1"
+  }, /*#__PURE__*/React.createElement(PropertiesPanel, {
+    selectedItem: selectedItem,
+    onUpdateProperty: handleUpdateProperty,
+    onAddItem: handleAddItem // Pass the add handler
+  })));
+};
+/* harmony default export */ const PanelSplit_PanelSplit = ((/* unused pure expression or super */ null && (PanelSplit)));
+;// CONCATENATED MODULE: ../../ui-next/src/_prototypes/PanelSplit/index.ts
+
+
+
 ;// CONCATENATED MODULE: ../../ui-next/src/components/index.ts
 
 
@@ -196952,6 +197666,11 @@ function Toolbox({
 
 
 
+
+
+
+
+// Prototypes
 
 
 
@@ -403232,7 +403951,7 @@ function __disposeResources(env) {
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + ({"1985":"polySeg","2158":"histogram-worker","7607":"suv-peak-worker"}[chunkId] || chunkId) + ".bundle." + {"79":"422d9ccbaaefa6b0a039","153":"e384139aa6dc917c1e7f","818":"b6027359846cc90e32ff","962":"1a4306eb0d41beda14e1","1169":"4622fde2805592aad5d0","1202":"55f140afb05e1ad5512c","1498":"ff6ba98c695ef559fec2","1540":"2a0208cc8d5cabfc569d","1985":"0a70e65fe89169ec7508","2119":"be20eb6a847aa7bc1cb4","2158":"d97bab3206c49329f64b","2412":"e1abf9a60dcecb7f0c77","2791":"91c3d6d25da43f62726a","2831":"22245416b8edb6c9dc56","2898":"ef8d98b006bd8386d599","3286":"b9b3a165dc5a8b24b47f","3482":"a41c58eff876e2cfcbf4","3497":"512610422a2862584c55","3658":"e44755981b64e69a8d7e","3962":"6e2f1b5dd6d94da2889b","4210":"2c9a3e994d81843373f8","4353":"5ddbd4947be136ec266e","4530":"ec12dfd2fbf9083b164e","4757":"ed362a485344485c9f1c","4842":"d5d1d6c35dfe6066250e","4978":"b2d5f98dc7db01fcb3d9","5793":"d1b4e887564bbb98752d","5888":"c056620c251a9974bad4","5898":"be696e0b355efc1c7f05","5931":"f16bcd50591d83af9f7a","6010":"a41bef6e63d1f8f8af7f","6552":"16415f0c552ba1ee590b","6591":"20f9d1062b82fa1bc033","6904":"da0d83fcd48a48cfaac1","7246":"80427fb3b6b4faa12e7d","7360":"29170b88f653797645d3","7376":"463e21a205e3907dc349","7502":"247010c9dad2f9041e45","7607":"54d68bc1808ad3d77994","7913":"eb9263f4f71ac109fd79","8315":"5cac046f15998869dc97","8714":"36331faa35db985a786c","8944":"2647d0df55dbf42e33f7","8993":"23cd5f8560800a97d798","8999":"9f08fc751e1f8d3127b3"}[chunkId] + ".js";
+/******/ 			return "" + ({"1985":"polySeg","2158":"histogram-worker","7607":"suv-peak-worker"}[chunkId] || chunkId) + ".bundle." + {"79":"422d9ccbaaefa6b0a039","153":"26839375de24e88aba65","818":"b6027359846cc90e32ff","962":"99965797c8353f273fa1","1169":"4622fde2805592aad5d0","1202":"55f140afb05e1ad5512c","1498":"ff6ba98c695ef559fec2","1540":"2a0208cc8d5cabfc569d","1985":"0a70e65fe89169ec7508","2119":"474bb516d56922db33b9","2158":"d97bab3206c49329f64b","2412":"e1abf9a60dcecb7f0c77","2791":"e744aac5300171cb2fa5","2831":"22245416b8edb6c9dc56","2898":"ef8d98b006bd8386d599","3286":"b9b3a165dc5a8b24b47f","3482":"850ff199da4a907674b4","3497":"512610422a2862584c55","3658":"e44755981b64e69a8d7e","3962":"e504478a353e52eb6a97","4210":"48668b411fdbabd4148b","4353":"9bcbdbc20f0413a48117","4530":"ec12dfd2fbf9083b164e","4757":"ed362a485344485c9f1c","4842":"975d1e3a7ca605172be0","4978":"ec6e397d724b3a104514","5793":"d1b4e887564bbb98752d","5888":"e34a932b1a9a00675174","5898":"be696e0b355efc1c7f05","5931":"f16bcd50591d83af9f7a","6010":"a41bef6e63d1f8f8af7f","6552":"3f20b95c2da2f6149c7a","6591":"246e910c05d0076154a8","6904":"da0d83fcd48a48cfaac1","7246":"3736e9f7b919e0f55c5c","7360":"58e4e66903c24ba44e4e","7376":"7af8c3bbd7b0a919845e","7502":"0256a1f690ff7508c9ea","7607":"54d68bc1808ad3d77994","7913":"a6a93115852315089a5a","8315":"5cac046f15998869dc97","8714":"36331faa35db985a786c","8944":"75ebf48ab17b459528e3","8993":"23cd5f8560800a97d798","8999":"121e290ea00e857fdf6d"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/