@emdash-cms/cloudflare 0.0.1

package/src/db/playground-toolbar.ts

@@ -0,0 +1,341 @@
+/**
+ * Playground Toolbar
+ *
+ * A floating pill injected by the playground middleware into HTML responses.
+ * Shows edit toggle, time remaining, reset button, and deploy CTA.
+ * No dependencies -- plain HTML string with inline styles and a <script> tag.
+ *
+ * The edit toggle sets the emdash-edit-mode cookie, same as the normal
+ * visual editing toolbar. The data-edit-mode attribute on the toolbar div
+ * activates the hover outlines on [data-emdash-ref] elements via CSS :has().
+ */
+
+export interface PlaygroundToolbarConfig {
+	/** When the playground was created (ISO string) */
+	createdAt: string;
+	/** TTL in seconds */
+	ttl: number;
+	/** Whether edit mode is currently active */
+	editMode: boolean;
+}
+
+const RE_AMP = /&/g;
+const RE_QUOT = /"/g;
+const RE_LT = /</g;
+const RE_GT = />/g;
+
+export function renderPlaygroundToolbar(config: PlaygroundToolbarConfig): string {
+	const { createdAt, ttl, editMode } = config;
+
+	return `
+<!-- EmDash Playground Toolbar -->
+<div id="emdash-playground-toolbar" data-created-at="${escapeAttr(createdAt)}" data-ttl="${ttl}" data-edit-mode="${editMode}">
+  <div class="ec-pg-inner">
+    <span class="ec-pg-badge">Playground</span>
+
+    <div class="ec-pg-divider"></div>
+
+    <label class="ec-pg-toggle" title="Toggle visual editing">
+      <input type="checkbox" id="ec-pg-edit-toggle" ${editMode ? "checked" : ""} />
+      <span class="ec-pg-toggle-track">
+        <span class="ec-pg-toggle-thumb"></span>
+      </span>
+      <span class="ec-pg-toggle-label">Edit</span>
+    </label>
+
+    <div class="ec-pg-divider"></div>
+
+    <span class="ec-pg-status" id="ec-pg-status"></span>
+
+    <div class="ec-pg-divider"></div>
+
+    <button class="ec-pg-btn ec-pg-btn--reset" id="ec-pg-reset" title="Reset playground">
+      <svg class="ec-pg-icon" id="ec-pg-reset-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+    </button>
+
+    <a class="ec-pg-btn ec-pg-btn--deploy" href="https://docs.emdashcms.com/getting-started" target="_blank" rel="noopener">
+      Deploy your own
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+    </a>
+
+    <button class="ec-pg-btn ec-pg-close" id="ec-pg-dismiss" title="Dismiss toolbar">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  </div>
+</div>
+
+<style>
+  #emdash-playground-toolbar {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  #emdash-playground-toolbar.ec-pg-hidden {
+    display: none;
+  }
+
+  .ec-pg-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px 8px 16px;
+    background: #1a1a1a;
+    color: #e0e0e0;
+    border-radius: 999px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .ec-pg-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    background: rgba(234,179,8,0.2);
+    color: #facc15;
+  }
+
+  .ec-pg-divider {
+    width: 1px;
+    height: 16px;
+    background: rgba(255,255,255,0.15);
+  }
+
+  /* Edit toggle */
+  .ec-pg-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+  }
+
+  .ec-pg-toggle input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .ec-pg-toggle-track {
+    position: relative;
+    width: 28px;
+    height: 16px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.15);
+    transition: background 0.15s;
+  }
+
+  .ec-pg-toggle input:checked + .ec-pg-toggle-track {
+    background: #3b82f6;
+  }
+
+  .ec-pg-toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.15s;
+  }
+
+  .ec-pg-toggle input:checked + .ec-pg-toggle-track .ec-pg-toggle-thumb {
+    transform: translateX(12px);
+  }
+
+  .ec-pg-toggle-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #999;
+    transition: color 0.15s;
+  }
+
+  .ec-pg-toggle input:checked ~ .ec-pg-toggle-label {
+    color: #e0e0e0;
+  }
+
+  .ec-pg-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #999;
+  }
+
+  .ec-pg-status--warning {
+    color: #fbbf24;
+  }
+
+  .ec-pg-status--expired {
+    color: #f87171;
+  }
+
+  .ec-pg-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    transition: color 0.15s, background 0.15s;
+    font-family: inherit;
+    text-decoration: none;
+  }
+
+  .ec-pg-btn:hover {
+    color: #fff;
+    background: rgba(255,255,255,0.08);
+  }
+
+  .ec-pg-btn--deploy {
+    gap: 5px;
+    padding: 5px 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #facc15;
+    background: rgba(234,179,8,0.12);
+    border-radius: 999px;
+  }
+
+  .ec-pg-btn--deploy:hover {
+    background: rgba(234,179,8,0.22);
+    color: #fde047;
+  }
+
+  .ec-pg-icon {
+    transition: transform 0.3s;
+  }
+
+  .ec-pg-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ec-pg-btn:disabled:hover {
+    color: #888;
+    background: none;
+  }
+
+  @keyframes ec-pg-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .ec-pg-spinning .ec-pg-icon {
+    animation: ec-pg-spin 0.8s linear infinite;
+  }
+
+  /* Edit mode: editable hover styles (mirrors the visual editing toolbar CSS) */
+  body:has(#emdash-playground-toolbar[data-edit-mode="true"]) [data-emdash-ref] {
+    transition: box-shadow 0.15s, background-color 0.15s;
+  }
+
+  body:has(#emdash-playground-toolbar[data-edit-mode="true"]) [data-emdash-ref]:hover {
+    box-shadow: 0 0 0 2px rgba(59,130,246,0.5);
+    border-radius: 4px;
+    background-color: rgba(59,130,246,0.04);
+    cursor: text;
+  }
+</style>
+
+<script>
+(function() {
+  var toolbar = document.getElementById("emdash-playground-toolbar");
+  var statusEl = document.getElementById("ec-pg-status");
+  var resetBtn = document.getElementById("ec-pg-reset");
+  var dismissBtn = document.getElementById("ec-pg-dismiss");
+  var editToggle = document.getElementById("ec-pg-edit-toggle");
+  if (!toolbar || !statusEl || !resetBtn || !dismissBtn || !editToggle) return;
+
+  var createdAt = toolbar.getAttribute("data-created-at");
+  var ttl = parseInt(toolbar.getAttribute("data-ttl") || "3600", 10);
+
+  function getRemaining() {
+    if (!createdAt) return 0;
+    var created = new Date(createdAt).getTime();
+    var expiresAt = created + ttl * 1000;
+    return Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
+  }
+
+  function formatRemaining(seconds) {
+    if (seconds <= 0) return "Expired";
+    var m = Math.floor(seconds / 60);
+    if (m >= 60) {
+      var h = Math.floor(m / 60);
+      m = m % 60;
+      return h + "h " + m + "m";
+    }
+    return m + "m remaining";
+  }
+
+  function updateStatus() {
+    var remaining = getRemaining();
+    statusEl.textContent = formatRemaining(remaining);
+    if (remaining <= 0) {
+      statusEl.className = "ec-pg-status ec-pg-status--expired";
+    } else if (remaining < 300) {
+      statusEl.className = "ec-pg-status ec-pg-status--warning";
+    } else {
+      statusEl.className = "ec-pg-status";
+    }
+  }
+
+  updateStatus();
+  // Update every 30s -- no seconds shown so no need for frequent updates
+  var interval = setInterval(updateStatus, 30000);
+
+  // Edit mode toggle -- sets cookie and reloads
+  editToggle.addEventListener("change", function() {
+    if (editToggle.checked) {
+      document.cookie = "emdash-edit-mode=true;path=/;samesite=lax";
+      toolbar.setAttribute("data-edit-mode", "true");
+    } else {
+      document.cookie = "emdash-edit-mode=;path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      toolbar.setAttribute("data-edit-mode", "false");
+    }
+    if (document.startViewTransition) {
+      document.startViewTransition(function() { location.replace(location.href); });
+    } else {
+      location.replace(location.href);
+    }
+  });
+
+  resetBtn.addEventListener("click", function() {
+    resetBtn.disabled = true;
+    resetBtn.classList.add("ec-pg-spinning");
+    statusEl.className = "ec-pg-status";
+    statusEl.textContent = "Resetting\\u2026";
+    location.href = "/_playground/reset";
+  });
+
+  dismissBtn.addEventListener("click", function() {
+    toolbar.classList.add("ec-pg-hidden");
+    clearInterval(interval);
+  });
+})();
+</script>
+`;
+}
+
+function escapeAttr(str: string): string {
+	return str
+		.replace(RE_AMP, "&amp;")
+		.replace(RE_QUOT, "&quot;")
+		.replace(RE_LT, "&lt;")
+		.replace(RE_GT, "&gt;");
+}

package/src/db/playground.ts

@@ -0,0 +1,49 @@
+/**
+ * Durable Object playground database -- RUNTIME ENTRY
+ *
+ * Provides a createDialect() that the virtual module system expects,
+ * plus re-exports the DO class and playground middleware.
+ *
+ * In playground mode, the actual DB connection is always set by the
+ * playground middleware via ALS (runWithContext). The createDialect
+ * here creates a "dummy" dialect that will be overridden per-request.
+ * If a query somehow runs without the middleware's ALS override,
+ * the dialect throws a clear error.
+ *
+ * This module imports from cloudflare:workers transitively.
+ * Do NOT import this at config time.
+ */
+
+import type { Dialect } from "kysely";
+
+import { PreviewDODialect } from "./do-dialect.js";
+import type { PreviewDBStub } from "./do-dialect.js";
+import type { PreviewDOConfig } from "./do-types.js";
+
+/**
+ * Create a playground DO dialect from config.
+ *
+ * Returns a dialect that throws if any query is executed outside of
+ * the playground middleware's ALS context. In normal operation, the
+ * middleware overrides this DB via runWithContext() on every request.
+ *
+ * This factory exists to satisfy the virtual module system's
+ * createDialect() contract. The EmDash runtime creates a singleton
+ * DB from it, but all actual queries go through the ALS-scoped DB.
+ */
+export function createDialect(_config: PreviewDOConfig): Dialect {
+	const notInitialized: PreviewDBStub = {
+		async query(): Promise<{ rows: Record<string, unknown>[] }> {
+			throw new Error(
+				"Playground database not initialized. " +
+					"Ensure the playground middleware is registered in src/middleware.ts " +
+					"and all requests go through it.",
+			);
+		},
+	};
+
+	return new PreviewDODialect({ getStub: () => notInitialized });
+}
+
+export { EmDashPreviewDB } from "./do-class.js";
+export { isBlockedInPlayground } from "./do-playground-routes.js";

package/src/db/preview-toolbar.ts

@@ -0,0 +1,220 @@
+/**
+ * Preview Toolbar
+ *
+ * A floating pill injected by the preview middleware into HTML responses.
+ * Shows preview status, snapshot age, reload button, and errors.
+ * No dependencies — plain HTML string with inline styles and a <script> tag.
+ */
+
+export interface PreviewToolbarConfig {
+	/** When the snapshot was generated (ISO string) */
+	generatedAt?: string;
+	/** Source site URL */
+	source?: string;
+	/** Error message if snapshot failed */
+	error?: string;
+}
+
+const RE_AMP = /&/g;
+const RE_QUOT = /"/g;
+const RE_LT = /</g;
+const RE_GT = />/g;
+
+export function renderPreviewToolbar(config: PreviewToolbarConfig): string {
+	const { generatedAt, source, error } = config;
+
+	const generatedAtAttr = generatedAt ? ` data-generated-at="${escapeAttr(generatedAt)}"` : "";
+	const sourceAttr = source ? ` data-source="${escapeAttr(source)}"` : "";
+	const errorAttr = error ? ` data-error="${escapeAttr(error)}"` : "";
+
+	return `
+<!-- EmDash Preview Toolbar -->
+<div id="emdash-preview-toolbar"${generatedAtAttr}${sourceAttr}${errorAttr}>
+  <div class="ec-ptb-inner">
+    <span class="ec-ptb-badge">Preview</span>
+
+    <div class="ec-ptb-divider"></div>
+
+    <span class="ec-ptb-status" id="ec-ptb-status"></span>
+
+    <button class="ec-ptb-btn" id="ec-ptb-reload" title="Reload snapshot">
+      <svg class="ec-ptb-icon" id="ec-ptb-reload-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+    </button>
+
+    <button class="ec-ptb-btn ec-ptb-close" id="ec-ptb-dismiss" title="Dismiss toolbar">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  </div>
+</div>
+
+<style>
+  #emdash-preview-toolbar {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  #emdash-preview-toolbar.ec-ptb-hidden {
+    display: none;
+  }
+
+  .ec-ptb-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px 8px 16px;
+    background: #1a1a1a;
+    color: #e0e0e0;
+    border-radius: 999px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .ec-ptb-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    background: rgba(139,92,246,0.2);
+    color: #a78bfa;
+  }
+
+  .ec-ptb-divider {
+    width: 1px;
+    height: 16px;
+    background: rgba(255,255,255,0.15);
+  }
+
+  .ec-ptb-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #999;
+  }
+
+  .ec-ptb-status--error {
+    color: #f87171;
+  }
+
+  .ec-ptb-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    transition: color 0.15s, background 0.15s;
+    font-family: inherit;
+  }
+
+  .ec-ptb-btn:hover {
+    color: #fff;
+    background: rgba(255,255,255,0.08);
+  }
+
+  .ec-ptb-icon {
+    transition: transform 0.3s;
+  }
+
+  .ec-ptb-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ec-ptb-btn:disabled:hover {
+    color: #888;
+    background: none;
+  }
+
+  @keyframes ec-ptb-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .ec-ptb-spinning .ec-ptb-icon {
+    animation: ec-ptb-spin 0.8s linear infinite;
+  }
+</style>
+
+<script>
+(function() {
+  var toolbar = document.getElementById("emdash-preview-toolbar");
+  var statusEl = document.getElementById("ec-ptb-status");
+  var reloadBtn = document.getElementById("ec-ptb-reload");
+  var dismissBtn = document.getElementById("ec-ptb-dismiss");
+  if (!toolbar || !statusEl || !reloadBtn || !dismissBtn) return;
+
+  var generatedAt = toolbar.getAttribute("data-generated-at");
+  var source = toolbar.getAttribute("data-source");
+  var error = toolbar.getAttribute("data-error");
+
+  function formatAge(isoString) {
+    if (!isoString) return null;
+    var then = new Date(isoString).getTime();
+    var now = Date.now();
+    var seconds = Math.floor((now - then) / 1000);
+    if (seconds < 60) return "just now";
+    var minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return minutes + "m ago";
+    var hours = Math.floor(minutes / 60);
+    if (hours < 24) return hours + "h ago";
+    return Math.floor(hours / 24) + "d ago";
+  }
+
+  function updateStatus() {
+    if (error) {
+      statusEl.className = "ec-ptb-status ec-ptb-status--error";
+      statusEl.textContent = error;
+      return;
+    }
+    var age = formatAge(generatedAt);
+    statusEl.className = "ec-ptb-status";
+    statusEl.textContent = age ? "Snapshot " + age : "Preview mode";
+  }
+
+  updateStatus();
+
+  // Update age display every 30s
+  var ageInterval = setInterval(updateStatus, 30000);
+
+  // Reload: hit the server endpoint which clears the httpOnly session cookie
+  // and redirects back with the original signed params for a fresh snapshot.
+  reloadBtn.addEventListener("click", function() {
+    reloadBtn.disabled = true;
+    reloadBtn.classList.add("ec-ptb-spinning");
+    statusEl.className = "ec-ptb-status";
+    statusEl.textContent = "Reloading\u2026";
+    location.href = "/_preview/reload";
+  });
+
+  // Dismiss
+  dismissBtn.addEventListener("click", function() {
+    toolbar.classList.add("ec-ptb-hidden");
+    clearInterval(ageInterval);
+  });
+})();
+</script>
+`;
+}
+
+function escapeAttr(str: string): string {
+	return str
+		.replace(RE_AMP, "&amp;")
+		.replace(RE_QUOT, "&quot;")
+		.replace(RE_LT, "&lt;")
+		.replace(RE_GT, "&gt;");
+}