@eagami/ui 0.10.0 → 0.11.0

package/README.md

@@ -2,7 +2,7 @@
   <img src="docs/images/eagami-header.png" alt="eagami design system — elegant web design" width="800" />
 </p>
 
-A lightweight, accessible Angular component library built on CSS custom properties. Ready to use out of the box — install, import, and start building.
+A lightweight, accessible Angular component library built on CSS custom properties, with portable design system integration guides for Flutter and React ([see more](#framework-integration)). Ready to use out of the box — install, import, and start building.
 
 Every component is standalone, signal-based, and fully themed via design tokens. No wrapping modules, no complex setup, no runtime style conflicts. Designed to be AI-friendly with clear APIs, consistent patterns, and comprehensive documentation that makes it easy for both developers and AI assistants to work with.
 
@@ -370,13 +370,17 @@ Arrow keys, Enter/Space to select, Escape to close. Sizes: `sm` | `md` | `lg`.
 <details>
 <summary><strong>Eagami wordmark</strong> — branded logo wordmark linking to eagami.com</summary>
 
-Variants: `logo` (icon only) | `signature` (handcrafted by &lt;text&gt;) | `brand` (&lt;text&gt; with tagline). The `text` input switches the main wordmark between `eagami` and `eagami design system` in the `signature` and `brand` variants. Three discrete sizes (`sm`, `md`, `lg`) scale both the logo and the text proportionally.
+| Variant | Text |
+| --- | --- |
+| `1` | eagami |
+| `2` | handcrafted by eagami |
+| `3` | eagami design system |
+| `4` | eagami design system — elegant web design |
+
+Layout: `stacked` (default, multi-line) | `inline` (single line, uniform font size — adds em dash before tagline). Size is a number (pixels) for continuous scaling; the logo, brand text, and secondary text all scale proportionally.
 
 ```html
-<ea-eagami-wordmark
-  variant="brand"
-  size="md"
-  text="eagami design system" />
+<ea-eagami-wordmark [variant]="4" [size]="96" />
 ```
 
 <img src="docs/images/eagami-wordmark.png" alt="Eagami wordmark component" width="560" />
@@ -691,6 +695,15 @@ Component-level overrides are available where useful:
 
 See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.
 
+## Framework integration
+
+@eagami/ui is an Angular library, but its design tokens, rules, and component API conventions are framework-agnostic. For projects that can't consume the Angular package directly yet still want to adhere to the same design system, two self-contained integration guides are provided — each copy-and-paste ready and written to be readable by both human developers and AI coding agents:
+
+- **[design-system-flutter.md](design-system-flutter.md)** — Dart `ThemeExtension`, `MaterialApp` wiring, reduced-motion handling, and widget API conventions for Flutter projects
+- **[design-system-react.md](design-system-react.md)** — CSS custom properties, TypeScript constants, and component prop conventions for React projects (plain CSS, CSS Modules, styled-components, emotion, or Tailwind)
+
+Both files contain the full token set, mandatory design rules, theme setup, usage patterns, component API conventions, and accessibility requirements. Copy the relevant file into the target project and follow it when building UI.
+
 ## Peer dependencies
 
 | Package | Version |