@corbits/react-ui 0.2.0 → 0.3.0

package/dist/styles.css

@@ -5,7 +5,11 @@
   :root, :host {
     --font-sans: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
     --font-mono: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -25,8 +29,11 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -47,10 +54,6 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
     --default-mono-font-family: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
-    --text-icon-nav: var(--icon-size-nav);
-    --text-icon-topbar: var(--icon-size-topbar);
-    --text-icon-button: var(--icon-size-button);
-    --text-icon-checkbox: var(--icon-size-checkbox);
   }
 }
 @layer base {
@@ -255,6 +258,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-6 {
     top: calc(var(--spacing) * 6);
   }
@@ -276,15 +282,24 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .right-\[0\.85rem\] {
     right: 0.85rem;
   }
+  .right-auto {
+    right: auto;
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
+  .-left-0\.5 {
+    left: calc(var(--spacing) * -0.5);
+  }
   .left-0 {
     left: 0px;
   }
@@ -300,6 +315,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-90 {
+    z-index: 90;
+  }
+  .z-100 {
+    z-index: 100;
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -491,6 +512,10 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-14 {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+  }
   .size-\[1\.8rem\] {
     width: 1.8rem;
     height: 1.8rem;
@@ -523,6 +548,12 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-6\.5 {
+    height: calc(var(--spacing) * 6.5);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -538,6 +569,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -550,6 +584,9 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[520px\] {
     height: 520px;
   }
@@ -562,6 +599,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
@@ -571,6 +611,9 @@
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-80 {
+    max-height: calc(var(--spacing) * 80);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -580,6 +623,9 @@
   .max-h-\[75vh\] {
     max-height: 75vh;
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
   .max-h-\[480px\] {
     max-height: 480px;
   }
@@ -601,6 +647,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-dvh {
+    min-height: 100dvh;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -616,6 +665,9 @@
   .w-1\/3 {
     width: calc(1 / 3 * 100%);
   }
+  .w-3\/4 {
+    width: calc(3 / 4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -625,6 +677,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -661,6 +716,9 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[30px\] {
     width: 30px;
   }
@@ -682,9 +740,15 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-44 {
+    max-width: calc(var(--spacing) * 44);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
+  .max-w-\[26rem\] {
+    max-width: 26rem;
+  }
   .max-w-\[32ch\] {
     max-width: 32ch;
   }
@@ -727,6 +791,9 @@
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
+  .min-w-64 {
+    min-width: calc(var(--spacing) * 64);
+  }
   .min-w-\[3\.5rem\] {
     min-width: 3.5rem;
   }
@@ -818,6 +885,12 @@
   .\[animation\:corbits-boot-sweep_1\.4s_ease-in-out_infinite\] {
     animation: corbits-boot-sweep 1.4s ease-in-out infinite;
   }
+  .\[animation\:corbits-fade-in_150ms_ease-out\] {
+    animation: corbits-fade-in 150ms ease-out;
+  }
+  .\[animation\:corbits-fade-in_200ms_ease-out\] {
+    animation: corbits-fade-in 200ms ease-out;
+  }
   .\[animation\:corbits-rail-block-in_200ms_var\(--ease-out\)_both\] {
     animation: corbits-rail-block-in 200ms var(--ease-out) both;
   }
@@ -863,6 +936,9 @@
   .resize-none {
     resize: none;
   }
+  .resize-y {
+    resize: vertical;
+  }
   .\[scrollbar-width\:thin\] {
     scrollbar-width: thin;
   }
@@ -893,6 +969,9 @@
   .grid-cols-\[minmax\(7rem\,11rem\)_1fr_minmax\(4\.5rem\,6rem\)\] {
     grid-template-columns: minmax(7rem,11rem) 1fr minmax(4.5rem,6rem);
   }
+  .grid-cols-\[repeat\(auto-fill\,minmax\(11rem\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(11rem,1fr));
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -929,6 +1008,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0 {
     gap: 0px;
   }
@@ -991,6 +1073,16 @@
   .gap-y-1 {
     row-gap: var(--spacing);
   }
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+  :where(.divide-border > :not(:last-child)) {
+    border-color: var(--border);
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -1029,9 +1121,15 @@
   .rounded-\[3px\] {
     border-radius: 3px;
   }
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
   .rounded-\[12px\] {
     border-radius: 12px;
   }
+  .rounded-\[var\(--avatar-radius\,var\(--radius\)\)\] {
+    border-radius: var(--avatar-radius,var(--radius));
+  }
   .rounded-\[var\(--sidebar-row-radius\)\] {
     border-radius: var(--sidebar-row-radius);
   }
@@ -1168,12 +1266,24 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1225,6 +1335,9 @@
       background-color: color-mix(in oklab, var(--muted) 40%, transparent);
     }
   }
+  .bg-ok {
+    background-color: var(--ok);
+  }
   .bg-popover {
     background-color: var(--popover);
   }
@@ -1270,6 +1383,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .\[background-image\:linear-gradient\(90deg\,var\(--muted-foreground\)_40\%\,var\(--foreground\)_50\%\,var\(--muted-foreground\)_60\%\)\] {
     background-image: linear-gradient(90deg,var(--muted-foreground) 40%,var(--foreground) 50%,var(--muted-foreground) 60%);
   }
@@ -1303,6 +1419,9 @@
   .fill-thinking-base {
     fill: var(--thinking-base);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1387,6 +1506,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
@@ -1432,6 +1554,9 @@
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1474,6 +1599,10 @@
   .font-sans {
     font-family: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -1507,6 +1636,12 @@
   .text-\[0\.8125rem\] {
     font-size: 0.8125rem;
   }
+  .text-\[2\.75rem\] {
+    font-size: 2.75rem;
+  }
+  .text-\[6px\] {
+    font-size: 6px;
+  }
   .text-\[7px\] {
     font-size: 7px;
   }
@@ -1597,6 +1732,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1660,12 +1799,15 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-accent {
-    color: var(--accent);
+  .\!text-white {
+    color: var(--color-white) !important;
   }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -1678,6 +1820,9 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1687,24 +1832,15 @@
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
-  .text-primary {
-    color: var(--primary);
-  }
   .text-primary-emphasis {
     color: var(--primary-emphasis);
   }
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
-  .text-secondary {
-    color: var(--secondary);
-  }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
-  .text-success {
-    color: var(--success);
-  }
   .text-success-foreground {
     color: var(--success-foreground);
   }
@@ -1714,6 +1850,9 @@
   .text-warn {
     color: var(--warn);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -1746,6 +1885,10 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .accent-\[var\(--primary\)\] {
     accent-color: var(--primary);
   }
@@ -1798,9 +1941,16 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-background {
     --tw-ring-color: var(--background);
   }
+  .ring-primary {
+    --tw-ring-color: var(--primary);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1851,6 +2001,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2042,6 +2197,17 @@
       opacity: 100%;
     }
   }
+  .focus\:border-border-strong:focus {
+    border-color: var(--border-strong);
+  }
+  .focus\:ring-1:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .focus-visible\:text-foreground:focus-visible {
     color: var(--foreground);
   }
@@ -2059,6 +2225,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .active\:scale-\[0\.97\]:active {
+    scale: 0.97;
+  }
   .active\:brightness-95:active {
     --tw-brightness: brightness(95%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2270,6 +2439,12 @@
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+    .lg\:flex-col {
+      flex-direction: column;
+    }
+    .lg\:overflow-visible {
+      overflow: visible;
+    }
     .lg\:border-r {
       border-right-style: var(--tw-border-style);
       border-right-width: 1px;
@@ -2280,6 +2455,28 @@
     .lg\:pr-6 {
       padding-right: calc(var(--spacing) * 6);
     }
+    .lg\:pb-0 {
+      padding-bottom: 0px;
+    }
+  }
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground\)_14\%\,var\(--muted\)\)\]:is(.dark *) {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground) 14%,var(--muted));
+    }
+  }
+  .dark\:bg-black:is(.dark *) {
+    background-color: var(--color-black);
+  }
+  .dark\:text-gray-100:is(.dark *) {
+    color: var(--color-gray-100);
+  }
+  .dark\:shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--foreground\)_14\%\,transparent\)\]:is(.dark *) {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--foreground));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--foreground) 14%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   @media (forced-colors: active) {
     .forced-colors\:animate-none {
@@ -2301,6 +2498,10 @@
   .\[\&_\[aria-label\=Close\]\]\:hidden [aria-label=Close] {
     display: none;
   }
+  .\[\&_svg\]\:size-3 svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .\[\&_svg\]\:size-3\.5 svg {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -2686,6 +2887,36 @@
     outline-offset: 2px;
   }
 }
+@property --corbits-avatar-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes corbits-avatar-orbit {
+  to {
+    --corbits-avatar-angle: 360deg;
+  }
+}
+.corbits-avatar-orbit {
+  position: absolute;
+  inset: -4px;
+  padding: 2px;
+  background: conic-gradient( from var(--corbits-avatar-angle), var(--primary-emphasis) 0deg 90deg, transparent 90deg 360deg ), var(--foreground);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: conic-gradient( from var(--corbits-avatar-angle), var(--primary-emphasis) 0deg 90deg, transparent 90deg 360deg ), color-mix(in srgb, var(--foreground) 12%, transparent);
+  }
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  animation: corbits-avatar-orbit 1.4s linear infinite;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .corbits-avatar-orbit {
+    animation: none;
+    --corbits-avatar-angle: 120deg;
+  }
+}
 @keyframes corbits-thinking-sweep {
   0% {
     transform: translateX(8px);
@@ -2792,6 +3023,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3026,6 +3262,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -3075,6 +3312,7 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --corbits-avatar-angle: 0deg;
     }
   }
 }

package/dist/theme.css

@@ -605,6 +605,47 @@
   }
 }
 
+/* Avatar working orbit. The conic angle is a registered property so the arc
+   sweeps while the masked ring (and the avatar it encircles) never rotates.
+   Used by ui/avatar. */
+@property --corbits-avatar-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes corbits-avatar-orbit {
+  to {
+    --corbits-avatar-angle: 360deg;
+  }
+}
+.corbits-avatar-orbit {
+  position: absolute;
+  inset: -4px;
+  padding: 2px;
+  background:
+    conic-gradient(
+      from var(--corbits-avatar-angle),
+      var(--primary-emphasis) 0deg 90deg,
+      transparent 90deg 360deg
+    ),
+    color-mix(in srgb, var(--foreground) 12%, transparent);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  animation: corbits-avatar-orbit 1.4s linear infinite;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .corbits-avatar-orbit {
+    animation: none;
+    --corbits-avatar-angle: 120deg;
+  }
+}
+
 /* Ridge-study motion: keep geometry and timing in the original 100 x 70 space. */
 @keyframes corbits-thinking-sweep {
   0% {

package/dist/ui/avatar.d.ts

@@ -1,11 +1,23 @@
 import type { ReactNode } from "react";
 export type AvatarTone = "neutral" | "agent" | "agent2" | "agent3";
+export type AvatarShape = "circle" | "square";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "working" | "ready" | "idle";
 export type AvatarProps = {
     /** One or two characters shown when no image is provided. */
     readonly initials: string;
     readonly label: string;
     readonly tone?: AvatarTone;
-    readonly size?: "sm" | "md" | "lg";
+    readonly size?: AvatarSize;
+    /**
+     * `circle` is fully round; `square` rounds by `--avatar-radius` (defaults to
+     * `--radius`). Omitted keeps the unrounded default.
+     */
+    readonly shape?: AvatarShape;
+    /** Corner dot marking state; the label gains the state for assistive tech. */
+    readonly status?: AvatarStatus;
+    /** Orange arc circling the avatar. Static under reduced motion. */
+    readonly orbit?: boolean;
     /** Tenant monogram badge overlaid on the corner. */
     readonly tenantMonogram?: string;
     readonly className?: string;
@@ -15,23 +27,28 @@ export type AvatarProps = {
  * intentionally unsupported here: identity headers should not flash or
  * depend on third-party avatar hosts.
  */
-export declare function Avatar({ initials, label, tone, size, tenantMonogram, className, }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ initials, label, tone, size, shape, status, orbit, tenantMonogram, className, }: AvatarProps): import("react").JSX.Element;
 export type AvatarStackItem = {
     readonly id: string;
     readonly initials: string;
     readonly label: string;
     readonly tone?: AvatarTone;
+    readonly shape?: AvatarShape;
+    readonly status?: AvatarStatus;
+    readonly orbit?: boolean;
     readonly tenantMonogram?: string;
 };
 export type AvatarStackProps = {
     readonly items: readonly AvatarStackItem[];
     /** Cap visible avatars; remainder becomes a +N chip. */
     readonly max?: number;
-    readonly size?: "sm" | "md";
+    readonly size?: AvatarSize;
+    /** Default shape for every item; an item's own `shape` wins. */
+    readonly shape?: AvatarShape;
     readonly className?: string;
 };
 /**
  * Overlapping avatar stack for thread participants and channel members.
  */
-export declare function AvatarStack({ items, max, size, className, }: AvatarStackProps): import("react").JSX.Element;
+export declare function AvatarStack({ items, max, size, shape, className, }: AvatarStackProps): import("react").JSX.Element;
 export type AvatarStackSlot = ReactNode;

package/dist/ui/avatar.js

@@ -1,36 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const SIZE_CLASS = {
+    xs: "size-5 text-[8px]",
     sm: "size-6 text-[10px]",
     md: "size-8 text-xs",
     lg: "size-10 text-sm",
+    xl: "size-14 text-lg",
+};
+const SHAPE_CLASS = {
+    circle: "rounded-full",
+    square: "rounded-[var(--avatar-radius,var(--radius))]",
+};
+const STATUS_CLASS = {
+    working: "bg-primary-emphasis",
+    ready: "bg-ok",
+    idle: "bg-muted-foreground",
+};
+const DOT_SIZE = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
 };
 const TONE_CLASS = {
-    neutral: "bg-muted text-muted-foreground",
+    neutral: "bg-muted text-muted-foreground dark:bg-[color-mix(in_srgb,var(--foreground)_14%,var(--muted))]",
     agent: "bg-primary text-primary-foreground",
     agent2: "bg-accent text-accent-foreground",
     agent3: "bg-success text-success-foreground",
 };
 const BADGE_SIZE = {
+    xs: "size-2.5 text-[6px]",
     sm: "size-3 text-[7px]",
     md: "size-3.5 text-[8px]",
     lg: "size-4 text-[9px]",
+    xl: "size-5 text-[10px]",
 };
 /**
  * Initials avatar with optional tenant monogram badge. Images are
  * intentionally unsupported here: identity headers should not flash or
  * depend on third-party avatar hosts.
  */
-export function Avatar({ initials, label, tone = "neutral", size = "md", tenantMonogram, className, }) {
-    return (_jsxs("span", { role: "img", "aria-label": label, className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], className), children: [_jsx("span", { "aria-hidden": true, children: initials.slice(0, 2) }), tenantMonogram === undefined ? null : (_jsx("span", { "aria-hidden": true, className: cn("absolute -right-0.5 -bottom-0.5 inline-flex items-center justify-center border border-background bg-muted font-bold uppercase text-muted-foreground", BADGE_SIZE[size]), children: tenantMonogram.slice(0, 1) }))] }));
+export function Avatar({ initials, label, tone = "neutral", size = "md", shape, status, orbit = false, tenantMonogram, className, }) {
+    return (_jsxs("span", { role: "img", "aria-label": status === undefined ? label : `${label}, ${status}`, className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], "dark:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--foreground)_14%,transparent)]", shape !== undefined && SHAPE_CLASS[shape], className), children: [orbit ? (_jsx("span", { "aria-hidden": true, className: "corbits-avatar-orbit", style: {
+                    borderRadius: shape === "circle"
+                        ? "9999px"
+                        : shape === "square"
+                            ? "calc(var(--avatar-radius, var(--radius)) + 4px)"
+                            : "0",
+                } })) : null, _jsx("span", { "aria-hidden": true, children: initials.slice(0, 2) }), tenantMonogram === undefined ? null : (_jsx("span", { "aria-hidden": true, className: cn("absolute -right-0.5 -bottom-0.5 inline-flex items-center justify-center border border-background bg-muted font-bold uppercase text-muted-foreground", BADGE_SIZE[size]), children: tenantMonogram.slice(0, 1) })), status === undefined ? null : (_jsx("span", { "aria-hidden": true, className: cn("absolute -right-0.5 -bottom-0.5 rounded-full ring-2 ring-background", DOT_SIZE[size], STATUS_CLASS[status], tenantMonogram !== undefined && "right-auto -left-0.5") }))] }));
 }
 /**
  * Overlapping avatar stack for thread participants and channel members.
  */
-export function AvatarStack({ items, max = 4, size = "sm", className, }) {
+export function AvatarStack({ items, max = 4, size = "sm", shape, className, }) {
     const visible = items.slice(0, max);
     const overflow = items.length - visible.length;
-    return (_jsxs("span", { className: cn("inline-flex items-center", className), role: "group", "aria-label": "Participants", children: [visible.map((item, index) => (_jsx(Avatar, { initials: item.initials, label: item.label, ...(item.tone === undefined ? {} : { tone: item.tone }), ...(item.tenantMonogram === undefined
+    return (_jsxs("span", { className: cn("inline-flex items-center", className), role: "group", "aria-label": "Participants", children: [visible.map((item, index) => (_jsx(Avatar, { initials: item.initials, label: item.label, ...(item.tone === undefined ? {} : { tone: item.tone }), ...(item.shape === undefined && shape === undefined
+                    ? {}
+                    : { shape: item.shape ?? shape }), ...(item.status === undefined ? {} : { status: item.status }), ...(item.orbit === undefined ? {} : { orbit: item.orbit }), ...(item.tenantMonogram === undefined
                     ? {}
-                    : { tenantMonogram: item.tenantMonogram }), size: size, className: cn("ring-1 ring-background", index > 0 && "-ml-1.5") }, item.id))), overflow <= 0 ? null : (_jsxs("span", { className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
+                    : { tenantMonogram: item.tenantMonogram }), size: size, className: cn("ring-1 ring-background", index > 0 && "-ml-1.5") }, item.id))), overflow <= 0 ? null : (_jsxs("span", { className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", shape !== undefined && SHAPE_CLASS[shape], SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
 }

package/dist/ui/command-palette.js

@@ -85,12 +85,26 @@ function PaletteFooter({ footer }) {
  */
 export function CommandPalette({ open, onOpenChange, query, onQueryChange, groups, onSelect, loading = false, error, hasMore = false, onLoadMore, placeholder = "Search or jump to…", inputAccessory, footer, className, }) {
     const inputRef = useRef(null);
+    const openerRef = useRef(null);
     const machine = usePaletteMachine(groups, onSelect, () => onOpenChange(false));
     useEffect(() => {
         if (open)
             inputRef.current?.focus();
     }, [open]);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn("max-w-xl gap-0 p-0 [&_[aria-label=Close]]:hidden", className), onKeyDown: machine.onKeyDown, children: [_jsx(DialogTitle, { className: "sr-only", children: "Search" }), _jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4", children: [inputAccessory === undefined ? null : (_jsx("div", { "data-slot": "command-palette-input-accessory", className: "shrink-0", children: inputAccessory })), _jsx(PaletteInput, { machine: machine, inputRef: inputRef, query: query, onQueryChange: onQueryChange, loading: loading, placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" })] }), _jsx(PaletteResults, { machine: machine, query: query, loading: loading, error: error, className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2" }), _jsx(PaletteLoadMore, { hasMore: hasMore, onLoadMore: onLoadMore, loading: loading }), _jsx(PaletteFooter, { footer: footer })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn("max-w-xl gap-0 p-0 [&_[aria-label=Close]]:hidden", className), onKeyDown: machine.onKeyDown, 
+            // The palette opens from a shortcut or a host button, never a Radix
+            // trigger, so Radix has nothing to hand focus back to on close.
+            onOpenAutoFocus: () => {
+                openerRef.current =
+                    document.activeElement instanceof HTMLElement
+                        ? document.activeElement
+                        : null;
+            }, onCloseAutoFocus: (event) => {
+                if (openerRef.current === null)
+                    return;
+                event.preventDefault();
+                openerRef.current.focus();
+            }, children: [_jsx(DialogTitle, { className: "sr-only", children: "Search" }), _jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4", children: [inputAccessory === undefined ? null : (_jsx("div", { "data-slot": "command-palette-input-accessory", className: "shrink-0", children: inputAccessory })), _jsx(PaletteInput, { machine: machine, inputRef: inputRef, query: query, onQueryChange: onQueryChange, loading: loading, placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" })] }), _jsx(PaletteResults, { machine: machine, query: query, loading: loading, error: error, className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2" }), _jsx(PaletteLoadMore, { hasMore: hasMore, onLoadMore: onLoadMore, loading: loading }), _jsx(PaletteFooter, { footer: footer })] }) }));
 }
 /**
  * The palette as an inline, non-modal surface: the field sits wherever the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corbits/react-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components for agent and workflow surfaces.",
   "keywords": [
     "agents",
@@ -75,7 +75,7 @@
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "test": "bun test src --pass-with-no-tests",
-    "test:e2e": "bun test e2e",
+    "test:e2e": "bun test ./e2e/exports.test.ts && playwright test",
     "check": "bun run typecheck && bun run lint && bun run format:check && bun run test",
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css && cp src/theme.css dist/theme.css",
     "dep-guard": "node scripts/dep-guard.mjs",
@@ -89,8 +89,10 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@happy-dom/global-registrator": "^20.11.2",
     "@ladle/react": "^5.1.1",
+    "@playwright/test": "^1.63.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",