@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

package/dist/src/reskin/calendar-page.js

@@ -0,0 +1,252 @@
+// /reskin/calendar — the scheduled-posts calendar ported into the farmville
+// design system. A calm, full-width month board where each day holds simple
+// post chips (platform swatch + title + time) with a small status dot, today
+// highlighted, and a compact status legend beneath the grid.
+//
+// SIMPLIFIED layout: the earlier version paired the month grid with a right-hand
+// side rail (Channels card + "Up next" agenda) plus a legend and a Month/Week/Day
+// toggle. That was too busy, so the board is now the full-width hero of the page
+// and the rail is gone — more whitespace, fewer competing elements per cell.
+//
+// Renders with representative SAMPLE data (a full month of scheduled short-form
+// posts) so it can be viewed without auth or a FlockPoster connection. Uses ONLY
+// shared rk-* primitives + a small page-scoped `rk-calendar-` CSS block.
+import { reskinDocument, rkEscape } from "./document.js";
+// ── The month we're rendering. today = Jul 7, 2026 (deterministic snapshot). ──
+const YEAR = 2026;
+const MONTH = 6; // 0-indexed → July
+const TODAY_DOM = 7;
+const MONTH_LABEL = "July 2026";
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const PLATFORM = {
+    TikTok: { initial: "T", swatch: "tiktok", label: "TikTok" },
+    Instagram: { initial: "I", swatch: "instagram", label: "Instagram" },
+    YouTube: { initial: "Y", swatch: "youtube", label: "YouTube" },
+    Email: { initial: "E", swatch: "email", label: "Email" }
+};
+const STATUS = {
+    draft: { label: "Draft", pill: "rk-pill" },
+    review: { label: "Review", pill: "rk-pill-gold" },
+    ready: { label: "Ready", pill: "rk-pill-green" },
+    scheduled: { label: "Scheduled", pill: "rk-pill-sky" },
+    sent: { label: "Sent", pill: "rk-pill-violet" },
+    error: { label: "Failed", pill: "rk-pill-red" }
+};
+// day-of-month → scheduled posts (in-month only).
+const POSTS_BY_DOM = {
+    1: [
+        { title: "Cold open hook A/B", platform: "TikTok", status: "scheduled", time: "9:00 AM" },
+        { title: "Behind the build", platform: "Instagram", status: "draft", time: "12:30 PM" }
+    ],
+    2: [{ title: "3 mistakes founders make", platform: "YouTube", status: "review", time: "2:00 PM" }],
+    6: [{ title: "Monday momentum", platform: "TikTok", status: "scheduled", time: "8:30 AM" }],
+    7: [
+        { title: "Feature reveal teaser", platform: "Instagram", status: "ready", time: "11:00 AM" },
+        { title: "Newsletter: ship week", platform: "Email", status: "scheduled", time: "4:00 PM" },
+        { title: "POV: launch day", platform: "TikTok", status: "scheduled", time: "6:00 PM" }
+    ],
+    8: [{ title: "Testimonial cut", platform: "YouTube", status: "scheduled", time: "1:00 PM" }],
+    9: [{ title: "Duet reply to @acme", platform: "TikTok", status: "draft", time: "5:15 PM" }],
+    10: [
+        { title: "Weekly recap", platform: "Email", status: "scheduled", time: "9:00 AM" },
+        { title: "Founder Q&A reel", platform: "Instagram", status: "review", time: "3:00 PM" }
+    ],
+    13: [{ title: "Hook test v4", platform: "TikTok", status: "scheduled", time: "8:00 AM" }],
+    14: [
+        { title: "Case study reel", platform: "Instagram", status: "scheduled", time: "12:00 PM" },
+        { title: "Shorts: 60s explainer", platform: "YouTube", status: "ready", time: "5:00 PM" }
+    ],
+    15: [{ title: "Mid-month drop", platform: "Email", status: "sent", time: "9:00 AM" }],
+    16: [{ title: "Trend jack: sound #4127", platform: "TikTok", status: "error", time: "7:00 PM" }],
+    17: [{ title: "Behind the numbers", platform: "YouTube", status: "scheduled", time: "2:00 PM" }],
+    20: [
+        { title: "Monday reset", platform: "TikTok", status: "scheduled", time: "8:30 AM" },
+        { title: "Carousel: 5 tips", platform: "Instagram", status: "draft", time: "1:00 PM" }
+    ],
+    21: [{ title: "Founder story pt.2", platform: "Instagram", status: "scheduled", time: "11:00 AM" }],
+    23: [{ title: "Live recap", platform: "YouTube", status: "review", time: "4:00 PM" }],
+    24: [
+        { title: "Weekly drop", platform: "Email", status: "scheduled", time: "9:00 AM" },
+        { title: "Friday feature", platform: "TikTok", status: "scheduled", time: "5:00 PM" }
+    ],
+    27: [{ title: "Hook test v5", platform: "TikTok", status: "scheduled", time: "8:00 AM" }],
+    28: [
+        { title: "Product deep-dive", platform: "YouTube", status: "scheduled", time: "1:00 PM" },
+        { title: "Reel: real results", platform: "Instagram", status: "ready", time: "6:00 PM" }
+    ],
+    30: [
+        { title: "Month-end recap", platform: "Email", status: "scheduled", time: "10:00 AM" },
+        { title: "TikTok trend remix", platform: "TikTok", status: "draft", time: "3:00 PM" },
+        { title: "Teaser: August drop", platform: "Instagram", status: "scheduled", time: "7:00 PM" }
+    ],
+    31: [{ title: "Final Friday push", platform: "TikTok", status: "scheduled", time: "5:00 PM" }]
+};
+const CHANNELS = [
+    { name: "Vidfarm Daily", handle: "@vidfarm", platform: "TikTok", active: true },
+    { name: "Founder Reels", handle: "@dylan.builds", platform: "Instagram" },
+    { name: "Studio Shorts", handle: "@vidfarm.studio", platform: "YouTube" },
+    { name: "Weekly Drop", handle: "dylan@studio.co", platform: "Email" }
+];
+function allPosts() {
+    const out = [];
+    for (const [dom, posts] of Object.entries(POSTS_BY_DOM)) {
+        for (const p of posts)
+            out.push({ ...p, dom: Number(dom) });
+    }
+    return out;
+}
+function platformSwatch(platform) {
+    const meta = PLATFORM[platform];
+    return `<span class="rk-calendar-swatch rk-calendar-swatch-${meta.swatch}" aria-hidden="true">${meta.initial}</span>`;
+}
+// One calm chip: platform swatch + title + a small status dot beside the time.
+// No colored borders — status lives in the dot (mapped by the legend below).
+function chip(p) {
+    const st = STATUS[p.status];
+    const meta = PLATFORM[p.platform];
+    return `<button type="button" class="rk-calendar-chip" title="${rkEscape(`${p.title} · ${meta.label} · ${st.label} · ${p.time}`)}">
+    ${platformSwatch(p.platform)}
+    <span class="rk-calendar-chip-body">
+      <span class="rk-calendar-chip-title">${rkEscape(p.title)}</span>
+      <span class="rk-calendar-chip-foot">
+        <span class="rk-calendar-dot" data-status="${p.status}" aria-hidden="true"></span>
+        <span class="rk-calendar-chip-time">${rkEscape(p.time)}</span>
+      </span>
+    </span>
+  </button>`;
+}
+function monthCells() {
+    const firstWeekday = new Date(Date.UTC(YEAR, MONTH, 1)).getUTCDay();
+    const daysInMonth = new Date(Date.UTC(YEAR, MONTH + 1, 0)).getUTCDate();
+    const rows = Math.ceil((firstWeekday + daysInMonth) / 7);
+    const total = rows * 7;
+    const cells = [];
+    for (let i = 0; i < total; i++) {
+        const offset = i - firstWeekday; // 0 → the 1st
+        const d = new Date(Date.UTC(YEAR, MONTH, 1 + offset));
+        const inMonth = d.getUTCMonth() === MONTH;
+        const dom = d.getUTCDate();
+        const isToday = inMonth && dom === TODAY_DOM;
+        const posts = inMonth ? POSTS_BY_DOM[dom] ?? [] : [];
+        const shown = posts.slice(0, 3);
+        const overflow = posts.length - shown.length;
+        const cls = ["rk-calendar-cell"];
+        if (!inMonth)
+            cls.push("is-out");
+        if (isToday)
+            cls.push("is-today");
+        const badge = isToday ? `<span class="rk-calendar-today">Today</span>` : "";
+        const chips = shown.map(chip).join("");
+        const more = overflow > 0 ? `<span class="rk-calendar-more">+${overflow} more</span>` : "";
+        cells.push(`<div class="${cls.join(" ")}">
+      <div class="rk-calendar-cell-head">
+        <span class="rk-calendar-daynum">${dom}</span>
+        ${badge}
+      </div>
+      <div class="rk-calendar-cell-posts">${chips}${more}</div>
+    </div>`);
+    }
+    return cells.join("");
+}
+export function renderReskinCalendar() {
+    const posts = allPosts();
+    const totalPosts = posts.length;
+    // weekday header
+    const weekdayHead = WEEKDAYS.map((w) => `<div class="rk-calendar-weekday">${w}</div>`).join("");
+    // compact one-line status legend under the grid (explains the chip dots)
+    const legendOrder = ["draft", "review", "ready", "scheduled", "sent", "error"];
+    const legend = legendOrder.map((s) => `<span class="rk-calendar-legend-item"><span class="rk-calendar-dot" data-status="${s}"></span>${STATUS[s].label}</span>`).join("");
+    const body = `
+<main class="rk-container-wide rk-page">
+  <div class="rk-page-head">
+    <span class="rk-badge">Publishing calendar</span>
+    <h1 class="rk-h1">Calendar</h1>
+    <p class="rk-sub">${totalPosts} scheduled short-form posts across ${CHANNELS.length} channels this July.</p>
+  </div>
+
+  <div class="rk-calendar-toolbar">
+    <div class="rk-calendar-monthnav">
+      <button type="button" class="rk-btn rk-btn-ghost rk-calendar-navbtn" aria-label="Previous month">←</button>
+      <span class="rk-calendar-month">${MONTH_LABEL}</span>
+      <button type="button" class="rk-btn rk-btn-ghost rk-calendar-navbtn" aria-label="Next month">→</button>
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-calendar-today-btn">Today</button>
+    </div>
+    <button type="button" class="rk-btn rk-btn-gold">＋ Schedule post</button>
+  </div>
+
+  <div class="rk-card rk-calendar-grid-card">
+    <div class="rk-calendar-scroll">
+      <div class="rk-calendar-weekdays">${weekdayHead}</div>
+      <div class="rk-calendar-grid">${monthCells()}</div>
+    </div>
+  </div>
+
+  <div class="rk-calendar-legend">${legend}</div>
+</main>`;
+    const pageCss = `
+.rk-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
+.rk-calendar-monthnav{display:flex;align-items:center;gap:10px}
+.rk-calendar-month{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-2xl);letter-spacing:-.02em;color:var(--rk-ink);min-width:8.6rem}
+.rk-calendar-navbtn{width:40px;height:40px;padding:0;font-size:16px;line-height:1}
+.rk-calendar-today-btn{margin-left:4px}
+
+/* month board — the full-width hero */
+.rk-calendar-grid-card{padding:0;overflow:hidden}
+.rk-calendar-scroll{overflow-x:auto}
+.rk-calendar-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--rk-n-50);border-bottom:1px solid var(--rk-border)}
+.rk-calendar-weekday{padding:14px 10px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rk-text-muted)}
+.rk-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--rk-border)}
+.rk-calendar-cell{background:#fff;min-height:152px;padding:12px 11px;display:flex;flex-direction:column;gap:9px;transition:background var(--rk-dur) var(--rk-ease)}
+.rk-calendar-cell:hover{background:var(--rk-n-50)}
+.rk-calendar-cell.is-out{background:var(--rk-n-50)}
+.rk-calendar-cell.is-out:hover{background:var(--rk-n-100)}
+.rk-calendar-cell.is-today{background:var(--rk-gold-tint);box-shadow:inset 0 0 0 2px var(--rk-gold-500)}
+.rk-calendar-cell-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:28px}
+.rk-calendar-daynum{width:28px;height:28px;border-radius:var(--rk-r-full);display:grid;place-items:center;font-family:var(--rk-font-display);font-weight:700;font-size:14px;color:var(--rk-n-700)}
+.rk-calendar-cell.is-out .rk-calendar-daynum{color:var(--rk-n-400);font-weight:600}
+.rk-calendar-cell.is-today .rk-calendar-daynum{background:var(--rk-gold-500);color:var(--rk-ink);box-shadow:var(--rk-shadow-xs)}
+.rk-calendar-today{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--rk-r-full);background:var(--rk-gold-500);color:var(--rk-ink);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+.rk-calendar-cell-posts{display:flex;flex-direction:column;gap:7px}
+
+/* post chip — uniform hairline, airy, status shown by the dot (not a border) */
+.rk-calendar-chip{display:flex;gap:9px;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);cursor:pointer;transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-calendar-chip:hover{transform:translateY(-1px);box-shadow:var(--rk-shadow-sm)}
+.rk-calendar-chip-body{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
+.rk-calendar-chip-title{font-size:12.5px;font-weight:700;color:var(--rk-ink);line-height:1.25;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.rk-calendar-chip-foot{display:flex;align-items:center;gap:6px}
+.rk-calendar-chip-time{font-size:11px;font-weight:600;color:var(--rk-text-muted)}
+.rk-calendar-more{font-size:11px;font-weight:700;color:var(--rk-text-muted);padding:1px 2px}
+
+/* platform swatch */
+.rk-calendar-swatch{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-family:var(--rk-font-display);font-size:13px;font-weight:800;line-height:1;flex:none;box-shadow:var(--rk-shadow-xs)}
+.rk-calendar-swatch-tiktok{background:var(--rk-ink);color:#fff}
+.rk-calendar-swatch-instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff}
+.rk-calendar-swatch-youtube{background:#ff3b30;color:#fff}
+.rk-calendar-swatch-email{background:var(--rk-sky-tint);color:#1d6fb8}
+
+/* status dot — used inside chips AND in the legend */
+.rk-calendar-dot{width:8px;height:8px;border-radius:var(--rk-r-full);background:var(--rk-n-400);flex:none}
+.rk-calendar-dot[data-status="review"]{background:var(--rk-gold-700)}
+.rk-calendar-dot[data-status="ready"]{background:var(--rk-green)}
+.rk-calendar-dot[data-status="scheduled"]{background:var(--rk-sky)}
+.rk-calendar-dot[data-status="sent"]{background:var(--rk-violet)}
+.rk-calendar-dot[data-status="error"]{background:var(--rk-red)}
+
+/* compact one-line legend */
+.rk-calendar-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;padding:0 6px}
+.rk-calendar-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--rk-text-muted)}
+
+@media(max-width:760px){
+  .rk-calendar-weekdays,.rk-calendar-grid{min-width:660px}
+  .rk-calendar-toolbar{gap:12px}
+}
+`;
+    return reskinDocument({
+        title: "vidfarm reskin — Calendar",
+        description: "Reskinned vidfarm calendar — a calm, full-width month of scheduled short-form posts.",
+        activeSlug: "calendar",
+        pageCss,
+        body
+    });
+}
+//# sourceMappingURL=calendar-page.js.map