@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.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, jsx } from 'react/jsx-runtime';
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
- if (this.element.parentNode) {
4049
- this.element.parentNode.removeChild(this.element);
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 vsCodeLight = {
4271
- name: "VS Code Light",
4272
- mode: "light",
4273
- colors: {
4274
- bg: "220 20% 96%",
4275
- surface: "0 0% 100%",
4276
- surfaceAlt: "220 14% 95%",
4277
- panelHeader: "220 14% 92%",
4278
- tabBar: "220 14% 93%",
4279
- tabActive: "0 0% 100%",
4280
- tabText: "0 0% 38%",
4281
- tabTextActive: "217 91% 50%",
4282
- text: "0 0% 15%",
4283
- textSecondary: "0 0% 35%",
4284
- textMuted: "0 0% 50%",
4285
- border: "220 13% 82%",
4286
- splitter: "220 13% 87%",
4287
- splitterHover: "217 91% 60%",
4288
- hover: "220 14% 93%",
4289
- primary: "217 91% 50%",
4290
- floatShadow: "0 0% 0%"
4291
- }
4292
- };
4293
- var githubLight = {
4294
- name: "GitHub Light",
4295
- mode: "light",
4296
- colors: {
4297
- bg: "210 20% 97%",
4298
- surface: "0 0% 100%",
4299
- surfaceAlt: "210 18% 96%",
4300
- panelHeader: "210 18% 92%",
4301
- tabBar: "210 15% 94%",
4302
- tabActive: "0 0% 100%",
4303
- tabText: "210 10% 35%",
4304
- tabTextActive: "212 92% 45%",
4305
- text: "210 12% 16%",
4306
- textSecondary: "210 10% 32%",
4307
- textMuted: "210 8% 48%",
4308
- border: "210 14% 80%",
4309
- splitter: "210 14% 89%",
4310
- splitterHover: "212 92% 55%",
4311
- hover: "210 15% 94%",
4312
- primary: "212 92% 45%",
4313
- floatShadow: "210 20% 20%"
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
- var warmLight = {
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
- var solarizedLight = {
4340
- name: "Solarized Light",
4341
- mode: "light",
4342
- colors: {
4343
- bg: "44 87% 94%",
4344
- surface: "44 87% 97%",
4345
- surfaceAlt: "44 60% 93%",
4346
- panelHeader: "44 60% 89%",
4347
- tabBar: "44 50% 91%",
4348
- tabActive: "44 87% 97%",
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
- name: "Sepia",
4364
- mode: "light",
4365
- colors: {
4366
- bg: "35 35% 94%",
4367
- surface: "35 30% 97%",
4368
- surfaceAlt: "35 28% 93%",
4369
- panelHeader: "35 28% 88%",
4370
- tabBar: "35 25% 90%",
4371
- tabActive: "35 30% 97%",
4372
- tabText: "25 12% 35%",
4373
- tabTextActive: "18 60% 42%",
4374
- text: "25 20% 18%",
4375
- textSecondary: "25 12% 32%",
4376
- textMuted: "25 8% 48%",
4377
- border: "30 18% 80%",
4378
- splitter: "30 18% 85%",
4379
- splitterHover: "18 60% 50%",
4380
- hover: "35 25% 91%",
4381
- primary: "18 60% 42%",
4382
- floatShadow: "25 15% 25%"
4383
- }
4384
- };
4385
- var mintLight = {
4386
- name: "Mint",
4387
- mode: "light",
4388
- colors: {
4389
- bg: "150 20% 96%",
4390
- surface: "150 15% 99%",
4391
- surfaceAlt: "150 18% 95%",
4392
- panelHeader: "150 18% 90%",
4393
- tabBar: "150 15% 92%",
4394
- tabActive: "150 15% 99%",
4395
- tabText: "160 10% 35%",
4396
- tabTextActive: "162 63% 35%",
4397
- text: "160 18% 14%",
4398
- textSecondary: "160 10% 32%",
4399
- textMuted: "155 8% 48%",
4400
- border: "150 14% 80%",
4401
- splitter: "150 14% 87%",
4402
- splitterHover: "162 63% 45%",
4403
- hover: "150 15% 93%",
4404
- primary: "162 63% 35%",
4405
- floatShadow: "155 15% 20%"
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
- name: "Midnight Blue",
4525
- mode: "dark",
4526
- colors: {
4527
- bg: "225 30% 10%",
4528
- surface: "225 28% 13%",
4529
- surfaceAlt: "225 26% 15%",
4530
- panelHeader: "225 26% 18%",
4531
- tabBar: "225 28% 12%",
4532
- tabActive: "225 28% 13%",
4533
- tabText: "220 15% 65%",
4534
- tabTextActive: "210 60% 65%",
4535
- text: "220 25% 90%",
4536
- textSecondary: "220 15% 68%",
4537
- textMuted: "220 12% 50%",
4538
- border: "225 25% 24%",
4539
- splitter: "225 25% 20%",
4540
- splitterHover: "210 60% 55%",
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 renderPanelRef = useRef(renderPanel);
5627
- renderPanelRef.current = renderPanel;
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
- onStateChangeRef.current?.(state2);
5501
+ callbackRefs.current.onStateChange?.(state2);
5683
5502
  forceUpdate((n) => n + 1);
5684
5503
  },
5685
5504
  onWillClose: (event, panelId) => {
5686
- onWillCloseRef.current?.(event, panelId);
5505
+ callbackRefs.current.onWillClose?.(event, panelId);
5687
5506
  },
5688
5507
  onWillDrop: (event, sourceId, targetId, position) => {
5689
- onWillDropRef.current?.(event, sourceId, targetId, position);
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?.updateOptions({ theme });
5703
- }, [themeKey]);
5704
- useEffect(() => {
5705
- if (allowRootDock !== void 0) {
5706
- dockRef.current?.updateOptions({ allowRootDock });
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
- content = renderPanelRef.current(entry.panelId, panel, entry.api);
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 && renderTabRef.current) {
5735
- content = renderTabRef.current(entry.panelId, panel, entry.isActive ?? false);
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 (renderHeaderActionsRef.current && entry.slot && entry.tabGroupId) {
5741
- content = renderHeaderActionsRef.current(entry.slot, entry.tabGroupId);
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