feat(builder): add project editor

src/app/features/project-editor/sections/section.shared.scss

@@ -0,0 +1,125 @@
+:host {
+  display: block;
+}
+
+.editor-section-card {
+  background: #fff;
+  border: 1px solid var(--border-color, #d3dad9);
+  border-radius: 16px;
+  padding: 18px;
+  display: grid;
+  gap: 14px;
+}
+
+.editor-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.editor-grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-grid.three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.editor-grid.four {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.editor-grid.compact {
+  align-items: end;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: var(--text-primary, #1e3c38);
+  font-weight: 600;
+}
+
+label.full {
+  grid-column: 1 / -1;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color, #d3dad9);
+  border-radius: 10px;
+  font: inherit;
+  background: #fff;
+}
+
+input[type='checkbox'] {
+  width: auto;
+  padding: 0;
+}
+
+input[type='color'] {
+  min-height: 44px;
+  padding: 4px;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggles {
+  align-items: start;
+}
+
+.sortable-list,
+.stack-list {
+  display: grid;
+  gap: 10px;
+}
+
+.sortable-item,
+.sub-card {
+  border: 1px solid var(--border-color, #d3dad9);
+  border-radius: 12px;
+  padding: 12px;
+  background: #fbfcfc;
+}
+
+.editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+button {
+  min-height: 42px;
+  border-radius: 10px;
+  border: 1px solid #497671;
+  background: #497671;
+  color: #fff;
+  padding: 0 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+button.secondary {
+  background: #fff;
+  color: #1e3c38;
+  border-color: var(--border-color, #d3dad9);
+}
+
+.editor-error {
+  margin: 0;
+  color: #991b1b;
+}
+
+@media (max-width: 900px) {
+  .editor-grid.two,
+  .editor-grid.three,
+  .editor-grid.four {
+    grid-template-columns: 1fr;
+  }
+}