@emdash-cms/cloudflare 0.0.1

package/dist/db/playground-middleware.mjs

@@ -0,0 +1,533 @@
+import "../d1-introspector-bZf0_ylK.mjs";
+import { t as PreviewDODialect } from "../do-dialect-BhFcRSFQ.mjs";
+import { t as isBlockedInPlayground } from "../do-playground-routes-CmwFeGwJ.mjs";
+import { env } from "cloudflare:workers";
+import { Kysely, sql } from "kysely";
+import { ulid } from "ulidx";
+import { defineMiddleware } from "astro:middleware";
+import virtualConfig from "virtual:emdash/config";
+
+//#region src/db/playground-toolbar.ts
+const RE_AMP = /&/g;
+const RE_QUOT = /"/g;
+const RE_LT = /</g;
+const RE_GT = />/g;
+function renderPlaygroundToolbar(config) {
+	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) {
+	return str.replace(RE_AMP, "&amp;").replace(RE_QUOT, "&quot;").replace(RE_LT, "&lt;").replace(RE_GT, "&gt;");
+}
+
+//#endregion
+//#region src/db/playground-middleware.ts
+/**
+* Playground middleware — injected by the EmDash integration as order: "pre".
+*
+* Runs BEFORE the EmDash runtime init middleware. Creates a per-session
+* Durable Object database, runs migrations, applies the seed, creates an
+* anonymous admin user, and sets the DB in ALS via runWithContext().
+*
+* By the time the runtime middleware runs, the ALS-scoped DB is ready.
+* The runtime's `db` getter checks ALS first, so all init queries
+* (migrations, FTS, cron, manifest) operate on the real DO database.
+*
+* This module is registered via `addMiddleware({ entrypoint: "..." })` in
+* the integration, NOT in the user's src/middleware.ts.
+*/
+/** Default TTL for playground data (1 hour) */
+const DEFAULT_TTL = 3600;
+/** Cookie name for playground session */
+const COOKIE_NAME = "emdash_playground";
+/** Playground admin user constants */
+const PLAYGROUND_USER_ID = "playground-admin";
+const PLAYGROUND_USER_EMAIL = "playground@emdashcms.com";
+const PLAYGROUND_USER_NAME = "Playground User";
+const PLAYGROUND_USER_ROLE = 50;
+const PLAYGROUND_USER = {
+	id: PLAYGROUND_USER_ID,
+	email: PLAYGROUND_USER_EMAIL,
+	name: PLAYGROUND_USER_NAME,
+	role: PLAYGROUND_USER_ROLE
+};
+/** Track which DOs have been initialized this Worker lifetime */
+const initializedSessions = /* @__PURE__ */ new Set();
+/**
+* Read the DO binding name from the virtual config.
+* The database config has the binding in `config.database.config.binding`.
+*/
+function getBindingName() {
+	const binding = virtualConfig?.database?.config?.binding;
+	if (!binding) throw new Error("Playground middleware: no database binding found in config. Ensure database: playgroundDatabase({ binding: '...' }) is set.");
+	return binding;
+}
+/**
+* Get a PreviewDBStub for the given session token.
+*/
+function getStub(binding, token) {
+	const ns = env[binding];
+	if (!ns) throw new Error(`Playground binding "${binding}" not found in environment`);
+	const namespace = ns;
+	const doId = namespace.idFromName(token);
+	return namespace.get(doId);
+}
+/**
+* Get the full DO stub for direct RPC calls (e.g. setTtlAlarm).
+*/
+function getFullStub(binding, token) {
+	const ns = env[binding];
+	if (!ns) throw new Error(`Playground binding "${binding}" not found in environment`);
+	const namespace = ns;
+	const doId = namespace.idFromName(token);
+	return namespace.get(doId);
+}
+/**
+* Derive a created-at timestamp from the ULID session token.
+*/
+function getSessionCreatedAt(token) {
+	try {
+		const ENCODING = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+		let time = 0;
+		const chars = token.toUpperCase().slice(0, 10);
+		for (const char of chars) time = time * 32 + ENCODING.indexOf(char);
+		return new Date(time).toISOString();
+	} catch {
+		return (/* @__PURE__ */ new Date()).toISOString();
+	}
+}
+/**
+* Initialize a playground DO: run migrations, apply seed, create admin user.
+*/
+async function initializePlayground(db, token) {
+	try {
+		const { rows } = await sql`
+			SELECT value FROM options WHERE name = ${"emdash:setup_complete"}
+		`.execute(db);
+		if (rows.length > 0) return;
+	} catch {}
+	console.log(`[playground] Initializing session ${token}`);
+	const { runMigrations } = await import("emdash/db");
+	try {
+		const migrations = await runMigrations(db);
+		console.log(`[playground] Migrations applied: ${migrations.applied.length}`);
+	} catch (migrationError) {
+		if ((migrationError instanceof Error ? migrationError.message : String(migrationError)).includes("already exists")) {
+			console.log(`[playground] Migrations skipped (tables already exist)`);
+			try {
+				await sql`
+					INSERT OR IGNORE INTO options (name, value)
+					VALUES (${"emdash:setup_complete"}, ${JSON.stringify(true)})
+				`.execute(db);
+			} catch {}
+			return;
+		}
+		throw migrationError;
+	}
+	const { loadSeed } = await import("emdash/seed");
+	const { applySeed } = await import("emdash");
+	const seedResult = await applySeed(db, await loadSeed(), {
+		includeContent: true,
+		onConflict: "skip",
+		skipMediaDownload: true
+	});
+	console.log(`[playground] Seed applied: ${seedResult.collections.created} collections, ${seedResult.content.created} content entries`);
+	const now = (/* @__PURE__ */ new Date()).toISOString();
+	try {
+		await sql`
+			INSERT INTO users (id, email, name, role, email_verified, created_at, updated_at)
+			VALUES (${PLAYGROUND_USER_ID}, ${PLAYGROUND_USER_EMAIL}, ${PLAYGROUND_USER_NAME},
+			        ${PLAYGROUND_USER_ROLE}, ${1}, ${now}, ${now})
+		`.execute(db);
+	} catch {}
+	try {
+		await sql`
+			INSERT INTO options (name, value)
+			VALUES (${"emdash:setup_complete"}, ${JSON.stringify(true)})
+		`.execute(db);
+	} catch {}
+	try {
+		await sql`
+			INSERT OR REPLACE INTO options (name, value)
+			VALUES (${"emdash:site_title"}, ${JSON.stringify("EmDash Playground")})
+		`.execute(db);
+	} catch {}
+	console.log(`[playground] Session ${token} initialized`);
+}
+/**
+* Inject playground toolbar HTML into an HTML response.
+*/
+async function injectPlaygroundToolbar(response, config) {
+	if (!response.headers.get("content-type")?.includes("text/html")) return response;
+	const html = await response.text();
+	if (!html.includes("</body>")) return new Response(html, response);
+	const toolbarHtml = renderPlaygroundToolbar(config);
+	const injected = html.replace("</body>", `${toolbarHtml}</body>`);
+	return new Response(injected, {
+		status: response.status,
+		headers: response.headers
+	});
+}
+const onRequest = defineMiddleware(async (context, next) => {
+	const { url, cookies } = context;
+	const ttl = DEFAULT_TTL;
+	const binding = getBindingName();
+	if (url.pathname === "/playground") {
+		let token = cookies.get(COOKIE_NAME)?.value;
+		if (!token) {
+			token = ulid();
+			cookies.set(COOKIE_NAME, token, {
+				httpOnly: true,
+				sameSite: "lax",
+				path: "/",
+				maxAge: ttl
+			});
+		}
+		const stub = getStub(binding, token);
+		const db = new Kysely({ dialect: new PreviewDODialect({ getStub: () => stub }) });
+		if (!initializedSessions.has(token)) {
+			await initializePlayground(db, token);
+			initializedSessions.add(token);
+			await getFullStub(binding, token).setTtlAlarm(ttl);
+		}
+		return context.redirect("/_emdash/admin");
+	}
+	if (url.pathname === "/_playground/reset") {
+		cookies.delete(COOKIE_NAME, { path: "/" });
+		return context.redirect("/playground");
+	}
+	if (isBlockedInPlayground(url.pathname)) return Response.json({ error: {
+		code: "PLAYGROUND_MODE",
+		message: "Not available in playground mode"
+	} }, { status: 403 });
+	const token = cookies.get(COOKIE_NAME)?.value;
+	if (!token) return context.redirect("/playground");
+	const stub = getStub(binding, token);
+	const db = new Kysely({ dialect: new PreviewDODialect({ getStub: () => stub }) });
+	if (!initializedSessions.has(token)) try {
+		await initializePlayground(db, token);
+		initializedSessions.add(token);
+		await getFullStub(binding, token).setTtlAlarm(ttl);
+	} catch (error) {
+		console.error("Playground initialization failed:", error);
+		return Response.json({ error: {
+			code: "PLAYGROUND_INIT_ERROR",
+			message: "Failed to initialize playground"
+		} }, { status: 500 });
+	}
+	Object.assign(context.locals, {
+		__playgroundDb: db,
+		user: PLAYGROUND_USER
+	});
+	const editMode = cookies.get("emdash-edit-mode")?.value === "true";
+	return injectPlaygroundToolbar(await next(), {
+		createdAt: getSessionCreatedAt(token),
+		ttl,
+		editMode
+	});
+});
+
+//#endregion
+export { onRequest };

package/dist/db/playground.d.mts

@@ -0,0 +1,39 @@
+import { t as PreviewDOConfig } from "../do-types-CY0G0oyh.mjs";
+import { t as EmDashPreviewDB } from "../do-class-x5Xh_G62.mjs";
+import { Dialect } from "kysely";
+
+//#region src/db/do-playground-routes.d.ts
+/**
+ * Playground mode route gating.
+ *
+ * Unlike preview mode (which blocks everything except read-only API routes),
+ * playground mode allows most routes including the admin UI and write APIs.
+ * Only auth, setup, and abuse-prone routes are blocked.
+ *
+ * Pure function -- no Worker or Cloudflare dependencies.
+ */
+/**
+ * Check whether a request should be blocked in playground mode.
+ *
+ * Playground allows most CMS functionality: content CRUD, schema editing,
+ * taxonomies, menus, widgets, search, settings, and the full admin UI.
+ * Only auth, setup, user management, media uploads, and plugin
+ * installation are blocked.
+ */
+declare function isBlockedInPlayground(pathname: string): boolean;
+//#endregion
+//#region src/db/playground.d.ts
+/**
+ * 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.
+ */
+declare function createDialect(_config: PreviewDOConfig): Dialect;
+//#endregion
+export { EmDashPreviewDB, createDialect, isBlockedInPlayground };

package/dist/db/playground.mjs

@@ -0,0 +1,26 @@
+import "../d1-introspector-bZf0_ylK.mjs";
+import { t as PreviewDODialect } from "../do-dialect-BhFcRSFQ.mjs";
+import { t as EmDashPreviewDB } from "../do-class-DY2Ba2RJ.mjs";
+import { t as isBlockedInPlayground } from "../do-playground-routes-CmwFeGwJ.mjs";
+
+//#region src/db/playground.ts
+/**
+* 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.
+*/
+function createDialect(_config) {
+	const notInitialized = { async query() {
+		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 });
+}
+
+//#endregion
+export { EmDashPreviewDB, createDialect, isBlockedInPlayground };