@simmalugnt-se/payload-editor-assistant 0.2.0 → 0.3.0

package/dist/styles/assistant.css

@@ -31,7 +31,11 @@ html:has(.ea-root) body {
   min-height: 100%;
 }
 
+/* Payload's own tokens for greys, spacing, radii and type. The accent is visual editing's
+   highlight blue, so the selection here and the outline in the preview read as the same thing. */
 .ea-aside {
+  --ea-accent: #2563eb;
+  --ea-accent-tint: rgba(37, 99, 235, 0.1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -40,163 +44,88 @@ html:has(.ea-root) body {
   height: 100%;
   max-height: 100%;
   overflow: hidden;
-  border-inline-start: 1px solid var(--theme-elevation-150);
+  border-inline-start: 1px solid var(--theme-elevation-100);
   background: var(--theme-bg, var(--theme-elevation-0));
   color: var(--theme-text);
-  font-size: 13px;
-  line-height: 1.45;
 }
 
-.ea-aside__rail {
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: var(--theme-elevation-50);
-  color: var(--theme-elevation-800);
-  cursor: pointer;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  font: inherit;
-  font-size: 12px;
+html[data-theme="dark"] .ea-aside {
+  --ea-accent: #60a5fa;
+  --ea-accent-tint: rgba(96, 165, 250, 0.14);
 }
 
-.ea-aside__rail:hover {
-  color: var(--theme-text);
-  background: var(--theme-elevation-100);
+.ea-aside--collapsed {
+  border-inline-start-color: var(--theme-elevation-100);
 }
 
-.ea-btn {
-  appearance: none;
-  display: inline-flex;
+.ea-aside__rail {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin: 0;
-  border: 1px solid var(--theme-elevation-150);
-  background: var(--theme-elevation-50);
-  color: var(--theme-text);
-  border-radius: var(--style-radius-s, 3px);
-  padding: 5px 10px;
+  gap: calc(var(--base) * 0.5);
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--base) * 0.8) 0;
+  border: 0;
+  background: transparent;
+  color: var(--theme-elevation-500);
   font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.2;
   cursor: pointer;
 }
 
-.ea-btn:hover {
-  background: var(--theme-elevation-100);
-}
-
-.ea-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.ea-btn--ghost {
-  border-color: transparent;
-  background: transparent;
-  color: var(--theme-elevation-800);
-}
-
-.ea-btn--ghost:hover {
-  background: var(--theme-elevation-100);
-  color: var(--theme-text);
-}
-
-.ea-btn--primary {
-  border-color: var(--theme-success-500);
-  background: var(--theme-success-500);
-  color: var(--theme-success-50, #fff);
-}
-
-.ea-btn--primary:hover {
-  background: var(--theme-success-600, var(--theme-success-500));
-}
-
-.ea-btn--danger {
-  border-color: var(--theme-error-500);
-  background: var(--theme-error-500);
-  color: #fff;
-}
-
-.ea-btn--danger:hover {
-  background: var(--theme-error-600, var(--theme-error-500));
-}
-
-.ea-btn--stop {
-  border-color: var(--theme-elevation-150);
-  background: transparent;
-  color: var(--theme-error-500);
-}
-
-.ea-btn--stop:hover {
-  background: var(--theme-error-50, var(--theme-elevation-100));
-}
-
-.ea-btn--chip {
-  border-radius: 999px;
-  background: transparent;
-  color: var(--theme-elevation-800);
-  padding: 3px 9px;
+.ea-aside__rail span {
+  writing-mode: vertical-rl;
 }
 
-.ea-btn--chip:hover {
+.ea-aside__rail:hover {
   color: var(--theme-text);
-  border-color: var(--theme-elevation-400, var(--theme-elevation-150));
+  background: var(--theme-elevation-50);
 }
 
 .ea-aside__head {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: calc(var(--base) * 0.4);
   flex-shrink: 0;
-  padding: 8px 10px 8px 14px;
+  min-height: var(--app-header-height, calc(var(--base) * 2.8));
+  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.6) calc(var(--base) * 0.5) var(--base);
   border-bottom: 1px solid var(--theme-elevation-150);
 }
 
-.ea-aside__head h2 {
+.ea-aside__title {
   flex: 1;
+  min-width: 0;
+}
+
+/* Sized like Payload's own small headings on this row (breadcrumbs, field labels), not an h4. */
+.ea-aside__title h2 {
   margin: 0;
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--theme-elevation-800);
+  letter-spacing: normal;
+  line-height: 20px;
 }
 
-.ea-aside__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
+.ea-aside__context {
+  margin: 0;
   overflow: hidden;
+  color: var(--theme-elevation-500);
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ea-context {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+.ea-aside__collapse {
   flex-shrink: 0;
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  font-size: 11px;
 }
 
-.ea-context span + span::before {
-  content: "·";
-  margin: 0 6px;
-  color: var(--theme-elevation-400, var(--theme-elevation-150));
-}
-
-.ea-context__warn {
-  color: var(--theme-warning-600, var(--theme-warning-500));
-}
-
-.ea-context__ok {
-  color: var(--theme-success-600, var(--theme-success-500));
+.ea-aside__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .ea-messages {
@@ -204,22 +133,25 @@ html:has(.ea-root) body {
   min-height: 0;
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 14px;
+  padding: var(--base);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: calc(var(--base) * 0.8);
 }
 
+/* The assistant writes plain text, the editor's messages sit in a quiet bubble. */
 .ea-msg {
-  max-width: 92%;
-  padding: 9px 11px;
-  border-radius: 8px;
-  border: 1px solid var(--theme-elevation-150);
-  background: var(--theme-elevation-50);
+  max-width: 100%;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .ea-msg--user {
   align-self: flex-end;
+  max-width: 85%;
+  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.6);
+  border-radius: var(--style-radius-m);
   background: var(--theme-elevation-100);
 }
 
@@ -228,40 +160,97 @@ html:has(.ea-root) body {
 }
 
 .ea-msg--system {
-  align-self: stretch;
-  max-width: none;
-  background: transparent;
-  border: 0;
-  color: var(--theme-elevation-800);
+  color: var(--theme-elevation-500);
   font-size: 12px;
-  padding: 2px 0;
+}
+
+.ea-msg--working {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) * 0.4);
+  color: var(--theme-elevation-500);
+}
+
+.ea-dots {
+  display: inline-flex;
+  gap: 3px;
+}
+
+.ea-dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--ea-accent);
+  animation: ea-dot 1.2s infinite ease-in-out;
+}
+
+.ea-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.ea-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes ea-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ea-dots span {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+.ea-actions {
+  display: flex;
+  gap: calc(var(--base) * 0.4);
+  flex-wrap: wrap;
+  margin-top: calc(var(--base) * 0.4);
 }
 
 .ea-approval {
   flex-shrink: 0;
-  padding: 12px 14px;
-  border-top: 1px solid var(--theme-warning-300, var(--theme-elevation-150));
-  background: var(--theme-warning-50, var(--theme-elevation-50));
+  margin: 0 var(--base) calc(var(--base) * 0.6);
+  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.8);
+  border: 1px solid var(--theme-elevation-150);
+  border-inline-start: 3px solid var(--ea-accent);
+  border-radius: var(--style-radius-m);
+  background: var(--theme-elevation-50);
 }
 
 .ea-approval h3 {
-  margin: 0 0 8px;
+  margin: 0 0 calc(var(--base) * 0.4);
   font-size: 13px;
-}
-
-.ea-msg--working {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--theme-elevation-800);
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .ea-approval__diff {
   max-height: 40vh;
   overflow-y: auto;
-  margin: 0 0 10px;
+  margin: 0 0 calc(var(--base) * 0.2);
   padding-left: 1.1em;
-  font-size: 13px;
+  line-height: 1.5;
+}
+
+.ea-approval__hint {
+  margin: 0 0 calc(var(--base) * 0.4);
+  color: var(--theme-elevation-500);
+  font-size: 12px;
+}
+
+.ea-approval__warn {
+  margin: calc(var(--base) * 0.4) 0 0;
+  color: var(--theme-warning-700, var(--theme-text));
 }
 
 .ea-approval__sub {
@@ -269,71 +258,117 @@ html:has(.ea-root) body {
   margin-left: 0.4em;
   padding-left: 0.6em;
   border-left: 2px solid var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-}
-
-.ea-approval pre {
-  margin: 0 0 10px;
-  white-space: pre-wrap;
-  font-size: 12px;
-  font-family: var(--font-mono, ui-monospace, monospace);
-}
-
-.ea-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: 8px;
+  color: var(--theme-elevation-600);
 }
 
 .ea-status {
   flex-shrink: 0;
-  padding: 8px 14px;
+  padding: 0 var(--base) calc(var(--base) * 0.4);
   color: var(--theme-error-500);
   font-size: 12px;
 }
 
 .ea-composer {
   flex-shrink: 0;
-  padding: 10px 14px 12px;
+  padding: calc(var(--base) * 0.6) var(--base) var(--base);
   border-top: 1px solid var(--theme-elevation-150);
-  background: var(--theme-elevation-50);
 }
 
 .ea-shortcuts {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 8px;
+  gap: calc(var(--base) * 0.3);
+  margin-bottom: calc(var(--base) * 0.4);
+}
+
+.ea-selection {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) * 0.2);
+  margin-bottom: calc(var(--base) * 0.4);
+  padding: 3px 3px 3px calc(var(--base) * 0.5);
+  border-inline-start: 3px solid var(--ea-accent);
+  border-radius: var(--style-radius-s);
+  background: var(--ea-accent-tint);
+  color: var(--theme-elevation-600);
+  font-size: 12px;
+}
+
+.ea-selection__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ea-selection__label strong {
+  color: var(--ea-accent);
+  font-weight: 600;
+}
+
+.ea-selection__clear {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--style-radius-s);
+  background: transparent;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+}
+
+.ea-selection__clear:hover {
+  background: var(--ea-accent-tint);
+  color: var(--ea-accent);
 }
 
+.ea-selection__clear svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Payload's text input: same border, radius, background and focus as fields in the form. */
 .ea-composer__box {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: calc(var(--base) * 0.3);
+  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.5) calc(var(--base) * 0.4)
+    calc(var(--base) * 0.75);
   border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-m, 4px);
+  border-radius: var(--style-radius-s);
   background: var(--theme-input-bg, var(--theme-elevation-0));
-  padding: 8px 10px;
+  box-shadow: 0 2px 2px -1px #0000001a;
+  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+}
+
+.ea-composer__box:hover {
+  border-color: var(--theme-elevation-250);
 }
 
 .ea-composer__box:focus-within {
-  border-color: var(--theme-elevation-400, var(--theme-elevation-150));
+  border-color: var(--ea-accent);
+  box-shadow: 0 0 0 3px var(--ea-accent-tint);
 }
 
 .ea-composer textarea {
   width: 100%;
   box-sizing: border-box;
-  resize: none;
+  min-height: 40px;
+  padding: 0;
   border: 0;
   background: transparent;
   color: var(--theme-text);
-  padding: 0;
   font: inherit;
-  min-height: 40px;
+  line-height: 1.5;
+  resize: none;
   outline: none;
 }
 
+.ea-composer textarea::placeholder {
+  color: var(--theme-elevation-400);
+}
+
 .ea-composer textarea:focus,
 .ea-composer textarea:focus-visible {
   outline: none;
@@ -348,13 +383,7 @@ html:has(.ea-root) body {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
-}
-
-.ea-composer__status {
-  margin-right: auto;
-  color: var(--theme-elevation-800);
-  font-size: 12px;
+  gap: calc(var(--base) * 0.4);
 }
 
 .ea-trigger {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-editor-assistant",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Context-aware editor assistant plugin for Payload Admin",
   "keywords": [
     "payload",