mac-human-design 0.1.10 → 0.1.12

package/changelog.md

@@ -2,6 +2,35 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.12
+
+### Fixed
+
+- Rendered `SymbolIconButton` glyphs as direct children of the shared
+  `MacIconButton` render element, avoiding tooltip slot child placement
+  ambiguity.
+- Tightened icon-button centering with explicit grid content centering,
+  zero line-height, vertical alignment, and grid-area placement for symbol
+  glyphs.
+
+### Changed
+
+- Bumped the package to `0.1.12`.
+
+## 0.1.11
+
+### Fixed
+
+- Trimmed transparent padding from generated SF Symbol PNGs before caching them,
+  so icon buttons center the visible glyph instead of the symbol image's
+  asymmetric advance box.
+- Routed `SymbolIconButton` through the shared system-symbol hook so icon
+  buttons and standalone symbol images share the same normalized symbol data.
+
+### Changed
+
+- Bumped the package to `0.1.11`.
+
 ## 0.1.10
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/src/components/SymbolIconButton.tsx

@@ -1,21 +1,5 @@
-import { useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
 import { MacIconButton, MacTooltip } from "./MacBaseUI";
-
-const SYMBOL_SCALE_MULTIPLIER = 2.5;
-const SYMBOL_MIN_POINT_SIZE = 10;
-const SYMBOL_MAX_POINT_SIZE = 160;
-
-const systemSymbolIconCache = new Map<string, string | null>();
-
-function getSymbolPointSize(cssPx: number): number {
-  const pixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
-  return Math.round(Math.max(SYMBOL_MIN_POINT_SIZE, Math.min(SYMBOL_MAX_POINT_SIZE, cssPx * pixelRatio * SYMBOL_SCALE_MULTIPLIER)));
-}
-
-function symbolCacheKey(symbolName: string, pointSize: number) {
-  return `${symbolName}@${pointSize}`;
-}
+import { useSystemSymbol } from "../symbols/useSystemSymbol";
 
 type SymbolIconButtonProps = {
   label: string;
@@ -39,43 +23,10 @@ export function SymbolIconButton({
   isLoading,
   iconSizePx = 18,
 }: SymbolIconButtonProps) {
-  const symbolPointSize = getSymbolPointSize(iconSizePx);
-  const symbolCacheLookupKey = symbolCacheKey(symbolName, symbolPointSize);
-
-  const [symbolDataUrl, setSymbolDataUrl] = useState<string | null>(() => {
-    return systemSymbolIconCache.get(symbolCacheLookupKey) ?? null;
+  const { dataUrl: symbolDataUrl } = useSystemSymbol({
+    symbolName,
+    cssPixelSize: iconSizePx,
   });
-
-  useEffect(() => {
-    const cachedDataUrl = systemSymbolIconCache.get(symbolCacheLookupKey);
-    if (cachedDataUrl !== undefined) {
-      setSymbolDataUrl(cachedDataUrl);
-      return;
-    }
-
-    let isMounted = true;
-    void invoke<string | null>("system_symbol_png_data_url", {
-      name: symbolName,
-      point_size: symbolPointSize,
-    })
-      .then((dataUrl) => {
-        systemSymbolIconCache.set(symbolCacheLookupKey, dataUrl);
-        if (isMounted) {
-          setSymbolDataUrl(dataUrl);
-        }
-      })
-      .catch(() => {
-        systemSymbolIconCache.set(symbolCacheLookupKey, null);
-        if (isMounted) {
-          setSymbolDataUrl(null);
-        }
-      });
-
-    return () => {
-      isMounted = false;
-    };
-  }, [symbolName, symbolPointSize, symbolCacheLookupKey]);
-
   const glyphPx = `${iconSizePx}px`;
 
   return (
@@ -96,34 +47,34 @@ export function SymbolIconButton({
               minHeight: ICON_BUTTON_SIZE,
               borderRadius: ICON_BUTTON_RADIUS,
             }}
-          />
+          >
+            <span
+              aria-hidden
+              className="hd-mac-symbol-icon"
+              style={{
+                width: glyphPx,
+                height: glyphPx,
+                color: "currentColor",
+                backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
+                fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
+                fontSize: symbolDataUrl ? "0" : glyphPx,
+                fontWeight: 500,
+                lineHeight: "1",
+                WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+                WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
+                WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+                WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
+                maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+                maskPosition: symbolDataUrl ? "center" : undefined,
+                maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+                maskSize: symbolDataUrl ? "contain" : undefined,
+              }}
+            >
+              {symbolDataUrl ? null : fallback}
+            </span>
+          </MacIconButton>
         }
-      >
-        <span
-          aria-hidden
-          className="hd-mac-symbol-icon"
-          style={{
-            width: glyphPx,
-            height: glyphPx,
-            color: "currentColor",
-            backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
-            fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
-            fontSize: symbolDataUrl ? "0" : glyphPx,
-            fontWeight: 500,
-            lineHeight: "1",
-            WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-            WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
-            WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-            WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
-            maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-            maskPosition: symbolDataUrl ? "center" : undefined,
-            maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-            maskSize: symbolDataUrl ? "contain" : undefined,
-          }}
-        >
-          {symbolDataUrl ? null : fallback}
-        </span>
-      </MacTooltip.Trigger>
+      />
       <MacTooltip.Portal>
         <MacTooltip.Positioner sideOffset={5}>
           <MacTooltip.Popup>{label}</MacTooltip.Popup>

package/src/styles/macosBaseUi.css

@@ -232,7 +232,10 @@
 .hd-mac-symbol-icon-button {
   display: inline-grid;
   place-items: center;
+  place-content: center;
   padding: 0;
+  line-height: 0;
+  vertical-align: middle;
 }
 
 .hd-mac-icon-button {
@@ -251,11 +254,13 @@
 }
 
 .hd-mac-symbol-icon {
+  grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   flex-shrink: 0;
+  margin: auto;
 }
 
 .hd-mac-help-button {

package/src/symbols/systemSymbolService.ts

@@ -11,6 +11,7 @@ const DEFAULT_POINT_SIZE = 18;
 const MIN_POINT_SIZE = 10;
 const MAX_POINT_SIZE = 256;
 const SYMBOL_SCALE_MULTIPLIER = 2.5;
+const TRANSPARENT_ALPHA_THRESHOLD = 2;
 
 export function calculateSystemSymbolPointSize(
   cssPx: number,
@@ -58,7 +59,7 @@ export async function getSystemSymbolDataUrl(
       point_size: pointSize,
     });
 
-    const dataUrl = maybeDataUrl ?? null;
+    const dataUrl = maybeDataUrl ? await trimTransparentSymbolPadding(maybeDataUrl) : null;
     SYSTEM_SYMBOL_CACHE.set(key, dataUrl);
     return dataUrl;
   } catch (error) {
@@ -66,3 +67,90 @@ export async function getSystemSymbolDataUrl(
     throw error;
   }
 }
+
+async function trimTransparentSymbolPadding(dataUrl: string): Promise<string> {
+  if (
+    typeof window === "undefined" ||
+    typeof Image === "undefined" ||
+    typeof document === "undefined"
+  ) {
+    return dataUrl;
+  }
+
+  const image = await loadImage(dataUrl);
+  const width = image.naturalWidth || image.width;
+  const height = image.naturalHeight || image.height;
+  if (width <= 0 || height <= 0) {
+    return dataUrl;
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return dataUrl;
+  }
+
+  context.drawImage(image, 0, 0);
+  const pixels = context.getImageData(0, 0, width, height).data;
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const alpha = pixels[(y * width + x) * 4 + 3];
+      if (alpha > TRANSPARENT_ALPHA_THRESHOLD) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      }
+    }
+  }
+
+  if (maxX < minX || maxY < minY) {
+    return dataUrl;
+  }
+
+  const trimmedWidth = maxX - minX + 1;
+  const trimmedHeight = maxY - minY + 1;
+  if (trimmedWidth === width && trimmedHeight === height) {
+    return dataUrl;
+  }
+
+  const trimmedCanvas = document.createElement("canvas");
+  trimmedCanvas.width = trimmedWidth;
+  trimmedCanvas.height = trimmedHeight;
+
+  const trimmedContext = trimmedCanvas.getContext("2d");
+  if (!trimmedContext) {
+    return dataUrl;
+  }
+
+  trimmedContext.drawImage(
+    canvas,
+    minX,
+    minY,
+    trimmedWidth,
+    trimmedHeight,
+    0,
+    0,
+    trimmedWidth,
+    trimmedHeight,
+  );
+
+  return trimmedCanvas.toDataURL("image/png");
+}
+
+function loadImage(dataUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Failed to load SF Symbol PNG data."));
+    image.src = dataUrl;
+  });
+}