@kolbo/mcp 1.30.8 → 1.30.10

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/apps/bridge.js +5 -1
  3. package/src/apps/html.js +4 -3
  4. package/src/apps/theme.js +16 -6
  5. package/src/apps/widgets/generation.js +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolbo/mcp",
3
- "version": "1.30.8",
3
+ "version": "1.30.10",
4
4
  "description": "Kolbo AI MCP Server - Generate images, videos, music, speech, and sound effects from Claude Code",
5
5
  "main": "src/index.js",
6
6
  "bin": {
package/src/apps/bridge.js CHANGED
@@ -106,8 +106,12 @@ const BRIDGE_JS = `
106
106
  clearTimeout(sizeTimer);
107
107
  sizeTimer = setTimeout(notifySize, delay || 120);
108
108
  }
109
+ // With ResizeObserver present, attribute churn (class/style toggles) that
110
+ // actually changes layout is caught by RO on the card — observing attributes
111
+ // here would just re-fire on EVERY class/style write. Only watch attributes
112
+ // as a fallback when RO is unavailable.
109
113
  new MutationObserver(function () { queueSize(120); })
110
- .observe(document.documentElement, { childList: true, subtree: true, attributes: true });
114
+ .observe(document.documentElement, { childList: true, subtree: true, attributes: !window.ResizeObserver });
111
115
  // DOM mutations don't fire when an <img>/<video> finishes loading and reflows
112
116
  // the card — without this the host keeps the pre-image height and the card
113
117
  // gets an inner scrollbar. ResizeObserver catches every layout change.
package/src/apps/html.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  const { BRIDGE_JS } = require('./bridge');
4
- const { KOLBO_CSS, KOLBO_LOGO_SVG } = require('./theme');
4
+ const { KOLBO_CSS, KOLBO_LOGO_SVG, KOLBO_LOGO_IMG } = require('./theme');
5
5
 
6
6
  /**
7
7
  * Assemble a self-contained widget page. No build step — each widget module
@@ -17,7 +17,7 @@ function widgetPage({ title, body, script }) {
17
17
  <title>${title}</title>
18
18
  <link rel="preconnect" href="https://fonts.googleapis.com">
19
19
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
20
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
21
21
  <style>${KOLBO_CSS}</style>
22
22
  </head>
23
23
  <body>
@@ -25,7 +25,8 @@ ${body}
25
25
  <script>${BRIDGE_JS}</script>
26
26
  <script>
27
27
  // ---- shared widget runtime ----
28
- var KOLBO_LOGO = ${JSON.stringify(KOLBO_LOGO_SVG)};
28
+ var KOLBO_LOGO_FALLBACK = ${JSON.stringify(KOLBO_LOGO_SVG)};
29
+ var KOLBO_LOGO = ${JSON.stringify(KOLBO_LOGO_IMG)};
29
30
  function esc(s) {
30
31
  return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
31
32
  return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
package/src/apps/theme.js CHANGED
@@ -115,7 +115,7 @@ body {
115
115
  .k-skel {
116
116
  position: relative; border-radius: 10px; overflow: hidden;
117
117
  background: var(--surface-2); border: 1px solid var(--border);
118
- min-height: 120px;
118
+ min-height: 120px; max-height: 300px;
119
119
  }
120
120
  .k-skel.video { aspect-ratio: 16 / 9; }
121
121
  .k-skel.square { aspect-ratio: 1; }
@@ -131,7 +131,9 @@ body {
131
131
  position: absolute; top: 10px; left: 10px; z-index: 2;
132
132
  display: inline-flex; align-items: center; gap: 6px;
133
133
  padding: 4px 10px; border-radius: 999px;
134
- background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px);
134
+ background: rgba(0, 0, 0, 0.65); /* no backdrop-filter: nested blur over the
135
+ animating k-sweep skeleton forced per-frame backdrop re-sampling on phones;
136
+ 0.65 black over the shimmer reads identically without it */
135
137
  border: 1px solid rgba(255, 255, 255, 0.14);
136
138
  font-size: 11px; font-weight: 600; color: #fff;
137
139
  }
@@ -157,9 +159,13 @@ body {
157
159
  .k-media img, .k-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
158
160
  .k-media.selected { outline: 2px solid var(--brand); outline-offset: 1px; }
159
161
 
162
+ /* Keep the whole completed card under the host's iframe height cap (~800px):
163
+ header + prompt + chips + viewer + thumbs + actions + footer must all fit,
164
+ or claude.ai adds an inner scrollbar. Click the image to open it full-size. */
160
165
  .k-viewer { margin-bottom: 10px; }
161
- .k-viewer img, .k-viewer video { display: block; width: 100%; max-height: 480px; object-fit: contain;
162
- border-radius: 12px; background: #000; border: 1px solid var(--border); }
166
+ .k-viewer img, .k-viewer video { display: block; width: 100%; max-height: 340px; object-fit: contain;
167
+ border-radius: 12px; background: #000; border: 1px solid var(--border); cursor: zoom-in; }
168
+ .k-viewer video { cursor: default; }
163
169
  .k-thumbs { display: flex; gap: 6px; margin: 10px 0 2px; }
164
170
  .k-thumbs .k-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer;
165
171
  border: 2px solid transparent; opacity: 0.75; transition: all 150ms var(--smooth); flex: none; }
@@ -241,7 +247,11 @@ body {
241
247
  .k-credits { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
242
248
  `;
243
249
 
244
- /** Kolbo mark (simplified inline SVG, brand blue). */
250
+ /**
251
+ * Kolbo mark — the real app icon from the CDN (the host CSP allows it), with
252
+ * the simplified inline SVG only as the onerror fallback.
253
+ */
245
254
  const KOLBO_LOGO_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="6" fill="#3b82f6"/><path d="M7 5.5v13M7 12l6.5-6.5M7 12l7 6.5" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
255
+ const KOLBO_LOGO_IMG = `<img src="https://kolbo-general-media.fra1.cdn.digitaloceanspaces.com/models_icons/kolbo-ai.png" alt="Kolbo" style="width:18px;height:18px;border-radius:5px;display:block" onerror="this.outerHTML=KOLBO_LOGO_FALLBACK">`;
246
256
 
247
- module.exports = { KOLBO_CSS, KOLBO_LOGO_SVG };
257
+ module.exports = { KOLBO_CSS, KOLBO_LOGO_SVG, KOLBO_LOGO_IMG };
package/src/apps/widgets/generation.js CHANGED
@@ -173,6 +173,11 @@ function renderImages(sc, urls) {
173
173
  // instead of a broken empty viewer.
174
174
  var viewer = '<div class="k-viewer"><img id="main-img" src="' + esc(urls[selected]) + '" alt="" onerror="window.__imgFail && window.__imgFail()"></div>';
175
175
  window.__imgFail = function () { renderLinks(urls); window.kolbo.notifySize(); };
176
+ // Constrained viewer → click opens the original full-size.
177
+ setTimeout(function () {
178
+ var img = el('main-img');
179
+ if (img) img.onclick = function () { window.kolbo.openLink(state.urls[selected]); };
180
+ }, 0);
176
181
  var thumbs = '';
177
182
  if (urls.length > 1) {
178
183
  thumbs = '<div class="k-thumbs">' + urls.map(function (u, i) {