@spark-apps/piclet 1.0.0 → 1.0.1
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.
- package/LICENSE +661 -21
- package/Readme.md +3 -2
- package/dist/cli.js +773 -594
- package/dist/cli.js.map +1 -1
- package/dist/gui/css/theme.css +1 -1
- package/dist/gui/js/piclet.js +10 -1
- package/dist/gui/loading.hta +5 -12
- package/dist/gui/piclet.html +31 -25
- package/package.json +2 -2
package/dist/gui/css/theme.css
CHANGED
|
@@ -17,7 +17,7 @@ body{font:500 13px/1.3 -apple-system,system-ui,sans-serif;color:var(--txt);paddi
|
|
|
17
17
|
.hd b{font-size:14px;background:linear-gradient(135deg,#eab308,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
18
18
|
.hd span{font-size:11px;color:var(--txt3)}
|
|
19
19
|
|
|
20
|
-
/* Meta info */
|
|
20
|
+
/* Meta info (legacy - kept for other pages) */
|
|
21
21
|
.meta{display:flex;gap:12px;font-size:11px;color:var(--txt3);padding:8px 0;flex-shrink:0}
|
|
22
22
|
.meta b{color:var(--txt2);font-weight:500;margin-left:3px}
|
|
23
23
|
|
package/dist/gui/js/piclet.js
CHANGED
|
@@ -41,6 +41,15 @@
|
|
|
41
41
|
fetch('/api/close', { method: 'POST' }).finally(() => window.close());
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
// Open URL in default browser
|
|
45
|
+
function openUrl(url) {
|
|
46
|
+
fetch('/api/open-url', {
|
|
47
|
+
method: 'POST',
|
|
48
|
+
headers: { 'Content-Type': 'application/json' },
|
|
49
|
+
body: JSON.stringify({ url })
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
44
53
|
// Initialize window
|
|
45
54
|
function init(opts = {}) {
|
|
46
55
|
const w = opts.width || 320;
|
|
@@ -60,7 +69,7 @@
|
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
// Export to global
|
|
63
|
-
window.PicLet = { $, log, fetchJson, postJson, close, init };
|
|
72
|
+
window.PicLet = { $, log, fetchJson, postJson, close, openUrl, init };
|
|
64
73
|
|
|
65
74
|
// Auto-init on DOMContentLoaded if data attributes present
|
|
66
75
|
document.addEventListener('DOMContentLoaded', () => {
|
package/dist/gui/loading.hta
CHANGED
|
@@ -24,22 +24,18 @@
|
|
|
24
24
|
body.fade-out{opacity:0}
|
|
25
25
|
body{font-family:Segoe UI,sans-serif;color:#e4e4e7;text-align:center;padding:24px}
|
|
26
26
|
.logo{width:80px;height:80px;margin-bottom:8px}
|
|
27
|
-
.title{font-size:28px;font-weight:700;
|
|
27
|
+
.title{font-size:28px;font-weight:700;color:#eab308;margin-bottom:2px}
|
|
28
28
|
.tagline{font-size:10px;color:#fcd34d;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
|
|
29
29
|
.desc{font-size:10px;color:#636366;margin-bottom:14px}
|
|
30
30
|
.loading{font-size:12px;color:#636366;margin-bottom:6px}
|
|
31
31
|
.dots{margin-bottom:20px}
|
|
32
32
|
.dot{display:inline-block;width:6px;height:6px;background:#eab308;border-radius:50%;margin:0 3px}
|
|
33
33
|
.divider{width:80%;height:1px;background:#222;margin:0 auto 14px auto}
|
|
34
|
-
.website{
|
|
35
|
-
.website:hover{color:#
|
|
36
|
-
.promo{font-size:9px;color:#4a4a4f;margin-bottom:4px}
|
|
37
|
-
.brand{font-size:11px;color:#636366;font-weight:500;text-decoration:none}
|
|
38
|
-
.brand:hover{color:#fcd34d}
|
|
39
|
-
.sub{font-size:9px;color:#4a4a4f;margin-top:2px}
|
|
34
|
+
.website{font-size:11px;color:#eab308;text-decoration:none;transition:color .2s}
|
|
35
|
+
.website:hover{color:#fcd34d}
|
|
40
36
|
</style>
|
|
41
37
|
<script language="javascript">
|
|
42
|
-
var w = 280, h =
|
|
38
|
+
var w = 280, h = 360;
|
|
43
39
|
window.resizeTo(w, h);
|
|
44
40
|
window.moveTo((screen.availWidth - w) / 2, (screen.availHeight - h) / 2);
|
|
45
41
|
|
|
@@ -88,9 +84,6 @@
|
|
|
88
84
|
<div id="d3" class="dot"></div>
|
|
89
85
|
</div>
|
|
90
86
|
<div class="divider"></div>
|
|
91
|
-
<a class="website" href="https://piclet.app
|
|
92
|
-
<div class="promo">A free tool by</div>
|
|
93
|
-
<a class="brand" href="https://spark-games.co.uk" target="_blank">spark-games.co.uk</a>
|
|
94
|
-
<div class="sub">Game Dev Tools & Resources</div>
|
|
87
|
+
<a class="website" href="#" onclick="shell.Run('https://piclet.app');return false">piclet.app</a>
|
|
95
88
|
</body>
|
|
96
89
|
</html>
|
package/dist/gui/piclet.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html data-piclet data-width="
|
|
2
|
+
<html data-piclet data-width="560" data-height="960">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<script src="/js/piclet.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
.app{display:flex;flex-direction:column;height:100%}
|
|
11
|
-
.main{display:flex;flex:1;gap:12px;overflow:hidden}
|
|
11
|
+
.main{display:flex;flex:1;gap:12px;overflow:hidden;margin-top:10px}
|
|
12
12
|
|
|
13
13
|
/* Left panel - Preview */
|
|
14
14
|
.preview-panel{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
.divider:hover::after,.divider.dragging::after{background:var(--acc)}
|
|
35
35
|
|
|
36
36
|
/* Right panel - Tools */
|
|
37
|
-
.tools-panel{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding-right:4px;align-self:flex-start;max-height:100
|
|
37
|
+
.tools-panel{width:300px;min-width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overflow-x:hidden;padding-right:4px;align-self:flex-start;max-height:100%;box-sizing:border-box}
|
|
38
38
|
|
|
39
39
|
/* Tool sections */
|
|
40
|
-
.tool{background:var(--bg2);border-radius:6px;border:1px solid var(--brd);overflow:hidden}
|
|
40
|
+
.tool{background:var(--bg2);border-radius:6px;border:1px solid var(--brd);overflow:hidden;min-width:0}
|
|
41
41
|
.tool.disabled{opacity:0.35;pointer-events:none}
|
|
42
42
|
.tool.active{border-color:var(--acc)}
|
|
43
43
|
.tool-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
.tool-header .toggle svg{width:10px;height:10px;fill:none;stroke:var(--acc);stroke-width:2.5;opacity:0}
|
|
52
52
|
.tool.active .tool-header .toggle{border-color:var(--acc);background:var(--acc)}
|
|
53
53
|
.tool.active .tool-header .toggle svg{opacity:1;stroke:#000}
|
|
54
|
-
.tool-body{display:none;padding:6px 10px 10px;border-top:1px solid var(--brd)}
|
|
54
|
+
.tool-body{display:none;padding:6px 10px 10px;border-top:1px solid var(--brd);min-width:0;overflow:hidden}
|
|
55
55
|
.tool.active .tool-body{display:block}
|
|
56
56
|
#t-removebg .tool-body{min-height:70px}
|
|
57
57
|
#t-scale .tool-body{min-height:95px}
|
|
@@ -102,17 +102,21 @@
|
|
|
102
102
|
.apply-btn:disabled{opacity:0.5;cursor:not-allowed}
|
|
103
103
|
|
|
104
104
|
/* Header branding */
|
|
105
|
-
.hd{flex-direction:column;align-items:
|
|
106
|
-
.hd-top{display:flex;align-items:center;gap:
|
|
107
|
-
.hd-brand{display:flex;flex-direction:column}
|
|
108
|
-
.hd-title{display:flex;align-items:baseline;gap:
|
|
109
|
-
.hd-title b{font-size:
|
|
110
|
-
.hd-subtitle{font-size:
|
|
111
|
-
.hd-desc{font-size:10px;color:var(--txt3);margin-top:
|
|
112
|
-
.hd-
|
|
113
|
-
.hd-link:
|
|
114
|
-
.hd-
|
|
115
|
-
.hd-
|
|
105
|
+
.hd{flex-direction:column;align-items:stretch;gap:0;padding-bottom:8px;border-bottom:1px solid var(--brd);position:relative}
|
|
106
|
+
.hd-top{display:flex;align-items:center;gap:10px;width:100%}
|
|
107
|
+
.hd-brand{display:flex;flex-direction:column;gap:2px}
|
|
108
|
+
.hd-title{display:flex;align-items:baseline;gap:8px}
|
|
109
|
+
.hd-title b{font-size:20px;color:#eab308;letter-spacing:-0.5px;font-weight:700}
|
|
110
|
+
.hd-subtitle{font-size:9px;color:var(--acc);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;opacity:0.9}
|
|
111
|
+
.hd-desc{font-size:10px;color:var(--txt3);margin-top:1px}
|
|
112
|
+
.hd-links{margin-left:auto;display:flex;gap:6px;align-items:center}
|
|
113
|
+
.hd-link{font-size:9px;color:var(--acc);text-decoration:none;padding:5px 10px;background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);border-radius:4px;transition:all .2s;font-weight:500}
|
|
114
|
+
.hd-link:hover{color:#000;border-color:var(--acc);background:var(--acc)}
|
|
115
|
+
.hd-coffee{display:flex;align-items:center;gap:4px;font-size:9px;color:#ffdd00;text-decoration:none;padding:5px 8px;background:rgba(255,221,0,0.1);border:1px solid rgba(255,221,0,0.25);border-radius:4px;transition:all .2s;font-weight:500}
|
|
116
|
+
.hd-coffee:hover{color:#000;border-color:#ffdd00;background:#ffdd00}
|
|
117
|
+
.hd-coffee svg{width:12px;height:12px;fill:currentColor}
|
|
118
|
+
.hd-meta{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--txt3);margin-top:8px;padding-top:8px;border-top:1px solid var(--brd);width:100%}
|
|
119
|
+
.hd-meta b{color:var(--txt2);font-weight:500;margin-left:3px}
|
|
116
120
|
|
|
117
121
|
/* States */
|
|
118
122
|
.main.hide{display:none}
|
|
@@ -143,13 +147,18 @@
|
|
|
143
147
|
</div>
|
|
144
148
|
<span class="hd-desc">Lightweight image tools for content creators</span>
|
|
145
149
|
</div>
|
|
146
|
-
<
|
|
150
|
+
<div class="hd-links">
|
|
151
|
+
<a href="https://buymeacoffee.com/spark88" class="hd-coffee" onclick="PicLet.openUrl('https://buymeacoffee.com/spark88');return false">
|
|
152
|
+
<svg viewBox="0 0 24 24"><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364z"/></svg>
|
|
153
|
+
Donate
|
|
154
|
+
</a>
|
|
155
|
+
<a href="https://piclet.app" class="hd-link" onclick="PicLet.openUrl('https://piclet.app');return false">piclet.app</a>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="hd-meta">
|
|
159
|
+
<div>File<b id="fileName">-</b></div>
|
|
160
|
+
<div>Original<b id="origSize">-</b></div>
|
|
147
161
|
</div>
|
|
148
|
-
<div class="hd-file"><span>File:</span> <span id="fileName">-</span></div>
|
|
149
|
-
</div>
|
|
150
|
-
<div class="meta">
|
|
151
|
-
<div>Original<b id="origSize">-</b></div>
|
|
152
|
-
<div>Output<b id="outSize">-</b></div>
|
|
153
162
|
</div>
|
|
154
163
|
|
|
155
164
|
<!-- Main content -->
|
|
@@ -578,7 +587,6 @@ async function showOriginal() {
|
|
|
578
587
|
async function generatePreview() {
|
|
579
588
|
if (activeTools.size === 0) {
|
|
580
589
|
showOriginal();
|
|
581
|
-
$('outSize').textContent = '-';
|
|
582
590
|
return;
|
|
583
591
|
}
|
|
584
592
|
|
|
@@ -588,7 +596,6 @@ async function generatePreview() {
|
|
|
588
596
|
|
|
589
597
|
if (!hasPreviewable) {
|
|
590
598
|
showOriginal();
|
|
591
|
-
$('outSize').textContent = '(multiple files)';
|
|
592
599
|
return;
|
|
593
600
|
}
|
|
594
601
|
|
|
@@ -604,7 +611,6 @@ async function generatePreview() {
|
|
|
604
611
|
pA.appendChild(img);
|
|
605
612
|
if (result.width && result.height) {
|
|
606
613
|
pI.textContent = `${result.width} × ${result.height}`;
|
|
607
|
-
$('outSize').textContent = `${result.width}×${result.height}`;
|
|
608
614
|
}
|
|
609
615
|
updateZoom(); // Apply current zoom
|
|
610
616
|
} else {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-apps/piclet",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Lightweight image tools for content creators",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"scale"
|
|
31
31
|
],
|
|
32
32
|
"author": "spark-apps",
|
|
33
|
-
"license": "
|
|
33
|
+
"license": "AGPL-3.0",
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|