rich-react-component 0.4.0 → 0.4.1

package/README.md

@@ -20,30 +20,36 @@ Each layer **reuses** the one below it instead of reimplementing it — `RemoteC
 npm install rich-react-component bootstrap react react-dom
 ```
 
-`bootstrap`, `react`, and `react-dom` are peer dependencies — the library ships no CSS of its own beyond what Bootstrap classes provide.
+`bootstrap`, `react`, and `react-dom` are peer dependencies. Bootstrap is still
+loaded by the application:
 
 ```tsx
 import "bootstrap/dist/css/bootstrap.min.css";
 ```
 
-The library ships one opt-in stylesheet: a repository-owned **Metronic Bootstrap
-visual skin** covering every public component. It is emitted as a separate
-`dist/style.css` asset, so importing the package entry point stays
-side-effect-free for SSR. Load it after Bootstrap and before your own overrides:
-
-```tsx
-import "bootstrap/dist/css/bootstrap.min.css";
-import "rich-react-component/style.css";
-// ...then your application's own overrides
-```
-
-Every rule in it is anchored on a library-owned `rrc-*` class, so importing it
-cannot repaint your own Bootstrap markup — components emit both their Bootstrap
-class and their `rrc-*` class, and a consumer who skips the import keeps plain
-Bootstrap. It is **not** the official Metronic stylesheet: no licensed Metronic
-or KeenIcons asset is used. Typography prefers Inter but the package never
-fetches a font; supply Inter from your application and it is picked up, or opt
-the whole page in with `body { font-family: var(--rrc-font-sans); }`.
+The library ships one opt-in stylesheet: a repository-owned **Metronic Bootstrap
+visual skin** covering every public component. It is emitted as a separate
+`dist/style.css` asset, so importing the package entry point stays
+side-effect-free for SSR. Load it after Bootstrap:
+
+```tsx
+import "bootstrap/dist/css/bootstrap.min.css";
+import "rich-react-component/style.css";
+```
+
+Every rule in it is anchored on a library-owned `rrc-*` class, so importing it
+cannot repaint your own Bootstrap markup — components emit both their Bootstrap
+class and their `rrc-*` class, and a consumer who skips the import keeps plain
+Bootstrap. It is **not** the official Metronic stylesheet: no licensed Metronic
+or KeenIcons asset is used. Typography prefers Inter but the package never
+fetches a font; supply Inter from your application and it is picked up, or opt
+the whole page in with `body { font-family: var(--rrc-font-sans); }`.
+
+The same philosophy applies to application chrome in this repository's
+showcase: no separate app stylesheet is required. Reusable showcase hooks live
+under `rrc-showcase-*` and are delivered through the public package stylesheet,
+so the demo app consumes the component library the way an application should:
+through component APIs and the package CSS entry, not a local `demo.css`.
 
 ## Quick example
 
@@ -421,23 +427,28 @@ not added as a second export; `DocumentViewer` is the only public name.
 
 ## Component showcase
 
-A dev-only application exercises the library live — not part of the published package:
+A dev-only application exercises the library live:
 
 ```bash
 npm run dev
 ```
 
-The showcase is a routed single-page application: a persistent shell (categorized
-Sidebar, header, appearance drawer) with one route per public visual component,
-each page showing a live Preview and the source that produced it.
-
-- `/overview/introduction` — the landing route
-- `/components/<category>/<component>` — one route per Base component
-- `/remote/<component>` and `/smart/<component>` — the Remote and Smart layers
-
-The demo consumes the library through its real public specifier
-(`rich-react-component`), never through private source paths, so the package
-boundary is exercised the way a consumer exercises it.
+The showcase is a routed single-page application: a persistent shell
+(categorized Sidebar, header, appearance drawer) with one route per public
+visual component, each page showing a live Preview and the source that produced
+it.
+
+- `/overview/introduction` — the landing route
+- `/overview/ensa-dashboard-example` — an application-style ENSA dashboard
+  example built from `rich-react-component` components only
+- `/components/<category>/<component>` — one route per Base component
+- `/remote/<component>` and `/smart/<component>` — the Remote and Smart layers
+
+The demo consumes the library through its real public specifier
+(`rich-react-component`) and the public stylesheet
+(`rich-react-component/style.css`), never through private source paths and never
+through a separate `demo.css`. Showcase-specific surface classes are
+`rrc-showcase-*`, owned by the package stylesheet.
 
 ## Scripts
 
@@ -460,13 +471,17 @@ src/
 ├── smart/    # Smart layer (Phases 1-5) — may depend on base/ and remote/
 └── index.ts  # public entry point
 
-demo/         # dev-only routed showcase application (not published)
-  registry/   #   authoritative route/category metadata + public-export inventory
-  shell/      #   persistent app shell: sidebar, header, drawers, preferences
-  pages/      #   one lazily loaded module per category
-  ui/         #   page standard and the Preview/Code example viewer
-  mocks/      #   deterministic in-memory HttpClient for the Remote demos
-```
+demo/         # dev-only routed showcase application (not published)
+  registry/   #   authoritative route/category metadata + public-export inventory
+  shell/      #   persistent app shell: sidebar, header, drawers, preferences
+  pages/      #   one lazily loaded module per category
+  ui/         #   page standard and the Preview/Code example viewer
+  mocks/      #   deterministic in-memory HttpClient for the Remote demos
+```
+
+`src/styles/showcase.css` contains the reusable `rrc-showcase-*` application
+surface that the showcase uses through `rich-react-component/style.css`; it is
+not imported directly by the demo app.
 
 ## Testing