@m6d/cortex-react 0.7.0 → 0.9.0

package/dist/styles.css

@@ -55,6 +55,14 @@
     monospace
   );
   --cortex-font-size: 0.8125rem;
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
   /* The widget's headings read --cortex-font-display and fall back to `inherit`,
    * so it ships unset on purpose — declaring it here is how you opt in:
    *
@@ -72,7 +80,7 @@
   color-scheme: light dark;
 }
 
-@layer cortex-preflight {
+@layer base.cortex {
   :where(.cortex-widget),
   :where(.cortex-widget) *,
   :where(.cortex-widget) ::before,
@@ -364,8 +372,13 @@
 .cortex-widget__container--full .cortex-widget__history-btn {
   display: none;
 }
+@media (min-width: 769px) {
+  .cortex-widget__container--full > .cortex-widget__screen:nth-child(2) .cortex-widget__new-btn {
+    display: none;
+  }
+}
 .cortex-widget__container--full .cortex-widget__chat-title {
-  font-size: 0.875rem;
+  font-size: var(--cortex-font-size-header, 0.875rem);
 }
 .cortex-widget__container--full .cortex-widget__chat-header {
   background: var(--cortex-color-surface);
@@ -464,8 +477,7 @@
   background: var(--cortex-color-surface);
 }
 
-.cortex-widget__back-btn,
-.cortex-widget__history-btn {
+.cortex-widget__header-btn {
   flex-shrink: 0;
   width: 2rem;
   height: 2rem;
@@ -479,8 +491,7 @@
   transition: color 0.15s, background-color 0.15s;
   color: var(--cortex-color-text-muted);
 }
-.cortex-widget__back-btn:hover,
-.cortex-widget__history-btn:hover {
+.cortex-widget__header-btn:hover {
   color: var(--cortex-color-text);
   background: var(--cortex-color-surface-muted);
 }
@@ -496,7 +507,7 @@
 
 .cortex-widget__chat-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-header, var(--cortex-font-size));
   font-weight: 500;
   color: var(--cortex-color-text-strong);
   overflow: hidden;
@@ -541,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;
@@ -660,13 +676,8 @@ cortex-llm-usage-chips {
   border-radius: calc(var(--cortex-radius) * 1.5);
   border: 1px solid var(--cortex-color-border);
   padding: 0.375rem;
-  transition: border-color 0.15s, background-color 0.15s;
-}
-.cortex-widget__input-box--disabled {
-  background: var(--cortex-color-surface-muted);
-}
-.cortex-widget__input-box--enabled {
   background: color-mix(in oklab, var(--cortex-color-surface-subtle) 45%, var(--cortex-color-surface));
+  transition: border-color 0.15s, background-color 0.15s;
 }
 .cortex-widget__input-box--enabled:focus-within {
   border-color: var(--cortex-color-border-strong);
@@ -678,16 +689,23 @@ cortex-llm-usage-chips {
   background: var(--cortex-color-surface-muted);
 }
 
-.cortex-widget__textarea {
-  flex: 1;
+.cortex-widget__textarea,
+.cortex-widget__textarea:focus,
+.cortex-widget__textarea:focus-visible,
+.cortex-widget__textarea:disabled {
   background: transparent;
-  resize: none;
   border: 0;
   outline: none;
-  font-size: var(--cortex-font-size);
+  box-shadow: none;
+}
+
+.cortex-widget__textarea {
+  flex: 1;
+  resize: none;
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   padding: 0.375rem 0.5rem;
   min-height: 28px;
-  max-height: calc(5.5 * var(--cortex-font-size) + 0.75rem);
+  max-height: calc(5.5 * var(--cortex-font-size-message, var(--cortex-font-size)) + 0.75rem);
   overflow-y: auto;
   line-height: 1.375;
   color: var(--cortex-color-text-strong);
@@ -701,7 +719,6 @@ cortex-llm-usage-chips {
 }
 .cortex-widget__textarea:disabled {
   cursor: not-allowed;
-  border: 0;
 }
 
 .cortex-widget__input-actions {
@@ -808,8 +825,8 @@ cortex-llm-usage-chips {
   cursor: default;
 }
 .cortex-widget__send-btn--empty {
-  background: var(--cortex-color-border);
-  color: var(--cortex-color-text-muted);
+  background: var(--cortex-color-send-empty, transparent);
+  color: var(--cortex-color-send-empty-text, var(--cortex-color-text-muted));
 }
 .cortex-widget__send-btn--ready {
   background: var(--cortex-color-primary);
@@ -831,13 +848,13 @@ cortex-llm-usage-chips {
   align-items: center;
   gap: 0.75rem;
 }
-.cortex-widget__threads-header .cortex-widget__new-chat-btn {
+.cortex-widget__threads-header .cortex-widget__new-btn {
   margin-inline-start: auto;
 }
 
 .cortex-widget__threads-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: 0.9375rem;
+  font-size: var(--cortex-font-size-header, 0.9375rem);
   font-weight: 600;
   color: var(--cortex-color-text-heading);
   letter-spacing: -0.01em;
@@ -1218,9 +1235,9 @@ cortex-llm-usage-chips {
   position: absolute;
   inset: -0.25rem;
   border-radius: 9999px;
-  border: 1.5px solid transparent;
+  border: 1.5px solid color-mix(in oklab, var(--cortex-color-accent) 18%, transparent);
   border-top-color: var(--cortex-color-accent);
-  border-right-color: color-mix(in oklab, var(--cortex-color-accent) 40%, transparent);
+  border-right-color: color-mix(in oklab, var(--cortex-color-accent) 45%, transparent);
 }
 .cortex-working-avatar--shown .cortex-working-avatar__ring {
   animation: cortex-tool-spin 1s linear infinite;
@@ -1260,15 +1277,15 @@ cortex-llm-usage-chips {
 
 .cortex-text-bubble--assistant,
 .cortex-subtle-activity,
-.cortex-tool-pill:not(.cortex-tool-pill--gated),
-.cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-tool-pill,
+.cortex-tool-pill .cortex-tool-pill__icon {
   transition: translate 420ms cubic-bezier(0.76, 0, 0.24, 1) 160ms;
 }
 
 .cortex-message--working-turn .cortex-text-bubble--assistant,
 .cortex-message--working-turn .cortex-subtle-activity,
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated),
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-message--working-turn .cortex-tool-pill,
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   transition-delay: 0s;
 }
 .cortex-message--working-turn .cortex-text-bubble--assistant,
@@ -1279,16 +1296,16 @@ cortex-llm-usage-chips {
 [dir=rtl] .cortex-message--working-turn .cortex-subtle-activity {
   translate: -2rem;
 }
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) {
+.cortex-message--working-turn .cortex-tool-pill {
   translate: 0.875rem;
 }
-[dir=rtl] .cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) {
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill {
   translate: -0.875rem;
 }
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   translate: -0.5rem;
 }
-[dir=rtl] .cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   translate: 0.5rem;
 }
 
@@ -1425,7 +1442,7 @@ cortex-llm-usage-chips {
   max-width: 80%;
   min-width: 0;
   overflow-wrap: anywhere;
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   line-height: 1.625;
   padding: 1rem;
   border-radius: calc(var(--cortex-radius) * 2);
@@ -1580,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);
@@ -1645,6 +1785,7 @@ cortex-llm-usage-chips {
 }
 
 .cortex-media-block__body {
+  display: block;
   padding: 0.75rem;
 }
 .cortex-media-block__body[hidden] {
@@ -1659,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;
@@ -1667,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;
@@ -1689,19 +1853,56 @@ 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;
   color: var(--cortex-color-text-muted);
 }
 
+.cortex-table-block {
+  display: block;
+  margin: 0.75em 0;
+}
+.cortex-table-block th {
+  white-space: nowrap;
+}
+.cortex-table-block td {
+  max-width: 20rem;
+}
+.cortex-table-block table {
+  margin: 0;
+}
+.cortex-table-block .cortex-expandable {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.cortex-table-block__expanded {
+  padding: 1rem;
+}
+.cortex-table-block__expanded td {
+  max-width: 40rem;
+}
+
 .cortex-reasoning-details {
   width: 100%;
   border-radius: var(--cortex-radius);
@@ -2324,51 +2525,82 @@ details[open] > summary .cortex-debug-tool__chevron {
   font-variant-numeric: tabular-nums;
 }
 
-.cortex-tool-pill--gated {
+.cortex-approval-card {
+  display: block;
+  max-width: min(100%, 28rem);
+  margin: 0.25rem 0;
   border: 1px solid var(--cortex-color-border);
-  border-radius: 9999px;
-  background: var(--cortex-color-surface-subtle);
-  padding: 0.3rem 0.75rem 0.3rem 0.65rem;
-  gap: 0.6rem;
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  overflow: hidden;
 }
-
-.cortex-tool-pill--asking {
-  padding-inline-end: 0.3rem;
-  flex-wrap: wrap;
+.cortex-approval-card--asking {
+  border-color: color-mix(in oklab, var(--cortex-color-accent) 45%, var(--cortex-color-border));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cortex-color-accent) 10%, transparent);
 }
 
-.cortex-tool-pill__dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  background: var(--cortex-color-accent);
+.cortex-approval-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cortex-color-accent);
 }
 
-.cortex-tool-pill--gated .cortex-tool-pill__title {
+.cortex-approval-card__sentence {
+  margin: 0;
+  padding: 0.375rem 0.75rem 0.5rem;
+  font-weight: 600;
   color: var(--cortex-color-text-heading);
-  white-space: normal;
 }
 
-.cortex-tool-pill__actions {
+.cortex-approval-card__foot {
   display: flex;
-  gap: 0.3rem;
-  margin-inline-start: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border-top: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface-subtle);
 }
 
-.cortex-tool-pill__action {
+.cortex-approval-card__button {
   border: 1px solid var(--cortex-color-border-strong);
-  border-radius: 9999px;
-  background: none;
-  padding: 4px 11px;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: var(--cortex-color-surface);
+  padding: 0.375rem 0.875rem;
   font: inherit;
-  font-size: 12.5px;
-  color: var(--cortex-color-text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
   cursor: pointer;
 }
-.cortex-tool-pill__action--approve {
-  background: var(--cortex-color-accent);
+.cortex-approval-card__button--approve {
   border-color: var(--cortex-color-accent);
-  color: #fff;
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+}
+
+.cortex-approval-card__line {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-approval-card__line .cortex-tool-pill__icon {
+  flex-shrink: 0;
+}
+
+.cortex-approval-card__decision {
+  font-weight: 600;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-approval-card__summary {
+  min-width: 0;
+  flex: 1;
 }
 
 .cortex-tool-fold {
@@ -3490,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/dist/theme.css

@@ -63,6 +63,15 @@
   );
   --cortex-font-size: 0.8125rem;
 
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
+
   /* The widget's headings read --cortex-font-display and fall back to `inherit`,
    * so it ships unset on purpose — declaring it here is how you opt in:
    *

package/package.json

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