Skip to content

feat(preview): upgrade to ranui/ranuts 0.2 with builder, a11y & responsive UI - #9

Open
chaxus wants to merge 1 commit into
mainfrom
feat/ranui-ranuts-upgrade
Open

feat(preview): upgrade to ranui/ranuts 0.2 with builder, a11y & responsive UI#9
chaxus wants to merge 1 commit into
mainfrom
feat/ranui-ranuts-upgrade

Conversation

@chaxus

@chaxus chaxus commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Upgrades the file-preview component to the latest ranui 0.2.0-alpha.1 and ranuts 0.2.0-alpha.0, and modernizes the implementation around the new APIs.

Changes

  • Deps: ranui 0.1.10-alpha-27 → 0.2.0-alpha.1, ranuts 0.1.0-alpha-23 → 0.2.0-alpha.0. All APIs the component relies on (Client, MessageCodec, noop, isSafari, md5) remain intact.
  • ranui builder: rebuilt all DOM construction with ButtonBuilder/Div/View/Style from ranui/builder, replacing manual createElement/setAttribute.
  • New components: hand-rolled spinner/text → r-loading + r-progress (real download percentage).
  • Accessibility:
    • Dialog semantics (role="dialog", aria-modal, aria-label)
    • Native <button> close control (decorative aria-hidden icon)
    • Focus management — move into dialog on open, restore to trigger on close
    • Esc to close; focusable + keyboard-activatable trigger
    • role="progressbar" + role="status"/aria-live loading; iframe title; visible focus rings
  • Responsive (mobile / iPad / PC): dvh/dvw, env(safe-area-inset-*), touch tap targets (44/48px), breakpoints, overscroll-behavior: contain, prefers-reduced-motion.
  • Toolchain config: adapted to the bumped build toolchain (dropped deprecated tsconfig baseUrl; sourced Rollup types from vite; dropped rolldown-incompatible options).

Verification

  • tsc --noEmit clean
  • ES + UMD builds pass with no warnings
  • Verified in Chrome: PDF preview renders end-to-end; full keyboard journey (focus host → Enter opens → focus close → close → focus restored); responsive computed values correct at 390 / 820 / 1440 px

🤖 Generated with Claude Code

…nsive UI

Upgrade ranui 0.1.10-alpha-27 -> 0.2.0-alpha.1 and ranuts 0.1.0-alpha-23 ->
0.2.0-alpha.0, then modernize the preview component around the new APIs:

- Rebuild all DOM construction with ranui's builder (ButtonBuilder/Div/View/
  Style) instead of manual createElement/setAttribute.
- Replace the hand-rolled spinner/text with r-loading + r-progress (real
  download percentage).
- Accessibility: dialog semantics (role=dialog, aria-modal), native <button>
  close control with decorative icon, focus management (move in on open,
  restore on close), Escape to close, keyboard-activatable focusable trigger,
  progressbar + live-region loading, iframe title, focus-visible rings.
- Responsive mobile/iPad/PC: dynamic viewport units, safe-area insets, touch
  tap targets (44/48px), breakpoints, overscroll containment, reduced-motion.
- Adapt build config to the bumped toolchain (drop deprecated tsconfig
  baseUrl; source Rollup types from vite; drop rolldown-incompatible options).

Verified: tsc clean, ES + UMD builds pass, PDF preview + a11y + responsive
confirmed in-browser across mobile/iPad/desktop viewports.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant