Skip to content

feat: use Vertical Control Area without the iOS 27 theme - #220

Merged
rdlabo merged 17 commits into
feat/foldable-togglefrom
feat/standalone-vertical-bars
Sep 25, 2026
Merged

rdlabo merged 17 commits into
feat/foldable-togglefrom
feat/standalone-vertical-bars

Conversation

@rdlabo

@rdlabo rdlabo commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Move Vertical Control Area CSS into a standalone stylesheet while importing that same source from the existing iOS 27 theme.
  • Expose enableVerticalControlArea() to project only controls moved into the Vertical Control Area; leave ordinary Native UI Shell controls and WebView transition metrics untouched.
  • Document the standalone setup and cover Web fallback plus native-only snapshot/dark-palette behavior.

Verification

  • npm run build
  • Focused Playwright standalone tests (2 passed)
  • Existing vertical-bar navigation/layout tests (12 passed)
  • Xcode 27.1 beta simulator build passed
  • Senior and third-party review cycles approved

Stacked on #213.


Devin Review

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

Devin Review

Comment thread src/native/runtime.ts
};
const measuringPointerPages = new WeakSet<HTMLElement>();
const readEnabledCandidate = (element: HTMLElement): Candidate | undefined => {
if (verticalBarsOnly && !isVerticalBarsCandidate(element)) return;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 縦型エリア専用モードで検索操作が消える

ガラス検索欄を持つ検索可能タブでは、縦型エリア専用モードでも検索構成がスナップショットに追加されます。ネイティブの縦型レールは検索を描画しない一方、検索 FAB とフッターが隠れ、検索できなくなります。

Learn more

検索可能タブは attachTabBarSearchable で登録され、decorate がタブ候補に検索構成と検索 FAB・フッターの Web ソースを追加します。新しいフィルターはタブバーを縦型候補として許可するため、登録が有効な場合もこの装飾を止めません。sync は検索 FAB とフッターを非表示にしますが、update は縦型候補を検索コントローラではなく縦型レールに渡します。そのため、検索ボタンと検索欄がどちらにも表示されません。

Example: アルバム画面の検索可能タブで検索欄と FAB が対応条件を満たし、enableVerticalControlArea() を起動すると、タブはレールに表示されても検索用 FAB とフッターは Web から消えます。

Recommended fix: 縦型エリア専用モードでは search.decorate が検索構成や検索ソースを追加しないようにするか、縦型配置候補を検索装飾から除外してください。通常の Native UI Shell の検索処理は維持してください。

Devin Review


Was this helpful? React with 👍 or 👎 to provide feedback.

rdlabo and others added 16 commits September 24, 2026 18:15
Replace separate placement/metrics getters and listeners with a single
device-layout API (getDeviceLayout + deviceLayoutChange) so vertical-bar
placement, hinge posture, and WebView corner radius stay synchronized.
Monitoring is reference-counted, error paths no longer decrement other
callers' counts, and destroy is idempotent.

The demo split pane now follows the hinge posture (320px fully open,
50vw partially open) via the `when` attribute, side-menu items use
routerLink for tab-consistent navigation, and screenshot coverage
guards both widths.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…er web view

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…e mocks

Merge the withReason/withPlacementListener/resetOnDestroy wrappers into a
single manage() helper and drop the dead lifecycle module so handle
ownership lives in one place. Reuse inFixedToolbar for toolbar
eligibility instead of duplicating the same structural check.

E2E mocks now model the plugin implementation returned by
registerPlugin for IonicNativeUIShell instead of bridging through
window.__nativeUIShell or PluginHeaders, so tests exercise the same
registration path as the app and emit events through the plugin listener
registry. Test probes move off window onto the ion-app element and
document, and the remaining any types are replaced with the public
ShellSnapshot/ShellControl/ShellItem surface.

Style-value specs that re-verified what screenshot regression already
covers are removed.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Store search controllers behind ShellSearchControlling so the
  UIViewController dictionary stops round-tripping through as? casts.
- Replace the erased trait-registration token with an unregister
  closure and hold the hinge interaction as UIInteraction.
- Gate iOS 27.1-only SwiftUI symbols in ShellVerticalBars behind the
  same canImport check the plugin uses; Xcode 27.0 cannot see them.
- Move the Duo content out of special-markup into docs/iphone-duo.md
  so readers who only want Duo support have one page: device-layout
  reporting without a runtime, the vertical rail, and the posture-driven
  split pane.
- Document that device-layout monitoring is reference-counted and
  independent of configure(), and that the enable* runtimes already
  hold a monitoring reference while native projection is active.
- Note that the plugin reports device facts and never applies them to
  the DOM; the application owns placement decisions.
- Extend docgen to emit the VerticalControlAreaHandle reference and
  link the new page from the README and native-ui-shell guide.
@rdlabo
rdlabo merged commit 81908a7 into feat/foldable-toggle Sep 25, 2026
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