@jiggai/kitchen-plugin-marketing 0.4.1 → 0.5.1

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 };
 }
@@ -1002,8 +1015,187 @@ async function handleRequest(req, ctx) {
       return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
     }
   }
+  const MEDIA_DIR = (0, import_path2.join)((0, import_os2.homedir)(), ".openclaw", "kitchen", "plugins", "marketing", "media");
+  function ensureMediaDir(team) {
+    const dir = (0, import_path2.join)(MEDIA_DIR, team);
+    (0, import_fs2.mkdirSync)(dir, { recursive: true });
+    return dir;
+  }
+  if (req.path === "/media" && req.method === "POST") {
+    try {
+      const body = req.body;
+      if (!body?.data) return apiError(400, "VALIDATION_ERROR", "data (base64) is required");
+      let base64 = body.data;
+      let detectedMime = body.mimeType || "application/octet-stream";
+      const dataUrlMatch = base64.match(/^data:([^;]+);base64,(.+)$/);
+      if (dataUrlMatch) {
+        detectedMime = dataUrlMatch[1];
+        base64 = dataUrlMatch[2];
+      }
+      const buf = Buffer.from(base64, "base64");
+      const id = (0, import_crypto2.randomUUID)();
+      const ext = (0, import_path2.extname)(body.filename || "") || mimeToExt(detectedMime);
+      const storedFilename = `${id}${ext}`;
+      const dir = ensureMediaDir(teamId);
+      const filePath = (0, import_path2.join)(dir, storedFilename);
+      (0, import_fs2.writeFileSync)(filePath, buf);
+      const { db } = initializeDatabase(teamId);
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const userId = getUserId(req);
+      const record = {
+        id,
+        teamId,
+        filename: storedFilename,
+        originalName: body.filename || storedFilename,
+        mimeType: detectedMime,
+        size: buf.length,
+        width: null,
+        height: null,
+        alt: body.alt || null,
+        tags: JSON.stringify(body.tags || []),
+        url: `/api/plugins/marketing/media/${id}/file?team=${encodeURIComponent(teamId)}`,
+        thumbnailUrl: null,
+        createdAt: now,
+        createdBy: userId
+      };
+      await db.insert(media).values(record);
+      return {
+        status: 201,
+        data: {
+          id,
+          filename: record.originalName,
+          mimeType: detectedMime,
+          size: buf.length,
+          url: record.url,
+          alt: record.alt,
+          tags: body.tags || [],
+          createdAt: now
+        }
+      };
+    } catch (error) {
+      return apiError(500, "UPLOAD_ERROR", error?.message || "Upload failed");
+    }
+  }
+  if (req.path === "/media" && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const { limit, offset } = parsePagination(req.query);
+      const conditions = [(0, import_drizzle_orm2.eq)(media.teamId, teamId)];
+      if (req.query.mimeType) {
+        conditions.push((0, import_drizzle_orm2.like)(media.mimeType, `${req.query.mimeType}%`));
+      }
+      const totalResult = await db.select({ count: import_drizzle_orm2.sql`count(*)` }).from(media).where((0, import_drizzle_orm2.and)(...conditions));
+      const total = totalResult[0]?.count ?? 0;
+      const items = await db.select().from(media).where((0, import_drizzle_orm2.and)(...conditions)).orderBy((0, import_drizzle_orm2.desc)(media.createdAt)).limit(limit).offset(offset);
+      const data = items.map((m) => {
+        let thumbnailDataUrl;
+        if (m.mimeType.startsWith("image/")) {
+          const fp = (0, import_path2.join)(MEDIA_DIR, teamId, m.filename);
+          if ((0, import_fs2.existsSync)(fp)) {
+            const raw = (0, import_fs2.readFileSync)(fp);
+            if (raw.length < 2 * 1024 * 1024) {
+              thumbnailDataUrl = `data:${m.mimeType};base64,${raw.toString("base64")}`;
+            }
+          }
+        }
+        return {
+          id: m.id,
+          filename: m.originalName,
+          mimeType: m.mimeType,
+          size: m.size,
+          url: m.url,
+          thumbnailDataUrl,
+          alt: m.alt,
+          tags: JSON.parse(m.tags || "[]"),
+          createdAt: m.createdAt
+        };
+      });
+      return {
+        status: 200,
+        data: { data, total, offset, limit, hasMore: offset + limit < total }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to list media");
+    }
+  }
+  const mediaIdMatch = req.path.match(/^\/media\/([a-f0-9-]+)$/);
+  if (mediaIdMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      let dataUrl;
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if ((0, import_fs2.existsSync)(fp)) {
+        const raw = (0, import_fs2.readFileSync)(fp);
+        dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      }
+      return {
+        status: 200,
+        data: {
+          id: item.id,
+          filename: item.originalName,
+          mimeType: item.mimeType,
+          size: item.size,
+          url: item.url,
+          dataUrl,
+          alt: item.alt,
+          tags: JSON.parse(item.tags || "[]"),
+          createdAt: item.createdAt
+        }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to get media");
+    }
+  }
+  const mediaFileMatch = req.path.match(/^\/media\/([a-f0-9-]+)\/file$/);
+  if (mediaFileMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaFileMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if (!(0, import_fs2.existsSync)(fp)) return apiError(404, "NOT_FOUND", "File missing from disk");
+      const raw = (0, import_fs2.readFileSync)(fp);
+      const dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      return { status: 200, data: { dataUrl, mimeType: item.mimeType, filename: item.originalName } };
+    } catch (error) {
+      return apiError(500, "FILE_ERROR", error?.message || "Failed to serve file");
+    }
+  }
+  if (mediaIdMatch && req.method === "DELETE") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      try {
+        (0, import_fs2.unlinkSync)(fp);
+      } catch {
+      }
+      await db.delete(media).where((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]));
+      return { status: 200, data: { deleted: true, id: mediaIdMatch[1] } };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to delete media");
+    }
+  }
   return apiError(501, "NOT_IMPLEMENTED", `No handler for ${req.method} ${req.path}`);
 }
+function mimeToExt(mime) {
+  const map = {
+    "image/jpeg": ".jpg",
+    "image/png": ".png",
+    "image/gif": ".gif",
+    "image/webp": ".webp",
+    "image/svg+xml": ".svg",
+    "video/mp4": ".mp4",
+    "video/webm": ".webm",
+    "video/quicktime": ".mov",
+    "audio/mpeg": ".mp3",
+    "audio/wav": ".wav"
+  };
+  return map[mime] || "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   handleRequest

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",
@@ -823,12 +823,118 @@
                   placeholder: "Paste image or video URL\u2026"
                 })
               ),
-              // 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
+                  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

@@ -120,6 +120,11 @@
       const [scheduledAt, setScheduledAt] = useState("");
       const [mediaUrl, setMediaUrl] = useState("");
       const [showMedia, setShowMedia] = useState(false);
+      const [mediaLibrary, setMediaLibrary] = useState([]);
+      const [showMediaPicker, setShowMediaPicker] = useState(false);
+      const [uploading, setUploading] = useState(false);
+      const [selectedMediaIds, setSelectedMediaIds] = useState([]);
+      const fileInputRef = useRef(null);
       const successTimeout = useRef(null);
       const postizHeaders = useMemo(() => {
         try {
@@ -154,10 +159,64 @@
         } catch {
         }
       }, [apiBase, teamId]);
+      const loadMedia = useCallback(async () => {
+        try {
+          const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}&limit=100`);
+          const json = await res.json();
+          setMediaLibrary(Array.isArray(json.data) ? json.data : []);
+        } catch {
+        }
+      }, [apiBase, teamId]);
+      const handleFileUpload = useCallback(async (files) => {
+        if (!files || files.length === 0) return;
+        setUploading(true);
+        setError(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 res = 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 (!res.ok) {
+              const err = await res.json().catch(() => ({}));
+              throw new Error(err.message || `Upload failed (${res.status})`);
+            }
+            const item = await res.json();
+            setSelectedMediaIds((prev) => [...prev, item.id]);
+          }
+          await loadMedia();
+          showSuccess(`Uploaded ${files.length} file${files.length > 1 ? "s" : ""}`);
+        } catch (e) {
+          setError(e?.message || "Upload failed");
+        } finally {
+          setUploading(false);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const deleteMedia = useCallback(async (id) => {
+        try {
+          await fetch(`${apiBase}/media/${id}?team=${encodeURIComponent(teamId)}`, { method: "DELETE" });
+          setSelectedMediaIds((prev) => prev.filter((x) => x !== id));
+          await loadMedia();
+        } catch {
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const toggleMediaSelect = (id) => {
+        setSelectedMediaIds(
+          (prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+        );
+      };
       useEffect(() => {
         setLoading(true);
-        Promise.all([loadDrivers(), loadPosts()]).finally(() => setLoading(false));
-      }, [loadDrivers, loadPosts]);
+        Promise.all([loadDrivers(), loadPosts(), loadMedia()]).finally(() => setLoading(false));
+      }, [loadDrivers, loadPosts, loadMedia]);
       const connectedDrivers = useMemo(() => drivers.filter((d) => d.connected), [drivers]);
       const disconnectedDrivers = useMemo(() => drivers.filter((d) => !d.connected), [drivers]);
       const togglePlatform = (platform) => {
@@ -348,7 +407,7 @@
                   )
                 )
               ),
-              // Media URL (collapsible)
+              // Media (upload, URL, or library picker)
               h(
                 "div",
                 null,
@@ -359,14 +418,228 @@
                 }, showMedia ? "\u2212 Media" : "+ Media"),
                 showMedia && h(
                   "div",
-                  { className: "mt-2" },
-                  h("input", {
-                    type: "url",
-                    value: mediaUrl,
-                    onChange: (e) => setMediaUrl(e.target.value),
-                    placeholder: "Paste image or video URL\u2026",
-                    style: t.input
-                  })
+                  { className: "mt-2 space-y-2" },
+                  // Upload + URL row
+                  h(
+                    "div",
+                    { className: "flex gap-2 items-center" },
+                    h("input", {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: "image/*,video/*",
+                      multiple: true,
+                      style: { display: "none" },
+                      onChange: (e) => handleFileUpload(e.target.files)
+                    }),
+                    h("button", {
+                      type: "button",
+                      onClick: () => fileInputRef.current?.click(),
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" },
+                      disabled: uploading
+                    }, uploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
+                    h("button", {
+                      type: "button",
+                      onClick: () => {
+                        loadMedia();
+                        setShowMediaPicker(!showMediaPicker);
+                      },
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" }
+                    }, showMediaPicker ? "Hide Library" : "\u{1F5BC}\uFE0F Library"),
+                    h("input", {
+                      type: "url",
+                      value: mediaUrl,
+                      onChange: (e) => setMediaUrl(e.target.value),
+                      placeholder: "\u2026or paste a URL",
+                      style: { ...t.input, flex: 1 }
+                    })
+                  ),
+                  // Selected media thumbnails
+                  selectedMediaIds.length > 0 && h(
+                    "div",
+                    { className: "flex flex-wrap gap-2" },
+                    ...selectedMediaIds.map((id) => {
+                      const item = mediaLibrary.find((m) => m.id === id);
+                      if (!item) return null;
+                      return h(
+                        "div",
+                        {
+                          key: id,
+                          style: {
+                            position: "relative",
+                            width: "72px",
+                            height: "72px",
+                            borderRadius: "8px",
+                            overflow: "hidden",
+                            border: "2px solid rgba(127,90,240,0.5)"
+                          }
+                        },
+                        item.mimeType?.startsWith("video/") ? h("div", {
+                          style: {
+                            width: "100%",
+                            height: "100%",
+                            background: "rgba(0,0,0,0.4)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "white",
+                            fontSize: "1.2rem"
+                          }
+                        }, "\u{1F3A5}") : h("img", {
+                          src: item.thumbnailDataUrl || item.url,
+                          style: { width: "100%", height: "100%", objectFit: "cover" }
+                        }),
+                        h("button", {
+                          type: "button",
+                          onClick: () => toggleMediaSelect(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",
+                            lineHeight: "1"
+                          }
+                        }, "\u2715")
+                      );
+                    })
+                  ),
+                  // Media library picker grid
+                  showMediaPicker && h(
+                    "div",
+                    {
+                      style: {
+                        background: "rgba(255,255,255,0.02)",
+                        border: "1px solid var(--ck-border-subtle)",
+                        borderRadius: "10px",
+                        padding: "0.75rem",
+                        maxHeight: "260px",
+                        overflowY: "auto"
+                      }
+                    },
+                    h(
+                      "div",
+                      { className: "text-xs font-medium mb-2", style: t.faint },
+                      `Media Library (${mediaLibrary.length} items)`
+                    ),
+                    mediaLibrary.length === 0 ? h("div", { className: "text-xs py-4 text-center", style: t.faint }, "No media yet. Upload some files!") : h(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                          gap: "0.5rem"
+                        }
+                      },
+                      ...mediaLibrary.map((item) => {
+                        const isSelected = selectedMediaIds.includes(item.id);
+                        return h(
+                          "div",
+                          {
+                            key: item.id,
+                            onClick: () => toggleMediaSelect(item.id),
+                            style: {
+                              position: "relative",
+                              cursor: "pointer",
+                              width: "100%",
+                              paddingTop: "100%",
+                              borderRadius: "8px",
+                              overflow: "hidden",
+                              border: isSelected ? "2px solid rgba(127,90,240,0.7)" : "1px solid var(--ck-border-subtle)",
+                              boxShadow: isSelected ? "0 0 8px rgba(127,90,240,0.3)" : "none"
+                            }
+                          },
+                          item.mimeType?.startsWith("video/") ? h("div", {
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              background: "rgba(0,0,0,0.4)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "1.5rem"
+                            }
+                          }, "\u{1F3A5}") : h("img", {
+                            src: item.thumbnailDataUrl || item.url,
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover"
+                            }
+                          }),
+                          isSelected && h("div", {
+                            style: {
+                              position: "absolute",
+                              top: "4px",
+                              right: "4px",
+                              background: "rgba(127,90,240,0.85)",
+                              borderRadius: "50%",
+                              width: "20px",
+                              height: "20px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "0.7rem",
+                              fontWeight: "700"
+                            }
+                          }, "\u2713"),
+                          h("button", {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              deleteMedia(item.id);
+                            },
+                            style: {
+                              position: "absolute",
+                              bottom: "4px",
+                              right: "4px",
+                              background: "rgba(220,38,38,0.7)",
+                              border: "none",
+                              borderRadius: "50%",
+                              width: "18px",
+                              height: "18px",
+                              color: "white",
+                              fontSize: "0.6rem",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              opacity: "0.6",
+                              lineHeight: "1"
+                            },
+                            title: "Delete from library"
+                          }, "\u{1F5D1}"),
+                          h("div", {
+                            style: {
+                              position: "absolute",
+                              bottom: "0",
+                              left: "0",
+                              right: "0",
+                              background: "rgba(0,0,0,0.6)",
+                              padding: "2px 4px",
+                              fontSize: "0.55rem",
+                              color: "rgba(255,255,255,0.8)",
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            }
+                          }, item.filename)
+                        );
+                      })
+                    )
+                  )
                 )
               ),
               // Schedule (only if any selected platform supports it)
@@ -410,94 +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
-              mediaUrl && showMedia && h(
-                "div",
-                { className: "mt-3" },
-                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%",
@@ -509,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.4.1",
+  "version": "0.5.1",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [