Weave
Storybook: https://ag2-space.github.io/weave/ — every branch gets its own at https://ag2-space.github.io/weave/<branch>/.
The AG2 Space design system. Forked from folds 2.6.2 (Apache-2.0); @ag2/[email protected] is [email protected] under the new name.
Temporary sidebar collapse
Keep PageNav mounted and call useRoomNavAutoCollapse once from the room layout:
import { useRoomNavAutoCollapse } from "@ag2/weave";
useRoomNavAutoCollapse(commonsOpen && !isMobile, roomId);
The hook collapses the sidebar before paint without writing roomNavCollapsed.
Closing Commons or unmounting the layout releases the request and restores the saved
preference. Manual controls still use useRoomNavCollapsed(); they toggle the effective
state, save the user's choice, and override requests already active. Switching tabs in
the same room preserves that choice. Closing and reopening Commons, or changing roomId,
starts a fresh automatic collapse. Leave the optional scope unchanged for the lifetime
of one open panel, and disable the request on mobile.
useRoomNavCollapsed() retains its existing tuple and animation options. The collapsed
sidebar's restore button remains the way to expand it; no room-header control is needed.
Ambient orb background
OrbBackground renders the Absorb / Calm / Aura field and is the default background
of SplashScreen. Place it inside an element with the exported OrbBackgroundHost
class so its decorative canvas sits behind content and is clipped at the surface edge.
The parent supplies its background colour through the normal theme tokens.
It follows the resolved color.Background.Container token, including nested and custom
themes. An optional appearance="light" | "dark" prop lets a framing host override the
colour intensity. Reduced motion renders a static field; hidden documents pause animation.
All animation frames, resize observers, and theme listeners are removed on unmount.
Starfield and StarfieldHost remain exported for existing consumers.
The field is adapted from matty-morgs/octo-space.
Folds
Folds is the design system made for Cinny matrix client.
Local development
Execute the following commands to start a development server:
npm ci # Install all dependencies
npm run storybook # Serve a development version
To build the package:
npm run build # Build package into dist directory