footprint-explainable-ui 0.7.2 → 0.7.4

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/flowchart.js CHANGED
@@ -322,7 +322,7 @@ var StageNode = memo(function StageNode2({
322
322
  position: "absolute",
323
323
  inset: -6,
324
324
  borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
325
- transform: isDecider ? "rotate(45deg)" : void 0,
325
+ clipPath: isDecider ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : void 0,
326
326
  border: `2px solid ${theme.primary}`,
327
327
  opacity: 0.4,
328
328
  animation: "fp-pulse 2s ease-in-out infinite"
@@ -336,77 +336,95 @@ var StageNode = memo(function StageNode2({
336
336
  position: "absolute",
337
337
  inset: -6,
338
338
  borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
339
- transform: isDecider ? "rotate(45deg)" : void 0,
339
+ clipPath: isDecider ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : void 0,
340
340
  border: `2px solid ${theme.primary}`,
341
341
  opacity: 0.3,
342
342
  animation: "fp-pulse 1.5s ease-out infinite"
343
343
  }
344
344
  }
345
345
  ),
346
- isDecider ? /* @__PURE__ */ jsx2(
347
- "div",
348
- {
349
- style: {
350
- background: bg,
351
- border: `2px ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
352
- borderRadius: 4,
353
- transform: "rotate(45deg)",
354
- padding: 20,
355
- boxShadow: shadow,
356
- transition: "all 0.3s ease",
357
- display: "flex",
358
- alignItems: "center",
359
- justifyContent: "center"
360
- },
361
- children: /* @__PURE__ */ jsxs(
362
- "div",
363
- {
364
- style: {
365
- transform: "rotate(-45deg)",
366
- display: "flex",
367
- flexDirection: "column",
368
- alignItems: "center",
369
- gap: 2,
370
- fontFamily: theme.fontSans
371
- },
372
- children: [
373
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [
374
- icon && /* @__PURE__ */ jsx2(StageIcon, { type: icon, color: textColor }),
375
- !icon && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u25C7" }),
376
- /* @__PURE__ */ jsx2(
377
- "span",
378
- {
379
- style: {
380
- fontSize: 12,
381
- fontWeight: 600,
382
- color: textColor,
383
- whiteSpace: "nowrap"
384
- },
385
- children: label
386
- }
387
- )
388
- ] }),
389
- description && /* @__PURE__ */ jsx2(
346
+ isDecider ? /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 120, height: 72 }, children: [
347
+ /* @__PURE__ */ jsx2(
348
+ "div",
349
+ {
350
+ style: {
351
+ position: "absolute",
352
+ inset: 0,
353
+ background: bg,
354
+ clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
355
+ border: "none",
356
+ boxShadow: shadow,
357
+ transition: "all 0.3s ease"
358
+ }
359
+ }
360
+ ),
361
+ /* @__PURE__ */ jsx2(
362
+ "div",
363
+ {
364
+ style: {
365
+ position: "absolute",
366
+ inset: -2,
367
+ clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
368
+ background: borderColor,
369
+ zIndex: -1,
370
+ ...isLazyUnresolved ? {
371
+ background: "transparent"
372
+ // Dashed border via SVG for clip-path (CSS border doesn't work with clip-path)
373
+ } : {}
374
+ }
375
+ }
376
+ ),
377
+ /* @__PURE__ */ jsxs(
378
+ "div",
379
+ {
380
+ style: {
381
+ position: "absolute",
382
+ inset: 0,
383
+ display: "flex",
384
+ flexDirection: "column",
385
+ alignItems: "center",
386
+ justifyContent: "center",
387
+ gap: 1,
388
+ fontFamily: theme.fontSans,
389
+ zIndex: 1
390
+ },
391
+ children: [
392
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
393
+ effectiveIcon && /* @__PURE__ */ jsx2(StageIcon, { type: effectiveIcon, color: textColor }),
394
+ !effectiveIcon && /* @__PURE__ */ jsx2("span", { style: { fontSize: 9, color: textColor }, children: "\u25C7" }),
395
+ /* @__PURE__ */ jsx2(
390
396
  "span",
391
397
  {
392
398
  style: {
393
- fontSize: 9,
394
- fontWeight: 400,
399
+ fontSize: 11,
400
+ fontWeight: 600,
395
401
  color: textColor,
396
- opacity: 0.7,
397
- whiteSpace: "nowrap",
398
- overflow: "hidden",
399
- textOverflow: "ellipsis",
400
- maxWidth: 130
402
+ whiteSpace: "nowrap"
401
403
  },
402
- children: description
404
+ children: label
403
405
  }
404
406
  )
405
- ]
406
- }
407
- )
408
- }
409
- ) : (
407
+ ] }),
408
+ description && /* @__PURE__ */ jsx2(
409
+ "span",
410
+ {
411
+ style: {
412
+ fontSize: 8,
413
+ fontWeight: 400,
414
+ color: textColor,
415
+ opacity: 0.7,
416
+ whiteSpace: "nowrap",
417
+ overflow: "hidden",
418
+ textOverflow: "ellipsis",
419
+ maxWidth: 100
420
+ },
421
+ children: description
422
+ }
423
+ )
424
+ ]
425
+ }
426
+ )
427
+ ] }) : (
410
428
  /* Standard rectangular node */
411
429
  /* @__PURE__ */ jsxs(
412
430
  "div",