@mevdragon/vidfarm-devcli 0.17.0 → 0.18.0

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

@@ -1,29 +1,48 @@
-// /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.
+// /reskin/calendar — the scheduled-posts calendar, MIGRATED to real production data.
 //
-// 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.
+// Mirrors the live /calendar page's two-column layout: a LEFT rail listing the
+// connected channels (searchable, click to filter the board to one channel) and
+// a compact month board on the RIGHT sized to the viewport so the whole month
+// is visible without scrolling.
 //
-// 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.
+// Like the live page, this renders the shell server-side, then CLIENT-FETCHES
+// the real posts from `input.loadEndpoint` (`/calendar/feed`, same-origin,
+// credentials included) and drops them onto the correct day cells. It accepts
+// the SAME input object the live route already builds (via
+// `Parameters<typeof renderCalendarPage>[0]`).
+//
+// /calendar/feed response contract (see serializeScheduleCalendarPost in app.ts):
+//   {
+//     channels: [{ id, name, handle, platform, avatarUrl, platformIconUrl? }],
+//     posts:    [{ id, channelId, scheduledAt (ISO), status (label),
+//                  statusTone: "draft"|"review"|"ready"|"scheduled"|"sent"|"error",
+//                  title, summary, kind, url }],
+//     startDate, endDate, syncStatus, error?
+//   }
+// The client sends `?start_date=&end_date=` for the visible month range; posts map
+// onto days by the local date of `scheduledAt`. Email channel ids are `email:<id>`
+// and match `post.channelId`, so platform is resolved via the channels lookup.
+//
+// Design stays farmville (shared rk-* primitives + a page-scoped rk-calendar- block);
+// NO decorative emoji — platform swatches use letter initials (T/I/Y/E/…).
 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" }
+// A safe default so calling with no/partial args never throws. The live route
+// always passes a fully-populated object (posts seeded empty — they arrive from
+// the feed), so this default only matters for previews / direct calls.
+const DEFAULT_INPUT = {
+    userId: "",
+    currentAccountId: "",
+    name: null,
+    email: "",
+    loadEndpoint: "/calendar/feed",
+    hasFlockPosterKey: false,
+    connectChannelsHref: "/settings?tab=channels&connect=flockposter",
+    channels: [],
+    posts: []
 };
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const SEARCH_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>`;
+// statusTone → { label, pill } for the chip tooltip + the legend dots.
 const STATUS = {
     draft: { label: "Draft", pill: "rk-pill" },
     review: { label: "Review", pill: "rk-pill-gold" },
@@ -32,221 +51,517 @@ const STATUS = {
     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();
+// Render a bare month-grid skeleton server-side (based on `today`) so the board
+// paints immediately; the client rebuilds it and fills in the real posts.
+function skeletonCells() {
+    const now = new Date();
+    const year = now.getUTCFullYear();
+    const month = now.getUTCMonth();
+    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 todayDom = now.getUTCDate();
     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 offset = i - firstWeekday;
+        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 isToday = inMonth && dom === todayDom;
         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 class="rk-calendar-cell-posts"></div>
     </div>`);
     }
     return cells.join("");
 }
-export function renderReskinCalendar() {
-    const posts = allPosts();
-    const totalPosts = posts.length;
-    // weekday header
+export function renderReskinCalendar(input = DEFAULT_INPUT) {
+    const cfg = { ...DEFAULT_INPUT, ...input };
+    // "Schedule post" → the real destination the live app uses. Scheduling a post
+    // happens from the Library's schedule modal (POST /approved/posts/:id/schedules);
+    // if no channels are connected yet, the prerequisite is to connect them first.
+    const acctPrefix = /^\/u\/[^/]+/.exec(cfg.connectChannelsHref)?.[0] ?? "";
+    const scheduleHref = cfg.hasFlockPosterKey ? `${acctPrefix}/library` : cfg.connectChannelsHref;
+    const scheduleLabel = cfg.hasFlockPosterKey ? "Schedule post" : "Connect a channel";
     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("");
+    // seed + config handed to the client (posts arrive from the feed).
+    const boot = {
+        loadEndpoint: cfg.loadEndpoint,
+        hasChannels: cfg.hasFlockPosterKey,
+        connectChannelsHref: cfg.connectChannelsHref,
+        seedChannels: cfg.channels,
+        seedPosts: cfg.posts
+    };
+    const bootJson = JSON.stringify(boot).replace(/</g, "\\u003c");
     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>
+<main class="rk-container-wide rk-page rk-calendar-page">
+  <div class="rk-spread rk-page-head rk-calendar-head">
+    <div class="rk-stack rk-calendar-head-copy">
+      <h1 class="rk-h1">Calendar</h1>
+      <p class="rk-sub" data-rk-cal-sub>Your scheduled short-form posts across every connected channel.</p>
     </div>
-    <button type="button" class="rk-btn rk-btn-gold">＋ Schedule post</button>
+    <a class="rk-btn rk-btn-gold rk-btn-sm rk-calendar-cta" href="${rkEscape(scheduleHref)}">${rkEscape(scheduleLabel)} <span class="rk-arrow">&rarr;</span></a>
   </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-notice" data-rk-cal-notice hidden></div>
+
+  <div class="rk-calendar-shell">
+    <aside class="rk-calendar-rail" aria-label="Connected channels">
+      <label class="rk-calendar-chsearch">
+        <span class="rk-calendar-chsearch-ic" aria-hidden="true">${SEARCH_ICON}</span>
+        <input class="rk-input rk-calendar-chsearch-input" data-rk-cal-chsearch type="search"
+          placeholder="Search channels" autocomplete="off" aria-label="Search channels" />
+      </label>
+      <div class="rk-calendar-channels" data-rk-cal-channels></div>
+      <a class="rk-calendar-connect" href="${rkEscape(cfg.connectChannelsHref)}">+ Connect a channel</a>
+    </aside>
+
+    <section class="rk-calendar-stage">
+      <div class="rk-calendar-toolbar">
+        <div class="rk-calendar-monthnav">
+          <button type="button" class="rk-btn rk-btn-ghost rk-calendar-navbtn" data-rk-cal-prev aria-label="Previous month">&larr;</button>
+          <span class="rk-calendar-month" data-rk-cal-month>&nbsp;</span>
+          <button type="button" class="rk-btn rk-btn-ghost rk-calendar-navbtn" data-rk-cal-next aria-label="Next month">&rarr;</button>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-calendar-today-btn" data-rk-cal-today>Today</button>
+          <span class="rk-calendar-sync" data-rk-cal-sync aria-live="polite"></span>
+        </div>
+        <div class="rk-calendar-legend">${legend}</div>
+      </div>
 
-  <div class="rk-calendar-legend">${legend}</div>
-</main>`;
+      <div class="rk-card rk-calendar-grid-card">
+        <div class="rk-calendar-weekdays">${weekdayHead}</div>
+        <div class="rk-calendar-grid" data-rk-cal-grid>${skeletonCells()}</div>
+      </div>
+    </section>
+  </div>
+</main>
+<script type="application/json" data-rk-cal-boot>${bootJson}</script>`;
     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-page zeroes horizontal padding; the wide container == viewport at 1280 so
+   margin:auto adds no gutter. Restore side gutters (longhand beats the shorthand),
+   and trim the bottom so the whole month fits in one viewport. */
+.rk-calendar-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter);padding-bottom:28px}
+.rk-calendar-head{align-items:flex-start;margin-bottom:14px}
+.rk-calendar-head-copy{gap:4px;margin:0;flex:1 1 auto;min-width:0}
+.rk-calendar-cta{flex:none;margin-top:2px}
+
+/* notice banner (errors / empty warnings) */
+.rk-calendar-notice{margin-bottom:12px}
+.rk-calendar-notice[hidden]{display:none}
+
+/* two-column shell: channel rail left, compact month board right */
+.rk-calendar-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
+@media(max-width:960px){.rk-calendar-shell{grid-template-columns:1fr}}
+
+/* ── channel rail ── */
+.rk-calendar-rail{display:grid;gap:10px;background:#fff;border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-2xl);padding:12px;box-shadow:var(--rk-shadow-card)}
+.rk-calendar-chsearch{position:relative;display:block}
+.rk-calendar-chsearch-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--rk-n-400);pointer-events:none;display:flex}
+.rk-calendar-chsearch-input{padding:9px 12px 9px 37px;border-radius:var(--rk-r-full);font-size:13.5px}
+.rk-calendar-channels{display:grid;gap:6px;max-height:calc(100vh - 320px);min-height:120px;overflow:auto}
+.rk-calendar-channel{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;
+  border-radius:var(--rk-r-xl);background:transparent;cursor:pointer;text-align:left;font-family:var(--rk-font-body);
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-calendar-channel:hover{background:var(--rk-n-100)}
+.rk-calendar-channel.is-selected{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-calendar-channel-avatar{position:relative;width:34px;height:34px;border-radius:var(--rk-r-full);flex:none;overflow:visible}
+.rk-calendar-channel-avatar img{width:100%;height:100%;border-radius:var(--rk-r-full);object-fit:cover;display:block;
+  border:1px solid var(--rk-border)}
+.rk-calendar-channel-initials{width:100%;height:100%;border-radius:var(--rk-r-full);display:grid;place-items:center;
+  background:var(--rk-n-800);color:#fff;font-family:var(--rk-font-display);font-weight:800;font-size:12px;letter-spacing:.03em}
+.rk-calendar-channel-main{display:grid;gap:1px;min-width:0;flex:1}
+.rk-calendar-channel-name{font-size:13.5px;font-weight:700;color:var(--rk-ink);letter-spacing:-.01em;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-calendar-channel-sub{font-size:11.5px;font-weight:500;color:var(--rk-text-muted);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-calendar-channel-count{flex:none;font-size:11px;font-weight:700;color:var(--rk-text-muted);
+  background:var(--rk-n-100);border-radius:var(--rk-r-full);padding:2px 8px}
+.rk-calendar-channel.is-selected .rk-calendar-channel-count{background:#fff}
+.rk-calendar-channels-empty{padding:14px 10px;font-size:12.5px;color:var(--rk-text-muted);line-height:1.5}
+.rk-calendar-connect{display:block;text-align:center;padding:9px 12px;border:1.5px dashed var(--rk-border-strong);
+  border-radius:var(--rk-r-xl);font-size:13px;font-weight:600;color:var(--rk-text-muted);
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-calendar-connect:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink)}
+
+/* platform swatch badge on the avatar — letter initial, no emoji */
+.rk-calendar-swatch{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:6px;
+  display:grid;place-items:center;font-family:var(--rk-font-display);font-size:9px;font-weight:800;line-height:1;
+  box-shadow:var(--rk-shadow-xs);border:1.5px solid #fff}
+.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}
+.rk-calendar-swatch-generic{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+
+/* ── stage: toolbar + board ── */
+.rk-calendar-stage{display:grid;gap:10px;min-width:0}
+.rk-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
+.rk-calendar-monthnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.rk-calendar-month{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);letter-spacing:-.02em;color:var(--rk-ink);min-width:7.4rem;text-align:center}
+.rk-calendar-navbtn{width:32px;height:32px;padding:0;font-size:14px;line-height:1}
+.rk-calendar-today-btn{margin-left:2px;padding:5px 11px;font-size:12.5px}
+.rk-calendar-sync{font-size:12px;font-weight:600;color:var(--rk-text-muted);margin-left:4px}
+.rk-calendar-sync.is-error{color:var(--rk-red)}
+
+/* compact one-line legend, lives in the toolbar */
+.rk-calendar-legend{display:flex;flex-wrap:wrap;gap:12px}
+.rk-calendar-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--rk-text-muted)}
+
+/* month board — sized to the viewport so the whole month is visible */
+.rk-calendar-grid-card{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column;
+  height:calc(100vh - 218px);min-height:430px}
+@media(max-width:960px){.rk-calendar-grid-card{height:auto;min-height:0}}
+.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);flex:none}
+.rk-calendar-weekday{padding:8px 8px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rk-text-muted)}
+.rk-calendar-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:1fr;
+  gap:1px;background:var(--rk-border);transition:opacity var(--rk-dur) var(--rk-ease)}
+.rk-calendar-grid.is-loading{opacity:.55}
+.rk-calendar-cell{background:#fff;min-height:0;padding:6px 7px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
+  transition:background var(--rk-dur) var(--rk-ease)}
+@media(max-width:960px){.rk-calendar-cell{min-height:92px}}
 .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-head{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:none}
+.rk-calendar-daynum{width:22px;height:22px;border-radius:var(--rk-r-full);display:grid;place-items:center;
+  font-family:var(--rk-font-display);font-weight:700;font-size:12px;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}
+.rk-calendar-cell-posts{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:hidden}
 
-/* 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)}
+/* post chip — one compact line: status dot · time · title */
+.rk-calendar-chip{display:flex;gap:6px;align-items:center;width:100%;text-align:left;padding:3px 7px;border-radius:8px;
+  background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);cursor:pointer;min-width:0;flex:none;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease);text-decoration:none;color:inherit}
 .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}
+.rk-calendar-chip-time{flex:none;font-size:10px;font-weight:700;color:var(--rk-text-muted);font-variant-numeric:tabular-nums}
+.rk-calendar-chip-title{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--rk-ink);letter-spacing:-.01em;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-calendar-more{font-size:10px;font-weight:700;color:var(--rk-text-muted);padding:0 2px;background:none;border:0;cursor:default}
 
-/* 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}
+/* status dot — chips + legend */
+.rk-calendar-dot{width:7px;height:7px;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}
+  .rk-calendar-grid-card{overflow-x:auto}
+  .rk-calendar-toolbar{gap:10px}
 }
 `;
+    const script = `
+(function(){
+  var root=document;
+  var bootEl=root.querySelector('[data-rk-cal-boot]');
+  var boot={};
+  try{ boot=JSON.parse(bootEl&&bootEl.textContent||'{}'); }catch(e){ boot={}; }
+  var loadEndpoint=boot.loadEndpoint||'/calendar/feed';
+  var gridEl=root.querySelector('[data-rk-cal-grid]');
+  var monthEl=root.querySelector('[data-rk-cal-month]');
+  var subEl=root.querySelector('[data-rk-cal-sub]');
+  var syncEl=root.querySelector('[data-rk-cal-sync]');
+  var noticeEl=root.querySelector('[data-rk-cal-notice]');
+  var channelsEl=root.querySelector('[data-rk-cal-channels]');
+  var chSearchEl=root.querySelector('[data-rk-cal-chsearch]');
+  if(!gridEl){return;}
+
+  var STATUS=${JSON.stringify(STATUS)};
+  var monthFmt=new Intl.DateTimeFormat(undefined,{month:'long',year:'numeric'});
+  var timeFmt=new Intl.DateTimeFormat(undefined,{hour:'numeric',minute:'2-digit'});
+
+  var today=startOfDay(new Date());
+  var cursor=startOfMonth(today);
+  // channelId -> channel record (resolved from the feed's channels list, seeded first)
+  var channelsById={};
+  var channelOrder=[];
+  ingestChannels(boot.seedChannels||[]);
+  // dateKey -> [posts]; seed with any server-provided posts
+  var postsByDay={};
+  ingestPosts(boot.seedPosts||[]);
+  var loading=false;
+  var selectedChannelId='';
+  var channelQuery='';
+
+  function esc(s){var d=root.createElement('div');d.textContent=s==null?'':String(s);return d.innerHTML;}
+  function startOfDay(d){return new Date(d.getFullYear(),d.getMonth(),d.getDate());}
+  function startOfMonth(d){return new Date(d.getFullYear(),d.getMonth(),1);}
+  function startOfWeek(d){var n=startOfDay(d);n.setDate(n.getDate()-n.getDay());return n;}
+  function addDays(d,n){var x=new Date(d);x.setDate(x.getDate()+n);return startOfDay(x);}
+  function addMonths(d,n){var x=new Date(d.getFullYear(),d.getMonth()+n,1);return x;}
+  function toKey(d){return [d.getFullYear(),String(d.getMonth()+1).padStart(2,'0'),String(d.getDate()).padStart(2,'0')].join('-');}
+  function sameDay(a,b){return a.getFullYear()===b.getFullYear()&&a.getMonth()===b.getMonth()&&a.getDate()===b.getDate();}
+  function sameMonth(a,b){return a.getFullYear()===b.getFullYear()&&a.getMonth()===b.getMonth();}
+
+  function platformMeta(platform,channelId,kind){
+    var p=String(platform||'').toLowerCase();
+    if(p.indexOf('tiktok')>-1)return {initial:'T',swatch:'tiktok'};
+    if(p.indexOf('instagram')>-1)return {initial:'I',swatch:'instagram'};
+    if(p.indexOf('youtube')>-1)return {initial:'Y',swatch:'youtube'};
+    if(p.indexOf('email')>-1||/^email:/.test(String(channelId||''))||/email/i.test(String(kind||'')))return {initial:'E',swatch:'email'};
+    if(p.indexOf('facebook')>-1)return {initial:'F',swatch:'generic'};
+    if(p.indexOf('linkedin')>-1)return {initial:'L',swatch:'generic'};
+    if(p.indexOf('twitter')>-1||p==='x')return {initial:'X',swatch:'generic'};
+    var src=String(platform||channelId||'').replace(/^email:/,'').trim();
+    return {initial:(src.charAt(0)||'C').toUpperCase(),swatch:'generic'};
+  }
+
+  function ingestChannels(list){
+    (Array.isArray(list)?list:[]).forEach(function(ch){
+      if(!ch||ch.id==null)return;
+      var id=String(ch.id);
+      if(!channelsById[id])channelOrder.push(id);
+      channelsById[id]={
+        id:id,
+        name:ch.name||ch.title||id,
+        handle:ch.handle||null,
+        platform:ch.platform||null,
+        avatarUrl:ch.avatarUrl||null
+      };
+    });
+  }
+
+  function ingestPosts(list){
+    (Array.isArray(list)?list:[]).forEach(function(post){
+      if(!post)return;
+      var t=Date.parse(post.scheduledAt);
+      if(isNaN(t))return;
+      var d=startOfDay(new Date(t));
+      var key=toKey(d);
+      if(!postsByDay[key])postsByDay[key]=[];
+      // de-dupe by id within the day
+      var id=String(post.id||post.scheduleId||'');
+      if(id&&postsByDay[key].some(function(p){return String(p.id||p.scheduleId||'')===id;}))return;
+      postsByDay[key].push(post);
+      postsByDay[key].sort(function(a,b){return Date.parse(a.scheduledAt)-Date.parse(b.scheduledAt);});
+    });
+  }
+
+  function postCountFor(channelId){
+    var n=0;
+    Object.keys(postsByDay).forEach(function(key){
+      postsByDay[key].forEach(function(p){ if(String(p.channelId)===channelId)n++; });
+    });
+    return n;
+  }
+
+  function channelInitials(name){
+    return String(name||'').split(/\\s+/).filter(Boolean).slice(0,2)
+      .map(function(part){return (part[0]||'').toUpperCase();}).join('')||'CH';
+  }
+
+  function renderChannels(){
+    if(!channelsEl)return;
+    var q=channelQuery.trim().toLowerCase();
+    var ids=channelOrder.filter(function(id){
+      if(!q)return true;
+      var ch=channelsById[id];
+      return [ch.name,ch.handle,ch.platform,ch.id].filter(Boolean).join(' ').toLowerCase().indexOf(q)>-1;
+    });
+    if(!channelOrder.length){
+      channelsEl.innerHTML='<div class="rk-calendar-channels-empty">No channels connected yet. Connect FlockPoster or add an email channel to start scheduling.</div>';
+      return;
+    }
+    if(!ids.length){
+      channelsEl.innerHTML='<div class="rk-calendar-channels-empty">No channels match \\u201c'+esc(channelQuery)+'\\u201d.</div>';
+      return;
+    }
+    var allBtn='<button type="button" class="rk-calendar-channel'+(selectedChannelId===''?' is-selected':'')+'" data-rk-channel="">'
+      +'<span class="rk-calendar-channel-avatar"><span class="rk-calendar-channel-initials">All</span></span>'
+      +'<span class="rk-calendar-channel-main">'
+        +'<span class="rk-calendar-channel-name">All channels</span>'
+        +'<span class="rk-calendar-channel-sub">'+channelOrder.length+' connected</span>'
+      +'</span>'
+    +'</button>';
+    var items=ids.map(function(id){
+      var ch=channelsById[id];
+      var pm=platformMeta(ch.platform,ch.id,null);
+      var avatar=ch.avatarUrl
+        ? '<img src="'+esc(ch.avatarUrl)+'" alt="" loading="lazy" />'
+        : '<span class="rk-calendar-channel-initials">'+esc(channelInitials(ch.name))+'</span>';
+      var count=postCountFor(id);
+      return '<button type="button" class="rk-calendar-channel'+(selectedChannelId===id?' is-selected':'')+'" data-rk-channel="'+esc(id)+'">'
+        +'<span class="rk-calendar-channel-avatar">'+avatar
+          +'<span class="rk-calendar-swatch rk-calendar-swatch-'+pm.swatch+'" aria-hidden="true">'+esc(pm.initial)+'</span>'
+        +'</span>'
+        +'<span class="rk-calendar-channel-main">'
+          +'<span class="rk-calendar-channel-name">'+esc(ch.name)+'</span>'
+          +'<span class="rk-calendar-channel-sub">'+esc([ch.platform,ch.handle].filter(Boolean).join(' \\u00b7 ')||'Channel')+'</span>'
+        +'</span>'
+        +(count?'<span class="rk-calendar-channel-count">'+count+'</span>':'')
+      +'</button>';
+    }).join('');
+    channelsEl.innerHTML=allBtn+items;
+  }
+
+  function chip(post){
+    var tone=String(post.statusTone||'draft');
+    var meta=STATUS[tone]||{label:tone,pill:'rk-pill'};
+    var time='';
+    var t=Date.parse(post.scheduledAt);
+    if(!isNaN(t))time=timeFmt.format(new Date(t));
+    var label=post.status?String(post.status):meta.label;
+    var title=post.title||'Scheduled post';
+    var ch=channelsById[String(post.channelId)];
+    var chName=ch?ch.name:'';
+    var tag='a';var attrs='';
+    if(post.url){attrs=' href="'+esc(post.url)+'" target="_blank" rel="noreferrer"';}else{tag='button';attrs=' type="button"';}
+    return '<'+tag+' class="rk-calendar-chip"'+attrs+' title="'+esc(title+' \\u00b7 '+label+(time?' \\u00b7 '+time:'')+(chName?' \\u00b7 '+chName:''))+'">'
+      +'<span class="rk-calendar-dot" data-status="'+esc(tone)+'" aria-hidden="true"></span>'
+      +(time?'<span class="rk-calendar-chip-time">'+esc(time)+'</span>':'')
+      +'<span class="rk-calendar-chip-title">'+esc(title)+'</span>'
+    +'</'+tag+'>';
+  }
+
+  function visiblePosts(key){
+    var dayPosts=postsByDay[key]||[];
+    if(!selectedChannelId)return dayPosts;
+    return dayPosts.filter(function(p){return String(p.channelId)===selectedChannelId;});
+  }
+
+  function renderGrid(){
+    monthEl.textContent=monthFmt.format(cursor);
+    var firstCell=startOfWeek(startOfMonth(cursor));
+    var lastOfMonth=new Date(cursor.getFullYear(),cursor.getMonth()+1,0);
+    var rows=Math.ceil((addDays(lastOfMonth,0).getTime()-firstCell.getTime())/(7*86400000))||5;
+    rows=Math.max(rows,Math.ceil(((startOfMonth(cursor).getDay())+lastOfMonth.getDate())/7));
+    var total=rows*7;
+    var cells=[];
+    var monthPostCount=0;
+    for(var i=0;i<total;i++){
+      var d=addDays(firstCell,i);
+      var key=toKey(d);
+      var dayPosts=visiblePosts(key);
+      var inMonth=sameMonth(d,cursor);
+      if(inMonth)monthPostCount+=dayPosts.length;
+      var isToday=sameDay(d,today);
+      var cls='rk-calendar-cell';
+      if(!inMonth)cls+=' is-out';
+      if(isToday)cls+=' is-today';
+      var shown=dayPosts.slice(0,2);
+      var overflow=dayPosts.length-shown.length;
+      var chips=shown.map(chip).join('');
+      var more=overflow>0?'<span class="rk-calendar-more">+'+overflow+' more</span>':'';
+      cells.push('<div class="'+cls+'">'
+        +'<div class="rk-calendar-cell-head"><span class="rk-calendar-daynum">'+d.getDate()+'</span></div>'
+        +'<div class="rk-calendar-cell-posts">'+chips+more+'</div>'
+      +'</div>');
+    }
+    gridEl.innerHTML=cells.join('');
+    if(subEl){
+      var scope=selectedChannelId&&channelsById[selectedChannelId]?(' on '+channelsById[selectedChannelId].name):'';
+      subEl.textContent=monthPostCount
+        ?(monthPostCount+' scheduled post'+(monthPostCount===1?'':'s')+scope+' in '+monthFmt.format(cursor)+'.')
+        :('Nothing scheduled'+scope+' in '+monthFmt.format(cursor)+' yet.');
+    }
+  }
+
+  function setNotice(msg,isError){
+    if(!noticeEl)return;
+    if(!msg){noticeEl.hidden=true;noticeEl.textContent='';noticeEl.className='rk-calendar-notice';return;}
+    noticeEl.hidden=false;
+    noticeEl.className='rk-calendar-notice rk-notice '+(isError?'rk-notice-err':'rk-notice-ok');
+    noticeEl.textContent=msg;
+  }
+
+  function setSync(msg,isError){
+    if(!syncEl)return;
+    syncEl.textContent=msg||'';
+    syncEl.className='rk-calendar-sync'+(isError?' is-error':'');
+  }
+
+  function load(){
+    if(loading)return;
+    loading=true;
+    gridEl.classList.add('is-loading');
+    setSync('Loading\\u2026',false);
+    var first=startOfWeek(startOfMonth(cursor));
+    var last=addDays(first,41);
+    var params=new URLSearchParams({start_date:toKey(first),end_date:toKey(last)});
+    var url;
+    try{
+      var u=new URL(loadEndpoint,window.location.origin);
+      params.forEach(function(v,k){u.searchParams.set(k,v);});
+      url=u.pathname+u.search;
+    }catch(e){ url=loadEndpoint+(loadEndpoint.indexOf('?')>-1?'&':'?')+params.toString(); }
+    fetch(url,{credentials:'same-origin',headers:{Accept:'application/json'}})
+      .then(function(r){return r.json().catch(function(){return {};}).then(function(j){return {ok:r.ok,json:j};});})
+      .then(function(res){
+        var payload=res.json||{};
+        if(!res.ok){
+          var em=(payload&&typeof payload.error==='string'&&payload.error)?payload.error:'Unable to load calendar.';
+          throw new Error(em);
+        }
+        ingestChannels(payload.channels||[]);
+        ingestPosts(payload.posts||[]);
+        if(payload&&typeof payload.error==='string'&&payload.error){
+          setNotice(payload.error,false);
+        }else{
+          setNotice('',false);
+        }
+        setSync(payload&&payload.syncStatus==='error'?'Synced with warnings':'Up to date',payload&&payload.syncStatus==='error');
+        renderChannels();
+        renderGrid();
+      })
+      .catch(function(err){
+        var msg=(err&&err.message)?err.message:'Unable to load calendar.';
+        setNotice(msg,true);
+        setSync('Offline',true);
+        renderChannels();
+        renderGrid();
+      })
+      .finally(function(){
+        loading=false;
+        gridEl.classList.remove('is-loading');
+      });
+  }
+
+  if(channelsEl){
+    channelsEl.addEventListener('click',function(e){
+      var btn=e.target.closest('[data-rk-channel]');
+      if(!btn)return;
+      selectedChannelId=btn.getAttribute('data-rk-channel')||'';
+      renderChannels();
+      renderGrid();
+    });
+  }
+  if(chSearchEl){
+    chSearchEl.addEventListener('input',function(){
+      channelQuery=chSearchEl.value||'';
+      renderChannels();
+    });
+  }
+
+  root.querySelector('[data-rk-cal-prev]')&&root.querySelector('[data-rk-cal-prev]').addEventListener('click',function(){cursor=addMonths(cursor,-1);renderGrid();load();});
+  root.querySelector('[data-rk-cal-next]')&&root.querySelector('[data-rk-cal-next]').addEventListener('click',function(){cursor=addMonths(cursor,1);renderGrid();load();});
+  root.querySelector('[data-rk-cal-today]')&&root.querySelector('[data-rk-cal-today]').addEventListener('click',function(){cursor=startOfMonth(today);renderGrid();load();});
+
+  renderChannels();
+  renderGrid();
+  load();
+})();`;
     return reskinDocument({
         title: "vidfarm reskin — Calendar",
-        description: "Reskinned vidfarm calendar — a calm, full-width month of scheduled short-form posts.",
+        description: "Reskinned vidfarm calendar — connected channels on the left, a compact viewport-fit month of scheduled posts on the right, live from /calendar/feed.",
         activeSlug: "calendar",
         pageCss,
-        body
+        body,
+        script
     });
 }
 //# sourceMappingURL=calendar-page.js.map