@qfei-design/make-ai-assistant 0.2.4 → 0.2.6

package/dist/styles.css

@@ -1,20 +1,27 @@
 :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-drawer-width: var(--make-ai-drawer-width, 432px);
-  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, #5147f3);
+  --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-min-width: var(--make-ai-drawer-width, 432px);
+  --make-ai-internal-drawer-width: var(--make-ai-internal-drawer-min-width);
+  --make-ai-internal-drawer-max-width: max(var(--make-ai-internal-drawer-min-width), min(1024px, 72vw));
+  --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);
@@ -59,7 +66,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),
@@ -67,8 +74,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%;
@@ -76,8 +83,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;
@@ -99,7 +106,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);
 }
 
@@ -145,7 +152,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: "";
@@ -166,7 +173,11 @@
   position: fixed;
   right: 0;
   top: 0;
-  width: min(var(--make-ai-internal-drawer-width), 100vw);
+  width: min(
+    var(--make-ai-internal-drawer-width),
+    var(--make-ai-internal-drawer-max-width),
+    100vw
+  );
   z-index: var(--make-ai-internal-z-index);
   animation: make-ai-drawer-in 180ms cubic-bezier(.2, .75, .35, 1);
 }
@@ -327,10 +338,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;
@@ -378,10 +389,10 @@
 }
 
 .make-ai-assistant__header-context-tooltip {
-  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+  background: var(--make-ai-internal-overlay);
   border-radius: 8px;
-  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);
   font-size: 11px;
   font-weight: 500;
   line-height: 1.5;
@@ -635,8 +646,9 @@
   font-size: var(--make-ai-internal-font-size-markdown);
   gap: 10px;
   line-height: 1.7;
-  max-width: min(100%, 66ch);
+  max-width: 100%;
   white-space: normal;
+  width: 100%;
 }
 
 .make-ai-assistant__assistant-text p,
@@ -740,6 +752,29 @@
   max-width: 100%;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
+  scrollbar-color: color-mix(in srgb, var(--make-ai-internal-accent) 46%, var(--make-ai-internal-border)) transparent;
+  scrollbar-width: thin;
+}
+
+.make-ai-assistant__markdown-table-scroll::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+.make-ai-assistant__markdown-table-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.make-ai-assistant__markdown-table-scroll::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 46%, var(--make-ai-internal-border));
+  background-clip: padding-box;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+
+.make-ai-assistant__markdown-table-scroll:hover::-webkit-scrollbar-thumb,
+.make-ai-assistant__markdown-table-scroll:focus-within::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 64%, var(--make-ai-internal-border));
 }
 
 .make-ai-assistant__markdown-table {
@@ -1004,11 +1039,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;
@@ -1056,7 +1091,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;
@@ -1073,7 +1108,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);
 }
 
@@ -1119,7 +1154,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;
@@ -1141,7 +1176,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;
 }
 
@@ -1186,7 +1221,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 {
@@ -1216,7 +1251,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;
@@ -1352,7 +1387,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 {
@@ -1534,10 +1569,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
     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);
   }
@@ -1561,8 +1592,15 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
     padding-bottom: 36px;
   }
 
-  .make-ai-assistant__assistant-text {
-    max-width: min(100%, 82ch);
+  .make-ai-assistant__assistant-text > p,
+  .make-ai-assistant__assistant-text > .make-ai-assistant__markdown-heading,
+  .make-ai-assistant__assistant-text > ul {
+    max-width: min(100%, 96ch);
+  }
+
+  .make-ai-assistant__markdown-table-scroll,
+  .make-ai-assistant__assistant-text > pre {
+    width: 100%;
   }
 
   .make-ai-assistant__message--user .make-ai-assistant__message-turn {

package/package.json

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