@hanzo/ui 8.27.22 → 8.27.23

package/dist/masthead/nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.js","sourceRoot":"","sources":["../../src/masthead/nav.ts"],"names":[],"mappings":"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"}

package/dist/masthead.css

@@ -0,0 +1,502 @@
+/* hanzo.ai's header (Masthead, @hanzo/ui/masthead): the bar, a menu's plane,
+   Log in ▾, and the phone sheet. Imported once by every site that wears it.
+
+   The bar reads the theme's tokens (@hanzo/design via @hanzo/ui/theme.css), so
+   light and dark need no second copy of any of it. The three below are the
+   chrome's own; a site that states them at :root wins, since these sit at zero
+   specificity. */
+:where(:root) {
+  /* The header's height. */
+  --header: 60px;
+  /* One inset for the chrome and the page under it, the shell's GUTTER. */
+  --page-gutter: clamp(20px, 4vw, 72px);
+  /* The ground every chrome menu stands on: @hanzo/design's dropdown panel,
+     opaque, a shade above --background in either theme. */
+  --chrome-panel: var(--popover);
+}
+/* The bar's ink on a light page. The shell writes its inks as
+   `var(--white-92, …)` with white only as the fallback, so stating these names
+   on the bar turns every inline use black at once. Scoped to the bar: the names
+   mean a hue, and a page's own glows and hover fills stay white.
+
+   --white-45 is pushed to .56 rather than mirrored: black on white reads fainter
+   than white on black at the same alpha, and .56 is 4.5:1 on both the bar and
+   the panel. The panel under these inks is --chrome-panel, which flips with the
+   theme at `.light` wherever a menu is mounted. */
+.light .hz-masthead {
+  --white-92: rgb(0 0 0 / 0.92);
+  --white-60: rgb(0 0 0 / 0.6);
+  --white-45: rgb(0 0 0 / 0.56);
+  --white-10: rgb(0 0 0 / 0.1);
+}
+
+/* ==========================================================================
+   THE BAR AND THE SHEET
+
+   One nav tree, two drawings: the bar and the phone sheet. The bar's geometry
+   is @hanzogui/shell's — a 60px row, 34px pills, 13px labels, a 16px mark
+   before each, a 12px chevron after — so it reads as the same chrome the rest
+   of the estate wears. Every ink and ground is a theme token.
+
+   THREE GROUNDS for the bar. Clear over the top of a page; glass once the page
+   moves under it; and the plane's own opaque ground while a menu or the sheet
+   hangs from it, so bar and plane are one surface. The open bar carries no
+   backdrop filter on purpose: a filtered element is a backdrop root, and the
+   veil inside it would then blur the bar instead of the page.
+   ========================================================================== */
+
+.hz-masthead {
+  --wash: color-mix(in srgb, var(--foreground) 6%, transparent);
+  --hairline: color-mix(in srgb, var(--foreground) 10%, transparent);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-header);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: content-box;
+  height: var(--header);
+  padding: env(safe-area-inset-top) var(--page-gutter) 0;
+  font-family: var(--font-sans);
+  /* The type the chrome is set in: @hanzo/gui's body, 16px on a 20px line. A
+     fixed line, so every row keeps its height whatever the host's body type. */
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--foreground);
+  transition: background-color 160ms ease;
+}
+
+.hz-masthead[data-grounded] {
+  background: color-mix(in srgb, var(--background) 72%, transparent);
+  backdrop-filter: blur(20px) saturate(1.8);
+  -webkit-backdrop-filter: blur(20px) saturate(1.8);
+}
+
+.hz-masthead:has([aria-expanded='true']) {
+  background: var(--chrome-panel);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.hz-masthead a,
+.hz-masthead button {
+  font-family: inherit;
+  text-decoration: none;
+}
+
+/* ------------------------------------------------------------------ pills */
+
+.hz-masthead .hz-trigger,
+.hz-masthead .hz-find,
+.hz-masthead .hz-brand {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+}
+
+.hz-masthead .hz-trigger {
+  gap: 6px;
+  padding: 0 12px;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+}
+
+.hz-masthead .hz-trigger:hover,
+.hz-masthead .hz-trigger[aria-expanded='true'],
+.hz-masthead .hz-find:hover,
+.hz-masthead .hz-brand:hover,
+.hz-masthead .hz-brand:has([aria-expanded='true']) {
+  color: var(--foreground);
+  background: var(--wash);
+  box-shadow: inset 0 0 0 1px var(--hairline);
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-mark {
+  display: inline-flex;
+  opacity: 0.9;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-chevron {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[aria-expanded='true'] > .hz-chevron,
+details[open] > summary > .hz-chevron {
+  transform: rotate(180deg);
+}
+
+/* The name of the place is never dim, and the chevron beside it is its own stop:
+   the name goes home, the chevron opens the company. */
+.hz-masthead .hz-brand {
+  margin-left: -4px;
+  color: var(--foreground);
+}
+
+.hz-masthead .hz-brand .hz-wordmark {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding-left: 12px;
+  color: inherit;
+}
+
+.hz-masthead .hz-brand .hz-company {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 100%;
+  padding: 0 6px 0 0;
+  border: 0;
+  border-radius: 0 999px 999px 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.hz-masthead .hz-nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.hz-masthead .hz-find {
+  justify-content: center;
+  width: 34px;
+}
+
+.hz-masthead .hz-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.hz-masthead .hz-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+/* The one filled control in the bar. */
+:is(.hz-masthead, .hz-sheet) .hz-try {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: var(--foreground);
+  color: var(--background);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: opacity 120ms ease;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-try:hover {
+  opacity: 0.88;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-out {
+  display: inline-block;
+  margin-left: 0.28em;
+  vertical-align: middle;
+  opacity: 0.7;
+}
+
+.hz-masthead .hz-toggle {
+  display: none;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  margin-right: -10px;
+  border: 0;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+}
+
+/* ------------------------------------------------------------------ plane */
+
+/* A menu's panel spans the window under the bar and lays its columns out from
+   the wordmark's column. */
+.hz-masthead .hz-plane {
+  position: fixed;
+  top: calc(var(--header) + env(safe-area-inset-top));
+  left: 0;
+  right: 0;
+  z-index: calc(var(--z-base) + 1);
+  max-height: calc(100dvh - var(--header));
+  overflow-y: auto;
+  background: var(--chrome-panel);
+  box-shadow: 0 24px 60px -16px color-mix(in srgb, var(--pure-black) 75%, transparent);
+  animation: hz-plane-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+
+@keyframes hz-plane-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+
+.hz-masthead .hz-veil {
+  position: fixed;
+  top: calc(var(--header) + env(safe-area-inset-top));
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-base);
+  background: color-mix(in srgb, var(--pure-black) 40%, transparent);
+  backdrop-filter: blur(24px) saturate(1.2);
+  -webkit-backdrop-filter: blur(24px) saturate(1.2);
+}
+
+.hz-masthead .hz-columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: start;
+  gap: clamp(24px, 3vw, 64px);
+  padding: 36px calc(var(--page-gutter) + 8px) 48px;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  transition: opacity 160ms ease;
+}
+
+/* The column under the pointer is the one being read; the others step back. */
+.hz-masthead .hz-columns:has(> .hz-column:hover) > .hz-column:not(:hover) {
+  opacity: 0.45;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-column-title {
+  margin: 0 0 10px;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+/* `justify-content` is stated on every row: this sheet centres any link whose
+   one element child is an svg, and ↗ is exactly that. A row is as wide as its
+   words, so a keyboard ring hugs the words it names rather than the column. */
+:is(.hz-masthead, .hz-sheet) .hz-column a {
+  display: block;
+  width: fit-content;
+  justify-content: flex-start;
+  margin: 0 -8px;
+  padding: 5px 8px;
+  border-radius: 8px;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+
+:is(.hz-masthead, .hz-sheet) .hz-column a:hover,
+:is(.hz-masthead, .hz-sheet) .hz-column a:focus-visible {
+  color: var(--foreground);
+}
+
+/* The destinations someone arrives wanting, in display type. */
+.hz-masthead .hz-column[data-lead] a {
+  padding: 2px 8px;
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-normal);
+  line-height: 1.28;
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+}
+
+/* ------------------------------------------------------------------ log in */
+
+.hz-masthead .hz-card {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  display: grid;
+  gap: 2px;
+  min-width: 240px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--chrome-panel);
+  box-shadow: 0 24px 60px -16px color-mix(in srgb, var(--pure-black) 75%, transparent);
+  animation: hz-plane-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+
+.hz-masthead .hz-card a {
+  display: grid;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  color: var(--foreground);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.hz-masthead .hz-card a:hover,
+.hz-masthead .hz-card a:focus-visible {
+  background: color-mix(in srgb, var(--foreground) 6%, transparent);
+}
+
+.hz-masthead .hz-card small {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-normal);
+  color: var(--muted-foreground);
+}
+
+/* ------------------------------------------------------------------ phone */
+
+.hz-sheet {
+  position: fixed;
+  top: calc(var(--header) + env(safe-area-inset-top));
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-overlay);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px var(--page-gutter) calc(24px + env(safe-area-inset-bottom));
+  background: var(--chrome-panel);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 20px;
+  animation: hz-plane-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+
+.hz-sheet details {
+  border-bottom: 1px solid var(--border);
+}
+
+.hz-sheet summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  list-style: none;
+  font-size: var(--text-xl);
+  font-weight: var(--weight-medium);
+  color: var(--foreground);
+  cursor: pointer;
+}
+
+.hz-sheet summary::-webkit-details-marker {
+  display: none;
+}
+
+.hz-sheet summary .hz-chevron {
+  margin-left: auto;
+}
+
+.hz-sheet .hz-column {
+  padding: 0 0 16px;
+}
+
+.hz-sheet .hz-column-title {
+  margin: 4px 0 2px;
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+.hz-sheet .hz-column a,
+.hz-sheet .hz-column[data-lead] a {
+  display: flex;
+  width: auto;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 44px;
+  margin: 0;
+  padding: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--weight-normal);
+  letter-spacing: 0;
+  line-height: 1.2;
+  white-space: normal;
+}
+
+.hz-sheet .hz-column[data-lead] a {
+  font-size: var(--text-xl);
+}
+
+.hz-sheet .hz-doors {
+  display: grid;
+  gap: 4px;
+  padding-top: 20px;
+}
+
+.hz-sheet .hz-door {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 44px;
+  font-size: var(--text-lg);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.hz-sheet .hz-try {
+  height: 48px;
+  margin-top: 12px;
+  font-size: var(--text-base);
+}
+
+/* One compact bar on a phone and a tablet: the name, search, and the menu. */
+@media (max-width: 1023px) {
+  .hz-masthead .hz-nav,
+  .hz-masthead .hz-login,
+  .hz-masthead .hz-end > .hz-try,
+  .hz-masthead .hz-brand .hz-company {
+    display: none;
+  }
+
+  .hz-masthead .hz-brand .hz-wordmark {
+    padding-right: 12px;
+  }
+
+  .hz-masthead .hz-find {
+    width: 44px;
+    height: 44px;
+    margin-left: auto;
+  }
+
+  .hz-masthead .hz-end {
+    margin-left: 0;
+  }
+
+  .hz-masthead .hz-toggle {
+    display: inline-grid;
+  }
+}
+
+/* Between a tablet and a wide laptop the row keeps its labels and drops its marks. */
+@media (min-width: 1024px) and (max-width: 1199px) {
+  .hz-masthead .hz-nav .hz-mark {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-masthead .hz-plane,
+  .hz-masthead .hz-card,
+  .hz-sheet {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.27.22",
+  "version": "8.27.23",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {
@@ -91,6 +91,19 @@
       "require": "./dist/glass.cjs",
       "default": "./dist/glass.js"
     },
+    "./masthead": {
+      "types": "./dist/masthead/index.d.ts",
+      "import": "./dist/masthead/index.js",
+      "require": "./dist/masthead/index.cjs",
+      "default": "./dist/masthead/index.js"
+    },
+    "./masthead/nav": {
+      "types": "./dist/masthead/nav.d.ts",
+      "import": "./dist/masthead/nav.js",
+      "require": "./dist/masthead/nav.cjs",
+      "default": "./dist/masthead/nav.js"
+    },
+    "./masthead.css": "./dist/masthead.css",
     "./product": {
       "types": "./dist/product/index.d.ts",
       "import": "./dist/product/index.js",
@@ -287,6 +300,7 @@
     "@hanzogui/config": "^8.3.5",
     "@hanzogui/lucide-icons-2": "^8.3.5",
     "@hanzogui/next-theme": "^8.3.5",
+    "@hanzogui/shell": "^8.3.5",
     "@hanzogui/telemetry": "^8.3.5",
     "@hanzogui/toast": "^8.3.5",
     "next": ">=16.3.3",
@@ -311,6 +325,9 @@
     "@hanzogui/next-theme": {
       "optional": true
     },
+    "@hanzogui/shell": {
+      "optional": true
+    },
     "next": {
       "optional": true
     },
@@ -329,6 +346,7 @@
     "@hanzogui/core": "8.3.5",
     "@hanzogui/lucide-icons-2": "8.3.5",
     "@hanzogui/next-theme": "8.3.5",
+    "@hanzogui/shell": "8.3.5",
     "@hanzogui/telemetry": "8.3.5",
     "@hanzogui/toast": "8.3.5",
     "@hanzogui/web": "8.3.5",
@@ -351,7 +369,7 @@
   "license": "Apache-2.0 OR MIT",
   "author": "Hanzo AI <dev@hanzo.ai>",
   "scripts": {
-    "build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && node scripts/compose-theme.mjs && cp src/styles/motion.css dist/styles/motion.css && cp src/next.cjs dist/next.cjs && node scripts/postbuild.mjs && node scripts/gen-css.mjs",
+    "build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && node scripts/compose-theme.mjs && cp src/styles/motion.css dist/styles/motion.css && cp src/masthead/masthead.css dist/masthead.css && cp src/next.cjs dist/next.cjs && node scripts/postbuild.mjs && node scripts/gen-css.mjs",
     "clean": "rm -rf dist dist-cjs types",
     "gen:primitives": "node scripts/gen-primitives.mjs",
     "tc": "tsc --noEmit",