npm - finch-skin-studio - Versions diffs - 0.1.0 - Mend

finch-skin-studio 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/panel.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Skin Studio</title>
+<style>
+  :root {
+    --ss-bg-root: var(--finch-bg-root, #f6f6f8);
+    --ss-bg-main: var(--finch-bg-main, #ffffff);
+    --ss-bg-elevated: var(--finch-bg-elevated, #ffffff);
+    --ss-bg-hover: var(--finch-bg-hover, #f0f1f3);
+    --ss-bg-active: var(--finch-bg-active, #e6e8eb);
+    --ss-text-primary: var(--finch-text-primary, #1c1c1f);
+    --ss-text-secondary: var(--finch-text-secondary, #5b5d66);
+    --ss-text-tertiary: var(--finch-text-tertiary, #9a9ca6);
+    --ss-accent: var(--finch-accent, #2f6fed);
+    --ss-accent-dim: var(--finch-accent-dim, #e2ebfd);
+    --ss-border: var(--finch-border, #e4e4e7);
+    --ss-radius-sm: var(--finch-radius-sm, 8px);
+    --ss-radius-md: var(--finch-radius-md, 12px);
+    --ss-radius-lg: var(--finch-radius-lg, 16px);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --ss-bg-root: var(--finch-bg-root, #17181b);
+      --ss-bg-main: var(--finch-bg-main, #1b1c20);
+      --ss-bg-elevated: var(--finch-bg-elevated, #222327);
+      --ss-bg-hover: var(--finch-bg-hover, #28292e);
+      --ss-bg-active: var(--finch-bg-active, #313239);
+      --ss-text-primary: var(--finch-text-primary, #f2f2f4);
+      --ss-text-secondary: var(--finch-text-secondary, #a7a8b2);
+      --ss-text-tertiary: var(--finch-text-tertiary, #6c6d78);
+      --ss-accent: var(--finch-accent, #6366f1);
+      --ss-accent-dim: var(--finch-accent-dim, #26264a);
+      --ss-border: var(--finch-border, #2b2c31);
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    background: var(--ss-bg-main);
+    color: var(--ss-text-primary);
+    font-family: var(--finch-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    font-size: 13px;
+    line-height: 1.5;
+    padding: 16px 18px 32px;
+  }
+  h1, h2 { margin: 0; font-weight: 600; }
+  h1 { font-size: 16px; margin-bottom: 14px; }
+  h2 { font-size: 13px; color: var(--ss-text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
+  .card {
+    background: var(--ss-bg-elevated);
+    border: 1px solid var(--ss-border);
+    border-radius: var(--ss-radius-lg);
+    padding: 14px;
+    margin-bottom: 20px;
+  }
+  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+  button {
+    font: inherit;
+    cursor: pointer;
+    border-radius: var(--ss-radius-sm);
+    border: 1px solid var(--ss-border);
+    background: var(--ss-bg-elevated);
+    color: var(--ss-text-primary);
+    padding: 6px 12px;
+  }
+  button:hover { background: var(--ss-bg-hover); }
+  button.primary { background: var(--ss-accent); color: #fff; border-color: transparent; }
+  button.primary:hover { filter: brightness(1.05); }
+  button.ghost { background: transparent; border-color: transparent; color: var(--ss-text-secondary); }
+  button:disabled { opacity: 0.5; cursor: default; }
+  /* ── Background section ── */
+  .bg-preview {
+    height: 120px;
+    border-radius: var(--ss-radius-md);
+    border: 1px dashed var(--ss-border);
+    background: var(--ss-bg-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    margin-bottom: 12px;
+    position: relative;
+  }
+  .bg-preview img { width: 100%; height: 100%; object-fit: cover; }
+  .bg-preview.tile img { object-fit: none; background-size: 64px 64px; }
+  .bg-preview.drag-over { border-color: var(--ss-accent); background: var(--ss-accent-dim); }
+  .bg-placeholder { color: var(--ss-text-tertiary); font-size: 12px; text-align: center; padding: 8px; pointer-events: none; }
+  .bg-placeholder .bg-hint { margin-top: 4px; font-size: 11px; opacity: 0.85; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .row + .row { margin-top: 10px; }
+  .seg { display: inline-flex; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); overflow: hidden; }
+  .seg button { border: none; border-radius: 0; background: transparent; }
+  .seg button + button { border-left: 1px solid var(--ss-border); }
+  .seg button.active { background: var(--ss-accent-dim); color: var(--ss-accent); font-weight: 600; }
+  .label { color: var(--ss-text-tertiary); font-size: 12px; margin-right: 2px; }
+  /* ── Skin grid ── */
+  .grid { display: grid; gap: 12px; }
+  .skin-card {
+    position: relative;
+    border: 1px solid var(--ss-border);
+    border-radius: var(--ss-radius-lg);
+    background: var(--ss-bg-elevated);
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.12s ease, border-color 0.12s ease;
+  }
+  .skin-card:hover { transform: translateY(-2px); border-color: var(--ss-accent); }
+  .skin-card.active { border-color: var(--ss-accent); box-shadow: 0 0 0 2px var(--ss-accent-dim) inset; }
+  .thumb { height: 84px; display: flex; }
+  .thumb .side { width: 30%; }
+  .thumb .main { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; }
+  .thumb .bar { height: 5px; border-radius: 3px; }
+  .thumb .bar.w1 { width: 70%; }
+  .thumb .bar.w2 { width: 45%; }
+  .thumb .pill { width: 26px; height: 8px; border-radius: 4px; margin-top: 4px; }
+  .skin-name {
+    padding: 8px 10px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+  }
+  .skin-name span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .check-badge {
+    position: absolute; top: 6px; right: 6px;
+    width: 18px; height: 18px; border-radius: 50%;
+    background: var(--ss-accent); color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; line-height: 1;
+  }
+  .del-btn {
+    border: none; background: rgba(0,0,0,0.55); color: #fff;
+    width: 20px; height: 20px; border-radius: 50%;
+    display: none; align-items: center; justify-content: center;
+    font-size: 12px; padding: 0; flex: none;
+  }
+  .skin-card:hover .del-btn { display: flex; }
+  .add-card {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 6px; min-height: 116px;
+    color: var(--ss-text-tertiary);
+    border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-lg);
+    background: transparent; cursor: pointer; padding: 0;
+  }
+  .add-card .add-icon { font-size: 20px; line-height: 1; }
+  .add-card .add-label { font-size: 12px; text-align: center; }
+  .add-card:hover { color: var(--ss-accent); border-color: var(--ss-accent); background: var(--ss-bg-hover); }
+  .skin-actions { display: flex; gap: 4px; flex: none; }
+  /* ── Skeleton ── */
+  .skeleton { border-radius: var(--ss-radius-lg); overflow: hidden; border: 1px solid var(--ss-border); }
+  .skeleton .thumb, .skeleton .sk-line { background: linear-gradient(90deg, var(--ss-bg-hover) 25%, var(--ss-bg-active) 37%, var(--ss-bg-hover) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
+  .skeleton .sk-line { height: 12px; margin: 10px; border-radius: 4px; width: 60%; }
+  @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+  .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ss-bg-elevated); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-md); padding: 8px 14px; font-size: 12px; color: var(--ss-text-primary); box-shadow: 0 4px 16px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
+  .toast.show { opacity: 1; }
+</style>
+</head>
+<body>
+  <h1 id="t-title">Skin Studio</h1>
+  <section class="card" id="bg-card">
+    <div class="section-header"><h2 id="t-bg-heading">Home Background</h2></div>
+    <div class="bg-preview" id="bg-preview">
+      <div class="bg-placeholder" id="bg-placeholder">
+        <div id="t-bg-empty">No background image set</div>
+        <div class="bg-hint" id="t-bg-empty-hint">Drag &amp; drop an image here, or</div>
+      </div>
+      <img id="bg-image" style="display:none" alt="" />
+    </div>
+    <input type="file" id="bg-file-input" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" style="display:none" />
+    <div class="row">
+      <button class="primary" id="btn-pick" type="button">＋ <span id="t-choose">Choose image</span></button>
+      <button class="ghost" id="btn-clear" type="button" disabled><span id="t-clear">Clear</span></button>
+    </div>
+    <div class="row">
+      <span class="label" id="t-placement">Placement</span>
+      <div class="seg" id="seg-placement">
+        <button data-value="fill" id="t-fill">Fill</button>
+        <button data-value="tile" id="t-tile">Tile</button>
+      </div>
+    </div>
+    <div class="row">
+      <span class="label" id="t-tone">Brightness</span>
+      <div class="seg" id="seg-tone">
+        <button data-value="brightest">☀️</button>
+        <button data-value="bright">🌤️</button>
+        <button data-value="balanced">⛅</button>
+        <button data-value="dark">🌥️</button>
+        <button data-value="darkest">🌑</button>
+      </div>
+    </div>
+  </section>
+  <section id="skins-section">
+    <div class="section-header">
+      <h2 id="t-skins-heading">Skins</h2>
+    </div>
+    <div class="row" style="margin-bottom: 12px;">
+      <span class="label" id="t-systemTheme">System appearance</span>
+      <div class="seg" id="seg-system-theme">
+        <button data-value="system" id="t-sys-auto">Auto</button>
+        <button data-value="light" id="t-sys-light">Light</button>
+        <button data-value="dark" id="t-sys-dark">Dark</button>
+      </div>
+    </div>
+    <div class="grid" id="skins-grid"></div>
+  </section>
+  <div class="toast" id="toast"></div>
+<script src="panel.js"></script>
+</body>
+</html>

package/dist/panel.js ADDED Viewed

@@ -0,0 +1,429 @@
+(function () {
+  'use strict';
+  var api = window.finch;
+  // ── i18n ──────────────────────────────────────────────────────────────
+  var DICT = {
+    'en-US': {
+      title: 'Skin Studio', bgHeading: 'Home Background', bgEmpty: 'No background image set',
+      bgEmptyHint: 'Drag & drop an image here, or',
+      choose: 'Choose image', clear: 'Clear', placement: 'Placement', fill: 'Fill', tile: 'Tile',
+      tone: 'Brightness', skinsHeading: 'Skins', addCard: 'Save current skin',
+      current: 'Current', deleteConfirmTitle: 'Delete this skin?',
+      deleteConfirmMessage: 'This custom skin will be removed. This cannot be undone.',
+      deleteConfirm: 'Delete', deleteCancel: 'Cancel', applied: 'Skin applied', removed: 'Skin removed',
+      backgroundUpdated: 'Background updated', backgroundCleared: 'Background cleared',
+      noCurrentSkin: 'No applied skin to save yet — apply a preset first.',
+      dropInvalidType: 'Please choose a supported image file (PNG / JPEG / WebP / GIF / AVIF).',
+      dropTooLarge: 'Image is too large (max 15MB).',
+      systemTheme: 'System Appearance', sysAuto: 'Auto', sysLight: 'Light', sysDark: 'Dark',
+      exportSkin: 'Copy', importCard: 'Import skin',
+      importInvalid: 'This file is not a valid skin export.',
+      skinCopied: 'Skin copied to clipboard',
+    },
+    'zh-CN': {
+      title: '换肤工坊', bgHeading: '首页背景', bgEmpty: '尚未设置背景图',
+      bgEmptyHint: '拖拽图片到这里，或',
+      choose: '选择图片', clear: '清除', placement: '铺放方式', fill: '铺满', tile: '平铺',
+      tone: '明暗程度', skinsHeading: '配色皮肤', addCard: '保存当前皮肤',
+      current: '使用中', deleteConfirmTitle: '删除这个皮肤？',
+      deleteConfirmMessage: '这个自定义皮肤将被移除，此操作无法撤销。',
+      deleteConfirm: '删除', deleteCancel: '取消', applied: '已应用皮肤', removed: '已删除皮肤',
+      backgroundUpdated: '背景已更新', backgroundCleared: '背景已清除',
+      noCurrentSkin: '还没有可保存的当前皮肤，请先应用一个预设。',
+      dropInvalidType: '请选择支持的图片格式（PNG / JPEG / WebP / GIF / AVIF）。',
+      dropTooLarge: '图片过大（最多 15MB）。',
+      systemTheme: '系统外观', sysAuto: '跟随系统', sysLight: '浅色', sysDark: '深色',
+      exportSkin: '复制', importCard: '导入皮肤',
+      importInvalid: '这不是有效的皮肤导出文件。',
+      skinCopied: '皮肤已复制到剪贴板',
+    },
+  };
+  DICT['zh-HK'] = DICT['zh-CN'];
+  var locale = 'en-US';
+  function t(key) { var d = DICT[locale] || DICT['en-US']; return d[key] || DICT['en-US'][key] || key; }
+  function applyStaticI18n() {
+    document.getElementById('t-title').textContent = t('title');
+    document.getElementById('t-bg-heading').textContent = t('bgHeading');
+    document.getElementById('t-bg-empty').textContent = t('bgEmpty');
+    document.getElementById('t-bg-empty-hint').textContent = t('bgEmptyHint');
+    document.getElementById('t-choose').textContent = t('choose');
+    document.getElementById('t-clear').textContent = t('clear');
+    document.getElementById('t-placement').textContent = t('placement');
+    document.getElementById('t-fill').textContent = t('fill');
+    document.getElementById('t-tile').textContent = t('tile');
+    document.getElementById('t-tone').textContent = t('tone');
+    document.getElementById('t-skins-heading').textContent = t('skinsHeading');
+    document.getElementById('t-systemTheme').textContent = t('systemTheme');
+    document.getElementById('t-sys-auto').textContent = t('sysAuto');
+    document.getElementById('t-sys-light').textContent = t('sysLight');
+    document.getElementById('t-sys-dark').textContent = t('sysDark');
+  }
+  // ── Color helpers ─────────────────────────────────────────────────────
+  var BASE_DEFAULTS = {
+    light: { bgRoot: '#ffffff', bgMain: '#ffffff', bgSidebar: '#f5f5f7', bgElevated: '#ffffff', textPrimary: '#18181b', textSecondary: '#71717a', textTertiary: '#a1a1aa', accent: '#2563eb', accentDim: '#dbeafe', border: '#e4e4e7' },
+    dark: { bgRoot: '#18181b', bgMain: '#1c1c1f', bgSidebar: '#141416', bgElevated: '#232326', textPrimary: '#f4f4f5', textSecondary: '#a1a1aa', textTertiary: '#71717a', accent: '#6366f1', accentDim: '#26264a', border: '#2b2b2f' },
+  };
+  function mergedColors(skin) {
+    var defaults = BASE_DEFAULTS[skin.base] || BASE_DEFAULTS.light;
+    return Object.assign({}, defaults, skin.colors || {});
+  }
+  function buildThumb(skin) {
+    var c = mergedColors(skin);
+    var thumb = document.createElement('div');
+    thumb.className = 'thumb';
+    thumb.style.background = c.bgMain;
+    var side = document.createElement('div');
+    side.className = 'side';
+    side.style.background = c.bgSidebar;
+    var main = document.createElement('div');
+    main.className = 'main';
+    var bar1 = document.createElement('div');
+    bar1.className = 'bar w1';
+    bar1.style.background = c.textSecondary;
+    bar1.style.opacity = '0.55';
+    var bar2 = document.createElement('div');
+    bar2.className = 'bar w2';
+    bar2.style.background = c.textTertiary;
+    bar2.style.opacity = '0.55';
+    var pill = document.createElement('div');
+    pill.className = 'pill';
+    pill.style.background = c.accent;
+    main.appendChild(bar1);
+    main.appendChild(bar2);
+    main.appendChild(pill);
+    thumb.appendChild(side);
+    thumb.appendChild(main);
+    return thumb;
+  }
+  // ── State ─────────────────────────────────────────────────────────────
+  var state = {
+    builtin: [], custom: [], background: { placement: 'fill', tone: 'balanced' },
+    lastAppliedId: undefined, activeMode: null, loaded: false,
+  };
+  function toFinchFileUrl(absolutePath) {
+    return 'finch-file://local?path=' + encodeURIComponent(absolutePath);
+  }
+  function renderBackground() {
+    var preview = document.getElementById('bg-preview');
+    var img = document.getElementById('bg-image');
+    var placeholder = document.getElementById('bg-placeholder');
+    var btnClear = document.getElementById('btn-clear');
+    var bg = state.background || {};
+    preview.classList.toggle('tile', bg.placement === 'tile');
+    if (bg.imagePath) {
+      img.src = toFinchFileUrl(bg.imagePath);
+      img.style.display = 'block';
+      placeholder.style.display = 'none';
+      btnClear.disabled = false;
+    } else {
+      img.style.display = 'none';
+      placeholder.style.display = 'block';
+      btnClear.disabled = true;
+    }
+    var segP = document.getElementById('seg-placement');
+    Array.prototype.forEach.call(segP.querySelectorAll('button'), function (b) {
+      b.classList.toggle('active', b.getAttribute('data-value') === (bg.placement || 'fill'));
+    });
+    var segT = document.getElementById('seg-tone');
+    Array.prototype.forEach.call(segT.querySelectorAll('button'), function (b) {
+      b.classList.toggle('active', b.getAttribute('data-value') === (bg.tone || 'balanced'));
+    });
+  }
+  function renderSystemThemeSeg() {
+    var seg = document.getElementById('seg-system-theme');
+    var mode = state.activeMode;
+    var active = mode && mode.mode === 'system' ? mode.systemTheme : null;
+    Array.prototype.forEach.call(seg.querySelectorAll('button'), function (b) {
+      b.classList.toggle('active', b.getAttribute('data-value') === active);
+    });
+  }
+  function computeColumns() {
+    var grid = document.getElementById('skins-grid');
+    var width = grid.clientWidth || window.innerWidth || 360;
+    var cols = Math.floor(width / 168);
+    if (cols < 2) cols = 2;
+    if (cols > 4) cols = 4;
+    grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+  }
+  function isSkinActive(skin) {
+    var mode = state.activeMode;
+    // Before anything has ever been applied through Skin Studio (no
+    // activeMode on record yet), fall back to just matching lastAppliedId.
+    if (mode && mode.mode !== 'skin') return false;
+    return state.lastAppliedId === skin.id;
+  }
+  function makeSkinCard(skin, isCustom) {
+    var active = isSkinActive(skin);
+    var card = document.createElement('div');
+    card.className = 'skin-card' + (active ? ' active' : '');
+    card.appendChild(buildThumb(skin));
+    var nameRow = document.createElement('div');
+    nameRow.className = 'skin-name';
+    var nameSpan = document.createElement('span');
+    nameSpan.className = 'n';
+    nameSpan.textContent = skin.name;
+    nameRow.appendChild(nameSpan);
+    if (isCustom) {
+      var actions = document.createElement('div');
+      actions.className = 'skin-actions';
+      var exp = document.createElement('button');
+      exp.className = 'del-btn';
+      exp.type = 'button';
+      exp.textContent = '⧉';
+      exp.title = t('exportSkin');
+      exp.addEventListener('click', function (ev) {
+        ev.stopPropagation();
+        exportSkin(skin);
+      });
+      var del = document.createElement('button');
+      del.className = 'del-btn';
+      del.type = 'button';
+      del.textContent = '✕';
+      del.title = t('deleteConfirm');
+      del.addEventListener('click', function (ev) {
+        ev.stopPropagation();
+        confirmRemove(skin);
+      });
+      actions.appendChild(exp);
+      actions.appendChild(del);
+      nameRow.appendChild(actions);
+    }
+    card.appendChild(nameRow);
+    if (active) {
+      var badge = document.createElement('div');
+      badge.className = 'check-badge';
+      badge.textContent = '✓';
+      card.appendChild(badge);
+    }
+    card.addEventListener('click', function () {
+      api.postMessage({ type: 'applySkin', id: skin.id });
+    });
+    return card;
+  }
+  function confirmRemove(skin) {
+    api.ui.confirm({
+      title: t('deleteConfirmTitle'),
+      message: t('deleteConfirmMessage'),
+      confirmLabel: t('deleteConfirm'),
+      cancelLabel: t('deleteCancel'),
+      variant: 'danger',
+    }).then(function (res) {
+      if (res && res.confirmed) {
+        api.postMessage({ type: 'removeSkin', id: skin.id });
+      }
+    });
+  }
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+    // Fallback for webviews without the async Clipboard API.
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    try { document.execCommand('copy'); } finally { document.body.removeChild(ta); }
+    return Promise.resolve();
+  }
+  function exportSkin(skin) {
+    var payload = { schema: 'finch-skin-studio.skin@1', name: skin.name, base: skin.base, colors: skin.colors || {} };
+    copyText(JSON.stringify(payload)).then(function () {
+      showToast(t('skinCopied'));
+    }, function () {
+      showToast(t('importInvalid'));
+    });
+  }
+  function renderSkins() {
+    var grid = document.getElementById('skins-grid');
+    grid.innerHTML = '';
+    if (!state.loaded) {
+      for (var i = 0; i < 4; i++) {
+        var sk = document.createElement('div');
+        sk.className = 'skeleton';
+        var t1 = document.createElement('div');
+        t1.className = 'thumb';
+        var l1 = document.createElement('div');
+        l1.className = 'sk-line';
+        sk.appendChild(t1);
+        sk.appendChild(l1);
+        grid.appendChild(sk);
+      }
+      computeColumns();
+      return;
+    }
+    state.builtin.forEach(function (skin) { grid.appendChild(makeSkinCard(skin, false)); });
+    state.custom.forEach(function (skin) { grid.appendChild(makeSkinCard(skin, true)); });
+    var addCard = document.createElement('button');
+    addCard.type = 'button';
+    addCard.className = 'add-card';
+    addCard.innerHTML = '<span class="add-icon">＋</span><span class="add-label">' + t('addCard') + '</span>';
+    addCard.addEventListener('click', function () {
+      api.postMessage({ type: 'requestSaveCurrent' });
+    });
+    grid.appendChild(addCard);
+    var importCard = document.createElement('button');
+    importCard.type = 'button';
+    importCard.className = 'add-card';
+    importCard.innerHTML = '<span class="add-icon">⇪</span><span class="add-label">' + t('importCard') + '</span>';
+    importCard.addEventListener('click', function () {
+      api.postMessage({ type: 'requestImportSkin' });
+    });
+    grid.appendChild(importCard);
+    computeColumns();
+  }
+  // ── Toast ─────────────────────────────────────────────────────────────
+  var toastTimer;
+  function showToast(msg) {
+    var el = document.getElementById('toast');
+    el.textContent = msg;
+    el.classList.add('show');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () { el.classList.remove('show'); }, 2200);
+  }
+  // ── Wire up controls ──────────────────────────────────────────────────
+  document.getElementById('btn-pick').addEventListener('click', function () {
+    // A plain <input type=file> click opens the OS's real native "open
+    // file" dialog — standard web platform behavior, not a Finch API —
+    // which is the closest thing to a system file picker mini tools can
+    // reach. See the upload handling below.
+    document.getElementById('bg-file-input').click();
+  });
+  document.getElementById('btn-clear').addEventListener('click', function () {
+    api.postMessage({ type: 'clearBackground' });
+  });
+  document.getElementById('seg-placement').addEventListener('click', function (ev) {
+    var btn = ev.target.closest('button[data-value]');
+    if (!btn) return;
+    api.postMessage({ type: 'setBackgroundOptions', placement: btn.getAttribute('data-value') });
+  });
+  document.getElementById('seg-tone').addEventListener('click', function (ev) {
+    var btn = ev.target.closest('button[data-value]');
+    if (!btn) return;
+    api.postMessage({ type: 'setBackgroundOptions', tone: btn.getAttribute('data-value') });
+  });
+  document.getElementById('seg-system-theme').addEventListener('click', function (ev) {
+    var btn = ev.target.closest('button[data-value]');
+    if (!btn) return;
+    api.postMessage({ type: 'setSystemTheme', theme: btn.getAttribute('data-value') });
+  });
+  // ── Background image upload (native file dialog + drag & drop) ────────
+  var MAX_DROPPED_IMAGE_BYTES = 15 * 1024 * 1024; // 15 MB, mirrors the backend limit
+  var IMAGE_TYPE_RE = /^image\/(png|jpeg|jpg|webp|gif|avif)$/;
+  var bgPreview = document.getElementById('bg-preview');
+  var dragDepth = 0;
+  function isFileDrag(ev) {
+    var types = ev.dataTransfer && ev.dataTransfer.types;
+    return !!types && Array.prototype.indexOf.call(types, 'Files') !== -1;
+  }
+  function uploadBackgroundFile(file) {
+    if (!file) return;
+    if (!IMAGE_TYPE_RE.test(file.type)) {
+      showToast(t('dropInvalidType'));
+      return;
+    }
+    if (file.size > MAX_DROPPED_IMAGE_BYTES) {
+      showToast(t('dropTooLarge'));
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = function () {
+      api.postMessage({ type: 'uploadBackgroundImage', dataUrl: String(reader.result || ''), name: file.name });
+    };
+    reader.onerror = function () {
+      showToast(t('dropInvalidType'));
+    };
+    reader.readAsDataURL(file);
+  }
+  document.getElementById('bg-file-input').addEventListener('change', function (ev) {
+    var file = ev.target.files && ev.target.files[0];
+    ev.target.value = ''; // allow re-picking the same file later
+    uploadBackgroundFile(file);
+  });
+  bgPreview.addEventListener('dragenter', function (ev) {
+    if (!isFileDrag(ev)) return;
+    ev.preventDefault();
+    dragDepth++;
+    bgPreview.classList.add('drag-over');
+  });
+  bgPreview.addEventListener('dragover', function (ev) {
+    if (!isFileDrag(ev)) return;
+    ev.preventDefault();
+    ev.dataTransfer.dropEffect = 'copy';
+  });
+  bgPreview.addEventListener('dragleave', function () {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) bgPreview.classList.remove('drag-over');
+  });
+  bgPreview.addEventListener('drop', function (ev) {
+    ev.preventDefault();
+    dragDepth = 0;
+    bgPreview.classList.remove('drag-over');
+    var files = ev.dataTransfer && ev.dataTransfer.files;
+    uploadBackgroundFile(files && files[0]);
+  });
+  // Prevent an errant drop outside the preview box from navigating the whole
+  // panel away to the dropped image (default browser behavior).
+  document.addEventListener('dragover', function (ev) { if (isFileDrag(ev)) ev.preventDefault(); });
+  document.addEventListener('drop', function (ev) { if (isFileDrag(ev)) ev.preventDefault(); });
+  new ResizeObserver(function () { computeColumns(); }).observe(document.getElementById('skins-grid'));
+  // ── Bridge messages ───────────────────────────────────────────────────
+  api.onMessage(function (msg) {
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.type === 'finch:env') {
+      if (msg.locale) { locale = msg.locale; applyStaticI18n(); renderBackground(); renderSystemThemeSeg(); renderSkins(); }
+      return;
+    }
+    if (msg.type === 'state') {
+      if (msg.env && msg.env.locale) locale = msg.env.locale;
+      state.builtin = msg.builtin || [];
+      state.custom = msg.custom || [];
+      state.background = msg.background || { placement: 'fill', tone: 'balanced' };
+      state.lastAppliedId = msg.lastAppliedId;
+      state.activeMode = msg.activeMode || null;
+      state.loaded = true;
+      applyStaticI18n();
+      renderBackground();
+      renderSystemThemeSeg();
+      renderSkins();
+      return;
+    }
+    if (msg.type === 'error' || msg.type === 'toast') {
+      showToast(String(msg.message || ''));
+      return;
+    }
+  });
+  applyStaticI18n();
+  renderBackground();
+  renderSystemThemeSeg();
+  renderSkins();
+  api.postMessage({ type: 'requestState' });
+})();