@widgetstools/react-dock-manager 0.1.0 → 0.1.2
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.cjs +180 -357
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +38 -7
- package/dist/index.d.ts +38 -7
- package/dist/index.js +181 -359
- package/dist/index.js.map +1 -1
- package/package.json +3 -4
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import { jsxs, Fragment
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
// ../dock-manager-core/dist/index.js
|
|
6
6
|
function createPreventableEvent(type, panelId) {
|
|
@@ -4045,9 +4045,8 @@ var UnpinnedStripView = class {
|
|
|
4045
4045
|
this.stripEl.removeEventListener("click", this.boundStripClick);
|
|
4046
4046
|
this.boundStripClick = null;
|
|
4047
4047
|
}
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
}
|
|
4048
|
+
this.stripEl.remove();
|
|
4049
|
+
this.element.remove();
|
|
4051
4050
|
}
|
|
4052
4051
|
// ── Private: Event delegation ──────────────────────────────────
|
|
4053
4052
|
/** Set up event delegation on stripEl for all tab interactions */
|
|
@@ -4267,328 +4266,166 @@ function applyTheme(container, theme) {
|
|
|
4267
4266
|
container.style.setProperty("--dock-scrollbar-thumb", colors.textMuted);
|
|
4268
4267
|
container.style.setProperty("--dock-scrollbar-track", "transparent");
|
|
4269
4268
|
}
|
|
4270
|
-
var
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4297
|
-
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4269
|
+
var hsl = (h, s, l) => `${h} ${s}% ${l}%`;
|
|
4270
|
+
function createTheme(name, mode, base, accent, overrides) {
|
|
4271
|
+
const { hue: h, sat: s } = base;
|
|
4272
|
+
const { hue: ah, sat: as_ } = accent;
|
|
4273
|
+
let colors;
|
|
4274
|
+
if (mode === "light") {
|
|
4275
|
+
const bl = base.light ?? 96;
|
|
4276
|
+
const al = accent.light ?? 50;
|
|
4277
|
+
const ts = Math.max(s - 6, 0);
|
|
4278
|
+
colors = {
|
|
4279
|
+
bg: hsl(h, s, bl),
|
|
4280
|
+
surface: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
|
|
4281
|
+
surfaceAlt: hsl(h, Math.max(s - 2, 0), bl - 1),
|
|
4282
|
+
panelHeader: hsl(h, Math.max(s - 2, 0), bl - 4),
|
|
4283
|
+
tabBar: hsl(h, Math.max(s - 5, 0), bl - 3),
|
|
4284
|
+
tabActive: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
|
|
4285
|
+
tabText: hsl(h - 10, Math.max(ts - 8, 0), 35),
|
|
4286
|
+
tabTextActive: hsl(ah, as_, al),
|
|
4287
|
+
text: hsl(h - 10, Math.max(ts - 2, 0), 15),
|
|
4288
|
+
textSecondary: hsl(h - 10, Math.max(ts - 8, 0), 32),
|
|
4289
|
+
textMuted: hsl(h - 10, Math.max(ts - 12, 0), 48),
|
|
4290
|
+
border: hsl(h, Math.max(s - 6, 0), 80),
|
|
4291
|
+
splitter: hsl(h, Math.max(s - 6, 0), 87),
|
|
4292
|
+
splitterHover: hsl(ah, as_, al + 8),
|
|
4293
|
+
hover: hsl(h, Math.max(s - 5, 0), bl - 3),
|
|
4294
|
+
primary: hsl(ah, as_, al),
|
|
4295
|
+
floatShadow: hsl(h, Math.max(s, 0), 15)
|
|
4296
|
+
};
|
|
4297
|
+
} else {
|
|
4298
|
+
const bl = base.light ?? 10;
|
|
4299
|
+
const al = accent.light ?? 65;
|
|
4300
|
+
const ts = Math.round(s * 0.5);
|
|
4301
|
+
colors = {
|
|
4302
|
+
bg: hsl(h, s, bl),
|
|
4303
|
+
surface: hsl(h, s, bl + 3),
|
|
4304
|
+
surfaceAlt: hsl(h, Math.max(s - 2, 0), bl + 5),
|
|
4305
|
+
panelHeader: hsl(h, Math.max(s - 2, 0), bl + 8),
|
|
4306
|
+
tabBar: hsl(h, s, bl + 1),
|
|
4307
|
+
tabActive: hsl(h, s, bl + 3),
|
|
4308
|
+
tabText: hsl(h - 5, Math.max(ts, 8), 65),
|
|
4309
|
+
tabTextActive: hsl(ah, as_, al),
|
|
4310
|
+
text: hsl(h - 5, Math.round(s * 0.8), 90),
|
|
4311
|
+
textSecondary: hsl(h - 5, Math.max(ts, 8), 68),
|
|
4312
|
+
textMuted: hsl(h - 5, Math.max(ts - 3, 6), 50),
|
|
4313
|
+
border: hsl(h, Math.max(s - 2, 0), bl + 14),
|
|
4314
|
+
splitter: hsl(h, Math.max(s - 2, 0), bl + 10),
|
|
4315
|
+
splitterHover: hsl(ah, as_, al - 8),
|
|
4316
|
+
hover: hsl(h, Math.max(s - 2, 0), bl + 8),
|
|
4317
|
+
primary: hsl(ah, as_, al),
|
|
4318
|
+
floatShadow: hsl(h, Math.min(s + 5, 100), Math.max(bl - 7, 0))
|
|
4319
|
+
};
|
|
4314
4320
|
}
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
name: "Warm Light",
|
|
4318
|
-
mode: "light",
|
|
4319
|
-
colors: {
|
|
4320
|
-
bg: "40 30% 96%",
|
|
4321
|
-
surface: "40 20% 99%",
|
|
4322
|
-
surfaceAlt: "40 25% 95%",
|
|
4323
|
-
panelHeader: "40 25% 91%",
|
|
4324
|
-
tabBar: "40 20% 93%",
|
|
4325
|
-
tabActive: "40 20% 99%",
|
|
4326
|
-
tabText: "30 10% 35%",
|
|
4327
|
-
tabTextActive: "25 80% 45%",
|
|
4328
|
-
text: "30 15% 15%",
|
|
4329
|
-
textSecondary: "30 10% 32%",
|
|
4330
|
-
textMuted: "30 8% 48%",
|
|
4331
|
-
border: "35 15% 80%",
|
|
4332
|
-
splitter: "35 15% 87%",
|
|
4333
|
-
splitterHover: "25 80% 55%",
|
|
4334
|
-
hover: "40 20% 93%",
|
|
4335
|
-
primary: "25 80% 45%",
|
|
4336
|
-
floatShadow: "30 20% 15%"
|
|
4321
|
+
if (overrides) {
|
|
4322
|
+
Object.assign(colors, overrides);
|
|
4337
4323
|
}
|
|
4338
|
-
};
|
|
4339
|
-
|
|
4340
|
-
|
|
4341
|
-
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
|
|
4348
|
-
|
|
4324
|
+
return { name, mode, colors };
|
|
4325
|
+
}
|
|
4326
|
+
var vsCodeLight = createTheme(
|
|
4327
|
+
"VS Code Light",
|
|
4328
|
+
"light",
|
|
4329
|
+
{ hue: 220, sat: 20 },
|
|
4330
|
+
{ hue: 217, sat: 91, light: 50 },
|
|
4331
|
+
{ floatShadow: "0 0% 0%" }
|
|
4332
|
+
);
|
|
4333
|
+
var githubLight = createTheme(
|
|
4334
|
+
"GitHub Light",
|
|
4335
|
+
"light",
|
|
4336
|
+
{ hue: 210, sat: 20, light: 97 },
|
|
4337
|
+
{ hue: 212, sat: 92, light: 45 },
|
|
4338
|
+
{ floatShadow: "210 20% 20%" }
|
|
4339
|
+
);
|
|
4340
|
+
var warmLight = createTheme(
|
|
4341
|
+
"Warm Light",
|
|
4342
|
+
"light",
|
|
4343
|
+
{ hue: 40, sat: 30 },
|
|
4344
|
+
{ hue: 25, sat: 80, light: 45 }
|
|
4345
|
+
);
|
|
4346
|
+
var solarizedLight = createTheme(
|
|
4347
|
+
"Solarized Light",
|
|
4348
|
+
"light",
|
|
4349
|
+
{ hue: 44, sat: 87, light: 94 },
|
|
4350
|
+
{ hue: 175, sat: 59, light: 35 },
|
|
4351
|
+
{
|
|
4349
4352
|
tabText: "194 14% 35%",
|
|
4350
|
-
tabTextActive: "175 59% 35%",
|
|
4351
4353
|
text: "192 81% 14%",
|
|
4352
4354
|
textSecondary: "194 14% 32%",
|
|
4353
4355
|
textMuted: "180 8% 48%",
|
|
4354
|
-
border: "44 30% 80%",
|
|
4355
|
-
splitter: "44 30% 85%",
|
|
4356
|
-
splitterHover: "175 59% 45%",
|
|
4357
|
-
hover: "44 50% 91%",
|
|
4358
|
-
primary: "175 59% 35%",
|
|
4359
4356
|
floatShadow: "44 20% 30%"
|
|
4360
4357
|
}
|
|
4361
|
-
|
|
4362
|
-
var sepiaLight =
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
|
|
4369
|
-
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
}
|
|
4384
|
-
}
|
|
4385
|
-
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
};
|
|
4408
|
-
var lavenderLight = {
|
|
4409
|
-
name: "Lavender",
|
|
4410
|
-
mode: "light",
|
|
4411
|
-
colors: {
|
|
4412
|
-
bg: "260 20% 96%",
|
|
4413
|
-
surface: "260 15% 99%",
|
|
4414
|
-
surfaceAlt: "260 16% 95%",
|
|
4415
|
-
panelHeader: "260 16% 90%",
|
|
4416
|
-
tabBar: "260 14% 92%",
|
|
4417
|
-
tabActive: "260 15% 99%",
|
|
4418
|
-
tabText: "265 10% 35%",
|
|
4419
|
-
tabTextActive: "262 52% 50%",
|
|
4420
|
-
text: "265 18% 16%",
|
|
4421
|
-
textSecondary: "265 10% 32%",
|
|
4422
|
-
textMuted: "260 8% 48%",
|
|
4423
|
-
border: "260 14% 80%",
|
|
4424
|
-
splitter: "260 14% 87%",
|
|
4425
|
-
splitterHover: "262 52% 58%",
|
|
4426
|
-
hover: "260 14% 93%",
|
|
4427
|
-
primary: "262 52% 50%",
|
|
4428
|
-
floatShadow: "260 15% 22%"
|
|
4429
|
-
}
|
|
4430
|
-
};
|
|
4431
|
-
var vsCodeDark = {
|
|
4432
|
-
name: "VS Code Dark",
|
|
4433
|
-
mode: "dark",
|
|
4434
|
-
colors: {
|
|
4435
|
-
bg: "222 47% 7%",
|
|
4436
|
-
surface: "222 47% 10%",
|
|
4437
|
-
surfaceAlt: "222 47% 12%",
|
|
4438
|
-
panelHeader: "222 47% 15%",
|
|
4439
|
-
tabBar: "222 47% 11%",
|
|
4440
|
-
tabActive: "222 47% 10%",
|
|
4441
|
-
tabText: "215 20% 65%",
|
|
4442
|
-
tabTextActive: "217 91% 70%",
|
|
4443
|
-
text: "210 40% 96%",
|
|
4444
|
-
textSecondary: "215 20% 68%",
|
|
4445
|
-
textMuted: "215 15% 50%",
|
|
4446
|
-
border: "217 33% 24%",
|
|
4447
|
-
splitter: "217 33% 20%",
|
|
4448
|
-
splitterHover: "217 91% 60%",
|
|
4449
|
-
hover: "217 33% 16%",
|
|
4450
|
-
primary: "217 91% 70%",
|
|
4451
|
-
floatShadow: "0 0% 0%"
|
|
4452
|
-
}
|
|
4453
|
-
};
|
|
4454
|
-
var draculaDark = {
|
|
4455
|
-
name: "Dracula Dark",
|
|
4456
|
-
mode: "dark",
|
|
4457
|
-
colors: {
|
|
4458
|
-
bg: "231 15% 14%",
|
|
4459
|
-
surface: "231 15% 17%",
|
|
4460
|
-
surfaceAlt: "231 15% 19%",
|
|
4461
|
-
panelHeader: "231 15% 22%",
|
|
4462
|
-
tabBar: "231 15% 16%",
|
|
4463
|
-
tabActive: "231 15% 17%",
|
|
4464
|
-
tabText: "225 15% 65%",
|
|
4465
|
-
tabTextActive: "265 90% 72%",
|
|
4466
|
-
text: "60 30% 92%",
|
|
4467
|
-
textSecondary: "225 15% 68%",
|
|
4468
|
-
textMuted: "225 12% 50%",
|
|
4469
|
-
border: "231 15% 28%",
|
|
4470
|
-
splitter: "231 15% 24%",
|
|
4471
|
-
splitterHover: "265 90% 60%",
|
|
4472
|
-
hover: "231 15% 22%",
|
|
4473
|
-
primary: "265 90% 72%",
|
|
4474
|
-
floatShadow: "231 20% 5%"
|
|
4475
|
-
}
|
|
4476
|
-
};
|
|
4477
|
-
var nordDark = {
|
|
4478
|
-
name: "Nord Dark",
|
|
4479
|
-
mode: "dark",
|
|
4480
|
-
colors: {
|
|
4481
|
-
bg: "220 16% 16%",
|
|
4482
|
-
surface: "220 16% 20%",
|
|
4483
|
-
surfaceAlt: "220 16% 22%",
|
|
4484
|
-
panelHeader: "220 16% 25%",
|
|
4485
|
-
tabBar: "220 16% 19%",
|
|
4486
|
-
tabActive: "220 16% 20%",
|
|
4487
|
-
tabText: "219 14% 65%",
|
|
4488
|
-
tabTextActive: "193 43% 60%",
|
|
4489
|
-
text: "219 28% 88%",
|
|
4490
|
-
textSecondary: "219 14% 68%",
|
|
4491
|
-
textMuted: "219 12% 50%",
|
|
4492
|
-
border: "220 16% 30%",
|
|
4493
|
-
splitter: "220 16% 26%",
|
|
4494
|
-
splitterHover: "193 43% 50%",
|
|
4495
|
-
hover: "220 16% 24%",
|
|
4496
|
-
primary: "193 43% 60%",
|
|
4497
|
-
floatShadow: "220 20% 8%"
|
|
4498
|
-
}
|
|
4499
|
-
};
|
|
4500
|
-
var solarizedDark = {
|
|
4501
|
-
name: "Solarized Dark",
|
|
4502
|
-
mode: "dark",
|
|
4503
|
-
colors: {
|
|
4504
|
-
bg: "192 81% 8%",
|
|
4505
|
-
surface: "192 81% 11%",
|
|
4506
|
-
surfaceAlt: "192 60% 13%",
|
|
4507
|
-
panelHeader: "192 60% 16%",
|
|
4508
|
-
tabBar: "192 70% 10%",
|
|
4509
|
-
tabActive: "192 81% 11%",
|
|
4358
|
+
);
|
|
4359
|
+
var sepiaLight = createTheme(
|
|
4360
|
+
"Sepia",
|
|
4361
|
+
"light",
|
|
4362
|
+
{ hue: 35, sat: 35, light: 94 },
|
|
4363
|
+
{ hue: 18, sat: 60, light: 42 }
|
|
4364
|
+
);
|
|
4365
|
+
var mintLight = createTheme(
|
|
4366
|
+
"Mint",
|
|
4367
|
+
"light",
|
|
4368
|
+
{ hue: 150, sat: 20 },
|
|
4369
|
+
{ hue: 162, sat: 63, light: 35 }
|
|
4370
|
+
);
|
|
4371
|
+
var lavenderLight = createTheme(
|
|
4372
|
+
"Lavender",
|
|
4373
|
+
"light",
|
|
4374
|
+
{ hue: 260, sat: 20 },
|
|
4375
|
+
{ hue: 262, sat: 52, light: 50 }
|
|
4376
|
+
);
|
|
4377
|
+
var vsCodeDark = createTheme(
|
|
4378
|
+
"VS Code Dark",
|
|
4379
|
+
"dark",
|
|
4380
|
+
{ hue: 222, sat: 47, light: 7 },
|
|
4381
|
+
{ hue: 217, sat: 91, light: 70 },
|
|
4382
|
+
{ text: "210 40% 96%", floatShadow: "0 0% 0%" }
|
|
4383
|
+
);
|
|
4384
|
+
var draculaDark = createTheme(
|
|
4385
|
+
"Dracula Dark",
|
|
4386
|
+
"dark",
|
|
4387
|
+
{ hue: 231, sat: 15, light: 14 },
|
|
4388
|
+
{ hue: 265, sat: 90, light: 72 },
|
|
4389
|
+
{ text: "60 30% 92%" }
|
|
4390
|
+
);
|
|
4391
|
+
var nordDark = createTheme(
|
|
4392
|
+
"Nord Dark",
|
|
4393
|
+
"dark",
|
|
4394
|
+
{ hue: 220, sat: 16, light: 16 },
|
|
4395
|
+
{ hue: 193, sat: 43, light: 60 },
|
|
4396
|
+
{ text: "219 28% 88%" }
|
|
4397
|
+
);
|
|
4398
|
+
var solarizedDark = createTheme(
|
|
4399
|
+
"Solarized Dark",
|
|
4400
|
+
"dark",
|
|
4401
|
+
{ hue: 192, sat: 81, light: 8 },
|
|
4402
|
+
{ hue: 175, sat: 59, light: 55 },
|
|
4403
|
+
{
|
|
4510
4404
|
tabText: "180 8% 65%",
|
|
4511
|
-
tabTextActive: "175 59% 55%",
|
|
4512
4405
|
text: "44 87% 94%",
|
|
4513
4406
|
textSecondary: "180 8% 68%",
|
|
4514
4407
|
textMuted: "194 14% 50%",
|
|
4515
|
-
border: "192 50% 24%",
|
|
4516
|
-
splitter: "192 50% 16%",
|
|
4517
|
-
splitterHover: "175 59% 50%",
|
|
4518
|
-
hover: "192 60% 15%",
|
|
4519
|
-
primary: "175 59% 55%",
|
|
4520
4408
|
floatShadow: "192 60% 3%"
|
|
4521
4409
|
}
|
|
4522
|
-
|
|
4523
|
-
var midnightDark =
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
hover: "225 26% 18%",
|
|
4542
|
-
primary: "210 60% 65%",
|
|
4543
|
-
floatShadow: "225 30% 4%"
|
|
4544
|
-
}
|
|
4545
|
-
};
|
|
4546
|
-
var forestDark = {
|
|
4547
|
-
name: "Forest Dark",
|
|
4548
|
-
mode: "dark",
|
|
4549
|
-
colors: {
|
|
4550
|
-
bg: "160 18% 9%",
|
|
4551
|
-
surface: "160 16% 12%",
|
|
4552
|
-
surfaceAlt: "160 14% 14%",
|
|
4553
|
-
panelHeader: "160 14% 17%",
|
|
4554
|
-
tabBar: "160 16% 11%",
|
|
4555
|
-
tabActive: "160 16% 12%",
|
|
4556
|
-
tabText: "155 10% 65%",
|
|
4557
|
-
tabTextActive: "152 50% 55%",
|
|
4558
|
-
text: "150 15% 90%",
|
|
4559
|
-
textSecondary: "155 10% 68%",
|
|
4560
|
-
textMuted: "155 8% 50%",
|
|
4561
|
-
border: "160 14% 24%",
|
|
4562
|
-
splitter: "160 14% 18%",
|
|
4563
|
-
splitterHover: "152 50% 48%",
|
|
4564
|
-
hover: "160 14% 16%",
|
|
4565
|
-
primary: "152 50% 55%",
|
|
4566
|
-
floatShadow: "160 18% 3%"
|
|
4567
|
-
}
|
|
4568
|
-
};
|
|
4569
|
-
var slateDark = {
|
|
4570
|
-
name: "Slate Dark",
|
|
4571
|
-
mode: "dark",
|
|
4572
|
-
colors: {
|
|
4573
|
-
bg: "215 12% 11%",
|
|
4574
|
-
surface: "215 10% 14%",
|
|
4575
|
-
surfaceAlt: "215 9% 16%",
|
|
4576
|
-
panelHeader: "215 9% 19%",
|
|
4577
|
-
tabBar: "215 10% 13%",
|
|
4578
|
-
tabActive: "215 10% 14%",
|
|
4579
|
-
tabText: "210 8% 65%",
|
|
4580
|
-
tabTextActive: "205 40% 62%",
|
|
4581
|
-
text: "210 15% 90%",
|
|
4582
|
-
textSecondary: "210 8% 68%",
|
|
4583
|
-
textMuted: "210 6% 50%",
|
|
4584
|
-
border: "215 9% 24%",
|
|
4585
|
-
splitter: "215 9% 20%",
|
|
4586
|
-
splitterHover: "205 40% 52%",
|
|
4587
|
-
hover: "215 9% 18%",
|
|
4588
|
-
primary: "205 40% 62%",
|
|
4589
|
-
floatShadow: "215 12% 4%"
|
|
4590
|
-
}
|
|
4591
|
-
};
|
|
4410
|
+
);
|
|
4411
|
+
var midnightDark = createTheme(
|
|
4412
|
+
"Midnight Blue",
|
|
4413
|
+
"dark",
|
|
4414
|
+
{ hue: 225, sat: 30 },
|
|
4415
|
+
{ hue: 210, sat: 60, light: 65 }
|
|
4416
|
+
);
|
|
4417
|
+
var forestDark = createTheme(
|
|
4418
|
+
"Forest Dark",
|
|
4419
|
+
"dark",
|
|
4420
|
+
{ hue: 160, sat: 18, light: 9 },
|
|
4421
|
+
{ hue: 152, sat: 50, light: 55 }
|
|
4422
|
+
);
|
|
4423
|
+
var slateDark = createTheme(
|
|
4424
|
+
"Slate Dark",
|
|
4425
|
+
"dark",
|
|
4426
|
+
{ hue: 215, sat: 12, light: 11 },
|
|
4427
|
+
{ hue: 205, sat: 40, light: 62 }
|
|
4428
|
+
);
|
|
4592
4429
|
var themes = {
|
|
4593
4430
|
// Light
|
|
4594
4431
|
vsCodeLight,
|
|
@@ -5608,9 +5445,11 @@ var DockManagerCore = forwardRef(
|
|
|
5608
5445
|
function DockManagerCore2(props, ref) {
|
|
5609
5446
|
const {
|
|
5610
5447
|
initialState,
|
|
5448
|
+
widgets,
|
|
5611
5449
|
renderPanel,
|
|
5612
5450
|
renderTab,
|
|
5613
5451
|
renderHeaderActions,
|
|
5452
|
+
onReady,
|
|
5614
5453
|
onStateChange,
|
|
5615
5454
|
onWillClose,
|
|
5616
5455
|
onWillDrop,
|
|
@@ -5623,26 +5462,12 @@ var DockManagerCore = forwardRef(
|
|
|
5623
5462
|
const dockRef = useRef(null);
|
|
5624
5463
|
const [portals, setPortals] = useState(/* @__PURE__ */ new Map());
|
|
5625
5464
|
const [, forceUpdate] = useState(0);
|
|
5626
|
-
const
|
|
5627
|
-
|
|
5628
|
-
const renderTabRef = useRef(renderTab);
|
|
5629
|
-
renderTabRef.current = renderTab;
|
|
5630
|
-
const renderHeaderActionsRef = useRef(renderHeaderActions);
|
|
5631
|
-
renderHeaderActionsRef.current = renderHeaderActions;
|
|
5632
|
-
const onStateChangeRef = useRef(onStateChange);
|
|
5633
|
-
onStateChangeRef.current = onStateChange;
|
|
5634
|
-
const onWillCloseRef = useRef(onWillClose);
|
|
5635
|
-
onWillCloseRef.current = onWillClose;
|
|
5636
|
-
const onWillDropRef = useRef(onWillDrop);
|
|
5637
|
-
onWillDropRef.current = onWillDrop;
|
|
5465
|
+
const callbackRefs = useRef({ renderPanel, renderTab, renderHeaderActions, onStateChange, onWillClose, onWillDrop, onReady, widgets });
|
|
5466
|
+
callbackRefs.current = { renderPanel, renderTab, renderHeaderActions, onStateChange, onWillClose, onWillDrop, onReady, widgets };
|
|
5638
5467
|
useEffect(() => {
|
|
5639
5468
|
if (!containerRef.current) return;
|
|
5640
5469
|
const addPortal = (key, entry) => {
|
|
5641
|
-
setPortals((prev) =>
|
|
5642
|
-
const next = new Map(prev);
|
|
5643
|
-
next.set(key, entry);
|
|
5644
|
-
return next;
|
|
5645
|
-
});
|
|
5470
|
+
setPortals((prev) => new Map(prev).set(key, entry));
|
|
5646
5471
|
};
|
|
5647
5472
|
const removePortal = (key) => {
|
|
5648
5473
|
setPortals((prev) => {
|
|
@@ -5660,37 +5485,32 @@ var DockManagerCore = forwardRef(
|
|
|
5660
5485
|
createContent: (panelId, container, api) => {
|
|
5661
5486
|
const key = `content:${panelId}:${++portalCounter}`;
|
|
5662
5487
|
addPortal(key, { container, panelId, type: "content", api });
|
|
5663
|
-
return {
|
|
5664
|
-
dispose: () => removePortal(key)
|
|
5665
|
-
};
|
|
5488
|
+
return { dispose: () => removePortal(key) };
|
|
5666
5489
|
},
|
|
5667
5490
|
createTab: renderTab ? (panelId, container, isActive) => {
|
|
5668
5491
|
const key = `tab:${panelId}:${++portalCounter}`;
|
|
5669
5492
|
addPortal(key, { container, panelId, type: "tab", isActive });
|
|
5670
|
-
return {
|
|
5671
|
-
dispose: () => removePortal(key)
|
|
5672
|
-
};
|
|
5493
|
+
return { dispose: () => removePortal(key) };
|
|
5673
5494
|
} : void 0,
|
|
5674
5495
|
createHeaderActions: renderHeaderActions ? (slot, tabGroupId, container) => {
|
|
5675
5496
|
const key = `header:${slot}:${tabGroupId}:${++portalCounter}`;
|
|
5676
5497
|
addPortal(key, { container, panelId: "", type: "headerAction", slot, tabGroupId });
|
|
5677
|
-
return {
|
|
5678
|
-
dispose: () => removePortal(key)
|
|
5679
|
-
};
|
|
5498
|
+
return { dispose: () => removePortal(key) };
|
|
5680
5499
|
} : void 0,
|
|
5681
5500
|
onStateChange: (state2) => {
|
|
5682
|
-
|
|
5501
|
+
callbackRefs.current.onStateChange?.(state2);
|
|
5683
5502
|
forceUpdate((n) => n + 1);
|
|
5684
5503
|
},
|
|
5685
5504
|
onWillClose: (event, panelId) => {
|
|
5686
|
-
|
|
5505
|
+
callbackRefs.current.onWillClose?.(event, panelId);
|
|
5687
5506
|
},
|
|
5688
5507
|
onWillDrop: (event, sourceId, targetId, position) => {
|
|
5689
|
-
|
|
5508
|
+
callbackRefs.current.onWillDrop?.(event, sourceId, targetId, position);
|
|
5690
5509
|
}
|
|
5691
5510
|
};
|
|
5692
5511
|
const dock = new DockviewComponent(containerRef.current, options);
|
|
5693
5512
|
dockRef.current = dock;
|
|
5513
|
+
callbackRefs.current.onReady?.(dock.api);
|
|
5694
5514
|
return () => {
|
|
5695
5515
|
dock.dispose();
|
|
5696
5516
|
dockRef.current = null;
|
|
@@ -5699,18 +5519,13 @@ var DockManagerCore = forwardRef(
|
|
|
5699
5519
|
}, []);
|
|
5700
5520
|
const themeKey = typeof theme === "object" ? theme.name : theme;
|
|
5701
5521
|
useEffect(() => {
|
|
5702
|
-
dockRef.current
|
|
5703
|
-
|
|
5704
|
-
|
|
5705
|
-
|
|
5706
|
-
|
|
5707
|
-
}
|
|
5708
|
-
}, [allowRootDock]);
|
|
5709
|
-
useEffect(() => {
|
|
5710
|
-
if (resourceStrings !== void 0) {
|
|
5711
|
-
dockRef.current?.updateOptions({ resourceStrings });
|
|
5712
|
-
}
|
|
5713
|
-
}, [resourceStrings]);
|
|
5522
|
+
if (!dockRef.current) return;
|
|
5523
|
+
dockRef.current.updateOptions({
|
|
5524
|
+
...theme !== void 0 && { theme },
|
|
5525
|
+
...allowRootDock !== void 0 && { allowRootDock },
|
|
5526
|
+
...resourceStrings !== void 0 && { resourceStrings }
|
|
5527
|
+
});
|
|
5528
|
+
}, [themeKey, allowRootDock, resourceStrings]);
|
|
5714
5529
|
useImperativeHandle(ref, () => ({
|
|
5715
5530
|
dispatch: (action) => dockRef.current?.dispatch(action),
|
|
5716
5531
|
getState: () => dockRef.current?.getState() ?? initialState,
|
|
@@ -5719,26 +5534,33 @@ var DockManagerCore = forwardRef(
|
|
|
5719
5534
|
}));
|
|
5720
5535
|
const portalElements = [];
|
|
5721
5536
|
const state = dockRef.current?.getState();
|
|
5537
|
+
const cbs = callbackRefs.current;
|
|
5722
5538
|
portals.forEach((entry, key) => {
|
|
5723
5539
|
let content = null;
|
|
5724
5540
|
switch (entry.type) {
|
|
5725
5541
|
case "content": {
|
|
5726
5542
|
const panel = state?.panels[entry.panelId];
|
|
5727
5543
|
if (panel && entry.api) {
|
|
5728
|
-
|
|
5544
|
+
const widgetType = panel.widgetType || "";
|
|
5545
|
+
const Widget = cbs.widgets?.[widgetType];
|
|
5546
|
+
if (Widget) {
|
|
5547
|
+
content = /* @__PURE__ */ jsx(Widget, { panelId: entry.panelId, panel, api: entry.api });
|
|
5548
|
+
} else if (cbs.renderPanel) {
|
|
5549
|
+
content = cbs.renderPanel(entry.panelId, panel, entry.api);
|
|
5550
|
+
}
|
|
5729
5551
|
}
|
|
5730
5552
|
break;
|
|
5731
5553
|
}
|
|
5732
5554
|
case "tab": {
|
|
5733
5555
|
const panel = state?.panels[entry.panelId];
|
|
5734
|
-
if (panel &&
|
|
5735
|
-
content =
|
|
5556
|
+
if (panel && cbs.renderTab) {
|
|
5557
|
+
content = cbs.renderTab(entry.panelId, panel, entry.isActive ?? false);
|
|
5736
5558
|
}
|
|
5737
5559
|
break;
|
|
5738
5560
|
}
|
|
5739
5561
|
case "headerAction": {
|
|
5740
|
-
if (
|
|
5741
|
-
content =
|
|
5562
|
+
if (cbs.renderHeaderActions && entry.slot && entry.tabGroupId) {
|
|
5563
|
+
content = cbs.renderHeaderActions(entry.slot, entry.tabGroupId);
|
|
5742
5564
|
}
|
|
5743
5565
|
break;
|
|
5744
5566
|
}
|
|
@@ -5803,6 +5625,6 @@ function useTheme(defaultTheme = "dark") {
|
|
|
5803
5625
|
return { theme, resolvedTheme, setTheme, toggleTheme };
|
|
5804
5626
|
}
|
|
5805
5627
|
|
|
5806
|
-
export { DockManagerCore, DockviewApi, DockviewComponent, EventEmitter, clearLocalStorage, createDefaultState, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, useTheme, validateState, vsCodeDark, vsCodeLight, warmLight };
|
|
5628
|
+
export { DockManagerCore, DockviewApi, DockviewComponent, EventEmitter, clearLocalStorage, createDefaultState, createTheme, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, useTheme, validateState, vsCodeDark, vsCodeLight, warmLight };
|
|
5807
5629
|
//# sourceMappingURL=index.js.map
|
|
5808
5630
|
//# sourceMappingURL=index.js.map
|