@widgetic/creator 0.3.53 → 0.3.55

package/dist/components/WidgetDetails.svelte.d.ts

@@ -98,8 +98,9 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     /** Stacking order when multiple Widget Details panels are open. */ panelZIndex?: number;
     /** Cascade offset index (0 = centered, 1+ = shifted down-right). */ panelCascadeIndex?: number;
     /** False when another panel has keyboard/chat focus. */ isFocusedPanel?: boolean;
-    currentStep?: "create" | "edit" | "embed";
+    currentStep?: "embed" | "create" | "edit";
     beginCompositionHydration?: () => void;
+    showPublishedArtifact?: (url: string | null) => void;
     finishCompositionHydration?: () => void;
     markCodegenPreviewFresh?: () => void;
     hasLiveWorkerPreview?: () => boolean;
@@ -164,6 +165,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
         silent?: boolean;
     }) => void;
 }, {
+    widgetRename: CustomEvent<any>;
     fixErrors: CustomEvent<any>;
     retryRepository: CustomEvent<any>;
     generateNow: CustomEvent<any>;
@@ -184,12 +186,16 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'version-history': {};
+    'code-generation-models': {};
+    'code-generation-status': {};
     'code-generation': {};
     'publish-widget': {};
     'composition-editor': {};
     'embed-section': {};
 }, {
     beginCompositionHydration: () => void;
+    showPublishedArtifact: (url: string | null) => void;
     finishCompositionHydration: () => void;
     markCodegenPreviewFresh: () => void;
     hasLiveWorkerPreview: () => boolean;

package/dist/pageHelpers.d.ts

@@ -13,3 +13,5 @@ export declare function deriveApiErrorMessage(error: unknown, defaultMessage: st
 export declare function decodeJWT(token: string): Record<string, unknown> | null;
 export declare function isTokenExpired(token: string): boolean;
 export declare function fileToBase64(file: File): Promise<string>;
+/** Convert raster images to WebP at quality 0.95 before prompt/upload. Keep GIF/SVG as-is. */
+export declare function imageFileToWebpFile(file: File, quality?: number): Promise<File>;

package/dist/pageHelpers.js

@@ -146,6 +146,18 @@ export async function deriveApiErrorMessage(error, defaultMessage) {
     return toErrorMessage(error, defaultMessage);
 }
 // ===================== JWT Helpers =====================
+function base64UrlDecode(base64UrlString) {
+    const base64 = base64UrlString.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+    const binary = atob(padded);
+    try {
+        const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }
+    catch {
+        return binary;
+    }
+}
 export function decodeJWT(token) {
     try {
         const parts = token.split('.');
@@ -153,13 +165,9 @@ export function decodeJWT(token) {
             throw new Error(`Invalid JWT format: expected 3 parts, got ${parts.length}`);
         }
         // Verify header parses
-        const header = parts[0];
-        const paddedHeader = header + '='.repeat((4 - (header.length % 4)) % 4);
-        JSON.parse(atob(paddedHeader));
+        JSON.parse(base64UrlDecode(parts[0]));
         // Decode payload
-        const payload = parts[1];
-        const paddedPayload = payload + '='.repeat((4 - (payload.length % 4)) % 4);
-        const decodedPayloadString = atob(paddedPayload);
+        const decodedPayloadString = base64UrlDecode(parts[1]);
         if (!decodedPayloadString || decodedPayloadString.trim() === '') {
             throw new Error('Empty payload in JWT');
         }
@@ -194,4 +202,30 @@ export async function fileToBase64(file) {
         reader.readAsDataURL(file);
     });
 }
+/** Convert raster images to WebP at quality 0.95 before prompt/upload. Keep GIF/SVG as-is. */
+export async function imageFileToWebpFile(file, quality = 0.95) {
+    if (!file.type.startsWith('image/'))
+        return file;
+    if (file.type === 'image/gif' || file.type === 'image/svg+xml' || file.type === 'image/webp') {
+        return file;
+    }
+    if (typeof createImageBitmap !== 'function' || typeof document === 'undefined')
+        return file;
+    const bitmap = await createImageBitmap(file);
+    const canvas = document.createElement('canvas');
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return file;
+    ctx.drawImage(bitmap, 0, 0);
+    bitmap.close();
+    const blob = await new Promise((resolve) => {
+        canvas.toBlob((next) => resolve(next), 'image/webp', quality);
+    });
+    if (!blob)
+        return file;
+    const name = file.name.replace(/\.[^.]+$/, '') + '.webp';
+    return new File([blob], name, { type: 'image/webp', lastModified: Date.now() });
+}
 // VM Session Helpers removed — VM infrastructure decommissioned

package/dist/stores/userSession.d.ts

@@ -1,6 +1,6 @@
 export declare const userSession: import("svelte/store").Writable<{
     user: any;
-    jwt: any;
+    jwt: string;
 }>;
 export declare function setSession(user: any, jwt: any): void;
 export declare function clearSession(): void;

package/dist/stores/userSession.js

@@ -1,9 +1,24 @@
 import { writable } from 'svelte/store';
 import { syncLocalCacheOwner } from '../localCacheGate.js';
-export const userSession = writable({
-    user: null,
-    jwt: null
-});
+function getInitialSession() {
+    if (typeof window === 'undefined') {
+        return { user: null, jwt: null };
+    }
+    const jwt = localStorage.getItem('jwt');
+    const userStr = localStorage.getItem('user');
+    let user = null;
+    try {
+        if (userStr)
+            user = JSON.parse(userStr);
+    }
+    catch { }
+    return { user, jwt };
+}
+const initialSession = getInitialSession();
+export const userSession = writable(initialSession);
+if (initialSession.user) {
+    syncLocalCacheOwner(initialSession.user);
+}
 export function setSession(user, jwt) {
     userSession.set({ user, jwt });
     if (jwt)

package/dist/stores/websocketStore.js

@@ -49,7 +49,8 @@ let lastTokenUsed = null;
 let activeUserId = null;
 /** Runtime API root for embedded hosts (site PUBLIC_API_URL). Overrides VITE_API_URL. */
 let runtimeApiUrl = null;
-const showLogs = true;
+// Set to true for local websocket debugging
+const showLogs = false;
 export function setAuthToken(token) {
     currentAuthToken = token;
     if (token !== lastTokenUsed && socket) {

package/dist/syncSiteAuth.js

@@ -42,7 +42,7 @@ export function syncSessionFromSiteAuth() {
             : session?.user || { id: 'site-user', email: 'user@widgetic.com', name: 'User' };
         // setSession → syncLocalCacheOwner when enableLocalCache is on
         setSession(user, token);
-        console.log('[CreatorApp] Session synced from site auth');
+        // console.log('[CreatorApp] Session synced from site auth');
         return true;
     }
     catch (error) {

package/dist/utils/embedCode.d.ts

@@ -1,15 +1,8 @@
 /**
  * Embed code generation utilities for the Embed step.
  *
- * Two formats are supported:
- *  - `iframe`: classic `<iframe>` pointing at the published widget HTML on the CDN.
- *  - `web-component`: customer-facing `<widgetic>` host tag. The embed SDK
- *    scans for this tag and hydrates it. (Autonomous custom elements must
- *    contain a hyphen, so the SDK does not `define("widgetic")` — it finds
- *    `<widgetic>` in the DOM and renders into it.)
- *
- * The SDK script is served from `cdn.widgetic.com/sdks/browser/embed-sdk.js`
- * (R2 custom domain on the `widgets` bucket — see AGENTS.md embed architecture).
+ * iframe: `<iframe src="cdn…/widget.html">` (no SDK).
+ * web-component: embed-sdk.js + one-word `<widgetic composition-id>`.
  */
 export type EmbedFormat = 'iframe' | 'web-component';
 export declare const EMBED_FORMATS: EmbedFormat[];
@@ -23,28 +16,11 @@ export interface EmbedCodeParams {
     width: number;
     /** Embed height in pixels. */
     height: number;
-    /** CDN base URL for the embed SDK script. Defaults to https://cdn.widgetic.com */
+    /** CDN origin for embed-sdk.js. Defaults to https://cdn.widgetic.com */
     sdkBaseUrl?: string;
 }
-/**
- * Build the iframe embed snippet. Backward compatible with the previous
- * hardcoded block in `CreatorApp.svelte`.
- */
 export declare function generateIframeEmbedCode({ embedSrc, width, height }: EmbedCodeParams): string;
-/**
- * Build the Web Component embed snippet using `<widgetic>`.
- * Requires a composition id — the custom element loader fetches the
- * composition + widget module from the CDN via the embed-sdk batch API.
- *
- * If no composition is selected we fall back to the iframe format
- * (caller should check `compositionId` before calling this).
- */
 export declare function generateWebComponentEmbedCode({ compositionId, width, height, sdkBaseUrl }: EmbedCodeParams): string;
-/**
- * Pick the right embed code for the requested format, with fallback to
- * iframe when the Web Component format is requested but no composition
- * is selected (custom element requires `composition-id`).
- */
 export declare function generateEmbedCode(format: EmbedFormat, params: EmbedCodeParams): {
     code: string;
     effectiveFormat: EmbedFormat;

package/dist/utils/embedCode.js

@@ -1,54 +1,25 @@
 /**
  * Embed code generation utilities for the Embed step.
  *
- * Two formats are supported:
- *  - `iframe`: classic `<iframe>` pointing at the published widget HTML on the CDN.
- *  - `web-component`: customer-facing `<widgetic>` host tag. The embed SDK
- *    scans for this tag and hydrates it. (Autonomous custom elements must
- *    contain a hyphen, so the SDK does not `define("widgetic")` — it finds
- *    `<widgetic>` in the DOM and renders into it.)
- *
- * The SDK script is served from `cdn.widgetic.com/sdks/browser/embed-sdk.js`
- * (R2 custom domain on the `widgets` bucket — see AGENTS.md embed architecture).
+ * iframe: `<iframe src="cdn…/widget.html">` (no SDK).
+ * web-component: embed-sdk.js + one-word `<widgetic composition-id>`.
  */
 export const EMBED_FORMATS = ['iframe', 'web-component'];
 export const EMBED_FORMAT_LABELS = {
     iframe: 'iframe',
     'web-component': 'Web Component'
 };
-/**
- * Build the iframe embed snippet. Backward compatible with the previous
- * hardcoded block in `CreatorApp.svelte`.
- */
 export function generateIframeEmbedCode({ embedSrc, width, height }) {
     return `<iframe src="${embedSrc}" width="${width}" height="${height}" frameborder="0" allowfullscreen></iframe>`;
 }
-/**
- * Build the Web Component embed snippet using `<widgetic>`.
- * Requires a composition id — the custom element loader fetches the
- * composition + widget module from the CDN via the embed-sdk batch API.
- *
- * If no composition is selected we fall back to the iframe format
- * (caller should check `compositionId` before calling this).
- */
 export function generateWebComponentEmbedCode({ compositionId, width, height, sdkBaseUrl = 'https://cdn.widgetic.com' }) {
     if (!compositionId) {
-        // Defensive: caller should have fallen back to iframe already.
         return '';
     }
-    return `<script src="${sdkBaseUrl}/sdks/browser/embed-sdk.js" async></script>
-<widgetic
-  composition-id="${compositionId}"
-  width="${width}"
-  height="${height}"
-  render-mode="custom-element">
-</widgetic>`;
+    const sdkSrc = `${sdkBaseUrl.replace(/\/+$/, '')}/sdks/browser/embed-sdk.js?v=5`;
+    return `<script src="${sdkSrc}"></script>
+<widgetic composition-id="${compositionId}" width="${width}" height="${height}"></widgetic>`;
 }
-/**
- * Pick the right embed code for the requested format, with fallback to
- * iframe when the Web Component format is requested but no composition
- * is selected (custom element requires `composition-id`).
- */
 export function generateEmbedCode(format, params) {
     if (format === 'web-component') {
         if (!params.compositionId) {

package/dist/utils/nativeScrollbarPadding.d.ts

@@ -0,0 +1,5 @@
+/** Zero out padding-right when this element itself shows a vertical scrollbar. */
+export declare function nativeScrollbarPadding(node: HTMLElement, padPx?: number): {
+    update(newPadPx: number): void;
+    destroy(): void;
+};

package/dist/utils/nativeScrollbarPadding.js

@@ -0,0 +1,27 @@
+/** Zero out padding-right when this element itself shows a vertical scrollbar. */
+export function nativeScrollbarPadding(node, padPx = 8) {
+    function check() {
+        const hasScrollbar = node.scrollHeight > node.clientHeight + 1;
+        node.style.setProperty('padding-right', hasScrollbar ? '0px' : `${padPx}px`, 'important');
+    }
+    const resizeObserver = new ResizeObserver(check);
+    resizeObserver.observe(node);
+    const mutationObserver = new MutationObserver(check);
+    mutationObserver.observe(node, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+    });
+    check();
+    return {
+        update(newPadPx) {
+            padPx = newPadPx;
+            check();
+        },
+        destroy() {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        }
+    };
+}

package/dist/utils/widgeticChatUpload.js

@@ -137,10 +137,10 @@ export function shouldUseTusForChatUpload(file) {
  */
 export async function uploadChatFileToWidgeticApi(file, config, options = {}) {
     if (shouldUseTusForChatUpload(file)) {
-        console.log('[ChatUpload] TUS upload:', file.name, `${(file.size / 1024 / 1024).toFixed(1)}MB`);
+        // console.log('[ChatUpload] TUS upload:', file.name, `${(file.size / 1024 / 1024).toFixed(1)}MB`);
         return uploadTus(file, config, options);
     }
-    console.log('[ChatUpload] Multipart upload:', file.name);
+    // console.log('[ChatUpload] Multipart upload:', file.name);
     options.onProgress?.(50);
     const result = await uploadMultipart(file, config);
     options.onProgress?.(100);

package/package.json

@@ -1,17 +1,17 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.53",
+	"version": "0.3.55",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",
-		"svelte": "^5.25.0",
 		"@widgetic/api-sdk": "^1.0.10",
-		"@widgetic/canvas": "^0.5.4",
 		"@widgetic/cache-layer": "^0.1.2",
+		"@widgetic/canvas": "^0.5.4",
 		"@widgetic/chat": "^0.1.4",
 		"@widgetic/design-system": "^0.5.8",
 		"@widgetic/editor": "^4.0.1",
-		"@widgetic/file-browser": "^0.5.17"
+		"@widgetic/file-browser": "^0.5.17",
+		"svelte": "^5.25.0"
 	},
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -60,6 +60,7 @@
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
+		"@internationalized/date": "^3.12.4",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.20.2",
@@ -67,6 +68,13 @@
 		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.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/editor": "^4.0.1",
+		"@widgetic/file-browser": "^0.5.17",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -88,29 +96,15 @@
 		"typescript-eslint": "^8.20.0",
 		"vite": "^6.2.6",
 		"vite-imagetools": "^7.0.4",
-		"vitest": "^2.0.0",
-		"@widgetic/api-sdk": "^1.0.10",
-		"@widgetic/canvas": "^0.5.4",
-		"@widgetic/cache-layer": "^0.1.2",
-		"@widgetic/chat": "^0.1.4",
-		"@widgetic/design-system": "^0.5.8",
-		"@widgetic/editor": "^4.0.1",
-		"@widgetic/file-browser": "^0.5.17"
+		"vitest": "^2.0.0"
 	},
 	"dependencies": {
-		"@codesandbox/sandpack-react": "^2.19.9",
-		"@emotion/styled": "^11.13.0",
 		"@mdi/js": "^7.4.47",
-		"@mui/material": "^6.1.1",
 		"@sveltejs/adapter-node": "^5.2.4",
 		"@sveltejs/package": "^2.5.8",
-		"@xterm/addon-fit": "^0.11.0",
-		"@xterm/xterm": "^6.0.0",
 		"clsx": "^2.1.1",
 		"dotenv": "^16.4.5",
-		"fabric": "^6.9.1",
 		"mode-watcher": "^1.1.0",
-		"sandpack-file-explorer": "^0.0.7",
 		"socket.io-client": "^4.8.3",
 		"tus-js-client": "^4.3.1"
 	},

package/dist/utils/models.d.ts

@@ -1,4 +0,0 @@
-export declare function generateAudioFromText(description: string, duration?: any): Promise<any>;
-export declare function generateImageFromText(str: string, imgWidth: number, imgHeight: number, genMetaObj: any): Promise<any>;
-export declare function generateSuperprompt(str: string): Promise<any>;
-export declare function wakeUpImageGenModel(): Promise<any>;

package/dist/utils/models.js

@@ -1,94 +0,0 @@
-// local endoints methods(proxy)
-// genenerate audio from text using Baseten model
-export async function generateAudioFromText(description, duration = 5) {
-    // return { data: "https://replicate.delivery/pbxt/EKK8MxXO69LfeEhhWsy7FA2ku3KTvxrYFO2WxvLochuk1tUSA/output.wav" };
-    // basten model id
-    const model_id = "7qrj60r3"; // audio-gen model deployment id from the service we use to host models
-    // call the model
-    const result = await callModel({ prompts: [description], duration: Number(duration), model_host: 'baseten', model_id });
-    console.log('Audio Gen Model response data:', result);
-    // if no error return the data
-    if (!result.error && result.status !== 'error' && result.data) {
-        let res = result.data.length > 0 ? result.data[0] : result.data;
-        // add the audio data type
-        res = 'data:audio/mpeg;base64,' + res;
-        // return the audio data object
-        return { data: res };
-    }
-    // if error return the error
-    return result;
-}
-// generate images from text calling an AI Model
-const img_gen_model_id = "1vn88"; // image-gen model deployment id from the service we use to host models
-export async function generateImageFromText(str, imgWidth, imgHeight, genMetaObj) {
-    // create the model input
-    let input = {
-        prompt: str,
-        // image size
-        width: imgWidth, height: imgHeight,
-        // other params
-        ...genMetaObj,
-        // model id
-        model_id: img_gen_model_id
-    };
-    console.log('Model call input:', input);
-    // call the model
-    let response = await callModel(input);
-    console.log('Image Gen Model response:', response);
-    // check if no result
-    if (!response)
-        response = { error: 'No data generated!' };
-    // if no error add image header and return the data
-    if (!response.error && response.data) {
-        // TODO: check if it's an array of images and use first: response.data[0]
-        // console.log("Model data response:", response.data.length);
-        // let res = response.data.length > 0 ? response.data[0] : response.data;
-        // add the image data type
-        // res = 'data:image/png;base64,' + res;
-        let res = 'data:image/png;base64,' + response.data;
-        // return the image data object
-        return { data: res };
-    }
-    // if error return the error
-    return response;
-}
-let super_prompt_model_id = "oc3j2"; // superprompt-gen model deployment id from the service we use to host models
-export async function generateSuperprompt(str) {
-    // call the model
-    let input = { prompt: str, lcm: true, model_host: 'groq', model_id: super_prompt_model_id };
-    // console.log('Model call input:', input);
-    const result = await callModel(input);
-    // console.log('Model response data:', result);
-    // if no error modify and return the data
-    if (!result.error && result.data) {
-        // TODO: check if it's an array of results then use first: results.data[0]
-        // console.log("Model data result:", result.data.length);
-        // let res = result.data.length > 0 ? result.data[0] : result.data;
-        // read the response data
-        let res = result.data;
-        // return the image data object
-        return { data: res };
-    }
-    // if error return the error
-    return result;
-}
-export async function wakeUpImageGenModel() {
-    // call the model
-    const result = await callModel({ model_id: img_gen_model_id, method: 'wake' });
-    // if no error return the data
-    return result;
-}
-async function callModel(input) {
-    // read model host service name
-    let model_host = input.model_host || 'beam';
-    // make a request to local endpoint that calls the model on server side
-    const response = await fetch(`/api/call-${model_host}-model`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(input),
-    });
-    // read the data from the response
-    const data = await response.json();
-    // return response data
-    return data;
-}

package/dist/utils/prototypes.js

@@ -1,20 +0,0 @@
-String.prototype.capitalize = function () {
-    return this.charAt(0).toUpperCase() + this.slice(1);
-};
-String.prototype.rmFirstAtUser = function () {
-    let newString = this.charAt(0) === "@" ? (this.indexOf(" ") > 0 ? this.slice(this.indexOf(" ") + 1) : "") : this;
-    return newString;
-};
-// remove punctuation from the transcript
-String.prototype.rmPunctuation = function () {
-    let newString = this.toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g, '');
-    return newString;
-};
-String.prototype.splitByWordCount = function (count) {
-    var arr = this.split(' ');
-    var r = [];
-    while (arr.length) {
-        r.push(arr.splice(0, count).join(' '));
-    }
-    return r;
-};