@m6d/cortex-react 0.8.0 → 0.9.1

package/dist/styles.css

@@ -80,7 +80,7 @@
   color-scheme: light dark;
 }
 
-@layer cortex-preflight {
+@layer base.cortex {
   :where(.cortex-widget),
   :where(.cortex-widget) *,
   :where(.cortex-widget) ::before,
@@ -552,9 +552,14 @@
   padding: 1.25rem;
   text-align: center;
 }
-.cortex-widget__landing .cortex-widget__input-area {
-  width: 100%;
+.cortex-widget__landing .cortex-widget__landing-composer {
   max-width: 26rem;
+}
+
+.cortex-widget__landing-composer {
+  width: 100%;
+}
+.cortex-widget__landing-composer .cortex-widget__input-area {
   padding: 1rem 0 0;
   border-top: 0;
   background: transparent;
@@ -1592,7 +1597,130 @@ cortex-llm-usage-chips {
     opacity: 0;
   }
 }
+.cortex-expandable {
+  display: block;
+  position: relative;
+}
+
+.cortex-expandable__content {
+  isolation: isolate;
+}
+
+.cortex-expandable__toolbar {
+  position: absolute;
+  top: 0.375rem;
+  inset-inline-end: 0.375rem;
+  z-index: 1;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.cortex-expandable:hover > .cortex-expandable__toolbar, .cortex-expandable__toolbar:has(:focus-visible) {
+  opacity: 1;
+}
+@media (hover: none) {
+  .cortex-expandable__toolbar {
+    position: static;
+    width: fit-content;
+    margin: 0 0 0.25rem;
+    margin-inline-start: auto;
+    opacity: 1;
+  }
+}
+
+.cortex-expandable__action {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-expandable__action:hover {
+  color: var(--cortex-color-text);
+  background: var(--cortex-color-hover);
+}
+
+.cortex-expandable__dialog {
+  width: fit-content;
+  min-width: min(24rem, 100vw - 2rem);
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: calc(var(--cortex-radius) * 1.5);
+  background: var(--cortex-color-surface);
+  color: var(--cortex-color-text-strong);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
+}
+.cortex-expandable__dialog[open] {
+  display: flex;
+  flex-direction: column;
+  animation: cortex-expandable-in 0.18s ease-out;
+}
+.cortex-expandable__dialog::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+  animation: cortex-expandable-backdrop-in 0.18s ease-out;
+}
+
+.cortex-expandable__head {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding-block: 0.375rem;
+  padding-inline: 1rem 0.375rem;
+  border-bottom: 1px solid var(--cortex-color-border);
+}
+
+.cortex-expandable__title {
+  flex: 1;
+  min-width: 0;
+  margin-inline-end: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cortex-color-text-heading);
+}
+
+.cortex-expandable__body {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+@keyframes cortex-expandable-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+}
+@keyframes cortex-expandable-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
 .cortex-media-block {
+  display: block;
+  width: 40rem;
+  max-width: 100%;
   margin: 0.75em 0;
   border: 1px solid var(--cortex-color-border);
   border-radius: var(--cortex-radius);
@@ -1657,6 +1785,7 @@ cortex-llm-usage-chips {
 }
 
 .cortex-media-block__body {
+  display: block;
   padding: 0.75rem;
 }
 .cortex-media-block__body[hidden] {
@@ -1671,6 +1800,9 @@ cortex-llm-usage-chips {
   max-width: 100%;
   height: auto;
 }
+.cortex-media-block__body > div > svg {
+  margin-inline: auto;
+}
 .cortex-media-block__body--map {
   padding: 0;
   height: 18rem;
@@ -1679,6 +1811,26 @@ cortex-llm-usage-chips {
   height: 100%;
 }
 
+.cortex-expandable__body .cortex-media-block__body {
+  width: min(72rem, 100vw - 2rem - 2px);
+}
+.cortex-expandable__body .cortex-media-block__body:not(.cortex-media-block__body--map) > div {
+  display: grid;
+}
+.cortex-expandable__body .cortex-media-block__body:not(.cortex-media-block__body--map) svg {
+  width: 100%;
+  max-width: none !important;
+  max-height: calc(100dvh - 6.5rem);
+}
+.cortex-expandable__body .cortex-media-block__body--map {
+  height: min(48rem, 100dvh - 5rem);
+}
+
+.cortex-expandable:has(> .cortex-expandable__content > .cortex-media-block__body--map) > .cortex-expandable__toolbar {
+  right: 0.375rem;
+  left: auto;
+}
+
 .cortex-media-block__error {
   margin: 0;
   font-size: 0.8125rem;
@@ -1701,13 +1853,25 @@ cortex-llm-usage-chips {
 .cortex-attachment-image {
   margin: 0.75em 0;
 }
-.cortex-attachment-image img {
+.cortex-attachment-image .cortex-expandable {
+  width: fit-content;
+  max-width: 100%;
+}
+.cortex-attachment-image .cortex-expandable__content img {
   display: block;
   max-width: 100%;
   border-radius: var(--cortex-radius);
   border: 1px solid var(--cortex-color-border);
 }
 
+.cortex-expandable__body .cortex-attachment-image__expanded {
+  display: block;
+  max-width: calc(100vw - 2rem - 2px);
+  max-height: calc(100dvh - 5rem);
+  margin: auto;
+  border-radius: 0;
+}
+
 .cortex-attachment-image__caption {
   margin: 0.25rem 0 0;
   font-size: 0.75rem;
@@ -1716,7 +1880,7 @@ cortex-llm-usage-chips {
 
 .cortex-table-block {
   display: block;
-  margin: 0.5em 0 0.75em;
+  margin: 0.75em 0;
 }
 .cortex-table-block th {
   white-space: nowrap;
@@ -1727,77 +1891,16 @@ cortex-llm-usage-chips {
 .cortex-table-block table {
   margin: 0;
 }
-
-.cortex-table-block__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.125rem;
-  min-height: 1.75rem;
-  margin-bottom: 0.25rem;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-.cortex-table-block:hover .cortex-table-block__actions, .cortex-table-block:focus-within .cortex-table-block__actions {
-  opacity: 1;
-}
-@media (hover: none) {
-  .cortex-table-block__actions {
-    opacity: 1;
-  }
-}
-
-.cortex-table-block__action {
-  flex-shrink: 0;
-  width: 2rem;
-  height: 2rem;
-  border-radius: calc(var(--cortex-radius) * 0.75);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  transition: color 0.15s, background-color 0.15s;
-  width: 1.75rem;
-  height: 1.75rem;
-  color: var(--cortex-color-text-muted);
-}
-.cortex-table-block__action:hover {
-  color: var(--cortex-color-text);
-  background: var(--cortex-color-hover);
-}
-
-.cortex-table-block__dialog {
-  width: min(72rem, 100vw - 2rem);
-  max-width: none;
-  max-height: calc(100vh - 2rem);
-  margin: auto;
-  padding: 0;
-  border: 1px solid var(--cortex-color-border);
-  border-radius: calc(var(--cortex-radius) * 1.5);
-  background: var(--cortex-color-surface);
-  color: var(--cortex-color-text-strong);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
-}
-.cortex-table-block__dialog[open] {
-  display: flex;
-  flex-direction: column;
-}
-.cortex-table-block__dialog::backdrop {
-  background: rgba(0, 0, 0, 0.4);
+.cortex-table-block .cortex-expandable {
+  width: fit-content;
+  max-width: 100%;
 }
 
-.cortex-table-block__dialog-head {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.125rem;
-  padding: 0.375rem;
-  border-bottom: 1px solid var(--cortex-color-border);
+.cortex-table-block__expanded {
+  padding: 1rem;
 }
-
-.cortex-table-block__dialog-body {
-  overflow: auto;
-  padding: 0 1rem;
+.cortex-table-block__expanded td {
+  max-width: 40rem;
 }
 
 .cortex-reasoning-details {
@@ -2453,33 +2556,6 @@ details[open] > summary .cortex-debug-tool__chevron {
   color: var(--cortex-color-text-heading);
 }
 
-.cortex-approval-card__sentence--full {
-  padding-top: 0;
-  font-weight: 400;
-  color: var(--cortex-color-text-strong);
-}
-
-.cortex-approval-card__rows {
-  display: grid;
-  grid-template-columns: fit-content(40%) minmax(0, 1fr);
-  gap: 0.1875rem 0.75rem;
-  margin: 0;
-  padding: 0 0.75rem 0.75rem;
-  font-size: 0.78125rem;
-}
-.cortex-approval-card__rows dt {
-  color: var(--cortex-color-text-secondary);
-  overflow-wrap: anywhere;
-}
-.cortex-approval-card__rows dd {
-  max-height: 6rem;
-  margin: 0;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  color: var(--cortex-color-text-strong);
-  overflow-wrap: anywhere;
-}
-
 .cortex-approval-card__foot {
   display: flex;
   gap: 0.5rem;
@@ -2507,7 +2583,7 @@ details[open] > summary .cortex-debug-tool__chevron {
 
 .cortex-approval-card__line {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   font-size: 0.8125rem;
@@ -2525,22 +2601,6 @@ details[open] > summary .cortex-debug-tool__chevron {
 .cortex-approval-card__summary {
   min-width: 0;
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cortex-approval-card__details {
-  flex-shrink: 0;
-  border: 0;
-  background: none;
-  padding: 0;
-  font: inherit;
-  font-size: 0.75rem;
-  color: var(--cortex-color-text-secondary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
 }
 
 .cortex-tool-fold {
@@ -3662,7 +3722,8 @@ html[dir=ltr] .cortex-llm-inspector__trigger {
 @media (prefers-reduced-motion: reduce) {
   .cortex-widget *,
   .cortex-widget *::before,
-  .cortex-widget *::after {
+  .cortex-widget *::after,
+  .cortex-widget *::backdrop {
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@m6d/cortex-react",
-    "version": "0.8.0",
+    "version": "0.9.1",
     "description": "React chat widget SDK for cortex servers",
     "license": "MIT",
     "sideEffects": [