@goodfellow-cms/admin 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/admin",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
   "keywords": [
     "goodfellow",
@@ -56,10 +56,10 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/theme-one-dark": "6.1.3",
     "@codemirror/view": "6.43.14",
-    "@goodfellow-cms/ai": "0.6.0",
-    "@goodfellow-cms/core": "0.6.0",
-    "@goodfellow-cms/react": "0.6.0",
-    "@goodfellow-cms/registry": "0.6.0",
+    "@goodfellow-cms/ai": "0.7.0",
+    "@goodfellow-cms/core": "0.7.0",
+    "@goodfellow-cms/react": "0.7.0",
+    "@goodfellow-cms/registry": "0.7.0",
     "codemirror": "6.0.2",
     "lucide-react": "1.52.0",
     "turndown": "7.2.4",

package/plugin.css

@@ -1,8 +1,10 @@
 /*
  * The base look of a plugin's admin frame: the admin panel's colors, as
- * `--gfa-*` custom properties that follow its light or dark choice, its
- * font, and plain buttons, fields and headings. A plugin's screens can use
- * the properties in styles of their own.
+ * `--gfa-*` custom properties that follow its light or dark choice, and its
+ * font, and on screens, the screens' spacing and plain buttons, fields and
+ * headings. A plugin's screens can use the properties in styles of their own.
+ * An editor plugin's frame (`gfa-plugin-editor`) gets the colors and font
+ * only, since what it draws is its own, and the site's blocks among it.
  */
 :root {
   color-scheme: light dark;
@@ -66,65 +68,67 @@ body {
     sans-serif;
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* The rest is for screens only. */
+
 /* Spaced as the admin panel's other screens, since a screen's frame fills the screen. */
-body {
+:where(html:not(.gfa-plugin-editor)) body {
   padding: 24px;
   max-width: 960px;
 }
 
 /* Nothing in a screen's frame scrolls on its own: the frame grows with it. */
-html {
+html:not(.gfa-plugin-editor) {
   overflow: hidden;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-h1,
-h2,
-h3 {
+:where(html:not(.gfa-plugin-editor)) h1,
+:where(html:not(.gfa-plugin-editor)) h2,
+:where(html:not(.gfa-plugin-editor)) h3 {
   line-height: 1.25;
   margin: 0 0 0.75rem;
 }
 
-h1 {
+:where(html:not(.gfa-plugin-editor)) h1 {
   font-size: 24px;
   margin-bottom: 16px;
 }
 
-h2 {
+:where(html:not(.gfa-plugin-editor)) h2 {
   font-size: 17px;
 }
 
-h3 {
+:where(html:not(.gfa-plugin-editor)) h3 {
   font-size: 15px;
   margin-top: 1.25rem;
 }
 
-section {
+:where(html:not(.gfa-plugin-editor)) section {
   margin-top: 2rem;
 }
 
-p {
+:where(html:not(.gfa-plugin-editor)) p {
   margin: 0 0 0.75rem;
 }
 
-a {
+:where(html:not(.gfa-plugin-editor)) a {
   color: var(--gfa-accent);
 }
 
-label {
+:where(html:not(.gfa-plugin-editor)) label {
   display: block;
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
 
-input,
-select,
-textarea {
+:where(html:not(.gfa-plugin-editor)) input,
+:where(html:not(.gfa-plugin-editor)) select,
+:where(html:not(.gfa-plugin-editor)) textarea {
   font: inherit;
   color: inherit;
   background: var(--gfa-surface);
@@ -135,7 +139,7 @@ textarea {
   max-width: 32rem;
 }
 
-button {
+:where(html:not(.gfa-plugin-editor)) button {
   font: inherit;
   font-weight: 600;
   cursor: pointer;
@@ -146,24 +150,24 @@ button {
   padding: 0.4rem 0.9rem;
 }
 
-button:disabled {
+:where(html:not(.gfa-plugin-editor)) button:disabled {
   cursor: default;
   opacity: 0.6;
 }
 
-:focus-visible {
+:where(html:not(.gfa-plugin-editor)) :focus-visible {
   outline: 2px solid var(--gfa-accent);
   outline-offset: 2px;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+:where(html:not(.gfa-plugin-editor)) input[type="checkbox"],
+:where(html:not(.gfa-plugin-editor)) input[type="radio"] {
   width: auto;
   margin: 0 0.4rem 0 0;
 }
 
-small,
-.gfa-hint {
+:where(html:not(.gfa-plugin-editor)) small,
+:where(html:not(.gfa-plugin-editor)) .gfa-hint {
   display: block;
   color: var(--gfa-muted);
   font-size: 13px;
@@ -171,24 +175,24 @@ small,
   max-width: 40rem;
 }
 
-ol,
-ul {
+:where(html:not(.gfa-plugin-editor)) ol,
+:where(html:not(.gfa-plugin-editor)) ul {
   padding-left: 1.25rem;
   margin: 0 0 0.75rem;
   max-width: 44rem;
 }
 
-li {
+:where(html:not(.gfa-plugin-editor)) li {
   margin-bottom: 0.5rem;
 }
 
-code,
-pre {
+:where(html:not(.gfa-plugin-editor)) code,
+:where(html:not(.gfa-plugin-editor)) pre {
   font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
   font-size: 13px;
 }
 
-pre {
+:where(html:not(.gfa-plugin-editor)) pre {
   margin: 0.4rem 0 0;
   padding: 0.5rem 0.75rem;
   max-width: 40rem;
@@ -198,11 +202,11 @@ pre {
   border-radius: var(--gfa-radius);
 }
 
-details {
+:where(html:not(.gfa-plugin-editor)) details {
   margin: 0.75rem 0;
 }
 
-summary {
+:where(html:not(.gfa-plugin-editor)) summary {
   cursor: pointer;
   font-weight: 600;
 }

package/styles.css

@@ -1013,6 +1013,39 @@ body,
   min-height: 0;
 }
 
+/* The search box at the top of Puck's block list, and what it finds. */
+.gfa-block-search-box {
+  padding: 12px 16px 4px;
+}
+
+.gfa-block-search-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 6px;
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  font: inherit;
+  font-size: 14px;
+}
+
+.gfa-block-search-input:focus-visible {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: 1px;
+}
+
+.gfa-block-search-results {
+  padding: 8px 16px 16px;
+}
+
+.gfa-block-search-none {
+  margin: 0;
+  padding: 12px 16px;
+  color: var(--gfa-muted);
+  font-size: 14px;
+}
+
 /* The editor's header, outside the frame that runs the site's code. */
 .gfa-editor-header {
   display: flex;
@@ -1097,6 +1130,47 @@ body,
   background: var(--gfa-bg);
 }
 
+/* An editor plugin's frame, with what shows over it until the editor has opened. */
+.gfa-plugin-editor-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.gfa-editor-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: var(--gfa-bg);
+  color: var(--gfa-muted);
+}
+
+.gfa-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--gfa-border);
+  border-top-color: var(--gfa-accent);
+  border-radius: 50%;
+  animation: gfa-spin 0.8s linear infinite;
+}
+
+@keyframes gfa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-spinner {
+    animation-duration: 2.4s;
+  }
+}
+
 /* The frames that run the site's code: the editor fills its page, and its canvas can be a phone's width. */
 :root.gfa-frame,
 .gfa-frame body {
@@ -1418,6 +1492,138 @@ body,
   margin-top: 8px;
 }
 
+/* A block's Style field in the editor (frame/style-field.tsx). */
+.gfa-style-field {
+  display: grid;
+  gap: 14px;
+  padding: 0 16px 16px;
+  font:
+    14px / 1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.gfa-style-title {
+  font-weight: 600;
+}
+
+.gfa-style-group {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-style-choice {
+  display: grid;
+  gap: 4px;
+}
+
+.gfa-style-label {
+  padding: 0;
+  color: var(--gfa-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.gfa-style-segments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.gfa-style-segment {
+  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: 13px;
+  cursor: pointer;
+}
+
+.gfa-style-segment[aria-pressed="true"] {
+  border-color: var(--gfa-accent);
+  background: var(--gfa-accent);
+  color: var(--gfa-accent-text);
+}
+
+.gfa-style-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.gfa-style-swatch {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.gfa-style-swatch[aria-pressed="true"] {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: 2px;
+}
+
+/* "As the block has it": a struck-through swatch. */
+.gfa-style-swatch-none {
+  background: linear-gradient(
+    135deg,
+    var(--gfa-surface) 45%,
+    var(--gfa-muted) 45%,
+    var(--gfa-muted) 55%,
+    var(--gfa-surface) 55%
+  );
+}
+
+/* A color of the editor's own: the browser's color picker, filling the swatch. */
+.gfa-style-swatch-own {
+  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
+}
+
+.gfa-style-swatch-own input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.gfa-style-swatch:disabled,
+.gfa-style-segment:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.gfa-style-sides {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.gfa-style-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.gfa-style-warning {
+  padding: 6px 8px;
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-warning-bg);
+  color: var(--gfa-warning-text);
+}
+
 .gfa-media-chooser .gfa-button {
   min-height: 30px;
   padding: 0 10px;
@@ -2123,3 +2329,40 @@ body,
   padding: 0;
   border: 0;
 }
+
+/* Blocks' icons in the block list, in place of Puck's drag handle, which every block shares. */
+.gfa-drawer-item {
+  position: relative;
+}
+
+.gfa-drawer-item .gfa-block-icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  flex-shrink: 0;
+  color: var(--gfa-muted);
+  pointer-events: none;
+}
+
+.gfa-drawer-item [class*="_DrawerItem-draggable_"] {
+  justify-content: flex-start;
+  padding-left: 34px;
+}
+
+.gfa-drawer-item [class*="_DrawerItem-draggable_"] > :last-child:not([class*="_DrawerItem-name_"]) {
+  display: none;
+}
+
+.gfa-fieldset {
+  display: grid;
+  gap: 6px;
+  margin: 0 0 16px;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-fieldset legend {
+  margin-bottom: 6px;
+  font-weight: 600;
+}