add packageImport component

website/docs/library/diamond/DiamondInspectFacet.mdx

@@ -11,6 +11,9 @@ import Callout from '@site/src/components/ui/Callout';
 import PropertyTable from '@site/src/components/api/PropertyTable';
 import ExpandableCode from '@site/src/components/code/ExpandableCode';
 import LastUpdated from '@site/src/components/docs/LastUpdated';
+import PackageImport from '@site/src/components/docs/PackageImport';
+
+<PackageImport importName="DiamondInspectFacet" gitSource="https://github.com/Perfect-Abstractions/Compose/tree/main/src/diamond/DiamondInspectFacet.sol" />
 
 <DocSubtitle>
 It lets you inspect the diamond’s routing table and retrieve the registered facet list.

website/docs/library/diamond/DiamondMod.mdx

@@ -17,6 +17,9 @@ import RelatedDocs from '@site/src/components/docs/RelatedDocs';
 import WasThisHelpful from '@site/src/components/docs/WasThisHelpful';
 import LastUpdated from '@site/src/components/docs/LastUpdated';
 import ReadingTime from '@site/src/components/docs/ReadingTime';
+import PackageImport from '@site/src/components/docs/PackageImport';
+
+<PackageImport importName="DiamondModule" gitSource="https://github.com/Perfect-Abstractions/Compose/tree/main/src/diamond/DiamondMod.sol" />
 
 <DocSubtitle>
 This module provides core internal functions and storage management for diamond proxies.

website/docs/library/diamond/DiamondUpgradeFacet.mdx

@@ -13,6 +13,9 @@ import PropertyTable from '@site/src/components/api/PropertyTable';
 import ExpandableCode from '@site/src/components/code/ExpandableCode';
 import LastUpdated from '@site/src/components/docs/LastUpdated';
 import StepIndicator from '@site/src/components/docs/StepIndicator';
+import PackageImport from '@site/src/components/docs/PackageImport';
+
+<PackageImport importName="DiamondUpgradeFacet" gitSource="https://github.com/Perfect-Abstractions/Compose/tree/main/src/diamond/DiamondUpgradeFacet.sol" />
 
 <DocSubtitle>
 Orchestrates upgrade functionality, enabling the addition, replacement, and removal of facets.

website/docs/library/diamond/DiamondUpgradeMod.mdx

@@ -15,6 +15,9 @@ import ExpandableCode from '@site/src/components/code/ExpandableCode';
 import WasThisHelpful from '@site/src/components/docs/WasThisHelpful';
 import LastUpdated from '@site/src/components/docs/LastUpdated';
 import StepIndicator from '@site/src/components/docs/StepIndicator';
+import PackageImport from '@site/src/components/docs/PackageImport';
+
+<PackageImport importName="DiamondUpgradeMod" gitSource="https://github.com/Perfect-Abstractions/Compose/tree/main/src/diamond/DiamondUpgradeMod.sol" />
 
 <DocSubtitle>
 Module providing the internal functions to extend the diamond's upgrade functionality by adding, replacing, or removing facets.

website/docusaurus.config.js

@@ -206,13 +206,18 @@ const config = {
           //   ],
           // },
           {
-            type: 'custom-githubStars',
+            type: 'custom-icon',
             position: 'right',
+            href: 'https://github.com/Perfect-Abstractions/Compose',
+            iconSrc: '/icons/github-white.svg',
+            label: 'GitHub',
           },
           {
+            type: 'custom-icon',
+            position: 'right',
             href: 'https://discord.gg/DCBD2UKbxc',
+            iconSrc: '/icons/discord-white.svg',
             label: 'Discord',
-            position: 'right',
           },
         ],
       },
@@ -345,7 +350,7 @@ const config = {
               enableInDevelopment: false,
               capturePageLeave: true,
               defaults: '2026-01-30',
-              cookieless_mode: 'on_reject',
+              cookieless_mode: 'always',
             },
           ],
         ]

website/src/components/docs/PackageImport/index.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+function getRelativePath(gitSource) {
+  const marker = '/tree/main/src/';
+  const idx = gitSource.indexOf(marker);
+  if (idx === -1) return '';
+  const after = gitSource.slice(idx + marker.length);
+  return after;
+}
+
+export default function PackageImport({ gitSource }) {
+  const [copied, setCopied] = useState(false);
+
+  if (!gitSource) return null;
+
+  const relPath = getRelativePath(gitSource);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(`@perfect-abstractions/compose/${relPath}`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // silent
+    }
+  };
+
+  return (
+    <div className={styles.packageImport}>
+      <code className={styles.code}>
+       {`@perfect-abstractions/compose/${relPath}`}
+      </code>
+      <button
+        className={styles.copyButton}
+        onClick={handleCopy}
+        aria-label="Copy import"
+        title="Copy import"
+      >
+        {copied ? '✓ Copied' : 'Copy'}
+      </button>
+    </div>
+  );
+}

website/src/components/docs/PackageImport/styles.module.css

@@ -0,0 +1,101 @@
+.packageImport {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 1rem;
+}
+
+.label {
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-500);
+  user-select: none;
+}
+
+.code {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  white-space: pre;
+  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-background-surface-color);
+}
+
+.copyButton {
+  flex-shrink: 0;
+  padding: 0.25rem 0.625rem;
+  background: transparent;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 0.25rem;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.copyButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-800);
+}
+
+.keyword {
+  color: #d946ef;
+}
+
+.brace {
+  color: var(--ifm-color-emphasis-700);
+}
+
+.name {
+  color: #06b6d4;
+}
+
+.string {
+  color: #10b981;
+}
+
+.semicolon {
+  color: var(--ifm-color-emphasis-600);
+}
+
+[data-theme='dark'] .packageImport {
+  border-color: #1e293b;
+  background: #0f172a;
+}
+
+[data-theme='dark'] .label {
+  color: #64748b;
+}
+
+[data-theme='dark'] .copyButton {
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+[data-theme='dark'] .copyButton:hover {
+  background: #334155;
+  color: #ffffff;
+}
+
+@media (max-width: 768px) {
+  .packageImport {
+    border-radius: 0.375rem;
+    flex-wrap: wrap;
+  }
+
+  .label {
+    width: 100%;
+    margin-bottom: -0.25rem;
+  }
+
+  .code {
+    width: 100%;
+  }
+
+  .copyButton {
+    margin-left: auto;
+  }
+}