cms-block-editor 1.0.14 → 1.0.17

package/dist/index.css

@@ -77,6 +77,13 @@
   transform: none;
   box-shadow: none;
 }
+.cms-toolbar-seo {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+  display: flex;
+  justify-content: flex-end;
+}
 .cms-editor-content {
   min-height: 300px;
   max-height: 600px;
@@ -3521,4 +3528,1172 @@
     grid-template-columns: 1fr;
   }
 }
+.cms-theme-customizer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.cms-theme-customizer-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cms-color-overlay, rgba(0, 0, 0, 0.5));
+  backdrop-filter: blur(4px);
+}
+.cms-theme-customizer-panel {
+  position: relative;
+  background: var(--cms-color-background, #ffffff);
+  width: 500px;
+  max-width: 90vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--cms-shadow-xxl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  animation: slideLeft 0.3s ease-out;
+}
+.cms-theme-customizer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--cms-spacing-lg, 1.5rem);
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-theme-customizer-header h2 {
+  margin: 0;
+  font-size: var(--cms-typography-font-size-xl, 1.25rem);
+  font-weight: var(--cms-typography-font-weight-bold, 600);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-theme-customizer-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-theme-customizer-tabs button {
+  flex: 1;
+  padding: var(--cms-spacing-md, 1rem);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: var(--cms-typography-font-size-sm, 0.875rem);
+  font-weight: var(--cms-typography-font-weight-medium, 500);
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  transition: var(--cms-transition-fast, 150ms);
+}
+.cms-theme-customizer-tabs button:hover {
+  color: var(--cms-color-text-primary, #1f2937);
+  background: var(--cms-color-surface-hover, #f3f4f6);
+}
+.cms-theme-customizer-tabs button.active {
+  color: var(--cms-color-primary, #667eea);
+  border-bottom-color: var(--cms-color-primary, #667eea);
+  background: var(--cms-color-background, #ffffff);
+}
+.cms-theme-customizer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-customizer-section h3 {
+  margin: var(--cms-spacing-lg, 1.5rem) 0 var(--cms-spacing-md, 1rem) 0;
+  font-size: var(--cms-typography-font-size-md, 1rem);
+  font-weight: var(--cms-typography-font-weight-semibold, 600);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-customizer-section h3:first-child {
+  margin-top: 0;
+}
+.cms-color-grid,
+.cms-input-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--cms-spacing-md, 1rem);
+  margin-bottom: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-color-input,
+.cms-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cms-spacing-xs, 0.25rem);
+}
+.cms-color-input label,
+.cms-text-input label {
+  font-size: var(--cms-typography-font-size-xs, 0.75rem);
+  font-weight: var(--cms-typography-font-weight-medium, 500);
+  color: var(--cms-color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: var(--cms-typography-letter-spacing-wide, 0.025em);
+}
+.cms-color-input-wrapper {
+  display: flex;
+  gap: var(--cms-spacing-sm, 0.5rem);
+}
+.cms-color-input input[type=color] {
+  width: 48px;
+  height: 40px;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: var(--cms-radius-md, 0.5rem);
+  cursor: pointer;
+}
+.cms-color-input input[type=text],
+.cms-text-input input[type=text] {
+  flex: 1;
+  padding: var(--cms-spacing-sm, 0.5rem) var(--cms-spacing-md, 1rem);
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: var(--cms-radius-md, 0.5rem);
+  font-size: var(--cms-typography-font-size-sm, 0.875rem);
+  color: var(--cms-color-text-primary, #1f2937);
+  font-family: var(--cms-typography-font-family-mono, monospace);
+  transition: var(--cms-transition-fast, 150ms);
+}
+.cms-color-input input[type=text]:focus,
+.cms-text-input input[type=text]:focus {
+  outline: none;
+  border-color: var(--cms-color-focus, #667eea);
+  box-shadow: var(--cms-shadow-outline, 0 0 0 3px rgba(102, 126, 234, 0.5));
+}
+.cms-import-export {
+  display: flex;
+  gap: var(--cms-spacing-md, 1rem);
+  margin-bottom: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-theme-preview-box {
+  margin-top: var(--cms-spacing-md, 1rem);
+}
+.cms-theme-customizer-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--cms-spacing-lg, 1.5rem);
+  border-top: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-theme-customizer-footer > div {
+  display: flex;
+  gap: var(--cms-spacing-md, 1rem);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes scaleUp {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scaleDown {
+  from {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+@media (max-width: 768px) {
+  .cms-theme-customizer-panel {
+    width: 100vw;
+  }
+  .cms-color-grid,
+  .cms-input-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* src/styles/themeCustomizer.css */
+.cms-theme-customizer-advanced {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.cms-theme-customizer-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  animation: fadeIn 0.3s ease-out;
+}
+.cms-theme-customizer-panel-advanced {
+  position: relative;
+  background: var(--cms-color-background, #ffffff);
+  width: 600px;
+  max-width: 95vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
+  animation: slideLeft 0.3s ease-out;
+  z-index: 1;
+}
+.cms-theme-customizer-header-advanced {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.cms-header-left h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-theme-name-badge {
+  padding: 0.25rem 0.75rem;
+  background: var(--cms-color-primary-light, #e0e7ff);
+  color: var(--cms-color-primary, #667eea);
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-header-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cms-icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cms-color-surface, #f3f4f6);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-icon-btn:hover:not(:disabled) {
+  background: var(--cms-color-primary, #667eea);
+  color: white;
+  border-color: var(--cms-color-primary, #667eea);
+  transform: translateY(-1px);
+}
+.cms-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.cms-close-btn-advanced {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: 8px;
+}
+.cms-close-btn-advanced:hover {
+  background: var(--cms-color-error-light, #fee2e2);
+  color: var(--cms-color-error, #ef4444);
+}
+.cms-search-bar {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-search-input:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-search-input::placeholder {
+  color: var(--cms-color-text-tertiary, #9ca3af);
+}
+.cms-theme-tabs-advanced {
+  display: flex;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.cms-theme-tabs-advanced::-webkit-scrollbar {
+  display: none;
+}
+.cms-tab-btn-advanced {
+  flex: 1;
+  min-width: 80px;
+  padding: 1rem 0.75rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-tab-btn-advanced:hover {
+  background: var(--cms-color-surface-hover, #f3f4f6);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-tab-btn-advanced.active {
+  color: var(--cms-color-primary, #667eea);
+  border-bottom-color: var(--cms-color-primary, #667eea);
+  background: var(--cms-color-background, #ffffff);
+}
+.cms-tab-icon {
+  font-size: 1.25rem;
+}
+.cms-tab-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-theme-content-advanced {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.cms-brand-generator {
+  background:
+    linear-gradient(
+      135deg,
+      var(--cms-color-primary-light, #e0e7ff) 0%,
+      var(--cms-color-secondary-light, #f3e8ff) 100%);
+  padding: 1.5rem;
+  border-radius: 12px;
+  margin-bottom: 2rem;
+}
+.cms-brand-generator h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-brand-input-group {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+.cms-brand-color-picker {
+  width: 60px;
+  height: 48px;
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.cms-brand-color-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  background: white;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+.cms-color-group {
+  margin-bottom: 2rem;
+}
+.cms-color-group h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-color-grid-advanced {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+.cms-advanced-color-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-advanced-color-input label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-color-input-wrapper-advanced {
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cms-color-swatch {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+.cms-color-swatch:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.cms-color-text-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-color-text-input:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-color-picker-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  animation: scaleUp 0.2s ease-out;
+}
+.cms-color-picker-native {
+  width: 200px;
+  height: 150px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.cms-color-presets {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+.cms-color-preset {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 2px solid transparent;
+}
+.cms-color-preset:hover {
+  transform: scale(1.1);
+  border-color: var(--cms-color-primary, #667eea);
+}
+.cms-property-group {
+  margin-bottom: 2rem;
+}
+.cms-property-group h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-property-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+}
+.cms-property-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-property-input label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-property-input-field {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-property-input-field:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-spacing-visual {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-spacing-item {
+  display: grid;
+  grid-template-columns: 60px 1fr 120px;
+  gap: 1rem;
+  align-items: center;
+}
+.cms-spacing-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-spacing-bar {
+  height: 32px;
+  background: var(--cms-color-primary, #667eea);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+.cms-spacing-input {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-family: monospace;
+}
+.cms-radius-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+}
+.cms-radius-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-radius-preview {
+  width: 100%;
+  height: 60px;
+  background: var(--cms-color-primary, #667eea);
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-shadow-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+.cms-shadow-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-shadow-preview {
+  width: 100%;
+  height: 60px;
+  background: white;
+  border-radius: 8px;
+}
+.cms-gradient-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+.cms-gradient-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-gradient-preview {
+  width: 100%;
+  height: 80px;
+  border-radius: 8px;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-validation {
+  padding: 1rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+.cms-validation.valid {
+  background: var(--cms-color-success-light, #d1fae5);
+  color: var(--cms-color-success-dark, #065f46);
+}
+.cms-validation.invalid {
+  background: var(--cms-color-error-light, #fee2e2);
+  color: var(--cms-color-error-dark, #991b1b);
+}
+.cms-validation-success {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+.cms-validation-errors ul {
+  margin: 0.5rem 0 0 0;
+  padding-left: 1.5rem;
+}
+.cms-preview-tab {
+  padding: 2rem;
+  min-height: 100%;
+}
+.cms-preview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+.cms-preview-colors {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+.cms-preview-color-box {
+  padding: 2rem;
+  border-radius: 12px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.cms-preview-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-preview-typography {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-theme-footer-advanced {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-footer-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.cms-select {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .cms-theme-customizer-panel-advanced {
+    width: 100vw;
+  }
+  .cms-color-grid-advanced,
+  .cms-property-grid {
+    grid-template-columns: 1fr;
+  }
+  .cms-brand-input-group {
+    flex-direction: column;
+  }
+  .cms-brand-color-picker {
+    width: 100%;
+  }
+}
+
+/* src/styles/seo.css */
+.cms-seo-trigger {
+  padding: 0.5rem 1rem;
+  background: var(--cms-color-primary, #667eea);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-seo-trigger:hover {
+  background: var(--cms-color-primary-hover, #5568d3);
+  transform: translateY(-1px);
+}
+.cms-seo-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cms-seo-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+.cms-seo-content {
+  position: relative;
+  background: var(--cms-color-background, #ffffff);
+  width: 700px;
+  max-width: 95vw;
+  max-height: 90vh;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+}
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.cms-seo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-seo-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-seo-close {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+.cms-seo-close:hover {
+  background: var(--cms-color-error-light, #fee2e2);
+  color: var(--cms-color-error, #ef4444);
+}
+.cms-seo-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-seo-tabs button {
+  flex: 1;
+  padding: 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-seo-tabs button:hover {
+  background: var(--cms-color-surface-hover, #f3f4f6);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-seo-tabs button.active {
+  color: var(--cms-color-primary, #667eea);
+  border-bottom-color: var(--cms-color-primary, #667eea);
+  background: var(--cms-color-background, #ffffff);
+}
+.cms-seo-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.cms-seo-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-seo-tab h3 {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-seo-tab h3:first-child {
+  margin-top: 0;
+}
+.cms-seo-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-seo-field label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cms-color-text-primary, #1f2937);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cms-char-count {
+  font-size: 0.75rem;
+  color: var(--cms-color-text-tertiary, #9ca3af);
+  font-weight: 400;
+}
+.cms-seo-field input,
+.cms-seo-field textarea,
+.cms-seo-field select {
+  padding: 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  font-family: inherit;
+  transition: all 0.2s;
+}
+.cms-seo-field input:focus,
+.cms-seo-field textarea:focus,
+.cms-seo-field select:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-seo-field textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+.cms-seo-field-with-action {
+  display: flex;
+  gap: 0.5rem;
+}
+.cms-seo-field-with-action input {
+  flex: 1;
+}
+.cms-btn-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cms-color-surface, #f3f4f6);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-btn-icon:hover {
+  background: var(--cms-color-primary, #667eea);
+  border-color: var(--cms-color-primary, #667eea);
+  transform: scale(1.05);
+}
+.cms-seo-validation-errors {
+  padding: 1rem;
+  background: var(--cms-color-error-light, #fee2e2);
+  border: 1px solid var(--cms-color-error, #ef4444);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-error-dark, #991b1b);
+}
+.cms-seo-validation-errors ul {
+  margin: 0.5rem 0 0 0;
+  padding-left: 1.5rem;
+}
+.cms-seo-info {
+  padding: 1rem;
+  background: var(--cms-color-info-light, #dbeafe);
+  border: 1px solid var(--cms-color-info, #3b82f6);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-info-dark, #1e40af);
+}
+.cms-seo-analysis-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-seo-score {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  border: 3px solid;
+  border-radius: 12px;
+  margin-bottom: 1rem;
+}
+.cms-seo-score-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+}
+.cms-seo-score-label {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-seo-issues,
+.cms-seo-suggestions {
+  margin-bottom: 1.5rem;
+}
+.cms-seo-issues h3,
+.cms-seo-suggestions h3,
+.cms-seo-metrics h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-seo-issue,
+.cms-seo-suggestion {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+}
+.cms-seo-issue-error {
+  background: var(--cms-color-error-light, #fee2e2);
+  border-left: 3px solid var(--cms-color-error, #ef4444);
+}
+.cms-seo-issue-warning {
+  background: var(--cms-color-warning-light, #fef3c7);
+  border-left: 3px solid var(--cms-color-warning, #f59e0b);
+}
+.cms-seo-issue-icon,
+.cms-seo-suggestion-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+.cms-seo-issue-message,
+.cms-seo-suggestion-message {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cms-color-text-primary, #1f2937);
+  margin-bottom: 0.25rem;
+}
+.cms-seo-issue-meta,
+.cms-seo-suggestion-meta {
+  font-size: 0.75rem;
+  color: var(--cms-color-text-tertiary, #9ca3af);
+  text-transform: capitalize;
+}
+.cms-seo-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+.cms-seo-metric {
+  padding: 1rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  text-align: center;
+}
+.cms-seo-metric-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--cms-color-primary, #667eea);
+  margin-bottom: 0.25rem;
+}
+.cms-seo-metric-label {
+  font-size: 0.75rem;
+  color: var(--cms-color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-seo-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-btn-secondary,
+.cms-btn-primary {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-btn-secondary {
+  background: var(--cms-color-surface, #f3f4f6);
+  color: var(--cms-color-text-primary, #1f2937);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-btn-secondary:hover {
+  background: var(--cms-color-surface-hover, #e5e7eb);
+}
+.cms-btn-primary {
+  background: var(--cms-color-primary, #667eea);
+  color: white;
+}
+.cms-btn-primary:hover {
+  background: var(--cms-color-primary-hover, #5568d3);
+  transform: translateY(-1px);
+}
+@media (max-width: 768px) {
+  .cms-seo-content {
+    width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+  .cms-seo-metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .cms-seo-tabs button {
+    font-size: 0.75rem;
+    padding: 0.75rem 0.5rem;
+  }
+}
 /*# sourceMappingURL=index.css.map */