@jiggai/kitchen-plugin-marketing 0.5.0 → 0.5.2

package/db/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1743811200000,
+      "tag": "0001_initial",
+      "breakpoints": true
+    }
+  ]
+}

package/dist/api/handler.js

@@ -219,7 +219,20 @@ function initializeDatabase(teamId) {
     const migrationsDir = (0, import_path.join)(PLUGIN_ROOT, "db", "migrations");
     (0, import_migrator.migrate)(db, { migrationsFolder: migrationsDir });
   } catch (error) {
-    console.warn("Migration warning:", error?.message);
+    try {
+      const sqlPath = (0, import_path.join)(PLUGIN_ROOT, "db", "migrations", "0001_initial.sql");
+      if ((0, import_fs.existsSync)(sqlPath)) {
+        const sql2 = require("fs").readFileSync(sqlPath, "utf8");
+        const statements = sql2.split(";").map((s) => s.trim()).filter((s) => s.length > 0);
+        for (const stmt of statements) {
+          try {
+            sqlite.exec(stmt + ";");
+          } catch {
+          }
+        }
+      }
+    } catch {
+    }
   }
   return { db, sqlite };
 }
@@ -440,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;
@@ -454,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;
@@ -468,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;
@@ -482,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;
@@ -496,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;
@@ -533,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/db/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1743811200000,
+      "tag": "0001_initial",
+      "breakpoints": true
+    }
+  ]
+}

package/dist/index.js

@@ -204,7 +204,20 @@ function initializeDatabase(teamId) {
     const migrationsDir = (0, import_path.join)(PLUGIN_ROOT, "db", "migrations");
     (0, import_migrator.migrate)(db, { migrationsFolder: migrationsDir });
   } catch (error) {
-    console.warn("Migration warning:", error?.message);
+    try {
+      const sqlPath = (0, import_path.join)(PLUGIN_ROOT, "db", "migrations", "0001_initial.sql");
+      if ((0, import_fs.existsSync)(sqlPath)) {
+        const sql2 = require("fs").readFileSync(sqlPath, "utf8");
+        const statements = sql2.split(";").map((s) => s.trim()).filter((s) => s.length > 0);
+        for (const stmt of statements) {
+          try {
+            sqlite.exec(stmt + ";");
+          } catch {
+          }
+        }
+      }
+    } catch {
+    }
   }
   return { db, sqlite };
 }

package/dist/tabs/content-calendar.js

@@ -185,9 +185,9 @@
         background: "var(--ck-bg-base, #0b0c10)",
         border: "1px solid var(--ck-border-subtle)",
         borderRadius: "14px",
-        width: "95vw",
-        maxWidth: "900px",
-        maxHeight: "90vh",
+        width: "96vw",
+        maxWidth: "1200px",
+        maxHeight: "92vh",
         overflow: "auto",
         display: "flex",
         flexDirection: "column"
@@ -201,7 +201,7 @@
       },
       modalBody: { display: "flex", flex: 1, minHeight: 0 },
       modalLeft: { flex: 1, padding: "1rem 1.25rem", borderRight: "1px solid var(--ck-border-subtle)", display: "flex", flexDirection: "column", gap: "0.75rem" },
-      modalRight: { width: "280px", padding: "1rem 1.25rem", flexShrink: 0 },
+      modalRight: { width: "380px", padding: "1rem 1.25rem", flexShrink: 0 },
       modalFooter: {
         display: "flex",
         alignItems: "center",
@@ -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,21 +880,283 @@
                     }
                   }, `${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 — preview
+              // Right — social-post-style preview
               h(
                 "div",
                 { style: s.modalRight },
-                h("div", { style: { fontWeight: 600, fontSize: "0.9rem", color: "var(--ck-text-primary)", marginBottom: "0.5rem" } }, "Post Preview"),
-                modalContent.trim() ? h("div", { style: { ...s.previewPanel, whiteSpace: "pre-wrap", fontSize: "0.85rem", color: "var(--ck-text-secondary)" } }, modalContent) : h("div", { style: { color: "var(--ck-text-tertiary)", fontSize: "0.85rem" } }, "Start writing your post for a preview")
+                h("div", { style: { fontWeight: 600, fontSize: "0.85rem", color: "var(--ck-text-secondary)", marginBottom: "0.75rem" } }, "Post Preview"),
+                h(
+                  "div",
+                  {
+                    style: {
+                      background: "rgba(22,22,28,0.95)",
+                      borderRadius: "12px",
+                      border: "1px solid rgba(255,255,255,0.08)",
+                      overflow: "hidden"
+                    }
+                  },
+                  // Header
+                  h(
+                    "div",
+                    { style: { display: "flex", alignItems: "center", gap: "0.65rem", padding: "0.85rem 1rem 0" } },
+                    h("div", {
+                      style: {
+                        width: "40px",
+                        height: "40px",
+                        borderRadius: "50%",
+                        background: "rgba(127,90,240,0.25)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: "1.1rem",
+                        color: "rgba(127,90,240,0.9)",
+                        flexShrink: 0
+                      }
+                    }, "\u{1F464}"),
+                    h(
+                      "div",
+                      null,
+                      h(
+                        "div",
+                        { style: { display: "flex", alignItems: "center", gap: "0.3rem" } },
+                        h("span", { style: { fontWeight: 700, fontSize: "0.9rem", color: "var(--ck-text-primary)" } }, "Your Brand"),
+                        h("span", { style: { color: "rgba(99,179,237,0.9)", fontSize: "0.85rem" } }, "\u2713")
+                      ),
+                      h(
+                        "div",
+                        { style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" } },
+                        modalDate ? new Date(modalDate).toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "Just now"
+                      )
+                    )
+                  ),
+                  // Body
+                  h(
+                    "div",
+                    { style: { padding: "0.65rem 1rem 0.75rem" } },
+                    modalContent.trim() ? h("div", {
+                      style: {
+                        whiteSpace: "pre-wrap",
+                        fontSize: "0.9rem",
+                        color: "var(--ck-text-primary)",
+                        lineHeight: "1.5",
+                        maxHeight: "300px",
+                        overflowY: "auto",
+                        wordBreak: "break-word"
+                      }
+                    }, modalContent) : h("div", {
+                      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 (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",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-around",
+                        padding: "0.6rem 1rem",
+                        borderTop: "1px solid rgba(255,255,255,0.06)",
+                        fontSize: "0.8rem",
+                        color: "var(--ck-text-tertiary)"
+                      }
+                    },
+                    h("span", null, "\u2764\uFE0F 0"),
+                    h("span", null, "\u{1F4AC} 0"),
+                    h("span", null, "\u{1F501} 0"),
+                    h("span", null, "\u{1F4CA} 0")
+                  )
+                ),
+                // Platform pills
+                modalPlatforms.length > 0 && h(
+                  "div",
+                  {
+                    style: { display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.65rem" }
+                  },
+                  ...modalPlatforms.map((pl) => h("span", {
+                    key: pl,
+                    style: {
+                      background: "rgba(127,90,240,0.12)",
+                      border: "1px solid rgba(127,90,240,0.25)",
+                      borderRadius: "999px",
+                      padding: "0.1rem 0.4rem",
+                      fontSize: "0.7rem",
+                      color: "var(--ck-text-secondary)"
+                    }
+                  }, pl))
+                )
               )
             ),
             // Footer

package/dist/tabs/content-library.js

@@ -683,118 +683,181 @@
               error && h("div", { className: "text-xs", style: { color: "rgba(248,113,113,0.95)" } }, error),
               success && h("div", { className: "text-xs", style: { color: "rgba(74,222,128,0.9)" } }, success)
             ),
-            // RIGHT — live preview pane
+            // RIGHT — social-post-style preview
             h(
               "div",
               {
                 style: {
-                  width: "320px",
+                  width: "380px",
                   flexShrink: 0,
-                  background: "rgba(255,255,255,0.02)",
+                  background: "rgba(0,0,0,0.25)",
                   border: "1px solid var(--ck-border-subtle)",
-                  borderRadius: "10px",
-                  padding: "1rem",
+                  borderRadius: "16px",
+                  padding: "1.25rem",
                   display: "flex",
                   flexDirection: "column",
                   alignSelf: "flex-start"
                 }
               },
-              h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Post Preview"),
-              // Selected platforms
+              h("div", {
+                style: { fontSize: "0.85rem", fontWeight: 600, color: "var(--ck-text-secondary)", marginBottom: "1rem" }
+              }, "Post Preview"),
+              // Social post card
+              h(
+                "div",
+                {
+                  style: {
+                    background: "rgba(22,22,28,0.95)",
+                    borderRadius: "12px",
+                    border: "1px solid rgba(255,255,255,0.08)",
+                    overflow: "hidden"
+                  }
+                },
+                // Post header (avatar + name + handle)
+                h(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.65rem",
+                      padding: "0.85rem 1rem 0"
+                    }
+                  },
+                  // Avatar circle
+                  h("div", {
+                    style: {
+                      width: "40px",
+                      height: "40px",
+                      borderRadius: "50%",
+                      background: "rgba(127,90,240,0.25)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "1.1rem",
+                      color: "rgba(127,90,240,0.9)",
+                      flexShrink: 0
+                    }
+                  }, "\u{1F464}"),
+                  h(
+                    "div",
+                    null,
+                    h(
+                      "div",
+                      { style: { display: "flex", alignItems: "center", gap: "0.3rem" } },
+                      h("span", {
+                        style: { fontWeight: 700, fontSize: "0.9rem", color: "var(--ck-text-primary)" }
+                      }, "Your Brand"),
+                      h("span", { style: { color: "rgba(99,179,237,0.9)", fontSize: "0.85rem" } }, "\u2713")
+                    ),
+                    h("div", {
+                      style: { fontSize: "0.75rem", color: "var(--ck-text-tertiary)" }
+                    }, scheduledAt ? `Scheduled \xB7 ${new Date(scheduledAt).toLocaleDateString(void 0, { month: "short", day: "numeric" })}` : "Just now")
+                  )
+                ),
+                // Post body
+                h(
+                  "div",
+                  { style: { padding: "0.65rem 1rem 0.75rem" } },
+                  content.trim() ? h("div", {
+                    style: {
+                      whiteSpace: "pre-wrap",
+                      fontSize: "0.9rem",
+                      color: "var(--ck-text-primary)",
+                      lineHeight: "1.5",
+                      maxHeight: "260px",
+                      overflowY: "auto",
+                      wordBreak: "break-word"
+                    }
+                  }, content) : h("div", {
+                    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
+                (selectedMediaIds.length > 0 || mediaUrl && showMedia) && h(
+                  "div",
+                  {
+                    style: { padding: "0 0 0" }
+                  },
+                  ...selectedMediaIds.map((id) => {
+                    const item = mediaLibrary.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.5rem",
+                        textAlign: "center",
+                        color: "var(--ck-text-secondary)",
+                        fontSize: "0.85rem"
+                      }
+                    }, `\u{1F3A5} ${item.filename}`) : h("img", {
+                      key: id,
+                      src: item.thumbnailDataUrl || item.url,
+                      style: { width: "100%", display: "block" }
+                    });
+                  }),
+                  mediaUrl && showMedia && h("img", {
+                    src: mediaUrl,
+                    style: { width: "100%", display: "block" },
+                    onError: (e) => {
+                      e.target.style.display = "none";
+                    }
+                  })
+                ),
+                // Engagement bar (fake social actions)
+                h(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-around",
+                      padding: "0.6rem 1rem",
+                      borderTop: "1px solid rgba(255,255,255,0.06)",
+                      fontSize: "0.8rem",
+                      color: "var(--ck-text-tertiary)"
+                    }
+                  },
+                  h("span", null, "\u2764\uFE0F 0"),
+                  h("span", null, "\u{1F4AC} 0"),
+                  h("span", null, "\u{1F501} 0"),
+                  h("span", null, "\u{1F4CA} 0")
+                )
+              ),
+              // Platform pills below card
               selectedPlatforms.length > 0 && h(
                 "div",
-                { className: "flex flex-wrap gap-1 mb-3" },
+                {
+                  style: { display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.75rem" }
+                },
                 ...selectedPlatforms.map((pl) => {
                   const drv = drivers.find((d) => d.platform === pl);
                   return h("span", {
                     key: pl,
                     style: {
-                      background: "rgba(127,90,240,0.15)",
-                      border: "1px solid rgba(127,90,240,0.3)",
+                      background: "rgba(127,90,240,0.12)",
+                      border: "1px solid rgba(127,90,240,0.25)",
                       borderRadius: "999px",
-                      padding: "0.12rem 0.45rem",
-                      fontSize: "0.72rem",
+                      padding: "0.1rem 0.4rem",
+                      fontSize: "0.7rem",
                       color: "var(--ck-text-secondary)"
                     }
                   }, drv ? `${drv.icon} ${drv.label}` : pl);
                 })
               ),
-              // Scheduling info
-              scheduledAt && h("div", {
-                className: "text-xs mb-3",
-                style: { color: "rgba(251,191,36,0.85)" }
-              }, `\u23F1 Scheduled: ${new Date(scheduledAt).toLocaleString()}`),
-              // Content preview
-              content.trim() ? h("div", {
-                style: {
-                  background: "rgba(255,255,255,0.03)",
-                  border: "1px solid var(--ck-border-subtle)",
-                  borderRadius: "10px",
-                  padding: "0.85rem",
-                  whiteSpace: "pre-wrap",
-                  fontSize: "0.85rem",
-                  color: "var(--ck-text-primary)",
-                  lineHeight: "1.55",
-                  maxHeight: "300px",
-                  overflowY: "auto",
-                  wordBreak: "break-word"
-                }
-              }, content) : h("div", {
-                style: {
-                  color: "var(--ck-text-tertiary)",
-                  fontSize: "0.85rem",
-                  fontStyle: "italic",
-                  padding: "2rem 0.5rem",
-                  textAlign: "center"
-                }
-              }, "Start writing to see a preview"),
-              // Media preview (selected library items + URL)
-              (selectedMediaIds.length > 0 || mediaUrl && showMedia) && h(
-                "div",
-                { className: "mt-3 space-y-2" },
-                ...selectedMediaIds.map((id) => {
-                  const item = mediaLibrary.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.3)",
-                      borderRadius: "8px",
-                      border: "1px solid var(--ck-border-subtle)",
-                      padding: "1rem",
-                      textAlign: "center",
-                      color: "var(--ck-text-secondary)",
-                      fontSize: "0.8rem"
-                    }
-                  }, `\u{1F3A5} ${item.filename}`) : h("img", {
-                    key: id,
-                    src: item.thumbnailDataUrl || item.url,
-                    style: {
-                      maxWidth: "100%",
-                      borderRadius: "8px",
-                      border: "1px solid var(--ck-border-subtle)"
-                    }
-                  });
-                }),
-                mediaUrl && showMedia && h("img", {
-                  src: mediaUrl,
-                  style: {
-                    maxWidth: "100%",
-                    borderRadius: "8px",
-                    border: "1px solid var(--ck-border-subtle)"
-                  },
-                  onError: (e) => {
-                    e.target.style.display = "none";
-                  }
-                })
-              ),
               // Character limit bar
               charLimit && content.length > 0 && h(
                 "div",
-                { className: "mt-3" },
+                { style: { marginTop: "0.75rem" } },
                 h(
                   "div",
-                  { style: { height: "4px", borderRadius: "2px", background: "rgba(255,255,255,0.06)", overflow: "hidden" } },
+                  { style: { height: "3px", borderRadius: "2px", background: "rgba(255,255,255,0.06)", overflow: "hidden" } },
                   h("div", {
                     style: {
                       height: "100%",
@@ -806,10 +869,11 @@
                   })
                 ),
                 h("div", {
-                  className: "text-xs mt-1",
                   style: {
-                    color: content.length > charLimit ? "rgba(248,113,113,0.9)" : "var(--ck-text-tertiary)",
-                    textAlign: "right"
+                    fontSize: "0.7rem",
+                    marginTop: "0.2rem",
+                    textAlign: "right",
+                    color: content.length > charLimit ? "rgba(248,113,113,0.9)" : "var(--ck-text-tertiary)"
                   }
                 }, `${content.length} / ${charLimit}`)
               )

package/package.json

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