loop-canvas 0.1.1 → 0.1.3
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/README.md +1 -1
- package/cli.mjs +9 -8
- package/package.json +1 -1
- package/public/app.css +1 -1
- package/public/app.js +95 -36
- package/public/icons.LICENSE.txt +21 -0
- package/public/index.html +43 -26
- package/server.mjs +29 -19
- package/skills/loop-canvas/SKILL.md +15 -9
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Hugeicons
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/public/index.html
CHANGED
|
@@ -7,11 +7,12 @@
|
|
|
7
7
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
8
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
9
9
|
<link rel="stylesheet" href="/__loop/app/app.css">
|
|
10
|
-
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='7' fill='%2317171A'/%3E%3Ccircle cx='16' cy='16' r='6.5' stroke='%
|
|
10
|
+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='7' fill='%2317171A'/%3E%3Ccircle cx='16' cy='16' r='6.5' stroke='%23F4F4F5' stroke-width='2.6' fill='none'/%3E%3C/svg%3E">
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="viewport" data-tool="select">
|
|
14
14
|
<div id="world">
|
|
15
|
+
<div id="sections"></div>
|
|
15
16
|
<div id="frames"></div>
|
|
16
17
|
<svg id="ink" width="1" height="1"></svg>
|
|
17
18
|
<div id="cursors"></div>
|
|
@@ -23,29 +24,29 @@
|
|
|
23
24
|
</div>
|
|
24
25
|
<div id="hover-box" hidden></div>
|
|
25
26
|
<div id="empty" hidden>
|
|
26
|
-
<div class="empty-
|
|
27
|
-
<div class="empty-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<p class="
|
|
27
|
+
<div class="empty-set">
|
|
28
|
+
<div class="empty-frames">
|
|
29
|
+
<button class="empty-frame" data-name="Desktop" data-w="1440" data-h="1024"><span class="ef-name">Desktop<small>1440 × 1024</small></span><span class="ef-sheet"><b>Describe this page</b></span></button>
|
|
30
|
+
<button class="empty-frame phone" data-name="Mobile" data-w="393" data-h="852"><span class="ef-name">Mobile<small>393 × 852</small></span><span class="ef-sheet"><b>Describe this screen</b></span></button>
|
|
31
|
+
</div>
|
|
32
|
+
<p class="empty-note"><span class="empty-own">Pick one and say what it should be. Or ask your agent: </span><code>Use the Loop skill to put this project on a canvas.</code></p>
|
|
32
33
|
</div>
|
|
33
34
|
</div>
|
|
34
35
|
</div>
|
|
35
36
|
|
|
36
37
|
<header id="topbar">
|
|
37
38
|
<div class="brand">
|
|
38
|
-
<span class="logo" aria-hidden="true"><svg viewBox="0 0 32 32"><rect x="3" y="3" width="26" height="26" rx="7"/><circle cx="16" cy="16" r="6.5"/></svg></span>
|
|
39
|
-
<span class="wordmark">Loop</span>
|
|
40
|
-
<span class="sep">/</span>
|
|
39
|
+
<span class="logo" aria-hidden="true" title="Loop"><svg viewBox="0 0 32 32"><rect x="3" y="3" width="26" height="26" rx="7"/><circle cx="16" cy="16" r="6.5"/></svg></span>
|
|
41
40
|
<span id="canvas-name" class="canvas-name" title="Rename canvas"></span>
|
|
42
41
|
</div>
|
|
43
42
|
<div class="top-right">
|
|
44
43
|
<div id="presence" class="presence"></div>
|
|
44
|
+
<button id="comments-btn" class="pill comments-btn" title="All comments"><i data-i="comments"></i><span id="comments-count"></span></button>
|
|
45
45
|
<button id="agent-pill" class="pill" title="Agent connection">
|
|
46
46
|
<span class="agent-dot"></span><span id="agent-label">Agent</span>
|
|
47
47
|
</button>
|
|
48
|
-
<button id="
|
|
48
|
+
<button id="update-pill" class="pill update-pill" hidden></button>
|
|
49
|
+
<button id="share-btn" class="pill share-btn">Share</button>
|
|
49
50
|
</div>
|
|
50
51
|
</header>
|
|
51
52
|
|
|
@@ -61,8 +62,9 @@
|
|
|
61
62
|
</button>
|
|
62
63
|
<button class="menu-item" data-mode="inbox">
|
|
63
64
|
<span class="radio"></span>
|
|
64
|
-
<span><b>The chat that launched Loop</b><small>Comments
|
|
65
|
+
<span><b>The chat that launched Loop</b><small>Comments go to that chat, with everything it already knows, and it replies here. If the chat isn't listening, comments wait for it.</small></span>
|
|
65
66
|
</button>
|
|
67
|
+
<div id="agent-allowed" class="agent-allowed" hidden></div>
|
|
66
68
|
</div>
|
|
67
69
|
|
|
68
70
|
<div id="share-menu" class="menu" hidden>
|
|
@@ -93,14 +95,15 @@
|
|
|
93
95
|
</div>
|
|
94
96
|
|
|
95
97
|
<nav id="toolbar" aria-label="Tools">
|
|
96
|
-
<button data-tool="select" title="Select
|
|
97
|
-
<button data-tool="
|
|
98
|
-
<button data-tool="pen" title="Draw (P)"><
|
|
99
|
-
<button data-tool="erase" title="Erase marks (E)"><
|
|
100
|
-
<button data-tool="
|
|
101
|
-
<button data-tool="comment" title="Point & comment (C)"><svg viewBox="0 0 24 24"><path d="M4 18.5V6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v8a2.5 2.5 0 01-2.5 2.5H8.5z"/></svg></button>
|
|
98
|
+
<div class="tb-group"><button id="move-btn" data-tool="select" title="Select (V)"><i data-i="select"></i></button><button class="tb-caret" id="move-caret" title="Select or Hand"><i data-i="down"></i></button></div>
|
|
99
|
+
<button data-tool="use" title="Interact (I)"><i data-i="point"></i></button>
|
|
100
|
+
<button data-tool="pen" title="Draw (P)"><i data-i="pen"></i></button>
|
|
101
|
+
<button data-tool="erase" title="Erase marks (E)"><i data-i="erase"></i></button>
|
|
102
|
+
<button data-tool="comment" title="Point & comment (C)"><i data-i="comment"></i></button>
|
|
102
103
|
<span class="tb-sep"></span>
|
|
103
|
-
<button id="
|
|
104
|
+
<button id="section-btn" data-tool="section" title="Section: drag to make a region that holds frames (⇧S)"><svg class="hi" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M4.5 3.75h6.5"/></svg></button>
|
|
105
|
+
<button id="new-frame-btn" data-tool="frame" class="tb-new" title="Frame (F)"><i data-i="frame"></i><span>Frame</span></button>
|
|
106
|
+
<div id="frame-tray" class="frame-tray" aria-label="Frame size"></div>
|
|
104
107
|
</nav>
|
|
105
108
|
|
|
106
109
|
<aside id="frame-panel" class="panel" hidden>
|
|
@@ -111,25 +114,34 @@
|
|
|
111
114
|
<div id="align-bar" hidden></div>
|
|
112
115
|
|
|
113
116
|
<div id="zoom">
|
|
117
|
+
<button id="theme-btn" title="Light or dark (⇧D)"><i data-i="sun"></i></button>
|
|
114
118
|
<button id="zoom-out" title="Zoom out (−)">−</button>
|
|
115
119
|
<button id="zoom-level" title="Fit all (Shift+1)">100%</button>
|
|
116
120
|
<button id="zoom-in" title="Zoom in (+)">+</button>
|
|
117
121
|
</div>
|
|
118
122
|
|
|
119
123
|
<div id="composer" class="pop" hidden>
|
|
120
|
-
<div class="prompt-head"><
|
|
124
|
+
<div class="prompt-head"><b id="prompt-title">What should this screen be?</b></div>
|
|
121
125
|
<div class="prompt-ideas" id="prompt-ideas"></div>
|
|
122
|
-
<div class="
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
<span
|
|
127
|
-
<span class="hint"><kbd>↵</kbd> send · <kbd>⇧↵</kbd> new line · <kbd>esc</kbd></span>
|
|
126
|
+
<div class="cbox">
|
|
127
|
+
<div class="c-chips"><span id="composer-area" class="chip chip-area" hidden></span><span id="composer-ink" class="chip" hidden></span></div>
|
|
128
|
+
<div class="c-files" hidden></div>
|
|
129
|
+
<textarea id="composer-input" rows="1" placeholder="Ask for a change"></textarea>
|
|
130
|
+
<span class="hint" hidden></span>
|
|
128
131
|
</div>
|
|
129
132
|
</div>
|
|
130
133
|
|
|
131
134
|
<div id="thread" class="pop" hidden></div>
|
|
132
135
|
|
|
136
|
+
<aside id="comments-panel" hidden>
|
|
137
|
+
<div class="cp-head">
|
|
138
|
+
<b>Comments</b>
|
|
139
|
+
<div class="cp-tabs"><button data-tab="open" class="on">Open <span></span></button><button data-tab="resolved">Resolved <span></span></button></div>
|
|
140
|
+
<button class="cp-x" title="Close"><i data-i="x"></i></button>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="cp-list"></div>
|
|
143
|
+
</aside>
|
|
144
|
+
|
|
133
145
|
<div id="ink-chip" hidden><button>Comment on marks</button></div>
|
|
134
146
|
|
|
135
147
|
<div id="new-frame" class="modal" hidden>
|
|
@@ -155,6 +167,11 @@
|
|
|
155
167
|
</div>
|
|
156
168
|
</div>
|
|
157
169
|
|
|
170
|
+
<div id="preset-menu" class="menu preset-menu" hidden></div>
|
|
171
|
+
<div id="tool-menu" class="menu tool-menu" hidden>
|
|
172
|
+
<button class="tm-item" data-pick-tool="select"><span class="tm-check"></span><i data-i="select"></i><span>Select</span><kbd>V</kbd></button>
|
|
173
|
+
<button class="tm-item" data-pick-tool="hand"><span class="tm-check"></span><i data-i="hand"></i><span>Hand</span><kbd>H</kbd></button>
|
|
174
|
+
</div>
|
|
158
175
|
<div id="toast" hidden></div>
|
|
159
176
|
<script src="/__loop/app/app.js" type="module"></script>
|
|
160
177
|
</body>
|