index.html

{% extends "load.html" %}
{% block content %}
<style>
  body,
  .button,
  .input,
  select,
  textarea,
  .label,
  .navbar-item {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  }

  .title,
  .subtitle {
    font-family: 'Outfit', 'Inter', sans-serif !important;
  }

  .button {
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 209, 178, 0.2);
  }

  .button:active {
    transform: translateY(1px);
  }

  /* Keep Font Awesome glyph font intact */
  .fa,
  .fas,
  .far,
  .fal,
  .fab,
  [class^="fa-"],
  [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .tab-content {
    display: none;
  }

  .tab-content.is-active {
    display: block;
    animation: fadeIn 0.4s ease-out;
  }

  .preview-controls-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    pointer-events: auto;
  }

  .preview-controls-overlay .box {
    background-color: rgba(30, 30, 30, 0.9) !important;
    border: 1px solid #4a4a4a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .tabs li.is-active a {
    border-bottom-color: #00d1b2;
    color: #00d1b2;
  }

  .tabs li.is-disabled a {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
  }

  .katana-page {
    padding-top: 0;
  }

  .slicer-tab {
    position: relative;
  }

  .slicer-pane {
    position: relative;
    width: 100%;
    height: calc(100dvh - 220px);
    min-height: 360px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
  }

  .slicer-canvas {
    width: 100%;
    height: 100%;
  }

  .monitor-frame {
    width: 100%;
    border: 0;
    display: block;
  }

  .project-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .project-sidebar::-webkit-scrollbar-thumb {
    background: #00d1b2;
    border-radius: 3px;
  }

  .border-primary {
    border-color: rgba(0, 209, 178, 0.3) !important;
  }

  .border-primary:focus {
    border-color: #00d1b2 !important;
    box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25) !important;
  }

  .project-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .project-card:hover {
    transform: translateY(-5px);
    border-color: #00d1b2;
    box-shadow: 0 10px 20px rgba(0, 209, 178, 0.1);
  }

  .floating-tools {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0.5rem;
  }

  .floating-tools .button {
    width: 42px;
    height: 42px;
  }

  .workspace-sidebar {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    z-index: 100;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
  }

  .status-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    pointer-events: none;
    padding: 5px 15px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.3s ease;
  }

  .project-card {
    overflow: hidden;
  }

  .project-thumb {
    height: 150px;
    position: relative;
    border-bottom: 2px solid #00d1b2;
    background-color: #000;
    background-position: center center;
    background-size: cover;
  }

  .project-card-body {
    padding: 1.25rem;
  }

  .project-thumb-placeholder {
    height: 100%;
  }

  @keyframes dropzonePulse {
    0% {
      box-shadow: inset 0 0 0 2px rgba(0, 209, 178, 0.35), inset 0 0 60px rgba(0, 209, 178, 0.12);
    }

    50% {
      box-shadow: inset 0 0 0 2px rgba(0, 209, 178, 0.7), inset 0 0 90px rgba(0, 209, 178, 0.3);
    }

    100% {
      box-shadow: inset 0 0 0 2px rgba(0, 209, 178, 0.35), inset 0 0 60px rgba(0, 209, 178, 0.12);
    }
  }

  .dropzone-active {
    border-color: #00d1b2 !important;
    animation: dropzonePulse 1.5s infinite;
  }

  .dropzone-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 260;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.35);
  }

  .dropzone-overlay.is-active {
    display: flex;
  }

  .geometry-warning {
    position: absolute;
    top: 16px;
    right: 80px;
    z-index: 270;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    display: none;
  }

  .geometry-warning.is-active {
    display: block;
  }

  #settings-placeholder-modal {
    z-index: 300;
  }

  .modal {
    z-index: 500 !important;
  }

  .modal .modal-card,
  .modal .modal-card-title,
  .modal .modal-card-body,
  .modal .modal-card-body p,
  .modal .modal-card-body .label,
  .modal .modal-card-body .help,
  .modal .modal-card-body .content {
    color: #111 !important;
  }

  #new-project-modal .modal-card,
  #new-project-modal .modal-card-title,
  #new-project-modal .label,
  #new-project-modal .help,
  #new-project-modal .input {
    color: #111 !important;
  }

  .settings-mode-toggle .button.is-active {
    background-color: #00d1b2;
    border-color: #00d1b2;
    color: #111;
  }

  .slice-terminal {
    background: #0b0f10;
    color: #9fffa6;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    height: 340px;
    overflow: auto;
    border-radius: 8px;
    padding: 0.75rem;
    white-space: pre-wrap;
    border: 1px solid #1f2d2f;
  }

  .slice-plan-box {
    border: 1px solid rgba(0, 209, 178, 0.35);
    border-radius: 8px;
    padding: 0.75rem;
    background: rgba(0, 209, 178, 0.08);
  }

  /* ---- Preview tab ---- */
  .preview-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    text-align: center;
    gap: 0.75rem;
  }

  .preview-empty-state.is-hidden {
    display: none;
  }

  .preview-empty-state .icon {
    font-size: 3rem;
    color: #555;
  }

  /* ── Preview Bottom HUD ── */
  .preview-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 209, 178, 0.15);
    flex-wrap: wrap;
  }

  .preview-toolbar .meta-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .preview-toolbar .meta-item {
    font-size: 0.72rem;
    color: #999;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  .preview-toolbar .meta-item strong {
    color: #00d1b2;
    margin-right: 3px;
    font-weight: 600;
  }

  .preview-toolbar .actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  /* ── Vertical Layer Slider ── */
  .vertical-slider-wrap {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: rgba(14, 14, 14, 0.88);
    backdrop-filter: blur(14px);
    border-radius: 14px;
    border: 1px solid rgba(0, 209, 178, 0.12);
    z-index: 10;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  }

  .vertical-slider-wrap .layer-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .vertical-slider-wrap .tag {
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  input[type="range"].vertical-range {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 22px;
    height: 300px;
    accent-color: #00d1b2;
    cursor: pointer;
    background: transparent;
  }

  /* ── Layer Counter HUD (top-left) ── */
  .preview-layer-hud {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(14, 14, 14, 0.88);
    backdrop-filter: blur(14px);
    border-radius: 10px;
    border: 1px solid rgba(0, 209, 178, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    font-size: 0.78rem;
    color: #ccc;
    font-variant-numeric: tabular-nums;
  }

  .preview-layer-hud .hud-icon {
    color: #00d1b2;
    font-size: 0.85rem;
  }

  .preview-layer-hud .hud-current {
    color: #fff;
    font-weight: 700;
  }

  .preview-layer-hud .hud-sep {
    color: #555;
  }

  /* ── Layer Progress Slider (bottom center) ── */
  .preview-progress-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 74px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    backdrop-filter: blur(10px);
  }

  .preview-progress-range {
    width: 280px;
    accent-color: #00d1b2;
    cursor: pointer;
    background: transparent;
  }

  /* ── Loading Spinner ── */
  .preview-loading-spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 8;
    background: rgba(0, 0, 0, 0.6);
  }

  .preview-loading-spinner.is-active {
    display: flex;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .preview-loading-spinner .spinner-icon {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 209, 178, 0.2);
    border-top-color: #00d1b2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }


  .vertical-slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .vertical-range {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 26px;
    height: 220px;
  }

  @media screen and (max-width: 1023px) {
    .workspace-sidebar {
      position: static;
      width: auto;
      max-height: none;
      margin: 0.75rem;
    }

    .floating-tools {
      top: 12px;
      right: 12px;
    }
  }
</style>

<div class="tabs is-primary is-large">
  <ul>
    <li id="home-tab" class="is-active"><a onclick="switchTab('home')"><span class="icon is-small"><i
            class="fas fa-home"></i></span><span>Home</span></a></li>
    <li id="printers-tab" class="is-disabled"><a onclick="switchTab('printers')"><span class="icon is-small"><i
            class="fas fa-cube"></i></span><span>Slice</span></a></li>
    <li id="preview-tab" class="is-disabled"><a onclick="switchTab('preview')"><span class="icon is-small"><i
            class="fas fa-layer-group"></i></span><span>Preview</span></a></li>
    <li id="upload-tab" class="is-disabled"><a onclick="switchTab('upload')"><span class="icon is-small"><i
            class="fas fa-cloud-upload-alt"></i></span><span>Upload</span></a></li>
    <li id="videos-tab"><a onclick="switchTab('videos')"><span class="icon is-small"><i
            class="fas fa-video"></i></span><span>Monitor</span></a></li>
    <li id="documents-tab"><a onclick="switchTab('documents')"><span class="icon is-small"><i
            class="fas fa-cog"></i></span><span>Settings</span></a></li>
  </ul>
</div>

<div class="container is-fluid katana-page">
  <!-- HOME CONTENT -->
  <div id="home-content" class="tab-content is-active">
    <div class="level">
      <div class="level-left">
        <h2 class="title is-3 has-text-white">Recent Projects</h2>
      </div>
      <div class="level-right">
        <button class="button is-primary" onclick="createNewProject()">
          <span class="icon"><i class="fas fa-plus"></i></span><span>New Project</span>
        </button>
      </div>
    </div>
    <hr class="has-background-grey-dark">
    <div id="project-list" class="columns is-multiline">
      <div class="column is-12 has-text-centered py-6">
        <p class="has-text-grey">Loading projects...</p>
      </div>
    </div>
  </div>

  <!-- SLICE CONTENT -->
  <div id="printers-content" class="tab-content slicer-tab">
    <div id="slicer-viewport" class="slicer-pane">
      <div id="slicer-container" class="slicer-canvas"></div>
      <div id="dropzone-overlay" class="dropzone-overlay">
        <div class="notification is-primary is-light has-text-centered">
          <strong>Drop STL or 3MF Files to Upload</strong>
        </div>
      </div>
      <div id="geometry-warning" class="notification is-warning is-light geometry-warning"></div>
      <div class="floating-tools">
        <button id="tool-move" class="button is-dark is-small is-active" title="Move"
          onclick="setTransformMode('translate')">
          <span class="icon is-small"><i class="fas fa-arrows-alt"></i></span>
        </button>
        <button id="tool-rotate" class="button is-dark is-small" title="Rotate" onclick="setTransformMode('rotate')">
          <span class="icon is-small"><i class="fas fa-sync-alt"></i></span>
        </button>
        <button id="tool-scale" class="button is-dark is-small" title="Scale" onclick="setTransformMode('scale')">
          <span class="icon is-small"><i class="fas fa-expand-arrows-alt"></i></span>
        </button>
        <button class="button is-danger is-small" title="Delete Selected Model" onclick="deleteSelectedModel()">
          <span class="icon is-small"><i class="fas fa-trash"></i></span>
        </button>
      </div>

      <!-- FLOATING SIDEBAR -->
      <div id="workspace-sidebar" class="box project-sidebar workspace-sidebar">
        <h3 class="title is-5 has-text-primary mb-3"><i class="fas fa-cube mr-2"></i>Workspace</h3>

        <div class="field">
          <label class="label is-small has-text-grey-light">Project Name</label>
          <div class="control">
            <input id="active-project-name" class="input is-small has-background-black has-text-white border-primary"
              type="text" placeholder="Untitled Project" oninput="updateNavbarProjectName(this.value)">
          </div>
        </div>

        <div class="buttons">
          <button class="button is-primary is-small is-fullwidth" onclick="runSlice()"><span class="icon is-small"><i
                class="fas fa-layer-group"></i></span><span>Slice</span></button>
          <button id="support-paint-btn" class="button is-danger is-small is-fullwidth"
            onclick="toggleSupportPaint()"><span class="icon is-small"><i
                class="fas fa-paint-brush"></i></span><span>Paint Supports</span></button>
          <button class="button is-link is-small is-fullwidth" onclick="addProjectText()"><span class="icon is-small"><i
                class="fas fa-font"></i></span><span>Add Text</span></button>
          <button class="button is-warning is-small is-fullwidth" onclick="openSettingsPlaceholder()"><span
              class="icon is-small"><i class="fas fa-cog"></i></span><span>Open Settings</span></button>
          <button class="button is-info is-small is-fullwidth" onclick="saveActiveProject()"><span
              class="icon is-small"><i class="fas fa-save"></i></span><span>Save Project</span></button>
          <button class="button is-danger is-outlined is-small is-fullwidth" onclick="clearPlate()"><span
              class="icon is-small"><i class="fas fa-trash"></i></span><span>Clear Plate</span></button>
        </div>

        <div class="field mt-3">
          <label class="label is-small has-text-grey-light">Project Material</label>
          <div class="control">
            <div class="select is-small is-fullwidth">
              <select id="project-material-select" onchange="changeProjectMaterial(this.value)">
                <option value="pla">PLA</option>
                <option value="petg">PETG</option>
                <option value="abs">ABS</option>
                <option value="tpu">TPU</option>
              </select>
            </div>
          </div>
        </div>

        <div class="field mt-3">
          <label class="label is-small has-text-grey-light">Upload Model</label>
          <div class="file is-primary is-small is-fullwidth has-name">
            <label class="file-label">
              <input id="model-upload" class="file-input" type="file" name="model" accept=".stl,.3mf">
              <span class="file-cta">
                <span class="file-icon"><i class="fas fa-upload"></i></span>
                <span class="file-label">Choose STL/3MF...</span>
              </span>
              <span id="model-upload-name" class="file-name">No file selected</span>
            </label>
          </div>
        </div>

        <hr class="has-background-grey-dark my-3">

        <div class="field">
          <label class="label is-small has-text-grey-light">Plates</label>
          <div id="plate-controls" class="buttons are-small"></div>
          <button class="button is-small is-fullwidth is-dark" onclick="addNewPlate()"><span class="icon is-small"><i
                class="fas fa-folder-plus"></i></span><span>New Plate</span></button>
        </div>
      </div>

      <!-- STATUS OVERLAY -->
      <div id="status-overlay" class="status-overlay">
        <p id="slicer-status" class="is-size-7 has-text-grey-light">Ready</p>
      </div>
    </div>
  </div>

  <!-- PREVIEW CONTENT -->
  <div id="preview-content" class="tab-content slicer-tab">
    <div id="better-preview-container" class="slicer-pane" style="position: relative; background: #0a0a0a;">
      <canvas id="better-preview-canvas" style="width: 100%; height: 100%; display: block;"></canvas>

      <!-- Empty state -->
      <div id="preview-empty-state" class="preview-empty-state">
        <span class="icon is-large" style="color: #333;"><i class="fas fa-layer-group fa-3x"></i></span>
        <p class="has-text-grey mt-3" style="font-size:1.1rem;">No G-Code loaded</p>
        <p class="has-text-grey-dark is-size-7 mt-1">Slice a project first, then come back here to preview layers.</p>
      </div>

      <!-- Loading spinner -->
      <div id="preview-loading" class="preview-loading-spinner">
        <div class="spinner-icon"></div>
      </div>

      <!-- Layer Counter HUD (top-left) -->
      <div id="preview-layer-hud" class="preview-layer-hud" style="display:none;">
        <i class="fas fa-layer-group hud-icon"></i>
        <span>Layer</span>
        <span class="hud-current" id="hud-layer-current">0</span>
        <span class="hud-sep">/</span>
        <span id="hud-layer-total">0</span>
      </div>

      <!-- Vertical Layer Slider (right side) -->
      <div class="vertical-slider-wrap" id="preview-slider-wrap" style="display:none;">
        <span class="layer-label">Top</span>
        <span id="better-preview-layer-total" class="tag is-dark">0</span>
        <input id="better-preview-layer-slider" type="range" min="0" max="0" value="0"
          oninput="updatePreviewLayer(this.value)" class="vertical-range">
        <span id="better-preview-layer-current" class="tag is-primary">0</span>
        <span class="layer-label">Bot</span>
      </div>

      <!-- Horizontal Layer Progress Slider -->
      <div id="preview-progress-wrap" class="preview-progress-wrap" style="display:none;">
        <span class="tag is-dark">Layer Progress</span>
        <input id="preview-progress-slider" type="range" min="0" max="100" value="100"
          oninput="updatePreviewLayerProgress(this.value)" class="preview-progress-range">
        <span id="preview-progress-value" class="tag is-primary">100%</span>
      </div>

      <!-- Bottom HUD Toolbar -->
      <div id="better-preview-toolbar" class="preview-toolbar">
        <div id="preview-meta" class="meta-group">
          <span class="meta-item" id="preview-meta-layers"></span>
          <span class="meta-item" id="preview-meta-size"></span>
          <span class="meta-item" id="preview-meta-height"></span>
        </div>

        <div class="actions-group">
          <div id="preview-plate-wrap" class="field is-grouped is-grouped-multiline" style="display:none; align-items:center;">
            <div class="control">
              <div class="select is-small">
                <select id="preview-plate-select" onchange="onPreviewPlateChange()"></select>
              </div>
            </div>
          </div>
          <button class="button is-small is-primary is-outlined" onclick="loadLatestGCode()">
            <span class="icon is-small"><i class="fas fa-sync-alt"></i></span><span>Refresh</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- UPLOAD CONTENT -->
  <div id="upload-content" class="tab-content">
    <div class="box has-background-black-ter has-text-white">
      <h3 class="title is-4 has-text-white mb-3"><i class="fas fa-cloud-upload-alt mr-2"></i>Upload to Printer</h3>
      <p class="has-text-grey mb-4">Send the sliced G-code to your configured printer.</p>
      <div id="upload-plate-wrap" class="field is-grouped is-grouped-multiline" style="display:none; align-items:center;">
        <div class="control">
          <div class="select is-small">
            <select id="upload-plate-select" onchange="onUploadPlateChange()"></select>
          </div>
        </div>
      </div>
      <div class="buttons">
        <button class="button is-primary" onclick="uploadLatestGCodeToPrinter()">
          <span class="icon is-small"><i class="fas fa-paper-plane"></i></span><span>Upload G-code</span>
        </button>
      </div>
      <p id="upload-status" class="has-text-grey mt-3"></p>
    </div>
  </div>

  <div id="videos-content" class="tab-content">
    <!-- MONITOR TAB -->
    <!-- iFrame courtesy of HTML Basix - www.htmlbasix.com -->
    <iframe name='iframe1' src='{{ipaddress}}' id='iframe1' class='iframe1 monitor-frame' scrolling='auto'>
    </iframe>
    <!-- End iFrame -->
  </div>
  <div id="documents-content" class="tab-content">
    <p class="text-white">Documents</p>
  </div>
</div>

<div id="new-project-modal" class="modal">
  <div class="modal-background" onclick="closeCreateProjectModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Create New Project</p>
      <button class="delete" aria-label="close" onclick="closeCreateProjectModal()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">Project Name</label>
        <div class="control">
          <input id="new-project-name-input" class="input" type="text" maxlength="120" placeholder="Untitled Project">
        </div>
      </div>
      <p class="help">Choose a project name to unlock the Slice workspace.</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary" onclick="submitCreateProjectModal()">Create Project</button>
      <button class="button" onclick="closeCreateProjectModal()">Cancel</button>
    </footer>
  </div>
</div>

<div id="settings-placeholder-modal" class="modal">
  <div class="modal-background" onclick="closeSettingsPlaceholder()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Settings</p>
      <button class="delete" aria-label="close" onclick="closeSettingsPlaceholder()"></button>
    </header>
    <section class="modal-card-body">
      <p class="is-size-7 has-text-grey mb-4">These settings are stored per project and used to generate
        <code>./settings/&lt;project&gt;.ini</code> when you press Slice.
      </p>
      <div class="field mb-4">
        <label class="label is-small">Settings Mode</label>
        <div class="buttons has-addons settings-mode-toggle">
          <button id="settings-mode-easy" type="button" class="button is-small is-active"
            onclick="setSettingsMode('easy')">Easy</button>
          <button id="settings-mode-expert" type="button" class="button is-small"
            onclick="setSettingsMode('expert')">Expert</button>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-6">
          <label class="label is-small">Nozzle Temp (C)</label>
          <input id="p3r-temperature" class="input is-small" type="number" min="0" max="500">
        </div>
        <div class="column is-6">
          <label class="label is-small">Bed Temp (C)</label>
          <input id="p3r-bed-temperature" class="input is-small" type="number" min="0" max="200">
        </div>
        <div class="column is-6">
          <label class="label is-small">Layer Height (mm)</label>
          <input id="p3r-layer-height" class="input is-small" type="number" step="0.01" min="0.05">
        </div>
        <div class="column is-6">
          <label class="label is-small">First Layer Height (mm)</label>
          <input id="p3r-first-layer-height" class="input is-small" type="number" step="0.01" min="0.05">
        </div>
        <div class="column is-6">
          <label class="label is-small">Fill Density (%)</label>
          <input id="p3r-fill-density" class="input is-small" type="number" min="0" max="100">
          <input id="p3r-fill-density-slider" class="slider is-fullwidth mt-2" type="range" min="0" max="100" step="1">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Infill Pattern</label>
          <div class="select is-small is-fullwidth">
            <select id="p3r-infill-pattern">
              <option value="grid">Grid</option>
              <option value="rectilinear">Rectilinear</option>
              <option value="lines">Lines</option>
              <option value="triangles">Triangles</option>
              <option value="stars">Stars</option>
              <option value="cubic">Cubic</option>
              <option value="gyroid">Gyroid</option>
              <option value="honeycomb">Honeycomb</option>
              <option value="concentric">Concentric</option>
              <option value="adaptive_cubic">Adaptive Cubic</option>
            </select>
          </div>
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">First Layer Temp (C)</label>
          <input id="p3r-first-layer-temperature" class="input is-small" type="number" min="0" max="500">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">First Layer Bed Temp (C)</label>
          <input id="p3r-first-layer-bed-temperature" class="input is-small" type="number" min="0" max="200">
        </div>
        <div class="column is-4">
          <label class="label is-small">Perimeters</label>
          <input id="p3r-perimeters" class="input is-small" type="number" min="1" max="10">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Wall Thickness (mm)</label>
          <input id="p3r-wall-thickness" class="input is-small" type="number" step="0.01" min="0">
        </div>
        <div class="column is-4">
          <label class="label is-small">Top Layers</label>
          <input id="p3r-top-layers" class="input is-small" type="number" min="0" max="20">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Top Thickness (mm)</label>
          <input id="p3r-top-thickness" class="input is-small" type="number" step="0.01" min="0">
        </div>
        <div class="column is-4">
          <label class="label is-small">Bottom Layers</label>
          <input id="p3r-bottom-layers" class="input is-small" type="number" min="0" max="20">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Bottom Thickness (mm)</label>
          <input id="p3r-bottom-thickness" class="input is-small" type="number" step="0.01" min="0">
        </div>
        <div class="column is-4">
          <label class="label is-small">Print Speed (mm/s)</label>
          <input id="p3r-print-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">First Layer Speed (mm/s)</label>
          <input id="p3r-first-layer-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Perimeter Speed (mm/s)</label>
          <input id="p3r-perimeter-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Small Perimeter Speed (mm/s)</label>
          <input id="p3r-small-perimeter-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-4">
          <label class="label is-small">Travel Speed (mm/s)</label>
          <input id="p3r-travel-speed" class="input is-small" type="number" min="1" max="1000">
        </div>
        <div class="column is-4">
          <label class="label is-small">Infill Speed (mm/s)</label>
          <input id="p3r-infill-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Bridge Speed (mm/s)</label>
          <input id="p3r-bridge-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-6">
          <label class="label is-small">Retraction Length (mm)</label>
          <input id="p3r-retraction-length" class="input is-small" type="number" step="0.1" min="0" max="50">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Retraction Speed (mm/s)</label>
          <input id="p3r-retract-speed" class="input is-small" type="number" min="1" max="200">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Skirts</label>
          <input id="p3r-skirts" class="input is-small" type="number" min="0" max="10">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Brims</label>
          <input id="p3r-brims" class="input is-small" type="number" min="0" max="30">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Rafts</label>
          <input id="p3r-rafts" class="input is-small" type="number" min="0" max="10">
        </div>
        <div class="column is-6">
          <label class="label is-small">Support</label>
          <div class="select is-small is-fullwidth">
            <select id="p3r-support">
              <option value="none">None</option>
              <option value="bed">Bed</option>
              <option value="everywhere">Everywhere</option>
            </select>
          </div>
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Angle (deg)</label>
          <input id="p3r-support-angle" class="input is-small" type="number" min="0" max="90">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Density (%)</label>
          <input id="p3r-support-density" class="input is-small" type="number" min="0" max="100">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Interface Layers</label>
          <input id="p3r-support-interface-layers" class="input is-small" type="number" min="0" max="10">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Z Distance (mm)</label>
          <input id="p3r-support-z-distance" class="input is-small" type="number" step="0.01" min="0">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support XY Distance (mm)</label>
          <input id="p3r-support-xy-distance" class="input is-small" type="number" step="0.01" min="0">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Pattern</label>
          <div class="select is-small is-fullwidth">
            <select id="p3r-support-pattern">
              <option value="grid">Grid</option>
              <option value="lines">Lines</option>
              <option value="zigzag">Zigzag</option>
              <option value="concentric">Concentric</option>
              <option value="rectilinear">Rectilinear</option>
              <option value="honeycomb">Honeycomb</option>
              <option value="gyroid">Gyroid</option>
              <option value="triangles">Triangles</option>
              <option value="stars">Stars</option>
              <option value="cubic">Cubic</option>
              <option value="snug">Snug</option>
              <option value="tree">Tree</option>
            </select>
          </div>
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Speed (mm/s)</label>
          <input id="p3r-support-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-6" data-expert-setting="true">
          <label class="label is-small">Support Interface Speed (mm/s)</label>
          <input id="p3r-support-interface-speed" class="input is-small" type="number" min="1" max="500">
        </div>
        <div class="column is-6">
          <label class="label is-small">Seam</label>
          <div class="select is-small is-fullwidth">
            <select id="p3r-seam">
              <option value="aligned">Aligned</option>
              <option value="nearest">Nearest</option>
              <option value="random">Random</option>
              <option value="rear">Rear</option>
            </select>
          </div>
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Fan Speed (%)</label>
          <input id="p3r-cool-fan-speed" class="input is-small" type="number" min="0" max="100">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Fan Max (%)</label>
          <input id="p3r-cool-fan-speed-max" class="input is-small" type="number" min="0" max="100">
        </div>
        <div class="column is-4" data-expert-setting="true">
          <label class="label is-small">Fan Min (%)</label>
          <input id="p3r-cool-fan-speed-min" class="input is-small" type="number" min="0" max="100">
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary" onclick="saveSettingsPlaceholder()">Save Settings</button>
      <button class="button" onclick="closeSettingsPlaceholder()">Close</button>
    </footer>
  </div>
</div>

<div id="add-text-modal" class="modal">
  <div class="modal-background" onclick="closeAddTextModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Add Text Label</p>
      <button class="delete" aria-label="close" onclick="closeAddTextModal()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">Text</label>
        <div class="control">
          <input id="add-text-input" class="input" type="text" maxlength="80" placeholder="Enter text">
        </div>
      </div>
      <div class="field">
        <label class="label">Style</label>
        <div class="control">
          <div class="select is-fullwidth">
            <select id="add-text-mode-select">
              <option value="emboss">Emboss (Raised)</option>
              <option value="deboss">Deboss (Engraved)</option>
            </select>
          </div>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary" onclick="submitAddTextModal()">Add</button>
      <button class="button" onclick="closeAddTextModal()">Cancel</button>
    </footer>
  </div>
</div>

<div id="message-modal" class="modal">
  <div class="modal-background" onclick="closeMessageModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p id="message-modal-title" class="modal-card-title">Notice</p>
      <button class="delete" aria-label="close" onclick="closeMessageModal()"></button>
    </header>
    <section class="modal-card-body">
      <p id="message-modal-body"></p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary" onclick="closeMessageModal()">OK</button>
    </footer>
  </div>
</div>

<div id="confirm-modal" class="modal">
  <div class="modal-background" onclick="closeConfirmModal(false)"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p id="confirm-modal-title" class="modal-card-title">Confirm</p>
      <button class="delete" aria-label="close" onclick="closeConfirmModal(false)"></button>
    </header>
    <section class="modal-card-body">
      <p id="confirm-modal-body"></p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-danger" onclick="closeConfirmModal(true)">Confirm</button>
      <button class="button" onclick="closeConfirmModal(false)">Cancel</button>
    </footer>
  </div>
</div>

<div id="slice-plan-modal" class="modal">
  <div class="modal-background" onclick="closeSlicePlanModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Slice Plan</p>
      <button class="delete" aria-label="close" onclick="closeSlicePlanModal()"></button>
    </header>
    <section class="modal-card-body">
      <div id="slice-plan-summary" class="slice-plan-box"></div>
      <p class="is-size-7 has-text-grey mt-3">This step only prepares files and commands. It does not run Print3r yet.
      </p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary" onclick="confirmSlicePreparation()">Start Prep</button>
      <button class="button" onclick="closeSlicePlanModal()">Cancel</button>
    </footer>
  </div>
</div>

<div id="slice-terminal-modal" class="modal">
  <div class="modal-background" onclick="closeSliceTerminalModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Slice Log</p>
      <button class="delete" aria-label="close" onclick="closeSliceTerminalModal()"></button>
    </header>
    <section class="modal-card-body">
      <div id="slice-terminal-output" class="slice-terminal"></div>
    </section>
    <footer class="modal-card-foot">
      <button id="slice-start-btn" class="button is-primary" onclick="startPreparedSlice()" disabled>Start
        Slice</button>
      <button class="button" onclick="closeSliceTerminalModal()">Close</button>
    </footer>
  </div>
</div>

<script>
  let slicer = null;
  let slicerInitPromise = null;
  let previewer = null;
  let previewerInitPromise = null;
  let projectReady = false;
  let suppressAutosave = false;
  let autosaveTimer = null;
  let autosaveInFlight = false;
  let lastAutosaveAt = 0;
  let createProjectModalResolve = null;
  let addTextModalResolve = null;
  let dragDepth = 0;
  let supportPaintActive = false;
  let preparedSliceCommands = [];
  let previewPlateIndex = 0;
  let previewLayerProgress = 100;
  let uploadPlateIndex = 0;
  let uploadReady = false;
  let preparedSliceProfile = '';
  let sliceRunning = false;
  let currentGCodePath = null;
  const PRINT3R_SETTINGS_KEY_PREFIX = 'katana_print3r_settings::';
  const SETTINGS_MODE_KEY = 'katana_settings_mode';
  let settingsMode = localStorage.getItem(SETTINGS_MODE_KEY) || 'easy';

  function getPinnedProjects() {
    try {
      const raw = localStorage.getItem('katana_pinned_projects');
      const parsed = raw ? JSON.parse(raw) : [];
      return Array.isArray(parsed) ? parsed : [];
    } catch (e) {
      return [];
    }
  }

  function setPinnedProjects(pinned) {
    localStorage.setItem('katana_pinned_projects', JSON.stringify(pinned));
  }

  function isPinnedProject(filename) {
    return getPinnedProjects().includes(filename);
  }

  function toggleProjectPin(filename) {
    const pinned = getPinnedProjects();
    const idx = pinned.indexOf(filename);
    if (idx >= 0) {
      pinned.splice(idx, 1);
    } else {
      pinned.push(filename);
    }
    setPinnedProjects(pinned);
    loadProjectList();
  }

  function setSliceAccess(enabled) {
    const sliceTab = document.getElementById('printers-tab');
    const previewTab = document.getElementById('preview-tab');
    const uploadTab = document.getElementById('upload-tab');
    if (!sliceTab) return;
    projectReady = enabled;
    sliceTab.classList.toggle('is-disabled', !enabled);
    if (previewTab) previewTab.classList.toggle('is-disabled', !enabled);
    if (!enabled) {
      uploadReady = false;
      if (uploadTab) uploadTab.classList.add('is-disabled');
    }
    if (!enabled && (sliceTab.classList.contains('is-active') || (previewTab && previewTab.classList.contains('is-active')) || (uploadTab && uploadTab.classList.contains('is-active')))) {
      switchTab('home');
    }
  }

  function setUploadAccess(enabled) {
    const uploadTab = document.getElementById('upload-tab');
    uploadReady = !!enabled;
    if (uploadTab) uploadTab.classList.toggle('is-disabled', !uploadReady);
    if (!uploadReady && uploadTab && uploadTab.classList.contains('is-active')) {
      switchTab('home');
    }
  }


  function switchTab(tabName) {
    if (tabName === 'printers' && !projectReady) {
      showMessageModal('Create or open a project first.');
      return;
    }
    if (tabName === 'upload' && (!projectReady || !uploadReady)) {
      showMessageModal('Slice a project first to unlock Upload.');
      return;
    }
    document.querySelectorAll('.tabs li').forEach(t => t.classList.remove('is-active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('is-active'));
    document.getElementById(tabName + '-tab').classList.add('is-active');
    document.getElementById(tabName + '-content').classList.add('is-active');
    localStorage.setItem('katana_last_tab', tabName);

    if (tabName === 'printers') {
      ensureSlicer().then(() => {
        resizeSlicerViewport();
        setTimeout(resizeSlicerViewport, 60);
        if (slicer) {
          slicer.onResize();
          requestAnimationFrame(() => slicer.onResize());
        }
      });
    }
    if (tabName === 'preview') {
      ensurePreviewer().then(() => {
        resizePreviewViewport();
        if (betterPreviewer) betterPreviewer.onResize();
        // Delayed resize to ensure canvas picks up correct dimensions after tab transition
        setTimeout(() => {
          resizePreviewViewport();
          if (betterPreviewer) betterPreviewer.onResize();
        }, 100);
        updatePreviewPlateControls();
        setPreviewLayerProgress(previewLayerProgress, true);
        loadLatestGCode();
      });
    }
    if (tabName === 'upload') {
      updateUploadPlateControls();
    }
    if (tabName === 'videos') {
      resizeMonitorFrame();
      setTimeout(resizeMonitorFrame, 60);
    }
  }

  function queueAutosave() {
    if (suppressAutosave || !projectReady) return;
    if (autosaveTimer) clearTimeout(autosaveTimer);
    autosaveTimer = setTimeout(() => {
      performAutosave(true);
    }, 2500);
  }

  async function performAutosave(silent = true) {
    if (suppressAutosave || !projectReady || !slicer || autosaveInFlight) return;
    autosaveInFlight = true;

    const nameInput = document.getElementById('active-project-name');
    const name = (nameInput && nameInput.value.trim()) || 'Untitled Project';
    const status = document.getElementById('slicer-status');

    try {
      const response = await fetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name,
          previous_filename: localStorage.getItem('katana_last_project'),
          data: {
            models: slicer.exportState(),
            thumbnail: slicer.getScreenshot(),
            gcode_path: currentGCodePath
          }
        })
      });
      const result = await response.json();
      if (result.success) {
        localStorage.setItem('katana_last_project', result.filename);
        lastAutosaveAt = Date.now();
        if (status) status.textContent = silent ? `Autosaved ${new Date().toLocaleTimeString()}` : `Saved at ${new Date().toLocaleTimeString()}`;
        if (!silent) loadProjectList();
      } else if (!silent) {
        showMessageModal("Save failed: " + result.error, "Save Error");
      } else if (status) {
        status.textContent = 'Autosave failed';
      }
    } catch (err) {
      if (!silent) {
        showMessageModal("Error saving: " + err.message, "Save Error");
      } else if (status) {
        status.textContent = 'Autosave failed';
      }
    } finally {
      autosaveInFlight = false;
    }
  }

  function updateNavbarProjectName(name) {
    const navbarItem = document.querySelector('.navbar-brand .navbar-item:last-child p');
    if (navbarItem) {
      navbarItem.textContent = "Current Project: " + (name || 'Untitled');
    }
  }

  function bindGlobalShortcuts() {
    document.addEventListener('keydown', async (event) => {
      const isSave = (event.key === 's' || event.key === 'S') && (event.ctrlKey || event.metaKey);
      if (!isSave) return;
      event.preventDefault();
      event.stopPropagation();
      if (!projectReady) {
        showMessageModal('Create or open a project first.', 'Save Project');
        return;
      }
      await saveActiveProject();
      const status = document.getElementById('slicer-status');
      if (status) status.textContent = `Saved via keyboard shortcut at ${new Date().toLocaleTimeString()}`;
    }, true);
  }

  document.addEventListener('DOMContentLoaded', async () => {
    bindGlobalShortcuts();
    setSliceAccess(false);
    switchTab('home');
    loadProjectList();

    const lastProject = localStorage.getItem('katana_last_project');
    if (lastProject) {
      await openProject(lastProject, false);
    }

    const lastTab = localStorage.getItem('katana_last_tab') || 'home';
    if (lastTab === 'printers' && projectReady) {
      switchTab('printers');
      await ensureSlicer();
    } else {
      switchTab('home');
    }

    const uploadInput = document.getElementById('model-upload');
    const uploadName = document.getElementById('model-upload-name');
    if (uploadInput && uploadName) {
      uploadInput.addEventListener('change', async (event) => {
        const file = event.target.files && event.target.files[0];
        uploadName.textContent = file ? file.name : 'No file selected';
        if (file) {
          await uploadModelFile(file);
          uploadInput.value = '';
        }
      });
    }

    const nameInput = document.getElementById('active-project-name');
    if (nameInput) {
      nameInput.addEventListener('input', () => queueAutosave());
    }

    const materialSelect = document.getElementById('project-material-select');
    if (materialSelect) {
      materialSelect.addEventListener('change', () => queueAutosave());
    }

    window.setInterval(() => {
      if (!projectReady || !slicer) return;
      if (Date.now() - lastAutosaveAt < 25000) return;
      performAutosave(true);
    }, 30000);

    const modalInput = document.getElementById('new-project-name-input');
    if (modalInput) {
      modalInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
          event.preventDefault();
          submitCreateProjectModal();
        }
        if (event.key === 'Escape') {
          event.preventDefault();
          closeCreateProjectModal();
        }
      });
    }
    const addTextInput = document.getElementById('add-text-input');
    if (addTextInput) {
      addTextInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
          event.preventDefault();
          submitAddTextModal();
        }
        if (event.key === 'Escape') {
          event.preventDefault();
          closeAddTextModal();
        }
      });
    }
    initDragDropUpload();
    window.addEventListener('resize', () => {
      resizeSlicerViewport();
      resizePreviewViewport();
      resizeMonitorFrame();
      if (slicer) slicer.onResize();
      if (previewer) previewer.onResize();
    });
    resizeSlicerViewport();
    resizePreviewViewport();
    resizeMonitorFrame();
  });

  function resizeSlicerViewport() {
    const pane = document.getElementById('slicer-viewport');
    if (!pane) return;
    const rect = pane.getBoundingClientRect();
    const minHeight = 320;
    const nextHeight = Math.max(minHeight, Math.ceil(window.innerHeight - rect.top));
    pane.style.height = `${nextHeight}px`;
  }

  function resizePreviewViewport() {
    const pane = document.getElementById('better-preview-container');
    if (!pane) return;
    const rect = pane.getBoundingClientRect();
    const minHeight = 320;
    const nextHeight = Math.max(minHeight, Math.ceil(window.innerHeight - rect.top));
    pane.style.height = `${nextHeight}px`;
  }

  function resizeMonitorFrame() {
    const frame = document.getElementById('iframe1');
    if (!frame) return;
    const rect = frame.getBoundingClientRect();
    const minHeight = 320;
    const nextHeight = Math.max(minHeight, Math.ceil(window.innerHeight - rect.top));
    frame.style.height = `${nextHeight}px`;
  }

  function setDropzoneActive(active) {
    const pane = document.getElementById('slicer-viewport');
    const overlay = document.getElementById('dropzone-overlay');
    if (pane) pane.classList.toggle('dropzone-active', active);
    if (overlay) overlay.classList.toggle('is-active', active);
  }

  async function handleDroppedFiles(fileList) {
    if (!fileList || fileList.length === 0) return;
    await ensureSlicer();
    const files = Array.from(fileList);
    for (const file of files) {
      const name = file.name.toLowerCase();
      if (!(name.endsWith('.stl') || name.endsWith('.3mf'))) {
        continue;
      }
      await uploadModelFile(file);
    }
  }

  function initDragDropUpload() {
    const pane = document.getElementById('slicer-viewport');
    if (!pane) return;

    pane.addEventListener('dragenter', (event) => {
      event.preventDefault();
      if (!projectReady) return;
      dragDepth += 1;
      setDropzoneActive(true);
    });

    pane.addEventListener('dragover', (event) => {
      event.preventDefault();
      if (!projectReady) return;
      event.dataTransfer.dropEffect = 'copy';
      setDropzoneActive(true);
    });

    pane.addEventListener('dragleave', (event) => {
      event.preventDefault();
      if (!projectReady) return;
      dragDepth = Math.max(0, dragDepth - 1);
      if (dragDepth === 0) {
        setDropzoneActive(false);
      }
    });

    pane.addEventListener('drop', async (event) => {
      event.preventDefault();
      dragDepth = 0;
      setDropzoneActive(false);
      if (!projectReady) {
        showMessageModal('Create or open a project first.');
        return;
      }
      await handleDroppedFiles(event.dataTransfer.files);
    });
  }

  function openCreateProjectModal(defaultName) {
    const modal = document.getElementById('new-project-modal');
    const input = document.getElementById('new-project-name-input');
    if (!modal || !input) return Promise.resolve(null);

    input.value = defaultName || '';
    modal.classList.add('is-active');
    requestAnimationFrame(() => {
      input.focus();
      input.select();
    });

    return new Promise((resolve) => {
      createProjectModalResolve = resolve;
    });
  }

  function closeCreateProjectModal(name = null) {
    const modal = document.getElementById('new-project-modal');
    if (modal) modal.classList.remove('is-active');
    if (createProjectModalResolve) {
      const resolve = createProjectModalResolve;
      createProjectModalResolve = null;
      resolve(name);
    }
  }

  function submitCreateProjectModal() {
    const input = document.getElementById('new-project-name-input');
    const name = input ? input.value.trim() : '';
    if (!name) return;
    closeCreateProjectModal(name);
  }

  function openAddTextModal(defaultText = "") {
    const modal = document.getElementById('add-text-modal');
    const input = document.getElementById('add-text-input');
    if (!modal || !input) return Promise.resolve(null);
    input.value = defaultText;
    modal.classList.add('is-active');
    requestAnimationFrame(() => {
      input.focus();
      input.select();
    });
    return new Promise((resolve) => {
      addTextModalResolve = resolve;
    });
  }

  function closeAddTextModal(payload = null) {
    const modal = document.getElementById('add-text-modal');
    if (modal) modal.classList.remove('is-active');
    if (addTextModalResolve) {
      const resolve = addTextModalResolve;
      addTextModalResolve = null;
      resolve(payload);
    }
  }

  function submitAddTextModal() {
    const input = document.getElementById('add-text-input');
    const modeSelect = document.getElementById('add-text-mode-select');
    const text = input ? input.value.trim() : '';
    if (!text) return;
    closeAddTextModal({
      text,
      mode: modeSelect ? modeSelect.value : "emboss"
    });
  }

  function showMessageModal(message, title = "Notice") {
    const modal = document.getElementById('message-modal');
    const body = document.getElementById('message-modal-body');
    const titleEl = document.getElementById('message-modal-title');
    if (!modal || !body || !titleEl) return;
    titleEl.textContent = title;
    body.textContent = message;
    modal.classList.add('is-active');
  }

  function closeMessageModal() {
    const modal = document.getElementById('message-modal');
    if (modal) modal.classList.remove('is-active');
  }

  let confirmModalResolve = null;

  function showConfirmModal(message, title = "Confirm") {
    const modal = document.getElementById('confirm-modal');
    const body = document.getElementById('confirm-modal-body');
    const titleEl = document.getElementById('confirm-modal-title');
    if (!modal || !body || !titleEl) return Promise.resolve(false);
    titleEl.textContent = title;
    body.textContent = message;
    modal.classList.add('is-active');
    return new Promise((resolve) => {
      confirmModalResolve = resolve;
    });
  }

  function closeConfirmModal(confirmed) {
    const modal = document.getElementById('confirm-modal');
    if (modal) modal.classList.remove('is-active');
    if (confirmModalResolve) {
      confirmModalResolve(!!confirmed);
      confirmModalResolve = null;
    }
  }

  function openSliceTerminalModal() {
    const modal = document.getElementById('slice-terminal-modal');
    if (modal) modal.classList.add('is-active');
  }

  function closeSliceTerminalModal() {
    const modal = document.getElementById('slice-terminal-modal');
    if (modal) modal.classList.remove('is-active');
  }

  function clearSliceTerminal() {
    const out = document.getElementById('slice-terminal-output');
    if (!out) return;
    out.textContent = '';
  }

  function appendSliceTerminal(line = '') {
    const out = document.getElementById('slice-terminal-output');
    if (!out) return;
    const text = String(line);
    out.textContent += text.endsWith('\n') ? text : `${text}\n`;
    out.scrollTop = out.scrollHeight;
  }

  function setSliceStartEnabled(enabled) {
    const btn = document.getElementById('slice-start-btn');
    if (!btn) return;
    btn.disabled = !enabled;
    if (!enabled) {
      btn.classList.remove('is-loading');
    }
  }

  function setSliceStartLoading(loading) {
    const btn = document.getElementById('slice-start-btn');
    if (!btn) return;
    btn.classList.toggle('is-loading', !!loading);
    btn.disabled = !!loading;
  }

  async function openSlicePlanModal() {
    if (!projectReady) {
      showMessageModal('Create or open a project first.', 'Slice');
      return;
    }
    const modal = document.getElementById('slice-plan-modal');
    const summary = document.getElementById('slice-plan-summary');
    if (!modal || !summary) return;

    const projectName = getActiveProjectName();
    const projectFilename = localStorage.getItem('katana_last_project') || '';
    let modelCount = 0;
    let plateCount = 1;

    if (projectFilename) {
      try {
        const response = await fetch(`/api/projects/${projectFilename}`);
        const project = await response.json();
        const modelBlock = project && project.models ? project.models : {};
        const models = Array.isArray(modelBlock.models) ? modelBlock.models : [];
        modelCount = models.length;
        plateCount = Math.max(1, parseInt(modelBlock.plateCount || 1, 10));
      } catch (err) {
        modelCount = 0;
        plateCount = 1;
      }
    }

    summary.innerHTML = [
      `<p><strong>Project:</strong> ${projectName}</p>`,
      `<p><strong>Profile Target:</strong> ./settings/printer/${projectName.replace(/\s+/g, '_')}.ini</p>`,
      `<p><strong>Detected Models:</strong> ${modelCount}</p>`,
      `<p><strong>Detected Plates:</strong> ${plateCount}</p>`,
      `<hr class="my-2">`,
      `<p>1. Generate/update the Print3r profile INI from Settings.</p>`,
      `<p>2. Bake model transforms into <code>./baked/&lt;project&gt;/plate_n/</code>.</p>`,
      `<p>3. Build one Print3r command per populated plate.</p>`,
      `<p>4. Show full prep log and command lines.</p>`
    ].join('');

    modal.classList.add('is-active');
  }

  function closeSlicePlanModal() {
    const modal = document.getElementById('slice-plan-modal');
    if (modal) modal.classList.remove('is-active');
  }

  function confirmSlicePreparation() {
    closeSlicePlanModal();
    runSliceGenerateProfile({ autoStart: false });
  }

  async function ensureSlicer() {
    if (slicer) return slicer;
    if (slicerInitPromise) return slicerInitPromise;
    slicerInitPromise = initSlicer().finally(() => { slicerInitPromise = null; });
    return slicerInitPromise;
  }

  async function initSlicer() {
    const container = document.getElementById('slicer-container');
    if (!container) return;
    if (slicer) return slicer;

    try {
      const { default: SlicerUI } = await import('/static/placer.js');
      const configRes = await fetch('/api/config');
      const config = await configRes.json();
      const printer = config.selected_printer || {};
      const bed = printer.bed_size || [220, 220, 250];

      slicer = new SlicerUI(container, {
        plateSize: Math.max(bed[0], bed[1]),
        buildHeight: bed[2] || 250
      });
      slicer.onValidationChange = (issues) => updateGeometryWarning(issues);
      const materialSelect = document.getElementById('project-material-select');
      if (materialSelect) {
        materialSelect.value = slicer.getProjectMaterial();
      }
      resizeSlicerViewport();
      slicer.onStateChange = () => queueAutosave();
      slicer.onResize();
      requestAnimationFrame(() => slicer && slicer.onResize());

      // Restore last project
      const lastProject = localStorage.getItem('katana_last_project');
      if (lastProject) {
        openProject(lastProject, false); // false = don't switch tab
      }

      updatePlateButtons();
      return slicer;
    } catch (err) {
      console.error("3.JS LOAD FAILURE:", err);
      document.getElementById('slicer-status').textContent = "ERROR: Three.js Failed to Load";
      return null;
    }
  }

  // ── Local Native Preview: using custom local Three.js parser ──
  let betterPreviewer = null;
  let betterPreviewInitPromise = null;

  async function ensurePreviewer() {
    if (betterPreviewer) return betterPreviewer;
    if (betterPreviewInitPromise) return betterPreviewInitPromise;
    betterPreviewInitPromise = initPreviewer().finally(() => { betterPreviewInitPromise = null; });
    return betterPreviewInitPromise;
  }

  async function initPreviewer() {
    const container = document.getElementById('better-preview-container');
    const canvas = document.getElementById('better-preview-canvas');
    if (!container || !canvas) return null;
    if (betterPreviewer) return betterPreviewer;

    try {
      // Import our local PreviewUI module dynamically
      const PreviewUIModule = await import('/static/preview.js');
      const PreviewUI = PreviewUIModule.default;

      // Fetch printer bed config
      let plateX = 220, plateY = 220, buildH = 250;
      try {
        const cfgRes = await fetch('/api/config');
        const cfg = await cfgRes.json();
        const bed = cfg?.selected_printer?.bed_size || [220, 220, 250];
        plateX = bed[0] || 220;
        plateY = bed[1] || 220;
        buildH = bed[2] || 250;
      } catch (_) { /* use defaults */ }

      const nativeViewer = new PreviewUI(canvas, {
        plateSize: plateX,
        buildHeight: buildH,
        extrusionColor: 0x00d1b2,
        travelColor: 0x222222,
        backgroundColor: 0x0a0a0a
      });

      // Adapter wrapping the viewer with a clean API
      class GCodePreviewAdapter {
        constructor(v) { this._viewer = v; }
        onResize() { this._viewer.onResize(); }
        clear() { this._viewer.clear(); }
        setLayer(idx) { this._viewer.setLayer(idx); }
        setLayerProgress(progress) { this._viewer.setLayerProgress(progress); }
        getLayerCount() { return this._viewer.getLayerCount(); }
        toggleTubes(show) { this._viewer.toggleTubes(show); }
        async loadGCode(gcode) {
          await this._viewer.processGCode(gcode);
          return this.getLayerCount();
        }
        resize() { this.onResize(); }
      }

      betterPreviewer = new GCodePreviewAdapter(nativeViewer);
      console.log('[katana] local PreviewUI initialized');
      return betterPreviewer;
    } catch (err) {
      console.error('[katana] preview init failed:', err);
      return null;
    }
  }

  function updatePreviewLayer(value) {
    const idx = parseInt(value, 10);
    if (betterPreviewer) {
      betterPreviewer.setLayer(idx);
      const currentLabel = document.getElementById('better-preview-layer-current');
      if (currentLabel) currentLabel.textContent = idx + 1;
      // Update the HUD chip
      const hudCurrent = document.getElementById('hud-layer-current');
      if (hudCurrent) hudCurrent.textContent = idx + 1;
      setPreviewLayerProgress(previewLayerProgress, true);
      return;
    }
    if (previewer) {
      previewer.setLayer(idx);
      const currentLabel = document.getElementById('preview-layer-current');
      if (currentLabel) currentLabel.textContent = idx + 1;
      setPreviewLayerProgress(previewLayerProgress, true);
    }
  }

  function updatePreviewLayerProgress(value) {
    setPreviewLayerProgress(parseInt(value, 10), false);
  }

  function setPreviewLayerProgress(value, syncSlider) {
    const clamped = Math.max(0, Math.min(100, Number(value)));
    previewLayerProgress = isNaN(clamped) ? 100 : clamped;
    const slider = document.getElementById('preview-progress-slider');
    const label = document.getElementById('preview-progress-value');
    if (syncSlider && slider) slider.value = previewLayerProgress;
    if (label) label.textContent = `${previewLayerProgress}%`;
    const pct = previewLayerProgress / 100;
    if (betterPreviewer && betterPreviewer.setLayerProgress) {
      betterPreviewer.setLayerProgress(pct);
    }
  }

  function setPreviewEmptyState(visible) {
    const el = document.getElementById('preview-empty-state');
    if (el) el.classList.toggle('is-hidden', !visible);
  }

  function setPreviewLoading(active) {
    const el = document.getElementById('preview-loading');
    if (el) el.classList.toggle('is-active', active);
  }

  function updatePreviewMeta(metadata) {
    const layersEl = document.getElementById('preview-meta-layers');
    const sizeEl = document.getElementById('preview-meta-size');
    const heightEl = document.getElementById('preview-meta-height');
    if (layersEl) layersEl.innerHTML = metadata && metadata.layers ? `<strong>Layers:</strong> ${metadata.layers}` : '';
    if (sizeEl) sizeEl.innerHTML = metadata && metadata.maxX ? `<strong>Footprint:</strong> ${metadata.maxX} × ${metadata.maxY} mm` : '';
    if (heightEl) heightEl.innerHTML = metadata && metadata.maxZ ? `<strong>Height:</strong> ${metadata.maxZ} mm` : '';
  }

  function updatePreviewPlateControls() {
    const wrap = document.getElementById('preview-plate-wrap');
    const select = document.getElementById('preview-plate-select');
    if (!wrap || !select) return;

    const count = Array.isArray(preparedSliceCommands) ? preparedSliceCommands.length : 0;
    if (count <= 1) {
      wrap.style.display = 'none';
      select.innerHTML = '';
      previewPlateIndex = 0;
      return;
    }

    wrap.style.display = 'inline-flex';
    const options = [];
    for (let i = 0; i < count; i += 1) {
      options.push(`<option value="${i}">Plate ${i + 1}</option>`);
    }
    select.innerHTML = options.join('');
    previewPlateIndex = Math.max(0, Math.min(previewPlateIndex, count - 1));
    select.value = String(previewPlateIndex);
  }

  function onPreviewPlateChange() {
    const select = document.getElementById('preview-plate-select');
    if (!select) return;
    const idx = parseInt(select.value, 10);
    previewPlateIndex = Number.isInteger(idx) ? idx : 0;
    loadLatestGCode();
  }

  function updateUploadPlateControls() {
    const wrap = document.getElementById('upload-plate-wrap');
    const select = document.getElementById('upload-plate-select');
    if (!wrap || !select) return;

    const count = Array.isArray(preparedSliceCommands) ? preparedSliceCommands.length : 0;
    if (count <= 1) {
      wrap.style.display = 'none';
      select.innerHTML = '';
      uploadPlateIndex = 0;
      return;
    }

    wrap.style.display = 'inline-flex';
    const options = [];
    for (let i = 0; i < count; i += 1) {
      options.push(`<option value="${i}">Plate ${i + 1}</option>`);
    }
    select.innerHTML = options.join('');
    uploadPlateIndex = Math.max(0, Math.min(uploadPlateIndex, count - 1));
    select.value = String(uploadPlateIndex);
  }

  function onUploadPlateChange() {
    const select = document.getElementById('upload-plate-select');
    if (!select) return;
    const idx = parseInt(select.value, 10);
    uploadPlateIndex = Number.isInteger(idx) ? idx : 0;
  }

  function resolveUploadGCodeFilename() {
    if (window.preparedSliceCommands && window.preparedSliceCommands.length > 0) {
      const idx = Math.max(0, Math.min(uploadPlateIndex, window.preparedSliceCommands.length - 1));
      const fullPath = window.preparedSliceCommands[idx].output_gcode;
      return fullPath.split(/[\\\/]/).pop();
    }
    if (currentGCodePath) {
      return currentGCodePath.split(/[\\\/]/).pop();
    }
    const slug = getActiveProjectName().toLowerCase().replace(/[^a-z0-9]/g, '_');
    return `${slug}.gcode`;
  }

  async function uploadLatestGCodeToPrinter() {
    const statusEl = document.getElementById('upload-status');
    if (!uploadReady || !projectReady) {
      showMessageModal('Slice a project first to unlock Upload.');
      return;
    }
    const filename = resolveUploadGCodeFilename();
    if (!filename) {
      showMessageModal('No G-code found to upload.', 'Upload');
      return;
    }
    if (statusEl) statusEl.textContent = `Uploading ${filename}...`;
    try {
      const res = await fetch('/api/gcode/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filename })
      });
      const data = await res.json();
      if (!data.success) {
        throw new Error(data.error || 'Upload failed');
      }
      if (statusEl) statusEl.textContent = `Uploaded: ${filename}`;
    } catch (err) {
      if (statusEl) statusEl.textContent = 'Upload failed';
      showMessageModal(`Upload failed: ${err.message}`, 'Upload');
    }
  }

  function resolveGCodeUrl() {
    if (window.preparedSliceCommands && window.preparedSliceCommands.length > 0) {
      const idx = Math.max(0, Math.min(previewPlateIndex, window.preparedSliceCommands.length - 1));
      const fullPath = window.preparedSliceCommands[idx].output_gcode;
      return `/api/print3r/gcode/${fullPath.split(/[\\\/]/).pop()}`;
    }
    if (currentGCodePath) {
      return `/api/print3r/gcode/${currentGCodePath.split(/[\\\/]/).pop()}`;
    }
    const slug = getActiveProjectName().toLowerCase().replace(/[^a-z0-9]/g, '_');
    return `/api/print3r/gcode/${slug}.gcode`;
  }

  async function loadLatestGCode() {
    if (!projectReady) return;
    await ensurePreviewer();

    const gcodeUrl = resolveGCodeUrl();
    const statusEl = document.getElementById('slicer-status');
    const sliderWrap = document.getElementById('preview-slider-wrap');
    const layerHud = document.getElementById('preview-layer-hud');
    const progressWrap = document.getElementById('preview-progress-wrap');

    setPreviewLoading(true);
    setPreviewEmptyState(false);
    updatePreviewMeta(null);
    // Hide controls while loading
    if (sliderWrap) sliderWrap.style.display = 'none';
    if (layerHud) layerHud.style.display = 'none';
    if (progressWrap) progressWrap.style.display = 'none';

    try {
      const response = await fetch(gcodeUrl);
      if (!response.ok) {
        setPreviewLoading(false);
        setPreviewEmptyState(true);
        if (statusEl) statusEl.textContent = response.status === 500 ? 'Server error loading G-code' : 'G-Code not found';
        return;
      }
      const gcode = await response.text();

      // Also fetch metadata from the preview API if possible
      const filename = gcodeUrl.split('/').pop();
      let metadata = null;
      try {
        const metaRes = await fetch(`/api/gcode/preview/${filename}`);
        if (metaRes.ok) {
          const metaJson = await metaRes.json();
          if (metaJson.success && metaJson.metadata) {
            metadata = {
              layers: metaJson.metadata.layer_count,
              maxX: metaJson.metadata.max_x,
              maxY: metaJson.metadata.max_y,
              maxZ: metaJson.metadata.max_z,
              lines: metaJson.metadata.line_count
            };
          }
        }
      } catch (_) { /* metadata is optional */ }

      // Load into whichever previewer is available
      let layerCount = 0;
      if (betterPreviewer) {
        layerCount = (await betterPreviewer.loadGCode(gcode)) || 0;
      } else if (previewer) {
        layerCount = (await previewer.loadGCode(gcode)) || 0;
      }

      const total = Math.max(0, layerCount - 1);
      const totalDisplay = Math.max(0, layerCount);

      // Update slider
      const slider = document.getElementById('better-preview-layer-slider');
      const totalLabel = document.getElementById('better-preview-layer-total');
      const currentLabel = document.getElementById('better-preview-layer-current');
      if (slider) { slider.max = total; slider.value = total; }
      if (totalLabel) totalLabel.textContent = totalDisplay;
      if (currentLabel) currentLabel.textContent = totalDisplay;

      // Update HUD chip
      const hudCurrent = document.getElementById('hud-layer-current');
      const hudTotal = document.getElementById('hud-layer-total');
      if (hudCurrent) hudCurrent.textContent = totalDisplay;
      if (hudTotal) hudTotal.textContent = totalDisplay;

      // Show the slider and HUD if we have layers
      if (layerCount > 0) {
        if (sliderWrap) sliderWrap.style.display = 'flex';
        if (layerHud) layerHud.style.display = 'flex';
        if (progressWrap) progressWrap.style.display = 'flex';
        setPreviewLayerProgress(previewLayerProgress, true);
      }

      if (metadata) {
        updatePreviewMeta(metadata);
      } else {
        updatePreviewMeta({ layers: layerCount, maxX: null, maxY: null, maxZ: null });
      }

      setPreviewEmptyState(false);
      if (statusEl) statusEl.textContent = `Preview loaded: ${layerCount} layers`;
    } catch (err) {
      console.warn('Could not load G-code:', err.message);
      setPreviewEmptyState(true);
      if (sliderWrap) sliderWrap.style.display = 'none';
      if (layerHud) layerHud.style.display = 'none';
      if (progressWrap) progressWrap.style.display = 'none';
      if (statusEl) statusEl.textContent = 'No G-Code found for preview. Slice your project first.';
    } finally {
      setPreviewLoading(false);
    }
  }

  async function loadProjectList() {
    const listDiv = document.getElementById('project-list');
    if (!listDiv) return;

    try {
      const response = await fetch('/api/projects');
      const projects = await response.json();
      const pinned = new Set(getPinnedProjects());
      const sortedProjects = [...projects].sort((a, b) => {
        const aPinned = pinned.has(a.filename) ? 1 : 0;
        const bPinned = pinned.has(b.filename) ? 1 : 0;
        if (aPinned !== bPinned) return bPinned - aPinned;
        const aDate = new Date(a.modified).getTime() || 0;
        const bDate = new Date(b.modified).getTime() || 0;
        return bDate - aDate;
      });

      if (sortedProjects.length === 0) {
        listDiv.innerHTML = '<div class="column is-12 has-text-centered py-6"><p class="has-text-grey">No projects found.</p></div>';
        return;
      }

      listDiv.innerHTML = sortedProjects.map(p => `
        <div class="column is-4">
          <div class="box has-background-grey-darker p-0 project-card">
            <div class="project-thumb" style="background-image: url('${p.thumbnail || ''}')">
              ${!p.thumbnail ? '<div class="has-text-grey-darker is-flex is-align-items-center is-justify-content-center project-thumb-placeholder"><i class="fas fa-cube fa-3x"></i></div>' : ''}
            </div>
            <div class="project-card-body">
              <h3 class="title is-5 has-text-white mb-1" title="${p.name}">${p.name}${isPinnedProject(p.filename) ? ' <span class="icon has-text-warning is-small"><i class="fas fa-thumbtack"></i></span>' : ''}</h3>
              <p class="is-size-7 has-text-grey-light mb-4"><i class="far fa-clock mr-1"></i>${p.modified}</p>
              <div class="buttons">
                <button class="button is-small ${isPinnedProject(p.filename) ? 'is-warning' : 'is-dark'}" onclick="toggleProjectPin('${p.filename}')"><span class="icon is-small"><i class="fas fa-thumbtack"></i></span></button>
                <button class="button is-small is-primary is-light" onclick="openProject('${p.filename}')"><span class="icon is-small"><i class="fas fa-folder-open"></i></span><span>Open</span></button>
                <button class="button is-small is-danger is-outlined" onclick="deleteProject('${p.filename}')"><span class="icon is-small"><i class="fas fa-trash"></i></span></button>
              </div>
            </div>
          </div>
        </div>
      `).join('');
    } catch (err) {
      listDiv.innerHTML = `<div class="notification is-danger">Error: ${err.message}</div>`;
    }
  }

  async function openProject(filename, doSwitch = true) {
    try {
      suppressAutosave = true;
      const response = await fetch(`/api/projects/${filename}`);
      const project = await response.json();
      if (!project || project.success === false) {
        throw new Error(project && project.error ? project.error : 'Project not found');
      }

      localStorage.setItem('katana_last_project', filename);
      setSliceAccess(true);
      setUploadAccess(false);
      document.getElementById('active-project-name').value = project.name;
      updateNavbarProjectName(project.name);
      currentGCodePath = project.gcode_path || null;

      if (doSwitch) switchTab('printers');

      if (slicer && project.models) {
        await slicer.importState(project.models);
        const materialSelect = document.getElementById('project-material-select');
        if (materialSelect) materialSelect.value = slicer.getProjectMaterial();
      }
    } catch (err) {
      if (doSwitch) setSliceAccess(false);
      console.error("Error opening project:", err);
    } finally {
      suppressAutosave = false;
    }
  }

  async function createNewProject() {
    const defaultName = `Project ${new Date().toLocaleString()}`;
    const name = await openCreateProjectModal(defaultName);
    if (!name || !name.trim()) return;

    try {
      const response = await fetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), data: { models: [], thumbnail: '' } })
      });
      const result = await response.json();
      if (!result.success) {
        showMessageModal('Create project failed: ' + (result.error || 'unknown error'), 'Create Project');
        return;
      }

      localStorage.setItem('katana_last_project', result.filename);
      setSliceAccess(true);
      setUploadAccess(false);
      currentGCodePath = null;
      const nameInput = document.getElementById('active-project-name');
      if (nameInput) nameInput.value = name.trim();
      updateNavbarProjectName(name.trim());
      await ensureSlicer();
      switchTab('printers');
      loadProjectList();
    } catch (err) {
      showMessageModal('Create project failed: ' + err.message, 'Create Project');
    }
  }

  async function saveActiveProject() {
    await performAutosave(false);
  }

  async function deleteProject(filename) {
    const confirmed = await showConfirmModal("Delete this project?", "Delete Project");
    if (!confirmed) return;
    try {
      const res = await fetch(`/api/projects/${filename}`, { method: 'DELETE' });
      const data = await res.json();
      if (data.success) {
        if (localStorage.getItem('katana_last_project') === filename) {
          localStorage.removeItem('katana_last_project');
          setSliceAccess(false);
          setUploadAccess(false);
          switchTab('home');
          updateNavbarProjectName('None');
        }
        loadProjectList();
      }
    } catch (err) { showMessageModal("Delete failed", "Delete Project"); }
  }

  async function uploadModelFile(file) {
    if (!file) return;
    await ensureSlicer();
    if (!slicer) return;

    const status = document.getElementById('slicer-status');
    if (status) status.textContent = 'Uploading model...';

    try {
      const formData = new FormData();
      formData.append('file', file);
      const response = await fetch('/api/upload_model', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      if (!result.success) {
        throw new Error(result.error || 'Upload failed');
      }
      const models = Array.isArray(result.models) && result.models.length > 0
        ? result.models
        : (result.url ? [{ url: result.url, filename: file.name }] : []);
      if (models.length === 0) {
        throw new Error('No models found in uploaded file');
      }
      for (const model of models) {
        slicer.loadFromUrl(model.url, model.filename || file.name);
      }
      if (status) {
        status.textContent = models.length === 1
          ? `Loaded ${models[0].filename || file.name}`
          : `Loaded ${models.length} models from ${file.name}`;
      }
    } catch (err) {
      if (status) status.textContent = 'Upload failed';
      showMessageModal(`Upload failed: ${err.message}`, "Upload Error");
    }
  }

  async function clearPlate() {
    const confirmed = await showConfirmModal("Clear plate?", "Clear Plate");
    if (confirmed && slicer) {
      slicer.clearModels();
      queueAutosave();
    }
  }

  function addNewPlate() { if (slicer) { slicer.addPlate(); updatePlateButtons(); queueAutosave(); } }

  function updatePlateButtons() {
    const container = document.getElementById('plate-controls');
    if (!container || !slicer) return;
    container.innerHTML = slicer.plates.map((p, i) => `
      <button class="button ${slicer.activePlateIndex === i ? 'is-primary' : 'is-dark'}" onclick="focusPlate(${i})">${i + 1}</button>
    `).join('');
  }

  function focusPlate(index) {
    if (slicer) {
      slicer.focusPlate(index);
      updatePlateButtons();
    }
  }

  function setTransformMode(mode) {
    if (!slicer) return;
    supportPaintActive = false;
    const supportBtn = document.getElementById('support-paint-btn');
    if (supportBtn) supportBtn.classList.remove('is-warning');
    slicer.setTransformMode(mode);
    ['move', 'rotate', 'scale'].forEach(tool => {
      const btn = document.getElementById(`tool-${tool}`);
      if (!btn) return;
      btn.classList.toggle('is-active', (
        (tool === 'move' && mode === 'translate') ||
        (tool === 'rotate' && mode === 'rotate') ||
        (tool === 'scale' && mode === 'scale')
      ));
    });
  }

  function toggleSupportPaint() {
    if (!slicer) return;
    supportPaintActive = !supportPaintActive;
    const btn = document.getElementById('support-paint-btn');
    if (btn) {
      btn.classList.toggle('is-warning', supportPaintActive);
    }
    slicer.setToolMode(supportPaintActive ? 'supportPaint' : 'transform');
    const status = document.getElementById('slicer-status');
    if (status) {
      status.textContent = supportPaintActive
        ? 'Support paint mode: click faces to mark support, shift-click to erase'
        : 'Support paint mode off';
    }
  }

  async function addProjectText() {
    if (!slicer) return;
    const payload = await openAddTextModal('');
    if (!payload || !payload.text || !payload.text.trim()) return;
    slicer.startTextPlacement(payload.text.trim(), payload.mode || "emboss");
    const status = document.getElementById('slicer-status');
    if (status) {
      status.textContent = `Click a model surface to place ${payload.mode === 'deboss' ? 'debossed' : 'embossed'} text`;
    }
  }

  function changeProjectMaterial(materialKey) {
    if (!slicer) return;
    slicer.setProjectMaterial(materialKey);
    queueAutosave();
  }

  function deleteSelectedModel() {
    if (!slicer) return;
    slicer.removeSelectedModel();
    queueAutosave();
  }

  function updateGeometryWarning(issues) {
    const warning = document.getElementById('geometry-warning');
    if (!warning) return;
    if (!issues || !issues.hasIssues) {
      warning.classList.remove('is-active');
      warning.textContent = '';
      return;
    }

    const parts = [];
    if (issues.offPlate && issues.offPlate.length > 0) {
      parts.push(`Off plate: ${issues.offPlate.slice(0, 3).join(', ')}${issues.offPlate.length > 3 ? '…' : ''}`);
    }
    if (issues.colliding && issues.colliding.length > 0) {
      parts.push(`Collision: ${issues.colliding.slice(0, 3).join(', ')}${issues.colliding.length > 3 ? '…' : ''}`);
    }
    warning.textContent = parts.join(' | ');
    warning.classList.add('is-active');
  }

  function runSlice() {
    runSliceGenerateProfile({ autoStart: true });
  }

  function getActiveProjectName() {
    const input = document.getElementById('active-project-name');
    const value = input ? input.value.trim() : '';
    return value || 'Untitled Project';
  }

  function getPrint3rSettingsKey() {
    const filename = localStorage.getItem('katana_last_project');
    if (filename && filename.trim()) {
      return PRINT3R_SETTINGS_KEY_PREFIX + filename.trim();
    }
    return PRINT3R_SETTINGS_KEY_PREFIX + getActiveProjectName();
  }

  function collectPrint3rSettingsFromForm() {
    const num = (id) => {
      const el = document.getElementById(id);
      if (!el) return null;
      if (el.value === '') return null;
      return Number(el.value);
    };
    const txt = (id) => {
      const el = document.getElementById(id);
      if (!el) return null;
      return el.value;
    };
    return {
      temperature: num('p3r-temperature'),
      bed_temperature: num('p3r-bed-temperature'),
      layer_height: num('p3r-layer-height'),
      first_layer_height: num('p3r-first-layer-height'),
      first_layer_temperature: num('p3r-first-layer-temperature'),
      first_layer_bed_temperature: num('p3r-first-layer-bed-temperature'),
      fill_density: num('p3r-fill-density'),
      infill_pattern: txt('p3r-infill-pattern'),
      perimeters: num('p3r-perimeters'),
      wall_thickness: num('p3r-wall-thickness'),
      top_layers: num('p3r-top-layers'),
      top_thickness: num('p3r-top-thickness'),
      bottom_layers: num('p3r-bottom-layers'),
      bottom_thickness: num('p3r-bottom-thickness'),
      print_speed: num('p3r-print-speed'),
      first_layer_speed: num('p3r-first-layer-speed'),
      perimeter_speed: num('p3r-perimeter-speed'),
      small_perimeter_speed: num('p3r-small-perimeter-speed'),
      travel_speed: num('p3r-travel-speed'),
      infill_speed: num('p3r-infill-speed'),
      bridge_speed: num('p3r-bridge-speed'),
      retraction_length: num('p3r-retraction-length'),
      retract_speed: num('p3r-retract-speed'),
      skirts: num('p3r-skirts'),
      brims: num('p3r-brims'),
      rafts: num('p3r-rafts'),
      support: txt('p3r-support'),
      support_angle: num('p3r-support-angle'),
      support_density: num('p3r-support-density'),
      support_interface_layers: num('p3r-support-interface-layers'),
      support_z_distance: num('p3r-support-z-distance'),
      support_xy_distance: num('p3r-support-xy-distance'),
      support_pattern: txt('p3r-support-pattern'),
      support_speed: num('p3r-support-speed'),
      support_interface_speed: num('p3r-support-interface-speed'),
      seam: txt('p3r-seam'),
      cool_fan_speed: num('p3r-cool-fan-speed'),
      cool_fan_speed_max: num('p3r-cool-fan-speed-max'),
      cool_fan_speed_min: num('p3r-cool-fan-speed-min')
    };
  }

  function applyPrint3rSettingsToForm(settings = {}) {
    const set = (id, key) => {
      const el = document.getElementById(id);
      if (!el) return;
      const value = settings[key];
      if (value === undefined || value === null) return;
      el.value = String(value);
    };
    set('p3r-temperature', 'temperature');
    set('p3r-bed-temperature', 'bed_temperature');
    set('p3r-layer-height', 'layer_height');
    set('p3r-first-layer-height', 'first_layer_height');
    set('p3r-first-layer-temperature', 'first_layer_temperature');
    set('p3r-first-layer-bed-temperature', 'first_layer_bed_temperature');
    set('p3r-fill-density', 'fill_density');
    set('p3r-infill-pattern', 'infill_pattern');
    set('p3r-perimeters', 'perimeters');
    set('p3r-wall-thickness', 'wall_thickness');
    set('p3r-top-layers', 'top_layers');
    set('p3r-top-thickness', 'top_thickness');
    set('p3r-bottom-layers', 'bottom_layers');
    set('p3r-bottom-thickness', 'bottom_thickness');
    set('p3r-print-speed', 'print_speed');
    set('p3r-first-layer-speed', 'first_layer_speed');
    set('p3r-perimeter-speed', 'perimeter_speed');
    set('p3r-small-perimeter-speed', 'small_perimeter_speed');
    set('p3r-travel-speed', 'travel_speed');
    set('p3r-infill-speed', 'infill_speed');
    set('p3r-bridge-speed', 'bridge_speed');
    set('p3r-retraction-length', 'retraction_length');
    set('p3r-retract-speed', 'retract_speed');
    set('p3r-skirts', 'skirts');
    set('p3r-brims', 'brims');
    set('p3r-rafts', 'rafts');
    set('p3r-support', 'support');
    set('p3r-seam', 'seam');
    set('p3r-support-angle', 'support_angle');
    set('p3r-support-density', 'support_density');
    set('p3r-support-interface-layers', 'support_interface_layers');
    set('p3r-support-z-distance', 'support_z_distance');
    set('p3r-support-xy-distance', 'support_xy_distance');
    set('p3r-support-pattern', 'support_pattern');
    set('p3r-support-speed', 'support_speed');
    set('p3r-support-interface-speed', 'support_interface_speed');
    set('p3r-cool-fan-speed', 'cool_fan_speed');
    set('p3r-cool-fan-speed-max', 'cool_fan_speed_max');
    set('p3r-cool-fan-speed-min', 'cool_fan_speed_min');
    syncFillDensitySlider();
  }

  function syncFillDensitySlider() {
    const numberInput = document.getElementById('p3r-fill-density');
    const slider = document.getElementById('p3r-fill-density-slider');
    if (!numberInput || !slider) return;
    const value = Math.max(0, Math.min(100, Number(numberInput.value || 0)));
    numberInput.value = String(value);
    slider.value = String(value);
  }

  function getMaterialPrint3rOverrides(materialKey) {
    const profiles = {
      pla: {
        temperature: 205,
        bed_temperature: 60,
        first_layer_temperature: 210,
        first_layer_bed_temperature: 60,
        cool_fan_speed: 100,
        cool_fan_speed_max: 100,
        cool_fan_speed_min: 35
      },
      petg: {
        temperature: 240,
        bed_temperature: 80,
        first_layer_temperature: 245,
        first_layer_bed_temperature: 85,
        cool_fan_speed: 40,
        cool_fan_speed_max: 60,
        cool_fan_speed_min: 0
      },
      abs: {
        temperature: 245,
        bed_temperature: 100,
        first_layer_temperature: 250,
        first_layer_bed_temperature: 105,
        cool_fan_speed: 0,
        cool_fan_speed_max: 0,
        cool_fan_speed_min: 0
      },
      tpu: {
        temperature: 225,
        bed_temperature: 50,
        first_layer_temperature: 230,
        first_layer_bed_temperature: 55,
        cool_fan_speed: 60,
        cool_fan_speed_max: 80,
        cool_fan_speed_min: 20
      }
    };
    return profiles[materialKey] || profiles.pla;
  }

  function applyMaterialOverrides(settings, materialKey) {
    const overrides = getMaterialPrint3rOverrides(materialKey);
    return Object.assign({}, settings, overrides);
  }

  function setSettingsMode(mode) {
    settingsMode = (mode === 'expert') ? 'expert' : 'easy';
    localStorage.setItem(SETTINGS_MODE_KEY, settingsMode);

    const easyBtn = document.getElementById('settings-mode-easy');
    const expertBtn = document.getElementById('settings-mode-expert');
    if (easyBtn) easyBtn.classList.toggle('is-active', settingsMode === 'easy');
    if (expertBtn) expertBtn.classList.toggle('is-active', settingsMode === 'expert');

    document.querySelectorAll('[data-expert-setting="true"]').forEach((el) => {
      el.style.display = (settingsMode === 'expert') ? '' : 'none';
    });
  }

  async function fetchPrint3rDefaultSettings() {
    const response = await fetch('/api/print3r/default_settings');
    const result = await response.json();
    if (!result || result.success === false) {
      throw new Error(result && result.error ? result.error : 'Failed to load defaults');
    }
    return result.settings || {};
  }

  async function loadPrint3rSettingsForCurrentProject() {
    const defaults = await fetchPrint3rDefaultSettings();
    let saved = {};
    try {
      const raw = localStorage.getItem(getPrint3rSettingsKey());
      saved = raw ? JSON.parse(raw) : {};
    } catch (err) {
      saved = {};
    }
    return Object.assign({}, defaults, saved);
  }

  async function runSliceGenerateProfile({ autoStart = true } = {}) {
    if (!projectReady) {
      showMessageModal('Create or open a project first.', 'Slice');
      return;
    }
    const sliceBtn = document.querySelector('button[onclick="runSlice()"]');
    if (sliceBtn) sliceBtn.classList.add('is-loading');

    const status = document.getElementById('slicer-status');
    if (status) status.textContent = "Preparing slice...";

    try {
      preparedSliceCommands = [];
      preparedSliceProfile = '';
      updatePreviewPlateControls();
      updateUploadPlateControls();
      setUploadAccess(false);

      const projectName = getActiveProjectName();
      const settings = await loadPrint3rSettingsForCurrentProject();
      const materialKey = slicer ? slicer.getProjectMaterial() : 'pla';
      const materializedSettings = applyMaterialOverrides(settings, materialKey);

      const generateRes = await fetch('/api/print3r/generate_profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ project_name: projectName, settings: materializedSettings })
      });
      const generated = await generateRes.json();
      if (!generated.success) throw new Error(generated.error || 'Failed to generate profile');

      if (status) status.textContent = "Baking models and commands...";
      const parseRes = await fetch('/api/print3r/parse_commands', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          project_name: projectName,
          profile_name: generated.profile_name,
          slicer: 'auto',
          bake_models: true
        })
      });
      const parsedPayload = await parseRes.json();
      if (!parsedPayload.success) throw new Error(parsedPayload.error || 'Failed to parse commands');
      const parsed = parsedPayload.parsed || {};
      const commands = Array.isArray(parsed.commands) ? parsed.commands : [];
      preparedSliceCommands = commands;
      preparedSliceProfile = parsed.profile_name || generated.profile_name || '';
      previewPlateIndex = 0;
      updatePreviewPlateControls();
      uploadPlateIndex = 0;
      updateUploadPlateControls();

      if (commands.length > 0) {
        if (autoStart) {
          if (status) status.textContent = "Starting Slicer Engine...";
          await startPreparedSlice();
        }
      } else {
        throw new Error('No plate commands were generated.');
      }
    } catch (err) {
      showMessageModal(`Slice failed: ${err.message}`, 'Slice Error');
      if (status) status.textContent = "Slice failed";
    } finally {
      if (sliceBtn) sliceBtn.classList.remove('is-loading');
    }
  }

  async function streamPrint3rCommand(cmd) {
    const response = await fetch('/api/print3r/stream_run', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ argv: cmd.argv })
    });

    if (!response.ok) {
      const maybe = await response.text();
      throw new Error(maybe || `Command failed with HTTP ${response.status}`);
    }

    if (!response.body) {
      const text = await response.text();
      appendSliceTerminal(text || '[katana] no output stream returned');
      return;
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      appendSliceTerminal(decoder.decode(value, { stream: true }));
    }
  }

  async function startPreparedSlice() {
    if (sliceRunning) return;
    if (!preparedSliceCommands || preparedSliceCommands.length === 0) return;

    sliceRunning = true;
    const status = document.getElementById('slicer-status');

    let hadError = false;
    for (let i = 0; i < preparedSliceCommands.length; i += 1) {
      if (status) status.textContent = `Slicing plate ${i + 1}/${preparedSliceCommands.length}...`;
      const cmd = preparedSliceCommands[i];
      try {
        await streamPrint3rCommand(cmd);
      } catch (err) {
        hadError = true;
        break;
      }
    }

    if (!hadError) {
      if (preparedSliceCommands && preparedSliceCommands.length > 0) {
        currentGCodePath = preparedSliceCommands[0].output_gcode;
        previewPlateIndex = 0;
        updatePreviewPlateControls();
        uploadPlateIndex = 0;
        updateUploadPlateControls();
        setUploadAccess(true);
        performAutosave(true);
      }
      if (status) status.textContent = "Slice complete";
      switchTab('preview');
    } else {
      if (status) status.textContent = "Slice failed";
      showMessageModal('Slice process encountered an error.', 'Slice Error');
    }
    sliceRunning = false;
  }

  async function openSettingsPlaceholder() {
    const modal = document.getElementById('settings-placeholder-modal');
    try {
      const settings = await loadPrint3rSettingsForCurrentProject();
      applyPrint3rSettingsToForm(settings);
    } catch (err) {
      showMessageModal(`Could not load settings: ${err.message}`, 'Settings');
    }
    setSettingsMode(settingsMode);
    syncFillDensitySlider();
    const fillDensityInput = document.getElementById('p3r-fill-density');
    const fillDensitySlider = document.getElementById('p3r-fill-density-slider');
    if (fillDensityInput && fillDensitySlider) {
      fillDensitySlider.oninput = () => {
        fillDensityInput.value = fillDensitySlider.value;
      };
      fillDensityInput.oninput = () => {
        syncFillDensitySlider();
      };
    }
    if (modal) modal.classList.add('is-active');
  }

  function saveSettingsPlaceholder() {
    const settings = collectPrint3rSettingsFromForm();
    localStorage.setItem(getPrint3rSettingsKey(), JSON.stringify(settings));
    closeSettingsPlaceholder();
  }

  function closeSettingsPlaceholder() {
    const modal = document.getElementById('settings-placeholder-modal');
    if (modal) modal.classList.remove('is-active');
  }
</script>
{% endblock %}