@duskmoon-dev/components 0.5.1 → 0.5.3

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.1";
+var version = "0.5.3";
 
 // 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;
 }
@@ -434,29 +434,33 @@ html {
   grid-template-columns: repeat(auto-fit, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
 }
 
-/* Screen reader only utility - visually hidden but accessible */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+/* Low-specificity fallbacks let Tailwind variants override either import order. */
+@layer utilities {
+  /* Screen reader only utility - visually hidden but accessible */
+  :where(.sr-only) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 
-/* Undo sr-only for focus states (useful for skip links) */
-.not-sr-only {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
+  /* Undo sr-only for focus states (useful for skip links) */
+  :where(.not-sr-only) {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
 }
 
 
@@ -5075,6 +5079,10 @@ html {
   .pagination-item-active,
   .pagination-item-active-primary,
   .pagination-item[aria-current="page"],
+  .pagination li > a.pagination-item-active,
+  .pagination li > button.pagination-item-active,
+  .pagination li > a.pagination-item-active-primary,
+  .pagination li > button.pagination-item-active-primary,
   .pagination li > a.active,
   .pagination li > button.active,
   .pagination li > a[aria-current="page"],
@@ -5084,13 +5092,19 @@ html {
     border-color: var(--color-primary);
   }
 
-  .pagination-item-active-secondary {
+  .pagination-item-active-secondary,
+  .pagination-item-active-secondary[aria-current="page"],
+  .pagination li > a.pagination-item-active-secondary,
+  .pagination li > button.pagination-item-active-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
     border-color: var(--color-secondary);
   }
 
-  .pagination-item-active-tertiary {
+  .pagination-item-active-tertiary,
+  .pagination-item-active-tertiary[aria-current="page"],
+  .pagination li > a.pagination-item-active-tertiary,
+  .pagination li > button.pagination-item-active-tertiary {
     background-color: var(--color-tertiary);
     color: var(--color-tertiary-content);
     border-color: var(--color-tertiary);
@@ -5099,11 +5113,29 @@ html {
   .pagination-item-active:hover,
   .pagination-item-active-primary:hover,
   .pagination-item[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active:hover,
+  .pagination li > button.pagination-item-active:hover,
+  .pagination li > a.pagination-item-active-primary:hover,
+  .pagination li > button.pagination-item-active-primary:hover,
   .pagination li > a[aria-current="page"]:hover,
   .pagination li > button[aria-current="page"]:hover {
     background-color: color-mix(in oklch, var(--color-primary), black 10%);
   }
 
+  .pagination-item-active-secondary:hover,
+  .pagination-item-active-secondary[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active-secondary:hover,
+  .pagination li > button.pagination-item-active-secondary:hover {
+    background-color: color-mix(in oklch, var(--color-secondary), black 10%);
+  }
+
+  .pagination-item-active-tertiary:hover,
+  .pagination-item-active-tertiary[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active-tertiary:hover,
+  .pagination li > button.pagination-item-active-tertiary:hover {
+    background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
+  }
+
   .pagination-item:focus-visible,
   .pagination-prev:focus-visible,
   .pagination-next:focus-visible,
@@ -5318,7 +5350,9 @@ html {
   .megamenu-panel[popover] {
     position-anchor: var(--megamenu-anchor);
     position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    /* Narrow viewports need candidates spanning the whole inline axis. */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline,
+      block-end span-all, block-start span-all;
     display: none; box-sizing: border-box;
     width: min(48rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
     max-height: min(36rem, calc(100dvh - 2rem)); margin: 0.5rem; padding: 1rem;
@@ -6643,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);
@@ -6707,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);
@@ -6732,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);
@@ -7035,6 +7355,7 @@ html {
     animation-delay: 300ms;
   }
 
+  .chat-streaming::after,
   .chat-bubble-streaming::after,
   .chat-bubble-content.chat-bubble-streaming::after {
     content: "";
@@ -7114,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;
@@ -22845,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)
    * ============================================ */
@@ -29382,19 +29719,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%;
@@ -29404,7 +29729,6 @@ html {
   line-height: 1.5rem;
 }
 
-.chat-composer-actions,
 .chat-composer-attachments {
   display: flex;
   align-items: center;
@@ -29470,6 +29794,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.1",
+  "version": "0.5.3",
   "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.3",
+    "@duskmoon-dev/core": "1.20.7",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",