@widgetic/creator 0.3.64 → 0.3.66

package/dist/utils/freezeWatchdog.js

@@ -0,0 +1,161 @@
+/**
+ * Main-thread responsiveness watchdog.
+ *
+ * PerformanceObserver('longtask') only fires AFTER a blocking task completes —
+ * an infinite reactive loop, or heavy work running inside a same-origin iframe
+ * (html2canvas screenshot captures in the widget preview share the parent's main
+ * thread), is never attributed to the page. The result was a frozen site with no
+ * [FreezeReport] in the console.
+ *
+ * This watchdog flips the model: a Web Worker (own thread, unaffected by the
+ * blocked main thread) pings every 500ms and the main thread answers. When pongs
+ * stop arriving, the worker logs a [FreezeReport] straight to the page console
+ * (worker console output shows in DevTools) with the block duration and the last
+ * codegen status the main thread reported. It also reports recovery, so each
+ * freeze episode produces exactly two lines: block start + recovery.
+ *
+ * The duration alone never said *what* blocked, which is why the freeze survived
+ * several rounds of fixes. So the main thread also keeps breadcrumbs — long tasks
+ * seen by PerformanceObserver (with their iframe attribution, since a widget
+ * preview blocking the shared main thread looks identical to the page blocking
+ * itself) and explicit `measureSync` spans — and ships the ones it has not
+ * reported yet on the next pong. The pong that lands on recovery therefore
+ * carries the task that caused the freeze, named and measured.
+ */
+const WATCHDOG_SOURCE = `
+let lastPongAt = performance.now();
+let freezeStartedAt = null;
+let reported = false;
+let lastStatus = '';
+let breadcrumbs = [];
+const PING_MS = 500;
+const STALL_MS = 4000;
+
+function describeBreadcrumbs() {
+  if (breadcrumbs.length === 0) return 'no instrumented task over 200ms — the block is somewhere not yet measured';
+  return breadcrumbs
+    .map((b) => b.label + ' ' + Math.round(b.duration) + 'ms' + (b.source ? ' [' + b.source + ']' : ''))
+    .join(', ');
+}
+
+setInterval(() => {
+  postMessage({ type: 'ping' });
+  const now = performance.now();
+  if (now - lastPongAt >= STALL_MS) {
+    if (!freezeStartedAt) freezeStartedAt = now - STALL_MS;
+    if (!reported) {
+      reported = true;
+      console.warn('[FreezeReport] Main thread unresponsive ' + Math.round(now - freezeStartedAt) +
+        'ms. Last status: "' + (lastStatus || '—') + '"');
+    }
+  } else if (freezeStartedAt) {
+    console.warn('[FreezeReport] Main thread recovered after ' + Math.round(now - freezeStartedAt) +
+      'ms. Last status: "' + (lastStatus || '—') + '". Blocking work: ' + describeBreadcrumbs());
+    freezeStartedAt = null;
+    reported = false;
+  }
+  breadcrumbs = [];
+}, PING_MS);
+onmessage = (e) => {
+  if (e.data && e.data.type === 'pong') {
+    lastPongAt = performance.now();
+    if (e.data.status) lastStatus = e.data.status;
+    if (e.data.breadcrumbs && e.data.breadcrumbs.length) {
+      breadcrumbs = breadcrumbs.concat(e.data.breadcrumbs).slice(-12);
+    }
+  }
+};
+`;
+/** Long tasks and spans below this are ordinary work, not a freeze. */
+const BREADCRUMB_MIN_MS = 200;
+/**
+ * Times a synchronous step and hands it to the watchdog when it blocks long
+ * enough to matter. Cheap enough to leave on any suspect path permanently: two
+ * `performance.now()` reads and, for ordinary fast calls, nothing else.
+ */
+export function measureSync(label, run) {
+    if (typeof performance === 'undefined')
+        return run();
+    const startedAt = performance.now();
+    try {
+        return run();
+    }
+    finally {
+        const duration = performance.now() - startedAt;
+        if (duration >= BREADCRUMB_MIN_MS) {
+            const watchdog = globalThis.__widgeticFreezeWatchdog;
+            watchdog?.addBreadcrumb(label, duration);
+            console.warn(`[MainThreadBlock] ${label} took ${Math.round(duration)}ms`);
+        }
+    }
+}
+/** Long tasks the page did not measure itself, including ones inside an iframe. */
+function observeLongTasks(watchdog) {
+    if (typeof PerformanceObserver === 'undefined')
+        return null;
+    try {
+        const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                if (entry.duration < BREADCRUMB_MIN_MS)
+                    continue;
+                // `containerSrc` is the one signal that separates the page blocking
+                // itself from a widget preview blocking the main thread it shares.
+                const attribution = entry.attribution?.[0];
+                const source = attribution?.containerSrc
+                    || attribution?.containerName
+                    || attribution?.containerType
+                    || undefined;
+                watchdog.addBreadcrumb('longtask', entry.duration, source);
+            }
+        });
+        observer.observe({ entryTypes: ['longtask'] });
+        return () => observer.disconnect();
+    }
+    catch {
+        return null;
+    }
+}
+export function installFreezeWatchdog() {
+    if (typeof window === 'undefined' || typeof Worker === 'undefined' || typeof Blob === 'undefined') {
+        return null;
+    }
+    const existing = window.__widgeticFreezeWatchdog;
+    if (existing)
+        return existing;
+    const blob = new Blob([WATCHDOG_SOURCE], { type: 'text/javascript' });
+    const url = URL.createObjectURL(blob);
+    const worker = new Worker(url);
+    URL.revokeObjectURL(url);
+    let lastStatus = '';
+    let pendingBreadcrumbs = [];
+    worker.onmessage = (event) => {
+        if (event.data?.type === 'ping') {
+            worker.postMessage({ type: 'pong', status: lastStatus, breadcrumbs: pendingBreadcrumbs });
+            pendingBreadcrumbs = [];
+        }
+    };
+    let stopLongTaskObserver = null;
+    const watchdog = {
+        setStatus(status) {
+            lastStatus = status;
+        },
+        addBreadcrumb(label, duration, source) {
+            if (duration < BREADCRUMB_MIN_MS)
+                return;
+            pendingBreadcrumbs.push({ label, duration, source });
+            // Keep only the worst offenders: a freeze is one big task, not fifty.
+            if (pendingBreadcrumbs.length > 12) {
+                pendingBreadcrumbs.sort((a, b) => b.duration - a.duration);
+                pendingBreadcrumbs = pendingBreadcrumbs.slice(0, 12);
+            }
+        },
+        dispose() {
+            stopLongTaskObserver?.();
+            worker.terminate();
+            delete window.__widgeticFreezeWatchdog;
+        },
+    };
+    window.__widgeticFreezeWatchdog = watchdog;
+    stopLongTaskObserver = observeLongTasks(watchdog);
+    return watchdog;
+}

package/dist/utils/persistWidgetThumbnail.d.ts

@@ -1,5 +1,16 @@
 import type { WidgetsApi } from '@widgetic/api-sdk';
 /**
- * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API
+ * gateway.
+ *
+ * This used to be a hand-rolled fetch: the gateway route
+ * (`POST /widgets/{id}/thumbnail`) postdated the last SDK generation, so the
+ * module read `basePath` and the bearer token back out of the `WidgetsApi`
+ * instance's `Configuration` and hit the endpoint itself, unwrapping the
+ * response against four guessed shapes. The spec now carries the operation
+ * with a typed 200 (`UploadWidgetThumbnail200Response.data.thumbnailUrl`), the
+ * SDK was regenerated, and the fetch is retired — the typed method targets the
+ * same host the client was constructed with, which is what the Configuration
+ * read-back was approximating.
  */
 export declare function persistWidgetThumbnail(widgetsClient: WidgetsApi | null | undefined, widgetId: string | null | undefined, imageDataUrl: string | null | undefined): Promise<string | null>;

package/dist/utils/persistWidgetThumbnail.js

@@ -1,5 +1,16 @@
 /**
- * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API
+ * gateway.
+ *
+ * This used to be a hand-rolled fetch: the gateway route
+ * (`POST /widgets/{id}/thumbnail`) postdated the last SDK generation, so the
+ * module read `basePath` and the bearer token back out of the `WidgetsApi`
+ * instance's `Configuration` and hit the endpoint itself, unwrapping the
+ * response against four guessed shapes. The spec now carries the operation
+ * with a typed 200 (`UploadWidgetThumbnail200Response.data.thumbnailUrl`), the
+ * SDK was regenerated, and the fetch is retired — the typed method targets the
+ * same host the client was constructed with, which is what the Configuration
+ * read-back was approximating.
  */
 export async function persistWidgetThumbnail(widgetsClient, widgetId, imageDataUrl) {
     if (!widgetsClient || !widgetId || typeof imageDataUrl !== 'string')
@@ -7,15 +18,11 @@ export async function persistWidgetThumbnail(widgetsClient, widgetId, imageDataU
     if (!imageDataUrl.startsWith('data:image/'))
         return null;
     try {
-        const response = await widgetsClient.uploadWidgetThumbnailRaw({
+        const response = await widgetsClient.uploadWidgetThumbnail({
             id: widgetId,
             uploadWidgetThumbnailRequest: { imageDataUrl },
         });
-        const json = await response.raw.json();
-        const thumbnailUrl = json?.data?.thumbnailUrl ||
-            json?.data?.thumbnail_url ||
-            json?.thumbnailUrl ||
-            null;
+        const thumbnailUrl = response.data?.thumbnailUrl ?? null;
         if (thumbnailUrl) {
             console.log('[persistWidgetThumbnail] stored', widgetId.slice(0, 8), thumbnailUrl.slice(0, 80));
         }

package/dist/utils/pinScrollToBottom.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Keeps a scrollable container pinned to its bottom edge until the user scrolls
+ * up. Opening the widget-details panel on a small screen lays the panel out
+ * after mount, which can leave the outer scroll area (status bar + chat +
+ * footer) resting above its bottom — clipping the chat input. The observer
+ * re-pins to bottom whenever the content height or the box changes, so the
+ * input is always visible on open. Any manual upward scroll un-pins until the
+ * user returns to the bottom, preserving normal reading behavior.
+ */
+export declare function pinScrollToBottom(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/utils/pinScrollToBottom.js

@@ -0,0 +1,43 @@
+/**
+ * Keeps a scrollable container pinned to its bottom edge until the user scrolls
+ * up. Opening the widget-details panel on a small screen lays the panel out
+ * after mount, which can leave the outer scroll area (status bar + chat +
+ * footer) resting above its bottom — clipping the chat input. The observer
+ * re-pins to bottom whenever the content height or the box changes, so the
+ * input is always visible on open. Any manual upward scroll un-pins until the
+ * user returns to the bottom, preserving normal reading behavior.
+ */
+export function pinScrollToBottom(node) {
+    let pinned = true;
+    let rafId = null;
+    const scrollToBottom = () => {
+        if (!pinned)
+            return;
+        // rAF so the layout pass has settled before reading scrollHeight.
+        rafId = requestAnimationFrame(() => {
+            node.scrollTo({ top: node.scrollHeight, behavior: 'instant' });
+        });
+    };
+    const onScroll = () => {
+        const atBottom = node.scrollTop + node.clientHeight >= node.scrollHeight - 8;
+        pinned = atBottom;
+    };
+    const observer = new ResizeObserver(scrollToBottom);
+    observer.observe(node);
+    // Content growing also needs re-pinning; observe children changes.
+    const contentObserver = new MutationObserver(scrollToBottom);
+    contentObserver.observe(node, { childList: true, subtree: true, characterData: true });
+    node.addEventListener('scroll', onScroll, { passive: true });
+    // Initial pin after the first layout pass.
+    const initialRaf = requestAnimationFrame(scrollToBottom);
+    return {
+        destroy() {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            cancelAnimationFrame(initialRaf);
+            observer.disconnect();
+            contentObserver.disconnect();
+            node.removeEventListener('scroll', onScroll);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.64",
+	"version": "0.3.66",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",
@@ -45,6 +45,7 @@
 		"dev-sv": "VITE_APP_VERSION=$(node -p \"require('./package.json').version\") VITE_BUILD_SHA=$(git rev-parse --short HEAD 2>/dev/null || echo local) NODE_ENV=development vite dev --port 5174",
 		"lps": "volta run npm link --save @widgetic/design-system && volta run npm link --save @widgetic/api-sdk && volta run npm link --save @widgetic/canvas",
 		"llinks": "ls -la node_modules/@widgetic",
+		"ldt": "volta run npm link --save @widgetic/dev-tools",
 		"clean-npm-cache": "npm cache clean --force",
 		"clean-svelte-cache": "rm -rf .svelte-kit && npx svelte-kit sync",
 		"clean-vite-cache": "rm -rf node_modules/.vite",
@@ -67,12 +68,13 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
-		"@types/eslint": "^9.6.0",
+		"@types/node": "26.4.0",
 		"@widgetic/api-sdk": "^1.0.10",
 		"@widgetic/cache-layer": "^0.1.2",
 		"@widgetic/canvas": "^0.5.4",
 		"@widgetic/chat": "^0.1.4",
 		"@widgetic/design-system": "^0.5.8",
+		"@widgetic/dev-tools": "^0.2.0",
 		"@widgetic/editor": "^4.0.1",
 		"@widgetic/file-browser": "^0.5.17",
 		"autoprefixer": "^10.4.20",