@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/components/base/index.d.mts +2 -2
- package/dist/components/base/index.d.ts +2 -2
- package/dist/components/base/index.js +545 -26
- package/dist/components/base/index.js.map +1 -1
- package/dist/components/base/index.mjs +543 -28
- package/dist/components/base/index.mjs.map +1 -1
- package/dist/components/workbench/index.d.mts +193 -2
- package/dist/components/workbench/index.d.ts +193 -2
- package/dist/components/workbench/index.js +1157 -20
- package/dist/components/workbench/index.js.map +1 -1
- package/dist/components/workbench/index.mjs +1134 -22
- package/dist/components/workbench/index.mjs.map +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +1382 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1375 -39
- package/dist/index.mjs.map +1 -1
- package/dist/{theme-CvbotXXr.d.ts → theme-CoG9vCPT.d.mts} +8 -3
- package/dist/{theme-6RDum855.d.mts → theme-Cuy60thu.d.ts} +8 -3
- package/dist/theme-system/index.d.mts +1 -1
- package/dist/theme-system/index.d.ts +1 -1
- package/dist/theme-system/index.js +398 -16
- package/dist/theme-system/index.js.map +1 -1
- package/dist/theme-system/index.mjs +399 -17
- package/dist/theme-system/index.mjs.map +1 -1
- package/dist/{types-BgEEUqSm.d.mts → types-CZALgtez.d.mts} +121 -1
- package/dist/{types-BgEEUqSm.d.ts → types-CZALgtez.d.ts} +121 -1
- package/package.json +2 -1
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
|
|
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
|
|
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 =
|
|
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
|
|
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 =
|
|
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
|
|
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
|
-
|
|
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:
|
|
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:
|
|
12618
|
-
minWidth:
|
|
12619
|
-
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:
|
|
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
|
|
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 =
|
|
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 =
|
|
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
|
|
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:
|
|
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
|
|
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
|
|
23167
|
+
return clamp4(Math.round(Number(size?.columnSpan)), 1, columnCount);
|
|
21999
23168
|
}
|
|
22000
23169
|
const itemWidth = resolveLengthToPixels(size?.width, columnWidth, null);
|
|
22001
|
-
return
|
|
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 =
|
|
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
|