From 0f4b5f3d252e5984eddee4a1bc5a84b15eb6a5ca Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Wed, 22 Jul 2026 16:22:26 -0700
Subject: [PATCH 1/2] chore(visimer/site): subtler CodeCard scrollbars (#2855)

The OS default scrollbars stood out against the dark card chrome. Ties scrollbar-width thin + a color that reads as the card border (#2E2A22) so they recede into the surface.

GitOrigin-RevId: 430562e120e4997ed9ee3a17bcc661151ca57734
---
 apps/site/src/App.tsx  |  1 +
 apps/site/src/site.css | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index e034279..c38bee6 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -212,6 +212,7 @@ function CodeCard({ title, children }: { title: string; children: ReactNode }) {
       </div>
       <pre
         ref={preRef}
+        className="code-card-scroll"
         style={{
           margin: 0,
           padding: '18px 16px',
diff --git a/apps/site/src/site.css b/apps/site/src/site.css
index cea9251..a942b08 100644
--- a/apps/site/src/site.css
+++ b/apps/site/src/site.css
@@ -178,3 +178,26 @@ textarea {
     gap: 10px !important;
   }
 }
+
+/* CodeCard scrollbars: subtle, tinted to the card chrome (bg #1E1B16, border #2E2A22). */
+.code-card-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #2E2A22 transparent;
+}
+.code-card-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.code-card-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.code-card-scroll::-webkit-scrollbar-thumb {
+  background: #2E2A22;
+  border-radius: 99px;
+}
+.code-card-scroll::-webkit-scrollbar-thumb:hover {
+  background: #3A362D;
+}
+.code-card-scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}

From b937f0d87d13248e06a3f4c9b641878596a21308 Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Wed, 22 Jul 2026 16:43:12 -0700
Subject: [PATCH 2/2] chore(visimer/site): make install target obvious in each
 code card (#2856)

Vanilla, CodeMirror, and Monaco cards jumped straight into JS with no
install line. Adds a leading '# npm i @visimer/...' to each and full
package names in the card titles. Vanilla also shows the two imports
(@visimer/core + @visimer/dom) instead of using bare symbols.

GitOrigin-RevId: 211a200386ec8ddbe5f2ff6015378f6938290ed8
---
 apps/site/src/App.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index c38bee6..20f1a5d 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -955,9 +955,17 @@ export default function App() {
               {'\n\n'}&lt;<span style={ident}>MermaidWysiwyg</span> <span style={str}>code</span>={'{diagram}'}{' '}
               <span style={str}>onCodeChange</span>={'{setDiagram}'} <span style={str}>mermaid</span>={'{mermaid}'} /&gt;
             </CodeCard>
-            <CodeCard title="Vanilla · -core + -dom">
-              <span style={cmt}># framework-free canvas, any app</span>
+            <CodeCard title="Vanilla · @visimer/core + @visimer/dom">
+              <span style={cmt}># npm i @visimer/core @visimer/dom mermaid</span>
               {'\n'}
+              <span style={kw}>import</span> mermaid <span style={kw}>from</span> <span style={str}>'mermaid'</span>
+              {'\n'}
+              <span style={kw}>import</span> {'{ MermaidWysiwygEditor }'} <span style={kw}>from</span>{' '}
+              <span style={str}>'@visimer/core'</span>
+              {'\n'}
+              <span style={kw}>import</span> {'{ MermaidCanvasView }'} <span style={kw}>from</span>{' '}
+              <span style={str}>'@visimer/dom'</span>
+              {'\n\n'}
               <span style={kw}>const</span> editor = <span style={kw}>new</span> <span style={ident}>MermaidWysiwygEditor</span>({'{ '}
               <span style={str}>code</span>
               {' }'})
@@ -965,12 +973,9 @@ export default function App() {
               <span style={kw}>new</span> <span style={ident}>MermaidCanvasView</span>({'{ '}
               <span style={str}>editor</span>, <span style={str}>container</span>, <span style={str}>mermaid</span>
               {' }'})
-              {'\n'}editor.<span style={ident}>on</span>(<span style={str}>'change'</span>, ({'{ '}
-              <span style={str}>code</span>
-              {' }'}) =&gt; <span style={ident}>save</span>(code))
             </CodeCard>
-            <CodeCard title="CodeMirror pane · -codemirror">
-              <span style={cmt}># the source pane in the playground above</span>
+            <CodeCard title="CodeMirror pane · @visimer/codemirror">
+              <span style={cmt}># npm i @visimer/codemirror</span>
               {'\n'}
               <span style={kw}>import</span> {'{ MermaidCodeMirror }'} <span style={kw}>from</span>{' '}
               <span style={str}>'@visimer/codemirror'</span>
@@ -979,8 +984,8 @@ export default function App() {
               {'\n'}
               <span style={cmt}># typing, highlights, undo, all shared with the canvas</span>
             </CodeCard>
-            <CodeCard title="Monaco · -monaco">
-              <span style={cmt}># bring your own monaco instance; zero monaco dependency</span>
+            <CodeCard title="Monaco · @visimer/monaco">
+              <span style={cmt}># npm i @visimer/monaco  (bring your own monaco instance)</span>
               {'\n'}
               <span style={kw}>import</span> {'{ bindMonaco }'} <span style={kw}>from</span>{' '}
               <span style={str}>'@visimer/monaco'</span>