@jiggai/kitchen-plugin-marketing 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,61 +1,81 @@
1
1
  (() => {
2
2
  // src/tabs/accounts.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
6
- const s = {
7
- page: "padding:2rem;max-width:1200px;margin:0 auto",
8
- h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
9
- card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
10
- cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:1rem",
11
- muted: "color:var(--ck-text-secondary);font-size:0.9rem",
12
- mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem",
13
- banner: "background:var(--ck-bg-glass);border:1px solid rgba(237,199,80,0.25);border-radius:14px;padding:1.25rem;color:rgba(237,199,80,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
14
- platformGrid: "display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.5rem",
15
- platformBtn: "border:1px solid var(--ck-border-subtle);border-radius:12px;padding:1.25rem 1rem;cursor:pointer;text-align:center;transition:all 0.15s;background:var(--ck-bg-glass);backdrop-filter:blur(18px)",
16
- platformIcon: "font-size:1.75rem;margin-bottom:0.5rem",
17
- platformName: "font-size:0.85rem;font-weight:500;color:var(--ck-text-primary)",
18
- emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
19
- emptyCenter: "text-align:center;padding:2.5rem 0"
4
+ const R = window.React;
5
+ if (!R) return;
6
+ const h = R.createElement;
7
+ const theme = {
8
+ text: { color: "var(--ck-text-primary)" },
9
+ textMuted: { color: "var(--ck-text-secondary)" },
10
+ textFaint: { color: "var(--ck-text-tertiary)" },
11
+ card: {
12
+ background: "var(--ck-bg-glass)",
13
+ border: "1px solid var(--ck-border-subtle)",
14
+ borderRadius: "14px",
15
+ backdropFilter: "blur(18px) saturate(1.25)"
16
+ },
17
+ banner: {
18
+ background: "var(--ck-bg-glass)",
19
+ border: "1px solid rgba(237,199,80,0.25)",
20
+ borderRadius: "14px",
21
+ color: "rgba(237,199,80,0.9)",
22
+ backdropFilter: "blur(18px)"
23
+ },
24
+ platformBtn: {
25
+ background: "var(--ck-bg-glass)",
26
+ border: "1px solid var(--ck-border-subtle)",
27
+ borderRadius: "12px",
28
+ cursor: "pointer",
29
+ backdropFilter: "blur(18px)",
30
+ transition: "border-color 0.15s, background 0.15s"
31
+ }
20
32
  };
33
+ const platforms = [
34
+ { icon: "\u{1D54F}", name: "Twitter / X" },
35
+ { icon: "\u{1F4F7}", name: "Instagram" },
36
+ { icon: "\u{1F3AC}", name: "YouTube" },
37
+ { icon: "\u{1F4BC}", name: "LinkedIn" }
38
+ ];
21
39
  function Accounts() {
22
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
23
- <div style="${s.page}">
24
- <h2 style="${s.h2}">Social Media Accounts</h2>
25
- <div style="${s.banner}">
26
- \u{1F517} Connect and manage your social media accounts
27
- </div>
28
- <div style="${s.card};margin-bottom:1rem">
29
- <h3 style="${s.cardTitle}">Add New Account</h3>
30
- <div style="${s.platformGrid}">
31
- <div style="${s.platformBtn}">
32
- <div style="${s.platformIcon}">\u{1D54F}</div>
33
- <div style="${s.platformName}">Twitter / X</div>
34
- </div>
35
- <div style="${s.platformBtn}">
36
- <div style="${s.platformIcon}">\u{1F4F7}</div>
37
- <div style="${s.platformName}">Instagram</div>
38
- </div>
39
- <div style="${s.platformBtn}">
40
- <div style="${s.platformIcon}">\u{1F3AC}</div>
41
- <div style="${s.platformName}">YouTube</div>
42
- </div>
43
- <div style="${s.platformBtn}">
44
- <div style="${s.platformIcon}">\u{1F4BC}</div>
45
- <div style="${s.platformName}">LinkedIn</div>
46
- </div>
47
- </div>
48
- </div>
49
- <div style="${s.card}">
50
- <h3 style="${s.cardTitle}">Connected Accounts</h3>
51
- <div style="${s.emptyCenter}">
52
- <div style="${s.emptyIcon}">\u{1F50C}</div>
53
- <p style="${s.muted}">No accounts connected yet</p>
54
- <p style="${s.mutedSm}">Click a platform above to get started</p>
55
- </div>
56
- </div>
57
- </div>
58
- ` } });
40
+ return h(
41
+ "div",
42
+ { className: "p-8 max-w-5xl mx-auto" },
43
+ h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Social Media Accounts"),
44
+ h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F517} Connect and manage your social media accounts"),
45
+ h(
46
+ "div",
47
+ { className: "p-6 mb-4", style: theme.card },
48
+ h("h3", { className: "text-lg font-semibold mb-4", style: theme.text }, "Add New Account"),
49
+ h(
50
+ "div",
51
+ { className: "grid grid-cols-4 gap-3" },
52
+ ...platforms.map(
53
+ (p) => h(
54
+ "div",
55
+ {
56
+ key: p.name,
57
+ className: "p-5 text-center",
58
+ style: theme.platformBtn
59
+ },
60
+ h("div", { className: "text-2xl mb-2" }, p.icon),
61
+ h("div", { className: "text-sm font-medium", style: theme.text }, p.name)
62
+ )
63
+ )
64
+ )
65
+ ),
66
+ h(
67
+ "div",
68
+ { className: "p-6", style: theme.card },
69
+ h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Connected Accounts"),
70
+ h(
71
+ "div",
72
+ { className: "text-center py-8" },
73
+ h("div", { className: "text-4xl mb-3 opacity-60" }, "\u{1F50C}"),
74
+ h("p", { className: "text-sm", style: theme.textMuted }, "No accounts connected yet"),
75
+ h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Click a platform above to get started")
76
+ )
77
+ )
78
+ );
59
79
  }
60
80
  window.KitchenPlugin.registerTab("marketing", "accounts", Accounts);
61
81
  })();
@@ -1,57 +1,76 @@
1
1
  (() => {
2
2
  // src/tabs/analytics.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
6
- const s = {
7
- page: "padding:2rem;max-width:1200px;margin:0 auto",
8
- h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
9
- card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
10
- cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:1rem",
11
- muted: "color:var(--ck-text-secondary);font-size:0.9rem",
12
- mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem",
13
- banner: "background:var(--ck-bg-glass);border:1px solid rgba(183,148,244,0.25);border-radius:14px;padding:1.25rem;color:rgba(183,148,244,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
14
- statsGrid: "display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem",
15
- statCard: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.25rem;text-align:center;backdrop-filter:blur(18px) saturate(1.25)",
16
- statValue: "font-size:2rem;font-weight:700;margin-bottom:0.25rem",
17
- statLabel: "color:var(--ck-text-tertiary);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em",
18
- emptyChart: "height:16rem;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ck-border-subtle)",
19
- emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
20
- emptyCenter: "text-align:center"
4
+ const R = window.React;
5
+ if (!R) return;
6
+ const h = R.createElement;
7
+ const theme = {
8
+ text: { color: "var(--ck-text-primary)" },
9
+ textMuted: { color: "var(--ck-text-secondary)" },
10
+ textFaint: { color: "var(--ck-text-tertiary)" },
11
+ card: {
12
+ background: "var(--ck-bg-glass)",
13
+ border: "1px solid var(--ck-border-subtle)",
14
+ borderRadius: "14px",
15
+ backdropFilter: "blur(18px) saturate(1.25)"
16
+ },
17
+ banner: {
18
+ background: "var(--ck-bg-glass)",
19
+ border: "1px solid rgba(183,148,244,0.25)",
20
+ borderRadius: "14px",
21
+ color: "rgba(183,148,244,0.9)",
22
+ backdropFilter: "blur(18px)"
23
+ },
24
+ statLabel: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" },
25
+ chartPlaceholder: {
26
+ border: "1px dashed var(--ck-border-subtle)",
27
+ borderRadius: "10px",
28
+ height: "16rem",
29
+ display: "flex",
30
+ alignItems: "center",
31
+ justifyContent: "center"
32
+ }
21
33
  };
34
+ const stats = [
35
+ { label: "Total Posts", value: "0", color: "rgba(99,179,237,0.9)" },
36
+ { label: "Engagements", value: "0", color: "rgba(72,187,120,0.9)" },
37
+ { label: "New Followers", value: "0", color: "rgba(237,137,54,0.9)" }
38
+ ];
22
39
  function Analytics() {
23
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
24
- <div style="${s.page}">
25
- <h2 style="${s.h2}">Analytics</h2>
26
- <div style="${s.banner}">
27
- \u{1F4CA} Track your content performance across platforms
28
- </div>
29
- <div style="${s.statsGrid}">
30
- <div style="${s.statCard}">
31
- <div style="${s.statValue};color:rgba(99,179,237,0.9)">0</div>
32
- <div style="${s.statLabel}">Total Posts</div>
33
- </div>
34
- <div style="${s.statCard}">
35
- <div style="${s.statValue};color:rgba(72,187,120,0.9)">0</div>
36
- <div style="${s.statLabel}">Engagements</div>
37
- </div>
38
- <div style="${s.statCard}">
39
- <div style="${s.statValue};color:rgba(237,137,54,0.9)">0</div>
40
- <div style="${s.statLabel}">New Followers</div>
41
- </div>
42
- </div>
43
- <div style="${s.card}">
44
- <h3 style="${s.cardTitle}">Engagement Over Time</h3>
45
- <div style="${s.emptyChart}">
46
- <div style="${s.emptyCenter}">
47
- <div style="${s.emptyIcon}">\u{1F4C8}</div>
48
- <p style="${s.muted}">Your engagement chart will appear here</p>
49
- <p style="${s.mutedSm}">Start publishing content to see analytics</p>
50
- </div>
51
- </div>
52
- </div>
53
- </div>
54
- ` } });
40
+ return h(
41
+ "div",
42
+ { className: "p-8 max-w-4xl mx-auto" },
43
+ h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Analytics"),
44
+ h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F4CA} Track your content performance across platforms"),
45
+ h(
46
+ "div",
47
+ { className: "grid grid-cols-3 gap-4 mb-6" },
48
+ ...stats.map(
49
+ (s) => h(
50
+ "div",
51
+ { key: s.label, className: "p-5 text-center", style: theme.card },
52
+ h("div", { className: "text-3xl font-bold mb-1", style: { color: s.color } }, s.value),
53
+ h("div", { style: theme.statLabel }, s.label)
54
+ )
55
+ )
56
+ ),
57
+ h(
58
+ "div",
59
+ { className: "p-6", style: theme.card },
60
+ h("h3", { className: "text-lg font-semibold mb-4", style: theme.text }, "Engagement Over Time"),
61
+ h(
62
+ "div",
63
+ { style: theme.chartPlaceholder },
64
+ h(
65
+ "div",
66
+ { className: "text-center" },
67
+ h("div", { className: "text-4xl mb-3 opacity-60" }, "\u{1F4C8}"),
68
+ h("p", { className: "text-sm", style: theme.textMuted }, "Your engagement chart will appear here"),
69
+ h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Start publishing content to see analytics")
70
+ )
71
+ )
72
+ )
73
+ );
55
74
  }
56
75
  window.KitchenPlugin.registerTab("marketing", "analytics", Analytics);
57
76
  })();
@@ -1,22 +1,52 @@
1
1
  (() => {
2
2
  // src/tabs/content-calendar.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
6
- const s = {
7
- page: "padding:2rem;max-width:1200px;margin:0 auto",
8
- h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
9
- card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
10
- muted: "color:var(--ck-text-secondary);font-size:0.9rem",
11
- mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem;margin-top:1rem",
12
- banner: "background:var(--ck-bg-glass);border:1px solid rgba(72,187,120,0.25);border-radius:14px;padding:1.25rem;color:rgba(72,187,120,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
13
- grid7: "display:grid;grid-template-columns:repeat(7,1fr);gap:4px",
14
- dayHeader: "text-align:center;padding:0.5rem;font-weight:600;font-size:0.8rem;color:var(--ck-text-tertiary);text-transform:uppercase;letter-spacing:0.05em",
15
- dayCell: "border:1px solid var(--ck-border-subtle);border-radius:8px;padding:0.5rem;min-height:5rem;transition:background 0.15s",
16
- dayCellActive: "border:1px solid var(--ck-border-subtle);border-radius:8px;padding:0.5rem;min-height:5rem;background:rgba(255,255,255,0.03);transition:background 0.15s",
17
- dayCellEmpty: "border:1px solid transparent;border-radius:8px;padding:0.5rem;min-height:5rem;opacity:0.3",
18
- dayNum: "font-size:0.8rem;font-weight:500;color:var(--ck-text-secondary)",
19
- todayNum: "font-size:0.8rem;font-weight:700;color:rgba(99,179,237,1);background:rgba(99,179,237,0.15);width:1.5rem;height:1.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center"
4
+ const R = window.React;
5
+ if (!R) return;
6
+ const h = R.createElement;
7
+ const theme = {
8
+ text: { color: "var(--ck-text-primary)" },
9
+ textMuted: { color: "var(--ck-text-secondary)" },
10
+ textFaint: { color: "var(--ck-text-tertiary)" },
11
+ card: {
12
+ background: "var(--ck-bg-glass)",
13
+ border: "1px solid var(--ck-border-subtle)",
14
+ borderRadius: "14px",
15
+ backdropFilter: "blur(18px) saturate(1.25)"
16
+ },
17
+ banner: {
18
+ background: "var(--ck-bg-glass)",
19
+ border: "1px solid rgba(72,187,120,0.25)",
20
+ borderRadius: "14px",
21
+ color: "rgba(72,187,120,0.9)",
22
+ backdropFilter: "blur(18px)"
23
+ },
24
+ dayHeader: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" },
25
+ cell: {
26
+ border: "1px solid var(--ck-border-subtle)",
27
+ borderRadius: "8px",
28
+ minHeight: "5rem",
29
+ background: "rgba(255,255,255,0.02)"
30
+ },
31
+ cellEmpty: {
32
+ border: "1px solid transparent",
33
+ borderRadius: "8px",
34
+ minHeight: "5rem",
35
+ opacity: 0.2
36
+ },
37
+ dayNum: { color: "var(--ck-text-secondary)", fontSize: "0.8rem", fontWeight: 500 },
38
+ todayBadge: {
39
+ color: "rgba(99,179,237,1)",
40
+ background: "rgba(99,179,237,0.15)",
41
+ fontSize: "0.8rem",
42
+ fontWeight: 700,
43
+ width: "1.6rem",
44
+ height: "1.6rem",
45
+ borderRadius: "50%",
46
+ display: "inline-flex",
47
+ alignItems: "center",
48
+ justifyContent: "center"
49
+ }
20
50
  };
21
51
  const now = /* @__PURE__ */ new Date();
22
52
  const year = now.getFullYear();
@@ -25,36 +55,42 @@
25
55
  const firstDay = new Date(year, month, 1).getDay();
26
56
  const daysInMonth = new Date(year, month + 1, 0).getDate();
27
57
  const monthName = now.toLocaleString("default", { month: "long", year: "numeric" });
28
- const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
29
- const headerHtml = days.map((d) => `<div style="${s.dayHeader}">${d}</div>`).join("");
30
- let cellsHtml = "";
31
- for (let i = 0; i < 42; i++) {
32
- const dayNum = i - firstDay + 1;
33
- if (dayNum < 1 || dayNum > daysInMonth) {
34
- cellsHtml += `<div style="${s.dayCellEmpty}"></div>`;
35
- } else {
36
- const isToday = dayNum === today;
37
- const numStyle = isToday ? s.todayNum : s.dayNum;
38
- cellsHtml += `<div style="${isToday ? s.dayCellActive : s.dayCellActive}">
39
- <span style="${numStyle}">${dayNum}</span>
40
- </div>`;
41
- }
42
- }
58
+ const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
43
59
  function ContentCalendar() {
44
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
45
- <div style="${s.page}">
46
- <h2 style="${s.h2}">Content Calendar</h2>
47
- <div style="${s.banner}">
48
- \u{1F4C5} Schedule and plan your content
49
- </div>
50
- <div style="${s.card}">
51
- <div style="text-align:center;font-weight:600;font-size:1.1rem;color:var(--ck-text-primary);margin-bottom:1rem">${monthName}</div>
52
- <div style="${s.grid7}">${headerHtml}</div>
53
- <div style="${s.grid7};margin-top:4px">${cellsHtml}</div>
54
- <p style="${s.mutedSm}">Scheduled posts will appear on their respective dates. Drag to reschedule.</p>
55
- </div>
56
- </div>
57
- ` } });
60
+ const cells = [];
61
+ for (let i = 0; i < 42; i++) {
62
+ const day = i - firstDay + 1;
63
+ if (day < 1 || day > daysInMonth) {
64
+ cells.push(h("div", { key: i, style: theme.cellEmpty }));
65
+ } else {
66
+ const isToday = day === today;
67
+ cells.push(
68
+ h(
69
+ "div",
70
+ { key: i, className: "p-2", style: theme.cell },
71
+ h("span", { style: isToday ? theme.todayBadge : theme.dayNum }, day)
72
+ )
73
+ );
74
+ }
75
+ }
76
+ return h(
77
+ "div",
78
+ { className: "p-8 max-w-4xl mx-auto" },
79
+ h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Content Calendar"),
80
+ h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F4C5} Schedule and plan your content"),
81
+ h(
82
+ "div",
83
+ { className: "p-6", style: theme.card },
84
+ h("div", { className: "text-center font-semibold text-lg mb-4", style: theme.text }, monthName),
85
+ h(
86
+ "div",
87
+ { style: { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "4px", marginBottom: "4px" } },
88
+ ...dayNames.map((d) => h("div", { key: d, className: "text-center py-2 font-semibold", style: theme.dayHeader }, d))
89
+ ),
90
+ h("div", { style: { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "4px" } }, ...cells),
91
+ h("p", { className: "text-xs mt-4", style: theme.textFaint }, "Scheduled posts will appear on their respective dates.")
92
+ )
93
+ );
58
94
  }
59
95
  window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
60
96
  })();
@@ -1,51 +1,64 @@
1
1
  (() => {
2
2
  // src/tabs/content-library.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
6
- const s = {
7
- page: "padding:2rem;max-width:1200px;margin:0 auto",
8
- h2: "font-size:1.5rem;font-weight:700;color:var(--ck-text-primary);margin-bottom:1.5rem",
9
- card: "background:var(--ck-bg-glass);border:1px solid var(--ck-border-subtle);border-radius:14px;padding:1.5rem;backdrop-filter:blur(18px) saturate(1.25)",
10
- cardTitle: "font-size:1.1rem;font-weight:600;color:var(--ck-text-primary);margin-bottom:0.75rem",
11
- muted: "color:var(--ck-text-secondary);font-size:0.9rem;line-height:1.6",
12
- mutedSm: "color:var(--ck-text-tertiary);font-size:0.85rem;font-style:italic",
13
- stack: "display:flex;flex-direction:column;gap:1rem",
14
- list: "color:var(--ck-text-secondary);font-size:0.9rem;line-height:2;margin-top:0.5rem;padding-left:1.25rem",
15
- banner: "background:var(--ck-bg-glass);border:1px solid rgba(99,179,237,0.25);border-radius:14px;padding:1.25rem;color:rgba(99,179,237,0.9);font-size:0.9rem;margin-bottom:1.5rem;backdrop-filter:blur(18px)",
16
- emptyIcon: "font-size:2.5rem;margin-bottom:0.75rem;opacity:0.6",
17
- emptyCenter: "text-align:center;padding:2.5rem 0",
18
- btn: "background:rgba(99,179,237,0.15);border:1px solid rgba(99,179,237,0.3);color:rgba(99,179,237,0.9);padding:0.6rem 1.25rem;border-radius:10px;cursor:pointer;font-size:0.9rem;font-weight:500;transition:all 0.15s"
4
+ const R = window.React;
5
+ if (!R) return;
6
+ const h = R.createElement;
7
+ const theme = {
8
+ text: { color: "var(--ck-text-primary)" },
9
+ textMuted: { color: "var(--ck-text-secondary)" },
10
+ textFaint: { color: "var(--ck-text-tertiary)" },
11
+ card: {
12
+ background: "var(--ck-bg-glass)",
13
+ border: "1px solid var(--ck-border-subtle)",
14
+ borderRadius: "14px",
15
+ backdropFilter: "blur(18px) saturate(1.25)"
16
+ },
17
+ banner: {
18
+ background: "var(--ck-bg-glass)",
19
+ border: "1px solid rgba(99,179,237,0.25)",
20
+ borderRadius: "14px",
21
+ color: "rgba(99,179,237,0.9)",
22
+ backdropFilter: "blur(18px)"
23
+ }
19
24
  };
20
25
  function ContentLibrary() {
21
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
22
- <div style="${s.page}">
23
- <h2 style="${s.h2}">Content Library</h2>
24
- <div style="${s.banner}">
25
- \u{1F389} Marketing Suite plugin is active! Manage your content from here.
26
- </div>
27
- <div style="${s.stack}">
28
- <div style="${s.card}">
29
- <h3 style="${s.cardTitle}">Create New Post</h3>
30
- <p style="${s.muted}">Your content creation tools will live here:</p>
31
- <ul style="${s.list}">
32
- <li>Rich text editor with media embedding</li>
33
- <li>Multi-platform publishing (Twitter, Instagram, LinkedIn)</li>
34
- <li>Scheduling & auto-posting</li>
35
- <li>Template library for quick starts</li>
36
- </ul>
37
- </div>
38
- <div style="${s.card}">
39
- <h3 style="${s.cardTitle}">Recent Posts</h3>
40
- <div style="${s.emptyCenter}">
41
- <div style="${s.emptyIcon}">\u270D\uFE0F</div>
42
- <p style="${s.muted}">No posts yet</p>
43
- <p style="${s.mutedSm}">Create your first post to get started</p>
44
- </div>
45
- </div>
46
- </div>
47
- </div>
48
- ` } });
26
+ return h(
27
+ "div",
28
+ { className: "p-8 max-w-4xl mx-auto" },
29
+ h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Content Library"),
30
+ h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F389} Marketing Suite plugin is active! Manage your content from here."),
31
+ h(
32
+ "div",
33
+ { className: "flex flex-col gap-4" },
34
+ h(
35
+ "div",
36
+ { className: "p-6", style: theme.card },
37
+ h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Create New Post"),
38
+ h("p", { className: "text-sm mb-2", style: theme.textMuted }, "Your content creation tools will live here:"),
39
+ h(
40
+ "ul",
41
+ { className: "text-sm space-y-1", style: { ...theme.textMuted, listStyle: "disc inside", paddingLeft: "0.5rem" } },
42
+ h("li", null, "Rich text editor with media embedding"),
43
+ h("li", null, "Multi-platform publishing (Twitter, Instagram, LinkedIn)"),
44
+ h("li", null, "Scheduling & auto-posting"),
45
+ h("li", null, "Template library for quick starts")
46
+ )
47
+ ),
48
+ h(
49
+ "div",
50
+ { className: "p-6", style: theme.card },
51
+ h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Recent Posts"),
52
+ h(
53
+ "div",
54
+ { className: "text-center py-8" },
55
+ h("div", { className: "text-4xl mb-3 opacity-60" }, "\u270D\uFE0F"),
56
+ h("p", { className: "text-sm", style: theme.textMuted }, "No posts yet"),
57
+ h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Create your first post to get started")
58
+ )
59
+ )
60
+ )
61
+ );
49
62
  }
50
63
  window.KitchenPlugin.registerTab("marketing", "content-library", ContentLibrary);
51
64
  })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jiggai/kitchen-plugin-marketing",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "description": "Marketing Suite plugin for ClawKitchen",
5
5
  "main": "dist/index.js",
6
6
  "files": [