Merge pull request #42 from programmerShinobi/feat/phase1-borderless-identity

[feat](ui): Fase 1 — Aurora Glass borderless shell, neon brand mark, modern navbar & badges, copyrightArchitecture

Author: programmerShinobi

CHANGELOG.md

@@ -9,6 +9,31 @@ The decision **model** carries its own version, recorded in the
 
 ## [Unreleased]
 
+### Changed (Fase 1 — "Aurora Glass" borderless evolution + identity — 2026-07-16)
+
+- **Component tree grouped by feature area** — `src/components/` reorganised into
+  `chrome/ · landing/ · advisor/ · insights/ · overlays/` (tests move with their components; the
+  frozen model guards pin `src/config/*` only and are untouched).
+- **Borderless design language** — the framed app box is gone: content sits full-bleed on the
+  aurora canvas; sections separate by whitespace (`.f-div` is now pure spacing); hairline border
+  tokens softened; the header and top nav float as **glassmorphism** panels (`.aa-glass`:
+  translucent `color-mix` fill + `backdrop-filter` blur, with opaque fallbacks via `@supports` and
+  on low-core `aurora-static` devices); the mobile tab bar separates by shadow, not stroke. Chart
+  grids keep their own `--aa-grid-line` token so data lines never fade with the chrome.
+- **Hero radar badges fixed + inviting; modern badge system everywhere** — the Home radar chips no
+  longer hang outside the card (no clipping at any breakpoint) and now carry general, inviting
+  copy that teases real feature areas (free instant analysis · 21 explained architectures). All
+  complementary labels share one modern recipe (`.aa-badge` glass pills, `.aa-kbd` key caps):
+  the guided "New here?" banner became a floating glass card with badge + ⌘K key cap, the header
+  save indicator is a soft badge, landing eyebrow/tags and preset chips get accent-tinted glass,
+  and step numbers are gradient coins.
+- **New brand mark** — a 5-dimension radar pentagon with one lit decision apex ("five dimensions,
+  one recommendation"): `public/favicon.svg` + `BrandMark` header glyph + regenerated PWA icons
+  (192/512/maskable/apple-touch, headless render, no new deps).
+- **Copyright & identity** — `© 2026 Faqih Pratama Muhti (programmerShinobi)` in the global
+  footer, `<meta author/copyright>`, and the print report; brand & identity exclusive, code stays
+  MIT and content CC BY 4.0 (single-sourced in `src/config/site.ts`).
+
 ### Changed (Full bilingualisation + light-theme polish — 2026-07-15)
 
 - **Light theme softened** — the page background is now an off-white slate (`#e8ecf4`) instead of

DECISIONS.md

@@ -237,3 +237,45 @@ Appendix A). Direction chosen with the maintainer: **client-rendered first, Wave
   dev and the Playwright suite never fight a cache.
 - **Icons** are generated from a single node-tree brand glyph on the Aurora gradient (`public/favicon.svg`
   → 192/512/maskable PNGs), rendered headlessly — no image-processing dependency added.
+
+## Fase 1 — "Aurora Glass" borderless evolution + identity (2026-07)
+
+Documented **before** implementation per the project's docs-first rule; each point below is a
+commitment the code must match (cross-checked by review, gates, and tests).
+
+- **Component tree grouped by feature area, guards untouched.** `src/components/` (40 flat files)
+  is reorganised into `chrome/ · landing/ · advisor/ · insights/ · overlays/` (see
+  [design-specification §3](docs/03-blueprint/design-specification.md)). `src/config/`, `src/lib/`
+  and every frozen artifact keep their exact paths — the frozen guard scripts reference
+  `src/config/*` only, so the restructure cannot touch the model. Tests move *with* their
+  components; no test was weakened.
+- **Borderless design language ("Aurora Glass"), applied via tokens again — not a second reskin.**
+  Three characteristics, mirroring the modern full-bleed idiom:
+  1. **Full-bleed canvas** — the aurora background already spans the viewport; the app frame drops
+     its hard outer border/box so content sits directly on the canvas.
+  2. **Whitespace as the separator** — visible hairline dividers (`.f-div`, hard card borders)
+     are replaced by spacing rhythm; cards keep elevation via translucent fills + shadow, not
+     stroke. Implemented by retuning `--color-border-*` token *values* toward transparency and a
+     spacing bump — not by per-component surgery.
+  3. **Glassmorphism** — the top nav + mobile tab bar float as translucent, `backdrop-blur` glass
+     panels over the canvas; overlays (palette, modals) share the same glass recipe. Guards:
+     contrast stays AA (axe gate), `backdrop-filter` has an opaque fallback via `@supports`, and
+     blur is dropped under `prefers-reduced-transparency`-like constraints (low-core devices reuse
+     the existing `aurora-static` freeze).
+- **Hero radar badges must never clip — and invite, not spec.** The floating chips on the Home
+  hero (`landing/HeroRadar`) get layout room (no absolute overflow past the card edge at any
+  breakpoint). Copy: after trying model-computed values ("Fit score · 68/100"), the owner chose
+  **general, inviting copy** instead — each badge teases a real feature area (the Advisor's free
+  instant analysis · the 21-architecture Insights library) to make visitors curious (bilingual,
+  dict-driven). Complementary labels across the app share one **modern badge system** (`.aa-badge`
+  glass pills + `.aa-kbd` key caps): the guided "New here?" banner, the header save indicator,
+  landing eyebrow/tags, preset chips, and gradient step-number coins.
+- **Logo: one brand glyph everywhere.** A new simple, unique SVG mark — a pentagon radar +
+  decision-node motif on the Aurora gradient (the project's own iconography: 5 dimensions, one
+  recommendation). Single source (`public/favicon.svg` + a `BrandMark` component), reused for
+  header wordmark, favicon and regenerated PWA icons (192/512/maskable) via the existing headless
+  render script — no image dependency added.
+- **Copyright & identity.** A footer identity line — `© 2026 Faqih Pratama Muhti (programmerShinobi).
+  All rights reserved.` — plus the same notice in `site.ts` config, the SEO snapshots, the README
+  and the print report. **Scope note:** code stays MIT and docs CC BY 4.0 (unchanged LICENSE
+  files); the copyright line asserts *identity/attribution* of the work, it does not re-license it.

docs/03-blueprint/design-specification.md

@@ -122,12 +122,19 @@ src/
 │                   insightRoadmaps · academyQuizzes · labExperiments   (Wave C: paths · quizzes · sandboxes)
 ├── lib/            scoring · sensitivity · antiPatternEngine · adr · report
 │                   c4 · urlState · customConfig · content · frontmatter · markdown
-├── hooks/          usePersistedState · useUrlSyncedState
-└── components/     Header · LandingView + HeroRadar (Home landing, default) · AuroraBackground · ManualBook (Guide, lazy) · Disclaimer · ModeToggle · PresetBar · FactorGroup …
-                    QaWeightChart · DimensionResults · RadarTradeoff · ContributionTable
-                    ComparisonMode · SensitivityCard · RiskRegister · AntiPatternAlerts
-                    FitnessFunctions · MigrationPath · MethodologyPanel · ReportPreview …
-                    LearnView (lazy) · CredibilityBlock
+├── hooks/          usePersistedState · useTheme · useExportActions
+└── components/     grouped by feature area (2026-07 restructure — clean & clear):
+    ├── chrome/     app shell — Header · MobileChrome · AdvisorMobileBar · Toolbar
+    │               CommandPalette · AuroraBackground · StepTracker · GuidedBanner
+    ├── landing/    LandingView · HeroRadar            (Home, default view)
+    ├── advisor/    FactorInputs · FactorField · PresetBar · PrioritiesCard · QaOverridePanel
+    │               DimensionCards · DimensionDetail · RadarPanel · SensitivityCard
+    │               ScenarioCompare · WhyNotRunnerUp · AntiPatternWarning · MigrationCard
+    │               RiskRegister · FitnessFunctions · CostOpsBadges · C4Preview
+    │               HowItDecides · LevelBadge · Collapsible
+    ├── insights/   LearnView (lazy) · AcademyView · LabView · RoadmapView · CredibilityBlock
+    └── overlays/   ManualBook (Guide, lazy) · Glossary · ShortcutsModal
+                    MethodologyPanel · PrintReport
 
 content/            playbook/ · review/   (Markdown + frontmatter articles; git-as-CMS)
                     (Catalog needs no files — it is data-driven from src/config/readerContent.ts)

docs/05-testing-qa/test-plan.md

@@ -61,15 +61,15 @@ lives in fast unit tests and the cross-document guards; UI and human-judgement c
 | [`src/lib/antiPatternEngine.test.ts`](../../src/lib/antiPatternEngine.test.ts) | 8 | Distributed monolith, premature microservices, and the other rules (Model Data Sheet Section 5) |
 | [`src/lib/exports.test.ts`](../../src/lib/exports.test.ts) | 8 | `generateAdr` (MADR), `generateReport`, `buildC4`, scenario JSON round-trip, **share-URL round-trip (AC-14)** |
 | [`src/App.test.tsx`](../../src/App.test.tsx) | 4 | **Integration:** preset & single-factor reactivity (AC-2), language toggle (AC-13), and weight-override redistribution end-to-end |
-| [`src/components/RadarPanel.test.tsx`](../../src/components/RadarPanel.test.tsx) | 3 | **Component:** D1 ranking + single top pick, option toggle, dimension switch (AC-12) |
-| [`src/components/SensitivityCard.test.tsx`](../../src/components/SensitivityCard.test.tsx) | 3 | **Component:** flip sentence + robust fallback, max-3 flips (AC-11) |
-| [`src/components/QaOverridePanel.test.tsx`](../../src/components/QaOverridePanel.test.tsx) | 4 | **Component:** edit → lock, clamp 0–100, unlock, clear-all |
-| [`src/components/CommandPalette.test.tsx`](../../src/components/CommandPalette.test.tsx) | 3 | **Component:** closed renders nothing; filter by query; run on click / Enter |
-| [`src/components/overlays.test.tsx`](../../src/components/overlays.test.tsx) | 5 | **Component:** ManualBook + ScenarioCompare (A/B) — hidden when closed, labelled dialog + close; plus the Manual's **architecture explanations (FR-READ-*)**: parity with the model (every D1–D5 option) + a bibliography of real, linked citations |
+| [`src/components/advisor/RadarPanel.test.tsx`](../../src/components/advisor/RadarPanel.test.tsx) | 3 | **Component:** D1 ranking + single top pick, option toggle, dimension switch (AC-12) |
+| [`src/components/advisor/SensitivityCard.test.tsx`](../../src/components/advisor/SensitivityCard.test.tsx) | 3 | **Component:** flip sentence + robust fallback, max-3 flips (AC-11) |
+| [`src/components/advisor/QaOverridePanel.test.tsx`](../../src/components/advisor/QaOverridePanel.test.tsx) | 4 | **Component:** edit → lock, clamp 0–100, unlock, clear-all |
+| [`src/components/chrome/CommandPalette.test.tsx`](../../src/components/chrome/CommandPalette.test.tsx) | 3 | **Component:** closed renders nothing; filter by query; run on click / Enter |
+| [`src/components/overlays/overlays.test.tsx`](../../src/components/overlays/overlays.test.tsx) | 5 | **Component:** ManualBook + ScenarioCompare (A/B) — hidden when closed, labelled dialog + close; plus the Manual's **architecture explanations (FR-READ-*)**: parity with the model (every D1–D5 option) + a bibliography of real, linked citations |
 | [`src/lib/frontmatter.test.ts`](../../src/lib/frontmatter.test.ts) | 6 | **Content pipeline:** the dependency-free frontmatter parser — scalars, inline arrays, nested map, list of flow maps, body split, no-frontmatter fallback |
 | [`src/lib/markdown.test.tsx`](../../src/lib/markdown.test.tsx) | 6 | **Content pipeline:** the safe Markdown-subset renderer — headings/lists/inline, safe links, `:::guided`/`:::expert` mode blocks, and **no raw-HTML/`javascript:` injection** (XSS-safe by construction) |
 | [`src/lib/content.test.ts`](../../src/lib/content.test.ts) | 5 | **Content index (FR-LEARN-2/3):** every article well-formed and **every `related_advisor` id resolves to the frozen model**; section/slug filters; review-due flag |
-| [`src/components/LearnView.test.tsx`](../../src/components/LearnView.test.tsx) | 8 | **Component (FR-LEARN-1/4/6/8/9/10):** **every architecture has a Catalog, Playbook, Review, AND Library entry** (21×4 parity with the model); Playbook opens as a step-by-step implementation guide (Prerequisites/Steps/Best practices/Pitfalls) + cited sources; Review opens as a structured evaluation (Pros/Cons/metrics/Final verdict) + "Try in the Advisor" returns to the Advisor; Library covers every architecture as reference (Key concepts/Terminology) AND lists its evergreen articles; the **LensNav** walks one architecture through the Catalog → Playbook → Review → Library journey; a **Roadmap** path's step deep-links to its article; an **Academy** quiz gives client-side feedback + a review link; a **Lab** run calls the Advisor with the prepared factor levels |
+| [`src/components/insights/LearnView.test.tsx`](../../src/components/insights/LearnView.test.tsx) | 8 | **Component (FR-LEARN-1/4/6/8/9/10):** **every architecture has a Catalog, Playbook, Review, AND Library entry** (21×4 parity with the model); Playbook opens as a step-by-step implementation guide (Prerequisites/Steps/Best practices/Pitfalls) + cited sources; Review opens as a structured evaluation (Pros/Cons/metrics/Final verdict) + "Try in the Advisor" returns to the Advisor; Library covers every architecture as reference (Key concepts/Terminology) AND lists its evergreen articles; the **LensNav** walks one architecture through the Catalog → Playbook → Review → Library journey; a **Roadmap** path's step deep-links to its article; an **Academy** quiz gives client-side feedback + a review link; a **Lab** run calls the Advisor with the prepared factor levels |
 | [`src/config/waveC.test.ts`](../../src/config/waveC.test.ts) | 9 | **Wave C datasets (FR-LEARN-8/9/10):** every Roadmap step resolves to a real architecture page / article / the Advisor; every Academy answer index is in range and every "review the topic" link resolves; every Lab experiment sets **all 14 model factors** to a valid level with no unknown factors; path/module/experiment ids unique; and **21-architecture holistic parity per section** — every architecture appears in ≥1 learning path, is reviewed by ≥1 quiz question, and is in play (`focus`) in ≥1 experiment |
 | [`src/a11y.test.tsx`](../../src/a11y.test.tsx) | 4 | **Accessibility (AC-15):** axe-core WCAG A/AA on the composed app, Expert/override panel, the lazy Manual/Guide, and the lazy **Insights article** — caught & fixed an unlabeled file input |
 | [`src/i18n/dict.test.ts`](../../src/i18n/dict.test.ts) | 1 | Dictionary completeness — every key has EN **and** ID (covers the new Insights/section keys) |

index.html

@@ -7,6 +7,8 @@
       name="description"
       content="Architecture Advisor — a transparent, quality-attribute-driven decision-support tool for choosing software architecture, and always explaining why. Free, client-side, open source."
     />
+    <meta name="author" content="Faqih Pratama Muhti (programmerShinobi)" />
+    <meta name="copyright" content="© 2026 Faqih Pratama Muhti (programmerShinobi)" />
     <title>Architecture Advisor</title>
 
     <!-- Icons + PWA theme (manifest link is injected by vite-plugin-pwa). -->