@fjell/registry 4.4.9 → 4.4.11

package/docs/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import remarkGfm from 'remark-gfm'
 import './App.css'
 
@@ -14,10 +14,10 @@ interface DocumentSection {
 }
 
 const documentSections: DocumentSection[] = [
-  { id: 'overview', title: 'Foundation', subtitle: 'Core concepts & philosophy', file: '/README.md' },
-  { id: 'getting-started', title: 'Getting Started', subtitle: 'Your first steps with Fjell', file: '/fjell-registry/examples-README.md' },
-  { id: 'examples', title: 'Examples', subtitle: 'Code examples & usage patterns', file: '/fjell-registry/examples-README.md' },
-  { id: 'performance', title: 'Performance', subtitle: 'Memory, timing & optimization', file: '/memory.md' }
+  { id: 'overview', title: 'Foundation', subtitle: 'Core concepts & philosophy', file: '/registry/README.md' },
+  { id: 'getting-started', title: 'Getting Started', subtitle: 'Your first steps with Fjell', file: '/registry/examples-README.md' },
+  { id: 'examples', title: 'Examples', subtitle: 'Code examples & usage patterns', file: '/registry/examples-README.md' },
+  { id: 'performance', title: 'Performance', subtitle: 'Memory, timing & optimization', file: '/registry/memory.md' }
 ];
 
 const App: React.FC = () => {
@@ -26,6 +26,7 @@ const App: React.FC = () => {
   const [loading, setLoading] = useState(true)
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [fullscreenImage, setFullscreenImage] = useState<string | null>(null)
+  const [version, setVersion] = useState<string>('4.4.10')
 
   useEffect(() => {
     const loadDocuments = async () => {
@@ -51,7 +52,25 @@ const App: React.FC = () => {
       setLoading(false)
     }
 
+    const loadVersion = async () => {
+      try {
+        const response = await fetch('/registry/package.json')
+        if (response.ok) {
+          const packageData = await response.json()
+          setVersion(packageData.version)
+          console.log('Version loaded:', packageData.version)
+        } else {
+          console.error('Failed to fetch package.json:', response.status)
+          setVersion('4.4.10') // Fallback version
+        }
+      } catch (error) {
+        console.error('Error loading version:', error)
+        setVersion('4.4.10') // Fallback version
+      }
+    }
+
     loadDocuments()
+    loadVersion()
   }, [])
 
   const getFallbackContent = (sectionId: string): string => {
@@ -206,7 +225,16 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
 
           <div className="header-actions">
             <a
-              href="https://github.com/getfjell/fjell-registry"
+              href={`https://github.com/getfjell/registry/releases/tag/v${version}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="version-badge"
+              title={`Release v${version}`}
+            >
+              v{version}
+            </a>
+            <a
+              href="https://github.com/getfjell/registry"
               target="_blank"
               rel="noopener noreferrer"
               className="header-link"
@@ -236,11 +264,6 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
       <div className="layout">
         <nav className={`sidebar ${sidebarOpen ? 'sidebar-open' : ''}`}>
           <div className="nav-content">
-            <div className="nav-header">
-              <h3 className="nav-title">Explore</h3>
-              <p className="nav-subtitle">Navigate through concepts</p>
-            </div>
-
             <div className="nav-sections">
               {documentSections.map((section) => (
                 <button
@@ -261,7 +284,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
 
             {/* Artistic Logo Placement */}
             <img
-              src="/fjell-registry/icon.png"
+              src="/registry/icon.png"
               alt="Fjell Registry"
               className="fjell-logo"
               title="Fjell Registry - Service location that weaves through the mist"
@@ -314,7 +337,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             const match = /language-(\w+)/.exec(className || '')
                             return !props.inline && match ? (
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language={match[1]}
                                 PreTag="div"
                                 {...props}
@@ -349,7 +372,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             <summary>View Code</summary>
                             <div className="example-code-block">
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language="bash"
                                 PreTag="div"
                               >
@@ -366,7 +389,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             <summary>View Code</summary>
                             <div className="example-code-block">
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language="bash"
                                 PreTag="div"
                               >
@@ -383,7 +406,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             <summary>View Code</summary>
                             <div className="example-code-block">
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language="bash"
                                 PreTag="div"
                               >
@@ -394,13 +417,13 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                         </div>
 
                         <div className="example-card">
-                          <h3>🔍 Coordinate Discovery</h3>
+                          <h3>Coordinate Discovery</h3>
                           <p>Service introspection and discovery patterns.</p>
                           <details>
                             <summary>View Code</summary>
                             <div className="example-code-block">
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language="bash"
                                 PreTag="div"
                               >
@@ -417,7 +440,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             <summary>View Code</summary>
                             <div className="example-code-block">
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language="bash"
                                 PreTag="div"
                               >
@@ -437,7 +460,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                             const match = /language-(\w+)/.exec(className || '')
                             return !props.inline && match ? (
                               <SyntaxHighlighter
-                                style={oneDark as { [key: string]: React.CSSProperties }}
+                                style={oneLight as { [key: string]: React.CSSProperties }}
                                 language={match[1]}
                                 PreTag="div"
                                 {...props}
@@ -467,20 +490,20 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                         <div className="svg-display">
                           <h3>Memory Overhead Analysis</h3>
                           <img
-                            src="/fjell-registry/memory-overhead.svg"
+                            src="/registry/memory-overhead.svg"
                             alt="Memory Overhead Chart"
                             className="performance-chart clickable-chart"
-                            onClick={() => setFullscreenImage('/fjell-registry/memory-overhead.svg')}
+                            onClick={() => setFullscreenImage('/registry/memory-overhead.svg')}
                             title="Click to view full screen"
                           />
                         </div>
                         <div className="svg-display">
                           <h3>Timing Performance Analysis</h3>
                           <img
-                            src="/fjell-registry/timing-range.svg"
+                            src="/registry/timing-range.svg"
                             alt="Timing Performance Chart"
                             className="performance-chart clickable-chart"
-                            onClick={() => setFullscreenImage('/fjell-registry/timing-range.svg')}
+                            onClick={() => setFullscreenImage('/registry/timing-range.svg')}
                             title="Click to view full screen"
                           />
                         </div>
@@ -494,7 +517,7 @@ Recommended Node.js heap size settings and monitoring approaches for large-scale
                           const match = /language-(\w+)/.exec(className || '')
                           return !props.inline && match ? (
                             <SyntaxHighlighter
-                              style={oneDark as { [key: string]: React.CSSProperties }}
+                              style={oneLight as { [key: string]: React.CSSProperties }}
                               language={match[1]}
                               PreTag="div"
                               {...props}

package/docs/src/index.css

@@ -31,10 +31,4 @@ code {
   font-size: 0.875em;
 }
 
-pre code {
-  display: block;
-  padding: 1rem;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background-color: #1e293b !important;
-}
+/* Removed conflicting pre code styles - handled in App.css */

package/docs/timing-range.svg

@@ -31,18 +31,16 @@
   <g transform="translate(110,60)">
 
     <!-- Grid lines (logarithmic scale) -->
-    <line x1="0" y1="414.21183286644987" x2="1015" y2="414.21183286644987" class="grid"/>
-    <text x="-10" y="418.21183286644987" text-anchor="end" class="label">0.10µs</text>
-    <line x1="0" y1="359.62470346155027" x2="1015" y2="359.62470346155027" class="grid"/>
-    <text x="-10" y="363.62470346155027" text-anchor="end" class="label">0.20µs</text>
-    <line x1="0" y1="287.46444348196144" x2="1015" y2="287.46444348196144" class="grid"/>
-    <text x="-10" y="291.46444348196144" text-anchor="end" class="label">0.50µs</text>
-    <line x1="0" y1="232.87731407706184" x2="1015" y2="232.87731407706184" class="grid"/>
-    <text x="-10" y="236.87731407706184" text-anchor="end" class="label">1.0µs</text>
-    <line x1="0" y1="178.29018467216224" x2="1015" y2="178.29018467216224" class="grid"/>
-    <text x="-10" y="182.29018467216224" text-anchor="end" class="label">2.0µs</text>
-    <line x1="0" y1="106.12992469257341" x2="1015" y2="106.12992469257341" class="grid"/>
-    <text x="-10" y="110.12992469257341" text-anchor="end" class="label">5.0µs</text>
+    <line x1="0" y1="412.29916951650193" x2="1015" y2="412.29916951650193" class="grid"/>
+    <text x="-10" y="416.29916951650193" text-anchor="end" class="label">0.20µs</text>
+    <line x1="0" y1="313.6934353383697" x2="1015" y2="313.6934353383697" class="grid"/>
+    <text x="-10" y="317.6934353383697" text-anchor="end" class="label">0.50µs</text>
+    <line x1="0" y1="239.10107697977517" x2="1015" y2="239.10107697977517" class="grid"/>
+    <text x="-10" y="243.10107697977517" text-anchor="end" class="label">1.0µs</text>
+    <line x1="0" y1="164.50871862118066" x2="1015" y2="164.50871862118066" class="grid"/>
+    <text x="-10" y="168.50871862118066" text-anchor="end" class="label">2.0µs</text>
+    <line x1="0" y1="65.90298444304835" x2="1015" y2="65.90298444304835" class="grid"/>
+    <text x="-10" y="69.90298444304835" text-anchor="end" class="label">5.0µs</text>
     <line x1="0" y1="0" x2="0" y2="460" class="grid"/>
     <text x="0" y="480" text-anchor="middle" class="label">10</text>
     <line x1="76.38636139973525" y1="0" x2="76.38636139973525" y2="460" class="grid"/>
@@ -78,34 +76,34 @@
     <!-- Axis labels -->
     <text x="507.5" y="510" text-anchor="middle" class="axis-title">Tree Size (items) - Log Scale</text>
     <text transform="rotate(-90,-70,230)" x="-70" y="230" text-anchor="middle" class="axis-title">Execution Time (µs)</text>
-    <path d="M 0 54.5871294048996 L 76.38636139973525 204.52223211454054 L 177.36363860026475 106.51935671032135 L 253.75 195.52814972290633 L 330.1363613997352 113.59480588788551 L 431.1136386002648 163.00101388142247 L 507.5 168.64530111783552 L 583.8863613997353 168.02389006721552 L 684.8636386002647 181.3006947529126 L 761.25 184.74259304128134 L 837.6363613997353 223.36673887164602 L 938.6136386002647 205.81985515489995 L 1015 213.90171946899312" class="register-mean"/>
-    <path d="M 0 384.9149488624966 L 76.38636139973525 389.00373120422694 L 177.36363860026475 398.33522029914974 L 253.75 405.4128705951004 L 330.1363613997352 403.43324668188495 L 431.1136386002648 395.4950539384694 L 507.5 378.3221393445412 L 583.8863613997353 349.59171308701286 L 684.8636386002647 357.5457555145213 L 761.25 309.89073610809453 L 837.6363613997353 343.0099722607768 L 938.6136386002647 344.3996689209627 L 1015 339.77636216178064" class="lookup-mean"/>
-    <circle cx="0" cy="54.5871294048996" r="4" class="register-dot"/>
-    <circle cx="76.38636139973525" cy="204.52223211454054" r="4" class="register-dot"/>
-    <circle cx="177.36363860026475" cy="106.51935671032135" r="4" class="register-dot"/>
-    <circle cx="253.75" cy="195.52814972290633" r="4" class="register-dot"/>
-    <circle cx="330.1363613997352" cy="113.59480588788551" r="4" class="register-dot"/>
-    <circle cx="431.1136386002648" cy="163.00101388142247" r="4" class="register-dot"/>
-    <circle cx="507.5" cy="168.64530111783552" r="4" class="register-dot"/>
-    <circle cx="583.8863613997353" cy="168.02389006721552" r="4" class="register-dot"/>
-    <circle cx="684.8636386002647" cy="181.3006947529126" r="4" class="register-dot"/>
-    <circle cx="761.25" cy="184.74259304128134" r="4" class="register-dot"/>
-    <circle cx="837.6363613997353" cy="223.36673887164602" r="4" class="register-dot"/>
-    <circle cx="938.6136386002647" cy="205.81985515489995" r="4" class="register-dot"/>
-    <circle cx="1015" cy="213.90171946899312" r="4" class="register-dot"/>
-    <circle cx="0" cy="384.9149488624966" r="4" class="lookup-dot"/>
-    <circle cx="76.38636139973525" cy="389.00373120422694" r="4" class="lookup-dot"/>
-    <circle cx="177.36363860026475" cy="398.33522029914974" r="4" class="lookup-dot"/>
-    <circle cx="253.75" cy="405.4128705951004" r="4" class="lookup-dot"/>
-    <circle cx="330.1363613997352" cy="403.43324668188495" r="4" class="lookup-dot"/>
-    <circle cx="431.1136386002648" cy="395.4950539384694" r="4" class="lookup-dot"/>
-    <circle cx="507.5" cy="378.3221393445412" r="4" class="lookup-dot"/>
-    <circle cx="583.8863613997353" cy="349.59171308701286" r="4" class="lookup-dot"/>
-    <circle cx="684.8636386002647" cy="357.5457555145213" r="4" class="lookup-dot"/>
-    <circle cx="761.25" cy="309.89073610809453" r="4" class="lookup-dot"/>
-    <circle cx="837.6363613997353" cy="343.0099722607768" r="4" class="lookup-dot"/>
-    <circle cx="938.6136386002647" cy="344.3996689209627" r="4" class="lookup-dot"/>
-    <circle cx="1015" cy="339.77636216178064" r="4" class="lookup-dot"/>
+    <path d="M 0 157.55924815741787 L 76.38636139973525 126.42753078910948 L 177.36363860026475 177.0395980546661 L 253.75 177.4431441958942 L 330.1363613997352 74.59235835859454 L 431.1136386002648 215.28848088812296 L 507.5 203.30057713513293 L 583.8863613997353 223.48769483349545 L 684.8636386002647 183.78731982940542 L 761.25 169.99008890849518 L 837.6363613997353 209.69626189650964 L 938.6136386002647 218.58053800016756 L 1015 216.24755147833318" class="register-mean"/>
+    <path d="M 0 324.3673892741638 L 76.38636139973525 315.18634142867353 L 177.36363860026475 381.48922090776335 L 253.75 355.9527119595714 L 330.1363613997352 343.09451827354155 L 431.1136386002648 348.5718732774849 L 507.5 385.40764164140546 L 583.8863613997353 379.2023819207247 L 684.8636386002647 276.2747802628934 L 761.25 303.7074682141104 L 837.6363613997353 327.5244762452311 L 938.6136386002647 338.0668435914174 L 1015 343.61252483845533" class="lookup-mean"/>
+    <circle cx="0" cy="157.55924815741787" r="4" class="register-dot"/>
+    <circle cx="76.38636139973525" cy="126.42753078910948" r="4" class="register-dot"/>
+    <circle cx="177.36363860026475" cy="177.0395980546661" r="4" class="register-dot"/>
+    <circle cx="253.75" cy="177.4431441958942" r="4" class="register-dot"/>
+    <circle cx="330.1363613997352" cy="74.59235835859454" r="4" class="register-dot"/>
+    <circle cx="431.1136386002648" cy="215.28848088812296" r="4" class="register-dot"/>
+    <circle cx="507.5" cy="203.30057713513293" r="4" class="register-dot"/>
+    <circle cx="583.8863613997353" cy="223.48769483349545" r="4" class="register-dot"/>
+    <circle cx="684.8636386002647" cy="183.78731982940542" r="4" class="register-dot"/>
+    <circle cx="761.25" cy="169.99008890849518" r="4" class="register-dot"/>
+    <circle cx="837.6363613997353" cy="209.69626189650964" r="4" class="register-dot"/>
+    <circle cx="938.6136386002647" cy="218.58053800016756" r="4" class="register-dot"/>
+    <circle cx="1015" cy="216.24755147833318" r="4" class="register-dot"/>
+    <circle cx="0" cy="324.3673892741638" r="4" class="lookup-dot"/>
+    <circle cx="76.38636139973525" cy="315.18634142867353" r="4" class="lookup-dot"/>
+    <circle cx="177.36363860026475" cy="381.48922090776335" r="4" class="lookup-dot"/>
+    <circle cx="253.75" cy="355.9527119595714" r="4" class="lookup-dot"/>
+    <circle cx="330.1363613997352" cy="343.09451827354155" r="4" class="lookup-dot"/>
+    <circle cx="431.1136386002648" cy="348.5718732774849" r="4" class="lookup-dot"/>
+    <circle cx="507.5" cy="385.40764164140546" r="4" class="lookup-dot"/>
+    <circle cx="583.8863613997353" cy="379.2023819207247" r="4" class="lookup-dot"/>
+    <circle cx="684.8636386002647" cy="276.2747802628934" r="4" class="lookup-dot"/>
+    <circle cx="761.25" cy="303.7074682141104" r="4" class="lookup-dot"/>
+    <circle cx="837.6363613997353" cy="327.5244762452311" r="4" class="lookup-dot"/>
+    <circle cx="938.6136386002647" cy="338.0668435914174" r="4" class="lookup-dot"/>
+    <circle cx="1015" cy="343.61252483845533" r="4" class="lookup-dot"/>
     <!-- Legend -->
     <g transform="translate(20, 20)">
       <rect x="0" y="0" width="190" height="80" fill="white" stroke="#ccc" stroke-width="1"/>