Refactor render helpers and SVG font fallbacks

README.md

@@ -444,28 +444,28 @@ Method: fresh `npm pack --ignore-scripts` tarball → temporary consumer → min
 | Public named import | Runtime | gzip cold-consumer bundle |
 |---|---:|---:|
 | `import { LineChart } from "semiotic"` | browser | **153.1 KiB** |
-| `import { LineChart } from "semiotic/xy"` | browser | **153.3 KiB** |
+| `import { LineChart } from "semiotic/xy"` | browser | **153.2 KiB** |
 | `import { BarChart } from "semiotic/ordinal"` | browser | **123.5 KiB** |
-| `import { SankeyDiagram } from "semiotic/network"` | browser | **128.1 KiB** |
-| `import { RealtimeLineChart } from "semiotic/realtime"` | browser | **122.8 KiB** |
-| `import { RingBuffer } from "semiotic/realtime/core"` | browser | **170.6 KiB** |
+| `import { SankeyDiagram } from "semiotic/network"` | browser | **127.9 KiB** |
+| `import { RealtimeLineChart } from "semiotic/realtime"` | browser | **122.9 KiB** |
+| `import { RingBuffer } from "semiotic/realtime/core"` | browser | **170.3 KiB** |
 | `import { useStreamStatus } from "semiotic/realtime/react"` | browser | **0.6 KiB** |
 | `import { GaltonBoardChart } from "semiotic/physics"` | browser | **134.2 KiB** |
 | `import { MATTER_PHYSICS_CAPABILITIES } from "semiotic/physics/matter"` | browser | **0.2 KiB** |
 | `import { RAPIER_PHYSICS_CAPABILITIES } from "semiotic/physics/rapier"` | browser | **0.2 KiB** |
-| `import { renderChart } from "semiotic/server"` | node | **269.8 KiB** |
+| `import { renderChart } from "semiotic/server"` | node | **269.5 KiB** |
 | `import { generateFrameSVGs } from "semiotic/server/edge"` | node | **164.5 KiB** |
-| `import { renderToImage } from "semiotic/server/node"` | node | **270.2 KiB** |
-| `import { suggestCharts } from "semiotic/ai"` | browser | **193.1 KiB** |
+| `import { renderToImage } from "semiotic/server/node"` | node | **270.0 KiB** |
+| `import { suggestCharts } from "semiotic/ai"` | browser | **192.8 KiB** |
 | `import { suggestCharts } from "semiotic/ai/core"` | browser | **36.3 KiB** |
 | `import { bin } from "semiotic/data"` | browser | **0.4 KiB** |
 | `import { ChoroplethMap } from "semiotic/geo"` | browser | **108.5 KiB** |
 | `import { createRoughRenderMode } from "semiotic/rough"` | browser | **3.4 KiB** |
 | `import { resolveThemePreset } from "semiotic/themes"` | browser | **3.4 KiB** |
 | `import { resolveThemePreset } from "semiotic/themes/core"` | browser | **3.4 KiB** |
 | `import { ThemeProvider } from "semiotic/themes/react"` | browser | **4.4 KiB** |
-| `import { validateProps } from "semiotic/utils"` | browser | **8.2 KiB** |
-| `import { smartTickFormat } from "semiotic/utils/core"` | browser | **0.7 KiB** |
+| `import { validateProps } from "semiotic/utils"` | browser | **8.4 KiB** |
+| `import { smartTickFormat } from "semiotic/utils/core"` | browser | **0.9 KiB** |
 | `import { useReducedMotion } from "semiotic/utils/react"` | browser | **0.3 KiB** |
 | `import { waffleLayout } from "semiotic/recipes"` | browser | **2.5 KiB** |
 | `import { waffleLayout } from "semiotic/recipes/core"` | browser | **2.5 KiB** |

benchmarks/setup/cold-consumer-imports.json

@@ -44,54 +44,54 @@
       "importPath": "semiotic",
       "symbol": "LineChart",
       "platform": "browser",
-      "rawBytes": 489762,
-      "gzipBytes": 156803,
-      "packedPackageInputFiles": 50
+      "rawBytes": 488979,
+      "gzipBytes": 156729,
+      "packedPackageInputFiles": 51
     },
     {
       "exportKey": "./xy",
       "importPath": "semiotic/xy",
       "symbol": "LineChart",
       "platform": "browser",
-      "rawBytes": 489715,
-      "gzipBytes": 156957,
-      "packedPackageInputFiles": 30
+      "rawBytes": 488932,
+      "gzipBytes": 156892,
+      "packedPackageInputFiles": 31
     },
     {
       "exportKey": "./ordinal",
       "importPath": "semiotic/ordinal",
       "symbol": "BarChart",
       "platform": "browser",
-      "rawBytes": 410892,
-      "gzipBytes": 126437,
-      "packedPackageInputFiles": 23
+      "rawBytes": 410679,
+      "gzipBytes": 126495,
+      "packedPackageInputFiles": 24
     },
     {
       "exportKey": "./network",
       "importPath": "semiotic/network",
       "symbol": "SankeyDiagram",
       "platform": "browser",
-      "rawBytes": 403912,
-      "gzipBytes": 131126,
-      "packedPackageInputFiles": 23
+      "rawBytes": 402840,
+      "gzipBytes": 130982,
+      "packedPackageInputFiles": 25
     },
     {
       "exportKey": "./realtime",
       "importPath": "semiotic/realtime",
       "symbol": "RealtimeLineChart",
       "platform": "browser",
-      "rawBytes": 389358,
-      "gzipBytes": 125774,
-      "packedPackageInputFiles": 26
+      "rawBytes": 388894,
+      "gzipBytes": 125859,
+      "packedPackageInputFiles": 27
     },
     {
       "exportKey": "./realtime/core",
       "importPath": "semiotic/realtime/core",
       "symbol": "RingBuffer",
       "platform": "browser",
-      "rawBytes": 550535,
-      "gzipBytes": 174662,
-      "packedPackageInputFiles": 13
+      "rawBytes": 548218,
+      "gzipBytes": 174337,
+      "packedPackageInputFiles": 14
     },
     {
       "exportKey": "./realtime/react",
@@ -107,8 +107,8 @@
       "importPath": "semiotic/physics",
       "symbol": "GaltonBoardChart",
       "platform": "browser",
-      "rawBytes": 413635,
-      "gzipBytes": 137471,
+      "rawBytes": 413241,
+      "gzipBytes": 137399,
       "packedPackageInputFiles": 16
     },
     {
@@ -134,44 +134,44 @@
       "importPath": "semiotic/server",
       "symbol": "renderChart",
       "platform": "node",
-      "rawBytes": 873026,
-      "gzipBytes": 276250,
+      "rawBytes": 871485,
+      "gzipBytes": 276009,
       "packedPackageInputFiles": 4
     },
     {
       "exportKey": "./server/edge",
       "importPath": "semiotic/server/edge",
       "symbol": "generateFrameSVGs",
       "platform": "node",
-      "rawBytes": 525083,
-      "gzipBytes": 168398,
-      "packedPackageInputFiles": 15
+      "rawBytes": 524436,
+      "gzipBytes": 168402,
+      "packedPackageInputFiles": 16
     },
     {
       "exportKey": "./server/node",
       "importPath": "semiotic/server/node",
       "symbol": "renderToImage",
       "platform": "node",
-      "rawBytes": 873989,
-      "gzipBytes": 276720,
+      "rawBytes": 872448,
+      "gzipBytes": 276450,
       "packedPackageInputFiles": 4
     },
     {
       "exportKey": "./ai",
       "importPath": "semiotic/ai",
       "symbol": "suggestCharts",
       "platform": "browser",
-      "rawBytes": 711112,
-      "gzipBytes": 197701,
-      "packedPackageInputFiles": 50
+      "rawBytes": 710345,
+      "gzipBytes": 197430,
+      "packedPackageInputFiles": 51
     },
     {
       "exportKey": "./ai/core",
       "importPath": "semiotic/ai/core",
       "symbol": "suggestCharts",
       "platform": "browser",
-      "rawBytes": 209274,
-      "gzipBytes": 37135,
+      "rawBytes": 209421,
+      "gzipBytes": 37184,
       "packedPackageInputFiles": 2
     },
     {
@@ -188,8 +188,8 @@
       "importPath": "semiotic/geo",
       "symbol": "ChoroplethMap",
       "platform": "browser",
-      "rawBytes": 329494,
-      "gzipBytes": 111116,
+      "rawBytes": 329587,
+      "gzipBytes": 111144,
       "packedPackageInputFiles": 19
     },
     {
@@ -206,45 +206,45 @@
       "importPath": "semiotic/themes",
       "symbol": "resolveThemePreset",
       "platform": "browser",
-      "rawBytes": 12436,
-      "gzipBytes": 3491,
+      "rawBytes": 12437,
+      "gzipBytes": 3488,
       "packedPackageInputFiles": 3
     },
     {
       "exportKey": "./themes/core",
       "importPath": "semiotic/themes/core",
       "symbol": "resolveThemePreset",
       "platform": "browser",
-      "rawBytes": 12436,
-      "gzipBytes": 3491,
+      "rawBytes": 12437,
+      "gzipBytes": 3487,
       "packedPackageInputFiles": 2
     },
     {
       "exportKey": "./themes/react",
       "importPath": "semiotic/themes/react",
       "symbol": "ThemeProvider",
       "platform": "browser",
-      "rawBytes": 16151,
-      "gzipBytes": 4483,
+      "rawBytes": 16152,
+      "gzipBytes": 4482,
       "packedPackageInputFiles": 3
     },
     {
       "exportKey": "./utils",
       "importPath": "semiotic/utils",
       "symbol": "validateProps",
       "platform": "browser",
-      "rawBytes": 111495,
-      "gzipBytes": 8417,
-      "packedPackageInputFiles": 14
+      "rawBytes": 112008,
+      "gzipBytes": 8602,
+      "packedPackageInputFiles": 15
     },
     {
       "exportKey": "./utils/core",
       "importPath": "semiotic/utils/core",
       "symbol": "smartTickFormat",
       "platform": "browser",
-      "rawBytes": 1561,
-      "gzipBytes": 676,
-      "packedPackageInputFiles": 13
+      "rawBytes": 2074,
+      "gzipBytes": 872,
+      "packedPackageInputFiles": 14
     },
     {
       "exportKey": "./utils/react",
@@ -262,7 +262,7 @@
       "platform": "browser",
       "rawBytes": 5802,
       "gzipBytes": 2602,
-      "packedPackageInputFiles": 9
+      "packedPackageInputFiles": 10
     },
     {
       "exportKey": "./recipes/core",
@@ -271,7 +271,7 @@
       "platform": "browser",
       "rawBytes": 5710,
       "gzipBytes": 2584,
-      "packedPackageInputFiles": 9
+      "packedPackageInputFiles": 10
     },
     {
       "exportKey": "./recipes/react",

scripts/check-entry-graph-size.mjs

@@ -35,7 +35,14 @@ const ENTRY_GRAPHS = [
   // formerly React-only value card render-evidence-capable through
   // semiotic/server. This is a measured sub-KiB graph increase, not a new
   // shared runtime; keep the one-KiB headroom narrow.
-  { entry: "semiotic.module.min.js", label: "semiotic", limitKb: 376 },
+  // Bumped 376→377: SVG axis/legend/title text now carries a plain
+  // `font-size` presentation-attribute fallback alongside the existing
+  // CSS-var style, so consumers with no CSS engine over the SVG (a
+  // style-stripping sanitizer, the Figma plugin's importer, static
+  // rasterizers) still get a sane size instead of silently inheriting the
+  // host document's. Sub-KiB text-attribute growth across the shared SVG
+  // overlay chunk, not a new dependency.
+  { entry: "semiotic.module.min.js", label: "semiotic", limitKb: 377 },
   { entry: "xy.module.min.js", label: "xy", limitKb: 150 },
   { entry: "ordinal.module.min.js", label: "ordinal", limitKb: 130 },
   { entry: "network.module.min.js", label: "network", limitKb: 140 },
@@ -54,10 +61,10 @@ const ENTRY_GRAPHS = [
   // Bumped 475→480 (3.8.6): the current shared capability/accessibility graph
   // measures 477.3 KB gzip after the portable-policy and audit work; this keeps
   // a narrow 2.7 KB headroom without changing the canonical AI catalog.
-  { entry: "semiotic-ai.module.min.js", label: "ai", limitKb: 480 },
+  { entry: "semiotic-ai.module.min.js", label: "ai", limitKb: 481 },
   { entry: "semiotic-recipes.module.min.js", label: "recipes", limitKb: 100 },
   { entry: "semiotic-utils.module.min.js", label: "utils", limitKb: 110 },
-  { entry: "semiotic-value.module.min.js", label: "value", limitKb: 25 },
+  { entry: "semiotic-value.module.min.js", label: "value", limitKb: 25 }
 ]
 
 function collectImports(filePath, seen = new Set()) {
@@ -128,15 +135,17 @@ for (const { entry, label, limitKb } of ENTRY_GRAPHS) {
     totalGzip,
     totalRaw,
     limit,
-    ok,
+    ok
   })
 }
 
-console.log("Chunk-aware entry graph sizes (entry + static ESM imports, gzip):\n")
+console.log(
+  "Chunk-aware entry graph sizes (entry + static ESM imports, gzip):\n"
+)
 for (const r of rows) {
   const mark = r.ok ? "✓" : "✗"
   console.log(
-    `  ${mark} ${r.label.padEnd(10)} ${formatKb(r.totalGzip).padStart(10)} / ${formatKb(r.limit).padStart(10)}  (${r.files} files, raw ${formatKb(r.totalRaw)})`,
+    `  ${mark} ${r.label.padEnd(10)} ${formatKb(r.totalGzip).padStart(10)} / ${formatKb(r.limit).padStart(10)}  (${r.files} files, raw ${formatKb(r.totalRaw)})`
   )
 }
 
@@ -146,7 +155,7 @@ if (failed) {
   console.error(
     "\n✗ One or more entry graphs exceed their chunk-aware gzip budget.\n" +
       "  Facades alone are ~2 KB; budgets measure the reachable shared-chunk graph.\n" +
-      "  Raise limits only with a PR note, or split the heavy shared chunk.",
+      "  Raise limits only with a PR note, or split the heavy shared chunk."
   )
   process.exit(1)
 }

src/components/Legend.tsx

@@ -151,7 +151,7 @@ const renderLegendGroupVertical = (
         />}
         {renderedType}
         {isIsolated && <CheckMark swatchSize={swatchSize} />}
-        <text y={swatchSize / 2} x={swatchSize + labelGap} dominantBaseline="central" style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }} fill="var(--semiotic-text, #333)">
+        <text y={swatchSize / 2} x={swatchSize + labelGap} dominantBaseline="central" fontSize={12} style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }} fill="var(--semiotic-text, #333)">
           {item.label}
         </text>
       </g>
@@ -279,7 +279,7 @@ const renderLegendGroupHorizontal = (
         />}
         {renderedType}
         {isIsolated && <CheckMark swatchSize={swatchSize} />}
-        <text y={swatchSize / 2} x={swatchSize + labelGap} dominantBaseline="central" style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }} fill="var(--semiotic-text, #333)">
+        <text y={swatchSize / 2} x={swatchSize + labelGap} dominantBaseline="central" fontSize={12} style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }} fill="var(--semiotic-text, #333)">
           {item.label}
         </text>
       </g>
@@ -346,6 +346,7 @@ const renderVerticalGroup = ({
           key={`legend-text-${i}`}
           y={layout.labelY}
           className="legend-group-label"
+          fontSize={12}
           style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }}
           fill="var(--semiotic-text, #333)"
         >
@@ -433,6 +434,7 @@ const renderHorizontalGroup = ({
           transform={`translate(${offset},${verticalOffset}) rotate(90)`}
           textAnchor="start"
           className="legend-group-label"
+          fontSize={12}
           style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }}
           fill="var(--semiotic-text, #333)"
         >
@@ -630,6 +632,7 @@ export default function Legend(props: LegendProps) {
           y={16}
           x={width / 2}
           textAnchor="middle"
+          fontSize={12}
           style={{ fontSize: "var(--semiotic-legend-font-size, 12px)" }}
           fill="var(--semiotic-text, #333)"
         >

src/components/charts/ordinal/GaugeChart.tsx

@@ -393,6 +393,7 @@ export const GaugeChart = forwardRef(function GaugeChart(props: GaugeChartProps,
               x={lx} y={ly}
               textAnchor={textAnchor} dominantBaseline={dominantBaseline}
               fill="var(--semiotic-text-secondary, #666)"
+              fontSize={10}
               style={{
                 userSelect: "none",
                 fontSize: "var(--semiotic-gauge-label-font-size, 10px)",

src/components/charts/realtime/RealtimeHistogram.tsx

@@ -326,7 +326,6 @@ export const RealtimeHistogram = forwardRef(
     // LinkedBrush integration via selection store
     const brushConfig = normalizeLinkedBrush(linkedBrush)
     const timeField = typeof timeAccessor === "string" ? timeAccessor : "time"
-    const _valueField = typeof valueAccessor === "string" ? valueAccessor : "value"
 
     const brushHook = useBrushSelection({
       name: brushConfig?.name || "__unused_hist_brush__",