@jiggai/kitchen-plugin-marketing 0.5.1 → 0.5.2

package/dist/api/handler.js

@@ -453,7 +453,8 @@ var XDriver = class extends BaseDriver {
 var InstagramDriver = class extends BaseDriver {
   platform = "instagram";
   label = "Instagram";
-  icon = "\u{1F4F7}";
+  // Text fallback; UI renders these inside icon circles
+  icon = "IG";
   postizProvider = "instagram";
   getMaxLength() {
     return 2200;
@@ -467,7 +468,7 @@ var InstagramDriver = class extends BaseDriver {
 var FacebookDriver = class extends BaseDriver {
   platform = "facebook";
   label = "Facebook";
-  icon = "\u{1F4D8}";
+  icon = "f";
   postizProvider = "facebook";
   getMaxLength() {
     return 63206;
@@ -481,7 +482,7 @@ var FacebookDriver = class extends BaseDriver {
 var LinkedInDriver = class extends BaseDriver {
   platform = "linkedin";
   label = "LinkedIn";
-  icon = "\u{1F4BC}";
+  icon = "in";
   postizProvider = "linkedin";
   getMaxLength() {
     return 3e3;
@@ -495,7 +496,7 @@ var LinkedInDriver = class extends BaseDriver {
 var TikTokDriver = class extends BaseDriver {
   platform = "tiktok";
   label = "TikTok";
-  icon = "\u{1F3B5}";
+  icon = "TT";
   postizProvider = "tiktok";
   getMaxLength() {
     return 2200;
@@ -509,7 +510,7 @@ var TikTokDriver = class extends BaseDriver {
 var DiscordDriver = class extends BaseDriver {
   platform = "discord";
   label = "Discord";
-  icon = "\u{1F4AC}";
+  icon = "DS";
   postizProvider = "discord";
   getMaxLength() {
     return 2e3;
@@ -546,7 +547,7 @@ var DiscordDriver = class extends BaseDriver {
 var TelegramDriver = class extends BaseDriver {
   platform = "telegram";
   label = "Telegram";
-  icon = "\u2708\uFE0F";
+  icon = "TG";
   postizProvider = "telegram";
   getMaxLength() {
     return 4096;

package/dist/tabs/content-calendar.js

@@ -230,7 +230,11 @@
         resize: "vertical",
         fontFamily: "inherit",
         fontSize: "0.9rem",
-        outline: "none"
+        outline: "none",
+        // Hard-force LTR to avoid any inherited RTL / bidi overrides in host app
+        direction: "ltr",
+        unicodeBidi: "plaintext",
+        textAlign: "left"
       },
       input: {
         background: "rgba(255,255,255,0.03)",
@@ -342,6 +346,11 @@
       const [modalContent, setModalContent] = useState("");
       const [modalPlatforms, setModalPlatforms] = useState([]);
       const [modalMediaUrl, setModalMediaUrl] = useState("");
+      const [modalShowMedia, setModalShowMedia] = useState(false);
+      const [modalUploading, setModalUploading] = useState(false);
+      const [modalMediaLibrary, setModalMediaLibrary] = useState([]);
+      const [modalSelectedMediaIds, setModalSelectedMediaIds] = useState([]);
+      const modalFileInputRef = useRef(null);
       const [modalSaving, setModalSaving] = useState(false);
       const [modalPublishing, setModalPublishing] = useState(false);
       const [modalError, setModalError] = useState(null);
@@ -374,6 +383,51 @@
         } catch {
         }
       }, [teamId, postizHeaders]);
+      const loadMedia = useCallback(async () => {
+        try {
+          const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}&limit=200`);
+          const json = await res.json();
+          setModalMediaLibrary(Array.isArray(json.data) ? json.data : []);
+        } catch {
+        }
+      }, [teamId]);
+      const handleModalFileUpload = useCallback(async (files) => {
+        if (!files || files.length === 0) return;
+        setModalUploading(true);
+        setModalError(null);
+        try {
+          for (const file of Array.from(files)) {
+            const base64 = await new Promise((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result);
+              reader.onerror = reject;
+              reader.readAsDataURL(file);
+            });
+            const up = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}`, {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ data: base64, filename: file.name, mimeType: file.type })
+            });
+            if (!up.ok) {
+              const err = await up.json().catch(() => ({}));
+              throw new Error(err?.message || `Upload failed (${up.status})`);
+            }
+            const item = await up.json().catch(() => null);
+            if (item?.id) {
+              setModalSelectedMediaIds((prev) => prev.includes(item.id) ? prev : [...prev, item.id]);
+            }
+          }
+          await loadMedia();
+        } catch (e) {
+          setModalError(e?.message || "Upload failed");
+        } finally {
+          setModalUploading(false);
+          if (modalFileInputRef.current) modalFileInputRef.current.value = "";
+        }
+      }, [teamId, loadMedia]);
+      const toggleModalMedia = (id) => {
+        setModalSelectedMediaIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
+      };
       useEffect(() => {
         setLoading(true);
         Promise.all([loadPosts(), loadDrivers()]).finally(() => setLoading(false));
@@ -393,6 +447,9 @@
         setModalContent("");
         setModalPlatforms([]);
         setModalMediaUrl("");
+        setModalShowMedia(false);
+        setModalSelectedMediaIds([]);
+        setModalMediaLibrary([]);
         setModalError(null);
         setModalSuccess(null);
         setModalOpen(true);
@@ -423,7 +480,8 @@
               content: modalContent,
               platforms: modalPlatforms.length > 0 ? modalPlatforms : ["draft"],
               status: modalDate ? "scheduled" : "draft",
-              scheduledAt: modalDate || void 0
+              scheduledAt: modalDate || void 0,
+              mediaIds: modalSelectedMediaIds
             })
           });
           if (!res.ok) throw new Error(`Save failed (${res.status})`);
@@ -451,6 +509,7 @@
               content: modalContent,
               platforms: modalPlatforms,
               scheduledAt: modalDate || void 0,
+              // NOTE: Postiz expects publicly reachable URLs; uploaded library media is local-only for now.
               mediaUrls: modalMediaUrl ? [modalMediaUrl] : void 0
             })
           });
@@ -468,7 +527,8 @@
               content: modalContent,
               platforms: modalPlatforms,
               status: modalDate ? "scheduled" : "published",
-              scheduledAt: modalDate || void 0
+              scheduledAt: modalDate || void 0,
+              mediaIds: modalSelectedMediaIds
             })
           }).catch(() => {
           });
@@ -793,6 +853,7 @@
                 // Textarea
                 h("textarea", {
                   style: s.textarea,
+                  dir: "ltr",
                   value: modalContent,
                   onChange: (e) => setModalContent(e.target.value),
                   placeholder: "Write something \u2026",
@@ -803,8 +864,13 @@
                   "div",
                   { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" } },
                   h("button", {
+                    type: "button",
                     style: { ...s.btnGhost, padding: "0.3rem 0.6rem", fontSize: "0.75rem" },
-                    onClick: () => setModalMediaUrl(modalMediaUrl ? "" : " ")
+                    onClick: async () => {
+                      const next = !modalShowMedia;
+                      setModalShowMedia(next);
+                      if (next) await loadMedia();
+                    }
                   }, "\u{1F5BC} Insert Media"),
                   charLimit && h("span", {
                     style: {
@@ -814,14 +880,158 @@
                     }
                   }, `${modalContent.length}/${charLimit}`)
                 ),
-                // Media URL input
-                modalMediaUrl !== "" && h("input", {
-                  style: s.input,
-                  type: "url",
-                  value: modalMediaUrl.trim(),
-                  onChange: (e) => setModalMediaUrl(e.target.value),
-                  placeholder: "Paste image or video URL\u2026"
-                })
+                // Media panel (upload + library + URL)
+                modalShowMedia && h(
+                  "div",
+                  {
+                    style: {
+                      background: "rgba(255,255,255,0.02)",
+                      border: "1px solid var(--ck-border-subtle)",
+                      borderRadius: "10px",
+                      padding: "0.75rem"
+                    }
+                  },
+                  h(
+                    "div",
+                    { style: { display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "0.5rem", flexWrap: "wrap" } },
+                    h("input", {
+                      ref: modalFileInputRef,
+                      type: "file",
+                      accept: "image/*,video/*",
+                      multiple: true,
+                      style: { display: "none" },
+                      onChange: (e) => void handleModalFileUpload(e.target.files)
+                    }),
+                    h("button", {
+                      type: "button",
+                      style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem", opacity: modalUploading ? 0.7 : 1 },
+                      onClick: () => modalFileInputRef.current?.click(),
+                      disabled: modalUploading
+                    }, modalUploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
+                    h("button", {
+                      type: "button",
+                      style: { ...s.btnGhost, padding: "0.35rem 0.6rem", fontSize: "0.75rem" },
+                      onClick: () => setModalShowMedia(false)
+                    }, "Done")
+                  ),
+                  h("input", {
+                    style: s.input,
+                    type: "url",
+                    value: modalMediaUrl,
+                    onChange: (e) => setModalMediaUrl(e.target.value),
+                    placeholder: "Paste a public image/video URL (needed for Postiz)\u2026"
+                  }),
+                  // Selected media strip
+                  modalSelectedMediaIds.length > 0 && h(
+                    "div",
+                    { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "0.65rem" } },
+                    ...modalSelectedMediaIds.map((id) => {
+                      const item = modalMediaLibrary.find((m) => m.id === id);
+                      if (!item) return null;
+                      return h(
+                        "div",
+                        {
+                          key: id,
+                          style: {
+                            position: "relative",
+                            width: "64px",
+                            height: "64px",
+                            borderRadius: "8px",
+                            overflow: "hidden",
+                            border: "2px solid rgba(127,90,240,0.55)"
+                          }
+                        },
+                        item.mimeType?.startsWith("video/") ? h("div", {
+                          style: { width: "100%", height: "100%", background: "rgba(0,0,0,0.35)", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }
+                        }, "\u{1F3A5}") : h("img", { src: item.thumbnailDataUrl, style: { width: "100%", height: "100%", objectFit: "cover" } }),
+                        h("button", {
+                          type: "button",
+                          onClick: () => toggleModalMedia(id),
+                          style: {
+                            position: "absolute",
+                            top: "2px",
+                            right: "2px",
+                            background: "rgba(0,0,0,0.6)",
+                            border: "none",
+                            borderRadius: "50%",
+                            width: "18px",
+                            height: "18px",
+                            color: "white",
+                            fontSize: "0.65rem",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center"
+                          }
+                        }, "\u2715")
+                      );
+                    })
+                  ),
+                  // Library grid
+                  h(
+                    "div",
+                    { style: { marginTop: "0.65rem" } },
+                    h("div", { style: { fontSize: "0.75rem", fontWeight: 600, color: "var(--ck-text-secondary)", marginBottom: "0.4rem" } }, "Media Library"),
+                    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(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(86px, 1fr))",
+                          gap: "0.5rem",
+                          maxHeight: "220px",
+                          overflowY: "auto",
+                          paddingRight: "4px"
+                        }
+                      },
+                      ...modalMediaLibrary.map((item) => {
+                        const selected = modalSelectedMediaIds.includes(item.id);
+                        const thumb = item.thumbnailDataUrl;
+                        return h(
+                          "div",
+                          {
+                            key: item.id,
+                            onClick: () => toggleModalMedia(item.id),
+                            style: {
+                              position: "relative",
+                              width: "100%",
+                              paddingTop: "100%",
+                              borderRadius: "10px",
+                              overflow: "hidden",
+                              cursor: "pointer",
+                              border: selected ? "2px solid rgba(127,90,240,0.75)" : "1px solid var(--ck-border-subtle)",
+                              boxShadow: selected ? "0 0 10px rgba(127,90,240,0.25)" : "none",
+                              background: "rgba(0,0,0,0.25)"
+                            }
+                          },
+                          item.mimeType?.startsWith("video/") ? h("div", {
+                            style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: "1.4rem" }
+                          }, "\u{1F3A5}") : h("img", {
+                            src: thumb,
+                            style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }
+                          }),
+                          selected && h("div", {
+                            style: {
+                              position: "absolute",
+                              top: "6px",
+                              right: "6px",
+                              width: "20px",
+                              height: "20px",
+                              borderRadius: "50%",
+                              background: "rgba(127,90,240,0.9)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "0.75rem",
+                              fontWeight: 800
+                            }
+                          }, "\u2713")
+                        );
+                      })
+                    )
+                  )
+                )
               ),
               // Right — social-post-style preview
               h(
@@ -890,14 +1100,26 @@
                       style: { color: "var(--ck-text-tertiary)", fontSize: "0.85rem", fontStyle: "italic", padding: "1.5rem 0", textAlign: "center" }
                     }, "Start writing to see a preview")
                   ),
-                  // Media preview
-                  modalMediaUrl && h("img", {
-                    src: modalMediaUrl,
-                    style: { width: "100%", display: "block" },
-                    onError: (e) => {
-                      e.target.style.display = "none";
-                    }
-                  }),
+                  // Media preview (selected library media first, then URL)
+                  (modalSelectedMediaIds.length > 0 || modalMediaUrl) && h(
+                    "div",
+                    null,
+                    ...modalSelectedMediaIds.slice(0, 1).map((id) => {
+                      const item = modalMediaLibrary.find((m) => m.id === id);
+                      if (!item) return null;
+                      return item.mimeType?.startsWith("video/") ? h("div", {
+                        key: id,
+                        style: { background: "rgba(0,0,0,0.4)", padding: "1.25rem", textAlign: "center", color: "var(--ck-text-secondary)" }
+                      }, "\u{1F3A5} Video") : h("img", { key: id, src: item.thumbnailDataUrl, style: { width: "100%", display: "block" } });
+                    }),
+                    modalMediaUrl && h("img", {
+                      src: modalMediaUrl,
+                      style: { width: "100%", display: "block" },
+                      onError: (e) => {
+                        e.target.style.display = "none";
+                      }
+                    })
+                  ),
                   // Engagement bar
                   h(
                     "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen-plugin-marketing",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [