@duskmoon-dev/components 0.5.2 → 0.5.4

package/README.md

@@ -64,11 +64,40 @@ the supported `badge-outline` alias.
 Pair assistant rows and indicator buttons with timeline slots 1–24; user rows
 do not need ticks. `Chat.Status` and `Chat.Actions` accept ordinary content and
 button callbacks, so the application owns generation state and metrics. The
-Chat docs show all ten Core 1.20.3 showcases, including RTL bubbles, live states,
-tool statuses, and message actions. For an LLM reply, place reasoning and tool
-details inside one `Chat.Bubble`, with final content in
-`.chat-bubble-content`. The new Chat styles and the `Avatar` `2xl` size require
-Core 1.20.3 or newer.
+Chat docs include RTL, live states, tool statuses, message actions and the Core
+1.20.6 agent, queue and long-message contracts. Use `Chat.Agent` with
+`Chat.Content` for unboxed assistant answers. Group activity in native
+`Chat.Work`, `Chat.WorkSummary` and `Chat.WorkBody` disclosures, keeping the final
+answer outside them. User messages use `Chat placement="end"` and `Chat.Bubble`;
+opt into `collapsible` for automatic six-line measurement, resize/text updates,
+accessible expansion and focus cleanup. All new Chat primitives require Core
+1.20.6, which is the package peer minimum.
+
+`Chat.InputArea` attaches a controlled `Chat.Queue` to native
+`Chat.ComposerForm`, `Chat.ComposerInput`, `Chat.ComposerActions` and
+`Chat.ComposerHint` primitives. Queue items have stable `id`/`text` values and
+optional `{ src, alt }` attachments. `onSteer` and `onRemove` request application
+actions; the component never dequeues locally. Supply `pendingIds` while awaiting
+acknowledgment and update items only after success. Restore focus after removing
+a focused row, and announce queue changes once in an application status region.
+The application owns Enter/Shift+Enter/steering, IME guards, transport, ordering
+and failure policy. The interactive docs demonstrate those actual state changes.
+
+The existing controlled `Chat.Composer` retains its div ref, attachment and
+completion APIs, revision-safe asynchronous draft clearing, and Cmd/Ctrl+Enter
+submission with ordinary Enter for newlines. Use the native composer primitives
+when form submission and the reference's Enter-to-queue contract are needed.
+Existing `Chat.Bubble streaming` remains usable; `Chat.Content streaming` is the
+preferred agent presentation. No public Chat API is removed or deprecated.
+
+Normal `Tooltip` button/link triggers use native `interestfor`, hint popovers
+and CSS anchors. Browsers must support those APIs; there is no feature polyfill.
+Keep essential help inline. Controlled `open` uses native manual popovers;
+non-invoker children retain the older imperative compatibility adapter. Custom
+trigger components must forward `interestfor`, `style` and `aria-describedby`
+to their native control. Tooltip content is brief and noninteractive; put links,
+buttons and confirmation forms in Popover/Popconfirm. The existing deprecated
+`arrow` prop remains accepted; native surfaces are arrowless.
 
 ```tsx
 import { Chat } from "@duskmoon-dev/components/chat";
@@ -86,8 +115,8 @@ export function Conversation() {
         <Chat.ScrollIndicator timeline={1} targetId={replyId} />
       </Chat.ScrollTrack>
       <Chat.ScrollBody>
-        <Chat id={replyId} timeline={1}>
-          <Chat.Bubble>The build passed.</Chat.Bubble>
+        <Chat.Agent id={replyId} timeline={1}>
+          <Chat.Content>The build passed.</Chat.Content>
           <Chat.Status>
             <Chat.StatusItem>Completed</Chat.StatusItem>
             <Chat.StatusItem>
@@ -99,7 +128,7 @@ export function Conversation() {
               Copy reply
             </button>
           </Chat.Actions>
-        </Chat>
+        </Chat.Agent>
       </Chat.ScrollBody>
     </Chat.Scroll>
   );

package/dist/classes/chat.d.ts

@@ -1,5 +1,17 @@
 import type { ChatBubbleColor, ChatBubbleSize, ChatPlacement, ChatToolState } from "../components/chat/Chat.types";
 export declare const chatBaseClass = "chat";
+export declare const chatAgentClass = "chat-agent";
+export declare const chatContentClass = "chat-content";
+export declare const chatStreamingClass = "chat-streaming";
+export declare const chatWorkClass = "chat-work";
+export declare const chatWorkSummaryClass = "chat-work-summary";
+export declare const chatWorkBodyClass = "chat-work-body";
+export declare const chatInputAreaClass = "chat-input-area";
+export declare const chatQueueClass = "chat-queue";
+export declare const chatComposerClass = "chat-composer";
+export declare const chatComposerInputClass = "chat-composer-input";
+export declare const chatComposerActionsClass = "chat-composer-actions";
+export declare const chatComposerHintClass = "chat-composer-hint";
 export declare const chatAvatarClass = "chat-avatar";
 export declare const chatHeaderClass = "chat-header";
 export declare const chatBubbleBaseClass = "chat-bubble";

package/dist/classes/index.js

@@ -317,6 +317,18 @@ function getCardClasses({
 }
 // src/classes/chat.ts
 var chatBaseClass = "chat";
+var chatAgentClass = "chat-agent";
+var chatContentClass = "chat-content";
+var chatStreamingClass = "chat-streaming";
+var chatWorkClass = "chat-work";
+var chatWorkSummaryClass = "chat-work-summary";
+var chatWorkBodyClass = "chat-work-body";
+var chatInputAreaClass = "chat-input-area";
+var chatQueueClass = "chat-queue";
+var chatComposerClass = "chat-composer";
+var chatComposerInputClass = "chat-composer-input";
+var chatComposerActionsClass = "chat-composer-actions";
+var chatComposerHintClass = "chat-composer-hint";
 var chatAvatarClass = "chat-avatar";
 var chatHeaderClass = "chat-header";
 var chatBubbleBaseClass = "chat-bubble";
@@ -2911,6 +2923,7 @@ export {
   cascaderTagClass,
   chatActionsClass,
   chatActionsHoverClass,
+  chatAgentClass,
   chatAvatarClass,
   chatBaseClass,
   chatBubbleBaseClass,
@@ -2918,9 +2931,16 @@ export {
   chatBubbleFilledClass,
   chatBubbleSizeClasses,
   chatBubbleStreamingClass,
+  chatComposerActionsClass,
+  chatComposerClass,
+  chatComposerHintClass,
+  chatComposerInputClass,
+  chatContentClass,
   chatFooterClass,
   chatHeaderClass,
+  chatInputAreaClass,
   chatPlacementClasses,
+  chatQueueClass,
   chatReasoningClass,
   chatScrollBodyClass,
   chatScrollClass,
@@ -2929,6 +2949,7 @@ export {
   chatStatusClass,
   chatStatusItemClass,
   chatStatusValueClass,
+  chatStreamingClass,
   chatToolBaseClass,
   chatToolCallClass,
   chatToolHeaderClass,
@@ -2936,6 +2957,9 @@ export {
   chatToolStateClasses,
   chatToolStatusClass,
   chatTypingClass,
+  chatWorkBodyClass,
+  chatWorkClass,
+  chatWorkSummaryClass,
   checkboxBaseClass,
   checkboxBoxBaseClass,
   checkboxCheckmarkClass,

package/dist/components/chat/Chat.types.d.ts

@@ -38,6 +38,47 @@ export interface ChatBubbleProps extends ComponentProps<"div"> {
     filled?: boolean;
     /** Show the live streaming caret after the bubble content. */
     streaming?: boolean;
+    /** Collapse sent user messages exceeding six rendered lines. */
+    collapsible?: boolean;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+export type ChatAgentProps = Omit<ChatProps, "placement">;
+export interface ChatContentProps extends ComponentProps<"div"> {
+    streaming?: boolean;
+}
+export type ChatWorkProps = ComponentProps<"details">;
+export type ChatWorkSummaryProps = ComponentProps<"summary">;
+export type ChatWorkBodyProps = ComponentProps<"div">;
+export type ChatInputAreaProps = ComponentProps<"div">;
+export type ChatComposerColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
+export interface ChatComposerFormProps extends ComponentProps<"form"> {
+    color?: ChatComposerColor;
+    ghost?: boolean;
+}
+export type ChatComposerInputProps = ComponentProps<"textarea">;
+export type ChatComposerActionsProps = ComponentProps<"div">;
+export type ChatComposerHintProps = ComponentProps<"kbd">;
+export interface ChatQueueItem {
+    id: string;
+    text: string;
+    attachment?: {
+        src: string;
+        alt: string;
+    };
+}
+export interface ChatQueueProps extends Omit<ComponentProps<"section">, "children"> {
+    items: readonly ChatQueueItem[];
+    /** Stable identity of the next message; defaults to the first item. */
+    activeId?: string;
+    /** The application owns pending state and removes messages after acknowledgment. */
+    pendingIds?: readonly string[];
+    steerDisabled?: boolean;
+    onSteer: (id: string) => void;
+    onRemove: (id: string) => void;
+    /** Accessible queue name. @default "Waiting messages" */
+    label?: string;
 }
 export type ChatReasoningProps = ComponentProps<"details">;
 export interface ChatToolProps extends ComponentProps<"details"> {
@@ -124,6 +165,17 @@ export interface ChatComposerProps extends Omit<ComponentProps<"div">, "children
 type ChatPartComponent<T extends HTMLElement, P> = ForwardRefExoticComponent<P & RefAttributes<T>>;
 export type ChatComponent = ChatPartComponent<HTMLDivElement, ChatProps> & {
     Composer: ChatPartComponent<HTMLDivElement, ChatComposerProps>;
+    Agent: ChatPartComponent<HTMLDivElement, ChatAgentProps>;
+    Content: ChatPartComponent<HTMLDivElement, ChatContentProps>;
+    Work: ChatPartComponent<HTMLDetailsElement, ChatWorkProps>;
+    WorkSummary: ChatPartComponent<HTMLElement, ChatWorkSummaryProps>;
+    WorkBody: ChatPartComponent<HTMLDivElement, ChatWorkBodyProps>;
+    InputArea: ChatPartComponent<HTMLDivElement, ChatInputAreaProps>;
+    Queue: ChatPartComponent<HTMLElement, ChatQueueProps>;
+    ComposerForm: ChatPartComponent<HTMLFormElement, ChatComposerFormProps>;
+    ComposerInput: ChatPartComponent<HTMLTextAreaElement, ChatComposerInputProps>;
+    ComposerActions: ChatPartComponent<HTMLDivElement, ChatComposerActionsProps>;
+    ComposerHint: ChatPartComponent<HTMLElement, ChatComposerHintProps>;
     Avatar: ChatPartComponent<HTMLDivElement, ChatAvatarProps>;
     Header: ChatPartComponent<HTMLDivElement, ChatHeaderProps>;
     Bubble: ChatPartComponent<HTMLDivElement, ChatBubbleProps>;

package/dist/components/chat/ChatPrimitives.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ChatAgentProps, ChatContentProps, ChatQueueProps, ChatComposerFormProps } from "./Chat.types";
+export declare const ChatAgent: React.ForwardRefExoticComponent<Omit<ChatAgentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatContent: React.ForwardRefExoticComponent<Omit<ChatContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatWork: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
+export declare const ChatWorkSummary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const ChatWorkBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatInputArea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatComposerForm: React.ForwardRefExoticComponent<Omit<ChatComposerFormProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare const ChatComposerInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const ChatComposerActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatComposerHint: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/** Presentation only: actions request application state changes, never dequeue locally. */
+export declare const ChatQueue: React.ForwardRefExoticComponent<Omit<ChatQueueProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/chat/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Chat";
 export * from "./ChatComposer";
+export * from "./ChatPrimitives";
 export type * from "./Chat.types";