major UI scale down

README.md

@@ -6,27 +6,30 @@
 
 ## What is Compose?
 
-Compose is a smart contract library that helps developers create smart contract systems using [ERC-2535 Diamonds](https://eips.ethereum.org/EIPS/eip-2535).
+A smart contract development framework for building modular systems with [ERC-8153 Diamonds](https://eips.ethereum.org/EIPS/eip-2535).
 
-**Compose provides:**
+Compose gives you a clear way to split contract functionality into focused facets, reuse proven building blocks, and evolve your onchain application with ease.
 
-- An on-chain standard library of facets (modular smart contracts)
-- Building blocks for diamond-based smart contract systems
-- Patterns and libraries to combine Compose facets with your custom logic
+**The framework includes:**
+
+- A Solidity library of reusable facets and modules
+- A CLI toolkit for projects with Foundry or Hardhat
+- Design patterns for combining Compose components with custom logic
+- Documentation for building, extending, and testing diamond systems
 
 The project actively evolves based on community input—[tell us](https://github.com/Perfect-Abstractions/Compose/discussions/108) what you'd like Compose to do for you.
 
 
 ## Why Compose is Different
 
-**Forget traditional smart contract design patterns**—Compose takes a radically different approach.
+Smart contracts are hard enough to audit and maintain. Compose keeps each piece small, explicit, and easy to read.
 
-We build high-quality smart contracts by <a href="https://compose.diamonds/docs/design/banned-solidity-features">**intentionally restricting Solidity features**</a> and following conventions designed specifically for smart contracts. This is **Smart Contract Oriented Programming (SCOP)**.
+We use <a href="https://compose.diamonds/docs/design/banned-solidity-features">**intentional Solidity constraints**</a> and conventions designed specifically for smart contracts. This is **Smart Contract Oriented Programming (SCOP)**.
 
 ### Core Philosophy
 
 - **Read First**: Code written to be understood, not just executed
-- **Diamond-Native**: Built specifically for ERC-2535 diamond contracts
+- **Diamond-Native**: Built specifically for ERC-2535 / ERC-8153 diamond contracts
 - **Composition Over Inheritance**: Combine facets instead of inheriting contracts
 - **Intentional Simplicity**: Banned features lead to clearer, safer code
 
@@ -71,13 +74,9 @@ Please see the [documentation for contributing](https://compose.diamonds/docs/co
 
 <br>
 
-**Compose is evolving with your help. Join us in building the future of smart contract development.**
-
-**-Nick & The Compose Community**
-
 <!-- automd:contributors github="Perfect-Abstractions/Compose" license="MIT" -->
 
-### Made with 🩵 by the [Compose Community](https://github.com/Perfect-Abstractions/Compose/graphs/contributors)
+### Made with more than 🩵 by the [Compose Community](https://github.com/Perfect-Abstractions/Compose/graphs/contributors)
 
 <a href="https://github.com/Perfect-Abstractions/Compose/graphs/contributors">
 <img src="https://contrib.rocks/image?repo=Perfect-Abstractions/Compose" />

cli/README.md

@@ -1,6 +1,6 @@
 # Compose CLI
 
-Command-line toolkit for building, deploying, and managing diamond smart contracts using the Compose Library. Supports both [Foundry](https://book.getfoundry.sh/) and [Hardhat](https://hardhat.org/) frameworks.
+The Compose CLI is the fastest way to start a modular smart contract project. Scaffold a facet-based diamond, choose your building blocks, and develop with [Foundry](https://book.getfoundry.sh/) or [Hardhat](https://hardhat.org/).
 
 ## Quick Start
 
@@ -153,7 +153,7 @@ Please see the [documentation for contributing](https://compose.diamonds/docs/co
 
 <br>
 
-**Compose is evolving with your help. Join us in building the future of smart contract development.**
+**Start your next smart contract system with a structure you can understand and extend.**
 
 **-Nick & The Compose Community**
 

cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perfect-abstractions/compose-cli",
   "version": "0.3.0",
-  "description": "CLI to scaffold Compose facet-based diamond projects",
+  "description": "CLI for scaffolding Compose smart contract projects with facet-based diamonds",
   "main": "dist/index.js",
   "bin": {
     "compose": "bin/compose.js"

src/package.json

@@ -34,4 +34,4 @@
   "bugs": {
     "url": "https://github.com/Perfect-Abstractions/Compose/issues"
   }
-}
+}

website/docs/contribution/documentation/all-components.mdx

@@ -2026,13 +2026,22 @@ Your configuration has been saved successfully!
 This is a simple note without a custom title.
 </Callout>
 
+<Callout type="important" title="Critical">
+Use for security-critical or irreversible-operation notices.
+</Callout>
+
+<Callout type="info" title="Advanced configuration" collapsible>
+Collapsible callouts keep long details out of the reading flow.
+</Callout>
+
 #### Props
 
 <PropertyTable 
   properties={[
-    { name: 'type', type: 'string', required: false, description: "Type ('info', 'warning', 'danger', 'success', 'tip', 'note')", default: "'info'" },
+    { name: 'type', type: 'string', required: false, description: "Type ('info', 'tip', 'warning', 'danger', 'success', 'note', 'important')", default: "'info'" },
     { name: 'title', type: 'string', required: false, description: 'Optional custom title', default: 'undefined' },
-    { name: 'icon', type: 'boolean', required: false, description: 'Show icon', default: 'true' },
+    { name: 'collapsible', type: 'boolean', required: false, description: 'Render as expandable disclosure', default: 'false' },
+    { name: 'defaultOpen', type: 'boolean', required: false, description: 'Expanded by default (collapsible only)', default: 'false' },
     { name: 'children', type: 'ReactNode', required: true, description: 'Content' }
   ]}
 />
@@ -2068,32 +2077,20 @@ This is a simple note without a custom title.
 
 ### CalloutBox
 
-Alternative callout component with different styling.
+Deprecated alias of [Callout](#callout), kept for backward compatibility with existing pages. Prefer `Callout` in new docs.
 
 <Badge variant="primary">Content Enhancement</Badge>
 
 #### Live Example
 
 <CalloutBox type="info" title="Did You Know?">
-CalloutBox offers an alternative styling to the standard Callout component.
-</CalloutBox>
-
-<CalloutBox type="success" title="Best Practice">
-Always validate user input before processing.
+CalloutBox renders identically to Callout.
 </CalloutBox>
 
 #### Props
 
 Same as Callout component.
 
-#### Usage
-
-```jsx
-<CalloutBox type="info" title="Note">
-  Content here
-</CalloutBox>
-```
-
 ---
 
 ## Icon Gallery

website/docs/foundations/onchain-contract-library.mdx

@@ -36,7 +36,7 @@ For your next project, instead of deploying new contracts, simply **use the exis
 
 
 <Callout type="tip" title="Key Insight">
-Compose is a general purpose **on-chain** smart contract library. 
+Compose is a general-purpose smart contract framework with a reusable **on-chain** library.
 </Callout>
 
 <Callout type="warning" title="In Development">

website/docs/intro.mdx

@@ -1,9 +1,9 @@
 ---
 sidebar_position: 1
 slug: /
-title: "Smart Contract Library for ERC-2535 / ERC-8153 Diamonds"
+title: "Smart Contract Development Framework for Diamonds"
 sidebar_label: "Introduction"
-description: Compose is a smart contract library for building smart contract systems using the ERC-2535 Diamond standard.
+description: Compose is a smart contract development framework for building modular, readable smart contract systems with ERC-2535 Diamonds.
 ---
 
 import DocSubtitle from '@site/src/components/docs/DocSubtitle';
@@ -14,24 +14,21 @@ import FeatureGrid, { FeatureGridItem } from '@site/src/components/features/Feat
 # Introduction to Compose
 
 <DocSubtitle>
-**Compose** is a smart contract library that helps developers build smart contract systems using the [ERC-2535 Diamond](https://eips.ethereum.org/EIPS/eip-2535) standard. It's designed from the ground up for **code clarity**, **reusability**, and **on-chain composability**.
+**Compose** is the smart contract development framework for building modular systems with the [ERC-2535 Diamond](https://eips.ethereum.org/EIPS/eip-2535) standard. It brings together a reusable Solidity library, a project-scaffolding CLI, and design patterns for **clear, composable, upgradeable code**.
 </DocSubtitle>
 
 ## The Vision
 
-Imagine a verified, standard library of **on-chain smart contract components** —
-each one small, self-contained, and reusable like LEGO blocks.
+Smart contract systems grow faster than a single contract can stay understandable. Compose breaks functionality into **small, self-contained facets** and gives you the modules, CLI, and conventions to assemble them into a system.
 
-Deployed once, trusted by all, and combined in endless ways to create new systems.
-
-That's **Compose** — where your unique value and functionality connects seamlessly with simple, transparent, on-chain building blocks.
+That's **Compose**: a framework for shipping your unique protocol logic on top of simple, reusable building blocks.
 
 ## Why Choose Compose?
 
 <FeatureGrid columns={2}>
   <FeatureGridItem
-    title="On-chain Standard Library"
-    description="(Not yet, in the future) - Access verified, audited smart contracts deployed once and reused across multiple diamonds on multiple blockchains."
+    title="Reusable Solidity Building Blocks"
+    description="Start with focused facets and modules for common smart contract functionality, then extend them with your own logic."
   />
   <FeatureGridItem
     title="Composable Architecture"
@@ -46,18 +43,18 @@ That's **Compose** — where your unique value and functionality connects seamle
     description="Full power of ERC-2535 Diamonds means your contracts can evolve without full redeployment."
   />
   <FeatureGridItem
-    title="Battle-Tested Patterns"
-    description="Community-reviewed implementations following proven best practices and security standards."
+    title="Smart Contract Oriented Programming"
+    description="Use conventions and intentional constraints designed for readable, maintainable smart contract code."
   />
   <FeatureGridItem
-    title="Developer Experience"
-    description="Intuitive APIs, comprehensive documentation, and helpful libraries make development a breeze."
+    title="A Faster Starting Point"
+    description="Scaffold a diamond project with the Compose CLI, then develop with Foundry or Hardhat."
   />
 </FeatureGrid>
 
 ## Types of Smart Contract Systems
 
-Compose is a general purpose smart contract library that can be used to build a wide variety of systems, including small, large, upgradeable and immutable smart contract systems.
+Compose is a general-purpose framework for building small or large smart contract systems, including upgradeable and immutable systems.
 
 However Compose **shines** when building these types of systems:
 
@@ -71,7 +68,7 @@ However Compose **shines** when building these types of systems:
 
 ## Perfect For
 
-Our smart contract library is perfect for:
+Compose is a strong fit for:
 - **DeFi Protocols**: Build financial products with composable, upgradeable components
 - **NFT Platforms**: Create custom marketplaces and collections with flexible, reusable logic
 - **DAO Governance**: Implement voting and proposal systems that can evolve over time
@@ -131,4 +128,4 @@ Compose is built with 🩵 by a vibrant community of developers who care about t
     external={true}
     size="small"
   />
-</DocCardGrid>
+</DocCardGrid>

website/docusaurus.config.js

@@ -21,7 +21,7 @@ dotenv.config();
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Compose',
-  tagline: 'Smart Contract Oriented Programming for ERC-2535 Diamonds',
+  tagline: 'The smart contract development framework for modular diamond systems',
   favicon: 'img/favicon.ico',
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
@@ -117,7 +117,7 @@ const config = {
         '@type': 'WebSite',
         name: 'Compose',
         url: 'https://compose.diamonds/',
-        about: "Modular Smart Contract Library for ERC-2535 / ERC-8153 diamond proxies",
+         about: "Smart contract development framework for modular ERC-2535 / ERC-8153 diamond systems",
         author: "Perfect Abstractions & the Compose Community",
         potentialAction: {
           '@type': 'SearchAction',
@@ -318,7 +318,7 @@ const config = {
           },
         ],
         copyright: `Made with DELEGATECALL by the <a href="https://github.com/Perfect-Abstractions/Compose/graphs/contributors">Compose Community</a>.<br/>
-          Copyright © ${new Date().getFullYear()}`,
+          Copyright © ${new Date().getFullYear()} · An initiative of <a href="https://www.perfectabstractions.com">Perfect Abstractions</a> & <a href="https://sapient.sh">Sapient Labs</a>`,
       },
       prism: {
         theme: prismThemes.github,

website/src/components/DiamondScene/FacetBadge.js

@@ -1,13 +1,23 @@
 import React from 'react';
+import Link from '@docusaurus/Link';
 import styles from './facetBadge.module.css';
 
-export function FacetBadge({ name, visible }) {
+export function FacetBadge({ facet, visible, onMouseEnter, onMouseLeave }) {
   return (
-    <div className={`${styles.badgeContainer} ${visible ? styles.visible : ''}`}>
+    <div
+      className={`${styles.badgeContainer} ${visible ? styles.visible : ''}`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
       <div className={styles.badgeLabel}>Active Facet</div>
-      <div className={styles.badgeValue}>{name || '...'}</div>
+      {facet && facet.path ? (
+        <Link className={styles.badgeValue} to={facet.path}>
+          {facet.name}
+        </Link>
+      ) : (
+        <div className={styles.badgeValue}>{facet ? facet.name : '...'}</div>
+      )}
       <div className={styles.badgeLine}></div>
     </div>
   );
 }
-

website/src/components/DiamondScene/facetBadge.module.css

@@ -14,6 +14,7 @@
 .visible {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto;
 }
 
 .badgeLabel {
@@ -27,13 +28,22 @@
 }
 
 .badgeValue {
+  display: block;
   font-size: 1.25rem;
   font-weight: 700;
   color: #fff;
   text-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
   background: linear-gradient(to right, #fff, #bfdbfe);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition: filter 0.2s ease;
+}
+
+.badgeValue:hover {
+  filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.9));
+  text-decoration: underline;
 }
 
 .badgeLine {

website/src/components/DiamondScene/index.js

@@ -4,7 +4,7 @@ import gsap from 'gsap';
 import { DiamondShader, ParticleShader, FacetHighlightShader } from './shaders';
 import { createDiamondGeometry, addFacetIds } from './geometry';
 
-export default function DiamondScene({ className, onHoverChange, inline = false }) {
+export default function DiamondScene({ className, onHoverChange, onFacetClick, inline = false }) {
   const canvasContainerRef = useRef(null);
 
   useEffect(() => {
@@ -180,6 +180,15 @@ export default function DiamondScene({ className, onHoverChange, inline = false
 
     window.addEventListener('mousemove', onMouseMove);
 
+    // Click a hovered facet to open its documentation page
+    const onClick = () => {
+      if (inline || window.innerWidth <= 1024) return;
+      if (currentHoverId !== -1 && onFacetClick) {
+        onFacetClick(currentHoverId);
+      }
+    };
+    renderer.domElement.addEventListener('click', onClick);
+
     // Time Uniform & Loop
     const clock = new THREE.Clock();
     let animationId;
@@ -234,6 +243,13 @@ export default function DiamondScene({ className, onHoverChange, inline = false
       }
 
       renderer.render(scene, camera);
+
+      // Facet hover is driven by window mousemove; the canvas stays behind the
+      // hero overlays (which are pointer-events: none) and only accepts clicks
+      // while a facet is hovered.
+      const facetHovered = !inline && window.innerWidth > 1024 && currentHoverId !== -1;
+      renderer.domElement.style.cursor = facetHovered ? 'pointer' : 'default';
+      renderer.domElement.style.pointerEvents = facetHovered ? 'auto' : 'none';
     };
     animate();
 
@@ -270,6 +286,7 @@ export default function DiamondScene({ className, onHoverChange, inline = false
     return () => {
       window.removeEventListener('resize', handleResize);
       window.removeEventListener('mousemove', onMouseMove);
+      renderer.domElement.removeEventListener('click', onClick);
       cancelAnimationFrame(animationId);
       if (container && renderer.domElement && container.contains(renderer.domElement)) {
         container.removeChild(renderer.domElement);
@@ -280,7 +297,7 @@ export default function DiamondScene({ className, onHoverChange, inline = false
       particlesGeometry.dispose(); 
       renderer.dispose();
     };
-  }, [onHoverChange, inline]); // Depend on callback and inline
+  }, [onHoverChange, onFacetClick, inline]); // Depend on callbacks and inline
 
   return <div className={className} ref={canvasContainerRef} />;
 }