Skip to content

UI rework: canvas-first editor, richer home, and content-page landing polish#12

Merged
dani-polani merged 23 commits into
mainfrom
feat/ui-rework-mock
Jul 4, 2026
Merged

UI rework: canvas-first editor, richer home, and content-page landing polish#12
dani-polani merged 23 commits into
mainfrom
feat/ui-rework-mock

Conversation

@dani-polani

@dani-polani dani-polani commented Jul 4, 2026

Copy link
Copy Markdown
Member

Reworks the interface end to end: a canvas-first editor, a home page that keeps SEO content and partner links without a scroll trap, custom color pinning, drag-to-reorder feedback, and a full visual pass on the About/guide/example pages.

Editor

  • Full-screen, canvas-first editor served at / (old landing moved aside, /legacy later removed).
  • Unified site header with app theme toggle; StylePicker moved to the toolbar; header nav, expand, and fullscreen controls.
  • Style panel restructured into flat, discoverable sections.
  • Custom color-coding: click a word to pin a palette color to its group; pinned groups keep their color until reset. Pinned-group marker sits above the group with a palette icon, is clickable, and does not appear in exports.
  • Diversified deco/nouveau palettes; Amarante font added to the shared selector for Nouveau.
  • Separator defaults: drop . and -, keep |; bumped the share-URL format (v4) with frozen legacy decoders so old links keep their old separators.
  • Drag-to-reorder lines: a drop line shows where a row will land, correct in both directions.

Home page

  • Left "How it works" drawer holds the on-page SEO copy (in the DOM, crawlable, off-canvas when closed).
  • Adaptive partner-banner strip under the canvas: expands when the canvas is short, collapses to a thin bar when it grows.

Content pages (About, guides, examples)

  • New PageHero (eyebrow + breadcrumb + title + lede + gradient rule) shared by the guide layout and example pages.
  • New YouTubeEmbed: click-to-load nocookie facade, no request to YouTube until play.
  • About rebuilt as an honest, non-salesy landing: hero with a demo video, how-it-works steps, a 9-item feature grid, a diagram highlight, current-editor screenshots, an examples band (gallery CDN previews), and the conlang origin story.
  • Guide index / examples cards get hover lift and an arrow affordance.
  • Kept the app's flat editorial look throughout: sharp corners and minimal shadow.
  • Fixed wrong example connections (Nahuatl and others), audited against Wikipedia.
  • New current-editor screenshots under static/screenshots/about/.

Checks

npm run check (0 errors), ESLint + Prettier clean, 121 tests passing. Verified in light/dark and on mobile.

🤖 Generated with Claude Code

dani-polani and others added 23 commits July 3, 2026 03:06
@dani-polani @claude
docs(ui-rework): mobile-first interface concept mock
a65e676 
Canvas-first shell with three thumb-reach modes (Text / Link / Style),
Export as the single primary action, and fine-tuning folded behind one
disclosure. Foolproofing: opens on a real example, auto-fit prevents
broken layouts, only curated controls stay visible. Interactive mock +
rationale in docs/ui-rework/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(ui): canvas-first mobile workspace shell
7552e5e 
Rebuild the editor as a canvas-first shell driven by three labeled modes
(Text / Link / Style) with Export as the single primary action.

- Narrow: bottom tab bar + slide-up sheets over the canvas.
- Wide: docked right rail with the same panels.
- Fine-tuning (variance, thickness, opacity, tokenization, fonts) folded
  behind one disclosure in the Style panel; safe choices stay visible.
- Reuses existing components/stores (AlignmentPreview, LineCard, settings
  tabs, StylePicker, ExportMenu, ShareQuickRow); one canonical preview keeps
  export parity. SEO/marketing content preserved below the app.

New: workspace store, AlignerWorkspace, ModeTabBar, ModeSheet, Text/Style/
Export panels. AppearanceTab gains a `group` prop for grouped rendering.

check/lint/build/tests green; verified on mobile + desktop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(editor): full-screen /editor shell from scratch
5983d8b 
A dedicated app-shell route, no marketing content, to iterate on the ideal
editor before swapping it onto /.

- h-dvh shell: top bar (brand + theme), canvas toolbar (example/hide/clear),
  live canvas, and mode controls.
- Narrow: bottom bar PINNED to the viewport (Text / Style / Export); tapping a
  tab slides a sheet up over the canvas above the bar, with a scrim.
- Wide: docked config rail (same three tabs + panel).
- Dropped the no-op "Link" tab — connecting words is always live on the canvas.
- Client-side share-URL load/save so the diagram is shareable and reload-safe.
- Reuses Text/Style/Export panels and the single canonical AlignmentPreview.
- noindex for now.

New: editorShell store, EditorTabBar, EditorPanels, routes/editor/+page.svelte.
check/lint/build/test green; verified on mobile (pinned bar + sheet) and desktop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(editor): header nav + toolbar theme + expand; remove Academic pa…
6385023 
…lette

- Move the theme toggle into the panel above the editor; restore Examples /
  Guides / About links in the editor header.
- Restore the Expand (fullscreen) control with its overlay + Escape close.
- Remove the Academic palette everywhere: palette source, MCP tool schema,
  OpenAPI, API/About docs. Old share links with academic fall back to default
  (palette is stored by name, so no index drift).

check/lint/build/test green; verified on mobile + desktop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(ui): unified site header with app theme toggle; StylePicker to t…
81d36a9 
…oolbar

- Add a shared SiteHeader (brand + Examples/Guides/About + light/dark theme
  toggle), mounted globally in +layout so every page shows the same header.
  The app theme toggle lives here since it affects the whole interface.
- Editor: drop its own header (global one covers it), shrink the shell to
  100dvh minus the header, and move the StylePicker (diagram style) into the
  toolbar next to Expand, like the original. Remove StylePicker from the Style
  panel.
- De-duplicate: remove the now-redundant nav/theme toggle from the home and
  about page headers (+ their unused bindings).
- Mobile header: hide the wordmark under sm so nav + toggle fit at 390px.

check/lint/build/test green; verified editor (desktop+mobile), about, home.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(editor): swap editor onto / ; move old landing to /legacy
5fbd1be 
- The full-screen editor is now the home page (/). Old marketing/SEO landing
  moved to /legacy and marked noindex to avoid duplicate content.
- Extract the shared home load (initialState from ?data= / ?example=,
  partner order) into $lib/server/home-page-load; both / and /legacy use it.
- New home carries the homepage SEO head (title, description, canonical, OG,
  Twitter) + JsonLd and drops noindex, so the homepage stays indexable and
  shareable. Initial state now comes from the server load (SSR), not a
  client-only decode.
- Desktop editor gains a single-line footer: credit ("Created by Dani. See
  other tools…") + menu (Examples/Guides/About) + Send feedback.
- Add a Feedback link to the shared SiteHeader (icon on mobile, label on sm+)
  so it's easy to find.

check/lint/build/test green; verified / (desktop+mobile) and /legacy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
fix(editor): full link set in the desktop footer
1217e67 
Replace the trimmed footer nav with the complete site menu:
Open Aligner · Examples · Guides · API · Agent skill · Privacy policy ·
Terms of use. Feedback stays in the header. Keeps to one line (credit
truncates first on narrow desktop).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
fix(editor): footer feedback + share buttons fit
91a07bf 
- Footer: add "Send feedback" back; drop "Open Aligner" (the editor is
  already open on this page).
- Share card: wrap the action buttons instead of horizontal scroll; shorten
  labels ("Copy share link" → "Copy link", "More options" → "More") and trim
  side padding so they fit the rail width.

check/lint/build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani @claude
feat(editor): restructure Style panel into flat, discoverable sections
8d2ffca 
Rework the Style tab so every control is visible without prior knowledge
of where it hides.

- Style panel: flat sections (Canvas / Colors / Lines / Text / Custom
  fonts) instead of nested accordions; palettes show real color swatches;
  Canvas light/dark only for the Classic theme. Drop the duplicate theme
  grid — the toolbar picker is enough.
- Move tokenization into the Text panel as a plain "Word splitting"
  section; rewire the line-editor shortcut to open it.
- New SegmentedControl and StyleThumb components; StylePicker reuses
  StyleThumb.
- Share becomes a plain section in the Export panel (no card).
- Fix tooltip clipping/overflow: SettingsFieldHint now positions fixed and
  clamps to the viewport instead of being cut by the rail's scroll area.
- Remove dead components (SettingsPanel, ColorsTab, AppearanceTab,
  LinguisticsTab) and workspaceStore.fineTuneOpen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(editor): pin group colors from a palette; drop dot/hyphen defaul…
74390d3 
…t separators

Two user-requested changes for this release.

Color-coding: selecting a word opens a small palette popover anchored to
it. Picking a swatch pins that word's group to a color; pinned groups keep
their color through palette and style-preset changes until reset via
"Auto". Selecting a color does not drop the selection, so linking still
works; a color chosen on an unlinked word is applied to the link created
next. Adds Connection.pinned, project-store pin/unpin/recolor logic, and a
selection-store pendingColor.

Separators: the default tokenSplitChars drops "." and "-" (kept "|"), which
surprised users ("the editor deletes punctuation"). To keep existing share
links intact, the compact wire is bumped to v4 (new default + a pinned
flag); v2/v3 decoders are frozen to the old ".-|" default so old links keep
their original tokenization. The rtl example gains an explicit "-"
separator (its Hebrew prefix split relies on it) and a pre-existing
dangling connection in wiki-nahuatl-lgr is fixed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(editor): reset icon in color popover; clear selection on empty c…
e67b4fe 
…lick

- Replace the "Auto" reset label with a reset icon.
- Clicking empty space (outside any word or the popover) drops the current
  word selection, matching the intuitive dismiss gesture.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(editor): pinned-group marker; diversify deco/nouveau palettes; A…
1bb716e 
…marante for Nouveau

- Show a small lock badge at a pinned group's connector so it is clear why
  that group ignores palette/style changes. Editor-only (gated on visible
  chrome); the export builder is separate, so it never reaches exports.
- Replace the near-duplicate colors in the deco and nouveau palettes with
  distinct hues (deco: gold + jewels; nouveau: muted botanicals) for wider
  variety.
- Nouveau style now defaults to the Amarante display face (more art-nouveau
  than Spectral); add Amarante to the shared font picker.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(editor): move pinned marker above the group, use a palette icon
5e85459 
The lock badge on the connector read as "this link is locked". Replace it
with a palette badge above a pinned group's top token — clearly about
color, not the connection. Shown for every pinned group (glanceable), but
skipped for the currently selected group since the color popover already
covers it there. Editor-only; never part of the export.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
fix(editor): pinned badge shows group color, is clickable; popover av…
98146d6 
…oids covering words

- Use the group's own color for the palette badge instead of the style's
  connector color (deco/nouveau/sumi/bauhaus overrode it before).
- Render badges in a dedicated top layer and make them clickable: clicking a
  badge selects that group and opens the color popover. The old layer drops
  below the words under Bauhaus, so the badge was unclickable there.
- Place the color popover beside the selected word (right, else left),
  vertically centered within its row, so it never covers a word on the line
  above or below — the words you click to link.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(home): restore SEO content and partner banners below the editor
e7b2343 
The editor stays a full-height hero on /. Below the fold: an H1, the
examples, the intro copy, the guides/SEO sections, the two rotating partner
banners in a sidebar, and the site footer — the content the old landing
carried, now on the home URL that ranks. A subtle "Guides & examples"
chevron in the hero hints at the content and smooth-scrolls to it.

Drops the editor's redundant desktop footer (the page footer covers it).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani
Revert "feat(home): restore SEO content and partner banners below the…
3816cd7 
… editor"

This reverts commit e7b2343.
@dani-polani @claude
feat(home): add collapsible About drawer with the on-page SEO copy
0b48e2a 
The editor stays a fixed full-screen app. An "About" button opens a left
drawer holding the intro, guides/SEO sections and FAQ that used to live on
the landing. The panel is always rendered (slid off-canvas and inert when
closed) so its copy stays in the HTML for crawlers; it is never mounted
conditionally. Adds an sr-only H1 so the home page has a heading again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(home): partner banners in adaptive strip under the canvas
ca7d80a 
Banners fill the empty space beneath a short diagram and auto-collapse to a
thin bar when the diagram grows tall, so they never steal canvas. A manual
toggle overrides the automatic choice. Two banners side by side on wide
screens, one on narrow. The collapse decision measures the canvas scroll
container with hysteresis so it does not oscillate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(home): show example images in the About drawer
b9495d2 
Add the demo GIF near the top of the drawer and the conlang example image a
bit further down, restoring the visuals the old examples section carried.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
fix+chore(editor): correct example links, rename About drawer, drop /…
7331c4d 
…legacy, test pinning

Review follow-ups:
- examples: fixed three mismatched word-to-word links — nahuatl-lgr
  (no-piltzin↔my+son, ce↔a, calli↔house), taiwanese-minnan (boeh↔shall),
  lezgian (hamišaluǧ↔forever). Gallery preview PNGs need regenerating.
- home: rename the "About" drawer trigger/heading to "How it works".
- remove the /legacy route and its now-orphaned shell (AlignerWorkspace,
  ModeTabBar, ModeSheet, workspace store).
- extract recolorUnpinnedComponents (pure) and cover the pinned-color logic
  with unit tests; drop the dead updateConnectionColor method.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(editor): visual feedback while dragging to reorder lines
38d69b2 
A dragged line row dims, and a drop line marks the row it will land on.
Shared state in a small lineDrag store keeps every row's feedback in sync.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
fix(editor): drop line matches where a downward-dragged row lands
cf364d2 
The drop indicator now uses before/after based on the pointer's position
within the target row, and the insert index accounts for the dragged row's
own removal. Dragging a row downward previously drew the line one gap above
where the row actually landed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@dani-polani @claude
feat(content): rework About into a landing; polish guide & example pages
13aedef 
About page:
- Rebuild body as an honest, non-salesy SaaS-style landing: hero with a
  privacy-friendly YouTube demo facade, how-it-works steps, feature grid,
  a diagram highlight, style/export screenshots, examples band, and the
  conlang origin story from docs/tmp material.
- Examples band uses the gallery CDN previews (custom fonts and full
  connectors render correctly), linked to each example page.

Shared/reading pages:
- Add PageHero (eyebrow + breadcrumb + title + lede + gradient rule),
  used by the guide layout and example pages.
- Add YouTubeEmbed: click-to-load nocookie facade, no request to YouTube
  until play.
- Guide index, examples index, and example detail cards: hover lift and
  arrow affordance.

Style: keep the app's flat editorial look — sharp corners (rounded-none)
and minimal shadow across all new/changed components.

Screenshots: add current-editor captures under static/screenshots/about
(overview, clean preview, Style and Export tabs).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dani-polani dani-polani merged commit fc9f0e9 into main Jul 4, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@dani-polani