@walkinissue/angy 0.2.17 → 0.2.18

package/dist/client/RotationWarningDialog.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	let {
+		pending = false,
+		affected,
+		onCancel,
+		onConfirm
+	}: {
+		pending?: boolean;
+		affected: Array<{
+			msgid: string;
+			msgctxt: string | null;
+			baseValue: string;
+			workingValue: string;
+		}>;
+		onCancel: () => void;
+		onConfirm: () => void;
+	} = $props();
+</script>
+
+<div class="dialog-backdrop" role="presentation">
+	<div
+		class="dialog"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="rotation-warning-title"
+		aria-describedby="rotation-warning-description"
+	>
+		<h2 id="rotation-warning-title">Catalog rotation warning</h2>
+		<p id="rotation-warning-description">
+			These working translations differ from base. Rotating now will promote the working catalog
+			and effectively overwrite the current base values for the keys below.
+		</p>
+
+		<ul class="impact-list">
+			{#each affected as item}
+				<li>
+					<div class="impact-key">
+						<code>{item.msgid}</code>
+						{#if item.msgctxt}
+							<code>{item.msgctxt}</code>
+						{/if}
+					</div>
+					<div class="impact-values">
+						<div>
+							<span>Base</span>
+							<code>{item.baseValue || "(empty)"}</code>
+						</div>
+						<div>
+							<span>Working</span>
+							<code>{item.workingValue || "(empty)"}</code>
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+
+		<div class="actions">
+			<button type="button" class="secondary-btn" onclick={onCancel}>Cancel</button>
+			<button type="button" class="primary-btn" disabled={pending} onclick={onConfirm}>
+				{pending ? "Rotating..." : "Rotate anyway"}
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.dialog-backdrop {
+		position: fixed;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		background: rgba(0, 0, 0, 0.55);
+		z-index: 500100;
+	}
+
+	.dialog {
+		width: min(42rem, calc(100vw - 2rem));
+		max-height: min(80vh, 48rem);
+		overflow: auto;
+		padding: 1rem;
+		border-radius: 1rem;
+		border: 1px solid rgba(255, 196, 120, 0.22);
+		background: linear-gradient(180deg, rgba(25, 27, 34, 0.98) 0%, rgba(17, 19, 25, 0.99) 100%);
+		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+		color: rgba(248, 250, 252, 0.96);
+	}
+
+	h2 {
+		margin: 0 0 0.5rem;
+		font-size: 1rem;
+	}
+
+	p {
+		margin: 0 0 1rem;
+		color: rgba(255, 255, 255, 0.74);
+		line-height: 1.45;
+	}
+
+	.impact-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.impact-list li {
+		padding: 0.75rem;
+		border-radius: 0.8rem;
+		background: rgba(255, 255, 255, 0.035);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+	}
+
+	.impact-key,
+	.impact-values {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+
+	.impact-values {
+		margin-top: 0.6rem;
+	}
+
+	.impact-values span {
+		display: inline-block;
+		min-width: 4rem;
+		font-size: 0.72rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: rgba(255, 255, 255, 0.58);
+	}
+
+	code {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.76rem;
+		word-break: break-word;
+		color: rgba(232, 243, 255, 0.94);
+	}
+
+	.actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.6rem;
+		margin-top: 1rem;
+	}
+
+	.primary-btn,
+	.secondary-btn {
+		min-height: 2.5rem;
+		padding: 0.7rem 1rem;
+		border-radius: 0.8rem;
+		font: inherit;
+		cursor: pointer;
+	}
+
+	.primary-btn {
+		border: 1px solid rgba(255, 196, 120, 0.35);
+		background: rgba(255, 172, 80, 0.14);
+		color: rgba(255, 242, 220, 0.98);
+	}
+
+	.secondary-btn {
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		background: rgba(255, 255, 255, 0.05);
+		color: rgba(248, 250, 252, 0.96);
+	}
+
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

package/dist/client/TranslationHelperForm.svelte

@@ -20,14 +20,17 @@
 		focusedAltKey,
 		translatedValue = $bindable(),
 		stagedTranslations,
-		hasActiveSuggestion,
-		pending,
-		error,
-		success,
+		hasActiveSuggestion,
+		hasDraft,
+		pending,
+		previewOnly,
+		error,
+		success,
 		onClose,
 		onSubmit,
-		onStage,
-		onAltFocusChange,
+		onStage,
+		onInputValue,
+		onAltFocusChange,
 		onAltKeydown,
 		onSelectAlt,
 		isStaged,
@@ -43,14 +46,17 @@
 		focusedAltKey: string | null;
 		translatedValue: string;
 		stagedTranslations: Record<string, DraftTranslation>;
-		hasActiveSuggestion: boolean;
-		pending: boolean;
-		error: string | null;
-		success: string | null;
+		hasActiveSuggestion: boolean;
+		hasDraft: boolean;
+		pending: boolean;
+		previewOnly: boolean;
+		error: string | null;
+		success: string | null;
 		onClose: () => void;
 		onSubmit: (event: SubmitEvent) => void;
-		onStage: (event?: Event) => void;
-		onAltFocusChange: (key: string | null) => void;
+		onStage: (event?: Event) => void;
+		onInputValue: () => void;
+		onAltFocusChange: (key: string | null) => void;
 		onAltKeydown: (event: KeyboardEvent, msgid: string, msgctxt: string | null) => void;
 		onSelectAlt: (event: Event, msgid: string, msgctxt: string | null) => void;
 		isStaged: (msgid: string, msgctxt: string | null) => boolean;
@@ -152,7 +158,14 @@
 				<div class="context-row">
 					<span class="context-label">Match score</span>
 					<span>{contextResult.match.score.toFixed(3)}</span>
-				</div>
+				</div>
+
+				{#if contextResult.catalogState?.status === "out_of_sync"}
+					<div class="catalog-warning">
+						<span class="context-label">Warning</span>
+						<div>Catalogs are out of sync. Rotation can overwrite working-only translations.</div>
+					</div>
+				{/if}
 
 				{#if contextResult.entry.flags.length}
 					<div class="context-row">
@@ -214,27 +227,36 @@
 	<label class="field">
 		<span class="field-label">Selected text</span>
 		<div class="selected-copy">{capturedSelection}</div>
-		<textarea
-			bind:this={translationInputElement}
-			name="translationValue"
-			class="translation-input"
-			class:suggested={hasActiveSuggestion}
-			rows="4"
-			bind:value={translatedValue}
-			placeholder={capturedSelection}
-			onkeydown={(event) => {
-				if (event.key === "Enter" && !event.shiftKey) {
-					event.preventDefault();
-					onStage(event);
-					return;
-				}
-
-				if (event.key === "Tab") {
-					event.preventDefault();
-					moveSelection(event.shiftKey ? -1 : 1);
-				}
-			}}
-		></textarea>
+		{#if previewOnly}
+			<div class="preview-note">
+				Working locale preview mode is active. Rotate back to a non-working locale to stage or
+				commit translations.
+			</div>
+		{:else}
+			<textarea
+				bind:this={translationInputElement}
+				name="translationValue"
+				class="translation-input"
+				class:suggested={hasActiveSuggestion}
+				class:draft={hasDraft}
+				rows="4"
+				bind:value={translatedValue}
+				placeholder={capturedSelection}
+				oninput={onInputValue}
+				onkeydown={(event) => {
+					if (event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						onStage(event);
+						return;
+					}
+
+					if (event.key === "Tab") {
+						event.preventDefault();
+						moveSelection(event.shiftKey ? -1 : 1);
+					}
+				}}
+			></textarea>
+		{/if}
 	</label>
 
 	<div class="meta-row">
@@ -248,27 +270,29 @@
 			<p>Failed: {error}</p>
 		{/if}
 
-		<button
-			type="button"
-			class="tool-btn"
-			disabled={!translatedValue.trim() || !commitTarget}
-			onclick={(event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				onStage(event);
-			}}
-		>
-			Stage
-		</button>
-
-		<button
-			type="submit"
-			class="tool-btn primary"
-			disabled={!hasDirtyTranslations || pending}
-			aria-disabled={!hasDirtyTranslations || pending}
-		>
-			{pending ? "Committing..." : "Commit all"}
-		</button>
+		{#if !previewOnly}
+			<button
+				type="button"
+				class="tool-btn"
+				disabled={!translatedValue.trim() || !commitTarget}
+				onclick={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onStage(event);
+				}}
+			>
+				Stage
+			</button>
+
+			<button
+				type="submit"
+				class="tool-btn primary"
+				disabled={!hasDirtyTranslations || pending}
+				aria-disabled={!hasDirtyTranslations || pending}
+			>
+				{pending ? "Committing..." : "Commit all"}
+			</button>
+		{/if}
 	</div>
 </form>
 
@@ -455,12 +479,38 @@
 		box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.18);
 	}
 
-	.translation-input.suggested:hover,
-	.translation-input.suggested:focus {
-		background: rgba(255, 214, 102, 0.16);
-		border-color: rgba(255, 214, 102, 0.48);
-		box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.12);
-	}
+	.translation-input.suggested:hover,
+	.translation-input.suggested:focus {
+		background: rgba(255, 214, 102, 0.16);
+		border-color: rgba(255, 214, 102, 0.48);
+		box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.12);
+	}
+
+	.translation-input.draft {
+		background: rgba(255, 120, 120, 0.12);
+		border-color: rgba(255, 130, 130, 0.38);
+		box-shadow: 0 0 0 1px rgba(255, 130, 130, 0.16);
+	}
+
+	.preview-note {
+		padding: 0.8rem 0.9rem;
+		border-radius: 0.8rem;
+		background: rgba(255, 196, 120, 0.08);
+		border: 1px solid rgba(255, 196, 120, 0.24);
+		color: rgba(255, 242, 220, 0.96);
+		font-size: 0.85rem;
+		line-height: 1.45;
+	}
+
+	.catalog-warning {
+		padding: 0.75rem 0.8rem;
+		border-radius: 0.8rem;
+		background: rgba(255, 188, 88, 0.1);
+		border: 1px solid rgba(255, 188, 88, 0.26);
+		color: rgba(255, 243, 220, 0.96);
+		font-size: 0.82rem;
+		line-height: 1.45;
+	}
 
 	.meta-row {
 		display: flex;

package/dist/client/VibeTooltip.svelte

@@ -1,15 +1,19 @@
-<script lang="ts">
-	let {
-		text,
-		position = 'top',
-		disabled = false,
-		delay = 120
-	}: {
-		text: string;
-		position?: 'top' | 'bottom' | 'left' | 'right';
-		disabled?: boolean;
-		delay?: number;
-	} = $props();
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		text,
+		position = 'top',
+		disabled = false,
+		delay = 120,
+		children
+	}: {
+		text: string;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		disabled?: boolean;
+		delay?: number;
+		children?: Snippet;
+	} = $props();
 
 	let visible = $state(false);
 	let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -42,8 +46,8 @@
 	onmouseleave={hide}
 	onfocusin={show}
 	onfocusout={hide}
->
-	<slot />
+>
+	{@render children?.()}
 
 	{#if visible && !disabled && text}
 		<div

package/dist/client/dragItem.ts

@@ -1,48 +1,74 @@
 
 export function draggable(node: HTMLElement, param:{active: (activate:boolean) => void, drag: ()=> boolean}) {
-
-    let x = 100;
-    let y = 100;
-    let offsetX = 0;
-    let offsetY = 0;
-    let dragging = false;
-    
-    function down(event: PointerEvent) {
-        dragging = param.drag();
-        offsetX = event.clientX - x;
-        offsetY = event.clientY - y;
-        
-        window.addEventListener('pointermove', move);
-        window.addEventListener('pointerup', up);
-        param.active(false)
-    }
-    
-    function move(event: PointerEvent) {
-        if (!dragging) return;
-        x = event.clientX - offsetX;
-        y = event.clientY - offsetY;
-        node.style.left = `${x}px`;
-        node.style.top = `${y}px`;
-        param.active(true)
-    }
-    
-    function up(event: Event) {
-        dragging = false;
-        window.removeEventListener('pointermove', move);
-        window.removeEventListener('pointerup', up);
-
-    }
+
+    let x = 100;
+    let y = 100;
+    let offsetX = 0;
+    let offsetY = 0;
+    let dragging = false;
+    let pointerStartX = 0;
+    let pointerStartY = 0;
+    const dragThreshold = 6;
+    let suppressClick = false;
+    
+    function down(event: PointerEvent) {
+        dragging = false;
+        pointerStartX = event.clientX;
+        pointerStartY = event.clientY;
+        offsetX = event.clientX - x;
+        offsetY = event.clientY - y;
+        
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+    }
+    
+    function move(event: PointerEvent) {
+        if (!dragging) {
+            if (!param.drag()) return;
+            const movedX = Math.abs(event.clientX - pointerStartX);
+            const movedY = Math.abs(event.clientY - pointerStartY);
+            if (Math.max(movedX, movedY) < dragThreshold) return;
+            dragging = true;
+            param.active(true);
+        }
+
+        x = event.clientX - offsetX;
+        y = event.clientY - offsetY;
+        node.style.left = `${x}px`;
+        node.style.top = `${y}px`;
+    }
+    
+    function up(event: Event) {
+        if (dragging) {
+            suppressClick = true;
+            param.active(false);
+        }
+        dragging = false;
+        window.removeEventListener('pointermove', move);
+        window.removeEventListener('pointerup', up);
+
+    }
+
+    function onClick(event: MouseEvent) {
+        if (!suppressClick) return;
+        event.preventDefault();
+        event.stopPropagation();
+        suppressClick = false;
+    }
     
-    node.style.position = 'fixed';
-    node.style.left = `${x}px`;
-    node.style.top = `${y}px`;
-    node.style.touchAction = 'none';
-
-    node.addEventListener('pointerdown', down);
-
+    node.style.position = 'fixed';
+    node.style.left = `${x}px`;
+    node.style.top = `${y}px`;
+    node.style.touchAction = 'none';
+    param.active(false);
+
+    node.addEventListener('pointerdown', down);
+    node.addEventListener('click', onClick, true);
+
     return {
         destroy() {
             node.removeEventListener('pointerdown', down);
+            node.removeEventListener('click', onClick, true);
             window.removeEventListener('pointermove', move);
             window.removeEventListener('pointerup', up);
         }

package/dist/client/toggleQA.shared.ts

@@ -1,4 +1,5 @@
-export type TranslationOrigin = "base" | "working";
+export type TranslationOrigin = "base" | "working";
+export type TranslationStatus = "base" | "working" | "none" | "fuzzy" | "out_of_sync";
 
 export type ResolvedKey = {
 	msgid: string;
@@ -20,6 +21,7 @@ export type TranslationEntry = {
 	isCommittedToWorking?: boolean;
 	matchesTargetTranslation?: boolean;
 	translationOrigin?: TranslationOrigin | null;
+	translationStatus?: TranslationStatus | null;
 };
 
 export type TranslationAlternative = {
@@ -33,16 +35,21 @@ export type TranslationAlternative = {
 	isCommittedToWorking?: boolean;
 	matchesTargetTranslation?: boolean;
 	translationOrigin?: TranslationOrigin | null;
+	translationStatus?: TranslationStatus | null;
+};
+
+export type TranslationContextResult = {
+	match: {
+		score: number;
+		via: string;
+	};
+	catalogState?: {
+		status: "ok" | "out_of_sync";
+		affectedCount: number;
+	};
+	entry: TranslationEntry;
+	alternatives: TranslationAlternative[];
 };
-
-export type TranslationContextResult = {
-	match: {
-		score: number;
-		via: string;
-	};
-	entry: TranslationEntry;
-	alternatives: TranslationAlternative[];
-};
 
 export type DraftTranslation = {
 	msgid: string;
@@ -59,7 +66,7 @@ export type TranslationCandidate = Pick<
 >;
 
 export const TRANSLATION_STATUS_TOOLTIP =
-	"'\u{1F914}' fuzzy translation needs review. '\u2705' target and working agree. '\u274C' no translation. '\u{1F6E0}\uFE0F' working differs from target.";
+	"'\u{1F914}' fuzzy translation needs review. '\u2705' translation is in base. '\u274C' no translation. '\u{1F6E0}\uFE0F' working differs from base. '\u26A0\uFE0F' catalogs are out of sync.";
 
 export function translationKey(msgid: string, msgctxt: string | null) {
 	return `${msgctxt ?? ""}::${msgid}`;
@@ -155,10 +162,11 @@ export function getTranslationStatus(item: {
 	matchesTargetTranslation?: boolean;
 	hasTranslation?: boolean;
 	isFuzzy?: boolean | null;
+	translationStatus?: TranslationStatus | null;
 }) {
-	if (item.hasTranslation && item.matchesTargetTranslation) return "\u2705";
-	if (item.isCommittedToWorking) return "\u{1F6E0}\uFE0F";
-	if (!item.hasTranslation) return "\u274C";
-	if (item.isFuzzy) return "\u{1F914}";
+	if (item.translationStatus === "out_of_sync") return "\u26A0\uFE0F";
+	if (item.translationStatus === "fuzzy" || item.isFuzzy) return "\u{1F914}";
+	if (item.translationStatus === "working" || item.isCommittedToWorking) return "\u{1F6E0}\uFE0F";
+	if (item.translationStatus === "none" || !item.hasTranslation) return "\u274C";
 	return "\u2705";
 }

package/dist/client/translationDrafts.ts

@@ -0,0 +1,59 @@
+import { translationKey } from "./toggleQA.shared";
+
+const STORAGE_KEY = "angy-translation-drafts-v1";
+
+export type DraftCacheItem = {
+	value: string;
+	isDirty: boolean;
+};
+
+type DraftCache = Record<string, DraftCacheItem>;
+
+function isBrowser() {
+	return typeof window !== "undefined" && typeof localStorage !== "undefined";
+}
+
+export function readDraftCache(): DraftCache {
+	if (!isBrowser()) return {};
+
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw);
+		return typeof parsed === "object" && parsed ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+
+export function writeDraftCache(cache: DraftCache) {
+	if (!isBrowser()) return;
+
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+	} catch {
+		// Ignore storage failures in this dev-only helper.
+	}
+}
+
+export function setDraftValue(
+	cache: DraftCache,
+	msgid: string,
+	msgctxt: string | null,
+	item: DraftCacheItem
+) {
+	const next = { ...cache, [translationKey(msgid, msgctxt)]: item };
+	writeDraftCache(next);
+	return next;
+}
+
+export function clearDraftValue(cache: DraftCache, msgid: string, msgctxt: string | null) {
+	const next = { ...cache };
+	delete next[translationKey(msgid, msgctxt)];
+	writeDraftCache(next);
+	return next;
+}
+
+export function getDraftValue(cache: DraftCache, msgid: string, msgctxt: string | null) {
+	return cache[translationKey(msgid, msgctxt)] ?? null;
+}