@jiggai/kitchen-plugin-marketing 0.2.4 → 0.2.5

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.
Files changed (5) hide show
  1. package/dist/tabs/accounts.js +21 -39
  2. package/dist/tabs/analytics.js +18 -42
  3. package/dist/tabs/content-calendar.js +22 -44
  4. package/dist/tabs/content-library.js +22 -41
  5. package/package.json +1 -1
package/dist/tabs/accounts.js CHANGED
@@ -4,30 +4,24 @@
4
4
  const R = window.React;
5
5
  if (!R) return;
6
6
  const h = R.createElement;
7
- const theme = {
7
+ const t = {
8
8
  text: { color: "var(--ck-text-primary)" },
9
- textMuted: { color: "var(--ck-text-secondary)" },
10
- textFaint: { color: "var(--ck-text-tertiary)" },
9
+ muted: { color: "var(--ck-text-secondary)" },
10
+ faint: { color: "var(--ck-text-tertiary)" },
11
11
  card: {
12
- background: "var(--ck-bg-glass)",
12
+ background: "rgba(255,255,255,0.03)",
13
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)"
14
+ borderRadius: "10px",
15
+ padding: "1rem"
23
16
  },
24
17
  platformBtn: {
25
- background: "var(--ck-bg-glass)",
18
+ background: "rgba(255,255,255,0.03)",
26
19
  border: "1px solid var(--ck-border-subtle)",
27
- borderRadius: "12px",
20
+ borderRadius: "10px",
28
21
  cursor: "pointer",
29
- backdropFilter: "blur(18px)",
30
- transition: "border-color 0.15s, background 0.15s"
22
+ transition: "border-color 0.15s, background 0.15s",
23
+ padding: "1rem",
24
+ textAlign: "center"
31
25
  }
32
26
  };
33
27
  const platforms = [
@@ -39,41 +33,29 @@
39
33
  function Accounts() {
40
34
  return h(
41
35
  "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"),
36
+ { className: "space-y-3" },
45
37
  h(
46
38
  "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"),
39
+ { style: t.card },
40
+ h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Connect Account"),
49
41
  h(
50
42
  "div",
51
- { className: "grid grid-cols-4 gap-3" },
43
+ { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "0.5rem" } },
52
44
  ...platforms.map(
53
45
  (p) => h(
54
46
  "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)
47
+ { key: p.name, style: t.platformBtn },
48
+ h("div", { className: "text-xl mb-1" }, p.icon),
49
+ h("div", { className: "text-xs font-medium", style: t.text }, p.name)
62
50
  )
63
51
  )
64
52
  )
65
53
  ),
66
54
  h(
67
55
  "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
- )
56
+ { style: t.card },
57
+ h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Connected Accounts"),
58
+ h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No accounts connected yet.")
77
59
  )
78
60
  );
79
61
  }
package/dist/tabs/analytics.js CHANGED
@@ -4,32 +4,17 @@
4
4
  const R = window.React;
5
5
  if (!R) return;
6
6
  const h = R.createElement;
7
- const theme = {
7
+ const t = {
8
8
  text: { color: "var(--ck-text-primary)" },
9
- textMuted: { color: "var(--ck-text-secondary)" },
10
- textFaint: { color: "var(--ck-text-tertiary)" },
9
+ muted: { color: "var(--ck-text-secondary)" },
10
+ faint: { color: "var(--ck-text-tertiary)" },
11
11
  card: {
12
- background: "var(--ck-bg-glass)",
12
+ background: "rgba(255,255,255,0.03)",
13
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
14
  borderRadius: "10px",
28
- height: "16rem",
29
- display: "flex",
30
- alignItems: "center",
31
- justifyContent: "center"
32
- }
15
+ padding: "1rem"
16
+ },
17
+ statLabel: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }
33
18
  };
34
19
  const stats = [
35
20
  { label: "Total Posts", value: "0", color: "rgba(99,179,237,0.9)" },
@@ -39,36 +24,27 @@
39
24
  function Analytics() {
40
25
  return h(
41
26
  "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"),
27
+ { className: "space-y-3" },
45
28
  h(
46
29
  "div",
47
- { className: "grid grid-cols-3 gap-4 mb-6" },
30
+ { className: "grid grid-cols-3 gap-3" },
48
31
  ...stats.map(
49
32
  (s) => h(
50
33
  "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)
34
+ { key: s.label, className: "text-center p-3", style: t.card },
35
+ h("div", { className: "text-2xl font-bold mb-1", style: { color: s.color } }, s.value),
36
+ h("div", { style: t.statLabel }, s.label)
54
37
  )
55
38
  )
56
39
  ),
57
40
  h(
58
41
  "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
- )
42
+ { style: t.card },
43
+ h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Engagement Over Time"),
44
+ h("div", {
45
+ className: "flex items-center justify-center py-8 text-sm",
46
+ style: { ...t.faint, border: "1px dashed var(--ck-border-subtle)", borderRadius: "8px" }
47
+ }, "Start publishing content to see analytics")
72
48
  )
73
49
  );
74
50
  }
package/dist/tabs/content-calendar.js CHANGED
@@ -4,50 +4,34 @@
4
4
  const R = window.React;
5
5
  if (!R) return;
6
6
  const h = R.createElement;
7
- const theme = {
7
+ const t = {
8
8
  text: { color: "var(--ck-text-primary)" },
9
- textMuted: { color: "var(--ck-text-secondary)" },
10
- textFaint: { color: "var(--ck-text-tertiary)" },
9
+ muted: { color: "var(--ck-text-secondary)" },
10
+ faint: { color: "var(--ck-text-tertiary)" },
11
11
  card: {
12
- background: "var(--ck-bg-glass)",
12
+ background: "rgba(255,255,255,0.03)",
13
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
14
+ borderRadius: "10px",
15
+ padding: "1rem"
36
16
  },
17
+ dayHeader: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 600 },
18
+ cell: { border: "1px solid var(--ck-border-subtle)", borderRadius: "6px", minHeight: "4rem", padding: "0.35rem 0.5rem" },
19
+ cellEmpty: { minHeight: "4rem", opacity: 0.15 },
37
20
  dayNum: { color: "var(--ck-text-secondary)", fontSize: "0.8rem", fontWeight: 500 },
38
21
  todayBadge: {
39
22
  color: "rgba(99,179,237,1)",
40
23
  background: "rgba(99,179,237,0.15)",
41
24
  fontSize: "0.8rem",
42
25
  fontWeight: 700,
43
- width: "1.6rem",
44
- height: "1.6rem",
26
+ width: "1.5rem",
27
+ height: "1.5rem",
45
28
  borderRadius: "50%",
46
29
  display: "inline-flex",
47
30
  alignItems: "center",
48
31
  justifyContent: "center"
49
32
  }
50
33
  };
34
+ const grid7 = { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "3px" };
51
35
  const now = /* @__PURE__ */ new Date();
52
36
  const year = now.getFullYear();
53
37
  const month = now.getMonth();
@@ -61,35 +45,29 @@
61
45
  for (let i = 0; i < 42; i++) {
62
46
  const day = i - firstDay + 1;
63
47
  if (day < 1 || day > daysInMonth) {
64
- cells.push(h("div", { key: i, style: theme.cellEmpty }));
48
+ cells.push(h("div", { key: i, style: t.cellEmpty }));
65
49
  } else {
66
50
  const isToday = day === today;
67
51
  cells.push(
68
52
  h(
69
53
  "div",
70
- { key: i, className: "p-2", style: theme.cell },
71
- h("span", { style: isToday ? theme.todayBadge : theme.dayNum }, day)
54
+ { key: i, style: t.cell },
55
+ h("span", { style: isToday ? t.todayBadge : t.dayNum }, day)
72
56
  )
73
57
  );
74
58
  }
75
59
  }
76
60
  return h(
77
61
  "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"),
62
+ { style: t.card },
63
+ h("div", { className: "text-sm font-medium mb-3", style: t.text }, monthName),
81
64
  h(
82
65
  "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
- )
66
+ { style: { ...grid7, marginBottom: "3px" } },
67
+ ...dayNames.map((d) => h("div", { key: d, className: "text-center py-1", style: t.dayHeader }, d))
68
+ ),
69
+ h("div", { style: grid7 }, ...cells),
70
+ h("div", { className: "mt-3 text-xs", style: t.faint }, "Scheduled posts will appear on their respective dates.")
93
71
  );
94
72
  }
95
73
  window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);
package/dist/tabs/content-library.js CHANGED
@@ -4,59 +4,40 @@
4
4
  const R = window.React;
5
5
  if (!R) return;
6
6
  const h = R.createElement;
7
- const theme = {
7
+ const t = {
8
8
  text: { color: "var(--ck-text-primary)" },
9
- textMuted: { color: "var(--ck-text-secondary)" },
10
- textFaint: { color: "var(--ck-text-tertiary)" },
9
+ muted: { color: "var(--ck-text-secondary)" },
10
+ faint: { color: "var(--ck-text-tertiary)" },
11
11
  card: {
12
- background: "var(--ck-bg-glass)",
12
+ background: "rgba(255,255,255,0.03)",
13
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)"
14
+ borderRadius: "10px",
15
+ padding: "1rem"
23
16
  }
24
17
  };
25
18
  function ContentLibrary() {
26
19
  return h(
27
20
  "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."),
21
+ { className: "space-y-3" },
31
22
  h(
32
23
  "div",
33
- { className: "flex flex-col gap-4" },
24
+ { style: t.card },
25
+ h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Create New Post"),
26
+ h("div", { className: "text-sm", style: t.muted }, "Your content creation tools will live here:"),
34
27
  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
- )
28
+ "ul",
29
+ { className: "text-sm mt-2 space-y-1", style: { ...t.muted, listStyle: "disc inside", paddingLeft: "0.5rem" } },
30
+ h("li", null, "Rich text editor with media embedding"),
31
+ h("li", null, "Multi-platform publishing (Twitter, Instagram, LinkedIn)"),
32
+ h("li", null, "Scheduling & auto-posting"),
33
+ h("li", null, "Template library for quick starts")
59
34
  )
35
+ ),
36
+ h(
37
+ "div",
38
+ { style: t.card },
39
+ h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Recent Posts"),
40
+ h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No posts yet \u2014 create your first post to get started.")
60
41
  )
61
42
  );
62
43
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jiggai/kitchen-plugin-marketing",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "Marketing Suite plugin for ClawKitchen",
5
5
  "main": "dist/index.js",
6
6
  "files": [