inicontent 1.0.0

package/app/composables/usePdfCompressor.ts

@@ -0,0 +1,180 @@
+import { ref, computed } from "vue"
+import { jsPDF } from "jspdf"
+import * as pdfjs from "pdfjs-dist"
+
+if (import.meta.client) {
+	const workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.mjs`
+	pdfjs.GlobalWorkerOptions.workerSrc = workerSrc
+}
+
+// Queue system for multiple files
+interface CompressionTask {
+	file: File
+	resolve: (file: File) => void
+	reject: (error: Error) => void
+}
+
+export const usePdfCompressor = () => {
+	const loading = ref(false)
+	const progress = ref(0)
+	const queue = ref<CompressionTask[]>([])
+	const isProcessing = ref(false)
+	const skipRemaining = ref(false) // Skip compression for remaining files
+	let abortController: AbortController | null = null
+	let currentTask: CompressionTask | null = null
+
+	const abort = () => {
+		if (abortController) {
+			abortController.abort()
+		}
+		// Mark to skip compression for remaining files
+		skipRemaining.value = true
+
+		// Resolve all pending tasks with original files (skip compression)
+		while (queue.value.length > 0) {
+			const task = queue.value.shift()
+			if (task) {
+				task.resolve(task.file) // Return original file
+			}
+		}
+		// Reject current task only (it was being compressed)
+		if (currentTask) {
+			currentTask.reject(new Error("aborted"))
+			currentTask = null
+		}
+		loading.value = false
+		progress.value = 0
+		isProcessing.value = false
+	}
+
+	const resetSkip = () => {
+		skipRemaining.value = false
+	}
+
+	const processQueue = async () => {
+		if (isProcessing.value || queue.value.length === 0) return
+
+		isProcessing.value = true
+
+		while (queue.value.length > 0) {
+			const task = queue.value.shift()
+			if (!task) continue
+
+			currentTask = task
+			try {
+				// If skip was requested, return original file without compression
+				if (skipRemaining.value) {
+					task.resolve(task.file)
+				} else {
+					const compressedFile = await compressPdfInternal(task.file)
+					task.resolve(compressedFile)
+				}
+			} catch (error) {
+				task.reject(error as Error)
+			}
+			currentTask = null
+		}
+
+		isProcessing.value = false
+		// Reset skip flag after processing all files
+		skipRemaining.value = false
+	}
+
+	const compressPdfInternal = async (file: File): Promise<File> => {
+		if (!file.type.includes("pdf")) {
+			console.warn("File is not a PDF. Skipping compression.")
+			return file
+		}
+
+		loading.value = true
+		progress.value = 0
+		abortController = new AbortController()
+		const { signal } = abortController
+
+		try {
+			const pdfData = await file.arrayBuffer()
+			const pdfDoc = await pdfjs.getDocument({
+				data: pdfData,
+				// Needed so non-embedded/base-14 fonts get correct glyph widths instead of garbled spacing.
+				cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
+				cMapPacked: true,
+				standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts/`,
+				// Fall back to the system's Arabic/CJK fonts when they aren't embedded in the PDF.
+				useSystemFonts: true,
+				// Draw embedded glyph outlines directly instead of via @font-face+fillText, which breaks Arabic letter joining for some font subsets.
+				disableFontFace: true,
+			}).promise
+			const totalPages = pdfDoc.numPages
+			const doc = new jsPDF({
+				compress: true,
+			})
+
+			for (let i = 1; i <= totalPages; i++) {
+				if (signal.aborted) throw new Error("PDF compression aborted")
+
+				const page = await pdfDoc.getPage(i)
+				const originalViewport = page.getViewport({ scale: 1 })
+				// Using scale 2 (144 DPI) for better quality while maintaining reasonable size
+				const viewport = page.getViewport({ scale: 2 })
+
+				const canvas = document.createElement("canvas")
+				const context = canvas.getContext("2d")
+				canvas.width = viewport.width
+				canvas.height = viewport.height
+
+				if (!context) throw new Error("Could not get canvas context.")
+
+				await page.render({ canvasContext: context, viewport, canvas }).promise
+				const imgData = canvas.toDataURL("image/jpeg", 0.8) // .8 offers better quality
+
+				doc.addPage([originalViewport.width, originalViewport.height])
+				if (i === 1) doc.deletePage(1) // Remove the default blank page
+
+				doc.addImage(
+					imgData,
+					"JPEG",
+					0,
+					0,
+					originalViewport.width,
+					originalViewport.height,
+					undefined,
+					"FAST",
+				)
+				progress.value = i / totalPages
+			}
+
+			const compressedBlob = doc.output("blob")
+			const compressedFile = new File([compressedBlob], file.name, {
+				type: "application/pdf",
+				lastModified: Date.now(),
+			})
+
+			// Return the smaller of the two files
+			return compressedFile.size < file.size ? compressedFile : file
+		} catch (error) {
+			console.error("Failed to compress PDF:", error)
+			// Return original file on error
+			return file
+		} finally {
+			loading.value = false
+			progress.value = 0
+			abortController = null
+		}
+	}
+
+	const compressPdf = async (file: File): Promise<File> => {
+		return new Promise((resolve, reject) => {
+			queue.value.push({ file, resolve, reject })
+			processQueue()
+		})
+	}
+
+	return {
+		compressPdf,
+		loading,
+		progress,
+		abort,
+		resetSkip,
+		queueLength: computed(() => queue.value.length),
+	}
+}

package/app/composables/usePlatformRedirect.ts

@@ -0,0 +1,72 @@
+export type PlatformFeature = "pages" | "blocks" | "templates" | "billing";
+
+const platformFeaturePaths: Record<PlatformFeature, string> = {
+	pages: "/admin/tables/pages",
+	// Blocks are managed inside the page builder on the platform (the builder
+	// writes/reads the `/blocks` API) — there is no dedicated blocks admin
+	// surface yet, so point there until one exists.
+	blocks: "/admin/tables/pages",
+	templates: "/admin/tables/templates",
+	billing: "/admin/billing",
+};
+
+/**
+ * Resolves where a platform-level workspace (pages, blocks, templates,
+ * billing) actually lives for the current database: the tenant's own
+ * `https://<slug>.inicontent.com` subdomain, or the custom domain attached to
+ * the database when one is pointed (`database.domains`). The platform
+ * database itself lives at the bare `https://inicontent.com` host.
+ *
+ * The current sessions are appended as query params (`?{db}_sid=...` and
+ * `?inicontent_sid=...`) because cookies are domain-scoped and cannot be
+ * copied cross-origin by JavaScript — the `sid-ingest` global middleware
+ * writes them back into cookies on the target.
+ */
+export function usePlatformRedirect() {
+	const config = useRuntimeConfig();
+	const database = useState<Database>("database");
+
+	const databaseSlug = computed(() => {
+		const slug = database.value?.slug ?? config.public.database;
+		return slug && slug !== "inicontent" ? String(slug) : "inicontent";
+	});
+
+	const databaseSessionID = useScopedCookie<string>("sid", databaseSlug.value);
+	const platformSessionID = useScopedCookie<string>("sid", "inicontent");
+
+	const platformHost = computed(() => {
+		const customDomain = database.value?.domains
+			?.map((domain) =>
+				String(domain)
+					.replace(/^https?:\/\//, "")
+					.replace(/\/+$/, ""),
+			)
+			.find(Boolean);
+		if (customDomain) return `https://${customDomain}`;
+		return databaseSlug.value === "inicontent"
+			? "https://inicontent.com"
+			: `https://${databaseSlug.value}.inicontent.com`;
+	});
+
+	function platformUrl(feature: PlatformFeature) {
+		const url = new URL(platformFeaturePaths[feature], platformHost.value);
+		// On the platform database the database session IS the platform
+		// session, so the database key would duplicate the platform key.
+		if (databaseSlug.value !== "inicontent" && databaseSessionID.value) {
+			url.searchParams.set(
+				`${databaseSlug.value}_sid`,
+				databaseSessionID.value,
+			);
+		}
+		if (platformSessionID.value) {
+			url.searchParams.set("inicontent_sid", platformSessionID.value);
+		}
+		return url.toString();
+	}
+
+	return {
+		databaseSlug,
+		platformHost,
+		platformUrl,
+	};
+}

package/app/composables/useRealtimeSync.ts

@@ -0,0 +1,233 @@
+/**
+ * Composable for handling realtime data synchronization
+ * Establishes WebSocket connection and updates data reactively
+ */
+
+import type { Ref } from "vue";
+
+interface RealtimeMessage {
+	type: "subscribed" | "error" | "data_change";
+	action?: "create" | "update" | "delete";
+	data?: any;
+	database?: string;
+	table?: string;
+	timestamp?: string;
+	message?: string;
+}
+
+export function useRealtimeSync(
+	table: Ref<Table | undefined>,
+	data: Ref<apiResponse<Item[]> | undefined>,
+	database: Ref<Database | undefined>,
+) {
+	const websocket = ref<WebSocket | null>(null);
+	const isConnected = ref(false);
+	const isConnecting = ref(false);
+
+	const config = useRuntimeConfig();
+
+	/**
+	 * Connect to realtime updates via WebSocket
+	 */
+	const connect = () => {
+		if (!table.value || !database.value || !table.value.config?.realtime) {
+			return;
+		}
+
+		if (isConnecting.value || isConnected.value) {
+			return;
+		}
+
+		// Don't connect on server (import.meta.server is statically replaced at build time)
+		if (import.meta.server) {
+			return;
+		}
+
+		isConnecting.value = true;
+
+		try {
+			const apiBase = config.public.apiBase;
+			let wsUrl: string;
+			if (apiBase.startsWith("http")) {
+				const url = new URL(apiBase);
+				const wsProtocol = url.protocol === "https:" ? "wss:" : "ws:";
+				wsUrl = `${wsProtocol}//${url.host}/realtime`;
+			} else {
+				const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+				wsUrl = `${wsProtocol}//${window.location.host}/realtime`;
+			}
+			websocket.value = new WebSocket(wsUrl);
+
+			websocket.value.onopen = () => {
+				isConnected.value = true;
+				isConnecting.value = false;
+
+				// Subscribe to table updates
+				const subscribeMessage = {
+					type: "subscribe",
+					database: database.value?.slug,
+					table: table.value?.slug,
+					userId: undefined, // Set from auth if available
+					sessionId: useScopedCookie<string>("sid", database.value?.slug).value,
+				};
+
+				websocket.value?.send(JSON.stringify(subscribeMessage));
+				console.log("Connected to realtime updates");
+			};
+
+			websocket.value.onmessage = (event) => {
+				handleRealtimeMessage(JSON.parse(event.data) as RealtimeMessage);
+			};
+
+			websocket.value.onerror = (error) => {
+				console.error("WebSocket error:", error);
+				isConnecting.value = false;
+			};
+
+			websocket.value.onclose = () => {
+				isConnected.value = false;
+				isConnecting.value = false;
+				console.log("Disconnected from realtime updates");
+
+				// Attempt to reconnect after 3 seconds
+				if (table.value?.config?.realtime) {
+					setTimeout(() => {
+						connect();
+					}, 3000);
+				}
+			};
+		} catch (error) {
+			console.error("Failed to establish WebSocket connection:", error);
+			isConnecting.value = false;
+		}
+	};
+
+	/**
+	 * Handle incoming realtime messages
+	 */
+	const handleRealtimeMessage = (message: RealtimeMessage) => {
+		if (message.type === "subscribed") {
+			console.log("Subscribed to realtime updates:", message.message);
+		} else if (message.type === "data_change") {
+			updateDataFromRealtimeChange(message);
+		} else if (message.type === "error") {
+			console.error("Realtime error:", message.message);
+		}
+	};
+
+	/**
+	 * Update local data based on realtime changes
+	 */
+	const updateDataFromRealtimeChange = (message: RealtimeMessage) => {
+		if (!data.value?.result || !message.action) {
+			return;
+		}
+
+		const dataArray = Array.isArray(data.value.result)
+			? data.value.result
+			: [data.value.result];
+
+		switch (message.action) {
+			case "create": {
+				// Add new item to the beginning
+				if (Array.isArray(message.data)) {
+					dataArray.unshift(...message.data);
+				} else if (message.data) {
+					dataArray.unshift(message.data);
+				}
+				break;
+			}
+
+			case "update": {
+				// Update existing item
+				if (Array.isArray(message.data)) {
+					message.data.forEach((newItem) => {
+						const index = dataArray.findIndex((item) => item.id === newItem.id);
+						if (index !== -1) {
+							dataArray[index] = { ...dataArray[index], ...newItem };
+						}
+					});
+				} else if (message.data) {
+					const index = dataArray.findIndex(
+						(item) => item.id === message.data.id,
+					);
+					if (index !== -1) {
+						dataArray[index] = { ...dataArray[index], ...message.data };
+					}
+				}
+				break;
+			}
+
+			case "delete": {
+				// Remove deleted item
+				if (message.data?.id) {
+					const index = dataArray.findIndex(
+						(item) => item.id === message.data.id,
+					);
+					if (index !== -1) {
+						dataArray.splice(index, 1);
+					}
+				} else if (message.data?.deleted) {
+					// Handle bulk delete
+					const deletedIds = Array.isArray(message.data.deleted)
+						? message.data.deleted
+						: [message.data.deleted];
+					deletedIds.forEach((id: any) => {
+						const index = dataArray.findIndex((item) => item.id === id);
+						if (index !== -1) {
+							dataArray.splice(index, 1);
+						}
+					});
+				}
+				break;
+			}
+		}
+
+		// Update reactive data
+		if (data.value) {
+			data.value.result = Array.isArray(data.value.result)
+				? dataArray
+				: dataArray[0];
+		}
+	};
+
+	/**
+	 * Disconnect from realtime updates
+	 */
+	const disconnect = () => {
+		if (websocket.value) {
+			websocket.value.close();
+			websocket.value = null;
+			isConnected.value = false;
+		}
+	};
+
+	/**
+	 * Watch table config changes and reconnect if realtime is toggled
+	 */
+	watch(
+		() => table.value?.config?.realtime,
+		(isRealtimeEnabled) => {
+			if (isRealtimeEnabled) {
+				connect();
+			} else {
+				disconnect();
+			}
+		},
+		{ immediate: true },
+	);
+
+	/**
+	 * Cleanup on unmount
+	 */
+	onBeforeUnmount(() => {
+		disconnect();
+	});
+
+	return {
+		isConnected,
+		isConnecting,
+		connect,
+		disconnect,
+	};
+}

package/app/composables/useReferencedItems.ts

@@ -0,0 +1,180 @@
+import { isObject } from "inibase/utils";
+import Inison from "inison";
+import type { Ref } from "vue";
+import { effectScope } from "vue";
+
+/**
+ * Client-side cache of referenced-table items fetched by id.
+ *
+ * Table references can arrive as full item objects (primary locale) or as raw
+ * ids (translated values, stored backend overlays). When only ids are present,
+ * grid columns and table fields need the referenced item's label fields. This
+ * composable collects every id referenced on the current render pass and
+ * fetches them all in ONE batched request per referenced table, then serves the
+ * results reactively from a module-level cache.
+ *
+ * The cache is keyed to the current UI language (requests carry a `locale`
+ * param), so when the language changes the cache is cleared and every id
+ * referenced so far is re-fetched in a single batched request per table.
+ */
+const itemsCache = reactive(new Map<string, Record<string, Item>>());
+const pending = new Map<string, Set<string>>();
+// All ids ever registered this session, used to re-fetch after a language
+// switch without relying on components re-mounting.
+const registeredByTable = new Map<string, Set<string>>();
+// Bumped on every language switch. Captured at request start so a response
+// that resolved in the *previous* language is discarded instead of overwriting
+// the fresh cache with stale labels.
+let cacheVersion = 0;
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Captured synchronously at the first register() call (component setup) so the
+// deferred flush can use composables without an active setup context.
+let runtime:
+	| {
+			config: ReturnType<typeof useRuntimeConfig>;
+			database: Ref<Database | undefined>;
+			sessionID: Ref<string | null>;
+			language: Ref<string | null>;
+	  }
+	| undefined;
+
+function ensureRuntime() {
+	if (runtime) return runtime;
+	const database = useState<Database>("database");
+	runtime = {
+		config: useRuntimeConfig(),
+		database,
+		sessionID: useScopedCookie<string>("sid", database.value?.slug),
+		language: useScopedCookie<LanguagesType>("language", database.value?.slug),
+	};
+	return runtime;
+}
+
+// Installed once, detached from any component scope so it survives unmounts.
+let languageListenerInstalled = false;
+
+function installLanguageListener() {
+	if (languageListenerInstalled || import.meta.server) return;
+	languageListenerInstalled = true;
+	effectScope(true).run(() => {
+		const Language = ensureRuntime().language;
+		watch(Language, () => clearCacheOnLanguageChange());
+	});
+}
+
+function clearCacheOnLanguageChange() {
+	cacheVersion++;
+	itemsCache.clear();
+	pending.clear();
+	// Re-queue every id referenced so far and fetch them under the new locale.
+	for (const [tableSlug, ids] of registeredByTable) {
+		if (!ids.size) continue;
+		pending.set(tableSlug, new Set(ids));
+	}
+	scheduleFlush();
+}
+
+function scheduleFlush() {
+	if (flushTimer !== null) return;
+	flushTimer = setTimeout(() => {
+		flushTimer = null;
+		void flushPending();
+	}, 0);
+}
+
+async function flushPending() {
+	const batches = [...pending.entries()];
+	pending.clear();
+	for (const [tableSlug, ids] of batches) {
+		const unique = [...new Set([...ids].filter(Boolean))];
+		if (!unique.length) continue;
+		try {
+			await fetchByIds(tableSlug, unique);
+		} catch {
+			// leave the ids uncached; a later register() pass can retry
+		}
+	}
+}
+
+async function fetchByIds(tableSlug: string, ids: string[]) {
+	const { config, database, sessionID, language } = ensureRuntime();
+	if (!database.value?.slug) return;
+	const table = database.value.tables?.find(({ slug }) => slug === tableSlug);
+	const version = cacheVersion;
+	const requestedLocale = language.value;
+	const request = await $fetch<apiResponse<Item[]>>(
+		`${config.public.apiBase}${database.value.slug}/${tableSlug}`,
+		{
+			params: {
+				where: Inison.stringify({ id: `[]${ids.join(",")}` }),
+				// `perPage: -1` is required: without it inibase caps results at the
+				// default of 15 rows, silently dropping every id past the first 15.
+				options: Inison.stringify({
+					columns: table?.columns,
+					perPage: -1,
+				}),
+				locale: requestedLocale ?? undefined,
+				[`${database.value.slug}_sid`]: sessionID.value,
+			},
+			cache: "no-cache",
+			credentials: "include",
+		},
+	);
+	// Discard responses that resolved after the language changed — their labels
+	// belong to a previous locale and must not overwrite the fresh cache.
+	if (version !== cacheVersion) return;
+	const result = request?.result;
+	if (!Array.isArray(result) || !result.length) return;
+	const freshMap: Record<string, Item> = {
+		...(itemsCache.get(tableSlug) ?? {}),
+	};
+	for (const item of result) {
+		if (!item || item.id === undefined || item.id === null) continue;
+		freshMap[String(item.id)] = item;
+	}
+	itemsCache.set(tableSlug, freshMap);
+}
+
+export default function useReferencedItems(tableSlug: string | undefined) {
+	const items = computed<Record<string, Item>>(() =>
+		tableSlug ? (itemsCache.get(tableSlug) ?? {}) : {},
+	);
+
+	/**
+	 * Queue any raw id(s) in a value into the page's single batched fetch.
+	 * Already-resolved object values are ignored and never trigger a request.
+	 */
+	function register(value: unknown) {
+		if (import.meta.server || !tableSlug) return;
+		installLanguageListener();
+
+		const entries = ([] as unknown[]).concat(value);
+		const missing = new Set<string>();
+		let knownIds = registeredByTable.get(tableSlug);
+		if (!knownIds) {
+			knownIds = new Set();
+			registeredByTable.set(tableSlug, knownIds);
+		}
+		for (const entry of entries) {
+			if (entry === undefined || entry === null) continue;
+			if (isObject(entry)) continue; // already-resolved object: no fetch
+			const id = String(entry).trim();
+			if (!id) continue;
+			knownIds.add(id);
+			if (itemsCache.get(tableSlug)?.[id]) continue;
+			missing.add(id);
+		}
+		if (!missing.size) return;
+
+		let set = pending.get(tableSlug);
+		if (!set) {
+			set = new Set();
+			pending.set(tableSlug, set);
+		}
+		for (const id of missing) set.add(id);
+		scheduleFlush();
+	}
+
+	return { items, register };
+}