[wip] Use constant font size in responsive svg viewbox

core/part/package.json

@@ -29,7 +29,10 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["./src", "./dist"],
+  "files": [
+    "./src",
+    "./dist"
+  ],
   "sideEffects": false,
   "scripts": {
     "build:pkg": "tsup src",
@@ -53,6 +56,7 @@
     "@villagekit/ui": "workspace:*",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.7",
+    "react-use-measure": "^2.1.1",
     "zod": "^3.23.8"
   },
   "peerDependencies": {

core/part/src/base/grid/svg/context.tsx

@@ -1,16 +1,32 @@
+import { Box } from '@villagekit/ui'
 import { createContext, useContext } from 'react'
+import useMeasure from 'react-use-measure'
 
 interface GridSvgContextProps {
   displayUnit: 'gu' | 'mm'
 }
 
-interface GridSvgContextType extends GridSvgContextProps {}
+interface GridSvgContextType extends GridSvgContextProps {
+  viewWidth: number
+}
 
 const GridSvgContext = createContext<GridSvgContextType | null>(null)
 
 export function GridSvgContextProvider(props: React.PropsWithChildren<GridSvgContextProps>) {
-  const { children, ...value } = props
-  return <GridSvgContext.Provider value={value}>{children}</GridSvgContext.Provider>
+  const { children, ...contextProps } = props
+
+  const [ref, bounds] = useMeasure()
+  const viewWidth = bounds.width
+
+  const value = { ...contextProps, viewWidth }
+
+  return (
+    <GridSvgContext.Provider value={value}>
+      <Box sx={{ width: '100%' }} ref={ref}>
+        {children}
+      </Box>
+    </GridSvgContext.Provider>
+  )
 }
 
 export function useGridSvgContext(): GridSvgContextType {

core/part/src/base/grid/svg/label.tsx

@@ -54,14 +54,17 @@ interface TextLabelXProps extends Omit<LabelXProps, 'value'> {
 export function TextLabelX(props: TextLabelXProps) {
   const { text, textAnchor = 'middle', color, x } = props
 
+  const { viewWidth } = useSvgContext()
   const { fontSizes } = useTheme()
 
   return (
     <text
       x={x}
       y={LABEL_Y_OFFSET_Y}
       fill={color}
-      fontSize={fontSizes['3xl']}
+      // NOTE (mw): https://florian.ec/blog/responsive-svg-constant-font-size/
+      // [font size] / ([view width] / [svg viewbox width])
+      fontSize={`calc(${fontSizes['lg']}/ (${viewWidth} / (40 * 62)))`}
       textAnchor={textAnchor}
     >
       {text}

parts/gridbeam/src/svg/summary-grid-beam-svg.tsx

@@ -18,18 +18,16 @@ export function SummaryGridBeamSvg(props: SummaryGridBeamSvgProps) {
 
   return (
     <SvgContextProvider displayUnit={displayUnit}>
-      <Box sx={{ width: '100%' }}>
-        <svg
-          role="img"
-          aria-label={label}
-          width="100%"
-          viewBox={`-4 0 ${62 * GRID_SPACING} ${2 * GRID_SPACING}`}
-          xmlns={'http://www.w3.org/2000/svg'}
-        >
-          <title>{label}</title>
-          <BeamSvg sizeInGrids={lengthInGrids} showSizeMarker showShadow />
-        </svg>
-      </Box>
+      <svg
+        role="img"
+        aria-label={label}
+        width="100%"
+        viewBox={`-4 0 ${62 * GRID_SPACING} ${2 * GRID_SPACING}`}
+        xmlns={'http://www.w3.org/2000/svg'}
+      >
+        <title>{label}</title>
+        <BeamSvg sizeInGrids={lengthInGrids} showSizeMarker showShadow />
+      </svg>
     </SvgContextProvider>
   )
 }