docs: fix README layout for pages and mobile

This commit is contained in:
h3p 2026-03-18 10:56:02 +01:00
parent 6372c1a435
commit 4370f1259a
3 changed files with 166 additions and 96 deletions

View file

@ -361,7 +361,7 @@
CODE_SIGNING_ALLOWED = YES;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 535;
CURRENT_PROJECT_VERSION = 536;
DEAD_CODE_STRIPPING = YES;
DEVELOPMENT_TEAM = CS727NF72U;
ENABLE_APP_SANDBOX = YES;
@ -444,7 +444,7 @@
CODE_SIGNING_ALLOWED = YES;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 535;
CURRENT_PROJECT_VERSION = 536;
DEAD_CODE_STRIPPING = YES;
DEVELOPMENT_TEAM = CS727NF72U;
ENABLE_APP_SANDBOX = YES;

148
README.md
View file

@ -40,27 +40,28 @@
<p align="center">
Share what works well and what should improve for both the app and the README.
</p>
<table align="center">
<tr>
<th align="center">Positive Feedback</th>
<th align="center">Negative Feedback</th>
</tr>
<tr>
<td align="center">
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues?q=is%3Aissue%20is%3Aopen%20%22%5BPositive%20Feedback%5D%22%20in%3Atitle">
<img alt="Open Positive Feedback" src="https://img.shields.io/github/issues-search/h3pdesign/Neon-Vision-Editor?query=is%3Aissue%20is%3Aopen%20%22%5BPositive%20Feedback%5D%22%20in%3Atitle&label=Open%20Positive&color=22C55E">
</a><br>
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues/new?template=feature_request.yml&title=%5BPositive%20Feedback%5D%20App%2FREADME%3A%20">Share positive feedback</a>
</td>
<td align="center">
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues?q=is%3Aissue%20is%3Aopen%20%22%5BNegative%20Feedback%5D%22%20in%3Atitle">
<img alt="Open Negative Feedback" src="https://img.shields.io/github/issues-search/h3pdesign/Neon-Vision-Editor?query=is%3Aissue%20is%3Aopen%20%22%5BNegative%20Feedback%5D%22%20in%3Atitle&label=Open%20Negative&color=EF4444">
</a><br>
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues/new?template=bug_report.yml&title=%5BNegative%20Feedback%5D%20App%2FREADME%3A%20">Share negative feedback</a>
</td>
</tr>
</table>
<div align="center">
<table width="100%" style="max-width: 760px; margin: 0 auto;">
<tr>
<th align="center" width="50%">Positive Feedback</th>
<th align="center" width="50%">Negative Feedback</th>
</tr>
<tr>
<td align="center" width="50%">
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues?q=is%3Aissue%20is%3Aopen%20%22%5BPositive%20Feedback%5D%22%20in%3Atitle">
<img alt="Open Positive Feedback" src="https://img.shields.io/github/issues-search/h3pdesign/Neon-Vision-Editor?query=is%3Aissue%20is%3Aopen%20%22%5BPositive%20Feedback%5D%22%20in%3Atitle&label=Open%20Positive&color=22C55E">
</a><br>
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues/new?template=feature_request.yml&title=%5BPositive%20Feedback%5D%20App%2FREADME%3A%20">Share positive feedback</a>
</td>
<td align="center" width="50%">
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues?q=is%3Aissue%20is%3Aopen%20%22%5BNegative%20Feedback%5D%22%20in%3Atitle">
<img alt="Open Negative Feedback" src="https://img.shields.io/github/issues-search/h3pdesign/Neon-Vision-Editor?query=is%3Aissue%20is%3Aopen%20%22%5BNegative%20Feedback%5D%22%20in%3Atitle&label=Open%20Negative&color=EF4444">
</a><br>
<a href="https://github.com/h3pdesign/Neon-Vision-Editor/issues/new?template=bug_report.yml&title=%5BNegative%20Feedback%5D%20App%2FREADME%3A%20">Share negative feedback</a>
</td>
</tr>
</table>
</div>
> Status: **active release**
@ -318,55 +319,12 @@ Create polished share images directly from your selected code.
- Export: use `Share` to generate a PNG snapshot and share/save it.
## Architecture At A Glance
```mermaid
flowchart LR
Mac["Platform: macOS shell (SwiftUI + AppKit bridges)"]
IOS["Platform: iOS/iPadOS shell (SwiftUI + UIKit bridges)"]
ACT["App Layer: user actions (toolbar/menu/shortcuts)"]
VM["App Layer: EditorViewModel (@MainActor state owner)"]
CMD["App Layer: command reducers (Flux-style mutations)"]
IO["Core: file I/O + load/sanitize pipeline"]
HL["Core: syntax highlighting + runtime limits"]
FIND["Core: find/replace + selection engine"]
PREV["Core: markdown preview renderer"]
SAFE["Core: unsupported-file safety guards"]
STORE["Infra: tabs + session restore store"]
PREFS["Infra: settings + persistence"]
SEC["Infra: SecureTokenStore (Keychain)"]
UPD["Infra: release update manager"]
Mac --> ACT
IOS --> ACT
ACT --> VM
VM --> CMD
CMD --> STORE
VM --> IO
VM --> HL
VM --> FIND
VM --> PREV
VM --> SAFE
VM --> PREFS
VM --> UPD
PREFS --> STORE
IO --> STORE
VM --> SEC
classDef platform stroke:#2563EB,stroke-width:3px,fill:transparent,font-family:ui-monospace\, SFMono-Regular\, Menlo\, Monaco\, Consolas\, Liberation Mono\, monospace,font-size:13px;
classDef app stroke:#059669,stroke-width:3px,fill:transparent,font-family:ui-monospace\, SFMono-Regular\, Menlo\, Monaco\, Consolas\, Liberation Mono\, monospace,font-size:13px;
classDef core stroke:#EA580C,stroke-width:3px,fill:transparent,font-family:ui-monospace\, SFMono-Regular\, Menlo\, Monaco\, Consolas\, Liberation Mono\, monospace,font-size:13px;
classDef infra stroke:#9333EA,stroke-width:3px,fill:transparent,font-family:ui-monospace\, SFMono-Regular\, Menlo\, Monaco\, Consolas\, Liberation Mono\, monospace,font-size:13px;
class Mac,IOS platform;
class ACT,VM,CMD app;
class IO,HL,FIND,PREV,SAFE core;
class STORE,PREFS,SEC,UPD infra;
linkStyle 0,1 stroke:#2563EB,stroke-width:2px;
linkStyle 2,3 stroke:#059669,stroke-width:2px;
linkStyle 5,6,7,8,9,13 stroke:#EA580C,stroke-width:2px;
linkStyle 4,10,11,12,14 stroke:#9333EA,stroke-width:2px;
```
<p align="center">
<a href="docs/images/architecture-at-a-glance.svg">
<img src="docs/images/architecture-at-a-glance.svg" alt="Architecture overview showing platform shells feeding app orchestration, core services, and infrastructure" width="1100">
</a><br>
<sub>Static architecture map for GitHub Pages and mobile browsers.</sub>
</p>
- `EditorViewModel` is the single UI-facing orchestration point per window/scene.
- Commands mutate editor state predictably; session/tabs persist through store services.
@ -454,30 +412,32 @@ Most editor features are shared across macOS, iOS, and iPadOS.
### iPhone
<table align="center">
<tr>
<td align="center">
<a href="docs/images/iphone-themes-light.png">
<img src="docs/images/iphone-themes-light.png" alt="iPhone themes panel in light mode" width="280">
</a><br>
<sub>Theme customization workflow</sub>
</td>
<td align="center">
<a href="docs/images/iphone-themes-dark.png">
<img src="docs/images/iphone-themes-dark.png" alt="iPhone themes panel in dark mode" width="280">
</a><br>
<sub>Dark-theme editing preview</sub>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a href="docs/images/iphone-menu.png">
<img src="docs/images/iphone-menu.png" alt="iPhone editor toolbar menu" width="280">
</a><br>
<sub>Toolbar Menu Actions</sub>
</td>
</tr>
</table>
<div align="center">
<table width="100%" style="max-width: 640px; margin: 0 auto;">
<tr>
<td align="center" width="50%">
<a href="docs/images/iphone-themes-light.png">
<img src="docs/images/iphone-themes-light.png" alt="iPhone themes panel in light mode" width="280">
</a><br>
<sub>Theme customization workflow</sub>
</td>
<td align="center" width="50%">
<a href="docs/images/iphone-themes-dark.png">
<img src="docs/images/iphone-themes-dark.png" alt="iPhone themes panel in dark mode" width="280">
</a><br>
<sub>Dark-theme editing preview</sub>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a href="docs/images/iphone-menu.png">
<img src="docs/images/iphone-menu.png" alt="iPhone editor toolbar menu" width="280">
</a><br>
<sub>Toolbar Menu Actions</sub>
</td>
</tr>
</table>
</div>
## Release Flow (Completed + Upcoming)

View file

@ -0,0 +1,110 @@
<svg width="1200" height="760" viewBox="0 0 1200 760" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1200" height="760" rx="32" fill="#F8FAFC"/>
<rect x="24" y="24" width="1152" height="712" rx="28" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2"/>
<text x="80" y="92" fill="#0F172A" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="34" font-weight="700">Architecture At A Glance</text>
<text x="80" y="126" fill="#475569" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="18">Platform shells route actions into shared app orchestration, core services, and infrastructure.</text>
<rect x="80" y="182" width="240" height="78" rx="20" fill="#EFF6FF" stroke="#2563EB" stroke-width="3"/>
<text x="104" y="214" fill="#1D4ED8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="17" font-weight="700">Platform: macOS shell</text>
<text x="104" y="238" fill="#1E3A8A" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="14">SwiftUI + AppKit bridges</text>
<rect x="80" y="286" width="240" height="78" rx="20" fill="#EFF6FF" stroke="#2563EB" stroke-width="3"/>
<text x="104" y="318" fill="#1D4ED8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="17" font-weight="700">Platform: iOS/iPadOS shell</text>
<text x="104" y="342" fill="#1E3A8A" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="14">SwiftUI + UIKit bridges</text>
<rect x="420" y="160" width="314" height="86" rx="20" fill="#ECFDF5" stroke="#059669" stroke-width="3"/>
<text x="446" y="193" fill="#047857" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="17" font-weight="700">App Layer: user actions</text>
<text x="446" y="218" fill="#065F46" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="14">toolbar / menu / shortcuts</text>
<rect x="420" y="272" width="314" height="86" rx="20" fill="#ECFDF5" stroke="#059669" stroke-width="3"/>
<text x="446" y="305" fill="#047857" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="17" font-weight="700">App Layer: EditorViewModel</text>
<text x="446" y="330" fill="#065F46" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="14">@MainActor state owner</text>
<rect x="420" y="384" width="314" height="86" rx="20" fill="#ECFDF5" stroke="#059669" stroke-width="3"/>
<text x="446" y="417" fill="#047857" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="17" font-weight="700">App Layer: command reducers</text>
<text x="446" y="442" fill="#065F46" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="14">predictable state mutations</text>
<rect x="800" y="136" width="304" height="72" rx="18" fill="#FFF7ED" stroke="#EA580C" stroke-width="3"/>
<text x="824" y="168" fill="#C2410C" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Core: file I/O pipeline</text>
<text x="824" y="190" fill="#9A3412" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">load / sanitize / decode</text>
<rect x="800" y="226" width="304" height="72" rx="18" fill="#FFF7ED" stroke="#EA580C" stroke-width="3"/>
<text x="824" y="258" fill="#C2410C" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Core: syntax highlighting</text>
<text x="824" y="280" fill="#9A3412" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">runtime limits</text>
<rect x="800" y="316" width="304" height="72" rx="18" fill="#FFF7ED" stroke="#EA580C" stroke-width="3"/>
<text x="824" y="348" fill="#C2410C" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Core: find / replace</text>
<text x="824" y="370" fill="#9A3412" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">selection engine</text>
<rect x="800" y="406" width="304" height="72" rx="18" fill="#FFF7ED" stroke="#EA580C" stroke-width="3"/>
<text x="824" y="438" fill="#C2410C" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Core: markdown preview</text>
<text x="824" y="460" fill="#9A3412" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">renderer + export path</text>
<rect x="800" y="496" width="304" height="72" rx="18" fill="#FFF7ED" stroke="#EA580C" stroke-width="3"/>
<text x="824" y="528" fill="#C2410C" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Core: unsupported-file safety</text>
<text x="824" y="550" fill="#9A3412" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">guardrails + fallback paths</text>
<rect x="420" y="530" width="314" height="72" rx="18" fill="#FAF5FF" stroke="#9333EA" stroke-width="3"/>
<text x="446" y="562" fill="#7E22CE" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Infra: tabs + session restore</text>
<text x="446" y="584" fill="#6B21A8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">window-isolated persistence</text>
<rect x="420" y="618" width="314" height="72" rx="18" fill="#FAF5FF" stroke="#9333EA" stroke-width="3"/>
<text x="446" y="650" fill="#7E22CE" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Infra: settings + persistence</text>
<text x="446" y="672" fill="#6B21A8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">preferences + restore policies</text>
<rect x="800" y="618" width="146" height="72" rx="18" fill="#FAF5FF" stroke="#9333EA" stroke-width="3"/>
<text x="822" y="650" fill="#7E22CE" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Keychain</text>
<text x="822" y="672" fill="#6B21A8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">SecureTokenStore</text>
<rect x="958" y="618" width="146" height="72" rx="18" fill="#FAF5FF" stroke="#9333EA" stroke-width="3"/>
<text x="980" y="650" fill="#7E22CE" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="16" font-weight="700">Updater</text>
<text x="980" y="672" fill="#6B21A8" font-family="ui-monospace, 'SFMono-Regular', Menlo, monospace" font-size="13">release manager</text>
<path d="M320 221H392" stroke="#2563EB" stroke-width="4" stroke-linecap="round"/>
<path d="M320 325H392" stroke="#2563EB" stroke-width="4" stroke-linecap="round"/>
<path d="M392 221L378 213V229L392 221Z" fill="#2563EB"/>
<path d="M392 325L378 317V333L392 325Z" fill="#2563EB"/>
<path d="M577 246V262" stroke="#059669" stroke-width="4" stroke-linecap="round"/>
<path d="M577 272L569 258H585L577 272Z" fill="#059669"/>
<path d="M577 358V374" stroke="#059669" stroke-width="4" stroke-linecap="round"/>
<path d="M577 384L569 370H585L577 384Z" fill="#059669"/>
<path d="M734 315H780" stroke="#EA580C" stroke-width="4" stroke-linecap="round"/>
<path d="M780 315L766 307V323L780 315Z" fill="#EA580C"/>
<path d="M734 315C786 315 786 172 780 172" stroke="#EA580C" stroke-width="3" stroke-linecap="round"/>
<path d="M780 172L766 164V180L780 172Z" fill="#EA580C"/>
<path d="M734 315C790 315 790 262 780 262" stroke="#EA580C" stroke-width="3" stroke-linecap="round"/>
<path d="M780 262L766 254V270L780 262Z" fill="#EA580C"/>
<path d="M734 315C790 315 790 352 780 352" stroke="#EA580C" stroke-width="3" stroke-linecap="round"/>
<path d="M780 352L766 344V360L780 352Z" fill="#EA580C"/>
<path d="M734 315C790 315 790 442 780 442" stroke="#EA580C" stroke-width="3" stroke-linecap="round"/>
<path d="M780 442L766 434V450L780 442Z" fill="#EA580C"/>
<path d="M734 315C790 315 790 532 780 532" stroke="#EA580C" stroke-width="3" stroke-linecap="round"/>
<path d="M780 532L766 524V540L780 532Z" fill="#EA580C"/>
<path d="M577 470V514" stroke="#9333EA" stroke-width="4" stroke-linecap="round"/>
<path d="M577 514L569 500H585L577 514Z" fill="#9333EA"/>
<path d="M577 602V618" stroke="#9333EA" stroke-width="4" stroke-linecap="round"/>
<path d="M577 618L569 604H585L577 618Z" fill="#9333EA"/>
<path d="M734 315C770 315 770 654 790 654" stroke="#9333EA" stroke-width="3" stroke-linecap="round"/>
<path d="M790 654L776 646V662L790 654Z" fill="#9333EA"/>
<path d="M734 315C740 315 740 654 410 654" stroke="#9333EA" stroke-width="3" stroke-linecap="round"/>
<path d="M410 654L424 646V662L410 654Z" fill="#9333EA"/>
<path d="M734 426C770 426 770 566 410 566" stroke="#9333EA" stroke-width="3" stroke-linecap="round"/>
<path d="M410 566L424 558V574L410 566Z" fill="#9333EA"/>
<path d="M734 315C782 315 782 654 948 654" stroke="#9333EA" stroke-width="3" stroke-linecap="round"/>
<path d="M948 654L934 646V662L948 654Z" fill="#9333EA"/>
<circle cx="96" cy="720" r="9" fill="#2563EB"/>
<text x="114" y="726" fill="#1E293B" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15">Platform shell</text>
<circle cx="286" cy="720" r="9" fill="#059669"/>
<text x="304" y="726" fill="#1E293B" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15">App orchestration</text>
<circle cx="506" cy="720" r="9" fill="#EA580C"/>
<text x="524" y="726" fill="#1E293B" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15">Core services</text>
<circle cx="674" cy="720" r="9" fill="#9333EA"/>
<text x="692" y="726" fill="#1E293B" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15">Infrastructure</text>
</svg>

After

Width:  |  Height:  |  Size: 9.7 KiB