Bit of cleanup

tools/editor/common/dtf.js

@@ -144,10 +144,12 @@ const DTF = (() => {
     for (let i = 0; i < width * height; i++) {
       const o = i * 4;
       switch (format) {
-        case FORMAT_ALPHA:
+        case FORMAT_ALPHA: {
-          out[o] = out[o + 1] = out[o + 2] = redAsAlpha ? src[o] : src[o + 3];
+          const v = redAsAlpha ? src[o] : src[o + 3];
-          out[o + 3] = 255;
+          out[o] = out[o + 1] = out[o + 2] = v;
+          out[o + 3] = v; // use value as canvas alpha so background shows through transparent areas
           break;
+        }
         case FORMAT_RGB:
           out[o]     = src[o];
           out[o + 1] = src[o + 1];

tools/editor/styles/components/btn.css

@@ -1,4 +1,4 @@
-/* Component – Buttons */
+/* Component – Button */
 
 .btn {
   display: block;

tools/editor/styles/components/control-row.css

@@ -0,0 +1,13 @@
+/* Component – Control row */
+
+.control-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.control-row label {
+  color: var(--text-muted);
+  min-width: 44px;
+}

tools/editor/styles/components/empty-state.css

@@ -0,0 +1,13 @@
+/* Component – Empty state */
+
+.empty-state {
+  border-style: dashed;
+  padding: 3rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.empty-state p {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}

tools/editor/styles/components/file-info.css

@@ -1,43 +0,0 @@
-/* Component – File info and load area */
-
-.file-name {
-  font-size: 0.775rem;
-  color: var(--text-muted);
-  word-break: break-all;
-  line-height: 1.4;
-}
-
-.info-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
-}
-
-.info-table td {
-  padding: 0.15rem 0;
-  vertical-align: top;
-}
-
-.info-table td:first-child {
-  color: var(--text-muted);
-  width: 50px;
-  font-size: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.load-area {
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-  padding: 0.6rem;
-  text-align: center;
-  cursor: pointer;
-  font-size: 0.825rem;
-  color: var(--text-muted);
-  transition: border-color var(--speed), color var(--speed);
-  line-height: 1.5;
-}
-
-.load-area:hover,
-.load-area.drag-over {
-  color: var(--text);
-}

tools/editor/styles/components/file-name.css

@@ -0,0 +1,8 @@
+/* Component – File name */
+
+.file-name {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+  word-break: break-all;
+  line-height: 1.4;
+}

tools/editor/styles/components/info-table.css

@@ -0,0 +1,19 @@
+/* Component – Info table */
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.info-table td {
+  padding: 0.15rem 0;
+  vertical-align: top;
+}
+
+.info-table td:first-child {
+  color: var(--text-muted);
+  width: 50px;
+  font-size: 0.75rem;
+  padding-right: 0.75rem;
+}

tools/editor/styles/components/load-area.css

@@ -0,0 +1,18 @@
+/* Component – Load area */
+
+.load-area {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 0.6rem;
+  text-align: center;
+  cursor: pointer;
+  font-size: 0.825rem;
+  color: var(--text-muted);
+  transition: border-color var(--speed), color var(--speed);
+  line-height: 1.5;
+}
+
+.load-area:hover,
+.load-area.drag-over {
+  color: var(--text);
+}

tools/editor/styles/components/panel-inputs.css

@@ -1,36 +1,4 @@
-/* Component – Tool panel (sidebar) */
+/* Component – Panel form inputs */
-
-.tool-panel {
-  width: 210px;
-  flex-shrink: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.panel-section {
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.panel-section:last-child {
-  border-bottom: none;
-}
-
-.control-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.control-row label {
-  color: var(--text-muted);
-  min-width: 44px;
-}
 
 .tool-panel select {
   width: 100%;

tools/editor/styles/components/panel-section.css

@@ -0,0 +1,13 @@
+/* Component – Panel section */
+
+.panel-section {
+  padding: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-section:last-child {
+  border-bottom: none;
+}

tools/editor/styles/components/preview-empty.css

@@ -0,0 +1,14 @@
+/* Component – Preview empty state */
+
+.preview-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}

tools/editor/styles/components/preview-scroll.css

@@ -0,0 +1,16 @@
+/* Component – Preview scroll */
+
+.preview-scroll {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.preview-scroll canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  display: block;
+  max-width: none;
+}

tools/editor/styles/components/preview.css

@@ -1,36 +0,0 @@
-/* Component – Preview area */
-
-.tool-preview {
-  flex: 1;
-  position: relative;
-  min-height: 300px;
-  transition: border-color var(--speed);
-}
-
-.preview-scroll {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-
-.preview-scroll canvas {
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-  display: block;
-  max-width: none;
-}
-
-.preview-empty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--text-muted);
-  font-size: 0.875rem;
-  text-align: center;
-  white-space: nowrap;
-  user-select: none;
-  pointer-events: none;
-}

tools/editor/styles/components/tool-card.css

@@ -1,4 +1,4 @@
-/* Component – Tool cards and empty state */
+/* Component – Tool card */
 
 .tool-card {
   padding: 1.25rem;
@@ -24,15 +24,3 @@
   font-size: 0.85rem;
   line-height: 1.5;
 }
-
-.empty-state {
-  border-style: dashed;
-  padding: 3rem;
-  text-align: center;
-  color: var(--text-muted);
-}
-
-.empty-state p {
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-}

tools/editor/styles/components/tool-panel.css

@@ -0,0 +1,9 @@
+/* Component – Tool panel */
+
+.tool-panel {
+  width: 210px;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}

tools/editor/styles/components/tool-preview.css

@@ -0,0 +1,8 @@
+/* Component – Tool preview */
+
+.tool-preview {
+  flex: 1;
+  position: relative;
+  min-height: 300px;
+  transition: border-color var(--speed);
+}

tools/editor/styles/components/warning-list.css

@@ -1,8 +1,4 @@
-/* Component – Warnings panel */
+/* Component – Warning list */
-
-.warnings-section {
-  border-color: #6b4a00;
-}
 
 .warning-list {
   list-style: none;

tools/editor/styles/components/warnings-section.css

@@ -0,0 +1,5 @@
+/* Component – Warnings section */
+
+.warnings-section {
+  border-color: #6b4a00;
+}

tools/editor/styles/generic.css

@@ -5,3 +5,5 @@
   margin: 0;
   padding: 0;
 }
+
+[hidden] { display: none !important; }

tools/editor/styles/main.css

@@ -3,13 +3,31 @@
 @import "settings.css";
 @import "generic.css";
 @import "elements.css";
-@import "objects.css";
+
-@import "components/header.css";
+/* Objects */
+@import "objects/surface.css";
+@import "objects/section-label.css";
+@import "objects/page.css";
+@import "objects/section.css";
+@import "objects/tool-grid.css";
+@import "objects/tool-workspace.css";
+
+/* Components */
+@import "components/site-header.css";
 @import "components/hero.css";
-@import "components/cards.css";
+@import "components/tool-card.css";
-@import "components/panel.css";
+@import "components/empty-state.css";
-@import "components/buttons.css";
+@import "components/tool-panel.css";
-@import "components/swatches.css";
+@import "components/panel-section.css";
-@import "components/preview.css";
+@import "components/control-row.css";
-@import "components/file-info.css";
+@import "components/panel-inputs.css";
-@import "components/warnings.css";
+@import "components/btn.css";
+@import "components/bg-swatches.css";
+@import "components/tool-preview.css";
+@import "components/preview-scroll.css";
+@import "components/preview-empty.css";
+@import "components/load-area.css";
+@import "components/file-name.css";
+@import "components/info-table.css";
+@import "components/warnings-section.css";
+@import "components/warning-list.css";

tools/editor/styles/objects.css

@@ -1,59 +0,0 @@
-/* Objects – Layout patterns and shared abstractions */
-
-/* Surface base – background, border, and radius shared across raised UI */
-.tool-card,
-.tool-panel,
-.tool-preview,
-.empty-state {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-/* Hover accent border – interactive surfaces that highlight on focus/drag */
-.tool-card:hover,
-.btn:hover:not(:disabled),
-.load-area:hover,
-.load-area.drag-over,
-.tool-preview.drag-over {
-  border-color: var(--accent-dim);
-}
-
-/* Section label – small uppercase heading shared across page and panel contexts */
-.section-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-}
-
-/* Page container */
-.page {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: var(--gap);
-}
-
-/* Top-level sections share uniform vertical spacing */
-.section,
-.tool-workspace {
-  margin-top: var(--gap);
-}
-
-.section > .section-label {
-  margin-bottom: 1rem;
-}
-
-/* Tool grid */
-.tool-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 1rem;
-}
-
-/* Tool workspace */
-.tool-workspace {
-  display: flex;
-  gap: 1rem;
-}

tools/editor/styles/objects/page.css

@@ -0,0 +1,7 @@
+/* Object – Page container */
+
+.page {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--gap);
+}

tools/editor/styles/objects/section-label.css

@@ -0,0 +1,13 @@
+/* Object – Section label */
+
+.section-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.section > .section-label {
+  margin-bottom: 1rem;
+}

tools/editor/styles/objects/section.css

@@ -0,0 +1,5 @@
+/* Object – Page section */
+
+.section {
+  margin-top: var(--gap);
+}

tools/editor/styles/objects/surface.css

@@ -0,0 +1,19 @@
+/* Object – Shared surface base (background, border, radius) */
+
+.tool-card,
+.tool-panel,
+.tool-preview,
+.empty-state {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+/* Hover accent border – interactive surfaces that highlight on focus/drag */
+.tool-card:hover,
+.btn:hover:not(:disabled),
+.load-area:hover,
+.load-area.drag-over,
+.tool-preview.drag-over {
+  border-color: var(--accent-dim);
+}

tools/editor/styles/objects/tool-grid.css

@@ -0,0 +1,7 @@
+/* Object – Tool grid */
+
+.tool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+}

tools/editor/styles/objects/tool-workspace.css

@@ -0,0 +1,7 @@
+/* Object – Tool workspace */
+
+.tool-workspace {
+  margin-top: var(--gap);
+  display: flex;
+  gap: 1rem;
+}

tools/editor/texture/texture.js

@@ -164,8 +164,9 @@ function applyImageData(width, height, data, filename, formatLabel, format) {
 
   // Sync format selector when loading an existing DTF
   if (format !== undefined) {
-    state.format       = format;
+    state.format         = format;
-    formatSelect.value = format;
+    formatSelect.value   = format;
+    redAsAlphaRow.hidden = format !== DTF.FORMAT_ALPHA;
   }
 
   // Sidebar info