@goodfellow-cms/admin 0.7.0 → 0.8.0

package/styles.css

@@ -177,6 +177,153 @@ body,
   white-space: nowrap;
 }
 
+/* The header's links, the site's address and the account: in the header itself, or under the menu button in narrow windows. */
+.gfa-topbar-menu {
+  display: contents;
+}
+
+.gfa-menu-button {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  cursor: pointer;
+}
+
+@media (min-width: 721px) {
+  .gfa-topbar-menu > .gfa-account,
+  .gfa-topbar-menu > .gfa-language {
+    order: 1;
+  }
+}
+
+/* The admin panel's language, as small as the header's other controls. */
+.gfa-language select {
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  font: inherit;
+  font-size: 13px;
+}
+
+@media (max-width: 720px) {
+  .gfa-topbar {
+    position: relative;
+    gap: 12px;
+  }
+
+  .gfa-brand {
+    flex: 1;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .gfa-menu-button {
+    display: inline-flex;
+  }
+
+  .gfa-topbar-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    max-height: calc(100vh - var(--gfa-topbar-height));
+    overflow-y: auto;
+    padding: 8px 16px 16px;
+    background: var(--gfa-surface);
+    border-bottom: 1px solid var(--gfa-border);
+    box-shadow: 0 8px 16px rgb(0 0 0 / 0.12);
+  }
+
+  .gfa-topbar-menu[data-open] {
+    display: flex;
+  }
+
+  .gfa-topbar-menu .gfa-nav {
+    flex-direction: column;
+    flex: none;
+    overflow: visible;
+  }
+
+  .gfa-topbar-menu .gfa-nav a {
+    padding: 10px 12px;
+  }
+
+  .gfa-topbar-menu .gfa-topbar-link {
+    padding: 0 12px;
+  }
+
+  .gfa-topbar-menu .gfa-account {
+    flex-wrap: wrap;
+    padding: 12px 12px 0;
+    border-top: 1px solid var(--gfa-border);
+    white-space: normal;
+  }
+
+  .gfa-topbar-menu .gfa-language {
+    padding: 0 12px;
+  }
+}
+
+/* Dark mode on or off: a track with a sun or moon on its thumb. */
+.gfa-dark-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 999px;
+  background: var(--gfa-bg);
+  cursor: pointer;
+}
+
+.gfa-dark-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--gfa-surface);
+  color: var(--gfa-muted);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform 150ms ease;
+}
+
+.gfa-dark-switch[aria-checked="true"] {
+  background: var(--gfa-accent);
+  border-color: var(--gfa-accent);
+}
+
+.gfa-dark-switch[aria-checked="true"] .gfa-dark-switch-thumb {
+  transform: translateX(20px);
+  color: var(--gfa-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-dark-switch-thumb {
+    transition: none;
+  }
+}
+
 .gfa-content {
   flex: 1;
   min-height: 0;
@@ -439,7 +586,9 @@ body,
 .gfa-button:focus-visible,
 .gfa-input:focus-visible,
 .gfa-nav a:focus-visible,
-.gfa-tab:focus-visible {
+.gfa-tab:focus-visible,
+.gfa-dark-switch:focus-visible,
+.gfa-menu-button:focus-visible {
   outline: 2px solid var(--gfa-accent);
   outline-offset: 2px;
 }
@@ -1444,6 +1593,33 @@ body,
 }
 
 .gfa-media-actions .gfa-button,
+/* A setting only the site's owners may change, shown to editors as it is (frame/owners-only.tsx). */
+.gfa-locked-field {
+  padding: 0 16px 16px;
+  font:
+    14px / 1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.gfa-locked-field-label {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.gfa-locked-field-value {
+  padding: 10px 12px;
+  border: 1px solid var(--gfa-border);
+  border-radius: 4px;
+  background: var(--gfa-bg);
+}
+
+.gfa-locked-field-note {
+  margin: 6px 0 0;
+  color: var(--gfa-muted);
+  font-size: 13px;
+}
+
 /* A table's cells, in the editor's fields. */
 .gfa-table-field {
   padding: 0 16px 16px;
@@ -1908,17 +2084,6 @@ body,
   --puck-color-white: light-dark(#ffffff, #111827);
 }
 
-.gfa-theme-menu {
-  min-height: 32px;
-  padding: 4px 8px;
-  border: 1px solid var(--gfa-input-border);
-  border-radius: var(--gfa-radius);
-  background: var(--gfa-surface);
-  color: var(--gfa-text);
-  font: inherit;
-  font-size: 14px;
-}
-
 /* The Domain screen's records: values such as verification codes are long and unbroken. */
 .gfa-records code {
   overflow-wrap: anywhere;
@@ -2071,6 +2236,69 @@ body,
   padding-left: 20px;
 }
 
+/* Comments */
+.gfa-comments-thread {
+  padding: 12px 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+}
+
+.gfa-comments-thread > summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.gfa-comments-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.gfa-comment-list {
+  display: grid;
+  gap: 12px;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gfa-comment-list .gfa-comment-list {
+  padding-left: 16px;
+  border-left: 2px solid var(--gfa-border);
+}
+
+.gfa-comment-byline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+}
+
+.gfa-comment-text {
+  margin: 4px 0 0;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.gfa-comment-hidden .gfa-comment-text {
+  color: var(--gfa-muted);
+}
+
+.gfa-comment-quote {
+  margin: 0;
+  padding: 8px 12px;
+  border-left: 3px solid var(--gfa-border);
+  color: var(--gfa-muted);
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
 /* Failed rebuilds */
 .gfa-deploy .gfa-deploy-why {
   padding: 0 4px;

package/dist/plugin-protocol-DkvBDqsF.js

@@ -1,119 +0,0 @@
-//#region src/frame/channel.ts
-/**
-* Requests and events between the admin panel and a frame running the site's
-* code, over one `MessagePort`. The admin panel's side treats everything a
-* frame sends as untrusted: the site's blocks run there, and could send anything.
-*/
-/** The message the admin panel's page sends a frame once it has loaded, with the port to talk on. */
-const CONNECT_MESSAGE = "goodfellow:connect";
-/** A request the other side refused or couldn't answer. */
-var ChannelError = class extends Error {
-	name = "ChannelError";
-};
-function isMessage(data) {
-	if (typeof data !== "object" || data === null) return false;
-	const type = data.type;
-	return type === "request" || type === "response" || type === "event";
-}
-/** What an error says, as text: errors can't cross the port as they are. */
-function errorText(error) {
-	return error instanceof Error ? error.message : String(error);
-}
-function createChannel(port, handlers = {}) {
-	const own = { ...handlers };
-	const pending = /* @__PURE__ */ new Map();
-	const listeners = /* @__PURE__ */ new Map();
-	let next = 1;
-	let closed = false;
-	port.onmessage = async (event) => {
-		const message = event.data;
-		if (!isMessage(message)) return;
-		if (message.type === "response") {
-			const waiting = pending.get(message.id);
-			if (!waiting) return;
-			pending.delete(message.id);
-			if (message.ok) waiting.resolve(message.result);
-			else waiting.reject(new ChannelError(message.error));
-			return;
-		}
-		if (message.type === "event") {
-			for (const listener of listeners.get(message.name) ?? []) listener(message.payload);
-			return;
-		}
-		const handler = typeof message.method === "string" ? Object.hasOwn(own, message.method) && own[message.method] : void 0;
-		if (!handler) {
-			port.postMessage({
-				type: "response",
-				id: message.id,
-				ok: false,
-				error: `No such request: ${message.method}`
-			});
-			return;
-		}
-		try {
-			const result = await handler(message.params);
-			if (!closed) port.postMessage({
-				type: "response",
-				id: message.id,
-				ok: true,
-				result
-			});
-		} catch (error) {
-			if (!closed) port.postMessage({
-				type: "response",
-				id: message.id,
-				ok: false,
-				error: errorText(error)
-			});
-		}
-	};
-	return {
-		call(method, params, transfer = []) {
-			if (closed) return Promise.reject(new ChannelError("The frame has closed."));
-			const id = next++;
-			return new Promise((resolve, reject) => {
-				pending.set(id, {
-					resolve,
-					reject
-				});
-				port.postMessage({
-					type: "request",
-					id,
-					method,
-					params
-				}, transfer);
-			});
-		},
-		emit(name, payload) {
-			if (!closed) port.postMessage({
-				type: "event",
-				name,
-				payload
-			});
-		},
-		on(name, listener) {
-			const set = listeners.get(name) ?? /* @__PURE__ */ new Set();
-			listeners.set(name, set);
-			set.add(listener);
-			return () => set.delete(listener);
-		},
-		handle(method, handler) {
-			own[method] = handler;
-			return () => {
-				if (own[method] === handler) delete own[method];
-			};
-		},
-		close() {
-			closed = true;
-			port.close();
-			for (const waiting of pending.values()) waiting.reject(new ChannelError("The frame has closed."));
-			pending.clear();
-		}
-	};
-}
-//#endregion
-//#region src/frame/plugin-protocol.ts
-/** A plugin's frame sends this to the admin panel's page once it's listening, and the page answers with a port. */
-const PLUGIN_READY_MESSAGE = "goodfellow:plugin-ready";
-//#endregion
-export { CONNECT_MESSAGE as n, createChannel as r, PLUGIN_READY_MESSAGE as t };