From eca89e51d26dbb3678586967bbdb9935645fe588 Mon Sep 17 00:00:00 2001
From: Chili Palmer <hugoms@me.com>
Date: Mon, 4 May 2026 12:02:13 +0200
Subject: [PATCH] feat: phase 5 of tailwind migration

---
 assets/css/assistant.css                      |  51 +++--
 assets/css/editor.css                         | 175 ------------------
 assets/css/media_editor.css                   | 149 ---------------
 assets/css/menu_editor.css                    |  30 ---
 assets/css/utilities.css                      | 123 ++++++++++++
 .../chat_editor_html/chat_editor.html.heex    |  20 +-
 .../media_editor_html/media_editor.html.heex  |  46 ++---
 .../menu_editor_html/menu_editor.html.heex    |   8 +-
 .../post_editor_html/post_editor.html.heex    |  42 ++---
 .../script_editor.html.heex                   |  24 +--
 .../settings_editor.html.heex                 |  34 ++--
 .../template_editor.html.heex                 |  22 +--
 test/bds/desktop/shell_live_test.exs          |  76 +++++---
 test/bds/ui/shell_test.exs                    | 132 +++++++++++++
 14 files changed, 439 insertions(+), 493 deletions(-)

diff --git a/assets/css/assistant.css b/assets/css/assistant.css
index b35c0e8..84d820b 100644
--- a/assets/css/assistant.css
+++ b/assets/css/assistant.css
@@ -9,18 +9,10 @@
 }
 
 .chat-panel {
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
   color: var(--vscode-editor-foreground);
 }
 
 .chat-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
   border-bottom: 1px solid var(--vscode-panel-border);
   background: var(--vscode-sideBar-background);
 }
@@ -28,8 +20,6 @@
 .chat-panel-title {
   flex: 1;
   min-width: 0;
-  display: flex;
-  align-items: center;
   gap: 10px;
   overflow: visible;
   font-size: 14px;
@@ -91,10 +81,6 @@
 }
 
 .chat-messages {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
 }
 
 .chat-message {
@@ -152,9 +138,6 @@
 }
 
 .chat-panel .chat-input-wrapper {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
   min-height: 30px;
   border: 1px solid var(--vscode-input-border);
   border-radius: 6px;
@@ -204,3 +187,37 @@
 .chat-panel .chat-send-button:disabled {
   opacity: 0.5;
 }
+
+@media (max-width: 720px) {
+  .chat-panel-header {
+    align-items: stretch;
+    flex-direction: column;
+    padding: 10px 12px;
+  }
+
+  .chat-panel-title {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .chat-model-selector-wrap {
+    width: 100%;
+  }
+
+  .chat-panel .chat-model-selector-button.chat-model-selector-inline {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .chat-messages {
+    padding: 12px;
+  }
+
+  .chat-message-content {
+    max-width: 100%;
+  }
+
+  .chat-panel .chat-input-container {
+    padding: 8px 12px;
+  }
+}
diff --git a/assets/css/editor.css b/assets/css/editor.css
index 0dfe357..2a79049 100644
--- a/assets/css/editor.css
+++ b/assets/css/editor.css
@@ -321,58 +321,6 @@
   overflow: hidden;
 }
 
-.post-editor .editor-header,
-.scripts-view-shell.editor .editor-header,
-.templates-view-shell.editor .editor-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-  min-height: 35px;
-  background-color: var(--vscode-tab-activeBackground);
-  border-bottom: 1px solid var(--vscode-panel-border);
-}
-
-.post-editor .editor-tabs,
-.scripts-view-shell.editor .editor-tabs,
-.templates-view-shell.editor .editor-tabs {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
-}
-
-.post-editor .editor-tab,
-.scripts-view-shell.editor .editor-tab,
-.templates-view-shell.editor .editor-tab {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 6px 12px;
-  background-color: var(--vscode-tab-inactiveBackground);
-  color: var(--vscode-tab-inactiveForeground);
-  font-size: 13px;
-  border-radius: 4px 4px 0 0;
-}
-
-.post-editor .editor-tab.active,
-.scripts-view-shell.editor .editor-tab.active,
-.templates-view-shell.editor .editor-tab.active {
-  background-color: var(--vscode-tab-activeBackground);
-  color: var(--vscode-tab-activeForeground);
-}
-
-.post-editor .editor-tab-title,
-.scripts-view-shell.editor .editor-tab-title,
-.templates-view-shell.editor .editor-tab-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .post-editor .editor-tab-dirty {
   color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-editorWarning-foreground));
   font-size: 10px;
@@ -384,14 +332,6 @@
   white-space: nowrap;
 }
 
-.post-editor .editor-actions,
-.scripts-view-shell.editor .editor-actions,
-.templates-view-shell.editor .editor-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .post-editor .quick-actions-wrapper {
   position: relative;
   display: inline-block;
@@ -409,60 +349,17 @@
   line-height: 1;
 }
 
-.post-editor .quick-actions-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  min-width: 280px;
-  background: var(--vscode-dropdown-background, #3c3c3c);
-  border: 1px solid var(--vscode-dropdown-border, #454545);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  overflow: hidden;
-}
-
 .post-editor .quick-actions-divider {
   height: 1px;
   background: var(--vscode-dropdown-border, #454545);
 }
 
-.post-editor .quick-action-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  background: none;
-  border: none;
-  color: var(--vscode-dropdown-foreground, #ccc);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s;
-}
-
-.post-editor .quick-action-item:hover:not(:disabled) {
-  background: var(--vscode-list-hoverBackground, #2a2d2e);
-}
-
-.post-editor .quick-action-item:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .post-editor .quick-action-icon {
   font-size: 16px;
   flex-shrink: 0;
   margin-top: 2px;
 }
 
-.post-editor .quick-action-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
 .post-editor .quick-action-text strong {
   font-size: 13px;
   font-weight: 500;
@@ -510,19 +407,7 @@
   font-style: italic;
 }
 
-.post-editor .editor-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
-  overflow-y: auto;
-}
-
 .post-editor .metadata-toggle-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 }
 
 .post-editor .metadata-toggle {
@@ -550,37 +435,15 @@
   font-size: 10px;
 }
 
-.post-editor .editor-header-row {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-
 .post-editor .editor-header-row.is-collapsed {
   display: none;
 }
 
-.post-editor .editor-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
 .post-editor .editor-media-panel {
   width: 200px;
   flex-shrink: 0;
 }
 
-.post-editor .editor-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 200px;
-}
-
 .post-editor .editor-field label,
 .post-editor .editor-body label,
 .post-editor .post-editor-links-label {
@@ -600,27 +463,11 @@
   color: var(--vscode-foreground);
 }
 
-.post-editor .post-editor-input,
-.post-editor .post-editor-textarea {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
-  border-radius: 4px;
-  background: var(--vscode-input-background, rgba(255, 255, 255, 0.06));
-  color: var(--vscode-input-foreground, var(--vscode-foreground));
-  font: inherit;
-}
-
 .post-editor .post-editor-input.is-readonly {
   opacity: 0.7;
   cursor: not-allowed;
 }
 
-.post-editor .post-editor-textarea {
-  line-height: 1.5;
-  resize: vertical;
-}
-
 .post-editor .post-editor-excerpt {
   min-height: 96px;
 }
@@ -796,33 +643,11 @@
   font-weight: 600;
 }
 
-.post-editor .editor-field-row {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-}
-
-.post-editor .editor-language-row {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
 .post-editor .editor-language-row select {
   flex: 1;
   min-width: 0;
 }
 
-.post-editor .editor-translations-flags {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-}
-
 .post-editor .editor-translation-flag {
   display: inline-flex;
   align-items: center;
diff --git a/assets/css/media_editor.css b/assets/css/media_editor.css
index 34fb7a5..8af0c20 100644
--- a/assets/css/media_editor.css
+++ b/assets/css/media_editor.css
@@ -1,64 +1,8 @@
-[data-testid="media-editor"] {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--vscode-editor-background);
-  overflow: hidden;
-}
-
-[data-testid="media-editor"] .editor-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-  min-height: 35px;
-  background-color: var(--vscode-tab-activeBackground);
-  border-bottom: 1px solid var(--vscode-panel-border);
-}
-
-[data-testid="media-editor"] .editor-tabs {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
-}
-
-[data-testid="media-editor"] .editor-tab {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 6px 12px;
-  background-color: var(--vscode-tab-inactiveBackground);
-  color: var(--vscode-tab-inactiveForeground);
-  font-size: 13px;
-  border-radius: 4px 4px 0 0;
-}
-
-[data-testid="media-editor"] .editor-tab.active {
-  background-color: var(--vscode-tab-activeBackground);
-  color: var(--vscode-tab-activeForeground);
-}
-
-[data-testid="media-editor"] .editor-tab-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 [data-testid="media-editor"] .editor-tab-dirty {
   color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-editorWarning-foreground));
   font-size: 10px;
 }
 
-[data-testid="media-editor"] .editor-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 [data-testid="media-editor"] .editor-actions button {
   padding: 4px 10px;
   font-size: 12px;
@@ -89,62 +33,17 @@
   line-height: 1;
 }
 
-[data-testid="media-editor"] .quick-actions-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  width: 280px;
-  background: var(--vscode-dropdown-background, #252526);
-  border: 1px solid var(--vscode-dropdown-border, #454545);
-  border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
-  overflow: hidden;
-  z-index: 30;
-}
-
 [data-testid="media-editor"] .quick-actions-divider {
   height: 1px;
   background: var(--vscode-dropdown-border, #454545);
 }
 
-[data-testid="media-editor"] .quick-action-item {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  background: none;
-  border: none;
-  color: var(--vscode-dropdown-foreground, #ccc);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s;
-}
-
-[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
-  background: var(--vscode-list-hoverBackground, #2a2d2e);
-}
-
-[data-testid="media-editor"] .quick-action-item:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 [data-testid="media-editor"] .quick-action-icon {
   font-size: 16px;
   flex-shrink: 0;
   margin-top: 2px;
 }
 
-[data-testid="media-editor"] .quick-action-text {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
 [data-testid="media-editor"] .quick-action-text strong {
   font-size: 13px;
   font-weight: 500;
@@ -155,29 +54,12 @@
   opacity: 0.7;
 }
 
-[data-testid="media-editor"] .editor-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  overflow-y: auto;
-  gap: 16px;
-}
-
 [data-testid="media-editor"] > .editor-content.media-editor {
   flex-direction: row;
   align-items: stretch;
   gap: 24px;
 }
 
-[data-testid="media-editor"] .editor-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-}
-
 [data-testid="media-editor"] .editor-field label {
   font-size: 11px;
   font-weight: 500;
@@ -186,35 +68,12 @@
   letter-spacing: 0.5px;
 }
 
-[data-testid="media-editor"] .editor-field-row {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-  margin-bottom: 0;
-}
-
-[data-testid="media-editor"] .post-editor-input,
-[data-testid="media-editor"] .post-editor-textarea {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
-  border-radius: 4px;
-  background: var(--vscode-input-background, rgba(255, 255, 255, 0.06));
-  color: var(--vscode-input-foreground, var(--vscode-foreground));
-  font: inherit;
-}
-
 [data-testid="media-editor"] .post-editor-input.disabled,
 [data-testid="media-editor"] .post-editor-input:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-[data-testid="media-editor"] .post-editor-textarea {
-  line-height: 1.5;
-  resize: vertical;
-}
-
 [data-testid="media-editor"] .media-preview {
   flex: 1;
   display: flex;
@@ -255,18 +114,10 @@
 
 [data-testid="media-editor"] .media-details {
   width: 320px;
-  display: flex;
-  flex-direction: column;
   gap: 12px;
   flex-shrink: 0;
 }
 
-[data-testid="media-editor"] .media-editor-details-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
 [data-testid="media-editor"] .media-details textarea {
   resize: vertical;
 }
diff --git a/assets/css/menu_editor.css b/assets/css/menu_editor.css
index 9c1c67d..ae58430 100644
--- a/assets/css/menu_editor.css
+++ b/assets/css/menu_editor.css
@@ -1,20 +1,4 @@
-.menu-editor-view {
-  padding: 1rem;
-  height: 100%;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  overflow: hidden;
-  background: var(--vscode-editor-background);
-}
-
 .menu-editor-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
 }
 
 .menu-editor-header h2 {
@@ -26,18 +10,7 @@
   color: var(--vscode-descriptionForeground);
 }
 
-.menu-editor-main {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  overflow: hidden;
-}
-
 .menu-editor-tree-wrap {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
   border: 1px solid var(--vscode-panel-border);
   border-radius: 6px;
   background: var(--vscode-editor-background);
@@ -46,9 +19,6 @@
 }
 
 .menu-editor-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
   margin-bottom: 0.5rem;
   padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vscode-panel-border);
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index bfc27f9..0e47593 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -130,6 +130,119 @@
 		color: var(--vscode-descriptionForeground);
 	}
 
+	.ui-editor-shell {
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		background: var(--vscode-editor-background);
+	}
+
+	.ui-editor-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 12px;
+		min-height: 35px;
+		padding: 0 12px;
+		border-bottom: 1px solid var(--vscode-panel-border);
+		background: var(--vscode-tab-activeBackground);
+	}
+
+	.ui-editor-tab-current {
+		display: inline-flex;
+		max-width: 100%;
+		align-items: center;
+		gap: 6px;
+		overflow: hidden;
+		padding: 6px 12px;
+		border-radius: 4px 4px 0 0;
+		background: var(--vscode-tab-activeBackground);
+		color: var(--vscode-tab-activeForeground);
+	}
+
+	.ui-editor-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+
+	.ui-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		min-height: 32px;
+	}
+
+	.ui-toolbar-group {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.ui-field-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		min-width: 0;
+	}
+
+	.ui-field-stack > label,
+	.ui-field-label {
+		font-size: 11px;
+		font-weight: 500;
+		color: var(--vscode-descriptionForeground);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.ui-field-grid-2,
+	.ui-field-grid-3 {
+		display: grid;
+		gap: 16px;
+	}
+
+	.ui-dropdown-menu {
+		background: var(--vscode-dropdown-background, var(--vscode-sideBar-background));
+		border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
+		border-radius: 6px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+		overflow: hidden;
+	}
+
+	.ui-dropdown-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+		padding: 10px 12px;
+		border: none;
+		background: transparent;
+		color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s;
+	}
+
+	.ui-dropdown-item:hover:not(:disabled) {
+		background: var(--vscode-list-hoverBackground, #2a2d2e);
+	}
+
+	.ui-dropdown-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ui-section-card {
+		border: 1px solid var(--vscode-panel-border);
+		border-radius: 8px;
+		background: color-mix(in srgb, var(--vscode-editor-background) 84%, var(--vscode-input-background));
+	}
+
 	.btn-base {
 		display: inline-flex;
 		align-items: center;
@@ -176,3 +289,13 @@
 		overflow: hidden;
 	}
 }
+
+@media (min-width: 768px) {
+	.ui-field-grid-2 {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.ui-field-grid-3 {
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+	}
+}
diff --git a/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex b/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
index bca18e6..d66506a 100644
--- a/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
+++ b/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
@@ -1,5 +1,5 @@
-<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel flex h-full min-h-0 flex-col" data-testid="chat-editor" phx-hook="ChatSurface">
-  <div class="chat-panel-header flex shrink-0 items-center justify-between gap-3">
+<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel ui-editor-shell flex h-full min-h-0 flex-col" data-testid="chat-editor" phx-hook="ChatSurface">
+  <div class="chat-panel-header flex shrink-0 items-center justify-between gap-3 px-4 py-3">
     <div class="chat-panel-title flex min-w-0 flex-1 items-center justify-between gap-3">
       <span class="chat-panel-title-main">
         <%= if @chat_editor.needs_api_key? do %>
@@ -23,7 +23,7 @@
           </button>
 
           <%= if @chat_editor.model_selector_open? and @chat_editor.available_models != [] do %>
-            <div class="chat-model-selector-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col">
+            <div class="chat-model-selector-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col">
               <%= for group <- @chat_editor.available_model_groups do %>
                 <section class="chat-model-provider-group" data-testid="chat-model-provider-group" data-provider={group.provider}>
                   <%= if length(@chat_editor.available_model_groups) > 1 do %>
@@ -33,7 +33,7 @@
                   <%= for model <- group.models do %>
                     <button
                       class={[
-                        "chat-model-selector-option flex items-center justify-between gap-2 text-left",
+                        "chat-model-selector-option ui-dropdown-item flex items-center justify-between gap-2 text-left",
                         if(model.id == @chat_editor.effective_model, do: "active")
                       ]}
                       type="button"
@@ -57,7 +57,7 @@
 
   <div class="chat-messages chat-surface-scroll min-h-0 flex-1 overflow-auto">
     <%= if @chat_editor.needs_api_key? do %>
-      <div class="chat-welcome chat-api-key-state flex flex-col items-start gap-3" data-testid="chat-api-key-required">
+      <div class="chat-welcome chat-api-key-state ui-section-card flex flex-col items-start gap-3 p-4" data-testid="chat-api-key-required">
         <div class="chat-welcome-icon">🔑</div>
         <h2><%= dgettext("ui", "API Key Required") %></h2>
         <p><%= dgettext("ui", "Configure an API key in Settings to enable AI chat.") %></p>
@@ -67,7 +67,7 @@
       </div>
     <% else %>
     <%= if Enum.empty?(@chat_editor.messages) and not @chat_editor.is_streaming do %>
-      <div class="chat-welcome flex flex-col items-start gap-3">
+      <div class="chat-welcome ui-section-card flex flex-col items-start gap-3 p-4">
         <div class="chat-welcome-icon">🤖</div>
         <h2><%= dgettext("ui", "Welcome to the AI Assistant") %></h2>
         <p><%= dgettext("ui", "I can help you manage your blog with rich visualizations. Try asking me to:") %></p>
@@ -83,7 +83,7 @@
       <%= for message <- @chat_editor.messages do %>
         <div class={["chat-message flex items-start gap-3", to_string(message.role || "assistant")]}> 
           <div class="chat-message-avatar"><%= if message.role == :user, do: "👤", else: "🤖" %></div>
-          <div class="chat-message-content">
+          <div class="chat-message-content ui-section-card">
             <div class="chat-message-header"><span class="chat-message-role"><%= message_role_label(message.role) %></span></div>
             <.chat_tool_markers markers={message.tool_markers} />
 
@@ -103,7 +103,7 @@
       <%= if @chat_editor.pending_user_message do %>
         <div class="chat-message user pending flex items-start gap-3" data-testid="chat-pending-user-message">
           <div class="chat-message-avatar">👤</div>
-          <div class="chat-message-content">
+          <div class="chat-message-content ui-section-card">
             <div class="chat-message-header">
               <span class="chat-message-role"><%= message_role_label(:user) %></span>
             </div>
@@ -115,7 +115,7 @@
       <%= if @chat_editor.is_streaming and (@chat_editor.streaming_content != "" or @chat_editor.streaming_tool_markers != []) do %>
         <div class="chat-message assistant streaming flex items-start gap-3" data-testid="chat-streaming-message">
           <div class="chat-message-avatar">🤖</div>
-          <div class="chat-message-content">
+          <div class="chat-message-content ui-section-card">
             <div class="chat-message-header">
               <span class="chat-message-role"><%= message_role_label(:assistant) %></span>
               <span class="streaming-indicator">●</span>
@@ -147,7 +147,7 @@
   </div>
 
   <%= unless @chat_editor.needs_api_key? do %>
-    <div class="chat-input-container flex shrink-0 flex-col gap-3" data-testid="chat-input-container">
+    <div class="chat-input-container ui-field-stack flex shrink-0 flex-col gap-3" data-testid="chat-input-container">
       <%= if @chat_editor.is_streaming do %>
         <button class="chat-abort-button ui-button ui-button-secondary" data-testid="chat-abort-button" type="button" phx-click="abort_chat_editor_message" phx-target={@myself}>◼ <%= dgettext("ui", "Stop") %></button>
       <% end %>
diff --git a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
index 5d03e0a..937592b 100644
--- a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
+++ b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
@@ -1,8 +1,8 @@
-<div class="media-editor editor flex h-full min-h-0 flex-col" data-testid="media-editor">
-  <div class="editor-header flex shrink-0 items-start justify-between gap-3">
+<div class="media-editor editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="media-editor">
+  <div class="editor-header ui-editor-header flex shrink-0 items-start justify-between gap-3">
     <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden">
       <div class={[
-        "editor-tab ui-tab ui-tab-active active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2",
+        "editor-tab ui-tab ui-tab-active ui-editor-tab-current active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2",
         if(@media_editor.dirty?, do: "dirty")
       ]}>
         <span class="editor-tab-title truncate" data-testid="editor-title"><%= @media_editor.display_title %></span>
@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
+    <div class="editor-actions ui-editor-actions flex flex-wrap items-center justify-end gap-2">
       <%= if @media_editor.save_state in [:dirty, :saved] do %>
         <span class="auto-save-indicator"><%= media_editor_save_state_label(@media_editor.save_state) %></span>
       <% end %>
@@ -29,10 +29,10 @@
         </button>
 
         <%= if @media_editor.quick_actions_open? do %>
-          <div class="quick-actions-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
+          <div class="quick-actions-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
             <%= if @media_editor.is_image do %>
               <button
-                class="quick-action-item flex items-start gap-3 text-left"
+                class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
                 data-testid="editor-toolbar-overlay-button"
                 type="button"
                 phx-click="open_overlay"
@@ -49,7 +49,7 @@
             <% end %>
 
             <button
-              class="quick-action-item flex items-start gap-3 text-left"
+              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
               type="button"
               phx-click="detect_media_editor_language"
               phx-target={@myself}
@@ -65,7 +65,7 @@
             <div class="quick-actions-divider"></div>
 
             <button
-              class="quick-action-item flex items-start gap-3 text-left"
+              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
@@ -100,7 +100,7 @@
     </div>
   </div>
 
-  <div class="editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]">
+  <div class="editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]">
     <div class="media-preview flex min-h-[16rem] items-center justify-center">
       <%= if @media_editor.is_image and @media_editor.preview_url do %>
         <div class="media-preview-image">
@@ -118,56 +118,56 @@
 
     <div class="media-details min-w-0">
       <form class="media-editor-details-form flex flex-col gap-4" data-testid="media-editor-form" phx-change="change_media_editor" phx-target={@myself}>
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "File Name") %></label>
           <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.original_name} disabled />
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "MIME Type") %></label>
           <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.mime_type} disabled />
         </div>
 
-        <div class="editor-field-row grid gap-4 md:grid-cols-2">
-          <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field-row ui-field-grid-2 grid gap-4 md:grid-cols-2">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Size") %></label>
             <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.file_size} disabled />
           </div>
 
           <%= if @media_editor.dimensions do %>
-            <div class="editor-field flex flex-col gap-1.5">
+            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Dimensions") %></label>
               <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.dimensions} disabled />
             </div>
           <% end %>
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Title") %></label>
           <input class="post-editor-input ui-input" type="text" name="media_editor[title]" value={@media_editor.form["title"]} />
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Alt Text") %></label>
           <input class="post-editor-input ui-input" type="text" name="media_editor[alt]" value={@media_editor.form["alt"]} />
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Caption") %></label>
           <textarea class="post-editor-textarea ui-textarea" name="media_editor[caption]" rows="3"><%= @media_editor.form["caption"] %></textarea>
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Tags") %></label>
           <input class="post-editor-input ui-input" type="text" name="media_editor[tags]" value={@media_editor.form["tags"]} />
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Author") %></label>
           <input class="post-editor-input ui-input" type="text" name="media_editor[author]" value={@media_editor.form["author"]} />
         </div>
 
-        <div class="editor-field flex flex-col gap-1.5">
+        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Language") %></label>
           <select class="post-editor-input ui-input" name="media_editor[language]">
             <option value=""><%= dgettext("ui", "None") %></option>
@@ -281,15 +281,15 @@
         </div>
         <form class="translation-modal-body flex flex-col gap-4 overflow-auto" phx-change="change_media_translation" phx-target={@myself}>
           <input type="hidden" name="media_translation[language]" value={@media_editor.editing_translation["language"]} />
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Title") %></label>
             <input class="post-editor-input ui-input" type="text" name="media_translation[title]" value={@media_editor.editing_translation["title"]} />
           </div>
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Alt Text") %></label>
             <input class="post-editor-input ui-input" type="text" name="media_translation[alt]" value={@media_editor.editing_translation["alt"]} />
           </div>
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Caption") %></label>
             <textarea class="post-editor-textarea ui-textarea" name="media_translation[caption]" rows="3"><%= @media_editor.editing_translation["caption"] %></textarea>
           </div>
diff --git a/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex b/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
index e03b480..60e31b0 100644
--- a/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
+++ b/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
@@ -1,14 +1,14 @@
-<div class="menu-editor-view flex h-full min-h-0 flex-col" data-testid="menu-editor" phx-window-keydown={if(@menu_editor.draft, do: "menu_editor_keydown")} phx-target={@myself}>
+<div class="menu-editor-view ui-editor-shell flex h-full min-h-0 flex-col p-4" data-testid="menu-editor" phx-window-keydown={if(@menu_editor.draft, do: "menu_editor_keydown")} phx-target={@myself}>
   <div class="menu-editor-header flex shrink-0 items-start justify-between gap-3">
-    <div>
+    <div class="ui-field-stack">
       <h2><%= @menu_editor.title %></h2>
       <p><%= @menu_editor.description %></p>
     </div>
   </div>
 
   <div class="menu-editor-main min-h-0 flex-1 overflow-hidden">
-    <div class="menu-editor-tree-wrap flex h-full min-h-0 flex-col">
-      <div class="menu-editor-toolbar flex flex-wrap items-center gap-2" data-testid="menu-editor-toolbar" role="toolbar" aria-label={@menu_editor.title}>
+    <div class="menu-editor-tree-wrap ui-section-card flex h-full min-h-0 flex-col">
+      <div class="menu-editor-toolbar ui-toolbar flex flex-wrap items-center gap-2" data-testid="menu-editor-toolbar" role="toolbar" aria-label={@menu_editor.title}>
         <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="add-entry" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="add-entry" phx-target={@myself} title={dgettext("ui", "menuEditor.addEntry")}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M7 2h2v5h5v2H9v5H7V9H2V7h5V2z" /></svg>
         </button>
diff --git a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
index a1cd0a9..9d82c3b 100644
--- a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
+++ b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
@@ -1,7 +1,7 @@
-<div class="post-editor editor flex h-full min-h-0 flex-col" data-testid="post-editor">
-  <div class="editor-header flex shrink-0 items-start justify-between gap-3">
+<div class="post-editor editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="post-editor">
+  <div class="editor-header ui-editor-header flex shrink-0 items-start justify-between gap-3">
     <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden">
-      <div class={["editor-tab ui-tab ui-tab-active active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2", if(@post_editor.dirty?, do: "dirty")]}> 
+      <div class={["editor-tab ui-tab ui-tab-active ui-editor-tab-current active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2", if(@post_editor.dirty?, do: "dirty")]}> 
         <span class="editor-tab-title truncate" data-testid="editor-title"><%= @post_editor.display_title %></span>
         <%= if @post_editor.dirty? do %>
           <span class="editor-tab-dirty" title={dgettext("ui", "Unsaved")}>●</span>
@@ -9,7 +9,7 @@
       </div>
     </div>
 
-    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
+    <div class="editor-actions ui-editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={["status-badge", "ui-badge", "status-#{@post_editor.status}"]} data-testid="post-status-badge">
         <%= post_status_label(@post_editor.status) %>
       </span>
@@ -29,9 +29,9 @@
         </button>
 
         <%= if @post_editor.quick_actions_open? do %>
-          <div class="quick-actions-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
+          <div class="quick-actions-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
             <button
-              class="quick-action-item flex items-start gap-3 text-left"
+              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
@@ -48,7 +48,7 @@
             <div class="quick-actions-divider"></div>
 
             <button
-              class="quick-action-item flex items-start gap-3 text-left"
+              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
@@ -83,7 +83,7 @@
     </div>
   </div>
 
-  <form class="post-editor-form editor-content flex min-h-0 flex-1 flex-col gap-4 overflow-auto" data-testid="post-editor-form" phx-change="change_post_editor" phx-target={@myself}>
+  <form class="post-editor-form editor-content flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4" data-testid="post-editor-form" phx-change="change_post_editor" phx-target={@myself}>
     <div class="metadata-toggle-header flex items-center justify-between gap-3">
       <button class={["metadata-toggle", if(@post_editor.metadata_expanded, do: "expanded")]} type="button" phx-click="toggle_post_metadata" phx-target={@myself}>
         <span class="metadata-toggle-chevron"><%= if @post_editor.metadata_expanded, do: "▼", else: "▶" %></span>
@@ -113,12 +113,12 @@
 
     <div class={["editor-header-row grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]", if(not @post_editor.metadata_expanded, do: "is-collapsed")]}> 
         <div class="editor-meta flex min-w-0 flex-col gap-4">
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Title") %></label>
             <input class="post-editor-input ui-input" type="text" name="post_editor[title]" value={@post_editor.form["title"]} />
           </div>
 
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Tags") %></label>
             <div class="tag-input-container relative"> 
               <input type="hidden" name="post_editor[tags]" value={@post_editor.form["tags"]} />
@@ -162,12 +162,12 @@
             </div>
           </div>
 
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Author") %></label>
             <input class="post-editor-input ui-input" type="text" name="post_editor[author]" value={@post_editor.form["author"]} />
           </div>
 
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Language") %></label>
             <div class="editor-language-row flex items-center gap-2">
               <select class="post-editor-input ui-input" name="post_editor[language]">
@@ -189,7 +189,7 @@
             </div>
           </div>
 
-          <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
             <label class="editor-checkbox-label">
               <input type="hidden" name="post_editor[do_not_translate]" value="false" />
               <input type="checkbox" name="post_editor[do_not_translate]" value="true" checked={@post_editor.form["do_not_translate"]} />
@@ -197,13 +197,13 @@
             </label>
           </div>
 
-          <div class="editor-field-row grid gap-4 md:grid-cols-2">
-            <div class="editor-field flex flex-col gap-1.5">
+          <div class="editor-field-row ui-field-grid-2 grid gap-4 md:grid-cols-2">
+            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Slug") %></label>
               <input class="post-editor-input ui-input is-readonly ui-input-readonly" type="text" readonly value={@post_editor.slug} />
             </div>
 
-            <div class="editor-field flex flex-col gap-1.5">
+            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Categories") %></label>
               <div class="tag-input-container relative"> 
                 <input type="hidden" name="post_editor[categories]" value={@post_editor.form["categories"]} />
@@ -246,7 +246,7 @@
           </div>
 
           <%= if @post_editor.show_template_selector? do %>
-            <div class="editor-field flex flex-col gap-1.5">
+            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Template") %></label>
               <select class="post-editor-input ui-input" name="post_editor[template_slug]">
                 <option value=""><%= dgettext("ui", "Default") %></option>
@@ -321,12 +321,12 @@
     </div>
 
     <div class="editor-body flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div class="editor-toolbar flex items-center gap-3">
-        <div class="editor-toolbar-left flex items-center gap-2">
+      <div class="editor-toolbar ui-toolbar flex items-center gap-3">
+        <div class="editor-toolbar-left ui-toolbar-group flex items-center gap-2">
           <label><%= dgettext("ui", "Content") %></label>
         </div>
 
-        <div class="editor-toolbar-center flex flex-1 justify-center">
+        <div class="editor-toolbar-center ui-toolbar-group flex flex-1 justify-center">
           <div class="editor-mode-toggle">
             <%= for mode <- [:markdown, :preview] do %>
               <button
@@ -342,7 +342,7 @@
           </div>
         </div>
 
-        <div class="editor-toolbar-right flex items-center gap-2">
+        <div class="editor-toolbar-right ui-toolbar-group flex items-center gap-2">
           <%= if @post_editor.mode == :markdown do %>
             <button
               class="insert-post-link-button"
diff --git a/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex b/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
index 55e308d..357a923 100644
--- a/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
+++ b/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
@@ -1,7 +1,7 @@
-<div class="scripts-view-shell editor flex h-full min-h-0 flex-col" data-testid="script-editor">
-  <div class="editor-header scripts-header flex shrink-0 items-start justify-between gap-3">
-    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab ui-tab ui-tab-active active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @script_editor.title %></span></div></div>
-    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
+<div class="scripts-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="script-editor">
+  <div class="editor-header scripts-header ui-editor-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab ui-tab ui-tab-active ui-editor-tab-current active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @script_editor.title %></span></div></div>
+    <div class="editor-actions ui-editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={[
         "status-badge",
         "ui-badge",
@@ -16,22 +16,22 @@
       <button class="secondary danger ui-button ui-button-secondary ui-button-danger" type="button" phx-click="delete_script_editor" phx-target={@myself}><%= dgettext("ui", "Delete") %></button>
     </div>
   </div>
-  <form class="editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden" phx-change="change_script_editor" phx-target={@myself}>
+  <form class="editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4" phx-change="change_script_editor" phx-target={@myself}>
     <div class="editor-header-row scripts-meta-row grid gap-4">
       <div class="editor-meta flex min-w-0 flex-col gap-4">
-        <div class="editor-field-row grid gap-4 md:grid-cols-2">
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input class="ui-input" type="text" name="script_editor[title]" value={@script_editor.title} /></div>
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input class="ui-input" type="text" name="script_editor[slug]" value={@script_editor.slug} /></div>
+        <div class="editor-field-row ui-field-grid-2 grid gap-4 md:grid-cols-2">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input class="ui-input" type="text" name="script_editor[title]" value={@script_editor.title} /></div>
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input class="ui-input" type="text" name="script_editor[slug]" value={@script_editor.slug} /></div>
         </div>
-        <div class="editor-field-row grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select class="ui-input" name="script_editor[kind]"><option value="utility" selected={@script_editor.kind == "utility"}>utility</option><option value="macro" selected={@script_editor.kind == "macro"}>macro</option><option value="transform" selected={@script_editor.kind == "transform"}>transform</option></select></div>
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Entrypoint") %></label><select class="ui-input" name="script_editor[entrypoint]"><%= for entrypoint <- @script_editor.entrypoints do %><option value={entrypoint} selected={entrypoint == @script_editor.entrypoint}><%= entrypoint %></option><% end %></select></div>
+        <div class="editor-field-row ui-field-grid-3 grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select class="ui-input" name="script_editor[kind]"><option value="utility" selected={@script_editor.kind == "utility"}>utility</option><option value="macro" selected={@script_editor.kind == "macro"}>macro</option><option value="transform" selected={@script_editor.kind == "transform"}>transform</option></select></div>
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Entrypoint") %></label><select class="ui-input" name="script_editor[entrypoint]"><%= for entrypoint <- @script_editor.entrypoints do %><option value={entrypoint} selected={entrypoint == @script_editor.entrypoint}><%= entrypoint %></option><% end %></select></div>
           <div class="editor-field scripts-enabled-field flex flex-col justify-end gap-1.5"><label><input type="checkbox" name="script_editor[enabled]" checked={@script_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
         </div>
       </div>
     </div>
     <div class="editor-body scripts-editor flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div class="editor-toolbar scripts-toolbar flex items-center gap-3"><div class="editor-toolbar-left flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
+      <div class="editor-toolbar scripts-toolbar ui-toolbar flex items-center gap-3"><div class="editor-toolbar-left ui-toolbar-group flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
       <div
         id={"script-editor-monaco-shell-#{@script_editor.id}"}
         class="scripts-monaco monaco-editor-shell min-h-0 flex-1 overflow-hidden"
diff --git a/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex b/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
index 090dbf9..35b117a 100644
--- a/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
+++ b/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
@@ -1,6 +1,6 @@
 <div
   id="settings-editor-shell"
-  class="settings-view-shell flex h-full min-h-0 flex-col overflow-hidden"
+  class="settings-view-shell ui-editor-shell flex h-full min-h-0 flex-col overflow-hidden"
   data-testid="settings-editor"
   phx-hook="SettingsSectionScroll"
   data-selected-settings-section={@settings_editor.selected_section}
@@ -22,8 +22,8 @@
       <% end %>
 
       <%= if @settings_editor.project_visible? do %>
-        <div class="setting-section" id="settings-section-project">
-          <div class="setting-section-header">
+        <div class="setting-section ui-section-card" id="settings-section-project">
+          <div class="setting-section-header ui-field-stack">
             <h3><%= dgettext("ui", "Project") %></h3>
             <p class="setting-section-description"><%= dgettext("ui", "Blog identity, URLs, authoring defaults, and bookmarklet setup") %></p>
           </div>
@@ -102,8 +102,8 @@
       <% end %>
 
       <%= if @settings_editor.editor_visible? do %>
-        <div class="setting-section" id="settings-section-editor">
-          <div class="setting-section-header">
+        <div class="setting-section ui-section-card" id="settings-section-editor">
+          <div class="setting-section-header ui-field-stack">
             <h3><%= dgettext("ui", "Editor") %></h3>
             <p class="setting-section-description"><%= dgettext("ui", "Default editing mode and diff presentation") %></p>
           </div>
@@ -141,8 +141,8 @@
       <% end %>
 
       <%= if @settings_editor.content_visible? do %>
-        <div class="setting-section" id="settings-section-content">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "Content Categories") %></h3><p class="setting-section-description"><%= dgettext("ui", "Category defaults, rendering flags, and template wiring") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-content">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "Content Categories") %></h3><p class="setting-section-description"><%= dgettext("ui", "Category defaults, rendering flags, and template wiring") %></p></div>
           <div class="setting-section-content">
             <table class="categories-table">
               <thead>
@@ -209,8 +209,8 @@
       <% end %>
 
       <%= if @settings_editor.ai_visible? do %>
-        <div class="setting-section" id="settings-section-ai">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "AI") %></h3><p class="setting-section-description"><%= dgettext("ui", "OpenAI-compatible endpoints, model routing, airplane mode, and system prompt") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-ai">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "AI") %></h3><p class="setting-section-description"><%= dgettext("ui", "OpenAI-compatible endpoints, model routing, airplane mode, and system prompt") %></p></div>
           <form class="setting-section-content" phx-change="change_settings_ai" phx-target={@myself}>
             <div class="setting-row">
               <div class="setting-info"><label class="setting-label"><%= dgettext("ui", "Online Endpoint URL") %></label></div>
@@ -310,8 +310,8 @@
       <% end %>
 
       <%= if @settings_editor.technology_visible? do %>
-        <div class="setting-section" id="settings-section-technology">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "Technology") %></h3><p class="setting-section-description"><%= dgettext("ui", "Application-level runtime behavior and semantic indexing") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-technology">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "Technology") %></h3><p class="setting-section-description"><%= dgettext("ui", "Application-level runtime behavior and semantic indexing") %></p></div>
           <form class="setting-section-content" phx-change="change_settings_project" phx-target={@myself}>
             <div class="setting-row">
               <div class="setting-info"><label class="setting-label"><%= dgettext("ui", "Semantic Similarity") %></label></div>
@@ -327,8 +327,8 @@
       <% end %>
 
       <%= if @settings_editor.publishing_visible? do %>
-        <div class="setting-section" id="settings-section-publishing">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "Publishing") %></h3><p class="setting-section-description"><%= dgettext("ui", "Deployment credentials for upload tasks") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-publishing">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "Publishing") %></h3><p class="setting-section-description"><%= dgettext("ui", "Deployment credentials for upload tasks") %></p></div>
           <form class="setting-section-content" phx-change="change_settings_publishing" phx-target={@myself}>
             <div class="setting-row"><div class="setting-info"><label class="setting-label"><%= dgettext("ui", "SSH Mode") %></label></div><div class="setting-control"><select class="ui-input" name="settings_publishing[ssh_mode]"><option value="scp" selected={@settings_editor.publishing["ssh_mode"] == "scp"}>scp</option><option value="rsync" selected={@settings_editor.publishing["ssh_mode"] == "rsync"}>rsync</option></select></div></div>
             <div class="setting-row"><div class="setting-info"><label class="setting-label"><%= dgettext("ui", "Host") %></label></div><div class="setting-control"><input class="ui-input" type="text" name="settings_publishing[ssh_host]" value={@settings_editor.publishing["ssh_host"]} /></div></div>
@@ -340,8 +340,8 @@
       <% end %>
 
       <%= if @settings_editor.mcp_visible? do %>
-        <div class="setting-section" id="settings-section-mcp">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "MCP") %></h3><p class="setting-section-description"><%= dgettext("ui", "Agent configuration files for the built-in bDS MCP server") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-mcp">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "MCP") %></h3><p class="setting-section-description"><%= dgettext("ui", "Agent configuration files for the built-in bDS MCP server") %></p></div>
           <div class="setting-section-content">
             <%= for agent <- @settings_editor.mcp do %>
               <div class="setting-row">
@@ -361,8 +361,8 @@
       <% end %>
 
       <%= if @settings_editor.data_visible? do %>
-        <div class="setting-section" id="settings-section-data">
-          <div class="setting-section-header"><h3><%= dgettext("ui", "Data Maintenance") %></h3><p class="setting-section-description"><%= dgettext("ui", "Rebuild filesystem-backed records and thumbnails") %></p></div>
+        <div class="setting-section ui-section-card" id="settings-section-data">
+          <div class="setting-section-header ui-field-stack"><h3><%= dgettext("ui", "Data Maintenance") %></h3><p class="setting-section-description"><%= dgettext("ui", "Rebuild filesystem-backed records and thumbnails") %></p></div>
           <div class="setting-actions">
             <button class="secondary ui-button ui-button-secondary" type="button" phx-click="settings_shell_command" phx-value-action="rebuild_posts_from_files"><%= dgettext("ui", "Rebuild Posts From Files") %></button>
             <button class="secondary ui-button ui-button-secondary" type="button" phx-click="settings_shell_command" phx-value-action="rebuild_media_from_files"><%= dgettext("ui", "Rebuild Media From Files") %></button>
diff --git a/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex b/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
index 431ccf8..dd8ed9b 100644
--- a/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
+++ b/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
@@ -1,7 +1,7 @@
-<div class="templates-view-shell editor flex h-full min-h-0 flex-col" data-testid="template-editor">
-  <div class="editor-header templates-header flex shrink-0 items-start justify-between gap-3">
-    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab ui-tab ui-tab-active active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @template_editor.title %></span></div></div>
-    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
+<div class="templates-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="template-editor">
+  <div class="editor-header templates-header ui-editor-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab ui-tab ui-tab-active ui-editor-tab-current active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @template_editor.title %></span></div></div>
+    <div class="editor-actions ui-editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={[
         "status-badge",
         "ui-badge",
@@ -15,21 +15,21 @@
       <button class="secondary danger ui-button ui-button-secondary ui-button-danger" type="button" phx-click="delete_template_editor" phx-target={@myself}><%= dgettext("ui", "Delete") %></button>
     </div>
   </div>
-  <form class="editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden" phx-change="change_template_editor" phx-target={@myself}>
+  <form class="editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4" phx-change="change_template_editor" phx-target={@myself}>
     <div class="editor-header-row templates-meta-row grid gap-4">
       <div class="editor-meta flex min-w-0 flex-col gap-4">
-        <div class="editor-field-row grid gap-4 md:grid-cols-2">
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input class="ui-input" type="text" name="template_editor[title]" value={@template_editor.title} /></div>
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input class="ui-input" type="text" name="template_editor[slug]" value={@template_editor.slug} /></div>
+        <div class="editor-field-row ui-field-grid-2 grid gap-4 md:grid-cols-2">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input class="ui-input" type="text" name="template_editor[title]" value={@template_editor.title} /></div>
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input class="ui-input" type="text" name="template_editor[slug]" value={@template_editor.slug} /></div>
         </div>
-        <div class="editor-field-row grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
-          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select class="ui-input" name="template_editor[kind]"><option value="post" selected={@template_editor.kind == :post or @template_editor.kind == "post"}>post</option><option value="list" selected={@template_editor.kind == :list or @template_editor.kind == "list"}>list</option><option value="not-found" selected={@template_editor.kind == :"not-found" or @template_editor.kind == "not-found"}>not-found</option><option value="partial" selected={@template_editor.kind == :partial or @template_editor.kind == "partial"}>partial</option></select></div>
+        <div class="editor-field-row ui-field-grid-3 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
+          <div class="editor-field ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select class="ui-input" name="template_editor[kind]"><option value="post" selected={@template_editor.kind == :post or @template_editor.kind == "post"}>post</option><option value="list" selected={@template_editor.kind == :list or @template_editor.kind == "list"}>list</option><option value="not-found" selected={@template_editor.kind == :"not-found" or @template_editor.kind == "not-found"}>not-found</option><option value="partial" selected={@template_editor.kind == :partial or @template_editor.kind == "partial"}>partial</option></select></div>
           <div class="editor-field templates-enabled-field flex flex-col justify-end gap-1.5"><label><input type="checkbox" name="template_editor[enabled]" checked={@template_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
         </div>
       </div>
     </div>
     <div class="editor-body templates-editor flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div class="editor-toolbar templates-toolbar flex items-center gap-3"><div class="editor-toolbar-left flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
+      <div class="editor-toolbar templates-toolbar ui-toolbar flex items-center gap-3"><div class="editor-toolbar-left ui-toolbar-group flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
       <div
         id={"template-editor-monaco-shell-#{@template_editor.id}"}
         class="templates-monaco monaco-editor-shell min-h-0 flex-1 overflow-hidden"
diff --git a/test/bds/desktop/shell_live_test.exs b/test/bds/desktop/shell_live_test.exs
index 21677c9..6bdab07 100644
--- a/test/bds/desktop/shell_live_test.exs
+++ b/test/bds/desktop/shell_live_test.exs
@@ -292,27 +292,27 @@ defmodule BDS.Desktop.ShellLiveTest do
     settings_html = render_component(&BDS.Desktop.ShellLive.SettingsEditor.render/1, phase3_settings_editor_assigns())
     tags_html = render_component(&BDS.Desktop.ShellLive.TagsEditor.render/1, phase3_tags_editor_assigns())
 
-    assert post_html =~ "post-editor editor flex h-full min-h-0 flex-col"
-    assert post_html =~ "editor-header flex shrink-0 items-start justify-between gap-3"
-    assert post_html =~ "editor-field flex flex-col gap-1.5"
-    assert post_html =~ "editor-toolbar flex items-center gap-3"
+    assert post_html =~ "post-editor editor ui-editor-shell flex h-full min-h-0 flex-col"
+    assert post_html =~ "editor-header ui-editor-header flex shrink-0 items-start justify-between gap-3"
+    assert post_html =~ "editor-field ui-field-stack flex flex-col gap-1.5"
+    assert post_html =~ "editor-toolbar ui-toolbar flex items-center gap-3"
 
-    assert media_html =~ "media-editor editor flex h-full min-h-0 flex-col"
-    assert media_html =~ "editor-content media-editor grid min-h-0 flex-1 gap-4"
+    assert media_html =~ "media-editor editor ui-editor-shell flex h-full min-h-0 flex-col"
+    assert media_html =~ "editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto p-4"
 
-    assert script_html =~ "scripts-view-shell editor flex h-full min-h-0 flex-col"
-    assert script_html =~ "editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden"
+    assert script_html =~ "scripts-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col"
+    assert script_html =~ "editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4"
 
-    assert template_html =~ "templates-view-shell editor flex h-full min-h-0 flex-col"
-    assert template_html =~ "editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden"
+    assert template_html =~ "templates-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col"
+    assert template_html =~ "editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4"
 
-    assert chat_html =~ "chat-panel flex h-full min-h-0 flex-col"
+    assert chat_html =~ "chat-panel ui-editor-shell flex h-full min-h-0 flex-col"
     assert chat_html =~ "chat-panel-header flex shrink-0 items-center justify-between gap-3"
 
-    assert menu_html =~ "menu-editor-view flex h-full min-h-0 flex-col"
-    assert menu_html =~ "menu-editor-toolbar flex flex-wrap items-center gap-2"
+    assert menu_html =~ "menu-editor-view ui-editor-shell flex h-full min-h-0 flex-col p-4"
+    assert menu_html =~ "menu-editor-toolbar ui-toolbar flex flex-wrap items-center gap-2"
 
-    assert settings_html =~ "settings-view-shell flex h-full min-h-0 flex-col overflow-hidden"
+    assert settings_html =~ "settings-view-shell ui-editor-shell flex h-full min-h-0 flex-col overflow-hidden"
     assert settings_html =~ "settings-header flex shrink-0 items-center justify-between gap-3"
 
     assert tags_html =~ "tags-view-shell flex h-full min-h-0 flex-col overflow-hidden"
@@ -377,6 +377,34 @@ defmodule BDS.Desktop.ShellLiveTest do
     assert panel_html =~ ~s(class="panel-entry ui-panel-entry panel-empty-state ui-empty-state)
   end
 
+  @tag :phase5
+  test "phase 5 desktop-specific surfaces keep shell, media, menu, and chat contracts" do
+    conn = Plug.Conn.put_private(build_conn(), :phoenix_endpoint, BDS.Desktop.Endpoint)
+    {:ok, _view, shell_html} = live_isolated(conn, BDS.Desktop.ShellLive)
+
+    media_html = render_component(&BDS.Desktop.ShellLive.MediaEditor.render/1, phase3_media_editor_assigns())
+    chat_html = render_component(&BDS.Desktop.ShellLive.ChatEditor.render/1, phase3_chat_editor_assigns())
+    menu_html = render_component(&BDS.Desktop.ShellLive.MenuEditor.render/1, phase3_menu_editor_assigns())
+
+    assert shell_html =~ ~s(class="assistant-sidebar-context flex shrink-0 flex-col gap-2")
+    assert shell_html =~ ~s(class="assistant-sidebar-prompt min-h-[8rem] w-full resize-y")
+    assert shell_html =~ ~s(class="assistant-sidebar-start-button ui-button ui-button-primary")
+    assert shell_html =~ ~s(class="assistant-sidebar-welcome min-h-0 flex-1 overflow-auto")
+
+    assert media_html =~ "class=\"editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]\""
+    assert media_html =~ "class=\"media-preview flex min-h-[16rem] items-center justify-center\""
+    assert media_html =~ ~s(class="media-details min-w-0")
+
+    assert chat_html =~ ~s(class="chat-panel ui-editor-shell flex h-full min-h-0 flex-col")
+    assert chat_html =~ ~s(class="chat-model-selector-button chat-model-selector-inline ui-button ui-button-secondary inline-flex items-center gap-2")
+    assert chat_html =~ ~s(class="chat-input-container ui-field-stack flex shrink-0 flex-col gap-3")
+    assert chat_html =~ ~s(class="chat-input-wrapper flex items-end gap-2")
+
+    assert menu_html =~ ~s(class="menu-editor-view ui-editor-shell flex h-full min-h-0 flex-col p-4")
+    assert menu_html =~ ~s(class="menu-editor-toolbar ui-toolbar flex flex-wrap items-center gap-2")
+    assert menu_html =~ ~s(class="menu-editor-empty flex min-h-0 flex-1 items-center justify-center")
+  end
+
   alias BDS.Persistence
   alias BDS.AI
   alias BDS.CliSync.Watcher
@@ -3195,7 +3223,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "published"
       })
 
-    assert published_script_html =~ ~s(class="scripts-view-shell editor flex h-full min-h-0 flex-col")
+    assert published_script_html =~ ~s(class="scripts-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col")
     assert published_script_html =~ ~s(data-testid="script-editor")
     assert published_script_html =~ ~s(data-testid="script-status-badge")
     assert published_script_html =~ ~s(class="status-badge ui-badge status-published")
@@ -3216,7 +3244,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "published"
       })
 
-    assert published_template_html =~ ~s(class="templates-view-shell editor flex h-full min-h-0 flex-col")
+    assert published_template_html =~ ~s(class="templates-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col")
     assert published_template_html =~ ~s(data-testid="template-editor")
     assert published_template_html =~ ~s(data-testid="template-status-badge")
     assert published_template_html =~ ~s(class="status-badge ui-badge status-published")
@@ -3410,7 +3438,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       })
 
     assert html =~
-         "class=\"editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]\""
+         "class=\"editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]\""
     assert html =~ ~s(class="quick-actions-wrapper relative")
     refute html =~ ~s(class="media-editor-form")
 
@@ -3523,8 +3551,8 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "Project settings"
       })
 
-    assert settings_html =~ ~s(class="settings-view-shell flex h-full min-h-0 flex-col overflow-hidden")
-    assert settings_html =~ ~s(class="setting-section")
+    assert settings_html =~ ~s(class="settings-view-shell ui-editor-shell flex h-full min-h-0 flex-col overflow-hidden")
+    assert settings_html =~ ~s(class="setting-section ui-section-card")
     refute settings_html =~ "Desktop workbench content routed through the Elixir shell."
 
     tags_html =
@@ -3559,7 +3587,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => script.slug
       })
 
-    assert script_html =~ ~s(class="scripts-view-shell editor flex h-full min-h-0 flex-col")
+    assert script_html =~ ~s(class="scripts-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col")
     assert script_html =~ "scripts-monaco"
     assert script_html =~ ~s(data-monaco-language="lua")
     assert script_html =~ ~s(data-monaco-word-wrap="on")
@@ -3574,7 +3602,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => template.slug
       })
 
-    assert template_html =~ ~s(class="templates-view-shell editor flex h-full min-h-0 flex-col")
+    assert template_html =~ ~s(class="templates-view-shell editor ui-editor-shell flex h-full min-h-0 flex-col")
     assert template_html =~ "templates-monaco"
     assert template_html =~ ~s(data-monaco-language="liquid")
     assert template_html =~ ~s(data-monaco-word-wrap="on")
@@ -3589,8 +3617,8 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => conversation.model || "chat"
       })
 
-    assert chat_html =~ ~s(class="chat-panel flex h-full min-h-0 flex-col")
-    assert chat_html =~ ~s(class="chat-input-container flex shrink-0 flex-col gap-3")
+    assert chat_html =~ ~s(class="chat-panel ui-editor-shell flex h-full min-h-0 flex-col")
+    assert chat_html =~ ~s(class="chat-input-container ui-field-stack flex shrink-0 flex-col gap-3")
     refute chat_html =~ "Desktop workbench content routed through the Elixir shell."
   end
 
@@ -3658,7 +3686,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='chat-model-selector-button']")
       |> render_click()
 
-    assert selector_html =~ ~s(class="chat-model-selector-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col")
+    assert selector_html =~ ~s(class="chat-model-selector-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col")
     assert selector_html =~ ~s(data-testid="chat-model-selector-option")
     assert selector_html =~ "llama-current"
 
diff --git a/test/bds/ui/shell_test.exs b/test/bds/ui/shell_test.exs
index 57c4023..2ec4c55 100644
--- a/test/bds/ui/shell_test.exs
+++ b/test/bds/ui/shell_test.exs
@@ -152,6 +152,138 @@ defmodule BDS.UI.ShellTest do
     assert css =~ ".ui-badge {"
     assert css =~ ".ui-panel-entry {"
     assert css =~ ".ui-empty-state {"
+    assert css =~ ".ui-editor-shell {"
+    assert css =~ ".ui-editor-header {"
+    assert css =~ ".ui-editor-tab-current {"
+    assert css =~ ".ui-editor-actions {"
+    assert css =~ ".ui-toolbar {"
+    assert css =~ ".ui-toolbar-group {"
+    assert css =~ ".ui-field-stack {"
+    assert css =~ ".ui-field-grid-2 {"
+    assert css =~ ".ui-field-grid-3 {"
+    assert css =~ ".ui-dropdown-menu {"
+    assert css =~ ".ui-dropdown-item {"
+    assert css =~ ".ui-section-card {"
+  end
+
+  test "phase 3 templates use shared shell and form primitives for common layout" do
+    post_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex")
+
+    media_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex")
+
+    script_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex")
+
+    template_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex")
+
+    chat_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex")
+
+    menu_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex")
+
+    settings_template =
+      File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex")
+
+    assert post_template =~ "ui-editor-shell"
+    assert post_template =~ "ui-editor-header"
+    assert post_template =~ "ui-editor-tab-current"
+    assert post_template =~ "ui-editor-actions"
+    assert post_template =~ "ui-field-stack"
+    assert post_template =~ "ui-field-grid-2"
+    assert post_template =~ "ui-toolbar"
+    assert post_template =~ "ui-toolbar-group"
+    assert post_template =~ "ui-dropdown-menu"
+    assert post_template =~ "ui-dropdown-item"
+
+    assert media_template =~ "ui-editor-shell"
+    assert media_template =~ "ui-editor-header"
+    assert media_template =~ "ui-editor-tab-current"
+    assert media_template =~ "ui-editor-actions"
+    assert media_template =~ "ui-field-stack"
+    assert media_template =~ "ui-field-grid-2"
+    assert media_template =~ "ui-dropdown-menu"
+    assert media_template =~ "ui-dropdown-item"
+
+    assert script_template =~ "ui-editor-shell"
+    assert script_template =~ "ui-editor-header"
+    assert script_template =~ "ui-editor-tab-current"
+    assert script_template =~ "ui-editor-actions"
+    assert script_template =~ "ui-field-stack"
+
+    assert template_template =~ "ui-editor-shell"
+    assert template_template =~ "ui-editor-header"
+    assert template_template =~ "ui-editor-tab-current"
+    assert template_template =~ "ui-editor-actions"
+    assert template_template =~ "ui-field-stack"
+
+    assert chat_template =~ "ui-editor-shell"
+    assert chat_template =~ "ui-section-card"
+    assert chat_template =~ "ui-dropdown-menu"
+    assert chat_template =~ "ui-dropdown-item"
+    assert chat_template =~ "ui-field-stack"
+
+    assert menu_template =~ "ui-editor-shell"
+    assert menu_template =~ "ui-section-card"
+    assert menu_template =~ "ui-toolbar"
+
+    assert settings_template =~ "ui-editor-shell"
+    assert settings_template =~ "ui-field-stack"
+    assert settings_template =~ "ui-section-card"
+  end
+
+  test "phase 3 trims redundant common-case layout rules from authored css slices" do
+    editor_css = File.read!("/Users/gb/Projects/bDS2/assets/css/editor.css")
+    media_css = File.read!("/Users/gb/Projects/bDS2/assets/css/media_editor.css")
+    assistant_css = File.read!("/Users/gb/Projects/bDS2/assets/css/assistant.css")
+    menu_css = File.read!("/Users/gb/Projects/bDS2/assets/css/menu_editor.css")
+
+    refute editor_css =~ ".post-editor .editor-header,\n.scripts-view-shell.editor .editor-header,\n.templates-view-shell.editor .editor-header {\n  display: flex;"
+    refute editor_css =~ ".post-editor .editor-actions,\n.scripts-view-shell.editor .editor-actions,\n.templates-view-shell.editor .editor-actions {\n  display: flex;"
+    refute editor_css =~ ".post-editor .quick-actions-menu {"
+    refute media_css =~ "[data-testid=\"media-editor\"] .editor-header {"
+    refute media_css =~ "[data-testid=\"media-editor\"] .editor-actions {"
+    refute media_css =~ "[data-testid=\"media-editor\"] .quick-actions-menu {"
+    refute assistant_css =~ ".chat-panel-header {\n  display: flex;"
+    refute assistant_css =~ ".chat-panel .chat-input-wrapper {\n  display: flex;"
+    refute menu_css =~ ".menu-editor-view {\n  padding: 1rem;"
+    refute menu_css =~ ".menu-editor-toolbar {\n  display: flex;"
+  end
+
+  test "phase 5 desktop-specific surfaces stay in source modules with responsive behavior" do
+    css = css_source()
+    app_js = File.read!("/Users/gb/Projects/bDS2/assets/js/app.js")
+
+    assert css =~ ".ai-suggestions-modal-backdrop"
+    assert css =~ ".gallery-overlay"
+    assert css =~ ".lightbox-overlay"
+
+    assert css =~ ".menu-editor-row.is-dragging"
+    assert css =~ ".menu-editor-row.is-drop-before::before"
+    assert css =~ ".menu-editor-row.is-drop-after::after"
+    assert css =~ ".menu-editor-row.is-drop-inside"
+    assert app_js =~ "MenuEditorTree"
+    assert app_js =~ "classList.add(\"is-dragging\")"
+    assert app_js =~ "pushEvent(\"menu_editor_drop_item\""
+
+    assert css =~ ".media-preview {"
+    assert css =~ ".media-preview-image img {"
+    assert css =~ "object-fit: contain;"
+    assert css =~ ".media-details {"
+    assert css =~ "width: 320px;"
+
+    assert css =~ ".assistant-sidebar-context {"
+    assert css =~ ".assistant-sidebar-message {"
+    assert css =~ ".chat-panel .chat-input-container"
+    assert css =~ ".chat-model-selector-menu"
+
+    assert css =~ "@media (max-width: 720px) {\n  .chat-panel-header {\n    align-items: stretch;\n    flex-direction: column;"
+    assert css =~ ".chat-model-selector-wrap {\n    width: 100%;"
+    assert css =~ ".chat-panel .chat-model-selector-button.chat-model-selector-inline {\n    justify-content: space-between;\n    width: 100%;"
+    assert css =~ ".chat-panel .chat-input-container {\n    padding: 8px 12px;"
   end
 
   test "tailwind source keeps theme tokens and shared component primitives" do