@wasao/kagemusha 0.1.1 → 0.2.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 (104) hide show
  1. package/README.md +496 -57
  2. package/dist/commands/add.d.ts +6 -0
  3. package/dist/commands/add.d.ts.map +1 -0
  4. package/dist/commands/add.js +26 -0
  5. package/dist/commands/add.js.map +1 -0
  6. package/dist/commands/capture.d.ts +3 -2
  7. package/dist/commands/capture.d.ts.map +1 -1
  8. package/dist/commands/capture.js +234 -20
  9. package/dist/commands/capture.js.map +1 -1
  10. package/dist/commands/discover.d.ts +2 -0
  11. package/dist/commands/discover.d.ts.map +1 -0
  12. package/dist/commands/discover.js +62 -0
  13. package/dist/commands/discover.js.map +1 -0
  14. package/dist/commands/edit.d.ts.map +1 -1
  15. package/dist/commands/edit.js +40 -20
  16. package/dist/commands/edit.js.map +1 -1
  17. package/dist/commands/init.d.ts +1 -1
  18. package/dist/commands/init.d.ts.map +1 -1
  19. package/dist/commands/init.js +206 -102
  20. package/dist/commands/init.js.map +1 -1
  21. package/dist/commands/list.d.ts +2 -0
  22. package/dist/commands/list.d.ts.map +1 -0
  23. package/dist/commands/list.js +33 -0
  24. package/dist/commands/list.js.map +1 -0
  25. package/dist/commands/login.d.ts +6 -0
  26. package/dist/commands/login.d.ts.map +1 -0
  27. package/dist/commands/login.js +142 -0
  28. package/dist/commands/login.js.map +1 -0
  29. package/dist/commands/validate.js +1 -1
  30. package/dist/commands/validate.js.map +1 -1
  31. package/dist/editor/inject-script.js +407 -33
  32. package/dist/editor/inject-script.js.map +1 -1
  33. package/dist/index.js +27 -16
  34. package/dist/index.js.map +1 -1
  35. package/dist/lib/annotate.d.ts +2 -2
  36. package/dist/lib/annotate.d.ts.map +1 -1
  37. package/dist/lib/annotate.js +35 -43
  38. package/dist/lib/annotate.js.map +1 -1
  39. package/dist/lib/auth.d.ts +18 -0
  40. package/dist/lib/auth.d.ts.map +1 -0
  41. package/dist/lib/auth.js +45 -0
  42. package/dist/lib/auth.js.map +1 -0
  43. package/dist/lib/aws-error.d.ts +7 -0
  44. package/dist/lib/aws-error.d.ts.map +1 -0
  45. package/dist/lib/aws-error.js +74 -0
  46. package/dist/lib/aws-error.js.map +1 -0
  47. package/dist/lib/canonical.d.ts +22 -0
  48. package/dist/lib/canonical.d.ts.map +1 -0
  49. package/dist/lib/canonical.js +92 -0
  50. package/dist/lib/canonical.js.map +1 -0
  51. package/dist/lib/config.d.ts +2 -0
  52. package/dist/lib/config.d.ts.map +1 -1
  53. package/dist/lib/config.js +23 -13
  54. package/dist/lib/config.js.map +1 -1
  55. package/dist/lib/crawl.d.ts +1 -1
  56. package/dist/lib/crawl.d.ts.map +1 -1
  57. package/dist/lib/crawl.js +213 -20
  58. package/dist/lib/crawl.js.map +1 -1
  59. package/dist/lib/definition.d.ts +2 -0
  60. package/dist/lib/definition.d.ts.map +1 -0
  61. package/dist/lib/definition.js +6 -0
  62. package/dist/lib/definition.js.map +1 -0
  63. package/dist/lib/diff.d.ts +52 -0
  64. package/dist/lib/diff.d.ts.map +1 -0
  65. package/dist/lib/diff.js +41 -0
  66. package/dist/lib/diff.js.map +1 -0
  67. package/dist/lib/login-error.d.ts +10 -0
  68. package/dist/lib/login-error.d.ts.map +1 -0
  69. package/dist/lib/login-error.js +13 -0
  70. package/dist/lib/login-error.js.map +1 -0
  71. package/dist/lib/screenshot.d.ts +8 -2
  72. package/dist/lib/screenshot.d.ts.map +1 -1
  73. package/dist/lib/screenshot.js +44 -61
  74. package/dist/lib/screenshot.js.map +1 -1
  75. package/dist/lib/staging.d.ts +8 -0
  76. package/dist/lib/staging.d.ts.map +1 -0
  77. package/dist/lib/staging.js +24 -0
  78. package/dist/lib/staging.js.map +1 -0
  79. package/dist/types.d.ts +5 -23
  80. package/dist/types.d.ts.map +1 -1
  81. package/package.json +18 -11
  82. package/dist/commands/preview.d.ts +0 -6
  83. package/dist/commands/preview.d.ts.map +0 -1
  84. package/dist/commands/preview.js +0 -33
  85. package/dist/commands/preview.js.map +0 -1
  86. package/dist/commands/run.d.ts +0 -6
  87. package/dist/commands/run.d.ts.map +0 -1
  88. package/dist/commands/run.js +0 -39
  89. package/dist/commands/run.js.map +0 -1
  90. package/dist/editor/editor/editor.html +0 -313
  91. package/dist/editor/editor/inject.ts +0 -385
  92. package/dist/editor/editor.html +0 -338
  93. package/dist/editor/inject-script.cjs +0 -398
  94. package/dist/editor/inject-script.cjs.map +0 -1
  95. package/dist/editor/inject-script.d.cts +0 -2
  96. package/dist/editor/inject-script.d.cts.map +0 -1
  97. package/dist/editor/inject.d.ts +0 -2
  98. package/dist/editor/inject.d.ts.map +0 -1
  99. package/dist/editor/inject.js +0 -385
  100. package/dist/editor/inject.js.map +0 -1
  101. package/dist/lib/upload.d.ts +0 -9
  102. package/dist/lib/upload.d.ts.map +0 -1
  103. package/dist/lib/upload.js +0 -43
  104. package/dist/lib/upload.js.map +0 -1
package/dist/editor/editor/editor.html DELETED
@@ -1,313 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Kagemusha Annotation Editor</title>
6
- <style>
7
- * { margin: 0; padding: 0; box-sizing: border-box; }
8
- body { background: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; }
9
-
10
- .toolbar {
11
- position: fixed; top: 0; left: 0; right: 0; z-index: 100;
12
- background: #16213e; padding: 8px 16px; display: flex; align-items: center; gap: 12px;
13
- box-shadow: 0 2px 8px rgba(0,0,0,0.3);
14
- }
15
- .toolbar button {
16
- padding: 6px 14px; border: 1px solid #444; border-radius: 6px;
17
- background: #1a1a2e; color: #fff; font-size: 13px; cursor: pointer;
18
- }
19
- .toolbar button:hover { background: #2a2a4e; }
20
- .toolbar button.active { background: #6366f1; border-color: #6366f1; }
21
- .toolbar .separator { width: 1px; height: 24px; background: #444; }
22
- .toolbar .title { color: #888; font-size: 13px; margin-right: 8px; }
23
- .toolbar .save-btn { background: #22c55e; border-color: #22c55e; font-weight: 600; margin-left: auto; }
24
- .toolbar .save-btn:hover { background: #16a34a; }
25
-
26
- .canvas-area {
27
- margin-top: 48px; display: flex; justify-content: center; align-items: flex-start;
28
- padding: 20px; height: calc(100vh - 48px); overflow: auto;
29
- }
30
-
31
- .editor-container {
32
- position: relative; cursor: crosshair;
33
- }
34
- .editor-container img { display: block; width: 100%; height: auto; }
35
-
36
- .annotation { position: absolute; }
37
- .annotation.selected { outline: 2px dashed #6366f1; outline-offset: 2px; }
38
-
39
- .label-input {
40
- background: none; border: none; color: inherit; font: inherit;
41
- width: 100%; outline: none;
42
- }
43
-
44
- .hint {
45
- position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
46
- color: #666; font-size: 12px;
47
- }
48
- </style>
49
- </head>
50
- <body>
51
-
52
- <div class="toolbar">
53
- <span class="title">🥷 Annotation Editor</span>
54
- <button id="tool-rect" class="active" onclick="setTool('rect')">▭ Rectangle</button>
55
- <button id="tool-arrow" onclick="setTool('arrow')">→ Arrow</button>
56
- <button id="tool-label" onclick="setTool('label')">T Label</button>
57
- <div class="separator"></div>
58
- <button onclick="deleteSelected()">🗑 Delete</button>
59
- <button class="save-btn" onclick="save()">💾 Save</button>
60
- </div>
61
-
62
- <div class="canvas-area">
63
- <div class="editor-container" id="editor">
64
- <img id="screenshot" />
65
- </div>
66
- </div>
67
-
68
- <div class="hint">Click and drag to add annotations. Click to select. Press Delete to remove.</div>
69
-
70
- <script>
71
- let tool = 'rect';
72
- let annotations = [];
73
- let selectedId = null;
74
- let dragState = null;
75
- let nextId = 1;
76
-
77
- const editor = document.getElementById('editor');
78
- const img = document.getElementById('screenshot');
79
-
80
- // Mouse position relative to the editor container (in CSS px, matches display)
81
- function getPos(e) {
82
- const r = editor.getBoundingClientRect();
83
- return { x: e.clientX - r.left, y: e.clientY - r.top };
84
- }
85
-
86
- // Ratio to convert display px → image natural px (for saving)
87
- function getScale() {
88
- return img.naturalWidth / editor.getBoundingClientRect().width;
89
- }
90
-
91
- window.initEditor = (screenshotDataUrl, existingDecorations) => {
92
- img.src = screenshotDataUrl;
93
- img.onload = () => {
94
- // Set editor width to fit window
95
- const maxW = window.innerWidth - 80;
96
- const maxH = window.innerHeight - 108;
97
- const ratio = img.naturalWidth / img.naturalHeight;
98
- let w = maxW;
99
- if (w / ratio > maxH) w = maxH * ratio;
100
- editor.style.width = w + 'px';
101
-
102
- if (existingDecorations) {
103
- existingDecorations.forEach(d => addFromDecoration(d));
104
- }
105
- };
106
- };
107
-
108
- function setTool(t) {
109
- tool = t;
110
- document.querySelectorAll('.toolbar button').forEach(b => b.classList.remove('active'));
111
- document.getElementById('tool-' + t)?.classList.add('active');
112
- deselectAll();
113
- }
114
-
115
- function deselectAll() {
116
- selectedId = null;
117
- document.querySelectorAll('.annotation').forEach(el => el.classList.remove('selected'));
118
- }
119
-
120
- function selectEl(el) {
121
- deselectAll();
122
- selectedId = parseInt(el.dataset.id);
123
- el.classList.add('selected');
124
- }
125
-
126
- function deleteSelected() {
127
- if (!selectedId) return;
128
- const el = document.querySelector(`[data-id="${selectedId}"]`);
129
- if (el) el.remove();
130
- annotations = annotations.filter(a => a.id !== selectedId);
131
- selectedId = null;
132
- }
133
-
134
- document.addEventListener('keydown', e => {
135
- if (e.key === 'Delete' || e.key === 'Backspace') {
136
- if (document.activeElement.classList?.contains('label-input')) return;
137
- deleteSelected();
138
- }
139
- });
140
-
141
- // --- CREATE ---
142
- editor.addEventListener('mousedown', e => {
143
- if (e.target.closest('.annotation')) return;
144
- const p = getPos(e);
145
- deselectAll();
146
-
147
- if (tool === 'rect') {
148
- const id = nextId++;
149
- const el = makeRect(id, p.x, p.y, 0, 0);
150
- editor.appendChild(el);
151
- dragState = { type: 'create-rect', id, el, sx: p.x, sy: p.y };
152
- } else if (tool === 'arrow') {
153
- const id = nextId++;
154
- const el = makeArrow(id, p.x, p.y, p.x, p.y);
155
- editor.appendChild(el);
156
- dragState = { type: 'create-arrow', id, el, sx: p.x, sy: p.y };
157
- } else if (tool === 'label') {
158
- const id = nextId++;
159
- annotations.push({ id, type: 'label', x: p.x, y: p.y, text: 'Label' });
160
- const el = makeLabel(id, p.x, p.y, 'Label');
161
- editor.appendChild(el);
162
- selectEl(el);
163
- el.querySelector('.label-input').focus();
164
- el.querySelector('.label-input').select();
165
- }
166
- });
167
-
168
- document.addEventListener('mousemove', e => {
169
- if (!dragState) return;
170
- const p = getPos(e);
171
-
172
- if (dragState.type === 'create-rect') {
173
- const el = dragState.el;
174
- const w = p.x - dragState.sx;
175
- const h = p.y - dragState.sy;
176
- el.style.left = (w > 0 ? dragState.sx : p.x) + 'px';
177
- el.style.top = (h > 0 ? dragState.sy : p.y) + 'px';
178
- el.style.width = Math.abs(w) + 'px';
179
- el.style.height = Math.abs(h) + 'px';
180
- } else if (dragState.type === 'create-arrow') {
181
- updateArrow(dragState.el, dragState.sx, dragState.sy, p.x, p.y);
182
- } else if (dragState.type === 'move') {
183
- const a = annotations.find(a => a.id === dragState.id);
184
- if (!a) return;
185
- a.x = p.x - dragState.ox;
186
- a.y = p.y - dragState.oy;
187
- dragState.el.style.left = a.x + 'px';
188
- dragState.el.style.top = a.y + 'px';
189
- }
190
- });
191
-
192
- document.addEventListener('mouseup', e => {
193
- if (!dragState) return;
194
- const p = getPos(e);
195
-
196
- if (dragState.type === 'create-rect') {
197
- const w = Math.abs(p.x - dragState.sx);
198
- const h = Math.abs(p.y - dragState.sy);
199
- if (w < 5 && h < 5) { dragState.el.remove(); }
200
- else {
201
- const a = { id: dragState.id, type: 'rect', x: Math.min(dragState.sx, p.x), y: Math.min(dragState.sy, p.y), width: w, height: h };
202
- annotations.push(a);
203
- selectEl(dragState.el);
204
- }
205
- } else if (dragState.type === 'create-arrow') {
206
- const dist = Math.hypot(p.x - dragState.sx, p.y - dragState.sy);
207
- if (dist < 5) { dragState.el.remove(); }
208
- else {
209
- annotations.push({ id: dragState.id, type: 'arrow', fromX: dragState.sx, fromY: dragState.sy, toX: p.x, toY: p.y });
210
- selectEl(dragState.el);
211
- }
212
- }
213
- dragState = null;
214
- });
215
-
216
- // --- ELEMENTS ---
217
- function makeRect(id, x, y, w, h) {
218
- const el = document.createElement('div');
219
- el.className = 'annotation'; el.dataset.id = id;
220
- el.style.cssText = `left:${x}px;top:${y}px;width:${w}px;height:${h}px;border:2px solid #FF0000;border-radius:4px;`;
221
- el.addEventListener('mousedown', e => {
222
- e.stopPropagation();
223
- selectEl(el);
224
- const a = annotations.find(a => a.id === parseInt(el.dataset.id));
225
- if (a) {
226
- const pp = getPos(e);
227
- dragState = { type: 'move', id: a.id, el, ox: pp.x - a.x, oy: pp.y - a.y };
228
- }
229
- });
230
- return el;
231
- }
232
-
233
- function makeArrow(id, x1, y1, x2, y2) {
234
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
235
- svg.classList.add('annotation'); svg.dataset.id = id;
236
- svg.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;';
237
- svg.innerHTML = `
238
- <defs><marker id="ah-${id}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#FF0000">
239
- <polygon points="0 0, 10 3.5, 0 7"/></marker></defs>
240
- <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#FF0000" stroke-width="2" marker-end="url(#ah-${id})" style="pointer-events:stroke;cursor:pointer;" />`;
241
- svg.querySelector('line').addEventListener('mousedown', e => {
242
- e.stopPropagation();
243
- selectEl(svg);
244
- });
245
- return svg;
246
- }
247
-
248
- function updateArrow(svg, x1, y1, x2, y2) {
249
- const line = svg.querySelector('line');
250
- line.setAttribute('x1', x1); line.setAttribute('y1', y1);
251
- line.setAttribute('x2', x2); line.setAttribute('y2', y2);
252
- }
253
-
254
- function makeLabel(id, x, y, text) {
255
- const el = document.createElement('div');
256
- el.className = 'annotation'; el.dataset.id = id;
257
- el.style.cssText = `left:${x}px;top:${y}px;padding:4px 8px;background:#fff;border:1px solid #FF0000;border-radius:4px;color:#FF0000;font-size:14px;min-width:40px;`;
258
- el.innerHTML = `<input class="label-input" value="${text}" style="color:#FF0000;font-size:14px;" />`;
259
- el.querySelector('.label-input').addEventListener('input', e => {
260
- const a = annotations.find(a => a.id === parseInt(el.dataset.id));
261
- if (a) a.text = e.target.value;
262
- });
263
- el.addEventListener('mousedown', e => {
264
- if (e.target.classList.contains('label-input')) return;
265
- e.stopPropagation();
266
- selectEl(el);
267
- const a = annotations.find(a => a.id === parseInt(el.dataset.id));
268
- if (a) {
269
- const pp = getPos(e);
270
- dragState = { type: 'move', id: a.id, el, ox: pp.x - a.x, oy: pp.y - a.y };
271
- }
272
- });
273
- return el;
274
- }
275
-
276
- // --- LOAD EXISTING ---
277
- function addFromDecoration(d) {
278
- const id = nextId++;
279
- const s = getScale();
280
- if (d.type === 'rect' && d.target && 'x' in d.target) {
281
- const a = { id, type: 'rect', x: d.target.x/s, y: d.target.y/s, width: d.target.width/s, height: d.target.height/s };
282
- annotations.push(a);
283
- editor.appendChild(makeRect(id, a.x, a.y, a.width, a.height));
284
- } else if (d.type === 'arrow' && 'x' in d.from && 'x' in d.to) {
285
- const a = { id, type: 'arrow', fromX: d.from.x/s, fromY: d.from.y/s, toX: d.to.x/s, toY: d.to.y/s };
286
- annotations.push(a);
287
- editor.appendChild(makeArrow(id, a.fromX, a.fromY, a.toX, a.toY));
288
- } else if (d.type === 'label' && 'x' in d.position) {
289
- const a = { id, type: 'label', x: d.position.x/s, y: d.position.y/s, text: d.text };
290
- annotations.push(a);
291
- editor.appendChild(makeLabel(id, a.x, a.y, a.text));
292
- }
293
- }
294
-
295
- // --- SAVE ---
296
- function save() {
297
- const s = getScale();
298
- const decorations = annotations.map(a => {
299
- if (a.type === 'rect') {
300
- return { type: 'rect', target: { x: Math.round(a.x*s), y: Math.round(a.y*s), width: Math.round(a.width*s), height: Math.round(a.height*s) }, style: { color: '#FF0000', strokeWidth: 2 } };
301
- } else if (a.type === 'arrow') {
302
- return { type: 'arrow', from: { x: Math.round(a.fromX*s), y: Math.round(a.fromY*s) }, to: { x: Math.round(a.toX*s), y: Math.round(a.toY*s) }, style: { color: '#FF0000', strokeWidth: 2 } };
303
- } else if (a.type === 'label') {
304
- return { type: 'label', text: a.text, position: { x: Math.round(a.x*s), y: Math.round(a.y*s) }, style: { fontSize: 14, color: '#FF0000', background: '#FFFFFF' } };
305
- }
306
- }).filter(Boolean);
307
-
308
- window.__SAVED_DECORATIONS__ = decorations;
309
- document.title = 'SAVED';
310
- }
311
- </script>
312
- </body>
313
- </html>