@jiggai/kitchen-plugin-marketing 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/tabs/content-calendar.js +404 -391
  2. package/package.json +1 -1
package/dist/tabs/content-calendar.js CHANGED
@@ -2,6 +2,7 @@
2
2
  // src/tabs/content-calendar.tsx
3
3
  (function() {
4
4
  const R = window.React;
5
+ const RD = window.ReactDOM;
5
6
  if (!R) return;
6
7
  const h = R.createElement;
7
8
  const useState = R.useState;
@@ -9,6 +10,10 @@
9
10
  const useMemo = R.useMemo;
10
11
  const useCallback = R.useCallback;
11
12
  const useRef = R.useRef;
13
+ const Portal = ({ children }) => {
14
+ if (RD?.createPortal) return RD.createPortal(children, document.body);
15
+ return children;
16
+ };
12
17
  const s = {
13
18
  // layout
14
19
  container: { color: "var(--ck-text-primary)" },
@@ -728,74 +733,78 @@
728
733
  const p = previewPost;
729
734
  const d = p.scheduledAt ? new Date(p.scheduledAt) : new Date(p.createdAt);
730
735
  return h(
731
- "div",
732
- { style: s.overlay, onClick: () => setPreviewPost(null) },
736
+ Portal,
737
+ null,
733
738
  h(
734
739
  "div",
735
- {
736
- style: { ...s.modal, maxWidth: "550px" },
737
- onClick: (e) => e.stopPropagation()
738
- },
740
+ { style: s.overlay, onClick: () => setPreviewPost(null) },
739
741
  h(
740
742
  "div",
741
- { style: s.modalHeader },
742
- h("div", { style: { fontWeight: 700, fontSize: "1rem", color: "var(--ck-text-primary)" } }, "Preview Post"),
743
- h("button", { style: s.closeBtn, onClick: () => setPreviewPost(null) }, "\xD7")
744
- ),
745
- h(
746
- "div",
747
- { style: { padding: "1.25rem" } },
743
+ {
744
+ style: { ...s.modal, maxWidth: "550px" },
745
+ onClick: (e) => e.stopPropagation()
746
+ },
748
747
  h(
749
748
  "div",
750
- { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" } },
751
- h("div", { style: s.statusDot(p.status) }),
752
- h("span", { style: { fontSize: "0.8rem", fontWeight: 600, color: "var(--ck-text-secondary)", textTransform: "capitalize" } }, p.status),
753
- h("span", { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" } }, d.toLocaleString())
749
+ { style: s.modalHeader },
750
+ h("div", { style: { fontWeight: 700, fontSize: "1rem", color: "var(--ck-text-primary)" } }, "Preview Post"),
751
+ h("button", { style: s.closeBtn, onClick: () => setPreviewPost(null) }, "\xD7")
754
752
  ),
755
- // Platforms
756
- p.platforms?.length > 0 && h(
757
- "div",
758
- { style: { display: "flex", gap: "0.4rem", marginBottom: "0.75rem", flexWrap: "wrap" } },
759
- ...p.platforms.map((pl) => {
760
- const drv = drivers.find((x) => x.platform === pl);
761
- return h("span", {
762
- key: pl,
763
- style: {
764
- background: "rgba(127,90,240,0.15)",
765
- border: "1px solid rgba(127,90,240,0.3)",
766
- borderRadius: "999px",
767
- padding: "0.15rem 0.5rem",
768
- fontSize: "0.75rem",
769
- color: "var(--ck-text-secondary)"
770
- }
771
- }, drv ? `${drv.icon} ${drv.label}` : pl);
772
- })
773
- ),
774
- // Content
775
- h("div", {
776
- style: {
777
- ...s.previewPanel,
778
- whiteSpace: "pre-wrap",
779
- fontSize: "0.9rem",
780
- color: "var(--ck-text-primary)",
781
- lineHeight: "1.5"
782
- }
783
- }, p.content),
784
- // Actions
785
753
  h(
786
754
  "div",
787
- { style: { display: "flex", gap: "0.5rem", marginTop: "1rem" } },
788
- h("button", {
789
- style: s.btnGhost,
790
- onClick: () => copyPost(p.content)
791
- }, "\u{1F4CB} Copy"),
792
- h("button", {
793
- style: { ...s.btnGhost, color: "rgba(248,113,113,0.9)" },
794
- onClick: () => {
795
- deletePost(p.id);
796
- setPreviewPost(null);
755
+ { style: { padding: "1.25rem" } },
756
+ h(
757
+ "div",
758
+ { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" } },
759
+ h("div", { style: s.statusDot(p.status) }),
760
+ h("span", { style: { fontSize: "0.8rem", fontWeight: 600, color: "var(--ck-text-secondary)", textTransform: "capitalize" } }, p.status),
761
+ h("span", { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" } }, d.toLocaleString())
762
+ ),
763
+ // Platforms
764
+ p.platforms?.length > 0 && h(
765
+ "div",
766
+ { style: { display: "flex", gap: "0.4rem", marginBottom: "0.75rem", flexWrap: "wrap" } },
767
+ ...p.platforms.map((pl) => {
768
+ const drv = drivers.find((x) => x.platform === pl);
769
+ return h("span", {
770
+ key: pl,
771
+ style: {
772
+ background: "rgba(127,90,240,0.15)",
773
+ border: "1px solid rgba(127,90,240,0.3)",
774
+ borderRadius: "999px",
775
+ padding: "0.15rem 0.5rem",
776
+ fontSize: "0.75rem",
777
+ color: "var(--ck-text-secondary)"
778
+ }
779
+ }, drv ? `${drv.icon} ${drv.label}` : pl);
780
+ })
781
+ ),
782
+ // Content
783
+ h("div", {
784
+ style: {
785
+ ...s.previewPanel,
786
+ whiteSpace: "pre-wrap",
787
+ fontSize: "0.9rem",
788
+ color: "var(--ck-text-primary)",
789
+ lineHeight: "1.5"
797
790
  }
798
- }, "\u{1F5D1} Delete")
791
+ }, p.content),
792
+ // Actions
793
+ h(
794
+ "div",
795
+ { style: { display: "flex", gap: "0.5rem", marginTop: "1rem" } },
796
+ h("button", {
797
+ style: s.btnGhost,
798
+ onClick: () => copyPost(p.content)
799
+ }, "\u{1F4CB} Copy"),
800
+ h("button", {
801
+ style: { ...s.btnGhost, color: "rgba(248,113,113,0.9)" },
802
+ onClick: () => {
803
+ deletePost(p.id);
804
+ setPreviewPost(null);
805
+ }
806
+ }, "\u{1F5D1} Delete")
807
+ )
799
808
  )
800
809
  )
801
810
  )
@@ -809,396 +818,400 @@
809
818
  return limits.length > 0 ? Math.min(...limits) : void 0;
810
819
  }, [modalPlatforms, drivers]);
811
820
  return h(
812
- "div",
813
- { style: s.overlay, onClick: () => setModalOpen(false) },
821
+ Portal,
822
+ null,
814
823
  h(
815
824
  "div",
816
- {
817
- style: s.modal,
818
- onClick: (e) => e.stopPropagation()
819
- },
820
- // Header
821
- h(
822
- "div",
823
- { style: s.modalHeader },
824
- h("div", { style: { fontWeight: 700, fontSize: "1.1rem", color: "var(--ck-text-primary)" } }, "Create Post"),
825
- h("button", { style: s.closeBtn, onClick: () => setModalOpen(false) }, "\xD7")
826
- ),
827
- // Body — two columns
825
+ { style: s.overlay, onClick: () => setModalOpen(false) },
828
826
  h(
829
827
  "div",
830
- { style: s.modalBody },
831
- // Left — compose
828
+ {
829
+ style: s.modal,
830
+ onClick: (e) => e.stopPropagation()
831
+ },
832
+ // Header
832
833
  h(
833
834
  "div",
834
- { style: s.modalLeft },
835
- // Platform circles
836
- h(
837
- "div",
838
- { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" } },
839
- ...drivers.map(
840
- (d) => h("div", {
841
- key: d.platform,
842
- style: s.platformCircle(modalPlatforms.includes(d.platform), d.connected),
843
- onClick: () => {
844
- if (!d.connected) return;
845
- setModalPlatforms(
846
- (prev) => prev.includes(d.platform) ? prev.filter((x) => x !== d.platform) : [...prev, d.platform]
847
- );
848
- },
849
- title: `${d.label}${d.connected ? "" : " (not connected)"}`
850
- }, d.icon)
851
- )
852
- ),
853
- // Textarea
854
- h("textarea", {
855
- style: s.textarea,
856
- dir: "ltr",
857
- value: modalContent,
858
- onChange: (e) => setModalContent(e.target.value),
859
- placeholder: "Write something \u2026",
860
- autoFocus: true
861
- }),
862
- // Toolbar
835
+ { style: s.modalHeader },
836
+ h("div", { style: { fontWeight: 700, fontSize: "1.1rem", color: "var(--ck-text-primary)" } }, "Create Post"),
837
+ h("button", { style: s.closeBtn, onClick: () => setModalOpen(false) }, "\xD7")
838
+ ),
839
+ // Body — two columns
840
+ h(
841
+ "div",
842
+ { style: s.modalBody },
843
+ // Left — compose
863
844
  h(
864
845
  "div",
865
- { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" } },
866
- h("button", {
867
- type: "button",
868
- style: { ...s.btnGhost, padding: "0.3rem 0.6rem", fontSize: "0.75rem" },
869
- onClick: async () => {
870
- const next = !modalShowMedia;
871
- setModalShowMedia(next);
872
- if (next) await loadMedia();
873
- }
874
- }, "\u{1F5BC} Insert Media"),
875
- charLimit && h("span", {
876
- style: {
877
- fontSize: "0.75rem",
878
- marginLeft: "auto",
879
- color: modalContent.length > charLimit ? "rgba(248,113,113,0.95)" : "var(--ck-text-tertiary)"
880
- }
881
- }, `${modalContent.length}/${charLimit}`)
882
- ),
883
- // Media panel (upload + library + URL)
884
- modalShowMedia && h(
885
- "div",
886
- {
887
- style: {
888
- background: "rgba(255,255,255,0.02)",
889
- border: "1px solid var(--ck-border-subtle)",
890
- borderRadius: "10px",
891
- padding: "0.75rem"
892
- }
893
- },
846
+ { style: s.modalLeft },
847
+ // Platform circles
894
848
  h(
895
849
  "div",
896
- { style: { display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "0.5rem", flexWrap: "wrap" } },
897
- h("input", {
898
- ref: modalFileInputRef,
899
- type: "file",
900
- accept: "image/*,video/*",
901
- multiple: true,
902
- style: { display: "none" },
903
- onChange: (e) => void handleModalFileUpload(e.target.files)
904
- }),
905
- h("button", {
906
- type: "button",
907
- style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem", opacity: modalUploading ? 0.7 : 1 },
908
- onClick: () => modalFileInputRef.current?.click(),
909
- disabled: modalUploading
910
- }, modalUploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
911
- h("button", {
912
- type: "button",
913
- style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem" },
914
- onClick: () => setModalShowMedia(false)
915
- }, "Done")
850
+ { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" } },
851
+ ...drivers.map(
852
+ (d) => h("div", {
853
+ key: d.platform,
854
+ style: s.platformCircle(modalPlatforms.includes(d.platform), d.connected),
855
+ onClick: () => {
856
+ if (!d.connected) return;
857
+ setModalPlatforms(
858
+ (prev) => prev.includes(d.platform) ? prev.filter((x) => x !== d.platform) : [...prev, d.platform]
859
+ );
860
+ },
861
+ title: `${d.label}${d.connected ? "" : " (not connected)"}`
862
+ }, d.icon)
863
+ )
916
864
  ),
917
- h("input", {
918
- style: s.input,
919
- type: "url",
920
- value: modalMediaUrl,
921
- onChange: (e) => setModalMediaUrl(e.target.value),
922
- placeholder: "Paste a public image/video URL (needed for Postiz)\u2026"
865
+ // Textarea
866
+ h("textarea", {
867
+ style: s.textarea,
868
+ dir: "ltr",
869
+ value: modalContent,
870
+ onChange: (e) => setModalContent(e.target.value),
871
+ placeholder: "Write something \u2026",
872
+ autoFocus: true
923
873
  }),
924
- // Selected media strip
925
- modalSelectedMediaIds.length > 0 && h(
874
+ // Toolbar
875
+ h(
926
876
  "div",
927
- { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "0.65rem" } },
928
- ...modalSelectedMediaIds.map((id) => {
929
- const item = modalMediaLibrary.find((m) => m.id === id);
930
- if (!item) return null;
931
- return h(
932
- "div",
933
- {
934
- key: id,
935
- style: {
936
- position: "relative",
937
- width: "64px",
938
- height: "64px",
939
- borderRadius: "8px",
940
- overflow: "hidden",
941
- border: "2px solid rgba(127,90,240,0.55)"
942
- }
943
- },
944
- item.mimeType?.startsWith("video/") ? h("div", {
945
- style: { width: "100%", height: "100%", background: "rgba(0,0,0,0.35)", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }
946
- }, "\u{1F3A5}") : h("img", { src: item.thumbnailDataUrl, style: { width: "100%", height: "100%", objectFit: "cover" } }),
947
- h("button", {
948
- type: "button",
949
- onClick: () => toggleModalMedia(id),
950
- style: {
951
- position: "absolute",
952
- top: "2px",
953
- right: "2px",
954
- background: "rgba(0,0,0,0.6)",
955
- border: "none",
956
- borderRadius: "50%",
957
- width: "18px",
958
- height: "18px",
959
- color: "white",
960
- fontSize: "0.65rem",
961
- cursor: "pointer",
962
- display: "flex",
963
- alignItems: "center",
964
- justifyContent: "center"
965
- }
966
- }, "\u2715")
967
- );
968
- })
877
+ { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" } },
878
+ h("button", {
879
+ type: "button",
880
+ style: { ...s.btnGhost, padding: "0.3rem 0.6rem", fontSize: "0.75rem" },
881
+ onClick: async () => {
882
+ const next = !modalShowMedia;
883
+ setModalShowMedia(next);
884
+ if (next) await loadMedia();
885
+ }
886
+ }, "\u{1F5BC} Insert Media"),
887
+ charLimit && h("span", {
888
+ style: {
889
+ fontSize: "0.75rem",
890
+ marginLeft: "auto",
891
+ color: modalContent.length > charLimit ? "rgba(248,113,113,0.95)" : "var(--ck-text-tertiary)"
892
+ }
893
+ }, `${modalContent.length}/${charLimit}`)
969
894
  ),
970
- // Library grid
971
- h(
895
+ // Media panel (upload + library + URL)
896
+ modalShowMedia && h(
972
897
  "div",
973
- { style: { marginTop: "0.65rem" } },
974
- h("div", { style: { fontSize: "0.75rem", fontWeight: 600, color: "var(--ck-text-secondary)", marginBottom: "0.4rem" } }, "Media Library"),
975
- modalMediaLibrary.length === 0 ? h("div", { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)", padding: "0.5rem 0" } }, "No media yet \u2014 upload something.") : h(
898
+ {
899
+ style: {
900
+ background: "rgba(255,255,255,0.02)",
901
+ border: "1px solid var(--ck-border-subtle)",
902
+ borderRadius: "10px",
903
+ padding: "0.75rem"
904
+ }
905
+ },
906
+ h(
976
907
  "div",
977
- {
978
- style: {
979
- display: "grid",
980
- gridTemplateColumns: "repeat(auto-fill, minmax(86px, 1fr))",
981
- gap: "0.5rem",
982
- maxHeight: "220px",
983
- overflowY: "auto",
984
- paddingRight: "4px"
985
- }
986
- },
987
- ...modalMediaLibrary.map((item) => {
988
- const selected = modalSelectedMediaIds.includes(item.id);
989
- const thumb = item.thumbnailDataUrl;
908
+ { style: { display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "0.5rem", flexWrap: "wrap" } },
909
+ h("input", {
910
+ ref: modalFileInputRef,
911
+ type: "file",
912
+ accept: "image/*,video/*",
913
+ multiple: true,
914
+ style: { display: "none" },
915
+ onChange: (e) => void handleModalFileUpload(e.target.files)
916
+ }),
917
+ h("button", {
918
+ type: "button",
919
+ style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem", opacity: modalUploading ? 0.7 : 1 },
920
+ onClick: () => modalFileInputRef.current?.click(),
921
+ disabled: modalUploading
922
+ }, modalUploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
923
+ h("button", {
924
+ type: "button",
925
+ style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem" },
926
+ onClick: () => setModalShowMedia(false)
927
+ }, "Done")
928
+ ),
929
+ h("input", {
930
+ style: s.input,
931
+ type: "url",
932
+ value: modalMediaUrl,
933
+ onChange: (e) => setModalMediaUrl(e.target.value),
934
+ placeholder: "Paste a public image/video URL (needed for Postiz)\u2026"
935
+ }),
936
+ // Selected media strip
937
+ modalSelectedMediaIds.length > 0 && h(
938
+ "div",
939
+ { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "0.65rem" } },
940
+ ...modalSelectedMediaIds.map((id) => {
941
+ const item = modalMediaLibrary.find((m) => m.id === id);
942
+ if (!item) return null;
990
943
  return h(
991
944
  "div",
992
945
  {
993
- key: item.id,
994
- onClick: () => toggleModalMedia(item.id),
946
+ key: id,
995
947
  style: {
996
948
  position: "relative",
997
- width: "100%",
998
- paddingTop: "100%",
999
- borderRadius: "10px",
949
+ width: "64px",
950
+ height: "64px",
951
+ borderRadius: "8px",
1000
952
  overflow: "hidden",
1001
- cursor: "pointer",
1002
- border: selected ? "2px solid rgba(127,90,240,0.75)" : "1px solid var(--ck-border-subtle)",
1003
- boxShadow: selected ? "0 0 10px rgba(127,90,240,0.25)" : "none",
1004
- background: "rgba(0,0,0,0.25)"
953
+ border: "2px solid rgba(127,90,240,0.55)"
1005
954
  }
1006
955
  },
1007
956
  item.mimeType?.startsWith("video/") ? h("div", {
1008
- style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: "1.4rem" }
1009
- }, "\u{1F3A5}") : h("img", {
1010
- src: thumb,
1011
- style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }
1012
- }),
1013
- selected && h("div", {
957
+ style: { width: "100%", height: "100%", background: "rgba(0,0,0,0.35)", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }
958
+ }, "\u{1F3A5}") : h("img", { src: item.thumbnailDataUrl, style: { width: "100%", height: "100%", objectFit: "cover" } }),
959
+ h("button", {
960
+ type: "button",
961
+ onClick: () => toggleModalMedia(id),
1014
962
  style: {
1015
963
  position: "absolute",
1016
- top: "6px",
1017
- right: "6px",
1018
- width: "20px",
1019
- height: "20px",
964
+ top: "2px",
965
+ right: "2px",
966
+ background: "rgba(0,0,0,0.6)",
967
+ border: "none",
1020
968
  borderRadius: "50%",
1021
- background: "rgba(127,90,240,0.9)",
969
+ width: "18px",
970
+ height: "18px",
971
+ color: "white",
972
+ fontSize: "0.65rem",
973
+ cursor: "pointer",
1022
974
  display: "flex",
1023
975
  alignItems: "center",
1024
- justifyContent: "center",
1025
- color: "white",
1026
- fontSize: "0.75rem",
1027
- fontWeight: 800
976
+ justifyContent: "center"
1028
977
  }
1029
- }, "\u2713")
978
+ }, "\u2715")
1030
979
  );
1031
980
  })
981
+ ),
982
+ // Library grid
983
+ h(
984
+ "div",
985
+ { style: { marginTop: "0.65rem" } },
986
+ h("div", { style: { fontSize: "0.75rem", fontWeight: 600, color: "var(--ck-text-secondary)", marginBottom: "0.4rem" } }, "Media Library"),
987
+ modalMediaLibrary.length === 0 ? h("div", { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)", padding: "0.5rem 0" } }, "No media yet \u2014 upload something.") : h(
988
+ "div",
989
+ {
990
+ style: {
991
+ display: "grid",
992
+ gridTemplateColumns: "repeat(auto-fill, minmax(86px, 1fr))",
993
+ gap: "0.5rem",
994
+ maxHeight: "220px",
995
+ overflowY: "auto",
996
+ paddingRight: "4px"
997
+ }
998
+ },
999
+ ...modalMediaLibrary.map((item) => {
1000
+ const selected = modalSelectedMediaIds.includes(item.id);
1001
+ const thumb = item.thumbnailDataUrl;
1002
+ return h(
1003
+ "div",
1004
+ {
1005
+ key: item.id,
1006
+ onClick: () => toggleModalMedia(item.id),
1007
+ style: {
1008
+ position: "relative",
1009
+ width: "100%",
1010
+ paddingTop: "100%",
1011
+ borderRadius: "10px",
1012
+ overflow: "hidden",
1013
+ cursor: "pointer",
1014
+ border: selected ? "2px solid rgba(127,90,240,0.75)" : "1px solid var(--ck-border-subtle)",
1015
+ boxShadow: selected ? "0 0 10px rgba(127,90,240,0.25)" : "none",
1016
+ background: "rgba(0,0,0,0.25)"
1017
+ }
1018
+ },
1019
+ item.mimeType?.startsWith("video/") ? h("div", {
1020
+ style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: "1.4rem" }
1021
+ }, "\u{1F3A5}") : h("img", {
1022
+ src: thumb,
1023
+ style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }
1024
+ }),
1025
+ selected && h("div", {
1026
+ style: {
1027
+ position: "absolute",
1028
+ top: "6px",
1029
+ right: "6px",
1030
+ width: "20px",
1031
+ height: "20px",
1032
+ borderRadius: "50%",
1033
+ background: "rgba(127,90,240,0.9)",
1034
+ display: "flex",
1035
+ alignItems: "center",
1036
+ justifyContent: "center",
1037
+ color: "white",
1038
+ fontSize: "0.75rem",
1039
+ fontWeight: 800
1040
+ }
1041
+ }, "\u2713")
1042
+ );
1043
+ })
1044
+ )
1032
1045
  )
1033
1046
  )
1034
- )
1035
- ),
1036
- // Right — social-post-style preview
1037
- h(
1038
- "div",
1039
- { style: s.modalRight },
1040
- h("div", { style: { fontWeight: 600, fontSize: "0.85rem", color: "var(--ck-text-secondary)", marginBottom: "0.75rem" } }, "Post Preview"),
1047
+ ),
1048
+ // Right — social-post-style preview
1041
1049
  h(
1042
1050
  "div",
1043
- {
1044
- style: {
1045
- background: "rgba(22,22,28,0.95)",
1046
- borderRadius: "12px",
1047
- border: "1px solid rgba(255,255,255,0.08)",
1048
- overflow: "hidden"
1049
- }
1050
- },
1051
- // Header
1051
+ { style: s.modalRight },
1052
+ h("div", { style: { fontWeight: 600, fontSize: "0.85rem", color: "var(--ck-text-secondary)", marginBottom: "0.75rem" } }, "Post Preview"),
1052
1053
  h(
1053
1054
  "div",
1054
- { style: { display: "flex", alignItems: "center", gap: "0.65rem", padding: "0.85rem 1rem 0" } },
1055
- h("div", {
1055
+ {
1056
1056
  style: {
1057
- width: "40px",
1058
- height: "40px",
1059
- borderRadius: "50%",
1060
- background: "rgba(127,90,240,0.25)",
1061
- display: "flex",
1062
- alignItems: "center",
1063
- justifyContent: "center",
1064
- fontSize: "1.1rem",
1065
- color: "rgba(127,90,240,0.9)",
1066
- flexShrink: 0
1057
+ background: "rgba(22,22,28,0.95)",
1058
+ borderRadius: "12px",
1059
+ border: "1px solid rgba(255,255,255,0.08)",
1060
+ overflow: "hidden"
1067
1061
  }
1068
- }, "\u{1F464}"),
1062
+ },
1063
+ // Header
1069
1064
  h(
1070
1065
  "div",
1071
- null,
1072
- h(
1073
- "div",
1074
- { style: { display: "flex", alignItems: "center", gap: "0.3rem" } },
1075
- h("span", { style: { fontWeight: 700, fontSize: "0.9rem", color: "var(--ck-text-primary)" } }, "Your Brand"),
1076
- h("span", { style: { color: "rgba(99,179,237,0.9)", fontSize: "0.85rem" } }, "\u2713")
1077
- ),
1066
+ { style: { display: "flex", alignItems: "center", gap: "0.65rem", padding: "0.85rem 1rem 0" } },
1067
+ h("div", {
1068
+ style: {
1069
+ width: "40px",
1070
+ height: "40px",
1071
+ borderRadius: "50%",
1072
+ background: "rgba(127,90,240,0.25)",
1073
+ display: "flex",
1074
+ alignItems: "center",
1075
+ justifyContent: "center",
1076
+ fontSize: "1.1rem",
1077
+ color: "rgba(127,90,240,0.9)",
1078
+ flexShrink: 0
1079
+ }
1080
+ }, "\u{1F464}"),
1078
1081
  h(
1079
1082
  "div",
1080
- { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" } },
1081
- modalDate ? new Date(modalDate).toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "Just now"
1083
+ null,
1084
+ h(
1085
+ "div",
1086
+ { style: { display: "flex", alignItems: "center", gap: "0.3rem" } },
1087
+ h("span", { style: { fontWeight: 700, fontSize: "0.9rem", color: "var(--ck-text-primary)" } }, "Your Brand"),
1088
+ h("span", { style: { color: "rgba(99,179,237,0.9)", fontSize: "0.85rem" } }, "\u2713")
1089
+ ),
1090
+ h(
1091
+ "div",
1092
+ { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" } },
1093
+ modalDate ? new Date(modalDate).toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "Just now"
1094
+ )
1082
1095
  )
1096
+ ),
1097
+ // Body
1098
+ h(
1099
+ "div",
1100
+ { style: { padding: "0.65rem 1rem 0.75rem" } },
1101
+ modalContent.trim() ? h("div", {
1102
+ style: {
1103
+ whiteSpace: "pre-wrap",
1104
+ fontSize: "0.9rem",
1105
+ color: "var(--ck-text-primary)",
1106
+ lineHeight: "1.5",
1107
+ maxHeight: "300px",
1108
+ overflowY: "auto",
1109
+ wordBreak: "break-word"
1110
+ }
1111
+ }, modalContent) : h("div", {
1112
+ style: { color: "var(--ck-text-tertiary)", fontSize: "0.85rem", fontStyle: "italic", padding: "1.5rem 0", textAlign: "center" }
1113
+ }, "Start writing to see a preview")
1114
+ ),
1115
+ // Media preview (selected library media first, then URL)
1116
+ (modalSelectedMediaIds.length > 0 || modalMediaUrl) && h(
1117
+ "div",
1118
+ null,
1119
+ ...modalSelectedMediaIds.slice(0, 1).map((id) => {
1120
+ const item = modalMediaLibrary.find((m) => m.id === id);
1121
+ if (!item) return null;
1122
+ return item.mimeType?.startsWith("video/") ? h("div", {
1123
+ key: id,
1124
+ style: { background: "rgba(0,0,0,0.4)", padding: "1.25rem", textAlign: "center", color: "var(--ck-text-secondary)" }
1125
+ }, "\u{1F3A5} Video") : h("img", { key: id, src: item.thumbnailDataUrl, style: { width: "100%", display: "block" } });
1126
+ }),
1127
+ modalMediaUrl && h("img", {
1128
+ src: modalMediaUrl,
1129
+ style: { width: "100%", display: "block" },
1130
+ onError: (e) => {
1131
+ e.target.style.display = "none";
1132
+ }
1133
+ })
1134
+ ),
1135
+ // Engagement bar
1136
+ h(
1137
+ "div",
1138
+ {
1139
+ style: {
1140
+ display: "flex",
1141
+ justifyContent: "space-around",
1142
+ padding: "0.6rem 1rem",
1143
+ borderTop: "1px solid rgba(255,255,255,0.06)",
1144
+ fontSize: "0.8rem",
1145
+ color: "var(--ck-text-tertiary)"
1146
+ }
1147
+ },
1148
+ h("span", null, "\u2764\uFE0F 0"),
1149
+ h("span", null, "\u{1F4AC} 0"),
1150
+ h("span", null, "\u{1F501} 0"),
1151
+ h("span", null, "\u{1F4CA} 0")
1083
1152
  )
1084
1153
  ),
1085
- // Body
1086
- h(
1087
- "div",
1088
- { style: { padding: "0.65rem 1rem 0.75rem" } },
1089
- modalContent.trim() ? h("div", {
1090
- style: {
1091
- whiteSpace: "pre-wrap",
1092
- fontSize: "0.9rem",
1093
- color: "var(--ck-text-primary)",
1094
- lineHeight: "1.5",
1095
- maxHeight: "300px",
1096
- overflowY: "auto",
1097
- wordBreak: "break-word"
1098
- }
1099
- }, modalContent) : h("div", {
1100
- style: { color: "var(--ck-text-tertiary)", fontSize: "0.85rem", fontStyle: "italic", padding: "1.5rem 0", textAlign: "center" }
1101
- }, "Start writing to see a preview")
1102
- ),
1103
- // Media preview (selected library media first, then URL)
1104
- (modalSelectedMediaIds.length > 0 || modalMediaUrl) && h(
1105
- "div",
1106
- null,
1107
- ...modalSelectedMediaIds.slice(0, 1).map((id) => {
1108
- const item = modalMediaLibrary.find((m) => m.id === id);
1109
- if (!item) return null;
1110
- return item.mimeType?.startsWith("video/") ? h("div", {
1111
- key: id,
1112
- style: { background: "rgba(0,0,0,0.4)", padding: "1.25rem", textAlign: "center", color: "var(--ck-text-secondary)" }
1113
- }, "\u{1F3A5} Video") : h("img", { key: id, src: item.thumbnailDataUrl, style: { width: "100%", display: "block" } });
1114
- }),
1115
- modalMediaUrl && h("img", {
1116
- src: modalMediaUrl,
1117
- style: { width: "100%", display: "block" },
1118
- onError: (e) => {
1119
- e.target.style.display = "none";
1120
- }
1121
- })
1122
- ),
1123
- // Engagement bar
1124
- h(
1154
+ // Platform pills
1155
+ modalPlatforms.length > 0 && h(
1125
1156
  "div",
1126
1157
  {
1158
+ style: { display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.65rem" }
1159
+ },
1160
+ ...modalPlatforms.map((pl) => h("span", {
1161
+ key: pl,
1127
1162
  style: {
1128
- display: "flex",
1129
- justifyContent: "space-around",
1130
- padding: "0.6rem 1rem",
1131
- borderTop: "1px solid rgba(255,255,255,0.06)",
1132
- fontSize: "0.8rem",
1133
- color: "var(--ck-text-tertiary)"
1163
+ background: "rgba(127,90,240,0.12)",
1164
+ border: "1px solid rgba(127,90,240,0.25)",
1165
+ borderRadius: "999px",
1166
+ padding: "0.1rem 0.4rem",
1167
+ fontSize: "0.7rem",
1168
+ color: "var(--ck-text-secondary)"
1134
1169
  }
1135
- },
1136
- h("span", null, "\u2764\uFE0F 0"),
1137
- h("span", null, "\u{1F4AC} 0"),
1138
- h("span", null, "\u{1F501} 0"),
1139
- h("span", null, "\u{1F4CA} 0")
1170
+ }, pl))
1140
1171
  )
1141
- ),
1142
- // Platform pills
1143
- modalPlatforms.length > 0 && h(
1144
- "div",
1145
- {
1146
- style: { display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.65rem" }
1147
- },
1148
- ...modalPlatforms.map((pl) => h("span", {
1149
- key: pl,
1150
- style: {
1151
- background: "rgba(127,90,240,0.12)",
1152
- border: "1px solid rgba(127,90,240,0.25)",
1153
- borderRadius: "999px",
1154
- padding: "0.1rem 0.4rem",
1155
- fontSize: "0.7rem",
1156
- color: "var(--ck-text-secondary)"
1157
- }
1158
- }, pl))
1159
1172
  )
1160
- )
1161
- ),
1162
- // Footer
1163
- h(
1164
- "div",
1165
- { style: s.modalFooter },
1166
- // Left — date
1167
- h(
1168
- "div",
1169
- { style: { display: "flex", alignItems: "center", gap: "0.5rem" } },
1170
- h("span", { style: { fontSize: "0.8rem", color: "var(--ck-text-tertiary)" } }, "\u{1F4C5}"),
1171
- h("input", {
1172
- style: { ...s.input, width: "220px" },
1173
- type: "datetime-local",
1174
- value: modalDate,
1175
- onChange: (e) => setModalDate(e.target.value)
1176
- })
1177
1173
  ),
1178
- // Right — buttons
1174
+ // Footer
1179
1175
  h(
1180
1176
  "div",
1181
- { style: { display: "flex", gap: "0.5rem" } },
1182
- h("button", {
1183
- style: { ...s.btnGhost, opacity: modalSaving ? 0.6 : 1 },
1184
- onClick: () => void modalSaveDraft(),
1185
- disabled: modalSaving || !modalContent.trim()
1186
- }, modalSaving ? "Saving\u2026" : "Save as draft"),
1187
- connectedDrivers.length > 0 && modalPlatforms.length > 0 && h("button", {
1188
- style: { ...s.btnPrimary, opacity: modalPublishing ? 0.6 : 1 },
1189
- onClick: () => void modalPublish(),
1190
- disabled: modalPublishing || !modalContent.trim()
1191
- }, modalPublishing ? "Publishing\u2026" : modalDate ? "\u23F1 Schedule" : "\u{1F4E4} Publish")
1192
- )
1193
- ),
1194
- // Error / success
1195
- (modalError || modalSuccess) && h("div", {
1196
- style: {
1197
- padding: "0.5rem 1.25rem",
1198
- fontSize: "0.8rem",
1199
- color: modalError ? "rgba(248,113,113,0.95)" : "rgba(74,222,128,0.9)"
1200
- }
1201
- }, modalError || modalSuccess)
1177
+ { style: s.modalFooter },
1178
+ // Left — date
1179
+ h(
1180
+ "div",
1181
+ { style: { display: "flex", alignItems: "center", gap: "0.5rem" } },
1182
+ h("span", { style: { fontSize: "0.8rem", color: "var(--ck-text-tertiary)" } }, "\u{1F4C5}"),
1183
+ h("input", {
1184
+ style: { ...s.input, width: "220px" },
1185
+ type: "datetime-local",
1186
+ value: modalDate,
1187
+ onChange: (e) => setModalDate(e.target.value)
1188
+ })
1189
+ ),
1190
+ // Right — buttons
1191
+ h(
1192
+ "div",
1193
+ { style: { display: "flex", gap: "0.5rem" } },
1194
+ h("button", {
1195
+ style: { ...s.btnGhost, opacity: modalSaving ? 0.6 : 1 },
1196
+ onClick: () => void modalSaveDraft(),
1197
+ disabled: modalSaving || !modalContent.trim()
1198
+ }, modalSaving ? "Saving\u2026" : "Save as draft"),
1199
+ connectedDrivers.length > 0 && modalPlatforms.length > 0 && h("button", {
1200
+ style: { ...s.btnPrimary, opacity: modalPublishing ? 0.6 : 1 },
1201
+ onClick: () => void modalPublish(),
1202
+ disabled: modalPublishing || !modalContent.trim()
1203
+ }, modalPublishing ? "Publishing\u2026" : modalDate ? "\u23F1 Schedule" : "\u{1F4E4} Publish")
1204
+ )
1205
+ ),
1206
+ // Error / success
1207
+ (modalError || modalSuccess) && h("div", {
1208
+ style: {
1209
+ padding: "0.5rem 1.25rem",
1210
+ fontSize: "0.8rem",
1211
+ color: modalError ? "rgba(248,113,113,0.95)" : "rgba(74,222,128,0.9)"
1212
+ }
1213
+ }, modalError || modalSuccess)
1214
+ )
1202
1215
  )
1203
1216
  );
1204
1217
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jiggai/kitchen-plugin-marketing",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "description": "Marketing Suite plugin for ClawKitchen",
5
5
  "main": "dist/index.js",
6
6
  "files": [