@industry-theme/principal-view-panels 0.1.4 → 0.1.5

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 (3) hide show
  1. package/dist/panels.bundle.js +2214 -94
  2. package/dist/panels.bundle.js.map +1 -1
  3. package/package.json +2 -2
package/dist/panels.bundle.js CHANGED
@@ -11402,6 +11402,2000 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
11402
11402
  validatePrivuConfig
11403
11403
  }, Symbol.toStringTag, { value: "Module" }));
11404
11404
  const require$$4 = /* @__PURE__ */ getAugmentedNamespace(dist);
11405
+ var cjs;
11406
+ var hasRequiredCjs;
11407
+ function requireCjs() {
11408
+ if (hasRequiredCjs) return cjs;
11409
+ hasRequiredCjs = 1;
11410
+ var __create = Object.create;
11411
+ var __getProtoOf = Object.getPrototypeOf;
11412
+ var __defProp2 = Object.defineProperty;
11413
+ var __getOwnPropNames = Object.getOwnPropertyNames;
11414
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
11415
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11416
+ var __toESM = (mod, isNodeMode, target) => {
11417
+ target = mod != null ? __create(__getProtoOf(mod)) : {};
11418
+ const to2 = !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target;
11419
+ for (let key of __getOwnPropNames(mod))
11420
+ if (!__hasOwnProp.call(to2, key))
11421
+ __defProp2(to2, key, {
11422
+ get: () => mod[key],
11423
+ enumerable: true
11424
+ });
11425
+ return to2;
11426
+ };
11427
+ var __moduleCache = /* @__PURE__ */ new WeakMap();
11428
+ var __toCommonJS = (from) => {
11429
+ var entry = __moduleCache.get(from), desc;
11430
+ if (entry)
11431
+ return entry;
11432
+ entry = __defProp2({}, "__esModule", { value: true });
11433
+ if (from && typeof from === "object" || typeof from === "function")
11434
+ __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp2(entry, key, {
11435
+ get: () => from[key],
11436
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
11437
+ }));
11438
+ __moduleCache.set(from, entry);
11439
+ return entry;
11440
+ };
11441
+ var __export = (target, all) => {
11442
+ for (var name in all)
11443
+ __defProp2(target, name, {
11444
+ get: all[name],
11445
+ enumerable: true,
11446
+ configurable: true,
11447
+ set: (newValue) => all[name] = () => newValue
11448
+ });
11449
+ };
11450
+ var exports_src = {};
11451
+ __export(exports_src, {
11452
+ withTheme: () => withTheme,
11453
+ useTheme: () => useTheme2,
11454
+ theme: () => theme,
11455
+ terminalTheme: () => terminalTheme,
11456
+ sx: () => sx,
11457
+ slateTheme: () => slateTheme,
11458
+ scaleThemeFonts: () => scaleThemeFonts,
11459
+ responsive: () => responsive,
11460
+ resetFontScale: () => resetFontScale,
11461
+ regalTheme: () => regalTheme,
11462
+ overrideColors: () => overrideColors,
11463
+ mergeThemes: () => mergeThemes,
11464
+ matrixTheme: () => matrixTheme,
11465
+ matrixMinimalTheme: () => matrixMinimalTheme,
11466
+ makeTheme: () => makeTheme,
11467
+ landingPageTheme: () => landingPageTheme,
11468
+ landingPageLightTheme: () => landingPageLightTheme,
11469
+ increaseFontScale: () => increaseFontScale,
11470
+ glassmorphismTheme: () => glassmorphismTheme,
11471
+ getZIndex: () => getZIndex,
11472
+ getSpace: () => getSpace,
11473
+ getShadow: () => getShadow,
11474
+ getRadius: () => getRadius,
11475
+ getMode: () => getMode,
11476
+ getFontSize: () => getFontSize,
11477
+ getColor: () => getColor,
11478
+ defaultTerminalTheme: () => defaultTerminalTheme,
11479
+ defaultMarkdownTheme: () => defaultMarkdownTheme,
11480
+ defaultEditorTheme: () => defaultEditorTheme,
11481
+ default: () => src_default,
11482
+ decreaseFontScale: () => decreaseFontScale,
11483
+ createStyle: () => createStyle,
11484
+ addMode: () => addMode,
11485
+ ThemeShowcase: () => ThemeShowcase,
11486
+ ThemeProvider: () => ThemeProvider
11487
+ });
11488
+ cjs = __toCommonJS(exports_src);
11489
+ var glassmorphismTheme = {
11490
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
11491
+ fonts: {
11492
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
11493
+ heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
11494
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
11495
+ },
11496
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11497
+ fontScale: 1,
11498
+ fontWeights: {
11499
+ body: 400,
11500
+ heading: 600,
11501
+ bold: 700,
11502
+ light: 300,
11503
+ medium: 500,
11504
+ semibold: 600
11505
+ },
11506
+ lineHeights: {
11507
+ body: 1.6,
11508
+ heading: 1.3,
11509
+ tight: 1.4,
11510
+ relaxed: 1.8
11511
+ },
11512
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
11513
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
11514
+ radii: [0, 8, 12, 16, 20, 24, 32, 40],
11515
+ shadows: [
11516
+ "none",
11517
+ "0 8px 32px 0 rgba(31, 38, 135, 0.15)",
11518
+ "0 12px 40px 0 rgba(31, 38, 135, 0.2)",
11519
+ "0 16px 48px 0 rgba(31, 38, 135, 0.25)",
11520
+ "0 20px 56px 0 rgba(31, 38, 135, 0.3)",
11521
+ "0 24px 64px 0 rgba(31, 38, 135, 0.35)"
11522
+ ],
11523
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
11524
+ colors: {
11525
+ text: "rgba(255, 255, 255, 0.95)",
11526
+ background: "rgba(255, 255, 255, 0.1)",
11527
+ primary: "rgba(99, 102, 241, 0.9)",
11528
+ secondary: "rgba(139, 92, 246, 0.9)",
11529
+ accent: "rgba(236, 72, 153, 0.9)",
11530
+ highlight: "rgba(99, 102, 241, 0.2)",
11531
+ muted: "rgba(255, 255, 255, 0.05)",
11532
+ success: "rgba(34, 197, 94, 0.9)",
11533
+ warning: "rgba(251, 146, 60, 0.9)",
11534
+ error: "rgba(239, 68, 68, 0.9)",
11535
+ info: "rgba(59, 130, 246, 0.9)",
11536
+ border: "rgba(255, 255, 255, 0.18)",
11537
+ backgroundSecondary: "rgba(255, 255, 255, 0.15)",
11538
+ backgroundTertiary: "rgba(255, 255, 255, 0.2)",
11539
+ backgroundLight: "rgba(255, 255, 255, 0.08)",
11540
+ backgroundHover: "rgba(255, 255, 255, 0.25)",
11541
+ surface: "rgba(255, 255, 255, 0.12)",
11542
+ textSecondary: "rgba(255, 255, 255, 0.8)",
11543
+ textTertiary: "rgba(255, 255, 255, 0.6)",
11544
+ textMuted: "rgba(255, 255, 255, 0.5)",
11545
+ highlightBg: "rgba(251, 191, 36, 0.3)",
11546
+ highlightBorder: "rgba(251, 191, 36, 0.5)"
11547
+ },
11548
+ modes: {
11549
+ dark: {
11550
+ text: "rgba(255, 255, 255, 0.95)",
11551
+ background: "rgba(0, 0, 0, 0.3)",
11552
+ primary: "rgba(129, 140, 248, 0.9)",
11553
+ secondary: "rgba(167, 139, 250, 0.9)",
11554
+ accent: "rgba(244, 114, 182, 0.9)",
11555
+ highlight: "rgba(129, 140, 248, 0.25)",
11556
+ muted: "rgba(0, 0, 0, 0.15)",
11557
+ success: "rgba(74, 222, 128, 0.9)",
11558
+ warning: "rgba(251, 191, 36, 0.9)",
11559
+ error: "rgba(248, 113, 113, 0.9)",
11560
+ info: "rgba(96, 165, 250, 0.9)",
11561
+ border: "rgba(255, 255, 255, 0.15)",
11562
+ backgroundSecondary: "rgba(0, 0, 0, 0.4)",
11563
+ backgroundTertiary: "rgba(0, 0, 0, 0.5)",
11564
+ backgroundLight: "rgba(0, 0, 0, 0.2)",
11565
+ backgroundHover: "rgba(255, 255, 255, 0.1)",
11566
+ surface: "rgba(0, 0, 0, 0.35)",
11567
+ textSecondary: "rgba(255, 255, 255, 0.8)",
11568
+ textTertiary: "rgba(255, 255, 255, 0.6)",
11569
+ textMuted: "rgba(255, 255, 255, 0.4)",
11570
+ highlightBg: "rgba(251, 191, 36, 0.35)",
11571
+ highlightBorder: "rgba(251, 191, 36, 0.6)"
11572
+ },
11573
+ frosted: {
11574
+ text: "rgba(31, 41, 55, 0.95)",
11575
+ background: "rgba(255, 255, 255, 0.3)",
11576
+ primary: "rgba(79, 70, 229, 0.95)",
11577
+ secondary: "rgba(124, 58, 237, 0.95)",
11578
+ accent: "rgba(219, 39, 119, 0.95)",
11579
+ highlight: "rgba(79, 70, 229, 0.15)",
11580
+ muted: "rgba(255, 255, 255, 0.4)",
11581
+ success: "rgba(16, 185, 129, 0.95)",
11582
+ warning: "rgba(245, 158, 11, 0.95)",
11583
+ error: "rgba(220, 38, 38, 0.95)",
11584
+ info: "rgba(37, 99, 235, 0.95)",
11585
+ border: "rgba(255, 255, 255, 0.5)",
11586
+ backgroundSecondary: "rgba(255, 255, 255, 0.4)",
11587
+ backgroundTertiary: "rgba(255, 255, 255, 0.5)",
11588
+ backgroundLight: "rgba(255, 255, 255, 0.25)",
11589
+ backgroundHover: "rgba(255, 255, 255, 0.6)",
11590
+ surface: "rgba(255, 255, 255, 0.35)",
11591
+ textSecondary: "rgba(31, 41, 55, 0.8)",
11592
+ textTertiary: "rgba(31, 41, 55, 0.6)",
11593
+ textMuted: "rgba(31, 41, 55, 0.5)",
11594
+ highlightBg: "rgba(251, 191, 36, 0.4)",
11595
+ highlightBorder: "rgba(251, 191, 36, 0.7)"
11596
+ }
11597
+ },
11598
+ buttons: {
11599
+ primary: {
11600
+ color: "white",
11601
+ bg: "primary",
11602
+ borderWidth: 1,
11603
+ borderStyle: "solid",
11604
+ borderColor: "rgba(255, 255, 255, 0.2)",
11605
+ "&:hover": {
11606
+ bg: "secondary"
11607
+ }
11608
+ },
11609
+ secondary: {
11610
+ color: "text",
11611
+ bg: "rgba(255, 255, 255, 0.1)",
11612
+ borderWidth: 1,
11613
+ borderStyle: "solid",
11614
+ borderColor: "rgba(255, 255, 255, 0.2)",
11615
+ "&:hover": {
11616
+ bg: "rgba(255, 255, 255, 0.2)"
11617
+ }
11618
+ },
11619
+ ghost: {
11620
+ color: "text",
11621
+ bg: "transparent",
11622
+ borderWidth: 1,
11623
+ borderStyle: "solid",
11624
+ borderColor: "transparent",
11625
+ "&:hover": {
11626
+ borderColor: "rgba(255, 255, 255, 0.2)",
11627
+ bg: "rgba(255, 255, 255, 0.05)"
11628
+ }
11629
+ }
11630
+ },
11631
+ text: {
11632
+ heading: {
11633
+ fontFamily: "heading",
11634
+ fontWeight: "heading",
11635
+ lineHeight: "heading"
11636
+ },
11637
+ body: {
11638
+ fontFamily: "body",
11639
+ fontWeight: "body",
11640
+ lineHeight: "body"
11641
+ },
11642
+ caption: {
11643
+ fontSize: 1,
11644
+ color: "textSecondary"
11645
+ }
11646
+ },
11647
+ cards: {
11648
+ primary: {
11649
+ bg: "surface",
11650
+ border: "1px solid",
11651
+ borderColor: "border",
11652
+ borderRadius: 3
11653
+ },
11654
+ secondary: {
11655
+ bg: "backgroundSecondary",
11656
+ border: "1px solid",
11657
+ borderColor: "border",
11658
+ borderRadius: 3
11659
+ }
11660
+ }
11661
+ };
11662
+ var defaultMarkdownTheme = {
11663
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
11664
+ fonts: {
11665
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
11666
+ heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
11667
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
11668
+ },
11669
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11670
+ fontScale: 1,
11671
+ fontWeights: {
11672
+ body: 400,
11673
+ heading: 600,
11674
+ bold: 700,
11675
+ light: 300,
11676
+ medium: 500,
11677
+ semibold: 600
11678
+ },
11679
+ lineHeights: {
11680
+ body: 1.6,
11681
+ heading: 1.3,
11682
+ tight: 1.25,
11683
+ relaxed: 1.75
11684
+ },
11685
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
11686
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
11687
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
11688
+ shadows: [
11689
+ "none",
11690
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
11691
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
11692
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
11693
+ "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
11694
+ "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
11695
+ ],
11696
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
11697
+ colors: {
11698
+ text: "#1a1a1a",
11699
+ background: "#ffffff",
11700
+ primary: "#007acc",
11701
+ secondary: "#005a9e",
11702
+ accent: "#1a1a1a",
11703
+ highlight: "rgba(0, 122, 204, 0.1)",
11704
+ muted: "#f0f0f0",
11705
+ success: "#28a745",
11706
+ warning: "#ffc107",
11707
+ error: "#dc3545",
11708
+ info: "#17a2b8",
11709
+ border: "rgba(0, 0, 0, 0.1)",
11710
+ backgroundSecondary: "#f8f9fa",
11711
+ backgroundTertiary: "#e9ecef",
11712
+ backgroundLight: "rgba(0, 0, 0, 0.03)",
11713
+ backgroundHover: "rgba(0, 0, 0, 0.05)",
11714
+ surface: "#ffffff",
11715
+ textSecondary: "#555555",
11716
+ textTertiary: "#888888",
11717
+ textMuted: "#aaaaaa",
11718
+ highlightBg: "rgba(255, 235, 59, 0.3)",
11719
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
11720
+ },
11721
+ buttons: {
11722
+ primary: {
11723
+ color: "white",
11724
+ bg: "primary",
11725
+ "&:hover": { bg: "secondary" }
11726
+ },
11727
+ secondary: {
11728
+ color: "primary",
11729
+ bg: "transparent",
11730
+ borderWidth: 1,
11731
+ borderStyle: "solid",
11732
+ borderColor: "primary",
11733
+ "&:hover": { bg: "highlight" }
11734
+ },
11735
+ ghost: {
11736
+ color: "text",
11737
+ bg: "transparent",
11738
+ "&:hover": { bg: "backgroundHover" }
11739
+ }
11740
+ },
11741
+ text: {
11742
+ heading: {
11743
+ fontFamily: "heading",
11744
+ fontWeight: "heading",
11745
+ lineHeight: "heading"
11746
+ },
11747
+ body: {
11748
+ fontFamily: "body",
11749
+ fontWeight: "body",
11750
+ lineHeight: "body"
11751
+ },
11752
+ caption: {
11753
+ fontSize: 1,
11754
+ color: "textSecondary"
11755
+ }
11756
+ },
11757
+ cards: {
11758
+ primary: {
11759
+ bg: "surface",
11760
+ border: "1px solid",
11761
+ borderColor: "border",
11762
+ borderRadius: 2
11763
+ },
11764
+ secondary: {
11765
+ bg: "backgroundSecondary",
11766
+ border: "1px solid",
11767
+ borderColor: "border",
11768
+ borderRadius: 2
11769
+ }
11770
+ }
11771
+ };
11772
+ var defaultTerminalTheme = {
11773
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
11774
+ fonts: {
11775
+ body: '"Courier New", Courier, monospace',
11776
+ heading: '"Courier New", Courier, monospace',
11777
+ monospace: '"Courier New", Courier, monospace'
11778
+ },
11779
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11780
+ fontScale: 1,
11781
+ fontWeights: {
11782
+ body: 400,
11783
+ heading: 500,
11784
+ bold: 600,
11785
+ light: 300,
11786
+ medium: 500,
11787
+ semibold: 600
11788
+ },
11789
+ lineHeights: {
11790
+ body: 1.4,
11791
+ heading: 1.2,
11792
+ tight: 1.3,
11793
+ relaxed: 1.6
11794
+ },
11795
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
11796
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
11797
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
11798
+ shadows: [
11799
+ "none",
11800
+ "0 0 5px rgba(255, 193, 7, 0.1)",
11801
+ "0 0 10px rgba(255, 193, 7, 0.15)",
11802
+ "0 0 15px rgba(255, 193, 7, 0.2)",
11803
+ "0 0 20px rgba(255, 193, 7, 0.25)",
11804
+ "0 0 30px rgba(255, 193, 7, 0.3)"
11805
+ ],
11806
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
11807
+ colors: {
11808
+ text: "#ffc107",
11809
+ background: "#000000",
11810
+ primary: "#ffc107",
11811
+ secondary: "#ffb300",
11812
+ accent: "#ffffff",
11813
+ highlight: "rgba(255, 193, 7, 0.1)",
11814
+ muted: "#1a1a1a",
11815
+ success: "#4caf50",
11816
+ warning: "#ff9800",
11817
+ error: "#f44336",
11818
+ info: "#2196f3",
11819
+ border: "rgba(255, 193, 7, 0.2)",
11820
+ backgroundSecondary: "#0a0a0a",
11821
+ backgroundTertiary: "#111111",
11822
+ backgroundLight: "rgba(255, 193, 7, 0.03)",
11823
+ backgroundHover: "rgba(255, 193, 7, 0.05)",
11824
+ surface: "#050505",
11825
+ textSecondary: "#e0e0e0",
11826
+ textTertiary: "#b0b0b0",
11827
+ textMuted: "#808080",
11828
+ highlightBg: "rgba(255, 193, 7, 0.2)",
11829
+ highlightBorder: "rgba(255, 193, 7, 0.4)"
11830
+ },
11831
+ buttons: {
11832
+ primary: {
11833
+ color: "black",
11834
+ bg: "primary",
11835
+ borderWidth: 0,
11836
+ "&:hover": { bg: "secondary" }
11837
+ },
11838
+ secondary: {
11839
+ color: "primary",
11840
+ bg: "transparent",
11841
+ borderWidth: 1,
11842
+ borderStyle: "solid",
11843
+ borderColor: "primary",
11844
+ "&:hover": { bg: "highlight" }
11845
+ },
11846
+ ghost: {
11847
+ color: "text",
11848
+ bg: "transparent",
11849
+ "&:hover": { bg: "backgroundHover" }
11850
+ }
11851
+ },
11852
+ text: {
11853
+ heading: {
11854
+ fontFamily: "heading",
11855
+ fontWeight: "heading",
11856
+ lineHeight: "heading"
11857
+ },
11858
+ body: {
11859
+ fontFamily: "body",
11860
+ fontWeight: "body",
11861
+ lineHeight: "body"
11862
+ },
11863
+ caption: {
11864
+ fontSize: 1,
11865
+ color: "textSecondary"
11866
+ }
11867
+ },
11868
+ cards: {
11869
+ primary: {
11870
+ bg: "surface",
11871
+ border: "1px solid",
11872
+ borderColor: "border",
11873
+ borderRadius: 0
11874
+ },
11875
+ secondary: {
11876
+ bg: "backgroundSecondary",
11877
+ border: "1px solid",
11878
+ borderColor: "border",
11879
+ borderRadius: 0
11880
+ }
11881
+ }
11882
+ };
11883
+ var defaultEditorTheme = {
11884
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
11885
+ fonts: {
11886
+ body: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
11887
+ heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
11888
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
11889
+ },
11890
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
11891
+ fontScale: 1,
11892
+ fontWeights: {
11893
+ body: 400,
11894
+ heading: 600,
11895
+ bold: 700,
11896
+ light: 300,
11897
+ medium: 500,
11898
+ semibold: 600
11899
+ },
11900
+ lineHeights: {
11901
+ body: 1.5,
11902
+ heading: 1.2,
11903
+ tight: 1.3,
11904
+ relaxed: 1.7
11905
+ },
11906
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
11907
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
11908
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
11909
+ shadows: [
11910
+ "none",
11911
+ "0 1px 2px rgba(0, 0, 0, 0.05)",
11912
+ "0 2px 4px rgba(0, 0, 0, 0.1)",
11913
+ "0 4px 8px rgba(0, 0, 0, 0.15)",
11914
+ "0 8px 16px rgba(0, 0, 0, 0.2)",
11915
+ "0 12px 24px rgba(0, 0, 0, 0.25)"
11916
+ ],
11917
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
11918
+ colors: {
11919
+ text: "#d4d4d4",
11920
+ background: "#1e1e1e",
11921
+ primary: "#569cd6",
11922
+ secondary: "#408ac9",
11923
+ accent: "#c586c0",
11924
+ highlight: "rgba(86, 156, 214, 0.1)",
11925
+ muted: "#2a2a2a",
11926
+ success: "#6a9955",
11927
+ warning: "#d18616",
11928
+ error: "#f44747",
11929
+ info: "#569cd6",
11930
+ border: "rgba(255, 255, 255, 0.1)",
11931
+ backgroundSecondary: "#252526",
11932
+ backgroundTertiary: "#333333",
11933
+ backgroundLight: "rgba(255, 255, 255, 0.03)",
11934
+ backgroundHover: "rgba(255, 255, 255, 0.05)",
11935
+ surface: "#252526",
11936
+ textSecondary: "#cccccc",
11937
+ textTertiary: "#999999",
11938
+ textMuted: "#666666",
11939
+ highlightBg: "rgba(255, 235, 59, 0.2)",
11940
+ highlightBorder: "rgba(255, 235, 59, 0.4)"
11941
+ },
11942
+ buttons: {
11943
+ primary: {
11944
+ color: "white",
11945
+ bg: "primary",
11946
+ "&:hover": { bg: "secondary" }
11947
+ },
11948
+ secondary: {
11949
+ color: "primary",
11950
+ bg: "transparent",
11951
+ borderWidth: 1,
11952
+ borderStyle: "solid",
11953
+ borderColor: "primary",
11954
+ "&:hover": { bg: "highlight" }
11955
+ },
11956
+ ghost: {
11957
+ color: "text",
11958
+ bg: "transparent",
11959
+ "&:hover": { bg: "backgroundHover" }
11960
+ }
11961
+ },
11962
+ text: {
11963
+ heading: {
11964
+ fontFamily: "heading",
11965
+ fontWeight: "heading",
11966
+ lineHeight: "heading"
11967
+ },
11968
+ body: {
11969
+ fontFamily: "body",
11970
+ fontWeight: "body",
11971
+ lineHeight: "body"
11972
+ },
11973
+ caption: {
11974
+ fontSize: 1,
11975
+ color: "textSecondary"
11976
+ }
11977
+ },
11978
+ cards: {
11979
+ primary: {
11980
+ bg: "surface",
11981
+ border: "1px solid",
11982
+ borderColor: "border",
11983
+ borderRadius: 1
11984
+ },
11985
+ secondary: {
11986
+ bg: "backgroundSecondary",
11987
+ border: "1px solid",
11988
+ borderColor: "border",
11989
+ borderRadius: 1
11990
+ }
11991
+ }
11992
+ };
11993
+ var landingPageTheme = {
11994
+ space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100, 128],
11995
+ fonts: {
11996
+ body: 'Inter, "Geist Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
11997
+ heading: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
11998
+ monospace: '"SF Mono", Monaco, Inconsolata, "Fira Code", monospace'
11999
+ },
12000
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12001
+ fontScale: 1,
12002
+ fontWeights: {
12003
+ body: 400,
12004
+ heading: 600,
12005
+ bold: 700,
12006
+ light: 300,
12007
+ medium: 500,
12008
+ semibold: 600
12009
+ },
12010
+ lineHeights: {
12011
+ body: 1.6,
12012
+ heading: 1.2,
12013
+ tight: 1.05,
12014
+ relaxed: 1.7
12015
+ },
12016
+ breakpoints: ["640px", "768px", "1024px", "1280px", "1400px"],
12017
+ sizes: [16, 32, 64, 128, 200, 240, 256, 300, 512, 740, 768, 820, 900, 1024, 1200, 1400, 1536],
12018
+ radii: [0, 2, 4, 6, 7, 8, 9, 10, 12, 14, 16, 24],
12019
+ shadows: [
12020
+ "none",
12021
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
12022
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
12023
+ "0 4px 12px rgba(0, 194, 255, 0.4)",
12024
+ "0 6px 24px rgba(0, 194, 255, 0.1)",
12025
+ "0 8px 32px rgba(0, 0, 0, 0.4)"
12026
+ ],
12027
+ zIndices: [0, 1, 10, 20, 30, 40, 50, 1e3],
12028
+ colors: {
12029
+ text: "#ffffff",
12030
+ background: "#000000",
12031
+ primary: "#00C2FF",
12032
+ secondary: "#0098CC",
12033
+ accent: "#0066FF",
12034
+ highlight: "rgba(0, 194, 255, 0.15)",
12035
+ muted: "#1a1a1a",
12036
+ success: "#4caf50",
12037
+ warning: "#ff9800",
12038
+ error: "#f44336",
12039
+ info: "#2196f3",
12040
+ border: "rgba(0, 194, 255, 0.2)",
12041
+ backgroundSecondary: "#0a1628",
12042
+ backgroundTertiary: "#0f1c2e",
12043
+ backgroundLight: "rgba(0, 194, 255, 0.04)",
12044
+ backgroundHover: "rgba(0, 194, 255, 0.1)",
12045
+ surface: "rgba(0, 0, 0, 0.4)",
12046
+ textSecondary: "#d1d5db",
12047
+ textTertiary: "#9ca3af",
12048
+ textMuted: "#6b7280",
12049
+ highlightBg: "rgba(255, 235, 59, 0.25)",
12050
+ highlightBorder: "rgba(255, 235, 59, 0.5)"
12051
+ },
12052
+ buttons: {
12053
+ primary: {
12054
+ color: "#000000",
12055
+ bg: "#00C2FF",
12056
+ borderWidth: 0,
12057
+ padding: "8px 20px",
12058
+ fontSize: 14,
12059
+ fontWeight: 600,
12060
+ cursor: "pointer",
12061
+ "&:hover": {
12062
+ bg: "#00D9FF"
12063
+ }
12064
+ },
12065
+ secondary: {
12066
+ color: "#00C2FF",
12067
+ bg: "transparent",
12068
+ borderWidth: 1,
12069
+ borderStyle: "solid",
12070
+ borderColor: "rgba(0, 194, 255, 0.3)",
12071
+ padding: "8px 16px",
12072
+ fontSize: 14,
12073
+ fontWeight: 600,
12074
+ cursor: "pointer",
12075
+ "&:hover": {
12076
+ bg: "rgba(0, 194, 255, 0.1)",
12077
+ borderColor: "#00C2FF"
12078
+ }
12079
+ },
12080
+ ghost: {
12081
+ color: "#00C2FF",
12082
+ bg: "transparent",
12083
+ borderWidth: 0,
12084
+ padding: "8px 16px",
12085
+ fontSize: 14,
12086
+ fontWeight: 500,
12087
+ cursor: "pointer",
12088
+ "&:hover": {
12089
+ color: "#00D9FF",
12090
+ bg: "rgba(0, 194, 255, 0.1)"
12091
+ }
12092
+ }
12093
+ },
12094
+ text: {
12095
+ heading: {
12096
+ fontFamily: "heading",
12097
+ fontWeight: "heading",
12098
+ lineHeight: "heading",
12099
+ color: "#ffffff"
12100
+ },
12101
+ body: {
12102
+ fontFamily: "body",
12103
+ fontWeight: "body",
12104
+ lineHeight: "body",
12105
+ color: "text"
12106
+ },
12107
+ caption: {
12108
+ fontSize: 1,
12109
+ color: "textSecondary"
12110
+ }
12111
+ },
12112
+ cards: {
12113
+ primary: {
12114
+ bg: "surface",
12115
+ border: "1px solid",
12116
+ borderColor: "border",
12117
+ borderRadius: 4
12118
+ },
12119
+ secondary: {
12120
+ bg: "rgba(0, 194, 255, 0.05)",
12121
+ border: "1px solid",
12122
+ borderColor: "rgba(0, 194, 255, 0.2)",
12123
+ borderRadius: 4
12124
+ }
12125
+ }
12126
+ };
12127
+ var landingPageLightTheme = {
12128
+ ...landingPageTheme,
12129
+ colors: {
12130
+ text: "#1a1a1a",
12131
+ background: "#ffffff",
12132
+ primary: "#0098CC",
12133
+ secondary: "#00C2FF",
12134
+ accent: "#0066FF",
12135
+ highlight: "rgba(0, 152, 204, 0.1)",
12136
+ muted: "#f0f0f0",
12137
+ success: "#4caf50",
12138
+ warning: "#ff9800",
12139
+ error: "#f44336",
12140
+ info: "#2196f3",
12141
+ border: "rgba(0, 152, 204, 0.2)",
12142
+ backgroundSecondary: "#f8f9fa",
12143
+ backgroundTertiary: "#e9ecef",
12144
+ backgroundLight: "rgba(0, 152, 204, 0.03)",
12145
+ backgroundHover: "rgba(0, 152, 204, 0.05)",
12146
+ surface: "rgba(255, 255, 255, 0.95)",
12147
+ textSecondary: "#555555",
12148
+ textTertiary: "#888888",
12149
+ textMuted: "#aaaaaa",
12150
+ highlightBg: "rgba(255, 235, 59, 0.3)",
12151
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
12152
+ },
12153
+ buttons: {
12154
+ primary: {
12155
+ color: "#ffffff",
12156
+ bg: "#0098CC",
12157
+ borderWidth: 0,
12158
+ padding: "8px 20px",
12159
+ fontSize: 14,
12160
+ fontWeight: 600,
12161
+ cursor: "pointer",
12162
+ "&:hover": {
12163
+ bg: "#007aa8"
12164
+ }
12165
+ },
12166
+ secondary: {
12167
+ color: "#0098CC",
12168
+ bg: "transparent",
12169
+ borderWidth: 1,
12170
+ borderStyle: "solid",
12171
+ borderColor: "rgba(0, 152, 204, 0.3)",
12172
+ padding: "8px 16px",
12173
+ fontSize: 14,
12174
+ fontWeight: 600,
12175
+ cursor: "pointer",
12176
+ "&:hover": {
12177
+ bg: "rgba(0, 152, 204, 0.05)",
12178
+ borderColor: "#0098CC"
12179
+ }
12180
+ },
12181
+ ghost: {
12182
+ color: "#0098CC",
12183
+ bg: "transparent",
12184
+ borderWidth: 0,
12185
+ padding: "8px 16px",
12186
+ fontSize: 14,
12187
+ fontWeight: 500,
12188
+ cursor: "pointer",
12189
+ "&:hover": {
12190
+ color: "#007aa8",
12191
+ bg: "rgba(0, 152, 204, 0.05)"
12192
+ }
12193
+ }
12194
+ }
12195
+ };
12196
+ var regalTheme = {
12197
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
12198
+ fonts: {
12199
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
12200
+ heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
12201
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
12202
+ },
12203
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12204
+ fontScale: 1,
12205
+ fontWeights: {
12206
+ body: 400,
12207
+ heading: 600,
12208
+ bold: 700,
12209
+ light: 300,
12210
+ medium: 500,
12211
+ semibold: 600
12212
+ },
12213
+ lineHeights: {
12214
+ body: 1.5,
12215
+ heading: 1.2,
12216
+ tight: 1.25,
12217
+ relaxed: 1.75
12218
+ },
12219
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
12220
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
12221
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
12222
+ shadows: [
12223
+ "none",
12224
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
12225
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
12226
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
12227
+ "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
12228
+ "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
12229
+ ],
12230
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
12231
+ colors: {
12232
+ text: "#f1e8dc",
12233
+ background: "#1a1f2e",
12234
+ primary: "#d4a574",
12235
+ secondary: "#e0b584",
12236
+ accent: "#c9b8a3",
12237
+ highlight: "rgba(212, 165, 116, 0.15)",
12238
+ muted: "#8b7968",
12239
+ success: "#5c8a72",
12240
+ warning: "#d4a574",
12241
+ error: "#a85751",
12242
+ info: "#d4a574",
12243
+ border: "rgba(212, 165, 116, 0.2)",
12244
+ backgroundSecondary: "#212738",
12245
+ backgroundTertiary: "#2d3446",
12246
+ backgroundLight: "rgba(212, 165, 116, 0.08)",
12247
+ backgroundHover: "rgba(212, 165, 116, 0.15)",
12248
+ surface: "#212738",
12249
+ textSecondary: "#c9b8a3",
12250
+ textTertiary: "#8b7968",
12251
+ textMuted: "#8b7968",
12252
+ highlightBg: "rgba(255, 193, 7, 0.25)",
12253
+ highlightBorder: "rgba(255, 193, 7, 0.5)"
12254
+ },
12255
+ buttons: {
12256
+ primary: {
12257
+ color: "background",
12258
+ bg: "primary",
12259
+ "&:hover": {
12260
+ bg: "secondary"
12261
+ }
12262
+ },
12263
+ secondary: {
12264
+ color: "text",
12265
+ bg: "muted",
12266
+ "&:hover": {
12267
+ bg: "backgroundSecondary"
12268
+ }
12269
+ },
12270
+ ghost: {
12271
+ color: "primary",
12272
+ bg: "transparent",
12273
+ "&:hover": {
12274
+ bg: "muted"
12275
+ }
12276
+ }
12277
+ },
12278
+ text: {
12279
+ heading: {
12280
+ fontFamily: "heading",
12281
+ fontWeight: "heading",
12282
+ lineHeight: "heading"
12283
+ },
12284
+ body: {
12285
+ fontFamily: "body",
12286
+ fontWeight: "body",
12287
+ lineHeight: "body"
12288
+ },
12289
+ caption: {
12290
+ fontSize: 1,
12291
+ color: "textSecondary"
12292
+ }
12293
+ },
12294
+ cards: {
12295
+ primary: {
12296
+ bg: "background",
12297
+ border: "1px solid",
12298
+ borderColor: "border",
12299
+ borderRadius: 2
12300
+ },
12301
+ secondary: {
12302
+ bg: "backgroundSecondary",
12303
+ border: "1px solid",
12304
+ borderColor: "border",
12305
+ borderRadius: 2
12306
+ }
12307
+ }
12308
+ };
12309
+ var terminalTheme = {
12310
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
12311
+ fonts: {
12312
+ body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
12313
+ heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
12314
+ monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
12315
+ },
12316
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12317
+ fontScale: 1,
12318
+ fontWeights: {
12319
+ body: 400,
12320
+ heading: 500,
12321
+ bold: 600,
12322
+ light: 300,
12323
+ medium: 500,
12324
+ semibold: 600
12325
+ },
12326
+ lineHeights: {
12327
+ body: 1.6,
12328
+ heading: 1.3,
12329
+ tight: 1.4,
12330
+ relaxed: 1.8
12331
+ },
12332
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
12333
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
12334
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
12335
+ shadows: [
12336
+ "none",
12337
+ "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
12338
+ "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
12339
+ "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
12340
+ "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
12341
+ "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
12342
+ ],
12343
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
12344
+ colors: {
12345
+ text: "#e4e4e4",
12346
+ background: "rgba(10, 10, 10, 0.85)",
12347
+ primary: "#66b3ff",
12348
+ secondary: "#80c4ff",
12349
+ accent: "#66ff99",
12350
+ highlight: "rgba(102, 179, 255, 0.15)",
12351
+ muted: "rgba(26, 26, 26, 0.8)",
12352
+ success: "#66ff99",
12353
+ warning: "#ffcc66",
12354
+ error: "#ff6666",
12355
+ info: "#66b3ff",
12356
+ border: "rgba(255, 255, 255, 0.1)",
12357
+ backgroundSecondary: "rgba(15, 15, 15, 0.9)",
12358
+ backgroundTertiary: "rgba(20, 20, 20, 0.9)",
12359
+ backgroundLight: "rgba(255, 255, 255, 0.05)",
12360
+ backgroundHover: "rgba(102, 179, 255, 0.08)",
12361
+ surface: "rgba(15, 15, 15, 0.95)",
12362
+ textSecondary: "rgba(255, 255, 255, 0.7)",
12363
+ textTertiary: "rgba(255, 255, 255, 0.5)",
12364
+ textMuted: "rgba(255, 255, 255, 0.4)",
12365
+ highlightBg: "rgba(255, 235, 59, 0.25)",
12366
+ highlightBorder: "rgba(255, 235, 59, 0.5)"
12367
+ },
12368
+ modes: {
12369
+ light: {
12370
+ text: "#1a1a1a",
12371
+ background: "rgba(255, 255, 255, 0.9)",
12372
+ primary: "#0066cc",
12373
+ secondary: "#0052a3",
12374
+ accent: "#00cc88",
12375
+ highlight: "rgba(0, 102, 204, 0.08)",
12376
+ muted: "rgba(245, 245, 245, 0.8)",
12377
+ success: "#00cc88",
12378
+ warning: "#ffaa00",
12379
+ error: "#ff3333",
12380
+ info: "#0066cc",
12381
+ border: "rgba(0, 0, 0, 0.1)",
12382
+ backgroundSecondary: "rgba(250, 250, 250, 0.9)",
12383
+ backgroundTertiary: "rgba(245, 245, 245, 0.9)",
12384
+ backgroundLight: "rgba(0, 0, 0, 0.02)",
12385
+ backgroundHover: "rgba(0, 102, 204, 0.04)",
12386
+ surface: "rgba(255, 255, 255, 0.95)",
12387
+ textSecondary: "rgba(0, 0, 0, 0.6)",
12388
+ textTertiary: "rgba(0, 0, 0, 0.4)",
12389
+ textMuted: "rgba(0, 0, 0, 0.3)",
12390
+ highlightBg: "rgba(255, 235, 59, 0.3)",
12391
+ highlightBorder: "rgba(255, 235, 59, 0.6)"
12392
+ }
12393
+ },
12394
+ buttons: {
12395
+ primary: {
12396
+ color: "white",
12397
+ bg: "primary",
12398
+ borderWidth: 0,
12399
+ "&:hover": {
12400
+ bg: "secondary"
12401
+ }
12402
+ },
12403
+ secondary: {
12404
+ color: "primary",
12405
+ bg: "transparent",
12406
+ borderWidth: 1,
12407
+ borderStyle: "solid",
12408
+ borderColor: "primary",
12409
+ "&:hover": {
12410
+ bg: "highlight"
12411
+ }
12412
+ },
12413
+ ghost: {
12414
+ color: "text",
12415
+ bg: "transparent",
12416
+ "&:hover": {
12417
+ bg: "backgroundHover"
12418
+ }
12419
+ }
12420
+ },
12421
+ text: {
12422
+ heading: {
12423
+ fontFamily: "heading",
12424
+ fontWeight: "heading",
12425
+ lineHeight: "heading"
12426
+ },
12427
+ body: {
12428
+ fontFamily: "body",
12429
+ fontWeight: "body",
12430
+ lineHeight: "body"
12431
+ },
12432
+ caption: {
12433
+ fontSize: 1,
12434
+ color: "textSecondary"
12435
+ }
12436
+ },
12437
+ cards: {
12438
+ primary: {
12439
+ bg: "surface",
12440
+ border: "1px solid",
12441
+ borderColor: "border",
12442
+ borderRadius: 1
12443
+ },
12444
+ secondary: {
12445
+ bg: "backgroundSecondary",
12446
+ border: "1px solid",
12447
+ borderColor: "border",
12448
+ borderRadius: 1
12449
+ }
12450
+ }
12451
+ };
12452
+ var matrixTheme = {
12453
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
12454
+ fonts: {
12455
+ body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
12456
+ heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
12457
+ monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
12458
+ },
12459
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12460
+ fontScale: 1,
12461
+ fontWeights: {
12462
+ body: 400,
12463
+ heading: 500,
12464
+ bold: 600,
12465
+ light: 300,
12466
+ medium: 500,
12467
+ semibold: 600
12468
+ },
12469
+ lineHeights: {
12470
+ body: 1.5,
12471
+ heading: 1.2,
12472
+ tight: 1.3,
12473
+ relaxed: 1.7
12474
+ },
12475
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
12476
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
12477
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
12478
+ shadows: [
12479
+ "none",
12480
+ "0 0 5px rgba(0, 216, 53, 0.15)",
12481
+ "0 0 10px rgba(0, 216, 53, 0.2)",
12482
+ "0 0 15px rgba(0, 216, 53, 0.25)",
12483
+ "0 0 20px rgba(0, 216, 53, 0.3)",
12484
+ "0 0 30px rgba(0, 216, 53, 0.4)"
12485
+ ],
12486
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
12487
+ colors: {
12488
+ text: "#a8a8a8",
12489
+ background: "#000000",
12490
+ primary: "#00d835",
12491
+ secondary: "#00a828",
12492
+ accent: "#00d835",
12493
+ highlight: "rgba(0, 216, 53, 0.15)",
12494
+ muted: "#0a0a0a",
12495
+ success: "#00d835",
12496
+ warning: "#d4a000",
12497
+ error: "#d63333",
12498
+ info: "#00a8d6",
12499
+ border: "rgba(0, 216, 53, 0.2)",
12500
+ backgroundSecondary: "#0a0a0a",
12501
+ backgroundTertiary: "#111111",
12502
+ backgroundLight: "rgba(0, 216, 53, 0.03)",
12503
+ backgroundHover: "rgba(0, 216, 53, 0.08)",
12504
+ surface: "#050505",
12505
+ textSecondary: "#808080",
12506
+ textTertiary: "#606060",
12507
+ textMuted: "#484848",
12508
+ highlightBg: "rgba(0, 216, 53, 0.25)",
12509
+ highlightBorder: "rgba(0, 216, 53, 0.5)"
12510
+ },
12511
+ buttons: {
12512
+ primary: {
12513
+ color: "black",
12514
+ bg: "primary",
12515
+ borderWidth: 0,
12516
+ "&:hover": {
12517
+ bg: "secondary"
12518
+ }
12519
+ },
12520
+ secondary: {
12521
+ color: "primary",
12522
+ bg: "transparent",
12523
+ borderWidth: 1,
12524
+ borderStyle: "solid",
12525
+ borderColor: "primary",
12526
+ "&:hover": {
12527
+ bg: "highlight"
12528
+ }
12529
+ },
12530
+ ghost: {
12531
+ color: "text",
12532
+ bg: "transparent",
12533
+ "&:hover": {
12534
+ bg: "backgroundHover"
12535
+ }
12536
+ }
12537
+ },
12538
+ text: {
12539
+ heading: {
12540
+ fontFamily: "heading",
12541
+ fontWeight: "heading",
12542
+ lineHeight: "heading"
12543
+ },
12544
+ body: {
12545
+ fontFamily: "body",
12546
+ fontWeight: "body",
12547
+ lineHeight: "body"
12548
+ },
12549
+ caption: {
12550
+ fontSize: 1,
12551
+ color: "textSecondary"
12552
+ }
12553
+ },
12554
+ cards: {
12555
+ primary: {
12556
+ bg: "surface",
12557
+ border: "1px solid",
12558
+ borderColor: "border",
12559
+ borderRadius: 0
12560
+ },
12561
+ secondary: {
12562
+ bg: "backgroundSecondary",
12563
+ border: "1px solid",
12564
+ borderColor: "border",
12565
+ borderRadius: 0
12566
+ }
12567
+ }
12568
+ };
12569
+ var matrixMinimalTheme = {
12570
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
12571
+ fonts: {
12572
+ body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
12573
+ heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
12574
+ monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
12575
+ },
12576
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12577
+ fontScale: 1,
12578
+ fontWeights: {
12579
+ body: 400,
12580
+ heading: 500,
12581
+ bold: 600,
12582
+ light: 300,
12583
+ medium: 500,
12584
+ semibold: 600
12585
+ },
12586
+ lineHeights: {
12587
+ body: 1.5,
12588
+ heading: 1.2,
12589
+ tight: 1.3,
12590
+ relaxed: 1.7
12591
+ },
12592
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
12593
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
12594
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
12595
+ shadows: [
12596
+ "none",
12597
+ "0 1px 2px rgba(0, 0, 0, 0.05)",
12598
+ "0 2px 4px rgba(0, 0, 0, 0.1)",
12599
+ "0 4px 8px rgba(0, 0, 0, 0.15)",
12600
+ "0 8px 16px rgba(0, 0, 0, 0.2)",
12601
+ "0 0 20px rgba(0, 216, 53, 0.1)"
12602
+ ],
12603
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
12604
+ colors: {
12605
+ text: "#a8a8a8",
12606
+ background: "#000000",
12607
+ primary: "#b8b8b8",
12608
+ secondary: "#909090",
12609
+ accent: "#00d835",
12610
+ highlight: "rgba(0, 216, 53, 0.1)",
12611
+ muted: "#0a0a0a",
12612
+ success: "#00d835",
12613
+ warning: "#d4a000",
12614
+ error: "#d63333",
12615
+ info: "#00a8d6",
12616
+ border: "rgba(184, 184, 184, 0.1)",
12617
+ backgroundSecondary: "#0a0a0a",
12618
+ backgroundTertiary: "#111111",
12619
+ backgroundLight: "rgba(184, 184, 184, 0.02)",
12620
+ backgroundHover: "rgba(0, 216, 53, 0.05)",
12621
+ surface: "#050505",
12622
+ textSecondary: "#808080",
12623
+ textTertiary: "#606060",
12624
+ textMuted: "#484848",
12625
+ highlightBg: "rgba(0, 216, 53, 0.2)",
12626
+ highlightBorder: "rgba(0, 216, 53, 0.4)"
12627
+ },
12628
+ buttons: {
12629
+ primary: {
12630
+ color: "black",
12631
+ bg: "primary",
12632
+ borderWidth: 0,
12633
+ "&:hover": {
12634
+ bg: "secondary"
12635
+ }
12636
+ },
12637
+ secondary: {
12638
+ color: "primary",
12639
+ bg: "transparent",
12640
+ borderWidth: 1,
12641
+ borderStyle: "solid",
12642
+ borderColor: "primary",
12643
+ "&:hover": {
12644
+ bg: "backgroundHover"
12645
+ }
12646
+ },
12647
+ ghost: {
12648
+ color: "text",
12649
+ bg: "transparent",
12650
+ "&:hover": {
12651
+ bg: "backgroundHover"
12652
+ }
12653
+ }
12654
+ },
12655
+ text: {
12656
+ heading: {
12657
+ fontFamily: "heading",
12658
+ fontWeight: "heading",
12659
+ lineHeight: "heading"
12660
+ },
12661
+ body: {
12662
+ fontFamily: "body",
12663
+ fontWeight: "body",
12664
+ lineHeight: "body"
12665
+ },
12666
+ caption: {
12667
+ fontSize: 1,
12668
+ color: "textSecondary"
12669
+ }
12670
+ },
12671
+ cards: {
12672
+ primary: {
12673
+ bg: "surface",
12674
+ border: "1px solid",
12675
+ borderColor: "border",
12676
+ borderRadius: 0
12677
+ },
12678
+ secondary: {
12679
+ bg: "backgroundSecondary",
12680
+ border: "1px solid",
12681
+ borderColor: "border",
12682
+ borderRadius: 0
12683
+ }
12684
+ }
12685
+ };
12686
+ var slateTheme = {
12687
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
12688
+ fonts: {
12689
+ body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
12690
+ heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
12691
+ monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
12692
+ },
12693
+ fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
12694
+ fontScale: 1,
12695
+ fontWeights: {
12696
+ body: 400,
12697
+ heading: 600,
12698
+ bold: 700,
12699
+ light: 300,
12700
+ medium: 500,
12701
+ semibold: 600
12702
+ },
12703
+ lineHeights: {
12704
+ body: 1.6,
12705
+ heading: 1.3,
12706
+ tight: 1.25,
12707
+ relaxed: 1.75
12708
+ },
12709
+ breakpoints: ["640px", "768px", "1024px", "1280px"],
12710
+ sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
12711
+ radii: [0, 2, 4, 6, 8, 12, 16, 24],
12712
+ shadows: [
12713
+ "none",
12714
+ "0 1px 3px 0 rgba(0, 0, 0, 0.2)",
12715
+ "0 4px 6px -1px rgba(0, 0, 0, 0.2)",
12716
+ "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
12717
+ "0 20px 25px -5px rgba(0, 0, 0, 0.25)",
12718
+ "0 25px 50px -12px rgba(0, 0, 0, 0.3)"
12719
+ ],
12720
+ zIndices: [0, 1, 10, 20, 30, 40, 50],
12721
+ colors: {
12722
+ text: "#9ca3af",
12723
+ background: "#1a1c1e",
12724
+ primary: "#d1d5db",
12725
+ secondary: "#6b7280",
12726
+ accent: "#f59e0b",
12727
+ highlight: "rgba(209, 213, 219, 0.15)",
12728
+ muted: "#2d3134",
12729
+ success: "#10b981",
12730
+ warning: "#f59e0b",
12731
+ error: "#ef4444",
12732
+ info: "#3b82f6",
12733
+ border: "rgba(156, 163, 175, 0.15)",
12734
+ backgroundSecondary: "#22252a",
12735
+ backgroundTertiary: "#2d3134",
12736
+ backgroundLight: "rgba(156, 163, 175, 0.05)",
12737
+ backgroundHover: "rgba(156, 163, 175, 0.1)",
12738
+ surface: "#1f2124",
12739
+ textSecondary: "#e5e7eb",
12740
+ textTertiary: "#6b7280",
12741
+ textMuted: "#4b5563",
12742
+ highlightBg: "rgba(245, 158, 11, 0.25)",
12743
+ highlightBorder: "rgba(245, 158, 11, 0.5)"
12744
+ },
12745
+ buttons: {
12746
+ primary: {
12747
+ color: "#1a1c1e",
12748
+ bg: "primary",
12749
+ borderWidth: 0,
12750
+ "&:hover": {
12751
+ bg: "#9ca3af"
12752
+ }
12753
+ },
12754
+ secondary: {
12755
+ color: "#e5e7eb",
12756
+ bg: "secondary",
12757
+ borderWidth: 0,
12758
+ "&:hover": {
12759
+ bg: "#4b5563"
12760
+ }
12761
+ },
12762
+ ghost: {
12763
+ color: "textSecondary",
12764
+ bg: "transparent",
12765
+ "&:hover": {
12766
+ bg: "backgroundHover"
12767
+ }
12768
+ }
12769
+ },
12770
+ text: {
12771
+ heading: {
12772
+ fontFamily: "heading",
12773
+ fontWeight: "heading",
12774
+ lineHeight: "heading",
12775
+ color: "textSecondary"
12776
+ },
12777
+ body: {
12778
+ fontFamily: "body",
12779
+ fontWeight: "body",
12780
+ lineHeight: "body"
12781
+ },
12782
+ caption: {
12783
+ fontSize: 1,
12784
+ color: "textTertiary"
12785
+ }
12786
+ },
12787
+ cards: {
12788
+ primary: {
12789
+ bg: "surface",
12790
+ border: "1px solid",
12791
+ borderColor: "border",
12792
+ borderRadius: 3
12793
+ },
12794
+ secondary: {
12795
+ bg: "backgroundSecondary",
12796
+ border: "1px solid",
12797
+ borderColor: "border",
12798
+ borderRadius: 3
12799
+ }
12800
+ }
12801
+ };
12802
+ var import_react2 = __toESM(React2);
12803
+ function overrideColors(theme2, colors) {
12804
+ return {
12805
+ ...theme2,
12806
+ colors: {
12807
+ ...theme2.colors,
12808
+ ...colors
12809
+ }
12810
+ };
12811
+ }
12812
+ function makeTheme(baseTheme, overrides) {
12813
+ return {
12814
+ ...baseTheme,
12815
+ ...overrides,
12816
+ colors: {
12817
+ ...baseTheme.colors,
12818
+ ...overrides.colors
12819
+ },
12820
+ fonts: {
12821
+ ...baseTheme.fonts,
12822
+ ...overrides.fonts
12823
+ }
12824
+ };
12825
+ }
12826
+ function addMode(theme2, modeName, colors, baseMode) {
12827
+ let baseColors;
12828
+ if (baseMode && theme2.modes && theme2.modes[baseMode]) {
12829
+ baseColors = {
12830
+ ...theme2.colors,
12831
+ ...theme2.modes[baseMode]
12832
+ };
12833
+ } else {
12834
+ baseColors = theme2.colors;
12835
+ }
12836
+ const newMode = {
12837
+ ...baseColors,
12838
+ ...colors
12839
+ };
12840
+ return {
12841
+ ...theme2,
12842
+ modes: {
12843
+ ...theme2.modes,
12844
+ [modeName]: newMode
12845
+ }
12846
+ };
12847
+ }
12848
+ function getMode(theme2, mode) {
12849
+ if (!mode || !theme2.modes || !theme2.modes[mode]) {
12850
+ return theme2.colors;
12851
+ }
12852
+ return {
12853
+ ...theme2.colors,
12854
+ ...theme2.modes[mode]
12855
+ };
12856
+ }
12857
+ var ThemeContext2;
12858
+ var getThemeContext2 = () => {
12859
+ if (typeof window !== "undefined") {
12860
+ const globalWindow = window;
12861
+ if (!globalWindow.__principlemd_theme_context__) {
12862
+ globalWindow.__principlemd_theme_context__ = import_react2.createContext(void 0);
12863
+ }
12864
+ return globalWindow.__principlemd_theme_context__;
12865
+ } else {
12866
+ if (!ThemeContext2) {
12867
+ ThemeContext2 = import_react2.createContext(void 0);
12868
+ }
12869
+ return ThemeContext2;
12870
+ }
12871
+ };
12872
+ var ThemeContextSingleton2 = getThemeContext2();
12873
+ var useTheme2 = () => {
12874
+ const context = import_react2.useContext(ThemeContextSingleton2);
12875
+ if (!context) {
12876
+ throw new Error("useTheme must be used within a ThemeProvider");
12877
+ }
12878
+ return context;
12879
+ };
12880
+ var ThemeProvider = ({
12881
+ children,
12882
+ theme: customTheme = theme,
12883
+ initialMode
12884
+ }) => {
12885
+ const [mode, setMode] = import_react2.useState(initialMode);
12886
+ const activeTheme = import_react2.default.useMemo(() => {
12887
+ if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
12888
+ return customTheme;
12889
+ }
12890
+ return {
12891
+ ...customTheme,
12892
+ colors: getMode(customTheme, mode)
12893
+ };
12894
+ }, [customTheme, mode]);
12895
+ import_react2.useEffect(() => {
12896
+ if (!initialMode) {
12897
+ const savedMode = localStorage.getItem("principlemd-theme-mode");
12898
+ if (savedMode) {
12899
+ setMode(savedMode);
12900
+ }
12901
+ }
12902
+ }, [initialMode]);
12903
+ import_react2.useEffect(() => {
12904
+ if (mode) {
12905
+ localStorage.setItem("principlemd-theme-mode", mode);
12906
+ } else {
12907
+ localStorage.removeItem("principlemd-theme-mode");
12908
+ }
12909
+ }, [mode]);
12910
+ const value = {
12911
+ theme: activeTheme,
12912
+ mode,
12913
+ setMode
12914
+ };
12915
+ return /* @__PURE__ */ import_react2.default.createElement(ThemeContextSingleton2.Provider, {
12916
+ value
12917
+ }, children);
12918
+ };
12919
+ var withTheme = (Component2) => {
12920
+ return (props) => {
12921
+ const { theme: theme2 } = useTheme2();
12922
+ return /* @__PURE__ */ import_react2.default.createElement(Component2, {
12923
+ ...props,
12924
+ theme: theme2
12925
+ });
12926
+ };
12927
+ };
12928
+ var getColor = (theme2, colorKey) => {
12929
+ const colors = theme2.colors;
12930
+ const value = colors[colorKey];
12931
+ return typeof value === "string" ? value : colorKey;
12932
+ };
12933
+ var getSpace = (theme2, index2) => {
12934
+ return theme2.space[index2] || 0;
12935
+ };
12936
+ var getFontSize = (theme2, index2) => {
12937
+ return theme2.fontSizes[index2] || theme2.fontSizes[2];
12938
+ };
12939
+ var getRadius = (theme2, index2) => {
12940
+ return theme2.radii[index2] || 0;
12941
+ };
12942
+ var getShadow = (theme2, index2) => {
12943
+ return theme2.shadows[index2] || "none";
12944
+ };
12945
+ var getZIndex = (theme2, index2) => {
12946
+ return theme2.zIndices[index2] || 0;
12947
+ };
12948
+ var responsive = (values) => {
12949
+ return values.reduce((acc, value, index2) => {
12950
+ if (index2 === 0) {
12951
+ return value;
12952
+ }
12953
+ return {
12954
+ ...acc,
12955
+ [`@media screen and (min-width: ${values[index2 - 1]})`]: value
12956
+ };
12957
+ }, {});
12958
+ };
12959
+ var sx = (styles) => styles;
12960
+ var createStyle = (theme2, styleObj) => {
12961
+ const processValue = (value) => {
12962
+ if (typeof value === "string") {
12963
+ if (value in theme2.colors) {
12964
+ return getColor(theme2, value);
12965
+ }
12966
+ return value;
12967
+ }
12968
+ if (typeof value === "number") {
12969
+ return value;
12970
+ }
12971
+ if (Array.isArray(value)) {
12972
+ return value.map(processValue);
12973
+ }
12974
+ if (typeof value === "object" && value !== null) {
12975
+ const processed2 = {};
12976
+ for (const [key, val] of Object.entries(value)) {
12977
+ processed2[key] = processValue(val);
12978
+ }
12979
+ return processed2;
12980
+ }
12981
+ return value;
12982
+ };
12983
+ const processed = {};
12984
+ for (const [key, val] of Object.entries(styleObj)) {
12985
+ processed[key] = processValue(val);
12986
+ }
12987
+ return processed;
12988
+ };
12989
+ var mergeThemes = (baseTheme, ...overrides) => {
12990
+ return overrides.reduce((theme2, override) => ({
12991
+ space: override.space || theme2.space,
12992
+ fonts: { ...theme2.fonts, ...override.fonts || {} },
12993
+ fontSizes: override.fontSizes || theme2.fontSizes,
12994
+ fontWeights: { ...theme2.fontWeights, ...override.fontWeights || {} },
12995
+ lineHeights: { ...theme2.lineHeights, ...override.lineHeights || {} },
12996
+ breakpoints: override.breakpoints || theme2.breakpoints,
12997
+ sizes: override.sizes || theme2.sizes,
12998
+ radii: override.radii || theme2.radii,
12999
+ shadows: override.shadows || theme2.shadows,
13000
+ zIndices: override.zIndices || theme2.zIndices,
13001
+ colors: {
13002
+ ...theme2.colors,
13003
+ ...override.colors || {}
13004
+ },
13005
+ buttons: { ...theme2.buttons, ...override.buttons || {} },
13006
+ text: { ...theme2.text, ...override.text || {} },
13007
+ cards: { ...theme2.cards, ...override.cards || {} }
13008
+ }), baseTheme);
13009
+ };
13010
+ var import_react22 = __toESM(React2);
13011
+ var ThemeShowcase = ({
13012
+ theme: theme2,
13013
+ title,
13014
+ showValues = true,
13015
+ sections = ["colors", "typography", "spacing", "shadows", "radii"]
13016
+ }) => {
13017
+ const containerStyle = {
13018
+ fontFamily: theme2.fonts.body,
13019
+ color: theme2.colors.text,
13020
+ backgroundColor: theme2.colors.background,
13021
+ padding: theme2.space[4],
13022
+ minHeight: "100vh"
13023
+ };
13024
+ const sectionStyle = {
13025
+ marginBottom: theme2.space[5],
13026
+ padding: theme2.space[4],
13027
+ backgroundColor: theme2.colors.surface || theme2.colors.backgroundSecondary,
13028
+ borderRadius: theme2.radii[2],
13029
+ border: `1px solid ${theme2.colors.border}`
13030
+ };
13031
+ const headingStyle = {
13032
+ fontFamily: theme2.fonts.heading,
13033
+ fontSize: theme2.fontSizes[5],
13034
+ fontWeight: theme2.fontWeights.heading,
13035
+ marginBottom: theme2.space[3],
13036
+ color: theme2.colors.primary
13037
+ };
13038
+ const subheadingStyle = {
13039
+ fontFamily: theme2.fonts.heading,
13040
+ fontSize: theme2.fontSizes[3],
13041
+ fontWeight: theme2.fontWeights.medium,
13042
+ marginBottom: theme2.space[2],
13043
+ marginTop: theme2.space[3],
13044
+ color: theme2.colors.text
13045
+ };
13046
+ return /* @__PURE__ */ import_react22.default.createElement("div", {
13047
+ style: containerStyle
13048
+ }, title && /* @__PURE__ */ import_react22.default.createElement("h1", {
13049
+ style: {
13050
+ ...headingStyle,
13051
+ fontSize: theme2.fontSizes[6],
13052
+ marginBottom: theme2.space[4]
13053
+ }
13054
+ }, title), sections.includes("colors") && /* @__PURE__ */ import_react22.default.createElement("div", {
13055
+ style: sectionStyle
13056
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13057
+ style: headingStyle
13058
+ }, "Colors"), /* @__PURE__ */ import_react22.default.createElement("h3", {
13059
+ style: subheadingStyle
13060
+ }, "Primary Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
13061
+ style: {
13062
+ display: "grid",
13063
+ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
13064
+ gap: theme2.space[3],
13065
+ marginBottom: theme2.space[3]
13066
+ }
13067
+ }, ["text", "background", "primary", "secondary", "accent", "muted"].map((key) => {
13068
+ const color = theme2.colors[key];
13069
+ if (!color)
13070
+ return null;
13071
+ return /* @__PURE__ */ import_react22.default.createElement("div", {
13072
+ key,
13073
+ style: {
13074
+ display: "flex",
13075
+ alignItems: "center",
13076
+ padding: theme2.space[2],
13077
+ backgroundColor: theme2.colors.backgroundLight || theme2.colors.backgroundTertiary,
13078
+ borderRadius: theme2.radii[1]
13079
+ }
13080
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13081
+ style: {
13082
+ width: 40,
13083
+ height: 40,
13084
+ backgroundColor: color,
13085
+ border: `1px solid ${theme2.colors.border}`,
13086
+ borderRadius: theme2.radii[1],
13087
+ marginRight: theme2.space[2]
13088
+ }
13089
+ }), /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("div", {
13090
+ style: {
13091
+ fontFamily: theme2.fonts.monospace,
13092
+ fontSize: theme2.fontSizes[1],
13093
+ fontWeight: theme2.fontWeights.medium
13094
+ }
13095
+ }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
13096
+ style: {
13097
+ fontFamily: theme2.fonts.monospace,
13098
+ fontSize: theme2.fontSizes[0],
13099
+ color: theme2.colors.textSecondary
13100
+ }
13101
+ }, color)));
13102
+ })), /* @__PURE__ */ import_react22.default.createElement("h3", {
13103
+ style: subheadingStyle
13104
+ }, "Status Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
13105
+ style: {
13106
+ display: "grid",
13107
+ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
13108
+ gap: theme2.space[3],
13109
+ marginBottom: theme2.space[3]
13110
+ }
13111
+ }, ["success", "warning", "error", "info"].map((key) => {
13112
+ const color = theme2.colors[key];
13113
+ if (!color)
13114
+ return null;
13115
+ return /* @__PURE__ */ import_react22.default.createElement("div", {
13116
+ key,
13117
+ style: {
13118
+ display: "flex",
13119
+ alignItems: "center",
13120
+ padding: theme2.space[2],
13121
+ backgroundColor: theme2.colors.backgroundLight || theme2.colors.backgroundTertiary,
13122
+ borderRadius: theme2.radii[1]
13123
+ }
13124
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13125
+ style: {
13126
+ width: 40,
13127
+ height: 40,
13128
+ backgroundColor: color,
13129
+ border: `1px solid ${theme2.colors.border}`,
13130
+ borderRadius: theme2.radii[1],
13131
+ marginRight: theme2.space[2]
13132
+ }
13133
+ }), /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("div", {
13134
+ style: {
13135
+ fontFamily: theme2.fonts.monospace,
13136
+ fontSize: theme2.fontSizes[1],
13137
+ fontWeight: theme2.fontWeights.medium
13138
+ }
13139
+ }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
13140
+ style: {
13141
+ fontFamily: theme2.fonts.monospace,
13142
+ fontSize: theme2.fontSizes[0],
13143
+ color: theme2.colors.textSecondary
13144
+ }
13145
+ }, color)));
13146
+ })), /* @__PURE__ */ import_react22.default.createElement("h3", {
13147
+ style: subheadingStyle
13148
+ }, "Background Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
13149
+ style: {
13150
+ display: "grid",
13151
+ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
13152
+ gap: theme2.space[3]
13153
+ }
13154
+ }, ["backgroundSecondary", "backgroundTertiary", "backgroundLight", "backgroundHover", "surface"].map((key) => {
13155
+ const color = theme2.colors[key];
13156
+ if (!color)
13157
+ return null;
13158
+ return /* @__PURE__ */ import_react22.default.createElement("div", {
13159
+ key,
13160
+ style: {
13161
+ padding: theme2.space[3],
13162
+ backgroundColor: color,
13163
+ border: `1px solid ${theme2.colors.border}`,
13164
+ borderRadius: theme2.radii[1]
13165
+ }
13166
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13167
+ style: {
13168
+ fontFamily: theme2.fonts.monospace,
13169
+ fontSize: theme2.fontSizes[1],
13170
+ fontWeight: theme2.fontWeights.medium
13171
+ }
13172
+ }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
13173
+ style: {
13174
+ fontFamily: theme2.fonts.monospace,
13175
+ fontSize: theme2.fontSizes[0],
13176
+ color: theme2.colors.textSecondary,
13177
+ marginTop: theme2.space[1]
13178
+ }
13179
+ }, color));
13180
+ }))), sections.includes("typography") && /* @__PURE__ */ import_react22.default.createElement("div", {
13181
+ style: sectionStyle
13182
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13183
+ style: headingStyle
13184
+ }, "Typography"), /* @__PURE__ */ import_react22.default.createElement("h3", {
13185
+ style: subheadingStyle
13186
+ }, "Font Families"), /* @__PURE__ */ import_react22.default.createElement("div", {
13187
+ style: { marginBottom: theme2.space[4] }
13188
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13189
+ style: {
13190
+ fontFamily: theme2.fonts.heading,
13191
+ fontSize: theme2.fontSizes[4],
13192
+ marginBottom: theme2.space[2]
13193
+ }
13194
+ }, "Heading Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
13195
+ style: {
13196
+ fontFamily: theme2.fonts.monospace,
13197
+ fontSize: theme2.fontSizes[1],
13198
+ color: theme2.colors.textSecondary
13199
+ }
13200
+ }, " ", theme2.fonts.heading)), /* @__PURE__ */ import_react22.default.createElement("div", {
13201
+ style: {
13202
+ fontFamily: theme2.fonts.body,
13203
+ fontSize: theme2.fontSizes[2],
13204
+ marginBottom: theme2.space[2]
13205
+ }
13206
+ }, "Body Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
13207
+ style: {
13208
+ fontFamily: theme2.fonts.monospace,
13209
+ fontSize: theme2.fontSizes[1],
13210
+ color: theme2.colors.textSecondary
13211
+ }
13212
+ }, " ", theme2.fonts.body)), /* @__PURE__ */ import_react22.default.createElement("div", {
13213
+ style: {
13214
+ fontFamily: theme2.fonts.monospace,
13215
+ fontSize: theme2.fontSizes[2]
13216
+ }
13217
+ }, "Monospace Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
13218
+ style: {
13219
+ fontSize: theme2.fontSizes[1],
13220
+ color: theme2.colors.textSecondary
13221
+ }
13222
+ }, " ", theme2.fonts.monospace))), /* @__PURE__ */ import_react22.default.createElement("h3", {
13223
+ style: subheadingStyle
13224
+ }, "Font Sizes"), /* @__PURE__ */ import_react22.default.createElement("div", {
13225
+ style: { marginBottom: theme2.space[4] }
13226
+ }, theme2.fontSizes.map((size, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
13227
+ key: index2,
13228
+ style: {
13229
+ fontSize: size,
13230
+ lineHeight: theme2.lineHeights.body,
13231
+ marginBottom: theme2.space[1]
13232
+ }
13233
+ }, "Size ", index2, ": Sample Text ", showValues && `(${size}px)`))), /* @__PURE__ */ import_react22.default.createElement("h3", {
13234
+ style: subheadingStyle
13235
+ }, "Font Weights"), /* @__PURE__ */ import_react22.default.createElement("div", {
13236
+ style: {
13237
+ display: "grid",
13238
+ gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
13239
+ gap: theme2.space[2]
13240
+ }
13241
+ }, Object.entries(theme2.fontWeights).map(([name, weight]) => /* @__PURE__ */ import_react22.default.createElement("div", {
13242
+ key: name,
13243
+ style: {
13244
+ fontWeight: weight,
13245
+ fontSize: theme2.fontSizes[2]
13246
+ }
13247
+ }, name, " ", showValues && `(${weight})`)))), sections.includes("spacing") && /* @__PURE__ */ import_react22.default.createElement("div", {
13248
+ style: sectionStyle
13249
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13250
+ style: headingStyle
13251
+ }, "Spacing"), /* @__PURE__ */ import_react22.default.createElement("div", {
13252
+ style: { display: "flex", flexDirection: "column", gap: theme2.space[2] }
13253
+ }, theme2.space.map((space, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
13254
+ key: index2,
13255
+ style: { display: "flex", alignItems: "center" }
13256
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13257
+ style: {
13258
+ width: 60,
13259
+ fontFamily: theme2.fonts.monospace,
13260
+ fontSize: theme2.fontSizes[1],
13261
+ color: theme2.colors.textSecondary
13262
+ }
13263
+ }, "[", index2, "]"), /* @__PURE__ */ import_react22.default.createElement("div", {
13264
+ style: {
13265
+ height: 24,
13266
+ width: space,
13267
+ backgroundColor: theme2.colors.primary,
13268
+ borderRadius: theme2.radii[1]
13269
+ }
13270
+ }), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
13271
+ style: {
13272
+ marginLeft: theme2.space[2],
13273
+ fontFamily: theme2.fonts.monospace,
13274
+ fontSize: theme2.fontSizes[1],
13275
+ color: theme2.colors.textSecondary
13276
+ }
13277
+ }, space, "px"))))), sections.includes("radii") && /* @__PURE__ */ import_react22.default.createElement("div", {
13278
+ style: sectionStyle
13279
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13280
+ style: headingStyle
13281
+ }, "Border Radii"), /* @__PURE__ */ import_react22.default.createElement("div", {
13282
+ style: {
13283
+ display: "grid",
13284
+ gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
13285
+ gap: theme2.space[3]
13286
+ }
13287
+ }, theme2.radii.map((radius, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
13288
+ key: index2,
13289
+ style: { textAlign: "center" }
13290
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13291
+ style: {
13292
+ width: 80,
13293
+ height: 80,
13294
+ backgroundColor: theme2.colors.primary,
13295
+ borderRadius: radius,
13296
+ marginBottom: theme2.space[1],
13297
+ margin: "0 auto"
13298
+ }
13299
+ }), /* @__PURE__ */ import_react22.default.createElement("div", {
13300
+ style: {
13301
+ fontFamily: theme2.fonts.monospace,
13302
+ fontSize: theme2.fontSizes[0],
13303
+ color: theme2.colors.textSecondary
13304
+ }
13305
+ }, "[", index2, "] ", showValues && `${radius}px`))))), sections.includes("shadows") && /* @__PURE__ */ import_react22.default.createElement("div", {
13306
+ style: sectionStyle
13307
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13308
+ style: headingStyle
13309
+ }, "Shadows"), /* @__PURE__ */ import_react22.default.createElement("div", {
13310
+ style: {
13311
+ display: "grid",
13312
+ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
13313
+ gap: theme2.space[4]
13314
+ }
13315
+ }, theme2.shadows.map((shadow, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
13316
+ key: index2,
13317
+ style: { textAlign: "center" }
13318
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13319
+ style: {
13320
+ width: 100,
13321
+ height: 100,
13322
+ backgroundColor: theme2.colors.background,
13323
+ boxShadow: shadow,
13324
+ borderRadius: theme2.radii[2],
13325
+ margin: "0 auto",
13326
+ marginBottom: theme2.space[2],
13327
+ border: `1px solid ${theme2.colors.border}`
13328
+ }
13329
+ }), /* @__PURE__ */ import_react22.default.createElement("div", {
13330
+ style: {
13331
+ fontFamily: theme2.fonts.monospace,
13332
+ fontSize: theme2.fontSizes[0],
13333
+ color: theme2.colors.textSecondary
13334
+ }
13335
+ }, "Shadow [", index2, "]"), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
13336
+ style: {
13337
+ fontFamily: theme2.fonts.monospace,
13338
+ fontSize: theme2.fontSizes[0],
13339
+ color: theme2.colors.textMuted,
13340
+ marginTop: theme2.space[1]
13341
+ }
13342
+ }, shadow === "none" ? "none" : "..."))))), theme2.modes && Object.keys(theme2.modes).length > 0 && /* @__PURE__ */ import_react22.default.createElement("div", {
13343
+ style: sectionStyle
13344
+ }, /* @__PURE__ */ import_react22.default.createElement("h2", {
13345
+ style: headingStyle
13346
+ }, "Available Modes"), /* @__PURE__ */ import_react22.default.createElement("div", {
13347
+ style: {
13348
+ display: "flex",
13349
+ gap: theme2.space[2],
13350
+ flexWrap: "wrap"
13351
+ }
13352
+ }, /* @__PURE__ */ import_react22.default.createElement("div", {
13353
+ style: {
13354
+ padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
13355
+ backgroundColor: theme2.colors.primary,
13356
+ color: "#ffffff",
13357
+ borderRadius: theme2.radii[2],
13358
+ fontFamily: theme2.fonts.body,
13359
+ fontSize: theme2.fontSizes[1]
13360
+ }
13361
+ }, "default"), Object.keys(theme2.modes).map((modeName) => /* @__PURE__ */ import_react22.default.createElement("div", {
13362
+ key: modeName,
13363
+ style: {
13364
+ padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
13365
+ backgroundColor: theme2.colors.secondary,
13366
+ color: theme2.colors.text,
13367
+ borderRadius: theme2.radii[2],
13368
+ fontFamily: theme2.fonts.body,
13369
+ fontSize: theme2.fontSizes[1]
13370
+ }
13371
+ }, modeName)))));
13372
+ };
13373
+ var theme = terminalTheme;
13374
+ function scaleThemeFonts(theme2, scale) {
13375
+ const currentScale = theme2.fontScale || 1;
13376
+ const effectiveScale = scale / currentScale;
13377
+ return {
13378
+ ...theme2,
13379
+ fontSizes: theme2.fontSizes.map((size) => Math.round(size * effectiveScale)),
13380
+ fontScale: scale
13381
+ };
13382
+ }
13383
+ function increaseFontScale(theme2) {
13384
+ const currentScale = theme2.fontScale || 1;
13385
+ const newScale = Math.min(currentScale * 1.1, 2);
13386
+ return scaleThemeFonts(theme2, newScale);
13387
+ }
13388
+ function decreaseFontScale(theme2) {
13389
+ const currentScale = theme2.fontScale || 1;
13390
+ const newScale = Math.max(currentScale * 0.9, 0.5);
13391
+ return scaleThemeFonts(theme2, newScale);
13392
+ }
13393
+ function resetFontScale(theme2) {
13394
+ return scaleThemeFonts(theme2, 1);
13395
+ }
13396
+ var src_default = theme;
13397
+ return cjs;
13398
+ }
11405
13399
  var CustomNode = {};
11406
13400
  var iconResolver = {};
11407
13401
  /**
@@ -45111,11 +47105,12 @@ function requireCustomNode() {
45111
47105
  }
45112
47106
  };
45113
47107
  const animationClass = getAnimationClass();
47108
+ const isGroup = nodeData.canvasType === "group";
45114
47109
  const getShapeStyles = () => {
45115
47110
  var _a2, _b2, _c2, _d2, _e3;
45116
47111
  const baseStyles = {
45117
47112
  padding: "12px 16px",
45118
- backgroundColor: "white",
47113
+ backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : "white",
45119
47114
  color: "#000",
45120
47115
  border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
45121
47116
  fontSize: "12px",
@@ -45125,7 +47120,7 @@ function requireCustomNode() {
45125
47120
  display: "flex",
45126
47121
  flexDirection: "column",
45127
47122
  alignItems: "center",
45128
- justifyContent: "center",
47123
+ justifyContent: isGroup ? "flex-start" : "center",
45129
47124
  gap: "4px",
45130
47125
  boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
45131
47126
  transition: "all 0.2s ease",
@@ -45249,7 +47244,16 @@ function requireCustomNode() {
45249
47244
  fontSize: "10px",
45250
47245
  color: "#D0021B",
45251
47246
  fontWeight: "bold"
45252
- }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: isDiamond ? { transform: "rotate(-45deg)" } : {}, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
47247
+ }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
47248
+ ...isDiamond ? { transform: "rotate(-45deg)" } : {},
47249
+ ...isGroup ? { width: "100%" } : {}
47250
+ }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
47251
+ display: "flex",
47252
+ alignItems: "center",
47253
+ justifyContent: "center",
47254
+ gap: "6px",
47255
+ width: "100%"
47256
+ }, children: [icon && (0, iconResolver_1.resolveIcon)(icon, 18), (0, jsx_runtime_1.jsx)("div", { style: { wordBreak: "break-word" }, children: displayName })] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName })] }), state && (0, jsx_runtime_1.jsx)("div", { style: {
45253
47257
  fontSize: "10px",
45254
47258
  backgroundColor: color,
45255
47259
  color: "white",
@@ -45553,20 +47557,24 @@ function requireGraphConverter() {
45553
47557
  const react_1 = /* @__PURE__ */ requireUmd();
45554
47558
  function convertToXYFlowNodes(nodes, configuration, violations = []) {
45555
47559
  return nodes.map((node) => {
47560
+ var _a;
45556
47561
  const typeDefinition = configuration.nodeTypes[node.type];
45557
47562
  if (!typeDefinition) {
45558
47563
  console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
45559
47564
  }
45560
47565
  const hasViolations = violations.some((v) => {
45561
- var _a;
45562
- return ((_a = v.context) == null ? void 0 : _a.nodeId) === node.id;
47566
+ var _a2;
47567
+ return ((_a2 = v.context) == null ? void 0 : _a2.nodeId) === node.id;
45563
47568
  });
47569
+ const isGroup = ((_a = node.data) == null ? void 0 : _a.canvasType) === "group";
45564
47570
  return {
45565
47571
  id: node.id,
45566
47572
  type: "custom",
45567
47573
  position: node.position || { x: 0, y: 0 },
47574
+ // Groups have lower zIndex to render behind edges
47575
+ zIndex: isGroup ? -1 : void 0,
45568
47576
  data: {
45569
- name: node.data.name || node.id,
47577
+ name: node.name || node.id,
45570
47578
  typeDefinition,
45571
47579
  state: node.state,
45572
47580
  hasViolations,
@@ -45712,8 +47720,10 @@ function requireEdgeInfoPanel() {
45712
47720
  Object.defineProperty(EdgeInfoPanel, "__esModule", { value: true });
45713
47721
  EdgeInfoPanel.EdgeInfoPanel = void 0;
45714
47722
  const jsx_runtime_1 = require$$0;
47723
+ const industry_theme_1 = requireCjs();
45715
47724
  const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete }) => {
45716
- const color = typeDefinition.color || "#888";
47725
+ const { theme } = (0, industry_theme_1.useTheme)();
47726
+ const edgeColor = typeDefinition.color || theme.colors.primary;
45717
47727
  const displayFields = typeDefinition.dataSchema ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInInfo).map(([field, schema2]) => {
45718
47728
  var _a;
45719
47729
  return {
@@ -45728,48 +47738,76 @@ function requireEdgeInfoPanel() {
45728
47738
  position: "absolute",
45729
47739
  top: "60px",
45730
47740
  right: "20px",
45731
- backgroundColor: "white",
47741
+ backgroundColor: theme.colors.background,
47742
+ color: theme.colors.text,
45732
47743
  borderRadius: "8px",
45733
47744
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
45734
47745
  padding: "16px",
45735
47746
  minWidth: "250px",
45736
47747
  maxWidth: "350px",
45737
- zIndex: 1e3
47748
+ zIndex: 1e3,
47749
+ border: `1px solid ${theme.colors.border}`
45738
47750
  }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
45739
47751
  display: "flex",
45740
47752
  justifyContent: "space-between",
45741
47753
  alignItems: "center",
45742
47754
  marginBottom: "12px",
45743
47755
  paddingBottom: "8px",
45744
- borderBottom: `2px solid ${color}`
45745
- }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: "Edge Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
47756
+ borderBottom: `2px solid ${edgeColor}`
47757
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px", color: edgeColor }, children: "Edge Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
45746
47758
  border: "none",
45747
47759
  background: "none",
45748
47760
  cursor: "pointer",
45749
47761
  fontSize: "18px",
45750
- color: "#666",
47762
+ color: theme.colors.textSecondary,
45751
47763
  padding: "0",
45752
47764
  width: "24px",
45753
47765
  height: "24px",
45754
47766
  display: "flex",
45755
47767
  alignItems: "center",
45756
47768
  justifyContent: "center"
45757
- }, children: "×" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
47769
+ }, children: "×" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
45758
47770
  fontSize: "12px",
45759
47771
  padding: "4px 8px",
45760
- backgroundColor: color,
45761
- color: "white",
47772
+ backgroundColor: edgeColor,
47773
+ color: theme.colors.background,
45762
47774
  borderRadius: "4px",
45763
47775
  display: "inline-block"
45764
- }, children: edge.type })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Connection" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: "#333" }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontFamily: "monospace", backgroundColor: "#f0f0f0", padding: "2px 6px", borderRadius: "3px" }, children: sourceNodeId }), (0, jsx_runtime_1.jsx)("span", { style: { margin: "0 8px", color: "#888" }, children: "→" }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: "monospace", backgroundColor: "#f0f0f0", padding: "2px 6px", borderRadius: "3px" }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", edge.id] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
47776
+ }, children: edge.type })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Connection" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px" }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
47777
+ fontFamily: theme.fonts.monospace,
47778
+ backgroundColor: theme.colors.muted,
47779
+ padding: "2px 6px",
47780
+ borderRadius: "3px"
47781
+ }, children: sourceNodeId }), (0, jsx_runtime_1.jsx)("span", { style: { margin: "0 8px", color: theme.colors.textMuted }, children: "→" }), (0, jsx_runtime_1.jsx)("span", { style: {
47782
+ fontFamily: theme.fonts.monospace,
47783
+ backgroundColor: theme.colors.muted,
47784
+ padding: "2px 6px",
47785
+ borderRadius: "3px"
47786
+ }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
47787
+ fontSize: "10px",
47788
+ color: theme.colors.textSecondary,
47789
+ marginBottom: "8px",
47790
+ fontWeight: "bold"
47791
+ }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
47792
+ fontSize: "10px",
47793
+ color: theme.colors.textSecondary,
47794
+ marginBottom: "8px",
47795
+ fontWeight: "bold"
47796
+ }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
47797
+ fontSize: "10px",
47798
+ color: theme.colors.textMuted,
47799
+ marginTop: "12px",
47800
+ paddingTop: "8px",
47801
+ borderTop: `1px solid ${theme.colors.border}`
47802
+ }, children: ["ID: ", edge.id] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
45765
47803
  onDelete(edge.id);
45766
47804
  onClose();
45767
47805
  }, style: {
45768
47806
  marginTop: "12px",
45769
47807
  width: "100%",
45770
47808
  padding: "8px 12px",
45771
- backgroundColor: "#dc3545",
45772
- color: "white",
47809
+ backgroundColor: theme.colors.error,
47810
+ color: theme.colors.background,
45773
47811
  border: "none",
45774
47812
  borderRadius: "4px",
45775
47813
  cursor: "pointer",
@@ -45789,6 +47827,7 @@ function requireNodeInfoPanel() {
45789
47827
  NodeInfoPanel.NodeInfoPanel = void 0;
45790
47828
  const jsx_runtime_1 = require$$0;
45791
47829
  const react_1 = React2;
47830
+ const industry_theme_1 = requireCjs();
45792
47831
  const iconResolver_1 = requireIconResolver();
45793
47832
  const COMMON_ICONS = [
45794
47833
  "Settings",
@@ -45841,12 +47880,13 @@ function requireNodeInfoPanel() {
45841
47880
  ];
45842
47881
  const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate }) => {
45843
47882
  var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
45844
- const color = (typeDefinition == null ? void 0 : typeDefinition.color) || "#888";
47883
+ const { theme } = (0, industry_theme_1.useTheme)();
47884
+ const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
45845
47885
  const canEdit = Boolean(onUpdate);
45846
47886
  const [showIconPicker, setShowIconPicker] = (0, react_1.useState)(false);
45847
47887
  const [showDetails, setShowDetails] = (0, react_1.useState)(false);
45848
- const currentIcon = ((_a = node.data) == null ? void 0 : _a.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
45849
- const nameField = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? (_b = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _b[0] : null;
47888
+ const currentIcon = ((_b = node.data) == null ? void 0 : _b.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
47889
+ const nameField = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? (_c = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _c[0] : null;
45850
47890
  const displayFields = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInLabel).map(([field]) => {
45851
47891
  var _a2;
45852
47892
  return {
@@ -45856,8 +47896,26 @@ function requireNodeInfoPanel() {
45856
47896
  };
45857
47897
  }) : [];
45858
47898
  const hasSchemaFields = displayFields.length > 0;
45859
- const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !["icon", "name", "description", "sources"].includes(key)) : [];
45860
- const sources = ((_c = node.data) == null ? void 0 : _c.sources) || [];
47899
+ const internalFields = [
47900
+ "icon",
47901
+ "name",
47902
+ "description",
47903
+ "sources",
47904
+ "color",
47905
+ "stroke",
47906
+ "width",
47907
+ "height",
47908
+ "canvasType",
47909
+ "text",
47910
+ "file",
47911
+ "url",
47912
+ "shape",
47913
+ "states",
47914
+ "actions",
47915
+ "nodeType"
47916
+ ];
47917
+ const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
47918
+ const sources = ((_d = node.data) == null ? void 0 : _d.sources) || [];
45861
47919
  const handleTypeChange = (newType) => {
45862
47920
  if (onUpdate && newType !== node.type) {
45863
47921
  onUpdate(node.id, { type: newType });
@@ -45875,75 +47933,78 @@ function requireNodeInfoPanel() {
45875
47933
  position: "absolute",
45876
47934
  top: "60px",
45877
47935
  right: "20px",
45878
- backgroundColor: "white",
47936
+ backgroundColor: theme.colors.background,
47937
+ color: theme.colors.text,
45879
47938
  borderRadius: "8px",
45880
47939
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
45881
47940
  padding: "16px",
45882
47941
  minWidth: "250px",
45883
47942
  maxWidth: "350px",
45884
- zIndex: 1e3
47943
+ zIndex: 1e3,
47944
+ border: `1px solid ${theme.colors.border}`
45885
47945
  }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
45886
47946
  display: "flex",
45887
47947
  justifyContent: "space-between",
45888
47948
  alignItems: "center",
45889
47949
  marginBottom: "12px",
45890
47950
  paddingBottom: "8px",
45891
- borderBottom: `2px solid ${color}`
45892
- }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: ((_d = node.data) == null ? void 0 : _d.name) || node.id }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
47951
+ borderBottom: `2px solid ${nodeColor}`
47952
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px", color: nodeColor }, children: node.name || node.id }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
45893
47953
  border: "none",
45894
47954
  background: "none",
45895
47955
  cursor: "pointer",
45896
47956
  fontSize: "18px",
45897
- color: "#666",
47957
+ color: theme.colors.textSecondary,
45898
47958
  padding: "0",
45899
47959
  width: "24px",
45900
47960
  height: "24px",
45901
47961
  display: "flex",
45902
47962
  alignItems: "center",
45903
47963
  justifyContent: "center"
45904
- }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: {
45905
- fontSize: "12px",
45906
- color: "#333"
45907
- }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
47964
+ }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
45908
47965
  fontSize: "11px",
45909
47966
  padding: "2px 8px",
45910
- backgroundColor: "#f0f0f0",
47967
+ backgroundColor: theme.colors.muted,
45911
47968
  borderRadius: "4px",
45912
- color: "#555"
47969
+ color: theme.colors.textSecondary
45913
47970
  }, children: source }, index2)) })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowDetails(!showDetails), style: {
45914
47971
  width: "100%",
45915
47972
  padding: "8px",
45916
- backgroundColor: "#f5f5f5",
45917
- border: "1px solid #ddd",
47973
+ backgroundColor: theme.colors.surface,
47974
+ border: `1px solid ${theme.colors.border}`,
45918
47975
  borderRadius: "4px",
45919
47976
  cursor: "pointer",
45920
47977
  fontSize: "12px",
45921
- color: "#666",
47978
+ color: theme.colors.textSecondary,
45922
47979
  display: "flex",
45923
47980
  alignItems: "center",
45924
47981
  justifyContent: "center",
45925
47982
  gap: "6px",
45926
47983
  marginBottom: showDetails ? "12px" : "0"
45927
- }, children: [(0, jsx_runtime_1.jsx)("span", { style: { transform: showDetails ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }, children: "▼" }), showDetails ? "Hide Details" : "Show Details"] }), showDetails && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
47984
+ }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
47985
+ transform: showDetails ? "rotate(180deg)" : "rotate(0deg)",
47986
+ transition: "transform 0.2s"
47987
+ }, children: "▼" }), showDetails ? "Hide Details" : "Show Details"] }), showDetails && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
45928
47988
  display: "flex",
45929
47989
  alignItems: "center",
45930
47990
  gap: "8px",
45931
47991
  padding: "6px 10px",
45932
- backgroundColor: "#f5f5f5",
45933
- border: canEdit ? "1px dashed #ccc" : "1px solid #eee",
47992
+ backgroundColor: theme.colors.surface,
47993
+ border: canEdit ? `1px dashed ${theme.colors.border}` : `1px solid ${theme.colors.border}`,
45934
47994
  borderRadius: "4px",
45935
47995
  cursor: canEdit ? "pointer" : "default",
45936
47996
  fontSize: "12px",
45937
47997
  width: "100%",
45938
- justifyContent: "flex-start"
45939
- }, children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(currentIcon, 18) }), (0, jsx_runtime_1.jsx)("span", { children: currentIcon || "No icon" }), canEdit && (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "auto", color: "#999", fontSize: "10px" }, children: "✎" })] }), showIconPicker && (0, jsx_runtime_1.jsx)("div", { style: {
47998
+ justifyContent: "flex-start",
47999
+ color: theme.colors.text
48000
+ }, children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(currentIcon, 18) }), (0, jsx_runtime_1.jsx)("span", { children: currentIcon || "No icon" }), canEdit && (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "auto", color: theme.colors.textMuted, fontSize: "10px" }, children: "✎" })] }), showIconPicker && (0, jsx_runtime_1.jsx)("div", { style: {
45940
48001
  position: "absolute",
45941
48002
  top: "100%",
45942
48003
  left: 0,
45943
48004
  right: 0,
45944
48005
  marginTop: "4px",
45945
- backgroundColor: "white",
45946
- border: "1px solid #ddd",
48006
+ backgroundColor: theme.colors.background,
48007
+ border: `1px solid ${theme.colors.border}`,
45947
48008
  borderRadius: "4px",
45948
48009
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
45949
48010
  padding: "8px",
@@ -45956,44 +48017,70 @@ function requireNodeInfoPanel() {
45956
48017
  gap: "4px"
45957
48018
  }, children: COMMON_ICONS.map((iconName) => (0, jsx_runtime_1.jsx)("button", { onClick: () => handleIconSelect(iconName), title: iconName, style: {
45958
48019
  padding: "6px",
45959
- border: currentIcon === iconName ? `2px solid ${color}` : "1px solid #eee",
48020
+ border: currentIcon === iconName ? `2px solid ${nodeColor}` : `1px solid ${theme.colors.border}`,
45960
48021
  borderRadius: "4px",
45961
- backgroundColor: currentIcon === iconName ? "#f0f7ff" : "white",
48022
+ backgroundColor: currentIcon === iconName ? theme.colors.highlight : theme.colors.background,
45962
48023
  cursor: "pointer",
45963
48024
  display: "flex",
45964
48025
  alignItems: "center",
45965
- justifyContent: "center"
45966
- }, children: (0, iconResolver_1.resolveIcon)(iconName, 16) }, iconName)) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Type" }), canEdit && availableNodeTypes && Object.keys(availableNodeTypes).length > 1 ? (0, jsx_runtime_1.jsx)("select", { value: node.type, onChange: (e) => handleTypeChange(e.target.value), style: {
48026
+ justifyContent: "center",
48027
+ color: theme.colors.text
48028
+ }, children: (0, iconResolver_1.resolveIcon)(iconName, 16) }, iconName)) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Type" }), canEdit && availableNodeTypes && Object.keys(availableNodeTypes).length > 1 ? (0, jsx_runtime_1.jsx)("select", { value: node.type, onChange: (e) => handleTypeChange(e.target.value), style: {
45967
48029
  fontSize: "12px",
45968
48030
  padding: "4px 8px",
45969
48031
  borderRadius: "4px",
45970
- border: "1px solid #ccc",
45971
- backgroundColor: "white",
48032
+ border: `1px solid ${theme.colors.border}`,
48033
+ backgroundColor: theme.colors.background,
48034
+ color: theme.colors.text,
45972
48035
  cursor: "pointer",
45973
48036
  width: "100%"
45974
48037
  }, children: Object.entries(availableNodeTypes).map(([typeName, typeDef]) => (0, jsx_runtime_1.jsxs)("option", { value: typeName, children: [typeName, " (", typeDef.shape, ")"] }, typeName)) }) : (0, jsx_runtime_1.jsx)("div", { style: {
45975
48038
  fontSize: "12px",
45976
48039
  padding: "4px 8px",
45977
- backgroundColor: color,
45978
- color: "white",
48040
+ backgroundColor: nodeColor,
48041
+ color: theme.colors.background,
45979
48042
  borderRadius: "4px",
45980
48043
  display: "inline-block"
45981
- }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
48044
+ }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
45982
48045
  fontSize: "12px",
45983
48046
  padding: "4px 8px",
45984
- backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || "#888",
45985
- color: "white",
48047
+ backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || theme.colors.secondary,
48048
+ color: theme.colors.background,
45986
48049
  borderRadius: "4px",
45987
48050
  display: "inline-block"
45988
- }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", node.id] })] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
48051
+ }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
48052
+ fontSize: "10px",
48053
+ color: theme.colors.textSecondary,
48054
+ marginBottom: "8px",
48055
+ fontWeight: "bold"
48056
+ }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
48057
+ fontSize: "10px",
48058
+ color: theme.colors.textSecondary,
48059
+ marginBottom: "2px"
48060
+ }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
48061
+ fontSize: "10px",
48062
+ color: theme.colors.textSecondary,
48063
+ marginBottom: "8px",
48064
+ fontWeight: "bold"
48065
+ }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
48066
+ fontSize: "10px",
48067
+ color: theme.colors.textSecondary,
48068
+ marginBottom: "2px"
48069
+ }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
48070
+ fontSize: "10px",
48071
+ color: theme.colors.textMuted,
48072
+ marginTop: "12px",
48073
+ paddingTop: "8px",
48074
+ borderTop: `1px solid ${theme.colors.border}`
48075
+ }, children: ["ID: ", node.id] })] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
45989
48076
  onDelete(node.id);
45990
48077
  onClose();
45991
48078
  }, style: {
45992
48079
  marginTop: "12px",
45993
48080
  width: "100%",
45994
48081
  padding: "8px 12px",
45995
- backgroundColor: "#dc3545",
45996
- color: "white",
48082
+ backgroundColor: theme.colors.error,
48083
+ color: theme.colors.background,
45997
48084
  border: "none",
45998
48085
  borderRadius: "4px",
45999
48086
  cursor: "pointer",
@@ -46015,6 +48102,7 @@ function requireGraphRenderer() {
46015
48102
  const react_1 = React2;
46016
48103
  const react_2 = /* @__PURE__ */ requireUmd();
46017
48104
  const principal_view_core_1 = require$$4;
48105
+ const industry_theme_1 = requireCjs();
46018
48106
  const CustomNode_1 = requireCustomNode();
46019
48107
  const CustomEdge_1 = requireCustomEdge();
46020
48108
  const graphConverter_1 = requireGraphConverter();
@@ -46035,6 +48123,7 @@ function requireGraphRenderer() {
46035
48123
  });
46036
48124
  const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef }) => {
46037
48125
  const { fitView } = (0, react_2.useReactFlow)();
48126
+ const { theme } = (0, industry_theme_1.useTheme)();
46038
48127
  const [animationState, setAnimationState] = (0, react_1.useState)({
46039
48128
  nodeAnimations: {},
46040
48129
  edgeAnimations: {}
@@ -46143,12 +48232,15 @@ function requireGraphRenderer() {
46143
48232
  return { ...prev, createdEdges: newCreatedEdges };
46144
48233
  }
46145
48234
  if (edgeToDelete) {
46146
- const newDeletedEdges = [...prev.deletedEdges, {
46147
- id: edgeId,
46148
- from: edgeToDelete.from,
46149
- to: edgeToDelete.to,
46150
- type: edgeToDelete.type
46151
- }];
48235
+ const newDeletedEdges = [
48236
+ ...prev.deletedEdges,
48237
+ {
48238
+ id: edgeId,
48239
+ from: edgeToDelete.from,
48240
+ to: edgeToDelete.to,
48241
+ type: edgeToDelete.type
48242
+ }
48243
+ ];
46152
48244
  return { ...prev, deletedEdges: newDeletedEdges };
46153
48245
  }
46154
48246
  return prev;
@@ -46196,7 +48288,10 @@ function requireGraphRenderer() {
46196
48288
  setLocalEdges((prev) => [...prev, newEdge]);
46197
48289
  updateEditState((prev) => ({
46198
48290
  ...prev,
46199
- createdEdges: [...prev.createdEdges, { id: edgeId, from, to: to2, type: type2, sourceHandle, targetHandle }]
48291
+ createdEdges: [
48292
+ ...prev.createdEdges,
48293
+ { id: edgeId, from, to: to2, type: type2, sourceHandle, targetHandle }
48294
+ ]
46200
48295
  }));
46201
48296
  }, [updateEditState]);
46202
48297
  const handleEdgeTypeSelect = (0, react_1.useCallback)((type2) => {
@@ -46254,20 +48349,26 @@ function requireGraphRenderer() {
46254
48349
  };
46255
48350
  return { ...prev, createdEdges: newCreatedEdges2 };
46256
48351
  }
46257
- const newDeletedEdges = [...prev.deletedEdges, {
46258
- id: oldEdge.id,
46259
- from: originalEdge.from,
46260
- to: originalEdge.to,
46261
- type: originalEdge.type
46262
- }];
46263
- const newCreatedEdges = [...prev.createdEdges, {
46264
- id: oldEdge.id,
46265
- from: newConnection.source,
46266
- to: newConnection.target,
46267
- type: originalEdge.type,
46268
- sourceHandle: newConnection.sourceHandle ?? void 0,
46269
- targetHandle: newConnection.targetHandle ?? void 0
46270
- }];
48352
+ const newDeletedEdges = [
48353
+ ...prev.deletedEdges,
48354
+ {
48355
+ id: oldEdge.id,
48356
+ from: originalEdge.from,
48357
+ to: originalEdge.to,
48358
+ type: originalEdge.type
48359
+ }
48360
+ ];
48361
+ const newCreatedEdges = [
48362
+ ...prev.createdEdges,
48363
+ {
48364
+ id: oldEdge.id,
48365
+ from: newConnection.source,
48366
+ to: newConnection.target,
48367
+ type: originalEdge.type,
48368
+ sourceHandle: newConnection.sourceHandle ?? void 0,
48369
+ targetHandle: newConnection.targetHandle ?? void 0
48370
+ }
48371
+ ];
46271
48372
  return { ...prev, deletedEdges: newDeletedEdges, createdEdges: newCreatedEdges };
46272
48373
  });
46273
48374
  }, [editable, localEdges, nodes, configuration.allowedConnections, updateEditState]);
@@ -46471,27 +48572,29 @@ function requireGraphRenderer() {
46471
48572
  }, 100);
46472
48573
  return () => clearTimeout(timeoutId);
46473
48574
  }, [baseNodesKey, fitView]);
46474
- return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: "#e5e5e5", gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
48575
+ return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
46475
48576
  var _a;
46476
48577
  const nodeData = node.data;
46477
- return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || "#888";
48578
+ return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
46478
48579
  }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0 }), selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
46479
48580
  position: "absolute",
46480
48581
  top: "50%",
46481
48582
  left: "50%",
46482
48583
  transform: "translate(-50%, -50%)",
46483
- backgroundColor: "white",
48584
+ backgroundColor: theme.colors.background,
48585
+ color: theme.colors.text,
46484
48586
  borderRadius: "8px",
46485
48587
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
46486
48588
  padding: "16px",
46487
48589
  minWidth: "200px",
46488
- zIndex: 1e3
46489
- }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", marginBottom: "12px", fontSize: "14px" }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: "#666", marginBottom: "12px" }, children: [pendingConnection.from, " → ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: pendingConnection.validTypes.map((type2) => {
48590
+ zIndex: 1e3,
48591
+ border: `1px solid ${theme.colors.border}`
48592
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", marginBottom: "12px", fontSize: "14px" }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: theme.colors.textSecondary, marginBottom: "12px" }, children: [pendingConnection.from, " → ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: pendingConnection.validTypes.map((type2) => {
46490
48593
  const typeDefinition = configuration.edgeTypes[type2];
46491
48594
  return (0, jsx_runtime_1.jsx)("button", { onClick: () => handleEdgeTypeSelect(type2), style: {
46492
48595
  padding: "8px 12px",
46493
- backgroundColor: (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
46494
- color: "white",
48596
+ backgroundColor: (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.secondary,
48597
+ color: theme.colors.background,
46495
48598
  border: "none",
46496
48599
  borderRadius: "4px",
46497
48600
  cursor: "pointer",
@@ -46503,9 +48606,9 @@ function requireGraphRenderer() {
46503
48606
  marginTop: "12px",
46504
48607
  width: "100%",
46505
48608
  padding: "8px 12px",
46506
- backgroundColor: "#f0f0f0",
46507
- color: "#666",
46508
- border: "none",
48609
+ backgroundColor: theme.colors.surface,
48610
+ color: theme.colors.textSecondary,
48611
+ border: `1px solid ${theme.colors.border}`,
46509
48612
  borderRadius: "4px",
46510
48613
  cursor: "pointer",
46511
48614
  fontSize: "12px"
@@ -46560,8 +48663,16 @@ function requireGraphRenderer() {
46560
48663
  const nodeType = (vv == null ? void 0 : vv.nodeType) || node.type;
46561
48664
  if (!nodeTypes2[nodeType]) {
46562
48665
  const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node.color === "string" ? node.color : void 0) || ((_c = (_b = vv == null ? void 0 : vv.states) == null ? void 0 : _b.idle) == null ? void 0 : _c.color);
48666
+ let nodeDescription = `${nodeType} node`;
48667
+ if (node.type === "text" && "text" in node) {
48668
+ const lines = node.text.split("\n");
48669
+ const descFromText = lines.slice(1).join("\n").trim();
48670
+ if (descFromText) {
48671
+ nodeDescription = descFromText;
48672
+ }
48673
+ }
46563
48674
  nodeTypes2[nodeType] = {
46564
- description: (vv == null ? void 0 : vv.description) || `${nodeType} node`,
48675
+ description: nodeDescription,
46565
48676
  shape: (vv == null ? void 0 : vv.shape) || "rectangle",
46566
48677
  icon: vv == null ? void 0 : vv.icon,
46567
48678
  color: fillColor,
@@ -46627,11 +48738,8 @@ function requireGraphRenderer() {
46627
48738
  }
46628
48739
  exports$1.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
46629
48740
  const { canvas, library, className, width = "100%", height = "100%" } = props;
48741
+ const { theme } = (0, industry_theme_1.useTheme)();
46630
48742
  const canvasData = useCanvasToLegacy(canvas, library);
46631
- if (!canvasData) {
46632
- return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: "#666" }, children: "No canvas data provided." }) });
46633
- }
46634
- const { configuration, nodes, edges } = canvasData;
46635
48743
  const editStateRef = (0, react_1.useRef)(createEmptyEditState());
46636
48744
  (0, react_1.useImperativeHandle)(ref, () => ({
46637
48745
  getPendingChanges: () => {
@@ -46665,6 +48773,18 @@ function requireGraphRenderer() {
46665
48773
  return state.positionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
46666
48774
  }
46667
48775
  }), []);
48776
+ if (!canvasData) {
48777
+ return (0, jsx_runtime_1.jsx)("div", { className, style: {
48778
+ width,
48779
+ height,
48780
+ display: "flex",
48781
+ alignItems: "center",
48782
+ justifyContent: "center",
48783
+ backgroundColor: theme.colors.background,
48784
+ color: theme.colors.textSecondary
48785
+ }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) });
48786
+ }
48787
+ const { configuration, nodes, edges } = canvasData;
46668
48788
  const { violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, onPendingChangesChange } = props;
46669
48789
  return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, onPendingChangesChange, editStateRef }) }) });
46670
48790
  });