@hanzo/design 0.5.13 → 0.5.14

package/dist/tokens.gen.d.ts

@@ -203,6 +203,10 @@ export declare const spacing: {
     readonly 'hero-y-lg': "4.5rem";
     readonly 'header-height': "3.5rem";
     readonly 'tap-target': "44px";
+    readonly 'control-height-sm': "32px";
+    readonly 'control-height': "36px";
+    readonly 'control-height-lg': "40px";
+    readonly 'control-height-xl': "52px";
     readonly 'safe-top': "env(safe-area-inset-top,0px)";
     readonly 'safe-right': "env(safe-area-inset-right,0px)";
     readonly 'safe-bottom': "env(safe-area-inset-bottom,0px)";
@@ -500,6 +504,10 @@ export declare const cssVars: {
     readonly '--hero-y-lg': "4.5rem";
     readonly '--header-height': "3.5rem";
     readonly '--tap-target': "44px";
+    readonly '--control-height-sm': "32px";
+    readonly '--control-height': "36px";
+    readonly '--control-height-lg': "40px";
+    readonly '--control-height-xl': "52px";
     readonly '--safe-top': "env(safe-area-inset-top,0px)";
     readonly '--safe-right': "env(safe-area-inset-right,0px)";
     readonly '--safe-bottom': "env(safe-area-inset-bottom,0px)";

package/dist/tokens.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -206,6 +206,10 @@ export const spacing = {
     'hero-y-lg': '4.5rem',
     'header-height': '3.5rem',
     'tap-target': '44px',
+    'control-height-sm': '32px',
+    'control-height': '36px',
+    'control-height-lg': '40px',
+    'control-height-xl': '52px',
     'safe-top': 'env(safe-area-inset-top,0px)',
     'safe-right': 'env(safe-area-inset-right,0px)',
     'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -503,6 +507,10 @@ export const cssVars = {
     '--hero-y-lg': '4.5rem',
     '--header-height': '3.5rem',
     '--tap-target': '44px',
+    '--control-height-sm': '32px',
+    '--control-height': '36px',
+    '--control-height-lg': '40px',
+    '--control-height-xl': '52px',
     '--safe-top': 'env(safe-area-inset-top,0px)',
     '--safe-right': 'env(safe-area-inset-right,0px)',
     '--safe-bottom': 'env(safe-area-inset-bottom,0px)',

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.13",
+  "version": "0.5.14",
+  "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT OR Apache-2.0",
   "repository": {
@@ -31,6 +32,13 @@
     "./skills/*": "./skills/*",
     "./tailwind.css": "./tailwind.css"
   },
+  "scripts": {
+    "gen": "node scripts/gen-tokens.mjs",
+    "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
+    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
+    "prepublishOnly": "pnpm build",
+    "lint": "node scripts/lint.mjs"
+  },
   "devDependencies": {
     "typescript": "^5.9.3"
   },
@@ -63,11 +71,5 @@
   },
   "bin": {
     "hanzo-design-lint": "./scripts/lint.mjs"
-  },
-  "scripts": {
-    "gen": "node scripts/gen-tokens.mjs",
-    "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
-    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
-    "lint": "node scripts/lint.mjs"
   }
-}
+}

package/src/tokens.gen.ts

@@ -209,6 +209,10 @@ export const spacing = {
   'hero-y-lg': '4.5rem',
   'header-height': '3.5rem',
   'tap-target': '44px',
+  'control-height-sm': '32px',
+  'control-height': '36px',
+  'control-height-lg': '40px',
+  'control-height-xl': '52px',
   'safe-top': 'env(safe-area-inset-top,0px)',
   'safe-right': 'env(safe-area-inset-right,0px)',
   'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -516,6 +520,10 @@ export const cssVars = {
   '--hero-y-lg': '4.5rem',
   '--header-height': '3.5rem',
   '--tap-target': '44px',
+  '--control-height-sm': '32px',
+  '--control-height': '36px',
+  '--control-height-lg': '40px',
+  '--control-height-xl': '52px',
   '--safe-top': 'env(safe-area-inset-top,0px)',
   '--safe-right': 'env(safe-area-inset-right,0px)',
   '--safe-bottom': 'env(safe-area-inset-bottom,0px)',

package/styles.css

@@ -503,6 +503,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */

package/tailwind.css

@@ -526,6 +526,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */

package/tokens/spacing.css

@@ -68,6 +68,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */