@qfei-design/make-ai-assistant 0.2.3 → 0.2.5

package/dist/styles.css

@@ -1,19 +1,25 @@
 :where(.make-ai-assistant, .make-ai-artifact) {
-  --make-ai-internal-accent: var(--make-ai-accent, var(--make-color-primary, #5147f3));
-  --make-ai-internal-accent-strong: var(--make-ai-accent-strong, var(--make-color-primary-hover, #4037da));
+  --make-ai-internal-accent: var(--make-ai-theme-primary, var(--make-ai-accent, var(--make-color-primary, #5147f3)));
+  --make-ai-internal-accent-strong: var(--make-ai-theme-primary-hover, var(--make-ai-accent-strong, var(--make-color-primary-hover, color-mix(in srgb, var(--make-ai-internal-accent) 84%, var(--make-ai-internal-text)))));
+  --make-ai-internal-on-accent: var(--make-ai-theme-on-primary, var(--make-ai-on-accent, #fcfcff));
   --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg)));
-  --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #fcfcff));
-  --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f8f8fc));
-  --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f0f6));
-  --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #252631));
-  --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #666979));
-  --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e4e5ed));
+  --make-ai-internal-bg: var(--make-ai-theme-bg, var(--make-ai-bg, var(--make-color-bg, color-mix(in srgb, var(--make-ai-internal-accent) 2%, #fcfcff))));
+  --make-ai-internal-surface: var(--make-ai-theme-surface, var(--make-ai-surface, var(--make-color-bg-subtle, color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-bg)))));
+  --make-ai-internal-surface-strong: var(--make-ai-theme-surface-strong, var(--make-ai-surface-strong, var(--make-color-bg-muted, color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-bg)))));
+  --make-ai-internal-text: var(--make-ai-theme-text, var(--make-ai-text, var(--make-color-text, color-mix(in srgb, var(--make-ai-internal-accent) 12%, #252631))));
+  --make-ai-internal-text-secondary: var(--make-ai-theme-text-secondary, var(--make-ai-text-secondary, var(--make-color-text-secondary, color-mix(in srgb, var(--make-ai-internal-text) 74%, var(--make-ai-internal-accent)))));
+  --make-ai-internal-border: var(--make-ai-theme-border, var(--make-ai-border, var(--make-color-border, color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-bg)))));
   --make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
   --make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
   --make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
   --make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
-  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px rgb(30 31 43 / 12%));
+  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent));
+  --make-ai-internal-overlay: var(--make-ai-theme-overlay, var(--make-ai-overlay, color-mix(in srgb, var(--make-ai-internal-text) 88%, var(--make-ai-internal-accent))));
+  --make-ai-internal-on-overlay: var(--make-ai-theme-on-overlay, var(--make-ai-on-overlay, #fcfcff));
+  --make-ai-internal-overlay-shadow: color-mix(in srgb, var(--make-ai-internal-accent) 18%, transparent);
+  --make-ai-internal-highlight: color-mix(in srgb, var(--make-ai-internal-bg) 58%, transparent);
   --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 432px);
+  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, var(--make-ai-internal-accent));
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
   --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .75rem);
   --make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .6875rem);
@@ -21,6 +27,7 @@
   --make-ai-internal-line-height-body: var(--make-ai-line-height-body, 1.58);
   --make-ai-internal-panel-gutter: var(--make-ai-panel-gutter, 16px);
   --make-ai-internal-panel-gutter-compact: var(--make-ai-panel-gutter-compact, 12px);
+  --make-ai-internal-panel-gutter-wide: var(--make-ai-panel-gutter-wide, 24px);
   --make-ai-internal-header-height: var(--make-ai-header-height, 50px);
   --make-ai-internal-message-turn-gap: var(--make-ai-message-turn-gap, 8px);
   --make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap, 12px);
@@ -57,7 +64,7 @@
 .make-ai-assistant__launcher {
   align-items: center;
   background:
-    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 56%), transparent 31%),
+    radial-gradient(circle at 34% 24%, var(--make-ai-internal-highlight), transparent 31%),
     radial-gradient(
       circle at 70% 78%,
       color-mix(in srgb, var(--make-ai-internal-accent) 24%, transparent),
@@ -65,8 +72,8 @@
     ),
     linear-gradient(
       145deg,
-      color-mix(in srgb, var(--make-ai-internal-accent) 68%, #fcfcff),
-      color-mix(in srgb, var(--make-ai-internal-accent) 72%, #bdb8ff)
+      color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-bg)),
+      color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-bg))
     );
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, var(--make-ai-internal-border));
   border-radius: 50%;
@@ -74,8 +81,8 @@
   box-shadow:
     0 12px 26px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent),
     0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent),
-    inset 0 1px 0 rgb(255 255 255 / 58%);
-  color: #fcfcff;
+    inset 0 1px 0 var(--make-ai-internal-highlight);
+  color: var(--make-ai-internal-on-accent);
   cursor: pointer;
   display: flex;
   height: 50px;
@@ -97,7 +104,7 @@
   box-shadow:
     0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 17%, transparent),
     0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
-    inset 0 1px 0 rgb(255 255 255 / 64%);
+    inset 0 1px 0 var(--make-ai-internal-highlight);
   transform: translateY(-50%) scale(1.04);
 }
 
@@ -143,7 +150,7 @@
 }
 
 .make-ai-assistant__launcher-orbit::before {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 52%, #fcfcff);
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 52%, var(--make-ai-internal-bg));
   border-radius: 50%;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
   content: "";
@@ -184,7 +191,7 @@
 }
 
 .make-ai-assistant__drawer-resize-handle::after {
-  background: var(--make-ai-internal-accent);
+  background: var(--make-ai-internal-drawer-resize-line);
   border-radius: 999px;
   content: "";
   height: 100%;
@@ -194,13 +201,13 @@
   top: 0;
   transform: translateX(-50%);
   transition: opacity 160ms ease;
-  width: 3px;
+  width: 2px;
 }
 
 .make-ai-assistant__drawer-resize-handle:hover::after,
 .make-ai-assistant__drawer[data-resizing] .make-ai-assistant__drawer-resize-handle::after,
 .make-ai-assistant__drawer-resize-handle:focus-visible::after {
-  opacity: .7;
+  opacity: 1;
 }
 
 .make-ai-assistant__drawer-resize-handle:focus-visible {
@@ -317,7 +324,7 @@
 }
 
 .make-ai-assistant__header-title {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -325,10 +332,10 @@
 }
 
 .make-ai-assistant__read-only-tag {
-  background: color-mix(in srgb, var(--make-ai-internal-success) 10%, var(--make-ai-internal-bg));
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-success) 24%, var(--make-ai-internal-border));
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 24%, var(--make-ai-internal-border));
   border-radius: 5px;
-  color: color-mix(in srgb, var(--make-ai-internal-success) 82%, var(--make-ai-internal-text));
+  color: color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-text));
   flex: 0 0 auto;
   font-size: .625rem;
   font-weight: 650;
@@ -352,7 +359,7 @@
   align-items: center;
   border-radius: 50%;
   color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 84%, var(--make-ai-internal-accent));
-  cursor: help;
+  cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
   height: 18px;
@@ -375,38 +382,33 @@
   outline-offset: 2px;
 }
 
-.make-ai-assistant__header-context-help[data-tooltip]::after {
-  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+.make-ai-assistant__header-context-tooltip {
+  background: var(--make-ai-internal-overlay);
   border-radius: 8px;
-  bottom: auto;
-  box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
-  color: #fcfcff;
-  content: attr(data-tooltip);
+  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
+  color: var(--make-ai-internal-on-overlay);
   font-size: 11px;
   font-weight: 500;
-  left: auto;
   line-height: 1.5;
-  max-width: min(
-    280px,
-    calc(100% - var(--make-ai-internal-panel-gutter) - var(--make-ai-internal-panel-gutter))
-  );
+  max-height: calc(100vh - 32px);
+  max-width: min(280px, calc(100vw - 32px));
   opacity: 0;
+  overflow: auto;
   padding: 7px 8px;
   pointer-events: none;
-  position: absolute;
-  right: var(--make-ai-internal-panel-gutter);
-  top: calc(100% + 8px);
+  position: fixed;
   transform: translateY(-2px);
   transition: opacity 120ms ease, transform 120ms ease;
+  visibility: hidden;
   white-space: normal;
   width: max-content;
-  z-index: 4;
+  z-index: calc(var(--make-ai-internal-z-index) + 1);
 }
 
-.make-ai-assistant__header-context-help[data-tooltip]:hover::after,
-.make-ai-assistant__header-context-help[data-tooltip]:focus-visible::after {
+.make-ai-assistant__header-context-tooltip[data-positioned][data-visible] {
   opacity: 1;
   transform: translateY(0);
+  visibility: visible;
 }
 
 .make-ai-assistant__body {
@@ -1007,11 +1009,11 @@
 
 .make-ai-assistant__reply-action[data-tooltip]::after,
 .make-ai-assistant__send[data-tooltip]::after {
-  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+  background: var(--make-ai-internal-overlay);
   border-radius: 8px;
   bottom: calc(100% + 7px);
-  box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
-  color: #fcfcff;
+  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
+  color: var(--make-ai-internal-on-overlay);
   content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 600;
@@ -1059,7 +1061,7 @@
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 16%, var(--make-ai-internal-border));
   border-radius: 999px;
   bottom: 94px;
-  box-shadow: 0 10px 24px rgb(30 31 43 / 11%);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--make-ai-internal-accent) 11%, transparent);
   color: color-mix(in srgb, var(--make-ai-internal-accent) 86%, var(--make-ai-internal-text));
   cursor: pointer;
   display: inline-flex;
@@ -1076,7 +1078,7 @@
 .make-ai-assistant__back-to-latest:hover {
   background: var(--make-ai-internal-bg);
   border-color: color-mix(in srgb, var(--make-ai-internal-accent) 30%, var(--make-ai-internal-border));
-  box-shadow: 0 12px 28px rgb(30 31 43 / 13%);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-accent) 13%, transparent);
   transform: translateY(-1px);
 }
 
@@ -1122,7 +1124,7 @@
   background: var(--make-ai-internal-accent);
   border-color: var(--make-ai-internal-accent);
   border-radius: 9px;
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
   font-weight: 650;
   margin-top: 0;
   min-height: 40px;
@@ -1144,7 +1146,7 @@
   background: color-mix(in srgb, var(--make-ai-internal-bg) 94%, var(--make-ai-internal-surface));
   border-top: 1px solid var(--make-ai-internal-border);
   grid-row: 3;
-  box-shadow: 0 -8px 18px rgb(30 31 43 / 3%);
+  box-shadow: 0 -8px 18px color-mix(in srgb, var(--make-ai-internal-accent) 3%, transparent);
   padding: 10px var(--make-ai-internal-panel-gutter) 9px;
 }
 
@@ -1189,7 +1191,7 @@
   border-color: color-mix(in srgb, var(--make-ai-internal-accent) 42%, var(--make-ai-internal-border));
   box-shadow:
     0 0 0 2px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent),
-    0 8px 18px rgb(30 31 43 / 5%);
+    0 8px 18px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent);
 }
 
 .make-ai-assistant__composer textarea {
@@ -1219,7 +1221,7 @@
   background: var(--make-ai-internal-accent);
   border: 0;
   border-radius: 50%;
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
   cursor: pointer;
   display: flex;
   flex: 0 0 auto;
@@ -1274,6 +1276,7 @@
   background: var(--make-ai-internal-surface);
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 86%, transparent);
   border-radius: var(--make-ai-internal-radius);
+  container-type: inline-size;
   overflow: hidden;
   padding: 14px;
   width: 100%;
@@ -1354,7 +1357,7 @@
 
 .make-ai-artifact__action--primary {
   background: var(--make-ai-internal-accent);
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
 }
 
 .make-ai-artifact__action--secondary {
@@ -1512,6 +1515,76 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   }
 }
 
+@container (min-width: 520px) {
+  .make-ai-artifact__comparison {
+    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  }
+
+  .make-ai-artifact__record {
+    grid-template-columns: minmax(100px, .8fr) minmax(180px, 1.5fr) auto;
+    padding: 11px 8px;
+  }
+
+  .make-ai-artifact__record-values {
+    gap: 16px;
+  }
+}
+
+@container (min-width: 560px) {
+  .make-ai-assistant__header {
+    padding-inline: var(--make-ai-internal-panel-gutter-wide);
+  }
+
+  .make-ai-assistant__body {
+    padding: 24px var(--make-ai-internal-panel-gutter-wide) 32px;
+  }
+
+  .make-ai-assistant__assistant-text {
+    max-width: min(100%, 76ch);
+  }
+
+  .make-ai-assistant__message--user .make-ai-assistant__message-turn {
+    max-width: min(72%, 420px);
+  }
+
+  .make-ai-assistant__markdown-table th,
+  .make-ai-assistant__markdown-table td {
+    padding: 7px 10px;
+  }
+
+  .make-ai-assistant__composer-region {
+    padding: 12px var(--make-ai-internal-panel-gutter-wide) 10px;
+  }
+
+  .make-ai-assistant__back-to-latest {
+    right: var(--make-ai-internal-panel-gutter-wide);
+  }
+}
+
+@container (min-width: 760px) {
+  .make-ai-assistant__body {
+    padding-bottom: 36px;
+  }
+
+  .make-ai-assistant__assistant-text {
+    max-width: min(100%, 82ch);
+  }
+
+  .make-ai-assistant__message--user .make-ai-assistant__message-turn {
+    max-width: min(68%, 480px);
+  }
+
+  .make-ai-assistant__markdown-table {
+    min-width: 100%;
+    table-layout: fixed;
+  }
+
+  .make-ai-assistant__markdown-table th {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+}
+
 @media (max-width: 560px) {
   .make-ai-assistant__drawer { width: 100vw; }
   .make-ai-assistant__drawer-resize-handle { display: none; }
@@ -1546,6 +1619,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   .make-ai-assistant__launcher > svg,
   .make-ai-assistant__back-to-latest,
   .make-ai-assistant__drawer-resize-handle::after,
+  .make-ai-assistant__header-context-tooltip,
   .make-ai-assistant__reply-action[data-tooltip]::after,
   .make-ai-assistant__send[data-tooltip]::after,
   .make-ai-assistant__process summary::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [