@duskmoon-dev/components 0.5.2 → 0.5.4

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.2";
+var version = "0.5.4";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -43,8 +43,8 @@ html {
   color: var(--color-base-content);
 }
 
-/* Focus ring utility */
-:focus-visible {
+/* Focus ring utility; the integrated chat input uses its composer's ring. */
+:focus-visible:not(:where(.chat-composer .chat-composer-input)) {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
@@ -6677,6 +6677,103 @@ html {
     justify-self: end;
   }
 
+  .chat-agent {
+    align-items: start;
+    row-gap: 0.5rem;
+    padding: 0.75rem 0;
+    min-inline-size: 0;
+    color: var(--color-on-surface);
+  }
+
+  .chat-agent:not(:has(> .chat-avatar)) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .chat-agent:not(:has(> .chat-avatar)) > * {
+    grid-column: 1;
+  }
+
+  .chat-agent .chat-avatar {
+    grid-row: 1;
+  }
+
+  .chat-content {
+    width: 100%;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color: var(--color-on-surface);
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+  }
+
+  .chat-content pre {
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow: auto;
+    white-space: pre;
+  }
+
+  .chat-content a {
+    overflow-wrap: anywhere;
+    text-decoration: underline;
+  }
+
+  .chat-work {
+    width: 100%;
+    min-inline-size: 0;
+    border: 0;
+    padding: 0;
+    background: transparent;
+  }
+
+  .chat-work-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0;
+    border-block-end: 1px solid var(--color-outline-variant);
+    color: var(--color-on-surface-variant);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+    list-style: none;
+    cursor: pointer;
+  }
+
+  .chat-work-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .chat-work-summary::after {
+    content: "›";
+    flex-shrink: 0;
+  }
+
+  .chat-work[open] > .chat-work-summary::after {
+    transform: rotate(90deg);
+  }
+
+  .chat-work-summary:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .chat-work-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+  }
+
+  .chat-agent .chat-reasoning,
+  .chat-agent .chat-tool {
+    width: 100%;
+    max-width: none;
+    box-sizing: border-box;
+  }
+
   .chat-header,
   .chat-footer {
     color: var(--color-on-surface-variant);
@@ -6741,6 +6838,206 @@ html {
     }
   }
 
+  /** Waiting messages; the application owns dispatch, steer, and removal. */
+  .chat-input-area {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color: var(--color-on-surface);
+  }
+
+  .chat-input-area > .chat-queue {
+    margin-inline: 0.75rem;
+    margin-block-end: -0.5rem;
+    padding: 0.125rem 0.5rem 0.625rem;
+    border-block-end: 0;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  }
+
+  .chat-input-area > .chat-queue .chat-queue-header:not(.sr-only) {
+    padding: 0.125rem 0 0.5rem;
+  }
+
+  .chat-input-area > .chat-queue .chat-queue-list {
+    padding: 0;
+  }
+
+  .chat-queue {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .chat-queue-header:not(.sr-only) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.625rem 0.875rem;
+  }
+
+  .chat-queue-title {
+    margin: 0;
+    font-size: inherit;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+
+  .chat-queue-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-block-size: 16rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    margin: 0;
+    padding: 0 0.875rem 0.875rem;
+    box-sizing: border-box;
+    list-style: none;
+  }
+
+  .chat-queue-item {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.375rem;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    background-color: transparent;
+  }
+
+  .chat-queue-icon {
+    flex-shrink: 0;
+    inline-size: 1rem;
+    block-size: 1rem;
+    color: var(--color-on-surface-variant);
+  }
+
+  .chat-queue-item-active .chat-queue-icon {
+    color: var(--color-on-surface);
+  }
+
+  .chat-queue-attachment {
+    flex-shrink: 0;
+    inline-size: 2rem;
+    block-size: 2rem;
+    object-fit: cover;
+    border-radius: var(--radius-xs);
+  }
+
+  .chat-queue-number {
+    flex-shrink: 0;
+    color: var(--color-on-surface-variant);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .chat-queue-count {
+    white-space: nowrap;
+  }
+
+  .chat-queue-content {
+    flex: 1 1 8rem;
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .chat-queue-actions {
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+
+  .chat-queue-steer,
+  .chat-queue-remove {
+    flex-shrink: 0;
+  }
+
+  .chat-queue[hidden],
+  .chat-queue-item[hidden] {
+    display: none;
+  }
+
+  .chat-composer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 1rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-xl);
+    background-color: var(--color-surface-container-high);
+    color: var(--color-on-surface);
+  }
+
+  .chat-composer:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .chat-composer-input {
+    display: block;
+    width: 100%;
+    min-inline-size: 0;
+    min-block-size: 3rem;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+    background-color: transparent;
+    color: var(--color-on-surface);
+    font: inherit;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+    resize: vertical;
+  }
+
+  .chat-composer-input::placeholder {
+    color: var(--color-on-surface-variant);
+    opacity: 1;
+  }
+
+  .chat-composer-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  .chat-composer-hint {
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 400;
+    opacity: 1;
+  }
+
+  .chat-composer-primary { color: var(--color-primary); }
+  .chat-composer-secondary { color: var(--color-secondary); }
+  .chat-composer-tertiary { color: var(--color-tertiary); }
+  .chat-composer-info { color: var(--color-info); }
+  .chat-composer-success { color: var(--color-success); }
+  .chat-composer-warning { color: var(--color-warning); }
+  .chat-composer-error { color: var(--color-error); }
+  .chat-composer-ghost { border-color: transparent; }
+
   .chat-bubble {
     --chat-bubble-bg: var(--color-surface-container-highest);
     --chat-bubble-fg: var(--color-on-surface);
@@ -6766,40 +7063,29 @@ html {
   .chat-bubble-content {
     min-width: 0;
   }
-  .chat-bubble pre { max-inline-size: 100%; min-inline-size: 0; overflow: auto; white-space: pre; }
-  .chat-bubble a { overflow-wrap: anywhere; text-decoration: underline; }
-
-  .chat-start .chat-bubble::before,
-  .chat-end .chat-bubble::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 0;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    background-color: var(--chat-bubble-bg);
-    mask-image: radial-gradient(ellipse at 0 100%, transparent 68%, black 72%);
-    pointer-events: none;
-  }
 
-  .chat-start .chat-bubble::before {
-    inset-inline-start: -0.5rem;
+  .chat-bubble-collapsible > .chat-bubble-content {
+    max-block-size: 6lh;
+    overflow: hidden;
+    white-space: pre-wrap;
   }
 
-  .chat-start .chat-bubble {
-    border-start-start-radius: 0;
+  .chat-bubble-collapsible:has(> .chat-bubble-toggle[aria-expanded="true"]) > .chat-bubble-content {
+    max-block-size: none;
+    overflow: visible;
   }
 
-  .chat-end .chat-bubble::before {
-    inset-inline-end: -0.5rem;
-    transform: scaleX(-1);
+  .chat-bubble-toggle {
+    align-self: flex-end;
+    color: inherit;
   }
 
-  .chat-end .chat-bubble {
-    border-start-end-radius: 0;
+  .chat-bubble-toggle[hidden] {
+    display: none;
   }
 
-  .chat-start:dir(rtl) .chat-bubble::before { transform: scaleX(-1); }
-  .chat-end:dir(rtl) .chat-bubble::before { transform: none; }
+  .chat-bubble pre { max-inline-size: 100%; min-inline-size: 0; overflow: auto; white-space: pre; }
+  .chat-bubble a { overflow-wrap: anywhere; text-decoration: underline; }
 
   .chat-bubble-primary {
     --chat-bubble-bg: var(--color-primary-container);
@@ -7069,6 +7355,7 @@ html {
     animation-delay: 300ms;
   }
 
+  .chat-streaming::after,
   .chat-bubble-streaming::after,
   .chat-bubble-content.chat-bubble-streaming::after {
     content: "";
@@ -7148,12 +7435,14 @@ html {
     .chat-typing::before,
     .chat-typing::after,
     .chat-typing span,
+    .chat-streaming::after,
     .chat-bubble-streaming::after,
     .chat-bubble-content.chat-bubble-streaming::after,
     .chat-tool-running .chat-tool-header::before {
       animation: none;
     }
 
+    .chat-streaming::after,
     .chat-bubble-streaming::after,
     .chat-bubble-content.chat-bubble-streaming::after {
       opacity: 1;
@@ -22879,6 +23168,20 @@ html {
     margin-block-end: 0.5rem;
   }
 
+  /* Chat prose follows the bubble; embedded surfaces keep their own color pair. */
+  .chat-bubble .markdown-body,
+  .chat-bubble .markdown-body :is(a, blockquote, h6, del, s, figcaption) {
+    color: inherit;
+  }
+
+  .chat-bubble .markdown-body a {
+    text-decoration: underline;
+  }
+
+  .chat-bubble .markdown-body :is(code, pre, kbd, th, tr:nth-child(2n)) {
+    color: var(--color-on-surface);
+  }
+
   /* ============================================
    * EDGE CASES (T042-T043)
    * ============================================ */
@@ -26468,7 +26771,12 @@ html {
   }
 
   .select-container > .select {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.75rem 0 0.875rem;
     background-image: none;
+    appearance: none;
   }
 
   .select:focus-visible {
@@ -26592,6 +26900,42 @@ html {
       0 16px 40px rgb(15 23 42 / 0.12);
   }
 
+  .select-dropdown[popover] {
+    position: fixed;
+    inset: auto;
+    width: anchor-size(width);
+    min-width: var(--select-anchor-width, 10rem);
+    max-height: 16rem;
+    margin: 0.375rem 0 0 0;
+    padding: 0.375rem;
+    overflow: auto;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+    box-shadow:
+      0 4px 12px rgb(15 23 42 / 0.1),
+      0 16px 40px rgb(15 23 42 / 0.12);
+  }
+
+  @supports (position-area: bottom) {
+    .select-dropdown[popover] {
+      position-area: bottom span-right;
+      position-try-fallbacks: flip-block;
+    }
+  }
+
+  @supports not (position-area: bottom) {
+    .select-dropdown[popover] {
+      top: anchor(bottom);
+      left: anchor(left);
+    }
+  }
+
+  .select-dropdown[popover]:popover-open {
+    display: grid;
+  }
+
   .select-option {
     display: flex;
     width: 100%;
@@ -29416,19 +29760,7 @@ html {
   width: 100%;
 }
 
-/* Composer state and layout are independent from conversation rows. */
-.chat-composer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-width: 0;
-  padding: 0.75rem;
-  border: 1px solid var(--color-outline-variant);
-  border-radius: var(--radius-box, 0.75rem);
-  background: var(--color-surface);
-  color: var(--color-on-surface);
-}
-
+/* The controlled helper retains its bounded editor; Core owns composer presentation. */
 .chat-composer .chat-composer-editor {
   box-sizing: border-box;
   width: 100%;
@@ -29438,7 +29770,6 @@ html {
   line-height: 1.5rem;
 }
 
-.chat-composer-actions,
 .chat-composer-attachments {
   display: flex;
   align-items: center;
@@ -29504,6 +29835,6 @@ html {
   font-size: 0.875rem;
 }
 
-.chat-composer-error {
+.chat-composer .chat-composer-error {
   color: var(--color-error);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -472,7 +472,7 @@
     }
   ],
   "peerDependencies": {
-    "@duskmoon-dev/core": ">=1.20.3",
+    "@duskmoon-dev/core": ">=1.20.6",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -485,7 +485,7 @@
     "ajv-formats": "^3.0.1"
   },
   "devDependencies": {
-    "@duskmoon-dev/core": "1.20.5",
+    "@duskmoon-dev/core": "1.20.7",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",