@heyputer/puter.js 2.1.15 → 2.2.4

package/src/modules/OS.js

@@ -9,10 +9,11 @@ class OS {
      * @param {string} APIOrigin - Origin of the API server. Used to build the API endpoint URLs.
      * @param {string} appID - ID of the app to use.
      */
-    constructor (context) {
-        this.authToken = context.authToken;
-        this.APIOrigin = context.APIOrigin;
-        this.appID = context.appID;
+    constructor (puter) {
+        this.puter = puter;
+        this.authToken = puter.authToken;
+        this.APIOrigin = puter.APIOrigin;
+        this.appID = puter.appID;
     }
 
     /**
@@ -92,4 +93,4 @@ class OS {
     };
 }
 
-export default OS;
+export default OS;

package/src/modules/Perms.js

@@ -1,7 +1,8 @@
 export default class Perms {
-    constructor (context) {
-        this.authToken = context.authToken;
-        this.APIOrigin = context.APIOrigin;
+    constructor (puter) {
+        this.puter = puter;
+        this.authToken = puter.authToken;
+        this.APIOrigin = puter.APIOrigin;
     }
     setAuthToken (authToken) {
         this.authToken = authToken;

package/src/modules/PuterDialog.js

@@ -434,7 +434,7 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
         // Add event listener to the button
         this.shadowRoot.querySelector('#launch-auth-popup')?.addEventListener('click', () => {
             let w = 600;
-            let h = 400;
+            let h = 600;
             let title = 'Puter';
             var left = (screen.width / 2) - (w / 2);
             var top = (screen.height / 2) - (h / 2);
@@ -454,7 +454,7 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
     open () {
         if ( this.hasUserActivation() ) {
             let w = 600;
-            let h = 400;
+            let h = 600;
             let title = 'Puter';
             var left = (screen.width / 2) - (w / 2);
             var top = (screen.height / 2) - (h / 2);

package/src/modules/UI.js

@@ -1,8 +1,17 @@
-import putility from '@heyputer/putility';
 import EventListener from '../lib/EventListener.js';
 import FSItem from './FSItem.js';
 import PuterDialog from './PuterDialog.js';
 
+const createDeferred = () => {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+};
+
 const FILE_SAVE_CANCELLED = Symbol('FILE_SAVE_CANCELLED');
 const FILE_OPEN_CANCELLED = Symbol('FILE_OPEN_CANCELLED');
 
@@ -22,10 +31,12 @@ class AppConnection extends EventListener {
     // (Closing and close events will still function.)
     #usesSDK;
 
-    static from (values, context) {
-        const connection = new AppConnection(context, {
+    static from (values, puter, { messageTarget, appInstanceID }) {
+        const connection = new AppConnection(puter, {
             target: values.appInstanceID,
             usesSDK: values.usesSDK,
+            messageTarget,
+            appInstanceID,
         });
 
         // When a connection is established the app is able to
@@ -35,23 +46,23 @@ class AppConnection extends EventListener {
         return connection;
     }
 
-    constructor (context, { target, usesSDK }) {
+    constructor (puter, { target, usesSDK, messageTarget, appInstanceID }) {
         super([
             'message', // The target sent us something with postMessage()
             'close', // The target app was closed
         ]);
-        this.messageTarget = context.messageTarget;
-        this.appInstanceID = context.appInstanceID;
+        this.messageTarget = messageTarget;
+        this.appInstanceID = appInstanceID;
         this.targetAppInstanceID = target;
         this.#isOpen = true;
         this.#usesSDK = usesSDK;
 
-        this.log = context.puter.logger.fields({
+        this.log = puter.logger.fields({
             category: 'ipc',
         });
         this.log.fields({
-            cons_source: context.appInstanceID,
-            source: context.puter.appInstanceID,
+            cons_source: appInstanceID,
+            source: puter.appInstanceID,
             target,
         }).info(`AppConnection created to ${target}`, this);
 
@@ -232,7 +243,7 @@ class UI extends EventListener {
         return ret;
     };
 
-    constructor (context, { appInstanceID, parentInstanceID }) {
+    constructor (puter, { appInstanceID, parentInstanceID }) {
         const eventNames = [
             'localeChanged',
             'themeChanged',
@@ -240,12 +251,12 @@ class UI extends EventListener {
         ];
         super(eventNames);
         this.#eventNames = eventNames;
-        this.context = context;
+        this.puter = puter;
         this.appInstanceID = appInstanceID;
         this.parentInstanceID = parentInstanceID;
-        this.appID = context.appID;
-        this.env = context.env;
-        this.util = context.util;
+        this.appID = puter.appID;
+        this.env = puter.env;
+        this.util = puter.util;
 
         if ( this.env === 'app' ) {
             this.messageTarget = window.parent;
@@ -254,16 +265,12 @@ class UI extends EventListener {
             return;
         }
 
-        // Context to pass to AppConnection instances
-        this.context = this.context.sub({
-            appInstanceID: this.appInstanceID,
-            messageTarget: this.messageTarget,
-        });
-
         if ( this.parentInstanceID ) {
-            this.#parentAppConnection = new AppConnection(this.context, {
+            this.#parentAppConnection = new AppConnection(this.puter, {
                 target: this.parentInstanceID,
                 usesSDK: true,
+                messageTarget: this.messageTarget,
+                appInstanceID: this.appInstanceID,
             });
         }
 
@@ -535,7 +542,10 @@ class UI extends EventListener {
             }
             else if ( e.data.msg === 'connection' ) {
                 e.data.usesSDK = true; // we can safely assume this
-                const conn = AppConnection.from(e.data, this.context);
+                const conn = AppConnection.from(e.data, this.puter, {
+                    messageTarget: this.messageTarget,
+                    appInstanceID: this.appInstanceID,
+                });
                 const accept = value => {
                     this.messageTarget?.postMessage({
                         $: 'connection-resp',
@@ -743,7 +753,7 @@ class UI extends EventListener {
     };
 
     showOpenFilePicker (options, callback) {
-        const undefinedOnCancel = new putility.libs.promise.TeePromise();
+        const undefinedOnCancel = createDeferred();
         const resolveOnlyPromise = new Promise((resolve, reject) => {
             if ( ! globalThis.open ) {
                 return reject('This API is not compatible in Web Workers.');
@@ -779,7 +789,7 @@ class UI extends EventListener {
                 resolve(maybe_result);
             };
         });
-        resolveOnlyPromise.undefinedOnCancel = undefinedOnCancel;
+        resolveOnlyPromise.undefinedOnCancel = undefinedOnCancel.promise;
         return resolveOnlyPromise;
     };
 
@@ -802,7 +812,7 @@ class UI extends EventListener {
     };
 
     showSaveFilePicker (content, suggestedName, type) {
-        const undefinedOnCancel = new putility.libs.promise.TeePromise();
+        const undefinedOnCancel = createDeferred();
         const resolveOnlyPromise = new Promise((resolve, reject) => {
             if ( ! globalThis.open ) {
                 return reject('This API is not compatible in Web Workers.');
@@ -870,7 +880,7 @@ class UI extends EventListener {
             };
         });
 
-        resolveOnlyPromise.undefinedOnCancel = undefinedOnCancel;
+        resolveOnlyPromise.undefinedOnCancel = undefinedOnCancel.promise;
 
         return resolveOnlyPromise;
     };
@@ -1203,7 +1213,10 @@ class UI extends EventListener {
             },
         });
 
-        return AppConnection.from(app_info, this.context);
+        return AppConnection.from(app_info, this.puter, {
+            messageTarget: this.messageTarget,
+            appInstanceID: this.appInstanceID,
+        });
     };
 
     connectToInstance = async function connectToInstance (app_name) {
@@ -1214,7 +1227,10 @@ class UI extends EventListener {
             },
         });
 
-        return AppConnection.from(app_info, this.context);
+        return AppConnection.from(app_info, this.puter, {
+            messageTarget: this.messageTarget,
+            appInstanceID: this.appInstanceID,
+        });
     };
 
     parentApp () {

package/src/modules/UsageLimitDialog.js

@@ -0,0 +1,208 @@
+class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
+    constructor (message) {
+        super();
+        this.message = message || 'You have reached your usage limit for this account.';
+        
+        this.attachShadow({ mode: 'open' });
+        
+        this.shadowRoot.innerHTML = `
+        <style>
+            dialog {
+                background: transparent;
+                border: none;
+                box-shadow: none;
+                outline: none;
+                padding: 0;
+                max-width: 90vw;
+            }
+            
+            dialog::backdrop {
+                background: rgba(0, 0, 0, 0.5);
+            }
+            
+            .dialog-content {
+                border: 1px solid #e8e8e8;
+                border-radius: 12px;
+                padding: 32px;
+                background: white;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+                -webkit-font-smoothing: antialiased;
+                color: #333;
+                position: relative;
+                max-width: 420px;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            }
+            
+            .close-btn {
+                position: absolute;
+                right: 16px;
+                top: 12px;
+                font-size: 20px;
+                color: #999;
+                cursor: pointer;
+                width: 28px;
+                height: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                transition: background 0.2s, color 0.2s;
+            }
+            
+            .close-btn:hover {
+                background: #f0f0f0;
+                color: #333;
+            }
+            
+            .icon-container {
+                width: 64px;
+                height: 64px;
+                margin: 0 auto 20px;
+                background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            .icon-container svg {
+                width: 32px;
+                height: 32px;
+                color: #f57c00;
+            }
+            
+            h2 {
+                margin: 0 0 12px;
+                font-size: 20px;
+                font-weight: 600;
+                text-align: center;
+                color: #1a1a1a;
+            }
+            
+            .message {
+                text-align: center;
+                font-size: 14px;
+                line-height: 1.5;
+                color: #666;
+                margin-bottom: 24px;
+            }
+            
+            .buttons {
+                display: flex;
+                gap: 12px;
+                justify-content: center;
+            }
+            
+            .button {
+                padding: 10px 24px;
+                border-radius: 8px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.2s;
+                border: none;
+                font-family: inherit;
+            }
+            
+            .button-secondary {
+                background: #f5f5f5;
+                color: #666;
+            }
+            
+            .button-secondary:hover {
+                background: #e8e8e8;
+            }
+            
+            .button-primary {
+                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+                color: white;
+            }
+            
+            .button-primary:hover {
+                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+            }
+        </style>
+        <dialog>
+            <div class="dialog-content">
+                <span class="close-btn">&#x2715;</span>
+                <div class="icon-container">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                </div>
+                <h2>Low Balance</h2>
+                <p class="message">${this.message}</p>
+                <div class="buttons">
+                    <button class="button button-secondary" id="close-btn">Close</button>
+                    <button class="button button-primary" id="upgrade-btn">Upgrade Now</button>
+                </div>
+            </div>
+        </dialog>
+        `;
+    }
+    
+    connectedCallback () {
+        const dialog = this.shadowRoot.querySelector('dialog');
+        
+        this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
+            this.close();
+        });
+        
+        this.shadowRoot.querySelector('#close-btn').addEventListener('click', () => {
+            this.close();
+        });
+        
+        this.shadowRoot.querySelector('#upgrade-btn').addEventListener('click', () => {
+            window.open('https://puter.com/dashboard', '_blank');
+            this.close();
+        });
+        
+        // Close on backdrop click
+        dialog.addEventListener('click', (e) => {
+            if ( e.target === dialog ) {
+                this.close();
+            }
+        });
+    }
+    
+    open () {
+        this.shadowRoot.querySelector('dialog').showModal();
+    }
+    
+    close () {
+        this.shadowRoot.querySelector('dialog').close();
+        this.remove();
+    }
+}
+
+// Only define custom element in environments with DOM support
+if ( typeof globalThis.HTMLElement !== 'undefined' && globalThis.customElements ) {
+    if ( ! customElements.get('usage-limit-dialog') ) {
+        customElements.define('usage-limit-dialog', UsageLimitDialog);
+    }
+}
+
+/**
+ * Shows a usage limit dialog to the user
+ * @param {string} message - The message to display
+ */
+export function showUsageLimitDialog (message) {
+    // Only log in non-browser environments
+    if ( typeof globalThis.document === 'undefined' ) {
+        console.warn('[Puter]', message);
+        return;
+    }
+    
+    // Check if dialog is already shown to prevent duplicates
+    if ( document.querySelector('usage-limit-dialog') ) {
+        return;
+    }
+    
+    const dialog = new UsageLimitDialog(message);
+    document.body.appendChild(dialog);
+    dialog.open();
+}
+
+export default UsageLimitDialog;
+

package/types/modules/ai.d.ts

@@ -158,24 +158,14 @@ export interface Speech2SpeechOptions {
     file?: string | File | Blob;
     provider?: string;
     model?: string;
-    modelId?: string;
-    model_id?: string;
     voice?: string;
-    voiceId?: string;
-    voice_id?: string;
     output_format?: string;
-    outputFormat?: string;
     voice_settings?: Record<string, unknown>;
-    voiceSettings?: Record<string, unknown>;
     seed?: number;
     file_format?: string;
-    fileFormat?: string;
     remove_background_noise?: boolean;
-    removeBackgroundNoise?: boolean;
     optimize_streaming_latency?: number;
-    optimizeStreamingLatency?: number;
     enable_logging?: boolean;
-    enableLogging?: boolean;
     test_mode?: boolean;
 }
 

package/types/modules/apps.d.ts

@@ -1,6 +1,6 @@
-import type { PaginationOptions, RequestCallbacks } from '../shared.d.ts';
+import type { RequestCallbacks } from '../shared.d.ts';
 
-export interface AppRecord {
+export interface App {
     uid: string;
     name: string;
     index_url: string;
@@ -16,12 +16,25 @@ export interface AppRecord {
     user_count?: number;
 }
 
-export interface AppListOptions extends PaginationOptions {
+export interface CreateAppResult {
+    uid: string;
+    name: string;
+    title: string;
+    index_url: string;
+    subdomain: string;
+    owner: {
+        username: string;
+        uuid: string;
+    };
+    app_owner?: Record<string, unknown>;
+}
+
+export interface AppListOptions {
     stats_period?: string;
     icon_size?: null | 16 | 32 | 64 | 128 | 256 | 512;
 }
 
-export interface CreateAppOptions extends RequestCallbacks<AppRecord> {
+export interface CreateAppOptions {
     name: string;
     indexURL: string;
     title?: string;
@@ -34,7 +47,7 @@ export interface CreateAppOptions extends RequestCallbacks<AppRecord> {
     dedupeName?: boolean;
 }
 
-export interface UpdateAppAttributes extends RequestCallbacks<AppRecord> {
+export interface UpdateAppAttributes {
     name?: string;
     indexURL?: string;
     title?: string;
@@ -47,16 +60,12 @@ export interface UpdateAppAttributes extends RequestCallbacks<AppRecord> {
 }
 
 export class Apps {
-    constructor (context: { authToken?: string; APIOrigin: string; appID?: string });
-
-    setAuthToken (authToken: string): void;
-    setAPIOrigin (APIOrigin: string): void;
-
-    list (options?: AppListOptions): Promise<AppRecord[]>;
-    create (name: string, indexURL: string, title?: string): Promise<AppRecord>;
-    create (options: CreateAppOptions): Promise<AppRecord>;
-    update (name: string, attributes: UpdateAppAttributes): Promise<AppRecord>;
-    get (name: string, options?: AppListOptions): Promise<AppRecord>;
+    list (options?: AppListOptions): Promise<App[]>;
+    create (name: string, indexURL: string, title?: string): Promise<CreateAppResult>;
+    create (options: CreateAppOptions): Promise<CreateAppResult>;
+    update (name: string, attributes: UpdateAppAttributes): Promise<App>;
+    get (name: string, options?: AppListOptions): Promise<App>;
     delete (name: string): Promise<{ success?: boolean }>;
     getDeveloperProfile (options?: RequestCallbacks<Record<string, unknown>>): Promise<Record<string, unknown>>;
+    getDeveloperProfile (success: (value: Record<string, unknown>) => void, error?: (reason: unknown) => void): Promise<Record<string, unknown>>;
 }

package/types/modules/auth.d.ts

@@ -1,3 +1,5 @@
+import { RequestCallbacks } from "../shared";
+
 export interface User {
     uuid: string;
     username: string;
@@ -55,7 +57,7 @@ export class Auth {
     signIn (options?: { attempt_temp_user_creation?: boolean }): Promise<SignInResult>;
     signOut (): void;
     isSignedIn (): boolean;
-    getUser (): Promise<User>;
+    getUser (options:? RequestCallbacks<User>): Promise<User>;
     whoami (): Promise<User>;
     getMonthlyUsage (): Promise<MonthlyUsage>;
     getDetailedAppUsage (appId: string): Promise<DetailedAppUsage>;

package/types/modules/filesystem.d.ts

@@ -43,7 +43,6 @@ export interface DeleteOptions extends RequestCallbacks<void> {
     paths?: string | string[];
     recursive?: boolean;
     descendantsOnly?: boolean;
-    descendants_only?: boolean;
 }
 
 export interface ReadOptions extends RequestCallbacks<Blob> {
@@ -100,7 +99,6 @@ export interface WriteOptions extends RequestCallbacks<FSItem> {
     dedupeName?: boolean;
     createMissingParents?: boolean;
     createMissingAncestors?: boolean;
-    name?: string;
     init?: (operationId: string, xhr: XMLHttpRequest) => void;
     start?: () => void;
     progress?: (operationId: string, progress: number) => void;

package/types/modules/kv.d.ts

@@ -10,6 +10,14 @@ export interface KVIncrementPath {
     [path: string]: number;
 }
 
+export interface KVUpdatePath {
+    [path: string]: KVValue;
+}
+
+export interface KVAddPath {
+    [path: string]: KVValue | KVValue[];
+}
+
 export class KV {
     readonly MAX_KEY_SIZE: number;
     readonly MAX_VALUE_SIZE: number;
@@ -19,6 +27,8 @@ export class KV {
     del (key: string): Promise<boolean>;
     incr (key: string, amount?: number | KVIncrementPath): Promise<number>;
     decr (key: string, amount?: number | KVIncrementPath): Promise<number>;
+    add (key: string, value?: KVValue | KVAddPath): Promise<KVValue>;
+    update (key: string, pathAndValueMap: KVUpdatePath, ttlSeconds?: number): Promise<KVValue>;
     expire (key: string, ttlSeconds: number): Promise<boolean>;
     expireAt (key: string, timestampSeconds: number): Promise<boolean>;
     list (pattern?: string, returnValues?: false): Promise<string[]>;

package/types/modules/networking.d.ts

@@ -14,7 +14,7 @@ export class PSocket {
     close (): void;
     on (event: 'open', handler: () => void): void;
     on (event: 'data', handler: (buffer: Uint8Array) => void): void;
-    on (event: 'error', handler: (reason: unknown) => void): void;
+    on (event: 'error', handler: (reason: string) => void): void;
     on (event: 'close', handler: (hadError: boolean) => void): void;
     addListener (event: SocketEvent, handler: (...args: unknown[]) => void): void;
 }

package/types/modules/os.d.ts

@@ -1,12 +1,7 @@
 import type { RequestCallbacks } from '../shared.d.ts';
-import type { AuthUser } from './auth.d.ts';
+import type { User } from './auth.d.ts';
 
 export class OS {
-    constructor (context: { authToken?: string; APIOrigin: string; appID?: string });
-
-    setAuthToken (authToken: string): void;
-    setAPIOrigin (APIOrigin: string): void;
-
-    user (options?: RequestCallbacks<AuthUser> & { query?: Record<string, string> }): Promise<AuthUser>;
+    user (options?: RequestCallbacks<User> & { query?: Record<string, string> }): Promise<User>;
     version (options?: RequestCallbacks<Record<string, unknown>>): Promise<Record<string, unknown>>;
 }

package/types/modules/ui.d.ts

@@ -1,4 +1,3 @@
-import type { RequestCallbacks } from '../shared.d.ts';
 import type { FSItem } from './fs-item.d.ts';
 
 export interface AlertButton {
@@ -36,8 +35,12 @@ export interface WindowOptions {
 
 export interface LaunchAppOptions {
     name?: string;
+    app_name?: string;
     args?: Record<string, unknown>;
-    appInstanceID?: string;
+    file_paths?: string[];
+    items?: FSItem[];
+    pseudonym?: string;
+    callback?: (connection: AppConnection) => void;
 }
 
 export interface ThemeData {
@@ -90,17 +93,17 @@ export class AppConnection {
 }
 
 export class UI {
-    constructor (context: Record<string, unknown>, parameters: { appInstanceID?: string; parentInstanceID?: string });
-
     alert (message?: string, buttons?: AlertButton[]): Promise<string>;
-    prompt (message?: string, defaultValue?: string): Promise<string | null>;
-    authenticateWithPuter (): Promise<unknown>;
+    prompt (message?: string, placeholder?: string): Promise<string | null>;
+    authenticateWithPuter (): Promise<void>;
     contextMenu (options: ContextMenuOptions): void;
     createWindow (options?: WindowOptions): void;
     exit (statusCode?: number): void;
     getLanguage (): Promise<string>;
     hideSpinner (): void;
+    hideWindow (): void;
     showSpinner (): void;
+    showWindow (): void;
     showColorPicker (defaultColor?: string | Record<string, unknown>): Promise<string>;
     showDirectoryPicker (options?: DirectoryPickerOptions): Promise<FSItem | FSItem[]>;
     showFontPicker (defaultFont?: string | Record<string, unknown>): Promise<{ fontFamily: string }>;
@@ -127,7 +130,7 @@ export class UI {
     on (eventName: 'localeChanged', handler: (data: { language: string }) => void): void;
     on (eventName: 'themeChanged', handler: (data: ThemeData) => void): void;
     parentApp (): AppConnection | null;
-    launchApp (appName?: string, args?: Record<string, unknown>): Promise<AppConnection>;
+    launchApp (appName?: string, args?: Record<string, unknown>, callback?: (connection: AppConnection) => void): Promise<AppConnection>;
     launchApp (options: LaunchAppOptions): Promise<AppConnection>;
 
     getEntriesFromDataTransferItems (dataTransferItems: DataTransferItemList, options?: { raw?: boolean }): Promise<Array<File | FileSystemEntry>>;

package/types/modules/util.d.ts

@@ -7,6 +7,5 @@ export class UtilRPC {
 }
 
 export default class Util {
-    constructor ();
     rpc: UtilRPC;
 }