Upload folder using huggingface_hub

android/app/release/output-metadata.json

@@ -0,0 +1,37 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "shubham.akshit.tldraw",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 1,
+      "versionName": "1.0",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File",
+  "baselineProfiles": [
+    {
+      "minApi": 28,
+      "maxApi": 30,
+      "baselineProfiles": [
+        "baselineProfiles/1/app-release.dm"
+      ]
+    },
+    {
+      "minApi": 31,
+      "maxApi": 2147483647,
+      "baselineProfiles": [
+        "baselineProfiles/0/app-release.dm"
+      ]
+    }
+  ],
+  "minSdkVersionForDexing": 24
+}

client/components/AuthModal.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useAuth } from '../hooks/useAuth'
 import { colors } from '../constants/theme'
+import { apiUrl } from '../config'
 
 interface AuthModalProps {
     isOpen: boolean
@@ -25,7 +26,7 @@ export function AuthModal({ isOpen, onClose }: AuthModalProps) {
         try {
             const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register'
 
-            const res = await fetch(endpoint, {
+            const res = await fetch(apiUrl(endpoint), {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ username, password })

client/config.ts

@@ -1,6 +1,11 @@
 // --- SINGLE SOURCE OF TRUTH ---
 const VITE_PREVIEW_URL = import.meta.env.VITE_PREVIEW_URL
 
+const BACKENDS = {
+    hf: 'https://jaimodiji-my-multiplayer-app.hf.space',
+    cloudflare: 'https://multiplayer-template.bossemail.workers.dev'
+};
+
 const VERSION = "1.0.5-" + Date.now();
 console.log(`[Config] Version: ${VERSION}`);
 console.log(`[Config] window.location:`, {
@@ -11,13 +16,38 @@ console.log(`[Config] window.location:`, {
 
 let origin = window.location.origin
 
+// Helper to detect if we are in a "remote" mode (served from a server, not bundled)
+const isRemoteMode = () => {
+    const host = window.location.host;
+    return host.includes('hf.space') ||
+           host.includes('workers.dev') ||
+           host.includes('duckdns.org') ||
+           host.includes('192.168.');
+};
+
+// Helper to detect Capacitor
+const isCapacitor = () => {
+    return !!(window as any).Capacitor;
+};
+
 if (VITE_PREVIEW_URL) {
     console.log(`[Config] Using VITE_PREVIEW_URL: ${VITE_PREVIEW_URL}`);
     origin = VITE_PREVIEW_URL.replace(/\/$/, '')
+} else if (isCapacitor() && !isRemoteMode()) {
+    // We are likely in bundled mode on a device
+    const preferredBackend = localStorage.getItem('color_rm_backend') || 'cloudflare';
+    origin = (BACKENDS as any)[preferredBackend] || BACKENDS.cloudflare;
+    console.log(`[Config] Capacitor bundled mode detected. Using backend: ${origin}`);
 }
 
 // Force WSS if we are on HTTPS
 export const SERVER_URL = origin
 export const WS_URL = origin.replace(/^http/, 'ws')
 
+export const apiUrl = (path: string) => {
+    // Ensure path starts with /
+    const normalizedPath = path.startsWith('/') ? path : '/' + path;
+    return SERVER_URL + normalizedPath;
+}
+
 console.log(`[Config] FINAL -> SERVER_URL: ${SERVER_URL}, WS_URL: ${WS_URL}`);

client/getBookmarkPreview.tsx

@@ -1,4 +1,5 @@
 import { AssetRecordType, TLAsset, TLBookmarkAsset, getHashForString } from 'tldraw'
+import { apiUrl } from './config'
 
 // How does our server handle bookmark unfurling?
 export async function getBookmarkPreview({ url }: { url: string }): Promise<TLAsset> {
@@ -19,7 +20,7 @@ export async function getBookmarkPreview({ url }: { url: string }): Promise<TLAs
 
 	try {
 		// try to fetch the preview data from the server
-		const response = await fetch(`/api/unfurl?url=${encodeURIComponent(url)}`)
+		const response = await fetch(apiUrl(`/api/unfurl?url=${encodeURIComponent(url)}`))
 		const data: any = await response.json()
 
 		// fill in our asset with whatever info we found

client/hooks/useBackups.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import { useAuth } from './useAuth'
-import { SERVER_URL } from '../config'
+import { apiUrl } from '../config'
 
 export interface BackupItem {
     key: string
@@ -22,7 +22,7 @@ export function useBackups() {
         setIsLoading(true)
         setError(null)
         try {
-            const res = await fetch(`${SERVER_URL}/api/backups`, {
+            const res = await fetch(apiUrl('/api/backups'), {
                 headers: { 'Authorization': `Bearer ${token}` }
             })
             if (!res.ok) throw new Error('Failed to fetch backups')
@@ -39,7 +39,7 @@ export function useBackups() {
         if (!isAuthenticated || !token) throw new Error('Not authenticated')
 
         try {
-            const res = await fetch(`${SERVER_URL}/api/backup`, {
+            const res = await fetch(apiUrl('/api/backup'), {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -62,7 +62,7 @@ export function useBackups() {
 
         try {
             const encodedKey = encodeURIComponent(key)
-            const res = await fetch(`${SERVER_URL}/api/backup/${encodedKey}`, {
+            const res = await fetch(apiUrl(`/api/backup/${encodedKey}`), {
                 method: 'DELETE',
                 headers: { 'Authorization': `Bearer ${token}` }
             })
@@ -85,7 +85,7 @@ export function useBackups() {
         // The server expects encoded key in param: /api/backup/:key
         const encodedKey = encodeURIComponent(key)
 
-        const res = await fetch(`${SERVER_URL}/api/backup/${encodedKey}`, {
+        const res = await fetch(apiUrl(`/api/backup/${encodedKey}`), {
             headers: { 'Authorization': `Bearer ${token}` }
         })
 

client/multiplayerAssetStore.tsx

@@ -1,6 +1,6 @@
 import { TLAssetStore, uniqueId } from 'tldraw'
 // 1. IMPORT CONFIG
-import { SERVER_URL } from './config'
+import { apiUrl } from './config'
 
 export const multiplayerAssetStore: TLAssetStore = {
     async upload(_asset, file) {
@@ -8,7 +8,7 @@ export const multiplayerAssetStore: TLAssetStore = {
         const objectName = `${id}-${file.name}`.replace(/[^a-zA-Z0-9.]/g, '-')
         
         // 2. USE CONFIG
-        const url = `${SERVER_URL}/api/uploads/${objectName}`
+        const url = apiUrl(`/api/uploads/${objectName}`)
 
         const response = await fetch(url, {
             method: 'POST',

client/pages/Lobby.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { uniqueId } from 'tldraw'
 
+import { apiUrl } from '../config'
 import { generateBoardName } from '../utils/nameGenerator'
 import { saveRoom } from './storageUtils'
 import { useAuth } from '../hooks/useAuth'
@@ -44,7 +45,7 @@ export function Lobby() {
 
     useEffect(() => {
         if (isAuthenticated && token) {
-            fetch('/api/color_rm/registry', {
+            fetch(apiUrl('/api/color_rm/registry'), {
                 headers: {
                     'Authorization': `Bearer ${token}`
                 }

client/pages/RoomPage.tsx

@@ -18,7 +18,7 @@ import {
 import { useSync } from '@tldraw/sync'
 import { getBookmarkPreview } from '../getBookmarkPreview'
 import { multiplayerAssetStore } from '../multiplayerAssetStore'
-import { WS_URL, SERVER_URL } from '../config'
+import { WS_URL, SERVER_URL, apiUrl } from '../config'
 import { saveRoom } from './storageUtils'
 import { StatePersistence } from '../components/StatePersistence'
 import { NavigationDock } from '../components/NavigationDock'
@@ -150,7 +150,7 @@ export function RoomPage() {
 
     useEffect(() => {
         saveRoom(roomId)
-        const metaUrl = `${SERVER_URL}/api/meta/${roomId}`;
+        const metaUrl = apiUrl(`/api/meta/${roomId}`);
         console.log(`[Room] Fetching metadata from: ${metaUrl}`);
         
         fetch(metaUrl)

public/color_rm.html

@@ -384,6 +384,7 @@
         </div>
         <div class="picker-body">
             <div id="iroWheel"></div>
+            <div id="pickerSwatches" style="display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; justify-content:center; width:100%;"></div>
             <button id="pickerActionBtn" class="btn btn-primary" style="width:100%; margin-top:10px;">Set</button>
             <button id="pickerNoneBtn" class="btn" style="width:100%; margin-top:5px; display:none">Transparent</button>
         </div>

public/scripts/ColorRmApp.js

@@ -13,7 +13,8 @@ export class ColorRmApp {
 
         this.state = {
             sessionId: null, images: [], idx: 0,
-            colors: [], strict: 15, tool: 'none', bg: 'transparent',
+            colors: [], customSwatches: JSON.parse(localStorage.getItem('crm_custom_colors') || '[]'),
+            strict: 15, tool: 'none', bg: 'transparent',
             penColor: '#ef4444', penSize: 3, eraserSize: 20, eraserType: 'stroke',
             textSize: 40,
             shapeType: 'rectangle', shapeBorder: '#3b82f6', shapeFill: 'transparent', shapeWidth: 3,
@@ -534,8 +535,15 @@ export class ColorRmApp {
         const pickerAction = this.getElement('pickerActionBtn');
         if(pickerAction) {
             pickerAction.onclick = () => {
+                const hex = this.iroP.color.hexString;
+
+                // Save to custom swatches history (max 14)
+                this.state.customSwatches = this.state.customSwatches.filter(c => c !== hex);
+                this.state.customSwatches.unshift(hex);
+                if(this.state.customSwatches.length > 14) this.state.customSwatches.pop();
+                localStorage.setItem('crm_custom_colors', JSON.stringify(this.state.customSwatches));
+
                 if(this.state.pickerMode==='remove') {
-                    const hex = this.iroP.color.hexString;
                     const i = parseInt(hex.slice(1), 16);
                     this.state.colors.push({hex, lab:this.rgbToLab((i>>16)&255,(i>>8)&255,i&255)});
                     this.renderSwatches();
@@ -1231,6 +1239,7 @@ export class ColorRmApp {
         this.state.pickerMode=m;
         const pb = this.getElement('pickerNoneBtn');
         if(pb) pb.style.display = (m==='shapeFill'||m==='selectionFill') ? 'block' : 'none';
+        this.renderPickerSwatches();
         const fp = this.getElement('floatingPicker');
         if(fp) fp.style.display='flex';
     }
@@ -1486,6 +1495,22 @@ export class ColorRmApp {
         });
     }
 
+    renderPickerSwatches() {
+        const c = this.getElement('pickerSwatches');
+        if (!c) return;
+        c.innerHTML = '';
+        this.state.customSwatches.forEach(color => {
+            const d = document.createElement('div');
+            d.style.width = '24px'; d.style.height = '24px';
+            d.style.borderRadius = '4px'; d.style.border = '1px solid #333';
+            d.style.cursor = 'pointer'; d.style.background = color;
+            d.onclick = () => {
+                if (this.iroP) this.iroP.color.set(color);
+            };
+            c.appendChild(d);
+        });
+    }
+
     switchSideTab(tab) {
         this.state.activeSideTab = tab;
         const tabs = ['tools', 'pages', 'box', 'debug'];