@zoneflow/themes 0.0.7 → 0.0.9

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 (4) hide show
  1. package/README.md +7 -0
  2. package/dist/presets.d.ts +16 -2
  3. package/dist/presets.js +742 -1
  4. package/package.json +3 -3
package/README.md CHANGED
@@ -10,6 +10,13 @@
10
10
  - `light`
11
11
  - `party`
12
12
  - `korean-culture`
13
+ - `sci-fi`
14
+ - `fantasy`
15
+ - `mono`
16
+ - `garden`
17
+ - `utopia`
18
+ - `dystopia`
19
+ - `desert`
13
20
 
14
21
  ## 설치
15
22
 
package/dist/presets.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ZoneflowEditorThemeInput } from "@zoneflow/react";
2
2
  import type { ZoneflowTheme } from "@zoneflow/renderer-dom";
3
- export type ZoneflowThemePresetId = "dark" | "ocean" | "sunset" | "light" | "party" | "korean-culture";
3
+ export type ZoneflowThemePresetId = "dark" | "ocean" | "sunset" | "light" | "party" | "korean-culture" | "sci-fi" | "fantasy" | "mono" | "garden" | "utopia" | "dystopia" | "desert";
4
4
  export type ZoneflowThemePreset = {
5
5
  id: ZoneflowThemePresetId;
6
6
  label: string;
@@ -37,6 +37,13 @@ declare const sunsetPreset: ZoneflowThemePreset;
37
37
  declare const lightPreset: ZoneflowThemePreset;
38
38
  declare const partyPreset: ZoneflowThemePreset;
39
39
  declare const koreanCulturePreset: ZoneflowThemePreset;
40
+ declare const sciFiPreset: ZoneflowThemePreset;
41
+ declare const fantasyPreset: ZoneflowThemePreset;
42
+ declare const monoPreset: ZoneflowThemePreset;
43
+ declare const gardenPreset: ZoneflowThemePreset;
44
+ declare const utopiaPreset: ZoneflowThemePreset;
45
+ declare const dystopiaPreset: ZoneflowThemePreset;
46
+ declare const desertPreset: ZoneflowThemePreset;
40
47
  export declare const zoneflowThemePresets: {
41
48
  dark: ZoneflowThemePreset;
42
49
  ocean: ZoneflowThemePreset;
@@ -44,5 +51,12 @@ export declare const zoneflowThemePresets: {
44
51
  light: ZoneflowThemePreset;
45
52
  party: ZoneflowThemePreset;
46
53
  "korean-culture": ZoneflowThemePreset;
54
+ "sci-fi": ZoneflowThemePreset;
55
+ fantasy: ZoneflowThemePreset;
56
+ mono: ZoneflowThemePreset;
57
+ garden: ZoneflowThemePreset;
58
+ utopia: ZoneflowThemePreset;
59
+ dystopia: ZoneflowThemePreset;
60
+ desert: ZoneflowThemePreset;
47
61
  };
48
- export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, };
62
+ export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, sciFiPreset, fantasyPreset, monoPreset, gardenPreset, utopiaPreset, dystopiaPreset, desertPreset, };
package/dist/presets.js CHANGED
@@ -580,6 +580,740 @@ const koreanCulturePreset = {
580
580
  },
581
581
  },
582
582
  };
583
+ const sciFiPreset = {
584
+ id: "sci-fi",
585
+ label: "Sci-fi",
586
+ description: "Neon command-deck preset.",
587
+ rendererTheme: {
588
+ background: "#050816",
589
+ zoneTitle: "#e6fbff",
590
+ zoneSubtext: "#8ee7ff",
591
+ zoneContainerBorder: "#22d3ee",
592
+ zoneActionBorder: "#a78bfa",
593
+ zoneBadgeBg: "#0b1024",
594
+ pathLabel: "#e6fbff",
595
+ pathEdge: "#38bdf8",
596
+ pathInboundEdge: "#a78bfa",
597
+ selection: "#f0abfc",
598
+ surface: {
599
+ chrome: {
600
+ overlay: "linear-gradient(180deg, rgba(125,211,252,0.18) 0%, rgba(168,85,247,0.04) 44%, rgba(125,211,252,0) 100%)",
601
+ glow: "radial-gradient(circle, rgba(34,211,238,0.24) 0%, rgba(168,85,247,0.10) 38%, rgba(34,211,238,0) 74%)",
602
+ accentFade: "rgba(8, 47, 73, 0.28)",
603
+ },
604
+ zone: {
605
+ background: "linear-gradient(180deg, rgba(8,13,31,0.98) 0%, rgba(3,7,18,0.98) 100%)",
606
+ shadow: "0 20px 38px rgba(0, 0, 0, 0.48), 0 0 28px rgba(34, 211, 238, 0.12)",
607
+ containerAccent: "rgba(34, 211, 238, 0.22)",
608
+ actionAccent: "rgba(167, 139, 250, 0.22)",
609
+ },
610
+ path: {
611
+ background: "linear-gradient(180deg, rgba(8,13,31,0.98) 0%, rgba(7,10,24,0.98) 100%)",
612
+ shadow: "0 18px 30px rgba(0, 0, 0, 0.46), 0 0 22px rgba(167, 139, 250, 0.12)",
613
+ accent: "rgba(240, 171, 252, 0.18)",
614
+ },
615
+ anchor: {
616
+ background: "linear-gradient(180deg, rgba(12,18,38,0.99) 0%, rgba(3,7,18,0.98) 100%)",
617
+ shadow: "0 18px 28px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(125,211,252,0.14)",
618
+ containerAccent: "#22d3ee",
619
+ actionAccent: "#a78bfa",
620
+ },
621
+ },
622
+ },
623
+ editorTheme: {
624
+ hud: {
625
+ panelBackground: "rgba(3, 7, 18, 0.94)",
626
+ panelBorder: "1px solid rgba(34, 211, 238, 0.32)",
627
+ buttonBackground: "rgba(8, 13, 31, 0.86)",
628
+ buttonBorder: "1px solid rgba(167, 139, 250, 0.28)",
629
+ buttonText: "#e6fbff",
630
+ buttonActiveBackground: "#0891b2",
631
+ buttonActiveBorder: "1px solid rgba(240, 171, 252, 0.42)",
632
+ },
633
+ overlay: {
634
+ helpPanel: {
635
+ background: "rgba(3, 7, 18, 0.94)",
636
+ border: "1px solid rgba(34, 211, 238, 0.32)",
637
+ titleText: "#e6fbff",
638
+ mutedText: "#8ee7ff",
639
+ },
640
+ floatingToolbar: {
641
+ background: "rgba(3, 7, 18, 0.96)",
642
+ border: "1px solid rgba(34, 211, 238, 0.26)",
643
+ zoneLabelText: "#67e8f9",
644
+ pathLabelText: "#c4b5fd",
645
+ },
646
+ guide: {
647
+ objectSnapStroke: "rgba(240, 171, 252, 0.94)",
648
+ },
649
+ connectTarget: {
650
+ badgeBackground: "#7c3aed",
651
+ },
652
+ dropTarget: {
653
+ badgeBackground: "#0891b2",
654
+ },
655
+ },
656
+ },
657
+ surfacePalette: {
658
+ canvasBackground: "#050816",
659
+ topbar: {
660
+ background: "#030712",
661
+ border: "1px solid rgba(34, 211, 238, 0.24)",
662
+ controlBackground: "#0b1024",
663
+ controlBorder: "1px solid rgba(167, 139, 250, 0.28)",
664
+ controlText: "#e6fbff",
665
+ },
666
+ sidebar: {
667
+ background: "#070a18",
668
+ border: "1px solid rgba(34, 211, 238, 0.16)",
669
+ text: "#e6fbff",
670
+ mutedText: "#8ee7ff",
671
+ sectionTitle: "#67e8f9",
672
+ cardBackground: "rgba(11, 16, 36, 0.74)",
673
+ cardBorder: "rgba(34, 211, 238, 0.18)",
674
+ controlBackground: "#0b1024",
675
+ controlBorder: "1px solid rgba(167, 139, 250, 0.24)",
676
+ controlText: "#e6fbff",
677
+ accent: "#f0abfc",
678
+ },
679
+ },
680
+ };
681
+ const fantasyPreset = {
682
+ id: "fantasy",
683
+ label: "Fantasy",
684
+ description: "Parchment, brass, and arcane violet preset.",
685
+ rendererTheme: {
686
+ background: "#f6ecd2",
687
+ zoneTitle: "#3b2412",
688
+ zoneSubtext: "#72512c",
689
+ zoneContainerBorder: "#b7791f",
690
+ zoneActionBorder: "#7c3aed",
691
+ zoneBadgeBg: "#fef3c7",
692
+ pathLabel: "#3b2412",
693
+ pathEdge: "#92400e",
694
+ pathInboundEdge: "#047857",
695
+ selection: "#7c3aed",
696
+ surface: {
697
+ chrome: {
698
+ overlay: "linear-gradient(180deg, rgba(255,251,235,0.82) 0%, rgba(245,222,179,0.16) 44%, rgba(245,222,179,0) 100%)",
699
+ glow: "radial-gradient(circle, rgba(251,191,36,0.28) 0%, rgba(124,58,237,0.08) 38%, rgba(124,58,237,0) 72%)",
700
+ accentFade: "rgba(254, 243, 199, 0.18)",
701
+ },
702
+ zone: {
703
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(246,236,210,0.98) 100%)",
704
+ shadow: "0 18px 34px rgba(92, 53, 15, 0.14), 0 3px 8px rgba(92, 53, 15, 0.08)",
705
+ containerAccent: "rgba(180, 83, 9, 0.16)",
706
+ actionAccent: "rgba(124, 58, 237, 0.14)",
707
+ },
708
+ path: {
709
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(253,230,138,0.94) 100%)",
710
+ shadow: "0 16px 26px rgba(92, 53, 15, 0.12), 0 3px 8px rgba(92, 53, 15, 0.07)",
711
+ accent: "rgba(4, 120, 87, 0.12)",
712
+ },
713
+ anchor: {
714
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(246,236,210,0.98) 100%)",
715
+ shadow: "0 18px 28px rgba(92, 53, 15, 0.12), inset 0 1px 0 rgba(255,255,255,0.86)",
716
+ containerAccent: "#b7791f",
717
+ actionAccent: "#7c3aed",
718
+ },
719
+ },
720
+ },
721
+ editorTheme: {
722
+ hud: {
723
+ panelBackground: "rgba(59, 36, 18, 0.92)",
724
+ panelBorder: "1px solid rgba(180, 83, 9, 0.28)",
725
+ buttonBackground: "rgba(114, 81, 44, 0.82)",
726
+ buttonBorder: "1px solid rgba(251, 191, 36, 0.28)",
727
+ buttonText: "#fef3c7",
728
+ buttonActiveBackground: "#7c3aed",
729
+ buttonActiveBorder: "1px solid rgba(216, 180, 254, 0.42)",
730
+ },
731
+ overlay: {
732
+ helpPanel: {
733
+ background: "rgba(59, 36, 18, 0.92)",
734
+ border: "1px solid rgba(180, 83, 9, 0.28)",
735
+ },
736
+ connectTarget: {
737
+ badgeBackground: "#047857",
738
+ },
739
+ dropTarget: {
740
+ badgeBackground: "#7c3aed",
741
+ },
742
+ guide: {
743
+ objectSnapStroke: "rgba(124, 58, 237, 0.88)",
744
+ },
745
+ },
746
+ },
747
+ surfacePalette: {
748
+ canvasBackground: "#f6ecd2",
749
+ topbar: {
750
+ background: "#3b2412",
751
+ border: "1px solid rgba(251, 191, 36, 0.22)",
752
+ controlBackground: "#72512c",
753
+ controlBorder: "1px solid rgba(251, 191, 36, 0.28)",
754
+ controlText: "#fef3c7",
755
+ },
756
+ sidebar: {
757
+ background: "#472b16",
758
+ border: "1px solid rgba(251, 191, 36, 0.18)",
759
+ text: "#fef3c7",
760
+ mutedText: "#fde68a",
761
+ sectionTitle: "#facc15",
762
+ cardBackground: "rgba(114, 81, 44, 0.44)",
763
+ cardBorder: "rgba(251, 191, 36, 0.18)",
764
+ controlBackground: "#72512c",
765
+ controlBorder: "1px solid rgba(251, 191, 36, 0.24)",
766
+ controlText: "#fef3c7",
767
+ accent: "#c084fc",
768
+ },
769
+ },
770
+ };
771
+ const monoPreset = {
772
+ id: "mono",
773
+ label: "Mono",
774
+ description: "Minimal monochrome drafting preset.",
775
+ rendererTheme: {
776
+ background: "#f4f4f5",
777
+ zoneTitle: "#111111",
778
+ zoneSubtext: "#525252",
779
+ zoneContainerBorder: "#a3a3a3",
780
+ zoneActionBorder: "#171717",
781
+ zoneBadgeBg: "#e5e5e5",
782
+ pathLabel: "#111111",
783
+ pathEdge: "#737373",
784
+ pathInboundEdge: "#262626",
785
+ selection: "#000000",
786
+ surface: {
787
+ chrome: {
788
+ overlay: "linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.08) 44%, rgba(255,255,255,0) 100%)",
789
+ glow: "radial-gradient(circle, rgba(23,23,23,0.08) 0%, rgba(23,23,23,0.02) 42%, rgba(23,23,23,0) 76%)",
790
+ accentFade: "rgba(229, 229, 229, 0.16)",
791
+ },
792
+ zone: {
793
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(244,244,245,0.98) 100%)",
794
+ shadow: "0 16px 28px rgba(23, 23, 23, 0.08), 0 2px 6px rgba(23, 23, 23, 0.05)",
795
+ containerAccent: "rgba(82, 82, 82, 0.10)",
796
+ actionAccent: "rgba(23, 23, 23, 0.14)",
797
+ },
798
+ path: {
799
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(250,250,250,0.98) 100%)",
800
+ shadow: "0 14px 22px rgba(23, 23, 23, 0.08), 0 2px 6px rgba(23, 23, 23, 0.05)",
801
+ accent: "rgba(23, 23, 23, 0.10)",
802
+ },
803
+ anchor: {
804
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(244,244,245,0.98) 100%)",
805
+ shadow: "0 16px 24px rgba(23, 23, 23, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
806
+ containerAccent: "#525252",
807
+ actionAccent: "#111111",
808
+ },
809
+ },
810
+ },
811
+ editorTheme: {
812
+ hud: {
813
+ panelBackground: "rgba(255, 255, 255, 0.94)",
814
+ panelBorder: "1px solid rgba(23, 23, 23, 0.18)",
815
+ panelShadow: "0 16px 32px rgba(23, 23, 23, 0.12)",
816
+ buttonBackground: "rgba(250, 250, 250, 0.96)",
817
+ buttonBorder: "1px solid rgba(23, 23, 23, 0.18)",
818
+ buttonText: "#111111",
819
+ buttonActiveBackground: "#111111",
820
+ buttonActiveBorder: "1px solid rgba(23, 23, 23, 0.52)",
821
+ buttonActiveText: "#ffffff",
822
+ buttonDangerBackground: "#111111",
823
+ buttonDangerBorder: "1px solid rgba(23, 23, 23, 0.52)",
824
+ buttonDangerText: "#ffffff",
825
+ },
826
+ overlay: {
827
+ helpPanel: {
828
+ background: "rgba(255, 255, 255, 0.96)",
829
+ border: "1px solid rgba(23, 23, 23, 0.18)",
830
+ titleText: "#111111",
831
+ bodyText: "#262626",
832
+ mutedText: "#525252",
833
+ },
834
+ floatingToolbar: {
835
+ background: "rgba(255, 255, 255, 0.98)",
836
+ border: "1px solid rgba(23, 23, 23, 0.16)",
837
+ zoneLabelText: "#111111",
838
+ pathLabelText: "#262626",
839
+ buttonBackground: "#f5f5f5",
840
+ buttonBorder: "1px solid rgba(23, 23, 23, 0.16)",
841
+ buttonText: "#111111",
842
+ },
843
+ connectTarget: {
844
+ border: "2px solid rgba(23, 23, 23, 0.92)",
845
+ background: "rgba(23, 23, 23, 0.08)",
846
+ badgeBackground: "#111111",
847
+ },
848
+ dropTarget: {
849
+ border: "2px solid rgba(82, 82, 82, 0.9)",
850
+ background: "rgba(82, 82, 82, 0.08)",
851
+ badgeBackground: "#262626",
852
+ },
853
+ guide: {
854
+ validStroke: "#111111",
855
+ objectSnapStroke: "rgba(23, 23, 23, 0.84)",
856
+ },
857
+ metaChip: {
858
+ background: "rgba(255, 255, 255, 0.92)",
859
+ color: "#111111",
860
+ },
861
+ },
862
+ },
863
+ surfacePalette: {
864
+ canvasBackground: "#f4f4f5",
865
+ topbar: {
866
+ background: "#ffffff",
867
+ border: "1px solid rgba(23, 23, 23, 0.14)",
868
+ controlBackground: "#f5f5f5",
869
+ controlBorder: "1px solid rgba(23, 23, 23, 0.18)",
870
+ controlText: "#111111",
871
+ },
872
+ sidebar: {
873
+ background: "#fafafa",
874
+ border: "1px solid rgba(23, 23, 23, 0.12)",
875
+ text: "#111111",
876
+ mutedText: "#525252",
877
+ sectionTitle: "#262626",
878
+ cardBackground: "rgba(255, 255, 255, 0.92)",
879
+ cardBorder: "rgba(23, 23, 23, 0.12)",
880
+ controlBackground: "#f5f5f5",
881
+ controlBorder: "1px solid rgba(23, 23, 23, 0.16)",
882
+ controlText: "#111111",
883
+ accent: "#111111",
884
+ },
885
+ },
886
+ };
887
+ const gardenPreset = {
888
+ id: "garden",
889
+ label: "Garden",
890
+ description: "Soft botanical workspace preset.",
891
+ rendererTheme: {
892
+ background: "#f3f7ec",
893
+ zoneTitle: "#1f351f",
894
+ zoneSubtext: "#557153",
895
+ zoneContainerBorder: "#86a86b",
896
+ zoneActionBorder: "#d97706",
897
+ zoneBadgeBg: "#edf7d7",
898
+ pathLabel: "#1f351f",
899
+ pathEdge: "#6b8f3f",
900
+ pathInboundEdge: "#2f855a",
901
+ selection: "#65a30d",
902
+ surface: {
903
+ chrome: {
904
+ overlay: "linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(220,252,231,0.16) 44%, rgba(220,252,231,0) 100%)",
905
+ glow: "radial-gradient(circle, rgba(132,204,22,0.22) 0%, rgba(251,191,36,0.08) 38%, rgba(132,204,22,0) 72%)",
906
+ accentFade: "rgba(220, 252, 231, 0.18)",
907
+ },
908
+ zone: {
909
+ background: "linear-gradient(180deg, rgba(255,255,247,0.99) 0%, rgba(243,247,236,0.98) 100%)",
910
+ shadow: "0 18px 34px rgba(47, 83, 47, 0.10), 0 3px 8px rgba(47, 83, 47, 0.06)",
911
+ containerAccent: "rgba(101, 163, 13, 0.14)",
912
+ actionAccent: "rgba(217, 119, 6, 0.16)",
913
+ },
914
+ path: {
915
+ background: "linear-gradient(180deg, rgba(255,255,247,0.99) 0%, rgba(236,253,245,0.97) 100%)",
916
+ shadow: "0 16px 26px rgba(47, 83, 47, 0.10), 0 3px 8px rgba(47, 83, 47, 0.05)",
917
+ accent: "rgba(47, 133, 90, 0.14)",
918
+ },
919
+ anchor: {
920
+ background: "linear-gradient(180deg, rgba(255,255,247,0.99) 0%, rgba(243,247,236,0.98) 100%)",
921
+ shadow: "0 18px 28px rgba(47, 83, 47, 0.10), inset 0 1px 0 rgba(255,255,255,0.88)",
922
+ containerAccent: "#65a30d",
923
+ actionAccent: "#d97706",
924
+ },
925
+ },
926
+ status: {
927
+ info: {
928
+ border: "1px solid rgba(132, 204, 22, 0.34)",
929
+ background: "linear-gradient(180deg, rgba(236,253,245,0.98) 0%, rgba(220,252,231,0.94) 100%)",
930
+ color: "#365314",
931
+ shadow: "0 6px 14px rgba(101, 163, 13, 0.14)",
932
+ },
933
+ warning: {
934
+ border: "1px solid rgba(217, 119, 6, 0.34)",
935
+ background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.94) 100%)",
936
+ color: "#92400e",
937
+ shadow: "0 6px 14px rgba(217, 119, 6, 0.14)",
938
+ },
939
+ },
940
+ },
941
+ editorTheme: {
942
+ hud: {
943
+ panelBackground: "rgba(31, 53, 31, 0.92)",
944
+ panelBorder: "1px solid rgba(132, 168, 107, 0.34)",
945
+ buttonBackground: "rgba(73, 104, 67, 0.82)",
946
+ buttonBorder: "1px solid rgba(187, 214, 143, 0.30)",
947
+ buttonText: "#f7fee7",
948
+ buttonActiveBackground: "#65a30d",
949
+ buttonActiveBorder: "1px solid rgba(217, 249, 157, 0.46)",
950
+ },
951
+ overlay: {
952
+ helpPanel: {
953
+ background: "rgba(31, 53, 31, 0.92)",
954
+ border: "1px solid rgba(132, 168, 107, 0.34)",
955
+ titleText: "#f7fee7",
956
+ mutedText: "#d9f99d",
957
+ },
958
+ connectTarget: {
959
+ badgeBackground: "#2f855a",
960
+ },
961
+ dropTarget: {
962
+ badgeBackground: "#65a30d",
963
+ },
964
+ guide: {
965
+ objectSnapStroke: "rgba(217, 119, 6, 0.86)",
966
+ },
967
+ },
968
+ },
969
+ surfacePalette: {
970
+ canvasBackground: "#f3f7ec",
971
+ topbar: {
972
+ background: "#1f351f",
973
+ border: "1px solid rgba(132, 168, 107, 0.26)",
974
+ controlBackground: "#496843",
975
+ controlBorder: "1px solid rgba(187, 214, 143, 0.30)",
976
+ controlText: "#f7fee7",
977
+ },
978
+ sidebar: {
979
+ background: "#263d25",
980
+ border: "1px solid rgba(132, 168, 107, 0.18)",
981
+ text: "#f7fee7",
982
+ mutedText: "#d9f99d",
983
+ sectionTitle: "#ecfccb",
984
+ cardBackground: "rgba(73, 104, 67, 0.44)",
985
+ cardBorder: "rgba(187, 214, 143, 0.18)",
986
+ controlBackground: "#496843",
987
+ controlBorder: "1px solid rgba(187, 214, 143, 0.24)",
988
+ controlText: "#f7fee7",
989
+ accent: "#f59e0b",
990
+ },
991
+ },
992
+ };
993
+ const utopiaPreset = {
994
+ id: "utopia",
995
+ label: "Utopia",
996
+ description: "Bright civic future preset with glass and mint accents.",
997
+ rendererTheme: {
998
+ background: "#eefdf8",
999
+ zoneTitle: "#073b3a",
1000
+ zoneSubtext: "#3f7b75",
1001
+ zoneContainerBorder: "#8be9d6",
1002
+ zoneActionBorder: "#38bdf8",
1003
+ zoneBadgeBg: "#dffdf5",
1004
+ pathLabel: "#073b3a",
1005
+ pathEdge: "#14b8a6",
1006
+ pathInboundEdge: "#0284c7",
1007
+ selection: "#06b6d4",
1008
+ surface: {
1009
+ chrome: {
1010
+ overlay: "linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(204,251,241,0.24) 44%, rgba(204,251,241,0) 100%)",
1011
+ glow: "radial-gradient(circle, rgba(45,212,191,0.24) 0%, rgba(125,211,252,0.12) 38%, rgba(45,212,191,0) 72%)",
1012
+ accentFade: "rgba(204, 251, 241, 0.18)",
1013
+ },
1014
+ zone: {
1015
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(240,253,250,0.98) 100%)",
1016
+ shadow: "0 18px 34px rgba(8, 145, 178, 0.10), 0 3px 8px rgba(15, 118, 110, 0.05)",
1017
+ containerAccent: "rgba(20, 184, 166, 0.14)",
1018
+ actionAccent: "rgba(56, 189, 248, 0.16)",
1019
+ },
1020
+ path: {
1021
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(236,254,255,0.98) 100%)",
1022
+ shadow: "0 16px 26px rgba(8, 145, 178, 0.09), 0 3px 8px rgba(15, 118, 110, 0.05)",
1023
+ accent: "rgba(6, 182, 212, 0.14)",
1024
+ },
1025
+ anchor: {
1026
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(240,253,250,0.98) 100%)",
1027
+ shadow: "0 18px 28px rgba(8, 145, 178, 0.09), inset 0 1px 0 rgba(255,255,255,0.92)",
1028
+ containerAccent: "#14b8a6",
1029
+ actionAccent: "#38bdf8",
1030
+ },
1031
+ },
1032
+ status: {
1033
+ info: {
1034
+ border: "1px solid rgba(20, 184, 166, 0.32)",
1035
+ background: "linear-gradient(180deg, rgba(240,253,250,0.98) 0%, rgba(204,251,241,0.94) 100%)",
1036
+ color: "#0f766e",
1037
+ shadow: "0 6px 14px rgba(20, 184, 166, 0.12)",
1038
+ },
1039
+ warning: {
1040
+ border: "1px solid rgba(245, 158, 11, 0.34)",
1041
+ background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.94) 100%)",
1042
+ color: "#92400e",
1043
+ shadow: "0 6px 14px rgba(245, 158, 11, 0.12)",
1044
+ },
1045
+ },
1046
+ },
1047
+ editorTheme: {
1048
+ hud: {
1049
+ panelBackground: "rgba(7, 59, 58, 0.92)",
1050
+ panelBorder: "1px solid rgba(139, 233, 214, 0.34)",
1051
+ buttonBackground: "rgba(15, 118, 110, 0.78)",
1052
+ buttonBorder: "1px solid rgba(153, 246, 228, 0.30)",
1053
+ buttonText: "#ecfeff",
1054
+ buttonActiveBackground: "#0891b2",
1055
+ buttonActiveBorder: "1px solid rgba(186, 230, 253, 0.46)",
1056
+ },
1057
+ overlay: {
1058
+ helpPanel: {
1059
+ background: "rgba(7, 59, 58, 0.92)",
1060
+ border: "1px solid rgba(139, 233, 214, 0.34)",
1061
+ titleText: "#ecfeff",
1062
+ mutedText: "#99f6e4",
1063
+ },
1064
+ connectTarget: {
1065
+ badgeBackground: "#0284c7",
1066
+ },
1067
+ dropTarget: {
1068
+ badgeBackground: "#14b8a6",
1069
+ },
1070
+ guide: {
1071
+ objectSnapStroke: "rgba(6, 182, 212, 0.9)",
1072
+ },
1073
+ },
1074
+ },
1075
+ surfacePalette: {
1076
+ canvasBackground: "#eefdf8",
1077
+ topbar: {
1078
+ background: "#073b3a",
1079
+ border: "1px solid rgba(139, 233, 214, 0.24)",
1080
+ controlBackground: "#0f766e",
1081
+ controlBorder: "1px solid rgba(153, 246, 228, 0.30)",
1082
+ controlText: "#ecfeff",
1083
+ },
1084
+ sidebar: {
1085
+ background: "#0b4b49",
1086
+ border: "1px solid rgba(139, 233, 214, 0.18)",
1087
+ text: "#ecfeff",
1088
+ mutedText: "#99f6e4",
1089
+ sectionTitle: "#ccfbf1",
1090
+ cardBackground: "rgba(15, 118, 110, 0.38)",
1091
+ cardBorder: "rgba(153, 246, 228, 0.18)",
1092
+ controlBackground: "#0f766e",
1093
+ controlBorder: "1px solid rgba(153, 246, 228, 0.24)",
1094
+ controlText: "#ecfeff",
1095
+ accent: "#7dd3fc",
1096
+ },
1097
+ },
1098
+ };
1099
+ const dystopiaPreset = {
1100
+ id: "dystopia",
1101
+ label: "Dystopia",
1102
+ description: "Industrial dark preset with rust and warning tones.",
1103
+ rendererTheme: {
1104
+ background: "#140f0c",
1105
+ zoneTitle: "#fff1e6",
1106
+ zoneSubtext: "#c4a18a",
1107
+ zoneContainerBorder: "#7c2d12",
1108
+ zoneActionBorder: "#ef4444",
1109
+ zoneBadgeBg: "#291612",
1110
+ pathLabel: "#fff1e6",
1111
+ pathEdge: "#b45309",
1112
+ pathInboundEdge: "#ef4444",
1113
+ selection: "#f97316",
1114
+ surface: {
1115
+ chrome: {
1116
+ overlay: "linear-gradient(180deg, rgba(248,113,113,0.12) 0%, rgba(180,83,9,0.04) 44%, rgba(180,83,9,0) 100%)",
1117
+ glow: "radial-gradient(circle, rgba(239,68,68,0.18) 0%, rgba(180,83,9,0.10) 38%, rgba(239,68,68,0) 72%)",
1118
+ accentFade: "rgba(41, 22, 18, 0.28)",
1119
+ },
1120
+ zone: {
1121
+ background: "linear-gradient(180deg, rgba(41,22,18,0.98) 0%, rgba(20,15,12,0.98) 100%)",
1122
+ shadow: "0 20px 38px rgba(0, 0, 0, 0.52), 0 0 24px rgba(239, 68, 68, 0.10)",
1123
+ containerAccent: "rgba(180, 83, 9, 0.22)",
1124
+ actionAccent: "rgba(239, 68, 68, 0.20)",
1125
+ },
1126
+ path: {
1127
+ background: "linear-gradient(180deg, rgba(41,22,18,0.98) 0%, rgba(28,18,14,0.98) 100%)",
1128
+ shadow: "0 18px 30px rgba(0, 0, 0, 0.48), 0 0 20px rgba(180, 83, 9, 0.12)",
1129
+ accent: "rgba(249, 115, 22, 0.18)",
1130
+ },
1131
+ anchor: {
1132
+ background: "linear-gradient(180deg, rgba(47,24,18,0.99) 0%, rgba(20,15,12,0.98) 100%)",
1133
+ shadow: "0 18px 28px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(248,113,113,0.10)",
1134
+ containerAccent: "#b45309",
1135
+ actionAccent: "#ef4444",
1136
+ },
1137
+ },
1138
+ status: {
1139
+ info: {
1140
+ border: "1px solid rgba(245, 158, 11, 0.30)",
1141
+ background: "linear-gradient(180deg, rgba(69,36,16,0.92) 0%, rgba(41,22,18,0.88) 100%)",
1142
+ color: "#fcd34d",
1143
+ shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
1144
+ },
1145
+ warning: {
1146
+ border: "1px solid rgba(248, 113, 113, 0.36)",
1147
+ background: "linear-gradient(180deg, rgba(127,29,29,0.92) 0%, rgba(69,10,10,0.88) 100%)",
1148
+ color: "#fecaca",
1149
+ shadow: "0 6px 14px rgba(127, 29, 29, 0.20)",
1150
+ },
1151
+ },
1152
+ },
1153
+ editorTheme: {
1154
+ hud: {
1155
+ panelBackground: "rgba(20, 15, 12, 0.94)",
1156
+ panelBorder: "1px solid rgba(239, 68, 68, 0.30)",
1157
+ buttonBackground: "rgba(41, 22, 18, 0.86)",
1158
+ buttonBorder: "1px solid rgba(249, 115, 22, 0.28)",
1159
+ buttonText: "#fff1e6",
1160
+ buttonActiveBackground: "#b45309",
1161
+ buttonActiveBorder: "1px solid rgba(248, 113, 113, 0.46)",
1162
+ },
1163
+ overlay: {
1164
+ helpPanel: {
1165
+ background: "rgba(20, 15, 12, 0.94)",
1166
+ border: "1px solid rgba(239, 68, 68, 0.30)",
1167
+ titleText: "#fff1e6",
1168
+ mutedText: "#c4a18a",
1169
+ },
1170
+ floatingToolbar: {
1171
+ background: "rgba(20, 15, 12, 0.96)",
1172
+ border: "1px solid rgba(249, 115, 22, 0.24)",
1173
+ zoneLabelText: "#fed7aa",
1174
+ pathLabelText: "#fecaca",
1175
+ },
1176
+ connectTarget: {
1177
+ badgeBackground: "#ef4444",
1178
+ },
1179
+ dropTarget: {
1180
+ badgeBackground: "#b45309",
1181
+ },
1182
+ guide: {
1183
+ objectSnapStroke: "rgba(249, 115, 22, 0.92)",
1184
+ },
1185
+ },
1186
+ },
1187
+ surfacePalette: {
1188
+ canvasBackground: "#140f0c",
1189
+ topbar: {
1190
+ background: "#140f0c",
1191
+ border: "1px solid rgba(239, 68, 68, 0.24)",
1192
+ controlBackground: "#291612",
1193
+ controlBorder: "1px solid rgba(249, 115, 22, 0.28)",
1194
+ controlText: "#fff1e6",
1195
+ },
1196
+ sidebar: {
1197
+ background: "#1d1410",
1198
+ border: "1px solid rgba(239, 68, 68, 0.16)",
1199
+ text: "#fff1e6",
1200
+ mutedText: "#c4a18a",
1201
+ sectionTitle: "#fed7aa",
1202
+ cardBackground: "rgba(41, 22, 18, 0.62)",
1203
+ cardBorder: "rgba(249, 115, 22, 0.16)",
1204
+ controlBackground: "#291612",
1205
+ controlBorder: "1px solid rgba(249, 115, 22, 0.24)",
1206
+ controlText: "#fff1e6",
1207
+ accent: "#ef4444",
1208
+ },
1209
+ },
1210
+ };
1211
+ const desertPreset = {
1212
+ id: "desert",
1213
+ label: "Desert",
1214
+ description: "Warm sand and oasis preset.",
1215
+ rendererTheme: {
1216
+ background: "#fbf1d3",
1217
+ zoneTitle: "#4a2c13",
1218
+ zoneSubtext: "#87633d",
1219
+ zoneContainerBorder: "#d6a85f",
1220
+ zoneActionBorder: "#0f766e",
1221
+ zoneBadgeBg: "#fdecc8",
1222
+ pathLabel: "#4a2c13",
1223
+ pathEdge: "#b7791f",
1224
+ pathInboundEdge: "#0f766e",
1225
+ selection: "#c2410c",
1226
+ surface: {
1227
+ chrome: {
1228
+ overlay: "linear-gradient(180deg, rgba(255,251,235,0.84) 0%, rgba(254,215,170,0.18) 44%, rgba(254,215,170,0) 100%)",
1229
+ glow: "radial-gradient(circle, rgba(251,191,36,0.24) 0%, rgba(20,184,166,0.08) 38%, rgba(251,191,36,0) 72%)",
1230
+ accentFade: "rgba(254, 215, 170, 0.18)",
1231
+ },
1232
+ zone: {
1233
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(251,241,211,0.98) 100%)",
1234
+ shadow: "0 18px 34px rgba(146, 64, 14, 0.12), 0 3px 8px rgba(146, 64, 14, 0.06)",
1235
+ containerAccent: "rgba(214, 168, 95, 0.18)",
1236
+ actionAccent: "rgba(15, 118, 110, 0.14)",
1237
+ },
1238
+ path: {
1239
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(254,243,199,0.97) 100%)",
1240
+ shadow: "0 16px 26px rgba(146, 64, 14, 0.11), 0 3px 8px rgba(146, 64, 14, 0.05)",
1241
+ accent: "rgba(15, 118, 110, 0.12)",
1242
+ },
1243
+ anchor: {
1244
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(251,241,211,0.98) 100%)",
1245
+ shadow: "0 18px 28px rgba(146, 64, 14, 0.10), inset 0 1px 0 rgba(255,255,255,0.88)",
1246
+ containerAccent: "#d6a85f",
1247
+ actionAccent: "#0f766e",
1248
+ },
1249
+ },
1250
+ status: {
1251
+ info: {
1252
+ border: "1px solid rgba(15, 118, 110, 0.30)",
1253
+ background: "linear-gradient(180deg, rgba(240,253,250,0.96) 0%, rgba(204,251,241,0.88) 100%)",
1254
+ color: "#0f766e",
1255
+ shadow: "0 6px 14px rgba(15, 118, 110, 0.12)",
1256
+ },
1257
+ warning: {
1258
+ border: "1px solid rgba(194, 65, 12, 0.34)",
1259
+ background: "linear-gradient(180deg, rgba(255,247,237,0.98) 0%, rgba(254,215,170,0.92) 100%)",
1260
+ color: "#9a3412",
1261
+ shadow: "0 6px 14px rgba(194, 65, 12, 0.14)",
1262
+ },
1263
+ },
1264
+ },
1265
+ editorTheme: {
1266
+ hud: {
1267
+ panelBackground: "rgba(74, 44, 19, 0.92)",
1268
+ panelBorder: "1px solid rgba(214, 168, 95, 0.34)",
1269
+ buttonBackground: "rgba(135, 99, 61, 0.82)",
1270
+ buttonBorder: "1px solid rgba(253, 186, 116, 0.30)",
1271
+ buttonText: "#fff7ed",
1272
+ buttonActiveBackground: "#0f766e",
1273
+ buttonActiveBorder: "1px solid rgba(153, 246, 228, 0.42)",
1274
+ },
1275
+ overlay: {
1276
+ helpPanel: {
1277
+ background: "rgba(74, 44, 19, 0.92)",
1278
+ border: "1px solid rgba(214, 168, 95, 0.34)",
1279
+ titleText: "#fff7ed",
1280
+ mutedText: "#fed7aa",
1281
+ },
1282
+ connectTarget: {
1283
+ badgeBackground: "#0f766e",
1284
+ },
1285
+ dropTarget: {
1286
+ badgeBackground: "#c2410c",
1287
+ },
1288
+ guide: {
1289
+ objectSnapStroke: "rgba(194, 65, 12, 0.88)",
1290
+ },
1291
+ },
1292
+ },
1293
+ surfacePalette: {
1294
+ canvasBackground: "#fbf1d3",
1295
+ topbar: {
1296
+ background: "#4a2c13",
1297
+ border: "1px solid rgba(214, 168, 95, 0.28)",
1298
+ controlBackground: "#87633d",
1299
+ controlBorder: "1px solid rgba(253, 186, 116, 0.30)",
1300
+ controlText: "#fff7ed",
1301
+ },
1302
+ sidebar: {
1303
+ background: "#5a3518",
1304
+ border: "1px solid rgba(214, 168, 95, 0.18)",
1305
+ text: "#fff7ed",
1306
+ mutedText: "#fed7aa",
1307
+ sectionTitle: "#fde68a",
1308
+ cardBackground: "rgba(135, 99, 61, 0.44)",
1309
+ cardBorder: "rgba(253, 186, 116, 0.18)",
1310
+ controlBackground: "#87633d",
1311
+ controlBorder: "1px solid rgba(253, 186, 116, 0.24)",
1312
+ controlText: "#fff7ed",
1313
+ accent: "#2dd4bf",
1314
+ },
1315
+ },
1316
+ };
583
1317
  export const zoneflowThemePresets = {
584
1318
  dark: darkPreset,
585
1319
  ocean: oceanPreset,
@@ -587,5 +1321,12 @@ export const zoneflowThemePresets = {
587
1321
  light: lightPreset,
588
1322
  party: partyPreset,
589
1323
  "korean-culture": koreanCulturePreset,
1324
+ "sci-fi": sciFiPreset,
1325
+ fantasy: fantasyPreset,
1326
+ mono: monoPreset,
1327
+ garden: gardenPreset,
1328
+ utopia: utopiaPreset,
1329
+ dystopia: dystopiaPreset,
1330
+ desert: desertPreset,
590
1331
  };
591
- export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, };
1332
+ export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, sciFiPreset, fantasyPreset, monoPreset, gardenPreset, utopiaPreset, dystopiaPreset, desertPreset, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zoneflow/themes",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "license": "MIT",
5
5
  "description": "Preset renderer and editor themes for Zoneflow.",
6
6
  "type": "module",
@@ -19,8 +19,8 @@
19
19
  "dist"
20
20
  ],
21
21
  "dependencies": {
22
- "@zoneflow/react": "0.0.7",
23
- "@zoneflow/renderer-dom": "0.0.7"
22
+ "@zoneflow/react": "0.0.9",
23
+ "@zoneflow/renderer-dom": "0.0.9"
24
24
  },
25
25
  "scripts": {
26
26
  "build": "tsc -p tsconfig.json",