@womp/mesh-editor 0.1.0

package/dist/browser/src/session/edit_session.js

@@ -0,0 +1,1472 @@
+import * as DEFAULT_THREE from "three";
+import { PortableMeshEditor } from "../mesh_editor/editor.js";
+const DEFAULT_TOOL_STRENGTH = 0.35;
+const DEFAULT_PRIMARY_SCULPT_STRENGTH = 1.0;
+const PRIMARY_SCULPT_TOOLS = new Set(["clay", "brush", "pore", "spiral", "rake", "scale", "crumple"]);
+function default_strength_for_tool(tool) {
+    return PRIMARY_SCULPT_TOOLS.has(tool)
+        ? DEFAULT_PRIMARY_SCULPT_STRENGTH
+        : DEFAULT_TOOL_STRENGTH;
+}
+function add_styles_once() {
+    if (document.getElementById("womp-mesh-editor-edit-styles") !== null) {
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = "womp-mesh-editor-edit-styles";
+    style.textContent = `
+.womp-mesh-editor-modal.womp-mesh-editor-edit-root {
+  --editor-bg: var(--womp-mesh-editor-color-canvas, #0d1117);
+  --editor-panel: var(--womp-mesh-editor-color-panel, #151b23);
+  --editor-panel-raised: var(--womp-mesh-editor-color-surface, #1b232d);
+  --editor-border: var(--womp-mesh-editor-color-border, #2b3542);
+  --editor-border-strong: var(--womp-mesh-editor-color-border-strong, #3b4858);
+  --editor-text: var(--womp-mesh-editor-color-text, #edf2f7);
+  --editor-muted: var(--womp-mesh-editor-color-muted, #8d9aaa);
+  --editor-accent: var(--womp-mesh-editor-color-accent, #69a5ff);
+  --editor-accent-bg: var(--womp-mesh-editor-color-accent-surface, #203f68);
+  --editor-success: var(--womp-mesh-editor-color-success, #68c995);
+  --editor-danger: var(--womp-mesh-editor-color-danger, #f08e96);
+  --editor-radius-control: var(--womp-mesh-editor-radius-control, 6px);
+  --editor-space-1: var(--womp-mesh-editor-space-1, 4px);
+  --editor-space-2: var(--womp-mesh-editor-space-2, 8px);
+  --editor-space-3: var(--womp-mesh-editor-space-3, 12px);
+  --editor-space-4: var(--womp-mesh-editor-space-4, 16px);
+  position: fixed;
+  inset: 0;
+  z-index: var(--womp-mesh-editor-z-index, 100000);
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "controls viewport tools"
+    "footer footer footer";
+  grid-template-columns: var(--womp-mesh-editor-panel-width, 248px) minmax(0, 1fr) 112px;
+  grid-template-rows: 54px minmax(0, 1fr) 52px;
+  background: var(--editor-bg);
+  color: var(--editor-text);
+  font-family: var(--womp-mesh-editor-font-family, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  font-size: var(--womp-mesh-editor-font-size, 13px);
+  line-height: var(--womp-mesh-editor-line-height, 1.35);
+  color-scheme: dark;
+}
+.womp-mesh-editor-edit-root [hidden] { display: none !important; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-header {
+  grid-area: header;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--editor-border);
+  background: #121821;
+  box-shadow: 0 3px 16px rgb(0 0 0 / 18%);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-heading { min-width: 0; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-heading-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-title {
+  overflow: hidden;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-mode {
+  margin-bottom: 2px;
+  color: var(--editor-accent);
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-dirty {
+  flex: 0 0 auto;
+  padding: 2px 7px;
+  border: 1px solid #8c6632;
+  border-radius: 999px;
+  background: #362a1d;
+  color: #f0bf72;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-viewport {
+  position: relative;
+  grid-area: viewport;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--editor-bg);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  touch-action: none;
+}
+.womp-mesh-editor-edit-root[data-busy="true"] .womp-mesh-editor-canvas { pointer-events: none; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-panel {
+  grid-area: controls;
+  display: flex;
+  flex-direction: column;
+  gap: var(--editor-space-2);
+  min-width: 0;
+  padding: var(--editor-space-3) 14px;
+  border-right: 1px solid var(--editor-border);
+  background: var(--editor-panel);
+  overflow: auto;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-context-header {
+  display: grid;
+  gap: 5px;
+  padding-bottom: 9px;
+  border-bottom: 1px solid var(--editor-border);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-context-title {
+  color: #fff;
+  font-size: 15px;
+  font-weight: 650;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-context-hint {
+  color: var(--editor-muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-pane {
+  display: grid;
+  align-content: start;
+  gap: var(--editor-space-2);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-pane + .womp-mesh-editor-inspector-pane {
+  padding-top: 10px;
+  border-top: 1px solid var(--editor-border);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-heading {
+  color: var(--editor-muted);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-section {
+  display: grid;
+  gap: 6px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-section + .womp-mesh-editor-inspector-section {
+  padding-top: var(--editor-space-2);
+  border-top: 1px solid var(--editor-border);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--editor-space-2);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-inspector-empty {
+  margin: 0;
+  color: var(--editor-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-panel {
+  grid-area: tools;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 4px;
+  min-width: 0;
+  padding: 8px 10px;
+  border-left: 1px solid var(--editor-border);
+  background: var(--editor-panel);
+  overflow: hidden;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-panel-header {
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-grid {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section {
+  display: grid;
+  gap: 6px;
+  padding-top: 11px;
+  border-top: 1px solid var(--editor-border);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-label {
+  color: var(--editor-muted);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 42px);
+  justify-content: end;
+  gap: 6px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons .womp-mesh-editor-button {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  min-width: 42px;
+  min-height: 42px;
+  aspect-ratio: 1;
+  padding: 7px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons .womp-mesh-editor-button.is-labeled {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  gap: 7px;
+  width: 90px;
+  height: 36px;
+  min-width: 90px;
+  min-height: 36px;
+  padding: 6px 10px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-button-label {
+  font-size: 11px;
+  font-weight: 650;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-icon {
+  width: 23px;
+  height: 23px;
+  overflow: visible;
+  color: #b8c3cf;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.65;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: color 120ms ease, filter 120ms ease;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-button:hover:not(:disabled) .womp-mesh-editor-tool-icon {
+  color: #e3ebf4;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-button.is-active .womp-mesh-editor-tool-icon {
+  color: #fff;
+  filter: drop-shadow(0 0 4px rgb(105 165 255 / 42%));
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-footer {
+  grid-area: footer;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 7px 12px;
+  border-top: 1px solid var(--editor-border);
+  background: #121821;
+  box-shadow: 0 -3px 16px rgb(0 0 0 / 18%);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-footer-actions { display: flex; gap: 7px; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status {
+  position: absolute;
+  left: 16px;
+  bottom: 16px;
+  z-index: 3;
+  display: grid;
+  gap: 5px;
+  width: min(420px, calc(100% - 32px));
+  padding: 10px 12px;
+  border: 1px solid var(--editor-border-strong);
+  border-radius: 8px;
+  background: rgb(18 24 33 / 94%);
+  box-shadow: 0 12px 32px rgb(0 0 0 / 32%);
+  color: #b9c4d0;
+  backdrop-filter: blur(12px);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-status-header { display: flex; justify-content: space-between; gap: 8px; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status-phase { color: var(--editor-text); font-size: 11px; font-weight: 700; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status-state { color: var(--editor-muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status[data-state="running"] { border-color: #345d8e; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status[data-state="running"] .womp-mesh-editor-status-state { color: var(--editor-accent); }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status[data-state="success"] .womp-mesh-editor-status-state { color: var(--editor-success); }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status[data-state="error"] { border-color: #824d53; background: rgb(48 24 29 / 96%); }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status[data-state="error"] .womp-mesh-editor-status-state { color: var(--editor-danger); }
+.womp-mesh-editor-edit-root .womp-mesh-editor-status-message { overflow-wrap: anywhere; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-group { display: grid; gap: 8px; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-label {
+  color: var(--editor-muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button {
+  min-height: 32px;
+  padding: 5px 10px;
+  border: 1px solid var(--editor-border-strong);
+  border-radius: var(--editor-radius-control);
+  background: var(--editor-panel-raised);
+  color: var(--editor-text);
+  font: inherit;
+  font-weight: 550;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-button:hover:not(:disabled) { border-color: #536277; background: #232e3b; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button:focus-visible,
+.womp-mesh-editor-edit-root input:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons .womp-mesh-editor-button:focus-visible {
+  outline: none;
+  border-color: #9ec7ff;
+  box-shadow: inset 0 0 0 1px #9ec7ff;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-button.is-active { border-color: var(--editor-accent); background: var(--editor-accent-bg); color: #fff; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button.is-primary { min-width: 96px; border-color: #72aafa; background: #316fbd; color: #fff; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button.is-primary:hover:not(:disabled) { border-color: #91bcfa; background: #3a7dcc; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button.is-secondary { background: transparent; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-button:disabled { cursor: default; opacity: .5; }
+.womp-mesh-editor-edit-root .womp-mesh-editor-range-row {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr) 38px;
+  align-items: center;
+  gap: 8px;
+  min-height: 26px;
+  color: #c5ced8;
+  font-size: 11px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-range-value {
+  color: var(--editor-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-range-row input {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--editor-accent);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-color-row {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  color: #c5ced8;
+  font-size: 11px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-color-row input {
+  width: 100%;
+  height: 28px;
+  padding: 2px;
+  border: 1px solid var(--editor-border-strong);
+  border-radius: 5px;
+  background: var(--editor-panel-raised);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-alternate-row {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  color: #c5ced8;
+  font-size: 11px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-alternate-row .womp-mesh-editor-button {
+  min-height: 30px;
+  padding: 4px 10px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-check-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--editor-border-strong);
+  border-radius: var(--editor-radius-control);
+  background: var(--editor-panel-raised);
+  color: #c5ced8;
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-check-row input {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--editor-accent);
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-field-heading {
+  color: var(--editor-muted);
+  font-size: 11px;
+  font-weight: 650;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-symmetry-planes {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 7px;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-symmetry-planes .womp-mesh-editor-check-row {
+  justify-content: space-between;
+  min-width: 0;
+}
+.womp-mesh-editor-edit-root .womp-mesh-editor-footer-hint {
+  overflow: hidden;
+  color: var(--editor-muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (max-width: 760px) {
+  .womp-mesh-editor-modal.womp-mesh-editor-edit-root {
+    grid-template-areas:
+      "header"
+      "viewport"
+      "tools"
+      "controls"
+      "footer";
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 50px minmax(0, 1fr) auto auto 52px;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-header { gap: 8px; padding: 0 8px 0 10px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-mode { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-heading { flex: 1 1 auto; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-title { max-width: 150px; font-size: 12px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-dirty { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-header-actions { gap: 5px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-header-actions .womp-mesh-editor-button { min-width: 0; min-height: 34px; padding: 6px 9px; font-size: 11px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-header-actions .is-primary { min-width: 74px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-panel {
+    gap: 6px;
+    padding: 7px 10px 8px;
+    border-top: 1px solid var(--editor-border);
+    border-left: 0;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-panel-header > .womp-mesh-editor-label { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-grid {
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-grid::-webkit-scrollbar { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 6px;
+    padding: 0 0 0 8px;
+    border-top: 0;
+    border-left: 1px solid var(--editor-border-strong);
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section:first-child {
+    padding-left: 0;
+    border-left: 0;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-label { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons { display: flex; gap: 6px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons .womp-mesh-editor-button {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    padding: 7px;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-tool-section-buttons .womp-mesh-editor-button.is-labeled {
+    grid-column: auto;
+    width: 72px;
+    height: 40px;
+    min-width: 72px;
+    min-height: 40px;
+    padding: 7px 9px;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-panel {
+    gap: 8px;
+    max-height: var(--womp-mesh-editor-panel-mobile-max-height, 190px);
+    padding: 9px 12px 10px;
+    border-top: 1px solid var(--editor-border);
+    border-right: 0;
+  }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-context-header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 7px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-context-title { flex: 0 0 auto; font-size: 12px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-context-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-inspector-pane { gap: 8px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-footer { gap: 8px; padding: 7px 8px; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-footer-hint { display: none; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-footer .womp-mesh-editor-button { min-height: 36px; padding: 6px 10px; font-size: 11px; white-space: nowrap; }
+  .womp-mesh-editor-edit-root .womp-mesh-editor-status { left: 10px; bottom: 10px; width: min(360px, calc(100% - 20px)); }
+}`;
+    document.head.appendChild(style);
+}
+function set_hint(element, hint) {
+    element.title = hint;
+    element.setAttribute("aria-label", hint);
+}
+function button(label, hint, className = "womp-mesh-editor-button") {
+    const element = document.createElement("button");
+    element.type = "button";
+    element.className = className;
+    element.textContent = label;
+    set_hint(element, hint);
+    return element;
+}
+const TOOL_ICON_PATHS = {
+    view: `
+    <path d="M2.75 12s3.25-5.25 9.25-5.25S21.25 12 21.25 12 18 17.25 12 17.25 2.75 12 2.75 12Z" />
+    <circle cx="12" cy="12" r="2.65" />
+  `,
+    drag: `
+    <path d="m5 3 11.4 8.1-5.25 1.05-2.1 5.1L5 3Z" />
+    <circle cx="17.5" cy="17.5" r="2.25" />
+    <path d="m11.15 12.15 4.75 3.75" />
+  `,
+    move: `
+    <path d="M12 3v18M3 12h18" />
+    <path d="m8.75 6.25 3.25-3.25 3.25 3.25M8.75 17.75 12 21l3.25-3.25M6.25 8.75 3 12l3.25 3.25M17.75 8.75 21 12l-3.25 3.25" />
+  `,
+    clay: `
+    <path d="M3 17.5c2.4-1.1 4.3-1.7 6.2-1.8 2.4-.1 3.8.8 5.8.5 2-.3 3.7-1.5 6-3.7" />
+    <path d="M4.5 13.5c2.5-3.6 5-5.2 7.5-5.2s5 1.6 7.5 5.2" />
+    <path d="M8.25 9.25C8.8 6.8 10.05 5.5 12 5.5s3.2 1.3 3.75 3.75" />
+  `,
+    brush: `
+    <path d="M4 18h16" />
+    <path d="M6 18c.8-5.2 2.8-8 6-8s5.2 2.8 6 8" />
+    <path d="M12 3v4m0-4-2 2m2-2 2 2" />
+  `,
+    smooth: `
+    <path d="M3 15.75c3-5 5.75-5 9-1.75s5.8 3.25 9-1.75" />
+    <path d="M4.5 10.5c2-2.75 4-3.25 6.25-1.25M13.25 9.4c2.25 1.5 4.25 1.4 6.25-.65" />
+    <circle cx="3" cy="15.75" r=".8" /><circle cx="12" cy="14" r=".8" /><circle cx="21" cy="12.25" r=".8" />
+  `,
+    flatten: `
+    <path d="M3 17h18M5 20h14" />
+    <path d="M7 4v8m0 0-2.5-2.5M7 12l2.5-2.5M17 4v8m0 0-2.5-2.5M17 12l2.5-2.5" />
+  `,
+    crease: `
+    <path d="M3 7.5c3.3 0 5.2 1.1 6.5 3.4L12 15l2.5-4.1c1.3-2.3 3.2-3.4 6.5-3.4" />
+    <path d="M12 4v6m0 0-2-2m2 2 2-2" />
+    <path d="M6 19h12" />
+  `,
+    pore: `
+    <circle cx="12" cy="12" r="8" />
+    <circle cx="12" cy="12" r="4.5" />
+    <path d="M9.5 12c.8 1.6 1.6 2.4 2.5 2.4s1.7-.8 2.5-2.4" />
+  `,
+    spiral: `
+    <path d="M12 12c0-2.2 3.6-2.2 3.6.6 0 3.8-6.8 4.6-8.8.2-2.6-5.8 4.2-10.5 9.7-7.2 4.8 2.9 1.8 13.9-7.5 14.6" />
+  `,
+    rake: `
+    <path d="M5 4v8M9.5 4v8M14 4v8M18.5 4v8" />
+    <path d="M3.5 16c3-1.7 5.8-1.7 8.5 0s5.5 1.7 8.5 0M4.5 20h15" />
+  `,
+    scale: `
+    <path d="M4 17c2.4-5 5.1-7.5 8-7.5s5.6 2.5 8 7.5c-2.8-1.3-5.5-1.3-8 0-2.5-1.3-5.2-1.3-8 0Z" />
+    <path d="M7 10c1.5-3.3 3.2-5 5-5s3.5 1.7 5 5" />
+  `,
+    crumple: `
+    <path d="m3.5 15 3-7 3 5 2.5-8 3 7 2.5-4 3 7" />
+    <path d="M4 19c3-1.5 5.5-1.5 8 0s5 1.5 8 0" />
+  `,
+    pinch: `
+    <circle cx="12" cy="12" r="1.75" />
+    <path d="M4 4l5 5m0 0V5.75M9 9H5.75M20 4l-5 5m0 0V5.75M15 9h3.25M4 20l5-5m0 0v3.25M9 15H5.75M20 20l-5-5m0 0v3.25M15 15h3.25" />
+  `,
+    inflate: `
+    <circle cx="12" cy="12" r="4.25" />
+    <path d="M12 5V2.75m0 0L10.25 4.5M12 2.75l1.75 1.75M19 12h2.25m0 0-1.75-1.75M21.25 12l-1.75 1.75M12 19v2.25m0 0-1.75-1.75M12 21.25l1.75-1.75M5 12H2.75m0 0L4.5 10.25M2.75 12l1.75 1.75" />
+  `,
+    paint: `
+    <path d="m15.75 3.25 5 5-9.8 9.8-5.8.85.85-5.8 9.75-9.85Z" />
+    <path d="m13.35 5.65 5 5M6 13.1l4.95 4.95" />
+    <circle cx="4" cy="5" r="1" /><circle cx="8" cy="4" r="1" />
+  `,
+    "texture-paint": `
+    <rect x="3" y="3" width="13" height="13" rx="1.5" />
+    <path d="M3 9.5h13M9.5 3v13M3 3l6.5 6.5L16 3M3 16l6.5-6.5L16 16" opacity=".48" />
+    <path d="m17 10.5 4 4-5.6 5.6-4.75.75.75-4.75 5.6-5.6Z" />
+  `,
+    "fill-vertices": `
+    <path d="m13.5 3 7.5 7.5-9.75 9.75a2.4 2.4 0 0 1-3.4 0l-4.1-4.1a2.4 2.4 0 0 1 0-3.4L13.5 3Z" />
+    <path d="m6.5 10 7.5 7.5M11 5.5l2.5-2.5" />
+    <circle cx="17.5" cy="19" r="1" /><circle cx="20.5" cy="16" r="1" />
+  `,
+    "fill-texture": `
+    <rect x="3" y="3" width="11" height="11" rx="1.5" />
+    <path d="M3 8.5h11M8.5 3v11M3 3l5.5 5.5L14 3M3 14l5.5-5.5L14 14" opacity=".48" />
+    <path d="m16.5 9 4.5 4.5-5.4 5.4a2 2 0 0 1-2.8 0l-1.7-1.7 5.4-8.2Z" />
+    <circle cx="20" cy="20" r="1" />
+  `,
+};
+function set_button_icon(element, paths, className) {
+    const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    icon.classList.add(className);
+    icon.setAttribute("viewBox", "0 0 24 24");
+    icon.setAttribute("aria-hidden", "true");
+    icon.setAttribute("focusable", "false");
+    icon.innerHTML = paths;
+    element.replaceChildren(icon);
+}
+function set_tool_button_icon(element, tool) {
+    const iconPaths = TOOL_ICON_PATHS[tool];
+    if (iconPaths === undefined) {
+        throw new Error(`Missing icon for mesh editor tool '${tool}'.`);
+    }
+    set_button_icon(element, iconPaths, "womp-mesh-editor-tool-icon");
+    if (tool === "view") {
+        const label = document.createElement("span");
+        label.className = "womp-mesh-editor-tool-button-label";
+        label.textContent = "View";
+        element.classList.add("is-labeled");
+        element.appendChild(label);
+    }
+}
+function make_range(label, min, max, step, value, hint) {
+    const row = document.createElement("label");
+    row.className = "womp-mesh-editor-range-row";
+    row.title = hint;
+    const text = document.createElement("span");
+    text.textContent = label;
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = min;
+    input.max = max;
+    input.step = step;
+    input.value = value;
+    set_hint(input, label);
+    const output = document.createElement("output");
+    output.className = "womp-mesh-editor-range-value";
+    output.textContent = Number(value).toFixed(2);
+    row.append(text, input, output);
+    return { row, input, output };
+}
+function format_model_unit_value(value, step) {
+    const absoluteStep = Math.abs(step);
+    const absoluteValue = Math.abs(value);
+    if (absoluteValue > 0 && (absoluteValue < 0.000001 || absoluteValue >= 1000000)) {
+        return value.toExponential(2);
+    }
+    const decimals = absoluteStep > 0
+        ? Math.min(Math.max(Math.ceil(-Math.log10(absoluteStep)), 0), 6)
+        : 2;
+    const fixed = value.toFixed(decimals);
+    return fixed.includes(".") ? fixed.replace(/0+$/, "").replace(/\.$/, "") : fixed;
+}
+function brush_radius_unit_step(minimumRadius) {
+    const desiredStep = Math.min(Math.max(minimumRadius * 0.1, Number.MIN_VALUE), 1);
+    return Math.max(10 ** Math.floor(Math.log10(desiredStep)), Number.MIN_VALUE);
+}
+function brush_radius_from_slider(input) {
+    const minimum = Number(input.dataset.unitMin);
+    const maximum = Number(input.dataset.unitMax);
+    const anchor = Number(input.dataset.unitAnchor);
+    const t = Math.min(Math.max(Number(input.value) / 1000, 0), 1);
+    if (minimum <= 0 || maximum <= minimum) {
+        return Math.max(minimum, Number.MIN_VALUE);
+    }
+    if (anchor > minimum && anchor < maximum) {
+        if (t <= 0.5) {
+            return minimum * ((anchor / minimum) ** (t * 2));
+        }
+        return anchor * ((maximum / anchor) ** ((t - 0.5) * 2));
+    }
+    return minimum * ((maximum / minimum) ** t);
+}
+function set_brush_radius_slider(input, radius) {
+    const minimum = Number(input.dataset.unitMin);
+    const maximum = Number(input.dataset.unitMax);
+    const anchor = Number(input.dataset.unitAnchor);
+    const clampedRadius = Math.min(Math.max(radius, minimum), maximum);
+    let t = 0;
+    if (maximum > minimum && minimum > 0) {
+        if (anchor > minimum && anchor < maximum) {
+            t = clampedRadius <= anchor
+                ? 0.5 * (Math.log(clampedRadius / minimum) / Math.log(anchor / minimum))
+                : 0.5 + (0.5 * (Math.log(clampedRadius / anchor) / Math.log(maximum / anchor)));
+        }
+        else {
+            t = Math.log(clampedRadius / minimum) / Math.log(maximum / minimum);
+        }
+    }
+    input.value = String(Math.round(Math.min(Math.max(t, 0), 1) * 1000));
+}
+function make_check(label, checked, hint) {
+    const row = document.createElement("label");
+    row.className = "womp-mesh-editor-check-row";
+    row.title = hint;
+    const text = document.createElement("span");
+    text.textContent = label;
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = checked;
+    set_hint(input, hint);
+    row.append(text, input);
+    return { row, input };
+}
+function make_color(label, value, hint) {
+    const row = document.createElement("label");
+    row.className = "womp-mesh-editor-color-row";
+    row.title = hint;
+    const text = document.createElement("span");
+    text.textContent = label;
+    const input = document.createElement("input");
+    input.type = "color";
+    input.value = value;
+    set_hint(input, hint);
+    row.append(text, input);
+    return { row, input };
+}
+function set_active_tool(toolButtons, activeTool) {
+    for (const [tool, toolButton] of toolButtons) {
+        const isActive = tool === activeTool;
+        toolButton.classList.toggle("is-active", isActive);
+        toolButton.setAttribute("aria-pressed", String(isActive));
+    }
+}
+export async function open_edit_session(options) {
+    if (options === undefined || options === null) {
+        throw new Error("Mesh edit session options are required.");
+    }
+    if (options.editable_mesh === undefined || options.editable_mesh === null) {
+        throw new Error("Editing sessions require editable_mesh.");
+    }
+    add_styles_once();
+    const THREE = options.three || DEFAULT_THREE;
+    const previouslyFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const root = document.createElement("div");
+    root.className = "womp-mesh-editor-modal womp-mesh-editor-edit-root";
+    for (const className of String(options.root_class || "").split(/\s+/)) {
+        if (className !== "")
+            root.classList.add(className);
+    }
+    root.dataset.mode = "edit";
+    root.setAttribute("role", "dialog");
+    root.setAttribute("aria-modal", "true");
+    root.setAttribute("aria-label", "Mesh editing session");
+    root.tabIndex = -1;
+    const viewport = document.createElement("div");
+    viewport.className = "womp-mesh-editor-viewport";
+    const canvas = document.createElement("canvas");
+    canvas.className = "womp-mesh-editor-canvas";
+    canvas.title = "Mesh editor viewport. Primary drag in View orbits; secondary drag pans; Alt-drag or middle mouse orbits; brush tools edit on drag.";
+    canvas.setAttribute("aria-label", "Mesh editor viewport");
+    viewport.appendChild(canvas);
+    const header = document.createElement("div");
+    header.className = "womp-mesh-editor-header";
+    const heading = document.createElement("div");
+    heading.className = "womp-mesh-editor-heading";
+    const modeLabel = document.createElement("div");
+    modeLabel.className = "womp-mesh-editor-mode";
+    modeLabel.textContent = "Mesh editing";
+    const headingRow = document.createElement("div");
+    headingRow.className = "womp-mesh-editor-heading-row";
+    const title = document.createElement("div");
+    title.className = "womp-mesh-editor-title";
+    title.textContent = options.title || "Edit mesh";
+    const dirtyState = document.createElement("span");
+    dirtyState.className = "womp-mesh-editor-dirty";
+    dirtyState.textContent = "Unsaved";
+    dirtyState.hidden = true;
+    headingRow.append(title, dirtyState);
+    heading.append(modeLabel, headingRow);
+    const headerActions = document.createElement("div");
+    headerActions.className = "womp-mesh-editor-header-actions";
+    const undoButton = button("Undo", "Undo the last mesh edit (Ctrl/Cmd+Z).");
+    const redoButton = button("Redo", "Redo the last undone mesh edit (Ctrl/Cmd+Shift+Z or Ctrl+Y).");
+    const commitButton = button("Apply", "Return the edited mesh to the host.", "womp-mesh-editor-button is-primary");
+    undoButton.disabled = true;
+    redoButton.disabled = true;
+    headerActions.append(undoButton, redoButton, commitButton);
+    header.append(heading, headerActions);
+    const panel = document.createElement("div");
+    panel.className = "womp-mesh-editor-panel";
+    const contextHeader = document.createElement("div");
+    contextHeader.className = "womp-mesh-editor-context-header";
+    const contextTitle = document.createElement("div");
+    contextTitle.className = "womp-mesh-editor-context-title";
+    const contextHint = document.createElement("div");
+    contextHint.className = "womp-mesh-editor-context-hint";
+    contextHeader.append(contextTitle, contextHint);
+    const inspectorPanes = new Map();
+    const inspectorDefinitions = [
+        ["tool", "Tool"],
+        ["stroke", "Stroke"],
+        ["paint", "Paint"],
+        ["view", "View"],
+    ];
+    for (const [inspector, label] of inspectorDefinitions) {
+        const pane = document.createElement("section");
+        pane.className = "womp-mesh-editor-inspector-pane";
+        pane.id = `womp-mesh-editor-${inspector}-pane`;
+        pane.setAttribute("role", "region");
+        pane.setAttribute("aria-label", `${label} settings`);
+        const paneHeading = document.createElement("div");
+        paneHeading.className = "womp-mesh-editor-inspector-heading";
+        paneHeading.textContent = label;
+        pane.appendChild(paneHeading);
+        inspectorPanes.set(inspector, pane);
+    }
+    const toolInspector = inspectorPanes.get("tool");
+    const strokeInspector = inspectorPanes.get("stroke");
+    const paintInspector = inspectorPanes.get("paint");
+    const viewInspector = inspectorPanes.get("view");
+    if (toolInspector === undefined ||
+        strokeInspector === undefined ||
+        paintInspector === undefined ||
+        viewInspector === undefined) {
+        throw new Error("Mesh editor inspector initialization failed.");
+    }
+    panel.append(contextHeader, toolInspector, strokeInspector, paintInspector, viewInspector);
+    const status = document.createElement("div");
+    status.className = "womp-mesh-editor-status";
+    status.setAttribute("role", "status");
+    status.setAttribute("aria-live", "polite");
+    const statusHeader = document.createElement("div");
+    statusHeader.className = "womp-mesh-editor-status-header";
+    const statusPhase = document.createElement("span");
+    statusPhase.className = "womp-mesh-editor-status-phase";
+    const statusState = document.createElement("span");
+    statusState.className = "womp-mesh-editor-status-state";
+    const statusMessage = document.createElement("div");
+    statusMessage.className = "womp-mesh-editor-status-message";
+    statusHeader.append(statusPhase, statusState);
+    status.append(statusHeader, statusMessage);
+    status.hidden = true;
+    viewport.appendChild(status);
+    let statusHideTimer = null;
+    function set_status(phase, message, state, persistent = false) {
+        if (statusHideTimer !== null) {
+            window.clearTimeout(statusHideTimer);
+            statusHideTimer = null;
+        }
+        if (state === "idle") {
+            status.hidden = true;
+            return;
+        }
+        status.hidden = false;
+        status.dataset.state = state;
+        statusPhase.textContent = phase;
+        statusState.textContent = state;
+        statusMessage.textContent = message;
+        if (persistent === false && state !== "error") {
+            statusHideTimer = window.setTimeout(() => {
+                status.hidden = true;
+                statusHideTimer = null;
+            }, 1800);
+        }
+    }
+    const toolGroup = document.createElement("div");
+    toolGroup.className = "womp-mesh-editor-tool-panel";
+    const toolLabel = document.createElement("div");
+    toolLabel.className = "womp-mesh-editor-label";
+    toolLabel.textContent = "Tools";
+    const toolPanelHeader = document.createElement("div");
+    toolPanelHeader.className = "womp-mesh-editor-tool-panel-header";
+    toolPanelHeader.appendChild(toolLabel);
+    const toolGrid = document.createElement("div");
+    toolGrid.className = "womp-mesh-editor-tool-grid";
+    const toolButtons = new Map();
+    const actionButtons = new Map();
+    const toolGroups = [
+        {
+            label: "Navigation",
+            tools: [["view", "View", "Orbit, pan, and inspect the mesh without changing it."]],
+        },
+        {
+            label: "Sculpt",
+            tools: [
+                ["clay", "Clay", "Build up material with a soft, clay-like stroke."],
+                ["brush", "Brush", "Raise the surface with a smooth, even stroke."],
+                ["smooth", "Smooth", "Soften bumps and blend uneven areas."],
+                ["crease", "Crease", "Cut a narrow groove into the surface."],
+                ["pore", "Pore", "Stamp rounded pores with a raised rim."],
+                ["spiral", "Spiral", "Sculpt curled ridges and grooves."],
+                ["rake", "Rake", "Drag parallel grooves across the surface."],
+                ["scale", "Scale", "Layer overlapping, scale-shaped details."],
+                ["crumple", "Crumple", "Add natural-looking wrinkles and surface variation."],
+                ["move", "Move", "Push and pull a broad area of the surface."],
+                ["flatten", "Flatten", "Level the surface under the brush."],
+                ["pinch", "Pinch", "Pull the surface together toward the stroke."],
+                ["inflate", "Inflate", "Expand the surface outward."],
+            ],
+        },
+        {
+            label: "Painting",
+            tools: [
+                ["paint", "Vertex Paint", "Paint color directly onto the mesh vertices."],
+                ["texture-paint", "Texture Paint", "Paint color onto the material texture."],
+            ],
+        },
+        {
+            label: "Single vertex",
+            tools: [["drag", "Drag", "Move one visible vertex at a time. Joined seam vertices move together."]],
+            requiresVertices: true,
+        },
+    ];
+    const tools = toolGroups.flatMap((group) => group.tools);
+    let activeTool = "clay";
+    let singleVertexToolSection = null;
+    for (const toolGroupInfo of toolGroups) {
+        const toolSection = document.createElement("div");
+        toolSection.className = "womp-mesh-editor-tool-section";
+        toolSection.setAttribute("role", "group");
+        toolSection.setAttribute("aria-label", toolGroupInfo.label);
+        if (toolGroupInfo.requiresVertices === true) {
+            toolSection.hidden = true;
+            singleVertexToolSection = toolSection;
+        }
+        const toolSectionLabel = document.createElement("div");
+        toolSectionLabel.className = "womp-mesh-editor-tool-section-label";
+        toolSectionLabel.textContent = toolGroupInfo.label;
+        const toolSectionButtons = document.createElement("div");
+        toolSectionButtons.className = "womp-mesh-editor-tool-section-buttons";
+        for (const [tool, label, hint] of toolGroupInfo.tools) {
+            const toolKind = tool === "view" || tool === "drag" || tool === "brush" ? "tool" : "brush";
+            const toolButton = button(label, `${label} ${toolKind}: ${hint}`);
+            set_tool_button_icon(toolButton, tool);
+            toolButtons.set(tool, toolButton);
+            toolSectionButtons.appendChild(toolButton);
+        }
+        toolSection.append(toolSectionLabel, toolSectionButtons);
+        toolGrid.appendChild(toolSection);
+    }
+    set_active_tool(toolButtons, activeTool);
+    toolGroup.append(toolPanelHeader, toolGrid);
+    const brushGroup = document.createElement("div");
+    brushGroup.className = "womp-mesh-editor-group womp-mesh-editor-inspector-section";
+    brushGroup.setAttribute("role", "group");
+    brushGroup.setAttribute("aria-label", "Tool controls");
+    const radius = make_range("Radius", "0.01", "2.0", "0.01", "1.0", "Brush size in model units.");
+    const strength = make_range("Strength", "0.0", "4.0", "0.01", String(default_strength_for_tool(activeTool)), "How strongly the brush affects the surface.");
+    const softness = make_range("Softness", "0.0", "1.0", "0.0001", "0.6666", "How gently the brush fades toward its edge.");
+    const alternateRow = document.createElement("div");
+    alternateRow.className = "womp-mesh-editor-alternate-row";
+    const alternateLabel = document.createElement("span");
+    alternateLabel.textContent = "Effect";
+    const alternateButton = button("Remove", "Remove material. Hold Ctrl to use this effect temporarily.");
+    alternateButton.setAttribute("aria-pressed", "false");
+    alternateRow.append(alternateLabel, alternateButton);
+    alternateRow.hidden = true;
+    const color = make_color("Color", "#ff0000", "Brush color for vertex and texture painting.");
+    brushGroup.append(radius.row, strength.row, alternateRow);
+    brushGroup.hidden = true;
+    toolInspector.appendChild(brushGroup);
+    const toolInspectorEmpty = document.createElement("p");
+    toolInspectorEmpty.className = "womp-mesh-editor-inspector-empty";
+    toolInspectorEmpty.textContent = "This tool has no adjustable settings.";
+    toolInspector.appendChild(toolInspectorEmpty);
+    const paintActions = document.createElement("div");
+    paintActions.className = "womp-mesh-editor-inspector-section";
+    paintActions.setAttribute("role", "group");
+    paintActions.setAttribute("aria-label", "Painting actions");
+    const paintActionButtons = document.createElement("div");
+    paintActionButtons.className = "womp-mesh-editor-inspector-actions";
+    const fillVerticesButton = button("Fill vertices", "Fill vertex colors: apply the selected color to every vertex on the object.");
+    const fillTextureButton = button("Fill texture", "Fill textures: apply the selected color to every material texture on the object.");
+    actionButtons.set("fill-vertices", fillVerticesButton);
+    actionButtons.set("fill-texture", fillTextureButton);
+    paintActionButtons.append(fillVerticesButton, fillTextureButton);
+    paintActions.appendChild(paintActionButtons);
+    const paintSettings = document.createElement("div");
+    paintSettings.className = "womp-mesh-editor-inspector-section";
+    paintSettings.setAttribute("role", "group");
+    paintSettings.setAttribute("aria-label", "Paint settings");
+    paintSettings.appendChild(color.row);
+    paintInspector.append(paintSettings, paintActions);
+    const brushTools = new Set([
+        "clay",
+        "brush",
+        "move",
+        "smooth",
+        "flatten",
+        "crease",
+        "pore",
+        "spiral",
+        "rake",
+        "scale",
+        "crumple",
+        "pinch",
+        "inflate",
+        "paint",
+        "texture-paint",
+    ]);
+    const paintTools = new Set(["paint", "texture-paint"]);
+    const strokeSettings = document.createElement("div");
+    strokeSettings.className = "womp-mesh-editor-inspector-section";
+    strokeSettings.setAttribute("role", "group");
+    strokeSettings.setAttribute("aria-label", "Stroke falloff");
+    strokeSettings.appendChild(softness.row);
+    strokeInspector.appendChild(strokeSettings);
+    const strokeInspectorEmpty = document.createElement("p");
+    strokeInspectorEmpty.className = "womp-mesh-editor-inspector-empty";
+    strokeInspectorEmpty.textContent = "Choose a brush to edit stroke settings.";
+    strokeInspector.appendChild(strokeInspectorEmpty);
+    const toolStrengths = new Map();
+    const alternateModes = new Map([
+        ["clay", { label: "Remove", hint: "Remove material with Clay. Hold Ctrl to use this effect temporarily." }],
+        ["brush", { label: "Lower", hint: "Lower the surface with Brush. Hold Ctrl to use this effect temporarily." }],
+        ["smooth", { label: "Relax", hint: "Relax the mesh while preserving surface detail. Hold Ctrl to use this effect temporarily." }],
+        ["flatten", { label: "Fill", hint: "Raise low areas toward the highest point under the brush. Hold Ctrl to use this effect temporarily." }],
+        ["crease", { label: "Raise", hint: "Create a raised crease. Hold Ctrl to use this effect temporarily." }],
+        ["pore", { label: "Invert", hint: "Raise the center and recess the rim. Hold Ctrl to use this effect temporarily." }],
+        ["spiral", { label: "Invert", hint: "Swap the spiral ridges and grooves. Hold Ctrl to use this effect temporarily." }],
+        ["rake", { label: "Raise", hint: "Raise parallel ribs instead of cutting grooves. Hold Ctrl to use this effect temporarily." }],
+        ["scale", { label: "Recess", hint: "Press scales into the surface. Hold Ctrl to use this effect temporarily." }],
+        ["crumple", { label: "Invert", hint: "Reverse the crumple pattern. Hold Ctrl to use this effect temporarily." }],
+        ["pinch", { label: "Spread", hint: "Spread the surface away from the brush center. Hold Ctrl to use this effect temporarily." }],
+        ["inflate", { label: "Deflate", hint: "Push the surface inward. Hold Ctrl to use this effect temporarily." }],
+    ]);
+    const persistentAlternateModes = new Map();
+    let controlAlternateMode = false;
+    function configure_strength_control(tool) {
+        if (brushTools.has(tool) === false) {
+            return;
+        }
+        const maximum = tool === "smooth" ? 0.5 : 4;
+        const configured = toolStrengths.get(tool) ?? default_strength_for_tool(tool);
+        const value = Math.min(Math.max(configured, 0), maximum);
+        strength.input.max = String(maximum);
+        strength.input.value = String(value);
+        strength.output.textContent = value.toFixed(2);
+        strength.row.title = tool === "smooth"
+            ? "How strongly the brush softens the surface."
+            : "How strongly the brush affects the surface.";
+    }
+    function alternate_mode_enabled() {
+        return alternateModes.has(activeTool) &&
+            (persistentAlternateModes.get(activeTool) === true || controlAlternateMode);
+    }
+    function update_alternate_control() {
+        const alternateMode = alternateModes.get(activeTool);
+        alternateRow.hidden = alternateMode === undefined;
+        if (alternateMode === undefined) {
+            alternateButton.classList.remove("is-active");
+            alternateButton.setAttribute("aria-pressed", "false");
+            return;
+        }
+        alternateButton.textContent = alternateMode.label;
+        set_hint(alternateButton, alternateMode.hint);
+        const enabled = alternate_mode_enabled();
+        alternateButton.classList.toggle("is-active", enabled);
+        alternateButton.setAttribute("aria-pressed", String(enabled));
+    }
+    function update_tool_context(tool) {
+        const activeToolInfo = tools.find(([toolId]) => toolId === tool);
+        if (activeToolInfo === undefined)
+            return;
+        contextTitle.textContent = activeToolInfo[1];
+        contextHint.textContent = activeToolInfo[2];
+        const isBrush = brushTools.has(tool);
+        const isPaint = paintTools.has(tool);
+        brushGroup.hidden = isBrush === false;
+        toolInspectorEmpty.hidden = isBrush;
+        strokeSettings.hidden = isBrush === false;
+        symmetryInspectorSection.hidden = isBrush === false || tool === "move";
+        strokeInspectorEmpty.hidden = isBrush;
+        configure_strength_control(tool);
+        update_alternate_control();
+    }
+    const viewGroup = document.createElement("div");
+    viewGroup.className = "womp-mesh-editor-inspector-section";
+    viewGroup.setAttribute("role", "group");
+    viewGroup.setAttribute("aria-label", "Viewport display");
+    const vertices = make_check("Show vertices", false, "Show editable mesh vertices.");
+    const wireframe = make_check("Show wireframe", false, "Show the mesh wireframe.");
+    const smoothShading = make_check("Smooth shading", false, "Display the surface with smooth shading.");
+    const frameButton = button("Frame mesh", "Frame the mesh in the viewport.");
+    viewGroup.append(vertices.row, wireframe.row, smoothShading.row, frameButton);
+    viewInspector.appendChild(viewGroup);
+    const initialSymmetryEnabled = options.symmetry_enabled !== false;
+    const symmetryVertical = make_check("Vertical", initialSymmetryEnabled && options.symmetry_vertical !== false, "Mirror strokes from left to right.");
+    const symmetryHorizontal = make_check("Horizontal", initialSymmetryEnabled && options.symmetry_horizontal === true, "Mirror strokes from top to bottom.");
+    const symmetryInspectorSection = document.createElement("div");
+    symmetryInspectorSection.className = "womp-mesh-editor-inspector-section";
+    symmetryInspectorSection.setAttribute("role", "group");
+    symmetryInspectorSection.setAttribute("aria-label", "Stroke symmetry");
+    const symmetryHeading = document.createElement("div");
+    symmetryHeading.className = "womp-mesh-editor-field-heading";
+    symmetryHeading.textContent = "Symmetry";
+    const symmetryPlanes = document.createElement("div");
+    symmetryPlanes.className = "womp-mesh-editor-symmetry-planes";
+    symmetryPlanes.append(symmetryVertical.row, symmetryHorizontal.row);
+    symmetryInspectorSection.append(symmetryHeading, symmetryPlanes);
+    strokeInspector.appendChild(symmetryInspectorSection);
+    const cancelButton = button("Cancel", "Close the mesh editor without applying changes.", "womp-mesh-editor-button is-secondary");
+    const footerHint = document.createElement("div");
+    footerHint.className = "womp-mesh-editor-footer-hint";
+    footerHint.textContent = "Orbit: Alt or middle drag · Pan: right drag · Zoom: wheel";
+    const footerActions = document.createElement("div");
+    footerActions.className = "womp-mesh-editor-footer-actions";
+    footerActions.appendChild(cancelButton);
+    const footer = document.createElement("div");
+    footer.className = "womp-mesh-editor-footer";
+    footer.append(footerHint, footerActions);
+    root.append(header, panel, viewport, toolGroup, footer);
+    const hostContainer = options.container || document.body;
+    const previousDocumentOverflow = document.documentElement.style.overflow;
+    const previousBodyOverflow = document.body.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    hostContainer.appendChild(root);
+    const backgroundInertStates = new Map();
+    for (const element of Array.from(document.body.children)) {
+        if (element instanceof HTMLElement && element !== root && element.contains(root) === false) {
+            backgroundInertStates.set(element, element.inert);
+            element.inert = true;
+        }
+    }
+    root.focus();
+    let settled = false;
+    let settle = null;
+    let rejectSettle = null;
+    const resultPromise = new Promise((resolve, reject) => {
+        settle = resolve;
+        rejectSettle = reject;
+    });
+    let busy = false;
+    let canUndo = false;
+    let canRedo = false;
+    let editor;
+    const lockedControls = [
+        ...toolButtons.values(),
+        ...actionButtons.values(),
+        radius.input,
+        strength.input,
+        softness.input,
+        alternateButton,
+        color.input,
+        vertices.input,
+        wireframe.input,
+        smoothShading.input,
+        symmetryVertical.input,
+        symmetryHorizontal.input,
+        frameButton,
+        cancelButton,
+        commitButton,
+    ];
+    function sync_history_controls() {
+        undoButton.disabled = busy || canUndo === false;
+        redoButton.disabled = busy || canRedo === false;
+    }
+    function set_busy(nextBusy) {
+        busy = nextBusy;
+        root.dataset.busy = String(nextBusy);
+        root.setAttribute("aria-busy", String(nextBusy));
+        canvas.setAttribute("aria-disabled", String(nextBusy));
+        canvas.style.pointerEvents = nextBusy ? "none" : "";
+        commitButton.textContent = nextBusy ? "Applying…" : "Apply";
+        for (const control of lockedControls) {
+            control.disabled = nextBusy;
+        }
+        sync_history_controls();
+    }
+    set_busy(false);
+    try {
+        editor = new PortableMeshEditor({
+            THREE,
+            canvas,
+            symmetryEnabled: options.symmetry_enabled,
+            symmetryVertical: options.symmetry_vertical,
+            symmetryHorizontal: options.symmetry_horizontal,
+            onStatus: (message) => set_status("Mesh editing", message, "running"),
+            onHistoryChange: (historyState) => {
+                canUndo = historyState.canUndo;
+                canRedo = historyState.canRedo;
+                dirtyState.hidden = historyState.dirty === false;
+                configure_radius_control();
+                update_brush();
+                sync_history_controls();
+            },
+        });
+    }
+    catch (error) {
+        root.remove();
+        document.documentElement.style.overflow = previousDocumentOverflow;
+        document.body.style.overflow = previousBodyOverflow;
+        for (const [element, wasInert] of backgroundInertStates) {
+            element.inert = wasInert;
+        }
+        previouslyFocusedElement?.focus();
+        throw error;
+    }
+    function update_brush() {
+        const worldRadius = brush_radius_from_slider(radius.input);
+        const unitStep = Number(radius.input.dataset.unitStep);
+        const formattedRadius = format_model_unit_value(worldRadius, unitStep);
+        radius.output.textContent = formattedRadius;
+        radius.input.setAttribute("aria-valuetext", `${formattedRadius} model units`);
+        radius.input.setAttribute("aria-valuenow", formattedRadius);
+        const strengthValue = Number(strength.input.value);
+        strength.output.textContent = strengthValue.toFixed(2);
+        softness.output.textContent = Number(softness.input.value).toFixed(2);
+        if (brushTools.has(activeTool)) {
+            toolStrengths.set(activeTool, strengthValue);
+        }
+        editor.set_brush_world_radius(worldRadius, strengthValue, Number(softness.input.value));
+        editor.set_brush_color(color.input.value);
+    }
+    function sync_alternate_mode() {
+        update_alternate_control();
+        editor.set_brush_sub_mode(alternate_mode_enabled());
+    }
+    function configure_radius_control() {
+        const recommendedMinimum = editor.recommended_brush_radius_minimum();
+        const unitStep = brush_radius_unit_step(recommendedMinimum);
+        const minimum = Math.max(Math.ceil((recommendedMinimum / unitStep) - 0.0000001) * unitStep, unitStep);
+        const maximum = Math.max(Number((editor.brushReferenceRadius * 2).toPrecision(6)), 1, minimum);
+        const currentRadius = Math.min(Math.max(editor.active_brush_world_radius(), minimum), maximum);
+        const unitMinimum = Number(minimum.toPrecision(6));
+        const unitAnchor = Math.min(Math.max(1, unitMinimum), maximum);
+        radius.input.dataset.unitMin = String(unitMinimum);
+        radius.input.dataset.unitMax = String(maximum);
+        radius.input.dataset.unitAnchor = String(unitAnchor);
+        radius.input.dataset.unitStep = String(unitStep);
+        radius.input.min = "0";
+        radius.input.max = "1000";
+        radius.input.step = "1";
+        radius.input.setAttribute("aria-valuemin", String(unitMinimum));
+        radius.input.setAttribute("aria-valuemax", String(maximum));
+        set_brush_radius_slider(radius.input, currentRadius);
+        radius.row.title = `Brush radius in mesh coordinate units (${format_model_unit_value(unitMinimum, unitStep)}–${format_model_unit_value(maximum, unitStep)}).`;
+    }
+    function update_visuals() {
+        editor.set_visuals({
+            showVertices: vertices.input.checked,
+            showWireframe: wireframe.input.checked,
+            smoothShading: smoothShading.input.checked,
+        });
+    }
+    function cleanup() {
+        document.removeEventListener("keydown", on_key_down);
+        document.removeEventListener("keyup", on_key_up);
+        window.removeEventListener("blur", on_window_blur);
+        if (statusHideTimer !== null) {
+            window.clearTimeout(statusHideTimer);
+            statusHideTimer = null;
+        }
+        root.remove();
+        document.documentElement.style.overflow = previousDocumentOverflow;
+        document.body.style.overflow = previousBodyOverflow;
+        for (const [element, wasInert] of backgroundInertStates) {
+            element.inert = wasInert;
+        }
+        previouslyFocusedElement?.focus();
+        editor.dispose();
+    }
+    function close(result) {
+        if (settled)
+            return;
+        settled = true;
+        cleanup();
+        settle?.(result);
+    }
+    function fail(error) {
+        if (settled)
+            return;
+        settled = true;
+        cleanup();
+        rejectSettle?.(error);
+    }
+    function confirm_discard_mesh_changes() {
+        return editor.is_dirty() === false || window.confirm("Discard unsaved mesh edits?");
+    }
+    function on_key_down(event) {
+        if (event.key === "Control" && controlAlternateMode === false) {
+            controlAlternateMode = true;
+            sync_alternate_mode();
+        }
+        if (event.key === "Tab") {
+            const focusableElements = Array.from(root.querySelectorAll("button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex='-1'])")).filter((element) => element.hidden === false && element.closest("[hidden]") === null);
+            if (focusableElements.length > 0) {
+                const first = focusableElements[0];
+                const last = focusableElements[focusableElements.length - 1];
+                if (event.shiftKey && document.activeElement === first) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (event.shiftKey === false && document.activeElement === last) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+            return;
+        }
+        if (busy) {
+            event.preventDefault();
+            return;
+        }
+        const modifierPressed = event.ctrlKey || event.metaKey;
+        const key = event.key.toLowerCase();
+        const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+        const targetHandlesTextEditing = eventTarget instanceof HTMLInputElement ||
+            eventTarget instanceof HTMLTextAreaElement ||
+            eventTarget?.isContentEditable === true;
+        if (modifierPressed && event.altKey === false && targetHandlesTextEditing === false) {
+            if (key === "z") {
+                event.preventDefault();
+                if (event.shiftKey)
+                    editor.redo();
+                else
+                    editor.undo();
+                return;
+            }
+            if (key === "y") {
+                event.preventDefault();
+                editor.redo();
+                return;
+            }
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (confirm_discard_mesh_changes() === false)
+                return;
+            editor.cancel();
+            close({ action: "cancel" });
+        }
+    }
+    function on_key_up(event) {
+        if (event.key === "Control" && controlAlternateMode) {
+            controlAlternateMode = false;
+            sync_alternate_mode();
+        }
+    }
+    function on_window_blur() {
+        if (controlAlternateMode) {
+            controlAlternateMode = false;
+            sync_alternate_mode();
+        }
+    }
+    for (const [tool, toolButton] of toolButtons) {
+        toolButton.addEventListener("click", () => {
+            if (brushTools.has(activeTool)) {
+                toolStrengths.set(activeTool, Number(strength.input.value));
+            }
+            activeTool = tool;
+            editor.set_tool(tool);
+            set_active_tool(toolButtons, tool);
+            update_tool_context(tool);
+            sync_alternate_mode();
+            if (brushTools.has(tool)) {
+                update_brush();
+            }
+        });
+    }
+    for (const [action, actionButton] of actionButtons) {
+        actionButton.addEventListener("click", () => {
+            update_brush();
+            try {
+                if (action === "fill-vertices") {
+                    editor.fill_vertex_colors();
+                }
+                else {
+                    editor.fill_texture_colors();
+                }
+            }
+            catch (error) {
+                set_status("Fill failed", error instanceof Error ? error.message : String(error), "error");
+            }
+        });
+    }
+    alternateButton.addEventListener("click", () => {
+        persistentAlternateModes.set(activeTool, persistentAlternateModes.get(activeTool) !== true);
+        sync_alternate_mode();
+    });
+    radius.input.addEventListener("input", update_brush);
+    strength.input.addEventListener("input", update_brush);
+    softness.input.addEventListener("input", update_brush);
+    color.input.addEventListener("input", update_brush);
+    vertices.input.addEventListener("change", () => {
+        singleVertexToolSection?.toggleAttribute("hidden", vertices.input.checked === false);
+        if (vertices.input.checked === false && activeTool === "drag") {
+            activeTool = "view";
+            editor.set_tool(activeTool);
+            set_active_tool(toolButtons, activeTool);
+            update_tool_context(activeTool);
+            sync_alternate_mode();
+        }
+        update_visuals();
+    });
+    wireframe.input.addEventListener("change", update_visuals);
+    smoothShading.input.addEventListener("change", update_visuals);
+    const update_symmetry = () => {
+        const enabled = symmetryVertical.input.checked || symmetryHorizontal.input.checked;
+        editor.set_symmetry({
+            enabled,
+            vertical: symmetryVertical.input.checked,
+            horizontal: symmetryHorizontal.input.checked,
+        });
+    };
+    symmetryVertical.input.addEventListener("change", update_symmetry);
+    symmetryHorizontal.input.addEventListener("change", update_symmetry);
+    update_symmetry();
+    frameButton.addEventListener("click", () => editor.frame_mesh());
+    undoButton.addEventListener("click", () => {
+        editor.undo();
+    });
+    redoButton.addEventListener("click", () => {
+        editor.redo();
+    });
+    cancelButton.addEventListener("click", () => {
+        if (confirm_discard_mesh_changes() === false)
+            return;
+        editor.cancel();
+        close({ action: "cancel" });
+    });
+    commitButton.addEventListener("click", async () => {
+        if (busy)
+            return;
+        set_busy(true);
+        set_status("Apply changes", "Preparing the edited mesh...", "running", true);
+        try {
+            const result = {
+                action: "commit",
+                mode: "edit",
+                mesh: await editor.prepare_commit_async(),
+            };
+            await options.on_commit?.(result);
+            editor.accept_commit();
+            close(result);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            set_status("Could not apply changes", `${message} Fix the problem and try again.`, "error");
+            set_busy(false);
+            commitButton.focus();
+        }
+    });
+    document.addEventListener("keydown", on_key_down);
+    document.addEventListener("keyup", on_key_up);
+    window.addEventListener("blur", on_window_blur);
+    try {
+        set_status("Opening", "Preparing mesh tools...", "running", true);
+        editor.open_with_initial_tessellation(options.editable_mesh);
+        configure_radius_control();
+        update_tool_context(activeTool);
+        update_brush();
+        sync_alternate_mode();
+        update_visuals();
+        set_status("Mesh editing", "Mesh tools are ready.", "idle");
+        toolButtons.get(activeTool)?.focus();
+    }
+    catch (error) {
+        fail(error);
+    }
+    return resultPromise;
+}