@spark-apps/piclet 1.0.4 → 1.0.6

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 (15) hide show
  1. package/dist/cli.js +327 -314
  2. package/dist/cli.js.map +1 -1
  3. package/dist/gui/css/theme.css +18 -10
  4. package/dist/gui/piclet.html +73 -50
  5. package/package.json +1 -1
  6. package/dist/gui/border.html +0 -229
  7. package/dist/gui/extract-frames.html +0 -156
  8. package/dist/gui/filter.html +0 -180
  9. package/dist/gui/iconpack.html +0 -113
  10. package/dist/gui/makeicon.html +0 -165
  11. package/dist/gui/recolor.html +0 -243
  12. package/dist/gui/remove-bg.html +0 -178
  13. package/dist/gui/rescale.html +0 -195
  14. package/dist/gui/storepack.html +0 -179
  15. package/dist/gui/transform.html +0 -202
package/dist/gui/filter.html DELETED
@@ -1,180 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" data-piclet data-width="400" data-height="440">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Filter</title>
7
- <link rel="stylesheet" href="/css/theme.css">
8
- <script src="/js/piclet.js"></script>
9
- <style>
10
- .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;min-height:140px;overflow:hidden;position:relative}
11
- .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
12
- .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
13
- .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3)}
14
- .preview-area .mini-sp{width:16px;height:16px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
15
- .preview-info{font-size:10px;color:var(--txt3);text-align:center;margin-top:4px;height:14px}
16
- .filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 0}
17
- .filter-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:var(--bg2);border:1px solid var(--brd);border-radius:6px;color:var(--txt2);font:inherit;font-size:11px;cursor:pointer;transition:all .15s}
18
- .filter-btn:hover{background:var(--bg3);color:var(--txt)}
19
- .filter-btn.active{background:var(--acc);border-color:var(--acc);color:#000;font-weight:500}
20
- .filter-icon{width:24px;height:24px;border-radius:4px;border:1px solid var(--brd)}
21
- .filter-btn.active .filter-icon{border-color:#000}
22
- .filter-icon.gray{background:linear-gradient(135deg,#888,#333)}
23
- .filter-icon.sepia{background:linear-gradient(135deg,#d4a574,#8b6914)}
24
- .filter-icon.invert{background:linear-gradient(135deg,#fff,#000)}
25
- .filter-icon.vintage{background:linear-gradient(135deg,#a89078,#5c4a3a)}
26
- .filter-icon.vivid{background:linear-gradient(135deg,#ff6b6b,#4ecdc4)}
27
- </style>
28
- </head>
29
- <body>
30
- <div class="app">
31
- <div class="hd"><b>PicLet</b><span>Filter</span></div>
32
- <div class="meta">
33
- <div>File<b id="fn">-</b></div>
34
- <div>Size<b id="sz">-</b></div>
35
- </div>
36
- <!-- Form -->
37
- <div id="F" class="form">
38
- <div class="preview-area" id="pA">
39
- <span class="placeholder">Select filter to preview</span>
40
- </div>
41
- <div class="preview-info" id="pI"></div>
42
- <div class="filter-grid">
43
- <button class="filter-btn active" data-filter="grayscale" onclick="selectFilter('grayscale')">
44
- <div class="filter-icon gray"></div>
45
- Grayscale
46
- </button>
47
- <button class="filter-btn" data-filter="sepia" onclick="selectFilter('sepia')">
48
- <div class="filter-icon sepia"></div>
49
- Sepia
50
- </button>
51
- <button class="filter-btn" data-filter="invert" onclick="selectFilter('invert')">
52
- <div class="filter-icon invert"></div>
53
- Invert
54
- </button>
55
- <button class="filter-btn" data-filter="vintage" onclick="selectFilter('vintage')">
56
- <div class="filter-icon vintage"></div>
57
- Vintage
58
- </button>
59
- <button class="filter-btn" data-filter="vivid" onclick="selectFilter('vivid')">
60
- <div class="filter-icon vivid"></div>
61
- Vivid
62
- </button>
63
- </div>
64
- <div class="btns">
65
- <button class="btn btn-g" onclick="PicLet.close()">Cancel</button>
66
- <button class="btn btn-p" onclick="apply()">Apply</button>
67
- </div>
68
- </div>
69
- <!-- Loading state -->
70
- <div class="ld" id="L"><div class="sp"></div><span id="lT">Applying filter...</span></div>
71
- <!-- Log -->
72
- <div class="log" id="G"></div>
73
- <!-- Done state -->
74
- <div class="dn" id="D">
75
- <h4 id="dT"></h4>
76
- <p id="dM"></p>
77
- <div class="btns" style="width:100%;margin-top:8px">
78
- <button class="btn btn-p" onclick="PicLet.close()">Done</button>
79
- </div>
80
- </div>
81
- </div>
82
- <script>
83
- const { $, log, fetchJson, postJson } = PicLet;
84
- const pA = $('pA'), pI = $('pI');
85
-
86
- let currentFilter = 'grayscale';
87
- let previewTimeout = null;
88
- let lastPreviewOpts = null;
89
-
90
- // Select filter
91
- function selectFilter(type) {
92
- currentFilter = type;
93
- document.querySelectorAll('.filter-btn').forEach(btn => {
94
- btn.classList.toggle('active', btn.dataset.filter === type);
95
- });
96
- schedulePreview();
97
- }
98
-
99
- // Get current options
100
- function getOptions() {
101
- return { filter: currentFilter };
102
- }
103
-
104
- // Check if options changed
105
- function optionsChanged() {
106
- const current = JSON.stringify(getOptions());
107
- if (current === lastPreviewOpts) return false;
108
- lastPreviewOpts = current;
109
- return true;
110
- }
111
-
112
- // Schedule preview
113
- function schedulePreview() {
114
- if (previewTimeout) clearTimeout(previewTimeout);
115
- previewTimeout = setTimeout(() => {
116
- if (optionsChanged()) {
117
- generatePreview();
118
- }
119
- }, 200);
120
- }
121
-
122
- // Generate preview
123
- async function generatePreview() {
124
- pA.innerHTML = '<div class="mini-sp"></div>';
125
- pI.textContent = '';
126
-
127
- try {
128
- const result = await postJson('/api/preview', getOptions());
129
-
130
- if (result.success && result.imageData) {
131
- const img = document.createElement('img');
132
- img.src = result.imageData;
133
- img.alt = 'Preview';
134
- pA.innerHTML = '';
135
- pA.appendChild(img);
136
- pI.textContent = result.width && result.height ? `${result.width}×${result.height}` : '';
137
- } else {
138
- pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
139
- pI.textContent = '';
140
- }
141
- } catch (e) {
142
- pA.innerHTML = '<span class="placeholder">Preview error</span>';
143
- pI.textContent = '';
144
- }
145
- }
146
-
147
- // Load initial data
148
- fetchJson('/api/info').then(d => {
149
- $('fn').textContent = d.fileName;
150
- $('sz').textContent = d.width + '×' + d.height;
151
- setTimeout(generatePreview, 100);
152
- });
153
-
154
- // Apply
155
- async function apply() {
156
- $('F').classList.add('hide');
157
- $('L').classList.add('on');
158
- $('G').classList.add('on');
159
-
160
- try {
161
- const result = await postJson('/api/process', getOptions());
162
- if (result.logs) {
163
- result.logs.forEach(l => log('G', l.type[0], l.message));
164
- }
165
-
166
- $('L').classList.remove('on');
167
- $('D').classList.add('on', result.success ? 'ok' : 'err');
168
- $('dT').textContent = result.success ? 'Done' : 'Failed';
169
- $('dM').textContent = result.success ? result.output : result.error;
170
- } catch (e) {
171
- log('G', 'e', e.message);
172
- $('L').classList.remove('on');
173
- $('D').classList.add('on', 'err');
174
- $('dT').textContent = 'Error';
175
- $('dM').textContent = e.message;
176
- }
177
- }
178
- </script>
179
- </body>
180
- </html>
package/dist/gui/iconpack.html DELETED
@@ -1,113 +0,0 @@
1
- <!DOCTYPE html>
2
- <html data-piclet data-width="340" data-height="310">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Icon Pack</title>
7
- <link rel="stylesheet" href="/css/theme.css">
8
- <script src="/js/piclet.js"></script>
9
- <style>
10
- .platforms{display:flex;flex-direction:column;gap:4px;flex:1}
11
- .platforms .opt{padding:8px 10px;background:var(--bg2);border-radius:6px;border:1px solid var(--brd)}
12
- .platforms .opt:hover{border-color:var(--acc)}
13
- .platform-info{font-size:10px;color:var(--txt3);margin-left:22px;margin-top:2px}
14
- </style>
15
- </head>
16
- <body>
17
- <div class="app">
18
- <div class="hd"><b>PicLet</b><span>Icon Pack Generator</span></div>
19
- <div class="meta">
20
- <div>File<b id="fn">-</b></div>
21
- <div>Size<b id="sz">-</b></div>
22
- </div>
23
- <!-- Form state -->
24
- <div id="F" class="form">
25
- <div class="platforms">
26
- <label class="opt">
27
- <input type="checkbox" id="cW" checked>
28
- <span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
29
- Web
30
- <div class="platform-info">favicon, PWA, apple-touch-icon</div>
31
- </label>
32
- <label class="opt">
33
- <input type="checkbox" id="cA" checked>
34
- <span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
35
- Android
36
- <div class="platform-info">mipmap folders, Play Store icon</div>
37
- </label>
38
- <label class="opt">
39
- <input type="checkbox" id="cI" checked>
40
- <span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
41
- iOS
42
- <div class="platform-info">App icons, App Store icon</div>
43
- </label>
44
- </div>
45
- <div class="warn-box" id="wB"></div>
46
- <div class="btns">
47
- <button class="btn btn-g" onclick="PicLet.close()">Cancel</button>
48
- <button class="btn btn-p" onclick="generate()">Generate</button>
49
- </div>
50
- </div>
51
- <!-- Loading state -->
52
- <div class="ld" id="L"><div class="sp"></div><span id="lT">Generating icons...</span></div>
53
- <!-- Log -->
54
- <div class="log" id="G"></div>
55
- <!-- Done state -->
56
- <div class="dn" id="D">
57
- <h4 id="dT"></h4>
58
- <p id="dM"></p>
59
- <div class="btns" style="width:100%;margin-top:8px">
60
- <button class="btn btn-p" onclick="PicLet.close()">Done</button>
61
- </div>
62
- </div>
63
- </div>
64
- <script>
65
- const { $, log, fetchJson, postJson } = PicLet;
66
-
67
- // Load initial data and check for warnings
68
- fetchJson('/api/info').then(d => {
69
- $('fn').textContent = d.fileName;
70
- $('sz').textContent = d.width + '×' + d.height;
71
- if (d.width < 1024 || d.height < 1024) {
72
- $('wB').textContent = 'Source < 1024px. Larger images produce better quality.';
73
- $('wB').classList.add('on');
74
- }
75
- });
76
-
77
- // Generate icons
78
- async function generate() {
79
- const web = $('cW').checked;
80
- const android = $('cA').checked;
81
- const ios = $('cI').checked;
82
-
83
- if (!web && !android && !ios) {
84
- alert('Please select at least one platform');
85
- return;
86
- }
87
-
88
- $('F').classList.add('hide');
89
- $('L').classList.add('on');
90
- $('G').classList.add('on');
91
-
92
- try {
93
- const result = await postJson('/api/process', { web, android, ios });
94
-
95
- if (result.logs) {
96
- result.logs.forEach(l => log('G', l.type[0], l.message));
97
- }
98
-
99
- $('L').classList.remove('on');
100
- $('D').classList.add('on', result.success ? 'ok' : 'err');
101
- $('dT').textContent = result.success ? 'Done' : 'Failed';
102
- $('dM').textContent = result.success ? result.output : result.error;
103
- } catch (e) {
104
- log('G', 'e', e.message);
105
- $('L').classList.remove('on');
106
- $('D').classList.add('on', 'err');
107
- $('dT').textContent = 'Error';
108
- $('dM').textContent = e.message;
109
- }
110
- }
111
- </script>
112
- </body>
113
- </html>
package/dist/gui/makeicon.html DELETED
@@ -1,165 +0,0 @@
1
- <!DOCTYPE html>
2
- <html data-piclet data-width="400" data-height="420">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Make Icon</title>
7
- <link rel="stylesheet" href="/css/theme.css">
8
- <script src="/js/piclet.js"></script>
9
- <style>
10
- .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;min-height:140px;overflow:hidden;position:relative}
11
- .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
12
- .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
13
- .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3)}
14
- .preview-area .mini-sp{width:16px;height:16px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
15
- .preview-info{font-size:10px;color:var(--txt3);text-align:center;margin-top:4px;height:14px}
16
- .info-row{display:flex;justify-content:space-between;font-size:11px;padding:6px 10px;background:var(--bg2);border-radius:4px}
17
- .info-row .label{color:var(--txt3)}
18
- .info-row .value{color:var(--txt2)}
19
- </style>
20
- </head>
21
- <body>
22
- <div class="app">
23
- <div class="hd"><b>PicLet</b><span>Make Icon</span></div>
24
- <div class="meta">
25
- <div>File<b id="fn">-</b></div>
26
- <div>Size<b id="sz">-</b></div>
27
- </div>
28
- <!-- Form state -->
29
- <div id="F" class="form">
30
- <div class="preview-area" id="pA">
31
- <span class="placeholder">Loading preview...</span>
32
- </div>
33
- <div class="preview-info" id="pI"></div>
34
- <div class="info-row">
35
- <span class="label">Output</span>
36
- <span class="value" id="oN">-</span>
37
- </div>
38
- <div class="opts">
39
- <label class="opt" data-tip="Remove transparent edges around the image"><input type="checkbox" id="cT" checked><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim</label>
40
- <label class="opt" data-tip="Add transparent padding to make a square icon"><input type="checkbox" id="cS" checked><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Make square</label>
41
- </div>
42
- <div class="btns">
43
- <button class="btn btn-g" onclick="PicLet.close()">Cancel</button>
44
- <button class="btn btn-p" onclick="convert()">Convert</button>
45
- </div>
46
- </div>
47
- <!-- Loading state -->
48
- <div class="ld" id="L"><div class="sp"></div><span id="lT">Converting...</span></div>
49
- <!-- Log -->
50
- <div class="log" id="G"></div>
51
- <!-- Done state -->
52
- <div class="dn" id="D">
53
- <h4 id="dT"></h4>
54
- <p id="dM"></p>
55
- <div class="btns" style="width:100%;margin-top:8px">
56
- <button class="btn btn-p" onclick="PicLet.close()">Done</button>
57
- </div>
58
- </div>
59
- </div>
60
- <script>
61
- const { $, log, fetchJson, postJson } = PicLet;
62
- const pA = $('pA'), pI = $('pI');
63
-
64
- let previewTimeout = null;
65
- let lastPreviewOpts = null;
66
-
67
- // Get current options
68
- function getOptions() {
69
- return {
70
- trim: $('cT').checked,
71
- makeSquare: $('cS').checked
72
- };
73
- }
74
-
75
- // Check if options changed
76
- function optionsChanged() {
77
- const current = JSON.stringify(getOptions());
78
- if (current === lastPreviewOpts) return false;
79
- lastPreviewOpts = current;
80
- return true;
81
- }
82
-
83
- // Schedule preview (debounced)
84
- function schedulePreview() {
85
- if (previewTimeout) clearTimeout(previewTimeout);
86
- previewTimeout = setTimeout(() => {
87
- if (optionsChanged()) {
88
- generatePreview();
89
- }
90
- }, 300);
91
- }
92
-
93
- // Generate preview
94
- async function generatePreview() {
95
- pA.innerHTML = '<div class="mini-sp"></div>';
96
- pI.textContent = '';
97
-
98
- try {
99
- const result = await postJson('/api/preview', getOptions());
100
-
101
- if (result.success && result.imageData) {
102
- const img = document.createElement('img');
103
- img.src = result.imageData;
104
- img.alt = 'Preview';
105
- pA.innerHTML = '';
106
- pA.appendChild(img);
107
- pI.textContent = result.width && result.height ? `${result.width}×${result.height}` : '';
108
- } else {
109
- pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
110
- pI.textContent = '';
111
- }
112
- } catch (e) {
113
- pA.innerHTML = '<span class="placeholder">Preview error</span>';
114
- pI.textContent = '';
115
- }
116
- }
117
-
118
- // Checkbox changes trigger preview
119
- $('cT').onchange = schedulePreview;
120
- $('cS').onchange = schedulePreview;
121
-
122
- // Load initial data
123
- fetchJson('/api/info').then(d => {
124
- $('fn').textContent = d.fileName;
125
- $('sz').textContent = d.width + '×' + d.height;
126
- // Show output filename
127
- const baseName = d.fileName.replace(/\.[^.]+$/, '');
128
- $('oN').textContent = baseName + '.ico';
129
- // Load defaults
130
- if (d.defaults) {
131
- $('cT').checked = d.defaults.trim ?? true;
132
- $('cS').checked = d.defaults.makeSquare ?? true;
133
- }
134
- // Generate initial preview
135
- setTimeout(generatePreview, 100);
136
- });
137
-
138
- // Convert to ICO
139
- async function convert() {
140
- $('F').classList.add('hide');
141
- $('L').classList.add('on');
142
- $('G').classList.add('on');
143
-
144
- try {
145
- const result = await postJson('/api/process', getOptions());
146
-
147
- if (result.logs) {
148
- result.logs.forEach(l => log('G', l.type[0], l.message));
149
- }
150
-
151
- $('L').classList.remove('on');
152
- $('D').classList.add('on', result.success ? 'ok' : 'err');
153
- $('dT').textContent = result.success ? 'Done' : 'Failed';
154
- $('dM').textContent = result.success ? result.output : result.error;
155
- } catch (e) {
156
- log('G', 'e', e.message);
157
- $('L').classList.remove('on');
158
- $('D').classList.add('on', 'err');
159
- $('dT').textContent = 'Error';
160
- $('dM').textContent = e.message;
161
- }
162
- }
163
- </script>
164
- </body>
165
- </html>