New usable editor

src/app/globals.css

@@ -39,3 +39,121 @@ body {
 .circuit-tree-table .indented-cell {
   padding-left: 1.5rem;
 }
+
+.tree-editor-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tree-grid-wrap {
+  overflow: auto;
+  border: 1px solid #d9dee8;
+  background: #fff;
+}
+
+.tree-grid {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.tree-grid th,
+.tree-grid td {
+  border: 1px solid #e4e9f2;
+  padding: 0.35rem 0.5rem;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.tree-grid th {
+  background: #f4f7fb;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.tree-grid .num {
+  text-align: right;
+}
+
+.tree-grid .section-row td {
+  background: #e8eef8;
+  font-weight: 600;
+}
+
+.tree-grid .summary-row td {
+  background: #f3f7fd;
+}
+
+.tree-grid .device-row td:first-child {
+  color: #6b7280;
+}
+
+.tree-grid .reserve-row td {
+  background: #fff8e7;
+}
+
+.tree-grid .placeholder-row td {
+  background: #f7f7f7;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.tree-grid .cell-editable {
+  cursor: text;
+}
+
+.tree-grid .cell-selected {
+  outline: 2px solid #4c7dd9;
+  outline-offset: -2px;
+}
+
+.tree-grid input {
+  width: 100%;
+  min-width: 5rem;
+  border: 1px solid #9fb6e0;
+  border-radius: 2px;
+  padding: 0.2rem 0.3rem;
+}
+
+.tree-grid .action-cell {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.tree-grid .action-cell button {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  padding: 0.2rem 0.45rem;
+  border-radius: 3px;
+  font-size: 0.78rem;
+}
+
+.notice {
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.notice.info {
+  background: #ebf3ff;
+  border-color: #bad1f7;
+}
+
+.notice.error {
+  background: #fdecec;
+  border-color: #f5b5b5;
+}
+
+.notice.muted {
+  background: #f6f6f6;
+  border-color: #e4e4e4;
+}
+
+.todo-hint {
+  color: #6b7280;
+  font-size: 0.8rem;
+  margin: 0;
+}