export.html

<style>
	:root {
	  --spacing: 0.8rem;
	}
  
	* {
	  box-sizing: border-box;
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	}
  
	body {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text);
	  margin: 0;
	  padding: var(--spacing);
	  min-height: 400px;
	  min-width: 400px;
	  position: relative;
	  overflow: hidden;
	}
  
	html,
	body {
	  height: 100%;
	}
  
	main {
	  display: flex;
	  flex-direction: column;
	  gap: var(--spacing);
	  height: 100%;
	  overflow: hidden;
	  min-height: 0;
	}
  
	button {
	  appearance: none;
	  border-radius: 4px;
	  padding: var(--spacing);
	}
  
	textarea {
	  background-color: var(--figma-color-bg-secondary);
	  border: 2px solid var(--figma-color-border);
	  color: var(--figma-color-text-secondary);
	  min-height: 150px;
	  max-height: 300px;
	  font-family: Andale Mono, monospace;
	  font-size: 0.9rem;
	  overflow: auto;
	  padding: var(--spacing);
	  white-space: pre;
	  resize: vertical;
	  flex: 1;
	}
	textarea:focus {
	  border-color: var(--figma-color-border-selected);
	  outline: none;
	}
  
	textarea {
	  display: block;
	  width: 100%;
	}
  
	button {
	  background-color: var(--figma-color-bg-brand);
	  border: none;
	  color: var(--figma-color-text-onbrand);
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	  font-weight: bold;
	  cursor: pointer;
	}
  
	#export {
	  background-color: var(--figma-color-bg-component);
	}

	.button-row {
	  display: flex;
	  gap: var(--spacing);
	  flex-shrink: 0;
	}

	.info-text {
	  font-size: 0.9rem;
	  margin-bottom: var(--spacing);
	  color: var(--figma-color-text-secondary);
	  flex-shrink: 0;
	}

	#download {
	  background-color: var(--figma-color-bg-success);
	  display: none;
	}

	.features {
	  font-size: 0.8rem;
	  margin-top: 0.5rem;
	  color: var(--figma-color-text-secondary);
	}

	.features strong {
	  color: var(--figma-color-text);
	}

	.file-container {
	  border: 1px solid var(--figma-color-border);
	  border-radius: 4px;
	  margin-bottom: var(--spacing);
	  overflow: hidden;
	  flex-shrink: 0;
	  display: flex;
	  flex-direction: column;
	}

	.file-container:last-child {
	  margin-bottom: 0;
	}

	.file-header {
	  background-color: var(--figma-color-bg);
	  border-bottom: 1px solid var(--figma-color-border);
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: calc(var(--spacing) / 2) var(--spacing);
	  flex-shrink: 0;
	}

	.file-name {
	  font-weight: bold;
	  font-size: 0.9rem;
	}

	.file-actions {
	  display: flex;
	  gap: calc(var(--spacing) / 2);
	}

	.copy-button {
	  background-color: var(--figma-color-bg-disabled);
	  color: var(--figma-color-text);
	  font-size: 0.8rem;
	  padding: calc(var(--spacing) / 2);
	}

	.copy-button:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.copy-success {
	  background-color: var(--figma-color-bg-success);
	  color: var(--figma-color-text-onbrand);
	}

	#files-container {
	  display: flex;
	  flex-direction: column;
	  gap: var(--spacing);
	  flex: 1;
	  overflow-y: auto;
	  min-height: 0;
	}

	.empty-state {
	  color: var(--figma-color-text-disabled);
	  text-align: center;
	  padding: var(--spacing);
	  font-style: italic;
	  flex-shrink: 0;
	}
	
	.options {
	  display: flex;
	  flex-direction: column;
	  gap: calc(var(--spacing) / 2);
	  margin-bottom: var(--spacing);
	  background-color: var(--figma-color-bg-secondary);
	  padding: var(--spacing);
	  border-radius: 4px;
	  flex-shrink: 0;
	}
	
	.option-row {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	}
	
	.option-row label {
	  font-size: 0.9rem;
	  cursor: pointer;
	}
	
	.option-row input[type="checkbox"] {
	  cursor: pointer;
	}

	.file-upload {
	  margin-top: var(--spacing);
	  padding-top: var(--spacing);
	  border-top: 1px solid var(--figma-color-border);
	}

	.file-upload-label {
	  display: block;
	  font-size: 0.9rem;
	  margin-bottom: calc(var(--spacing) / 2);
	  color: var(--figma-color-text);
	}

	.file-upload-info {
	  font-size: 0.8rem;
	  color: var(--figma-color-text-secondary);
	  margin-top: calc(var(--spacing) / 2);
	}

	.file-upload-row {
	  display: flex;
	  gap: var(--spacing);
	  align-items: center;
	}

	.file-upload-button {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text);
	  padding: calc(var(--spacing) / 2);
	  font-size: 0.9rem;
	  border: 1px solid var(--figma-color-border);
	  border-radius: 4px;
	  cursor: pointer;
	}

	.file-upload-button:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.file-upload-name {
	  font-size: 0.9rem;
	  color: var(--figma-color-text-secondary);
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

	.file-upload-clear {
	  background: none;
	  border: none;
	  color: var(--figma-color-text-secondary);
	  padding: 0;
	  cursor: pointer;
	  font-size: 0.8rem;
	}

	.file-upload-clear:hover {
	  color: var(--figma-color-text);
	  text-decoration: underline;
	}

	/* Resize handle styles */
	.resize-handle {
	  position: absolute;
	  bottom: 0;
	  right: 0;
	  width: 20px;
	  height: 20px;
	  cursor: nwse-resize;
	  z-index: 100;
	  opacity: 0.7;
	  transition: opacity 0.2s ease;
	}

	.resize-handle:hover {
	  opacity: 1;
	}

	.resize-handle:before,
	.resize-handle:after {
	  content: "";
	  position: absolute;
	  bottom: 3px;
	  right: 3px;
	  background-color: var(--figma-color-border);
	}

	.resize-handle:before {
	  width: 2px;
	  height: 12px;
	  bottom: 3px;
	  right: 8px;
	  transform: rotate(45deg);
	}

	.resize-handle:after {
	  width: 12px;
	  height: 2px;
	  bottom: 8px;
	  right: 3px;
	  transform: rotate(45deg);
	}

	.resize-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 99;
	  display: none;
	  cursor: nwse-resize;
	}

	/* Modal styles */
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  z-index: 1000;
	  display: none;
	  align-items: center;
	  justify-content: center;
	}

	.modal {
	  background-color: var(--figma-color-bg);
	  border-radius: 8px;
	  width: 90%;
	  max-width: 600px;
	  max-height: 80%;
	  display: flex;
	  flex-direction: column;
	  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	}

	.modal-header {
	  padding: var(--spacing);
	  border-bottom: 1px solid var(--figma-color-border);
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.modal-title {
	  font-weight: bold;
	  font-size: 1.1rem;
	  margin: 0;
	}

	.modal-close {
	  background: none;
	  border: none;
	  font-size: 1.2rem;
	  cursor: pointer;
	  color: var(--figma-color-text-secondary);
	  padding: 0;
	  width: 24px;
	  height: 24px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.modal-close:hover {
	  color: var(--figma-color-text);
	}

	.modal-body {
	  padding: var(--spacing);
	  overflow-y: auto;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  min-height: 0;
	}

	.modal-footer {
	  padding: var(--spacing);
	  border-top: 1px solid var(--figma-color-border);
	  display: flex;
	  gap: var(--spacing);
	  justify-content: flex-end;
	}

	/* Step navigation styles */
	.step-navigation {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  margin-bottom: var(--spacing);
	  padding: calc(var(--spacing) / 2);
	  background-color: var(--figma-color-bg-secondary);
	  border-radius: 4px;
	  flex-shrink: 0;
	}

	.step-indicator {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 4);
	  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	  border-radius: 4px;
	  font-size: 0.8rem;
	  font-weight: 500;
	  cursor: pointer;
	  transition: all 0.2s;
	  position: relative;
	}

	.step-indicator span:first-child {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  font-size: 0.7rem;
	  font-weight: bold;
	}

	.step-indicator.active {
	  background-color: var(--figma-color-bg-brand);
	  color: var(--figma-color-text-onbrand);
	}

	.step-indicator.active span:first-child {
	  background-color: var(--figma-color-text-onbrand);
	  color: var(--figma-color-bg-brand);
	}

	.step-indicator.completed {
	  background-color: var(--figma-color-bg-success);
	  color: var(--figma-color-text-onbrand);
	}

	.step-indicator.completed span:first-child {
	  background-color: var(--figma-color-text-onbrand);
	  color: var(--figma-color-bg-success);
	}

	.step-indicator:not(.active):not(.completed) {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text-secondary);
	}

	.step-indicator:not(.active):not(.completed) span:first-child {
	  background-color: var(--figma-color-bg-secondary);
	  color: var(--figma-color-text-secondary);
	}

	.step-indicator:hover:not(.active) {
	  background-color: var(--figma-color-bg-hover);
	  color: var(--figma-color-text);
	}

	.step-indicator:hover:not(.active) span:first-child {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text);
	}

	.step-content {
	  display: none;
	  flex: 1;
	  overflow: hidden;
	  min-height: 0;
	}

	.step-content.active {
	  display: flex;
	  flex-direction: column;
	  min-height: 0;
	}

	.step-body {
	  flex: 1;
	  overflow-y: auto;
	  min-height: 0;
	  display: flex;
	  flex-direction: column;
	  padding-right: calc(var(--spacing) / 2);
	}

	.step-actions {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding-top: var(--spacing);
	  border-top: 1px solid var(--figma-color-border);
	  flex-shrink: 0;
	  background-color: var(--figma-color-bg);
	  margin-top: var(--spacing);
	}

	.step-button {
	  padding: calc(var(--spacing) / 2) var(--spacing);
	  border-radius: 4px;
	  font-weight: 500;
	  cursor: pointer;
	  border: none;
	  transition: all 0.2s;
	}

	.step-button.primary {
	  background-color: var(--figma-color-bg-brand);
	  color: var(--figma-color-text-onbrand);
	}

	.step-button.primary:hover {
	  background-color: var(--figma-color-bg-brand-hover);
	}

	.step-button.secondary {
	  background-color: var(--figma-color-bg-secondary);
	  color: var(--figma-color-text);
	}

	.step-button.secondary:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.step-button:disabled {
	  background-color: var(--figma-color-bg-disabled);
	  color: var(--figma-color-text-disabled);
	  cursor: not-allowed;
	}

	.step-summary {
	  background-color: var(--figma-color-bg-secondary);
	  padding: calc(var(--spacing) / 2);
	  border-radius: 4px;
	  margin-bottom: var(--spacing);
	  font-size: 0.9rem;
	  color: var(--figma-color-text-secondary);
	  flex-shrink: 0;
	}

	.collection-summary {
	  display: flex;
	  flex-wrap: wrap;
	  gap: calc(var(--spacing) / 4);
	  margin-top: calc(var(--spacing) / 2);
	}

	.collection-tag {
	  background-color: var(--figma-color-bg);
	  color: var(--figma-color-text);
	  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	  border-radius: 12px;
	  font-size: 0.8rem;
	  border: 1px solid var(--figma-color-border);
	}

	#color-collections-container {
	  flex: 1;
	  overflow-y: auto;
	  min-height: 0;
	}

	.color-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	  gap: var(--spacing);
	  margin-bottom: var(--spacing);
	}

	.color-collection {
	  margin-bottom: calc(var(--spacing) * 1.5);
	  flex-shrink: 0;
	}

	.color-collection:last-child {
	  margin-bottom: 0;
	}

	.collection-header {
	  font-weight: bold;
	  margin-bottom: calc(var(--spacing) / 2);
	  color: var(--figma-color-text);
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	}

	.collection-toggle {
	  font-size: 0.8rem;
	  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	  background-color: var(--figma-color-bg-secondary);
	  border: 1px solid var(--figma-color-border);
	  border-radius: 4px;
	  cursor: pointer;
	}

	.collection-toggle:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.color-item {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  padding: calc(var(--spacing) / 2);
	  border: 1px solid var(--figma-color-border);
	  border-radius: 4px;
	  cursor: pointer;
	  transition: background-color 0.2s;
	}

	.color-item:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.color-item.selected {
	  background-color: var(--figma-color-bg-selected);
	  border-color: var(--figma-color-border-selected);
	}

	.color-preview {
	  width: 24px;
	  height: 24px;
	  border-radius: 4px;
	  border: 1px solid var(--figma-color-border);
	  flex-shrink: 0;
	}

	.color-info {
	  flex: 1;
	  min-width: 0;
	}

	.color-name {
	  font-weight: 500;
	  font-size: 0.9rem;
	  margin-bottom: 2px;
	}

	.color-slug {
	  font-size: 0.8rem;
	  color: var(--figma-color-text-secondary);
	  font-family: monospace;
	}

	.color-checkbox {
	  flex-shrink: 0;
	}

	.rem-collections {
	  background-color: var(--figma-color-bg-secondary);
	  border-radius: 4px;
	  padding: calc(var(--spacing) / 2);
	  border-left: 3px solid var(--figma-color-border-selected);
	}

	.rem-collections .option-row {
	  margin-bottom: calc(var(--spacing) / 4);
	}

	.rem-collections .option-row:last-child {
	  margin-bottom: 0;
	}

	.customize-button {
	  background-color: var(--figma-color-bg-secondary);
	  color: var(--figma-color-text);
	  font-size: 0.8rem;
	  padding: calc(var(--spacing) / 2);
	  margin-left: calc(var(--spacing) / 2);
	}

	.customize-button:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.selection-summary {
	  background-color: var(--figma-color-bg-secondary);
	  padding: calc(var(--spacing) / 2);
	  border-radius: 4px;
	  margin-bottom: var(--spacing);
	  font-size: 0.9rem;
	  color: var(--figma-color-text-secondary);
	  flex-shrink: 0;
	}

	.collections-section {
	  background-color: var(--figma-color-bg-secondary);
	  padding: var(--spacing);
	  border-radius: 4px;
	  margin-bottom: var(--spacing);
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  min-height: 0;
	}

	.collections-label {
	  display: block;
	  font-size: 0.9rem;
	  font-weight: bold;
	  margin-bottom: calc(var(--spacing) / 2);
	  color: var(--figma-color-text);
	  flex-shrink: 0;
	}

	.collections-container {
	  flex: 1;
	  overflow-y: auto;
	  margin-bottom: calc(var(--spacing) / 2);
	  min-height: 0;
	}

  .collections-group {
    margin-bottom: var(--spacing);
  }

  .collections-group:last-child {
    margin-bottom: 0;
  }

  .collections-group-title {
    font-weight: 600;
    color: var(--figma-color-text);
    margin: 0 0 calc(var(--spacing) / 2) 0;
    font-size: 0.95rem;
  }

	.loading-collections {
	  color: var(--figma-color-text-secondary);
	  font-style: italic;
	  text-align: center;
	  padding: var(--spacing);
	  flex-shrink: 0;
	}

	.collection-item {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  padding: calc(var(--spacing) / 2);
	  border: 1px solid var(--figma-color-border);
	  border-radius: 4px;
	  margin-bottom: calc(var(--spacing) / 2);
	  cursor: pointer;
	  transition: background-color 0.2s;
	  flex-shrink: 0;
	}

	.collection-item:last-child {
	  margin-bottom: 0;
	}

	.collection-item:hover {
	  background-color: var(--figma-color-bg-hover);
	}

	.collection-item.selected {
	  background-color: var(--figma-color-bg-selected);
	  border-color: var(--figma-color-border-selected);
	}

	.collection-info {
	  flex: 1;
	  min-width: 0;
	}

	.collection-name {
	  font-weight: 500;
	  font-size: 0.9rem;
	  margin-bottom: 2px;
	}

	.collection-details {
	  font-size: 0.8rem;
	  color: var(--figma-color-text-secondary);
	}

	.collection-checkbox {
	  flex-shrink: 0;
	}

	.collections-actions {
	  display: flex;
	  gap: calc(var(--spacing) / 2);
	  flex-shrink: 0;
	}

	.wordpress-settings {
	  border-left: 3px solid var(--figma-color-bg-brand);
	}

	.wordpress-settings-badge {
	  background-color: var(--figma-color-bg-brand);
	  color: var(--figma-color-text-onbrand);
	  padding: 2px 6px;
	  border-radius: 10px;
	  font-size: 0.7rem;
	  font-weight: bold;
	  margin-left: calc(var(--spacing) / 2);
	}

	.wordpress-settings-color {
	  border-left: 3px solid var(--figma-color-bg-brand);
	}

	.wordpress-settings-color .color-slug {
	  color: var(--figma-color-text-secondary);
	}

	/* Extended Settings Styles */
	.extended-settings {
	  background-color: var(--figma-color-bg);
	  padding: calc(var(--spacing) / 2);
	  border-radius: 4px;
	  margin-top: calc(var(--spacing) / 2);
	  border: 1px solid var(--figma-color-border);
	}

	.extended-settings-title {
	  font-weight: 600;
	  margin-bottom: calc(var(--spacing) / 2);
	  color: var(--figma-color-text);
	  font-size: 0.85rem;
	}

	.extended-settings-grid {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: calc(var(--spacing) / 4);
	}

	.extended-settings-grid .option-row {
	  font-size: 0.85rem;
	}

	/* Block Detection Styles */
	.blocks-section {
	  background-color: var(--figma-color-bg);
	  padding: calc(var(--spacing) / 2);
	  border-radius: 4px;
	  margin-top: calc(var(--spacing) / 2);
	  border: 1px solid var(--figma-color-border);
	}

	.blocks-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  cursor: pointer;
	}

	.blocks-title {
	  font-weight: 600;
	  color: var(--figma-color-text);
	  font-size: 0.85rem;
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	}

	.blocks-count {
	  background-color: var(--figma-color-bg-secondary);
	  padding: 2px 8px;
	  border-radius: 10px;
	  font-size: 0.7rem;
	  font-weight: normal;
	}

	.blocks-toggle-icon {
	  transition: transform 0.2s;
	  font-size: 0.8rem;
	}

	.blocks-toggle-icon.collapsed {
	  transform: rotate(-90deg);
	}

	.blocks-list {
	  margin-top: calc(var(--spacing) / 2);
	  display: flex;
	  flex-direction: column;
	  gap: calc(var(--spacing) / 4);
	  max-height: 150px;
	  overflow-y: auto;
	}

	.blocks-list.collapsed {
	  display: none;
	}

	.block-item {
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	  background-color: var(--figma-color-bg-secondary);
	  border-radius: 4px;
	  font-size: 0.8rem;
	}

	.block-name {
	  font-family: monospace;
	  flex: 1;
	}

	.badge-core {
	  background-color: #0073aa;
	  color: white;
	  padding: 2px 6px;
	  border-radius: 10px;
	  font-size: 0.65rem;
	  font-weight: bold;
	}

	.badge-custom {
	  background-color: #8e44ad;
	  color: white;
	  padding: 2px 6px;
	  border-radius: 10px;
	  font-size: 0.65rem;
	  font-weight: bold;
	}

	.blocks-empty {
	  color: var(--figma-color-text-secondary);
	  font-style: italic;
	  font-size: 0.8rem;
	  padding: calc(var(--spacing) / 4);
	}

	/* Validation Errors Styles */
	.validation-errors {
	  background-color: #f8d7da;
	  border: 1px solid #f5c2c7;
	  border-radius: 4px;
	  padding: calc(var(--spacing) / 2);
	  margin-bottom: var(--spacing);
	  display: none;
	}

	.validation-errors.visible {
	  display: block;
	}

	.validation-errors-title {
	  font-weight: 600;
	  color: #842029;
	  margin-bottom: calc(var(--spacing) / 4);
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  font-size: 0.85rem;
	}

	.validation-errors-list {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  max-height: 100px;
	  overflow-y: auto;
	}

	.validation-errors-list li {
	  font-size: 0.8rem;
	  color: #842029;
	  padding: calc(var(--spacing) / 4) 0;
	  border-bottom: 1px solid rgba(132, 32, 41, 0.2);
	}

	.validation-errors-list li:last-child {
	  border-bottom: none;
	}

	/* Validation Warnings Styles */
	.validation-warnings {
	  background-color: #fff3cd;
	  border: 1px solid #ffc107;
	  border-radius: 4px;
	  padding: calc(var(--spacing) / 2);
	  margin-bottom: var(--spacing);
	  display: none;
	}

	.validation-warnings.visible {
	  display: block;
	}

	.validation-warnings-title {
	  font-weight: 600;
	  color: #856404;
	  margin-bottom: calc(var(--spacing) / 4);
	  display: flex;
	  align-items: center;
	  gap: calc(var(--spacing) / 2);
	  font-size: 0.85rem;
	}

	.validation-warnings-list {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  max-height: 100px;
	  overflow-y: auto;
	}

	.validation-warnings-list li {
	  font-size: 0.8rem;
	  color: #856404;
	  padding: calc(var(--spacing) / 4) 0;
	  border-bottom: 1px solid rgba(133, 100, 4, 0.2);
	}

	.validation-warnings-list li:last-child {
	  border-bottom: none;
	}
  </style>
    <main>
	<!-- Step Navigation -->
	<div class="step-navigation">
		<div class="step-indicator active" data-step="1">
			<span>1</span>
			<span>Collections</span>
		</div>
		<div class="step-indicator" data-step="2">
			<span>2</span>
			<span>Configure</span>
		</div>
		<div class="step-indicator" data-step="3">
			<span>3</span>
			<span>Export</span>
		</div>
	</div>

	<!-- Step 1: Collection Selection -->
	<div class="step-content active" id="step-1">
		<div class="step-body">
			<div class="info-text">
				Select which collections you want to include in your WordPress theme export.
				<br><br>
				<strong>WordPress Settings Collections:</strong> Collections named "wordpress.settings.*" will be included in the WordPress color palette for the block editor.
			</div>

			<div class="collections-section">
				<label class="collections-label">Select Collections to Export</label>
				<div class="collections-container" id="collections-container">
					<div class="loading-collections">Loading collections...</div>
				</div>
				<div class="collections-actions">
					<button type="button" class="copy-button" id="select-all-collections">Select All</button>
					<button type="button" class="copy-button" id="select-none-collections">Select None</button>
				</div>
			</div>
		</div>

		<div class="step-actions">
			<div></div>
			<button type="button" class="step-button primary" id="next-to-step-2" disabled>Next: Configure Export</button>
		</div>
	</div>

	<!-- Step 2: Configuration -->
	<div class="step-content" id="step-2">
		<div class="step-body">
			<div class="step-summary" id="step-2-summary">
				<strong>Selected Collections:</strong>
				<div class="collection-summary" id="selected-collections-summary">
					Loading...
				</div>
			</div>

			<div class="info-text">
				Configure what you want to export from your selected collections.
			</div>

			<div class="options">
            <!-- Color options group -->
            <div class="options-group" id="color-options">
                <h4 class="collections-group-title">Color options</h4>
                <!-- Elements color export mode -->
                <div class="option-row">
                    <label for="elements-color-mode" style="margin-right: 8px;">Elements color export:</label>
                    <select id="elements-color-mode">
                        <option value="value">Use color values</option>
                        <option value="preset" selected>Use palette preset references</option>
                    </select>
                </div>
                <div class="option-row" id="color-presets-row">
                    <input type="checkbox" id="generate-color-presets" />
                    <label for="generate-color-presets">Generate color presets from color variables</label>
                    <button type="button" class="customize-button" id="customize-colors" disabled>Customize</button>
                </div>
                <div class="info-text" id="color-presets-note" style="font-size: 0.8rem; margin-top: calc(var(--spacing) / 4); display: none;">
                    <i>Using <code>wp.settings.colors</code> collection. Color presets will be derived from that collection.</i>
                </div>
                <div class="info-text" style="font-size: 0.8rem; margin-top: calc(var(--spacing) / 4);">
                    <i>Color customization will only show colors from your selected collections.</i>
                </div>
            </div>

            <!-- Spacing & units group -->
            <div class="options-group" id="spacing-units-options">
                <h4 class="collections-group-title">Spacing & units</h4>
                <div class="option-row">
                    <input type="checkbox" id="generate-spacing-presets" />
                    <label for="generate-spacing-presets">Generate spacing presets from spacing variables</label>
                </div>
                <div class="option-row">
                    <input type="checkbox" id="use-rem" />
                    <label for="use-rem">Use rem units instead of px</label>
                </div>
                <div class="rem-collections" id="rem-collections" style="display: none; margin-left: 20px; margin-top: 8px;">
                    <div class="option-row">
                        <input type="checkbox" id="rem-font" />
                        <label for="rem-font">Apply to Font/Typography variables</label>
                    </div>
                    <div class="option-row">
                        <input type="checkbox" id="rem-primitives" />
                        <label for="rem-primitives">Apply to Primitives collection</label>
                    </div>
                    <div class="option-row">
                        <input type="checkbox" id="rem-spacing" />
                        <label for="rem-spacing">Apply to Spacing variables</label>
                    </div>
                </div>
            </div>

            <!-- Typography group -->
            <div class="options-group" id="typography-options">
                <h4 class="collections-group-title">Typography</h4>
                <div class="option-row">
                    <input type="checkbox" id="generate-typography" />
                    <label for="generate-typography">Generate typography presets from text styles </label>
                </div>
            </div>

            <!-- Extended Settings group -->
            <div class="options-group" id="extended-settings-options">
                <h4 class="collections-group-title">Extended Settings</h4>
                <div class="info-text" style="font-size: 0.8rem; margin-bottom: calc(var(--spacing) / 2);">
                    <i>Enable additional WordPress theme.json settings sections. Collections named <code>wp.settings.{section}</code> will be processed.</i>
                </div>
                <div class="extended-settings">
                    <div class="extended-settings-grid">
                        <div class="option-row">
                            <input type="checkbox" id="enable-background-settings" checked />
                            <label for="enable-background-settings">Background</label>
                        </div>
                        <div class="option-row">
                            <input type="checkbox" id="enable-border-settings" checked />
                            <label for="enable-border-settings">Border</label>
                        </div>
                        <div class="option-row">
                            <input type="checkbox" id="enable-dimensions-settings" checked />
                            <label for="enable-dimensions-settings">Dimensions</label>
                        </div>
                        <div class="option-row">
                            <input type="checkbox" id="enable-position-settings" checked />
                            <label for="enable-position-settings">Position</label>
                        </div>
                    </div>
                </div>

                <!-- Detected Blocks Section -->
                <div class="blocks-section" id="blocks-section">
                    <div class="blocks-header" id="blocks-header">
                        <div class="blocks-title">
                            Detected Blocks
                            <span class="blocks-count" id="blocks-count">0</span>
                        </div>
                        <span class="blocks-toggle-icon" id="blocks-toggle-icon">▼</span>
                    </div>
                    <div class="blocks-list" id="blocks-list">
                        <div class="blocks-empty">No block collections detected. Create collections named <code>wp.blocks.{namespace/block}</code> to style specific blocks.</div>
                    </div>
                </div>
            </div>

            <div class="file-upload">
				<label class="file-upload-label">Base theme.json</label>
				<div class="file-upload-row">
					<input type="file" id="base-theme" accept=".json" style="display: none;" />
					<button type="button" class="file-upload-button" id="upload-button">Choose File</button>
					<div class="file-upload-name" id="file-name">No file chosen</div>
					<button type="button" class="file-upload-clear" id="clear-file" style="display: none;">Clear</button>
				</div>
				<div class="file-upload-info">
					Upload an existing theme.json file to merge the exported variables into it.
				</div>
			</div>
		</div>
		</div>

		<div class="step-actions">
			<button type="button" class="step-button secondary" id="back-to-step-1">Back</button>
			<button type="button" class="step-button primary" id="next-to-step-3">Next: Export</button>
		</div>
	</div>

	<!-- Step 3: Export -->
	<div class="step-content" id="step-3">
		<div class="step-body">
			<div class="step-summary" id="step-3-summary">
				<strong>Export Summary:</strong>
				<div id="export-summary">
					Loading...
				</div>
			</div>

			<!-- Validation Errors -->
			<div class="validation-errors" id="validation-errors">
				<div class="validation-errors-title">
					Validation Errors
				</div>
				<ul class="validation-errors-list" id="validation-errors-list">
				</ul>
			</div>

			<!-- Validation Warnings -->
			<div class="validation-warnings" id="validation-warnings">
				<div class="validation-warnings-title">
					⚠ Validation Warnings
				</div>
				<ul class="validation-warnings-list" id="validation-warnings-list">
				</ul>
			</div>

			<div class="info-text">
				Review your export configuration and generate your WordPress theme files.
			</div>

			<div class="button-row">
				<button id="export" type="button">Export Variables</button>
				<button id="validate-export" type="button" class="secondary" style="display:none;">Validate Schema</button>
				<button id="download" type="button">Download theme.json</button>
			</div>
			<div id="files-container">
				<div class="empty-state">
					Click "Export Variables" to generate WordPress theme files from your Figma variables.
				</div>
			</div>
		</div>

		<div class="step-actions">
			<button type="button" class="step-button secondary" id="back-to-step-2">Back</button>
		</div>
	</div>
  </main>
  <div class="resize-handle" id="resize-handle"></div>
  <div class="resize-overlay" id="resize-overlay"></div>
  
  <!-- Color Customization Modal -->
  <div class="modal-overlay" id="color-modal-overlay">
	<div class="modal">
	  <div class="modal-header">
		<h3 class="modal-title">Customize Color Presets (Selected Collections)</h3>
		<button class="modal-close" id="close-color-modal">&times;</button>
	  </div>
	  <div class="modal-body">
		<div class="selection-summary" id="selection-summary">
		  Loading colors...
		</div>
		<div id="color-collections-container">
		  <!-- Color collections will be populated here -->
		</div>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="copy-button" id="select-all-colors">Select All</button>
		<button type="button" class="copy-button" id="select-none-colors">Select None</button>
		<button type="button" id="apply-color-selection">Apply Selection</button>
	  </div>
	</div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  <script>
	let currentFiles = [];
	let baseTheme = null;
	let allColorPresets = [];
	let selectedColorIds = [];
	let allCollections = [];
	let selectedCollectionIds = [];
	let currentStep = 1;
	let detectedBlocks = [];
	let validationWarnings = [];

	// Setup resize functionality
	const resizeHandle = document.getElementById('resize-handle');
	const resizeOverlay = document.getElementById('resize-overlay');
	let isResizing = false;
	let initialWidth, initialHeight, initialX, initialY;

	resizeHandle.addEventListener('mousedown', initResize);

	function initResize(e) {
	  e.preventDefault();
	  
	  // Record initial dimensions and mouse position
	  initialWidth = window.innerWidth;
	  initialHeight = window.innerHeight;
	  initialX = e.clientX;
	  initialY = e.clientY;
	  
	  // Show overlay to capture mouse movements
	  resizeOverlay.style.display = 'block';
	  isResizing = true;
	  
	  // Add event listeners for mouse movement and release
	  window.addEventListener('mousemove', resizeWindow);
	  window.addEventListener('mouseup', stopResize);
	}

	function resizeWindow(e) {
	  if (!isResizing) return;
	  
	  // Calculate new dimensions
	  const newWidth = initialWidth + (e.clientX - initialX);
	  const newHeight = initialHeight + (e.clientY - initialY);
	  
	  // Apply minimum dimensions
	  const width = Math.max(300, newWidth);
	  const height = Math.max(300, newHeight);
	  
	  // Send resize message to plugin
	  parent.postMessage({ 
		pluginMessage: { 
		  type: "RESIZE",
		  width: width,
		  height: height
		} 
	  }, "*");
	}

	function stopResize() {
	  isResizing = false;
	  resizeOverlay.style.display = 'none';
	  window.removeEventListener('mousemove', resizeWindow);
	  window.removeEventListener('mouseup', stopResize);
	}

	window.onmessage = ({ data: { pluginMessage } }) => {
	  if (pluginMessage.type === "COLLECTIONS_RESULT") {
		if (pluginMessage.error) {
		  console.error("Error getting collections:", pluginMessage.error);
		  return;
		}

		allCollections = pluginMessage.collections || [];
		populateCollections();
		// Also request blocks detection
		parent.postMessage({
			pluginMessage: { type: "GET_BLOCKS" }
		}, "*");
	  } else if (pluginMessage.type === "BLOCKS_RESULT") {
		if (pluginMessage.error) {
		  console.error("Error getting blocks:", pluginMessage.error);
		  return;
		}

		detectedBlocks = pluginMessage.blocks || [];
		populateBlocksSection();
	  } else if (pluginMessage.type === "COLOR_PRESETS_RESULT") {
		if (pluginMessage.error) {
		  console.error("Error getting color presets:", pluginMessage.error);
		  return;
		}
		
		allColorPresets = pluginMessage.colorPresets || [];
		populateColorModal();
	  } else if (pluginMessage.type === "EXPORT_RESULT") {
		if (pluginMessage.error) {
		  // Display error message
		  const filesContainer = document.getElementById('files-container');
		  filesContainer.innerHTML = `<div class="empty-state error">${pluginMessage.error}</div>`;
		  return;
		}

		currentFiles = pluginMessage.files;

		// Handle validation errors and warnings if present
		const validationErrors = pluginMessage.errors || [];
		validationWarnings = pluginMessage.warnings || [];
		displayValidationErrors(validationErrors);
		displayValidationWarnings(validationWarnings);

		// Show validate button now that we have export data
		document.getElementById("validate-export").style.display = "inline-block";

		// Clear the files container
		const filesContainer = document.getElementById('files-container');
		filesContainer.innerHTML = '';

		// Add each file to the container
		currentFiles.forEach((file, index) => {
		  const { fileName, body } = file;
		  const fileContent = JSON.stringify(body, null, 2);

		  // Create file container
		  const fileContainer = document.createElement('div');
		  fileContainer.className = 'file-container';

		  // Create file header with name and actions
		  const fileHeader = document.createElement('div');
		  fileHeader.className = 'file-header';

		  const fileName2 = document.createElement('div');
		  fileName2.className = 'file-name';
		  fileName2.textContent = fileName;

		  const fileActions = document.createElement('div');
		  fileActions.className = 'file-actions';

		  const copyButton = document.createElement('button');
		  copyButton.className = 'copy-button';
		  copyButton.textContent = 'Copy';
		  copyButton.onclick = () => copyToClipboard(index);

		  fileActions.appendChild(copyButton);
		  fileHeader.appendChild(fileName2);
		  fileHeader.appendChild(fileActions);

		  // Create textarea for the file content
		  const textarea = document.createElement('textarea');
		  textarea.readOnly = true;
		  textarea.id = `file-content-${index}`;
		  textarea.value = fileContent;

		  // Assemble the file container
		  fileContainer.appendChild(fileHeader);
		  fileContainer.appendChild(textarea);

		  // Add to files container
		  filesContainer.appendChild(fileContainer);
		});

		// Show download button if we have files
		if (currentFiles.length > 0) {
		  document.getElementById("download").style.display = "block";
		  // Update button text to indicate it's a zip download if multiple files
		  const downloadBtn = document.getElementById("download");
		  downloadBtn.textContent = currentFiles.length > 1
			? `Download Theme Files (${currentFiles.length} files)`
			: "Download theme.json";
		}
	  } else if (pluginMessage.type === "VALIDATE_EXPORT_RESULT") {
		if (pluginMessage.error) {
		  displayValidationErrors([pluginMessage.error]);
		  return;
		}

		const validation = pluginMessage.validation;
		displayValidationErrors(validation.errors || []);
		displayValidationWarnings(validation.warnings || []);
	  }
	};

	function copyToClipboard(fileIndex) {
	  const textarea = document.getElementById(`file-content-${fileIndex}`);
	  textarea.select();
	  document.execCommand('copy');
	  
	  // Show success state
	  const copyButton = textarea.previousElementSibling.querySelector('.copy-button');
	  const originalText = copyButton.textContent;
	  copyButton.textContent = 'Copied!';
	  copyButton.classList.add('copy-success');
	  
	  // Reset button after a delay
	  setTimeout(() => {
		copyButton.textContent = originalText;
		copyButton.classList.remove('copy-success');
	  }, 2000);
	}

	// Setup file upload functionality
	const fileInput = document.getElementById('base-theme');
	const uploadButton = document.getElementById('upload-button');
	const fileName = document.getElementById('file-name');
	const clearFile = document.getElementById('clear-file');

	uploadButton.addEventListener('click', () => {
		fileInput.click();
	});

	fileInput.addEventListener('change', async (event) => {
		const file = event.target.files[0];
		if (!file) return;

		try {
			const content = await file.text();
			baseTheme = JSON.parse(content);
			
			fileName.textContent = file.name;
			clearFile.style.display = 'block';
		} catch (error) {
			console.error('Error reading file:', error);
			fileName.textContent = 'Error reading file';
			baseTheme = null;
		}
	});

	clearFile.addEventListener('click', () => {
		fileInput.value = '';
		fileName.textContent = 'No file chosen';
		clearFile.style.display = 'none';
		baseTheme = null;
	});

	document.getElementById("export").addEventListener("click", () => {
	  // Get the state of the checkboxes
      const generateTypography = document.getElementById("generate-typography").checked;
      const generateColorPresetsCheckbox = document.getElementById("generate-color-presets");
      const generateColorPresets = generateColorPresetsCheckbox.checked;

	  const generateSpacingPresets = document.getElementById("generate-spacing-presets").checked;
	  const useRem = document.getElementById("use-rem").checked;
	  const elementsColorModeSelect = document.getElementById("elements-color-mode");
	  const elementsColorExportMode = elementsColorModeSelect ? elementsColorModeSelect.value : "value";

      // Determine if wp.settings.colors is selected
      const wpSettingsColorsSelected = allCollections
        .filter(c => /^wp\.settings\.colors?/i.test(c.name))
        .some(c => selectedCollectionIds.includes(c.id));

      // Auto-enable color presets generation if wp.settings.colors is selected
      // or if elements are referencing palette presets
      const shouldGenerateColorPresets = generateColorPresets || wpSettingsColorsSelected || elementsColorExportMode === 'preset';

      // If presets are auto-enabled due to wp.settings.colors or preset references,
      // but the selection UI is hidden, pass undefined to export all relevant colors
      const colorPresetsRow = document.getElementById('color-presets-row');
      const selectedColorsForExport = shouldGenerateColorPresets
        ? (colorPresetsRow && colorPresetsRow.style.display === 'none' ? undefined : (selectedColorIds.length ? selectedColorIds : undefined))
        : undefined;
	  
	  // Get rem collection options if rem is enabled
	  const remCollections = useRem ? {
		font: document.getElementById("rem-font").checked,
		primitives: document.getElementById("rem-primitives").checked,
		spacing: document.getElementById("rem-spacing").checked
	  } : undefined;

	  // Get extended settings options
	  const enableBackgroundSettings = document.getElementById("enable-background-settings").checked;
	  const enableBorderSettings = document.getElementById("enable-border-settings").checked;
	  const enableDimensionsSettings = document.getElementById("enable-dimensions-settings").checked;
	  const enablePositionSettings = document.getElementById("enable-position-settings").checked;

	  // Pass the options to the plugin
	  parent.postMessage({
		pluginMessage: {
		  type: "EXPORT",
		  options: {
			generateTypography,
      generateColorPresets: shouldGenerateColorPresets,
			generateSpacingPresets,
			baseTheme,
            selectedColors: selectedColorsForExport,
			selectedCollections: selectedCollectionIds.length > 0 ? selectedCollectionIds : undefined,
			useRem,
			remCollections,
			elementsColorExportMode,
			enableBackgroundSettings,
			enableBorderSettings,
			enableDimensionsSettings,
			enablePositionSettings
		  }
		}
	  }, "*");
	});

	document.getElementById("download").addEventListener("click", () => {
	  if (currentFiles.length === 0) return;
	  
	  // If there's only one file, download it directly
	  if (currentFiles.length === 1) {
		downloadFile(
		  currentFiles[0].fileName, 
		  JSON.stringify(currentFiles[0].body, null, 2)
		);
	  } else {
		// If multiple files, create a zip file
		createAndDownloadZip(currentFiles);
	  }
	});

	function downloadFile(filename, content) {
	  const blob = new Blob([content], { type: "application/json" });
	  const url = URL.createObjectURL(blob);
	  const link = document.createElement("a");
	  link.href = url;
	  link.download = filename;
	  document.body.appendChild(link);
	  link.click();
	  document.body.removeChild(link);
	  URL.revokeObjectURL(url);
	}

	function createAndDownloadZip(files) {
	  const zip = new JSZip();

	  // Add all files to the zip with proper directory structure
	  files.forEach(file => {
		const { fileName, body } = file;

		// Handle directory paths in the filename
		if (fileName.includes('/')) {
		  const folderPath = fileName.substring(0, fileName.lastIndexOf('/'));
		  const folderObj = zip.folder(folderPath);
		  const baseName = fileName.substring(fileName.lastIndexOf('/') + 1);
		  folderObj.file(baseName, JSON.stringify(body, null, 2));
		} else {
		  // Regular file at root level
		  zip.file(fileName, JSON.stringify(body, null, 2));
		}
	  });

	  // Generate the zip file and trigger download
	  zip.generateAsync({ type: "blob" }).then(function(content) {
		saveAs(content, "wordpress-theme-files.zip");
	  });
	}

	// Blocks section functionality
	function populateBlocksSection() {
	  const blocksList = document.getElementById('blocks-list');
	  const blocksCount = document.getElementById('blocks-count');

	  blocksCount.textContent = detectedBlocks.length;

	  if (detectedBlocks.length === 0) {
		blocksList.innerHTML = '<div class="blocks-empty">No block collections detected. Create collections named <code>wp.blocks.{namespace/block}</code> to style specific blocks.</div>';
		return;
	  }

	  blocksList.innerHTML = '';

	  detectedBlocks.forEach(block => {
		const blockItem = document.createElement('div');
		blockItem.className = 'block-item';

		const blockName = document.createElement('span');
		blockName.className = 'block-name';
		blockName.textContent = block.blockName;

		const badge = document.createElement('span');
		badge.className = block.badge.cssClass;
		badge.textContent = block.badge.label;

		blockItem.appendChild(blockName);
		blockItem.appendChild(badge);
		blocksList.appendChild(blockItem);
	  });
	}

	// Toggle blocks section
	document.getElementById('blocks-header').addEventListener('click', () => {
	  const blocksList = document.getElementById('blocks-list');
	  const toggleIcon = document.getElementById('blocks-toggle-icon');

	  blocksList.classList.toggle('collapsed');
	  toggleIcon.classList.toggle('collapsed');
	});

	// Validation display functionality
	function displayValidationErrors(errors) {
	  const errorsContainer = document.getElementById('validation-errors');
	  const errorsList = document.getElementById('validation-errors-list');

	  if (!errors || errors.length === 0) {
		errorsContainer.classList.remove('visible');
		errorsList.innerHTML = '';
		return;
	  }

	  errorsContainer.classList.add('visible');
	  const errorsTitle = errorsContainer.querySelector('.validation-errors-title');
	  errorsTitle.textContent = errors.length === 1
		? '1 Validation Error'
		: errors.length + ' Validation Errors';

	  errorsList.innerHTML = '';
	  errors.forEach(error => {
		const li = document.createElement('li');
		li.textContent = error;
		errorsList.appendChild(li);
	  });
	}

	function displayValidationWarnings(warnings) {
	  const warningsContainer = document.getElementById('validation-warnings');
	  const warningsList = document.getElementById('validation-warnings-list');

	  if (!warnings || warnings.length === 0) {
		warningsContainer.classList.remove('visible');
		warningsList.innerHTML = '';
		return;
	  }

	  warningsContainer.classList.add('visible');
	  const warningsTitle = warningsContainer.querySelector('.validation-warnings-title');
	  warningsTitle.textContent = warnings.length === 1
		? '1 Validation Warning'
		: warnings.length + ' Validation Warnings';

	  warningsList.innerHTML = '';
	  warnings.forEach(warning => {
		const li = document.createElement('li');
		li.textContent = warning;
		warningsList.appendChild(li);
	  });
	}

	// Standalone validate button
	document.getElementById('validate-export').addEventListener('click', () => {
	  if (!currentFiles || currentFiles.length === 0) return;

	  // Find the theme.json file
	  const themeFile = currentFiles.find(f => f.fileName === 'theme.json');
	  if (!themeFile) return;

	  parent.postMessage({
		pluginMessage: {
		  type: "VALIDATE_EXPORT",
		  themeJson: themeFile.body
		}
	  }, "*");
	});

	// Color customization functionality
	const colorPresetsCheckbox = document.getElementById("generate-color-presets");
	const customizeButton = document.getElementById("customize-colors");
	const colorModal = document.getElementById("color-modal-overlay");
	const closeModalButton = document.getElementById("close-color-modal");
	const selectAllButton = document.getElementById("select-all-colors");
	const selectNoneButton = document.getElementById("select-none-colors");
	const applySelectionButton = document.getElementById("apply-color-selection");

	// Enable/disable customize button based on checkbox state and collection selection
	function updateColorCustomizeButton() {
		const isColorPresetsEnabled = colorPresetsCheckbox.checked;
		const hasSelectedCollections = selectedCollectionIds.length > 0;
    customizeButton.disabled = !isColorPresetsEnabled || !hasSelectedCollections;

    // If wp.settings.colors is selected, we can hide the explicit toggle and show info
    const wpSettingsColorsSelected = allCollections
      .filter(c => /^wp\.settings\.colors?/i.test(c.name))
      .some(c => selectedCollectionIds.includes(c.id));

    const colorPresetsRow = document.getElementById('color-presets-row');
    const colorPresetsNote = document.getElementById('color-presets-note');
    if (wpSettingsColorsSelected) {
      // Hide the presets toggle and show note
      colorPresetsRow.style.display = 'none';
      colorPresetsNote.style.display = 'block';
      // When hidden, implicitly treat as enabled for export fallback logic
      colorPresetsCheckbox.checked = true;
    } else {
      colorPresetsRow.style.display = 'flex';
      colorPresetsNote.style.display = 'none';
    }
	}

	colorPresetsCheckbox.addEventListener("change", () => {
		updateColorCustomizeButton();
		if (!colorPresetsCheckbox.checked) {
			selectedColorIds = [];
		}
	});

	// Update color customize button when collections change
	function updateCollectionSelection() {
		const collectionItems = document.querySelectorAll(".collection-item");
		collectionItems.forEach(item => {
			const collectionId = item.dataset.collectionId;
			const checkbox = item.querySelector(".collection-checkbox");
			const isSelected = selectedCollectionIds.includes(collectionId);
			
			checkbox.checked = isSelected;
			item.classList.toggle("selected", isSelected);
		});
		updateNextButtonState();
		updateColorCustomizeButton();
	}

	// Handle rem options visibility
	const useRemCheckbox = document.getElementById("use-rem");
	const remCollectionsContainer = document.getElementById("rem-collections");
	
	useRemCheckbox.addEventListener("change", () => {
	  if (useRemCheckbox.checked) {
		remCollectionsContainer.style.display = "block";
		// Enable font and primitives by default, but not spacing
		document.getElementById("rem-font").checked = true;
		document.getElementById("rem-primitives").checked = true;
		document.getElementById("rem-spacing").checked = false;
	  } else {
		remCollectionsContainer.style.display = "none";
	  }
	});

	// Open modal and load color presets
	customizeButton.addEventListener("click", () => {
	  if (selectedCollectionIds.length === 0) {
		alert("Please select at least one collection first before customizing colors.");
		return;
	  }
	  
	  colorModal.style.display = "flex";
	  // Always request fresh color presets with current selected collections
	  parent.postMessage({ 
		pluginMessage: { 
		  type: "GET_COLOR_PRESETS",
		  options: {
			selectedCollectionIds: selectedCollectionIds
		  }
		} 
	  }, "*");
	});

	// Close modal
	closeModalButton.addEventListener("click", closeColorModal);
	colorModal.addEventListener("click", (e) => {
	  if (e.target === colorModal) {
		closeColorModal();
	  }
	});

	function closeColorModal() {
	  colorModal.style.display = "none";
	}

	// Select all colors
	selectAllButton.addEventListener("click", () => {
	  selectedColorIds = allColorPresets.map(preset => preset.id);
	  updateColorSelection();
	  updateSelectionSummary();
	});

	// Select no colors
	selectNoneButton.addEventListener("click", () => {
	  selectedColorIds = [];
	  updateColorSelection();
	  updateSelectionSummary();
	});

	// Apply selection and close modal
	applySelectionButton.addEventListener("click", () => {
	  closeColorModal();
	});

	function populateColorModal() {
	  const container = document.getElementById("color-collections-container");
	  container.innerHTML = "";

	  if (allColorPresets.length === 0) {
		container.innerHTML = '<div class="empty-state">No color variables found in the selected collections. Try selecting different collections or ensure your collections contain color variables.</div>';
		return;
	  }

	  // Group colors by collection
	  const collections = {};
	  allColorPresets.forEach(preset => {
		if (!collections[preset.collectionName]) {
		  collections[preset.collectionName] = [];
		}
		collections[preset.collectionName].push(preset);
	  });

	  // If no colors are selected yet, select all by default
	  if (selectedColorIds.length === 0) {
		selectedColorIds = allColorPresets.map(preset => preset.id);
	  }

	  // Create collection sections
	  Object.keys(collections).sort().forEach(collectionName => {
		const collectionDiv = document.createElement("div");
		collectionDiv.className = "color-collection";

		const headerDiv = document.createElement("div");
		headerDiv.className = "collection-header";
		
		const titleSpan = document.createElement("span");
		titleSpan.textContent = collectionName;
		
		const toggleButton = document.createElement("button");
		toggleButton.className = "collection-toggle";
		toggleButton.textContent = "Toggle All";
		toggleButton.addEventListener("click", () => toggleCollection(collectionName));
		
		headerDiv.appendChild(titleSpan);
		headerDiv.appendChild(toggleButton);

		const colorsDiv = document.createElement("div");
		colorsDiv.className = "color-grid";

		collections[collectionName].forEach(preset => {
		  const colorItem = createColorItem(preset);
		  colorsDiv.appendChild(colorItem);
		});

		collectionDiv.appendChild(headerDiv);
		collectionDiv.appendChild(colorsDiv);
		container.appendChild(collectionDiv);
	  });

	  updateColorSelection();
	  updateSelectionSummary();
	}

	function createColorItem(preset) {
	  const item = document.createElement("div");
	  item.className = "color-item";
	  item.dataset.colorId = preset.id;

	  // Add WordPress settings indicator
	  if (preset.isWordPressSettings) {
		item.classList.add("wordpress-settings-color");
	  }

	  const preview = document.createElement("div");
	  preview.className = "color-preview";
	  if (preset.resolvedColor) {
		preview.style.backgroundColor = preset.resolvedColor;
	  } else {
		preview.style.backgroundColor = "#ccc";
		preview.style.backgroundImage = "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)";
		preview.style.backgroundSize = "8px 8px";
		preview.style.backgroundPosition = "0 0, 0 4px, 4px -4px, -4px 0px";
	  }

	  const info = document.createElement("div");
	  info.className = "color-info";

	  const name = document.createElement("div");
	  name.className = "color-name";
	  name.textContent = preset.name;

	  const slug = document.createElement("div");
	  slug.className = "color-slug";
	  slug.textContent = preset.slug;

	  info.appendChild(name);
	  info.appendChild(slug);

	  const checkbox = document.createElement("input");
	  checkbox.type = "checkbox";
	  checkbox.className = "color-checkbox";
	  checkbox.checked = selectedColorIds.includes(preset.id);
	  checkbox.addEventListener("change", () => {
		if (checkbox.checked) {
		  if (!selectedColorIds.includes(preset.id)) {
			selectedColorIds.push(preset.id);
		  }
		} else {
		  selectedColorIds = selectedColorIds.filter(id => id !== preset.id);
		}
		updateColorSelection();
		updateSelectionSummary();
	  });

	  item.appendChild(preview);
	  item.appendChild(info);
	  item.appendChild(checkbox);

	  // Make the whole item clickable
	  item.addEventListener("click", (e) => {
		if (e.target !== checkbox) {
		  checkbox.checked = !checkbox.checked;
		  checkbox.dispatchEvent(new Event("change"));
		}
	  });

	  return item;
	}

	function updateColorSelection() {
	  const colorItems = document.querySelectorAll(".color-item");
	  colorItems.forEach(item => {
		const colorId = item.dataset.colorId;
		const checkbox = item.querySelector(".color-checkbox");
		const isSelected = selectedColorIds.includes(colorId);
		
		checkbox.checked = isSelected;
		item.classList.toggle("selected", isSelected);
	  });
	}

	function updateSelectionSummary() {
	  const summary = document.getElementById("selection-summary");
	  const total = allColorPresets.length;
	  const selected = selectedColorIds.length;
	  const wpSettingsColors = allColorPresets.filter(preset => preset.isWordPressSettings).length;
	  const regularColors = total - wpSettingsColors;
	  
	  if (total === 0) {
		summary.textContent = "No colors available in selected collections";
	  } else {
		let summaryText = `${selected} of ${total} colors selected`;
		if (wpSettingsColors > 0) {
		  summaryText += ` (${wpSettingsColors} WordPress settings colors will be in the color palette)`;
		}
		summary.textContent = summaryText;
	  }
	}

	function toggleCollection(collectionName) {
	  const collectionColors = allColorPresets.filter(preset => preset.collectionName === collectionName);
	  const collectionIds = collectionColors.map(preset => preset.id);
	  
	  // Check if all colors in this collection are selected
	  const allSelected = collectionIds.every(id => selectedColorIds.includes(id));
	  
	  if (allSelected) {
		// Deselect all colors in this collection
		selectedColorIds = selectedColorIds.filter(id => !collectionIds.includes(id));
	  } else {
		// Select all colors in this collection
		collectionIds.forEach(id => {
		  if (!selectedColorIds.includes(id)) {
			selectedColorIds.push(id);
		  }
		});
	  }
	  
	  updateColorSelection();
	  updateSelectionSummary();
	}

	// Collection functionality
	function populateCollections() {
	  const container = document.getElementById("collections-container");
	  container.innerHTML = "";

	  if (allCollections.length === 0) {
		container.innerHTML = '<div class="loading-collections">No collections found in your Figma file.</div>';
		return;
	  }

    // Group collections by wp.* prefix
    const wpCollections = allCollections.filter(c => /^wp\./i.test(c.name));
    const otherCollections = allCollections.filter(c => !/^wp\./i.test(c.name));

    // If no collections are selected yet, default-select ONLY wp.* collections
    if (selectedCollectionIds.length === 0) {
      selectedCollectionIds = wpCollections.map(c => c.id);
    }

    const groups = [
      { title: 'WordPress collections (wp.*)', items: wpCollections },
      { title: 'Other collections', items: otherCollections }
    ];

    groups.forEach(group => {
      if (group.items.length === 0) return;
      const groupDiv = document.createElement('div');
      groupDiv.className = 'collections-group';

      const title = document.createElement('h4');
      title.className = 'collections-group-title';
      title.textContent = group.title;
      groupDiv.appendChild(title);

      group.items.forEach(collection => {
        const collectionItem = createCollectionItem(collection);
        groupDiv.appendChild(collectionItem);
      });

      container.appendChild(groupDiv);
    });

    updateCollectionSelection();
    updateNextButtonState();
	}

	function createCollectionItem(collection) {
	  const item = document.createElement("div");
	  item.className = "collection-item";
	  item.dataset.collectionId = collection.id;

	  // Check if this is a WordPress settings collection
	  const isWordPressSettings = /^wp\.settings\./i.test(collection.name);
	  if (isWordPressSettings) {
		item.classList.add("wordpress-settings");
	  }

	  const info = document.createElement("div");
	  info.className = "collection-info";

	  const name = document.createElement("div");
	  name.className = "collection-name";
	  name.textContent = collection.name;

	  const details = document.createElement("div");
	  details.className = "collection-details";
	  details.textContent = `${collection.variableCount} variables, ${collection.modeCount} mode${collection.modeCount !== 1 ? 's' : ''}`;
	  if (isWordPressSettings) {
		details.innerHTML += ' <span class="wordpress-settings-badge">WordPress Settings</span>';
	  }

	  info.appendChild(name);
	  info.appendChild(details);

	  const checkbox = document.createElement("input");
	  checkbox.type = "checkbox";
	  checkbox.className = "collection-checkbox";
	  checkbox.checked = selectedCollectionIds.includes(collection.id);
	  checkbox.addEventListener("change", () => {
		if (checkbox.checked) {
		  if (!selectedCollectionIds.includes(collection.id)) {
			selectedCollectionIds.push(collection.id);
		  }
		} else {
		  selectedCollectionIds = selectedCollectionIds.filter(id => id !== collection.id);
		}
		updateCollectionSelection();
	  });

	  item.appendChild(info);
	  item.appendChild(checkbox);

	  // Make the whole item clickable
	  item.addEventListener("click", (e) => {
		if (e.target !== checkbox) {
		  checkbox.checked = !checkbox.checked;
		  checkbox.dispatchEvent(new Event("change"));
		}
	  });

	  return item;
	}

	// Collection action buttons
  document.getElementById("select-all-collections").addEventListener("click", () => {
    selectedCollectionIds = allCollections.map(collection => collection.id);
    updateCollectionSelection();
  });

  document.getElementById("select-none-collections").addEventListener("click", () => {
    // Deselect all
    selectedCollectionIds = [];
    updateCollectionSelection();
  });

	// Step navigation functionality
	function showStep(stepNumber) {
		// Hide all step content
		document.querySelectorAll('.step-content').forEach(content => {
			content.classList.remove('active');
		});

		// Show the target step content
		const targetStep = document.getElementById(`step-${stepNumber}`);
		if (targetStep) {
			targetStep.classList.add('active');
		}

		// Update step indicators
		document.querySelectorAll('.step-indicator').forEach(indicator => {
			indicator.classList.remove('active', 'completed');
			const indicatorStep = parseInt(indicator.dataset.step);
			
			if (indicatorStep === stepNumber) {
				indicator.classList.add('active');
			} else if (indicatorStep < stepNumber) {
				indicator.classList.add('completed');
			}
		});

		currentStep = stepNumber;
		updateStepSummaries();
	}

	function updateStepSummaries() {
		// Update step 2 summary
		if (currentStep >= 2) {
			updateStep2Summary();
		}

		// Update step 3 summary
		if (currentStep >= 3) {
			updateStep3Summary();
		}
	}

	function updateStep2Summary() {
		const summary = document.getElementById('selected-collections-summary');
		if (selectedCollectionIds.length === 0) {
			summary.innerHTML = '<span style="color: var(--figma-color-text-disabled);">No collections selected</span>';
			return;
		}

		const selectedCollections = allCollections.filter(collection => 
			selectedCollectionIds.includes(collection.id)
		);

		summary.innerHTML = selectedCollections.map(collection => 
			`<span class="collection-tag">${collection.name}</span>`
		).join('');
	}

	function updateStep3Summary() {
		const summary = document.getElementById('export-summary');
		const selectedCollections = allCollections.filter(collection => 
			selectedCollectionIds.includes(collection.id)
		);

		const generateTypography = document.getElementById("generate-typography").checked;
		const generateColorPresets = document.getElementById("generate-color-presets").checked;
		const generateSpacingPresets = document.getElementById("generate-spacing-presets").checked;
		const useRem = document.getElementById("use-rem").checked;

		let summaryText = [];
		summaryText.push(`${selectedCollections.length} collection${selectedCollections.length !== 1 ? 's' : ''} selected`);

		if (generateTypography) summaryText.push('Typography presets');
		if (generateColorPresets) summaryText.push('Color presets');
		if (generateSpacingPresets) summaryText.push('Spacing presets');
		if (useRem) summaryText.push('Rem units enabled');

		summary.innerHTML = summaryText.join(' • ');
	}

	// Step navigation event listeners
	document.getElementById('next-to-step-2').addEventListener('click', () => {
		if (selectedCollectionIds.length > 0) {
			showStep(2);
		}
	});

	document.getElementById('next-to-step-3').addEventListener('click', () => {
		showStep(3);
	});

	document.getElementById('back-to-step-1').addEventListener('click', () => {
		showStep(1);
	});

	document.getElementById('back-to-step-2').addEventListener('click', () => {
		showStep(2);
	});

	// Step indicator click handlers
	document.querySelectorAll('.step-indicator').forEach(indicator => {
		indicator.addEventListener('click', () => {
			const stepNumber = parseInt(indicator.dataset.step);
			
			// Only allow navigation to completed steps or the next step
			if (stepNumber <= currentStep + 1) {
				showStep(stepNumber);
			}
		});
	});

	// Update next button state based on collection selection
	function updateNextButtonState() {
		const nextButton = document.getElementById('next-to-step-2');
		nextButton.disabled = selectedCollectionIds.length === 0;
	}

	// Configuration option change listeners
	document.getElementById("generate-typography").addEventListener("change", updateStep3Summary);
	document.getElementById("generate-color-presets").addEventListener("change", updateStep3Summary);
	document.getElementById("generate-spacing-presets").addEventListener("change", updateStep3Summary);
	document.getElementById("use-rem").addEventListener("change", updateStep3Summary);

	// Load collections on page load
	document.addEventListener("DOMContentLoaded", () => {
		// Request collections from the plugin
		parent.postMessage({ 
			pluginMessage: { type: "GET_COLLECTIONS" } 
		}, "*");
	});
  </script>