feat: implement loadWebdggrid utility for dynamic loading of Webdggrid class and update components to use it

Author: am2222

docs/.vitepress/theme/components/DggsAddressTypesDemo.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { loadWebdggrid } from '../utils/loadWebdggrid.js'
 
 const svgRef = ref(null)
 const info = ref('')
@@ -41,7 +42,7 @@ let d3 = null
 
 onMounted(async () => {
   await loadScript('https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js')
-  const { Webdggrid } = await import('webdggrid')
+  const Webdggrid = await loadWebdggrid()
   dggs = await Webdggrid.load()
   d3 = window.d3
   applySettings()

docs/.vitepress/theme/components/DggsD3Globe.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { VPButton } from 'vitepress/theme'
+import { loadWebdggrid } from '../utils/loadWebdggrid.js'
 
 const props = defineProps({
   resolution:      { type: Number,  default: 3 },
@@ -245,7 +246,7 @@ onMounted(async () => {
 
   try {
     await loadScript('https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js')
-    const { Webdggrid } = await new Function('return import("https://cdn.jsdelivr.net/npm/webdggrid/dist/index.js")')()
+    const Webdggrid = await loadWebdggrid()
     webdggrid = await Webdggrid.load()
 
     const rect = wrapRef.value.getBoundingClientRect()

docs/.vitepress/theme/components/DggsD3HierarchyDemo.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { loadWebdggrid } from '../utils/loadWebdggrid.js'
 
 const svgRef = ref(null)
 const info = ref('')
@@ -38,7 +39,7 @@ let d3 = null
 
 onMounted(async () => {
   await loadScript('https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js')
-  const { Webdggrid } = await import('webdggrid')
+  const Webdggrid = await loadWebdggrid()
   dggs = await Webdggrid.load()
   d3 = window.d3
   applySettings()

docs/.vitepress/theme/components/DggsGlobe.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
 import { ylOrBrRgba, processFcForGlobe } from '../utils/globeUtils.js'
+import { loadWebdggrid } from '../utils/loadWebdggrid.js'
 
 const props = defineProps({
   /** Show OSM raster basemap */
@@ -547,7 +548,7 @@ onMounted(async () => {
       loadScript('https://unpkg.com/deck.gl@9/dist.min.js'),
     ])
 
-    const { Webdggrid } = await import('webdggrid')
+    const Webdggrid = await loadWebdggrid()
 
     const isDark = document.documentElement.classList.contains('dark')
 

docs/.vitepress/theme/utils/loadWebdggrid.js

@@ -0,0 +1,16 @@
+/**
+ * Load the Webdggrid class, trying the local build first (available in dev via
+ * Vite alias) and falling back to the jsDelivr CDN for production builds.
+ */
+export async function loadWebdggrid() {
+  try {
+    const mod = await import('webdggrid')
+    if (mod.Webdggrid) return mod.Webdggrid
+  } catch { /* local build not available */ }
+
+  // Fallback: CDN (works in production where the Vite alias doesn't exist)
+  const mod = await new Function(
+    'return import("https://cdn.jsdelivr.net/npm/webdggrid/dist/webdggrid.js")'
+  )()
+  return mod.Webdggrid
+}

docs/getting-started.md

@@ -83,7 +83,10 @@ const distkm    = dggs.cellDistKM(3);   // average cell spacing in km
 
 ## Live Demo
 
-See the [interactive globe demo](/demo) for a live example with topology switching, multi-aperture grids, hierarchical cell selection, and drag-to-rotate.
+- [Globe Demo](/demo) — interactive MapLibre globe with topology switching, multi-aperture grids, and hierarchical cell selection
+- [Hierarchical Operations Demo](/hierarchical-operations#interactive-demo) — explore parent, children, and neighbor relationships
+- [Address Types Demo](/hierarchical-addresses#interactive-demo) — compare index types and see bitwise digit breakdowns
+- [Index Arithmetic Demo](/index-arithmetic#interactive-demo) — live demonstration of digit manipulation on Z3, Z7, and ZORDER indices
 
 ## API Overview
 

readme.md

@@ -59,6 +59,13 @@ const seqNum = dggs.geoToSequenceNum([[0, 0]]);
 ```
 
 
+## Live Demos
+
+- [Globe Demo](https://am2222.github.io/webDggrid/demo) — interactive MapLibre globe with topology switching, multi-aperture grids, and hierarchical cell selection
+- [Hierarchical Operations Demo](https://am2222.github.io/webDggrid/hierarchical-operations#interactive-demo) — explore parent, children, and neighbor relationships
+- [Address Types Demo](https://am2222.github.io/webDggrid/hierarchical-addresses#interactive-demo) — compare index types and see bitwise digit breakdowns
+- [Index Arithmetic Demo](https://am2222.github.io/webDggrid/index-arithmetic#interactive-demo) — live demonstration of digit manipulation on Z3, Z7, and ZORDER indices
+
 ## API
 
 ### Lifecycle