@noya-app/noya-designsystem 0.1.42 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -12272,7 +12272,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
12272
12272
  open,
12273
12273
  onFocus,
12274
12274
  onBlur,
12275
- onOpenChange
12275
+ onOpenChange,
12276
+ contentStyle
12276
12277
  }) {
12277
12278
  const selectedItem = menuItems.find(
12278
12279
  (item) => typeof item !== "string" && item.value === value
@@ -12360,7 +12361,9 @@ var SelectMenu = memoGeneric(function SelectMenu2({
12360
12361
  collisionPadding: 8,
12361
12362
  align: "end",
12362
12363
  style: {
12363
- width: "var(--radix-select-trigger-width)"
12364
+ width: "var(--radix-select-trigger-width)",
12365
+ maxHeight: "500px",
12366
+ ...contentStyle
12364
12367
  }
12365
12368
  },
12366
12369
  /* @__PURE__ */ React51.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React51.createElement(
@@ -13139,29 +13142,66 @@ var Combobox = memo14(
13139
13142
  forwardRef14(function Combobox2({
13140
13143
  id,
13141
13144
  loading,
13142
- initialValue = "",
13143
13145
  placeholder,
13144
13146
  items,
13145
13147
  size: size3,
13146
- onChange,
13147
- onSelectItem,
13148
- onHoverItem,
13149
- onFocus,
13150
- onBlur,
13151
- onDeleteWhenEmpty,
13152
13148
  style: style5,
13153
13149
  className,
13154
13150
  label,
13155
13151
  children: children2,
13156
13152
  hideMenuWhenEmptyValue = false,
13157
- allowArbitraryValues = false,
13158
13153
  readOnly = false,
13159
13154
  tabBehavior = "select",
13160
- openMenuBehavior = "showFilteredItems"
13155
+ openMenuBehavior = "showFilteredItems",
13156
+ onFocus,
13157
+ onDeleteWhenEmpty,
13158
+ ...rest
13161
13159
  }, forwardedRef) {
13160
+ const props = useMemo17(() => {
13161
+ if (rest.mode === "string") {
13162
+ return {
13163
+ mode: rest.mode,
13164
+ value: rest.value,
13165
+ onChange: rest.onChange,
13166
+ onSelectItem: rest.onSelectItem,
13167
+ onHoverItem: rest.onHoverItem,
13168
+ onBlur: rest.onBlur,
13169
+ allowArbitraryValues: rest.allowArbitraryValues
13170
+ };
13171
+ } else {
13172
+ return {
13173
+ mode: rest.mode,
13174
+ value: rest.value,
13175
+ onChange: rest.onChange,
13176
+ onSelectItem: rest.onSelectItem,
13177
+ onHoverItem: rest.onHoverItem,
13178
+ onBlur: rest.onBlur
13179
+ };
13180
+ }
13181
+ }, [
13182
+ rest.mode,
13183
+ rest.value,
13184
+ rest.onChange,
13185
+ rest.onSelectItem,
13186
+ rest.onHoverItem,
13187
+ rest.onBlur,
13188
+ rest.allowArbitraryValues
13189
+ ]);
13162
13190
  const ref = useRef17(null);
13191
+ function getInitialValueString() {
13192
+ if (props.mode === "string") {
13193
+ return props.value ?? "";
13194
+ } else {
13195
+ return props.value?.name ?? "";
13196
+ }
13197
+ }
13198
+ const initialValueString = getInitialValueString();
13163
13199
  const [comboboxState] = useState20(
13164
- () => new ComboboxState(items, initialValue, allowArbitraryValues)
13200
+ () => new ComboboxState(
13201
+ items,
13202
+ initialValueString,
13203
+ props.mode === "string" && (props.allowArbitraryValues ?? false)
13204
+ )
13165
13205
  );
13166
13206
  const state = useComboboxState(comboboxState);
13167
13207
  const [isFocused, setIsFocused] = useState20(false);
@@ -13170,12 +13210,11 @@ var Combobox = memo14(
13170
13210
  useEffect15(() => {
13171
13211
  comboboxState.setItems(items);
13172
13212
  }, [items, comboboxState]);
13213
+ useEffect15(() => {
13214
+ comboboxState.setFilter(initialValueString);
13215
+ }, [comboboxState, initialValueString]);
13173
13216
  const { filter, selectedIndex, filteredItems } = state;
13174
- const shouldShowMenu = useMemo17(() => {
13175
- if (!isFocused) return false;
13176
- if (hideMenuWhenEmptyValue && filter === "") return false;
13177
- return true;
13178
- }, [hideMenuWhenEmptyValue, filter, isFocused]);
13217
+ const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
13179
13218
  useEffect15(() => {
13180
13219
  if (listRef.current) {
13181
13220
  listRef.current.scrollToIndex(selectedIndex);
@@ -13183,15 +13222,28 @@ var Combobox = memo14(
13183
13222
  }, [selectedIndex]);
13184
13223
  const handleBlur = useCallback18(() => {
13185
13224
  ref.current?.blur();
13186
- comboboxState.reset(initialValue);
13187
- onBlur?.(state.filter === state.lastSubmittedValue.filter, filter);
13225
+ comboboxState.reset(initialValueString);
13226
+ if (props.mode === "string") {
13227
+ props.onBlur?.(
13228
+ state.filter === state.lastSubmittedValue.filter,
13229
+ filter
13230
+ );
13231
+ } else {
13232
+ const selectedItem = comboboxState.getSelectedItem();
13233
+ if (selectedItem && selectedItem.type !== "sectionHeader") {
13234
+ props.onBlur?.(
13235
+ state.filter === state.lastSubmittedValue.filter,
13236
+ selectedItem
13237
+ );
13238
+ }
13239
+ }
13188
13240
  setIsFocused(false);
13189
- }, [filter, initialValue, onBlur, state, comboboxState]);
13241
+ }, [filter, initialValueString, props, state, comboboxState]);
13190
13242
  const handleFocus = useCallback18(
13191
13243
  (event) => {
13192
13244
  setIsFocused(true);
13193
13245
  comboboxState.reset(
13194
- openMenuBehavior === "showAllItems" ? "" : initialValue
13246
+ openMenuBehavior === "showAllItems" ? "" : initialValueString
13195
13247
  );
13196
13248
  if (ref.current) {
13197
13249
  const length = ref.current.value.length;
@@ -13199,30 +13251,54 @@ var Combobox = memo14(
13199
13251
  }
13200
13252
  onFocus?.(event);
13201
13253
  },
13202
- [initialValue, onFocus, openMenuBehavior, comboboxState]
13254
+ [initialValueString, onFocus, openMenuBehavior, comboboxState]
13203
13255
  );
13204
13256
  const handleUpdateSelection = useCallback18(
13205
13257
  (item) => {
13206
13258
  if (item.type === "sectionHeader") return;
13207
13259
  const selectedItem = comboboxState.selectCurrentItem(item);
13208
13260
  if (!selectedItem || selectedItem.type === "sectionHeader") return;
13209
- onSelectItem?.(selectedItem);
13210
- onHoverItem?.(void 0);
13261
+ if (props.mode === "string") {
13262
+ props.onSelectItem?.(selectedItem.name);
13263
+ props.onHoverItem?.(void 0);
13264
+ } else {
13265
+ props.onSelectItem?.(selectedItem);
13266
+ props.onHoverItem?.(void 0);
13267
+ }
13211
13268
  setShouldBlur(true);
13212
13269
  },
13213
- [onSelectItem, onHoverItem, comboboxState]
13270
+ [props, comboboxState]
13214
13271
  );
13215
13272
  const handleIndexChange = useCallback18(
13216
13273
  (index) => {
13217
13274
  comboboxState.setSelectedIndex(index);
13218
13275
  const item = comboboxState.getSelectedItem();
13219
13276
  if (item && item.type !== "sectionHeader") {
13220
- onHoverItem?.(item);
13277
+ if (props.mode === "string") {
13278
+ props.onHoverItem?.(item.name);
13279
+ } else {
13280
+ props.onHoverItem?.(item);
13281
+ }
13282
+ } else {
13283
+ props.onHoverItem?.(void 0);
13284
+ }
13285
+ },
13286
+ [props, comboboxState]
13287
+ );
13288
+ const handleChange = useCallback18(
13289
+ (value) => {
13290
+ if (readOnly) return;
13291
+ comboboxState.setFilter(value);
13292
+ if (props.mode === "string") {
13293
+ props.onChange?.(value);
13221
13294
  } else {
13222
- onHoverItem?.(void 0);
13295
+ const selectedItem = comboboxState.getSelectedItem();
13296
+ if (selectedItem && selectedItem.type !== "sectionHeader") {
13297
+ props.onChange?.(selectedItem);
13298
+ }
13223
13299
  }
13224
13300
  },
13225
- [onHoverItem, comboboxState]
13301
+ [readOnly, props, comboboxState]
13226
13302
  );
13227
13303
  const handleKeyDown = useCallback18(
13228
13304
  (event) => {
@@ -13241,7 +13317,7 @@ var Combobox = memo14(
13241
13317
  if (shouldShowMenu) {
13242
13318
  if (item) {
13243
13319
  handleUpdateSelection(item);
13244
- } else if (allowArbitraryValues) {
13320
+ } else if (props.mode === "string" && props.allowArbitraryValues) {
13245
13321
  comboboxState.submitArbitraryFilter(filter);
13246
13322
  handleBlur();
13247
13323
  } else {
@@ -13271,7 +13347,7 @@ var Combobox = memo14(
13271
13347
  }
13272
13348
  handled = true;
13273
13349
  }
13274
- } else if (allowArbitraryValues && filter !== "") {
13350
+ } else if (props.mode === "string" && props.allowArbitraryValues && filter !== "") {
13275
13351
  comboboxState.submitArbitraryFilter(filter);
13276
13352
  handleBlur();
13277
13353
  handled = true;
@@ -13306,17 +13382,9 @@ var Combobox = memo14(
13306
13382
  shouldShowMenu,
13307
13383
  comboboxState,
13308
13384
  tabBehavior,
13309
- allowArbitraryValues
13385
+ props
13310
13386
  ]
13311
13387
  );
13312
- const handleChange = useCallback18(
13313
- (value) => {
13314
- if (readOnly) return;
13315
- comboboxState.setFilter(value);
13316
- onChange?.(value);
13317
- },
13318
- [onChange, readOnly, comboboxState]
13319
- );
13320
13388
  const typeaheadValue = comboboxState.getTypeaheadValue();
13321
13389
  useImperativeHandle3(forwardedRef, () => ({
13322
13390
  focus: () => {
@@ -13327,7 +13395,11 @@ var Combobox = memo14(
13327
13395
  }
13328
13396
  },
13329
13397
  setValue: (value) => {
13330
- comboboxState.setFilter(value);
13398
+ if (typeof value === "string") {
13399
+ comboboxState.setFilter(value);
13400
+ } else {
13401
+ comboboxState.setFilter(value.name);
13402
+ }
13331
13403
  },
13332
13404
  selectAllInputText: () => {
13333
13405
  ref.current?.setSelectionRange(0, ref.current.value.length);
@@ -13341,23 +13413,24 @@ var Combobox = memo14(
13341
13413
  return;
13342
13414
  }
13343
13415
  comboboxState.reset(
13344
- openMenuBehavior === "showAllItems" ? "" : initialValue
13416
+ openMenuBehavior === "showAllItems" ? "" : initialValueString
13345
13417
  );
13346
13418
  ref.current?.focus();
13347
13419
  },
13348
13420
  [
13349
13421
  shouldShowMenu,
13350
13422
  openMenuBehavior,
13351
- initialValue,
13423
+ initialValueString,
13352
13424
  handleBlur,
13353
13425
  comboboxState
13354
13426
  ]
13355
13427
  );
13356
13428
  useEffect15(() => {
13357
13429
  if (!shouldBlur) return;
13430
+ if (document.activeElement !== ref.current) return;
13431
+ setShouldBlur(false);
13358
13432
  ref.current?.focus();
13359
13433
  handleBlur();
13360
- setShouldBlur(false);
13361
13434
  }, [shouldBlur, handleBlur]);
13362
13435
  return /* @__PURE__ */ React54.createElement(
13363
13436
  InputField.Root,
@@ -15193,46 +15266,56 @@ var Switch = function Switch2({
15193
15266
  };
15194
15267
 
15195
15268
  // src/components/TextArea.tsx
15196
- import React71, { forwardRef as forwardRef21, memo as memo27, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
15269
+ import React71, {
15270
+ forwardRef as forwardRef21,
15271
+ memo as memo27,
15272
+ useCallback as useCallback25,
15273
+ useEffect as useEffect16,
15274
+ useRef as useRef20
15275
+ } from "react";
15197
15276
  var useAutoResize = (value) => {
15198
15277
  const textareaRef = useRef20(null);
15199
15278
  useEffect16(() => {
15279
+ if (value === void 0) return;
15200
15280
  if (!textareaRef.current) return;
15201
15281
  textareaRef.current.style.height = "auto";
15202
15282
  textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
15203
15283
  }, [value]);
15204
15284
  return textareaRef;
15205
15285
  };
15206
- var AutoResizingTextArea = memo27(
15207
- forwardRef21(function AutoResizingTextArea2({
15286
+ var TextArea = memo27(
15287
+ forwardRef21(function TextArea2({
15208
15288
  value,
15209
15289
  onChangeText,
15210
15290
  className,
15211
- end,
15212
- endClassName,
15213
15291
  onChange,
15292
+ autoResize = false,
15214
15293
  ...rest
15215
15294
  }, forwardedRef) {
15216
- const ref = useAutoResize(value || rest.placeholder || "");
15295
+ const autoResizeRef = useAutoResize(
15296
+ autoResize ? value || rest.placeholder || "" : void 0
15297
+ );
15217
15298
  const handleChange = useCallback25(
15218
15299
  (event) => {
15219
- onChangeText(event.target.value);
15300
+ onChangeText?.(event.target.value);
15220
15301
  onChange?.(event);
15221
15302
  },
15222
15303
  [onChangeText, onChange]
15223
15304
  );
15224
15305
  const handleRef = useCallback25(
15225
15306
  (value2) => {
15226
- ref.current = value2;
15307
+ if (autoResize) {
15308
+ autoResizeRef.current = value2;
15309
+ }
15227
15310
  assignRef(forwardedRef, value2);
15228
15311
  },
15229
- [ref, forwardedRef]
15312
+ [autoResize, autoResizeRef, forwardedRef]
15230
15313
  );
15231
- return /* @__PURE__ */ React71.createElement("div", { className: "relative w-full h-full" }, /* @__PURE__ */ React71.createElement(
15314
+ return /* @__PURE__ */ React71.createElement(
15232
15315
  "textarea",
15233
15316
  {
15234
15317
  className: cx(
15235
- `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-24 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
15318
+ `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
15236
15319
  className
15237
15320
  ),
15238
15321
  ref: handleRef,
@@ -15240,7 +15323,27 @@ var AutoResizingTextArea = memo27(
15240
15323
  onChange: handleChange,
15241
15324
  value
15242
15325
  }
15243
- ), /* @__PURE__ */ React71.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end));
15326
+ );
15327
+ })
15328
+ );
15329
+ var TextAreaRow = memo27(
15330
+ forwardRef21(function TextAreaRow2({
15331
+ className,
15332
+ textAreaClassName,
15333
+ textAreaRef,
15334
+ end,
15335
+ endClassName,
15336
+ ...rest
15337
+ }, forwardedRef) {
15338
+ return /* @__PURE__ */ React71.createElement(
15339
+ "div",
15340
+ {
15341
+ ref: forwardedRef,
15342
+ className: cx("relative w-full h-full", className)
15343
+ },
15344
+ /* @__PURE__ */ React71.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
15345
+ /* @__PURE__ */ React71.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
15346
+ );
15244
15347
  })
15245
15348
  );
15246
15349
 
@@ -15415,6 +15518,7 @@ var UserPointer = memo28(function UserPointer2({
15415
15518
  import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
15416
15519
  import React75, {
15417
15520
  forwardRef as forwardRef22,
15521
+ memo as memo29,
15418
15522
  useCallback as useCallback27,
15419
15523
  useImperativeHandle as useImperativeHandle4,
15420
15524
  useRef as useRef22,
@@ -15559,32 +15663,39 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
15559
15663
  }
15560
15664
 
15561
15665
  // src/components/WorkspaceLayout.tsx
15562
- var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15666
+ var WorkspaceLayout = forwardRef22(function WorkspaceLayout2({
15563
15667
  autoSavePrefix,
15564
- leftSidebarContent: leftPanelContent,
15565
- children: centerPanelContent,
15566
- rightSidebarContent: rightPanelContent,
15567
- hasLeftSidebar = !!leftPanelContent,
15568
- hasRightSidebar = !!rightPanelContent,
15569
- onChangeLayoutState,
15570
- leftSidebarInitialSize = 280,
15571
- rightSidebarInitialSize = 400,
15572
- leftSidebarMinSize,
15573
- rightSidebarMinSize,
15574
- leftSidebarCanResize = false,
15575
- rightSidebarCanResize = false,
15668
+ left,
15669
+ right,
15576
15670
  id,
15577
15671
  className,
15578
- style: style5
15672
+ style: style5,
15673
+ toolbar,
15674
+ children: children2,
15675
+ onChangeLayoutState,
15676
+ leftOptions: {
15677
+ initialSize: leftInitialSize = 280,
15678
+ minSize: leftMinSize,
15679
+ resizable: leftResizable = true,
15680
+ style: leftStyle,
15681
+ className: leftClassName
15682
+ } = {},
15683
+ rightOptions: {
15684
+ initialSize: rightInitialSize = 280,
15685
+ minSize: rightMinSize,
15686
+ resizable: rightResizable = true,
15687
+ style: rightStyle,
15688
+ className: rightClassName
15689
+ } = {}
15579
15690
  }, forwardedRef) {
15580
15691
  const windowSize = useWindowSize();
15581
15692
  function getPercentage(size3) {
15582
15693
  return typeof size3 === "string" ? parseFloat(size3) : size3 / windowSize.width * 100;
15583
15694
  }
15584
- const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
15585
- const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
15586
- const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
15587
- const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
15695
+ const leftSidebarPercentage = getPercentage(leftInitialSize);
15696
+ const rightSidebarPercentage = getPercentage(rightInitialSize);
15697
+ const leftSidebarMinPercentage = leftMinSize !== void 0 ? getPercentage(leftMinSize) : void 0;
15698
+ const rightSidebarMinPercentage = rightMinSize !== void 0 ? getPercentage(rightMinSize) : void 0;
15588
15699
  const panelGroupRef = useRef22(null);
15589
15700
  const leftSidebarRef = useRef22(null);
15590
15701
  const rightSidebarRef = useRef22(null);
@@ -15598,21 +15709,21 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15598
15709
  );
15599
15710
  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
15600
15711
  useImperativeHandle4(forwardedRef, () => ({
15601
- setLeftSidebarExpanded: (expanded) => {
15712
+ setLeftExpanded: (expanded) => {
15602
15713
  if (expanded) {
15603
15714
  leftSidebarRef.current?.expand();
15604
15715
  } else {
15605
15716
  leftSidebarRef.current?.collapse();
15606
15717
  }
15607
15718
  },
15608
- setRightSidebarExpanded: (expanded) => {
15719
+ setRightExpanded: (expanded) => {
15609
15720
  if (expanded) {
15610
15721
  rightSidebarRef.current?.expand();
15611
15722
  } else {
15612
15723
  rightSidebarRef.current?.collapse();
15613
15724
  }
15614
15725
  },
15615
- toggleAllSidebars: () => {
15726
+ toggleSides: () => {
15616
15727
  const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
15617
15728
  const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
15618
15729
  if (isLeftSidebarExpanded || isRightSidebarExpanded) {
@@ -15623,7 +15734,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15623
15734
  rightSidebarRef.current?.expand();
15624
15735
  }
15625
15736
  },
15626
- toggleLeftSidebar: () => {
15737
+ toggleLeft: () => {
15627
15738
  const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
15628
15739
  if (isLeftSidebarExpanded) {
15629
15740
  leftSidebarRef.current?.collapse();
@@ -15631,7 +15742,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15631
15742
  leftSidebarRef.current?.expand();
15632
15743
  }
15633
15744
  },
15634
- toggleRightSidebar: () => {
15745
+ toggleRight: () => {
15635
15746
  const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
15636
15747
  if (isRightSidebarExpanded) {
15637
15748
  rightSidebarRef.current?.collapse();
@@ -15653,56 +15764,38 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15653
15764
  }
15654
15765
  }
15655
15766
  });
15656
- const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
15767
+ const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
15657
15768
  return /* @__PURE__ */ React75.createElement(
15658
15769
  "div",
15659
15770
  {
15660
15771
  id,
15661
- className,
15662
- style: {
15663
- backgroundColor: cssVars.colors.canvasBackground,
15664
- display: "flex",
15665
- flexDirection: "row",
15666
- ...style5
15667
- }
15772
+ className: cx("flex flex-col bg-canvas-background", className),
15773
+ style: style5
15668
15774
  },
15669
- /* @__PURE__ */ React75.createElement(
15775
+ toolbar,
15776
+ /* @__PURE__ */ React75.createElement("div", { className: "flex flex-row flex-1" }, /* @__PURE__ */ React75.createElement(
15670
15777
  PanelGroup,
15671
15778
  {
15672
15779
  ref: panelGroupRef,
15673
15780
  id: EDITOR_PANEL_GROUP_ID,
15781
+ className: "flex-1",
15674
15782
  direction: "horizontal",
15675
- autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
15676
- style: { flex: "1" }
15783
+ autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
15677
15784
  },
15678
- hasLeftSidebar && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
15785
+ left && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
15679
15786
  Panel,
15680
15787
  {
15681
15788
  id: LEFT_SIDEBAR_ID,
15789
+ className: "relative",
15682
15790
  order: 1,
15683
15791
  ref: leftSidebarRef,
15684
15792
  defaultSize: leftSidebarPercentage,
15685
15793
  minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
15686
- ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
15687
- collapsible: true,
15688
- style: {
15689
- display: "flex",
15690
- flexDirection: "row",
15691
- position: "relative"
15692
- }
15794
+ ...!leftResizable && { maxSize: leftSidebarPercentage },
15795
+ collapsible: true
15693
15796
  },
15694
- internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
15695
- ), /* @__PURE__ */ React75.createElement(
15696
- PanelResizeHandle,
15697
- {
15698
- style: {
15699
- cursor: "col-resize",
15700
- width: "1px",
15701
- height: "100%",
15702
- backgroundColor: cssVars.colors.divider
15703
- }
15704
- }
15705
- )),
15797
+ internalLayoutState?.leftSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: leftStyle, className: leftClassName }, left)
15798
+ ), /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
15706
15799
  /* @__PURE__ */ React75.createElement(
15707
15800
  Panel,
15708
15801
  {
@@ -15710,49 +15803,45 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
15710
15803
  order: 2,
15711
15804
  defaultSize: centerPanelPercentage,
15712
15805
  minSize: 10,
15713
- style: {
15714
- display: "flex",
15715
- flexDirection: "row",
15716
- position: "relative"
15717
- }
15806
+ className: "flex relative"
15718
15807
  },
15719
- centerPanelContent
15808
+ children2
15720
15809
  ),
15721
- hasRightSidebar && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
15722
- PanelResizeHandle,
15723
- {
15724
- style: {
15725
- cursor: "col-resize",
15726
- width: "1px",
15727
- height: "100%",
15728
- backgroundColor: cssVars.colors.divider
15729
- }
15730
- }
15731
- ), /* @__PURE__ */ React75.createElement(
15810
+ right && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React75.createElement(
15732
15811
  Panel,
15733
15812
  {
15734
15813
  id: RIGHT_SIDEBAR_ID,
15814
+ className: "relative",
15735
15815
  order: 3,
15736
15816
  ref: rightSidebarRef,
15737
15817
  minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
15738
15818
  defaultSize: rightSidebarPercentage,
15739
- ...!rightSidebarCanResize && {
15819
+ ...!rightResizable && {
15740
15820
  maxSize: rightSidebarPercentage
15741
15821
  },
15742
- collapsible: true,
15743
- style: {
15744
- display: "flex",
15745
- flexDirection: "row",
15746
- position: "relative"
15747
- }
15822
+ collapsible: true
15748
15823
  },
15749
- internalLayoutState?.rightSidebarCollapsed ? null : rightPanelContent
15824
+ internalLayoutState?.rightSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: rightStyle, className: rightClassName }, right)
15750
15825
  ))
15751
- )
15826
+ ))
15752
15827
  );
15753
15828
  });
15754
- var WorkspaceLayout = forwardRef22(function WorkspaceLayout2(props, forwardedRef) {
15755
- return /* @__PURE__ */ React75.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
15829
+ var PanelInner = memo29(function PanelInner2({
15830
+ children: children2,
15831
+ style: style5,
15832
+ className
15833
+ }) {
15834
+ return /* @__PURE__ */ React75.createElement(
15835
+ "div",
15836
+ {
15837
+ style: style5,
15838
+ className: cx(
15839
+ "absolute inset-0 flex flex-col bg-sidebar-background",
15840
+ className
15841
+ )
15842
+ },
15843
+ children2
15844
+ );
15756
15845
  });
15757
15846
 
15758
15847
  // src/hooks/usePlatform.ts
@@ -15895,7 +15984,7 @@ __export(InspectorPrimitives_exports, {
15895
15984
  });
15896
15985
  import React77, {
15897
15986
  forwardRef as forwardRef23,
15898
- memo as memo30
15987
+ memo as memo31
15899
15988
  } from "react";
15900
15989
  var Section2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React77.createElement(
15901
15990
  "div",
@@ -15969,7 +16058,7 @@ var RowLabel = forwardRef23(function RowLabel2({
15969
16058
  }
15970
16059
  );
15971
16060
  });
15972
- var LabeledRow = memo30(function LabeledRow2({
16061
+ var LabeledRow = memo31(function LabeledRow2({
15973
16062
  id,
15974
16063
  children: children2,
15975
16064
  label,
@@ -16073,14 +16162,15 @@ function ToolbarMenu({
16073
16162
  Button,
16074
16163
  {
16075
16164
  key: i,
16165
+ disabled: item.disabled,
16076
16166
  onClick: () => {
16077
16167
  if (onSelectMenuItem && item.value) {
16078
16168
  onSelectMenuItem(item.value);
16079
16169
  }
16080
16170
  }
16081
16171
  },
16082
- item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
16083
- item.title
16172
+ item.title,
16173
+ item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { inline: true, size: 6 }), renderIcon(item.icon))
16084
16174
  );
16085
16175
  }
16086
16176
  return /* @__PURE__ */ React79.createElement(
@@ -16094,14 +16184,13 @@ function ToolbarMenu({
16094
16184
  }
16095
16185
  }
16096
16186
  },
16097
- /* @__PURE__ */ React79.createElement(Button, null, item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 })), item.title, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React79.createElement(DropdownChevronIcon4, null))
16187
+ /* @__PURE__ */ React79.createElement(Button, { disabled: item.disabled }, item.title, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React79.createElement(DropdownChevronIcon4, null))
16098
16188
  );
16099
16189
  }));
16100
16190
  }
16101
16191
  export {
16102
16192
  ActivityIndicator,
16103
16193
  AnimatePresence,
16104
- AutoResizingTextArea,
16105
16194
  Avatar,
16106
16195
  AvatarStack,
16107
16196
  BaseToolbar,
@@ -16165,6 +16254,8 @@ export {
16165
16254
  Spacer,
16166
16255
  Switch,
16167
16256
  Text,
16257
+ TextArea,
16258
+ TextAreaRow,
16168
16259
  Toast,
16169
16260
  ToastProvider,
16170
16261
  Toolbar,