@cosxai/ui 0.4.7 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/dialogs/Modal.tsx

@@ -72,7 +72,12 @@ export function Modal({
         position: "fixed",
         inset: 0,
         background: "rgba(10, 14, 26, 0.6)",
-        backdropFilter: "blur(2px)",
+        // Pull the page surface noticeably out of focus behind the
+        // modal — agent-dataroom's `backdrop-blur-sm` (4px) reads as
+        // a hint; 8px reads as a clear "the world stopped". The card
+        // sits above the blurred layer, so the content stays crisp.
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -161,6 +166,14 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
           type="button"
           onClick={onClose}
           aria-label="Close"
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              "var(--ck-bg-muted)";
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              "transparent";
+          }}
           style={{
             border: "none",
             background: "transparent",
@@ -168,7 +181,10 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
             cursor: "pointer",
             fontSize: 18,
             lineHeight: 1,
-            padding: 2,
+            padding: 4,
+            borderRadius: "var(--ck-radius-sm, 4px)",
+            transition:
+              "background var(--ck-dur-fast) var(--ck-ease)",
           }}
         >
           ×

package/src/styles/chrome-editorial.css

@@ -116,6 +116,18 @@ html[data-ck-chrome="editorial"] [data-ck-leftnav] {
   border-right-color: var(--ck-border-subtle);
 }
 
+/* Nav-item hover — match the actionbar / button hover token so
+   every interactive surface in the editorial chrome reads as
+   actionable on pointer enter. The sketch / ambient / riso / etc.
+   chromes have always carried this rule; editorial was the only
+   gap (consumers saw rail items as static even though they're
+   navigable). Active rows keep their accent-muted background from
+   the base NavItem inline style, so the `:not([data-active="true"])`
+   guard is the same shape the other chromes use. */
+html[data-ck-chrome="editorial"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-muted);
+}
+
 /* Topbar — flatten to the paper, lose the bottom border (the
    folio rule under it is the visual divider in editorial). */
 html[data-ck-chrome="editorial"] [data-ck-topbar] {