Merge pull request #2 from tinygodsdev/v2

V2

Author: dani-polani

CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+Short notes for changes on branch **`v2`** relative to **`main`** (no dedicated git version tag). For an exact file list, run: `git diff main...v2 --stat`.
+
+## [v2] — vs `main`
+
+### Added
+
+- **Multi-line alignment** — projects and preview support more than two lines; links only between vertically adjacent lines.
+- **Line editor** — line cards (`LineCard`), modal text editing (`LineEditModal`), line settings (font, size, spacing, LTR/RTL, etc.) via popover/sheet.
+- **Per-pair line controls** — vertical gap slider (`LinePairGapSlider`), toggling connector visibility for each adjacent line pair (`pairControls`).
+- **Tokenization settings** — Tokens tab (word split characters, join character, optional punctuation tokenization); “?” hints (`SettingsFieldHint`).
+- **Built-in examples** — expanded set in `examples.ts` (simple, Turkish interlinear with glosses/IPA, RTL Hebrew/Arabic/English, Tagalog with hyphen inside words, CJK).
+- **`/about` page** — Aligner documentation, screenshots, table of contents, SEO; links from header and footer.
+- **`/privacy` page** — dedicated route and navigation updates.
+- **Raster export** — **2×–6×** scale for **PNG** and **PDF** (default 2×); tooltip explaining vector SVG/HTML.
+- **Share** — export project data as JSON for presets and debugging (`ShareDialog`).
+- **Custom fonts in exports** — **harfbuzzjs** for shaping (ligatures / OpenType closer to the browser), glyph outlines via **opentype.js** `glyph.getPath` at HarfBuzz glyph IDs (correct SVG orientation).
+- **Domain & state** — `lines-helpers`, broader `schema`/project/link-selection plumbing, `layoutExport`, jump-to Tokens tab (`settingsNav`), editor UI (`editorUi`), `viewport` where needed.
+- **Serialization** — state format evolution (including `compact-v3`, expanded `schema`), updated roundtrip and migration tests.
+- **Tests** — token/palette coverage, harfbuzz export smoke; `docs/v2-manual-qa.md`.
+- **Static assets** — screenshots for about, `sitemap.xml` updates.
+
+### Changed
+
+- **Home & SEO** — copy aligned with current UX (multi-line, adjacent links, terminology); Aligner (Bitext Align) branding; `SeoIntro`, `SeoSections`, `JsonLd`, `metadata.ts`.
+- **Preview** — `AlignmentPreview`, token markup (`TokenView`, `TokenRow`), link layer (`AlignmentSvg`) with pairs and line order; line reorder and line actions; **in-preview controls follow preview light/dark background**, not only the page theme.
+- **SVG export** — respects `pairControls`, background, line weight/opacity, optional embedded fonts, etc. (`svg.ts`, `ExportMenu`).
+- **Settings** — Style / Colors / Tokens / Fonts tabs; icons (gear for editor tokenization settings, split-cells for Tokens); **Flowbite `Tabs`**: `classes.content` instead of deprecated `contentClass`.
+- **Link palette** — when colors run out, the palette **cycles** (`palettes`).
+- **OG image** — SVG generation tweaks for social previews (`og-svg.ts`).
+
+### Fixed
+
+- Ligatures and complex OpenType shaping for **user fonts** in PNG/PDF/SVG/HTML exports (HarfBuzz + opentype outlines).
+- Incorrect glyph orientation when using only harfbuzzjs `glyphToPath` (outlines now come from opentype per shaped glyph).
+
+### Removed / replaced
+
+- Older narrow editor/preview pieces for a single-sentence model (`GlossInputRow`, `SentenceField`, `GlossRow`) — replaced by **multi-line cards** and token rows in preview.
+- **Preview background image** — removed from Style settings (legacy shares / compact `bg:2` decode as light).
+
+### Dependencies (`bitext`)
+
+- Added: **`harfbuzzjs`** (^0.10.3).
+- **`opentype.js`** pinned to **1.3.4** (avoid resolving to mistaken **1.3.5** or problematic **2.x** for exports).
+
+### Known limitations
+
+- **PDF** is still a **raster page** (PNG embedded in PDF), not pure vector SVG→PDF.
+- Very large PNG/PDF scales increase file size and browser memory use.
+
+---
+
+Commit range on this branch vs `main` (messages are terse):
+
+`d8a7796` … `9df3353` — multiple lines → new editor → merge better-editor → new interface / UI updates → about updates.

TODO.md

@@ -1,6 +1,8 @@
+# Version 1.0.0
+
 - [x] Sort out glossing functionality
 - [x] Improve sharing visuals
-- [ ] Check SEO
+- [x] Check SEO
 - [x] Highlighting tokens when selecting (hovering) and when selected (with current color, which will be the link color)
 - [x] Make sure instructions are clear and concise, up to date, and complete. 
 - [x] Add better examples - with complex links and advanced tokenization.
@@ -9,3 +11,44 @@
 - [x] Dependency CVE check (`npm audit` / CI)
 - [x] Add QR code export method
 - [-] Add QR code to visualization exports (small in the corner - only site link; `siteLandingQrDataUrl` + `siteQrPngDataUri` in svg — wiring disabled in ExportMenu) - out of scope for now
+
+# Version 2
+
+Includes bugs and feature requests from the public.
+
+Feature requests - high priority:
+- [x] Add ability to add more than 2 lines 
+- [x] Improve support for longer sentences - currently non-svg export is low resolution when font is small
+- [x] add special separator to combine words into a single token - it will be connected with 1 line in the visualization but still be written with a space or spaces
+- [x] add ability to optionally tokenize punctuation as separate tokens
+- [x] add transcription line support (probably can be solved by adding more than 2 lines)
+
+Usability improvements - high priority:
+- [x] Parameter card or other view should move to be next to the editor - currently on small screens you have to scroll back and forth between the editor and the parameters
+
+Bug fixes - high priority:
+- [x] Reportedly ligatures in custom fonts are not working in the export (but fine in preview) — custom font `<text>` → paths now uses **harfbuzzjs** for shaping + `glyphToPath`, with **opentype.js** 1.3.4 only for metrics / fallback. Pin stays on `opentype.js@1.3.4` (avoid mistaken 1.3.5 & 2.x). Remaining edge cases: exotic scripts / SVG `text-anchor` with RTL may still differ slightly from browser.
+- [x] When color palette is depleted, it should cycle through the colors - currently uses the last color
+
+Advanced features - medium priority:
+
+- [x] Maybe parameter-line connection should be reworked to be more flexible - each line should have all the parameters configured separately. 
+- [x] Add ability to hide preview controls so that the user can see the entire visualization and screenshot it if needed. In this mode - add the credit to the bottom of the visualization, like in exports.
+
+General interface improvements - medium priority:
+
+- [x] Make interface more compact to accomodate more features
+- [x] Probably add full screen mode for the preview - so that the user would be able to see it all and screenshot if needed - this will partially help if we won't be able to solve ligature problems
+- [x] Create privacy policy page and link to it from the footer. We don't collect any data, but we should have a page for it. We use Google Analytics, Google Ads (probably in the future) and Tally for feedback.
+- [x] Add alternative color marking - don't color the text, color the background of the token. This should correctly work on dark mode as well. The mode can be changed in the settings (probably in colors tab).
+
+Considerations:
+- If we support multiple lines with independent parameters, we can deprecate separate gloss row and configuration - it will be just a single new line with the glosses. Then, the user would be able to add transcription and other annotations in the same manner. 
+- In case of adding multiple lines, additional lines after the first 2 should be optional. 
+- The ultimate fix for pdf export would be to use external resource like gotenberg. We can set up a server with it, but preferably this is to be avoided since it will add costs to support it. 
+
+
+Version 2.1:
+
+- [ ] Interface languages - add pages for some major languages
+- [ ] Ability to create custom color palettes

bitext/package-lock.json

@@ -49,9 +49,10 @@
 	"dependencies": {
 		"@resvg/resvg-js": "^2.6.2",
 		"fflate": "^0.8.2",
+		"harfbuzzjs": "^0.10.3",
 		"idb-keyval": "^6.2.1",
 		"jspdf": "^4.2.1",
-		"opentype.js": "^1.3.4",
+		"opentype.js": "1.3.4",
 		"qrcode": "^1.5.4"
 	}
 }

bitext/package.json

@@ -3,6 +3,11 @@
 @import 'flowbite/src/themes/default.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Reserve scrollbar width so horizontal padding stays visually symmetric when scrollbars appear */
+html {
+	scrollbar-gutter: stable;
+}
+
 /*
  * Central theme: edit primary scale + app shell here.
  * Flowbite plugin forms/range use --color-brand*; Flowbite Svelte uses Tailwind `primary-*` for buttons/tabs.
@@ -77,7 +82,6 @@
 .preview-frame {
 	position: relative;
 	width: 100%;
-	max-width: 64rem;
 	margin-inline: auto;
 	border-radius: 0;
 	border: 1px solid var(--color-card-border);
@@ -97,18 +101,25 @@
 	border-color: rgb(55 65 81);
 }
 
-.preview-frame__image-overlay {
-	position: absolute;
-	inset: 0;
-	backdrop-filter: blur(1px);
-}
-
-.preview-frame--light .preview-frame__image-overlay {
-	background: color-mix(in srgb, #ffffff 82%, transparent);
+/* Floating link hint — no panel chrome; halo keeps text readable on busy previews */
+.preview-frame__link-hint {
+	margin: 0;
+	border: none;
+	background: none;
+	box-shadow: none;
+	color: #374151;
+	text-shadow:
+		0 0 6px #fff,
+		0 0 14px #fff,
+		0 1px 2px rgb(255 255 255 / 0.95);
 }
 
-.preview-frame--dark .preview-frame__image-overlay {
-	background: color-mix(in srgb, #1e1e1e 82%, transparent);
+.preview-frame--dark .preview-frame__link-hint {
+	color: #e5e7eb;
+	text-shadow:
+		0 0 8px rgb(0 0 0 / 0.85),
+		0 0 18px rgb(0 0 0 / 0.75),
+		0 1px 3px rgb(0 0 0 / 0.9);
 }
 
 .preview-stack {
@@ -119,6 +130,39 @@
 	align-items: stretch;
 }
 
+.preview-frame__attribution {
+	position: relative;
+	z-index: 3;
+	margin-top: 1rem;
+	text-align: center;
+	font-family: var(--font-body, system-ui, sans-serif);
+	font-size: 0.75rem;
+	line-height: 1.4;
+	opacity: 0.72;
+}
+
+.preview-frame--light .preview-frame__attribution {
+	color: #64748b;
+}
+
+.preview-frame--dark .preview-frame__attribution {
+	color: #94a3b8;
+}
+
+.preview-frame__attribution-link {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+	cursor: pointer;
+}
+
+.preview-frame--light .preview-frame__attribution-link {
+	color: #475569;
+}
+
+.preview-frame--dark .preview-frame__attribution-link {
+	color: #cbd5e1;
+}
+
 .preview-gloss-wrap {
 	width: 100%;
 	display: flex;
@@ -135,6 +179,15 @@
 	overflow: visible;
 }
 
+/* Range between lines: tint follows preview background, not site dark mode */
+.preview-frame--light .line-gap-range input[type='range'] {
+	accent-color: rgb(79 70 229);
+}
+
+.preview-frame--dark .line-gap-range input[type='range'] {
+	accent-color: rgb(165 180 252);
+}
+
 .preview-svg-layer .link-hit {
 	pointer-events: none;
 }

bitext/src/app.css

@@ -4,6 +4,9 @@ export const ALIGNER_SITE_URL = 'https://aligner.tinygods.dev';
 /** Host label for attribution text in raster/SVG exports. */
 export const ALIGNER_SITE_HOST = 'aligner.tinygods.dev';
 
+/** Plain attribution line (matches standalone SVG export footer text). */
+export const EXPORT_ATTRIBUTION_PLAIN = `Created with ${ALIGNER_SITE_HOST}`;
+
 /** Google Analytics 4 measurement ID (gtag). */
 export const GA_MEASUREMENT_ID = 'G-6Z5775NY39';