@godxjp/ui 23.4.12 → 24.1.0

package/dist/brand/godx-artwork.generated.d.ts

@@ -0,0 +1,10 @@
+export declare const GODX_ARTWORK_ID_TOKEN = "__GXID__";
+export interface BrandArtwork {
+    readonly viewBox: string;
+    /** Inner SVG markup — package-owned static artwork, never user input. */
+    readonly markup: string;
+}
+export declare const GODX_LOCKUP_LIGHT: BrandArtwork;
+export declare const GODX_LOCKUP_DARK: BrandArtwork;
+export declare const GODX_MARK_LIGHT: BrandArtwork;
+export declare const GODX_MARK_DARK: BrandArtwork;

package/dist/brand/godx-artwork.generated.js

@@ -0,0 +1,24 @@
+const GODX_ARTWORK_ID_TOKEN = "__GXID__";
+const GODX_LOCKUP_LIGHT = Object.freeze({
+  viewBox: "30 30 871.285714 182.000000",
+  markup: '<defs>\n  <radialGradient id="__GXID__-gx-lockup-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.46" stop-color="#3700A6"/><stop offset="1" stop-color="#0B0F3B"/>\n  </radialGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="1" stop-color="#980BFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n    <stop offset="0" stop-color="#6500E5"/><stop offset="0.40" stop-color="#A611FF"/><stop offset="1" stop-color="#FF3DFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.28" stop-color="#310077"/><stop offset="0.62" stop-color="#990DFF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.70" stop-color="#21005D"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.55" stop-color="#21005D"/><stop offset="1" stop-color="#0B0F3B"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.6" stop-color="#9A45FF"/><stop offset="1" stop-color="#D8BCFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-l-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#E8DAFF"/><stop offset="0.46" stop-color="#B264FF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <clipPath id="__GXID__-gx-lockup-l-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-lockup-l-godx-logo" transform="translate(5 7)">\n<path id="__GXID__-gx-lockup-l-icon-body" fill="url(#__GXID__-gx-lockup-l-iconBodyGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-lockup-l-icon-arrow" fill="url(#__GXID__-gx-lockup-l-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-lockup-l-arrow-fold" clip-path="url(#__GXID__-gx-lockup-l-arrowClip)" fill="url(#__GXID__-gx-lockup-l-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-g" fill="#0B0F3B" fill-rule="evenodd" d="M428 76 L399 98 C391 86 378 79 365 79 C342 79 325 98 325 121 C325 144 343 163 365 163 C382 163 395 153 402 137 H362 V107 H442 V121 C442 165 409 198 365 198 C322 198 287 164 287 121 C287 78 322 44 365 44 C390 44 413 57 428 76 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-o" fill="#0B0F3B" fill-rule="evenodd" d="M566 142.5 C566 173.704 539.585 199 507 199 C474.415 199 448 173.704 448 142.5 C448 111.296 474.415 86 507 86 C539.585 86 566 111.296 566 142.5 Z M533.5 142.5 C533.5 156.583 521.636 168 507 168 C492.364 168 480.5 156.583 480.5 142.5 C480.5 128.417 492.364 117 507 117 C521.636 117 533.5 128.417 533.5 142.5 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-d" fill="#0B0F3B" fill-rule="evenodd" d="M574 44 H650 C698 44 732 75 732 121 C732 162 698 198 650 198 H574 Z M616.5 78 H649 C673 78 690 96 690 121 C690 146 673 164 649 164 H616.5 Z"/>\n<path id="__GXID__-gx-lockup-l-x-upper" fill="url(#__GXID__-gx-lockup-l-xUpperGradient)" fill-rule="evenodd" d="M715 44 H762 Q764 44 765 46 L801 86 L774 117 L713 47 Q711 44 715 44 Z"/>\n<path id="__GXID__-gx-lockup-l-x-diagonal" fill="url(#__GXID__-gx-lockup-l-xMainGradient)" fill-rule="evenodd" d="M844 42 H895 Q897 42 895 44 L761 196 Q759 198 757 198 H711 Q708 198 710 196 L841 44 Q843 42 844 42 Z"/>\n<path id="__GXID__-gx-lockup-l-x-lower" fill="url(#__GXID__-gx-lockup-l-xLowerGradient)" fill-rule="evenodd" d="M831 121 L895 196 Q898 199 894 199 H847 Q844 199 842 197 L805 153 Q803 151 805 149 Z"/>\n</g>'
+});
+const GODX_LOCKUP_DARK = Object.freeze({
+  viewBox: "30 30 871.285714 182.000000",
+  markup: '<defs>\n  <radialGradient id="__GXID__-gx-lockup-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.46" stop-color="#3700A6"/><stop offset="1" stop-color="#0B0F3B"/>\n  </radialGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="1" stop-color="#980BFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n    <stop offset="0" stop-color="#6500E5"/><stop offset="0.40" stop-color="#A611FF"/><stop offset="1" stop-color="#FF3DFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.28" stop-color="#310077"/><stop offset="0.62" stop-color="#990DFF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.70" stop-color="#21005D"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.55" stop-color="#21005D"/><stop offset="1" stop-color="#0B0F3B"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.6" stop-color="#9A45FF"/><stop offset="1" stop-color="#D8BCFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-lockup-d-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#E8DAFF"/><stop offset="0.46" stop-color="#B264FF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <clipPath id="__GXID__-gx-lockup-d-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-lockup-d-godx-logo" transform="translate(5 7)">\n<path id="__GXID__-gx-lockup-d-icon-body" fill="url(#__GXID__-gx-lockup-d-reverseIconGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-lockup-d-icon-arrow" fill="url(#__GXID__-gx-lockup-d-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-lockup-d-arrow-fold" clip-path="url(#__GXID__-gx-lockup-d-arrowClip)" fill="url(#__GXID__-gx-lockup-d-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-g" fill="#FFFFFF" fill-rule="evenodd" d="M428 76 L399 98 C391 86 378 79 365 79 C342 79 325 98 325 121 C325 144 343 163 365 163 C382 163 395 153 402 137 H362 V107 H442 V121 C442 165 409 198 365 198 C322 198 287 164 287 121 C287 78 322 44 365 44 C390 44 413 57 428 76 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-o" fill="#FFFFFF" fill-rule="evenodd" d="M566 142.5 C566 173.704 539.585 199 507 199 C474.415 199 448 173.704 448 142.5 C448 111.296 474.415 86 507 86 C539.585 86 566 111.296 566 142.5 Z M533.5 142.5 C533.5 156.583 521.636 168 507 168 C492.364 168 480.5 156.583 480.5 142.5 C480.5 128.417 492.364 117 507 117 C521.636 117 533.5 128.417 533.5 142.5 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-d" fill="#FFFFFF" fill-rule="evenodd" d="M574 44 H650 C698 44 732 75 732 121 C732 162 698 198 650 198 H574 Z M616.5 78 H649 C673 78 690 96 690 121 C690 146 673 164 649 164 H616.5 Z"/>\n<path id="__GXID__-gx-lockup-d-x-upper" fill="#FFFFFF" fill-rule="evenodd" d="M715 44 H762 Q764 44 765 46 L801 86 L774 117 L713 47 Q711 44 715 44 Z"/>\n<path id="__GXID__-gx-lockup-d-x-diagonal" fill="url(#__GXID__-gx-lockup-d-reverseXMainGradient)" fill-rule="evenodd" d="M844 42 H895 Q897 42 895 44 L761 196 Q759 198 757 198 H711 Q708 198 710 196 L841 44 Q843 42 844 42 Z"/>\n<path id="__GXID__-gx-lockup-d-x-lower" fill="#FFFFFF" fill-rule="evenodd" d="M831 121 L895 196 Q898 199 894 199 H847 Q844 199 842 197 L805 153 Q803 151 805 149 Z"/>\n</g>'
+});
+const GODX_MARK_LIGHT = Object.freeze({
+  viewBox: "30 30 241.000000 182.000000",
+  markup: '<defs>\n  <radialGradient id="__GXID__-gx-mark-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.46" stop-color="#3700A6"/><stop offset="1" stop-color="#0B0F3B"/>\n  </radialGradient>\n  <linearGradient id="__GXID__-gx-mark-l-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="1" stop-color="#980BFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n    <stop offset="0" stop-color="#6500E5"/><stop offset="0.40" stop-color="#A611FF"/><stop offset="1" stop-color="#FF3DFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.28" stop-color="#310077"/><stop offset="0.62" stop-color="#990DFF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.70" stop-color="#21005D"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.55" stop-color="#21005D"/><stop offset="1" stop-color="#0B0F3B"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.6" stop-color="#9A45FF"/><stop offset="1" stop-color="#D8BCFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-l-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#E8DAFF"/><stop offset="0.46" stop-color="#B264FF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <clipPath id="__GXID__-gx-mark-l-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-mark-l-godx-icon" transform="translate(5 7)">\n<path id="__GXID__-gx-mark-l-icon-body" fill="url(#__GXID__-gx-mark-l-iconBodyGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-mark-l-icon-arrow" fill="url(#__GXID__-gx-mark-l-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-mark-l-arrow-fold" clip-path="url(#__GXID__-gx-mark-l-arrowClip)" fill="url(#__GXID__-gx-mark-l-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n</g>'
+});
+const GODX_MARK_DARK = Object.freeze({
+  viewBox: "30 30 241.000000 182.000000",
+  markup: '<defs>\n  <radialGradient id="__GXID__-gx-mark-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.46" stop-color="#3700A6"/><stop offset="1" stop-color="#0B0F3B"/>\n  </radialGradient>\n  <linearGradient id="__GXID__-gx-mark-d-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="1" stop-color="#980BFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n    <stop offset="0" stop-color="#6500E5"/><stop offset="0.40" stop-color="#A611FF"/><stop offset="1" stop-color="#FF3DFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.28" stop-color="#310077"/><stop offset="0.62" stop-color="#990DFF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n    <stop offset="0" stop-color="#0B0F3B"/><stop offset="0.70" stop-color="#21005D"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.55" stop-color="#21005D"/><stop offset="1" stop-color="#0B0F3B"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n    <stop offset="0" stop-color="#7A00FF"/><stop offset="0.6" stop-color="#9A45FF"/><stop offset="1" stop-color="#D8BCFF"/>\n  </linearGradient>\n  <linearGradient id="__GXID__-gx-mark-d-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n    <stop offset="0" stop-color="#E8DAFF"/><stop offset="0.46" stop-color="#B264FF"/><stop offset="1" stop-color="#7A00FF"/>\n  </linearGradient>\n  <clipPath id="__GXID__-gx-mark-d-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-mark-d-godx-icon" transform="translate(5 7)">\n<path id="__GXID__-gx-mark-d-icon-body" fill="url(#__GXID__-gx-mark-d-reverseIconGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-mark-d-icon-arrow" fill="url(#__GXID__-gx-mark-d-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-mark-d-arrow-fold" clip-path="url(#__GXID__-gx-mark-d-arrowClip)" fill="url(#__GXID__-gx-mark-d-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n</g>'
+});
+export {
+  GODX_ARTWORK_ID_TOKEN,
+  GODX_LOCKUP_DARK,
+  GODX_LOCKUP_LIGHT,
+  GODX_MARK_DARK,
+  GODX_MARK_LIGHT
+};

package/dist/brand/godx-mark.d.ts

@@ -0,0 +1,39 @@
+/**
+ * THE FLAT GoDX MARK — the cut EMAIL paints. The web uses the master instead.
+ *
+ * Brand identity v2.3 requires the master SVG with its gradients and a light/dark variant
+ * (`brand/godx-artwork.generated.ts`), and forbids re-tinting it. An email cannot honour that:
+ * Outlook's Word renderer drops SVG gradients, `prefers-color-scheme` reaches only some clients,
+ * and a delivered message cannot swap a variant. So email paints the kit's own FLAT cut — a
+ * different brand ASSET, which is why the kit ships one — in a colour the template supplies.
+ *
+ * Brand identity v2.3. The coordinates are the kit's own normalised construction data
+ * (`02_Construction/GoDX/GoDX-geometry-v2_2.json`, origin already at 0,0), not a redraw and not a
+ * trace: a future artwork revision is a copy-paste of two `d` strings into this file.
+ *
+ * WHY IT IS STILL SHARED. `src/email` may only import its own siblings, so it receives a generated
+ * copy of these paths (`gen-email-tokens.mjs`). This file is the declaration both that generator
+ * and its `--check` guard compare against, so the email mark cannot drift from the package's own
+ * flat artwork — the drift that was caught once already.
+ *
+ * MONOCHROME. The kit also ships a gradient cut (#7A00FF → #3700A6 → #0B0F3B). It is deliberately
+ * not used: this mark is painted by a token (`--logo-godx-color` on the web, a colour argument in
+ * email) so it re-tints per theme and knocks out on dark surfaces. A baked gradient can do neither,
+ * and email clients are worse at gradients than they are at paths.
+ */
+/** The artwork's own coordinate space, before fitting. */
+export declare const GODX_MARK_SOURCE: Readonly<{
+    width: 241;
+    height: 182;
+}>;
+/** The square box every renderer draws into. */
+export declare const GODX_MARK_VIEW_BOX = "0 0 32 32";
+/**
+ * Fits 241×182 into the square box, centred vertically.
+ * scale = 32 / 241 = 0.132780; y = (32 − 182 × scale) / 2 = 3.917.
+ */
+export declare const GODX_MARK_TRANSFORM = "translate(0 3.917) scale(0.132780)";
+/** The "G" body. */
+export declare const GODX_MARK_BODY_PATH = "M93.0 0.0H158.0C161.0 0.0 162.0 1.0 164.0 3.0L197.0 41.0Q201.0 46.0 195.0 46.0H97.0C71.0 46.0 50.0 68.0 50.0 94.0C50.0 119.0 72.0 138.0 97.0 138.0H126.0Q132.0 138.0 128.0 143.0L95.0 180.0Q93.0 182.0 90.0 182.0C65.0 182.0 44.0 171.0 25.0 151.0C7.0 132.0 0.0 115.0 0.0 94.0C0.0 69.0 11.0 52.0 31.0 31.0C52.0 9.0 70.0 0.0 93.0 0.0Z";
+/** The arrow that crosses it. */
+export declare const GODX_MARK_ARROW_PATH = "M106.0 74.0H219.0Q222.0 74.0 224.0 77.0L239.0 94.0Q243.0 99.0 239.0 104.0L169.0 178.0Q165.0 182.0 160.0 182.0H114.0Q108.0 182.0 112.0 178.0L151.0 137.0Q154.0 134.0 151.0 131.0L104.0 81.0Q98.0 74.0 106.0 74.0Z";

package/dist/brand/godx-mark.js

@@ -0,0 +1,12 @@
+const GODX_MARK_SOURCE = Object.freeze({ width: 241, height: 182 });
+const GODX_MARK_VIEW_BOX = "0 0 32 32";
+const GODX_MARK_TRANSFORM = "translate(0 3.917) scale(0.132780)";
+const GODX_MARK_BODY_PATH = "M93.0 0.0H158.0C161.0 0.0 162.0 1.0 164.0 3.0L197.0 41.0Q201.0 46.0 195.0 46.0H97.0C71.0 46.0 50.0 68.0 50.0 94.0C50.0 119.0 72.0 138.0 97.0 138.0H126.0Q132.0 138.0 128.0 143.0L95.0 180.0Q93.0 182.0 90.0 182.0C65.0 182.0 44.0 171.0 25.0 151.0C7.0 132.0 0.0 115.0 0.0 94.0C0.0 69.0 11.0 52.0 31.0 31.0C52.0 9.0 70.0 0.0 93.0 0.0Z";
+const GODX_MARK_ARROW_PATH = "M106.0 74.0H219.0Q222.0 74.0 224.0 77.0L239.0 94.0Q243.0 99.0 239.0 104.0L169.0 178.0Q165.0 182.0 160.0 182.0H114.0Q108.0 182.0 112.0 178.0L151.0 137.0Q154.0 134.0 151.0 131.0L104.0 81.0Q98.0 74.0 106.0 74.0Z";
+export {
+  GODX_MARK_ARROW_PATH,
+  GODX_MARK_BODY_PATH,
+  GODX_MARK_SOURCE,
+  GODX_MARK_TRANSFORM,
+  GODX_MARK_VIEW_BOX
+};

package/dist/components/general/logo.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 export type LogoSize = "xs" | "sm" | "md" | "lg";
 export type LogoTone = "primary" | "success";
-export type LogoMark = "glyph" | "godx";
+export type LogoMark = "glyph" | "godx" | "godx-lockup";
 export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an

package/dist/components/general/logo.js

@@ -1,5 +1,13 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import {
+  GODX_ARTWORK_ID_TOKEN,
+  GODX_LOCKUP_DARK,
+  GODX_LOCKUP_LIGHT,
+  GODX_MARK_DARK,
+  GODX_MARK_LIGHT
+} from "../../brand/godx-artwork.generated.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const X_HEIGHT_TOP = /^[acegmnopqrsuvwxyz]+$/;
@@ -38,7 +46,13 @@ function logoGlyphAdvance(glyph) {
   return counts;
 }
 function MarkArtwork({ mark, glyph }) {
-  if (mark !== "godx") {
+  const instanceId = React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const artwork = mark === "godx-lockup" ? [GODX_LOCKUP_LIGHT, GODX_LOCKUP_DARK] : [GODX_MARK_LIGHT, GODX_MARK_DARK];
+  const html = React.useMemo(
+    () => artwork.map((a) => a.markup.replaceAll(GODX_ARTWORK_ID_TOKEN, instanceId)),
+    [artwork, instanceId]
+  );
+  if (mark === "glyph") {
     const advance = logoGlyphAdvance(glyph);
     return /* @__PURE__ */ jsx(
       "span",
@@ -56,25 +70,21 @@ function MarkArtwork({ mark, glyph }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: ["light", "dark"].map((scheme, index) => /* @__PURE__ */ jsx(
     "svg",
     {
       "data-slot": "logo-artwork",
-      viewBox: "0 0 32 32",
-      width: "32",
-      height: "32",
+      "data-artwork": mark,
+      "data-scheme": scheme,
+      viewBox: artwork[index].viewBox,
       focusable: "false",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M8 7h16a7 7 0 0 1 7 7v4a7 7 0 0 1-7 7H8a7 7 0 0 1-7-7v-4a7 7 0 0 1 7-7Zm0 6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H8Z"
-        }
-      )
-    }
-  );
+      dangerouslySetInnerHTML: {
+        __html: html[index]
+      }
+    },
+    scheme
+  )) });
 }
 const Logo = React.forwardRef(
   ({

package/dist/components/navigation/dropdown-menu.js

@@ -29,6 +29,23 @@ const DROPDOWN_MENU_PLACEMENT = {
   bottomStart: { side: "bottom", align: "start" },
   bottomEnd: { side: "bottom", align: "end" }
 };
+class MenuCollectionBoundary extends React.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  // Logged in EVERY build, not only development: "blank, with nothing in the console" is the half
+  // of gh#637 that cost the reporter a night of instrumenting `Object.prototype`.
+  componentDidCatch(error) {
+    console.error(
+      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Underlying error:",
+      error
+    );
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
 function borrowedTag(children, asChild) {
   return asChild ? React.Children.only(children) : null;
 }
@@ -357,7 +374,7 @@ function DropdownMenuContent({
         )
       ),
       children: [
-        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }),
+        /* @__PURE__ */ jsx(MenuCollectionBoundary, { children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }) }),
         arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
           "svg",
           {
@@ -601,7 +618,7 @@ function DropdownMenuSubContent({
           }
         )
       ),
-      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
+      children: /* @__PURE__ */ jsx(MenuCollectionBoundary, { children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }) })
     }
   );
 }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "23.4.12",
+  "version": "24.1.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/email/brand-mark.d.ts

@@ -14,7 +14,8 @@ export interface EmailBrandMarkRect {
     readonly radius: number;
 }
 /** Intrinsic coordinate space of the mark artwork. */
-export declare const EMAIL_BRAND_MARK_VIEWBOX = "0 0 32 32";
+/** The component's box, read from the shared artwork so the two cannot drift. */
+export declare const EMAIL_BRAND_MARK_VIEWBOX: "0 0 32 32";
 /** The emerald capsule. */
 export declare const EMAIL_BRAND_MARK_CAPSULE: EmailBrandMarkRect;
 /** The internal light glyph bar inside the capsule. */

package/dist/email/brand-mark.js

@@ -1,6 +1,6 @@
 import { EMAIL_COLORS } from "./color.js";
-import { EMAIL_GEOMETRY_SOURCE } from "./tokens.generated.js";
-const EMAIL_BRAND_MARK_VIEWBOX = "0 0 32 32";
+import { EMAIL_GEOMETRY_SOURCE, EMAIL_MARK_SOURCE } from "./tokens.generated.js";
+const EMAIL_BRAND_MARK_VIEWBOX = EMAIL_MARK_SOURCE.viewBox;
 const EMAIL_BRAND_MARK_CAPSULE = Object.freeze({
   x: 1,
   y: 7,
@@ -22,8 +22,8 @@ function roundedRectPath({ x, y, width, height, radius }) {
   const v = height - 2 * radius;
   return `M${x + radius} ${y}h${h}${arc(radius, radius, radius)}v${v}${arc(radius, -radius, radius)}H${x + radius}${arc(radius, -radius, -radius)}v-${v}${arc(radius, radius, -radius)}Z`;
 }
-const CAPSULE_PATH = roundedRectPath(EMAIL_BRAND_MARK_CAPSULE);
-const GLYPH_PATH = roundedRectPath(EMAIL_BRAND_MARK_GLYPH);
+const CAPSULE_PATH = EMAIL_MARK_SOURCE.bodyPath;
+const GLYPH_PATH = EMAIL_MARK_SOURCE.arrowPath;
 const DEFAULT_WIDTH = Number.parseFloat(EMAIL_GEOMETRY_SOURCE["--email-mark-width"]);
 const DEFAULT_HEIGHT = Number.parseFloat(EMAIL_GEOMETRY_SOURCE["--email-mark-height"]);
 function options(o = {}) {
@@ -39,7 +39,7 @@ const attr = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").repla
 function emailBrandMarkSvg(o = {}) {
   const { width, height, color, glyphColor, label } = options(o);
   const a11y = label ? ` role="img" aria-label="${attr(label)}"` : ` role="presentation" aria-hidden="true"`;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${EMAIL_BRAND_MARK_VIEWBOX}" focusable="false"${a11y} style="display:block;border:0;outline:none;text-decoration:none"><path fill="${color}" d="${CAPSULE_PATH}"/><path fill="${glyphColor}" d="${GLYPH_PATH}"/></svg>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${EMAIL_BRAND_MARK_VIEWBOX}" focusable="false"${a11y} style="display:block;border:0;outline:none;text-decoration:none"><g transform="${EMAIL_MARK_SOURCE.transform}" fill-rule="evenodd"><path fill="${color}" d="${CAPSULE_PATH}"/><path fill="${glyphColor}" d="${GLYPH_PATH}"/></g></svg>`;
 }
 function emailBrandMarkDataUri(o = {}) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(emailBrandMarkSvg(o))}`;

package/dist/email/tokens.generated.d.ts

@@ -37,7 +37,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly primary: {
         readonly cssVar: "--primary";
-        readonly hsl: "204 100% 37%";
+        readonly hsl: "268.7 100% 50%";
     };
     readonly primaryForeground: {
         readonly cssVar: "--primary-foreground";
@@ -45,11 +45,11 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly focus: {
         readonly cssVar: "--primary";
-        readonly hsl: "204 100% 37%";
+        readonly hsl: "268.7 100% 50%";
     };
     readonly brand: {
         readonly cssVar: "--brand";
-        readonly hsl: "160.5 100% 29.6%";
+        readonly hsl: "268.7 100% 50%";
     };
     readonly brandForeground: {
         readonly cssVar: "--brand-foreground";
@@ -96,7 +96,7 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
     };
     readonly primary: {
         readonly cssVar: "--primary";
-        readonly hsl: "204 90% 60%";
+        readonly hsl: "268.7 100% 86.9%";
     };
     readonly primaryForeground: {
         readonly cssVar: "--primary-foreground";
@@ -104,11 +104,11 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
     };
     readonly focus: {
         readonly cssVar: "--primary";
-        readonly hsl: "204 90% 60%";
+        readonly hsl: "268.7 100% 86.9%";
     };
     readonly brand: {
         readonly cssVar: "--brand";
-        readonly hsl: "160.5 100% 36%";
+        readonly hsl: "268.7 100% 86.9%";
     };
     readonly brandForeground: {
         readonly cssVar: "--brand-foreground";
@@ -165,3 +165,13 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-mobile-heading-font-size": "16px";
     readonly "--email-mobile-cta-width": "100%";
 };
+/**
+ * The GoDX identity artwork — the same two paths `<Logo mark="godx" />` paints, from
+ * `src/brand/godx-mark.ts`. Regenerate with the rest of this file; `--check` fails on drift.
+ */
+export declare const EMAIL_MARK_SOURCE: {
+    readonly viewBox: "0 0 32 32";
+    readonly transform: "translate(0 3.917) scale(0.132780)";
+    readonly bodyPath: "M93.0 0.0H158.0C161.0 0.0 162.0 1.0 164.0 3.0L197.0 41.0Q201.0 46.0 195.0 46.0H97.0C71.0 46.0 50.0 68.0 50.0 94.0C50.0 119.0 72.0 138.0 97.0 138.0H126.0Q132.0 138.0 128.0 143.0L95.0 180.0Q93.0 182.0 90.0 182.0C65.0 182.0 44.0 171.0 25.0 151.0C7.0 132.0 0.0 115.0 0.0 94.0C0.0 69.0 11.0 52.0 31.0 31.0C52.0 9.0 70.0 0.0 93.0 0.0Z";
+    readonly arrowPath: "M106.0 74.0H219.0Q222.0 74.0 224.0 77.0L239.0 94.0Q243.0 99.0 239.0 104.0L169.0 178.0Q165.0 182.0 160.0 182.0H114.0Q108.0 182.0 112.0 178.0L151.0 137.0Q154.0 134.0 151.0 131.0L104.0 81.0Q98.0 74.0 106.0 74.0Z";
+};

package/dist/email/tokens.generated.js

@@ -29,7 +29,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "primary": {
     "cssVar": "--primary",
-    "hsl": "204 100% 37%"
+    "hsl": "268.7 100% 50%"
   },
   "primaryForeground": {
     "cssVar": "--primary-foreground",
@@ -37,11 +37,11 @@ const EMAIL_COLOR_SOURCE = {
   },
   "focus": {
     "cssVar": "--primary",
-    "hsl": "204 100% 37%"
+    "hsl": "268.7 100% 50%"
   },
   "brand": {
     "cssVar": "--brand",
-    "hsl": "160.5 100% 29.6%"
+    "hsl": "268.7 100% 50%"
   },
   "brandForeground": {
     "cssVar": "--brand-foreground",
@@ -87,7 +87,7 @@ const EMAIL_COLOR_SOURCE_DARK = {
   },
   "primary": {
     "cssVar": "--primary",
-    "hsl": "204 90% 60%"
+    "hsl": "268.7 100% 86.9%"
   },
   "primaryForeground": {
     "cssVar": "--primary-foreground",
@@ -95,11 +95,11 @@ const EMAIL_COLOR_SOURCE_DARK = {
   },
   "focus": {
     "cssVar": "--primary",
-    "hsl": "204 90% 60%"
+    "hsl": "268.7 100% 86.9%"
   },
   "brand": {
     "cssVar": "--brand",
-    "hsl": "160.5 100% 36%"
+    "hsl": "268.7 100% 86.9%"
   },
   "brandForeground": {
     "cssVar": "--brand-foreground",
@@ -155,8 +155,15 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-mobile-heading-font-size": "16px",
   "--email-mobile-cta-width": "100%"
 };
+const EMAIL_MARK_SOURCE = {
+  "viewBox": "0 0 32 32",
+  "transform": "translate(0 3.917) scale(0.132780)",
+  "bodyPath": "M93.0 0.0H158.0C161.0 0.0 162.0 1.0 164.0 3.0L197.0 41.0Q201.0 46.0 195.0 46.0H97.0C71.0 46.0 50.0 68.0 50.0 94.0C50.0 119.0 72.0 138.0 97.0 138.0H126.0Q132.0 138.0 128.0 143.0L95.0 180.0Q93.0 182.0 90.0 182.0C65.0 182.0 44.0 171.0 25.0 151.0C7.0 132.0 0.0 115.0 0.0 94.0C0.0 69.0 11.0 52.0 31.0 31.0C52.0 9.0 70.0 0.0 93.0 0.0Z",
+  "arrowPath": "M106.0 74.0H219.0Q222.0 74.0 224.0 77.0L239.0 94.0Q243.0 99.0 239.0 104.0L169.0 178.0Q165.0 182.0 160.0 182.0H114.0Q108.0 182.0 112.0 178.0L151.0 137.0Q154.0 134.0 151.0 131.0L104.0 81.0Q98.0 74.0 106.0 74.0Z"
+};
 export {
   EMAIL_COLOR_SOURCE,
   EMAIL_COLOR_SOURCE_DARK,
-  EMAIL_GEOMETRY_SOURCE
+  EMAIL_GEOMETRY_SOURCE,
+  EMAIL_MARK_SOURCE
 };

package/dist/styles/logo-layout.css

@@ -99,7 +99,6 @@
     height: var(--logo-godx-size, var(--logo-godx-size-md));
     border-radius: 0;
     background: transparent;
-    color: hsl(var(--logo-godx-color, var(--brand)));
   }
 
   .ui-logo[data-mark="godx"][data-size="xs"] {
@@ -117,6 +116,31 @@
     height: var(--logo-godx-size, var(--logo-godx-size-lg));
   }
 
+  .ui-logo[data-mark="godx-lockup"] {
+    width: auto;
+    height: var(--logo-godx-size, var(--logo-godx-size-md));
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .ui-logo[data-mark="godx-lockup"][data-size="xs"] {
+    height: var(--logo-godx-size, var(--logo-godx-size-xs));
+  }
+
+  .ui-logo[data-mark="godx-lockup"][data-size="sm"] {
+    height: var(--logo-godx-size, var(--logo-godx-size-sm));
+  }
+
+  .ui-logo[data-mark="godx-lockup"][data-size="lg"] {
+    height: var(--logo-godx-size, var(--logo-godx-size-lg));
+  }
+
+  .ui-logo[data-mark="godx-lockup"] [data-slot="logo-artwork"] {
+    display: block;
+    height: 100%;
+    width: auto;
+  }
+
   .ui-logo[data-mark="godx"] [data-slot="logo-artwork"] {
     display: block;
     width: 100%;
@@ -156,3 +180,26 @@
     color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--brand))));
   }
 }
+
+[data-slot="logo-artwork"][data-scheme="dark"] {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
+    display: none;
+  }
+  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
+    display: block;
+  }
+}
+
+.dark [data-slot="logo-artwork"][data-scheme="light"],
+:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
+  display: none;
+}
+
+.dark [data-slot="logo-artwork"][data-scheme="dark"],
+:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
+  display: block;
+}

package/dist/styles/shell-layout.css

@@ -2239,6 +2239,11 @@
   }
 
   @media (max-width: 768px) {
+
+    .ui-topbar-item {
+      padding-inline: var(--topbar-item-padding-inline-compact);
+    }
+
     .tb-chip-sep,
     .tb-search .kbd,
 
@@ -2250,8 +2255,12 @@
       width: auto;
 
       flex: 0 0 auto;
-      min-inline-size: var(--control-height);
-      min-width: var(--control-height);
+      min-inline-size: var(--control-height-sm);
+      min-width: var(--control-height-sm);
+      inline-size: var(--control-height-sm);
+      block-size: var(--control-height-sm);
+      justify-content: center;
+      padding-inline: 0;
     }
 
     .tb-search span {

package/dist/tokens/components/logo.css

@@ -14,7 +14,9 @@
   --logo-success-foreground: initial;
   --logo-godx-color: initial;
 
-  --logo-identity-foreground: 48 9% 9%;
+  --logo-identity-foreground: 60 33% 99%;
+
+  --logo-godx-ink-color: 235 68.6% 13.7%;
 
   --logo-glyph-cap-baseline-optical-offset: -0.01em;
   --logo-glyph-cap-descender-optical-offset: -0.09em;
@@ -45,3 +47,10 @@
   --logo-wordmark-font-family: initial;
   --logo-wordmark-color: initial;
 }
+
+.dark,
+:root[data-theme="dark"] {
+  --logo-identity-foreground: 48 9% 9%;
+
+  --logo-godx-ink-color: 140 23.1% 97.5%;
+}

package/dist/tokens/components/shell.css

@@ -101,6 +101,8 @@
   --topbar-center-compact-display: none;
 
   --topbar-item-padding-inline: var(--space-3);
+
+  --topbar-item-padding-inline-compact: var(--space-2);
   --topbar-item-gap: var(--space-2);
   --topbar-item-min-width: var(--control-height);
 

package/dist/tokens/foundation.css

@@ -9,7 +9,7 @@
   --popover: 60 33% 99%;
   --popover-foreground: 48 8% 13%;
 
-  --primary: 204 100% 37%;
+  --primary: 268.7 100% 50%;
   --primary-foreground: 60 33% 99%;
   --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
@@ -34,15 +34,15 @@
   --attention: 25 99% 46%;
   --attention-foreground: 60 33% 99%;
 
-  --brand: 160.5 100% 29.6%;
+  --brand: 268.7 100% 50%;
   --brand-foreground: 60 33% 99%;
 
   --text-tertiary: 44 5% 55%;
   --text-disabled: 40 6% 68%;
   --text-link: 204 100% 39%;
-  --text-brand: 204 100% 39%;
+  --text-brand: 268.3 100% 41.6%;
 
-  --text-primary: 204 100% 30%;
+  --text-primary: 268 100% 34.5%;
   --text-success: 152 84% 22%;
   --text-warning: 36 100% 28%;
   --text-info: 221 70% 38%;
@@ -321,7 +321,7 @@
   --card-foreground: 60 20% 96%;
   --popover: 48 8% 12%;
   --popover-foreground: 60 20% 96%;
-  --primary: 204 90% 60%;
+  --primary: 268.7 100% 86.9%;
   --primary-foreground: 48 9% 9%;
   --secondary: 45 6% 18%;
   --secondary-foreground: 60 20% 96%;
@@ -346,15 +346,15 @@
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
 
-  --brand: 160.5 100% 36%;
+  --brand: 268.7 100% 86.9%;
   --brand-foreground: 48 9% 9%;
 
   --text-tertiary: 44 6% 56%;
   --text-disabled: 45 6% 40%;
   --text-link: 204 90% 66%;
-  --text-brand: 204 90% 66%;
+  --text-brand: 268.7 100% 86.9%;
 
-  --text-primary: 204 90% 64%;
+  --text-primary: 262.7 100% 92.7%;
   --text-success: 146 55% 64%;
   --text-warning: 44 95% 62%;
   --text-info: 221 70% 72%;

package/docs/DEVELOPMENT.md

@@ -122,10 +122,30 @@ pnpm test                 # FULL suite — CI only, never from an agent loop
 pnpm preview:build        # integration test: examples + docs must build — at most once, pre-PR
 pnpm audit                # godxjp-ui-audit — 0 errors for touched files
 pnpm check:mcp-sync       # MCP registry ↔ library export drift guard
+pnpm check:frame-axe      # WCAG 2.2 AA over every frame — see FRAME-A11Y-CI.md
 ```
 
 `pnpm verify` and `pnpm verify:release` run these together (verify:release also builds) — **both include the full suite, so both belong to CI.** Locally, run them at most once immediately before opening a PR, never inside an edit loop and never while other agents are working on the same machine. It needs `pnpm exec playwright install chromium` once locally; see [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) for how to run/scope it, read the evidence, and regenerate its baseline after an accessibility fix.
 
+### Reproducing one screen at one width — the frame routes
+
+Three gates and every bug report start here, so the addressing is written down rather than guessed
+(godx-jp/id#639 burned three attempts on `?frame=…`, which is not a thing):
+
+```
+pnpm preview                                  # :6008
+http://localhost:6008/isolate/<id>            # the demo ALONE, at the real viewport — measure here
+http://localhost:6008/frame/<id>              # the same demo inside the device-preset chrome
+```
+
+`<id>` is the demo's path under `docs/`, minus `.tsx`, with `/` turned into `-`:
+`docs/layout/topbar.tsx` → `layout-topbar`, `docs/data-entry/date-picker.tsx` → `data-entry-date-picker`.
+A file may override it with a `slug` in its frontmatter. Both routes accept
+`?dir=rtl&density=compact&theme=dark&locale=ja`; `/frame/**` additionally takes `?preset=`/`?w=`/`?h=`/`?zoom=`.
+
+For an axe measurement at a given width, drive `/isolate/<id>` with Playwright at that viewport —
+that is what `scripts/topbar-collision-visual.mjs` and the other `test:visual:*` gates do.
+
 All gates are **self-contained** — no internal/external tooling package required. The eslint, prettier, and vitest setup live in the package (`eslint.config.js`, `prettier.config.mjs`, `vitest.config.ts`, `src/test/`), so a fresh checkout can lint/type-check/test without anything beyond the declared devDependencies.
 
 The app side additionally runs **`npm run ui:audit`** (the design-system linter) and must report 0 errors for touched files.

package/docs/FRAME-A11Y-CI.md

@@ -0,0 +1,135 @@
+# Per-frame accessibility CI — `check:frame-axe`
+
+One ruler, run in the repository that owns the CSS.
+
+## Why it exists (gh#643)
+
+`scripts/visual-audit.mjs` carries **eight** rules. A consumer's nightly runs `@axe-core/playwright`
+with **68**. Six of our eight are design-language opinions with no axe equivalent —
+`oversaturated-accent`, `sibling-card-gap`, `row-content-starved`, `emoji-rendered`,
+`alert-controls-misplaced`, `css-layers-missing` — and a design system **should** own those. The
+other sixty (names, roles, `aria-*`, contrast, focus order, target size) were checked **nowhere in
+this repository**, and only in a consumer that cannot fix the CSS, because the CSS is here.
+
+gh#639 is what that costs. A topbar shipped; every gate here said green; `target-size` failed in
+`godx-jp/id`'s nightly at 320px. And our own `target-size-min` could not have caught it at any
+threshold — it measures a **painted box**, and that failure was an **obscured** target (axe:
+`partiallyObscured`, 8×28). Two rulers, and the disagreement only ever surfaces downstream.
+
+## What it does
+
+```bash
+pnpm check:frame-axe                       # every frame, 3 viewports
+pnpm check:frame-axe -- --update           # rewrite the baseline
+pnpm check:frame-axe -- --scope=showcase   # the 30 whole-page frames only, 30s
+pnpm check:frame-axe -- /isolate/layout-topbar   # one route, while fixing
+```
+
+|           |                                                                                   |
+| --------- | --------------------------------------------------------------------------------- |
+| tool      | `@axe-core/playwright`                                                            |
+| tags      | `wcag2a` · `wcag2aa` · `wcag21aa` · `wcag22aa` — **the consumer's set, verbatim** |
+| routes    | every `/isolate/<id>` in `window.__STORY_MANIFEST__` + every `/showcase/<id>`     |
+| viewports | 1440×900 · 375×667 · **320×568**                                                  |
+
+320 is not decoration: it is WCAG 2.2 SC 1.4.10's reflow width, it is the width the consumer's
+nightly runs, and it is the width gh#639 failed at while 390 passed.
+
+Showcases are included on purpose. They are the only frames here shaped like a real screen — a whole
+page, a landmark tree, a focus order — which is precisely the class the component frames cannot
+reach and the consumer has been carrying alone.
+
+## What it found on its first run
+
+54 rows, **159 violation nodes**, on code that passed every other gate in this repository:
+
+| nodes | rows | rule                    | what it means                                                                                                                  |
+| ----: | ---: | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|    62 |   17 | `color-contrast`        | text under 4.5:1 (SC 1.4.3)                                                                                                    |
+|    28 |   16 | `target-size`           | under 24×24 with no spacing exception (SC 2.5.8) — on `Carousel`, `Attachments`, `FilterBar` and `Toolbar`, at **every** width |
+|    21 |    6 | `aria-prohibited-attr`  | an `aria-*` on a role that does not allow it                                                                                   |
+|    18 |    6 | `button-name`           | **a button a screen reader announces as nothing**                                                                              |
+|    18 |    6 | `aria-valid-attr-value` | an `aria-*` pointing at an id that is not there                                                                                |
+|    12 |    3 | `aria-conditional-attr` | an `aria-*` that is invalid in the state it is in                                                                              |
+
+48 of those nodes are on `/isolate/**` — single components, this package's own output — and 111 on
+`/showcase/**`. None of the six rules exists in `scripts/visual-audit.mjs`. The `target-size` rows
+are the sharpest: our own `target-size-min` rule was running on those same frames and reporting them
+clean, because it measures a painted box.
+
+## The baseline is a debt ledger, not an allowlist
+
+The package did not start compliant, and a gate that fails the whole build on its first day gets
+deleted rather than obeyed. `frame-axe-baseline.json` records what was already failing when the gate
+landed, keyed one row per `(route, viewport, rule)`:
+
+```
+"/isolate/layout-topbar @320 target-size": { "count": 2, "help": "…" }
+```
+
+The gate fails on a key that is **not** in the baseline, and on a baselined key whose `count`
+**grows**. A key that stops firing is reported so it can be dropped.
+
+- **Delete rows as you fix them.** `--update` rewrites the file; the diff is the review.
+- **Never add a row by hand to turn a red build green.** That is the one move this file exists to
+  make visible.
+
+## What this gate does NOT do — stated, not hidden
+
+The gate deleted in #492 did three things this one does not, and each is a real gap:
+
+1. **No overlay scope.** It scans the frame as rendered. A menu, dialog, listbox or popover that is
+   closed at rest is never measured, so `aria-hidden-focus` and friends stay outside its field of
+   view. The old gate opened one overlay per frame from a `data-axe-open` attribute; that attribute
+   was removed from the demos along with the gate and would have to come back.
+2. **No chrome/component split.** The old gate held the preview toolbar to zero violations and
+   allowlisted the component scope separately. `/isolate/**` renders the demo alone, so there is
+   little chrome to separate — but `/showcase/**` is scanned whole.
+3. **No per-rule severity.** Every WCAG-tagged rule is treated alike.
+
+## Determinism
+
+Two consecutive sweeps of identical code first disagreed on five `color-contrast` rows: a fade-in
+caught mid-flight renders text at partial opacity and axe scores whatever it finds. A gate that
+disagrees with itself gets ignored, so each page is pinned before the scan —
+`reducedMotion: "reduce"`, an injected stylesheet zeroing every animation and transition duration,
+and `document.fonts.ready` (web fonts change glyph geometry, which changes which boxes overlap,
+which changes what `color-contrast` resolves a background to). Two sweeps after that: identical.
+
+## Cost
+
+|                                    |                                                                                     |
+| ---------------------------------- | ----------------------------------------------------------------------------------- |
+| full sweep                         | **3m20s** locally · **12m01s** on the self-hosted runner — 215 routes × 3 viewports |
+| sequential                         | ~55 min — the three viewport passes run concurrently, which is the whole difference |
+| showcase only (`--scope=showcase`) | 30s                                                                                 |
+
+`--shard=i/n` is in the script for the day the sweep outgrows the lane. Using it adds check-run
+names, which costs nothing here because none of them is in `REQUIRED_CI_CHECK_RUNS`.
+
+## Where it runs
+
+Two lanes, split on a **measurement taken on the runner, not on a laptop**:
+
+| lane                                                              | what                                      | when                                                           | measured                               |
+| ----------------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------- | -------------------------------------- |
+| `ci-browser.yml` · `Per-frame axe (showcases, WCAG 2.2 AA)`       | `--scope=showcase` — 30 whole-page frames | every push to `main`                                           | 30s locally                            |
+| `ci-browser-full.yml` · `Per-frame axe (all frames, WCAG 2.2 AA)` | the full 215-route sweep                  | nightly, `workflow_dispatch`, or a `run-browser` label on a PR | **12m01s on the pool** (3m20s locally) |
+
+The full sweep went into the merge lane first, on the local 3m20s. On the pool's runner the same
+job took **12m01s** — three times the local wall clock and more than twice CONTRACT.md L4's
+five-minute budget for that whole lane. So the merge lane keeps the showcases, which are the only
+frames here shaped like the screens a consumer ships, and the wide matrix moved to the lane this
+repository already reserves for wide matrices.
+
+**Not** the PR lane: that file's own header lists axe among what it deliberately excludes, at a
+measured 653–745s, and that decision is not reopened here.
+
+The job is not in `REQUIRED_CI_CHECK_RUNS` (#492 removed it from the release proof map and this does
+not put it back). It still protects a release through `assertCiProvenance`'s collateral rule — **any**
+red check run on the SHA being published refuses the publish.
+
+## Related
+
+- [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md) — which frames must exist at all.
+- [DEVELOPMENT.md](./DEVELOPMENT.md) §5 — the `/isolate/<id>` · `/frame/<id>` addressing.

package/docs/layout/topbar.tsx

@@ -94,10 +94,18 @@ export default function Demo() {
       >
         {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
       </Button>
-      {/* Decorative mark — hidden below sm so the budget goes to the two real controls. */}
-      <Avatar className="rounded-md">
-        <AvatarFallback className="bg-primary text-primary-foreground font-bold">C</AvatarFallback>
-      </Avatar>
+      {/* Decorative mark — hidden below sm so the budget goes to the two real controls. That was
+          only ever a COMMENT: nothing here hid anything, and at 320px the 32px mark was part of
+          why the switcher beside it was crushed to 0 visible px (gh#639). `hideBelow` is the
+          contract that makes the sentence true — a slot cannot shrink a control, so a bar that
+          does not fit has to drop one. */}
+      <Flex as="span" hideBelow="sm" gap="none">
+        <Avatar className="rounded-md">
+          <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+            C
+          </AvatarFallback>
+        </Avatar>
+      </Flex>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           {/* Button ships `shrink-0`, and only the LAST child of the start slot gets the built-in
@@ -150,10 +158,13 @@ export default function Demo() {
   // end · notifications + user menu, both consumer-composed.
   const end = (
     <>
-      {}
-      <Badge tone="warning" className="text-xs">
-        ステージング
-      </Badge>
+      {/* The environment marker is the end cluster's most optional item — 92px of a 320px bar, and
+          the single biggest reason the start cluster had nothing left. It goes first. */}
+      <Flex as="span" hideBelow="sm" gap="none">
+        <Badge tone="warning" className="text-xs">
+          ステージング
+        </Badge>
+      </Flex>
       <TopbarItem
         aria-label="通知"
         badge={unread ? 12 : undefined}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.12",
-  "godxUiMcp": "23.4.12",
+  "version": "24.1.0",
+  "godxUiMcp": "24.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -52,7 +52,7 @@
     "./styles/*": "./dist/styles/*.css",
     "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
-  "./contracts/measurement.json": "./dist/contracts/measurement.json",
+    "./contracts/measurement.json": "./dist/contracts/measurement.json",
     "./admin": {
       "types": "./dist/components/admin/index.d.ts",
       "import": "./dist/components/admin/index.js"
@@ -322,6 +322,7 @@
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "check:frame-coverage-report": "node scripts/frame-coverage.mjs --check",
+    "check:frame-axe": "node scripts/check-frame-axe.mjs",
     "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
     "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
@@ -469,6 +470,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^10.0.1",
     "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-accordion": "^1.2.20",