clawfire 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 (87) hide show
  1. package/README.md +182 -0
  2. package/dist/admin.cjs +309 -0
  3. package/dist/admin.cjs.map +1 -0
  4. package/dist/admin.d.cts +93 -0
  5. package/dist/admin.d.ts +93 -0
  6. package/dist/admin.js +274 -0
  7. package/dist/admin.js.map +1 -0
  8. package/dist/auth-DQ3cifhb.d.cts +55 -0
  9. package/dist/auth-DtnUPbXT.d.ts +55 -0
  10. package/dist/chunk-37Y2XI7X.js +75 -0
  11. package/dist/chunk-YGIPORYL.js +339 -0
  12. package/dist/cli.js +241 -0
  13. package/dist/client.cjs +97 -0
  14. package/dist/client.cjs.map +1 -0
  15. package/dist/client.d.cts +4 -0
  16. package/dist/client.d.ts +4 -0
  17. package/dist/client.js +68 -0
  18. package/dist/client.js.map +1 -0
  19. package/dist/codegen.cjs +648 -0
  20. package/dist/codegen.cjs.map +1 -0
  21. package/dist/codegen.d.cts +25 -0
  22. package/dist/codegen.d.ts +25 -0
  23. package/dist/codegen.js +617 -0
  24. package/dist/codegen.js.map +1 -0
  25. package/dist/config-QMBJRn9G.d.cts +46 -0
  26. package/dist/config-QMBJRn9G.d.ts +46 -0
  27. package/dist/dev-server-QAVWINAT.js +973 -0
  28. package/dist/dev.cjs +1388 -0
  29. package/dist/dev.cjs.map +1 -0
  30. package/dist/dev.d.cts +111 -0
  31. package/dist/dev.d.ts +111 -0
  32. package/dist/dev.js +1349 -0
  33. package/dist/dev.js.map +1 -0
  34. package/dist/discover-BPMAZFBD.js +9 -0
  35. package/dist/discover-DYNqz_ym.d.cts +28 -0
  36. package/dist/discover-DYNqz_ym.d.ts +28 -0
  37. package/dist/errors-s_mP7rs9.d.cts +33 -0
  38. package/dist/errors-s_mP7rs9.d.ts +33 -0
  39. package/dist/functions.cjs +1156 -0
  40. package/dist/functions.cjs.map +1 -0
  41. package/dist/functions.d.cts +115 -0
  42. package/dist/functions.d.ts +115 -0
  43. package/dist/functions.js +1108 -0
  44. package/dist/functions.js.map +1 -0
  45. package/dist/hosting-7WVFHAYJ.js +85 -0
  46. package/dist/html-PCUCJGBH.js +7 -0
  47. package/dist/index.cjs +349 -0
  48. package/dist/index.cjs.map +1 -0
  49. package/dist/index.d.cts +22 -0
  50. package/dist/index.d.ts +22 -0
  51. package/dist/index.js +312 -0
  52. package/dist/index.js.map +1 -0
  53. package/dist/playground.cjs +364 -0
  54. package/dist/playground.cjs.map +1 -0
  55. package/dist/playground.d.cts +12 -0
  56. package/dist/playground.d.ts +12 -0
  57. package/dist/playground.js +337 -0
  58. package/dist/playground.js.map +1 -0
  59. package/dist/router-BVB_I-tu.d.ts +65 -0
  60. package/dist/router-Cikk8Heq.d.cts +65 -0
  61. package/dist/schema-BJsictSV.d.cts +172 -0
  62. package/dist/schema-BJsictSV.d.ts +172 -0
  63. package/package.json +150 -0
  64. package/templates/CLAUDE.md +71 -0
  65. package/templates/app/routes/auth/login.ts +35 -0
  66. package/templates/app/routes/health.ts +20 -0
  67. package/templates/app/schemas/user.ts +26 -0
  68. package/templates/clawfire.config.ts +25 -0
  69. package/templates/functions/index.ts +43 -0
  70. package/templates/starter/.claude/skills/clawfire-api/SKILL.md +131 -0
  71. package/templates/starter/.claude/skills/clawfire-auth/SKILL.md +111 -0
  72. package/templates/starter/.claude/skills/clawfire-deploy/SKILL.md +95 -0
  73. package/templates/starter/.claude/skills/clawfire-diagnose/SKILL.md +99 -0
  74. package/templates/starter/.claude/skills/clawfire-model/SKILL.md +128 -0
  75. package/templates/starter/CLAUDE.md +227 -0
  76. package/templates/starter/app/routes/health.ts +20 -0
  77. package/templates/starter/app/routes/todos/create.ts +25 -0
  78. package/templates/starter/app/routes/todos/delete.ts +20 -0
  79. package/templates/starter/app/routes/todos/list.ts +26 -0
  80. package/templates/starter/app/routes/todos/update.ts +32 -0
  81. package/templates/starter/app/schemas/todo.ts +16 -0
  82. package/templates/starter/app/store.ts +56 -0
  83. package/templates/starter/clawfire.config.ts +25 -0
  84. package/templates/starter/dev.ts +12 -0
  85. package/templates/starter/package.json +19 -0
  86. package/templates/starter/public/index.html +365 -0
  87. package/templates/starter/tsconfig.json +17 -0
package/dist/playground.cjs ADDED
@@ -0,0 +1,364 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/playground.ts
21
+ var playground_exports = {};
22
+ __export(playground_exports, {
23
+ generatePlaygroundHtml: () => generatePlaygroundHtml
24
+ });
25
+ module.exports = __toCommonJS(playground_exports);
26
+
27
+ // src/playground/html.ts
28
+ function generatePlaygroundHtml(options) {
29
+ const title = options?.title || "Clawfire Playground";
30
+ const apiBaseUrl = options?.apiBaseUrl || "";
31
+ return `<!DOCTYPE html>
32
+ <html lang="en">
33
+ <head>
34
+ <meta charset="UTF-8">
35
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
36
+ <title>${title}</title>
37
+ <style>
38
+ :root {
39
+ --bg: #0a0a0a;
40
+ --surface: #141414;
41
+ --surface2: #1e1e1e;
42
+ --border: #2a2a2a;
43
+ --text: #e5e5e5;
44
+ --text2: #a3a3a3;
45
+ --accent: #f97316;
46
+ --accent2: #fb923c;
47
+ --green: #22c55e;
48
+ --red: #ef4444;
49
+ --blue: #3b82f6;
50
+ --yellow: #eab308;
51
+ --radius: 8px;
52
+ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
53
+ --mono: 'JetBrains Mono', 'Fira Code', monospace;
54
+ }
55
+ * { margin: 0; padding: 0; box-sizing: border-box; }
56
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
57
+
58
+ .layout { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }
59
+ .sidebar { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; }
60
+ .main { padding: 24px; overflow-y: auto; }
61
+
62
+ .logo { padding: 20px; border-bottom: 1px solid var(--border); }
63
+ .logo h1 { font-size: 20px; font-weight: 700; color: var(--accent); }
64
+ .logo p { font-size: 12px; color: var(--text2); margin-top: 4px; }
65
+
66
+ .auth-section { padding: 16px; border-bottom: 1px solid var(--border); }
67
+ .auth-section label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 6px; }
68
+ .auth-input { width: 100%; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);
69
+ border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 12px; }
70
+ .auth-status { font-size: 11px; margin-top: 6px; }
71
+ .auth-status.ok { color: var(--green); }
72
+ .auth-status.no { color: var(--text2); }
73
+
74
+ .search { padding: 12px 16px; border-bottom: 1px solid var(--border); }
75
+ .search input { width: 100%; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);
76
+ border-radius: var(--radius); color: var(--text); font-size: 13px; }
77
+
78
+ .api-list { padding: 8px 0; }
79
+ .api-group { padding: 4px 0; }
80
+ .api-group-title { padding: 8px 16px; font-size: 11px; color: var(--text2); text-transform: uppercase;
81
+ letter-spacing: 0.5px; font-weight: 600; }
82
+ .api-item { padding: 8px 16px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center;
83
+ gap: 8px; font-size: 13px; }
84
+ .api-item:hover { background: var(--surface2); }
85
+ .api-item.active { background: var(--surface2); border-left: 2px solid var(--accent); }
86
+ .api-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
87
+ .badge-public { background: #22c55e20; color: var(--green); }
88
+ .badge-auth { background: #3b82f620; color: var(--blue); }
89
+ .badge-role { background: #eab30820; color: var(--yellow); }
90
+ .badge-reauth { background: #ef444420; color: var(--red); }
91
+
92
+ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
93
+ .panel-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center;
94
+ justify-content: space-between; }
95
+ .panel-header h2 { font-size: 16px; font-weight: 600; }
96
+ .panel-body { padding: 16px; }
97
+
98
+ .field { margin-bottom: 12px; }
99
+ .field label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 4px; }
100
+ .field-type { font-size: 11px; color: var(--text2); font-family: var(--mono); }
101
+ .field-required { color: var(--red); font-size: 11px; }
102
+
103
+ textarea, input[type="text"] { width: 100%; padding: 10px 14px; background: var(--surface2);
104
+ border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
105
+ font-family: var(--mono); font-size: 13px; resize: vertical; }
106
+ textarea { min-height: 200px; }
107
+
108
+ .btn { padding: 10px 20px; border: none; border-radius: var(--radius); font-size: 14px;
109
+ font-weight: 600; cursor: pointer; transition: all 0.15s; }
110
+ .btn-primary { background: var(--accent); color: white; }
111
+ .btn-primary:hover { background: var(--accent2); }
112
+ .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
113
+
114
+ .response-section { margin-top: 16px; }
115
+ .status-badge { font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
116
+ .status-ok { background: #22c55e20; color: var(--green); }
117
+ .status-err { background: #ef444420; color: var(--red); }
118
+ pre { background: var(--surface2); padding: 16px; border-radius: var(--radius); overflow-x: auto;
119
+ font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
120
+
121
+ .schema-info { font-size: 12px; color: var(--text2); line-height: 1.6; }
122
+ .schema-info code { background: var(--surface2); padding: 2px 6px; border-radius: 4px; font-family: var(--mono);
123
+ font-size: 11px; }
124
+
125
+ .empty-state { text-align: center; padding: 80px 40px; color: var(--text2); }
126
+ .empty-state h2 { font-size: 24px; margin-bottom: 8px; color: var(--text); }
127
+
128
+ .timer { font-size: 12px; color: var(--text2); font-family: var(--mono); }
129
+
130
+ @media (max-width: 768px) {
131
+ .layout { grid-template-columns: 1fr; }
132
+ .sidebar { max-height: 40vh; }
133
+ }
134
+ </style>
135
+ </head>
136
+ <body>
137
+ <div class="layout">
138
+ <div class="sidebar">
139
+ <div class="logo">
140
+ <h1>Clawfire</h1>
141
+ <p>API Playground</p>
142
+ </div>
143
+ <div class="auth-section">
144
+ <label>Bearer Token</label>
145
+ <input type="text" class="auth-input" id="token-input" placeholder="Paste your ID token...">
146
+ <div class="auth-status no" id="auth-status">Not authenticated</div>
147
+ </div>
148
+ <div class="search">
149
+ <input type="text" id="search-input" placeholder="Search APIs...">
150
+ </div>
151
+ <div class="api-list" id="api-list"></div>
152
+ </div>
153
+ <div class="main" id="main-content">
154
+ <div class="empty-state">
155
+ <h2>Select an API</h2>
156
+ <p>Choose an API from the sidebar to test it.</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <script>
162
+ const BASE_URL = ${JSON.stringify(apiBaseUrl)} || window.location.origin;
163
+ let manifest = null;
164
+ let selectedApi = null;
165
+
166
+ async function loadManifest() {
167
+ try {
168
+ const res = await fetch(BASE_URL + '/api/__manifest', { method: 'POST' });
169
+ manifest = await res.json();
170
+ renderApiList(manifest.apis);
171
+ } catch (e) {
172
+ document.getElementById('api-list').innerHTML =
173
+ '<div style="padding:16px;color:var(--red);font-size:13px;">Failed to load API manifest. Make sure your server is running.</div>';
174
+ }
175
+ }
176
+
177
+ function renderApiList(apis) {
178
+ const groups = {};
179
+ apis.forEach(api => {
180
+ const parts = api.path.split('/').filter(Boolean);
181
+ const group = parts.length > 1 ? parts[0] : 'root';
182
+ if (!groups[group]) groups[group] = [];
183
+ groups[group].push(api);
184
+ });
185
+
186
+ const el = document.getElementById('api-list');
187
+ el.innerHTML = Object.entries(groups).map(([group, items]) =>
188
+ '<div class="api-group">' +
189
+ '<div class="api-group-title">' + group + '</div>' +
190
+ items.map(api => {
191
+ const auth = api.meta.auth || 'public';
192
+ const badgeClass = 'badge-' + auth;
193
+ return '<div class="api-item" onclick="selectApi(\\'' + api.path + '\\')">' +
194
+ '<span class="api-badge ' + badgeClass + '">' + auth.toUpperCase() + '</span>' +
195
+ '<span>' + api.path + '</span>' +
196
+ '</div>';
197
+ }).join('') +
198
+ '</div>'
199
+ ).join('');
200
+ }
201
+
202
+ function selectApi(path) {
203
+ selectedApi = manifest.apis.find(a => a.path === path);
204
+ if (!selectedApi) return;
205
+
206
+ document.querySelectorAll('.api-item').forEach(el => el.classList.remove('active'));
207
+ event.currentTarget?.classList.add('active');
208
+
209
+ const main = document.getElementById('main-content');
210
+ const exampleInput = selectedApi.meta.exampleInput
211
+ ? JSON.stringify(selectedApi.meta.exampleInput, null, 2)
212
+ : generateExampleFromSchema(selectedApi.inputSchema);
213
+
214
+ main.innerHTML =
215
+ '<div class="panel">' +
216
+ '<div class="panel-header">' +
217
+ '<h2>POST ' + selectedApi.path + '</h2>' +
218
+ '<span class="api-badge badge-' + (selectedApi.meta.auth || 'public') + '">' +
219
+ (selectedApi.meta.auth || 'public').toUpperCase() + '</span>' +
220
+ '</div>' +
221
+ '<div class="panel-body">' +
222
+ '<p style="color:var(--text2);margin-bottom:16px;">' + (selectedApi.meta.description || '') + '</p>' +
223
+ (selectedApi.meta.tags ? '<div style="margin-bottom:12px;">' + selectedApi.meta.tags.map(t =>
224
+ '<span style="background:var(--surface2);padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px;">' + t + '</span>'
225
+ ).join('') + '</div>' : '') +
226
+ '<div class="schema-info" style="margin-bottom:16px;">' +
227
+ '<strong>Input Schema:</strong><br>' + renderSchemaInfo(selectedApi.inputSchema) +
228
+ '</div>' +
229
+ '<div class="schema-info" style="margin-bottom:16px;">' +
230
+ '<strong>Output Schema:</strong><br>' + renderSchemaInfo(selectedApi.outputSchema) +
231
+ '</div>' +
232
+ '</div>' +
233
+ '</div>' +
234
+ '<div class="panel">' +
235
+ '<div class="panel-header"><h2>Request</h2></div>' +
236
+ '<div class="panel-body">' +
237
+ '<textarea id="req-body" placeholder="Request JSON body">' + exampleInput + '</textarea>' +
238
+ '<div style="margin-top:12px;display:flex;align-items:center;gap:12px;">' +
239
+ '<button class="btn btn-primary" onclick="sendRequest()">Send Request</button>' +
240
+ '<span class="timer" id="timer"></span>' +
241
+ '</div>' +
242
+ '</div>' +
243
+ '</div>' +
244
+ '<div class="response-section" id="response-section"></div>';
245
+ }
246
+
247
+ function renderSchemaInfo(schema) {
248
+ if (!schema || !schema.properties) return '<code>void</code>';
249
+ return Object.entries(schema.properties).map(([key, prop]) => {
250
+ const required = schema.required?.includes(key);
251
+ const type = prop.type || 'unknown';
252
+ const enumVals = prop.enum ? ' (' + prop.enum.join(', ') + ')' : '';
253
+ return '<code>' + key + '</code>: <span class="field-type">' + type + enumVals + '</span>' +
254
+ (required ? ' <span class="field-required">required</span>' : ' <span style="color:var(--text2);font-size:11px;">optional</span>');
255
+ }).join('<br>');
256
+ }
257
+
258
+ function generateExampleFromSchema(schema) {
259
+ if (!schema || !schema.properties) return '{}';
260
+ const obj = {};
261
+ for (const [key, prop] of Object.entries(schema.properties)) {
262
+ if (prop.enum) { obj[key] = prop.enum[0]; continue; }
263
+ switch (prop.type) {
264
+ case 'string': obj[key] = prop.format === 'email' ? 'user@example.com' : 'string'; break;
265
+ case 'number': obj[key] = 0; break;
266
+ case 'boolean': obj[key] = false; break;
267
+ case 'array': obj[key] = []; break;
268
+ case 'object': obj[key] = {}; break;
269
+ default: obj[key] = null;
270
+ }
271
+ }
272
+ return JSON.stringify(obj, null, 2);
273
+ }
274
+
275
+ async function sendRequest() {
276
+ if (!selectedApi) return;
277
+ const body = document.getElementById('req-body').value;
278
+ const token = document.getElementById('token-input').value;
279
+ const timer = document.getElementById('timer');
280
+ const section = document.getElementById('response-section');
281
+
282
+ let parsed;
283
+ try { parsed = JSON.parse(body); } catch {
284
+ section.innerHTML = '<div class="panel"><div class="panel-body"><pre style="color:var(--red)">Invalid JSON</pre></div></div>';
285
+ return;
286
+ }
287
+
288
+ const start = performance.now();
289
+ timer.textContent = 'Sending...';
290
+
291
+ try {
292
+ const headers = { 'Content-Type': 'application/json' };
293
+ if (token) headers['Authorization'] = 'Bearer ' + token;
294
+
295
+ const res = await fetch(BASE_URL + '/api' + selectedApi.path, {
296
+ method: 'POST', headers, body: JSON.stringify(parsed)
297
+ });
298
+ const elapsed = Math.round(performance.now() - start);
299
+ timer.textContent = elapsed + 'ms';
300
+
301
+ const json = await res.json();
302
+ const isOk = res.ok;
303
+
304
+ section.innerHTML =
305
+ '<div class="panel">' +
306
+ '<div class="panel-header">' +
307
+ '<h2>Response</h2>' +
308
+ '<span class="status-badge ' + (isOk ? 'status-ok' : 'status-err') + '">' +
309
+ res.status + ' ' + res.statusText + '</span>' +
310
+ '</div>' +
311
+ '<div class="panel-body"><pre>' + syntaxHighlight(JSON.stringify(json, null, 2)) + '</pre></div>' +
312
+ '</div>';
313
+ } catch (e) {
314
+ const elapsed = Math.round(performance.now() - start);
315
+ timer.textContent = elapsed + 'ms';
316
+ section.innerHTML =
317
+ '<div class="panel"><div class="panel-body"><pre style="color:var(--red)">Network error: ' + e.message + '</pre></div></div>';
318
+ }
319
+ }
320
+
321
+ function syntaxHighlight(json) {
322
+ return json.replace(/("(\\\\u[a-fA-F0-9]{4}|\\\\[^u]|[^\\\\"])*"(\\s*:)?)|\\b(true|false|null)\\b|-?\\d+(\\.\\d+)?([eE][+-]?\\d+)?/g,
323
+ function(match) {
324
+ let cls = 'color:#eab308';
325
+ if (/^"/.test(match)) {
326
+ if (/:$/.test(match)) cls = 'color:#3b82f6';
327
+ else cls = 'color:#22c55e';
328
+ } else if (/true|false/.test(match)) cls = 'color:#f97316';
329
+ else if (/null/.test(match)) cls = 'color:#ef4444';
330
+ return '<span style="' + cls + '">' + match + '</span>';
331
+ }
332
+ );
333
+ }
334
+
335
+ // Search
336
+ document.getElementById('search-input')?.addEventListener('input', (e) => {
337
+ if (!manifest) return;
338
+ const q = e.target.value.toLowerCase();
339
+ const filtered = manifest.apis.filter(a => a.path.toLowerCase().includes(q) || a.meta.description?.toLowerCase().includes(q));
340
+ renderApiList(filtered);
341
+ });
342
+
343
+ // Token status
344
+ document.getElementById('token-input')?.addEventListener('input', (e) => {
345
+ const el = document.getElementById('auth-status');
346
+ if (e.target.value) {
347
+ el.textContent = 'Token set';
348
+ el.className = 'auth-status ok';
349
+ } else {
350
+ el.textContent = 'Not authenticated';
351
+ el.className = 'auth-status no';
352
+ }
353
+ });
354
+
355
+ loadManifest();
356
+ </script>
357
+ </body>
358
+ </html>`;
359
+ }
360
+ // Annotate the CommonJS export names for ESM import in node:
361
+ 0 && (module.exports = {
362
+ generatePlaygroundHtml
363
+ });
364
+ //# sourceMappingURL=playground.cjs.map
package/dist/playground.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/playground.ts","../src/playground/html.ts"],"sourcesContent":["/**\n * Clawfire Playground Entry Point\n */\n\nexport { generatePlaygroundHtml } from \"./playground/index.js\";\n","/**\n * Clawfire Playground\n *\n * 웹 기반 API 탐색기: API 목록, 인증 테스트, 요청/응답 뷰어\n * 단일 HTML 파일로 생성되어 Firebase Hosting에 배포됩니다.\n */\n\nexport function generatePlaygroundHtml(options?: {\n title?: string;\n apiBaseUrl?: string;\n}): string {\n const title = options?.title || \"Clawfire Playground\";\n const apiBaseUrl = options?.apiBaseUrl || \"\";\n\n return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${title}</title>\n <style>\n :root {\n --bg: #0a0a0a;\n --surface: #141414;\n --surface2: #1e1e1e;\n --border: #2a2a2a;\n --text: #e5e5e5;\n --text2: #a3a3a3;\n --accent: #f97316;\n --accent2: #fb923c;\n --green: #22c55e;\n --red: #ef4444;\n --blue: #3b82f6;\n --yellow: #eab308;\n --radius: 8px;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --mono: 'JetBrains Mono', 'Fira Code', monospace;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }\n\n .layout { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }\n .sidebar { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; }\n .main { padding: 24px; overflow-y: auto; }\n\n .logo { padding: 20px; border-bottom: 1px solid var(--border); }\n .logo h1 { font-size: 20px; font-weight: 700; color: var(--accent); }\n .logo p { font-size: 12px; color: var(--text2); margin-top: 4px; }\n\n .auth-section { padding: 16px; border-bottom: 1px solid var(--border); }\n .auth-section label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 6px; }\n .auth-input { width: 100%; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 12px; }\n .auth-status { font-size: 11px; margin-top: 6px; }\n .auth-status.ok { color: var(--green); }\n .auth-status.no { color: var(--text2); }\n\n .search { padding: 12px 16px; border-bottom: 1px solid var(--border); }\n .search input { width: 100%; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius); color: var(--text); font-size: 13px; }\n\n .api-list { padding: 8px 0; }\n .api-group { padding: 4px 0; }\n .api-group-title { padding: 8px 16px; font-size: 11px; color: var(--text2); text-transform: uppercase;\n letter-spacing: 0.5px; font-weight: 600; }\n .api-item { padding: 8px 16px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center;\n gap: 8px; font-size: 13px; }\n .api-item:hover { background: var(--surface2); }\n .api-item.active { background: var(--surface2); border-left: 2px solid var(--accent); }\n .api-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }\n .badge-public { background: #22c55e20; color: var(--green); }\n .badge-auth { background: #3b82f620; color: var(--blue); }\n .badge-role { background: #eab30820; color: var(--yellow); }\n .badge-reauth { background: #ef444420; color: var(--red); }\n\n .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }\n .panel-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center;\n justify-content: space-between; }\n .panel-header h2 { font-size: 16px; font-weight: 600; }\n .panel-body { padding: 16px; }\n\n .field { margin-bottom: 12px; }\n .field label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 4px; }\n .field-type { font-size: 11px; color: var(--text2); font-family: var(--mono); }\n .field-required { color: var(--red); font-size: 11px; }\n\n textarea, input[type=\"text\"] { width: 100%; padding: 10px 14px; background: var(--surface2);\n border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);\n font-family: var(--mono); font-size: 13px; resize: vertical; }\n textarea { min-height: 200px; }\n\n .btn { padding: 10px 20px; border: none; border-radius: var(--radius); font-size: 14px;\n font-weight: 600; cursor: pointer; transition: all 0.15s; }\n .btn-primary { background: var(--accent); color: white; }\n .btn-primary:hover { background: var(--accent2); }\n .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }\n\n .response-section { margin-top: 16px; }\n .status-badge { font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }\n .status-ok { background: #22c55e20; color: var(--green); }\n .status-err { background: #ef444420; color: var(--red); }\n pre { background: var(--surface2); padding: 16px; border-radius: var(--radius); overflow-x: auto;\n font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }\n\n .schema-info { font-size: 12px; color: var(--text2); line-height: 1.6; }\n .schema-info code { background: var(--surface2); padding: 2px 6px; border-radius: 4px; font-family: var(--mono);\n font-size: 11px; }\n\n .empty-state { text-align: center; padding: 80px 40px; color: var(--text2); }\n .empty-state h2 { font-size: 24px; margin-bottom: 8px; color: var(--text); }\n\n .timer { font-size: 12px; color: var(--text2); font-family: var(--mono); }\n\n @media (max-width: 768px) {\n .layout { grid-template-columns: 1fr; }\n .sidebar { max-height: 40vh; }\n }\n </style>\n</head>\n<body>\n <div class=\"layout\">\n <div class=\"sidebar\">\n <div class=\"logo\">\n <h1>Clawfire</h1>\n <p>API Playground</p>\n </div>\n <div class=\"auth-section\">\n <label>Bearer Token</label>\n <input type=\"text\" class=\"auth-input\" id=\"token-input\" placeholder=\"Paste your ID token...\">\n <div class=\"auth-status no\" id=\"auth-status\">Not authenticated</div>\n </div>\n <div class=\"search\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search APIs...\">\n </div>\n <div class=\"api-list\" id=\"api-list\"></div>\n </div>\n <div class=\"main\" id=\"main-content\">\n <div class=\"empty-state\">\n <h2>Select an API</h2>\n <p>Choose an API from the sidebar to test it.</p>\n </div>\n </div>\n </div>\n\n <script>\n const BASE_URL = ${JSON.stringify(apiBaseUrl)} || window.location.origin;\n let manifest = null;\n let selectedApi = null;\n\n async function loadManifest() {\n try {\n const res = await fetch(BASE_URL + '/api/__manifest', { method: 'POST' });\n manifest = await res.json();\n renderApiList(manifest.apis);\n } catch (e) {\n document.getElementById('api-list').innerHTML =\n '<div style=\"padding:16px;color:var(--red);font-size:13px;\">Failed to load API manifest. Make sure your server is running.</div>';\n }\n }\n\n function renderApiList(apis) {\n const groups = {};\n apis.forEach(api => {\n const parts = api.path.split('/').filter(Boolean);\n const group = parts.length > 1 ? parts[0] : 'root';\n if (!groups[group]) groups[group] = [];\n groups[group].push(api);\n });\n\n const el = document.getElementById('api-list');\n el.innerHTML = Object.entries(groups).map(([group, items]) =>\n '<div class=\"api-group\">' +\n '<div class=\"api-group-title\">' + group + '</div>' +\n items.map(api => {\n const auth = api.meta.auth || 'public';\n const badgeClass = 'badge-' + auth;\n return '<div class=\"api-item\" onclick=\"selectApi(\\\\'' + api.path + '\\\\')\">' +\n '<span class=\"api-badge ' + badgeClass + '\">' + auth.toUpperCase() + '</span>' +\n '<span>' + api.path + '</span>' +\n '</div>';\n }).join('') +\n '</div>'\n ).join('');\n }\n\n function selectApi(path) {\n selectedApi = manifest.apis.find(a => a.path === path);\n if (!selectedApi) return;\n\n document.querySelectorAll('.api-item').forEach(el => el.classList.remove('active'));\n event.currentTarget?.classList.add('active');\n\n const main = document.getElementById('main-content');\n const exampleInput = selectedApi.meta.exampleInput\n ? JSON.stringify(selectedApi.meta.exampleInput, null, 2)\n : generateExampleFromSchema(selectedApi.inputSchema);\n\n main.innerHTML =\n '<div class=\"panel\">' +\n '<div class=\"panel-header\">' +\n '<h2>POST ' + selectedApi.path + '</h2>' +\n '<span class=\"api-badge badge-' + (selectedApi.meta.auth || 'public') + '\">' +\n (selectedApi.meta.auth || 'public').toUpperCase() + '</span>' +\n '</div>' +\n '<div class=\"panel-body\">' +\n '<p style=\"color:var(--text2);margin-bottom:16px;\">' + (selectedApi.meta.description || '') + '</p>' +\n (selectedApi.meta.tags ? '<div style=\"margin-bottom:12px;\">' + selectedApi.meta.tags.map(t =>\n '<span style=\"background:var(--surface2);padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px;\">' + t + '</span>'\n ).join('') + '</div>' : '') +\n '<div class=\"schema-info\" style=\"margin-bottom:16px;\">' +\n '<strong>Input Schema:</strong><br>' + renderSchemaInfo(selectedApi.inputSchema) +\n '</div>' +\n '<div class=\"schema-info\" style=\"margin-bottom:16px;\">' +\n '<strong>Output Schema:</strong><br>' + renderSchemaInfo(selectedApi.outputSchema) +\n '</div>' +\n '</div>' +\n '</div>' +\n '<div class=\"panel\">' +\n '<div class=\"panel-header\"><h2>Request</h2></div>' +\n '<div class=\"panel-body\">' +\n '<textarea id=\"req-body\" placeholder=\"Request JSON body\">' + exampleInput + '</textarea>' +\n '<div style=\"margin-top:12px;display:flex;align-items:center;gap:12px;\">' +\n '<button class=\"btn btn-primary\" onclick=\"sendRequest()\">Send Request</button>' +\n '<span class=\"timer\" id=\"timer\"></span>' +\n '</div>' +\n '</div>' +\n '</div>' +\n '<div class=\"response-section\" id=\"response-section\"></div>';\n }\n\n function renderSchemaInfo(schema) {\n if (!schema || !schema.properties) return '<code>void</code>';\n return Object.entries(schema.properties).map(([key, prop]) => {\n const required = schema.required?.includes(key);\n const type = prop.type || 'unknown';\n const enumVals = prop.enum ? ' (' + prop.enum.join(', ') + ')' : '';\n return '<code>' + key + '</code>: <span class=\"field-type\">' + type + enumVals + '</span>' +\n (required ? ' <span class=\"field-required\">required</span>' : ' <span style=\"color:var(--text2);font-size:11px;\">optional</span>');\n }).join('<br>');\n }\n\n function generateExampleFromSchema(schema) {\n if (!schema || !schema.properties) return '{}';\n const obj = {};\n for (const [key, prop] of Object.entries(schema.properties)) {\n if (prop.enum) { obj[key] = prop.enum[0]; continue; }\n switch (prop.type) {\n case 'string': obj[key] = prop.format === 'email' ? 'user@example.com' : 'string'; break;\n case 'number': obj[key] = 0; break;\n case 'boolean': obj[key] = false; break;\n case 'array': obj[key] = []; break;\n case 'object': obj[key] = {}; break;\n default: obj[key] = null;\n }\n }\n return JSON.stringify(obj, null, 2);\n }\n\n async function sendRequest() {\n if (!selectedApi) return;\n const body = document.getElementById('req-body').value;\n const token = document.getElementById('token-input').value;\n const timer = document.getElementById('timer');\n const section = document.getElementById('response-section');\n\n let parsed;\n try { parsed = JSON.parse(body); } catch {\n section.innerHTML = '<div class=\"panel\"><div class=\"panel-body\"><pre style=\"color:var(--red)\">Invalid JSON</pre></div></div>';\n return;\n }\n\n const start = performance.now();\n timer.textContent = 'Sending...';\n\n try {\n const headers = { 'Content-Type': 'application/json' };\n if (token) headers['Authorization'] = 'Bearer ' + token;\n\n const res = await fetch(BASE_URL + '/api' + selectedApi.path, {\n method: 'POST', headers, body: JSON.stringify(parsed)\n });\n const elapsed = Math.round(performance.now() - start);\n timer.textContent = elapsed + 'ms';\n\n const json = await res.json();\n const isOk = res.ok;\n\n section.innerHTML =\n '<div class=\"panel\">' +\n '<div class=\"panel-header\">' +\n '<h2>Response</h2>' +\n '<span class=\"status-badge ' + (isOk ? 'status-ok' : 'status-err') + '\">' +\n res.status + ' ' + res.statusText + '</span>' +\n '</div>' +\n '<div class=\"panel-body\"><pre>' + syntaxHighlight(JSON.stringify(json, null, 2)) + '</pre></div>' +\n '</div>';\n } catch (e) {\n const elapsed = Math.round(performance.now() - start);\n timer.textContent = elapsed + 'ms';\n section.innerHTML =\n '<div class=\"panel\"><div class=\"panel-body\"><pre style=\"color:var(--red)\">Network error: ' + e.message + '</pre></div></div>';\n }\n }\n\n function syntaxHighlight(json) {\n return json.replace(/(\"(\\\\\\\\u[a-fA-F0-9]{4}|\\\\\\\\[^u]|[^\\\\\\\\\"])*\"(\\\\s*:)?)|\\\\b(true|false|null)\\\\b|-?\\\\d+(\\\\.\\\\d+)?([eE][+-]?\\\\d+)?/g,\n function(match) {\n let cls = 'color:#eab308';\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) cls = 'color:#3b82f6';\n else cls = 'color:#22c55e';\n } else if (/true|false/.test(match)) cls = 'color:#f97316';\n else if (/null/.test(match)) cls = 'color:#ef4444';\n return '<span style=\"' + cls + '\">' + match + '</span>';\n }\n );\n }\n\n // Search\n document.getElementById('search-input')?.addEventListener('input', (e) => {\n if (!manifest) return;\n const q = e.target.value.toLowerCase();\n const filtered = manifest.apis.filter(a => a.path.toLowerCase().includes(q) || a.meta.description?.toLowerCase().includes(q));\n renderApiList(filtered);\n });\n\n // Token status\n document.getElementById('token-input')?.addEventListener('input', (e) => {\n const el = document.getElementById('auth-status');\n if (e.target.value) {\n el.textContent = 'Token set';\n el.className = 'auth-status ok';\n } else {\n el.textContent = 'Not authenticated';\n el.className = 'auth-status no';\n }\n });\n\n loadManifest();\n </script>\n</body>\n</html>`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOO,SAAS,uBAAuB,SAG5B;AACT,QAAM,QAAQ,SAAS,SAAS;AAChC,QAAM,aAAa,SAAS,cAAc;AAE1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKE,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBA8HO,KAAK,UAAU,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqMjD;","names":[]}
package/dist/playground.d.cts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Clawfire Playground
3
+ *
4
+ * 웹 기반 API 탐색기: API 목록, 인증 테스트, 요청/응답 뷰어
5
+ * 단일 HTML 파일로 생성되어 Firebase Hosting에 배포됩니다.
6
+ */
7
+ declare function generatePlaygroundHtml(options?: {
8
+ title?: string;
9
+ apiBaseUrl?: string;
10
+ }): string;
11
+
12
+ export { generatePlaygroundHtml };
package/dist/playground.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Clawfire Playground
3
+ *
4
+ * 웹 기반 API 탐색기: API 목록, 인증 테스트, 요청/응답 뷰어
5
+ * 단일 HTML 파일로 생성되어 Firebase Hosting에 배포됩니다.
6
+ */
7
+ declare function generatePlaygroundHtml(options?: {
8
+ title?: string;
9
+ apiBaseUrl?: string;
10
+ }): string;
11
+
12
+ export { generatePlaygroundHtml };