MOONLIT LIBRARY / Ning Zhou / v1.4

Scope
Shared components for the portfolio website and its case-study pages.
Project accent colors are website variants. Product/App interfaces and task
flows retain their own design systems within their respective project studies.

Contents
- portfolio-tokens.css: colors, type, spacing and motion values
- portfolio-components.css: 12 semantic HTML components (nz-* namespace)
- portfolio-components.js: optional native dialog enhancement
- portfolio-toast.css + portfolio-toast.js: the 13th component, toast feedback
- portfolio-tokens.json: reference values exported from the CSS source
- example.html + cover.webp: self-contained composition example

Usage
Load tokens first, then components. Put content inside .nz-scope.
Set data-nz-theme on an ancestor: default, nexo, fellou, stone-roses,
solitude, ms-tomato, mood-tracker. Set data-nz-motion="off" to reduce motion.
System prefers-reduced-motion is respected automatically.

Open the folder with a local web server to run JavaScript modules:
  python -m http.server 8780
Then visit http://localhost:8780/example.html
Static CSS and native details work without JavaScript. The dialog requires
initPortfolioComponents(), as shown in example.html. Call it once per root.

Available patterns
Text link, keyword emphasis, icon action, project row, chapter heading,
project facts, image/caption, section index, disclosure, preference switch,
metadata tag, image dialog, toast feedback.

Toast usage
Load portfolio-toast.css after the tokens and import createToastRegion from
portfolio-toast.js. Instantiate once per region. show({type, title, description})
returns an id; update(id, options) changes that existing message.
Types: info, success, error, loading. Positions: top/bottom-left/center/right.
An action is {label, onClick}. Loading and action messages do not auto-dismiss;
other messages default to 5500 ms. A new fourth message replaces the oldest.
Hover or keyboard focus expands the stack and pauses dismissal.
Use setExpanded(true) for always-expanded stacks, setPosition(), dismiss(id),
clear(), or destroy() when removing the component. Dismissed ids are not revived
by late async updates. Screen-reader feedback is polite and motion is reduced
when requested. This native implementation is inspired by Sonner, not a copy
of or dependency on Sonner React. Reference: https://sonner.emilkowal.ski/

The catalog has 13 shared components plus 9 signature interaction patterns.
Shared components have copyable HTML. Signature patterns have source/state notes
and live demonstrations, including the original homepage in an opt-in iframe.
The source-reference folder includes the signature implementation and the
homepage motion sources. These patterns depend on the original website markup
and assets; they are not standalone controls. The portable example remains
self-contained. The sliding highlight is a Kaiwen Tang reference study.
Replace example text, image paths, URLs and business event handlers for your page.
The Focus/Hover state classes in the catalog are documentation examples only.
Each dialog and label target needs a unique ID when you use multiple instances.
This is an HTML/CSS library, not a Figma library or a published npm package.
