@hanzo/ui 8.0.66 → 8.0.68

package/dist/styles.css

@@ -1274,6 +1274,123 @@
   border-top: 1px solid var(--borderColor, var(--border));
 }
 
+/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
+   The composer is where you talk to Hanzo, so it is the thing that should look
+   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
+   pixel of chrome stays monochrome; there is no second exemption, and the two
+   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
+   the surface wearing it the only colour in the product.
+
+   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
+   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
+   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
+   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
+   fix — invisible until a glass panel sat in it, at which point the whole
+   spectrum washed up through the composer's interior. chat also quieted the
+   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
+   copies of one look is how that happens, and neither app could see the other
+   was wrong.
+
+   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
+   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
+   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
+   to be any material — opaque, glass, anything. The stops are declared once and
+   read by both, because duplicated they drift on the first palette change and
+   nobody notices which half moved. */
+
+/* `@property` is what lets a conic angle animate. Where it is unsupported the
+   ring is simply static, which is a fine floor. */
+@property --hz-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+:root {
+  /* One sweep, closing on the stop it opened with — a conic gradient whose
+     first and last stop differ shows a hard seam. */
+  --hz-spectrum: rgba(8, 148, 255, 0.45), rgba(201, 89, 221, 0.48),
+    rgba(255, 46, 84, 0.4), rgba(255, 144, 4, 0.4), rgba(8, 148, 255, 0.45);
+}
+
+@keyframes hzComposerSpin {
+  to {
+    --hz-angle: 360deg;
+  }
+}
+
+.hz-composer {
+  position: relative;
+  isolation: isolate;
+  padding: 1.5px;
+}
+
+/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
+   paint outside it — `content-box` is the hole, the full box the plate, and
+   `exclude` leaves the lip. */
+.hz-composer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1.5px;
+  border-radius: inherit;
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
+     declaring this first lets the shorthand reset it to `source-over` — the
+     filled disc again, on exactly the browsers too old to have `mask-composite`
+     at all. */
+  -webkit-mask-composite: xor;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* The halo lights the air AROUND the box and nothing behind it. */
+.hz-composer::after {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  padding: 6px;
+  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
+     inherited corner on this larger box curves too tight and reads as a second,
+     mismatched rounding just outside the panel. */
+  border-radius: calc(1.5rem + 6px);
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  filter: blur(16px);
+  opacity: 0.22;
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* The panel sits above ring and halo. */
+.hz-composer > * {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-composer::before,
+  .hz-composer::after {
+    animation: none;
+  }
+}
+
 /* @hanzo/ui motion primitives — the calm, restrained animation vocabulary the
    Hanzo surfaces share. One place defines the easing; components apply the class.
    `className` forwards to the underlying DOM node on web, so the browser
@@ -2135,11 +2252,21 @@
 :root ._bbrr-c-radius-4{border-bottom-right-radius:var(--c-radius-4);}
 :root ._bbrr-c-radius-6{border-bottom-right-radius:var(--c-radius-6);}
 :root ._bbs-solid._bbs-solid{border-bottom-style:solid;}
+:root:root:root  ._bg-0active-background:active{background-color:var(--background) !important;}
+:root:root:root  ._bg-0active-backgroundF3405682:active{background-color:var(--backgroundFocus) !important;}
 :root:root:root  ._bg-0active-backgroundP3496915:active{background-color:var(--backgroundPress) !important;}
+:root:root:root  ._bg-0active-color3:active{background-color:var(--color3) !important;}
+:root:root:root:root  ._bg-0focus-backgroundH3423444:focus{background-color:var(--backgroundHover) !important;}
+:root:root:root:root  ._bg-0focus-color3:focus{background-color:var(--color3) !important;}
 :root:root:root:root  ._bg-0focus-color4:focus{background-color:var(--color4) !important;}
+:root:root:root:root  ._bg-0focus-color5:focus{background-color:var(--color5) !important;}
+:root:root:root:root  ._bg-0focus-color6:focus{background-color:var(--color6) !important;}
+@media (hover) {:root:root  ._bg-0hover-background:hover{background-color:var(--background) !important;}}
 @media (hover) {:root:root  ._bg-0hover-backgroundH3423444:hover{background-color:var(--backgroundHover) !important;}}
+@media (hover) {:root:root  ._bg-0hover-color2:hover{background-color:var(--color2) !important;}}
 @media (hover) {:root:root  ._bg-0hover-color3:hover{background-color:var(--color3) !important;}}
 @media (hover) {:root:root  ._bg-0hover-color4:hover{background-color:var(--color4) !important;}}
+@media (hover) {:root:root  ._bg-0hover-color5:hover{background-color:var(--color5) !important;}}
 @media (hover) {:root:root  ._bg-0hover-color6:hover{background-color:var(--color6) !important;}}
 :root ._bg-background{background-color:var(--background);}
 :root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
@@ -2149,14 +2276,20 @@
 :root ._bg-color3{background-color:var(--color3);}
 :root ._bg-color4{background-color:var(--color4);}
 :root ._bg-color5{background-color:var(--color5);}
+:root ._bg-color6{background-color:var(--color6);}
 :root ._bg-red9{background-color:var(--red9);}
 :root ._bg-transparent{background-color:transparent;}
 :root ._bls-solid._bls-solid{border-left-style:solid;}
+:root:root:root  ._borderBottomColor-0active-borderColor._borderBottomColor-0active-borderColor:active{border-bottom-color:var(--borderColor) !important;}
+:root:root:root  ._borderBottomColor-0active-borderColor68052152._borderBottomColor-0active-borderColor68052152:active{border-bottom-color:var(--borderColorFocus) !important;}
 :root:root:root  ._borderBottomColor-0active-borderColor69916956._borderBottomColor-0active-borderColor69916956:active{border-bottom-color:var(--borderColorHover) !important;}
 :root:root:root  ._borderBottomColor-0active-borderColor77378595._borderBottomColor-0active-borderColor77378595:active{border-bottom-color:var(--borderColorPress) !important;}
 :root:root:root:root  ._borderBottomColor-0focus-borderColor68052152._borderBottomColor-0focus-borderColor68052152:focus{border-bottom-color:var(--borderColorFocus) !important;}
+:root:root:root:root  ._borderBottomColor-0focus-borderColor69916956._borderBottomColor-0focus-borderColor69916956:focus{border-bottom-color:var(--borderColorHover) !important;}
 :root:root:root:root  ._borderBottomColor-0focus-color06._borderBottomColor-0focus-color06:focus{border-bottom-color:var(--color06) !important;}
+:root:root:root:root  ._borderBottomColor-0focus-color7._borderBottomColor-0focus-color7:focus{border-bottom-color:var(--color7) !important;}
 :root:root:root:root  ._borderBottomColor-0focus-color8._borderBottomColor-0focus-color8:focus{border-bottom-color:var(--color8) !important;}
+@media (hover) {:root:root  ._borderBottomColor-0hover-borderColor._borderBottomColor-0hover-borderColor:hover{border-bottom-color:var(--borderColor) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-borderColor69916956._borderBottomColor-0hover-borderColor69916956:hover{border-bottom-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-color6._borderBottomColor-0hover-color6:hover{border-bottom-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-color7._borderBottomColor-0hover-color7:hover{border-bottom-color:var(--color7) !important;}}
@@ -2165,14 +2298,20 @@
 :root ._borderBottomColor-borderColor._borderBottomColor-borderColor{border-bottom-color:var(--borderColor);}
 :root ._borderBottomColor-color12._borderBottomColor-color12{border-bottom-color:var(--color12);}
 :root ._borderBottomColor-color6._borderBottomColor-color6{border-bottom-color:var(--color6);}
+:root ._borderBottomColor-color7._borderBottomColor-color7{border-bottom-color:var(--color7);}
 :root ._borderBottomColor-transparent._borderBottomColor-transparent{border-bottom-color:transparent;}
 :root ._borderBottomWidth-0px._borderBottomWidth-0px{border-bottom-width:0px;}
 :root ._borderBottomWidth-1px._borderBottomWidth-1px{border-bottom-width:1px;}
+:root:root:root  ._borderLeftColor-0active-borderColor._borderLeftColor-0active-borderColor:active{border-left-color:var(--borderColor) !important;}
+:root:root:root  ._borderLeftColor-0active-borderColor68052152._borderLeftColor-0active-borderColor68052152:active{border-left-color:var(--borderColorFocus) !important;}
 :root:root:root  ._borderLeftColor-0active-borderColor69916956._borderLeftColor-0active-borderColor69916956:active{border-left-color:var(--borderColorHover) !important;}
 :root:root:root  ._borderLeftColor-0active-borderColor77378595._borderLeftColor-0active-borderColor77378595:active{border-left-color:var(--borderColorPress) !important;}
 :root:root:root:root  ._borderLeftColor-0focus-borderColor68052152._borderLeftColor-0focus-borderColor68052152:focus{border-left-color:var(--borderColorFocus) !important;}
+:root:root:root:root  ._borderLeftColor-0focus-borderColor69916956._borderLeftColor-0focus-borderColor69916956:focus{border-left-color:var(--borderColorHover) !important;}
 :root:root:root:root  ._borderLeftColor-0focus-color06._borderLeftColor-0focus-color06:focus{border-left-color:var(--color06) !important;}
+:root:root:root:root  ._borderLeftColor-0focus-color7._borderLeftColor-0focus-color7:focus{border-left-color:var(--color7) !important;}
 :root:root:root:root  ._borderLeftColor-0focus-color8._borderLeftColor-0focus-color8:focus{border-left-color:var(--color8) !important;}
+@media (hover) {:root:root  ._borderLeftColor-0hover-borderColor._borderLeftColor-0hover-borderColor:hover{border-left-color:var(--borderColor) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-borderColor69916956._borderLeftColor-0hover-borderColor69916956:hover{border-left-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-color6._borderLeftColor-0hover-color6:hover{border-left-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-color7._borderLeftColor-0hover-color7:hover{border-left-color:var(--color7) !important;}}
@@ -2181,14 +2320,20 @@
 :root ._borderLeftColor-borderColor._borderLeftColor-borderColor{border-left-color:var(--borderColor);}
 :root ._borderLeftColor-color12._borderLeftColor-color12{border-left-color:var(--color12);}
 :root ._borderLeftColor-color6._borderLeftColor-color6{border-left-color:var(--color6);}
+:root ._borderLeftColor-color7._borderLeftColor-color7{border-left-color:var(--color7);}
 :root ._borderLeftColor-transparent._borderLeftColor-transparent{border-left-color:transparent;}
 :root ._borderLeftWidth-0px._borderLeftWidth-0px{border-left-width:0px;}
 :root ._borderLeftWidth-1px._borderLeftWidth-1px{border-left-width:1px;}
+:root:root:root  ._brc-0active-borderColor._brc-0active-borderColor:active{border-right-color:var(--borderColor) !important;}
+:root:root:root  ._brc-0active-borderColor68052152._brc-0active-borderColor68052152:active{border-right-color:var(--borderColorFocus) !important;}
 :root:root:root  ._brc-0active-borderColor69916956._brc-0active-borderColor69916956:active{border-right-color:var(--borderColorHover) !important;}
 :root:root:root  ._brc-0active-borderColor77378595._brc-0active-borderColor77378595:active{border-right-color:var(--borderColorPress) !important;}
 :root:root:root:root  ._brc-0focus-borderColor68052152._brc-0focus-borderColor68052152:focus{border-right-color:var(--borderColorFocus) !important;}
+:root:root:root:root  ._brc-0focus-borderColor69916956._brc-0focus-borderColor69916956:focus{border-right-color:var(--borderColorHover) !important;}
 :root:root:root:root  ._brc-0focus-color06._brc-0focus-color06:focus{border-right-color:var(--color06) !important;}
+:root:root:root:root  ._brc-0focus-color7._brc-0focus-color7:focus{border-right-color:var(--color7) !important;}
 :root:root:root:root  ._brc-0focus-color8._brc-0focus-color8:focus{border-right-color:var(--color8) !important;}
+@media (hover) {:root:root  ._brc-0hover-borderColor._brc-0hover-borderColor:hover{border-right-color:var(--borderColor) !important;}}
 @media (hover) {:root:root  ._brc-0hover-borderColor69916956._brc-0hover-borderColor69916956:hover{border-right-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._brc-0hover-color6._brc-0hover-color6:hover{border-right-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._brc-0hover-color7._brc-0hover-color7:hover{border-right-color:var(--color7) !important;}}
@@ -2197,15 +2342,21 @@
 :root ._brc-borderColor._brc-borderColor{border-right-color:var(--borderColor);}
 :root ._brc-color12._brc-color12{border-right-color:var(--color12);}
 :root ._brc-color6._brc-color6{border-right-color:var(--color6);}
+:root ._brc-color7._brc-color7{border-right-color:var(--color7);}
 :root ._brc-transparent._brc-transparent{border-right-color:transparent;}
 :root ._brs-solid._brs-solid{border-right-style:solid;}
 :root ._brw-0px._brw-0px{border-right-width:0px;}
 :root ._brw-1px._brw-1px{border-right-width:1px;}
+:root:root:root  ._btc-0active-borderColor._btc-0active-borderColor:active{border-top-color:var(--borderColor) !important;}
+:root:root:root  ._btc-0active-borderColor68052152._btc-0active-borderColor68052152:active{border-top-color:var(--borderColorFocus) !important;}
 :root:root:root  ._btc-0active-borderColor69916956._btc-0active-borderColor69916956:active{border-top-color:var(--borderColorHover) !important;}
 :root:root:root  ._btc-0active-borderColor77378595._btc-0active-borderColor77378595:active{border-top-color:var(--borderColorPress) !important;}
 :root:root:root:root  ._btc-0focus-borderColor68052152._btc-0focus-borderColor68052152:focus{border-top-color:var(--borderColorFocus) !important;}
+:root:root:root:root  ._btc-0focus-borderColor69916956._btc-0focus-borderColor69916956:focus{border-top-color:var(--borderColorHover) !important;}
 :root:root:root:root  ._btc-0focus-color06._btc-0focus-color06:focus{border-top-color:var(--color06) !important;}
+:root:root:root:root  ._btc-0focus-color7._btc-0focus-color7:focus{border-top-color:var(--color7) !important;}
 :root:root:root:root  ._btc-0focus-color8._btc-0focus-color8:focus{border-top-color:var(--color8) !important;}
+@media (hover) {:root:root  ._btc-0hover-borderColor._btc-0hover-borderColor:hover{border-top-color:var(--borderColor) !important;}}
 @media (hover) {:root:root  ._btc-0hover-borderColor69916956._btc-0hover-borderColor69916956:hover{border-top-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._btc-0hover-color6._btc-0hover-color6:hover{border-top-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._btc-0hover-color7._btc-0hover-color7:hover{border-top-color:var(--color7) !important;}}
@@ -2214,6 +2365,7 @@
 :root ._btc-borderColor._btc-borderColor{border-top-color:var(--borderColor);}
 :root ._btc-color12._btc-color12{border-top-color:var(--color12);}
 :root ._btc-color6._btc-color6{border-top-color:var(--color6);}
+:root ._btc-color7._btc-color7{border-top-color:var(--color7);}
 :root ._btc-transparent._btc-transparent{border-top-color:transparent;}
 :root ._btlr-100000px{border-top-left-radius:100000px;}
 :root ._btlr-1000px{border-top-left-radius:1000px;}
@@ -2247,6 +2399,7 @@
 :root ._cur-col-resize{cursor:col-resize;}
 :root ._cur-default{cursor:default;}
 :root ._cur-inherit{cursor:inherit;}
+:root ._cur-not-allowed{cursor:not-allowed;}
 :root ._cur-pointer{cursor:pointer;}
 :root ._direction-ltr{direction:ltr;}
 :root ._dsp-flex{display:flex;}
@@ -2269,6 +2422,7 @@
 :root ._fwr-nowrap{flex-wrap:nowrap;}
 :root ._gap-24px{gap:24px;}
 :root ._gap-2px{gap:2px;}
+:root ._gap-c-space-1{gap:var(--c-space-1);}
 :root ._gap-c-space-1--53{gap:var(--c-space-1--5);}
 :root ._gap-c-space-2{gap:var(--c-space-2);}
 :root ._grow-0{flex-grow:0;}
@@ -2280,6 +2434,7 @@
 :root ._height-20px{height:20px;}
 :root ._height-32px{height:32px;}
 :root ._height-36px{height:36px;}
+:root ._height-40px{height:40px;}
 :root ._height-44px{height:44px;}
 :root ._height-60px{height:60px;}
 :root ._height-6px{height:6px;}
@@ -2316,6 +2471,7 @@
 :root ._maxW-16px{max-width:16px;}
 :root ._maxW-32px{max-width:32px;}
 :root ._maxW-600px{max-width:600px;}
+:root ._mb-0px{margin-bottom:0px;}
 :root ._minH-16px{min-height:16px;}
 :root ._minH-20px{min-height:20px;}
 :root ._minH-24px{min-height:24px;}
@@ -2330,10 +2486,14 @@
 :root ._minW-32px{min-width:32px;}
 :root ._minW-36px{min-width:36px;}
 :root ._minW-40px{min-width:40px;}
+:root ._ml-0px{margin-left:0px;}
 :root ._ml-auto{margin-left:auto;}
+:root ._mr-0px{margin-right:0px;}
 :root ._mt--24px{margin-top:-24px;}
+:root ._mt-0px{margin-top:0px;}
 :root ._o-0{opacity:0;}
 :root ._o-0--5{opacity:0.5;}
+:root ._o-0--6{opacity:0.6;}
 @media (hover) {:root:root  ._o-0hover-0--8:hover{opacity:0.8 !important;}}
 @media (hover) {:root:root  ._o-0hover-0--9:hover{opacity:0.9 !important;}}
 :root ._o-1{opacity:1;}
@@ -2358,6 +2518,7 @@
 :root ._pb-c-space-1{padding-bottom:var(--c-space-1);}
 :root ._pb-c-space-1--53{padding-bottom:var(--c-space-1--5);}
 :root ._pb-c-space-11{padding-bottom:var(--c-space-11);}
+:root ._pb-c-space-2{padding-bottom:var(--c-space-2);}
 :root ._pb-c-space-2--53{padding-bottom:var(--c-space-2--5);}
 :root ._pb-c-space-3{padding-bottom:var(--c-space-3);}
 :root ._pb-c-space-4{padding-bottom:var(--c-space-4);}
@@ -2405,12 +2566,14 @@
 :root ._pt-c-space-1{padding-top:var(--c-space-1);}
 :root ._pt-c-space-1--53{padding-top:var(--c-space-1--5);}
 :root ._pt-c-space-11{padding-top:var(--c-space-11);}
+:root ._pt-c-space-2{padding-top:var(--c-space-2);}
 :root ._pt-c-space-2--53{padding-top:var(--c-space-2--5);}
 :root ._pt-c-space-3{padding-top:var(--c-space-3);}
 :root ._pt-c-space-4{padding-top:var(--c-space-4);}
 :root ._r-0px{right:0px;}
 :root ._r-12px{right:12px;}
 :root ._r-6037{right:60%;}
+:root ._select-auto{user-select:auto;-webkit-user-select:auto;}
 :root ._select-none{user-select:none;-webkit-user-select:none;}
 :root ._self-center{align-self:center;}
 :root ._self-flex-end{align-self:flex-end;}
@@ -2422,6 +2585,8 @@
 :root ._t-5037{top:50%;}
 @media (hover) {:root:root  ._td-0hover-underline:hover{text-decoration-line:underline !important;}}
 :root ._textOverflow-ellipsis{text-overflow:ellipsis;}
+:root ._tr-rotate0deg1281{transform:rotate(0deg);}
+:root ._tr-rotate180de41674{transform:rotate(180deg);}
 :root ._tr-translateX-38656452{transform:translateX(-80%);}
 :root ._tr-translateX01303033{transform:translateX(0px);}
 :root ._tr-translateY-162820732{transform:translateY(-8px) translateX(-7.2px);}
@@ -2437,7 +2602,9 @@
 :root ._width-32px{width:32px;}
 :root ._width-36px{width:36px;}
 :root ._width-4px{width:4px;}
+:root ._width-8px{width:8px;}
 :root ._width-auto{width:auto;}
+:root ._ws-normal{white-space:normal;}
 :root ._ws-nowrap{white-space:nowrap;}
 :root ._ws-pre-wrap{white-space:pre-wrap;}
 :root ._z-0{z-index:0;}

package/dist/theme.css

@@ -1271,3 +1271,120 @@
 [data-slot="rows"] > * + * {
   border-top: 1px solid var(--borderColor, var(--border));
 }
+
+/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
+   The composer is where you talk to Hanzo, so it is the thing that should look
+   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
+   pixel of chrome stays monochrome; there is no second exemption, and the two
+   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
+   the surface wearing it the only colour in the product.
+
+   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
+   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
+   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
+   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
+   fix — invisible until a glass panel sat in it, at which point the whole
+   spectrum washed up through the composer's interior. chat also quieted the
+   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
+   copies of one look is how that happens, and neither app could see the other
+   was wrong.
+
+   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
+   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
+   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
+   to be any material — opaque, glass, anything. The stops are declared once and
+   read by both, because duplicated they drift on the first palette change and
+   nobody notices which half moved. */
+
+/* `@property` is what lets a conic angle animate. Where it is unsupported the
+   ring is simply static, which is a fine floor. */
+@property --hz-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+:root {
+  /* One sweep, closing on the stop it opened with — a conic gradient whose
+     first and last stop differ shows a hard seam. */
+  --hz-spectrum: rgba(8, 148, 255, 0.45), rgba(201, 89, 221, 0.48),
+    rgba(255, 46, 84, 0.4), rgba(255, 144, 4, 0.4), rgba(8, 148, 255, 0.45);
+}
+
+@keyframes hzComposerSpin {
+  to {
+    --hz-angle: 360deg;
+  }
+}
+
+.hz-composer {
+  position: relative;
+  isolation: isolate;
+  padding: 1.5px;
+}
+
+/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
+   paint outside it — `content-box` is the hole, the full box the plate, and
+   `exclude` leaves the lip. */
+.hz-composer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1.5px;
+  border-radius: inherit;
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
+     declaring this first lets the shorthand reset it to `source-over` — the
+     filled disc again, on exactly the browsers too old to have `mask-composite`
+     at all. */
+  -webkit-mask-composite: xor;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* The halo lights the air AROUND the box and nothing behind it. */
+.hz-composer::after {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  padding: 6px;
+  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
+     inherited corner on this larger box curves too tight and reads as a second,
+     mismatched rounding just outside the panel. */
+  border-radius: calc(1.5rem + 6px);
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  filter: blur(16px);
+  opacity: 0.22;
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* The panel sits above ring and halo. */
+.hz-composer > * {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-composer::before,
+  .hz-composer::after {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.66",
+  "version": "8.0.68",
   "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": {