inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/ui.html

@@ -171,6 +171,50 @@
       text-decoration: underline;
     }
 
+    /* Pre-flight view */
+    .preflight-group-header {
+      font-size: 10px;
+      font-weight: 600;
+      color: #555;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 6px 12px 4px;
+      background: #f9f9f9;
+      border-bottom: 1px solid #eee;
+      position: sticky;
+      top: 0;
+    }
+    .preflight-item {
+      padding: 6px 12px;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .preflight-item:last-child { border-bottom: none; }
+    .preflight-item input[type="checkbox"] { width: auto; flex-shrink: 0; margin: 0; }
+    .preflight-item label { flex: 1; margin-bottom: 0; cursor: pointer; font-size: 11px; color: #333; }
+    .preflight-badge {
+      font-size: 9px;
+      padding: 2px 6px;
+      border-radius: 10px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .preflight-badge.new { background: #e8f5e9; color: #18a058; }
+    .preflight-badge.changed { background: #fff3e0; color: #f57c00; }
+    .preflight-badge.unchanged { background: #f5f5f5; color: #999; }
+    .preflight-empty {
+      font-size: 12px;
+      color: #555;
+      background: #f8f8f8;
+      border: 1px solid #ececec;
+      border-radius: 8px;
+      padding: 12px;
+      line-height: 1.5;
+      margin-bottom: 8px;
+    }
+
     /* Offline view */
     .offline-icon {
       font-size: 36px;
@@ -192,9 +236,136 @@
       margin-right: 6px;
       user-select: none;
     }
+
+    /* Brand watermark: a faint bridge at the bottom of every view. During the
+       loading view it becomes more visible and the drop from the logo falls
+       onto it on repeat. */
+    .bridge-watermark-svg {
+      display: block;
+      opacity: 0.022;
+      transition: opacity 0.4s ease;
+    }
+    body.is-loading .bridge-watermark-svg { opacity: 0.12; }
+
+    .loading-drop {
+      position: fixed;
+      bottom: 58px;
+      left: 50%;
+      width: 26px;
+      height: 39px;
+      margin-left: -13px;
+      pointer-events: none;
+      z-index: 10;
+      opacity: 0;
+      /* Squash pivots on the drop's bottom tip so the top compresses down
+         onto the bridge on impact. */
+      transform-origin: 50% 100%;
+      animation: drop-fall 1.8s linear infinite;
+    }
+    .loading-drop svg { width: 100%; height: 100%; display: block; }
+
+    /* Status text shown above the drop while components load.
+       Positioned roughly midway between the top of the panel and the
+       drop's starting point so the drop appears to fall from below it.
+       Two lines: a sticky phase header and a swapping detail line. */
+    .loading-status {
+      position: fixed;
+      top: 60px;
+      left: 50%;
+      /* Fixed width + centered position keeps both lines anchored at
+         the same x regardless of text length — text inside is
+         left-aligned so the phase label doesn't dance horizontally as
+         the detail line below changes length. */
+      width: 280px;
+      margin-left: -140px;
+      text-align: left;
+      z-index: 11;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .loading-status.is-visible { opacity: 1; }
+    .loading-status__phase {
+      font-size: 12px;
+      line-height: 1.4;
+      color: #555;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .loading-status__phase.is-empty { display: none; }
+    /* Three text-dot spans with cumulative opacity reveal so the
+       header reads "Building components.", "..", "...", "" then
+       loops. Each dot has its own keyframes (`steps(1)` timing, no
+       interpolation) so dots appear/disappear discretely. The dots
+       container is always 3ch wide so the surrounding layout never
+       shifts as dots toggle on and off. */
+    .loading-status__dots {
+      display: inline-block;
+      width: 3ch;
+      text-align: left;
+    }
+    .loading-status__dot {
+      opacity: 0;
+    }
+    .loading-status__dot:nth-child(1) {
+      animation: loading-status-dot-1 1.5s steps(1) infinite;
+    }
+    .loading-status__dot:nth-child(2) {
+      animation: loading-status-dot-2 1.5s steps(1) infinite;
+    }
+    .loading-status__dot:nth-child(3) {
+      animation: loading-status-dot-3 1.5s steps(1) infinite;
+    }
+    @keyframes loading-status-dot-1 {
+      0%, 74.99%      { opacity: 1; }
+      75%, 100%       { opacity: 0; }
+    }
+    @keyframes loading-status-dot-2 {
+      0%, 24.99%      { opacity: 0; }
+      25%, 74.99%     { opacity: 1; }
+      75%, 100%       { opacity: 0; }
+    }
+    @keyframes loading-status-dot-3 {
+      0%, 49.99%      { opacity: 0; }
+      50%, 74.99%     { opacity: 1; }
+      75%, 100%       { opacity: 0; }
+    }
+    .loading-status__detail {
+      font-size: 11px;
+      line-height: 1.4;
+      color: #888;
+    }
+    .loading-status__detail:empty { display: none; }
+    @keyframes drop-fall {
+      /* Single linear-motion fall from 0% → 55% (no intermediate transform
+         keyframes, so interpolation stays perfectly linear — no apparent
+         ease-in/out at the start or middle). Drop appears at full opacity
+         immediately; on impact (55%→65%) it compresses and fades together;
+         the tail holds invisible so the next cycle has breathing room. */
+      0%   { transform: translateY(-300px) scaleY(1);    opacity: 0.30; }
+      55%  { transform: translateY(0)      scaleY(1);    opacity: 0.30; }
+      65%  { transform: translateY(0)      scaleY(0.55); opacity: 0; }
+      100% { transform: translateY(0)      scaleY(0.55); opacity: 0; }
+    }
   </style>
 </head>
 <body>
+  <!-- Brand watermark: bridge element full-width at bottom -->
+  <div style="position:fixed;bottom:0;left:0;right:0;height:78px;overflow:hidden;pointer-events:none;z-index:9;">
+    <svg class="bridge-watermark-svg" width="100%" height="100%" viewBox="-70 168 400 140" preserveAspectRatio="xMidYMin slice" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M-60.786 294C-57.327 242 27.215 188 131 188C234.786 188 319.327 242 322.786 294" stroke="#000" stroke-width="28" stroke-linecap="butt"/>
+      <rect x="32" y="207" width="20.5" height="101" fill="#000"/>
+      <rect x="91" y="198" width="20.5" height="110" fill="#000"/>
+      <rect x="151" y="198" width="20.5" height="110" fill="#000"/>
+      <rect x="210" y="207" width="20.5" height="101" fill="#000"/>
+    </svg>
+  </div>
+
   <!-- Push View -->
   <div id="pushView">
     <h2>Push to Code</h2>
@@ -205,7 +376,7 @@
     </div>
     <div id="tokenSourceInfoPush" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelPush"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModePush">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModePush">css</strong>
     </div>
 
     <div class="field">
@@ -250,7 +421,7 @@
 
     <div id="tokenSourceInfoSettings" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelSettings"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModeSettings">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModeSettings">css</strong>
     </div>
 
     <div class="field">
@@ -271,11 +442,10 @@
     <div class="field">
       <label>Token Source Mode</label>
       <select id="settingsTokenSourceMode">
-        <option value="auto">auto (prefer CSS)</option>
-        <option value="css">css (force CSS only)</option>
-        <option value="dtcg">dtcg (force DTCG only)</option>
+        <option value="css">css (auto-discover CSS, fallback to DTCG)</option>
+        <option value="dtcg">dtcg (force DTCG file only)</option>
       </select>
-      <p class="hint">`auto` prefers CSS and falls back to DTCG, then embedded tokens.</p>
+      <p class="hint">CSS mode auto-discovers your globals.css and falls back to DTCG if not found. Use DTCG to force the legacy token file.</p>
     </div>
 
     <div class="field" id="tokenPathField">
@@ -291,25 +461,25 @@
     </div>
 
     <div class="field" id="syncDtcgOnPushField">
-      <label style="display:flex;align-items:center;gap:8px;">
-        <input type="checkbox" id="settingsSyncDtcgOnPush">
-        Also update DTCG on Push to Code
-      </label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input type="checkbox" id="settingsSyncDtcgOnPush" style="width:auto;flex-shrink:0;">
+        <label for="settingsSyncDtcgOnPush" style="display:inline;margin:0;cursor:pointer;">Also update DTCG on Push to Code</label>
+      </div>
       <p class="hint">When enabled, the plugin also commits <code>tokens.dtcg.json</code> as a generated artifact.</p>
     </div>
 
     <div class="field">
-      <label style="display:flex;align-items:center;gap:8px;">
-        <input type="checkbox" id="settingsAllowNewTokensFromFigma">
-        Allow New Tokens from Figma
-      </label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input type="checkbox" id="settingsAllowNewTokensFromFigma" style="width:auto;flex-shrink:0;">
+        <label for="settingsAllowNewTokensFromFigma" style="display:inline;margin:0;cursor:pointer;">Allow New Tokens from Figma</label>
+      </div>
       <p class="hint">Disabled by default. When enabled, new token keys can be added to code on push.</p>
     </div>
 
-    <div class="field">
+    <div class="field" id="newTokenPrefixesField" style="display:none;">
       <label>New Token Prefixes (optional)</label>
       <input type="text" id="settingsNewTokenPrefixes" placeholder="chart-, brand-">
-      <p class="hint">Comma-separated. If empty, all new keys are allowed. If set, only matching prefixes are allowed.</p>
+      <p class="hint">Comma-separated. Only tokens with these prefixes can be added. Leave empty to allow all new tokens.</p>
     </div>
 
     <div class="divider"></div>
@@ -355,26 +525,75 @@
     <div id="settingsStatus" class="status"></div>
   </div>
 
+  <!-- Loading View — the bottom-of-body bridge watermark stays visible
+       (CSS fades it up during loading) and the drop from the logo falls
+       onto it on repeat via a CSS keyframe animation. The status text
+       above the drop is updated via the 'status' postMessage. -->
+  <div id="loadingView" style="display:none;min-height:200px;">
+    <div id="loadingStatus" class="loading-status" aria-live="polite">
+      <div id="loadingStatusPhaseRow" class="loading-status__phase is-empty">
+        <span id="loadingStatusPhase" class="loading-status__phase-text"></span>
+        <span class="loading-status__dots" aria-hidden="true"><span class="loading-status__dot">.</span><span class="loading-status__dot">.</span><span class="loading-status__dot">.</span></span>
+      </div>
+      <div id="loadingStatusDetail" class="loading-status__detail"></div>
+    </div>
+    <div class="loading-drop" aria-hidden="true">
+      <svg viewBox="0 0 92 138" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(-85, -39)" fill="#000">
+          <path d="M131 39.2646C134.289 44.7223 137.921 50.4461 141.631 56.2715C147.191 65.0012 152.943 73.9894 158.166 82.9082C163.392 91.8314 168.010 100.554 171.312 108.708C174.632 116.908 176.489 124.214 176.489 130.379C176.489 156.002 155.978 176.673 130.800 176.673C105.622 176.673 85.1105 156.002 85.1105 130.379C85.1105 124.289 87.1502 116.839 90.7628 108.368C94.3465 99.965 99.3047 90.9483 104.768 81.8164C110.238 72.6724 116.092 63.61 121.514 54.9707C124.938 49.5147 128.194 44.2166 131 39.2646Z"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+
   <!-- Offline View -->
   <div id="offlineView" style="display:none;">
     <div class="offline-icon">⚡</div>
     <h2 style="text-align:center;margin:0 0 8px;">Dev server not running</h2>
     <p style="font-size:12px;color:#666;text-align:center;margin:0 0 12px;line-height:1.5;">
-      The plugin needs your local dev server to scan components.
+      The plugin scans components from your local Next.js dev server.
     </p>
 
+    <p style="font-size:11px;color:#888;margin:0 0 6px;line-height:1.5;">
+      In your project root:
+    </p>
     <div class="command-block">
-      <span class="prompt">$</span>pnpm figma:dev
+      <span class="prompt">$</span>pnpm inkbridge:dev
     </div>
 
     <p style="font-size:11px;color:#888;margin:0 0 16px;line-height:1.5;">
-      This starts Next.js and the component scanner. Once it's running, click Retry.
+      Once it's running, click Retry. First time? See the
+      <a href="https://inkbridge.ink/docs/getting-started" target="_blank" style="color:#18a058;">setup guide</a>
+      — you may need to run <code style="background:#eee;padding:0 4px;border-radius:3px;">pnpm exec inkbridge setup</code> first.
     </p>
 
     <button id="retryBtn">Retry</button>
     <div id="retryStatus" class="status"></div>
   </div>
 
+  <!-- Pre-flight View -->
+  <div id="preflightView" style="display:none;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
+      <h2 style="margin:0;">Create Design System</h2>
+    </div>
+    <p id="preflightSummary" style="font-size:11px;color:#666;margin:0 0 10px;"></p>
+
+    <div id="preflightActions" class="select-actions">
+      <a onclick="selectAllPreflight()">Select all</a>
+      <a onclick="selectNonePreflight()">Select none</a>
+      <a id="preflightToggleUnchanged" style="display:none;"></a>
+    </div>
+
+    <div id="preflightNoChanges" class="preflight-empty" style="display:none;">
+      No component changes detected. You can close this dialog, or regenerate all components anyway.
+    </div>
+
+    <div id="preflightList" class="change-list" style="max-height:300px;overflow-y:auto;"></div>
+
+    <button id="preflightGenerateBtn" style="margin-top:12px;">Generate</button>
+    <button class="secondary" id="preflightCancelBtn" style="margin-top:4px;">Cancel</button>
+  </div>
+
   <!-- Upgrade View -->
   <div id="upgradeView" style="display:none;">
     <h2>Pro Feature</h2>
@@ -410,7 +629,7 @@
     </div>
     <div id="tokenSourceInfoSync" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelSync"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModeSync">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModeSync">css</strong>
     </div>
 
     <p style="font-size: 11px; color: #666; margin-bottom: 12px;">
@@ -451,6 +670,22 @@
     var upgradeView = document.getElementById('upgradeView');
     var overviewView = document.getElementById('overviewView');
     var offlineView = document.getElementById('offlineView');
+    var loadingView = document.getElementById('loadingView');
+    var loadingStatusEl = document.getElementById('loadingStatus');
+    var loadingStatusPhaseRowEl = document.getElementById('loadingStatusPhaseRow');
+    var loadingStatusPhaseEl = document.getElementById('loadingStatusPhase');
+    var loadingStatusDetailEl = document.getElementById('loadingStatusDetail');
+    // Latch the phase so a detail-only update doesn't blank the header.
+    // setStatus(string) and clearStatus() reset both sides.
+    var loadingStatusCurrentPhase = '';
+    var preflightView = document.getElementById('preflightView');
+    var preflightActionsEl = document.getElementById('preflightActions');
+    var preflightListEl = document.getElementById('preflightList');
+    var preflightSummaryEl = document.getElementById('preflightSummary');
+    var preflightNoChangesEl = document.getElementById('preflightNoChanges');
+    var preflightToggleUnchangedEl = document.getElementById('preflightToggleUnchanged');
+    var preflightGenerateBtn = document.getElementById('preflightGenerateBtn');
+    var preflightCancelBtn = document.getElementById('preflightCancelBtn');
     var retryBtn = document.getElementById('retryBtn');
     var retryStatusEl = document.getElementById('retryStatus');
     var overviewPushBtn = document.getElementById('overviewPushBtn');
@@ -531,6 +766,7 @@
     var syncDtcgOnPushField = document.getElementById('syncDtcgOnPushField');
     var settingsAllowNewTokensFromFigma = document.getElementById('settingsAllowNewTokensFromFigma');
     var settingsNewTokenPrefixes = document.getElementById('settingsNewTokenPrefixes');
+    var newTokenPrefixesField = document.getElementById('newTokenPrefixesField');
     var settingsToken = document.getElementById('settingsToken');
     var settingsProjectName = document.getElementById('settingsProjectName');
     var settingsLicenseKey = document.getElementById('settingsLicenseKey');
@@ -538,13 +774,20 @@
     // Current detected changes
     var detectedChanges = { tokens: true, components: [] };
     var lastTokenSourceInfo = null;
-    var configuredTokenSourceMode = 'auto';
+    var configuredTokenSourceMode = 'css';
+    var preflightItems = [];
+    var preflightExcludedSet = {};
+    var preflightHasActionable = false;
+    var preflightShowUnchanged = false;
 
     function resizeToContent() {
       // Wait for layout to settle before measuring
       setTimeout(function() {
         var h = document.body.scrollHeight;
-        parent.postMessage({ pluginMessage: { type: 'resize', height: h } }, '*');
+        // Pass the current viewport width so the plugin's resize handler
+        // doesn't snap the panel to a different width than showUI set.
+        var w = window.innerWidth;
+        parent.postMessage({ pluginMessage: { type: 'resize', height: h, width: w } }, '*');
       }, 50);
     }
 
@@ -580,25 +823,20 @@
     }
 
     function normalizeConfiguredMode(mode) {
-      if (mode === 'css' || mode === 'dtcg' || mode === 'auto') return mode;
-      return 'auto';
+      if (mode === 'dtcg') return 'dtcg';
+      return 'css';
     }
 
     function applyTokenSourceModeVisibility(mode) {
       var normalized = normalizeConfiguredMode(mode);
-      if (normalized === 'css') {
-        tokenPathField.style.display = 'none';
-        cssTokenPathField.style.display = 'block';
-        syncDtcgOnPushField.style.display = 'block';
-        return;
-      }
       if (normalized === 'dtcg') {
         tokenPathField.style.display = 'block';
         cssTokenPathField.style.display = 'none';
         syncDtcgOnPushField.style.display = 'none';
         return;
       }
-      tokenPathField.style.display = 'block';
+      // css mode
+      tokenPathField.style.display = 'none';
       cssTokenPathField.style.display = 'block';
       syncDtcgOnPushField.style.display = 'block';
     }
@@ -619,6 +857,156 @@
       configuredTokenSourceModeSync.textContent = configured;
     }
 
+    function buildPreflightExcludedFromUI() {
+      var excludedMap = {};
+
+      // When actionable items exist, unchanged items are treated as excluded by default
+      // unless explicitly shown and checked.
+      if (preflightHasActionable && !preflightShowUnchanged) {
+        for (var i = 0; i < preflightItems.length; i++) {
+          if (preflightItems[i].status === 'unchanged') excludedMap[preflightItems[i].name] = true;
+        }
+      }
+
+      var boxes = preflightListEl.querySelectorAll('input[type="checkbox"]');
+      for (var bi = 0; bi < boxes.length; bi++) {
+        var box = boxes[bi];
+        if (!box.checked) excludedMap[box.value] = true;
+        else delete excludedMap[box.value];
+      }
+
+      var excluded = [];
+      for (var key in excludedMap) {
+        if (Object.prototype.hasOwnProperty.call(excludedMap, key)) excluded.push(key);
+      }
+      return excluded;
+    }
+
+    function renderPreflight() {
+      var nNew = 0, nChanged = 0, nUnchanged = 0;
+      for (var i = 0; i < preflightItems.length; i++) {
+        if (preflightItems[i].status === 'new') nNew++;
+        else if (preflightItems[i].status === 'changed') nChanged++;
+        else nUnchanged++;
+      }
+      preflightHasActionable = (nNew + nChanged) > 0;
+
+      var summaryParts = [preflightItems.length + ' components'];
+      if (nNew > 0) summaryParts.push(nNew + ' new');
+      if (nChanged > 0) summaryParts.push(nChanged + ' changed');
+      if (nUnchanged > 0) summaryParts.push(nUnchanged + ' unchanged');
+      preflightSummaryEl.textContent = summaryParts.join(' · ');
+
+      if (!preflightHasActionable) {
+        preflightActionsEl.style.display = 'none';
+        preflightNoChangesEl.style.display = 'block';
+        preflightListEl.style.display = 'none';
+        preflightListEl.innerHTML = '';
+        preflightGenerateBtn.textContent = 'Generate all anyway';
+        preflightGenerateBtn.disabled = false;
+        return;
+      }
+
+      preflightNoChangesEl.style.display = 'none';
+      preflightActionsEl.style.display = 'flex';
+      preflightListEl.style.display = 'block';
+      preflightGenerateBtn.textContent = 'Generate selected';
+      preflightGenerateBtn.disabled = false;
+
+      if (nUnchanged > 0) {
+        preflightToggleUnchangedEl.style.display = 'inline';
+        preflightToggleUnchangedEl.textContent = preflightShowUnchanged
+          ? 'Hide unchanged (' + nUnchanged + ')'
+          : 'Show unchanged (' + nUnchanged + ')';
+      } else {
+        preflightToggleUnchangedEl.style.display = 'none';
+      }
+
+      var itemsToRender = [];
+      for (var ri = 0; ri < preflightItems.length; ri++) {
+        var item = preflightItems[ri];
+        if (!preflightShowUnchanged && item.status === 'unchanged') continue;
+        itemsToRender.push(item);
+      }
+
+      var groups = {};
+      var groupOrder = [];
+      for (var ii = 0; ii < itemsToRender.length; ii++) {
+        var item = itemsToRender[ii];
+        if (!groups[item.section]) {
+          groups[item.section] = { title: item.sectionTitle, items: [] };
+          groupOrder.push(item.section);
+        }
+        groups[item.section].items.push(item);
+      }
+
+      preflightListEl.innerHTML = '';
+      for (var gi = 0; gi < groupOrder.length; gi++) {
+        var sectionKey = groupOrder[gi];
+        var group = groups[sectionKey];
+
+        var headerEl = document.createElement('div');
+        headerEl.className = 'preflight-group-header';
+        headerEl.textContent = group.title;
+        preflightListEl.appendChild(headerEl);
+
+        for (var ci = 0; ci < group.items.length; ci++) {
+          var comp = group.items[ci];
+          var row = document.createElement('div');
+          row.className = 'preflight-item';
+
+          var cb = document.createElement('input');
+          cb.type = 'checkbox';
+          cb.id = 'pf_' + comp.name;
+          cb.value = comp.name;
+
+          // Actionable items default to checked unless explicitly excluded.
+          // Unchanged items default to unchecked (non-actionable).
+          if (comp.status === 'unchanged') cb.checked = false;
+          else cb.checked = !preflightExcludedSet[comp.name];
+
+          var lbl = document.createElement('label');
+          lbl.htmlFor = 'pf_' + comp.name;
+          lbl.textContent = comp.displayName || comp.name;
+
+          var badge = document.createElement('span');
+          badge.className = 'preflight-badge ' + comp.status;
+          badge.textContent = comp.status;
+
+          row.appendChild(cb);
+          row.appendChild(lbl);
+          row.appendChild(badge);
+          preflightListEl.appendChild(row);
+        }
+      }
+    }
+
+    function selectAllPreflight() {
+      var boxes = preflightListEl.querySelectorAll('input[type="checkbox"]');
+      for (var i = 0; i < boxes.length; i++) boxes[i].checked = true;
+    }
+
+    function selectNonePreflight() {
+      var boxes = preflightListEl.querySelectorAll('input[type="checkbox"]');
+      for (var i = 0; i < boxes.length; i++) boxes[i].checked = false;
+    }
+
+    preflightGenerateBtn.onclick = function() {
+      var excluded = buildPreflightExcludedFromUI();
+      preflightGenerateBtn.disabled = true;
+      preflightGenerateBtn.textContent = 'Generating...';
+      parent.postMessage({ pluginMessage: { type: 'confirm-preflight', excluded: excluded } }, '*');
+    };
+
+    preflightCancelBtn.onclick = function() {
+      parent.postMessage({ pluginMessage: { type: 'cancel-preflight' } }, '*');
+    };
+    preflightToggleUnchangedEl.onclick = function() {
+      preflightShowUnchanged = !preflightShowUnchanged;
+      renderPreflight();
+      resizeToContent();
+    };
+
     function selectAllChanges() {
       var checkboxes = changeListEl.querySelectorAll('input[type="checkbox"]');
       checkboxes.forEach(function(cb) { cb.checked = true; });
@@ -705,9 +1093,9 @@
     // Dev server fetch - runs in the UI iframe which has network access
     // (code.js sandbox cannot make fetch calls)
     var DEV_SERVER_ENDPOINTS = [
-      'http://localhost:4000/api/figma/scan-components',
-      'http://localhost:3000/api/figma/scan-components',
-      'http://localhost:5173/api/figma/scan-components',
+      'http://localhost:3000/api/inkbridge/scan-components',
+      'http://localhost:4000/api/inkbridge/scan-components',
+      'http://localhost:5173/api/inkbridge/scan-components',
     ];
 
     var DEV_SERVER_TIMEOUT_MS = 15000;
@@ -867,7 +1255,7 @@
       // UI-side license validation (code.js sandbox has no network)
       if (msg.type === 'validate-license') {
         var licenseResult = { tier: 'free', valid: false };
-        var validatePorts = ['4000', '3000', '5173'];
+        var validatePorts = ['3000', '4000', '5173'];
         for (var vp = 0; vp < validatePorts.length; vp++) {
           try {
             var vUrl = 'http://localhost:' + validatePorts[vp] + '/api/plugin/validate?key=' + encodeURIComponent(msg.key);
@@ -930,6 +1318,48 @@
         return;
       }
 
+      if (msg.type === 'show-preflight') {
+        pushView.style.display = 'none';
+        configView.style.display = 'none';
+        settingsView.style.display = 'none';
+        syncView.style.display = 'none';
+        upgradeView.style.display = 'none';
+        overviewView.style.display = 'none';
+        offlineView.style.display = 'none';
+        loadingView.style.display = 'none';
+        document.body.classList.remove('is-loading');
+        preflightView.style.display = 'block';
+
+        preflightItems = Array.isArray(msg.items) ? msg.items : [];
+        var excluded = Array.isArray(msg.excluded) ? msg.excluded : [];
+        preflightExcludedSet = {};
+        for (var ei = 0; ei < excluded.length; ei++) preflightExcludedSet[excluded[ei]] = true;
+        preflightShowUnchanged = false;
+        renderPreflight();
+        resizeToContent();
+      }
+
+      if (msg.type === 'status') {
+        // { type: 'status', phase?: '…', detail?: '…' } — structured.
+        // Phase is sticky: only updated when the message includes a
+        // `phase` key. Detail is updated independently so per-section
+        // emits during a build can swap the sub-line without clobbering
+        // the bold phase header above. CSS animates trailing dots on
+        // the phase element, so callers don't need to bake in '…'.
+        if (typeof msg.phase === 'string') {
+          loadingStatusCurrentPhase = msg.phase;
+          loadingStatusPhaseEl.textContent = msg.phase;
+          // Hide the whole phase row (text + dots) when phase is empty,
+          // otherwise the dots animation would dangle alone.
+          loadingStatusPhaseRowEl.classList.toggle('is-empty', msg.phase.length === 0);
+        }
+        if (typeof msg.detail === 'string') {
+          loadingStatusDetailEl.textContent = msg.detail;
+        }
+        var anyText = loadingStatusCurrentPhase.length > 0 || loadingStatusDetailEl.textContent.length > 0;
+        loadingStatusEl.classList.toggle('is-visible', anyText);
+      }
+
       if (msg.type === 'show-view') {
         pushView.style.display = msg.view === 'push' ? 'block' : 'none';
         configView.style.display = msg.view === 'configure' ? 'block' : 'none';
@@ -938,6 +1368,19 @@
         upgradeView.style.display = msg.view === 'upgrade' ? 'block' : 'none';
         overviewView.style.display = msg.view === 'overview' ? 'block' : 'none';
         offlineView.style.display = msg.view === 'offline' ? 'block' : 'none';
+        loadingView.style.display = msg.view === 'loading' ? 'block' : 'none';
+        document.body.classList.toggle('is-loading', msg.view === 'loading');
+        // Always reset the status text on a view switch — including
+        // entering the loading view. Otherwise a stale message from the
+        // previous run lingers until the first new setStatus arrives,
+        // and if the previous run ended on the loading view the next
+        // open shows the old text immediately.
+        loadingStatusPhaseEl.textContent = '';
+        loadingStatusDetailEl.textContent = '';
+        loadingStatusCurrentPhase = '';
+        loadingStatusPhaseRowEl.classList.add('is-empty');
+        loadingStatusEl.classList.remove('is-visible');
+        preflightView.style.display = 'none';
         // Reset retry button state when navigating away from/to offline view
         if (msg.view === 'offline') {
           retryBtn.disabled = false;
@@ -980,7 +1423,8 @@
         settingsCssTokenPath.value = config.cssTokenPath || '';
         settingsSyncDtcgOnPush.checked = config.syncDtcgOnPush === true;
         settingsAllowNewTokensFromFigma.checked = config.allowNewTokensFromFigma === true;
-        settingsNewTokenPrefixes.value = Array.isArray(config.newTokenPrefixes) ? config.newTokenPrefixes.join(', ') : '';
+        settingsNewTokenPrefixes.value = Array.isArray(config.newTokenPrefixes) ? config.newTokenPrefixes.join(', ') : (typeof config.newTokenPrefixes === 'string' ? config.newTokenPrefixes : '');
+        newTokenPrefixesField.style.display = config.allowNewTokensFromFigma === true ? 'block' : 'none';
         settingsProjectName.value = config.projectName || '';
         configuredTokenSourceMode = tokenSourceMode;
         applyTokenSourceModeVisibility(tokenSourceMode);
@@ -1197,7 +1641,7 @@
           repo: repo,
           baseBranch: settingsBranch.value.trim() || 'main',
           tokenPath: settingsTokenPath.value.trim() || 'design-tokens/tokens.dtcg.json',
-          tokenSourceMode: settingsTokenSourceMode.value || 'auto',
+          tokenSourceMode: settingsTokenSourceMode.value || 'css',
           cssTokenPath: settingsCssTokenPath.value.trim(),
           syncDtcgOnPush: settingsSyncDtcgOnPush.checked === true,
           allowNewTokensFromFigma: settingsAllowNewTokensFromFigma.checked === true,
@@ -1217,6 +1661,10 @@
       applyTokenSourceModeVisibility(configuredTokenSourceMode);
       setTokenSourceInfo(lastTokenSourceInfo);
     };
+
+    settingsAllowNewTokensFromFigma.onchange = function() {
+      newTokenPrefixesField.style.display = settingsAllowNewTokensFromFigma.checked ? 'block' : 'none';
+    };
   </script>
 </body>
 </html>