@jiggai/kitchen-plugin-marketing 0.2.2 → 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,46 +1,81 @@
1
1
  (() => {
2
2
  // src/tabs/accounts.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
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
+ }
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
+ ];
6
39
  function Accounts() {
7
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
- <div class="p-6">
9
- <h2 class="text-2xl font-bold mb-4">Social Media Accounts</h2>
10
- <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
11
- <p class="text-yellow-800">\u{1F517} Connect and manage your social media accounts here!</p>
12
- </div>
13
- <div style="margin-bottom:1.5rem">
14
- <h3 class="font-semibold text-lg mb-3">Add New Account</h3>
15
- <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem">
16
- <button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600" style="cursor:pointer;border:none">
17
- <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F426}</div>
18
- <div>Twitter/X</div>
19
- </button>
20
- <button class="bg-pink-500 text-white p-4 rounded-lg hover:bg-pink-600" style="cursor:pointer;border:none">
21
- <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F4F7}</div>
22
- <div>Instagram</div>
23
- </button>
24
- <button class="bg-red-500 text-white p-4 rounded-lg hover:bg-red-600" style="cursor:pointer;border:none">
25
- <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F3AC}</div>
26
- <div>YouTube</div>
27
- </button>
28
- <button class="bg-purple-500 text-white p-4 rounded-lg hover:bg-purple-600" style="cursor:pointer;border:none">
29
- <div style="font-size:1.25rem;margin-bottom:0.5rem">\u{1F3B5}</div>
30
- <div>TikTok</div>
31
- </button>
32
- </div>
33
- </div>
34
- <div class="bg-white border rounded-lg p-6">
35
- <h3 class="font-semibold text-lg mb-4">Connected Accounts</h3>
36
- <div style="text-align:center;padding:2rem 0">
37
- <div style="font-size:2.5rem;margin-bottom:0.5rem">\u{1F50C}</div>
38
- <p class="text-gray-600">No accounts connected yet</p>
39
- <p class="text-sm text-gray-500">Click one of the platforms above to get started</p>
40
- </div>
41
- </div>
42
- </div>
43
- ` } });
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
+ );
44
79
  }
45
80
  window.KitchenPlugin.registerTab("marketing", "accounts", Accounts);
46
81
  })();
@@ -1,41 +1,76 @@
1
1
  (() => {
2
2
  // src/tabs/analytics.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
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
+ }
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
+ ];
6
39
  function Analytics() {
7
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
- <div class="p-6">
9
- <h2 class="text-2xl font-bold mb-4">Analytics</h2>
10
- <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
11
- <p class="text-purple-800">\u{1F4CA} Track your content performance!</p>
12
- </div>
13
- <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem">
14
- <div class="bg-white border rounded-lg p-4">
15
- <div class="text-2xl font-bold text-blue-600">0</div>
16
- <div class="text-gray-600">Total Posts</div>
17
- </div>
18
- <div class="bg-white border rounded-lg p-4">
19
- <div class="text-2xl font-bold text-green-600">0</div>
20
- <div class="text-gray-600">Total Engagement</div>
21
- </div>
22
- <div class="bg-white border rounded-lg p-4">
23
- <div class="text-2xl font-bold text-orange-600">0</div>
24
- <div class="text-gray-600">New Followers</div>
25
- </div>
26
- </div>
27
- <div class="bg-white border rounded-lg p-6">
28
- <h3 class="font-semibold text-lg mb-4">Engagement Over Time</h3>
29
- <div class="h-64 bg-gray-50 rounded border" style="display:flex;align-items:center;justify-content:center">
30
- <div style="text-align:center">
31
- <div style="font-size:2.5rem;margin-bottom:0.5rem">\u{1F4C8}</div>
32
- <p class="text-gray-600">Your engagement chart will appear here</p>
33
- <p class="text-sm text-gray-500">Start publishing content to see analytics</p>
34
- </div>
35
- </div>
36
- </div>
37
- </div>
38
- ` } });
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
+ );
39
74
  }
40
75
  window.KitchenPlugin.registerTab("marketing", "analytics", Analytics);
41
76
  })();
@@ -1,30 +1,96 @@
1
1
  (() => {
2
2
  // src/tabs/content-calendar.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
6
- const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
7
- const headerHtml = days.map((d) => `<div class="font-semibold text-center p-2">${d}</div>`).join("");
8
- const cellsHtml = Array.from({ length: 35 }, (_, i) => {
9
- const day = i < 31 ? i + 1 : "";
10
- return `<div class="border rounded p-2 h-20 ${day ? "bg-gray-50" : "bg-gray-100"}">
11
- ${day ? `<div class="text-sm font-medium">${day}</div>` : ""}
12
- </div>`;
13
- }).join("");
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
+ }
50
+ };
51
+ const now = /* @__PURE__ */ new Date();
52
+ const year = now.getFullYear();
53
+ const month = now.getMonth();
54
+ const today = now.getDate();
55
+ const firstDay = new Date(year, month, 1).getDay();
56
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
57
+ const monthName = now.toLocaleString("default", { month: "long", year: "numeric" });
58
+ const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
14
59
  function ContentCalendar() {
15
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
16
- <div class="p-6">
17
- <h2 class="text-2xl font-bold mb-4">Content Calendar</h2>
18
- <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
19
- <p class="text-green-800">\u{1F4C5} Schedule and plan your content!</p>
20
- </div>
21
- <div class="bg-white border rounded-lg p-6">
22
- <div class="grid grid-cols-7 gap-2 mb-4">${headerHtml}</div>
23
- <div class="grid grid-cols-7 gap-2">${cellsHtml}</div>
24
- <p class="text-gray-500 text-sm mt-4">Scheduled posts would appear on their respective dates.</p>
25
- </div>
26
- </div>
27
- ` } });
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
+ );
28
94
  }
29
95
  window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
30
96
  })();
@@ -1,33 +1,64 @@
1
1
  (() => {
2
2
  // src/tabs/content-library.tsx
3
3
  (function() {
4
- const React = window.React;
5
- if (!React) return;
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
+ }
24
+ };
6
25
  function ContentLibrary() {
7
- return React.createElement("div", { dangerouslySetInnerHTML: { __html: `
8
- <div class="p-6">
9
- <h2 class="text-2xl font-bold mb-4">Content Library</h2>
10
- <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
11
- <p class="text-blue-800">\u{1F389} Marketing Suite plugin is working! This is the Content Library tab.</p>
12
- </div>
13
- <div style="display:flex;flex-direction:column;gap:1rem">
14
- <div class="bg-white border rounded-lg p-4">
15
- <h3 class="font-semibold text-lg mb-2">Create New Post</h3>
16
- <p class="text-gray-600">Your content creation tools would go here. You could add:</p>
17
- <ul class="list-disc list-inside mt-2 text-gray-600">
18
- <li>Rich text editor</li>
19
- <li>Media upload</li>
20
- <li>Platform selection (Twitter, Instagram, etc.)</li>
21
- <li>Scheduling options</li>
22
- </ul>
23
- </div>
24
- <div class="bg-white border rounded-lg p-4">
25
- <h3 class="font-semibold text-lg mb-2">Recent Posts</h3>
26
- <p class="text-gray-500 italic">No posts yet. Create your first post above!</p>
27
- </div>
28
- </div>
29
- </div>
30
- ` } });
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
+ );
31
62
  }
32
63
  window.KitchenPlugin.registerTab("marketing", "content-library", ContentLibrary);
33
64
  })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jiggai/kitchen-plugin-marketing",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "Marketing Suite plugin for ClawKitchen",
5
5
  "main": "dist/index.js",
6
6
  "files": [