inicontent 1.0.0

package/app/composables/useLocalDatabaseConfig.ts

@@ -0,0 +1,51 @@
+/**
+ * Local persistence of the database configuration (metadata + table schemas).
+ *
+ * The middleware normally loads this from the API (served by the service
+ * worker's config cache when offline). Persisting a copy in localStorage adds
+ * a second, independent fallback: even when the SW cache is evicted or a
+ * partial cache state is served, the app can still boot with the real database
+ * config purely from local storage — i.e. the app stays accessible offline.
+ */
+
+const STORAGE_KEY_PREFIX = "inicontent:db-config:";
+/** Guard against pathological sizes (schemas can be large, but not this large). */
+const MAX_STORAGE_BYTES = 2_500_000;
+
+export function saveDatabaseConfigLocally(slug: string, database?: Database) {
+	if (typeof localStorage === "undefined" || !database || !slug) return;
+	try {
+		const serialized = JSON.stringify(database);
+		if (serialized.length > MAX_STORAGE_BYTES) {
+			console.warn(
+				"[LocalDatabaseConfig] config too large to persist locally:",
+				serialized.length,
+			);
+			return;
+		}
+		localStorage.setItem(STORAGE_KEY_PREFIX + slug, serialized);
+	} catch (error) {
+		console.warn("[LocalDatabaseConfig] Failed to persist config:", error);
+	}
+}
+
+export function loadDatabaseConfigLocally(slug: string): Database | undefined {
+	if (typeof localStorage === "undefined" || !slug) return undefined;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY_PREFIX + slug);
+		if (!raw) return undefined;
+		return JSON.parse(raw) as Database;
+	} catch (error) {
+		console.warn("[LocalDatabaseConfig] Failed to read config:", error);
+		return undefined;
+	}
+}
+
+export function clearDatabaseConfigLocally(slug: string) {
+	if (typeof localStorage === "undefined" || !slug) return;
+	try {
+		localStorage.removeItem(STORAGE_KEY_PREFIX + slug);
+	} catch {
+		// ignore
+	}
+}

package/app/composables/useOcr.ts

@@ -0,0 +1,300 @@
+import type { Worker } from "tesseract.js";
+
+/** OCR result for a single word with its bounding box */
+export interface OcrWord {
+	text: string;
+	confidence: number;
+	bbox: { x0: number; y0: number; x1: number; y1: number };
+}
+
+/** Full OCR recognition result */
+export interface OcrResult {
+	text: string;
+	confidence: number;
+	words: OcrWord[];
+}
+
+/** A block of structured content parsed from OCR text */
+export interface OcrBlock {
+	type: "heading" | "paragraph" | "bulletList" | "numberedList";
+	level?: 1 | 2;
+	items?: string[];
+	text?: string;
+}
+
+/** Languages supported by the platform */
+export type OcrLanguage = "eng" | "ara" | "fra" | "spa";
+
+/** Maps UI locale codes to tesseract language codes */
+const LOCALE_MAP: Record<string, OcrLanguage> = {
+	en: "eng",
+	ar: "ara",
+	fr: "fra",
+	es: "spa",
+};
+
+/**
+ * OCR composable powered by tesseract.js.
+ *
+ * Lazily creates a worker on first recognition and reuses it.
+ * Returns structured text + a parseStructure() helper that converts
+ * raw OCR output into heading / paragraph / list blocks suitable
+ * for Tiptap's insertContent().
+ *
+ * Designed to be extracted into any Vue 3 project.
+ */
+export function useOcr() {
+	let workerPromise: Promise<Worker> | null = null;
+
+	const loading = ref(false);
+	const progress = ref(0);
+	const language = ref<OcrLanguage>("eng");
+
+	/** Set OCR language using a locale code (en, ar, fr, es) and re-init the worker */
+	async function setLanguage(locale: string) {
+		const next = LOCALE_MAP[locale] ?? "eng";
+		if (next === language.value) return;
+		language.value = next;
+		if (workerPromise) await reinitWorker();
+	}
+
+	/** Ensure the tesseract worker is initialised (lazy-loads tesseract.js) */
+	async function ensureWorker(): Promise<Worker> {
+		if (workerPromise) return workerPromise;
+
+		workerPromise = (async () => {
+			const { createWorker } = await import("tesseract.js");
+			const w = await createWorker(language.value, undefined, {
+				logger: (m) => {
+					if (
+						m.status === "recognizing text" &&
+						typeof m.progress === "number"
+					) {
+						progress.value = Math.round(m.progress * 100);
+					}
+				},
+			});
+			return w;
+		})();
+
+		return workerPromise;
+	}
+
+	/**
+	 * Re-initialise the worker when the language changes.
+	 */
+	async function reinitWorker(): Promise<void> {
+		if (workerPromise) {
+			const old = await workerPromise;
+			await old.terminate();
+			workerPromise = null;
+		}
+		await ensureWorker();
+	}
+
+	/**
+	 * Run OCR on an image / canvas / data-URL.
+	 *
+	 * @param source  - HTMLCanvasElement, HTMLImageElement, HTMLVideoElement, or string URL
+	 * @returns       - Parsed text, confidence, and per-word bounding boxes
+	 */
+	async function recognize(
+		source: CanvasImageSource | string,
+	): Promise<OcrResult> {
+		loading.value = true;
+		progress.value = 0;
+
+		try {
+			const worker = await ensureWorker();
+
+			const { data } = await worker.recognize(source as any);
+
+			const words: OcrWord[] = (data.words ?? []).map((w: any) => ({
+				text: w.text,
+				confidence: w.confidence,
+				bbox: w.bbox,
+			}));
+
+			return {
+				text: data.text.trim(),
+				confidence: data.confidence,
+				words,
+			};
+		} finally {
+			loading.value = false;
+			progress.value = 100;
+		}
+	}
+
+	/**
+	 * Parse raw OCR text into structured blocks for Tiptap.
+	 *
+	 * Detection rules:
+	 *  - ALL-CAPS line (≥3 chars, no digits) → heading (h1 if ≤40 chars, h2 otherwise)
+	 *  - Line starting with `- `, `• `, `* ` → bullet list item
+	 *  - Line starting with `1. `, `2. `, etc. → numbered list item
+	 *  - Consecutive non-empty, non-list, non-heading lines → paragraph
+	 */
+	function parseStructure(rawText: string): OcrBlock[] {
+		const lines = rawText.split("\n");
+		const blocks: OcrBlock[] = [];
+
+		let i = 0;
+
+		while (i < lines.length) {
+			const line = lines[i]!;
+			const trimmed = line.trim();
+
+			// Empty line → skip (paragraph breaks handled implicitly)
+			if (!trimmed) {
+				i++;
+				continue;
+			}
+
+			// Heading: ALL CAPS, ≥3 chars, no digits, no punctuation-heavy
+			if (
+				trimmed.length >= 3 &&
+				trimmed === trimmed.toUpperCase() &&
+				/[A-Z\u0600-\u06FF]/.test(trimmed) &&
+				!/^\d/.test(trimmed) &&
+				trimmed.length <= 80
+			) {
+				blocks.push({
+					type: "heading",
+					level: trimmed.length <= 40 ? 1 : 2,
+					text: trimmed,
+				});
+				i++;
+				continue;
+			}
+
+			// Bullet list
+			const bulletMatch = trimmed.match(/^[-•*]\s+(.+)/);
+			if (bulletMatch) {
+				const items: string[] = [];
+				while (i < lines.length) {
+					const lm = lines[i]!.trim().match(/^[-•*]\s+(.+)/);
+					if (!lm) break;
+					items.push(lm[1]!);
+					i++;
+				}
+				blocks.push({ type: "bulletList", items });
+				continue;
+			}
+
+			// Numbered list
+			const numMatch = trimmed.match(/^\d+[.)]\s+(.+)/);
+			if (numMatch) {
+				const items: string[] = [];
+				while (i < lines.length) {
+					const lm = lines[i]!.trim().match(/^\d+[.)]\s+(.+)/);
+					if (!lm) break;
+					items.push(lm[1]!);
+					i++;
+				}
+				blocks.push({ type: "numberedList", items });
+				continue;
+			}
+
+			// Paragraph: collect consecutive non-special lines
+			const paraLines: string[] = [];
+			while (i < lines.length) {
+				const pl = lines[i]!.trim();
+				if (!pl) break;
+				// Stop if next line is a heading or list start
+				if (
+					(pl.length >= 3 &&
+						pl === pl.toUpperCase() &&
+						/[A-Z\u0600-\u06FF]/.test(pl) &&
+						!/^\d/.test(pl) &&
+						pl.length <= 80) ||
+					/^[-•*]\s+/.test(pl) ||
+					/^\d+[.)]\s+/.test(pl)
+				)
+					break;
+				paraLines.push(pl);
+				i++;
+			}
+			if (paraLines.length) {
+				blocks.push({ type: "paragraph", text: paraLines.join(" ") });
+			}
+		}
+
+		return blocks;
+	}
+
+	/**
+	 * Convert parsed OcrBlocks to Tiptap-compatible JSON for insertContent().
+	 */
+	function blocksToTiptapJson(blocks: OcrBlock[]): any[] {
+		return blocks.map((b) => {
+			switch (b.type) {
+				case "heading":
+					return {
+						type: "heading",
+						attrs: { level: b.level ?? 1 },
+						content: [{ type: "text", text: b.text ?? "" }],
+					};
+				case "paragraph":
+					return {
+						type: "paragraph",
+						content: [{ type: "text", text: b.text ?? "" }],
+					};
+				case "bulletList":
+					return {
+						type: "bulletList",
+						content: (b.items ?? []).map((item) => ({
+							type: "listItem",
+							content: [
+								{
+									type: "paragraph",
+									content: [{ type: "text", text: item }],
+								},
+							],
+						})),
+					};
+				case "numberedList":
+					return {
+						type: "orderedList",
+						content: (b.items ?? []).map((item) => ({
+							type: "listItem",
+							content: [
+								{
+									type: "paragraph",
+									content: [{ type: "text", text: item }],
+								},
+							],
+						})),
+					};
+				default:
+					return {
+						type: "paragraph",
+						content: [{ type: "text", text: "" }],
+					};
+			}
+		});
+	}
+
+	/**
+	 * Terminate the worker and free resources.
+	 */
+	async function terminate(): Promise<void> {
+		if (workerPromise) {
+			const w = await workerPromise;
+			await w.terminate();
+			workerPromise = null;
+		}
+	}
+
+	return {
+		loading,
+		progress,
+		language,
+		setLanguage,
+		recognize,
+		parseStructure,
+		blocksToTiptapJson,
+		reinitWorker,
+		terminate,
+	};
+}

package/app/composables/useOfflineFetch.ts

@@ -0,0 +1,194 @@
+import { enqueueMutation } from "./useOfflineQueue";
+
+/** Bound for a single request so offline/hung connections fail fast instead of
+ * spinning the loading UI forever. Set high enough that slow-but-working API
+ * calls are not mistaken for offline failures. */
+const REQUEST_TIMEOUT_MS = 30_000;
+
+type HTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+
+type OfflineFetchOptions = {
+	/** database slug (used for queue scoping) */
+	database?: string;
+	/** table slug (used for queue scoping) */
+	table?: string;
+	/** if true, this is a read-only request and should NOT be queued — it will just throw */
+	readonly?: boolean;
+};
+
+/**
+ * Determine whether a thrown fetch error is caused by a network-level problem
+ * (no connectivity) rather than a server/4xx/5xx error that we must propagate.
+ */
+export function isNetworkError(error: unknown): boolean {
+	if (!error) return false;
+	const e = error as any;
+	// ofetch/nuxt fetch errors wrap the cause
+	if (e?.cause) {
+		if (e.cause.name === "FetchError" || e.cause.name === "TypeError")
+			return true;
+		if (
+			e.cause.code === "ECONNREFUSED" ||
+			e.cause.code === "ENOTFOUND" ||
+			e.cause.code === "ECONNRESET" ||
+			e.cause.code === "UND_ERR_CONNECT_TIMEOUT"
+		)
+			return true;
+		// ofetch request timeout / user abort — treat the same as a network
+		// failure so timed-out mutations get queued instead of lost.
+		if (e.cause.name === "TimeoutError" || e.cause.name === "AbortError")
+			return true;
+	}
+	if (e?.name === "TypeError") return true;
+	if (typeof e?.message === "string" && e.message.includes("[TimeoutError]"))
+		return true;
+	if (e?.code && ["ECONNREFUSED", "ENOTFOUND", "ECONNRESET"].includes(e.code))
+		return true;
+	// Message-based detection — wrappers on different platforms (Chrome/Safari/
+	// ofetch) sometimes only expose the failure through the message text.
+	const message = `${e?.message ?? ""} ${e?.cause?.message ?? ""}`;
+	if (
+		/(Failed to fetch|Load failed|NetworkError|Network request failed|Internet connection appears to be offline|ERR_INTERNET_DISCONNECTED|ERR_NAME_NOT_RESOLVED|ERR_CONNECTION|ERR_NETWORK_|ERR_ABORTED|socket hang up|fetch failed|getaddrinfo|network unreachable)/i.test(
+			message,
+		)
+	)
+		return true;
+	// Offline navigator check as a fallback
+	if (typeof navigator !== "undefined" && navigator.onLine === false)
+		return true;
+	return false;
+}
+
+/**
+ * A failed request can also be a "junk" response — e.g. the device is on a
+ * network that answers every request with an HTML stub (captive portal,
+ * offline/local proxy, DNS-hijack page). The request technically got a
+ * response, but it's not the JSON the API would return, so it must be treated
+ * like a network failure (silent fallback) rather than a real server error.
+ */
+export function isJunkResponse(error: unknown): boolean {
+	if (!error) return false;
+	const e = error as any;
+	// ofetch stores the raw response body in `data` when parsing fails.
+	const data = e?.data ?? e?.cause?.data;
+	if (typeof data === "string" && /^\s*</.test(data)) return true;
+	// The response object (headers) is exposed on the FetchError or its cause.
+	const response = e?.response ?? e?.cause?.response;
+	if (!response || typeof response !== "object") return false;
+	try {
+		const contentType =
+			typeof response.headers?.get === "function"
+				? (response.headers.get("content-type") ?? "")
+				: "";
+		return /text\/html/i.test(contentType);
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * HTTP methods considered mutations — these get queued when they fail with a
+ * network error and the app is offline.
+ */
+const MUTATION_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+
+/**
+ * Offline-aware wrapper around Nuxt `$fetch`.
+ *
+ * - For GET requests it behaves exactly like $fetch but throws a typed error
+ *   the caller can catch (so UI still knows it failed).
+ * - For mutation requests (POST/PUT/PATCH/DELETE) it enqueues the request into
+ *   the offline queue when a network error occurs, so changes are not lost and
+ *   can be synced later.
+ *
+ * Returns an object describing what happened so callers can react (e.g. show a
+ * toast whether the write was queued).
+ */
+export function useOfflineFetch<T = unknown>() {
+	const config = useRuntimeConfig();
+	const apiBase = config.public.apiBase;
+
+	function buildUrl(
+		path: string,
+		localDatabase?: string,
+	): { url: string; scopeDatabase: string } {
+		// path may be a full URL or a relative API path/full apiBase URL
+		if (/^https?:\/\//i.test(path)) {
+			return { url: path, scopeDatabase: localDatabase ?? "" };
+		}
+		return {
+			url: `${apiBase}${path}`,
+			scopeDatabase: localDatabase ?? "",
+		};
+	}
+
+	/**
+	 * Perform an offline-aware request.
+	 *
+	 * @param pathOrUrl  relative path (e.g. "db/table/123") or full URL
+	 * @param options    ofetch options merged with offline metadata
+	 */
+	async function request(
+		pathOrUrl: string,
+		options: {
+			method?: string;
+			body?: any;
+			params?: Record<string, any>;
+			query?: Record<string, any>;
+			credentials?: RequestCredentials;
+			offline?: OfflineFetchOptions;
+			[key: string]: any;
+		} = {},
+	): Promise<T> {
+		const method = (options.method ?? "GET").toUpperCase();
+		const offline = options.offline ?? {};
+		const { url, scopeDatabase } = buildUrl(pathOrUrl, offline.database);
+
+		try {
+			return await $fetch<T>(url, {
+				...options,
+				timeout: options.timeout ?? REQUEST_TIMEOUT_MS,
+			} as any);
+		} catch (error) {
+			const isMutation = MUTATION_METHODS.has(method);
+			const network = isNetworkError(error);
+
+			// Reads: just rethrow — UI handles the failure.
+			if (!isMutation || offline.readonly) throw error;
+
+			// Mutations: enqueue when offline / network error, otherwise rethrow
+			// (server errors must be surfaced to the user).
+			if (network) {
+				const queued = await enqueueMutation({
+					method: method as Exclude<HTTPMethod, "GET">,
+					url,
+					body:
+						typeof options.body === "string"
+							? options.body
+							: (options.body ?? null),
+					params: options.params ?? options.query,
+					database: offline.database ?? scopeDatabase ?? "inicontent",
+					table: offline.table ?? "",
+				});
+				return {
+					__offlineQueued: true,
+					queuedId: queued.id,
+					error,
+				} as unknown as T;
+			}
+			throw error;
+		}
+	}
+
+	return { request, isNetworkError };
+}
+
+/**
+ * Type guard: is this a result that was queued for a later sync instead of being
+ * applied against the live server?
+ */
+export function isOfflineQueuedResult<T>(
+	value: T | { __offlineQueued: true; queuedId?: string } | null | undefined,
+): value is { __offlineQueued: true; queuedId?: string } {
+	return !!value && typeof value === "object" && "__offlineQueued" in value;
+}

package/app/composables/useOfflineItem.ts

@@ -0,0 +1,107 @@
+import { getMutationsByScope } from "./useOfflineQueue";
+
+/**
+ * Resolve a single item when its network fetch fails while offline — used by
+ * the item detail and standalone edit pages, which live *outside* the table
+ * grid and therefore don't have the row already in memory.
+ *
+ * Sources, in order:
+ * 1. A queued mutation (offline PUT of that exact item) — the user's own
+ *    latest local edit is returned so the form keeps what they typed.
+ * 2. The service worker's runtime caches — either the exact item URL (if it
+ *    was viewed online before) or any cached *list* response for the table
+ *    that contains the item (the table view is usually what was cached).
+ *
+ * Returns undefined when nothing is available (a true offline cold miss).
+ */
+export async function getOfflineItem(
+	database: string,
+	table: string,
+	id: string,
+	itemUrl: string,
+): Promise<Item | undefined> {
+	try {
+		// 1. Queued mutations for this table — a pending PUT of this item wins.
+		const mutations = await getMutationsByScope(database, table);
+		for (const mutation of mutations) {
+			if (mutation.method !== "PUT" && mutation.method !== "POST") continue;
+			let mutationId: string | undefined;
+			try {
+				const pathname = new URL(mutation.url).pathname;
+				mutationId = pathname.split("/").filter(Boolean).pop();
+			} catch {
+				mutationId = undefined;
+			}
+			if (String(mutationId ?? "") !== String(id)) continue;
+			if (mutation.method === "POST") {
+				// A POST only matches when its body carried this exact id (rare —
+				// offline creates use a synthetic pending__ id).
+				if (String((mutation.body as any)?.id ?? "") !== String(id)) continue;
+			}
+			const body = mutation.body;
+			if (body && typeof body === "object" && !Array.isArray(body))
+				return { ...(body as Record<string, any>) } as Item;
+		}
+
+		// 2. SW runtime caches.
+		if (typeof caches === "undefined") return undefined;
+		const cacheNames = await caches.keys();
+		for (const cacheName of cacheNames) {
+			const cache = await caches.open(cacheName);
+			// 2a. Exact cached response for this item URL (ignore the query
+			// string — e.g. the `options`/`columns` param — only the path
+			// identifies which item this is).
+			const exact = await cache.match(itemUrl, { ignoreSearch: true });
+			const fromExact = await extractItem(exact, id);
+			if (fromExact) return fromExact;
+			// 2b. Scan cached list responses for the item (a GET of the table
+			// grid is usually what got cached while online).
+			const keys = await cache.keys();
+			for (const request of keys) {
+				const response = await cache.match(request);
+				if (!response) continue;
+				const found = await extractItemFromList(response, id);
+				if (found) return found;
+			}
+		}
+	} catch (error) {
+		console.warn("[OfflineItem] Lookup failed:", error);
+	}
+	return undefined;
+}
+
+async function extractItem(
+	response: Response | undefined,
+	id: string,
+): Promise<Item | undefined> {
+	if (!response) return undefined;
+	try {
+		const json = await response.json();
+		const item = json?.result;
+		if (
+			item &&
+			typeof item === "object" &&
+			String(item.id ?? "") === String(id)
+		)
+			return item as Item;
+	} catch {
+		// not JSON — skip
+	}
+	return undefined;
+}
+
+async function extractItemFromList(
+	response: Response,
+	id: string,
+): Promise<Item | undefined> {
+	try {
+		const json = await response.json();
+		const list = Array.isArray(json?.result)
+			? (json.result as Item[])
+			: undefined;
+		if (!list) return undefined;
+		return list.find((item) => String(item?.id ?? "") === String(id));
+	} catch {
+		return undefined;
+	}
+}