Changeset 3751226

Timestamp:

10/16/2026 10:50:09 PM (3 hours ago)

Author:

mjcdesigns

Message:

Version 1.1.4 Release

Location:

mjcdesigns-ai-design-assistant-bricks/trunk

Files:

• assets/admin.css (modified) (14 diffs)
• assets/app.js (modified) (6 diffs)
• mjcdesigns-ai-design-assistant-bricks.php (modified) (3 diffs)
• readme.txt (modified) (2 diffs)

mjcdesigns-ai-design-assistant-bricks/trunk/assets/admin.css

@@ -464 +464 @@
   line-height:1.5;
   word-break:break-word
-}
-.mjcdesigns-ai-apply-row {
-  border-top:1px solid #2b2a31;
-  padding:11px;
-  display:flex;
-  justify-content:flex-end;
-  margin-top:auto
 }
 .mjcdesigns-ai-apply {
@@ -908 +901 @@
   font-weight:600
 }
-.mjcdesigns-ai-about-card--brand {
-  background:linear-gradient(145deg,#17151d,#292237);
-  border-color:#383047;
-  color:#f7f5fa
-}
-.mjcdesigns-ai-about-card--brand h2 {
-  color:white
-}
-.mjcdesigns-ai-about-card--brand h2 .dashicons {
-  background:#5f41b0;
-  color:white
-}
-.mjcdesigns-ai-about-card--brand>p {
-  color:#d6d2df
-}
 .mjcdesigns-ai-about-facts {
   display:grid;
@@ -950 +928 @@
   color:white;
   font-size:11px
-}
-.mjcdesigns-ai-about-color {
-  display:inline-block;
-  width:12px;
-  height:12px;
-  vertical-align:-2px;
-  margin-right:5px;
-  border-radius:50%;
-  background:#5f41b0;
-  box-shadow:0 0 0 2px #ffffff2b
 }
 .mjcdesigns-ai-about-steps {
@@ -1214 +1182 @@
   line-height:1.6
 }
-.mjcdesigns-ai-terms-card {
-  background:#18181d
-}
 .mjcdesigns-ai-terms-grid .mjcdesigns-ai-about-card p:last-child {
   margin-bottom:0
@@ -1914 +1879 @@
   color:#d6d2df
 }
-/* Full-width MJC Designs AI admin pages, with shared gutters and matching Settings styling. */
+/* Final overrides: full-width subpages, edge-to-edge content area, compact banner icons. */
 body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpcontent {
   padding-left:0;
@@ -1988 +1953 @@
   grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)
 }
-.mjcdesigns-ai-settings-card h2,.mjcdesigns-ai-settings-grid .mjcdesigns-ai-about-card h2 {
+.mjcdesigns-ai-settings-grid .mjcdesigns-ai-about-card h2 {
   margin-bottom:12px
 }
-.mjcdesigns-ai-settings-key-state {
-  display:flex;
-  align-items:center;
-  gap:9px;
-  margin:18px 0 20px;
-  padding:12px 14px;
-  border:1px solid #393541;
-  border-radius:8px;
-  background:#211f26;
-  color:#eeebf3;
-  font-size:12px
-}
-.mjcdesigns-ai-settings-state-dot {
-  width:9px;
-  height:9px;
-  flex:none;
-  border-radius:50%;
-  background:#8d8994;
-  box-shadow:0 0 0 4px #ffffff0b
-}
-.mjcdesigns-ai-settings-state-dot.is-saved {
-  background:#55c589;
-  box-shadow:0 0 0 4px #55c58920
-}
-.mjcdesigns-ai-settings-key-form>label {
-  display:block;
-  margin:0 0 7px;
-  color:#d8d4df;
-  font-size:11px;
-  font-weight:650
-}
-.mjcdesigns-ai-settings-key-entry {
-  display:flex;
-  align-items:stretch;
-  gap:9px
-}
-.mjcdesigns-ai-settings-key-entry input {
-  box-sizing:border-box;
-  flex:1;
-  min-width:0;
-  min-height:40px;
-  padding:8px 11px;
-  border:1px solid #494550;
-  border-radius:7px;
-  background:#111115;
-  color:#f6f5f8
-}
-.mjcdesigns-ai-settings-key-entry input:focus {
-  border-color:#8a70d0;
-  box-shadow:0 0 0 1px #5f41b0;
-  outline:none
-}
-.mjcdesigns-ai-settings-key-entry .button-primary {
-  min-height:40px;
-  padding:0 16px;
-  border-color:#765bc0;
-  border-radius:7px;
-  background:#5f41b0;
-  box-shadow:none;
-  color:#fff;
-  font-size:11px
-}
-.mjcdesigns-ai-settings-key-form .description,.mjcdesigns-ai-settings-grid .description {
+.mjcdesigns-ai-settings-grid .description {
   margin:9px 0 0;
   color:#a7a3ae;
@@ -2059 +1962 @@
   line-height:1.55
 }
-.mjcdesigns-ai-settings-clear-form {
-  margin-top:13px;
-  padding-top:13px;
-  border-top:1px solid #302e36
-}
-.mjcdesigns-ai-settings-clear-form .button {
-  min-height:34px;
-  border-color:#494550;
-  border-radius:6px;
-  background:#26242b;
-  color:#dedbe4
-}
-.mjcdesigns-ai-settings-model {
-  margin:20px 0 0;
-  padding-top:14px;
-  border-top:1px solid #302e36;
-  color:#a8a4af;
-  font-size:11px
-}
-.mjcdesigns-ai-settings-model code {
-  display:inline-block;
-  padding:3px 6px;
-  border-radius:5px;
-  background:#2a2435;
-  color:#dcd1fc
-}
-.mjcdesigns-ai-settings-model a,.mjcdesigns-ai-settings-policy-link {
+.mjcdesigns-ai-settings-policy-link {
   color:#c8b7fa;
   text-decoration:none;
   font-weight:650
 }
-.mjcdesigns-ai-settings-model a:hover,.mjcdesigns-ai-settings-policy-link:hover {
+.mjcdesigns-ai-settings-policy-link:hover {
   text-decoration:underline;
   color:#fff
@@ -2139 +2016 @@
   .mjcdesigns-ai-about-grid,.mjcdesigns-ai-terms-grid,.mjcdesigns-ai-settings-grid {
     grid-template-columns:minmax(0,1fr)
-  }
-  .mjcdesigns-ai-settings-key-entry {
-    flex-direction:column
-  }
-  .mjcdesigns-ai-settings-key-entry .button-primary {
-    align-self:flex-start
-  }
-  .mjcdesigns-ai-about-card {
-    height:auto
-  }
-}
-/* Final overrides: full-width subpages, edge-to-edge content area, compact banner icons. */
-body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpcontent {
-  padding-left:0;
-  background:#101013;
-  color:#f6f5f8
-}
-body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpbody-content {
-  padding-bottom:0;
-  background:#101013
-}
-body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpfooter {
-  background:#101013;
-  color:#96929e
-}
-body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpbody-content>.wrap {
-  box-sizing:border-box;
-  width:100%;
-  max-width:none;
-  margin:0;
-  padding:18px 26px 34px
-}
-body[class*="mjcdesigns-ai-design-assistant-bricks"] .notice {
-  margin:0 0 15px
-}
-.mjcdesigns-ai-about-wrap {
-  box-sizing:border-box;
-  width:100%;
-  max-width:none;
-  min-height:calc(100vh - 80px);
-  margin:0;
-  padding:18px 26px 34px;
-  background:#101013;
-  color:#f6f5f8
-}
-.mjcdesigns-ai-about-heading,.mjcdesigns-ai-about-grid,.mjcdesigns-ai-terms-grid,.mjcdesigns-ai-terms-notice,.mjcdesigns-ai-about-footer {
-  box-sizing:border-box;
-  width:100%;
-  max-width:none
-}
-.mjcdesigns-ai-about-heading {
-  margin:4px 0 20px;
-  padding:28px 30px
-}
-.mjcdesigns-ai-about-heading>.dashicons {
-  box-sizing:border-box;
-  display:grid;
-  place-items:center;
-  flex:none;
-  width:36px;
-  height:36px;
-  padding:6px;
-  font-size:22px;
-  line-height:1
-}
-.mjcdesigns-ai-about-grid,.mjcdesigns-ai-terms-grid {
-  margin:0;
-  align-items:stretch
-}
-.mjcdesigns-ai-about-card {
-  height:100%;
-  box-sizing:border-box
-}
-.mjcdesigns-ai-about-footer {
-  margin:18px 0 0
-}
-.mjcdesigns-ai-terms-notice {
-  margin:0 0 15px
-}
-.mjcdesigns-ai-settings-wrap {
-  padding-top:18px
-}
-.mjcdesigns-ai-settings-grid {
-  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)
-}
-.mjcdesigns-ai-settings-grid .mjcdesigns-ai-about-card h2 {
-  margin-bottom:12px
-}
-.mjcdesigns-ai-settings-key-state {
-  display:flex;
-  align-items:center;
-  gap:9px;
-  margin:18px 0 20px;
-  padding:12px 14px;
-  border:1px solid #393541;
-  border-radius:8px;
-  background:#211f26;
-  color:#eeebf3;
-  font-size:12px
-}
-.mjcdesigns-ai-settings-state-dot {
-  width:9px;
-  height:9px;
-  flex:none;
-  border-radius:50%;
-  background:#8d8994;
-  box-shadow:0 0 0 4px #ffffff0b
-}
-.mjcdesigns-ai-settings-state-dot.is-saved {
-  background:#55c589;
-  box-shadow:0 0 0 4px #55c58920
-}
-.mjcdesigns-ai-settings-key-form>label {
-  display:block;
-  margin:0 0 7px;
-  color:#d8d4df;
-  font-size:11px;
-  font-weight:650
-}
-.mjcdesigns-ai-settings-key-entry {
-  display:flex;
-  align-items:stretch;
-  gap:9px
-}
-.mjcdesigns-ai-settings-key-entry input {
-  box-sizing:border-box;
-  flex:1;
-  min-width:0;
-  min-height:40px;
-  padding:8px 11px;
-  border:1px solid #494550;
-  border-radius:7px;
-  background:#111115;
-  color:#f6f5f8
-}
-.mjcdesigns-ai-settings-key-entry input:focus {
-  border-color:#8a70d0;
-  box-shadow:0 0 0 1px #5f41b0;
-  outline:none
-}
-.mjcdesigns-ai-settings-key-entry .button-primary {
-  min-height:40px;
-  padding:0 16px;
-  border-color:#765bc0;
-  border-radius:7px;
-  background:#5f41b0;
-  box-shadow:none;
-  color:#fff;
-  font-size:11px
-}
-.mjcdesigns-ai-settings-key-form .description,.mjcdesigns-ai-settings-grid .description {
-  margin:9px 0 0;
-  color:#a7a3ae;
-  font-size:11px;
-  line-height:1.55
-}
-.mjcdesigns-ai-settings-clear-form {
-  margin-top:13px;
-  padding-top:13px;
-  border-top:1px solid #302e36
-}
-.mjcdesigns-ai-settings-clear-form .button {
-  min-height:34px;
-  border-color:#494550;
-  border-radius:6px;
-  background:#26242b;
-  color:#dedbe4
-}
-.mjcdesigns-ai-settings-model {
-  margin:20px 0 0;
-  padding-top:14px;
-  border-top:1px solid #302e36;
-  color:#a8a4af;
-  font-size:11px
-}
-.mjcdesigns-ai-settings-model code {
-  display:inline-block;
-  padding:3px 6px;
-  border-radius:5px;
-  background:#2a2435;
-  color:#dcd1fc
-}
-.mjcdesigns-ai-settings-model a,.mjcdesigns-ai-settings-policy-link {
-  color:#c8b7fa;
-  text-decoration:none;
-  font-weight:650
-}
-.mjcdesigns-ai-settings-model a:hover,.mjcdesigns-ai-settings-policy-link:hover {
-  text-decoration:underline;
-  color:#fff
-}
-.mjcdesigns-ai-settings-policy-link {
-  display:inline-block;
-  margin:4px 0 10px;
-  padding:9px 11px;
-  border:1px solid #56456f;
-  border-radius:7px;
-  background:#282131
-}
-.mjcdesigns-ai-settings-data-card {
-  background:linear-gradient(145deg,#17151d,#292237);
-  border-color:#383047
-}
-.mjcdesigns-ai-settings-data-card h2 {
-  color:#fff
-}
-.mjcdesigns-ai-settings-data-card h2 .dashicons {
-  background:#5f41b0;
-  color:#fff
-}
-.mjcdesigns-ai-settings-data-card p {
-  color:#d6d2df
-}
-.mjcdesigns-ai-settings-data-card .description {
-  color:#aaa5b4!important
-}
-.mjcdesigns-ai-settings-wrap .notice {
-  box-sizing:border-box;
-  width:100%;
-  margin:0 0 15px
-}
-@media(max-width:782px) {
-  body[class*="mjcdesigns-ai-design-assistant-bricks"] #wpbody-content>.wrap,.mjcdesigns-ai-about-wrap {
-    padding:12px
-  }
-  .mjcdesigns-ai-about-heading {
-    padding:22px 18px;
-    gap:12px
-  }
-  .mjcdesigns-ai-about-heading>.dashicons {
-    width:32px;
-    height:32px;
-    font-size:19px
-  }
-  .mjcdesigns-ai-about-grid,.mjcdesigns-ai-terms-grid,.mjcdesigns-ai-settings-grid {
-    grid-template-columns:minmax(0,1fr)
-  }
-  .mjcdesigns-ai-settings-key-entry {
-    flex-direction:column
-  }
-  .mjcdesigns-ai-settings-key-entry .button-primary {
-    align-self:flex-start
   }
   .mjcdesigns-ai-about-card {
@@ -4255 +3890 @@
   overflow:auto;
   padding:34px clamp(20px,5vw,42px) 28px;
-  border:1px solid #49396b;
+  border:0;
   border-radius:20px;
   background:radial-gradient(ellipse at 50% 0%,#2a203b 0,#19171f 42%,#151419 100%);
@@ -4270 +3905 @@
   height:34px;
   padding:0;
-  border:1px solid #49434f;
+  border:0;
   border-radius:50%;
   background:#211f27;
@@ -4279 +3914 @@
 }
 .mjcdesigns-ai-connectors-close:hover,.mjcdesigns-ai-connectors-close:focus-visible {
-  border-color:#9a7be7;
   color:#fff;
   outline:2px solid #9a7be780;
@@ -4319 +3953 @@
 }
 .mjcdesigns-ai-connectors-intro {
-  max-width:450px;
+  max-width:350px;
   margin:15px 0 0;
   color:#c2bdca;
@@ -4328 +3962 @@
   margin-top:23px;
   padding:20px 20px 10px;
-  border:1px solid #35313e;
+  border:0;
   border-radius:13px;
   background:rgba(17,16,21,.72)
@@ -4462 +4096 @@
   font-size:12px
 }
+
+/* 1.1.4 workspace visual refresh. Keep existing controls and behavior intact. */
+.mjcdesigns-ai-app {
+  --mjcdesigns-ai-bg:#101013;
+  --mjcdesigns-ai-panel:#17171b;
+  --mjcdesigns-ai-line:#292832;
+  --mjcdesigns-ai-muted:#aaa6b7;
+  --mjcdesigns-ai-header:#25202f;
+  --mjcdesigns-ai-surface:#1e1d23;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel {
+  margin:12px 0 14px 12px;
+  border:0;
+  border-radius:11px;
+  background:var(--mjcdesigns-ai-panel);
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-head {
+  height:60px;
+  padding:0 20px;
+  border:0;
+  border-radius:11px 11px 0 0;
+  background:var(--mjcdesigns-ai-header);
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-brand-icon {
+  width:34px;
+  height:34px;
+  border-radius:9px;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-head-actions button,
+.mjcdesigns-ai-app .mjcdesigns-ai-collapse-button {
+  border:0;
+  background:transparent;
+  color:#d6cce9;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-head-actions button:hover,
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-head-actions button:focus-visible,
+.mjcdesigns-ai-app .mjcdesigns-ai-collapse-button:hover,
+.mjcdesigns-ai-app .mjcdesigns-ai-collapse-button:focus-visible {
+  background:#392d50;
+  color:#fff;
+  outline:2px solid #a48ae0;
+  outline-offset:1px;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-main-column {
+  padding-right:0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-top {
+  height:72px;
+  margin:0 14px 0 18px;
+  padding:0 28px;
+  border:0;
+  border-radius:0 0 12px 12px;
+  background:var(--mjcdesigns-ai-header);
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-logo small {
+  color:#aaa3bb;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-top-right #mjcdesigns-ai-status {
+  width:min(625px,42vw);
+  max-width:625px;
+  padding:11px 12px;
+  border-radius:8px;
+  background:#1d1c22;
+  color:#aaa2b5;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-top-right a {
+  color:#d7c6f5;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-alpha-notice {
+  margin:10px 14px 0 18px;
+  padding:11px 22px;
+  border:0;
+  border-radius:11px;
+  background:#1e1e23;
+  color:#a9a4b1;
+  line-height:1.5;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-alpha-notice strong {
+  color:#fff;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-toolbar {
+  min-height:74px;
+  margin:0 14px 0 18px;
+  padding:0 22px;
+  border:0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-content {
+  gap:16px;
+  padding:0 14px 12px 18px;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-card {
+  border:0;
+  border-radius:12px;
+  background:#17171b;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-card-head {
+  height:52px;
+  padding:0 15px;
+  border:0;
+  background:var(--mjcdesigns-ai-header);
+  color:#b9afd4;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-card-head span {
+  color:#aaa3ba;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-elements-card.is-collapsed .mjcdesigns-ai-card-head {
+  height:100%;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-panel-content>.mjcdesigns-ai-label {
+  color:#aaa3c3;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-document-picker-details>summary,
+.mjcdesigns-ai-app .mjcdesigns-ai-context,
+.mjcdesigns-ai-app .mjcdesigns-ai-model-picker select,
+.mjcdesigns-ai-app .mjcdesigns-ai-compose textarea {
+  border-color:transparent;
+  background:#202025;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-context {
+  background:#25202f;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-welcome {
+  border:0;
+  background:linear-gradient(135deg,#25202f,#1e1d23);
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-note {
+  border-color:#2a2931;
+  background:#17171b;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-compose {
+  border-top:1px solid #292832;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-btn,
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-devices button,
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-modes button,
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-open,
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-modal-open,
+.mjcdesigns-ai-app .mjcdesigns-ai-image-button {
+  border-color:transparent;
+  border-radius:8px;
+  background:#242329;
+  color:#d8caf6;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-btn:hover:not(:disabled),
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-devices button:hover,
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-modes button:hover,
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-open:hover,
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-modal-open:hover,
+.mjcdesigns-ai-app .mjcdesigns-ai-image-button:hover {
+  border-color:transparent;
+  background:#382d50;
+  color:#fff;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-devices button.active,
+.mjcdesigns-ai-app .mjcdesigns-ai-preview-card .mjcdesigns-ai-preview-modes button.active {
+  border-color:transparent;
+  background:#3a2d50;
+  color:#fff;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-btn:disabled {
+  opacity:.55;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-builder {
+  background:#29272f;
+  color:#fff;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-apply {
+  border-color:transparent;
+  background:#5f41b0;
+  color:#fff;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-apply:hover:not(:disabled) {
+  background:#7355c7;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-element-settings {
+  inset:60px 8px 8px;
+  border-color:#17171b;
+  border-radius:11px;
+  background:#17171b;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-element-settings-close {
+  width:33px;
+  height:33px;
+  border:0;
+  border-radius:8px;
+  background:#29272f;
+  color:#fff;
+  font-size:21px;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-element-settings-close:hover,
+.mjcdesigns-ai-app .mjcdesigns-ai-element-settings-close:focus-visible {
+  border:0;
+  background:#493763;
+  outline:2px solid #a48ae0;
+  outline-offset:1px;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-element-settings-head {
+  border-bottom-color:#2b2930;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-bottom-note {
+  color:#8c8797;
+}
+@media(min-width:1101px) {
+  .mjcdesigns-ai-app .mjcdesigns-ai-content:not(.elements-collapsed) {
+    grid-template-rows:minmax(360px,1.4fr) minmax(260px,1fr);
+  }
+}
+@media(min-width:783px) {
+  .mjcdesigns-ai-app .mjcdesigns-ai-workspace.sidebar-collapsed {
+    grid-template-columns:96px 0 minmax(0,1fr);
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-workspace.sidebar-collapsed .mjcdesigns-ai-panel {
+    margin-left:18px;
+    background:transparent;
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-workspace.sidebar-collapsed .mjcdesigns-ai-panel-head {
+    height:auto;
+    min-height:100%;
+    padding:15px 8px;
+    border-radius:11px;
+    background:var(--mjcdesigns-ai-header);
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-workspace.sidebar-collapsed .mjcdesigns-ai-panel-brand-label {
+    font-size:12px;
+  }
+}
+@media(max-width:782px) {
+  .mjcdesigns-ai-app .mjcdesigns-ai-panel {
+    margin:8px 10px 0;
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-top,
+  .mjcdesigns-ai-app .mjcdesigns-ai-alpha-notice,
+  .mjcdesigns-ai-app .mjcdesigns-ai-toolbar {
+    margin-left:10px;
+    margin-right:10px;
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-top {
+    padding:0 12px;
+  }
+  .mjcdesigns-ai-app .mjcdesigns-ai-content {
+    padding:0 10px 10px;
+  }
+}
+
+/* 1.1.4 preview and selector refinements. */
+.mjcdesigns-ai-app .mjcdesigns-ai-document-picker-details>summary,
+.mjcdesigns-ai-app .mjcdesigns-ai-document-picker-list {
+  border:0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-alpha-notice {
+  padding-top:7px;
+  padding-bottom:7px;
+  line-height:1.4;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview {
+  border:0;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-head {
+  position:relative;
+  z-index:3;
+  border:0;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-devices {
+  display:none;
+}
+.mjcdesigns-ai-preview-viewport-picker {
+  position:relative;
+  flex:0 1 235px;
+  min-width:170px;
+  max-width:100%;
+  color:#f4f2f8;
+  font-size:12px;
+  letter-spacing:0;
+}
+.mjcdesigns-ai-preview-viewport-picker>summary {
+  display:flex;
+  align-items:center;
+  min-height:31px;
+  padding:5px 10px;
+  border:0;
+  border-radius:7px;
+  background:#242329;
+  cursor:pointer;
+  list-style:none;
+}
+.mjcdesigns-ai-preview-viewport-picker>summary::-webkit-details-marker {
+  display:none;
+}
+.mjcdesigns-ai-preview-viewport-picker>summary::after {
+  content:"▾";
+  margin-left:auto;
+  padding-left:10px;
+  color:#c8c4d0;
+}
+.mjcdesigns-ai-preview-viewport-picker>summary:focus-visible {
+  outline:2px solid #a48ae0;
+  outline-offset:2px;
+}
+.mjcdesigns-ai-preview-viewport-name {
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.mjcdesigns-ai-preview-viewport-list {
+  position:absolute;
+  top:calc(100% + 5px);
+  left:0;
+  z-index:5;
+  width:max(100%,235px);
+  max-width:min(300px,80vw);
+  max-height:260px;
+  overflow:auto;
+  padding:5px;
+  border:0;
+  border-radius:8px;
+  background:#1d1c21;
+  box-shadow:0 12px 30px #0009;
+}
+.mjcdesigns-ai-preview-viewport-option {
+  display:block;
+  width:100%;
+  min-height:34px;
+  padding:7px 9px;
+  border:0;
+  border-radius:5px;
+  background:transparent;
+  color:#f1eff5;
+  font:inherit;
+  text-align:left;
+  cursor:pointer;
+}
+.mjcdesigns-ai-preview-viewport-option:hover,
+.mjcdesigns-ai-preview-viewport-option[aria-selected="true"] {
+  background:#2b2635;
+}
+.mjcdesigns-ai-preview-viewport-option:focus-visible {
+  outline:2px solid #a48ae0;
+  outline-offset:-2px;
+}
+.mjcdesigns-ai-preview-modal-dialog {
+  border:0;
+}
+.mjcdesigns-ai-preview-modal-header,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-head {
+  border:0;
+}
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-modes,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-devices button,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-modes button,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-open,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-modal-close,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-custom-editor input {
+  border:0;
+}
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-devices button:hover,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-devices button.active,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-modal-close:hover {
+  border:0;
+}
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-viewport-picker {
+  display:none;
+}
+
+/* Group only the workspace preview controls; the expanded modal keeps its layout. */
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-head {
+  display:flex;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  gap:7px;
+  padding:8px 10px;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-controls {
+  display:flex;
+  flex:0 0 auto;
+  flex-direction:column;
+  align-items:stretch;
+  width:100%;
+  gap:7px;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-primary-controls,
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-actions {
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:6px;
+  width:100%;
+  min-width:0;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-primary-controls {
+  flex-wrap:wrap;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-actions {
+  flex-wrap:wrap;
+}
+.mjcdesigns-ai-app #mjcdesigns-ai-preview-content .mjcdesigns-ai-preview-controls-toggle {
+  align-self:center;
+  justify-content:center;
+  width:100%;
+  min-height:20px;
+  margin:0;
+}
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-primary-controls,
+.mjcdesigns-ai-preview-modal-dialog .mjcdesigns-ai-preview-actions {
+  display:contents;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-loading-panel {
+  border:0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-bottom-note {
+  padding:10px;
+}
+
+/* 1.1.4 subpage surfaces: keep table grids, buttons, and separators visible. */
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-about-heading,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-about-card,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-about-facts>div,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-terms-notice,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-creator-footer,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-faq-item,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-about-limit-list,
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-settings-privacy-warning {
+  border:0;
+}
+.mjcdesigns-ai-about-wrap .mjcdesigns-ai-creator-footer-button {
+  border:0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-document-picker-details>summary::after {
+  content:"";
+  flex:0 0 auto;
+  width:0;
+  height:0;
+  margin-left:auto;
+  border-left:4px solid transparent;
+  border-right:4px solid transparent;
+  border-top:5px solid #c8c4d0;
+}
+.mjcdesigns-ai-app .mjcdesigns-ai-document-picker-details[open]>summary::after {
+  transform:rotate(180deg);
+}

mjcdesigns-ai-design-assistant-bricks/trunk/assets/app.js

@@ -20 +20 @@
     currentPreviewError: '',
     previewMode: 'current',
-    previewControlsCollapsed: false,
+    previewControlsCollapsed: true,
     selectedId: null,
     settingsElementId: null,
@@ -478 +478 @@
     const previewHead = document.createElement('div'); previewHead.className = 'mjcdesigns-ai-preview-head';
     const previewControls = document.createElement('div'); previewControls.className = 'mjcdesigns-ai-preview-controls';
+    const primaryControls = document.createElement('div'); primaryControls.className = 'mjcdesigns-ai-preview-primary-controls';
+    const previewActions = document.createElement('div'); previewActions.className = 'mjcdesigns-ai-preview-actions';
     if (proposal) {
       const modes = document.createElement('div'); modes.className = 'mjcdesigns-ai-preview-modes'; modes.setAttribute('role', 'group'); modes.setAttribute('aria-label', 'Choose page version to preview');
       [['current', 'Current page'], ['proposed', 'Proposed changes']].forEach(([mode, label]) => { const button = document.createElement('button'); button.type = 'button'; button.textContent = label; button.classList.toggle('active', state.previewMode === mode); button.setAttribute('aria-pressed', state.previewMode === mode ? 'true' : 'false'); button.addEventListener('click', () => { state.previewMode = mode; if (state.previewObserver) { state.previewObserver.disconnect(); state.previewObserver = null; } renderFrontendPreview(state.proposal); }); modes.append(button); });
-      previewControls.append(modes);
+      primaryControls.append(modes);
     }
     let devices = null;
+    let viewportPicker = null;
     ensurePreviewViewportSelection();
     if (previewUrl) {
+      viewportPicker = document.createElement('details'); viewportPicker.className = 'mjcdesigns-ai-preview-viewport-picker';
+      const viewportSummary = document.createElement('summary'); viewportSummary.setAttribute('aria-label', 'Choose frontend preview viewport');
+      const viewportSummaryLabel = document.createElement('span'); viewportSummaryLabel.className = 'mjcdesigns-ai-preview-viewport-name'; viewportSummary.append(viewportSummaryLabel);
+      const viewportList = document.createElement('div'); viewportList.className = 'mjcdesigns-ai-preview-viewport-list'; viewportList.setAttribute('role', 'listbox'); viewportList.setAttribute('aria-label', 'Frontend preview viewports');
       devices = document.createElement('div'); devices.className = 'mjcdesigns-ai-preview-devices'; devices.setAttribute('role', 'group'); devices.setAttribute('aria-label', 'Preview viewport');
       state.previewViewports.forEach((viewport) => {
         const label = viewport.label || viewport.key; const width = Number(viewport.width) || 0;
-        const button = document.createElement('button'); button.type = 'button'; button.dataset.viewport = viewport.key; button.textContent = label + ' · ' + width + 'px' + (viewport.paused ? ' (Paused)' : ''); button.title = 'Preview at ' + width + 'px' + (viewport.paused ? ' · Paused in Bricks' : ''); button.setAttribute('aria-label', 'Preview at ' + label + ', ' + width + ' pixels' + (viewport.paused ? ', paused in Bricks' : '')); button.setAttribute('aria-pressed', state.previewViewport === viewport.key ? 'true' : 'false');
+        const viewportText = label + ' · ' + width + 'px' + (viewport.paused ? ' (Paused)' : '');
+        const button = document.createElement('button'); button.type = 'button'; button.dataset.viewport = viewport.key; button.textContent = viewportText; button.title = 'Preview at ' + width + 'px' + (viewport.paused ? ' · Paused in Bricks' : ''); button.setAttribute('aria-label', 'Preview at ' + label + ', ' + width + ' pixels' + (viewport.paused ? ', paused in Bricks' : '')); button.setAttribute('aria-pressed', state.previewViewport === viewport.key ? 'true' : 'false');
         button.classList.toggle('active', state.previewViewport === viewport.key); devices.append(button);
+        const option = document.createElement('button'); option.type = 'button'; option.className = 'mjcdesigns-ai-preview-viewport-option'; option.dataset.viewport = viewport.key; option.setAttribute('role', 'option'); option.setAttribute('aria-selected', String(state.previewViewport === viewport.key)); option.textContent = viewportText; viewportList.append(option);
+        if (state.previewViewport === viewport.key) viewportSummaryLabel.textContent = viewportText;
       });
-      previewControls.append(devices);
+      viewportPicker.append(viewportSummary, viewportList);
+      primaryControls.append(viewportPicker, devices);
     }
     if (openPreviewUrl) {
@@ -502 +513 @@
         showConfirmation(isProposedPreviewLink ? 'Open this preview?' : 'Open the selected page?', message, 'Open preview', 'Stay here', () => window.open(openPreviewUrl, '_blank', 'noopener'));
       });
-      previewControls.append(openPreview);
+      previewActions.append(openPreview);
       const modalButton = document.createElement('button'); modalButton.type = 'button'; modalButton.className = 'mjcdesigns-ai-preview-modal-open'; modalButton.textContent = 'Expand preview'; modalButton.setAttribute('aria-label', 'Expand frontend preview'); modalButton.addEventListener('click', () => openPreviewModal(preview, modalButton));
-      previewControls.append(modalButton);
-    }
+      previewActions.append(modalButton);
+    }
+    if (primaryControls.hasChildNodes()) previewControls.append(primaryControls);
+    if (previewActions.hasChildNodes()) previewControls.append(previewActions);
     preview.classList.toggle('preview-controls-collapsed', state.previewControlsCollapsed);
     const controlsToggle = document.createElement('button'); controlsToggle.type = 'button'; controlsToggle.className = 'mjcdesigns-ai-preview-controls-toggle';
@@ -555 +568 @@
       preview.resizePreview = resizePreview;
       if (devices) {
-        devices.querySelectorAll('button').forEach((button) => button.addEventListener('click', () => {
-          state.previewViewport = button.dataset.viewport;
+        const selectViewport = (key) => {
+          state.previewViewport = key;
           if (state.previewModal) {
             state.modalCustomViewport.active = false;
             state.previewModal.syncCustomSelection();
           }
-          devices.querySelectorAll('button').forEach((item) => { const active = item === button; item.classList.toggle('active', active); item.setAttribute('aria-pressed', active ? 'true' : 'false'); });
+          devices.querySelectorAll('button[data-viewport]').forEach((item) => { const active = item.dataset.viewport === key; item.classList.toggle('active', active); item.setAttribute('aria-pressed', String(active)); });
+          viewportPicker.querySelectorAll('button[data-viewport]').forEach((item) => { const active = item.dataset.viewport === key; item.setAttribute('aria-selected', String(active)); if (active) viewportPicker.querySelector('.mjcdesigns-ai-preview-viewport-name').textContent = item.textContent; });
+          viewportPicker.open = false;
           resizePreview();
-        }));
+        };
+        devices.querySelectorAll('button[data-viewport]').forEach((button) => button.addEventListener('click', () => selectViewport(button.dataset.viewport)));
+        viewportPicker.querySelectorAll('button[data-viewport]').forEach((option) => option.addEventListener('click', () => selectViewport(option.dataset.viewport)));
       }
       resizePreview();
@@ -574 +591 @@
   function openPreviewModal(preview, trigger) {
     if (!preview || state.previewModal) return;
+    const viewportPicker = preview.querySelector('.mjcdesigns-ai-preview-viewport-picker');
+    if (viewportPicker) viewportPicker.open = false;
     const placeholder = document.createComment('MJC Designs preview modal placeholder');
     preview.parentNode.insertBefore(placeholder, preview);
@@ -828 +847 @@
     else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
   });
-  document.addEventListener('click', (event) => { const details = document.querySelector('.mjcdesigns-ai-document-picker-details[open]'); if (details && !details.contains(event.target)) details.open = false; if (tooltipPinned && tooltipTarget && !tooltipTarget.contains(event.target)) hideTooltip(); });
+  document.addEventListener('click', (event) => { const details = document.querySelector('.mjcdesigns-ai-document-picker-details[open]'); if (details && !details.contains(event.target)) details.open = false; const viewportPicker = document.querySelector('.mjcdesigns-ai-preview-viewport-picker[open]'); if (viewportPicker && !viewportPicker.contains(event.target)) viewportPicker.open = false; if (tooltipPinned && tooltipTarget && !tooltipTarget.contains(event.target)) hideTooltip(); });
   $('mjcdesigns-ai-refresh').addEventListener('click', () => loadDocuments(state.doc && state.doc.id));
   $('mjcdesigns-ai-send').addEventListener('click', generate);

mjcdesigns-ai-design-assistant-bricks/trunk/mjcdesigns-ai-design-assistant-bricks.php

@@ -3 +3 @@
  * Plugin Name: MJC Designs AI Design Assistant for Bricks Builder
  * Description: MJC Designs AI Design Assistant for Bricks Builder is an independent integration, not affiliated with or endorsed by Bricks Builder or its developers.
- * Version: 1.1.3
+ * Version: 1.1.4
  * Author: MJC Designs
  * Requires at least: 7.0
@@ -18 +18 @@
  */
 if ( ! defined( 'ABSPATH' ) ) { exit; }
-define( 'MJCDESIGNS_AI_DESIGN_ASSISTANT_BRICKS_VERSION', '1.1.3' );
+define( 'MJCDESIGNS_AI_DESIGN_ASSISTANT_BRICKS_VERSION', '1.1.4' );
 define( 'MJCDESIGNS_AI_DESIGN_ASSISTANT_BRICKS_FILE', __FILE__ );
 define( 'MJCDESIGNS_AI_DESIGN_ASSISTANT_BRICKS_URL', plugin_dir_url( __FILE__ ) );
@@ -50 +50 @@
 function mjcdesigns_ai_design_assistant_bricks_changelog() {
         return array(
+                array( 'version' => '1.1.4 (alpha)', 'released_at' => '2026-10-17 06:35:34', 'type' => 'change', 'label' => 'Workspace design revision', 'items' => array( 'Refresh the workspace and expanded preview styling with cleaner surfaces and controls, and simplify the workspace preview layout while keeping the design workflow intact.' ) ),
                 array( 'version' => '1.1.3 (alpha)', 'released_at' => '2026-10-15 03:49:05', 'type' => 'change', 'label' => 'Alpha improvement', 'items' => array( 'Allow users to drag an image onto the prompt area to attach it as a reference, with a clear drop overlay and the existing file validation.', 'Pretty-print object settings with their original keys, quoted string values, and indentation in the Page Elements inspector preview without changing saved or proposed element data.', 'Replace the three bouncing dots in the main loading modal with the animated MJC Designs AI logo for page loading, applying, undoing, and other busy actions.', 'Load the logo GIF when the modal opens and remove the unused three-dot modal animation styles.', 'Add a Custom viewport control to the expanded frontend preview with editable pixel width and height, without changing the regular preview viewport.', 'Continue the public alpha evaluation phase; suggestions may be incomplete, and bugs or unexpected results are still possible.' ) ),
                 array( 'version' => '1.1.2 (alpha)', 'released_at' => '2026-10-12 21:39:09', 'type' => 'fix', 'label' => 'Review fixes', 'items' => array( 'Migrate text generation to the WordPress AI Client and add a per-user provider/model selector backed by configured Connectors, with image-capability checks for reference uploads.', 'Restrict AI proposals to registered native Bricks controls; exclude code controls and reject _cssCustom instead of writing arbitrary CSS.', 'Use attached reference images only for their own request and remove remote placeholder-image instructions.', 'Rename the plugin branding to MJC Designs AI Design Assistant for Bricks Builder while retaining the brick-and-spark icon and updating its wordmark.', 'Update privacy and usage disclosures for provider-managed credentials, provider-specific costs, and data handling.', 'Add translator context for the AI provider error message placeholder reported by Plugin Check.', 'Simplify the AI model selector into a compact row and correct its width so it no longer crowds the prompt composer.', 'Move the assistant into a full-height left column, with the app header and workspace tools stacked in the right column.', 'Prefix admin pages, REST routes, asset handles, localized JavaScript data, PHP functions and constants, UI selectors, and new stored data with distinctive MJC Designs identifiers; keep old names only for cleanup of data from earlier alpha builds.', 'Restore tooltip text lookup after prefixing and render the tooltip layer at document level so it can extend beyond workspace clipping while staying within the viewport.', 'Normalize all packaged text files to LF line endings to prevent Plugin Check mixed-line-ending warnings.', 'Build preview viewport buttons from Bricks’ configured breakpoint labels and builder widths, including custom and paused breakpoints; refresh the list when the workspace loads or is refreshed.', 'Add a backdrop modal for the existing interactive frontend preview, with close, Escape, outside-click dismissal, focus handling, and the same breakpoint controls; preserve the separate Open preview action.', 'Pass Bricks controls’ registered required_when dependencies to the AI and validate changed control prerequisites against the final element settings, rejecting flex-direction values when the matching display is not flex or inline-flex.', 'Increase breakpoint and toolbar text sizes inside the expanded preview modal while retaining compact controls in the regular workspace preview.', 'Add a one-step Redo action paired with Undo; preserve stale-document checks and clear the redo snapshot when a new assistant change is applied.', 'Hide the redundant Expand preview action while the preview is already open in its modal.', 'Use the all-caps FRONTEND PREVIEW title in the expanded modal, center regular preview controls, and style Open preview to match the controls.', 'Show an accessible purple circular loading indicator over frontend preview iframes until the page loads, including the cache-busting retry.', 'Guide generation to use only available media references and never invent remote file URLs; remove the last Custom CSS fallback instruction.', 'Identify the plugin as an independent integration in its public description and align minimum-version messages with WordPress 7.0.', 'Clarify in the privacy documentation that provider requests go to the service configured in the selected WordPress Connector.', 'Display the full plugin name and a clear non-affiliation and non-endorsement statement throughout the plugin admin screens, including the main workspace and subpages; align the plugin header description with that wording.', 'Document the included human-readable JavaScript and CSS source files in the readme and clarify that the plugin uses them directly without a build step.' ) ),

mjcdesigns-ai-design-assistant-bricks/trunk/readme.txt

@@ -5 +5 @@
 Tested up to: 7.1
 Requires PHP: 7.4
-Stable tag: 1.1.3
+Stable tag: 1.1.4
 License: GPL-2.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -95 +95 @@
 
 == Changelog ==
+
+= 1.1.4 =
+* Workspace design revision · Alpha · 2026-10-17 06:35:34 PHT
+  1. Refresh the workspace and expanded preview styling with cleaner surfaces and controls, and simplify the workspace preview layout while keeping the design workflow intact.
 
 = 1.1.3 =