${dayEvents.length === 0 ? `
No events
` :
dayEvents.sort((a, b) => a.start_time.localeCompare(b.start_time)).map(e => {
@@ -1866,6 +1869,70 @@ class FolkCalendarView extends HTMLElement {
setTimeout(() => document.addEventListener("click", closeHandler), 100);
}
+ private showDayAddForm(dateStr: string) {
+ // Remove any existing add-form
+ this.shadow.querySelector(".dd-add-form")?.remove();
+
+ const friendlyDate = new Date(dateStr + "T12:00:00").toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+ const form = document.createElement("div");
+ form.className = "dd-add-form";
+ form.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ const detail = this.shadow.querySelector(".day-detail");
+ if (!detail) return;
+ detail.appendChild(form);
+
+ const titleInput = form.querySelector(".dd-add-title") as HTMLInputElement;
+ titleInput.focus();
+
+ const createReminder = async (hour: number, minute = 0) => {
+ const title = titleInput.value.trim();
+ if (!title) { titleInput.focus(); titleInput.style.borderColor = "#ef4444"; return; }
+ form.remove();
+ const remindAt = new Date(`${dateStr}T${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`).getTime();
+ const base = this.getScheduleApiBase();
+ try {
+ await fetch(`${base}/api/reminders`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ title, remindAt, allDay: false, syncToCalendar: true }),
+ });
+ if (this.space === "demo") { this.loadDemoData(); } else { this.loadMonth(); }
+ } catch (err) {
+ console.error("[rCal] Failed to create reminder:", err);
+ }
+ };
+
+ // Quick-pick time buttons
+ form.querySelectorAll
(".dd-add-time[data-hour]").forEach((btn) => {
+ btn.addEventListener("click", () => createReminder(parseInt(btn.dataset.hour!)));
+ });
+
+ // Custom time + submit
+ form.querySelector(".dd-add-submit")?.addEventListener("click", () => {
+ const input = form.querySelector(".dd-add-time-input") as HTMLInputElement;
+ const [h, m] = (input.value || "09:00").split(":").map(Number);
+ createReminder(h, m);
+ });
+
+ // Enter key in title → use 9 AM default
+ titleInput.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") createReminder(9);
+ });
+ }
+
startTour() { this._tour.start(); }
// ── Attach Listeners ──
@@ -2178,6 +2245,14 @@ class FolkCalendarView extends HTMLElement {
e.stopPropagation(); this.expandedDay = ""; this.render();
});
+ // Add reminder from day detail
+ $("dd-add")?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const dateStr = (e.target as HTMLElement).dataset.addDate;
+ if (!dateStr) return;
+ this.showDayAddForm(dateStr);
+ });
+
// Modal close
$("modal-overlay")?.addEventListener("click", (e) => {
if ((e.target as HTMLElement).id === "modal-overlay") { this.selectedEvent = null; this.render(); }
@@ -2644,7 +2719,20 @@ class FolkCalendarView extends HTMLElement {
.day-detail { grid-column: 1 / -1; background: var(--rs-bg-surface); border: 1px solid var(--rs-bg-surface-raised); border-radius: 8px; padding: 12px; }
.dd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dd-date { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); }
+ .dd-header-actions { display: flex; gap: 4px; align-items: center; }
+ .dd-add { background: none; border: 1px solid var(--rs-border-strong, #444); color: var(--rs-primary-hover, #818cf8); font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 6px; line-height: 1; }
+ .dd-add:hover { background: var(--rs-bg-hover); }
.dd-close { background: none; border: none; color: var(--rs-text-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }
+ .dd-add-form { margin-top: 8px; padding: 10px; background: var(--rs-bg-surface-raised, #2a2a3e); border-radius: 8px; border: 1px solid var(--rs-border-strong, #444); }
+ .dd-add-title { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--rs-border-strong, #444); background: var(--rs-bg-surface, #1e1e2e); color: var(--rs-text-primary, #e0e0e0); font-size: 13px; margin-bottom: 8px; box-sizing: border-box; }
+ .dd-add-title:focus { outline: none; border-color: var(--rs-primary-hover, #818cf8); }
+ .dd-add-times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
+ .dd-add-time { padding: 6px; border-radius: 6px; border: 1px solid var(--rs-border-strong, #444); background: var(--rs-bg-surface, #1e1e2e); color: var(--rs-text-primary, #e0e0e0); cursor: pointer; font-size: 12px; text-align: center; }
+ .dd-add-time:hover { border-color: var(--rs-primary-hover, #818cf8); background: var(--rs-bg-hover); }
+ .dd-add-custom { display: flex; gap: 6px; }
+ .dd-add-time-input { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rs-border-strong, #444); background: var(--rs-bg-surface, #1e1e2e); color: var(--rs-text-primary, #e0e0e0); font-size: 12px; }
+ .dd-add-submit { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rs-primary-hover, #818cf8); background: var(--rs-primary-hover, #818cf8); color: #fff; cursor: pointer; font-size: 12px; font-weight: 500; }
+ .dd-add-submit:hover { opacity: 0.9; }
.dd-event { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dd-event:hover { background: var(--rs-bg-hover); }
.dd-color { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
diff --git a/modules/rpubs/components/folk-pubs-editor.ts b/modules/rpubs/components/folk-pubs-editor.ts
index 81e0b58..1e6ba79 100644
--- a/modules/rpubs/components/folk-pubs-editor.ts
+++ b/modules/rpubs/components/folk-pubs-editor.ts
@@ -69,6 +69,7 @@ export class FolkPubsEditor extends HTMLElement {
private _error: string | null = null;
private _pdfUrl: string | null = null;
private _pdfInfo: string | null = null;
+ private _pdfPageCount = 0;
// ── Automerge collaborative state ──
private _runtime: any = null;
@@ -98,7 +99,7 @@ export class FolkPubsEditor extends HTMLElement {
}
async connectedCallback() {
- this.attachShadow({ mode: "open" });
+ if (!this.shadowRoot) this.attachShadow({ mode: "open" });
this._tour = new TourEngine(
this.shadowRoot!,
FolkPubsEditor.TOUR_STEPS,
@@ -441,8 +442,15 @@ export class FolkPubsEditor extends HTMLElement {
${this._pdfUrl ? `
` : `
@@ -582,6 +590,17 @@ export class FolkPubsEditor extends HTMLElement {
}
});
+ // Fullscreen toggle for flipbook
+ this.shadowRoot.querySelector(".btn-fullscreen")?.addEventListener("click", () => {
+ const flipbook = this.shadowRoot!.querySelector("folk-pubs-flipbook");
+ if (!flipbook) return;
+ if (document.fullscreenElement) {
+ document.exitFullscreen();
+ } else {
+ flipbook.requestFullscreen().catch(() => {});
+ }
+ });
+
// Generate PDF
generateBtn?.addEventListener("click", async () => {
const content = textarea.value.trim();
@@ -598,7 +617,7 @@ export class FolkPubsEditor extends HTMLElement {
this.render();
try {
- const res = await fetch(`/${this._spaceSlug}/pubs/api/generate`, {
+ const res = await fetch(`/${this._spaceSlug}/rpubs/api/generate`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
@@ -619,7 +638,8 @@ export class FolkPubsEditor extends HTMLElement {
const format = this._formats.find((f) => f.id === this._selectedFormat);
this._pdfUrl = URL.createObjectURL(blob);
- this._pdfInfo = `${pageCount} pages · ${format?.name || this._selectedFormat}`;
+ this._pdfPageCount = parseInt(pageCount) || 0;
+ this._pdfInfo = `${pageCount} pages \u00B7 ${format?.name || this._selectedFormat}`;
this._loading = false;
this.render();
} catch (e: any) {
@@ -887,26 +907,19 @@ export class FolkPubsEditor extends HTMLElement {
text-align: center;
}
- .pdf-preview {
+ .btn-fullscreen {
+ display: block;
width: 100%;
- height: 300px;
+ text-align: center;
+ padding: 0.375rem;
border: 1px solid var(--rs-border);
border-radius: 0.375rem;
- background: #fff;
+ background: var(--rs-bg-surface);
+ color: var(--rs-text-secondary);
+ font-size: 0.75rem;
+ cursor: pointer;
}
-
- .btn-download {
- display: block;
- text-align: center;
- padding: 0.5rem;
- border: 1px solid var(--rs-success);
- border-radius: 0.375rem;
- color: var(--rs-success);
- text-decoration: none;
- font-size: 0.85rem;
- font-weight: 500;
- }
- .btn-download:hover { background: rgba(34, 197, 94, 0.1); }
+ .btn-fullscreen:hover { border-color: var(--rs-primary); color: var(--rs-text-primary); }
.placeholder {
color: var(--rs-text-muted);
diff --git a/modules/rpubs/components/folk-pubs-flipbook.ts b/modules/rpubs/components/folk-pubs-flipbook.ts
new file mode 100644
index 0000000..9a2b88b
--- /dev/null
+++ b/modules/rpubs/components/folk-pubs-flipbook.ts
@@ -0,0 +1,288 @@
+/**
+ *
— Interactive page-flip PDF preview using pdf.js + StPageFlip.
+ *
+ * Ephemeral preview for generated PDFs — no IndexedDB caching needed.
+ * Follows the pattern from folk-book-reader.ts.
+ *
+ * Attributes:
+ * pdf-url — Blob URL or HTTP URL to the PDF
+ */
+
+const PDFJS_CDN = "https://unpkg.com/pdfjs-dist@4.9.155/build/pdf.min.mjs";
+const PDFJS_WORKER_CDN = "https://unpkg.com/pdfjs-dist@4.9.155/build/pdf.worker.min.mjs";
+const STPAGEFLIP_CDN = "https://unpkg.com/page-flip@2.0.7/dist/js/page-flip.browser.js";
+
+export class FolkPubsFlipbook extends HTMLElement {
+ private _pdfUrl = "";
+ private _pageImages: string[] = [];
+ private _numPages = 0;
+ private _currentPage = 0;
+ private _aspectRatio = 1.414;
+ private _isLoading = true;
+ private _loadingProgress = 0;
+ private _loadingStatus = "Preparing...";
+ private _error: string | null = null;
+ private _flipBook: any = null;
+ private _keyHandler: ((e: KeyboardEvent) => void) | null = null;
+ private _resizeTimer: ReturnType | null = null;
+
+ static get observedAttributes() {
+ return ["pdf-url"];
+ }
+
+ attributeChangedCallback(name: string, _old: string, val: string) {
+ if (name === "pdf-url" && val !== _old) {
+ this._pdfUrl = val;
+ if (this.shadowRoot) this.loadPDF();
+ }
+ }
+
+ connectedCallback() {
+ this._pdfUrl = this.getAttribute("pdf-url") || "";
+ if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+ this.renderLoading();
+ if (this._pdfUrl) this.loadPDF();
+ }
+
+ disconnectedCallback() {
+ this._flipBook?.destroy();
+ if (this._keyHandler) document.removeEventListener("keydown", this._keyHandler);
+ if (this._resizeTimer) clearTimeout(this._resizeTimer);
+ }
+
+ private async loadPDF() {
+ this._isLoading = true;
+ this._error = null;
+ this._pageImages = [];
+ this.renderLoading();
+
+ try {
+ this._loadingStatus = "Loading PDF.js...";
+ this.updateLoadingUI();
+
+ const pdfjsLib = await import(/* @vite-ignore */ PDFJS_CDN);
+ pdfjsLib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_CDN;
+
+ this._loadingStatus = "Rendering pages...";
+ this.updateLoadingUI();
+
+ const pdf = await pdfjsLib.getDocument(this._pdfUrl).promise;
+ this._numPages = pdf.numPages;
+
+ const firstPage = await pdf.getPage(1);
+ const viewport = firstPage.getViewport({ scale: 1 });
+ this._aspectRatio = viewport.width / viewport.height;
+
+ const scale = 2;
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d")!;
+
+ for (let i = 1; i <= pdf.numPages; i++) {
+ this._loadingStatus = `Rendering page ${i} of ${pdf.numPages}...`;
+ this._loadingProgress = Math.round((i / pdf.numPages) * 100);
+ this.updateLoadingUI();
+
+ const page = await pdf.getPage(i);
+ const vp = page.getViewport({ scale });
+ canvas.width = vp.width;
+ canvas.height = vp.height;
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ await page.render({ canvasContext: ctx, viewport: vp }).promise;
+ this._pageImages.push(canvas.toDataURL("image/jpeg", 0.85));
+ }
+
+ this._isLoading = false;
+ this._currentPage = 0;
+ this.renderReader();
+ } catch (e: any) {
+ this._error = e.message || "Failed to render PDF";
+ this._isLoading = false;
+ this.renderError();
+ }
+ }
+
+ private renderLoading() {
+ if (!this.shadowRoot) return;
+ this.shadowRoot.innerHTML = `
+ ${this.getStyles()}
+
+
+
${this._loadingStatus}
+
+
+
Failed to render preview: ${this._error || "Unknown error"}
+
+
+
+ Page ${this._currentPage + 1} of ${this._numPages}
+
+
+
+
+
+
+
+
+ ${this._activeTab === 'share' ? this.renderShareTab() : ''}
+ ${this._activeTab === 'diy' ? this.renderDiyTab() : ''}
+ ${this._activeTab === 'order' ? this.renderOrderTab() : ''}
+
+
+
Download PDF
+
+
+
+
+
+ ${this._emailSent ? '
PDF sent!
' : ''}
+ ${this._emailError ? `
${this.esc(this._emailError)}
` : ''}
+
+ ${this._formatName} · ${this._pageCount} pages
+
+ `;
+ }
+
+ private renderDiyTab(): string {
+ return `
+
+
+
Pre-arranged pages for double-sided printing & folding.
+
+
+
+ ${this._printersError ? `
${this.esc(this._printersError)}
` : ''}
+ ${this._printers.length > 0 ? this.renderPrinterList() : ''}
+
+ ${this._printers.map((p) => `
+
+ `).join('')}
+
+
+
+
${this.esc(p.name)}
+
+ ${p.address ? `
${this.esc(p.address)}
` : ''}
+ ${p.website ? `
` : ''}
+ ${p.email ? `
${this.esc(p.email)}
` : ''}
+ ${p.phone ? `
${this.esc(p.phone)}
` : ''}
+ ${p.description ? `
${this.esc(p.description)}
` : ''}
+
+
+
+ ${this._orderStatus ? `
${this.esc(this._orderStatus)}
` : ''}
+ ${this._batchStatus ? `
Batch: ${this._batchStatus.action} · ${this._batchStatus.participants || '?'} participants
` : ''}
+
+
No guide available for this format.
'; return; }
+
+ const binding = recommendedBinding(this._formatId, this._pageCount);
+ const padded = paddedPageCount(this._pageCount);
+ const sheets = Math.ceil(padded / guide.pagesPerSheet);
+
+ target.innerHTML = `
+
+
${guide.formatName} — DIY Guide
+
Sheets needed: ${sheets} (${guide.parentSheet})
+
Binding: ${binding}
+
Paper: ${guide.paperRecommendation}
+
+
Tools
+
${guide.tools.map((t: string) => `- ${t}
`).join('')}
+
+
Folding
+
${guide.foldInstructions.map((s: string) => `- ${s}
`).join('')}
+
+
Binding
+
${guide.bindingInstructions.filter((s: string) => s).map((s: string) => `- ${s.replace(/^\s+/, '')}
`).join('')}
+
+
Tips
+
${guide.tips.map((t: string) => `- ${t}
`).join('')}
+
`,
+ `
Your publication is ready
`,
+ `
`,
+ `${title || document.title || "Untitled"}`,
+ author ? ` by ${author}` : "",
+ `
`,
+ `
`,
+ `| Format | ${format.name} |
`,
+ `| Pages | ${result.pageCount} |
`,
+ `
`,
+ `
The PDF is attached below.
`,
+ `
`,
+ `
rPubs · Community pocket press · rpubs.online
`,
+ `