@spunto/design-system 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/terminal.tsx

@@ -110,6 +110,18 @@ const Terminal = forwardRef<TerminalHandle, TerminalProps>(function Terminal(
     async function init() {
       const { Terminal: XTermCtor } = await import("@xterm/xterm")
       const { FitAddon } = await import("@xterm/addon-fit")
+      // xterm measures glyph/cell width once, at construction, using whatever
+      // font is *actually available* right then. The design system's styles.css
+      // declares JetBrains Mono via @font-face (and apps preload it), but a
+      // @font-face only downloads lazily on first use — so the terminal can
+      // still mount before the file has arrived, measure with a fallback font,
+      // then paint JetBrains Mono into cells sized for that fallback once it
+      // loads ("same font family, wrong spacing"). Awaiting the load closes
+      // that race regardless of how/whether the host app preloads.
+      await Promise.all([
+        document.fonts.load(`400 ${fontSize}px "JetBrains Mono"`),
+        document.fonts.load(`500 ${fontSize}px "JetBrains Mono"`),
+      ]).catch(() => {})
       if (disposed || !mountRef.current) return
 
       const term = new XTermCtor({
@@ -118,7 +130,7 @@ const Terminal = forwardRef<TerminalHandle, TerminalProps>(function Terminal(
         cursorStyle: "block",
         fontFamily: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
         fontSize,
-        lineHeight: 1.4,
+        lineHeight: 1.2,
         scrollback,
         theme: terminalTheme,
       })
@@ -167,12 +179,16 @@ const Terminal = forwardRef<TerminalHandle, TerminalProps>(function Terminal(
       ref={outerRef}
       data-slot="terminal"
       className={cn(
+        // No border-radius by default: this is a minimal primitive, so it
+        // doesn't impose a corner style — square edges drop cleanly into any
+        // container (a panel, a card, edge-to-edge). Consumers add `rounded-*`
+        // via className when they want it.
         // `[contain:inline-size]` stops this box's (fit-driven, ever-changing)
         // content width from feeding back into an ancestor's shrink-to-fit
         // sizing — without it, a parent with `flex-basis: auto` re-measures
         // this element's content each time fit() grows it, which re-fires the
         // ResizeObserver below and runs away (confirmed: unbounded growth).
-        "h-full w-full min-h-0 min-w-0 overflow-hidden rounded-lg border border-border p-2 [contain:inline-size]",
+        "h-full w-full min-h-0 min-w-0 overflow-hidden border border-border p-2 [contain:inline-size]",
         className
       )}
       style={{ backgroundColor: terminalTheme.background }}