@inf-monkeys-tech/monkeys-design 0.4.32 → 0.4.33

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
@@ -1,7 +1,8 @@
1
- import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useCallback, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1, useContext } from 'react';
1
+ import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useCallback, useContext, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import * as ContextMenu from '@radix-ui/react-context-menu';
4
4
  import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
5
+ import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
5
6
  import * as Tooltip from '@radix-ui/react-tooltip';
6
7
 
7
8
  var __create = Object.create;
@@ -4521,7 +4522,7 @@ var require_lodash = __commonJS({
4521
4522
  function valuesIn(object) {
4522
4523
  return object == null ? [] : baseValues(object, keysIn(object));
4523
4524
  }
4524
- function clamp4(number, lower, upper) {
4525
+ function clamp5(number, lower, upper) {
4525
4526
  if (upper === undefined2) {
4526
4527
  upper = lower;
4527
4528
  lower = undefined2;
@@ -5198,7 +5199,7 @@ var require_lodash = __commonJS({
5198
5199
  lodash.camelCase = camelCase;
5199
5200
  lodash.capitalize = capitalize;
5200
5201
  lodash.ceil = ceil;
5201
- lodash.clamp = clamp4;
5202
+ lodash.clamp = clamp5;
5202
5203
  lodash.clone = clone;
5203
5204
  lodash.cloneDeep = cloneDeep;
5204
5205
  lodash.cloneDeepWith = cloneDeepWith;
@@ -8553,7 +8554,41 @@ var baseSlots = {
8553
8554
  tableEmptyActions: "mt-4 flex flex-wrap items-center justify-center gap-2",
8554
8555
  tableLoadingRow: "border-b border-border/60",
8555
8556
  tableLoadingCell: "px-3 py-2",
8556
- tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70"
8557
+ tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70",
8558
+ layoutRoot: cn(
8559
+ "grid min-w-0 overflow-hidden grid-rows-[auto_minmax(0,1fr)_auto] gap-3 rounded-lg border border-border/70 bg-background p-3 text-foreground",
8560
+ motionBase
8561
+ ),
8562
+ layoutRootFull: "h-full min-h-0",
8563
+ layoutHeader: "min-w-0",
8564
+ layoutBody: "grid min-h-0 min-w-0 overflow-hidden gap-3",
8565
+ layoutSidebar: "min-h-0 min-w-0 overflow-hidden",
8566
+ layoutMain: "min-h-0 min-w-0 overflow-hidden",
8567
+ layoutAside: "min-h-0 min-w-0 overflow-hidden",
8568
+ layoutFooter: "min-w-0",
8569
+ layoutPane: cn(
8570
+ "h-full max-h-full min-h-0 min-w-0 overflow-hidden rounded-lg bg-background text-foreground",
8571
+ motionBase
8572
+ ),
8573
+ layoutPaneScrollable: "overflow-auto",
8574
+ layoutPaneBordered: "border border-border/70",
8575
+ layoutPaneMuted: "bg-muted/25",
8576
+ layoutPaneSoft: "bg-background/95 shadow-sm",
8577
+ layoutPaneTransparent: "bg-transparent shadow-none",
8578
+ layoutSplitRoot: "grid min-h-0 min-w-0 overflow-hidden",
8579
+ layoutSplitHorizontal: "grid-flow-col",
8580
+ layoutSplitVertical: "grid-flow-row",
8581
+ layoutSplitPane: "min-h-0 min-w-0 overflow-hidden",
8582
+ layoutSplitPrimary: "",
8583
+ layoutSplitSecondary: "",
8584
+ layoutResizeHandle: cn(
8585
+ "group/resize relative z-10 flex shrink-0 items-center justify-center bg-transparent text-muted-foreground hover:bg-border/60 active:bg-border/70 focus-visible:bg-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
8586
+ motionInteractive
8587
+ ),
8588
+ layoutResizeHandleHorizontal: "w-2 cursor-col-resize",
8589
+ layoutResizeHandleVertical: "h-2 cursor-row-resize",
8590
+ layoutResizeHandleDisabled: "cursor-default opacity-60",
8591
+ layoutResizeHandleIndicator: "rounded-full bg-muted-foreground/45 group-hover/resize:bg-primary/70"
8557
8592
  };
8558
8593
  var densitySlots = {
8559
8594
  compact: {
@@ -8627,7 +8662,12 @@ var densitySlots = {
8627
8662
  tableCell: "px-2 py-1.5 text-xs",
8628
8663
  tableHeadLabel: "text-[11px]",
8629
8664
  tableHeadDescription: "text-[10px] leading-3",
8630
- tableLoadingCell: "px-2 py-1.5"
8665
+ tableLoadingCell: "px-2 py-1.5",
8666
+ layoutRoot: "gap-2 p-2",
8667
+ layoutBody: "gap-2",
8668
+ layoutPane: "rounded-md text-xs",
8669
+ layoutResizeHandleHorizontal: "w-1.5",
8670
+ layoutResizeHandleVertical: "h-1.5"
8631
8671
  },
8632
8672
  default: {
8633
8673
  buttonBase: "h-9"
@@ -8678,7 +8718,12 @@ var densitySlots = {
8678
8718
  menuSubTrigger: "min-h-9 px-3 py-2",
8679
8719
  tableHead: "h-12 px-4 py-3",
8680
8720
  tableCell: "px-4 py-3",
8681
- tableLoadingCell: "px-4 py-3"
8721
+ tableLoadingCell: "px-4 py-3",
8722
+ layoutRoot: "gap-4 p-4",
8723
+ layoutBody: "gap-4",
8724
+ layoutPane: "rounded-xl",
8725
+ layoutResizeHandleHorizontal: "w-2.5",
8726
+ layoutResizeHandleVertical: "h-2.5"
8682
8727
  }
8683
8728
  };
8684
8729
  var radiusSlots = {
@@ -8722,7 +8767,9 @@ var radiusSlots = {
8722
8767
  menuSubContent: "rounded-none",
8723
8768
  tableContainer: "rounded-none",
8724
8769
  tableEmptyIcon: "rounded-none",
8725
- tableLoadingSkeleton: "rounded-none"
8770
+ tableLoadingSkeleton: "rounded-none",
8771
+ layoutRoot: "rounded-none",
8772
+ layoutPane: "rounded-none"
8726
8773
  },
8727
8774
  sm: {
8728
8775
  buttonBase: "rounded-sm",
@@ -8764,7 +8811,9 @@ var radiusSlots = {
8764
8811
  menuSubContent: "rounded-sm",
8765
8812
  tableContainer: "rounded-sm",
8766
8813
  tableEmptyIcon: "rounded-sm",
8767
- tableLoadingSkeleton: "rounded-sm"
8814
+ tableLoadingSkeleton: "rounded-sm",
8815
+ layoutRoot: "rounded-sm",
8816
+ layoutPane: "rounded-sm"
8768
8817
  },
8769
8818
  md: {},
8770
8819
  lg: {
@@ -8801,7 +8850,9 @@ var radiusSlots = {
8801
8850
  menuSubContent: "rounded-lg",
8802
8851
  tableContainer: "rounded-xl",
8803
8852
  tableEmptyIcon: "rounded-xl",
8804
- tableLoadingSkeleton: "rounded-lg"
8853
+ tableLoadingSkeleton: "rounded-lg",
8854
+ layoutRoot: "rounded-xl",
8855
+ layoutPane: "rounded-xl"
8805
8856
  },
8806
8857
  xl: {
8807
8858
  buttonBase: "rounded-xl",
@@ -8839,7 +8890,9 @@ var radiusSlots = {
8839
8890
  menuSubContent: "rounded-xl",
8840
8891
  tableContainer: "rounded-2xl",
8841
8892
  tableEmptyIcon: "rounded-2xl",
8842
- tableLoadingSkeleton: "rounded-xl"
8893
+ tableLoadingSkeleton: "rounded-xl",
8894
+ layoutRoot: "rounded-2xl",
8895
+ layoutPane: "rounded-2xl"
8843
8896
  },
8844
8897
  full: {
8845
8898
  buttonBase: "rounded-full",
@@ -8881,7 +8934,9 @@ var radiusSlots = {
8881
8934
  menuSubContent: "rounded-2xl",
8882
8935
  tableContainer: "rounded-2xl",
8883
8936
  tableEmptyIcon: "rounded-full",
8884
- tableLoadingSkeleton: "rounded-full"
8937
+ tableLoadingSkeleton: "rounded-full",
8938
+ layoutRoot: "rounded-2xl",
8939
+ layoutPane: "rounded-2xl"
8885
8940
  }
8886
8941
  };
8887
8942
  var borderSlots = {
@@ -8923,7 +8978,10 @@ var borderSlots = {
8923
8978
  tableFooterBarAttached: "border-t border-transparent",
8924
8979
  tableRow: "border-transparent",
8925
8980
  tableEmptyRow: "border-transparent",
8926
- tableLoadingRow: "border-transparent"
8981
+ tableLoadingRow: "border-transparent",
8982
+ layoutRoot: "border-transparent",
8983
+ layoutPaneBordered: "border-transparent",
8984
+ layoutResizeHandle: "bg-transparent hover:bg-transparent active:bg-transparent focus-visible:bg-transparent"
8927
8985
  },
8928
8986
  subtle: {
8929
8987
  buttonDefault: "border-border/60",
@@ -8963,7 +9021,9 @@ var borderSlots = {
8963
9021
  tableFooterBarAttached: "border-t border-border/60",
8964
9022
  tableRow: "border-border/50",
8965
9023
  tableEmptyRow: "border-border/50",
8966
- tableLoadingRow: "border-border/50"
9024
+ tableLoadingRow: "border-border/50",
9025
+ layoutRoot: "border-border/60",
9026
+ layoutPaneBordered: "border-border/60"
8967
9027
  },
8968
9028
  solid: {},
8969
9029
  strong: {
@@ -9004,7 +9064,10 @@ var borderSlots = {
9004
9064
  tableFooterBarAttached: "border-t border-foreground/20",
9005
9065
  tableRow: "border-foreground/15",
9006
9066
  tableEmptyRow: "border-foreground/15",
9007
- tableLoadingRow: "border-foreground/15"
9067
+ tableLoadingRow: "border-foreground/15",
9068
+ layoutRoot: "border-foreground/20",
9069
+ layoutPaneBordered: "border-foreground/20",
9070
+ layoutResizeHandle: "hover:bg-foreground/15 active:bg-foreground/20 focus-visible:bg-foreground/15"
9008
9071
  }
9009
9072
  };
9010
9073
  var backgroundSlots = {
@@ -9046,7 +9109,11 @@ var backgroundSlots = {
9046
9109
  tableFooter: "bg-muted/35",
9047
9110
  tableFooterBar: "bg-muted/30 shadow-none",
9048
9111
  tableRowInteractive: "cursor-pointer hover:bg-muted/45",
9049
- tableLoadingSkeleton: "bg-muted"
9112
+ tableLoadingSkeleton: "bg-muted",
9113
+ layoutRoot: "bg-card",
9114
+ layoutPane: "bg-card",
9115
+ layoutPaneMuted: "bg-muted/35",
9116
+ layoutResizeHandle: "hover:bg-border/70 active:bg-border/80 focus-visible:bg-border/70"
9050
9117
  },
9051
9118
  soft: {
9052
9119
  buttonDefault: "bg-muted/30 hover:bg-muted/55",
@@ -9082,7 +9149,10 @@ var backgroundSlots = {
9082
9149
  tableFooter: "bg-muted/25",
9083
9150
  tableFooterBar: "bg-muted/25 shadow-none",
9084
9151
  tableRowInteractive: "cursor-pointer hover:bg-muted/35",
9085
- tableLoadingSkeleton: "bg-muted/65"
9152
+ tableLoadingSkeleton: "bg-muted/65",
9153
+ layoutRoot: "bg-background/95 shadow-sm",
9154
+ layoutPane: "bg-background/95 shadow-sm",
9155
+ layoutPaneSoft: "bg-background/95 shadow-md"
9086
9156
  },
9087
9157
  glass: {
9088
9158
  buttonBase: "backdrop-blur-md",
@@ -9143,7 +9213,13 @@ var backgroundSlots = {
9143
9213
  tableRow: "border-white/10",
9144
9214
  tableRowInteractive: "cursor-pointer hover:bg-white/[0.08]",
9145
9215
  tableHeadLabel: "text-foreground",
9146
- tableLoadingSkeleton: "bg-white/[0.16]"
9216
+ tableLoadingSkeleton: "bg-white/[0.16]",
9217
+ layoutRoot: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
9218
+ layoutPane: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
9219
+ layoutPaneMuted: "bg-white/[0.08]",
9220
+ layoutPaneSoft: "bg-white/[0.10] shadow-none backdrop-blur-md",
9221
+ layoutResizeHandle: "text-foreground/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
9222
+ layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
9147
9223
  },
9148
9224
  dark: {
9149
9225
  buttonBase: "border-white/15 text-white shadow-lg backdrop-blur",
@@ -9272,7 +9348,13 @@ var backgroundSlots = {
9272
9348
  menuSubTrigger: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white data-[state=open]:bg-white/[0.12]",
9273
9349
  menuSubTriggerIcon: "text-white/55",
9274
9350
  menuSubContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
9275
- tableLoadingSkeleton: "bg-white/[0.14]"
9351
+ tableLoadingSkeleton: "bg-white/[0.14]",
9352
+ layoutRoot: "border-white/10 bg-slate-950 text-white shadow-none",
9353
+ layoutPane: "border-white/10 bg-slate-950 text-white shadow-none",
9354
+ layoutPaneMuted: "bg-white/[0.06]",
9355
+ layoutPaneSoft: "bg-white/[0.08] shadow-none",
9356
+ layoutResizeHandle: "text-white/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
9357
+ layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
9276
9358
  }
9277
9359
  };
9278
9360
  var presetDefaults = {
@@ -11130,6 +11212,432 @@ var BaseInput = forwardRef(
11130
11212
  );
11131
11213
  }
11132
11214
  );
11215
+ var DEFAULT_SPLIT_SIZE = 50;
11216
+ var DEFAULT_MIN_SIZE = 20;
11217
+ var DEFAULT_MAX_SIZE = 80;
11218
+ var DEFAULT_KEYBOARD_STEP = 2.5;
11219
+ function toCssSize(value, fallback) {
11220
+ if (typeof value === "number") {
11221
+ if (!Number.isFinite(value) || value < 0) {
11222
+ throw new Error("BaseLayout size and gap props must be finite, non-negative numbers.");
11223
+ }
11224
+ return `${value}px`;
11225
+ }
11226
+ return value ?? fallback;
11227
+ }
11228
+ function assertPercent(name, value) {
11229
+ if (!Number.isFinite(value)) {
11230
+ throw new Error(`BaseLayoutSplit ${name} must be a finite number.`);
11231
+ }
11232
+ if (value < 0 || value > 100) {
11233
+ throw new Error(`BaseLayoutSplit ${name} must be between 0 and 100.`);
11234
+ }
11235
+ return value;
11236
+ }
11237
+ function clamp(value, min5, max5) {
11238
+ return Math.min(Math.max(value, min5), max5);
11239
+ }
11240
+ function resolveSplitBounds({
11241
+ minSize = DEFAULT_MIN_SIZE,
11242
+ maxSize = DEFAULT_MAX_SIZE,
11243
+ keyboardStep = DEFAULT_KEYBOARD_STEP
11244
+ }) {
11245
+ const min5 = assertPercent("minSize", minSize);
11246
+ const max5 = assertPercent("maxSize", maxSize);
11247
+ if (min5 > max5) {
11248
+ throw new Error("BaseLayoutSplit minSize cannot be greater than maxSize.");
11249
+ }
11250
+ if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {
11251
+ throw new Error("BaseLayoutSplit keyboardStep must be a finite positive number.");
11252
+ }
11253
+ return { min: min5, max: max5, keyboardStep };
11254
+ }
11255
+ function resolveSplitSize(name, value, fallback, min5, max5) {
11256
+ return clamp(assertPercent(name, value ?? fallback), min5, max5);
11257
+ }
11258
+ function getSeparatorOrientation(orientation) {
11259
+ return orientation === "horizontal" ? "vertical" : "horizontal";
11260
+ }
11261
+ function BaseLayout({
11262
+ header,
11263
+ sidebar,
11264
+ aside,
11265
+ footer,
11266
+ children,
11267
+ sidebarSize,
11268
+ asideSize,
11269
+ gap,
11270
+ fullHeight,
11271
+ appearance,
11272
+ className,
11273
+ classNames,
11274
+ style,
11275
+ ...layoutProps
11276
+ }) {
11277
+ const theme = resolveBaseAppearance(appearance);
11278
+ const hasHeader = hasRenderableNode(header);
11279
+ const hasSidebar = hasRenderableNode(sidebar);
11280
+ const hasAside = hasRenderableNode(aside);
11281
+ const hasFooter = hasRenderableNode(footer);
11282
+ const bodyColumns = [
11283
+ hasSidebar ? "var(--base-layout-sidebar-size)" : void 0,
11284
+ "minmax(0, 1fr)",
11285
+ hasAside ? "var(--base-layout-aside-size)" : void 0
11286
+ ].filter(Boolean).join(" ");
11287
+ const layoutRows = [
11288
+ hasHeader ? "auto" : void 0,
11289
+ "minmax(0, 1fr)",
11290
+ hasFooter ? "auto" : void 0
11291
+ ].filter(Boolean).join(" ");
11292
+ const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
11293
+ const layoutStyle = {
11294
+ ...theme.styles.layout,
11295
+ "--base-layout-sidebar-size": toCssSize(sidebarSize, "16rem"),
11296
+ "--base-layout-aside-size": toCssSize(asideSize, "20rem"),
11297
+ gridTemplateRows: layoutRows,
11298
+ ...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
11299
+ ...style
11300
+ };
11301
+ const bodyStyle = {
11302
+ ...theme.styles.layoutBody,
11303
+ gridTemplateColumns: bodyColumns,
11304
+ ...resolvedGap !== void 0 ? { gap: resolvedGap } : {}
11305
+ };
11306
+ return /* @__PURE__ */ jsxs(
11307
+ "div",
11308
+ {
11309
+ ...layoutProps,
11310
+ className: cn(
11311
+ theme.slots.layoutRoot,
11312
+ fullHeight && theme.slots.layoutRootFull,
11313
+ classNames?.root,
11314
+ className
11315
+ ),
11316
+ style: layoutStyle,
11317
+ children: [
11318
+ hasHeader ? /* @__PURE__ */ jsx(
11319
+ "div",
11320
+ {
11321
+ className: cn(theme.slots.layoutHeader, classNames?.header),
11322
+ style: theme.styles.layoutHeader,
11323
+ children: header
11324
+ }
11325
+ ) : null,
11326
+ /* @__PURE__ */ jsxs(
11327
+ "div",
11328
+ {
11329
+ className: cn(theme.slots.layoutBody, classNames?.body),
11330
+ style: bodyStyle,
11331
+ children: [
11332
+ hasSidebar ? /* @__PURE__ */ jsx(
11333
+ "aside",
11334
+ {
11335
+ className: cn(theme.slots.layoutSidebar, classNames?.sidebar),
11336
+ style: theme.styles.layoutSidebar,
11337
+ children: sidebar
11338
+ }
11339
+ ) : null,
11340
+ /* @__PURE__ */ jsx(
11341
+ "main",
11342
+ {
11343
+ className: cn(theme.slots.layoutMain, classNames?.main),
11344
+ style: theme.styles.layoutMain,
11345
+ children
11346
+ }
11347
+ ),
11348
+ hasAside ? /* @__PURE__ */ jsx(
11349
+ "aside",
11350
+ {
11351
+ className: cn(theme.slots.layoutAside, classNames?.aside),
11352
+ style: theme.styles.layoutAside,
11353
+ children: aside
11354
+ }
11355
+ ) : null
11356
+ ]
11357
+ }
11358
+ ),
11359
+ hasFooter ? /* @__PURE__ */ jsx(
11360
+ "div",
11361
+ {
11362
+ className: cn(theme.slots.layoutFooter, classNames?.footer),
11363
+ style: theme.styles.layoutFooter,
11364
+ children: footer
11365
+ }
11366
+ ) : null
11367
+ ]
11368
+ }
11369
+ );
11370
+ }
11371
+ function BaseLayoutPane({
11372
+ as = "div",
11373
+ scrollable = false,
11374
+ bordered = true,
11375
+ surface = "default",
11376
+ children,
11377
+ appearance,
11378
+ className,
11379
+ classNames,
11380
+ style,
11381
+ ...paneProps
11382
+ }) {
11383
+ const theme = resolveBaseAppearance(appearance);
11384
+ const Component = as;
11385
+ return /* @__PURE__ */ jsx(
11386
+ Component,
11387
+ {
11388
+ ...paneProps,
11389
+ className: cn(
11390
+ theme.slots.layoutPane,
11391
+ scrollable && theme.slots.layoutPaneScrollable,
11392
+ bordered && theme.slots.layoutPaneBordered,
11393
+ surface === "muted" && theme.slots.layoutPaneMuted,
11394
+ surface === "soft" && theme.slots.layoutPaneSoft,
11395
+ surface === "transparent" && theme.slots.layoutPaneTransparent,
11396
+ classNames?.root,
11397
+ className
11398
+ ),
11399
+ style: {
11400
+ ...theme.styles.layoutPane,
11401
+ ...style
11402
+ },
11403
+ children
11404
+ }
11405
+ );
11406
+ }
11407
+ function BaseLayoutResizeHandle({
11408
+ orientation = "horizontal",
11409
+ resizable = false,
11410
+ disabled = false,
11411
+ size,
11412
+ minSize,
11413
+ maxSize,
11414
+ label = "Resize panels",
11415
+ appearance,
11416
+ className,
11417
+ classNames,
11418
+ style,
11419
+ tabIndex,
11420
+ ...handleProps
11421
+ }) {
11422
+ const theme = resolveBaseAppearance(appearance);
11423
+ const interactive = resizable && !disabled;
11424
+ const separatorOrientation = getSeparatorOrientation(orientation);
11425
+ return /* @__PURE__ */ jsx(
11426
+ "div",
11427
+ {
11428
+ ...handleProps,
11429
+ role: interactive ? "separator" : void 0,
11430
+ "aria-label": interactive ? label : void 0,
11431
+ "aria-orientation": interactive ? separatorOrientation : void 0,
11432
+ "aria-valuemin": interactive ? minSize : void 0,
11433
+ "aria-valuemax": interactive ? maxSize : void 0,
11434
+ "aria-valuenow": interactive ? size : void 0,
11435
+ "aria-disabled": interactive ? void 0 : true,
11436
+ tabIndex: interactive ? tabIndex ?? 0 : void 0,
11437
+ className: cn(
11438
+ theme.slots.layoutResizeHandle,
11439
+ orientation === "horizontal" ? theme.slots.layoutResizeHandleHorizontal : theme.slots.layoutResizeHandleVertical,
11440
+ !interactive && theme.slots.layoutResizeHandleDisabled,
11441
+ classNames?.root,
11442
+ className
11443
+ ),
11444
+ style: {
11445
+ ...theme.styles.layoutResizeHandle,
11446
+ ...style
11447
+ },
11448
+ children: /* @__PURE__ */ jsx(
11449
+ "span",
11450
+ {
11451
+ "aria-hidden": "true",
11452
+ className: cn(
11453
+ theme.slots.layoutResizeHandleIndicator,
11454
+ orientation === "horizontal" ? "h-8 w-px" : "h-px w-8",
11455
+ classNames?.indicator
11456
+ )
11457
+ }
11458
+ )
11459
+ }
11460
+ );
11461
+ }
11462
+ function BaseLayoutSplit({
11463
+ orientation = "horizontal",
11464
+ primary,
11465
+ secondary,
11466
+ children,
11467
+ resizable = false,
11468
+ size,
11469
+ defaultSize,
11470
+ minSize,
11471
+ maxSize,
11472
+ gap,
11473
+ keyboardStep,
11474
+ resizeLabel,
11475
+ appearance,
11476
+ className,
11477
+ classNames,
11478
+ style,
11479
+ onSizeChange,
11480
+ ...splitProps
11481
+ }) {
11482
+ const theme = resolveBaseAppearance(appearance);
11483
+ const bounds = resolveSplitBounds({ minSize, maxSize, keyboardStep });
11484
+ const initialSize = resolveSplitSize(
11485
+ "defaultSize",
11486
+ defaultSize,
11487
+ DEFAULT_SPLIT_SIZE,
11488
+ bounds.min,
11489
+ bounds.max
11490
+ );
11491
+ const [uncontrolledSize, setUncontrolledSize] = useState(initialSize);
11492
+ const rootRef = useRef(null);
11493
+ const cleanupRef = useRef(null);
11494
+ const controlled = size !== void 0;
11495
+ const renderedSize = resolveSplitSize(
11496
+ "size",
11497
+ controlled ? size : uncontrolledSize,
11498
+ initialSize,
11499
+ bounds.min,
11500
+ bounds.max
11501
+ );
11502
+ const commitSize = useCallback(
11503
+ (nextSize) => {
11504
+ const clampedSize = clamp(nextSize, bounds.min, bounds.max);
11505
+ if (!controlled) {
11506
+ setUncontrolledSize(clampedSize);
11507
+ }
11508
+ onSizeChange?.(clampedSize);
11509
+ },
11510
+ [bounds.max, bounds.min, controlled, onSizeChange]
11511
+ );
11512
+ const updateFromPointer = useCallback(
11513
+ (event) => {
11514
+ const root = rootRef.current;
11515
+ if (!root) return;
11516
+ const rect = root.getBoundingClientRect();
11517
+ const total = orientation === "horizontal" ? rect.width : rect.height;
11518
+ if (total <= 0) return;
11519
+ const offset = orientation === "horizontal" ? event.clientX - rect.left : event.clientY - rect.top;
11520
+ commitSize(offset / total * 100);
11521
+ },
11522
+ [commitSize, orientation]
11523
+ );
11524
+ const stopResize = useCallback(() => {
11525
+ cleanupRef.current?.();
11526
+ cleanupRef.current = null;
11527
+ }, []);
11528
+ useEffect(() => stopResize, [stopResize]);
11529
+ const handlePointerDown = (event) => {
11530
+ if (!resizable) return;
11531
+ event.preventDefault();
11532
+ stopResize();
11533
+ updateFromPointer(event);
11534
+ const handleMove = (nextEvent) => {
11535
+ updateFromPointer(nextEvent);
11536
+ };
11537
+ const handleStop = () => {
11538
+ stopResize();
11539
+ };
11540
+ window.addEventListener("pointermove", handleMove);
11541
+ window.addEventListener("pointerup", handleStop, { once: true });
11542
+ window.addEventListener("pointercancel", handleStop, { once: true });
11543
+ cleanupRef.current = () => {
11544
+ window.removeEventListener("pointermove", handleMove);
11545
+ window.removeEventListener("pointerup", handleStop);
11546
+ window.removeEventListener("pointercancel", handleStop);
11547
+ };
11548
+ };
11549
+ const handleKeyDown = (event) => {
11550
+ if (!resizable) return;
11551
+ const step = event.shiftKey ? bounds.keyboardStep * 4 : bounds.keyboardStep;
11552
+ let nextSize;
11553
+ if (event.key === "Home") nextSize = bounds.min;
11554
+ if (event.key === "End") nextSize = bounds.max;
11555
+ if (orientation === "horizontal" && event.key === "ArrowLeft") {
11556
+ nextSize = renderedSize - step;
11557
+ }
11558
+ if (orientation === "horizontal" && event.key === "ArrowRight") {
11559
+ nextSize = renderedSize + step;
11560
+ }
11561
+ if (orientation === "vertical" && event.key === "ArrowUp") {
11562
+ nextSize = renderedSize - step;
11563
+ }
11564
+ if (orientation === "vertical" && event.key === "ArrowDown") {
11565
+ nextSize = renderedSize + step;
11566
+ }
11567
+ if (nextSize === void 0) return;
11568
+ event.preventDefault();
11569
+ commitSize(nextSize);
11570
+ };
11571
+ const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
11572
+ const resizeTrack = resolvedGap !== void 0 ? "var(--base-layout-split-gap)" : "auto";
11573
+ const resizeHandleStyle = resolvedGap !== void 0 ? orientation === "horizontal" ? { width: "var(--base-layout-split-gap)" } : { height: "var(--base-layout-split-gap)" } : void 0;
11574
+ const splitStyle = {
11575
+ ...theme.styles.layoutSplit,
11576
+ [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: resizable ? `${renderedSize}% ${resizeTrack} minmax(0, 1fr)` : `${renderedSize}% minmax(0, 1fr)`,
11577
+ ...resizable ? { gap: 0 } : {},
11578
+ ...resolvedGap !== void 0 ? {
11579
+ "--base-layout-split-gap": resolvedGap,
11580
+ ...resizable ? {} : { gap: resolvedGap }
11581
+ } : {},
11582
+ ...style
11583
+ };
11584
+ return /* @__PURE__ */ jsxs(
11585
+ "div",
11586
+ {
11587
+ ...splitProps,
11588
+ ref: rootRef,
11589
+ className: cn(
11590
+ theme.slots.layoutSplitRoot,
11591
+ orientation === "horizontal" ? theme.slots.layoutSplitHorizontal : theme.slots.layoutSplitVertical,
11592
+ classNames?.root,
11593
+ className
11594
+ ),
11595
+ style: splitStyle,
11596
+ children: [
11597
+ /* @__PURE__ */ jsx(
11598
+ "div",
11599
+ {
11600
+ className: cn(
11601
+ theme.slots.layoutSplitPane,
11602
+ theme.slots.layoutSplitPrimary,
11603
+ classNames?.primary
11604
+ ),
11605
+ style: theme.styles.layoutSplitPane,
11606
+ children: hasRenderableNode(primary) ? primary : children
11607
+ }
11608
+ ),
11609
+ resizable ? /* @__PURE__ */ jsx(
11610
+ BaseLayoutResizeHandle,
11611
+ {
11612
+ orientation,
11613
+ resizable: true,
11614
+ size: renderedSize,
11615
+ minSize: bounds.min,
11616
+ maxSize: bounds.max,
11617
+ label: resizeLabel,
11618
+ appearance,
11619
+ className: classNames?.handle,
11620
+ style: resizeHandleStyle,
11621
+ onPointerDown: handlePointerDown,
11622
+ onKeyDown: handleKeyDown
11623
+ }
11624
+ ) : null,
11625
+ /* @__PURE__ */ jsx(
11626
+ "div",
11627
+ {
11628
+ className: cn(
11629
+ theme.slots.layoutSplitPane,
11630
+ theme.slots.layoutSplitSecondary,
11631
+ classNames?.secondary
11632
+ ),
11633
+ style: theme.styles.layoutSplitPane,
11634
+ children: secondary
11635
+ }
11636
+ )
11637
+ ]
11638
+ }
11639
+ );
11640
+ }
11133
11641
  function DefaultLoadingIcon({ className }) {
11134
11642
  return /* @__PURE__ */ jsxs(
11135
11643
  "svg",
@@ -11419,7 +11927,7 @@ function BasePagination({
11419
11927
  function toFiniteNumber(value, fallback) {
11420
11928
  return Number.isFinite(value) ? Number(value) : fallback;
11421
11929
  }
11422
- function clamp(value, min5, max5) {
11930
+ function clamp2(value, min5, max5) {
11423
11931
  return Math.min(Math.max(value, min5), max5);
11424
11932
  }
11425
11933
  function BaseProgress({
@@ -11437,7 +11945,7 @@ function BaseProgress({
11437
11945
  }) {
11438
11946
  const theme = resolveBaseAppearance(appearance);
11439
11947
  const safeMax = Math.max(toFiniteNumber(max5, 100), 1);
11440
- const safeValue = clamp(toFiniteNumber(value, 0), 0, safeMax);
11948
+ const safeValue = clamp2(toFiniteNumber(value, 0), 0, safeMax);
11441
11949
  const percent = safeValue / safeMax * 100;
11442
11950
  const renderedValue = valueFormatter?.(safeValue, safeMax) ?? `${Math.round(percent)}%`;
11443
11951
  const hasLabelRow = hasRenderableNode(label) || showValue;
@@ -12203,7 +12711,7 @@ function useBaseTableContext(appearance) {
12203
12711
  }
12204
12712
  };
12205
12713
  }
12206
- function toCssSize(value) {
12714
+ function toCssSize2(value) {
12207
12715
  if (value === void 0) return void 0;
12208
12716
  return typeof value === "number" ? `${value}px` : value;
12209
12717
  }
@@ -12416,7 +12924,7 @@ function BaseTableRow({
12416
12924
  }
12417
12925
  );
12418
12926
  }
12419
- function BaseTableHead({
12927
+ var BaseTableHead = forwardRef(function BaseTableHead2({
12420
12928
  columnId,
12421
12929
  align = "left",
12422
12930
  icon,
@@ -12444,10 +12952,18 @@ function BaseTableHead({
12444
12952
  onDragOver,
12445
12953
  onDrop,
12446
12954
  ...headProps
12447
- }) {
12955
+ }, forwardedRef) {
12448
12956
  const tableContext = useBaseTableContext(appearance);
12449
12957
  const { theme } = tableContext;
12450
12958
  const headRef = useRef(null);
12959
+ const setHeadRef = (node) => {
12960
+ headRef.current = node;
12961
+ if (typeof forwardedRef === "function") {
12962
+ forwardedRef(node);
12963
+ } else if (forwardedRef) {
12964
+ forwardedRef.current = node;
12965
+ }
12966
+ };
12451
12967
  const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
12452
12968
  const canDrag = Boolean(
12453
12969
  columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
@@ -12602,7 +13118,7 @@ function BaseTableHead({
12602
13118
  "th",
12603
13119
  {
12604
13120
  ...headProps,
12605
- ref: headRef,
13121
+ ref: setHeadRef,
12606
13122
  scope: headProps.scope ?? "col",
12607
13123
  "aria-sort": ariaSort,
12608
13124
  className: cn(
@@ -12614,9 +13130,9 @@ function BaseTableHead({
12614
13130
  ),
12615
13131
  style: {
12616
13132
  ...theme.styles.tableHead,
12617
- width: toCssSize(controlledWidth),
12618
- minWidth: toCssSize(minWidth),
12619
- maxWidth: toCssSize(maxWidth),
13133
+ width: toCssSize2(controlledWidth),
13134
+ minWidth: toCssSize2(minWidth),
13135
+ maxWidth: toCssSize2(maxWidth),
12620
13136
  ...style
12621
13137
  },
12622
13138
  onDragOver: handleDragOver,
@@ -12637,7 +13153,7 @@ function BaseTableHead({
12637
13153
  ]
12638
13154
  }
12639
13155
  );
12640
- }
13156
+ });
12641
13157
  function BaseTableCell({
12642
13158
  align = "left",
12643
13159
  appearance,
@@ -12765,7 +13281,7 @@ function BaseTableLoading({
12765
13281
  classNames?.skeleton
12766
13282
  ),
12767
13283
  style: {
12768
- width: toCssSize(columnWidths[columnIndex])
13284
+ width: toCssSize2(columnWidths[columnIndex])
12769
13285
  }
12770
13286
  }
12771
13287
  )
@@ -15780,7 +16296,7 @@ var DEFAULT_ZOOM_STEP = 1.18;
15780
16296
  var DEFAULT_STAGE_PADDING = 16;
15781
16297
  var MAX_SAFE_SCALE = 1e6;
15782
16298
  var MIN_SAFE_SCALE = 1e-6;
15783
- var clamp2 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
16299
+ var clamp3 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
15784
16300
  var isNoDragTarget = (target) => target instanceof Element && Boolean(target.closest('[data-no-drag="true"]'));
15785
16301
  function ResetIcon() {
15786
16302
  return /* @__PURE__ */ jsxs(
@@ -15904,7 +16420,7 @@ function DataExplorerImagePreview({
15904
16420
  availableWidth / size.width,
15905
16421
  availableHeight / size.height
15906
16422
  );
15907
- const nextScale = clamp2(
16423
+ const nextScale = clamp3(
15908
16424
  fitScale,
15909
16425
  normalizedMinScale,
15910
16426
  normalizedMaxScale
@@ -15958,7 +16474,7 @@ function DataExplorerImagePreview({
15958
16474
  if (!Number.isFinite(factor) || factor === 1) return;
15959
16475
  if (!Number.isFinite(stageX) || !Number.isFinite(stageY)) return;
15960
16476
  setView((current) => {
15961
- const nextScale = clamp2(
16477
+ const nextScale = clamp3(
15962
16478
  current.scale * factor,
15963
16479
  normalizedMinScale,
15964
16480
  normalizedMaxScale
@@ -21299,7 +21815,7 @@ function getWorkbenchIconComponent(icon) {
21299
21815
  if (!icon || !isWorkbenchIconComponent(icon)) return null;
21300
21816
  return icon;
21301
21817
  }
21302
- function toCssSize2(value) {
21818
+ function toCssSize3(value) {
21303
21819
  if (value === void 0) return void 0;
21304
21820
  return typeof value === "number" ? `${value}px` : value;
21305
21821
  }
@@ -21448,7 +21964,7 @@ function WorkbenchTableView({
21448
21964
  "div",
21449
21965
  {
21450
21966
  className: cn("w-full overflow-auto", classNames?.scrollArea),
21451
- style: { maxHeight: toCssSize2(bodyMaxHeight) },
21967
+ style: { maxHeight: toCssSize3(bodyMaxHeight) },
21452
21968
  children: /* @__PURE__ */ jsxs(
21453
21969
  BaseTable,
21454
21970
  {
@@ -21594,6 +22110,659 @@ function WorkbenchTableView({
21594
22110
  }
21595
22111
  );
21596
22112
  }
22113
+ function toCssSize4(value) {
22114
+ if (value === void 0) return void 0;
22115
+ return typeof value === "number" ? `${value}px` : value;
22116
+ }
22117
+ function isBrowser() {
22118
+ return typeof window !== "undefined";
22119
+ }
22120
+ function defaultGetRowKey2(row, rowIndex) {
22121
+ return row?.id ?? row?.key ?? rowIndex;
22122
+ }
22123
+ function getColumnDefaultSize(column) {
22124
+ if (typeof column.width === "number") return column.width;
22125
+ if (typeof column.minWidth === "number") return column.minWidth;
22126
+ return 160;
22127
+ }
22128
+ function buildDefaultColumnSizes(columns, explicit) {
22129
+ return columns.reduce((acc, column) => {
22130
+ acc[column.key] = explicit?.[column.key] ?? getColumnDefaultSize(column);
22131
+ return acc;
22132
+ }, {});
22133
+ }
22134
+ function loadStoredColumnSizes(storageKey, defaults) {
22135
+ if (!storageKey || !isBrowser()) return defaults;
22136
+ try {
22137
+ const parsed = JSON.parse(window.localStorage.getItem(storageKey) || "{}");
22138
+ return Object.keys(defaults).reduce((acc, key) => {
22139
+ const value = Number(parsed?.[key]);
22140
+ acc[key] = Number.isFinite(value) ? value : defaults[key];
22141
+ return acc;
22142
+ }, {});
22143
+ } catch {
22144
+ return defaults;
22145
+ }
22146
+ }
22147
+ function persistColumnSizes(storageKey, sizes) {
22148
+ if (!storageKey || !isBrowser()) return;
22149
+ window.localStorage.setItem(storageKey, JSON.stringify(sizes));
22150
+ }
22151
+ function getFrozenColumnStorageKey(storageKey) {
22152
+ return storageKey ? `${storageKey}.frozenColumnCount` : void 0;
22153
+ }
22154
+ function getFrozenEndColumnStorageKey(storageKey) {
22155
+ return storageKey ? `${storageKey}.frozenEndColumnCount` : void 0;
22156
+ }
22157
+ function clampFrozenColumnCount(count, columnCount) {
22158
+ if (!Number.isFinite(count)) return 0;
22159
+ return Math.max(0, Math.min(Math.round(count), columnCount));
22160
+ }
22161
+ function normalizeFrozenColumnCounts(startCount, endCount, columnCount) {
22162
+ const normalizedStartCount = clampFrozenColumnCount(startCount, columnCount);
22163
+ const normalizedEndCount = clampFrozenColumnCount(endCount, Math.max(0, columnCount - normalizedStartCount));
22164
+ return {
22165
+ startCount: normalizedStartCount,
22166
+ endCount: normalizedEndCount
22167
+ };
22168
+ }
22169
+ function loadStoredFrozenColumnCount(storageKey, defaultCount, columnCount) {
22170
+ const fallback = clampFrozenColumnCount(defaultCount, columnCount);
22171
+ const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
22172
+ if (!frozenStorageKey || !isBrowser()) return fallback;
22173
+ try {
22174
+ const storedValue = window.localStorage.getItem(frozenStorageKey);
22175
+ if (storedValue === null) return fallback;
22176
+ const value = Number(storedValue);
22177
+ return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
22178
+ } catch {
22179
+ return fallback;
22180
+ }
22181
+ }
22182
+ function persistFrozenColumnCount(storageKey, count) {
22183
+ const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
22184
+ if (!frozenStorageKey || !isBrowser()) return;
22185
+ window.localStorage.setItem(frozenStorageKey, String(count));
22186
+ }
22187
+ function loadStoredFrozenEndColumnCount(storageKey, defaultCount, columnCount) {
22188
+ const fallback = clampFrozenColumnCount(defaultCount, columnCount);
22189
+ const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
22190
+ if (!frozenStorageKey || !isBrowser()) return fallback;
22191
+ try {
22192
+ const storedValue = window.localStorage.getItem(frozenStorageKey);
22193
+ if (storedValue === null) return fallback;
22194
+ const value = Number(storedValue);
22195
+ return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
22196
+ } catch {
22197
+ return fallback;
22198
+ }
22199
+ }
22200
+ function persistFrozenEndColumnCount(storageKey, count) {
22201
+ const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
22202
+ if (!frozenStorageKey || !isBrowser()) return;
22203
+ window.localStorage.setItem(frozenStorageKey, String(count));
22204
+ }
22205
+ function normalizeColumnOrder2(columnKeys, columnOrder) {
22206
+ const validColumnKeys = new Set(columnKeys);
22207
+ const orderedKeys = (columnOrder || []).filter((columnKey) => validColumnKeys.has(columnKey));
22208
+ const orderedKeySet = new Set(orderedKeys);
22209
+ const remainingKeys = columnKeys.filter((columnKey) => !orderedKeySet.has(columnKey));
22210
+ return [...orderedKeys, ...remainingKeys];
22211
+ }
22212
+ function getOrderedColumns2(columns, columnOrder) {
22213
+ const normalizedOrder = normalizeColumnOrder2(columns.map((column) => column.key), columnOrder);
22214
+ const columnMap = new Map(columns.map((column) => [column.key, column]));
22215
+ return normalizedOrder.map((columnKey) => columnMap.get(columnKey)).filter(Boolean);
22216
+ }
22217
+ function getColumnNumericWidth(column, columnSizes) {
22218
+ const controlledWidth = columnSizes[column.key];
22219
+ if (typeof controlledWidth === "number") return controlledWidth;
22220
+ return getColumnDefaultSize(column);
22221
+ }
22222
+ function buildFrozenOffsets(columns, columnSizes, frozenColumnCount) {
22223
+ const offsets = /* @__PURE__ */ new Map();
22224
+ let left = 0;
22225
+ columns.slice(0, Math.max(0, frozenColumnCount)).forEach((column) => {
22226
+ offsets.set(column.key, left);
22227
+ left += getColumnNumericWidth(column, columnSizes);
22228
+ });
22229
+ return offsets;
22230
+ }
22231
+ function buildFrozenEndOffsets(columns, columnSizes, frozenEndColumnCount) {
22232
+ const offsets = /* @__PURE__ */ new Map();
22233
+ let right = 0;
22234
+ columns.slice(Math.max(0, columns.length - frozenEndColumnCount)).reverse().forEach((column) => {
22235
+ offsets.set(column.key, right);
22236
+ right += getColumnNumericWidth(column, columnSizes);
22237
+ });
22238
+ return offsets;
22239
+ }
22240
+ function resolveRowClassName(rowClassName, row, rowIndex) {
22241
+ return typeof rowClassName === "function" ? rowClassName(row, rowIndex) : rowClassName;
22242
+ }
22243
+ function renderDefaultCell(column, row) {
22244
+ const value = row?.[column.key];
22245
+ if (value === void 0 || value === null || value === "") return "\u2014";
22246
+ return String(value);
22247
+ }
22248
+ function InteractiveTableCellContent({
22249
+ children,
22250
+ wrap
22251
+ }) {
22252
+ return /* @__PURE__ */ jsx(
22253
+ "div",
22254
+ {
22255
+ className: cn(
22256
+ "min-w-0 max-w-full overflow-auto overscroll-contain [scrollbar-width:thin]",
22257
+ wrap ? "max-h-20 whitespace-pre-wrap break-words leading-5" : "whitespace-nowrap"
22258
+ ),
22259
+ children
22260
+ }
22261
+ );
22262
+ }
22263
+ function PinIcon({ className }) {
22264
+ return /* @__PURE__ */ jsxs(
22265
+ "svg",
22266
+ {
22267
+ "aria-hidden": "true",
22268
+ viewBox: "0 0 16 16",
22269
+ className,
22270
+ fill: "none",
22271
+ stroke: "currentColor",
22272
+ strokeLinecap: "round",
22273
+ strokeLinejoin: "round",
22274
+ strokeWidth: "1.75",
22275
+ children: [
22276
+ /* @__PURE__ */ jsx("path", { d: "M5.25 2.75h5.5" }),
22277
+ /* @__PURE__ */ jsx("path", { d: "M6.25 2.75v4L4.5 9.25h7L9.75 6.75v-4" }),
22278
+ /* @__PURE__ */ jsx("path", { d: "M8 9.25v4" })
22279
+ ]
22280
+ }
22281
+ );
22282
+ }
22283
+ function InteractiveTable({
22284
+ rows = [],
22285
+ columns = [],
22286
+ pinnedTopRows = [],
22287
+ getRowKey = defaultGetRowKey2,
22288
+ getPinnedTopRowKey = defaultGetRowKey2,
22289
+ renderCell,
22290
+ renderPinnedTopCell,
22291
+ renderColumnHeader,
22292
+ onRowClick,
22293
+ getRowState,
22294
+ rowClassName,
22295
+ pinnedTopRowClassName,
22296
+ emptyState = "\u2014",
22297
+ columnMenuLabels,
22298
+ columnStorageKey,
22299
+ columnOrder,
22300
+ columnSizes,
22301
+ defaultColumnSizes,
22302
+ columnDragEnabled = false,
22303
+ columnResizeEnabled = true,
22304
+ frozenColumnCount = 0,
22305
+ frozenEndColumnCount = 0,
22306
+ tableMinWidth,
22307
+ bodyMaxHeight = "min(60vh, 42rem)",
22308
+ appearance,
22309
+ className,
22310
+ tableClassName,
22311
+ classNames,
22312
+ style,
22313
+ onColumnOrderChange,
22314
+ onColumnSizeChange,
22315
+ onResetColumnSizes,
22316
+ onFrozenColumnCountChange,
22317
+ onFrozenEndColumnCountChange,
22318
+ onSort
22319
+ }) {
22320
+ const columnKeySignature = columns.map((column) => column.key).join("");
22321
+ const defaultOrder = useMemo(
22322
+ () => columnKeySignature ? columnKeySignature.split("") : [],
22323
+ [columnKeySignature]
22324
+ );
22325
+ const defaultSizes = useMemo(
22326
+ () => buildDefaultColumnSizes(columns, defaultColumnSizes),
22327
+ [columns, defaultColumnSizes]
22328
+ );
22329
+ const [internalColumnOrder, setInternalColumnOrder] = useState(defaultOrder);
22330
+ const [internalColumnSizes, setInternalColumnSizes] = useState(() => loadStoredColumnSizes(columnStorageKey, defaultSizes));
22331
+ const [internalFrozenColumnCount, setInternalFrozenColumnCount] = useState(() => loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
22332
+ const [internalFrozenEndColumnCount, setInternalFrozenEndColumnCount] = useState(() => loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
22333
+ useEffect(() => {
22334
+ setInternalColumnOrder((current) => normalizeColumnOrder2(defaultOrder, current));
22335
+ }, [defaultOrder]);
22336
+ useEffect(() => {
22337
+ if (columnSizes) return;
22338
+ setInternalColumnSizes(loadStoredColumnSizes(columnStorageKey, defaultSizes));
22339
+ }, [columnSizes, columnStorageKey, defaultSizes]);
22340
+ useEffect(() => {
22341
+ setInternalFrozenColumnCount(loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
22342
+ }, [columnStorageKey, columns.length, frozenColumnCount]);
22343
+ useEffect(() => {
22344
+ setInternalFrozenEndColumnCount(loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
22345
+ }, [columnStorageKey, columns.length, frozenEndColumnCount]);
22346
+ const resolvedColumnOrder = columnOrder ? normalizeColumnOrder2(defaultOrder, columnOrder) : internalColumnOrder;
22347
+ const resolvedColumnSizes = columnSizes ?? internalColumnSizes;
22348
+ const orderedColumns = getOrderedColumns2(columns, resolvedColumnOrder);
22349
+ const {
22350
+ startCount: resolvedFrozenColumnCount,
22351
+ endCount: resolvedFrozenEndColumnCount
22352
+ } = normalizeFrozenColumnCounts(internalFrozenColumnCount, internalFrozenEndColumnCount, orderedColumns.length);
22353
+ const frozenOffsets = buildFrozenOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenColumnCount);
22354
+ const frozenEndOffsets = buildFrozenEndOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenEndColumnCount);
22355
+ const resolvedMinWidth = tableMinWidth ?? Math.max(760, orderedColumns.reduce((total, column) => total + getColumnNumericWidth(column, resolvedColumnSizes), 0));
22356
+ const labels = {
22357
+ columnActions: columnMenuLabels?.columnActions ?? "Column actions",
22358
+ freezeColumn: columnMenuLabels?.freezeColumn ?? "Freeze to left",
22359
+ freezeEndColumn: columnMenuLabels?.freezeEndColumn ?? "Freeze to right",
22360
+ unfreezeColumn: columnMenuLabels?.unfreezeColumn ?? "Unfreeze from left",
22361
+ unfreezeEndColumn: columnMenuLabels?.unfreezeEndColumn ?? "Unfreeze from right",
22362
+ unfreezeAllColumns: columnMenuLabels?.unfreezeAllColumns ?? "Unfreeze all columns",
22363
+ resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? "Reset column width",
22364
+ frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? "Frozen column"
22365
+ };
22366
+ const handleColumnOrderChange = useCallback((nextOrder, detail) => {
22367
+ const normalizedOrder = normalizeColumnOrder2(defaultOrder, nextOrder);
22368
+ if (!columnOrder) {
22369
+ setInternalColumnOrder(normalizedOrder);
22370
+ }
22371
+ onColumnOrderChange?.(normalizedOrder, detail);
22372
+ }, [columnOrder, defaultOrder, onColumnOrderChange]);
22373
+ const handleColumnSizeChange = useCallback((columnId, width, detail) => {
22374
+ const column = columns.find((item) => item.key === columnId);
22375
+ const minWidth = column?.minWidth;
22376
+ const maxWidth = column?.maxWidth;
22377
+ const nextWidth = Math.max(
22378
+ typeof minWidth === "number" ? minWidth : 0,
22379
+ Math.min(width, typeof maxWidth === "number" ? maxWidth : Number.POSITIVE_INFINITY)
22380
+ );
22381
+ const nextSizes = {
22382
+ ...resolvedColumnSizes,
22383
+ [columnId]: nextWidth
22384
+ };
22385
+ if (!columnSizes) {
22386
+ setInternalColumnSizes(nextSizes);
22387
+ }
22388
+ persistColumnSizes(columnStorageKey, nextSizes);
22389
+ onColumnSizeChange?.(columnId, nextWidth, detail);
22390
+ }, [columnSizes, columnStorageKey, columns, onColumnSizeChange, resolvedColumnSizes]);
22391
+ const handleResetColumnSize = useCallback((column) => {
22392
+ const nextWidth = defaultSizes[column.key] ?? getColumnDefaultSize(column);
22393
+ const previousWidth = getColumnNumericWidth(column, resolvedColumnSizes);
22394
+ const nextSizes = {
22395
+ ...resolvedColumnSizes,
22396
+ [column.key]: nextWidth
22397
+ };
22398
+ if (!columnSizes) {
22399
+ setInternalColumnSizes(nextSizes);
22400
+ }
22401
+ persistColumnSizes(columnStorageKey, nextSizes);
22402
+ onColumnSizeChange?.(column.key, nextWidth, {
22403
+ columnId: column.key,
22404
+ previousWidth,
22405
+ minWidth: column.minWidth,
22406
+ maxWidth: column.maxWidth
22407
+ });
22408
+ onResetColumnSizes?.(nextSizes);
22409
+ }, [columnSizes, columnStorageKey, defaultSizes, onColumnSizeChange, onResetColumnSizes, resolvedColumnSizes]);
22410
+ const setFrozenColumnCount = useCallback((nextCount) => {
22411
+ const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenEndColumnCount));
22412
+ setInternalFrozenColumnCount(normalizedCount);
22413
+ persistFrozenColumnCount(columnStorageKey, normalizedCount);
22414
+ onFrozenColumnCountChange?.(normalizedCount);
22415
+ }, [columnStorageKey, onFrozenColumnCountChange, orderedColumns.length, resolvedFrozenEndColumnCount]);
22416
+ const setFrozenEndColumnCount = useCallback((nextCount) => {
22417
+ const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenColumnCount));
22418
+ setInternalFrozenEndColumnCount(normalizedCount);
22419
+ persistFrozenEndColumnCount(columnStorageKey, normalizedCount);
22420
+ onFrozenEndColumnCountChange?.(normalizedCount);
22421
+ }, [columnStorageKey, onFrozenEndColumnCountChange, orderedColumns.length, resolvedFrozenColumnCount]);
22422
+ const getFrozenPosition = (columnIndex) => {
22423
+ if (columnIndex < resolvedFrozenColumnCount) return "start";
22424
+ if (columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount) return "end";
22425
+ return void 0;
22426
+ };
22427
+ const getFrozenClassName = (column, columnIndex, isHeader = false) => {
22428
+ const position = getFrozenPosition(columnIndex);
22429
+ if (!position) return void 0;
22430
+ return cn(
22431
+ "sticky",
22432
+ position === "start" ? "shadow-[1px_0_0_0_hsl(var(--border)/0.45)]" : "shadow-[-1px_0_0_0_hsl(var(--border)/0.45)]",
22433
+ isHeader ? "bg-muted/60" : "bg-inherit",
22434
+ isHeader ? "z-40" : "z-20",
22435
+ (columnIndex === 0 || columnIndex === orderedColumns.length - 1) && (isHeader ? "z-50" : "z-30")
22436
+ );
22437
+ };
22438
+ const getFrozenStyle = (column, columnIndex) => {
22439
+ const position = getFrozenPosition(columnIndex);
22440
+ if (position === "start") return { left: frozenOffsets.get(column.key) ?? 0 };
22441
+ if (position === "end") return { right: frozenEndOffsets.get(column.key) ?? 0 };
22442
+ return void 0;
22443
+ };
22444
+ return /* @__PURE__ */ jsx(
22445
+ BaseTableContainer,
22446
+ {
22447
+ appearance,
22448
+ className: cn("flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border/60 bg-card", classNames?.root, className),
22449
+ style,
22450
+ children: /* @__PURE__ */ jsx(
22451
+ "div",
22452
+ {
22453
+ className: cn("min-h-0 flex-1 overflow-auto", classNames?.scrollArea),
22454
+ style: { maxHeight: toCssSize4(bodyMaxHeight) },
22455
+ children: /* @__PURE__ */ jsxs(
22456
+ BaseTable,
22457
+ {
22458
+ appearance,
22459
+ columnOrder: resolvedColumnOrder,
22460
+ columnSizes: resolvedColumnSizes,
22461
+ columnDragEnabled,
22462
+ columnResizeEnabled,
22463
+ onColumnOrderChange: handleColumnOrderChange,
22464
+ onColumnSizeChange: handleColumnSizeChange,
22465
+ className: cn("w-full table-fixed text-left text-xs", classNames?.table, tableClassName),
22466
+ style: { minWidth: resolvedMinWidth },
22467
+ children: [
22468
+ /* @__PURE__ */ jsx("colgroup", { children: orderedColumns.map((column) => /* @__PURE__ */ jsx(
22469
+ "col",
22470
+ {
22471
+ style: {
22472
+ width: toCssSize4(resolvedColumnSizes[column.key] ?? column.width),
22473
+ minWidth: toCssSize4(column.minWidth)
22474
+ }
22475
+ },
22476
+ column.key
22477
+ )) }),
22478
+ /* @__PURE__ */ jsx(BaseTableHeader, { appearance, className: cn("border-b border-border/60 bg-muted/60 text-[11px] font-medium text-muted-foreground", classNames?.tableHeader), children: /* @__PURE__ */ jsx(BaseTableRow, { appearance, className: cn("hover:bg-transparent", classNames?.headerRow), children: orderedColumns.map((column, columnIndex) => {
22479
+ const headerContent = renderColumnHeader ? renderColumnHeader(column, { column, columnIndex, columns: orderedColumns, rows }) : column.label;
22480
+ const sortable = Boolean(column.sortable);
22481
+ const handleSort = sortable && onSort ? () => onSort(column.key, column) : void 0;
22482
+ const isFrozenStart = columnIndex < resolvedFrozenColumnCount;
22483
+ const isFrozenEnd = columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount;
22484
+ const isFrozen = isFrozenStart || isFrozenEnd;
22485
+ const isColumnAtDefaultWidth = getColumnNumericWidth(column, resolvedColumnSizes) === (defaultSizes[column.key] ?? getColumnDefaultSize(column));
22486
+ return /* @__PURE__ */ jsxs(BaseContextMenu, { modal: false, children: [
22487
+ /* @__PURE__ */ jsx(BaseContextMenuTrigger, { asChild: true, appearance, children: /* @__PURE__ */ jsx(
22488
+ BaseTableHead,
22489
+ {
22490
+ appearance,
22491
+ columnId: column.key,
22492
+ align: column.align,
22493
+ label: headerContent,
22494
+ description: column.description,
22495
+ trailing: isFrozen ? /* @__PURE__ */ jsx("span", { title: labels.frozenColumnTitle, className: "inline-flex h-5 w-5 items-center justify-center rounded text-primary", children: /* @__PURE__ */ jsx(PinIcon, { className: "h-3.5 w-3.5" }) }) : null,
22496
+ sortable,
22497
+ sortDirection: column.sortDirection,
22498
+ sortLabel: column.sortLabel,
22499
+ onSort: handleSort,
22500
+ draggable: column.draggable,
22501
+ resizable: column.resizable,
22502
+ width: column.width,
22503
+ minWidth: column.minWidth,
22504
+ maxWidth: column.maxWidth,
22505
+ className: cn(
22506
+ "sticky top-0 h-9 whitespace-nowrap border-r border-border/50 bg-muted/60 px-2.5 py-2 backdrop-blur",
22507
+ getFrozenClassName(column, columnIndex, true),
22508
+ column.headerClassName,
22509
+ column.className,
22510
+ classNames?.headerCell
22511
+ ),
22512
+ style: getFrozenStyle(column, columnIndex)
22513
+ }
22514
+ ) }),
22515
+ /* @__PURE__ */ jsxs(BaseContextMenuContent, { appearance, alignOffset: -4, className: "min-w-44", children: [
22516
+ /* @__PURE__ */ jsx(BaseContextMenuLabel, { appearance, children: labels.columnActions }),
22517
+ isFrozen ? /* @__PURE__ */ jsx(
22518
+ BaseContextMenuItem,
22519
+ {
22520
+ appearance,
22521
+ onSelect: () => {
22522
+ if (isFrozenEnd) setFrozenEndColumnCount(orderedColumns.length - columnIndex - 1);
22523
+ else setFrozenColumnCount(columnIndex);
22524
+ },
22525
+ children: isFrozenEnd ? labels.unfreezeEndColumn : labels.unfreezeColumn
22526
+ }
22527
+ ) : /* @__PURE__ */ jsx(
22528
+ BaseContextMenuItem,
22529
+ {
22530
+ appearance,
22531
+ onSelect: () => setFrozenColumnCount(columnIndex + 1),
22532
+ children: labels.freezeColumn
22533
+ }
22534
+ ),
22535
+ !isFrozen ? /* @__PURE__ */ jsx(
22536
+ BaseContextMenuItem,
22537
+ {
22538
+ appearance,
22539
+ onSelect: () => setFrozenEndColumnCount(orderedColumns.length - columnIndex),
22540
+ children: labels.freezeEndColumn
22541
+ }
22542
+ ) : null,
22543
+ /* @__PURE__ */ jsx(
22544
+ BaseContextMenuItem,
22545
+ {
22546
+ appearance,
22547
+ disabled: resolvedFrozenColumnCount === 0 && resolvedFrozenEndColumnCount === 0,
22548
+ onSelect: () => {
22549
+ setFrozenColumnCount(0);
22550
+ setFrozenEndColumnCount(0);
22551
+ },
22552
+ children: labels.unfreezeAllColumns
22553
+ }
22554
+ ),
22555
+ /* @__PURE__ */ jsx(BaseContextMenuSeparator, { appearance }),
22556
+ /* @__PURE__ */ jsx(
22557
+ BaseContextMenuItem,
22558
+ {
22559
+ appearance,
22560
+ disabled: isColumnAtDefaultWidth,
22561
+ onSelect: () => handleResetColumnSize(column),
22562
+ children: labels.resetColumnWidth
22563
+ }
22564
+ )
22565
+ ] })
22566
+ ] }, column.key);
22567
+ }) }) }),
22568
+ /* @__PURE__ */ jsxs(BaseTableBody, { appearance, className: cn("divide-y divide-border/50", classNames?.body), children: [
22569
+ pinnedTopRows.map((row, rowIndex) => {
22570
+ const key = getPinnedTopRowKey(row, rowIndex);
22571
+ const resolvedRowClassName = resolveRowClassName(pinnedTopRowClassName, row, rowIndex);
22572
+ return /* @__PURE__ */ jsx(
22573
+ BaseTableRow,
22574
+ {
22575
+ appearance,
22576
+ className: cn("bg-card/95", classNames?.pinnedTopRow, resolvedRowClassName),
22577
+ children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
22578
+ BaseTableCell,
22579
+ {
22580
+ appearance,
22581
+ align: column.align,
22582
+ className: cn(
22583
+ "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
22584
+ column.wrap ? "whitespace-normal" : "whitespace-nowrap",
22585
+ getFrozenClassName(column, columnIndex),
22586
+ column.cellClassName,
22587
+ classNames?.cell
22588
+ ),
22589
+ style: getFrozenStyle(column, columnIndex),
22590
+ children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderPinnedTopCell ? renderPinnedTopCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: true }) : renderDefaultCell(column, row) })
22591
+ },
22592
+ `pinned-${key}-${column.key}`
22593
+ ))
22594
+ },
22595
+ `pinned-${key}`
22596
+ );
22597
+ }),
22598
+ rows.length ? rows.map((row, rowIndex) => {
22599
+ const key = getRowKey(row, rowIndex);
22600
+ const state = getRowState?.(row, rowIndex) || {};
22601
+ const resolvedRowClassName = resolveRowClassName(rowClassName, row, rowIndex);
22602
+ return /* @__PURE__ */ jsx(
22603
+ BaseTableRow,
22604
+ {
22605
+ appearance,
22606
+ interactive: Boolean(onRowClick) && !state.disabled,
22607
+ selected: state.selected,
22608
+ disabled: state.disabled,
22609
+ onClick: () => {
22610
+ if (!state.disabled) onRowClick?.(row, rowIndex);
22611
+ },
22612
+ className: cn(
22613
+ "min-h-[52px] bg-card transition-colors",
22614
+ state.saving && "bg-primary/5",
22615
+ state.pending && "opacity-80",
22616
+ onRowClick && !state.disabled ? "cursor-pointer hover:bg-muted/30" : "hover:bg-muted/30",
22617
+ classNames?.row,
22618
+ resolvedRowClassName
22619
+ ),
22620
+ children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
22621
+ BaseTableCell,
22622
+ {
22623
+ appearance,
22624
+ align: column.align,
22625
+ className: cn(
22626
+ "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
22627
+ column.wrap ? "whitespace-normal" : "whitespace-nowrap",
22628
+ getFrozenClassName(column, columnIndex),
22629
+ column.cellClassName,
22630
+ classNames?.cell
22631
+ ),
22632
+ style: getFrozenStyle(column, columnIndex),
22633
+ children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderCell ? renderCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: false }) : renderDefaultCell(column, row) })
22634
+ },
22635
+ `${key}-${column.key}`
22636
+ ))
22637
+ },
22638
+ key
22639
+ );
22640
+ }) : pinnedTopRows.length ? null : /* @__PURE__ */ jsx(
22641
+ BaseTableEmpty,
22642
+ {
22643
+ appearance,
22644
+ colSpan: Math.max(orderedColumns.length, 1),
22645
+ className: classNames?.empty,
22646
+ children: emptyState
22647
+ }
22648
+ )
22649
+ ] })
22650
+ ]
22651
+ }
22652
+ )
22653
+ }
22654
+ )
22655
+ }
22656
+ );
22657
+ }
22658
+ function InteractiveTableEditableTextCell({
22659
+ value,
22660
+ placeholder,
22661
+ disabled,
22662
+ multiline = false,
22663
+ commitOnBlur = true,
22664
+ className,
22665
+ inputClassName,
22666
+ onCommit
22667
+ }) {
22668
+ const initialValue = String(value || "");
22669
+ const [draft, setDraft] = useState(initialValue);
22670
+ useEffect(() => {
22671
+ setDraft(initialValue);
22672
+ }, [initialValue]);
22673
+ const commit = useCallback(async () => {
22674
+ const nextValue = String(draft || "").trim();
22675
+ const previousValue = String(initialValue || "").trim();
22676
+ if (nextValue === previousValue) return;
22677
+ try {
22678
+ await onCommit?.(nextValue);
22679
+ } catch {
22680
+ setDraft(initialValue);
22681
+ }
22682
+ }, [draft, initialValue, onCommit]);
22683
+ const controlClassName = cn(
22684
+ "w-full resize-none rounded-sm border border-transparent bg-transparent px-1.5 py-1 text-xs text-foreground outline-none transition-colors",
22685
+ "placeholder:text-muted-foreground/70 hover:border-border/60 hover:bg-background focus:border-primary/45 focus:bg-background",
22686
+ multiline ? "min-h-[42px] leading-5" : "h-8",
22687
+ disabled && "cursor-not-allowed text-muted-foreground hover:border-transparent hover:bg-transparent",
22688
+ inputClassName
22689
+ );
22690
+ if (multiline) {
22691
+ return /* @__PURE__ */ jsx(
22692
+ "textarea",
22693
+ {
22694
+ className: cn(controlClassName, className),
22695
+ disabled,
22696
+ value: draft,
22697
+ placeholder,
22698
+ onChange: (event) => setDraft(event.target.value),
22699
+ onBlur: () => {
22700
+ if (commitOnBlur) void commit();
22701
+ },
22702
+ onKeyDown: (event) => {
22703
+ if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
22704
+ event.currentTarget.blur();
22705
+ }
22706
+ if (event.key === "Escape") {
22707
+ setDraft(initialValue);
22708
+ event.currentTarget.blur();
22709
+ }
22710
+ }
22711
+ }
22712
+ );
22713
+ }
22714
+ return /* @__PURE__ */ jsx(
22715
+ "input",
22716
+ {
22717
+ className: cn(controlClassName, className),
22718
+ disabled,
22719
+ value: draft,
22720
+ placeholder,
22721
+ onChange: (event) => setDraft(event.target.value),
22722
+ onBlur: () => {
22723
+ if (commitOnBlur) void commit();
22724
+ },
22725
+ onKeyDown: (event) => {
22726
+ if (event.key === "Enter") event.currentTarget.blur();
22727
+ if (event.key === "Escape") {
22728
+ setDraft(initialValue);
22729
+ event.currentTarget.blur();
22730
+ }
22731
+ }
22732
+ }
22733
+ );
22734
+ }
22735
+ function InteractiveTableReadonlyCell({
22736
+ children,
22737
+ mono = false,
22738
+ className
22739
+ }) {
22740
+ return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 text-xs text-muted-foreground", mono && "font-mono", className), children: hasRenderableNode(children) ? children : "\u2014" });
22741
+ }
22742
+ function InteractiveTableSelectCell({
22743
+ value,
22744
+ options,
22745
+ disabled,
22746
+ ariaLabel,
22747
+ children,
22748
+ className,
22749
+ onChange
22750
+ }) {
22751
+ return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full items-center", className), children: [
22752
+ children,
22753
+ /* @__PURE__ */ jsx(
22754
+ "select",
22755
+ {
22756
+ "aria-label": ariaLabel,
22757
+ disabled,
22758
+ value,
22759
+ onChange: (event) => onChange?.(event.target.value),
22760
+ className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
22761
+ children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
22762
+ }
22763
+ )
22764
+ ] });
22765
+ }
21597
22766
  var imageExtPattern = /\.(png|jpe?g|webp|gif|svg|bmp|avif)$/i;
21598
22767
  var audioExtPattern = /\.(wav|mp3|ogg|m4a|flac|aac)$/i;
21599
22768
  var isLikelyUrl = (value) => /^https?:\/\//i.test(String(value || ""));
@@ -21920,7 +23089,7 @@ var DEFAULT_MASONRY_GAP_PX = 12;
21920
23089
  var DEFAULT_MASONRY_ROW_HEIGHT_PX = 8;
21921
23090
  var DEFAULT_MASONRY_COLUMN_WIDTH_PX = 280;
21922
23091
  var DEFAULT_MASONRY_ITEM_HEIGHT_PX = 240;
21923
- function clamp3(value, min5, max5) {
23092
+ function clamp4(value, min5, max5) {
21924
23093
  return Math.min(Math.max(value, min5), max5);
21925
23094
  }
21926
23095
  function getRootFontSize(node) {
@@ -21995,10 +23164,10 @@ function getItemColumnSpan({
21995
23164
  gap
21996
23165
  }) {
21997
23166
  if (Number.isFinite(size?.columnSpan) && Number(size?.columnSpan) > 0) {
21998
- return clamp3(Math.round(Number(size?.columnSpan)), 1, columnCount);
23167
+ return clamp4(Math.round(Number(size?.columnSpan)), 1, columnCount);
21999
23168
  }
22000
23169
  const itemWidth = resolveLengthToPixels(size?.width, columnWidth, null);
22001
- return clamp3(Math.ceil((itemWidth + gap) / (columnWidth + gap)), 1, columnCount);
23170
+ return clamp4(Math.ceil((itemWidth + gap) / (columnWidth + gap)), 1, columnCount);
22002
23171
  }
22003
23172
  function getItemRowSpan({
22004
23173
  size,
@@ -22175,7 +23344,7 @@ function WorkbenchMasonryLayout({
22175
23344
  let nextColumnIndex = 0;
22176
23345
  let maxBottom = 0;
22177
23346
  const positionedItems = layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => {
22178
- const resolvedSpan = clamp3(columnSpan, 1, columnCount);
23347
+ const resolvedSpan = clamp4(columnSpan, 1, columnCount);
22179
23348
  let startColumn = nextColumnIndex;
22180
23349
  if (startColumn + resolvedSpan > columnCount) {
22181
23350
  startColumn = 0;
@@ -22780,6 +23949,173 @@ function WorkbenchGalleryView({
22780
23949
  }
22781
23950
  );
22782
23951
  }
23952
+ function toCssSize5(value) {
23953
+ if (value === void 0) return void 0;
23954
+ return typeof value === "number" ? `${value}px` : value;
23955
+ }
23956
+ function defaultGetRowId(row, rowIndex) {
23957
+ return String(row?.id ?? row?.key ?? rowIndex);
23958
+ }
23959
+ function defaultGetColumnId(row) {
23960
+ return String(row?.columnId ?? row?.status ?? "");
23961
+ }
23962
+ function defaultRenderCard(row) {
23963
+ const value = row?.title ?? row?.name ?? row?.id ?? "Untitled";
23964
+ return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border/70 bg-card px-3 py-2 text-sm text-foreground shadow-sm", children: String(value) });
23965
+ }
23966
+ function WorkbenchLaneDraggableCard({
23967
+ row,
23968
+ rowId,
23969
+ rowIndex,
23970
+ column,
23971
+ classNames,
23972
+ renderCard
23973
+ }) {
23974
+ const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: rowId });
23975
+ return /* @__PURE__ */ jsx(
23976
+ "div",
23977
+ {
23978
+ ref: setNodeRef,
23979
+ ...listeners,
23980
+ ...attributes,
23981
+ className: cn("touch-none", classNames?.cardWrapper),
23982
+ children: renderCard(row, { row, rowIndex, column, isDragging, isOverlay: false })
23983
+ }
23984
+ );
23985
+ }
23986
+ function WorkbenchLaneColumnView({
23987
+ column,
23988
+ columnRows,
23989
+ columnWidth,
23990
+ columnMinHeight,
23991
+ emptyColumn,
23992
+ classNames,
23993
+ renderCard
23994
+ }) {
23995
+ const { setNodeRef, isOver } = useDroppable({ id: column.id });
23996
+ return /* @__PURE__ */ jsxs(
23997
+ "section",
23998
+ {
23999
+ className: cn(
24000
+ "flex shrink-0 flex-col rounded-xl border border-border/60 bg-card p-2 shadow-sm",
24001
+ classNames?.column,
24002
+ column.className
24003
+ ),
24004
+ style: { width: toCssSize5(columnWidth) ?? "280px" },
24005
+ children: [
24006
+ /* @__PURE__ */ jsxs("div", { className: cn("flex h-10 items-center gap-2 px-1", classNames?.columnHeader, column.headerClassName), children: [
24007
+ column.icon ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 items-center justify-center text-muted-foreground", classNames?.columnIcon, column.iconClassName), children: column.icon }) : null,
24008
+ /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center rounded px-2 py-0.5 text-xs font-semibold bg-muted text-muted-foreground", classNames?.columnBadge, column.badgeClassName), children: column.label ?? column.id }),
24009
+ /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", classNames?.columnCount), children: columnRows.length })
24010
+ ] }),
24011
+ /* @__PURE__ */ jsx(
24012
+ "div",
24013
+ {
24014
+ ref: setNodeRef,
24015
+ className: cn(
24016
+ "mt-1 flex min-h-[200px] flex-1 flex-col gap-2 overflow-y-auto rounded-lg p-1 transition-colors [scrollbar-width:thin]",
24017
+ isOver && "bg-accent/60",
24018
+ classNames?.columnBody,
24019
+ column.bodyClassName
24020
+ ),
24021
+ style: { minHeight: toCssSize5(columnMinHeight) },
24022
+ children: columnRows.length ? columnRows.map(({ row, rowIndex, rowId }) => /* @__PURE__ */ jsx(
24023
+ WorkbenchLaneDraggableCard,
24024
+ {
24025
+ row,
24026
+ rowId,
24027
+ rowIndex,
24028
+ column,
24029
+ classNames,
24030
+ renderCard
24031
+ },
24032
+ rowId
24033
+ )) : emptyColumn ? /* @__PURE__ */ jsx("div", { className: cn("flex min-h-24 items-center justify-center rounded-lg border border-dashed border-border/60 px-3 py-4 text-xs text-muted-foreground", classNames?.emptyColumn), children: emptyColumn }) : null
24034
+ }
24035
+ )
24036
+ ]
24037
+ }
24038
+ );
24039
+ }
24040
+ function WorkbenchLaneView({
24041
+ rows = [],
24042
+ columns = [],
24043
+ getRowId = defaultGetRowId,
24044
+ getColumnId = defaultGetColumnId,
24045
+ renderCard = defaultRenderCard,
24046
+ renderOverlayCard,
24047
+ onMoveRow,
24048
+ emptyColumn,
24049
+ activationDistance = 5,
24050
+ columnWidth = 280,
24051
+ columnMinHeight,
24052
+ className,
24053
+ classNames,
24054
+ style
24055
+ }) {
24056
+ const [activeRowId, setActiveRowId] = useState(null);
24057
+ const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: activationDistance } }));
24058
+ const columnMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
24059
+ const rowEntries = useMemo(() => rows.map((row, rowIndex) => ({
24060
+ row,
24061
+ rowIndex,
24062
+ rowId: getRowId(row, rowIndex),
24063
+ columnId: getColumnId(row, rowIndex)
24064
+ })), [getColumnId, getRowId, rows]);
24065
+ const activeEntry = activeRowId ? rowEntries.find((entry) => entry.rowId === activeRowId) : void 0;
24066
+ const rowsByColumn = useMemo(() => {
24067
+ const next = /* @__PURE__ */ new Map();
24068
+ columns.forEach((column) => next.set(column.id, []));
24069
+ rowEntries.forEach(({ row, rowIndex, rowId, columnId }) => {
24070
+ next.get(columnId)?.push({ row, rowIndex, rowId });
24071
+ });
24072
+ return next;
24073
+ }, [columns, rowEntries]);
24074
+ const activeColumn = activeEntry ? columnMap.get(activeEntry.columnId) : void 0;
24075
+ const handleDragStart = useCallback((event) => {
24076
+ setActiveRowId(String(event.active.id));
24077
+ }, []);
24078
+ const handleDragEnd = useCallback((event) => {
24079
+ setActiveRowId(null);
24080
+ const rowId = String(event.active.id);
24081
+ const nextColumnId = String(event.over?.id ?? "");
24082
+ const activeRow = rowEntries.find((entry) => entry.rowId === rowId);
24083
+ if (!activeRow || !columnMap.has(nextColumnId) || activeRow.columnId === nextColumnId) return;
24084
+ onMoveRow?.(rowId, nextColumnId, activeRow.row);
24085
+ }, [columnMap, onMoveRow, rowEntries]);
24086
+ const handleDragCancel = useCallback(() => {
24087
+ setActiveRowId(null);
24088
+ }, []);
24089
+ return /* @__PURE__ */ jsxs(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [
24090
+ /* @__PURE__ */ jsx(
24091
+ "div",
24092
+ {
24093
+ className: cn("flex min-h-0 flex-1 gap-4 overflow-x-auto p-4 [scrollbar-width:thin]", classNames?.root, className),
24094
+ style,
24095
+ children: columns.map((column) => /* @__PURE__ */ jsx(
24096
+ WorkbenchLaneColumnView,
24097
+ {
24098
+ column,
24099
+ columnRows: rowsByColumn.get(column.id) || [],
24100
+ columnWidth,
24101
+ columnMinHeight,
24102
+ emptyColumn,
24103
+ classNames,
24104
+ renderCard
24105
+ },
24106
+ column.id
24107
+ ))
24108
+ }
24109
+ ),
24110
+ /* @__PURE__ */ jsx(DragOverlay, { children: activeEntry && activeColumn ? /* @__PURE__ */ jsx("div", { className: cn(classNames?.overlayWrapper), children: (renderOverlayCard || renderCard)(activeEntry.row, {
24111
+ row: activeEntry.row,
24112
+ rowIndex: activeEntry.rowIndex,
24113
+ column: activeColumn,
24114
+ isDragging: false,
24115
+ isOverlay: true
24116
+ }) }) : null })
24117
+ ] });
24118
+ }
22783
24119
  function cn4(...inputs) {
22784
24120
  return inputs.filter(Boolean).join(" ");
22785
24121
  }
@@ -23073,6 +24409,6 @@ lodash/lodash.js:
23073
24409
  *)
23074
24410
  */
23075
24411
 
23076
- export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, AuthDivider, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLoadingState, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, EmailAuth, I18nSelector, LoginLayout, NavButton, OAuthButton, OIDCButton, PendingApproval, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, setNeocardTheme, setTailwindTheme, useDarkMode };
24412
+ export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, AuthDivider, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, EmailAuth, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginLayout, NavButton, OAuthButton, OIDCButton, PendingApproval, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, setNeocardTheme, setTailwindTheme, useDarkMode };
23077
24413
  //# sourceMappingURL=index.mjs.map
23078
24414
  //# sourceMappingURL=index.mjs.map