@pipelex/mthds-ui 0.33.0 → 0.34.1

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.
Files changed (8) hide show
  1. package/dist/graph/react/detail/DetailPanel.css +18 -0
  2. package/dist/graph/react/index.js +142 -134
  3. package/dist/graph/react/index.js.map +1 -1
  4. package/dist/graph/react/viewer/GraphToolbar.css +61 -0
  5. package/dist/standalone/graph-standalone.html +178 -99
  6. package/dist/standalone/graph-viewer.css +80 -1
  7. package/dist/standalone/graph-viewer.js +98 -98
  8. package/package.json +2 -2
package/dist/graph/react/detail/DetailPanel.css CHANGED
@@ -121,6 +121,24 @@
121
121
  background: var(--surface-elevated);
122
122
  }
123
123
 
124
+ /* Phones: below 640px (Tailwind's `sm` breakpoint) the button keeps its look
125
+ * and its place on the first content line, and takes taps over a 44×44 area,
126
+ * the size a fingertip needs, through an invisible `::after` reaching 10px
127
+ * past each edge. That reach covers no other control: above and to the right
128
+ * lie the content's padding, to the left and below the header's text. Growing
129
+ * the button instead would push the line it shares. */
130
+ @media (max-width: 639.98px) {
131
+ .detail-panel-close {
132
+ position: relative;
133
+ }
134
+
135
+ .detail-panel-close::after {
136
+ content: "";
137
+ position: absolute;
138
+ inset: -10px;
139
+ }
140
+ }
141
+
124
142
  .detail-panel-content {
125
143
  flex: 1;
126
144
  overflow-y: auto;
package/dist/graph/react/index.js CHANGED
@@ -2413,147 +2413,155 @@ function GraphToolbar({
2413
2413
  const foldAllSection = onFoldAll || onExpandAll;
2414
2414
  const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
2415
2415
  const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
2416
- return /* @__PURE__ */ jsx22(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs22("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
2417
- validationState !== void 0 && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2418
- /* @__PURE__ */ jsxs22("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
2419
- /* @__PURE__ */ jsxs22(
2416
+ return /* @__PURE__ */ jsx22(
2417
+ Panel,
2418
+ {
2419
+ position,
2420
+ className: `graph-toolbar-panel graph-toolbar-panel--${orientation}`,
2421
+ style: panelStyle,
2422
+ children: /* @__PURE__ */ jsxs22("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
2423
+ validationState !== void 0 && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2424
+ /* @__PURE__ */ jsxs22("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
2425
+ /* @__PURE__ */ jsxs22(
2426
+ "button",
2427
+ {
2428
+ type: "button",
2429
+ className: `graph-toolbar-btn graph-toolbar-validation-btn graph-toolbar-validation-btn--${validationState}`,
2430
+ onClick: () => setValidationOpen(!validationOpen),
2431
+ title: validationLabel(validationState, validationIssues.length),
2432
+ "aria-label": validationLabel(validationState, validationIssues.length),
2433
+ "aria-expanded": validationOpen,
2434
+ "aria-haspopup": "true",
2435
+ "aria-controls": validationPanelId,
2436
+ children: [
2437
+ validationIcon(validationState),
2438
+ validationIssues.length > 0 && /* @__PURE__ */ jsx22("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
2439
+ ]
2440
+ }
2441
+ ),
2442
+ validationOpen && /* @__PURE__ */ jsx22(
2443
+ ValidationPanel,
2444
+ {
2445
+ id: validationPanelId,
2446
+ state: validationState,
2447
+ issues: validationIssues,
2448
+ onIssueClick: onValidationIssueClick,
2449
+ placement: validationPanelPlacement(position)
2450
+ }
2451
+ )
2452
+ ] }),
2453
+ /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
2454
+ ] }),
2455
+ styleMenuEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2456
+ /* @__PURE__ */ jsx22(
2457
+ StyleMenu,
2458
+ {
2459
+ value: graphStyle,
2460
+ options: styleMenuOptions,
2461
+ onChange: onGraphStyleChange,
2462
+ placement: validationPanelPlacement(position)
2463
+ }
2464
+ ),
2465
+ /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
2466
+ ] }),
2467
+ onFoldAll && /* @__PURE__ */ jsx22(
2420
2468
  "button",
2421
2469
  {
2422
2470
  type: "button",
2423
- className: `graph-toolbar-btn graph-toolbar-validation-btn graph-toolbar-validation-btn--${validationState}`,
2424
- onClick: () => setValidationOpen(!validationOpen),
2425
- title: validationLabel(validationState, validationIssues.length),
2426
- "aria-label": validationLabel(validationState, validationIssues.length),
2427
- "aria-expanded": validationOpen,
2428
- "aria-haspopup": "true",
2429
- "aria-controls": validationPanelId,
2430
- children: [
2431
- validationIcon(validationState),
2432
- validationIssues.length > 0 && /* @__PURE__ */ jsx22("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
2433
- ]
2471
+ className: "graph-toolbar-btn",
2472
+ onClick: onFoldAll,
2473
+ disabled: foldAllDisabled,
2474
+ title: foldAllTitle,
2475
+ "aria-label": foldAllTitle,
2476
+ children: FOLD_ALL_ICON
2434
2477
  }
2435
2478
  ),
2436
- validationOpen && /* @__PURE__ */ jsx22(
2437
- ValidationPanel,
2479
+ onExpandAll && /* @__PURE__ */ jsx22(
2480
+ "button",
2438
2481
  {
2439
- id: validationPanelId,
2440
- state: validationState,
2441
- issues: validationIssues,
2442
- onIssueClick: onValidationIssueClick,
2443
- placement: validationPanelPlacement(position)
2482
+ type: "button",
2483
+ className: "graph-toolbar-btn",
2484
+ onClick: onExpandAll,
2485
+ disabled: expandAllDisabled,
2486
+ title: expandAllTitle,
2487
+ "aria-label": expandAllTitle,
2488
+ children: EXPAND_ALL_ICON
2444
2489
  }
2445
- )
2446
- ] }),
2447
- /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
2448
- ] }),
2449
- styleMenuEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2450
- /* @__PURE__ */ jsx22(
2451
- StyleMenu,
2452
- {
2453
- value: graphStyle,
2454
- options: styleMenuOptions,
2455
- onChange: onGraphStyleChange,
2456
- placement: validationPanelPlacement(position)
2457
- }
2458
- ),
2459
- /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
2460
- ] }),
2461
- onFoldAll && /* @__PURE__ */ jsx22(
2462
- "button",
2463
- {
2464
- type: "button",
2465
- className: "graph-toolbar-btn",
2466
- onClick: onFoldAll,
2467
- disabled: foldAllDisabled,
2468
- title: foldAllTitle,
2469
- "aria-label": foldAllTitle,
2470
- children: FOLD_ALL_ICON
2471
- }
2472
- ),
2473
- onExpandAll && /* @__PURE__ */ jsx22(
2474
- "button",
2475
- {
2476
- type: "button",
2477
- className: "graph-toolbar-btn",
2478
- onClick: onExpandAll,
2479
- disabled: expandAllDisabled,
2480
- title: expandAllTitle,
2481
- "aria-label": expandAllTitle,
2482
- children: EXPAND_ALL_ICON
2483
- }
2484
- ),
2485
- foldAllSection && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2486
- onShowControllersChange && /* @__PURE__ */ jsx22(
2487
- "button",
2488
- {
2489
- type: "button",
2490
- className: `graph-toolbar-btn${showControllers ? " graph-toolbar-btn--active" : ""}`,
2491
- onClick: () => onShowControllersChange(!showControllers),
2492
- title: controllersLabel,
2493
- "aria-label": controllersLabel,
2494
- children: BOXES_ICON
2495
- }
2496
- ),
2497
- /* @__PURE__ */ jsx22(
2498
- "button",
2499
- {
2500
- type: "button",
2501
- className: "graph-toolbar-btn",
2502
- onClick: () => onDirectionChange(isVertical ? GRAPH_DIRECTION.LR : GRAPH_DIRECTION.TB),
2503
- title: directionLabel,
2504
- "aria-label": directionLabel,
2505
- children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
2506
- }
2507
- ),
2508
- (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2509
- onZoomOut && /* @__PURE__ */ jsx22(
2510
- "button",
2511
- {
2512
- type: "button",
2513
- className: "graph-toolbar-btn",
2514
- onClick: onZoomOut,
2515
- title: "Zoom out",
2516
- "aria-label": "Zoom out",
2517
- children: MINUS_ICON
2518
- }
2519
- ),
2520
- onZoomIn && /* @__PURE__ */ jsx22(
2521
- "button",
2522
- {
2523
- type: "button",
2524
- className: "graph-toolbar-btn",
2525
- onClick: onZoomIn,
2526
- title: "Zoom in",
2527
- "aria-label": "Zoom in",
2528
- children: PLUS_ICON
2529
- }
2530
- ),
2531
- onFitView && /* @__PURE__ */ jsx22(
2532
- "button",
2533
- {
2534
- type: "button",
2535
- className: "graph-toolbar-btn",
2536
- onClick: onFitView,
2537
- title: "Fit view",
2538
- "aria-label": "Fit view",
2539
- children: FIT_VIEW_ICON
2540
- }
2541
- ),
2542
- themeToggleEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2543
- /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2544
- /* @__PURE__ */ jsx22(
2545
- "button",
2546
- {
2547
- type: "button",
2548
- className: "graph-toolbar-btn",
2549
- onClick: () => onThemeModeChange(nextThemeMode(themeMode)),
2550
- title: themeModeLabel(themeMode),
2551
- "aria-label": themeModeLabel(themeMode),
2552
- children: themeModeIcon(themeMode)
2553
- }
2554
- )
2555
- ] })
2556
- ] }) });
2490
+ ),
2491
+ foldAllSection && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2492
+ onShowControllersChange && /* @__PURE__ */ jsx22(
2493
+ "button",
2494
+ {
2495
+ type: "button",
2496
+ className: `graph-toolbar-btn${showControllers ? " graph-toolbar-btn--active" : ""}`,
2497
+ onClick: () => onShowControllersChange(!showControllers),
2498
+ title: controllersLabel,
2499
+ "aria-label": controllersLabel,
2500
+ children: BOXES_ICON
2501
+ }
2502
+ ),
2503
+ /* @__PURE__ */ jsx22(
2504
+ "button",
2505
+ {
2506
+ type: "button",
2507
+ className: "graph-toolbar-btn",
2508
+ onClick: () => onDirectionChange(isVertical ? GRAPH_DIRECTION.LR : GRAPH_DIRECTION.TB),
2509
+ title: directionLabel,
2510
+ "aria-label": directionLabel,
2511
+ children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
2512
+ }
2513
+ ),
2514
+ (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2515
+ onZoomOut && /* @__PURE__ */ jsx22(
2516
+ "button",
2517
+ {
2518
+ type: "button",
2519
+ className: "graph-toolbar-btn",
2520
+ onClick: onZoomOut,
2521
+ title: "Zoom out",
2522
+ "aria-label": "Zoom out",
2523
+ children: MINUS_ICON
2524
+ }
2525
+ ),
2526
+ onZoomIn && /* @__PURE__ */ jsx22(
2527
+ "button",
2528
+ {
2529
+ type: "button",
2530
+ className: "graph-toolbar-btn",
2531
+ onClick: onZoomIn,
2532
+ title: "Zoom in",
2533
+ "aria-label": "Zoom in",
2534
+ children: PLUS_ICON
2535
+ }
2536
+ ),
2537
+ onFitView && /* @__PURE__ */ jsx22(
2538
+ "button",
2539
+ {
2540
+ type: "button",
2541
+ className: "graph-toolbar-btn",
2542
+ onClick: onFitView,
2543
+ title: "Fit view",
2544
+ "aria-label": "Fit view",
2545
+ children: FIT_VIEW_ICON
2546
+ }
2547
+ ),
2548
+ themeToggleEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
2549
+ /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
2550
+ /* @__PURE__ */ jsx22(
2551
+ "button",
2552
+ {
2553
+ type: "button",
2554
+ className: "graph-toolbar-btn",
2555
+ onClick: () => onThemeModeChange(nextThemeMode(themeMode)),
2556
+ title: themeModeLabel(themeMode),
2557
+ "aria-label": themeModeLabel(themeMode),
2558
+ children: themeModeIcon(themeMode)
2559
+ }
2560
+ )
2561
+ ] })
2562
+ ] })
2563
+ }
2564
+ );
2557
2565
  }
2558
2566
 
2559
2567
  // src/graph/react/viewer/StillFit.tsx