mac-human-design 0.1.19 → 0.1.20

package/changelog.md

@@ -2,6 +2,19 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.20
+
+### Added
+
+- Added automated macOS design verifier coverage for icon-button alignment
+  invariants, including fixed icon button dimensions, grid centering,
+  symbol glyph centering, non-positional icon-button Motion feedback,
+  `SymbolIconButton` structure, and SF Symbol PNG normalization.
+
+### Changed
+
+- Bumped the package to `0.1.20`.
+
 ## 0.1.19
 
 ### Fixed

package/package.json

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

package/scripts/verify-macos-design.mjs

@@ -6,6 +6,8 @@ const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), ".."
 const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
 const packageJsonPath = path.join(repoRoot, "package.json");
 const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
+const symbolIconButtonPath = path.join(repoRoot, "src", "components", "SymbolIconButton.tsx");
+const symbolServicePath = path.join(repoRoot, "src", "symbols", "systemSymbolService.ts");
 
 function readText(filePath) {
   return fs.readFileSync(filePath, "utf8");
@@ -43,6 +45,28 @@ const sources = new Map(
 const stylesSource = readText(stylesPath);
 const packageJson = JSON.parse(readText(packageJsonPath));
 const wrapperSource = readText(wrapperPath);
+const symbolIconButtonSource = readText(symbolIconButtonPath);
+const symbolServiceSource = readText(symbolServicePath);
+
+function getCssRuleBody(selector) {
+  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const rulePattern = new RegExp(`(?:^|\\n)${escapedSelector}\\s*\\{([\\s\\S]*?)\\}`, "g");
+  for (const match of stylesSource.matchAll(rulePattern)) {
+    const prefix = stylesSource.slice(0, match.index).trimEnd();
+    if (!prefix.endsWith(",")) {
+      return match[1];
+    }
+  }
+  return "";
+}
+
+function requireCssDeclarations(selector, declarations) {
+  const body = getCssRuleBody(selector);
+  const missingDeclarations = declarations.filter(([label, pattern]) => !pattern.test(body));
+  if (missingDeclarations.length > 0) {
+    fail(`Missing required CSS declarations for ${selector}.`, missingDeclarations.map(([label]) => label));
+  }
+}
 
 const requiredStyleFeatures = [
   ["system font stack", /-apple-system,\s*BlinkMacSystemFont/],
@@ -98,6 +122,93 @@ if (motionCreateMatches.length !== 1 || !allowedMotionCreatePattern.test(wrapper
   ]);
 }
 
+requireCssDeclarations(".hd-mac-icon-button", [
+  ["fixed 28px width", /width\s*:\s*28px\s*;/],
+  ["fixed 28px height", /height\s*:\s*28px\s*;/],
+  ["fixed 28px min-width", /min-width\s*:\s*28px\s*;/],
+  ["fixed 28px min-height", /min-height\s*:\s*28px\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-symbol-icon-button", [
+  ["fixed 30px width", /width\s*:\s*30px\s*;/],
+  ["fixed 30px height", /height\s*:\s*30px\s*;/],
+  ["fixed 30px min-width", /min-width\s*:\s*30px\s*;/],
+  ["fixed 30px min-height", /min-height\s*:\s*30px\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-symbol-icon", [
+  ["single grid cell placement", /grid-area\s*:\s*1\s*\/\s*1\s*;/],
+  ["flex centering display", /display\s*:\s*inline-flex\s*;/],
+  ["vertical glyph centering", /align-items\s*:\s*center\s*;/],
+  ["horizontal glyph centering", /justify-content\s*:\s*center\s*;/],
+  ["automatic optical centering margin", /margin\s*:\s*auto\s*;/],
+  ["center transform origin", /transform-origin\s*:\s*center\s*;/],
+]);
+
+const sharedIconButtonRule = stylesSource.match(
+  /\.hd-mac-icon-button,\s*\n\.hd-mac-symbol-icon-button\s*\{([\s\S]*?)\}/,
+)?.[1] ?? "";
+const missingSharedIconButtonDeclarations = [
+  ["grid icon-button layout", /display\s*:\s*inline-grid\s*;/],
+  ["grid item centering", /place-items\s*:\s*center\s*;/],
+  ["grid content centering", /place-content\s*:\s*center\s*;/],
+  ["zero padding", /padding\s*:\s*0\s*;/],
+  ["zero line-height", /line-height\s*:\s*0\s*;/],
+  ["center transform origin", /transform-origin\s*:\s*center\s*;/],
+  ["middle inline alignment", /vertical-align\s*:\s*middle\s*;/],
+].filter(([, pattern]) => !pattern.test(sharedIconButtonRule));
+
+if (missingSharedIconButtonDeclarations.length > 0) {
+  fail(
+    "Missing required shared icon-button centering declarations.",
+    missingSharedIconButtonDeclarations.map(([label]) => label),
+  );
+}
+
+const iconMotionBranch = wrapperSource.match(
+  /if\s*\(\s*includesAny\(macClassName,\s*\[\s*"hd-mac-icon-button",\s*"hd-mac-help-button"\s*\]\)\s*\)\s*\{([\s\S]*?)\n\s*\}/,
+)?.[1] ?? "";
+if (!/whileHover\s*:\s*\{\s*scale\s*:\s*1\.04\s*\}/.test(iconMotionBranch)) {
+  fail("Icon-only controls must use center-origin scale hover feedback.", ["src/components/MacBaseUI.tsx"]);
+}
+if (!/whileTap\s*:\s*\{\s*scale\s*:\s*0\.94\s*\}/.test(iconMotionBranch)) {
+  fail("Icon-only controls must use center-origin scale press feedback.", ["src/components/MacBaseUI.tsx"]);
+}
+if (/\by\s*:/.test(iconMotionBranch)) {
+  fail("Icon-only controls must not use vertical Motion offsets.", ["src/components/MacBaseUI.tsx"]);
+}
+
+const symbolIconRequirements = [
+  ["SymbolIconButton imports MacIconButton", /import\s+\{\s*MacIconButton,\s*MacTooltip\s*\}\s+from\s+["']\.\/MacBaseUI["']/],
+  ["SymbolIconButton render element is MacIconButton", /render=\{\s*<MacIconButton\b/],
+  ["SymbolIconButton applies hd-mac-symbol-icon-button class", /className=["']hd-mac-symbol-icon-button["']/],
+  ["masked symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-mask["']/],
+  ["fallback symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-fallback["']/],
+  ["mask centering", /maskPosition:\s*["']center["']/],
+  ["webkit mask centering", /WebkitMaskPosition:\s*["']center["']/],
+];
+
+const missingSymbolIconRequirements = symbolIconRequirements
+  .filter(([, pattern]) => !pattern.test(symbolIconButtonSource))
+  .map(([label]) => label);
+
+if (missingSymbolIconRequirements.length > 0) {
+  fail("Missing SymbolIconButton alignment invariants.", missingSymbolIconRequirements);
+}
+
+const missingSymbolServiceRequirements = [
+  ["transparent symbol padding trim", /trimTransparentSymbolPadding/],
+  ["alpha threshold trim", /TRANSPARENT_ALPHA_THRESHOLD/],
+  ["canvas crop path", /trimmedCanvas\.toDataURL\(["']image\/png["']\)/],
+].filter(([, pattern]) => !pattern.test(symbolServiceSource));
+
+if (missingSymbolServiceRequirements.length > 0) {
+  fail(
+    "Missing system symbol image normalization invariants.",
+    missingSymbolServiceRequirements.map(([label]) => label),
+  );
+}
+
 const negativeLetterSpacing = [];
 const viewportScaledFonts = [];
 
@@ -142,5 +253,5 @@ if (process.exitCode) {
 }
 
 console.log(
-  `Verified macOS design features, typography constraints, and ${hdMacClasses.size} styled hd-mac classes.`,
+  `Verified macOS design features, icon-button alignment invariants, typography constraints, and ${hdMacClasses.size} styled hd-mac classes.`,
 );